/* 인치 센티 변환기 전용 CSS (2026-10-21). 양면 줄자 작업대 → [화면이라면 | 허리둘레라면] → 자주 찾는 값.
   폭(작업면 컨테이너 icc): 600 이상 인치·cm 칸이 줄자 왼쪽에 위·아래로 붙고 행은 2열, 600 미만 칸 두 개 한 줄 + 줄자(420 미만은 '라벨 | 입력' 한 줄씩).
   판: 640 이상 [화면 | 허리] 나란히, 미만은 쌓기. 움직임(R45): 줄자 눈금이 값 쪽으로 미끄러지고 표시선이 따라감, 동작 줄이기면 바로. 공용 부품 assets/v2.css */
.icc-work{container:icc / inline-size}
.icc-work .v2-status:empty{display:none}
.icc-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 0 8px}
.icc-headhint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}

/* 계산대: 칸 | 줄자 */
.icc-calc{min-width:0;padding:14px 18px;border-bottom:1px solid var(--soft)}
.icc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 12px}
.icc-opt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.icc-bench{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.icc-cells{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:0 8px;margin:0}
.icc-sign{display:grid;place-items:center;min-width:20px;height:var(--v2-ctl,42px);font-family:var(--sans);font-size:22px;font-weight:700;line-height:1;color:var(--muted)}
.icc-cell .v2-input input{font-size:18px;font-weight:750}
.icc-cell.is-src .v2-input{border-color:var(--ink)}
.icc-cell .v2-input b{min-width:0;padding:0 10px;white-space:nowrap}
.icc-tape{min-width:0}
.icc-tape svg{display:block;width:100%;height:148px;overflow:hidden;touch-action:pan-y;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.icc-tape svg:focus{outline:0}
.icc-tape svg:focus-visible .icc-band{stroke:var(--ink);stroke-width:2}
.icc-tape svg.is-drag{cursor:grabbing}
.icc-band{fill:color-mix(in srgb, var(--wash) 55%, var(--card));stroke:var(--line);stroke-width:1}
.icc-ti{stroke:var(--ink);stroke-width:1}
.icc-ti.l0{stroke-width:1.7}
.icc-ti.l3,.icc-ti.l4{stroke:var(--muted)}
.icc-tc{stroke:var(--muted);stroke-width:1}
.icc-tc.l0{stroke:var(--ink);stroke-width:1.5}
.icc-til{font-family:var(--sans);font-size:13px;font-weight:800;fill:var(--ink);font-variant-numeric:tabular-nums}
.icc-tcl{font-family:var(--sans);font-size:11.5px;font-weight:650;fill:var(--muted);font-variant-numeric:tabular-nums}
.icc-tk,.icc-mk{transition:transform .55s cubic-bezier(.2,.75,.25,1)}
.icc-mk line{stroke:var(--accent);stroke-width:2}
.icc-fdot{fill:var(--accent)}
.icc-bub rect{fill:var(--ink)}
.icc-bub text{font-family:var(--sans);font-size:12.5px;font-weight:750;fill:var(--card);font-variant-numeric:tabular-nums}
.icc-tapehint{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
@container icc (min-width:600px){
  .icc-bench{grid-template-columns:minmax(200px,32%) minmax(0,1fr);gap:0 16px} /* 칸 폭은 999,999,999.999999가 글꼴 맞춤(12px 이상)으로 들어가는 최소 200px */
  .icc-cells{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(18px,1fr) auto;align-items:stretch}
  .icc-sign{height:auto;font-size:17px}
}
@container v2in (max-width:419px){ /* 반쪽 칸에 큰 값(999,999,999.999999)이 잘리지 않게 칸을 한 줄씩(라벨은 위, 언어마다 라벨 길이가 달라 옆에 두면 칸이 좁아짐), =·≈는 바로 아래 문장이 알린다 */
  .icc-cells{grid-template-columns:minmax(0,1fr);gap:8px}
  .icc-sign{display:none}
}

/* 결과 문장·행·식 */
.icc-sent{margin:10px 0 0;font-family:var(--sans);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere;transition:opacity var(--ease)}
.icc-sent.is-error{color:var(--accent)}
.icc-rows{display:grid;grid-template-columns:minmax(0,1fr);column-gap:24px;margin:8px 0 0;transition:opacity var(--ease)}
.icc-rows li{flex-wrap:wrap;gap:2px 12px;padding:6px 0;font-size:13px}
.icc-rows li[hidden]{display:none}
.icc-rows li b{min-width:0;margin-left:auto;text-align:right;white-space:normal;overflow-wrap:anywhere}
@container icc (min-width:600px){ .icc-rows{grid-template-columns:repeat(2,minmax(0,1fr))} .icc-rows li.is-span{grid-column:1 / -1} }
.icc-calc.is-pend .icc-sent,.icc-calc.is-pend .icc-rows{opacity:.45}
.icc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-top:10px}
.icc-foot .v2-formula{margin:0;min-width:0;white-space:normal;overflow-wrap:anywhere}
.icc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* 화면이라면 | 허리둘레라면 */
.icc-boards{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--soft)}
.icc-board{display:flex;flex-direction:column;min-width:0;padding:14px 18px}
.icc-board + .icc-board{border-top:1px solid var(--soft)}
@container icc (min-width:640px){ .icc-boards{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)} .icc-board + .icc-board{border-top:0;border-left:1px solid var(--soft)} }
@container icc (min-width:480px) and (max-width:639px){ /* 판이 한 열로 쌓이는 폭(1181px 화면 549px)에서는 판 안을 [그림 | 수치]로: 그림 양옆 빈 곳·세로 길이를 줄인다 */
  .icc-board{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:20px;align-content:start}
  .icc-board > .icc-head,.icc-board > .icc-ratios{grid-column:1 / -1}
  .icc-board > .icc-pic{grid-column:1;grid-row:span 2;margin:0}
  .icc-board > .icc-brows,.icc-board > .icc-note{grid-column:2}
  .icc-board > .icc-brows{align-self:end}
}
.icc-ratios{margin:0 0 4px}
.icc-ratios button{padding:0 9px;font-variant-numeric:tabular-nums}
.icc-pic{display:flex;flex:1 1 auto;align-items:center;justify-content:center;min-height:0;margin:4px 0 0}
.icc-pic svg{display:block;width:100%;max-width:360px;height:auto;overflow:visible}
.icc-scc{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.icc-scr{fill:none;stroke:color-mix(in srgb, var(--line) 75%, var(--card));stroke-width:1;stroke-dasharray:4 3}
.icc-scr.is-sel{fill:color-mix(in srgb, var(--ink) 9%, var(--card));stroke:var(--ink);stroke-width:1.8;stroke-dasharray:none}
.icc-scdiag{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:5 4}
.icc-scl{font-family:var(--sans);font-size:12.5px;font-weight:750;fill:var(--ink);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
.icc-scd{font-family:var(--sans);font-size:15px;font-weight:800;fill:var(--ink);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:5px;stroke-linejoin:round}
.icc-brows{margin:8px 0 0}
.icc-brows li{flex-wrap:wrap;gap:2px 12px;padding:6px 0;font-size:13px}
.icc-brows li b{min-width:0;margin-left:auto;text-align:right;white-space:normal;overflow-wrap:anywhere}
.icc-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.icc-wring{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-dasharray:6 4}
.icc-warrow{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.icc-wafold{font-family:var(--sans);font-size:11.5px;font-weight:600;fill:var(--muted)}
.icc-wdim{fill:none;stroke:var(--ink);stroke-width:1.4}
.icc-pants{fill:color-mix(in srgb, var(--ink) 8%, var(--card));stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.icc-pband{fill:color-mix(in srgb, var(--ink) 16%, var(--card));stroke:var(--ink);stroke-width:1.4}
.icc-pbtn{fill:var(--ink)}

/* 자주 찾는 값: 묶음마다 6개 = 3열 × 2줄(400 미만 2열 × 3줄), 넓으면 묶음 두 개씩 나란히 — 어느 폭에서도 빈 칸 없이 */
.icc-quick{min-width:0;padding:14px 18px 16px;container:iccq / inline-size}
.icc-qgs{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 16px}
@container iccq (min-width:600px){ .icc-qgs{grid-template-columns:repeat(2,minmax(0,1fr))} }
.icc-qg{min-width:0}
.icc-qt{margin:0 0 6px;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--muted)}
.icc-qg ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
@container iccq (max-width:399px){ .icc-qg ul{grid-template-columns:repeat(2,minmax(0,1fr))} }
.icc-qg li{display:flex;min-width:0}
.icc-qg button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;min-height:44px;padding:6px 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);text-align:left;cursor:pointer;font-variant-numeric:tabular-nums lining-nums;transition:background var(--ease),border-color var(--ease)}
.icc-qg button span{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.icc-qg button b{font-size:13.5px;font-weight:750}
.icc-qg button small{font-size:11px;font-weight:600;color:var(--muted)}
.icc-qg button em{font-size:12px;font-style:normal;color:var(--muted);overflow-wrap:anywhere}
.icc-qg button:hover{background:var(--wash)}
.icc-qg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.icc-qg button[aria-pressed="true"]{border-color:var(--fill);box-shadow:inset 0 0 0 1px var(--fill)}

@media (prefers-reduced-motion: reduce){ .icc-tk,.icc-mk{transition:none} }
@container icc (max-width:439px){
  .icc-calc,.icc-board,.icc-quick{padding-left:14px;padding-right:14px}
  .icc-acts .v2-btn .i{display:none} /* 버튼 네 개가 한 줄에 들어가게 */
}