/* =========================================================================
   고집사 디자인 시스템 — tokens.css (v2.4)
   Primitive + Semantic CSS 변수. 컴포넌트는 Semantic 토큰만 사용.
   Base 요소(body 등) 스타일은 gojipsa.css · partner-portal-v2.css 에서 적용.

   v2.4: 2단계 — 반복 회색·여백·폰트·radius 하드코딩을 토큰으로 치환.
   브랜드 솔리드 --color-brand = #4154FF. 린트 없음.
   ========================================================================= */

:root {
  /* --- Color: Brand (솔리드 CTA · 대표 파랑) --- */
  --color-brand: #4154FF;
  --color-brand-rgb: 65, 84, 255;
  --color-brand-hover: var(--color-blue-700);

  /* --- Color: Blue (Primary scale) --- */
  --color-blue-50:  #EEF4FF;
  --color-blue-100: #D9E5FF;
  --color-blue-200: #B8CEFF;
  --color-blue-300: #8AAEFF;
  --color-blue-400: #5B87FA;
  --color-blue-500: #2E6FF2;
  --color-blue-600: var(--color-brand);
  --color-blue-700: #1546AE;
  --color-blue-800: #123A8C;
  --color-blue-900: #0F2E6B;
  --color-blue-500-rgb: 46, 111, 242;
  --color-blue-600-rgb: var(--color-brand-rgb);

  /* --- Color: Neutral --- */
  --color-gray-0:   #FFFFFF;
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #F2F4F6;
  --color-gray-200: #E5E8EB;
  --color-gray-300: #D1D6DB;
  --color-gray-400: #B0B8C1;
  --color-gray-500: #8B95A1;
  --color-gray-600: #6B7684;
  --color-gray-700: #4E5968;
  --color-gray-800: #333D4B;
  --color-gray-900: #191F28;
  --color-ink:      #0B1015;

  /* --- Color: Functional --- */
  --color-success:    #12B76A;
  --color-success-bg: #ECFDF3;
  --color-warning:    #F79009;
  --color-warning-bg: #FFFAEB;
  --color-error:      #F04438;
  --color-error-bg:   #FEF3F2;
  --color-info:       #2E90FA;
  --color-info-bg:    #EFF8FF;
  --color-rating:     #FFB800;

  /* --- Color: Point (HOT/특가 — 제한적) --- */
  --color-point:    #FF6B35;
  --color-point-bg: #FFF4ED;

  /* --- Color: Brand partners (반복 하드코딩) --- */
  --color-kakao: #FEE500;
  --color-naver: #03C75A;

  /* --- Typography --- */
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-number: var(--font-sans);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-display: 34px;
  --fs-h1:      26px;
  --fs-h2:      20px;
  --fs-22:      22px;   /* 카드 타이틀 하드코딩 반복 */
  --fs-h3:      18px;
  --fs-17:      17px;
  --fs-body-lg: 16px;
  --fs-15:      15px;   /* admin/partner html 루트와 동일 */
  --fs-body:    14px;
  --fs-13:      13px;   /* 스캔 1위 하드코딩 폰트 크기 */
  --fs-caption: 12px;
  --fs-tiny:    11px;
  --fs-10:      10px;

  --lh-display: 1.22;
  --lh-h1:      1.28;
  --lh-h2:      1.35;
  --lh-h3:      1.40;
  --lh-body:    1.55;
  --lh-caption: 1.50;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body:    0;

  /* --- Spacing (4px grid + 실제 반복 중간 스텝 6/10/14/18/28) --- */
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-3-5: 14px;
  --space-4:   16px;
  --space-4-5: 18px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  --section-y:    var(--space-16);
  --section-y-lg: var(--space-32);
  --block-gap:    var(--space-8);

  /* --- Radius --- */
  --radius-2xs:  2px;
  --radius-xs:   4px;
  --radius-6:    6px;
  --radius-sm:   8px;
  --radius-10:   10px;  /* 12px 다음으로 많이 쓰인 값 */
  --radius-md:   12px;
  --radius-14:   14px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px; /* 999px 하드코딩도 여기로 */

  /* --- Shadow --- */
  --shadow-sm:   0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-md:   0 4px 12px rgba(16, 24, 40, 0.07);
  --shadow-lg:   0 8px 24px rgba(16, 24, 40, 0.10);

  /* --- Icon --- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke-width: 1.75;
  --icon-stroke-width-bold: 2;

  /* --- Z-index --- */
  --z-base:     0;
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-fixed:    1200;
  --z-backdrop: 1300;
  --z-modal:    1400;
  --z-toast:    1500;

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;

  /* --- Layout --- */
  --container-max: 1200px;
  --container-pad: var(--space-5);
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* --- Semantic: Background --- */
  --bg-page:         var(--color-gray-0);
  --bg-subtle:       var(--color-gray-50);
  --bg-muted:        var(--color-gray-100);
  --bg-brand:        var(--color-blue-500);
  --bg-brand-subtle: var(--color-blue-50);
  --bg-point-subtle: var(--color-point-bg);

  /* --- Semantic: Text --- */
  --text-heading:   var(--color-ink);
  --text-primary:   var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-tertiary:  var(--color-gray-500);
  --text-disabled:  var(--color-gray-400);
  --text-brand:     var(--color-brand);
  --text-point:     var(--color-point);
  --text-on-brand:  var(--color-gray-0);

  /* --- Semantic: Border --- */
  --border-subtle:  var(--color-gray-100);
  --border-default: var(--color-gray-200);
  --border-strong:  var(--color-gray-300);
  --border-brand:   var(--color-blue-500);

  /* --- Semantic: Action --- */
  --action-primary:         var(--color-brand);
  --action-primary-hover:   var(--color-brand-hover);
  --action-primary-pressed: var(--color-blue-800);

  /* --- Focus ring --- */
  --focus-ring: 0 0 0 3px rgba(46, 111, 242, 0.35);
}

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

