/* 인쇄본 보기 (ADR-0017 decision 10): magazine/print.html and magazine/print-viewer.js.
   Colours are tokens only (one light palette); PDF.js's own sheet (pdf_viewer.css) comes
   later, when the module loads it, so the page's layout never leans on it.

   Without JS only the cover and the PDF's link show. With JS (html.js, set before the first
   paint) the toolbar, the stage, the status line and the page strip have their sizes at the
   first paint: nothing moves when PDF.js arrives. The stage's size is this sheet's alone
   (an aspect ratio under a height cap), so drawing pages never changes the page's layout.

   The toolbar and the stage share the screen under the floating header (.print-view, a
   column that gives the stage what the toolbar leaves, v0.7.0), and the module scrolls the
   viewer to the top of the screen on open: a whole page (a phone) or spread (a wide
   screen) is on the first screen. The small viewport height (svh: the browser's bars
   shown) keeps it whole however the bars move, and never resizes the stage while the page
   scrolls.

   Two pages side by side (a spread, like a printed book) once the viewer is at least
   56.25em wide: the container query below sets --print-spread, which the module reads. A
   browser without container queries shows one page at a time. */

/* PDF.js's sheet asks for "light dark" on :root; this page stays light (ADR-0016 d.10).
   html:root outranks its :root whichever comes last. */
html:root{color-scheme:light}

.print{container:print/inline-size;font-family:var(--sans)}
.print-formats{margin-bottom:20px}
.print p{margin:0}

/* ── Without JS: the cover and the link ─────────────────────────────────────── */
html:not(.js) :is(.print-bar,.print-scroll,.print-status,.print-text,.print-thumbs){display:none}
/* The screen less the header, the scroll margin (16px, html scroll-padding-top) and 8px
   under the stage; never less than the toolbar and the stage's smallest. */
html.js .print-view{display:flex;flex-direction:column;max-height:max(calc(100vh - var(--hh,82px) - 24px),26rem);max-height:max(calc(100svh - var(--hh,82px) - env(safe-area-inset-top,0px) - 24px),26rem)}
.print-cover{width:min(100%,22.5rem)}
.print-cover picture{display:block}
.print-cover img{display:block;width:100%;height:auto;border:1px solid var(--line-strong);background:var(--surface)}
.print-download{margin-top:16px}
.print-download a{display:inline-flex;align-items:center;min-height:var(--target-min);font-weight:600}
.print .file-info{color:var(--muted);font-variant-numeric:tabular-nums}
html.js .print-download{display:none} /* the toolbar's 내려받기 */

/* ── Toolbar (APG toolbar: one tab stop, arrow keys inside) ──────────────────── */
/* Compact (one row on a wide screen), its words at 15px or more (v0.7.0 render check). */
.print-bar{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:8px}
.print-bar__nav,.print-bar__tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.print-bar .btn{gap:6px;padding-inline:12px;font-size:.9375rem}
.print-bar .ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.print-goto{display:inline-flex;align-items:center;gap:6px;font-size:.9375rem;font-variant-numeric:tabular-nums}
/* 1rem: iOS zooms into a field whose text is smaller. */
.print-goto input[type=text]{width:4.6em;min-height:var(--target-min);padding:6px 8px;border-radius:10px;font-size:1rem;text-align:center}
.print-goto__total{display:inline-block;min-width:4.5em;white-space:nowrap}

/* ── Stage: the cover while loading, then PDF.js's pages ─────────────────────── */
/* A page's (or a spread's) shape, shrunk to what .print-view leaves under the toolbar. */
html.js .print-stage{--print-spread:none;flex:0 1 auto;position:relative;width:100%;aspect-ratio:1/1.4142;max-height:56rem;min-height:18rem;border:1px solid var(--line-strong);border-radius:12px;background:var(--sunk);overflow:hidden}
@supports not (aspect-ratio:1/1){html.js .print-stage{height:70vh}}
@container print (min-width:56.25em){
  html.js .print-stage{--print-spread:even;aspect-ratio:2/1.4142}
}
html.js .print-cover{position:absolute;inset:0;z-index:1;width:auto;display:grid;place-items:center;padding:clamp(12px,3%,32px);background:var(--sunk)}
html.js .print-cover>*{height:100%;max-width:100%;min-height:0}
html.js .print-cover .cover{width:auto;aspect-ratio:3/4}
html.js .print-cover img{width:auto;height:100%;max-width:100%;object-fit:contain}
.print[data-state="ready"] .print-cover{display:none}
.print[data-state="error"] .print-scroll{visibility:hidden}
/* PDF.js needs its container absolutely positioned. A zoomed page scrolls inside it (a
   two-dimensional layout, WCAG 1.4.10's exception); the page itself never scrolls sideways. */
.print-scroll{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain}
.print-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;box-shadow:none;border-radius:12px}
/* The spread (or the page) sits in the middle of the stage; auto margins centre it and give
   way to 0 when it is larger, so a zoomed page stays reachable from its top left. Pages of
   a spread meet at the spine, as in a printed book. */
.print-scroll .pdfViewer{display:flex;flex-direction:column;min-height:100%}
.print-scroll .pdfViewer>.spread{margin-block:auto}
.print-scroll .pdfViewer.removePageBorders .page{margin:auto}
.print-scroll .pdfViewer.removePageBorders .spread .page{margin:0}
.print-scroll .pdfViewer .page{box-shadow:0 8px 24px -14px var(--shadow)}

