/* ══════════════════════════════════════════════════════════════
   Museum of the Bible Korea — Design System
   museumofthebiblekorea.com
   ══════════════════════════════════════════════════════════════ */

/* ── 0. Old Hangul (옛한글) subset — self-hosted, scoped to .verse-kr only.
   The Google-hosted 'Noto Serif KR' webfont strips the Hangul Jamo block
   (U+1100–11FF), so archaic combining jamo (e.g. arae-a, ᄯ) render as tofu
   boxes in Google's subset. This is a ~39KB subset of the full Noto Serif KR
   OTF, cut down to exactly the characters used in .verse-kr quotes across
   the site (raw jamo + the modern Hangul/Hanja/punctuation they appear
   alongside) — not a general-purpose webfont. See assets/fonts/. ── */
@font-face {
  font-family: 'MOTB Verse KR Old Hangul';
  src: url('assets/fonts/verse-kr-oldhangul.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+1102, U+1109, U+110C, U+1112, U+112F, U+1165-1166, U+119E, U+11A8, U+11AF, U+2026, U+4E0A, U+4E16, U+4EA1, U+5B50, U+6C38, U+6EC5, U+7368, U+751F, U+8005, U+AC00, U+AC70, U+AC8C, U+ACE0, U+ACE8, U+ACFC, U+AE30, U+B098, U+B0AB, U+B0B4, U+B108, U+B124, U+B179, U+B17C, U+B294, U+B2C8, U+B2D8, U+B2E4, U+B2F9, U+B354, U+B3C4, U+B3D9, U+B450, U+B514-B515, U+B77C, U+B78C, U+B791, U+B7EC, U+B7FC, U+B824, U+B86C, U+B97C, U+B9AC, U+B9C8, U+B9D0, U+BAAC, U+BABB, U+BB34, U+BB3C, U+BC0B, U+BCF4, U+BD80, U+BE0C, U+BE7C, U+C068, U+C0AC, U+C0E4, U+C0F9, U+C138, U+C154, U+C168, U+C18C, U+C2DC, U+C2EC, U+C544, U+C54A, U+C557, U+C5B4, U+C5C7, U+C5D0, U+C5EC, U+C6B0, U+C6CC, U+C73C, U+C740, U+C744, U+C74C, U+C758, U+C774, U+C787, U+C800, U+C81C, U+C8FC, U+C990, U+C9C0, U+CC98, U+CDE8, U+CE05, U+CE58, U+D130, U+D558, U+D638, U+D648, U+D654, U+D76C, U+D79D;
}

/* ── 31a. Art Note (copyright-safe stand-in for artwork we can't reproduce) ── */
.art-note{border:1px dashed var(--c-border);border-radius:var(--r-lg);padding:2.75rem 1.75rem;text-align:center;background:linear-gradient(135deg,rgba(10,60,143,.14),rgba(194,134,21,.05));margin:1.5rem 0}
.art-note .glyph{font-size:1.8rem;color:var(--c-gold);margin-bottom:.85rem;font-family:var(--f-en-serif)}
.art-note .cap{font-size:.85rem;color:var(--c-muted);line-height:1.7;max-width:50ch;margin:0 auto}
.art-note .cap a{color:var(--c-gold);text-decoration:underline;text-underline-offset:2px}
.art-note .cap a:hover{color:var(--c-gold-lt)}

/* ── 31b. Now Showing card (entry threshold) ── */
.now-showing{display:block;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:1.75rem 2rem;background:linear-gradient(135deg,rgba(194,134,21,.1),var(--c-panel));transition:var(--ease)}
.now-showing:hover{border-color:var(--c-gold);transform:translateY(-2px)}
.now-showing .ns-title{font-family:var(--f-en-serif);font-size:1.3rem;font-weight:700;color:var(--c-white);margin:.4rem 0}
body.lang-ko .now-showing .ns-title{font-family:var(--f-ko-serif)}

/* ── 1. Design Tokens ── */
:root {
  --c-bg:       #050F1F;
  --c-bg-mid:   #071628;
  --c-bg-light: #0D2040;
  --c-navy:     #0A3C8F;
  --c-navy-mid: #0D2A6B;
  --c-gold:     #C28615;
  --c-gold-lt:  #D9A030;
  --c-gold-dim: rgba(194,134,21,0.35);
  --c-white:    #FFFFFF;
  --c-off:      #F0EAD8;
  --c-muted:    #7A90A8;
  --c-border:   rgba(194,134,21,0.22);
  --c-panel:    rgba(10,60,143,0.12);

  --f-en-serif: 'Playfair Display', Georgia, serif;
  --f-en-sans:  'Inter', -apple-system, sans-serif;
  --f-ko-serif: 'Noto Serif KR', 'Malgun Gothic', serif;
  --f-ko-sans:  'Noto Sans KR', 'Malgun Gothic', sans-serif;

  --nav-h: calc(60px + env(safe-area-inset-top));
  --docent-w: 300px;
  --content-max: 860px;

  --r: 4px;
  --r-lg: 12px;
  --ease: 0.28s ease;
}

/* ── 2. Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--c-bg);color:var(--c-white);font-family:var(--f-en-sans);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lang-ko{font-family:var(--f-ko-sans)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
ul,ol{list-style:none}

/* ── 3. Bilingual System ── */
.ko{display:none}
span.ko{display:none}
.en{display:block}
span.en{display:inline}
body.lang-ko .ko{display:block}
body.lang-ko span.ko{display:inline}
body.lang-ko .en{display:none}
body.lang-ko span.en{display:none}

/* ── 4. Typography ── */
.t-display{font-family:var(--f-en-serif);font-size:clamp(2.6rem,6vw,5.2rem);line-height:1.08;font-weight:900;letter-spacing:-.015em}
body.lang-ko .t-display{font-family:var(--f-ko-serif)}
.t-title{font-family:var(--f-en-serif);font-size:clamp(1.7rem,3.5vw,2.8rem);line-height:1.2;font-weight:700}
body.lang-ko .t-title{font-family:var(--f-ko-serif)}
.t-heading{font-family:var(--f-en-serif);font-size:clamp(1.25rem,2.2vw,1.85rem);line-height:1.25;font-weight:700}
body.lang-ko .t-heading{font-family:var(--f-ko-serif)}
.t-label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-gold);font-weight:500}
.t-body{font-size:1.02rem;line-height:1.85;color:var(--c-off)}
.t-caption{font-size:.82rem;color:var(--c-muted);line-height:1.55}
.t-gold{color:var(--c-gold)}
.t-muted{color:var(--c-muted)}
.featured-exhibit{margin:2rem 3.5rem 0;padding:1.4rem 1.5rem;display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;border:1px solid var(--c-gold);border-radius:var(--r-lg);background:radial-gradient(circle at 92% 20%,rgba(224,184,104,.22),transparent 38%),linear-gradient(135deg,rgba(10,60,143,.28),rgba(194,134,21,.09));box-shadow:0 12px 34px rgba(0,0,0,.22)}
.featured-exhibit h2{font-family:var(--f-en-serif);font-size:clamp(1.45rem,2.6vw,2.2rem);margin:.25rem 0 .55rem;color:var(--c-white)}
.featured-exhibit p{max-width:680px;color:var(--c-off);font-size:.9rem;line-height:1.65}
.featured-exhibit .w-nav-btn{white-space:nowrap}
@media(max-width:720px){.featured-exhibit{margin:1.25rem 1rem 0;grid-template-columns:1fr}.featured-exhibit .w-nav-btn{width:100%;text-align:center}}
.serif{font-family:var(--f-en-serif)}
body.lang-ko .serif{font-family:var(--f-ko-serif)}

