/* ═══════════════════════════════════════════════════════════════
   1TA SCANDAL — opening titles as a scroll.
   CSS holds the END state of every beat; script.js supplies the
   FROM states through explicit fromTo tweens on one master timeline
   that is scrubbed against a single pinned .film.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --green-deep:#0B2A24; --green:#12433A; --grid:#1E5A4C;
  --purple:#5B2A7A; --mauve:#B26E9A; --cream:#F1E7A8;
  --fx-g:#5DBE4A; --fx-p:#E9A6B4; --fx-pu:#8B5CC4;
  --pink:#F6E1E4; --lilac:#C9C0E6;
  --sky:#F7C9C4; --sky2:#F3E4B7; --roof:#B4243A; --wall:#F2E2A6;
  --counter:#F0A567; --counter2:#E9855A; --kitchen:#F5DFA0;
  --egg:#5B2D7B; --egg-stripe:#EFE6C8; --carrot:#E63A3A; --onion:#E9EBC8;
  --paper:#F5F2C8; --fold1:#F6E39A; --fold2:#D9B85A;
  --desk:#111214; --board:#0E2E28;
  --road:#F5D9DA; --ground:#C98C6C; --mtn:#8B7FB0;
  --news:#F1EEDA; --card:#D3CFC0; --ink:#151515;
  --hud:#F4EFE4;
  --font-ui:"Space Grotesk",system-ui,sans-serif;
  --font-kr:"Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  --font-hand:"Caveat","Bradley Hand","Segoe Print",cursive;
  --font-title:"Archivo Black","Arial Black",Impact,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html,body{background:#000;color:var(--ink);font-family:var(--font-ui);overflow-x:hidden}
body{cursor:none;line-height:1.4}
a{color:inherit;text-decoration:none}
svg{display:block}
.svgdefs{position:absolute;width:0;height:0;overflow:hidden}
img{max-width:100%;display:block}

/* grain over everything */
.grain{position:fixed;inset:-20%;width:140%;height:140%;pointer-events:none;z-index:60;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,3%)}}

/* ── preloader ── */
.pre{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 30%,#12433A 0%,#071B17 55%,#000 100%);display:grid;place-items:center;overflow:hidden}
.pre__cone{position:absolute;left:50%;top:-10%;width:22vw;height:80vh;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);filter:blur(6px)}
.pre__disc{width:200px;height:200px;border-radius:50%;background:var(--cream);display:grid;place-content:center;text-align:center;font-family:var(--font-ui);color:#2A1B4A;box-shadow:0 0 0 12px rgba(0,0,0,.25),0 30px 60px rgba(0,0,0,.6);transform:rotateX(50deg) rotateZ(-10deg)}
.pre__disc span{font-size:11px;letter-spacing:.32em;font-weight:700}
.pre__disc b{font-size:34px;font-weight:700;letter-spacing:-.03em;font-family:var(--font-title)}
.pre__meta{position:absolute;left:5vw;right:5vw;bottom:5vh;display:flex;justify-content:space-between;color:#B7D5C6;font-size:11px;letter-spacing:.24em}
.pre__meta em{font-style:normal;font-variant-numeric:tabular-nums}

/* ── cursor ── */
.cur{position:fixed;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:99;opacity:0}
.cur-ring{position:fixed;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);mix-blend-mode:difference;pointer-events:none;z-index:99;opacity:0;display:grid;place-items:center;transition:width .25s,height .25s,margin .25s,background .25s}
.cur-ring span{font:700 9px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s;white-space:nowrap}
.cur-ring.is-active{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,255,255,.12)}
.cur-ring.is-active span{opacity:1}
@media (hover:none),(pointer:coarse){.cur,.cur-ring{display:none}body{cursor:auto}}

