/* 홈페이지 v3 토큰 — DESIGN 2026-10-10. MARKETING 이 web/landing-v3/ 로 복사해 쓴다(v3 는 web/landing/styles.css 를 안 고친다).
   ⛔ 색은 우리 토큰만(사용자 2026-10-10 「색상은 우리 색상만으로」, PM 전달) — 값은 design/canvas/_tokens.css(가지 feat/full-design)
      와 한 글자도 다르지 않게 옮겼다. 새 색을 여기서 짓지 않는다. 운영 v2 의 --bg #fcf9f5·--ink #0f1a22 는 앱 토큰과 다른 값이라 v3 에서 버린다.
   ⛔ 짜임(크기·모서리·여백·그림자)만 레퍼(HoneyBook·Alden·August·Function)에서 가져왔다. 옮김표: design/homepage/v3/디자인판.md 「토큰 옮김」. */
:root {
  /* 색 — _tokens.css 그대로 */
  --canvas: #FAF7F2;        /* 바탕(띠 A) */
  --surface: #FFFFFF;       /* 제품 화면 무대·카드 */
  --surface-soft: #F3EEE6;  /* 띠 B — Alden 의 「흰↔크림 번갈이」 자리 */
  --surface-sunk: #EBE3D6;  /* ⚠ 이 위에는 --muted·--accent 작은 글자 금지(4.38·4.30 대 1) */
  --hairline: #E5DED2;
  --ink: #1C1A17;           /* 제목 */
  --body: #46423B;          /* 본문 */
  --muted: #6E675E;         /* 안심 글자·캡션(canvas 5.22 · soft 4.83) */
  --accent: #0F766E;        /* 단추 하나 · 탭 밑줄 · 링크 */
  --accent-press: #0B5A54;
  --accent-soft: #E3EFEC;
  --on-accent: #FFFFFF;     /* accent 위 5.47 */
  --structural: #14213D;    /* 어두운 띠(끝 단추 구역) — 그 위 흰 글자 15.97 */

  /* 글꼴 — 세리프는 후보 고르기 전 자리. 외부 호출 0: 고른 woff2 를 landing-v3/fonts/ 에 두고 @font-face 로만 부른다 */
  --serif: "Manoa Serif", "Noto Serif KR", "AppleMyungjo", "Batang", serif;
  --sans: Pretendard, "Pretendard Variable", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;

  /* 글자 크기 — 레퍼 넷의 공통 사다리(16 바탕, 제목은 세리프 굵기 400~500) */
  --fs-display: clamp(36px, 4.4vw, 60px);   /* 첫 화면 제목 한 줄 — HoneyBook 56–64 · Alden 56 */
  --fs-h2: clamp(28px, 3vw, 44px);          /* 구역 제목 — 레퍼 heading-lg 45–48 */
  --fs-h3: clamp(20px, 1.7vw, 24px);
  --fs-lead: clamp(17px, 1.4vw, 20px);      /* 한 줄 설명 */
  --fs-body: 17px;                          /* 앱 body 와 같게 */
  --fs-small: 14px;                         /* 안심 글자 */
  --lh-display: 1.15;                       /* 한글은 레퍼(1.0–1.05)보다 넉넉히 — 받침이 붙는다 */
  --lh-body: 1.6;
  --track-display: -0.02em;                 /* 레퍼 −0.03~−0.05em 는 라틴 값 — 한글 세리프는 −0.02 까지만 */
  --fw-display: 500;                        /* 레퍼 제목 굵기 400. ⛔ v2 의 800 을 쓰지 않는다 */

  /* 모서리 — 세 값만(v2 는 14·16·22 가 섞였다) */
  --r-card: 16px;        /* Alden·August 카드 */
  --r-media: 24px;       /* 제품 화면·사진 — Alden 이미지 24 */
  --r-pill: 999px;       /* 단추·탭만 */

  /* 여백 — 8 바탕 */
  --sec-gap: clamp(64px, 7vw, 96px);        /* 레퍼 64–96. v2 140/96 보다 좁혀 첫 화면에 제품이 걸리게 */
  --wrap: 1200px;                            /* 레퍼 넷 다 1200(Function 1280) */
  --gutter: clamp(16px, 4vw, 40px);
  --card-pad: clamp(24px, 3vw, 40px);

  /* 그림자 — 제품 화면 한 곳만. 카드는 그림자 0(테두리·바탕 차이로만) */
  --sh-product: 0 8px 24px rgba(28, 26, 23, .06);   /* HoneyBook 제품 화면 값을 --ink 색으로 */

  /* 움직임 — 표는 디자인판.md 「움직임」 */
  --t-fast: .15s;   /* 단추·링크 */
  --t-tab: .2s;     /* 기능 탭 화면 바뀜 */
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-tab: 0s; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}