/* =====================================================================
   그 시절, 우리가 사랑한 소녀들 — CONCEPT B 「그 시절, 한 컷」 FILM ALBUM
   Warm analog darkroom. Bespoke SVG world. Asset-proof. Mobile-first.
   ===================================================================== */

/* ---------- fonts ---------- */
@font-face{
  font-family:"SacheonHangGong";
  src:url("../../_shared/fonts/SacheonHangGong-Regular.ttf") format("truetype");
  font-weight:400; font-display:swap;
}
/* MaruBuri self-hosted (woff2) — serif voice survives a CDN outage */
@font-face{
  font-family:"MaruBuri";
  src:url("../../_shared/fonts/MaruBuri-Regular.woff2") format("woff2");
  font-weight:400; font-display:swap;
}

/* ---------- design tokens ---------- */
:root{
  /* warm tonal scale (cream -> kraft -> sepia -> film dark) */
  --cream-50:#FFFBF2;  --cream-100:#FFF6E1; --cream-200:#FFF0E0; --cream-300:#FFEADB;
  --kraft-400:#F6DEBC; --kraft-500:#ECCB9C; --sepia-600:#D2A772;
  --sepia-700:#9C6B38; --film-800:#3B2A1B; --film-850:#2C1E12; --film-900:#211509;

  /* orange ramp */
  --salmon:#F59051; --secondary:#FA8E49; --primary:#F37321;
  --deep-1:#E45612; --deep-2:#C9450C; --deep-3:#BD4011; --deep-4:#A8380A;

  /* ink — AA-tuned: 85/72 for text, 58/40 decorative only */
  --ink:#411E00;
  --ink-90:rgba(65,30,0,.90); --ink-85:rgba(65,30,0,.85); --ink-72:rgba(65,30,0,.72);
  --ink-58:rgba(65,30,0,.58); --ink-40:rgba(65,30,0,.40); --ink-20:rgba(65,30,0,.20);
  --on-dark:#FBEBD2; --on-dark-bright:#FFF3DF;          /* bright cream for punchy darkroom copy */
  --on-dark-78:rgba(251,235,210,.82); --on-dark-70:rgba(251,235,210,.74); --on-dark-45:rgba(251,235,210,.45);
  --safelight:#FBB36B;                                  /* darkroom safelight amber — brighter on-dark accent */

  /* warm kraft disabled (never cold gray) */
  --disabled:#E4D4B8; --disabled-2:#D8C49E; --disabled-ink:#9A7C4E;

  /* warm tinted shadows (never gray) */
  --sh-1:0 2px 8px rgba(96,48,12,.10);
  --sh-2:0 10px 26px rgba(96,48,12,.16);
  --sh-3:0 22px 48px rgba(70,32,8,.24);
  --glow:0 0 0 1px rgba(255,255,255,.5) inset, 0 1px 0 rgba(255,255,255,.7) inset;

  --r-sm:9px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --rail:17px;            /* film perforation rail width */
  --maxw:600px;
  --appbar-h:48px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* perforation tiles (authentic rounded sprocket holes — high-contrast rail) */
  --perf-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='27'%3E%3Crect width='16' height='27' fill='%23241810'/%3E%3Crect x='3.2' y='7' width='9.6' height='13' rx='3.4' fill='%23FBEFD6'/%3E%3Crect x='3.2' y='7' width='9.6' height='13' rx='3.4' fill='none' stroke='%23120B05' stroke-width='0.8'/%3E%3C/svg%3E");
  --perf-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='16'%3E%3Crect width='27' height='16' fill='%23241810'/%3E%3Crect x='7' y='3.2' width='13' height='9.6' rx='3.4' fill='%23FBEFD6'/%3E%3C/svg%3E");
  /* film grain */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  /* paper-fibre weave for cream sections (very faint) */
  --fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M0 9L9 0' stroke='%239C6B38' stroke-width='0.5' opacity='0.06'/%3E%3Cpath d='M-1 1L1 -1M8 10L10 8' stroke='%239C6B38' stroke-width='0.5' opacity='0.06'/%3E%3Ccircle cx='2.2' cy='6.4' r='0.4' fill='%239C6B38' opacity='0.05'/%3E%3C/svg%3E");
  /* foil sheen for the 1등 headline reward */
  --foil:linear-gradient(125deg,rgba(255,247,224,0) 30%,rgba(255,236,196,.85) 46%,rgba(255,255,255,.95) 50%,rgba(255,228,176,.7) 55%,rgba(255,247,224,0) 72%);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
*{word-break:keep-all}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  font-size:16px; line-height:1.62; color:var(--ink);
  background:#EBDFC8;            /* outside-the-reel kraft */
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
b,strong{font-weight:700}
em{font-style:normal}
.svg-sprite{position:absolute}
:focus-visible{outline:3px solid var(--deep-1);outline-offset:2px;border-radius:4px}

.serif{font-family:"MaruBuri","Pretendard Variable",serif}
.hand{font-family:"SacheonHangGong","Pretendard Variable",sans-serif;font-weight:400;line-height:1.1}

/* ---------- the reel (centered film column) ---------- */
.reel{
  position:relative;
  max-width:var(--maxw); margin:0 auto;
  padding-top:var(--appbar-h);
  background:
    radial-gradient(120% 60% at 50% -8%, var(--cream-50), transparent 60%),
    linear-gradient(180deg,var(--cream-100),var(--cream-200) 40%,var(--cream-100));
  box-shadow:0 0 60px rgba(70,32,8,.18);
  overflow:hidden;
  isolation:isolate;
}

/* perforation rails framing the reel — continuous vertical thread */
.reel-rail{
  position:fixed; top:0; bottom:0; width:var(--rail); z-index:60;
  background:var(--perf-v); background-size:var(--rail) auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),
             inset -3px 0 6px rgba(0,0,0,.32), inset 3px 0 6px rgba(0,0,0,.32);
  pointer-events:none;
}
.reel-rail--l{border-right:1px solid rgba(0,0,0,.3)}
.reel-rail--r{border-left:1px solid rgba(0,0,0,.3)}
.reel-rail--l{left:max(0px,calc(50% - var(--maxw)/2))}
.reel-rail--r{right:max(0px,calc(50% - var(--maxw)/2))}

