@charset "utf-8";
/* ============================================================
   한화생명 콘서트 3차 · 사연 응모 이벤트
   CONCEPT C — 「심야 라디오」 MIDNIGHT RADIO
   별이 빛나는 밤에, 1985 · 이문세 「소녀」
   ============================================================ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* 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;
}

@font-face {
  font-family: "SacheonHangGong";
  src: url("../../_shared/fonts/SacheonHangGong-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* ---------------------------------------------------------------
   DESIGN TOKENS — warm tonal scale (tinted shadows, never gray)
   --------------------------------------------------------------- */
:root {
  /* cream / sand surfaces */
  --cream-50:  #FFFBF2;
  --cream-100: #FFF6E1;
  --cream-200: #FFF0E0;
  --cream-300: #FFEADB;
  --paper:     #FBF7EE;
  --sand-300:  #F7DDC2;
  --sand-400:  #F2CBA4;

  /* orange family */
  --salmon:    #F59051;
  --clay:      #F0B98E;
  --orange:    #F37321;   /* PRIMARY */
  --orange-2:  #FA8E49;   /* secondary */
  --amber-6:   #E45612;
  --rust-7:    #C9450C;   /* white-on-orange fills ≥4.5:1 */
  --rust-8:    #BD4011;
  --ember-9:   #8A2E0A;
  --ember-10:  #5A240C;

  /* ink / depth */
  --ink:       #411E00;
  --ink-80:    rgba(65,30,0,.80);
  --ink-65:    rgba(65,30,0,.65);
  --ink-45:    rgba(65,30,0,.45);
  --ink-28:    rgba(65,30,0,.28);
  --ink-14:    rgba(65,30,0,.14);
  --ink-08:    rgba(65,30,0,.08);

  /* dusk / night (warm, plum only at edges) */
  --dusk-1:    #2A1408;
  --dusk-2:    #3A1B0C;
  --plum-edge: rgba(74,32,58,.55);
  --glow-warm: rgba(255,184,96,.55);
  --onair-red: #FF5A36;
  --onair-glow:#FF7A4D;

  /* disabled */
  --dis-bg:    #E6E1DA;
  --dis-fg:    #B9B2A8;
  --dis-line:  #D0C9BF;

  --white: #fff;

  /* tinted shadows */
  --sh-sm: 0 1px 2px rgba(95,40,5,.10), 0 2px 6px rgba(95,40,5,.07);
  --sh-md: 0 4px 14px rgba(120,50,8,.14), 0 12px 30px rgba(120,50,8,.10);
  --sh-lg: 0 10px 30px rgba(110,45,8,.18), 0 24px 60px rgba(110,45,8,.14);
  --sh-up: 0 -6px 22px rgba(120,55,12,.12);
  --glow-orange: 0 0 0 4px rgba(243,115,33,.16);

  /* white-on-fill gradients tuned for AA (white ≥4.5:1 across the whole fill) */
  --grad-rust:      linear-gradient(180deg, var(--rust-7), var(--ember-9));
  --grad-rust-soft: linear-gradient(150deg, var(--rust-7), var(--rust-8));

  /* spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px;

  /* radii */
  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px;

  --col: 600px;
  --header-h: 48px;
  --cta-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------
   RESET / BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  word-break: keep-all;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; font-size: 16px; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

.serif { font-family: "MaruBuri", "Pretendard Variable", serif; }
.hand  { font-family: "SacheonHangGong", "MaruBuri", serif; }
.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;
}

/* ---------------------------------------------------------------
   APP SHELL / COLUMN
   --------------------------------------------------------------- */
.app {
  position: relative;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  box-shadow: 0 0 60px rgba(60,25,5,.12);
  overflow: hidden;
  isolation: isolate;
}

/* film grain — sits over everything, ultra subtle */
.app::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .055;
  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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   HEADER (fixed 48px)
   --------------------------------------------------------------- */
.hdr {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: var(--col);
  height: var(--header-h);
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s4);
  background: linear-gradient(180deg, rgba(42,20,8,.92), rgba(42,20,8,.0));
  transition: background .4s var(--ease), backdrop-filter .4s;
}
.hdr.is-solid {
  background: rgba(251,247,238,.86);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 var(--ink-08);
}
.hdr__brand { display: flex; align-items: center; gap: 8px; }
.hdr__brand img { height: 22px; width: auto; filter: brightness(0) invert(1); transition: filter .4s; }
.hdr.is-solid .hdr__brand img { filter: none; }
.hdr__live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: #FFD9B0; transition: color .4s;
}
.hdr.is-solid .hdr__live { color: var(--rust-7); }
.hdr__live .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--onair-red);
  box-shadow: 0 0 6px rgba(255,90,54,.5);   /* static warm glow — no pulse (calm) */
}
.hdr__close {
  width: 44px; height: 44px; display: grid; place-items: center;   /* ≥44px tap target */
  border-radius: 50%; color: #FFE6CF; transition: color .4s, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.hdr.is-solid .hdr__close { color: var(--ink); }
.hdr__close:hover { background: var(--ink-08); }
.hdr__close svg { width: 22px; height: 22px; }

@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(255,90,54,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255,90,54,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,90,54,0); }
}

/* ---------------------------------------------------------------
   SECTION SYSTEM — layered, never flat
   --------------------------------------------------------------- */
.section { position: relative; padding: var(--s7) var(--s5); }
.section--tight { padding-top: var(--s6); padding-bottom: var(--s6); }

