/* =====================================================================
   「노을, 그리고 소녀」 — GOLDEN HOUR  ·  한화생명 콘서트 3차 사연 응모
   Concept A · cinematic illustrated sunset world (mobile-first)
   Fonts: Sacheon(display) · Pretendard(UI) · MaruBuri(lyric)
   ===================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

@font-face{
  font-family:"SacheonHangGong";
  src:url("../../_shared/fonts/SacheonHangGong-Regular.ttf") format("truetype");
  font-weight:400; font-display:swap;
}
/* MaruBuri self-hosted (woff2) — lyric 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;
}

/* ---------------------------------------------------------------- TOKENS */
:root{
  /* warm 12-step tonal scale (tinted, never gray) */
  --cream-0:#FFFDF7;  --cream-1:#FFF8EC;  --cream-2:#FFF3E2;
  --cream-3:#FFEEDA;  --peach-0:#FFE6CC;  --peach-1:#FFD9B5;
  --peach-2:#FCC793;  --apricot:#F8B373;  --salmon:#F59051;
  --orange:#F37321;   --orange-2:#FA8E49; --ember:#E45612;
  --ember-d:#C9450C;  --rust:#BD4011;     --rust-d:#9E3408;

  /* ink */
  --ink:#411E00;
  --ink-90:rgba(65,30,0,.92);
  --ink-72:rgba(65,30,0,.74);
  --ink-56:rgba(65,30,0,.56);
  --ink-40:rgba(65,30,0,.40);
  --ink-22:rgba(65,30,0,.22);
  --line:rgba(120,55,12,.16);
  --line-2:rgba(120,55,12,.28);

  /* dusk counterpoint — a single cool note makes the gold read richer */
  --dusk:#5B4E86;
  --dusk-2:#3C3566;

  --white:#FFFFFF;
  --disabled:#E2D7C8;     /* warm-tinted disabled, D0D0D0 family */
  --disabled-ink:#B6A892;

  /* serif (lyric) fallback stack — robust if MaruBuri ever fails */
  --serif:"MaruBuri","Nanum Myeongjo","AppleMyungjo","Apple SD Gothic Neo",serif;

  /* spacing scale (4-based) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:28px; --s7:40px; --s8:56px; --s9:76px;

  /* radii */
  --r-xs:10px; --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:36px; --r-pill:999px;

  /* warm tinted shadows */
  --sh-1:0 2px 10px rgba(150,62,12,.08);
  --sh-2:0 12px 30px -10px rgba(150,62,12,.20);
  --sh-3:0 26px 60px -18px rgba(120,46,6,.30);
  --sh-in:inset 0 1px 0 rgba(255,255,255,.65);
  --glow-sun:0 0 50px rgba(255,176,84,.55);

  --maxw:600px;
  --head-h:52px;
  /* CTA gradient — top stop darkened so WHITE text clears 4.5:1 across the whole fill
     (#C9450C on white ≈ 4.73:1). Used by buttons, badges, pills, rank chips. */
  --grad-cta:linear-gradient(180deg,#C9450C 0%,#B03D0A 52%,#993207 100%);
  /* 1등 foil — warm metallic sheen for the headline prize panel */
  --foil:linear-gradient(135deg,#FFE9B8 0%,#FFC56F 26%,#F58A2E 54%,#E3550F 78%,#C9450C 100%);
  /* faint sun-seal watermark — carries the illustrated world behind below-fold sections */
  --seal-wm:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2060'%3E%3Ccircle%20cx='30'%20cy='30'%20r='29'%20fill='none'%20stroke='%23C9450C'%20stroke-width='1.4'/%3E%3Ccircle%20cx='30'%20cy='30'%20r='29'%20fill='none'%20stroke='%23C9450C'%20stroke-width='1.4'%20stroke-dasharray='2%205'/%3E%3Cg%20stroke='%23C9450C'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Cline%20x1='30'%20y1='4'%20x2='30'%20y2='12'/%3E%3Cline%20x1='30'%20y1='48'%20x2='30'%20y2='56'/%3E%3Cline%20x1='4'%20y1='30'%20x2='12'%20y2='30'/%3E%3Cline%20x1='48'%20y1='30'%20x2='56'%20y2='30'/%3E%3Cline%20x1='11'%20y1='11'%20x2='17'%20y2='17'/%3E%3Cline%20x1='43'%20y1='43'%20x2='49'%20y2='49'/%3E%3Cline%20x1='49'%20y1='11'%20x2='43'%20y2='17'/%3E%3Cline%20x1='17'%20y1='43'%20x2='11'%20y2='49'/%3E%3C/g%3E%3Ccircle%20cx='30'%20cy='30'%20r='11'%20fill='%23C9450C'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif;
  font-size:16px; line-height:1.6; color:var(--ink);
  word-break:keep-all; overflow-wrap:break-word;
  background:linear-gradient(180deg,#FFF0DD 0%,#FFE6C9 50%,#FFEAD6 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--ember);outline-offset:2px;border-radius:6px}
input,textarea{font:inherit;color:inherit}
::selection{background:rgba(243,115,33,.22);color:var(--ink)}

/* ============================================================ SKY WORLD */
.sky{position:absolute;top:0;left:0;right:0;height:clamp(600px,108svh,940px);z-index:0;overflow:hidden;
  pointer-events:none;
  background:
    /* dusk crown — ONE cool note so the gold reads as true golden hour */
    radial-gradient(150% 42% at 50% -10%, rgba(91,78,134,.22) 0%, rgba(91,78,134,.07) 36%, rgba(91,78,134,0) 60%),
    /* warm sun-pool aligned to the cresting SVG sun (right-of-centre, low) */
    radial-gradient(108% 56% at 65% 64%, #FFD89A 0%, rgba(255,208,137,0) 54%),
    linear-gradient(180deg,#F0E5DC 0%,#FBE7CE 18%,#FFE0BA 40%,#FFCE9C 64%,#FBB672 100%);
}
.sky svg{position:absolute;inset:0;width:100%;height:100%}

/* fine sun ray-burst (CSS, performant, rotates) — centered on the cresting sun */
.sunrays{position:absolute;left:65%;top:63%;width:158vh;height:158vh;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,
    rgba(255,206,128,.0) 0deg 5.2deg,
    rgba(255,214,142,.18) 5.2deg 6.6deg);
  -webkit-mask:radial-gradient(circle at center, #000 3%, rgba(0,0,0,.55) 22%, transparent 54%);
          mask:radial-gradient(circle at center, #000 3%, rgba(0,0,0,.55) 22%, transparent 54%);
  mix-blend-mode:screen;opacity:.9;
  animation:rayspin 120s linear infinite;
}
@keyframes rayspin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* warm light pools + vignette */
.sky::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(40% 30% at 22% 30%, rgba(255,229,180,.55), transparent 70%),
    radial-gradient(46% 34% at 84% 20%, rgba(255,214,150,.45), transparent 72%);
  mix-blend-mode:screen;}
.sky::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 30%, transparent 52%, rgba(120,52,8,.16) 100%);}

/* dust motes */
.motes{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mote{position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(255,238,200,.95),rgba(255,210,150,0) 70%);
  filter:blur(.3px);animation:drift linear infinite;}
@keyframes drift{
  0%{transform:translate(0,0);opacity:0}
  10%{opacity:.9}90%{opacity:.7}
  100%{transform:translate(14px,-120px);opacity:0}}

/* film grain — global, premium texture over everything */
.grain{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.05;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* apply.html = calmer sky, but still present behind the form-hero */
body.calm .sky{height:clamp(440px,68svh,640px);background:
    radial-gradient(150% 40% at 50% -8%, rgba(91,78,134,.15), rgba(91,78,134,0) 56%),
    radial-gradient(124% 60% at 50% 92%, #FFD295 0%, rgba(255,210,149,0) 58%),
    linear-gradient(180deg,#F4EADF 0%,#FFF1DE 28%,#FFE6C9 56%,#FFD8B2 100%);}
body.calm .sunrays{opacity:.5;left:50%;top:80%}
/* soft fade so the calm sky melts into the page rather than hard-cutting */
body.calm .sky::after{background:
  linear-gradient(180deg,transparent 56%,rgba(255,230,201,.5) 86%,#FFE6C9 100%),
  radial-gradient(120% 90% at 50% 24%, transparent 58%, rgba(120,52,8,.12) 100%);}

/* ============================================================== LAYOUT */
.app{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));}

/* fixed header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--head-h);}
.site-header .bar{max-width:var(--maxw);margin:0 auto;height:var(--head-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  background:linear-gradient(180deg,rgba(255,248,236,.92),rgba(255,248,236,.62) 70%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.site-header .logo{height:21px;width:auto;filter:saturate(1.05)}
.hbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  color:var(--ink-72);transition:background .2s,color .2s}
.hbtn:hover{background:rgba(201,69,12,.10);color:var(--ember-d)}
.hbtn svg{width:20px;height:20px}

/* generic section paddings */
section{position:relative}
.wrap{padding-inline:20px}

/* curved horizon divider */
.divider{display:block;width:100%;height:46px;margin-top:-1px;position:relative;z-index:1}
.divider svg{width:100%;height:100%}

/* ================================================================ HERO */
.hero{position:relative;padding:calc(var(--head-h) + 30px) 20px 22px;
  min-height:clamp(372px,48svh,452px);display:flex;flex-direction:column;justify-content:flex-end}
.eyebrow{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ember-d);padding:7px 13px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.46);box-shadow:inset 0 0 0 1px rgba(201,69,12,.22);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 8px rgba(243,115,33,.9)}
.hero h1{font-family:"SacheonHangGong",sans-serif;font-weight:400;
  margin-top:16px;font-size:clamp(36px,11.4vw,52px);line-height:1.1;
  color:var(--ink);letter-spacing:-.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.5),0 14px 30px rgba(150,62,12,.14)}
.hero h1 .em{position:relative;display:inline-block;color:transparent;isolation:isolate;
  /* darker rust stops — even the lightest clears ≥3:1 on the warm sky */
  background:linear-gradient(184deg,#C9450C 0%,#A6360A 46%,#7E2906 100%);
  -webkit-background-clip:text;background-clip:text;
  /* tight dark halo (glyph-alpha outline) lifts the word off the bright sky */
  filter:drop-shadow(0 0 1.2px rgba(74,22,4,.72)) drop-shadow(0 1px 0 rgba(74,22,4,.5))
         drop-shadow(0 2px 0 rgba(74,22,4,.28)) drop-shadow(0 10px 18px rgba(150,48,8,.26))}
.brush{position:absolute;left:-2%;bottom:-12px;width:104%;height:20px;
  overflow:visible}
.brush path{stroke-dasharray:340;stroke-dashoffset:0}
/* de-emphasized vs the poetic headline — the money beat lives in the prize section */
.hero .sub{margin-top:22px;font-size:14.5px;font-weight:500;color:var(--ink-72);
  max-width:24em;line-height:1.6;letter-spacing:.004em}
.hero .sub b{color:var(--ember-d);font-weight:700}
.datechip{margin-top:18px;align-self:flex-start;display:inline-flex;align-items:center;
  gap:10px;padding:10px 16px 10px 13px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,246,233,.86));
  box-shadow:var(--sh-2),inset 0 0 0 1px rgba(201,69,12,.16);
  font-size:13.5px;font-weight:700;color:var(--ink-90);letter-spacing:.01em}
.datechip .k{font-size:10.5px;font-weight:800;letter-spacing:.16em;
  color:#fff;background:var(--grad-cta);padding:4px 9px;border-radius:var(--r-pill);
  text-transform:uppercase}
.datechip .num{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.scrollcue{align-self:center;margin-top:20px;display:flex;flex-direction:column;
  align-items:center;gap:6px;color:var(--ink-72);font-size:11px;font-weight:700;
  letter-spacing:.16em}
.scrollcue .mouse{width:22px;height:34px;border-radius:12px;
  border:2px solid var(--ink-40);position:relative}
.scrollcue .mouse::after{content:"";position:absolute;top:6px;left:50%;
  width:3px;height:7px;border-radius:2px;background:var(--ember-d);
  transform:translateX(-50%);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}
  70%{opacity:0;transform:translate(-50%,8px)}}

/* ============================================================== THEME · 「소녀」 record */
.theme{position:relative;padding:34px 20px 30px;text-align:center;
  /* warm veil: opaque behind the kicker (top) & couplet (bottom) for legibility,
     translucent through the middle so the rooftop world / foreground depth shows
     behind the record — golden-hour haze settling over the scene */
  background:linear-gradient(180deg,
    rgba(255,247,233,.9) 0%, rgba(255,246,231,.88) 18%,
    rgba(255,245,229,.56) 34%, rgba(255,244,228,.56) 62%,
    rgba(255,241,223,.93) 100%);}
.kicker{font-size:11px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;
  /* deeper rust than --ember-d so the small label clears ≥4.5:1 on warm cream
     (and ≥4.5 over the veiled rooftop scene behind the THEME kicker) */
  color:#A6360A;display:inline-flex;gap:10px;align-items:center}
.kicker::before,.kicker::after{content:"";width:22px;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--rust));}
.kicker::after{background:linear-gradient(90deg,var(--rust),transparent)}

/* a record sleeve — the song title as a "now playing" beat (a build, not a repeat) */
.record{position:relative;display:inline-flex;align-items:center;gap:16px;text-align:left;
  margin-top:18px;padding:15px 24px 15px 15px;border-radius:22px;overflow:hidden;
  background:linear-gradient(152deg,#3C1C0D 0%,#26110A 58%,#190A05 100%);
  box-shadow:0 26px 50px -20px rgba(74,28,4,.62),inset 0 1px 0 rgba(255,201,135,.18),
             inset 0 0 0 1px rgba(255,170,90,.12)}
.record::after{content:"";position:absolute;right:-34px;top:-44px;width:128px;height:128px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,176,84,.3),transparent 66%);
  pointer-events:none}
.vinyl{width:76px;height:76px;flex:none;position:relative;z-index:1;
  filter:drop-shadow(0 7px 13px rgba(0,0,0,.45));animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.track{position:relative;z-index:1}
.np{display:inline-flex;align-items:center;gap:7px;font-size:9.5px;font-weight:800;
  letter-spacing:.22em;color:#FFC987;text-transform:uppercase}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.eq i{width:2.6px;background:#FFC987;border-radius:2px;transform-origin:bottom;
  animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(1){height:6px;animation-delay:-.2s}
.eq i:nth-child(2){height:11px;animation-delay:-.6s}
.eq i:nth-child(3){height:8px;animation-delay:-.4s}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.song{font-family:"SacheonHangGong",sans-serif;font-weight:400;font-size:38px;line-height:1;
  margin-top:8px;color:#FFE8CB;letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.3)}
.byline{margin-top:7px;font-size:12.5px;font-weight:600;color:rgba(255,232,203,.82);
  letter-spacing:.05em;font-variant-numeric:tabular-nums}

.theme .couplet{font-family:var(--serif);
  font-size:15.5px;line-height:1.9;color:var(--ink-90);margin-top:22px;max-width:21em;
  margin-inline:auto}
.theme .couplet em{font-style:normal;color:var(--ember-d);font-weight:700;
  box-shadow:inset 0 -.5em 0 rgba(250,142,73,.22)}

/* ============================================================== PRIZE
   Re-composed for breathing room: ONE confident foil hero (1등), a quiet
   de-boxed secondary row (2등), and a hairline promise line — instead of
   three stacked boxes + badges. Editorial calm to match the hero & LP card. */
.prize{position:relative;padding:30px 20px 40px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,240,221,.9),rgba(255,236,214,.94))}
/* faint sun-seal watermark — illustrated world carried below the fold */
.prize::before{content:"";position:absolute;top:-26px;right:-46px;width:240px;height:240px;z-index:0;
  background:var(--seal-wm) center/contain no-repeat;opacity:.05;transform:rotate(-9deg);
  pointer-events:none}

/* ---- section opener : calm centered label, same rhythm as THEME / STEPS ---- */
.prize-head{position:relative;z-index:1;text-align:center;margin-bottom:26px}
.prize-head .kicker{margin-bottom:10px}
.prize-head h2{font-size:23px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.prize-tally{margin-top:9px;font-size:13px;font-weight:600;color:var(--ink-72);
  letter-spacing:.01em}
/* #A6360A small-text accent clears ≥4.5:1 on the warm cream ground (≈5.9:1) */
.prize-tally b{font-weight:800;color:#A6360A;font-variant-numeric:tabular-nums}

/* ---- 1등 : the hero of this section — the one confident panel ---- */
.prizecard.gold{position:relative;z-index:1;display:block;overflow:hidden;isolation:isolate;
  padding:20px 22px 24px;border-radius:var(--r-xl);
  background:var(--foil);
  box-shadow:0 30px 58px -20px rgba(201,69,12,.55),inset 0 1px 0 rgba(255,255,255,.6),
             inset 0 0 0 1px rgba(255,255,255,.32)}
.prizecard.gold::after{content:"";position:absolute;right:-26px;top:-44px;width:160px;height:160px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 62%);
  mix-blend-mode:screen;pointer-events:none}
.goldtop{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}
.rank{display:inline-flex;align-items:center;font-size:12px;font-weight:800;
  color:#fff;background:var(--grad-cta);padding:5px 13px;border-radius:var(--r-pill);
  letter-spacing:.04em;flex:none}
.goldqty{font-size:12.5px;font-weight:700;color:#6E2A04;letter-spacing:.01em}
.goldqty b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.goldbody{position:relative;z-index:1;display:flex;align-items:center;gap:16px;margin-top:14px}
.gold .rankart{width:68px;height:68px;flex:none;
  filter:drop-shadow(0 7px 11px rgba(140,50,6,.32))}
.gold .info{flex:1;min-width:0}
.gold .plabel{font-size:14px;font-weight:800;color:#6E2A04;letter-spacing:.005em}
.gold .pamt{margin-top:2px;font-family:"SacheonHangGong",sans-serif;color:#3A1407;
  line-height:.9;display:flex;align-items:baseline;gap:6px}
.gold .pamt b{font-size:clamp(54px,16.5vw,66px);font-weight:400;letter-spacing:.01em;
  text-shadow:0 2px 0 rgba(255,255,255,.45),0 12px 20px rgba(140,50,6,.22)}
.gold .pamt .won{font-family:"Pretendard Variable",Pretendard,sans-serif;
  font-size:22px;font-weight:800;color:#7A3008}

/* ---- 2등 : clearly secondary — quiet row sitting on the section ground ---- */
.prize-second{position:relative;z-index:1;display:flex;align-items:center;gap:14px;
  margin-top:26px}
.gsmark{width:46px;height:46px;flex:none;filter:drop-shadow(0 4px 9px rgba(140,50,6,.16))}
.prize-second .ps-info{flex:1;min-width:0;display:flex;align-items:baseline;
  gap:9px;flex-wrap:wrap}
.rank-min{flex:none;font-size:12px;font-weight:800;color:#A6360A;letter-spacing:.04em}
.ps-name{font-size:15px;font-weight:700;color:var(--ink-90);line-height:1.4}
.ps-name b{font-weight:800;color:var(--ink)}
.ps-qty{flex:none;font-size:12px;font-weight:700;color:var(--ink-72);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ps-qty b{font-size:17px;font-weight:800;color:#A6360A}

/* ---- concert promise : a quiet, reassuring line — separated by a hairline ---- */
.prize-promise{position:relative;z-index:1;display:flex;align-items:center;gap:13px;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.film-min{width:34px;height:34px;flex:none}
.prize-promise span{flex:1 1 0;min-width:0;font-size:15px;font-weight:600;line-height:1.55;
  color:var(--ink-90)}
.prize-promise b{font-weight:800;color:#A6360A}

/* ============================================================== STEPS */
.steps{position:relative;padding:14px 20px 42px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,247,236,.96),rgba(255,242,227,.97))}
.steps::before{content:"";position:absolute;bottom:-40px;left:-50px;width:230px;height:230px;z-index:0;
  background:var(--seal-wm) center/contain no-repeat;opacity:.045;transform:rotate(7deg);
  pointer-events:none}
.steps .lead{position:relative;z-index:1;text-align:center;margin-bottom:22px}
.steps .lead .kicker{margin-bottom:8px}
.steps .lead h2{font-size:23px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.steplist{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px}
.steplist::before{content:"";position:absolute;left:39px;top:34px;bottom:34px;width:2px;
  background:repeating-linear-gradient(180deg,rgba(201,69,12,.4) 0 7px,transparent 7px 14px)}
.step{position:relative;display:flex;align-items:center;gap:16px;overflow:hidden;
  padding:16px 18px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,247,236,.96));
  box-shadow:var(--sh-1),var(--sh-in)}
/* letter-paper ruling — material echo of the apply page's 사연 textarea */
.step::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 25px,rgba(120,55,12,.05) 25px 26px);
  opacity:.7}
.stepnum{position:relative;z-index:1;width:48px;height:48px;flex:none;display:grid;place-items:center}
.stepnum .n{position:absolute;font-family:"SacheonHangGong",sans-serif;font-size:24px;
  color:#fff;z-index:2;line-height:1;padding-top:2px}
.stepart{width:48px;height:48px}
.step .txt{position:relative;z-index:1}
.step .txt h3{font-size:16px;font-weight:800;color:var(--ink)}
.step .txt p{font-size:13.5px;font-weight:500;color:var(--ink-72);margin-top:3px}
.step .txt .opt{color:var(--ember-d);font-weight:700}
.step .lineart{position:relative;z-index:1;margin-left:auto;width:30px;height:30px;
  color:var(--salmon);flex:none}

/* ============================================================ INVITATION */
.invite{position:relative;padding:54px 24px 50px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,236,214,.5),rgba(255,224,189,.92))}
/* deliberate kinetic background type — outlined so it reads as designed, not an accident */
.invite .ghost{position:absolute;left:50%;top:6px;transform:translateX(-50%);
  font-family:"SacheonHangGong",sans-serif;font-size:34vw;color:rgba(201,69,12,.045);
  -webkit-text-stroke:1.6px rgba(201,69,12,.14);
  white-space:nowrap;pointer-events:none;line-height:1;z-index:0}
/* polaroid keepsake — foreshadows the 추억 사진 step & the success snapshot */
.invite .snapshot{position:absolute;left:16px;top:34px;width:74px;z-index:1;
  transform:rotate(-8deg);filter:drop-shadow(0 12px 20px rgba(120,46,6,.22))}
.invite .q{position:relative;z-index:1;font-family:var(--serif);font-size:14.5px;
  color:var(--ink-72);line-height:1.9;margin-bottom:16px}
.invite h2{position:relative;z-index:1;font-family:"SacheonHangGong",sans-serif;
  font-size:clamp(18px,5vw,26px);line-height:1.5;color:var(--ink);letter-spacing:-.02em}
.invite h2 .em{color:var(--ember-d)}
.invite .p{position:relative;z-index:1;margin-top:18px;font-size:14px;color:var(--ink-72);
  line-height:1.85;max-width:22em;margin-inline:auto}
.invite .ornament{position:relative;z-index:1;width:80px;height:24px;margin:22px auto 0}

/* ============================================================ ACCORDION */
/* the page closes on a deeper amber/dusk — golden hour settling into evening */
.notice{position:relative;padding:14px 20px 60px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,224,189,.94) 0%,rgba(252,210,160,.97) 60%,rgba(244,196,150,.98) 100%)}
.notice::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 60% at 50% 120%, rgba(91,78,134,.12), transparent 60%)}
.notice>*{position:relative;z-index:1}
.acc{border-radius:var(--r);overflow:hidden;background:rgba(255,253,247,.86);
  box-shadow:var(--sh-1),inset 0 0 0 1px rgba(120,55,12,.1)}
.acc-trig{width:100%;display:flex;align-items:center;gap:12px;padding:17px 18px;
  font-size:15px;font-weight:800;color:var(--ink);text-align:left}
.acc-trig .qm{width:26px;height:26px;flex:none}
.acc-trig .chev{margin-left:auto;width:20px;height:20px;color:var(--ember-d);
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
.acc[open] .acc-trig .chev,.acc.open .acc-trig .chev{transform:rotate(180deg)}
.acc-body{padding:2px 18px 20px}
.acc-body ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.acc-body li{position:relative;padding-left:20px;font-size:13px;line-height:1.65;
  color:var(--ink-72)}
.acc-body li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;
  border-radius:50% 50% 50% 0;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--orange),var(--ember-d))}
