/* ROBERIN The New — BB/9 계산기 (bb9-calculator) 20260901g
 *
 * 팔레트는 추가 필수 확인 #16 의 warm paper 고정값이다. 도구 종류로 색을 바꾸지 않는다.
 * 숫자 family/weight 는 assets/css/roberin-the-new-numerals-*.css 가 소유한다.
 * 이 파일은 숫자 폰트를 선언하지 않고, 공유 규칙이 매칭되도록 클래스 이름을 맞춘다
 * (`-main > strong`, `-metrics dd`, `-card > -value`, `input[type=number]`).
 *
 * reset 주의 (추가 필수 확인 #3): p 에는 padding:0 을 주지 않는다.
 * status·target·caption 이 padding 을 가진 컴포넌트이기 때문이다.
 *
 * desktop 은 입력/즉시 결과와 상세 지표/리그 비교를 각각 2열로 묶는다.
 * 짧은 입력과 카드도 2x2 로 구성해 전폭 4열에 흩어지지 않게 한다.
 */

.tn-bb9-page{--bb9-paper:#faf6ee;--bb9-ink:#1a1208;--bb9-muted:#5a4a30;--bb9-line:#b8a888;--bb9-soft:#ddd4be;--bb9-surface:#fffaf0;--bb9-wash:#f5efdf;--bb9-accent:#c44a00;--bb9-good:#2f7d54;--bb9-primary:#1a1208;--bb9-primary-text:#faf6ee;--bb9-secondary:#ede6d4;--bb9-z1:#5f8f70;--bb9-z2:#8aa878;--bb9-z3:#c9bda2;--bb9-z4:#c99a5c;--bb9-z5:#b8663a;max-width:1180px;margin:0 auto;color:var(--bb9-ink)}

.tn-bb9-tool,.tn-bb9-tool *{box-sizing:border-box}
.tn-bb9-tool{display:grid;gap:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;border:1px solid var(--bb9-line);background:var(--bb9-paper);color:var(--bb9-ink)}
/* 테마의 `.cs-main-content .entry-content ul:not(...)` 는 특이도 0,3,1 로 square 마커와
 * padding-left 32px 를 주입한다. 특이도 싸움 대신 스코프된 `!important` 로 고정한다
 * (Common Skeleton Gate kill list #1). */
.tn-bb9-page .tn-bb9-tool :is(ul,ol,li,dl,dd,dt){margin:0!important;padding:0!important;list-style:none!important;list-style-type:none!important}
.tn-bb9-page .tn-bb9-tool :is(ul,ol,li)::marker{content:none}
/* 위 리셋이 li 컴포넌트의 padding 까지 지우면 글이 테두리에 붙는다 (추가 필수 확인 #3). */
.tn-bb9-page .tn-bb9-tool .tn-bb9-gauge-card{padding:8px 9px!important}
.tn-bb9-page .tn-bb9-tool .tn-bb9-compare-card{padding:8px 10px!important}
.tn-bb9-page .tn-bb9-tool .tn-bb9-baseline{padding:6px 10px!important}
.tn-bb9-tool p{margin:0}
.tn-bb9-tool :is(code,pre,kbd,samp){padding:0;border:0;border-radius:0;background:none;background-color:transparent;color:inherit;-webkit-text-fill-color:inherit;font:inherit}

.tn-bb9-pane-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--bb9-muted)}

/* ── 2열 작업면 ───────────────────────────────────────────── */
.tn-bb9-stage,.tn-bb9-analysis{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch}
.tn-bb9-chips,.tn-bb9-fields,.tn-bb9-actions,.tn-bb9-metrics,.tn-bb9-gauge-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

/* ── 입력 패널 ─────────────────────────────────────────────── */
.tn-bb9-controls{display:grid;align-content:start;gap:10px;padding:18px;border-right:1px solid var(--bb9-line)}

.tn-bb9-chip{display:grid;place-items:center;width:100%;min-height:36px;padding:6px 8px;border:1px solid var(--bb9-line);background:var(--bb9-secondary);color:var(--bb9-ink);font-family:inherit;font-size:12px;font-weight:800;line-height:1.2;text-align:center;outline:0;cursor:pointer}
.tn-bb9-chip[aria-pressed=true]{background:var(--bb9-primary);color:var(--bb9-primary-text);-webkit-text-fill-color:var(--bb9-primary-text);border-color:var(--bb9-primary)}
.tn-bb9-chip:hover{border-color:var(--bb9-accent);outline:0}
.tn-bb9-chip:focus-visible{outline:2px solid var(--bb9-accent);outline-offset:2px}

