/* ============================================================
   매커멕스 디자인 토큰
   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 (hover: none) {
  .mCompanyCard:hover {
    box-shadow: none;
    border-color: #e5e7eb;
  }
  .list-sidebar_ai:hover {
    transform: none;
    box-shadow: 0 4px 18px rgba(129, 140, 248, 0.45);
  }
}

@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);
}

/* ─── 12. Plan Page 토큰 ─────────────────────────────────── */
:root {
  --plan-page-bg: #FAFBFD;
  --plan-surface: #fff;
  --plan-page-max-width: 1100px;
  --plan-page-pad-top: 60px;
  --plan-page-pad-bottom: 80px;
  --plan-hero-margin-bottom: 40px;
  --plan-eyebrow-gap: 6px;
  --plan-eyebrow-padding: 5px 14px;
  --plan-eyebrow-margin-bottom: 14px;
  --plan-title-margin: 0 0 8px;
  --plan-sub-margin-top: 8px;

  --plan-eyebrow-color: #1e40af;
  --plan-eyebrow-bg: #dbeafe;
  --plan-eyebrow-radius: 20px;
  --plan-title-color: #1A1D29;
  --plan-title-accent: #2563eb;
  --plan-sub-color: #5A5F72;

  --plan-free-max-width: 500px;
  --plan-free-gap: 14px;
  --plan-free-margin-bottom: 48px;
  --plan-free-padding: 16px 22px;
  --plan-free-radius: 12px;
  --plan-free-border: #e5e7eb;
  --plan-free-icon-size: 38px;
  --plan-free-icon-radius: 9px;
  --plan-free-icon-svg-size: 18px;
  --plan-free-icon-bg: #f3f4f6;
  --plan-free-icon-color: #6b7280;
  --plan-free-name-size: 14px;
  --plan-free-name-margin-bottom: 3px;
  --plan-free-desc-size: 13px;
  --plan-free-text: #1a1a1a;
  --plan-free-text-muted: #6b7280;

  --plan-grid-cols: 4;
  --plan-grid-gap: 16px;
  --plan-featured-margin-top: 14px;

  --plan-card-border: #e8e8e8;
  --plan-card-radius: 16px;
  --plan-card-padding: 36px 22px 24px;
  --plan-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --plan-card-hover-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --plan-card-hover-border: #bfdbfe;
  --plan-card-featured-border: #2563eb;
  --plan-card-featured-border-width: 1.5px;

  --plan-badge-top: -14px;
  --plan-badge-size: 12px;
  --plan-badge-padding: 5px 18px;
  --plan-badge-bg: #2563eb;
  --plan-badge-text: #fff;
  --plan-badge-radius: 999px;

  --plan-name-size: 18px;
  --plan-name-margin-bottom: 14px;
  --plan-name-color: #1A1D29;
  --plan-price-margin-bottom: 4px;
  --plan-currency-size: 16px;
  --plan-currency-margin-top: 8px;
  --plan-amount-size: 36px;
  --plan-label-margin-bottom: 16px;
  --plan-label-margin-top: 4px;
  --plan-label-color: #5A5F72;
  --plan-target-gap: 6px;
  --plan-target-min-height: 42px;
  --plan-target-radius: 8px;
  --plan-target-padding: 8px 12px;
  --plan-target-margin-bottom: 20px;
  --plan-target-bg: #f3f4f6;
  --plan-target-border: #e5e7eb;
  --plan-target-color: #5A5F72;
  --plan-featured-target-bg: #f3f4f6;
  --plan-featured-target-border: #e5e7eb;
  --plan-icon-muted: #9ca3af;
  --plan-credit-margin-bottom: 6px;
  --plan-credit-size: 52px;
  --plan-credit-label-margin-top: 2px;
  --plan-credit-color: #2563eb;

  --plan-bonus-size: 12px;
  --plan-bonus-padding: 5px 12px;
  --plan-bonus-margin-bottom: 20px;
  --plan-bonus-margin-top: 8px;
  --plan-bonus-bg: #f0fdf4;
  --plan-bonus-text: #16a34a;
  --plan-bonus-border: #bbf7d0;

  --plan-stat-border: #e5e7eb;
  --plan-featured-stat-border: #e5e7eb;
  --plan-stat-row-size: 13.5px;
  --plan-stat-lbl-color: #5A5F72;
  --plan-stat-val-color: #1A1D29;
  --plan-stats-padding-top: 16px;
  --plan-stats-gap: 8px;
  --plan-feature-gap: 7px;
  --plan-feature-size: 13px;
  --plan-feature-margin-top: 2px;
  --plan-feature-text: #5A5F72;
  --plan-chip-size: 12px;
  --plan-chip-padding: 2px 8px;
  --plan-pill-radius: 999px;
  --plan-feat-val-text: #2563eb;
  --plan-feat-val-bg: #eff6ff;
  --plan-feat-val-border: #bfdbfe;
  --plan-feat-credit-text: #374151;
  --plan-feat-credit-bg: #f3f4f6;
  --plan-feat-credit-border: #e5e7eb;

  --plan-cta-outline-bg: #fff;
  --plan-cta-outline-text: #2563eb;
  --plan-cta-outline-border: #bfdbfe;
  --plan-cta-outline-hover-bg: #eff6ff;
  --plan-cta-outline-hover-border: #3b82f6;
  --plan-cta-margin-top: 20px;
  --plan-cta-padding: 12px 0;
  --plan-cta-radius: 10px;
  --plan-cta-size: 14px;
  --plan-cta-solid-text: #fff;
  --plan-cta-solid-gradient: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  --plan-cta-solid-gradient-hover: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
  --plan-cta-solid-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  --plan-cta-solid-shadow-hover: 0 6px 20px rgba(37, 99, 235, 0.35);

  --plan-note-margin-top: 48px;
  --plan-note-padding: 28px 32px;
  --plan-note-title-margin: 0 0 16px;
  --plan-note-title-gap: 8px;
  --plan-note-gap: 10px;
  --plan-note-item-gap: 8px;
  --plan-note-bullet: #d1d5db;
  --plan-note-bullet-offset: 1px;
  --plan-empty-radius: 16px;
  --plan-empty-padding: 48px 24px;
  --plan-empty-size: 14px;
  --plan-empty-border: #d1d5db;
  --plan-empty-text: #6b7280;

  --plan-mobile-credit-num: 42px;
  --plan-mobile-price-amount: 30px;
  --plan-mobile-note-pad: 20px 18px;
}

@media (max-width: 900px) {
  :root {
    --plan-grid-cols: 2;
  }
}

@media (max-width: 560px) {
  :root {
    --plan-grid-cols: 1;
    --plan-page-pad-top: 40px;
    --plan-page-pad-bottom: 60px;
  }
}