/* ============================================================
   매커멕스 디자인 토큰
   DESIGN_SYSTEM.md 기준 — 모든 HTML의 첫 번째 <link>로 포함
   ============================================================ */

/* ─── 1. 색상 토큰 ─────────────────────────────────────────── */
:root {
  /* 블루 — 주요 액션, 링크 */
  --blue:        #00a8e8;
  --blue-dark:   #0090c9;
  --blue-soft:   #e3f5fc;

  /* 퍼플 — AI / 프리미엄 기능 */
  --purple:      #6d28d9;
  --purple-soft: #ede9ff;

  /* 그린 배지 — 벤처인증 */
  --green-badge:    #10b981;
  --green-badge-bg: #ecfdf5;

  /* 골드 — 순위 배지 */
  --gold-bar:     #f5c542;
  --gold-bar-end: #fde047;

  /* 배경 & 카드 */
  --bg:     #FAFBFD;
  --card:   #fff;
  --border: #e8e8e8;

  /* 텍스트 */
  --text:       #1a1a1a;
  --text-muted: #6b7280;

  /* 형태 */
  --radius: 10px;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* ─── 2. 폰트 패밀리 ─────────────────────────────────────── */
:root {
  --font-base: 'Pretendard Variable', 'Pretendard', -apple-system,
               BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
  --font-display: 'SUIT Variable', var(--font-base);
  --font-serif:   'Noto Serif KR', Georgia, serif;
}

/* ─── 3. 폰트 사이즈 토큰 (Desktop ≥1025px) ─────────────── */
:root {
  --fs-section-title:    28px;
  --fs-ai-banner-title:  24px;
  --fs-card-company:     17px;
  --fs-modal-title:      18px;
  --fs-body:             15px;
  --fs-body-sm:          14px;
  --fs-tag:              12px;
  --fs-badge:            11px;
  --fs-caption:          12px;
}
@media (max-width: 1024px) {
  :root {
    --fs-section-title:    24px;
    --fs-ai-banner-title:  21px;
    --fs-card-company:     16px;
    --fs-modal-title:      17px;
    --fs-body:             14px;
  }
}
@media (max-width: 768px) {
  :root {
    --fs-section-title:    22px;
    --fs-ai-banner-title:  19px;
    --fs-card-company:     15px;
    --fs-modal-title:      16px;
    --fs-body:             14px;
    --fs-body-sm:          13px;
  }
}
@media (max-width: 480px) {
  :root {
    --fs-section-title:    20px;
    --fs-ai-banner-title:  17px;
    --fs-card-company:     15px;
    --fs-modal-title:      16px;
    --fs-body:             13px;
    --fs-body-sm:          12px;
    --fs-caption:          11px;
  }
}

/* ─── 4. 행간 토큰 ──────────────────────────────────────── */
:root {
  --lh-tight:   1.2;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;
}

/* ─── 5. 간격 토큰 ──────────────────────────────────────── */
:root {
  --sp-1:   4px;
  --sp-1h:  6px;
  --sp-2:   8px;
  --sp-2h:  10px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   28px;
  --sp-8:   32px;
  --sp-9:   36px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-18:  72px;
}
@media (max-width: 768px) {
  :root {
    --sp-10: 32px;
    --sp-12: 36px;
    --sp-18: 48px;
  }
}
@media (max-width: 480px) {
  :root {
    --sp-10: 28px;
    --sp-12: 32px;
    --sp-18: 40px;
  }
}

/* ─── 6. Border Radius 토큰 ──────────────────────────────── */
:root {
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-base: 10px;
  --r-lg:   12px;
  --r-xl:   14px;
  --r-2xl:  16px;
  --r-3xl:  20px;
  --r-4xl:  24px;
  --r-full: 50%;
}

/* ─── 7. 레이아웃 토큰 ──────────────────────────────────── */
:root {
  --page-gutter: 32px;
  --content-gap: 24px;
  --card-cols:   3;
  --card-gap:    16px;
}
@media (max-width: 1024px) {
  :root {
    --page-gutter: 24px;
    --content-gap: 20px;
    --card-cols:   2;
    --card-gap:    14px;
  }
}
@media (max-width: 768px) {
  :root {
    --page-gutter: 16px;
    --content-gap: 16px;
    --card-gap:    14px;
  }
}
@media (max-width: 640px) {
  :root {
    --card-cols: 1;
    --card-gap:  12px;
  }
}
@media (max-width: 480px) {
  :root {
    --page-gutter: 12px;
    --content-gap: 12px;
  }
}

/* ─── 8. 공통 컨테이너 ───────────────────────────────────── */
.ds-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--page-gutter);
  box-sizing: border-box;
}

/* ─── 9. 카드 그리드 ────────────────────────────────────── */
.card-grid {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(var(--card-cols), 1fr);
}

/* ─── 10. 접근성 & 터치 ─────────────────────────────────── */
/* 특정 인터랙티브 컴포넌트만 최소 터치 영역 보장 (전체 a/button 적용 시 헤더 레이아웃 파괴) */
@media (max-width: 768px) {
  .btn-favorite,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── 11. Safe Area (노치 대응) ──────────────────────────── */
body {
  padding-left:  env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}