/* ── HUD ── */
.hud{position:fixed;inset:0 0 auto 0;z-index:70;display:flex;align-items:center;justify-content:space-between;padding:20px 28px;color:var(--hud);mix-blend-mode:difference;pointer-events:none}
.hud>*{pointer-events:auto}
.hud__brand{font-family:var(--font-title);font-size:20px;letter-spacing:.02em;display:flex;align-items:baseline;gap:6px}
.hud__brand b{background:linear-gradient(135deg,#8E6CFF,#FF6BD5);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:24px}
.hud__brand span{font-family:var(--font-ui);font-weight:500;font-size:11px;letter-spacing:.3em;opacity:.8}
.hud__mid{display:flex;gap:14px;align-items:baseline;font-size:11px;letter-spacing:.24em;font-variant-numeric:tabular-nums}
.hud__tc{font-size:15px;font-weight:700;letter-spacing:.08em}
.hud__of{opacity:.6}
.hud__nav{display:flex;gap:22px;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.pill{border:1px solid currentColor;border-radius:999px;padding:8px 16px}
.rail{position:fixed;left:0;right:0;top:0;height:2px;z-index:71;background:rgba(255,255,255,.08)}
.rail i{display:block;height:100%;width:100%;transform-origin:0 0;transform:scaleX(0);background:linear-gradient(90deg,#8E6CFF,#FF6BD5)}
.counter{position:fixed;left:28px;bottom:26px;z-index:70;color:var(--hud);mix-blend-mode:difference;font-size:11px;letter-spacing:.24em;display:flex;align-items:baseline;gap:8px}
.counter em{font-style:normal;font-size:20px;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}
.counter i{font-style:normal;opacity:.7;margin-left:10px}

/* ═════════════ FILM ═════════════ */
.film{position:relative;height:100vh;overflow:hidden;background:#000}
.beat{position:absolute;inset:0;overflow:hidden;visibility:hidden}
.beat:last-of-type{visibility:visible}
.credit{position:absolute;font-family:var(--font-kr);color:#2A2422;line-height:1.25;z-index:6}
.credit small{display:block;font-size:.72em;font-weight:300;letter-spacing:.06em;margin-bottom:.35em;opacity:.8}
.credit b{display:block;font-weight:700;font-size:1.25em;letter-spacing:.02em}
.credit span{display:block;font-weight:300;font-size:.78em;letter-spacing:.06em;margin-bottom:.4em;font-family:var(--font-ui)}
.film__hint{position:absolute;right:28px;bottom:26px;z-index:8;color:#EDE9DC;font-size:11px;letter-spacing:.24em;display:flex;align-items:center;gap:12px;mix-blend-mode:difference}
.film__hint i{width:22px;height:34px;border:1.5px solid currentColor;border-radius:12px;position:relative}
.film__hint i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:hint 1.6s ease-in-out infinite}
@keyframes hint{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* ── 1 · ident ── */
.b1{background:radial-gradient(ellipse at 50% 20%,#14483E 0%,#0B2A24 45%,#020806 100%)}
.b1__floor{position:absolute;left:-30%;right:-30%;top:34%;height:120%;transform-origin:50% 0;transform:perspective(900px) rotateX(62deg);
  background:linear-gradient(90deg,rgba(60,140,110,.22) 1px,transparent 1px) 0 0/60px 60px,linear-gradient(0deg,rgba(60,140,110,.22) 1px,transparent 1px) 0 0/60px 60px;
  -webkit-mask:radial-gradient(ellipse at 50% 12%,#000 0%,transparent 60%);mask:radial-gradient(ellipse at 50% 12%,#000 0%,transparent 60%)}
.b1__cone{position:absolute;left:50%;top:-8%;width:24vw;height:86vh;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(215,240,230,.12) 55%,rgba(255,255,255,0));clip-path:polygon(40% 0,60% 0,110% 100%,-10% 100%);filter:blur(5px);mix-blend-mode:screen}
.b1__stage{position:absolute;inset:0;perspective:1100px;transform-style:preserve-3d}
.b1__book{position:absolute;left:50%;top:50%;width:min(52vw,720px);aspect-ratio:400/260;transform:translate(-50%,-30%) rotateX(56deg) rotateZ(-12deg);transform-style:preserve-3d;transform-origin:50% 50%}
.b1__cover{position:absolute;inset:0;border-radius:6px;overflow:hidden;box-shadow:0 0 0 2px #2b1738}
.b1__cover svg{width:100%;height:100%}
.b1__pages{position:absolute;inset:0;border-radius:6px;background:#EFE8D2;transform:translateZ(-14px) translate(6px,8px);box-shadow:0 0 0 2px #C9BE9A}
.b1__book2{position:absolute;inset:0;border-radius:6px;background:#1E4C42;transform:translateZ(-30px) translate(-16px,18px);box-shadow:0 0 0 2px #0F2A24}
.b1__disc{position:absolute;left:44%;top:56%;width:34%;aspect-ratio:1;border-radius:50%;background:var(--cream);transform:translate(-50%,-50%);display:grid;place-content:center;text-align:center;color:#2A1B4A;font-family:var(--font-ui);opacity:0}
.b1__disc span{font-size:clamp(7px,.75vw,12px);letter-spacing:.32em;font-weight:700}
.b1__disc b{font-size:clamp(14px,2vw,32px);font-family:var(--font-title);letter-spacing:-.02em}
.b1__boy{position:absolute;left:49%;top:49.5%;width:min(5.2vw,76px);transform:translate(-50%,-100%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.b1__boy svg{width:100%;height:auto}
.b1__space{position:absolute;inset:0;perspective:700px;transform-style:preserve-3d;pointer-events:none}
.fx{position:absolute;left:50%;top:50%;font-family:var(--font-hand);font-weight:700;font-size:clamp(28px,4.4vw,74px);white-space:nowrap;letter-spacing:.02em;
  transform:translate(-50%,-50%) translate3d(var(--x),var(--y),0) rotateY(var(--r));text-shadow:0 0 1px rgba(0,0,0,.4),3px 4px 0 rgba(0,0,0,.35)}
.fx--g{color:var(--fx-g)}.fx--p{color:var(--fx-p)}.fx--pu{color:var(--fx-pu)}
.b1__black{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}

/* ── 2 · portrait ── */
.b2__dark{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,#1B5A4B 0%,#0B2A24 45%,#03110E 100%)}
.b2__pink{position:absolute;inset:0;background:radial-gradient(ellipse at 45% 40%,#FBEDEA 0%,#F5DDE1 45%,#C9C0E6 100%)}
.b2__spot{position:absolute;left:50%;top:-20%;width:40vw;height:90vh;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);filter:blur(10px);opacity:0}
.b2__face{position:absolute;left:50%;top:14%;width:min(46vh,44vw);transform:translateX(-50%)}
.b2__face svg{width:100%;height:auto}
.b2__face--boy{opacity:0}
.paper{position:absolute;left:-30%;top:-40%;width:60vw;height:180vh;background:#F7F4EA;box-shadow:0 20px 60px rgba(0,0,0,.25);transform:rotate(-24deg) translate(-160%,0);opacity:0;
  background-image:repeating-linear-gradient(0deg,transparent 0 22px,rgba(120,120,140,.28) 22px 24px);background-size:100% 100%}
.paper--2{width:34vw;left:10%;top:-30%;transform:rotate(-30deg) translate(-200%,0)}
.paper--3{width:22vw;left:40%;top:-20%;transform:rotate(-18deg) translate(-260%,0)}
.b2__credit{left:60%;top:47%;font-size:clamp(14px,1.7vw,24px)}

/* ── 3 · street ── */
.b3{background:var(--sky)}
.b3__cam{position:absolute;inset:-12%;transform-origin:50% 60%}
.b3__sky{position:absolute;inset:0;background:linear-gradient(180deg,#F5B7C0 0%,#F7CDC5 40%,#F4E3B6 100%)}
.b3__cloud{position:absolute;background:#FBF6DF;border-radius:999px;box-shadow:0 8px 0 -2px #EFD8B8;filter:drop-shadow(0 6px 0 rgba(0,0,0,.02))}
.b3__cloud::before,.b3__cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.b3__cloud.c1{left:6%;top:16%;width:22vw;height:6vw}.b3__cloud.c1::before{left:18%;top:-70%;width:40%;height:160%}.b3__cloud.c1::after{left:50%;top:-40%;width:32%;height:130%}
.b3__cloud.c2{left:56%;top:8%;width:18vw;height:5vw}.b3__cloud.c2::before{left:20%;top:-60%;width:36%;height:150%}.b3__cloud.c2::after{left:52%;top:-30%;width:30%;height:120%}
.b3__cloud.c3{left:78%;top:30%;width:14vw;height:4vw}.b3__cloud.c3::before{left:24%;top:-60%;width:36%;height:150%}
.b3__bld{position:absolute;left:14%;top:26%;width:66%;height:auto}
.b3__palm{position:absolute;right:-2%;top:6%;width:22vw;transform:scaleX(-1) rotate(10deg);transform-origin:80% 20%}
.b3__fg{position:absolute;left:0;top:14%;width:min(34vw,60vh);filter:blur(4px) saturate(.6) brightness(.55);transform:translateX(-140%)}
.b3__fg svg{width:100%;height:auto}
.b3__credit{right:8%;top:14%;font-size:clamp(13px,1.5vw,22px)}

/* ── 4 · kitchen ── */
.b4{background:radial-gradient(ellipse at 40% 20%,#FBECC0 0%,var(--kitchen) 55%,#F1C77A 100%)}
.b4__counter{position:absolute;inset:0;opacity:0}
.b4__board{position:absolute;left:-10%;right:-10%;top:52%;bottom:-6%;background:linear-gradient(180deg,var(--counter) 0%,var(--counter2) 100%);transform:skewY(-6deg);box-shadow:0 -10px 0 #D98A50 inset}
.b4__potato{position:absolute;left:66%;top:44%;width:14vw;transform:rotate(-8deg)}
.b4__onion{position:absolute;left:84%;top:40%;width:11vw}
.b4__carrot{position:absolute;left:-2%;top:70%;width:34vw;transform:rotate(14deg)}
.b4__egg{position:absolute;left:24%;top:56%;width:38vw;transform:rotate(-8deg);transform-origin:50% 50%}
.b4__hand{position:absolute;left:34%;top:-4%;width:16vw;transform:rotate(190deg) translate(0,-100%);transform-origin:50% 100%;filter:drop-shadow(0 12px 10px rgba(0,0,0,.18))}
.b4__scene{position:absolute;inset:0}
.b4__woman{position:absolute;left:50%;top:6%;width:min(70vh,58vw);transform:translateX(-50%) scale(1)}
.b4__woman svg{width:100%;height:auto}
.b4__egg2{position:absolute;left:38%;top:34%;width:min(40vh,34vw);transform:rotate(-14deg)}
.b4__knife{position:absolute;left:12%;bottom:-6%;width:5vw;transform:rotate(-30deg)}
.b4__credit{left:8%;top:22%;font-size:clamp(14px,1.7vw,24px)}

/* ── 5 · chop ── */
.b5{background:radial-gradient(ellipse at 40% 50%,#F5E2A6 0%,#F1D588 60%,#E4B4A0 100%)}
.b5__hair{position:absolute;left:12%;bottom:-8%;width:20vw;height:20vw;border-radius:50% 50% 30% 30%;background:#2E2420;transform:translateY(120%)}
.b5__stage{position:absolute;inset:0}
.b5__egg{position:absolute;left:12%;top:16%;width:40vw;transform:rotate(-6deg);opacity:0}
.b5__carrot{position:absolute;left:4%;top:44%;width:26vw;transform:rotate(-8deg);opacity:0}
.b5__onion{position:absolute;left:66%;top:44%;width:14vw;opacity:0}
.b5__slash{position:absolute;left:44%;top:-10%;width:2.4vw;height:120vh;background:#fff;clip-path:polygon(50% 0,100% 100%,0 100%);transform-origin:50% 0;transform:rotate(-16deg) scaleY(0);opacity:0}
.b5__slash.s2{left:56%;transform:rotate(-8deg) scaleY(0)}.b5__slash.s3{left:36%;transform:rotate(-24deg) scaleY(0)}
.b5__egg-cut{position:absolute;left:14%;top:14%;width:40vw;height:12vw;transform:rotate(-8deg)}
.b5__egg-cut i{position:absolute;left:calc(var(--i)*2.9vw);top:0;width:2.8vw;height:8vw;border-radius:6px;background:repeating-linear-gradient(90deg,var(--egg) 0 .34vw,var(--egg-stripe) .34vw .68vw);box-shadow:0 .5vw 0 rgba(60,20,90,.35);transform:rotate(calc(var(--i)*3deg)) translateY(calc(var(--i)*var(--i)*.09vw))}
.b5__egg-cut i:nth-child(1){--i:0}.b5__egg-cut i:nth-child(2){--i:1}.b5__egg-cut i:nth-child(3){--i:2}.b5__egg-cut i:nth-child(4){--i:3}.b5__egg-cut i:nth-child(5){--i:4}.b5__egg-cut i:nth-child(6){--i:5}.b5__egg-cut i:nth-child(7){--i:6}.b5__egg-cut i:nth-child(8){--i:7}.b5__egg-cut i:nth-child(9){--i:8}.b5__egg-cut i:nth-child(10){--i:9}.b5__egg-cut i:nth-child(11){--i:10}.b5__egg-cut i:nth-child(12){--i:11}
.b5__cap{position:absolute;left:35vw;top:1vw;width:5vw}
.b5__carrot-cut{position:absolute;left:2%;top:46%;width:30vw;height:16vw}
.b5__carrot-cut i{position:absolute;width:5vw;height:3.4vw;border-radius:5px;background:var(--carrot);box-shadow:inset -.6vw 0 0 #B92B2B,0 .6vw 0 #9B1F1F;transform:rotate(var(--r))}
.b5__carrot-cut i:nth-child(1){left:0;top:20%;--r:-14deg}.b5__carrot-cut i:nth-child(2){left:24%;top:4%;--r:10deg}.b5__carrot-cut i:nth-child(3){left:12%;top:58%;--r:22deg}.b5__carrot-cut i:nth-child(4){left:42%;top:40%;--r:-30deg}.b5__carrot-cut i:nth-child(5){left:60%;top:8%;--r:6deg}.b5__carrot-cut i:nth-child(6){left:70%;top:52%;--r:-18deg}.b5__carrot-cut i:nth-child(7){left:36%;top:78%;--r:40deg}
.b5__onion-cut{position:absolute;left:62%;top:40%;width:22vw;height:22vw}
.b5__onion-cut i{position:absolute;left:40%;top:10%;width:20%;height:80%;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--onion);box-shadow:inset 0 0 0 3px #CDD1A2;transform-origin:50% 100%;transform:rotate(calc(var(--k)*14deg - 42deg))}
.b5__onion-cut i:nth-child(1){--k:0}.b5__onion-cut i:nth-child(2){--k:1}.b5__onion-cut i:nth-child(3){--k:2}.b5__onion-cut i:nth-child(4){--k:3}.b5__onion-cut i:nth-child(5){--k:4}.b5__onion-cut i:nth-child(6){--k:5}.b5__onion-cut i:nth-child(7){--k:6}

/* ── 6 · lunchbox ── */
.b6__day{position:absolute;inset:0;background:linear-gradient(180deg,#F8D9B4 0%,#F4B98E 55%,#EE9C74 100%);opacity:0}
.b6__table{position:absolute;left:-10%;right:-10%;top:30%;bottom:-10%;background:linear-gradient(180deg,#F1A97C,#E9885E);transform:skewY(-4deg)}
.b6__napkin{position:absolute;left:18%;top:52%;width:52vw;height:20vw;background:#F2A6B4;transform:skewX(-30deg) rotate(-8deg);opacity:.85}
.b6__plate{position:absolute;left:52%;top:20%;width:18vw;height:6vw;border-radius:50%;background:#F5DEDC;box-shadow:0 .5vw 0 #DDB9B7,inset 0 0 0 1.5vw #FBEDEB}
.b6__bottle{position:absolute;top:8%;width:4vw;height:14vw;border-radius:1vw 1vw .6vw .6vw;background:linear-gradient(90deg,#F5DDB0,#E9B679);box-shadow:inset -.8vw 0 0 rgba(0,0,0,.08)}
.b6__bottle::before{content:"";position:absolute;left:25%;top:-14%;width:50%;height:16%;background:#C9A45B;border-radius:3px}
.b6__bottle--1{left:6%}.b6__bottle--2{left:14%;top:14%;height:11vw;background:linear-gradient(90deg,#F26F6F,#D63C3C)}
.b6__spoon{position:absolute;left:66%;top:34%;width:20vw;height:2vw;border-radius:1vw;background:#BFC5C9;transform:rotate(-8deg)}
.b6__spoon::before{content:"";position:absolute;left:0;top:-90%;width:6vw;height:4vw;border-radius:50%;background:#CDD3D6}
.b6__tray{position:absolute;left:50%;top:60%;width:min(56vw,900px);aspect-ratio:2/1.15;transform:translate(-50%,-50%) skewX(-16deg) rotate(-6deg);background:#EAD9A6;border-radius:2vw;box-shadow:0 1.6vw 0 #C8B27A,0 3vw 4vw rgba(0,0,0,.18);padding:2.4%;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:2.4%}
.cell{background:#F5EBC6;border-radius:1vw;box-shadow:inset 0 .6vw 0 #DCCB98;position:relative;overflow:hidden}
.cell--a{grid-column:1;grid-row:1}.cell--b{grid-column:2;grid-row:1}.cell--c{grid-column:1;grid-row:2}.cell--d{grid-column:2/4;grid-row:1/3}.cell--e{grid-column:3;grid-row:1}
.b6__tray .cell--d{grid-column:3;grid-row:1/3}.b6__tray .cell--e{grid-column:2;grid-row:2}
.food{position:absolute;inset:12%;border-radius:40%}
.food--greens{background:radial-gradient(circle at 30% 30%,#7CB65C,#3E7A2E);border-radius:46% 54% 50% 50%}
.food--rice{background:#FBF7EC;border-radius:50%;box-shadow:inset 0 -.6vw 0 #E7DFC7}
.food--kimchi{background:repeating-linear-gradient(35deg,#F07A3E 0 8px,#E85A28 8px 12px);border-radius:35%}
.food--bulgogi{background:radial-gradient(circle at 60% 40%,#8A5A34,#4C2E18);border-radius:38% 62% 60% 40%}
.food--bulgogi::after{content:"";position:absolute;left:10%;top:15%;width:80%;height:70%;background:radial-gradient(circle at 30% 60%,#6DAE4A 0 12%,transparent 13%),radial-gradient(circle at 70% 30%,#E9A83A 0 10%,transparent 11%)}
.food--egg{background:repeating-linear-gradient(90deg,#F5C842 0 14%,#F1A83A 14% 22%);border-radius:50%}
.b6__chop{position:absolute;right:-6%;top:-10%;width:18vw;transform:rotate(150deg) translate(0,-160%);transform-origin:50% 100%}
.b6__chop svg{width:100%}
.b6__chop i{position:absolute;left:52%;top:70%;width:.7vw;height:22vw;background:#284A3A;border-radius:.4vw;transform:rotate(6deg);transform-origin:50% 0}
.b6__chop i+i{left:60%;transform:rotate(-8deg)}
.b6__night{position:absolute;inset:0;background:radial-gradient(ellipse at 40% 50%,#2A2A2C 0%,#141416 50%,#000 100%)}
.b6__desk{position:absolute;left:-10%;right:-10%;top:40%;bottom:-6%;background:linear-gradient(180deg,#3B3B3E,#1B1B1E);transform:skewY(-6deg)}
.b6__tray--empty{top:58%;background:#D6CDA9;box-shadow:0 1.6vw 0 #A89C72,0 4vw 6vw rgba(0,0,0,.6)}
.b6__tray--empty .cell{background:#E1D8B4;box-shadow:inset 0 .6vw 0 #C4B88C}
.b6__tray--empty .cell::after{content:"";position:absolute;left:30%;top:40%;width:8%;height:6%;border-radius:50%;background:#7CB65C;box-shadow:2vw 1.4vw 0 -.1vw #E44,-1vw 2vw 0 -.2vw #E9A83A}
.b6__sticks{position:absolute;left:66%;top:52%;width:22vw;height:6vw;transform:rotate(-24deg)}
.b6__sticks i{position:absolute;left:0;top:0;width:100%;height:.8vw;border-radius:.4vw;background:linear-gradient(90deg,#E9A085,#F0B69B)}
.b6__sticks i+i{top:2vw;transform:rotate(-4deg)}
.b6__pencil{position:absolute;left:8%;top:22%;width:24vw;height:1vw;background:linear-gradient(90deg,#F2C044 0 92%,#E9B79A 92%);border-radius:.4vw;transform:rotate(-14deg)}

/* ── 7 · tutor ── */
.b7{background:radial-gradient(ellipse at 30% 40%,#17453B 0%,#0E2E28 50%,#03110E 100%)}
.b7__cam{position:absolute;inset:0}
.b7__man{position:absolute;left:36%;top:6%;width:min(78vh,60vw);transform:translateX(-50%)}
.b7__man svg{width:100%;height:auto}
.b7__book{position:absolute;left:52%;top:46%;width:24vw;height:20vw;transform:perspective(600px) rotateY(-16deg) rotate(-8deg);transform-origin:50% 100%}
.b7__book i{position:absolute;top:0;width:50%;height:100%;background:linear-gradient(90deg,#4E8A2E,#66A83A);border-radius:6px 2px 2px 6px;box-shadow:inset 0 0 0 .5vw #3E7220,0 1vw 2vw rgba(0,0,0,.4);transform:skewY(6deg)}
.b7__book i+i{left:50%;background:linear-gradient(90deg,#3E7220,#5A9A34);border-radius:2px 6px 6px 2px;transform:skewY(-6deg)}
.b7__hand{position:absolute;left:78%;top:24%;width:16vw;transform:rotate(-70deg);opacity:0}
.b7__credit{left:64%;top:44%;color:#EFE9DA;font-size:clamp(14px,1.7vw,24px)}

/* ── 8 · notebook ── */
.b8{background:var(--paper)}
.b8__spread{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;opacity:0}
.page{position:relative;padding:8vh 6vw;background:linear-gradient(90deg,#F2EEC0,#F7F4CE 20%,#F5F2C8 80%,#EFEBBA);
  background-image:repeating-linear-gradient(0deg,transparent 0 3.2vh,rgba(160,150,110,.14) 3.2vh calc(3.2vh + 1px))}
.page--l{padding-right:5vw}.page--r{padding-left:5vw}
.b8__spine{position:absolute;left:50%;top:0;bottom:0;width:6vw;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(120,100,60,.22) 40%,rgba(90,70,40,.35) 50%,rgba(120,100,60,.22) 60%,transparent)}
.q{display:flex;align-items:flex-start;gap:1.2vw;margin-bottom:1vh}
.q b{font-family:var(--font-title);font-size:clamp(14px,1.5vw,22px);color:#4A3E7C;line-height:1}
.q i{display:block;height:.7vh;width:26vw;background:#B7AF95;border-radius:2px;margin-top:.5vh;opacity:.7}
.q i+i{width:18vw;margin-left:-26vw;margin-top:2vh}
.fig{position:relative;height:30vh;margin:0 0 3vh 4vw;width:26vw}
.fig svg{position:absolute;inset:0;width:100%;height:100%}
.dia .ln{fill:none;stroke:#3F3A3A;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dia text{font:600 12px var(--font-hand);fill:#3F3A3A}
.fig .food{filter:saturate(1.05)}
.b8__cook{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#F8F6D6 0%,#F1EDBC 70%,#E7DFA6 100%);transform-origin:50% 60%}
.note{position:absolute;font-family:var(--font-hand);font-weight:500;color:#5A5040;font-size:clamp(14px,1.55vw,24px);line-height:1.15;white-space:nowrap}
.note.n1{left:5%;top:14%}.note.n2{left:70%;top:24%}.note.n3{left:56%;top:58%}.note.n4{left:12%;top:82%}
.cook-wok{position:absolute;left:8%;top:22%;width:26vw}
.cook-scallion{position:absolute;left:52%;top:4%;width:22vw;transform:rotate(30deg)}
.cook-desk{position:absolute;left:44%;top:56%;width:8vw}
.cook-desk b{display:block;width:100%;aspect-ratio:1/1.1;background:linear-gradient(180deg,#F08A5A,#E56A45);border-radius:6px;box-shadow:inset 0 .8vw 0 #F6A47C}
.cook-woman{position:absolute;left:50%;bottom:92%;width:60%;transform:translateX(-50%)}
.cook-bowl{position:absolute;left:66%;top:66%;width:20vw}
.cook-fish{position:absolute;left:4%;top:60%;width:18vw;transform:rotate(-8deg)}
.accordion{position:absolute;inset:0;display:flex;pointer-events:none}
.accordion i{flex:1;background:linear-gradient(90deg,var(--fold2) 0%,var(--fold1) 35%,#FBF0BC 55%,var(--fold2) 100%);box-shadow:inset -2px 0 0 rgba(120,90,30,.25);transform-origin:0 50%}
.accordion i:nth-child(2n){background:linear-gradient(90deg,#FBF0BC 0%,var(--fold1) 45%,var(--fold2) 100%)}
.accordion--in{visibility:hidden}

/* ── 9 · road ── */
.b9{background:var(--road)}
.b9__cam{position:absolute;inset:-10%;transform-origin:50% 70%}
.b9__sky{position:absolute;inset:0;background:linear-gradient(180deg,#F8DFE0 0%,#F5D2D3 60%,#F2CDC0 100%)}
.b9__mtn{position:absolute;left:0;right:0;bottom:22%;height:12vh;background:linear-gradient(180deg,#8B7FB0,#7A6CA0);clip-path:polygon(0 100%,8% 60%,16% 80%,26% 30%,34% 70%,44% 45%,52% 78%,60% 40%,70% 66%,80% 20%,88% 62%,96% 44%,100% 100%)}
.b9__ground{position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,#D3A07C,#B9765A)}
.b9__bands{position:absolute;inset:0}
.b9__bands i{position:absolute;left:var(--l,50%);top:var(--t);width:var(--w);height:.55vw;border-radius:1vw;background:var(--c);opacity:.9}
.b9__bands--far i{height:.4vw;opacity:.7}
.b9__bands--near i{height:.7vw}
.fbox{position:absolute;left:var(--l,50%);top:var(--t);padding:.3vw .8vw;font-family:var(--font-hand);font-weight:700;font-size:clamp(13px,1.6vw,26px);color:#fff;white-space:nowrap;border-radius:2px;box-shadow:.3vw .3vw 0 rgba(0,0,0,.25)}
.fbox--big{font-size:clamp(18px,2.4vw,38px)}
.fbox--red{background:#C4322D}.fbox--grn{background:#4E8B3A}.fbox--pu{background:#5A2A7A}.fbox--blk{background:#1F1B1B}
.b9__scooter{position:absolute;left:11%;bottom:17%;width:17vw;transform-origin:50% 100%}
.b9__scooter svg,.b9__car svg{display:block;width:100%;height:auto}
.b9__car{position:absolute;left:52%;bottom:16%;width:32vw}
.fl{position:absolute;width:5vw;height:5vw;border-radius:50%}
.fl--lettuce{left:-16%;top:-30%;background:radial-gradient(circle at 40% 40%,#8CCB6A,#4E8B3A);border-radius:46% 54% 40% 60%;width:8vw;height:7vw}
.fl--lemon{left:20%;top:-40%;background:radial-gradient(circle,#FDF3B0 0 30%,#F4CE4A 32%);box-shadow:5vw 1vw 0 -1vw #F4CE4A}
.fl--fish{left:60%;top:-30%;width:14vw;height:5vw;background:#B7BCC4;border-radius:50%;clip-path:polygon(0 50%,20% 10%,70% 0,90% 30%,100% 10%,100% 90%,90% 70%,70% 100%,20% 90%)}
.fl--cookie{left:8%;top:60%;width:6vw;height:6vw;background:radial-gradient(circle,#B0783A 0 60%,#7B4E1E 62%);border-radius:50%}
.fl--peach{left:100%;top:10%;background:radial-gradient(circle at 40% 40%,#F9B57C,#EE7A4C)}
.fl--chilli{left:104%;top:60%;width:8vw;height:2vw;background:#D9282A;border-radius:1vw;transform:rotate(-30deg)}
.fl--tuna{left:36%;top:88%;width:8vw;height:5vw;background:repeating-linear-gradient(90deg,#E63A3A 0 .8vw,#F27676 .8vw 1.2vw);border-radius:40%}
.b9__wipe{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none;visibility:hidden}
.b9__wipe i{flex:1;transform-origin:100% 50%;transform:scaleX(0);background:var(--c,#8C2F4A)}
.b9__wipe i:nth-child(4n+1){--c:#8C2F4A}.b9__wipe i:nth-child(4n+2){--c:#8CA83E}.b9__wipe i:nth-child(4n+3){--c:#5A2A7A}.b9__wipe i:nth-child(4n+4){--c:#1F1B1B}
.b9__dust{position:absolute;left:3%;bottom:13%;width:24vw;height:6vw;border-radius:50%;background:radial-gradient(ellipse,rgba(139,127,176,.55),transparent 70%)}

/* ── 10 · confrontation ── */
.b10__bg{position:absolute;inset:0;background:linear-gradient(180deg,#B7B9E0 0%,#F5DDBF 30%,#F3D98C 60%,#F0C766 100%)}
.b10__pair{position:absolute;inset:0}
.b10__him,.b10__her{position:absolute;bottom:-14%;width:min(70vh,50vw)}
.b10__him{left:2%;transform:rotate(-4deg);transform-origin:50% 100%}
.b10__her{right:2%;transform:rotate(3deg);transform-origin:50% 100%}
.b10__him svg,.b10__her svg{width:100%;height:auto}
.arm{position:absolute;bottom:26%;width:36%;height:8%;border-radius:2vw;background:#EDBFA0;box-shadow:inset 0 -1vw 0 rgba(0,0,0,.06)}
.arm--him{left:70%;transform:rotate(-14deg);transform-origin:0 50%}
.arm--her{right:70%;transform:rotate(14deg);transform-origin:100% 50%;background:#F1C4A6}
.b10__hands{position:absolute;inset:0;pointer-events:none}
.palm{position:absolute;width:26vw;transform-origin:50% 100%;filter:drop-shadow(0 20px 30px rgba(0,0,0,.25))}
.palm--l{left:2%;bottom:6%;transform:rotate(-14deg)}
.palm--r{right:6%;bottom:2%;width:32vw;transform:rotate(12deg) scaleX(-1)}
.palm--m{left:36%;bottom:-2%;width:14vw;transform:rotate(-4deg)}
.flash{position:absolute;inset:0;background:#FBEDEE;opacity:0;pointer-events:none}

/* ── 11 · title ── */
.b11{background:var(--news)}
.b11__paper{position:absolute;inset:0;overflow:hidden}
.col{position:absolute;top:6%;bottom:6%;width:14vw;display:flex;flex-direction:column;gap:1.2vh}
.col--l{left:22%}.col--r{right:22%}
.col i{display:block;height:.9vh;background:#B7B39B;border-radius:2px;opacity:.85}
.col i:nth-child(3n){width:70%}.col i:nth-child(4n){width:88%}.col i:nth-child(5n){height:2.4vh;margin-bottom:.6vh}
.ghost{position:absolute;opacity:.42;filter:grayscale(1) contrast(.8) sepia(.4)}
.ghost svg{width:100%;height:auto}
.ghost--tl{left:0;top:-4%;width:20vw}.ghost--br{right:0;bottom:-8%;width:20vw;transform:scaleX(-1)}.ghost--bl{left:2%;bottom:-6%;width:16vw;transform:rotate(-30deg)}
.b11__card{position:absolute;left:50%;top:50%;width:min(58vw,880px);aspect-ratio:2/1;transform:translate(-50%,-50%);background:var(--card);box-shadow:inset 0 0 0 2px #C4BFAE;display:grid;place-content:center;text-align:center;gap:2vh}
.b11__title{font-family:var(--font-title);font-size:clamp(40px,7.4vw,124px);letter-spacing:.02em;line-height:1;color:var(--ink);display:inline-flex;align-items:baseline}
.t{display:inline-block;position:relative;min-width:.2em}
.t--sp{width:.32em}
.t--one b{background:linear-gradient(135deg,#4E2ACB,#C13B9C);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.28em;line-height:.85;position:relative;top:.05em}
.t[data-ch]::after{content:attr(data-g);position:absolute;left:0;top:0;color:var(--ink);opacity:.9;clip-path:inset(0 0 42% 0);pointer-events:none}
.b11__sub{font-family:var(--font-kr);font-size:clamp(11px,1vw,15px);letter-spacing:.14em;color:#4A463A;font-weight:400}
.flash--pink{background:#F9E4E6}

/* ═════════════ AFTER THE FILM ═════════════ */
.strip{position:relative;padding:14vh 6vw;background:#0E0F12;color:#EFE9DA}
.strip__head{max-width:900px;margin-bottom:8vh}
.eyebrow{display:inline-block;font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:#B497FF;margin-bottom:2.2vh}
.eyebrow--light{color:#FF9BDD}
.strip h2{font-family:var(--font-title);font-size:clamp(28px,4.4vw,64px);line-height:1.02;letter-spacing:-.01em;margin-bottom:2.4vh}
.strip h2 em{font-style:normal;background:linear-gradient(135deg,#8E6CFF,#FF6BD5);-webkit-background-clip:text;background-clip:text;color:transparent}
.strip p{font-size:clamp(15px,1.2vw,18px);line-height:1.6;max-width:640px;opacity:.82}
.cast{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6vw}
.castcard{background:#15161B;border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;transform:translateY(0)}
.castcard__art{aspect-ratio:4/5;display:grid;place-items:end center;overflow:hidden}
.castcard__art svg{width:78%;height:auto;transform:translateY(8%)}
.castcard__art--pink{background:radial-gradient(ellipse at 50% 30%,#FBEDEA,#C9C0E6)}
.castcard__art--green{background:radial-gradient(ellipse at 40% 30%,#1B5A4B,#0B2A24)}
.castcard__art--lilac{background:radial-gradient(ellipse at 40% 30%,#F5DDE1,#B7A6DC)}
.castcard__art--sun{background:radial-gradient(ellipse at 40% 30%,#FBECC0,#F0C070)}
.castcard__meta{padding:18px 20px 22px;font-family:var(--font-kr)}
.castcard__meta small{display:block;font-size:11px;letter-spacing:.14em;opacity:.6;margin-bottom:8px;font-family:var(--font-ui)}
.castcard__meta b{display:block;font-size:22px;font-weight:700}
.castcard__meta span{display:block;font-size:12px;letter-spacing:.1em;opacity:.7;font-family:var(--font-ui);margin-top:2px}
.strip--paper{background:var(--paper);color:#2A2422;background-image:repeating-linear-gradient(0deg,transparent 0 3.2vh,rgba(160,150,110,.16) 3.2vh calc(3.2vh + 1px))}
.strip--paper .eyebrow{color:#7B4AA8}
.strip--paper h2 em{background:linear-gradient(135deg,#5A2DBF,#B23A9E);-webkit-background-clip:text;background-clip:text;color:transparent}
.eps{list-style:none;max-width:1100px}
.eps li{display:grid;grid-template-columns:70px 1.1fr 2fr 80px;gap:2vw;align-items:baseline;padding:2.6vh 0;border-top:1px solid rgba(60,50,30,.18)}
.eps li:last-child{border-bottom:1px solid rgba(60,50,30,.18)}
.eps span{font-family:var(--font-title);font-size:20px;color:#7B4AA8}
.eps b{font-family:var(--font-kr);font-size:clamp(17px,1.5vw,24px);font-weight:700}
.eps i{font-style:normal;opacity:.75;font-size:15px}
.eps em{font-style:normal;text-align:right;font-size:12px;letter-spacing:.14em;opacity:.6;font-variant-numeric:tabular-nums}
.eps__more b{opacity:.6}
.strip--dark{background:radial-gradient(ellipse at 20% 20%,#1B1B4A 0%,#0A0A14 60%)}
.watch{display:grid;grid-template-columns:1.1fr 1fr;gap:5vw;align-items:center}
.watch__cta{display:flex;gap:14px;margin-top:4vh;flex-wrap:wrap}
.btn{display:inline-block;padding:16px 26px;border-radius:999px;background:linear-gradient(135deg,#8E6CFF,#FF6BD5);color:#0A0A14;font-weight:700;letter-spacing:.06em;font-size:13px;text-transform:uppercase}
.btn--ghost{background:transparent;color:#EFE9DA;border:1px solid rgba(255,255,255,.35)}
.watch__stills{display:grid;grid-template-columns:repeat(3,1fr);gap:1vw;align-items:end}
.watch__stills img{border-radius:12px;aspect-ratio:3/4;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.watch__stills img:nth-child(2){transform:translateY(-6%)}
.foot{background:#000;color:#B9B4A6;padding:8vh 6vw 5vh}
.foot__brand{font-family:var(--font-title);font-size:34px;color:#EFE9DA;margin-bottom:5vh}
.foot__brand b{background:linear-gradient(135deg,#8E6CFF,#FF6BD5);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:40px}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw;margin-bottom:6vh}
.foot__cols small{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.5;margin-bottom:12px}
.foot__cols span,.foot__cols a{display:block;font-size:14px;line-height:1.8}
.foot__legal{display:flex;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:.1em;opacity:.55;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);padding-top:3vh}

/* ═════════════ responsive ═════════════ */
@media (max-width:1100px){
  .cast{grid-template-columns:repeat(2,1fr)}
  .watch{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hud{padding:16px 18px}
  .hud__mid{display:none}
  .hud__nav a:not(.pill){display:none}
  .counter{left:18px;bottom:18px}
  .film__hint{display:none}
  .film{height:auto;overflow:visible}
  .beat{position:relative;height:72vh;visibility:visible;border-bottom:1px solid rgba(255,255,255,.08)}
  .beat.b1{height:88vh}
  .b1__book{width:78vw}
  .fx{font-size:6.4vw}
  .b2__face{width:64vw;top:18%}
  .b2__credit{left:auto;right:6%;top:auto;bottom:10%;font-size:15px}
  .b3__credit{font-size:13px}
  .b4__woman{width:88vw}
  .b4__egg2{width:56vw;left:30%}
  .b7__man{width:96vw;left:40%}
  .b7__book{width:38vw;height:32vw}
  .b7__credit{left:auto;right:6%;top:auto;bottom:10%;font-size:15px}
  .b8__spread{grid-template-columns:1fr}
  .page--r{display:none}
  .fig{width:60vw;height:22vh}
  .q i{width:60vw}.q i+i{width:40vw;margin-left:-60vw}
  .note{font-size:13px}
  .b9__scooter{width:30vw;left:6%}
  .b9__car{width:56vw;left:38%}
  .fbox{font-size:12px}
  .b10__him,.b10__her{width:60vw}
  .palm{width:44vw}.palm--r{width:52vw}
  .b11__card{width:88vw}
  .b11__title{font-size:11vw}
  .strip{padding:10vh 6vw}
  .cast{grid-template-columns:1fr 1fr;gap:12px}
  .eps li{grid-template-columns:44px 1fr;gap:6px 12px}
  .eps i{grid-column:2}.eps em{grid-column:2;text-align:left}
  .watch__stills{grid-template-columns:repeat(3,1fr)}
  .foot__cols{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cast{grid-template-columns:1fr}
  .beat{height:64vh}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .film__hint i::after{animation:none}
  .film{height:auto;overflow:visible}
  .beat{position:relative;height:80vh;visibility:visible}
}