.acc-body li b{color:var(--ink-90);font-weight:700}
/* native details fallback animation */
.acc:not([open]) .acc-body{display:none}

.footnote{padding:24px 20px 8px;text-align:center;font-size:11.5px;color:var(--ink-72);
  line-height:1.7}
.footnote div{max-width:30em;margin-inline:auto}
.footnote .ci{height:16px;opacity:.6;margin:0 auto 10px}

/* ============================================================ STICKY CTA */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  pointer-events:none}
.cta-bar .inner{max-width:var(--maxw);margin:0 auto;pointer-events:auto}
.cta-bar::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(255,233,205,.86) 38%,#FFE6C9);
  -webkit-mask:linear-gradient(180deg,transparent,#000 40%);
          mask:linear-gradient(180deg,transparent,#000 40%)}
.btn-primary{position:relative;display:flex;align-items:center;justify-content:center;
  gap:10px;width:100%;min-height:54px;border-radius:var(--r-pill);
  font-size:16.5px;font-weight:800;letter-spacing:.01em;color:#fff;
  background:var(--grad-cta);overflow:hidden;
  box-shadow:0 12px 26px -8px rgba(201,69,12,.55),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .14s ease,box-shadow .2s ease}
.btn-primary svg{width:20px;height:20px}
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);animation:sheen 4.6s ease-in-out infinite}
@keyframes sheen{0%,62%{left:-60%}80%{left:130%}100%{left:130%}}
.btn-primary:active{transform:translateY(2px) scale(.99)}
.btn-primary[disabled]{cursor:not-allowed;color:var(--disabled-ink);
  background:linear-gradient(180deg,#ECE2D4,#E2D7C8);box-shadow:var(--sh-1)}
.btn-primary[disabled]::after{display:none}
.btn-primary[disabled] svg{opacity:.5}

/* ============================================================ FORM (apply) */
.form-hero{position:relative;padding:calc(var(--head-h) + 26px) 20px 14px}
.form-hero .eyebrow{margin-bottom:14px}
.form-hero h1{font-family:"SacheonHangGong",sans-serif;font-size:clamp(28px,8.3vw,40px);
  line-height:1.16;color:var(--ink);letter-spacing:-.01em}
.form-hero h1 .em{position:relative;color:var(--ember-d)}
.form-hero h1 .em .brush{bottom:-8px;height:16px}
.form-hero .sub{margin-top:14px;font-size:14.5px;color:var(--ink-72);font-weight:600}
.form-hero .sub b{color:var(--ember-d);font-weight:800}

.form{padding:8px 18px 10px;display:flex;flex-direction:column;gap:18px}
.fieldset{position:relative;border-radius:var(--r-lg);padding:20px 18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,248,238,.94));
  box-shadow:var(--sh-2),var(--sh-in)}
