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 를 무시 / 눈보다 숫자)

apps/site/src/components/Materials.astro

@@ -89,7 +89,7 @@ const { c } = Astro.props;
 </svg>
 
 <style>
-  .mat-lead { margin-block: var(--space-4) var(--space-6); }
+  .mat-lead { margin-bottom: var(--space-6); }
   .mat-note { margin-top: var(--space-5); font-size: var(--step-0); }
 
   .stage {

apps/site/src/components/Metrics.astro

@@ -54,7 +54,7 @@ const rest = c.items.filter((m) => !m.feature);
 </section>
 
 <style>
-  .metrics-lead { margin-block: var(--space-4) var(--space-7); max-width: 30em; }
+  .metrics-lead { margin-bottom: var(--space-7); max-width: 30em; }
 
   .figures {
     max-width: 1180px;

apps/site/src/components/Pipeline.astro

@@ -56,7 +56,7 @@ const { c } = Astro.props;
 <style>
   /* 컨테이너는 넓어도 읽는 것은 measure 안에 둔다 */
   .pipeline-lead {
-    margin-bottom: var(--space-6);
+    margin-bottom: var(--space-5);
     max-width: var(--measure);
   }
   .brief { max-width: var(--measure); }
@@ -140,6 +140,10 @@ const { c } = Astro.props;
      선은 장식이 아니라 순서 그 자체다. 정거장의 위치가 번호를 대신한다.
      ---------------------------------------------------------- */
   .spine {
+    /* 정거장의 세로 리듬은 여기 한 곳에서 나온다.
+       전에는 패딩이 space-6, 마커 위치가 space-4 로 각자 적혀 있어서
+       원이 제목보다 24px 위에 떠 있었다. 값을 각자 쓰면 이렇게 어긋난다. */
+    --stop-pad: var(--space-5);
     list-style: none;
     margin: 0;
     padding: 0 0 0 var(--space-5);
@@ -149,8 +153,8 @@ const { c } = Astro.props;
     content: "";
     position: absolute;
     left: 5px;
-    top: var(--space-4);
-    bottom: var(--space-4);
+    top: var(--stop-pad);
+    bottom: var(--stop-pad);
     width: 1px;
     background: var(--line-strong);
   }
@@ -162,10 +166,11 @@ const { c } = Astro.props;
        섹션이 화면에 보이는 구간(2393px)의 4분의 1이라, 조금만 스크롤해도
        여섯 게이트를 다 지나쳐 버렸다.
 
-       space-6 으로 늘렸더니 sticky 구간이 1226px, 게이트당 204px 이 됐다.
-       휠 한 번(100~150px)에 게이트 하나가 지나가 여전히 과민했다.
-       space-7 이면 게이트당 300px 남짓 — 휠 두세 번에 하나다. */
-    padding-block: var(--space-7);
+       space-7 까지 올렸더니 이번엔 정거장 사이가 224px 로 벌어져
+       목록이 흩어져 보였다 — 여섯 개가 한 목록으로 안 읽힌다.
+       읽기 간격과 스크롤 구간은 같은 손잡이가 아니다.
+       간격은 읽기에 맞추고, 스크롤 구간은 스파인 뒤 여백(.after)에서 번다. */
+    padding-block: var(--stop-pad);
     display: grid;
     grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
     gap: var(--space-5);
@@ -181,7 +186,7 @@ const { c } = Astro.props;
     content: "";
     position: absolute;
     left: calc(var(--space-5) * -1);
-    top: calc(var(--space-4) + 0.55em);
+    top: calc(var(--stop-pad) + 0.55em);
     width: 11px;
     height: 11px;
     border-radius: var(--radius-sm);
@@ -224,8 +229,9 @@ const { c } = Astro.props;
   .after {
     margin-top: var(--space-7);
     max-width: var(--measure);
-    /* 마지막 게이트를 통과할 스크롤이 남아 있어야 한다 */
-    padding-bottom: 20dvh;
+    /* 여기가 스크롤 구간을 버는 자리다. 정거장 간격을 벌리는 대신
+       마지막 정거장 뒤에 여운을 둔다 — 스파인이 끝난 뒤라 빈 공간으로 읽히지 않는다 */
+    padding-bottom: 62dvh;
   }
 
   @media (max-width: 780px) {

apps/site/src/components/Showcase.astro

@@ -35,7 +35,7 @@ const shots = [shotCoffee, shotSaas];
 </section>
 
 <style>
-  .showcase-lead { margin-block: var(--space-4) var(--space-6); }
+  .showcase-lead { margin-bottom: var(--space-6); }
 
   .cascade {
     display: grid;

apps/site/src/styles/base.css

@@ -181,9 +181,24 @@ h2 { font-size: var(--step-3); }
 }
 h3 { font-size: var(--step-1); }
 
+
 p { margin: 0 0 var(--space-3); text-wrap: pretty; }
 p:last-child { margin-bottom: 0; }
 
+/* 제목 다음에 오는 것은 반드시 떨어진다.
+   h2 는 margin: 0 이고 p 도 margin-top: 0 이라 제목과 본문이 그대로 붙었다.
+   섹션마다 0 이거나 24px 로 갈려 있었다 — 값을 각자 붙이면 이렇게 된다.
+
+   `:where()` 로 감싸면 특이도가 0 이라 위의 `p` 규칙에 진다. 실제로 한 번 그렇게
+   써서 아무 효과가 없었다. 특이도를 갖추고, `p` 뒤에 둔다.
+
+   제목을 `.head` 로 감싼 섹션에서는 인접 형제가 끊긴다 — 수치 섹션이 그래서
+   혼자 0px 이었다. 제목 묶음도 같은 규칙에 넣는다. */
+h1 + *,
+h2 + *,
+h3 + *,
+.head + * { margin-top: var(--space-4); }
+
 .lead { font-size: var(--step-1); color: var(--ink-muted); }
 
 .eyebrow {