/* ==========================================================================
   GWANGGYO BARUN — A4 PORTRAIT SINGLE-PAGE STYLESHEET
   For: patient-handout-pdf, lab-report-infographic
   Page: A4 portrait (210mm × 297mm), single page, footer mini-QR + OG meta
   ========================================================================== */

@page {
  size: A4 portrait;
  margin: 0;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-family);
  font-size: 10pt;
  line-height: var(--lh-snug);
  color: var(--color-ink);
  background: var(--color-canvas);
  font-feature-settings: "ss01", "tnum";
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  word-break: keep-all;        /* Korean wraps at word(어절=의미) units, not mid-syllable */
  overflow-wrap: break-word;   /* safety: an over-long token still breaks instead of overflowing */
}

/* --------------------------------------------------------------------------
   PAGE — single A4 portrait container
   210mm × 297mm = 794px × 1123px (at 96dpi)
   -------------------------------------------------------------------------- */
.page {
  width: 210mm;
  min-height: 297mm;
  max-height: 297mm;
  padding: 14mm 14mm 11mm;
  display: grid;
  grid-template-rows: auto auto 1fr auto;   /* header / title-block / body / footer */
  gap: 8mm;
  overflow: hidden;
  page-break-after: always;
  flex: 0 0 auto;
}

@media print {
  body {
    min-height: 0;
    display: block;
  }

  .page {
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   HEADER — logo left, eyebrow right (matches deck structure)
   -------------------------------------------------------------------------- */
.page__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 4mm;
}

.page__logo {
  height: 8.5mm;     /* Matches deck slide__logo (~32px @ 96dpi) for cross-medium consistency */
  width: auto;
}

.page__eyebrow {
  font-size: 8pt;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-slate);
}

.page__eyebrow strong {
  color: var(--color-navy);
  font-weight: var(--weight-bold);
}

/* --------------------------------------------------------------------------
   TITLE BLOCK
   -------------------------------------------------------------------------- */
.page__title-block {
  display: flex;
  flex-direction: column;
  gap: 2mm;
}

.page__title {
  font-size: 24pt;
  font-weight: var(--weight-540);    /* Match deck signature weight (Superhuman-style) */
  color: var(--color-navy);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-display);
}

.page__subtitle {
  font-size: 11pt;
  font-weight: var(--weight-regular);
  color: var(--color-ink-soft);
  line-height: var(--lh-snug);
}

/* --------------------------------------------------------------------------
   BODY — flexible container for handout/lab-report content
   When content is short, sections distribute evenly (no top-loading);
   when content is dense, gap stays at 5mm minimum.
   -------------------------------------------------------------------------- */
.page__body {
  display: flex;
  flex-direction: column;
  gap: 5mm;
  min-height: 0;
  justify-content: space-between;
}

/* Each direct section grows to share leftover vertical space proportionally,
   so a sparse handout fills the page evenly instead of clustering at top. */
.page__body > section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5mm;
}

/* When a section has only one card child, let the card stretch to fill */
.page__body > section > .card:only-child {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Two-column body fills its section vertically */
.page__body > section > .body-2col {
  flex: 1 1 auto;
  align-items: stretch;
}
.page__body > section > .body-2col > .card {
  display: flex;
  flex-direction: column;
}

.page:has(.page__body--visual-strip) {
  padding-top: 11mm;
  padding-bottom: 8mm;
  gap: 3mm;
}

.page__body.page__body--visual-strip {
  gap: 0.7mm;
  justify-content: start;
}

.page__body.page__body--visual-strip > section {
  flex: 0 0 auto;
  gap: 0.9mm;
}

.handout-visual-section {
  margin: 0;
}

.handout-visual-panel {
  position: relative;
  height: 24mm;
  max-width: 154mm;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  box-shadow: var(--shadow-soft);
}

.handout-visual-panel--compact {
  height: 18mm;
  max-width: 116mm;
}

.handout-visual-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.handout-visual-caption {
  position: absolute;
  left: 2.4mm;
  bottom: 1.8mm;
  max-width: calc(100% - 6mm);
  padding: 0.9mm 2.2mm;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-navy);
  font-size: 7pt;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  box-shadow: var(--shadow-soft);
}

