/* ============================================
   Akashic Record — Hub
   화이트 + 시안 미스트, 네온 그린은 엣지로만
   ============================================ */

:root {
  /* 베이스 — 화이트 with 시안 미스트 */
  --bg-0: #f6fbfc;
  --bg-1: #eef6f8;
  --bg-mist-1: #e3eef2;
  --bg-mist-2: #d6e6ec;

  /* 시안 톤 (메인 액센트) */
  --cyan-50: #ecf7fa;
  --cyan-100: #d4ecf2;
  --cyan-200: #a8d8e3;
  --cyan-300: #6fbed0;
  --cyan-400: #3a9eb5;
  --cyan-500: #1a7f96;
  --cyan-600: #0f5e72;
  --cyan-glow: #6fbed0;

  /* 네온 그린 — 엣지로만 */
  --neon: #5cff9c;
  --neon-soft: #88ffb6;
  --neon-glow: rgba(92, 255, 156, 0.55);
  --neon-faint: rgba(92, 255, 156, 0.18);

  /* 텍스트 */
  --ink-1: #0a1f26;
  --ink-2: #2c4a52;
  --ink-3: #5a7780;
  --ink-4: #8aa3ab;
  --ink-5: #b6c8cd;

  /* 유리 + 입체 */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-edge-top: rgba(255, 255, 255, 0.95);
  --glass-edge-bottom: rgba(180, 210, 220, 0.35);

  /* 그림자 — 시안 톤이 살짝 도는 부드러움 */
  --shadow-xs: 0 1px 2px rgba(20, 60, 75, 0.04);
  --shadow-sm: 0 2px 8px rgba(20, 60, 75, 0.05), 0 1px 2px rgba(20, 60, 75, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 60, 75, 0.08), 0 2px 6px rgba(20, 60, 75, 0.04);
  --shadow-lg: 0 24px 60px rgba(20, 60, 75, 0.12), 0 8px 18px rgba(20, 60, 75, 0.06);
  --shadow-xl: 0 40px 100px rgba(20, 60, 75, 0.16), 0 12px 28px rgba(20, 60, 75, 0.08);

  /* 라디우스 */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;

  /* 타이포 */
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", sans-serif;
  --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, monospace;
  --font-display: "Geist", "Inter", -apple-system, "Pretendard", sans-serif;

  /* Tweak-driven 변수 (기본값) */
  --vibe-blur: 22px;
  --vibe-saturation: 1.15;
  --vibe-glass-opacity: 0.62;
  --neon-intensity: 0.55;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--ink-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg-0);
  letter-spacing: -0.005em;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 1200px 800px at 15% -10%, rgba(168, 216, 227, 0.45), transparent 60%),
    radial-gradient(ellipse 1000px 700px at 95% 20%, rgba(214, 230, 236, 0.55), transparent 55%),
    radial-gradient(ellipse 1400px 900px at 50% 110%, rgba(168, 216, 227, 0.30), transparent 60%),
    linear-gradient(180deg, #f6fbfc 0%, #eef6f8 100%);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

/* 미세 노이즈 텍스처 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.3  0 0 0 0 0.35  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: multiply;
}

/* 부유하는 큰 시안 오브 */
body::after {
  content: "";
  position: fixed;
  width: 700px;
  height: 700px;
  top: -200px;
  right: -150px;
  background: radial-gradient(circle, rgba(111, 190, 208, 0.22) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

#app {
  position: relative;
  z-index: 1;
}

/* ============ Glass primitives ============ */
.glass {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, calc(var(--vibe-glass-opacity) + 0.14)) 0%,
    rgba(255, 255, 255, var(--vibe-glass-opacity)) 100%
  );
  backdrop-filter: blur(var(--vibe-blur)) saturate(var(--vibe-saturation));
  -webkit-backdrop-filter: blur(var(--vibe-blur)) saturate(var(--vibe-saturation));
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-top),
    inset 0 -1px 0 var(--glass-edge-bottom),
    var(--shadow-md);
}

/* ============ Scrollbar ============ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(111, 190, 208, 0.35);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(111, 190, 208, 0.55); background-clip: padding-box; }

/* ============ Focus ring ============ */
*:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============ Selection ============ */
::selection {
  background: rgba(92, 255, 156, calc(var(--neon-intensity) * 0.45));
  color: var(--ink-1);
}