@charset "utf-8";

/*FONTS*/
@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.5/dist/web/static/pretendard-jp.css");

@font-face {
    font-family: 'ChosunSm';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.1/ChosunSm.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KOHIBaeumOTF';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/KOHIBaeumOTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Chosunilbo_myungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HBIOS-SYS';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2207-01@1.0/HBIOS-SYS.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
     font-family: 'DungGeunMo';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}

@font-face {
    font-family: 'RIDIBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'EarlyFontDiary';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_220508@1.0/EarlyFontDiary.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KyoboHandwriting2020A';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.grid-sizer,.grid-item{min-width:200px; box-sizing:border-box;} /* 각 게시글 너비 설정 */
.grid-item {padding:5px; max-width: 700px;} /* 각 게시글 여백 */

/*BOARD CSS*/
:root
{
	--default-box-color:#2e2e33; /*로그 뒤쪽/박스 색*/
	--default-txt-color:#ececec; /*폰트 색*/
	--memo-font:'Pretendard JP';/*메모란 폰트 종류*/
	--board-icon-font:#cfcfd4; /*보드 아이콘/링크 색*/
	--highlight-start:#8cff32; /*형광펜 시작*/
	--highlight-end:#fdff32; /*형광펜 끝*/
	--tweet-max-height:600px; /*트위터 height 최대*/
}

body .highlight {font-family: var(--memo-font); font-size: 16px; font-weight: 700; line-height: 1.4; margin-bottom: unset; color: inherit;}




.mod:before, .del:before, .highlight:before, a .fas { font-family:'Font Awesome 5 Free'; font-weight: 900; margin-right:4px; color:#fff;}
.highlight-nopin {background: linear-gradient(90deg, var(--highlight-start), var(--highlight-end)); background-size: 100%; line-height: unset; margin-bottom: unset; font-family: var(--memo-font);}

.log_columns {display:grid;align-items: start;grid-template-columns: minmax(0,1fr);row-gap: 20px;}


#log_list .grid-item .item .item-inner .co-footer .date {color: #ddd; font-weight:500;
    opacity: 0.6;
    font-family: 'KOHIBaeumOTF';
    font-size: 8px;}
#log_list .grid-item .item .item-inner a, #log_list .grid-item .item .item-inner a:before {color:var(--board-icon-font);}

.co-content .highlight2 {display: inline-block; padding: 3px 8px;
	box-shadow: 1px 1px 0px rgb(0 0 0 / 20%);
	border-radius: 5px;
    background: #fff;
    margin: 4px 0px;
	}
	

	.co-content .highlight2 span {
	    background: linear-gradient(45deg, #F6EAC0 0%, #F7ACF5 25%, #8BCAFC 50%,#8A79EC 100% );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 13px;
    font-weight: 800;
	}

	.co-content .highlight2:hover {
			box-shadow:1px 1px 0px transparent;
			transform: translateX(1px)
			translateY(1px);
	}

.twitter-tweet {overflow:auto; max-height:var(--tweet-max-height);}


/*****************************/



#log_list .grid-item .item {position:relative;margin-bottom:0 !important;box-sizing:border-box;overflow:hidden;} /* 게시물영역 */
#log_list .grid-item .item .ui-comment {padding:0 10px !important; overflow: hidden;}/*코멘트영역(통합)*/
#log_list .grid-item .item .item-inner .ui-comment.pic-comment { padding:0 10px;border:0 none;}/* 본문 코멘트영역 */
#log_list .grid-item .item .item-inner .ui-comment.co-comment {opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;height:100%; z-index:1;overflow-y:auto;}/* 나머지 코멘트영역(뒷면) */
#log_list .grid-item .item .ui-comment > h3 {line-height:30px; color:#fff; min-height: 30px; max-width: 90%;}
#log_list .grid-item .item .ui-comment > h3 + hr.line {margin:0;}

#log_list .grid-item .item	.ui-pic,#log_list .grid-item .item .ui-comment.pic-comment	{ position: relative;  z-index:10;}

#log_list .grid-item .item.front .ui-pic,#log_list .grid-item .item.front .ui-comment.pic-comment {z-index:10;opacity:1;transition:all .2s; transition-delay: .2s;}
#log_list .grid-item .item.front .ui-comment.co-comment {z-index:0;opacity:0; transition:all .2s;transition-delay: .2s; display:none;}

#log_list .grid-item .item.back .ui-comment.co-comment{z-index:10;opacity:1;transition:all .2s; transition-delay: .2s;}
#log_list .grid-item .item.back .ui-pic,#log_list .grid-item .item.back .ui-comment.pic-comment {z-index:1;opacity:0;transition:all .2s;transition-delay: .2s;} 

.front {animation:front .6s;}
.back {animation:back .6s;}

#log_list .ui-comment.pic-comment .co-content {padding:5px 0 10px;}

#log_list .item a.close-comment, #log_list .item-inner .open-comment {
	display:block;position:absolute;top:0; right:0;
	width:40px;height:30px;line-height:30px;
	text-align:center;margin-top: 2px;
} 

.error				{ position:relative; text-align: center; line-height: 1.8em; padding-top: 70px; } 
.error .btn-group	{ padding: 20px 0 0; }

.ui-mmb-list-category		{ text-align: center; }
.ui-mmb-list-category a		{ display: inline-block; position: relative; padding: 6px 10px; font-weight: bold; border-radius: 3px; } 

.ui-mmb-button		{ text-align: center; padding-top: 10px; }

.help.ui-btn		{ width: 100%; padding: 8px; line-height: 1.2em; border-radius: 3px; margin-bottom:5px;}
.ui-paging			{ margin-bottom:0; padding-bottom:0;}


/***************************************
	List Page
****************************************/

.connect-wiget	{ min-height: 40px; text-align: center; line-height: 40px; }


/** Notice Box **/
.board-notice	{ width: 340px; padding: 10px; margin: 0 auto; text-align: center; box-sizing: border-box; }


/** Category List **/
#navi_category	{ text-align: center; padding: 20px 0; }
#navi_category ul {background: var(--default-box-color); border-radius: 15px; display: inline-block; padding: 5px 40px; color: var(--default-txt-color);}
#navi_category ul a {color: var(--default-txt-color); font-weight: 600;}
#navi_category li	{ display: inline-block;}
#navi_category li + li:before {content: '|'; padding: 0 20px;}


#log_list						{ position: relative; margin: 0 auto; padding:0 !important;  justify-items: center; align-items: start; display:grid;}
#log_list.empty {margin-top:20px;}
#log_list:after{content:"";display:block;clear:both;}
#log_list .empty_list			{ width:100%; line-height: 100px;  text-align: center; grid-column: 1 / 4;}

#log_list .item .ui-pic,
#log_list .item .ui-comment		{ box-sizing: border-box; }
#log_list .item-comment-box		{ overflow: hidden; } 


/** Picture */
#log_list .item	.ui-pic .pic-header					{ position: relative; line-height: 30px; padding: 0 10px; display: flex; }
#log_list .item	.ui-pic .pic-header .no { display: inline-block; vertical-align: middle; font-weight: bold; font-size: 14px; color: var(--default-txt-color);}
#log_list .item	.ui-pic .pic-header	span.date		{font-weight:normal;font-size:12px;opacity:0.7;padding:0 5px;}
#log_list .item	.ui-pic .pic-header .del			{ display: inline-block; vertical-align: middle; position: relative; width: 20px; height: 30px; line-height: 30px; overflow: hidden;text-align:center; text-indent: -999px; }
#log_list .item	.ui-pic .pic-header .del:before		{ content: '\f12d'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 30px; text-indent: 0; text-align: center; font-size: 12px; font-weight: bold;}
#log_list .item	.ui-pic .pic-header .mod			{ display: inline-block; vertical-align: middle; position: relative; width: 20px; height: 30px; margin-left:10px; line-height: 30px;text-align:center; overflow: hidden; text-indent: -999px; }
#log_list .item	.ui-pic .pic-header .mod:before		{ content: '\f56b'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 30px; text-indent: 0; text-align: center; font-size: 12px; font-weight: bold;}

/* 카테고리 */
#log_list .item	.ui-pic .ico-category	{ font-size: 11px; font-weight: 400; }

#log_list .item .ui-pic .pic-data							{ text-align: center; margin:0 auto; min-height: 200px;}
#log_list .item .ui-pic .pic-data.ui-blind					{ overflow: hidden; height: 250px; } 

#log_list .item .ui-pic .pic-data .ui-remove-blind			{ display: block; position: absolute; top: 30px; left: 0; right: 0; bottom: 0; background: #000; overflow: hidden; text-align: center; }
#log_list .item .ui-pic .pic-data .ui-remove-blind:before	{ content: ""; display: inline-block; width: 0px; height: 100%; vertical-align: middle; }
#log_list .item .ui-pic .pic-data .ui-remove-blind span		{ display: inline-block; font-size: 14px; line-height: 1.5em; vertical-align: middle; color: #999; }

#log_list .item .ui-pic .pic-data .theme-box  {padding:15px 10px; border: 0 none;border-radius:0; background:var(--default-box-color);}
#log_list .item .ui-pic .pic-data .theme-box div {text-align:left; font-size:13px; line-height:180%; word-break:break-all; word-spacing: -2px; letter-spacing: -0.2px; color:var(--default-txt-color);} /** 텍스트 타입 스타일 설정 **/
#log_list .item .ui-pic .pic-data .theme-box.scroll div {overflow-y:auto;}

#log_list .item .ui-pic img {cursor:pointer;}
#log_list .item .ui-pic .img-data {position:relative;}
#log_list .item .ui-pic .img-data * {max-width:100%;} 

/** Comment */
#log_list .item-comment	{ position: relative;}

#log_list .item-comment .co-header			{ position: relative; line-height: 30px; padding: 0 5px; }
#log_list .item .item-inner { background:#232323; color:#fff; text-align: center;}
#log_list  .grid-item.item .item-inner .co-header p {color: var(--default-txt-color);}
#log_list .grid-item .item .item-inner .item-comment {background-color:var(--default-box-color); color: var(--default-txt-color);}
#log_list .item .item-inner .item-comment.item-reply .co-header{line-height: 25px;} 

#log_list .item .item-inner .item-comment.item-reply .co-header:before {content:"→ "; position:absolute;left:-9px;}
#log_list .item-comment .co-header:after	{ content: ""; display: block; clear: both; }
#log_list .item-comment .co-header p		{ float: left; }
#log_list .item-comment .co-header .link	{ float: right; padding-right: 5px; }
#log_list .item-comment .co-header i		{ display: inline-block; height: 25px; }
#log_list .item-comment .co-header i img	{ max-height: 100%; }

#log_list .item-comment .co-content							{ padding:5px;  }
#log_list .item .item-inner .item-comment.item-reply .co-content {padding: 5px 15px;}
#log_list .ui-comment .co-content	.original_comment_area { word-break:break-all; }
#log_list .ui-comment .co-content	.original_comment_area iframe{max-width:100% !important;}
 
#log_list .item-comment .co-content .member_call			{ padding: 0 5px; } 
#log_list .item-comment .co-content .other-site-link		{ font-weight: bold; } 
#log_list .item-comment .co-content	.re_more{display:none;}
#log_list .item-comment .co-content	.co-more:after, #log_list .item-comment .co-content	.co-more.on:after {color: #8B90FC; font-family: "Font Awesome 5 Free"; font-weight: 900;}
#log_list .item-comment .co-content	.co-more:after{content:' \f107'; }
#log_list .item-comment .co-content	.co-more.on:after{content:' \f106';}
#log_list .item-comment .dice			{ display: block; padding-bottom: 10px; }
#log_list .item-comment .dice img		{  border-radius: 3px; overflow: hidden; }

#log_list .item-comment .link-box		{ display: block; padding-bottom: 10px; }

#log_list .item-comment .co-footer				{ line-height: 25px; padding: 0 5px; }
#log_list .item-comment .co-footer:after		{ content: ""; display: block; clear: both; } 

#log_list .item-comment .co-footer .del			{ display: block; float: right; position: relative; width: 14px; height: 30px; line-height: 30px; overflow: hidden; text-indent: -999px; padding-left: 10px; }
#log_list .item-comment .co-footer .del:before	{ content: 'X'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 30px; text-indent: 0; text-align: center; font-size: 11px; font-weight: bold;}
#log_list .item-comment .co-footer .mod			{ display: block; float: right; position: relative; width: 14px; height: 30px; line-height: 30px; overflow: hidden; text-indent: -999px; padding-left: 10px; }
#log_list .item-comment .co-footer .mod:before	{ content: 'M'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 30px; text-indent: 0; text-align: center; font-size: 11px; font-weight: bold; }
#log_list .item-comment .co-footer .re			{ display: block; float: right; position: relative; width: 14px; height: 30px; line-height: 30px; overflow: hidden; text-indent: -999px; padding-left: 10px; }
#log_list .item-comment .co-footer .re:before	{ content: 'R'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 30px; text-indent: 0; text-align: center; font-size: 12px; font-weight: bold; }

#log_list .item-comment-form-box					{ padding: 10px 0 0; }
#log_list .bo_vc_w									{ position: relative; }
#log_list .bo_vc_w	> h4							{ display:none;padding:5px; opacity:0.7; font-weight:normal;}
#log_list .bo_vc_w	> h4:before						{content:":: ";}
#log_list .bo_vc_w .input-comment					{ position: relative; margin-bottom: 5px; }
#log_list .bo_vc_w .input-comment .file_box			{display:none;}
#log_list .bo_vc_w .input-comment .memo_box			{position:relative;padding-right:30px;}
#log_list .bo_vc_w .input-comment .memo_box a		{position:absolute;width:30px;height:100%;right:0;top:0;bottom:0;padding:0 5px;font-size:12px;}
#log_list .bo_vc_w .input-comment .memo_box a span	{display:inline-block;transform:scale(0.8);}
#log_list .bo_vc_w .input-comment textarea			{ display: block; width: 100%; height: 80px; box-sizing: border-box; margin: 0; background:inherit;}
#log_list .bo_vc_w .input-comment .form-input		{height:auto;min-height:24px;line-height:24px;padding-left:5px;padding-right: 70px;position:relative;border:0 none; background:inherit;}
#log_list .bo_vc_w .input-comment input, #log_list .bo_vc_w .input-comment select {background:inherit;}
#log_list .bo_vc_w .input-comment .form-input span	{display:inline-block;padding-right:8px;}		 

#log_list .bo_vc_w .btn_confirm						{ display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 70px; }
#log_list .bo_vc_w .btn_confirm .ui-comment-submit	{ display: block; width: 100%; height: 100%; }

#log_list .modify_area			{ display: none; position: relative; }
#log_list .modify_area textarea	{ display: block; width: 100%; min-height: 100px; padding: 10px; }
#log_list .modify_area button	{ width: 60px; }

.controls{ padding:0 10px; }
.controls:after{content:"";display:block;clear:both;}

#load_log_board .searc-sub-box, .bo_fx {padding:20px 0;max-width:350px;float:left;overflow:hidden;}
.bo_fx li {display:inline-block;}

.bo_fx #chkall {display:inline-block;width:0;height:0;overflow:hidden;}
.bo_fx #chkall + label span{display:inline-block;font-size:12px;line-height:26px;} 
.bo_fx #chkall + label span:after {content:"선택";}
.bo_fx #chkall + label span.on:after{ content:"해제";} 

.chk-id {display:inline-block;vertical-align:middle;padding-right:10px;}

#load_log_board {position:relative;}
#load_log_board .searc-sub-box {float:right;clear:none;}
#load_log_board .searc-sub-box .ui-search-box {margin-top:0;}

/***************************************
	Write Page
****************************************/


.list-write-button
{
margin-bottom: 10px;
}

.list-write-button a
{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:72px;
    height:30px;
    padding:0 14px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.16);
    border-radius:5px;
    background:linear-gradient(180deg, #303238 0%, #24262b 100%);
    color:#c8cbd1;
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
    line-height:1;
    text-decoration:none;
    box-shadow:0 3px 8px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06);
    z-index:9999;
    transition:background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.list-write-button a i.fas
{
	margin-right:0px;
}

.list-write-button a i.fas:before
{    color: #fff;
}

.list-write-button a:hover,
.list-write-button a:active
{
    opacity:1;
    color:#eceef2;
    border-color:rgba(255,255,255,.28);
    background:linear-gradient(180deg, #383a41 0%, #292b31 100%);
    box-shadow:0 5px 12px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08);
    transform:translateY(-1px);
}


#bo_w			{ max-width: 640px; margin: 0 auto; padding: 20px 40px; }

#bo_w dl,
#bo_w dt,
#bo_w dd		{ display: block; position: relative; margin: 0; padding: 0; }
#bo_w dl		{ overflow: hidden; }

#bo_w label		{ cursor: pointer; } 

#bo_w dt		{ position: absolute; top: 0; left: 0; width: 85px; padding-top:5px; font-size: 12px; line-height:28px;text-align:center;}
#bo_w dt select	{ box-sizing: border-box; width:100%; font-size: 12px;padding:0 5px; }
#bo_w dd		{ padding-top:5px; min-height: 30px;  margin-left: 85px; }
#bo_w dd fieldset	{ display: inline-block; padding-right: 12px; }
#bo_w.chick .upload_box {position:relative;}
#bo_w.chick .upload_box dd	{margin-right:70px;}
#bo_w.chick .upload_box button	{position:absolute;right:0;top:6px;width:70px;}

#bo_w .option_box {font-size:12px;}
#bo_w .option_box select {height:25px;padding:0 5px;}

#view_image + dl dt	{ width:100px;}
#view_image + dl dd	{ margin-left:100px; }

#bo_w .frm_input	{ width: 100%; }
#bo_w #wr_content	{ height: 170px; padding: 10px; }


#view_image			{ position: relative; width: 100%; height: 330px; line-height: 330px; overflow: hidden; margin: 0 auto; text-align: center; }
#view_image img		{ max-width: 100%; max-height: 330px; }
#view_image em		{ display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 330px; text-align: center; }
#view_image em img	{ width: 50px; height: 50px; }
#view_image > span	{ position: absolute; left: 0; right: 0; bottom: 0; height: 30px; line-height: 30px; text-align: center; }


#board_category									{ text-align: center; }
#board_category input							{ display: none; }
#board_category li								{ display: inline-block; line-height: 31px; }
#board_category li label						{ display: inline-block; cursor: pointer; padding: 0 15px;} 
#board_category input:checked + label:before	{ content: "《 "; }
#board_category input:checked + label:after	{ content: " 》"; }

#board_action		{ padding-top: 15px; }

.comment-data						{ display: none; padding: 10px 0 10px 20px; border-left: 1px solid #996c33; margin-left: 5px;  }
.comment-data.on					{ display: block; }
.comment-data select,
.comment-data input[type="text"]	{ width: 100%; box-sizing: border-box; }


.ui-mmb-list-write	{ 
	position: relative;
	margin: 0 auto;
    background: var(--default-box-color);
    color: var(--default-txt-color);
	display:none;
}
.ui-mmb-list-write span	{ display: inline-block; margin: 3px; }
.genre-fields	{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.genre-fields input	{ width:100%; box-sizing:border-box; }
.upload-box + fieldset	{ padding: 10px 0; }
.upload-box	{
	position: relative;
	padding-left: 95px;
	padding-right: 80px;
	box-sizing: border-box;
}
.upload-box select	{
	position: absolute;
	top: 0;
	left: 0;
	width: 95px;
}
.upload-box fieldset	{ display: block; position: relative; }
.upload-box input[type="file"],
.upload-box input[type="text"]	{ width: 100%; box-sizing: border-box; }
.upload-box button	{ display: block; position: absolute; top: 0; right: 0; width: 80px; height: 30px; }

.guest-box				{ position: relative; text-align:left; } 
.guest-box input[type="text"],.guest-box input[type="password"] {max-width:40%;}

p.artist {
    font-family: 'KOHIBaeumOTF';
    font-size: 10px;
}

.music_bar {
    display: flex;
}

.m_bar {
    width: 90%;
    margin: 0% 2%;
    background: #ffffff45;
    height: 2px;
    border-radius: 10px;
    align-self: center;
}
.m_in_bar {
    width: 30%;
    height: 2px;
    background: #fff;
}

.ui-comment.pic-comment {
    margin-top: 5px;
}


@media all and (max-width: 720px) {
	.desktop {display:none;}
	.mobile {display:grid;}
	.grid-sizer,.grid-item {width:100%;}
	
}

@media all and (max-width: 520px) {
	
	.bo_fx,#load_log_board .searc-sub-box {padding:30px 0 10px;margin:0 auto;float:none;clear:both;text-align:center;}
	#load_log_board .searc-sub-box {padding:10px 0 30px;}
} 
@keyframes front{
	50% {transform:scaleX(0);}
	100% {transform: scaleX(1);}
}
@keyframes back{
	50% {transform:scaleX(0);}
	100% {transform: scaleX(1);}
}



/* ══════════════════════════════════════════
   뮤직북 재생목록 컨트롤 (왼쪽 상단)
   ══════════════════════════════════════════ */
.musicbook-player-controls{
	display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:6px;
	margin:8px 0 18px; text-align:left; font-family:var(--al-font,'Pretendard',sans-serif);
}
.musicbook-player-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	height:30px; padding:0 11px; box-sizing:border-box; cursor:pointer;
	border:1px solid #474a52; border-radius:5px; background:#24252a; color:#c9ccd2;
	font-size:11px; font-weight:600; line-height:1; letter-spacing:.025em;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.045); transition:.15s ease;
}
.musicbook-player-btn i{ margin:0; color:inherit; font-size:10px; }
.musicbook-player-btn:hover{ border-color:#777b84; color:#f0f1f3; background:#2d2f35; }
.musicbook-player-btn.is-active,
.musicbook-player-btn[aria-pressed="true"]{
	border-color:#d6d8dd; background:#d6d8dd; color:#202126;
	box-shadow:0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.55);
}
.musicbook-player-btn:disabled{ opacity:.38; cursor:not-allowed; }
.musicbook-player-status{
	min-width:0; margin-left:4px; color:#898d96; font-size:10px; letter-spacing:.04em;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media(max-width:520px){
	.musicbook-player-controls{ gap:5px; margin-bottom:15px; }
	.musicbook-player-btn{ height:29px; padding:0 9px; font-size:10px; }
	.musicbook-player-status{ width:100%; margin:2px 0 0; }
}

/* ══════════════════════════════════════════════════
   ★ 앨범(자켓 + 레코드판)  — 라이트/다크 자동 전환
     · 자켓/레코드판(바이닐)은 그대로, 나머지는 무채색 + Pretendard
   ════════════════════════════════════════════════════ */
:root{
	/* 다크 */
	--al-cream:#f4f2ee;      /* 텍스트/트위터 박스용 밝은 배경(페이퍼) */
	--al-night:#26262b;      /* 뒷면(코멘트) 패널 배경 */
	--al-txt-light:#f1f2f4;  /* 제목 */
	--al-txt-dim:#b6b9c0;    /* 날짜·부제목 */
	--al-memo:#c7c9ce;       /* 아티스트·본문 */
	--al-gold:#c4c7ce;       /* 실버 액센트 */
	--al-gold-lt:#eef0f3;    /* 밝은 실버 */
	--al-gold-dark:#555861;  /* 실버 경계선 */
	--al-ink:#3c3f47;        /* 패널 테두리 */
	--al-font:'Pretendard JP','Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
	--disc:#e8c34a;          /* 레코드판 라벨 색 : JS가 카드마다 랜덤 지정 */
}

/* 카드 컨테이너 : 기존 어두운 배경/오버플로우 해제 */
#log_list .grid-item .item{ overflow:visible; background:transparent; }
#log_list .grid-item .item .item-inner{ background:transparent; color:var(--al-txt-light); text-align:left; }
#log_list .item .ui-pic{ position:relative; }

/* ★ 모든 카드 동일 폭 : 컬럼을 stretch 로 (기존 justify-items:center 로 인해 컬럼마다 크기 달라지는 문제 해결)
   + 레코드판이 삐져나올 공간(column-gap) 확보 */
#log_list{ justify-items:stretch; column-gap:26px; }
#log_list .log_columns{ width:100%; }
#log_list .grid-item{ width:100%; max-width:none; box-sizing:border-box; }

/* 앨범 = 자켓(좌) + 삐져나온 레코드판(우) */
#log_list .album{ position:relative; width:100%; }
#log_list .disc-wrap{
	position:absolute; top:50%; right:0; width:75.2%; height:0; padding-bottom:75.2%;
	transform:translateY(-50%); transition:right .5s cubic-bezier(.2,.8,.2,1); z-index:1;
}
#log_list .disc{
	position:absolute; inset:0; border-radius:50%;
	background:
		repeating-radial-gradient(circle at 50% 50%, #0c0c0e 0, #0c0c0e 2px, #1b1b21 3px, #0c0c0e 4px),
		radial-gradient(circle at 36% 30%, rgba(255,255,255,.16), transparent 45%),
		#0e0e12;
	box-shadow:10px 0 16px -12px rgba(0,0,0,.65), inset 0 0 0 1px rgba(226,229,235,.22), inset -5px 0 12px rgba(255,255,255,.045);
}
#log_list .disc::after{ /* 중앙 라벨 — 지정/랜덤 색 */
	content:""; position:absolute; top:50%; left:50%; width:33%; height:33%;
	transform:translate(-50%,-50%); border-radius:50%;
	background:var(--disc, #e8c34a);
	box-shadow:inset 0 0 0 2px rgba(0,0,0,.30), inset 2px 2px 4px rgba(255,255,255,.28);
}
#log_list .disc::before{ /* 중앙 구멍 */
	content:""; position:absolute; top:50%; left:50%; width:4.5%; height:4.5%; z-index:2;
	transform:translate(-50%,-50%); border-radius:50%; background:#000;
}
#log_list .item:hover .disc-wrap{ right:-13%; }
#log_list .item:hover .disc{ animation:al-spin 3.2s linear infinite; }
@keyframes al-spin{ to{ transform:rotate(360deg); } }