/* faint paper grain on every card — shared material with the letter & landing */
.fieldset::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.045'/%3E%3C/svg%3E")}
.fieldset>*{position:relative;z-index:1}
/* the 사연 작성 card reads like a real letter laid on the desk */
.fieldset.letter-fs{background:linear-gradient(180deg,#FFFBF1,#FFF4E4);
  transform:rotate(-.5deg);box-shadow:var(--sh-3),inset 0 1px 0 rgba(255,255,255,.6)}
.fieldset.letter-fs .fs-head{transform:rotate(.5deg)}

.fs-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.fs-num{width:30px;height:30px;flex:none;display:grid;place-items:center;position:relative}
.fs-num .n{position:absolute;font-family:"SacheonHangGong",sans-serif;color:#fff;
  font-size:16px;z-index:2;line-height:1;padding-top:1px}
.fs-head h2{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em;
  position:relative}
.fs-head h2::after{content:"";position:absolute;left:0;right:-2px;bottom:-3px;height:6px;
  border-radius:4px;background:linear-gradient(90deg,rgba(250,142,73,.34),rgba(250,142,73,0));
  z-index:-1}
.req{font-size:10.5px;font-weight:800;color:#fff;background:var(--grad-cta);
  padding:3px 8px;border-radius:var(--r-pill);letter-spacing:.04em}
.opt-tag{font-size:10.5px;font-weight:800;color:var(--ember-d);
  background:rgba(243,115,33,.14);padding:3px 8px;border-radius:var(--r-pill)}

.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:13px;font-weight:700;color:var(--ink-72);
  margin-bottom:7px}
