/* Music Player (YouTube) - for Nariya list skin */
.music-toolbar .btn { white-space: nowrap; }

.music-player-bar{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 2147483647 !important;
    background: rgba(255,255,255,.98);
    border-top: 1px solid rgba(0,0,0,.08);
    padding: .5rem .75rem;
    box-shadow: 0 -6px 20px rgba(0,0,0,.06);
}
@media (max-width: 767.98px){
    .music-player-bar{ padding: .5rem .5rem; }
}
.music-player-bar--standalone{
    position: relative;
    left: auto; right: auto; bottom: auto;
    z-index: auto;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .75rem;
}
.music-player-inner{
    display: flex;
    align-items: center;
    gap: .75rem;
}
.music-player-left, .music-player-right{
    display:flex;
    gap: .35rem;
    align-items:center;
}
.music-player-mid{
    min-width: 0;
}
.music-now-title{
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
}
.music-progress{
    margin-top: .35rem;
    height: .35rem;
    background: rgba(0,0,0,.08);
    border-radius: 999px;
    overflow:hidden;
}
.music-progress-bar{
    height:100%;
    background: rgba(13,110,253,.9);
    transition: width .2s linear;
}
.music-player-list{
    margin-top: .5rem;
}
.music-player-list-inner{
    max-height: 220px;
    overflow:auto;
    border-top: 1px solid rgba(0,0,0,.06);
    padding-top: .5rem;
}
.music-pl-item{
    display:flex;
    align-items:center;
    gap:.5rem;
    padding: .35rem .25rem;
    border-radius: .5rem;
}
.music-pl-item:hover{
    background: rgba(0,0,0,.04);
}
.music-pl-item.active{
    background: rgba(13,110,253,.08);
}
.music-pl-title{
    min-width:0;
    flex:1;
}
.music-yt{
    width:0; height:0; overflow:hidden;
}
.music-pick-label{ display:inline-flex; align-items:center; gap:.25rem; }

.na-icon.na-music{display:inline-block;width:1em;height:1em;vertical-align:-.15em;background:currentColor;mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9 13c0 1.105-1.12 2-2.5 2S4 14.105 4 13s1.12-2 2.5-2S9 11.895 9 13zm7-12v10c0 1.105-1.12 2-2.5 2S11 12.105 11 11s1.12-2 2.5-2c.366 0 .713.04 1.02.115V3.22L7 4.5V12c0 1.105-1.12 2-2.5 2S2 13.105 2 12s1.12-2 2.5-2c.366 0 .713.04 1.02.115V2.5a.5.5 0 0 1 .4-.49l9-1.8A.5.5 0 0 1 16 1z"/></svg>') no-repeat center/contain;}


/* Thumbnail next to title */
.music-thumb img{
  width: 48px;
  height: 27px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.08);
  vertical-align: middle;
}
.music-pick-label{
  user-select:none;
}
.music-toolbar .vr{
  height: 28px;
  align-self: center;
}

.music-thumb-img{
  width: 56px;
  height: 32px;
  object-fit: cover;
  flex-shrink: 0;   /* 🔥 이게 핵심 */
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.08);
}

/* select 글자 안보임 방지 */
#musicFavFolderSelect,
#musicFavFolderSelect option{
  color:#111 !important;
  background:#fff !important;
}
#musicFavFolderSelect:focus{
  color:#111 !important;
  background:#fff !important;
}

/* 모달이 플레이어보다 위에(테마 충돌 방지) */
#musicFavModal{ z-index: 1030 !important; pointer-events:auto !important; }
.modal-backdrop{ z-index: 1020 !important; }

/* 모달 열렸을 때 플레이어 클릭 방지(원하면 유지) */
body.music-fav-open #musicPlayerBar{ pointer-events:none !important; }

/* 제목 1줄 말줄임 */
#musicPlayerBar .music-player-mid{ min-width: 0; }
#musicPlayerBar .music-now-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================
   🌙 하단 미니 플레이어 & 재생목록 다크모드 대응
========================================= */

/* 1. 하단 고정 미니 플레이어 바 배경 및 글자색 */
html[data-bs-theme="dark"] #musicPlayerBar,
html[data-bs-theme="dark"] .music-player-bar {
    background-color: var(--bs-body-bg) !important; /* 다크모드 배경 */
    color: var(--bs-body-color) !important; /* 다크모드 글자색 */
    border-top: 1px solid var(--bs-border-color) !important; /* 플레이어 상단 구분선 */
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4) !important; /* 다크모드에 어울리는 부드러운 그림자 */
}

/* 2. 즐겨찾기 폴더 선택 셀렉트 박스 (#fff, #111 고정 해제) */
html[data-bs-theme="dark"] #musicFavFolderSelect,
html[data-bs-theme="dark"] #musicFavFolderSelect option {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-secondary-bg) !important; /* 살짝 밝은 다크 회색 */
    border: 1px solid var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] #musicFavFolderSelect:focus {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-body-bg) !important;
}

/* 3. 리스트 내부 체크박스 다크모드 조화 */
html[data-bs-theme="dark"] .list-group-item input.form-check-input[type="checkbox"] {
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color) !important;
}

/* 체크된 상태의 초록색(#198754)은 다크모드에서도 잘 어울리므로 그대로 유지하거나 살짝 밝게 조정 */
html[data-bs-theme="dark"] .list-group-item input.form-check-input[type="checkbox"]:checked {
    border-color: #198754 !important;
    background-color: #198754 !important;
}