@media (min-width: 768px) {
  :root {
    --fs-display: 48px;
    --fs-h1: 32px;
    --section-y: var(--section-y-lg);
  }
}

/* =========================================================================
   Brand apply (v2.3) — --color-brand #4154FF

   Merged to var(--color-brand):
     #0B57D0 #1B57D6 #1A56DB #0B6BE0 #1D4ED8 #1473E6 #1A73E8
     #2563EB #0D6EFD #2D6CDF #2B6DE8 #1E88E5 #367CE9
     #5F63FF #5B4DFF #4154FF #00A3FF
     rgba(0, 85, 209) · CTA 섀도 rgba(95, 99, 255)

   Hover of those CTAs → var(--color-brand-hover):
     #5054E8 #0088D4 · 툴바 :hover #4338CA · 가이드 링크 :hover #1D4ED8

   Kept (not brand solid): chart #6366F1, category #4F46E5 #0284C7,
   calendar Sat #3B82F6, tints, navy, admin sidebar #166EE9, discount
   fallback #6C5CE7, coach/AI #4338CA (non-hover).

   Remaining observed (non-blue) leftovers — 린트 전:

   Color · neutral 211종. 캐논: --color-gray-*
     #F3F4F6 #F1F5F9 #F8FAFC #F2F3F7 → --color-gray-50 / --bg-subtle
     #E5E7EB #E2E8F0 #E8EAED #DEE2E6 → --color-gray-200 / --border-default
     #D1D5DB                         → --color-gray-300
     #9CA3AF #94A3B8 #6B7280 #727687 #6C757D → --color-gray-400 / 500 / 600
     #4B5563 #374151 #64748B #475569 → --color-gray-600 / 700
     #1F2937 #111827 #0F172A #1A1C24 #212529 → --color-gray-800 / 900 / --color-ink

   Color · functional
     #DC2626 #EF4444 #DC3545 #B91C1C → --color-error
     #F59E0B                         → --color-warning
     #FACC15 #FBBF24                 → --color-rating
     #059669 #198754 #22C55E #16A34A → --color-success
     #03C75A                         → --color-naver
     #FEE500                         → --color-kakao

   Spacing · rem 잔여 (16px 루트 환산)
     0.15rem (2.4px)  → --space-0-5 (2px)
     0.35rem (5.6px)  → --space-1-5 (6px)   ※ partner CSS ×130
     0.45rem (7.2px)  → --space-2 (8px)
     0.65rem (10.4px) → --space-2-5 (10px)
     0.85rem (13.6px) → --space-3-5 (14px)

   Font-size · 분수 rem
     12.5 / 12.8 px → --fs-caption (12)
     13.1 / 13.6 px → --fs-13
     14.4 / 14.7 px → --fs-body (14)
     15.2 px        → --fs-15
     16.8 / 17.6 px → --fs-17 / --fs-h3
     21.6 px        → --fs-22 / --fs-h2

   Radius
     999px · 9999px → --radius-full
     5.6px / 10.4px rem 잔여 → --radius-6 / --radius-10
   ========================================================================= */