/* ── fonts (self-hosted) ────────────────────────────── */
@font-face{
  font-family:"Pretendard";src:url("../assets/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight:45 920;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Fraunces";src:url("../assets/fonts/Fraunces.woff2") format("woff2-variations");
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";src:url("../assets/fonts/JetBrainsMono.woff2") format("woff2-variations");
  font-weight:300 600;font-style:normal;font-display:swap;
}

/* ── tokens ─────────────────────────────────────────── */
:root{
  --void:#06080B; --deep:#0B0F15; --panel:#101620; --panel-2:#141B26;
  --line:rgba(255,255,255,.065); --line-2:rgba(255,255,255,.13);
  --w:#F0F4F3; --w2:#94A2A6; --w3:#5A666D;
  --lum:#4FE0B0;            /* 유일한 강조 */
  --gi:#F2B93B; --si:#5AA9E6;

  --sans:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  --disp:"Fraunces","Pretendard",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --e:cubic-bezier(.16,.84,.28,1);
  --e-out:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--void)}
body{
  color:var(--w);font-family:var(--sans);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","cv01";
  letter-spacing:-.011em;
  /* 한국어 조판: 단어(어절) 중간에서 줄바꿈 금지 */
  word-break:keep-all;
  overflow-wrap:break-word;
}
::selection{background:var(--lum);color:var(--void)}
:focus-visible{outline:1px solid var(--lum);outline-offset:4px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ── atmosphere ─────────────────────────────────────── */
#bg{position:fixed;inset:0;z-index:0}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
  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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
.vig{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(135% 100% at 50% 42%,transparent 36%,rgba(2,4,7,.9) 100%);
}

/* ── typography scale ───────────────────────────────── */
.eyebrow{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;
  color:var(--lum);display:flex;align-items:center;gap:14px;margin-bottom:clamp(20px,2.4vw,30px);
}
.eyebrow::after{content:"";height:1px;width:clamp(36px,9vw,104px);background:linear-gradient(90deg,var(--lum),transparent)}

h1{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(34px,6.2vw,80px);line-height:1.08;letter-spacing:-.045em;
  margin-bottom:clamp(20px,2.6vw,30px);text-wrap:balance;max-width:18ch;
}
h1 em{font-family:var(--disp);font-style:italic;font-weight:400;color:var(--lum);letter-spacing:-.02em}
h1 .thin{font-weight:200;color:var(--w2)}

.lead{font-size:clamp(14.5px,1.35vw,17px);color:var(--w2);max-width:50ch;line-height:1.78;font-weight:350}
.lead+.lead{margin-top:14px}
.lead b{color:var(--w);font-weight:600}