/* ---------- shared atmospherics ---------- */
.grain{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:var(--grain); background-size:160px 160px;
  mix-blend-mode:multiply; opacity:.10;
}
.leak{position:absolute;z-index:1;pointer-events:none;mix-blend-mode:screen;filter:blur(22px);border-radius:50%}
.leak--hero{top:-60px;right:-70px;width:260px;height:320px;
  background:radial-gradient(circle at 60% 40%,rgba(255,90,40,.55),rgba(255,140,40,.28) 45%,transparent 72%)}
.leak--theme{bottom:120px;left:-90px;width:250px;height:250px;
  background:radial-gradient(circle,rgba(255,128,60,.22),transparent 72%)}
.leak--prize{top:80px;left:-90px;width:240px;height:280px;
  background:radial-gradient(circle,rgba(255,120,40,.4),transparent 70%)}
.leak--how{bottom:0;right:-90px;width:260px;height:260px;
  background:radial-gradient(circle,rgba(255,100,50,.32),transparent 70%)}

/* giant faint background type */
.bigtype{
  position:absolute; z-index:0; pointer-events:none; font-weight:800;
  line-height:.8; letter-spacing:-.04em; white-space:nowrap; user-select:none;
}
.bigtype--hero{top:62px;right:-14px;font-size:128px;color:rgba(196,107,40,.10)}
.bigtype--theme{top:40%;left:50%;transform:translate(-50%,-50%);font-size:220px;
  font-family:"SacheonHangGong",sans-serif;color:rgba(251,235,210,.06)}
.bigtype--prize{top:24px;right:8px;font-size:74px;color:rgba(196,107,40,.09)}

/* ---------- section base ---------- */
section{position:relative;z-index:1;padding:46px var(--gut) 48px;--gut:26px}
.reel>section>*{position:relative;z-index:3}

/* paper-fibre weave on the cream beats (depth vs flat) */
.hero::after,.prize::after,.how::after,.notice::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--fiber);background-size:9px 9px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000,rgba(0,0,0,.45));
          mask-image:radial-gradient(120% 90% at 50% 30%,#000,rgba(0,0,0,.45));
}

/* kerned eyebrow */
.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  color:var(--deep-2);
}
.eyebrow--ondark{color:var(--safelight)}
.eyebrow--hero{display:flex;align-items:center;gap:9px;color:var(--deep-2);margin-bottom:16px}
.eyebrow__cam{color:var(--deep-1);flex:0 0 auto}

/* section heading */
.sec-h{
  font-size:clamp(25px,7.4vw,30px); font-weight:800; line-height:1.24;
  letter-spacing:-.01em; color:var(--ink); margin:8px 0 22px;
}
.sec-h em{color:var(--deep-1);position:relative;white-space:nowrap}
.sec-h em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:1px;height:8px;
  background:linear-gradient(90deg,rgba(243,115,33,.28),rgba(250,142,73,.18));border-radius:4px;z-index:-1}

/* =====================================================================
   APPBAR
   ===================================================================== */
.appbar{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:min(var(--maxw),100%); height:var(--appbar-h); z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(var(--rail) + 10px);
  background:rgba(251,247,238,.86); backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid rgba(156,107,56,.18);
}
.appbar__perf{position:absolute;left:0;right:0;bottom:-1px;height:4px;
  background:var(--perf-h);background-size:auto 4px;opacity:.5}
.appbar__logo{display:flex;align-items:center;min-height:44px;padding:5px 4px;margin-left:-4px}
.appbar__logo img{height:32px;width:auto;opacity:.95}
.appbar__close{width:44px;height:44px;display:grid;place-items:center;color:var(--ink-72);
  border-radius:var(--r-pill);transition:background .2s}
.appbar__close:active{background:rgba(156,107,56,.12)}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{padding-top:26px;padding-bottom:30px;overflow:hidden}

/* developing album cover */
.coverframe{
  position:relative; width:min(252px,72vw); margin:4px auto 22px;
  padding:11px 11px 0; background:#FFFDF8; border-radius:5px;
  box-shadow:var(--sh-3),var(--glow);
  transform:rotate(-2.4deg);
  --dev:0; /* 0..1 developed */
}
.coverframe__win{position:relative;aspect-ratio:300/188;overflow:hidden;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(60,32,10,.16), inset 0 8px 22px rgba(60,30,10,.16)}
/* developed-photo grain inside the window */
.coverframe__win::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--grain);background-size:130px;mix-blend-mode:overlay;opacity:.2}
.scene{position:absolute;inset:0;width:100%;height:100%}
/* drifting motes — the hero frame quietly moves */
.js-anim .scene .motes{animation:motesdrift 11s ease-in-out infinite}
@keyframes motesdrift{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(-7px);opacity:.6}}
.coverframe__sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.42),transparent 38%),
            radial-gradient(120% 80% at 80% 10%,rgba(255,210,140,.3),transparent 55%);
  mix-blend-mode:screen}
.coverframe__perf{position:absolute;left:11px;right:11px;height:5px;background:var(--perf-h);
  background-size:auto 5px;opacity:.85;border-radius:1px}
.coverframe__perf--t{top:5px}
.coverframe__perf--b{display:none}
.coverframe__cap{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:9px 4px 12px}
.coverframe__cap .hand{font-size:21px;color:var(--ink)}
.datestamp{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--deep-1);
  font-variant-numeric:tabular-nums;opacity:.92}
/* washi tape */
.coverframe__tape{position:absolute;width:62px;height:24px;z-index:4;
  background:linear-gradient(135deg,rgba(255,224,176,.78),rgba(255,200,140,.62));
  box-shadow:0 2px 6px rgba(96,48,12,.18);mix-blend-mode:multiply}
