:root{
  --black:#050405;
  --cream:#f4ede0;
  --gold:#d7ab52;
  --gold-bright:#f0c878;
  --crimson:#9c2a3a;
  --crimson-bright:#c8465a;
  --indigo:#2a3568;
  --indigo-bright:#4a5aa8;
  --line: rgba(244,237,224,0.12);
  --ease: cubic-bezier(.16,.8,.24,1);
  --ease2: cubic-bezier(.22,1,.36,1);
  --gx:50%; --gy:30%;
  --gc1:120,90,70; --gc2:40,30,60;
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:'Noto Sans KR', sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:default;
  word-break:keep-all; /* never split a Korean word/particle mid-syllable */
  overflow-wrap:break-word;
}
::selection{ background:var(--gold); color:var(--black); }
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:var(--black); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--crimson-bright),var(--gold-bright)); border-radius:6px; }

.serif{ font-family:'Noto Serif KR', serif; }
a{ color:inherit; }

/* ================= AMBIENT BACKDROP ================= */
#ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(closest-side at var(--gx) var(--gy), rgba(var(--gc1),0.55), transparent 70%),
    radial-gradient(closest-side at calc(100% - var(--gx)) calc(100% - var(--gy)), rgba(var(--gc2),0.45), transparent 70%),
    var(--black);
  transition: background 1.4s var(--ease2);
  filter:blur(40px) saturate(1.3);
}
#grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1s steps(4) infinite;
}
@keyframes grainShift{ 0%{transform:translate(0,0);} 25%{transform:translate(-2%,1%);} 50%{transform:translate(1%,-2%);} 75%{transform:translate(-1%,-1%);} 100%{transform:translate(0,0);} }
#vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  box-shadow: inset 0 0 18vw rgba(0,0,0,.75);
}

main{ position:relative; z-index:3; }

/* ================= progress ================= */
#progress{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:9999;
  background:linear-gradient(90deg, var(--crimson-bright), var(--gold-bright));
  box-shadow:0 0 12px rgba(240,200,120,.6);
  transition:width .06s linear;
}

/* ================= nav ================= */
nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 5vw; pointer-events:none;
}
nav .brand{ font-family:'Noto Serif KR',serif; font-weight:700; letter-spacing:.14em; font-size:14px; pointer-events:auto; text-shadow:0 2px 20px rgba(0,0,0,.8);}
nav ul{ display:flex; gap:38px; list-style:none; margin:0; padding:0; pointer-events:auto;}
nav a{ text-decoration:none; font-size:12.5px; letter-spacing:.1em; opacity:.8; text-shadow:0 2px 20px rgba(0,0,0,.8); transition:opacity .3s;}
nav a:hover{ opacity:1; color:var(--gold-bright); }

/* ================= hero ================= */
.hero{
  position:relative; height:100svh; width:100%; overflow:hidden;
  display:flex; align-items:flex-end; background:#000;
}
.hero .bg-wrap{ position:absolute; inset:-5%; overflow:hidden; }
.hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.25); filter:saturate(1.15) brightness(.6) contrast(1.05);
  animation:kenburns 22s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenburns{
  0%{ transform:scale(1.25) translate(0,0) rotate(0deg); }
  100%{ transform:scale(1.42) translate(-2%,-3%) rotate(.6deg); }
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,4,5,.1) 0%, rgba(5,4,5,.25) 45%, rgba(5,4,5,.92) 90%, var(--black) 100%);
}
.dust{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.dust i{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--gold-bright); opacity:0; box-shadow:0 0 8px 2px rgba(240,200,120,.5);
  animation:floatUp linear infinite;
}
@keyframes floatUp{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.7; }
  90%{ opacity:.4; }
  100%{ transform:translateY(-110vh) translateX(20px); opacity:0; }
}
.hero-content{ position:relative; z-index:3; padding:0 5vw 9vw; width:100%; }
.hero-eyebrow{
  font-size:12.5px; letter-spacing:.4em; text-transform:uppercase; color:var(--gold-bright);
  margin-bottom:20px; opacity:0; animation:fadeUp 1.2s var(--ease) .3s forwards;
}
.hero h1{
  font-family:'Noto Serif KR',serif; font-weight:900;
  font-size:clamp(52px,10vw,168px); line-height:.95; margin:0 0 22px;
  opacity:0; animation:fadeUp 1.3s var(--ease) .5s forwards;
  background:linear-gradient(100deg, var(--cream) 30%, var(--gold-bright) 50%, var(--cream) 70%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:fadeUp 1.3s var(--ease) .5s forwards, shimmer 7s linear infinite 2s;
}
@keyframes shimmer{ to{ background-position:-220% 0; } }
.hero p{
  max-width:600px; font-size:clamp(14px,1.6vw,18.5px); line-height:1.8; color:rgba(244,237,224,.8);
  opacity:0; animation:fadeUp 1.3s var(--ease) .85s forwards;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(32px);} to{opacity:1; transform:translateY(0);} }
