/* ============================================================
   UniqueMC design tokens: Sentinel HUD
   Graphite surfaces, one gold accent, mono labels, hairline structure.
   Shape system: pill = interactive, 14px = containers, 8px = inputs.
   ============================================================ */
/* Paperlogy (페이퍼로지) — 실제로 쓰는 굵기만 브라우저가 내려받는다 */
@font-face { font-family: 'Paperlogy'; font-weight: 100; font-style: normal; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 200; font-style: normal; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 300; font-style: normal; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 400; font-style: normal; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 500; font-style: normal; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 600; font-style: normal; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 700; font-style: normal; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 800; font-style: normal; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 900; font-style: normal; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2'); }

:root {
  /* Paperlogy 에 없는 글자는 Pretendard 가 채운다 */
  --font-sans: 'Paperlogy', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #0b0d0f;
  --bg-1: #0f1114;
  --surface: #14171b;
  --surface-2: #1a1e23;
  --surface-3: #22272d;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  --text: #e9e7e1;
  --text-2: #a1a09a;
  --text-3: #676762;

  --gold: #c9a43c;
  --gold-2: #e0bd55;
  --gold-3: #9e8030;
  --gold-ink: #15110a;
  --gold-soft: rgba(201, 164, 60, 0.12);
  --gold-soft-2: rgba(201, 164, 60, 0.24);
  --gold-glow: rgba(201, 164, 60, 0.3);

  --danger: #d9705f;
  --ok: #7fbf72;
  --shadow-rgb: 4, 5, 7;

  --r-lg: 14px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 260ms;

  --z-nav: 30;
  --z-mega: 40;
  --z-drawer: 45;
  --z-scroll: 60;
  --z-pop: 90;
  --z-modal: 100;
  --z-toast: 200;
  --z-grain: 250;

  /* legacy aliases still used by a few inline styles */
  --gold-100: var(--gold-2); --gold-200: var(--gold); --gold-300: var(--gold); --gold-400: var(--gold-3); --gold-500: var(--gold-3);
  --bg-900: var(--bg); --bg-800: var(--bg-1); --bg-700: var(--surface); --bg-600: var(--surface-2); --bg-500: var(--surface-3);
  --line-strong: var(--line-2); --text-dim: var(--text-2); --text-faint: var(--text-3);
  --font-main: var(--font-sans); --font-display: var(--font-sans); --radius: var(--r-md);
}

html[data-theme="light"] {
  --bg: #f2f3f4;
  --bg-1: #e9eaec;
  --surface: #fafafb;
  --surface-2: #f0f1f3;
  --surface-3: #e2e4e7;
  --line: rgba(20, 23, 27, 0.08);
  --line-2: rgba(20, 23, 27, 0.16);
  --hairline: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --text: #16181b;
  --text-2: #5a5d63;
  --text-3: #8d9096;
  --gold: #9c7c1c;
  --gold-2: #7e6314;
  --gold-3: #b8973a;
  --gold-ink: #fffbea;
  --gold-soft: rgba(156, 124, 28, 0.10);
  --gold-soft-2: rgba(156, 124, 28, 0.2);
  --gold-glow: rgba(156, 124, 28, 0.22);
  --shadow-rgb: 30, 33, 38;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.6;
  min-height: 100dvh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -0.02em; word-break: keep-all; }
p { text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; }
a { color: var(--gold); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--gold-2); }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
img, video { max-width: 100%; display: block; }
.hidden { display: none !important; }
::selection { background: var(--gold); color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-3); }

/* ---------- global chrome ---------- */
.skip-link { position: fixed; top: -60px; left: 16px; z-index: var(--z-toast); background: var(--gold); color: var(--gold-ink); font-weight: 700; padding: 10px 16px; border-radius: var(--r-pill); transition: top var(--dur) var(--ease); }
.skip-link:focus { top: 16px; }
.grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: 0.06; 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-theme="light"] .grain { opacity: 0.07; mix-blend-mode: multiply; }
.ph, .ph-light { font-size: 1.15em; line-height: 1; vertical-align: -0.15em; }
.lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.mono { font-family: var(--font-mono); }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; }

/* scroll reveal: sequenced entry gives hierarchy; static under reduced motion */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}