.coverframe__tape::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(255,255,255,.25) 5px 6px)}
.coverframe__tape--tl{top:-11px;left:-14px;transform:rotate(-26deg)}
.coverframe__tape--br{bottom:42px;right:-15px;transform:rotate(-24deg);width:54px}

/* hero title — the GIANT moment (deliberate 3-line crescendo, locked breaks) */
.hero__title{text-align:center;margin:6px 0 16px}
.hero__line{
  display:block; font-family:"SacheonHangGong",sans-serif; font-weight:400;
  line-height:1.04; color:var(--ink); letter-spacing:.004em; white-space:nowrap;
}
.hero__line--1{font-size:clamp(28px,9vw,40px);color:var(--ink-85)}
.hero__line--2{font-size:clamp(36px,12vw,50px)}
.hero__line--em{font-size:clamp(44px,14.6vw,62px);margin-top:1px}
.hero__em-wrap{position:relative;display:inline-block}
.hero__line em{color:var(--primary);position:relative;
  text-shadow:0 2px 0 rgba(243,115,33,.18)}
/* underline keyed to the emphasised phrase width */
.hero__em-wrap .ul{position:absolute;left:-3%;width:106%;bottom:-11px;height:17px}
.hero__em-wrap .ul path{stroke-dasharray:340;stroke-dashoffset:0}

.hero__sub{text-align:center;font-size:15.5px;color:var(--ink-72);margin-top:20px}
.hero__sub b{color:var(--deep-2);font-weight:700}

.datechip{
  display:inline-flex;align-items:center;gap:8px;margin:18px auto 0;
  padding:9px 16px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#FFFFFF,#FFF3E2);
  border:1px solid rgba(228,86,18,.28);
  box-shadow:var(--sh-1);
  font-size:13px;color:var(--ink-72);
}
.datechip{display:flex;width:max-content;margin-left:auto;margin-right:auto}
.datechip svg{color:var(--deep-1)}
.datechip span{font-weight:600;letter-spacing:.02em}
.datechip b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}

.scrollcue{display:flex;flex-direction:column;align-items:center;gap:2px;margin:26px auto 0;
  color:var(--deep-2);width:max-content}
.scrollcue__txt{font-family:"SacheonHangGong",sans-serif;font-size:15px;letter-spacing:.04em}
.scrollcue__txt i{font-style:normal;animation:blink 1.4s steps(1) infinite}
.scrollcue__txt i:nth-child(2){animation-delay:.2s}
.scrollcue__txt i:nth-child(3){animation-delay:.4s}
.scrollcue svg{animation:bob 1.8s var(--ease) infinite}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.15}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* =====================================================================
   THEME  (darkroom spread — dark, cinematic)
   ===================================================================== */