/* 자켓(커버) — 가로 기준 정사각(padding 기법), 테두리 없음 */
#log_list .jacket{
	display:block; position:relative; z-index:2;
	width:80%; height:0; padding-bottom:80%; overflow:hidden;
	background:#222; box-shadow:1px 0 0 rgba(238,240,244,.42), 10px 0 14px -12px rgba(0,0,0,.72), 0 9px 13px -12px rgba(0,0,0,.58), inset -1px 0 0 rgba(255,255,255,.12); cursor:pointer;
}
#log_list .jacket img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; cursor:pointer; }

#log_list .jacket::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset -1px 0 0 rgba(245,247,250,.34),inset 0 1px 0 rgba(255,255,255,.12)}


/* 재생버튼(영상) — 마우스오버 시 */
#log_list .jacket .play{
	position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
	background:rgba(0,0,0,.30); opacity:0; transition:opacity .2s;
}
#log_list .jacket:hover .play{ opacity:1; }
#log_list .jacket .play i{
	width:54px; height:54px; display:flex; align-items:center; justify-content:center;
	font-size:19px; color:#fff; background:rgba(20,20,20,.72);
	border:2px solid rgba(255,255,255,.85); border-radius:50%; padding-left:4px; box-shadow:0 3px 8px rgba(0,0,0,.4);
}
#log_list .jacket.playing{ background:#000; cursor:default; }
#log_list .jacket iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
#log_list .jacket .yt-player-host{ position:absolute; inset:0; width:100%; height:100%; }
#log_list .jacket.is-current-track{ box-shadow:0 0 0 2px #d6d8dd, 10px 0 14px -12px rgba(0,0,0,.72), 0 9px 13px -12px rgba(0,0,0,.58); }

