/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  --bg:      #0c0c0e;
  --bg2:     #131316;
  --bg3:     #1a1a1f;
  --bg4:     #222228;
  --line:    rgba(255,255,255,0.07);
  --line2:   rgba(255,255,255,0.12);
  --txt:     #f0f0ee;
  --txt2:    #8a8a94;
  --txt3:    #52525c;
  --accent:  #3d6cff;
  --acc2:    #6b8eff;
  --green:   #00c87a;
  --green2:  #00a862;
  --red:     #ff4040;
  --red2:    #cc2020;
  --amber:   #ffaa00;
  --purple:  #a855f7;
  --radius:  10px;
  --radius2: 14px;
  --mono:    'JetBrains Mono', monospace;
  --sans:    'Noto Sans KR', sans-serif;
  --shadow:  0 8px 32px rgba(0,0,0,0.4);
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--bg); color: var(--txt); min-height: 100vh; overflow-x: hidden; font-size: 14px; line-height: 1.6; }
button, input, select, textarea { font-family: var(--sans); }
a { color: inherit; text-decoration: none; }

/* ═══════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px; }