feat(skill): 색·모바일 내비를 인터뷰에 넣고 이미지 조달을 단계로 승격한다

실제로 한 페이지를 만들어 보고 드러난 것들이다.

0단계 인터뷰에 두 축을 더한다.

- 브랜드 색: 꽃집 작업에서 색을 묻지 않고 레퍼런스 실측 평균으로 정했다.
  결과는 좋았지만 브랜드 색이 있었다면 그걸 무시한 작업이 된다.
  "없다"는 답도 답이고, 그때는 피해야 할 색을 묻는다.
- 좁은 화면 내비: 항목 수는 0단계에 이미 정해져 있는데 구현에서 발견했다.
  2~4개는 쌓고, 5~6개는 가로 스크롤, 7개 이상만 여는 메뉴다.
  넷인데 햄버거를 쓰면 탭 한 번을 공짜로 뺏는 것이다.

4-0 이미지 조달 단계를 새로 만든다(references/images.md).

  자리를 만들기 전에 무엇을 실을지 정한다. codex 설치와 auth_mode 를 확인해
  생성 경로를 쓰고, 생성물이라는 사실을 design.md 에 남긴다.

  래퍼 실패 대응을 기록했다 — codex-cli 0.147.0 은 base64 를 돌려주지 않고
  ~/.codex/generated_images/<session>/exec-<id>.png 로 저장한다. 공식 래퍼는
  "image_gen 이 호출되지 않았다"며 실패하지만 파일은 멀쩡히 있다.
  실측에서 이 메시지를 보고 두 번 다시 만들었고 두 번 다 이미 있었다.

  싣기 전 최적화도 넣었다(실측 10.1MB → 603KB).

구현에서 넘어진 것 셋.

- images.md: <img width height> 를 적으면 그 height 가 계산된 높이가 되어
  aspect-ratio 가 조용히 무시된다. computed 는 "3 / 4" 로 멀쩡히 보이고
  실제 높이는 원본 1448px 이었다. height:auto 한 줄로 10.9 화면이 7 화면이 됐다.
- antipatterns.md: "컨트롤이 2줄로 접히나" 를 개별 높이로 재서 거짓 통과했다.
  링크는 한 줄짜리였고 줄바꿈된 것은 컨테이너였다(top 46/77).
  행 수는 높이가 아니라 top 값의 종류로 센다.
- typography.md: 세로쓰기에 가로쓰기 자간(0.14em)을 물리면 글자 사이 세로
  간격이 되어 낱글자가 흩어진다. 한글은 자소가 모여 한 글자라 특히 심하다.
- layout.md: 그리드 구조를 바꾸면 미디어쿼리도 같이 다시 써야 한다.
  넓은 화면은 멀쩡했고 390px 에서 헤드라인이 6줄이 됐다.

packages/skill/references/antipatterns.md

@@ -328,7 +328,29 @@ const s   = await sharp(buf).stats();   // 잘라낸 버퍼를 다시 물려야
 > 지나가는 프레임은 방문자도 놓치고 측정도 매번 다른 값을 준다.
 > 정지된 before/after 두 장이 더 정확하게 말한다.
 
-**④ 눈으로 의심한 것이 실측에서 뒤집힐 수 있다.**
+**④ 개별 요소의 높이로는 "여러 줄에 걸친 것" 을 못 잡는다.**
+"컨트롤이 2줄로 접히는가"(하드 게이트 6)를 이렇게 쟀다.
+
+```js
+// 틀렸다 — 이 검사는 "접힘 0" 이라고 답한다
+[...document.querySelectorAll('.nav a')]
+  .filter(e => e.getBoundingClientRect().height > lineHeight * 1.8)
+```
+
+각 링크는 한 줄짜리라 높이가 정상이었다. **줄바꿈된 것은 링크가 아니라 컨테이너였다** —
+링크들이 두 행(top 46 / 77)에 나뉘어 놓여 있었다. 게이트를 통과했다고 보고했고,
+사용자가 화면을 보고 잡아냈다.
+
+```js
+// 맞다 — 행이 몇 개인지는 top 값의 종류로 센다
+new Set([...document.querySelectorAll('.nav a')]
+  .map(e => Math.round(e.getBoundingClientRect().top))).size
+```
+
+같은 함정이 갤러리·태그 목록·버튼 그룹 어디에나 있다.
+**"몇 줄인가" 를 물을 때는 높이가 아니라 위치를 세라.**
+
+**⑤ 눈으로 의심한 것이 실측에서 뒤집힐 수 있다.**
 WebGL 판이 본문 뒤를 지나가는 화면을 보고 "대비가 죽었다" 고 판단해 캔버스를
 어둡게 만들려 했다. 스크린샷에서 글자 사이 빈 띠의 배경 휘도를 재보니
 최악 지점이 **9.83:1** — AAA(7:1)를 넘었다. 고칠 필요가 없었다.
@@ -442,6 +464,8 @@ sticky 캔버스가 끝까지 돌려면 목록 뒤에 스크롤 구간이 필요
 - [ ] (한국어) 한글 폰트가 명시되어 있고 `word-break: keep-all`이 있다
 - [ ] 모든 섹션에서 제목→본문 간격이 **같은 값**이다 (0px 인 섹션이 하나도 없다)
 - [ ] 화면에 적은 수치는 **전부 그 화면을 캡처해 잰 값**이다 (추정치·기대치가 섞여 있지 않다)
+- [ ] 이미지 높이를 실제로 쟀다 — 원본 픽셀 높이가 그대로 나오면 `aspect-ratio` 가 죽은 것이다
+- [ ] 내비·버튼 그룹의 **행 수를 `top` 값으로** 셌다 (개별 높이로는 못 잡는다)
 
 **판정**