/* ROBERIN The New — 베이즈 정리 계산기 (bayes-calculator) 20260902d
 *
 * 팔레트는 추가 필수 확인 #16 의 warm paper 고정값이다. 도구 종류로 색을 바꾸지 않는다.
 * 숫자 family/weight 는 assets/css/roberin-the-new-numerals-*.css 가 소유한다.
 * 이 파일은 숫자 폰트를 선언하지 않고 공유 규칙이 매칭되도록 클래스 이름을 맞춘다
 * (`-main > strong`, `-metrics dd`, `-card > -value`, `input[inputmode=decimal]`).
 *
 * reset 주의 (추가 필수 확인 #3): p 에 padding:0 을 주지 않는다.
 * status·hint·caption 이 padding 을 가진 컴포넌트이기 때문이다.
 *
 * 세로 축 (추가 필수 확인 #22): `.tn-bayes-stage` 와 `.tn-bayes-analysis` 는
 * 같은 컨테이너 폭에서 동일한 `repeat(2, minmax(0,1fr))` + gap 8px 를 쓴다.
 * pane 안의 인접 grid 는 전부 desktop `repeat(4, minmax(0,1fr))` + gap 8px 다.
 */

.tn-bayes-page{--bay-paper:#faf6ee;--bay-ink:#1a1208;--bay-muted:#5a4a30;--bay-line:#b8a888;--bay-soft:#ddd4be;--bay-surface:#fffaf0;--bay-wash:#f5efdf;--bay-accent:#c44a00;--bay-good:#2f7d54;--bay-primary:#1a1208;--bay-primary-text:#faf6ee;--bay-secondary:#ede6d4;--bay-seg-tp:#8a6a3a;--bay-seg-fp:#c9762f;--bay-seg-fn:#a89a7c;--bay-seg-tn:#ddd4be;max-width:1180px;margin:0 auto;color:var(--bay-ink)}

.tn-bayes-tool,.tn-bayes-tool *{box-sizing:border-box}
.tn-bayes-tool{display:grid;gap:8px;padding:18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;border:1px solid var(--bay-line);background:var(--bay-paper);color:var(--bay-ink)}
/* 테마의 `.cs-main-content .entry-content ul:not(...)` 는 특이도 0,3,1 로 square 마커와
 * padding-left 32px 를 주입한다. 특이도 싸움 대신 스코프된 `!important` 로 고정한다
 * (Common Skeleton Gate kill list #1). */
.tn-bayes-page .tn-bayes-tool :is(ul,ol,li,dl,dd,dt){margin:0!important;padding:0!important;list-style:none!important;list-style-type:none!important}
.tn-bayes-page .tn-bayes-tool :is(ul,ol,li)::marker{content:none}
/* 위 리셋이 li 컴포넌트의 padding 까지 지우면 글이 테두리에 붙는다 (추가 필수 확인 #3). */
.tn-bayes-page .tn-bayes-tool .tn-bayes-cell-card{padding:8px 9px!important}
.tn-bayes-page .tn-bayes-tool .tn-bayes-compare-card{padding:8px 10px!important}
.tn-bayes-tool p{margin:0}
.tn-bayes-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-bayes-pane-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--bay-muted)}

/* ── 작업면 축 ─────────────────────────────────────────────── */
.tn-bayes-stage,.tn-bayes-analysis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:8px}
.tn-bayes-pane{display:grid;align-content:start;gap:10px;min-width:0;padding:14px;border:1px solid var(--bay-soft);background:var(--bay-surface)}
/* 같은 행의 두 pane 은 stretch 로 바닥을 맞춘다. 그러면 짧은 pane 아래에 유휴 공간이
 * 생기므로 각 pane 에 흡수 행(1fr)을 하나 지정해 command row 아래 idle fill 을 0 으로 만든다
 * (우려 #28/#42, baseline cell 11). 모바일 1열에서는 free space 가 없어 자연히 content-fit 이다. */