.theme{
  background:
    /* warm darkroom safelight lifts the QUOTE zone — lit, not murky — fades before the CTA */
    radial-gradient(118% 52% at 50% 28%,rgba(150,92,50,.30),transparent 66%),
    radial-gradient(100% 50% at 50% 0%,rgba(228,86,18,.12),transparent 55%),
    linear-gradient(180deg,#443122,#2B1D11 58%,#221608);
  color:var(--on-dark); padding-top:54px; padding-bottom:60px; overflow:hidden;
}
/* gentler grain so the band reads clean (de-mud), not noisy */
.theme .grain{opacity:.08;mix-blend-mode:overlay}
.filmstrip{position:absolute;left:0;right:0;height:18px;background:var(--perf-h);
  background-size:auto 18px;z-index:4;opacity:.95}
.filmstrip--top{top:0;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.filmstrip--bottom{bottom:0;box-shadow:0 -3px 10px rgba(0,0,0,.3)}
.theme__h{font-size:clamp(28px,8.2vw,36px);color:var(--on-dark-bright);margin:12px 0 28px;line-height:1.18}
.pull{position:relative;margin:8px 0 30px;padding-left:6px}
.pull__mark{position:absolute;top:-26px;left:-6px;font-family:"MaruBuri",serif;
  font-size:96px;line-height:1;color:rgba(251,179,107,.42)}
.pull__line{font-size:17px;line-height:1.96;color:var(--on-dark-bright);margin-bottom:18px;
  letter-spacing:.01em}
.pull__line em{color:var(--safelight);font-weight:700}
/* 1985 attribution reads as an emotional credit — serif, legible, not a tag */
.pull__cite{display:block;margin-top:22px;font-size:14px;letter-spacing:.01em;
  color:var(--on-dark);font-style:italic;line-height:1.5}
.theme__cta{font-size:16px;color:var(--safelight);line-height:1.72;margin-top:34px;
  padding-top:22px;border-top:1px dashed rgba(251,179,107,.40)}

/* ---- contact-sheet strip (second signature) ---- */
.contact{position:relative;margin:34px -6px 6px;padding:17px 0;
  background:linear-gradient(180deg,#2A1B0F,#1C120A);border-radius:6px;
  box-shadow:0 16px 34px rgba(0,0,0,.38),inset 0 0 0 1px rgba(244,217,176,.18);
  transform:rotate(-1.2deg)}
.contact__perf{position:absolute;left:0;right:0;height:11px;background:var(--perf-h);
  background-size:auto 11px;opacity:.85}
.contact__perf--t{top:0;border-radius:6px 6px 0 0}
.contact__perf--b{bottom:0;border-radius:0 0 6px 6px}
.contact__cells{display:flex;gap:11px;padding:7px 13px;justify-content:center}
/* each cell is a backlit negative on the lightbox — lit, so the art reads */
.cell{position:relative;flex:1 1 0;max-width:108px;border-radius:3px;padding:8px 8px 4px;
  background:radial-gradient(120% 90% at 50% 38%,#3A2616,#1F140B 86%);
  box-shadow:inset 0 0 0 1px rgba(244,217,176,.30),inset 0 0 14px rgba(255,176,96,.12)}
.cell--a{transform:rotate(1.4deg)}
.cell--b{transform:rotate(-1.6deg) translateY(-3px)}
.cell--c{transform:rotate(1deg)}
.cell svg{width:100%;height:auto;display:block;filter:drop-shadow(0 0 4px rgba(255,176,96,.35))}
.cell__cap{display:block;text-align:center;margin-top:4px;font-size:12.5px;font-weight:600;
  color:var(--on-dark-bright)}

/* prize bridge — frames the reward as the payoff of the memory */
.prize__bridge{font-size:14.5px;line-height:1.62;color:var(--ink-72);
  margin:-10px 0 24px;max-width:32em}

/* =====================================================================
   PRIZE
   ===================================================================== */
.prize{padding-top:50px;
  background:
    radial-gradient(120% 50% at 50% 0,var(--cream-50),transparent 60%),
    linear-gradient(180deg,var(--cream-200),var(--cream-100))}
.prize .sec-h em{color:var(--deep-1)}

.polas{display:flex;flex-direction:column;gap:20px;margin-top:6px}

/* polaroid prize card — staggered horizontally for editorial asymmetry */
.pola{position:relative;width:90%;background:#FFFEFB;border-radius:6px;padding:13px 13px 0;
  box-shadow:var(--sh-2),var(--glow);transform:rotate(-1.6deg)}
.pola--gold{margin-right:auto;transform:rotate(-2deg);
  box-shadow:var(--sh-3),var(--glow),0 0 0 1.5px rgba(208,158,86,.55)}
.pola--silver{margin-left:auto;margin-top:-4px;transform:rotate(2deg)}
.pola__tape{position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:96px;height:26px;z-index:3;
  background:linear-gradient(135deg,rgba(255,221,170,.82),rgba(250,180,120,.66));
  box-shadow:0 3px 8px rgba(96,48,12,.2);mix-blend-mode:multiply}
.pola__tape--alt{transform:translateX(-50%) rotate(3deg)}
.pola__rank{position:absolute;top:24px;left:24px;z-index:3;
  font-size:11px;font-weight:800;letter-spacing:.06em;color:#FFF;
  text-shadow:0 1px 1px rgba(70,20,0,.5);
  background:linear-gradient(180deg,var(--deep-2),var(--deep-3));
  padding:5px 11px;border-radius:var(--r-pill);box-shadow:var(--sh-1)}
.pola__rank--alt{background:linear-gradient(180deg,#8A5A2A,#5E3A18)}
.pola__win{position:relative;aspect-ratio:200/150;overflow:hidden;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(60,32,10,.12)}
/* film-cell perforation framing the prize so it stays in the album world */
.pola__win::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;z-index:2;
  background:var(--perf-h);background-size:auto 6px;opacity:.5}
.pola__win::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--grain);background-size:130px;mix-blend-mode:overlay;opacity:.16}
/* foil sheen — headline reward visibly outranks the runner-up */
.pola--gold .pola__win{box-shadow:inset 0 0 0 1px rgba(208,158,86,.45)}
.pola--gold .pola__win .foil{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--foil);background-size:260% 260%;background-position:120% 0;
  mix-blend-mode:screen}
.js-anim .pola--gold .pola__win.in .foil,
.js-anim .pola--gold.in .pola__win .foil{animation:foilsweep 5.5s var(--ease) 1.2s infinite}
@keyframes foilsweep{0%,68%{background-position:135% 0}100%{background-position:-50% 0}}
.gift{width:100%;height:100%}
.gift__lbl{font-family:"Pretendard Variable",sans-serif;font-size:13px;font-weight:700;
  fill:var(--deep-2);letter-spacing:.02em}
.gift__amt{font-family:"Pretendard Variable",sans-serif;font-size:30px;font-weight:800;fill:var(--deep-1)}
.gift__won{font-size:13px;fill:var(--ink-72)}
.gift__sub{font-family:"Pretendard Variable",sans-serif;font-size:9.5px;font-weight:700;fill:var(--ink-72);letter-spacing:.04em}
.pola__cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:13px 6px 16px;flex-wrap:wrap}
.pola__amt{font-weight:800;color:var(--deep-1);font-variant-numeric:tabular-nums;line-height:1}
.pola__amt b{font-size:38px}
.pola__amt i{font-size:16px;font-style:normal;margin-left:2px;color:var(--ink-72)}
.pola__amt--alt b{font-size:30px}
.pola__hand{font-size:16px;color:var(--ink-72);align-self:flex-end}
.pola--gold .pola__hand{font-size:18px;color:var(--ink)}

/* concert video promise */
.promise{position:relative;margin-top:30px;display:flex;align-items:center;gap:15px;
  padding:18px 18px 18px 16px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(135deg,var(--film-800),var(--film-900));
  box-shadow:var(--sh-3)}
.promise__perf{position:absolute;top:0;left:0;right:0;height:9px;background:var(--perf-h);
  background-size:auto 9px;opacity:.8}
.promise__screen{flex:0 0 auto;width:62px;height:48px;display:grid;place-items:center;
  border-radius:8px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,170,90,.2)}
.projector{width:54px;height:auto;filter:drop-shadow(0 0 8px rgba(243,115,33,.4))}
.promise__body{padding-top:4px}
.promise__kicker{font-size:9.5px;font-weight:800;letter-spacing:.24em;color:var(--salmon)}
.promise__txt{margin-top:5px;font-size:14px;line-height:1.6;color:var(--on-dark)}
.promise__txt b{color:#FFE0B8}
.promise__txt em{color:var(--salmon);font-weight:700}

/* =====================================================================
   HOW TO JOIN
   ===================================================================== */
.how{padding-top:54px;
  background:linear-gradient(180deg,var(--cream-100),var(--cream-300))}
.steps{list-style:none;display:flex;flex-direction:column;gap:14px}
.step{position:relative;display:flex;align-items:center;gap:15px;
  padding:20px 16px 16px 18px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#FFFFFF,#FFF7EC);
  box-shadow:var(--sh-1);border:1px solid rgba(228,86,18,.10);overflow:hidden}
.step::before{content:"";position:absolute;left:0;top:7px;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--primary),var(--deep-1))}
/* sprocket top edge — each step reads as a film frame, not a plain card */
.step::after{content:"";position:absolute;top:0;left:0;right:0;height:7px;
  background:var(--perf-h);background-size:auto 7px;opacity:.4;pointer-events:none}
