/* slowtravelkorea v0 — 규격 정본.
 *
 * 이 파일 하나가 글자 크기·행간·여백·카드·단추·터치 자리의 정본이다.
 * v0 의 다른 어떤 파일에도 px 을 손으로 적지 않는다. 여기 없는 값은 v0 에 없는 값이다.
 *
 * 왜 이렇게 묶었나 — 2026-11-03 라이브 실측(notes/01-audit-360.md)에서 360px 기준
 * 글자 크기 15종, 세로 여백 35종(그중 22종이 4의 배수 아님), 행간 9종 이상에
 * line-height:normal 인 요소 89개가 나왔다. 값이 많아서 흐트러진 것이 아니라
 * 정한 적이 없어서 흐트러진 것이다. 그래서 먼저 값을 닫는다.
 *
 * 색 다섯은 바꾸지 않는다. CEO 가 묶어 준 것이고 v0 의 유일한 계승분이다.
 */

:root {
  /* ── 색 — 다섯 값. 이 다섯 밖의 색을 쓰지 않는다 ───────────────────────── */
  --ink: #1e2a30;    /* 글자, 진한 면 */
  --prim: #0e7c7b;   /* 주된 행동, 강조 */
  --accent: #e8743b; /* 값·지금 사는 자리에만. 한 화면에 한 번 */
  --bg: #f4f3ef;     /* 바탕 */
  --line: #e7e7e3;   /* 선, 테두리 */

  /* 다섯 색에서 끌어낸 것만 더 쓴다. 새 색이 아니라 투명도다. */
  --ink-70: color-mix(in srgb, var(--ink) 70%, transparent); /* 보조 설명 */
  --ink-55: color-mix(in srgb, var(--ink) 55%, transparent); /* 메타, 각주 */
  --surface: #ffffff;                                        /* 카드 바닥 */
  --prim-dark: color-mix(in srgb, var(--prim) 82%, var(--ink)); /* 눌린 단추 */
  --prim-wash: color-mix(in srgb, var(--prim) 8%, var(--bg));   /* 옅은 면 */

  /* ── 여백 — 4px 단위, 8px 리듬. 쓰는 값은 아홉 개뿐 ───────────────────── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* 절 사이 — 폰 48, 데스크톱 96. 이 둘만 쓴다 */
  --section-y: var(--s7);
  /* 화면 좌우 — 폰 20, 데스크톱 32. 글이 가장자리에 붙지 않게 하는 최소치 */
  --page-x: 20px;
  /* 본문 최대 폭 — 글줄이 68자를 넘으면 눈이 다음 줄 첫머리를 놓친다 */
  --measure: 68ch;
  /* 판 최대 폭 */
  --max: 1120px;

  /* ── 글자 크기 — 7단계. 폰에서 데스크톱까지 이어서 큰다 ────────────────
   * clamp(폰값, 사이, 데스크톱값). 중간 폭에서 끊기지 않게 vw 로 잇는다.
   * 가운데 항은 눈대중이 아니라 양 끝을 잇는 직선으로 푼 값이다 —
   * 기울기 = (데스크톱값 - 폰값) / (1440 - 360), rem 항은 360px 에서 맞춘다.
   * test_tokens.py 가 양 끝을 다시 재서 어긋나면 실패로 떨어뜨린다.
   *
   * 15종을 7종으로 줄였다. 단계 사이를 360px 에서 최소 2px 벌렸다 —
   * 라이브가 17·18·19 를 동시에 쓰다 체계를 잃은 자리라 1px 차이를 남기지 않는다.
   * 본문을 16px 아래로 내리지 않는다 — iOS 사파리가 입력칸에서 화면을 확대한다. */
  --t-display: clamp(32px, 1.58333rem + 1.85185vw, 52px); /* H1. 화면에 하나 */
  --t-h2: clamp(26px, 1.45833rem + 0.74074vw, 34px);      /* 절 제목 */
  --t-h3: clamp(21px, 1.25rem + 0.27778vw, 24px);         /* 카드 제목 */
  --t-lead: clamp(18px, 1.08333rem + 0.18519vw, 20px);    /* 절 머리 설명문 */
  --t-body: clamp(16px, 0.97917rem + 0.09259vw, 17px);    /* 본문 */
  --t-small: 14px;                                        /* 메타, 각주, 표 안 */
  --t-micro: 12px;                                        /* 머리글(eyebrow), 꼬리표 */

  /* ── 행간 — 3종. normal 을 쓰지 않는다 ─────────────────────────────── */
  --lh-tight: 1.15; /* display, h2 */
  --lh-snug: 1.35;  /* h3, 단추, 표 칸 */
  --lh-loose: 1.6;  /* 본문, lead, small */

  /* ── 자간 — 큰 글자는 좁히고 작은 대문자는 벌린다 ──────────────────── */
  --ls-display: -0.02em;
  --ls-h2: -0.01em;
  --ls-micro: 0.08em;

  /* ── 굵기 — 3종 ───────────────────────────────────────────────────── */
  --w-reg: 400;
  --w-med: 500;
  --w-bold: 700;

  /* ── 모서리 ────────────────────────────────────────────────────────── */
  --r-sm: 6px;  /* 꼬리표, 입력칸 */
  --r-md: 10px; /* 단추 */
  --r-lg: 14px; /* 카드 */

  /* ── 터치 자리 — 44px 이 바닥이다. 지금 라이브 바닥글 링크가 22px 다 ─── */
  --tap-min: 44px;
  --btn-h: 52px;     /* 폰 단추. 엄지로 안 빗나가는 높이 */
  --btn-h-sm: 44px;  /* 데스크톱, 보조 단추 */
  --btn-px: var(--s5);

  /* ── 카드 ──────────────────────────────────────────────────────────── */
  --card-p: var(--s5);     /* 폰 24 */
  --card-gap: var(--s4);   /* 카드 사이 16 */

  /* ── 판 짜기 — 칸이 몇 개 들어가는지는 폭이 정하게 둔다 ───────────────
   * 칸 수를 미디어 쿼리로 세지 않고 auto-fit 에 최소 폭만 준다.
   * 260 은 카드 안쪽 여백 24 둘을 빼고도 본문 16px 이 20자 들어가는 폭이다. */
  --col-min: 260px;
  /* 맨 위 줄 높이. 단추 하나가 터치 바닥을 지키고 위아래 12 가 남는 값 */
  --nav-h: 68px;

  /* ── 선과 그림자 — 그림자는 한 종만. 떠 보이는 것은 카드뿐이다 ──────── */
  --border: 1px solid var(--line);
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
            0 8px 24px color-mix(in srgb, var(--ink) 5%, transparent);

  /* ── 움직임 — 한 종 ────────────────────────────────────────────────── */
  --ease: 160ms cubic-bezier(0.2, 0, 0, 1);
}