.field label .star{color:var(--ember-d)}
.control{width:100%;min-height:50px;padding:13px 15px;border-radius:var(--r-sm);
  background:#FFFDF9;font-size:16px;font-weight:500;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s,background .2s}
.control::placeholder{color:var(--ink-40);font-weight:500}
.control:focus{outline:none;background:#fff;
  box-shadow:inset 0 0 0 2px var(--orange),0 6px 18px -8px rgba(243,115,33,.4)}
.field.invalid .control{box-shadow:inset 0 0 0 2px var(--ember);background:#FFF7F3}
.errmsg{display:none;margin-top:7px;font-size:12px;font-weight:700;color:var(--ember-d)}
.field.invalid .errmsg{display:flex;align-items:center;gap:5px}
.errmsg svg{width:14px;height:14px}

/* story-type pills */
.type-hint{margin-bottom:12px;color:var(--ink-72);font-size:13px;font-weight:500;line-height:1.5}
.type-err{margin-top:11px}
.type-err.show{display:flex;align-items:center;gap:5px}
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{position:relative}
.pill input{position:absolute;opacity:0;width:1px;height:1px}
.pill span{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:10px 16px;border-radius:var(--r-pill);font-size:14px;font-weight:700;
  color:var(--ink-72);background:linear-gradient(180deg,#FFF6EA,#FFEFDD);
  box-shadow:inset 0 0 0 1.5px var(--line);transition:all .2s}
.pill .pdot{width:15px;height:15px;flex:none;color:var(--ember);transition:color .2s}
.pill input:hover+span{box-shadow:inset 0 0 0 1.5px var(--line-2)}
.pill input:checked+span{color:#fff;background:var(--grad-cta);
  box-shadow:0 8px 18px -7px rgba(201,69,12,.5);font-weight:800}
.pill input:checked+span .pdot{color:#fff}
.pill input:focus-visible+span{outline:3px solid var(--ember);outline-offset:2px}
.pills.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97)}
.pills.shake .pill span{box-shadow:inset 0 0 0 2px rgba(229,86,18,.6)}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}
  50%{transform:translateX(-5px)}}
