/* ============================================
   Design Tokens
   디자인 토큰 정의
   ============================================ */

:root {
  /* ---- Color: Mono ---- */
  --color-mono-1: #222222;
  --color-mono-3: #333333;
  --color-mono-4: #666666;
  --color-mono-6: #CCCCCC;
  --color-mono-7: #EEEEEE;
  --color-white: #FFFFFF;
  --color-text-strong: #0E1116;
  --color-text-muted: #6B7280;
  --color-mosaic-bg: #F4F5F7;
  --color-footer-bg: #F3F3F3;       /* 푸터 배경색 */

  /* ---- Color: Brand (Point Blue) ---- */
  --point-blue-1: #4B75F2;
  --point-blue-2: #7EA7FF;
  --point-blue-3: #6B80F6;
  --point-blue-4: #5866FF;

  /* ---- Color: Accent ---- */
  --color-stripe-violet: #5866FF;   /* 30일 뱃지 */
  --color-stripe-purple: #7D88FF;   /* 기업·대학 뱃지 */
  --color-stat-purple: #7954E6;

  /* ---- Typography Sizes (PC) ---- */
  --text-display: 2.5rem;       /* 40px */
  --text-heading-1: 2rem;       /* 32px */
  --text-heading-2: 1.875rem;   /* 30px */
  --text-heading-3: 1.375rem;   /* 22px */
  --text-heading-l: 1.5rem;     /* 24px */
  --text-stat: 2.25rem;         /* 36px */
  --text-body-l: 1rem;          /* 16px */
  --text-body-m: 0.875rem;      /* 14px */
  --text-body-s: 0.84rem;       /* 13.5px */
  --text-label-m: 0.875rem;     /* 14px */
  --text-caption: 0.75rem;      /* 12px */

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-img: 10px;
  --radius-btn-rect: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-card-lg: 22px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-card-soft: 0 1px 0 rgba(16, 24, 40, 0.02), 0 8px 24px -12px rgba(16, 24, 40, 0.08);
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-floating: 0 12px 32px rgba(0, 0, 0, 0.16);
  --shadow-cta-primary: 0 6px 18px -6px rgba(79, 107, 255, 0.55), 0 2px 4px rgba(79, 107, 255, 0.18);

  /* ---- Z-index ---- */
  /* 레거시 .popup_wrap(z-index: 900)보다 헤더가 낮아야 로그인/약관 등 팝업이 헤더 위에 보임 */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky-header: 800;
  --z-overlay: 1500;
  --z-modal: 2000;
  --z-toast: 3000;

  /* ---- Gradient ---- */
  --gradient-hero-text: linear-gradient(118deg, #4B75F2 0%, #7B5CFF 100%);
  --gradient-mosaic-d: linear-gradient(140deg, #2D6BFF 0%, #4F7BFF 50%, #6E8CFF 100%);
  --gradient-choice-text: linear-gradient(107deg, #2D6BFF 0%, #22C55E 100%);
  --gradient-accent: linear-gradient(135deg, var(--point-blue-3), var(--point-blue-4));
}

/* ---- Root font-size (BP별 자동 스케일) ---- */
html {
  font-size: 12px;
}
@media (min-width: 768px) {
  html { font-size: 14px; }
}
@media (min-width: 1280px) {
  html { font-size: 16px; }
}

/* [A 전용] 레거시 common.css 의 951~1080px root 폰트 "구멍" 메움
   - common.css 는 `html,body { font-size:15px } @media(1081~1400)` + base 16px 라 951~1080 구간이
     base 16px 로 되돌아가는 단절이 있음. 이 구간에서 root(rem 기준)가 15→16 으로 튀어,
     스크롤 컴팩트 헤더 메뉴(.c-gnb__link, 1025~1279 에서 0.9375rem)가 1080px 경계에서 다시 커졌음.
   - common.css 는 ucMypageScript 로 tokens.css 보다 "나중에" 로드되므로 html(0,0,1) 로는 못 이김
     → :root(0,1,0) 로 specificity 우위 확보(!important 불필요).
   - tokens.css 는 ucHead 의 `abVariant != 'B'` 블록에서만 로드 → 본 규칙은 A 변종 전용(B 무영향).
   - 효과: A 의 root font-size 가 951~1400px 에서 15px 로 연속 → 컴팩트 메뉴가 1025~1279px 전 구간
     14.06px(0.9375rem×15)로 평탄해져 1080px "다시 커짐" 제거. */
@media (min-width: 951px) and (max-width: 1080px) {
  :root { font-size: 15px; }
}