fix(site): 제목-본문 간격을 전역 하나로 통일하고 스파인 리듬을 토큰화

제목과 본문이 붙어 있던 문제를 고친다.

- h2{margin:0} + p{margin-top:0} 이라 제목 다음 간격이 0px 이었다.
  섹션마다 각자 margin-top 을 붙여 어떤 곳은 0, 어떤 곳은 24px 로 갈려 있었다.
  base.css 에서 한 번만 정하고 각 섹션의 margin-top 오버라이드를 걷어냈다.
- :where() 로 감싼 첫 시도는 특이도 0 이라 p 규칙에 져서 무효였다.
  특이도를 갖추고 p 뒤로 옮겼다.
- 제목을 .head 로 감싼 수치 섹션은 인접 형제가 끊겨 혼자 0px 이었다.
  .head 도 규칙에 포함했다.

파이프라인 정거장 간격이 224px 로 벌어져 목록이 흩어져 보이던 문제도 고친다.

- 읽기 간격과 sticky 스크롤 구간을 같은 값으로 맞추려던 것이 원인이다.
  간격은 --stop-pad(space-5)로 되돌리고, 스크롤 구간은 .after 뒤 여백으로 옮겼다.
  게이트당 237px 확보 — 과민 반응 기준(200px) 위다.
- 마커 원의 top 이 space-4, 패딩이 space-6 로 따로 적혀 있어 원이 제목보다
  24px 위에 떠 있었다. 셋 다 --stop-pad 를 보게 했다.

3D 판 위 본문 대비는 실측 결과 최저 9.83:1 로 AAA 를 넘어 손대지 않았다.

스킬 내재화:
- tokens.md  제목 다음 간격 SSOT, :where() 특이도 함정, 리듬은 지역 토큰으로
- motion.md  읽기 간격과 스크롤 구간은 같은 손잡이가 아니다
- antipatterns.md  재는 도구가 거짓말하는 세 방식
  (reveal 중 측정 / sharp stats 가 extract 를 무시 / 눈보다 숫자)

packages/skill/references/tokens.md

@@ -126,6 +126,52 @@
 - 섹션 간격은 **본문 간격의 4배 이상**. 좁으면 페이지가 뭉개진다
 - 요소를 정렬할 때 **간격이 아니라 정렬선**을 먼저 맞춰라
 
+### 제목 다음 간격은 전역에서 한 번 정한다
+
+`h2 { margin: 0 }` 리셋과 `p { margin: 0 0 X }` 를 같이 쓰면 **제목과 본문이 붙는다.**
+위쪽 여백이 양쪽 다 0 이기 때문이다. 눈에 띄게 깨져 보이지만, 섹션을 하나씩 만들다 보면
+어떤 섹션에는 `.mat-lead { margin-block: var(--space-4) ... }` 처럼 손으로 붙게 되고
+어떤 섹션에는 안 붙는다. 실측에서 한 페이지 안에 0px 인 섹션 둘과 24px 인 섹션 셋이
+공존했다. **간격이 컴포넌트마다 다르면 그건 SSOT 가 아니다.**
+
+```css
+p { margin: 0 0 var(--space-3); }
+
+/* 제목 다음에 오는 것은 반드시 떨어진다 — 여기 한 곳에서만 정한다 */
+h1 + *,
+h2 + *,
+h3 + *,
+.head + * { margin-top: var(--space-4); }
+```
+
+세 가지 함정이 있다.
+
+1. **`:where()` 로 감싸면 특이도가 0 이 되어 위의 `p` 규칙에 진다.**
+   `:where(h2) + :where(.lead)` 는 0-0-0, `p` 는 0-0-1 이다. 아무 효과 없이 조용히 무시된다.
+   특이도를 갖추고, 캐스케이드에서 `p` **뒤에** 둬라.
+2. **제목을 `<div class="head">` 로 감싼 섹션에서는 인접 형제가 끊긴다.**
+   그 섹션만 혼자 0px 이 된다. 제목 묶음 클래스도 같은 규칙에 넣어라.
+3. **섹션이 각자 `margin-top` 을 또 붙이면 전역이 무력해진다.**
+   위쪽은 전역이, 아래쪽만 섹션이 정한다 — `margin-block: A B` 가 아니라 `margin-bottom: B`.
+
+### 반복되는 리듬은 값이 아니라 토큰 하나로
+
+같은 리듬을 세 곳에서 쓰면 세 곳이 따로 논다. 실측 사례 — 타임라인에서
+정거장 패딩은 `--space-5`, 마커 원의 `top` 은 `calc(var(--space-4) + 0.55em)`,
+연결선의 `top/bottom` 은 `--space-4` 로 각자 적혀 있었다. 패딩만 한 단계 올리자
+**원이 제목보다 24px 위에 떠 버렸다.**
+
+```css
+.spine {
+  --stop-pad: var(--space-5);          /* 리듬의 출처는 한 곳 */
+}
+.spine::before { top: var(--stop-pad); bottom: var(--stop-pad); }
+.stop          { padding-block: var(--stop-pad); }
+.stop::before  { top: calc(var(--stop-pad) + 0.55em); }
+```
+
+규칙: **같은 값을 두 번 이상 적게 되면 그 순간 지역 토큰으로 올려라.**
+
 ---
 
 ## 3-b. 형태 (radius·선)