/* 베크렐 큐리 변환기 전용 CSS (2026-10-20). 답 띠 → 단위 사다리 폼(베크렐 | 크기 사다리 | 큐리, 줄마다 1,000배) → 유효숫자 → 공기·물 농도 줄.
   작업면 700px 이상은 세 열(사다리가 두 칸 열 사이에서 줄 높이에 맞춰 늘어남), 좁으면 두 칸 열 아래에 사다리. 폭 판단은 작업면 컨테이너 bq.
   움직임(R45): 사다리 표식이 넣은 값의 높이로 미끄러짐, 라돈 막대 채움 폭이 늘어남. 동작 줄이기면 바로. 공용 부품 assets/v2.css */
.bq-work{container:bq / inline-size}
.bq-work .v2-status:empty{display:none}
.bq-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bq-hint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}

/* 답 띠 */
.bq-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)}
.bq-ansl{min-width:0;container:bqans / inline-size}
.bq-ansl > .v2-label{display:block;margin-bottom:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bq-ans .v2-big{flex-wrap:wrap;transition:opacity var(--ease)}
.bq-ans .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(22px, calc(100cqi / (var(--bq-len, 7) * .62)), 1em)}
.bq-ans .v2-big .bq-eq{font-style:normal;font-weight:700;font-size:.62em;color:var(--muted);align-self:center}
.bq-ans .v2-big.is-empty span{font-size:16px;font-weight:600;line-height:1.4;color:var(--muted);white-space:normal}
.bq-ans .v2-sub{transition:opacity var(--ease);overflow-wrap:anywhere}
.bq-ans .v2-sub .alt{margin-top:4px;font-size:12.5px;line-height:1.55}
.bq-ans.is-pend .v2-big,.bq-ans.is-pend .v2-sub{opacity:.45}
.bq-ansr{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0;max-width:390px}
.bq-ansr .v2-formula{margin:0;text-align:right;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.bq-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}

/* 단위 사다리 폼: 좁으면 [베크렐 | 큐리] 두 열 + 아래 사다리, 넓으면 [베크렐 | 사다리 | 큐리] */
.bq-lad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;padding:14px 18px 10px}
.bq-h{display:flex;flex-direction:column;gap:1px;min-width:0;align-self:end}
.bq-h--lad{grid-column:1 / -1;grid-row:9;margin-top:8px}
.bq-spine{position:relative;grid-column:1 / -1;grid-row:10;height:272px;min-width:0}
.bq-spine svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.bq-cell .v2-input input{font-size:15px;font-weight:700;padding:0 8px}
.bq-cell .v2-input b{width:3.6em;min-width:0;padding:0 6px;white-space:nowrap}
.bq-ap{display:grid;place-items:center;padding-left:8px;font-style:normal;font-size:13px;font-weight:700;color:var(--muted)}
.bq-ap:empty{display:none}
.bq-cell.is-read .v2-input{border-color:color-mix(in srgb, var(--accent) 55%, var(--line))}
.bq-cell.is-read .v2-input b{color:var(--accent)}
.bq-cell.is-src .v2-input{border-color:var(--ink)}
.bq-cell .v2-input input.bq-fit1{font-size:12.5px}
.bq-cell .v2-input input.bq-fit2{font-size:11px;letter-spacing:-.01em}
.bq-cell .v2-input input.bq-fit3{font-size:10px;letter-spacing:-.02em;padding:0 3px} /* 칸보다 긴 값(좁은 폭·유효숫자 8·아주 작은 지수)은 글자를 줄여 잘리지 않게(tool.js fit) */