.scroll-cue{
  position:absolute; bottom:38px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  opacity:0; animation:fadeUp 1s var(--ease) 1.6s forwards;
}
.scroll-cue .ring{ width:26px; height:26px; border:1px solid rgba(244,237,224,.35); border-radius:50%; position:relative; }
.scroll-cue .ring::after{ content:""; position:absolute; top:5px; left:50%; width:2px; height:8px; background:var(--gold-bright); transform:translateX(-50%); animation:scrollDot 1.8s ease-in-out infinite; }
@keyframes scrollDot{ 0%{ opacity:1; top:5px;} 60%{opacity:0; top:14px;} 100%{opacity:0; top:5px;} }
.scroll-cue span{ font-size:9.5px; letter-spacing:.3em; color:rgba(244,237,224,.5); }
@media (max-width:640px){
  /* hero text sits bottom-aligned and the paragraph's last line was
     landing right on top of the mouse/SCROLL cue — push the whole
     block up by roughly two lines of body text so they stop clashing */
  .hero-content{ padding-bottom:calc(9vw + 60px); }
}

/* ================= intro statement — stepped reveal, flickering candlelight =================
   One line at a time: each rises out of the dark, holds under candlelight,
   then dissolves before the next line takes its place. ================== */
.statement-stage{ position:relative; height:744vh; }
.statement-sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.stmt-glow{
  position:absolute; left:50%; top:40%; width:min(70vw,820px); height:min(70vw,820px);
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(255,176,92,.4), rgba(255,140,60,.14) 46%, transparent 72%);
  filter:blur(60px); mix-blend-mode:screen; pointer-events:none; z-index:0;
  animation: candleFlicker 3.3s ease-in-out infinite, candleDrift 6.4s ease-in-out infinite;
}
.stmt-line{
  position:absolute; left:0; right:0; margin:0 auto; z-index:1;
  max-width:960px; padding:0 6vw; text-align:center;
  font-family:'Noto Serif KR',serif; font-weight:300;
  font-size:clamp(24px,3.8vw,46px); line-height:1.65; color:var(--cream);
  opacity:0; will-change:opacity, transform, filter;
}
.stmt-line b{ color:var(--gold-bright); font-weight:600; }
.stmt-line.stmt-cite{
  font-family:'Noto Sans KR',sans-serif; font-weight:400; font-style:normal;
  font-size:13px; letter-spacing:.18em; color:rgba(244,237,224,.55);
}

@keyframes candleFlicker{
  0%   { opacity:.6;  transform:translate(-50%,-50%) scale(1);    }
  6%   { opacity:.78; transform:translate(-50%,-50%) scale(1.04); }
  13%  { opacity:.52; transform:translate(-50%,-50%) scale(.96);  }
  19%  { opacity:.72; transform:translate(-50%,-50%) scale(1.02); }
  27%  { opacity:.44; transform:translate(-50%,-50%) scale(.94);  }
  35%  { opacity:.7;  transform:translate(-50%,-50%) scale(1.05); }
  44%  { opacity:.5;  transform:translate(-50%,-50%) scale(.97);  }
  53%  { opacity:.8;  transform:translate(-50%,-50%) scale(1.06); }
  62%  { opacity:.46; transform:translate(-50%,-50%) scale(.95);  }
  71%  { opacity:.68; transform:translate(-50%,-50%) scale(1.01); }
  80%  { opacity:.4;  transform:translate(-50%,-50%) scale(.93);  }
  90%  { opacity:.74; transform:translate(-50%,-50%) scale(1.03); }
  100% { opacity:.6;  transform:translate(-50%,-50%) scale(1);    }
}
@keyframes candleDrift{
  0%, 100% { left:50%;   top:40%; }
  25%      { left:49.3%; top:41%; }
  50%      { left:50.7%; top:39.2%; }
  75%      { left:50.2%; top:40.6%; }
}
@keyframes candleTextGlow{
  0%   { text-shadow:0 0 16px rgba(255,180,100,.12); }
  19%  { text-shadow:0 0 24px rgba(255,180,100,.22); }
  35%  { text-shadow:0 0 12px rgba(255,180,100,.09); }
  53%  { text-shadow:0 0 28px rgba(255,180,100,.26); }
  71%  { text-shadow:0 0 14px rgba(255,180,100,.11); }
  90%  { text-shadow:0 0 22px rgba(255,180,100,.2);  }
  100% { text-shadow:0 0 16px rgba(255,180,100,.12); }
}

/* ================= generic single-screen stage =================
   Used for any standalone text moment (method note, corridor intro,
   room-gate copy): the block appears alone, holds long enough to
   read, then dissolves before the next stage takes the screen.
   ================================================================= */
