/* Calculator HOME (calculator-home.js) — .calc-page 루트 아래로 한정한다.
   기존 HOME 카드(학습 HOME · 실습 HOME)와 같은 색·크기 규칙을 쓰되, 다른 화면 CSS에 의존하지 않도록 따로 둔다.
   반응형: 기존 HOME과 같이 800px 이하 1열. */

.calc-page{padding:12px}
.calc-page[hidden],.calc-view[hidden]{display:none}
.calc-hero{background:linear-gradient(180deg,#0c2032,#081522);border:1px solid #173a55;border-radius:10px;padding:16px;margin-bottom:10px}
.calc-hero h2{margin:0 0 6px;font-size:18px}
.calc-hero p{margin:0;color:#9fb5c7;font-size:11px}
.calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.calc-card{display:flex;flex-direction:column;justify-content:flex-start;width:100%;text-align:left;color:inherit;background:linear-gradient(180deg,#0d2033,#091725);border:1px solid #1c4668;border-radius:10px;padding:16px;min-height:155px;transition:.15s}
.calc-card:not(.calc-card-static):hover{transform:translateY(-2px);border-color:#2189d0}
.calc-card-static{max-width:620px;min-height:130px;cursor:default}
.calc-icon{display:block;font-size:28px;margin-bottom:12px}
.calc-card h3{margin:0 0 6px;font-size:16px}
.calc-card p{margin:0;color:#91a9bd;font-size:11px;line-height:1.6}
.calc-tag{align-self:flex-start;display:inline-block;margin-top:12px;border:1px solid #2b5978;border-radius:20px;padding:5px 8px;color:#bfe7ff;font-size:9px}
/* 준비 중 표시: 계산 기능이 없음을 분명히 보이게 (주황 테두리) */
.calc-tag-soon{border-color:#8a6420;color:#ffcf7a}
.calc-back{margin-top:10px;border:1px solid #27506c;background:#0b1d2d;color:#d9e8f3;border-radius:7px;padding:8px 12px;cursor:pointer}
@media(max-width:800px){.calc-grid{grid-template-columns:1fr}}

/* ===== mA 계산기 (ma-calculator.js) — .cma-* =====
   색·테두리는 기존 GFD 다크 UI(HOME 카드 · 실습 패널)와 같은 값을 쓴다.
   계산 기준 칸 = 파란 테두리 + "기준" 표시 · Range 밖 = 주황 (값은 제한하지 않음) */
.cma-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:10px;align-items:start}
.cma-panel{min-width:0;background:linear-gradient(180deg,#0a1d2e,#071522);border:1px solid #1b4260;border-radius:10px;overflow:hidden}
.cma-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px;padding:0 12px;border-bottom:1px solid #183951;color:#9db4c5;font-size:11px;font-weight:800}
.cma-headnote{color:#6f8da5;font-weight:600;font-size:10px}
.cma-range{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
.cma-range .cma-field:nth-child(3){grid-column:1/-1}
.cma-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cma-field>span{display:flex;align-items:center;gap:6px;color:#9fb5c4;font-size:11px;font-weight:700}
.cma-field>span em{font-style:normal;color:#31cfff}
.cma-field input{width:100%;min-width:0;background:#061522;color:#fff;border:1px solid #29506a;border-radius:7px;padding:10px 11px;font:700 18px ui-monospace,Consolas,monospace}
.cma-field input:focus{outline:none;border-color:#31cfff;box-shadow:0 0 0 2px #31cfff33}
.cma-range .cma-field:nth-child(3) input{font:600 14px Inter,Segoe UI,Arial,sans-serif}
.cma-rangeinfo{margin:0 12px 12px;padding:9px 10px;border:1px solid #234a65;border-radius:7px;background:#081a28;color:#bfe7ff;font-size:12px;line-height:1.5;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.cma-reverse{border:1px solid #2b5978;border-radius:20px;padding:2px 8px;color:#ffcf7a;font-size:10px;border-color:#8a6420}
.cma-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px}
.cma-value{border:1px solid #1c4668;border-radius:9px;padding:10px;background:#0a1a29;transition:border-color .15s,box-shadow .15s}
.cma-basis{display:none;margin-left:auto;border:1px solid #2c9cff;border-radius:20px;padding:1px 7px;color:#fff;background:#087fff;font-size:9px}
.cma-value.is-basis{border-color:#2c9cff;box-shadow:0 0 0 1px #2c9cff66 inset;background:#0c2438}
.cma-value.is-basis .cma-basis{display:inline-block}
.cma-value.is-out:not(.is-basis) input{color:#ffcf7a;border-color:#8a6420}
/* 표시 막대: 위 mA 눈금 · 아래 % 눈금 · PV 눈금. 범위 밖이면 끝에 멈추고 방향 표시 */
.cma-bar{padding:4px 16px 12px}
.cma-scale{display:flex;justify-content:space-between;color:#7f9bad;font:600 10px ui-monospace,Consolas,monospace;gap:4px}
.cma-scale span{min-width:0;white-space:nowrap}
.cma-scale-pv{color:#9fc6dd;margin-top:3px}
.cma-track{position:relative;height:16px;margin:5px 0;border:1px solid #2b5978;border-radius:9px;background:#061522}
.cma-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:8px;background:linear-gradient(90deg,#0b6eb4,#31cfff);transition:width .15s}
.cma-marker{position:absolute;top:-5px;width:4px;height:24px;margin-left:-2px;border-radius:2px;background:#fff;box-shadow:0 0 6px #31cfff}
.cma-marker[hidden]{display:none}
.cma-edge{margin-top:5px;color:#ffcf7a;font-size:11px;font-weight:800}
.cma-edge:empty{display:none}
.cma-edge.is-left{text-align:left}.cma-edge.is-right{text-align:right}
.cma-bar.is-out .cma-fill{background:linear-gradient(90deg,#8a6420,#ffb342)}
.cma-bar.is-out .cma-marker{background:#ffb342;box-shadow:0 0 6px #ffb342}
.cma-result{margin:0 12px 10px;min-height:44px;padding:11px 12px;border:1px solid #27b879;border-radius:8px;background:#071d18;color:#58e5a1;font:800 16px ui-monospace,Consolas,monospace;overflow-wrap:anywhere}
.cma-result:empty{display:none}
.cma-result.is-out{border-color:#c3942f;background:#1d1608;color:#ffcf7a}
.cma-msg{margin:0 12px 12px;padding:9px 11px;border-radius:7px;font-size:12px;line-height:1.5}
.cma-msg:empty{display:none}
.cma-msg.is-info{border:1px solid #24475f;background:#071624;color:#94aebe}
.cma-msg.is-warn{border:1px solid #c3942f;background:#1d1608;color:#ffcf7a}
.cma-msg.is-error{border:1px solid #ad4855;background:#1d0b10;color:#ff8d98}
.cma-note{margin-top:10px;border-left:3px solid #2e8fc8;background:#0a1b29;padding:9px 11px;color:#91acbc;font-size:11px;line-height:1.6;overflow-wrap:anywhere}
@media(max-width:900px){.cma-layout{grid-template-columns:1fr}}
@media(max-width:650px){
 .cma-values{grid-template-columns:1fr}
 .cma-field input{font-size:16px}   /* 모바일 확대 방지(16px 이상) */
 .cma-headnote{display:none}
 .cma-bar{padding:4px 10px 12px}
 .cma-scale{font-size:9px}
 .cma-result{font-size:14px}
}

/* ===== 계산기 공통: 하위 모드 선택 헤더 (.calc-modehead · .calc-tabs · .calc-tab) =====
   실습모드 PT/PDT 화면 머리(practice/pt-practice.css .ptpTop · .practiceInstrumentTabs · .practiceInstrumentTab)와 같은 값.
   왼쪽 계산기 제목 · 오른쪽 하위 모드 버튼. 2단계는 .calc-modehead-sub 보조 행(상위 모드 선택 시에만 표시).
   하위 모드가 없는 계산기는 이 헤더를 쓰지 않는다. */
.calc-modehead{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.calc-modehead[hidden]{display:none}
.calc-modehead h2{margin:0;font-size:18px}
.calc-modehead h3{margin:0;font-size:12px;font-weight:800;color:#9fb5c4}
.calc-modedesc{margin-left:6px;color:#6f8da5;font-size:11px;font-weight:600}
.calc-modehead-sub{margin-top:-2px}
.calc-tabs{display:flex;gap:5px;margin-left:auto}
.calc-tab{min-width:72px;border:1px solid #2b5a79;border-radius:7px;background:#091b2a;color:#8fa9bb;padding:8px 16px;font-weight:900;cursor:pointer;white-space:nowrap}
.calc-tab:hover{border-color:#31cfff;color:#fff}
.calc-tab.is-active{background:#0b6eb4;border-color:#39b5ff;color:#fff;box-shadow:0 0 14px #168cff33}
.calc-modehead-sub .calc-tab{padding:6px 14px;font-size:12px}
.calc-modenote{margin:0 0 10px;color:#9fb5c7;font-size:11px;line-height:1.55}
/* 2단계 선택을 한 줄로: [1차 그룹] › [2차 그룹]. 각 그룹은 줄바꿈하지 않고 그룹 단위로만 다음 줄로 넘어간다
   구분자(›)는 2차 그룹 안에 두어 2차 그룹과 함께 표시 · 숨김 · 줄바꿈된다 (LT: Open/Closed › Dry/Wet) */
.calc-tabbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:5px 8px;margin-left:auto}
.calc-tabbar .calc-tabs{margin-left:0}
.calc-tabsub{display:flex;align-items:center;gap:8px}
.calc-tabsub[hidden]{display:none}
.calc-tabsep{color:#5f87a3;font-size:20px;font-weight:900;line-height:1}
/* 모바일: 그룹을 헤더의 직접 항목으로 풀어(display:contents) 제목 옆에 1차 그룹, 공간이 모자라면 › 2차 그룹만 다음 줄 오른쪽 */
@media(max-width:700px){
 .calc-tabbar{display:contents}
 .calc-tabbar>.calc-tabs,.calc-tabsub{margin-left:auto}
}
/* 모바일: 실습모드처럼 줄바꿈(flex-wrap). 제목 옆에 들어가면 같은 행 오른쪽, 모자라면 다음 행 오른쪽 정렬
   → 계산 화면이 불필요하게 밀리지 않게 한다. 터치 높이 40px 이상 */
@media(max-width:700px){
 .calc-modehead{flex-wrap:wrap;gap:6px 10px}
 .calc-tab{min-height:40px;padding:8px 12px}
 .calc-modehead-sub .calc-tab{padding:6px 12px}
}

/* ===== FT 계산기 (ft-calculator.js) — .csq-* (입력칸 · 패널은 mA 계산기의 .cma-* 공통 모양을 같이 쓴다) =====
   TX / DCS 선택은 공통 헤더(.calc-tab). 현재 √ 적용 위치(TX 또는 DCS)는 신호 흐름에서 주황 테두리 + "√ 적용" 표시 */
.csq-caution{margin-bottom:10px;padding:9px 11px;border:1px solid #c3942f;border-radius:8px;background:#1d1608;color:#ffcf7a;font-size:12px;line-height:1.5}
.csq-caution b{color:#ffb342}
.csq-lrvnote{margin:0 12px 12px;padding:9px 10px;border:1px solid #8a6420;border-radius:7px;background:#1d1608;color:#ffcf7a;font-size:11px;line-height:1.5}
.csq-lrvnote[hidden]{display:none}
.csq-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
.csq-values .cma-field>span{flex-wrap:wrap}
.csq-mamean{font-style:normal;border:1px solid #2b5978;border-radius:20px;padding:0 6px;color:#bfe7ff;font-size:9px;font-weight:700}
/* 신호 흐름: TX → 4–20 mA → DCS → 최종 Flow */
.csq-flow{display:flex;align-items:stretch;gap:6px;padding:4px 12px 12px}
.csq-node{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 6px;border:1px solid #1c4668;border-radius:9px;background:#0a1a29;text-align:center}
.csq-node small{color:#7f9bad;font-size:10px}
.csq-node>b{font-size:15px;color:#dcecf5}
.csq-node em{font-style:normal;color:#9fc6dd;font:700 11px ui-monospace,Consolas,monospace;min-height:14px}
.csq-sqrt{visibility:hidden;border:1px solid #c3942f;border-radius:20px;padding:0 7px;color:#1d1608;background:#ffb342;font-size:10px;font-weight:800}
.csq-node.is-sqrt{border-color:#ffb342;box-shadow:0 0 0 1px #ffb34266 inset;background:#1d1608}
.csq-node.is-sqrt .csq-sqrt{visibility:visible}
.csq-link{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:54px;color:#31cfff}
.csq-link small{color:#31cfff;font-size:9px}
.csq-link b{font:800 12px ui-monospace,Consolas,monospace;white-space:nowrap}
.csq-link i{display:block;width:100%;height:0;border-top:3px dashed #31cfff;position:relative}
.csq-link i::after{content:'';position:absolute;right:-2px;top:-7px;border:5px solid transparent;border-left:7px solid #31cfff}
.csq-link-final{min-width:24px}
.csq-final{border-color:#27b879;background:#071d18}
.csq-final>b{color:#58e5a1;font:800 15px ui-monospace,Consolas,monospace}
.csq-flow.is-out .csq-final{border-color:#c3942f;background:#1d1608}
.csq-flow.is-out .csq-final>b{color:#ffcf7a}
@media(max-width:650px){
 .csq-values{gap:8px;padding:10px}
 /* 신호 흐름은 세로로: TX ↓ mA ↓ DCS ↓ 최종 */
 .csq-flow{flex-direction:column;gap:4px}
 .csq-node{flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:8px 10px;text-align:left}
 .csq-link{flex-direction:row;min-width:0;gap:8px;padding:2px 0}
 .csq-link i{width:0;height:14px;border-top:0;border-left:3px dashed #31cfff}
 .csq-link i::after{right:auto;left:-7px;top:auto;bottom:-6px;border:5px solid transparent;border-top:7px solid #31cfff}
 .csq-link-final{display:none}
}

/* ===== LT 계산기 Open Tank (lt-calculator.js) — .clt-* (패널 · 입력칸 · 메시지는 .cma-* 공통 모양) =====
   PC: 그림 | 입력 · 결과 나란히 · 900px 이하: 그림 위, 입력 · 결과 아래
   입력칸을 선택하면 해당 치수선(H · L · E)과 위치를 주황으로 강조 */
.clt-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}
.clt-side{display:grid;gap:10px;min-width:0}
.clt-svg{display:block;width:100%;max-height:520px;margin:0 auto;font-family:Inter,Segoe UI,Arial,sans-serif}
.clt-svg.is-stale{opacity:.35}
.clt-svg.no-level .clt-liquid,.clt-svg.no-level .clt-surface,.clt-svg.no-level .clt-dim-l,.clt-svg.no-level .clt-extl,.clt-svg.no-level .clt-levelpct{display:none}
/* 실제 액면 L 수평 점선(탱크 벽 → 왼쪽 L 치수 화살촉): 액면선 색 · 잔 점선 (100% · 유효 0% 초록 점선과 구분) */
.clt-ext.clt-extl{stroke:#6fd0ff;stroke-dasharray:2 3}
.clt-svg[data-focus="l"] .clt-extl{stroke:#ffb342}
.clt-shell{fill:none;stroke:#9db4c2;stroke-width:4;stroke-linejoin:round}
.clt-liquid{fill:#1b6fb0;opacity:.72}
.clt-surface{stroke:#6fd0ff;stroke-width:2.5}
.clt-levelpct{fill:#e6f6ff;font-size:10.5px;font-weight:800;paint-order:stroke;stroke:#0b1d2c;stroke-width:2.5px;stroke-linejoin:round}
.clt-levelpct.is-out{fill:#ffb342}
.clt-open{fill:#7f9bad;font-size:11px}
.clt-ext{stroke:#4f7390;stroke-width:1;stroke-dasharray:4 4}
.clt-ext100{stroke:#58e5a1}
.clt-reflabel{fill:#9fc6dd;font-size:10.5px;font-weight:700}
.clt-nozzle{stroke:#9db4c2;stroke-width:9;fill:none}
.clt-lt rect{fill:#173247;stroke:#7897a9;stroke-width:3}
.clt-lt text{fill:#e7f5fd;font-size:12px;font-weight:800}
.clt-ltlabel{fill:#9fc6dd;font-size:10px}
.clt-dim line{stroke:#9fc6dd;stroke-width:1.6}
.clt-dim text{fill:#dcecf5;font:700 12px ui-monospace,Consolas,monospace}
.clt-svg marker path{fill:#9fc6dd}
.clt-svg[data-focus="h"] .clt-arrow-h path,.clt-svg[data-focus="l"] .clt-arrow-l path,.clt-svg[data-focus="e"] .clt-arrow-e path{fill:#ffb342}
/* 입력칸 선택 → 강조 */
.clt-svg[data-focus="h"] .clt-dim-h line,.clt-svg[data-focus="l"] .clt-dim-l line,.clt-svg[data-focus="e"] .clt-dim-e line{stroke:#ffb342;stroke-width:3}
.clt-svg[data-focus="h"] .clt-dim-h text,.clt-svg[data-focus="l"] .clt-dim-l text,.clt-svg[data-focus="e"] .clt-dim-e text{fill:#ffcf7a}
.clt-svg[data-focus="h"] .clt-ext100,.clt-svg[data-focus="h"] .clt-ext[data-clt="ext0"]{stroke:#ffb342;stroke-dasharray:none}
.clt-svg[data-focus="l"] .clt-surface{stroke:#ffb342;stroke-width:4}
.clt-svg[data-focus="e"] .clt-lt rect{stroke:#ffb342}
.clt-svg[data-focus="e"] .clt-extlt,.clt-svg[data-focus="e"] .clt-ext[data-clt="ext0"]{stroke:#ffb342;stroke-dasharray:none}
.clt-svg[data-focus="sg"] .clt-liquid{fill:#ffb342;opacity:.55}
.clt-caption{margin:0 12px 12px;color:#7f9bad;font-size:11px;line-height:1.5}
/* E < 0 (LT 센싱 중심이 하부 탭보다 위): 데드존 빗금 · 유효 0% 기준선(100%선과 같은 초록) · Heff 치수 — 그 밖에는 숨김 */
.clt-svg:not(.has-dead) .clt-dz{display:none}
.clt-dead-hatch{stroke:#9fb5c7;stroke-width:1.4;opacity:.45}
.clt-deadlabel{fill:#c9d6df;font-size:10px;font-weight:800}
.clt-ext.clt-ext0eff{stroke:#58e5a1}
.clt-eff0label{fill:#58e5a1}
/* 그림 범위 밖 안내 (L이 그림 위 · 아래를 벗어날 때, 세 모드 공통 · SVG 아래 줄) */
.clt-edge-note{margin:0 12px 8px;color:#ffcf7a;font-size:11px;font-weight:800;line-height:1.5}
.clt-edge-note[hidden]{display:none}
.clt-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 12px 4px}
.clt-inputs .cma-field small{color:#6f8da5;font-size:10px}
.cma-field.is-focus>span,.clt-slider.is-focus>span{color:#ffcf7a}
.clt-slider{display:flex;flex-direction:column;gap:6px;padding:8px 12px 12px}
.clt-slider>span{display:flex;justify-content:space-between;color:#9fb5c4;font-size:11px;font-weight:700}
.clt-slider b{color:#31cfff;font:800 12px ui-monospace,Consolas,monospace}
.clt-slider input{width:100%;accent-color:#11a7ff}
.clt-results{display:grid;gap:6px;padding:12px}
.clt-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 10px;border:1px solid #1c4668;border-radius:8px;background:#0a1a29;min-width:0}
.clt-row>span{color:#9fb5c4;font-size:11px;font-weight:700;min-width:0}
.clt-row>b{color:#e7f5fd;font:800 15px ui-monospace,Consolas,monospace;text-align:right;overflow-wrap:anywhere;min-width:0}
.clt-row>b small{display:block;color:#7fb2d0;font-size:11px;font-weight:700}
.clt-row.clt-ma{border-color:#27b879;background:#071d18}.clt-row.clt-ma>b{color:#58e5a1}
.clt-row.is-out{border-color:#c3942f;background:#1d1608}.clt-row.is-out>b{color:#ffcf7a}
.clt-row.clt-applied>b{font-size:12px;color:#bfe7ff}
.clt-row.clt-check>b{font-size:11px;color:#58e5a1}
.clt-warns{display:grid;gap:6px;padding:0 12px 12px}
.clt-warns:empty{display:none}
.clt-warn{padding:9px 11px;border:1px solid #c3942f;border-radius:7px;background:#1d1608;color:#ffcf7a;font-size:12px;line-height:1.5}
.clt-assume b{color:#bfe7ff}
@media(max-width:900px){.clt-layout{grid-template-columns:1fr}.clt-svg{max-height:440px}}
@media(max-width:650px){
 .clt-inputs{gap:8px;padding:10px 10px 4px}
 .clt-row{flex-direction:column;align-items:stretch;gap:3px}
 .clt-row>b{text-align:left;font-size:14px}
}
/* LT 결과 영역: 현장 적용 조건 경고(빨강, 범위 초과 주황 경고와 구분) */
.clt-warn.is-critical{border-color:#ad4855;background:#1d0b10;color:#ff9aa4;font-weight:700}
.clt-inputs .cma-field small.clt-emean{color:#ffcf7a;font-weight:700}
/* LT 그림: Root Valve (탱크 오른쪽, 하부 탭과 같은 높이) */
.clt-valve path{fill:#173247;stroke:#9db4c2;stroke-width:2;stroke-linejoin:round}
.clt-valve line{stroke:#9db4c2;stroke-width:2}
.clt-valve text{fill:#9fc6dd;font-size:9.5px;font-weight:700}
/* LT 임펄스 튜빙 (Open · Dry · Wet 공통): HP · LP 외벽은 같은 색 · 굵기(.clt-tube-wall, 굵기는 lt-calculator.js TUBE)
   내부 상태만 구분: 공정액 = .clt-tube-liquid(청록) · Wet Leg 충전액 = .clt-tube-wet(보라) · 기상관(Dry LP · Wet 기상 구간) = 마스크로 비워 그림 배경
   노란색 · 주황색 계열은 입력 선택 강조(data-focus)와 범위 초과 안내에만 쓴다 */
.clt-tube-wall{fill:none;stroke:#d4eef9;stroke-linejoin:round}
.clt-tube-liquid{fill:none;stroke:#6fd0ff;stroke-linejoin:round}
.clt-gaslabel{fill:#8fa3b3;font-size:10.5px;font-style:italic}
.clt-lt-dp text{font-size:10px}
.clt-port{font-size:9.5px;font-weight:900}
.clt-port-hp{fill:#6fd0ff}
.clt-port-lp{fill:#c3b6ff}
.clt-valve-hp text{fill:#6fd0ff}
.clt-valve-lp text{fill:#c3b6ff}
/* LT Wet Leg + Condensate Pot: Wet Leg 충전액(보라, HP 공정액 청록과 구분) · Pot(탱크와 같은 외벽색) · 유지 액면 · 보조 결과
   T 치수 · T 기준선은 다른 치수와 같은 기본색 (선택 시에만 강조색) */
.clt-tube-wet{stroke:#9d8cff}
.clt-pot-shell{fill:none;stroke:#9db4c2;stroke-width:3;stroke-linejoin:round}
.clt-pot-liquid{fill:#9d8cff;opacity:.8}
.clt-pot-level{stroke:#e2dcff;stroke-width:2}
.clt-pot-label{fill:#9fc6dd;font-size:10px;font-weight:800}
.clt-svg[data-focus="t"] .clt-arrow-t path{fill:#ffb342}
.clt-svg[data-focus="t"] .clt-dim-t line{stroke:#ffb342;stroke-width:3}
.clt-svg[data-focus="t"] .clt-dim-t text{fill:#ffcf7a}
.clt-svg[data-focus="t"] .clt-extt,.clt-svg[data-focus="t"] .clt-pot-level{stroke:#ffb342;stroke-dasharray:none}
.clt-svg[data-focus="sgw"] .clt-tube-wet{stroke:#ffb342}
.clt-svg[data-focus="sgw"] .clt-pot-liquid{fill:#ffb342}
.clt-row.clt-aux{padding:6px 10px;background:#081624}.clt-row.clt-aux>b{font-size:13px;color:#bfe7ff}
/* 숫자 입력 확정 (calculator/input-commit.js): 입력칸 + ✓ 확정 버튼 · 미확정(is-editing, 주황) · 확정 거부(is-invalid, 빨강) */
.calc-commit,.cma-field>span.calc-commit{display:flex;align-items:stretch;flex-wrap:nowrap;gap:5px;min-width:0}   /* .cma-field>span(라벨 줄) 규칙이 감싸개에 적용되지 않게 */
.calc-commit>input{flex:1 1 0;min-width:0}
.calc-commit-btn{flex:0 0 34px;min-height:34px;padding:0;border:1px solid #29506a;border-radius:7px;background:#0b2233;color:#6f8da5;font-size:15px;font-weight:900;line-height:1;cursor:pointer}
.calc-commit-btn:hover{border-color:#31cfff;color:#bfe7ff}
.cma-field .calc-commit.is-editing>input{border-color:#ffb342;box-shadow:0 0 0 2px #ffb34233}
.cma-field .calc-commit.is-editing>.calc-commit-btn{border-color:#ffb342;background:#3a2a0c;color:#ffcf7a}
.cma-field .calc-commit.is-invalid>input{border-color:#ff6b7a;box-shadow:0 0 0 2px #ff6b7a33}
.cma-field .calc-commit.is-invalid>.calc-commit-btn{border-color:#ff6b7a;background:#2a0d12;color:#ff9aa4}
.clt-inputs .cma-field small.clt-allow{color:#ff9aa4;font-size:11.5px;font-weight:700;overflow-wrap:anywhere}
.clt-inputs .cma-field small.clt-allow[hidden]{display:none}