/* ===== CSS Variables & Reset ===== */
:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #111118;
  --bg-card: #16161f;
  --bg-card-hover: #1c1c28;
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);

  --text-primary: #f0f0f5;
  --text-secondary: #8888aa;
  --text-muted: #555570;

  --accent-purple: #7c5cfc;
  --accent-pink: #fc5c8b;
  --accent-cyan: #5cfcda;
  --accent-gold: #fcc935;
  --accent-green: #5cfc8f;
  --accent-orange: #fc8a5c;

  --gradient-primary: linear-gradient(135deg, #7c5cfc, #fc5c8b);
  --gradient-gold: linear-gradient(135deg, #fcc935, #fc8a5c);
  --gradient-green: linear-gradient(135deg, #5cfc8f, #5cfcda);
  --gradient-blue: linear-gradient(135deg, #5cb8fc, #7c5cfc);

  --sidebar-width: 240px;
  --header-height: 72px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(124, 92, 252, 0.2);

  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===== Particles ===== */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: float linear infinite;
  opacity: 0;
}

@keyframes float {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 0.4; }
  90% { opacity: 0.2; }
  100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

/* ===== Confetti Canvas ===== */
#confettiCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* ===== SVG Gradient ===== */
.hidden-svg { position: absolute; width: 0; height: 0; }