/* [B] 랭킹 첫 화면(시안 B 10-17 · w2center) — 무대 줄(stagebar.js) · 숫자 카드 4장 + 💱 정산 차액(kpis.js) ·
   점수판 B 격자 · 운영비 · 🏺 모금함 줄(scores.js) · 기본 설정(명단 · 목표 · 게이지 보정 — goal.js) · 🏆 달성 상자 자리.
   틀(칸 id · 세 폭)은 controller.css 맨 아래 '시안 B 틀'. 여기는 가운데 칸 안쪽 모양만.
   폭: ≥1280 카드 4장 한 줄(128px) · 점수판 40 · 이름 · 84 · 84 · 210 · 44
       900~1279 카드 2×2(96px) · 점수판 34 · 이름 · 52 · 52 · 96 · 28
       <900(폰) 카드 옆으로 밀기(150×82, 첫 화면 2장 반) · 점수판 24 · 이름 · 36 · 36 · 84 · 28 · 모금함 두 줄 */
#home {
    --k-paper: #fffaf5; --k-ink: #2a2320; --k-ink2: #6b5e56; --k-ink3: #a1958c; --k-line: #efe4db; --k-hot: #e0602a;
}

/* ── 🎬 무대 줄 ── */
body[data-view=setup] #stagebar { display: none; }
#stagebar {
    flex: none; position: sticky; top: -14px; z-index: 6; min-height: 46px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    margin: -4px 0 0; padding: 6px 7px 6px 12px; border-radius: 12px; background: #251c18; border: 1px solid var(--line-2);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); font-size: 13px;
}
#stagebar .sgb-stage { min-width: 0; display: flex; align-items: center; gap: 8px; flex: 0 1 auto; }
#stagebar .sgb-ic { color: var(--muted); display: grid; }
#stagebar .sgb-nm { font-size: 13.5px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stagebar .sgb-nm.none { color: var(--muted); font-weight: 700; }
#stagebar .sgb-cov { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gold); white-space: nowrap; flex: none; }
#stagebar .sgb-cov .ico { width: 14px; height: 14px; }
#stagebar .sgb-game {
    display: flex; align-items: center; gap: 6px; flex: none; padding: 3px 4px 3px 10px; border-radius: 10px;
    background: rgba(240, 123, 63, 0.12); border: 1px solid rgba(240, 123, 63, 0.35);
}
#stagebar .sgb-gl { font-size: 12.5px; font-weight: 800; color: #ffb58c; white-space: nowrap; }
#stagebar .sgb-clock { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; min-width: 50px; text-align: center; }
#stagebar .sgb-clock.low { color: var(--bad); }
#stagebar .sgb-held { font-size: 11.5px; color: var(--warn); white-space: nowrap; }
#stagebar .sgb-turn { font-size: 12px; color: var(--muted); white-space: nowrap; }
#stagebar .sgb-sp { flex: 1 1 0; min-width: 0; }
#stagebar .sgb-cues { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; margin-left: auto; }
#stagebar .sgb-cue { min-width: 0; max-width: 220px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stagebar .sgb-cue.none { color: var(--dim); }
#stagebar .btn.xs { flex: none; }
#stagebar .sgb-next { max-width: 200px; }
#stagebar .sgb-nt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#stagebar .sgb-prev { padding: 0 7px; }

/* 🏆 목표 달성 상자 자리 — 어느 탭에서든(가운데 칸 맨 위) */
#goal-win-slot { flex: none; }
#goal-win-slot .goal-win { margin-top: 0; }

/* ── 🔢 숫자 카드 4장 ── */
#kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi {
    position: relative; min-width: 0; height: 128px; padding: 14px 14px 12px; border-radius: 16px; overflow: hidden;
    background: var(--k-paper); color: var(--k-ink); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.kpi .kl { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--k-ink2); white-space: nowrap; }