@media (prefers-reduced-motion:reduce){.pills.shake{animation:none}}

/* a faint lyric whisper above the paper — anchors the 「소녀」(1985) mood, visible by default */
.letter-whisper{font-family:var(--serif);font-size:13px;font-style:italic;
  color:var(--ink-72);margin:-4px 0 12px;letter-spacing:.01em;display:flex;align-items:center;gap:8px}
.letter-whisper::before{content:"";width:16px;height:1.5px;flex:none;
  background:linear-gradient(90deg,var(--ember-d),transparent)}

/* letter-paper textarea */
.letterwrap{position:relative;border-radius:var(--r);overflow:hidden;
  background:
    linear-gradient(180deg,#FFFBF2,#FFF6EA);
  box-shadow:inset 0 0 0 1.5px var(--line),var(--sh-1);
  transition:box-shadow .28s ease,transform .28s ease}
.letterwrap::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 33px,rgba(120,55,12,.08) 33px 34px);
  opacity:.7}
.letterwrap::after{content:"";position:absolute;left:0;top:0;bottom:0;width:34px;
  background:linear-gradient(90deg,rgba(243,115,33,.1),transparent);
  border-right:1.5px solid rgba(229,86,18,.22);pointer-events:none}
/* 1985 postmark — a keepsake stamp in the paper corner (echoes the success seal) */
.postmark{position:absolute;right:11px;bottom:11px;width:50px;height:50px;z-index:0;
  opacity:.5;transform:rotate(-8deg);pointer-events:none}
