/* ============================================================
   02. 홈페이지(PC) 디자인 토큰  ―  "데스크톱에서의 크기·간격"
   ------------------------------------------------------------
   글자 크기, 여백, 모서리, 그림자 등 "치수"를 여기서 정합니다.
   모바일에서는 03-tokens-mobile.css 가 이 값들만 갈아끼웁니다.
   → 그래서 모바일용 CSS를 따로 또 쓸 필요가 없습니다.
   ============================================================ */

[data-site="머니콜"] {

  /* ---------- 글자 크기 (당근 실측 기준) ---------- */
  --fs-display: 52px;   /* 히어로 제목 — 당근 52px */
  --fs-h1:      42px;   /* 서브페이지 제목 */
  --fs-h2:      42px;   /* 섹션 제목 — 당근 42px */
  --fs-h3:      26px;   /* 소제목 — 당근 26px */
  --fs-h4:      20px;
  --fs-stat:    48px;   /* 통계 숫자 — 당근 48px */
  --fs-hero-stat: 60px;  /* 히어로 큰 숫자 (건수·금액) */
  /* 히어로 제목 — 이 화면의 주인공 (당근 실측 52px)
     ★ 850~1130px 구간에서는 화면 폭에 따라 스르르 줄어듭니다.
       고정 52px 로 두면 그 구간에서 왼쪽 글 칸이 587px 아래로 좁아져
       제목이 3~4줄로 터집니다. 계단식으로 뚝 떨어뜨리는 대신
       폭에 비례해 줄여서 크기가 바뀌는 순간이 눈에 띄지 않게 합니다.
       (4.4vw = 850px 화면에서 38px · 1180px 부터 52px 로 고정)
       ※ vw 는 스크롤바까지 포함한 폭이라 실제 내용 폭보다 15px쯤 큽니다.
         그만큼을 감안해 계수를 여유 있게 잡았습니다. */
  --fs-hero-title: clamp(38px, 4.4vw, 52px);
  --fs-lead:    20px;
  --fs-body:    18px;   /* 본문 — 당근 18px */
  --fs-sm:      16px;   /* 보조 설명 */
  --fs-xs:      13px;   /* 캡션 */
  --fs-tag:     12px;   /* 태그 — 당근 12px */
  --fs-label:   18px;   /* 섹션 주황 라벨 — 당근 실측 18px */

  /* ---------- 줄간격 / 자간 / 굵기 ----------
     ★ 당근은 줄간을 딱 두 가지만 씁니다: 큰 글씨 1.35 / 작은 글씨 1.50 */
  --lh-tight:  1.35;    /* 제목·큰 글씨 — 당근 실측 */
  --lh-snug:   1.35;
  /* 당근 본문은 1.35지만, 중장년 가독성을 위해 당근의 '작은 글씨' 값인 1.5를 씁니다 */
  --lh-normal: 1.5;
  /* ★ 당근은 자간을 건드리지 않습니다. 한글은 자간을 좁히면 급격히 읽기 어려워집니다 */
  --ls-tight:  normal;
  --ls-wide:   normal;

  /* ★ 당근은 굵기를 400 아니면 700, 두 가지만 씁니다.
       500·600·800을 쓰지 않습니다. 섞으면 당근 느낌이 깨집니다. */
  --fw-regular: 400;
  --fw-medium:  400;
  --fw-bold:    700;
  --fw-black:   700;

  /* ---------- 간격 (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;

  /* ---------- 레이아웃 ---------- */
  /* 당근 실측 구조:
     바깥 틀 1280px (좌우 여백 24px) 안에서
     콘텐츠는 960px 로 한 번 더 좁혀서 중앙에 둡니다.
     이 "이중 폭"이 당근 특유의 여유로운 느낌을 만듭니다. */
  --container-max: 1280px;
  /* 단락 기준 폭 — 모든 섹션의 좌우 끝을 이 값에 맞춥니다.
     상자 없는 섹션은 내용이, 흰 상자가 있는 섹션은 상자 바깥 끝이 이 폭입니다. */
  --content-w:     calc(1280px - 2 * 24px);
  --content-max:   960px;
  --container-x:   24px;
  --section-y:     120px;   /* 당근 실측 120px */
  --gap-grid:      28px;    /* 카드 사이 간격 */
  --grid-cols:     3;       /* 카드 기본 열 수 */

  /* 후기 사진 카드 — 한 번에 몇 장 보일지.
     소수점(예: 1.2)을 쓰면 다음 장이 살짝 걸쳐 보여
     "더 있다"는 신호가 됩니다. */
  --reviews-cols:  3;

  /* ---------- 모양 ----------
     당근 톤: 둥글기 12px 기준, 그림자는 거의 쓰지 않고
     연회색 면(--surface-alt)으로 영역을 구분합니다. */
  /* ★ 당근 실측: 버튼 6px · 태그 4px · 번호 8px · 카드 12~16px
     버튼은 알약(pill)이 아닙니다. 가장 자주 틀리는 부분입니다. */
  --radius-tag:  4px;
  --radius-btn:  6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  /* 케이뱅크 실측값 — 화면이 커지면 모서리도 같이 커집니다 */
  --radius-xl:   clamp(20px, 1.67vw, 32px);
  --radius-pill: 999px;   /* 원형 아이콘 상자에만 씁니다 */
  --border-w:    1px;

  /* ★ 당근은 그림자를 쓰지 않습니다.
       전체 페이지를 훑어도 그림자가 걸린 요소가 사실상 0건입니다.
       영역 구분은 연회색 면(--surface-alt)과 얇은 선(--line)으로만 합니다.
       그래서 1·2단계는 '없음'입니다. 3단계는 모바일 메뉴처럼
       화면 위로 떠야 하는 것에만 예외적으로 씁니다. */
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 0 8px 24px rgba(var(--shadow-rgb), .12);

  /* ---------- 부품 치수 ---------- */
  --header-h:     76px;   /* 헤더 높이 (1단 : 왼쪽 로고 / 오른쪽 메뉴)
                             ★ 실제 헤더 높이보다 작으면 상단 이벤트 띠가 고정 헤더
                               뒤로 숨어 안 보입니다. 헤더 구조를 바꾸면 같이 맞추세요. */
  --logo-h:       36px;
  --nav-gap:      32px;
  --nav-fs:       17px;

  /* 당근 실측: 큰 버튼 58px/20px, 보통 48px/18px, 좌우여백 18px+
     글자는 진한 색이라 크기와 무관하게 대비 5.8:1 이 유지됩니다. */
  --btn-h:        58px;
  --btn-px:       28px;
  --btn-fs:       20px;
  --btn-h-sm:     48px;
  --btn-fs-sm:    19px;

  --card-p:       32px;   /* 카드 안쪽 여백 */
  --float-size:   64px;   /* 우하단 플로팅 버튼 */
  --float-offset: 28px;

  --page-hero-h:  190px;  /* 서브페이지 상단 배너 높이 */
  --stat-p:       36px;   /* 통계 바 안쪽 여백 */

  /* ══════════ 모션 ══════════
     ★ 규칙 ★
     시간과 곡선은 전부 여기서만 정합니다.
     부품 CSS 안에서 0.3s 같은 숫자나 cubic-bezier(...) 를 직접 쓰지 마세요.
     한 군데서만 고치면 사이트 전체 손맛이 같이 바뀌어야 합니다.

     ─ 시간을 다섯 단계로만 나눈 이유 ─
     사람은 "얼마나 큰 것이 움직이는가"에 따라 기대하는 속도가 다릅니다.
     작은 것이 느리면 굼떠 보이고, 큰 것이 빠르면 튄 것처럼 보입니다. */
  --dur-instant: .12s;   /* 누를 때 — 손가락보다 빨라야 "반응했다"고 느낍니다 */
  --dur-fast:    .2s;    /* 색·테두리처럼 자리를 안 옮기는 변화 */
  --dur-base:    .34s;   /* 펼침·접힘·회전 */
  --dur-slow:    .55s;   /* 큰 덩어리가 자리를 옮길 때 */
  --dur-enter:   .95s;   /* 스크롤에 맞춰 나타날 때 — 천천히 떠오르게 */
  --dur-xslow:   1.1s;   /* 칸이 넓어졌다 좁아지는 것처럼 큰 면이 천천히 움직일 때 */
  --dur-xxslow:  1.7s;   /* 아코디언처럼 아주 천천히 펼쳐져야 하는 것 */
  --delay-text:  .5s;    /* 칸이 펼쳐지기 시작하고 이만큼 뒤에 글자가 나타납니다.
                            글 상자 폭은 --open-w 로 고정해 두어, 이 시점에 나와도
                            줄바꿈이 다시 일어나지 않습니다 */

  /* ─ 곡선은 네 개면 충분합니다. 늘리면 사이트가 산만해집니다 ─ */
  --ease:        cubic-bezier(.22, .61, .36, 1);   /* 기본 */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);      /* 확 나갔다 살며시 안착 */
  /* ★★ 쫀득함의 핵심입니다.
     끝에서 목표를 살짝 지나쳤다가 되돌아옵니다(1.4 부분).
     실제 물체가 멈출 때처럼 보여서 "탄력 있다"고 느껴집니다.
     ※ 자리를 옮기는 것(transform)에만 쓰세요.
       색에 쓰면 색이 넘어갔다 돌아와 번쩍입니다. */
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);     /* 갔다가 돌아오는 왕복 */

  /* ─ 움직이는 거리·크기도 토큰으로 ─ */
  --stagger: 95ms;   /* 여러 개가 줄줄이 나타날 때 한 칸 간격 */
  --lift:    -3px;   /* 마우스를 올렸을 때 떠오르는 높이 */
  --press:   .97;    /* 눌렀을 때 오그라드는 비율 */
}