/* 크기 사다리(SVG 눈금·점 + HTML 이름 버튼) */
.bq-spine .bd{fill:transparent}
.bq-spine .bd2{fill:color-mix(in srgb, var(--ink) 3.5%, transparent)}
.bq-spine .bl{stroke:var(--line);stroke-width:1}
.bq-spine .ct{stroke:var(--muted);stroke-width:1.2}
.bq-spine text{font-family:var(--sans);font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.bq-spine .lp{fill:var(--ink)}
.bq-spine .lr{fill:var(--ink);opacity:.8}
.bq-spine .ll{stroke:var(--muted);stroke-width:1}
.bq-lms{position:absolute;inset:0;pointer-events:none}
.bq-lm{position:absolute;height:16px;padding:0 4px;border:0;border-radius:3px;background:color-mix(in srgb, var(--paper) 82%, transparent);font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-align:left;cursor:pointer;pointer-events:auto;transition:background var(--ease),color var(--ease)}
.bq-lm:hover{background:var(--btn);color:var(--ink)}
.bq-lm:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bq-spine .mk{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.bq-spine .mk.is-still{transition:none}
.bq-spine .mk line{stroke:var(--accent);stroke-width:1.6}
.bq-spine .mk circle{fill:var(--accent)}
.bq-spine .mk rect{fill:var(--accent)}
.bq-spine .mk text{fill:var(--paper);font-weight:700;font-size:11px}

/* 유효숫자 줄 */
.bq-opts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:2px 18px 14px}
.bq-opts .bq-hint{flex:1 1 220px}

/* 공기·물 농도 줄 */
.bq-conc{padding:14px 18px 16px;border-top:1px solid var(--soft)}
.bq-chead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin:0 0 8px}
.bq-ccells{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 10px}
.bq-ccells .bq-cell .v2-input b{width:4.6em}
.bq-cq{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:6px 12px;margin-top:10px}
.bq-cq > .v2-label{padding-top:8px;line-height:1.2}
.bq-gauge{margin:12px 0 0}
.bq-gbox{position:relative;height:56px}
.bq-gbox svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.bq-gauge .tr{fill:color-mix(in srgb, var(--ink) 7%, transparent)}
.bq-gauge .fl{fill:var(--accent);transition:width .5s cubic-bezier(.22,1,.36,1)}
.bq-gbox.is-over .fl{fill:color-mix(in srgb, var(--accent) 80%, var(--ink))}
.bq-gauge .rf{stroke:var(--ink);stroke-width:1.4}
.bq-gauge .rf1{stroke-dasharray:4 2}
.bq-gauge .rf2{stroke-dasharray:1.5 2}
.bq-gauge text{font-family:var(--sans);font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.bq-gauge .rn{fill:var(--ink);font-weight:700}
.bq-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--ink)}
.bq-legend li{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow-wrap:anywhere}
.bq-legend .sw{flex:0 0 auto;width:14px;height:0;border-top:2px solid var(--ink)}
.bq-legend .sw.rf1{border-top-style:dashed}
.bq-legend .sw.rf2{border-top-style:dotted}
.bq-legend em{font-style:normal;font-weight:700;color:var(--muted);margin-left:2px}
.bq-gnote{margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.bq-gnote:empty{display:none}
@media (prefers-reduced-motion:reduce){.bq-spine .mk,.bq-gauge .fl{transition:none}}

@container bq (min-width:640px){
  .bq-ccells{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container bq (min-width:700px){
  .bq-lad{grid-template-columns:minmax(0,1fr) minmax(220px,1.2fr) minmax(0,1fr);column-gap:12px}
  .bq-h--lad{grid-column:2;grid-row:1;margin-top:0}
  .bq-spine{grid-column:2;grid-row:2 / span 7;height:auto}
}
@container bq (max-width:420px){
  .bq-ans{grid-template-columns:minmax(0,1fr);padding:14px 14px 12px}
  .bq-ansr{align-items:flex-start;max-width:none}
  .bq-ansr .v2-formula{text-align:left}
  .bq-acts{justify-content:flex-start}
  .bq-lad,.bq-conc{padding-left:14px;padding-right:14px}
  .bq-opts{padding-left:14px;padding-right:14px}
  .bq-lad{column-gap:8px}
  .bq-cell .v2-input input{font-size:14px;padding:0 6px}
  .bq-cell .v2-input b{width:3.3em;padding:0 4px;font-size:10.5px}
  .bq-cell .v2-input{position:relative}
  .bq-ap{position:absolute;left:4px;top:3px;padding:0;font-size:10.5px;line-height:1} /* 좁은 칸: ≈는 왼쪽 위 모서리에 두어 값 자리를 줄이지 않는다 */
}
@container bq (max-width:340px){
  .bq-cell .v2-input b{width:2.9em;padding:0 2px;font-size:10px}
}