/* Page turn: the new spread grows in from the edge the reader turns from, fading in
   (data-turn, set by the module on each turn). A scale below 1 never reaches past the
   stage, so no scroll bar flashes (a slide would widen the scroll box for its duration).
   None under reduced motion or 움직임 멈추기: the module sets nothing then, and these
   rules agree. */
@keyframes print-turn{from{opacity:.35;transform:scale(.96)}}
.print-scroll .pdfViewer[data-turn]{animation:print-turn var(--dur-panel) var(--ease-out)}
.print-scroll .pdfViewer[data-turn="next"]{transform-origin:100% 50%}
.print-scroll .pdfViewer[data-turn="prev"]{transform-origin:0 50%}
@media (prefers-reduced-motion:reduce){.print-scroll .pdfViewer[data-turn]{animation:none}}
:root[data-motion="off"] .print-scroll .pdfViewer[data-turn]{animation:none}

/* The status line keeps its line while empty (no shift when it speaks). */
.print-status{min-height:1.6em;margin-top:8px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.6;overflow-wrap:anywhere}

/* ── 글로 읽기: the text of the pages on show ───────────────────────────────── */
.print-text{max-width:var(--read-w);margin:16px auto 0;padding:16px clamp(16px,3vw,28px);border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.print-text__title{font-size:1.05rem;margin:0 0 8px}
ol.print-text__pages{list-style:none;margin:0;padding:0;display:grid;gap:18px;font-family:var(--read);font-size:1.02rem;line-height:1.9}
.print-text__pages li>p+p{margin-top:.8em}
.print .print-text__no{font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--muted);margin-bottom:4px}

/* ── Page strip: every page, the ones on show marked ─────────────────────────── */
.print-thumbs{margin-top:16px}
/* Sideways inside its own box; the padding keeps the focus ring clear of the clip. */
ol.print-thumbs__list{list-style:none;margin:0;padding:6px 6px 10px;position:relative;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-inline:contain}
.print-thumb{flex:none;width:5.5rem}
.print-thumb a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px;border-radius:8px;color:inherit;text-decoration:none}
.print-thumb__pic{display:block;width:100%;aspect-ratio:1/1.4142;border:1px solid var(--line-strong);background:var(--surface);overflow:hidden}
.print-thumb__pic :is(img,canvas){display:block;width:100%;height:100%;object-fit:contain}
.print-thumb__no{font-size:.88rem;font-variant-numeric:tabular-nums}
.print-thumb a[aria-current="page"]{background:var(--yellow-soft)}
.print-thumb a[aria-current="page"] .print-thumb__pic{border:2px solid var(--ink)}
.print-thumb a[aria-current="page"] .print-thumb__no{font-weight:700}
.print-thumb--placeholder{visibility:hidden}
@media (hover:hover) and (pointer:fine){.print-thumb a:not([aria-current]):hover .print-thumb__pic{border-color:var(--ink)}}

/* ── Full screen: the viewer alone, the stage takes the room left ────────────── */
.print:fullscreen{display:flex;flex-direction:column;padding:12px clamp(12px,3vw,24px);background:var(--bg);overflow:auto}
.print:fullscreen .print-view{flex:1 1 auto;max-height:none;min-height:0}
.print:fullscreen .print-stage{flex:1 1 auto;aspect-ratio:auto;max-height:none;min-height:0}
.print::backdrop{background:var(--bg)}

/* ── Phones: navigation on the first row, the tools on the second ────────────── */
@media (max-width:40em){
  /* The page gets the screen under the two toolbar rows, and a sideways swipe on it
     turns the page (print-viewer.js). */
  .print-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
  /* One page at a time here (no spread below 56.25em), so the field holds one number. The
     total gives way first (an ellipsis) if a long one does not fit at 320px. */
  .print-bar__nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px}
  .print-bar__nav .btn{padding-inline:8px}
  .print-goto{justify-content:center;gap:4px;min-width:0}
  .print-goto input[type=text]{width:3.4em}
  .print-goto__total{min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* Icon above the word (15px), the tools sharing the row equally at one height. A label
     breaks only between words ("전체 / 화면"), never inside one, so six tools still fit
     320px; one that cannot (the largest text size) starts another row rather than run out
     of its button. */
  .print-bar__tools{gap:3px;align-items:stretch}
  /* The page numbers under the strip's pictures and over 글로 읽기's pages: 15px or more
     on a phone (the site's floor, site.css). */
  .print-thumb__no,.print .print-text__no{font-size:.9375rem}
  .print-bar__tools>.btn{flex:1 1 var(--target-min);flex-direction:column;gap:1px;padding:4px 3px;border-radius:12px;line-height:1.2;word-break:keep-all;text-align:center}
  /* A tool is 44px wide at the least (its basis; a longer word keeps its own width). All six
     (full screen and 글로 읽기 both there) need 302px in a row. The toolbar's own width
     decides (the text size and the page's margins change it): below that they take two rows
     of three, on a grid, the same width and aligned. A browser without :has(… of …) or
     container queries wraps them as flex items. */
  .print-bar{container-type:inline-size}
  @container (max-width:19rem){
    .print-bar__tools:has(> :nth-child(6 of :not([hidden]))){display:grid;grid-template-columns:repeat(3,minmax(min-content,1fr))}
  }
}

/* Forced colours: the system draws the boundaries; PDF.js paints the pages in the system
   colours (pageColors in print-viewer.js). */
@media (forced-colors:active){
  html.js .print-stage,.print-cover img,.print-thumb__pic,.print-text{border:1px solid CanvasText}
  .print-thumb a[aria-current="page"] .print-thumb__pic{border:2px solid HighlightText}
  .print-scroll .pdfViewer .page{box-shadow:none}
}