/* ==========================================================================
   Base Styles - 기본 스타일 및 CSS 변수
   ========================================================================== */

/* Theme Variables */
@theme {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1e4976;
  --color-primary-800: #1e3a5f;
  --color-primary-900: #0c1929;
  --color-accent-cyan: #06b6d4;
  --color-accent-teal: #14b8a6;

  /* Custom Animations */
  @keyframes gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  @keyframes float1 {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-30px) translateX(20px); }
  }

  @keyframes float2 {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(20px) translateX(-30px); }
  }

  @keyframes bounce-slow {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  }

  /* Animation assignments */
  --animate-gradient-x: gradient 15s ease infinite;
  --animate-float-slow: float1 10s ease-in-out infinite;
  --animate-float-slower: float2 15s ease-in-out infinite;
  --animate-bounce-slow: bounce-slow 2s infinite;
}

/* Base Layer */
@layer base {
  :root {
    color-scheme: dark;

    /* Core surfaces */
    --bg-primary: #030712;
    --bg-secondary: #010309;
    --bg-tertiary: #111827;
    --bg-elevated: #1a1f2e;

    /* Glass/translucent surfaces */
    --bg-glass: rgba(255, 255, 255, 0.03);
    --bg-glass-hover: rgba(255, 255, 255, 0.06);
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-overlay: rgba(3, 7, 18, 0.6);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --text-tertiary: #6b7280;
    --text-quaternary: #4b5563;
    --text-muted: #374151;
    --text-light: #d1d5db;

    /* Borders */
    --border-primary: rgba(255, 255, 255, 0.05);
    --border-secondary: rgba(255, 255, 255, 0.08);
    --border-input: rgba(255, 255, 255, 0.1);

    /* Shadows */
    --shadow-color: rgba(0, 0, 0, 0.5);

    /* Admin-specific */
    --bg-context-menu: #1a1d27;
    --bg-select-option: #1a1a2e;
    --tab-overflow-gradient: linear-gradient(90deg, transparent, #030712);
  }

  [data-theme="light"] {
    color-scheme: light;

    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-elevated: #ffffff;

    --bg-glass: rgba(0, 0, 0, 0.02);
    --bg-glass-hover: rgba(0, 0, 0, 0.05);
    --bg-input: rgba(0, 0, 0, 0.04);
    --bg-overlay: rgba(248, 250, 252, 0.8);

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-quaternary: #94a3b8;
    --text-muted: #cbd5e1;
    --text-light: #334155;

    --border-primary: rgba(0, 0, 0, 0.06);
    --border-secondary: rgba(0, 0, 0, 0.1);
    --border-input: rgba(0, 0, 0, 0.15);

    --shadow-color: rgba(0, 0, 0, 0.1);

    --bg-context-menu: #ffffff;
    --bg-select-option: #f1f5f9;
    --tab-overflow-gradient: linear-gradient(90deg, transparent, #f8fafc);
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Selection */
  ::selection {
    background-color: rgba(59, 130, 246, 0.3);
  }
}

/* Validation bubble (말풍선) */
.val-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 50;
  animation: valBubbleIn 0.2s ease-out;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.val-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 14px;
  border: 5px solid transparent;
  border-top-color: #ef4444;
}
.val-error {
  outline: 2px solid #ef4444 !important;
  outline-offset: -1px;
}
@keyframes valBubbleIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}