/* 영상 뱃지 / 공개상태 플래그 */
#log_list .jacket .yt-badge{
	position:absolute; left:8px; bottom:8px; z-index:3; display:flex; align-items:center; gap:5px;
	font-family:var(--al-font); font-size:10px; letter-spacing:1px; color:#fff; background:rgba(0,0,0,.62); padding:4px 8px 3px;
}
#log_list .jacket .yt-badge i{ color:#ff5b5b; font-size:11px; }
#log_list .album-flag{
	position:absolute; top:8px; left:8px; z-index:3; font-size:11px; color:#fff; background:rgba(0,0,0,.62); padding:3px 6px;
}
#log_list .jacket .chk-id{ position:absolute; top:6px; right:6px; z-index:4; padding:0; }

/* 비공개(잠금) 자켓 */
#log_list .jacket.locked{ background:#2b2b30; cursor:default; }
#log_list .jacket.locked .s_cmt{
	position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
	text-align:center; font-family:var(--al-font); font-size:12px; letter-spacing:1px; color:var(--al-gold-lt); line-height:1.8;
}
#log_list .jacket.locked .s_cmt i{ font-size:20px; margin-bottom:6px; }

/* 트위터 / 텍스트 : 정사각 대신 자동 높이 */
#log_list .jacket.jacket-flex{ width:80%; height:auto; padding-bottom:0; background:transparent; box-shadow:none; cursor:default; }
#log_list .jacket.jacket-flex img{ position:static; inset:auto; width:100%; height:auto; object-fit:fill; }
#log_list .jacket.jacket-flex .theme-box{ padding:14px 12px; background:var(--al-cream); color:#2d2416; }
#log_list .jacket.jacket-flex .theme-box div{ text-align:left; font-size:13px; line-height:1.8; word-break:break-all; color:#2d2416; }

