refactor(site): 섹션 순서를 성격별로 묶고 분량을 우선순위에 맞춘다

지적마다 그 섹션만 키운 결과 15.5 화면이 됐고, 기능 설명과 증거가 번갈아 나와
지금 무슨 이야기를 듣고 있는지 알 수 없었다.

순서를 네 묶음으로 정리했다.
  ① 무엇인가      히어로 · 파이프라인
  ② 무엇을 아는가  SVG 필터 · 한글 조판
  ③ 정말 그런가    사례 · 수치 · 자기 감사 · 규칙
  ④ 행동          설치

분량:
- SVG 필터 3.1 → 2.1 화면. 스킬 문서에 있을 구현 디테일을 페이지에 옮겨 적고
  있었다. 데모는 넷 다 두고 설명만 줄였다.
- .stage 의 padding 에 --wide-pad 를 쓰고 있었다. 이 토큰은 페이지 그리드의
  바깥 칼럼용(최대 10rem)이라 1440px 에서 폭 320px 이 사라졌고, 그만큼 설명
  칸이 170px 로 눌려 여덟 자마다 줄이 바뀌었다.
- 자기 감사 항목 13개 → 6개. 나열이 밀도를 대신하고 있었다.

파이프라인 끝의 마무리 문장을 삭제했다. sticky 게이트가 끝까지 돌 스크롤
구간이 필요해서 만든 자리에 문장을 채운 것이라, 읽는 사람에게는 앞뒤 없이
튀어나온 문장이었다. 여백이 필요하면 여백을 만든다.

전체 15.5 → 13.5 화면.

apps/site/src/pages/index.astro

@@ -13,14 +13,27 @@ import { ko as c } from "../i18n/content";
 ---
 
 <Base lang="ko" title={c.meta.title} description={c.meta.description}>
+  {/*
+    순서는 세 묶음이다. 한동안 기능과 증거가 번갈아 나와서
+    (사례 → 필터 → 수치 → 감사 → 조판 → 규칙) 읽는 사람이 지금 무슨 이야기를
+    듣고 있는지 놓쳤다. 같은 성격끼리 붙인다.
+
+      ① 무엇인가   히어로 · 파이프라인
+      ② 무엇을 아는가  SVG 필터 · 한글 조판
+      ③ 정말 그런가   사례 · 수치 · 자기 감사 · 규칙
+      ④ 행동       설치
+  */}
   <Hero c={c.hero} ui={c.ui} />
   <Pipeline c={c.pipeline} />
-  <Showcase c={c.showcase} />
+
   <Materials c={c.materials} />
+  <Typography c={c.typography} />
+
+  <Showcase c={c.showcase} />
   <Metrics c={c.metrics} />
   <Preflight c={c.preflight} />
-  <Typography c={c.typography} />
   <Rules c={c.rules} />
+
   <Install c={c.install} ui={c.ui} />
 
 </Base>