/* CCF → 갤런 변환기 전용 CSS (2026-10-20). 등식 막대(두 칸 + =/≈) → 결과 | 물 상자·생활 속 양 → 하루·한 사람 사용량 | 단가 환산.
   물 상자: 칸마다 같은 클립 안에서 물 묶음을 translateY로 내려 두고 값이 바뀌면 올라온다(R45, 동작 줄이기면 바로). 폭 판단은 작업면 컨테이너 cw. 공용 부품 assets/v2.css */
.cw-work{container:cw / inline-size}
.cw-work .v2-status:empty{display:none}
.cw-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:14px 0 6px}
.cw-headhint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.cw-select{display:block;width:100%;max-width:100%;height:var(--v2-ctl,42px);padding:0 6px;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}
.cw-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cw-note{margin:10px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.cw-note:empty{display:none}
.cw-note.is-error{color:var(--accent);font-weight:600}

/* 등식 막대 */
.cw-bar{padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.cw-eq{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);align-items:end;gap:0 8px}
.cw-pair{display:grid;grid-template-columns:minmax(0,1fr) 6.6em;gap:6px}
.cw-pair .v2-input input{font-size:18px;font-weight:700}
.cw-sign{display:flex;align-items:center;justify-content:center;height:var(--v2-ctl,42px);font-family:var(--sans);font-size:26px;font-weight:800;line-height:1;color:var(--accent)}
.cw-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;margin-top:12px}
.cw-ctl{display:grid;gap:5px;min-width:0}
.cw-acts{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.cw-help{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.cw-help:empty{display:none}

/* 결과 | 물 상자 */
.cw-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cw-out{display:flex;flex-direction:column;min-width:0;padding:16px 18px 16px;container:cwout / inline-size}
.cw-out > .v2-label{display:block;margin-bottom:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cw-out .v2-big{flex-wrap:wrap;transition:opacity var(--ease)}
.cw-out .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(22px, calc(100cqi / (var(--cw-len, 6) * .62)), 1em)}
.cw-out .v2-big.is-empty span{font-size:16px;font-weight:600;line-height:1.4;color:var(--muted);white-space:normal}
.cw-out .v2-sub{transition:opacity var(--ease)}
.cw-out.is-pend .v2-big,.cw-out.is-pend .v2-sub,.cw-out.is-pend .cw-all{opacity:.45}
.cw-all{list-style:none;margin:0;padding:0;transition:opacity var(--ease)}
.cw-all button{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;min-height:32px;padding:6px 8px;border:0;border-top:1px solid var(--soft);border-left:2px solid transparent;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background var(--ease)}
.cw-all li:last-child button{border-bottom:1px solid var(--soft)}
.cw-all button:hover{background:var(--btn)}
.cw-all button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cw-all button[aria-pressed="true"]{border-left-color:var(--accent);background:var(--accent-wash)}
.cw-all button span{min-width:0;font-family:var(--sans);font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.cw-all button span i{display:none;margin-left:6px;font-family:var(--mono);font-size:10.5px;font-style:normal;color:var(--muted)}
.cw-all button.is-from span i{display:inline}
.cw-all button.is-from span i::before{content:"← "}
.cw-all button b{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.cw-all button b small{font-size:11.5px;font-weight:600;color:var(--muted)}
.cw-out .v2-formula{margin:10px 0 12px;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.cw-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--soft)}
.cw-foot .v2-status{margin-left:auto}

.cw-vis{display:flex;flex-direction:column;min-width:0;padding:16px 18px 16px;border-left:1px solid var(--soft)}
.cw-vis > .cw-head:first-child{margin-top:0}
.cw-cubes{position:relative;flex:1 1 auto;min-height:170px}
.cw-cubes svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.cw-cempty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0 12px;font-family:var(--sans);font-size:13px;color:var(--muted);text-align:center}
.cw-cempty[hidden]{display:none}
.cw-cube .bg{fill:var(--card)}
.cw-cube .bk{fill:none;stroke:var(--line);stroke-width:.8;stroke-dasharray:2 2.5}
.cw-cube .ed{fill:none;stroke:var(--muted);stroke-width:1.1;stroke-linejoin:round}
.cw-cube .w{transition:transform .7s cubic-bezier(.2,.75,.25,1)}
.cw-cube .t{fill:color-mix(in srgb, var(--accent) 26%, var(--card))}
.cw-cube .l{fill:color-mix(in srgb, var(--accent) 50%, var(--card))}
.cw-cube .r{fill:color-mix(in srgb, var(--accent) 38%, var(--card))}
.cw-leg{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--soft)}
.cw-leg svg{flex:0 0 auto;width:64px;height:52px;overflow:visible}
.cw-leg .pp,.cw-cubes .pp{fill:var(--ink)}
.cw-cubes .pp{opacity:.8}
.cw-leg p{margin:0;min-width:0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums}
.cw-leg small{display:block;font-size:11.5px;color:var(--muted)}
.cw-eqs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.cw-eqs li{min-width:0;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.cw-eqs b{display:block;font-family:var(--sans);font-size:18px;font-weight:750;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere} /* id '63 jam 20 menit'처럼 긴 값은 360px 반쪽 칸에서 두 줄로 */
.cw-eqs span{display:block;margin-top:3px;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}

/* 하루·한 사람 | 단가 */
.cw-bill{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--soft)}
.cw-day,.cw-rate{display:flex;flex-direction:column;min-width:0;padding:14px 18px 16px}
.cw-rate{border-left:1px solid var(--soft)}
.cw-bill .cw-head:first-child{margin-top:0}
.cw-dayf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cw-ratef{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px}
.cw-chips{margin-top:8px}
.cw-dstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 0}
.cw-dstats div:last-child{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.cw-dstats div:last-child dd{margin:0}
.cw-dstats div:last-child dd small{display:inline}
.cw-dstats div{min-width:0;padding:7px 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.cw-dstats dt{font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1.35;color:var(--muted)}
.cw-dstats dd{margin:3px 0 0;font-family:var(--sans);font-size:16px;font-weight:750;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-dstats dd small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.cw-meter{position:relative;height:12px;margin:30px 0 0;border-radius:999px;background:var(--soft)}
.cw-mfill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:inherit;background:var(--ink);opacity:.5;transition:width .6s cubic-bezier(.2,.75,.25,1)}
.cw-meter.is-hi .cw-mfill{background:var(--accent);opacity:.85}
.cw-mavg{position:absolute;top:-5px;bottom:-5px;left:0;width:0;border-left:2px solid var(--ink);transition:left .6s cubic-bezier(.2,.75,.25,1)}
.cw-mavg span{position:absolute;bottom:100%;left:0;margin-bottom:3px;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.cw-rrows{margin-top:12px}
.cw-rrows li b{font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums;text-align:right;overflow-wrap:anywhere}
.cw-rrows li.is-on span{color:var(--ink);font-weight:700}
.cw-charge{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0;padding:9px 0 0;border-top:1px solid var(--line);font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink)}
.cw-charge b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums lining-nums}
.cw-rate .cw-note{margin-top:8px;color:var(--muted)}
.cw-rate .cw-note.is-error{color:var(--accent)}

@media (prefers-reduced-motion: reduce){ .cw-cube .w,.cw-mfill,.cw-mavg{transition:none} }

/* 폭: 720 미만 = 결과 위(모든 단위 두 열)·그림 아래(생활 속 양 네 칸), 640 미만 = 등식 두 칸 쌓기, 600 미만 = 하루·단가 쌓기, 520 미만 = 모두 한 열 */
@container cw (max-width:719px){
  .cw-main{grid-template-columns:minmax(0,1fr)}
  .cw-all{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
  .cw-all li:last-child{grid-column:1 / -1}
  .cw-vis{border-left:0;border-top:1px solid var(--soft)}
  .cw-vis > .cw-cubes{min-height:180px}
  .cw-eqs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container cw (max-width:599px){
  .cw-bill{grid-template-columns:minmax(0,1fr)}
  .cw-rate{border-left:0;border-top:1px solid var(--soft)}
}
@container cw (max-width:639px){ /* 1181px 화면(작업면 약 590px)에서 반쪽 칸에 긴 값(918701.299)이 4px 잘렸다 → 640 미만은 두 칸을 쌓는다 */
  .cw-eq{grid-template-columns:minmax(0,1fr)}
  .cw-sign{height:26px;font-size:22px}
}
@container cw (max-width:519px){
  .cw-acts{margin-left:0}
  .cw-all{display:block}
  .cw-vis > .cw-cubes{min-height:160px}
  .cw-eqs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container cw (max-width:419px){
  .cw-bar,.cw-out,.cw-vis,.cw-day,.cw-rate{padding-left:12px;padding-right:12px}
}