패럴랙스를 마무리한다 — 원경·중경·근경 세 깊이

전 레이어를 실측하고 지도를 design.md 에 남겼다.

  히어로 배경   셰이더 흐름 필드   scroll()   +56px 하강
  히어로 글자                      scroll()   -88px 상승 (반대 방향)
  파이프라인    게이트 씬          sticky     6단계 통과
    단계명                          —         0 고정
    산출물                          view()    ±14px
  재료·설치·프리플라이트  사진      fixed     0 — 원경
  사례          사진               drift 0.4  이미지 높이의 28.6%
  조판          종이               drift 0.25 -122px — 근경
  재료 타일                        view()     ±26 / ±58px
  프리플라이트 항목                view()     6 -> 10px
  수치                             없음       의도적 정지

세 깊이가 다 있다. 종이를 원경으로 두지 않은 것은 손에 닿는 거리의
재질이기 때문이다. 한 층(단계명·수치)은 고정이어야 기준이 생긴다.

모바일 390px 에서도 fixed 가 유지된다 — background-attachment 를 안 쓴 덕이다.
prefers-reduced-motion 에서는 게이트 씬이 시작하지 않고, 고정 배경은
absolute 로 돌아가며, view() 애니메이션이 전부 꺼진다.

최종 검사: 토큰 밖 색상 0 · radius 2종 · 100vh 0 · scroll 리스너 0 ·
하드코딩 웨이트 0 · 가로 스크롤 0(390/1440) · 테스트 22개 통과

apps/site/design.md

@@ -189,6 +189,33 @@ WebGL 게이트: `prefers-reduced-motion` 이면 **아예 시작하지 않는다
 `ResizeObserver` 로 캔버스를 따라가게 했다. `window.resize` 만 듣던 동안 히어로 높이 변화를
 놓쳐 배경이 화면의 3분의 2만 덮고 아래가 검게 비었다.
 
+## 패럴랙스 지도 (실측)
+
+깊이가 다른 층을 겹쳐 시차를 만든다. **한 층은 반드시 고정이다** —
+전부 움직이면 기준이 없어 그냥 흔들리는 페이지가 된다.
+
+| 자리 | 층 | 방식 | 실측 이동 |
+|---|---|---|---|
+| 히어로 배경 | 셰이더 흐름 필드 | `scroll(root)` | **+56px** ↓ |
+| 히어로 글자 | | `scroll(root)` | **−88px** ↑ (반대 방향) |
+| 파이프라인 | 게이트 씬(three.js) | `sticky` + 카메라 | 6단계를 통과 |
+| ㅤ└ 단계명 | | — | **0** 고정 |
+| ㅤ└ 산출물 | | `view()` | ±14px |
+| 재료 · 설치 · 프리플라이트 | 배경 사진 | `fixed` | **0 — 원경** |
+| 사례 | 배경 사진 | `drift` 0.4 | 이미지 높이의 28.6% |
+| 조판 | 종이 | `drift` 0.25 | −122px (근경) |
+| 재료 타일 | | `view()` | ±26 / ±58px |
+| 프리플라이트 항목 | | `view()` | 6 → 10px (뒤일수록 늦게) |
+| **수치** | | **없음** | 의도적 정지 |
+
+세 가지 깊이가 다 있다 — **원경**(fixed) · **중경**(drift) · **근경**(콘텐츠와 함께).
+종이를 원경으로 두지 않은 이유는 손에 닿는 거리의 재질이기 때문이다.
+
+모바일(390px)에서도 `fixed` 가 유지된다. `background-attachment: fixed` 를 안 쓴 덕이다.
+
+`prefers-reduced-motion` 에서는 게이트 씬이 아예 시작하지 않고, 고정 배경은
+`position: absolute` 로 흐름에 돌아가며, 모든 `view()` 애니메이션이 꺼진다.
+
 ## 모션 문법 — 섹션마다 다른 말
 
 같은 패럴랙스를 전부에 걸면 벽지다. 각 섹션의 주장을 움직임으로 옮겼다.