.tn-bayes-pane--input{grid-template-rows:auto auto auto 1fr auto}
.tn-bayes-pane--result{grid-template-rows:auto auto 1fr auto auto}
.tn-bayes-pane--freq{grid-template-rows:auto auto auto 1fr}
.tn-bayes-pane--compare{grid-template-rows:auto auto 1fr}

/* ── 공통 4트랙 grid ───────────────────────────────────────── */
.tn-bayes-chips,.tn-bayes-fields,.tn-bayes-actions,.tn-bayes-metrics,.tn-bayes-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tn-bayes-cells{align-content:stretch;grid-auto-rows:minmax(0,1fr)}
.tn-bayes-compare{align-content:stretch;grid-auto-rows:minmax(0,1fr)}

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

/* 입력 field — label 은 control 밖, rendered gap 5px (추가 필수 확인 #4).
 * label 은 2줄을 예약해 같은 행 control top 이 어긋나지 않게 한다 (#2/#17). */
.tn-bayes-field{display:grid;align-content:start;gap:5px;min-width:0;grid-column:span 2;border:0;background:none;padding:0}
.tn-bayes-field>label{display:block;min-height:30px;padding:0;font-size:11px;font-weight:400;line-height:1.35;color:var(--bay-muted)}
.tn-bayes-page .tn-bayes-tool .tn-bayes-control{display:flex!important;align-items:center!important;min-width:0;min-height:36px;border:1px solid var(--bay-soft);background:var(--bay-wash)}
.tn-bayes-control input{flex:1 1 auto;width:auto;min-width:0;height:34px;padding:0 10px;border:0;background:none;color:var(--bay-ink);font-family:inherit;font-size:14px;line-height:34px;outline:0}
.tn-bayes-control b{flex:0 0 auto;display:grid;place-items:center;align-self:stretch;padding:0 9px;border-left:1px solid var(--bay-soft);border-bottom:0;border-right:0;background:var(--bay-surface);font-size:11px;font-weight:800;line-height:1;color:var(--bay-muted);white-space:nowrap}
.tn-bayes-control:has(input:focus-visible),.tn-bayes-control:has(select:focus-visible){outline:2px solid var(--bay-accent);outline-offset:-1px}
/* native select 는 접근성을 유지하되 보이는 chevron 과 pointer 상태를 준다 (우려 #33) */
.tn-bayes-control--select select{flex:1 1 auto;width:auto;min-width:0;height:34px;padding:0 4px 0 10px;border:0;border-radius:0;background:none;color:var(--bay-ink);font-family:inherit;font-size:14px;font-weight:600;line-height:34px;outline:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.tn-bayes-control--select::after{content:"\25BE";flex:0 0 auto;padding:0 10px 0 4px;font-size:11px;line-height:1;color:var(--bay-muted);pointer-events:none}
.tn-bayes-control--select:hover{border-color:var(--bay-accent)}

.tn-bayes-hint{display:grid;align-content:center;padding:8px 10px;border:1px solid var(--bay-soft);background:var(--bay-wash);font-size:11px;font-weight:400;line-height:1.6;color:var(--bay-muted)}

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

/* ── 결과 ─────────────────────────────────────────────────── */
.tn-bayes-main{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;gap:12px;min-width:0}
.tn-bayes-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-bayes-main>strong[data-empty=true]{color:var(--bay-muted)}
.tn-bayes-main__kind{align-self:center;justify-self:start;padding:4px 9px;border:1px solid var(--bay-line);background:var(--bay-wash);font-size:11px;font-weight:800;letter-spacing:.04em;line-height:1.2;color:var(--bay-muted)}

.tn-bayes-status{display:grid;align-content:center;padding:10px 12px;border:1px solid var(--bay-soft);background:var(--bay-wash);font-size:12px;font-weight:400;line-height:1.6;color:var(--bay-muted)}
.tn-bayes-status[data-state=strong]{border-color:var(--bay-good);color:var(--bay-good)}
.tn-bayes-status[data-state=weak]{border-color:var(--bay-accent);color:var(--bay-accent)}
.tn-bayes-status[data-state=error]{border-color:var(--bay-accent);color:var(--bay-accent)}

/* 사전확률 → 사후확률 이동 (추가 필수 확인 #15) — 무입력에서도 프레임을 그린다 (#10) */
.tn-bayes-shift{display:grid;gap:8px}
.tn-bayes-shift-card{display:grid;grid-template-columns:minmax(0,74px) minmax(0,1fr) minmax(0,68px);align-items:center;gap:8px;min-width:0;padding:8px 10px;border:1px solid var(--bay-soft);background:var(--bay-surface)}
.tn-bayes-shift-name{min-width:0;font-size:11px;font-weight:400;line-height:1.35;color:var(--bay-muted);overflow-wrap:anywhere}
.tn-bayes-shift-track{position:relative;display:block;height:10px;border:1px solid var(--bay-soft);background:var(--bay-wash);overflow:hidden}
.tn-bayes-shift-track>i{display:block;width:0;height:100%;background:var(--bay-seg-fn);transition:width .18s linear}
.tn-bayes-shift-card[data-row=posterior] .tn-bayes-shift-track>i{background:var(--bay-seg-tp)}
.tn-bayes-shift-value{justify-self:end;min-width:0;font-size:13px;line-height:1.35;letter-spacing:normal;white-space:nowrap}
.tn-bayes-shift-value[data-empty=true]{color:var(--bay-muted)}

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

/* ── 자연빈도 2×2 ─────────────────────────────────────────── */
.tn-bayes-caption{padding:8px 10px;border:1px solid var(--bay-soft);background:var(--bay-wash);font-size:11px;font-weight:400;line-height:1.6;color:var(--bay-muted)}
.tn-bayes-matrix{display:grid;gap:8px;padding:0;border:0;background:none}
.tn-bayes-matrix__track{position:relative;display:flex;width:100%;height:14px;border:1px solid var(--bay-soft);background:var(--bay-surface);overflow:hidden}
.tn-bayes-matrix__seg{display:block;width:0;height:100%;transition:width .18s linear}
.tn-bayes-matrix__seg[data-seg=tp]{background:var(--bay-seg-tp)}
.tn-bayes-matrix__seg[data-seg=fp]{background:var(--bay-seg-fp)}
.tn-bayes-matrix__seg[data-seg=fn]{background:var(--bay-seg-fn)}
.tn-bayes-matrix__seg[data-seg=tn]{background:var(--bay-seg-tn)}

.tn-bayes-cell-card{grid-column:span 2;display:grid;grid-template-columns:10px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:6px;row-gap:2px;min-width:0;padding:8px 9px;border:1px solid var(--bay-soft);background:var(--bay-surface)}
.tn-bayes-cell-card>i{grid-row:1/3;align-self:center;display:block;width:10px;height:10px;border:1px solid var(--bay-line)}
.tn-bayes-cell-card[data-seg=tp]>i{background:var(--bay-seg-tp)}
.tn-bayes-cell-card[data-seg=fp]>i{background:var(--bay-seg-fp)}
.tn-bayes-cell-card[data-seg=fn]>i{background:var(--bay-seg-fn)}
.tn-bayes-cell-card[data-seg=tn]>i{background:var(--bay-seg-tn)}
.tn-bayes-cell-name{grid-column:2;grid-row:1;display:block;font-size:10px;font-weight:400;line-height:1.3;color:var(--bay-muted)}
.tn-bayes-cell-value{grid-column:2;grid-row:2;display:block;min-width:0;font-size:12px;line-height:1.35;letter-spacing:normal;overflow-wrap:anywhere}
.tn-bayes-cell-value[data-empty=true]{color:var(--bay-muted)}

/* ── 사전확률 비교 ─────────────────────────────────────────── */
.tn-bayes-compare{display:grid;gap:8px}
.tn-bayes-compare-card{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:8px;min-width:0;padding:8px 10px;border:1px solid var(--bay-soft);background:var(--bay-surface)}
.tn-bayes-compare-card[data-current=true]{border-color:var(--bay-accent)}
.tn-bayes-compare-name{grid-column:span 1;min-width:0;font-size:10px;font-weight:400;line-height:1.35;color:var(--bay-muted);overflow-wrap:anywhere}
.tn-bayes-compare-rate{grid-column:span 1;min-width:0;font-size:11px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.tn-bayes-compare-bar{grid-column:span 1;display:block;height:8px;border:1px solid var(--bay-soft);background:var(--bay-wash);overflow:hidden}
.tn-bayes-compare-bar>i{display:block;width:0;height:100%;background:var(--bay-seg-tp);transition:width .18s linear}
.tn-bayes-compare-value{grid-column:span 1;justify-self:end;min-width:0;font-size:13px;line-height:1.35;letter-spacing:normal;white-space:nowrap}
.tn-bayes-compare-value[data-empty=true]{color:var(--bay-muted)}

.tn-bayes-note>.tn-bayes-caption{border:0;background:none;padding:0}

/* ── 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-bayes-page{--bay-paper:#241d12;--bay-ink:#efe6d2;--bay-muted:#c3b492;--bay-line:#6f6047;--bay-soft:#574a37;--bay-surface:#322a1a;--bay-wash:#2c2517;--bay-accent:#e8823f;--bay-good:#66a77f;--bay-primary:#4a3116;--bay-primary-text:#f7ead1;--bay-secondary:#2f2115;--bay-seg-tp:#c79a5c;--bay-seg-fp:#e08a4a;--bay-seg-fn:#8a7a5c;--bay-seg-tn:#574a37}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-bayes-tool :is(button,input,select,textarea){color:var(--bay-ink)!important;-webkit-text-fill-color:var(--bay-ink)!important}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-bayes-tool .tn-bayes-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-bayes-tool .tn-bayes-btn--primary{border-color:var(--bay-accent)}

@media(prefers-color-scheme:dark){
body[data-scheme=auto]:not([data-l=light]) .tn-bayes-page{--bay-paper:#241d12;--bay-ink:#efe6d2;--bay-muted:#c3b492;--bay-line:#6f6047;--bay-soft:#574a37;--bay-surface:#322a1a;--bay-wash:#2c2517;--bay-accent:#e8823f;--bay-good:#66a77f;--bay-primary:#4a3116;--bay-primary-text:#f7ead1;--bay-secondary:#2f2115;--bay-seg-tp:#c79a5c;--bay-seg-fp:#e08a4a;--bay-seg-fn:#8a7a5c;--bay-seg-tn:#574a37}
body[data-scheme=auto]:not([data-l=light]) .tn-bayes-tool :is(button,input,select,textarea){color:var(--bay-ink)!important;-webkit-text-fill-color:var(--bay-ink)!important}
body[data-scheme=auto]:not([data-l=light]) .tn-bayes-tool .tn-bayes-chip[aria-pressed=true],body[data-scheme=auto]:not([data-l=light]) .tn-bayes-tool .tn-bayes-btn--primary{border-color:var(--bay-accent)}
}

@media(prefers-reduced-motion:reduce){.tn-bayes-matrix__seg,.tn-bayes-shift-track>i,.tn-bayes-compare-bar>i{transition:none}}

/* ── mobile ────────────────────────────────────────────────── */
@media(max-width:720px){
.tn-bayes-page{margin-inline:5px}
.tn-bayes-tool{padding:13px}
.tn-bayes-stage,.tn-bayes-analysis{grid-template-columns:minmax(0,1fr)}
.tn-bayes-chips,.tn-bayes-fields,.tn-bayes-actions,.tn-bayes-metrics,.tn-bayes-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
.tn-bayes-field,.tn-bayes-btn,.tn-bayes-metrics>div,.tn-bayes-cell-card{grid-column:span 1}
.tn-bayes-compare-card{grid-template-columns:repeat(2,minmax(0,1fr))}
.tn-bayes-compare-bar{grid-column:span 1;order:3}
.tn-bayes-compare-value{grid-column:span 1;order:4}
.tn-bayes-main>strong{font-size:34px}
}