/* 🛫 점검 · 🚨 경보 · 📒 장부 · 👑 후원자 · 🎵 BGM — 생김새 (alarm.js · panels/tools_records.js · panels/records/*)
   색은 controller.css 의 이름표(--accent · --good · --warn · --bad · --paper …)만 쓴다. 바깥에서 불러오는 것 없음. */

/* ── 머리줄 상태 점 — [방송 화면] [후원 받기] — 오른쪽 묶음 바로 앞(폰에서는 로고 줄 오른쪽 끝) ── */
.pf-chips { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.pf-chip { font: inherit; font-size: 13.5px; font-weight: 800; color: var(--muted); cursor: pointer; }
.pf-chip .ts { display: none; }
.pf-chip i { background: #8e8e93; }
.pf-chip:hover { background: rgba(255, 255, 255, 0.12); }
.pf-chip[data-lv=ok] { color: #8ef0b8; background: rgba(61, 220, 132, 0.1); border-color: rgba(61, 220, 132, 0.3); }
.pf-chip[data-lv=ok] i { background: var(--good); }
.pf-chip[data-lv=warn] { color: #ffd28a; background: rgba(245, 165, 36, 0.12); border-color: rgba(245, 165, 36, 0.4); }
.pf-chip[data-lv=warn] i { background: var(--warn); }
.pf-chip[data-lv=bad] { color: #fff; background: rgba(230, 60, 60, 0.85); border-color: #ff6b6b; }
.pf-chip[data-lv=bad] i { background: #fff; animation: blink 1.2s ease-in-out infinite; }

/* ── 방송 중 경보 띠 — 머리줄 맨 아래 줄(머리줄과 같이 위에 붙어 다닌다) ── */
.pf-alarm {
    flex: 1 1 100%; order: 99; display: flex; flex-direction: column; gap: 10px; margin: 2px 0 0; padding: 12px 14px;
    border-radius: 18px; border: 2px solid #ff5a5a; background: rgba(255, 69, 58, 0.2); color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 69, 58, 0.12); animation: pfIn 0.2s ease;
}
@keyframes pfIn { from { opacity: 0; transform: translateY(-4px); } }
.pf-row { display: flex; align-items: flex-start; gap: 12px; }
.pf-row:not([hidden]) ~ .pf-row:not([hidden]) { padding-top: 10px; border-top: 1px solid rgba(255, 90, 90, 0.35); }
.pf-txt { flex: 1; min-width: 0; }
.pf-head b { font-size: 16px; font-weight: 900; }
.pf-since { margin-left: 4px; color: #ffd0d0; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-row small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.86); line-height: 1.5; }
.pf-row[data-k=sp] .pf-head b { color: #ffe08a; }
.pf-ack { flex: none; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.35); color: #fff; }

/* ── 방송 전 점검표 — 방송 전 화면(이름 적기 옆) · [점검] 탭 ── */
body[data-view=setup] .v-setup { flex-wrap: wrap; align-items: flex-start; gap: 18px; }
.pf-pre { width: min(470px, 100%); gap: 10px; }
.tabpanel.pf-card { display: flex; flex-direction: column; gap: 10px; }
.pf-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-top h2 { margin-right: auto; }
.pf-sum { font-size: 14px; font-weight: 800; color: var(--muted); }
.pf-sum[data-lv=ok] { color: var(--good); }
.pf-sum[data-lv=warn] { color: var(--warn); }
.pf-sum[data-lv=bad] { color: var(--bad); }
.pf-lead { margin: 0; }
.pf-items { list-style: none; margin: 0; padding: 4px 14px; border-radius: 18px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line-soft); }
.pf-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.pf-item:first-child { border-top: 0; }
.pf-ic { font-size: 17px; line-height: 1.35; text-align: center; }
.pf-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-t b { font-size: 15px; font-weight: 800; }
.pf-t small { color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.45; }
.pf-item.bad .pf-t b { color: #ff9e9e; }
.pf-item.warn .pf-t b { color: #ffd28a; }
.pf-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.pf-card input[type=checkbox], .rc-toggle input, .bgm-auto input { width: 19px; height: 19px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }

/* ── 장부 · 공통 ── */
.tag.info { background: rgba(124, 178, 255, 0.16); color: #b9d4ff; }
.tag.bad { background: rgba(255, 107, 107, 0.18); color: #ffb8b8; }
.rc-sess { text-align: right; }
.rc-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); }
.rc-seg-btn {
    min-height: 38px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: var(--muted);
    font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer;
}
.rc-seg-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.rc-seg-btn.on { background: var(--accent); color: var(--on-accent); }
.rc-seg.sm .rc-seg-btn { min-height: 34px; padding: 0 14px; font-size: 14px; }
.rc-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.rc-bar .rc-q { flex: 1; }
.rc-lead { flex: 1; margin: 0; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.rc-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.rc-chip:hover { background: rgba(255, 255, 255, 0.07); }
.rc-chip .n { color: var(--muted); font-weight: 900; font-variant-numeric: tabular-nums; }
.rc-chip.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.rc-chip.on .n { color: inherit; }
.rc-totals { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; padding: 10px 14px; border-radius: 16px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line-soft); }
.rc-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rc-total b { font-size: 22px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.rc-break { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--muted); font-size: 13px; font-weight: 600; }
.rc-break b { color: var(--text); font-variant-numeric: tabular-nums; }
.rc-picked { font-size: 13.5px; font-weight: 800; color: var(--accent-hi); }
.rc-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--muted); font-size: 14px; font-weight: 700; cursor: pointer; }
.rc-status { margin: 0 0 8px; color: var(--muted); font-size: 14px; font-weight: 700; }
.rc-status[data-lv=bad] { padding: 8px 12px; border-radius: 12px; background: rgba(255, 107, 107, 0.14); color: #ffb8b8; }
.rc-list { list-style: none; margin: 0; padding: 0; }
.rc-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 4px; border-bottom: 1px solid var(--line-soft); }
.rc-row:last-child { border-bottom: 0; }
.rc-time { padding-top: 2px; color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.rc-main { min-width: 0; }
.rc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rc-name { font-size: 15.5px; font-weight: 800; overflow-wrap: anywhere; }
.rc-amt { color: var(--gold); font-weight: 900; font-variant-numeric: tabular-nums; }
.rc-to { font-weight: 700; color: var(--text); }
.rc-src { color: var(--dim); font-size: 12.5px; font-weight: 600; }
/* 🏷️ 장부 줄 번호 — 조용한 꼬리표(작은 회색) · ↻ 다시 송출(10-17) */
.rc-no { color: var(--dim); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .8; }
.rc-line .rc-replay { margin-left: auto; min-height: 30px; white-space: nowrap; }
@media (max-width: 899px) { .rc-line .rc-replay { min-height: 36px; padding: 0 12px; font-size: 13.5px; } }   /* 폰 — 손가락으로 누르기 쉽게 */
.rc-msg {
    margin: 4px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-row.st-ignored .rc-name, .rc-row.st-ignored .rc-amt { opacity: 0.6; }
.rc-deltas { display: inline-flex; gap: 8px; font-variant-numeric: tabular-nums; }
.rc-delta { color: var(--good); font-weight: 900; }
.rc-row.neg .rc-delta { color: var(--bad); }
.rc-cdelta { color: var(--muted); font-weight: 700; }
.rc-row.undone .rc-name, .rc-row.undone .rc-deltas { text-decoration: line-through; text-decoration-thickness: 2px; opacity: 0.55; }
.rc-row.undone .rc-time, .rc-row.undone .rc-msg { opacity: 0.55; }
.rc-more { display: flex; margin: 10px auto 0; }
/* 지난 방송 */
.rc-sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rc-sbtn {
    width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-areas: "name amt chev" "sub amt chev";
    gap: 2px 12px; align-items: center; padding: 12px 14px; text-align: left; border-radius: 16px; border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.2); color: var(--text); font: inherit; cursor: pointer;
}
.rc-sbtn:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--accent-ring); }
.rc-sname { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 800; }
.rc-ssub { grid-area: sub; color: var(--muted); font-size: 13px; font-weight: 600; }
.rc-sbtn .rc-amt { grid-area: amt; font-size: 17px; }
.rc-chev { grid-area: chev; color: var(--dim); font-size: 22px; line-height: 1; }
.rc-dhead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 12px; }
.rc-dtitle { display: flex; flex-direction: column; min-width: 0; }
.rc-dtitle b { font-size: 16px; font-weight: 900; }

/* ── 후원자 순위(흰 종이 카드 — 점수판과 같은 결) ── */
.dn-lead { margin: 0 0 10px; }
.dn-list { list-style: none; margin: 0; padding: 2px 14px; border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2); }
.dn-list:empty { display: none; }
.dn-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--paper-3); }
.dn-row:last-child { border-bottom: 0; }
.dn-rank { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-3); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dn-row.first .dn-rank { background: var(--accent); color: #fff; }
.dn-main { min-width: 0; display: flex; flex-direction: column; }
.dn-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dn-name { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.dn-grade { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--g, #bcb0a6); color: #1d1a17; font-size: 12px; font-weight: 900; white-space: nowrap; }
.dn-sub { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.dn-total { color: var(--accent-ink); font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.dn-list .btn.ghost-danger { background: transparent; border-color: #f0c8c9; color: #c4383d; }
.dn-list .btn.ghost-danger:hover:not(:disabled) { background: #fdecec; }
.dn-exbox { margin-top: 4px; }
.dn-ex { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dn-exrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); border: 1px dashed rgba(255, 255, 255, 0.18); }
.dn-exrow .dn-name { color: var(--muted); }

/* ── 🎵 BGM 탭 ── */
.bgm-load { display: flex; gap: 8px; margin: 0 0 6px; }
.bgm-load input { flex: 1; }
.bgm-msgrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.bgm-msgrow:not(:has(.bgm-msg:not(:empty))):not(:has(.bgm-all:not([hidden]))) { display: none; }
.bgm-msg { margin: 0; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.bgm-msg:empty { display: none; }
.bgm-msg[data-lv=bad] { padding: 8px 12px; border-radius: 12px; background: rgba(255, 107, 107, 0.14); color: #ffb8b8; }
.bgm-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 6px; }
.bgm-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #000; border: 1px solid var(--line); }
.bgm-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--dim); font-weight: 700; font-size: 14px; }
.bgm-empty-ic svg { width: 38px; height: 38px; display: block; }
.bgm-screen.has .bgm-empty { display: none; }
.bgm-host, .bgm-host > *, .bgm-host iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bgm-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bgm-meta { display: flex; flex-direction: column; min-width: 0; }
.bgm-title { font-size: 17px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgm-author { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgm-seek { display: flex; align-items: center; gap: 10px; }
.bgm-time { color: var(--muted); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bgm-prog, .bgm-vol { flex: 1; min-width: 0; height: 30px; accent-color: var(--accent); cursor: pointer; }
.bgm-prog:disabled { cursor: default; opacity: 0.45; }
.bgm-ctrl { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) 44px; gap: 8px; }
.bgm-ctrl .btn { padding: 0 10px; min-width: 0; }
.bgm-ctrl .bgm-prev, .bgm-ctrl .bgm-next { padding: 0; display: grid; place-items: center; }
.bgm-prev svg, .bgm-next svg { width: 18px; height: 18px; display: block; }
.bgm-play svg { width: 18px; height: 18px; }
.bgm-volrow { display: flex; align-items: center; gap: 10px; }
.bgm-mute { display: grid; place-items: center; }
.bgm-mute svg { width: 22px; height: 22px; }
.bgm-mute[aria-pressed=true] { color: #ff9e9e; border-color: rgba(255, 107, 107, 0.5); }
.bgm-vol.muted { opacity: 0.45; }
.bgm-volout { min-width: 44px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.bgm-auto { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 700; cursor: pointer; }
.bgm-note { margin: 0; }
/* 재생 목록 — 최대 200곡, 줄은 칸 안에서 굴린다 */
.bgm-listbox { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bgm-listbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bgm-listcap { font-size: 15px; font-weight: 900; }
.bgm-mode.on { background: var(--accent); border-color: var(--accent); color: #1d1206; }
.bgm-count { flex: 1; min-width: 0; text-align: right; color: var(--muted); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bgm-clear:not(:disabled):hover { color: #ff9d9d; border-color: rgba(255, 107, 107, 0.6); }
.bgm-list { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.18); }
.bgm-list:empty { display: none; }
.bgm-list-empty { margin: 0; }
.bgm-row { display: flex; align-items: center; gap: 6px; min-width: 0; border-radius: 10px; border: 1px solid transparent; }
.bgm-row:hover { background: rgba(255, 255, 255, 0.05); }
.bgm-row.now { background: rgba(240, 123, 63, 0.14); border-color: rgba(240, 123, 63, 0.45); }
.bgm-row.bad { opacity: 0.5; }
.bgm-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bgm-no { flex: none; width: 26px; text-align: center; color: var(--muted); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bgm-row.now .bgm-no { color: var(--accent-hi); }
.bgm-ltx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bgm-lt { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgm-la { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgm-la:empty { display: none; }
.bgm-acts { flex: none; display: flex; gap: 2px; padding-right: 4px; }
.bgm-act { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.bgm-act:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.bgm-act:disabled { opacity: 0.3; cursor: default; }
.bgm-del:hover:not(:disabled) { color: #ff9d9d; }
/* 재생목록 주소를 읽는 안 보이는 플레이어 */
.bgm-probe { position: fixed; left: -9999px; top: 0; width: 320px; height: 180px; pointer-events: none; opacity: 0; }
@media (max-width: 1279px) { .bgm-grid { grid-template-columns: minmax(0, 1fr); } }
/* 탭을 옮겨도 BGM 이 끊기지 않게 — 숨긴 BGM 탭은 없애지(display:none) 않고 화면 밖에 투명하게 그려 둔다.
   (tabs.js 는 숨긴 탭에 hidden 을 붙인다 · 키보드 초점은 bgm.js 가 inert 로 막는다) */
.tabpanel[data-panel="bgm"][hidden] {
    display: block !important; position: fixed !important; left: 0; top: 0; width: 480px; max-width: 100vw; z-index: -5;
    opacity: 0; pointer-events: none; clip-path: inset(50%);
}

/* ── 🎵 조종 줄 BGM(#ctl-bgm, 시안 B) — 제목 · 시간 · ▶ · ⏭ · 'BGM 소리' ── */
.bgm-mini { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 100%; }
#hdr .cb-bgm .bgm-mini { max-width: none; }
.bgm-mini-ic { display: grid; place-items: center; width: 18px; color: var(--accent); flex: none; }
.bgm-mini-ic svg { width: 16px; height: 16px; display: block; }
.bgm-mini.on .bgm-mini-ic { animation: bgmBeat 1.1s ease-in-out infinite; }
@keyframes bgmBeat { 50% { transform: scale(1.18); } }
.bgm-mini-name {
    flex: 0 1 250px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
    padding: 0 4px; border: 0; background: none; color: var(--text); cursor: pointer; font: inherit; text-align: left;
}
.bgm-mini-t { max-width: 100%; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgm-mini-time { font-style: normal; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bgm-mini-time:empty { display: none; }
.bgm-mini-name:hover .bgm-mini-t { color: var(--accent-hi); }
.bgm-mini-btn {
    flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: var(--text);
}
.bgm-mini-btn svg { width: 16px; height: 16px; display: block; }
.bgm-mini-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
.bgm-mini-btn:disabled { opacity: 0.4; cursor: default; }
.bgm-mini-play { background: #fff; border-color: #fff; color: #1d1a17; }
.bgm-mini-play:hover:not(:disabled) { background: #fff; color: #1d1a17; }
.bgm-mini-lbl { flex: none; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.bgm-mini-vol.muted { opacity: 0.45; }

/* ── 반 화면 · 폰 ── */
@media (max-width: 1279px) {
    /* 반 화면 — 제목 140, 소리 막대는 BGM 탭에서 */
    .bgm-mini-name { flex-basis: 140px; }
    #hdr .cb .bgm-mini-lbl, #hdr .cb .bgm-mini-vol { display: none; }
}
@media (min-width: 900px) {
    /* 넓은 화면은 긴 목록을 칸 안에서 굴린다(점수판 · 대기함이 밀려 내려가지 않게) */
    .rc-list { max-height: 560px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
}
@media (max-width: 899px) {
    .pf-chip { font-size: 12.5px; }
    .pf-chip .t { display: none; }
    .pf-chip .ts { display: inline; }
    /* 경보 띠는 머리줄과 같이 위에 붙는다 — 폰에서는 설명을 한 줄로 접고, 글자를 누르면 펼친다 */
    .pf-alarm { gap: 8px; padding: 9px 10px 9px 12px; border-radius: 16px; }
    .pf-row { gap: 8px; align-items: center; }
    .pf-row:not([hidden]) ~ .pf-row:not([hidden]) { padding-top: 8px; }
    .pf-txt { cursor: pointer; }
    .pf-head b { font-size: 14.5px; }
    .pf-row small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; }
    .pf-row.open small { display: block; }
    .pf-ack { min-height: 34px; padding: 0 12px; font-size: 13px; }
    .pf-pre { padding: 18px; }
    /* 폰 — BGM 은 조종 줄 [더보기] 판 안(이 기기에서 소리가 난다) */
    .bgm-mini { flex-wrap: wrap; width: 100%; height: auto; row-gap: 8px; }
    .bgm-mini-name { flex: 1 1 55%; }                 /* 제목 · ▶ · ⏭ 한 줄, 'BGM 소리' 막대는 다음 줄 */
    .bgm-mini-lbl { margin-left: 26px; }
    .bgm-mini-btn { width: 40px; height: 40px; }
    .bgm-mini-vol { flex: 1 1 140px; width: auto; }
    .bgm-ctrl { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) 44px; gap: 6px; }
    .bgm-act { width: 34px; height: 34px; }
    .rc-row { grid-template-columns: 58px minmax(0, 1fr); gap: 8px; }
    .rc-seg { display: flex; }
    .rc-seg-btn { flex: 1; padding: 0 10px; }
    .dn-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "rank main total" "rank main btn"; row-gap: 6px; }
    .dn-rank { grid-area: rank; width: 26px; height: 26px; }
    .dn-main { grid-area: main; }
    .dn-total { grid-area: total; text-align: right; }
    .dn-ex-btn { grid-area: btn; justify-self: end; }
    .bgm-ctrl .btn { font-size: 14px; }
}

/* ── 📥 장부 엑셀(CSV) — [⬇ 엑셀(CSV)] 을 누르면 고를 거리가 아래로 뜬다 ── */
.rc-headr { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.rc-csv { position: relative; }
.rc-csv > summary { list-style: none; cursor: pointer; }
.rc-csv > summary::-webkit-details-marker { display: none; }
.rc-csv-pop {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: max-content; max-width: min(300px, calc(100vw - 32px));
    display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: #2b221d; border: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.rc-csv-go { justify-content: flex-start; white-space: nowrap; }
.rc-csv-note { margin: 2px 2px 0; white-space: normal; }
.rc-dhead .rc-csv { margin-left: auto; }

/* ── 🙈 조종 줄 리액션 모드 스위치(#ctl-rx, rxswitch.js) — 켜면 주황 테두리(시안 B .rx) ── */
.rx {
    display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 8px; border-radius: 11px; cursor: pointer; flex: none;
    border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); white-space: nowrap;
}
.rx.on { border-color: rgba(240, 123, 63, 0.75); background: rgba(240, 123, 63, 0.12); }
.rx.auto { border-color: rgba(240, 123, 63, 0.4); }
.rx .t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.rx .t b { font-size: 12.5px; font-weight: 700; }
.rx .t em { font-style: normal; font-size: 10.5px; color: var(--dim); font-weight: 600; }
.rx.on .t em, .rx.auto .t em { color: var(--accent-hi); }
.rx input.sw:disabled { opacity: 0.6; cursor: progress; }
@media (max-width: 1279px) {
    .rx { padding: 0 10px 0 8px; gap: 7px; }
    .rx .rx-b { font-size: 12px; }
}
@media (max-width: 899px) {
    /* 폰 조종 줄 — 리액션 · 중단 · 건너뛰기(크게) · 더보기 */
    #hdr .cb .rx { height: 40px; max-width: 132px; padding: 0 8px; gap: 8px; }
    #hdr .cb .rx .t { overflow: hidden; }
    #hdr .cb .rx .t b, #hdr .cb .rx .t em { overflow: hidden; text-overflow: ellipsis; }
}

/* ── ⌨️ Ctrl+K 빠른 명령(cmdk.js) — 화면 위쪽 가운데 상자 ──
   ⚠️ z-index 는 확인 상자(.modal-wrap 100)보다 아래 — '올클리어' · '룰렛 돌려' 가 묻는 확인 상자가 이 상자 뒤에 숨으면 누를 수 없다(검토 10-17). [더보기] 판(95)보다는 위. */
.cmdk { position: fixed; inset: 0; z-index: 98; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(10, 7, 6, 0.55); }
.cmdk[hidden] { display: none !important; }
.cmdk-box {
    width: min(560px, 100%); max-height: 76vh; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px;
    background: #261d18; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.cmdk-head { display: flex; align-items: center; gap: 8px; }
.cmdk-k { flex: none; padding: 3px 7px; border-radius: 7px; border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; }
.cmdk-in { flex: 1; min-width: 0; height: 44px; font-size: 16px; }
.cmdk-close { flex: none; }
.cmdk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.cmdk-list:empty { display: none; }
.cmdk-item {
    width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px;
    background: transparent; color: var(--text); font: inherit; font-size: 14.5px; font-weight: 700; text-align: left; cursor: pointer;
}
.cmdk-list li.on .cmdk-item { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.cmdk-item:hover { background: rgba(255, 255, 255, 0.06); }
.cmdk-ic { flex: none; width: 18px; text-align: center; color: var(--accent-hi); }
.cmdk-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-out { margin: 0; padding: 0 4px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.cmdk-out:empty { display: none; }
.cmdk-out[data-lv=bad] { color: #ffb8b8; }
.cmdk-foot { margin: 0; padding: 0 4px; color: var(--dim); font-size: 12px; }
.cmdk-cards { max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; min-width: 0; }
.cmdk-cards[hidden] { display: none; }

/* ↩ 골라 되돌리기(undopick 10-17) — 점수 기록 줄 [↩ 되돌리기] · 되돌린 줄은 회색 '되돌림'(단추 없음) */
.rc-line .rc-undo { margin-left: auto; min-height: 30px; white-space: nowrap; }
@media (max-width: 899px) { .rc-line .rc-undo { min-height: 36px; padding: 0 12px; font-size: 13.5px; } }   /* 폰 — 손가락으로 */
.tag.undone-tag { color: var(--dim); background: transparent; border: 1px solid var(--line-soft); }