.letterwrap.focus{box-shadow:inset 0 0 0 2px var(--orange),
  0 16px 34px -12px rgba(243,115,33,.45);transform:translateY(-2px)}
.letterwrap.invalid{box-shadow:inset 0 0 0 2px var(--ember)}
.letter{position:relative;z-index:1;width:100%;min-height:172px;resize:vertical;
  border:none;background:transparent;padding:16px 16px 16px 46px;
  font-family:var(--serif);font-size:16px;line-height:34px;
  color:var(--ink)}
.letter:focus{outline:none}
.letter::placeholder{color:var(--ink-56);font-family:var(--serif)}
.counter{display:flex;justify-content:flex-end;gap:2px;margin-top:8px;
  font-size:12.5px;font-weight:700;color:var(--ink-72);
  font-variant-numeric:tabular-nums}
.counter .c{color:var(--ink-90)}
.counter.warn .c{color:var(--ember)}
.counter.over .c{color:var(--ember-d)}

/* photo upload */
.photohead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
/* memory-keeping tone (was lottery framing) */
.photohint{display:flex;align-items:center;gap:9px;margin-bottom:14px;
  font-size:12.5px;font-weight:600;color:var(--ink-72);line-height:1.5;
  background:rgba(243,115,33,.08);padding:11px 13px;border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px rgba(201,69,12,.1)}