.handout-visual-panel--compact .handout-visual-caption {
  padding: 0.8mm 2mm;
  font-size: 6.6pt;
}

/* --------------------------------------------------------------------------
   FOOTER — mini QR + clinic info (replaces deck closing slide)
   -------------------------------------------------------------------------- */
.page__footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8mm;
  padding-top: 4mm;
  border-top: 1px solid var(--color-border);
}

.page__footer-info {
  display: flex;
  flex-direction: column;
  gap: 1mm;
  font-size: 8pt;
  line-height: var(--lh-snug);
}

.page__footer-info .clinic-name {
  font-size: 9pt;
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
}

.page__footer-info .clinic-meta {
  color: var(--color-slate);
}

.qr-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5mm;
  position: relative;   /* anchor for the typeable .qr-mini__url line */
}

.qr-mini__code {
  width: 18mm;
  height: 18mm;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: 2mm;
  padding: 1mm;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-mini__code svg {
  width: 100%;
  height: 100%;
  display: block;
}

.qr-mini__label {
  font-size: 7pt;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-slate);
}

/* Typeable short-URL line for the footer mini-QR — for patients who can't
   scan. Injected at build time (build.py inject_qr_url_text); same URL the QR
   encodes, scheme stripped. Kept deliberately small/unobtrusive — reuses the
   existing slate meta color, no new tokens, no font/line-height/color changes
   to any other element.

   ⚠️ ABSOLUTELY POSITIONED, anchored to .qr-mini (always present), rendered as
   a SINGLE LINE directly below the QR in the page's bottom margin, right-edge
   aligned to the QR so it can never exceed the right page edge. This is on
   purpose: many handouts pack their single A4 body right up to the footer, so
   adding this line in normal flow would grow the footer and push body content
   past the page (regression confirmed across 19/53 handouts). Anchoring it
   absolutely contributes ZERO height to the layout flow; keeping it to one
   line (~15px) lets it fit inside the bottom page margin on every handout
   (validated across all 53 — no overflow, no off-page clipping). */
.qr-mini__url {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.8mm;
  white-space: nowrap;
  font-size: 6pt;
  font-weight: var(--weight-regular);
  color: var(--color-slate);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  text-align: right;
}

.qr-mini__url::before {
  content: "QR 대신 입력 → ";
  color: var(--color-slate);
}

/* --------------------------------------------------------------------------
   CONTENT COMPONENTS — building blocks for body sections
   -------------------------------------------------------------------------- */

/* Section heading */
.section-heading {
  font-size: 12pt;
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  letter-spacing: var(--tracking-snug);
  margin-bottom: 2mm;
  padding-left: 3mm;
  border-left: 3px solid var(--color-steel);
}

/* AI-generated visual block
   Use with OpenAI-generated PNG/WebP assets in shared/assets/generated/.
   Keep medical labels in HTML, not baked into the image. */
.ai-visual {
  position: relative;
  overflow: hidden;
  min-height: 38mm;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #F8FAFC 0%, #EEF6FB 100%);
}

.ai-visual__image {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
}

.ai-visual--hero {
  height: 50mm;
}

.ai-visual--portrait {
  min-height: 70mm;
}

.ai-visual--compact {
  height: 45mm;
  min-height: 0;
}

.ai-visual--contain .ai-visual__image {
  object-fit: contain;
  padding: 3mm;
}

.ai-visual__caption {
  position: absolute;
  left: 4mm;
  bottom: 4mm;
  max-width: calc(100% - 8mm);
  padding: 1.5mm 2.5mm;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 2mm;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-navy);
  font-size: 8pt;
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
}

.ai-visual__pin {
  position: absolute;
  max-width: 34mm;
  padding: 1mm 2mm;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.93);
  color: var(--color-ink);
  font-size: 7.5pt;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  box-shadow: var(--shadow-soft);
}

.ai-visual__pin::before {
  content: "";
  display: inline-block;
  width: 1.6mm;
  height: 1.6mm;
  margin-right: 1mm;
  border-radius: 50%;
  background: var(--color-steel);
  vertical-align: -0.2mm;
}

