/* MYVRS 남산 — shared design tokens
   Aligned with myvrs.io brand system (extracted from production CSS).
   Used by /, /book/, and (chrome only) /sunset/, /ar/. */

/* Boren — MYVRS brand display font (Alfin Weniardi · 2023 · 227 glyphs).
   Source: MYVRS Design System / fonts / BOREN.otf, converted to woff2. */
@font-face {
  font-family: "MYVRS Boren";
  src: url("./fonts/boren.woff2") format("woff2"),
       url("./fonts/boren.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MYVRS Boren Fallback";
  src: local("Arial");
  ascent-override: 56.88%;
  descent-override: 18.96%;
  line-gap-override: 7.58%;
  size-adjust: 131.86%;
}

:root {
  /* Surface */
  --bg:           #050505;
  --bg-elev-1:    #0d0d0d;
  --bg-elev-2:    #111111;
  --border:       #1a1a1a;
  --border-mute:  #141414;

  /* Ink */
  --ink:          #ffffff;
  --ink-mute:     rgba(255, 255, 255, 0.62);
  --ink-faint:    rgba(255, 255, 255, 0.38);

  /* Accent — myvrs lime */
  --accent:       #bbff00;
  --accent-dim:   #8fcc00;
  --accent-glow:  rgba(187, 255, 0, 0.14);
  --accent-soft:  rgba(187, 255, 0, 0.08);
  --on-accent:    #050505;

  /* Status */
  --info:         #3b8bff;
  --warn:         #ffb14d;
  --danger:       #ff3b3b;

  /* Sunset palette — used only by /sunset/ content (gradient bars, score viz) */
  --sun-1: #0b1024;
  --sun-2: #2a1145;
  --sun-3: #6b1a4d;
  --sun-4: #c83d4a;
  --sun-5: #f08a3e;
  --sun-6: #f7c873;
  --grade-vivid: linear-gradient(135deg, #ffd86b, #ff8a3d 60%, #ff4f81);

  /* Spatial */
  --container:        1240px;
  --container-narrow: 880px;
  --header-height:    72px;
  --section-pad:      clamp(80px, 11vw, 144px);
  --gutter:           clamp(20px, 3vw, 32px);
  --radius:           8px;
  --radius-lg:        14px;
  --radius-pill:      9999px;

  /* Motion */
  --dur-fast: 150ms;
  --dur:      300ms;
  --dur-h:    725ms;
  --dur-long: 925ms;
  --ease-h:      cubic-bezier(0.65, 0.01, 0.05, 0.99);
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Font stacks */
  --font-display:
    "MYVRS Boren", "MYVRS Boren Fallback",
    "Space Grotesk", system-ui, sans-serif;
  --font-body:
    "Space Grotesk", "Pretendard Variable", Pretendard,
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
*::selection { background: var(--accent); color: var(--on-accent); }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family:
    "Space Grotesk", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.012em;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
body.korean-display {
  /* Pages with Korean-heavy display headlines override the order */
  font-family:
    "Pretendard Variable", "Space Grotesk", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}

a { color: inherit; }

/* ===== Containers ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container.narrow { max-width: var(--container-narrow); }

/* ===== Site header (used across pages) ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  background: rgba(5, 5, 5, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-mute);
}
.site-header .inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header nav {
  display: flex;
  gap: 22px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.site-header nav a {
  color: var(--ink-mute);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
  text-transform: uppercase;
}
.site-header nav a:hover,
.site-header nav a[aria-current="page"] { color: var(--ink); }
.site-header nav a.accent { color: var(--accent); }

/* ===== Brand mark ===== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-family: var(--font-display);
  line-height: 1;
}
.brand .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow), 0 0 0 1px rgba(187, 255, 0, 0.35);
}
.brand .name {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.brand .name b {
  font-family: var(--font-display);
  font-weight: 400;       /* Boren is heavy by default */
  letter-spacing: 0.01em;
  font-size: 1.05em;
}
.brand .name span {
  color: var(--ink-mute);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85em;
  letter-spacing: -0.02em;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn.primary {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.btn.primary:hover { background: var(--accent-dim); }
.btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--ink);
}
.btn.ghost:hover { border-color: var(--ink-mute); }
.btn .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* ===== Card ===== */
.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.card.elev { background: var(--bg-elev-2); }

/* ===== Section ===== */
section {
  padding: var(--section-pad) 0;
}
section.tight { padding: clamp(56px, 8vw, 96px) 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--accent);
}

/* ===== Display type ===== */
.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.96;
  font-size: clamp(40px, 7.4vw, 96px);
}
.display b {
  color: var(--accent);
  font-weight: 400;
}
.display.korean {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.headline {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.12;
  font-size: clamp(28px, 4.4vw, 44px);
}
.lead {
  margin: 22px 0 0;
  color: var(--ink-mute);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  max-width: 620px;
}
.body-md {
  margin: 0;
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1.65;
}
.body-sm {
  color: var(--ink-mute);
  font-size: 13.5px;
  line-height: 1.55;
}
.label-num {
  font-feature-settings: "tnum", "ss01";
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ===== Footer ===== */
.site-footer {
  padding: 56px 0 64px;
  border-top: 1px solid var(--border-mute);
  color: var(--ink-faint);
  font-size: 12.5px;
}
.site-footer .row {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.site-footer a {
  color: var(--ink-mute);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer a:hover { color: var(--ink); }

/* ===== Back link ===== */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-mute);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}
.back-link:hover { color: var(--ink); }

/* ===== Utility ===== */
.flow > * + * { margin-top: 14px; }
.divider {
  height: 1px; background: var(--border-mute);
  margin: 36px 0;
}
.muted { color: var(--ink-mute); }
.faint { color: var(--ink-faint); }
.accent { color: var(--accent); }