/* ── 5. Site Nav ── */
.site-nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) 2rem 0;background:rgba(5,15,31,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--c-border);z-index:1000}
.nav-brand{display:flex;align-items:center;gap:.5rem}
.nav-brand a{display:flex;align-items:center;gap:.5rem;background:none;-webkit-tap-highlight-color:transparent}
.nav-brand-text{font-family:var(--f-en-serif);font-size:.72rem;font-weight:700;color:var(--c-gold);letter-spacing:.1em;text-transform:uppercase}
body.lang-ko .nav-brand-text{font-family:var(--f-ko-serif);letter-spacing:.04em;text-transform:none}
.nav-loc{font-size:.72rem;color:var(--c-muted);letter-spacing:.06em;text-align:center}
.nav-controls{display:flex;align-items:center;gap:.75rem}
.nav-hamburger{display:none;width:36px;height:36px;flex:none;align-items:center;justify-content:center;background:none;border:1px solid var(--c-border);border-radius:8px;color:var(--c-gold);font-size:1.15rem;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:var(--ease)}
.nav-hamburger:hover,.nav-hamburger[aria-expanded="true"]{border-color:var(--c-gold);background:rgba(194,134,21,.08)}
.lang-btn{font-size:.72rem;padding:5px 13px;border:1px solid var(--c-border);border-radius:20px;color:var(--c-gold);letter-spacing:.05em;transition:var(--ease)}
.lang-btn:hover{background:var(--c-gold-dim);border-color:var(--c-gold)}
.nav-link{font-size:.72rem;color:var(--c-muted);transition:var(--ease)}
.nav-link:hover{color:var(--c-white)}

/* ── 6. Room Jump Nav ── */
.room-jump{position:fixed;left:.75rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:7px;z-index:900}
.jump-dot{width:8px;height:8px;border-radius:50%;background:rgba(122,144,168,.35);border:1px solid transparent;transition:var(--ease);cursor:pointer;display:block}
.jump-dot:hover,.jump-dot.active{background:var(--c-gold);border-color:var(--c-gold);transform:scale(1.4)}

/* ── 7. Museum Two-Column Layout ── */
.museum-layout{display:grid;grid-template-columns:1fr var(--docent-w);padding-top:var(--nav-h)}
.rooms-col{min-width:0}

/* ── 8. AI Docent Sidebar ── */
.ai-docent{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));background:rgba(6,19,38,.97);border-left:1px solid var(--c-border);display:flex;flex-direction:column;overflow:hidden}
.docent-hd{padding:1rem 1.25rem;border-bottom:1px solid var(--c-border);display:flex;align-items:center;gap:.75rem;cursor:pointer;flex-shrink:0}
.docent-orb{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--c-navy),var(--c-gold));display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}
.docent-ttl{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gold)}
.docent-badge{margin-left:auto;font-size:.62rem;padding:2px 8px;border-radius:10px;background:var(--c-gold);color:var(--c-navy);font-weight:600;display:none}
.docent-body{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}
.docent-ctx{font-size:.78rem;color:var(--c-muted);line-height:1.55;padding:.65rem .85rem;background:rgba(10,60,143,.15);border-radius:var(--r);border-left:2px solid var(--c-navy)}
.docent-insight{font-size:.82rem;color:var(--c-off);line-height:1.7}
.docent-insight strong.docent-who{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--c-gold);margin-bottom:5px}
.docent-insight p{margin:0 0 .6em}
.docent-insight p:last-child{margin-bottom:0}
.docent-insight p strong{color:var(--c-gold);font-weight:600}
.docent-insight p em{color:var(--c-gold-lt);font-style:italic}
.docent-foot{border-top:1px solid var(--c-border);padding:1rem 1.25rem;flex-shrink:0}
.docent-input-wrap{display:flex;gap:7px;align-items:flex-end;margin-bottom:.5rem}
.docent-input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--c-border);border-radius:var(--r);padding:9px 11px;color:var(--c-white);font-size:.82rem;font-family:inherit;resize:none;height:40px;transition:var(--ease);line-height:1.4}
.docent-input:focus{outline:none;border-color:var(--c-gold);background:rgba(194,134,21,.05)}
.docent-input::placeholder{color:var(--c-muted)}
.docent-send{width:36px;height:36px;border-radius:var(--r);background:var(--c-gold);color:var(--c-bg);font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:var(--ease);flex-shrink:0}
.docent-send:hover{background:var(--c-gold-lt)}
.docent-note{font-size:.65rem;color:var(--c-muted);text-align:center}
.guide-history-notice{display:block;margin-top:.35rem;line-height:1.45;color:rgba(122,144,168,.85)}
.guide-feedback{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.8rem;padding-top:.65rem;border-top:1px solid rgba(194,134,21,.2)}
.guide-feedback-prompt{width:100%;font-size:.68rem;color:var(--c-muted)}
.guide-feedback-btn{padding:.3rem .55rem;border:1px solid var(--c-border);border-radius:999px;background:rgba(10,60,143,.14);color:var(--c-off);font:inherit;font-size:.65rem;line-height:1.2;cursor:pointer}
.guide-feedback-btn:hover,.guide-feedback-btn:focus,.guide-feedback-btn.selected{border-color:var(--c-gold);background:rgba(194,134,21,.14);color:var(--c-gold-lt);outline:none}
.guide-feedback-form{width:100%;display:grid;grid-template-columns:1fr auto;gap:.4rem;margin-top:.25rem}
.guide-feedback-form[hidden]{display:none}
.guide-feedback-form textarea{min-width:0;resize:vertical;border:1px solid var(--c-border);border-radius:var(--r);background:rgba(255,255,255,.05);color:var(--c-white);padding:.5rem;font:inherit;font-size:.7rem}
.guide-feedback-status{width:100%;min-height:1em;font-size:.62rem;color:var(--c-muted)}
.guide-question-list{display:grid;gap:.5rem;margin:.75rem 0}
.guide-question{width:100%;padding:.62rem .75rem;text-align:left;border:1px solid var(--c-border);border-radius:var(--r);background:rgba(10,60,143,.16);color:var(--c-off);font-size:.72rem;line-height:1.4;transition:var(--ease)}
.guide-question:hover,.guide-question:focus{border-color:var(--c-gold);background:rgba(194,134,21,.1);outline:none}
.deep-disclosure{margin-top:1rem;border:1px solid var(--c-border);border-radius:var(--r);background:rgba(10,60,143,.1);overflow:hidden}
.deep-disclosure summary{display:flex;align-items:center;gap:.5rem;padding:.8rem 1rem;cursor:pointer;list-style:none;color:var(--c-gold-lt);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:var(--ease)}
.deep-disclosure summary::-webkit-details-marker{display:none}
.deep-disclosure summary:hover,.deep-disclosure summary:focus{background:rgba(194,134,21,.08);color:var(--c-white);outline:none}
.deep-chevron{margin-left:auto;font-size:1rem;transition:transform .25s ease}
.deep-disclosure[open] .deep-chevron{transform:rotate(180deg)}
.deep-disclosure-body{padding:0 1rem 1rem;border-top:1px solid var(--c-border);color:var(--c-muted)}
.deep-disclosure-body p{margin:1rem 0 0}