/* 블라인드 */
#log_list .item .jacket.ui-blind img{ filter:blur(18px); }
#log_list .item .ui-remove-blind{
	display:block; position:absolute; z-index:5; top:0; left:0; width:80%; height:0; padding-bottom:80%;
	background:rgba(0,0,0,.72); overflow:hidden; cursor:pointer;
}
#log_list .item .ui-remove-blind span{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
	font-family:var(--al-font); font-size:12px; line-height:1.7; color:#ddd;
}

/* ── 자켓 아래 정보 : 폭을 썸네일(80%)에 맞춤 ── */
#log_list .album-info{ width:80%; margin:9px 0 0; }
#log_list .album-subtitle{margin:0 0 3px;font-family:var(--al-font);font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--al-txt-dim);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#log_list .album-titlerow{ display:flex; align-items:center; gap:8px; }
#log_list .album-title{
	flex:1; min-width:0; font-family:var(--al-font); font-size:19px; font-weight:700; letter-spacing:-.2px;
	color:var(--al-txt-light); margin:0; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#log_list .album-when{ flex-shrink:0; font-family:var(--al-font); font-size:10px; font-weight:500; letter-spacing:1px; color:var(--al-txt-dim); }
#log_list .album-when .dur i{ color:var(--al-gold); margin-right:3px; font-size:9px; }
#log_list .album-memo{
	font-family:var(--al-font); font-size:12px; line-height:1.5;
	color:var(--al-memo); margin:4px 0 0; word-break:break-all;
}
#log_list .album-bottom{ text-align:right; margin-top:6px; }
#log_list .album-tools{ display:inline-flex; align-items:center; gap:5px; transform:scale(.9); transform-origin:right center; }
#log_list .album-tools a{
	width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:10px;
	color:var(--al-txt-dim); background:transparent; border:1px solid var(--al-gold-dark);
	text-indent:0; overflow:visible;
}
#log_list .album-tools a:before{ position:static; }
#log_list .album-tools a:hover{ color:var(--al-gold-lt); border-color:var(--al-gold); }
/* 기존 스킨 규칙 오버라이드 (open-comment 절대배치 / 아이콘 여백·색) */
#log_list .item-inner .album-tools .open-comment{
	position:static; width:22px; height:22px; line-height:normal; margin:0; text-indent:0;
}
#log_list .album-tools a i{ color:inherit; margin:0; }

