/* ============================================================
 * 디자인 토큰 (Design Tokens)
 * ============================================================
 *
 * 📝 설명:
 * 이 파일은 프로젝트 전체에서 사용하는 디자인 변수를 정의합니다.
 * 색상, 폰트, 간격 등 모든 디자인 요소가 여기서 관리됩니다.
 *
 * ⚠️ 중요:
 * 1. 이 파일의 변수명은 절대 변경하지 마세요!
 * 2. 다른 CSS 파일에서는 반드시 이 변수를 사용하세요
 * 3. 하드코딩된 색상/크기 사용 금지
 *
 * 🎨 디자인 철학:
 * - 대기업 스타일 플랫 디자인
 * - 그라데이션 절대 금지
 * - border-radius 8px 이하
 * - transition 0.2s 이하
 *
 * ============================================================
 */

:root {
  /* ===========================================
   * 색상 시스템 (Color System)
   * ===========================================
   */

  /* Primary 색상 - 메인 브랜드 색상 (파란색 계열) */
  --color-primary: #0066CC;           /* 기본 파란색 - 버튼, 링크 등 */
  --color-primary-light: #3385DB;     /* 밝은 파란색 - 호버 상태 */
  --color-primary-dark: #004C99;      /* 어두운 파란색 - 액티브 상태 */
  --color-primary-pale: #E6F2FF;      /* 연한 파란색 - 배경, 배지 */

  /* Neutral 색상 - 무채색 (검정 ~ 흰색) */
  --color-black: #000000;             /* 순수 검정 (거의 사용 안함) */
  --color-gray-900: #1A1A1A;          /* 제목, 본문 텍스트 */
  --color-gray-800: #333333;          /* 부제목 */
  --color-gray-700: #4D4D4D;          /* 설명 텍스트 */
  --color-gray-600: #666666;          /* 보조 텍스트 */
  --color-gray-500: #808080;          /* 비활성 텍스트 */
  --color-gray-400: #999999;          /* placeholder 텍스트 */
  --color-gray-300: #CCCCCC;          /* 테두리 */
  --color-gray-200: #E5E5E5;          /* 구분선 */
  --color-gray-100: #F5F5F5;          /* 배경 */
  --color-gray-50: #FAFAFA;           /* 카드 배경 */
  --color-white: #FFFFFF;             /* 순수 흰색 */

  /* Semantic 색상 - 의미를 가진 색상 */

  /* 성공 - 초록색 계열 */
  --color-success: #10B981;           /* 기본 초록색 */
  --color-success-light: #34D399;     /* 밝은 초록색 */
  --color-success-dark: #059669;      /* 어두운 초록색 */
  --color-success-pale: #ECFDF5;      /* 연한 초록색 - 배경용 */

  /* 경고 - 주황색 계열 */
  --color-warning: #F59E0B;           /* 기본 주황색 */
  --color-warning-light: #FBBF24;     /* 밝은 주황색 */
  --color-warning-dark: #D97706;      /* 어두운 주황색 */
  --color-warning-pale: #FEF3C7;      /* 연한 주황색 - 배경용 */

  /* 오류 - 빨간색 계열 */
  --color-error: #EF4444;             /* 기본 빨간색 */
  --color-error-light: #F87171;       /* 밝은 빨간색 */
  --color-error-dark: #DC2626;        /* 어두운 빨간색 */
  --color-error-pale: #FEE2E2;        /* 연한 빨간색 - 배경용 */

  /* 정보 - 하늘색 계열 */
  --color-info: #3B82F6;              /* 기본 하늘색 */
  --color-info-light: #60A5FA;        /* 밝은 하늘색 */
  --color-info-dark: #2563EB;         /* 어두운 하늘색 */
  --color-info-pale: #DBEAFE;         /* 연한 하늘색 - 배경용 */


  /* ===========================================
   * 타이포그래피 (Typography)
   * ===========================================
   */

  /* 폰트 패밀리 - 시스템 폰트 사용 (빠르고 안정적) */
  --font-family-base: -apple-system, BlinkMacSystemFont,
                       "Apple SD Gothic Neo", "Pretendard",
                       "Noto Sans KR", sans-serif;

  /* 숫자 전용 폰트 (판매점코드, 전화번호 등) */
  --font-family-mono: "SF Mono", Monaco, Consolas,
                      "Liberation Mono", monospace;

  /* 폰트 크기 (모바일 기준) */
  --font-size-xs: 12px;               /* 캡션, 작은 설명 */
  --font-size-sm: 14px;               /* 부가 정보, 라벨 */
  --font-size-md: 16px;               /* 기본 본문 ⭐ 가장 많이 사용 */
  --font-size-lg: 18px;               /* 강조 텍스트 */
  --font-size-xl: 20px;               /* 소제목 */
  --font-size-2xl: 24px;              /* 중제목 */
  --font-size-3xl: 28px;              /* 대제목 */
  --font-size-4xl: 32px;              /* 페이지 제목 */

  /* 폰트 굵기 */
  --font-weight-light: 300;           /* 거의 사용 안함 */
  --font-weight-normal: 400;          /* 기본 본문 */
  --font-weight-medium: 500;          /* 라벨, 버튼 */
  --font-weight-semibold: 600;        /* 소제목 */
  --font-weight-bold: 700;            /* 강조, 제목 */
  --font-weight-extrabold: 800;       /* 거의 사용 안함 */

  /* 줄 높이 (Line Height) */
  --line-height-tight: 1.25;          /* 제목용 - 간격 좁게 */
  --line-height-normal: 1.5;          /* 본문용 ⭐ 기본값 */
  --line-height-relaxed: 1.75;        /* 긴 글용 - 간격 넓게 */


  /* ===========================================
   * 간격 시스템 (Spacing System)
   * ===========================================
   * 8px 기반 시스템 (모든 간격은 8의 배수)
   */

  --spacing-0: 0;                     /* 0px - 간격 없음 */
  --spacing-1: 4px;                   /* 4px - 아주 작은 간격 */
  --spacing-2: 8px;                   /* 8px ⭐ 기본 간격 */
  --spacing-3: 12px;                  /* 12px */
  --spacing-4: 16px;                  /* 16px ⭐ 많이 사용 */
  --spacing-5: 20px;                  /* 20px */
  --spacing-6: 24px;                  /* 24px ⭐ 많이 사용 */
  --spacing-8: 32px;                  /* 32px */
  --spacing-10: 40px;                 /* 40px */
  --spacing-12: 48px;                 /* 48px */
  --spacing-16: 64px;                 /* 64px */
  --spacing-20: 80px;                 /* 80px */


  /* ===========================================
   * 레이아웃 (Layout)
   * ===========================================
   */

  /* 반응형 브레이크포인트 */
  --breakpoint-mobile: 0px;           /* 모바일 (기본) */
  --breakpoint-tablet: 768px;         /* 태블릿 */
  --breakpoint-desktop: 1024px;       /* 데스크톱 */
  --breakpoint-wide: 1280px;          /* 와이드 */

  /* 컨테이너 */
  --container-max-width: 1200px;      /* 최대 너비 */
  --container-padding-mobile: 16px;   /* 모바일 좌우 여백 */
  --container-padding-desktop: 24px;  /* 데스크톱 좌우 여백 */

  /* 사이드바 (PC 전용) */
  --sidebar-width: 350px;             /* 사이드바 너비 */

  /* 바텀시트 높이 (모바일 전용) */
  --bottomsheet-closed: 80px;         /* 닫힌 상태 */
  --bottomsheet-half: 50vh;           /* 반 열림 */
  --bottomsheet-full: 85vh;           /* 전체 열림 */


  /* ===========================================
   * 디자인 토큰 (Design Tokens)
   * ===========================================
   */

  /* 둥글기 (Border Radius) - ⚠️ 8px 이하만 허용 */
  --radius-none: 0;                   /* 0px - 각진 모서리 */
  --radius-sm: 4px;                   /* 4px - 버튼, 입력창 */
  --radius-md: 8px;                   /* 8px - 카드 (최대값!) */

  /* 그림자 (Box Shadow) - ⚠️ 미세하게만 사용 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);        /* 아주 작은 그림자 */
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);         /* 기본 그림자 */
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.12);        /* 호버 그림자 */

  /* 애니메이션 (Transition) - ⚠️ 0.2초 이하만 허용 */
  --transition-fast: 0.1s ease-in-out;               /* 빠른 애니메이션 */
  --transition-normal: 0.2s ease-in-out;             /* 기본 애니메이션 (최대값!) */

  /* Z-Index (레이어 순서) */
  --z-base: 0;                        /* 기본 레이어 */
  --z-dropdown: 100;                  /* 드롭다운 */
  --z-sticky: 200;                    /* 고정 헤더 */
  --z-modal: 300;                     /* 모달 */
  --z-toast: 400;                     /* 토스트 메시지 */


  /* ===========================================
   * 기타 (Miscellaneous)
   * ===========================================
   */

  /* 터치 영역 최소 크기 (모바일 접근성) */
  --touch-target-min: 44px;           /* 최소 44px × 44px */

  /* 입력창 높이 */
  --input-height: 44px;               /* 입력창 기본 높이 */

  /* 버튼 높이 */
  --button-height-sm: 36px;           /* 작은 버튼 */
  --button-height-md: 44px;           /* 기본 버튼 */
  --button-height-lg: 52px;           /* 큰 버튼 */
}


/* ===========================================
 * 사용 예시
 * ===========================================
 *
 * .button-primary {
 *   background: var(--color-primary);
 *   color: var(--color-white);
 *   padding: var(--spacing-3) var(--spacing-6);
 *   border-radius: var(--radius-sm);
 *   transition: all var(--transition-normal);
 * }
 *
 * .button-primary:hover {
 *   background: var(--color-primary-dark);
 * }
 *
 * .card {
 *   background: var(--color-white);
 *   border: 1px solid var(--color-gray-200);
 *   border-radius: var(--radius-md);
 *   padding: var(--spacing-4);
 *   box-shadow: var(--shadow-md);
 * }
 *
 * ============================================
 */