/* 물 농도 계산기 전용 CSS (2026-10-20). 머리(wcn-head) → 예시(wcn-exr) → 결과 띠(wcn-res) → 등식 카드 ① + ② = ③(wcn-eq, 칸 줄은 subgrid)
   → 다른 단위로(wcn-us) → 농도 자(wcn-rl) → 계산 내역(wcn-rc). 공용 부품은 assets/v2.css.
   움직임은 transitions.dev 토큰(위치·높이 400ms, cubic-bezier(.22,1,.36,1)), 동작 줄이기에서는 끔 */
.wcn-work{--wcn-mv:400ms;--wcn-ease:cubic-bezier(.22,1,.36,1)}
.wcn-work [hidden]{display:none!important}
.wcn-hbox{padding:14px 18px 10px}
.wcn-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 14px}
.wcn-head .v2-label{display:block;margin:0 0 5px}
.wcn-md button{height:var(--v2-ctl);padding:0 14px;font-size:13px;font-weight:650}
.wcn-slf{min-width:0;max-width:100%}
.wcn-sel{height:var(--v2-ctl);min-width:180px;max-width:100%;padding:0 30px 0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink)}
.wcn-mwf,.wcn-rhf{width:160px}
.wcn-mwf input,.wcn-rhf input{text-align:right}
.wcn-exr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:0 18px 12px;border-bottom:1px solid var(--soft)}
.wcn-exs{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 0;min-width:0}
.wcn-exs .v2-btn,.wcn-reset{height:30px;padding:0 10px;font-size:12px}
@media (max-width:560px){ .wcn-exs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px} .wcn-exs .v2-btn{flex:0 0 auto} }
.wcn-exs .v2-btn[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}

