/* ============================================================
   털보네 디자인 토큰
   출처: Figma g0UDCxGnBwao9pO4v3lYFk + style.css 패턴 분석
   생성: 2026-04-13
   ============================================================ */

:root {
  /* ── 색상 (Figma 변수 그대로) ─────────────────────────── */
  --white:   #ffffff;
  --mute-1:  #333333;
  --mute-2:  #777777;
  --mute-3:  #999999;
  --mute35:  #bbbbbb;
  --mute-4:  #cccccc;
  --mute-6:  #eeeeee;
  --mute-7:  #f8f8f8;

  /* 의미론적 색상 (Figma 변수 없음 → style.css 하드코딩 값 변수화) */
  --accent:   #cc0000;   /* 가격·뱃지·필수 표시 */
  --success:  #297a29;   /* 성공·아이디찾기 등 */
  --danger:   #e43d3d;   /* 오류·삭제 */
  --naver:    #33c854;
  --youtube:  #e43d3d;
  --star:     #f5a623;   /* 별점 */
  --banner-gray: #8c8c8c;

  /* ── 폰트 ───────────────────────────────────────────────── */
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* 폰트 사이즈 스케일 */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  22px;
  --fs-3xl:  24px;
  --fs-4xl:  28px;

  /* 모바일 기준 타이포 */
  --fs-title:    20px;   /* 페이지 타이틀 */
  --fs-section:  18px;   /* 섹션 헤딩 */
  --fs-body:     14px;   /* 본문 */
  --fs-caption:  12px;   /* 캡션 */

  /* ── 스페이싱 ────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  30px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 60px;
  --sp-20: 80px;
  --sp-24: 100px;

  /* 모바일 컨테이너 수평 패딩 */
  --container-px: 16px;

  /* ── 보더 라디우스 ──────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-pill: 30px;
  --radius-full: 9999px;

  /* ── 그림자 ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);

  /* ── 브레이크포인트 (참조용 — 미디어쿼리 직접 사용) ──── */
  --bp-desktop: 1280px;

  /* ── Z-인덱스 ───────────────────────────────────────────── */
  --z-float:   90;
  --z-header:  100;
  --z-drawer:  1000;
  --z-overlay: 999;
  --z-modal:   9999;

  /* ── 레이아웃 ────────────────────────────────────────────── */
  --max-w-content: 1280px;
  --max-w-narrow:  1000px;
  --max-w-form:    480px;
  --max-w-card:    560px;

  /* 모바일 기준 컨테이너 (375 → 최대 1279px 범위 fluid) */
  --container-max-mobile: 600px;

  /* ── 트랜지션 ────────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 데스크탑 오버라이드 (1280px+) */
@media (min-width: 1280px) {
  :root {
    --container-px: 20px;
    --fs-title:    28px;
    --fs-section:  24px;
    --fs-body:     16px;
  }
}