/* ==========================================================================
   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 fit-to-width is handled via <meta name="viewport" content="width=794">
   in each HTML head. Mobile browsers auto-zoom out, pinch-zoom remains active.
   No CSS zoom hack — kept simple and standards-compliant. */

/* --------------------------------------------------------------------------
   DESKTOP SCREEN FIT — one A4 page fits one screen
   --------------------------------------------------------------------------
   The page is a fixed A4 box (210×297mm ≈ 794×1123px). On desktop we scale it
   to use the window well — but the scale MUST be bounded by BOTH axes.

   [2026-07-17] 이전 규칙은 **너비만** 보고 zoom 1.3~2.05 을 걸었다. A4 는 세로가
   긴데(1123px) 높이를 안 봐서 실측상 **모든 데스크톱 크기에서 아래가 잘렸다**:
       1440×900  zoom1.5 → 1191×1684  (창 높이 900 → 784px 잘림)
       1680×1050 zoom1.75→ 1389×1964
       2560×1440 zoom2.05→ 1627×2301
   주석은 "no overflow" 라고 주장했으나 그건 **가로** 오버플로우만 본 것이었다.
   CI 레이아웃 검증기는 794px 폭으로만 렌더 → 1120px 브레이크포인트에 **영원히
   도달하지 않아** 이 버그를 구조적으로 못 잡는 사각지대였다.

   이제 zoom 티어를 **높이 조건과 함께** 건다 → A4 한 장이 항상 한 화면에 들어온다.

   SAFE BY CONSTRUCTION:
   • @media screen only — print/PDF stays exact A4 (210×297mm), untouched.
   • **모든 티어에 min-width:1120px 가드** — 검증기(794px)는 어떤 티어에도 매칭되지
     않아 zoom:1(기본)로 남는다 → CI 레이아웃 게이트 무영향(실측 확인).
   • `zoom` 은 레거시 속성이라 min()/calc() 를 받지 못한다(실측: 무시됨). 그래서
     이산 티어로 구현한다.
   • Mobile 은 viewport width=794 라 1120px 에 도달하지 않아 무영향(축소 fit 유지). */
/* 짧은 창(노트북) — A4 세로가 안 들어가므로 축소해서 맞춘다 */
@media screen and (min-width: 1120px) and (max-height: 1149px) { .page { zoom: 0.9;  } }  /* → 1010px 높이 */
@media screen and (min-width: 1120px) and (max-height: 1035px) { .page { zoom: 0.8;  } }  /* → 898px  */
@media screen and (min-width: 1120px) and (max-height: 925px)  { .page { zoom: 0.72; } }  /* → 808px  (맥북 13-14") */
@media screen and (min-width: 1120px) and (max-height: 835px)  { .page { zoom: 0.65; } }  /* → 730px  */
/* 충분히 큰 화면 — 확대하되 세로가 들어갈 때만 */
@media screen and (min-width: 1120px) and (min-height: 1150px) { .page { zoom: 1;    } }  /* → 1123px */
@media screen and (min-width: 1320px) and (min-height: 1690px) { .page { zoom: 1.5;  } }  /* → 1684px */
@media screen and (min-width: 1560px) and (min-height: 1970px) { .page { zoom: 1.75; } }  /* → 1964px */
@media screen and (min-width: 1840px) and (min-height: 2310px) { .page { zoom: 2.05; } }  /* → 2301px */