/* OST (071) — 곡 목록과 아래 재생줄 */

/* ── 거르기 줄 ─────────────────────────────────────────────────────────── */
.ost-tabs { display: flex; flex-wrap: wrap; gap: .3rem; }
.ost-tab {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem;
    border: 1px solid var(--ls-border);
    border-radius: .3rem;
    background: var(--ls-surface);
    color: var(--ls-text-2);
    font-size: .78rem;
    cursor: pointer;
}
.ost-tab:hover { border-color: var(--ls-primary); color: var(--ls-accent); }
.ost-tab.is-on { background: var(--ls-primary); border-color: var(--ls-primary); color: #fff; font-weight: 600; }
.ost-tab em { font-style: normal; opacity: .65; font-size: .72rem; }
.ost-search { width: 11rem; }

/* ── 곡 목록 ───────────────────────────────────────────────────────────── */
.ost-list { list-style: none; margin: 0; padding: 0; }
.ost-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--ls-border);
    cursor: pointer;
}
.ost-item:hover { background: var(--ls-soft); }
.ost-item.is-on { background: var(--ls-primary-soft); }
.ost-item.is-on .ost-text b { color: var(--ls-accent); }

.ost-play {
    flex: 0 0 auto;
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ls-border-2);
    border-radius: 50%;
    background: var(--ls-surface);
    color: var(--ls-text-2);
    font-size: 1rem;
    cursor: pointer;
}
.ost-item:hover .ost-play, .ost-item.is-on .ost-play {
    border-color: var(--ls-primary); color: var(--ls-accent);
}
.ost-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.ost-text b { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ost-note { color: var(--ls-muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ost-source {
    flex: 0 0 auto;
    padding: .05rem .4rem;
    border-radius: .25rem;
    background: var(--ls-soft);
    color: var(--ls-muted-2);
    font-size: .72rem;
    white-space: nowrap;
}
.ost-len { flex: 0 0 3rem; text-align: right; color: var(--ls-muted); font-size: .78rem; }
.ost-down { flex: 0 0 auto; color: var(--ls-muted-3); padding: .1rem .2rem; }
.ost-down:hover { color: var(--ls-accent); }

/* ── 재생줄 — 아래에 붙어 따라온다 ───────────────────────────────────── */
.ost-player {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: .75rem -.75rem 0;
    padding: .5rem .75rem;
    border-top: 1px solid var(--ls-border);
    background: var(--ls-surface);
    box-shadow: 0 -.25rem .5rem rgb(30 32 39 / .06);
}
.ost-player-inner { display: flex; align-items: center; gap: .6rem; }
.ost-pp { flex: 0 0 auto; width: 2.2rem; }
.ost-now { display: flex; flex-direction: column; min-width: 0; flex: 0 1 14rem; line-height: 1.25; }
.ost-now b { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ost-now small { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ost-audio { flex: 1 1 auto; min-width: 0; height: 2.2rem; }
.ost-close { flex: 0 0 auto; }

/* ── 어두울 때 (3-14) — 밝을 때 색은 위 그대로 ───────────────────────── */
[data-bs-theme=dark] .ost-player { box-shadow: 0 -.25rem .5rem rgb(0 0 0 / .3); }

/* ── 좁은 화면 ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .ost-search { width: 100%; }
    /* 폰에서는 '어디 것' 딱지를 접는다 — 제목이 먼저다 */
    .ost-source { display: none; }
    .ost-player-inner { flex-wrap: wrap; }
    .ost-now { flex: 1 1 auto; }
    .ost-audio { flex: 1 0 100%; order: 3; }
}