.stage-block{ position:relative; height:300vh; }
.stage-sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.stage-content{ opacity:0; will-change:opacity, transform, filter; }
/* paragraph lines that cascade in one at a time, in reading order */
.lines{ display:block; }
.lines .ln{
  display:block; opacity:0; transform:translateY(14px);
  transition:opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.lines.in .ln{ opacity:1; transform:translateY(0); }
.lines.in .ln:nth-child(1){ transition-delay:.1s; }
.lines.in .ln:nth-child(2){ transition-delay:.65s; }
.lines.in .ln:nth-child(3){ transition-delay:1.2s; }
.lines.in .ln:nth-child(4){ transition-delay:1.75s; }
.lines.in .ln:nth-child(5){ transition-delay:2.3s; }
.lines.in .ln:nth-child(6){ transition-delay:2.85s; }

/* ================= artist's method (from press features) ================= */
.method{ text-align:center; padding:0 6vw min(12vw,140px); }
.method .tag{ font-size:12px; letter-spacing:.35em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:22px; }
.method h2{ font-family:'Noto Serif KR',serif; font-weight:700; font-size:clamp(28px,4.4vw,54px); margin:0 0 26px; }
.method p{ color:rgba(244,237,224,.68); font-size:15.5px; line-height:1.95; max-width:640px; margin:0 auto 20px; }
.method .method-quote{
  font-family:'Noto Serif KR',serif; font-style:normal; font-weight:400; color:var(--gold-bright);
  font-size:clamp(18px,2.2vw,26px); margin-top:34px;
}

/* ================= corridor intro ================= */
.corridor-intro{ text-align:center; padding:0 6vw min(14vw,160px); }
.corridor-intro .tag{ font-size:12px; letter-spacing:.35em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:22px;}
.corridor-intro h2{ font-family:'Noto Serif KR',serif; font-weight:700; font-size:clamp(30px,4.8vw,60px); margin:0 0 22px; }
.corridor-intro p{ color:rgba(244,237,224,.65); font-size:16px; line-height:1.9; max-width:640px; margin:0 auto;}

/* ================= ROOM WALK — a continuous horizontal filmstrip =================
   One sticky stage per room; a single track of every painting in that
   room, translated purely sideways as the visitor scrolls. Several are
   always in view together — like walking down a corridor with a row of
   paintings hung along the wall — with the one nearest centre swelling
   into sharp 3D focus and the rest tilting away into the distance.
   =================================================================== */
.room-walk{ position:relative; }
.room-walk-sticky{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:center; overflow:hidden;
}
.room-walk-track{
  display:flex; align-items:center; gap:5vw; padding:0 78vw;
  will-change:transform;
}
.walk-card{
  position:relative; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center;
  opacity:.4;
  transition:opacity .1s linear;
}
/* the figure is a fixed-size slot — every card gets the same box regardless
   of that painting's own aspect ratio, so the caption always lands in
   exactly the same place. The slot itself is sized to make the most of
   the screen: wide on a landscape monitor, tall on a portrait phone. */
.walk-card figure{
  margin:0; position:relative;
  display:flex; align-items:center; justify-content:center;
  perspective:1400px; transform-style:preserve-3d; will-change:transform, filter;
  width:min(68vw, 1300px); height:80svh;
}
/* .ph hugs the actual rendered image size (not the fixed figure slot), so
   the rim highlight/shadow never shows up as a hard box around empty
   space — it's confined exactly to the painting itself. */
.walk-card .ph{ position:relative; display:inline-flex; border-radius:2px; overflow:hidden; }
.walk-card img{
  display:block; max-width:100%; max-height:80svh; width:auto; height:auto;
  box-shadow:0 40px 100px -25px rgba(0,0,0,.75);
}
.walk-card .rim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.18) 0%, transparent 26%, transparent 74%, rgba(0,0,0,.38) 100%);
  mix-blend-mode:overlay;
}
/* a soft inward vignette right at the image's own edge — some scans have a
   bright white paper/canvas margin that, at full contrast against the black
   background, visibly sparkles as the card moves and gets re-rendered every
   frame. Darkening just that outer sliver removes the sparkle without
   visibly cropping or dimming the painting itself. */
.walk-card .ph::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 14px 3px rgba(0,0,0,.4);
}
/* a warm COB-track-light pool that brightens directly above whichever
   painting is nearest the centre, as if a spotlight is following it down
   the corridor. Pure soft light — no visible fixture, just the glow. */