.tn-bb9-baseline{display:grid;align-content:center;gap:3px;min-width:0;padding:6px 10px;border:1px solid var(--bb9-soft);background:var(--bb9-wash)}
.tn-bb9-baseline dt{font-size:10px;font-weight:400;line-height:1.3;color:var(--bb9-muted)}
.tn-bb9-baseline dd{font-size:13px;line-height:1.25;letter-spacing:normal}

/* 입력 field — label 은 control 밖, rendered gap 5px (추가 필수 확인 #4) */
.tn-bb9-field{display:grid;align-content:start;gap:5px;min-width:0;border:0;background:none;padding:0}
.tn-bb9-field>label{display:block;padding:0;font-size:11px;font-weight:400;line-height:1.35;color:var(--bb9-muted)}
.tn-bb9-page .tn-bb9-tool .tn-bb9-control{display:flex!important;align-items:center!important;min-width:0;min-height:36px;border:1px solid var(--bb9-soft);background:var(--bb9-wash)}
.tn-bb9-control input{flex:1 1 auto;width:auto;min-width:0;height:34px;padding:0 10px;border:0;background:none;color:var(--bb9-ink);font-family:inherit;font-size:14px;line-height:34px;outline:0}
.tn-bb9-control input::-webkit-outer-spin-button,.tn-bb9-control input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tn-bb9-control input[type=number]{-moz-appearance:textfield}
.tn-bb9-control b{flex:0 0 auto;display:grid;place-items:center;align-self:stretch;padding:0 9px;border-left:1px solid var(--bb9-soft);border-bottom:0;border-right:0;background:var(--bb9-surface);font-size:11px;font-weight:800;line-height:1;color:var(--bb9-muted);white-space:nowrap}
.tn-bb9-control:has(input:focus-visible){outline:2px solid var(--bb9-accent);outline-offset:-1px}

.tn-bb9-btn{display:grid;place-items:center;width:100%;min-height:36px;padding:8px 10px;border:1px solid var(--bb9-line);background:var(--bb9-secondary);color:var(--bb9-ink);font-family:inherit;font-size:12px;font-weight:800;line-height:1;text-align:center;outline:0;cursor:pointer}
.tn-bb9-btn--primary{background:var(--bb9-primary);color:var(--bb9-primary-text);-webkit-text-fill-color:var(--bb9-primary-text);border-color:var(--bb9-primary)}
.tn-bb9-btn:hover{border-color:var(--bb9-accent);outline:0}
.tn-bb9-btn:focus-visible{outline:2px solid var(--bb9-accent);outline-offset:2px}
.tn-bb9-btn:disabled{opacity:.55;cursor:default;outline:0}
.tn-bb9-actions--single{grid-template-columns:minmax(0,1fr)}
.tn-bb9-actions--single .tn-bb9-btn{grid-column:auto}

/* ── 즉시 결과 패널 ───────────────────────────────────────── */
.tn-bb9-result{display:grid;align-content:start;gap:10px;padding:18px}

.tn-bb9-main{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;gap:12px;min-width:0}
.tn-bb9-main>strong{display:block;min-width:0;font-size:clamp(30px,5.4vw,48px);font-weight:800;line-height:1.1;letter-spacing:normal;white-space:nowrap}
.tn-bb9-main>strong[data-empty=true]{color:var(--bb9-muted)}
.tn-bb9-main__kind{align-self:center;justify-self:start;padding:4px 9px;border:1px solid var(--bb9-line);background:var(--bb9-wash);font-size:11px;font-weight:800;letter-spacing:.04em;line-height:1.2;color:var(--bb9-muted)}

.tn-bb9-status,.tn-bb9-target{padding:10px 12px;border:1px solid var(--bb9-soft);background:var(--bb9-wash);font-size:12px;font-weight:400;line-height:1.6;color:var(--bb9-muted)}
.tn-bb9-status[data-tone=good]{border-color:var(--bb9-good);color:var(--bb9-good)}
.tn-bb9-status[data-tone=warn]{border-color:var(--bb9-accent);color:var(--bb9-accent)}