/* 뒷면 코멘트 패널 (라이트/다크 대응) */
#log_list .grid-item .item .item-inner .ui-comment.co-comment{ background:var(--al-night); color:var(--al-txt-light); border:1px solid var(--al-ink); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.12); }
#log_list .item .ui-comment.co-comment h3.highlight{ color:inherit; }


/* 장르 입력 / 태그 프리뷰 */
.preview-genre-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}
.preview-genre-fields input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #ccc}
#log_list .album-genres{display:flex;flex-wrap:wrap;column-gap:7px;row-gap:2px;margin:8px 0 0;padding:0;list-style:none;line-height:0}
#log_list .album-genres li{list-style:none;height:12px;line-height:0}
#log_list .genre-chip{
    position:relative; display:inline-flex; align-items:center; min-width:62px;
    height:12px; padding:0 10px 0 8px; border:0; background:transparent;
    color:#bfc2c9; font-family:var(--al-font); font-size:9px; line-height:12px;
    letter-spacing:.02em; cursor:default;
}
#log_list .genre-chip::before{
    content:""; position:absolute; left:0; right:7px; top:0; height:5px;
    border-top:1px solid #777b84; border-left:1px solid #777b84;
}
#log_list .genre-chip::after{
    content:""; position:absolute; right:0; top:0; width:7px; height:11px;
    border-right:1px solid #777b84; border-bottom:1px solid #777b84;
}
@media(max-width:520px){.preview-genre-fields{grid-template-columns:1fr}}


