/* ===========================================
   FASTWEB — CSS 변수 전체 (다크 테마 전환)
   컬러 / 타이포그래피 / 간격 / 반경
   =========================================== */

:root {

  /* =====================
     다크 배경 계열 (litmers.com 스타일)
     ===================== */
  --color-dark-950: #050505;   /* 최다크 — 푸터 배경 */
  --color-dark-900: #0A0A0A;   /* 메인 배경 */
  --color-dark-800: #111111;   /* 교차 섹션 배경 */
  --color-dark-700: #1A1A1A;   /* 카드 배경 */
  --color-dark-600: #1E1E1E;   /* 카드 호버 배경 */
  --color-dark-500: #242424;   /* 입력 필드 배경 */
  --color-dark-400: #2A2A2A;   /* 보더 배경 */

  /* =====================
     Primary Colors (하위 호환용 — 네이비)
     ===================== */
  --color-primary-950: #050505;
  --color-primary-900: #0A0A0A;
  --color-primary-800: #1A1A1A;
  --color-primary-700: #6B7280;   /* 다크 배경 위 서브 텍스트 → gray-500 */

  /* =====================
     Accent Cyan (CTA / 강조 — 브랜드 시안)
     ===================== */
  --color-accent-600: #0891B2;    /* 버튼 호버 상태 (cyan-600) */
  --color-accent-500: #06B6D4;    /* 메인 CTA 버튼 색상 (cyan-500) */
  --color-accent-400: #22D3EE;    /* 링크, 아이콘 강조, 섹션 레이블 (cyan-400) */
  --color-accent-100: rgba(6, 182, 212, 0.15); /* 배지 배경 (다크용) */
  --color-accent-50:  rgba(6, 182, 212, 0.08); /* 소셜 프루프 배경 */

  /* =====================
     Neutral (텍스트 계열)
     ===================== */
  --color-neutral-50:  #F9FAFB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-200: #E5E7EB;
  --color-neutral-400: #9CA3AF;   /* 보조 텍스트 */
  --color-neutral-600: #6B7280;   /* 뮤트 텍스트 */
  --color-neutral-800: #A0A0A0;   /* 다크 배경 위 본문 */
  --color-neutral-900: #FFFFFF;   /* 다크 배경 위 제목 */

  /* =====================
     Success / 신뢰 배지
     ===================== */
  --color-success-600: #22C55E;   /* 다크 배경 위 별점 (밝은 그린) */
  --color-success-50:  rgba(34, 197, 94, 0.12); /* 신뢰 배지 배경 */

  /* =====================
     White
     ===================== */
  --color-white: #FFFFFF;

  /* =====================
     보더
     ===================== */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default-dark: rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.12);

  /* =====================
     Semantic Aliases — 다크 테마 기준
     ===================== */
  --bg-page:          var(--color-dark-900);       /* #0A0A0A */
  --bg-section-alt:   var(--color-dark-800);       /* #111111 */
  --bg-dark:          var(--color-dark-900);
  --bg-card:          var(--color-dark-700);       /* #1A1A1A */
  --bg-card-hover:    var(--color-dark-600);       /* #1E1E1E */
  --bg-input:         var(--color-dark-500);       /* #242424 */

  --text-heading:     #FFFFFF;
  --text-body:        #D1D5DB;   /* gray-300 */
  --text-muted:       #9CA3AF;   /* gray-400 */
  --text-placeholder: #6B7280;   /* gray-500 */
  --text-on-dark:     #FFFFFF;
  --text-on-dark-sub: #9CA3AF;

  --border-default:   var(--border-default-dark);  /* rgba(255,255,255,0.08) */
  --border-focus:     var(--color-accent-400);

  --btn-primary-bg:       var(--color-accent-500);
  --btn-primary-hover:    var(--color-accent-600);
  --btn-primary-text:     var(--color-white);
  --btn-secondary-bg:     transparent;
  --btn-secondary-border: rgba(255, 255, 255, 0.2);
  --btn-secondary-text:   #D1D5DB;

  --badge-trust-bg:   rgba(34, 197, 94, 0.12);
  --badge-trust-text: #22C55E;
  --badge-blue-bg:    rgba(6, 182, 212, 0.15);
  --badge-blue-text:  #67E8F9;
  --badge-neutral-bg: rgba(255, 255, 255, 0.06);
  --badge-neutral-text: #9CA3AF;

  /* =====================
     타이포그래피
     ===================== */
  --font-primary: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent:  'Inter', 'Poppins', sans-serif;

  /* 디스플레이 타이포그래피 (Hero 전용) */
  --text-display-xl: clamp(2.25rem, 5vw, 3.5rem);   /* 36px → 56px */
  --text-display-lg: clamp(1.875rem, 4vw, 3rem);    /* 30px → 48px */

  /* 섹션 제목 */
  --text-heading-xl: clamp(1.75rem, 3vw, 2.5rem);   /* 28px → 40px */
  --text-heading-lg: clamp(1.5rem, 2.5vw, 2rem);    /* 24px → 32px */
  --text-heading-md: clamp(1.25rem, 2vw, 1.5rem);   /* 20px → 24px */

  /* 본문 */
  --text-body-xl:  1.125rem;   /* 18px — 부제목, 강조 본문 */
  --text-body-lg:  1rem;       /* 16px — 기본 본문 */
  --text-body-md:  0.9375rem;  /* 15px — 카드 설명 */
  --text-body-sm:  0.875rem;   /* 14px — 캡션, 가격 라벨 */
  --text-body-xs:  0.75rem;    /* 12px — 배지, 태그 */

  /* 행간 */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* 자간 */
  --tracking-tight:   -0.03em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.1em;

  /* =====================
     간격 시스템 (4px 기반)
     ===================== */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* 섹션 패딩 */
  --section-padding-y:    var(--space-24);   /* 96px */
  --section-padding-y-sm: var(--space-16);   /* 64px */
  --section-padding-y-lg: var(--space-32);   /* 128px */

  /* 컨테이너 */
  --container-max:    1200px;
  --container-px:     var(--space-6);    /* 24px 모바일 */
  --container-px-md:  var(--space-10);   /* 40px 태블릿 */
  --container-px-lg:  var(--space-16);   /* 64px 데스크탑 */

  /* 카드 */
  --card-padding:    var(--space-8);    /* 32px */
  --card-padding-sm: var(--space-6);    /* 24px */
  --card-gap:        var(--space-6);    /* 24px */

  /* 보더 반경 */
  --radius-sm:   6px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* 전환 */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.3s ease;
  --transition-reveal: 0.5s ease;
}

/* 모션 감소 대응 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   0s;
    --transition-base:   0s;
    --transition-slow:   0s;
    --transition-reveal: 0s;
  }
}