/* ── 9. Wing Hero ── */
.wing-hero{min-height:58vh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav-h) + 5rem) 3.5rem 3rem;background:linear-gradient(160deg,rgba(10,60,143,.22) 0%,rgba(5,15,31,.95) 70%);border-bottom:1px solid var(--c-border);position:relative;overflow:hidden}
.wing-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 15% 50%,rgba(10,60,143,.28) 0%,transparent 55%),radial-gradient(ellipse at 85% 20%,rgba(194,134,21,.08) 0%,transparent 50%);pointer-events:none}
.wing-num{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c-gold);margin-bottom:.6rem}
.wing-title{font-family:var(--f-en-serif);font-size:clamp(2.4rem,5.5vw,5rem);font-weight:900;line-height:1.06;margin-bottom:.5rem;position:relative}
body.lang-ko .wing-title{font-family:var(--f-ko-serif)}
.wing-sub{font-size:1.05rem;color:var(--c-muted);max-width:560px;margin-bottom:1.5rem}
.wing-scroll{display:flex;align-items:center;gap:.65rem;font-size:.72rem;color:var(--c-muted);letter-spacing:.12em;text-transform:uppercase}
.wing-scroll::before{content:'';display:block;width:22px;height:1px;background:var(--c-gold)}

/* ── 10. Room Sections ── */
.room{padding:5.5rem 3.5rem;position:relative}
.room+.room{border-top:1px solid var(--c-border)}
.room-hd{margin-bottom:3rem}
.room-num{display:inline-block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-gold);margin-bottom:.6rem}
.room-title{font-family:var(--f-en-serif);font-size:clamp(1.9rem,3.8vw,3.2rem);font-weight:900;line-height:1.1;margin-bottom:.9rem}
body.lang-ko .room-title{font-family:var(--f-ko-serif)}
.room-intro{font-size:1.05rem;color:var(--c-off);max-width:680px;line-height:1.85;border-left:3px solid var(--c-gold);padding-left:1.25rem;margin-top:1rem}

/* ── 11. Timeline ── */
.timeline{position:relative;padding-left:2px;margin:3rem 0}
.timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,var(--c-gold) 8%,var(--c-gold) 92%,transparent)}
.tl-item{display:grid;grid-template-columns:72px 1fr;gap:1.25rem;padding:1.75rem 0 1.75rem 1.75rem;position:relative}
.tl-item::before{content:'';position:absolute;left:-5px;top:1.85rem;width:12px;height:12px;border-radius:50%;background:var(--c-gold);border:2px solid var(--c-bg);box-shadow:0 0 0 2px var(--c-gold)}
.tl-year{font-family:var(--f-en-serif);font-size:1rem;font-weight:700;color:var(--c-gold);line-height:1.2;padding-top:3px}
.tl-body h3{font-family:var(--f-en-serif);font-size:1rem;font-weight:700;color:var(--c-white);margin-bottom:5px}
body.lang-ko .tl-body h3{font-family:var(--f-ko-serif)}
.tl-body p{font-size:.88rem;color:var(--c-off);line-height:1.72}

/* ── 12. Artifact Cards ── */
.artifacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:2.5rem 0}
.artifact{background:var(--c-panel);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:1.25rem;transition:var(--ease);position:relative;overflow:hidden}
.artifact::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,var(--c-gold),transparent);opacity:0;transition:var(--ease)}
.artifact:hover{border-color:var(--c-gold);background:rgba(10,60,143,.22);transform:translateY(-2px)}
.artifact:hover::after{opacity:1}
.artifact-n{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--c-gold);margin-bottom:.3rem}
.artifact-yr{font-family:var(--f-en-serif);font-size:1.75rem;font-weight:900;color:var(--c-white);line-height:1;margin-bottom:4px}
.artifact-name{font-size:.9rem;font-weight:600;color:var(--c-off);margin-bottom:.3rem;line-height:1.3}
.artifact-desc{font-size:.8rem;color:var(--c-muted);line-height:1.6}
.artifact.milestone{box-shadow:inset 3px 0 0 var(--c-gold);background:linear-gradient(90deg,rgba(194,134,21,.14),var(--c-panel) 70%)}
.artifact-flag{display:inline-block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;background:var(--c-gold);color:var(--c-bg);font-weight:600;padding:3px 7px;border-radius:2px;margin-left:8px;vertical-align:2px;white-space:nowrap}

/* ── 13. Quote Block ── */
.quote-block{margin:2.5rem 0;padding:2.5rem 2rem;background:linear-gradient(135deg,rgba(10,60,143,.18),rgba(194,134,21,.04));border-left:4px solid var(--c-gold);border-radius:0 var(--r-lg) var(--r-lg) 0;position:relative}
.quote-block::before{content:'"';position:absolute;top:-18px;left:1.5rem;font-family:var(--f-en-serif);font-size:7rem;color:rgba(194,134,21,.18);line-height:1;pointer-events:none}
.quote-text{font-family:var(--f-en-serif);font-size:clamp(1.1rem,2.2vw,1.55rem);line-height:1.55;color:var(--c-white);font-style:italic;position:relative;z-index:1;margin-bottom:.75rem}
body.lang-ko .quote-text{font-family:var(--f-ko-serif);font-style:normal}
.quote-attr{font-size:.82rem;color:var(--c-gold);letter-spacing:.05em}

/* ── 13b. Scripture Quote (primary-source text quoted directly on an
   artifact, rather than only described -- shows original + gloss together,
   not toggled by lang, since both are the point) ── */
.scripture-quote{margin-top:1rem;padding:1rem 1.1rem;background:rgba(194,134,21,.06);border:1px solid var(--c-border);border-left:3px solid var(--c-gold);border-radius:0 var(--r) var(--r) 0}
.scripture-quote .verse-kr{font-family:'MOTB Verse KR Old Hangul',var(--f-ko-serif);font-size:.92rem;line-height:1.75;color:var(--c-gold-lt);margin-bottom:.5rem}
.scripture-quote .verse-en{font-family:var(--f-en-serif);font-style:italic;font-size:.82rem;line-height:1.55;color:var(--c-off);margin-bottom:.5rem}
.scripture-quote .verse-ref{font-size:.68rem;color:var(--c-gold);letter-spacing:.03em;margin-bottom:.45rem}
.scripture-quote .verse-caption{font-size:.78rem;color:var(--c-muted);line-height:1.55;margin-bottom:.6rem}
.scripture-quote .verse-note{font-size:.66rem;color:var(--c-muted);line-height:1.55;opacity:.8;padding-top:.55rem;border-top:1px solid var(--c-border)}