/* ══════════════════════════════════════════
   ★ 글쓰기 폼 — 모던 스택형 리뉴얼 (라이트/다크 공용, 변수 기반)
   ══════════════════════════════════════════ */
#load_log_board #bo_w{ max-width:520px; margin:0 auto; padding:24px 22px 30px; }

/* 라벨 = 필드 위, 좌측 정렬 (기존 dt 좌측 절대배치 해제) */
#load_log_board #bo_w dl{ position:static; overflow:visible; margin:0 0 16px; }
#load_log_board #bo_w dt{
	position:static; width:auto; padding:0 0 6px; text-align:left; line-height:1.4;
	font-family:var(--al-font); font-size:11px; font-weight:700; letter-spacing:.09em;
	text-transform:uppercase; color:var(--al-txt-dim);
}
#load_log_board #bo_w dt label{ cursor:default; }
#load_log_board #bo_w dd{ margin-left:0; padding-top:0; min-height:0; }

/* 입력칸 : full-width + 통일된 테두리/라운드 */
#load_log_board #bo_w .frm_input,
#load_log_board #bo_w textarea,
#load_log_board #bo_w .upload_box input[type="text"]{
	width:100%; box-sizing:border-box; margin:0;
	padding:11px 13px; border:1px solid var(--al-ink); border-radius:10px;
	background:var(--default-box-color); color:var(--default-txt-color);
	font-family:var(--al-font); font-size:13px; line-height:1.45;
	transition:border-color .15s, box-shadow .15s;
}
#load_log_board #bo_w textarea{ min-height:120px; resize:vertical; }
#load_log_board #bo_w .frm_input:focus,
#load_log_board #bo_w textarea:focus{
	border-color:var(--al-txt-dim); box-shadow:0 0 0 3px rgba(128,128,128,.18); outline:none;
}
#load_log_board #bo_w .frm_input::placeholder{ color:var(--al-txt-dim); opacity:.7; }

