조판 섹션을 전면 개편한다 — 주장과 데모를 맞춘다

h2 '라틴 기준으로 만든 도구는 한글에서 멈춘다' 는 무엇이 어떻게 멈추는지
말하지 않았다. 그리고 데모가 그 주장을 증명하지 못했다.

데모가 실제로 실패하고 있었다
  word-break: break-all 과 keep-all 을 나란히 두고 '차이는 한 줄뿐'이라고
  적었는데, 재보니 줄 수 3 · 높이 87px 로 완전히 동일했다.
  어절이 짧아 두 쪽이 같은 자리에서 끊긴 것이다. 차이가 0 인 비교는
  증명이 아니라 주장의 반증이다.

개편
  h2  -> '라틴 기본값은 한글에서 세 군데가 깨진다'
        수치가 데모 개수와 정확히 대응한다
  데모 -> 셋으로. 각각 실제로 갈린다
        줄바꿈  break-all vs keep-all   (긴 어절 + 15rem 고정폭)
        행간    1.45 vs 1.75            (높이 74 vs 89)
        크기    11px vs 15px            (2줄 vs 3줄)

노트도 고쳤다. '로스팅프로파일이 갈린다'고 썼는데 실제로 갈린 건 다른
어절이었다 — 폭에 따라 바뀌므로 어절을 지목하지 않고 현상만 말한다.

스킬 antipatterns.md
  '데모가 주장을 증명하는지 재라' 추가.
  비교 데모의 높이·줄 수를 실제로 재는 코드와, 차이가 안 날 때의 대처.

packages/skill/references/antipatterns.md

@@ -160,6 +160,28 @@ Show HN 랜딩 1,590개 실측에서 검출률이 가장 높았던 셋이다. **
 | Powerful Features | 엑셀 없이 정산이 끝난다 | 명사구 → 주장 |
 | 빠르고 안정적인 배포 | 배포 실패가 롤백까지 90초 | 형용사 → 측정치 |
 
+### 데모가 주장을 증명하는지 재라
+
+주장을 화면으로 보여주는 섹션이라면, **그 화면이 정말 다른지 숫자로 확인해라.**
+"차이는 이 한 줄뿐이다"라고 써놓고 두 쪽이 똑같으면, 그건 증명이 아니라 주장의 반증이다.
+
+> 실측 사례: `word-break: break-all` 과 `keep-all` 을 나란히 두고
+> "차이는 한 줄뿐"이라고 적었다. 재보니 **줄 수 3, 높이 87px 로 완전히 동일**했다.
+> 어절이 짧아 두 쪽이 같은 자리에서 끊긴 것이다. 반년을 그대로 뒀어도 몰랐을 것이다.
+
+```js
+// 비교 데모는 이렇게 검증한다
+const m = sel => { const e = document.querySelector(sel), r = e.getBoundingClientRect();
+  return { h: Math.round(r.height), lines: Math.round(r.height / parseFloat(getComputedStyle(e).lineHeight)) }; };
+// m('.bad') 와 m('.good') 이 같으면 그 데모는 아무것도 보여주지 않는다
+```
+
+**차이가 안 나면 조건을 극단으로 밀어라** — 폭을 좁히고, 잘리기 쉬운 긴 어절을 넣고,
+값 차이를 벌린다. 그래도 안 나면 그 비교는 애초에 보여줄 것이 없는 것이다.
+
+그리고 **설명 문장이 화면과 일치하는지 확인해라.** "A 가 갈린다"고 썼는데 실제로 갈린 건
+B 라면, 반응형에서 매번 바뀌는 것을 지목한 것이다. 지목하지 말고 현상만 말해라.
+
 **대구·대조·리듬은 마지막에 얹는 것이다.** 먼저 말할 내용을 정하고,
 그것이 정해진 뒤에도 대구가 성립하면 그때 써라. 대구부터 잡으면 내용이 비어도 모른다.