/* eyebrow with MHz running gag */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--rust-7);
  margin-bottom: var(--s4);
}
.eyebrow .mhz {
  font-variant-numeric: tabular-nums;
  color: var(--white);
  background: var(--grad-rust-soft);   /* white 10.5px ≥4.5:1 across the chip */
  padding: 3px 8px 2px; border-radius: 6px;
  letter-spacing: .04em; font-size: 10.5px;
  box-shadow: 0 2px 6px rgba(201,69,12,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
/* Korean-voiced eyebrow variant (no wide caps tracking on Hangul) */
.eyebrow--ko { text-transform: none; letter-spacing: .04em; }
.eyebrow::after {
  content: ""; width: 26px; height: 8px;
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='8' fill='none'%3E%3Cpath d='M1 4h2l1.5-3 2 6 2-5 1.5 4 1.5-2 1.5 3 2-4 1.5 2H25' stroke='%23C9450C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.55'/%3E%3C/svg%3E");
}
.eyebrow--light { color: #FFCDA3; }
.eyebrow--light .mhz {
  background: rgba(255,255,255,.12); color: #FFE0C2;
  box-shadow: inset 0 0 0 1px rgba(255,200,150,.35);
}
.eyebrow--light::after { filter: brightness(0) saturate(100%) invert(82%) sepia(30%) saturate(700%) hue-rotate(323deg); opacity:.7;}

.s-title {
  font-size: clamp(1.45rem, 6.4vw, 1.85rem);
  font-weight: 800; line-height: 1.28; letter-spacing: -.01em;
  color: var(--ink);
}
.s-title em { font-style: normal; color: var(--rust-7); }

/* bespoke soundwave divider */
.wave-rule { display: block; width: 100%; height: 14px; color: var(--ink-28); margin: var(--s5) 0; }
.wave-rule svg { width: 100%; height: 100%; }

/* faint giant background motif numeral */
.bg-numeral {
  position: absolute; pointer-events: none; z-index: 0;
  font-family: "Pretendard Variable", sans-serif;
  font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--ink); opacity: .04; letter-spacing: -.04em;
  white-space: nowrap; user-select: none;
}

/* ---------------------------------------------------------------
   HERO — the dusk radio booth
   --------------------------------------------------------------- */
.hero {
  position: relative;
  padding: calc(var(--header-h) + 12px) var(--s5) 20px;
  color: #FFF4E8;
  overflow: hidden;
  background:
    radial-gradient(115% 70% at 50% 16%, var(--glow-warm), transparent 58%),
    radial-gradient(80% 50% at 14% 2%, var(--plum-edge), transparent 60%),
    radial-gradient(80% 50% at 86% 0%, var(--plum-edge), transparent 58%),
    radial-gradient(120% 90% at 50% 108%, rgba(201,69,12,.55), transparent 60%),
    linear-gradient(178deg, var(--dusk-1) 0%, var(--ember-10) 46%, var(--ember-9) 72%, var(--amber-6) 100%);
}
/* drifting warm bokeh */
.hero__bokeh { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__bokeh span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,206,150,.9), rgba(255,170,90,0) 70%);
  filter: blur(1px);
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  0%   { transform: translateY(20px) scale(.7); opacity: 0; }
  15%  { opacity: .9; }
  85%  { opacity: .7; }
  100% { transform: translateY(-120px) scale(1.1); opacity: 0; }
}
/* faint horizon stars line */
.hero__stars {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #FFE9CF 50%, transparent),
    radial-gradient(1.2px 1.2px at 78% 14%, #FFD9AE 50%, transparent),
    radial-gradient(1px 1px at 38% 9%, #FFF 50%, transparent),
    radial-gradient(1.3px 1.3px at 62% 26%, #FFE0BD 50%, transparent),
    radial-gradient(1px 1px at 90% 30%, #FFEAD0 50%, transparent),
    radial-gradient(1px 1px at 24% 33%, #FFF1DD 50%, transparent);
}
.hero > * { position: relative; z-index: 2; }

.hero__bgfm {
  position: absolute; top: 6%; right: -4%; z-index: 1;
  font-weight: 800; font-size: 168px; line-height: .8;
  color: #FFD7A8; opacity: .05; letter-spacing: -.06em;
  font-variant-numeric: tabular-nums; pointer-events: none;
}

/* the radio faceplate — bespoke art centerpiece */
.faceplate {
  position: relative;
  margin: 0 auto 16px;
  width: 100%;
  max-width: 460px;            /* hero focal point — ~90% of the column */
  padding: 16px 18px 15px;
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(255,195,125,.20), transparent 60%),
    linear-gradient(180deg, #4A2511, #2C1407);
  box-shadow:
    inset 0 1px 0 rgba(255,190,130,.24),
    inset 0 -8px 22px rgba(0,0,0,.34),     /* softened inset-bottom — less gadget-heavy */
    0 20px 48px rgba(0,0,0,.42);
}
/* knurled inner bezel — tactile brushed-metal rail along the top edge */
.faceplate::before {
  content: ""; position: absolute; inset: 6px; border-radius: 16px;
  border: 1px solid rgba(255,185,120,.18); pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,205,155,.07) 0 1.5px, transparent 1.5px 5px) top/100% 8px no-repeat;
}
.fp__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }

/* ON AIR lamp */
.onair {
  --lit: 0;
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 4px; border-radius: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .2em;
  color: #FFCDB6;
  background: linear-gradient(180deg, rgba(120,40,20,.5), rgba(60,20,10,.6));
  box-shadow: inset 0 0 0 1px rgba(255,120,80,.25);
  transition: color .5s, box-shadow .5s, background .5s;
}
.onair .bulb {
  width: 9px; height: 9px; border-radius: 50%;
  background: #6e2a18; box-shadow: inset 0 0 3px rgba(0,0,0,.6);
  transition: background .4s, box-shadow .4s;
}
.onair.is-live {
  color: #FFF1E8;
  background: linear-gradient(180deg, rgba(255,90,54,.34), rgba(180,50,20,.4));
  box-shadow: inset 0 0 0 1px rgba(255,140,100,.6), 0 0 18px rgba(255,90,54,.4);
}
.onair.is-live .bulb {
  background: var(--onair-red);
  box-shadow: 0 0 8px 1px var(--onair-glow), 0 0 14px 3px rgba(255,90,54,.5);
  animation: bulbPulse 2.4s var(--ease) infinite;
}
@keyframes bulbPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .55; }
}

/* frequency readout */
.fp__freq {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
  color: #FFE3C2; text-shadow: 0 0 10px rgba(255,170,90,.5);
}
.fp__freq b { font-size: 24px; font-weight: 800; letter-spacing: .02em; }
.fp__freq i { font-style: normal; font-size: 10px; font-weight: 700; opacity: .7; letter-spacing: .1em; }

/* tuning dial */
.dial {
  position: relative;
  height: 74px; margin: 4px 2px 10px;
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255,228,196,.97), rgba(255,206,160,.92));
  box-shadow: inset 0 2px 6px rgba(120,55,15,.30), inset 0 -1px 0 rgba(255,255,255,.55);
  overflow: hidden;
}
.dial__scale { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial__needle {
  position: absolute; top: 5px; bottom: 5px; left: 52.5%;
  width: 2.5px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--rust-8), var(--amber-6));
  box-shadow: 0 0 9px 1.5px rgba(201,69,12,.75);
  border-radius: 2px;
  will-change: left;
}
.dial__needle::after {
  content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 7px solid var(--rust-8);
  filter: drop-shadow(0 0 4px rgba(201,69,12,.7));
}
.dial__glass {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,.55) 0%, transparent 18%, transparent 82%, rgba(255,255,255,.32) 100%);
}
/* faint scan-glow sweeping across the glass */
.dial__glass::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-16deg);
  animation: dialScan 5.5s var(--ease) infinite;
}
@keyframes dialScan { 0% { left: -40%; } 60%, 100% { left: 130%; } }