.walk-card .spot{
  position:absolute; top:-8svh; left:50%; transform:translateX(-50%);
  width:52svh; height:52svh; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,228,185,.55), rgba(255,205,140,.18) 45%, transparent 72%);
  filter:blur(18px); mix-blend-mode:screen;
  opacity:0; pointer-events:none; z-index:-1;
  transition:opacity .15s linear;
}
.walk-card .cap{
  margin-top:20px; text-align:center; opacity:0; transition:opacity .2s linear;
  flex:0 0 auto;
  padding:16px 30px;
  background:linear-gradient(180deg, rgba(4,3,3,.62), rgba(4,3,3,.4) 70%, transparent);
  border-top:2px solid var(--gold-bright);
  border-radius:2px;
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
}
@media (orientation:portrait){
  .room-walk-track{ padding:0 92vw; gap:6vh; }
  .walk-card figure{ width:90vw; height:60svh; }
  .walk-card .cap{ margin-top:12px; padding:10px 18px; }
}
.walk-card .cap .idx{ font-size:10.5px; letter-spacing:.3em; color:var(--gold-bright); display:block; margin-bottom:8px; }
.walk-card .cap .t{ font-family:'Noto Serif KR',serif; font-size:clamp(17px,2vw,24px); font-weight:600; margin-bottom:6px; }
.walk-card .cap .m{ font-size:11px; letter-spacing:.05em; color:rgba(244,237,224,.55); }

/* ================= APPROACH (legacy, unused — kept only so nothing references
   an undefined class) — one painting at a time =================
   Every work gets its own long pinned stage: it rises out of the haze,
   tilts and swells into full 3D presence dead-centre, holds there for a
   generous stretch, then recedes — while the NEXT piece is already
   glimpsed small and blurred at the edge, waiting its turn.
   ======================================================================= */
.approach{ position:relative; height:270vh; }
.approach-sticky{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:center; justify-content:center;
  perspective:2000px; overflow:hidden;
}
.approach-fig{
  position:relative; will-change:transform, filter, opacity;
  max-width:88vw; max-height:82svh;
  transform-style:preserve-3d;
  cursor:pointer;
}
.approach-fig img{
  display:block; max-width:88vw; max-height:82svh; width:auto; height:auto;
  border-radius:1px;
  box-shadow:0 30px 100px -20px rgba(0,0,0,.7);
}
.approach-fig .rim{
  position:absolute; inset:0; pointer-events:none; border-radius:1px;
  background:linear-gradient(115deg, rgba(255,255,255,.20) 0%, transparent 24%, transparent 76%, rgba(0,0,0,.4) 100%);
  mix-blend-mode:overlay;
}
.approach-fig .edge-light{
  position:absolute; inset:0; pointer-events:none; border-radius:1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.approach-cap{
  position:absolute; left:50%; bottom:-14%; transform:translateX(-50%);
  text-align:center; white-space:nowrap; will-change:opacity, transform;
}
.approach-cap .idx{ font-size:11px; letter-spacing:.3em; color:var(--gold-bright); display:block; margin-bottom:10px; }
.approach-cap .t{ font-family:'Noto Serif KR',serif; font-size:clamp(20px,2.6vw,32px); font-weight:600; margin-bottom:8px; }
.approach-cap .m{ font-size:12px; letter-spacing:.06em; color:rgba(244,237,224,.55); }
.approach-glow{
  position:absolute; inset:-25%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--gc,215,171,82),.42), transparent 72%);
  filter:blur(55px); opacity:0; will-change:opacity;
}
/* the next two artworks, faint and small, waiting further down the corridor —
   a continuous row of paintings receding into the distance, never empty. */
.approach-ghost, .approach-ghost2{
  position:absolute; will-change:transform, opacity, filter;
  pointer-events:none;
}
.approach-ghost img{
  display:block; max-width:40vw; max-height:38svh; width:auto; height:auto;
  border-radius:1px;
}
.approach-ghost2 img{
  display:block; max-width:30vw; max-height:28svh; width:auto; height:auto;
  border-radius:1px;
}

.room-title{
  position:fixed; left:5vw; bottom:8vh; z-index:5; pointer-events:none;
  opacity:0; transition:opacity .6s var(--ease);
  max-width:min(90vw,620px);
  padding:20px 28px;
  background:linear-gradient(100deg, rgba(4,3,3,.72), rgba(4,3,3,.42) 60%, transparent);
  border-left:2px solid var(--gold-bright);
  border-radius:2px;
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
}
.room-title.show{ opacity:1; }
.room-title .k{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-bright); display:block; margin-bottom:10px;
}
.room-title h4{
  font-family:'Noto Serif KR',serif; font-weight:600; font-size:clamp(22px,3vw,38px); margin:0;
  color:var(--cream);
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}

/* ================= divider (room gate — doors part to reveal the next room) =================
   Its own pinned screen too: the gate opens once, the copy holds long
   enough to read, then both dissolve as the next room's stage begins. */
