html{font-size:15px; background-color:#fff;}
body{background-color:#fff;}
.max-1400{max-width:1400px; border:solid 1px red; }
.footerMenu{position:absolute; /* iOS Safari 대응 -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); */}
.footerMenu ul{display:flex; width:100%; flex-direction:row; gap:10px;}
.footerMenu ul li{font-size:13px; display:inline-block; width:100%;}
.footerMenu a{color:#fff; width:50px; height:30px; background-color:#222; border-radius:5px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:1000; transition:all 0.3s ease;}
.footerMenu a.gogopage{background-color:#fff; border:solid 1px #111; color:#111; display:none;}
.main-container{max-width:1400px; margin:0px auto; width:100%; padding:25px 25px 50px 25px; display:grid; grid-template-columns:1fr 250px; gap:20px; background-color:#fff;}
@supports (-webkit-touch-callout: none) {
.main-container{padding-bottom:90px;}
}
.player-section{ display:flex; flex-direction:column; overflow:hidden; border-right:solid 1px #999; padding-right:20px;}
.video-container{width:100%; aspect-ratio:16/9; background-color:#222; border-radius:25px; margin-bottom:0px; position:relative; overflow:hidden; flex-shrink:0;}
.video-placeholder{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:18px; color:#666;}
.video-placeholder .icon{font-size:48px; margin-bottom:15px;}
.adminBtn{display:flex; gap:10px;}
.adminBtn a{ flex:1; border:solid 1px #111; color:#111; height:30px; width:100%; background-color:#fff; border-radius:0px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:1000; transition:all 0.3s ease;}
.adminBtnHide{display:none;}
.content-wrapper{margin-top:20px; position:relative; background-color:#f8f8f8; padding:10px; border-radius:15px;}
.content{line-height:1.5; transition:max-height 0.3s ease; overflow:hidden;}
.content.collapsed{max-height:4.5em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.content.expanded{max-height:none;}
.expand-btn{float:right; background:none; border:none; color:#007bff; cursor:pointer; padding:5px 0; font-size:14px; text-decoration:underline; margin-top:5px;}
.expand-btn:hover{color:#0056b3;}
.expand-btn:focus{outline:none;}
.content-wrapper.short-content .expand-btn{display:none;}
.tracks-section{flex:1; overflow:hidden; display:flex; flex-direction:column; margin-top:15px;}
.tracks-title{font-size:0.9rem; margin-bottom:15px; color:#898989; flex-shrink:0; font-weight:400}
.tracks-list{flex:1;}
.track-item{display:flex; align-items:center; gap:15px; padding:12px; border-bottom:solid 1px #ddd; cursor:pointer; transition:all 0.3s;}
.track-item:first-child{border-top:solid 1px #111;}
.track-item:hover{background-color:#eee;}
.track-number{width:30px; text-align:center; font-weight:bold; flex-shrink:0;}
.track-info{flex:1; min-width:0;}
.track-title{font-size:1.2rem; margin-bottom:2px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.track-artist{font-size:12px; color:#aaa; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.play-icon{width:24px; height:24px; color:#0078d7; font-size:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.3s; flex-shrink:0;}
.track-item:hover .play-icon, .track-item.active .play-icon{opacity:1;}
.no-video-icon{width:24px; height:24px; background-color:#eee; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:12px;}
.track-item.active{color:#0078d7; font-weight:600;}
.track-item.active .track-number{}
.track-item.active .track-artist{color:rgba(0,120,215,0.5);}
.album-detail{ padding-bottom:50px; }
/* 이 선택자에는 속성이 없었습니다.
.album-detail::-webkit-scrollbar{width:8px;}
.album-detail::-webkit-scrollbar-track{background:#333; border-radius:4px;}
.album-detail::-webkit-scrollbar-thumb{background:#666; border-radius:4px;}
*/
.album-box{display:flex; flex-direction:column; width:100%; height:523px; align-items:center; justify-content:; border-radius:25px; gap:20px;}
.album-box > div{ width:100%; max-width:250px; margin:0px auto;}
.album-image{margin:0px auto; width:100%; aspect-ratio:1; background-color:#333; border-radius:25px; margin:0px auto; overflow:hidden; background-image:url('data:image/svg+xml,'); background-size:80px; background-repeat:no-repeat; background-position:center;}
.album-image img{width:100%; height:100%; object-fit:cover;}
.detail-title{ max-width:220px; font-size:1.3rem; color:#111; line-height:1.3; font-weight:800; }
.detail-info{line-height:1; display:flex; flex-direction:column; gap:15px; width:100%;}
.detail-row{ }
.detail-label{color:#aaa; font-size:13px; margin-bottom:5px;}
.detail-value{color:#444; font-size:14px; word-break:break-word;}
.album-badges{display:flex; gap:6px; flex-wrap:wrap; }
.badge{font-size:13px; padding:3px 8px; border-radius:12px;}
.gohome{text-align:Center; padding-top:30px;}
.gohome a{ display:inline-block; width:100%; max-width:100%; text-align:Center; height:35px; line-height:35px; border-radius:25px; background-color:#111; color:#fff;}
/* 반응형 */
@media (max-width: 1479px) {
/*body{padding-top:40px;}*/
.main-container{min-height:100vh; max-width:100%; }
}
@media (max-width: 767px) {
.main-container {
flex-direction:column;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
height: auto;
}
.adminBtnHide{display:flex; margin-bottom:15px;justify-content: flex-end;margin-top:15px;}
.adminBtnHide a{width:120px; max-width:120px;}
.player-section {
padding:0px;
border:none;
height: auto;
}
.video-container{ border-radius:15px; }
.album-detail {
margin-top:20px;
height: auto;
padding-bottom:50px;
}
}
@media (max-width: 459px) {
.album-detail {
padding-bottom:150px;
}
}
@media (max-width: 399px) {
.adminBtnHide{margin-top:25px;}
#adminBtn{position:static; padding:20px 10px 10px 10px;}
.main-container {
padding: 10px;
gap: 10px;
}
.track-item {
padding: 10px;
}
.track-title {
font-size: 13px;
}
.track-artist {
font-size: 11px;
}
}