@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 포인트 컬러 #a7cdf4, #fac13a 배경 #fffafc */

/* 스크롤바 */
::-webkit-scrollbar{ width:5px; }
::-webkit-scrollbar-track{ background:#fffafc; }
::-webkit-scrollbar-thumb{ background:#a7cdf4; }
::-webkit-scrollbar-thumb:hover{ background:#fac13a; }

/* 드래그 색상 */
::selection { color:transparent; background:#fFF; text-shadow: 0 0 2px #fac13a; transition: all 250ms ease-in; }
::-moz-selection { color:transparent; background:#fff; text-shadow: 0 0 2px #fac13a; transition: all 250ms ease-in; }

/* 마우스 커서 */
* {cursor: url(https://ani.cursors-4u.net/nature/nat-11/nat1045.cur), progress !important;}
*:focus, a:hover, a i:hover, img, .title, #sidebar_btn span {cursor: url(https://ani.cursors-4u.net/nature/nat-11/nat1045.cur), progress !important;} 

body, div, form, fieldset, legend, textarea, p, th, td, input, select, textarea, button { margin:0; padding:0; outline:none; }
body, a, input, textarea { font-family:'Roboto Condensed', 'Pretendard-Regular', sans-serif; font-size:9.5pt; color:#666; line-height:200%; word-wrap:break-word; }
ul, li { list-style:none; padding-left:0px; }
body { overflow-y:scroll; background:url(./images/hn_bg.png) no-repeat center center fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; }

a, a:active { text-decoration:none; }
a:hover { color:#a7cdf4; }

#tistorytoolbarid { display:none; }
iframe, video, embed, object { max-width:100%; }

figure { vertical-align:top; } /* 본문 이미지 여백 */
.imageblock:hover { opacity:0.7; filter:alpha(opacity=70); filter:gray; -webkit-filter:grayscale(100%); } /* 본문(imageblock) 이미지 흑백 롤오버 */

a, img, a:link, a:hover, img:hover, .imageblock, .imageblock:hover, textarea, input, .list_content .thumb_img, .list_content .thumb_img:hover, .cover-thumbnail-list ul li .thum, .cover-thumbnail-list ul li .thum:hover, #menubar-mo i, #menubar-mo i:hover, .category > ul > li > ul > li:hover, .category > ul > li > ul > li { transition: all 0.5s ease; }

/* 페이지 부드럽게 전환 css */
#container { animation: fadein 3s; -moz-animation: fadein 3s; /* Firefox */ -webkit-animation: fadein 3s; /* Safari and Chrome */ -o-animation: fadein 3s; /* Opera */ }
@keyframes fadein {
    from { opacity:0; }
    to { opacity:1; }
}
 @-moz-keyframes fadein { /* Firefox */
    from { opacity:0; }
    to { opacity:1; }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from { opacity:0; }
    to { opacity:1; }
}
@-o-keyframes fadein { /* Opera */
    from { opacity:0; }
    to { opacity: 1; }
}

/* 메인화면 */
.mainbox { width:100%; display:flex; align-items: center; flex-direction: column; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); }
.main_img { position: relative; width: 560px; height: 560px;  }
.main_img::before { content: ''; width: 430px; height: 192px; background: url(./images/hn_logo.png) no-repeat; background-size: 100%; position: absolute; z-index: 9; bottom: -80px; left: 50%; transform: translateX(-50%); }
.main_img img { width: 100%; }
.main_img a { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 30px; box-shadow: 0px 0px 10px #fff; }

@media only screen and (max-width:680px) {
	.main_img { width: 320px; height: 320px; }
	.main_img::before { width: 220px; height: 98px; bottom: -40px; }
}

/* 전체 구조 */
.logowr { width:1030px; margin:0px auto; overflow:hidden; }
.logo { width:780px; float:right; text-align:center; margin:30px 0 10px 0;}

#dim { position: fixed; top: 0; width: 0; overflow: hidden; opacity: 0; z-index: 9998; height: 100%; background: rgba(0,0,0,0.6); }
#dim.visible { opacity: 1; width: 100%; }

/* pc 카테고리 */
.category_box { width:200px; height:auto; float:left; text-align:center; box-sizing:border-box; } 
.sns_wrap { display:flex; padding-left:25px; }
.sns_wrap a { display:block; padding:5px 12px; background:#edf9fd; border-bottom:0; border-radius: 10px 10px 0 0; margin:0 2.5px; }
.sns_wrap a i { color:#a7cdf4; }
.sns_wrap a:hover i { color:#fac13a; }
.ctop { width:200px; height:200px; position:relative; margin-bottom:30px; }
.ctop:before { content:''; position:absolute; z-index:2; top:-25px; right:-15px; width:76px; height:66px; background:url('./images/hn_icon.png'); background-size:100%; }
.ctop .imgbox { position:relative; z-index:1; background:#fff; width:100%; height:100%; overflow:hidden; border-radius:20px; border:3px solid #edf9fd; box-shadow:6px 6px 0px #d4ecf7; box-sizing:border-box; }
.ctop .imgbox img { width:100%; vertical-align: top; }

.pc_cate { margin-bottom:60px; }
.category { width:100%; }
.category a { font-family: 'yg-jalnan'; text-decoration:none; display:block; width:100%; height:100%; text-align:center; box-sizing:border-box; padding:0 15px; line-height:4em; text-shadow: 1px 1px 0px #fff; } /* a 공통 */
.tt_category { margin:0; }

.category ul li li { width:100%; }
.category > ul > li > ul > li { position: relative; border-radius:30px; margin:15px 0; box-sizing:border-box; } /* box */
.category > ul > li > ul > li:nth-child(odd) { border:3px solid #edf9fd; background-color: #d4ecf7; }
.category > ul > li > ul > li:nth-child(even) { border:3px solid #f9f7f1; background-color: #f9efc2; }
.category > ul > li > ul > li:nth-child(odd) a { color: #a7cdf4; }
.category > ul > li > ul > li:nth-child(even) a { color: #fac13a; }
.category > ul > li > ul > li:nth-child(odd)::before { content:''; position:absolute; left:15px; top:18px; background:url(./images/hn_ht2.png) no-repeat; background-size:100%; width:15px; height:14px; }
.category > ul > li > ul > li:nth-child(even)::before { content:''; position:absolute; left:15px; top:18px; background:url(./images/hn_ht1.png) no-repeat; background-size:100%; width:15px; height:14px; }
.category > ul > li > ul > li:nth-child(odd)::after { content:''; position:absolute; right:15px; top:18px; background:url(./images/hn_ht2.png) no-repeat; background-size:100%; width:15px; height:14px; }
.category > ul > li > ul > li:nth-child(even)::after { content:''; position:absolute; right:15px; top:18px; background:url(./images/hn_ht1.png) no-repeat; background-size:100%; width:15px; height:14px; }

.category > ul > li > ul > li > ul { display:none; overflow: hidden; } /* box */ 
.category ul li ul li li:first-child { border-top:1px dashed #a7cdf4; }
.category ul li ul li li:not(:last-child) { border-bottom:1px dashed #a7cdf4; }

.category > ul > li > ul > li > a, .category > ul > li > ul > li > ul > li > a { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; } /* 카테고리가 너무 길어지면 줄임 */ 
.category > ul > li > a, .category > ul > li > ul > li > a > span.c_cnt, .category span.c_cnt { display:none; }

/* 페이지 박스 */
#paging_box { border:0; }
#paging_box:after { display:block; clear:both; content:''; }
.paging { text-align:center; margin:30px 0 100px 0; }
.paging i { font-weight:700; }
.paging a { padding:12px 14px 12px 14px; margin:5px; border-radius:10px; background:#f9efc2; border-radius:50%; border:3px solid #f9f7f1; color:#fac13a; }
.paging a.top { background-color: #d4ecf7; border-color: #edf9fd; color:#a7cdf4; }
.paging a:hover { color:#fff; }

/* content */
#conwr { text-align:center; width:1030px; margin:0 auto; }
#conwr:after { display:block; clear:both; content:''; }
#container { width:780px; float:right; margin-top: 40px; }
#content { padding-bottom: 10px; border-radius:20px; border:3px solid #f9f7f1; background:#fff; box-shadow: 6px 6px 0px #f9efc2; }

/* 검색 결과 리스트 */
#li_cate { text-align:center; padding:15px 0 5px 0; }
#li_cate span { font-size:0.9em; font-weight:700; }
#li_cate span.cate_name { font-weight:700; text-transform:uppercase; }
#li_cate span.cate_num { font-style:italic; color:#fac13a; } 
#li_cate i { font-size:1.2em; vertical-align: middle; }

/* article_skin  */
.list_wrap {  }
.list_wrap:after { display:block; clear:both; content:''; }
#list_board .list_in, #list_n .list_in { margin-top:15px; }
.list_wrap .list_content .title { word-wrap:break-word; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list_wrap .list_content .date { font-size:0.8em; font-weight:700; color:#999; } 

/* list_content */
/* 갤러리형 */
#list_n .list_content { float:left; width:18.5%; margin:0 3.2%; }
#list_n .list_content .thumb_img { overflow:hidden; border:2px solid #edf9fd; border-radius:50%; }
#list_n .list_content .thumb_img img { width:100%; height:100%; border:0; display:block; }
#list_n .list_content .thumb_img:hover { border:2px solid #f9f7f1; }
#list_n .list_content a:hover .thumb_img img { opacity:0.7; filter:alpha(opacity=70); filter:gray; -webkit-filter:grayscale(100%); } /* 썸네일 롤오버 */

#list_n .list_content .title { display:block; padding-top:10px; } /* 타이틀 */
#list_n .list_content .date { text-align:center; padding-bottom:10px; } /* 발행 일자 */
#list_n .list_content:hover { border:0; }

/* 일반목록형 */
#list_board { text-align:left; padding:0 30px; margin-bottom:15px; }
#list_board .list_content { padding:15px 20px; border-bottom:1px solid #ebebeb; border-top:1px solid #ebebeb; margin-top:-1px; } /* 일반목록 box */
#list_board .list_content:after { display:block; clear:both; content:"" }
#list_board .title { float:left; width:70%; line-height:220%; } /* 타이틀 */
#list_board .date { float:right; display:inline-block; text-transform:uppercase; padding:0 5px 0 10px; } /* 발행 일자 */

#list_board .thumb_img, #list_board .thumb_img img { display:none; } /* 일반목록형에서 갤러리형 감추기 */

/* 방명록&댓글 */
.guestbook { text-align:left; padding:10px 20px; }
.gb_write span { font-weight:700; font-size:0.8em; }
.comment { padding: 0 10px; text-align:left; display:none; }

.gb_write textarea, .co_write textarea { width:100%; height:100px; border:1px solid #e8e8e8; overflow:hieedn; margin-top:10px; }
.gb_write textarea:focus, .co_write textarea:focus, .gb_write textarea:hover, .co_write textarea:hover { height:150px; }
.gb_write .submit input, .co_write .submit input { width:100%; height:40px; margin:5px 0 15px 0; font-weight:700; font-size:0.8em; background:#fafafa; color:#a7cdf4; cursor:pointer; border:0; border-bottom:1px solid #e8e8e8; border-top:1px solid #e8e8e8; }
.gb_write .submit input:hover, .co_write .submit input:hover { background:#fac13a; color:#fff; }
.gb_write textarea:focus, .co_write textarea:focus, .gb_write textarea:hover, .co_write textarea:hover, .guest_input:hover { border:1px solid #fac13a; } /* 방명록&댓글 폼 */

/* 비로그인시 보이는 방명록&댓글 input */
.name_rp,.pass_rp { font-weight:700; font-size:0.8em; width:20%; height:30px; line-height:40px; padding:0px 15px 0px 15px; margin:10px 0 5px 0; border-bottom:1px solid #e8e8e8; border-left-width:0px; border-right-width:0; border-top:1px solid #e8e8e8; background:none; }
.name_rp { margin-right:20px; }

.pass_rp:hover, .name_rp:hover { border-bottom:1px solid #fac13a;  border-top:1px solid #fac13a; }

/* 방명록&댓글 리스트 */
.gb_list ol { padding:0px; list-style:none; }
.comment ol { padding:0px; list-style:none; }
.gb_list ul, .comment ul { list-style:none; }
.gb_list ol li, .comment ol li { margin-bottom:15px; }
.gb_list ol li ul li, .comment ol li ul li { padding-top:5px; border:0; margin-bottom:0px; }
.gb_list li ul li, .comment li ul li { word-break:break-all; }
.gb_list li .name, .comment li .name { font-weight:700; }
.gb_list li .date, .comment li .date { font-weight:700; font-size:0.8em; color:#999; padding:0 5px; }
.gb_list li .date a, .comment li .date a { font-size:0.8em; color:#999; }
.gb_list li .admin, .comment li .admin { display:none; }
.gb_list li .admin i, .comment li .admin i { font-size:0.8em; }
.rp_line { padding:10px; border-top:3px double #e8e8e8; border-bottom:1px dotted #e8e8e8; margin-bottom:10px; }
.rrp_line { padding:10px; border-bottom:3px double #e8e8e8; margin-top:-5px;  margin-bottom:10px; background:#fafafa; }
.rp_desc { border-bottom:3px double #e8e8e8; padding-bottom:10px; padding-left:10px; padding-right:10px; }
.rrp_line:hover .admin, .rp_line:hover .admin { display:inline-block; text-decoration:none; }

/* 비밀글 체크박스 */
input[id="secret"] { display:none; }
input[id="secret"]:checked + label:before { font-family:'xeicon'; content:"\e964  SECRET"; color:#a7cdf4; margin-left:5px; font-size:0.8em; font-weight:700; }
input[id="secret"] + label:before { font-family:'xeicon'; content:"\e965  UNLOCK"; color:#fac13a; margin-left:5px; font-size:0.8em; font-weight:700; }

/* 본문 */
.entry { text-align:center; padding:10px 10px; }

.article { padding:5px 5px 10px 5px; text-align:left; }
.article a { text-decoration:none; }

.ar_title { position:relative; text-align:center; padding:0 30px 0 30px; }
.ar_title a { font-size:1.2em; font-weight:700; padding:0 15px; } /* 타이틀 */
.ar_cont { margin:10px auto; text-align:center; display:inline-block; padding:5px 25px; border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; font-weight:700; color:#999; }
.ar_cont span.ar_cate { margin-right:10px; font-size:0.8em; }
.ar_cont span.ar_data { font-size:0.8em; }
.ar_cont span.ar_cate i, .ar_cont span.ar_data i { margin-right:2px; font-size:0.8em; } /* 본문 상단 */
.ar_co { overflow:hidden; font-weight:700; border-top:1px solid #e8e8e8; padding:10px 15px 0 15px; } 
.ar_co a { color:#999; float:right; }
.ar_co a:hover { color:#a7cdf4; } /* 본문 하단 */

/* 공지 사항 */
.notice { padding:15px; }

/* 태그로그 */
.taglog { margin:0 auto; }
.tag_in { text-align:left; font-weight:700; font-weight:bold; font-size:0.8em; border-bottom:1px solid #e8e8e8; margin:10px 20px 35px 20px; padding:0 0 20px 10px; }
.tag_in i { padding-right:5px; }
.taglog ul, .keywords ul { margin:0; padding:0 20px 20px 20px; }
.taglog li, .keywords li { display:inline-block; margin-bottom:20px; }
.taglog a { margin-right:15px; text-transform:uppercase; }
.taglog .cloud1, .taglog .cloud2, .taglog .cloud3, .taglog .cloud4, .taglog .cloud5 { background:#a7cdf4; border-radius:8px; color:#fff; padding:8px 15px 10px 15px; }
.taglog .cloud1:hover, .taglog .cloud2:hover, .taglog .cloud3:hover, .taglog .cloud4:hover, .taglog .cloud5:hover { background:#fac13a; }
.taglog .cloud1:after, .taglog .cloud2:after, .taglog .cloud3:after, .taglog .cloud4:after, .taglog .cloud5:after { content:'●'; padding-left:5px; }

/* 더보기 */
div[data-ke-type='moreLess'] .btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless { display:inline-block !important; margin:5px 0 !important; }
div .btn-toggle-moreless:before, div .btn_more:before { font-family:'xeicon' !important; content:'\e942'; padding-right:5px; color:#fff; !important; }
div.open .btn-toggle-moreless:before, div.open .btn_less:before { font-family:'xeicon' !important; content:'\e945'; color:#fff; padding-right:5px; }
.btn-toggle-moreless, .btn_more, .btn_less { font-size:1.0em !important; margin:0 !important; outline:none !important; height:auto !important; }

div .btn-toggle-moreless, div .btn_more { background:#a7cdf4; border-radius:10px; padding:5px 15px; color:#fff !important; font-weight:700; }
div .btn-toggle-moreless:hover, div .btn_more:hover { background:#fac13a; }
div.open .btn-toggle-moreless, div.open .btn_less { background:#fac13a; border-radius:10px 10px 0 0; padding:5px 15px; color:#fff !important; }

.moreless-content { border:0 !important; border-radius:0 10px 10px 10px; padding:10px !important; border:2px solid #fac13a !important; margin-top:-5px; }
.moreless_content .btn_less { margin:0 !important; }
.moreless_content .btn_less:last-child { display:none; }

/* 인용구 */
/* 인용구1번 */
#tt-body-page blockquote[data-ke-style='style1'] { background:#fafafa !important; text-align:left !important; padding:10px 15px !important; color:#666 !important; border-radius:10px; border:2px solid #a7cdf4 !important; }
#tt-body-page blockquote[data-ke-style='style1'] span { font-family:unset !important; }

/* 컨텐츠용 - 인용구2번 */
#tt-body-page blockquote[data-ke-style="style2"] { background:#fafafa !important; border-left:5px solid #a7cdf4 !important; padding:10px 15px !important; margin-bottom:10px !important; }

/* 타이틀용 - 인용구3번 */
#tt-body-page blockquote[data-ke-style="style3"] { border:0 !important; display:inline-block; padding:8px 15px !important; margin-bottom:10px !important; border-radius:10px; border:2px solid #a7cdf4 !important; color:#a7cdf4 !important; }

blockquote, blockquote p { font-size: 1.0em !important; line-height: unset !important; }

/* 보호글 */
.se_entry { text-align:center; font-size:0.8em; font-weight:700; display:block; }
.se_entry i { padding-right:3px; }
.se_input { width:120px; height:30px; text-align:center; font-size:0.8em; font-weight:700; box-sizing:border-box; padding:0px 15px 0px 15px; border:0; background:none; display:block; margin:10px auto; }
.se_submit { width:120px; height:30px; box-sizing:border-box; font-size:0.8em; font-weight:700; background:#fff; color:#fac13a; border:2px solid #fac13a; border-radius:10px; margin-bottom:10px; }
.se_submit:hover { border:2px solid #a7cdf4; color:#a7cdf4; }

.moreless_fold,.moreless_top,.moreless_bottom,.se_submit,.moreless_top:hover,.moreless_fold:hover,.moreless_bottom:hover,.se_submit:hover { transition: all 0.5s ease; }

.locked:before { font-family:'xeicon' !important; content:'\e964'; padding-right:2px; font-size:0.8em; line-height:0; }
.summary { display:none; }

/* 툴팁 */
.tooltip { display:none; position:absolute; background:#fff; border:2px solid #a7cdf4; color:#a7cdf4; border-radius:10px; padding:0 10px 0 10px; font-weight:700; font-size:0.8em; z-index:9999; }

/*공감신고*/
.container_postbtn { padding:0 !important; margin-top:10px !important; }
.container_postbtn, .container_postbtn .postbtn_ccl, .container_postbtn .btn_post { height:auto !important; }
.container_postbtn .postbtn_like { border-radius:0 !important; border:0 !important; }
.container_postbtn .btn_post .txt_like, .container_postbtn .wrap_btn_share { display:none !important; }
.container_postbtn .btn_menu_toolbar, .postbtn_like > .wrap_btn > .uoc-icon, .wrap_btn > .btn_post > .ico_statistics { display:none; }
.postbtn_ccl { padding:0 !important; }

/* 카피 */
.copy { position:fixed; bottom:5px; left:15px; z-index:9999; font-size:0.8em; }
.copy a { font-size:0.8em; display:block; }

/* 사이드바 */
#side_box, #side_last_box { width:210px; border-top:2px solid #FFF4BD; border-bottom:2px solid #FFF4BD; }
span.side_title { font-size:7pt; font-weight:700; padding:0 10px 0 10px; margin-top:20px; display:inline-block; border:2px solid #FFF4BD; border-bottom:0; background:#fff; color:#FFF4BD; text-transform:uppercase; }
#sidebar_content { width:220px; height:100%; overflow-y:auto; }
.sd_ct { margin-bottom:50px; }
#sidebar_content::-webkit-scrollbar-track, #sidebar_content::-webkit-scrollbar-thumb, #sidebar_content::-webkit-scrollbar-thumb:hover { background:#fff; } /* 사이드바 스크롤 */
#sidebar { width:220px; height:100%; background-color:#fff; border-left:5px solid #FFF4BD; position:fixed; z-index:9999; top:0; transition:right 0.3s linear; right:-240px; padding:10px; }
#sidebar.visible { right:0; transition:right 0.3s linear; }
#sidebar_btn { display:inline-block; vertical-align:middle; cursor:pointer; position:absolute; height:100%; margin-right:25px; top:45%; left:-20px; }
#sidebar_btn span { width:15px; height:80px; background:#FFF4BD(42, 95%, 60%); border-radius:100px 0 0 100px; display:block; }

.side_calendar, .side_rcpost, .side_visit, .side_tag, .side_rcnoti { padding:10px; }

/* 검색바 */
.side_search { width:205px; margin:0 auto; padding:2px 0 2px 0; border:0; background:#fff; } /* 검색 box */
.side_search i { font-weight:700; float:left; margin: 21px 10px 0 18px; z-index:2; color:#fac13a; }
.side_search i:hover { color:#fac13a; } 
.searchform input::placeholder { color:#fac13a; font-size:7pt; font-weight:700; }
.searchform input { width:140px; height:50px; text-align:center; border:0; }
.searchform input:focus { outline:0; } 

/* 달력 */
.inner-calendar { margin:0 auto; text-align:center; }
.inner-calendar .cal_month { border-bottom:3px double #fac13a; margin-bottom:10px; } 
.inner-calendar .cal_month a, .inner-calendar .cal_day, .inner-calendar a.cal_click { font-size:8pt; }
.inner-calendar .cal_month a, .inner-calendar .cal_day4, .inner-calendar a.cal_click { font-weight:700; }
.inner-calendar .cal_month { padding-bottom:10px; }
.inner-calendar .cal_month a { padding:5px 5px; }
.inner-calendar .cal_day_sunday { color:red; } /* 일요일 */
.inner-calendar .cal_day4 { color:#FFF4BD; } /* 오늘 날짜 */
.inner-calendar a.cal_click { text-decoration:underline; color:#FFF4BD; } /* 글쓴 날 */
.inner-calendar a.cal_click:hover { color:#fac13a; }

/* 최근 글 */
.side_rcpost ul { margin:0; }
.side_rcpost ul .rcpost_title:before { float:left; font-family:'xeicon' !important; content:'\e93f'; padding-right:5px; }

/* 최근 공지 */
.side_rcnoti ul { margin:0; }
.side_rcnoti ul li .rcnoti_title { }
.side_rcnoti ul li .rcnoti_title:before { float:left; font-family:'xeicon' !important; content:'\e93f'; padding-right:5px; }

/* 태그 */
.side_tag ul { margin:0; }
.side_tag ul li { display:inline; }
.side_tag a { line-height:300%; padding:5px 10px; border:2px solid #a7cdf4; }
.side_tag a:hover { border:2px solid #fac13a; }

/* 카운터 */
.side_visit { height:80px; }
.side_visit span { font-size:8pt; }
.side_visit span.vist_title { float:left; font-weight:700; }
.side_visit span.text-total, .side_visit span.item-visit { float:right; }
.side_visit span.text-total { color:#649acd; font-weight:700; } /* 총 방문자 수 */

/* 모바일 */
.m_menu, .mo_cate { display:none; }
.m_menu { margin: 0 auto; text-align:center; }

.menuscr { width:100%; height:100%; overflow-y:auto; }
.menuscr::-webkit-scrollbar-track, .menuscr::-webkit-scrollbar-thumb, .menuscr::-webkit-scrollbar-thumb:hover { background:#fff; } /* 모바일메뉴 스크롤 */
#menubar { background:url(./images/hn_bg.png) no-repeat 90%; width:260px; height:100%; display:none; position:fixed; z-index:9999; left:-265px; top:0; transition:left 0.3s linear; }
#menubar.visible { left:0; transition:left 0.3s linear; }
#menubar_btn { display:inline-block; vertical-align:middle; cursor:pointer; position:absolute; width:20px; height:5px; margin:5px; right:-40px; top:0px; }
#menubar_btn i { color:#fac13a; transition:all 0.5s; cursor:pointer; }
#menubar_btn i:hover { color:#a7cdf4; }
.mo_tt { margin:20px auto; }
.mo_tt img { width:190px; }
.mo_category_wrap { margin: 40px 0 60px 0; }
.mo_category_wrap .ctop { width:200px; height:200px; margin:0 auto 30px auto; }
.mo_category_wrap .sns_wrap { padding-right:60px; }
.mo_category_wrap .sns_wrap a { padding: 3px 9px; }
.mo_cate { width:200px; margin:0 auto; }

/* 반응형 */
@media only screen and (max-width:1024px) {
	#conwr, .logowr { width:90%; }
	#container, .logo { width:100%; }
	#container { margin-top:0; }
	.logo { float:none; text-align:center; margin: 20px 0 10px 0; }
	.pc_cate { display:none; } 
	.mo_cate, .m_menu, #menubar { display:block; }
}

@media only screen and (max-width:660px) {
	/* 리스트 */ 
	#list_n .list_content { width:42.5%; margin:0 3.7%; }
	#list_board .list_content .title { width:65%; } /* 일반 목록 타이틀 */
	
	.copy span { display:none; }
	.copy > a:hover > span { display:inline-block; }
}

@media only screen and (max-width:480px) {
	.logo img { width: 280px; }
	.logowr { margin:0 auto; }
}


/* 로고 - 블로그 상단 */
.logo img {
    display: block;
    width: 100%;
    max-width: 650px;
    height: auto;
    margin: 0 auto;
}

/* 모바일 로고 */
@media only screen and (max-width: 480px) {
    .logo img {
        width: 100%;
        max-width: 320px;
        height: auto;
    }
}


/* ========================================
   FUSION LIVE STORY VIEWER
   하늘색 × 금색 분기 선택지 디자인
======================================== */

/* 분기 선택 영역 */
.fusion-group {
    margin: 28px 0;
    padding: 22px;
    border: 1px solid #A7CDF4;
    border-radius: 16px;
    background: #F8FCFF;
    box-sizing: border-box;
}

/* 선택지 안내 문구 */
.fusion-group .fusion-question {
    margin: 0 0 16px;
    text-align: center;
    font-weight: bold;
    color: #649ACD;
}

/* 버튼 배치 */
.fusion-choices {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 15px 0;
}

/* 기본 선택지 버튼 */
.fusion-choice {
    padding: 12px 20px;
    border: 1px solid #A7CDF4;
    border-radius: 24px;
    background: #FFFFFF;
    color: #649ACD;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 마우스를 올렸을 때 */
.fusion-choice:hover {
    background: #E5F3FF;
    border-color: #649ACD;
    transform: translateY(-2px);
}

/* 선택한 버튼 */
.fusion-choice.is-selected {
    background: #DCEEFF;
    border-color: #649ACD;
    color: #477FB2;
    box-shadow: 0 2px 8px rgba(100, 154, 205, 0.15);
}

/* 선택한 스토리 내용 */
.fusion-route {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid #E5F3FF;
    border-radius: 12px;
    background: #FFFFFF;
    line-height: 1.9;
}

/* 선택하지 않은 스토리는 숨기기 */
.fusion-route[hidden] {
    display: none !important;
}

/* 모바일 화면 */
@media only screen and (max-width: 480px) {
    .fusion-group {
        padding: 15px;
    }

    .fusion-choices {
        flex-direction: column;
    }

    .fusion-choice {
        width: 100%;
    }

    .fusion-route {
        padding: 14px;
    }
}



/* =====================================
   FUSION LIVE 캐릭터 대화 디자인
===================================== */

/* 캐릭터별 대화 블록 */
.fusion-story .fusion-line {
    --character-color: #888888;
    margin: 18px 0;
    padding: 8px 0 8px 16px;
    border-left: 4px solid var(--character-color);
}

/* 캐릭터 이름 */
.fusion-story .fusion-speaker {
    margin: 0 0 7px;
    color: var(--character-color);
    font-size: 14px;
    font-weight: 700;
}

/* 대사 */
.fusion-story .fusion-text {
    margin: 0;
    color: #444444;
    font-size: 14px;
    line-height: 1.9;
    white-space: pre-line;
}

/* Knights */
.fusion-line.tsukasa { --character-color: #C74656; }
.fusion-line.izumi   { --character-color: #719A9E; }
.fusion-line.ritsu   { --character-color: #8665B0; }
.fusion-line.arashi  { --character-color: #C79B55; }
.fusion-line.leo     { --character-color: #E69A39; }

/* 유성대 */
.fusion-line.chiaki  { --character-color: #D63B42; }
.fusion-line.kanata  { --character-color: #36A9CD; }
.fusion-line.tetora  { --character-color: #555B64; }
.fusion-line.midori  { --character-color: #4C9B68; }
.fusion-line.shinobu { --character-color: #D4B12C; }

/* 모바일 */
@media only screen and (max-width: 480px) {
    .fusion-story .fusion-line {
        padding-left: 12px;
        margin: 15px 0;
    }
}


/* =====================================
   FUSION LIVE 이미지 크기 긴급 수정
===================================== */

/* 선택창이 본문 밖으로 넘치지 않도록 */
.fusion-story .fusion-group {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 두 유닛을 나란히 배치 */
.fusion-story .fusion-image-choices {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
}

/* 이미지 버튼 크기 제한 */
.fusion-story .fusion-image-choice {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 핵심: 이미지가 버튼 밖으로 커지지 않도록 */
.fusion-story .fusion-image-choice img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 180px !important;
    max-height: 180px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    box-sizing: border-box !important;
}

/* 카드 하단 유닛 이름 */
.fusion-story .fusion-card-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 모바일 */
@media (max-width: 480px) {
    .fusion-story .fusion-image-choices {
        gap: 8px !important;
    }

    .fusion-story .fusion-image-choice img {
        height: 110px !important;
        max-height: 110px !important;
    }
}

/* Knights — 네이비 */
.fusion-story .fusion-image-choice.knights-card {
    border-color: #233D72 !important;
}

.fusion-story .knights-card .fusion-card-footer {
    background: #233D72 !important;
    color: #FFFFFF !important;
}

/* 유성대 — 레드 */
.fusion-story .fusion-image-choice.ryuseitai-card {
    border-color: #D64049 !important;
}

.fusion-story .ryuseitai-card .fusion-card-footer {
    background: #D64049 !important;
    color: #FFFFFF !important;
}

/* 선택 버튼 글자 */
.fusion-story .fusion-card-footer strong,
.fusion-story .fusion-card-footer small {
    color: #FFFFFF !important;
}


/* FUSION LIVE 이미지 상하 여백 제거 */

/* 이미지 영역 */
.fusion-story .fusion-image-choice img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: bottom !important;
}

/* 카드 내부 간격 제거 */
.fusion-story .fusion-image-choice {
    gap: 0 !important;
    line-height: normal !important;
}

/* 이미지와 유닛 이름 영역 밀착 */
.fusion-story .fusion-card-footer {
    margin: 0 !important;
    border: 0 !important;
}
/* 유닛 카드 하단 글자 영역 여유 주기 */
.fusion-story .fusion-image-choice .fusion-card-footer {
    padding: 12px 8px !important;
    gap: 5px !important;
    min-height: 58px;
    justify-content: center;
}

/* 유닛 이름 */
.fusion-story .fusion-card-footer strong {
    font-size: 15px !important;
    line-height: 1.4 !important;
}

/* SELECT 문구 */
.fusion-story .fusion-card-footer small {
    font-size: 11px !important;
    line-height: 1.3 !important;
}

/* 공통 스토리에도 캐릭터별 색상 적용 */
.fusion-line {
    --character-color: #888888;
    border-left: 4px solid var(--character-color);
}

.fusion-line .fusion-speaker {
    color: var(--character-color);
}

.fusion-line.tsukasa { --character-color: #C74656; }
.fusion-line.izumi   { --character-color: #719A9E; }
.fusion-line.ritsu   { --character-color: #8665B0; }
.fusion-line.arashi  { --character-color: #C79B55; }
.fusion-line.leo     { --character-color: #E69A39; }

.fusion-line.chiaki  { --character-color: #D63B42; }
.fusion-line.kanata  { --character-color: #36A9CD; }
.fusion-line.tetora  { --character-color: #555B64; }
.fusion-line.midori  { --character-color: #4C9B68; }
.fusion-line.shinobu { --character-color: #D4B12C; }


/* 공통 스토리 대사 디자인 복구 */
.fusion-line {
    margin: 18px 0 !important;
    padding: 8px 0 8px 16px !important;
    border-left: 4px solid var(--character-color, #888888) !important;
}

.fusion-line .fusion-speaker {
    margin: 0 0 7px !important;
    color: var(--character-color, #888888) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.fusion-line .fusion-text {
    margin: 0 !important;
    color: #444444 !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
    white-space: pre-line !important;
}


/* 유성대 5인 캐릭터 선택창 */

.fusion-member-choices {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
    width: 100%;
}

.fusion-member-choice {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 2px solid var(--member-color) !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

.fusion-member-choice img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.fusion-member-choice span {
    display: block;
    width: 100%;
    padding: 10px 2px;
    color: var(--member-color);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
}

.fusion-member-choice:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 14px rgba(0,0,0,.12);
}

.fusion-member-choice.is-selected {
    background: #F8FCFF !important;
    box-shadow: 0 0 0 2px var(--member-color);
}

@media (max-width: 480px) {
    .fusion-member-choices {
        gap: 5px;
    }

    .fusion-member-choice {
        border-radius: 8px !important;
    }

    .fusion-member-choice span {
        padding: 7px 1px;
        font-size: 10px;
    }
}

/* ===================================
   FUSION LIVE 프롤로그 후반부
=================================== */

/* 최초 선택 유닛별 스토리 */
.fusion-costume-story[hidden] {
  display: none !important;
}

.fusion-story-heading {
  margin: 35px 0 24px;
  padding: 20px 15px;
  text-align: center;
  background: #F8FCFF;
  border: 1px solid #DCE9F7;
  border-radius: 14px;
}

.fusion-story-heading span {
  display: block;
  color: #87A9CC;
  font-size: 11px;
  letter-spacing: 2px;
}

.fusion-story-heading h3 {
  margin: 8px 0 0;
  color: #527FB2;
  font-size: 18px;
}

/* 의상 선택 생략 안내 */
.fusion-costume-note {
  margin: 25px 0;
  padding: 20px 14px;
  background: #F8FCFF;
  border: 1px dashed #A7CDF4;
  border-radius: 12px;
  text-align: center;
}

.fusion-costume-note span {
  display: block;
  color: #649ACD;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
}

.fusion-costume-note p {
  margin: 12px 0 8px;
  color: #52677D;
  font-size: 13px;
  line-height: 1.8;
}

.fusion-costume-note small {
  display: block;
  color: #8A9CAE;
  font-size: 11px;
  line-height: 1.7;
}

/* 앙코르 선택창 */
.fusion-encore-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.fusion-encore-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  padding: 25px 10px;
  background: white;
  border: 2px solid #A7CDF4;
  border-radius: 14px;
  color: #527FB2;
  cursor: pointer;
  box-sizing: border-box;
  font: inherit;
  transition: all .2s ease;
}

.fusion-encore-choice:nth-child(2) {
  border-color: #D6B66D;
  color: #A9823D;
}

.fusion-encore-icon {
  font-size: 24px;
}

.fusion-encore-choice strong {
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.fusion-encore-choice small {
  font-size: 10px;
  opacity: .7;
}

.fusion-encore-choice.is-selected {
  background: #EAF5FF;
  box-shadow: 0 0 0 2px #649ACD;
}

.fusion-encore-choice:nth-child(2).is-selected {
  background: #FFF9E9;
  box-shadow: 0 0 0 2px #D6B66D;
}

.fusion-encore-hint {
  margin: 8px 0 0;
  color: #8A9CAE;
  text-align: center;
  font-size: 11px;
}

/* 프롤로그 종료 화면 */
.fusion-chapter-end {
  margin: 48px 0;
  padding: 36px 20px 28px;
  text-align: center;
  background: #F8FCFF;
  border: 1px solid #A7CDF4;
  border-radius: 18px;
  box-sizing: border-box;
}

.fusion-end-label {
  color: #87A9CC;
  font-size: 10px;
  letter-spacing: 1.5px;
}

.fusion-end-symbol {
  margin-top: 18px;
  color: #D6B66D;
  font-size: 26px;
}

.fusion-end-title {
  margin: 8px 0 12px;
  color: #527FB2;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 2px;
}

.fusion-end-decoration {
  color: #C79B55;
  font-size: 12px;
  margin-bottom: 24px;
}

.fusion-end-message {
  color: #52677D;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
}

.fusion-end-description {
  color: #788B9F;
  font-size: 13px;
  line-height: 1.9;
  margin: 0 0 26px;
}

.fusion-end-next {
  padding-top: 18px;
  border-top: 1px solid #DCE9F7;
  color: #527FB2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

@media (max-width: 480px) {
  .fusion-encore-choices {
    gap: 8px;
  }

  .fusion-encore-choice {
    padding: 18px 6px;
  }

  .fusion-encore-choice strong {
    font-size: 11px;
  }

  .fusion-end-title {
    font-size: 20px;
  }
}


/* 공연 영상 */
.fusion-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 28px 0;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.fusion-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 선택하지 않은 멤버의 대사 숨기기 */
[data-fusion-knights-member][hidden] {
  display: none !important;
}

/* FUSION LIVE 공연 영상 크기 강제 적용 */
.fusion-video {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 28px auto !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #000 !important;
}

.fusion-video iframe {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border: 0 !important;
}

/* 멤버별 분기 숨김 처리 */
[data-fusion-knights-member][hidden] {
  display: none !important;
}

[data-fusion-ryuseitai-member][hidden] {
  display: none !important;
}


.fusion-story-guide {
  margin: 28px 0;
  padding: 18px 20px;
  background: #f8f8fb;
  border: 1px solid #e8e8ef;
  border-radius: 12px;
}

.fusion-story-guide-title {
  margin-bottom: 10px;
  color: #77718f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}

.fusion-story-guide p {
  margin: 6px 0;
  color: #555;
  font-size: 13px;
  line-height: 1.8;
}


/* ============================================================
   09. MY LITTLE MUSIC BOX
   ============================================================

   위치 : PC 왼쪽 프로필 / 스토리 백업 버튼 하단
   방식 : YouTube 재생목록 연결형 (새 탭에서 재생)
   테마 : White + Dusty Rose + Black Border

   [관리 안내]
   - 재생목록 URL 변경 : 스킨 HTML의 .little-music-link
   - 색상 변경        : 아래 09-1 색상 변수
   - 카드 크기 변경   : 09-2 플레이어 전체
   - FUSION LIVE CSS와 별도로 관리

   ============================================================ */


/* ------------------------------------------------------------
   09-1. 테마 색상
   ------------------------------------------------------------ */

.pc_cate .little-music-box {
    --music-bg: #ffffff;          /* 카드 배경 */
    --music-border: #242424;      /* 바깥 테두리 */
    --music-text: #242424;        /* 기본 글자 */
    --music-accent: #c88b9a;      /* 로즈핑크 포인트 */
    --music-accent-dark: #a56e7f; /* 버튼 글자 */
    --music-soft: #fcf8fa;        /* 내부 카드 배경 */
    --music-soft-hover: #f8edf1;  /* 마우스 오버 배경 */
    --music-button: #f4e3e9;      /* 버튼 배경 */
    --music-button-hover: #eecfd9;
    --music-muted: #a88b96;       /* 보조 글자 */
    --music-divider: #f0e6e9;     /* 구분선 */
}


/* ------------------------------------------------------------
   09-2. 플레이어 전체
   - 기존 PC 카테고리 너비(200px)에 맞춤
   ------------------------------------------------------------ */

.pc_cate .little-music-box {
    box-sizing: border-box;
    width: 100%;
    margin: 20px auto 0;
    padding: 12px 9px;

    background: var(--music-bg);
    border: 1px solid var(--music-border);
    border-radius: 12px;

    color: var(--music-text);
    text-align: center;
}


/* ------------------------------------------------------------
   09-3. 상단 제목
   - MY LITTLE MUSIC BOX ♫
   ------------------------------------------------------------ */

.pc_cate .little-music-heading {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--music-divider);

    color: var(--music-text);
    font-family: Georgia, serif;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.15px;
    line-height: 1.5;
}

.pc_cate .little-music-heading span {
    color: var(--music-accent);
}


/* ------------------------------------------------------------
   09-4. 재생목록 연결 카드
   - 카드 전체 클릭 가능
   - 클릭 시 유튜브 재생목록을 새 탭에서 열기
   ------------------------------------------------------------ */

.pc_cate .little-music-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;

    box-sizing: border-box;
    margin-top: 10px;
    padding: 14px 7px;

    background: var(--music-soft);
    border-radius: 8px;
    text-decoration: none;

    transition: background 0.2s ease;
}

.pc_cate .little-music-link:hover {
    background: var(--music-soft-hover);
}


/* ------------------------------------------------------------
   09-5. 음악 아이콘
   - 카드 중앙의 ♫
   ------------------------------------------------------------ */

.pc_cate .little-music-icon {
    color: var(--music-accent);
    font-size: 25px;
    line-height: 1.3;
}


/* ------------------------------------------------------------
   09-6. 재생목록 이름
   - Dear, My Little Music Box ♡
   ------------------------------------------------------------ */

.pc_cate .little-music-name {
    color: var(--music-text);
    font-family: Georgia, serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}


/* ------------------------------------------------------------
   09-7. 수록곡 정보
   - 9 songs · Ensemble Stars!!
   ------------------------------------------------------------ */

.pc_cate .little-music-count {
    color: var(--music-muted);
    font-size: 9px;
    line-height: 1.5;
}



/* ============================================================
   09. MY LITTLE MUSIC BOX | AUDIO PLAYER
   ------------------------------------------------------------
   위치 : PC 왼쪽 스토리 백업 버튼 아래
   테마 : White / Dusty Rose / Black
   기능 : MP3 재생, 곡 이동, 진행 바, 볼륨 조절
   ============================================================ */

/* 09-1. 전체 카드 및 테마 */
.pc_cate .little-music-box {
    --music-accent: #c88b9a;
    --music-dark: #a56e7f;
    --music-soft: #fcf8fa;

    box-sizing: border-box;
    width: 100%;
    margin: 20px auto 0;
    padding: 12px 9px;
    background: #fff;
    border: none;
border-radius: 16px;
box-shadow: 5px 6px 0 #fff3bd;
    text-align: center;
    color: #242424;
}

/* 09-2. 상단 제목 */
.pc_cate .little-music-heading {
    padding-bottom: 10px;
    border-bottom: 1px solid #f0e6e9;
    font-family: Georgia, serif;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: .15px;
}

.pc_cate .little-music-heading span {
    color: var(--music-accent);
}

/* 09-3. 플레이어 내부 */
.pc_cate .little-music-player {
    margin-top: 10px;
    padding: 12px 7px;
    background: var(--music-soft);
    border-radius: 8px;
}

.pc_cate .little-music-icon {
    color: var(--music-accent);
    font-size: 24px;
    line-height: 1.4;
}

.pc_cate .little-music-name {
    margin: 6px 0;
    color: #242424;
    font-family: Georgia, serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pc_cate .little-music-count {
    margin-bottom: 10px;
    color: #a88b96;
    font-size: 9px;
}

/* 09-4. 재생 진행 바 */
.pc_cate #musicProgress,
.pc_cate #musicVolume {
    display: block;
    width: 100%;
    height: 4px;
    margin: 8px 0;
    accent-color: var(--music-accent);
    cursor: pointer;
}

.pc_cate .little-music-time {
    display: flex;
    justify-content: space-between;
    color: #a88b96;
    font-size: 9px;
}

/* 09-5. 재생 컨트롤 */
.pc_cate .little-music-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 13px 0;
}

.pc_cate .little-music-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f4e3e9;
    color: var(--music-dark);
    font-size: 13px;
    cursor: pointer;
}

.pc_cate #musicPlay {
    width: 38px;
    height: 38px;
    background: var(--music-accent);
    color: #fff;
    font-size: 15px;
}

.pc_cate .little-music-controls button:hover {
    filter: brightness(.95);
}

/* 09-6. 볼륨 조절 */
.pc_cate .little-music-volume {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--music-accent);
    font-size: 12px;
}

.pc_cate .little-music-volume input {
    flex: 1;
    min-width: 0;
}

/* 09-7. 하단 문구 */
.pc_cate .little-music-footer {
    margin: 10px 0 0;
    color: var(--music-accent);
    font-family: Georgia, serif;
    font-size: 9px;
    font-style: italic;
}



/* ------------------------------------------------------------
   09-9. 하단 문구
   - a little melody, just for you ♡
   ------------------------------------------------------------ */

.pc_cate .little-music-footer {
    margin: 10px 0 0;

    color: var(--music-accent);
    font-family: Georgia, serif;
    font-size: 9px;
    font-style: italic;
    line-height: 1.5;
    text-align: center;
}


/* ============================================================
   END. MY LITTLE MUSIC BOX
   ============================================================ */


/* ==================================================
   LEFT PROFILE | STICKY
   왼쪽 프로필 · 스토리 백업 · 오르골 고정
   ================================================== */

@media screen and (min-width: 1024px) {
    .pc_cate {
        position: sticky;
        top: 20px;
        align-self: flex-start;
    }
}




/* ==================================================
   FUSION LIVE | 공연 영상 크기 최종 정리
   ==================================================
   적용 대상 : .fusion-video 내부 YouTube iframe
   목표      : 본문 너비에 맞게 영상 확장
   화면 비율 : 16:9
================================================== */

/* --------------------------------------------------
   01. 영상 컨테이너
   - 상위 요소 너비를 기준으로 확장
   - 최대 너비 640px
-------------------------------------------------- */

.fusion-video {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: 640px !important;
    aspect-ratio: 16 / 9 !important;

    margin: 24px auto !important;
    padding: 0 !important;

    overflow: hidden !important;
    border-radius: 12px;
    box-sizing: border-box;
}

/* END | 01. 영상 컨테이너 */


/* --------------------------------------------------
   02. YouTube iframe
   - 영상 컨테이너 전체를 채우도록 설정
   - 기존 iframe 크기 제한 덮어쓰기
-------------------------------------------------- */

.fusion-video iframe {
    display: block !important;
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* END | 02. YouTube iframe */


/* ==================================================
   END | FUSION LIVE 공연 영상 크기 최종 정리
================================================== */



/* ===== 앵콜 및 클리어 화면 ===== */

.fusion-encore-title-screen,
.fusion-clear-screen {
  text-align: center;
  padding: 70px 18px;
  margin: 30px 0;
  background: #101827;
  color: #fff;
  border-radius: 14px;
}

.fusion-encore-label {
  color: #d6be84;
  font-size: 12px;
  letter-spacing: 3px;
}

#fusion-encore-selected-title {
  color: #fff;
  font-size: clamp(23px, 5vw, 36px);
  margin: 25px 0;
  overflow-wrap: anywhere;
}

.fusion-encore-units {
  color: #d6be84;
  font-size: 15px;
}

.fusion-clear-screen h2 {
  color: #fff;
  margin: 16px 0;
}

.fusion-clear-screen h3 {
  color: #d6be84;
  letter-spacing: 4px;
  margin: 20px 0;
}

/* ===== 디자인 종료 ===== */


/* 작품 안내 */
.fusion-story .fusion-notice {
  margin: 0 0 32px;
  padding: 22px;
  background: #f7f7f7;
  border: 1px solid #242424;
  border-radius: 12px;
  color: #242424;
}

.fusion-notice strong {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  letter-spacing: 1px;
}

.fusion-notice p {
  margin: 7px 0;
  font-size: 13px;
  line-height: 1.8;
  color: #444;
}

/* 가이드와 선택창 */
.fusion-story .fusion-story-guide,
.fusion-story .fusion-group,
.fusion-story .fusion-story-heading,
.fusion-story .fusion-costume-note,
.fusion-story .fusion-chapter-end {
  background: #f7f7f7;
  border: 1px solid #242424;
  border-radius: 12px;
}

.fusion-story .fusion-story-guide-title,
.fusion-story .fusion-question,
.fusion-story .fusion-story-heading h3,
.fusion-story .fusion-story-heading span {
  color: #242424;
}

/* 일반 선택 버튼 */
.fusion-story .fusion-choice:not(.fusion-image-choice),
.fusion-story .fusion-encore-choice {
  background: #fff;
  border: 1px solid #242424;
  border-radius: 10px;
  color: #242424;
  box-shadow: none;
}

.fusion-story .fusion-choice:not(.fusion-image-choice):hover,
.fusion-story .fusion-encore-choice:hover {
  background: #f0f0f0;
  border-color: #242424;
}

.fusion-story .fusion-choice:not(.fusion-image-choice).is-selected,
.fusion-story .fusion-encore-choice.is-selected,
.fusion-story .fusion-encore-choice:nth-child(2).is-selected {
  background: #eaeaea;
  border-color: #242424;
  color: #242424;
  box-shadow: none;
}

.fusion-story .fusion-encore-choice:nth-child(2) {
  border-color: #242424;
  color: #242424;
}

/* 앵콜과 클리어 화면 */
.fusion-story .fusion-encore-title-screen,
.fusion-story .fusion-clear-screen {
  margin: 30px 0;
  padding: 55px 18px;
  background: #f7f7f7;
  border: 1px solid #242424;
  border-radius: 12px;
  color: #242424;
  text-align: center;
}

.fusion-story #fusion-encore-selected-title,
.fusion-story .fusion-clear-screen h2 {
  margin: 12px 0;
  color: #242424;
  font-size: clamp(23px, 5vw, 32px);
  font-weight: 700;
}

.fusion-story .fusion-encore-units,
.fusion-story .fusion-clear-screen h3 {
  margin: 14px 0 0;
  color: #555;
  font-size: 14px;
  letter-spacing: 2px;
}

/* FUSION LIVE 창 디자인 통일 */
.fusion-story .fusion-group,
.fusion-story .fusion-route,
.fusion-story .fusion-story-guide,
.fusion-story .fusion-story-heading,
.fusion-story .fusion-costume-note,
.fusion-story .fusion-chapter-end,
.fusion-story .fusion-encore-title-screen,
.fusion-story .fusion-clear-screen {
  background: #f7f7f7 !important;
  border: 1px solid #242424 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* 선택 후 표시되는 대사 영역 */
.fusion-story .fusion-route {
  background: #ffffff !important;
}

/* 선택창 안내 문구 */
.fusion-story .fusion-question,
.fusion-story .fusion-story-guide-title,
.fusion-story .fusion-story-heading span,
.fusion-story .fusion-story-heading h3,
.fusion-story .fusion-costume-note span,
.fusion-story .fusion-costume-note p {
  color: #242424 !important;
}

/* 일반 선택 버튼 */
.fusion-story .fusion-choice:not(.fusion-image-choice),
.fusion-story .fusion-encore-choice {
  background: #ffffff !important;
  border: 1px solid #242424 !important;
  color: #242424 !important;
}

/* 선택된 일반 버튼 */
.fusion-story .fusion-choice:not(.fusion-image-choice).is-selected,
.fusion-story .fusion-encore-choice.is-selected {
  background: #eaeaea !important;
  border-color: #242424 !important;
  color: #242424 !important;
}

/* 앙코르와 클리어 제목 */
.fusion-story #fusion-encore-selected-title,
.fusion-story .fusion-clear-screen h2,
.fusion-story .fusion-clear-screen h3 {
  color: #242424 !important;
}




/* 선택창 바깥 디자인 */
.fusion-group {
  background: #f7f7f7 !important;
  border: 1px solid #242424 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* 선택창 안내 문구 */
.fusion-group .fusion-question {
  color: #242424 !important;
}

/* 선택한 멤버의 대사 박스 */
.fusion-route {
  background: #ffffff !important;
  border: 1px solid #242424 !important;
  border-radius: 12px !important;
}

/* 루트 제목과 안내창 */
.fusion-story-heading,
.fusion-costume-note,
.fusion-chapter-end,
.fusion-story-guide {
  background: #f7f7f7 !important;
  border: 1px solid #242424 !important;
  border-radius: 12px !important;
}

/* 루트 제목 글자 */
.fusion-story-heading span,
.fusion-story-heading h3,
.fusion-story-guide-title {
  color: #242424 !important;
}


/* 앵콜곡 선택 버튼 */
.fusion-encore-choice,
.fusion-encore-choice:nth-child(2) {
  background: #ffffff !important;
  border: 1px solid #242424 !important;
  color: #242424 !important;
  box-shadow: none !important;
}

/* 선택한 앵콜곡 */
.fusion-encore-choice.is-selected,
.fusion-encore-choice:nth-child(2).is-selected {
  background: #eaeaea !important;
  border-color: #242424 !important;
  color: #242424 !important;
  box-shadow: none !important;
}

/* 앵콜 선택창 내부 글자 */
.fusion-encore-choice strong,
.fusion-encore-choice small,
.fusion-encore-icon,
.fusion-encore-hint {
  color: #242424 !important;
}

/* 프롤로그 클리어 내부 색상 */
.fusion-chapter-end .fusion-end-label,
.fusion-chapter-end .fusion-end-symbol,
.fusion-chapter-end .fusion-end-title,
.fusion-chapter-end .fusion-end-decoration,
.fusion-chapter-end .fusion-end-message,
.fusion-chapter-end .fusion-end-description,
.fusion-chapter-end .fusion-end-next {
  color: #242424 !important;
}

/* 프롤로그 클리어 구분선 */
.fusion-chapter-end .fusion-end-next {
  border-top: 1px solid #242424 !important;
}

/* 앵콜 결과 및 최종 클리어 */
.fusion-encore-title-screen,
.fusion-clear-screen {
  background: #f7f7f7 !important;
  border: 1px solid #242424 !important;
  color: #242424 !important;
  box-shadow: none !important;
}

/* 앵콜 결과 내부 글자 */
.fusion-encore-label,
#fusion-encore-selected-title,
.fusion-encore-units {
  color: #242424 !important;
}

/* 최종 클리어 내부 글자 */
.fusion-clear-screen h2,
.fusion-clear-screen h3 {
  color: #242424 !important;
}


/* FUSION LIVE 디자인 수정 01~07: 기존 CSS 맨 아래 추가 */

/* 01 게시글 제목과 날짜를 함께 아래로 */
#tt-body-page .entry .ar_title {
  margin-top: 28px !important;
}

/* 02 스토리 구간 제목 */
.fusion-story .fusion-section-heading {
  display: block;
  box-sizing: border-box;
  margin: 36px 0 24px !important;
  padding: 17px 20px !important;
  background: #f7f7f7 !important;
  border: 1px solid #242424 !important;
  border-radius: 12px !important;
  color: #242424 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  text-align: left;
}

/* 04 공연 당일 구간의 빈 문단 제거는 본문 HTML에서만 진행 */
/* 05 앙코르 결과창과 최종 클리어창 높이 축소 */
.fusion-encore-title-screen,
.fusion-clear-screen {
  min-height: 0 !important;
  height: auto !important;
  padding: 32px 18px !important;
  box-sizing: border-box !important;
}
.fusion-encore-title-screen #fusion-encore-selected-title {
  margin: 4px 0 12px !important;
}
.fusion-encore-title-screen .fusion-encore-units {
  margin: 0 !important;
}
.fusion-clear-screen h2 {
  margin: 0 0 12px !important;
}
.fusion-clear-screen h3 {
  margin: 0 !important;
}



/* 오르골 색상 최종 통일 */
.pc_cate .little-music-box {
    --music-accent: #7bb8df;
    --music-dark: #5c9fc9;
    --music-soft: #ffffff;
}

/* 내부 배경 */
.pc_cate .little-music-player {
    background: #ffffff;
}

/* 상단 구분선 */
.pc_cate .little-music-heading {
    border-bottom-color: #d7eaf7;
}

/* 음표와 하단 문구 */
.pc_cate .little-music-heading span,
.pc_cate .little-music-icon,
.pc_cate .little-music-volume,
.pc_cate .little-music-footer {
    color: #7bb8df;
}

/* 곡 번호와 재생 시간 */
.pc_cate .little-music-count,
.pc_cate .little-music-time {
    color: #7a9fb7;
}

/* 이전·재생·다음 버튼 */
.pc_cate .little-music-controls button,
.pc_cate #musicPlay {
    background: #7bb8df;
    color: #ffffff;
}

/* 진행 바와 볼륨 슬라이더 */
.pc_cate #musicProgress,
.pc_cate #musicVolume {
    accent-color: #7bb8df;
}


/* 07 사이드바 섹션 라벨: 기존 스킨 노란색 계열 재사용 */
#sidebar span.side_title {
  border-color: #fac13a !important;
  color: #c18a10 !important;
}
#sidebar #side_box,
#sidebar #side_last_box {
  border-color: #fac13a !important;
}

/* 사이드바 손잡이 복구 */
#sidebar_btn span {
    width: 15px;
    height: 80px;
    display: block;
    background: #fff4bd !important;
    border-radius: 100px 0 0 100px;
}


/* 달력 구분선 */
#sidebar .inner-calendar .cal_month {
    border-bottom: 1px solid #fff4bd !important;
}

/* 달력 날짜 강조 */
#sidebar .inner-calendar .cal_day4,
#sidebar .inner-calendar a.cal_click {
    color: #fac13a !important;
}

/* 달력과 방문자 수 영역의 선 */
#sidebar .side_calendar #side_box,
#sidebar .side_calendar #side_last_box,
#sidebar .side_visit #side_box,
#sidebar .side_visit #side_last_box {
    border-color: #fff4bd !important;
}

/* 방문자 수 숫자 */
#sidebar .side_visit .text-total {
    color: #fac13a !important;
}

/* 달력·방문자 수 제목 */
#sidebar .side_calendar .side_title,
#sidebar .side_visit .side_title {
    border-color: #fff4bd !important;
    color: #fac13a !important;
}

/* 본문 구간 구분창 */
.fusion-story .fusion-section-heading {
  display: block;
  box-sizing: border-box;
  margin: 32px 0 24px !important;
  padding: 16px 20px !important;
  background: #f7f7f7 !important;
  border: 1px solid #242424 !important;
  border-radius: 12px !important;
  color: #242424 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
}
/* 앙코르와 클리어 박스 세로 여백 */
.fusion-story .fusion-encore-title-screen,
.fusion-story .fusion-clear-screen {
  min-height: 0 !important;
  height: auto !important;
  padding: 34px 18px !important;
  box-sizing: border-box !important;
}

/* 메인 커버 BGM */
.cover-bgm {
  display: flex;
  justify-content: center;
  margin: 14px 0 20px;
}

#coverBgmBtn {
  padding: 9px 22px;
  border: 1px solid #d6b75e;
  border-radius: 25px;
  background: #f7fbff;
  color: #b59a49;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.25s ease;
}

#coverBgmBtn:hover {
  background: #fff8e5;
  border-color: #c9a94c;
}