/* 상단 옵션 줄 (공개범위·블라인드·익명·이모티콘) : 한 줄 wrap */
#load_log_board #bo_w .option_box{
	display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
	font-size:12px; color:var(--default-txt-color); margin-bottom:4px;
}
#load_log_board #bo_w .option_box select{
	width:auto; height:36px; box-sizing:border-box; padding:0 12px; line-height:1.2; vertical-align:middle;
	border:1px solid var(--al-ink); border-radius:8px;
	background:var(--default-box-color); color:var(--default-txt-color);
	font-family:var(--al-font); font-size:13px;
}
#load_log_board #bo_w .option_box label{ display:inline-flex; align-items:center; gap:4px; }
#load_log_board #bo_w .option_box .new_win{ color:var(--al-txt-dim); }
#load_log_board #bo_w #set_protect{ flex:0 0 100%; margin:2px 0 0; }
#load_log_board #bo_w #set_protect dt{ padding-bottom:4px; }

/* 구분선 : 얇고 은은하게 */
#load_log_board #bo_w hr.padding{ border:0; margin:12px 0; height:0; }
#load_log_board #bo_w hr.padding.small{ margin:8px 0; }

/* 도움말 문구 */
#load_log_board #bo_w .field-help{ margin:7px 1px 0; font-size:11px; line-height:1.5; color:var(--al-txt-dim); }
#load_log_board #bo_w .field-help code{
	font-family:var(--al-font); font-size:11px; padding:1px 5px; border-radius:4px;
	background:rgba(128,128,128,.16); color:inherit;
}