.step__no{position:absolute;right:14px;top:8px;font-size:30px;font-weight:800;
  color:rgba(228,86,18,.12);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.step__ic{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;
  border-radius:14px;background:#FFF3E4;box-shadow:var(--sh-1),inset 0 0 0 1px rgba(228,86,18,.12)}
.step__ic svg{width:42px;height:42px}
.step__txt h3{font-size:17px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px}
.step__opt{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--deep-2);
  background:rgba(243,115,33,.12);padding:2px 7px;border-radius:var(--r-pill)}
.step__txt p{font-size:13.5px;color:var(--ink-72);margin-top:3px;line-height:1.55}

/* =====================================================================
   NOTICE / ACCORDION
   ===================================================================== */
.notice{padding-top:52px;padding-bottom:36px;
  background:linear-gradient(180deg,var(--cream-300),var(--cream-100))}
/* film-splice seams: the beats below the hero read as a strip of spliced frames */
.how::before,.notice::before{content:"";position:absolute;top:0;left:0;right:0;height:13px;z-index:6;
  background:var(--perf-h);background-size:auto 13px;
  box-shadow:0 3px 9px rgba(70,32,8,.16),inset 0 -1px 0 rgba(0,0,0,.22);pointer-events:none}
.acc{display:flex;flex-direction:column;gap:11px}
.acc__item{position:relative;background:#FFFDF7;border-radius:var(--r-md);box-shadow:var(--sh-1);
  border:1px solid rgba(156,107,56,.14);overflow:hidden}
/* sprocket hairline keeps the accordion in the film world, not a plain stack */
.acc__item::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;z-index:1;
  background:var(--perf-h);background-size:auto 6px;opacity:.32;pointer-events:none}
.acc__sum{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:16px 16px;font-size:15px;font-weight:700;color:var(--ink);min-height:52px}
.acc__sum::-webkit-details-marker{display:none}
.acc__chev{color:var(--deep-2);transition:transform .3s var(--ease);flex:0 0 auto}
.acc__item[open] .acc__chev{transform:rotate(180deg)}
.acc__body{padding:0 16px 16px}
.acc__body ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.acc__body li{position:relative;padding-left:15px;font-size:13.5px;color:var(--ink-72);line-height:1.62}
.acc__body li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:1px;background:var(--secondary);transform:rotate(45deg)}

/* =====================================================================
   FOOTER + CTA
   ===================================================================== */
.foot{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:30px 24px 26px;background:var(--film-900);text-align:center}
.foot__cam{color:rgba(245,144,81,.6)}
.foot p{font-size:11.5px;color:var(--on-dark-70);letter-spacing:.02em}
.cta-spacer{height:88px}

.cta-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:65;
  width:min(var(--maxw),100%);
  padding:10px calc(var(--rail) + 12px) calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(251,247,238,0),rgba(251,247,238,.96) 32%);
}
.cta-bar__perf{position:absolute;left:0;right:0;top:0;height:5px;background:var(--perf-h);
  background-size:auto 5px;opacity:.45}
.cta{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;
  height:54px;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(180deg,var(--deep-2),var(--deep-4));
  color:#FFF;font-size:16.5px;font-weight:800;letter-spacing:.01em;
  text-shadow:0 1px 1px rgba(74,18,0,.4);
  box-shadow:0 10px 24px rgba(168,56,10,.42),inset 0 1px 0 rgba(255,255,255,.22)}
.cta:active{transform:translateY(1px)}
.cta__ic{color:#FFF}
.cta__shine{position:absolute;top:0;bottom:0;left:-40%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:shine 4.6s ease-in-out infinite}
@keyframes shine{0%,72%{left:-45%}88%,100%{left:120%}}

/* =====================================================================
   DEVELOP MECHANIC + REVEALS  (JS-gated; content visible without JS)
   ===================================================================== */
/* reveal uses the individual `translate` property so decorative
   transform:rotate(...) on cards/frames is preserved through the animation */
.js-anim .reveal{opacity:0;translate:0 22px;
  transition:opacity .7s var(--ease),translate .7s var(--ease);
  transition-delay:var(--d,0s)}
.js-anim .reveal.in{opacity:1;translate:0 0}

.js-anim .develop{
  filter:blur(11px) sepia(.7) saturate(.5) contrast(.86) brightness(1.04);
  transition:filter 1.05s var(--ease);
}
.js-anim .develop.in{filter:none}

/* hand-drawn underline draws on with the title — CSS only, no GSAP */
.js-anim .hero__line--em .ul path{stroke-dasharray:340;stroke-dashoffset:340}
.js-anim .hero__line--em.in .ul path{animation:uldraw 1s var(--ease) .5s forwards}
@keyframes uldraw{to{stroke-dashoffset:0}}

/* =====================================================================
   ACCESSIBILITY / MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js-anim .reveal{opacity:1;translate:0 0}
  .js-anim .develop{filter:none}
  .js-anim .hero__line--em .ul path{stroke-dashoffset:0}
  .scrollcue,.cta__shine{display:none}
}

/* =====================================================================
   APPLY PAGE — darkroom worktable
   ===================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.appbar__title{flex:1;text-align:center;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:.01em}
.page-apply .appbar__close{width:44px;height:44px}
.page-apply .appbar__logo img{height:26px}

.reel--apply{
  padding-bottom:0;
  background:
    radial-gradient(120% 40% at 50% 0,var(--cream-50),transparent 55%),
    linear-gradient(180deg,var(--cream-200),var(--cream-100) 30%,var(--cream-200));
}
.reel--apply>.grain{opacity:.09}

/* intro — darkroom band */
.a-intro{position:relative;z-index:3;padding:28px var(--gut) 26px;--gut:26px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 82% -10%,rgba(228,86,18,.22),transparent 55%),
    linear-gradient(180deg,var(--film-800),var(--film-900));
  color:var(--on-dark);
  box-shadow:0 14px 30px rgba(33,21,9,.32)}