/* NOW BROADCASTING caption — names the heritage in the first screen */
.fp__now {
  position: relative; display: flex; align-items: center; gap: 9px;
  margin: 0 2px 11px; padding: 7px 11px; border-radius: 9px;
  background: rgba(0,0,0,.24);
  box-shadow: inset 0 0 0 1px rgba(255,185,120,.14);
  overflow: hidden;
}
.fp__now-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: 0 0 auto; }
.fp__now-eq i { width: 2.5px; height: 4px; background: #FFB877; border-radius: 1px; animation: eq .9s var(--ease) infinite alternate; }
.fp__now-eq i:nth-child(2) { animation-delay: .2s; } .fp__now-eq i:nth-child(3) { animation-delay: .45s; }
.fp__now-txt {
  flex: 1; min-width: 0; font-family: "MaruBuri", serif;
  font-size: 13px; font-weight: 700; letter-spacing: .01em; color: #FFE6C8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 10px rgba(255,170,90,.4);
}
.fp__now-play {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 36%;
  background: linear-gradient(90deg, transparent, #FFB877, var(--orange));
  box-shadow: 0 0 8px rgba(255,150,80,.6);
  animation: nowPlay 6.5s linear infinite;
}
@keyframes nowPlay { 0% { transform: translateX(-100%); } 100% { transform: translateX(278%); } }

/* waveform + reels row */
.fp__bottom { display: flex; align-items: center; gap: 12px; }
.reel { width: 26px; height: 26px; flex: 0 0 auto; color: #FFCB97; }
.reel svg { width: 100%; height: 100%; }
.reel.spin svg { animation: spin 5s linear infinite; transform-origin: 50% 50%; }   /* calmer */
@keyframes spin { to { transform: rotate(360deg); } }

.wave {
  flex: 1; height: 30px; display: flex; align-items: center; gap: 2px;
  justify-content: space-between; overflow: hidden;
}
.wave i {
  flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, #FFB877, var(--amber-6));
  transform-origin: 50% 50%; transform: scaleY(.26);
  box-shadow: 0 0 5px rgba(255,150,80,.3);
}
.wave.live i { animation: waveBeat var(--dur,1.2s) var(--ease) infinite alternate; }
@keyframes waveBeat { from { transform: scaleY(.20); } to { transform: scaleY(.68); } }   /* lower amplitude */

/* hero copy */
.hero__eyebrow { margin-bottom: 12px; }
.hero__title {
  font-family: "SacheonHangGong", serif;
  font-weight: 400;
  font-size: clamp(2.45rem, 12.4vw, 3.15rem);
  line-height: 1.04; letter-spacing: -.01em;
  text-align: center; color: #FFF7EE;
  text-shadow: 0 2px 18px rgba(0,0,0,.35), 0 0 40px rgba(255,150,80,.18);
}
.hero__title .ln { display: block; }
.hero__title .em {
  position: relative; display: inline-block;
  color: #FFC58A;
}
.hero__title .em > svg {
  position: absolute; left: -4%; bottom: -.30em; width: 108%; height: .42em;
  overflow: visible; color: var(--orange-2);
}
.hero__title .em .ul-path {
  stroke-dasharray: 240; stroke-dashoffset: 0; /* visible by default; JS hides→draws */
}

.hero__sub {
  text-align: center; margin: 14px auto 0; max-width: 19em;
  font-size: 14.5px; font-weight: 500; line-height: 1.55; color: #FFE2C8;
}
.hero__sub b { color: #FFD089; font-weight: 800; }

/* heartfelt station-ident whisper — feeling in the first screen */
.hero__ident {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 13px auto 0; max-width: 23em;
  font-size: 14px; line-height: 1.5; letter-spacing: .01em;
  color: #FFCFA3; text-align: center;
}
.hero__ident-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: #FFB877; box-shadow: 0 0 7px rgba(255,184,119,.75);   /* static amber, not red */
}

.hero__date {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 14px auto 0; width: max-content;
  padding: 9px 16px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: #FFEBD3;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,200,150,.28), 0 6px 18px rgba(0,0,0,.22);
  backdrop-filter: blur(4px);
}
.hero__date .live {
  width: 7px; height: 7px; border-radius: 50%; background: #FFB877;   /* static warm amber */
  box-shadow: 0 0 6px rgba(255,184,119,.7); flex: 0 0 auto;
}
.hero__date b { color: #FFF; font-weight: 800; }
.hero__date .sep { opacity: .6; }

.hero__cue {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: var(--s6); color: #FFCB9A;
  font-size: 10.5px; letter-spacing: .18em; font-weight: 700;
}
.hero__cue svg { width: 16px; height: 16px; animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* hero→prize interlocking curve — the dark console rises from the dusk glow */
.hero__seam {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
  width: 100%; height: 46px; color: #311709;
}
.hero__seam svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------
   PRIZE — 오늘 밤의 선물  ·  the broadcast console (dark radio world)
   The midnight-radio mood carries unbroken from the hero: charcoal
   faceplate ground + tuner-tick field + 98.5 motif, with the gift
   presented as warm gold glowing on the dark console.
   --------------------------------------------------------------- */
.prize {
  position: relative; overflow: hidden;
  color: #FFF3E6;
  padding-top: 30px;
  background:
    radial-gradient(150% 64% at 50% -10%, rgba(255,150,80,.32), transparent 50%),
    radial-gradient(72% 50% at 8% 10%, var(--plum-edge), transparent 60%),
    radial-gradient(72% 50% at 92% 6%, var(--plum-edge), transparent 58%),
    linear-gradient(180deg, #311709 0%, #2A1408 48%, #221105 100%);
}
/* broadcast badge on the dark console — AA-tuned solid chip (white ≥4.5:1) */
.prize .eyebrow--light .mhz {
  background: var(--grad-rust-soft); color: var(--white);
  box-shadow: 0 2px 6px rgba(201,69,12,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
/* faint tuner-tick field — the dial motif carried beneath the gift (~6%) */
.prize::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='44'%3E%3Cg stroke='%23FFB877' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 9v22M34 9v12M56 9v12M78 9v12M100 9v22M122 9v12M144 9v12M166 9v12M188 9v22M210 9v12'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 44px;
}
.prize__bg {
  position: absolute; top: 2%; right: -3%; z-index: 1;
  font-weight: 800; font-size: 150px; line-height: .8; letter-spacing: -.06em;
  color: #FFD7A8; opacity: .05; font-variant-numeric: tabular-nums;
  pointer-events: none; user-select: none;
}
.prize > * { position: relative; z-index: 2; }

.prize__head { margin-bottom: var(--s5); }
.prize__head .eyebrow { margin-bottom: 11px; }
.prize__ttl { color: #FFF7EE; }
.prize__ttl em { color: #FFC58A; }
.prize__lead { margin-top: 9px; font-size: 13.5px; line-height: 1.6; color: #FFDBC1; }
.prize__lead b { color: #FFD089; font-weight: 800; }

/* ---- 1등 — GRAND PRIZE · gold ticket glowing on charcoal ---- */
.prize__grand {
  position: relative; overflow: hidden;
  margin-bottom: 13px;
  padding: 18px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(255,244,205,.95), transparent 55%),
    linear-gradient(155deg, #FFF8E4 0%, #FBE9B6 46%, #F2CF78 100%);
  box-shadow:
    0 22px 48px rgba(0,0,0,.5),
    0 0 46px rgba(243,170,70,.20),
    0 0 0 1.5px rgba(214,160,60,.6),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.prize__grand::before {   /* foil sheen sweep */
  content: ""; position: absolute; top: 0; left: -55%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-18deg); animation: sheen 6s var(--ease) infinite; pointer-events: none;
}
.prize__grand-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.prize__ribbon {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #6E3F00;   /* dark ink on gold — high contrast */
  background: linear-gradient(180deg, #FCE7A6, #EFC75F);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 3px 8px rgba(180,130,30,.3);
}
.prize__ribbon svg { width: 13px; height: 13px; flex: 0 0 auto; }
.prize__grand-qty { font-size: 12.5px; font-weight: 700; color: #7A4A0A; font-variant-numeric: tabular-nums; }
.prize__grand-qty b { color: #6E3F00; font-weight: 800; }
.prize__grand-body { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
.prize__art--lg { flex: 0 0 auto; width: 98px; height: 74px; filter: drop-shadow(0 6px 10px rgba(180,120,20,.3)); }
.prize__grand-info { flex: 1; min-width: 0; }
.prize__grand-info .lbl { font-size: 14px; font-weight: 700; color: #7A4A0A; }   /* ≥4.5:1 on the foil */
.prize__grand-info .val { display: block; margin-top: 3px; font-size: clamp(2.2rem, 11vw, 2.7rem); font-weight: 800; line-height: .98; letter-spacing: -.02em; color: #6E3F00; }
.prize__grand-info .val b { color: #B23C0A; font-weight: 800; }   /* deep rust on gold ≥4.5:1 */
/* ticket foot — dial-tick barcode + serial; ties the gift back to the radio dial */
.prize__grand-foot {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px;
  margin-top: 15px; padding-top: 13px;
  border-top: 1.5px dashed rgba(180,130,40,.5);
}
.prize__barcode {
  flex: 1; height: 24px; border-radius: 1px; opacity: .5;
  background: repeating-linear-gradient(90deg, #8A5A12 0 2px, transparent 2px 4px, #8A5A12 4px 5px, transparent 5px 8px, #8A5A12 8px 9px, transparent 9px 13px);
}
.prize__sn { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: #7A4A0A; font-variant-numeric: tabular-nums; }

/* ---- 2등 — voucher, a cream stub floating on the dark console ---- */
.prize__card {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 14px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #FFFDF8, #FFF3E3);
  box-shadow: 0 16px 32px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,231,200,.95);
  overflow: hidden;
}
.prize__rank {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  font-weight: 800; line-height: 1; color: var(--white);
  background: var(--grad-rust-soft);
  box-shadow: 0 5px 12px rgba(201,69,12,.32), inset 0 1px 0 rgba(255,255,255,.4);
}
.prize__rank b { font-size: 17px; display: block; }
.prize__art { flex: 0 0 auto; width: 52px; height: 40px; }
.prize__info { flex: 1; min-width: 0; }
.prize__info .lbl { font-size: 12px; font-weight: 600; color: var(--ink-65); }
.prize__info .val { font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--ink); letter-spacing: -.01em; }
.prize__info .val b { color: var(--rust-7); }
.prize__qty {
  flex: 0 0 auto; align-self: center;
  font-size: 11px; font-weight: 700; color: var(--ink-65);
  padding: 4px 10px; border-radius: var(--r-pill); background: var(--cream-300);
  font-variant-numeric: tabular-nums;
}
.prize__qty b { color: var(--rust-7); }

/* concert payoff promise — the surfaced payoff (warm card on the console) */
.payoff {
  position: relative;
  margin-top: 13px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  color: #FFF3E6;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(255,150,80,.5), transparent 55%),
    linear-gradient(120deg, var(--ember-9), var(--rust-7) 70%, var(--amber-6));
  box-shadow: 0 14px 30px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,170,100,.28);
  display: flex; align-items: center; gap: 12px;
}
.payoff__icon { flex: 0 0 auto; width: 36px; height: 36px; color: #FFE3C2; }
.payoff__txt { flex: 1; }
.payoff__txt .k { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; color: #FFCFA6; }
.payoff__txt .t { font-size: 14.5px; font-weight: 700; line-height: 1.45; margin-top: 2px; }
.payoff__txt .t b { color: #FFD89A; }
.payoff__wave { position: absolute; right: 0; bottom: 0; width: 130px; height: 50px; opacity: .35; color: #FFC58A; pointer-events: none; }

/* ---------------------------------------------------------------
   STEPS — 이렇게 참여하세요
   --------------------------------------------------------------- */
.steps {
  position: relative; overflow: hidden;
  padding-top: calc(var(--s7) + 8px);
  background:
    radial-gradient(90% 50% at 100% 6%, rgba(255,205,160,.5), transparent 55%),
    linear-gradient(180deg, var(--sand-300), #FBE7CF 58%, var(--cream-200));
}
/* prize console → steps studio : dark interlocking wave keeps the world unbroken */
.steps__seam-top {
  position: absolute; top: -1px; left: 0; right: 0; width: 100%; height: 40px; z-index: 3;
  color: #221105;
}
.steps__seam-top svg { width: 100%; height: 100%; display: block; }
/* faint tuner-dial tick field — echoes the hero's 98.5 motif (~5% opacity) */
.steps::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='44'%3E%3Cg stroke='%23C9450C' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 9v22M34 9v12M56 9v12M78 9v12M100 9v22M122 9v12M144 9v12M166 9v12M188 9v22M210 9v12'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 44px;
}
.steps > * { position: relative; z-index: 1; }
.steps__list { position: relative; z-index: 1; margin-top: var(--s6); }
/* signal cable connecting steps */
.steps__cable {
  position: absolute; left: 39px; top: 28px; bottom: 28px; width: 2px; z-index: 0;
  background: repeating-linear-gradient(180deg, var(--orange-2) 0 6px, transparent 6px 13px);
  opacity: .5;
}
.step {
  position: relative; z-index: 1;
  display: flex; gap: 16px; align-items: flex-start;
  padding: 14px 16px;
  background: rgba(255,255,255,.7);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm), inset 0 0 0 1px rgba(255,255,255,.6);
  backdrop-filter: blur(2px);
}
.step + .step { margin-top: var(--s3); }
/* step badge = a mini radio faceplate — carries the dark dial-accent into the steps */
.step__badge {
  position: relative; flex: 0 0 auto; width: 50px; height: 50px;
  border-radius: 15px; display: grid; place-items: center; color: var(--white);
  background:
    radial-gradient(120% 150% at 50% -12%, rgba(255,196,128,.26), transparent 60%),
    linear-gradient(180deg, #3A1B0C, #241206);
  box-shadow:
    0 7px 16px rgba(60,25,8,.4),
    inset 0 0 0 1px rgba(255,170,110,.22),
    inset 0 1px 0 rgba(255,190,130,.26),
    inset 0 -5px 11px rgba(0,0,0,.42);
}
.step__badge svg { width: 27px; height: 27px; }
.step__no {
  position: absolute; top: -7px; right: -7px;
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--rust-7); background: var(--white);
  box-shadow: 0 2px 6px rgba(120,50,10,.22), inset 0 0 0 1.5px var(--sand-400);
}
.step__body { flex: 1; padding-top: 2px; }
.step__ttl { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.step__desc { font-size: 13px; line-height: 1.55; color: var(--ink-65); margin-top: 3px; }
.step__desc b { color: var(--rust-7); font-weight: 700; }

/* ---------------------------------------------------------------
   THEME — 지금 흐르는 노래 (NOW PLAYING)「소녀」
   --------------------------------------------------------------- */
.theme {
  position: relative;
  color: #FFEFE0; overflow: hidden;
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(255,170,95,.4), transparent 55%),
    radial-gradient(80% 60% at 12% 100%, var(--plum-edge), transparent 60%),
    linear-gradient(180deg, var(--amber-6), var(--ember-9) 55%, var(--dusk-2));
}
.theme__seam-top, .theme__seam-bot {
  position: absolute; left: 0; right: 0; width: 100%; height: 40px; z-index: 2;
}
.theme__seam-top { top: -1px; color: var(--cream-100); }
.theme__seam-bot { bottom: -1px; color: var(--cream-100); }
.theme__seam-top svg, .theme__seam-bot svg { width: 100%; height: 100%; }
.theme > .section { position: relative; z-index: 3; }

.np {
  display: flex; align-items: center; gap: 14px;
  padding: 12px; border-radius: var(--r-md);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,200,150,.22);
  backdrop-filter: blur(4px);
  margin-bottom: var(--s6);
}
/* spinning vinyl / album */
.np__disc { position: relative; flex: 0 0 auto; width: 58px; height: 58px; }
.np__disc svg { width: 100%; height: 100%; }
.np__disc .vinyl { animation: spin 6s linear infinite; transform-origin: 50% 50%; }
.np__meta { flex: 1; min-width: 0; }
.np__tag { font-size: 9.5px; font-weight: 800; letter-spacing: .2em; color: #FFC79B; display: inline-flex; align-items:center; gap:6px; }
.np__tag .eq { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 9px; }
.np__tag .eq i { width: 2px; background: #FFB877; border-radius: 1px; animation: eq .9s var(--ease) infinite alternate; }
.np__tag .eq i:nth-child(2){ animation-delay:.2s } .np__tag .eq i:nth-child(3){ animation-delay:.45s }
@keyframes eq { from { height: 2px } to { height: 9px } }
.np__song { font-size: 15px; font-weight: 800; color: #FFF3E6; margin-top: 3px; }
.np__song span { font-weight: 500; color: #FFCFA6; font-size: 12.5px; }
.np__bar { margin-top: 7px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; }
.np__bar i { display: block; height: 100%; width: 38%; border-radius: 3px; background: linear-gradient(90deg, #FFB877, var(--orange)); box-shadow: 0 0 8px rgba(255,150,80,.5); }
.np__time { margin-top: 4px; display: flex; justify-content: space-between; font-size: 9.5px; font-variant-numeric: tabular-nums; color: #FFCFA6; opacity:.8; }

.lyric { text-align: center; }
/* the emotional peak — framed inside a glowing radio/cassette screen */
.lyric__screen {
  position: relative; overflow: hidden;
  margin: 0 auto; max-width: 470px;
  padding: 28px 24px 30px; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,184,110,.24), transparent 62%),
    linear-gradient(180deg, rgba(60,28,12,.55), rgba(40,19,8,.62));
  box-shadow:
    inset 0 0 0 1px rgba(255,190,130,.30),
    inset 0 0 44px rgba(255,150,80,.14),
    0 20px 44px rgba(0,0,0,.36);
}
.lyric__scanlines {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: repeating-linear-gradient(180deg, rgba(255,210,160,.06) 0 1px, transparent 1px 4px);
}
.lyric__playhead {
  position: absolute; top: 16px; bottom: 16px; left: 8%; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(255,184,120,.95), transparent);
  box-shadow: 0 0 12px rgba(255,160,90,.7); pointer-events: none;
  animation: lyricPlay 7.5s var(--ease) infinite;
}
@keyframes lyricPlay { 0% { left: 8%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 92%; opacity: 0; } }
.lyric__line {
  position: relative; z-index: 1;
  font-family: "MaruBuri", serif;
  font-size: clamp(1.6rem, 7.6vw, 2.15rem);
  line-height: 1.55; color: #FFF6EC; letter-spacing: .005em;   /* bigger serif, tighter leading */
}
.lyric__line b { color: #FFCE92; font-weight: 700; }
.lyric__wave { display: block; width: 72%; max-width: 250px; height: 20px; margin: 18px auto 0; color: #FFB877; opacity: .7; position: relative; z-index: 1; }
.lyric__by { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: #FFC79B; margin-top: var(--s4); }
.lyric__by .dot { opacity: .5; margin: 0 6px; }

.theme__copy {
  margin-top: var(--s6); text-align: center;
  font-size: 14px; line-height: 1.75; color: #FFE2C8;
}
.theme__copy b { color: #FFD089; font-weight: 700; }

/* ---------------------------------------------------------------
   ACCORDION — 참여 전 확인
   --------------------------------------------------------------- */
.notice {
  position: relative;
  background:
    radial-gradient(90% 50% at 0% 0%, rgba(255,220,190,.5), transparent 55%),
    linear-gradient(180deg, var(--cream-100), var(--paper));
  padding-bottom: calc(var(--cta-h) + 28px);
}
.acc { margin-top: var(--s5); border-radius: var(--r-md); overflow: hidden; background: var(--white); box-shadow: var(--sh-sm); }
.acc__item + .acc__item { border-top: 1px solid var(--ink-08); }
.acc__btn {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 16px; text-align: left; font-size: 15px; font-weight: 700; color: var(--ink);
}
.acc__btn .ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--rust-7); background: var(--cream-200);
}
.acc__btn .ico svg { width: 18px; height: 18px; }
.acc__btn .q { flex: 1; }
.acc__btn .chev { flex: 0 0 auto; width: 20px; height: 20px; color: var(--ink-45); transition: transform .35s var(--ease); }
.acc__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.acc__panel { overflow: hidden; height: 0; transition: height .38s var(--ease); }
.acc__inner { padding: 0 16px 16px 58px; }
.acc__inner ul { display: flex; flex-direction: column; gap: 8px; }
.acc__inner li {
  position: relative; padding-left: 16px;
  font-size: 13px; line-height: 1.6; color: var(--ink-80);
}
.acc__inner li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 2px 2px 2px 0;
  background: var(--orange-2); transform: rotate(45deg);
}
.acc__inner li b { color: var(--rust-7); font-weight: 700; }

/* ---------------------------------------------------------------
   STICKY CTA BAR
   --------------------------------------------------------------- */
.cta {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--col); z-index: 45;
  padding: 10px var(--s4) calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(251,247,238,0), rgba(251,247,238,.95) 30%);
  backdrop-filter: blur(8px);
}
.cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-14), transparent);
}
.cta__btn {
  position: relative; width: 100%; height: 56px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 16.5px; font-weight: 800; color: var(--white); letter-spacing: .01em;
  background: var(--grad-rust);   /* white ≥4.5:1 across the whole fill */
  box-shadow: 0 8px 24px rgba(138,46,10,.42), inset 0 1px 0 rgba(255,255,255,.32);
  overflow: hidden;
  transition: transform .12s var(--ease), box-shadow .25s;
}
.cta__btn:active { transform: scale(.985); }
.cta__btn .ico { width: 20px; height: 20px; }
.cta__btn .sheen {
  position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  animation: sheen 3.6s var(--ease) infinite;
}
@keyframes sheen { 0% { left: -60% } 55%,100% { left: 130% } }

/* ===============================================================
   APPLY PAGE — the recording booth
   =============================================================== */
.booth {
  position: relative;
  padding-bottom: calc(var(--cta-h) + 20px);
  background:
    radial-gradient(120% 26% at 50% 14%, rgba(255,224,196,.5), transparent 55%),
    linear-gradient(180deg, var(--paper) 0%, var(--cream-100) 26%, var(--paper) 70%);
}

/* persistent tuning strip under header */
.tuner {
  position: sticky; top: var(--header-h); z-index: 40;
  padding: 9px var(--s4) 10px;
  color: #FFE7CE;
  background:
    radial-gradient(100% 120% at 50% -20%, rgba(255,170,90,.32), transparent 60%),
    linear-gradient(180deg, var(--ember-10), var(--dusk-2));
  box-shadow: 0 6px 16px rgba(40,18,6,.3);
}
.tuner__row { display: flex; align-items: center; gap: 10px; }
.tuner .onair { padding: 4px 9px 3px; font-size: 10px; }
.tuner .onair .bulb { width: 8px; height: 8px; }
.tuner__strip { position: relative; flex: 1; height: 24px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,224,188,.95), rgba(255,205,158,.9));
  box-shadow: inset 0 1px 4px rgba(120,55,15,.3);
}
.tuner__strip svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tuner__needle { position: absolute; top: 2px; bottom: 2px; width: 2px; transform: translateX(-50%);
  background: var(--rust-8); box-shadow: 0 0 6px rgba(201,69,12,.7); transition: left .5s var(--ease); }
.tuner__freq { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px;
  color: #FFE3C2; text-shadow: 0 0 8px rgba(255,170,90,.5); min-width: 58px; text-align: right; }
.tuner__freq i { font-style: normal; font-size: 9px; opacity:.7; margin-left: 2px; }

.booth__intro {
  position: relative; padding: var(--s6) var(--s5) var(--s5);
  text-align: center; color: #FFEFE0; overflow: hidden;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(255,170,95,.4), transparent 58%),
    linear-gradient(180deg, var(--dusk-2), var(--ember-9));
}
.booth__intro .eyebrow { color:#FFCDA3; }
.booth__intro h1 {
  font-family: "SacheonHangGong", serif; font-weight: 400;
  font-size: clamp(1.9rem, 9vw, 2.5rem); line-height: 1.12; color: #FFF7EE;
  text-shadow: 0 2px 16px rgba(0,0,0,.3);
}
.booth__intro h1 em { font-style: normal; color: #FFC58A; }
.booth__intro p { margin-top: var(--s3); font-size: 13.5px; color: #FFD8BC; line-height:1.6; }
.booth__seam { position: absolute; left:0; right:0; bottom:-1px; height: 34px; width:100%; color: var(--paper); }
.booth__seam svg { width:100%; height:100%; }

/* ghosted MaruBuri lyric behind the dark intro — emotional thread continues */
.booth__ghost {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
  font-family: "MaruBuri", serif; font-size: clamp(26px, 10vw, 42px);
  color: #FFD7A8; opacity: .06; white-space: nowrap; pointer-events: none; z-index: 0;
  letter-spacing: .02em;
}
.booth__intro .eyebrow, .booth__intro h1, .booth__intro p,
.booth__face, .booth__now { position: relative; z-index: 1; }

/* compact faceplate carried into the booth — the signature artwork reads here too */
.booth__face {
  display: flex; align-items: center; gap: 11px;
  margin: 18px auto 12px; max-width: 360px;
  padding: 12px 14px; border-radius: 16px;
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(255,195,125,.18), transparent 60%),
    linear-gradient(180deg, #4A2511, #2C1407);
  box-shadow: inset 0 1px 0 rgba(255,190,130,.22), inset 0 -6px 16px rgba(0,0,0,.32), 0 12px 28px rgba(0,0,0,.36);
}
.booth__face .onair { padding: 5px 9px 4px; font-size: 10px; flex: 0 0 auto; }
.booth__face .onair .bulb { width: 8px; height: 8px; }
.booth__face-dial {
  position: relative; flex: 1; height: 34px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,228,196,.96), rgba(255,206,160,.9));
  box-shadow: inset 0 2px 5px rgba(120,55,15,.28), inset 0 -1px 0 rgba(255,255,255,.5);
}
.booth__face-scale { position: absolute; inset: 0; width: 100%; height: 100%; }
.booth__face-needle {
  position: absolute; top: 3px; bottom: 3px; left: 52.5%; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--rust-8), var(--amber-6));
  box-shadow: 0 0 6px rgba(201,69,12,.7); border-radius: 2px;
}
.booth__face-glass {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,.5) 0%, transparent 20%, transparent 80%, rgba(255,255,255,.3) 100%);
}
.booth__face .reel { width: 24px; height: 24px; flex: 0 0 auto; color: #FFCB97; }
.booth__face .wave { flex: 0 0 46px; height: 24px; }

/* now-playing whisper — names the 별밤/이문세 heritage on the apply page */
.booth__now {
  margin-top: 4px; font-family: "MaruBuri", serif;
  font-size: 13px; color: #FFD8BC; line-height: 1.55; letter-spacing: .01em;
}
.booth__now b { color: #FFC58A; font-weight: 700; }

/* sticky tuner lamp stays static-lit (single calm pulse lives on the booth faceplate) */
.tuner .onair.is-live .bulb { animation: none; }

/* form sections — floated warm cards add depth over the cream body */
.fsec {
  position: relative;
  margin: 14px var(--s4) 0;
  padding: var(--s5);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #FFFDF8, #FFF6EA);
  box-shadow: 0 6px 18px rgba(120,55,15,.09), inset 0 0 0 1px rgba(255,235,208,.9);
}
.fsec:last-of-type { margin-bottom: 6px; }
.fsec__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: var(--s4); padding-bottom: 11px;
  box-shadow: inset 0 -1px 0 var(--ink-08);   /* hairline under each section head */
}
.fsec__ttl { display: flex; align-items: baseline; gap: 9px; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.req-badge { font-size: 10px; font-weight: 800; color: var(--white); background: var(--rust-7);
  padding: 3px 8px; border-radius: var(--r-pill); letter-spacing: .02em; }
.opt-badge { font-size: 11px; font-weight: 700; color: var(--ink-65); }   /* ≥4.5:1 on cream */
.fsec__mhz { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--rust-7);
  font-variant-numeric: tabular-nums; display:inline-flex; align-items:center; gap:5px; }
.fsec__mhz::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--orange); box-shadow:0 0 6px rgba(243,115,33,.6);}

/* field */
.field { margin-bottom: var(--s4); }
.field:last-child { margin-bottom: 0; }
.field__label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink-80); margin-bottom: 7px; }
.field__label .star { color: var(--rust-7); }
.input {
  width: 100%; height: 52px; padding: 0 16px; border-radius: var(--r-sm);
  background: var(--white); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink-28), inset 0 2px 4px rgba(120,55,15,.05);   /* defined boundary */
  transition: box-shadow .2s, background .2s;
}
.input::placeholder { color: var(--ink-45); }
.input:focus { outline: none; background: var(--white);
  box-shadow: inset 0 0 0 2px var(--orange), var(--glow-orange); }
.input.is-error { box-shadow: inset 0 0 0 2px var(--rust-7), 0 0 0 4px rgba(201,69,12,.12); }
.field__err { display: none; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--rust-8); }
.field__err svg { width: 14px; height: 14px; flex:0 0 auto; }
.field.is-error .field__err { display: flex; }

/* 사연유형 preset pills (radio) */
.pills { display: flex; flex-wrap: wrap; gap: 9px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill label {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  padding: 9px 16px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 700; color: var(--ink-80);
  background: var(--cream-50);
  box-shadow: inset 0 0 0 1.5px var(--ink-28);
  transition: all .18s var(--ease);
}
.pill label .preset {
  width: 9px; height: 9px; border-radius: 50%; flex:0 0 auto;
  background: var(--ink-14); transition: all .2s;
}
.pill label:hover { box-shadow: inset 0 0 0 1.5px var(--orange-2); }
.pill input:checked + label {
  color: var(--white);
  background: var(--grad-rust);   /* white text ≥4.5:1 across full pill */
  box-shadow: 0 6px 14px rgba(138,46,10,.34), inset 0 1px 0 rgba(255,255,255,.28);
}
.pill input:checked + label .preset {
  background: #FFF; box-shadow: 0 0 8px rgba(255,255,255,.9);
}
.pill input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 2px; }

/* 사연 textarea + REC cue */
.story__wrap { position: relative; }
.rec-cue {
  position: absolute; top: -34px; right: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  padding: 4px 10px; border-radius: var(--r-pill);
  color: var(--ink-45); background: var(--cream-200);
  box-shadow: inset 0 0 0 1px var(--ink-08);
  transition: all .3s var(--ease);
}
.rec-cue .rdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-28); transition: all .3s; }
.story__wrap.is-rec .rec-cue {
  color: var(--white); background: linear-gradient(180deg, #E03A1C, var(--rust-8));
  box-shadow: 0 4px 12px rgba(201,69,12,.34);
}
.story__wrap.is-rec .rdot { background: #FFF; animation: bulbPulse 1.2s var(--ease) infinite; box-shadow: 0 0 8px rgba(255,255,255,.9); }

.textarea {
  width: 100%; min-height: 168px; padding: 15px 16px; border-radius: var(--r-sm);
  background: var(--white); color: var(--ink); line-height: 1.7; resize: vertical;
  box-shadow: inset 0 0 0 1.5px var(--ink-28);
  transition: box-shadow .2s, background .2s;
}
.textarea::placeholder { color: var(--ink-45); }
.textarea:focus { outline: none; background: var(--white);
  box-shadow: inset 0 0 0 2px var(--orange), var(--glow-orange); }
.story__wrap.is-error .textarea { box-shadow: inset 0 0 0 2px var(--rust-7); }
.counter { margin-top: 7px; text-align: right; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink-65); }
.counter b { color: var(--rust-7); }
.counter.is-max b { color: var(--amber-6); }

/* 사진 첨부 */
.photo__hint {
  display: flex; align-items: center; gap: 8px; margin-bottom: var(--s3);
  padding: 10px 13px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 700; color: var(--rust-8);
  background: linear-gradient(180deg, #FFF4E2, #FFEAD3);
  box-shadow: inset 0 0 0 1px rgba(243,115,33,.2);
}
.photo__hint svg { width: 18px; height: 18px; flex:0 0 auto; color: var(--orange); }
.photo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photo__cell {
  position: relative; aspect-ratio: 1/1; border-radius: var(--r-sm); overflow: hidden;
  background: var(--cream-200); box-shadow: inset 0 0 0 1px var(--ink-08);
}
.photo__cell img { width: 100%; height: 100%; object-fit: cover; }
.photo__del {
  position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(42,20,8,.7);
  backdrop-filter: blur(2px);
}
.photo__del svg { width: 15px; height: 15px; }
.photo__add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  aspect-ratio: 1/1; border-radius: var(--r-sm);
  color: var(--rust-7); background: var(--cream-50);
  box-shadow: inset 0 0 0 2px var(--ink-28);
  background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(201,69,12,.05) 7px 9px);
  font-size: 11px; font-weight: 700; transition: all .18s;
}
.photo__add:hover { box-shadow: inset 0 0 0 2px var(--orange); color: var(--rust-8); }
.photo__add svg { width: 24px; height: 24px; }
.photo__add[hidden] { display: none; }

/* 개인정보 동의 */
.consent {
  border-radius: var(--r-md); overflow: hidden; background: var(--white); box-shadow: var(--sh-sm);
}
.consent__main { display: flex; align-items: flex-start; gap: 11px; padding: 16px; }
.chk { position: relative; flex: 0 0 auto; }
.chk input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; }
.chk .box {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--cream-100); box-shadow: inset 0 0 0 2px var(--ink-28);
  transition: all .2s var(--ease);
}
.chk .box svg { width: 16px; height: 16px; color: #fff; opacity: 0; transform: scale(.5); transition: all .2s var(--ease); }
.chk input:checked + .box {
  background: var(--grad-rust);
  box-shadow: 0 3px 8px rgba(138,46,10,.34);
}
.chk input:checked + .box svg { opacity: 1; transform: scale(1); }
.chk input:focus-visible + .box { outline: 3px solid var(--orange); outline-offset: 2px; }
.consent__txt { flex: 1; }
.consent__txt .lead { display: block; font-size: 14px; font-weight: 800; color: var(--ink); cursor: pointer; }
.consent__txt .lead .req-badge { margin-right: 6px; padding: 2px 7px; }
.consent__txt .sum { font-size: 12.5px; line-height: 1.55; color: var(--ink-65); margin-top: 5px; }
.consent__more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  min-height: 44px; padding: 6px 2px;   /* ≥44px tap target */
  font-size: 12.5px; font-weight: 700; color: var(--rust-7);
}
.consent__more svg { width: 14px; height: 14px; transition: transform .3s; }
.consent__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.consent__detail { overflow: hidden; height: 0; transition: height .35s var(--ease); background: var(--cream-100); }
.consent__detail-in { padding: 14px 16px; }
.consent__table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.consent__table th, .consent__table td {
  text-align: left; padding: 7px 8px; border: 1px solid var(--ink-08);
  vertical-align: top; line-height: 1.5; color: var(--ink-80);
}
.consent__table th { background: var(--cream-200); font-weight: 700; white-space: nowrap; color: var(--ink); width: 78px; }
.consent__note { margin-top: 9px; font-size: 11px; line-height: 1.55; color: var(--ink-65); }
.consent__note b { color: var(--rust-7); }

/* submit OFF AIR → ON AIR */
.cta__btn--air {
  background: linear-gradient(180deg, var(--dis-bg), var(--dis-line));
  color: var(--dis-fg); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  transition: all .4s var(--ease);
}
.cta__btn--air .ico-air { width: 9px; height: 9px; border-radius: 50%; background: var(--dis-fg); transition: all .4s; }
.cta__btn--air[aria-disabled="true"] { cursor: not-allowed; }
.cta__btn--air[aria-disabled="true"] .sheen { display: none; }
.cta__btn--air.is-on {
  color: #fff; cursor: pointer;
  background: var(--grad-rust);   /* ON AIR heat carried by the pulsing lamp, text stays ≥4.5:1 */
  box-shadow: 0 8px 24px rgba(138,46,10,.44), inset 0 1px 0 rgba(255,255,255,.32);
  animation: airOn .5s var(--ease);
}
.cta__btn--air.is-on .ico-air { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.95); animation: bulbPulse 2s var(--ease) infinite; }
@keyframes airOn { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
.cta__gate { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--ink-65); margin-bottom: 8px; transition: opacity .3s; }
.cta__gate.is-hidden { opacity: 0; height: 0; margin: 0; }

/* ---------------------------------------------------------------
   SUCCESS — 사연이 전파를 탔습니다
   --------------------------------------------------------------- */
.success {
  position: fixed; inset: 0; z-index: 100;
  display: none; place-items: center;
  padding: 28px 22px calc(28px + env(safe-area-inset-bottom));
  color: #FFF1E4; overflow-y: auto;
  background:
    radial-gradient(120% 70% at 50% 8%, rgba(255,180,95,.5), transparent 55%),
    radial-gradient(70% 50% at 14% 4%, var(--plum-edge), transparent 60%),
    radial-gradient(70% 50% at 86% 2%, var(--plum-edge), transparent 60%),
    linear-gradient(180deg, var(--dusk-1), var(--ember-10) 55%, var(--ember-9));
}
.success.is-open { display: grid; }
.success__stars { position: absolute; inset: 0; opacity: .6; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 16%, #FFE9CF 50%, transparent),
    radial-gradient(1.2px 1.2px at 72% 12%, #FFD9AE 50%, transparent),
    radial-gradient(1px 1px at 44% 8%, #FFF 50%, transparent),
    radial-gradient(1.3px 1.3px at 86% 22%, #FFE0BD 50%, transparent),
    radial-gradient(1px 1px at 30% 26%, #FFF1DD 50%, transparent),
    radial-gradient(1.2px 1.2px at 60% 30%, #FFE9CF 50%, transparent);
}
.success__card { position: relative; z-index: 2; width: 100%; max-width: 360px; text-align: center; }
.success__art { width: 168px; height: 168px; margin: 0 auto var(--s4); }
.success__onair {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s4);
  padding: 7px 16px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 800; letter-spacing: .2em; color: #FFF1E8;
  background: linear-gradient(180deg, rgba(255,90,54,.4), rgba(180,50,20,.5));
  box-shadow: inset 0 0 0 1px rgba(255,140,100,.6), 0 0 20px rgba(255,90,54,.4);
}
.success__onair .bulb { width: 9px; height: 9px; border-radius: 50%; background: var(--onair-red);
  box-shadow: 0 0 10px var(--onair-glow); animation: bulbPulse 2s var(--ease) infinite; }
.success__ttl {
  font-family: "SacheonHangGong", serif; font-weight: 400;
  font-size: clamp(2rem, 9vw, 2.5rem); line-height: 1.15; color: #FFF7EE;
  text-shadow: 0 2px 16px rgba(0,0,0,.3);
}
.success__ttl em { font-style: normal; color: #FFC58A; }
.success__msg { margin-top: var(--s4); font-size: 14px; line-height: 1.7; color: #FFE2C8; }
.success__msg b { color: #FFD089; font-weight: 700; }
.success__receipt {
  margin-top: var(--s5); padding: 16px; border-radius: var(--r-md);
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,200,150,.22);
  backdrop-filter: blur(4px); text-align: left;
}
.success__receipt .row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; }
.success__receipt .row + .row { border-top: 1px dashed rgba(255,200,150,.22); }
.success__receipt .k { color: #FFC79B; font-weight: 600; }
.success__receipt .v { color: #FFF3E6; font-weight: 800; font-variant-numeric: tabular-nums; }
.success__btns { margin-top: var(--s5); display: flex; flex-direction: column; gap: 10px; }
.btn-primary {
  height: 54px; border-radius: var(--r-pill); font-size: 16px; font-weight: 800; color: #fff;
  background: var(--grad-rust);
  box-shadow: 0 8px 22px rgba(138,46,10,.44), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-ghost { height: 50px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 700; color: #FFD8BC;
  box-shadow: inset 0 0 0 1.5px rgba(255,200,150,.3); }

/* ===============================================================
   SCROLL-REVEAL — content is VISIBLE BY DEFAULT.
   Hidden ONLY when JS is active (html.js) AND motion is allowed, then
   revealed on scroll. No JS ⇒ no .js class ⇒ every section shows.
   =============================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(22px); }
  html.js [data-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  }
}

/* ===============================================================
   REDUCED 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; }
  .hero__bokeh { display: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ===============================================================
   SMALL SCREENS (≤360px) fine tuning
   =============================================================== */
@media (max-width: 360px) {
  .section { padding-left: var(--s4); padding-right: var(--s4); }
  .hero { padding-left: var(--s4); padding-right: var(--s4); }
  .prize__card { gap: 11px; padding: 14px 13px; }
  .step { gap: 13px; padding: 13px; }
}