/* 기압 파스칼 변환기 전용 CSS (2026-10-20). 답 띠 → [압력 칸 12개(2열) + 유효숫자·바로 넣기 | 대기·바다 단면 그림].
   넓은 작업면(720px 이상)은 칸과 그림을 나란히(그림 높이 = 칸 묶음 높이), 좁으면 칸 → 그림 순으로 쌓는다.
   움직임(R45): 단면 표식이 그 압력의 고도·수심으로 미끄러짐(transform 500ms, ease-smooth-out). 동작 줄이기면 바로. 폭 판단은 작업면 컨테이너 ap. 공용 부품 assets/v2.css */
.ap-work{container:ap / inline-size}
.ap-work .v2-status:empty{display:none}
.ap-hint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}

/* 답 띠 */
.ap-ans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:end;gap:10px 24px;padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.ap-ansl{min-width:0;container:apans / inline-size}
.ap-ansl > .v2-label{display:block;margin-bottom:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ap-ans .v2-big{flex-wrap:wrap;transition:opacity var(--ease)}
.ap-ans .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(22px, calc(100cqi / (var(--ap-len, 7) * .62)), 1em)}
.ap-ans .v2-big .ap-eq{font-style:normal;font-weight:700;font-size:.62em;color:var(--muted);align-self:center}
.ap-ans .v2-big.is-empty span{font-size:16px;font-weight:600;line-height:1.4;color:var(--muted);white-space:normal}
.ap-ans .v2-sub{transition:opacity var(--ease)}
.ap-ans.is-pend .v2-big,.ap-ans.is-pend .v2-sub{opacity:.45}
.ap-ansr{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0;max-width:390px}
.ap-ansr .v2-formula{margin:0;text-align:right;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.ap-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}

/* 본체: 칸 | 그림 */
.ap-main{display:grid;grid-template-columns:minmax(0,1fr)}
.ap-left{min-width:0;padding:14px 18px 14px}
.ap-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.ap-cell > label{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.ap-cl{min-width:0;overflow-wrap:anywhere}
.ap-ap{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;font-style:normal;font-weight:700;color:var(--muted)}
.ap-cell .v2-input input{font-size:16px;font-weight:700;padding:0 8px}
.ap-cell.is-src .v2-input{border-color:var(--ink)}
.ap-cell .v2-input b{min-width:0;padding:0 7px;white-space:nowrap}
.ap-opts{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:8px 14px;margin-top:14px} /* 설정표: 라벨 | 컨트롤 한 줄씩(칩은 자기 칸 안에서 줄바꿈) */
.ap-ctl{display:contents}
.ap-ctl > .v2-label{padding-top:8px;line-height:1.2}

/* 대기·바다 단면 */
.ap-col{display:flex;flex-direction:column;min-width:0;margin:0;padding:14px 18px 14px;border-top:1px solid var(--soft)}
.ap-colhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin:0 0 8px}
.ap-coltitle{display:flex;flex-direction:column;gap:1px;min-width:0}
.ap-svgbox{position:relative;flex:1 1 auto;height:340px;min-height:300px}
.ap-svgbox svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.ap-where{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.ap-where:empty{display:none}
.ap-col .sk0{stop-color:color-mix(in srgb, var(--ink) 2%, var(--card))}
.ap-col .sk1{stop-color:color-mix(in srgb, var(--ink) 9%, var(--card))}
.ap-col .se0{stop-color:color-mix(in srgb, var(--ink) 14%, var(--card))}
.ap-col .se1{stop-color:color-mix(in srgb, var(--ink) 30%, var(--card))}
.ap-col .mt{fill:color-mix(in srgb, var(--ink) 7%, transparent)}
.ap-col .mt2{fill:color-mix(in srgb, var(--ink) 11%, transparent)}
.ap-col .gl{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3;opacity:.7}
.ap-col .surf{stroke:var(--muted);stroke-width:1.4}
.ap-col .lt{stroke:var(--muted);stroke-width:1.4}
.ap-col text{font-family:var(--sans);font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.ap-col .lm{fill:var(--ink);font-weight:600}
.ap-col .pv{font-size:10.5px}
.ap-col .mk{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.ap-col .mk.is-still{transition:none}
.ap-col .mk line{stroke:var(--accent);stroke-width:1.6}
.ap-col .mk circle{fill:var(--accent)}
.ap-col .mk rect{fill:var(--accent)}
.ap-col .mk text{fill:var(--paper);font-weight:700}
@media (prefers-reduced-motion:reduce){.ap-col .mk{transition:none}}

@container ap (min-width:720px){
  .ap-main{grid-template-columns:minmax(0,1fr) minmax(230px,38%)}
  .ap-col{border-top:0;border-left:1px solid var(--soft)}
  .ap-svgbox{height:auto}
}
@container ap (max-width:420px){
  .ap-ans{grid-template-columns:minmax(0,1fr);padding:14px 14px 12px}
  .ap-ansr{align-items:flex-start;max-width:none}
  .ap-ansr .v2-formula{text-align:left}
  .ap-acts{justify-content:flex-start}
  .ap-left,.ap-col{padding-left:14px;padding-right:14px}
  .ap-cells{gap:10px 8px}
  .ap-cell .v2-input input{font-size:14.5px;padding:0 6px}
  .ap-cell .v2-input b{padding:0 4px;font-size:10.5px}
}