/* 600px 부터 — 글 두 칸이 들어가는 폭 */
@media (min-width: 600px) {
  :root {
    --page-x: 28px;
    --card-p: var(--s6);
    --card-gap: var(--s5);
  }
}

/* 960px 부터 — 데스크톱. 절 사이를 96 으로 벌린다 */
@media (min-width: 960px) {
  :root {
    --page-x: 32px;
    --section-y: var(--s9);
    --btn-h: var(--btn-h-sm);
  }
}

/* 손가락이 아니라 화살표로 쓰는 기계에서는 터치 바닥을 낮춘다.
 * 폰에서만 44 를 지키면 데스크톱 바닥글이 쓸데없이 벌어진다.
 *
 * 폭 조건을 같이 거는 이유 — hover 와 pointer 만 보면 헤드리스 브라우저와
 * 몇몇 안드로이드 기기가 360px 폭에서도 fine 으로 답한다. 2026-11-03
 * test_landing.py 1회차에서 360px 바닥글 링크가 32px 로 떨어져 걸렸다.
 * 좁은 화면에서는 무엇이 답하든 44 를 지킨다. */
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  :root { --tap-min: 32px; }
}

/* 움직임을 끄기로 한 사람에게는 끈다 */
@media (prefers-reduced-motion: reduce) {
  :root { --ease: 1ms linear; }
}