.a-intro__perf{position:absolute;top:0;left:0;right:0;height:11px;background:var(--perf-h);
  background-size:auto 11px;opacity:.85;z-index:4}
.a-intro__leak{position:absolute;top:-30px;right:-40px;width:200px;height:200px;pointer-events:none;
  background:radial-gradient(circle,rgba(255,90,40,.4),transparent 70%);
  filter:blur(24px);mix-blend-mode:screen}
.a-intro__row{display:flex;align-items:center;gap:16px;margin-top:8px;position:relative;z-index:2}
.a-intro__txt{min-width:0}
.a-thumb{position:relative;flex:0 0 auto;width:96px;padding:7px 7px 0;background:#FFFDF8;
  border-radius:4px;box-shadow:var(--sh-3),var(--glow);transform:rotate(-4deg)}
.a-thumb__win{position:relative;aspect-ratio:96/74;overflow:hidden;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(60,32,10,.18)}
.a-thumb__win .scene{position:absolute;inset:0;width:100%;height:100%}
.a-thumb__perf{position:absolute;top:7px;left:7px;right:7px;height:4px;background:var(--perf-h);
  background-size:auto 4px;opacity:.8;z-index:2}
.a-thumb__sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(120deg,rgba(255,255,255,.45),transparent 42%)}
.a-thumb__cap{display:block;text-align:center;font-size:13px;color:var(--ink);padding:5px 0 7px}
/* the thumbnail keeps "developing" — a quiet living signature in the first viewport */
.js-anim .a-thumb__win .scene{animation:thumbdev 5.5s var(--ease) infinite}
@keyframes thumbdev{0%,72%{filter:none}82%{filter:blur(4px) sepia(.6) brightness(1.08)}100%{filter:none}}
.a-intro__h{font-size:clamp(26px,7.6vw,36px);color:var(--on-dark);line-height:1.12;margin:8px 0 0}
.a-intro__sub{font-size:14.5px;color:var(--on-dark-78);line-height:1.62;margin-top:14px}
.a-intro__credit{margin-top:12px;font-size:12.5px;font-style:italic;color:var(--salmon);
  letter-spacing:.01em;opacity:.92}

/* form blocks */
.form{position:relative;z-index:3;padding:8px var(--gut) 12px;--gut:26px;
  display:flex;flex-direction:column;gap:14px}
.block{border:none;padding:20px 18px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#FFFFFF,#FFFAF1);
  box-shadow:var(--sh-1);border:1px solid rgba(156,107,56,.12)}
.block__lg{font-size:16px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px;padding:0}
.block__desc{font-size:13px;color:var(--ink-72);margin:6px 0 16px;line-height:1.5}
.req{font-size:11px;font-weight:800;letter-spacing:.02em;color:#FFF;
  text-shadow:0 1px 1px rgba(74,18,0,.45);
  background:linear-gradient(180deg,var(--deep-2),var(--deep-4));padding:3px 8px;border-radius:var(--r-pill)}
.opt{font-size:10.5px;font-weight:800;color:var(--sepia-700);
  background:rgba(156,107,56,.14);padding:3px 8px;border-radius:var(--r-pill)}
.req-inline{color:var(--deep-2);font-weight:800}

/* text fields */
.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
.field__lbl{display:block;font-size:13px;font-weight:700;color:var(--ink-85);margin-bottom:7px}
.input{width:100%;height:52px;padding:0 16px;font-size:16px;color:var(--ink);
  background:var(--cream-50);border:1.5px solid rgba(156,107,56,.22);border-radius:var(--r-md);
  transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none}