/* Card (used for grouped info — instructions, warnings, summaries) */
.card {
  background: var(--color-canvas-warm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4mm 5mm;
}

.card--accent {
  background: var(--color-cream);
  border-color: var(--color-cream-deep);
}

.card--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
  border-left-width: 3px;
}

.card--navy {
  background: var(--color-navy);
  color: var(--color-white-95);
  border: none;
}

.card--navy .card-label,
.card--navy .card-title {
  color: var(--color-white-95);
}

/* Card label — matches deck signature label pattern
   (.contact-card__label, .qr-block__label, .pattern-split__metric-label) */
.card-label {
  font-size: 8pt;                            /* ≈ --text-micro 11px @ A4 scale */
  font-weight: var(--weight-semibold);
  color: var(--color-slate);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: 2mm;
}

.card-label--warning { color: var(--color-warning); }
.card-label--navy    { color: var(--color-navy); }
.card-label--steel   { color: var(--color-steel); }

/* Card body list — used for bullet lists inside cards */
.card-list {
  list-style: none;
  font-size: 9pt;
  line-height: 1.6;
}

/* Numbered checklist (for handouts) */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 2.5mm;
}

.checklist__item {
  display: grid;
  grid-template-columns: 6mm 1fr;
  gap: 3mm;
  align-items: start;
}

.checklist__num {
  width: 6mm;
  height: 6mm;
  background: var(--color-navy);
  color: var(--color-canvas);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9pt;
  font-weight: var(--weight-bold);
}

.checklist__text {
  font-size: 10pt;
  line-height: var(--lh-snug);
}

.checklist__text strong {
  color: var(--color-navy);
  font-weight: var(--weight-semibold);
}

/* 2-column body grid (for lab reports — items left, summary right) */
.body-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6mm;
}

/* Stats row (lab values strip) */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 3mm;
}