/* 장르 3칸 가로 */
#load_log_board #bo_w .genre-fields{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
#load_log_board #bo_w .genre-fields .frm_input{ width:100%; }

/* INNER COLOR : 옵션 + 컬러픽커 */
#load_log_board #bo_w .disc-color-options{ display:flex; flex-wrap:wrap; gap:14px; font-size:13px; }
#load_log_board #bo_w .disc-color-options label{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
#load_log_board #bo_w .disc-color-picker{ display:flex; align-items:center; gap:8px; margin-top:10px; transition:opacity .2s; }
#load_log_board #bo_w .disc-color-picker.is-disabled{ opacity:.4; }
#load_log_board #bo_w .disc-color-picker input[type="color"]{
	width:40px; height:34px; padding:2px; border:1px solid var(--al-ink); border-radius:8px;
	background:var(--default-box-color); cursor:pointer;
}
#load_log_board #bo_w .disc-color-picker input[type="text"]{
	width:104px; height:34px; padding:0 10px; border-radius:8px; text-transform:uppercase; font-size:12px;
}
#load_log_board #bo_w .disc-color-sample{ width:22px; height:22px; border-radius:50%; border:1px solid var(--al-ink); }
#load_log_board #bo_w .disc-color-help{ margin-top:8px; font-size:11px; line-height:1.5; color:var(--al-txt-dim); }

/* 게스트 이름/비번 */
#load_log_board #bo_w .guest-box{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
#load_log_board #bo_w .guest-box input[type="text"],
#load_log_board #bo_w .guest-box input[type="password"]{ width:auto; max-width:170px; flex:1 1 auto; }

/* 제출 버튼 : full-width 강조 */
#load_log_board #bo_w.chick .upload_box dd{ margin-right:0; }
#load_log_board #bo_w.chick .upload_box button{ position:static; width:100%; margin-top:10px; }
#load_log_board #bo_w .txt-center{ margin-top:6px; }
#load_log_board #bo_w button.ui-btn.point,
#load_log_board #bo_w button#btn_submit{
	display:flex; align-items:center; justify-content:center;
	width:100%; min-height:40px; padding:8px 18px; border:0; border-radius:10px; cursor:pointer;
	background:var(--al-txt-light); color:var(--default-box-color);
	font-family:var(--al-font); font-size:14px; font-weight:700; letter-spacing:.02em; line-height:1.2;
	transition:opacity .15s, transform .1s;
}
#load_log_board #bo_w button.ui-btn.point:hover{ opacity:.9; }
#load_log_board #bo_w button.ui-btn.point:active{ transform:translateY(1px); }

/* ── 폼 4줄 압축 : [제목|아티스트] · [부제목] · [장르] · [유튜브|컬러] ── */
#load_log_board #bo_w .upload_box{ display:grid; grid-template-columns:1fr 1fr; column-gap:14px; row-gap:16px; align-items:start; }
#load_log_board #bo_w .upload_box > dl{ margin:0; }
#load_log_board #bo_w .upload_box > dl:nth-child(1){ grid-column:1; grid-row:1; }        /* 제목 */
#load_log_board #bo_w .upload_box > dl:nth-child(3){ grid-column:2; grid-row:1; }        /* 아티스트 */
#load_log_board #bo_w .upload_box > dl:nth-child(2){ grid-column:1 / -1; grid-row:2; }   /* 부제목 */
#load_log_board #bo_w .upload_box > dl.genre-setting{ grid-column:1 / -1; grid-row:3; }  /* 장르 */
#load_log_board #bo_w .upload_box > dl:nth-child(5){ grid-column:1; grid-row:4; }        /* 유튜브 */
#load_log_board #bo_w .upload_box > dl.disc-color-setting{ grid-column:2; grid-row:4; }  /* 컬러 */
#load_log_board #bo_w .upload_box > *:not(dl){ grid-column:1 / -1; }                      /* 업로드 버튼 등 */
@media(max-width:560px){
	#load_log_board #bo_w .upload_box{ grid-template-columns:1fr; }
	#load_log_board #bo_w .upload_box > dl{ grid-column:1 / -1 !important; grid-row:auto !important; }
}