/* PDF 보기 (ADR-0015 decisions 5–6): the viewer (media/_pdf_viewer.html) and the page
   images shown in the post (media/_pdf_pages.html). Loaded by {% pdf_viewer_css %}.
   PDF.js's own sheet (vendor/pdfjs/…/web/pdf_viewer.css) arrives only when a reader opens
   a viewer, so nothing here leans on it. Colours are tokens only; nothing moves. */

/* The outer margin weighs nothing (:where): the page that holds the figures sets their
   spacing (attachments.css .attachments gap, magazine.css .issue-pdfs). */
:where(.pdf-viewer,.pdf-pages){margin:1.6em 0}
.pdf-viewer,.pdf-pages{font-family:var(--sans);font-size:1rem;font-weight:400;line-height:1.6}
.pdf-viewer p,.pdf-pages p{margin:0}
.pdf-viewer__caption,.pdf-pages__caption{font-weight:600;margin-bottom:10px;overflow-wrap:anywhere}
.pdf-viewer .file-info,.pdf-pages .file-info{font-variant-numeric:tabular-nums;color:var(--muted)}
.pdf-viewer .pdf-viewer__download,.pdf-pages .pdf-pages__download{margin-top:10px}
.pdf-viewer__download a,.pdf-pages__download a{display:inline-flex;align-items:center;min-height:var(--target-min);font-weight:600}

/* ── Viewer ──────────────────────────────────────────────────────────────── */
/* Without JS the facade (cover and "PDF 보기") is hidden: the title and the download line
   stay. With JS it holds one button row before the module shows the button (no shift);
   a browser that cannot run the module keeps that row empty, with the download below.
   The cover is at most 360px wide (media.pdfjs.PDF_POSTER_SIZES says the same). */
html:not(.js) .pdf-viewer [data-pdf-facade]{display:none}
.pdf-viewer__facade{position:relative;width:min(100%,360px);min-height:var(--target-min)}
.pdf-viewer__facade[hidden]{display:none}
.pdf-viewer__facade picture{display:block}
.pdf-viewer__facade img{display:block;width:100%;height:auto;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface)}
/* With a cover the button sits on it, near the bottom (it is the cover's only action). A
   ring in the page colour keeps the pill apart from the page. */
.pdf-viewer__facade picture+[data-pdf-open]{position:absolute;inset-inline:0;bottom:16px;width:fit-content;max-width:calc(100% - 24px);margin-inline:auto;box-shadow:0 0 0 2px var(--bg),0 10px 24px -12px var(--shadow)}
.pdf-viewer__toolbar:not([hidden]){display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
/* After a failed opening the toolbar keeps its row, out of sight and out of reach: taking
   the row away would move the box below it (a layout shift after the reader's press). */
.pdf-viewer[data-state="error"] .pdf-viewer__toolbar{visibility:hidden}
/* The stage is an A4-shaped box that never grows past the window. It opens on a reader's
   own press, so its appearing is not a layout shift (CLS ignores shifts right after
   input), and it keeps its size afterwards: the status line is its top row (the page
   number, or the reason opening failed above "다시 시도"), and the frame below it holds
   PDF.js's container, which PDF.js needs absolutely positioned. */
.pdf-viewer__stage:not([hidden]){display:flex;flex-direction:column;position:relative;width:100%;aspect-ratio:1/1.4142;max-height:85vh;border:1px solid var(--line-strong);border-radius:12px;background:var(--sunk);overflow:hidden}
.pdf-viewer .pdf-viewer__status{flex:none;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface);font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pdf-viewer__frame{position:relative;flex:1 1 auto;min-height:0}
.pdf-viewer__frame[hidden]{display:none}
.pdf-viewer__scroll{position:absolute;inset:0;overflow:auto;scroll-behavior:auto;overscroll-behavior:contain}
.pdf-viewer__scroll:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;box-shadow:none}
.pdf-viewer__scroll .pdfViewer{padding:12px 0}
.pdf-viewer__scroll .pdfViewer .page{box-shadow:0 6px 20px -12px var(--shadow)}
.pdf-viewer__stage [data-pdf-retry]{align-self:flex-start;margin:12px}

/* ── Pages in the post ───────────────────────────────────────────────────── */
ol.pdf-pages__list,ol.pdf-pages__texts{list-style:none;margin:0;padding:0}
.pdf-pages__list{display:grid;gap:16px}
.pdf-pages__list picture{display:block}
.pdf-pages__list img{display:block;width:100%;height:auto;border:1px solid var(--line-strong);background:var(--surface)}
.pdf-pages__text{margin-top:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* A flex summary loses the browser's triangle, so it gets its own open/closed cue (as
   magazine.css .edition-help): "+" closed, "−" open. A glyph, not a colour, carries the
   state (forced colours keep it), and nothing moves. */
.pdf-pages__text summary{cursor:pointer;font-weight:600;min-height:var(--target-min);display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none}
.pdf-pages__text summary::-webkit-details-marker{display:none}
.pdf-pages__text summary::after{content:"+";content:"+" / "";flex:none;width:26px;height:26px;border-radius:50%;background:var(--sunk);border:1px solid var(--line);display:grid;place-items:center;font-weight:500;line-height:1}
.pdf-pages__text[open] summary::after{content:"\2212";content:"\2212" / "";background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.pdf-pages__texts{display:grid;gap:18px;padding-bottom:16px;font-family:var(--read);font-size:1.02rem;line-height:1.9}
.pdf-pages__texts li>p+p{margin-top:.8em}
.pdf-pages .pdf-pages__no{font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--muted);margin-bottom:4px}
.pdf-pages>.help{margin-top:12px}

/* Forced colours: the system draws the boundaries; PDF.js paints the page in the system
   colours (pageColors in pdf-viewer.js). */
@media (forced-colors:active){
  .pdf-viewer__stage:not([hidden]),.pdf-viewer__facade img,.pdf-pages__list img{border:1px solid CanvasText}
  .pdf-viewer .pdf-viewer__status{border-bottom-color:CanvasText}
  .pdf-pages__text,.pdf-pages__text summary::after{border-color:CanvasText}
  .pdf-viewer__facade picture+[data-pdf-open]{box-shadow:none}
}