.divider-wrap{ position:relative; height:230vh; }
.divider{
  position:sticky; top:0; height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
}
.divider .num{ position:absolute; font-family:'Noto Serif KR',serif; font-weight:900; font-size:min(46vw,620px); color:rgba(244,237,224,.035); line-height:1; user-select:none; }
.divider-inner{
  position:relative; z-index:4; opacity:0; will-change:transform, opacity, filter;
  padding:48px 8vw; border-radius:4px;
  background:radial-gradient(closest-side, rgba(3,2,2,.62), transparent 75%);
}
.divider .tag{
  font-size:12px; letter-spacing:.4em; text-transform:uppercase; color:var(--gold-bright); display:block; margin-bottom:24px;
}
.divider h3{
  font-family:'Noto Serif KR',serif; font-weight:700; font-size:clamp(34px,6vw,86px); margin:0 0 20px;
  color:var(--cream);
  text-shadow:0 4px 20px rgba(0,0,0,.6);
}
.divider p{
  color:rgba(244,237,224,.75); font-size:15.5px; line-height:1.85; max-width:560px; margin:0 auto;
}
.divider .rule{ width:1px; height:70px; background:linear-gradient(var(--gold-bright),transparent); margin:0 auto 30px; }
.gate-panel{
  position:absolute; top:0; bottom:0; width:52%; z-index:3; pointer-events:none;
  background:linear-gradient(180deg,#0a0806,#050405);
  will-change:transform; transition:transform 1.6s var(--ease2);
}
.gate-panel.left{ left:0; border-right:1px solid rgba(244,237,224,.08); transform:translateX(0); }
.gate-panel.right{ right:0; border-left:1px solid rgba(244,237,224,.08); transform:translateX(0); }
.divider.in .gate-panel.left{ transform:translateX(-100%); }
.divider.in .gate-panel.right{ transform:translateX(100%); }

.walk-hint{
  position:fixed; bottom:34px; left:50%; transform:translateX(-50%); z-index:60;
  font-size:10.5px; letter-spacing:.28em; color:rgba(244,237,224,.4); text-transform:uppercase;
  display:flex; align-items:center; gap:12px; pointer-events:none; opacity:0; transition:opacity .5s;
}
.walk-hint.show{ opacity:1; }
.walk-hint .bar{ width:130px; height:2px; background:rgba(244,237,224,.15); position:relative; overflow:hidden; border-radius:2px;}
.walk-hint .bar i{ position:absolute; inset:0; width:var(--wp,0%); background:linear-gradient(90deg,var(--crimson-bright),var(--gold-bright)); }

/* ================= index grid (전체 색인) ================= */
.index-section{ padding:min(14vw,180px) 5vw; border-top:1px solid var(--line); }
.section-head{ max-width:820px; margin:0 auto 60px; text-align:center; }
.section-head .tag{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; display:block; }
.section-head h2{ font-family:'Noto Serif KR',serif; font-size:clamp(28px,4vw,50px); font-weight:700; margin:0 0 18px; }
.section-head p{ color:rgba(244,237,224,.6); font-size:15px; line-height:1.8; }

.tabs{ display:flex; justify-content:center; gap:10px; margin-bottom:56px; flex-wrap:wrap; }
.tabs button{
  background:rgba(244,237,224,.03); border:1px solid var(--line); color:rgba(244,237,224,.7);
  padding:11px 24px; border-radius:999px; font-size:12.5px; letter-spacing:.05em; cursor:pointer;
  transition:all .35s var(--ease); font-family:'Noto Sans KR',sans-serif; backdrop-filter:blur(6px);
}
.tabs button:hover{ border-color:var(--gold); color:var(--cream); }
.tabs button.active{ background:linear-gradient(120deg,var(--crimson),var(--indigo)); border-color:transparent; color:#fff; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:22px; max-width:1500px; margin:0 auto; }
.card{ cursor:pointer; opacity:0; transform:translateY(36px) scale(.97); transition:opacity .3s; }
.card.show{ animation:cardIn .9s var(--ease) forwards; }
@keyframes cardIn{ to{opacity:1; transform:translateY(0) scale(1);} }
.card .ph{ position:relative; overflow:hidden; border-radius:3px; background:#141110; aspect-ratio:4/3; }
.card .ph img{
  width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease2), filter .5s;
  transform:scale(1.1); /* crops in slightly so a painting's own white paper/canvas edge doesn't show in the thumbnail */
}
.card:hover .ph img{ transform:scale(1.22) rotate(.3deg); }
.card .ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.6)); opacity:0; transition:opacity .4s; }
.card:hover .ph::after{ opacity:1; }
.card .meta{ padding:14px 2px; }
.card .meta .t{ font-family:'Noto Serif KR',serif; font-size:15px; margin-bottom:4px; }
.card .meta .m{ font-size:11px; color:rgba(244,237,224,.5); }

