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/layout.md

@@ -105,6 +105,79 @@
 
 ---
 
+## 4-b. 모바일 내비 — 햄버거를 기본값으로 삼지 마라
+
+내비 항목 수는 0단계에서 이미 정해져 있다(= 섹션 수). 구현하다 발견하면 늦다.
+
+| 항목 수 | 처리 | 비용 |
+|---|---|---|
+| **2~4개** | 한 줄 유지. 자간을 줄이고 `space-between` 으로 편다 | 0 |
+| **5~6개** | 가로 스크롤 줄, 또는 하단 고정 바 | 낮음 |
+| **7개 이상** | 여는 메뉴 | `<details>` 로 JS 0바이트 |
+
+**넷인데 햄버거를 쓰면 탭 한 번을 공짜로 뺏는 것이다.** 반대로 여섯을 한 줄에
+욱여넣으면 접힌다 — 실측에서 링크가 두 줄(top 46/77)에 걸렸고, 워드마크까지 3줄이 됐다.
+
+### 2~4개 — 쌓는 것이 접히는 것보다 낫다
+
+워드마크와 내비를 한 줄에 두면 둘 다 접힌다. 좁은 화면에서는 **위아래로 쌓아라.**
+
+```css
+@media (max-width: 560px) {
+  .site-head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
+  .nav { flex-wrap: nowrap; justify-content: space-between; letter-spacing: 0.04em; }
+}
+```
+
+라벨 자간(`0.14em`)이 좁은 화면에서 폭을 크게 먹는다. **자간부터 줄여라** —
+폰트 크기를 줄이는 것보다 읽기에 덜 해롭다.
+
+### 7개 이상 — `<details>` 면 JS 가 필요 없다
+
+키보드 조작·`Esc`·포커스 이동이 브라우저 기본으로 온다.
+직접 만든 토글은 그걸 전부 다시 구현해야 하고, 대개 빠뜨린다.
+
+```html
+<details class="nav-mobile">
+  <summary aria-label="메뉴">≡</summary>
+  <div class="nav-sheet"><a href="#a">…</a></div>
+</details>
+```
+
+```css
+.nav-mobile > summary { list-style: none; cursor: pointer; }
+.nav-mobile > summary::-webkit-details-marker { display: none; }
+.nav-sheet { position: absolute; right: 0; }
+```
+
+**아이콘이 세 줄(≡)일 필요는 없다.** 에디토리얼이면 "메뉴" 라고 적는 편이 낫다 —
+글자는 뜻이 분명하고, 세 줄은 학습된 관례일 뿐이다.
+
+### 어느 쪽이든 검사는 같다
+
+**항목의 `top` 값이 한 종류여야 한다.** 높이만 봐서는 못 잡는다(→ `antipatterns.md`).
+
+```js
+new Set([...document.querySelectorAll('.nav a')]
+  .map(e => Math.round(e.getBoundingClientRect().top))).size === 1
+```
+
+---
+
+## 4-c. 구조를 바꾸면 미디어쿼리도 같이 다시 써라
+
+실측 사고. 히어로를 12칸 그리드에서 "글 + 사진 컨테이너" 2단으로 바꾸면서
+좁은 화면 규칙을 그대로 뒀다. `.hero-text` 가 `auto 1fr` 2칸인데
+세로 라벨을 가로로 눕히자 **그 긴 문장이 auto 칸을 통째로 먹어** h1 칸이 짜부라졌고,
+헤드라인이 390px 에서 6줄, 320px 에서 11줄이 됐다.
+
+넓은 화면에서는 멀쩡했다. **구조 변경의 대가는 항상 좁은 화면에서 먼저 청구된다.**
+
+> 규칙: 그리드 구조를 바꿨으면 **그 자리에서** 320·390·768 을 다시 재라.
+> 나중에 하면 원인이 어느 변경이었는지 못 찾는다.
+
+---
+
 ## 5. 이 단계의 통과 조건
 
 - [ ] CSS/HTML만으로 페이지가 완성됐다. JS를 꺼도 읽힌다