/* ROBERIN The New — 발표시간 계산기 (presentation-calc-wrapper) 20260901d
 *
 * 팔레트는 추가 필수 확인 #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·caption·compare caption 이 padding 을 가진 컴포넌트이기 때문이다.
 *
 * 세로 축 (추가 필수 확인 #22): 작업면 안의 모든 인접 grid 는
 * desktop `repeat(4, minmax(0,1fr))` + gap 8px, mobile `repeat(2, minmax(0,1fr))` + gap 8px 로 같다.
 */

.tn-pcalc-page{--pc-paper:#faf6ee;--pc-ink:#1a1208;--pc-muted:#5a4a30;--pc-line:#b8a888;--pc-soft:#ddd4be;--pc-surface:#fffaf0;--pc-wash:#f5efdf;--pc-accent:#c44a00;--pc-good:#2f7d54;--pc-primary:#1a1208;--pc-primary-text:#faf6ee;--pc-secondary:#ede6d4;--pc-seg-speech:#8a6a3a;--pc-seg-slides:#b08a4a;--pc-seg-qa:#6f7d5a;--pc-seg-buffer:#c9bda2;max-width:1180px;margin:0 auto;color:var(--pc-ink)}

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

/* ── 작업면 split ─────────────────────────────────────────── */
.tn-pcalc-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:8px;padding:18px}
.tn-pcalc-pane{display:grid;gap:10px;min-width:0;padding:14px;border:1px solid var(--pc-soft);background:var(--pc-surface)}
.tn-pcalc-pane--input{grid-template-rows:auto minmax(0,1fr) auto auto auto auto}
.tn-pcalc-pane--result{align-content:start}

/* ── 원고 입력 ─────────────────────────────────────────────── */
.tn-pcalc-script{display:block;width:100%;min-height:150px;padding:10px 12px;border:1px solid var(--pc-soft);background:var(--pc-wash);color:var(--pc-ink);font-family:inherit;font-size:14px;font-weight:400;line-height:1.65;resize:vertical;outline:0}
.tn-pcalc-script::placeholder{color:var(--pc-muted);opacity:.35;font-weight:400}
.tn-pcalc-script:focus-visible{outline:2px solid var(--pc-accent);outline-offset:-1px}

/* ── 공통 4트랙 grid (stats / chips / fields / metrics / legend) ── */
.tn-pcalc-metrics,.tn-pcalc-chips,.tn-pcalc-fields,.tn-pcalc-legend,.tn-pcalc-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}

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

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

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

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

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

.tn-pcalc-status{padding:10px 12px;border:1px solid var(--pc-soft);background:var(--pc-wash);font-size:12px;font-weight:400;line-height:1.6;color:var(--pc-muted)}
.tn-pcalc-status[data-state=over]{border-color:var(--pc-accent);color:var(--pc-accent)}
.tn-pcalc-status[data-state=fit]{border-color:var(--pc-good);color:var(--pc-good)}

/* 구성 막대 — 무입력에서도 프레임을 그린다 (추가 필수 확인 #10).
 * 카드 padding 을 두면 안쪽 legend grid 의 첫 컬럼 x 가 위쪽 metrics grid 와 어긋난다
 * (추가 필수 확인 #22). 그래서 chart 자체는 투명 컨테이너로 두고 track/legend 가
 * 각자 테두리를 소유한다. */
.tn-pcalc-chart{display:grid;gap:8px;padding:0;border:0;background:none}
.tn-pcalc-chart__track{position:relative;display:flex;width:100%;height:14px;border:1px solid var(--pc-soft);background:var(--pc-surface);overflow:hidden}
.tn-pcalc-chart__seg{display:block;width:0;height:100%;transition:width .18s linear}
.tn-pcalc-chart__seg[data-seg=speech]{background:var(--pc-seg-speech)}
.tn-pcalc-chart__seg[data-seg=slides]{background:var(--pc-seg-slides)}
.tn-pcalc-chart__seg[data-seg=qa]{background:var(--pc-seg-qa)}
.tn-pcalc-chart__seg[data-seg=buffer]{background:var(--pc-seg-buffer)}
.tn-pcalc-chart__limit{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--pc-accent)}
.tn-pcalc-chart__limit[hidden]{display:none}

