/* 밀도 계산기 전용 CSS (2026-10-20). 답 띠(+ 다른 단위 4칸) → 구할 값·유효숫자 → 등식 막대 [m] ÷ [V] = [ρ] + 재는 법·물질 → [비커 | 가까운 물질 사다리].
   폭 판단은 작업면 컨테이너 dn: 720px 이상은 등식 한 줄(칸 아래 재는 법), 440~720px은 '칸 | 재는 법' 줄 표, 그 밑은 한 열. 그림 둘은 640px 이상 나란히. 10자 이상 값은 글자를 줄임(is-long).
   움직임(R45): 비커 속 물체가 잠기는 깊이로 떠오르거나(살짝 출렁) 바닥으로 가라앉음, 사다리 막대 폭 이동. 동작 줄이기면 바로. 공용 부품 assets/v2.css */
.dn-work{container:dn / inline-size}
.dn-work .v2-status:empty{display:none}
.dn-hint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.dn-work:lang(ko) :is(.v2-sub,.dn-cap,.dn-ladnote){word-break:keep-all;overflow-wrap:anywhere} /* KO는 낱말 중간에서 끊지 않음(ja는 띄어쓰기가 없어 제외) */

/* 답 띠 */
.dn-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)}
.dn-ansl{min-width:0;container:dnans / inline-size}
.dn-ansl > .v2-label{display:block;margin-bottom:6px}
.dn-ans .v2-big{flex-wrap:wrap;transition:opacity var(--ease)}
.dn-ans .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(22px, calc(100cqi / (var(--dn-len, 7) * .62)), 1em)}
.dn-ans .v2-big .dn-eq{font-style:normal;font-weight:700;font-size:.62em;color:var(--muted);align-self:center}
.dn-ans .v2-big.is-empty span{font-size:16px;font-weight:600;line-height:1.4;color:var(--muted);white-space:normal}
.dn-ans .v2-sub{transition:opacity var(--ease)}
.dn-ans.is-pend .v2-big,.dn-ans.is-pend .v2-sub,.dn-ans.is-pend .dn-tiles{opacity:.45}
.dn-ansr{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0;max-width:400px}
.dn-ansr .v2-formula{margin:0;text-align:right;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.dn-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.dn-tiles{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;list-style:none;margin:2px 0 0;padding:0}
.dn-tiles[hidden]{display:none}
.dn-tiles li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:7px 10px;background:var(--paper);border:1px solid var(--soft);border-radius:var(--radius)}
.dn-tiles span{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);overflow-wrap:anywhere}
.dn-tiles b{font-family:var(--sans);font-size:15px;font-weight:750;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);overflow-wrap:anywhere}
.dn-tiles b i{font-style:normal;font-weight:600;color:var(--muted);margin-right:3px}

