feat(site): 재료 섹션을 실무 필터 3종으로 다시 만들고 푸터를 제거

푸터를 없애라는 지시가 반영돼 있지 않았다. .install-colophon 이 사실상
푸터였고, .install-grid 밖에 있어 padding-inline 을 못 받아 화면 왼쪽 끝에
붙어 있기까지 했다. 제거하고 저장소 링크는 헤더 nav 로 옮겼다.

재료 섹션은 "필터로 질감 만들기"(그레인/굴절/듀오톤)였고 화면에서 아무 말도
하지 않았다. 실무에서 손이 줄어드는 자리로 바꾼다.

- 글자 모양대로 생기는 스크림 — 흰 글자 대비 1.70:1 → 4.79:1 (AA 통과)
- 색각 이상 시뮬레이션 — 상태 배지 셋의 최소 색거리 82 → 2
- 구이(gooey) — 가로로 세어 덩어리 3개 → 1개

세 값 모두 화면을 캡처해 잰 것이다. 처음에는 데모보다 카피를 먼저 썼고,
그 결과 "2.1:1 → 12.4:1" 같은 재지 않은 숫자가 페이지에 실렸다. 전부 교체했다.

backdrop-filter 굴절 데모는 뺐다. feTurbulence 를 변위 지도로 써서 지도가
중립값(128)으로 수렴했고, scale 을 120 까지 올려도 채널차 2.96 이었다.
svg-filters.md 에 "변위 지도는 노이즈가 아니다" 라고 이미 적혀 있었는데
쓰기 전에 읽지 않았다.

섹션 끝의 note 도 삭제했다. color-interpolation-filters 를 명시했다는
문장은 방문자가 그것으로 할 수 있는 일이 없는 내부 자랑이었다.

스킬 내재화:
- svg-filters.md  실무 레시피 3종(스크림/색각/구이) + 구이가 붙는 문턱 계산
                  + feTurbulence 변위 지도 실패 기록
- antipatterns.md 데모를 만들기 전에 카피부터 쓰지 마라
                  + Playwright animations:'disabled' 가 끝 프레임을 찍는 함정

packages/skill/references/antipatterns.md

@@ -318,7 +318,17 @@ const buf = await sharp(f).extract(box).png().toBuffer();
 const s   = await sharp(buf).stats();   // 잘라낸 버퍼를 다시 물려야 한다
 ```
 
-**③ 눈으로 의심한 것이 실측에서 뒤집힐 수 있다.**
+**③ Playwright 의 `animations: 'disabled'` 는 애니메이션을 끝 상태로 보낸다.**
+움직이는 데모를 중간 프레임에서 재려고 `animation-play-state: paused` 로 세워 뒀는데,
+스크린샷 옵션이 그걸 무시하고 100% 지점을 찍었다. 그 프레임에서는 두 도형이 이미
+겹쳐 있어서 "필터가 안 붙는다" 는 잘못된 결론이 나왔다. 멈춘 프레임을 그대로
+찍으려면 그 옵션을 **빼야** 한다.
+
+> 여기서 더 중요한 결론이 나왔다 — **움직임으로 증명하려 들지 마라.**
+> 지나가는 프레임은 방문자도 놓치고 측정도 매번 다른 값을 준다.
+> 정지된 before/after 두 장이 더 정확하게 말한다.
+
+**④ 눈으로 의심한 것이 실측에서 뒤집힐 수 있다.**
 WebGL 판이 본문 뒤를 지나가는 화면을 보고 "대비가 죽었다" 고 판단해 캔버스를
 어둡게 만들려 했다. 스크린샷에서 글자 사이 빈 띠의 배경 휘도를 재보니
 최악 지점이 **9.83:1** — AAA(7:1)를 넘었다. 고칠 필요가 없었다.
@@ -329,6 +339,36 @@ WebGL 판이 본문 뒤를 지나가는 화면을 보고 "대비가 죽었다"
 
 ---
 
+### 데모를 만들기 전에 카피부터 쓰지 마라
+
+실측 사례. 필터 데모 넷을 만들면서 각 데모의 결론 문장을 먼저 썼다 —
+"대비 2.1:1 → 12.4:1", "하나로 이어진다", "배경을 휜다".
+나중에 재보니 **넷 중 셋이 거짓이었다.**
+
+| 화면에 쓴 말 | 실제 측정 |
+|---|---|
+| 대비 2.1:1 → 12.4:1 | 1.70:1 → **3.12:1** (AA 미달) |
+| 하나로 이어진다 | 필터를 켠 쪽도 **덩어리 3개** |
+| 배경을 휜다 | 평균 채널차 **1.66** (거의 변화 없음) |
+
+숫자를 지어낸 것이 아니라 **"이 정도 나오겠지" 를 적고 확인하지 않은 것**이다.
+결과는 같다 — 페이지에 거짓이 실렸다.
+
+순서를 뒤집어라.
+
+1. 데모를 만든다
+2. **잰다** (before/after 를 각각 캡처해 픽셀로)
+3. 잰 값으로 문장을 쓴다
+4. 값이 주장을 뒷받침하지 못하면 **문장이 아니라 데모를 고친다**
+
+4번을 지키면 카피가 저절로 구체적이 된다. 위 셋은 고친 뒤 이렇게 됐다 —
+"흰 글자 대비 1.70:1 → 4.79:1", "가로로 세어 덩어리 3개 → 1개",
+그리고 세 번째는 끝내 작동하지 않아 **섹션에서 뺐다.**
+
+> 작동하지 않는 데모를 남기고 문장만 다듬는 선택지는 없다.
+
+---
+
 ## 10. 자가 채점표
 
 | 카테고리 | 걸린 항목 | 조치 |
@@ -353,6 +393,7 @@ WebGL 판이 본문 뒤를 지나가는 화면을 보고 "대비가 죽었다"
 - [ ] 키보드만으로 전 인터랙션이 가능하고 포커스 링이 보인다
 - [ ] (한국어) 한글 폰트가 명시되어 있고 `word-break: keep-all`이 있다
 - [ ] 모든 섹션에서 제목→본문 간격이 **같은 값**이다 (0px 인 섹션이 하나도 없다)
+- [ ] 화면에 적은 수치는 **전부 그 화면을 캡처해 잰 값**이다 (추정치·기대치가 섞여 있지 않다)
 
 **판정**