/* === variables.css ===
   CSS 커스텀 프로퍼티 (디자인 토큰)
   DESIGN_SYSTEM.md와 반드시 일치 유지
   직접 색상값 사용 금지 — 반드시 이 변수 사용
========================================= */

:root {

  /* --- 브랜드 컬러 (프로젝트마다 변경) --- */
  --color-primary:        #FFC72C;
  --color-primary-dark:   #F9A825;
  --color-primary-light:  #FFF9E1;
  --color-primary-lighter: #FFFBF0;
  --color-secondary:      #212121;

  /* RGB 값 (rgba 사용용) */
  --rgb-primary:          255, 199, 44;

  /* --- 중립 컬러 --- */
  --color-black:          #111111;
  --color-white:          #FFFFFF;
  --color-gray-900:       #1A1A1A;
  --color-gray-800:       #262626;
  --color-gray-700:       #3D3D3D;
  --color-gray-500:       #767676;
  --color-gray-300:       #B3B3B3;
  --color-gray-100:       #F5F5F5;
  --color-gray-50:        #FAFAFA;

  /* --- 인트로 로딩 화면 --- */
  --color-intro-bg:       var(--color-primary);
  --color-intro-ink:      #4F2A24;   /* 노란 배경 위 텍스트/보더 (대비 8:1 이상) */
  --color-intro-ink-dark: #3A1E19;   /* 검색 버튼 눌림 상태 */

  /* --- 시맨틱 컬러 --- */
  --color-success:        #2E7D32;
  --color-success-light:  #F1F8E9;
  --color-warning:        #F57C00;
  --color-warning-light:  #FFF8E1;
  --color-error:          #C62828;
  --color-error-light:    #FFEBEE;
  --color-info:           #1565C0;
  --color-info-light:     #E3F2FD;

  /* --- 텍스트 --- */
  --color-text-primary:   var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-muted:     var(--color-gray-500);
  --color-text-disabled:  var(--color-gray-300);
  --color-text-inverse:   var(--color-white);

  /* --- 배경 --- */
  --color-bg-primary:     var(--color-white);
  --color-bg-secondary:   var(--color-gray-50);
  --color-bg-tertiary:    var(--color-gray-100);

  /* --- 경계선 --- */
  --color-border:         var(--color-gray-100);
  --color-border-strong:  var(--color-gray-300);

  /* ----------------------------------------
     타이포그래피
  ---------------------------------------- */

  --font-primary:   'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-secondary: 'Noto Serif KR', 'Georgia', serif;
  --font-mono:      'JetBrains Mono', 'Consolas', monospace;

  /* 폰트 사이즈 */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */

  /* 폰트 웨이트 */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* 줄간격 */
  --leading-tight:    1.25;
  --leading-normal:   1.6;
  --leading-relaxed:  1.8;

  /* ----------------------------------------
     간격
  ---------------------------------------- */

  --space-1:    0.25rem;    /* 4px */
  --space-2:    0.5rem;     /* 8px */
  --space-3:    0.75rem;    /* 12px */
  --space-4:    1rem;       /* 16px */
  --space-5:    1.25rem;    /* 20px */
  --space-6:    1.5rem;     /* 24px */
  --space-8:    2rem;       /* 32px */
  --space-10:   2.5rem;     /* 40px */
  --space-12:   3rem;       /* 48px */
  --space-16:   4rem;       /* 64px */
  --space-20:   5rem;       /* 80px */
  --space-24:   6rem;       /* 96px */
  --space-32:   8rem;       /* 128px */

  /* ----------------------------------------
     레이아웃
  ---------------------------------------- */

  --container-sm:     40rem;    /* 640px */
  --container-md:     48rem;    /* 768px */
  --container-lg:     64rem;    /* 1024px */
  --container-xl:     80rem;    /* 1280px */
  --container-2xl:    90rem;    /* 1440px */

  --container-padding: var(--space-4);  /* 모바일 기본 */

  /* ----------------------------------------
     컴포넌트
  ---------------------------------------- */

  /* 경계 반경 */
  --radius-sm:    0.25rem;    /* 4px */
  --radius-md:    0.5rem;     /* 8px */
  --radius-lg:    0.75rem;    /* 12px */
  --radius-xl:    1rem;       /* 16px */
  --radius-2xl:   1.5rem;     /* 24px */
  --radius-full:  9999px;

  /* 그림자 */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.14);

  /* 글래스모피즘 (히어로 글래스 카드) */
  --glass-surface:    rgba(255, 255, 255, 0.72);
  --glass-border:     rgba(255, 255, 255, 0.9);
  --glass-blur:       26px;
  --glass-shadow:     0 24px 64px rgba(17, 17, 17, 0.25);
  --spotlight-color:  rgba(255, 255, 255, 0.4);

  /* 전환 */
  --transition-fast:    150ms ease;
  --transition-normal:  250ms ease;
  --transition-slow:    400ms ease;

  /* z-index */
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
  --z-intro:      600;    /* 진입 인트로 화면 (최상단) */

  /* 헤더 높이 */
  --header-height-mobile:   60px;
  --header-height-desktop:  80px;
}

/* 태블릿 이상: 컨테이너 패딩 조정 */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-6);
  }
}

/* 데스크톱 이상 */
@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-10);
  }
}