/* 계산: 구할 값·유효숫자 → 등식 막대 */
.dn-calc{padding:14px 18px 16px;border-bottom:1px solid var(--soft)}
.dn-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;margin:0 0 12px}
.dn-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.dn-eq{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 10px}
.dn-q > label{display:flex;align-items:baseline;gap:6px}
.dn-qn{min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.dn-tag{font-style:normal;font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.dn-q.is-auto .dn-tag{color:var(--ink)}
.dn-ap{margin-left:auto;font-family:var(--mono);font-size:11.5px;font-style:normal;font-weight:700;color:var(--muted)}
.dn-pair{display:grid;grid-template-columns:minmax(0,1fr) 6.2em;gap:6px}
.dn-pair .v2-input input{font-size:16px;font-weight:700;padding:0 8px}
.dn-work input.is-long{font-size:13.5px}
.dn-q.is-auto .v2-input{background:var(--wash);border-color:var(--ink);border-style:dashed}
.dn-q.is-calc .v2-input{background:var(--wash)}
.dn-q .v2-input input[readonly]{cursor:default}
.dn-sel{display:block;width:100%;min-width:0;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}
.dn-sel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dn-how{font-size:13px;font-weight:550}
.dn-op{display:flex;align-items:center;justify-content:center;height:22px;font-family:var(--sans);font-size:20px;font-weight:800;line-height:1;color:var(--muted)}

/* 재는 법 칸(용기째·물 눈금·치수) */
.dn-sub{grid-column:1 / -1;padding:10px 12px 12px;background:color-mix(in srgb, var(--wash) 70%, var(--paper));border-radius:var(--radius)}
.dn-sub[hidden]{display:none}
.dn-subh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin:0 0 8px}
.dn-subr{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.dn-subf{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:8px 10px}
.dn-subf .v2-f[hidden]{display:none}
.dn-subf .v2-input input{font-size:15.5px;padding:0 8px}

/* 그림: 비커 | 가까운 물질 */
.dn-vis{display:grid;grid-template-columns:minmax(0,1fr)}
.dn-bkf{display:flex;flex-direction:column;min-width:0;margin:0;padding:14px 18px 14px}
.dn-vhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin:0 0 8px}
.dn-bk{position:relative;flex:1 1 auto;height:250px;min-height:220px}
.dn-bk svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.dn-cap{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.dn-bk .bk-in{fill:color-mix(in srgb, var(--ink) 3%, var(--card))}
.dn-bk .bk-liq{fill:color-mix(in srgb, var(--ink) 15%, transparent)}
.dn-bk .lq-sea{fill:color-mix(in srgb, var(--ink) 22%, transparent)}
.dn-bk .lq-olive{fill:color-mix(in srgb, #b58a1b 30%, transparent)}
.dn-bk .lq-eth{fill:color-mix(in srgb, var(--ink) 8%, transparent)}
.dn-bk .lq-hg{fill:color-mix(in srgb, var(--ink) 42%, transparent)}
.dn-bk .bk-surf{stroke:color-mix(in srgb, var(--ink) 45%, transparent);stroke-width:1.4}
.dn-bk .bk-wall{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.dn-bk .bk-tick{stroke:var(--line);stroke-width:1.2}
.dn-bk text{font-family:var(--sans);font-size:11px;font-variant-numeric:tabular-nums}
.dn-bk .bk-lname{fill:var(--muted)}
.dn-bk .bk-obj{transition:transform .8s cubic-bezier(.34,1.45,.64,1)}
.dn-bk .bk-obj.is-sink{transition:transform .9s cubic-bezier(.5,0,.4,1)}
.dn-bk .bk-obj.is-still{transition:none}
.dn-bk .bk-obj rect{fill:var(--accent)}
.dn-bk .bk-objt text{fill:var(--paper);font-weight:750;paint-order:stroke;stroke:var(--accent);stroke-width:3px}
.dn-bk .bk-br path{fill:none;stroke:var(--ink);stroke-width:1.2}
.dn-bk .bk-br text{fill:var(--ink);font-size:11.5px;font-weight:650}
.dn-ladf{display:flex;flex-direction:column;min-width:0;padding:14px 18px 14px;border-top:1px solid var(--soft)}
.dn-ladu{font-family:var(--sans);font-weight:600;color:var(--muted);margin-left:2px}
.dn-lad{display:grid;grid-template-columns:minmax(0,max-content) minmax(36px,1fr) max-content max-content;column-gap:10px;list-style:none;margin:0;padding:0}
.dn-lad li{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}
.dn-lad button{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center;min-height:34px;padding:0 8px;border:0;border-bottom:1px solid var(--soft);border-radius:0;background:none;color:var(--ink);font-family:var(--sans);text-align:left;cursor:pointer;transition:background var(--ease)}
.dn-lad li:first-child button{border-top:1px solid var(--soft)}
.dn-lad button:hover:not(:disabled){background:var(--btn)}
.dn-lad button:disabled{cursor:default;opacity:1}
.dn-lad li.is-me button{background:var(--fill);color:var(--on-fill)}
.dn-ln{font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn-lb{height:8px;background:color-mix(in srgb, var(--ink) 6%, transparent);border-radius:1px;overflow:hidden}
.dn-lb i{display:block;height:100%;width:0;background:color-mix(in srgb, var(--ink) 38%, transparent);transition:width .5s cubic-bezier(.22,1,.36,1)}
.dn-lad li.is-me .dn-lb{background:color-mix(in srgb, var(--on-fill) 18%, transparent)}
.dn-lad li.is-me .dn-lb i{background:var(--on-fill)}
.dn-lv{font-size:13.5px;font-weight:750;font-variant-numeric:tabular-nums lining-nums;text-align:right;white-space:nowrap}
.dn-ld{min-width:4.6em;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.dn-lad li.is-me .dn-ld{color:var(--on-fill)}
.dn-lad.is-empty{opacity:.45}
.dn-lad.is-empty .dn-lb i{width:0 !important}
.dn-ladnote{margin:8px 0 0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.dn-bk .bk-obj,.dn-bk .bk-obj.is-sink,.dn-lb i{transition:none}}

/* 440~720px: 칸 | 재는 법 줄 표 */
@container dn (min-width:440px){
  .dn-eq{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:end}
  .dn-q{grid-column:1}
  .dn-how{grid-column:2}
  .dn-op{grid-column:1 / -1;height:16px;font-size:17px}
}
/* 720px 이상: 등식 한 줄 [m] ÷ [V] = [ρ], 칸 아래 재는 법·물질 */
@container dn (min-width:720px){
  .dn-eq{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr);gap:8px 8px}
  .dn-q[data-q="m"]{grid-column:1;grid-row:1}
  .dn-how--m{grid-column:1;grid-row:2}
  .dn-op1{grid-column:2;grid-row:1;align-self:end;height:var(--v2-ctl,42px);font-size:22px}
  .dn-q[data-q="v"]{grid-column:3;grid-row:1}
  .dn-how--v{grid-column:3;grid-row:2}
  .dn-op2{grid-column:4;grid-row:1;align-self:end;height:var(--v2-ctl,42px);font-size:22px}
  .dn-q[data-q="r"]{grid-column:5;grid-row:1}
  .dn-how--r{grid-column:5;grid-row:2}
  .dn-sub{grid-row:3}
  .dn-eq:has(.dn-sub--v:not([hidden])) .dn-sub--m{grid-column:1 / 3}
  .dn-sub--m:not([hidden]) ~ .dn-sub--v{grid-column:3 / -1}
  .dn-pair{grid-template-columns:minmax(0,1fr) 5.2em}
}
@container dn (min-width:640px){
  .dn-vis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dn-ladf{border-top:0;border-left:1px solid var(--soft)}
  .dn-bk{height:auto}
}
@container dn (max-width:719px){
  .dn-ans{grid-template-columns:minmax(0,1fr)}
  .dn-ansr{align-items:flex-start;max-width:none}
  .dn-ansr .v2-formula{text-align:left}
  .dn-acts{justify-content:flex-start}
}
@container dn (max-width:520px){
  .dn-ans{grid-template-columns:minmax(0,1fr);padding:14px 14px 12px}
  .dn-ansr{align-items:flex-start;max-width:none}
  .dn-ansr .v2-formula{text-align:left}
  .dn-acts{justify-content:flex-start}
  .dn-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dn-calc,.dn-bkf,.dn-ladf{padding-left:14px;padding-right:14px}
}