@charset "utf-8";

button {border:none;background:none;cursor:pointer;font-family:'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif;font-size:0.75rem;}

/* 게시판 상단 재생버튼 */
.title-sticky ul {margin:0;padding:0;display:flex;justify-content:flex-end;gap:5px;}
.title-sticky ul li {padding:5px 10px;font-size:0.88rem;color:#959595;background:#eee;border-radius:5px;border:1px solid #CCC}
/* 평상시 버튼 글자색 */
.title-sticky ul li button {font-family: 'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif;color:#959595;}
/* hover 시 */
.title-sticky ul li:hover {background:#666;border-color:#fff;border:1px solid #eee}
.title-sticky ul li:hover button {font-family:'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif;color:#FFF !important;}

@media (max-width:992px) {
  .title-sticky ul {margin:0;padding:0;display:flex;justify-content:flex-start;gap:5px;}
  .title-sticky ul li {padding:2px 6px;font-size:0.75rem;}
  .hidden-xs {display: none !important;}
}



/* 팝업 리스트 */
.popup_bg {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:9999;justify-content:center;align-items:center;opacity:0;transition:opacity 0.3s;}
.popup_box {background:#fff;width:90%;max-width:600px;padding:20px;border-radius:10px;position:relative;max-height:70%;overflow-y:auto;}
.popup_box .popup_ul {list-style:none;padding:0;margin:14px 0 0 0;overflow-y:auto;}
.popup_box .popup_ul input {margin-right:10px;}

.popup_list {margin-top:15px;text-align:right;}
.popup_list span {display:inline-block;width:fit-content;padding:4px 6px;border:1px solid #CCC;border-radius:6px;margin-left:10px;}
.popup_list span:hover {background:#333;color:#FFF;}

ul.pop_list {width:100%;display:flex;justify-content:flex-start;flex-wrap:wrap;padding:10px;border-bottom:1px dotted #CCC;}
ul.pop_list li {padding:0px;}
ul.pop_list li:first-child {width:20px;}
ul.pop_list li:nth-child(2) {width:100px;text-align:center;}
ul.pop_list li:nth-child(3) {width:calc(100% - 245px);}
ul.pop_list li:nth-child(4) {width:60px;height:26px;line-height:16px;text-align:center;border:1px solid #CCC;border-radius:6px;}
ul.pop_list li:nth-child(5) {width:60px;height:26px;line-height:16px;text-align:center;border:1px solid #CCC;border-radius:6px;margin-left:5px;}

.playlist-item {margin-bottom:10px;display:flex;justify-content:flex-start ;}



/* ====== ✅ 노란색 토글스위치 복구버전 ====== */
/* 구조 예시:
<span class="checkbox-wrapper-35">
  <input type="checkbox" id="switch1" class="switch">
  <label for="switch1"></label>
</span>
*/

.checkbox-wrapper-35 {display:inline-block;position:relative;}

/* 체크박스 숨김 */
.checkbox-wrapper-35 .switch {position:absolute;opacity:0;width:0;height:0;}

/* 토글 기본틀 */
.checkbox-wrapper-35 .switch + label {display:inline-block;width:26px;height:14px;background-color:#ccc;border-radius:999px;position:relative;cursor:pointer;transition:background-color 0.2s ease-in-out;vertical-align:middle;}

/* 토글 안쪽 동그라미 */
.checkbox-wrapper-35 .switch + label::after {content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;background-color:#fff;border-radius:50%;transition:all 0.2s ease-in-out;box-shadow:0 1px 2px rgba(0,0,0,0.2);}

/* 체크 상태 - 노란색 스위치 ON */
.checkbox-wrapper-35 .switch:checked + label {background-color:#ffb500;}

/* 체크 시 공이 오른쪽으로 이동 */
.checkbox-wrapper-35 .switch:checked + label::after {transform:translateX(16px);}

/* 포커스 상태 (접근성 강화) */
.checkbox-wrapper-35 .switch:focus + label {box-shadow:0 0 0 2px rgba(255,181,0,0.4);}

/* 반응형 대응 */
@media (max-width:768px) {
  .checkbox-wrapper-35 .switch + label {width:34px;height:18px;}
  .checkbox-wrapper-35 .switch + label::after {width:14px;height:14px;}
}


textarea {width:100%;padding:10px;margin-top:20px;border:1px solid #CCC;border-radius:10px;}

.more_btn {width:100%;padding:10px;text-align:center;}
.more_btn a {padding:10px;border:1px solid CCC;background:#f2f2f2;}
.more_btn a:hover {background:#999;color:#FFF;}


@media (max-width:1694px) { 
	.list_container ul li:nth-child(3) {width:40%;font-size:0.85rem;font-weight:400;} /* title */

}

@media (max-width:1385px) { 
	.list_container ul li:nth-child(3) {width:30%;font-size:0.85rem;font-weight:400;} /* title */

}

@media (max-width:1200px) { 
	.list_container ul li:nth-child(3) {width:50%;font-size:0.85rem;font-weight:400;} /* title */

}

@media (max-width:1070px) { 
	.list_container ul li:nth-child(3) {width:40%;font-size:0.85rem;font-weight:400;} /* title */

}

@media (max-width:880px) { 
	.list_container ul li:nth-child(3) {width:30%;font-size:0.85rem;font-weight:400;} /* title */

}


@media (max-width:765px) { 
  .list_container ul {gap:5px;margin-bottom:20px;border:1px solid #ccc;border-radius:10px;padding:10px;}
  .list_container ul li:first-child {width:10%;order:1;} /* number */
  .list_container ul li:nth-child(2) {width:98%;order:3;} /* thumb */
  .list_container ul li:nth-child(3) {width:88%;font-size:0.9rem;font-weight:500;order:2;} /* title */
  .list_container ul li:nth-child(4) {width:22%;text-align:right;order:4} /* choice */
  .list_container ul li:nth-child(5) {width:22%;text-align:right;order:5} /* name */
  .list_container ul li:nth-child(6) {width:22%;text-align:right;order:6} /* date */
  .list_container ul li:nth-child(7) {width:22%;text-align:right;order:7;} /* hit */

  .list_container ul li.thumb_img {width:100%;}

  ul.pop_list li:first-child {width:80px;order:1;}
  ul.pop_list li:nth-child(2) {width:100px;text-align:center;order:3;}
  ul.pop_list li:nth-child(3) {width:80%;order:2;}
  ul.pop_list li:nth-child(4) {width:60px;order:4;}
  ul.pop_list li:nth-child(5) {width:60px;order:5;}

	.d_popup .wins{width:90%}
}

@media (max-width:496px) { 
  .popup_list span {padding:4px 4px;margin-left:4px;}
  .d_popup .wins {width:80%;height:80vh;overflow-y:auto;}

}







/* 
.list_container {width:100%;padding:10px;margin-bottom:10px;}
.new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}

.all_box {margin:10px 0 20px 0;}
.list_container ul {display:flex;justify-content:flex-start;flex-wrap:wrap;align-items:center;}
.list_container ul:nth-child(even) {background:#f0f0f0;}
.list_container ul li {padding:8px 5px;}

.list_container ul li:first-child {width:5%;text-align:center;}
.list_container ul li:nth-child(2) {width:162px;}
.list_container ul li:nth-child(3) {width:50%;font-size:0.85rem;font-weight:400;}
.list_container ul li:nth-child(4) {width:80px;text-align:center;}
.list_container ul li:nth-child(5) {width:100px;text-align:right;}
.list_container ul li:nth-child(6) {width:60px;text-align:right;}
.list_container ul li:nth-child(7) {width:60px;text-align:right;}

span.red_chk {color:red;font-weight:bold;}
span.hot-label {color:red;font-size:0.65rem;font-weight:300;}
 */
 
/* popup 뭔지 확인해야 한다. 
.d_popup{display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:1000}
.d_popup.on{display:block}
.d_popup .bg{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.6);}
.d_popup .wins{display:none;position:absolute;width:600px;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;}
.d_popup .wins.on{display:block}
.d_popup .wins .inner{max-height:700px;overflow-y:auto;padding:30px;font-size:14px;color:#555;line-height:1.6;width:100%;padding-top:20px;}
.d_popup .wins .inner:after{display:block;content:'';clear:both}
.d_popup .wins .close{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:50%;background:#000;color:#FFF;cursor:pointer;text-align:center;line-height:40px;}
.d_popup .wins .tit {line-height:100%;font-size:0.9rem;color:#000;padding-left:30px;padding-top:30px;}
 */


/* 뭔지 확인해야 한다. 이거 때문에 반응형시 우측 여백 생긴다. 빼도 되면 빼자. 아마 원본 소스 구조인거 같다.
#board-menu ul li svg, #bo_w .btn_confirm svg, .bo_vc_w .btn_submit svg, #bo_btn_top .btn_bo_user svg {display:block;width:18px;height:18px;margin:0 auto 8px;}
#bo_cate {margin:0 0 10px;}
button {border-style:0;padding:0;all:unset;cursor:pointer;}
.category-box {position:relative;padding-right:32px;min-height:38px;}
.category-box button {background:#000;text-indent:-9999px;background:#000 url(./img/chevron-down.svg) no-repeat center center;position:absolute;right:0;top:0;width:30px;height:38px;}
.category-box.active button {transform:scaleY(-1);}
#board-menu {width:60px;height:60px;position:fixed;right:18%;bottom:10px;z-index:1000;text-align:center;}
#board-menu > button {width:60px;height:60px;border-radius:50%;background-color:#52b69a;color:#fff;border:0;overflow:hidden;position:relative;z-index:10;} 
#board-menu > button svg {position:absolute;left:50%;top:50%;transition:.3s;transform:translate(-50%, -50%);} 
#board-menu > button svg:nth-of-type(2) {transform:translate(-50%, 60px);} 
#board-menu.active > button svg:nth-of-type(1) {transform:translate(-50%, -60px);} 
#board-menu.active > button svg:nth-of-type(2) {transform:translate(-50%, -50%);} 
#board-menu li {width:60px;height:60px;position:absolute;line-height:5px;border-radius:50%;background-color:#52b69a;transform:translate(0, -60px);
    transition:all .4s;text-align:center;z-index:1;opacity:0;}
#board-menu li:hover {background-color:#ff0000;}
#board-menu li a {color:#fff;position:relative;top:20%;left:0;}
#board-menu li button {color:#fff;position:relative;top:20%;left:0;font-size:.9em;}
#board-menu.active li:nth-child(1) {opacity:1;transform:rotate(-90deg) translateX(60px) translateY(-70px) rotate(90deg);transition-delay:0s;}
#board-menu.active li:nth-child(2) {opacity:1;transform:rotate(-90deg) translateX(60px) translateY(-140px) rotate(90deg);transition-delay:0.1s;}
#board-menu.active li:nth-child(3) {opacity:1;transform:rotate(-90deg) translateX(60px) translateY(-210px) rotate(90deg);transition-delay:0.2s;}
#board-menu.active li:nth-child(4) {opacity:1;transform:rotate(-90deg) translateX(130px) translateY(-210px) rotate(90deg);transition-delay:0.3s;}
#board-menu.active li:nth-child(5) {opacity:1;transform:rotate(-90deg) translateX(130px) translateY(-140px) rotate(90deg);transition-delay:0.4s;}
#board-menu.active li:nth-child(6) {opacity:1;transform:rotate(-90deg) translateX(130px) translateY(-70px) rotate(90deg);transition-delay:0.5s;}
#board-menu.active li:nth-child(7) {opacity:1;transform:rotate(-90deg) translateX(130px) translateY(0px) rotate(90deg);transition-delay:0.6s;}
  */
  
  
  
  
/* list_popup.js checkbox  */
/* 
  .checkbox-wrapper-34 {
    --blue:#0D7EFF;
    --g08:#E1E5EB;
    --g04:#848ea1;
  }

  .checkbox-wrapper-34 .tgl {
    display:none;
  }
  .checkbox-wrapper-34 .tgl,
  .checkbox-wrapper-34 .tgl:after,
  .checkbox-wrapper-34 .tgl:before,
  .checkbox-wrapper-34 .tgl *,
  .checkbox-wrapper-34 .tgl *:after,
  .checkbox-wrapper-34 .tgl *:before,
  .checkbox-wrapper-34 .tgl + .tgl-btn {
    box-sizing:border-box;
  }
  .checkbox-wrapper-34 .tgl::selection,
  .checkbox-wrapper-34 .tgl:after::selection,
  .checkbox-wrapper-34 .tgl:before::selection,
  .checkbox-wrapper-34 .tgl *::selection,
  .checkbox-wrapper-34 .tgl *:after::selection,
  .checkbox-wrapper-34 .tgl *:before::selection,
  .checkbox-wrapper-34 .tgl + .tgl-btn::selection {
    background:none;
  }
  .checkbox-wrapper-34 .tgl + .tgl-btn {
    outline:0;
    display:block;
    width:57px;
    height:27px;
    position:relative;
    cursor:pointer;
    user-select:none;
    font-size:12px;
    font-weight:400;
    color:#fff;
  }
  .checkbox-wrapper-34 .tgl + .tgl-btn:after,
  .checkbox-wrapper-34 .tgl + .tgl-btn:before {
    position:relative;
    display:block;
    content:"";
    width:44%;
    height:100%;
  }
  .checkbox-wrapper-34 .tgl + .tgl-btn:after {
    left:0;
  }
  .checkbox-wrapper-34 .tgl + .tgl-btn:before {
    display:inline;
    position:absolute;
    top:7px;
  }
  .checkbox-wrapper-34 .tgl:checked + .tgl-btn:after {
    left:56.5%;
  }

  .checkbox-wrapper-34 .tgl-ios + .tgl-btn {
    background:var(--g08);
    border-radius:20rem;
    padding:2px;
    transition:all 0.4s ease;
    box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  }
  .checkbox-wrapper-34 .tgl-ios + .tgl-btn:after {
    border-radius:2em;
    background:#fff;
    transition:left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
    box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }
  .checkbox-wrapper-34 .tgl-ios + .tgl-btn:before {
    content:"No";
    left:28px;
    color:var(--g04);
    transition:left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .checkbox-wrapper-34 .tgl-ios + .tgl-btn:active {
    box-shadow:inset 0 0 0 30px rgba(0, 0, 0, 0.1);
  }
  .checkbox-wrapper-34 .tgl-ios + .tgl-btn:active:after {
    padding-right:0.4em;
  }
  .checkbox-wrapper-34 .tgl-ios:checked + .tgl-btn {
    background:var(--blue);
  }
  .checkbox-wrapper-34 .tgl-ios:checked + .tgl-btn:active {
    box-shadow:inset 0 0 0 30px rgba(0, 0, 0, 0.1);
  }
  .checkbox-wrapper-34 .tgl-ios:checked + .tgl-btn:active:after {
    margin-left:-0.4em;
  }
  .checkbox-wrapper-34 .tgl-ios:checked + .tgl-btn:before {
    content:"Yes";
    left:4px;
    color:#fff;
  }
*/