/* ================================================================
 * base.css - CSS 변수(:root), 리셋, body, 스크롤바, 로딩 바
 * Homepage CSS Module
 * ================================================================ */

:root {
  /* ── Colors ── */
  --bg: #05080f;
  --bg2: #080d1a;
  --card: #0c1426;
  --border: rgba(255,107,0,0.15);
  --accent: #FF6B00;
  --accent2: #FF9A3C;
  --text: #e8edf5;
  --muted: #6b7a99;
  --red: #ff3b5c;
  --nav-h: 70px;

  /* ── Color aliases (white theme) ── */
  --dark: #1a1f2e;
  --subtle: #4a5568;
  --line: #e8eaef;
  --line-light: #eef0f4;
  --bg-white: #ffffff;
  --bg-gray: #f4f6fa;
  --bg-light: #f8f9fb;
  --bg-input: #f0f4f8;
  --teal: #51a8a8;

  /* ── Spacing ── */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sp-3xl: 60px;

  /* ── Border radius ── */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 100px;
  --r-round: 50%;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);
  --shadow-accent: 0 0 30px rgba(255,107,0,0.3);
  --shadow-accent-lg: 0 0 50px rgba(255,107,0,0.5);

  /* ── Transitions ── */
  --ease: .2s ease;
  --ease-md: .3s ease;
  --ease-lg: .35s ease;

  /* ── Gradient shortcuts ── */
  --grad-accent: linear-gradient(135deg, var(--accent), var(--accent2));

  /* ── Surface tokens (light = white theme default) ── */
  --surface: #ffffff;
  --surface-alt: #f4f6fa;
  --surface-card: #ffffff;
  --surface-text: #1a1f2e;
  --surface-muted: #6b7a99;
  --surface-border: rgba(0,0,0,0.09);
  --surface-line: #e8eaef;
  --surface-line-light: #eef0f4;
  --surface-input: #f0f4f8;

  /* ── Nav tokens ── */
  --nav-bg: #fff;
  --nav-text: #333;
  --nav-text-hover: #111;
  --nav-border: rgba(0,0,0,0.08);
  --nav-shadow: 0 4px 20px rgba(0,0,0,0.08);
  --nav-util-border: rgba(0,0,0,0.15);
  --nav-util-hover-bg: rgba(0,0,0,0.04);
}

/* ── DARK MODE ──────────────────────── */
html[data-theme="dark"] {
  --surface: #0f1219;
  --surface-alt: #161b26;
  --surface-card: #1a2030;
  --surface-text: #e2e8f0;
  --surface-muted: #8896ab;
  --surface-border: rgba(255,255,255,0.08);
  --surface-line: rgba(255,255,255,0.1);
  --surface-line-light: rgba(255,255,255,0.06);
  --surface-input: #1e2536;

  --nav-bg: #0f1219;
  --nav-text: #e2e8f0;
  --nav-text-hover: #fff;
  --nav-border: rgba(255,255,255,0.06);
  --nav-shadow: 0 4px 20px rgba(0,0,0,0.4);
  --nav-util-border: rgba(255,255,255,0.15);
  --nav-util-hover-bg: rgba(255,255,255,0.08);

  /* override white-theme aliases */
  --dark: #e2e8f0;
  --subtle: #94a3b8;
  --line: rgba(255,255,255,0.1);
  --line-light: rgba(255,255,255,0.06);
  --bg-white: #0f1219;
  --bg-gray: #161b26;
  --bg-light: #1a2030;
  --bg-input: #1e2536;
  --teal: #51a8a8;

  --shadow-sm: 0 2px 12px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
}

/* Dark mode scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f1219; }
html[data-theme="dark"] { color-scheme: dark; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}

/* ── PAGE LOADING BAR ──────────────────────── */
#page-loading-bar {
  position: fixed;
  top: 0; left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 8px rgba(255,107,0,0.5);
  z-index: 99999;
  transition: none;
  pointer-events: none;
}
#page-loading-bar.loading {
  animation: loadBar .4s ease-out forwards;
}
#page-loading-bar.done {
  width: 100%;
  transition: width .15s ease-out;
  animation: none;
}
#page-loading-bar.hide {
  opacity: 0;
  transition: opacity .2s ease;
}
@keyframes loadBar {
  0%   { width: 0; }
  100% { width: 85%; }
}

/* ── SCROLLBAR ──────────────────────── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:3px; }

/* ── FULLPAGE SNAP SCROLL ──────────────────────── */
html { scroll-behavior:smooth; }
body { overflow-y: scroll; }

/* ── SCROLL PROGRESS BAR ──────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  z-index: 9999;
  transition: width .08s linear;
  box-shadow: 0 0 10px rgba(255,107,0,.6);
}

/* ── Lenis smooth scroll overrides ──────────────────────── */
html.lenis, html.lenis body {
  scroll-behavior: auto !important;
}
html.lenis {
  height: auto;
}

/* ── Reduced motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cursor-outer,
  .cursor-inner,
  .cursor-label,
  .webgl-overlay {
    display: none !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .content-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}