.tn-pcalc-legend-card{display:grid;grid-template-columns:10px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:6px;row-gap:2px;min-width:0;padding:8px 9px;border:1px solid var(--pc-soft);background:var(--pc-surface)}
.tn-pcalc-legend-card>i{grid-row:1/3;align-self:center;display:block;width:10px;height:10px;border:1px solid var(--pc-line)}
.tn-pcalc-legend-card[data-seg=speech]>i{background:var(--pc-seg-speech)}
.tn-pcalc-legend-card[data-seg=slides]>i{background:var(--pc-seg-slides)}
.tn-pcalc-legend-card[data-seg=qa]>i{background:var(--pc-seg-qa)}
.tn-pcalc-legend-card[data-seg=buffer]>i{background:var(--pc-seg-buffer)}
.tn-pcalc-legend-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-pcalc-legend-value[data-empty=true]{color:var(--pc-muted)}
.tn-pcalc-legend-name{grid-column:2;grid-row:1;display:block;font-size:10px;font-weight:400;line-height:1.3;color:var(--pc-muted)}

/* 속도별 비교 */
.tn-pcalc-compare{display:grid;gap:8px}
.tn-pcalc-compare__caption{padding:8px 10px;border:1px solid var(--pc-soft);background:var(--pc-wash);font-size:11px;font-weight:400;line-height:1.6;color:var(--pc-muted)}
.tn-pcalc-compare__rows{display:grid;gap:8px}
.tn-pcalc-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(--pc-soft);background:var(--pc-surface)}
.tn-pcalc-compare-card[data-current=true]{border-color:var(--pc-accent)}
.tn-pcalc-compare-name{grid-column:span 1;min-width:0;font-size:11px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.tn-pcalc-compare-rate{grid-column:span 1;min-width:0;font-size:11px;font-weight:400;line-height:1.35;color:var(--pc-muted);overflow-wrap:anywhere}
.tn-pcalc-compare-bar{grid-column:span 1;display:block;height:8px;border:1px solid var(--pc-soft);background:var(--pc-wash);overflow:hidden}
.tn-pcalc-compare-bar>i{display:block;width:0;height:100%;background:var(--pc-seg-speech);transition:width .18s linear}
.tn-pcalc-compare-card[data-over=true] .tn-pcalc-compare-bar>i{background:var(--pc-accent)}
.tn-pcalc-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-pcalc-note{padding:0 18px 18px}
.tn-pcalc-caption{font-size:11px;font-weight:400;line-height:1.6;color:var(--pc-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-pcalc-page{--pc-paper:#241d12;--pc-ink:#efe6d2;--pc-muted:#c3b492;--pc-line:#6f6047;--pc-soft:#574a37;--pc-surface:#322a1a;--pc-wash:#2c2517;--pc-accent:#e8823f;--pc-good:#66a77f;--pc-primary:#4a3116;--pc-primary-text:#f7ead1;--pc-secondary:#2f2115;--pc-seg-speech:#c79a5c;--pc-seg-slides:#e0b471;--pc-seg-qa:#8ea272;--pc-seg-buffer:#6b5c42}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-pcalc-tool :is(button,input,select,textarea){color:var(--pc-ink)!important;-webkit-text-fill-color:var(--pc-ink)!important}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-pcalc-tool .tn-pcalc-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-pcalc-tool .tn-pcalc-btn--primary{border-color:var(--pc-accent)}

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

@media(prefers-reduced-motion:reduce){.tn-pcalc-chart__seg,.tn-pcalc-compare-bar>i{transition:none}}

/* ── mobile ────────────────────────────────────────────────── */
@media(max-width:720px){
.tn-pcalc-page{margin-inline:5px}
.tn-pcalc-split{grid-template-columns:minmax(0,1fr);padding:13px}
.tn-pcalc-pane--input{grid-template-rows:auto auto auto auto auto auto}
.tn-pcalc-note{padding:0 13px 13px}
.tn-pcalc-metrics,.tn-pcalc-chips,.tn-pcalc-fields,.tn-pcalc-legend,.tn-pcalc-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.tn-pcalc-field,.tn-pcalc-btn{grid-column:span 1}
.tn-pcalc-compare-card{grid-template-columns:repeat(2,minmax(0,1fr))}
.tn-pcalc-compare-bar{grid-column:span 1;order:3}
.tn-pcalc-compare-value{grid-column:span 1;order:4}
.tn-pcalc-main>strong{font-size:34px}
}