.photohint b{color:var(--ember-d);font-weight:800}
.photohint svg{width:20px;height:20px;flex:none}
.photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.photoslot{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden}
.addphoto{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;border-radius:var(--r-sm);
  background:#FFFBF3;color:var(--ember-d);font-size:11.5px;font-weight:700;
  box-shadow:inset 0 0 0 2px rgba(229,86,18,.3);
  background-image:radial-gradient(circle at 50% 42%,rgba(243,115,33,.06),transparent 60%)}
.addphoto svg{width:26px;height:26px}
.addphoto:hover{background:#FFF3E6}
/* composed empty placeholders so 0/3 never reads as a void */
.photoslot.ghost{display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(255,251,243,.7),rgba(255,243,228,.7));
  box-shadow:inset 0 0 0 1.5px var(--line)}
.photoslot.ghost svg{width:24px;height:24px;color:var(--ink-22)}
.photoslot.filled{box-shadow:var(--sh-1)}
.photoslot.filled img{width:100%;height:100%;object-fit:cover}
.photoslot .rm{position:absolute;top:6px;right:6px;width:24px;height:24px;
  display:grid;place-items:center;border-radius:50%;background:rgba(65,30,0,.66);
  color:#fff}
/* invisible 44px hit area keeps the visual mark at 24px */
.photoslot .rm::before{content:"";position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px}
.photoslot .rm svg{width:13px;height:13px}
.photoslot .frame{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px rgba(120,55,12,.18)}

/* consent */
.consent{position:relative;padding:18px 18px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,250,240,.96),rgba(255,243,230,.96));
  box-shadow:var(--sh-1),inset 0 0 0 1px rgba(120,55,12,.12)}
