/* ==========================================================================
   GROWTH IT — 디자인 토큰 (:root)
   색상 · 간격 · 타이포 스케일. 컴포넌트 규칙은 style.css에서 var()로 참조한다.

   반응형 토큰 캐스케이드 — clamp()/vw 유동 스케일 금지:
   각 브레이크포인트의 :root에서 스케일 변수(--fs-*, --gap-section 등)를
   고정값으로 다시 선언해 계단식으로 줄인다. 데스크톱-퍼스트라 넓은 블록이
   좁은 화면에도 상속되므로, 좁은 블록엔 그 폭에서 달라지는 값만 덮어쓴다.
   ① 노트북     @media (max-width: 1919px) — 1025~1919
   ② 태블릿     @media (max-width: 1024px) —  769~1024
   ③ 모바일 가로 @media (max-width:  768px) —  361~768
   ④ 모바일 세로 @media (max-width:  360px) —     ~360
   ========================================================================== */
:root {
  --black: #0d0d0d;
  --dark: #0d0d0f;
  --dark-2: #17171b;
  --card-dark: #1e1e22;
  --gray: #707070;
  --gray-2: #6b7380;
  --gray-3: #666;
  --light: #d9d9d9;
  --border-light: #e5e7eb;
  --content-max: 1680px; /* 콘텐츠 최대 폭 */
  /* 1920 초과 와이드 모니터: 배경은 화면 끝까지, 콘텐츠는 1680px 중앙 고정 */
  --side-pad: max(120px, calc(50vw - var(--content-max) / 2));
  --section-pad-y: 140px; /* 섹션 공통 상하 패딩 (원본 시안 100px → 여백 확대) */
  --navbar-h: 80px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ① 노트북 (1025~1919) — 값 = 1440 기준 축소값, 주석 = 원본 1920 데스크톱px */
@media (max-width: 1919px) {
  :root {
    --side-pad: 80px;       /* 120px */
    --section-pad-y: 100px; /* 140px */
    --gap-section: 64px;    /* 80px — 섹션 내부 큰 간격 */
    --pad-card: 32px;       /* 46px — 카드 패딩 */

    --fs-display: 60px;  /* 80px 대형 헤딩 */
    --fs-title: 24px;    /* 32px 소제목 */
    --fs-title-sm: 20px; /* 26px 항목 타이틀 */
    --fs-label-lg: 28px; /* 36px 카드 번호/서비스 라벨 */
    --fs-lead: 20px;     /* 28px 리드 문구/필 */
    --fs-body-lg: 18px;  /* 24px 버튼/FAQ 질문 */
    --fs-body-md: 16px;  /* 20px 본문 강조 */
    --fs-body: 16px;     /* 18px 본문 */
    --fs-caption: 14px;  /* 16px 캡션 */
  }
}

/* ② 태블릿 (769~1024) — 스케일 한 단계 축소 */
@media (max-width: 1024px) {
  :root {
    --side-pad: 48px;
    --section-pad-y: 64px;
    --gap-section: 48px;

    --fs-display: 40px;
    --fs-title: 22px;
    --fs-title-sm: 18px;
    --fs-label-lg: 20px;
    --fs-lead: 16px;
    --fs-body-lg: 16px;
    --fs-body-md: 16px;
    --fs-body: 15px;
    --fs-caption: 13px;
  }
}

/* ③ 모바일 가로 (361~768) */
@media (max-width: 768px) {
  :root {
    --navbar-h: 64px;
    --side-pad: 24px;
    --fs-display: 32px;
  }
}

/* ④ 모바일 세로 (~360) */
@media (max-width: 360px) {
  :root {
    --side-pad: 20px;
    --fs-display: 28px;
  }
}