.stat-cell {
  background: var(--color-canvas-warm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3mm;
  text-align: center;
}

.stat-cell__label {
  font-size: 7pt;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: 1.5mm;
}

.stat-cell__value {
  font-size: 16pt;
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  line-height: 1;
  letter-spacing: var(--tracking-snug);
}

.stat-cell__unit {
  font-size: 8pt;
  color: var(--color-slate);
  margin-top: 1mm;
}

.stat-cell--high { background: var(--color-danger-bg); border-color: #FECACA; }
.stat-cell--high .stat-cell__value { color: var(--color-danger); }
.stat-cell--low  { background: var(--color-warning-bg); border-color: #FED7AA; }
.stat-cell--low  .stat-cell__value { color: var(--color-warning); }
.stat-cell--ok   { background: #ECFDF5; border-color: #A7F3D0; }
.stat-cell--ok   .stat-cell__value { color: #047857; }

/* Lab item row (label / value / range / status) */
.lab-row {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 1fr auto;
  gap: 3mm;
  align-items: center;
  padding: 2mm 3mm;
  border-bottom: 1px dashed var(--color-border);
  font-size: 9pt;
}

.lab-row:last-child { border-bottom: none; }

.lab-row--header {
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 2mm;
  font-weight: var(--weight-semibold);
  color: var(--color-slate);
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.lab-row__label {
  color: var(--color-ink);
  font-weight: var(--weight-medium);
}

.lab-row__value {
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  text-align: right;
  font-feature-settings: "tnum";
}

.lab-row__range {
  color: var(--color-slate);
  font-size: 8pt;
  font-feature-settings: "tnum";
}

.lab-row__badge {
  font-size: 7pt;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  padding: 1mm 2mm;
  border-radius: 2mm;
  background: #ECFDF5;
  color: #047857;
}

.lab-row__badge--high { background: var(--color-danger-bg); color: var(--color-danger); }
.lab-row__badge--low  { background: var(--color-warning-bg); color: var(--color-warning); }

/* Disclaimer line (small print at very bottom of footer) */
.disclaimer {
  font-size: 7pt;
  color: var(--color-slate);
  font-style: italic;
  margin-top: 1mm;
}

/* --------------------------------------------------------------------------
   TREND CHART — longitudinal lab value chart (e.g. FIB-4, HbA1c over time)
   Inline SVG is generated by the author; these classes frame it and give a
   consistent legend. Risk-zone bands reuse the semantic surface tokens
   (ok / warning / danger) so no new colors are introduced.
   -------------------------------------------------------------------------- */
.trend-chart {
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3mm 4mm 2mm;
}
.trend-chart svg {
  width: 100%;
  height: auto;
  display: block;
}
.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4mm;
  margin-top: 2mm;
  padding-left: 1mm;
}
.trend-legend__item {
  display: flex;
  align-items: center;
  gap: 1.5mm;
  font-size: 8pt;
  color: var(--color-slate);
}
.trend-legend__swatch {
  width: 3.5mm;
  height: 2.2mm;
  border-radius: 1mm;
  flex: none;
}
.trend-legend__swatch--ok      { background: #ECFDF5; border: 1px solid #A7F3D0; }
.trend-legend__swatch--mid     { background: var(--color-warning-bg); border: 1px solid #FED7AA; }
.trend-legend__swatch--high    { background: var(--color-danger-bg); border: 1px solid #FECACA; }
.trend-legend__swatch--line    { background: var(--color-navy); height: 1mm; }


/* Mobile: 각 HTML <head> 의 <meta name="viewport" content="width=794"> 가 폰의
   레이아웃 뷰포트를 794px 로 고정하고, 브라우저가 화면 폭에 맞춰 통째로 축소한다.
   → 아래 화면 셸의 배율이 그만큼 상쇄되므로 **폰에서는 17px 하한이 보장되지 않는다**.
   HTML 72개는 이번 라운드 불가침이고 지원 프로파일에도 폰이 없어 그대로 둔다
   (고치려면 meta 를 width=device-width 로 바꿔야 한다 — 별건).
   데스크톱 브라우저는 meta viewport 를 무시하므로 진료실 화면에는 영향이 없다. */

/* --------------------------------------------------------------------------
   SCREEN SHELL — 진료실 모니터에서 환자와 같이 보는 렌더 (인쇄와 분리)
   --------------------------------------------------------------------------
   [2026-08-08] 주 용도가 인쇄 → **화면**으로 바뀌었다(사용자 결정 2026-08-07).

   종전(2026-07-17~) 규칙은 A4 한 장을 한 화면에 우겨넣으려고 .page 를 zoom
   0.65~0.9 로 **축소**했다. 그 결과 1366×768 에서 본문이 실효 7.8px — 환자와
   같이 볼 수가 없었다. 이제 화면에서는 A4 상자를 버리고 **반응형 흐름 문서**로
   렌더한다:
     · 폭 = 뷰포트에 맞추고 A4 폭(210mm)에서 멈춘다  → 가로 스크롤 없음
     · 높이 = 내용만큼 자란다                        → 세로 스크롤 허용(사용자 결정)
     · 좁아지면 카드·그리드가 한 칼럼으로 접힌다
   내용은 한 글자도 줄이지 않는다 — 화면과 인쇄가 같은 문장을 보여준다.

   ⚠️ 왜 font-size 재선언이 아니라 zoom 인가 (이 선택을 되돌리기 전에 읽어라)
   핸드아웃 72개는 각자 <style> 블록에서 **자기만의 클래스**로 크기를 정한다
   (.eff-sub 6.3pt · .br-name span 6.2pt · .matrix-cell-tag 5.8pt · .tl__when 7.6pt …).
   그 블록은 이 파일보다 뒤에 실리고 선택자도 더 강하다. HTML 72개는 불가침이므로
   이 파일에서 클래스명을 짚어 clamp() 로 갈아끼우는 방식은 **그 규칙들에 닿지
   못한다**. zoom 은 선택자를 몰라도 하위 전체의 실효 크기를 곱으로 올리고,
   실효크기 측정기(_validate_layout.SCREEN_FONT_JS)가 재는 값이 정확히 그 곱이다
   → 어떤 핸드아웃에서도 하한 17px 을 보장할 수 있는 유일한 지렛대다.
   transform:scale 과 달리 zoom 은 레이아웃 폭도 함께 줄이므로 가로 넘침을 안 만든다.
   (실측 2026-08-08 Chromium 133: zoom 은 calc()·var() 는 받지만 **vw 단위는 무시**
   한다 → clamp(…, 100vw/794, …) 불가. 그래서 뷰포트 반응은 아래 티어로 구현한다.)

   일부 HTML의 뒤쪽 <style>에 .page { zoom:.65/.72/.8 }가 남아 있다.
   같은 특이도에서 문서 뒤쪽 선언이 이기는 것을 막기 위해 화면 셸 zoom만
   !important 로 고정한다. 다른 속성이나 인쇄 규칙에는 !important를 확장하지 않는다.

   PRINT 무영향: 이 절 전체가 @media screen 안에 있다. @page A4 210×297mm · 9pt
   밀도 · 좌표계 전부 그대로다(핸드아웃 72개 인쇄 렌더 기하 스냅샷 before/after
   동일 확인 — 요소 9,746개 기하·타이포 무변화).
   -------------------------------------------------------------------------- */

@media screen {
  /* ── 지원 프로파일 상수 ── 실측이 오면 **여기만** 고치면 된다 ────────────────
       (계획서 P0-a 실측 전 가정값 · 사용자 답 2026-08-07)
         clinic-primary     2560×1440   4K 32" 듀얼 @150% 가정
         clinic-direct-min  1366×768    노트북·서브 모니터
         clinic-notion-min   900×700    노션 임베드 본문 폭 가정

       --screen-zoom 하한의 근거: 전 72개 중 이 파일이 이름을 짚을 수 없는(핸드아웃
       고유 클래스) 최소 선언값이 5.8pt = 7.73px 다. 7.73 × 2.4 = 18.6px ≥ 17px.
       파일럿 6건 실측 최악값은 19.2px(여유 2.2px).

       ⚠️ 지원 프로파일이 실측되면 여기의 토큰만 수정한다. --screen-fold-max 1920px 는
          A4 논리 폭 794 × 2.4 ≈ 1906px 에 여유를 둔 값이다. */
  @property --ccs-wide-k {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
  }
  @property --ccs-fold-k {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
  }
  :root {
    --screen-min-text: 17px;     /* 게이트 하한(문서용) — gate/verify_screen_shell.py */
    --screen-zoom: 2.4;          /* 기본 배율 = 읽기 하한을 보장하는 값 */
    --screen-measure: 210mm;     /* 한 칼럼 최대 폭 — A4 폭에서 멈춘다 */
    --screen-tier-wide: 2200px;  /* 이 위 = 큰 진료실 모니터 → 더 키운다 */
    --screen-fold-max: 1920px;   /* 이 아래 = 그리드를 한 칼럼으로 접는다 */
    --ccs-wide-k: clamp(
      0px,
      (100vw - var(--screen-tier-wide)) * 9999,
      1px
    );
    --ccs-fold-k: clamp(
      0px,
      (var(--screen-fold-max) - 100vw) * 9999,
      1px
    );
  }

  body { display: block; min-height: 0; }

  /* A4 상자 해제 — 고정 폭·고정 높이·overflow:hidden 은 종이에서만 의미가 있다 */
  .page {
    zoom: var(--screen-zoom) !important;
    display: block;              /* grid-template-rows(A4 좌표계) 해제 */
    width: auto;
    max-width: var(--screen-measure);
    margin: 0 auto;
    min-height: 0;
    max-height: none;
    overflow: visible;           /* 넘치면 잘라내지 말고 흐르게 */
    padding: 6mm 5mm 7mm;
  }
  .page.sheet {
    width: auto;
    max-width: var(--screen-measure);
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .page:has(.page__body--visual-strip) { padding: 6mm 5mm 7mm; }
  .page > * + * { margin-top: 5mm; }

  /* 본문도 정적 흐름으로 — 남는 세로를 나눠 갖던 flex 분배는 고정 높이 전제였다 */
  .page__body { display: block; }
  .page__body > section + section { margin-top: 5mm; }

  /* 그리드/플렉스 자식이 min-content 아래로 못 줄어들어 생기는 가로 넘침 차단 */
  .page :where(*) { min-width: 0; }

  /* 종이 폭(A4 182mm 본문)을 전제로 짜인 공용 그리드를 화면 폭에 맞춘다 */
  .body-2col       { grid-template-columns: 1fr; }
  .stats-row       { grid-template-columns: repeat(auto-fit, minmax(min(100%, 34mm), 1fr)); }
  .lab-row         { grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, 1fr) auto; }
  .checklist__item { grid-template-columns: 6mm minmax(0, 1fr); }

  /* A4 아래 여백에 한 줄로 숨겨두던 QR 대체 URL — 화면에선 흐름으로 되돌린다.
     종이에선 footer 높이를 안 늘리려고 absolute 였다(19/53 넘침 회귀). 화면은
     세로가 무제한이라 그 제약이 없다. */
  .qr-mini__url {
    position: static;
    white-space: normal;
    text-align: left;
    margin-top: 1.2mm;
  }

  /* 개별 핸드아웃이 A4 한 장에 밀어넣으려고 줄여둔 **공용** 미세활자를 화면에서는
     원래 크기로 되돌린다(3-클래스 특정도라 페이지 <style> 보다 강하다). 지면 절약
     목적의 축소였으므로 스크롤되는 화면에서는 근거가 없다. */
  .page .disclaimer               { font-size: 7pt; }
  .page .qr-mini                  { font-size: 7pt; }
  .page .qr-mini .qr-mini__url    { font-size: 6pt; }
  .page .qr-mini .qr-mini__label  { font-size: 7pt; }

  /* 임상 핵심은 본문보다 크게 — 화면에서 먼저 눈에 들어와야 한다.
     .card--warning 이 전 72개에서 '즉시 119 · 바로 알려주세요 · 즉시 연락 사유'
     카드다(52곳). li 까지 짚는 건 개별 핸드아웃이 .card-list li 로 덮어쓰기
     때문(특정도 0,0,3,1 > 0,0,2,1). 나머지 위계는 zoom 이 배율로 그대로 보존한다. */
  .page .card--warning .card-list,
  .page .card--warning .card-list li,
  .page .card--warning .checklist__text { font-size: 10.5pt; }

  .page .egd-fasting-row .checklist__text,
  .page .body-2col .card--accent .card-list,
  .page .body-2col .card--accent .card-list li,
  .page .card--navy .card-list,
  .page .card--navy .card-list li,
  .page .takeaway,
  .page .takeaway *,
  .page .follow-grid,
  .page .follow-grid * {
    font-size: 11pt !important;
  }

  .page .page__footer {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }

  /* 부모 min-height 는 border-box 값인데 이미지가 그대로 물려받으면 콘텐츠 박스보다
     테두리 두께(2px)만큼 커져 '잘린 텍스트'로 잡힌다 → 콘텐츠 박스 기준으로 */
  .ai-visual__image { min-height: 100%; }

/* 좁은 화면 — 논리 폭(뷰포트÷zoom)이 A4 794px 의 3/4 아래로 내려간다. 핸드아웃마다
   제각각인 고유 그리드(예: h-pylori 의 .wstat{18mm 1fr}, .ss-key, .mg-rank 처럼 이
   파일이 이름을 모르는 것들)까지 한 칼럼으로 접어 가로 스크롤을 원천 차단한다.
   1920px 근거: A4 논리 폭 794 × 2.4 ≈ 1906 이므로 1920 이하에서 접는다.
   --screen-fold-max 와 함께 고칠 것. */
@container style(--ccs-fold-k: 1px) {
  .page > .hero {
    flex-direction: column !important;
  }

  .page__body :where(div, section, ul, ol, dl, figure) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .page__body :where(.checklist__item) {
    grid-template-columns: 6mm minmax(0, 1fr) !important;
  }

  .page .hero-row,
  .page .blind-row,
  .page .mg-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .page .hero-chart,
  .page .blind-illust,
  .page .mg-hero__figure {
    width: 100% !important;
    max-width: 100% !important;
  }

  .page .ai-visual {
    max-width: 100% !important;
  }

  .page .mg-rank__mg {
    white-space: normal !important;
  }
}

@container style(--ccs-wide-k: 1px) {
  .page {
    zoom: calc(var(--screen-zoom) + 0.4) !important;
  }
}
}