/* ================================================================
   Print / PDF — same dark theme as the web, output as 16:9 slides
   (not a light print theme — produces the HTML as-is as a document)
   ================================================================ */
@media print {
  @page { size: 338mm 190mm; margin: 0; }

  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html { scroll-behavior: auto; }
  html, body { background: var(--bg) !important; }

  /* hide screen-only elements */
  .nav, .lab-toolbar, .file-banner, video, .live-dot { display: none !important; }

  /* hero = cover, must fit one page (avoid overflow / orphan lines) */
  .hero {
    min-height: 0;
    padding: 44px 6vw 30px;
    page-break-after: always;
  }
  .hero .eyebrow { margin-bottom: 12px; font-size: 11.5px; }
  .hero h1 { font-size: 54px; margin-bottom: 16px; }
  .hero .lead { font-size: 14.5px; margin-bottom: 26px; max-width: 720px; }
  .hero .stat-row { margin-bottom: 24px; gap: 10px; }
  .stat { padding: 12px 20px; min-width: 132px; }
  .stat .num { font-size: 24px; }
  .stat .num span + span { font-size: 14px; }
  .cta-row .btn { padding: 10px 20px; font-size: 13px; }
  .hero-note { margin-top: 18px; font-size: 11.5px; }
  .hero .cta-row .btn, .hero .txt-link { pointer-events: none; }

  /* keep headers/subtitles from being stranded at page bottom — flow with following content */
  .sec-head, .sub-title, .proj-head, .cb-head, h2, h3, h4 {
    break-after: avoid-page; page-break-after: avoid;
  }
  p, li, figcaption { orphans: 3; widows: 3; }

  /* ── global compaction to fit one page ── */
  section { padding: 24px 5vw 32px; }
  .sec-head { margin-bottom: 20px; }
  .sec-head h2 { font-size: 25px; }
  .sec-head p { font-size: 12.5px; }
  .sec-head .tag { font-size: 10px; padding: 4px 11px; margin-bottom: 10px; }
  .feature-cols { gap: 10px; margin: 14px 0; }
  .feature { padding: 13px 15px; }
  .feature h4 { font-size: 13px; }
  .feature p { font-size: 11.5px; }
  .sub-title { margin: 16px 0 10px; font-size: 14px; }
  .proj-desc { font-size: 12.5px; margin-bottom: 14px; }
  .chip { font-size: 10.5px; padding: 3px 10px; }
  .code-wrap pre { font-size: 10.5px; padding: 12px 14px; line-height: 1.55; }

  /* credit block — flatten frames to fit the page */
  .credit-block { padding: 14px 16px; margin-bottom: 10px; }
  .credit-block .game { font-size: 18px; }
  .cb-head { margin-bottom: 8px; }
  #ref .sec-head { margin-bottom: 14px; }
  .credit-strip, .credit-gallery, .credit-grid2, .credit-stack { gap: 4px; margin-bottom: 4px; }
  /* fix frame height in px (avoid aspect-inheritance issues) */
  .credit-strip .credit-frame img { height: 170px !important; aspect-ratio: auto !important; }
  .credit-gallery .credit-frame img { height: 100px !important; aspect-ratio: auto !important; }
  .credit-gallery.four { grid-template-columns: repeat(4, 1fr) !important; }
  .credit-gallery.four .credit-frame img { height: 115px !important; }
  .credit-grid2 .credit-frame img { height: 115px !important; aspect-ratio: auto !important; }
  .credit-stack .credit-frame img { height: 95px !important; aspect-ratio: auto !important; }
  .credit-frame.wide img { height: 430px !important; aspect-ratio: auto !important; }
  /* motion frames: hide video in print/PDF and show the static poster (height rule above still applies) */
  .credit-frame video { display: none !important; }
  .credit-frame .motion-poster { display: block !important; }
  .motion-badge { display: none !important; }
  /* motion-only row: 3 key columns in print */
  .credit-gallery.motion-row { grid-template-columns: repeat(3, 1fr) !important; }
  .credit-gallery.motion-row .credit-frame img { height: 126px !important; aspect-ratio: auto !important; }
  .motion-row-title { font-size: 11px !important; margin: 2px 0 5px !important; color: #aeb6c8 !important; }
  /* keep bullets with preceding content so they don’t orphan onto the next page */
  #ref .credit-block > ul { break-before: avoid-page; page-break-before: avoid; }
  /* each credit block starts on a new page — avoid splitting at the tail of the previous page */
  #ref .credit-block + .credit-block { break-before: page; page-break-before: always; }
  #ref .ref-grid { break-before: page; page-break-before: always; }
  .credit-block ul, .ref-card ul, .credit-block li, .ref-card li { break-inside: avoid; }
  .credit-block li, .ref-card li { font-size: 11.5px; padding: 3px 0 3px 18px; }
  .yt-row .btn { padding: 6px 12px; font-size: 11px; }
  /* SK2 HUD wide + bullets start together on the next page (avoid orphan bullets) */
  .credit-frame.wide { break-before: page; }
  .credit-frame.wide img { aspect-ratio: 21/8; }

  /* VFX Lab / BI card grid — 6 columns + flat canvas to fit one page */
  .fx-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 8px; }
  .fx-card canvas { aspect-ratio: 1.25 !important; }
  .sec-head p { font-size: 12px; }
  .shot-strip img { aspect-ratio: 16/9; }
  .shot-strip figcaption { font-size: 10px; padding: 6px 9px; }
  #lab { break-inside: avoid-page; }
  #lab .fx-grid, #lab .badge-legend { break-before: avoid-page; }
  .fx-meta { padding: 7px 9px 9px; }
  .fx-name { font-size: 10.5px; }
  .fx-sub { font-size: 9px; }
  .badge-legend { margin: -4px 0 14px; font-size: 10.5px; gap: 6px 12px; }

  /* pipeline — header+steps+features+v3 shots on one page, code on the next */
  .pipe-node { padding: 12px; margin-right: 26px; }
  .pipe-node p { font-size: 10.5px; }
  #pipeline .shot-strip img { aspect-ratio: 16/6 !important; }
  #pipeline .shot-strip figcaption { font-size: 10px; padding: 6px 9px; }
  #pipeline .code-cols { break-before: page; }
  #pipeline .sub-title, #pipeline .shot-strip { break-before: avoid-page; }
  #pipeline .pipe-node h5 { font-size: 12px; }
  #pipeline .pipe-node p { font-size: 10px; }
  #pipeline .feature { padding: 10px 12px; }
  #pipeline .feature p { font-size: 10.5px; }
  #pipeline .sec-head { margin-bottom: 14px; }
  #pipeline .sub-title { margin: 12px 0 8px; }
  #pipeline .shot-strip { grid-template-columns: repeat(2, 1fr) !important; }
  #pipeline .shot-strip img { height: 150px !important; aspect-ratio: auto !important; object-fit: cover; }

  /* BI gallery page — in-game + UI + atlas on one page */
  #bi .sub-title { margin: 10px 0 6px; }
  #bi .fx-card canvas { aspect-ratio: 1.35 !important; }
  #bi .atlas-item img { height: 110px !important; aspect-ratio: auto !important; }
  #bi .atlas-item .cap { font-size: 9px; padding: 5px 8px; }

  /* page-grouping wrapper — keep together / start new page */
  .pdf-group { break-inside: avoid-page; page-break-inside: avoid; }
  .pdf-newpage { break-before: page; page-break-before: always; }
  .atlas-row { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .atlas-item img { aspect-ratio: 16/9; }
  .atlas-item .cap { font-size: 10px; padding: 7px 10px; }

  /* WoolSaga — remove video figures entirely in print (avoid empty boxes) */
  .shot-strip figure:has(video) { display: none !important; }

  /* portrait screenshot strip — 4 shots in one row */
  .phone-strip { grid-template-columns: repeat(4, 200px); gap: 10px; }
  .phone-strip img { aspect-ratio: 9/15.5; }
  .phone-strip figcaption { font-size: 10px; padding: 6px 9px; }

  /* demo cards — header + 3 cards on one page */
  .demo-grid { gap: 12px; }
  .demo-card .shot { aspect-ratio: 16/8; }
  .demo-card .shot.portrait { aspect-ratio: 16/9; }
  .demo-card .body { padding: 12px 14px 14px; gap: 6px; }
  .demo-card p { font-size: 11.5px; }
  .demo-card h4 { font-size: 14px; }

  /* K2 · Dungeon Survivors · Grid Rush — header through in-game on one page */
  #k2 .phone-strip img { height: 220px !important; aspect-ratio: auto !important; }
  #vsl .phone-strip img { height: 260px !important; aspect-ratio: auto !important; }
  #more .phone-strip img { height: 195px !important; aspect-ratio: auto !important; }
  #k2 .feature, #more .feature { padding: 10px 12px; }
  #k2 .feature p, #vsl .feature p, #more .feature p { font-size: 10.5px; }
  #k2 .proj-desc, #vsl .proj-desc, #more .proj-desc { font-size: 12px; margin-bottom: 10px; }
  #k2 .sub-title, #vsl .sub-title, #more .sub-title { margin: 10px 0 6px; }
  #more .cta-row { margin-top: 10px !important; }
  #more .cta-row .btn { padding: 8px 16px; font-size: 12px; }

  /* no PDF-download button needed in the PDF */
  .pdf-dl { display: none !important; }
  footer { padding: 50px 6vw 40px; }

  /* section = start on a new page (web layout flows as-is) */
  section { page-break-before: always; padding: 36px 6vw 44px; }
  .sec-head { margin-bottom: 30px; }
  footer { page-break-before: always; }

  /* force reveal animations visible */
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* keep cards from being cut at page boundaries */
  .fx-card, .pillar, .feature, .demo-card, .ref-card, .atlas-item,
  .code-wrap, .pipe-node, .credit-frame, .credit-strip,
  .phone-strip figure, .shot-strip figure, .stat, .badge-legend,
  .sec-head, .proj-head, .sub-title, .timing-chart, .yt-row {
    break-inside: avoid; page-break-inside: avoid;
  }

  /* SK2 gallery — 6 shots in one row in print */
  .credit-gallery { grid-template-columns: repeat(6, 1fr) !important; }

  /* 호버 전용 효과 제거 */
  .fx-card:hover, .demo-card:hover { transform: none; box-shadow: none; }

  /* append run instructions to demo buttons */
  .demo-card .btn::after, .cta-row .btn.gold::after {
    content: " (open via START_PORTFOLIO.bat / hosted URL)";
    font-size: 10px; font-weight: 400; opacity: .75;
  }
  .hero .cta-row .btn::after { content: "" !important; }
}