/* 부피 변환기 전용 CSS (2026-10-20). 두 눈금 계량컵 띠 → 식·버튼 줄 → 모든 단위(이름 묶음 카드, CSS 단 나눔으로 빈 칸 없이).
   띠: 작업면 460px 미만은 넣기 → 결과 → 계량컵 한 열, 460px 이상은 [넣기 | 결과] 아래 계량컵, 720px 이상은 [넣기 | 계량컵 | 결과](DOM 순서는 그대로, 열 배치만).
   움직임(R45): 액체·수면·손잡이 translate, 같은 이름 막대 폭. 동작 줄이기면 바로. 폭 판단은 작업면 컨테이너 vol. 공용 부품 assets/v2.css */
.vol-work{container:vol / inline-size}
.vol-work [hidden]{display:none !important}
.vol-work .v2-status:empty{display:none}
.vol-select{display:block;width:100%;max-width:100%;height:var(--v2-ctl,42px);padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;text-overflow:ellipsis}
.vol-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 띠 */
.vol-eq{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.vol-in{display:flex;flex-direction:column;gap:12px;min-width:0}
.vol-mode{align-self:flex-start}
.vol-form{display:flex;flex-direction:column;min-width:0}
.vol-num{display:grid;gap:10px}
.vol-num .v2-input input{font-size:20px;font-weight:700}
.vol-def{margin:-2px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.vol-dim{display:grid;gap:10px}
.vol-dimctl{display:flex;flex-wrap:wrap;gap:6px 10px}
.vol-dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vol-dim.is-cyl .vol-dims{grid-template-columns:repeat(2,minmax(0,1fr))}
.vol-dims .v2-input input{padding:0 6px;font-size:16px;font-weight:700}
.vol-dims .v2-input b{min-width:0;padding:0 6px}
.vol-dimout{margin:0;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.vol-dimout:empty{display:none}
.vol-dimout.is-error{font-family:var(--sans);color:var(--accent);font-weight:600}
.vol-quickw{display:grid;gap:5px;margin-top:auto}
.vol-quick button{height:28px;padding:0 9px}

/* 결과 */
.vol-res{display:flex;flex-direction:column;min-width:0;padding:14px 16px;border-radius:var(--radius);container:volres / inline-size}
.vol-work .vol-res form.vol-toform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end} /* 공용 v2in(폭 260px 미만 폼 한 열)보다 앞서야 맞바꾸기 버튼이 단위 옆에 남는다 */
.vol-swap{width:var(--v2-ctl,42px);padding:0;justify-content:center}
.vol-swap svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vol-rlabel{display:block;margin:14px 0 6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.vol-rlabel:empty{display:none}
.vol-res .v2-big{flex-wrap:wrap;transition:opacity var(--ease)}
.vol-res .v2-big:not(.is-empty) span{min-width:0;max-width:100%;overflow-wrap:anywhere;font-size:clamp(17px, calc(100cqi / (var(--vol-len, 6) * .62)), 40px)} /* 아주 긴 값(1조 kL → mm³)은 칸 안에서 숫자 중간 줄바꿈(독립 검토 R2) */
.vol-res .v2-big.is-empty{margin-top:14px}
.vol-res .v2-big.is-empty span{font-size:15px;font-weight:600;line-height:1.45;color:var(--muted);white-space:normal}
.vol-res .v2-sub{margin-top:8px;font-size:12.5px;line-height:1.55;overflow-wrap:anywhere;transition:opacity var(--ease)}
.vol-res .v2-sub:empty{display:none}
.vol-res .v2-sub.is-error{color:var(--accent);font-weight:600}
.vol-res.is-pend .v2-big,.vol-res.is-pend .v2-sub,.vol-res.is-pend .vol-facts{opacity:.45}
.vol-facts{display:grid;gap:0;margin:auto 0 0;padding-top:12px}
.vol-facts > div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent)}
.vol-facts dt{flex:0 0 auto;font-family:var(--sans);font-size:12px;color:var(--muted)}
.vol-facts dd{min-width:0;margin:0;font-family:var(--sans);font-size:12.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* 두 눈금 계량컵 */
.vol-jugw{display:flex;flex-direction:column;gap:6px;min-width:0}
.vol-jug{position:relative;height:230px;touch-action:pan-y;cursor:ns-resize;user-select:none;-webkit-user-select:none}
.vol-jug.is-off{cursor:default}
.vol-jug svg{display:block;width:100%;height:100%;overflow:visible}
.vol-jug .bd{fill:var(--card)}
.vol-jug .lq{fill:color-mix(in srgb, var(--ink) 15%, var(--card));transition:transform .6s cubic-bezier(.2,.75,.25,1)}
.vol-jug .tk line{stroke:color-mix(in srgb, var(--ink) 40%, transparent);stroke-width:1}
.vol-jug .tk line.mj{stroke:var(--ink);stroke-width:1.3}
.vol-jug .ed{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.vol-jug .lf,.vol-jug .lt{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--muted);font-variant-numeric:tabular-nums}
.vol-jug .ttl{font-family:var(--sans);font-size:11.5px;font-weight:750;fill:var(--ink)}
.vol-jug .sf{transition:transform .6s cubic-bezier(.2,.75,.25,1)}
.vol-jug .sf line{stroke:var(--accent);stroke-width:2}
.vol-jug .sf circle{fill:var(--accent);stroke:var(--card);stroke-width:1.5}
.vol-jug.is-drag .lq,.vol-jug.is-drag .sf,.vol-jug.is-drag .vol-knob{transition:none}
.vol-knob{position:absolute;left:0;top:0;width:34px;height:18px;margin:-9px 0 0 -17px;border:1.5px solid var(--accent);border-radius:9px;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.18);cursor:grab;touch-action:none;transition:transform .6s cubic-bezier(.2,.75,.25,1)}
.vol-knob i{position:absolute;left:10px;right:10px;top:4.5px;height:4px;border-top:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted)}
.vol-knob:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vol-jug.is-drag .vol-knob{cursor:grabbing}
.vol-jug.is-off .vol-knob{display:none}
:lang(ja) #article{text-spacing-trim:space-all} /* ja 줄 끝 전각 괄호를 Chrome이 반각으로 그리면서 문서 폭은 전각으로 잡아 360px에서 2px 가로 스크롤(출처 링크 '（韓国語）') */
:lang(ko) .vol-res .v2-sub,:lang(ko) .vol-cap,:lang(ko) .vol-headhint,:lang(ko) .vol-def{word-break:keep-all} /* 한국어는 낱말 단위로 줄바꿈(긴 숫자는 overflow-wrap이 받는다) */
.vol-cap{margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted);text-align:center;overflow-wrap:anywhere}