.consent.invalid{box-shadow:0 0 0 2px var(--ember),var(--sh-1)}
.chk{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.chk input{position:absolute;opacity:0;width:1px;height:1px}
.chkbox{width:26px;height:26px;flex:none;margin-top:1px}
.chk .ctext{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.45}
.chk .ctext .req{margin-left:6px;vertical-align:2px}
.chk input:focus-visible+.chkbox{outline:3px solid var(--ember);outline-offset:2px;border-radius:7px}
.chkbox .box-fill{opacity:0;transition:opacity .2s}
.chkbox .box-check{opacity:0;transition:opacity .2s}
.chk input:checked+.chkbox .box-fill{opacity:1}
.chk input:checked+.chkbox .box-check{opacity:1}
.chk input:checked+.chkbox .box-out{stroke:#C9450C}
.consent .summary{margin-top:12px;padding:13px 14px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.7);font-size:12.5px;line-height:1.7;color:var(--ink-72)}
.consent .summary b{color:var(--ink-90);font-weight:700}
.consent .more{margin-top:4px;display:inline-flex;align-items:center;gap:5px;
  min-height:44px;padding:8px 2px;
  font-size:12.5px;font-weight:800;color:var(--ember-d)}
.consent .more svg{width:14px;height:14px;transition:transform .3s}
.consent .more.open svg{transform:rotate(180deg)}
.consent .detail{display:none;margin-top:10px;padding:13px 14px;border-radius:var(--r-sm);
  background:rgba(120,55,12,.05);font-size:12px;line-height:1.75;color:var(--ink-72)}
.consent .detail.open{display:block}
.consent .detail table{width:100%;border-collapse:collapse;margin-top:4px}
.consent .detail td{padding:5px 6px;border-top:1px solid var(--line);vertical-align:top}
.consent .detail td:first-child{font-weight:700;color:var(--ink-90);white-space:nowrap;
  width:30%}

/* ============================================================ SUCCESS */
.success{position:fixed;inset:0;z-index:100;display:none;overflow-y:auto;
  background:
    radial-gradient(120% 80% at 50% 116%, #FFC777 0%, rgba(255,199,119,0) 55%),
    linear-gradient(180deg,#FFF7E8 0%,#FFE6C2 46%,#FBB877 100%)}
.success.show{display:block}
.success .swrap{max-width:var(--maxw);margin:0 auto;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 26px calc(40px + env(safe-area-inset-bottom));text-align:center}
.success .sun-send{width:120px;height:120px;margin-bottom:6px}
.success .slabel{font-size:11px;font-weight:800;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ember-d);margin-bottom:10px}
.success h2{font-family:"SacheonHangGong",sans-serif;font-size:clamp(30px,9vw,40px);
  color:var(--ink);line-height:1.2}
.success .lead{margin-top:12px;font-size:14.5px;font-weight:600;color:var(--ink-72);
  line-height:1.7;max-width:21em}
.keepsake{position:relative;margin-top:26px;width:100%;max-width:318px;
  border-radius:var(--r-lg);padding:24px 22px 22px;text-align:left;overflow:hidden;
  background:linear-gradient(180deg,#FFFDF8,#FFF4E6);
  box-shadow:var(--sh-3),var(--sh-in);transform:rotate(-1.4deg)}
.keepsake::before{content:"";position:absolute;left:0;top:0;right:0;height:6px;
  background:var(--grad-cta)}
.keepsake .ktop{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.keepsake .ksun{width:34px;height:34px;flex:none}
.keepsake .keyb{font-size:10px;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ember-d)}
.keepsake h3{font-size:17px;font-weight:800;color:var(--ink);line-height:1.4;
  letter-spacing:-.01em}
.keepsake .quote{margin-top:14px;padding:14px 14px 14px 16px;border-radius:var(--r-sm);
  background:rgba(255,243,228,.8);position:relative;
  box-shadow:inset 0 0 0 1px rgba(120,55,12,.1)}
.keepsake .quote::before{content:"";position:absolute;left:0;top:10px;bottom:10px;
  width:4px;border-radius:4px;background:var(--grad-cta)}
.keepsake .qtag{font-size:11px;font-weight:800;color:var(--ember-d);margin-bottom:5px;
  display:inline-block}
.keepsake .qtxt{font-family:var(--serif);font-size:13.5px;line-height:1.75;
  color:var(--ink-90)}
.keepsake .stamp{position:absolute;right:16px;bottom:14px;width:56px;height:56px;
  opacity:.92;transform:rotate(8deg)}
.success .note{margin-top:22px;font-size:12.5px;color:var(--ink-72);line-height:1.7;
  max-width:22em}
.success .note b{color:var(--ember-d);font-weight:800}
.success .home{margin-top:24px;width:100%;max-width:340px}

/* ============================================================ MOTION INIT
   Hidden states ONLY apply when JS confirms motion is allowed (.anim-init).
   No JS / reduced-motion -> fully visible, composed. */
.anim-init [data-rise]{opacity:0;transform:translateY(26px)}
.anim-init [data-fade]{opacity:0}
.anim-init .hero h1 .em{opacity:1}
.anim-init .brush path{stroke-dashoffset:340}

@media (prefers-reduced-motion:reduce){
  .sunrays,.btn-primary::after,.mote,.scrollcue .mouse::after,
  .vinyl,.eq i{animation:none!important}
  .anim-init [data-rise],.anim-init [data-fade]{opacity:1!important;transform:none!important}
}

/* ============================================================ RESPONSIVE */
@media (min-width:600px){
  .hero h1{font-size:54px}
  .app{box-shadow:0 0 120px rgba(120,46,6,.14)}
}
@media (max-width:360px){
  .wrap,.hero,.prize,.steps,.theme,.notice{padding-inline:16px}
  .hero h1{font-size:33px}
  .gold .pamt b{font-size:52px}
  .gold .rankart{width:60px;height:60px}
}