.kpi .kl-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kpi .kxtra { flex: none; font-size: 10.5px; font-weight: 800; color: var(--k-hot); background: #fde9dc; padding: 1px 6px; border-radius: 6px; }
.kpi .ki { flex: none; margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: #fde9dc; color: #e0662c; display: grid; place-items: center; }
.kpi .ki .ico { width: 14px; height: 14px; }
.kpi .kv { margin-top: 8px; display: flex; align-items: baseline; gap: 2px; min-width: 0; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi .kv .kn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kpi .kv small { flex: none; font-size: 14px; font-weight: 700; color: var(--k-ink2); letter-spacing: 0; margin-left: 2px; }
.kpi .ks { margin-top: 7px; font-size: 12px; color: var(--k-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; min-width: 0; }
.kpi .ks b { color: var(--k-ink2); font-weight: 700; flex: none; }
.kpi .ks .kbig, .kpi .ks .kgoal { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kpi .kbar { margin-top: 9px; height: 6px; border-radius: 3px; background: var(--k-line); overflow: hidden; }
.kpi .kbar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #ff9a62, #f07b3f); transition: width 0.4s ease; }
.kpi .kbar + .ks { margin-top: 5px; }
.kpi .kset { min-height: 22px; padding: 0 8px; font-size: 11.5px; border-color: #e2d5ca; background: #fff; color: var(--k-ink); }
.kpi-wait { cursor: pointer; }
.kpi-wait .kv { color: var(--k-ink3); }
.kpi-wait.hot { background: #fff4ec; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), inset 0 4px 0 var(--accent); }
.kpi-wait.hot .kv { color: var(--k-hot); }
.kpi-wait:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.kpi-goal.done .kv { color: #1f9a57; }
.kpi-goal.done .kbar i { background: linear-gradient(90deg, #3ddc84, #2f9a5f); }

/* ── 💱 정산 차액 한 줄 ── */
.settle { flex: none; margin-top: -4px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.16); font-size: 12.5px; color: var(--muted); }
.settle .st-line { min-height: 36px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 4px 6px 4px 12px; }
.settle .st-ic { display: grid; color: var(--dim); }
.settle .st-ic .ico { width: 15px; height: 15px; }
.settle .st-k { font-weight: 800; color: var(--text); margin-left: -8px; }
.settle .st-it { white-space: nowrap; }
.settle .sv { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.settle .sp { margin-left: 3px; color: var(--dim); }
.settle .sd { color: var(--gold); }
.settle.zero .sd { color: var(--good); }
.settle.neg .sd { color: #ff9d9d; }
.settle .st-why { margin-left: auto; }
.settle .st-why[aria-expanded=true] { background: rgba(240, 123, 63, 0.18); border-color: var(--accent-ring); }
.settle .st-pop { padding: 2px 12px 10px; }
.settle .st-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.settle .st-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 104px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line-2); }
.settle .st-list li.st-empty { display: block; color: var(--good); }
.settle .sw-l { min-width: 0; display: flex; flex-direction: column; }
.settle .sw-l b { color: var(--text); font-weight: 700; font-size: 13px; }
.settle .sw-l small { color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settle .sw-n { color: var(--dim); white-space: nowrap; }
.settle .sw-v { text-align: right; color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.settle .sw-v.neg { color: #9fd0ff; }
.settle .st-note { margin: 6px 0 0; color: var(--dim); font-size: 11.5px; line-height: 1.5; }

/* ── 🏆 점수판(B 모양 — 머리까지 흰 카드 하나) ── */
#home > #scores { flex: none; overflow: hidden; background: var(--k-paper); color: var(--k-ink); border: 0; border-radius: 18px; padding: 2px 16px 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); }
/* 운영비 · 모금함 줄 바탕은 카드 끝까지 — 바깥 여백(margin)으로 늘리면 가로 넘침이 되므로 그림자로 칠한다 */
#scores .bottom-row, #scores .jar-row { --bleed: 16px; box-shadow: calc(-1 * var(--bleed)) 0 0 #fbf5ef, var(--bleed) 0 0 #fbf5ef; }
#scores .bt { height: auto; min-height: 42px; margin: 0; gap: 8px; justify-content: flex-start; flex-wrap: wrap; padding: 4px 0; }
#scores .bt h2 { margin: 0; font-size: 14.5px; font-weight: 800; }
#scores .bt .bt-n { font-size: 12px; color: var(--k-ink3); }
#scores .bt .sec-tools { margin-left: auto; gap: 6px; }
#scores .btn { border-color: #e2d5ca; background: #fff; color: var(--k-ink); }
#scores .btn:hover:not(:disabled) { background: #fbf3ec; }
#scores .btn.pri { background: var(--accent); border-color: var(--accent); color: #fff; }
#scores .btn.ghost-danger { border-color: #efa3a3; color: #d6463f; background: #fff; }
#scores .tag.hot { background: #fde9dc; color: var(--k-hot); }
#scores .board { background: transparent; box-shadow: none; border-radius: 0; padding: 0; color: var(--k-ink); }
#scores .sub-h { color: var(--k-ink); }
#scores .sub-h small { color: var(--k-ink3); }
#scores .brow {
    grid-template-columns: 40px minmax(0, 1fr) 84px 84px 210px 44px; column-gap: 8px; row-gap: 0;
    min-height: 48px; padding: 0; border-bottom: 1px solid #f4ebe3;
}
#scores .brow > :nth-child(5) { padding-left: 0; }
#scores .bhead { min-height: 30px; font-size: 11.5px; font-weight: 600; color: var(--k-ink3); border-bottom-color: var(--k-line); }
#scores .bhead > span { white-space: nowrap; overflow: hidden; }
#scores .c { text-align: center; }
#scores .rank { width: 28px; height: 28px; border-radius: 8px; background: #f2e9e1; color: var(--k-ink2); font-size: 13px; }
#scores .prow.first .rank { background: var(--accent); color: #fff; }
#scores .rank.bic { background: transparent; color: #c46a33; visibility: visible; }
#scores .rank.bic .ico { width: 17px; height: 17px; }
#scores .pn { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
#scores .pn .nm { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--k-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scores .pn > i { display: block; margin-top: 5px; height: 4px; max-width: 250px; border-radius: 2px; background: #f6a271; transition: width 0.4s ease; }
#scores .sc { font-size: 21px; font-weight: 800; color: var(--k-ink); }
#scores .ct { font-size: 14px; font-weight: 500; color: var(--k-ink2); }
#scores .ct.cfix-btn {
    justify-self: center; min-width: 40px; height: 32px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--k-ink2); cursor: pointer; font-variant-numeric: tabular-nums;
    text-decoration: underline dashed #cdbfb4; text-underline-offset: 5px;
}
#scores .ct.cfix-btn:hover, #scores .ct.cfix-btn[aria-expanded=true] { background: #f7f1eb; color: var(--k-ink); }
#scores .ct.dash { color: var(--k-ink3); }
#scores .add input[type=text] {
    width: 100%; height: 36px; border-radius: 10px; border: 1px solid #e8ddd3; background: #f7f1eb; color: var(--k-ink);
    box-shadow: inset 0 1px 2px rgba(42, 35, 32, 0.08); padding: 0 10px; font-size: 14px; font-weight: 700; text-align: center;
}
#scores .add input[type=text]:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240, 123, 63, 0.2); }
#scores .add input::placeholder { color: #a89a90; font-weight: 600; }
#scores .trash {
    justify-self: center; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px;
    background: transparent; color: #cbbfb5; cursor: pointer;
}
#scores .trash .ico { width: 16px; height: 16px; }
#scores .trash:hover { background: #fdeceb; color: #d6463f; }
#scores .lock { justify-self: center; color: #dccfc4; display: grid; }
#scores .lock .ico { width: 15px; height: 15px; }
#scores .cfix-row { margin: 0 0 8px; background: #f7f1eb; }
#scores .cfix-row .muted { color: var(--k-ink2); }
#scores .prow.fixing { background: #fffaf6; }
#scores .bottom-row { margin: 0; padding: 0; border-radius: 0; background: #fbf5ef; border-bottom: 0; }
#scores .bottom-row .nm { color: var(--k-ink2); font-size: 14px; font-weight: 600; }
#scores .bottom-row .sc { color: #c46a33; font-size: 18px; }
/* 🏺 모금함 줄 */
#scores .jar-row { min-height: 56px; margin: 0 0 -6px; padding: 6px 0 12px; border-top: 1px solid #f1e5da; border-bottom: 0; border-radius: 0; background: #fbf5ef; }
#scores .jarL { grid-column: span 2; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; }
#scores .jarL .nm { font-size: 14px; font-weight: 700; color: var(--k-ink); }
#scores .jar-st { font-size: 12px; color: var(--k-ink3); font-weight: 700; }
#scores .jar-row:not(.off) .jar-st { color: #1f9a57; }
#scores .jar-side { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
#scores .jar-fl { font-size: 11.5px; color: var(--k-ink3); }
#scores .fj-seg { display: inline-flex; gap: 0; }
#scores .fj-seg .btn { min-height: 26px; padding: 0 9px; font-size: 12px; border-radius: 0; }
#scores .fj-seg .btn:first-child { border-radius: 8px 0 0 8px; }
#scores .fj-seg .btn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
#scores .fj-seg .btn.pri { background: #2a2320; border-color: #2a2320; color: #fff; }
#scores .jamt { font-size: 15px; font-weight: 800; color: var(--k-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
#scores .jar-row.off .jamt, #scores .jar-row.off .jar-side { opacity: 0.5; }
#scores input[type=checkbox].sw.mini { width: 34px; height: 19px; background: #ddd0c5; }
#scores input[type=checkbox].sw.mini::after { width: 13px; height: 13px; }
#scores input[type=checkbox].sw.mini:checked { background: var(--accent); }
#scores input[type=checkbox].sw.mini:checked::after { left: 18px; }
#scores .board-empty { padding: 14px 8px; }

/* ── ⚙ 기본 설정(접힘) — 명단 고치기 · 목표 · 게이지 보정 ── */
#basic > .roster { margin: 0 10px 10px; padding: 0 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); }
#basic > .roster[open] { padding-bottom: 8px; }
#basic .goal-forms { display: flex; flex-wrap: wrap; gap: 0 14px; }
#basic .goal-forms .goal-form { flex: 1 1 220px; min-width: 0; }
#basic .goal-forms .goal-form label { min-width: 0; }
#basic .goal-stage-link { margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* ── 반 화면(900~1279) ── */
@media (min-width: 900px) and (max-width: 1279px) {
    #stagebar { top: -12px; }
    #stagebar .sgb-cue { max-width: 140px; }
    #stagebar .sgb-next { max-width: 130px; }
    #kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kpi { height: 96px; padding: 10px 12px 9px; }
    .kpi .kv { margin-top: 4px; font-size: 26px; }
    .kpi .kv small { font-size: 12.5px; }
    .kpi .ks { margin-top: 4px; font-size: 11.5px; }
    .kpi .kbar { margin-top: 5px; }
    .kpi .ki { width: 22px; height: 22px; }
    #home > #scores { padding: 2px 10px 6px; }
    #scores .brow { grid-template-columns: 34px minmax(0, 1fr) 52px 52px 96px 28px; column-gap: 6px; }
    #scores .sc { font-size: 18px; }
    #scores .ct.cfix-btn { min-width: 34px; font-size: 13px; padding: 0 4px; }
    #scores .trash { width: 28px; }
    #scores .bhead > span:last-child { font-size: 0; }      /* '지우기' 글자 자리가 없다 — 🗑 만 */
    #scores .bottom-row, #scores .jar-row { --bleed: 10px; }
    #scores .jar-side { margin-left: 0; }
    .settle .st-list li { grid-template-columns: minmax(0, 1fr) auto 92px; }
}

/* ── 📱 폰(900 아래) ── */
@media (max-width: 899px) {
    /* 무대 줄은 판이 진행 중일 때만 위에 붙는다(머리 · 탭 줄 밑) — 아니면 같이 굴러간다 */
    #stagebar { position: relative; top: auto; margin: 0; min-height: 40px; padding: 4px 5px 4px 10px; gap: 5px 8px; border-radius: 11px; }
    #stagebar.has-game { position: sticky; top: calc(var(--hdr-h) + 46px); z-index: 37; }
    #stagebar .sgb-cue { max-width: 110px; }
    #stagebar .sgb-next { max-width: 120px; }
    #stagebar .sgb-edit, #stagebar .sgb-save { padding: 0 7px; }
    /* 카드 4장 = 옆으로 밀기(첫 화면 2장 반) */
    #kpis {
        display: flex; gap: 8px; margin: 0; padding: 2px 0 6px; overflow-x: auto; overscroll-behavior-x: contain;      /* 바깥 여백(-10px)은 가로 넘침이 된다 */
        scroll-snap-type: x proximity; scrollbar-width: none;
    }
    #kpis::-webkit-scrollbar { display: none; }
    .kpi { flex: none; width: 150px; height: 82px; padding: 9px 11px 8px; border-radius: 14px; scroll-snap-align: start; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28); }
    .kpi .kl { font-size: 11.5px; }
    .kpi .ki { display: none; }
    .kpi .kv { margin-top: 3px; font-size: 22px; }
    .kpi .kv small { font-size: 11.5px; }
    .kpi .ks { margin-top: 3px; font-size: 10.5px; gap: 4px; }
    .kpi .kbar { margin-top: 4px; height: 4px; }
    .kpi .kbar + .ks { margin-top: 3px; }
    .settle { margin-top: 0; font-size: 12px; }
    .settle .st-line { gap: 2px 10px; padding: 4px 4px 4px 10px; }
    .settle .st-list li { grid-template-columns: minmax(0, 1fr) auto 88px; gap: 6px; }
    #home > #scores { padding: 2px 10px 4px; border-radius: 16px; }
    #scores .bt .sec-tools { margin-left: 0; }
    #scores .brow { grid-template-columns: 24px minmax(0, 1fr) 36px 36px 84px 28px; column-gap: 5px; min-height: 46px; }
    #scores .bhead { font-size: 10.5px; }
    #scores .bhead > span:last-child { font-size: 0; }
    #scores .rank { width: 24px; height: 24px; border-radius: 7px; font-size: 12px; }
    #scores .pn .nm { font-size: 14px; }
    #scores .pn > i { height: 3px; max-width: 110px; margin-top: 4px; }
    #scores .sc { font-size: 17px; }
    #scores .ct.cfix-btn { min-width: 30px; height: 36px; padding: 0 2px; font-size: 12.5px; }
    #scores .add input[type=text] { height: 36px; padding: 0 4px; font-size: 13.5px; }
    #scores .trash { width: 28px; height: 36px; }
    #scores .bottom-row, #scores .jar-row { --bleed: 10px; }
    #scores .jar-row { margin-bottom: -4px; grid-template-columns: 24px minmax(0, 1fr) 96px; row-gap: 6px; padding-top: 7px; padding-bottom: 11px; }
    #scores .jar-row > .jarL { grid-column: 2; grid-row: 1 / span 2; }
    #scores .jar-row > .jamt { grid-column: 3; grid-row: 1; text-align: right; }
    #scores .jar-row > .add { grid-column: 3; grid-row: 2; }
    #scores .jar-row > :last-child:empty { display: none; }
    #scores .jar-row > .rank { grid-row: 1; }
    #scores .jar-side { margin-left: 0; flex-basis: 100%; }
    #basic > .roster { margin: 0 8px 8px; }
}