/* 스케일 게이지 — 무입력에서도 구간 프레임을 그린다 (추가 필수 확인 #10/#15).
 * 카드 padding 을 두면 안쪽 grid 의 첫 컬럼 x 가 위쪽 metrics grid 와 어긋나므로
 * gauge 자체는 투명 컨테이너로 두고 track/cards 가 각자 테두리를 소유한다 (#22). */
.tn-bb9-gauge{display:grid;gap:8px;padding:0;border:0;background:none}
.tn-bb9-gauge-track{position:relative;display:flex;width:100%;height:16px;border:1px solid var(--bb9-soft);background:var(--bb9-surface);overflow:hidden}
.tn-bb9-gauge-zone{display:block;height:100%}
.tn-bb9-gauge-zone[data-zone="1"]{background:var(--bb9-z1)}
.tn-bb9-gauge-zone[data-zone="2"]{background:var(--bb9-z2)}
.tn-bb9-gauge-zone[data-zone="3"]{background:var(--bb9-z3)}
.tn-bb9-gauge-zone[data-zone="4"]{background:var(--bb9-z4)}
.tn-bb9-gauge-zone[data-zone="5"]{background:var(--bb9-z5)}
.tn-bb9-gauge-avg{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--bb9-ink);transition:left .18s linear}
.tn-bb9-gauge-mark{position:absolute;top:-1px;bottom:-1px;width:4px;margin-left:-2px;border:1px solid var(--bb9-ink);background:var(--bb9-paper);transition:left .18s linear}
.tn-bb9-gauge-mark[hidden]{display:none}

.tn-bb9-gauge-card{display:grid;align-content:start;gap:4px;min-width:0;border:1px solid var(--bb9-soft);background:var(--bb9-surface)}
.tn-bb9-gauge-name{display:block;font-size:10px;font-weight:400;line-height:1.3;color:var(--bb9-muted)}
.tn-bb9-gauge-value{display:block;min-width:0;font-size:13px;line-height:1.35;letter-spacing:normal;overflow-wrap:anywhere}
.tn-bb9-gauge-value[data-empty=true]{color:var(--bb9-muted)}
.tn-bb9-gauge-card[data-role=mine]{border-color:var(--bb9-accent)}

.tn-bb9-metrics>div{display:grid;align-content:start;gap:5px;min-width:0;padding:10px;border:1px solid var(--bb9-soft);background:var(--bb9-wash)}
.tn-bb9-metrics dt{font-size:11px;font-weight:400;line-height:1.35;color:var(--bb9-muted)}
.tn-bb9-metrics dd{min-width:0;font-size:15px;line-height:1.35;letter-spacing:normal;overflow-wrap:anywhere}
.tn-bb9-metrics dd[data-empty=true]{color:var(--bb9-muted)}