/* ── 14. Stats Row ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:2.5rem 0}
.stat{text-align:center;padding:1.75rem 1rem;border:1px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-panel)}
.stat-n{font-family:var(--f-en-serif);font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:900;color:var(--c-gold);line-height:1;margin-bottom:6px}
.stat-l{font-size:.75rem;color:var(--c-muted);line-height:1.4;letter-spacing:.04em}

/* ── 15. Person Feature ── */
.person{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;padding:1.5rem;background:var(--c-panel);border:1px solid var(--c-border);border-radius:var(--r-lg);margin:2.5rem 0}
.person-init{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--c-navy),var(--c-navy-mid));border:2px solid var(--c-gold);display:flex;align-items:center;justify-content:center;font-family:var(--f-ko-serif);font-size:1.8rem;font-weight:700;color:var(--c-gold);flex-shrink:0}
.person-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:center;border:3px solid var(--c-gold);filter:sepia(.12) contrast(1.05);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.person-photo.yi-photo{object-position:left center}
.person-photo.person-photo-group{width:132px;height:96px;border-radius:var(--r);object-position:center 55%}
.person-credit,.tool-credit{display:block;margin-top:.55rem;font-size:.56rem;line-height:1.4;color:var(--c-muted)}
.person-credit a,.tool-credit a{color:var(--c-gold-lt);text-decoration:none}
.person-name{font-family:var(--f-en-serif);font-size:1.35rem;font-weight:700;margin-bottom:3px}
body.lang-ko .person-name{font-family:var(--f-ko-serif)}
.person-role{font-size:.72rem;color:var(--c-gold);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem}
.portrait-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.25rem;margin:2rem 0}
.historical-portrait{margin:0;border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;background:var(--c-panel);transition:var(--ease)}
.historical-portrait:hover{border-color:var(--c-gold);transform:translateY(-2px)}
.historical-portrait img{display:block;width:100%;height:270px;object-fit:cover;object-position:center 18%;filter:sepia(.14) contrast(1.04)}
.historical-portrait figcaption{padding:1rem 1.1rem}
.portrait-name{font-family:var(--f-en-serif);font-size:1rem;font-weight:700;color:var(--c-white);line-height:1.3}
body.lang-ko .portrait-name{font-family:var(--f-ko-serif)}
.portrait-context{font-size:.75rem;color:var(--c-muted);line-height:1.55;margin-top:.35rem}
.portrait-source{display:inline-block;margin-top:.55rem;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-gold)}
.story-portrait{float:left;width:155px;margin:.25rem 1.35rem .75rem 0;border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;background:var(--c-panel)}
.story-portrait img{display:block;width:100%;height:190px;object-fit:cover;object-position:center 18%;filter:sepia(.12) contrast(1.04)}
.story-portrait figcaption{padding:.7rem .75rem;font-size:.68rem;line-height:1.45;color:var(--c-muted)}
.story-portrait .portrait-source{font-size:.56rem;margin-top:.35rem}
.person-bio{font-size:.88rem;color:var(--c-off);line-height:1.75}

/* ── 16. Country Card (Wing 4) ── */
.country{border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;margin:1.5rem 0;background:var(--c-panel)}
.country-hd{padding:1.25rem 1.5rem;background:linear-gradient(135deg,rgba(10,60,143,.28),rgba(5,15,31,.8));border-bottom:1px solid var(--c-border);display:flex;align-items:flex-start;gap:1rem}
.country-flag{width:44px;height:30px;border-radius:3px;background:rgba(194,134,21,.15);border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0}
.country-name{font-family:var(--f-en-serif);font-size:1.4rem;font-weight:700;line-height:1.15;margin-bottom:3px}
body.lang-ko .country-name{font-family:var(--f-ko-serif)}
.country-dates{font-size:.75rem;color:var(--c-gold);letter-spacing:.05em}
.country-body{padding:1.25rem 1.5rem}
.country-body p{font-size:.92rem;color:var(--c-off);line-height:1.8}
.country-body p+p{margin-top:.7rem}
.country-hl{margin-top:1rem;padding:.6rem 1rem;background:rgba(194,134,21,.07);border-left:3px solid var(--c-gold);border-radius:0 var(--r) var(--r) 0;font-size:.88rem;color:var(--c-off);font-style:italic}

/* ── 17. Note Panel ── */
.note{padding:1rem 1.25rem;border-radius:var(--r);background:rgba(10,60,143,.2);border:1px solid rgba(10,60,143,.45);font-size:.88rem;color:var(--c-off);line-height:1.75;margin:1.25rem 0}
.note.gold{background:rgba(194,134,21,.07);border-color:rgba(194,134,21,.28)}

/* ── 18. Wing Footer Nav ── */
.wing-footer{padding:2.5rem 3.5rem;border-top:1px solid var(--c-border);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.w-nav-btn{display:flex;align-items:center;gap:.6rem;padding:.65rem 1.25rem;border:1px solid var(--c-border);border-radius:var(--r);font-size:.88rem;color:var(--c-off);transition:var(--ease)}
.w-nav-btn:hover{border-color:var(--c-gold);color:var(--c-gold)}
.w-nav-btn.primary{background:var(--c-gold);color:var(--c-bg);border-color:var(--c-gold);font-weight:600}
.w-nav-btn.primary:hover{background:var(--c-gold-lt);color:var(--c-bg)}

/* ── 19. Institution Banner ── */
.institution-banner{background:#050F1F;background-image:linear-gradient(rgba(10,60,143,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(10,60,143,.18) 1px,transparent 1px);background-size:48px 48px;padding:calc(var(--nav-h) + 4rem) 2rem 4rem;text-align:center;border-bottom:1px solid rgba(194,134,21,.25)}
.institution-banner-inner{max-width:680px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.institution-mark{width:96px;height:96px;object-fit:contain}
.institution-logo{opacity:.9}
.institution-location{font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--c-gold);margin:0}
.institution-name{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,6vw,3.8rem);font-weight:700;color:#fff;line-height:1.15;margin:0;letter-spacing:.01em}
.institution-sub{font-family:'Playfair Display',serif;font-size:1.05rem;color:var(--c-gold);opacity:.85;margin:0;line-height:1.6;font-style:italic}
.institution-rule{width:80px;height:1px;background:var(--c-gold);opacity:.45;margin-top:.4rem}
.mark-story{width:min(100%,560px);border:1px solid var(--c-border);border-radius:var(--r);background:rgba(10,60,143,.1);overflow:hidden;text-align:left}
.mark-story summary{display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.72rem 1rem;cursor:pointer;list-style:none;color:var(--c-gold-lt);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:var(--ease)}
.mark-story summary::-webkit-details-marker{display:none}
.mark-story summary:hover,.mark-story summary:focus{background:rgba(194,134,21,.08);color:var(--c-white);outline:none}
.mark-story-chevron{font-size:1rem;transition:transform .25s ease}
.mark-story[open] .mark-story-chevron{transform:rotate(180deg)}
.mark-story-body{padding:1rem 1.15rem 1.1rem;border-top:1px solid var(--c-border);color:var(--c-off);font-size:.86rem;line-height:1.7;text-align:center}
.mark-story-body p{margin:0}
.mark-story-body b{color:var(--c-white)}

/* ── 19. Entry Page ── */
.entry-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:calc(var(--nav-h) + 3rem) 2rem 3rem;position:relative;overflow:hidden}
.entry-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(10,60,143,.35) 0%,transparent 60%),radial-gradient(ellipse at 50% 85%,rgba(194,134,21,.07) 0%,transparent 50%);pointer-events:none}
.entry-verse-ref{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c-gold);margin-bottom:1.1rem}
.entry-verse{font-family:var(--f-en-serif);font-size:clamp(1.45rem,3.2vw,2.4rem);line-height:1.48;font-style:italic;max-width:780px;color:var(--c-off);position:relative;z-index:1}
body.lang-ko .entry-verse{font-family:var(--f-ko-serif);font-style:normal}
.entry-rule{width:72px;height:1px;background:linear-gradient(to right,transparent,var(--c-gold),transparent);margin:2rem auto}
.entry-title{font-family:var(--f-en-serif);font-size:clamp(1.9rem,5.5vw,4.2rem);font-weight:900;line-height:1.08;margin-bottom:.5rem;position:relative;z-index:1}
body.lang-ko .entry-title{font-family:var(--f-ko-serif)}
.entry-thesis{font-family:var(--f-en-serif);font-size:clamp(1.05rem,2.4vw,1.5rem);font-weight:700;color:var(--c-gold-lt);margin-bottom:.9rem;position:relative;z-index:1}
body.lang-ko .entry-thesis{font-family:var(--f-ko-serif)}
.entry-sub{font-size:.85rem;color:var(--c-muted);letter-spacing:.14em;text-transform:uppercase;margin-bottom:2.5rem}
.btn-gold{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 2rem;background:var(--c-gold);color:var(--c-bg);font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r);transition:var(--ease);cursor:pointer;font-family:inherit}
.btn-gold:hover{background:var(--c-gold-lt);transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 2rem;border:1px solid var(--c-border);color:var(--c-off);font-size:.9rem;border-radius:var(--r);transition:var(--ease)}
.btn-ghost:hover{border-color:var(--c-gold);color:var(--c-gold)}