.input::placeholder{color:var(--ink-40)}
.input:hover{border-color:rgba(228,86,18,.35)}
.input:focus{outline:none;background:#FFF;border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(243,115,33,.16)}
.input.is-filled{background:#FFF;border-color:rgba(228,86,18,.4)}
.input.is-error{border-color:var(--deep-3);background:#FFF4EE;
  box-shadow:0 0 0 4px rgba(189,64,17,.12)}
.field__err{margin-top:7px;font-size:12.5px;font-weight:600;color:var(--deep-3);
  display:flex;align-items:center;gap:6px}
.field__err::before{content:"!";flex:0 0 auto;display:grid;place-items:center;
  width:15px;height:15px;border-radius:50%;background:var(--deep-3);color:#FFF;
  font-size:10px;font-weight:800;line-height:1}
.field__err--block{margin-top:12px}

/* pills (radio) */
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;width:1px;height:1px}
.pill span{display:flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 18px;border-radius:var(--r-pill);font-size:14.5px;font-weight:700;color:var(--ink-72);
  background:var(--cream-50);border:1.5px solid rgba(156,107,56,.24);
  transition:all .2s var(--ease)}
.pill span::before{content:"";width:0;height:0;margin-right:0;border-radius:50%;
  background:#FFF;transition:all .2s var(--ease)}
.pill:hover span{border-color:rgba(228,86,18,.45)}
.pill input:checked+span{color:#FFF;border-color:transparent;
  text-shadow:0 1px 1px rgba(74,18,0,.4);
  background:linear-gradient(180deg,var(--deep-2),var(--deep-4));
  box-shadow:0 6px 14px rgba(168,56,10,.32);transform:translateY(-1px)}
.pill input:checked+span::before{width:7px;height:7px;margin-right:7px}
.pill input:focus-visible+span{outline:3px solid var(--deep-1);outline-offset:2px}

/* 사연 paper (현상지) */
.paper{position:relative;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(180deg,#FBEFD9,#F6E6C9);
  box-shadow:var(--sh-1),inset 0 0 0 1.5px rgba(156,107,56,.22);
  transition:filter .55s var(--ease),box-shadow .25s,background .35s}
.paper.is-soft{filter:sepia(.32) contrast(.95) brightness(1.02)}
.paper.is-focus{background:#FFFFFF;box-shadow:0 0 0 4px rgba(243,115,33,.16),var(--sh-1);filter:none}
.paper.is-error{box-shadow:0 0 0 4px rgba(189,64,17,.12),inset 0 0 0 1.5px var(--deep-3)}
.paper__perf{position:absolute;top:0;left:0;right:0;height:7px;background:var(--perf-h);
  background-size:auto 7px;opacity:.5;z-index:2}
.paper__stamp{position:absolute;top:12px;right:14px;z-index:2;opacity:.62}
/* faint 「소녀」 watermark — the licensed emotional anchor, behind the writing */
.paper__lyric{position:absolute;right:16px;bottom:6px;z-index:0;pointer-events:none;user-select:none;
  font-size:96px;line-height:1;letter-spacing:.04em;color:rgba(65,30,0,.055)}
.paper__ta{position:relative;z-index:1;display:block;width:100%;min-height:172px;resize:vertical;border:none;background:transparent;
  padding:24px 16px 8px;font-family:"MaruBuri","Pretendard Variable",serif;
  font-size:15.5px;line-height:1.85;color:var(--ink);
  background-image:repeating-linear-gradient(transparent 0 31px,rgba(156,107,56,.14) 31px 32px);
  background-attachment:local}
.paper__ta:focus{outline:none}
.paper__ta::placeholder{color:rgba(65,30,0,.34)}
.paper__foot{display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px 12px;background:transparent}
.paper__hint{font-size:11.5px;color:var(--ink-72)}
.paper__hint.is-ok{color:var(--deep-2);font-weight:700}
.counter{font-size:12px;font-weight:700;color:var(--ink-72);font-variant-numeric:tabular-nums}
.counter.is-over{color:var(--deep-3)}

/* photos */
.photos{display:flex;flex-wrap:wrap;gap:11px}
.photo-add,.photo{width:84px;height:104px;flex:0 0 auto}
.photo-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;border-radius:10px;color:var(--deep-2);
  background:var(--cream-50);border:2px dashed rgba(228,86,18,.4);
  font-size:11.5px;font-weight:700;transition:all .2s;padding-bottom:2px}
.photo-add:hover{background:#FFF3E4;border-color:var(--deep-1)}
.photo-add__n{font-size:10.5px;color:var(--ink-72);font-weight:700}
.photo-add__n b{color:var(--deep-2)}
.photo-add.is-full{opacity:.45;pointer-events:none}
.photo{position:relative;background:#FFFEFB;padding:6px 6px 20px;border-radius:3px;
  box-shadow:var(--sh-1);transform:rotate(var(--rot,-3deg));overflow:visible}
.photo:nth-child(odd){--rot:2.6deg}
.photo__img{width:100%;height:100%;object-fit:cover;border-radius:2px;display:block;
  filter:sepia(.34) contrast(.96) saturate(.92)}
.photo__flash{position:absolute;inset:0;background:#FFF;border-radius:3px;pointer-events:none;
  animation:devflash 1s var(--ease) forwards}
@keyframes devflash{0%{opacity:.95}100%{opacity:0}}
.photo__cap{position:absolute;left:0;right:0;bottom:5px;text-align:center;
  font-family:"SacheonHangGong",sans-serif;font-size:12px;color:var(--ink-72)}
.photo__rm{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;border:none;cursor:pointer;color:#FFF;
  background:linear-gradient(180deg,var(--deep-2),var(--deep-4));box-shadow:var(--sh-1)}
/* keep 26px visual, expand tap target to ≥44px */
.photo__rm::after{content:"";position:absolute;inset:-9px;border-radius:50%}
.photos__hint{display:flex;align-items:center;gap:6px;margin-top:13px;font-size:12.5px;
  font-weight:700;color:var(--deep-2)}
.photos__hint svg{color:var(--primary)}

/* consent */
.block--consent{background:linear-gradient(180deg,#FFF7EC,#FFF1E0);border-color:rgba(228,86,18,.18)}
.check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;min-height:44px;align-items:center}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check__box{flex:0 0 auto;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  color:transparent;background:#FFF;border:1.5px solid rgba(156,107,56,.4);transition:all .2s}
.check__box svg{transition:transform .2s}
.check input:checked+.check__box{background:linear-gradient(180deg,var(--primary),var(--deep-2));
  border-color:transparent;color:#FFF}
.check input:focus-visible+.check__box{outline:3px solid var(--deep-1);outline-offset:2px}
.check__txt{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.4}
.consent__sum{margin:13px 0 0;padding:12px 13px;border-radius:10px;
  background:rgba(255,255,255,.6);font-size:12px;color:var(--ink-72);line-height:1.6}
.consent__more{display:inline-flex;align-items:center;gap:3px;margin-top:9px;padding:11px 2px;
  min-height:44px;background:none;border:none;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--deep-2)}
.consent__more[aria-expanded="true"] .acc__chev{transform:rotate(180deg)}
.consent__detail{margin-top:10px}
.consent__tbl{width:100%;border-collapse:collapse;font-size:12.5px;
  border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(156,107,56,.18)}
.consent__tbl th,.consent__tbl td{padding:10px 12px;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(156,107,56,.14)}
.consent__tbl th{width:78px;background:rgba(243,115,33,.08);font-weight:700;color:var(--ink-72)}
.consent__tbl td{color:var(--ink-72)}
.consent__tbl tr:last-child th,.consent__tbl tr:last-child td{border-bottom:none}
.consent__note{margin-top:9px;font-size:11.5px;color:var(--ink-72)}

.form__guard{min-height:18px;padding:2px var(--gut);text-align:center;font-size:12.5px;
  font-weight:700;color:var(--deep-3);--gut:26px}
.form__guard.is-ready{color:var(--deep-1)}

/* submit states */
.cta--submit{width:100%;border:none;cursor:pointer;font-family:inherit}
/* warm kraft inert state (never cold gray, stays in-world) */
.cta--submit:disabled{background:linear-gradient(180deg,var(--disabled),var(--disabled-2));
  color:var(--disabled-ink);text-shadow:none;
  box-shadow:inset 0 0 0 1px rgba(154,124,78,.25);cursor:not-allowed;transform:none}
.cta--submit:disabled .cta__ic{color:var(--disabled-ink)}
.cta--submit:disabled .cta__shine{display:none}

/* =====================================================================
   SUCCESS — 사연 현상 signature moment
   ===================================================================== */
.dev{position:fixed;inset:0;z-index:120;overflow-y:auto;
  background:radial-gradient(120% 70% at 50% 0,rgba(228,86,18,.18),transparent 55%),
            linear-gradient(180deg,var(--film-850),var(--film-900));
  display:flex;align-items:center;justify-content:center;padding:48px 24px}
.dev[hidden]{display:none}
.dev__grain{position:absolute;inset:0;background-image:var(--grain);background-size:160px 160px;
  mix-blend-mode:overlay;opacity:.2;pointer-events:none}
.dev__leak{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:340px;height:300px;
  background:radial-gradient(circle,rgba(255,90,40,.5),transparent 70%);
  filter:blur(30px);mix-blend-mode:screen;pointer-events:none}
.dev__inner{position:relative;z-index:2;width:100%;max-width:340px;text-align:center}
.dev__kicker{font-size:10px;font-weight:800;letter-spacing:.3em;color:var(--salmon);margin-bottom:18px}

.dev__frame{position:relative;width:min(264px,80%);margin:0 auto 30px;
  padding:12px 12px 0;background:#FFFDF8;border-radius:5px;
  box-shadow:var(--sh-3),var(--glow);transform:rotate(-1.6deg)}
.dev__perf{position:absolute;top:12px;left:12px;right:12px;height:5px;background:var(--perf-h);
  background-size:auto 5px;opacity:.85;border-radius:1px;z-index:3}
.dev__win{position:relative;aspect-ratio:300/188;overflow:hidden;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(60,32,10,.16)}
.dev__win .scene{position:absolute;inset:0;width:100%;height:100%}
.dev__sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,rgba(255,255,255,.4),transparent 38%)}
.dev__tape{position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:104px;height:26px;z-index:4;
  background:linear-gradient(135deg,rgba(255,224,176,.82),rgba(255,200,140,.64));
  box-shadow:0 3px 8px rgba(0,0,0,.3);mix-blend-mode:screen;opacity:.92}
.dev__cap{position:relative;padding:14px 6px 18px}
.dev__cap-ink{display:inline-block;font-size:21px;color:var(--ink)}
.dev__cap-ul{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;width:200px;height:12px}
#devUl{stroke-dasharray:260;stroke-dashoffset:260}

.dev__title{font-size:27px;font-weight:800;color:var(--on-dark);line-height:1.3}
.dev__title em{color:var(--salmon)}
.dev__msg{margin-top:13px;font-size:14.5px;line-height:1.72;color:var(--on-dark-70)}
.dev__receipt{margin:24px auto 0;max-width:300px;display:flex;flex-direction:column;gap:1px;
  border-radius:var(--r-md);overflow:hidden;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(245,144,81,.22)}
.dev__receipt>div{display:flex;justify-content:space-between;gap:12px;padding:13px 16px}
.dev__receipt dt{font-size:12.5px;color:var(--on-dark-70)}
.dev__receipt dd{font-size:12.5px;font-weight:700;color:var(--on-dark);text-align:right}
.dev__btn{display:flex;align-items:center;justify-content:center;height:54px;margin-top:26px;
  border-radius:var(--r-md);font-size:16.5px;font-weight:800;color:#FFF;
  background:linear-gradient(180deg,var(--deep-1),var(--deep-2));
  box-shadow:0 10px 24px rgba(201,69,12,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.dev__btn:active{transform:translateY(1px)}

/* developing choreography */
@keyframes develop{0%{filter:blur(14px) sepia(.85) saturate(.4) contrast(.82) brightness(1.12)}
  100%{filter:none}}
@keyframes writeon{from{clip-path:inset(0 102% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes tapeSnap{0%{transform:translateX(-50%) rotate(-3deg) scale(.4);opacity:0}
  62%{transform:translateX(-50%) rotate(-3deg) scale(1.12);opacity:1}
  100%{transform:translateX(-50%) rotate(-3deg) scale(1);opacity:.92}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.dev.go .dev__win .scene{animation:develop 1.9s var(--ease) .15s both}
.dev.go .dev__tape{animation:tapeSnap .55s var(--ease) 1.5s both}
.dev.go .dev__cap-ink{animation:writeon 1s var(--ease) 1.15s both}
.dev.go #devUl{animation:draw .7s var(--ease) 1.8s forwards}
.dev.go .dev__title{animation:fadeUp .6s var(--ease) 1.7s both}
.dev.go .dev__msg{animation:fadeUp .6s var(--ease) 1.85s both}
.dev.go .dev__receipt{animation:fadeUp .6s var(--ease) 2s both}
.dev.go .dev__btn{animation:fadeUp .6s var(--ease) 2.15s both}

@media (prefers-reduced-motion:reduce){
  .dev.go .dev__win .scene,.dev.go .dev__tape,.dev.go .dev__cap-ink,
  .dev.go #devUl,.dev.go .dev__title,.dev.go .dev__msg,.dev.go .dev__receipt,.dev.go .dev__btn{
    animation-duration:.001ms!important}
  #devUl{stroke-dashoffset:0}
}

/* tiny phones */
@media (max-width:360px){
  section{--gut:20px}
  .hero__line{font-size:clamp(36px,12.4vw,48px)}
  .a-intro,.form,.form__guard{--gut:20px}
  .photo-add,.photo{width:78px;height:98px}
}