/*
  목요일의 화원 — 디자인 토큰 (2026-10-06 재작업)
  값의 근거는 design.md "토큰과 예산"에 있다. 토큰은 이 파일에만 정의한다 —
  main.css 에서 같은 이름을 다시 정의하지 않는다(05 Q-25).

  배경은 유채·분홍빛(#f7ebe9)이다. 흰 라넌큘러스·작약 사진의 바탕이 이미 크림이라
  크림 종이 위에 놓으면 사진 가장자리가 사라졌다(이전 판 실측). 분홍은 흰 꽃을
  띄우고, 잎의 녹색(120°)과 보색에 가까워 강조가 한 곳이면 충분히 보인다.
*/
:root {
  /* ── 색 ──────────────────────────────────────────────
     강조는 잎 녹색 하나. 예약 버튼·링크·선택 상태에만 쓴다.
     분홍 바탕 위 녹색 글자 5.51:1, 녹색 버튼 위 흰 글자 6.42:1 (실측, scratch/contrast.mjs). */
  --surface: #f7ebe9;
  --surface-deep: #efd9d5; /* 사진 없는 아치 칸·띠. 먹 11.25:1, 녹색 4.75:1 */
  --surface-card: #fcf5f3; /* 푸터 카드. 바탕보다 한 단 밝게 */
  --ink: #2b2426;
  --ink-muted: #5f5052; /* 바탕 위 6.54:1 */
  --accent: #2f6b33;
  --accent-deep: #255629; /* hover */
  --accent-soft: #e4ece0; /* 녹색 위 글자 5.31:1 — 사진 없는 칸의 잎 표식 */
  --line: #e2cdc8;
  --arch-ring: rgb(43 36 38 / 0.08); /* 크림 사진이 분홍에 녹지 않게 아치 안쪽 1px */
  --on-accent: #ffffff;

  /* ── 타입 ────────────────────────────────────────────
     표제 리디바탕 400 한 웨이트, 본문 Pretendard. 리디바탕은 전자책 본문용이라
     대비가 낮고 1.25rem 이상에서 또렷하다 — 꽃 이름·표제에만 쓰고 본문에는 쓰지 않는다.
     "RIDIBatang"은 설치본 패밀리명(로컬 폴백), "RIDI Batang"은 jsdelivr 배포 CSS의 이름이다. */
  --font-display: "RIDI Batang", "RIDIBatang", "Nanum Myeongjo", serif;
  --font-body: "Pretendard", -apple-system, "Segoe UI", sans-serif;

  /* 표제는 작다(격자가 주인). 꽃 이름이 표제보다 크다 — 칸이 곧 내용이다. */
  --step-title: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --step-name: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  --step-h2: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  --step-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-body: 1rem;
  --step-small: 0.875rem; /* 14px — 한글 보조 13px 이상 */

  --track-display: -0.01em; /* 부리 표제, 2rem 이하라 -0.02em 까지 안 간다 */
  --track-body: 0;

  /* 본문 웨이트는 400 하나다. 가변 서브셋은 1440 첫 화면에서 349KB, 정적 400+600은 202KB 였다(실측).
     굵기 대신 크기·색·부리/고딕 차이로 위계를 낸다. 토큰 이름은 역할로 남긴다 */
  --weight-regular: 400;
  --weight-medium: 400;
  --weight-strong: 400;

  --leading-tight: 1.3;
  --leading-body: 1.7;

  --measure: 34em; /* 한글 본문 32~40자 */

  /* ── 간격·형태 ───────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: clamp(5rem, 3rem + 6vw, 9rem); /* 섹션 사이 */

  --gutter: clamp(1rem, 0.5rem + 2.4vw, 3rem);
  --container: 1280px;

  --radius: 12px; /* 버튼·카드·아치 아랫모서리 전부 이 값 하나 */
  /* 아치: 윗모서리만 폭의 절반. 꽃다발을 세워 둔 실루엣(둥근 머리, 곧은 줄기)과 같다 */
  --arch: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius);
  --arch-ratio: 4 / 5;

  /* ── 모션 ────────────────────────────────────────────
     첫 화면의 아치 칸이 한 번 순서대로 떠오른다(스태거). 그 뒤는 hover 만.
     감소 모션에서는 등장 애니메이션을 끄고 hover 색 변화만 남긴다. */
  --dur: 220ms;
  --dur-enter: 700ms;
  --stagger: 70ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── 모바일 하단 행동 바 ─────────────────────────────
     env() 는 viewport-fit=cover 가 있어야 값이 들어온다(index.html meta). */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --action-bar-h: 4.5rem;
}

@media (prefers-contrast: more) {
  :root {
    --ink-muted: #3f3537;
    --line: #c9aea8;
  }
}