/* =========================
   CSS 변수 정의
   - 색상, 간격, 폰트 등 공통 값
========================= */

:root {
  /* ===== 색상 ===== */
  --color-primary: #2563eb;
  --color-primary-hover: #1e40af;
  --color-text: #222;
  --color-text-secondary: #555;
  --color-text-muted: #888;
  --color-text-light: #8d8d8d;
  
  --color-bg: #f6f7f9;
  --color-bg-white: #ffffff;
  --color-bg-card: #f8f9fb;
  --color-bg-hover: #d0e4ff;
  
  --color-border: #e5e7eb;
  --color-border-light: #d0d0d0;
  
  --color-success: #31a552;
  --color-warning: #edbc40;
  --color-danger: #d62828;
  --color-info: #369de7;
  --color-purple: #915ce0;
  
  /* ===== 간격 ===== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  
  /* ===== 폰트 ===== */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.85rem;
  --font-size-base: 0.9rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.3rem;
  --font-size-2xl: 1.5rem;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* ===== 레이아웃 ===== */
  --max-width: 1200px;
  --max-width-narrow: 810px;
  --max-width-compact: 480px;
  
  /* ===== 테두리 ===== */
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 10px;
  --border-radius-xl: 12px;
  --border-radius-2xl: 14px;
  --border-radius-full: 999px;
  
  /* ===== 그림자 ===== */
  --shadow-sm: 0 2px 7px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.08);
  
  /* ===== 전환 ===== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  
  /* ===== Z-index ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ===== 다크 모드 (선택적) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    /* 다크 모드 색상 정의 (향후 추가) */
  }
}

/* ===== 반응형 브레이크포인트 참고용 ===== */
/*
  xs: 0-480px    (모바일 세로)
  sm: 481-768px  (모바일 가로, 태블릿 세로)
  md: 769-1024px (태블릿 가로, 작은 노트북)
  lg: 1025-1200px (노트북)
  xl: 1201px+     (데스크톱)
*/