/* ── 상세 지표 / 리그별 비교 ──────────────────────────────── */
.tn-bb9-analysis{border-top:1px solid var(--bb9-line)}
.tn-bb9-analysis__metrics{display:grid;align-content:start;gap:10px;padding:18px;border-right:1px solid var(--bb9-line)}
.tn-bb9-compare{display:grid;align-content:start;gap:8px;padding:18px}
.tn-bb9-compare__caption{padding:8px 10px;border:1px solid var(--bb9-soft);background:var(--bb9-wash);font-size:11px;font-weight:400;line-height:1.6;color:var(--bb9-muted)}
.tn-bb9-compare__rows{display:grid;gap:8px}
.tn-bb9-compare-card{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:8px;min-width:0;border:1px solid var(--bb9-soft);background:var(--bb9-surface)}
.tn-bb9-compare-card[data-current=true]{border-color:var(--bb9-accent)}
.tn-bb9-compare-name{min-width:0;font-size:11px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.tn-bb9-compare-avg{min-width:0;font-size:11px;font-weight:400;line-height:1.35;color:var(--bb9-muted);overflow-wrap:anywhere}
.tn-bb9-compare-bar{display:block;height:8px;border:1px solid var(--bb9-soft);background:var(--bb9-wash);overflow:hidden}
.tn-bb9-compare-bar>i{display:block;width:0;height:100%;background:var(--bb9-z3);transition:width .18s linear}
.tn-bb9-compare-card[data-tone=good] .tn-bb9-compare-bar>i{background:var(--bb9-z1)}
.tn-bb9-compare-card[data-tone=warn] .tn-bb9-compare-bar>i{background:var(--bb9-z5)}
.tn-bb9-compare-value{justify-self:end;min-width:0;font-size:12px;line-height:1.35;letter-spacing:normal;white-space:nowrap}

.tn-bb9-note{padding:10px 18px 14px;border-top:1px solid var(--bb9-line)}
.tn-bb9-caption{font-size:11px;font-weight:400;line-height:1.6;color:var(--bb9-muted)}

/* ── dark / inverse / auto-dark ────────────────────────────── */
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-bb9-page{--bb9-paper:#241d12;--bb9-ink:#efe6d2;--bb9-muted:#c3b492;--bb9-line:#6f6047;--bb9-soft:#574a37;--bb9-surface:#322a1a;--bb9-wash:#2c2517;--bb9-accent:#e8823f;--bb9-good:#66a77f;--bb9-primary:#4a3116;--bb9-primary-text:#f7ead1;--bb9-secondary:#2f2115;--bb9-z1:#4d7a5e;--bb9-z2:#6d8b60;--bb9-z3:#6b5c42;--bb9-z4:#a9803f;--bb9-z5:#a85c33}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-bb9-tool :is(button,input,select){color:var(--bb9-ink)!important;-webkit-text-fill-color:var(--bb9-ink)!important}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-bb9-tool .tn-bb9-chip[aria-pressed=true],body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-bb9-tool .tn-bb9-btn--primary{border-color:var(--bb9-accent)}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-bb9-tool .tn-bb9-gauge-mark{background:var(--bb9-paper);border-color:var(--bb9-ink)}

@media(prefers-color-scheme:dark){
body[data-scheme=auto]:not([data-l=light]) .tn-bb9-page{--bb9-paper:#241d12;--bb9-ink:#efe6d2;--bb9-muted:#c3b492;--bb9-line:#6f6047;--bb9-soft:#574a37;--bb9-surface:#322a1a;--bb9-wash:#2c2517;--bb9-accent:#e8823f;--bb9-good:#66a77f;--bb9-primary:#4a3116;--bb9-primary-text:#f7ead1;--bb9-secondary:#2f2115;--bb9-z1:#4d7a5e;--bb9-z2:#6d8b60;--bb9-z3:#6b5c42;--bb9-z4:#a9803f;--bb9-z5:#a85c33}
body[data-scheme=auto]:not([data-l=light]) .tn-bb9-tool :is(button,input,select){color:var(--bb9-ink)!important;-webkit-text-fill-color:var(--bb9-ink)!important}
body[data-scheme=auto]:not([data-l=light]) .tn-bb9-tool .tn-bb9-chip[aria-pressed=true],body[data-scheme=auto]:not([data-l=light]) .tn-bb9-tool .tn-bb9-btn--primary{border-color:var(--bb9-accent)}
body[data-scheme=auto]:not([data-l=light]) .tn-bb9-tool .tn-bb9-gauge-mark{background:var(--bb9-paper);border-color:var(--bb9-ink)}
}

@media(prefers-reduced-motion:reduce){.tn-bb9-gauge-avg,.tn-bb9-gauge-mark,.tn-bb9-compare-bar>i{transition:none}}

/* ── mobile ────────────────────────────────────────────────── */
@media(max-width:720px){
.tn-bb9-page{margin-inline:5px}
.tn-bb9-stage,.tn-bb9-analysis{grid-template-columns:minmax(0,1fr)}
.tn-bb9-controls{padding:13px;border-right:0;border-bottom:1px solid var(--bb9-line)}
.tn-bb9-result,.tn-bb9-analysis__metrics,.tn-bb9-compare{padding:13px}
.tn-bb9-analysis__metrics{border-right:0;border-bottom:1px solid var(--bb9-line)}
.tn-bb9-note{padding:10px 13px 13px}
.tn-bb9-chips,.tn-bb9-fields,.tn-bb9-actions,.tn-bb9-metrics,.tn-bb9-gauge-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.tn-bb9-compare-card{grid-template-columns:repeat(2,minmax(0,1fr))}
.tn-bb9-main>strong{font-size:34px}
}