@container vol (min-width:460px){
  .vol-eq{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vol-jugw{grid-column:1 / -1}
}
@container vol (min-width:720px){
  .vol-eq{grid-template-columns:minmax(0,1fr) minmax(220px,.95fr) minmax(0,1fr)}
  .vol-in{grid-column:1;grid-row:1}
  .vol-jugw{grid-column:2;grid-row:1}
  .vol-res{grid-column:3;grid-row:1}
  .vol-jug{height:auto;flex:1 1 auto;min-height:250px}
}

/* 식·버튼 줄 */
.vol-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:10px 18px 12px;border-bottom:1px solid var(--soft)}
.vol-ctl .v2-formula{flex:1 1 220px;min-width:0;margin:0;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.vol-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.vol-sdw{display:flex;align-items:center;gap:6px}
@container vol (max-width:440px){ .vol-acts{justify-content:flex-start} .vol-acts .v2-btn .i{display:none} }

/* 모든 단위: 이름 묶음 카드를 단으로 흘려 빈 칸을 남기지 않는다 */
.vol-all{padding:14px 18px 16px}
.vol-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 0 10px}
.vol-headhint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.vol-cols{columns:4 200px;column-gap:12px}
.vol-fam{break-inside:avoid;margin:0 0 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.vol-fh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 8px;margin:0;padding:7px 10px 6px;border-bottom:1px solid var(--soft);background:color-mix(in srgb, var(--wash) 60%, var(--paper))}
.vol-fh b{font-family:var(--sans);font-size:12.5px;font-weight:750}
.vol-fh span{font-family:var(--sans);font-size:11px;color:var(--muted)}
.vol-fam ul{list-style:none;margin:0;padding:0}
.vol-fam li + li{border-top:1px solid var(--soft)}
.vol-fam button{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;width:100%;min-height:44px;padding:6px 10px 8px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background var(--ease)}
.vol-fam button:hover{background:var(--btn)}
.vol-fam button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.vol-fam button.is-src{box-shadow:inset 3px 0 0 var(--line)}
.vol-fam button[aria-pressed="true"]{background:color-mix(in srgb, var(--fill) 9%, var(--paper));box-shadow:inset 3px 0 0 var(--fill)}
.vol-un{display:flex;flex-direction:column;min-width:0}
.vol-un b{font-family:var(--sans);font-size:12.5px;font-weight:650;line-height:1.3;overflow-wrap:anywhere}
.vol-un small{font-family:var(--sans);font-size:10.5px;line-height:1.35;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.vol-un small:empty{display:none}
.vol-uv{min-width:0;max-width:100%;font-family:var(--sans);font-size:13.5px;font-weight:750;text-align:right;font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.vol-ub{position:absolute;left:10px;bottom:3px;height:2px;width:calc((100% - 20px) * var(--w, 0));border-radius:1px;background:color-mix(in srgb, var(--ink) 30%, transparent);transition:width .5s cubic-bezier(.2,.75,.25,1)}
.vol-fam button[aria-pressed="true"] .vol-ub{background:var(--fill)}
/* 작업면 460px 미만: 카드 안 항목을 두 칸(이름 위·값 아래), 홀수 개면 마지막 항목이 두 칸을 차지 */
@container vol (max-width:459.98px){
  .vol-cols{columns:1}
  .vol-fam ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .vol-fam li + li{border-top:0}
  .vol-fam li{border-top:1px solid var(--soft)}
  .vol-fam li:nth-child(-n+2){border-top:0}
  .vol-fam li:nth-child(even){border-left:1px solid var(--soft)}
  .vol-fam li:last-child:nth-child(odd){grid-column:1 / -1}
  .vol-fam button{grid-template-columns:minmax(0,1fr);align-content:start;height:100%}
  .vol-uv{text-align:left}
}

@media (prefers-reduced-motion: reduce){ .vol-jug .lq,.vol-jug .sf,.vol-knob,.vol-ub{transition:none} }