/* ================= lightbox — deep space viewer ================= */
.lightbox{
  position:fixed; inset:0; z-index:2000; background:#020103;
  display:flex; align-items:center; justify-content:center; padding:5vw;
  opacity:0; pointer-events:none; transition:opacity .55s var(--ease);
  overflow:hidden;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
/* warm, softly flickering points like distant candlelight rather than
   cold hard-edged dust specks — bigger, blurred, amber-toned glows with
   an irregular (not metronomic) flicker */
.lb-stars{
  position:absolute; inset:-10%; pointer-events:none;
  background-image:
    radial-gradient(7px 11px at 8% 12%, rgba(255,205,120,.6), rgba(255,140,50,.18) 55%, transparent 75%),
    radial-gradient(5px 8px at 22% 68%, rgba(255,190,110,.5), rgba(255,130,40,.15) 55%, transparent 75%),
    radial-gradient(7px 11px at 38% 24%, rgba(255,200,115,.55), rgba(255,140,50,.16) 55%, transparent 75%),
    radial-gradient(5px 8px at 52% 82%, rgba(255,185,105,.45), rgba(255,125,40,.13) 55%, transparent 75%),
    radial-gradient(7px 11px at 66% 14%, rgba(255,210,125,.6), rgba(255,145,55,.18) 55%, transparent 75%),
    radial-gradient(5px 8px at 78% 58%, rgba(255,190,110,.5), rgba(255,130,40,.14) 55%, transparent 75%),
    radial-gradient(7px 11px at 88% 32%, rgba(255,200,115,.55), rgba(255,140,50,.16) 55%, transparent 75%),
    radial-gradient(5px 8px at 94% 78%, rgba(255,185,105,.45), rgba(255,125,40,.13) 55%, transparent 75%),
    radial-gradient(7px 11px at 14% 88%, rgba(255,195,112,.5), rgba(255,135,45,.15) 55%, transparent 75%),
    radial-gradient(5px 8px at 46% 46%, rgba(255,180,100,.4), rgba(255,120,35,.12) 55%, transparent 75%);
  background-repeat:no-repeat; opacity:0; filter:blur(1.5px);
  transition:opacity 1.2s var(--ease) .1s;
  animation:candleFlicker 3.4s ease-in-out infinite;
}
.lightbox.open .lb-stars{ opacity:1; }
@keyframes candleFlicker{
  0%, 100%{ opacity:.7; filter:blur(1.5px) brightness(1); }
  18%{ opacity:.5; filter:blur(2px) brightness(.85); }
  34%{ opacity:.85; filter:blur(1.2px) brightness(1.15); }
  52%{ opacity:.6; filter:blur(1.8px) brightness(.92); }
  68%{ opacity:.8; filter:blur(1.3px) brightness(1.08); }
  84%{ opacity:.55; filter:blur(1.7px) brightness(.9); }
}
.lb-nebula{
  position:absolute; inset:-20%; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side at 50% 50%, rgba(var(--gc1,120,90,70),.5), transparent 70%);
  filter:blur(80px); opacity:0; transition:opacity 1s var(--ease);
}
.lightbox.open .lb-nebula{ opacity:.85; }
.lightbox .box{
  position:relative; z-index:2; max-width:94vw; width:100%; text-align:center;
  transform:scale(.9); transition:transform .55s var(--ease);
}
.lightbox.open .box{ transform:scale(1); }
.lightbox img{
  max-width:90vw; max-height:74svh; width:auto; height:auto;
  margin-top:64px; /* leaves clear room above for the prev/next arrows, off the picture */
  border-radius:2px; box-shadow:0 0 120px -10px rgba(var(--gc1,120,90,70),.35), 0 60px 160px -30px rgba(0,0,0,.9);
}
.lightbox .t{ font-family:'Noto Serif KR',serif; font-size:24px; margin-top:28px; }
.lightbox .m{ font-size:13px; color:rgba(244,237,224,.55); margin-top:8px; }
.lightbox .close{ position:absolute; top:30px; right:5vw; z-index:3; font-size:13px; letter-spacing:.15em; cursor:pointer; border:1px solid var(--line); padding:10px 20px; border-radius:999px; background:rgba(0,0,0,.3); color:var(--cream); backdrop-filter:blur(6px); }
.lightbox .close:hover{ border-color:var(--gold); }
/* moved off the picture entirely — a small pair of arrows above it, not overlapping */
.lightbox .nav-btn{
  position:absolute; top:26px; transform:none; z-index:3;
  background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:50%;
  color:var(--cream); font-size:20px; line-height:1; cursor:pointer; opacity:.7;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); transition:opacity .2s, border-color .2s;
}
.lightbox .nav-btn:hover{ opacity:1; border-color:var(--gold); }
.lightbox .prev{ left:calc(50% - 64px); } .lightbox .next{ left:calc(50% + 24px); }

/* ================= unified player — walk-through autoplay + bgm, one control =================
   A single toggle drives both. Paused: the full pill (toggle, next-track
   note, speed, progress) sits at the top-right. Playing: everything but
   the toggle collapses away to the right, leaving just a play/pause
   indicator floating at the edge. */
