/* 건강 계산기 지면. theme.css 를 먼저 깔고 그 위에 얹는다.
 *
 * 계산기는 칼럼이 아니지만 지면에서는 칼럼처럼 선다(2026-10-26 사장님). 그래서
 * 목록은 .card / .card-art / .catalog-grid 를, 낱장은 .reading-header /
 * .reading-image / .reading-body 를 그대로 빌려 쓴다. 여기 적는 것은 입력 칸과
 * 결과 상자뿐이다 — 글 지면의 규칙을 다시 적지 않는다.
 */

/* ── 표지 — 그림이 아니라 글자 ───────────────────────────
 * 계산기 표지는 그리지 않고 지표의 이름을 크게 앉힌다(2026-10-26 사장님).
 * 들어가는 자리가 둘이다 — 목록 카드(.card-art)와 낱장 머리(.reading-image).
 * 두 자리의 너비가 세 배 넘게 다르므로 글자 크기는 뷰포트가 아니라 담는 칸의
 * 너비(cqw)를 따라간다. 폰 목록에서는 칸이 120px 로 줄어 부제를 숨긴다.
 * cqw 를 모르는 브라우저에는 앞줄의 고정 px 이 남는다.
 */
.calc-cover { container-type: inline-size; background: var(--cv, var(--gray-bg)) }
.calc-cover .cv {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start; padding: 0 8%;
}
.calc-cover b {
  display: block; color: #23282d; letter-spacing: -.045em;
  font: 800 34px/1.04 var(--serif);
  font-size: clamp(15px, 15cqw, 76px);
}
.calc-cover i {
  display: block; margin-top: .7em; font-style: normal; color: #23282d;
  opacity: .58; letter-spacing: -.02em;
  font: 600 14px/1.35 var(--sans);
  font-size: clamp(10px, 4.1cqw, 18px);
}
@container (max-width: 210px) {
  .calc-cover i { display: none }
}

/* ── 낱장 지면: 계산기 상자 ──────────────────────────── */
.calc-box {
  max-width: 680px; margin: 0 auto 36px; padding: 0 24px;
}
.calc-box .inner {
  border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  background: var(--paper);
}
.calc-box h2 {
  font: 700 19px/1.4 var(--serif); letter-spacing: -.03em; color: var(--ink);
  margin: 0 0 16px;
}
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px }
.calc-grid label { display: block; font-size: 13px; color: var(--sub); margin-bottom: 5px }
.calc-grid .f { min-width: 0 }
.calc-grid .f.wide { grid-column: 1 / -1 }
.calc-grid input, .calc-grid select {
  width: 100%; box-sizing: border-box; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  font: 500 16px var(--sans); color: var(--ink);
}
.calc-grid input:focus, .calc-grid select:focus { outline: none; border-color: var(--brand) }
.calc-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sub) }
.calc-check input { width: auto }
.calc-btns { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap }
.calc-btns button {
  padding: 11px 18px; border-radius: 10px; font: 600 15px var(--sans); cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--sub);
}
.calc-btns button.go { background: var(--brand); border-color: var(--brand); color: #fff }
.calc-out { margin-top: 18px; display: none }
.calc-out.on { display: block }
.calc-out .big {
  padding: 18px 20px; background: var(--blue-bg); border-radius: 12px;
  font: 700 17px/1.6 var(--serif); color: var(--ink);
}
.calc-out .big b { font-weight: 800; font-size: 26px; letter-spacing: -.03em }
.calc-out .read { margin: 12px 0 0; color: var(--sub); font-size: 15px; line-height: 1.75 }
.calc-out .err { padding: 14px 16px; background: #fdf2f2; border-radius: 12px; color: #a33; font-size: 15px }
.calc-note {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: 13px; line-height: 1.8;
}
.calc-note b { color: var(--sub); font-weight: 600 }
.calc-note + .calc-note { margin-top: 8px; padding-top: 0; border-top: 0 }

@media (max-width: 600px) {
  /* 폰에서는 .wrap 이 좌우 24px 을 대므로 상자는 제 여백을 뗀다 — theme.css 의
     .reading-body 가 같은 자리에서 padding 을 0 으로 내리는 것과 같은 규칙이다. */
  .calc-box { padding: 0 }
  .calc-grid { grid-template-columns: 1fr }
  .calc-box .inner { padding: 18px 16px }
}