/* ── 20. Tour Selector ── */
.tour-sel{padding:4rem 2rem;max-width:980px;margin:0 auto}
.tour-paths{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.85rem;margin:2rem 0 1.75rem}
.path-btn{padding:1.25rem .9rem;border:1px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-panel);text-align:center;cursor:pointer;transition:var(--ease);font-family:inherit}
.path-btn:hover,.path-btn.sel{border-color:var(--c-gold);background:rgba(194,134,21,.1)}
.path-btn.sel{box-shadow:0 0 0 1px var(--c-gold)}
.path-icon{font-size:1.7rem;margin-bottom:.5rem}
.path-name{font-size:.88rem;font-weight:600;color:var(--c-white);margin-bottom:3px}
.path-desc{font-size:.73rem;color:var(--c-muted);line-height:1.4}

/* ── 21. Museum Map (Entry) ── */
.museum-map{max-width:880px;margin:0 auto;padding:0 2rem 4rem}
.map-grid{border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;display:grid;gap:1px;background:var(--c-border)}
.map-row{display:block;padding:1.5rem 2rem;background:var(--c-bg-mid);transition:background var(--ease)}
.map-row:hover{background:var(--c-bg-light)}
.map-row-num{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-gold);margin-bottom:.3rem}
.map-row-title{font-family:var(--f-en-serif);font-size:1.2rem;font-weight:700;margin-bottom:.2rem}
body.lang-ko .map-row-title{font-family:var(--f-ko-serif)}
.map-row-meta{font-size:.78rem;color:var(--c-muted)}

/* ── 22. Exit Room ── */
.exit-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:calc(var(--nav-h) + 3rem) 2rem 3rem;position:relative;overflow:hidden}
.exit-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;max-width:760px;width:100%;margin:2.5rem auto 0}
.exit-opt{display:block;padding:1.75rem 1.25rem;border:1px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-panel);text-align:center;transition:var(--ease);color:var(--c-white)}
.exit-opt:hover{border-color:var(--c-gold);background:rgba(194,134,21,.1);transform:translateY(-3px)}
.exit-opt-icon{font-size:2rem;margin-bottom:.75rem}
.exit-opt-title{font-family:var(--f-en-serif);font-size:1.05rem;font-weight:700;margin-bottom:.4rem}
body.lang-ko .exit-opt-title{font-family:var(--f-ko-serif)}
.exit-opt-desc{font-size:.8rem;color:var(--c-muted);line-height:1.5}