.player{
  position:fixed; right:5vw; top:78px; z-index:400;
  display:flex; align-items:center;
  background:rgba(10,8,6,.55); border:1px solid var(--line); border-radius:999px;
  padding:9px; backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -15px rgba(0,0,0,.6);
  transition:padding .5s var(--ease);
}
.p-play{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(244,237,224,.25);
  background:linear-gradient(135deg, var(--crimson), var(--indigo)); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;
  transition:transform .25s var(--ease), box-shadow .25s;
}
.p-play:hover{ transform:scale(1.08); box-shadow:0 0 0 6px rgba(244,237,224,.06); }
.p-play svg{ margin-left:1px; }

.player-extra{
  display:flex; align-items:center; gap:12px;
  max-width:340px; opacity:1; margin-left:14px;
  overflow:hidden;
  transition:max-width .55s var(--ease), opacity .3s var(--ease), margin-left .55s var(--ease);
}
.player.collapsed{ padding-right:9px; }
.player.collapsed .player-extra{
  max-width:0; opacity:0; margin-left:0; pointer-events:none;
}

/* 끔 → 중간 → 크게 순으로 순환하는 볼륨 버튼 — 아이콘과 크기가 함께 커진다 */
.p-note{
  position:relative;
  width:30px; height:30px; border-radius:50%; border:1px solid rgba(244,237,224,.2);
  background:transparent; color:var(--gold-bright); font-size:16px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  margin-left:10px;
  transition:opacity .25s var(--ease), border-color .25s, transform .25s, font-size .25s var(--ease);
}
/* stays put next to the play/pause toggle even while the rest collapses away */
.p-note:hover{ opacity:1; border-color:var(--gold); transform:scale(1.08); }
.p-note.loud{ font-size:20px; border-color:rgba(244,237,224,.32); }
.p-note.muted{ font-size:14px; color:rgba(244,237,224,.4); }
.p-note.muted::after{
  content:''; position:absolute; left:15%; right:15%; top:50%;
  border-top:1px solid rgba(244,237,224,.65); transform:rotate(-45deg);
}

.p-speeds{ display:flex; gap:6px; flex:0 0 auto; }
.p-speed{
  width:30px; height:30px; border-radius:50%; border:1px solid transparent;
  background:transparent; font-size:15px; cursor:pointer; opacity:.45;
  transition:all .25s var(--ease); display:flex; align-items:center; justify-content:center;
}
.p-speed:hover{ opacity:.8; }
.p-speed.active{ opacity:1; border-color:var(--gold); background:rgba(215,171,82,.12); }
.p-track{ width:90px; height:2px; background:rgba(244,237,224,.14); border-radius:2px; position:relative; overflow:hidden; flex:0 0 auto; }
.p-track-fill{ position:absolute; inset:0; width:0%; background:linear-gradient(90deg,var(--crimson-bright),var(--gold-bright)); }
@media (max-width:640px){
  /* mobile keeps only play/pause + the note button — no speed presets,
     no progress track, nothing else floating over the artwork */
  .player-extra{ display:none; }
  .player{ top:14px; right:3vw; padding:6px; background:rgba(10,8,6,.4); }
  .p-play{ width:28px; height:28px; }
  .p-note{ width:26px; height:26px; font-size:14px; margin-left:8px; }
  .p-note.loud{ font-size:17px; }

  /* smaller room title, pushed down closer to the very bottom edge so it
     no longer collides with the painting's own caption above it */
  .room-title{ bottom:2vh; left:4vw; max-width:80vw; padding:10px 16px; }
  .room-title .k{ font-size:9px; letter-spacing:.24em; margin-bottom:5px; }
  .room-title h4{ font-size:16px; }
}

/* ================= bio ================= */
.bio{ padding:min(14vw,180px) 5vw; border-top:1px solid var(--line); }
.bio-grid{ display:grid; grid-template-columns:340px 1fr; gap:70px; max-width:1300px; margin:0 auto; align-items:start; }
/* the portrait stays still — instead it's the painting behind him that's
   alive, a slow Ken-Burns-style drift, like the light in the room is
   shifting rather than the man himself moving */