/* 결과 띠 */
.wcn-res{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 18px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.wcn-rm{flex:1 1 420px;min-width:0}
.wcn-big{flex-wrap:wrap;gap:2px 10px;margin-top:4px;font-size:44px}
.wcn-big span{white-space:nowrap}
.wcn-big small{font-family:var(--sans);font-size:18px;font-weight:700;letter-spacing:0}
.wcn-big.is-recipe{font-size:30px;gap:4px 22px}
.wcn-big .wcn-bp{display:inline-flex;flex-direction:column;gap:2px}
.wcn-big .wcn-bp small{font-size:12px;font-weight:650;color:var(--muted)}
.wcn-big.is-empty{font-size:17px;line-height:1.45}
.wcn-big.is-err{color:var(--accent);opacity:1}
.wcn-rec{margin:8px 0 0;font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.wcn-say{margin-top:4px;color:var(--muted)}
.wcn-say:empty,.wcn-rec:empty{display:none}
.wcn-warn{margin:8px 0 0;padding:8px 10px;border-left:2px solid var(--accent);background:var(--accent-wash);font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.wcn-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wcn-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}

/* 등식 카드 ① + ② = ③: 넓으면 가로, 칸 줄(머리·그릇·농도·양·보조)은 subgrid로 세 카드가 같은 높이 */
.wcn-eqbox{padding:16px 18px;border-bottom:1px solid var(--soft)}
.wcn-eq{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1.08fr);grid-template-rows:repeat(5,auto);column-gap:6px}
.wcn-card{display:grid;grid-row:1 / span 5;grid-template-rows:subgrid;row-gap:8px;min-width:0;padding:12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.wcn-card-1{grid-column:1}.wcn-card-2{grid-column:3}.wcn-card-3{grid-column:5}
.wcn-card-3{background:color-mix(in srgb, var(--wash) 70%, var(--paper));border-color:var(--line)}
.wcn-op{grid-row:2;grid-column:2;align-self:center;justify-self:center;font-family:var(--sans);font-size:22px;font-weight:800;color:var(--muted)}
.wcn-op2{grid-column:4}
.wcn-ch{display:flex;align-items:center;gap:8px;min-width:0;min-height:30px}
.wcn-tag{flex:0 0 auto;font-family:var(--sans);font-size:15px;font-weight:800;color:var(--ink)}
.wcn-name{font-family:var(--sans);font-size:14px;font-weight:750;color:var(--ink)}
.wcn-kind{flex-wrap:wrap;min-width:0}
.wcn-kind button{padding:0 9px;font-size:12px;white-space:nowrap}
.wcn-kind button:disabled{opacity:.4;cursor:not-allowed}
.wcn-ves{display:block;width:100%;height:84px;overflow:visible}
.wcn-fc,.wcn-fa{min-width:0}
.wcn-fc .v2-label,.wcn-fa .v2-label{display:flex;align-items:baseline;gap:6px}
.wcn-iu input{min-width:0}
.wcn-iu select{flex:0 0 auto;max-width:96px;height:calc(var(--v2-ctl) - 2px);padding:0 4px 0 8px;border:0;border-left:1px solid var(--soft);border-radius:0;background:var(--wash);font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted)}
.wcn-iu select:disabled{opacity:.6}
.wcn-fix{display:flex;align-items:center;justify-content:flex-end;height:var(--v2-ctl);padding:0 12px;border:1px dashed var(--soft);border-radius:var(--radius);font-family:var(--sans);font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--muted)}
.wcn-bs{font-style:normal;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:1px 5px;border:1px solid var(--soft);border-radius:var(--radius);color:var(--muted)}
.wcn-bs.is-on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.wcn-fa.is-calc .v2-input,.wcn-fc.is-calc .v2-input{border-style:dashed;background:transparent}
.wcn-fa.is-calc input,.wcn-fc.is-calc input{color:var(--ink);font-weight:800}
.wcn-card.is-out input[readonly]{cursor:default}
.wcn-sub{margin:0;min-height:1.4em;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
@container v2in (max-width:639px){
  .wcn-eq{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:4px}
  .wcn-card,.wcn-card-1,.wcn-card-2,.wcn-card-3,.wcn-op{grid-column:1}
  .wcn-card{grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(84px,.6fr) minmax(0,1.4fr);column-gap:12px;align-items:start}
  .wcn-ch{grid-column:1/-1}
  .wcn-ves{grid-column:1;grid-row:2/span 3;height:92px;align-self:center}
  .wcn-fc,.wcn-fa,.wcn-sub{grid-column:2}
  .wcn-op{grid-row:auto;height:18px;line-height:18px;font-size:18px}
}
@container v2in (max-width:279px){
  .wcn-card{grid-template-columns:minmax(0,1fr)}
  .wcn-ves{grid-column:1;grid-row:auto;height:72px}
  .wcn-fc,.wcn-fa,.wcn-sub{grid-column:1}
}

/* 그릇 그림 */
.wcn-glass{fill:none;stroke:var(--line);stroke-width:1.6;stroke-linejoin:round}
.wcn-tick{stroke:var(--line);stroke-width:1}
.wcn-liq{transform-box:fill-box;transform-origin:50% 100%;transition:transform var(--wcn-mv) var(--wcn-ease),fill var(--wcn-mv) var(--wcn-ease)}
.wcn-jar.is-evap .wcn-liq{fill:color-mix(in srgb, var(--ink) 6%, transparent)!important;stroke:var(--line);stroke-dasharray:3 3;stroke-width:1}
.wcn-wline{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.55;transition:transform var(--wcn-mv) var(--wcn-ease)}
.wcn-dots circle{fill:var(--accent);opacity:0;transition:opacity var(--wcn-mv) var(--wcn-ease),cy var(--wcn-mv) var(--wcn-ease)}
.wcn-xtal rect{fill:var(--card);stroke:var(--ink);stroke-width:.8}
.wcn-plate{stroke:var(--line);stroke-width:1.6}
.wcn-mound{fill:color-mix(in srgb, var(--ink) 14%, var(--card));stroke:var(--ink);stroke-width:1;transform-box:fill-box;transform-origin:50% 100%;transition:transform var(--wcn-mv) var(--wcn-ease)}
.wcn-steam path{fill:none;stroke:var(--muted);stroke-width:1.3;stroke-linecap:round}

/* 다른 단위로 */
.wcn-us,.wcn-rl,.wcn-rc{padding:14px 18px;border-bottom:1px solid var(--soft)}
.wcn-rc{border-bottom:0}
.wcn-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:0 0 10px}
.wcn-h small{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.wcn-units{display:flex;flex-wrap:wrap;gap:6px}
.wcn-units button{flex:1 1 150px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:baseline;column-gap:5px;min-width:0;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.wcn-units button:hover{background:var(--btn)}
.wcn-units button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--card)}
.wcn-units button:disabled{cursor:default;opacity:.75}
.wcn-units button[hidden]{display:none}
.wcn-units b{font-family:var(--sans);font-size:17px;font-weight:800;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.wcn-units i{font-style:normal;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.wcn-units small{grid-column:1/-1;margin-top:2px;font-family:var(--sans);font-size:11px;line-height:1.35;color:var(--muted)}

/* 농도 자 */
.wcn-rlbox{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.wcn-rsvg{display:block}
.wcn-axis{stroke:var(--ink);stroke-width:1.4}
.wcn-dtick{stroke:var(--ink);stroke-width:1}
.wcn-dlab{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--muted)}
.wcn-rtick{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.wcn-rdot{fill:var(--line)}
.wcn-rlab{font-family:var(--sans);font-size:11px;font-weight:650;fill:var(--ink)}
.wcn-hl{stroke:var(--muted);stroke-width:1.4;opacity:.6}
.wcn-satz{stroke:var(--line);stroke-width:.8}
.wcn-pin{transition:transform var(--wcn-mv) var(--wcn-ease)}
.wcn-pin circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.wcn-pin text{font-family:var(--sans);font-size:11px;font-weight:800;fill:var(--ink)}
.wcn-pin3 circle{fill:var(--accent);stroke:var(--accent)}
.wcn-pin3 text{fill:#fff}
.wcn-arr line{stroke:var(--ink);stroke-width:1.2}
.wcn-arr path{fill:var(--ink)}
.wcn-alab{font-family:var(--sans);font-size:11.5px;font-weight:700;fill:var(--ink)}
.wcn-rlkey{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.wcn-rlkey i{display:inline-block;width:18px;height:10px;border:1px solid var(--line);background:repeating-linear-gradient(45deg, var(--muted) 0 1px, transparent 1px 4px);opacity:.8}
.wcn-rlkey[hidden]{display:none}

/* 계산 내역 */
.wcn-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));column-gap:28px}
.wcn-rows li span em{display:block;font-size:11.5px}

@media (prefers-reduced-motion:reduce){ .wcn-liq,.wcn-wline,.wcn-dots circle,.wcn-mound,.wcn-pin{transition:none} }