/* ── 23. NK Room (Dark/Memorial) ── */
.nk-room{background:linear-gradient(to bottom,#030C1A,var(--c-bg))}
.nk-room .room-num{color:#6B7D8E}
.nk-room .room-title{color:#C8D0D8}
.memorial{border:1px solid rgba(100,110,120,.28);border-radius:var(--r-lg);padding:1.5rem;background:rgba(15,18,24,.5);margin:1.5rem 0}
.nk-verse{font-family:var(--f-en-serif);font-size:1.1rem;font-style:italic;color:#B0B8C4;text-align:center;margin:2rem 0;padding:1.5rem;border-top:1px solid rgba(100,110,120,.2);border-bottom:1px solid rgba(100,110,120,.2)}
body.lang-ko .nk-verse{font-family:var(--f-ko-serif);font-style:normal}

/* ── 24. Gold Divider ── */
.gold-line{height:1px;background:linear-gradient(to right,transparent,var(--c-gold),transparent);margin:2.5rem 0}
.gold-line.narrow{max-width:80px;margin-left:0}
.gold-line.center{max-width:80px;margin-left:auto;margin-right:auto}

/* ── 25. Scroll Reveal ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.reveal.in{opacity:1;transform:none}

/* ── 26. Footer ── */
.site-footer{padding:2.5rem 2rem;border-top:1px solid var(--c-border);background:var(--c-bg-mid)}
/* The cinematic lane's docent is a collapsed 54px bottom sheet pinned over
   the page (see .ai-docent.sheet-mode) -- give the footer enough bottom
   clearance so its last content (e.g. the "Continue to the full exhibit"
   button) can scroll clear of that bar instead of sitting underneath it. */
body.cine-page .site-footer{padding-bottom:calc(54px + env(safe-area-inset-bottom) + 24px)}
/* The cine-scroll container's scroll-snap-type is mandatory, but only the
   .cine-panel scenes carried scroll-snap-align -- with no snap point of its
   own, the footer could never fully settle into view; scrolling always
   snapped back to the last scene, leaving the footer (and its "Continue to
   the full exhibit" button) unreachable. Giving it a snap point fixes that. */
.cine-scroll .site-footer{scroll-snap-align:start}
.footer-inner{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;gap:.6rem}
.footer-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.footer-org{font-size:.82rem;color:var(--c-off);letter-spacing:.02em}
.footer-links{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.footer-links a{font-size:.78rem;color:var(--c-muted);transition:var(--ease)}
.footer-links a:hover{color:var(--c-white)}
.footer-sep{color:var(--c-border);font-size:.75rem;user-select:none}
.footer-copy{font-size:.72rem;color:var(--c-muted);margin-top:.2rem}

/* ── 27. Room Hero Photo ── */
.room-hero{margin:2.5rem 0;position:relative;border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;max-height:420px}
.room-hero img{width:100%;object-fit:cover;object-position:center 40%;display:block;filter:brightness(.88) contrast(1.06) saturate(.95);cursor:pointer}
.room-hero .rh-cap{position:absolute;bottom:0;left:0;right:0;padding:1.25rem 1.25rem .75rem;background:linear-gradient(transparent, rgba(5,15,31,.75) 35%, rgba(5,15,31,.96));font-size:.85rem;color:var(--c-gold-lt);font-style:italic;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.room-hero .rh-cap b{color:var(--c-gold);font-style:normal;font-weight:600}

/* ── 28. Artifact Thumbnail + Lightbox ── */
.artifact-thumb{width:100%;height:110px;object-fit:cover;border-radius:var(--r);margin-top:.75rem;opacity:.85;filter:brightness(.85) contrast(1.08) saturate(.92);cursor:pointer;transition:var(--ease)}
.artifact-thumb:hover{opacity:1;transform:scale(1.02)}
.artifact-thumb-natural{height:auto;max-height:310px;object-fit:contain;background:#efe4cd;opacity:1;filter:none;padding:7px;border:1px solid rgba(224,184,104,.65);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.artifact-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin-top:.8rem}
.artifact-gallery .artifact-thumb{margin-top:0;height:300px}
.warm-scan-gallery{padding:.85rem;background:linear-gradient(135deg,#9a6421,#d8af61 48%,#6f4318);border:1px solid var(--c-gold-lt);border-radius:var(--r-lg);box-shadow:0 10px 28px rgba(0,0,0,.34)}
.warm-scan-gallery .artifact-thumb{background:#f4ead7;border:5px solid #f1d79f;border-radius:3px;box-shadow:inset 0 0 0 1px #8e5c20,0 4px 14px rgba(34,19,5,.42)}
.compact-scan-gallery{padding:.5rem;background:rgba(194,134,21,.09);border:1px solid var(--c-border);border-radius:var(--r)}
.compact-scan-gallery .artifact-thumb{height:110px;object-fit:contain;background:#eee3cd;border:3px solid #d8b76f;padding:3px;opacity:1;filter:none;box-shadow:none}
.tool-portrait{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid var(--c-gold);margin:.15rem 0 .85rem;filter:sepia(.12) contrast(1.05)}
.artifact-source{margin-top:.65rem;font-size:.65rem;color:var(--c-muted);line-height:1.45}
.artifact-source a{color:var(--c-gold-lt);text-decoration:underline;text-decoration-color:rgba(224,184,104,.45);text-underline-offset:2px}
.artifact-source a:hover{color:var(--c-white)}
#lb{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;align-items:center;justify-content:center;flex-direction:column;gap:1rem}
#lb.open{display:flex}
#lb img{max-width:90vw;max-height:80vh;object-fit:contain;border-radius:var(--r);box-shadow:0 8px 40px rgba(0,0,0,.6)}
#lb .lb-cap{color:var(--c-off);font-size:.92rem;text-align:center;max-width:600px;line-height:1.6;padding:0 1rem}
#lb .lb-close{position:absolute;top:20px;right:24px;color:var(--c-muted);font-size:2rem;cursor:pointer;line-height:1;background:none;border:none;padding:.25rem .5rem}
#lb .lb-close:hover{color:var(--c-white)}
@media(max-width:560px){.artifact-gallery{grid-template-columns:1fr}.artifact-gallery .artifact-thumb{height:auto;max-height:420px}}

/* ── 29. Social/Painting Prologue (Wing 2) ── */
.social-visual{margin:2rem 0 2.5rem}
.social-label{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-gold);margin-bottom:1.25rem}
.painting-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.5rem}
.painting{position:relative;border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;background:var(--c-panel)}
.painting img{width:100%;height:280px;object-fit:contain;display:block;cursor:pointer;filter:brightness(.9) contrast(1.03) saturate(.85) sepia(.08);transition:filter .4s}
.painting:hover img{filter:brightness(.98) contrast(1.01) saturate(.95) sepia(.02)}
.painting .p-era{position:absolute;top:.6rem;left:.6rem;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(5,15,31,.82);color:var(--c-muted);padding:.25rem .6rem;border-radius:2px}
.painting .p-cap{padding:1rem 1.1rem;font-size:.85rem;color:var(--c-off);line-height:1.65;border-top:1px solid var(--c-border)}
.painting .p-cap b{color:var(--c-gold)}
.credit{margin-top:.6rem;font-size:.7rem}
.credit summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.3rem;color:var(--c-muted);transition:var(--ease)}
.credit summary::-webkit-details-marker{display:none}
.credit summary:hover{color:var(--c-gold)}
.credit p{margin-top:.35rem;color:var(--c-muted);line-height:1.5}
.credit a{color:var(--c-gold);word-break:break-all}
.social-pull{font-family:var(--f-en-serif);font-style:italic;font-size:1.15rem;color:var(--c-white);border-left:3px solid var(--c-gold);padding-left:1.25rem;margin:1.5rem 0;max-width:56ch;line-height:1.6}
body.lang-ko .social-pull{font-family:var(--f-ko-serif);font-style:normal}
.painting-solo{max-width:360px;margin:0 auto 1.5rem}
.context-gallery{margin:2rem 0;padding:1.15rem;background:rgba(194,134,21,.06);border:1px solid var(--c-border);border-radius:var(--r-lg)}
.context-gallery-hd{margin-bottom:1rem;color:var(--c-muted);font-size:.78rem;line-height:1.6}
.context-gallery-hd b{color:var(--c-gold-lt);font-size:.86rem}
.context-gallery .painting-pair{margin-bottom:0}
.context-gallery .painting{margin:0}
.person-feature{display:grid;grid-template-columns:180px 1fr;gap:1.5rem;align-items:start;padding:1.25rem;background:var(--c-panel);border:1px solid var(--c-border);border-radius:var(--r-lg)}
.person-feature-image{margin:0;overflow:hidden;border-radius:var(--r);border:1px solid var(--c-border);background:var(--c-bg)}
.person-feature-image img{display:block;width:100%;aspect-ratio:1;object-fit:cover;cursor:pointer;filter:sepia(.08) contrast(1.04)}
.person-feature-image figcaption{padding:.6rem .7rem;font-size:.7rem;color:var(--c-gold-lt);text-align:center}
@media(max-width:620px){.person-feature{grid-template-columns:1fr}.person-feature-image{max-width:220px;margin:0 auto}}

/* ── 30. Timeline Wall Graphics ── */
.timeline-wall{display:grid;grid-template-columns:1fr;gap:.85rem;margin:1.5rem 0}
.twall{position:relative;border:1px solid var(--c-border);border-radius:var(--r-lg);overflow-x:auto;overflow-y:hidden}
.twall svg{width:100%;min-width:800px;height:auto}

/* ── 31. Lens Bar (mode + lang door, persistent header control) ── */
.lensbar-seg{display:flex;border:1px solid var(--c-border);border-radius:20px;overflow:hidden;flex:none}
.lensbar-seg button{background:transparent;border:0;color:var(--c-muted);font-family:inherit;font-size:.68rem;letter-spacing:.03em;padding:5px 11px;cursor:pointer;transition:var(--ease);white-space:nowrap}
.lensbar-seg button.on{background:var(--c-gold);color:var(--c-bg);font-weight:600}
.lensbar-seg button:not(.on):hover{background:var(--c-gold-dim);color:var(--c-white)}
.showme-btn{font-size:.68rem;color:var(--c-muted);border:1px solid var(--c-border);border-radius:20px;padding:5px 13px;transition:var(--ease);white-space:nowrap}
.showme-btn:hover{border-color:var(--c-gold);color:var(--c-gold)}
.nav-controls{flex-wrap:wrap;row-gap:.4rem;justify-content:flex-end}

/* ── 32. Entry Intake Overlay (one-choice, the door at first visit) ── */
.intake-ov{position:fixed;inset:0;z-index:2000;background:rgba(3,7,17,.86);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;overflow-y:auto;padding:calc(var(--nav-h) + 24px) 20px 40px}
.intake-ov.show{display:flex}
.intake-card{max-width:560px;width:100%;border:1px solid var(--c-border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(10,60,143,.2),rgba(5,15,31,.7));padding:2.4rem 2rem}
.intake-cross{text-align:center;color:var(--c-gold-lt);font-size:1.5rem;opacity:.9;margin-bottom:.6rem}
.intake-verse{font-family:var(--f-en-serif);font-style:italic;text-align:center;color:var(--c-muted);margin:0 0 .5rem;font-size:.95rem}
body.lang-ko .intake-verse{font-family:var(--f-ko-serif);font-style:normal}
.intake-thesis{text-align:center;color:var(--c-gold);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .9rem}
body.lang-ko .intake-thesis{letter-spacing:.04em;text-transform:none}
.intake-welcome{text-align:center;color:var(--c-off);max-width:42ch;margin:0 auto 1.6rem;font-size:.95rem;line-height:1.6}
.intake-choice{display:grid;gap:.85rem}
.intake-opt{display:block;width:100%;text-align:left;background:transparent;border:1px solid var(--c-border);border-radius:var(--r);color:var(--c-white);font-family:inherit;padding:1.15rem 1.25rem;cursor:pointer;transition:var(--ease)}
.intake-opt:hover{border-color:var(--c-gold);background:rgba(194,134,21,.08)}
.intake-opt .t{font-family:var(--f-en-serif);font-size:1.1rem;color:var(--c-white)}
body.lang-ko .intake-opt .t{font-family:var(--f-ko-serif)}
.intake-opt .t b{color:var(--c-gold-lt);font-weight:700}
.intake-opt .s{display:block;color:var(--c-muted);font-size:.82rem;margin-top:.4rem;line-height:1.5}
.intake-juststart{display:block;margin:1.3rem auto 0;background:none;border:0;color:var(--c-muted);font-size:.8rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:inherit}
.intake-juststart:hover{color:var(--c-off)}

/* ── 33. Cinematic Lane (Highlights) ── */
body.cine-page{overflow:hidden}
.cine-scroll{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth}
.cine-scroll::-webkit-scrollbar{width:0}
.cine-panel{position:relative;min-height:100%;height:100%;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;padding:5.5rem 1.75rem 4.5rem;overflow:hidden}
.cine-panel .cine-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.32}
.cine-panel .cine-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(5,15,31,.55),rgba(5,15,31,.93) 65%)}
.cine-credit{position:absolute;top:14px;right:16px;z-index:2;font-size:.56rem;letter-spacing:.08em;color:var(--c-muted);background:rgba(5,15,31,.6);padding:3px 8px;border-radius:2px;max-width:46vw;text-align:right}
.cine-credit a{color:var(--c-muted);text-decoration:underline}
.cine-inner{position:relative;z-index:3;max-width:640px;margin:0 auto;width:100%}
.cine-panel.cine-has-focal .cine-inner{max-width:1000px;padding-right:330px}
.cine-focal{position:absolute;z-index:2;right:max(3.5vw,28px);top:50%;transform:translateY(-48%) rotate(1deg);width:min(275px,25vw);margin:0;padding:9px;background:linear-gradient(145deg,#e7c678,#8a581e);border:1px solid var(--c-gold-lt);border-radius:5px;box-shadow:0 18px 48px rgba(0,0,0,.58)}
.cine-focal img{display:block;width:100%;height:255px;object-fit:cover;object-position:center;background:#efe4cd;border:5px solid #f3e4bf}
.cine-focal figcaption{padding:.65rem .45rem .35rem;font-size:.65rem;line-height:1.45;color:#fff4d6;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.cine-focal-portrait{width:min(230px,22vw);transform:translateY(-48%) rotate(-1.2deg)}
.cine-focal-portrait img{height:290px;object-position:center 16%;filter:sepia(.12) contrast(1.04)}
.cine-focal-triptych{width:min(310px,28vw);display:grid;grid-template-columns:repeat(3,1fr);gap:5px;transform:translateY(-48%) rotate(.6deg)}
.cine-focal-triptych div{position:relative;overflow:hidden}
.cine-focal-triptych img{height:230px;padding:0;border:3px solid #f3e4bf;filter:sepia(.16) contrast(1.05)}
.cine-focal-triptych img.morrison-portrait{object-position:left center}
.cine-focal-triptych div span{position:absolute;left:3px;right:3px;bottom:3px;padding:.2rem;background:rgba(5,15,31,.82);color:#f7e5bd;font-size:.52rem;text-align:center;text-transform:uppercase;letter-spacing:.08em}
.cine-focal-triptych .portrait-label{display:flex;flex-direction:column;gap:.08rem;padding:.3rem .12rem .22rem;line-height:1.15}
.cine-focal-triptych .portrait-label b{font-size:.38rem;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;color:#fff4d6}
.cine-focal-triptych .portrait-label small{font-size:.46rem;letter-spacing:.1em;text-transform:uppercase;color:#e7c678}
.cine-focal-triptych figcaption{grid-column:1/-1}
.cine-dream .cine-bg{opacity:.24;background-position:center 42%;filter:saturate(.8)}
.cine-dream .cine-bg::after{background:linear-gradient(90deg,rgba(5,15,31,.98) 0%,rgba(5,15,31,.88) 48%,rgba(5,15,31,.55)),linear-gradient(0deg,rgba(5,15,31,.72),transparent 48%)}
.cine-dream .cine-inner{max-width:1120px;margin-left:auto;margin-right:auto;padding-right:51%}
.dream-compare{position:absolute;z-index:3;right:max(2.5vw,24px);top:50%;transform:translateY(-48%);width:min(47vw,650px);display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.dream-compare figure{margin:0;padding:7px;background:linear-gradient(145deg,#e6c575,#744517);border:1px solid var(--c-gold-lt);border-radius:4px;box-shadow:0 16px 40px rgba(0,0,0,.55);overflow:hidden}
.dream-compare img{display:block;width:100%;height:min(50vh,470px);object-fit:cover;object-position:center 47%;border:4px solid #f0dfb7}
.dream-compare figcaption{display:flex;flex-direction:column;gap:.25rem;padding:.55rem .45rem .35rem;color:#fff4d6;font-size:.62rem;line-height:1.35;text-align:center}
.dream-compare figcaption b{font-size:.68rem;letter-spacing:.16em;color:#fff;text-transform:uppercase}
.cine-vision-note{margin-top:1rem;padding-left:1rem;border-left:2px solid var(--c-gold);font-family:var(--f-en-serif);font-size:.9rem;line-height:1.6;color:var(--c-gold-lt);font-style:italic}
body.lang-ko .cine-vision-note{font-family:var(--f-ko-serif);font-style:normal}
.cine-eyebrow{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.cine-eyebrow .num{font-family:var(--f-en-serif);font-style:italic;color:var(--c-gold);font-size:1.2rem}
.cine-eyebrow .era{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.cine-h1{font-family:var(--f-en-serif);font-weight:700;font-size:clamp(1.8rem,5.4vw,3rem);line-height:1.1;max-width:16ch}
body.lang-ko .cine-h1{font-family:var(--f-ko-serif)}
.cine-h1 i{font-style:italic;color:var(--c-gold-lt)}
.cine-line{margin-top:1rem;color:var(--c-off);font-size:clamp(.98rem,2vw,1.12rem);max-width:40ch;line-height:1.7}
.cine-acts{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.cine-peekbtn{background:transparent;border:1px solid var(--c-border);color:var(--c-off);padding:.55rem .95rem;font-size:.84rem;border-radius:var(--r);cursor:pointer;transition:var(--ease);font-family:inherit}
.cine-peekbtn:hover{border-color:var(--c-gold);color:var(--c-white)}
.cine-peekbtn .chev{color:var(--c-gold);margin-left:5px;display:inline-block;transition:.2s}
.cine-peekbtn.open .chev{transform:rotate(180deg)}
.cine-askbtn{background:var(--c-gold);border:0;color:var(--c-bg);font-weight:600;padding:.6rem 1.1rem;font-size:.84rem;border-radius:var(--r);cursor:pointer;font-family:inherit}
.cine-askbtn:hover{background:var(--c-gold-lt)}
.cine-peek{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s ease,margin .3s ease;opacity:0}
.cine-peek.open{max-height:360px;opacity:1;margin-top:1.1rem}
.cine-peek .pk{border-left:2px solid var(--c-gold);padding-left:1rem;max-width:54ch}
.cine-peek .pk p{color:var(--c-off);font-size:.92rem;line-height:1.7}
.cine-peek .pk p+p{margin-top:.6rem}
.cine-peek .pk .mark{color:var(--c-gold-lt);font-weight:600}
.cine-cue{position:absolute;bottom:1.1rem;left:0;right:0;z-index:3;text-align:center;color:var(--c-muted);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;animation:cinebob 2.4s ease-in-out infinite}
@keyframes cinebob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:560px){.cine-credit{max-width:70vw}}
@media(max-width:760px){
  .cine-panel.cine-has-focal .cine-inner{max-width:640px;padding-right:0}
  .cine-focal{top:4.35rem;right:1rem;transform:none;width:112px;padding:4px;opacity:.92}
  .cine-focal img,.cine-focal-portrait img{height:88px;border-width:2px}
  .cine-focal figcaption{display:none}
  .cine-focal-triptych{width:156px;gap:2px}
  .cine-focal-triptych img{height:82px;border-width:1px}
  .cine-focal-triptych div span{display:none}
  .cine-panel.cine-dream{justify-content:flex-start;padding-top:12.75rem}
  .cine-dream .cine-bg{background-position:74% center;opacity:.28}
  .cine-dream .cine-bg::after{background:linear-gradient(0deg,rgba(5,15,31,.93) 8%,rgba(5,15,31,.72) 72%,rgba(5,15,31,.38))}
  .cine-dream .cine-inner{padding-right:0;margin:0 auto}
  .dream-compare{top:4.4rem;left:1rem;right:1rem;transform:none;width:auto;gap:.4rem}
  .dream-compare figure{padding:3px}
  .dream-compare img{height:82px;border-width:2px;object-position:center 43%}
  .dream-compare figcaption{padding:.25rem .15rem .18rem;font-size:.5rem}
  .dream-compare figcaption b{font-size:.56rem}
  .dream-compare figcaption>span{display:none}
  .cine-dream .cine-h1{font-size:clamp(1.55rem,8vw,2rem)}
  .cine-dream .cine-line{font-size:.86rem;line-height:1.55}
  .cine-dream .cine-vision-note{font-size:.76rem;line-height:1.45;margin-top:.7rem}
  .cine-dream .cine-acts{margin-top:.8rem}
}

/* ── 34. Docent Sheet Mode (forced bottom-sheet for the cinematic lane) ── */
.ai-docent.sheet-mode{position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;max-height:64vh;border-left:none;border-top:1px solid var(--c-border);border-radius:14px 14px 0 0;transform:translateY(calc(100% - 54px));transition:transform .32s cubic-bezier(.3,.7,.3,1);z-index:1600;box-shadow:0 -10px 30px rgba(0,0,0,.4)}
.ai-docent.sheet-mode.open{transform:translateY(0)}
.cine-scrim{position:fixed;inset:0;z-index:1550;background:rgba(3,6,14,.6);opacity:0;pointer-events:none;transition:.25s}
.cine-scrim.open{opacity:1;pointer-events:auto}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:1000px){
  .museum-layout{grid-template-columns:1fr}
  .ai-docent{position:fixed;bottom:0;left:0;right:0;height:auto;max-height:55vh;border-left:none;border-top:1px solid var(--c-border);transform:translateY(calc(100% - 50px));transition:transform .3s ease;z-index:800;top:auto}
  .ai-docent.open{transform:none}
  .room-jump{display:none}
}
@media(max-width:720px){
  .wing-hero,.room{padding-left:1.5rem;padding-right:1.5rem}
  .wing-footer,.wing-footer.wing-footer{padding:1.75rem 1.5rem}
  .wing-footer{flex-direction:column;align-items:stretch;text-align:center}
  .tour-paths{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .exit-options{grid-template-columns:1fr}
  .person{grid-template-columns:1fr}
  .site-nav{padding:env(safe-area-inset-top) 1.25rem 0}
  .nav-loc{display:none}
  .museum-map{padding:0 1.25rem 3rem}
}
@media(max-width:768px){
  /* Single compact row: logo mark left, hamburger right. Everything else
     (mode toggle, lang toggle, Special Exhibition, Show me, Entry) moves
     into a dropdown panel opened by the hamburger -- see initNavMenu(). */
  .site-nav{padding:env(safe-area-inset-top) 1rem 0}
  .nav-brand-text{display:none}
  .nav-loc{display:none}
  .nav-hamburger{display:flex}
  .nav-controls{
    display:none;
    position:fixed;
    top:var(--nav-h);
    left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:.6rem;
    background:rgba(5,15,31,.97);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--c-border);
    padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
    z-index:1000;
    max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
  }
  .nav-controls.open{display:flex}
  .nav-controls .lensbar-seg{width:100%}
  .nav-controls .lensbar-seg button{flex:1;text-align:center}
  .nav-controls .showme-btn,.nav-controls .lang-btn,.nav-controls .nav-link{width:100%;text-align:center;padding:.65rem;border-radius:var(--r);border:1px solid var(--c-border)}
}
@media(max-width:480px){
  .artifacts{grid-template-columns:1fr}
  .tour-paths{grid-template-columns:1fr}
  .tl-item{grid-template-columns:56px 1fr}
  .painting-pair,.timeline-wall{grid-template-columns:1fr}
  .painting img{height:240px}
  .room-hero{max-height:280px}
  .portrait-gallery{grid-template-columns:1fr 1fr;gap:.75rem}
  .historical-portrait img{height:210px}
  .story-portrait{float:none;width:100%;margin:0 0 1rem;display:grid;grid-template-columns:120px 1fr}
  .story-portrait img{height:155px}
}
@media(max-width:560px){
  .cine-panel{padding:4.5rem 1.25rem 4rem}
  .intake-card{padding:1.9rem 1.4rem}
}
@media(max-width:768px){
  /* An open "A little more" peek can make a scene's content taller than
     the fixed-height scroll-snap panel. Let that panel scroll internally
     (rather than clip the overflow or fight the outer mandatory snap),
     with enough bottom clearance for the collapsed AI Docent bar. The
     outer .cine-scroll's snap behavior is untouched -- .peek-open only
     ever applies to whichever single panel currently has an open peek. */
  .cine-panel.peek-open{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    justify-content:flex-start;
    padding-bottom:calc(4rem + 54px + env(safe-area-inset-bottom));
  }
  /* The peek's own 360px cap (sized for desktop) clips longer scenes (e.g.
     Scene II) well before the panel-scroll fix above even comes into play.
     Let it grow to its natural height on mobile; the now-scrollable panel
     takes over from there. */
  .cine-peek.open{max-height:none}
}
/* Tap/click glossary for unfamiliar Korean terms in English text. */
.en .k-term{position:relative;color:inherit;text-decoration:underline dotted var(--c-gold,#C28615);text-underline-offset:.2em;cursor:help}
.en .k-term:focus{outline:2px solid var(--c-gold,#C28615);outline-offset:3px;border-radius:2px}
.k-tooltip{position:fixed;z-index:200;width:max-content;max-width:min(19rem,calc(100vw - 1.5rem));padding:.65rem .8rem;border:1px solid rgba(194,134,21,.5);border-radius:.45rem;background:#071b3f;color:#f7f1e5;font:500 .82rem/1.45 Inter,sans-serif;box-shadow:0 10px 28px rgba(0,0,0,.28);white-space:normal;pointer-events:none}
.k-tooltip::before{content:"";position:absolute;border-width:.38rem;border-style:solid}
.k-tooltip--arrow-bottom::before{left:var(--arrow-x,.8rem);top:100%;border-color:#071b3f transparent transparent transparent}
.k-tooltip--arrow-top::before{left:var(--arrow-x,.8rem);bottom:100%;border-color:transparent transparent #071b3f transparent}