.bio-photo{
  position:relative; border-radius:4px; overflow:hidden;
  aspect-ratio:340/430; perspective:900px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.7);
}
.bio-photo-bg{
  position:absolute; inset:-6%; background-size:cover; background-position:center;
  filter:saturate(1.25) brightness(.5) blur(1.5px);
  will-change:transform;
  animation:bioBgDrift 16s ease-in-out infinite alternate;
}
@keyframes bioBgDrift{
  0%{ transform:scale(1.08) translate(0,0); }
  100%{ transform:scale(1.22) translate(-3%,-2.5%); }
}
.bio-photo-bg::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 28%, transparent 25%, rgba(4,3,3,.8) 100%);
}
.bio-photo-figure{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  width:100%; height:auto; display:block; filter:contrast(1.05);
}
.bio-photo .frame{ position:absolute; inset:8px; border:1px solid var(--gold); border-radius:2px; opacity:.5; pointer-events:none; z-index:2; }
.bio-text h3{ font-family:'Noto Serif KR',serif; font-size:clamp(28px,3vw,40px); margin:0 0 6px; }
.bio-text .role{ color:var(--gold-bright); font-size:13.5px; letter-spacing:.08em; margin-bottom:28px; }
.bio-text p.desc{ line-height:1.9; color:rgba(244,237,224,.75); margin-bottom:40px; font-size:15px; }
/* a quick-read strip of career numbers ahead of the full CV — the scale of
   the career (12 solo shows, 6 international exhibitions, 11 slide-projection
   screenings across four decades) reads at a glance before the detail */
.cv-highlight{
  display:flex; flex-wrap:wrap; gap:0; margin-bottom:36px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.cv-highlight .hl{
  flex:1 1 140px; padding:20px 18px; text-align:center;
  border-right:1px solid var(--line);
}
.cv-highlight .hl:last-child{ border-right:none; }
.cv-highlight .hl b{
  display:block; font-family:'Noto Serif KR',serif; font-weight:700;
  font-size:clamp(24px,2.6vw,34px); color:var(--gold-bright); line-height:1;
  margin-bottom:8px;
}
.cv-highlight .hl span{ font-size:11.5px; color:rgba(244,237,224,.6); letter-spacing:.02em; }

.cv-cols{ display:grid; grid-template-columns:1fr 1fr; gap:36px 44px; }
.cv-block--wide{ grid-column:1 / -1; }
.cv-block h4{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 14px; border-bottom:1px solid var(--line); padding-bottom:10px;}
.cv-block ul{ list-style:none; margin:0; padding:0; }
.cv-block li{ font-size:13px; line-height:2; color:rgba(244,237,224,.72); }
.cv-block .cv-list-inline{ column-width:340px; column-gap:40px; }
.cv-block .cv-list-inline li{ break-inside:avoid; }

/* ================= footer ================= */
footer{ border-top:1px solid var(--line); padding:80px 5vw 44px; text-align:center; }
footer .fmark{ font-family:'Noto Serif KR',serif; font-size:22px; margin-bottom:14px; }
footer .contact{ color:rgba(244,237,224,.6); font-size:13px; line-height:2; }
footer .copyright{ margin-top:44px; font-size:11px; color:rgba(244,237,224,.3); }

/* 누적 방문자 카운터 — 거의 안 보이게, 클릭/드래그에도 걸리지 않게 */
.visit-counter{
  position:fixed; right:6px; bottom:4px; z-index:1;
  opacity:.08; pointer-events:none; transition:opacity .3s;
  filter:grayscale(1);
}
.visit-counter img{ display:block; height:12px; width:auto; }

/* ================= reveal ================= */
.reveal{ opacity:0; transform:translateY(50px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ================= responsive ================= */
@media (max-width:860px){
  .bio-grid{ grid-template-columns:1fr; }
  /* width:100% is required here — with only absolutely-positioned children
     (bg/figure/frame) the box has nothing to size itself from in a 1fr
     grid track, so it was collapsing to 0×0 and the photo looked "gone" */
  .bio-photo{ width:100%; max-width:280px; margin:0 auto 20px; }
  .cv-cols{ grid-template-columns:1fr; }
  nav ul li:nth-child(n+3){ display:none; }
  .gate-panel{ width:56%; }
  .approach-ghost, .approach-ghost2{ display:none; }
}
@media (max-width:520px){
  nav ul{ display:none; }
  .divider .num{ font-size:70vw; }

  /* the brand name needs a translucent backdrop of its own on mobile —
     otherwise a bright painting scrolling behind it swallows the text.
     Sized and positioned to line up exactly with the player pill on the
     opposite side (top:14px, ~40px tall) instead of nav's own centering. */
  nav{ padding-top:0; padding-bottom:0; align-items:flex-start; }
  nav .brand{
    margin-top:14px;
    background:rgba(10,8,6,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    padding:12px 16px; border-radius:999px; border:1px solid rgba(244,237,224,.15);
    box-sizing:border-box; line-height:1;
  }

  /* CLOSE text is dropped to just the × mark, and the button is pulled in
     to the right edge with a little lift so it never sits on top of the
     next-arrow (which is centered, near the top) — the right edge is the
     easiest corner to reach one-handed on a phone */
  .lightbox .close .close-label{ display:none; }
  .lightbox .close{
    top:18px; right:3vw; padding:0; width:36px; height:36px;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:15px;
  }
}