/* 공통 스타일 */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color:#000;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.material-icons {
    font-size: 24px;
}

/* PC 메뉴 스타일 */
.pc-menu {
    display: none; /* 기본적으로 숨김 */
}

.pc-menu ul {
    justify-content: space-around;
    width: 100%;
}

.pc-menu li {
    display: flex;
    align-items: center;
    font-size: 18px;
}

/* 모바일 메뉴 스타일 */
.mobile-menu ul {
left:0;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    text-align: center;
}

.mobile-menu li {
    display: flex;
    align-items: center;
    /*flex-grow: 1;*/
}


fieldset {
    margin-bottom:15px;
    margin: 15px 0;
    padding:5px;
    border:0;
}
legend {
    padding:10px;
}

.container {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: center;*/
    /*justify-content: space-between;*/
}

.card {
display:flex;
flex-direction: column;
justify-content: flex-start;
margin:2px 0;
padding:10px;
height:auto;
/*width: calc(50% - 10px);*/
/*width:41vw;
height:auto;*/
}
/*
.card .blank {
  visibility: hidden;
}
*/
.card div {
/*margin:5px 3px;*/
align-items: center;
}
.thumbnail {
text-align:center;
}
.thumbnail img {
border:2px solid #00704A;
/*width:40vw;*/
width:100%;
height:auto;
}
.title {
text-align:center;
/*width:41vw;*/
font-size:16px;
}
.link {
  display: flex;
  align-items: center;
  /*justify-content: space-around;*/
  justify-content: center;
  width:100%;
/*margin:0 3px;*/
}
.link a {
/*margin:3px;*/
  color:#1fa1eb;
  margin:0 10px;
}


/* 반응형 스타일 */
@media (min-width: 768px) {
    body {
        padding-top:45px;
        padding-bottom:100px;
    }
    .pc-menu {
        /*display: block; /* 화면이 넓을 때 보임 */
        display: flex;
    display: none; /* 기본적으로 숨김 */
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        width: 100%;
        height: 45px;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
    }

    .mobile-menu {
        display: none; /* 화면이 넓을 때 숨김 */
    }

    .container {
        justify-content: flex-start;
    }
    .card {
        width:300px;
        justify-content: flex-start;
    }

    .audio-player {
        bottom:0;
    }
}

@media (max-width: 767px) {
    body {
        padding-bottom:85px;
    }
    .pc-menu {
        display: none; /* 화면이 좁을 때 숨김 */
    }

    .mobile-menu {
        /*display: block; /* 화면이 좁을 때 보임 */
        display: flex;
        display: none; /* 화면이 좁을 때 숨김 */
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 0;
        width: 100%;
        height:40px;;
        background-color: #fff;
        border-top: 1px solid #ccc;
    }

    .container {
        justify-content: space-between;
    }
    .card {
        /*width:44vw;*/
        width:50%;
    }

    .audio-player {
        bottom:40px;
        bottom:0;
    }
}




/* 모달 기본 스타일 */
.modal {
  display: none; /* 기본적으로 숨김 */
  position: fixed; 
  z-index: 2000; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: auto; /* 스크롤이 필요할 때 */
  background-color: rgb(0,0,0); /* 색상 */
  background-color: rgba(0,0,0,0.4); /* 불투명 효과 */
}

/* 모달 콘텐츠 스타일 */
.modal-content {
  /*background-color: ivory;*/
  position:fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 중앙 정렬 */
  background-color: rgba(0, 102, 51, 0.9);
  box-shadow: 0 -2px 5px rgba(0, 102, 51, 0.2);
  padding: 20px;
  border: 1px solid #888;
  width: 60%; /* 너비 */
  max-width: 228px;
}
.modal-content a {
  text-decoration: none;
}
.modal-content button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
padding:5px 10px;
height:40px;
}

/* 닫기 버튼 스타일 */
.close {
  float: right;
}
.close button {
  /*color: #aaa;*/
  font-size: 24px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.audio-player {
  position: fixed;
  left: 0;
  width: 100%;
  height: 45px;
  background-color: rgba(0, 102, 51, 0.8);
  border-top: 1px solid #00704a;
  /*box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);*/
  box-shadow: 0 -2px 5px rgba(0, 102, 51, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  z-index: 1000; /* 항상 위에 보이도록 */
}

.info {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: rgba(0, 102, 51, 0.3);
  /*background-color: rgba(0, 135, 84, 0.9);*/
  color:#fff;
}

.track-container {
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  position: relative;
}

#trackTitle {
  display: inline-block;
  /*padding-left: 100%;
  animation: marquee 5s linear infinite;*/
}

@keyframes marquee {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

.controls {
  display: flex;
  align-items: center;
}

.audio-player .material-icons {
  cursor: pointer;
  color:#fff;
  margin: 0 5px;
}

/*
#volumeSlider {
  width: 100px;
  margin-left: 10px;
}
*/

#volumeSlider {
  -webkit-appearance: none; /* 브라우저 기본 스타일 제거 */
  width: 50px;
  height: 5px;
  background: #4CAF50; /* 슬라이더 트랙 색상 */
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
}

#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none; /* 브라우저 기본 스타일 제거 */
  appearance: none;
  width: 15px;
  height: 15px;
  /*background: #0f5132; /* 슬라이더 썸 색상 */
  background: #fff;
  cursor: pointer;
  border-radius: 50%;
}

#volumeSlider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  /*background: #0f5132; /* 슬라이더 썸 색상 */
  background: #fff;
  cursor: pointer;
  border-radius: 50%;
}


#audio-player {
  position: fixed;
  bottom: 30px;
  width: 100%;
  padding: 10px;
  display: none;
}

#audio-player audio {
  width: 100%;
}

iframe {
width:100%;
}