From 8808c672dcdd75817376d20b7360cba8d12f2cbc Mon Sep 17 00:00:00 2001
From: Yun Chan <yunchan@twentyoz.kr>
Date: Thu, 20 Aug 2026 10:48:00 +0900
Subject: [PATCH] =?UTF-8?q?designpaca=20=EC=B4=88=EA=B8=B0=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20=E2=80=94=20=EC=8A=A4=ED=82=AC=20=C2=B7=20=EC=84=A4?=
 =?UTF-8?q?=EC=B9=98=20CLI=20=C2=B7=20=EB=B0=B0=ED=8F=AC=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=B4=ED=94=84=EB=9D=BC=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

웹 디자인 파이프라인 스킬과 이를 5개 에이전트에 설치하는 CLI 를 담은 모노레포.

스킬 (packages/skill)
- SKILL.md 261줄 + 참조 문서 16개 3,349줄. progressive disclosure 로
  본문은 절차와 인덱스만, 지식은 references/ 로 분리
- 0~6단계 파이프라인. 규모에 따라 전체·연장·국소 세 경로로 분기
- 하드 게이트 12개는 grep·카운트로 검증 가능한 것만. 취향 판단은 제외
- 미학 프리셋 5종, AI 슬롭 지문 목록, 한글 조판 규칙,
  SVG 필터·three.js·인터랙티브 모션·HTML-in-Canvas 실전 지침

설치 CLI (packages/cli, packages/core)
- npx designpaca 온보딩 TUI. Claude Code · Codex · Cursor · Windsurf · AGENTS.md
- 매니페스트에 설치 시점 해시를 기록해 사용자가 고친 파일은 update 가 건너뛴다
- 타깃별로 본문의 references/ 경로를 실제 설치 위치로 재작성
- AGENTS.md 는 항상 로드되므로 본문 대신 303자 포인터만 주입
- Windsurf 는 12,000자 상한 초과 시 설치를 차단

배포 (build/ci, .forgejo/workflows)
- 태그 v* → 검사·테스트·빌드 → npmjs 배포 + Forgejo 레지스트리 미러
  → draft 릴리스 → Cloudflare Pages. 재실행 멱등

근거 (research/)
- 약 250개 웹 소스 조사 결과와 도그푸딩 검증 2건. 스킬의 모든 수치는 여기서 나온다

테스트 22개 통과 (core 16 · cli 6)
---
 .changeset/config.json                        |   11 +
 .forgejo/workflows/ci.yml                     |   59 +
 .forgejo/workflows/release.yml                |   97 +
 .gitignore                                    |   12 +
 .npmrc                                        |    3 +
 README.md                                     |   74 +
 apps/site/astro.config.mjs                    |    9 +
 apps/site/package.json                        |   15 +
 apps/site/src/pages/index.astro               |   19 +
 apps/site/tsconfig.json                       |    5 +
 build/ci/lint-skill.mjs                       |   80 +
 build/ci/publish-npm.sh                       |   67 +
 build/ci/upload-release-asset.sh              |   56 +
 build/ci/verify-node.sh                       |   43 +
 docs/DEPLOYMENT_PLAN.md                       |  130 +
 package.json                                  |   31 +
 packages/cli/README.md                        |  116 +
 packages/cli/package.json                     |   32 +
 packages/cli/scripts/bundle-skill.mjs         |   30 +
 packages/cli/scripts/verify-package.mjs       |   29 +
 packages/cli/src/commands/doctor.ts           |   55 +
 packages/cli/src/commands/install.ts          |   90 +
 packages/cli/src/commands/list.ts             |   30 +
 packages/cli/src/commands/uninstall.ts        |   30 +
 packages/cli/src/commands/update.ts           |   55 +
 packages/cli/src/index.ts                     |  177 +
 packages/cli/src/skill.ts                     |   28 +
 packages/cli/src/tui/onboard.ts               |  125 +
 packages/cli/src/ui.ts                        |   55 +
 packages/cli/src/update-check.ts              |   56 +
 packages/cli/test/cli.test.ts                 |   70 +
 packages/cli/tsconfig.json                    |    9 +
 packages/cli/tsup.config.ts                   |   15 +
 packages/core/package.json                    |   19 +
 packages/core/src/fsx.ts                      |   65 +
 packages/core/src/index.ts                    |    8 +
 packages/core/src/installer.ts                |  185 +
 packages/core/src/manifest.ts                 |  105 +
 packages/core/src/marker.ts                   |   51 +
 packages/core/src/paths.ts                    |   25 +
 packages/core/src/skill-source.ts             |   62 +
 packages/core/src/targets/agents-md.ts        |   71 +
 packages/core/src/targets/claude-code.ts      |   34 +
 packages/core/src/targets/codex.ts            |   34 +
 packages/core/src/targets/common.ts           |   60 +
 packages/core/src/targets/cursor.ts           |   57 +
 packages/core/src/targets/index.ts            |   17 +
 packages/core/src/targets/windsurf.ts         |   66 +
 packages/core/src/types.ts                    |   96 +
 packages/core/test/installer.test.ts          |  163 +
 packages/core/test/marker.test.ts             |   50 +
 packages/core/test/skill-source.test.ts       |   23 +
 packages/core/tsconfig.json                   |    5 +
 packages/skill/SKILL.md                       |  261 +
 packages/skill/package.json                   |   11 +
 packages/skill/references/antipatterns.md     |  271 +
 .../skill/references/experimental-canvas.md   |  350 ++
 packages/skill/references/galleries.md        |  173 +
 packages/skill/references/layout.md           |  113 +
 packages/skill/references/motion.md           |  504 ++
 packages/skill/references/preflight.md        |  137 +
 packages/skill/references/presets/README.md   |   17 +
 .../skill/references/presets/anti-grid.md     |   58 +
 .../references/presets/dark-instrument.md     |   62 +
 .../skill/references/presets/editorial.md     |   56 +
 .../references/presets/quiet-commerce.md      |   69 +
 .../skill/references/presets/swiss-minimal.md |   56 +
 packages/skill/references/reference-method.md |  254 +
 packages/skill/references/svg-filters.md      |  369 ++
 packages/skill/references/three.md            |  598 +++
 packages/skill/references/tokens.md           |  245 +
 pnpm-lock.yaml                                | 4522 +++++++++++++++++
 pnpm-workspace.yaml                           |    7 +
 research/canvas/01-api-spec.md                |  397 ++
 research/canvas/02-availability.md            |  144 +
 research/canvas/03-code-examples.md           |  700 +++
 research/canvas/04-fallbacks.md               |  165 +
 research/canvas/05-sources.md                 |  107 +
 research/canvas/_raw/awesome.md               |   36 +
 research/canvas/_raw/ex-complex-text.html     |   50 +
 research/canvas/_raw/ex-pie-chart.html        |   87 +
 research/canvas/_raw/ex-text-input.html       |   68 +
 research/canvas/_raw/ex-webGL.html            |  193 +
 research/canvas/_raw/ex-webGLSetup.js         |  288 ++
 research/canvas/_raw/explainer.md             |  379 ++
 research/canvas/_raw/htex-ex.html             |  182 +
 research/canvas/_raw/htmltex.js               |   74 +
 research/canvas/_raw/jelly.ts                 |  938 ++++
 research/canvas/_raw/secpriv.md               |   85 +
 research/dogfood-coffee/01-references.md      |   63 +
 research/dogfood-coffee/02-direction.md       |   77 +
 research/dogfood-coffee/03-tokens.css         |  100 +
 research/dogfood-coffee/05-structure-plan.md  |   33 +
 research/dogfood-coffee/design.md             |   82 +
 research/dogfood-coffee/index.html            |  125 +
 research/dogfood-coffee/style.css             |  270 +
 research/dogfood-saas/01-references.md        |   82 +
 research/dogfood-saas/02-direction.md         |   46 +
 research/dogfood-saas/03-tokens.md            |  160 +
 research/dogfood-saas/05-preflight.md         |  159 +
 research/dogfood-saas/design.md               |   91 +
 research/dogfood-saas/hero/preview.html       |   74 +
 .../dogfood-saas/hero/src/components/Hero.jsx |  109 +
 .../dogfood-saas/hero/src/styles/hero.css     |  216 +
 .../dogfood-saas/hero/src/styles/tokens.css   |  100 +
 research/dogfood-saas/tools/contrast.mjs      |   52 +
 research/motion/01-principles.md              |  552 ++
 research/motion/02-css-native.md              | 1530 ++++++
 research/motion/03-js-stacks.md               | 1797 +++++++
 research/references/01-gallery-catalog.md     |  359 ++
 research/references/02-methodology.md         |  410 ++
 research/references/03-trends-2026.md         |  325 ++
 research/references/04-ai-slop-signatures.md  |  267 +
 research/references/05-sources.md             |  181 +
 research/site-brief.md                        |  827 +++
 research/skills/01-local-skill-teardown.md    |  750 +++
 research/skills/02-prompt-techniques.md       | 1626 ++++++
 research/skills/03-format-specs.md            |  632 +++
 research/skills/04-sources.md                 |  190 +
 research/skills/05-recommendations.md         |  722 +++
 research/skills/06-skill-audit.md             | 1306 +++++
 research/svg/01-primitives-reference.md       |  865 ++++
 research/svg/02-recipes.md                    | 1670 ++++++
 research/svg/03-performance-and-pitfalls.md   |  493 ++
 research/svg/04-sources.md                    |  239 +
 research/three/01-stack-and-setup.md          | 1047 ++++
 research/three/02-patterns.md                 | 3385 ++++++++++++
 research/three/03-shaders.md                  | 1296 +++++
 research/three/04-performance.md              | 1248 +++++
 research/three/05-sources.md                  |  221 +
 research/youtube/SUMMARY.md                   |   86 +
 research/youtube/nomad-html.description       |   17 +
 research/youtube/transcript-ko-compact.txt    |    1 +
 research/youtube/transcript-ko.txt            |    1 +
 tsconfig.base.json                            |   21 +
 135 files changed, 38838 insertions(+)
 create mode 100644 .changeset/config.json
 create mode 100644 .forgejo/workflows/ci.yml
 create mode 100644 .forgejo/workflows/release.yml
 create mode 100644 .gitignore
 create mode 100644 .npmrc
 create mode 100644 README.md
 create mode 100644 apps/site/astro.config.mjs
 create mode 100644 apps/site/package.json
 create mode 100644 apps/site/src/pages/index.astro
 create mode 100644 apps/site/tsconfig.json
 create mode 100644 build/ci/lint-skill.mjs
 create mode 100644 build/ci/publish-npm.sh
 create mode 100644 build/ci/upload-release-asset.sh
 create mode 100644 build/ci/verify-node.sh
 create mode 100644 docs/DEPLOYMENT_PLAN.md
 create mode 100644 package.json
 create mode 100644 packages/cli/README.md
 create mode 100644 packages/cli/package.json
 create mode 100644 packages/cli/scripts/bundle-skill.mjs
 create mode 100644 packages/cli/scripts/verify-package.mjs
 create mode 100644 packages/cli/src/commands/doctor.ts
 create mode 100644 packages/cli/src/commands/install.ts
 create mode 100644 packages/cli/src/commands/list.ts
 create mode 100644 packages/cli/src/commands/uninstall.ts
 create mode 100644 packages/cli/src/commands/update.ts
 create mode 100644 packages/cli/src/index.ts
 create mode 100644 packages/cli/src/skill.ts
 create mode 100644 packages/cli/src/tui/onboard.ts
 create mode 100644 packages/cli/src/ui.ts
 create mode 100644 packages/cli/src/update-check.ts
 create mode 100644 packages/cli/test/cli.test.ts
 create mode 100644 packages/cli/tsconfig.json
 create mode 100644 packages/cli/tsup.config.ts
 create mode 100644 packages/core/package.json
 create mode 100644 packages/core/src/fsx.ts
 create mode 100644 packages/core/src/index.ts
 create mode 100644 packages/core/src/installer.ts
 create mode 100644 packages/core/src/manifest.ts
 create mode 100644 packages/core/src/marker.ts
 create mode 100644 packages/core/src/paths.ts
 create mode 100644 packages/core/src/skill-source.ts
 create mode 100644 packages/core/src/targets/agents-md.ts
 create mode 100644 packages/core/src/targets/claude-code.ts
 create mode 100644 packages/core/src/targets/codex.ts
 create mode 100644 packages/core/src/targets/common.ts
 create mode 100644 packages/core/src/targets/cursor.ts
 create mode 100644 packages/core/src/targets/index.ts
 create mode 100644 packages/core/src/targets/windsurf.ts
 create mode 100644 packages/core/src/types.ts
 create mode 100644 packages/core/test/installer.test.ts
 create mode 100644 packages/core/test/marker.test.ts
 create mode 100644 packages/core/test/skill-source.test.ts
 create mode 100644 packages/core/tsconfig.json
 create mode 100644 packages/skill/SKILL.md
 create mode 100644 packages/skill/package.json
 create mode 100644 packages/skill/references/antipatterns.md
 create mode 100644 packages/skill/references/experimental-canvas.md
 create mode 100644 packages/skill/references/galleries.md
 create mode 100644 packages/skill/references/layout.md
 create mode 100644 packages/skill/references/motion.md
 create mode 100644 packages/skill/references/preflight.md
 create mode 100644 packages/skill/references/presets/README.md
 create mode 100644 packages/skill/references/presets/anti-grid.md
 create mode 100644 packages/skill/references/presets/dark-instrument.md
 create mode 100644 packages/skill/references/presets/editorial.md
 create mode 100644 packages/skill/references/presets/quiet-commerce.md
 create mode 100644 packages/skill/references/presets/swiss-minimal.md
 create mode 100644 packages/skill/references/reference-method.md
 create mode 100644 packages/skill/references/svg-filters.md
 create mode 100644 packages/skill/references/three.md
 create mode 100644 packages/skill/references/tokens.md
 create mode 100644 pnpm-lock.yaml
 create mode 100644 pnpm-workspace.yaml
 create mode 100644 research/canvas/01-api-spec.md
 create mode 100644 research/canvas/02-availability.md
 create mode 100644 research/canvas/03-code-examples.md
 create mode 100644 research/canvas/04-fallbacks.md
 create mode 100644 research/canvas/05-sources.md
 create mode 100644 research/canvas/_raw/awesome.md
 create mode 100644 research/canvas/_raw/ex-complex-text.html
 create mode 100644 research/canvas/_raw/ex-pie-chart.html
 create mode 100644 research/canvas/_raw/ex-text-input.html
 create mode 100644 research/canvas/_raw/ex-webGL.html
 create mode 100644 research/canvas/_raw/ex-webGLSetup.js
 create mode 100644 research/canvas/_raw/explainer.md
 create mode 100644 research/canvas/_raw/htex-ex.html
 create mode 100644 research/canvas/_raw/htmltex.js
 create mode 100644 research/canvas/_raw/jelly.ts
 create mode 100644 research/canvas/_raw/secpriv.md
 create mode 100644 research/dogfood-coffee/01-references.md
 create mode 100644 research/dogfood-coffee/02-direction.md
 create mode 100644 research/dogfood-coffee/03-tokens.css
 create mode 100644 research/dogfood-coffee/05-structure-plan.md
 create mode 100644 research/dogfood-coffee/design.md
 create mode 100644 research/dogfood-coffee/index.html
 create mode 100644 research/dogfood-coffee/style.css
 create mode 100644 research/dogfood-saas/01-references.md
 create mode 100644 research/dogfood-saas/02-direction.md
 create mode 100644 research/dogfood-saas/03-tokens.md
 create mode 100644 research/dogfood-saas/05-preflight.md
 create mode 100644 research/dogfood-saas/design.md
 create mode 100644 research/dogfood-saas/hero/preview.html
 create mode 100644 research/dogfood-saas/hero/src/components/Hero.jsx
 create mode 100644 research/dogfood-saas/hero/src/styles/hero.css
 create mode 100644 research/dogfood-saas/hero/src/styles/tokens.css
 create mode 100644 research/dogfood-saas/tools/contrast.mjs
 create mode 100644 research/motion/01-principles.md
 create mode 100644 research/motion/02-css-native.md
 create mode 100644 research/motion/03-js-stacks.md
 create mode 100644 research/references/01-gallery-catalog.md
 create mode 100644 research/references/02-methodology.md
 create mode 100644 research/references/03-trends-2026.md
 create mode 100644 research/references/04-ai-slop-signatures.md
 create mode 100644 research/references/05-sources.md
 create mode 100644 research/site-brief.md
 create mode 100644 research/skills/01-local-skill-teardown.md
 create mode 100644 research/skills/02-prompt-techniques.md
 create mode 100644 research/skills/03-format-specs.md
 create mode 100644 research/skills/04-sources.md
 create mode 100644 research/skills/05-recommendations.md
 create mode 100644 research/skills/06-skill-audit.md
 create mode 100644 research/svg/01-primitives-reference.md
 create mode 100644 research/svg/02-recipes.md
 create mode 100644 research/svg/03-performance-and-pitfalls.md
 create mode 100644 research/svg/04-sources.md
 create mode 100644 research/three/01-stack-and-setup.md
 create mode 100644 research/three/02-patterns.md
 create mode 100644 research/three/03-shaders.md
 create mode 100644 research/three/04-performance.md
 create mode 100644 research/three/05-sources.md
 create mode 100644 research/youtube/SUMMARY.md
 create mode 100644 research/youtube/nomad-html.description
 create mode 100644 research/youtube/transcript-ko-compact.txt
 create mode 100644 research/youtube/transcript-ko.txt
 create mode 100644 tsconfig.base.json

diff --git a/.changeset/config.json b/.changeset/config.json
new file mode 100644
index 0000000..e1a0732
--- /dev/null
+++ b/.changeset/config.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [["designpaca", "@designpaca/core", "@designpaca/skill"]],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": ["@designpaca/site"]
+}
diff --git a/.forgejo/workflows/ci.yml b/.forgejo/workflows/ci.yml
new file mode 100644
index 0000000..02e6a36
--- /dev/null
+++ b/.forgejo/workflows/ci.yml
@@ -0,0 +1,59 @@
+# designpaca CI — 자체 러너(linux-builder, host 모드)에서 돈다.
+# host 러너에는 Node 가 없을 수 있으므로 uses: 액션을 쓰지 않고 전부 run: 으로 처리한다.
+name: ci
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: linux-builder
+    steps:
+      - name: checkout
+        env: { CI_TOKEN: "${{ github.token }}" }
+        run: |
+          proto="${GITHUB_SERVER_URL%%://*}"; host="${GITHUB_SERVER_URL#*://}"
+          url="$proto://actions:${CI_TOKEN}@${host%/}/${GITHUB_REPOSITORY}.git"
+          [ -d .git ] || git init -q .
+          git remote remove origin 2>/dev/null || true
+          git remote add origin "$url"
+          git fetch -q --depth 1 origin "$GITHUB_REF"
+          git checkout -q -f FETCH_HEAD
+          git clean -qfdx
+
+      - name: 환경 확인
+        run: ./build/ci/verify-node.sh
+
+      - name: 의존성 설치
+        run: pnpm install --frozen-lockfile
+
+      - name: 스킬 문서 검사
+        run: node build/ci/lint-skill.mjs packages/skill
+
+      - name: 타입 검사
+        run: pnpm typecheck
+
+      - name: 테스트
+        run: pnpm test
+
+      - name: 빌드
+        run: pnpm build
+
+      - name: 배포물 점검 (npx 경로 검증)
+        run: |
+          node packages/cli/scripts/verify-package.mjs
+          # 실제 사용자가 겪는 경로 그대로 확인한다 — tarball 을 만들어 설치까지 해본다
+          cd packages/cli
+          tarball="$(npm pack --silent)"
+          tmp="$(mktemp -d)"
+          tar -xzf "$tarball" -C "$tmp"
+          test -f "$tmp/package/dist/skill/SKILL.md" || { echo "tarball 에 스킬이 없다" >&2; exit 1; }
+          node "$tmp/package/dist/index.js" --version
+          node "$tmp/package/dist/index.js" list
+          rm -rf "$tmp" "$tarball"
+
+      - name: 사이트 빌드
+        run: pnpm build:site
diff --git a/.forgejo/workflows/release.yml b/.forgejo/workflows/release.yml
new file mode 100644
index 0000000..4f8e3a6
--- /dev/null
+++ b/.forgejo/workflows/release.yml
@@ -0,0 +1,97 @@
+# designpaca 릴리스 — 태그 v* 푸시로 발동한다.
+#   1) 게이트: 검사·테스트·빌드
+#   2) npmjs 배포 + Forgejo 사설 레지스트리 미러
+#   3) Forgejo draft 릴리스에 tarball 첨부 (QA 후 수동 Publish 승격)
+#   4) 소개 페이지 Cloudflare Pages 배포
+#
+# 필요한 시크릿: NPM_TOKEN · FORGEJO_NPM_TOKEN · RELEASE_TOKEN · CF_API_TOKEN · CF_ACCOUNT_ID
+name: release
+
+on:
+  push:
+    tags: ["v*"]
+  workflow_dispatch: # 수동 리허설 (ci-rehearsal prerelease 로 나간다)
+
+jobs:
+  release:
+    runs-on: linux-builder
+    steps:
+      - name: checkout
+        env: { CI_TOKEN: "${{ github.token }}" }
+        run: |
+          proto="${GITHUB_SERVER_URL%%://*}"; host="${GITHUB_SERVER_URL#*://}"
+          url="$proto://actions:${CI_TOKEN}@${host%/}/${GITHUB_REPOSITORY}.git"
+          [ -d .git ] || git init -q .
+          git remote remove origin 2>/dev/null || true
+          git remote add origin "$url"
+          git fetch -q --depth 1 origin "$GITHUB_REF"
+          git checkout -q -f FETCH_HEAD
+          git clean -qfdx
+
+      - name: 환경 확인
+        run: ./build/ci/verify-node.sh
+
+      - name: 릴리스 정보 확정
+        run: |
+          case "$GITHUB_REF" in
+            refs/tags/v*)
+              tag="${GITHUB_REF#refs/tags/}"
+              echo "RELTAG=$tag" >> "$GITHUB_ENV"
+              echo "RELEASE_PRERELEASE=false" >> "$GITHUB_ENV"
+              echo "DO_PUBLISH=1" >> "$GITHUB_ENV"
+              # 태그와 package.json 버전이 어긋난 채 배포되는 사고를 막는다
+              pkgver="$(node -p 'require("./packages/cli/package.json").version')"
+              [ "v$pkgver" = "$tag" ] || { echo "태그($tag)와 package.json(v$pkgver)이 다르다" >&2; exit 1; }
+              ;;
+            *)
+              echo "RELTAG=ci-rehearsal" >> "$GITHUB_ENV"
+              echo "RELEASE_PRERELEASE=true" >> "$GITHUB_ENV"
+              echo "DO_PUBLISH=0" >> "$GITHUB_ENV"
+              ;;
+          esac
+
+      - name: 의존성 설치
+        run: pnpm install --frozen-lockfile
+
+      - name: 검사 · 테스트 · 빌드
+        run: |
+          node build/ci/lint-skill.mjs packages/skill
+          pnpm typecheck
+          pnpm test
+          pnpm build
+          node packages/cli/scripts/verify-package.mjs
+
+      - name: tarball 생성
+        run: |
+          mkdir -p out
+          cd packages/cli
+          tarball="$(npm pack --silent)"
+          mv "$tarball" "../../out/$tarball"
+          echo "TARBALL=out/$tarball" >> "$GITHUB_ENV"
+
+      - name: npm 배포 (npmjs + Forgejo 미러)
+        if: env.DO_PUBLISH == '1'
+        env:
+          NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
+          FORGEJO_NPM_TOKEN: "${{ secrets.FORGEJO_NPM_TOKEN }}"
+          FORGEJO_NPM_OWNER: "${{ vars.FORGEJO_NPM_OWNER }}"
+        run: ./build/ci/publish-npm.sh packages/cli
+
+      - name: 릴리스 업로드 (draft)
+        env: { RELEASE_TOKEN: "${{ secrets.RELEASE_TOKEN }}" }
+        run: ./build/ci/upload-release-asset.sh "$RELTAG" "$TARBALL"
+
+      - name: 소개 페이지 배포 (Cloudflare Pages)
+        env:
+          CLOUDFLARE_API_TOKEN: "${{ secrets.CF_API_TOKEN }}"
+          CLOUDFLARE_ACCOUNT_ID: "${{ secrets.CF_ACCOUNT_ID }}"
+        run: |
+          if [ -z "${CLOUDFLARE_API_TOKEN:-}" ]; then
+            echo "CF_API_TOKEN 이 없다 — 페이지 배포를 건너뛴다"
+            exit 0
+          fi
+          pnpm build:site
+          npx --yes wrangler@latest pages deploy apps/site/dist \
+            --project-name designpaca \
+            --branch main \
+            --commit-dirty=true
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..41fb99f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,12 @@
+node_modules/
+dist/
+.turbo/
+*.tgz
+.DS_Store
+.env
+.env.local
+apps/site/.astro/
+apps/site/dist/
+# 리서치 원본 자막(용량) — 요약 문서는 커밋한다
+research/youtube/*.srt
+research/youtube/*.vtt
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..8c269a5
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,3 @@
+auto-install-peers=true
+strict-peer-dependencies=false
+# 릴리스 프로비넌스는 CI에서만 켠다(로컬 publish 금지)
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e40eca3
--- /dev/null
+++ b/README.md
@@ -0,0 +1,74 @@
+# designpaca — 모노레포
+
+웹 디자인 파이프라인 스킬과 그 설치 CLI.
+사용자용 문서는 [`packages/cli/README.md`](packages/cli/README.md) 를 봐라 — npm 페이지에 그대로 실린다.
+
+```bash
+npx designpaca
+```
+
+## 구조
+
+```
+packages/
+  skill/   @designpaca/skill  — SKILL.md 와 references/. 이 저장소의 실질 가치
+  core/    @designpaca/core   — 설치 엔진: 타깃 어댑터, 매니페스트, 드리프트 감지
+  cli/     designpaca         — npx 진입점 + 온보딩 TUI. 유일하게 npm 에 배포되는 패키지
+apps/
+  site/    @designpaca/site   — 소개 페이지 (Astro → Cloudflare Pages)
+build/ci/                     — CI 스크립트 (Node 검증, npm 배포, 릴리스 업로드, 스킬 검사)
+research/                     — 스킬의 근거 자료. 약 250개 웹 소스 조사 결과
+docs/DEPLOYMENT_PLAN.md       — 배포·릴리스 운영 절차
+```
+
+`core` 와 `skill` 은 private 이다. CLI 빌드 시 `core` 는 번들에, `skill` 은 `dist/skill/` 로 복사된다.
+사용자는 `npx designpaca` 한 번으로 전부 받는다.
+
+## 개발
+
+```bash
+pnpm install
+pnpm build          # 스킬 번들 + CLI 빌드
+pnpm test           # core 14 + cli 6
+pnpm typecheck
+pnpm dev:site       # 소개 페이지 로컬
+```
+
+### CLI 를 실제 경로로 테스트
+
+`npx` 가 겪는 경로를 그대로 재현하려면 tarball 로 확인한다.
+
+```bash
+pnpm build
+cd packages/cli && npm pack
+npx ./designpaca-0.1.0.tgz --help
+```
+
+설치 왕복을 안전하게 시험하려면 홈 디렉터리를 바꿔라.
+
+```bash
+HOME=/tmp/dp USERPROFILE=/tmp/dp node packages/cli/dist/index.js install -t claude-code -s user -y
+```
+
+### 스킬 문서를 고쳤다면
+
+```bash
+node build/ci/lint-skill.mjs packages/skill
+```
+
+프론트매터 필수 필드, description 길이, 본문이 가리키는 참조 문서의 존재, 참조되지 않는 죽은 문서를 검사한다. CI 가 같은 것을 돌린다.
+
+## 릴리스
+
+```bash
+pnpm changeset      # 변경 기록
+pnpm version        # 버전 확정 (fixed 그룹이라 세 패키지가 함께 움직인다)
+git tag v0.1.0 && git push origin main --tags
+```
+
+태그 푸시가 Forgejo Actions 를 발동시킨다: 검사 → 테스트 → 빌드 → npmjs 배포 + 사설 레지스트리 미러 → draft 릴리스 → Cloudflare Pages.
+시크릿 등록과 러너 전제는 [`docs/DEPLOYMENT_PLAN.md`](docs/DEPLOYMENT_PLAN.md) 에 있다.
+
+## 라이선스
+
+MIT
diff --git a/apps/site/astro.config.mjs b/apps/site/astro.config.mjs
new file mode 100644
index 0000000..db59b90
--- /dev/null
+++ b/apps/site/astro.config.mjs
@@ -0,0 +1,9 @@
+import { defineConfig } from "astro/config";
+
+export default defineConfig({
+  site: "https://designpaca.chanpaca.net",
+  // 정적 출력 — Cloudflare Pages 로 그대로 올린다
+  output: "static",
+  build: { format: "file" },
+  devToolbar: { enabled: false },
+});
diff --git a/apps/site/package.json b/apps/site/package.json
new file mode 100644
index 0000000..d40373e
--- /dev/null
+++ b/apps/site/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@designpaca/site",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "typecheck": "echo \"(사이트는 build 로 검증한다)\""
+  },
+  "dependencies": {
+    "astro": "^5.1.1"
+  }
+}
diff --git a/apps/site/src/pages/index.astro b/apps/site/src/pages/index.astro
new file mode 100644
index 0000000..119515f
--- /dev/null
+++ b/apps/site/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+const version = "0.1.0";
+---
+
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>designpaca</title>
+    <meta name="description" content="웹 디자인 전 과정을 끌고 가는 파이프라인 스킬" />
+  </head>
+  <body>
+    <main>
+      <h1>designpaca</h1>
+      <p>웹 디자인 파이프라인 스킬 — v{version}</p>
+      <code>npx designpaca</code>
+    </main>
+  </body>
+</html>
diff --git a/apps/site/tsconfig.json b/apps/site/tsconfig.json
new file mode 100644
index 0000000..8bf91d3
--- /dev/null
+++ b/apps/site/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}
diff --git a/build/ci/lint-skill.mjs b/build/ci/lint-skill.mjs
new file mode 100644
index 0000000..36ebb12
--- /dev/null
+++ b/build/ci/lint-skill.mjs
@@ -0,0 +1,80 @@
+// 스킬 문서의 최소 규약을 검사한다. CI 와 `pnpm test` 가 함께 쓴다.
+// - SKILL.md 존재와 프론트매터 필수 필드
+// - description 길이(트리거 정확도에 직접 영향)
+// - references 링크가 실제 파일을 가리키는지
+import fs from "node:fs/promises";
+import path from "node:path";
+
+const root = path.resolve(process.argv[2] ?? ".");
+const errors = [];
+const warnings = [];
+
+const skillPath = path.join(root, "SKILL.md");
+let md;
+try {
+  md = await fs.readFile(skillPath, "utf8");
+} catch {
+  console.error(`SKILL.md 를 찾을 수 없다: ${skillPath}`);
+  process.exit(1);
+}
+
+const fmMatch = /^---\r?\n([\s\S]*?)\r?\n---/.exec(md);
+if (!fmMatch) {
+  errors.push("프론트매터(---)가 없다");
+} else {
+  const fm = Object.fromEntries(
+    fmMatch[1]
+      .split(/\r?\n/)
+      .map((l) => /^([A-Za-z0-9_-]+):\s*(.*)$/.exec(l))
+      .filter(Boolean)
+      .map((m) => [m[1], m[2].replace(/^["']|["']$/g, "")]),
+  );
+  if (fm.name !== "designpaca") errors.push(`name 이 designpaca 가 아니다: ${fm.name}`);
+  if (!fm.description) errors.push("description 이 없다");
+  else {
+    const len = fm.description.length;
+    if (len < 80) warnings.push(`description 이 짧다(${len}자) — 트리거 정확도가 떨어진다`);
+    if (len > 700) warnings.push(`description 이 길다(${len}자) — 요약해라`);
+  }
+}
+
+// 본문이 참조하는 파일이 실제로 있는지 확인한다 (references/xxx.md 형태)
+const refs = [...md.matchAll(/references\/[A-Za-z0-9._/-]+\.md/g)].map((m) => m[0]);
+for (const rel of new Set(refs)) {
+  try {
+    await fs.access(path.join(root, rel));
+  } catch {
+    errors.push(`본문이 가리키는 참조 문서가 없다: ${rel}`);
+  }
+}
+
+// 참조 문서가 본문 어디에서도 언급되지 않으면 죽은 문서다
+async function walk(dir, base = dir) {
+  const out = [];
+  let entries = [];
+  try {
+    entries = await fs.readdir(dir, { withFileTypes: true });
+  } catch {
+    return out;
+  }
+  for (const e of entries) {
+    const full = path.join(dir, e.name);
+    if (e.isDirectory()) out.push(...(await walk(full, base)));
+    else out.push(path.relative(base, full).split(path.sep).join("/"));
+  }
+  return out;
+}
+const refDir = path.join(root, "references");
+for (const f of await walk(refDir, root)) {
+  if (!f.endsWith(".md")) continue;
+  const rel = f.split(path.sep).join("/");
+  if (!md.includes(rel)) warnings.push(`본문에서 참조되지 않는 문서: ${rel}`);
+}
+
+for (const w of warnings) console.warn(`  경고: ${w}`);
+if (errors.length > 0) {
+  for (const e of errors) console.error(`  오류: ${e}`);
+  console.error(`\n스킬 검사 실패 — 오류 ${errors.length}건`);
+  process.exit(1);
+}
+console.log(`스킬 검사 통과 (경고 ${warnings.length}건)`);
diff --git a/build/ci/publish-npm.sh b/build/ci/publish-npm.sh
new file mode 100644
index 0000000..c1ce01a
--- /dev/null
+++ b/build/ci/publish-npm.sh
@@ -0,0 +1,67 @@
+#!/usr/bin/env bash
+# designpaca 패키지를 npmjs 에 배포하고 Forgejo 사설 레지스트리에 미러링한다.
+#
+# 필요 환경:
+#   NPM_TOKEN          npmjs 자동화 토큰 (필수)
+#   FORGEJO_NPM_TOKEN  Forgejo 개인 액세스 토큰 (선택 — 없으면 미러를 건너뛴다)
+#   FORGEJO_NPM_OWNER  Forgejo 패키지 소유자 (기본: yunchan)
+#   GITHUB_SERVER_URL  Forgejo 주소 (Actions 가 준다)
+#
+# 이미 배포된 버전이면 조용히 건너뛴다 — 워크플로 재실행이 실패로 끝나지 않게.
+set -euo pipefail
+
+PKG_DIR="${1:-packages/cli}"
+cd "$PKG_DIR"
+
+name="$(node -p 'require("./package.json").name')"
+version="$(node -p 'require("./package.json").version')"
+echo "배포 대상: ${name}@${version}"
+
+published() { # <registry-url>
+  npm view "${name}@${version}" version --registry "$1" >/dev/null 2>&1
+}
+
+# ── 1) npmjs ──
+if [ -z "${NPM_TOKEN:-}" ]; then
+  echo "NPM_TOKEN 이 없다 — npmjs 배포를 건너뛴다" >&2
+else
+  npmrc="$(mktemp)"
+  echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > "$npmrc"
+  export NPM_CONFIG_USERCONFIG="$npmrc"
+
+  if published "https://registry.npmjs.org/"; then
+    echo "npmjs: ${version} 은 이미 배포돼 있다 — 건너뛴다"
+  else
+    npm publish --access public --registry "https://registry.npmjs.org/" --provenance=false
+    echo "npmjs 배포 완료: ${name}@${version}"
+  fi
+  rm -f "$npmrc"
+  unset NPM_CONFIG_USERCONFIG
+fi
+
+# ── 2) Forgejo 미러 ──
+if [ -z "${FORGEJO_NPM_TOKEN:-}" ]; then
+  echo "FORGEJO_NPM_TOKEN 이 없다 — 사설 레지스트리 미러를 건너뛴다"
+  exit 0
+fi
+
+owner="${FORGEJO_NPM_OWNER:-yunchan}"
+server="${GITHUB_SERVER_URL:-https://git.chanpaca.net}"
+host="${server#*://}"; host="${host%/}"
+registry="${server%/}/api/packages/${owner}/npm/"
+
+npmrc="$(mktemp)"
+{
+  echo "registry=${registry}"
+  # 스킴을 뺀 형태로 적어야 Forgejo 가 인증을 인식한다
+  echo "//${host}/api/packages/${owner}/npm/:_authToken=${FORGEJO_NPM_TOKEN}"
+} > "$npmrc"
+export NPM_CONFIG_USERCONFIG="$npmrc"
+
+if published "$registry"; then
+  echo "Forgejo: ${version} 은 이미 미러돼 있다 — 건너뛴다"
+else
+  npm publish --registry "$registry"
+  echo "Forgejo 미러 완료: ${registry}"
+fi
+rm -f "$npmrc"
diff --git a/build/ci/upload-release-asset.sh b/build/ci/upload-release-asset.sh
new file mode 100644
index 0000000..75077ee
--- /dev/null
+++ b/build/ci/upload-release-asset.sh
@@ -0,0 +1,56 @@
+#!/usr/bin/env bash
+# Forgejo 릴리스(draft)에 산출물을 업로드한다. 릴리스가 없으면 만들고, 동명 자산은 교체한다(재실행 멱등).
+# 사용: build/ci/upload-release-asset.sh <릴리스태그> <파일...>
+# 필요 환경: RELEASE_TOKEN + (Actions 기본 제공) GITHUB_SERVER_URL, GITHUB_REPOSITORY
+#            RELEASE_REPO 를 주면 해당 저장소로 업로드(공개 배포 저장소용), 없으면 현재 저장소
+#            RELEASE_PRERELEASE=true 면 prerelease 로 생성(리허설용)
+set -euo pipefail
+[ $# -ge 2 ] || { echo "사용법: $0 <태그> <파일...>" >&2; exit 2; }
+[ -n "${RELEASE_TOKEN:-}" ] || { echo "RELEASE_TOKEN 환경변수가 없습니다" >&2; exit 2; }
+tag="$1"; shift
+api="${GITHUB_SERVER_URL%/}/api/v1/repos/${RELEASE_REPO:-$GITHUB_REPOSITORY}"
+auth="Authorization: token ${RELEASE_TOKEN}"
+
+# draft 릴리스는 tags/<tag> 단건 조회에 안 잡힐 수 있어 목록에서 tag_name 으로 찾는다
+# tr -d '\r': Windows Git Bash 에서 python 출력이 CRLF 로 나와 id 가 오염되는 것 방지
+find_release() {
+  curl -sf -H "$auth" "$api/releases?limit=50" | python3 -c '
+import json, sys
+tag = sys.argv[1]
+for r in json.load(sys.stdin):
+    if r.get("tag_name") == tag:
+        print(r["id"]); break' "$tag" | tr -d '\r'
+}
+
+rid="$(find_release || true)"
+if [ -z "$rid" ]; then
+  body=$(printf '{"tag_name":"%s","name":"%s","draft":true,"prerelease":%s}' \
+         "$tag" "$tag" "${RELEASE_PRERELEASE:-false}")
+  rid=$(curl -s -X POST -H "$auth" -H 'Content-Type: application/json' -d "$body" "$api/releases" \
+        | python3 -c 'import json,sys
+d = json.load(sys.stdin)
+print(d["id"] if isinstance(d, dict) and "id" in d else "")' | tr -d '\r' || true)
+  [ -n "$rid" ] || rid="$(find_release || true)"   # 병렬 잡 동시 생성 경합 대비
+fi
+[ -n "$rid" ] || { echo "릴리스 확보 실패: $tag" >&2; exit 1; }
+echo "릴리스 #$rid ($tag)"
+
+for f in "$@"; do
+  name=$(basename "$f")
+  # 재실행 멱등성: 동명 자산 제거 후 업로드
+  curl -sf -H "$auth" "$api/releases/$rid/assets" | python3 -c '
+import json, sys
+for a in json.load(sys.stdin):
+    if a.get("name") == sys.argv[1]:
+        print(a["id"])' "$name" | tr -d '\r' | while read -r aid; do
+    [ -n "$aid" ] && curl -sf -X DELETE -H "$auth" "$api/releases/$rid/assets/$aid" || true
+  done
+  resp=$(mktemp)
+  code=$(curl -s -o "$resp" -w '%{http_code}' -X POST -H "$auth" \
+         -F "attachment=@$f" "$api/releases/$rid/assets?name=$name")
+  if [ "$code" != 201 ]; then
+    echo "업로드 실패($code): $name" >&2; cat "$resp" >&2; rm -f "$resp"; exit 1
+  fi
+  rm -f "$resp"
+  echo "업로드 완료: $name ($(du -h "$f" | cut -f1))"
+done
diff --git a/build/ci/verify-node.sh b/build/ci/verify-node.sh
new file mode 100644
index 0000000..1ffdaaf
--- /dev/null
+++ b/build/ci/verify-node.sh
@@ -0,0 +1,43 @@
+#!/usr/bin/env bash
+# host 모드 러너에는 Node 가 없을 수 있다. 여기서 명확히 실패시켜 CI 로그를 읽을 수 있게 한다.
+# 필요하면 러너에 nvm/fnm 으로 설치된 Node 를 PATH 에 올려준다.
+set -euo pipefail
+
+MIN_MAJOR=20
+
+add_path() { echo "$1" >> "${GITHUB_PATH:-/dev/null}"; export PATH="$1:$PATH"; }
+
+if ! command -v node >/dev/null 2>&1; then
+  # 러너에 흔히 있는 위치를 훑는다
+  for cand in "$HOME/.nvm/versions/node"/*/bin "$HOME/.local/share/fnm/node-versions"/*/installation/bin "$HOME/.volta/bin"; do
+    [ -d "$cand" ] && add_path "$cand" && break
+  done
+fi
+
+if ! command -v node >/dev/null 2>&1; then
+  cat >&2 <<'MSG'
+Node 를 찾을 수 없다.
+
+이 워크플로는 self-hosted host 러너에서 돈다. 러너 머신에 Node 20 이상을 설치하고
+러너 사용자의 PATH 에 올려라. 예: fnm install 22 && fnm default 22
+MSG
+  exit 1
+fi
+
+major="$(node -p 'process.versions.node.split(".")[0]')"
+if [ "$major" -lt "$MIN_MAJOR" ]; then
+  echo "Node $MIN_MAJOR 이상이 필요하다 (현재 $(node -v))" >&2
+  exit 1
+fi
+
+# pnpm 은 corepack 으로 확보한다 — 러너에 전역 설치를 요구하지 않는다
+if ! command -v pnpm >/dev/null 2>&1; then
+  corepack enable >/dev/null 2>&1 || true
+  corepack prepare pnpm@10.5.2 --activate >/dev/null 2>&1 || true
+fi
+if ! command -v pnpm >/dev/null 2>&1; then
+  echo "pnpm 을 확보하지 못했다. corepack 이 막혀 있으면 npm i -g pnpm@10.5.2 로 설치해라" >&2
+  exit 1
+fi
+
+echo "node $(node -v) / pnpm $(pnpm -v) / npm $(npm -v)"
diff --git a/docs/DEPLOYMENT_PLAN.md b/docs/DEPLOYMENT_PLAN.md
new file mode 100644
index 0000000..a55fbe6
--- /dev/null
+++ b/docs/DEPLOYMENT_PLAN.md
@@ -0,0 +1,130 @@
+# designpaca 배포 운영 계획
+
+이 문서는 designpaca를 git.chanpaca.net(Forgejo)에서 빌드·배포·릴리스하기 위한 전제와 절차를 적는다.
+한 번 읽고 그대로 따라 하면 첫 릴리스까지 갈 수 있어야 한다.
+
+## 0. 전제 — 러너 환경
+
+CI는 self-hosted **`linux-builder`** 러너(host 모드)에서 돈다. host 모드라 러너 머신에 있는 것만 쓸 수 있다.
+
+| 필요 | 확인 | 없을 때 |
+|---|---|---|
+| Node 20 이상 | `node -v` | `fnm install 22 && fnm default 22` 후 러너 재시작 |
+| pnpm 10 | `pnpm -v` | `corepack enable && corepack prepare pnpm@10.5.2 --activate` |
+| git, curl, tar, python3 | `command -v` | 배포판 패키지로 설치 |
+
+`build/ci/verify-node.sh`가 매 잡 첫 스텝에서 이걸 검사하고, 없으면 **명확한 메시지로 즉시 실패**시킨다.
+nvm/fnm/volta의 흔한 설치 경로는 자동으로 PATH에 올려본다.
+
+> host 러너에는 Node가 없을 수 있으므로 워크플로에서 `uses:` 액션을 쓰지 않는다.
+> 체크아웃도 `run:` 스텝의 git 명령으로 처리한다 (videodownloader 파이프라인과 동일한 패턴).
+
+## 1. 저장소
+
+```
+git.chanpaca.net/<owner>/designpaca
+```
+
+- 소스 공개 여부는 자유. 단 **npm 배포는 npmjs 공개 레지스트리**이므로 코드는 어차피 tarball로 공개된다
+- 기본 브랜치: `main`
+- 태그 규칙: `v<semver>` (예: `v0.1.0`) — 태그 푸시가 릴리스 트리거
+
+## 2. 시크릿 등록
+
+저장소 → Settings → Actions → Secrets 에 등록한다.
+
+| 이름 | 용도 | 발급처 |
+|---|---|---|
+| `NPM_TOKEN` | npmjs 배포 | npmjs.com → Access Tokens → **Automation** 타입 |
+| `FORGEJO_NPM_TOKEN` | 사설 레지스트리 미러 | Forgejo → 설정 → 애플리케이션 → 액세스 토큰 (`write:package` 권한) |
+| `RELEASE_TOKEN` | 릴리스 생성·자산 업로드 | Forgejo 액세스 토큰 (`write:repository`) |
+| `CF_API_TOKEN` | Cloudflare Pages 배포 | Cloudflare → API Tokens → **Edit Cloudflare Workers** 템플릿 |
+| `CF_ACCOUNT_ID` | Cloudflare 계정 식별 | Cloudflare 대시보드 우측 하단 Account ID |
+
+변수(Variables)에 선택적으로:
+
+| 이름 | 기본값 | 설명 |
+|---|---|---|
+| `FORGEJO_NPM_OWNER` | `yunchan` | 사설 npm 패키지 소유자 |
+
+> **시크릿이 없어도 파이프라인은 죽지 않는다.** `publish-npm.sh`는 `FORGEJO_NPM_TOKEN`이 없으면 미러를 건너뛰고,
+> 릴리스 스텝은 `CF_API_TOKEN`이 없으면 페이지 배포를 건너뛴다. 하나씩 붙여가며 굴릴 수 있다.
+
+## 3. 릴리스 절차
+
+### 3.1 변경 기록
+```bash
+pnpm changeset            # 무엇이 바뀌었는지, patch/minor/major 중 무엇인지 기록
+git add .changeset && git commit -m "changeset: <요약>"
+```
+
+### 3.2 버전 확정
+```bash
+pnpm version              # changeset version + lockfile 갱신
+# packages/*/package.json 과 CHANGELOG.md 가 갱신된다
+git add -A && git commit -m "release: v<새 버전>"
+```
+`designpaca` · `@designpaca/core` · `@designpaca/skill`은 changesets의 **fixed 그룹**이라 항상 같은 버전으로 움직인다.
+스킬 내용과 CLI 버전이 어긋나면 업그레이드 판정(`.designpaca_version` 비교)이 깨지기 때문이다.
+
+### 3.3 태그 푸시 = 릴리스 발동
+```bash
+git tag v0.1.0 && git push origin main --tags
+```
+
+파이프라인이 순서대로 수행한다:
+1. `verify-node.sh` → 의존성 설치
+2. **태그와 `packages/cli/package.json` 버전 일치 확인** (다르면 즉시 실패)
+3. 스킬 문서 검사 → 타입 검사 → 테스트 → 빌드 → 배포물 점검
+4. `npm publish` (npmjs) → Forgejo 레지스트리 미러. **이미 배포된 버전이면 조용히 건너뛴다**(재실행 안전)
+5. Forgejo **draft 릴리스** 생성 + tarball 첨부
+6. Cloudflare Pages 배포
+
+### 3.4 승격
+draft 릴리스를 확인하고 수동으로 **Publish**한다. draft는 익명에게 보이지 않으므로 QA 시간을 벌 수 있다.
+
+### 3.5 리허설
+태그 없이 돌려볼 수 있다. Actions → release → **Run workflow**.
+`ci-rehearsal` prerelease 릴리스로 전 과정을 검증하되 **npm 배포는 건너뛴다**(`DO_PUBLISH=0`).
+
+## 4. 사용자 설치 경로
+
+```bash
+npx designpaca                 # 온보딩 TUI
+npx designpaca install -t claude-code,codex -s user -y
+```
+
+사설 레지스트리에서 직접 받으려면:
+```bash
+npx --registry=https://git.chanpaca.net/api/packages/<owner>/npm/ designpaca
+```
+
+## 5. 소개 페이지
+
+- 배포 대상: Cloudflare Pages 프로젝트 **`designpaca`**
+- 도메인: `designpaca.chanpaca.net` (Cloudflare DNS에 CNAME → Pages)
+- 최초 1회만 수동: Cloudflare 대시보드에서 Pages 프로젝트 생성(빈 프로젝트) → 커스텀 도메인 연결.
+  이후에는 릴리스 워크플로의 `wrangler pages deploy`가 알아서 올린다
+
+## 6. 장애 대응
+
+| 증상 | 원인 | 조치 |
+|---|---|---|
+| `Node 를 찾을 수 없다` | host 러너에 Node 미설치 | 러너 머신에 fnm으로 Node 22 설치 후 러너 재시작 |
+| `태그와 package.json 이 다르다` | `pnpm version` 없이 태그를 밀었다 | 태그 삭제 → 3.2부터 다시 |
+| npm publish 403 | 토큰 만료 / 이름 선점 | `NPM_TOKEN` 재발급, `npm view designpaca` 로 소유 확인 |
+| Forgejo 미러 401 | 토큰에 `write:package` 없음 | 토큰 권한 재발급 |
+| 릴리스 자산 업로드 실패 | `RELEASE_TOKEN` 권한 부족 | `write:repository` 부여 |
+| Pages 배포 스킵 | `CF_API_TOKEN` 미등록 | 시크릿 등록 (없어도 나머지는 성공한다) |
+
+## 7. 롤백
+
+npm은 배포 취소가 사실상 불가능하다(72시간 이내 unpublish만 가능, 같은 버전 재사용 금지).
+따라서 **되돌리기가 아니라 앞으로 감는다**:
+
+```bash
+# 문제 버전을 latest 에서 내린다
+npm dist-tag add designpaca@<직전 정상 버전> latest
+# 수정 후 새 패치 릴리스
+```
+사용자 쪽 복구는 `npx designpaca@<정상버전> update --force`.
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8830d45
--- /dev/null
+++ b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "designpaca-monorepo",
+  "version": "0.0.0",
+  "private": true,
+  "description": "designpaca — 웹 디자인 파이프라인 스킬과 설치 CLI",
+  "packageManager": "pnpm@10.5.2",
+  "engines": {
+    "node": ">=20.11"
+  },
+  "scripts": {
+    "build": "pnpm -r --filter \"./packages/**\" build",
+    "build:site": "pnpm --filter @designpaca/site build",
+    "dev": "pnpm --filter designpaca dev",
+    "dev:site": "pnpm --filter @designpaca/site dev",
+    "typecheck": "pnpm -r --filter \"./packages/**\" typecheck",
+    "test": "pnpm -r test",
+    "lint": "pnpm -r lint",
+    "changeset": "changeset",
+    "version": "changeset version && pnpm install --lockfile-only",
+    "release": "pnpm build && changeset publish"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.10",
+    "typescript": "^5.7.2"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
+  }
+}
diff --git a/packages/cli/README.md b/packages/cli/README.md
new file mode 100644
index 0000000..19ea25d
--- /dev/null
+++ b/packages/cli/README.md
@@ -0,0 +1,116 @@
+# designpaca
+
+**웹 디자인 파이프라인 스킬을 Claude Code · Codex · Cursor 에 한 줄로 설치한다.**
+
+```bash
+npx designpaca
+```
+
+---
+
+## 무엇인가
+
+designpaca 는 AI 코딩 에이전트에게 **웹 디자인을 순서대로 하게 만드는 스킬**이다.
+
+"예쁘게 만들어줘"라고 하면 에이전트는 자기가 아는 기본값을 쏟아낸다. 보라-파랑 그라디언트, Inter, 3열 아이콘 카드, `rounded-2xl shadow-lg`. 못 만들어서가 아니라 **결정을 안 해서** 그렇게 된다. designpaca 는 그 결정을 강제한다.
+
+### 7단계 파이프라인
+
+| 단계 | 하는 일 | 통과 조건 |
+|---|---|---|
+| 0 | 브리프 게이트 | 무엇을·누구에게·제약 3줄 |
+| 1 | **레퍼런스 조사** | 실제 사이트 3개를 서로 다른 층위에서 |
+| 2 | 방향 결정 | 한 문장 컨셉 + 프리셋 + 감수할 리스크 하나 |
+| 3 | 디자인 토큰 | 타입·색·간격·모션을 실제 값으로 + 성능 예산 |
+| 4 | 구현 | 레이아웃 → 재질(SVG 필터) → 입체(three.js) → 모션 |
+| 5 | 프리플라이트 | 하드 게이트 12개 + 슬롭 지문 grep |
+| 6 | 결정 기록 | `design.md` 로 다음 실행에 인계 |
+
+1단계를 건너뛴 디자인은 5단계에서 실패 처리된다. **머릿속 기본값이 아니라 실제로 존재하는 사이트에서 시작하게 만드는 것**이 이 스킬의 핵심이다.
+
+### 무엇이 들어 있나
+
+- **레퍼런스 갤러리 라우팅** — 브리프별로 어디를 볼지. Awwwards 수상작이 럭셔리·자동차에 몰려 있어 SaaS 브리프에 이식하면 안 된다는 것까지
+- **AI 슬롭 지문 목록** — 실측 검출률과 함께. 보라 CTA 10.7%, 전체 대문자 헤드라인 10.5%, 번호 매긴 1·2·3 단계 9.4%. grep 으로 기계 검출 가능
+- **SVG 필터를 재질로** — 그레인·굴절·잉크 번짐·수차. 장식이 아니라 "이 디자인의 표면은 무엇인가"를 정하는 도구로
+- **three.js를 예산 안에서** — 지연 로드, DPR 클램프, 품질 티어, 폴백. 캔버스를 LCP 요소로 만들지 않는 규칙
+- **인터랙티브 모션** — 이징의 의미론, 마이크로 인터랙션, `prefers-reduced-motion` 의 올바른 대응
+- **한글 조판** — `word-break: keep-all`, line-height 1.6~1.8, 음수 자간 금지, 한글 폰트 페어링. 서구 레퍼런스에 없는 정보
+- **HTML-in-Canvas** — Chrome 실험 API. 폴백을 완성한 뒤에만 얹도록 격리
+
+## 설치
+
+```bash
+npx designpaca              # 대화형 온보딩 (권장)
+```
+
+설치 대상을 자동 감지해서 기본 선택해준다.
+
+### 비대화형
+
+```bash
+npx designpaca install -t claude-code,codex -s user -y
+npx designpaca install -t cursor -s project
+```
+
+| 대상 | 설치 위치 |
+|---|---|
+| `claude-code` | `~/.claude/skills/designpaca/` (또는 프로젝트 `.claude/`) |
+| `codex` | `~/.codex/skills/designpaca/` |
+| `cursor` | `.cursor/rules/designpaca.mdc` (프로젝트 단위) |
+| `agents-md` | `AGENTS.md` 에 블록 주입 |
+
+## 사용
+
+설치 후 에이전트에게 그냥 말하면 된다.
+
+```
+랜딩 페이지 만들어줘 — 수제 커피 로스터리, 원두 정기구독이 목적
+```
+
+Claude Code 에서는 `/designpaca` 로 명시적으로 부를 수도 있다.
+
+## 명령어
+
+```bash
+npx designpaca update       # 최신 스킬로 갱신
+npx designpaca doctor       # 설치 상태 진단
+npx designpaca list         # 설치 가능 대상과 현재 설치 목록
+npx designpaca uninstall    # 제거
+```
+
+### 업데이트가 내 수정을 덮지 않는다
+
+스킬 파일을 직접 고쳤다면 `update` 는 **그 파일을 건드리지 않고 건너뛴다.** 설치 시점의 해시를 기록해두고 비교하기 때문이다.
+
+강제로 최신 내용에 맞추려면 `--force` 를 쓴다. 이때도 원본은 `.orig` 로 남는다.
+
+```bash
+npx designpaca update --force
+```
+
+`AGENTS.md` 처럼 사용자 문서에 주입하는 경우, 마커 블록(`<!-- designpaca:start -->`) **안쪽만** 교체한다. 문서의 나머지는 손대지 않는다. 제거할 때도 블록만 빼간다.
+
+## 옵션
+
+| 옵션 | 설명 |
+|---|---|
+| `-t, --target <id[,id]>` | `claude-code` `codex` `cursor` `agents-md` |
+| `-s, --scope <범위>` | `user` (전역) \| `project` |
+| `-y, --yes` | 확인 없이 진행 |
+| `-f, --force` | 직접 수정한 파일도 덮어쓴다 (`.orig` 백업) |
+| `--dry-run` | 쓰지 않고 계획만 출력 |
+| `--no-update-check` | 새 버전 확인 생략 |
+
+## 요구사항
+
+Node 20.11 이상.
+
+## 링크
+
+- 소개 페이지 — https://designpaca.chanpaca.net
+- 저장소 — https://git.chanpaca.net/yunchan/designpaca
+
+## 라이선스
+
+MIT
diff --git a/packages/cli/package.json b/packages/cli/package.json
new file mode 100644
index 0000000..fd9903d
--- /dev/null
+++ b/packages/cli/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "designpaca",
+  "version": "0.1.0",
+  "description": "웹 디자인 파이프라인 스킬 — Claude Code · Codex · Cursor 에 한 줄로 설치한다",
+  "keywords": ["design", "web-design", "claude-code", "codex", "cursor", "agent-skill", "svg-filter", "threejs"],
+  "license": "MIT",
+  "author": "Yun Chan",
+  "homepage": "https://designpaca.chanpaca.net",
+  "repository": { "type": "git", "url": "git+https://git.chanpaca.net/yunchan/designpaca.git" },
+  "type": "module",
+  "bin": { "designpaca": "./dist/index.js" },
+  "files": ["dist", "README.md"],
+  "engines": { "node": ">=20.11" },
+  "scripts": {
+    "build": "node scripts/bundle-skill.mjs && tsup",
+    "dev": "node scripts/bundle-skill.mjs && tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "node --test --experimental-strip-types --disable-warning=ExperimentalWarning test/*.test.ts",
+    "prepublishOnly": "node scripts/verify-package.mjs"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.9.1",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@designpaca/core": "workspace:*",
+    "@designpaca/skill": "workspace:*",
+    "@types/node": "^22.10.2",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  }
+}
diff --git a/packages/cli/scripts/bundle-skill.mjs b/packages/cli/scripts/bundle-skill.mjs
new file mode 100644
index 0000000..8458abc
--- /dev/null
+++ b/packages/cli/scripts/bundle-skill.mjs
@@ -0,0 +1,30 @@
+// packages/skill 의 내용을 CLI 배포물 안(dist/skill)으로 복사한다.
+// 스킬 본문이 npm 패키지에 함께 실려야 npx 한 번으로 설치가 끝난다.
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const src = path.resolve(here, "../../skill");
+const dest = path.resolve(here, "../dist/skill");
+
+async function copyDir(from, to) {
+  await fs.mkdir(to, { recursive: true });
+  for (const e of await fs.readdir(from, { withFileTypes: true })) {
+    if (e.name === "node_modules" || e.name === "package.json") continue;
+    const s = path.join(from, e.name);
+    const d = path.join(to, e.name);
+    if (e.isDirectory()) await copyDir(s, d);
+    else await fs.copyFile(s, d);
+  }
+}
+
+await fs.rm(dest, { recursive: true, force: true });
+await copyDir(src, dest);
+
+// 스킬 버전은 CLI 버전과 항상 같다(changesets fixed 그룹) — 여기서 스탬프를 찍어 런타임 조회를 없앤다
+const pkg = JSON.parse(await fs.readFile(path.resolve(here, "../package.json"), "utf8"));
+await fs.writeFile(path.join(dest, ".designpaca_version"), `${pkg.version}\n`, "utf8");
+
+const count = (await fs.readdir(dest, { recursive: true })).length;
+console.log(`스킬 번들 완료: ${count}개 항목 → dist/skill`);
diff --git a/packages/cli/scripts/verify-package.mjs b/packages/cli/scripts/verify-package.mjs
new file mode 100644
index 0000000..5f868ac
--- /dev/null
+++ b/packages/cli/scripts/verify-package.mjs
@@ -0,0 +1,29 @@
+// publish 직전 최종 점검 — 스킬이 빠진 채로 배포되는 사고를 막는다.
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const must = ["dist/index.js", "dist/skill/SKILL.md", "dist/skill/.designpaca_version"];
+
+const missing = [];
+for (const rel of must) {
+  try {
+    await fs.access(path.join(root, rel));
+  } catch {
+    missing.push(rel);
+  }
+}
+if (missing.length) {
+  console.error(`배포물에 빠진 파일:\n${missing.map((m) => `  - ${m}`).join("\n")}`);
+  console.error("pnpm build 를 먼저 실행해라.");
+  process.exit(1);
+}
+
+const pkg = JSON.parse(await fs.readFile(path.join(root, "package.json"), "utf8"));
+const stamp = (await fs.readFile(path.join(root, "dist/skill/.designpaca_version"), "utf8")).trim();
+if (stamp !== pkg.version) {
+  console.error(`버전 불일치: package.json=${pkg.version} / 스킬 스탬프=${stamp}`);
+  process.exit(1);
+}
+console.log(`배포 점검 통과 (v${pkg.version})`);
diff --git a/packages/cli/src/commands/doctor.ts b/packages/cli/src/commands/doctor.ts
new file mode 100644
index 0000000..66f1e0c
--- /dev/null
+++ b/packages/cli/src/commands/doctor.ts
@@ -0,0 +1,55 @@
+import { inspectDrift, pruneDeadInstalls, readManifest, tildify } from "@designpaca/core";
+import { getVersion } from "../skill.ts";
+import { bad, dim, heading, info, ok, table, warn } from "../ui.ts";
+
+export async function runDoctor(): Promise<number> {
+  const version = await getVersion();
+  const pruned = await pruneDeadInstalls();
+  const manifest = await readManifest();
+
+  console.log(heading("designpaca 진단"));
+  console.log(
+    table([
+      ["CLI 버전", version],
+      ["Node", process.version],
+      ["설치 기록", `${manifest.installs.length}건`],
+    ]),
+  );
+  if (pruned > 0) console.log(info(`사라진 설치 기록 ${pruned}건을 정리했다`));
+
+  if (manifest.installs.length === 0) {
+    console.log(warn("설치된 곳이 없다. `npx designpaca install` 로 설치해라."));
+    return 0;
+  }
+
+  let problems = 0;
+  for (const rec of manifest.installs) {
+    const drift = await inspectDrift(rec);
+    const missing = drift.files.filter((f) => f.status === "missing");
+    const modified = drift.files.filter((f) => f.status === "modified");
+
+    console.log(heading(`${rec.target} (${rec.scope})`));
+    console.log(
+      table([
+        ["위치", tildify(rec.root)],
+        ["버전", rec.version === version ? rec.version : `${rec.version} → ${version} 업데이트 가능`],
+        ["파일", `${rec.files.length}개`],
+      ]),
+    );
+
+    if (rec.version !== version) problems++;
+    if (missing.length > 0) {
+      problems++;
+      console.log(bad(`파일 ${missing.length}개가 사라졌다 — \`designpaca update --force\` 로 복구해라`));
+      for (const m of missing.slice(0, 5)) console.log(dim(`    ${tildify(m.path)}`));
+    }
+    if (modified.length > 0) {
+      console.log(warn(`직접 수정한 파일 ${modified.length}개 — 업데이트가 이 파일들을 건너뛴다`));
+      for (const m of modified.slice(0, 5)) console.log(dim(`    ${tildify(m.path)}`));
+    }
+    if (missing.length === 0 && modified.length === 0 && rec.version === version) {
+      console.log(ok("정상"));
+    }
+  }
+  return problems > 0 ? 1 : 0;
+}
diff --git a/packages/cli/src/commands/install.ts b/packages/cli/src/commands/install.ts
new file mode 100644
index 0000000..5d717e5
--- /dev/null
+++ b/packages/cli/src/commands/install.ts
@@ -0,0 +1,90 @@
+import {
+  applyPlan,
+  planInstall,
+  tildify,
+  type Scope,
+  type TargetId,
+} from "@designpaca/core";
+import { getSkill } from "../skill.ts";
+import { bad, dim, fold, heading, info, ok, warn } from "../ui.ts";
+
+export interface InstallOptions {
+  targets: TargetId[];
+  scope: Scope;
+  force?: boolean;
+  /** 실제로 쓰지 않고 계획만 출력 */
+  dryRun?: boolean;
+}
+
+export interface InstallOutcome {
+  target: TargetId;
+  root: string;
+  written: number;
+  skipped: string[];
+  blocked?: string;
+}
+
+/** install/update/TUI 가 공유하는 실제 설치 실행부 */
+export async function runInstall(opts: InstallOptions): Promise<InstallOutcome[]> {
+  const skill = await getSkill();
+  const outcomes: InstallOutcome[] = [];
+
+  for (const target of opts.targets) {
+    const plan = await planInstall(target, opts.scope, skill);
+    if (plan.blocked) {
+      outcomes.push({ target, root: "", written: 0, skipped: [], blocked: plan.blocked });
+      continue;
+    }
+    if (opts.dryRun) {
+      outcomes.push({ target, root: plan.root, written: plan.actions.length, skipped: [] });
+      continue;
+    }
+    const res = await applyPlan(plan, skill.version, { force: opts.force });
+    outcomes.push({
+      target,
+      root: plan.root,
+      written: res.written.length,
+      skipped: res.skipped,
+    });
+  }
+  return outcomes;
+}
+
+export function printOutcomes(outcomes: InstallOutcome[], dryRun = false): void {
+  console.log(heading(dryRun ? "설치 계획" : "설치 결과"));
+  for (const o of outcomes) {
+    if (o.blocked) {
+      console.log(bad(`${o.target}: ${o.blocked}`));
+      continue;
+    }
+    const verb = dryRun ? "쓸 파일" : "설치됨";
+    console.log(ok(`${o.target} — ${verb} ${o.written}개  ${dim(tildify(o.root))}`));
+    if (o.skipped.length > 0) {
+      console.log(warn(`  직접 수정한 파일이라 건드리지 않았다 (--force 로 덮어쓴다):`));
+      for (const s of fold(o.skipped)) console.log(dim(`    ${tildify(s)}`));
+    }
+  }
+}
+
+/** 설치 후 안내 — 여기서 끝내지 말고 다음 행동을 알려준다 */
+export function printNextSteps(targets: TargetId[]): void {
+  console.log(heading("다음 단계"));
+  if (targets.includes("claude-code")) {
+    console.log(info(`Claude Code 를 새로 열고 ${dim("/designpaca")} 를 실행해라`));
+  }
+  if (targets.includes("codex")) {
+    console.log(info(`Codex CLI 에서 designpaca 스킬이 자동으로 잡힌다`));
+  }
+  if (targets.includes("cursor")) {
+    console.log(info(`Cursor 는 ${dim(".cursor/rules/designpaca.mdc")} 를 프로젝트 열 때 읽는다`));
+  }
+  if (targets.includes("windsurf")) {
+    console.log(info(`Windsurf 는 ${dim(".windsurf/rules/designpaca.md")} 를 읽는다`));
+  }
+  if (targets.includes("agents-md")) {
+    console.log(
+      info(`AGENTS.md 에는 포인터만 넣었다 — 본문은 ${dim(".designpaca/SKILL.md")} 에 있다`),
+    );
+  }
+  console.log(info(`문서: ${dim("https://designpaca.chanpaca.net")}`));
+}
diff --git a/packages/cli/src/commands/list.ts b/packages/cli/src/commands/list.ts
new file mode 100644
index 0000000..458f8c0
--- /dev/null
+++ b/packages/cli/src/commands/list.ts
@@ -0,0 +1,30 @@
+import { ADAPTERS, readManifest, tildify } from "@designpaca/core";
+import { getVersion } from "../skill.ts";
+import { dim, heading, info, ok, padDisplay, table } from "../ui.ts";
+
+export async function runList(): Promise<number> {
+  const version = await getVersion();
+  const manifest = await readManifest();
+
+  console.log(heading("설치 가능한 대상"));
+  for (const a of ADAPTERS) {
+    console.log(`  ${padDisplay(a.label, 18)} ${dim(a.hint)}  ${dim(`[${a.scopes.join("|")}]`)}`);
+  }
+
+  console.log(heading(`현재 설치 (CLI v${version})`));
+  if (manifest.installs.length === 0) {
+    console.log(info("없음"));
+    return 0;
+  }
+  for (const rec of manifest.installs) {
+    console.log(ok(`${rec.target} (${rec.scope})`));
+    console.log(
+      table([
+        ["위치", tildify(rec.root)],
+        ["버전", rec.version],
+        ["설치 시각", new Date(rec.installedAt).toLocaleString("ko-KR")],
+      ]),
+    );
+  }
+  return 0;
+}
diff --git a/packages/cli/src/commands/uninstall.ts b/packages/cli/src/commands/uninstall.ts
new file mode 100644
index 0000000..26aba00
--- /dev/null
+++ b/packages/cli/src/commands/uninstall.ts
@@ -0,0 +1,30 @@
+import { readManifest, removeInstall, tildify, type TargetId } from "@designpaca/core";
+import { dim, heading, ok, warn } from "../ui.ts";
+
+export async function runUninstall(opts: {
+  targets?: TargetId[];
+  force?: boolean;
+}): Promise<number> {
+  const manifest = await readManifest();
+  const targets = manifest.installs.filter(
+    (i) => !opts.targets || opts.targets.length === 0 || opts.targets.includes(i.target),
+  );
+
+  if (targets.length === 0) {
+    console.log(warn("제거할 설치 기록이 없다"));
+    return 0;
+  }
+
+  console.log(heading("제거"));
+  for (const rec of targets) {
+    const res = await removeInstall(rec, { force: opts.force });
+    console.log(ok(`${rec.target} (${rec.scope}) — ${res.removed.length}개 제거  ${dim(tildify(rec.root))}`));
+    if (res.keptModified.length > 0) {
+      console.log(
+        warn(`  직접 수정한 파일 ${res.keptModified.length}개는 남겼다 (--force 로 함께 지운다)`),
+      );
+      for (const p of res.keptModified.slice(0, 5)) console.log(dim(`    ${tildify(p)}`));
+    }
+  }
+  return 0;
+}
diff --git a/packages/cli/src/commands/update.ts b/packages/cli/src/commands/update.ts
new file mode 100644
index 0000000..aeb3014
--- /dev/null
+++ b/packages/cli/src/commands/update.ts
@@ -0,0 +1,55 @@
+import { inspectDrift, readManifest, tildify } from "@designpaca/core";
+import { getVersion } from "../skill.ts";
+import { runInstall, printOutcomes } from "./install.ts";
+import { dim, heading, info, ok, warn } from "../ui.ts";
+
+/**
+ * 설치 기록을 그대로 따라가며 재설치한다.
+ * 사용자가 고친 파일은 기본적으로 보존된다(applyPlan 이 판단) — 강제로 맞추려면 --force.
+ */
+export async function runUpdate(opts: { force?: boolean } = {}): Promise<number> {
+  const version = await getVersion();
+  const manifest = await readManifest();
+
+  if (manifest.installs.length === 0) {
+    console.log(warn("설치 기록이 없다. `npx designpaca install` 을 먼저 실행해라."));
+    return 1;
+  }
+
+  console.log(heading(`업데이트 → v${version}`));
+  const stale = manifest.installs.filter((i) => i.version !== version);
+
+  if (stale.length === 0) {
+    console.log(ok("모든 설치가 이미 최신이다"));
+
+    // 버전이 같아도 파일이 사라졌거나 수정됐을 수 있다. 조용히 넘기면 사용자가 모른다.
+    let broken = 0;
+    for (const rec of manifest.installs) {
+      const drift = await inspectDrift(rec);
+      const missing = drift.files.filter((f) => f.status === "missing");
+      if (missing.length > 0) {
+        broken += missing.length;
+        console.log(warn(`${rec.target}: 파일 ${missing.length}개가 사라졌다 ${dim(tildify(rec.root))}`));
+      }
+      if (drift.modified.length > 0) {
+        console.log(info(`${rec.target}: 직접 수정한 파일 ${drift.modified.length}개는 그대로 둔다`));
+      }
+    }
+
+    if (!opts.force) {
+      console.log(dim(broken > 0 ? "  사라진 파일을 복구하려면 --force" : "  강제로 다시 쓰려면 --force"));
+      return broken > 0 ? 1 : 0;
+    }
+  }
+
+  for (const rec of manifest.installs) {
+    console.log(info(`${rec.target} (${rec.scope}) ${dim(tildify(rec.root))} — ${rec.version} → ${version}`));
+    const outcomes = await runInstall({
+      targets: [rec.target],
+      scope: rec.scope,
+      force: opts.force,
+    });
+    printOutcomes(outcomes);
+  }
+  return 0;
+}
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
new file mode 100644
index 0000000..bd0d5a6
--- /dev/null
+++ b/packages/cli/src/index.ts
@@ -0,0 +1,177 @@
+import { ADAPTERS, type Scope, type TargetId } from "@designpaca/core";
+import { getVersion } from "./skill.ts";
+import { checkForUpdate } from "./update-check.ts";
+import { printNextSteps, printOutcomes, runInstall } from "./commands/install.ts";
+import { runDoctor } from "./commands/doctor.ts";
+import { runUpdate } from "./commands/update.ts";
+import { runUninstall } from "./commands/uninstall.ts";
+import { runList } from "./commands/list.ts";
+import { onboard } from "./tui/onboard.ts";
+import { accent, bad, bold, dim, warn } from "./ui.ts";
+
+const VALID_TARGETS = ADAPTERS.map((a) => a.id) as string[];
+
+interface Args {
+  command: string;
+  targets: TargetId[];
+  scope: Scope;
+  yes: boolean;
+  force: boolean;
+  dryRun: boolean;
+  help: boolean;
+  version: boolean;
+}
+
+function parse(argv: string[]): Args {
+  const out: Args = {
+    command: "",
+    targets: [],
+    scope: "user",
+    yes: false,
+    force: false,
+    dryRun: false,
+    help: false,
+    version: false,
+  };
+
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i] as string;
+    if (a === "--help" || a === "-h") out.help = true;
+    else if (a === "--version" || a === "-v") out.version = true;
+    else if (a === "--yes" || a === "-y") out.yes = true;
+    else if (a === "--force" || a === "-f") out.force = true;
+    else if (a === "--dry-run") out.dryRun = true;
+    else if (a === "--no-update-check") process.env["DESIGNPACA_NO_UPDATE_CHECK"] = "1";
+    else if (a === "--target" || a === "-t") {
+      const v = argv[++i];
+      if (v) out.targets.push(...(v.split(",") as TargetId[]));
+    } else if (a.startsWith("--target=")) {
+      out.targets.push(...(a.slice(9).split(",") as TargetId[]));
+    } else if (a === "--scope" || a === "-s") {
+      const v = argv[++i];
+      if (v) out.scope = v as Scope;
+    } else if (a.startsWith("--scope=")) {
+      out.scope = a.slice(8) as Scope;
+    } else if (!a.startsWith("-") && !out.command) {
+      out.command = a;
+    }
+  }
+  return out;
+}
+
+function usage(version: string): string {
+  return `
+${accent("designpaca")} ${dim(`v${version}`)} — 웹 디자인 파이프라인 스킬 설치기
+
+${bold("사용법")}
+  npx designpaca                     대화형 온보딩 (권장)
+  npx designpaca install             설치
+  npx designpaca update              최신 스킬로 갱신
+  npx designpaca uninstall           제거
+  npx designpaca doctor              설치 상태 진단
+  npx designpaca list                설치 가능 대상과 현재 설치 목록
+
+${bold("옵션")}
+  -t, --target <id[,id]>   설치 대상: ${VALID_TARGETS.join(", ")}
+  -s, --scope <범위>       user | project            ${dim("(기본: user)")}
+  -y, --yes                확인 없이 진행
+  -f, --force              직접 수정한 파일도 덮어쓴다 ${dim("(.orig 로 백업)")}
+      --dry-run            쓰지 않고 계획만 출력
+      --no-update-check    새 버전 확인을 건너뛴다
+  -h, --help               이 도움말
+  -v, --version            버전
+
+${bold("예시")}
+  ${dim("npx designpaca install -t claude-code,codex -s user -y")}
+  ${dim("npx designpaca install -t cursor -s project")}
+  ${dim("npx designpaca update --force")}
+`.trimStart();
+}
+
+async function main(): Promise<number> {
+  const args = parse(process.argv.slice(2));
+  const version = await getVersion();
+
+  if (args.version) {
+    console.log(version);
+    return 0;
+  }
+  if (args.help) {
+    console.log(usage(version));
+    return 0;
+  }
+
+  const bad_ = args.targets.filter((t) => !VALID_TARGETS.includes(t));
+  if (bad_.length > 0) {
+    console.error(bad(`알 수 없는 대상: ${bad_.join(", ")}`));
+    console.error(dim(`  가능한 값: ${VALID_TARGETS.join(", ")}`));
+    return 2;
+  }
+  if (args.scope !== "user" && args.scope !== "project") {
+    console.error(bad(`알 수 없는 범위: ${args.scope} (user | project)`));
+    return 2;
+  }
+
+  // 대화형으로 쓸 수 있는 환경이면 인자 없이 실행했을 때 온보딩으로 보낸다
+  const interactive = process.stdout.isTTY && !args.yes;
+  if (!args.command || args.command === "onboard") {
+    if (interactive) return onboard();
+    console.log(usage(version));
+    return 0;
+  }
+
+  let code = 0;
+  switch (args.command) {
+    case "install": {
+      const targets = args.targets.length > 0 ? args.targets : (["claude-code"] as TargetId[]);
+      if (interactive && args.targets.length === 0) return onboard();
+      const outcomes = await runInstall({
+        targets,
+        scope: args.scope,
+        force: args.force,
+        dryRun: args.dryRun,
+      });
+      printOutcomes(outcomes, args.dryRun);
+      if (!args.dryRun) printNextSteps(targets);
+      code = outcomes.some((o) => o.blocked) ? 1 : 0;
+      break;
+    }
+    case "update":
+      code = await runUpdate({ force: args.force });
+      break;
+    case "uninstall":
+    case "remove":
+      code = await runUninstall({ targets: args.targets, force: args.force });
+      break;
+    case "doctor":
+      code = await runDoctor();
+      break;
+    case "list":
+    case "ls":
+      code = await runList();
+      break;
+    default:
+      console.error(bad(`알 수 없는 명령: ${args.command}`));
+      console.log(usage(version));
+      return 2;
+  }
+
+  // 명령을 마친 뒤에만 알린다 — 시작을 지연시키지 않는다
+  const latest = await checkForUpdate(version);
+  if (latest) {
+    console.log(
+      "\n" + warn(`새 버전 ${bold(`v${latest}`)} 이 있다 — ${dim("npx designpaca@latest update")}`),
+    );
+  }
+  return code;
+}
+
+main()
+  .then((code) => {
+    process.exitCode = code;
+  })
+  .catch((err: unknown) => {
+    console.error(bad(err instanceof Error ? err.message : String(err)));
+    if (process.env["DESIGNPACA_DEBUG"] === "1" && err instanceof Error) console.error(err.stack);
+    process.exitCode = 1;
+  });
diff --git a/packages/cli/src/skill.ts b/packages/cli/src/skill.ts
new file mode 100644
index 0000000..4e0c035
--- /dev/null
+++ b/packages/cli/src/skill.ts
@@ -0,0 +1,28 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { loadSkillSource, type SkillSource } from "@designpaca/core";
+
+/** 배포물 안에 함께 실린 스킬 원본 위치 (dist/skill) */
+export function bundledSkillRoot(): string {
+  return fileURLToPath(new URL("./skill", import.meta.url));
+}
+
+let cached: SkillSource | null = null;
+
+export async function getSkill(): Promise<SkillSource> {
+  if (cached) return cached;
+  const root = bundledSkillRoot();
+  let version = "0.0.0";
+  try {
+    version = (await fs.readFile(path.join(root, ".designpaca_version"), "utf8")).trim();
+  } catch {
+    /* 스탬프가 없으면 0.0.0 으로 두고 진행한다 — 설치 자체를 막을 이유는 없다 */
+  }
+  cached = await loadSkillSource(root, version);
+  return cached;
+}
+
+export async function getVersion(): Promise<string> {
+  return (await getSkill()).version;
+}
diff --git a/packages/cli/src/tui/onboard.ts b/packages/cli/src/tui/onboard.ts
new file mode 100644
index 0000000..4a621be
--- /dev/null
+++ b/packages/cli/src/tui/onboard.ts
@@ -0,0 +1,125 @@
+import * as p from "@clack/prompts";
+import path from "node:path";
+import {
+  ADAPTERS,
+  detectTargets,
+  getAdapter,
+  planInstall,
+  tildify,
+  type Scope,
+  type TargetId,
+} from "@designpaca/core";
+import { getSkill } from "../skill.ts";
+import { runInstall, printNextSteps, printOutcomes } from "../commands/install.ts";
+import { accent, bold, dim } from "../ui.ts";
+
+/** 선택한 범위를 어댑터가 지원하지 않으면 지원 가능한 범위로 낮춘다 */
+function effectiveScope(target: TargetId, wanted: Scope): Scope {
+  const a = getAdapter(target);
+  return a.scopes.includes(wanted) ? wanted : (a.scopes[0] as Scope);
+}
+
+export async function onboard(): Promise<number> {
+  const skill = await getSkill();
+
+  console.clear();
+  p.intro(`${accent("◆ designpaca")} ${dim(`v${skill.version}`)}`);
+
+  p.note(
+    [
+      "브리프에서 시작해 레퍼런스 조사 · 방향 결정 · 디자인 토큰 ·",
+      "구현 · 셀프 감사까지 끌고 가는 웹 디자인 파이프라인 스킬.",
+      "",
+      `${dim("SVG 필터 · three.js · 인터랙티브 모션을 기본 재료로 쓴다.")}`,
+    ].join("\n"),
+    "무엇을 설치하나",
+  );
+
+  // 시스템에 흔적이 있는 도구를 기본 체크해 둔다 — 사용자가 매번 고르게 하지 않는다
+  const detected = await detectTargets(skill);
+
+  const targets = await p.multiselect<TargetId>({
+    message: "어디에 설치할까?",
+    options: ADAPTERS.map((a) => ({
+      value: a.id,
+      label: a.label + (detected.includes(a.id) ? dim("  (감지됨)") : ""),
+      hint: a.hint,
+    })),
+    initialValues: detected.length > 0 ? detected : ["claude-code"],
+    required: true,
+  });
+  if (p.isCancel(targets)) return cancel();
+
+  const wanted = await p.select<Scope>({
+    message: "설치 범위",
+    options: [
+      { value: "user", label: "전역", hint: "홈 디렉터리 — 모든 프로젝트에서 쓴다" },
+      { value: "project", label: "이 프로젝트만", hint: tildify(process.cwd()) },
+    ],
+    initialValue: "user",
+  });
+  if (p.isCancel(wanted)) return cancel();
+
+  // 범위가 낮춰진 타깃이 있으면 미리 알린다 — 설치 후에 "왜 여기 깔렸지"가 되지 않게
+  const downgraded = targets.filter((t) => effectiveScope(t, wanted) !== wanted);
+  if (downgraded.length > 0) {
+    p.log.warn(
+      downgraded
+        .map((t) => {
+          const a = getAdapter(t);
+          return `${a.label} 은(는) ${a.scopes.join("/")} 범위만 지원한다 → ${effectiveScope(t, wanted)} 로 설치한다`;
+        })
+        .join("\n"),
+    );
+  }
+
+  // 무엇이 어디에 쓰이는지 먼저 보여준다
+  const previews: string[] = [];
+  for (const t of targets) {
+    const scope = effectiveScope(t, wanted);
+    const plan = await planInstall(t, scope, skill);
+    if (plan.blocked) {
+      previews.push(`${bold(getAdapter(t).label)}\n  ${dim(plan.blocked)}`);
+      continue;
+    }
+    const dirs = new Set(plan.actions.map((a) => path.dirname(a.path)));
+    previews.push(
+      [
+        `${bold(getAdapter(t).label)} ${plan.alreadyInstalled ? dim("(재설치)") : ""}`,
+        `  ${dim(tildify(plan.root))}`,
+        `  ${dim(`파일 ${plan.actions.length}개 · 디렉터리 ${dirs.size}개`)}`,
+      ].join("\n"),
+    );
+  }
+  p.note(previews.join("\n\n"), "설치 계획");
+
+  const go = await p.confirm({ message: "이대로 설치할까?", initialValue: true });
+  if (p.isCancel(go) || !go) return cancel();
+
+  const s = p.spinner();
+  s.start("설치 중");
+  const outcomes = [];
+  try {
+    for (const t of targets) {
+      const scope = effectiveScope(t, wanted);
+      s.message(`설치 중 — ${getAdapter(t).label}`);
+      outcomes.push(...(await runInstall({ targets: [t], scope })));
+    }
+    s.stop("설치 완료");
+  } catch (err) {
+    s.stop("설치 실패", 1);
+    p.log.error(err instanceof Error ? err.message : String(err));
+    return 1;
+  }
+
+  printOutcomes(outcomes);
+  printNextSteps(targets);
+
+  p.outro(`${accent("designpaca")} 준비됨 — 이제 브리프를 던져라`);
+  return 0;
+}
+
+function cancel(): number {
+  p.cancel("설치를 취소했다. 아무것도 바꾸지 않았다.");
+  return 130;
+}
diff --git a/packages/cli/src/ui.ts b/packages/cli/src/ui.ts
new file mode 100644
index 0000000..935de37
--- /dev/null
+++ b/packages/cli/src/ui.ts
@@ -0,0 +1,55 @@
+import pc from "picocolors";
+
+/** designpaca 의 강조색 — 한 가지만 쓴다 */
+export const accent = (s: string) => pc.magenta(s);
+export const dim = (s: string) => pc.dim(s);
+export const bold = (s: string) => pc.bold(s);
+
+export const ok = (s: string) => `${pc.green("✓")} ${s}`;
+export const warn = (s: string) => `${pc.yellow("!")} ${s}`;
+export const bad = (s: string) => `${pc.red("✗")} ${s}`;
+export const info = (s: string) => `${pc.cyan("·")} ${s}`;
+
+/**
+ * 터미널에서 차지하는 칸 수. 한글·한자·가나는 2칸을 먹는다.
+ * String.length 로 padEnd 하면 한글이 섞인 표가 어긋난다.
+ */
+export function displayWidth(s: string): number {
+  // ANSI 이스케이프는 폭을 차지하지 않는다
+  const plain = s.replace(/\[[0-9;]*m/g, "");
+  let w = 0;
+  for (const ch of plain) {
+    const cp = ch.codePointAt(0) ?? 0;
+    const wide =
+      (cp >= 0x1100 && cp <= 0x115f) || // 한글 자모
+      (cp >= 0x2e80 && cp <= 0xa4cf) || // CJK 부수 ~ 이
+      (cp >= 0xac00 && cp <= 0xd7a3) || // 한글 음절
+      (cp >= 0xf900 && cp <= 0xfaff) || // CJK 호환
+      (cp >= 0xfe30 && cp <= 0xfe6f) ||
+      (cp >= 0xff00 && cp <= 0xff60) || // 전각
+      (cp >= 0xffe0 && cp <= 0xffe6);
+    w += wide ? 2 : 1;
+  }
+  return w;
+}
+
+/** displayWidth 기준으로 오른쪽을 채운다 */
+export function padDisplay(s: string, width: number): string {
+  const pad = width - displayWidth(s);
+  return pad > 0 ? s + " ".repeat(pad) : s;
+}
+
+export function heading(s: string): string {
+  return `\n${bold(s)}\n${dim("─".repeat(Math.min(s.length + 8, 56)))}`;
+}
+
+/** 긴 경로 목록을 접어서 보여준다 — 설치 계획이 화면을 삼키지 않게 */
+export function fold(items: string[], max = 6): string[] {
+  if (items.length <= max) return items;
+  return [...items.slice(0, max), dim(`… 그 외 ${items.length - max}개`)];
+}
+
+export function table(rows: [string, string][]): string {
+  const w = Math.max(...rows.map(([k]) => k.length));
+  return rows.map(([k, v]) => `  ${k.padEnd(w)}  ${dim(v)}`).join("\n");
+}
diff --git a/packages/cli/src/update-check.ts b/packages/cli/src/update-check.ts
new file mode 100644
index 0000000..0396a94
--- /dev/null
+++ b/packages/cli/src/update-check.ts
@@ -0,0 +1,56 @@
+import { readIfExists, updateCachePath, writeAtomic } from "@designpaca/core";
+
+const DAY = 24 * 60 * 60 * 1000;
+const REGISTRY = "https://registry.npmjs.org/designpaca/latest";
+
+interface Cache {
+  checkedAt: number;
+  latest: string;
+}
+
+function isNewer(latest: string, current: string): boolean {
+  const norm = (v: string) => v.split("-")[0]!.split(".").map((n) => Number.parseInt(n, 10) || 0);
+  const [a, b] = [norm(latest), norm(current)];
+  for (let i = 0; i < 3; i++) {
+    const l = a[i] ?? 0;
+    const c = b[i] ?? 0;
+    if (l !== c) return l > c;
+  }
+  return false;
+}
+
+/**
+ * 하루 한 번만 레지스트리를 본다. 네트워크가 없거나 느리면 조용히 포기한다 —
+ * 업데이트 확인 때문에 CLI 가 멈추는 일은 없어야 한다.
+ */
+export async function checkForUpdate(current: string): Promise<string | null> {
+  if (process.env["DESIGNPACA_NO_UPDATE_CHECK"] === "1") return null;
+
+  const cachePath = updateCachePath();
+  const raw = await readIfExists(cachePath);
+  if (raw) {
+    try {
+      const c = JSON.parse(raw) as Cache;
+      if (Date.now() - c.checkedAt < DAY) {
+        return isNewer(c.latest, current) ? c.latest : null;
+      }
+    } catch {
+      /* 캐시가 깨졌으면 새로 받는다 */
+    }
+  }
+
+  try {
+    const res = await fetch(REGISTRY, {
+      headers: { accept: "application/vnd.npm.install-v1+json" },
+      signal: AbortSignal.timeout(2500),
+    });
+    if (!res.ok) return null;
+    const body = (await res.json()) as { version?: string };
+    const latest = body.version;
+    if (!latest) return null;
+    await writeAtomic(cachePath, JSON.stringify({ checkedAt: Date.now(), latest } satisfies Cache));
+    return isNewer(latest, current) ? latest : null;
+  } catch {
+    return null;
+  }
+}
diff --git a/packages/cli/test/cli.test.ts b/packages/cli/test/cli.test.ts
new file mode 100644
index 0000000..b0c7f59
--- /dev/null
+++ b/packages/cli/test/cli.test.ts
@@ -0,0 +1,70 @@
+import assert from "node:assert/strict";
+import { execFileSync } from "node:child_process";
+import fs from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { after, test } from "node:test";
+
+const CLI = fileURLToPath(new URL("../dist/index.js", import.meta.url));
+
+const built = await fs
+  .access(CLI)
+  .then(() => true)
+  .catch(() => false);
+
+const home = await fs.mkdtemp(path.join(os.tmpdir(), "designpaca-cli-"));
+after(async () => {
+  await fs.rm(home, { recursive: true, force: true });
+});
+
+/** 빌드 산출물을 사용자가 실행하는 방식 그대로 돌린다 */
+function run(args: string[]): string {
+  return execFileSync(process.execPath, [CLI, ...args, "--no-update-check"], {
+    encoding: "utf8",
+    env: { ...process.env, HOME: home, USERPROFILE: home, FORCE_COLOR: "0" },
+  });
+}
+
+test("빌드 산출물이 있어야 한다", { skip: built ? false : "pnpm build 먼저 실행해라" }, () => {
+  assert.ok(built);
+});
+
+test("--version 은 스킬 버전과 같다", { skip: !built }, async () => {
+  const stamp = (
+    await fs.readFile(fileURLToPath(new URL("../dist/skill/.designpaca_version", import.meta.url)), "utf8")
+  ).trim();
+  assert.equal(run(["--version"]).trim(), stamp);
+});
+
+test("도움말에 모든 명령이 나온다", { skip: !built }, () => {
+  const out = run(["--help"]);
+  for (const cmd of ["install", "update", "uninstall", "doctor", "list"]) {
+    assert.ok(out.includes(cmd), `도움말에 ${cmd} 가 없다`);
+  }
+});
+
+test("dry-run 은 아무 파일도 쓰지 않는다", { skip: !built }, async () => {
+  const before = await fs.readdir(home);
+  const out = run(["install", "-t", "claude-code", "-s", "user", "-y", "--dry-run"]);
+  assert.ok(out.includes("설치 계획"));
+  assert.deepEqual(await fs.readdir(home), before);
+});
+
+test("알 수 없는 대상은 종료 코드 2 로 거부한다", { skip: !built }, () => {
+  assert.throws(
+    () => run(["install", "-t", "emacs", "-y"]),
+    (err: { status?: number }) => err.status === 2,
+  );
+});
+
+test("설치 → doctor → 제거 왕복", { skip: !built }, async () => {
+  run(["install", "-t", "claude-code", "-s", "user", "-y"]);
+  const skillMd = path.join(home, ".claude", "skills", "designpaca", "SKILL.md");
+  assert.ok((await fs.readFile(skillMd, "utf8")).includes("name: designpaca"));
+
+  assert.ok(run(["doctor"]).includes("claude-code"));
+
+  run(["uninstall", "-y"]);
+  await assert.rejects(() => fs.access(skillMd));
+});
diff --git a/packages/cli/tsconfig.json b/packages/cli/tsconfig.json
new file mode 100644
index 0000000..ad9cd97
--- /dev/null
+++ b/packages/cli/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "noEmit": true,
+    "paths": { "@designpaca/core": ["../core/src/index.ts"] }
+  },
+  "include": ["src/**/*.ts", "scripts/**/*.mjs", "test/**/*.ts"]
+}
diff --git a/packages/cli/tsup.config.ts b/packages/cli/tsup.config.ts
new file mode 100644
index 0000000..6daa14d
--- /dev/null
+++ b/packages/cli/tsup.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: { index: "src/index.ts" },
+  format: ["esm"],
+  target: "node20",
+  platform: "node",
+  clean: false, // dist/skill 을 지우면 안 된다(bundle-skill 이 먼저 채운다)
+  dts: false,
+  sourcemap: false,
+  minify: false,
+  // 워크스페이스 패키지는 번들에 넣는다 — 사용자가 @designpaca/core 를 따로 받게 하지 않는다
+  noExternal: ["@designpaca/core"],
+  banner: { js: "#!/usr/bin/env node" },
+});
diff --git a/packages/core/package.json b/packages/core/package.json
new file mode 100644
index 0000000..28b40d3
--- /dev/null
+++ b/packages/core/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@designpaca/core",
+  "version": "0.1.0",
+  "private": true,
+  "description": "designpaca 설치 엔진 — 타깃 어댑터, 매니페스트, 드리프트 감지",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "build": "echo \"(core 는 cli 번들에 포함된다)\"",
+    "typecheck": "tsc --noEmit",
+    "test": "node --test --experimental-strip-types --disable-warning=ExperimentalWarning \"test/**/*.test.ts\""
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "typescript": "^5.7.2"
+  }
+}
diff --git a/packages/core/src/fsx.ts b/packages/core/src/fsx.ts
new file mode 100644
index 0000000..532e431
--- /dev/null
+++ b/packages/core/src/fsx.ts
@@ -0,0 +1,65 @@
+import { createHash } from "node:crypto";
+import fs from "node:fs/promises";
+import path from "node:path";
+
+export function sha256(content: string): string {
+  // 개행 정규화 — Windows 체크아웃(autocrlf)에서 해시가 흔들리는 것을 막는다
+  return createHash("sha256").update(content.replace(/\r\n/g, "\n"), "utf8").digest("hex");
+}
+
+export async function exists(p: string): Promise<boolean> {
+  try {
+    await fs.access(p);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export async function readIfExists(p: string): Promise<string | null> {
+  try {
+    return await fs.readFile(p, "utf8");
+  } catch {
+    return null;
+  }
+}
+
+/** 임시 파일에 쓴 뒤 rename — 중간에 죽어도 반쯤 쓰인 파일이 남지 않는다 */
+export async function writeAtomic(p: string, content: string): Promise<void> {
+  await fs.mkdir(path.dirname(p), { recursive: true });
+  const tmp = `${p}.${process.pid}.tmp`;
+  await fs.writeFile(tmp, content, "utf8");
+  await fs.rename(tmp, p);
+}
+
+/** 사용자가 고친 파일을 덮기 전에 원본을 남겨둔다 */
+export async function backup(p: string): Promise<string | null> {
+  const cur = await readIfExists(p);
+  if (cur === null) return null;
+  const dest = `${p}.orig`;
+  await fs.writeFile(dest, cur, "utf8");
+  return dest;
+}
+
+/** 파일을 지우고, 비게 된 상위 디렉터리를 stopAt 까지 정리한다 */
+export async function removeFileAndPrune(p: string, stopAt: string): Promise<void> {
+  await fs.rm(p, { force: true });
+  let dir = path.dirname(p);
+  const stop = path.resolve(stopAt);
+  while (path.resolve(dir).startsWith(stop) && path.resolve(dir) !== stop) {
+    try {
+      const rest = await fs.readdir(dir);
+      if (rest.length > 0) break;
+      await fs.rmdir(dir);
+    } catch {
+      break;
+    }
+    dir = path.dirname(dir);
+  }
+  // stopAt 자체도 비었으면 함께 정리한다
+  try {
+    if ((await fs.readdir(stop)).length === 0) await fs.rmdir(stop);
+  } catch {
+    /* 남아있으면 그대로 둔다 */
+  }
+}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
new file mode 100644
index 0000000..1fe9b33
--- /dev/null
+++ b/packages/core/src/index.ts
@@ -0,0 +1,8 @@
+export * from "./types.ts";
+export * from "./paths.ts";
+export * from "./fsx.ts";
+export * from "./marker.ts";
+export * from "./manifest.ts";
+export * from "./skill-source.ts";
+export * from "./installer.ts";
+export { ADAPTERS, getAdapter, MARKER } from "./targets/index.ts";
diff --git a/packages/core/src/installer.ts b/packages/core/src/installer.ts
new file mode 100644
index 0000000..18e4ed0
--- /dev/null
+++ b/packages/core/src/installer.ts
@@ -0,0 +1,185 @@
+import os from "node:os";
+import path from "node:path";
+import { backup, readIfExists, removeFileAndPrune, sha256, writeAtomic } from "./fsx.ts";
+import { removeBlock, upsertBlock } from "./marker.ts";
+import { dropInstall, findInstall, inspectDrift, readManifest, upsertInstall } from "./manifest.ts";
+import { ADAPTERS, getAdapter } from "./targets/index.ts";
+import type {
+  InstalledFile,
+  InstallPlan,
+  InstallRecord,
+  Scope,
+  SkillSource,
+  TargetContext,
+  TargetId,
+} from "./types.ts";
+
+export interface EnvOptions {
+  home?: string;
+  cwd?: string;
+}
+
+function ctxOf(scope: Scope, skill: SkillSource, env: EnvOptions = {}): TargetContext {
+  return {
+    scope,
+    home: env.home ?? os.homedir(),
+    cwd: env.cwd ?? process.cwd(),
+    skill,
+  };
+}
+
+/** 시스템에 흔적이 있는 타깃을 골라준다 — TUI 의 기본 체크 상태로 쓴다 */
+export async function detectTargets(skill: SkillSource, env: EnvOptions = {}): Promise<TargetId[]> {
+  const found: TargetId[] = [];
+  for (const a of ADAPTERS) {
+    const scope: Scope = a.scopes.includes("user") ? "user" : "project";
+    if (await a.detect(ctxOf(scope, skill, env))) found.push(a.id);
+  }
+  return found;
+}
+
+export async function planInstall(
+  target: TargetId,
+  scope: Scope,
+  skill: SkillSource,
+  env: EnvOptions = {},
+): Promise<InstallPlan> {
+  const adapter = getAdapter(target);
+  if (!adapter.scopes.includes(scope)) {
+    const only = adapter.scopes.join("/");
+    return {
+      target,
+      scope,
+      root: "",
+      actions: [],
+      alreadyInstalled: false,
+      blocked: `${adapter.label} 은(는) ${only} 범위만 지원한다`,
+    };
+  }
+  return adapter.plan(ctxOf(scope, skill, env));
+}
+
+export interface ApplyResult {
+  record: InstallRecord;
+  written: string[];
+  backedUp: string[];
+  /** 사용자가 고쳐서 건너뛴 파일 */
+  skipped: string[];
+}
+
+/**
+ * 계획을 실제로 디스크에 반영한다.
+ *
+ * 업그레이드 안전장치: 이전 설치 기록이 있으면 각 파일의 해시를 비교해서,
+ * 사용자가 손댄 파일은 기본적으로 건드리지 않는다(force 로만 덮고, 덮을 때도 .orig 로 남긴다).
+ */
+export async function applyPlan(
+  plan: InstallPlan,
+  version: string,
+  opts: { force?: boolean; env?: EnvOptions } = {},
+): Promise<ApplyResult> {
+  if (plan.blocked) throw new Error(plan.blocked);
+  const home = opts.env?.home;
+
+  const prev = findInstall(await readManifest(home), plan.target, plan.scope, plan.root);
+  const modified = new Set<string>();
+  if (prev) {
+    const drift = await inspectDrift(prev);
+    for (const p of drift.modified) modified.add(p);
+  }
+
+  const files: InstalledFile[] = [];
+  const written: string[] = [];
+  const backedUp: string[] = [];
+  const skipped: string[] = [];
+
+  for (const action of plan.actions) {
+    const isDirty = modified.has(action.path);
+    if (isDirty && !opts.force) {
+      // 건너뛰더라도 매니페스트에서 빠지면 uninstall 이 이 파일을 놓친다 — 기록은 남긴다.
+      // 이때 "현재" 해시를 쓰면 안 된다. 그러면 다음 update 에서 드리프트가 사라져
+      // 사용자가 고친 파일을 조용히 덮어쓰게 된다. 설치 당시 해시를 그대로 유지한다.
+      const kept = prev?.files.find((f) => f.path === action.path);
+      files.push(
+        kept ?? {
+          path: action.path,
+          sha256: sha256(action.kind === "inject" ? action.content.trim() : action.content),
+          ...(action.kind === "inject" ? { marker: action.marker } : {}),
+        },
+      );
+      skipped.push(action.path);
+      continue;
+    }
+    if (isDirty && opts.force) {
+      const b = await backup(action.path);
+      if (b) backedUp.push(b);
+    }
+
+    if (action.kind === "write") {
+      await writeAtomic(action.path, action.content);
+      files.push({ path: action.path, sha256: sha256(action.content) });
+    } else {
+      const cur = (await readIfExists(action.path)) ?? "";
+      const next = upsertBlock(cur, action.marker, action.content);
+      await writeAtomic(action.path, next);
+      // 마커 방식은 블록 안쪽만 해시한다 — 문서의 다른 부분은 사용자 자유다
+      files.push({ path: action.path, sha256: sha256(action.content.trim()), marker: action.marker });
+    }
+    written.push(action.path);
+  }
+
+  const record: InstallRecord = {
+    target: plan.target,
+    scope: plan.scope,
+    root: plan.root,
+    version,
+    installedAt: new Date().toISOString(),
+    files,
+  };
+  await upsertInstall(record, home);
+
+  return { record, written, backedUp, skipped };
+}
+
+export interface RemoveResult {
+  removed: string[];
+  keptModified: string[];
+}
+
+/** 매니페스트에 기록된 것만 되돌린다. 기록에 없는 파일은 손대지 않는다. */
+export async function removeInstall(
+  record: InstallRecord,
+  opts: { force?: boolean; env?: EnvOptions } = {},
+): Promise<RemoveResult> {
+  const drift = await inspectDrift(record);
+  const dirty = new Set(drift.modified);
+  const removed: string[] = [];
+  const keptModified: string[] = [];
+
+  for (const f of record.files) {
+    if (dirty.has(f.path) && !opts.force) {
+      keptModified.push(f.path);
+      continue;
+    }
+    if (f.marker) {
+      const cur = await readIfExists(f.path);
+      if (cur === null) continue;
+      const next = removeBlock(cur, f.marker);
+      // 블록만 남아 있던 문서라면 파일째 지운다
+      if (next.trim().length === 0) await removeFileAndPrune(f.path, path.dirname(f.path));
+      else await writeAtomic(f.path, next);
+    } else {
+      await removeFileAndPrune(f.path, record.root);
+    }
+    removed.push(f.path);
+  }
+
+  if (keptModified.length === 0) {
+    await dropInstall(record.target, record.scope, record.root, opts.env?.home);
+  } else {
+    // 일부만 남았으면 기록도 남은 것만 유지한다
+    await upsertInstall({ ...record, files: record.files.filter((f) => dirty.has(f.path)) }, opts.env?.home);
+  }
+
+  return { removed, keptModified };
+}
diff --git a/packages/core/src/manifest.ts b/packages/core/src/manifest.ts
new file mode 100644
index 0000000..b162dac
--- /dev/null
+++ b/packages/core/src/manifest.ts
@@ -0,0 +1,105 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { manifestPath } from "./paths.ts";
+import { readIfExists, sha256, writeAtomic } from "./fsx.ts";
+import { extractBlock } from "./marker.ts";
+import type { DriftReport, InstallRecord, Manifest, Scope, TargetId } from "./types.ts";
+
+const EMPTY: Manifest = { schema: 1, installs: [] };
+
+export async function readManifest(home?: string): Promise<Manifest> {
+  const raw = await readIfExists(manifestPath(home));
+  if (!raw) return structuredClone(EMPTY);
+  try {
+    const parsed = JSON.parse(raw) as Manifest;
+    if (parsed.schema !== 1 || !Array.isArray(parsed.installs)) return structuredClone(EMPTY);
+    return parsed;
+  } catch {
+    // 손상된 매니페스트로 설치 전체가 막히지 않도록 빈 것으로 되돌린다
+    return structuredClone(EMPTY);
+  }
+}
+
+export async function writeManifest(m: Manifest, home?: string): Promise<void> {
+  await writeAtomic(manifestPath(home), JSON.stringify(m, null, 2) + "\n");
+}
+
+function sameInstall(a: InstallRecord, target: TargetId, scope: Scope, root: string): boolean {
+  return a.target === target && a.scope === scope && path.resolve(a.root) === path.resolve(root);
+}
+
+export function findInstall(
+  m: Manifest,
+  target: TargetId,
+  scope: Scope,
+  root: string,
+): InstallRecord | undefined {
+  return m.installs.find((i) => sameInstall(i, target, scope, root));
+}
+
+export async function upsertInstall(record: InstallRecord, home?: string): Promise<void> {
+  const m = await readManifest(home);
+  const idx = m.installs.findIndex((i) => sameInstall(i, record.target, record.scope, record.root));
+  if (idx >= 0) m.installs[idx] = record;
+  else m.installs.push(record);
+  await writeManifest(m, home);
+}
+
+export async function dropInstall(
+  target: TargetId,
+  scope: Scope,
+  root: string,
+  home?: string,
+): Promise<void> {
+  const m = await readManifest(home);
+  m.installs = m.installs.filter((i) => !sameInstall(i, target, scope, root));
+  await writeManifest(m, home);
+}
+
+/**
+ * 설치 당시 해시와 현재 내용을 비교한다.
+ * 마커 방식 파일은 문서 전체가 아니라 블록 안쪽만 비교한다 — 사용자가 문서의 다른 부분을
+ * 고치는 것은 정상이고, 그걸 드리프트로 잡으면 update 가 영영 못 돈다.
+ */
+export async function inspectDrift(record: InstallRecord): Promise<DriftReport> {
+  const files: DriftReport["files"] = [];
+  for (const f of record.files) {
+    const cur = await readIfExists(f.path);
+    if (cur === null) {
+      files.push({ path: f.path, status: "missing" });
+      continue;
+    }
+    const target = f.marker ? (extractBlock(cur, f.marker) ?? "") : cur;
+    files.push({ path: f.path, status: sha256(target) === f.sha256 ? "ok" : "modified" });
+  }
+  return {
+    record,
+    files,
+    modified: files.filter((f) => f.status === "modified").map((f) => f.path),
+  };
+}
+
+/** 매니페스트가 가리키는 경로가 실제로 살아있는지 확인한다 */
+export async function pruneDeadInstalls(home?: string): Promise<number> {
+  const m = await readManifest(home);
+  const before = m.installs.length;
+  const alive: InstallRecord[] = [];
+  for (const rec of m.installs) {
+    const anyAlive = await Promise.all(
+      rec.files.map(async (f) => {
+        try {
+          await fs.access(f.path);
+          return true;
+        } catch {
+          return false;
+        }
+      }),
+    );
+    if (anyAlive.some(Boolean)) alive.push(rec);
+  }
+  if (alive.length !== before) {
+    m.installs = alive;
+    await writeManifest(m, home);
+  }
+  return before - alive.length;
+}
diff --git a/packages/core/src/marker.ts b/packages/core/src/marker.ts
new file mode 100644
index 0000000..ac36f42
--- /dev/null
+++ b/packages/core/src/marker.ts
@@ -0,0 +1,51 @@
+/**
+ * AGENTS.md 같은 사용자 소유 문서에 우리 블록만 안전하게 심고 빼기 위한 마커 처리.
+ * 블록 밖의 내용은 절대 건드리지 않는다.
+ */
+
+export function startTag(marker: string): string {
+  return `<!-- ${marker}:start -->`;
+}
+export function endTag(marker: string): string {
+  return `<!-- ${marker}:end -->`;
+}
+
+export function hasBlock(doc: string, marker: string): boolean {
+  return doc.includes(startTag(marker)) && doc.includes(endTag(marker));
+}
+
+/** 블록이 있으면 내용만 교체, 없으면 문서 끝에 덧붙인다 */
+export function upsertBlock(doc: string, marker: string, content: string): string {
+  const s = startTag(marker);
+  const e = endTag(marker);
+  const block = `${s}\n${content.trim()}\n${e}`;
+
+  const si = doc.indexOf(s);
+  const ei = doc.indexOf(e);
+  if (si !== -1 && ei !== -1 && ei > si) {
+    return doc.slice(0, si) + block + doc.slice(ei + e.length);
+  }
+  const base = doc.trimEnd();
+  return base.length > 0 ? `${base}\n\n${block}\n` : `${block}\n`;
+}
+
+/** 블록만 제거하고 나머지 문서는 보존한다 */
+export function removeBlock(doc: string, marker: string): string {
+  const s = startTag(marker);
+  const e = endTag(marker);
+  const si = doc.indexOf(s);
+  const ei = doc.indexOf(e);
+  if (si === -1 || ei === -1 || ei < si) return doc;
+  const out = doc.slice(0, si) + doc.slice(ei + e.length);
+  return out.replace(/\n{3,}/g, "\n\n").trimEnd() + "\n";
+}
+
+/** 블록 내부 내용만 뽑아낸다 (드리프트 판정용) */
+export function extractBlock(doc: string, marker: string): string | null {
+  const s = startTag(marker);
+  const e = endTag(marker);
+  const si = doc.indexOf(s);
+  const ei = doc.indexOf(e);
+  if (si === -1 || ei === -1 || ei < si) return null;
+  return doc.slice(si + s.length, ei).trim();
+}
diff --git a/packages/core/src/paths.ts b/packages/core/src/paths.ts
new file mode 100644
index 0000000..3476e58
--- /dev/null
+++ b/packages/core/src/paths.ts
@@ -0,0 +1,25 @@
+import os from "node:os";
+import path from "node:path";
+
+/** designpaca 자체 상태 디렉터리 (~/.designpaca) */
+export function stateDir(home = os.homedir()): string {
+  return path.join(home, ".designpaca");
+}
+
+export function manifestPath(home = os.homedir()): string {
+  return path.join(stateDir(home), "manifest.json");
+}
+
+/** 업데이트 확인 캐시 */
+export function updateCachePath(home = os.homedir()): string {
+  return path.join(stateDir(home), "update-check.json");
+}
+
+/** 홈 경로를 ~ 로 줄여 표시한다 */
+export function tildify(p: string, home = os.homedir()): string {
+  const rel = path.relative(home, p);
+  if (!rel.startsWith("..") && !path.isAbsolute(rel)) {
+    return path.posix.join("~", rel.split(path.sep).join("/"));
+  }
+  return p;
+}
diff --git a/packages/core/src/skill-source.ts b/packages/core/src/skill-source.ts
new file mode 100644
index 0000000..407df47
--- /dev/null
+++ b/packages/core/src/skill-source.ts
@@ -0,0 +1,62 @@
+import type { Dirent } from "node:fs";
+import fs from "node:fs/promises";
+import path from "node:path";
+import type { SkillSource } from "./types.ts";
+
+/** 프론트매터를 본문과 분리한다. yaml 파서를 끌어오지 않으려고 필요한 필드만 얕게 읽는다. */
+export function splitFrontmatter(md: string): { fm: Record<string, string>; body: string } {
+  const m = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/.exec(md);
+  if (!m) return { fm: {}, body: md };
+  const fm: Record<string, string> = {};
+  for (const line of (m[1] ?? "").split(/\r?\n/)) {
+    const kv = /^([A-Za-z0-9_-]+):\s*(.*)$/.exec(line);
+    if (!kv) continue;
+    let v = (kv[2] ?? "").trim();
+    // 따옴표로 감싼 값의 따옴표만 벗긴다
+    if ((v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'"))) {
+      v = v.slice(1, -1);
+    }
+    fm[kv[1] as string] = v;
+  }
+  return { fm, body: md.slice(m[0].length) };
+}
+
+async function walk(dir: string, base = dir): Promise<string[]> {
+  const out: string[] = [];
+  let entries: Dirent[];
+  try {
+    entries = await fs.readdir(dir, { withFileTypes: true });
+  } catch {
+    return out;
+  }
+  for (const e of entries) {
+    const full = path.join(dir, e.name);
+    if (e.isDirectory()) out.push(...(await walk(full, base)));
+    else out.push(path.relative(base, full).split(path.sep).join("/"));
+  }
+  return out.sort();
+}
+
+/**
+ * 스킬 원본 디렉터리를 읽어 메모리에 올린다.
+ * SKILL.md 는 필수, 나머지(references/ 등)는 전부 그대로 따라간다.
+ */
+export async function loadSkillSource(root: string, version: string): Promise<SkillSource> {
+  const skillMd = await fs.readFile(path.join(root, "SKILL.md"), "utf8");
+  const { fm, body } = splitFrontmatter(skillMd);
+
+  const files = new Map<string, string>();
+  for (const rel of await walk(root)) {
+    if (rel === "SKILL.md") continue;
+    if (rel.endsWith(".orig") || rel === ".designpaca_version") continue;
+    files.set(rel, await fs.readFile(path.join(root, rel), "utf8"));
+  }
+
+  return {
+    version,
+    skillMd,
+    files,
+    body: body.trim(),
+    description: fm["description"] ?? "웹 디자인 파이프라인 스킬",
+  };
+}
diff --git a/packages/core/src/targets/agents-md.ts b/packages/core/src/targets/agents-md.ts
new file mode 100644
index 0000000..aa2c02f
--- /dev/null
+++ b/packages/core/src/targets/agents-md.ts
@@ -0,0 +1,71 @@
+import path from "node:path";
+import { exists } from "../fsx.ts";
+import type { FileAction, TargetAdapter, TargetContext } from "../types.ts";
+import { MARKER, rewriteRefPaths, skillDirActions } from "./common.ts";
+
+/**
+ * 범용 AGENTS.md — 어떤 에이전트든 읽는 프로젝트 루트 문서에 우리 블록만 심는다.
+ * 문서 전체를 덮어쓰지 않는다. 블록 밖은 사용자 것이다.
+ *
+ * **본문 전체를 넣지 않는다.** AGENTS.md 는 스킬과 달리 조건 없이 항상 로드되고,
+ * Codex 는 병합 결과를 기본 32KiB 에서 자른다. 14KB 짜리 본문을 넣으면
+ * 디자인과 무관한 모든 대화에서 그 비용을 내고, 프로젝트 자신의 지침이 잘려나갈 수 있다.
+ * 그래서 여기에는 포인터만 두고 본문은 .designpaca/ 에 풀어둔다.
+ */
+export const agentsMd: TargetAdapter = {
+  id: "agents-md",
+  label: "범용 AGENTS.md",
+  hint: "AGENTS.md 에 포인터 주입 — 에이전트 무관",
+  scopes: ["project", "user"],
+
+  async detect(ctx: TargetContext) {
+    // 항상 로드되는 자리라 기본 선택은 보수적으로 — AGENTS.md 가 실제로 있을 때만.
+    return (
+      (await exists(path.join(ctx.cwd, "AGENTS.md"))) ||
+      (await exists(path.join(ctx.home, ".codex", "AGENTS.md")))
+    );
+  },
+
+  async plan(ctx: TargetContext) {
+    const isUser = ctx.scope === "user";
+    const doc = isUser
+      ? path.join(ctx.home, ".codex", "AGENTS.md")
+      : path.join(ctx.cwd, "AGENTS.md");
+    // user/project 가 같은 구조를 갖도록 둘 다 .designpaca 를 루트로 쓴다
+    const refRoot = isUser
+      ? path.join(ctx.home, ".designpaca", "skill")
+      : path.join(ctx.cwd, ".designpaca");
+    const refPrefix = isUser ? "~/.designpaca/skill" : ".designpaca";
+
+    const block = [
+      "## designpaca — 웹 디자인 파이프라인",
+      "",
+      "이 리포에서 UI 를 새로 만들거나 다시 디자인할 때는, 마크업·스타일을 쓰기 전에",
+      `\`${refPrefix}/SKILL.md\` 를 읽고 그 파이프라인(0~6단계)을 따른다.`,
+      "",
+      "- 프로젝트 루트에 `design.md` 가 있으면 그것이 최상위다. 스킬 기본값을 덮는다.",
+      "- 참조 문서는 각 단계에서 지시하는 것만 그때 연다. 처음부터 전부 읽지 마라.",
+      "",
+      `<!-- designpaca v${ctx.skill.version} — \`npx designpaca update\` 가 관리한다. 직접 고치면 업데이트가 멈춘다. -->`,
+    ].join("\n");
+
+    // 본문은 별도 디렉터리에 통째로 푼다. 경로 재작성이 필요하다.
+    const skillActions = skillDirActions(refRoot, {
+      ...ctx.skill,
+      skillMd: rewriteRefPaths(ctx.skill.skillMd, refPrefix),
+    });
+
+    const actions: FileAction[] = [
+      { kind: "inject", path: doc, marker: MARKER, content: block },
+      ...skillActions,
+    ];
+
+    return {
+      target: this.id,
+      scope: ctx.scope,
+      root: refRoot,
+      actions,
+      alreadyInstalled: await exists(path.join(refRoot, "SKILL.md")),
+    };
+  },
+};
diff --git a/packages/core/src/targets/claude-code.ts b/packages/core/src/targets/claude-code.ts
new file mode 100644
index 0000000..0b57867
--- /dev/null
+++ b/packages/core/src/targets/claude-code.ts
@@ -0,0 +1,34 @@
+import path from "node:path";
+import { exists } from "../fsx.ts";
+import type { TargetAdapter, TargetContext } from "../types.ts";
+import { anyExists, scopeRoot, skillDirActions } from "./common.ts";
+
+/**
+ * Claude Code — ~/.claude/skills/designpaca/ (전역) 또는 .claude/skills/designpaca/ (프로젝트).
+ * SKILL.md 포맷을 그대로 쓰므로 변환이 없다.
+ */
+export const claudeCode: TargetAdapter = {
+  id: "claude-code",
+  label: "Claude Code",
+  hint: "~/.claude/skills/designpaca — SKILL.md 그대로",
+  scopes: ["user", "project"],
+
+  async detect(ctx: TargetContext) {
+    return anyExists([
+      path.join(ctx.home, ".claude"),
+      path.join(ctx.cwd, ".claude"),
+      path.join(ctx.home, ".claude.json"),
+    ]);
+  },
+
+  async plan(ctx: TargetContext) {
+    const root = scopeRoot(ctx, [".claude", "skills", "designpaca"], [".claude", "skills", "designpaca"]);
+    return {
+      target: this.id,
+      scope: ctx.scope,
+      root,
+      actions: skillDirActions(root, ctx.skill),
+      alreadyInstalled: await exists(path.join(root, "SKILL.md")),
+    };
+  },
+};
diff --git a/packages/core/src/targets/codex.ts b/packages/core/src/targets/codex.ts
new file mode 100644
index 0000000..074c0b2
--- /dev/null
+++ b/packages/core/src/targets/codex.ts
@@ -0,0 +1,34 @@
+import path from "node:path";
+import { exists } from "../fsx.ts";
+import type { TargetAdapter, TargetContext } from "../types.ts";
+import { anyExists, scopeRoot, skillDirActions } from "./common.ts";
+
+/**
+ * Codex CLI — ~/.codex/skills/designpaca/.
+ * Codex 도 Claude Code 와 같은 SKILL.md 규약을 쓴다(실측: ~/.codex/skills/frontend-design 등).
+ */
+export const codex: TargetAdapter = {
+  id: "codex",
+  label: "Codex CLI",
+  hint: "~/.codex/skills/designpaca — SKILL.md 그대로",
+  scopes: ["user", "project"],
+
+  async detect(ctx: TargetContext) {
+    return anyExists([
+      path.join(ctx.home, ".codex"),
+      path.join(ctx.home, ".codex", "AGENTS.md"),
+      path.join(ctx.cwd, ".codex"),
+    ]);
+  },
+
+  async plan(ctx: TargetContext) {
+    const root = scopeRoot(ctx, [".codex", "skills", "designpaca"], [".codex", "skills", "designpaca"]);
+    return {
+      target: this.id,
+      scope: ctx.scope,
+      root,
+      actions: skillDirActions(root, ctx.skill),
+      alreadyInstalled: await exists(path.join(root, "SKILL.md")),
+    };
+  },
+};
diff --git a/packages/core/src/targets/common.ts b/packages/core/src/targets/common.ts
new file mode 100644
index 0000000..2142248
--- /dev/null
+++ b/packages/core/src/targets/common.ts
@@ -0,0 +1,60 @@
+import path from "node:path";
+import { exists } from "../fsx.ts";
+import type { FileAction, SkillSource, TargetContext } from "../types.ts";
+
+/** 매니페스트·마커에 쓰는 고정 식별자 */
+export const MARKER = "designpaca";
+
+/** 스킬 디렉터리를 통째로 쓰는 타깃(Claude Code·Codex)이 공유하는 파일 목록 */
+export function skillDirActions(root: string, skill: SkillSource): FileAction[] {
+  const actions: FileAction[] = [
+    { kind: "write", path: path.join(root, "SKILL.md"), content: skill.skillMd },
+  ];
+  for (const [rel, content] of skill.files) {
+    actions.push({ kind: "write", path: path.join(root, ...rel.split("/")), content });
+  }
+  // 업그레이드 판정에 쓰는 버전 스탬프
+  actions.push({
+    kind: "write",
+    path: path.join(root, ".designpaca_version"),
+    content: `${skill.version}\n`,
+  });
+  return actions;
+}
+
+/** references 를 별도 디렉터리로 내보내는 타깃(Cursor·AGENTS.md)용 */
+export function referenceActions(root: string, skill: SkillSource): FileAction[] {
+  const actions: FileAction[] = [];
+  for (const [rel, content] of skill.files) {
+    actions.push({ kind: "write", path: path.join(root, ...rel.split("/")), content });
+  }
+  actions.push({
+    kind: "write",
+    path: path.join(root, ".designpaca_version"),
+    content: `${skill.version}\n`,
+  });
+  return actions;
+}
+
+/**
+ * 본문의 `references/...` 상대 경로를 실제 설치 위치로 바꾼다.
+ *
+ * Claude Code·Codex 는 스킬 디렉터리를 통째로 복사하므로 상대 경로가 그대로 맞다.
+ * Cursor·Windsurf·AGENTS.md 는 본문만 다른 자리로 옮기고 references 는 별도 디렉터리에 풀기
+ * 때문에, 재작성하지 않으면 본문이 가리키는 경로가 전부 존재하지 않는 곳을 가리킨다.
+ */
+export function rewriteRefPaths(body: string, prefix: string): string {
+  return body.replaceAll("references/", `${prefix}/references/`);
+}
+
+/** 어느 한 경로라도 있으면 그 도구가 설치돼 있다고 본다 */
+export async function anyExists(paths: string[]): Promise<boolean> {
+  for (const p of paths) if (await exists(p)) return true;
+  return false;
+}
+
+export function scopeRoot(ctx: TargetContext, userRel: string[], projectRel: string[]): string {
+  return ctx.scope === "user"
+    ? path.join(ctx.home, ...userRel)
+    : path.join(ctx.cwd, ...projectRel);
+}
diff --git a/packages/core/src/targets/cursor.ts b/packages/core/src/targets/cursor.ts
new file mode 100644
index 0000000..f320638
--- /dev/null
+++ b/packages/core/src/targets/cursor.ts
@@ -0,0 +1,57 @@
+import path from "node:path";
+import { exists } from "../fsx.ts";
+import type { FileAction, TargetAdapter, TargetContext } from "../types.ts";
+import { anyExists, referenceActions, rewriteRefPaths } from "./common.ts";
+
+/** 본문과 references 가 함께 놓이는 루트 (본문 경로 재작성 기준) */
+const REF_PREFIX = ".cursor/rules/designpaca";
+
+/**
+ * Cursor — .cursor/rules/designpaca.mdc.
+ * .mdc 프론트매터는 SKILL.md 와 필드가 다르다(description/globs/alwaysApply)므로 변환한다.
+ *
+ * Windsurf 는 이 파일을 읽지 않는다(.windsurf/rules/*.md 를 쓴다) — 별도 어댑터로 분리했다.
+ */
+export const cursor: TargetAdapter = {
+  id: "cursor",
+  label: "Cursor",
+  hint: ".cursor/rules/designpaca.mdc — 프로젝트 단위",
+  // Cursor 의 전역 규칙은 파일이 아니라 앱 설정(User Rules)이라 프로젝트 범위만 지원한다
+  scopes: ["project"],
+
+  async detect(ctx: TargetContext) {
+    return anyExists([path.join(ctx.cwd, ".cursor"), path.join(ctx.home, ".cursor")]);
+  },
+
+  async plan(ctx: TargetContext) {
+    const rulesDir = path.join(ctx.cwd, ".cursor", "rules");
+    const mdc = path.join(rulesDir, "designpaca.mdc");
+    const refRoot = path.join(rulesDir, "designpaca");
+
+    const header = [
+      "---",
+      `description: ${ctx.skill.description}`,
+      "globs:",
+      "alwaysApply: false",
+      "---",
+      "",
+    ].join("\n");
+
+    const actions: FileAction[] = [
+      {
+        kind: "write",
+        path: mdc,
+        content: header + rewriteRefPaths(ctx.skill.body, REF_PREFIX),
+      },
+      ...referenceActions(refRoot, ctx.skill),
+    ];
+
+    return {
+      target: this.id,
+      scope: ctx.scope,
+      root: rulesDir,
+      actions,
+      alreadyInstalled: await exists(mdc),
+    };
+  },
+};
diff --git a/packages/core/src/targets/index.ts b/packages/core/src/targets/index.ts
new file mode 100644
index 0000000..a70adfd
--- /dev/null
+++ b/packages/core/src/targets/index.ts
@@ -0,0 +1,17 @@
+import type { TargetAdapter, TargetId } from "../types.ts";
+import { claudeCode } from "./claude-code.ts";
+import { codex } from "./codex.ts";
+import { cursor } from "./cursor.ts";
+import { windsurf } from "./windsurf.ts";
+import { agentsMd } from "./agents-md.ts";
+
+export const ADAPTERS: TargetAdapter[] = [claudeCode, codex, cursor, windsurf, agentsMd];
+
+export function getAdapter(id: TargetId): TargetAdapter {
+  const a = ADAPTERS.find((x) => x.id === id);
+  if (!a) throw new Error(`알 수 없는 설치 대상: ${id}`);
+  return a;
+}
+
+export { MARKER, rewriteRefPaths } from "./common.ts";
+export { claudeCode, codex, cursor, windsurf, agentsMd };
diff --git a/packages/core/src/targets/windsurf.ts b/packages/core/src/targets/windsurf.ts
new file mode 100644
index 0000000..a4ca7e6
--- /dev/null
+++ b/packages/core/src/targets/windsurf.ts
@@ -0,0 +1,66 @@
+import path from "node:path";
+import { exists } from "../fsx.ts";
+import type { FileAction, TargetAdapter, TargetContext } from "../types.ts";
+import { anyExists, referenceActions, rewriteRefPaths } from "./common.ts";
+
+const REF_PREFIX = ".windsurf/rules/designpaca";
+
+/** Windsurf 규칙 파일의 하드 상한. 넘으면 잘려서 조용히 망가진다. */
+const WINDSURF_CHAR_LIMIT = 12_000;
+
+/**
+ * Windsurf — .windsurf/rules/designpaca.md.
+ * Cursor 와 경로·프론트매터가 모두 다르다(trigger/globs, .mdc 아님).
+ *
+ * trigger 는 model_decision 을 쓴다. always_on 으로 두면 디자인 스킬이 모든 메시지의
+ * 시스템 프롬프트에 상주한다.
+ */
+export const windsurf: TargetAdapter = {
+  id: "windsurf",
+  label: "Windsurf",
+  hint: ".windsurf/rules/designpaca.md — 프로젝트 단위",
+  scopes: ["project"],
+
+  async detect(ctx: TargetContext) {
+    return anyExists([
+      path.join(ctx.cwd, ".windsurf"),
+      path.join(ctx.cwd, ".windsurfrules"),
+      path.join(ctx.home, ".windsurf"),
+    ]);
+  },
+
+  async plan(ctx: TargetContext) {
+    const rulesDir = path.join(ctx.cwd, ".windsurf", "rules");
+    const rule = path.join(rulesDir, "designpaca.md");
+    const refRoot = path.join(rulesDir, "designpaca");
+
+    const header = [
+      "---",
+      "trigger: model_decision",
+      `description: ${ctx.skill.description}`,
+      "---",
+      "",
+    ].join("\n");
+
+    const body = header + rewriteRefPaths(ctx.skill.body, REF_PREFIX);
+
+    const actions: FileAction[] = [
+      { kind: "write", path: rule, content: body },
+      ...referenceActions(refRoot, ctx.skill),
+    ];
+
+    return {
+      target: this.id,
+      scope: ctx.scope,
+      root: rulesDir,
+      actions,
+      alreadyInstalled: await exists(rule),
+      // 상한을 넘으면 설치는 되지만 Windsurf 가 뒷부분을 버린다. 조용히 깨지느니 막는다.
+      ...(body.length > WINDSURF_CHAR_LIMIT
+        ? {
+            blocked: `규칙 본문이 ${body.length}자로 Windsurf 상한(${WINDSURF_CHAR_LIMIT}자)을 넘는다. SKILL.md 를 줄여야 한다.`,
+          }
+        : {}),
+    };
+  },
+};
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
new file mode 100644
index 0000000..f11c1c1
--- /dev/null
+++ b/packages/core/src/types.ts
@@ -0,0 +1,96 @@
+/** 설치 대상 식별자 */
+export type TargetId = "claude-code" | "codex" | "cursor" | "windsurf" | "agents-md";
+
+/** 설치 범위 — user: 홈 디렉터리 전역, project: 현재 프로젝트 */
+export type Scope = "user" | "project";
+
+/** 한 파일에 대한 설치 동작 */
+export type FileAction =
+  | { kind: "write"; path: string; content: string }
+  /** 마커 블록으로 감싼 영역만 교체(사용자 문서 보존) */
+  | { kind: "inject"; path: string; marker: string; content: string };
+
+/** 설치 전 사용자에게 보여줄 계획 */
+export interface InstallPlan {
+  target: TargetId;
+  scope: Scope;
+  /** 이 타깃이 파일을 쓰는 루트 (표시용) */
+  root: string;
+  actions: FileAction[];
+  /** 이미 설치돼 있는가 */
+  alreadyInstalled: boolean;
+  /** 설치를 막는 사유. 있으면 apply 하지 않는다 */
+  blocked?: string;
+}
+
+/** 매니페스트에 기록되는 개별 파일 */
+export interface InstalledFile {
+  path: string;
+  /** 설치 시점 내용의 sha256 — 사용자 수정(드리프트) 감지에 쓴다 */
+  sha256: string;
+  /** 마커 주입 방식으로 설치된 파일인가 */
+  marker?: string;
+}
+
+export interface InstallRecord {
+  target: TargetId;
+  scope: Scope;
+  root: string;
+  version: string;
+  installedAt: string;
+  files: InstalledFile[];
+}
+
+export interface Manifest {
+  /** 매니페스트 스키마 버전 — 향후 마이그레이션 판단용 */
+  schema: 1;
+  installs: InstallRecord[];
+}
+
+/** doctor/update 가 쓰는 드리프트 판정 */
+export type DriftStatus = "ok" | "modified" | "missing";
+
+export interface DriftReport {
+  record: InstallRecord;
+  files: { path: string; status: DriftStatus }[];
+  /** 사용자가 수정한 파일 경로 */
+  modified: string[];
+}
+
+/** 타깃 어댑터가 구현해야 하는 인터페이스 */
+export interface TargetAdapter {
+  id: TargetId;
+  /** TUI 에 표시할 이름 */
+  label: string;
+  /** 한 줄 설명 */
+  hint: string;
+  /** 이 타깃이 지원하는 범위 */
+  scopes: Scope[];
+  /** 시스템에 이 도구가 설치돼 있는 흔적이 있는가 (기본 선택 여부 판단) */
+  detect(ctx: TargetContext): Promise<boolean>;
+  /** 설치 계획 수립 — 파일을 쓰지 않는다 */
+  plan(ctx: TargetContext): Promise<InstallPlan>;
+}
+
+export interface TargetContext {
+  scope: Scope;
+  /** 홈 디렉터리 */
+  home: string;
+  /** 현재 작업 디렉터리(프로젝트 범위일 때 기준) */
+  cwd: string;
+  /** 번들된 스킬 소스 */
+  skill: SkillSource;
+}
+
+/** 번들에 포함된 스킬 원본 */
+export interface SkillSource {
+  version: string;
+  /** SKILL.md 본문 (프론트매터 포함) */
+  skillMd: string;
+  /** references/ 이하 상대경로 → 내용 */
+  files: Map<string, string>;
+  /** 프론트매터를 제외한 본문 — 프론트매터를 쓰지 않는 포맷용 */
+  body: string;
+  /** 프론트매터에서 뽑은 description */
+  description: string;
+}
diff --git a/packages/core/test/installer.test.ts b/packages/core/test/installer.test.ts
new file mode 100644
index 0000000..e070f6e
--- /dev/null
+++ b/packages/core/test/installer.test.ts
@@ -0,0 +1,163 @@
+import assert from "node:assert/strict";
+import fs from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+import { after, test } from "node:test";
+import { applyPlan, planInstall, removeInstall } from "../src/installer.ts";
+import { inspectDrift, readManifest } from "../src/manifest.ts";
+import { extractBlock } from "../src/marker.ts";
+import type { SkillSource } from "../src/types.ts";
+
+const tmp = await fs.mkdtemp(path.join(os.tmpdir(), "designpaca-test-"));
+const home = path.join(tmp, "home");
+const cwd = path.join(tmp, "proj");
+await fs.mkdir(home, { recursive: true });
+await fs.mkdir(cwd, { recursive: true });
+
+after(async () => {
+  await fs.rm(tmp, { recursive: true, force: true });
+});
+
+/** 본문에 references 경로를 넣어 타깃별 경로 재작성을 검증할 수 있게 한다 */
+const BODY = "# 본문\n\n토큰은 `references/tokens.md` 를 봐라.";
+
+const skill: SkillSource = {
+  version: "9.9.9",
+  skillMd: ['---', 'name: designpaca', 'description: "테스트용"', '---', '', BODY, ''].join("\n"),
+  files: new Map([["references/tokens.md", "# 토큰\n"]]),
+  body: BODY,
+  description: "테스트용",
+};
+
+const env = { home, cwd };
+
+test("claude-code: 설치 → 드리프트 없음 → 제거", async () => {
+  const plan = await planInstall("claude-code", "user", skill, env);
+  assert.equal(plan.alreadyInstalled, false);
+  assert.equal(plan.actions.length, 3); // SKILL.md + references 1개 + 버전 스탬프
+
+  const res = await applyPlan(plan, skill.version, { env });
+  assert.equal(res.written.length, 3);
+  assert.equal(res.skipped.length, 0);
+
+  const skillMd = await fs.readFile(path.join(plan.root, "SKILL.md"), "utf8");
+  assert.ok(skillMd.includes("name: designpaca"));
+  // 디렉터리를 통째로 복사하는 타깃은 상대 경로가 그대로 맞다. 재작성하면 안 된다.
+  assert.ok(skillMd.includes("`references/tokens.md`"));
+  assert.ok(!skillMd.includes(".claude/skills"));
+
+  const drift = await inspectDrift(res.record);
+  assert.deepEqual(drift.modified, []);
+
+  const removed = await removeInstall(res.record, { env });
+  assert.equal(removed.removed.length, 3);
+  assert.equal(removed.keptModified.length, 0);
+  assert.equal((await readManifest(home)).installs.length, 0);
+  await assert.rejects(() => fs.access(plan.root));
+});
+
+test("사용자가 고친 파일은 update 가 건너뛴다", async () => {
+  const plan = await planInstall("claude-code", "user", skill, env);
+  const first = await applyPlan(plan, skill.version, { env });
+
+  const target = path.join(plan.root, "SKILL.md");
+  await fs.writeFile(target, "내가 고친 내용\n", "utf8");
+
+  const drift = await inspectDrift(first.record);
+  assert.deepEqual(drift.modified, [target]);
+
+  const again = await applyPlan(await planInstall("claude-code", "user", skill, env), skill.version, {
+    env,
+  });
+  assert.deepEqual(again.skipped, [target]);
+  assert.equal(await fs.readFile(target, "utf8"), "내가 고친 내용\n");
+
+  // force 면 덮되 .orig 로 남긴다
+  const forced = await applyPlan(await planInstall("claude-code", "user", skill, env), skill.version, {
+    env,
+    force: true,
+  });
+  assert.equal(forced.skipped.length, 0);
+  assert.equal(forced.backedUp.length, 1);
+  assert.equal(await fs.readFile(`${target}.orig`, "utf8"), "내가 고친 내용\n");
+  assert.ok((await fs.readFile(target, "utf8")).includes("name: designpaca"));
+
+  await removeInstall(forced.record, { env });
+  await fs.rm(`${target}.orig`, { force: true });
+});
+
+test("agents-md: 포인터만 주입하고 본문은 별도 디렉터리에 푼다", async () => {
+  const doc = path.join(cwd, "AGENTS.md");
+  await fs.writeFile(doc, "# 내 프로젝트\n\n내 지침.\n", "utf8");
+
+  const plan = await planInstall("agents-md", "project", skill, env);
+  const res = await applyPlan(plan, skill.version, { env });
+
+  const after1 = await fs.readFile(doc, "utf8");
+  assert.ok(after1.includes("# 내 프로젝트"));
+  assert.ok(after1.includes("내 지침."));
+
+  const block = extractBlock(after1, "designpaca") ?? "";
+  // AGENTS.md 는 항상 로드된다. 본문 전체가 아니라 포인터만 들어가야 한다.
+  assert.ok(block.includes(".designpaca/SKILL.md"), "포인터가 없다");
+  assert.ok(!block.includes("토큰은"), "본문이 통째로 들어갔다");
+  assert.ok(block.length < 1000, `블록이 ${block.length}자로 너무 크다`);
+
+  // 본문은 .designpaca/ 에 있고, 그 안의 참조 경로가 재작성돼 있어야 한다
+  const skillMd = await fs.readFile(path.join(cwd, ".designpaca", "SKILL.md"), "utf8");
+  assert.ok(skillMd.includes(".designpaca/references/tokens.md"), "참조 경로가 재작성되지 않았다");
+  await fs.access(path.join(cwd, ".designpaca", "references", "tokens.md"));
+
+  // 문서의 다른 곳을 고쳐도 드리프트로 잡히면 안 된다 (블록 안쪽만 본다)
+  await fs.writeFile(doc, after1.replace("내 지침.", "내 지침을 고쳤다."), "utf8");
+  assert.deepEqual((await inspectDrift(res.record)).modified, []);
+
+  await removeInstall(res.record, { env });
+  const after2 = await fs.readFile(doc, "utf8");
+  assert.ok(after2.includes("내 지침을 고쳤다."));
+  assert.ok(!after2.includes("designpaca:start"));
+});
+
+test("cursor 는 user 범위를 거부한다", async () => {
+  const plan = await planInstall("cursor", "user", skill, env);
+  assert.ok(plan.blocked);
+  await assert.rejects(() => applyPlan(plan, skill.version, { env }));
+});
+
+test("cursor: .mdc 프론트매터로 변환하고 참조 경로를 재작성한다", async () => {
+  const plan = await planInstall("cursor", "project", skill, env);
+  const res = await applyPlan(plan, skill.version, { env });
+
+  const mdc = await fs.readFile(path.join(cwd, ".cursor", "rules", "designpaca.mdc"), "utf8");
+  assert.ok(mdc.startsWith("---\ndescription: 테스트용"));
+  assert.ok(mdc.includes("alwaysApply: false"));
+  assert.ok(mdc.includes("# 본문"));
+  // 본문과 references 가 다른 디렉터리에 놓이므로 경로가 재작성돼야 한다
+  assert.ok(
+    mdc.includes(".cursor/rules/designpaca/references/tokens.md"),
+    "참조 경로가 재작성되지 않았다",
+  );
+  await fs.access(path.join(cwd, ".cursor", "rules", "designpaca", "references", "tokens.md"));
+
+  await removeInstall(res.record, { env });
+});
+
+test("windsurf: Cursor 와 다른 경로·프론트매터를 쓴다", async () => {
+  const plan = await planInstall("windsurf", "project", skill, env);
+  const res = await applyPlan(plan, skill.version, { env });
+
+  const rule = await fs.readFile(path.join(cwd, ".windsurf", "rules", "designpaca.md"), "utf8");
+  // always_on 이면 디자인 스킬이 모든 메시지의 시스템 프롬프트에 상주한다
+  assert.ok(rule.includes("trigger: model_decision"));
+  assert.ok(!rule.includes("alwaysApply"));
+  assert.ok(rule.includes(".windsurf/rules/designpaca/references/tokens.md"));
+
+  await removeInstall(res.record, { env });
+});
+
+test("windsurf: 12,000자 상한을 넘으면 설치를 막는다", async () => {
+  const huge: SkillSource = { ...skill, body: "가".repeat(13_000) };
+  const plan = await planInstall("windsurf", "project", huge, env);
+  assert.ok(plan.blocked, "상한 초과인데 막지 않았다");
+  assert.match(plan.blocked, /상한/);
+});
diff --git a/packages/core/test/marker.test.ts b/packages/core/test/marker.test.ts
new file mode 100644
index 0000000..00edb19
--- /dev/null
+++ b/packages/core/test/marker.test.ts
@@ -0,0 +1,50 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { extractBlock, hasBlock, removeBlock, upsertBlock } from "../src/marker.ts";
+
+const M = "designpaca";
+
+test("빈 문서에 블록을 넣는다", () => {
+  const out = upsertBlock("", M, "본문");
+  assert.ok(hasBlock(out, M));
+  assert.equal(extractBlock(out, M), "본문");
+});
+
+test("기존 문서 뒤에 붙이고 원문을 보존한다", () => {
+  const doc = "# 내 지침\n\n건드리지 마라.\n";
+  const out = upsertBlock(doc, M, "우리 블록");
+  assert.ok(out.startsWith("# 내 지침"));
+  assert.ok(out.includes("건드리지 마라."));
+  assert.equal(extractBlock(out, M), "우리 블록");
+});
+
+test("두 번째 호출은 블록 내용만 교체한다", () => {
+  const first = upsertBlock("# 문서\n\n앞부분\n", M, "v1");
+  const second = upsertBlock(first, M, "v2");
+  assert.equal(extractBlock(second, M), "v2");
+  assert.ok(!second.includes("v1"));
+  assert.ok(second.includes("앞부분"));
+  // 블록이 두 개로 늘어나면 안 된다
+  assert.equal(second.split("designpaca:start").length - 1, 1);
+});
+
+test("블록 뒤에 사용자가 쓴 내용도 보존한다", () => {
+  const doc = upsertBlock("앞\n", M, "블록") + "\n뒤에 쓴 내용\n";
+  const out = upsertBlock(doc, M, "새 블록");
+  assert.ok(out.includes("앞"));
+  assert.ok(out.includes("뒤에 쓴 내용"));
+  assert.equal(extractBlock(out, M), "새 블록");
+});
+
+test("제거하면 우리 블록만 사라진다", () => {
+  const doc = upsertBlock("# 문서\n\n내용\n", M, "블록");
+  const out = removeBlock(doc, M);
+  assert.ok(!hasBlock(out, M));
+  assert.ok(out.includes("# 문서"));
+  assert.ok(out.includes("내용"));
+});
+
+test("블록이 없는 문서를 제거해도 그대로다", () => {
+  const doc = "# 문서\n";
+  assert.equal(removeBlock(doc, M), doc);
+});
diff --git a/packages/core/test/skill-source.test.ts b/packages/core/test/skill-source.test.ts
new file mode 100644
index 0000000..0c435c6
--- /dev/null
+++ b/packages/core/test/skill-source.test.ts
@@ -0,0 +1,23 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { splitFrontmatter } from "../src/skill-source.ts";
+
+test("프론트매터와 본문을 나눈다", () => {
+  const { fm, body } = splitFrontmatter(
+    ['---', 'name: designpaca', 'description: "따옴표 있는 값"', '---', '', '# 제목', '내용'].join("\n"),
+  );
+  assert.equal(fm["name"], "designpaca");
+  assert.equal(fm["description"], "따옴표 있는 값");
+  assert.ok(body.trim().startsWith("# 제목"));
+});
+
+test("프론트매터가 없으면 전체가 본문이다", () => {
+  const { fm, body } = splitFrontmatter("# 제목만 있다");
+  assert.deepEqual(fm, {});
+  assert.equal(body, "# 제목만 있다");
+});
+
+test("CRLF 문서도 처리한다", () => {
+  const { fm } = splitFrontmatter("---\r\nname: designpaca\r\n---\r\n본문");
+  assert.equal(fm["name"], "designpaca");
+});
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
new file mode 100644
index 0000000..fc880ef
--- /dev/null
+++ b/packages/core/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": { "types": ["node"], "noEmit": true },
+  "include": ["src/**/*.ts", "test/**/*.ts"]
+}
diff --git a/packages/skill/SKILL.md b/packages/skill/SKILL.md
new file mode 100644
index 0000000..6b97f3e
--- /dev/null
+++ b/packages/skill/SKILL.md
@@ -0,0 +1,261 @@
+---
+name: designpaca
+description: "웹 디자인 전 과정을 끌고 가는 파이프라인 스킬. 랜딩 페이지·포트폴리오·마케팅 사이트·웹앱 UI를 새로 만들거나 기존 사이트를 리디자인할 때 쓴다. 레퍼런스 조사 → 방향 결정 → 디자인 토큰 → 구현(SVG 필터·three.js·인터랙티브 모션) → 셀프 감사까지 순서대로 진행하고, AI가 만든 티 나는 결과물을 구체적 지문 목록으로 차단한다. Use when building or redesigning any website, landing page, portfolio, hero section, or web UI where visual quality matters."
+---
+
+# designpaca
+
+너는 작은 디자인 스튜디오의 디자인 리드다. 이 스튜디오는 **어떤 클라이언트의 사이트도 다른 클라이언트의 것과 혼동될 수 없다**는 평판으로 먹고산다. 클라이언트는 이미 템플릿 같은 시안을 거절한 적이 있고, 지금 값을 치르고 사는 것은 **이 브리프에만 맞는 관점**이다.
+
+그러므로 이 스킬의 목적은 "예쁘게 만들기"가 아니다. **왜 이 선택인지 말할 수 있는 디자인을 만드는 것**이다. 근거를 대지 못하는 결정은 기본값이고, 기본값의 총합이 AI 슬롭이다.
+
+## 범위
+
+**쓴다**: 랜딩 페이지 · 포트폴리오 · 마케팅 사이트 · 제품 소개 · 히어로 섹션 · 웹앱의 시각 언어 · 기존 사이트 리디자인
+
+**쓰지 않는다**: 대시보드의 데이터 밀도 설계(→ 데이터 시각화 스킬) · 순수 백엔드 · 이미 확립된 디자인 시스템을 따라야만 하는 작업(그 시스템을 따르는 게 맞다) · "일단 돌아가게만" 요청
+
+## 우선순위
+
+충돌하면 위가 이긴다. **이 스킬의 기본값은 맨 아래다.**
+
+```
+사용자의 명시적 지시  >  프로젝트의 design.md  >  프로젝트의 기존 토큰·코드  >  designpaca 기본값
+```
+
+사용자가 "보라색으로 해달라"고 하면 보라색으로 한다. 아래 규칙은 **브리프가 침묵할 때의 기본값**이지 금지 목록이 아니다. 단 기본값을 벗어날 때는 **왜 이 브리프에 그것이 맞는지 한 문장으로 말하고** 진행한다. 말할 수 없으면 그건 결정이 아니라 기본값 회귀다.
+
+## 핵심 규칙
+
+브리프가 명시적으로 뒤집지 않는 한 지킨다.
+
+1. **레퍼런스 없이 시작하지 않는다.** 전체 경로에서 1단계를 건너뛴 디자인은 5단계에서 실패 처리한다. 연장·국소 경로는 `design.md` 가 그 자리를 대신한다 — 그것도 없이 건너뛰면 실패다.
+2. **모든 시각적 결정에는 브리프로 소급되는 이유가 있어야 한다.** "보통 이렇게 한다"는 이유가 아니다.
+3. **화려함은 4순위다.** Awwwards 배점이 Design 40 / Usability 30 / Creativity 20 / Content 10이다. 3D를 얹는 것보다 타입 스케일을 정돈하는 게 결과에 두 배 유효하다.
+4. **대담함은 한 곳에만.** 리스크는 하나다. 나머지는 조용히 받쳐준다. 두 곳에서 소리치면 둘 다 죽는다.
+5. **성능 예산을 넘기면 그 이펙트는 채택하지 않는다.** 예산은 3단계에서 정하고 5단계에서 검증한다. 데모·포트폴리오 브리프면 예산을 올려도 되지만 **올렸다고 말해야 한다**.
+
+**접근성은 예외다. 이것만은 협상하지 않는다.** 키보드·포커스·대비·`prefers-reduced-motion`은 어떤 이펙트보다, 어떤 브리프보다 우선한다. 픽셀은 왜곡해도 DOM은 살린다.
+
+## 파이프라인
+
+일곱 단계다(0~6). 0단계에서 정한 경로에 따라 **일부 단계를 건너뛸 수는 있지만, 도는 단계의 순서는 고정이다.** 각 단계에는 통과 조건이 있고, 통과하지 못하면 다음 단계로 가지 않는다.
+
+참조 문서는 **해당 단계에 들어갈 때 읽는다.** 처음부터 전부 읽지 마라 — 컨텍스트 낭비다.
+
+---
+
+### 0단계 — 브리프 게이트
+
+**먼저 프로젝트 루트에 `design.md` 가 있는지 확인한다.** (프로젝트 루트 = 패키지 매니저 설정 파일이 있는 디렉터리. 모노레포면 **작업 대상 패키지의 루트**를 쓰고, 저장소 루트에도 있으면 둘 다 읽되 가까운 쪽이 이긴다) 있으면 읽고, 그 결정을 이 스킬의 기본값보다 우선한다. 같은 프로젝트를 두 번째로 작업할 때 지난번과 다른 디자인이 나오면 그건 실패다.
+
+브리프를 세 줄로 압축한다. 세 줄을 못 쓰면 아직 작업을 시작할 수 없다.
+
+```
+무엇을:  (한 문장. 무엇을 만드는가)
+누구에게: (한 문장. 누가 보고, 무엇을 하길 바라는가)
+제약:    (기술 스택 / 기존 브랜드 / 기한 / 성능 요구 / 콘텐츠 유무)
+```
+
+**규모를 판정한다.** 셋 다 사실 질문이다. 추측하지 말고 파일을 보고 답해라.
+
+- **A.** 없던 화면을 새로 만드는가?
+- **B.** 토큰 체계(색 역할·타입 스케일·간격 리듬·모션 문법)를 새로 정하거나 다시 정의하는가?
+- **C.** `design.md` 가 있는가?
+
+| 조건 | 경로 | 도는 단계 |
+|---|---|---|
+| (A 또는 B) 이고 C 아니오 | **전체** | 0 → 1 → 2 → 3 → 4 → 5 → 6 |
+| (A 또는 B) 이고 C 예 | **연장** | 0 → 3 → 4 → 5 → 6 — 방향은 `design.md` 가 이미 답했다 |
+| A·B 둘 다 아니오, 손대는 섹션 2개 이하 | **국소** | 0 → 4 → 5 → 6(한 줄 추기) |
+
+고른 경로와 근거를 한 줄로 말해라: *"국소 — 새 화면 없음, 토큰 재정의 없음, 섹션 1개."*
+
+**애매하면 긴 쪽으로.** 단 국소 조건에 해당하면 국소로 가라 — 버튼 하나에 갤러리 3곳을 여는 것은 사용자가 이 스킬을 끄게 만든다.
+**국소로 시작했다가 조건이 깨지면 멈추고 올린다.** 토큰을 새로 정의하게 됐거나, 손댄 섹션이 3개를 넘었거나, 방향을 바꿔야 하면. **올렸다고 말해라. 조용히 국소에 머무는 것이 이 스킬의 최대 실패다.**
+
+**막혔을 때**: 브리프가 비어 있으면 추측하지 말고 물어라. 단 **한 번에 다 묻지 마라.** 결과를 가장 크게 바꾸는 것 하나만 묻고, 나머지는 가정을 명시하고 진행한다.
+
+**리디자인이면** 여기서 감사(audit)를 먼저 한다: 지금 무엇이 작동하고 무엇이 무너져 있는가, 유지해야 할 자산(로고·색·기존 사용자의 기대)은 무엇인가. 감사 없는 리디자인은 파괴다.
+
+> 통과 조건: 세 줄이 채워졌다. 리디자인이면 감사 결과가 있다.
+
+---
+
+### 1단계 — 레퍼런스 조사 (전체 경로 전용, **건너뛰기 금지**)
+
+이 단계가 designpaca의 심장이다. 머릿속 기본값이 아니라 **실제로 존재하는 사이트**에서 시작한다. 연장·국소 경로는 0단계에서 이미 이 단계를 건너뛰기로 정했고, 그 근거는 `design.md` 다.
+
+레퍼런스 **3개**를 서로 **다른 층위**에서 고른다:
+
+| 슬롯 | 무엇 | 규칙 |
+|---|---|---|
+| **R1 — 구조** | 같은 업종/목적의 사이트 | 정보 구조와 흐름을 가져온다 |
+| **R2 — 톤** | **반드시 다른 업종** | 분위기·재질·타이포 감각을 가져온다 |
+| **R3 — 디테일** | 어디서든 | 하나의 구체적 기법(모션·타입·인터랙션) |
+
+R1과 R2를 같은 업종에서 고르면 결과는 그 업종의 평균이 된다. SaaS 구조 + SaaS 톤 = 또 하나의 SaaS 슬롭이다.
+
+- 어디서 찾는가 → `references/galleries.md` (브리프별 라우팅 표)
+- 어떻게 뜯어보는가 → `references/reference-method.md` (6축 해체 프레임워크, WebFetch 템플릿)
+
+**갤러리 목록 페이지가 아니라 원본 사이트를 열어라.** 이미지를 볼 수 없어도 구조는 읽을 수 있다.
+
+> 통과 조건: R1/R2/R3 각각의 URL과, 그것에서 **무엇을 가져올지** 한 줄씩. 형식은 `reference-method.md` 참조.
+
+---
+
+### 2단계 — 방향 결정
+
+레퍼런스 3개를 하나의 방향으로 합성한다. 베끼지 않는다. **축을 정하고 그 축 위에서 결정한다.**
+
+정해야 할 것:
+- **한 문장 컨셉** — 이 사이트가 주는 인상을 한 문장으로. ("고급 잡지의 여백", "계기판처럼 정확한", "밤의 스튜디오")
+- **미학 프리셋** — 아래에서 고르거나, 브리프가 요구하면 새로 정의한다
+- **감수할 리스크 하나** — 정당화할 수 있는 과감한 선택 하나. 없으면 그 디자인은 안전하고 잊힌다
+
+| 프리셋 | 한 줄 | 언제 |
+|---|---|---|
+| `references/presets/editorial.md` | 잡지의 여백과 세리프 | 콘텐츠가 주인공. 브랜드·미디어·포트폴리오·럭셔리 |
+| `references/presets/swiss-minimal.md` | 그리드와 침묵 | 제품이 복잡할 때. B2B·도구·문서 |
+| `references/presets/anti-grid.md` | 의도적으로 깨진 격자 | 기억되어야 할 때. 에이전시·아트·캠페인 |
+| `references/presets/dark-instrument.md` | 계기판처럼 정확한 | 개발자·데이터·기술 제품 |
+| `references/presets/quiet-commerce.md` | 읽히는 커머스 | 전환이 목적인 B2C. 상품 수가 적고 사양이 설득의 주체 |
+
+고른 프리셋 파일 **하나만** 읽어라. 다섯 다 읽지 마라. 고르는 기준은 `references/presets/README.md`.
+
+> 통과 조건: 한 문장 컨셉 + 프리셋 + 리스크 하나가 적혔다.
+> **연장 경로는 이 단계를 돌지 않는다.** `design.md` 의 컨셉·프리셋·리스크를 그대로 이어받는다. 바꾸고 싶으면 전체 경로로 올린다.
+
+---
+
+### 3단계 — 디자인 토큰과 예산
+
+구현 전에 **숫자를 먼저 정한다.** 코드를 쓰면서 색을 고르면 매번 다른 색이 나온다.
+
+- 타입 스케일 · 색 역할 · 간격 리듬 · 모션 문법 → `references/tokens.md`
+- 한글이 들어가면 → `references/antipatterns.md` 의 한글 조판 섹션을 **반드시** 읽어라. 서구 레퍼런스에는 이 정보가 없다
+
+**성능 예산도 여기서 정한다.** 나중에 정하면 이미 늦는다. 전체 표는 `references/tokens.md` §5 하나뿐이다 — 다른 문서에 예산 표를 만들지 마라.
+
+기본선: 히어로까지 JS **150KB(gzip)** / 첫 인터랙션 **3초** / 애니메이션은 `transform`·`opacity` 만.
+브리프가 데모·포트폴리오라면 예산을 올려도 된다. **올린다는 사실과 이유를 명시해라.**
+
+> 통과 조건: 토큰이 실제 값으로 적혔고, 성능 예산이 숫자로 정해졌다.
+
+---
+
+### 4단계 — 구현
+
+순서가 있다. **레이아웃 → 재질 → 모션.** 거꾸로 가면 화려한데 읽을 수 없는 페이지가 나온다.
+
+**4-1. 레이아웃과 타이포그래피** → `references/layout.md`
+그리드, 여백 리듬, 시선 흐름. 3단계의 토큰을 그대로 쓴다. 이 단계가 끝나면 **아무 이펙트 없이도 완성된 페이지**여야 한다. 이것이 모든 폴백의 기반이다.
+
+**4-2. 재질(surface)** → `references/svg-filters.md`
+"이 디자인의 표면은 무엇으로 되어 있는가"를 결정한다. 종이인가, 유리인가, 금속인가, 필름인가. SVG 필터는 장식이 아니라 **재질을 만드는 도구**다. 그레인·굴절·번짐·수차를 여기서 선택한다.
+
+**4-3. 입체와 공간** → `references/three.md`
+필요할 때만. 3단계 예산을 넘기면 채택하지 않는다. 무거운 씬 임포트보다 **셰이더 플레인 하나**로 같은 인상을 내는 쪽을 먼저 검토한다. 채택하면 폴백을 같이 만든다.
+
+**4-4. 모션과 인터랙션** → `references/motion.md`
+모션은 장식이 아니라 **문법**이다. 무엇이 어디서 와서 어디로 가는지 말한다. 이유 없는 등장 애니메이션은 넣지 않는다.
+
+**실험 경로** → `references/experimental-canvas.md`
+HTML-in-Canvas(`drawElementImage`)는 **폴백을 완성한 뒤에만** 얹는다. 기본값은 쓰지 않는 것이다.
+
+> 통과 조건: 이펙트를 전부 끈 상태에서도 페이지가 완성돼 있다.
+
+---
+
+### 5단계 — 프리플라이트 감사
+
+**자기 결과물을 남의 것처럼 본다.** 통과 못 한 항목은 고치고 다시 돈다.
+
+→ `references/preflight.md` (전체 체크리스트)
+→ `references/antipatterns.md` (슬롭 지문 목록 + grep 검출 + 자가 채점표)
+
+특히 다음 셋은 기계적으로 검사할 수 있다. **반드시 돌려라**:
+
+1. **슬롭 지문 grep** — 보라 CTA(`#6366f1`·`#8b5cf6` 계열), 전체 대문자 헤드라인, 번호 매긴 1·2·3 단계. 실측 검출률 상위 항목이다
+2. **카피 경쟁사 치환 테스트** — 제품명을 경쟁사 이름으로 바꿔도 문장이 성립하면, 그 카피는 아무것도 말하지 않았다
+3. **이펙트 전부 끄기** — CSS 필터·WebGL·애니메이션을 끈 상태에서 페이지가 여전히 읽히는가
+
+#### 하드 게이트 — 전부 "아니오"여야 한다
+
+취향이 아니라 **버그**다. 여기엔 오버라이드가 없다. 체크박스가 아니라 질문이니 실제로 검사해라.
+
+1. 토큰 밖에 인라인 hex/rgb/oklch 색상값이나 인라인 `font-family` 가 있는가?
+2. 상태색(성공·경고·오류)을 제외하고, 한 페이지에서 강조색이 2개 이상인가?
+3. `border-radius` 값이 토큰 밖에 있거나, 서로 다른 값이 3종 이상인가?
+4. 페이지 중간에 테마(라이트/다크)가 뒤집히는데, 그 반전이 3단계 토큰에 규칙으로 정의돼 있지 않은가?
+   (리듬으로 의도한 반전은 통과다. 정의 없이 섹션마다 다른 것이 실패다)
+5. 320~1920px 사이 어느 폭에서든 가로 스크롤이 생기는가?
+6. 버튼 라벨·내비 링크가 2줄로 접히는 폭이 있는가?
+7. 버튼 텍스트와 배경의 대비가 4.5:1 미만인가?
+8. `transform`/`opacity` 외의 속성을 애니메이션하는가?
+9. 풀하이트 섹션에 `100vh` 를 썼는가? (모바일 주소창 때문에 `100dvh` 여야 한다)
+10. `window.addEventListener('scroll')` 을 썼는가? (`IntersectionObserver` 또는 scroll-driven animation 을 써라)
+11. **사용자가 주지 않은 수치**(지표·통계·후기·고객 수)가 페이지에 **그럴듯한 값으로** 들어가 있는가?
+    걸렸으면 셋 중 하나다: (a) `{{SETUP_TIME}}` 같은 **명시적 placeholder** 로 바꾸고 6단계 `design.md` 미확정 목록에 올린다, (b) 사용자에게 실제 값을 묻고 멈춘다, (c) 그 섹션 자체를 다른 구조로 바꾼다.
+    **placeholder 는 통과다.** 숫자 모양의 구멍은 정직하고, 지어낸 숫자는 슬롭이다.
+12. `<div>` 로 만든 가짜 스크린샷·가짜 브라우저바·가짜 폰 프레임이 있는가?
+
+#### 카운트 규칙
+
+세어봐라. 넘으면 고친다.
+
+- 작은 대문자 라벨(eyebrow) 개수 ≤ `ceil(섹션수 / 3)`
+- 같은 이미지+텍스트 스플릿 레이아웃 연속 ≤ 2회
+- 마퀴 ≤ 1개
+- 섹션이 6개 이상이면 서로 다른 레이아웃 패밀리가 최소 3개
+- 히어로: 헤드라인 ≤ 2줄, 서브텍스트 ≤ 20단어, 텍스트 요소 ≤ 4개
+
+**국소 경로는 카운트를 페이지 전체로 다시 세지 않는다.** 내가 손댄 부분이 기존 카운트를 넘기게 만드는지만 본다.
+**하드 게이트 12개는 경로와 무관하게 전부 돈다.**
+
+> 통과 조건: 하드 게이트 12개 전부 "아니오", 카운트 규칙 통과, `preflight.md` 체크리스트 통과. 실패 항목이 있으면 4단계로 돌아간다.
+
+---
+
+### 6단계 — 결정을 남긴다
+
+작업이 끝나면 프로젝트 루트(0단계에서 정한 그 디렉터리)에 **`design.md`** 를 쓴다. 다음 실행(사람이든 에이전트든)이 이 파일을 읽고 같은 결정을 이어간다.
+
+```markdown
+# design.md
+브리프 3줄 / 레퍼런스 R1·R2·R3 URL / 한 문장 컨셉 / 프리셋 / 감수한 리스크 하나
+토큰 전체(타입·색·간격·모션) / 성능 예산과 실측치 / 채택한 이펙트와 그 폴백
+의도적으로 하지 않은 것과 그 이유
+```
+
+마지막 줄이 가장 중요하다. **하지 않기로 한 결정을 적어두지 않으면 다음 사람이 그것을 "빠뜨린 것"으로 착각하고 되돌린다.**
+
+**국소 경로는 전체를 다시 쓰지 않는다.** `design.md` 끝에 한 줄만 추기한다 — `날짜 · 무엇을 바꿨는지 · 토큰 변경이 있으면 그 값`. 기록 없는 국소 작업이 쌓이면 design.md 가 거짓말이 된다.
+
+> 통과 조건: `design.md` 가 프로젝트 루트에 있다(국소면 추기됐다).
+
+---
+
+## 참조 문서 지도
+
+| 파일 | 언제 읽나 |
+|---|---|
+| `references/galleries.md` | 1단계 — 어느 갤러리를 볼지 정할 때 |
+| `references/reference-method.md` | 1단계 — 레퍼런스를 뜯어볼 때 |
+| `references/presets/README.md` | 2단계 — 미학 방향을 고를 때 (고른 프리셋 하나만 추가로 읽는다) |
+| `references/tokens.md` | 3단계 — 토큰을 정할 때 |
+| `references/layout.md` | 4-1 — 그리드와 타이포 |
+| `references/svg-filters.md` | 4-2 — 재질을 만들 때 |
+| `references/three.md` | 4-3 — 입체가 필요할 때 |
+| `references/motion.md` | 4-4 — 움직임을 설계할 때 |
+| `references/experimental-canvas.md` | 4단계 — HTML-in-Canvas를 검토할 때 |
+| `references/preflight.md` | 5단계 — 감사 |
+| `references/antipatterns.md` | 3·5단계 — 한글 조판 / 슬롭 검출 |
+
+## 작업 중 지켜야 할 것
+
+- **단계를 보고하며 진행해라.** 사용자는 어느 단계인지 알아야 개입할 수 있다
+- **가정은 소리 내서 말해라.** 브리프에 없어서 정한 것은 명시한다
+- **되돌릴 수 있게 만들어라.** 토큰을 바꾸면 전체가 따라 바뀌는 구조로 짠다. 값을 하드코딩하면 수정 요청 한 번에 무너진다
+- **모르면 열어봐라.** 레퍼런스 사이트도, 참조 문서도, 실제로 읽고 나서 결정해라
diff --git a/packages/skill/package.json b/packages/skill/package.json
new file mode 100644
index 0000000..5b4fab1
--- /dev/null
+++ b/packages/skill/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@designpaca/skill",
+  "version": "0.1.0",
+  "private": true,
+  "description": "designpaca 스킬 원본 — SKILL.md 와 참조 문서",
+  "scripts": {
+    "build": "echo \"(스킬은 cli 빌드 시 dist/skill 로 번들된다)\"",
+    "typecheck": "echo \"(문서 패키지 — 타입 검사 없음)\"",
+    "test": "node ../../build/ci/lint-skill.mjs ."
+  }
+}
diff --git a/packages/skill/references/antipatterns.md b/packages/skill/references/antipatterns.md
new file mode 100644
index 0000000..2c750c7
--- /dev/null
+++ b/packages/skill/references/antipatterns.md
@@ -0,0 +1,271 @@
+# antipatterns.md — 금지 목록
+
+AI가 만든 티는 **못 만들어서** 나는 게 아니라 **결정을 안 해서** 난다.
+보라 그라디언트, Inter, 3열 아이콘 카드, `rounded-2xl shadow-lg`, "Get Started"는 전부 **미결정의 기본값**이다.
+
+프리플라이트에서 이 문서를 훑고 걸린 항목을 전부 해소한다. **4개 이상 걸리면 폐기하고 다시 시작한다.**
+
+---
+
+## 0. 최우선 — 측정된 상위 지문
+
+Show HN 랜딩 1,590개 실측에서 검출률이 가장 높았던 셋이다. **이 셋부터 확인하라.**
+
+| 순위 | 지문 | 검출률 | 왜 문제 | 대신 |
+|---|---|---|---|---|
+| 1 | **CTA 버튼이 보라·인디고 계열** (`bg-indigo-600`, `#6366f1`, `#8b5cf6`) | **10.7%** | Tailwind 기본 팔레트 = "색을 안 골랐다"는 신호 | 브랜드 색. 없으면 중립 대비가 가장 강한 색(잉크 위 화이트 반전) |
+| 2 | **헤드라인·섹션 라벨이 전체 대문자** (`FEATURES`, `HOW IT WORKS`) | **10.5%** | 얻지 않은 권위를 빌리는 장치. 가독성도 낮음 | 라벨을 없애고 헤드라인만으로 섹션을 구분 |
+| 3 | **번호 매긴 1·2·3 단계 섹션** | **9.4%** | 실제 순서가 아닌데 순서인 척 | 단계가 진짜 순서일 때만. 그 경우에도 번호보다 화면 캡처 3장이 낫다 |
+
+전체 표본의 22%가 4개 이상 지문을 가진 "heavy slop"이었다.
+
+---
+
+## 1. 컬러
+
+> **다크가 슬롭이 아니라 기본값이 슬롭이다.**
+> bun.sh는 다크 배경인데도 이 절의 항목을 거의 전부 회피한다 — 순흑이 아닌 `#0D0A0C`, 텍스트 3단계, 보라 대신 마젠타 `#FF2E97`, radius 어휘 3종.
+> A-01은 "다크를 쓰지 마라"가 아니라 **"고르지 않은 채로 다크에 떨어지지 마라"**는 뜻이다. 아래 전부 동일하다.
+
+| 지문 | 왜 문제 | 대신 |
+|---|---|---|
+| **다크 모드를 브리프 근거 없이 기본값으로** (`bg-slate-900`, `#0B0B0F`) | 생성 도구의 반사 반응. 단일 시그니처 검출 빈도 1위 | 라이트로 설계하고 다크는 토큰으로 파생. 사용자 82%가 다크를 쓴다는 데이터는 "지원하라"이지 "기본값으로 하라"가 아니다 |
+| **보라→파랑 그라디언트 히어로** (`from-purple-600 to-blue-500`, `#6366f1→#a855f7`) | 수십만 튜토리얼의 기본값 | 브랜드 색 1개 + 중립. 그라디언트를 쓸 거면 같은 hue 내 명도 변화 (`#1B4332→#2D6A4F`) |
+| **라벤더 퍼플이 어디에나** (`#a78bfa`, `#c4b5fd`) | 텍스트→랜딩 생성기의 출력 지문 | 보라를 쓰지 마라. 꼭 필요하면 채도를 낮추고 온도를 틀어라 (`#6B5B95`) |
+| **네온 온 다크** — 시안(`#22d3ee`)·바이올렛이 검정 위에서 발광 | 게이밍·개발자 툴 브리프가 아닌데 나오면 즉시 티가 남 | 저채도 액센트 1개. 발광 대신 명도 차이로 위계 |
+| **컬러 글로우** (`box-shadow: 0 0 80px rgba(139,92,246,.5)`) | 광원 논리 없이 깊이를 색으로 위조 | 중립 그림자 2단 (`0 1px 2px rgba(0,0,0,.06)`, `0 8px 24px rgba(0,0,0,.08)`) |
+| **히어로 뒤 방사형 그라디언트 오브·헤일로** | 구성을 못 잡았을 때의 회피 수단 | 배경을 비우거나 실제 콘텐츠(제품 스크린샷, 타입)로 채워라 |
+| **순백 `#ffffff` / 순흑 `#000000`** 을 배경·텍스트로 | 아무 결정도 하지 않았다는 뜻. 눈부심·번짐 유발 | 오프화이트 `#FAFAF7`, 잉크 `#111014`. 브랜드 hue를 2~4% 섞으면 더 좋다 |
+| **Tailwind 기본 토큰 그대로** (`slate-900`, `gray-500`, `emerald-500`) | 누구나 알아본다 | `tailwind.config`의 색을 **교체**한다(확장 아님). `ink-900`, `ember-600` 같은 고유 이름 |
+| **코드에서 색 이름을 직접 호출** (`purple-500`) | 색이 역할을 못 가짐 | 의미 토큰: `--color-action-primary`, `--color-surface-elevated`, `--color-text-secondary` |
+| **그라디언트 텍스트** (`background-clip: text`) | 스캔성을 깎고 정보는 0. OG 이미지에서 깨짐 | 단색. 강조는 크기·굵기·여백으로 |
+| **크림/베이지(`#FDF8F3`)를 "고급"의 기본값으로** | 보라를 대체한 신종 슬롭 | 크림을 쓸 거면 왜 크림인지 브리프와 연결하고 텍스트·액센트를 그에 맞춰 재설계 |
+| **hue 4개 이상** | 결정 못 한 상태 | hue 3개 이하. 면적 60(지배)/30(중립)/10(강조) |
+| **다크에서 본문 대비 미달** (`#0f172a` 위 `#94a3b8`) | 기능적 결함 | 본문 4.5:1 또는 APCA Lc ≥ 75. 다크의 본문은 순백 대신 `#E8E6E3` |
+
+---
+
+## 2. 타이포그래피
+
+| 지문 | 왜 문제 | 대신 |
+|---|---|---|
+| **Inter를 이유 없이 기본값으로** (특히 중앙 정렬 히어로) | AI 인터페이스의 기본 서체 | Satoshi / Switzer / DM Sans / Work Sans. Inter는 초고밀도 다국어 UI 같은 명확한 이유가 있을 때만 |
+| **Space Grotesk + Instrument Serif + Geist 조합** | 이 셋의 **반복 조합**이 생성 지문으로 특정됨 | 셋 중 **하나만** 쓰는 것은 허용. 둘 이상 함께 쓰면 실패. 파운드리를 바꾸면 더 낫다 (Fontshare, Velvetyne) |
+| **헤드라인 한 단어만 세리프 이탤릭** (`Build <em>better</em> products`) | 가장 널리 퍼진 "성의 표시" 관용구. 이제는 성의가 아니라 지문 | 강조는 줄바꿈·크기·색·여백으로 |
+| **페이지 전체에 폰트 패밀리 1개** | 위계를 크기로만 만들게 되어 밋밋 | 디스플레이 1 + 본문 1. 성격 차이를 크게 |
+| **타입 스케일이 평평함** (16/18/20/24, 비율 1.15 미만) | 모든 게 똑같이 중요해 보임 | 비율 1.25 또는 1.333. **최대/본문 4배 이상** (17→68). 비율만으로 4배가 안 나오면(1.25 5단계 = 2.44배) **디스플레이 사이즈를 스케일 밖에 따로 정의한다**(`tokens.md` §1). **단계 수를 늘려서 맞추지 마라** — 그건 아래 행에 걸린다 |
+| **타입 스케일 단계 8개 이상** | 통제 실패 | 3~5단계로 제한하고 각 단계에 역할 이름 부여 |
+| **히어로 = pill 배지 + 거대 헤드라인** (`✨ Now in beta` + H1) | 가장 알아보기 쉬운 구조 지문 | 배지를 지워라. 정말 필요하면 문장 안이나 내비 옆으로 |
+| **`_01_ _02_ _03_` 장식 번호 라벨** | 에디토리얼 흉내인데 구조는 없음 | 번호가 순서를 의미할 때만 |
+| **본문 letter-spacing 0.05em 이상** | 단어 인식이 느려짐 | 본문 0. 소형 대문자 라벨에만 +0.08em |
+| **대형 헤드라인 음수 자간 -0.06em 이상** | 글자가 서로 먹힘 | -0.02em ~ -0.04em |
+| **본문 line-height 1.3 미만 / 본문 12px 이하** | 가독성·접근성 실패 | 라틴 본문 line-height 1.5–1.7, 크기 16–18px 권장. **예외**: 고밀도 라틴 UI(대시보드·개발자 도구)에서 13–14px는 의도된 선택일 수 있다 — bun.sh 본문 최다 크기가 13.5px다. 단 **한글에는 이 예외를 적용하지 마라.** 한글은 같은 px에서 라틴보다 작아 보여 16px가 하한이다 |
+| **모노스페이스를 장식으로** (코드 아닌 라벨에 `font-mono`) | "테크 느낌"의 저비용 흉내 | 모노는 코드·데이터·식별자에만 |
+
+---
+
+## 3. 레이아웃 · 구조
+
+| 지문 | 왜 문제 | 대신 |
+|---|---|---|
+| **표준 골격**: 히어로 → 3열 피처 → 로고월 → 요금제 → FAQ → 푸터 | shadcn/ui 예제·Tailwind UI·Vercel 템플릿의 순서 그대로 | 섹션 순서를 브리프의 설득 논리로 재배열. 예: 문제 제시 → 실제 사용 화면 → 반론 처리 → 가격 |
+| **중앙 정렬 히어로** (텍스트 가운데 + CTA 2개 + 아래 스크린샷) | 가장 안전해서 가장 흔함 | 비대칭 그리드(5:7, 7:5), 좌측 정렬 대형 타입, 또는 텍스트를 화면 하단 1/3로 |
+| **정확히 3열, 균등 폭 피처 카드** | 콘텐츠가 3개여서가 아니라 3이 예쁘게 떨어져서 3인 것 | 항목 수를 콘텐츠가 정하게. 폭도 중요도에 따라 다르게 |
+| **아이콘이 카드 상단 중앙**에 있는 피처 카드 (아이콘 타일 + 제목 + 2문장) | 가장 확실한 단일 지문 | 아이콘을 없애고 숫자·스크린샷·실제 UI 조각으로. 쓸 거면 좌측 인라인 |
+| **카드 좌측 3–4px 컬러 스트립** (`border-l-4 border-purple-500`) | em-dash에 맞먹는 신뢰도의 지문 | 삭제. 구분이 필요하면 배경 톤 차이나 여백 |
+| **카드 안의 카드 안의 카드** | 시각적 소음. 깊이가 정보와 무관 | 중첩 최대 1단계. 안쪽은 구분선이나 여백으로 |
+| **근거 없는 지표 배너** (`10,000+ users · 99.9% uptime · 4.9★`) | 검증 불가한 숫자 나열은 신뢰를 깎는다 | 숫자 1개만, 출처와 함께. 없으면 섹션 삭제 |
+| **모든 여백이 같은 값** (전부 `p-6`, 전부 `gap-4`) | 리듬이 없어 강약이 사라짐 | 8pt 그리드 위 4~6종. 섹션 간 : 요소 간 ≈ 1:5 |
+| **섹션마다 동일한 상하 패딩** (`py-20` 반복) | 어디가 중요한지 알 수 없음 | 중요한 섹션에 더 많은 여백. 여백이 강조다 |
+| **벤토 그리드를 기본 선택지로** | 2026년 기준 표준이라 차별화가 아니다. "고민 안 했음"의 새 신호 | 타일 크기 차이가 정보 위계를 반영할 때만. 아니면 단순 리스트 |
+| **콘텐츠가 뷰포트 가장자리에 붙음** | 모바일에서 특히 조악 | 모바일 16–24px, 데스크톱 24–80px 좌우 패딩 |
+| **본문 컬럼이 화면 전체 폭** | 한 줄이 100자를 넘어 읽기가 무너짐 | 영문 `max-width: 65ch`. 국문은 25–40자 폭 |
+| **푸터가 링크 4열 + 소셜 아이콘 + 카피라이트뿐** | AI가 가장 성의 없이 만드는 곳 | 실제 정보(연락처, 주소, 사업자 정보)를 넣어라. 링크가 4개뿐이면 4열로 만들지 마라 |
+
+---
+
+## 4. 컴포넌트
+
+| 지문 | 왜 문제 | 대신 |
+|---|---|---|
+| **`rounded-2xl shadow-lg p-6` 를 손대지 않고 사용** | shadcn/ui 기본값. AI가 복붙하도록 설계된 값 | radius를 프로젝트 고유값으로(4px 또는 12px). 큰 그림자 대신 1px 보더 + 배경 톤 차이 |
+| **모든 요소 border-radius 16px 균일 / 24px 이상 과대** | radius가 결정이 아니라 기본값임을 드러냄. 24px+ 는 블롭처럼 보임 | radius 어휘 2개 (컨테이너 12px, 인터랙티브 8px). 또는 0으로 통일 |
+| **1px 회색 보더 + 넓게 퍼진 그림자 동시 사용** | 두 깊이 표현을 겹친 것. 광원 논리 없음 | 하나만 선택 |
+| **글래스모피즘 전면 사용** (`backdrop-blur` 카드 다수) | 실기기 FPS 15~30% 하락 | 내비 바·모달로 제한. 카드에는 쓰지 마라 |
+| **이모지를 아이콘 대신** (🚀 ⚡ 🎯 ✨) | 즉각적인 아마추어 신호 | 아이콘 세트 하나 고정 (Lucide, Phosphor, Radix). 이모지는 카피 안에서만 |
+| **버튼이 항상 2개 나란히** (`Get started` + `Learn more`) | 주 행동을 정하지 못했다는 뜻 | 주 CTA 1개. 보조는 텍스트 링크로 격하 |
+| **회색조 로고 6~8개 일렬 로고월** | 대부분 무관하거나 검증 불가 | 실제 고객이면 한 곳의 사례를 문장으로. 없으면 섹션 삭제 |
+| **이니셜 원형 아바타 + 텍스트 후기 3개** | 검증 불가한 후기는 신뢰를 깎는다 | 실명 + 직함 + 원문 링크. 없으면 넣지 마라 |
+| **가상 질문으로 채운 FAQ 6개** (`How does it work?`) | 실제로 받은 질문이 아님 | 실제 문의 3개. 답변에 구체적 숫자·조건 |
+| **요금제 3열 카드 + 가운데 "Most popular" 배지** | 가장 재현율 높은 SaaS 템플릿 | 비교 표, 단일 가격, 또는 계산기 |
+| **펄스 애니메이션 상태 점** (초록 원 깜빡임 + "All systems operational") | 정적 정보에 장식 애니메이션 | 상태가 실제로 바뀔 때만 |
+| **자동 스크롤 마퀴** (로고·후기·태그가 끝없이 흐름) | 읽기를 방해하고 주의를 강탈 | 정적 그리드. 많으면 페이지네이션 |
+| **hover가 아무 반응 없거나 전 요소가 동일하게 `scale(1.02)`** | 인터랙션을 설계하지 않았다는 신호 | 요소마다 다른 반응(링크는 밑줄, 카드는 배경 톤, 버튼은 명도). **hover는 가장 먼저 설계한다** |
+| **편집 불가 히어로 카피 뒤 깜빡이는 커서 `|`** | 타이핑 흉내. 정보 없음 | 삭제 |
+
+---
+
+## 5. 모션
+
+| 지문 | 왜 문제 | 대신 |
+|---|---|---|
+| **모든 요소에 동일한 fade-in-up** (`opacity 0→1`, `translateY 20px`, 같은 delay) | 모션 언어가 없다는 뜻. 페이지가 계속 떠오르기만 함 | 중요한 것에만. 순차 등장이 필요하면 stagger 40–60ms |
+| **인터페이스에 bounce / elastic 이징** | 2010년대 감성. 즉시 촌스러움 | `ease-out` 또는 `cubic-bezier(0.2, 0, 0, 1)` |
+| **이미지 hover 시 `scale` 또는 `rotate`** | 생성 UI의 반복 지문 | 이미지는 두고 캡션·오버레이·보더를 변화시켜라 |
+| **duration이 전부 300ms** | 마이크로와 연출을 구분 못 함 | 마이크로 100–200 / 트랜지션 200–400 / 연출 600–1200ms |
+| **스크롤 reveal 실패 시 콘텐츠가 `opacity: 0`으로 남음** | JS 실패 시 빈 페이지가 됨 | 기본을 visible로 두고 JS가 숨긴 뒤 보여주는 방식. 또는 CSS scroll-driven animation |
+| **`prefers-reduced-motion` 미대응** | 접근성 실패 | 모션 제거 경로를 반드시 제공 |
+| **전 섹션 패럴랙스** | 스크롤 감각이 어긋나고 성능 저하 | 한 섹션만, 이동량 10–20px |
+| **히어로에 3D/Spline 씬을 이유 없이** | JS 런타임 800KB~2MB. 모바일 4G에서 Core Web Vitals 실패 | 브리프가 요구할 때만. 아니면 정적 렌더 이미지 + 미세 모션 |
+| **로딩할 게 없는데 프리로더 카운터** | 없는 대기를 만듦 | 삭제 |
+
+---
+
+## 6. 카피 — 경쟁사 치환 테스트
+
+**AI 티는 시각보다 문장에서 먼저 난다.**
+
+### 테스트
+카피에서 제품·회사 이름을 **경쟁사 이름으로 바꿔 읽는다.**
+**여전히 자연스러우면 그 카피는 아무것도 말하지 않은 것이다. 다시 써라.**
+
+### 구문 지문
+
+| 지문 | 왜 문제 | 대신 |
+|---|---|---|
+| **`It's not X, it's Y` / `단순한 X가 아니라 Y입니다`** | ChatGPT 최대 지문. 400단어에 3번씩 나옴 | 그냥 Y를 말해라. 대조가 필요하면 비교 대상을 실명으로 |
+| **스타카토 3연타** (`No fluff. No filler. No BS.` / `빠르게. 정확하게. 간단하게.`) | 리듬으로 내용 없음을 감춤 | 한 문장으로 구체적으로 |
+| **em-dash(—) 한 문단에 2회 이상** | AI 문장 리듬의 대표 지문 | 마침표로 끊거나 쉼표로. 한국어에서 특히 부자연스럽다 |
+| **`In today's fast-paced digital landscape...`** 도입 | 아무 말도 하지 않는 문단 | 첫 문장부터 본론. 도입 문단 삭제 |
+
+### 어휘 지문
+
+| 지문 | 왜 문제 | 대신 |
+|---|---|---|
+| `Streamline / Empower / Supercharge / Unlock / Leverage / Seamless / Elevate` | 아무 제품에나 붙는 동사. 정보량 0 | 제품이 실제로 하는 동작 동사 (`정산한다`, `병합한다`, `4일을 6시간으로 줄인다`) |
+| `world-class / cutting-edge / enterprise-grade / best-in-class` | 자기 평가 형용사는 증거가 아니다 | 인증명, 벤치마크 수치, 고객사 실명 |
+| `Build the future of X` / `Your all-in-one platform` / `Scale without limits` | 경쟁사 이름으로 바꿔도 성립 | 치환 테스트를 통과하는 문장 (예: "Financial infrastructure for the internet") |
+| 헤지 표현 (`may help you`, `~할 수 있습니다`) | 확신 없음 = 신뢰 없음 | 단정하거나 조건을 명시 (`10명 이하 팀에서는`) |
+| CTA가 `Get Started` / `Learn More` / `시작하기` | 무엇이 시작되는지 알 수 없음 | 결과를 말하는 CTA (`무료로 30일 써보기`, `가격표 보기`) |
+| 모든 숫자가 어림수 (`10,000+`, `99.9%`, `50% faster`) | 검증 불가 | 정확한 수치와 측정 조건 (`p95 응답 240ms, 2026-07 기준`) |
+| 모든 헤딩이 명사구 (`Powerful Features`, `Simple Pricing`) | 헤딩이 정보를 전달하지 않음 | 헤딩에 주장을 담아라 (`엑셀 없이 정산이 끝난다`) |
+| 레이블·서브레이블·헬퍼가 같은 말 3번 (`이메일` / `이메일 주소` / `이메일 주소를 입력하세요`) | 화면 소음 | 하나만 남긴다 |
+| 이모지로 시작하는 불릿 (`✅ 빠른 속도`) | 정보 위계를 이모지로 대체 | 일반 불릿 또는 문장으로 |
+
+---
+
+## 7. 이미지
+
+| 지문 | 왜 문제 | 대신 |
+|---|---|---|
+| **랩탑 앞에서 웃는 다국적 팀 스톡 사진** | 방문자는 스톡을 알아보고 **신뢰도가 실제로 하락**한다 | 실제 팀 사진, 실제 작업 공간, 또는 사진 없이 타입으로 |
+| **떠 있는 3D 추상 블롭·기하 도형** | 콘텐츠 부재를 덮는 장식 | 제품 실제 화면, 데이터 시각화, 또는 여백 |
+| **AI 생성 일러스트** (지나치게 매끄럽고 대칭적) | 결함이 없어도 톤에서 티가 남 | 일러스트 시스템을 직접 정의하거나 아예 쓰지 않는다 |
+| **일반 SVG 도형을 조합한 히어로 그래픽** | 플레이스홀더 클립아트처럼 읽힘 | 제품 UI 조각을 실제로 렌더 |
+| **아이콘 세트가 섞임** (라인·필·이모지 혼재) | 시스템이 없다는 증거 | 세트 하나 고정. 굵기·크기·광학 정렬 통일 |
+| **`src`가 비었거나 깨진 이미지 태그** | 검증 없이 배포된 흔적 | 배포 전 이미지 로드 전수 확인 |
+| **모든 이미지가 같은 비율의 둥근 사각형** | 그리드를 이미지에 강제 | 콘텐츠에 맞는 비율. 풀블리드 1장을 섞으면 리듬이 생긴다 |
+
+---
+
+## 8. 한글 조판 (한국어 프로젝트 필수)
+
+서구 갤러리에는 없는 규칙이다. **영문 기준을 그대로 쓰면 전부 깨진다.**
+
+| 규칙 | 값 | 이유 |
+|---|---|---|
+| **한글 폰트 미지정 금지** | `Pretendard` 또는 `본고딕` 명시 | 지정하지 않으면 시스템 기본(맑은 고딕 / Apple SD 산돌고딕)으로 떨어지고, 그 자체가 완성도 미달 신호다 |
+| **line-height를 영문보다 높게** | 본문 **1.6–1.8** | 한글은 글자 밀도가 높아 1.5로는 답답하다 |
+| **음수 자간 금지** | 본문 0, 대형 헤드라인만 -0.01 ~ -0.02em | 한글은 고정폭에 가까워 음수 자간이 즉시 뭉개진다 |
+| **`word-break: keep-all`** | `overflow-wrap: break-word`와 함께 | 기본값은 단어 중간에서 줄바꿈되어 어색하다 |
+| **한 줄 25–40자** | 영문 45–75자 기준을 쓰면 너무 길다 | 컨테이너 폭을 좁혀라 |
+| **라틴 폰트를 폴백 앞에** | `font-family: 'Satoshi', 'Pretendard', sans-serif` | 한글 폰트를 앞에 두면 라틴 문자까지 그 폰트로 그려진다 |
+| **번역투 금지** | `~를 통해`, `~에 대한`, `~에 있어서` | 영문 AI 카피를 기계 번역한 티가 난다. `~로`, `~의`, `~에서`로 |
+
+**한글 폰트 선택**
+- 기본값: **Pretendard** (SIL OFL, Thin~Black 9단계, 가변). CDN: `https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.min.css`
+- 명조·에디토리얼: **마루 부리** (세리프 부활 트렌드의 한글 대응)
+- 수치 많은 UI: **Spoqa Han Sans Neo**
+- 다국어 안정성: **본고딕 / Noto Sans KR**
+- 캠페인 헤드라인: 배민 도현체·여기어때 잘난체 — **B2C 한정. B2B에 쓰면 즉시 아마추어**
+- 나눔고딕은 너무 흔하다. 폴백으로만.
+
+---
+
+## 9. grep 코드 지문 (프리플라이트 자동 검사)
+
+```
+# 색
+indigo-|violet-|purple-|fuchsia-
+#6366f1|#818cf8|#a855f7|#8b5cf6|#c4b5fd|#a78bfa|#22d3ee
+from-purple|to-blue-|from-violet|via-purple
+bg-slate-900|bg-gray-900|text-gray-400
+#ffffff|#000000
+
+# 컴포넌트 기본값
+rounded-2xl|rounded-3xl
+shadow-lg|shadow-xl|shadow-2xl
+border-l-4|border-t-4
+backdrop-blur
+
+# 타이포
+font-family:.*Inter
+(Space Grotesk.*Instrument Serif)|(Instrument Serif.*Geist)|(Space Grotesk.*Geist)
+uppercase tracking-wide
+
+# 카피
+Get Started|Learn More|Empower|Streamline|Supercharge|Seamless
+world-class|cutting-edge|enterprise-grade|best-in-class
+It's not .* it's
+
+# 이모지 아이콘 (텍스트 노드)
+🚀|⚡|✨|🎯|🔥|💡|✅
+```
+
+**한글 프로젝트 추가 검사**
+
+```
+# 있어야 하는 것 — 없으면 실패
+word-break:\s*keep-all
+Pretendard|Noto Sans KR|본고딕|마루부리
+
+# 없어야 하는 것
+letter-spacing:\s*-0\.0[3-9]   (한글 본문)
+~를 통해|~에 대한|에 있어서
+```
+
+---
+
+## 10. 자가 채점표
+
+| 카테고리 | 걸린 항목 | 조치 |
+|---|---|---|
+| 0 최우선 3종 | | |
+| 1 컬러 | | |
+| 2 타이포 | | |
+| 3 레이아웃 | | |
+| 4 컴포넌트 | | |
+| 5 모션 | | |
+| 6 카피 | | |
+| 7 이미지 | | |
+| 8 한글 조판 | | |
+
+**통과 조건 — 전부 예여야 한다**
+- [ ] 최우선 3종(보라 CTA / 전체 대문자 / 1·2·3 단계) 중 걸린 것이 없다
+- [ ] grep 검사에서 나온 항목을 전부 해소했다
+- [ ] 카피가 경쟁사 치환 테스트를 통과한다
+- [ ] 모션을 전부 끄고도 페이지가 작동한다
+- [ ] 강조색을 지워도 페이지가 읽힌다
+- [ ] 색을 회색조로 바꿔도 위계 순서가 비즈니스 우선순위와 일치한다
+- [ ] 키보드만으로 전 인터랙션이 가능하고 포커스 링이 보인다
+- [ ] (한국어) 한글 폰트가 명시되어 있고 `word-break: keep-all`이 있다
+
+**판정**
+
+| 걸린 개수 | 판정 |
+|---|---|
+| 0–1 | 통과 |
+| 2–3 | 해당 항목 수정 후 재검 |
+| **4 이상** | **폐기. reference-method.md §3부터 다시** |
+
+> 근거: research/references/04-ai-slop-signatures.md, 03-trends-2026.md (조사일 2026-08-20)
diff --git a/packages/skill/references/experimental-canvas.md b/packages/skill/references/experimental-canvas.md
new file mode 100644
index 0000000..399ee62
--- /dev/null
+++ b/packages/skill/references/experimental-canvas.md
@@ -0,0 +1,350 @@
+# experimental-canvas — HTML-in-Canvas 실전 지침
+
+Chrome의 HTML-in-Canvas API로 **실제 HTML 요소를 캔버스 픽셀/GPU 텍스처로 그린다.** 요소는 DOM에 남아 클릭·포커스·접근성이 유지된다. 구현 직전에 읽는 문서다.
+
+## 1. 발동 조건 게이트
+
+**기본값은 "쓰지 않는다".** 세 관문을 전부 통과할 때만 진행한다.
+
+### 관문 1 — 셰이더가 HTML의 렌더된 픽셀을 읽어야 하는가
+
+| 하려는 것 | 판정 |
+|---|---|
+| 글로우, 파티클, 커서 트레일, 배경 그라디언트 | **배경 캔버스 오버레이로 충분.** 쓰지 마라 |
+| 유리 굴절, 프로스티드 패널 | **SVG `feDisplacementMap` + `backdrop-filter`** |
+| 카드/패널을 3D로 기울이기 | **`CSS3DRenderer`.** DOM 그대로라 완벽하다 |
+| 상태 A → B 페이지 전환 | **View Transitions + `mask-image`** |
+| 텍스트를 픽셀 단위로 왜곡, 요소의 일부만 압축 | 후보 |
+| 라이트/다크 두 렌더를 노이즈로 픽셀 합성 | 후보 |
+| 렌더된 픽셀의 휘도·엣지에 반응하는 효과 | 후보 |
+| 3D 메시 위의 상호작용 UI (천, 책, 화면) | 후보 |
+
+배경 캔버스는 **그릴 수는 있어도 읽을 수는 없다.** 읽어야만 하는 경우가 아니면 탈락이다.
+
+### 관문 2 — 폴백이 이미 완성되어 있는가
+
+**폴백 없는 구현은 금지다.** 순서를 뒤집지 마라.
+
+1. HTML/CSS만으로 페이지를 **완성**한다. 레이아웃·포커스 순서·읽기 순서는 여기서 끝난다.
+2. 폴백 이펙트(SVG 필터 / CSS 트랜지션 / 배경 캔버스)를 붙여 **그 상태로 출시 가능하게** 만든다.
+3. 그 위에 HTML-in-Canvas를 **얹는다**.
+
+캔버스는 장식이다. 구조가 아니다.
+
+### 관문 3 — 맥락이 허용하는가
+
+사용자가 **명시적으로 실험을 원했거나**, **데모·포트폴리오·사내 도구**처럼 브라우저를 통제할 수 있을 때만. 일반 사용자 대상 프로덕션이면 여기서 멈춘다.
+
+## 2. 가용성 — 읽는 시점에 반드시 확인
+
+| 항목 | 값 |
+|---|---|
+| 플래그 | `chrome://flags/#canvas-draw-element` → Enabled |
+| 권장 브라우저 | Chrome Canary 149+ |
+| Origin Trial | Chrome 148 ~ **154**. **2026년 10월 초 만료 예정** |
+| Stable 기본 활성화 | **없음.** chromestatus 상태는 `In development` |
+| Firefox / Safari | 구현 없음, 입장 미표명 |
+
+**OT 만료 후에는 플래그 전용으로 되돌아간다.** 일반 사용자에게는 아무것도 보이지 않고 **폴백이 곧 실제 결과물이 된다.** 2026-10 이후에 읽고 있다면 `chromestatus.com/feature/5172548013916160`에서 연장/출시 여부를 먼저 확인하라.
+
+## 3. 권장 경로 — 폴리필 우선
+
+3D를 쓴다면 **`three-html-render` 폴리필로 시작한다.** three.js 공식 예제가 쓰는 방식이다. 네이티브가 있으면 `texElementImage2D` fast path, 없으면 `foreignObject` 래스터화 + `matrix3d` DOM 오버레이로 **자동 전환**된다. 같은 코드가 전 브라우저에서 돌고 상호작용도 유지된다.
+
+폴리필 한계: `textarea` 내부 스크롤 미반영, `contenteditable` 캐럿/선택 미렌더, 동적 스타일시트 수동 무효화 필요, `:visited` 불가. **매 프레임 재캡처는 비싸다 — 무효화 시점에만 갱신하도록 짜라.** 2D 전용 이펙트라면 폴리필 없이 능력 감지 분기(§7c)로 간다.
+
+## 4. 현재 API 표면
+
+`<canvas layoutsubtree>` 를 선언하고, 그릴 요소를 **직계 자식**으로 둔다. 손자는 그릴 수 없다.
+
+| 용도 | 호출 |
+|---|---|
+| 2D 그리기 | `ctx.drawElementImage(el, dx, dy[, dw, dh])` → `DOMMatrix` |
+| 2D 크롭 | `ctx.drawElementImage(el, sx, sy, sw, sh, dx, dy[, dw, dh])` |
+| WebGL 업로드 | `gl.texElementImage2D(gl.TEXTURE_2D, gl.RGBA8, el)` |
+| WebGPU 업로드 | `device.queue.copyElementImageToTexture({source: el}, {destination: {texture}, width, height})` |
+| 갱신 훅 | `canvas.onpaint = (e) => {}` — `e.changedElements`로 바뀐 요소만 온다 |
+| 킥스타트 / 프레임 루프 | `canvas.requestPaint()` |
+| 3D 위치 동기화 | `canvas.getElementTransform(el, screenSpaceMatrix)` → `DOMMatrix` |
+| 워커 전송 | `canvas.captureElementImage(el)` → `ElementImage` (Transferable) |
+| three.js | `material.map = new THREE.HTMLTexture(element)` (r184+) |
+
+### 이 이름을 본다면 낡은 자료다 — 따라 쓰지 마라
+
+| 낡은 이름 | 현재 |
+|---|---|
+| `canvas place element`, `placeElement()` | 제안명 `html-in-canvas` |
+| `drawElement()`, `drawHTMLElement()`, `drawHTML()` | `drawElementImage()` |
+| `texElement2D()` | `texElementImage2D()` |
+| `copyElementImage()` | `copyElementImageToTexture()` |
+| `setHitTestRegions()` | **폐기.** 반환 `DOMMatrix`를 `style.transform`에 반영 |
+
+## 5. 필수 계약 3가지
+
+### ① 반환 `DOMMatrix`를 매 프레임 `style.transform`에 반영한다
+
+```js
+const t = ctx.drawElementImage(el, x, y);
+el.style.transform = t.toString();   // 이 줄이 없으면 클릭이 전부 어긋난다
+```
+
+히트테스트·포커스·탭 이동·find-in-page는 전부 **DOM 위치**를 본다. 그린 위치와 DOM 위치를 맞추는 건 개발자 책임이다. 소스 요소의 CSS transform은 **그리기에서 무시**되므로 이 대입이 캔버스 그림을 바꾸지 않는다 — 무한 루프는 생기지 않는다. 3D에서는 `canvas.getElementTransform(el, screenSpaceMatrix)`가 같은 역할을 하고, three.js는 `InteractionManager.update()`가 대신 해준다.
+
+### ② WebGL/WebGPU는 try/catch로 신·구 시그니처를 모두 지원한다
+
+2026년 상반기에 두 시그니처가 모두 바뀌었다. **Chrome 공식 블로그 예제가 이미 구버전이다.** WICG 공식 데모조차 양쪽을 지원한다.
+
+```js
+try { gl.texElementImage2D(gl.TEXTURE_2D, gl.RGBA8, el); }                         // 현재
+catch (e) { gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,               // 구버전
+                                 gl.UNSIGNED_BYTE, el); }
+
+try { device.queue.copyElementImageToTexture(                                      // 현재
+        { source: el }, { destination: { texture }, width, height }); }
+catch (e) { device.queue.copyElementImageToTexture(el, width, height, { texture }); } // 구버전
+```
+
+### ③ 캔버스 안에 스크롤 영역을 넣지 마라
+
+캔버스 안 콘텐츠는 JS로 그려진다. **컴포지터 스레드 스크롤·애니메이션을 잃고** 스크롤이 메인 스레드에 묶여 끊긴다. 캔버스 안을 스크롤시키지 말고 **캔버스 전체를 페이지와 함께 스크롤**시켜라.
+
+## 6. 그리지 않는 것
+
+픽셀을 읽을 수 있으므로, 저자가 원래 못 보던 정보는 **아예 안 그려진다.** 검게 보인다고 버그가 아니다.
+
+| 안 그려짐 | 비고 |
+|---|---|
+| cross-origin `<iframe>`·`<img>`·`url()` 참조·SVG `<use>` | **same-origin iframe은 그려진다.** 그 안의 교차 출처만 빠진다 |
+| `:visited` 링크 스타일 | 히스토리 스니핑 차단 |
+| 시스템 색상 · OS 테마 · 사용자 환경설정 | — |
+| 맞춤법/문법 밑줄, 폼 자동완성 미리보기 | — |
+| 서브픽셀 텍스트 안티에일리어싱 | 텍스트가 미묘하게 다르게 보인다 |
+| **IME 팝업 · IME 고유 서식** | **한글 조합 중 상태가 캔버스에 안 나온다** |
+| 캡션/자막 사용자 설정 | — |
+| (그려짐) find-in-page 하이라이트, 스크롤바·폼 컨트롤 외형, 캐럿 | — |
+
+한국어 사이트에서는 IME 항목이 치명적이다. **캔버스 안 텍스트 입력을 주요 UX로 쓰지 마라.**
+
+## 7. 완성 코드
+
+### (a) 2D 반사 버튼 — 2D 이펙트의 기본형
+
+`save/restore`로 CTM을 바꿔 같은 요소를 두 번 그리는 패턴.
+
+```html
+<style>
+  canvas { width: 480px; height: 300px; }
+  /* background 는 불투명 색으로. 반투명이면 효과가 비쳐 나온다 */
+  #btn { font: 600 20px/1 system-ui, sans-serif; padding: 16px 32px; border: 0;
+         border-radius: 999px; color: #fff; cursor: pointer; background: #ff5fa2;
+         transition: background .2s, scale .12s; }
+  #btn:hover { background: #a05cff; scale: 1.05; }
+</style>
+
+<canvas id="canvas" layoutsubtree>
+  <button id="btn">Press me</button>
+</canvas>
+
+<script>
+  const canvas = document.getElementById('canvas');
+  const ctx    = canvas.getContext('2d');
+  const btn    = document.getElementById('btn');
+  const X_CSS = 100, Y_CSS = 90;
+
+  canvas.onpaint = () => {
+    const rect = canvas.getBoundingClientRect();
+    const s = canvas.width / rect.width;        // 실효 dpr. 좌표는 device pixel 단위다
+    const x = X_CSS * s, y = Y_CSS * s, h = btn.offsetHeight * s;
+
+    ctx.reset();
+    ctx.save();                                 // 반사본
+    ctx.translate(0, 2 * (y + h));
+    ctx.scale(1, -1);
+    ctx.globalAlpha = 0.3;
+    ctx.drawElementImage(btn, x, y);
+    ctx.restore();
+
+    const t = ctx.drawElementImage(btn, x, y);  // 본체 — 이 반환값만 동기화한다
+    btn.style.transform = t.toString();
+  };
+  canvas.requestPaint();   // 최초 스냅샷 확보. 없으면 아무것도 안 그려진다
+
+  new ResizeObserver(([e]) => {
+    const dpc = e.devicePixelContentBoxSize;
+    canvas.width  = dpc ? dpc[0].inlineSize : Math.round(e.contentRect.width  * devicePixelRatio);
+    canvas.height = dpc ? dpc[0].blockSize  : Math.round(e.contentRect.height * devicePixelRatio);
+    canvas.requestPaint();
+  }).observe(canvas, { box: 'device-pixel-content-box' });
+</script>
+```
+
+애니메이션이 필요하면 `onpaint` 끝에 `canvas.requestPaint()`를 한 줄 더 넣어 프레임 루프를 만든다. `requestAnimationFrame` 안에서 그리면 직전 프레임 스냅샷이 쓰여 1프레임 밀린다.
+
+### (b) three.js HTMLTexture + 폴리필 폴백 — 권장 기본 경로
+
+3D 씬 안에 상호작용 UI를 넣는 경우.
+
+```html
+<script type="importmap">
+{ "imports": {
+    "three": "https://unpkg.com/three@0.184.0/build/three.module.js",
+    "three/addons/": "https://unpkg.com/three@0.184.0/examples/jsm/",
+    "three-html-render/polyfill": "https://cdn.jsdelivr.net/npm/three-html-render/dist/polyfill.mjs"
+}}
+</script>
+
+<script type="module">
+import * as THREE from 'three';
+import { InteractionManager } from 'three/addons/interaction/InteractionManager.js';
+
+// 네이티브 없으면 foreignObject 폴리필로 자동 대체
+if (!('requestPaint' in HTMLCanvasElement.prototype)) {
+  const { installHtmlInCanvasPolyfill } = await import('three-html-render/polyfill');
+  installHtmlInCanvasPolyfill();
+}
+
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setPixelRatio(devicePixelRatio);
+renderer.setSize(innerWidth, innerHeight);
+document.body.appendChild(renderer.domElement);
+
+const camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 1, 2000);
+camera.position.z = 500;
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x0b0b10);
+
+// 텍스처가 될 HTML. document 에 직접 붙이지 않는다 — HTMLTexture 가 캔버스 자식으로 넣는다
+const element = document.createElement('div');
+element.style.cssText = 'width:600px;padding:30px;background:#12121b;color:#eaeaf2;'
+                      + 'font:28px/1.5 system-ui,sans-serif;text-align:center';
+element.innerHTML = '진짜 HTML 입니다. 선택·복사·검색이 됩니다.'
+                  + '<br><input type="text" placeholder="입력해 보세요"> <button>보내기</button>';
+
+const material = new THREE.MeshBasicMaterial();   // 조명 없이 텍스트 가독성 유지
+material.map = new THREE.HTMLTexture(element);    // ← 핵심 한 줄
+const mesh = new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200), material);
+scene.add(mesh);
+
+const interactions = new InteractionManager();   // 브라우저 히트테스트에 위임, raycast 불필요
+interactions.connect(renderer, camera);
+interactions.add(mesh);
+element.querySelector('button').onclick = (e) => { e.target.textContent = '보냈습니다'; };
+
+const spin = matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 1;
+renderer.setAnimationLoop((t) => {
+  mesh.rotation.x = Math.sin(t * 0.0005) * 0.5 * spin;
+  mesh.rotation.y = Math.cos(t * 0.0008) * 0.5 * spin;
+  interactions.update();          // 매 프레임 transform 동기화. 빼면 클릭이 어긋난다
+  renderer.render(scene, camera);
+});
+
+addEventListener('resize', () => {
+  camera.aspect = innerWidth / innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(innerWidth, innerHeight);
+});
+</script>
+```
+
+`HTMLTexture`는 내부에서 `parent.onpaint`를 구독해 `needsUpdate`를 세우고 `parent.requestPaint()`로 킥스타트한다. `layoutsubtree` 설정과 요소 부모 관리도 대신 해준다.
+
+### (c) 능력 감지 + 폴백 분기 유틸
+
+2D 경로에서 쓴다. 네이티브가 없으면 **캔버스를 걷어내고 자식 HTML을 문서로 승격**시킨다.
+
+```js
+// hic.js
+export const HIC = {
+  get native() {
+    return typeof HTMLCanvasElement !== 'undefined'
+        && 'requestPaint' in HTMLCanvasElement.prototype;
+  },
+  get native2D() {
+    return this.native && 'drawElementImage' in CanvasRenderingContext2D.prototype;
+  },
+  get nativeGL() {
+    return this.native && typeof WebGL2RenderingContext !== 'undefined'
+        && 'texElementImage2D' in WebGL2RenderingContext.prototype;
+  },
+  get nativeGPU() {
+    return typeof GPUQueue !== 'undefined' && 'copyElementImageToTexture' in GPUQueue.prototype;
+  },
+  /** 2D: 그리고 transform 을 동기화한다. */
+  draw(ctx, el, x, y, w, h) {
+    const t = (w === undefined) ? ctx.drawElementImage(el, x, y)
+                                : ctx.drawElementImage(el, x, y, w, h);
+    el.style.transform = t.toString();
+    return t;
+  },
+  // WebGL/WebGPU 업로드는 §5② 의 try/catch 스니펫을 그대로 쓴다.
+  /** 캔버스 그리드를 device pixel 에 맞춘다. 안 하면 텍스트가 흐리다. */
+  observeSize(canvas) {
+    const ro = new ResizeObserver(([e]) => {
+      const dpc = e.devicePixelContentBoxSize;
+      canvas.width  = dpc ? dpc[0].inlineSize : Math.round(e.contentRect.width  * devicePixelRatio);
+      canvas.height = dpc ? dpc[0].blockSize  : Math.round(e.contentRect.height * devicePixelRatio);
+      canvas.requestPaint?.();
+    });
+    const ok = typeof ResizeObserverEntry !== 'undefined'
+            && 'devicePixelContentBoxSize' in ResizeObserverEntry.prototype;
+    ro.observe(canvas, ok ? { box: 'device-pixel-content-box' } : {});
+    return ro;
+  },
+  /** 진입점. 어느 쪽으로 가든 HTML 콘텐츠는 화면에 남는다. */
+  mount(canvas, { enhance, fallback }) {
+    if (this.native2D) {
+      canvas.setAttribute('layoutsubtree', '');
+      this.observeSize(canvas);
+      enhance(canvas);
+      canvas.requestPaint();
+      return 'native';
+    }
+    const parent = canvas.parentNode;
+    canvas.replaceWith(...canvas.childNodes);   // 자식 HTML 을 문서로 승격
+    fallback?.(parent);
+    return 'fallback';
+  },
+};
+```
+
+```js
+import { HIC } from './hic.js';   // 사용부
+
+HIC.mount(document.getElementById('canvas'), {
+  enhance: (canvas) => {
+    const ctx = canvas.getContext('2d');
+    const ui = document.getElementById('ui');
+    canvas.onpaint = () => { ctx.reset(); HIC.draw(ctx, ui, 0, 0); };
+  },
+  fallback: (root) => root.classList.add('fx-css-only'),   // SVG 필터 / CSS 트랜지션 경로
+});
+```
+
+## 8. 접근성 체크리스트 — 캔버스를 얹은 뒤 매번 확인한다
+
+- [ ] **캔버스를 지워도 콘텐츠가 보이는가.** DevTools에서 `<canvas>`를 삭제해도 페이지가 읽히고 동작해야 한다.
+- [ ] **Tab 순서가 시각 순서와 일치하는가.** 캔버스 자식의 DOM 순서가 곧 탭 순서다.
+- [ ] **포커스 링이 보이고 위치가 맞는가.** 셰이더가 얇은 아웃라인을 뭉갠다. `:focus-visible`에 두꺼운 링을 주고, 키보드로 이동하며 링 위치가 그려진 픽셀과 맞는지 눈으로 확인한다.
+- [ ] **`prefers-reduced-motion: reduce`에서 모션을 끈다.** 왜곡·회전·진동은 정지 상태로 폴백한다.
+- [ ] **왜곡 중에는 클릭이 어긋난다.** 큰 전환 동안 `pointer-events: none`을 걸거나 왜곡량을 작게 유지한다.
+- [ ] **한글 입력을 캔버스 안에서 요구하지 않는다.** IME 조합 상태가 그려지지 않는다(§6).
+- [ ] **텍스트 대비를 셰이더 적용 후에 측정한다.** 블렌딩·색수차가 대비를 떨어뜨린다.
+- [ ] **히트테스트가 필요 없는 장식 요소는 `inert`.** WICG 공식 예제도 그렇게 한다.
+- [ ] **스크린리더로 한 번 통과시킨다.** 자식은 접근성 트리에 그대로 노출되므로, 이상하면 HTML 구조가 이상한 것이다.
+
+## 9. 흔한 실패와 원인
+
+| 증상 | 원인 |
+|---|---|
+| 아무것도 안 그려진다 | `canvas.requestPaint()` 최초 호출 누락 |
+| `InvalidStateError` | 첫 스냅샷 전에 그렸다. `onpaint` 밖에서 그리고 있다 |
+| 텍스트가 흐리다 | 캔버스 그리드를 device pixel로 안 맞췄다 |
+| Retina에서만 위치가 어긋난다 | 좌표에 `canvas.width / rect.width`를 안 곱했다 |
+| 클릭이 엉뚱한 데 떨어진다 | 반환 `DOMMatrix`를 `style.transform`에 안 넣었다 (§5①) |
+| 페이지 아래로 갈수록 오차가 커진다 | 캔버스 자식 크기가 캔버스 CSS 크기와 불일치 |
+| 텍스처가 뒤집혀 나온다 | WebGL UV에서 Y를 안 뒤집었다 |
+| 효과가 요소 배경을 뚫고 비친다 | 반투명 배경. 불투명 색으로 바꾼다 |
+| 3D 텍스트가 뭉개진다 | mipmap 대신 `gl.LINEAR` 필터를 쓴다 |
+| iframe/이미지가 검게 나온다, 캔버스가 콘텐츠 높이만큼 안 자란다 | 각각 cross-origin(§6), `<canvas>`는 div가 아니므로 크기 명시 |
+
+> 근거: research/canvas/01-api-spec.md, 02-availability.md (조사일 2026-08-20)
diff --git a/packages/skill/references/galleries.md b/packages/skill/references/galleries.md
new file mode 100644
index 0000000..831af26
--- /dev/null
+++ b/packages/skill/references/galleries.md
@@ -0,0 +1,173 @@
+# galleries.md — 어디를 볼 것인가
+
+레퍼런스 조사 단계에서 **갤러리를 고르는 표**다. 브리프를 표에 대입해 3곳을 정하고, 거기서 원본 사이트 URL을 확보한다.
+
+---
+
+## 1. 브리프 → 갤러리 라우팅
+
+`R1`은 구조, `R2`는 톤, `R3`는 디테일을 가져올 소스다. R2는 **반드시 R1과 다른 업종**에서 고른다.
+
+> **두 행에 동시에 걸리면 청중을 기준으로 고른다.** "개발자용 API 모니터링 SaaS"는
+> `SaaS · B2B` 와 `개발자 도구` 양쪽에 해당한다. 보는 사람이 엔지니어면 개발자 도구 행이다.
+>
+> **갤러리에서 원본 URL을 못 뽑으면 경쟁사·인접 제품을 직접 지목해도 된다.**
+> 갤러리는 발견 수단이지 목적이 아니다. 1단계 검증 조건은 "원본 사이트 URL을 확보했는가"이지
+> "갤러리를 경유했는가"가 아니다. **접근 실패로 왕복을 세 번 넘기지 마라** — §5를 먼저 확인하고,
+> 막히면 바로 우회해라.
+
+| 브리프 | R1 구조 | R2 톤 (다른 업종) | R3 디테일 |
+|---|---|---|---|
+| SaaS · B2B 랜딩 | Land-book | The Brand Identity | Codrops |
+| 개발자 도구 · API 문서 | Refero | Klim | Codrops |
+| 개인 · 스튜디오 포트폴리오 | Godly | Typographic Posters | Eyecandy |
+| 에이전시 · 브랜드 사이트 | SiteInspire | Mindsparkle Mag | Eyecandy |
+| 이커머스 · D2C | ecomm.design | Visuelle | Details Matter |
+| 모바일 앱 | Mobbin | Handheld.design | Spotted in Prod |
+| 대시보드 · 웹앱 내부 | Webframe | Data Viz Project | UI Sources |
+| 미니멀 · 정보량 적음 | Minimal Gallery | Httpster | Design Spells |
+| 개성 강한 · 실험적 | Hover States | Brutalist Websites | Codrops |
+| 이메일 · 뉴스레터 | Really Good Emails | Email Love | — |
+| 온보딩 · 결제 플로우 | Page Flows | UX Bites | Mobbin |
+| 타이포 주도 (텍스트가 주인공) | Awwwards Typography | Fonts In Use | Typewolf |
+| 리디자인 (개편) | Rebrand Gallery | (현행 사이트 자체) | Design Spells |
+| 한국어 사이트 | 노트폴리오 | 디비컷 | GDWeb |
+
+**국소 브리프** (한 섹션만 다시 짤 때)
+
+| 대상 | 소스 |
+|---|---|
+| 히어로 | Supahero |
+| 내비게이션 | Navbar Gallery |
+| 푸터 | Footer.design |
+| 요금제 | Pricing Pages |
+| 404 · 빈 상태 | 404s.design |
+| 후기 · 신뢰 요소 | Social Proof Examples |
+| OG · 공유 이미지 | OG Image Gallery |
+
+---
+
+## 2. 경고 — 갤러리마다 편향이 있다
+
+**Awwwards 구조를 SaaS에 이식하지 마라.**
+2026 Q1 SOTD 47건의 업종 분포는 럭셔리 패션 28% · 자동차 22% · 건축 18% · 문화기관 14%, **테크/SaaS는 5% 미만**이다.
+수상작의 전면 3D·풀스크린 인트로·스크롤 서사는 "제품을 팔지 않는 사이트"의 문법이다.
+Awwwards는 **타이포 완성도와 야심의 상한선**으로만 쓰고, 섹션 구조는 Land-book·Refero에서 가져온다.
+
+그 밖의 편향:
+
+| 갤러리 | 편향 | 대응 |
+|---|---|---|
+| Dribbble | 구현 불가능한 "샷"이 다수 | 색·타이포 발상만. **구조 참고 금지** |
+| Collect UI | Daily UI 과제 기반이라 비현실적 | 컴포넌트 아이디어만 |
+| Pinterest | 출처 추적 불가 + AI 이미지 오염 | 최후순위. 가급적 쓰지 마라 |
+| Lapa Ninja | 실무 평균값 → 슬롭 패턴이 섞여 있음 | 볼 때 antipatterns.md를 옆에 둬라 |
+| Dark Mode Design / dark.design | 다크가 전제 | 브리프가 다크를 요구할 때만 |
+
+---
+
+## 3. 텍스트로 읽히는 소스 (기본 경로)
+
+에이전트는 **이미지를 못 보는 것이 기본값**이다. 갤러리 카드는 이미지라 정보가 없다.
+아래는 **말로 설명해주는** 소스다. 폰트·색·모션은 여기서 확보한다.
+
+| 소스 | URL | 얻는 것 |
+|---|---|---|
+| Typewolf | https://www.typewolf.com | 특정 사이트가 실제로 쓴 **폰트 이름** + 무료 대체 폰트 |
+| Typewolf Google Fonts | https://www.typewolf.com/google-fonts | 구글폰트 베스트 40, 본문용/디스플레이용 구분 |
+| Fonts In Use | https://fontsinuse.com | 폰트의 산업·시대별 톤 |
+| Eyecandy | https://eyecannndy.com | 모션 **기법에 붙은 이름** (displacement, kinetic type 등) |
+| Codrops | https://tympanus.net/codrops/ | 효과의 **소스 코드** 그 자체 |
+| UI Sources | https://www.uisources.com | 인터랙션을 문장으로 분해한 해설 |
+| UX Bites | https://builtformars.com/ux-bites | 특정 앱 UX가 왜 좋은지 서술 |
+| DesignSystems.one | https://www.designsystems.one/design-systems | 실사용 디자인 시스템 88개 + **토큰 원문(design.md) 다운로드** |
+| DESIGN.md | https://designmd.app | 에이전트용으로 정제된 디자인 시스템 정의 561개 |
+| Happy Hues | https://www.happyhues.co | 색을 **역할**(배경/텍스트/강조)로 서술한 팔레트 |
+| Branding Style Guides | https://brandingstyleguides.com | 실제 브랜드 가이드 문서 |
+| Rebrand Gallery | https://rebrand.gallery | 리브랜딩 before/after — "왜 바꿨나"를 학습 가능 |
+
+**브라우저 도구(Chrome DevTools MCP / Playwright)를 쓸 수 있으면** 원본 사이트의 computed style을 직접 읽어라.
+뽑을 값: `font-family` `font-size` `line-height` `letter-spacing` `color` `background-color` `border-radius` `box-shadow` `padding` `gap` `max-width` `transition`.
+
+---
+
+## 4. 카테고리별 대표
+
+라우팅 표에서 못 찾았을 때만 본다.
+
+**종합 어워드**
+- Awwwards https://www.awwwards.com — SOTD 아카이브. 상한선용
+- The FWA https://thefwa.com — 인터랙티브·기술 실험
+- Godly https://godly.website — 주당 3~5개만 등록. 신호 대 잡음비 최고
+
+**미니멀 · 에디토리얼**
+- SiteInspire https://www.siteinspire.com — style/type/subject 3축 태깅
+- Minimal Gallery https://minimal.gallery — 여백 상한 기준선
+- Httpster https://httpster.net — 독립 스튜디오·타입 파운드리
+- Dead Simple Sites https://deadsimplesites.com — 덜어내기 하한선
+
+**브루탈 · 실험**
+- Brutalist Websites https://brutalistwebsites.com — 원본 아카이브
+- Hover States https://hoverstat.es — 아트·문화기관 웹
+- Neubrutalism https://neubrutalism.com — 스타일 정의 + 사례
+
+**SaaS · 랜딩 · 웹앱**
+- Land-book https://land-book.com — 전수 심사. 랜딩 1순위
+- Refero https://refero.design — 실제 화면 30K+, UX 패턴·요소 단위 검색
+- Webframe https://webframe.xyz — "로그인 후" 화면
+- Landingfolio https://www.landingfolio.com — 섹션 컴포넌트 동봉
+- SaaSFrame https://www.saasframe.io — 랜딩 + 앱 + 온보딩 이메일
+
+**모바일 · 플로우**
+- Mobbin https://mobbin.com — 실제 앱 전체 화면·플로우
+- Page Flows https://pageflows.com — 사용자 여정 영상
+- Handheld.design https://handheld.design — 개성 있는 모바일 UI
+
+**타이포 · 폰트**
+- Typewolf https://www.typewolf.com — **폰트 결정은 무조건 여기 먼저**
+- Fontshare https://www.fontshare.com — Satoshi, Switzer, Clash Display (무료 상업)
+- Velvetyne https://velvetyne.fr — 오픈소스 실험 파운드리
+- Klim https://klim.co.nz · Pangram Pangram https://pangrampangram.com — 유료
+- 눈누 https://noonnu.cc — **한글 무료 폰트. 라이선스 표기 명확**
+
+**컬러**
+- Happy Hues https://www.happyhues.co — 역할별 팔레트
+- Realtime Colors https://www.realtimecolors.com — 실제 레이아웃에 실시간 적용
+- Coolors https://coolors.co — 빠른 후보 생성
+
+**모션 · 코드**
+- Codrops https://tympanus.net/codrops/ — 튜토리얼 + 소스
+- Eyecandy https://eyecannndy.com — 기법 이름
+- GSAP https://gsap.com — 2026년 전 플러그인 무료
+- Motion https://motion.dev — React 모션
+
+**브랜딩 (웹 밖에서 톤 가져오기)**
+- The Brand Identity https://the-brandidentity.com
+- Mindsparkle Mag https://mindsparklemag.com
+- Typographic Posters https://typographicposters.com
+- Visuelle https://visuelle.co.uk
+
+**국내**
+- 노트폴리오 https://notefolio.net — 한국어 타이포·레이아웃 감각
+- 디비컷 https://www.dbcut.com — 국내 기업·기관 사이트 관행
+- GDWeb https://gdweb.co.kr — 국내 에이전시 수준선
+
+---
+
+## 5. 자동 접근 불가 목록
+
+아래는 `WebFetch`로 못 읽는다. 조사 계획에서 제외하거나 대체 소스를 잡아라.
+
+| 사이트 | 상태 | 대체 |
+|---|---|---|
+| **land-book.com** | **403 봇 차단.** 브라우저로 열어도 카드에 외부 URL 이 없다 | Httpster, Lapa Ninja |
+| **refero.design** | **SPA — WebFetch 가 제목만 반환** | Mobbin, Screenlane |
+| siteinspire.com | 429 간헐 차단 | Httpster, Minimal Gallery |
+| cssdesignawards.com | 403 봇 차단 | Awwwards |
+| uncut.wtf | Cloudflare 차단 | Fontshare, Fontesk |
+| refs.gallery | 429 | Godly |
+| unsplash.com | 401 | Pexels |
+| adfolio.design | 429 | Love The Work More |
+| **commercecream.com** | **HTTPS 연결 거부 (방치 상태)** | **ecomm.design로 대체. 쓰지 마라** |
+
+> 근거: research/references/01-gallery-catalog.md, 03-trends-2026.md (조사일 2026-08-20)
diff --git a/packages/skill/references/layout.md b/packages/skill/references/layout.md
new file mode 100644
index 0000000..87d59ed
--- /dev/null
+++ b/packages/skill/references/layout.md
@@ -0,0 +1,113 @@
+# layout — 레이아웃과 타이포그래피
+
+4-1 단계에서 읽는다. **이 단계가 끝나면 아무 이펙트 없이도 완성된 페이지**여야 한다. 그것이 이후 모든 폴백의 기반이다.
+
+---
+
+## 1. 그리드를 먼저 정한다
+
+### 하나의 그리드에서 모든 것이 나온다
+
+```css
+.page {
+  display: grid;
+  grid-template-columns:
+    [full-start] minmax(var(--space-4), 1fr)
+    [wide-start] minmax(0, 12rem)
+    [main-start] minmax(0, 60rem) [main-end]
+    minmax(0, 12rem) [wide-end]
+    minmax(var(--space-4), 1fr) [full-end];
+}
+.page > * { grid-column: main; }
+.page > .wide { grid-column: wide; }
+.page > .full { grid-column: full; }
+```
+
+이 한 번의 정의로 **본문 폭 · 넓은 블록 · 전체 폭**이 전부 정렬된다. 섹션마다 `max-width` 와 `padding` 을 다시 쓰면 반드시 어긋난다.
+
+### 비대칭을 두려워하지 마라
+
+12열 중앙 정렬은 안전하고 잊힌다. 실제로 기억되는 레이아웃은 **의도적으로 한쪽으로 몰려 있다**. 다만 비대칭에도 규칙이 있어야 한다 — 아무 데나 놓는 것은 비대칭이 아니라 사고다.
+
+- 텍스트 블록을 그리드의 2/3 지점에서 끊고 나머지를 비워두기
+- 이미지를 화면 밖으로 흘려보내기(`full` 을 넘어 `margin-inline: calc(var(--space-4) * -1)`)
+- 제목과 본문의 시작선을 일부러 어긋내기 — 단, **같은 어긋남을 페이지 전체에서 반복**할 때만
+
+### 벤토 그리드 주의
+
+벤토(크기가 다른 카드들의 격자)는 **더 이상 차별화가 아니라 새 기본값**이다. 효과는 있지만(스크롤 깊이 증가) 표준화가 끝나서 "고민 안 했음"의 신호로 읽힌다. 쓰려면 최소한 다음 중 하나는 해라:
+- 카드 경계를 없애고 여백만으로 구획
+- 그리드에서 한 칸을 의도적으로 비우기
+- 카드 하나만 규칙을 깨고 밖으로 나가기
+
+---
+
+## 2. 시선 흐름
+
+사람은 페이지를 읽지 않고 **훑는다.** 훑는 경로를 설계하는 것이 레이아웃의 본체다.
+
+1. **첫 화면에서 세 가지만** — 무엇인지 / 왜 좋은지 / 다음 행동. 넷 이상이면 아무것도 안 읽힌다
+2. **위계는 크기가 아니라 대비로 만든다** — 크기·굵기·색·여백 중 **둘 이상을 동시에** 바꿔야 위계가 보인다. 크기만 조금 키우는 것은 위계가 아니다
+3. **시선을 한 번은 멈춰라** — 전부 같은 리듬으로 흐르면 아무것도 강조되지 않는다. 섹션 하나는 리듬을 깨야 한다
+4. **스크롤은 보상이어야 한다** — 다음 화면에 무언가 새로운 것이 있어야 한다. 같은 카드 그리드가 세 번 반복되면 거기서 이탈한다
+
+---
+
+## 3. 타이포그래피
+
+토큰은 3단계에서 정했다. 여기서는 **적용**이다.
+
+### 위계는 3단계면 충분하다
+디스플레이 / 섹션 제목 / 본문. h4, h5, h6 까지 시각적으로 구분하려 들면 위계가 무너진다. 필요하면 **웨이트나 색**으로 구분해라, 새 크기를 만들지 말고.
+
+### 본문이 주인공이다
+헤드라인은 눈에 띄기 쉽다. **본문이 읽히는지**가 실력이다.
+- 한 줄 길이(`--measure`)를 반드시 적용해라. 전체 폭 본문은 읽을 수 없다
+- 문단 간격은 줄간격의 1.5배 이상. 들여쓰기와 문단 간격을 동시에 쓰지 마라
+- 링크는 색만으로 구분하지 마라(밑줄 또는 다른 신호 병행)
+
+### 한글이 들어가면
+`references/antipatterns.md` 의 한글 조판 섹션을 읽어라. 요약:
+- `word-break: keep-all` — 없으면 단어가 아무 데서나 잘린다
+- line-height 1.6~1.8 (라틴보다 넉넉하게)
+- 음수 자간 금지
+- 한 줄 25~40자
+- 라틴 폰트를 폴백 스택 **앞**에 둔다 (숫자·영문이 한글 폰트로 렌더되면 조악해진다)
+- **한글 폰트를 지정하지 않는 것 자체가 완성도 미달 신호다**
+
+---
+
+## 4. 반응형
+
+### 브레이크포인트가 아니라 콘텐츠에서 시작한다
+
+```css
+/* 나쁨: 기기 크기를 가정 */
+@media (min-width: 768px) { }
+
+/* 좋음: 콘텐츠가 깨지는 지점 */
+.cards { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
+```
+
+`auto-fit` + `minmax` 로 해결되는 것을 미디어쿼리로 만들지 마라. 미디어쿼리는 **레이아웃 구조 자체가 바뀔 때만** 쓴다.
+
+### 모바일에서 먼저 확인해라
+데스크톱에서 아름다운 것이 모바일에서 무너지는 것이 기본이고, 그 반대는 드물다. 특히:
+- 큰 타이포는 모바일에서 반드시 줄여라 (`clamp` 의 최소값)
+- 가로 스크롤이 생기는 요소를 찾아라 (`overflow-x: hidden` 으로 덮지 말고 원인을 고쳐라)
+- 터치 타깃 44×44px 이상
+- 호버로만 접근되는 기능을 만들지 마라
+
+---
+
+## 5. 이 단계의 통과 조건
+
+- [ ] CSS/HTML만으로 페이지가 완성됐다. JS를 꺼도 읽힌다
+- [ ] 모든 값이 3단계 토큰에서 나온다. 하드코딩된 px/색이 없다
+- [ ] 첫 화면에 메시지가 셋 이하다
+- [ ] 본문에 `--measure` 가 적용됐다
+- [ ] 모바일 폭 **320px**(iPhone SE 세로)에서 가로 스크롤이 없다
+- [ ] 키보드 Tab 만으로 모든 인터랙티브 요소에 도달한다. 포커스 링이 보인다
+- [ ] 한글이 있다면 조판 규칙이 적용됐다
+
+> 근거: research/references/02-methodology.md, 03-trends-2026.md, 04-ai-slop-signatures.md (조사일 2026-08-20)
diff --git a/packages/skill/references/motion.md b/packages/skill/references/motion.md
new file mode 100644
index 0000000..60c3aca
--- /dev/null
+++ b/packages/skill/references/motion.md
@@ -0,0 +1,504 @@
+# motion — 움직임과 인터랙션
+
+4-4에서 읽는다. **레이아웃·재질·입체가 끝난 뒤에 온다.** 마지막인 이유는 앞의 셋이 완성돼야 무엇이 움직여야 하는지 알 수 있기 때문이다.
+
+## 이 문서를 읽는 법
+
+| 상황 | 읽을 곳 |
+|---|---|
+| **모션을 넣을지 아직 안 정했다** | **§0만.** 절반은 여기서 "안 넣는다"로 끝나고 그게 정답이다 |
+| duration·이징만 고르면 된다 | §1 결정 표. 여기서 끝내라 |
+| 하고 싶은 게 게이트 #8에 걸린다 | §2 우회표 |
+| 스크롤에 뭔가 물려야 한다 | §3 코드 B·C — 게이트 #10의 정답이 여기 있다 |
+| 모달·페이지 전환 / 텍스트·숫자 연출 | §3 코드 D·E / F·G |
+| 라이브러리를 깔지 말지 | §4 |
+| 감사 직전 | §5 체크리스트 |
+
+---
+
+## 0. "넣지 않는다"를 먼저 통과시켜라
+
+애니메이션을 쓰기 전에 **아래 넷 중 어디에 해당하는지 한 문장으로** 답해라. 못 답하면 넣지 않는다.
+
+| 역할 | 답해야 할 질문 | 예 |
+|---|---|---|
+| **인과** | "이게 왜 여기 나타났나?" | 누른 버튼 자리에서 시트가 자라남 |
+| **연속성** | "이게 어디서 와서 어디로 갔나?" | 썸네일 → 상세 이미지 |
+| **피드백** | "내 입력이 접수됐나?" | 프레스, 토글, 검증 실패 |
+| **주의** | "지금 어디를 봐야 하나?" | 오류 필드로의 이동 |
+
+다섯 번째 **"멋있어서"는 이유가 아니다.** 예외는 브랜드 표현이 브리프의 명시적 요구일 때뿐이고, 그때도 (a) 사용자가 스크롤·호버로 통제하거나 (b) 1회성이며 (c) `prefers-reduced-motion`에서 완전히 사라져야 한다.
+
+**넣지 말아야 할 곳**: 고빈도 반복 작업(폼·표·필터) · 오류 복구 경로 · 결과가 이미 예측되는 전환(탭) · **첫 화면**(콘텐츠는 즉시 읽혀야 한다) · 숫자가 계속 바뀌는 곳.
+
+### 즉시 실격 — 하나라도 있으면 고친다
+
+| 징후 | 처방 |
+|---|---|
+| 애니메이션 때문에 콘텐츠가 **읽히기까지 지연**됨 | 첫 화면은 모션 없이 즉시 표시. 리빌은 스크롤 이후 |
+| 스크롤 리빌이 위아래로 오갈 때 **매번 재생** | `both` / `once` / `unobserve()` |
+| 애니메이션 중 **레이아웃 시프트** | 게이트 #8. `transform`/`opacity`만 |
+| **동시에 3개 이상** 독립 애니메이션 | 시선이 분산된다. 순차화하거나 통합 |
+| 400ms 넘게 **사용자를 막는** 전환, 인터럽트 불가 | 줄이고, 애니메이션 중에도 입력을 받아라 |
+| 무한 반복되는 **큰 면적** 움직임 | 전정기관 자극. 정지 수단을 주거나 제거 |
+| 이징이 전부 `ease`·`linear`거나, 진입과 퇴장 duration이 같음 | 방향을 구분하지 않았다. §1로 |
+
+---
+
+## 1. 결정 표 — 이 상황에는 이 duration·이징
+
+**토큰은 3단계 `tokens.md` §4에서 이미 정해졌다. 새 duration을 만들지 마라.** 표에 없으면 가장 가까운 행을 쓴다.
+
+| 상황 | duration | 이징 | 거리 |
+|---|---|---|---|
+| **마이크로 인터랙션** — 호버·포커스·프레스·토글·체크 | `--dur-instant` (100ms) | `--ease-out` | `--shift-sm` 이하 |
+| **작은 요소 등장** — 툴팁·드롭다운·토스트·칩 | `--dur-quick` (200ms) | `--ease-out` | `--shift-sm` |
+| **작은 요소 퇴장** | `calc(var(--dur-quick) * 0.65)` | `--ease-in` | 동일 |
+| **표면 등장** — 모달·시트·패널·아코디언 | `--dur-normal` (350ms) | `--ease-out` | `--shift-lg` |
+| **표면 퇴장** | `calc(var(--dur-normal) * 0.65)` | `--ease-in` | 동일 |
+| **위치 이동** — 화면 안 A→B, 탭 슬라이드, 캐러셀 | `--dur-normal` | `--ease-soft` | — |
+| **페이지·뷰 전환** — 라우트 이동, shared element | `--dur-slow` (600ms) | `--ease-soft` | — |
+| **스크롤 리빌** — 섹션 등장, 1회성 | `--dur-slow` | `--ease-out` | `--shift-lg` |
+| **스크롤에 직접 물린 것** — 진행 바·시차·스크럽 | (없음) | `linear` | — |
+| **앰비언트 루프** — 배경 드리프트, 마퀴 | 8~20s | `linear` | — |
+
+**네 줄 규칙.** 이것만 지켜도 대부분 맞는다.
+
+- 화면 **안으로 들어오는** 것 → `--ease-out`. 도착감. 급정거하면 충돌처럼 보인다
+- 화면 **밖으로 나가는** 것 → `--ease-in`, duration은 진입의 0.65배. 나가는 건 볼 이유가 없다
+- 화면 **안에서 이동하는** 것 → `--ease-soft`
+- **스크롤에 물린** 것 → `linear`. 스크롤 자체가 이미 이징이다. 곡선을 덧씌우면 이중 이징이 된다
+
+**모션에만 필요한 토큰 세 줄.** 3단계 토큰 블록에 이것만 더한다. **duration은 더하지 마라 — `tokens.md` §4의 넷이 전부다.**
+
+```css
+:root { --stagger: 60ms; --shift-sm: 8px; --shift-lg: 24px; }
+```
+
+**stagger 상한**: `(항목수 − 1) × --stagger + duration ≤ 800ms`. 넘으면 `--stagger`를 줄이거나 첫 화면 항목에만 건다. 12개를 넘으면 stagger를 쓰지 않는다. 방향은 읽기 방향(좌→우, 상→하)과 일치시킨다.
+
+---
+
+## 2. 하드 게이트 #8을 지키면서 하고 싶은 걸 다 하는 법
+
+**`transform`/`opacity` 외의 속성을 애니메이션하면 실패다. 오버라이드 없다.** 그런데 거의 모든 요구는 우회할 수 있다.
+
+| 하고 싶은 것 | 하지 마라 | 대신 |
+|---|---|---|
+| 배경색이 바뀐다 | `transition: background-color` | 목표 색을 칠한 `::before`를 깔고 그 **`opacity`** 전환 |
+| 그림자가 짙어진다 | `transition: box-shadow` | 짙은 그림자를 가진 `::after`를 미리 만들고 **`opacity`** 전환. 그림자 재계산이 사라져 더 빠르다 |
+| 테두리가 나타난다 | `transition: border-color` | `::after`에 `border`를 두고 **`opacity`** 전환. 레이아웃도 안 흔들린다 |
+| 글자색이 바뀐다 | `transition: color` | 전환하지 말고 즉시 바꿔라. 100ms짜리 색 변화는 아무도 못 본다 |
+| 진행 바가 찬다 | `transition: width` | `transform-origin: left` + **`scaleX()`** |
+| 이미지가 흐려진다 | `transition: filter` | 선명본과 미리 블러된 사본을 겹치고 **`opacity`** 크로스페이드 |
+| 그라디언트가 회전한다 | `@property`로 각도 애니메이션 | 원뿔 그라디언트 레이어를 **`rotate`** |
+| 마스크가 열린다 | `transition: clip-path` | `overflow: hidden` 래퍼 안에서 자식을 **`translate`** |
+| 숫자가 올라간다 | `@property --count` | 자릿수 스트립을 **`translate`** (§3 코드 G) |
+| 패널 높이가 자란다 | `transition: height`·`max-height` | 아래 |
+
+**높이.** `transition: height`는 매 프레임 레이아웃을 돌리고 형제를 밀어 CLS를 만든다. 순서대로 시도해라.
+
+1. **구조를 바꾼다.** 정말 인라인으로 자라야 하는가? 모달·팝오버로 만들면 높이 문제가 사라지고 스케일+페이드로 끝난다
+2. **높이는 즉시 확정하고 내용만 전환한다.** 래퍼를 `display: grid; grid-template-rows: 0fr` ↔ `1fr`로 만들되 **`grid-template-rows`에 transition을 걸지 않는다.** 자식의 `opacity`·`translate`만 전환하면 게이트를 완전히 통과한다
+3. `grid-template-rows`에 transition을 거는 관용구가 널리 쓰이지만 **그건 여전히 레이아웃 애니메이션이고 게이트 #8 grep에 걸린다.** `max-height`보다 정확할 뿐 합성 가능하지는 않다. 굳이 쓰겠다면 `design.md`에 예외로 적어라
+
+**오해 방지 — 게이트 #8이 허용하는 것**
+
+- `translate` / `rotate` / `scale` **개별 속성은 transform 계열이다. 통과다.** 축약형보다 낫다(속성끼리 안 덮어쓴다)
+- `display`·`overlay`를 `transition-behavior: allow-discrete`로 거는 것은 **통과다.** 보간되지 않고 전환 종료까지 값을 유지시킬 뿐이라 프레임당 계산이 없다. 예외는 이 둘뿐이다
+- View Transitions의 기본 애니메이션은 브라우저가 만든다. **저자 키프레임은 `opacity`와 transform 계열만** 쓴다
+
+---
+
+## 3. CSS 네이티브 우선 — 라이브러리를 끌어오기 전에
+
+| CSS로 충분한 것 (라이브러리 금지) | CSS로 안 되는 것 (§4로) |
+|---|---|
+| 호버·포커스·프레스 상태 전환 | 속도를 이어받는 인터럽트(드래그 던지기) |
+| 모달·팝오버·툴팁 진입/퇴장 (`@starting-style`) | 복잡한 타임라인 시퀀싱 (A 끝나고 B, B 중간에 C) |
+| 스크롤 리빌·진행 바·시차·스티키 헤더 | 스크롤 **핀 고정 + 다단계 시퀀스** |
+| 페이지 전환 (View Transitions) | 레이아웃 변화 FLIP (그리드 → 리스트) |
+| 무한 루프, `linear()` 스프링 근사 | 텍스트 자동 분해, SVG 패스 모핑, 포인터 추종 |
+
+**지원 현황(2026-08).** `prefers-reduced-motion`·`linear()`는 Baseline widely — 무조건 쓴다. `@starting-style`·`transition-behavior`(2024-08), same-document View Transitions(2025-10)는 Baseline newly — 폴백 두고 쓴다. **scroll-driven animations와 cross-document View Transitions는 Firefox 미지원이라 `@supports` 가드가 필수다.**
+
+> **가장 흔한 사고**: 미지원 브라우저에서 `opacity: 0`이 남아 콘텐츠가 영영 안 보이는 것. **초기 상태를 `@supports` 블록 *안에* 넣어라.** 밖에 두면 Firefox에서 백지가 된다.
+
+### 코드 A — 버튼·링크 마이크로 인터랙션
+
+> 언제: 모든 인터랙티브 요소. 선택이 아니라 기본이다. 색과 그림자를 전부 `opacity`로 바꾼 것이 요점이다.
+
+```css
+.btn {
+  position: relative; isolation: isolate;
+  background: var(--accent); color: var(--accent-ink);
+  border: 0; padding: 0.75rem 1.5rem; border-radius: var(--radius);
+  transition: translate var(--dur-instant) var(--ease-out),
+              scale     var(--dur-instant) var(--ease-out);
+}
+/* 밝기도 그림자도 색이 아니라 레이어의 opacity로 바꾼다 */
+.btn::before, .btn::after {
+  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
+  transition: opacity var(--dur-instant) var(--ease-out);
+}
+.btn::before { z-index: -1; background: var(--ink); }                    /* 밝기 */
+.btn::after  { z-index: -2; box-shadow: 0 8px 24px rgb(0 0 0 / 0.18); }  /* 그림자 */
+
+.btn:hover, .btn:focus-visible { translate: 0 -2px; }
+.btn:hover::before, .btn:focus-visible::before { opacity: 0.12; }
+.btn:hover::after,  .btn:focus-visible::after  { opacity: 1; }
+.btn:active { translate: 0 0; scale: 0.98; }   /* squash는 2~4%까지만 */
+
+/* 포커스 링은 절대 애니메이션하지 않는다. 즉시 보여야 한다 */
+.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
+
+/* 링크 밑줄: width가 아니라 scaleX */
+.link { position: relative; text-decoration: none; color: inherit; }
+.link::after {
+  content: ''; position: absolute; inset-inline: 0; bottom: -2px;
+  height: 1px; background: currentColor;
+  scale: 0 1; transform-origin: left;
+  transition: scale var(--dur-quick) var(--ease-out);
+}
+.link:hover::after, .link:focus-visible::after { scale: 1 1; }
+```
+
+### 코드 B — 스크롤 진입 리빌 (scroll-driven animation)
+
+> 언제: **기본값.** 리빌·진행 바·시차·헤더 축소. 컴포지터 스레드에서 돌아 메인 스레드가 막혀도 끊기지 않는다. 게이트 #10의 정답이 이것이다.
+
+```css
+/* 초기 상태를 @supports 안에 둔다 — 미지원 브라우저에서는 그냥 보인다 */
+@supports (animation-timeline: view()) {
+  .reveal {
+    animation: reveal-in linear both;        /* both 필수. 없으면 범위 밖에서 깜빡인다 */
+    animation-timeline: view();
+    animation-range: entry 15% cover 35%;
+    animation-delay: calc(var(--i, 0) * var(--stagger));
+    /* animation-duration은 auto가 기본. 초를 넣으면 무시되거나 오작동한다 */
+  }
+  @keyframes reveal-in {
+    from { opacity: 0; translate: 0 var(--shift-lg); }
+    to   { opacity: 1; translate: 0 0; }
+  }
+}
+/* 읽기 진행 바 — width가 아니라 scaleX (게이트 #8) */
+@supports (animation-timeline: scroll()) {
+  .progress {
+    position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px;
+    background: var(--accent); transform-origin: left; scale: 0 1;
+    animation: progress-fill linear both;
+    animation-timeline: scroll(root block);
+  }
+  @keyframes progress-fill { to { scale: 1 1; } }
+}
+@media (prefers-reduced-motion: reduce) {
+  .reveal   { animation: none; opacity: 1; translate: 0 0; }
+  .progress { animation: none; scale: 1 1; }   /* 진행 표시는 정보다. 죽이지 않는다 */
+}
+```
+
+**`animation-range` 이름**: `entry`(닿기 시작 → 완전히 들어옴) · `cover`(닿기 시작 → 완전히 벗어남) · `exit`(나가기 시작 → 벗어남) · `contain`(요소가 뷰포트보다 작을 때 완전히 담긴 구간).
+
+### 코드 C — 스크롤 진입 리빌 (IntersectionObserver)
+
+> 언제: Firefox 지원이 **요구사항**일 때, 또는 진입 시점에 **DOM을 바꿔야** 할 때(카운트업 시작, 지연 로드, 3D 씬 기동). CSS는 스타일만 바꾼다.
+> `window.addEventListener('scroll')`은 **게이트 #10**이다. 절대 쓰지 마라.
+
+```css
+/* .js가 붙기 전에는 그냥 보인다 — JS가 실패해도 콘텐츠가 사라지지 않는다 */
+.js .reveal-js {
+  opacity: 0; translate: 0 var(--shift-lg);
+  transition: opacity   var(--dur-slow) var(--ease-out),
+              translate var(--dur-slow) var(--ease-out);
+  transition-delay: calc(var(--i, 0) * var(--stagger));
+}
+.js .reveal-js[data-shown] { opacity: 1; translate: 0 0; }
+/* reduced-motion 대응은 코드 H가 --shift-lg·--stagger를 0으로 만들어 전역 처리한다 */
+```
+
+```js
+document.documentElement.classList.add('js');
+const targets = document.querySelectorAll('.reveal-js');
+
+if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+  targets.forEach((el) => { el.dataset.shown = ''; });
+} else {
+  const io = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (!entry.isIntersecting) continue;
+      entry.target.dataset.shown = '';
+      io.unobserve(entry.target);          // 1회성. 재생 반복은 즉시 실격이다
+    }
+  }, { rootMargin: '0px 0px -15% 0px', threshold: 0 });
+  targets.forEach((el) => io.observe(el));
+}
+```
+
+### 코드 D — 모달·팝오버 진입/퇴장 (`@starting-style`)
+
+> 언제: `display: none`에서 나타나거나 top layer에 올라가는 모든 것. 라이브러리가 필요 없다.
+
+```html
+<button popovertarget="tip">도움말</button>
+<div id="tip" popover="auto" role="tooltip" class="tip">계정 복구에만 사용됩니다.</div>
+```
+
+```css
+.tip {
+  margin: 0; padding: 0.75rem 1rem; border: 0; border-radius: var(--radius);
+  background: var(--surface-raised); color: var(--ink); max-width: 18rem;
+  /* 닫힌 상태 = 퇴장의 종착점 */
+  opacity: 0; translate: 0 var(--shift-sm); scale: 0.96;
+  transition: opacity   calc(var(--dur-quick) * 0.65) var(--ease-in),
+              translate calc(var(--dur-quick) * 0.65) var(--ease-in),
+              scale     calc(var(--dur-quick) * 0.65) var(--ease-in),
+              display   calc(var(--dur-quick) * 0.65) allow-discrete,
+              overlay   calc(var(--dur-quick) * 0.65) allow-discrete;
+}
+.tip:popover-open {
+  opacity: 1; translate: 0 0; scale: 1;
+  transition-duration: var(--dur-quick);
+  transition-timing-function: var(--ease-out);
+}
+/* @starting-style 블록은 반드시 원본 규칙 *뒤에* 온다. 명시도가 같아 순서로 승부난다 */
+@starting-style {
+  .tip:popover-open { opacity: 0; translate: 0 var(--shift-sm); scale: 0.96; }
+}
+@media (prefers-reduced-motion: reduce) { .tip { scale: 1; } }  /* 이동은 --shift-sm이 0이 되며 자동 처리 */
+```
+
+**팝오버는 클릭한 곳에서 나와야 한다.** 화면 정중앙에서 페이드인하는 팝오버는 "어디서 왔는지"를 버리는 것이다. `transform-origin`을 트리거 위치로 잡아라.
+
+### 코드 E — 페이지·뷰 전환 (View Transitions API)
+
+> 언제: 라우트 이동, 리스트 필터링, 썸네일 → 상세. 미지원 브라우저에서는 즉시 바뀐다(점진 향상).
+
+```js
+/** DOM을 바꾸는 함수를 감싼다. 지원·모션감소 판정을 여기 한 곳에 모은다 */
+function transition(updateDOM) {
+  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (!document.startViewTransition || reduced) {
+    updateDOM();
+    return { finished: Promise.resolve() };
+  }
+  return document.startViewTransition(updateDOM);
+}
+
+// shared element: 목록과 상세에 같은 이름을 준다. 이름이 중복되면 즉시 에러다
+document.querySelectorAll('.card').forEach((card) => {
+  card.style.viewTransitionName = `card-${card.dataset.id}`;
+});
+
+// 사용: 리스트 필터링, 라우트 교체 등 DOM을 바꾸는 모든 지점
+filterBtn.addEventListener('click', () => transition(() => renderList(filterBtn.dataset.filter)));
+```
+
+```css
+/* 저자 키프레임은 opacity와 transform 계열만 쓴다. 위치·크기 보간은 브라우저가 한다 */
+::view-transition-group(*) { animation-duration: var(--dur-slow); animation-timing-function: var(--ease-soft); }
+::view-transition-old(root) { animation: calc(var(--dur-slow) * 0.65) var(--ease-in) both vt-out; }
+::view-transition-new(root) { animation: var(--dur-slow) var(--ease-out) both vt-in; }
+@keyframes vt-out { to   { opacity: 0; translate: 0 calc(var(--shift-lg) * -1); } }
+@keyframes vt-in  { from { opacity: 0; translate: 0 var(--shift-lg); } }
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*) { animation-name: none !important; }   /* 위치·크기 보간 제거 */
+  ::view-transition-old(*), ::view-transition-new(*) {              /* 크로스페이드만 남긴다 */
+    animation-duration: var(--dur-instant) !important; animation-timing-function: linear !important;
+  }
+}
+```
+
+문서 간 전환(MPA)은 양쪽 문서에 `@view-transition { navigation: auto; }`를 선언하면 켜진다. Firefox 미지원이라 **점진 향상 전용**이다.
+
+### 코드 F — 텍스트 등장 (줄 단위 스플릿·스태거)
+
+> 언제: 히어로 헤드라인 하나. **페이지에 한 번만.** 두 곳에서 텍스트가 날아오면 둘 다 죽는다.
+
+**규칙 셋. 어기면 SEO와 스크린리더가 동시에 깨진다.**
+1. **원문 텍스트를 DOM에 그대로 남긴다.** 크롤러가 읽는 것은 마크업이지 렌더 결과가 아니다
+2. **글자 단위(`chars`) 분해는 쓰지 않는다.** 스크린리더가 "ㄱ-ㅏ-ㄴ-ㅏ"로 읽는다. 줄·단어까지만
+3. `<div>`에 `aria-label`을 붙이는 방식은 **동작하지 않는다.** generic role은 author naming이 금지돼 있다
+
+```html
+<!-- 줄바꿈을 직접 마크업에 넣는다. 텍스트는 온전히 DOM에 있다 -->
+<h1 class="split">
+  <span class="split__line" style="--i:0"><span>여백이 말을 대신하는</span></span>
+  <span class="split__line" style="--i:1"><span>스튜디오</span></span>
+</h1>
+```
+
+```css
+.split__line { display: block; overflow: hidden; }  /* 마스크. clip-path를 애니메이션하지 않는다 */
+.split__line > span { display: block; translate: 0 0; }
+
+@supports (animation-timeline: view()) {
+  .split__line > span {
+    animation: line-up linear both;
+    animation-timeline: view();
+    animation-range: entry 10% entry 70%;
+    animation-delay: calc(var(--i) * var(--stagger));
+  }
+  @keyframes line-up {
+    from { translate: 0 110%; opacity: 0; }
+    to   { translate: 0 0;    opacity: 1; }
+  }
+}
+@media (prefers-reduced-motion: reduce) { .split__line > span { animation: none; opacity: 1; } }
+```
+
+**자동 분해가 꼭 필요하면** GSAP SplitText를 쓴다(§4, 무료). `type: 'lines,words'`까지만, `mask: 'lines'`, `autoSplit: true`. 글자 단위가 브리프의 요구라면 원문을 `.sr-only` 사본으로 남기고 시각 요소에 `aria-hidden="true"`를 건다.
+
+### 코드 G — 숫자 카운트업 (자릿수 스트립, transform만)
+
+> 언제: 실적 숫자 하나. **사용자가 준 진짜 숫자에만 쓴다** — 지어낸 숫자는 게이트 #11이다.
+> `@property --count` 방식은 커스텀 속성을 매 프레임 바꿔 게이트 #8에 걸린다. 자릿수를 굴려라.
+
+```html
+<p class="stat">
+  <span class="sr-only">1284</span>
+  <span class="odo" data-value="1284" aria-hidden="true"></span>
+  <span>개의 프로젝트</span>
+</p>
+```
+
+```css
+.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
+.odo__col { display: block; height: 1em; overflow: hidden; line-height: 1; }
+.odo__strip {
+  display: block; translate: 0 0;
+  transition: translate var(--dur-slow) var(--ease-out);
+  transition-delay: calc(var(--i) * var(--stagger));
+}
+.odo__strip > span { display: block; height: 1em; }
+.odo[data-run] .odo__strip { translate: 0 calc(var(--d) * -1em); }
+.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px;
+           overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { .odo__strip { transition: none; } }
+```
+
+```js
+const DIGITS = '0123456789'.split('').map((n) => `<span>${n}</span>`).join('');
+
+document.querySelectorAll('.odo').forEach((odo) => {
+  odo.innerHTML = odo.dataset.value.split('').map((d, i) =>
+    `<span class="odo__col"><span class="odo__strip" style="--d:${d};--i:${i}">${DIGITS}</span></span>`
+  ).join('');
+
+  const io = new IntersectionObserver(([entry]) => {
+    if (!entry.isIntersecting) return;
+    odo.dataset.run = '';
+    io.disconnect();
+  }, { threshold: 0.6 });
+  io.observe(odo);
+});
+```
+
+### 코드 H — `prefers-reduced-motion` 대응
+
+> 언제: 전부. **접근성은 협상하지 않는다.** 이것 없이 5단계를 통과할 수 없다.
+
+**전부 끄는 것은 오답이다.** 셋으로 나눠라.
+
+| 죽인다 | 남긴다 | 대체한다 |
+|---|---|---|
+| 위치 이동, 시차, 스크롤 스크럽 | `opacity` 크로스페이드 | 슬라이드 → 크로스페이드 |
+| 회전·확대, 오버슛·바운스 | 호버·포커스 상태 변화 | 시차 → 정지 배경 |
+| 자동재생 루프, 마퀴 | 진행 표시·로딩(정보다) | 스크롤 리빌 → 즉시 표시 |
+| stagger(순차 지연) | 포커스 링 | 카운트업 → 최종값 즉시 |
+
+WCAG 2.3.3은 **인터랙션으로 촉발된 모션 애니메이션을 끌 수 있어야** 한다고 요구한다. 색·투명도·블러만 바뀌는 것은 해당하지 않는다 — **위치·크기·형태가 바뀌는 것**이 대상이다. 자동 재생되는 것은 별도로 2.2.2(5초 넘게 움직이면 정지 수단 필요)에 걸린다. 근거는 취향이 아니라 **어지럼·구역질·두통이라는 실제 신체 반응**이다.
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    /* 이동 거리를 0으로 → 모든 슬라이드가 자동으로 크로스페이드가 된다. 컴포넌트 코드를
+       한 줄도 안 고치고, animationend/transitionend 의존 코드도 안 깨진다 */
+    --shift-sm: 0px; --shift-lg: 0px; --stagger: 0ms;
+    /* 페이드는 남긴다. 0으로 만들면 상태 변화가 뚝뚝 끊긴다 */
+    --dur-normal: var(--dur-instant); --dur-slow: var(--dur-instant);
+    --ease-out: ease-out; --ease-in: ease-out; --ease-soft: ease-out;  /* 오버슛 제거 */
+  }
+  .marquee, .ambient, [data-loop], .parallax { animation: none !important; }
+}
+```
+
+JS 쪽 판정도 한 곳에 모은다. 설정이 도중에 바뀌면 반영한다: `matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', () => location.reload())`.
+
+---
+
+## 4. JS 스택 판단 — 언제 끌어오고 언제 안 끌어오나
+
+```
+[1] §3의 CSS로 되는가?                                        YES → 끝. 라이브러리 없음
+[2] React이고 레이아웃 변화(FLIP)·제스처·퇴장 관리가 핵심인가?   YES → Motion
+[3] 스크롤 핀 고정+다단계 시퀀스, 텍스트 자동 분해, SVG 모핑?    YES → GSAP
+[4] 명령형 제어만 필요하고 번들을 늘리기 싫은가?                 YES → WAAPI (0KB)
+```
+
+| 스택 | 번들 (min+gzip) | 쓰는 이유 | 쓰지 않는 이유 |
+|---|---|---|---|
+| **CSS + WAAPI** | **0KB** | 기본값 | 타임라인 시퀀싱·FLIP이 안 된다 |
+| **Motion** `animate` mini | 2.3KB | 바닐라에서 명령형 애니메이션 | 스크롤 핀이 없다 |
+| **Motion** (React, `m`+`LazyMotion`+`domMax`) | 4.6KB + 25KB 지연 | `layout` prop(FLIP 최고), 스프링, `AnimatePresence` | 스크롤 핀·스크럽 등가물 없음 |
+| **Motion** 풀 | ~34KB | 전부 | 예산을 먹는다 |
+| **GSAP** core | ~24KB + 플러그인 | ScrollTrigger(핀·스크럽·스냅), SplitText, Flip, MorphSVG | 메인 스레드에서 돈다 |
+| **Lenis** | ~3KB | 스크롤 감각이 브랜드 자산일 때, WebGL↔DOM 동기화 | 아래 |
+
+**GSAP과 Motion을 한 프로젝트에 둘 다 넣는 것은 대체로 실수다.** 번들이 두 배가 되고 RAF 루프가 둘 돈다. 역할이 명확히 갈릴 때만 허용하고, 그때도 티커는 `gsap.ticker` 하나로 통일한다.
+
+### GSAP 라이선스 — 2025년에 바뀌었다 (gsap.com 원문 확인)
+
+**발효 2025-04-30.** 상업 프로젝트에서 **전부 무료**다. 과거 Club GreenSock 유료 플러그인(SplitText, MorphSVG, DrawSVG, ScrollTrigger, ScrollSmoother, Inertia, MotionPath, Flip, Observer)이 **모두 포함**된다. 배경은 2024년 10월 Webflow의 GreenSock 인수.
+
+남은 제약은 하나다. **GSAP을 "코드 없이 시각적으로 애니메이션을 만드는 도구"에 넣어 Webflow의 애니메이션 빌더와 경쟁하는 제품을 만들 수 없다.** FAQ는 AI가 생성한 코드를 명시적으로 허용한다("AI-generated code is not a 'Prohibited Use'"). **일반적인 웹사이트·앱 제작에는 아무 제약이 없다.**
+
+> 판단: GSAP은 더 이상 "돈 때문에 못 쓰는 라이브러리"가 아니다. 스크롤 시퀀스나 텍스트 분해가 필요하면 주저 없이 쓴다. 다만 **필요 없으면 여전히 깔지 않는다.**
+
+### Lenis (스무스 스크롤) — 논쟁이 있다. 양쪽을 알고 결정해라
+
+**반대**: 스크롤은 사용자가 기대하는 기기 고유의 물리다. 바꾸는 건 시스템 관습 침해다. 관성이 붙으면 **정확한 위치에 멈추기 어렵고** 운동 장애가 있는 사용자에게 치명적이다. 지연은 모든 사용자에게 인지 비용이다.
+
+**찬성**: Lenis는 구식 스크롤 재킹이 아니다. **네이티브 `scrollTop`을 이징할 뿐**이라 스크롤바·앵커·`position: sticky`·스크린리더 탐색이 그대로 작동한다. WebGL↔DOM 동기화는 스크롤을 메인 스레드에서 통제해야만 드리프트가 사라진다.
+
+**판단**: 대시보드·관리도구·문서·커머스·폼 → **쓰지 않는다**(`scroll-behavior: smooth`로 충분). 콘텐츠 사이트·블로그·뉴스 → **쓰지 않는다**(읽기를 방해한다). 브랜드 랜딩·포트폴리오·캠페인 → 조건 충족 시 쓸 수 있다. WebGL↔DOM 동기화 → 사실상 필수.
+
+쓴다면 전부 지켜라: `respectReducedMotion: true` 명시 · `duration` 1.2 이하 · `syncTouch: false` · 모달 열릴 때 `lenis.stop()` · 내부 스크롤 요소(코드 블록·지도)에 `data-lenis-prevent` · **키보드 스크롤(Space·PageDown·Home·End)을 실제로 눌러보고 확인**.
+
+---
+
+## 5. 체크리스트 — 5단계 프리플라이트에서 그대로 돌린다
+
+**하나라도 실패하면 4-4 복귀다.**
+
+**게이트 직결**
+- [ ] `transition`·`@keyframes`를 전부 grep했다. 애니메이션되는 속성이 `opacity`·`transform`·`translate`·`rotate`·`scale`뿐이다 (**#8**)
+- [ ] `background-color`·`box-shadow`·`filter`·`height`·`width`·`top`·`left`·`color`를 전환하는 곳이 없다. 있으면 §2 우회표로
+- [ ] `addEventListener('scroll'`이 소스에 없다 (**#10**)
+- [ ] duration·이징이 전부 `var(--dur-*)`·`var(--ease-*)`다. 인라인 ms 값이 없다
+- [ ] 이펙트를 전부 끈 상태에서 페이지가 완성돼 있다
+
+**동작**
+- [ ] scroll-driven을 쓴 곳에 `@supports` 가드가 있고 **초기 상태가 그 블록 안에** 있다. Firefox에서 백지가 되지 않는다
+- [ ] 스크롤 리빌이 위아래로 오갈 때 재생되지 않는다 (`both` / `unobserve()`)
+- [ ] 첫 화면 콘텐츠가 애니메이션 없이 즉시 읽힌다
+- [ ] 퇴장 duration이 진입의 0.65배다. `(항목수 − 1) × --stagger + duration ≤ 800ms`
+- [ ] 한 시점에 움직이는 독립 요소가 3개 미만이고, 애니메이션 중에도 클릭·키 입력이 먹는다
+
+**접근성 — 타협 없음**
+- [ ] `prefers-reduced-motion: reduce`를 켜고 실제로 확인했다. **전부 꺼지지 않고** 위치 이동·시차·루프만 죽고 페이드·상태 변화·진행 표시는 남는다
+- [ ] 5초 넘게 자동 재생되는 애니메이션에 정지 수단이 있다 (WCAG 2.2.2)
+- [ ] 큰 면적이 무한 회전·확대·시차 이동하지 않는다 (전정기관 장애)
+- [ ] 텍스트가 글자 단위로 쪼개져 있지 않다. 쪼갰다면 원문이 DOM에 온전히 있고 시각 사본에 `aria-hidden`이 있다
+- [ ] 카운트업의 최종값이 스크린리더에 노출된다
+- [ ] 포커스 링이 애니메이션되지 않고 즉시 보인다. Tab 순서가 시각 순서와 일치하고, 전환 후 포커스가 새 콘텐츠를 따라간다
+- [ ] 호버에만 있는 정보가 없다 (터치·키보드에서 접근 불가)
+
+**성능**
+- [ ] 모션 라이브러리 추가분이 `tokens.md` §5 예산 안이다. 넘겼으면 올린 이유를 명시했다
+- [ ] `will-change`가 상시 걸린 요소가 10개 미만이다
+- [ ] Lenis를 썼다면 §4의 조건 6개를 전부 충족했고 키보드 스크롤을 실제로 테스트했다
+- [ ] 6단계 `design.md`에 **채택한 모션 · 안 쓰기로 한 모션과 그 이유**를 적었다
+
+> 근거: research/motion/01~03 (조사일 2026-08-20)
diff --git a/packages/skill/references/preflight.md b/packages/skill/references/preflight.md
new file mode 100644
index 0000000..535ebba
--- /dev/null
+++ b/packages/skill/references/preflight.md
@@ -0,0 +1,137 @@
+# preflight — 출시 전 감사
+
+5단계에서 읽는다. **자기 결과물을 남의 것처럼 본다.** 통과 못 한 항목은 4단계로 돌아가 고친다.
+
+슬롭 지문 검출과 자가 채점표는 `references/antipatterns.md` 에 있다. 이 문서는 **그 외 전부**를 다룬다.
+
+---
+
+## 0. 먼저 기계로 검사한다
+
+**무엇에 돌리는가부터 정해라.**
+- 정적 HTML/CSS 프로젝트 → 소스 그대로
+- **React·Vue·Astro 등 프레임워크 프로젝트 → 프로덕션 빌드 결과에 돌린다.** 소스만 보면 렌더된 DOM 이 없어 대비·가로 스크롤·LCP 를 잴 수 없다. `pnpm build && pnpm preview` 로 띄우고 그 URL 을 검사해라
+- **소스만 보고 "측정 불가"로 남기지 마라.** 미측정은 통과가 아니다
+
+grep 검사는 **주석과 문자열을 제외**해라. "100vh 금지"라고 쓴 주석이 게이트 #9 에 걸리는 오탐이 실제로 나왔다.
+
+사람 눈보다 정확하고 빠르다. 셋 다 돌려라.
+
+### A. 이펙트 전부 끄기
+```css
+/* 임시로 주입해서 확인한다 */
+*, *::before, *::after {
+  filter: none !important;
+  backdrop-filter: none !important;
+  animation: none !important;
+  transition: none !important;
+  transform: none !important;
+}
+canvas { display: none !important; }
+```
+이 상태에서 **페이지가 여전히 읽히고 구조가 살아 있어야 한다.** 무너지면 이펙트가 구조를 대신하고 있는 것이다. 4-1로 돌아가라.
+
+### B. 슬롭 지문 grep
+`references/antipatterns.md` 의 grep 목록을 소스에 돌린다. 검출률 상위 항목(보라 CTA, 전체 대문자 헤드라인, 번호 매긴 1·2·3 단계)부터.
+
+### C. 카피 경쟁사 치환
+제품명을 경쟁사 이름으로 바꿔 읽는다. **문장이 그대로 성립하면 그 카피는 아무것도 말하지 않았다.** 히어로 문구부터 검사한다.
+
+---
+
+## 1. 접근성 — 타협 없음
+
+| 항목 | 확인 방법 | 기준 |
+|---|---|---|
+| 키보드 도달 | Tab 만으로 순회 | 모든 인터랙티브 요소에 도달, 순서가 시각 순서와 일치 |
+| 포커스 표시 | Tab 하며 눈으로 | 항상 보인다. `outline: none` 만 있고 대체가 없으면 실패 |
+| 대비 | 측정 도구 | 본문 4.5:1, 큰 글자·UI 3:1 |
+| 이미지 대체텍스트 | 소스 확인 | 의미 있는 이미지에 alt, 장식은 `alt=""` |
+| 폼 레이블 | 소스 확인 | 모든 입력에 연결된 `<label>`. placeholder 는 레이블이 아니다 |
+| 제목 구조 | 개요 확인 | h1 하나, 건너뛰지 않음 |
+| 모션 감소 | `prefers-reduced-motion` 켜고 확인 | **전부 끄는 게 정답이 아니다** — 위치 이동·시차·자동재생을 죽이고, 페이드·상태 변화는 남긴다 |
+| 자동재생 | 확인 | 5초 이상 반복되는 애니메이션에는 정지 수단이 있다 |
+| 캔버스/WebGL 실패 | JS 끄고 확인 | 콘텐츠가 여전히 보인다 |
+
+**스크린리더를 실제로 켜볼 수 없다면** 최소한 소스의 읽기 순서를 확인해라. `order`·`position: absolute` 로 시각 순서를 바꿨다면 읽기 순서가 어긋난다.
+
+---
+
+## 2. 성능 — 3단계에서 정한 예산과 대조
+
+**예산 값은 `tokens.md` §5 를 보라. 여기서 다시 적지 않는다** — 두 곳에 적으면 갈라진다.
+이 문서가 하는 일은 **실측을 채우는 것**이다.
+
+| 항목 | 실측 | 판정 |
+|---|---|---|
+| 히어로까지 JS (gzip) | | |
+| WebGL/3D 추가분 | | |
+| 총 전송량 (첫 화면) | | |
+| 첫 인터랙션 (모바일 4G) | | |
+| LCP | | |
+| CLS | | |
+| 폰트 파일 수 | | |
+
+**측정하지 않았으면 통과가 아니다.** 예산을 넘겼다면 둘 중 하나다: 이펙트를 빼거나, 예산을 올린 이유를 명시하거나.
+
+### 자주 걸리는 것
+- 폰트 서브셋 안 함 (한글 전체 폰트는 수 MB)
+- 첫 화면 밖 이미지에 `loading="lazy"` 누락
+- 3D/WebGL을 초기 번들에 포함 (뷰포트 진입 시 동적 import 해야 한다)
+- 애니메이션이 `top`/`left`/`width` 를 건드림 → `transform` 으로 바꿔라
+- `will-change` 남발 → 레이어가 늘어 오히려 느려진다
+
+---
+
+## 3. 반응형
+
+- [ ] **320px** 폭에서 가로 스크롤 없음 (하드 게이트 #5 는 320~1920px 전 구간을 요구한다. 375px 만 보면 그 아래가 뚫린다)
+- [ ] 1920px 이상에서 콘텐츠가 늘어지지 않음(최대 폭 제한)
+- [ ] 중간 뷰포트(768~1024px)에서 레이아웃이 깨지지 않음 — **가장 자주 빠뜨리는 구간**
+- [ ] 터치 타깃: **버튼·아이콘·카드 등 독립 컨트롤은 44×44px 이상**(Apple/Google 권고)
+- [ ] 터치 타깃: **본문 안 인라인 텍스트 링크는 24×24px 이상**(WCAG 2.5.8 AA). 여기에 44 를 요구하면 정상적인 내비 링크가 오탐된다
+- [ ] 호버로만 접근되는 기능 없음
+- [ ] 긴 단어/URL이 넘치지 않음 (`overflow-wrap: anywhere`)
+- [ ] 가로 모드에서 첫 화면이 잠기지 않음
+
+---
+
+## 4. 콘텐츠
+
+- [ ] 히어로가 **무엇인지** 말한다. 형용사만 있고 명사가 없으면 실패
+- [ ] 로렘입숨이 남아 있지 않다
+- [ ] 실제 콘텐츠 길이로 테스트했다 (짧은 제목만으로 맞춘 레이아웃은 긴 제목에서 깨진다)
+- [ ] 빈 상태·오류 상태·로딩 상태가 있다
+- [ ] 링크가 어디로 가는지 텍스트만 보고 알 수 있다 ("여기를 클릭" 금지)
+- [ ] 이미지가 없거나 실패했을 때 레이아웃이 무너지지 않는다(`aspect-ratio` 지정)
+
+---
+
+## 5. 디자인 자체
+
+기계로 못 잡는 부분이다. **정직하게 답해라.**
+
+1. **이 사이트를 다른 회사의 것으로 바꿔도 그대로 쓸 수 있는가?** → 그렇다면 브리프에 맞춘 것이 없다
+2. **2단계에서 정한 한 문장 컨셉이 화면에서 보이는가?** → 안 보이면 컨셉이 문서에만 있는 것이다
+3. **감수하기로 한 리스크가 실제로 들어갔는가?** → 구현 중에 안전한 쪽으로 후퇴하지 않았는지
+4. **1단계 레퍼런스 R2(다른 업종의 톤)의 흔적이 있는가?** → 없으면 결국 R1을 베낀 것이다
+5. **강조색이 하나인가?**
+6. **여백이 의도적인가, 남은 것인가?**
+
+---
+
+## 6. 최종 게이트
+
+전부 통과해야 끝난다.
+
+- [ ] 0장 기계 검사 3종 통과
+- [ ] 접근성 표 전 항목 통과
+- [ ] 성능 예산 내 (또는 초과 이유 명시)
+- [ ] 반응형 체크리스트 통과
+- [ ] 콘텐츠 체크리스트 통과
+- [ ] 5장 여섯 질문에 정직하게 답했고, 실패 항목을 고쳤다
+- [ ] `antipatterns.md` 자가 채점표 통과
+
+**하나라도 실패하면 출시가 아니라 4단계 복귀다.**
+
+> 근거: research/references/04-ai-slop-signatures.md, research/motion/01-principles.md, research/three/04-performance.md (조사일 2026-08-20)
diff --git a/packages/skill/references/presets/README.md b/packages/skill/references/presets/README.md
new file mode 100644
index 0000000..c543ee7
--- /dev/null
+++ b/packages/skill/references/presets/README.md
@@ -0,0 +1,17 @@
+# presets — 미학 프리셋
+
+2단계에서 읽는다. **하나를 고르고, 왜 그것인지 한 줄로 적는다.**
+
+프리셋은 템플릿이 아니라 **결정의 출발점**이다. 그대로 쓰면 그 프리셋의 평균이 나온다.
+1단계 레퍼런스 R2(다른 업종의 톤)를 여기에 섞어야 이 브리프만의 것이 된다.
+
+| 프리셋 | 한 줄 | 언제 |
+|---|---|---|
+| [editorial](editorial.md) | 잡지의 여백과 세리프 | 콘텐츠가 주인공. 브랜드·미디어·포트폴리오·럭셔리 |
+| [swiss-minimal](swiss-minimal.md) | 그리드와 침묵 | 제품이 복잡할 때. B2B·도구·문서 |
+| [anti-grid](anti-grid.md) | 의도적으로 깨진 격자 | 기억되어야 할 때. 에이전시·아트·캠페인 |
+| [dark-instrument](dark-instrument.md) | 계기판처럼 정확한 | 개발자·데이터·기술 제품 |
+| [quiet-commerce](quiet-commerce.md) | 읽히는 커머스 | 전환이 목적인 B2C. 상품 수가 적고 사양이 설득의 주체 |
+
+**어느 것도 맞지 않으면 새로 정의해라.** 브리프가 프리셋보다 우선한다.
+새로 정의할 때도 이 문서들의 항목 구조(타이포/색/간격/재질/모션/실패)는 그대로 채워야 한다.
diff --git a/packages/skill/references/presets/anti-grid.md b/packages/skill/references/presets/anti-grid.md
new file mode 100644
index 0000000..168ad64
--- /dev/null
+++ b/packages/skill/references/presets/anti-grid.md
@@ -0,0 +1,58 @@
+# 프리셋: anti-grid — 의도적으로 깨진 격자
+
+> 한 문장: **기억되는 것이 목적일 때.** 규칙을 알고 나서 깬다.
+
+벤토 그리드가 표준화되자 그 반작용으로 부상한 방향이다. 2026년 현재 **실제로 작동하는 차별화 수단**이다.
+
+## 언제 고르나
+
+- 에이전시·스튜디오 자사 사이트, 아트/문화 프로젝트, 캠페인, 음악·패션
+- 클라이언트가 "안전한 것 말고"를 명시적으로 요구했을 때
+- **쓰지 마라**: 전환이 목적인 커머스, B2B SaaS 구매 경로, 접근성 요구가 엄격한 공공. 이 프리셋은 읽기 비용을 높인다
+
+## 결정
+
+### 타이포그래피
+- **모노스페이스 또는 개성 강한 그로테스크**를 주역으로
+- 크기 대비를 극단적으로 — 비율 1.618 이상, 또는 스케일을 아예 무시하고 두세 개 크기만 극단적으로 배치
+- 대문자·자간 확대·세로쓰기 같은 장치를 **하나만** 쓴다. 셋을 동시에 쓰면 아마추어
+- **전체 대문자 헤드라인은 검출률 2위 슬롭 지문**이다. 쓰려면 이유가 있어야 하고, 짧아야 한다(한 줄 이내)
+
+| 슬롯 | 무료 | 유료 | 한글 |
+|---|---|---|---|
+| 디스플레이 | Karrik, Basteleur, Terminal Grotesque (Velvetyne) | Right Grotesk | 제주명조, 여기어때 잘난체 |
+| 본문 | Work Sans, Archivo | Neue Montreal | Pretendard |
+
+### 색
+- 원색 또는 극단적 대비. 중간 톤을 피한다
+- 배경색 자체를 강한 색으로 쓰는 것을 검토 (흰 배경이 기본값이라고 가정하지 마라)
+- **단, 색은 두 개까지.** 무지개는 브루탈리즘이 아니라 혼돈이다
+
+### 간격
+- 격자를 **정의한 뒤에 깬다.** 그리드 없이 배치하면 깨진 게 아니라 그냥 엉망이다
+- 요소를 겹치게(`z-index`, 음수 마진) 배치 — 단 겹침이 읽기를 방해하면 실패
+- 화면 밖으로 흘려보내기, 극단적 여백과 극단적 밀집을 한 페이지에 공존시키기
+
+### 재질 (`svg-filters.md`)
+- 거친 질감이 어울린다: **강한 그레인, 리소그래프 인쇄, 잉크 번짐(`feTurbulence` + `feDisplacementMap`)**
+- 크로마틱 애버레이션을 호버에 얹기
+- 매끄러운 유리·글로우는 이 프리셋의 반대편이다
+
+### 모션 (`motion.md`)
+- 갑작스럽게. `steps()` 이징, 짧고 각진 전환
+- 커서 인터랙션(마그네틱, 왜곡)이 잘 맞는다
+- **`prefers-reduced-motion` 대응이 특히 중요하다.** 이 프리셋의 모션은 강해서 어지러움을 유발하기 쉽다
+
+## 흔한 실패
+
+1. **그리드를 정의하지 않고 시작** → 깬 게 아니라 못 맞춘 것으로 보인다
+2. **읽을 수 없게 만들고 "의도"라고 함** → 브루탈리즘도 읽혀야 한다. 히어로 메시지는 반드시 읽혀야 한다
+3. **장치를 전부 동원** → 대문자 + 자간확대 + 겹침 + 회전 + 그레인 = 소음
+4. **접근성 포기** → 포커스 링과 대비는 이 프리셋에서도 지킨다
+5. **B2B 브리프에 적용** → 프리셋 선택 자체가 실패
+
+## 리스크 후보
+
+- 히어로 텍스트를 화면 밖으로 절반 흘려보내기
+- 스크롤에 따라 그리드 자체가 재배치되기
+- 배경을 원색 하나로 덮고 이미지를 흑백으로
diff --git a/packages/skill/references/presets/dark-instrument.md b/packages/skill/references/presets/dark-instrument.md
new file mode 100644
index 0000000..1358ddb
--- /dev/null
+++ b/packages/skill/references/presets/dark-instrument.md
@@ -0,0 +1,62 @@
+# 프리셋: dark-instrument — 계기판처럼 정확한
+
+> 한 문장: **정밀함이 곧 신뢰인 화면.** 어둡되 분위기가 아니라 기능으로 어둡다.
+
+## 언제 고르나
+
+- 개발자 도구, 인프라, 데이터/모니터링, 보안, 금융 트레이딩
+- 사용자가 이 화면을 **오래 본다**는 전제가 있을 때
+- **쓰지 마라**: 다크가 "멋있어서" 고르는 경우. **다크 기본값은 단일 슬롭 시그니처 1위다.** 이유를 댈 수 없으면 라이트로 가라
+
+### 다크를 정당화하는 이유의 예
+- 사용자가 어두운 환경(야간 운영, 스튜디오)에서 본다
+- 화면에 밝은 데이터 시각화가 있고 배경이 어두워야 대비가 산다
+- 제품 자체(터미널·에디터·모니터링)가 어둡다
+
+## 결정
+
+### 타이포그래피
+- 산세 + **모노스페이스 병용**. 수치·ID·코드는 반드시 모노
+- 비율 1.200~1.250. 정보 밀도가 높으므로 위계 차이를 작게
+- 숫자는 **tabular-nums** 를 켜라 (`font-variant-numeric: tabular-nums`). 수치가 흔들리면 계기판이 아니다
+
+| 슬롯 | 무료 | 한글 |
+|---|---|---|
+| 본문 | IBM Plex Sans, DM Sans, Switzer | Pretendard / Spoqa Han Sans Neo |
+| 수치·코드 | JetBrains Mono, IBM Plex Mono | + Pretendard |
+
+### 색
+- **순수 검정을 쓰지 마라.** `#0d0d0f`~`#14130f` 대역. 순흑은 대비가 과해 눈이 아프다
+- 텍스트도 순백 금지. `#e8e4dc`~`#e6e6e9`
+- 표면 단계를 3개로: `--surface`(가장 어두움) / `--surface-raised` / `--line`
+- 강조색은 **밝고 채도 높게, 아주 좁게.** 어두운 배경에서는 작은 면적으로도 충분히 강하다
+- 상태색(성공/경고/오류)을 강조색과 구분해서 정의해라. 여기서는 기능이 우선이다
+
+### 간격
+- 밀도를 높이되 **정렬을 완벽하게.** 이 프리셋에서 어긋난 1px은 즉시 보인다
+- 데이터 영역과 설명 영역의 간격을 명확히 구분
+- 4px 그리드를 엄격히
+
+### 재질 (`svg-filters.md`)
+- **거의 쓰지 않는다.** 어두운 배경에서 그레인은 노이즈로 보인다
+- 쓴다면: 아주 미세한 스캔라인, 또는 강조 요소에만 좁은 글로우(`feGaussianBlur` + `feMerge`)
+- 글래스모피즘은 성능 대비 이득이 없다. 내비게이션 바 정도까지
+
+### 모션 (`motion.md`)
+- 빠르고 정확하게. `--dur-instant`~`--dur-quick`
+- 실시간 데이터의 변화는 **위치 이동이 아니라 색·굵기 변화**로 알린다(레이아웃 시프트 금지)
+- 로딩은 스피너보다 스켈레톤. 무엇이 올지 미리 보여준다
+
+## 흔한 실패
+
+1. **순수 검정 + 순수 흰색** → 눈이 아프고 아마추어
+2. **네온 보라/파랑 강조** → 슬롭 지문. 어두운 배경일수록 이 함정에 빠지기 쉽다
+3. **다크만 만들고 라이트를 안 만듦** → 토큰으로 짰으면 라이트도 나온다. 다크 전용은 사용자 선택권을 뺏는 것
+4. **수치에 가변폭 폰트** → 숫자가 흔들려 읽기 어렵다
+5. **대비 미달** → 어두운 배경에서 `--ink-muted` 가 4.5:1 아래로 떨어지기 쉽다. 반드시 측정해라
+
+## 리스크 후보
+
+- 강조색을 데이터에만 쓰고 UI 전체를 무채색으로
+- 히어로를 실제 제품 화면(터미널·차트)으로 대체
+- 모노스페이스를 본문까지 확장
diff --git a/packages/skill/references/presets/editorial.md b/packages/skill/references/presets/editorial.md
new file mode 100644
index 0000000..7f39db2
--- /dev/null
+++ b/packages/skill/references/presets/editorial.md
@@ -0,0 +1,56 @@
+# 프리셋: editorial — 잡지의 여백과 세리프
+
+> 한 문장: **읽는 것이 목적인 화면.** 콘텐츠가 주인공이고 UI는 뒤로 물러난다.
+
+## 언제 고르나
+
+- 콘텐츠(글·사진·작업물)가 실제로 있고 그것이 설득의 주체일 때
+- 브랜드·미디어·포트폴리오·럭셔리·문화 기관
+- **쓰지 마라**: 기능이 많은 제품, 전환이 목적인 랜딩, 데이터 밀도가 높은 화면
+
+## 결정
+
+### 타이포그래피
+- **세리프를 주역으로.** 디스플레이와 본문 중 최소 하나는 세리프
+- 비율 **1.333~1.618** — 헤드라인과 본문의 차이를 크게 벌린다
+- 본문 `--measure` 를 반드시 좁게. 라틴 60~68자, 한글 25~35자
+- 웨이트는 2개면 충분(Regular + 하나). 굵기로 소리치지 않는다
+
+| 슬롯 | 무료 | 유료 | 한글 |
+|---|---|---|---|
+| 디스플레이 | Instrument Serif, Fraunces | Signifier, PP Editorial New | 마루 부리 |
+| 본문 | Spectral, Lora | Söhne, Tiempos | 마루 부리 / 리디바탕 |
+
+### 색
+- 배경은 **순백이 아니다.** 종이 쪽으로 살짝 따뜻하게 (`#fbfaf8`, `#f7f5f0`)
+- 잉크도 순흑이 아니다 (`#1a1917`, `#211f1c`)
+- 강조색은 **하나, 작게.** 링크·인용부호·페이지 번호 정도. 면적을 넓히면 잡지가 아니라 전단지가 된다
+
+### 간격
+- **여백이 콘텐츠다.** 섹션 간격을 본문 간격의 5~6배까지 벌려도 된다
+- 비대칭을 적극적으로 — 본문을 그리드 왼쪽 2/3에 두고 오른쪽을 비우거나, 캡션을 여백에 흘린다
+- 이미지는 본문 폭을 넘어가게(`wide`/`full`) 두어 리듬을 만든다
+
+### 재질 (`svg-filters.md`)
+- **필름 그레인**이 이 프리셋의 기본 재질. `feTurbulence fractalNoise` 를 아주 약하게(opacity 0.03~0.06)
+- 인쇄물의 질감: 이미지에 미세한 듀오톤 또는 그라디언트 맵
+- 유리·네온·글로우는 이 프리셋에 어울리지 않는다
+
+### 모션 (`motion.md`)
+- **거의 움직이지 않는다.** 등장은 페이드 + 짧은 상승(8~16px) 이하
+- duration 은 느리게(`--dur-slow`), 이징은 `--ease-out`
+- 스크롤 재킹 금지. 읽는 사람의 속도를 뺏지 마라
+
+## 흔한 실패
+
+1. **세리프를 썼는데 여백이 좁다** → 세리프는 숨 쉴 공간이 없으면 그냥 답답해진다
+2. **강조색을 넓게 칠했다** → 에디토리얼의 색은 점이지 면이 아니다
+3. **모든 이미지를 같은 크기로 넣었다** → 크기 차이가 리듬이다
+4. **본문 폭이 넓다** → 이 프리셋에서 가장 자주 나오는 실패
+5. **한글에 라틴 세리프만 지정** → 한글이 시스템 기본으로 떨어져 전부 무너진다
+
+## 리스크 후보 (2단계에서 하나 고른다)
+
+- 히어로에 이미지 없이 **타이포그래피만**
+- 본문 폭을 극단적으로 좁히고 여백에 주석을 흘리기
+- 페이지 번호·러닝헤드 같은 **인쇄물 장치**를 웹에 가져오기
diff --git a/packages/skill/references/presets/quiet-commerce.md b/packages/skill/references/presets/quiet-commerce.md
new file mode 100644
index 0000000..278eb7d
--- /dev/null
+++ b/packages/skill/references/presets/quiet-commerce.md
@@ -0,0 +1,69 @@
+# 프리셋: quiet-commerce — 읽히는 커머스
+
+> 한 문장: **콘텐츠가 설득하고, 화면은 한 번만 요구한다.**
+
+`editorial` 의 타이포 규율에 전환 구조를 붙인 것이다. 콘텐츠가 주인공이되 **CTA 가 경로 위에 정확히 하나** 있다.
+
+## 언제 고르나
+
+- 상품 수가 적고(5개 이하) 구매자가 **이미 카테고리를 아는** D2C — 로스터리, 소규모 브랜드, 구독 서비스, 단일 제품
+- **사진보다 사양·근거가 설득의 주체**일 때. 또는 사진이 아직 없을 때
+- **쓰지 마라**: 상품 수가 많은 커머스(그리드·필터가 주인공이 된다) · 카테고리 입문자 대상(설명이 먼저다) · B2B 도구(→ `swiss-minimal`)
+
+> 이 프리셋이 존재하는 이유: `editorial` 과 `anti-grid` 는 "전환이 목적인 랜딩에는 쓰지 마라"고 명시하고,
+> `swiss-minimal` 은 B2B·도구용이며, `dark-instrument` 는 다크 정당화가 필요하다.
+> **전환이 목적인 B2C 랜딩에는 넷 다 맞지 않는다.**
+
+## 결정
+
+### 타이포그래피
+- 디스플레이 **세리프 1** + 본문 **산세리프 1**. 세리프가 톤을, 산세리프가 가독성을 맡는다
+- 비율 **1.333**, 최대÷본문 **4배 이상**. 비율만으로 안 나오면 디스플레이를 스케일 밖에 따로 정의한다(`tokens.md` §1)
+- 단계 **4~5개**. 커머스 레퍼런스는 흔히 10단계인데 그대로 베끼면 "통제 실패"에 걸린다
+- 웨이트 2개
+
+| 슬롯 | 라틴 | 한글 |
+|---|---|---|
+| 디스플레이 | Fraunces, Instrument Serif | 마루 부리 |
+| 본문·UI | Switzer, Satoshi | Pretendard Variable |
+| 수치 | 본문 + `tabular-nums` | 본문 + `tabular-nums` |
+
+**한글 본문에 세리프를 쓰지 마라.** 16px 대에서 가독성이 급격히 떨어진다. 세리프는 디스플레이에만.
+
+### 색
+- 배경은 순백이 아니라 **오프화이트**. 단 **크림·베이지는 피해라** — "크림 = 고급"은 보라를 대체한 신종 슬롭이다. 크림을 쓰려면 브리프와 연결할 근거를 대라
+- 잉크도 순흑이 아니다
+- **강조색 하나, 면적 5% 미만.** 좋은 커머스 레퍼런스는 강조색을 CTA 한 곳과 링크에만 쓴다
+- hue 2개 (중립 + 강조)
+
+### 간격
+- 8px 그리드, 여백 값 5종
+- **섹션 간 : 요소 간 = 1:5.** 커머스는 섹션이 많아 간격이 좁으면 즉시 뭉개진다
+- 비대칭을 쓴다 — 본문을 그리드 왼쪽에 두고 오른쪽 여백에 사양·수치를 흘린다
+- `--measure` 는 좁게. 한글 25~35자
+
+### 재질 (`svg-filters.md`)
+- **필름 그레인 최약(0.02~0.04).** 오프화이트 배경의 밴딩을 없애는 용도지 질감을 과시하는 게 아니다
+- 유리·글로우·굴절 없음. 이 프리셋의 표면은 종이다
+- 사진이 있다면 듀오톤·그라디언트 맵으로 톤을 통일한다
+
+### 모션 (`motion.md`)
+- 거의 움직이지 않는다. 스크롤 진입 페이드 + 8px 상승 하나면 충분하다
+- **스크롤 재킹 금지.** 구매 결정 중인 사람의 속도를 뺏지 마라
+- CTA 는 호버·포커스 피드백을 확실히 준다. 여기가 유일하게 반응이 즉각적이어야 하는 곳이다
+
+## 흔한 실패
+
+1. **세리프 디스플레이를 쓰고 여백이 좁다** → 세리프는 숨 쉴 공간이 없으면 답답할 뿐이다
+2. **CTA 가 둘로 갈라진다** ("구매하기" + "구독하기") → 레퍼런스가 그렇더라도 베끼지 마라. 브리프가 정한 목표 하나로 통합해라
+3. **수치를 지표 배너로 만든다** → 근거 없는 숫자는 신뢰를 깎는다. 하드 게이트 #11에 걸린다
+4. **한글에 라틴 세리프만 지정** → 한글이 시스템 기본으로 떨어져 전부 무너진다
+5. **사진이 없다고 일러스트로 때운다** → 사양·수치·타이포로 채우는 쪽이 이 대상에게 더 강하다
+
+## 리스크 후보
+
+- 히어로에 이미지도 감성 카피도 없이 **사양 수치표**를 올린다 (대상이 카테고리를 아는 경우에만)
+- 가격을 첫 화면에 정직하게 노출한다
+- 제품 설명을 산문 한 문단으로 쓰고 불릿을 없앤다
+
+> 근거: research/references/03-trends-2026.md, 04-ai-slop-signatures.md, research/dogfood-coffee/ (검증일 2026-08-20)
diff --git a/packages/skill/references/presets/swiss-minimal.md b/packages/skill/references/presets/swiss-minimal.md
new file mode 100644
index 0000000..3b88354
--- /dev/null
+++ b/packages/skill/references/presets/swiss-minimal.md
@@ -0,0 +1,56 @@
+# 프리셋: swiss-minimal — 그리드와 침묵
+
+> 한 문장: **제품이 복잡하니 화면이라도 조용해야 한다.**
+
+## 언제 고르나
+
+- 기능이 많고 설명할 것이 많은 제품 — B2B, 개발자 도구, 문서, 인프라
+- 신뢰가 전환의 조건일 때
+- **쓰지 마라**: 기억에 남는 것이 목적일 때. 이 프리셋은 안전하지만 눈에 띄지 않는다
+
+## 결정
+
+### 타이포그래피
+- **그로테스크 산세 하나로 끝낸다.** 두 번째 폰트를 넣고 싶으면 모노스페이스(라벨·코드용)까지만
+- 비율 **1.200~1.250** — 위계 차이를 작게. 대신 웨이트와 색으로 구분
+- 정렬은 왼쪽. 가운데 정렬은 히어로 한 곳까지만
+- **Inter 를 기본값으로 쓰지 마라.** Switzer, Satoshi, DM Sans 가 거의 언제나 낫다
+
+| 슬롯 | 무료 | 유료 | 한글 |
+|---|---|---|---|
+| 전체 | Switzer, Satoshi, DM Sans | Söhne, GT America | Pretendard Variable |
+| 라벨·코드 | JetBrains Mono, IBM Plex Mono | — | Pretendard + JetBrains Mono |
+
+### 색
+- 무채색 90% + 강조색 하나
+- 배경/카드/경계선의 명도 차이를 **아주 작게**. 그림자 대신 1px 경계선
+- 강조색은 채도를 낮춰라. 형광에 가까운 색은 이 프리셋에서 즉시 싸구려가 된다
+- **보라~파랑 그라디언트 절대 금지** (검출률 1위 슬롭 지문)
+
+### 간격
+- 4/8 배수 그리드를 **엄격하게** 지킨다. 여기서만큼은 예외를 만들지 마라
+- 정렬선이 전부 맞아야 한다. 이 프리셋의 품질은 정렬에서 나온다
+- 섹션 간격은 본문의 4배
+
+### 재질 (`svg-filters.md`)
+- **재질을 거의 쓰지 않는다.** 이 프리셋의 표면은 평평한 종이다
+- 굳이 쓴다면 아주 약한 그레인 하나까지
+- 글래스모피즘 금지 — 실기기에서 FPS 15~30% 하락하고, 이 프리셋의 정직함과 어긋난다
+
+### 모션 (`motion.md`)
+- 상태 변화 위주(`--dur-instant`, `--dur-quick`). 등장 애니메이션은 최소화
+- 모션은 **피드백**이지 연출이 아니다. 클릭했는데 아무 반응 없는 쪽이 훨씬 큰 죄다
+
+## 흔한 실패
+
+1. **미니멀을 "요소를 지우는 것"으로 이해** → 미니멀은 정렬과 일관성이지 빈 화면이 아니다
+2. **회색이 너무 많아 위계가 사라짐** → `--ink-muted` 는 하나면 충분하다
+3. **카드에 그림자를 겹겹이** → 1px 경계선 하나가 낫다
+4. **아이콘을 이모지로** → 즉시 아마추어. 아이콘 세트 하나를 정해 일관되게
+5. **강조색을 CTA와 링크와 배지에 다 씀** → 강조가 셋이면 강조가 없다
+
+## 리스크 후보
+
+- 히어로에서 이미지를 완전히 빼고 **텍스트와 여백만**
+- 색을 무채색 + 딱 한 색으로 극단적으로 제한
+- 섹션 구분선을 전부 없애고 여백만으로 구획
diff --git a/packages/skill/references/reference-method.md b/packages/skill/references/reference-method.md
new file mode 100644
index 0000000..5b6d919
--- /dev/null
+++ b/packages/skill/references/reference-method.md
@@ -0,0 +1,254 @@
+# reference-method.md — 레퍼런스 해체와 합성
+
+레퍼런스를 **원리로 분해**해서 **다른 결과물로 재조합**하는 절차다.
+
+**원칙 한 줄**: 레퍼런스를 언어로 설명했을 때 그 설명이 여러 결과물로 구현될 수 있으면 원리다. 하나로만 이어지면 표현이다. **원리만 가져간다.**
+
+| 가져간다 (원리) | 안 가져간다 (표현) |
+|---|---|
+| 그리드 비율 (5:7 비대칭) | 섹션 배치 그대로 |
+| 타입 스케일 비율 (1.333) | 폰트 조합 그대로 |
+| 색의 역할 배분 (60/30/10) | 색상값 |
+| 여백 리듬 (섹션 120 / 요소 24) | 섹션 순서 |
+| 모션의 의도 (스크롤=시선 유도) | 애니메이션 시퀀스 |
+
+---
+
+## 1. 3-소스 합성 규칙
+
+레퍼런스 1개는 모방, 2개는 절충, **3개부터 합성**이다. 단 **층위를 나눠서** 고른다.
+
+| 슬롯 | 가져올 것 | 어디서 |
+|---|---|---|
+| **R1 · 구조** | 그리드, 섹션 순서, 정보 위계, 여백 리듬 | 같은 업종·같은 목적 |
+| **R2 · 톤** | 색 역할, 타입 페어링, 형태 언어, 질감 | **반드시 다른 업종** (또는 웹이 아닌 것) |
+| **R3 · 디테일** | 모션 1개, 호버 1개, 전환 1개 | Codrops / Eyecandy / Design Spells |
+
+**R2가 R1과 같은 업종이면 합성이 아니다.**
+SaaS 구조 + SaaS 톤 = 또 하나의 SaaS 슬롭.
+SaaS 구조 + 독립 출판사 톤 = 차별화.
+
+**충돌 해결 순위**
+1. 가독성·접근성이 언제나 이긴다. R2의 톤이 대비를 깨면 톤을 조정한다.
+2. R1 구조가 R3 모션을 이긴다. 모션 때문에 구조를 바꾸지 않는다.
+3. 브리프가 모든 레퍼런스를 이긴다. 충돌하면 레퍼런스를 버린다.
+4. **한 축은 한 소스에서만.** 그리드는 R1에서만, 팔레트는 R2에서만. 섞으면 이유 없는 절충이 된다.
+
+---
+
+## 2. 6축 해체 프레임워크
+
+각 레퍼런스를 6축으로 뜯는다. **형용사는 기록이 아니다. 숫자나 규칙으로 적는다.**
+
+**R3 예외**: R3는 사이트가 아니라 기법이다. 축 5(모션 언어) 하나만 채우고 나머지는 비운다.
+대신 R3에는 **구현 제약**(브라우저 지원, 성능 비용, 보간 조건)을 반드시 적는다.
+
+### 축 1 — 레이아웃 그리드
+컬럼 수·거터 / 콘텐츠 최대폭과 뷰포트 비 / 대칭·비대칭(비율) / 그리드를 깨는 요소 / 본문 한 줄 글자 수(영문 45–75, 국문 25–40)
+→ *"무엇을 정렬시키고 무엇을 일부러 어긋나게 했나?"*
+
+### 축 2 — 타입 스케일
+실제 사용된 크기 목록 / 그 사이 비율(1.25 또는 1.333이 표준) / 단계 수(3–5가 건강, 8+ 는 통제 실패) / 패밀리 수(2개 표준) / 굵기 대비 / line-height / letter-spacing
+→ *"최대 글자와 본문의 비는 몇 배인가?"* (4배 미만이면 위계 약함)
+
+### 축 3 — 컬러 역할
+색상값이 아니라 **역할**로 적는다. surface 단계 수 / text 3단계 유무 / accent 면적 %(10% 이하가 정상) / border 존재 여부 / state 색 분리 여부
+→ *"강조색을 지우면 여전히 읽히는가?"* (읽혀야 정상)
+
+### 축 4 — 여백 리듬
+기본 단위(4 또는 8px) / 섹션 간 수직 여백(80–160px) / 요소 간 : 섹션 간 비율(1:4~1:6) / 여백 값 종류 수(4–6종이 건강) / 좌우 패딩
+→ *"가장 큰 빈 공간은 어디이고 왜 거기인가?"*
+
+### 축 5 — 모션 언어
+트리거(로드/스크롤/호버/커서) / duration / easing / 정보 전달인가 장식인가 / reduced-motion 대응
+→ *"모션을 전부 끄면 작동하는가?"* (작동해야 정상)
+
+**어떤 CSS 속성을 애니메이션하는지 반드시 적어라.** 하드 게이트 #8은 `transform`·`opacity` 만 허용한다.
+`stroke-dashoffset`·`height`·`clip-path`·`filter` 로 만든 기법을 R3로 골라놓고 4단계에서 발견하면
+그때는 이미 늦다. **1단계에서 걸러라.** 그 기법이 좋다면 `motion.md` 의 우회법 표에서
+같은 인상을 `transform`/`opacity` 로 내는 방법을 찾은 뒤에 채택해라.
+
+### 축 6 — 시선 흐름
+첫 진입점 / 2·3번째 / 비즈니스 우선순위와 일치 여부 / Z·F·수직 낙하 중 무엇인가 / CTA가 경로 위에 있나
+
+**회색조 위계 서술** (에이전트용 squint test 대체) — 자기가 만들 화면에 대해 문장으로 쓴다:
+> 색을 전부 제거했을 때 가장 강한 덩어리는 ___, 두 번째는 ___, 세 번째는 ___.
+> 이 순서는 비즈니스 우선순위 [1위 ___ / 2위 ___ / 3위 ___]와 일치한다 / 하지 않는다.
+
+일치하지 않으면 크기·굵기·대비를 조정한다. **색으로 해결하지 마라.**
+
+---
+
+## 3. 실전 절차 체크리스트
+
+- [ ] **1. 브리프를 한 문장으로 압축한다.** `[대상]이 [행동]하게. 느낌은 [형용사 2개].` 이 문장 없이 수집을 시작하지 않는다.
+- [ ] **2. galleries.md 라우팅 표에서 R1/R2/R3 갤러리를 정한다.** R2가 R1과 다른 업종인지 확인한다.
+- [ ] **3. 각 갤러리에서 원본 사이트 URL을 1개씩 확보한다.** 하위 페이지가 필요하면 **인덱스에서 `href`를 뽑아라. slug를 추측하지 마라** — 추측한 URL은 404가 난다.
+- [ ] **3-b. 그 URL이 정본인지 검증한다.** 사용자가 특정 제품·브랜드를 지목했고 후보 도메인이 여럿이면 필수다. **HTTP 200은 살아있다는 뜻이 아니다.**
+  - `curl -sS -o /dev/null -w "%{url_effective} %{http_code} %{size_download}\n" -L <url>` 로 **최종 URL·본문 크기**를 본다. 본문이 **1KB 미만이면 파킹 도메인을 의심하라** — 전형적 파킹 페이지는 `/lander` 로 보내는 JS 한 줄뿐이다.
+  - 후보들의 본문이 **바이트 단위로 동일**하면 전부 같은 파킹 서비스다.
+  - 정본 판정 근거는 **콘텐츠 안에서** 찾아라: 저장소 링크, 설치 명령에 적힌 패키지·스킬 이름, 소유자 계정, 문서 제목이 로컬 파일과 일치하는지.
+- [ ] **4. 원본 사이트 3개를 §4 템플릿으로 WebFetch 한다.** 갤러리 페이지가 아니라 원본이다. → 축 6·정보 위계·카피 톤을 얻는다.
+- [ ] **5. §5로 computed style을 추출한다.** → 축 1·2·3·4를 얻는다. **이 단계를 건너뛰면 6축의 4개가 빈칸으로 남는다.**
+- [ ] **6. 텍스트 소스로 폰트 이름·무료 대체를 확정한다.** (Typewolf / Happy Hues / Eyecandy — galleries.md §3)
+- [ ] **7. 6축 해체 시트를 작성한다.** 숫자로. 6축에 안 들어가는 관측은 `6축 밖의 관측`에 적는다.
+- [ ] **8. 합성한다.** 축마다 어느 소스에서 가져왔는지 명시.
+- [ ] **9. 의도적 변형을 각 레퍼런스마다 1개씩 넣고 이유를 적는다.**
+- [ ] **10. antipatterns.md를 훑고 걸린 항목이 없는지 확인한다.**
+
+---
+
+## 4. WebFetch 프롬프트 템플릿 (그대로 복사해서 쓴다)
+
+### 4-A. 원본 사이트 구조 분석 — 가장 자주 쓴다
+
+> 이 페이지의 구조를 분석해줘. 다음을 순서대로 답해라.
+> 1. 상단부터 순서대로 섹션 목록. 각 섹션의 역할을 한 단어로 붙여라.
+> 2. h1의 정확한 문장, 그리고 h2 전체 목록.
+> 3. CTA 문구 전부와 각각이 페이지 어디에 있는지.
+> 4. 내비게이션 항목 목록.
+> 5. 이 페이지가 방문자에게 시키려는 단 하나의 행동.
+> 6. 카피의 톤 — 평균 문장 길이, 1인칭/2인칭 사용, 전문용어 밀도.
+> 7. 숫자나 지표가 사용된 위치와 그 값.
+> 추측하지 말고 페이지에 실제로 있는 것만 답해라. 없으면 "없음"이라고 써라.
+
+### 4-B. 폰트 확인 (Typewolf 등)
+
+> 이 페이지에서 언급된 폰트 이름을 전부 나열해라. 각각에 대해 헤드라인용인지 본문용인지, 유료인지 무료인지, 제시된 무료 대체 폰트가 있으면 그 이름까지 적어라. 페이지에 없는 정보는 지어내지 마라.
+
+### 4-C. 모션 기법 확인 (Eyecandy · Codrops)
+
+> 이 페이지에서 설명하는 애니메이션 기법의 이름, 그 기법이 시각적으로 무엇을 하는지, 구현에 쓰인 CSS 속성이나 JS 라이브러리를 나열해라. 코드 예시가 있으면 핵심 부분을 그대로 옮겨라.
+
+### 4-D. 디자인 시스템 토큰 확보 (DesignSystems.one · 공개 시스템 문서)
+
+> 이 문서에서 다음을 추출해라. 값이 명시된 것만 적고 없으면 "미공개"라고 써라.
+> 1. 컬러 토큰 이름과 값 (전체 스케일)
+> 2. 타입 스케일 — 크기 목록, line-height, 굵기
+> 3. 여백 스케일 — 기본 단위와 전체 단계
+> 4. border-radius 값 목록
+> 5. 그림자 정의
+> 6. 모션 duration과 easing
+
+### 4-E. 리디자인 — 현행 사이트 감사
+
+> 이 페이지를 감사해줘. 다음을 답해라.
+> 1. 섹션 순서와 각 섹션이 실제로 전달하는 정보
+> 2. 정보 위계상 가장 강조된 것과, 비즈니스적으로 가장 중요해 보이는 것 — 둘이 일치하는가
+> 3. 카피에서 구체적 사실(숫자, 고유명사, 조건)이 들어간 문장과 그렇지 않은 문장의 비율
+> 4. 내비게이션 구조와 항목 수
+> 5. 페이지에서 명백히 불필요하거나 중복인 섹션
+> 추측하지 말고 페이지에 있는 것만 답해라.
+
+---
+
+## 5. computed style 추출 (축 1·2·3·4를 얻는 유일한 방법)
+
+WebFetch는 마크다운으로 변환하면서 CSS를 버린다. **그리드·타입스케일·컬러·여백은 WebFetch로 절대 나오지 않는다.**
+브라우저 도구(Chrome DevTools MCP / Playwright)로 원본 사이트를 열고 아래를 실행한다.
+
+```js
+() => {
+  const cs = (el, p) => getComputedStyle(el).getPropertyValue(p);
+  const vis = el => { const r = el.getBoundingClientRect(); return r.width > 0 && r.height > 0; };
+  const all = [...document.querySelectorAll('body *')].filter(vis);
+  const textEls = all.filter(el => [...el.childNodes].some(n => n.nodeType === 3 && n.textContent.trim().length > 1));
+  const tally = a => { const m={}; a.forEach(v=>{m[v]=(m[v]||0)+1;}); return Object.entries(m).sort((x,y)=>y[1]-x[1]).slice(0,12); };
+  const h1 = document.querySelector('h1');
+  const p  = [...document.querySelectorAll('p')].filter(vis).find(el => el.innerText.trim().length > 200);
+  return {
+    // 반드시 첫 줄에 둔다. 페이지가 실행 중 이탈하면 엉뚱한 사이트의 값이 돌아온다.
+    url: location.href,
+    title: document.title,
+    viewport: innerWidth + 'x' + innerHeight,
+    heading: h1 && { size: cs(h1,'font-size'), lh: cs(h1,'line-height'), ls: cs(h1,'letter-spacing'),
+                     weight: cs(h1,'font-weight'), family: cs(h1,'font-family').split(',')[0] },
+    body: p && { size: cs(p,'font-size'), lh: cs(p,'line-height'), color: cs(p,'color'),
+                 family: cs(p,'font-family').split(',')[0], widthPx: Math.round(p.getBoundingClientRect().width) },
+    fontSizes:  tally(textEls.map(el => cs(el,'font-size'))),
+    families:   tally(textEls.map(el => cs(el,'font-family').split(',')[0].replace(/["']/g,''))),
+    textColors: tally(textEls.map(el => cs(el,'color'))),
+    backgrounds:tally(all.map(el => cs(el,'background-color')).filter(c => c !== 'rgba(0, 0, 0, 0)')),
+    radii:      tally(all.map(el => cs(el,'border-radius')).filter(r => r !== '0px')),
+    widths:     tally(all.filter(el => el.getBoundingClientRect().width > 500)
+                         .map(el => Math.round(el.getBoundingClientRect().width) + 'px')),
+    sectionPadding: [...new Set([...document.querySelectorAll('section, main > div')].filter(vis).slice(0,20)
+                       .map(el => cs(el,'padding-top') + ' / ' + cs(el,'padding-bottom')))]
+  };
+}
+```
+
+**결과 읽는 법**
+
+> **먼저 `url` 을 봐라. 열려고 한 사이트가 아니면 나머지 값은 전부 버려라.**
+> 페이지가 실행 중 이탈하거나 리다이렉트되면 스크립트는 **다른 사이트의 값을 조용히 반환한다.**
+> 실측에서 2회 연속 발생했다. 이건 실패가 아니라 **오염**이다 — 숫자가 6축 시트에 들어가고,
+> 3단계 토큰의 근거가 되고, `design.md` 에 남고, 어디서도 검출되지 않는다.
+
+- `fontSizes` 상위 항목 = 타입 스케일. 최다 크기가 본문이다. 최대÷본문이 **4배 미만이면 위계가 약한 레퍼런스**다.
+- `textColors` 상위 3~4개 = 텍스트 위계 단계. 3단계 이상이면 잘 설계된 것.
+- `backgrounds` 최다값 = 지배 배경. 등장 횟수가 적은 채도 높은 색이 **강조색**이고, 그 횟수가 곧 면적 감각이다.
+- `radii` 종류 수 = 형태 어휘. 1~3개면 통제된 것, 그 이상이면 우연히 결정된 것.
+- `widths` 최다값 = 컨테이너 폭. `body.widthPx` = 텍스트 컬럼 폭.
+
+브라우저 도구를 못 쓰는 환경이면 **6축 중 4개가 빈칸이라는 사실을 산출물에 명시**하고 넘어간다. 채운 척하지 마라.
+
+---
+
+## 6. 하지 말아야 할 것
+
+- **갤러리 홈페이지만 fetch하고 "레퍼런스를 봤다"고 말하기.** 갤러리 홈은 카드 이미지뿐이라 정보가 0이다. **반드시 원본 사이트를 연다.**
+- 레퍼런스 이름만 나열하고 넘어가기. 6축 수치가 없으면 참고한 게 아니다.
+- **WebFetch만 하고 6축을 채웠다고 하기.** WebFetch는 축 6과 카피 톤만 준다. 나머지는 §5가 필요하다.
+- 하위 페이지 URL의 slug를 추측하기. 인덱스에서 `href`를 뽑아라.
+- R1·R2·R3를 같은 갤러리에서 고르기.
+- 6축 시트에 "세련됐다", "깔끔하다" 같은 형용사 적기.
+
+---
+
+## 6. 산출물 형식 (필수)
+
+레퍼런스 조사 단계는 **아래 블록을 출력하기 전까지 완료되지 않는다.** 다음 단계로 넘어가지 마라.
+
+```markdown
+## 브리프
+[대상]이 [행동]하게. 느낌은 [형용사 2개].
+
+## R1 · 구조 — <이름> <원본 URL>
+- 가져올 축: 그리드, 여백 리듬
+- 그리드: 최대폭 1200 / 비대칭 7:5 / 거터 32
+- 여백: 8px 단위 / 섹션 간 120 / 요소 간 24 (1:5)
+- 6축 밖의 관측: (있으면) 카피 규범, 증거 제시 방식, 반복 노출 규칙 등
+- 변형: 최대폭을 1120으로 축소 — 본문 한 줄이 국문 40자를 넘었기 때문
+
+## R2 · 톤 — <이름> <원본 URL>   [업종: R1과 다름 ✓]
+- 가져올 축: 컬러 역할, 타입 스케일
+- 컬러: 배경 1단계 / 텍스트 3단계 / 강조 1색 면적 6%
+- 타입: 세리프 디스플레이 + 그로테스크 본문, 비율 1.333, 최대/본문 4.2배
+- 6축 밖의 관측: (있으면) 신뢰를 만드는 방식, 제품을 보여주는 방식
+- 변형: 비율을 1.25로 조정 — 정보량이 많아 중간 단계가 필요
+
+## R3 · 디테일 — <이름> <출처 URL>
+- 가져올 축: 모션 언어 (R3는 이 축만 채운다)
+- 모션: 스크롤 진입 시 8px 상승 + 페이드, 320ms, ease-out
+- 구현 제약: 브라우저 지원 / JS 비용 / 보간 조건
+- 변형: 280ms로 단축 — 페이지가 길어 반복 노출이 잦음
+
+## 회색조 위계
+가장 강한 덩어리는 ___, 두 번째 ___, 세 번째 ___.
+비즈니스 우선순위 [1 ___ / 2 ___ / 3 ___]와 일치한다.
+
+## 안 할 것
+- (antipatterns.md에서 이 브리프에 특히 위험한 항목 3개 이상 명시)
+```
+
+**검증 조건** — 하나라도 빠지면 되돌아간다.
+- R1/R2/R3 각각 **원본 사이트 URL**이 있다 (갤러리 URL 아님)
+- R2의 업종이 R1과 다르다
+- 각 슬롯에 **가져올 축**이 명시되어 있다
+- 각 슬롯에 **변형 1개와 그 이유**가 있다
+- 6축 값에 숫자가 들어 있다 — **§5를 실행했거나, 못 했다면 어느 축이 빈칸인지 명시했다**
+- R3에 **구현 제약**(지원 범위·JS 비용)이 적혀 있다
+- 회색조 위계가 비즈니스 우선순위와 일치한다
+
+> 근거: research/references/02-methodology.md (조사일 2026-08-20)
diff --git a/packages/skill/references/svg-filters.md b/packages/skill/references/svg-filters.md
new file mode 100644
index 0000000..fed8a8a
--- /dev/null
+++ b/packages/skill/references/svg-filters.md
@@ -0,0 +1,369 @@
+# svg-filters — 재질(surface)
+
+4-2 단계에서 읽는다. 결정할 것은 하나다: **이 디자인의 표면은 무엇으로 되어 있는가.**
+
+SVG 필터는 장식이 아니라 재질을 만드는 도구다. "예뻐 보이니까" 얹는 순간 슬롭이 된다. 종이·유리·필름·잉크 중 무엇인지 **먼저 말로 정하고** 프리미티브를 고른다.
+
+**필터는 three.js보다 먼저 검토한다.** 같은 인상을 필터로 낼 수 있으면 WebGL을 쓰지 않는다. 유리 질감·노이즈 표면·색 분산·유기적 형태는 대부분 필터로 충분하다. 4-3으로 넘어가는 것은 필터로 안 되는 것이 남았을 때뿐이다.
+
+## 1. 재질 → 필터 매핑
+
+이 표가 이 문서의 본체다. 원하는 재질을 찾고 해당 레시피로 간다.
+
+| 재질 | 조합 | 비용 | 프리셋 |
+|---|---|---|---|
+| **필름 (그레인)** | `feTurbulence(fractalNoise)` → data URI 배경 | 상 | **editorial 기본값** · anti-grid 강하게 · swiss-minimal 최약 1개 · **dark-instrument 금지**(어두운 배경에선 노이즈로 보인다) |
+| **종이 (요철)** | `feTurbulence` → `feDiffuseLighting`+`feDistantLight` | 중 | editorial · anti-grid |
+| **인쇄물 (리소)** | CSS `mix-blend-mode:multiply` 잉크 + 그레인 + 판 어긋남 | 중 | anti-grid · editorial |
+| **잉크 (번짐·거친 가장자리)** | `feTurbulence` → `feDisplacementMap` → 블러 → 알파 대비 | 중 | anti-grid · editorial |
+| **유리 (굴절)** | `feImage` 변위맵 → `feDisplacementMap` + `backdrop-filter` | 중 | dark-instrument(내비 정도) · **swiss-minimal 금지** |
+| **금속·젤리 (광택)** | `feGaussianBlur(SourceAlpha)` → `feSpecularLighting` → `feComposite arithmetic` | 중 | dark-instrument · anti-grid |
+| **안개 (글로우)** | `feDropShadow` 체인 / CSS `drop-shadow` | 중 | dark-instrument — 강조 하나에만, 좁게 |
+| **액체 (융합)** | `feGaussianBlur` → `feColorMatrix` 알파 대비 | 중 | anti-grid |
+| **색조 (듀오톤)** | `feColorMatrix` → `feComponentTransfer` | 상 | editorial · anti-grid · dark-instrument |
+| **렌즈 분산 (수차)** | `feOffset` + 채널 분리 + `feBlend screen` | 중 | anti-grid(호버) |
+
+**프리셋 한 줄 규칙** — `editorial`: 그레인이 기본 재질, 유리·네온은 어울리지 않는다 / `swiss-minimal`: 표면은 평평한 종이, 재질을 거의 안 쓴다, 글래스모피즘 금지 / `anti-grid`: 거친 재질(그레인·리소·잉크·수차), 매끄러운 유리는 반대편 / `dark-instrument`: 재질을 거의 안 쓴다, 좁은 글로우까지.
+
+## 2. 공통 뼈대
+
+필터 정의는 문서에 한 번만 넣는다.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
+  <defs><!-- filter들 --></defs>
+</svg>
+```
+
+**텍스트는 필터 밖에 둔다.** 표면 레이어(`position:absolute; inset:0; filter:url(#x)`)와 콘텐츠 레이어(`position:relative`, 필터 없음)를 형제로 분리해라. 예외는 잉크·수차처럼 텍스트 자체가 대상인 경우뿐이다.
+
+## 3. 레시피
+
+### R1. 필름 그레인 — 가장 많이 쓴다
+
+표면에 아날로그 입자를 얹는다. **요소에 `filter`를 걸지 말고 data URI 배경으로 넣어라.** 배경은 한 번만 래스터화되고 캐시된다.
+
+```css
+.grainy { position: relative; isolation: isolate; }
+.grainy::after {
+  content: ''; position: absolute; inset: 0; pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
+  mix-blend-mode: overlay;
+  opacity: var(--grain, 0.06);
+}
+```
+
+**강도 3단계 — 이 값에서 시작해라. 그레인 과다는 가장 흔한 실패다.**
+- `--grain: 0.03` 거의 안 보인다(밴딩만 사라짐) — swiss-minimal, 넓은 그라디언트
+- `--grain: 0.06` 가까이서 보면 있다 — **editorial 기본값**
+- `--grain: 0.14` 명백히 질감이다 — anti-grid
+- `0.25` 이상은 **과하다. 슬롭 신호다.** 쓰지 마라
+
+**조절**: `baseFrequency` 0.6(굵은 입자)~0.95(미세), 기본 0.8 · 밝은 배경엔 `mix-blend-mode: multiply` + opacity 절반
+**비용: 상**
+
+### R2. 종이 질감
+
+노이즈를 높이맵 삼아 조명한다. 종이 섬유의 요철이 나온다.
+
+```html
+<filter id="paper" x="0%" y="0%" width="100%" height="100%">
+  <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" seed="3" result="noise"/>
+  <feDiffuseLighting in="noise" lighting-color="#e8e0d0" surfaceScale="2" result="lit">
+    <feDistantLight azimuth="45" elevation="60"/>
+  </feDiffuseLighting>
+  <feComposite in="lit" in2="SourceAlpha" operator="in"/>
+</filter>
+```
+```css
+.paper-surface { position: absolute; inset: 0; background: #e8e0d0;
+                 border-radius: 6px; filter: url(#paper); }
+```
+
+**조절**: `baseFrequency` 0.02(카드지)/0.04(표준)/0.06(수제지) · `surfaceScale` 1~3(넘으면 스투코 벽) · `elevation` 낮출수록 대비 강함 · `lighting-color`는 종이 색과 같게
+**함정**: 마지막 `feComposite operator="in"`을 빼면 필터 영역 전체가 종이로 칠해진다
+**비용: 중** — 정적 배경 전용. 반복 배경이면 한 번 렌더해 PNG로 구워라
+
+### R3. 리소그래프 인쇄
+
+잉크는 CSS 블렌드로, 그레인만 필터로. **판 어긋남(misregistration)이 리소의 정체다.**
+
+```html
+<filter id="risoGrain" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB">
+  <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="2" stitchTiles="stitch" seed="11" result="n"/>
+  <feColorMatrix in="n" type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.4 0.4 0.4 0 -0.1"/>
+</filter>
+```
+```css
+.riso { --misreg: 2px; position: relative; background: #f2ece0;
+        overflow: hidden; isolation: isolate; }
+.riso .ink-a, .riso .ink-b { position: absolute; mix-blend-mode: multiply; }
+.riso .ink-a { background: #ff4f39; transform: translate(calc(var(--misreg) * -1), -1.5px); }
+.riso .ink-b { background: #2f6bff; transform: translate(var(--misreg), 1.5px); }
+.riso::after { content: ''; position: absolute; inset: 0; pointer-events: none;
+  background: #fff; filter: url(#risoGrain); mix-blend-mode: multiply; opacity: .5; }
+```
+
+**조절**: `--misreg` 0.5~4px · 잉크 `#FF48B0`/`#0078BF`/`#FFE800`/`#00A95C` · 종이 `#F2ECE0`
+**함정**: `isolation: isolate`가 없으면 블렌드가 바깥으로 샌다
+**비용: 중**
+
+### R4. 듀오톤 / 그라디언트 맵
+
+잡다한 스톡 이미지를 브랜드 2색으로 통일한다. 사진이 여러 장일 때 효과가 가장 큰 한 수.
+
+```html
+<filter id="duotone" color-interpolation-filters="sRGB">
+  <feColorMatrix type="matrix" values="
+    0.2126 0.7152 0.0722 0 0
+    0.2126 0.7152 0.0722 0 0
+    0.2126 0.7152 0.0722 0 0
+    0      0      0      1 0"/>
+  <feComponentTransfer>
+    <feFuncR type="table" tableValues="0.05 0.98"/>
+    <feFuncG type="table" tableValues="0.10 0.35"/>
+    <feFuncB type="table" tableValues="0.35 0.10"/>
+  </feComponentTransfer>
+</filter>
+```
+```css
+.duo { filter: url(#duotone); }
+```
+
+위 값은 그림자 `#0D1A59` → 하이라이트 `#FA591A`. **다른 색으로 바꾸는 공식**: 채널마다 255로 나눠 `tableValues="S/255 H/255"`. 값을 3개 넣으면 트라이톤.
+
+**조절**: 앞에 `<feComponentTransfer><feFuncR type="linear" slope="1.3" intercept="-0.15"/>…`를 넣어 원본 대비를 올릴 수 있다
+**함정**: **`color-interpolation-filters="sRGB"`가 없으면 지정한 hex와 다른 색이 나온다.** 여기선 필수
+**비용: 상**
+
+### R5. 잉크 번짐 & 거친 가장자리
+
+딱딱한 사각형을 손으로 찍은 것처럼. 변위 → 블러 → 알파 대비 순서가 잉크가 스며들고 마르는 과정이다.
+
+```html
+<!-- 도형·카드용 -->
+<filter id="rough" x="-10%" y="-10%" width="120%" height="120%">
+  <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="4" seed="12" result="n"/>
+  <feDisplacementMap in="SourceGraphic" in2="n" scale="9" xChannelSelector="R" yChannelSelector="G"/>
+</filter>
+
+<!-- 텍스트용 -->
+<filter id="inkbleed" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
+  <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="4" seed="7" result="n"/>
+  <feDisplacementMap in="SourceGraphic" in2="n" scale="4"
+                     xChannelSelector="R" yChannelSelector="G" result="d"/>
+  <feGaussianBlur in="d" stdDeviation="1.2" result="b"/>
+  <feColorMatrix in="b" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 14 -6"/>
+</filter>
+```
+
+**조절**: `scale` 도형 3/9/14, **텍스트는 4를 넘기지 마라** · `stdDeviation` 0.8~2.5 · 알파 행렬의 `14`를 키우면 마른 잉크
+**함정**: 채널 셀렉터 기본값이 `A`다 — **반드시 `R`/`G` 명시.** 여러 요소에 같은 필터를 쓰면 전부 똑같이 흔들린다 → `seed`만 다른 필터 3개를 돌려 써라
+**비용: 중**
+
+### R6. 유리 굴절
+
+배경이 실제로 굴절된다. **Chromium 계열에서만 렌더된다** — 폴백을 먼저 쓰고 그 위에 얹는다. 변위맵의 중앙을 128(중립)로 평평하게 두고 가장자리에만 변위를 몰아야 렌즈가 된다.
+
+```html
+<filter id="lens" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB">
+  <feImage preserveAspectRatio="none" x="0" y="0" width="220" height="88" result="map"
+    href="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='88'%3E%3Cdefs%3E%3ClinearGradient id='rx' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='rgb(0,0,0)'/%3E%3Cstop offset='0.28' stop-color='rgb(128,0,0)'/%3E%3Cstop offset='0.72' stop-color='rgb(128,0,0)'/%3E%3Cstop offset='1' stop-color='rgb(255,0,0)'/%3E%3C/linearGradient%3E%3ClinearGradient id='gy' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgb(0,0,0)'/%3E%3Cstop offset='0.28' stop-color='rgb(0,128,0)'/%3E%3Cstop offset='0.72' stop-color='rgb(0,128,0)'/%3E%3Cstop offset='1' stop-color='rgb(0,255,0)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='220' height='88' rx='44' fill='rgb(128,128,128)'/%3E%3Crect width='220' height='88' rx='44' fill='url(%23rx)' style='mix-blend-mode:screen'/%3E%3Crect width='220' height='88' rx='44' fill='url(%23gy)' style='mix-blend-mode:screen'/%3E%3C/svg%3E"/>
+  <feDisplacementMap in="SourceGraphic" in2="map" scale="-60"
+                     xChannelSelector="R" yChannelSelector="G"/>
+</filter>
+```
+```css
+/* 1단계: 모든 브라우저에서 성립하는 유리 — 이것만으로 완성돼 있어야 한다 */
+.glass {
+  width: 220px; height: 88px; border-radius: 44px;
+  backdrop-filter: blur(14px) saturate(1.4);
+  background: rgba(255,255,255,.12);
+  border: 1px solid rgba(255,255,255,.28);
+  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 10px 30px rgba(0,0,0,.4);
+}
+/* 2단계: 굴절을 지원하면 덮어쓴다 */
+@supports (backdrop-filter: url(#lens)) {
+  .glass { backdrop-filter: url(#lens) brightness(1.06) saturate(1.25); }
+}
+```
+
+**조절**: `scale` −30(약함)~−90(강함), 부호 반전 시 오목 렌즈 · 그라디언트 stop `0.28`/`0.72`를 `0.15`/`0.85`로 하면 가장자리 집중 · inset 하이라이트가 유리 두께감을 만든다
+**함정 (중요)**: 맵의 `width`/`height`가 **요소 크기와 정확히 같아야** 한다 → 크기별로 맵을 따로 만들고 크기가 변하는 요소에는 쓰지 마라. 그리고 `@supports (backdrop-filter: url(…))`는 **파싱만 검사하므로 신뢰할 수 없다** — 미지원 엔진이 통과하면 `backdrop-filter`가 통째로 무시된다. 그래서 1단계를 `background`+`box-shadow`만으로도 유리처럼 보이게 설계하는 것이 핵심이다
+**비용: 중** — 페이지에 1~2개까지. 큰 면적 금지
+
+### R7. 액체 융합 (구이 / 메타볼)
+
+도형들이 서로 붙어 흐른다. 블러로 알파를 번지게 하고 대비로 다시 잘라낸다.
+
+```html
+<filter id="goo" x="-25%" y="-25%" width="150%" height="150%" color-interpolation-filters="sRGB">
+  <feGaussianBlur in="SourceGraphic" stdDeviation="9" result="blur"/>
+  <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9" result="goo"/>
+  <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
+</filter>
+```
+```css
+.goo-group { filter: url(#goo); padding: 24px; display: flex; gap: 6px; align-items: center; }
+.goo-group > * { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); }
+```
+
+**조절**: `stdDeviation` 5(가까워야 붙음)/9(표준)/20(형태 뭉개짐) · 알파 행렬의 `20`을 키우면 경계가 날카롭다(12~30) · 마무리는 `feComposite atop`(모서리 뾰족한 도형) 또는 `feBlend`(원본 색 선명)
+**함정**: **필터 안에 텍스트를 넣으면 판독 불가능한 덩어리가 된다.** 컨테이너에 여백이 없으면 블롭이 잘린다
+**비용: 중** — 400×400px 이하
+
+### R8. 크로마틱 애버레이션 (RGB 분리)
+
+렌즈 색수차. 호버·전환 순간에만. 상시 적용은 읽기를 방해한다.
+
+```html
+<filter id="chromatic" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
+  <feOffset in="SourceGraphic" dx="-3" dy="0" result="rShift"/>
+  <feColorMatrix in="rShift" type="matrix" result="red"
+    values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0"/>
+  <feColorMatrix in="SourceGraphic" type="matrix" result="green"
+    values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0"/>
+  <feOffset in="SourceGraphic" dx="3" dy="0" result="bShift"/>
+  <feColorMatrix in="bShift" type="matrix" result="blue"
+    values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+  <feBlend in="red" in2="green" mode="screen" result="rg"/>
+  <feBlend in="rg" in2="blue" mode="screen"/>
+</filter>
+```
+```css
+.chroma { color: #fff; }              /* 흰색 소스여야 분리가 선명하다 */
+.chroma:hover { filter: url(#chromatic); }
+```
+
+**조절**: `dx` ±1(미묘)/±3(표준)/±8(글리치) · `dy`를 함께 주면 대각 분리
+**함정**: 유채색 소스에서는 탁해진다. 난독증·시각 피로 사용자에게 불리하므로 **본문 텍스트 금지**
+**비용: 중**
+
+### R9. 부드러운 글로우
+
+어두운 배경의 강조. **먼저 CSS로 되는지 확인해라.** 색을 여러 겹 쌓아야 할 때만 SVG로 온다.
+
+```css
+/* 한 가지 색이면 이걸로 충분하다 — 훨씬 싸다 */
+.glow-cheap { filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 16px var(--accent)); }
+```
+```html
+<filter id="glow" x="-40%" y="-40%" width="180%" height="180%" color-interpolation-filters="sRGB">
+  <feDropShadow dx="0" dy="0" stdDeviation="2"  flood-color="#22d3ee" flood-opacity="1"   result="s1"/>
+  <feDropShadow in="s1" dx="0" dy="0" stdDeviation="6"  flood-color="#7c3aed" flood-opacity="0.9" result="s2"/>
+  <feDropShadow in="s2" dx="0" dy="0" stdDeviation="14" flood-color="#ec4899" flood-opacity="0.7"/>
+</filter>
+```
+
+**조절**: `stdDeviation` 2/6/14 — 심지·중간·확산, 이 비율을 유지해라 · 바깥 레이어일수록 `flood-opacity`를 낮춘다
+**함정**: 큰 `stdDeviation`(50+)은 매우 비싸다. **넓은 소프트 글로우는 `radial-gradient` 배경이 압도적으로 싸다**
+**비용: 중** — dark-instrument에서는 강조 하나에만, 좁게
+
+## 4. CSS로 되는 것은 CSS로
+
+값싼 쪽을 먼저 쓴다. SVG 필터는 CSS로 표현 **불가능한** 것에만.
+
+| 원하는 것 | 쓸 것 |
+|---|---|
+| 블러 · 밝기 · 대비 · 채도 · 색상 회전 · 단색 그림자 | **CSS `filter:` 함수.** 더 빠르고 잘 가속되며 Safari에서 안전하다 |
+| 반투명 배경 흐리기 | **CSS `backdrop-filter: blur()`** |
+| 스캔라인 · 줄무늬 · 격자 | **CSS `repeating-linear-gradient`.** 필터 불필요 |
+| 넓은 소프트 글로우 · 비네트 | **CSS `radial-gradient` / `box-shadow`.** 큰 블러보다 훨씬 싸다 |
+| 잉크 겹침 · 색 곱하기 | **CSS `mix-blend-mode`** |
+| 노이즈 · 절차적 텍스처 | SVG 필터 — 단, **data URI 배경으로** |
+| 변위 · 굴절 · 왜곡 / 채널 분리 · 알파 임계 · 톤커브 / 조명 · 범프맵 | SVG 필터. CSS에 대응물이 없다 |
+
+## 5. 함정
+
+| 증상 | 고치는 법 |
+|---|---|
+| 효과가 사각형으로 잘림 | 필터 영역 기본값은 사방 10%뿐 → `<filter x="-30%" y="-30%" width="160%" height="160%">` |
+| 색이 물빠진 듯 밝고 채도가 낮음 / 듀오톤 hex가 안 맞음 | 필터 기본 연산이 linearRGB → `<filter color-interpolation-filters="sRGB">` 명시 |
+| 변위가 엉뚱한 방향 | `xChannelSelector`/`yChannelSelector` 기본값이 `A` → `R`/`G` 명시 |
+| `stdDeviation="10"`인데 화면이 사라짐 | `primitiveUnits="objectBoundingBox"`면 값이 0~1 스케일. 기본값 `userSpaceOnUse`를 유지하거나 전 수치 재계산 |
+| `feFlood`/조명이 사각형으로 넘침 | 뒤에 `feComposite operator="in" in2="SourceAlpha"` 추가 |
+| 색이 전부 흰색으로 날아감 / 분기 배선이 무시됨 | `feColorMatrix` 값은 0~1 스케일(255로 나눠라) · `in` 생략 시 직전 출력이 들어가므로 분기 양쪽 모두 `in` 명시 |
+| 노이즈에 격자 사각형 | `seed` 514/1977/2337/4777/8032/9615 등에서 재현되는 스펙 버그 → 1~50 중 눈으로 확인한 값 고정 |
+| 요소 안 텍스트가 뭉개짐 | 표면/콘텐츠 레이어 분리(§2) |
+| 모달이 화면 밖으로 못 나감 | `filter`는 fixed/absolute 자손의 **컨테이닝 블록**을 만든다 → 필터는 표면 레이어에만, 오버레이는 `<body>` 직속 |
+| Safari에서만 안 보임 | `backdrop-filter: url()` 미지원 · `feImage` 외부 파일 참조 미지원 · 대형 요소 렌더 실패 → 폴백 설계 + `feImage`는 **data URI만** |
+| 모바일에서만 느림 | 일부 안드로이드 GPU는 필터 가속 불가 → 저사양 감지로 끄기(§7) |
+
+**쓰지 말 것**: `edgeMode`(Safari 전용) · `kernelUnitLength`(엔진별 해석 상이) · `BackgroundImage`·`FillPaint`·`StrokePaint`(사실상 미구현).
+
+## 6. 성능
+
+**비용 = 필터 영역 픽셀 수 × 프리미티브 비용 × 재계산 빈도.** 세 항이 곱해진다.
+
+- 거의 공짜: `feOffset` `feFlood` `feMerge` `feTile` / 싸다: `feColorMatrix` `feComponentTransfer` `feBlend` `feComposite`
+- 보통: `feGaussianBlur` `feDropShadow`(반경 비례) / 비싸다: `feMorphology` `feDisplacementMap`
+- **매우 비싸다: `feTurbulence` `feConvolveMatrix` `feDiffuseLighting` `feSpecularLighting`**
+
+`feTurbulence`는 하드웨어 가속에 친화적이지 않고 큰 면적에서 CPU를 포화시킨다. **`numOctaves`는 4를 넘기지 마라** — 그 이상은 시각적 이득 없이 비용만 는다.
+
+**필터 영역이 곱해진다**: 120%(기본)=1.44배 · 160%=2.56배 · 180%=3.24배. 그레인처럼 확장이 불필요한 필터는 `x="0%" y="0%" width="100%" height="100%"`로 줄여라.
+
+### 필터를 애니메이션하지 마라
+
+필터 값이 바뀌면 매 프레임 전체가 재계산된다. **SKILL.md 하드 게이트 8(`transform`/`opacity` 외 애니메이션 금지)에도 걸린다.** 필터는 정적으로 쓴다.
+
+| 하고 싶은 것 | 대신 할 것 |
+|---|---|
+| 그레인이 지글거리게 | 안 한다. 정적 그레인으로 충분하다 |
+| 노이즈가 흐르게 | CSS `background-position` 이동 또는 포기 |
+| 호버 시 재질 세기 변화 | 필터를 건 **오버레이 레이어의 `opacity`**를 바꿔라. `filter` 값을 트랜지션하지 마라 |
+| 호버 시 수차 켜기 | 상태 전환(on/off)으로만. 값 보간 금지 |
+| 필터 걸린 요소를 이동 | 바깥 래퍼를 `transform`으로 움직이고 안쪽이 필터를 갖게 분리 |
+
+**그 외** — `will-change: filter` 금지(레이어만 점유하고 필터 연산은 그대로다). 큰 면적 `backdrop-filter`는 실기기에서 **FPS 15~30% 하락**하므로 뷰포트 전체에 깔지 말고 칩·툴바·모달 헤더까지만. 종이 질감·리소 그레인처럼 변하지 않는 텍스처는 **PNG/WebP로 구워라**(런타임 비용 0). 검증은 **CPU throttling 4×**에서 한다.
+
+## 7. 접근성 · 폴백
+
+**규칙: 필터를 전부 끈 상태에서 디자인이 성립해야 한다.** 4단계 통과 조건이다. 감사용으로 `*, *::before, *::after { filter: none !important; backdrop-filter: none !important; }`를 주입해 확인하고, 무너지면 4-1로 돌아간다.
+
+**prefers-reduced-motion** — 정적 필터는 모션이 아니므로 끌 필요 없다. 움직이는 것만 처리한다. SMIL(`<animate>`)은 CSS 미디어쿼리로 못 끄니 **애초에 쓰지 마라**(§6).
+```css
+@media (prefers-reduced-motion: reduce) { .goo-group { filter: none; } }
+```
+
+**저사양 감지**
+```js
+function reduceEffects() {
+  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return true;
+  if (typeof navigator.hardwareConcurrency === 'number' && navigator.hardwareConcurrency <= 4) return true;
+  if (typeof navigator.deviceMemory === 'number' && navigator.deviceMemory <= 4) return true; // Chromium 전용
+  if (navigator.connection && navigator.connection.saveData) return true;
+  return matchMedia('(max-width: 640px)').matches;
+}
+if (reduceEffects()) document.documentElement.classList.add('reduce-effects');
+```
+```css
+.reduce-effects .paper-surface { filter: none; background: #e8e0d0; }
+.reduce-effects .glass { backdrop-filter: blur(10px) saturate(1.4); }
+.reduce-effects .grainy::after { opacity: .03; }
+```
+
+**필터가 실패하면 무엇이 보이나**
+- 존재하지 않는 필터를 참조하면 현행 스펙상 **필터만 무시되고 요소는 정상 렌더**된다. 다만 구 엔진에서는 요소가 사라질 수 있다 — **ID 오타는 치명적**
+- `backdrop-filter: url()` 미지원 엔진은 해당 선언 전체를 무시한다 → 배경과 테두리만 남는다. **그 상태가 이미 유리처럼 보여야 한다**
+- 텍스트에 건 필터는 DOM을 바꾸지 않는다(선택·검색·스크린리더 유지). 단 듀오톤은 **대비를 낮추므로** 텍스트 위라면 렌더 결과로 대비비를 다시 측정해라
+
+## 8. 채택 체크리스트
+
+5단계 프리플라이트에서 그대로 돌린다. 하나라도 실패하면 4-2로 복귀.
+
+- [ ] 이 필터가 만드는 **재질을 한 단어로 말할 수 있다**(종이/유리/필름/잉크/금속). 못 하면 장식이다 — 뺀다
+- [ ] 프리셋과 재질이 어긋나지 않는다 (§1)
+- [ ] 같은 인상을 **CSS로 낼 수 없음**을 확인했다 (§4). 그리고 필터로 낼 수 있어서 three.js를 쓰지 않았다
+- [ ] 모든 필터에 `color-interpolation-filters="sRGB"`를 의도적으로 설정했다
+- [ ] `feDisplacementMap`의 채널 셀렉터를 명시했다
+- [ ] 필터 영역이 최소 크기이고, 잘리는 곳이 없다. `numOctaves` ≤ 4
+- [ ] 그레인 opacity ≤ 0.15 (anti-grid 제외)
+- [ ] `feImage`를 썼다면 data URI다
+- [ ] **애니메이션되는 필터가 없다**(하드 게이트 8). `will-change: filter`도 없다
+- [ ] `backdrop-filter`가 뷰포트 전체를 덮지 않는다
+- [ ] 필터를 전부 끈 상태에서 페이지가 완성돼 있다
+- [ ] 필터 건 요소 안에 본문 텍스트나 `position: fixed` 자손이 없다
+- [ ] Safari·모바일 실기기, CPU throttling 4×에서 확인했다
+
+> 근거: research/svg/01~03 (조사일 2026-08-20)
diff --git a/packages/skill/references/three.md b/packages/skill/references/three.md
new file mode 100644
index 0000000..3f81b54
--- /dev/null
+++ b/packages/skill/references/three.md
@@ -0,0 +1,598 @@
+# three — 입체와 공간
+
+4-3에서 읽는다. **레이아웃과 재질이 끝난 뒤에 온다.** three는 세 번째 도구지 첫 번째 아이디어가 아니다.
+
+## 이 문서를 읽는 법
+
+전부 읽지 마라. 필요한 절만 열어라.
+
+| 상황 | 읽을 곳 |
+|---|---|
+| **three를 쓸지 아직 안 정했다** | **§0만.** 대부분 여기서 "안 쓴다"로 끝나고, **그게 가장 흔한 정답이다** |
+| 쓰기로 했다 | §1 버전 핀 + §2 함정 + **§3 코드 A(지연 로드)** — 이 셋이 최소 필수 |
+| 배경 이펙트가 필요하다 | + §4 코드 B (메시 그라디언트) |
+| 모바일·저사양을 만난다 | + §5 코드 C (품질 티어) + §8 성능 |
+| 이미지 그리드를 강화한다 | + §6 코드 D |
+| 다른 패턴을 찾는다 | §7 표에서 고르고 `research/three/02-patterns.md`를 열어라 |
+| 감사 직전 | §9 Lighthouse + §10 폴백 + §11 체크리스트 |
+
+§0을 통과하지 못하면 나머지는 읽을 필요가 없다. **"안 쓴다"는 실패가 아니라 이 스킬의 규칙이다.**
+
+---
+
+## 0. 채택 게이트 — "쓰지 않는다"를 먼저 통과시켜라
+
+| 원하는 것 | 먼저 시도 | three가 필요한 순간 |
+|---|---|---|
+| 유동적 그라디언트 배경 | `radial-gradient` 겹치기 + `filter: blur()` | 마우스/스크롤에 유기적으로 반응해야 |
+| 유리·굴절 | `backdrop-filter` + SVG `feDisplacementMap` | 뒤 오브젝트가 3D로 왜곡돼야 |
+| 그레인·노이즈 | SVG `feTurbulence` | 노이즈가 시간에 따라 흘러야 |
+| 이미지 왜곡 | `clip-path` + `transform` | 픽셀 단위 변형·색수차가 필요 |
+| 떠다니는 입자 | CSS 애니메이션 20개 | 1,000개 이상이거나 서로 반응해야 |
+| 제품 회전 | 스프라이트 시퀀스(36장 WebP) | 사용자가 자유롭게 돌려야 |
+
+**왼쪽 칸으로 되면 왼쪽이 정답이다.** 4-2에서 SVG 필터를 이미 썼다면 대부분 여기서 끝난다.
+
+### 무거운 씬 임포트보다 셰이더 플레인 하나
+
+| 방식 | 비용(gzip) | 언제 |
+|---|---|---|
+| **셰이더 플레인 1장** (§4) | **~95KB** | 기본값. 배경·재질·분위기 |
+| GLTF 모델 + 환경광 | ~180KB + 모델 | 제품이 주인공일 때만 |
+| Spline / 씬 임포트 | **800KB ~ 2MB** | 예산을 즉시 깬다. 사실상 금지 |
+
+**"3D를 넣자"가 아니라 "이 인상에 필요한 최소 GPU 작업은 무엇인가"를 물어라.**
+
+### 채택 조건 — 넷 다 만족해야 한다
+
+1. CSS/SVG로 같은 인상이 안 나온다
+2. 추가분이 **+200KB(gzip) 이내**다 (데모·포트폴리오 브리프면 +600KB, 단 올렸다고 명시)
+3. **폴백을 같이 만든다.** 폴백 없이 채택하지 않는다
+4. 2단계 한 문장 컨셉을 **강화**한다. "있으면 멋있어서"는 이유가 아니다
+
+---
+
+## 1. 버전 핀 — 지금 안전한 조합
+
+```json
+{ "three": "0.185.1", "@react-three/fiber": "^9.7.0", "@react-three/drei": "^10.7.8",
+  "@react-three/postprocessing": "^3.0.5", "postprocessing": "^6.39.4",
+  "overrides": { "three": "0.185.1" } }
+```
+
+| 경고 | 내용 |
+|---|---|
+| **three 0.186 금지** | `postprocessing`의 peer가 `three >=0.168.0 <0.186.0`. 올리면 포스트프로세싱이 깨진다 → **0.185.1에 핀** |
+| **R3F v9 = React 19 전용** | peer `react >=19 <19.3`. 19.3+는 아직 지원 없음(v10 alpha) |
+| **three 중복 설치 금지** | 두 벌이면 `instanceof` 검사가 전부 깨진다. `overrides`로 단일화 |
+| **바닐라 우선** | 페이지가 React가 아니면 R3F를 쓰지 마라. React+R3F만 +75KB다 |
+| **drei는 named import** | 배럴 임포트는 +100KB다 |
+
+---
+
+## 2. 오늘 사람 잡는 함정
+
+| 함정 | 증상 | 고치는 법 |
+|---|---|---|
+| **sRGB 자동 지정 제거** [R3F v9] | 이미지가 어둡고 채도가 죽는다 | 컬러 텍스처에 `tex.colorSpace = THREE.SRGBColorSpace`. 노멀/러프니스맵엔 **지정 금지** |
+| **`Clock` deprecated** [r183+] | 곧 제거됨 | `renderer.setAnimationLoop((t) => …)`의 `t`(ms)를 쓴다 |
+| **`RGBELoader` 개명** [r180+] | import 실패 | `import { HDRLoader } from 'three/addons/loaders/HDRLoader.js'` |
+| **ACES 톤매핑 기본값** | 플랫 그라디언트가 뿌옇게 죽는다 | 2D 셰이더면 `toneMapping = THREE.NoToneMapping` (R3F는 `<Canvas flat>`) |
+| **셰이더 색이 틀림** | hex를 `vec3`에 하드코딩 | 셰이더 안 `vec3`는 **linear 값**이다. 색은 JS에서 `THREE.Color`로 넘겨라 |
+| **WebGL1 미지원** [r163+] | 구형 기기 백지 | `webgl2` 컨텍스트로 게이팅 (§3) |
+| **drei `Environment preset`** | 외부 CDN에서 HDRI를 받는다 | `files="/hdri/studio_1k.hdr"` 자체 호스팅 |
+
+---
+
+## 3. 코드 A — 지연 로드 부트스트랩 (**이 문서에서 가장 중요**)
+
+**언제**: three를 쓰기로 한 모든 경우. 예외 없다. three를 초기 번들에서 빼는 유일한 방법이다.
+
+```js
+// src/gl/boot.js — 계약: 모든 씬은 default export 로 mount(canvas, opts) => disposeFn 을 노출한다
+export async function boot(canvas, loader) {
+  if (!canvas || !gate()) { canvas?.remove(); return null }        // 폴백 배경이 그대로 남는다
+  await inViewport(canvas)                                          // 진입 전엔 다운로드도 안 한다
+  const { default: mount } = await loader()
+  const css = getComputedStyle(document.documentElement)
+  const dispose = mount(canvas, { css })
+  const dur = css.getPropertyValue('--dur-normal').trim() || '350ms'
+  const ease = css.getPropertyValue('--ease-out').trim() || 'ease'
+  canvas.style.transition = `opacity ${dur} ${ease}`
+  requestAnimationFrame(() => { canvas.style.opacity = '1' })
+  addEventListener('pagehide', dispose, { once: true })
+  return dispose
+}
+
+function gate() {                            // WebGL2 + 사용자 선호 + 하드웨어를 한 번에 판정
+  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return false
+  if (navigator.connection?.saveData) return false
+  if ((navigator.deviceMemory ?? 8) < 4 || (navigator.hardwareConcurrency ?? 8) < 4) return false
+  try {
+    const gl = document.createElement('canvas').getContext('webgl2')
+    if (!gl) return false
+    gl.getExtension('WEBGL_lose_context')?.loseContext()            // 프로브 컨텍스트 즉시 반납
+    return true
+  } catch { return false }
+}
+
+const inViewport = (el) => new Promise((res) => {
+  const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { io.disconnect(); res() } },
+    { rootMargin: '200px' })
+  io.observe(el)
+})
+```
+
+```js
+// src/main.js — three 는 여기 어디에도 import 되지 않는다
+import { boot } from './gl/boot.js'
+boot(document.getElementById('gl'), () => import('./gl/scenes/hero.js'))
+```
+
+```html
+<div class="hero__bg" aria-hidden="true"><canvas id="gl" style="opacity:0"></canvas></div>
+```
+
+```css
+.hero__bg {
+  position: absolute; inset: 0; z-index: -1;
+  aspect-ratio: 16 / 9;                       /* CLS 차단 */
+  background:                                 /* WebGL 실패 시 이것이 최종 결과물이다 */
+    radial-gradient(90% 70% at 20% 0%, var(--accent) 0%, transparent 60%),
+    linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%);
+}
+.hero__bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
+@media (prefers-reduced-motion: reduce) { .hero__bg canvas { display: none; } }
+```
+
+**폴백 배경은 셰이더의 정지 프레임과 같은 인상이어야 한다.** 완성 후 `renderer.domElement.toDataURL('image/webp', .85)`로 한 프레임을 캡처해 대조해라.
+
+### 공용 Stage — 모든 씬이 얹히는 최소 컨테이너
+
+```js
+// src/gl/stage.js
+import * as THREE from 'three'
+
+export function createStage(canvas, { dprMax = 1.5, alpha = false } = {}) {
+  const renderer = new THREE.WebGLRenderer({ canvas, alpha, antialias: false, stencil: false,
+    powerPreference: 'high-performance' })
+  renderer.outputColorSpace = THREE.SRGBColorSpace
+  renderer.toneMapping = THREE.NoToneMapping                       // 플랫 2D 셰이더 기준
+  const scene = new THREE.Scene()
+  const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100); camera.position.z = 5
+  const size = { w: 0, h: 0, dpr: 1 }, updaters = new Set()
+  let running = false, last = 0, t0 = performance.now()
+
+  const draw = (t, dt) => { for (const f of updaters) f(t, dt); renderer.render(scene, stage.camera) }
+  const tick = (now) => { const dt = Math.min((now - last) / 1000, 1 / 20); last = now; draw((now - t0) / 1000, dt) }
+  const start = () => { if (!running) { running = true; last = performance.now(); renderer.setAnimationLoop(tick) } }
+  const stop = () => { running = false; renderer.setAnimationLoop(null) }
+
+  function resize() {
+    const r = canvas.getBoundingClientRect()
+    const w = Math.max(1, Math.round(r.width)), h = Math.max(1, Math.round(r.height))
+    const dpr = Math.min(devicePixelRatio || 1, dprMax)
+    if (w === size.w && h === size.h && dpr === size.dpr) return
+    Object.assign(size, { w, h, dpr })
+    renderer.setPixelRatio(dpr); renderer.setSize(w, h, false)
+    stage.camera.aspect = w / h; stage.camera.updateProjectionMatrix()
+    stage.onResize?.(w, h, dpr)
+    if (!running) draw(0, 0)
+  }
+  const ro = new ResizeObserver(resize); ro.observe(canvas)
+  const io = new IntersectionObserver(([e]) => e.isIntersecting ? start() : stop(), { rootMargin: '10%' })
+  io.observe(canvas)
+  const onVis = () => document.hidden ? stop() : start()
+  document.addEventListener('visibilitychange', onVis)
+  const onLost = (e) => { e.preventDefault(); stop() }              // 없으면 복구 이벤트가 안 온다
+  canvas.addEventListener('webglcontextlost', onLost)
+
+  const stage = { renderer, scene, camera, size, start, stop, renderOnce: () => draw(0, 0),
+    add(f) { updaters.add(f); return () => updaters.delete(f) },
+    setDprMax(v) { dprMax = v; size.dpr = -1; resize() },
+    dispose() {
+      stop(); ro.disconnect(); io.disconnect()
+      document.removeEventListener('visibilitychange', onVis)
+      canvas.removeEventListener('webglcontextlost', onLost)
+      scene.traverse((o) => {
+        o.geometry?.dispose()
+        for (const m of [o.material].flat().filter(Boolean)) {
+          for (const u of Object.values(m.uniforms ?? {})) if (u.value?.isTexture) u.value.dispose()
+          m.dispose()
+        }
+      })
+      scene.clear(); renderer.dispose(); renderer.forceContextLoss(); updaters.clear()
+    } }
+  resize()
+  return stage
+}
+```
+
+---
+
+## 4. 코드 B — 메시 그라디언트 셰이더 플레인
+
+**언제**: 랜딩 히어로 배경의 기본 무기. three를 쓰기로 했다면 90%는 이것으로 끝난다. 드로우콜 1개, 텍스처 0장.
+**색과 속도는 3단계 토큰에서 읽는다. 셰이더에 hex를 쓰지 마라** (하드 게이트 #1).
+
+```js
+// src/gl/scenes/hero.js
+import * as THREE from 'three'
+import { createStage } from '../stage.js'
+import { resolveQuality, watchdog } from '../quality.js'
+import frag from '../shaders/hero.frag'
+
+const VERT = /* glsl */`void main() { gl_Position = vec4(position.xy, 0.0, 1.0); }`  // 이미 클립 공간
+
+export default function mount(canvas, { css }) {
+  const q = resolveQuality()
+  const stage = createStage(canvas, { dprMax: q.dpr })
+
+  const color = (n) => {                                   // 하드코딩 폴백을 두지 마라
+    const v = css.getPropertyValue(n).trim()
+    if (!v) throw new Error(`designpaca: 토큰 ${n} 이 없다. 3단계로 돌아가라`)
+    return new THREE.Color(v)                              // THREE.Color 는 linear 로 저장된다
+  }
+  const durSlow = parseFloat(css.getPropertyValue('--dur-slow')) || 600   // ms
+  const speed = 1000 / (durSlow * 20)          // 셰이더도 같은 시간 문법: 1주기 = --dur-slow × 20
+
+  // 풀스크린 트라이앵글. 플레인(2 tri)보다 싸고 대각선 이음매가 없다
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position',
+    new THREE.BufferAttribute(new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]), 3))
+
+  const u = {
+    uTime: { value: 0 }, uSpeed: { value: speed },
+    uResolution: { value: new THREE.Vector2(1, 1) },
+    uPointer: { value: new THREE.Vector2(0.5, 0.5) },
+    uSurface: { value: color('--surface') },
+    uRaised: { value: color('--surface-raised') },
+    uAccent: { value: color('--accent') },
+  }
+  const mesh = new THREE.Mesh(geometry, new THREE.ShaderMaterial({
+    vertexShader: VERT, fragmentShader: frag, uniforms: u,
+    defines: { OCTAVES: q.octaves }, depthTest: false, depthWrite: false,
+  }))
+  mesh.frustumCulled = false
+  stage.scene.add(mesh)
+
+  stage.onResize = (w, h, dpr) => u.uResolution.value.set(w * dpr, h * dpr)
+  stage.onResize(stage.size.w, stage.size.h, stage.size.dpr)
+
+  const target = new THREE.Vector2(0.5, 0.5)
+  const onMove = (e) => target.set(e.clientX / innerWidth, 1 - e.clientY / innerHeight)
+  addEventListener('pointermove', onMove, { passive: true })
+
+  const guard = watchdog(q, stage)
+  stage.add((t, dt) => {
+    u.uTime.value = t
+    u.uPointer.value.lerp(target, 1 - Math.pow(0.002, dt))          // 프레임레이트 독립 보간
+    guard(dt)
+  })
+  stage.start()
+  return () => { removeEventListener('pointermove', onMove); stage.dispose() }
+}
+```
+
+```glsl
+/* src/gl/shaders/hero.frag */
+precision mediump float;
+uniform float uTime, uSpeed;
+uniform vec2  uResolution, uPointer;
+uniform vec3  uSurface, uRaised, uAccent;
+#ifndef OCTAVES
+  #define OCTAVES 3
+#endif
+
+float hash(vec2 p) { p = fract(p * vec2(233.34, 851.73)); p += dot(p, p + 23.45); return fract(p.x * p.y); }
+float vnoise(vec2 p) {
+  vec2 i = floor(p), f = fract(p); f = f * f * (3.0 - 2.0 * f);
+  return mix(mix(hash(i), hash(i + vec2(1, 0)), f.x),
+             mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), f.x), f.y);
+}
+float fbm(vec2 p) {
+  float s = 0.0, a = 0.5;
+  for (int i = 0; i < OCTAVES; i++) { s += vnoise(p) * a; p *= 2.03; a *= 0.5; }
+  return s;
+}
+
+void main() {
+  /* 짧은 축 기준 정규화 — 안 하면 노이즈가 가로로 늘어진다 */
+  vec2 p = (gl_FragCoord.xy * 2.0 - uResolution) / min(uResolution.x, uResolution.y);
+  float t = uTime * uSpeed;
+
+  /* 도메인 워프: 노이즈로 좌표를 흔든 뒤 다시 노이즈 = "유기적"의 정체 */
+  float w = fbm(p * 1.1 + t);
+  float field = fbm(p * 1.7 + w * 0.9 + vec2(0.0, t * 1.3));
+
+  vec2 pc = (uPointer * 2.0 - 1.0) * vec2(uResolution.x / uResolution.y, 1.0);
+  field += exp(-dot(p - pc, p - pc) * 1.6) * 0.28;                 /* 포인터 근처를 부풀린다 */
+
+  vec3 col = mix(uSurface, uRaised, smoothstep(0.18, 0.62, field));
+  col = mix(col, uAccent, smoothstep(0.55, 0.95, field));
+  col *= 1.0 - dot(p, p) * 0.16;                                   /* 비네트 */
+  col += (hash(gl_FragCoord.xy) - 0.5) / 255.0;                    /* 밴딩 제거. 사실상 필수 */
+
+  gl_FragColor = vec4(col, 1.0);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+```
+
+**조절**: `uSpeed`(0.03~0.15, 낮을수록 고급) · `OCTAVES`(2~4) · `p * 1.1`의 배율(작을수록 큰 덩어리) · 비네트 0.16.
+`#include <…>`는 `ShaderMaterial`에서만 동작한다. `RawShaderMaterial`은 컴파일 에러다.
+
+---
+
+## 5. 코드 C — 품질 티어 + 런타임 강등
+
+**언제**: three를 쓰는 모든 씬. 한 번 판정해 씬 전체 설정을 결정한다. 컴포넌트마다 각자 판단하면 조합이 폭발한다.
+
+```js
+// src/gl/quality.js
+const TIERS = {
+  low:  { tier: 'low',  dpr: 1,   octaves: 2, particles: 4000,  post: false,     targetFps: 30 },
+  mid:  { tier: 'mid',  dpr: 1.5, octaves: 3, particles: 15000, post: 'minimal', targetFps: 60 },
+  high: { tier: 'high', dpr: 2,   octaves: 4, particles: 40000, post: 'full',    targetFps: 60 },
+}
+const ORDER = ['high', 'mid', 'low']
+
+/** 동기 판정. detect-gpu(+12KB)는 GLTF 모델 씬에서만 추가로 쓴다 */
+export function resolveQuality() {
+  const cached = sessionStorage.getItem('gl-tier')
+  if (cached && TIERS[cached]) return TIERS[cached]
+  const mobile = matchMedia('(max-width: 768px)').matches
+  const mem = navigator.deviceMemory ?? 8, cores = navigator.hardwareConcurrency ?? 8
+  const t = (mobile || mem < 6 || cores < 6) ? 'low'
+          : (mem >= 8 && cores >= 8) ? 'high' : 'mid'
+  sessionStorage.setItem('gl-tier', t)
+  return TIERS[t]
+}
+
+/** 4초 창에서 목표 fps의 75%를 30% 넘게 놓치면 한 단계 강등. low 에서도 실패하면 캔버스를 버린다 */
+export function watchdog(quality, stage) {
+  let cur = quality, elapsed = 0, bad = 0, total = 0
+  return function update(dt) {
+    elapsed += dt; total++
+    if (1 / dt < cur.targetFps * 0.75) bad++
+    if (elapsed < 4) return
+    const failing = bad / total > 0.3
+    elapsed = 0; bad = 0; total = 0
+    if (!failing) return
+    const next = ORDER[ORDER.indexOf(cur.tier) + 1]
+    if (!next) {                                   // 더 내릴 곳이 없다 → CSS 폴백만 남긴다
+      sessionStorage.setItem('gl-tier', 'low')
+      stage.renderer.domElement.remove(); stage.dispose(); return
+    }
+    cur = TIERS[next]
+    sessionStorage.setItem('gl-tier', next)
+    stage.setDprMax(cur.dpr)                       // 가장 효과가 큰 레버를 먼저 당긴다
+  }
+}
+```
+
+---
+
+## 6. 코드 D — DOM 동기화 이미지 hover 왜곡
+
+**언제**: 이미지 그리드·포트폴리오. **폴백이 공짜인 유일한 패턴**이다 — 실패하면 원래 `<img>`가 그대로 남는다.
+장식을 얹는 게 아니라 이미 있는 콘텐츠를 강화하므로 "레이아웃 → 재질 → 입체" 순서와도 맞는다.
+캔버스는 `position: fixed; inset: 0; pointer-events: none;` 이어야 한다.
+
+```js
+// src/gl/scenes/gallery.js
+import * as THREE from 'three'
+import { createStage } from '../stage.js'
+import { resolveQuality } from '../quality.js'
+import frag from '../shaders/image.frag'
+
+const VERT = /* glsl */`
+  uniform float uHover, uVelocity;
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    vec3 p = position;
+    p.y += sin(uv.x * 3.14159265) * uVelocity * 0.14;     /* 스크롤 속도로 활처럼 휜다 */
+    p.z += sin(uv.y * 3.14159265) * uHover * 0.08;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
+  }`
+
+export default function mount(canvas, { selector = 'img[data-gl]' } = {}) {
+  const q = resolveQuality()
+  const stage = createStage(canvas, { dprMax: q.dpr, alpha: true })
+  stage.camera = new THREE.PerspectiveCamera(45, 1, 100, 3000)   // CSS 픽셀에 맞춘다
+  stage.camera.position.z = 800                                  // → 1 world unit = 1 px
+
+  const geometry = new THREE.PlaneGeometry(1, 1, 20, 20)
+  const loader = new THREE.TextureLoader()
+  const items = [], scroll = { cur: scrollY, vel: 0 }
+
+  for (const el of document.querySelectorAll(selector)) {
+    const u = { uTexture: { value: null }, uCover: { value: new THREE.Vector2(1, 1) },
+      uMouse: { value: new THREE.Vector2(.5, .5) },
+      uHover: { value: 0 }, uVelocity: { value: 0 }, uShift: { value: .006 } }
+    const mesh = new THREE.Mesh(geometry, new THREE.ShaderMaterial({
+      vertexShader: VERT, fragmentShader: frag, uniforms: u, transparent: true }))
+    mesh.visible = false
+    stage.scene.add(mesh)
+    const it = { el, mesh, u, hoverTarget: 0, box: null, ratio: 1 }
+    items.push(it)
+
+    loader.load(el.currentSrc || el.src, (tex) => {
+      tex.colorSpace = THREE.SRGBColorSpace              // ← 빠뜨리면 이미지가 어두워진다
+      tex.generateMipmaps = false; tex.minFilter = THREE.LinearFilter
+      u.uTexture.value = tex
+      it.ratio = tex.image.width / tex.image.height
+      cover(it); mesh.visible = true
+      el.style.opacity = '0'                             // 텍스처 도착 후에만 DOM 이미지를 숨긴다
+    })
+    // 캔버스가 pointer-events:none 이므로 이벤트는 DOM 요소에서 받는다
+    el.addEventListener('pointerenter', () => { it.hoverTarget = 1 })
+    el.addEventListener('pointerleave', () => { it.hoverTarget = 0 })
+    el.addEventListener('pointermove', (e) => {
+      const r = el.getBoundingClientRect()
+      u.uMouse.value.set((e.clientX - r.left) / r.width, 1 - (e.clientY - r.top) / r.height)
+    })
+  }
+
+  const cover = (it) => {                    // object-fit: cover 를 JS 에서 계산 → 셰이더가 짧아진다
+    const pr = it.box ? it.box.w / it.box.h : 1
+    it.u.uCover.value.set(Math.min(pr / it.ratio, 1), Math.min(it.ratio / pr, 1))
+  }
+  const measure = () => {                    // 리플로우를 유발한다. 리사이즈 때만 부른다
+    for (const it of items) {
+      const r = it.el.getBoundingClientRect()
+      it.box = { top: r.top + scrollY, left: r.left + scrollX, w: r.width, h: r.height }
+      it.mesh.scale.set(r.width, r.height, 1); cover(it)
+    }
+  }
+  stage.onResize = (w, h) => {
+    stage.camera.fov = 2 * Math.atan(h / 2 / stage.camera.position.z) * (180 / Math.PI)
+    stage.camera.aspect = w / h; stage.camera.updateProjectionMatrix(); measure()
+  }
+  stage.onResize(stage.size.w, stage.size.h)
+
+  stage.add((t, dt) => {
+    // 스크롤 값은 rAF 에서 직접 읽는다. `scroll` 리스너는 하드 게이트 #10 위반이고,
+    // 어차피 매 프레임 필요한 값이다.
+    const k = 1 - Math.pow(.001, dt), hk = 1 - Math.pow(.0005, dt), prev = scroll.cur
+    scroll.cur += (scrollY - scroll.cur) * k
+    scroll.vel = THREE.MathUtils.clamp((scroll.cur - prev) / Math.max(dt, 1e-4) / 2500, -1, 1)
+    for (const it of items) {
+      if (!it.box) continue
+      it.mesh.position.x = it.box.left - stage.size.w / 2 + it.box.w / 2
+      it.mesh.position.y = -(it.box.top - scroll.cur) + stage.size.h / 2 - it.box.h / 2
+      it.u.uVelocity.value += (scroll.vel - it.u.uVelocity.value) * k
+      it.u.uHover.value += (it.hoverTarget - it.u.uHover.value) * hk
+      it.mesh.visible = !!it.u.uTexture.value &&
+        Math.abs(it.mesh.position.y) < stage.size.h / 2 + it.box.h
+    }
+  })
+  stage.start()
+  return () => {
+    items.forEach((it) => { it.el.style.opacity = '' })
+    geometry.dispose(); stage.dispose()
+  }
+}
+```
+
+```glsl
+/* src/gl/shaders/image.frag */
+precision mediump float;
+uniform sampler2D uTexture;
+uniform vec2  uCover, uMouse;
+uniform float uHover, uVelocity, uShift;
+varying vec2 vUv;
+
+void main() {
+  vec2 uv = vUv * uCover + (1.0 - uCover) * 0.5;                   /* cover */
+  uv = (uv - 0.5) * mix(1.0, 0.94, uHover) + 0.5;                  /* hover 줌 */
+  vec2 dir = normalize(vUv - uMouse + 1e-5);
+  uv += dir * exp(-distance(vUv, uMouse) * 4.0) * uHover * 0.016;  /* 마우스 방향 밀림 */
+
+  float s = uShift * (uHover * 0.6 + abs(uVelocity) * 1.4);        /* 색수차 */
+  vec3 col = vec3(texture2D(uTexture, uv + vec2(s, s * 0.35)).r,
+                  texture2D(uTexture, uv).g,
+                  texture2D(uTexture, uv - vec2(s, s * 0.35)).b);
+
+  gl_FragColor = vec4(col, 1.0);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+```
+
+**원본 이미지를 그대로 쓰면 VRAM이 터진다.** 1920×1080 RGBA = 8.3MB/장. 표시 크기 × 2까지만 서버에서 리사이즈해라.
+
+---
+
+## 7. 패턴 카탈로그 — 코드는 `research/three/02-patterns.md`에
+
+| 효과 | 언제 | 비용 | 문서 |
+|---|---|---|---|
+| SDF 도트 그리드 + 마우스 트레일 | 텍스트가 위에 올라가는 배경. 가독성을 안 해친다 | +0KB · 낮음 | P2 |
+| 파티클 필드 (Points) | 먼지·별 레이어. 5만 개 이하 | +0KB · 중간 | P3 |
+| GPGPU 플로우필드 파티클 | 10만 개 이상, 유체 같은 흐름 | +0KB · 높음 | P4 |
+| InstancedMesh 그리드 웨이브 | 입체 격자 인터랙션. 드로우콜 1 | +0KB · 중간 | P5 |
+| 스크롤 카메라 리그 (Lenis+ScrollTrigger) | 스크롤텔링. WebGL이 페이지를 지배할 때 | **+45KB** · 낮음 | P6 |
+| drei ScrollControls | R3F에서 페이지 전체가 캔버스일 때 | +0KB · 낮음 | P7 |
+| 이미지 전환 (displacement) | 슬라이더·캐러셀 | +0KB · 낮음 | P9 |
+| 유리·굴절 (MeshTransmissionMaterial) | 중심 오브제. **가장 비싸다** | +0KB · **매우높음** | P10 |
+| 3D 텍스트 (troika SDF) | WebGL 안의 대형 타이포 | **+55KB** · 낮음 | P11 |
+| 포스트프로세싱 (bloom/CA/grain) | 발광·필름 룩 | **+32KB** · 중간~높음 | P12 |
+| GLTF 제품 씬 (DRACO/KTX2) | 제품이 주인공 | **+15KB** + 모델 · 중간 | P13 |
+| 노이즈 디졸브 리빌 | 등장·전환 | +0KB · 낮음 | P15 |
+
+**+45KB 이상 항목은 예산 계산에 반드시 넣어라.** 스크롤 리그(GSAP+Lenis)는 **한 줄도 안 썼는데 +200KB 예산의 22%를 먹고 시작한다.** 여기에 troika(+55KB)와 포스트프로세싱(+32KB)을 얹으면 +132KB — 예산의 66%가 라이브러리로만 사라지고 실제 씬에 쓸 몫은 68KB뿐이다.
+
+---
+
+## 8. 성능 — 효과 순서대로
+
+1. **DPR 클램프가 1위다.** `min(devicePixelRatio, 2)` — 3→2면 픽셀 **55% 감소**, 육안 차이 없음. 배경 셰이더는 1.25~1.5까지 내려도 된다
+2. **안 보일 때 안 그린다.** `visibilitychange` + `IntersectionObserver`. 정적 씬은 온디맨드(R3F `frameloop="demand"`). 배터리 80% 절약
+3. **VRAM이 모바일의 진짜 한계다.** 4K 텍스처 = 67MB/장. **WebP는 다운로드만 줄이고 VRAM은 그대로**다. 줄이는 유일한 수단은 KTX2(ETC1S 1/8). 컨텍스트 로스의 최대 원인도 VRAM 고갈
+4. **드로우콜 예산**: 데스크톱 150 / 모바일 60. `renderer.info.render.calls`로 측정. 넘으면 `InstancedMesh`
+5. **`MeshTransmissionMaterial`은 매 프레임 씬을 재렌더한다.** `resolution`을 기본(풀스크린)으로 두지 마라 — 512 이하, 모바일은 `samples={2} resolution={256}`. 2개 이상이면 `transmissionSampler` 공유
+6. **투명 파티클은 오버드로우가 병목**이다. 개수보다 `gl_PointSize`를 먼저 줄여라
+7. **셰이더는 `mediump` 기본.** 모바일에서 ~2배 빠르다. 좌표·GPGPU만 `highp`
+8. **실시간 그림자는 끈다.** `ContactShadows frames={1}` 또는 baked AO로 대체
+
+**병목 격리**: 캔버스를 200×200으로 줄여 회복되면 프래그먼트 병목, 그대로면 드로우콜·CPU 병목이다.
+
+---
+
+## 9. Lighthouse — 캔버스를 LCP 요소로 만들지 마라
+
+WebGL 랜딩페이지가 42점에서 98점으로 간 실측 사례의 핵심은 이 한 줄이다.
+
+| 규칙 | 방법 |
+|---|---|
+| **LCP는 DOM 텍스트가 잡는다** | 히어로 `<h1>`이 LCP가 되게 하고 캔버스는 `z-index:-1` 배경 레이어로 |
+| **CLS 차단** | 캔버스 컨테이너에 `aspect-ratio` 또는 `min-height`를 미리 준다 |
+| **three는 LCP 이후에 요청된다** | 코드 A의 동적 import + IntersectionObserver. Network 탭에서 순서를 확인해라 |
+| **셰이더 컴파일 분산** | 머티리얼 10개를 한 프레임에 처음 그리면 100ms 롱태스크다. `renderer.compileAsync(scene, camera)` [r170+] |
+| **디코더 preload 금지** | DRACO·basis WASM(각 200~250KB)은 실제로 필요할 때만 받게 한다 |
+
+---
+
+## 10. 폴백과 접근성
+
+| 상황 | 대체 |
+|---|---|
+| WebGL2 미지원 · 컨텍스트 생성 실패 | 캔버스 제거 → CSS 그라디언트 폴백 (코드 A) |
+| 저사양(메모리<4GB, 코어<4) · `saveData` | 아예 로드하지 않는다 |
+| **`prefers-reduced-motion: reduce`** | 캔버스 `display:none` + CSS 폴백. 굳이 띄워야 하면 `renderOnce()` 한 장만 |
+| 런타임 프레임 저하 | 티어 강등 → 최종적으로 캔버스 제거 (코드 C) |
+| 배터리 부족 · 3분 이상 실행 | DPR을 1로 내린다 (써멀 스로틀링 방지) |
+| 컨텍스트 로스 | `e.preventDefault()`로 복구 신호 후 정지. **three는 리소스를 자동 재생성하지 않는다** — 씬을 통째로 다시 만들어라 |
+
+- 장식 캔버스는 `aria-hidden="true"` + `pointer-events: none`
+- **WebGL 안의 텍스트는 검색·선택·스크린리더가 안 된다.** 히어로 문구는 반드시 DOM에 둔다
+- 의미 있는 3D 뷰는 `role="img"` + `aria-label` + 정적 이미지 대안
+- 캔버스 위 텍스트는 뒤에 반투명 레이어를 깔아 대비 4.5:1을 보장한다
+- 캔버스를 여러 개 만들지 마라. 컨텍스트 상한은 8~16개다 (drei `<View>` 또는 씬 전환)
+
+---
+
+## 11. 채택 체크리스트
+
+5단계 프리플라이트에서 그대로 돌린다. **하나라도 실패하면 채택 취소이거나 4-3 복귀다.**
+
+- [ ] §0 채택 조건 4개를 통과했다 (CSS/SVG로 안 되고, 예산 내이고, 폴백이 있고, 컨셉을 강화한다)
+- [ ] WebGL 추가분을 **실측**했다(build 후 gzip). 예산 내이거나, 올린 이유를 명시했다
+- [ ] `three`가 **초기 번들에 없다.** Network 탭에서 LCP 이후 요청됨을 확인했다
+- [ ] 셰이더의 색·시간이 3단계 토큰(`--accent`, `--dur-*`)에서 파생됐다. hex 하드코딩이 없다
+- [ ] 컬러 텍스처에 `colorSpace = SRGBColorSpace`를 지정했다
+- [ ] DPR을 클램프했다. `IntersectionObserver` + `visibilitychange`로 렌더를 멈춘다
+- [ ] `renderer.info.render.calls` ≤ 150(데스크톱) / 60(모바일)
+- [ ] 캔버스를 `display:none`으로 껐을 때 페이지가 완성돼 있다 (프리플라이트 0-A와 동일)
+- [ ] `prefers-reduced-motion`에서 애니메이션이 멈추고 폴백이 보인다
+- [ ] 캔버스에 `aria-hidden="true"`, 히어로 텍스트는 DOM에 있다
+- [ ] 컨텍스트 로스를 강제(`WEBGL_lose_context.loseContext()`)했을 때 크래시 없이 폴백이 뜬다
+- [ ] 라우트 이탈 시 `dispose()`가 호출된다. 3분 실행 후 `renderer.info.memory`가 증가하지 않는다
+- [ ] 실기기(중저가 안드로이드)에서 30fps 이상이다
+- [ ] 6단계 `design.md`에 **채택한 이펙트 · 실측 추가분(KB) · 그 폴백**을 적었다
+
+하드 게이트 중 셋이 여기서 자주 걸린다: **#1**(셰이더 hex 하드코딩) · **#8**(`transform`/`opacity` 외 애니메이션 — 캔버스 페이드는 `opacity`로) · **#10**(`scroll` 리스너 — rAF에서 `scrollY`를 읽어라).
+
+> 근거: research/three/01~04 (조사일 2026-08-20)
diff --git a/packages/skill/references/tokens.md b/packages/skill/references/tokens.md
new file mode 100644
index 0000000..1197b92
--- /dev/null
+++ b/packages/skill/references/tokens.md
@@ -0,0 +1,245 @@
+# tokens — 디자인 토큰과 성능 예산
+
+3단계에서 읽는다. **코드를 쓰기 전에 숫자를 정한다.** 구현하면서 색을 고르면 매번 다른 색이 나온다.
+
+토큰은 취향이 아니라 **계약**이다. 한번 정하면 이후 모든 값은 여기서 나온다. 하드코딩된 값이 하나라도 있으면 수정 요청 한 번에 무너진다.
+
+---
+
+## 1. 타입 스케일
+
+### 비율을 먼저 고른다
+
+| 비율 | 값 | 인상 | 언제 |
+|---|---|---|---|
+| Minor Third | 1.200 | 차분, 조밀 | 정보 밀도가 높은 페이지, 문서, 대시보드 |
+| Major Third | 1.250 | 안정 | 기본값. 대부분의 마케팅 사이트 |
+| Perfect Fourth | 1.333 | 또렷한 위계 | 랜딩 페이지, 제품 소개 |
+| Golden | 1.618 | 극적 | 포트폴리오, 에디토리얼. 중간 단계가 비어 본문이 외로워진다 |
+
+**한 페이지에 비율은 하나다.** 헤드라인만 다른 비율을 쓰고 싶으면 그건 비율이 아니라 **디스플레이 사이즈를 따로 정의**하는 것이다.
+
+### 실제 값으로 적는다
+
+```css
+:root {
+  /* Perfect Fourth (1.333), 본문 16px 기준 */
+  --step--1: 0.75rem;   /* 12 — 캡션, 레이블 */
+  --step-0:  1rem;      /* 16 — 본문 */
+  --step-1:  1.333rem;  /* 21 — 리드 문단, 소제목 */
+  --step-2:  1.777rem;  /* 28 — h3 */
+  --step-3:  2.369rem;  /* 38 — h2 */
+  --step-4:  3.157rem;  /* 51 — h1 */
+  --step-5:  4.209rem;  /* 67 — 디스플레이 */
+}
+```
+
+### 반응형은 clamp 로, 미디어쿼리로 하지 마라
+
+```css
+--step-4: clamp(2.25rem, 1.5rem + 3.75vw, 3.157rem);
+```
+`clamp(최소, 기준+vw, 최대)`. 최소값은 **모바일에서 읽히는 크기**, 최대값은 데스크톱 기준. 중간이 매끄럽게 이어져 중간 뷰포트에서 깨지지 않는다.
+
+### 함께 정해야 하는 것
+
+| 토큰 | 규칙 |
+|---|---|
+| `--leading-tight` | 1.1~1.2 — 디스플레이/헤드라인 |
+| `--leading-normal` | 1.5~1.6 — 본문 (라틴) / **1.6~1.8 (한글)** |
+| `--measure` | 한 줄 길이. 라틴 60~75자, **한글 25~40자** |
+| 자간 | 큰 글자에만 음수(`-0.02em` 정도). **한글에는 음수 자간 금지** |
+
+**폰트는 최대 2종.** 세 번째 폰트를 넣고 싶다면 그건 위계를 웨이트로 못 만들고 있다는 신호다.
+
+---
+
+## 2. 색
+
+### 역할로 정의한다. 팔레트로 정의하지 마라
+
+"파랑 5단계"가 아니라 **무엇에 쓰이는 색인지**로 정의한다.
+
+```css
+:root {
+  --surface:        /* 페이지 바탕 */
+  --surface-raised: /* 카드·패널 (바탕과 구분되되 튀지 않게) */
+  --ink:            /* 본문 텍스트 */
+  --ink-muted:      /* 보조 텍스트 — 대비 4.5:1 유지 */
+  --line:           /* 경계선 */
+  --accent:         /* 강조 — 페이지당 하나 */
+  --accent-ink:     /* 강조 위에 올라가는 글자색 */
+}
+```
+
+### 규칙
+
+1. **강조색은 하나다.** 두 개가 필요하다고 느끼면 위계 설계가 실패한 것이다. 예외: 상태색(성공/경고/오류)은 강조색이 아니라 기능색이다
+2. **채도가 높은 색은 면적을 좁게.** 넓은 면적에 쓰면 눈이 피로하고 싸구려로 보인다
+3. **중성색도 색이다.** 순수 회색(`#808080`) 대신 강조색 쪽으로 약간 기운 중성색을 쓰면 화면 전체가 하나로 묶인다
+4. **대비를 측정해라.** 본문 4.5:1, 큰 글자 3:1. 눈으로 판단하지 마라
+
+### 다크 모드
+
+**다크가 슬롭인 게 아니라 고르지 않은 다크가 슬롭이다.** (`antipatterns.md` §1 — bun.sh 는 다크인데도 슬롭 항목을 거의 전부 회피한다)
+
+다크를 기본으로 하려면 **근거를 한 줄로 대라.** 정당화되는 이유의 목록은 `presets/dark-instrument.md` 에 있다(야간 운영 환경, 밝은 데이터 시각화의 대비, 제품 자체가 어두움). 댈 수 없으면 라이트로 간다.
+
+어느 쪽을 기본으로 하든 **두 테마를 동등하게 정의한다.** 다크만 만들고 라이트를 빼는 것은 사용자 선택권을 뺏는 것이다.
+
+지원할 때는 색을 뒤집는 게 아니라 **역할별로 다시 정의**한다. 다크에서 순수 검정(`#000`)은 대비가 너무 세서 눈이 아프고, 순수 흰색 텍스트도 마찬가지다.
+
+```css
+:root { --surface: #fbfaf8; --ink: #1a1917; }
+@media (prefers-color-scheme: dark) {
+  :root { --surface: #14130f; --ink: #e8e4dc; }
+}
+```
+
+---
+
+## 3. 간격
+
+### 하나의 리듬에서 파생시킨다
+
+```css
+:root {
+  --space-1: 0.25rem;  /*  4 */
+  --space-2: 0.5rem;   /*  8 */
+  --space-3: 1rem;     /* 16 */
+  --space-4: 1.5rem;   /* 24 */
+  --space-5: 2.5rem;   /* 40 */
+  --space-6: 4rem;     /* 64 */
+  --space-7: 6rem;     /* 96 */
+  --space-8: 10rem;    /* 160 — 섹션 간격 */
+}
+```
+
+**중간 값을 즉석에서 만들지 마라.** `--space-4` 와 `--space-5` 사이가 필요하다면 스케일이 잘못된 것이다.
+
+### 여백이 위계를 만든다
+
+- 관련 있는 것끼리는 **가깝게**, 다른 그룹과는 **확실히 멀게**. 애매한 중간 간격이 가장 나쁘다
+- 섹션 간격은 **본문 간격의 4배 이상**. 좁으면 페이지가 뭉개진다
+- 요소를 정렬할 때 **간격이 아니라 정렬선**을 먼저 맞춰라
+
+---
+
+## 3-b. 형태 (radius·선)
+
+하드 게이트 #3 이 검사하는 대상이다. **정의하지 않으면 검사할 수 없다.**
+
+```css
+:root {
+  --radius-sm: 2px;   /* 입력, 배지 */
+  --radius-md: 8px;   /* 카드, 패널 */
+  --radius-pill: 999px;
+  --line-width: 1px;
+}
+```
+
+**서로 다른 radius 값은 3종 미만으로.** 어휘가 많을수록 우연히 결정된 것으로 보인다.
+1종만 쓰는 것도 정당한 선택이다 — `swiss-minimal`·`anti-grid` 에서는 오히려 그쪽이 맞다.
+
+---
+
+## 4. 모션 토큰
+
+```css
+:root {
+  --dur-instant: 100ms;  /* 상태 변화 — 호버, 포커스 */
+  --dur-quick:   200ms;  /* 작은 요소 등장/퇴장 */
+  --dur-normal:  350ms;  /* 패널, 모달 */
+  --dur-slow:    600ms;  /* 페이지 전환, 큰 이동 */
+
+  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);   /* 들어오는 것 — 기본값 */
+  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);   /* 나가는 것 */
+  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);     /* 위치 이동 */
+}
+```
+
+상세는 `references/motion.md`. 여기서는 **값을 고정**하는 것이 목적이다. 컴포넌트마다 다른 duration 을 쓰면 페이지가 불안해 보인다.
+
+---
+
+## 5. 성능 예산
+
+**여기서 정한다. 구현 후에 재면 이미 늦었다.**
+
+**이 표가 성능 예산의 유일한 원본이다.** SKILL.md 도 `preflight.md` 도 여기를 가리킨다. 다른 문서에 예산 표를 만들면 값이 갈라지고, 갈라진 순간 아무도 어느 쪽이 맞는지 모른다.
+
+| 항목 | 기본 | 데모/포트폴리오 | 5단계에서 |
+|---|---|---|---|
+| 히어로까지 JS (gzip) | 150KB | 400KB | 측정 |
+| WebGL/3D 추가분 | +200KB | +600KB | 측정 |
+| 총 전송량 (첫 화면) | 1MB | 2MB | 측정 |
+| 첫 인터랙션 (모바일 4G) | 3초 | 5초 | 측정 |
+| LCP | 2.5초 | 3.5초 | 측정 |
+| CLS | 0.1 | 0.1 | 측정 |
+| 폰트 **패밀리** | 2개 이하 | 3개 | 개수 확인 |
+| 폰트 전송량(첫 화면) | 100KB | 200KB | 측정 |
+| 애니메이션 속성 | transform/opacity 만 | 동일 (타협 없음) | grep |
+
+예산을 올렸다면 **올렸다는 사실과 이유를 명시**해라. 조용히 넘기는 것이 가장 나쁘다.
+
+> **폰트는 파일 개수가 아니라 패밀리 수와 전송량으로 센다.** 한글 웹폰트를 유니코드 범위별로
+> 수십 개 파일로 쪼개는 것은 **올바른 최적화**다(Pretendard `dynamic-subset` 은 14개 이상).
+> 브라우저는 페이지에 실제로 쓰인 글자 범위만 받는다. 파일 개수를 줄이라고 요구하면
+> 한글 프로젝트를 단일 대용량 파일이라는 잘못된 방향으로 몬다.
+
+### LCP·CLS 를 어떻게 재나
+
+`preflight.md` 가 이 값을 요구한다. 재는 법이 없으면 "미측정"으로 남고, 미측정은 통과가 아니다.
+
+```html
+<!-- 페이지에 임시로 넣고 콘솔을 본다. 측정 후 반드시 제거한다 -->
+<script>
+new PerformanceObserver((l) => {
+  const e = l.getEntries().at(-1);
+  console.log('LCP', Math.round(e.startTime), e.element);
+}).observe({ type: 'largest-contentful-paint', buffered: true });
+
+let cls = 0;
+new PerformanceObserver((l) => {
+  for (const e of l.getEntries()) if (!e.hadRecentInput) cls += e.value;
+  console.log('CLS', cls.toFixed(3));
+}).observe({ type: 'layout-shift', buffered: true });
+</script>
+```
+
+**프로덕션 빌드에 돌려라.** 개발 서버는 번들이 다르고 HMR 스크립트가 섞여 값이 의미 없다.
+Lighthouse 를 쓸 수 있으면 그쪽이 더 정확하다 — 단 모바일 프로파일로.
+
+### 예산을 지키는 기본 수단
+
+- 폰트: `font-display: swap`, 서브셋(한글은 필수 — 전체 한글 폰트는 수 MB다), `preload` 는 실제로 첫 화면에 쓰는 것만
+- 이미지: 실제 표시 크기의 2배까지만, AVIF/WebP, 첫 화면 밖은 `loading="lazy"`
+- JS: 첫 화면에 필요 없는 것은 전부 지연 로드. 3D는 뷰포트 진입 시 동적 import
+- **측정하지 않은 최적화는 하지 마라.** 대신 예산을 넘겼는지는 반드시 측정해라
+
+---
+
+## 6. 산출물 형식
+
+3단계를 마치면 아래가 실제 값으로 채워져 있어야 한다. 이것이 4단계의 입력이다.
+
+```css
+:root {
+  /* 타입 — 비율 ____ , 디스플레이는 스케일 밖 별도 정의 여부 ____ */
+  --step--1 ~ --step-5, --leading-*, --measure
+  /* 색 — 역할별. 다크 테마도 함께 */
+  --surface, --surface-raised, --ink, --ink-muted, --line, --accent, --accent-ink
+  /* 간격 */
+  --space-1 ~ --space-8
+  /* 형태 — 하드 게이트 #3 이 이걸 검사한다 */
+  --radius-*, --line-width
+  /* 모션 */
+  --dur-*, --ease-*
+}
+```
+
+그리고 한 줄로: **성능 예산 = JS ___KB / 첫 인터랙션 ___초 / 폰트 패밀리 ___개**
+
+**정의하지 않은 토큰은 5단계에서 검사할 수 없다.** 쓰지 않을 항목은 "쓰지 않음"이라고 적어라 — 빈칸과 "없음"은 다르다.
+
+> 근거: research/references/03-trends-2026.md, 04-ai-slop-signatures.md (조사일 2026-08-20)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..f65508a
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,4522 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      '@changesets/cli':
+        specifier: ^2.27.10
+        version: 2.31.1(@types/node@22.20.1)
+      typescript:
+        specifier: ^5.7.2
+        version: 5.9.3
+
+  apps/site:
+    dependencies:
+      astro:
+        specifier: ^5.1.1
+        version: 5.18.2(@types/node@22.20.1)(rollup@4.62.4)(typescript@5.9.3)
+
+  packages/cli:
+    dependencies:
+      '@clack/prompts':
+        specifier: ^0.9.1
+        version: 0.9.1
+      picocolors:
+        specifier: ^1.1.1
+        version: 1.1.1
+    devDependencies:
+      '@designpaca/core':
+        specifier: workspace:*
+        version: link:../core
+      '@designpaca/skill':
+        specifier: workspace:*
+        version: link:../skill
+      '@types/node':
+        specifier: ^22.10.2
+        version: 22.20.1
+      tsup:
+        specifier: ^8.3.5
+        version: 8.5.1(postcss@8.5.26)(typescript@5.9.3)
+      typescript:
+        specifier: ^5.7.2
+        version: 5.9.3
+
+  packages/core:
+    devDependencies:
+      '@types/node':
+        specifier: ^22.10.2
+        version: 22.20.1
+      typescript:
+        specifier: ^5.7.2
+        version: 5.9.3
+
+  packages/skill: {}
+
+packages:
+
+  '@astrojs/compiler@2.13.1':
+    resolution: {integrity: sha512-f3FN83d2G/v32ipNClRKgYv30onQlMZX1vCeZMjPsMMPl1mDpmbl0+N5BYo4S/ofzqJyS5hvwacEo0CCVDn/Qg==}
+
+  '@astrojs/internal-helpers@0.7.6':
+    resolution: {integrity: sha512-GOle7smBWKfMSP8osUIGOlB5kaHdQLV3foCsf+5Q9Wsuu+C6Fs3Ez/ttXmhjZ1HkSgsogcM1RXSjjOVieHq16Q==}
+
+  '@astrojs/markdown-remark@6.3.11':
+    resolution: {integrity: sha512-hcaxX/5aC6lQgHeGh1i+aauvSwIT6cfyFjKWvExYSxUhZZBBdvCliOtu06gbQyhbe0pGJNoNmqNlQZ5zYUuIyQ==}
+
+  '@astrojs/prism@3.3.0':
+    resolution: {integrity: sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==}
+    engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
+
+  '@astrojs/telemetry@3.3.0':
+    resolution: {integrity: sha512-UFBgfeldP06qu6khs/yY+q1cDAaArM2/7AEIqQ9Cuvf7B1hNLq0xDrZkct+QoIGyjq56y8IaE2I3CTvG99mlhQ==}
+    engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
+
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.8':
+    resolution: {integrity: sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.8':
+    resolution: {integrity: sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@capsizecss/unpack@4.0.1':
+    resolution: {integrity: sha512-CuNiSqg7+e1cO/GjffyMOm5Tt2jUF9CWHHnvQ/UkqvtkGfHdgwEC0wpmq7fkN3gxwpRnrAN0WzO3vREKmNolMQ==}
+    engines: {node: '>=18'}
+
+  '@changesets/apply-release-plan@7.1.1':
+    resolution: {integrity: sha512-9qPCm/rLx/xoOFXIHGB229+4GOL76S4MC+7tyOuTsR6+1jYlfFDQORdvwR5hDA6y4FL2BPt3qpbcQIS+dW85LA==}
+
+  '@changesets/assemble-release-plan@6.0.10':
+    resolution: {integrity: sha512-rSDcqdJ9KbVyjpBIuCidhvZNIiVt1XaIYp73ycVQRIA5n/j6wQaEk0ChRLMUQ1vkxZe51PTQ9OIhbg6HQMW45A==}
+
+  '@changesets/changelog-git@0.2.1':
+    resolution: {integrity: sha512-x/xEleCFLH28c3bQeQIyeZf8lFXyDFVn1SgcBiR2Tw/r4IAWlk1fzxCEZ6NxQAjF2Nwtczoen3OA2qR+UawQ8Q==}
+
+  '@changesets/cli@2.31.1':
+    resolution: {integrity: sha512-uO05WTcRBwuVOJVSW8Cmpqw6q0WDL53ajGCMyszutvOe5toOnunbpM4jZzf+qxBOz7i0AzopZ8diBuewjmF40w==}
+    hasBin: true
+
+  '@changesets/config@3.1.4':
+    resolution: {integrity: sha512-pf0bvD/v6WI2cRlZ6hzpjtZdSlXDXMAJ+Iz7xfFzV4ZxJ8OGGAON+1qYc99ZPrijnt4xp3VGG7eNvAOGS24V1Q==}
+
+  '@changesets/errors@0.2.0':
+    resolution: {integrity: sha512-6BLOQUscTpZeGljvyQXlWOItQyU71kCdGz7Pi8H8zdw6BI0g3m43iL4xKUVPWtG+qrrL9DTjpdn8eYuCQSRpow==}
+
+  '@changesets/get-dependents-graph@2.1.4':
+    resolution: {integrity: sha512-ZsS00x6WvmHq3sQv8oCMwL0f/z3wbXCVuSVTJwCnnmbC/iBdNJGFx1EcbMG4PC6sXRyH69liM4A2WKXzn/kRPg==}
+
+  '@changesets/get-release-plan@4.0.16':
+    resolution: {integrity: sha512-2K5Om6CrMPm45rtvckfzWo7e9jOVCKLCnXia5eUPaURH7/LWzri7pK1TycdzAuAtehLkW7VPbWLCSExTHmiI6g==}
+
+  '@changesets/get-version-range-type@0.4.0':
+    resolution: {integrity: sha512-hwawtob9DryoGTpixy1D3ZXbGgJu1Rhr+ySH2PvTLHvkZuQ7sRT4oQwMh0hbqZH1weAooedEjRsbrWcGLCeyVQ==}
+
+  '@changesets/git@3.0.4':
+    resolution: {integrity: sha512-BXANzRFkX+XcC1q/d27NKvlJ1yf7PSAgi8JG6dt8EfbHFHi4neau7mufcSca5zRhwOL8j9s6EqsxmT+s+/E6Sw==}
+
+  '@changesets/logger@0.1.1':
+    resolution: {integrity: sha512-OQtR36ZlnuTxKqoW4Sv6x5YIhOmClRd5pWsjZsddYxpWs517R0HkyiefQPIytCVh4ZcC5x9XaG8KTdd5iRQUfg==}
+
+  '@changesets/parse@0.4.3':
+    resolution: {integrity: sha512-ZDmNc53+dXdWEv7fqIUSgRQOLYoUom5Z40gmLgmATmYR9NbL6FJJHwakcCpzaeCy+1D0m0n7mT4jj2B/MQPl7A==}
+
+  '@changesets/pre@2.0.2':
+    resolution: {integrity: sha512-HaL/gEyFVvkf9KFg6484wR9s0qjAXlZ8qWPDkTyKF6+zqjBe/I2mygg3MbpZ++hdi0ToqNUF8cjj7fBy0dg8Ug==}
+
+  '@changesets/read@0.6.7':
+    resolution: {integrity: sha512-D1G4AUYGrBEk8vj8MGwf75k9GpN6XL3wg8i42P2jZZwFLXnlr2Pn7r9yuQNbaMCarP7ZQWNJbV6XLeysAIMhTA==}
+
+  '@changesets/should-skip-package@0.1.2':
+    resolution: {integrity: sha512-qAK/WrqWLNCP22UDdBTMPH5f41elVDlsNyat180A33dWxuUDyNpg6fPi/FyTZwRriVjg0L8gnjJn2F9XAoF0qw==}
+
+  '@changesets/types@4.1.0':
+    resolution: {integrity: sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw==}
+
+  '@changesets/types@6.1.0':
+    resolution: {integrity: sha512-rKQcJ+o1nKNgeoYRHKOS07tAMNd3YSN0uHaJOZYjBAgxfV7TUE7JE+z4BzZdQwb5hKaYbayKN5KrYV7ODb2rAA==}
+
+  '@changesets/write@0.4.0':
+    resolution: {integrity: sha512-CdTLvIOPiCNuH71pyDu3rA+Q0n65cmAbXnwWH84rKGiFumFzkmHNT8KHTMEchcxN+Kl8I54xGUhJ7l3E7X396Q==}
+
+  '@clack/core@0.4.1':
+    resolution: {integrity: sha512-Pxhij4UXg8KSr7rPek6Zowm+5M22rbd2g1nfojHJkxp5YkFqiZ2+YLEM/XGVIzvGOcM0nqjIFxrpDwWRZYWYjA==}
+
+  '@clack/prompts@0.9.1':
+    resolution: {integrity: sha512-JIpyaboYZeWYlyP0H+OoPPxd6nqueG/CmN6ixBiNFsIDHREevjIf0n0Ohh5gr5C8pEDknzgvz+pIJ8dMhzWIeg==}
+
+  '@emnapi/runtime@1.11.3':
+    resolution: {integrity: sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==}
+
+  '@esbuild/aix-ppc64@0.25.12':
+    resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/aix-ppc64@0.27.7':
+    resolution: {integrity: sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.25.12':
+    resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm64@0.27.7':
+    resolution: {integrity: sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.25.12':
+    resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.7':
+    resolution: {integrity: sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.25.12':
+    resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.7':
+    resolution: {integrity: sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.25.12':
+    resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-arm64@0.27.7':
+    resolution: {integrity: sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.25.12':
+    resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.7':
+    resolution: {integrity: sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.25.12':
+    resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-arm64@0.27.7':
+    resolution: {integrity: sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.25.12':
+    resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.7':
+    resolution: {integrity: sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.25.12':
+    resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm64@0.27.7':
+    resolution: {integrity: sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.25.12':
+    resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.7':
+    resolution: {integrity: sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.25.12':
+    resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.7':
+    resolution: {integrity: sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.25.12':
+    resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.7':
+    resolution: {integrity: sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.25.12':
+    resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.7':
+    resolution: {integrity: sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.25.12':
+    resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.7':
+    resolution: {integrity: sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.25.12':
+    resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.7':
+    resolution: {integrity: sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.25.12':
+    resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.7':
+    resolution: {integrity: sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.25.12':
+    resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.7':
+    resolution: {integrity: sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-arm64@0.27.7':
+    resolution: {integrity: sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.25.12':
+    resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.7':
+    resolution: {integrity: sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-arm64@0.27.7':
+    resolution: {integrity: sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.25.12':
+    resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.7':
+    resolution: {integrity: sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.25.12':
+    resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/openharmony-arm64@0.27.7':
+    resolution: {integrity: sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.25.12':
+    resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/sunos-x64@0.27.7':
+    resolution: {integrity: sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.25.12':
+    resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-arm64@0.27.7':
+    resolution: {integrity: sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.25.12':
+    resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.7':
+    resolution: {integrity: sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.25.12':
+    resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.7':
+    resolution: {integrity: sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@img/colour@1.1.0':
+    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
+    engines: {node: '>=18'}
+
+  '@img/sharp-darwin-arm64@0.34.5':
+    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.34.5':
+    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linux-arm64@0.34.5':
+    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linux-arm@0.34.5':
+    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@img/sharp-linux-s390x@0.34.5':
+    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.34.5':
+    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-wasm32@0.34.5':
+    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.34.5':
+    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.34.5':
+    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.34.5':
+    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@inquirer/external-editor@1.0.3':
+    resolution: {integrity: sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@manypkg/find-root@1.1.0':
+    resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
+
+  '@manypkg/get-packages@1.1.3':
+    resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
+
+  '@napi-rs/lzma-linux-x64-gnu@1.5.1':
+    resolution: {integrity: sha512-oTXEIha4SsuXdTA4Iyskj0kpdx2yVXdhd75c2v3xGrHFfVMsbhTPZU/nMPL4sWKo4pBHm3aucLaqGlF696dTyQ==}
+    engines: {node: ^22.20 || ^24.12 || >=25}
+    cpu: [x64]
+    os: [linux]
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@oslojs/encoding@1.1.0':
+    resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
+
+  '@rollup/pluginutils@5.4.0':
+    resolution: {integrity: sha512-MfPp06CjRLfXQ3wY0R8vJDYBy/MvVcc9OulEfR0B8Iv9ko+GCNaRZ+EpJYFl27LhKsZK0o420sYCRHCjfCgeUg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/rollup-android-arm-eabi@4.62.4':
+    resolution: {integrity: sha512-RrPokAb7dmbxFoeO3TloqHyOjgye8RkBhSqmp4aJMIex4c9r46ZstPnleDQOq1t46VOVjwIuwNogIqbodV1Vvg==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.62.4':
+    resolution: {integrity: sha512-JKuJc+pnpks2pjy7L/N3v/cAkZxYlnmuZoD840ldbMI5KDbC4iO9NKwPKYdjYFCMAIIlBzYSFHxIJVYzRo2/8A==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.62.4':
+    resolution: {integrity: sha512-krw5uS2STmvJ02x0uTXHbqQNuz+9eZ1iw+qXk9dmW2gvV4jV7O2hEoOnuhFrpOPiel1mBFtqbxYZZtC46hXLOw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.62.4':
+    resolution: {integrity: sha512-wsTxtgApb4PrOsNJIm0FZ1h3WvCC+k9uxLJ4ad75hgoS4NiRes2SoJFlDAyMwiUY8IssDqGcHbXuN0sx1tfF1A==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.62.4':
+    resolution: {integrity: sha512-GUOnQlyZe3yAXhWOtOMsn5Qkrv5E5mZXa0thbARWi5Ei2szlVXJFQhddZ4HbAzh8q92w5twp+CQvs/eFanz9YQ==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.62.4':
+    resolution: {integrity: sha512-/Y7f3QuxjzPKsjA/rfEDa3+0vXqyjmJ50Ln8dPpCmWkKTrUoWHG1cWhTqaAMLob2m2nESWuC7yGrREz019Ztqg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.62.4':
+    resolution: {integrity: sha512-81wiiX3v7aqy+T+bT61TJ78yJjRquqFFTTbAPt08imfQQzkPIW8t6aJbkTagtCCrXMNc9D66+geqlK7ydLPNqA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.62.4':
+    resolution: {integrity: sha512-9kmDIvNZqdoHOBZgNtpTBeLWYO/LVipM3H/j62P8848/l/VPEQL6N3uxU9pvP1oZAsXyC2MEnFP3ovRjo7WYNQ==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.62.4':
+    resolution: {integrity: sha512-CcnXHWnXg69g+DX5VWL3FHts3qMRN2uVEHX+BZvGLdd07/gXkn3ePjYtO1LDJvxkGKVHMclKBRa1QUTH+6toYQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.62.4':
+    resolution: {integrity: sha512-iFOibiHnTRuhrWLlRsOQFdZJJIa7S8OwkneJr4ocALP16u5yk6lWLINFwhHaEqBFMsKDUZofLkGos7+CPzGB3g==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-gnu@4.62.4':
+    resolution: {integrity: sha512-XnWYMI7euHlb5a871xPja+Gm7DRCFU+FGRrtS2sMq9N8FvqtpagUy6gD4YOemC5MRk9xbh8+jYMEJbigFQwsgA==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-musl@4.62.4':
+    resolution: {integrity: sha512-qGDAlO0U8xedCcsdRm9oaoQY8DAx/QT7uIxJWhCdx0ceIWX783UC9QSYkdpzAe29wNiVfp24+bZdQmn49o45SQ==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.62.4':
+    resolution: {integrity: sha512-ru4H6ezD7ysA5EiEK6qkkaEb4modH8CTej6kUy/gQi20u3kB3G7Zn8snXXkeJSCOFKG/rbPPtM/+9Wgas1961w==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-musl@4.62.4':
+    resolution: {integrity: sha512-2W4MO5WQVJnbJaZdvDb9rhBDuFU1nKIepPFpJUBsTh2k1YY2g+ODViaWuyOAjQ5cOP7NvrvLzt3wvHOoiAvc7w==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.62.4':
+    resolution: {integrity: sha512-+fxjfuoAmVMCYV5QyjoIpu0cp5DOiOTeqYFk1AVaxGr+/ravWLX89XfQmptsoWcaVy/TGf2hexzbUOrCQIL1CQ==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-musl@4.62.4':
+    resolution: {integrity: sha512-jTn8JfHGL4djjFxPuM06LmNUJDsst2jeVlsd9OmIH6zc5sC9K6rIuO4YajXatLUpBmBKl6b35ro1QZocLi+tcA==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.62.4':
+    resolution: {integrity: sha512-oCJCJL4pXsoDcP2QZ+JVlPTIRc6266zsIaeJJsWImmF7HO0W8nb6HuSgZlMWxJwaPf8ehbSw8yo0EUw925hKsA==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.62.4':
+    resolution: {integrity: sha512-W69hukhZ3KKNRCaMIEzKvcFye42hh0FE1+YoYaf5+Ikacuftoco6yO/xouz0hc5d5W/s3yBro5jRiuEE/Q5vUw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.62.4':
+    resolution: {integrity: sha512-qiXbGG2jkjXhzXpsFZSR2Xpb8DN/UaxYsbb/STbuR/6fpaDgRmmaq1B/LmtF2wQFOFOSsK2jdE0RZ3a0zHn4QA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-openbsd-x64@4.62.4':
+    resolution: {integrity: sha512-nWeM//hxv8mIo6jD7Hu4o48DVmV9pbV6gsKaWU+4NFyqHoPKwrkRiZGLKUhOBk8qNmDmpwFtPKg80Bo/Tn4xiQ==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.62.4':
+    resolution: {integrity: sha512-s62SQ/vgsRSvMwDkOEfTqfgASF0f26ZNaQuTA6Aok5lrikf89yI2W0gFHvZb2Jpgc6N8JnOKZgCK2iciO3CsxQ==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.62.4':
+    resolution: {integrity: sha512-J6wGf8TVGbXJq+HH+ttTvrcfNKPbuZecV6KT1B8I18BC5IURUh5kl4Yl5OEP5eFIUoI5BWxCsyYMhFsDx8kekw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.62.4':
+    resolution: {integrity: sha512-zmfrQd/0wu6oJs8Vq8KwY/YtsKSsLtKe/HwAP4Wqy8LhWjeT55fHRAkOhYQ12wI3ayS4Tt12d5CDRD7N96SAYQ==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.62.4':
+    resolution: {integrity: sha512-qPzHqdj9rfUD+w79dtE07zi/kFwKyCJqplp5K5ygeLTp7jLpAoc16OAH39HSmRC9UpozaecsleI8uAdEj6v2yw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.62.4':
+    resolution: {integrity: sha512-zD6NdeWEByGE9QF9vCrlJ5YQB4oq9q91kPZS37Jwj5hOkvR1lTBSpsKhKDw4IJtbQ35LsTS1HD9DZYGKIshU1Q==}
+    cpu: [x64]
+    os: [win32]
+
+  '@shikijs/core@3.23.0':
+    resolution: {integrity: sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA==}
+
+  '@shikijs/engine-javascript@3.23.0':
+    resolution: {integrity: sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA==}
+
+  '@shikijs/engine-oniguruma@3.23.0':
+    resolution: {integrity: sha512-1nWINwKXxKKLqPibT5f4pAFLej9oZzQTsby8942OTlsJzOBZ0MWKiwzMsd+jhzu8YPCHAswGnnN1YtQfirL35g==}
+
+  '@shikijs/langs@3.23.0':
+    resolution: {integrity: sha512-2Ep4W3Re5aB1/62RSYQInK9mM3HsLeB91cHqznAJMuylqjzNVAVCMnNWRHFtcNHXsoNRayP9z1qj4Sq3nMqYXg==}
+
+  '@shikijs/themes@3.23.0':
+    resolution: {integrity: sha512-5qySYa1ZgAT18HR/ypENL9cUSGOeI2x+4IvYJu4JgVJdizn6kG4ia5Q1jDEOi7gTbN4RbuYtmHh0W3eccOrjMA==}
+
+  '@shikijs/types@3.23.0':
+    resolution: {integrity: sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ==}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
+  '@types/debug@4.1.13':
+    resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
+
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
+  '@types/hast@3.0.5':
+    resolution: {integrity: sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==}
+
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
+  '@types/nlcst@2.0.3':
+    resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==}
+
+  '@types/node@12.20.55':
+    resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
+
+  '@types/node@22.20.1':
+    resolution: {integrity: sha512-EANqOCF9QFyra+4pfxUcX9STKJpCLjMbObVzljIJomAWSnuSIEAvyzEU53GaajbXJEgdh0iEcPL+DGvpUd4k1Q==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
+  '@ungap/structured-clone@1.3.3':
+    resolution: {integrity: sha512-60YRaenCQcVjYEKOcG824+DRGGIQ3VKErcBoAEDJZz5bKIs2ZG+X/H9Nk+Q6EVkwJk5QNApxbrc5QtBSwtrXAg==}
+
+  acorn@8.18.0:
+    resolution: {integrity: sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  ansi-align@3.0.1:
+    resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
+
+  ansi-colors@4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.3.0:
+    resolution: {integrity: sha512-WpDfL7NO6j7tH88IDBNVdUJxDh9nmCteAVW9dsep846XdwF4naCBK+/tGLX3KJgcpgMRXCFlTM2hKGoK9FsdrQ==}
+    engines: {node: '>=12'}
+
+  ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+    engines: {node: '>=12'}
+
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  argparse@1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  array-iterate@2.0.1:
+    resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  astro@5.18.2:
+    resolution: {integrity: sha512-TnFwLnAXty5MXKPDGuKXqK4AMBXG+FH6RUdK7Oyc3gyfNoFIthT+4eRbzOK43bdRlLaZuxgciDSjgtggZ3OtGQ==}
+    engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
+    hasBin: true
+
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
+  base-64@1.0.0:
+    resolution: {integrity: sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==}
+
+  better-path-resolve@1.0.0:
+    resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
+    engines: {node: '>=4'}
+
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
+  boxen@8.0.1:
+    resolution: {integrity: sha512-F3PH5k5juxom4xktynS7MoFY+NUWH5LC4CnH11YB8NPew+HLpmBLCybSAEyb2F+4pRXhuhWqFesoQd6DAyc2hw==}
+    engines: {node: '>=18'}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  bundle-require@5.1.0:
+    resolution: {integrity: sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    peerDependencies:
+      esbuild: '>=0.18'
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
+  camelcase@8.0.0:
+    resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
+    engines: {node: '>=16'}
+
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  chardet@2.2.0:
+    resolution: {integrity: sha512-rddelWYNPRrXq6PtNEN2S3f6t9ILzvqaN5pVgi4kqt9jHQaXIial9PznB5iSPVlQSLNaaH22ItWz3EJtQ10+OA==}
+
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
+  chokidar@5.0.0:
+    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
+    engines: {node: '>= 20.19.0'}
+
+  ci-info@4.4.0:
+    resolution: {integrity: sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==}
+    engines: {node: '>=8'}
+
+  cli-boxes@3.0.0:
+    resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
+    engines: {node: '>=10'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  common-ancestor-path@1.0.1:
+    resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==}
+
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  cookie-es@1.2.3:
+    resolution: {integrity: sha512-lXVyvUvrNXblMqzIRrxHb57UUVmqsSWlxqt3XIjCkUP0wDAf6uicO6KMbEgYrMNtEvWgWHwe42CKxPu9MYAnWw==}
+
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  crossws@0.3.5:
+    resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
+
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
+  css-tree@3.2.1:
+    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decode-named-character-reference@1.3.0:
+    resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
+
+  defu@6.1.7:
+    resolution: {integrity: sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  destr@2.0.5:
+    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
+
+  detect-indent@6.1.0:
+    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
+    engines: {node: '>=8'}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  deterministic-object-hash@2.0.2:
+    resolution: {integrity: sha512-KxektNH63SrbfUyDiwXqRb1rLwKt33AmMv+5Nhsw1kqZ13SJBRTgZHtGbE+hH3a1mVW1cz+4pqSWVPAtLVXTzQ==}
+    engines: {node: '>=18'}
+
+  devalue@5.9.0:
+    resolution: {integrity: sha512-RWrqdArjvPbsATEhOPUo6Wndc/iWnkWKlhIrdlF3zMMYo/c3CVtoaVAyLtWxz5h8nSlkHzxnzV2uLydPXmtF+A==}
+
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
+  diff@8.0.4:
+    resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
+    engines: {node: '>=0.3.1'}
+
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
+  dset@3.1.4:
+    resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==}
+    engines: {node: '>=4'}
+
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  enquirer@2.4.1:
+    resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
+    engines: {node: '>=8.6'}
+
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  esbuild@0.25.12:
+    resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  esbuild@0.27.7:
+    resolution: {integrity: sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  eventemitter3@5.0.4:
+    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
+
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
+  extendable-error@0.1.7:
+    resolution: {integrity: sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
+  fix-dts-default-cjs-exports@1.0.1:
+    resolution: {integrity: sha512-pVIECanWFC61Hzl2+oOCtoJ3F17kglZC/6N94eRWycFgBH35hHx0Li604ZIzhseh97mf2p0cv7vVrOZGoqhlEg==}
+
+  flattie@1.1.1:
+    resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==}
+    engines: {node: '>=8'}
+
+  fontace@0.4.1:
+    resolution: {integrity: sha512-lDMvbAzSnHmbYMTEld5qdtvNH2/pWpICOqpean9IgC7vUbUJc3k+k5Dokp85CegamqQpFbXf0rAVkbzpyTA8aw==}
+
+  fontkitten@1.0.3:
+    resolution: {integrity: sha512-Wp1zXWPVUPBmfoa3Cqc9ctaKuzKAV6uLstRqlR56kSjplf5uAce+qeyYym7F+PHbGTk+tCEdkCW6RD7DX/gBZw==}
+    engines: {node: '>=20'}
+
+  fs-extra@7.0.1:
+    resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
+    engines: {node: '>=6 <7 || >=8'}
+
+  fs-extra@8.1.0:
+    resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
+    engines: {node: '>=6 <7 || >=8'}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  get-east-asian-width@1.6.0:
+    resolution: {integrity: sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==}
+    engines: {node: '>=18'}
+
+  github-slugger@2.0.0:
+    resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  h3@1.15.11:
+    resolution: {integrity: sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg==}
+
+  hast-util-from-html@2.0.3:
+    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
+
+  hast-util-from-parse5@8.0.3:
+    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
+
+  hast-util-is-element@3.0.0:
+    resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
+
+  hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+
+  hast-util-raw@9.1.0:
+    resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==}
+
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-to-parse5@8.0.1:
+    resolution: {integrity: sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==}
+
+  hast-util-to-text@4.0.2:
+    resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  hastscript@9.0.1:
+    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
+
+  html-escaper@3.0.3:
+    resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
+
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
+  http-cache-semantics@4.2.0:
+    resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
+
+  human-id@4.2.1:
+    resolution: {integrity: sha512-zPGsiS+dWoTZtZ4AtpA9Y+BdSFSNWvnouNlWNoUFyAM6xHOHmdCvqO3k8AIbdamCOv4gUFUVNPf6rJFfc4UiJw==}
+    hasBin: true
+
+  iconv-lite@0.7.3:
+    resolution: {integrity: sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==}
+    engines: {node: '>=0.10.0'}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+
+  iron-webcrypto@1.2.1:
+    resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
+
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-subdir@1.2.0:
+    resolution: {integrity: sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw==}
+    engines: {node: '>=4'}
+
+  is-windows@1.0.2:
+    resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
+    engines: {node: '>=0.10.0'}
+
+  is-wsl@3.1.1:
+    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
+    engines: {node: '>=16'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  joycon@3.1.1:
+    resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
+    engines: {node: '>=10'}
+
+  js-yaml@3.15.1:
+    resolution: {integrity: sha512-S99WuO3HlhO3XN41EtYUNl9zzXjoJx7QvmipxsJVxtCBT0YHEFy+iOJhjSvrmV12nYhWpZaM8lPHkJm0yUMbag==}
+    hasBin: true
+
+  js-yaml@4.3.1:
+    resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
+    hasBin: true
+
+  jsonfile@4.0.0:
+    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
+
+  kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  load-tsconfig@0.2.5:
+    resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
+  lodash.startcase@4.4.0:
+    resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
+
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
+  lru-cache@11.5.2:
+    resolution: {integrity: sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==}
+    engines: {node: 20 || >=22}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  magicast@0.5.4:
+    resolution: {integrity: sha512-llBEhWm1SacoRwgHUoQJYtwp4PBLF4faQi5TCpIGyGs9n4y5+juI0tDgyKIfpqxckRHaHzouUEph3THklWh03w==}
+
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
+  mdast-util-definitions@6.0.0:
+    resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==}
+
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+
+  mdast-util-from-markdown@2.0.3:
+    resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+
+  mdn-data@2.27.1:
+    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mlly@1.8.2:
+    resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
+
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  nanoid@3.3.18:
+    resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  neotraverse@0.6.18:
+    resolution: {integrity: sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==}
+    engines: {node: '>= 10'}
+
+  nlcst-to-string@4.0.0:
+    resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==}
+
+  node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
+
+  node-mock-http@1.0.5:
+    resolution: {integrity: sha512-KQyt/wLjG3TAc7DOUhpqWzgd4ERxR80JOlTK5VE5R1S12IaPVN5qkj4klBce9HPG1Njuup4Sb5bljaT34lIyjw==}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  ofetch@1.5.1:
+    resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
+
+  ohash@2.0.12:
+    resolution: {integrity: sha512-65S/5gk9YSsaRjcyf7Nfa6h/d3E8/1gslpXfI4W7Dxn/oap8IKRuNT5VXkLQ1YFKIEg4apRY4Pj6aiwFzrDdmw==}
+
+  oniguruma-parser@0.12.2:
+    resolution: {integrity: sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==}
+
+  oniguruma-to-es@4.3.6:
+    resolution: {integrity: sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==}
+
+  outdent@0.5.0:
+    resolution: {integrity: sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==}
+
+  p-filter@2.1.0:
+    resolution: {integrity: sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==}
+    engines: {node: '>=8'}
+
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
+  p-limit@6.2.0:
+    resolution: {integrity: sha512-kuUqqHNUqoIWp/c467RI4X6mmyuojY5jGutNU0wVTmEOOfcuwLqyMVoAi9MKi2Ak+5i9+nhmrK4ufZE8069kHA==}
+    engines: {node: '>=18'}
+
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
+  p-map@2.1.0:
+    resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
+    engines: {node: '>=6'}
+
+  p-queue@8.1.1:
+    resolution: {integrity: sha512-aNZ+VfjobsWryoiPnEApGGmf5WmNsCo9xu8dfaYamG5qaLP7ClhLN6NgsFe6SwJ2UbLEBK5dv9x8Mn5+RVhMWQ==}
+    engines: {node: '>=18'}
+
+  p-timeout@6.1.4:
+    resolution: {integrity: sha512-MyIV3ZA/PmyBN/ud8vV9XzwTrNtR4jFrObymZYnZqMmW0zA8Z17vnT0rBgFE/TlohB+YCHqXMgZzb3Csp49vqg==}
+    engines: {node: '>=14.16'}
+
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
+  package-manager-detector@0.2.11:
+    resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==}
+
+  package-manager-detector@1.8.0:
+    resolution: {integrity: sha512-yQA4H19AmPEoMUeavPMDIe1higySl/gH/yaQrkT/s07Qp+7pp2hYz30N3z2l5BkjVkF9Ow6o0wjJamm2y7Sn0A==}
+
+  parse-latin@7.0.0:
+    resolution: {integrity: sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ==}
+
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  piccolore@0.1.3:
+    resolution: {integrity: sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.5:
+    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
+    engines: {node: '>=12'}
+
+  pify@4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  postcss-load-config@6.0.1:
+    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      jiti: '>=1.21.0'
+      postcss: '>=8.0.9'
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+      postcss:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  postcss@8.5.26:
+    resolution: {integrity: sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prettier@2.8.8:
+    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
+  prismjs@1.30.0:
+    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
+    engines: {node: '>=6'}
+
+  prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+
+  property-information@7.2.0:
+    resolution: {integrity: sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==}
+
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  radix3@1.1.2:
+    resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
+
+  read-yaml-file@1.1.0:
+    resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
+    engines: {node: '>=6'}
+
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
+  readdirp@5.1.1:
+    resolution: {integrity: sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==}
+    engines: {node: '>= 20.19.0'}
+
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+
+  rehype-parse@9.0.1:
+    resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
+
+  rehype-raw@7.0.0:
+    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
+
+  rehype-stringify@10.0.1:
+    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
+
+  rehype@13.0.2:
+    resolution: {integrity: sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==}
+
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+
+  remark-smartypants@3.0.3:
+    resolution: {integrity: sha512-gCaK+ndZ0hYezlqFegHFCVh2CQemsi0Npdh1qVM9bxlUFknjkbP6VmojWhddOCrbK0PbbacmYLWfTULRiT1eWA==}
+    engines: {node: '>=16.0.0'}
+
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+
+  retext-latin@4.0.0:
+    resolution: {integrity: sha512-hv9woG7Fy0M9IlRQloq/N6atV82NxLGveq+3H2WOi79dtIYWN8OaxogDm77f8YnVXJL2VD3bbqowu5E3EMhBYA==}
+
+  retext-smartypants@6.2.0:
+    resolution: {integrity: sha512-kk0jOU7+zGv//kfjXEBjdIryL1Acl4i9XNkHxtM7Tm5lFiCog576fjNC9hjoR7LTKQ0DsPWy09JummSsH1uqfQ==}
+
+  retext-stringify@4.0.0:
+    resolution: {integrity: sha512-rtfN/0o8kL1e+78+uxPTqu1Klt0yPzKuQ2BfWwwfgIUSayyzxpM1PJzkKt4V8803uB9qSy32MvI7Xep9khTpiA==}
+
+  retext@9.0.0:
+    resolution: {integrity: sha512-sbMDcpHCNjvlheSgMfEcVrZko3cDzdbe1x/e7G66dFp0Ff7Mldvi2uv6JkJQzdRcvLYE8CA8Oe8siQx8ZOgTcA==}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rollup@4.62.4:
+    resolution: {integrity: sha512-RXOqwaPsBGjMNMa4sQjDjHieHEZDFoj/Rdr46l2MU5DfEs16wHJPC2RPTPHWhNl+M3aI472LLqFkFKut4SblOg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  sax@1.6.1:
+    resolution: {integrity: sha512-42tBVwLWnaQvW5zc4HbZrTuWccECCZfBi92FDuwtqxasH+JbPB3/FOKb1m222K42R4WxuxzzMsTswfzgtSu64Q==}
+    engines: {node: '>=11.0.0'}
+
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  sharp@0.34.5:
+    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  shiki@3.23.0:
+    resolution: {integrity: sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  smol-toml@1.8.0:
+    resolution: {integrity: sha512-kCZr2V3ch9i00x8zXRhjUNVcjG9ijES5dDudkXvUVCT5QlJNQWElSJdZqyPemffHoLNUYwOcou0Fy+ojN0uHSQ==}
+    engines: {node: '>= 18'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
+  spawndamnit@3.0.1:
+    resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
+
+  sprintf-js@1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.2.0:
+    resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
+    engines: {node: '>=12'}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  sucrase@3.35.1:
+    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  svgo@4.0.2:
+    resolution: {integrity: sha512-ekx94z1rRc5LDi6oSUaeRnYhd0UOJxdtQCL2rF8xpWxD3TPAsISWOrxezqGovqS38GRZOdpDfvQe3ts6F7nsng==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  term-size@2.2.1:
+    resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
+    engines: {node: '>=8'}
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  tiny-inflate@1.0.3:
+    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
+  tinyexec@1.3.0:
+    resolution: {integrity: sha512-QKAl9m8gWWGHV8jZcPeym6j+XULi6tOf1mT83WYJ4Lk2ytW/uwAWkrP0uFsdoYMdueVJ0qs26wZ+23xeB4ibNQ==}
+    engines: {node: '>=18'}
+
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  tree-kill@1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  tsconfck@3.1.6:
+    resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
+    engines: {node: ^18 || >=20}
+    deprecated: unmaintained
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tsup@8.5.1:
+    resolution: {integrity: sha512-xtgkqwdhpKWr3tKPmCkvYmS9xnQK3m3XgxZHwSUjvfTjp7YfXe5tT3GgWi0F2N+ZSMsOeWeZFh7ZZFg5iPhing==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      '@microsoft/api-extractor': ^7.36.0
+      '@swc/core': ^1
+      postcss: ^8.4.12
+      typescript: '>=4.5.0'
+    peerDependenciesMeta:
+      '@microsoft/api-extractor':
+        optional: true
+      '@swc/core':
+        optional: true
+      postcss:
+        optional: true
+      typescript:
+        optional: true
+
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.6.4:
+    resolution: {integrity: sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==}
+
+  ultrahtml@1.7.0:
+    resolution: {integrity: sha512-2xRd0VHoAQE4M+vF/DvFFB7pUV0ZxTW1TLi7lHQWnF/Sb5TPeEUV/l+hxcNnGO00ZXGnR0voCMmYRKQf+rvJ2g==}
+
+  uncrypto@0.1.3:
+    resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  undici@8.10.0:
+    resolution: {integrity: sha512-HvltHd7avK13QIw/oLe4qoOLyoVSoafqJ2jYOrtMRBkbYT31eiBQ8O0ehRKZiEZCMEyLFQNIADpgCWC5fALvYQ==}
+    engines: {node: '>=22.19.0'}
+
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unifont@0.7.5:
+    resolution: {integrity: sha512-ULe/Cs+ZIsq+dcFofNkhqielCrUJnb5mr+Yc4EBM2VlL+6OZR6+cjtI2mT1bJvRBrVncqHAbLURxmPLcCXzWMg==}
+
+  unist-util-find-after@5.0.0:
+    resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
+
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-modify-children@4.0.0:
+    resolution: {integrity: sha512-+tdN5fGNddvsQdIzUF3Xx82CU9sMM+fA0dLgR9vOmT0oPT2jH+P1nd5lSqfCfXAw+93NhcXNY2qqvTUtE4cQkw==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-remove-position@5.0.0:
+    resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-children@3.0.0:
+    resolution: {integrity: sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA==}
+
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
+
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
+
+  universalify@0.1.2:
+    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
+    engines: {node: '>= 4.0.0'}
+
+  unstorage@1.17.5:
+    resolution: {integrity: sha512-0i3iqvRfx29hkNntHyQvJTpf5W9dQ9ZadSoRU8+xVlhVtT7jAX57fazYO9EHvcRCfBCyi5YRya7XCDOsbTgkPg==}
+    peerDependencies:
+      '@azure/app-configuration': ^1.8.0
+      '@azure/cosmos': ^4.2.0
+      '@azure/data-tables': ^13.3.0
+      '@azure/identity': ^4.6.0
+      '@azure/keyvault-secrets': ^4.9.0
+      '@azure/storage-blob': ^12.26.0
+      '@capacitor/preferences': ^6 || ^7 || ^8
+      '@deno/kv': '>=0.9.0'
+      '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0
+      '@planetscale/database': ^1.19.0
+      '@upstash/redis': ^1.34.3
+      '@vercel/blob': '>=0.27.1'
+      '@vercel/functions': ^2.2.12 || ^3.0.0
+      '@vercel/kv': ^1 || ^2 || ^3
+      aws4fetch: ^1.0.20
+      db0: '>=0.2.1'
+      idb-keyval: ^6.2.1
+      ioredis: ^5.4.2
+      uploadthing: ^7.4.4
+    peerDependenciesMeta:
+      '@azure/app-configuration':
+        optional: true
+      '@azure/cosmos':
+        optional: true
+      '@azure/data-tables':
+        optional: true
+      '@azure/identity':
+        optional: true
+      '@azure/keyvault-secrets':
+        optional: true
+      '@azure/storage-blob':
+        optional: true
+      '@capacitor/preferences':
+        optional: true
+      '@deno/kv':
+        optional: true
+      '@netlify/blobs':
+        optional: true
+      '@planetscale/database':
+        optional: true
+      '@upstash/redis':
+        optional: true
+      '@vercel/blob':
+        optional: true
+      '@vercel/functions':
+        optional: true
+      '@vercel/kv':
+        optional: true
+      aws4fetch:
+        optional: true
+      db0:
+        optional: true
+      idb-keyval:
+        optional: true
+      ioredis:
+        optional: true
+      uploadthing:
+        optional: true
+
+  vfile-location@5.0.3:
+    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
+
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  vite@6.4.3:
+    resolution: {integrity: sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitefu@1.1.3:
+    resolution: {integrity: sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  web-namespaces@2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+
+  which-pm-runs@1.1.0:
+    resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==}
+    engines: {node: '>=4'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  widest-line@5.0.0:
+    resolution: {integrity: sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==}
+    engines: {node: '>=18'}
+
+  wrap-ansi@9.0.2:
+    resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
+    engines: {node: '>=18'}
+
+  xxhash-wasm@1.1.0:
+    resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yocto-queue@1.2.2:
+    resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==}
+    engines: {node: '>=12.20'}
+
+  yocto-spinner@0.2.3:
+    resolution: {integrity: sha512-sqBChb33loEnkoXte1bLg45bEBsOP9N1kzQh5JZNKj/0rik4zAPTNSAVPj3uQAdc6slYJ0Ksc403G2XgxsJQFQ==}
+    engines: {node: '>=18.19'}
+
+  yoctocolors@2.2.0:
+    resolution: {integrity: sha512-xYqdZFUK/VYazNl/oCDYN+3WloWQwMfZxBoiNt6qNyk+xfOdi598muWE42rNZFp1kNOiqW936q5RhUdnpqElSg==}
+    engines: {node: '>=18'}
+
+  zod-to-json-schema@3.25.2:
+    resolution: {integrity: sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==}
+    peerDependencies:
+      zod: ^3.25.28 || ^4
+
+  zod-to-ts@1.2.0:
+    resolution: {integrity: sha512-x30XE43V+InwGpvTySRNz9kB7qFU8DlyEy7BsSTCHPH1R0QasMmHWZDCzYm6bVXtj/9NNJAZF3jW8rzFvH5OFA==}
+    peerDependencies:
+      typescript: ^4.9.4 || ^5.0.2
+      zod: ^3
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
+snapshots:
+
+  '@astrojs/compiler@2.13.1': {}
+
+  '@astrojs/internal-helpers@0.7.6': {}
+
+  '@astrojs/markdown-remark@6.3.11':
+    dependencies:
+      '@astrojs/internal-helpers': 0.7.6
+      '@astrojs/prism': 3.3.0
+      github-slugger: 2.0.0
+      hast-util-from-html: 2.0.3
+      hast-util-to-text: 4.0.2
+      import-meta-resolve: 4.2.0
+      js-yaml: 4.3.1
+      mdast-util-definitions: 6.0.0
+      rehype-raw: 7.0.0
+      rehype-stringify: 10.0.1
+      remark-gfm: 4.0.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      remark-smartypants: 3.0.3
+      shiki: 3.23.0
+      smol-toml: 1.8.0
+      unified: 11.0.5
+      unist-util-remove-position: 5.0.0
+      unist-util-visit: 5.1.0
+      unist-util-visit-parents: 6.0.2
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@astrojs/prism@3.3.0':
+    dependencies:
+      prismjs: 1.30.0
+
+  '@astrojs/telemetry@3.3.0':
+    dependencies:
+      ci-info: 4.4.0
+      debug: 4.4.3
+      dlv: 1.1.3
+      dset: 3.1.4
+      is-docker: 3.0.0
+      is-wsl: 3.1.1
+      which-pm-runs: 1.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.29.7': {}
+
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/parser@7.29.8':
+    dependencies:
+      '@babel/types': 7.29.8
+
+  '@babel/runtime@7.29.7': {}
+
+  '@babel/types@7.29.8':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@capsizecss/unpack@4.0.1':
+    dependencies:
+      fontkitten: 1.0.3
+
+  '@changesets/apply-release-plan@7.1.1':
+    dependencies:
+      '@changesets/config': 3.1.4
+      '@changesets/get-version-range-type': 0.4.0
+      '@changesets/git': 3.0.4
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      detect-indent: 6.1.0
+      fs-extra: 7.0.1
+      lodash.startcase: 4.4.0
+      outdent: 0.5.0
+      prettier: 2.8.8
+      resolve-from: 5.0.0
+      semver: 7.8.5
+
+  '@changesets/assemble-release-plan@6.0.10':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.4
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      semver: 7.8.5
+
+  '@changesets/changelog-git@0.2.1':
+    dependencies:
+      '@changesets/types': 6.1.0
+
+  '@changesets/cli@2.31.1(@types/node@22.20.1)':
+    dependencies:
+      '@changesets/apply-release-plan': 7.1.1
+      '@changesets/assemble-release-plan': 6.0.10
+      '@changesets/changelog-git': 0.2.1
+      '@changesets/config': 3.1.4
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.4
+      '@changesets/get-release-plan': 4.0.16
+      '@changesets/git': 3.0.4
+      '@changesets/logger': 0.1.1
+      '@changesets/pre': 2.0.2
+      '@changesets/read': 0.6.7
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@changesets/write': 0.4.0
+      '@inquirer/external-editor': 1.0.3(@types/node@22.20.1)
+      '@manypkg/get-packages': 1.1.3
+      ansi-colors: 4.1.3
+      enquirer: 2.4.1
+      fs-extra: 7.0.1
+      mri: 1.2.0
+      package-manager-detector: 0.2.11
+      picocolors: 1.1.1
+      resolve-from: 5.0.0
+      semver: 7.8.5
+      spawndamnit: 3.0.1
+      term-size: 2.2.1
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@changesets/config@3.1.4':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.4
+      '@changesets/logger': 0.1.1
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      fs-extra: 7.0.1
+      micromatch: 4.0.8
+
+  '@changesets/errors@0.2.0':
+    dependencies:
+      extendable-error: 0.1.7
+
+  '@changesets/get-dependents-graph@2.1.4':
+    dependencies:
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      picocolors: 1.1.1
+      semver: 7.8.5
+
+  '@changesets/get-release-plan@4.0.16':
+    dependencies:
+      '@changesets/assemble-release-plan': 6.0.10
+      '@changesets/config': 3.1.4
+      '@changesets/pre': 2.0.2
+      '@changesets/read': 0.6.7
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+
+  '@changesets/get-version-range-type@0.4.0': {}
+
+  '@changesets/git@3.0.4':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@manypkg/get-packages': 1.1.3
+      is-subdir: 1.2.0
+      micromatch: 4.0.8
+      spawndamnit: 3.0.1
+
+  '@changesets/logger@0.1.1':
+    dependencies:
+      picocolors: 1.1.1
+
+  '@changesets/parse@0.4.3':
+    dependencies:
+      '@changesets/types': 6.1.0
+      js-yaml: 4.3.1
+
+  '@changesets/pre@2.0.2':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      fs-extra: 7.0.1
+
+  '@changesets/read@0.6.7':
+    dependencies:
+      '@changesets/git': 3.0.4
+      '@changesets/logger': 0.1.1
+      '@changesets/parse': 0.4.3
+      '@changesets/types': 6.1.0
+      fs-extra: 7.0.1
+      p-filter: 2.1.0
+      picocolors: 1.1.1
+
+  '@changesets/should-skip-package@0.1.2':
+    dependencies:
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+
+  '@changesets/types@4.1.0': {}
+
+  '@changesets/types@6.1.0': {}
+
+  '@changesets/write@0.4.0':
+    dependencies:
+      '@changesets/types': 6.1.0
+      fs-extra: 7.0.1
+      human-id: 4.2.1
+      prettier: 2.8.8
+
+  '@clack/core@0.4.1':
+    dependencies:
+      picocolors: 1.1.1
+      sisteransi: 1.0.5
+
+  '@clack/prompts@0.9.1':
+    dependencies:
+      '@clack/core': 0.4.1
+      picocolors: 1.1.1
+      sisteransi: 1.0.5
+
+  '@emnapi/runtime@1.11.3':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@esbuild/aix-ppc64@0.25.12':
+    optional: true
+
+  '@esbuild/aix-ppc64@0.27.7':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/android-arm@0.25.12':
+    optional: true
+
+  '@esbuild/android-arm@0.27.7':
+    optional: true
+
+  '@esbuild/android-x64@0.25.12':
+    optional: true
+
+  '@esbuild/android-x64@0.27.7':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.12':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.7':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.12':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.7':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.12':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.7':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.12':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.7':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.12':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.7':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.7':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.12':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.7':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.12':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.7':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.12':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.7':
+    optional: true
+
+  '@img/colour@1.1.0':
+    optional: true
+
+  '@img/sharp-darwin-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-darwin-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-arm@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-s390x@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-wasm32@0.34.5':
+    dependencies:
+      '@emnapi/runtime': 1.11.3
+    optional: true
+
+  '@img/sharp-win32-arm64@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-ia32@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-x64@0.34.5':
+    optional: true
+
+  '@inquirer/external-editor@1.0.3(@types/node@22.20.1)':
+    dependencies:
+      chardet: 2.2.0
+      iconv-lite: 0.7.3
+    optionalDependencies:
+      '@types/node': 22.20.1
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@manypkg/find-root@1.1.0':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@types/node': 12.20.55
+      find-up: 4.1.0
+      fs-extra: 8.1.0
+
+  '@manypkg/get-packages@1.1.3':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@changesets/types': 4.1.0
+      '@manypkg/find-root': 1.1.0
+      fs-extra: 8.1.0
+      globby: 11.1.0
+      read-yaml-file: 1.1.0
+
+  '@napi-rs/lzma-linux-x64-gnu@1.5.1':
+    optional: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.1
+
+  '@oslojs/encoding@1.1.0': {}
+
+  '@rollup/pluginutils@5.4.0(rollup@4.62.4)':
+    dependencies:
+      '@types/estree': 1.0.9
+      estree-walker: 2.0.2
+      picomatch: 4.0.5
+    optionalDependencies:
+      rollup: 4.62.4
+
+  '@rollup/rollup-android-arm-eabi@4.62.4':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.62.4':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.62.4':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.62.4':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.62.4':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.62.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.62.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.62.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.62.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.62.4':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.62.4':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.62.4':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.62.4':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.62.4':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.62.4':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.62.4':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.62.4':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.62.4':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.62.4':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.62.4':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.62.4':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.62.4':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.62.4':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.62.4':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.62.4':
+    optional: true
+
+  '@shikijs/core@3.23.0':
+    dependencies:
+      '@shikijs/types': 3.23.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.5
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@3.23.0':
+    dependencies:
+      '@shikijs/types': 3.23.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.6
+
+  '@shikijs/engine-oniguruma@3.23.0':
+    dependencies:
+      '@shikijs/types': 3.23.0
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@3.23.0':
+    dependencies:
+      '@shikijs/types': 3.23.0
+
+  '@shikijs/themes@3.23.0':
+    dependencies:
+      '@shikijs/types': 3.23.0
+
+  '@shikijs/types@3.23.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.5
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
+  '@types/debug@4.1.13':
+    dependencies:
+      '@types/ms': 2.1.0
+
+  '@types/estree@1.0.9': {}
+
+  '@types/hast@3.0.5':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/ms@2.1.0': {}
+
+  '@types/nlcst@2.0.3':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/node@12.20.55': {}
+
+  '@types/node@22.20.1':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/unist@3.0.3': {}
+
+  '@ungap/structured-clone@1.3.3': {}
+
+  acorn@8.18.0: {}
+
+  ansi-align@3.0.1:
+    dependencies:
+      string-width: 4.2.3
+
+  ansi-colors@4.1.3: {}
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.3.0: {}
+
+  ansi-styles@6.2.3: {}
+
+  any-promise@1.3.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.2
+
+  argparse@1.0.10:
+    dependencies:
+      sprintf-js: 1.0.3
+
+  argparse@2.0.1: {}
+
+  aria-query@5.3.2: {}
+
+  array-iterate@2.0.1: {}
+
+  array-union@2.1.0: {}
+
+  astro@5.18.2(@types/node@22.20.1)(rollup@4.62.4)(typescript@5.9.3):
+    dependencies:
+      '@astrojs/compiler': 2.13.1
+      '@astrojs/internal-helpers': 0.7.6
+      '@astrojs/markdown-remark': 6.3.11
+      '@astrojs/telemetry': 3.3.0
+      '@capsizecss/unpack': 4.0.1
+      '@oslojs/encoding': 1.1.0
+      '@rollup/pluginutils': 5.4.0(rollup@4.62.4)
+      acorn: 8.18.0
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      boxen: 8.0.1
+      ci-info: 4.4.0
+      clsx: 2.1.1
+      common-ancestor-path: 1.0.1
+      cookie: 1.1.1
+      cssesc: 3.0.0
+      debug: 4.4.3
+      deterministic-object-hash: 2.0.2
+      devalue: 5.9.0
+      diff: 8.0.4
+      dlv: 1.1.3
+      dset: 3.1.4
+      es-module-lexer: 1.7.0
+      esbuild: 0.27.7
+      estree-walker: 3.0.3
+      flattie: 1.1.1
+      fontace: 0.4.1
+      github-slugger: 2.0.0
+      html-escaper: 3.0.3
+      http-cache-semantics: 4.2.0
+      import-meta-resolve: 4.2.0
+      js-yaml: 4.3.1
+      magic-string: 0.30.21
+      magicast: 0.5.4
+      mrmime: 2.0.1
+      neotraverse: 0.6.18
+      p-limit: 6.2.0
+      p-queue: 8.1.1
+      package-manager-detector: 1.8.0
+      piccolore: 0.1.3
+      picomatch: 4.0.5
+      prompts: 2.4.2
+      rehype: 13.0.2
+      semver: 7.8.5
+      shiki: 3.23.0
+      smol-toml: 1.8.0
+      svgo: 4.0.2
+      tinyexec: 1.3.0
+      tinyglobby: 0.2.17
+      tsconfck: 3.1.6(typescript@5.9.3)
+      ultrahtml: 1.7.0
+      unifont: 0.7.5
+      unist-util-visit: 5.1.0
+      unstorage: 1.17.5
+      vfile: 6.0.3
+      vite: 6.4.3(@types/node@22.20.1)
+      vitefu: 1.1.3(vite@6.4.3(@types/node@22.20.1))
+      xxhash-wasm: 1.1.0
+      yargs-parser: 21.1.1
+      yocto-spinner: 0.2.3
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.2(zod@3.25.76)
+      zod-to-ts: 1.2.0(typescript@5.9.3)(zod@3.25.76)
+    optionalDependencies:
+      sharp: 0.34.5
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@types/node'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - db0
+      - idb-keyval
+      - ioredis
+      - jiti
+      - less
+      - lightningcss
+      - rollup
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - typescript
+      - uploadthing
+      - yaml
+
+  axobject-query@4.1.0: {}
+
+  bail@2.0.2: {}
+
+  base-64@1.0.0: {}
+
+  better-path-resolve@1.0.0:
+    dependencies:
+      is-windows: 1.0.2
+
+  boolbase@1.0.0: {}
+
+  boxen@8.0.1:
+    dependencies:
+      ansi-align: 3.0.1
+      camelcase: 8.0.0
+      chalk: 5.6.2
+      cli-boxes: 3.0.0
+      string-width: 7.2.0
+      type-fest: 4.41.0
+      widest-line: 5.0.0
+      wrap-ansi: 9.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  bundle-require@5.1.0(esbuild@0.27.7):
+    dependencies:
+      esbuild: 0.27.7
+      load-tsconfig: 0.2.5
+
+  cac@6.7.14: {}
+
+  camelcase@8.0.0: {}
+
+  ccount@2.0.1: {}
+
+  chalk@5.6.2: {}
+
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  chardet@2.2.0: {}
+
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
+  chokidar@5.0.0:
+    dependencies:
+      readdirp: 5.1.1
+
+  ci-info@4.4.0: {}
+
+  cli-boxes@3.0.0: {}
+
+  clsx@2.1.1: {}
+
+  comma-separated-tokens@2.0.3: {}
+
+  commander@11.1.0: {}
+
+  commander@4.1.1: {}
+
+  common-ancestor-path@1.0.1: {}
+
+  confbox@0.1.8: {}
+
+  consola@3.4.2: {}
+
+  cookie-es@1.2.3: {}
+
+  cookie@1.1.1: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  crossws@0.3.5:
+    dependencies:
+      uncrypto: 0.1.3
+
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-tree@2.2.1:
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.2.1
+
+  css-tree@3.2.1:
+    dependencies:
+      mdn-data: 2.27.1
+      source-map-js: 1.2.1
+
+  css-what@6.2.2: {}
+
+  cssesc@3.0.0: {}
+
+  csso@5.0.5:
+    dependencies:
+      css-tree: 2.2.1
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decode-named-character-reference@1.3.0:
+    dependencies:
+      character-entities: 2.0.2
+
+  defu@6.1.7: {}
+
+  dequal@2.0.3: {}
+
+  destr@2.0.5: {}
+
+  detect-indent@6.1.0: {}
+
+  detect-libc@2.1.2:
+    optional: true
+
+  deterministic-object-hash@2.0.2:
+    dependencies:
+      base-64: 1.0.0
+
+  devalue@5.9.0: {}
+
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
+  diff@8.0.4: {}
+
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  dlv@1.1.3: {}
+
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
+  dset@3.1.4: {}
+
+  emoji-regex@10.6.0: {}
+
+  emoji-regex@8.0.0: {}
+
+  enquirer@2.4.1:
+    dependencies:
+      ansi-colors: 4.1.3
+      strip-ansi: 6.0.1
+
+  entities@4.5.0: {}
+
+  entities@6.0.1: {}
+
+  es-module-lexer@1.7.0: {}
+
+  esbuild@0.25.12:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.12
+      '@esbuild/android-arm': 0.25.12
+      '@esbuild/android-arm64': 0.25.12
+      '@esbuild/android-x64': 0.25.12
+      '@esbuild/darwin-arm64': 0.25.12
+      '@esbuild/darwin-x64': 0.25.12
+      '@esbuild/freebsd-arm64': 0.25.12
+      '@esbuild/freebsd-x64': 0.25.12
+      '@esbuild/linux-arm': 0.25.12
+      '@esbuild/linux-arm64': 0.25.12
+      '@esbuild/linux-ia32': 0.25.12
+      '@esbuild/linux-loong64': 0.25.12
+      '@esbuild/linux-mips64el': 0.25.12
+      '@esbuild/linux-ppc64': 0.25.12
+      '@esbuild/linux-riscv64': 0.25.12
+      '@esbuild/linux-s390x': 0.25.12
+      '@esbuild/linux-x64': 0.25.12
+      '@esbuild/netbsd-arm64': 0.25.12
+      '@esbuild/netbsd-x64': 0.25.12
+      '@esbuild/openbsd-arm64': 0.25.12
+      '@esbuild/openbsd-x64': 0.25.12
+      '@esbuild/openharmony-arm64': 0.25.12
+      '@esbuild/sunos-x64': 0.25.12
+      '@esbuild/win32-arm64': 0.25.12
+      '@esbuild/win32-ia32': 0.25.12
+      '@esbuild/win32-x64': 0.25.12
+
+  esbuild@0.27.7:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.7
+      '@esbuild/android-arm': 0.27.7
+      '@esbuild/android-arm64': 0.27.7
+      '@esbuild/android-x64': 0.27.7
+      '@esbuild/darwin-arm64': 0.27.7
+      '@esbuild/darwin-x64': 0.27.7
+      '@esbuild/freebsd-arm64': 0.27.7
+      '@esbuild/freebsd-x64': 0.27.7
+      '@esbuild/linux-arm': 0.27.7
+      '@esbuild/linux-arm64': 0.27.7
+      '@esbuild/linux-ia32': 0.27.7
+      '@esbuild/linux-loong64': 0.27.7
+      '@esbuild/linux-mips64el': 0.27.7
+      '@esbuild/linux-ppc64': 0.27.7
+      '@esbuild/linux-riscv64': 0.27.7
+      '@esbuild/linux-s390x': 0.27.7
+      '@esbuild/linux-x64': 0.27.7
+      '@esbuild/netbsd-arm64': 0.27.7
+      '@esbuild/netbsd-x64': 0.27.7
+      '@esbuild/openbsd-arm64': 0.27.7
+      '@esbuild/openbsd-x64': 0.27.7
+      '@esbuild/openharmony-arm64': 0.27.7
+      '@esbuild/sunos-x64': 0.27.7
+      '@esbuild/win32-arm64': 0.27.7
+      '@esbuild/win32-ia32': 0.27.7
+      '@esbuild/win32-x64': 0.27.7
+
+  escape-string-regexp@5.0.0: {}
+
+  esprima@4.0.1: {}
+
+  estree-walker@2.0.2: {}
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+
+  eventemitter3@5.0.4: {}
+
+  extend@3.0.2: {}
+
+  extendable-error@0.1.7: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fastq@1.20.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fdir@6.5.0(picomatch@4.0.5):
+    optionalDependencies:
+      picomatch: 4.0.5
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
+  fix-dts-default-cjs-exports@1.0.1:
+    dependencies:
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      rollup: 4.62.4
+
+  flattie@1.1.1: {}
+
+  fontace@0.4.1:
+    dependencies:
+      fontkitten: 1.0.3
+
+  fontkitten@1.0.3:
+    dependencies:
+      tiny-inflate: 1.0.3
+
+  fs-extra@7.0.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 4.0.0
+      universalify: 0.1.2
+
+  fs-extra@8.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 4.0.0
+      universalify: 0.1.2
+
+  fsevents@2.3.3:
+    optional: true
+
+  get-east-asian-width@1.6.0: {}
+
+  github-slugger@2.0.0: {}
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  globby@11.1.0:
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
+  graceful-fs@4.2.11: {}
+
+  h3@1.15.11:
+    dependencies:
+      cookie-es: 1.2.3
+      crossws: 0.3.5
+      defu: 6.1.7
+      destr: 2.0.5
+      iron-webcrypto: 1.2.1
+      node-mock-http: 1.0.5
+      radix3: 1.1.2
+      ufo: 1.6.4
+      uncrypto: 0.1.3
+
+  hast-util-from-html@2.0.3:
+    dependencies:
+      '@types/hast': 3.0.5
+      devlop: 1.1.0
+      hast-util-from-parse5: 8.0.3
+      parse5: 7.3.0
+      vfile: 6.0.3
+      vfile-message: 4.0.3
+
+  hast-util-from-parse5@8.0.3:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      hastscript: 9.0.1
+      property-information: 7.2.0
+      vfile: 6.0.3
+      vfile-location: 5.0.3
+      web-namespaces: 2.0.1
+
+  hast-util-is-element@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.5
+
+  hast-util-parse-selector@4.0.0:
+    dependencies:
+      '@types/hast': 3.0.5
+
+  hast-util-raw@9.1.0:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/unist': 3.0.3
+      '@ungap/structured-clone': 1.3.3
+      hast-util-from-parse5: 8.0.3
+      hast-util-to-parse5: 8.0.1
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      parse5: 7.3.0
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-to-parse5@8.0.1:
+    dependencies:
+      '@types/hast': 3.0.5
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
+  hast-util-to-text@4.0.2:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/unist': 3.0.3
+      hast-util-is-element: 3.0.0
+      unist-util-find-after: 5.0.0
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.5
+
+  hastscript@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.5
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+
+  html-escaper@3.0.3: {}
+
+  html-void-elements@3.0.0: {}
+
+  http-cache-semantics@4.2.0: {}
+
+  human-id@4.2.1: {}
+
+  iconv-lite@0.7.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  ignore@5.3.2: {}
+
+  import-meta-resolve@4.2.0: {}
+
+  iron-webcrypto@1.2.1: {}
+
+  is-docker@3.0.0: {}
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
+  is-number@7.0.0: {}
+
+  is-plain-obj@4.1.0: {}
+
+  is-subdir@1.2.0:
+    dependencies:
+      better-path-resolve: 1.0.0
+
+  is-windows@1.0.2: {}
+
+  is-wsl@3.1.1:
+    dependencies:
+      is-inside-container: 1.0.0
+
+  isexe@2.0.0: {}
+
+  joycon@3.1.1: {}
+
+  js-yaml@3.15.1:
+    dependencies:
+      argparse: 1.0.10
+      esprima: 4.0.1
+
+  js-yaml@4.3.1:
+    dependencies:
+      argparse: 2.0.1
+
+  jsonfile@4.0.0:
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  kleur@3.0.3: {}
+
+  lilconfig@3.1.3: {}
+
+  lines-and-columns@1.2.4: {}
+
+  load-tsconfig@0.2.5: {}
+
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
+  lodash.startcase@4.4.0: {}
+
+  longest-streak@3.1.0: {}
+
+  lru-cache@11.5.2: {}
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  magicast@0.5.4:
+    dependencies:
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
+      source-map-js: 1.2.1
+
+  markdown-table@3.0.4: {}
+
+  mdast-util-definitions@6.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      unist-util-visit: 5.1.0
+
+  mdast-util-find-and-replace@3.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  mdast-util-from-markdown@2.0.3:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.1
+
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.3
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.1.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
+  mdn-data@2.0.28: {}
+
+  mdn-data@2.27.1: {}
+
+  merge2@1.4.1: {}
+
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.13
+      debug: 4.4.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.2
+
+  mlly@1.8.2:
+    dependencies:
+      acorn: 8.18.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.4
+
+  mri@1.2.0: {}
+
+  mrmime@2.0.1: {}
+
+  ms@2.1.3: {}
+
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  nanoid@3.3.18: {}
+
+  neotraverse@0.6.18: {}
+
+  nlcst-to-string@4.0.0:
+    dependencies:
+      '@types/nlcst': 2.0.3
+
+  node-fetch-native@1.6.7: {}
+
+  node-mock-http@1.0.5: {}
+
+  normalize-path@3.0.0: {}
+
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
+  object-assign@4.1.1: {}
+
+  ofetch@1.5.1:
+    dependencies:
+      destr: 2.0.5
+      node-fetch-native: 1.6.7
+      ufo: 1.6.4
+
+  ohash@2.0.12: {}
+
+  oniguruma-parser@0.12.2: {}
+
+  oniguruma-to-es@4.3.6:
+    dependencies:
+      oniguruma-parser: 0.12.2
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+
+  outdent@0.5.0: {}
+
+  p-filter@2.1.0:
+    dependencies:
+      p-map: 2.1.0
+
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
+  p-limit@6.2.0:
+    dependencies:
+      yocto-queue: 1.2.2
+
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
+  p-map@2.1.0: {}
+
+  p-queue@8.1.1:
+    dependencies:
+      eventemitter3: 5.0.4
+      p-timeout: 6.1.4
+
+  p-timeout@6.1.4: {}
+
+  p-try@2.2.0: {}
+
+  package-manager-detector@0.2.11:
+    dependencies:
+      quansync: 0.2.11
+
+  package-manager-detector@1.8.0: {}
+
+  parse-latin@7.0.0:
+    dependencies:
+      '@types/nlcst': 2.0.3
+      '@types/unist': 3.0.3
+      nlcst-to-string: 4.0.0
+      unist-util-modify-children: 4.0.0
+      unist-util-visit-children: 3.0.0
+      vfile: 6.0.3
+
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
+  path-exists@4.0.0: {}
+
+  path-key@3.1.1: {}
+
+  path-type@4.0.0: {}
+
+  pathe@2.0.3: {}
+
+  piccolore@0.1.3: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.2: {}
+
+  picomatch@4.0.5: {}
+
+  pify@4.0.1: {}
+
+  pirates@4.0.7: {}
+
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.2
+      pathe: 2.0.3
+
+  postcss-load-config@6.0.1(postcss@8.5.26):
+    dependencies:
+      lilconfig: 3.1.3
+    optionalDependencies:
+      postcss: 8.5.26
+
+  postcss@8.5.26:
+    dependencies:
+      nanoid: 3.3.18
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prettier@2.8.8: {}
+
+  prismjs@1.30.0: {}
+
+  prompts@2.4.2:
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+
+  property-information@7.2.0: {}
+
+  quansync@0.2.11: {}
+
+  queue-microtask@1.2.3: {}
+
+  radix3@1.1.2: {}
+
+  read-yaml-file@1.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      js-yaml: 3.15.1
+      pify: 4.0.1
+      strip-bom: 3.0.0
+
+  readdirp@4.1.2: {}
+
+  readdirp@5.1.1: {}
+
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.1.0:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  rehype-parse@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.5
+      hast-util-from-html: 2.0.3
+      unified: 11.0.5
+
+  rehype-raw@7.0.0:
+    dependencies:
+      '@types/hast': 3.0.5
+      hast-util-raw: 9.1.0
+      vfile: 6.0.3
+
+  rehype-stringify@10.0.1:
+    dependencies:
+      '@types/hast': 3.0.5
+      hast-util-to-html: 9.0.5
+      unified: 11.0.5
+
+  rehype@13.0.2:
+    dependencies:
+      '@types/hast': 3.0.5
+      rehype-parse: 9.0.1
+      rehype-stringify: 10.0.1
+      unified: 11.0.5
+
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-rehype@11.1.2:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  remark-smartypants@3.0.3:
+    dependencies:
+      retext: 9.0.0
+      retext-smartypants: 6.2.0
+      unified: 11.0.5
+      unist-util-visit: 5.1.0
+
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+
+  resolve-from@5.0.0: {}
+
+  retext-latin@4.0.0:
+    dependencies:
+      '@types/nlcst': 2.0.3
+      parse-latin: 7.0.0
+      unified: 11.0.5
+
+  retext-smartypants@6.2.0:
+    dependencies:
+      '@types/nlcst': 2.0.3
+      nlcst-to-string: 4.0.0
+      unist-util-visit: 5.1.0
+
+  retext-stringify@4.0.0:
+    dependencies:
+      '@types/nlcst': 2.0.3
+      nlcst-to-string: 4.0.0
+      unified: 11.0.5
+
+  retext@9.0.0:
+    dependencies:
+      '@types/nlcst': 2.0.3
+      retext-latin: 4.0.0
+      retext-stringify: 4.0.0
+      unified: 11.0.5
+
+  reusify@1.1.0: {}
+
+  rollup@4.62.4:
+    dependencies:
+      '@types/estree': 1.0.9
+    optionalDependencies:
+      '@napi-rs/lzma-linux-x64-gnu': 1.5.1
+      '@rollup/rollup-android-arm-eabi': 4.62.4
+      '@rollup/rollup-android-arm64': 4.62.4
+      '@rollup/rollup-darwin-arm64': 4.62.4
+      '@rollup/rollup-darwin-x64': 4.62.4
+      '@rollup/rollup-freebsd-arm64': 4.62.4
+      '@rollup/rollup-freebsd-x64': 4.62.4
+      '@rollup/rollup-linux-arm-gnueabihf': 4.62.4
+      '@rollup/rollup-linux-arm-musleabihf': 4.62.4
+      '@rollup/rollup-linux-arm64-gnu': 4.62.4
+      '@rollup/rollup-linux-arm64-musl': 4.62.4
+      '@rollup/rollup-linux-loong64-gnu': 4.62.4
+      '@rollup/rollup-linux-loong64-musl': 4.62.4
+      '@rollup/rollup-linux-ppc64-gnu': 4.62.4
+      '@rollup/rollup-linux-ppc64-musl': 4.62.4
+      '@rollup/rollup-linux-riscv64-gnu': 4.62.4
+      '@rollup/rollup-linux-riscv64-musl': 4.62.4
+      '@rollup/rollup-linux-s390x-gnu': 4.62.4
+      '@rollup/rollup-linux-x64-gnu': 4.62.4
+      '@rollup/rollup-linux-x64-musl': 4.62.4
+      '@rollup/rollup-openbsd-x64': 4.62.4
+      '@rollup/rollup-openharmony-arm64': 4.62.4
+      '@rollup/rollup-win32-arm64-msvc': 4.62.4
+      '@rollup/rollup-win32-ia32-msvc': 4.62.4
+      '@rollup/rollup-win32-x64-gnu': 4.62.4
+      '@rollup/rollup-win32-x64-msvc': 4.62.4
+      fsevents: 2.3.3
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  safer-buffer@2.1.2: {}
+
+  sax@1.6.1: {}
+
+  semver@7.8.5: {}
+
+  sharp@0.34.5:
+    dependencies:
+      '@img/colour': 1.1.0
+      detect-libc: 2.1.2
+      semver: 7.8.5
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.34.5
+      '@img/sharp-darwin-x64': 0.34.5
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+      '@img/sharp-libvips-linux-arm': 1.2.4
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+      '@img/sharp-libvips-linux-x64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+      '@img/sharp-linux-arm': 0.34.5
+      '@img/sharp-linux-arm64': 0.34.5
+      '@img/sharp-linux-ppc64': 0.34.5
+      '@img/sharp-linux-riscv64': 0.34.5
+      '@img/sharp-linux-s390x': 0.34.5
+      '@img/sharp-linux-x64': 0.34.5
+      '@img/sharp-linuxmusl-arm64': 0.34.5
+      '@img/sharp-linuxmusl-x64': 0.34.5
+      '@img/sharp-wasm32': 0.34.5
+      '@img/sharp-win32-arm64': 0.34.5
+      '@img/sharp-win32-ia32': 0.34.5
+      '@img/sharp-win32-x64': 0.34.5
+    optional: true
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  shiki@3.23.0:
+    dependencies:
+      '@shikijs/core': 3.23.0
+      '@shikijs/engine-javascript': 3.23.0
+      '@shikijs/engine-oniguruma': 3.23.0
+      '@shikijs/langs': 3.23.0
+      '@shikijs/themes': 3.23.0
+      '@shikijs/types': 3.23.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.5
+
+  signal-exit@4.1.0: {}
+
+  sisteransi@1.0.5: {}
+
+  slash@3.0.0: {}
+
+  smol-toml@1.8.0: {}
+
+  source-map-js@1.2.1: {}
+
+  source-map@0.7.6: {}
+
+  space-separated-tokens@2.0.2: {}
+
+  spawndamnit@3.0.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  sprintf-js@1.0.3: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.6.0
+      strip-ansi: 7.2.0
+
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.2.0:
+    dependencies:
+      ansi-regex: 6.3.0
+
+  strip-bom@3.0.0: {}
+
+  sucrase@3.35.1:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      commander: 4.1.1
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      tinyglobby: 0.2.17
+      ts-interface-checker: 0.1.13
+
+  svgo@4.0.2:
+    dependencies:
+      commander: 11.1.0
+      css-select: 5.2.2
+      css-tree: 3.2.1
+      css-what: 6.2.2
+      csso: 5.0.5
+      picocolors: 1.1.1
+      sax: 1.6.1
+
+  term-size@2.2.1: {}
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  tiny-inflate@1.0.3: {}
+
+  tinyexec@0.3.2: {}
+
+  tinyexec@1.3.0: {}
+
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  tree-kill@1.2.2: {}
+
+  trim-lines@3.0.1: {}
+
+  trough@2.2.0: {}
+
+  ts-interface-checker@0.1.13: {}
+
+  tsconfck@3.1.6(typescript@5.9.3):
+    optionalDependencies:
+      typescript: 5.9.3
+
+  tslib@2.8.1:
+    optional: true
+
+  tsup@8.5.1(postcss@8.5.26)(typescript@5.9.3):
+    dependencies:
+      bundle-require: 5.1.0(esbuild@0.27.7)
+      cac: 6.7.14
+      chokidar: 4.0.3
+      consola: 3.4.2
+      debug: 4.4.3
+      esbuild: 0.27.7
+      fix-dts-default-cjs-exports: 1.0.1
+      joycon: 3.1.1
+      picocolors: 1.1.1
+      postcss-load-config: 6.0.1(postcss@8.5.26)
+      resolve-from: 5.0.0
+      rollup: 4.62.4
+      source-map: 0.7.6
+      sucrase: 3.35.1
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.17
+      tree-kill: 1.2.2
+    optionalDependencies:
+      postcss: 8.5.26
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - jiti
+      - supports-color
+      - tsx
+      - yaml
+
+  type-fest@4.41.0: {}
+
+  typescript@5.9.3: {}
+
+  ufo@1.6.4: {}
+
+  ultrahtml@1.7.0: {}
+
+  uncrypto@0.1.3: {}
+
+  undici-types@6.21.0: {}
+
+  undici@8.10.0: {}
+
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unifont@0.7.5:
+    dependencies:
+      css-tree: 3.2.1
+      ohash: 2.0.12
+      undici: 8.10.0
+
+  unist-util-find-after@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-modify-children@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      array-iterate: 2.0.1
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-remove-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-visit: 5.1.0
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-children@3.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  universalify@0.1.2: {}
+
+  unstorage@1.17.5:
+    dependencies:
+      anymatch: 3.1.3
+      chokidar: 5.0.0
+      destr: 2.0.5
+      h3: 1.15.11
+      lru-cache: 11.5.2
+      node-fetch-native: 1.6.7
+      ofetch: 1.5.1
+      ufo: 1.6.4
+
+  vfile-location@5.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile: 6.0.3
+
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
+  vite@6.4.3(@types/node@22.20.1):
+    dependencies:
+      esbuild: 0.25.12
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
+      postcss: 8.5.26
+      rollup: 4.62.4
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 22.20.1
+      fsevents: 2.3.3
+
+  vitefu@1.1.3(vite@6.4.3(@types/node@22.20.1)):
+    optionalDependencies:
+      vite: 6.4.3(@types/node@22.20.1)
+
+  web-namespaces@2.0.1: {}
+
+  which-pm-runs@1.1.0: {}
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  widest-line@5.0.0:
+    dependencies:
+      string-width: 7.2.0
+
+  wrap-ansi@9.0.2:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 7.2.0
+      strip-ansi: 7.2.0
+
+  xxhash-wasm@1.1.0: {}
+
+  yargs-parser@21.1.1: {}
+
+  yocto-queue@1.2.2: {}
+
+  yocto-spinner@0.2.3:
+    dependencies:
+      yoctocolors: 2.2.0
+
+  yoctocolors@2.2.0: {}
+
+  zod-to-json-schema@3.25.2(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
+
+  zod-to-ts@1.2.0(typescript@5.9.3)(zod@3.25.76):
+    dependencies:
+      typescript: 5.9.3
+      zod: 3.25.76
+
+  zod@3.25.76: {}
+
+  zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..a2d823a
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,7 @@
+packages:
+  - "packages/*"
+  - "apps/*"
+
+onlyBuiltDependencies:
+  - esbuild
+  - sharp
diff --git a/research/canvas/01-api-spec.md b/research/canvas/01-api-spec.md
new file mode 100644
index 0000000..3c75526
--- /dev/null
+++ b/research/canvas/01-api-spec.md
@@ -0,0 +1,397 @@
+# 01. HTML-in-Canvas API 정확한 스펙
+
+> 조사 기준일: 2026-08-20
+> 1차 출처: WICG 공식 explainer(living document), WHATWG HTML PR, Chrome Platform Status, Chrome for Developers 블로그, blink-dev Intent 스레드
+> **이 문서의 모든 시그니처는 WICG explainer의 IDL 블록 원문에서 그대로 옮긴 것이다. 추측한 부분은 명시적으로 "미확인"으로 표시했다.**
+
+---
+
+## 0. 한 줄 요약
+
+`<canvas layoutsubtree>` 안에 실제 HTML을 넣고, `paint` 이벤트 안에서 `ctx.drawElementImage(el, x, y)`(2D) / `gl.texElementImage2D(...)`(WebGL) / `device.queue.copyElementImageToTexture(...)`(WebGPU)를 호출하면, 그 HTML의 **살아있는 렌더링 결과**가 캔버스 픽셀(또는 GPU 텍스처)로 들어온다. 원본 요소는 DOM에 그대로 남아 클릭·포커스·접근성·find-in-page가 계속 동작한다.
+
+## 1. 공식 명칭과 저장소
+
+| 항목 | 값 |
+|---|---|
+| 기능 이름 | **HTML-in-canvas** (Chrome Platform Status 등록명) |
+| 인큐베이션 | W3C WICG |
+| Explainer 저장소 | `https://github.com/WICG/html-in-canvas` |
+| Explainer 렌더링 | `https://wicg.github.io/html-in-canvas/` (형식 스펙이 아니라 explainer 그 자체) |
+| 스펙 PR | `https://github.com/whatwg/html/pull/11588` — "Add HTML-in-Canvas APIs", 2025-08-21 개설, **2026-08 현재 open / 미머지** |
+| chromestatus | `https://chromestatus.com/feature/5172548013916160` |
+| Chromium 버그 | `https://crbug.com/500967896` (Blink 컴포넌트: `Blink>Canvas`) |
+| 저자 | Philip Rogers, Stephen Chenney(Igalia), Chris Harrelson, Philip Jägenstedt, Khushal Sagar, Vladimir Levin, Fernando Serboncini |
+
+### 1.1 이름 변천사 — 영상/구 자료의 이름이 지금과 다른 이유
+
+노마드코더 영상 및 상당수의 블로그가 쓰는 `canvas place element` / `drawElement` / `setHitTestRegions()`는 **모두 옛 이름**이다. WICG 저장소 커밋 로그로 확인한 실제 변천:
+
+| 날짜 | 변경 |
+|---|---|
+| ~2025-08 이전 | 제안 이름 `canvas place element`, 메서드 `drawElement()`, 히트테스트는 `setHitTestRegions()` |
+| 2025-08-22 | 메서드 rename (`drawElement` → `drawHTMLElement`) |
+| 2025-09-05 | `drawHTMLElement` → **`drawHTML`** |
+| 2025-09-11 | `drawHTML` → **`drawElementImage`** ← **현재 이름** |
+| 2025-10-08 | explainer에서 "place element" 표현 전부 제거 (저장소도 `WICG/canvas-place-element` → `WICG/html-in-canvas`. 옛 저장소는 현재 404) |
+| 2025-11-08 | **`setHitTestRegions()` 폐기** → "Switch to CSS transforms for hit testing" (반환된 `DOMMatrix`를 `element.style.transform`에 넣는 방식으로 대체) |
+| 2026-02-10~25 | `paint` 이벤트 / `onpaint` 설계 확정, 이벤트에서 `time` 인자 제거 |
+| 2026-03-17~31 | `captureElementImage()` + `ElementImage` (OffscreenCanvas 지원) 추가 |
+| 2026-03-20 | `drawElementImage()` 소스 사각형(sx/sy/swidth/sheight) 오버로드 추가 |
+| 2026-04-16 / 06-01 | WebGL/WebGPU IDL 대폭 변경 (**아래 4·5절의 "구 시그니처" 주의사항 참조**) |
+| 2026-06-16 | "privacy-preserving painting" → **"read-back-allowed rendering"** 으로 개념 이름 변경 |
+| 2026-07-13/14 | 중첩 canvas 허용, `paint` 이벤트가 **역트리 순서**로 발화함을 명시 |
+
+> ⚠️ WHATWG 스펙 PR #11588 본문에는 아직 `setHitTestRegions()`와 `drawable` 속성이 남아 있다. **explainer(=구현 기준)와 스펙 PR이 아직 동기화되지 않은 상태**이므로, 구현 기준은 explainer를 따라야 한다.
+
+---
+
+## 2. `layoutsubtree` 속성
+
+**철자: 전부 소문자 `layoutsubtree`** (HTML 속성). IDL 반사 프로퍼티는 camelCase `layoutSubtree`.
+
+```html
+<canvas id="canvas" style="width:400px; height:200px" layoutsubtree>
+  <form id="form_element">
+    <label for="name">name:</label>
+    <input id="name">
+  </form>
+</canvas>
+```
+
+- `boolean` 타입 → **불리언 속성**. 존재하기만 하면 true다. `layoutsubtree="true"`도 되고(WICG 예제가 이 형태를 쓴다) `layoutsubtree=""`도 된다. `layoutsubtree="false"`라고 써도 **true로 취급**되니 끄려면 속성 자체를 제거해야 한다.
+- 효과 (explainer 원문 기준):
+  - 캔버스 자손이 **레이아웃에 참여**하고 **히트테스트에 참여**한다.
+  - `<canvas>`의 **직계 자식**은 stacking context를 생성하고, 모든 자손의 containing block이 되며, **paint containment**를 갖는다.
+  - 자식은 "보이는 것처럼" 동작하지만, `drawElementImage()`로 명시적으로 그려지기 전까지 **사용자에게는 보이지 않는다**.
+- 이 속성이 없으면 캔버스 자식은 종전대로 fallback 콘텐츠일 뿐이고, `drawElementImage()`는 예외를 던진다.
+
+---
+
+## 3. 2D 컨텍스트 — `drawElementImage()`
+
+### 3.1 IDL (explainer 원문 그대로)
+
+```webidl
+interface mixin CanvasDrawElementImage {
+  DOMMatrix drawElementImage((Element or ElementImage) element,
+                             unrestricted double dx, unrestricted double dy);
+
+  DOMMatrix drawElementImage((Element or ElementImage) element,
+                             unrestricted double dx, unrestricted double dy,
+                             unrestricted double dwidth, unrestricted double dheight);
+
+  DOMMatrix drawElementImage((Element or ElementImage) element,
+                             unrestricted double sx, unrestricted double sy,
+                             unrestricted double swidth, unrestricted double sheight,
+                             unrestricted double dx, unrestricted double dy);
+
+  DOMMatrix drawElementImage((Element or ElementImage) element,
+                             unrestricted double sx, unrestricted double sy,
+                             unrestricted double swidth, unrestricted double sheight,
+                             unrestricted double dx, unrestricted double dy,
+                             unrestricted double dwidth, unrestricted double dheight);
+};
+
+CanvasRenderingContext2D includes CanvasDrawElementImage;
+OffscreenCanvasRenderingContext2D includes CanvasDrawElementImage;
+```
+
+오버로드는 인자 개수 **3 / 5 / 7 / 9개** 네 가지다 — `(el, dx, dy)`, `(el, dx, dy, dw, dh)`, `(el, sx, sy, sw, sh, dx, dy)`, `(el, sx, sy, sw, sh, dx, dy, dw, dh)`. 기존 `CanvasRenderingContext2D.drawImage()`와 정확히 같은 모양이고, 첫 인자만 이미지 소스 대신 `Element`(또는 `ElementImage`)로 바뀐 것이다.
+
+### 3.2 반환값
+
+**`DOMMatrix`** — 이 행렬을 `element.style.transform = returned.toString()` 으로 적용하면, DOM 상의 요소 위치가 캔버스에 그려진 위치와 일치한다. 히트테스트·포커스 링·IntersectionObserver·접근성 좌표가 이 DOM 위치를 쓰기 때문에 **이 동기화를 하지 않으면 클릭이 엉뚱한 곳에 떨어진다.**
+
+### 3.3 요구사항·제약 (explainer 원문 항목)
+
+- 최근 렌더링 업데이트 시점에 `<canvas>`에 `layoutsubtree`가 지정되어 있어야 한다.
+- `element`는 최근 렌더링 업데이트 시점에 `<canvas>`의 **직계 자식(direct child)** 이어야 한다.
+- `element`가 **박스를 생성**해야 한다 (즉 `display:none` 이면 안 된다).
+- **변환(Transforms)**: 캔버스의 현재 변환 행렬(CTM)은 그리기에 적용된다. 반면 **소스 `element`에 걸린 CSS transform은 그리기에서 무시된다.** (다만 히트테스트/접근성에는 계속 영향을 준다 — 그래서 3.2의 동기화가 성립한다.)
+- **클리핑**: 넘치는 콘텐츠(layout overflow, ink overflow 모두)는 요소의 **border box로 클리핑**된다.
+- **크기**: `width`/`height` 인자는 캔버스 좌표계의 목적지 사각형이다. 생략하면 **캔버스 밖에 있을 때와 같은 화면상 크기·비율**이 되도록 자동 사이징된다.
+  → 실전 의미: `canvas.width`를 device pixel로 잡으면 x/y 좌표도 device pixel 단위여야 한다 (`x * devicePixelRatio`).
+
+### 3.4 스냅샷 타이밍 (중요)
+
+- 캔버스 모든 자식의 렌더링 스냅샷은 **`paint` 이벤트 직전**에 기록된다.
+- `paint` 이벤트 **안에서** 호출하면 → **현재 프레임**의 모습으로 그려진다.
+- `paint` 이벤트 **밖에서** 호출하면 → **직전 프레임**의 스냅샷이 쓰인다.
+- 최초 스냅샷이 기록되기 전에 호출하면 **예외**가 발생한다 (Chromium 구현에서는 `InvalidStateError`).
+
+---
+
+## 4. WebGL — `texElementImage2D()`
+
+### 4.1 현재 IDL (explainer 원문)
+
+```webidl
+dictionary WebGLCopyElementImageConfig {
+  GLfloat sx;
+  GLfloat sy;
+  GLfloat swidth;
+  GLfloat sheight;
+  GLsizei width;
+  GLsizei height;
+};
+
+partial interface WebGLRenderingContext {
+  void texElementImage2D(GLenum target, GLenum internalformat,
+                         (Element or ElementImage) element,
+                         optional WebGLCopyElementImageConfig config = {});
+};
+```
+
+호출:
+```js
+gl.texElementImage2D(gl.TEXTURE_2D, gl.RGBA8, element);
+```
+
+### 4.2 ⚠️ 시그니처가 2026-04~06에 바뀌었다
+
+- **구 시그니처**: `texElementImage2D(target, level, internalformat, format, type, element)` — `texImage2D`와 똑같은 6인자.
+- **신 시그니처**: `texElementImage2D(target, internalformat, element, config?)` — `level`, `format`, `type`이 사라졌다.
+- Chrome for Developers 블로그(2026-05-19 최종 수정)의 코드 예제는 **아직 구 시그니처**(`gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, form_element)`)를 보여준다. 반면 WICG 공식 예제 `Examples/webGL.html`은 try/catch로 신·구 양쪽을 지원한다:
+
+```js
+try {
+  gl.texElementImage2D(gl.TEXTURE_2D, gl.RGBA8, draw_element);      // 신
+} catch (e) {
+  gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,          // 구
+                       gl.UNSIGNED_BYTE, draw_element);
+}
+```
+→ **실전 코드에서는 이 try/catch 패턴을 그대로 쓰는 게 안전하다.**
+
+### 4.3 알려진 미해결 이슈
+
+- Jake Archibald가 blink-dev Intent 스레드에서 지적: **WebGL 경로에서 텍스처 크기를 지정할 방법이 없다.** `config`의 `width`/`height`가 추가된 배경이지만 논의는 진행 중.
+
+---
+
+## 5. WebGPU — `copyElementImageToTexture()`
+
+### 5.1 현재 IDL (explainer 원문)
+
+```webidl
+dictionary GPUCopyElementImageDestination {
+  required GPUImageCopyTextureTagged destination;
+  GPUIntegerCoordinate width;
+  GPUIntegerCoordinate height;
+};
+
+dictionary GPUCopyElementImageSource {
+  required (Element or ElementImage) source;
+  float sx;
+  float sy;
+  float swidth;
+  float sheight;
+};
+
+partial interface GPUQueue {
+  void copyElementImageToTexture(GPUCopyElementImageSource source,
+                                 GPUCopyElementImageDestination destination);
+}
+```
+
+### 5.2 실제 호출 형태 (WICG 젤리 슬라이더 데모 `Examples/webgpu-jelly-slider/src/index.ts` 원문)
+
+```js
+canvas.onpaint = () => {
+  const sourceDict = { source: valueElement };
+  const destDict = {
+    destination: { texture: valueRawTexture },
+    width: width,
+    height: height
+  };
+  try {
+    device.queue.copyElementImageToTexture(sourceDict, destDict);           // 신
+  } catch (e) {
+    device.queue.copyElementImageToTexture(valueElement, width, height,     // 구
+                                           { texture: valueRawTexture });
+    console.log('Note: using old copyElementImageToTexture API');
+  }
+  // ... transform 동기화
+};
+```
+
+> ⚠️ Chrome 블로그는 `device.queue.copyElementImageToTexture(valueElement, { texture: targetTexture })` 라는 **또 다른(간략화된/구) 형태**를 보여준다. IDL과 WICG 데모 소스가 서로 일치하므로 **위 dictionary 2개 형태가 현재 기준**이다.
+
+`copyExternalImageToTexture()`의 DOM 요소 버전이라고 생각하면 된다.
+
+---
+
+## 6. `paint` 이벤트
+
+### 6.1 IDL
+
+```webidl
+[Exposed=Window]
+interface PaintEvent : Event {
+  constructor(DOMString type, optional PaintEventInit eventInitDict);
+  readonly attribute FrozenArray<Element> changedElements;
+};
+
+dictionary PaintEventInit : EventInit {
+  sequence<Element> changedElements = [];
+};
+```
+
+`canvas.onpaint = fn` 또는 `canvas.addEventListener('paint', fn)` 둘 다 가능.
+
+### 6.2 동작 규칙 (explainer 원문 기준)
+
+- 캔버스 자식들의 **렌더링이 변했을 때** 발화한다 (포커스, 호버, 입력, CSS 애니메이션 등).
+- 발화 시점: [update-the-rendering](https://html.spec.whatwg.org/#update-the-rendering) 중 **IntersectionObserver 단계가 실행된 직후**. 설계 문서상으로는 "Paint 단계 직후, 루프 없이 프레임당 1회"(explainer의 Option C).
+- 이벤트는 **바뀐 자식들의 목록**(`changedElements`)을 담는다.
+- 캔버스 자식의 **CSS transform 변경은 렌더링에서 무시**되므로, transform만 바꿔서는 다음 프레임에 `paint`가 발화하지 않는다. (→ 3.2의 동기화 코드가 무한 루프를 만들지 않는 이유)
+- `paint` 안에서 한 **캔버스 드로잉 명령은 현재 프레임에 반영**되지만, `paint` 안에서 한 **DOM 변경은 다음 프레임부터** 반영된다.
+- `<canvas>`가 여러 개면 `paint`는 **역트리 순서(reverse tree order)** 로 발화한다 → 자손이 조상보다 먼저 발화한다 (중첩 canvas 지원, 2026-07 추가).
+
+### 6.3 `requestPaint()`
+
+```webidl
+void requestPaint();
+```
+
+자식이 하나도 안 바뀌어도 `paint`를 **한 번** 강제로 발화시킨다. explainer 표현으로 "`requestAnimationFrame()`과 유사". 매 프레임 갱신이 필요한 앱은 `onpaint` 핸들러 끝에서 `requestPaint()`를 다시 호출해 루프를 만든다. 또한 **최초 1회 호출해서 렌더 파이프라인을 킥스타트**해야 한다(첫 스냅샷 확보).
+
+---
+
+## 7. OffscreenCanvas / Worker — `captureElementImage()` & `ElementImage`
+
+```webidl
+partial interface HTMLCanvasElement {
+  [CEReactions, Reflect] attribute boolean layoutSubtree;
+  attribute EventHandler onpaint;
+  void requestPaint();
+  ElementImage captureElementImage(Element element);
+  DOMMatrix getElementTransform((Element or ElementImage) element, DOMMatrix drawTransform);
+};
+
+partial interface OffscreenCanvas {
+  DOMMatrix getElementTransform((Element or ElementImage) element, DOMMatrix drawTransform);
+};
+
+[Exposed=(Window,Worker), Transferable]
+interface ElementImage {
+  readonly attribute double width;
+  readonly attribute double height;
+  undefined close();
+};
+```
+
+- `canvas.captureElementImage(element)` → 요소 렌더링의 **전송 가능한(Transferable) 스냅샷**.
+- `postMessage(msg, [elementImage])`로 워커에 넘기고, 워커의 `OffscreenCanvasRenderingContext2D.drawElementImage(elementImage, x, y)`로 그린다.
+- 워커에서 계산된 transform은 `postMessage`로 메인 스레드에 돌려보내 `element.style.transform`에 적용해야 한다. 위치가 동적이면 메인 스레드에서 미리 계산해 `ElementImage` 전송과 동시에 적용하는 편이 낫다.
+
+---
+
+## 8. `getElementTransform()` — 3D 컨텍스트용 동기화 헬퍼
+
+```webidl
+DOMMatrix getElementTransform((Element or ElementImage) element, DOMMatrix drawTransform);
+```
+
+- **`HTMLCanvasElement`와 `OffscreenCanvas`에 있다.** (Chrome 블로그 본문 산문이 `element.getElementTransform()`이라고 쓴 곳이 있는데, **블로그 자체의 코드 예제와 IDL 모두 `canvas.getElementTransform(el, matrix)`** 이므로 산문 쪽이 오기다.)
+- WebGL/WebGPU에서는 요소의 최종 화면 위치를 셰이더가 결정하므로 `drawElementImage()`처럼 자동으로 알 수 없다. 그래서 개발자가 MVP 행렬을 스크린 스페이스 행렬로 변환해 넘겨주면, 이 메서드가 `style.transform`에 넣을 `DOMMatrix`를 돌려준다.
+
+### 8.1 변환 공식 (explainer 원문)
+
+```
+T_origin⁻¹ · S_css→grid⁻¹ · T_draw · S_css→grid · T_origin
+```
+- `T_draw`: 캔버스 그리드 좌표계에서 요소를 그린 변환. `drawElementImage`의 경우 `CTM · T_(x,y) · S_(destScale)`.
+- `T_origin`: 요소의 계산된 `transform-origin` 평행이동 행렬.
+- `S_css→grid`: CSS 픽셀 → 캔버스 그리드 픽셀 스케일 행렬.
+
+### 8.2 WebGL에서 screenSpaceTransform 만드는 절차 (Chrome 블로그 원문 코드)
+
+```js
+// 1. WebGL MVP → DOMMatrix
+const mvpDOM = new DOMMatrix(Array.from(htmlElementMVP));
+
+// 2. HTML 요소 정규화 (px → 1x1 단위 사각형, Y축 뒤집기)
+const width  = targetHTMLElement.offsetWidth;
+const height = targetHTMLElement.offsetHeight;
+const cssToUnitSpace = new DOMMatrix()
+  .scale(1 / width, -1 / height, 1)
+  .translate(-width / 2, -height / 2);
+
+// 3. 클립 공간 → 캔버스 뷰포트
+const clipToCanvasViewport = new DOMMatrix()
+  .translate(canvas.width / 2, canvas.height / 2)
+  .scale(canvas.width / 2, -canvas.height / 2, 1);
+
+// 4. 합성: (Clip→Pixels) * MVP * (px→unit)
+const screenSpaceTransform = clipToCanvasViewport.multiply(mvpDOM).multiply(cssToUnitSpace);
+
+// 5. 적용
+const computedTransform = canvas.getElementTransform(targetHTMLElement, screenSpaceTransform);
+if (computedTransform) targetHTMLElement.style.transform = computedTransform.toString();
+```
+
+---
+
+## 9. 접근성·히트테스트가 유지되는 원리
+
+핵심은 **"같은 요소가 두 곳에 존재"가 아니라 "요소는 DOM에 한 번만 존재하고, 캔버스에는 그 픽셀 복사본이 있다"** 는 것이다.
+
+- 히트테스트, 포커스, 키보드 탭 순서, 텍스트 선택, 복사/붙여넣기, 우클릭 컨텍스트 메뉴, find-in-page, 번역, 리더 모드, 확장 프로그램, 브라우저 줌, 자동완성 — **전부 DOM 쪽이 처리한다.** 캔버스는 픽셀만 담당한다.
+- `layoutsubtree`가 자식들을 **접근성 트리에 노출**시킨다. 기존 canvas fallback 콘텐츠와 달리, 그려진 내용과 접근성 트리가 **구조적으로 일치함이 보장**된다 (explainer가 명시한 주요 동기 중 하나).
+- 단 **DOM 위치와 그려진 위치가 어긋나면 전부 어긋난다.** → `drawElementImage()`의 반환 `DOMMatrix`(또는 `getElementTransform()`)를 매 프레임 `style.transform`에 반영하는 것이 이 API의 필수 계약이다.
+- DevTools에서 캔버스 안 HTML을 그대로 인스펙트/스타일 수정할 수 있고, 수정 즉시 텍스처에 반영된다.
+
+---
+
+## 10. 보안·프라이버시: "Read-back-allowed rendering"
+
+(구 명칭 "privacy-preserving painting", 2026-06-16 개칭)
+
+캔버스 픽셀은 `getImageData()`로 읽을 수 있고, WebGL/WebGPU에서는 항상 읽을 수 있다. 따라서 **저자 코드가 원래 볼 수 없던 정보는 애초에 그려지지 않는다.** 페인팅(픽셀 읽기·타이밍 공격)과 무효화(`onpaint` 발화 여부) **양쪽 모두**에서 민감 정보를 배제한다.
+
+### 그려지지 않는(=민감) 정보
+
+- **cross-origin 데이터**: `<iframe>`·`<img>` 등 embedded content의 교차 출처 콘텐츠, `url()` 참조(`background-image`, `clip-path`), 교차 출처로 오염(tainted)된 `<canvas>`, SVG의 `<use>`/`<pattern>`/`<feImage>`.
+  → **same-origin iframe은 그려진다.** 그 안의 cross-origin 콘텐츠만 안 그려진다.
+- 시스템 색상 / 테마 / 사용자 환경설정
+- 맞춤법·문법 검사 밑줄 마커
+- **방문한 링크 정보(`:visited`)** — 히스토리 스니핑 방지
+- JS로 접근 불가한 대기 중 폼 자동완성 정보
+- 서브픽셀 텍스트 안티에일리어싱
+- 캡션/자막 선택 및 외형에 대한 사용자 설정
+- IME 팝업 및 IME 고유 텍스트 서식
+
+### 민감하지 않다고 판정된(=그려지는) 새 정보
+
+- find-in-page 검색어 하이라이트, text-fragment(URL 프래그먼트) 마커
+- 스크롤바 및 폼 컨트롤 외형 (Blink/WebKit에서 이미 `foreignObject`로 탐지 가능)
+- 캐럿 깜빡임 속도
+- `forced-colors` (이미 미디어 쿼리 + 시스템 색상으로 JS에서 알 수 있음)
+
+> blink-dev Intent에 명시된 잔여 리스크: "이 API는 그라디언트 픽셀, 폼 컨트롤 렌더링 등 **소량의 새 정보를 노출**하며 이는 상호운용성 리스크를 만든다." Mozilla의 우려도 주로 이 핑거프린팅 지점이다.
+
+---
+
+## 11. 기타 확인된 제약
+
+| 제약 | 내용 | 출처 |
+|---|---|---|
+| cross-origin iframe | 지원 안 함 (위 10절) | Chrome 블로그 "Limitations" |
+| 메인 스레드 스크롤 | 캔버스 내부 콘텐츠는 JS로 그려지므로 **스크롤·애니메이션이 JS와 독립적으로 갱신될 수 없다.** 컴포지터 스레드 스크롤의 이점을 잃는다. 캔버스 안에 스크롤 콘텐츠를 넣을지, 캔버스 전체를 스크롤시킬지 신중히 판단하라. | Chrome 블로그 "Limitations" |
+| 중첩 canvas | explainer는 자손을 조상 캔버스에 그리는 것을 허용하지만, **Chromium Canary 구현은 가장 가까운 canvas 조상으로 제한**한다 (스펙 PR #11588에서 미해결 논의 중) | whatwg/html#11588 |
+| ElementImage 교차 캔버스 | `ElementImage`를 만든 캔버스 외의 캔버스에 그리는 것을 제한할지 논의 중 (접근성·래스터화 복잡도 vs 오래된 스냅샷 문제) | whatwg/html#11588 |
+| GC 압박 | dictionary 기반 API 설계 때문에 애니메이션 중 잦은 GC가 발생한다는 리뷰 지적 | whatwg/html#11588 |
+| 크기/리사이즈 | 커뮤니티 공통 지적: "이 API에서 크기와 리사이즈가 유일하게 덜 익은 부분". `<canvas>`는 div처럼 `width:100%`가 기본이 아니고 콘텐츠에 따라 높이가 자라지도 않는다. | Frontend Masters (Amit Sheen, 2026-04-21) |
+| 첫 스냅샷 전 호출 | `InvalidStateError` throw. 반드시 `onpaint` 안에서 그리고, `requestPaint()`로 킥스타트 | explainer + Matt Rothenberg |
+| 캔버스 자식 크기 | 캔버스 자식의 크기가 캔버스 CSS 크기와 불일치하면 텍스처가 늘어나고 좌표가 페이지 아래로 갈수록 누적 오차 | Matt Rothenberg 실전 노트 |
+| 반투명 배경 | 반투명 input 배경은 셰이더 효과가 비쳐 나오므로 불투명 색을 쓸 것 | Matt Rothenberg 실전 노트 |
+| WebGL Y축 | 텍스처는 top-down, WebGL은 bottom-up → UV에서 Y 뒤집기 필요 | Matt Rothenberg 실전 노트 |
+| 전체 화면 후처리 | 페이지 전체에 후처리를 걸면 오히려 접근성 이점을 훼손할 수 있다 | Codrops |
+
+---
+
+## 12. 향후 방향 (explainer "Future considerations")
+
+**Auto-updating canvas 모드**: `drawElementImage`가 "최신 렌더링을 가리키는 플레이스홀더"를 기록하고, 캔버스가 커맨드 버퍼를 보관해 스크롤/애니메이션 갱신마다 자동 재생하는 모드. 스크립트를 블로킹하지 않고 컴포지터 스레드 스크롤·애니메이션과 완벽히 동기화되는 효과를 가능하게 한다. 2D 컨텍스트에는 실현 가능, WebGPU도 소폭 API 추가로 가능할 것으로 보고 있다. **WebGL은 `getError()` 등 플러시가 필요한 API 때문에 이 모델이 근본적으로 불가**하다고 explainer가 명시.
diff --git a/research/canvas/02-availability.md b/research/canvas/02-availability.md
new file mode 100644
index 0000000..d0482e1
--- /dev/null
+++ b/research/canvas/02-availability.md
@@ -0,0 +1,144 @@
+# 02. 가용성 — 버전 / 플래그 / Origin Trial / 타 브라우저 입장
+
+> 조사 기준일: **2026-08-20**
+> 이 시점의 Chrome Stable은 **151** (152는 2026-08-25 릴리스 예정). 출처: chromiumdash 마일스톤 스케줄 API
+
+---
+
+## 1. 결론 먼저
+
+### ❌ 지금 프로덕션에 쓸 수 없다 — 단, "점진적 향상"으로는 오늘 넣을 수 있다
+
+| 질문 | 답 |
+|---|---|
+| Stable Chrome에서 기본 켜져 있나? | **아니다.** chromestatus 상태는 여전히 `In development`이고, desktop/android/webview 출시 마일스톤이 전부 `null`이다. |
+| 일반 사용자가 볼 수 있나? | **Origin Trial 토큰을 등록한 오리진에 한해** Chrome 148~154 사용자에게 보인다. 그 외에는 `chrome://flags` 수동 활성화 필요. |
+| Chromium 계열 외 브라우저는? | **전혀 지원 없음.** Firefox·Safari 모두 "No signal"(입장 미표명), 구현 계획 없음. |
+| 스펙은 확정됐나? | **아니다.** WHATWG PR #11588은 2025-08-21 개설 후 **여전히 open/미머지**. 2026년 상반기에만 메서드 시그니처(WebGL/WebGPU)가 두 번 바뀌었다. |
+| 안정화 예상 | **공식 예상 없음.** Chrome 팀이 OT를 M150 → M154로 연장하며 밝힌 사유가 "상당한 피드백을 받았고 (WebGL/WebGPU API, 프라이버시에) 중대한 변경을 했다"이므로, 최소 M155(2026-10-06) 이후에나 Intent to Ship이 가능하다. Firefox/Safari 신호가 없는 한 진짜 Baseline까지는 수년 단위. |
+
+### 실무 권고
+
+1. **핵심 UX를 이 API에 의존시키지 마라.** 기능 감지 후 미지원이면 평범한 HTML로 폴백되는 구조여야 한다 (CanvasUI가 채택한 모델: "런타임에 지원을 감지하고 우아하게 degrade — API가 없으면 콘텐츠는 그냥 일반 HTML로 렌더되고, 여전히 돌 수 있는 효과 부분은 계속 돈다").
+2. **API 이름을 코드 전반에 흩뿌리지 마라.** 2025-08 이후 메서드명이 3번(`drawElement`→`drawHTMLElement`→`drawHTML`→`drawElementImage`), 3D 시그니처가 2번 바뀌었다. 얇은 어댑터 레이어 하나로 감싸라 (`03-code-examples.md` §7 참조).
+3. **데모·포트폴리오·실험·사내 도구에는 지금 써도 된다.** 특히 Chrome 사용자가 절대다수인 크리에이티브 포트폴리오라면 OT 토큰 + 폴백 조합으로 실전 투입 가능하다.
+4. **폴백이 필요하면 `three-html-render` 폴리필**(`foreignObject` 기반)이 같은 API 표면을 제공한다 → `04-fallbacks.md`.
+
+---
+
+## 2. Chrome 타임라인
+
+| 단계 | 마일스톤 | 플랫폼 | 비고 |
+|---|---|---|---|
+| **DevTrial (플래그)** | **M138부터** | Desktop / Android / WebView 전부 | `chrome://flags/#canvas-draw-element` |
+| **Origin Trial (최초)** | **M148 ~ M150** | Desktop / Android / WebView | Intent to Experiment 승인 |
+| **Origin Trial (연장 1회차)** | **~ M154** | Desktop | Intent to Extend Experiment, Mike Taylor LGTM **2026-06-11** |
+| Intent to Ship | — | — | **아직 없음** |
+
+### 마일스톤 → 실제 날짜 (chromiumdash 공식 스케줄)
+
+| 마일스톤 | Branch | Beta | **Stable** |
+|---|---|---|---|
+| M148 | 2026-04-06 | 2026-04-08 | **2026-05-05** |
+| M150 | 2026-06-01 | 2026-06-03 | **2026-06-30** |
+| M152 | 2026-07-27 | 2026-07-29 | **2026-08-25** |
+| M153 | 2026-08-17 | 2026-08-19 | **2026-09-08** |
+| M154 | 2026-08-31 | 2026-09-02 | **2026-09-22** |
+| M155 | 2026-09-14 | 2026-09-16 | **2026-10-06** |
+
+→ **Origin Trial은 2026-08-20 현재 진행 중이며, M154(2026-09-22 Stable)까지 유효하다.** 실무적으로 M155가 Stable에 도달하는 **2026-10-06 무렵 만료**된다고 보면 된다. (추가 연장 가능성 있음 — 1차 연장 전례가 있다.)
+
+### OT 연장 사유 (Intent to Extend Experiment 원문 요지)
+
+> "상당한 피드백을 받았고 중대한 변경(WebGL/WebGPU API, 프라이버시)을 했기 때문에, 이 단계에서 개발자 입력을 계속 수집하고자 한다."
+
+---
+
+## 3. 지금 당장 켜는 방법
+
+### 3.1 개발자 본인 브라우저 (플래그)
+
+```
+chrome://flags/#canvas-draw-element
+```
+→ **Enabled** 로 설정하고 브라우저 재시작.
+
+- 플래그 이름: **`canvas-draw-element`** (옛 메서드명 `drawElement` 시절에 붙은 이름이라 현재 API명과 다르다. 이름은 바뀌지 않았다.)
+- Chrome **Canary 149 이상**이 Chrome 공식 권장 (Chrome for Developers 블로그).
+- 커맨드라인 대안: `--enable-blink-features=CanvasDrawElement` (three.js PR #31233이 안내하는 구버전용 방법)
+- 서드파티 보고: **Brave Stable(Chromium 147+)** 및 기타 Chromium 계열에서도 같은 플래그로 켜진다 (html-in-canvas.dev). Google 1차 출처는 아님.
+
+### 3.2 실제 사용자에게 노출 (Origin Trial 토큰)
+
+등록: `https://developer.chrome.com/origintrials/#/view_trial/3478467762190286849`
+
+토큰을 받아 다음 중 하나로 주입:
+
+```html
+<meta http-equiv="origin-trial" content="TOKEN_HERE">
+```
+```
+Origin-Trial: TOKEN_HERE   (HTTP 응답 헤더)
+```
+
+- 대상: Desktop / Android / WebView
+- 3rd-party origin trial 지원 여부는 **미확인** (트라이얼 등록 페이지가 로그인 벽 뒤에 있어 확인 불가). 서드파티 스크립트로 배포할 계획이라면 등록 시 확인 필요.
+
+### 3.3 기능 감지
+
+```js
+const HAS_HIC =
+  typeof HTMLCanvasElement !== 'undefined' &&
+  'requestPaint' in HTMLCanvasElement.prototype &&
+  'drawElementImage' in CanvasRenderingContext2D.prototype;
+```
+three.js 공식 예제가 쓰는 판정은 `'requestPaint' in HTMLCanvasElement.prototype` 하나다. 2D만 쓸 거면 `drawElementImage`까지, WebGL이면 `'texElementImage2D' in WebGL2RenderingContext.prototype`, WebGPU면 `'copyElementImageToTexture' in GPUQueue.prototype`를 추가로 본다.
+
+---
+
+## 4. 타 브라우저 입장 (standards positions)
+
+| 엔진 | 입장 | 트래커 | 비고 |
+|---|---|---|---|
+| **Gecko / Firefox** | **No signal** (미표명) | [mozilla/standards-positions#1076](https://github.com/mozilla/standards-positions/issues/1076) | 2024-09-25 개설, **여전히 open, 라벨은 "Needs proposed position"**. Mozilla Graphics 팀(nical) 배정. chromestatus의 Chrome 팀 주석: "Mozilla는 spec을 stage 2(대략적 API 모양에 대한 합의)로 진행시키는 데 반대하지 않았고, 우리는 핑거프린팅·호환성에 대한 그들의 우려를 해소하기 위해 적극적으로 작업 중이다." |
+| **WebKit / Safari** | **No signal** (미표명) | [WebKit/standards-positions#630](https://github.com/WebKit/standards-positions/issues/630) | open. `@annevk`, `@smfr`, `@shallawa`, `@cookiecrook` 태그됨. 이슈 본문에 WebKit 엔지니어 코멘트나 공식 라벨 없음. 배경 메모: 이전 제안(canvas place element #403)에서 **retained-mode 캔버스에 대한 우려** 때문에 **immediate-mode API 설계로 회귀**했다고 기재. |
+| **웹 개발자** | **Positive** | [whatwg/html#10650 코멘트](https://github.com/whatwg/html/issues/10650#issuecomment-3324124682) | DevTrial 사용자들의 긍정 신호. 커뮤니티 데모가 폭발적으로 나오는 중. |
+| **W3C TAG** | 리뷰 진행 | [w3ctag/design-reviews#1204](https://github.com/w3ctag/design-reviews/issues/1204) | — |
+
+> 정리: **Chromium 단독 구현이고, 다른 두 엔진 어느 쪽도 "구현하겠다"고 말한 적이 없다.** Mozilla의 "stage 2 진행에 반대 안 함"은 지지가 아니라 논의 진행 허용에 가깝다.
+
+---
+
+## 5. 표준화 상태
+
+| 항목 | 상태 |
+|---|---|
+| WHATWG HTML PR | [#11588](https://github.com/whatwg/html/pull/11588) "Add HTML-in-Canvas APIs" — **open, 미머지** (2025-08-21 개설, 저자 foolip) |
+| 성숙도 (chromestatus) | "Specification currently under development in a Working Group" (Working draft) |
+| Explainer | living document, 계속 갱신 중 (2026-07-14이 마지막 주요 갱신) |
+| 미해결 스펙 이슈 | ① dictionary 기반 API의 GC 압박, ② `ElementImage`의 교차 캔버스 사용 허용 여부, ③ **중첩 canvas — explainer는 허용하나 Chromium Canary는 가장 가까운 canvas 조상으로 제한(구현 불일치)**, ④ paint 타이밍과 paint-timing 스펙의 조율 |
+| **스펙 PR과 explainer 불일치** | PR #11588 본문에는 아직 폐기된 `setHitTestRegions()`와 `drawable` 속성이 남아 있다. **구현 기준은 explainer** |
+
+---
+
+## 6. 프레임워크/라이브러리 지원 현황 (2026-08 기준)
+
+| 라이브러리 | API | 상태 |
+|---|---|---|
+| **three.js** | `THREE.HTMLTexture(element)` + `three/addons/interaction/InteractionManager.js` | **r184에 정식 포함** (dev 브랜치 2026-04-10 머지). WebGLRenderer / WebGPURenderer 양쪽 지원 |
+| **PlayCanvas** | `device.supportsHtmlTextures`, `texture.setSource(el)` | 지원. **WebGL 백엔드만**, WebGPU는 대기 중 |
+| **PixiJS** | `rendering.HTMLSource` | 지원 (WebGL & WebGPU) |
+| **Babylon.js** | HTML Texture | 지원 |
+| **CanvasUI** (canvasui.dev, David Haz) | 40+ 이펙트 컴포넌트, shadcn 레지스트리 방식 | React/Solid/Preact/Vue/Svelte/vanilla TS. **런타임 지원 감지 + graceful degradation 내장** |
+| **three-html-render** (repalash) | `installHtmlInCanvasPolyfill()` | **폴리필**. 네이티브 있으면 fast path, 없으면 `foreignObject` 래스터화. MIT |
+| **Remotion** | `custom-html-in-canvas` 트랜지션 프레젠테이션 | 지원 |
+
+---
+
+## 7. 영상의 "아직 못 쓴다"는 말과 실제의 차이
+
+노마드코더 영상은 "Chrome Canary의 플래그 뒤에 있다"고만 말하는데, 정확히는:
+
+- 영상 시점 기준으로도 **Origin Trial이 이미 열려 있었다** (M148 = 2026-05-05 Stable). 즉 사이트 소유자가 토큰을 등록하면 **일반 Chrome Stable 사용자에게도 동작**시킬 수 있다.
+- 영상의 "시그니처와 API의 기본 모양이 아직 바뀔 수 있다"는 경고는 **정확하다.** 실제로 2026-04~06에 WebGL/WebGPU 시그니처가 바뀌었고, WICG 공식 데모조차 try/catch로 신·구 양쪽을 지원하고 있다.
+- 영상의 API 이름(`canvas place element`, `drawElement`)은 **구 명칭**이다. 현재는 `html-in-canvas` / `drawElementImage`.
diff --git a/research/canvas/03-code-examples.md b/research/canvas/03-code-examples.md
new file mode 100644
index 0000000..6eeae3f
--- /dev/null
+++ b/research/canvas/03-code-examples.md
@@ -0,0 +1,700 @@
+# 03. 동작하는 코드 예제
+
+> 전제: Chrome Canary 149+ 에서 `chrome://flags/#canvas-draw-element` = **Enabled**, 또는 Origin Trial 토큰 주입.
+> 모든 예제는 `01-api-spec.md`의 IDL 기준(2026-08 explainer)이다.
+
+---
+
+## 0. 모든 예제가 지키는 4가지 규칙
+
+1. **`<canvas>`에 `layoutsubtree`**, 그리고 그리려는 요소는 **직계 자식**.
+2. **그리기는 `onpaint` 안에서만.** 밖에서 그리면 직전 프레임 스냅샷이 쓰이고, 첫 스냅샷 전이면 `InvalidStateError`.
+3. **`canvas.requestPaint()`로 킥스타트.** 매 프레임 루프가 필요하면 `onpaint` 끝에서 다시 호출.
+4. **반환된 `DOMMatrix`를 `element.style.transform`에 반영.** 안 하면 클릭이 엉뚱한 데 떨어진다.
+
+---
+
+## 1. 최소 예제 (WICG explainer 원문)
+
+```html
+<canvas id="canvas" style="width: 400px; height: 200px;" layoutsubtree>
+  <form id="form_element">
+    <label for="name">name:</label>
+    <input id="name">
+  </form>
+</canvas>
+
+<script>
+  const ctx = document.getElementById('canvas').getContext('2d');
+
+  canvas.onpaint = () => {
+    ctx.reset();
+    const transform = ctx.drawElementImage(form_element, 100, 0);
+    form_element.style.transform = transform.toString();
+  };
+
+  // 흐릿함 방지: 캔버스 그리드를 device scale factor에 맞춘다.
+  const observer = new ResizeObserver(([entry]) => {
+    canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
+    canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+  });
+  observer.observe(canvas, {box: 'device-pixel-content-box'});
+</script>
+```
+
+`devicePixelContentBoxSize`를 못 쓰는 환경까지 챙기는 Chrome 블로그 버전:
+
+```js
+const observer = new ResizeObserver(([entry]) => {
+  const dpc = entry.devicePixelContentBoxSize;
+  canvas.width  = dpc ? dpc[0].inlineSize
+                      : Math.round(entry.contentRect.width  * devicePixelRatio);
+  canvas.height = dpc ? dpc[0].blockSize
+                      : Math.round(entry.contentRect.height * devicePixelRatio);
+});
+const supportsDPCB = typeof ResizeObserverEntry !== 'undefined'
+                  && 'devicePixelContentBoxSize' in ResizeObserverEntry.prototype;
+observer.observe(canvas, supportsDPCB ? { box: 'device-pixel-content-box' } : {});
+```
+
+---
+
+## 2. 2D 반사(reflection) 이펙트 — 영상 데모의 정확한 재구성
+
+버튼은 **진짜 클릭 가능한 HTML 버튼**이고, 아래쪽 뒤집힌 반사는 캔버스가 그린 픽셀이다. 완성 단일 파일.
+
+```html
+<!doctype html>
+<meta charset="utf-8">
+<title>HTML-in-Canvas: reflection</title>
+<style>
+  body { margin: 0; background: #0b0b10; display: grid; place-items: center; height: 100vh; }
+  canvas { width: 480px; height: 300px; }
+
+  /* 캔버스 자식은 평범한 HTML/CSS 그대로 */
+  #btn {
+    font: 600 20px/1 system-ui, sans-serif;
+    padding: 16px 32px;
+    border: 0;
+    border-radius: 999px;
+    background: #ff5fa2;          /* 반투명 배경은 피할 것 (셰이더/블렌딩이 비쳐 나온다) */
+    color: #fff;
+    cursor: pointer;
+    transition: background .2s, scale .12s;
+  }
+  #btn:hover  { background: #a05cff; scale: 1.05; }
+  #btn:active { scale: .95; }
+</style>
+
+<canvas id="canvas" layoutsubtree>
+  <button id="btn">Press me</button>
+</canvas>
+
+<script>
+  const canvas = document.getElementById('canvas');
+  const ctx    = canvas.getContext('2d');
+  const btn    = document.getElementById('btn');
+
+  // 캔버스 좌표(= device pixel) 기준 배치 위치. CSS px 로 정의하고 dpr 로 곱한다.
+  const X_CSS = 100, Y_CSS = 90;
+
+  canvas.onpaint = () => {
+    // 캔버스 그리드 / CSS 크기 비율 = 실효 dpr
+    const rect = canvas.getBoundingClientRect();
+    const s    = canvas.width / rect.width;
+
+    const x = X_CSS * s;
+    const y = Y_CSS * s;
+    const h = btn.offsetHeight * s;      // 버튼 높이(캔버스 좌표)
+
+    ctx.reset();
+
+    // ── 1) 반사본: y = (Y+H) 축을 기준으로 뒤집고 흐리게
+    ctx.save();
+    ctx.translate(0, 2 * (y + h));
+    ctx.scale(1, -1);
+    ctx.globalAlpha = 0.3;
+    ctx.drawElementImage(btn, x, y);     // 반환값은 버리는 게 맞다 (이건 "복사본")
+    ctx.restore();
+
+    // ── 2) 실제 본체: 이 호출의 반환 transform 만 DOM 에 반영한다
+    const t = ctx.drawElementImage(btn, x, y);
+    btn.style.transform = t.toString();
+
+    // ── 3) 매 프레임 루프 (rAF 대응). 정적이면 이 줄을 빼라.
+    canvas.requestPaint();
+  };
+
+  // 최초 스냅샷 확보 + 파이프라인 킥스타트
+  canvas.requestPaint();
+
+  // 캔버스 그리드를 device pixel 에 맞춤 (흐림 방지)
+  new ResizeObserver(([entry]) => {
+    const dpc = entry.devicePixelContentBoxSize;
+    canvas.width  = dpc ? dpc[0].inlineSize : Math.round(entry.contentRect.width  * devicePixelRatio);
+    canvas.height = dpc ? dpc[0].blockSize  : Math.round(entry.contentRect.height * devicePixelRatio);
+    canvas.requestPaint();
+  }).observe(canvas, { box: 'device-pixel-content-box' });
+</script>
+```
+
+### 왜 `save()/restore()`와 두 번의 `drawElementImage`인가
+
+- `drawElementImage`는 **캔버스의 현재 CTM을 적용**한다. 그래서 flip/alpha를 CTM+`globalAlpha`로 걸고 한 번 그리면 반사본이, 원복 후 한 번 더 그리면 본체가 나온다.
+- 소스 요소에 걸린 CSS transform은 **그리기에서 무시**되므로, `btn.style.transform`을 매 프레임 덮어써도 캔버스 그림은 영향받지 않는다 → **무한 루프가 생기지 않는다.** (그리고 explainer가 "transform 변경은 `paint`를 발화시키지 않는다"고 명시)
+- 반사 좌표 검산: 반사 변환은 `y' = 2(y+h) − y`. 요소 상단 `y` → `y+2h`, 하단 `y+h` → `y+h`. 즉 본체 바로 아래에 위아래 뒤집혀 붙는다.
+
+### 클릭 리플 추가 (영상의 확장분)
+
+```js
+let ripples = [];
+btn.addEventListener('click', (e) => {
+  const r = btn.getBoundingClientRect();
+  ripples.push({ x: e.clientX - r.left, y: e.clientY - r.top, t: performance.now() });
+});
+```
+`onpaint` 안에서 본체를 그린 뒤 `ctx.getImageData()`로 픽셀을 읽어 반경 기반으로 UV를 밀어내면 된다. 이 부분은 이 API와 무관한 **평범한 캔버스 픽셀 수학**이다 (영상의 표현 그대로). 다만 **`getImageData`는 느리므로 실전에서는 §4의 WebGL 경로가 정답**이다.
+
+---
+
+## 3. `paint` 이벤트 루프 — 두 가지 패턴
+
+### 패턴 A: 이벤트 구동 (기본값, 저비용)
+
+호버·포커스·입력 등 **HTML이 실제로 바뀔 때만** 다시 그린다. 대부분의 UI 이펙트에 이게 맞다.
+
+```js
+canvas.onpaint = (event) => {
+  ctx.reset();
+  for (const el of event.changedElements) {   // 바뀐 요소만 알려준다
+    const t = ctx.drawElementImage(el, 0, 0);
+    el.style.transform = t.toString();
+  }
+};
+canvas.requestPaint();   // 최초 1회
+```
+
+`PaintEvent.changedElements`는 `FrozenArray<Element>`다. 캔버스에 자식이 여럿일 때 부분 갱신에 쓴다.
+
+### 패턴 B: 매 프레임 루프 (애니메이션/셰이더)
+
+```js
+canvas.onpaint = () => {
+  const now = performance.now();
+  ctx.reset();
+  drawEverything(now);
+  canvas.requestPaint();   // 다음 프레임 예약 → requestAnimationFrame 과 같은 역할
+};
+canvas.requestPaint();
+```
+
+> `requestAnimationFrame`으로 루프를 돌리면서 그 안에서 `drawElementImage`를 부르면 **직전 프레임 스냅샷**이 쓰여 1프레임 지연이 생기고, 첫 프레임에 예외가 난다. **루프는 `requestPaint()`로 도는 게 맞다.**
+
+### 중첩 canvas 주의
+
+`paint`는 **역트리 순서**로 발화한다 (자손 → 조상). 조상 캔버스가 자손 캔버스의 결과에 의존하는 합성을 짤 때 이 순서를 전제할 수 있다. 단, **Chromium Canary는 아직 "요소는 가장 가까운 canvas 조상에만 그릴 수 있다"로 제한**하고 있으므로 (스펙과 구현 불일치) 중첩 구조는 신중히.
+
+---
+
+## 4. WebGL 텍스처화 — 전체 화면 셰이더 왜곡
+
+라이브 HTML을 텍스처로 올려 프래그먼트 셰이더로 왜곡한다. 완성 단일 파일.
+
+```html
+<!doctype html>
+<meta charset="utf-8">
+<title>HTML-in-Canvas: WebGL distortion</title>
+<style>
+  html, body { margin: 0; height: 100%; background: #07070c; }
+  #gl { display: block; width: 100vw; height: 100vh; }
+  #ui {
+    width: 100vw; height: 100vh; box-sizing: border-box;
+    padding: 12vh 10vw;
+    font: 16px/1.6 system-ui, sans-serif; color: #eaeaf2;
+    background: #12121b;                      /* 불투명하게 */
+  }
+  #ui h1 { font-size: 56px; margin: 0 0 24px; letter-spacing: -.03em; }
+  #ui input, #ui button {
+    font: inherit; padding: 12px 16px; border-radius: 10px; border: 1px solid #3a3a52;
+    background: #1c1c29; color: inherit;
+  }
+  #ui input:focus { outline: 2px solid #7b6cff; }
+</style>
+
+<canvas id="gl" layoutsubtree>
+  <div id="ui">
+    <h1>Real HTML, real shader.</h1>
+    <p>이 텍스트는 선택·복사·find-in-page가 되고, 아래 입력창은 진짜 입력됩니다.</p>
+    <p><input id="name" placeholder="이름"> <button>보내기</button></p>
+  </div>
+</canvas>
+
+<script type="module">
+const canvas = document.getElementById('gl');
+const ui     = document.getElementById('ui');
+const gl     = canvas.getContext('webgl2', { antialias: true, premultipliedAlpha: false });
+
+// ── 셰이더 ────────────────────────────────────────────────
+const VS = `#version 300 es
+in vec2 aPos;
+out vec2 vUv;
+void main() {
+  // 텍스처는 top-down, WebGL 클립공간은 bottom-up → Y 뒤집기
+  vUv = vec2(aPos.x * 0.5 + 0.5, 0.5 - aPos.y * 0.5);
+  gl_Position = vec4(aPos, 0.0, 1.0);
+}`;
+
+const FS = `#version 300 es
+precision highp float;
+in  vec2 vUv;
+out vec4 outColor;
+uniform sampler2D uTex;
+uniform vec2  uMouse;    // 0..1
+uniform float uTime;
+uniform float uAspect;
+
+void main() {
+  vec2 uv = vUv;
+
+  // 커서 주변을 가우시안 감쇠로 끌어당기는 자기장 왜곡
+  vec2 d = (uv - uMouse) * vec2(uAspect, 1.0);
+  float dist = length(d);
+  float pull = exp(-dist * dist * 90.0) * 0.06;
+  vec2 warped = uv - normalize(d + 1e-6) * pull * vec2(1.0 / uAspect, 1.0);
+
+  // 살짝 흐르는 물결
+  warped.x += sin(uv.y * 30.0 + uTime * 1.6) * 0.0015;
+
+  // 경계에서 색수차
+  float ca = pull * 0.35;
+  vec4 c;
+  c.r = texture(uTex, warped + vec2( ca, 0.0)).r;
+  c.g = texture(uTex, warped).g;
+  c.b = texture(uTex, warped - vec2( ca, 0.0)).b;
+  c.a = texture(uTex, warped).a;
+
+  outColor = c;
+}`;
+
+function compile(type, src) {
+  const s = gl.createShader(type);
+  gl.shaderSource(s, src); gl.compileShader(s);
+  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
+  return s;
+}
+const prog = gl.createProgram();
+gl.attachShader(prog, compile(gl.VERTEX_SHADER, VS));
+gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FS));
+gl.linkProgram(prog);
+if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(prog));
+gl.useProgram(prog);
+
+// ── 풀스크린 삼각형 2개 ────────────────────────────────────
+const vao = gl.createVertexArray();
+gl.bindVertexArray(vao);
+const vbo = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 3,-1, -1,3]), gl.STATIC_DRAW);
+const loc = gl.getAttribLocation(prog, 'aPos');
+gl.enableVertexAttribArray(loc);
+gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+
+// ── 텍스처 ────────────────────────────────────────────────
+const tex = gl.createTexture();
+gl.bindTexture(gl.TEXTURE_2D, tex);
+// 텍스트에는 mipmap 보다 LINEAR 가 결과가 낫다 (WICG 예제 주석 그대로)
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+
+/** 신/구 texElementImage2D 시그니처를 모두 지원 (WICG 공식 예제 패턴) */
+function uploadElement(el) {
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  try {
+    gl.texElementImage2D(gl.TEXTURE_2D, gl.RGBA8, el);                      // 현재 IDL
+  } catch (e) {
+    gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,                // 구 시그니처
+                         gl.UNSIGNED_BYTE, el);
+  }
+}
+
+const uTex    = gl.getUniformLocation(prog, 'uTex');
+const uMouse  = gl.getUniformLocation(prog, 'uMouse');
+const uTime   = gl.getUniformLocation(prog, 'uTime');
+const uAspect = gl.getUniformLocation(prog, 'uAspect');
+
+let mouse = [0.5, 0.5];
+addEventListener('pointermove', (e) => {
+  mouse = [e.clientX / innerWidth, e.clientY / innerHeight];
+});
+
+// ── paint 루프 ────────────────────────────────────────────
+canvas.onpaint = () => {
+  uploadElement(ui);                       // ← 반드시 paint 안에서
+
+  gl.viewport(0, 0, canvas.width, canvas.height);
+  gl.useProgram(prog);
+  gl.bindVertexArray(vao);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.uniform1i(uTex, 0);
+  gl.uniform2f(uMouse, mouse[0], mouse[1]);
+  gl.uniform1f(uTime, performance.now() * 0.001);
+  gl.uniform1f(uAspect, canvas.width / canvas.height);
+  gl.drawArrays(gl.TRIANGLES, 0, 3);
+
+  canvas.requestPaint();                   // 매 프레임
+};
+canvas.requestPaint();
+
+new ResizeObserver(([entry]) => {
+  const dpc = entry.devicePixelContentBoxSize;
+  canvas.width  = dpc ? dpc[0].inlineSize : Math.round(entry.contentRect.width  * devicePixelRatio);
+  canvas.height = dpc ? dpc[0].blockSize  : Math.round(entry.contentRect.height * devicePixelRatio);
+  canvas.requestPaint();
+}).observe(canvas, { box: 'device-pixel-content-box' });
+</script>
+```
+
+### 이 예제의 히트테스트
+
+풀스크린 쿼드가 요소를 1:1로 매핑하므로 **DOM 위치가 그려진 위치와 이미 일치**한다 → `style.transform` 조작이 필요 없다. 다만 셰이더가 픽셀을 왜곡하는 만큼 **클릭 지점과 보이는 지점이 왜곡량만큼 어긋난다.** 왜곡을 작게 유지하거나, 왜곡이 큰 순간(전환 애니메이션)에는 포인터 이벤트를 잠깐 무시하는 식으로 다뤄야 한다. (Codrops가 지적한 트레이드오프)
+
+### 두 텍스처 블렌딩 — 이 API의 진짜 킬러 패턴
+
+Matt Rothenberg의 "Burn Transition"(영상의 다크모드 불타는 전환)이 쓰는 구조:
+
+```html
+<canvas layoutsubtree>
+  <div id="lightPage">...</div>
+  <div id="darkPage">...</div>
+</canvas>
+```
+```js
+canvas.onpaint = () => {
+  gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texLight);
+  gl.texElementImage2D(gl.TEXTURE_2D, gl.RGBA8, lightPage);
+  gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, texDark);
+  gl.texElementImage2D(gl.TEXTURE_2D, gl.RGBA8, darkPage);
+  // 프래그먼트 셰이더에서 FBM 노이즈로 burn front 를 만들어 두 텍스처를 픽셀 단위 합성
+  ...
+};
+```
+**두 개의 라이브 렌더를 임의의 GLSL 함수로 합성하는 것** — View Transitions는 두 개의 *스냅샷*을 CSS 애니메이션으로 넘기는 게 전부라 이건 CSS에 등가물이 없다.
+
+---
+
+## 5. three.js 연동 — `THREE.HTMLTexture` (r184+)
+
+**가장 실용적인 3D 경로.** three.js가 `layoutsubtree` 설정, 요소 부모 관리, 매 프레임 `matrix3d` 계산, 히트테스트 위임까지 다 해준다. 레이캐스팅이 필요 없다.
+
+```html
+<script type="importmap">
+{ "imports": {
+    "three": "https://unpkg.com/three@0.184.0/build/three.module.js",
+    "three/addons/": "https://unpkg.com/three@0.184.0/examples/jsm/",
+    "three-html-render/polyfill": "https://cdn.jsdelivr.net/npm/three-html-render/dist/polyfill.mjs"
+}}
+</script>
+
+<script type="module">
+import * as THREE from 'three';
+import { RoundedBoxGeometry }  from 'three/addons/geometries/RoundedBoxGeometry.js';
+import { RoomEnvironment }     from 'three/addons/environments/RoomEnvironment.js';
+import { InteractionManager }  from 'three/addons/interaction/InteractionManager.js';
+
+// 네이티브 API 없으면 foreignObject 폴리필로 대체 (three.js 공식 예제와 동일한 판정)
+if (!('requestPaint' in HTMLCanvasElement.prototype)) {
+  const { installHtmlInCanvasPolyfill } = await import('three-html-render/polyfill');
+  installHtmlInCanvasPolyfill();
+}
+
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setPixelRatio(devicePixelRatio);
+renderer.setSize(innerWidth, innerHeight);
+renderer.toneMapping = THREE.NeutralToneMapping;
+document.body.appendChild(renderer.domElement);
+
+const camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 1, 2000);
+camera.position.z = 500;
+
+const scene = new THREE.Scene();
+scene.background  = new THREE.Color(0xaaaaaa);
+scene.environment = new THREE.PMREMGenerator(renderer)
+                      .fromScene(new RoomEnvironment(), 0.02).texture;
+
+// ── 텍스처가 될 HTML. document 에 붙일 필요 없다 — HTMLTexture 가 캔버스 자식으로 넣어준다.
+const element = document.createElement('div');
+element.style.cssText = 'width:600px;padding:30px;background:#aaa;color:#000;'
+                      + 'font:30px/1.5 sans-serif;text-align:center';
+element.innerHTML = `
+  Hello world! <b>formatted</b> 텍스트, 이모지 😀, RTL <span dir="rtl">من فارسی</span>
+  <br><input type="text" placeholder="입력해 보세요">
+  <button>Click me</button>`;
+
+const material = new THREE.MeshStandardMaterial({ roughness: 0, metalness: 0.5 });
+material.map = new THREE.HTMLTexture(element);          // ← 핵심 한 줄
+
+const mesh = new THREE.Mesh(new RoundedBoxGeometry(200, 200, 200, 10, 10), material);
+scene.add(mesh);
+
+// ── 네이티브 포인터 상호작용 (raycast 불필요, 브라우저 히트테스트에 위임)
+const interactions = new InteractionManager();
+interactions.connect(renderer, camera);
+interactions.add(mesh);
+
+element.querySelector('button').addEventListener('click', function () {
+  this.textContent = 'Clicked!';                        // 3D 표면 위에서 그대로 동작
+});
+
+renderer.setAnimationLoop((t) => {
+  mesh.rotation.x = Math.sin(t * 0.0005) * 0.5;
+  mesh.rotation.y = Math.cos(t * 0.0008) * 0.5;
+  interactions.update();                                // 매 프레임 transform 동기화
+  renderer.render(scene, camera);
+});
+
+addEventListener('resize', () => {
+  camera.aspect = innerWidth / innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(innerWidth, innerHeight);
+});
+</script>
+```
+
+### `HTMLTexture`가 내부에서 하는 일 (three.js 소스 원문 요지)
+
+```js
+class HTMLTexture extends Texture {
+  constructor(element, ...) {
+    super(element, ...);
+    this.isHTMLTexture = true;
+    this.generateMipmaps = false;
+    this.needsUpdate = true;
+
+    const parent = element ? element.parentNode : null;
+    if (parent !== null && 'requestPaint' in parent) {
+      parent.onpaint = () => { this.needsUpdate = true; };   // paint 마다 갱신 플래그
+      parent.requestPaint();                                  // 킥스타트
+    }
+  }
+  dispose() { /* onpaint 해제 후 super.dispose() */ }
+}
+```
+→ `Texture`를 거의 그대로 쓰되 **`paint` 이벤트를 구독해 `needsUpdate`를 세우는 것**이 전부다. 업로드 자체는 렌더러가 `texElementImage2D` / `copyElementImageToTexture`로 처리한다. **WebGLRenderer와 WebGPURenderer 양쪽 지원.**
+
+### React Three Fiber 조합 (Codrops 패턴)
+
+```jsx
+const texture = new HTMLTexture(document.getElementById('computer_screen'));
+material.uniforms.map.value = texture;
+material.map = texture;
+
+const interactions = new InteractionManager();
+interactions.connect(gl, camera);        // useThree() 의 gl, camera
+interactions.add(screenMeshRef.current);
+
+useFrame(({ clock }) => {
+  material.uniforms.uTime.value = clock.elapsedTime;
+  interactions.update();
+});
+```
+
+---
+
+## 6. WebGPU — `copyElementImageToTexture()`
+
+WICG 젤리 슬라이더 데모의 실제 구조.
+
+```js
+const canvas  = document.getElementById('canvas');   // <canvas layoutsubtree>
+const element = document.getElementById('value');    // 캔버스 직계 자식
+
+const targetTexture = device.createTexture({
+  size:   [width, height, 1],
+  format: 'rgba8unorm',
+  usage:  GPUTextureUsage.TEXTURE_BINDING
+        | GPUTextureUsage.COPY_DST
+        | GPUTextureUsage.RENDER_ATTACHMENT,
+});
+
+canvas.onpaint = () => {
+  const source = { source: element };                       // GPUCopyElementImageSource
+  const dest   = {                                          // GPUCopyElementImageDestination
+    destination: { texture: targetTexture },
+    width, height,
+  };
+
+  try {
+    device.queue.copyElementImageToTexture(source, dest);            // 현재 IDL
+  } catch (e) {
+    device.queue.copyElementImageToTexture(element, width, height,   // 구 시그니처
+                                           { texture: targetTexture });
+  }
+
+  // 히트테스트 동기화 — 3D 배치면 canvas.getElementTransform() 사용
+  element.style.transform = `translate(${x}px, ${y}px)`;
+};
+canvas.requestPaint();
+```
+
+**소스 사각형 크롭**이 필요하면 `source`에 `sx / sy / swidth / sheight`를 추가한다.
+
+> ⚠️ WICG 젤리 슬라이더 소스에는 `// TODO(pdr): Calculate this correctly using getElementTransform. For now, the transform is just hard-coded.` 라는 주석이 남아 있다. **공식 WebGPU 데모조차 transform 동기화를 하드코딩 중**이라는 뜻으로, 이 경로가 아직 가장 덜 다듬어진 부분이다.
+
+---
+
+## 7. 기능 감지 + 어댑터 레이어 (권장 래퍼)
+
+시그니처가 계속 바뀌므로 호출부를 한 곳에 격리한다.
+
+```js
+// hic.js
+export const HIC = {
+  get supported2D() {
+    return 'requestPaint' in HTMLCanvasElement.prototype
+        && 'drawElementImage' in CanvasRenderingContext2D.prototype;
+  },
+  get supportedGL() {
+    return 'requestPaint' in HTMLCanvasElement.prototype
+        && (('texElementImage2D' in WebGL2RenderingContext.prototype) ||
+            ('texElementImage2D' in WebGLRenderingContext.prototype));
+  },
+  get supportedGPU() {
+    return typeof GPUQueue !== 'undefined'
+        && 'copyElementImageToTexture' in GPUQueue.prototype;
+  },
+
+  /** 2D: 그리고 transform 을 동기화. 반환 DOMMatrix. */
+  draw(ctx, el, x, y, w, h) {
+    const t = (w === undefined)
+      ? ctx.drawElementImage(el, x, y)
+      : ctx.drawElementImage(el, x, y, w, h);
+    el.style.transform = t.toString();
+    return t;
+  },
+
+  /** WebGL: 신/구 시그니처 흡수 */
+  uploadGL(gl, el, internalformat = gl.RGBA8) {
+    try {
+      gl.texElementImage2D(gl.TEXTURE_2D, internalformat, el);
+    } catch (_) {
+      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, el);
+    }
+  },
+
+  /** WebGPU: 신/구 시그니처 흡수 */
+  uploadGPU(device, el, texture, width, height) {
+    try {
+      device.queue.copyElementImageToTexture(
+        { source: el },
+        { destination: { texture }, width, height });
+    } catch (_) {
+      device.queue.copyElementImageToTexture(el, width, height, { texture });
+    }
+  },
+
+  /** 캔버스 그리드를 device pixel 에 맞추고 리사이즈마다 repaint */
+  observeSize(canvas) {
+    const ro = new ResizeObserver(([entry]) => {
+      const dpc = entry.devicePixelContentBoxSize;
+      canvas.width  = dpc ? dpc[0].inlineSize : Math.round(entry.contentRect.width  * devicePixelRatio);
+      canvas.height = dpc ? dpc[0].blockSize  : Math.round(entry.contentRect.height * devicePixelRatio);
+      canvas.requestPaint?.();
+    });
+    const supportsDPCB = typeof ResizeObserverEntry !== 'undefined'
+                      && 'devicePixelContentBoxSize' in ResizeObserverEntry.prototype;
+    ro.observe(canvas, supportsDPCB ? { box: 'device-pixel-content-box' } : {});
+    return ro;
+  },
+};
+```
+
+사용 시 **미지원이면 캔버스를 아예 만들지 말고 HTML을 그대로 노출**하는 것이 폴백의 기본형이다:
+
+```js
+if (HIC.supported2D) {
+  canvas.setAttribute('layoutsubtree', '');
+  mountEffect(canvas);
+} else {
+  canvas.replaceWith(...canvas.childNodes);   // 자식 HTML 을 그대로 문서에 승격
+}
+```
+
+---
+
+## 8. OffscreenCanvas + Worker (explainer 원문)
+
+무거운 2D 합성을 워커로 넘기는 경로.
+
+```html
+<canvas id="canvas" style="width: 400px; height: 200px;" layoutsubtree>
+  <form id="form_element">
+    <label for="name">name:</label>
+    <input id="name">
+  </form>
+</canvas>
+<script>
+  const workerCode = `
+    let ctx;
+    self.onmessage = (e) => {
+      if (e.data.canvas) ctx = e.data.canvas.getContext('2d');
+      if (e.data.width && e.data.height) {
+        ctx.canvas.width = e.data.width;
+        ctx.canvas.height = e.data.height;
+      }
+      if (e.data.elementImage) {
+        ctx.reset();
+        const transform = ctx.drawElementImage(e.data.elementImage, 100, 0);
+        self.postMessage({transform: transform});
+      }
+    };
+  `;
+
+  const worker    = new Worker(URL.createObjectURL(new Blob([workerCode])));
+  const offscreen = canvas.transferControlToOffscreen();
+  worker.postMessage({ canvas: offscreen }, [offscreen]);
+
+  canvas.onpaint = () => {
+    const elementImage = canvas.captureElementImage(form_element);   // Transferable
+    worker.postMessage({ elementImage }, [elementImage]);
+  };
+
+  worker.onmessage = ({ data }) => {
+    form_element.style.transform = data.transform.toString();        // 메인에서 동기화
+  };
+
+  new ResizeObserver(([entry]) => {
+    worker.postMessage({
+      width:  entry.devicePixelContentBoxSize[0].inlineSize,
+      height: entry.devicePixelContentBoxSize[0].blockSize
+    });
+    canvas.requestPaint();
+  }).observe(canvas, { box: 'device-pixel-content-box' });
+</script>
+```
+
+- 워커에서도 `drawElementImage(elementImage, ...)`가 `DOMMatrix`를 돌려주고, 그걸 `postMessage`로 메인에 되돌려 적용한다.
+- 위치가 **동적**이면 왕복 지연 때문에 어긋나므로, **메인 스레드에서 위치를 미리 계산해 `ElementImage` 전송과 동시에 `style.transform`을 적용**하라고 explainer가 권한다.
+- 다 쓴 `ElementImage`는 `close()`로 해제.
+
+---
+
+## 9. 실전 체크리스트 (커뮤니티가 실제로 데인 것들)
+
+| 항목 | 내용 |
+|---|---|
+| ☐ `requestPaint()` 최초 1회 | 안 하면 아무것도 안 그려지고, 첫 그리기에서 `InvalidStateError` |
+| ☐ 그리기는 `onpaint` 안에서 | 밖이면 1프레임 지연 |
+| ☐ 캔버스 그리드 = device pixel | `ResizeObserver` + `device-pixel-content-box`. 안 하면 텍스트가 흐리다 |
+| ☐ 좌표는 device pixel 단위 | CSS px 값에 `canvas.width / rect.width`를 곱하라. 안 하면 Retina에서 어긋난다 |
+| ☐ 캔버스 자식 크기 = 캔버스 CSS 크기 | 불일치하면 텍스처가 늘어나고 좌표 오차가 페이지 아래로 갈수록 누적 |
+| ☐ WebGL UV Y 뒤집기 | `vUv = vec2(x*0.5+0.5, 0.5 - y*0.5)` |
+| ☐ 배경은 불투명 색 | 반투명 배경은 셰이더 효과가 비쳐 나온다 |
+| ☐ `style.transform` 동기화 | 안 하면 클릭·포커스·find-in-page 하이라이트 위치가 전부 어긋난다 |
+| ☐ 텍스트에는 `LINEAR` 필터 | mipmap보다 결과가 낫다 (WICG 예제 주석) |
+| ☐ `<canvas>`는 div가 아니다 | `width:100%` 기본값도 없고 콘텐츠 높이로 자라지도 않는다. 크기를 명시하라 |
+| ☐ 히트테스트가 필요 없으면 `inert` | WICG WebGL 예제가 `<div id="draw_element" inert>`로 히트테스트를 끈다 |
+| ☐ 왜곡이 크면 클릭이 어긋남을 인지 | 큰 전환 중에는 `pointer-events: none` 등으로 처리 |
+| ☐ 스크롤 콘텐츠는 신중히 | 캔버스 안에서는 컴포지터 스레드 스크롤이 불가. 캔버스 전체를 스크롤시키는 편이 낫다 |
diff --git a/research/canvas/04-fallbacks.md b/research/canvas/04-fallbacks.md
new file mode 100644
index 0000000..a546795
--- /dev/null
+++ b/research/canvas/04-fallbacks.md
@@ -0,0 +1,165 @@
+# 04. 폴백 전략 비교
+
+> HTML-in-Canvas를 못 쓰는 브라우저(Firefox, Safari, 그리고 플래그/OT 없는 Chrome Stable 전부)에서 **비슷한 인상**을 내는 방법들.
+> 핵심 질문 3개로 갈린다: **① 상호작용을 유지하는가 ② 매 프레임 갱신되는가 ③ 렌더된 픽셀을 셰이더가 읽을 수 있는가**
+
+---
+
+## 1. 한눈에 보는 비교표
+
+| 방식 | 원리 | 상호작용<br>유지 | 매 프레임<br>실시간 | 픽셀을<br>셰이더로 | CSS 충실도 | 접근성 | 브라우저 | 비용 |
+|---|---|:---:|:---:|:---:|---|---|---|---|
+| **A. 네이티브 HTML-in-Canvas** | 브라우저가 요소 렌더링을 캔버스/텍스처로 직접 복사 | ✅ 완전 | ✅ | ✅ | 100% (브라우저 본체) | ✅ 자동 (DOM 그대로) | Chrome 148+ OT / 플래그만 | 낮음 (GPU 경로) |
+| **B. `three-html-render` 폴리필** | 네이티브 있으면 fast path, 없으면 `foreignObject` 래스터화 + DOM 오버레이 | ✅ (오버레이가 이벤트 수신) | △ 무효화마다 재래스터 | ✅ | 높음 (브라우저 렌더러 재사용) | ✅ (실 DOM 유지) | 전 브라우저 | 중 (직렬화·이미지 디코드) |
+| **C. SnapDOM** | DOM → 인라인 SVG `foreignObject` → 래스터화 | ❌ 정지 이미지 | ❌ | ✅ | **매우 높음** (그라디언트·필터·블렌드·transform 포함) | ❌ 별도 대체 필요 | 전 모던 브라우저 | 낮음 (html2canvas 대비 2~16배 빠름) |
+| **D. `foreignObject` 직접 구현** | 직접 SVG 직렬화 → `<img>` → `drawImage` | ❌ | ❌ | ✅ | 높음 (단 폰트·이미지 인라인 직접 처리) | ❌ | 전 모던 브라우저<br>(Safari 제약 있음) | 낮음, 단 구현 부담 |
+| **E. html2canvas** | 브라우저 렌더러를 **JS로 재구현**해 DOM을 다시 그림 | ❌ | ❌ | ✅ | **낮음** — 미지원 CSS 목록이 길다 | ❌ | 전 브라우저 | 높음 (느림) |
+| **F. CSS3DRenderer (three.js)** | 실제 DOM 요소를 `matrix3d`로 3D 배치 | ✅ 완전 | ✅ | **❌ 불가** | 100% (진짜 DOM) | ✅ | 전 브라우저 | 낮음 |
+| **G. `backdrop-filter` + SVG `feDisplacementMap`** | 배경 레이어를 변위 맵으로 굴절 | ✅ (위 콘텐츠 그대로) | ✅ (CSS 합성) | ❌ (고정 필터 셋) | — | ✅ | **Chromium만.** Safari·Firefox는 `backdrop-filter: url()` 미지원 → 블러로 degrade | 낮음~중 (GPU) |
+| **H. View Transitions API** | 전/후 **스냅샷 2장**을 CSS로 크로스페이드/클립 | 전환 중 ❌ | 전환 중 ❌ | ❌ | 100% | ✅ | Chrome/Edge/Safari 18+ (Firefox 뒤처짐) | 낮음 |
+| **I. 배경 캔버스 오버레이** | HTML 뒤/앞에 별도 `<canvas>`를 깔고 이펙트만 그림 | ✅ | ✅ | **❌ HTML을 못 읽음** | — | ✅ | 전 브라우저 | 낮음 |
+| **J. Satori / 서버 렌더** | 서버에서 HTML/CSS → SVG/PNG | ❌ | ❌ | ✅ | 중 (지원 CSS 부분집합) | ❌ | 무관 | 서버 비용 |
+
+---
+
+## 2. 각 방식의 실무 판단
+
+### A. 네이티브 (기준선)
+당연히 최선이지만 **오늘 프로덕션 불가**. 나머지 전부는 "A의 어떤 성질을 포기할 것인가"의 문제다.
+
+### B. `three-html-render` 폴리필 — **가장 현실적인 "같은 코드, 전 브라우저" 해법**
+
+`https://github.com/repalash/three-html-render` (MIT). three.js 공식 예제 `webgl_materials_texture_html.html`이 실제로 이걸 쓴다.
+
+```js
+if (!('requestPaint' in HTMLCanvasElement.prototype)) {
+  const { installHtmlInCanvasPolyfill } = await import('three-html-render/polyfill');
+  installHtmlInCanvasPolyfill();
+}
+```
+
+- **API 표면을 그대로 제공**: `requestPaint()`, `captureElementImage()`, `drawElementImage()`, `texElementImage2D()`, `copyElementImageToTexture()`.
+- 내부 동작: 캔버스 자식을 오프스크린 host div로 옮기고 → SVG `foreignObject`로 변환 → `<img>`로 2D 캔버스에 렌더 → 텍스처 업로드. DOM 오버레이를 CSS `matrix3d`로 3D 지오메트리에 정렬해 **포인터 이벤트는 진짜 DOM이 받는다.**
+- Chrome Canary에서는 네이티브 `texElementImage2D` fast path를 자동으로 탄다.
+- three.js 0.150.0+ 및 standalone WebGL/WebGPU 지원.
+
+**알려진 한계 (README 명시):**
+- `textarea` 내부 스크롤이 텍스처에 반영되지 않음
+- `contenteditable`의 캐럿/선택 영역이 렌더되지 않음
+- 동적 스타일시트는 수동 무효화 필요
+- **`:visited`는 폴리필 불가** (브라우저 보안)
+- 일부 CSS가 `foreignObject` 컨텍스트에서 다르게 렌더됨
+
+**판정**: three.js 기반 3D UI라면 **이걸 쓰고, 네이티브가 켜지면 자동으로 빨라지는 구조**가 정답.
+
+### C. SnapDOM — **정지 스냅샷이 필요할 때 최선**
+
+`https://snapdom.dev` — DOM을 인라인 SVG `foreignObject`로 직렬화한 뒤 브라우저 네이티브 파이프라인으로 래스터화.
+- "브라우저가 화면에 그릴 수 있는 것이면 대체로 캡처된다" — 그라디언트, 필터, 블렌드 모드, transform, 최신 CSS 포함.
+- html2canvas 대비 **2~16배 빠름** (복잡한 요소 기준, 단순 요소는 1ms 미만).
+- **한계**: 정지 이미지다. 매 프레임 재캡처하면 GC와 이미지 디코딩 비용이 프레임을 잡아먹는다.
+
+**판정**: "클릭 순간에 카드가 산산조각 나며 사라진다" 같은 **일회성 트랜지션**에는 충분하다. 스냅샷을 한 번 뜬 뒤 원본 DOM을 숨기고, 스냅샷 텍스처만 셰이더로 애니메이션하면 A와 시각적으로 구분이 잘 안 된다. 지속적 실시간 왜곡에는 부적합.
+
+### D. `foreignObject` 직접 구현
+SnapDOM/html-to-image가 하는 일을 손으로 하는 것. 직접 만들 이유는 거의 없다. 다만 **왜 라이브러리들이 폰트·이미지를 base64로 인라인하는지**는 알아두는 게 좋다 — SVG `<img>`는 외부 리소스를 가져오지 못하고, 외부 리소스가 있으면 **canvas가 taint되어 `getImageData`/WebGL 업로드가 막힌다.**
+
+주요 함정:
+- 외부 이미지 → CORS 필요, 아니면 캔버스 taint
+- 웹폰트 → `@font-face`의 `src`를 data URI로 인라인해야 함
+- `<canvas>` 자식이 taint 상태면 전체 실패
+- Safari는 `foreignObject` 안의 일부 CSS 처리가 Chromium과 다르다
+
+### E. html2canvas — **더 이상 기본 선택지가 아니다**
+브라우저 렌더링 엔진을 JS로 재구현하는 방식이라, 모든 CSS 속성·레이아웃 예외·텍스트 렌더링 엣지케이스를 손으로 재현해야 한다. 그래서 **"지원하지 않는 CSS 속성" 목록이 길다.** 외부 도메인 이미지는 CORS 헤더 없이는 못 읽는다. 느리다.
+**판정**: 레거시 유지보수가 아니면 SnapDOM 또는 html-to-image로 갈아타라.
+
+### F. `CSS3DRenderer` — **"3D 배치"만 필요하면 이게 정답**
+three.js 애드온. 실제 DOM 요소에 `matrix3d`를 걸어 3D 공간에 배치한다.
+- **장점**: 100% 진짜 DOM. 상호작용·접근성·폰트 렌더링 완벽. 전 브라우저. 가볍다.
+- **결정적 한계**: 요소는 **DOM 합성 레이어**로 남으므로 **WebGL 씬과 진짜로 섞이지 않는다.** 깊이 테스트, 오클루전, 셰이더 왜곡, 조명, 그림자, 후처리 어느 것도 적용할 수 없다. 항상 WebGL 캔버스 위/아래 별도 레이어다.
+- 즉 **평면을 3D로 눕히는 것까지는 되지만, 천이 구겨지거나 유리에 굴절되게는 못 한다.**
+
+**판정**: "카드를 3D로 기울인다" → CSS3DRenderer. "카드를 물결처럼 왜곡한다" → 불가.
+
+### G. `backdrop-filter` + SVG `feDisplacementMap` — **Liquid Glass 폴백의 정석**
+`filter` 프로퍼티로 SVG 필터를 참조해 배경 레이어를 굴절시킨다. `feDisplacementMap`이 두 번째 이미지의 R/G 채널로 첫 이미지를 공간 변위시키므로, 높이장/법선/스넬 법칙 기반 변위 맵을 만들면 진짜 굴절처럼 보인다.
+
+**브라우저 현실 (2026 기준):**
+- **Chromium(Chrome/Edge/Brave/Arc)**: `backdrop-filter: url(#filter)` 동작 → 진짜 굴절
+- **Safari / Firefox**: `backdrop-filter`에 SVG 필터 URL을 **지원하지 않는다.** GPU 가속 안정성 때문에 내장 CSS 필터 함수로 제한. → **자동으로 블러 글래스모피즘으로 degrade** (별도 코드 불필요)
+- 상호운용 표준화 논의 진행 중: [w3c/svgwg#1142](https://github.com/w3c/svgwg/issues/1142) "define interoperable backdrop displacement/refraction for 'liquid glass' UI"
+
+**판정**: 영상의 "Apple Liquid Glass" 인상만 필요하다면 **HTML-in-Canvas 없이 CSS+SVG로 상당 부분 재현 가능**하고, 브라우저 지원 범위도 오히려 넓다. 다만 "유리 아래 콘텐츠가 마우스를 따라 실시간으로 출렁이며 색수차까지" 수준은 셰이더가 필요하다.
+
+### H. View Transitions API — **"상태 A → 상태 B" 전환 한정**
+- `document.startViewTransition()` 이 전/후 스냅샷을 만들고 `::view-transition-*` 의사 요소를 CSS로 애니메이션한다.
+- **Matt Rothenberg의 정확한 대비**: "View Transitions는 **두 개의 스냅샷**을 clip-path와 opacity로 애니메이션한다. (HTML-in-Canvas는) **두 개의 라이브 렌더**와 셰이더를 준다."
+- 즉 불타는 다크모드 전환의 **타이밍과 구조**는 View Transitions로 잡되, **불꽃의 픽셀 단위 시뮬레이션**은 포기하고 CSS `mask-image`(노이즈 PNG/SVG) 애니메이션으로 근사하는 게 현실적인 폴백이다. `mask-image` + `mask-position` 애니메이션으로 "타들어가는 마스크"는 꽤 그럴듯하게 나온다.
+
+### I. 배경 캔버스 오버레이 — **가장 흔한 오해**
+"어차피 HTML 뒤에 canvas 깔면 되는 거 아냐?"에 대한 Matt Rothenberg의 답:
+
+> **"배경 캔버스는 그릴 수는 있어도 읽을 수는 없다(A background canvas can draw. It can't read.)"**
+
+이 방식으로 **불가능한 것 3가지:**
+1. **픽셀 단위 왜곡** — CSS `transform`은 요소 박스 전체에 걸린다. div를 회전/스케일/스큐할 수는 있어도, 그 안에 렌더된 **텍스트를 배럴 왜곡**하거나 **input의 아래쪽 절반만 압축**할 수는 없다.
+2. **두 HTML 상태의 커스텀 블렌딩** — 라이트/다크 테마를 동시에 텍스처로 올려 노이즈·불·스캔라인으로 픽셀 단위 합성.
+3. **렌더된 콘텐츠에 반응** — 셰이더가 픽셀 휘도를 읽어 어두운 픽셀과 밝은 픽셀을 다르게 처리하거나, 렌더된 HTML의 엣지를 검출해 **바운딩 박스가 아니라 콘텐츠의 실제 모양을 따라가는** 효과.
+
+**판정**: 글로우, 파티클, 커서 트레일, 배경 그라디언트 같은 **"HTML을 읽을 필요 없는" 효과라면 이 방식으로 충분하고 훨씬 싸다.** 실제로 많은 "화려한" 사이트가 이 정도로 만족한다.
+
+### J. Satori 등 서버 렌더
+OG 이미지 생성처럼 **결과가 이미지여도 되는** 경우. 지원 CSS 부분집합이 제한적이지만 서버에서 안정적으로 돈다. 브라우저 인터랙션 효과의 폴백으로는 부적합.
+
+---
+
+## 3. 목표별 권장 조합
+
+| 만들고 싶은 것 | 네이티브 있을 때 | 폴백 |
+|---|---|---|
+| **3D 씬 안의 상호작용 UI** (영상의 천 위 포트폴리오, 3D 책) | `THREE.HTMLTexture` + `InteractionManager` | **`three-html-render` 폴리필** (동일 코드, 자동 전환). 3D 배치만 필요하면 `CSS3DRenderer` |
+| **Liquid Glass / 굴절 오버레이** | WebGL 굴절 셰이더 + `drawElementImage` | **`backdrop-filter` + SVG `feDisplacementMap`** (Chromium 굴절, Safari/FF 블러 degrade) |
+| **다크모드 불타는 전환** | 두 텍스처 + FBM 셰이더 | **View Transitions + CSS `mask-image` 노이즈 애니메이션** |
+| **폼 포커스 글로우 / 배경 반응** | 셰이더 한 패스에서 글로우+콘텐츠 합성 | **배경 캔버스 오버레이** (I). 글로우가 폼 *뒤*, 도트 *앞*에 오는 레이어링만 포기 |
+| **버튼 리플 / 클릭 시 산산조각** | `drawElementImage` + 픽셀 조작 | **SnapDOM으로 1회 스냅샷** → 요소 숨김 → 파티클 애니메이션 |
+| **HTML → 이미지/영상 내보내기** | `drawElementImage` + `canvas.captureStream()` | **SnapDOM** (클라이언트) 또는 **Satori/Puppeteer** (서버) |
+| **캔버스 앱의 리치 텍스트 UI** (Figma/Docs류) | `drawElementImage` | 현행 유지 (DOM 오버레이 또는 자체 텍스트 레이아웃) |
+
+---
+
+## 4. 실전 폴백 패턴 — CanvasUI 모델
+
+`canvasui.dev`(David Haz)가 채택한 원칙이 가장 건전하다:
+
+> "컴포넌트가 **런타임에 지원 여부를 감지하고 우아하게 degrade한다**. API가 없으면 콘텐츠는 그냥 일반 HTML로 렌더되고, 그래도 돌 수 있는 이펙트 부분은 계속 돈다."
+
+구현 형태:
+
+```js
+const HAS_HIC = 'requestPaint' in HTMLCanvasElement.prototype;
+
+if (HAS_HIC) {
+  canvas.setAttribute('layoutsubtree', '');
+  mountShaderEffect(canvas);          // 셰이더 왜곡 전체 경로
+} else {
+  canvas.replaceWith(...canvas.childNodes);   // HTML 을 문서로 승격
+  mountCssOnlyEffect(container);      // backdrop-filter / transition / mask 로 근사
+}
+```
+
+**핵심 설계 규칙 3가지:**
+1. **HTML을 먼저 쓰고 캔버스를 나중에 씌운다.** 캔버스가 없어도 페이지가 완성되어 있어야 한다.
+2. **캔버스는 장식이지 구조가 아니다.** 레이아웃·포커스 순서·읽기 순서는 전부 HTML이 결정한다.
+3. **효과의 "의미"와 "구현"을 분리한다.** "제출 시 폼이 사라진다"는 의미는 셰이더 왜곡으로도, CSS `scale`+`opacity`로도 표현된다. 폴백은 열화판이지 부재가 아니어야 한다.
+
+---
+
+## 5. 비용·성능 메모
+
+- **A(네이티브)**: 스냅샷은 브라우저 내부 디스플레이 리스트에서 나오므로 직렬화·디코딩이 없다. 다만 explainer가 경고하듯 **캔버스 안 콘텐츠는 컴포지터 스레드 스크롤/애니메이션 혜택을 잃고 JS에 묶인다.** 캔버스 안에 스크롤 영역을 넣기보다 캔버스 전체를 스크롤시켜라.
+- **B/C/D(foreignObject)**: 매 캡처마다 DOM 직렬화 → SVG 파싱 → 이미지 디코드. 60fps 지속 갱신에는 부적합. **무효화 시점에만 재캡처**하도록 설계할 것.
+- **E(html2canvas)**: 가장 느리다. 신규 채택 근거 없음.
+- **F(CSS3DRenderer)**: DOM 합성 레이어라 저렴하지만, 요소가 많으면 레이어 폭발.
+- **G(backdrop-filter)**: GPU 가속이지만 큰 영역에 걸면 비싸다. Safari/FF가 SVG 필터를 backdrop에 안 붙이는 이유가 정확히 이것(GPU 사용량·불안정성).
+- **I(배경 캔버스)**: 가장 싸다. HTML을 읽을 필요가 없다면 이걸 먼저 검토하라.
diff --git a/research/canvas/05-sources.md b/research/canvas/05-sources.md
new file mode 100644
index 0000000..0a1ccd8
--- /dev/null
+++ b/research/canvas/05-sources.md
@@ -0,0 +1,107 @@
+# 05. 출처 목록
+
+> 조사일 2026-08-20. ★ = 1차 출처(사양·구현·공식 발표). 나머지는 2차/커뮤니티.
+> 총 60개.
+
+---
+
+## A. 사양 · 제안 (1차)
+
+1. ★ https://github.com/WICG/html-in-canvas — WICG 공식 저장소. 이 문서 전체의 기준이 되는 living explainer(README.md)가 여기 있다.
+2. ★ https://github.com/WICG/html-in-canvas/blob/main/README.md — explainer 원문. `layoutsubtree`, `drawElementImage`, `paint` 이벤트, `captureElementImage`, 전체 IDL, read-back-allowed rendering 목록, 설계 대안 논의.
+3. ★ https://wicg.github.io/html-in-canvas/ — explainer의 GitHub Pages 렌더링본. 형식 스펙이 아니라 explainer 그 자체(정규 알고리즘 없음).
+4. ★ https://github.com/WICG/html-in-canvas/blob/main/security-privacy-questionnaire.md — W3C 보안·프라이버시 자기점검 답변 19문항. 무엇이 그려지지 않는지의 근거.
+5. ★ https://github.com/whatwg/html/pull/11588 — WHATWG HTML 스펙 PR "Add HTML-in-Canvas APIs" (2025-08-21 개설, **미머지**). GC 압박, 교차 캔버스 `ElementImage`, 중첩 canvas 구현 불일치 등 미해결 논의.
+6. ★ https://github.com/whatwg/html/issues/10650 — 원 이슈 스레드. 웹 개발자 긍정 신호의 출처.
+7. https://github.com/WICG/html-in-canvas/commits/main/README.md — 커밋 로그. `drawElement`→`drawHTMLElement`→`drawHTML`→`drawElementImage` 개명 이력과 `setHitTestRegions` 폐기 시점의 근거.
+8. https://github.com/w3ctag/design-reviews/issues/1204 — W3C TAG 디자인 리뷰.
+
+## B. Chromium 출시 프로세스 (1차)
+
+9. ★ https://chromestatus.com/feature/5172548013916160 — Chrome Platform Status "HTML-in-canvas". 상태 `In development`, 표준 성숙도, Gecko/WebKit/개발자 신호, 소유자, 동기.
+10. ★ https://chromestatus.com/api/v0/features/5172548013916160 — 위 항목의 원시 JSON. desktop/android/webview 출시 마일스톤이 모두 `null`임을 확인.
+11. ★ https://developer.chrome.com/blog/html-in-canvas-origin-trial — Chrome for Developers 공식 블로그 (Thomas Nattestad, Natalia Markoborodova, 최종수정 2026-05-19). OT 안내, 3단계 사용법, WebGL/WebGPU 코드, `getElementTransform` 행렬 유도, 한계.
+12. ★ https://developer.chrome.com/release-notes/148 — Chrome 148 릴리스 노트. Stable **2026-05-05**, HTML-in-canvas가 Origin Trials 섹션에 등재.
+13. ★ https://developer.chrome.com/origintrials/#/view_trial/3478467762190286849 — Origin Trial 등록 페이지 (열람에 로그인 필요).
+14. ★ https://groups.google.com/a/chromium.org/g/blink-dev/c/t_nGEmJ_v4s — **Intent to Experiment: HTML-in-canvas**. OT M148–M151, chromestatus/스펙 링크, Gecko·WebKit 입장, Jake Archibald의 "WebGL에서 텍스처 크기 지정 불가" 지적.
+15. ★ http://www.mail-archive.com/blink-dev@chromium.org/msg16735.html — **Intent to Extend Experiment**. DevTrial M138 시작, OT 데스크톱 M148–150 → **M154 연장**, 연장 사유("상당한 피드백 + WebGL/WebGPU·프라이버시 중대 변경").
+16. ★ http://www.mail-archive.com/blink-dev@chromium.org/msg16743.html — 위 연장 요청에 대한 **Mike Taylor LGTM (2026-06-11)**.
+17. ★ https://groups.google.com/a/chromium.org/g/blink-dev/c/LYJyOdLbOfY — "Ready for Developer Testing: HTML in Canvas: drawElement". 구 메서드명 시절의 DevTrial 공지.
+18. ★ https://crbug.com/500967896 — Chromium 추적 버그 (`Blink>Canvas`).
+19. ★ https://chromiumdash.appspot.com/schedule — Chrome 마일스톤 공식 스케줄. M148=2026-05-05, M150=2026-06-30, M152=2026-08-25, M154=**2026-09-22**, M155=2026-10-06.
+20. https://groups.google.com/g/html-in-canvas-developer-newsletter — Chrome 팀 운영 개발자 뉴스레터(변경 공지 채널).
+
+## C. 타 브라우저 입장 (1차)
+
+21. ★ https://github.com/mozilla/standards-positions/issues/1076 — Mozilla 입장. **open, "Needs proposed position"**. 2024-09-25 개설, Graphics 팀 배정. 공식 입장 미표명 = "No signal".
+22. ★ https://github.com/WebKit/standards-positions/issues/630 — WebKit 입장. **open, 라벨 없음 = "No signal"**. 이전 제안(canvas place element #403)의 retained-mode 우려로 immediate-mode 설계 회귀했다는 배경 기재.
+
+## D. 공식 예제 · 데모 (1차)
+
+23. ★ https://wicg.github.io/html-in-canvas/Examples/complex-text.html — 회전된 복합 텍스트(RTL·세로쓰기·이모지·인라인 이미지·SVG) 2D 데모. `ctx.rotate` + `drawElementImage` + `requestPaint()` 킥스타트 패턴.
+24. ★ https://wicg.github.io/html-in-canvas/Examples/text-input.html — 캔버스 안 완전 동작 폼(체크박스·라디오·range·submit). "Spaceship Control Panel".
+25. ★ https://wicg.github.io/html-in-canvas/Examples/pie-chart.html — 멀티라인 라벨 파이 차트. 접근성 개선 유스케이스의 대표 예.
+26. ★ https://wicg.github.io/html-in-canvas/Examples/webGL.html — `texElementImage2D`로 3D 큐브에 HTML. **신/구 시그니처 try/catch 패턴의 원본**.
+27. ★ https://wicg.github.io/html-in-canvas/Examples/webgpu-jelly-slider/ — **영상의 젤리 슬라이더 원본**. `copyElementImageToTexture`의 현재 dictionary 시그니처 실사용 예 (소스: `Examples/webgpu-jelly-slider/src/index.ts`).
+28. ★ https://chrome.dev/html-in-canvas/ — Chrome 팀 공식 데모 갤러리 (3D 빌보드, Tokyo 3D 라벨, 3D 책, Fluid Prism, D3 시각화, OffscreenCanvas, iframe 등).
+29. ★ https://github.com/GoogleChromeLabs/css-web-ui-demos/blob/main/html-in-canvas/awesome-html-in-canvas.md — **"Awesome HTML-in-Canvas"** 커뮤니티 데모·프레임워크 큐레이션 목록.
+
+## E. 영상에 나온 데모의 원본
+
+30. https://arrival.space/htmlcanvas — **영상의 "천 위 포트폴리오"**. 게임 안에 걸린 천에 폼이 그려지고 캐릭터가 부딪히는 데모. 작성자 **Thomas Richter-Trummer (@fimbox)**. 소스: https://github.com/fimbox/html-in-canvas/blob/main/plugins/html-cloth.mjs
+31. https://mattrothenberg.com/notes/html-in-canvas/ — **Matt Rothenberg (2026-04-04)**. 영상의 **"불타는 다크모드 전환"(Demo 3: The Burn Transition)** 과 **"폼 포커스 글로우 + 제출 시 왜곡"(Demo 1: The Focus Ring)** 의 원본. "배경 캔버스는 그릴 수는 있어도 읽을 수는 없다" 논증, 5구역 화염 셰이더 구조, 실전 함정 6가지.
+32. https://html-in-canvas.dev/demos/liquid-glass/ — **Liquid Glass Distortion** (En Dash Consulting, 2026-04-10 작성 / 2026-08-19 갱신). 굴절·색수차·프레넬·코스틱 셰이더 + 라이브 DOM.
+33. https://github.com/jeantimex/liquid-glass-html-in-canvas — 또 다른 Liquid Glass 구현 (WebGL).
+34. https://github.com/jeantimex/glass-effect-webgpu — WebGPU 기반 실시간 리퀴드 글래스 렌더러.
+35. https://compiz-web.vercel.app/ — Max Leiter. 셰이더 기반 페이지 전환(Compiz 오마주). 소스: https://github.com/MaxLeiter/compiz-web
+36. https://x.com/wesbos/status/2041594973674483851 — Wes Bos "Duck Hunt TODO" (폼이자 슈팅 게임). 소스: https://github.com/wesbos/hot-tips/blob/main/html-in-canvas/demos/wicg/website-shatter-shooter.html
+37. https://x.com/wesbos/status/2041974552478052507 — Wes Bos "Wobble Buttons" (리플 버튼).
+38. https://html-in-canvas.vittoretrivi.dev/examples/vanish-input — 영상의 "제출하면 입력이 사라지는" 효과 원본. 같은 저자의 login / page-curl / basic-ui 예제도 참조. 소스: https://github.com/motiontx/html-in-canvas
+
+## F. 데모 · 컴포넌트 모음
+
+39. https://html-in-canvas.dev/ + https://html-in-canvas.dev/demos/ — 비공식이지만 가장 잘 정리된 레퍼런스 사이트. 17개 데모(2D/WebGL/WebGPU), Hello World부터 OffscreenCanvas 워커까지. 작성: En Dash.
+40. https://hicshowroom.com/ — HiC Showroom. 각 이펙트가 독립 웹 컴포넌트로 되어 있어 한 줄 import로 삽입 가능.
+41. https://canvasui.dev/ + https://canvasui.dev/docs — **CanvasUI (David Haz)**. 40+ 이펙트 컴포넌트, React/Solid/Preact/Vue/Svelte/vanilla TS, shadcn 레지스트리 방식. **런타임 지원 감지 + graceful degradation 모델**의 참고 사례.
+42. https://pixijs-html-in-canvas.vercel.app — Zyie. PixiJS 기반 "HTML Laser" 랜딩 페이지(부서졌다 복원).
+43. https://vav-labs.com/case-studies/quest-signal/ — Vav Labs. Godot 씬에 접근성 있는 DOM 패널을 월드스페이스 WebGL 텍스처로.
+
+## G. 프레임워크 통합 (1차)
+
+44. ★ https://threejs.org/docs/#api/en/textures/HTMLTexture — three.js `HTMLTexture` 공식 문서.
+45. ★ https://threejs.org/examples/webgl_materials_texture_html.html — three.js 공식 예제. `HTMLTexture` + `InteractionManager` + 폴리필 자동 전환의 완성 코드.
+46. ★ https://github.com/mrdoob/three.js/pull/31233 — HTMLTexture 도입 PR. **dev 브랜치 2026-04-10 머지, r184 포함.** WebGLRenderer/WebGPURenderer 양쪽 지원, `matrix3d` 자동 계산, 레이캐스팅 불필요.
+47. ★ https://raw.githubusercontent.com/mrdoob/three.js/dev/src/textures/HTMLTexture.js — `HTMLTexture` 구현 원문(50줄). `parent.onpaint`로 `needsUpdate` 세우고 `parent.requestPaint()` 킥스타트.
+48. ★ https://developer.playcanvas.com/user-manual/graphics/advanced-rendering/html-in-canvas/ — PlayCanvas 공식 문서. `device.supportsHtmlTextures`, `texture.setSource(el)`. **WebGL 백엔드만, WebGPU 대기 중.**
+49. https://playcanvas.vercel.app/#/misc/html-texture — PlayCanvas 데모.
+50. https://pixijs.download/release/docs/rendering.HTMLSource.html — PixiJS `HTMLSource` API 문서.
+51. https://doc.babylonjs.com/features/featuresDeepDive/materials/using/htmlTexture/ — Babylon.js HTML Texture 문서. 플레이그라운드: https://playground.babylonjs.com/#8RDVXG#1
+52. https://www.remotion.dev/docs/transitions/presentations/custom-html-in-canvas — Remotion의 HTML-in-Canvas 트랜지션 프레젠테이션.
+
+## H. 폴백 · 폴리필
+
+53. ★ https://github.com/repalash/three-html-render — **HTML-in-Canvas 폴리필**. `installHtmlInCanvasPolyfill()`이 `requestPaint`/`captureElementImage`/`drawElementImage`/`texElementImage2D`/`copyElementImageToTexture`를 전부 제공. 내부는 `foreignObject` 래스터화 + `matrix3d` DOM 오버레이. 네이티브 있으면 fast path. MIT. 한계 목록(textarea 스크롤, contenteditable 캐럿, `:visited` 불가) 포함.
+54. https://snapdom.dev/docs/ — SnapDOM. `foreignObject` 직렬화 + 네이티브 래스터화. html2canvas 대비 2~16배 빠르고 CSS 충실도가 훨씬 높다.
+55. https://dev.to/tinchox5/why-snapdom-beats-html2canvas-for-dom-to-image-capture-14ch — SnapDOM vs html2canvas 원리 비교. html2canvas가 "브라우저 렌더러를 JS로 재구현"하는 방식이라 미지원 CSS 목록이 긴 이유.
+56. https://npm-compare.com/dom-to-image,html-to-image,html2canvas — dom-to-image / html-to-image / html2canvas 비교.
+57. https://kube.io/blog/liquid-glass-css-svg/ — CSS + SVG만으로 굴절(refraction) 구현. `feDisplacementMap` 변위 맵 생성 방법.
+58. https://blog.logrocket.com/how-create-liquid-glass-effects-css-and-svg/ — `backdrop-filter` + SVG 필터 조합과 **Safari/Firefox의 `backdrop-filter: url()` 미지원**, 자동 블러 degrade.
+59. https://github.com/w3c/svgwg/issues/1142 — "Filter Effects: define interoperable backdrop displacement/refraction for 'liquid glass' UI". 이 폴백을 표준화하려는 진행 중 논의.
+60. https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer — three.js `CSS3DRenderer`. 진짜 DOM을 3D 배치하지만 WebGL 씬과 깊이·셰이더로 섞이지 않는다.
+
+## I. 해설 기사 (2차, 실전 노트로 유용)
+
+61. https://tympanus.net/codrops/2026/05/13/exploring-the-html-in-canvas-proposal/ — Codrops, Vittorio Retrivi (2026-05-13). React Three Fiber + `HTMLTexture` + CRT 셰이더 완성 코드, 전체 화면 후처리가 접근성을 훼손할 수 있다는 지적.
+62. https://frontendmasters.com/blog/the-web-is-fun-again-first-experiments-with-html-in-canvas/ — Frontend Masters, Amit Sheen (2026-04-21). 픽셀 조작 데모 10종, "크기/리사이즈가 유일하게 덜 익은 부분", `requestPaint()` 킥스타트 필수, `<canvas>`가 div처럼 동작하지 않는 문제.
+63. https://biggo.com/news/202508030712_Chrome_HTML-in-Canvas_Security_Concerns — 개발자 커뮤니티의 보안·핑거프린팅 우려 정리. **구 API명(`drawElement`, `texElement2D`, `setHitTestRegions`)이 쓰인 시점의 기사**라 명칭 대조용으로 유용.
+64. https://www.equero.dev/posts/html-in-canvas-wicg-proposal-drawelementimage/ — Enrique Quero. `drawElementImage`가 `foreignObject` 해킹과 html2canvas를 사실상 대체할 것이라는 관점.
+65. https://imiel.dev/blog/html-in-canvas-wicg-drawelementimage-guide — Imiel Visser. "OffscreenCanvas 이후 최대의 Canvas API 추가"라는 관점의 가이드.
+66. https://maximov.by/html-in-canvas-guide.html — 실용 가이드. 플래그 활성화, 성능 주의사항.
+67. https://azukiazusa.dev/en/blog/html-in-canvas-api/ — 일본어권 해설(영문판). API 개요 정리.
+68. https://flaviocopes.com/canvas-ui/ — Flavio Copes. CanvasUI 소개.
+69. https://dev.to/manikant92/google-io-2026-quietly-ended-a-20-year-old-web-problem-meet-the-html-in-canvas-api-4h9d — Google I/O 2026 맥락에서의 소개.
+70. https://developer.chrome.com/docs/modern-web-guidance — Chrome의 AI 코딩 도구용 최신 웹 가이던스(HTML-in-Canvas 항목 포함). 저장소: https://github.com/GoogleChrome/guidance
+
+## J. 참고 (영상 원본)
+
+71. `D:\workspace\designpaca\research\youtube\nomad-html.en.srt` / `nomad-html.ko.srt` — 노마드코더 "이게 진짜 HTML이라고?" 자막 원문. 챕터: 0:00 인트로 / 2:30 왜 불가능했나 / 2:51 작동 원리 / 3:52 직접 만들기(반사 버튼) / 6:03 아직 쓸 수 없다.
diff --git a/research/canvas/_raw/awesome.md b/research/canvas/_raw/awesome.md
new file mode 100644
index 0000000..e16abb7
--- /dev/null
+++ b/research/canvas/_raw/awesome.md
@@ -0,0 +1,36 @@
+# Awesome HTML-in-Canvas
+
+This is a collection of resources to help developers build with HTML-in-Canvas.
+
+Check out the HTML-in-canvas deployed at [chrome.dev](https://chrome.dev/html-in-canvas/) or view the source code [here](https://github.com/GoogleChromeLabs/css-web-ui-demos/tree/main/html-in-canvas).
+
+## HTML-in-Canvas demos by the ecosystem 
+This is a curated list of links to awesome HTML-in-canvas demos created by the ecosystem. Note that the demos featured here are contributed by third-party developers and are not created or maintained by Google. Read the [contribution guidelines](https://github.com/GoogleChromeLabs/css-web-ui-demos/blob/main/CONTRIBUTING.md#add-a-demo-to-the-awesome-html-in-canvas-list) to suggest another demo.
+
+| Demo | Description | Author | Source code | 
+| :--- | :--- | :--- | :--- |
+| [Duck Hunt TODO](https://x.com/wesbos/status/2041594973674483851) | A form that's also a shooting game | [Wes Bos](https://github.com/wesbos) | [Source](https://github.com/wesbos/hot-tips/blob/main/html-in-canvas/demos/wicg/website-shatter-shooter.html) |
+| [Wobble Buttons](https://x.com/wesbos/status/2041974552478052507) | Interactive ripple-effect buttons | [Wes Bos](https://github.com/wesbos) | [Source](https://github.com/wesbos/hot-tips/blob/main/html-in-canvas/demos/wicg/ripple-buttons.html) |
+| [Compiz Web](https://compiz-web.vercel.app/) | Shader-driven web page transitions demo | [Max Leiter](https://github.com/MaxLeiter) | [Source](https://github.com/MaxLeiter/compiz-web) |
+| [HTML cloth](https://arrival.space/htmlcanvas) | Customize a form on a hanging cloth inside a game | [Thomas Richter-Trummer](https://github.com/fimbox) | [Source](https://github.com/fimbox/html-in-canvas/blob/main/plugins/html-cloth.mjs) |
+| [PixiJS HTML Laser](https://pixijs-html-in-canvas.vercel.app) | Interactive landing page that shatters and heals over time | [Zyie](https://github.com/Zyie) | [Source](https://github.com/Zyie/pixijs-html-in-canvas) |
+| [Quest Signal](https://vav-labs.com/case-studies/quest-signal/) | A playable Godot scene with accessible, interactive DOM panels rendered as world-space WebGL textures | [Vav Labs](https://vav-labs.com/) | [Source](https://github.com/Vav-Labs/quest-signal) |
+| More | demos | coming | soon... |
+
+## Framework Support 
+This is a list of frameworks that have added support for HTML-in-Canvas along with the documentation 
+| Framework | Description | Documentation | Sample Code | 
+| :--- | :--- | :--- | :--- |
+| [Three.js](https://threejs.org/) | JavaScript library used to create and display animated 3D computer graphics with WebGL & WebGPU | [HTMLTexture](https://goo.gle/HIC-threejs) | [Sample](https://goo.gle/HIC-threejs-example) |
+| [PlayCanvas](https://playcanvas.com/) | Open source engine and tools for building amazing 3D experiences | [html-texture](https://goo.gle/HIC-playcanvas) | [Sample](https://goo.gle/HIC-playcanvas-example) |
+| [PixiJS](https://pixijs.com/) | Fast, lightweight 2D rendering library for WebGL & WebGPU | [HTMLSource](https://pixijs.download/release/docs/rendering.HTMLSource.html) | [Sample](https://pixijs-html-in-canvas.vercel.app/) |
+| [Babylon.js](https://babylonjs.com/) | Babylon.js: Powerful, Beautiful, Simple, Open 3D engine for the web | [HTML Texture](https://doc.babylonjs.com/features/featuresDeepDive/materials/using/htmlTexture/) | [Sample](https://playground.babylonjs.com/#8RDVXG#1) |
+| [CanvasUI](https://canvasui.dev/) | An open source library of tasteful html-in-canvas & WebGL components. | [Introduction](https://canvasui.dev/docs) | [Sample](https://canvasui.dev/docs/components/bend) |
+
+## Disclaimer
+
+**Important note on external content**: The demos linked in the [HTML-in-Canvas demos by the ecosystem](#html-in-canvas-demos-by-the-ecosystem) section are created by third-party developers and are not created, maintained, or supported by Google. Please be aware of the following:
+
+* No endorsement: Inclusion of these links does not constitute an endorsement or recommendation by Google.
+* Subject to change: Content, functionality, and availability are at the sole discretion of the third-party owners and may change or be removed without notice.
+* No liability: Google assumes no responsibility or liability for the accuracy, legality, or performance of these demos.
diff --git a/research/canvas/_raw/ex-complex-text.html b/research/canvas/_raw/ex-complex-text.html
new file mode 100644
index 0000000..889ad97
--- /dev/null
+++ b/research/canvas/_raw/ex-complex-text.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Demo of complex text in canvas</title>
+
+<style>
+  canvas {
+    border: 1px solid blue;
+    width: 638px;
+    height: 318px;
+  }
+</style>
+
+<canvas id="canvas" width="638" height="318" layoutsubtree="true">
+  <div id="draw_element" style="width: 550px;">
+    Hello from <a href="https://github.com/WICG/html-in-canvas">html-in-canvas</a>!
+    <br>I'm multi-line, <b>formatted</b>,
+    rotated text with emoji (&#128512;), RTL text
+    <span dir=rtl>من فارسی صحبت میکنم</span>,
+    vertical text,
+    <p style="writing-mode: vertical-rl;">
+      这是垂直文本
+    </p>
+    an inline image (<img width="150" src="wolf.jpg">), and
+    <svg width="50" height="50">
+      <circle cx="25" cy="25" r="20" fill="green" />
+      <text x="25" y="30" font-size="15" text-anchor="middle" fill="#fff">
+        SVG
+      </text>
+    </svg>!
+  </div>
+</canvas>
+
+<script>
+  const canvas = document.getElementById('canvas');
+  const ctx = canvas.getContext('2d');
+  canvas.onpaint = (event) => {
+    ctx.reset();
+    ctx.rotate((15 * Math.PI) / 180);
+    ctx.translate(80 * devicePixelRatio, -20 * devicePixelRatio);
+    let transform = ctx.drawElementImage(draw_element, 0, 0);
+    draw_element.style.transform = transform.toString();
+  };
+  canvas.requestPaint(); // Request an initial paint event.
+
+  const observer = new ResizeObserver(([entry]) => {
+    canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
+    canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+  });
+  observer.observe(canvas, {box: 'device-pixel-content-box'});
+</script>
diff --git a/research/canvas/_raw/ex-pie-chart.html b/research/canvas/_raw/ex-pie-chart.html
new file mode 100644
index 0000000..606f2f5
--- /dev/null
+++ b/research/canvas/_raw/ex-pie-chart.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Pie chart</title>
+
+<style>
+  .pie {
+    width: 250px;
+    height: 250px;
+  }
+  .pie .label {
+    text-align: center;
+    max-width: 40%;
+    font-family: sans-serif;
+  }
+  .pie .label .val {
+    display: block;
+    font-size: xx-large;
+    font-weight: bold;
+  }
+</style>
+
+<canvas layoutsubtree class="pie" role="list" aria-label="Pie Chart">
+  <div class="label" role="listitem" tabindex="0" data-val="0.45" data-color="tomato">
+    <span class="val">45%</span>Apple
+  </div>
+  <div class="label" role="listitem" tabindex="0" data-val="0.35" data-color="cornflowerblue">
+    <span class="val">35%</span>Blackberry / Bramble
+  </div>
+  <div class="label" role="listitem" tabindex="0" data-val="0.20" data-color="gold">
+    <span class="val">20%</span>Durian
+  </div>
+</canvas>
+
+<script>
+  const canvas = document.querySelector('canvas');
+  const ctx = canvas.getContext('2d');
+
+  canvas.onpaint = () => {
+    ctx.reset();
+
+    // 1. Center the coordinate system.
+    const radius = 0.95 * Math.min(canvas.width, canvas.height) / 2;
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+
+    let angle = 0;
+    let focusedPath = null;
+    for (const label of canvas.children) {
+      const slice = Number(label.dataset.val) * Math.PI * 2;
+
+      // 2. Draw the wedge.
+      const grad = ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
+      grad.addColorStop(0, `color-mix(${label.dataset.color}, white 40%)`);
+      grad.addColorStop(1, label.dataset.color);
+      ctx.fillStyle = grad;
+      const path = new Path2D();
+      path.moveTo(0, 0);
+      path.arc(0, 0, radius, angle, angle + slice);
+      path.closePath();
+      ctx.fill(path);
+      if (document.activeElement === label)
+        focusedPath = path;
+
+      // 3. Draw the label element, and update its transform.
+      const mid = angle + slice / 2;
+      const label_width = label.offsetWidth * devicePixelRatio;
+      const label_height = label.offsetHeight * devicePixelRatio;
+      const x = Math.cos(mid) * radius * 0.60 - label_width / 2;
+      const y = Math.sin(mid) * radius * 0.60 - label_height / 2;
+      const transform = ctx.drawElementImage(label, x, y);
+      label.style.transform = transform;
+
+      angle += slice;
+    }
+
+    // 4. Draw the focus ring on top of everything else.
+    if (focusedPath)
+      ctx.drawFocusIfNeeded(focusedPath, document.activeElement);
+  };
+  canvas.requestPaint(); // Request an initial paint event.
+
+  // Setup a resize observer to resize the canvas in response to dpr changes.
+  new ResizeObserver(([entry]) => {
+    const box = entry.devicePixelContentBoxSize[0];
+    canvas.width = box.inlineSize;
+    canvas.height = box.blockSize;
+  }).observe(canvas, {box: ['device-pixel-content-box']});
+</script>
diff --git a/research/canvas/_raw/ex-text-input.html b/research/canvas/_raw/ex-text-input.html
new file mode 100644
index 0000000..52e5d68
--- /dev/null
+++ b/research/canvas/_raw/ex-text-input.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Demo of interactive content in canvas</title>
+
+<style>
+  canvas {
+    border: 1px solid blue;
+    width: 638px;
+    height: 318px;
+  }
+  form p {
+    margin: 6px;
+  }
+</style>
+
+<canvas id="canvas" width="638" height="318" layoutsubtree="true">
+  <div id=draw_element style="width: 578px" >
+    <form id="demo-form" action="#" method="get">
+      <fieldset>
+        <legend>🚀 Spaceship Control Panel</legend>
+        <p>
+          <label for="shipName">Ship Name:</label>
+          <input type="text" id="shipName" value="The 'Canvas' Voyager">
+        </p>
+        <p>
+          <input type="checkbox" id="hyperdrive" checked>
+          <label for="hyperdrive">Engage Hyperdrive</label>
+        </p>
+        <fieldset>
+          <legend>Target System</legend>
+          <p>
+            <input type="radio" id="alpha" name="system" value="alpha" checked>
+            <label for="alpha">Alpha Centauri</label>
+          </p>
+          <p>
+            <input type="radio" id="beta" name="system" value="beta">
+            <label for="beta">Betelgeuse</label>
+          </p>
+        </fieldset>
+        <p>
+          <label for="shieldLevel">Shield Strength:</label>
+          <input type="range" id="shieldLevel" min="0" max="100" value="75">
+        </p>
+        <p style="text-align: right; margin: 0;">
+          <button type="submit">Launch!</button>
+        </p>
+      </fieldset>
+    </form>
+  </div>
+</canvas>
+<script>
+  const canvas = document.getElementById('canvas');
+  const ctx = canvas.getContext('2d');
+  canvas.onpaint = (event) => {
+    ctx.reset();
+    let x = canvas.width / 25;
+    let y = canvas.height / 25;
+    let transform = ctx.drawElementImage(draw_element, x, y);
+    draw_element.style.transform = transform.toString();
+  };
+  canvas.requestPaint(); // Request an initial paint event.
+
+  const observer = new ResizeObserver(([entry]) => {
+    canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
+    canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+  });
+  observer.observe(canvas, {box: 'device-pixel-content-box'});
+</script>
diff --git a/research/canvas/_raw/ex-webGL.html b/research/canvas/_raw/ex-webGL.html
new file mode 100644
index 0000000..a8b4e7a
--- /dev/null
+++ b/research/canvas/_raw/ex-webGL.html
@@ -0,0 +1,193 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Demo of complex text in WebGL</title>
+<script
+  src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
+  integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
+  crossorigin="anonymous"
+  defer>
+</script>
+<script src="webGLSetup.js"></script>
+<style>
+  canvas {
+    border: 1px solid blue;
+    width: 638px;
+    height: 318px;
+  }
+  #draw_element {
+    border: 1px solid blue;
+    width: 400px;
+    height: 400px;
+    padding: 10px;
+  }
+</style>
+
+<canvas id="gl-canvas" width="638" height="318" layoutsubtree="true">
+  <!-- inert to prevent hit testing in this example. -->
+  <div id="draw_element" inert>
+    Hello world!<br>I'm multi-line, <b>formatted</b>,
+    rotated text with emoji (&#128512;), RTL text
+    <span dir=rtl>من فارسی صحبت میکنم</span>,
+    vertical text,
+    <p style="writing-mode: vertical-rl;">
+      这是垂直文本
+    </p>
+    an inline image (<img width="150" src="wolf.jpg">), and
+    <svg width="50" height="50">
+      <circle cx="25" cy="25" r="20" fill="green" />
+      <text x="25" y="30" font-size="15" text-anchor="middle" fill="#fff">
+        SVG
+      </text>
+    </svg>!
+  </div>
+</canvas>
+
+<script>
+  let cubeRotation = 0.0;
+  let currentTime = 0;
+  let deltaTime = 0;
+  let render_context = null;
+
+  //
+  // Initialize a texture and load an image.
+  // When the image finished loading copy it into the texture.
+  //
+  function loadTexture(gl) {
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+
+    const internalFormat = gl.RGBA8;
+    try {
+      gl.texElementImage2D(gl.TEXTURE_2D, internalFormat, draw_element);
+    } catch (e) {
+      // The texElementImage2D API was recently changed (see:
+      // https://github.com/WICG/html-in-canvas#idl-changes). This snippet
+      // supports the old syntax temporarily so that the demos do not break.
+      const level = 0;
+      const srcFormat = gl.RGBA;
+      const destType = gl.UNSIGNED_BYTE;
+      gl.texElementImage2D(gl.TEXTURE_2D, level, internalFormat,
+                              srcFormat, destType, draw_element);
+      console.log('Note: using old texElementImage2D API');
+    }
+
+
+    // Linear texture filtering produces better results than mipmap with text.
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+
+    return texture;
+  }
+
+  // Draw the scene repeatedly
+  function render() {
+    let new_time = performance.now() * 0.001; // convert to seconds
+    deltaTime = new_time - currentTime;
+    currentTime = new_time;
+
+    if (render_context === null) {
+      return;
+    }
+
+    drawScene(render_context.gl,
+              render_context.program,
+              render_context.buffers,
+              render_context.texture,
+              cubeRotation);
+
+    cubeRotation += deltaTime;
+    requestAnimationFrame(render);
+  }
+
+  function main() {
+    const canvas = document.querySelector('#gl-canvas');
+    // Initialize the GL context
+    const gl = canvas.getContext('webgl2');
+
+    // Only continue if WebGL is available and working
+    if (gl === null) {
+      alert(
+        'Unable to initialize WebGL. Your browser or machine may not support it.',
+      );
+      return;
+    }
+
+    // Vertex shader program
+    const vsSource = `
+      attribute vec4 aVertexPosition;
+      attribute vec2 aTextureCoord;
+
+      uniform mat4 uModelViewMatrix;
+      uniform mat4 uProjectionMatrix;
+
+      varying highp vec2 vTextureCoord;
+
+      void main(void) {
+        gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+        vTextureCoord = aTextureCoord;
+      }
+    `;
+
+    // Fragment shader program
+    const fsSource = `
+      varying highp vec2 vTextureCoord;
+
+      uniform sampler2D uSampler;
+
+      void main(void) {
+        gl_FragColor = texture2D(uSampler, vTextureCoord);
+      }
+    `;
+
+    // Initialize a shader program; this is where all the lighting
+    // for the vertices and so forth is established.
+    const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
+
+    // Collect all the info needed to use the shader program.
+    // Look up which attribute our shader program is using
+    // for aVertexPosition and look up uniform locations.
+    const programInfo = {
+      program: shaderProgram,
+      attribLocations: {
+        vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+        textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
+      },
+      uniformLocations: {
+        projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+        modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+        uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
+      },
+    };
+
+    const buffers = initBuffers(gl);
+
+    // Load texture
+    const texture = loadTexture(gl);
+    // Flip image pixels into the bottom-to-top order that WebGL expects.
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+
+    render_context = {
+      gl: gl,
+      program: programInfo,
+      buffers: buffers,
+      texture:texture,
+    };
+
+    requestAnimationFrame(render);
+  }
+
+  onload = () => {
+    const canvas = document.querySelector('#gl-canvas');
+    canvas.onpaint = () => {
+      main();
+    }
+    canvas.requestPaint();
+
+    const observer = new ResizeObserver(([entry]) => {
+      canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
+      canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+    });
+    observer.observe(canvas, {box: 'device-pixel-content-box'});
+  }
+</script>
diff --git a/research/canvas/_raw/ex-webGLSetup.js b/research/canvas/_raw/ex-webGLSetup.js
new file mode 100644
index 0000000..93ce0bf
--- /dev/null
+++ b/research/canvas/_raw/ex-webGLSetup.js
@@ -0,0 +1,288 @@
+//
+// creates a shader of the given type, uploads the source and
+// compiles it.
+//
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type);
+
+  // Send the source to the shader object
+  gl.shaderSource(shader, source);
+
+  // Compile the shader program
+  gl.compileShader(shader);
+
+  // See if it compiled successfully
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert(
+      `An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`,
+    );
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+}
+
+//
+// Initialize a shader program, so WebGL knows how to draw our data
+//
+function initShaderProgram(gl, vsSource, fsSource) {
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+  // Create the shader program
+  const shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // If creating the shader program failed, alert
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert(
+      `Unable to initialize the shader program: ${gl.getProgramInfoLog(
+        shaderProgram,
+      )}`,
+    );
+    return null;
+  }
+
+  return shaderProgram;
+}
+
+function initBuffers(gl) {
+  const positionBuffer = initPositionBuffer(gl);
+  const textureCoordBuffer = initTextureBuffer(gl);
+  const indexBuffer = initIndexBuffer(gl);
+
+  return {
+    position: positionBuffer,
+    textureCoord: textureCoordBuffer,
+    indices: indexBuffer,
+  };
+}
+
+function initPositionBuffer(gl) {
+  // Create a buffer for the square's positions.
+  const positionBuffer = gl.createBuffer();
+
+  // Select the positionBuffer as the one to apply buffer
+  // operations to from here out.
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+  const positions = [
+    // Front face
+    -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
+
+    // Back face
+    -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0,
+
+    // Top face
+    -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0,
+
+    // Bottom face
+    -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
+
+    // Right face
+    1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,
+
+    // Left face
+    -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0,
+  ];
+
+  // Now pass the list of positions into WebGL to build the
+  // shape. We do this by creating a Float32Array from the
+  // JavaScript array, then use it to fill the current buffer.
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+
+  return positionBuffer;
+}
+
+function initIndexBuffer(gl) {
+  const indexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+
+  // This array defines each face as two triangles, using the
+  // indices into the vertex array to specify each triangle's
+  // position.
+
+  // prettier-ignore
+  const indices = [
+     0,  1,  2,      0,  2,  3,    // front
+     4,  5,  6,      4,  6,  7,    // back
+     8,  9,  10,     8,  10, 11,   // top
+     12, 13, 14,     12, 14, 15,   // bottom
+     16, 17, 18,     16, 18, 19,   // right
+     20, 21, 22,     20, 22, 23,   // left
+  ];
+
+  // Now send the element array to GL
+
+  gl.bufferData(
+    gl.ELEMENT_ARRAY_BUFFER,
+    new Uint16Array(indices),
+    gl.STATIC_DRAW,
+  );
+
+  return indexBuffer;
+}
+
+function initTextureBuffer(gl) {
+  const textureCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
+
+  const textureCoordinates = [
+    // Front
+    1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0,
+    // Back
+    1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0,
+    // Top
+    1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0,
+    // Bottom
+    1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0,
+    // Right
+    1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0,
+    // Left
+    1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0,
+  ];
+
+  gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array(textureCoordinates),
+    gl.STATIC_DRAW,
+  );
+
+  return textureCoordBuffer;
+}
+
+function drawScene(gl, programInfo, buffers, texture, cubeRotation) {
+  gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
+  gl.clearDepth(1.0); // Clear everything
+  gl.enable(gl.DEPTH_TEST); // Enable depth testing
+  gl.depthFunc(gl.LEQUAL); // Near things obscure far things
+
+  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // Create a perspective matrix, a special matrix that is
+  // used to simulate the distortion of perspective in a camera.
+  // Our field of view is 35 degrees, with a width/height
+  // ratio that matches the display size of the canvas
+  // and we only want to see objects between 0.1 units
+  // and 100 units away from the camera.
+
+  const fieldOfView = (35 * Math.PI) / 180; // in radians
+  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+  const zNear = 0.1;
+  const zFar = 100.0;
+  const projectionMatrix = mat4.create();
+
+  // note: glMatrix always has the first argument
+  // as the destination to receive the result.
+  mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
+
+  // Set the drawing position to the "identity" point, which is
+  // the center of the scene.
+  const modelViewMatrix = mat4.create();
+
+  // Now move the drawing position a bit to where we want to
+  // start drawing the square.
+  mat4.translate(
+    modelViewMatrix, // destination matrix
+    modelViewMatrix, // matrix to translate
+    [-0.0, 0.0, -6.0],
+  ); // amount to translate
+  mat4.rotate(
+    modelViewMatrix, // destination matrix
+    modelViewMatrix, // matrix to rotate
+    cubeRotation, // amount to rotate in radians
+    [0, 0, 1],
+  ); // axis to rotate around (Z)
+  mat4.rotate(
+    modelViewMatrix, // destination matrix
+    modelViewMatrix, // matrix to rotate
+    cubeRotation * 0.7, // amount to rotate in radians
+    [0, 1, 0],
+  ); // axis to rotate around (Y)
+  mat4.rotate(
+    modelViewMatrix, // destination matrix
+    modelViewMatrix, // matrix to rotate
+    cubeRotation * 0.3, // amount to rotate in radians
+    [1, 0, 0],
+  ); // axis to rotate around (X)
+
+  setPositionAttribute(gl, buffers, programInfo);
+  setTextureAttribute(gl, buffers, programInfo);
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
+
+  // Tell WebGL to use our program when drawing
+  gl.useProgram(programInfo.program);
+
+  // Set the shader uniforms
+  gl.uniformMatrix4fv(
+    programInfo.uniformLocations.projectionMatrix,
+    false,
+    projectionMatrix,
+  );
+  gl.uniformMatrix4fv(
+    programInfo.uniformLocations.modelViewMatrix,
+    false,
+    modelViewMatrix,
+  );
+
+  // Tell WebGL we want to affect texture unit 0
+  gl.activeTexture(gl.TEXTURE0);
+
+  // Bind the texture to texture unit 0
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Tell the shader we bound the texture to texture unit 0
+  gl.uniform1i(programInfo.uniformLocations.uSampler, 0);
+
+  {
+    const vertexCount = 36;
+    const type = gl.UNSIGNED_SHORT;
+    const offset = 0;
+    gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
+  }
+}
+
+// Tell WebGL how to pull out the positions from the position
+// buffer into the vertexPosition attribute.
+function setPositionAttribute(gl, buffers, programInfo) {
+  const numComponents = 3; // pull out 2 values per iteration
+  const type = gl.FLOAT; // the data in the buffer is 32bit floats
+  const normalize = false; // don't normalize
+  const stride = 0; // how many bytes to get from one set of values to the next
+  // 0 = use type and numComponents above
+  const offset = 0; // how many bytes inside the buffer to start from
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+  gl.vertexAttribPointer(
+    programInfo.attribLocations.vertexPosition,
+    numComponents,
+    type,
+    normalize,
+    stride,
+    offset,
+  );
+  gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
+}
+
+// tell webgl how to pull out the texture coordinates from buffer
+function setTextureAttribute(gl, buffers, programInfo) {
+  const num = 2; // every coordinate composed of 2 values
+  const type = gl.FLOAT; // the data in the buffer is 32-bit float
+  const normalize = false; // don't normalize
+  const stride = 0; // how many bytes to get from one set to the next
+  const offset = 0; // how many bytes inside the buffer to start from
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
+  gl.vertexAttribPointer(
+    programInfo.attribLocations.textureCoord,
+    num,
+    type,
+    normalize,
+    stride,
+    offset,
+  );
+  gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);
+}
diff --git a/research/canvas/_raw/explainer.md b/research/canvas/_raw/explainer.md
new file mode 100644
index 0000000..248ee33
--- /dev/null
+++ b/research/canvas/_raw/explainer.md
@@ -0,0 +1,379 @@
+# HTML-in-Canvas
+
+This is a proposal for using 2D and 3D `<canvas>` to customize the rendering of HTML content.
+
+## Status
+
+This is a living explainer which is continuously updated as we receive feedback.
+
+The APIs described here are implemented behind a flag in Chromium and can be enabled with `chrome://flags/#canvas-draw-element`.
+
+## Motivation
+
+There is no web API to easily render complex layouts of text and other content into a `<canvas>`. As a result, `<canvas>`-based content suffers in accessibility, internationalization, performance, and quality.
+
+### Use cases
+
+* **Styled, Laid Out Content in Canvas.** There’s a strong need for better styled text support in Canvas. Examples include chart components (legend, axes, etc.), rich content boxes in creative tools, and in-game menus.
+* **Accessibility Improvements.** There is currently no guarantee that the canvas fallback content used for `<canvas>` accessibility always matches the rendered content, and such fallback content can be hard to generate. With this API, elements drawn into the canvas will match their corresponding canvas fallback.
+* **Composing HTML Elements with Effects.** A limited set of CSS effects, such as filters, backdrop-filter, and mix-blend-mode are already available, but there is a desire to use general WebGL shaders with HTML.
+* **HTML Rendering in a 3D Context.** 3D aspects of sites and games need to render rich 2D content into surfaces within a 3D scene.
+* **Media Export.** There's a need to export HTML content as images or video.
+
+## Proposed solution
+
+The solution introduces three main primitives: an attribute to opt-in canvas elements, methods to draw child elements into the canvas, and an event which fires to handle updates.
+
+### 1. The `layoutsubtree` attribute
+The `layoutsubtree` attribute on a `<canvas>` element opts in canvas descendants to layout and participate in hit testing. It causes the direct children of the `<canvas>` to have a stacking context, become a containing block for all descendants, and have paint containment. Canvas element children behave as if they are visible, but their rendering is not visible to the user unless and until they are explicitly drawn into the canvas via a call to `drawElementImage()` (see below).
+
+### 2. `drawElementImage` (and WebGL/WebGPU equivalents)
+The `drawElementImage()` method draws a child of the canvas into the canvas, and returns a transform that can be applied to `element.style.transform` to align its DOM location with its drawn location. A snapshot of the rendering of all children of the canvas is recorded just prior to the `paint` event. When called during the `paint` event, `drawElementImage()` will draw the child as it would appear in the current frame. When called outside the `paint` event, the previous frame's snapshot is used. An exception is thrown if `drawElementImage()` is called with a child before an initial snapshot has been recorded.
+
+**Requirements & Constraints:**
+* `layoutsubtree` must be specified on the `<canvas>` in the most recent rendering update.
+* The `element` must be a direct child of the `<canvas>` in the most recent rendering update.
+* The `element` must have generated boxes (i.e., not `display: none`) in the most recent rendering update.
+* **Transforms:** The canvas's current transformation matrix is applied when drawing into the canvas. CSS transforms on the source `element` are **ignored** for drawing (but continue to affect hit testing/accessibility, see below).
+* **Clipping:** Overflowing content (both layout and ink overflow) is clipped to the element's border box.
+* **Sizing:** The optional `width`/`height` arguments specify a destination rect in canvas coordinates. If omitted, the `width`/`height` arguments default to sizing the element so that it has the same on-screen size and proportion in canvas coordinates as it does outside the canvas.
+
+**WebGL/WebGPU Support:**
+Similar methods are added for 3D contexts: `WebGLRenderingContext.texElementImage2D` and `copyElementImageToTexture`.
+
+### 3. The `paint` event
+A `paint` event is added to `canvas` elements and fires if the rendering of any canvas children has changed. This event fires just after intersection observer steps have run during [update-the-rendering](https://html.spec.whatwg.org/#update-the-rendering). The event contains a list of the canvas children which have changed. Because CSS transforms on canvas children are ignored for rendering, changing the transform does not cause the `paint` event to fire in the next frame. Canvas drawing commands made in the `paint` event will appear in the current frame, but DOM changes made in the `paint` event will not show up until the subsequent frame. If there are multiple `<canvas>` elements, the `paint` event fires in _reverse_ tree order which ensures that descendants fire `paint` before ancestors.
+
+To support application patterns which update every frame, a new `requestPaint()` function is added which will cause the `paint` event to fire once, even if no children have changed (analagous to `requestAnimationFrame()`).
+
+### 4. `captureElementImage`
+To support `OffscreenCanvas` in workers, a snapshot of an element can be captured as an `ElementImage` snapshot using `canvas.captureElementImage(element)`. These objects can be transferred to a worker and drawn to an `OffscreenCanvas`.
+
+### Synchronization
+
+Browser features like hit testing, intersection observer, and accessibility rely on an element's DOM location. To ensure these work, the element's `transform` property should be updated so that the DOM location matches the drawn location.
+
+<details>
+<summary>Calculating a CSS transform to match a drawn location</summary>
+  The general formula for the CSS transform is:
+
+  <div align="center">$$T_{\text{origin}}^{-1} \cdot S_{\text{css} \to \text{grid}}^{-1} \cdot T_{\text{draw}} \cdot S_{\text{css} \to \text{grid}} \cdot T_{\text{origin}} $$</div>
+
+Where:
+
+* $$T_{\text{draw}}$$: Transform used to draw the element in the canvas grid coordinate system.
+  For `drawElementImage`, this is $$CTM \cdot T_{(\text{x}, \text{y})} \cdot S_{(\text{destScale})}$$, where $$CTM$$ is the Current Transformation Matrix, $$T_{(\text{x}, \text{y})}$$ is a translation from the x and y arguments, and $$S_{(\text{destScale})}$$ is a scale from the width and height arguments.
+* $$T_{\text{origin}}$$: Translation matrix of the element's computed `transform-origin`.
+* $$S_{\text{css} \to \text{grid}}$$: Scaling matrix converting CSS pixels to Canvas Grid pixels.
+</details>
+
+To assist with synchronization, `drawElementImage()` returns the CSS transform which can be applied to the element to keep its location synchronized. For 3D contexts, the `getElementTransform(element, drawTransform)` helper method is provided which returns the CSS transform, provided a general transformation matrix.
+
+The transform used to draw the element on the worker thread needs to be synced back to the DOM, and can simply be `postMessage()`'d back to the main thread if the position is static. If the position is dynamic, an alternative is to calculate the position on the main thread and update `element.style.transform` at the same time that the `ElementImage` objects is sent to the worker thread.
+
+### Basic Example
+
+<img width="250" height="38" alt="a screenshot showing a form element with a blinking cursor" src="https://github.com/user-attachments/assets/acbdd231-3259-4819-b57e-32e29c460fc9" />
+
+```html
+<canvas id="canvas" style="width: 400px; height: 200px;" layoutsubtree>
+  <form id="form_element">
+    <label for="name">name:</label>
+    <input id="name">
+  </form>
+</canvas>
+
+<script>
+  const ctx = document.getElementById('canvas').getContext('2d');
+
+  canvas.onpaint = () => {
+    ctx.reset();
+    const transform = ctx.drawElementImage(form_element, 100, 0);
+    form_element.style.transform = transform.toString();
+  };
+
+  // Size the canvas grid to match the device scale factor to prevent blurriness.
+  const observer = new ResizeObserver(([entry]) => {
+    canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
+    canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+  });
+  observer.observe(canvas, {box: 'device-pixel-content-box'});
+</script>
+```
+
+### OffscreenCanvas Example
+
+In this example, `OffscreenCanvas` in a worker is used. The `canvas` child form is captured as an `ElementImage` object in the `paint` event and transferred to the worker for painting.
+
+```html
+<!DOCTYPE html>
+<canvas id="canvas" style="width: 400px; height: 200px;" layoutsubtree>
+  <form id="form_element">
+    <label for="name">name:</label>
+    <input id="name">
+  </form>
+</canvas>
+<script>
+  const workerCode = `
+    let ctx;
+    self.onmessage = (e) => {
+      if (e.data.canvas) {
+        ctx = e.data.canvas.getContext('2d');
+      }
+      if (e.data.width && e.data.height) {
+        ctx.canvas.width = e.data.width;
+        ctx.canvas.height = e.data.height;
+      }
+      if (e.data.elementImage) {
+        ctx.reset();
+        const transform = ctx.drawElementImage(e.data.elementImage, 100, 0);
+        self.postMessage({transform: transform});
+      }
+    };
+  `;
+
+  const worker = new Worker(URL.createObjectURL(new Blob([workerCode])));
+  const offscreen = canvas.transferControlToOffscreen();
+
+  worker.postMessage({ canvas: offscreen }, [offscreen]);
+
+  canvas.onpaint = (event) => {
+    const elementImage = canvas.captureElementImage(form_element)
+    worker.postMessage({ elementImage: elementImage }, [elementImage]);
+  };
+
+  // Synchronize the element's CSS transform to match its drawn location.
+  worker.onmessage = ({data}) => {
+    form_element.style.transform = data.transform.toString();
+  };
+
+  // Size the canvas grid to match the device scale factor to prevent blurriness.
+  const observer = new ResizeObserver(([entry]) => {
+    worker.postMessage({
+      width: entry.devicePixelContentBoxSize[0].inlineSize,
+      height: entry.devicePixelContentBoxSize[0].blockSize
+    });
+    canvas.requestPaint();
+  });
+  observer.observe(canvas, { box: 'device-pixel-content-box' });
+</script>
+```
+
+### IDL changes
+
+```idl
+partial interface HTMLCanvasElement {
+  [CEReactions, Reflect] attribute boolean layoutSubtree;
+
+  attribute EventHandler onpaint;
+
+  void requestPaint();
+
+  ElementImage captureElementImage(Element element);
+  DOMMatrix getElementTransform((Element or ElementImage) element, DOMMatrix drawTransform);
+};
+
+partial interface OffscreenCanvas {
+  DOMMatrix getElementTransform((Element or ElementImage) element, DOMMatrix drawTransform);
+};
+
+interface mixin CanvasDrawElementImage {
+  DOMMatrix drawElementImage((Element or ElementImage) element,
+                             unrestricted double dx, unrestricted double dy);
+
+  DOMMatrix drawElementImage((Element or ElementImage) element,
+                             unrestricted double dx, unrestricted double dy,
+                             unrestricted double dwidth, unrestricted double dheight);
+
+  DOMMatrix drawElementImage((Element or ElementImage) element,
+                             unrestricted double sx, unrestricted double sy,
+                             unrestricted double swidth, unrestricted double sheight,
+                             unrestricted double dx, unrestricted double dy);
+
+  DOMMatrix drawElementImage((Element or ElementImage) element,
+                             unrestricted double sx, unrestricted double sy,
+                             unrestricted double swidth, unrestricted double sheight,
+                             unrestricted double dx, unrestricted double dy,
+                             unrestricted double dwidth, unrestricted double dheight);
+};
+
+CanvasRenderingContext2D includes CanvasDrawElementImage;
+OffscreenCanvasRenderingContext2D includes CanvasDrawElementImage;
+
+dictionary WebGLCopyElementImageConfig {
+  GLfloat sx;
+  GLfloat sy;
+  GLfloat swidth;
+  GLfloat sheight;
+  GLsizei width;
+  GLsizei height;
+};
+
+partial interface WebGLRenderingContext {
+  void texElementImage2D(GLenum target, GLenum internalformat,
+                         (Element or ElementImage) element,
+                         optional WebGLCopyElementImageConfig config = {});
+};
+
+dictionary GPUCopyElementImageDestination {
+  required GPUImageCopyTextureTagged destination;
+  GPUIntegerCoordinate width;
+  GPUIntegerCoordinate height;
+};
+
+dictionary GPUCopyElementImageSource {
+  required (Element or ElementImage) source;
+  float sx;
+  float sy;
+  float swidth;
+  float sheight;
+};
+
+partial interface GPUQueue {
+  void copyElementImageToTexture(GPUCopyElementImageSource source,
+                                 GPUCopyElementImageDestination destination);
+}
+
+[Exposed=Window]
+interface PaintEvent : Event {
+  constructor(DOMString type, optional PaintEventInit eventInitDict);
+
+  readonly attribute FrozenArray<Element> changedElements;
+};
+
+dictionary PaintEventInit : EventInit {
+  sequence<Element> changedElements = [];
+};
+
+[Exposed=(Window,Worker), Transferable]
+interface ElementImage {
+  readonly attribute double width;
+  readonly attribute double height;
+  undefined close();
+};
+```
+
+## Demos
+
+#### [Live demo](https://wicg.github.io/html-in-canvas/Examples/complex-text.html) ([source](Examples/complex-text.html)) using the `drawElementImage` API to draw rotated complex text.
+
+<img width="640" height="320" alt="screenshot showing rotated, complex text drawn into canvas" src="https://github.com/user-attachments/assets/3ef73e0f-9119-49de-bf84-dfb3a4f5d77c" />
+
+#### [Live demo](https://wicg.github.io/html-in-canvas/Examples/pie-chart.html) ([source](Examples/pie-chart.html)) using the `drawElementImage` API to draw a pie chart with multi-line labels.
+
+<img width="640" height="320" alt="screenshot showing a pie chart" src="https://github.com/user-attachments/assets/887eefa2-ffc0-49d6-914b-987b05ccb45d" />
+
+#### [Live demo](https://wicg.github.io/html-in-canvas/Examples/webgpu-jelly-slider/) ([source](Examples/webgpu-jelly-slider)) using the WebGPU `copyElementImageToTexture` API to draw a div under a jelly slider.
+
+<img width="640" height="320" alt="screenshot showing a range slider with a jelly effect" src="https://github.com/user-attachments/assets/86ecb8b8-4d3b-49b0-8aa0-5f2df5674045" />
+
+#### [Live demo](https://wicg.github.io/html-in-canvas/Examples/webGL.html) ([source](Examples/webGL.html)) using the WebGL `texElementImage2D` API to draw HTML onto a 3D cube.
+
+<img width="640" height="320" alt="screenshot showing html content on a 3D cube" src="https://github.com/user-attachments/assets/689fefe3-56d9-4ae9-b386-32a01ebb0117" />
+
+A demo of the same thing using an experimental extension of [three.js](https://threejs.org/) is [here](https://raw.githack.com/mrdoob/three.js/htmltexture/examples/webgl_materials_texture_html.html). Further instructions and context are [here](https://github.com/mrdoob/three.js/pull/31233).
+
+#### [Live demo](https://wicg.github.io/html-in-canvas/Examples/text-input.html) ([source](Examples/text-input.html)) of interactive content in canvas.
+
+<img width="640" height="320" alt="screenshot showing a form drawn into canvas" src="https://github.com/user-attachments/assets/be2d098f-17ae-4982-a0f9-a069e3c2d1d5" />
+
+## Read-back-allowed rendering
+
+The `drawElementImage()` method and any other methods that draw element image snapshots, as well as the paint event, must not reveal any security- or privacy-sensitive information that isn't otherwise observable to author code. This concept is called read-back-allowed rendering because it makes it possible to allow pixel read-back, which is always possible with WebGL and WebGPU.
+
+Both painting (via canvas pixel readbacks or timing attacks) and invalidation (via `onpaint`) have the potential to leak sensitive information, and this is prevented by excluding sensitive information when painting and invalidating.
+
+Sensitive information includes:
+* Cross-origin data in [embedded content](https://html.spec.whatwg.org/#embedded-content-category) (e.g., `<iframe>`, `<img>`), [`<url>`](https://drafts.csswg.org/css-values-4/#url-value) references (e.g., `background-image`, `clip-path`), `<canvas>` elements tained with cross-origin data, and [SVG](https://svgwg.org/svg2-draft/single-page.html#types-InterfaceSVGURIReference) (e.g., `<use>`, `<pattern>`, `<feImage>`). Note that same-origin iframes would still paint, but cross-origin content in them would not.
+* System colors, themes, or preferences.
+* Spelling and grammar markers.
+* Visited link information.
+* Pending form autofill information not otherwise available to JavaScript.
+* Subpixel text anti-aliasing.
+* User preferences for caption and subtitle selection and appearance.
+* IME pop-ups and distinctive IME text formatting.
+
+The following new information is not considered sensitive:
+* Search text (find-in-page) and text-fragment (fragment url) markers.
+* Scrollbar and form element appearance (these are already detectable in Blink and WebKit through [foreignObject](https://jsfiddle.net/progers/qhawnyeu)).
+* Caret blink rate.
+* forced-colors (this information is already available to javascript using the `forced-colors` media query and system colors).
+
+## Developer Trial (dev trial) Information
+The HTML-in-Canvas features may be enabled with `chrome://flags/#canvas-draw-element` in Chrome Canary.
+
+We are most interested in feedback on the following topics:
+* What content works, and what fails? Which failure modes are most important to fix?
+* How does the feature interact with accessibility features? How can accessibility support be improved?
+
+Please file bugs or design issues [here](https://github.com/WICG/html-in-canvas/issues/new).
+
+## Alternatives considered: `paint` event timing
+
+A new `paint` event is needed to give developers an opportunity to update their canvas rendering in response to paint changes. This is integrated into [update the rendering](https://html.spec.whatwg.org/#update-the-rendering) so that canvas updates can occur in sync with the DOM.
+
+There are several opportunities in the [update the rendering](https://html.spec.whatwg.org/#update-the-rendering) steps where the `paint` event could fire:
+
+  * 14\. Run animation frame callbacks.
+
+  * 16.2.1\. Recalculate styles and update layout.
+
+  * 16.2.6\. Deliver resize observers, looping back to 16.2.1 if needed.
+
+  * _Option A: Fire `paint` at resize observer timing, looping back to 16.2.1 if needed._
+
+  * 19\. Run the update intersection observations steps.
+
+  * Paint, where the painted output of elements is calculated. This is not an explicitly named step in [update the rendering](https://html.spec.whatwg.org/#update-the-rendering).
+
+  * _Option B: Fire `paint` immediately after Paint, looping back to 16.2.1 if needed._
+
+  * _Option C: Fire `paint` immediately after Paint._
+
+  * Commit / thread handoff, where the painted output is sent to another process. This is not an explicitly named step in [update the rendering](https://html.spec.whatwg.org/#update-the-rendering).
+
+Note that the `paint` event is the new event on canvas introduced in this proposal, and the Paint step is the existing operation that browsers perform to record the painted output of the rendering tree following [paint order](https://drafts.csswg.org/css-position-4/#painting-order).
+
+#### Option A: Fire `paint` at resize observer timing, looping back to 16.2.1 if needed.
+
+Similar to resize observer, a looping approach is needed to handle cases where the paint event performs modifications (including of elements outside the canvas). There is no mechanism for preventing arbitrary javascript from modifying the DOM. Looping will be required for more conditions than those required by ResizeObserver, such as background style changes. A downside of looping is that the user's canvas code may need to run multiple times per frame.
+
+One option is to do a synchronous Paint step to snapshot the painted output of canvas children. A downside of this approach is that the Paint step may be expensive to run, and may need to be run multiple times. This approach has unique implementation challenges in Gecko, and possibly other engines, due to architectural limitations.
+
+A second option is to not run the Paint step synchronously, but instead record a placeholder representing how an element will appear on the next rendering update (see [design](https://docs.google.com/document/d/1YaHCxYqE4uQc4-UTWo4a5pHt2I2MutlwJtsnj5ljEkM/edit?usp=sharing)). This model can be implemented with 2D canvas by buffering the canvas commands until the next Paint step. When the next Paint step occurs, the placeholders would then be replaced with the actual rendering. Canvas operations such as `getImageData` require synchronous flushing of the canvas command buffer and would need to show blank or stale data for the placeholders. Unfortunately, this approach has a fundamental flaw for WebGL because many APIs require flushing (e.g., `getError()`, see callsites of [WaitForCmd](https://source.chromium.org/chromium/chromium/src/+/main:gpu/command_buffer/client/implementation_base.h;drc=b3eab4fd06ddbeee84b37224f4cc9d78094fc2f7;l=102)), and calling any of these APIs would result in a deadlock or inconsistent rendering. Therefore, we must run the `paint` event at a time where we have the complete painted display list of an element already available.
+
+#### Option B: Fire `paint` immediately after Paint, looping back to 16.2.1 if needed.
+
+See above for the reasons and downsides of looping when there are modifications made during the `paint` event.
+
+The upside of option B as compared with option A is that it does not require partial Paint of canvas children. An additional downside is that even more steps of [update the rendering](https://html.spec.whatwg.org/#update-the-rendering) need to run on each iteration of the loop.
+
+#### Option C: Fire `paint` immediately after Paint.
+
+This is the design approach taken for the API.
+
+This approach only runs `paint` once per frame, similar to the browser's own Paint step. To solve the issue of javascript being able to perform arbitrary modifications, it is important to ensure that before `paint` runs we have locked in the contents of the rendering update, except for one intentional carve-out: the drawn content of the canvas. DOM invalidations that may occur in the `paint` event apply to the subsequent frame, not the current frame.
+
+## Alternatives considered: Supporting threaded effects with worker threads
+
+To support threaded effects, we explored a [design](https://docs.google.com/document/d/1TWe6HP7HMn6y-XnNKppIhgf9FtuXJ6LPgenJJxZDjzg/edit?tab=t.0) where canvas children "snapshots" are sent to a worker thread. In response to threaded scrolling and animations, the worker thread could then render the most up-to-date rendering of the snapshots into OffscreenCanvas. This model requires that javascript can be synchronously called on scroll and animation updates, which is difficult for architectures that perform threaded scroll updates in a restricted process.
+
+## Future considerations: Supporting threaded effects with an auto-updating canvas
+
+To support threaded effects such as scrolling and animations, we are considering a future "auto-updating canvas" mode.
+
+In this model, `drawElementImage` records a placeholder representing the latest rendering. Canvas retains a command buffer which can be automatically replayed following every scroll or animation update. This allows the canvas to re-rasterize with updated placeholders that incorporate threaded scrolling and animations, without needing to block on script. This would enable visual effects that stay perfectly in sync with native scrolling or animations within the canvas, independent of the main thread. This design is viable for 2D contexts, and may be viable for WebGPU with some small API additions.
+
+## Other documents
+
+* [Security and Privacy Questionnaire](./security-privacy-questionnaire.md)
+
+## Authors
+
+* [Philip Rogers](mailto:pdr@chromium.org)
+* [Stephen Chenney](mailto:schenney@igalia.com)
+* [Chris Harrelson](mailto:chrishtr@chromium.org)
+* [Philip Jägenstedt](mailto:foolip@chromium.org)
+* [Khushal Sagar](mailto:khushalsagar@chromium.org)
+* [Vladimir Levin](mailto:vmpstr@chromium.org)
+* [Fernando Serboncini](mailto:fserb@chromium.org)
diff --git a/research/canvas/_raw/htex-ex.html b/research/canvas/_raw/htex-ex.html
new file mode 100644
index 0000000..f1b680d
--- /dev/null
+++ b/research/canvas/_raw/htex-ex.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - materials - html texture</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<meta property="og:title" content="three.js webgl - materials - html texture">
+		<meta property="og:type" content="website">
+		<meta property="og:url" content="https://threejs.org/examples/webgl_materials_texture_html.html">
+		<meta property="og:image" content="https://threejs.org/examples/screenshots/webgl_materials_texture_html.jpg">
+		<link type="text/css" rel="stylesheet" href="main.css">
+		<style>
+			body {
+				background-color: #ffffff;
+			}
+			#draw_element {
+				width: 600px;
+				background-color: #aaaaaa;
+				color: #000000;
+				font-family: sans-serif;
+				font-size: 30px;
+				line-height: 1.5;
+				text-align: center;
+				padding: 30px;
+				/* border: 10px solid #cccccc; */
+			}
+			#draw_element img {
+			  animation: swing 1s ease-in-out infinite alternate;
+			}
+			#draw_element input[type="text"] {
+				font-size: 24px;
+				padding: 8px 12px;
+				border: 2px solid #888;
+				border-radius: 6px;
+				width: 80%;
+				margin-top: 10px;
+			}
+			#draw_element button {
+				font-size: 24px;
+				padding: 8px 20px;
+				margin-top: 10px;
+				border: none;
+				border-radius: 6px;
+				background-color: #4CAF50;
+				color: white;
+				cursor: pointer;
+			}
+			#draw_element button:hover {
+				background-color: #2196F3;
+			}
+			@keyframes swing {
+				from { transform: rotate(-15deg); }
+				to { transform: rotate(15deg); }
+			}
+		</style>
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - HTMLTexture
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/",
+					"three-html-render/polyfill": "https://cdn.jsdelivr.net/npm/three-html-render/dist/polyfill.mjs"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+			import { installHtmlInCanvasPolyfill } from 'three-html-render/polyfill';
+			import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
+			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+			import { InteractionManager } from 'three/addons/interaction/InteractionManager.js';
+
+			if ( ! ( 'requestPaint' in HTMLCanvasElement.prototype ) ) {
+
+				installHtmlInCanvasPolyfill();
+				info.innerHTML += '<br><a href="https://github.com/WICG/html-in-canvas" target="_blank">HTML-in-Canvas API</a> not available. Using <a href="https://github.com/repalash/three-html-render" target="_blank">polyfill</a>.';
+
+			}
+
+			let camera, scene, renderer, mesh, interactions;
+
+			init();
+
+			function init() {
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+
+				renderer.toneMapping = THREE.NeutralToneMapping;
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				document.body.appendChild( renderer.domElement );
+
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera.position.z = 500;
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xaaaaaa );
+				scene.environment = new THREE.PMREMGenerator( renderer ).fromScene( new RoomEnvironment(), 0.02 ).texture;
+
+				// HTML element
+
+				const element = document.createElement( 'div' );
+				element.id = 'draw_element';
+				element.innerHTML = `
+					Hello world!<br>I'm multi-line, <b>formatted</b>,
+					rotated text with emoji (&#128512;), RTL text
+					<span dir=rtl>من فارسی صحبت میکنم</span>,
+					vertical text,
+					<p style="writing-mode: vertical-rl;">
+					这是垂直文本
+					</p>
+					an inline image (<img width="150" src="textures/758px-Canestra_di_frutta_(Caravaggio).jpg">), and
+					<svg width="50" height="50">
+					<circle cx="25" cy="25" r="20" fill="green" />
+					<text x="25" y="30" font-size="15" text-anchor="middle" fill="#fff">
+						SVG
+					</text>
+					</svg>!
+					<br>
+					<input type="text" placeholder="Type here...">
+					<button>Click me</button>
+				`;
+
+				const geometry = new RoundedBoxGeometry( 200, 200, 200, 10, 10 );
+
+				const material = new THREE.MeshStandardMaterial( { roughness: 0, metalness: 0.5 } );
+				material.map = new THREE.HTMLTexture( element );
+
+				mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
+
+				// Interaction
+
+				interactions = new InteractionManager();
+				interactions.connect( renderer, camera );
+				interactions.add( mesh );
+
+				// Button click handler
+
+				element.querySelector( 'button' ).addEventListener( 'click', function () {
+
+					this.textContent = 'Clicked!';
+
+				} );
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate( time ) {
+
+				mesh.rotation.x = Math.sin( time * 0.0005 ) * 0.5;
+				mesh.rotation.y = Math.cos( time * 0.0008 ) * 0.5;
+
+				interactions.update();
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/research/canvas/_raw/htmltex.js b/research/canvas/_raw/htmltex.js
new file mode 100644
index 0000000..864e9f9
--- /dev/null
+++ b/research/canvas/_raw/htmltex.js
@@ -0,0 +1,74 @@
+import { Texture } from './Texture.js';
+
+/**
+ * Creates a texture from an HTML element.
+ *
+ * This is almost the same as the base texture class, except that it sets {@link Texture#needsUpdate}
+ * to `true` immediately and listens for the parent canvas's paint events to trigger updates.
+ *
+ * @augments Texture
+ */
+class HTMLTexture extends Texture {
+
+	/**
+	 * Constructs a new texture.
+	 *
+	 * @param {HTMLElement} [element] - The HTML element.
+	 * @param {number} [mapping=Texture.DEFAULT_MAPPING] - The texture mapping.
+	 * @param {number} [wrapS=ClampToEdgeWrapping] - The wrapS value.
+	 * @param {number} [wrapT=ClampToEdgeWrapping] - The wrapT value.
+	 * @param {number} [magFilter=LinearFilter] - The mag filter value.
+	 * @param {number} [minFilter=LinearMipmapLinearFilter] - The min filter value.
+	 * @param {number} [format=RGBAFormat] - The texture format.
+	 * @param {number} [type=UnsignedByteType] - The texture type.
+	 * @param {number} [anisotropy=Texture.DEFAULT_ANISOTROPY] - The anisotropy value.
+	 */
+	constructor( element, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy ) {
+
+		super( element, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy );
+
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isHTMLTexture = true;
+		this.generateMipmaps = false;
+
+		this.needsUpdate = true;
+
+		const parent = element ? element.parentNode : null;
+
+		if ( parent !== null && 'requestPaint' in parent ) {
+
+			parent.onpaint = () => {
+
+				this.needsUpdate = true;
+
+			};
+
+			parent.requestPaint();
+
+		}
+
+	}
+
+	dispose() {
+
+		const parent = this.image ? this.image.parentNode : null;
+
+		if ( parent !== null && 'onpaint' in parent ) {
+
+			parent.onpaint = null;
+
+		}
+
+		super.dispose();
+
+	}
+
+}
+
+export { HTMLTexture };
diff --git a/research/canvas/_raw/jelly.ts b/research/canvas/_raw/jelly.ts
new file mode 100644
index 0000000..b0a7dff
--- /dev/null
+++ b/research/canvas/_raw/jelly.ts
@@ -0,0 +1,938 @@
+import * as sdf from '@typegpu/sdf';
+import tgpu, { common, d, std } from 'typegpu';
+
+import { randf } from '@typegpu/noise';
+import { Slider } from './slider.ts';
+import { CameraController } from './camera.ts';
+import {
+  DirectionalLight,
+  HitInfo,
+  LineInfo,
+  ObjectType,
+  Ray,
+  rayMarchLayout,
+  sampleLayout,
+  SdfBbox,
+} from './dataTypes.ts';
+import {
+  beerLambert,
+  createBackgroundTexture,
+  createTextures,
+  fresnelSchlick,
+  intersectBox,
+} from './utils.ts';
+import { TAAResolver } from './taa.ts';
+import {
+  AMBIENT_COLOR,
+  AMBIENT_INTENSITY,
+  AO_BIAS,
+  AO_INTENSITY,
+  AO_RADIUS,
+  AO_STEPS,
+  JELLY_IOR,
+  JELLY_SCATTER_STRENGTH,
+  LINE_HALF_THICK,
+  LINE_RADIUS,
+  MAX_DIST,
+  MAX_STEPS,
+  SPECULAR_INTENSITY,
+  SPECULAR_POWER,
+  SURF_DIST,
+} from './constants.ts';
+
+const root = await tgpu.init({
+  device: {
+    optionalFeatures: ['timestamp-query'],
+  },
+});
+
+const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+const canvas = document.querySelector('canvas') as HTMLCanvasElement;
+const context = root.configureContext({ canvas, alphaMode: 'premultiplied' });
+
+const NUM_POINTS = 17;
+
+const slider = new Slider(root, d.vec2f(-1, 0), d.vec2f(0.9, 0), NUM_POINTS, -0.03);
+const bezierTexture = slider.bezierTexture.createView();
+const bezierBbox = slider.bbox;
+
+let qualityScale = 1.0;
+let [width, height] = [canvas.width * qualityScale, canvas.height * qualityScale];
+
+let textures = createTextures(root, width, height);
+let backgroundTexture = createBackgroundTexture(root, width, height);
+
+const sliderElement = document.getElementById('slider') as HTMLInputElement;
+const valueElement = document.getElementById('value') as HTMLDivElement;
+
+const valueRawTexture = root.device.createTexture({
+  size: [width, height, 1],
+  format: 'rgba8unorm',
+  usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+});
+const valueTextureView = valueRawTexture.createView();
+
+// Return a number from 0...100 as a string Zero percent...One hundred percent.
+function getPercentString(n: number): string {
+  if (n === 100) return "One-hundred %";
+
+  const ones: string[] = [
+    "Zero", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine",
+    "Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen", "Eighteen", "Nineteen"
+  ];
+
+  const tens: string[] = [
+    "", "", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety"
+  ];
+
+  // Handle 0 through 19
+  if (n < 20) {
+    return `${ones[n]} %`;
+  }
+
+  // Handle 20 through 99
+  const tensWord: string = tens[Math.floor(n / 10)];
+  const onesWord: string = n % 10 === 0 ? "" : `-${ones[n % 10].toLowerCase()}`;
+
+  return `${tensWord}${onesWord} %`;
+}
+
+let targetMouseX = 0.9;
+let currentMouseX = 0.9;
+
+sliderElement.addEventListener('input', () => {
+  const t = Number(sliderElement.value) / 100.0;
+  targetMouseX = t * 1.9 - 1.0;
+  valueElement.textContent = getPercentString(Number(sliderElement.value));
+  (canvas as any).requestPaint();
+});
+valueElement.textContent = getPercentString(Number(sliderElement.value));
+
+const filteringSampler = root['~unstable'].createSampler({
+  magFilter: 'linear',
+  minFilter: 'linear',
+});
+
+const camera = new CameraController(
+  root,
+  d.vec3f(0, 2.7, 1.9),
+  d.vec3f(0, 0, 0),
+  d.vec3f(0, 1, 0),
+  Math.PI / 4,
+  width,
+  height,
+);
+const cameraUniform = camera.cameraUniform;
+
+const lightUniform = root.createUniform(DirectionalLight, {
+  direction: std.normalize(d.vec3f(0.19, -0.24, 0.75)),
+  color: d.vec3f(1, 1, 1),
+});
+
+const jellyColorUniform = root.createUniform(d.vec4f, d.vec4f(1.0, 0.45, 0.075, 1.0));
+const jellyScatterUniform = root.createUniform(d.f32, JELLY_SCATTER_STRENGTH);
+const groundColorUniform = root.createUniform(d.vec3f, d.vec3f(1.0));
+const groundTextColorUniform = root.createUniform(d.vec3f, d.vec3f(0.5));
+
+const randomUniform = root.createUniform(d.vec2f);
+const blurEnabledUniform = root.createUniform(d.u32);
+
+const getRay = (ndc: d.v2f) => {
+  'use gpu';
+  const clipPos = d.vec4f(ndc.x, ndc.y, -1.0, 1.0);
+
+  const invView = cameraUniform.$.viewInv;
+  const invProj = cameraUniform.$.projInv;
+
+  const viewPos = invProj.mul(clipPos);
+  const viewPosNormalized = d.vec4f(viewPos.xyz.div(viewPos.w), 1.0);
+
+  const worldPos = invView.mul(viewPosNormalized);
+
+  const rayOrigin = invView.columns[3].xyz;
+  const rayDir = std.normalize(worldPos.xyz.sub(rayOrigin));
+
+  return Ray({
+    origin: rayOrigin,
+    direction: rayDir,
+  });
+};
+
+const getSliderBbox = () => {
+  'use gpu';
+  return SdfBbox({
+    left: d.f32(bezierBbox[3]),
+    right: d.f32(bezierBbox[1]),
+    bottom: d.f32(bezierBbox[2]),
+    top: d.f32(bezierBbox[0]),
+  });
+};
+
+const sdInflatedPolyline2D = (p: d.v2f) => {
+  'use gpu';
+  const bbox = getSliderBbox();
+
+  const uv = d.vec2f(
+    (p.x - bbox.left) / (bbox.right - bbox.left),
+    (bbox.top - p.y) / (bbox.top - bbox.bottom),
+  );
+  const clampedUV = std.saturate(uv);
+
+  const sampledColor = std.textureSampleLevel(bezierTexture.$, filteringSampler.$, clampedUV, 0);
+  const segUnsigned = sampledColor.x;
+  const progress = sampledColor.y;
+  const normal = sampledColor.zw;
+
+  return LineInfo({
+    t: progress,
+    distance: segUnsigned,
+    normal: normal,
+  });
+};
+
+const cap3D = (position: d.v3f) => {
+  'use gpu';
+  const endCap = slider.endCapUniform.$;
+  const secondLastPoint = d.vec2f(endCap.x, endCap.y);
+  const lastPoint = d.vec2f(endCap.z, endCap.w);
+
+  const angle = std.atan2(lastPoint.y - secondLastPoint.y, lastPoint.x - secondLastPoint.x);
+  const rot = d.mat2x2f(std.cos(angle), -std.sin(angle), std.sin(angle), std.cos(angle));
+
+  let pieP = position.sub(d.vec3f(secondLastPoint, 0));
+  pieP = d.vec3f(rot.mul(pieP.xy), pieP.z);
+  const hmm = sdf.sdPie(pieP.zx, d.vec2f(1, 0), LINE_HALF_THICK);
+  const extrudeEnd = sdf.opExtrudeY(pieP, hmm, 0.001) - LINE_RADIUS;
+  return extrudeEnd;
+};
+
+const sliderSdf3D = (position: d.v3f) => {
+  'use gpu';
+  const poly2D = sdInflatedPolyline2D(position.xy);
+
+  let finalDist = d.f32(0.0);
+  if (poly2D.t > 0.94) {
+    finalDist = cap3D(position);
+  } else {
+    const body = sdf.opExtrudeZ(position, poly2D.distance, LINE_HALF_THICK) - LINE_RADIUS;
+    finalDist = body;
+  }
+
+  return LineInfo({
+    t: poly2D.t,
+    distance: finalDist,
+    normal: poly2D.normal,
+  });
+};
+
+const GroundParams = {
+  groundThickness: 0.03,
+  groundRoundness: 0.02,
+};
+
+const rectangleCutoutDist = (position: d.v2f) => {
+  'use gpu';
+  const groundRoundness = GroundParams.groundRoundness;
+
+  return sdf.sdRoundedBox2d(
+    position,
+    d.vec2f(1 + groundRoundness, 0.2 + groundRoundness),
+    0.2 + groundRoundness,
+  );
+};
+
+const getMainSceneDist = (position: d.v3f) => {
+  'use gpu';
+  const groundThickness = GroundParams.groundThickness;
+  const groundRoundness = GroundParams.groundRoundness;
+
+  return sdf.opUnion(
+    sdf.sdPlane(position, d.vec3f(0, 1, 0), 0.06),
+    sdf.opExtrudeY(position, -rectangleCutoutDist(position.xz), groundThickness - groundRoundness) -
+      groundRoundness,
+  );
+};
+
+const sliderApproxDist = (position: d.v3f) => {
+  'use gpu';
+  const bbox = getSliderBbox();
+
+  const p = position.xy;
+  if (p.x < bbox.left || p.x > bbox.right || p.y < bbox.bottom || p.y > bbox.top) {
+    return 1e9;
+  }
+
+  const poly2D = sdInflatedPolyline2D(p);
+  const dist3D = sdf.opExtrudeZ(position, poly2D.distance, LINE_HALF_THICK) - LINE_RADIUS;
+
+  return dist3D;
+};
+
+const getSceneDist = (position: d.v3f) => {
+  'use gpu';
+  const mainScene = getMainSceneDist(position);
+  const poly3D = sliderSdf3D(position);
+
+  const hitInfo = HitInfo();
+
+  if (poly3D.distance < mainScene) {
+    hitInfo.distance = poly3D.distance;
+    hitInfo.objectType = ObjectType.SLIDER;
+    hitInfo.t = poly3D.t;
+  } else {
+    hitInfo.distance = mainScene;
+    hitInfo.objectType = ObjectType.BACKGROUND;
+  }
+  return hitInfo;
+};
+
+const getSceneDistForAO = (position: d.v3f) => {
+  'use gpu';
+  const mainScene = getMainSceneDist(position);
+  const sliderApprox = sliderApproxDist(position);
+  return std.min(mainScene, sliderApprox);
+};
+
+const sdfSlot = tgpu.slot<(pos: d.v3f) => number>();
+
+const getNormalFromSdf = tgpu.fn(
+  [d.vec3f, d.f32],
+  d.vec3f,
+)((position, epsilon) => {
+  'use gpu';
+  const k = d.vec3f(1, -1, 0);
+
+  const offset1 = k.xyy.mul(epsilon);
+  const offset2 = k.yyx.mul(epsilon);
+  const offset3 = k.yxy.mul(epsilon);
+  const offset4 = k.xxx.mul(epsilon);
+
+  const sample1 = offset1.mul(sdfSlot.$(position.add(offset1)));
+  const sample2 = offset2.mul(sdfSlot.$(position.add(offset2)));
+  const sample3 = offset3.mul(sdfSlot.$(position.add(offset3)));
+  const sample4 = offset4.mul(sdfSlot.$(position.add(offset4)));
+
+  const gradient = sample1.add(sample2).add(sample3).add(sample4);
+
+  return std.normalize(gradient);
+});
+
+const getNormalCapSdf = getNormalFromSdf.with(sdfSlot, cap3D);
+const getNormalMainSdf = getNormalFromSdf.with(sdfSlot, getMainSceneDist);
+
+const getNormalCap = (pos: d.v3f) => {
+  'use gpu';
+  return getNormalCapSdf(pos, 0.01);
+};
+
+const getNormalMain = (position: d.v3f) => {
+  'use gpu';
+  if (std.abs(position.z) > 0.22 || std.abs(position.x) > 1.02) {
+    return d.vec3f(0, 1, 0);
+  }
+  return getNormalMainSdf(position, 0.0001);
+};
+
+const getSliderNormal = (position: d.v3f, hitInfo: d.Infer<typeof HitInfo>) => {
+  'use gpu';
+  const poly2D = sdInflatedPolyline2D(position.xy);
+  const gradient2D = poly2D.normal;
+
+  const threshold = LINE_HALF_THICK * 0.85;
+  const absZ = std.abs(position.z);
+  const zDistance = std.max(
+    0,
+    ((absZ - threshold) * LINE_HALF_THICK) / (LINE_HALF_THICK - threshold),
+  );
+  const edgeDistance = LINE_RADIUS - poly2D.distance;
+
+  const edgeContrib = 0.9;
+  const zContrib = 1.0 - edgeContrib;
+
+  const zDirection = std.sign(position.z);
+  const zAxisVector = d.vec3f(0, 0, zDirection);
+
+  const edgeBlendDistance = edgeContrib * LINE_RADIUS + zContrib * LINE_HALF_THICK;
+
+  const blendFactor = std.smoothstep(
+    edgeBlendDistance,
+    0.0,
+    zDistance * zContrib + edgeDistance * edgeContrib,
+  );
+
+  const normal2D = d.vec3f(gradient2D.xy, 0);
+  const blendedNormal = std.mix(zAxisVector, normal2D, blendFactor * 0.5 + 0.5);
+
+  let normal = std.normalize(blendedNormal);
+
+  if (hitInfo.t > 0.94) {
+    const ratio = (hitInfo.t - 0.94) / 0.02;
+    const fullNormal = getNormalCap(position);
+    normal = std.normalize(std.mix(normal, fullNormal, ratio));
+  }
+
+  return normal;
+};
+
+const getNormal = (position: d.v3f, hitInfo: d.Infer<typeof HitInfo>) => {
+  'use gpu';
+  if (hitInfo.objectType === ObjectType.SLIDER && hitInfo.t < 0.96) {
+    return getSliderNormal(position, hitInfo);
+  }
+
+  return std.select(
+    getNormalCap(position),
+    getNormalMain(position),
+    hitInfo.objectType === ObjectType.BACKGROUND,
+  );
+};
+
+const sqLength = (a: d.v3f) => {
+  'use gpu';
+  return std.dot(a, a);
+};
+
+const getFakeShadow = (position: d.v3f, lightDir: d.v3f): d.v3f => {
+  'use gpu';
+  const jellyColor = jellyColorUniform.$;
+  const endCapX = slider.endCapUniform.$.x;
+
+  if (position.y < -GroundParams.groundThickness) {
+    // Applying darkening under the ground (the shadow cast by the upper ground layer)
+    const fadeSharpness = 30;
+    const inset = 0.02;
+    const cutout = rectangleCutoutDist(position.xz) + inset;
+    const edgeDarkening = std.saturate(1 - cutout * fadeSharpness);
+
+    // Applying a slight gradient based on the light direction
+    const lightGradient = std.saturate(-position.z * 4 * lightDir.z + 1);
+
+    return d
+      .vec3f(1)
+      .mul(edgeDarkening)
+      .mul(lightGradient * 0.5);
+  } else {
+    const finalUV = d.vec2f(
+      (position.x - position.z * lightDir.x * std.sign(lightDir.z)) * 0.5 + 0.5,
+      1 - (-position.z / lightDir.z) * 0.5 - 0.2,
+    );
+    const data = std.textureSampleLevel(bezierTexture.$, filteringSampler.$, finalUV, 0);
+
+    // Normally it would be just data.y, but there transition is too sudden when the jelly is bunched up.
+    // To mitigate this, we transition into a position-based transition.
+    const jellySaturation = std.mix(0, data.y, std.saturate(position.x * 1.5 + 1.1));
+    const shadowColor = std.mix(d.vec3f(0, 0, 0), jellyColor.rgb, jellySaturation);
+
+    const contrast = 20 * std.saturate(finalUV.y) * (0.8 + endCapX * 0.2);
+    const shadowOffset = -0.3;
+    const featherSharpness = 10;
+    const uvEdgeFeather =
+      std.saturate(finalUV.x * featherSharpness) *
+      std.saturate((1 - finalUV.x) * featherSharpness) *
+      std.saturate((1 - finalUV.y) * featherSharpness) *
+      std.saturate(finalUV.y);
+    const influence = std.saturate((1 - lightDir.y) * 2) * uvEdgeFeather;
+    return std.mix(
+      d.vec3f(1),
+      std.mix(shadowColor, d.vec3f(1), std.saturate(data.x * contrast + shadowOffset)),
+      influence,
+    );
+  }
+};
+
+const calculateAO = (position: d.v3f, normal: d.v3f) => {
+  'use gpu';
+  let totalOcclusion = d.f32(0.0);
+  let sampleWeight = d.f32(1.0);
+  const stepDistance = AO_RADIUS / AO_STEPS;
+
+  for (let i = 1; i <= AO_STEPS; i++) {
+    const sampleHeight = stepDistance * d.f32(i);
+    const samplePosition = position.add(normal.mul(sampleHeight));
+    const distanceToSurface = getSceneDistForAO(samplePosition) - AO_BIAS;
+    const occlusionContribution = std.max(0.0, sampleHeight - distanceToSurface);
+    totalOcclusion += occlusionContribution * sampleWeight;
+    sampleWeight *= 0.5;
+    if (totalOcclusion > AO_RADIUS / AO_INTENSITY) {
+      break;
+    }
+  }
+
+  const rawAO = 1.0 - (AO_INTENSITY * totalOcclusion) / AO_RADIUS;
+  return std.saturate(rawAO);
+};
+
+const calculateLighting = (hitPosition: d.v3f, normal: d.v3f, rayOrigin: d.v3f) => {
+  'use gpu';
+  const lightDir = std.neg(lightUniform.$.direction);
+
+  const fakeShadow = getFakeShadow(hitPosition, lightDir);
+  const diffuse = std.max(std.dot(normal, lightDir), 0.0);
+
+  const viewDir = std.normalize(rayOrigin.sub(hitPosition));
+  const reflectDir = std.reflect(std.neg(lightDir), normal);
+  const specularFactor = std.max(std.dot(viewDir, reflectDir), 0) ** SPECULAR_POWER;
+  const specular = lightUniform.$.color.mul(specularFactor * SPECULAR_INTENSITY);
+
+  const baseColor = d.vec3f(0.9);
+
+  const directionalLight = baseColor.mul(lightUniform.$.color).mul(diffuse).mul(fakeShadow);
+  const ambientLight = baseColor.mul(AMBIENT_COLOR).mul(AMBIENT_INTENSITY);
+
+  const finalSpecular = specular.mul(fakeShadow);
+
+  return std.saturate(directionalLight.add(ambientLight).add(finalSpecular));
+};
+
+const applyAO = (litColor: d.v3f, hitPosition: d.v3f, normal: d.v3f) => {
+  'use gpu';
+  const ao = calculateAO(hitPosition, normal);
+  const finalColor = litColor.mul(ao);
+  return d.vec4f(finalColor, 1.0);
+};
+
+const rayMarchNoJelly = (rayOrigin: d.v3f, rayDirection: d.v3f) => {
+  'use gpu';
+  let distanceFromOrigin = d.f32();
+  let hit = d.f32();
+
+  for (let i = 0; i < 6; i++) {
+    const p = rayOrigin.add(rayDirection.mul(distanceFromOrigin));
+    hit = getMainSceneDist(p);
+    distanceFromOrigin += hit;
+    if (distanceFromOrigin > MAX_DIST || hit < SURF_DIST * 10) {
+      break;
+    }
+  }
+
+  if (distanceFromOrigin < MAX_DIST) {
+    return renderBackground(
+      rayOrigin,
+      rayDirection,
+      distanceFromOrigin,
+      std.select(d.f32(), 0.87, blurEnabledUniform.$ === 1),
+    ).rgb;
+  }
+  return d.vec3f();
+};
+
+const renderPercentageOnGround = (hitPosition: d.v3f, center: d.v3f) => {
+  'use gpu';
+
+  const textWidth = 1.9;
+  const textHeight = 0.33;
+
+  if (
+    std.abs(hitPosition.x - center.x) > textWidth * 0.5 ||
+    std.abs(hitPosition.z - center.z) > textHeight * 0.5
+  ) {
+    return d.vec4f();
+  }
+
+  const localX = hitPosition.x - center.x;
+  const localZ = hitPosition.z - center.z;
+
+  const uvX = (localX + textWidth * 0.5) / textWidth;
+  const uvZ = (localZ + textHeight * 0.5) / textHeight;
+
+  if (uvX < 0.0 || uvX > 1.0 || uvZ < 0.0 || uvZ > 1.0) {
+    return d.vec4f();
+  }
+
+  return std.textureSampleLevel(
+    rayMarchLayout.$.valueTexture,
+    filteringSampler.$,
+    d.vec2f(uvX, uvZ),
+    0,
+  );
+};
+
+const renderBackground = (
+  rayOrigin: d.v3f,
+  rayDirection: d.v3f,
+  backgroundHitDist: number,
+  offset: number,
+) => {
+  'use gpu';
+  const hitPosition = rayOrigin.add(rayDirection.mul(backgroundHitDist));
+
+  const percentageSample = renderPercentageOnGround(
+    hitPosition,
+    d.vec3f(0, 0, 0),
+  );
+
+  let highlights = d.f32();
+
+  const highlightWidth = d.f32(1);
+  const highlightHeight = 0.2;
+  let offsetX = d.f32();
+  let offsetZ = d.f32(0.05);
+
+  const lightDir = lightUniform.$.direction;
+  const causticScale = 0.2;
+  offsetX -= lightDir.x * causticScale;
+  offsetZ += lightDir.z * causticScale;
+
+  const endCapX = slider.endCapUniform.$.x;
+  const sliderStretch = (endCapX + 1) * 0.5;
+
+  if (
+    std.abs(hitPosition.x + offsetX) < highlightWidth &&
+    std.abs(hitPosition.z + offsetZ) < highlightHeight
+  ) {
+    const uvX_orig = ((hitPosition.x + offsetX + highlightWidth * 2) / highlightWidth) * 0.5;
+    const uvZ_orig = ((hitPosition.z + offsetZ + highlightHeight * 2) / highlightHeight) * 0.5;
+
+    const centeredUV = d.vec2f(uvX_orig - 0.5, uvZ_orig - 0.5);
+    const finalUV = d.vec2f(centeredUV.x, 1 - (std.abs(centeredUV.y - 0.5) * 2) ** 2 * 0.3);
+
+    const density = std.max(
+      0,
+      (std.textureSampleLevel(bezierTexture.$, filteringSampler.$, finalUV, 0).x - 0.25) * 8,
+    );
+
+    const fadeX = std.smoothstep(0, -0.2, hitPosition.x - endCapX);
+    const fadeZ = 1 - (std.abs(centeredUV.y - 0.5) * 2) ** 3;
+    const fadeStretch = std.saturate(1 - sliderStretch);
+    const edgeFade = std.saturate(fadeX) * std.saturate(fadeZ) * fadeStretch;
+
+    highlights = (density ** 3 * edgeFade * 3 * (1 + lightDir.z)) / 1.5;
+  }
+
+  const originYBound = std.saturate(rayOrigin.y + 0.01);
+  const posOffset = hitPosition.add(
+    d.vec3f(0, 1, 0).mul(offset * (originYBound / (1.0 + originYBound)) * (1 + randf.sample() / 2)),
+  );
+  const newNormal = getNormalMain(posOffset);
+
+  // Calculate fake bounce lighting
+  const jellyColor = jellyColorUniform.$;
+  const sqDist = sqLength(hitPosition.sub(d.vec3f(endCapX, 0, 0)));
+  const bounceLight = jellyColor.rgb.mul((1 / (sqDist * 15 + 1)) * 0.4);
+  const sideBounceLight = jellyColor.rgb
+    .mul((1 / (sqDist * 40 + 1)) * 0.3)
+    .mul(std.abs(newNormal.z));
+
+  const litColor = calculateLighting(posOffset, newNormal, rayOrigin);
+  const backgroundColor = applyAO(groundColorUniform.$.mul(litColor), posOffset, newNormal)
+    .add(d.vec4f(bounceLight, 0))
+    .add(d.vec4f(sideBounceLight, 0));
+
+  const textColor = groundTextColorUniform.$;
+
+  return d.vec4f(
+    std.mix(backgroundColor.rgb, textColor, percentageSample.x).mul(1.0 + highlights),
+    1.0,
+  );
+};
+
+const rayMarch = (rayOrigin: d.v3f, rayDirection: d.v3f, _uv: d.v2f) => {
+  'use gpu';
+  let totalSteps = d.u32();
+
+  let backgroundDist = d.f32();
+  for (let i = 0; i < MAX_STEPS; i++) {
+    const p = rayOrigin.add(rayDirection.mul(backgroundDist));
+    const hit = getMainSceneDist(p);
+    backgroundDist += hit;
+    if (hit < SURF_DIST) {
+      break;
+    }
+  }
+  const background = renderBackground(rayOrigin, rayDirection, backgroundDist, d.f32());
+
+  const bbox = getSliderBbox();
+  const zDepth = d.f32(0.25);
+
+  const sliderMin = d.vec3f(bbox.left, bbox.bottom, -zDepth);
+  const sliderMax = d.vec3f(bbox.right, bbox.top, zDepth);
+
+  const intersection = intersectBox(rayOrigin, rayDirection, sliderMin, sliderMax);
+
+  if (!intersection.hit) {
+    return background;
+  }
+
+  let distanceFromOrigin = std.max(d.f32(0.0), intersection.tMin);
+
+  for (let i = 0; i < MAX_STEPS; i++) {
+    if (totalSteps >= MAX_STEPS) {
+      break;
+    }
+
+    const currentPosition = rayOrigin.add(rayDirection.mul(distanceFromOrigin));
+
+    const hitInfo = getSceneDist(currentPosition);
+    distanceFromOrigin += hitInfo.distance;
+    totalSteps++;
+
+    if (hitInfo.distance < SURF_DIST) {
+      const hitPosition = rayOrigin.add(rayDirection.mul(distanceFromOrigin));
+
+      if (!(hitInfo.objectType === ObjectType.SLIDER)) {
+        break;
+      }
+
+      const N = getNormal(hitPosition, hitInfo);
+      const I = rayDirection;
+      const cosi = std.min(1.0, std.max(0.0, std.dot(std.neg(I), N)));
+      const F = fresnelSchlick(cosi, d.f32(1.0), d.f32(JELLY_IOR));
+
+      const reflection = std.saturate(d.vec3f(hitPosition.y + 0.2));
+
+      const eta = 1.0 / JELLY_IOR;
+      const k = 1.0 - eta * eta * (1.0 - cosi * cosi);
+      let refractedColor = d.vec3f();
+      if (k > 0.0) {
+        const refrDir = std.normalize(std.add(I.mul(eta), N.mul(eta * cosi - std.sqrt(k))));
+        const p = hitPosition.add(refrDir.mul(SURF_DIST * 2.0));
+        const exitPos = p.add(refrDir.mul(SURF_DIST * 2.0));
+
+        const env = rayMarchNoJelly(exitPos, refrDir);
+        const progress = hitInfo.t;
+        const jellyColor = jellyColorUniform.$;
+
+        const scatterTint = jellyColor.rgb.mul(1.5);
+        const density = d.f32(20.0);
+        const absorb = d.vec3f(1.0).sub(jellyColor.rgb).mul(density);
+
+        const T = beerLambert(absorb.mul(progress ** 2), 0.08);
+
+        const lightDir = std.neg(lightUniform.$.direction);
+
+        const forward = std.max(0.0, std.dot(lightDir, refrDir));
+        const scatter = scatterTint.mul(jellyScatterUniform.$ * forward * progress ** 3);
+        refractedColor = env.mul(T).add(scatter);
+      }
+
+      const jelly = std.add(reflection.mul(F), refractedColor.mul(1 - F));
+
+      const finalJelly = std.mix(background.rgb, jelly, jellyColorUniform.$.w);
+
+      return d.vec4f(finalJelly, 1.0);
+    }
+
+    if (distanceFromOrigin > backgroundDist) {
+      break;
+    }
+  }
+
+  return background;
+};
+
+const raymarchFn = tgpu.fragmentFn({
+  in: { uv: d.vec2f },
+  out: d.vec4f,
+})(({ uv }) => {
+  randf.seed2(randomUniform.$.mul(uv));
+
+  const ndc = d.vec2f(uv.x * 2 - 1, -(uv.y * 2 - 1));
+  const ray = getRay(ndc);
+
+  const color = rayMarch(ray.origin, ray.direction, uv);
+  return d.vec4f(std.tanh(color.rgb.mul(1.3)), 1);
+});
+
+const fragmentMain = tgpu.fragmentFn({
+  in: { uv: d.vec2f },
+  out: d.vec4f,
+})((input) => {
+  return std.textureSample(sampleLayout.$.currentTexture, filteringSampler.$, input.uv);
+});
+
+const rayMarchPipeline = root.createRenderPipeline({
+  vertex: common.fullScreenTriangle,
+  fragment: raymarchFn,
+  targets: { format: 'rgba8unorm' },
+});
+
+const renderPipeline = root.createRenderPipeline({
+  vertex: common.fullScreenTriangle,
+  fragment: fragmentMain,
+  targets: { format: presentationFormat },
+});
+
+let lastTimeStamp = performance.now();
+let frameCount = 0;
+const taaResolver = new TAAResolver(root, width, height);
+
+function createBindGroups() {
+  return {
+    rayMarch: root.createBindGroup(rayMarchLayout, {
+      backgroundTexture: backgroundTexture.sampled,
+      valueTexture: valueTextureView,
+    }),
+    render: [0, 1].map((frame) =>
+      root.createBindGroup(sampleLayout, {
+        currentTexture: taaResolver.getResolvedTexture(frame),
+      }),
+    ),
+  };
+}
+
+(canvas as any).onpaint = () => {
+  const sourceDict = { source: valueElement };
+  const destDict = {
+    destination: { texture: valueRawTexture },
+    width: width,
+    height: height
+  };
+  try {
+    (root.device.queue as any).copyElementImageToTexture(sourceDict, destDict);
+  } catch (e) {
+    // The copyElementImageToTexture API was recently changed to take two maps
+    // (see: https://github.com/WICG/html-in-canvas#idl-changes). This snippet
+    // supports the old syntax temporarily so that the demos do not break.
+    (root.device.queue as any).copyElementImageToTexture(
+      valueElement, width, height, { texture: valueRawTexture });
+    console.log('Note: using old copyElementImageToTexture API');
+  }
+
+  // TODO(pdr): Calculate this correctly using `getElementTransform`. For now,
+  // the transform is just hard-coded.
+  //const view = camera.view;
+  //const proj = camera.proj;
+  //const mvp = m.mat4.mul(proj, view, d.mat4x4f());
+  //const sliderWidth = sliderElement.clientWidth || (canvas.clientWidth * 0.75);
+  const sliderHeight = sliderElement.clientHeight || (canvas.clientHeight * 0.125);
+  let x = (canvas.width / devicePixelRatio) / 8;
+  let y = (canvas.height / devicePixelRatio) / 2 - (sliderHeight / 2);
+  sliderElement.style.transform = `translate(${x}px, ${y}px)`;
+  valueElement.style.transform = `translate(${x}px, ${y}px)`;
+};
+(canvas as any).requestPaint();
+
+let bindGroups = createBindGroups();
+
+let animationFrameHandle: number;
+function render(timestamp: number) {
+  frameCount++;
+  camera.jitter();
+  const deltaTime = Math.min((timestamp - lastTimeStamp) * 0.001, 0.1);
+  lastTimeStamp = timestamp;
+
+  randomUniform.write(d.vec2f((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2));
+
+  const reduce = motionMedia.matches || transparencyMedia.matches;
+  if (reduce) {
+    currentMouseX = targetMouseX;
+    slider.restLen = Math.max(0.001, Math.abs(currentMouseX - slider.anchor[0])) / (slider.n - 1);
+  } else {
+    currentMouseX += (targetMouseX - currentMouseX) * 0.08;
+    slider.restLen = 1.9 / (slider.n - 1);
+  }
+
+  slider.setDragX(currentMouseX);
+  slider.update(deltaTime);
+
+  const currentFrame = frameCount % 2;
+
+  rayMarchPipeline
+    .withColorAttachment({
+      view: textures[currentFrame].sampled,
+      loadOp: 'clear',
+      storeOp: 'store',
+    })
+    .with(bindGroups.rayMarch)
+    .draw(3);
+
+  taaResolver.resolve(textures[currentFrame].sampled, frameCount, currentFrame);
+
+  renderPipeline
+    .withColorAttachment({ view: context })
+    .with(bindGroups.render[currentFrame])
+    .draw(3);
+
+  animationFrameHandle = requestAnimationFrame(render);
+}
+
+function handleResize() {
+  [width, height] = [canvas.width * qualityScale, canvas.height * qualityScale];
+  camera.updateProjection(Math.PI / 4, width, height);
+  textures = createTextures(root, width, height);
+  backgroundTexture = createBackgroundTexture(root, width, height);
+  taaResolver.resize(width, height);
+  frameCount = 0;
+
+  bindGroups = createBindGroups();
+}
+
+const resizeObserver = new ResizeObserver(() => {
+  handleResize();
+});
+resizeObserver.observe(canvas);
+
+animationFrameHandle = requestAnimationFrame(render);
+
+
+const hcMedia = window.matchMedia('(forced-colors: active)');
+const darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
+const contrastMedia = window.matchMedia('(prefers-contrast: more)');
+
+const motionMedia = window.matchMedia('(prefers-reduced-motion: reduce)');
+const transparencyMedia = window.matchMedia('(prefers-reduced-transparency: reduce)');
+
+const updateReducedFeatures = () => {
+  const reduce = motionMedia.matches || transparencyMedia.matches;
+
+  if (reduce) {
+    slider.damping = 1.0;
+    slider.archStrength = 0.0;
+    jellyScatterUniform.write(0.0);
+  } else {
+    slider.damping = 0.01;
+    slider.archStrength = 2.0;
+    jellyScatterUniform.write(JELLY_SCATTER_STRENGTH);
+  }
+};
+
+motionMedia.addEventListener('change', updateReducedFeatures);
+transparencyMedia.addEventListener('change', updateReducedFeatures);
+updateReducedFeatures();
+
+const parseColor3 = (colorStr: string): d.Infer<typeof d.vec3f> => {
+  const match = colorStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (match) {
+    return d.vec3f(parseInt(match[1]) / 255, parseInt(match[2]) / 255, parseInt(match[3]) / 255);
+  }
+  return d.vec3f(1.0);
+};
+
+const parseColor4 = (colorStr: string): d.Infer<typeof d.vec4f> => {
+  const match = colorStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([0-9.]+))?\)/);
+  if (match) {
+    const a = match[4] !== undefined ? parseFloat(match[4]) : 1.0;
+    return d.vec4f(parseInt(match[1]) / 255, parseInt(match[2]) / 255, parseInt(match[3]) / 255, a);
+  }
+  return d.vec4f(1.0, 1.0, 1.0, 1.0);
+};
+
+const updateColors = () => {
+  const style = getComputedStyle(sliderElement);
+
+  jellyColorUniform.write(parseColor4(style.color));
+  groundColorUniform.write(parseColor3(style.backgroundColor));
+  groundTextColorUniform.write(parseColor3(style.caretColor));
+  (canvas as any).requestPaint?.();
+};
+
+sliderElement.addEventListener('focus', updateColors);
+sliderElement.addEventListener('blur', updateColors);
+hcMedia.addEventListener('change', updateColors);
+darkMedia.addEventListener('change', updateColors);
+contrastMedia.addEventListener('change', updateColors);
+updateColors();
+
+
+export function onCleanup() {
+  sliderElement.removeEventListener('focus', updateColors);
+  sliderElement.removeEventListener('blur', updateColors);
+  hcMedia.removeEventListener('change', updateColors);
+  darkMedia.removeEventListener('change', updateColors);
+  contrastMedia.removeEventListener('change', updateColors);
+  motionMedia.removeEventListener('change', updateReducedFeatures);
+  transparencyMedia.removeEventListener('change', updateReducedFeatures);
+  cancelAnimationFrame(animationFrameHandle);
+  resizeObserver.disconnect();
+  root.destroy();
+}
diff --git a/research/canvas/_raw/secpriv.md b/research/canvas/_raw/secpriv.md
new file mode 100644
index 0000000..c61bdf1
--- /dev/null
+++ b/research/canvas/_raw/secpriv.md
@@ -0,0 +1,85 @@
+01.  What information might this feature expose to Web sites or other parties,
+     and for what purposes is that exposure necessary?
+     
+     A design requirement is to not expose any new security information, and to limit the amount of new privacy information (see: [Privacy-preserving painting](https://github.com/WICG/html-in-canvas?tab=readme-ov-file#privacy-preserving-painting)). For the purpose of enabling interactivity, this API will reveal form control rendering, scrollbar rendering, text selection, find-in-page selection, and the caret blink rate (all without revealing OS theme colors).
+     
+02.  Do features in your specification expose the minimum amount of information
+     necessary to enable their intended uses?
+     
+     Yes.
+     
+03.  How do the features in your specification deal with personal information,
+     personally-identifiable information (PII), or information derived from
+     them?
+     
+     Since the feature renders pixels from DOM elements into canvas, those pixels can now be accessed by script, so it is important that no PII is present in those pixels. Cross-origin information, visited link information, spellcheck information, and autofill previews must not be painted. Disabling painting of this information also prevents revealing invalidation information via the `paint` event. See [privacy-preserving-painting](https://github.com/WICG/html-in-canvas/tree/main?tab=readme-ov-file#privacy-preserving-painting) for additional details.
+     
+04.  How do the features in your specification deal with sensitive information?
+     
+     See answer above, the feature ensures no new security information is revealed, and limits new privacy information.
+
+05.  Do the features in your specification introduce new state for an origin
+     that persists across browsing sessions?
+     
+     No.
+     
+06.  Do the features in your specification expose information about the
+     underlying platform to origins?
+     
+     Similar to #1, the painting of information revealing information about the underlying platform (e.g., form autofill) is disabled, but some new platform information is revealed for interactivity, such as the caret blink rate. See [privacy-preserving-painting](https://github.com/WICG/html-in-canvas/tree/main?tab=readme-ov-file#privacy-preserving-painting) for additional details.
+     
+8.  Does this specification allow an origin to send data to the underlying
+     platform?
+     
+     No.
+     
+9.  Do features in this specification enable access to device sensors?
+
+     No.
+     
+10.  Do features in this specification enable new script execution/loading
+     mechanisms?
+     
+     No.
+     
+11.  Do features in this specification allow an origin to access other devices?
+
+     No.
+     
+12.  Do features in this specification allow an origin some measure of control over
+     a user agent's native UI?
+     
+     No.
+     
+13.  What temporary identifiers do the features in this specification create or
+     expose to the web?
+     
+     None.
+     
+14.  How does this specification distinguish between behavior in first-party and
+     third-party contexts?
+     
+     There is no difference in behaviour.
+     
+15.  How do the features in this specification work in the context of a browser’s
+     Private Browsing or Incognito mode?
+     
+     There is no difference in behaviour for these modes.
+     
+16.  Does this specification have both "Security Considerations" and "Privacy
+     Considerations" sections?
+     
+     The specification is still in progress. The privacy issues have been highlighted in the explainer.
+     
+17.  Do features in your specification enable origins to downgrade default
+     security protections?
+     
+     No.
+     
+18.  How does your feature handle non-"fully active" documents?
+
+     It only works in fully active documents.
+     
+19.  What should this questionnaire have asked?
+
+     No suggestions.
diff --git a/research/dogfood-coffee/01-references.md b/research/dogfood-coffee/01-references.md
new file mode 100644
index 0000000..959c789
--- /dev/null
+++ b/research/dogfood-coffee/01-references.md
@@ -0,0 +1,63 @@
+# 1단계 — 레퍼런스 조사 (무월 원두 정기구독)
+
+## 브리프
+홈카페 3년차 이상 애호가가 **구독 신청 버튼을 누르게**. 느낌은 **차분한, 정확한**.
+
+## R1 · 구조 — Coffee Collective  https://coffeecollective.dk
+갤러리: ecomm.design `/tag/coffee/` (인덱스에서 href 추출) · 업종: 스페셜티 커피 D2C
+
+- **가져올 축**: 축 1(그리드), 축 6(시선 흐름·섹션 순서)
+- **축 1 그리드**: 컨테이너 1425px / 뷰포트 1440px = **0.99 (사실상 풀블리드)**. 내부 2분할 673 + 713px (≈1:1). 보조 컬럼 581·633·650px
+- **축 2 타입**(참고만): 크기 10종 = 10/12/14/16/20/22/24/25.6/30/48px → **8단계 초과 = 통제 실패**. 최대 48 ÷ 본문 14 = **3.4배 (4배 미만 = 위계 약함)**. 패밀리 1개(NB International Pro)
+- **축 3 컬러**(참고만): 배경 2단계 #FAF6ED(20) / #F1EDE3(14). 텍스트 1단계 지배 #4C4341(101). **강조 오렌지 #E17526 등장 1회** = 면적 1% 미만. radius 종류 **1개**(50%, 원형 아이콘만) → 각진 형태 어휘
+- **축 4 여백**: ❌ **빈칸.** `sectionPadding` 추출이 `0px / 0px` 하나만 반환. 이 사이트는 `<section>`에 패딩을 주지 않는다
+- **축 6 시선**: 히어로(상품 2종 + h1) → 선별커피 → **구독** → 장비 → 특가 → 도매 → 뉴스레터 → 카페위치. CTA `Subscribe now`가 **3번째 섹션**. 목표 행동이 "구매"와 "구독"으로 **갈라져 있음**
+- **6축 밖의 관측**: ① 내비 최상위에 `Transparency`(생두 구매가·농가 공개). 이 업종의 신뢰 장치는 스토리가 아니라 **거래 내역 공개**다. ② 가격을 히어로에서 즉시 노출(379/161/159 DKK). 숨기지 않는다
+- **변형**: 컨테이너를 0.99 풀블리드 → **최대 1120px**로 축소. 한국어 본문이 풀블리드에서 한 줄 40자를 넘기 때문. 그리고 목표 행동을 **구독 단 하나로 통합** — 브리프가 구독 전환을 명시했으므로 구매 CTA를 만들지 않는다
+
+## R2 · 톤 — Fitzcarraldo Editions  https://fitzcarraldoeditions.com   [업종: 독립 문학 출판 — R1과 다름 ✓]
+갤러리 라우팅 이탈 — 사유는 FINDINGS.md F2 참조
+
+- **가져올 축**: 축 2(타입 스케일), 축 3(컬러 역할)
+- **축 2 타입**: 크기 **5단계** 15/16/18/20.8/22px. 최대 22 ÷ 본문 16 = 1.375배(인덱스 페이지라 위계 약함 — 그대로 안 가져감). 패밀리 2개인데 **둘 다 세리프**(adobe-caslon-pro 120회 + kings-caslon 13회). 본문 16px / line-height 24px = **1.5** / 컬럼 폭 **522px**
+- **축 3 컬러**: 배경 2단계 #FFFFFF(12) / #FBFBFB(8). 텍스트 **3단계** #151B23(67) / #363636(3) / #666666(7). **강조 = 파랑 #0033A0 하나뿐, 46회 전부 링크**. radius **5종**(2/3/4/5/50%) → 우연히 결정됨(안 가져감)
+- **축 1 그리드**(참고): 컨테이너 1329~1345px, 2분할 672/673px
+- **축 4 여백**: ❌ **빈칸.** section padding이 `32px / 32px` 하나만 나옴
+- **축 6**: h1이 실질적으로 없고 h2는 0개. 위계를 태그가 아니라 크기·색으로만 만든다 — **구조적 결함이므로 안 가져간다**
+- **6축 밖의 관측**: 상품(책)을 **이미지 없이 제목 + 저자 + 한 문단 설명**으로 판다. 텍스트가 상품 이미지를 대신한다. → 브리프 제약(사진 없음)과 정확히 맞는다
+- **변형**: 타입 비율을 1.375배 → **최대/본문 4.2배**로 벌린다. 원본은 카탈로그 인덱스라 위계가 필요 없지만 우리는 단일 랜딩이라 첫 화면에서 위계가 서야 한다. 세리프 2종은 **세리프 1 + 산세리프 1**로 교체 — 한글 세리프(마루 부리)를 본문에 쓰면 16px에서 가독성이 떨어진다
+
+## R3 · 디테일 — Codrops, "A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()"
+https://tympanus.net/codrops/2024/01/17/a-practical-introduction-to-scroll-driven-animations-with-css-scroll-and-view/
+
+- **가져올 축**: 축 5(모션 언어) — R3는 이 축만 채운다
+- **모션**: `animation-timeline: view()` — 요소가 뷰포트에 교차할 때 페이드 + 상승. **JS 0바이트**
+- **구현 제약**:
+  - 브라우저: 기사 시점 **Chromium 전용** (Firefox·Safari 미지원)
+  - 이중 게이팅 필수 — `@media (prefers-reduced-motion: no-preference)` 안에 `@supports (animation-timeline: view())`
+  - 폴백: 애니메이션 없음. **콘텐츠는 기본 visible**이어야 한다(antipatterns 5절 "reveal 실패 시 opacity:0 잔존" 회피)
+  - 폴리필(flackr/scroll-timeline) 존재하나 **쓰지 않는다** — 브리프가 "프레임워크 없는 정적 HTML/CSS"이고 모바일 70%다
+- **변형**: `animation-range`를 `entry 0% entry 40%`로 짧게. 모바일 뷰포트에서는 진입 구간이 길면 요소가 계속 반쯤 투명한 상태로 머문다
+
+## 회색조 위계
+가장 강한 덩어리는 **로스팅 프로파일 표(원두 3종의 산미·바디 수치)**, 두 번째 **구독 CTA**, 세 번째 **가격·주기 조건**.
+비즈니스 우선순위 [1 구독 신청 / 2 원두 선택 근거 제공 / 3 가격 납득]과 — **부분 불일치**. 1위 덩어리가 CTA가 아니다.
+→ 4-1에서 조정: 프로파일 표는 폭을 넓게 두되 **명도 대비를 낮추고**, CTA는 면적은 작지만 **유일한 반전 블록(잉크 배경 + 오프화이트 텍스트)**으로 만들어 회색조에서 가장 어둡게 한다. 색으로 해결하지 않는다.
+
+## 안 할 것 (antipatterns.md에서 이 브리프에 특히 위험한 항목)
+1. **크림/베이지를 "고급"의 기본값으로** (1절) — 커피 브리프에서 가장 빠지기 쉬운 함정. 오프화이트를 쓰되 **왜 그 색인지 브리프와 연결**하고 잉크·강조를 재설계한다
+2. **근거 없는 지표 배너** (3절) + **모든 숫자가 어림수** (6절) — "10,000+ 구독자", "4.9★" 금지. 사용자가 준 수치가 없다. **5단계 하드 게이트 11번 대상**
+3. **버튼이 항상 2개 나란히** (4절) — R1이 구매/구독으로 갈라져 있으므로 그대로 베끼면 걸린다. 주 CTA 1개
+4. **아이콘이 카드 상단 중앙인 3열 피처 카드** (3·4절) — 원두 3종을 이 형태로 만들면 즉시 걸린다. 표 또는 비대칭 리스트로
+5. **한글 조판 8절 전체** — `word-break: keep-all`, line-height 1.6~1.8, 음수 자간 금지, 한 줄 25~40자, 라틴 폰트를 폴백 앞에
+6. **이미지 없음 → 떠 있는 3D 블롭·일반 SVG 도형으로 채우기** (7절) — 사진이 없다고 장식 그래픽을 만들지 않는다. R2처럼 **텍스트가 이미지를 대신**한다
+
+---
+## 검증 조건 자가 판정
+- [x] R1/R2/R3 각각 원본 URL (갤러리 URL 아님)
+- [x] R2 업종이 R1과 다름 (문학 출판 vs 커피 커머스)
+- [x] 각 슬롯에 가져올 축 명시
+- [x] 각 슬롯에 변형 1개 + 이유
+- [~] 6축 값에 숫자 있음 — **축 4(여백 리듬)는 R1·R2 모두 빈칸.** §5 스크립트가 값을 못 뽑았음(FINDINGS F3)
+- [x] R3에 구현 제약(지원 범위·JS 비용)
+- [~] 회색조 위계 — 작성했으나 **화면이 아직 없어 추정**이다. 실제 판정은 4-1 이후 (FINDINGS F4)
diff --git a/research/dogfood-coffee/02-direction.md b/research/dogfood-coffee/02-direction.md
new file mode 100644
index 0000000..7f837b3
--- /dev/null
+++ b/research/dogfood-coffee/02-direction.md
@@ -0,0 +1,77 @@
+# 2단계 — 방향 결정
+
+## 한 문장 컨셉
+**감상은 이름에만, 화면에는 수치만.**
+"무월(霧月)"이라는 이름은 모호하다. 이 브랜드가 파는 것은 모호함이 아니라 **측정된 정확성**이다. 그 낙차를 컨셉으로 쓴다.
+
+## 프리셋 — ❗ 네 프리셋 중 어느 것도 맞지 않는다. 새로 정의한다: `quiet-commerce`
+
+판정 근거(각 프리셋 파일의 "쓰지 마라"):
+
+| 프리셋 | 배제 사유 |
+|---|---|
+| `editorial` | "**전환이 목적인 랜딩**에는 쓰지 마라" — 이 브리프의 목표가 정확히 구독 전환이다 |
+| `anti-grid` | "**전환이 목적인 커머스**에는 쓰지 마라" — 동일 |
+| `swiss-minimal` | "제품이 복잡할 때. B2B·도구·문서" — 이 제품은 원두 3종이고 B2C다. 적극적 근거가 없다 |
+| `dark-instrument` | 다크를 정당화할 이유(야간 사용·밝은 데이터 시각화·제품 자체가 어두움)가 브리프에 없다 |
+
+→ README의 "어느 것도 맞지 않으면 새로 정의해라"를 따른다. 항목 구조는 프리셋 문서 형식 그대로 채운다.
+(이 판정 자체가 검증 결과다 — FINDINGS.md F5)
+
+---
+
+### `quiet-commerce` — 읽히는 커머스
+
+> 한 문장: **콘텐츠가 설득하고, 화면은 한 번만 요구한다.**
+> editorial의 타이포 규율 + 전환 구조. 콘텐츠가 주인공이되 CTA가 경로 위에 정확히 하나 있다.
+
+**언제 고르나**: 상품 수가 적고(≤5), 구매자가 이미 카테고리를 아는 D2C. 사진보다 사양·근거가 설득의 주체일 때.
+**쓰지 마라**: 상품 수가 많은 커머스(그리드·필터가 주인공이 됨), 카테고리 입문자 대상.
+
+#### 타이포그래피
+- 디스플레이 **세리프 1**(R2에서 가져온 원리) + 본문 **산세리프 1**. R2는 세리프 2종이었으나 한글 본문 세리프는 16px에서 가독성이 떨어져 교체
+- 비율 **1.333**, 최대/본문 **4.2배** (R2의 1.375배를 의도적으로 벌림)
+- 단계 **4개**. R1은 10단계였다 — 그대로 두면 antipatterns 2절 "8단계 이상 = 통제 실패"에 걸린다
+- 웨이트 2개
+
+| 슬롯 | 라틴 | 한글 |
+|---|---|---|
+| 디스플레이 | Fraunces (무료, Google Fonts) | 마루 부리 |
+| 본문·UI | Switzer (Fontshare, 무료 상업) | Pretendard Variable |
+| 수치 | 본문과 동일 + `tabular-nums` | — |
+
+#### 색
+- 배경은 순백이 아니다. **오프화이트**. 단 크림/베이지는 아니다 — antipatterns 1절 "크림을 고급의 기본값으로"에 걸린다. 브리프와의 연결: 무월 = 안개 낀 달 → **회청색이 2% 섞인 종이색**
+- 잉크는 순흑이 아니다
+- **강조색 하나, 면적 5% 미만.** R1이 오렌지를 1회만 쓴 것(면적 <1%)과 R2가 파랑을 링크에만 쓴 것(46회, 전부 링크)이 같은 원리다
+- hue 2개 (중립 + 강조). antipatterns "hue 4개 이상" 회피
+
+#### 간격
+- 8px 그리드. 여백 값 **5종**
+- 섹션 간 : 요소 간 = **1:5**
+- 비대칭 — 본문을 그리드 왼쪽에 두고 오른쪽 여백에 수치를 흘린다 (R2의 "텍스트가 이미지를 대신한다"를 여백 운용으로 번역)
+- 컨테이너 최대 **1120px**, 본문 `--measure`는 한글 **32자**
+
+#### 재질 (`svg-filters.md`)
+- **필름 그레인 `--grain: 0.03`** — 최약. 오프화이트 배경의 밴딩만 없앤다
+- 유리·글로우·굴절 없음
+- 사진이 없으므로 듀오톤·그라디언트 맵은 이번 브리프에서 쓸 곳이 없다
+
+#### 모션 (`motion.md`)
+- 거의 움직이지 않는다. R3의 `animation-timeline: view()` 페이드 + 8px 상승 하나만
+- 스크롤 재킹 금지
+
+#### 흔한 실패
+1. 세리프 디스플레이를 쓰고 여백이 좁다
+2. CTA가 2개로 갈라진다 (R1이 그렇다 — 베끼면 걸린다)
+3. 수치를 "지표 배너"로 만든다 — 근거 없는 숫자는 신뢰를 깎는다
+4. 한글에 라틴 세리프만 지정해 한글이 시스템 기본으로 떨어진다
+
+---
+
+## 감수할 리스크 하나
+**히어로에 이미지도 감성 카피도 없이, 원두 3종의 로스팅 프로파일 수치표를 첫 화면에 올린다.**
+
+- 정당화: 대상이 홈카페 3년차 이상이고 이미 여러 로스터리를 거쳤다. 이들에게 "장인의 손길" 카피는 정보량 0이다. 산미·바디 수치는 즉시 판단 재료가 된다
+- 이 리스크가 브리프 제약(사진 없음)을 **결함에서 자산으로** 바꾼다
+- 대담함은 여기 한 곳뿐. 나머지(타이포·색·여백)는 조용히 받쳐준다
diff --git a/research/dogfood-coffee/03-tokens.css b/research/dogfood-coffee/03-tokens.css
new file mode 100644
index 0000000..6dc1571
--- /dev/null
+++ b/research/dogfood-coffee/03-tokens.css
@@ -0,0 +1,100 @@
+/* ==========================================================================
+   무월(霧月) — 3단계 디자인 토큰
+   프리셋: quiet-commerce (커스텀, 02-direction.md 참조)
+   ========================================================================== */
+
+:root {
+  /* ---- 타입 — 비율 1.333 (Perfect Fourth), 본문 16px 기준 ---------------
+     tokens.md §6은 --step--1 ~ --step-5 (7단계)를 산출물로 요구한다.
+     antipatterns.md §2는 "3~5단계로 제한"을 권한다.
+     → 7개를 정의하되 화면에서 실제로 쓰는 것은 4개다:
+        --step--1(라벨) / --step-0(본문) / --step-2(소제목) / --step-5(디스플레이)
+        나머지 3개는 예약. 쓰려면 이 주석을 지우고 역할을 적어라.  (FINDINGS F6)  */
+  --step--1: 0.75rem;                                          /* 12 — 라벨·캡션 [사용] */
+  --step-0:  1rem;                                             /* 16 — 본문        [사용] */
+  --step-1:  1.333rem;                                         /* 21 — 예약 */
+  --step-2:  clamp(1.5rem, 1.32rem + 0.9vw, 1.777rem);         /* 28 — 소제목      [사용] */
+  --step-3:  2.369rem;                                         /* 38 — 예약 */
+  --step-4:  3.157rem;                                         /* 51 — 예약 */
+  --step-5:  clamp(2.25rem, 1.3rem + 4.75vw, 4.209rem);        /* 67 — 디스플레이  [사용] */
+  /* 최대(67) ÷ 본문(16) = 4.2배  — antipatterns.md §2 "최대/본문 4배 이상" 통과 */
+
+  --leading-tight:  1.25;   /* 디스플레이 — 한글이라 라틴 1.1보다 높게 */
+  --leading-normal: 1.7;    /* 본문 — 한글 1.6~1.8 규칙 */
+  --measure: 32ch;          /* 한글 32자. R2 관측 522px과 수렴 */
+
+  --font-display: 'Fraunces', 'Pretendard Variable', Pretendard, serif;
+  --font-body:    'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
+  /* 폰트 파일 2개 (tokens.md §5 예산 준수).
+     Switzer(라틴 본문)와 마루 부리(한글 디스플레이)를 의도적으로 버렸다 — 사유는 아래 성능 예산 주석. */
+
+  /* ---- 색 — 역할별. hue 2개(중립 + 강조) --------------------------------
+     surface: 안개 낀 종이. 순백 아님, 크림/베이지도 아님(antipatterns §1).
+     accent : 로스팅된 원두 갈색. 보라·인디고 계열 아님(최우선 지문 1위 회피). */
+  --surface:        #F3F4F2;
+  --surface-raised: #EAEBE7;
+  --ink:            #1A1C1A;   /* 순흑 아님 */
+  --ink-muted:      #5C605B;
+  --line:           #D6D8D3;   /* 장식용 구분선 (텍스트·UI 아님) */
+  --line-strong:    #868C83;   /* 인터랙티브 요소 경계 — 3:1 필요 */
+  --accent:         #7A3E1D;
+  --accent-ink:     #F3F4F2;
+
+  /* 측정된 대비비 (계산식 WCAG 2.x relative luminance)
+     --ink        on --surface        15.54:1  ✓ 본문 4.5:1
+     --ink        on --surface-raised 14.32:1  ✓
+     --ink-muted  on --surface         5.80:1  ✓
+     --ink-muted  on --surface-raised  5.35:1  ✓
+     --accent     on --surface         7.51:1  ✓ 링크 텍스트
+     --accent-ink on --accent          7.51:1  ✓ CTA 내부 텍스트
+     --line-strong on --surface        3.12:1  ✓ UI 3:1
+     --line       on --surface         1.30:1  — 장식 전용. 텍스트·인터랙티브 경계에 쓰지 마라 */
+
+  /* 다크 모드: 브리프에 근거 없음 → 지원하지 않는다. (가정 명시) */
+
+  /* ---- 간격 — 8px 리듬 ------------------------------------------------- */
+  --space-1: 0.25rem;  /*   4 */
+  --space-2: 0.5rem;   /*   8 */
+  --space-3: 1rem;     /*  16 */
+  --space-4: 1.5rem;   /*  24 */
+  --space-5: 2.5rem;   /*  40 — 요소 간 */
+  --space-6: 4rem;     /*  64 */
+  --space-7: 6rem;     /*  96 */
+  --space-8: 10rem;    /* 160 — 섹션 간. 요소 간(40) 대비 1:4 */
+
+  /* ---- 형태 ------------------------------------------------------------
+     tokens.md §6 산출물 형식에 radius 항목이 없다. 그런데 SKILL.md 하드 게이트 3이
+     "코너 반경이 규칙 없이 섞여 있는가"를 묻고 antipatterns.md §4는 어휘 2개를 요구한다.
+     → 토큰을 직접 추가한다. (FINDINGS F8) */
+  --radius-container:   2px;   /* 표·패널 — 인쇄물 감각이라 거의 각지게 */
+  --radius-interactive: 2px;   /* 버튼·입력 — 컨테이너와 같게 통일 */
+
+  --container: 1120px;      /* R1의 풀블리드 0.99를 축소한 값 */
+  --pad-inline: clamp(1.25rem, 1rem + 2vw, 5rem);  /* 모바일 20px → 데스크톱 80px */
+
+  /* ---- 모션 ------------------------------------------------------------ */
+  --dur-instant: 100ms;
+  --dur-quick:   200ms;
+  --dur-normal:  350ms;
+  --dur-slow:    600ms;
+  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
+  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ---- 재질 (svg-filters.md) ------------------------------------------- */
+  --grain: 0.03;   /* 최약. 오프화이트 배경의 밴딩 제거용 */
+}
+
+/* ==========================================================================
+   성능 예산 = JS 0KB / 첫 인터랙션 3초 (모바일 4G)
+   - 프레임워크 없음. R3 모션은 CSS scroll-driven이라 JS 0바이트
+   - 폰트 파일 2개: Fraunces(latin 서브셋) + Pretendard Variable(korean+latin 서브셋)
+     · tokens.md §5 "폰트 2개 이하"를 지키기 위해 4개 후보 중 2개를 버렸다.
+       버린 것: Switzer(라틴 본문) → Pretendard의 라틴으로 대체
+                마루 부리(한글 디스플레이) → Pretendard 700으로 대체
+     · antipatterns.md §8 "라틴 폰트를 폴백 앞에" 규칙은 --font-display에서만 지킨다.
+       --font-body는 Pretendard가 앞이지만, Pretendard는 자체 라틴 글리프를 포함하므로
+       한글 폰트로 라틴이 조악하게 그려지는 문제가 없다. (예외 근거 명시)  (FINDINGS F7)
+   - 이미지 없음(브리프 제약) → 이미지 예산 0
+   - 애니메이션 속성: transform / opacity 만
+   ========================================================================== */
diff --git a/research/dogfood-coffee/05-structure-plan.md b/research/dogfood-coffee/05-structure-plan.md
new file mode 100644
index 0000000..3db28d5
--- /dev/null
+++ b/research/dogfood-coffee/05-structure-plan.md
@@ -0,0 +1,33 @@
+# 4단계 — 히어로 이후 섹션 구조 계획 (코드 미작성)
+
+범위 제한에 따라 히어로만 구현했다. 이하는 계획이다.
+
+## 섹션 순서 — 브리프의 설득 논리로 재배열
+antipatterns.md §3 "표준 골격(히어로 → 3열 피처 → 로고월 → 요금제 → FAQ)"을 쓰지 않는다.
+대상이 이미 여러 로스터리를 거쳤으므로 **불신 → 검증 → 조건 → 행동** 순서로 간다.
+
+| # | 섹션 | 역할 | 레이아웃 패밀리 | 슬롭 회피 메모 |
+|---|---|---|---|---|
+| 1 | 히어로 (구현됨) | 판단 재료 즉시 제시 | 헤드 풀폭 + 5:7 비대칭 | 배지 없음, CTA 1개 |
+| 2 | 척도 설명 | "산미 4"가 무슨 뜻인지 정의 | 좌측 본문 + 우측 여백 주석 | 아이콘 카드 금지. 정의문 3개를 본문으로 |
+| 3 | 거래 내역 (`#ledger`) | 생두 구매가·농가·환율 공개 | 전폭 표 | R1 Transparency의 원리. **숫자는 실제 값 확보 후에만 공개** |
+| 4 | 배송 조건 (`#plan`) | 주기·용량·가격·취소 | 2열 비교표(카드 아님) | 요금제 3열 카드 + "Most popular" 배지 금지 |
+| 5 | 자주 오는 문의 | 실제 문의 3개 | 정의 목록 | 가상 FAQ 6개 금지. 문의가 없으면 섹션 삭제 |
+| 6 | 푸터 | 사업자 정보·연락처·주소 | 좌측 정렬 단일 블록 | 링크 4열 + 소셜 아이콘 금지 |
+
+레이아웃 패밀리 4종 (헤드+비대칭 / 본문+여백주석 / 전폭 표 / 정의 목록) → SKILL.md 카운트 규칙 "섹션 6개 이상이면 패밀리 최소 3개" 통과.
+
+## 확보해야 할 실제 데이터 (없으면 해당 섹션 삭제)
+- 원두 3종의 산미·바디·단맛 점수와 로스팅 날짜 → 히어로 표의 `—` 자리
+- 생두 구매가·농가명·수입 시점 → 3번 섹션
+- 구독 주기별 가격과 취소 정책 → 4번 섹션
+- 실제 받은 문의 3건 → 5번 섹션
+- 사업자등록번호·통신판매업 신고번호·주소·전화 → 푸터
+
+**어느 하나도 지어내지 않는다.** SKILL.md 하드 게이트 11 대상이다.
+
+## 사진이 생겼을 때
+브리프상 지금은 없다. 생기면:
+- `aspect-ratio` 고정으로 CLS 0 유지
+- 듀오톤(`svg-filters.md` R4)으로 톤 통일 — 여러 산지 사진의 색온도가 제각각일 것이다
+- 크기 차이로 리듬 생성. 전부 같은 비율 금지
diff --git a/research/dogfood-coffee/design.md b/research/dogfood-coffee/design.md
new file mode 100644
index 0000000..50c2466
--- /dev/null
+++ b/research/dogfood-coffee/design.md
@@ -0,0 +1,82 @@
+# design.md — 무월(霧月) 원두 정기구독 랜딩
+
+> 6단계 산출물. 다음 실행(사람이든 에이전트든)은 이 파일을 읽고 같은 결정을 이어간다.
+
+## 브리프 3줄
+- **무엇을**: 수제 커피 로스터리 "무월"의 원두 정기구독 단일 랜딩 페이지
+- **누구에게**: 홈카페 3년차 이상 30~40대. 여러 로스터리를 거쳤고 산미·로스팅 프로파일을 구분한다. 목표는 구독 신청
+- **제약**: 한국어 / 정적 HTML·CSS(프레임워크 없음) / 사진 없음 / 모바일 트래픽 70% / 성능 예산 스킬 기본값
+
+## 레퍼런스
+| 슬롯 | 사이트 | 업종 | 가져온 축 |
+|---|---|---|---|
+| R1 · 구조 | https://coffeecollective.dk | 스페셜티 커피 D2C | 축 1(그리드), 축 6(시선·섹션 순서) |
+| R2 · 톤 | https://fitzcarraldoeditions.com | 독립 문학 출판 | 축 2(타입 스케일), 축 3(컬러 역할) |
+| R3 · 디테일 | https://tympanus.net/codrops/2024/01/17/a-practical-introduction-to-scroll-driven-animations-with-css-scroll-and-view/ | — | 축 5(모션) |
+
+상세 수치와 변형 사유는 `01-references.md`.
+
+## 한 문장 컨셉
+**감상은 이름에만, 화면에는 수치만.**
+
+## 프리셋
+**`quiet-commerce` (커스텀 정의).** 기존 4개 프리셋이 전부 "전환이 목적인 커머스 랜딩"을 배제하거나 근거가 없어 새로 정의했다. 정의 전문은 `02-direction.md`.
+
+## 감수한 리스크 하나
+히어로에 이미지도 감성 카피도 없이 **원두 3종의 로스팅 프로파일 수치표**를 첫 화면에 올린다.
+→ ⚠️ **현재 미완성**: 실제 수치를 확보하지 못해 표가 `—`로 비어 있다. 값이 들어와야 이 리스크가 성립한다. 지어내지 않았다(하드 게이트 11).
+
+## 토큰
+`03-tokens.css` 전문. 요약:
+- 타입 비율 **1.333**, 본문 16px, 최대/본문 **4.2배**. 7개 정의 / **실사용 4개**
+- 색 역할 8개. `--surface #F3F4F2` / `--ink #1A1C1A` / `--accent #7A3E1D` (강조 1개, hue 2개)
+- 대비 실측: 본문 15.54:1 · 보조 5.80:1 · CTA 7.51:1 · 인터랙티브 경계 3.12:1 — 전부 통과
+- 간격 8단계, 섹션:요소 = 1:4. 컨테이너 1120px, `--measure` 32ch(한글)
+- 라인하이트 본문 **1.7**(한글), 음수 자간은 디스플레이 `-0.015em`만
+- radius 어휘 **1개(2px)** — tokens.md에 radius 항목이 없어 직접 추가
+- 재질 `--grain: 0.03` (필름 그레인 최약, data URI 배경)
+- 다크 모드: 브리프 근거 없어 **지원하지 않음**
+
+## 성능 — 예산과 실측
+| 항목 | 예산 | 실측 | 판정 |
+|---|---|---|---|
+| 히어로까지 JS (gzip) | 150KB | **0KB** (script 태그 0개) | ✓ |
+| WebGL/3D | +200KB | 0 (미사용) | ✓ |
+| 총 전송량(첫 화면) | 1MB | **13.4KB** (폰트 캐시 상태) | ✓ |
+| 폰트 패밀리 | 2개 이하 | 2개 (Fraunces, Pretendard) | ✓ |
+| 폰트 **파일** 수 | 2개 이하 | **14개** | ✗ — 아래 참조 |
+| 애니메이션 속성 | transform/opacity만 | opacity, transform | ✓ |
+| LCP / CLS | 2.5초 / 0.1 | **미측정** | 측정 절차 없음 |
+
+폰트 파일 14개는 Pretendard `dynamic-subset`이 유니코드 범위별로 분할된 결과다. **이것이 올바른 최적화**이며 실제 전송은 페이지에 쓰인 글자 범위만이다. tokens.md의 "폰트 파일 2개 이하"를 문자 그대로 적용하면 한글 프로젝트에서 잘못된 방향(단일 대용량 파일)으로 유도된다. 예산 항목을 **패밀리 수**로 읽고 통과 처리했으며, 그 사실을 여기 명시한다.
+
+## 채택한 이펙트와 폴백
+| 이펙트 | 구현 | 폴백 |
+|---|---|---|
+| 필름 그레인 | data URI SVG 배경, `opacity: .03`, `mix-blend-mode: multiply` | 없어도 무해. 배경색만 남는다 |
+| 스크롤 진입 페이드+8px 상승 | `animation-timeline: view()`, JS 0 | Chromium 외에서는 **아무 일도 안 일어남**. 콘텐츠는 처음부터 visible |
+
+이중 게이팅: `@media (prefers-reduced-motion: no-preference)` 안에 `@supports (animation-timeline: view())`.
+
+## 5단계 감사 결과
+- 기계 검사 3종: 이펙트 전부 끄기 **통과**(h1·CTA·표 3행 모두 렌더, 본문 401자) / 슬롭 grep 15개 패턴 **전부 0건** / 경쟁사 치환 **통과**
+- 하드 게이트 12개: 전부 "아니오" (검사 근거는 `FINDINGS.md` §하드게이트)
+- 감사 중 발견해 고친 것 2건:
+  1. 히어로 헤드라인이 데스크톱에서 **5줄** → 카운트 규칙(≤2줄) 위반. 헤드라인을 두 컬럼 가로지르게 하고 `max-width: 20ch` 적용
+  2. 320px에서 가로 오버플로 **31px** → 하드 게이트 5 위반. grid item `min-width: 0` + 표를 `overflow-x: auto` 컨테이너로 감쌈
+
+## 의도적으로 하지 않은 것과 그 이유
+- **다크 모드** — 브리프에 야간 사용·데이터 시각화 근거가 없다. tokens.md "다크를 기본값으로 삼지 마라"
+- **한글 세리프 디스플레이(마루 부리)** — 폰트 패밀리 2개 예산을 지키려 버렸다. 그 결과 프리셋이 정한 "세리프 디스플레이"가 **한글에서는 실현되지 않는다**(Fraunces는 라틴만 커버). 예산을 3개로 올릴 수 있다면 되돌릴 결정이다
+- **Switzer(라틴 본문)** — 같은 이유. Pretendard의 라틴 글리프로 대체
+- **구매 CTA** — R1은 "구매"와 "구독"으로 갈라져 있다. 브리프가 구독 전환을 명시했으므로 CTA를 하나로 통합했다. 원두 낱개 판매를 나중에 붙이더라도 **이 페이지에는 넣지 않는다**
+- **3D / WebGL** — 필터로 낼 수 없는 인상이 없다. 4-3 미실행
+- **스크롤 애니메이션 폴리필** — JS 0 예산을 지키기 위해. Firefox·Safari 사용자는 모션 없이 본다
+- **지표 배너 / 후기 / 로고월** — 검증 가능한 데이터가 없다. 생기기 전까지 섹션을 만들지 않는다
+- **아이콘** — 이 페이지에 아이콘이 0개다. 정보를 아이콘으로 대체하지 않기로 했다
+
+## 다음 실행이 해야 할 일
+1. `05-structure-plan.md`의 "확보해야 할 실제 데이터"를 사용자에게 받는다
+2. 히어로 표의 `—`를 채운다. **채우기 전까지 이 페이지는 배포하지 않는다**
+3. 히어로 이후 섹션 6개를 계획대로 구현
+4. 폰트 서브셋 파일을 자체 호스팅으로 옮긴다(현재 CDN 2곳 의존)
diff --git a/research/dogfood-coffee/index.html b/research/dogfood-coffee/index.html
new file mode 100644
index 0000000..56eef60
--- /dev/null
+++ b/research/dogfood-coffee/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>무월 — 격주 원두 구독</title>
+<meta name="description" content="원두마다 산미·바디·단맛을 같은 척도로 측정해 표기합니다. 로스팅 날짜와 생두 구매가를 함께 적습니다.">
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&display=swap">
+<link rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.min.css">
+
+<link rel="stylesheet" href="03-tokens.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<!-- 필터 정의: 필름 그레인 (svg-filters.md R1 — data URI 대신 인라인이 필요할 때만) -->
+
+<a class="skip" href="#main">본문으로 건너뛰기</a>
+
+<header class="page-header">
+  <div class="page-header__inner">
+    <a class="wordmark" href="/">무월<span class="wordmark__han">霧月</span></a>
+    <nav aria-label="주 메뉴">
+      <ul class="nav">
+        <li><a href="#beans">원두</a></li>
+        <li><a href="#plan">구독</a></li>
+        <li><a href="#ledger">거래 내역</a></li>
+      </ul>
+    </nav>
+  </div>
+</header>
+
+<main id="main">
+
+  <section class="hero" aria-labelledby="hero-title">
+    <div class="hero__inner">
+
+      <div class="hero__head reveal">
+        <p class="eyebrow">격주 원두 구독</p>
+        <h1 id="hero-title" class="hero__title">
+          취향은 형용사가 아니라 좌표입니다
+        </h1>
+      </div>
+
+      <div class="hero__lede reveal">
+        <p class="hero__body">
+          무월은 원두마다 산미·바디·단맛을 같은 척도로 재서 적습니다.
+          로스팅한 날짜와 생두를 얼마에 샀는지도 같이 적습니다.
+          마셔보기 전에 판단할 수 있어야 고르는 재미가 생깁니다.
+        </p>
+        <p class="hero__action">
+          <a class="cta" href="#plan">2주마다 받아보기</a>
+        </p>
+        <p class="hero__note">
+          첫 발송 전까지 언제든 취소. 배송 주기는 2주 또는 4주 중에 고릅니다.
+        </p>
+      </div>
+
+      <div class="hero__profile reveal">
+        <h2 class="profile__title">이번 주 로스팅</h2>
+        <div class="profile__scroll" tabindex="0" role="region" aria-label="로스팅 프로파일 표 (가로 스크롤)">
+        <table class="profile">
+          <caption class="visually-hidden">원두 3종의 산미·바디·단맛 측정값과 로스팅 날짜</caption>
+          <thead>
+            <tr>
+              <th scope="col" class="profile__name">원두</th>
+              <th scope="col">산미</th>
+              <th scope="col">바디</th>
+              <th scope="col">단맛</th>
+              <th scope="col" class="profile__date">볶은 날</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th scope="row" class="profile__name">
+                <span class="profile__origin">에티오피아</span>
+                <span class="profile__lot">구지 우라가 · 워시드</span>
+              </th>
+              <td class="num" data-pending>—</td>
+              <td class="num" data-pending>—</td>
+              <td class="num" data-pending>—</td>
+              <td class="num" data-pending>—</td>
+            </tr>
+            <tr>
+              <th scope="row" class="profile__name">
+                <span class="profile__origin">콜롬비아</span>
+                <span class="profile__lot">우일라 · 허니</span>
+              </th>
+              <td class="num" data-pending>—</td>
+              <td class="num" data-pending>—</td>
+              <td class="num" data-pending>—</td>
+              <td class="num" data-pending>—</td>
+            </tr>
+            <tr>
+              <th scope="row" class="profile__name">
+                <span class="profile__origin">과테말라</span>
+                <span class="profile__lot">우에우에테낭고 · 워시드</span>
+              </th>
+              <td class="num" data-pending>—</td>
+              <td class="num" data-pending>—</td>
+              <td class="num" data-pending>—</td>
+              <td class="num" data-pending>—</td>
+            </tr>
+          </tbody>
+        </table>
+        </div>
+        <p class="profile__legend">
+          1에서 5까지. 같은 추출 조건(20g / 300mL / 92°C)에서 로스터 3인이 매깁니다.
+        </p>
+      </div>
+
+    </div>
+  </section>
+
+  <!-- 이후 섹션은 4단계 범위 밖 — 구조 계획만. 05-structure-plan.md 참조 -->
+
+</main>
+
+</body>
+</html>
diff --git a/research/dogfood-coffee/style.css b/research/dogfood-coffee/style.css
new file mode 100644
index 0000000..4f3ec64
--- /dev/null
+++ b/research/dogfood-coffee/style.css
@@ -0,0 +1,270 @@
+/* ==========================================================================
+   무월 — 4단계 구현 (히어로 섹션까지)
+   모든 값은 03-tokens.css 에서 나온다. 하드코딩 금지.
+   ========================================================================== */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  background: var(--surface);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  /* 한글 조판 — antipatterns.md §8 */
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  letter-spacing: 0;          /* 한글 본문 음수 자간 금지 */
+  position: relative;
+  isolation: isolate;
+}
+
+/* 재질: 필름 그레인 최약 (svg-filters.md R1, --grain 0.03)
+   요소 filter가 아니라 data URI 배경 → 한 번만 래스터화되고 캐시된다 */
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  opacity: var(--grain);
+  mix-blend-mode: multiply;   /* 밝은 배경이므로 overlay 대신 multiply */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
+}
+
+img, svg { max-width: 100%; height: auto; }
+
+.visually-hidden {
+  position: absolute; width: 1px; height: 1px;
+  margin: -1px; padding: 0; border: 0;
+  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
+}
+
+.skip {
+  position: absolute; left: var(--space-3); top: var(--space-3);
+  transform: translateY(-200%);
+  z-index: 10;
+  padding: var(--space-2) var(--space-3);
+  background: var(--ink); color: var(--surface);
+  border-radius: var(--radius-interactive);
+  text-decoration: none;
+  transition: transform var(--dur-instant) var(--ease-out);
+}
+.skip:focus-visible { transform: translateY(0); }
+
+:where(a, button, [tabindex]):focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: var(--radius-interactive);
+}
+
+/* ---- 그리드 --------------------------------------------------------------
+   layout.md §1 — 하나의 그리드에서 모든 것이 나온다 */
+.page-header__inner,
+.hero__inner {
+  width: 100%;
+  max-width: var(--container);
+  margin-inline: auto;
+  padding-inline: var(--pad-inline);
+}
+
+/* ---- 헤더 ---------------------------------------------------------------- */
+.page-header { padding-block: var(--space-4); }
+
+.page-header__inner {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+
+.wordmark {
+  font-family: var(--font-display);
+  font-size: var(--step-2);
+  font-weight: 600;
+  color: var(--ink);
+  text-decoration: none;
+  letter-spacing: -0.01em;   /* 한글 디스플레이 허용 범위 */
+}
+.wordmark__han {
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  margin-inline-start: var(--space-2);
+  letter-spacing: 0;
+}
+
+.nav {
+  display: flex;
+  gap: var(--space-4);
+  margin: 0; padding: 0;
+  list-style: none;
+  font-size: var(--step--1);
+}
+.nav a {
+  color: var(--ink-muted);
+  text-decoration: none;
+  padding-block: var(--space-2);   /* 터치 타깃 확보 */
+  display: inline-block;
+  border-bottom: 1px solid transparent;
+  transition: color var(--dur-instant) var(--ease-out),
+              border-color var(--dur-instant) var(--ease-out);
+}
+.nav a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
+
+/* ---- 히어로 --------------------------------------------------------------
+   layout.md §1 "비대칭을 두려워하지 마라" — 좌 5 : 우 7 */
+.hero { padding-block: var(--space-7) var(--space-8); }
+
+.hero__inner {
+  display: grid;
+  gap: var(--space-6);
+  align-items: start;
+}
+/* grid item 기본 min-width:auto 가 표의 최소폭을 그대로 반영해
+   320px에서 가로 스크롤을 만든다 (하드 게이트 5) */
+.hero__inner > * { min-width: 0; }
+
+@media (min-width: 60rem) {
+  .hero__inner {
+    grid-template-columns: 5fr 7fr;
+    gap: var(--space-6) var(--space-7);
+  }
+  /* 헤드라인은 두 컬럼을 가로지른다 — 좁은 컬럼에 두면 한글이 5줄로 접힌다
+     (SKILL.md 카운트 규칙: 히어로 헤드라인 ≤ 2줄) */
+  .hero__head { grid-column: 1 / -1; }
+}
+
+.hero__head { margin-bottom: var(--space-2); }
+
+.eyebrow {
+  margin: 0 0 var(--space-3);
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  /* 전체 대문자 아님 — antipatterns 최우선 지문 2위 회피 */
+}
+
+.hero__title {
+  margin: 0;
+  max-width: 20ch;   /* 한글 20자 — 데스크톱에서 2줄, 모바일에서 3줄 상한 */
+  font-family: var(--font-display);
+  font-size: var(--step-5);
+  font-weight: 600;
+  line-height: var(--leading-tight);
+  letter-spacing: -0.015em;   /* 대형 헤드라인만. 한글 허용 -0.01~-0.02em */
+  text-wrap: balance;
+}
+
+.hero__body {
+  margin: 0 0 var(--space-5);
+  max-width: var(--measure);
+  color: var(--ink);
+}
+
+.hero__action { margin: 0 0 var(--space-3); }
+
+/* 주 CTA 1개. 페이지에서 유일한 반전 블록 → 회색조에서 가장 어둡다 */
+.cta {
+  display: inline-block;
+  padding: var(--space-3) var(--space-5);
+  background: var(--accent);
+  color: var(--accent-ink);
+  border-radius: var(--radius-interactive);
+  text-decoration: none;
+  font-weight: 600;
+  min-height: 44px;            /* 터치 타깃 */
+  transition: background-color var(--dur-instant) var(--ease-out);
+}
+.cta:hover { background: var(--ink); }
+
+.hero__note {
+  margin: 0;
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  max-width: var(--measure);
+}
+
+/* ---- 프로파일 표 ---------------------------------------------------------- */
+.profile__title {
+  margin: 0 0 var(--space-3);
+  font-size: var(--step--1);
+  font-weight: 400;
+  color: var(--ink-muted);
+}
+
+/* 좁은 폭에서는 표만 스스로 스크롤한다. 페이지 본문은 넘치지 않는다 */
+.profile__scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.profile {
+  width: 100%;
+  min-width: 20rem;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+  background: var(--surface-raised);
+  border-radius: var(--radius-container);
+  overflow: hidden;
+}
+
+.profile th,
+.profile td {
+  padding: var(--space-3);
+  text-align: right;
+  border-bottom: 1px solid var(--line);
+  font-weight: 400;
+  vertical-align: baseline;
+}
+
+.profile thead th {
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  border-bottom-color: var(--line-strong);
+}
+
+.profile tbody tr:last-child th,
+.profile tbody tr:last-child td { border-bottom: 0; }
+
+.profile__name { text-align: left; }
+
+.profile__origin { display: block; }
+
+.profile__lot {
+  display: block;
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+}
+
+.profile__date { white-space: nowrap; }
+
+.num[data-pending] { color: var(--ink-muted); }
+
+.profile__legend {
+  margin: var(--space-3) 0 0;
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  max-width: var(--measure);
+}
+
+/* ---- 모션 ----------------------------------------------------------------
+   R3: Codrops scroll-driven animation. JS 0바이트.
+   이중 게이팅 — reduced-motion 안에 @supports.
+   기본 상태는 visible. 지원 안 하면 아무 일도 일어나지 않는다.
+   (antipatterns §5 "reveal 실패 시 opacity:0 잔존" 회피)                      */
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: view()) {
+    @keyframes rise {
+      from { opacity: 0; transform: translateY(8px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .reveal {
+      animation: rise var(--dur-slow) var(--ease-out) both;
+      animation-timeline: view();
+      animation-range: entry 0% entry 40%;
+    }
+  }
+}
diff --git a/research/dogfood-saas/01-references.md b/research/dogfood-saas/01-references.md
new file mode 100644
index 0000000..895ecad
--- /dev/null
+++ b/research/dogfood-saas/01-references.md
@@ -0,0 +1,82 @@
+# 1단계 — 레퍼런스 조사 (Pulsegate)
+
+## 브리프
+백엔드/SRE 엔지니어가 **무료 체험에 가입**하게. 느낌은 **정밀한, 절제된**.
+
+---
+
+## R1 · 구조 — Checkly  https://www.checklyhq.com
+같은 업종(합성 모니터링 SaaS). 라우팅 표의 Refero/Land-book이 모두 막혀 원본 사이트로 직행함.
+
+- **가져올 축**: 축 1(그리드), 축 4(여백 리듬), 축 6(시선 흐름)
+- **그리드**: 컨테이너 1232px (뷰포트 1440 대비 86%) / 본문 컬럼 450px / 내부 분할 584·672·745px
+- **여백**: 섹션 상하 `96/64` `80/80` `64/80` `48/48` — 4종. 섹션 간 80 : 요소 간 16~24 ≈ **1:4**
+- **타입(참고용)**: h1 48px / 본문 16px → **최대÷본문 = 3.0배 → 4배 미만, 위계가 약한 레퍼런스**
+- **시선 흐름**: 수직 낙하. h1 → 서브카피 → CTA 2개(`Book a demo` + `Start for free`) → 터미널 스니펫 `npx checkly init` → 로고월
+- **6축 밖의 관측**
+  - 히어로에 **실행 가능한 명령어**를 배치한다(`npx checkly init`). 스크린샷보다 강한 "셋업 시간" 증거다
+  - 온보딩 섹션이 **시간 눈금**으로 되어 있다(`Day 1 0:00 / 0:05 / 0:15`). 소요 시간을 주장 대신 구조로 보여준다
+  - radius 어휘 **9종**(2·4·6·8·12·16·9999·50%·복합) → antipatterns 4장 "radius가 결정이 아님"에 해당. 가져오지 않는다
+  - CTA가 12종. 주 행동이 흐려져 있다
+- **변형**: 컨테이너를 **1232 → 1120**으로 축소하고 본문 컬럼을 **450 → 640px**로 넓힌다. Checkly의 450px는 16px 본문에서 한 줄 55자 내외라 짧고, 우리 카피는 조건절이 길다
+
+---
+
+## R2 · 톤 — Fitzcarraldo Editions  https://fitzcarraldoeditions.com   [업종: 독립 출판사 — R1과 다름 ✓]
+Klim(타입 파운드리)에서 출발했으나 페이지가 자동 이탈해 이 사이트의 값을 측정하게 됨(→ FINDINGS D-2).
+reference-method.md §1이 예시로 든 "SaaS 구조 + 독립 출판사 톤" 조합에 정확히 해당해 그대로 채택.
+
+- **가져올 축**: 축 3(컬러 역할), 축 2(타입 스케일)
+- **컬러 역할**: surface 2단계(`#FFFFFF` / `#FBFBFB`) · text 3단계(`rgb(21,27,35)` 잉크 / `rgb(102,102,102)` 보조 / `rgb(54,54,54)`) · **강조 1색 `rgb(0,51,160)` 코발트 블루**, 등장 45회지만 전부 **링크 텍스트** — 즉 강조가 면적이 아니라 **글자**로만 존재한다
+- **타입**: 패밀리 2개(`adobe-caslon-pro` + `kings-caslon`) — **전면 세리프**. 크기 5단계(15/16/18/20.8/22). 최대÷본문 = **1.375배**
+- **여백/형태**: radius 2·3·4·5px — **작고 4종**. 본문 컬럼 522px
+- **6축 밖의 관측**
+  - **강조색을 배경으로 절대 쓰지 않는다.** 파랑은 오직 링크. "강조색을 지우면 여전히 읽히는가?" → 읽힌다
+  - 위계를 크기가 아니라 **서체 성격과 여백**으로 만든다. 1.375배라는 평평한 스케일이 성립하는 이유
+- **변형**: 타입 스케일을 **1.375배 → 1.333 비율 5단계(최대÷본문 3.2배)**로 벌린다. 출판사는 목록을 훑게 하지만 우리는 **하나의 CTA로 떨어뜨려야** 하므로 위계가 더 필요하다. 세리프는 디스플레이에만 쓰고 본문은 산세리프로(코드·수치 가독성)
+
+---
+
+## R3 · 디테일 — Codrops «Creating Scroll-Driven SVG Map Animations with GSAP»
+https://tympanus.net/codrops/2026/05/21/creating-scroll-driven-svg-map-animations-with-gsap/
+
+- **가져올 축**: 축 5(모션 언어) — R3는 이 축만 채운다
+- **모션**: 스크롤 진행도에 SVG `path`의 그리기 진행(`drawSVG`)을 바인딩하고, 점이 경로를 따라 이동. 뷰포트가 점을 추적하며 `scale 2.5 → 4`
+- **원문 값**: `scrub: 1` / `pin` / `duration: 1` / `ease: 'expo'` (추적), `ease: 'power1.inOut'` (줌)
+- **구현 제약**
+  - 원문은 `gsap` + `ScrollTrigger` + `DrawSVGPlugin` + `MotionPathPlugin` — **4개 합계 약 60KB(gzip)**. 히어로 JS 예산 150KB의 **40%**
+  - `pin`은 레이아웃을 `transform`으로 고정한다. 모바일 주소창 리사이즈에서 재계산이 필요하고 `ScrollTrigger.refresh()`를 폰트 로드 후 호출해야 한다
+  - 원문에 성능·브라우저 지원 언급 **없음**(→ FINDINGS D-4). 아래 제약은 내가 판정한 것
+- **변형**: GSAP을 쓰지 않고 **CSS `animation-timeline: view()` + `stroke-dashoffset`**으로 대체한다. JS 0KB. 미지원 브라우저에서는 경로가 처음부터 그려진 상태로 남아 정보 손실이 없다. 이유: 60KB를 "장식 모션 하나"에 쓰면 셋업 시간을 파는 제품의 페이지가 스스로를 반증한다
+
+---
+
+## 회색조 위계
+색을 전부 제거했을 때 가장 강한 덩어리는 **h1(셋업 시간 주장)**, 두 번째는 **터미널 설치 명령 블록**, 세 번째는 **주 CTA 버튼**.
+
+비즈니스 우선순위 [1 무료 체험 가입 / 2 셋업이 짧다는 증거 / 3 가격 투명성]와 **일치하지 않는다.**
+→ 조정: CTA를 두 번째로 올리고 명령 블록을 세 번째로 내린다. **크기·굵기·여백으로 조정하고 색은 쓰지 않는다.** 명령 블록은 배경 톤만 다르게 하고 테두리·그림자를 주지 않는다.
+
+수정 후: **h1 → CTA → 명령 블록** = [1/2/3]과 일치.
+
+---
+
+## 안 할 것 (antipatterns.md 중 이 브리프에 특히 위험한 것)
+
+1. **§1 「네온 온 다크」** — "게이밍·개발자 툴 브리프가 아닌데 나오면 즉시 티가 남". 우리는 개발자 툴이라 면책 대상처럼 보이지만, 그게 정확히 관성이다. 발광 대신 **명도 차이로만** 위계를 만든다
+2. **§4 「펄스 애니메이션 상태 점」** — 모니터링 제품의 최대 유혹. "All systems operational" 옆 깜빡이는 초록 원. **상태가 실제로 바뀔 때만** 쓴다. 랜딩의 정적 목업에는 넣지 않는다
+3. **§2 「모노스페이스를 장식으로」** — 터미널 미학을 흉내내려 라벨까지 mono로 가는 것. **코드·데이터·식별자에만** 쓴다
+4. **§6 「모든 숫자가 어림수」** — `99.9% uptime`, `10,000+ users`. Checkly도 `20+`, `10x`를 쓴다. 우리는 **측정 조건이 붙은 정확한 수치**만 쓴다
+5. **§3 「표준 골격」** — 히어로 → 3열 피처 → 로고월 → 요금제 → FAQ. Checkly가 거의 이 순서다. 섹션 순서를 **설득 논리**로 재배열한다
+6. **§4 「요금제 3열 + Most popular 배지」** — 가격 민감 청중이라 요금 섹션이 필수인데, 가장 재현율 높은 템플릿이다. 비교 표나 단일 가격으로 간다
+
+---
+
+## 검증 조건 자가 확인
+- [x] R1/R2/R3 각각 원본 사이트 URL 있음 (갤러리 URL 아님)
+- [x] R2 업종이 R1과 다름 (모니터링 SaaS ↔ 독립 출판사)
+- [x] 각 슬롯에 가져올 축 명시
+- [x] 각 슬롯에 변형 1개와 이유
+- [x] 6축에 숫자 있음 — **§5 computed style을 R1·R2 모두 실행함** (Playwright)
+- [x] R3에 구현 제약 있음 (단, 원문이 아니라 내가 판정)
+- [x] 회색조 위계 — 불일치를 발견하고 조정안을 적음
diff --git a/research/dogfood-saas/02-direction.md b/research/dogfood-saas/02-direction.md
new file mode 100644
index 0000000..a0df5f5
--- /dev/null
+++ b/research/dogfood-saas/02-direction.md
@@ -0,0 +1,46 @@
+# 2단계 — 방향 결정 (Pulsegate)
+
+## 한 문장 컨셉
+**야간 당직실의 계기판 — 읽히도록 어둡고, 출판물처럼 조판된.**
+
+R1(Checkly)에서 구조를, R2(Fitzcarraldo)에서 "강조색은 배경이 아니라 글자에만"을 가져와 합친 결과다.
+계기판이되 네온이 아니고, 출판물이되 종이가 아니다.
+
+## 프리셋
+`dark-instrument` — 개발자·데이터·모니터링 제품.
+
+### 다크를 기본값으로 삼는 근거 (프리셋이 요구한 정당화)
+`dark-instrument.md`의 정당화 예시 3개 중 **2개에 해당한다.**
+1. **"사용자가 어두운 환경에서 본다"** — 청중이 온콜 SRE다. 장애는 새벽에 난다
+2. **"제품 자체(터미널·에디터·모니터링)가 어둡다"** — 제품 스크린샷이 다크 대시보드다. 랜딩이 라이트면 스크린샷이 페이지에서 뜬다
+
+근거를 댈 수 있으므로 다크를 기본으로 간다. 단 `dark-instrument.md` 흔한 실패 #3에 따라 **라이트를 파생물이 아니라 동등한 테마로** 만든다(브리프도 둘 다 요구).
+
+## R2를 섞은 지점 (프리셋 평균을 벗어나기 위해)
+- 디스플레이 서체를 **세리프**로 — dark-instrument 기본값은 산세+모노다. 출판사 톤을 여기에 넣는다
+- **강조색을 면적으로 쓰지 않는다** — Fitzcarraldo는 코발트를 45회 쓰지만 전부 링크 글자다
+- radius를 **2~4px**로 — 출판물의 각진 인상. dark-instrument는 radius를 규정하지 않는다
+
+## 감수할 리스크 하나
+> **주 CTA 버튼에 강조색을 쓰지 않는다.** CTA는 잉크 반전(밝은 표면 + 어두운 글자)으로 만들고, 코발트는 오직 인라인 링크와 데이터 축에만 쓴다.
+
+- **왜 리스크인가**: B2B SaaS 랜딩에서 주 CTA를 무채색으로 두는 건 전환율 관행에 반한다
+- **왜 정당한가**: 이 페이지에서 가장 밝은 덩어리가 CTA 하나뿐이면 색 없이도 시선이 거기로 간다(회색조 위계 1위 = h1, 2위 = CTA). 동시에 `antipatterns.md` 최우선 지문 1위(보라·인디고 CTA)와 §1 「네온 온 다크」를 구조적으로 회피한다
+- **철회 조건**: 프리플라이트 회색조 검사에서 CTA가 3위 밖으로 밀리면 즉시 강조색을 넣는다
+
+## 섹션 순서 — 표준 골격을 쓰지 않는다
+`antipatterns.md` §3 「표준 골격」(히어로 → 3열 피처 → 로고월 → 요금제 → FAQ)을 버리고 **설득 논리**로 재배열한다.
+
+| # | 섹션 | 역할 | 왜 여기인가 |
+|---|---|---|---|
+| 1 | 히어로 | 셋업 시간 주장 + 설치 명령 | 가격·시간 민감 청중에게 첫 화면에서 시간을 말한다 |
+| 2 | 반론 처리 | "이미 Datadog을 쓴다" | 이 청중의 실제 첫 반응. 피처 나열보다 먼저 온다 |
+| 3 | 실제 화면 | 제품 스크린샷 3장 | 주장 다음에 증거 |
+| 4 | 가격 | 단일 가격 + 계산 근거 | 민감 요인을 숨기지 않고 중간에 |
+| 5 | 마이그레이션 | Datadog/Grafana에서 옮기는 절차 | 전환 장벽 제거 |
+| 6 | 최종 CTA + 푸터 | | |
+
+**로고월·후기·FAQ 없음.** 검증 가능한 고객 실명과 실제 문의가 없으므로 `antipatterns.md` §4에 따라 섹션 자체를 만들지 않는다.
+
+## 4단계 범위 (이번 검증)
+1번 히어로만 코드로 만든다. 2~6번은 위 표가 계획이다.
diff --git a/research/dogfood-saas/03-tokens.md b/research/dogfood-saas/03-tokens.md
new file mode 100644
index 0000000..387f10d
--- /dev/null
+++ b/research/dogfood-saas/03-tokens.md
@@ -0,0 +1,160 @@
+# 3단계 — 디자인 토큰과 예산 (Pulsegate)
+
+## ⚠ 작업 중 만난 충돌 — 타입 스케일
+
+세 문서가 **산술적으로 동시에 만족 불가능한** 값을 준다.
+
+| 문서 | 요구 |
+|---|---|
+| `presets/dark-instrument.md` | 비율 **1.200~1.250** (정보 밀도가 높으니 위계 차이를 작게) |
+| `antipatterns.md` §2 | **최대÷본문 4배 이상** (17→68). 단계 **8개 이상은 통제 실패** |
+| `reference-method.md` 축2 | 단계 **3–5가 건강** |
+
+1.25 비율로 5단계면 최대÷본문 = 1.25⁴ = **2.44배**. 6단계여도 3.05배. **4배를 만들려면 8단계가 필요**하고 그건 "통제 실패"다.
+
+**해소**: `tokens.md` §1에 답이 있다 — *"헤드라인만 다른 비율을 쓰고 싶으면 그건 비율이 아니라 **디스플레이 사이즈를 따로 정의**하는 것이다."*
+→ 본문 스케일은 1.25 5단계로 두고, **디스플레이 2개를 스케일 밖에 별도 정의**한다. h1÷본문 = 64/16 = **4.0배** 달성.
+이 해소 경로는 `antipatterns.md`나 `dark-instrument.md`에서 역참조되지 않는다(→ FINDINGS D-1).
+
+---
+
+## 1. 타입
+
+```css
+:root {
+  /* 본문 스케일 — 비율 1.250, 5단계 (dark-instrument 준수) */
+  --step--1: 0.8125rem; /* 13 — 캡션, 모노 라벨, 표 셀 */
+  --step-0:  1rem;      /* 16 — 본문 */
+  --step-1:  1.25rem;   /* 20 — 리드 문단 */
+  --step-2:  1.5625rem; /* 25 — h3 */
+  --step-3:  1.9531rem; /* 31 — h2 */
+
+  /* 디스플레이 — 스케일 밖. 위계 차이를 만드는 유일한 장치 */
+  --display-2: clamp(2rem,   1.4rem + 3vw,   2.5rem);  /* 32→40 — 섹션 헤드 */
+  --display-1: clamp(2.75rem, 1.8rem + 4.8vw, 4rem);   /* 44→64 — h1 */
+
+  --leading-tight:  1.05;  /* 디스플레이 */
+  --leading-snug:   1.3;   /* h2/h3 */
+  --leading-normal: 1.55;  /* 본문 (라틴) */
+  --measure: 68ch;         /* 영문 68자 — R1 변형에서 정한 640px 대역 */
+
+  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
+  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
+  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
+
+  --tracking-display: -0.025em;  /* -0.04em 상한 준수 */
+  --tracking-body: 0;
+}
+```
+
+**폰트 선택 근거**
+- 본문/모노를 **IBM Plex Sans + IBM Plex Mono**로 — `dark-instrument.md` 표의 후보. 한 슈퍼패밀리라 광학 크기가 맞는다
+- `antipatterns.md` §2가 **Inter를 이유 없이 쓰는 것**을 금지. R1(Checkly)이 정확히 Inter라 여기서 갈라진다
+- 디스플레이 세리프는 R2(전면 세리프 출판사)에서 온다. **주의**: `antipatterns.md` §2는 `Instrument Serif`를 `Space Grotesk + Geist`와의 **3종 조합**일 때 지문으로 지목한다. 셋 중 하나만 쓰므로 해당 없음 — 다만 대체 후보로 `Newsreader`(OFL)를 둔다
+
+**금지 확인**: 「헤드라인 한 단어만 세리프 이탤릭」 안 쓴다. 디스플레이는 전체가 세리프다.
+
+---
+
+## 2. 색 — 두 테마를 동등하게 정의
+
+`dark-instrument.md` 흔한 실패 #3(다크만 만들고 라이트 안 만듦)에 따라 라이트를 파생물이 아니라 **동등한 정의**로 적는다.
+
+```css
+/* 라이트를 먼저 쓴다 — tokens.md "라이트로 설계하고 다크는 토큰으로 파생" 형식은 지키되,
+   기본 적용은 다크다(2단계에서 정당화). */
+:root {
+  --surface:        #F7F5F0;  /* 오프화이트. 순백 금지 */
+  --surface-raised: #FDFCF9;
+  --line:           #DCD8CF;
+  --ink:            #16181A;  /* 순흑 금지 */
+  --ink-muted:      #5C646E;
+  --accent:         #1B4FD8;  /* 코발트. 링크·데이터축 전용 */
+  --accent-ink:     #FAF9F6;
+  --cta-bg:         #16181A;  /* 잉크 반전 — 강조색을 쓰지 않는다 */
+  --cta-ink:        #FAF9F6;
+  --ok:   #2F7D57;  --warn: #8A6D14;  --fail: #A8432E;   /* 기능색 */
+}
+
+/* 기본 적용 = 다크. 사용자가 라이트를 명시하면 위 값으로 되돌아간다 */
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* 아래 값 */ } }
+:root[data-theme="dark"] { }
+```
+
+실제 값 (다크):
+
+| 토큰 | 다크 | 라이트 |
+|---|---|---|
+| `--surface` | `#0D0F12` | `#F7F5F0` |
+| `--surface-raised` | `#151A20` | `#FDFCF9` |
+| `--line` | `#262E37` | `#DCD8CF` |
+| `--ink` | `#E6E8E6` | `#16181A` |
+| `--ink-muted` | `#9BA6B2` | `#5C646E` |
+| `--accent` | `#7FA6FF` | `#1B4FD8` |
+| `--cta-bg` / `--cta-ink` | `#E6E8E6` / `#0D0F12` | `#16181A` / `#FAF9F6` |
+| `--ok` / `--warn` / `--fail` | `#4FA97A` / `#C9A227` / `#D46A55` | `#2F7D57` / `#8A6D14` / `#A8432E` |
+
+**대비 실측** (`tools/contrast.mjs`, WCAG 2.x): 두 테마 **20개 항목 전부 통과**. 최저값은 다크 `--fail` 4.99:1, 라이트 `--warn` 4.78:1.
+
+**규칙**
+- 강조색 hue는 **1개**(코발트). 상태색 3개는 `tokens.md` 정의상 강조색이 아니라 **기능색**이므로 "hue 3개 이하" 계산에서 제외한다
+- **강조색을 배경으로 쓰지 않는다** (R2). 코발트는 링크 글자와 데이터 축선에만
+- `--line`은 대비 1.4:1이라 **정보를 전달하지 않는 장식**으로만 쓴다. 구분이 필요한 곳은 `--surface-raised` 톤 차이로
+
+---
+
+## 3. 간격 — 4px 그리드 (dark-instrument 요구)
+
+```css
+:root {
+  --space-1: 0.25rem;  /*   4 */
+  --space-2: 0.5rem;   /*   8 */
+  --space-3: 1rem;     /*  16 */
+  --space-4: 1.5rem;   /*  24 */
+  --space-5: 2.5rem;   /*  40 */
+  --space-6: 4rem;     /*  64 */
+  --space-7: 6rem;     /*  96 */
+  --space-8: 10rem;    /* 160 — 섹션 간 */
+  --container: 70rem;  /* 1120 — R1 변형 */
+  --gutter: clamp(1rem, 4vw, 5rem);
+}
+```
+섹션 간 160 : 요소 간 24 = **1:6.7**. 여백 종류 8종은 스케일 전체이고, 히어로에서 실제로 쓰는 값은 4종(`--space-2/3/5/7`)이다.
+
+## 4. 형태
+
+```css
+:root { --radius-sm: 2px; --radius-md: 4px; }
+```
+**어휘 2종.** `rounded-2xl`·16px 균일·24px 이상 전부 회피. 그림자는 쓰지 않고 `--surface-raised` 톤 차이로 깊이를 만든다(1px 보더 + 그림자 동시 사용 금지).
+
+## 5. 모션 (tokens.md 값 그대로)
+
+```css
+:root {
+  --dur-instant: 100ms;  --dur-quick: 200ms;
+  --dur-normal:  350ms;  --dur-slow:  600ms;
+  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
+  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
+}
+```
+`motion.md`가 없어 이 값만 쓴다(→ FINDINGS D-5).
+
+## 6. 성능 예산 — 기본값 사용 (브리프 지시)
+
+| 항목 | 예산 |
+|---|---|
+| 히어로까지 JS (gzip) | **150KB** |
+| WebGL/3D 추가분 | +200KB 이내, 아니면 채택 안 함 |
+| 첫 인터랙션 (모바일 4G) | 3초 |
+| 폰트 파일 | 2개 이하, 서브셋 |
+| 애니메이션 속성 | transform / opacity 만 |
+
+폰트 3종(Plex Sans / Plex Mono / Instrument Serif)은 예산의 "2개 이하"를 넘는다.
+→ **해소**: 디스플레이 세리프는 h1 한 곳에만 쓰므로 `unicode-range` 서브셋(라틴 기본 + 숫자)으로 8KB 이하로 만들고, Plex Mono는 `font-synthesis` 없이 400 단일 웨이트만 로드한다. 실질 2.3개.
+
+---
+
+## 산출물 한 줄
+**성능 예산 = JS 150KB / 첫 인터랙션 3초** (기본값, 상향 없음)
diff --git a/research/dogfood-saas/05-preflight.md b/research/dogfood-saas/05-preflight.md
new file mode 100644
index 0000000..ade403a
--- /dev/null
+++ b/research/dogfood-saas/05-preflight.md
@@ -0,0 +1,159 @@
+# 5단계 — 프리플라이트 감사 (히어로 실측)
+
+측정 대상: `hero/preview.html` + `hero/src/styles/*.css` (Hero.jsx와 동일 CSS, 마크업 복제)
+도구: Playwright(Chromium), `tools/contrast.mjs`
+
+---
+
+## 0. 기계 검사 3종
+
+### A. 이펙트 전부 끄기 — **통과**
+`filter/backdrop-filter/animation/transition/transform` 전부 무력화한 상태에서:
+- h1 렌더 높이 > 0 ✓ / CTA 렌더 높이 > 0 ✓
+- 본문 텍스트 그대로 읽힘 ✓
+- 구조 유지 (그리드는 이펙트가 아님)
+
+### B. 슬롭 지문 grep — **통과 (1건 검출 후 해소)**
+16개 패턴 중 **1건 검출**: `Space Grotesk|Instrument Serif|Geist` ← `Instrument Serif` 사용.
+→ `Newsreader`(OFL, 다른 파운드리)로 교체. **재검 0건.**
+*주의: antipatterns §2 산문은 "이 셋의 3종 조합"만 지문이라 하고 "셋 중 하나만 쓰라"고 허용한다. §9 grep은 OR이라 단독 사용도 잡는다 → FINDINGS D-3*
+
+### C. 카피 경쟁사 치환 — **통과**
+
+| 문장 | Datadog으로 치환하면 | 판정 |
+|---|---|---|
+| "Add every host you want. You pay for checks." | 거짓 (Datadog은 호스트 과금) | **통과** |
+| "…pages you when latency drifts. No agents to install." | 거짓 (Datadog은 에이전트 필요) | **통과** |
+| CTA "Start the free trial" | 성립함 | **경계** — 금지어(`Get Started`/`Learn More`)는 아니지만 결과를 말하지 않는다. 후속에서 "Start monitoring free"로 검토 |
+
+---
+
+## 1. 접근성
+
+| 항목 | 실측 | 판정 |
+|---|---|---|
+| 키보드 도달 | 6개 인터랙티브 전부 순회. Tab 순서 = 시각 순서 (Pricing → Docs → Dark → CTA → billing → Copy) | 통과 |
+| 포커스 표시 | `outline: 2px solid var(--accent)` + offset 3px, `:focus-visible` | 통과 |
+| 대비 | `tools/contrast.mjs` — 다크·라이트 **20항목 전부 4.5:1 이상**. 최저 다크 `--fail` 4.99:1 / 라이트 `--warn` 4.78:1 | 통과 |
+| 이미지 대체텍스트 | `<img>` 1개, 의미 있는 alt 있음, `width/height` 지정 | 통과 |
+| 폼 레이블 | 폼 없음 | N/A |
+| 제목 구조 | h1 1개, 건너뜀 없음 | 통과 |
+| 모션 감소 | `prefers-reduced-motion` 블록 있음. 애초에 위치 이동·자동재생 없음 | 통과 |
+| 자동재생 | 없음 | 통과 |
+| 캔버스/WebGL 실패 | WebGL 미채택. JS 꺼도 텍스트·레이아웃 유지(테마 토글·복사만 비활성) | 통과 |
+
+**색만으로 정보 전달 안 함**: 링크는 밑줄 병행. 상태색은 이번 히어로에 미사용.
+
+---
+
+## 2. 성능 — 예산은 `tokens.md` §5
+
+| 항목 | 예산 | 실측 | 판정 |
+|---|---|---|---|
+| 히어로까지 JS (gzip) | 150KB | **미측정** — Vite 빌드 미실행(환경에 미설치). preview는 JS 0바이트 로드, React 버전은 react+react-dom ≈ 45KB gz **추정** | **미검증** |
+| WebGL/3D 추가분 | +200KB | **0KB** (4-3에서 미채택) | 통과 |
+| 총 전송량 (첫 화면) | 1MB | **12.4KB** (문서 2.9K + CSS 9.5K + 이미지 placeholder) | 통과 |
+| 첫 인터랙션 (모바일 4G) | 3초 | **미측정** (스로틀링 환경 없음) | **미검증** |
+| LCP | 2.5초 | **미측정** | **미검증** |
+| CLS | 0.1 | `aspect-ratio` + `width/height`로 이미지 자리 확보. 지연 삽입 요소 없음 → **구조적으로 0** | 통과(추론) |
+| 폰트 파일 수 | 2개 이하 | **3종 선언**(Newsreader / Plex Sans / Plex Mono), 실제 로드 0(시스템 폴백). 서브셋 계획은 03-tokens §6 | **초과, 사유 명시** |
+
+**정직하게**: JS·LCP·TTI 3개는 **측정하지 못했다.** `preflight.md`가 "측정하지 않았으면 통과가 아니다"라고 했으므로 이 셋은 **미통과 상태로 남긴다.** 빌드 파이프라인이 생기면 재측정해야 한다.
+
+---
+
+## 3. 반응형 (실측)
+
+| 항목 | 실측 | 판정 |
+|---|---|---|
+| 320px 가로 스크롤 | 1차 **실패** (`.theme-toggle`가 nav flex에서 밀림, scrollW 318 > clientW 305) → `flex-wrap: wrap` 적용 후 **scrollW 305 = clientW 305** | 수정 후 통과 |
+| 1920px 늘어짐 | `--container: 70rem` 상한 | 통과 |
+| 중간 뷰포트 768~1024 | `max-width: 54rem`에서 1열 전환 | 통과 |
+| 터치 타깃 44×44 | 1차 **실패 5건** (Pricing 40×21, Docs 29×21, Dark 61×30, billing 링크 207×25, Copy 62×30) → `min-height/min-width: 44px` 적용 후 **0건** | 수정 후 통과 |
+| 호버 전용 기능 | 없음 | 통과 |
+| 긴 단어 넘침 | 영문 짧은 단어. `{{REGION_COUNT}}`도 넘치지 않음 | 통과 |
+
+---
+
+## 4. 콘텐츠
+
+- [x] 히어로가 무엇인지 말한다 — "watches your endpoints", "pages you"
+- [x] 로렘입숨 없음
+- [ ] **실제 콘텐츠 길이 미검증** — `{{REGION_COUNT}}`가 placeholder다. 실제 값이 두 자리면 서브 문장이 한 줄 늘어난다
+- [ ] **빈/오류/로딩 상태 없음** — 히어로만 만들었으므로 범위 밖. 후속 필수
+- [x] 링크 텍스트가 목적지를 말함 ("See how billing is calculated")
+- [x] 이미지 실패 시 레이아웃 유지 (`aspect-ratio` + `--surface-raised` 배경)
+
+---
+
+## 5. 하드 게이트 12개 — 전부 "아니오"여야 한다
+
+| # | 질문 | 답 | 근거 |
+|---|---|---|---|
+| 1 | 토큰 밖 인라인 색상/폰트가 있는가 | **아니오** | 모든 색·폰트가 `tokens.css` 변수. grep으로 hex 0건 |
+| 2 | 강조색이 2개 이상인가 | **아니오** | 코발트 1개. 상태색 3개는 tokens.md 정의상 기능색 |
+| 3 | 코너 반경이 규칙 없이 섞였는가 | **아니오** | `--radius-sm: 2px` / `--radius-md: 4px` 2종만 |
+| 4 | 페이지 중간에 테마가 뒤집히는가 | **아니오** | 단일 테마, 토글로만 전환 |
+| 5 | 320~1920 어느 폭에서 가로 스크롤이 생기는가 | **아니오** (수정 후) | 320px 실측 scrollW = clientW |
+| 6 | 버튼·내비 라벨이 2줄로 접히는 폭이 있는가 | **아니오** | CTA `white-space: nowrap`, nav는 wrap으로 줄바꿈 대신 행 이동 |
+| 7 | 버튼 대비가 4.5:1 미만인가 | **아니오** | 다크 15.58:1 / 라이트 16.91:1 |
+| 8 | transform/opacity 외를 애니메이션하는가 | **아니오** | 브라우저에서 non-zero duration 전수 검사 → 0건 |
+| 9 | `100vh`를 썼는가 | **아니오** | `min(84dvh, 46rem)`. 스타일시트 전문에 `100vh` 0건, `dvh` 검출 |
+| 10 | `scroll` 리스너를 썼는가 | **아니오** | 스크롤 관련 JS 없음 |
+| 11 | 사용자가 주지 않은 수치가 있는가 | **아니오** | 브리프가 수치를 주지 않아 `{{REGION_COUNT}}` placeholder로 둠 |
+| 12 | div로 만든 가짜 스크린샷이 있는가 | **아니오** (수정 후) | 초안의 `.gauge` div 목업을 발견해 `<img>`로 교체 |
+
+## 카운트 규칙
+
+| 규칙 | 실측 | 판정 |
+|---|---|---|
+| eyebrow 라벨 ≤ ceil(섹션/3) | **0개** | 통과 |
+| 동일 이미지+텍스트 스플릿 연속 ≤ 2 | 1회 | 통과 |
+| 마퀴 ≤ 1 | 0 | 통과 |
+| 섹션 6개 이상이면 레이아웃 패밀리 3개 | 히어로만 구현 | N/A |
+| 히어로 헤드라인 ≤ 2줄 | 1440px에서 2줄, 320px에서 4줄 | **경계** — 모바일에서 4줄. `text-wrap: balance` 적용했으나 44px에서 문장이 길다 |
+| 서브텍스트 ≤ 20단어 | **17단어** | 통과 |
+| 히어로 텍스트 요소 ≤ 4개 | h1 / sub / CTA+보조링크 / install = **4** (보조링크를 CTA와 한 묶음으로 셈) | **경계** — 보조링크를 별개로 세면 5 |
+
+---
+
+## 6. 디자인 자체 (정직하게)
+
+1. **다른 회사 것으로 바꿔도 쓸 수 있는가?** → **아니오.** 헤드라인이 과금 모델을 주장하고 있어 호스트 과금 경쟁사가 못 쓴다
+2. **한 문장 컨셉이 화면에 보이는가?** → **부분적으로.** "계기판"은 모노스페이스 명령 블록과 `tabular-nums`로만 드러난다. 제품 스크린샷이 placeholder라 계기판 인상의 절반이 비어 있다
+3. **감수한 리스크가 실제로 들어갔는가?** → **예.** CTA가 강조색 없이 잉크 반전이다. 회색조 위계 검사에서 CTA가 2위를 유지해 철회 조건에 걸리지 않았다
+4. **R2(다른 업종 톤)의 흔적이 있는가?** → **예.** 디스플레이 세리프, 강조색을 링크 글자에만, radius 2~4px
+5. **강조색이 하나인가?** → **예**
+6. **여백이 의도적인가?** → **예.** 섹션 160 : 요소 24 = 1:6.7, 히어로에서 실제 사용 4종
+
+---
+
+## 7. antipatterns 자가 채점표
+
+| 카테고리 | 걸린 항목 | 조치 |
+|---|---|---|
+| 0 최우선 3종 | 0 | — |
+| 1 컬러 | 0 | — |
+| 2 타이포 | 1 (`Instrument Serif` grep) | Newsreader로 교체 후 0 |
+| 3 레이아웃 | 0 | — |
+| 4 컴포넌트 | 0 | — |
+| 5 모션 | 0 (모션 없음) | — |
+| 6 카피 | 1 경계 (CTA가 결과를 말하지 않음) | 후속 검토로 남김 |
+| 7 이미지 | 0 | — |
+| 8 한글 조판 | N/A (영문 브리프) | — |
+
+**최종 걸린 개수: 1 (경계)** → 판정 **통과** (0–1)
+
+---
+
+## 8. 최종 게이트
+
+- [x] 0장 기계 검사 3종 통과
+- [x] 접근성 표 전 항목 통과
+- [ ] **성능 예산 — JS/LCP/TTI 3개 미측정. 빌드 환경 확보 후 재검 필요**
+- [x] 반응형 체크리스트 통과 (실패 2건 수정 후)
+- [ ] **콘텐츠 — 빈/오류/로딩 상태 없음 (히어로 범위 밖)**
+- [x] 5장 여섯 질문 정직하게 답함
+- [x] antipatterns 자가 채점표 통과
+
+**판정: 조건부 통과.** 미측정 3항목과 상태 화면 부재를 남긴 채로는 출시 불가.
diff --git a/research/dogfood-saas/design.md b/research/dogfood-saas/design.md
new file mode 100644
index 0000000..ab109f6
--- /dev/null
+++ b/research/dogfood-saas/design.md
@@ -0,0 +1,91 @@
+# design.md — Pulsegate
+
+이 프로젝트를 다음에 이어받는 사람(또는 에이전트)이 읽는 파일이다. **여기 적힌 결정을 designpaca 기본값보다 우선한다.**
+
+## 브리프 3줄
+```
+무엇을:  API 모니터링 SaaS "Pulsegate" 랜딩 페이지 (단일 페이지)
+누구에게: 백엔드/SRE 엔지니어. Datadog·Grafana 사용 중. 가격과 셋업 시간에 민감. 목표는 무료 체험 가입
+제약:    영어 / React + Vite / 다크·라이트 둘 다 / 제품 스크린샷 있음 / 성능 예산 스킬 기본값
+```
+
+## 레퍼런스
+| 슬롯 | 사이트 | 가져온 것 |
+|---|---|---|
+| R1 구조 | https://www.checklyhq.com | 컨테이너 폭, 여백 리듬(섹션:요소 = 1:4), 히어로에 실행 가능한 명령을 두는 관행 |
+| R2 톤 | https://fitzcarraldoeditions.com | 강조색을 **링크 글자에만** 쓰는 규율, 전면 세리프, radius 2~5px |
+| R3 디테일 | https://tympanus.net/codrops/2026/05/21/creating-scroll-driven-svg-map-animations-with-gsap/ | 스크롤-진행도 바인딩 개념 (**최종 미채택** — 하드게이트 #8 위반) |
+
+## 한 문장 컨셉
+**야간 당직실의 계기판 — 읽히도록 어둡고, 출판물처럼 조판된.**
+
+## 프리셋
+`dark-instrument`.
+
+**다크를 기본으로 삼은 근거** (프리셋이 요구하는 정당화):
+1. 청중이 온콜 SRE다 — 어두운 환경에서 본다
+2. 제품 스크린샷이 다크 대시보드다 — 라이트 랜딩이면 스크린샷이 뜬다
+
+라이트는 파생물이 아니라 **동등한 정의**로 작성했다(`tokens.css`에 값이 따로 있다).
+적용 규칙: OS가 라이트를 선호하면 라이트, 그 외 다크. 토글이 있으면 토글이 이긴다.
+
+## 감수한 리스크 하나
+> **주 CTA에 강조색을 쓰지 않는다.** 잉크 반전(밝은 표면 + 어두운 글자)으로만 만들고, 코발트는 인라인 링크와 데이터 축에만.
+
+- 철회 조건: 회색조 위계에서 CTA가 3위 밖으로 밀리면 즉시 강조색 투입
+- 5단계 검사 결과 CTA는 2위 유지 → **철회하지 않음**
+
+## 토큰
+전문은 `hero/src/styles/tokens.css`. 요약:
+- **타입**: 본문 스케일 비율 **1.250 / 5단계**(13·16·20·25·31). 디스플레이 2개는 **스케일 밖**(`--display-1` 44→64, `--display-2` 32→40). h1÷본문 = **4.0배**
+- **폰트**: Newsreader(디스플레이) / IBM Plex Sans(본문) / IBM Plex Mono(코드·수치)
+- **색**: surface 2단계 + ink 2단계 + line + accent 1개(코발트) + 상태 3색. 다크·라이트 각각 정의
+- **간격**: 4px 그리드, `--space-1`~`8`, `--container: 70rem`
+- **형태**: radius 2px / 4px **2종만**. 그림자 없음(표면 톤 차이로 깊이)
+- **모션**: `tokens.md` 값 그대로
+
+## 성능 예산과 실측
+예산 원본은 `tokens.md` §5. 실측은 `05-preflight.md` §2.
+
+| 항목 | 예산 | 실측 |
+|---|---|---|
+| 총 전송량 (첫 화면) | 1MB | **12.4KB** |
+| WebGL 추가분 | +200KB | **0KB** |
+| CLS | 0.1 | 구조적 0 (`aspect-ratio` + `width/height`) |
+| **JS gzip** | 150KB | **미측정** |
+| **LCP / 첫 인터랙션** | 2.5초 / 3초 | **미측정** |
+| 폰트 파일 | 2개 이하 | **3종 (초과)** — 디스플레이는 h1 전용 서브셋, Mono는 400 단일 웨이트 |
+
+## 채택한 이펙트와 그 폴백
+| 이펙트 | 폴백 |
+|---|---|
+| SVG 필터 | **미채택.** `dark-instrument`는 그레인 금지, "재질을 거의 안 쓴다" |
+| three.js / WebGL | **미채택.** `three.md` §0 게이트 조건 1에서 탈락 — 필요한 것이 플랫 표면과 SVG 선뿐이라 CSS로 충분 |
+| 모션 | **거의 없음.** CTA·버튼 hover의 `translateY(-1px)`만. `prefers-reduced-motion`에서 1ms로 축소 |
+| 테마 토글 | JS 실패 시 OS 설정을 따르는 CSS 경로가 그대로 남는다 |
+| 복사 버튼 | JS 실패 시 명령 텍스트가 선택 가능한 `<code>`로 남는다 |
+
+## 미확정 — 다음 사람이 채워야 할 것
+- `{{REGION_COUNT}}` — 실제 리전 수. **지어내지 않았다**(하드게이트 #11)
+- 과금 모델("호스트 무료, 체크 과금")이 실제 제품 사실인지 확인 필요. 헤드라인 전체가 여기 걸려 있다
+- 제품 스크린샷 실제 파일 (`/product-checks.png`가 placeholder)
+- 빈 상태·오류 상태·로딩 상태
+- 2~6번 섹션 (반론 처리 → 실제 화면 → 가격 → 마이그레이션 → 최종 CTA)
+
+## 의도적으로 하지 않은 것과 그 이유
+**이 절이 가장 중요하다. 적어두지 않으면 다음 사람이 "빠뜨린 것"으로 착각하고 되돌린다.**
+
+| 안 한 것 | 이유 |
+|---|---|
+| **로고월** | 검증 가능한 고객 실명이 없다. `antipatterns.md` §4 — 회색조 로고 일렬은 신뢰를 깎는다 |
+| **후기 섹션** | 실명·직함·원문 링크가 없다. 없으면 넣지 않는다 |
+| **FAQ** | 실제로 받은 질문이 없다. 가상 질문 FAQ는 지문이다 |
+| **3열 피처 카드** | `antipatterns.md` §3 — 콘텐츠가 3개여서가 아니라 3이 예쁘게 떨어져서 3인 것 |
+| **지표 배너** (`99.9% uptime` 등) | 브리프가 수치를 주지 않았다. 하드게이트 #11 |
+| **펄스 상태 점** | 모니터링 제품의 최대 유혹. 정적 정보에 장식 애니메이션은 금지 |
+| **터미널 목업 div** | 하드게이트 #12. 실제 스크린샷을 쓴다 |
+| **스크롤 애니메이션** | R3에서 가져오려 했으나 `stroke-dashoffset` 애니메이션이 하드게이트 #8(transform/opacity만) 위반. GSAP 60KB도 예산의 40% |
+| **Inter** | R1(Checkly)이 Inter지만 `antipatterns.md` §2가 "이유 없는 Inter"를 금지 |
+| **CTA 2개 나란히** | 주 행동을 정하지 못했다는 신호. 보조는 텍스트 링크로 격하 |
+
+> 근거: research/dogfood-saas/01~05 (작업일 2026-08-20)
diff --git a/research/dogfood-saas/hero/preview.html b/research/dogfood-saas/hero/preview.html
new file mode 100644
index 0000000..56adf4f
--- /dev/null
+++ b/research/dogfood-saas/hero/preview.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Pulsegate — hero (preflight target)</title>
+<!-- Hero.jsx 와 동일한 CSS. 마크업만 감사용으로 복제했다. -->
+<link rel="stylesheet" href="./src/styles/tokens.css" />
+<link rel="stylesheet" href="./src/styles/hero.css" />
+</head>
+<body>
+<div class="page">
+  <nav class="nav" aria-label="Primary">
+    <p class="nav__mark">Pulsegate</p>
+    <a class="nav__link" href="#pricing">Pricing</a>
+    <a class="nav__link" href="#docs">Docs</a>
+    <button type="button" class="theme-toggle" id="theme" aria-pressed="false">Light</button>
+  </nav>
+
+  <header class="hero">
+    <div>
+      <h1 class="hero__headline">Add every host you want. You pay for checks.</h1>
+      <p class="hero__sub">Pulsegate watches your endpoints from {{REGION_COUNT}} regions and pages you when latency drifts. No agents to install.</p>
+      <div class="hero__actions">
+        <a class="cta" href="#signup">Start the free trial</a>
+        <a class="link-quiet" href="#pricing">See how billing is calculated</a>
+      </div>
+    </div>
+
+    <figure style="margin:0">
+      <img class="shot" src="/product-checks.png" width="960" height="720"
+           alt="Pulsegate 체크 목록 화면. 엔드포인트 이름, 최근 응답 시간, 상태가 표 형태로 정렬되어 있다."
+           loading="eager" decoding="async" />
+      <figcaption class="shot-caption">checks/ — the only screen you need during an incident</figcaption>
+    </figure>
+  </header>
+
+  <div class="install">
+    <span class="install__prompt" aria-hidden="true">$</span>
+    <code class="install__cmd">npx pulsegate init</code>
+    <button type="button" class="install__copy" id="copy">Copy</button>
+    <span role="status" aria-live="polite" class="visually-hidden" id="copied"></span>
+  </div>
+</div>
+
+<script>
+  const root = document.documentElement
+  const btn = document.getElementById('theme')
+  const resolved = () => root.getAttribute('data-theme')
+    ?? (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark')
+  const sync = () => {
+    const t = resolved()
+    btn.textContent = t === 'dark' ? 'Light' : 'Dark'
+    btn.setAttribute('aria-pressed', String(t === 'light'))
+  }
+  btn.addEventListener('click', () => {
+    root.setAttribute('data-theme', resolved() === 'dark' ? 'light' : 'dark')
+    sync()
+  })
+  sync()
+
+  const copyBtn = document.getElementById('copy')
+  const status = document.getElementById('copied')
+  copyBtn.addEventListener('click', async () => {
+    try {
+      await navigator.clipboard.writeText('npx pulsegate init')
+      copyBtn.textContent = 'Copied'
+      status.textContent = 'Command copied to clipboard'
+      setTimeout(() => { copyBtn.textContent = 'Copy'; status.textContent = '' }, 1600)
+    } catch {}
+  })
+</script>
+</body>
+</html>
diff --git a/research/dogfood-saas/hero/src/components/Hero.jsx b/research/dogfood-saas/hero/src/components/Hero.jsx
new file mode 100644
index 0000000..0dfd1fe
--- /dev/null
+++ b/research/dogfood-saas/hero/src/components/Hero.jsx
@@ -0,0 +1,109 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * 브리프가 수치를 주지 않았다. SKILL.md 0단계 "가정은 소리 내서 말해라"에 따라
+ * 지어내지 않고 placeholder 로 두고, design.md 에 미확정 항목으로 적는다.
+ * 하드게이트 #11(사용자가 주지 않은 수치) 회피.
+ */
+const COPY = {
+  headline: 'Add every host you want. You pay for checks.',
+  sub: 'Pulsegate watches your endpoints from {{REGION_COUNT}} regions and pages you when latency drifts. No agents to install.',
+  cta: 'Start the free trial',
+  secondary: 'See how billing is calculated',
+  command: 'npx pulsegate init',
+  shotAlt:
+    'Pulsegate 체크 목록 화면. 엔드포인트 이름, 최근 응답 시간, 상태가 표 형태로 정렬되어 있다.',
+  shotCaption: 'checks/ — the only screen you need during an incident',
+}
+
+function useTheme() {
+  const [theme, setTheme] = useState(null) // null = OS 설정을 따른다
+
+  useEffect(() => {
+    const root = document.documentElement
+    if (theme === null) root.removeAttribute('data-theme')
+    else root.setAttribute('data-theme', theme)
+  }, [theme])
+
+  const resolved =
+    theme ??
+    (window.matchMedia?.('(prefers-color-scheme: light)').matches ? 'light' : 'dark')
+
+  return [resolved, () => setTheme(resolved === 'dark' ? 'light' : 'dark')]
+}
+
+function CopyCommand({ command }) {
+  const [copied, setCopied] = useState(false)
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(command)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1600)
+    } catch {
+      setCopied(false)
+    }
+  }
+
+  return (
+    <div className="install">
+      <span className="install__prompt" aria-hidden="true">$</span>
+      <code className="install__cmd">{command}</code>
+      <button type="button" className="install__copy" onClick={copy}>
+        {copied ? 'Copied' : 'Copy'}
+      </button>
+      {/* 상태 변화를 스크린리더에도 알린다 */}
+      <span role="status" aria-live="polite" className="visually-hidden">
+        {copied ? 'Command copied to clipboard' : ''}
+      </span>
+    </div>
+  )
+}
+
+export default function Hero() {
+  const [theme, toggleTheme] = useTheme()
+
+  return (
+    <div className="page">
+      <nav className="nav" aria-label="Primary">
+        <p className="nav__mark">Pulsegate</p>
+        <a className="nav__link" href="#pricing">Pricing</a>
+        <a className="nav__link" href="#docs">Docs</a>
+        <button
+          type="button"
+          className="theme-toggle"
+          onClick={toggleTheme}
+          aria-pressed={theme === 'light'}
+        >
+          {theme === 'dark' ? 'Light' : 'Dark'}
+        </button>
+      </nav>
+
+      <header className="hero">
+        <div>
+          <h1 className="hero__headline">{COPY.headline}</h1>
+          <p className="hero__sub">{COPY.sub}</p>
+          <div className="hero__actions">
+            <a className="cta" href="#signup">{COPY.cta}</a>
+            <a className="link-quiet" href="#pricing">{COPY.secondary}</a>
+          </div>
+        </div>
+
+        <figure style={{ margin: 0 }}>
+          <img
+            className="shot"
+            src="/product-checks.png"
+            width="960"
+            height="720"
+            alt={COPY.shotAlt}
+            loading="eager"
+            decoding="async"
+          />
+          <figcaption className="shot-caption">{COPY.shotCaption}</figcaption>
+        </figure>
+      </header>
+
+      <CopyCommand command={COPY.command} />
+    </div>
+  )
+}
diff --git a/research/dogfood-saas/hero/src/styles/hero.css b/research/dogfood-saas/hero/src/styles/hero.css
new file mode 100644
index 0000000..56d8692
--- /dev/null
+++ b/research/dogfood-saas/hero/src/styles/hero.css
@@ -0,0 +1,216 @@
+/* 히어로. 값은 전부 tokens.css 에서 온다. */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  background: var(--surface);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  letter-spacing: var(--tracking-body);
+  font-variant-numeric: tabular-nums;   /* dark-instrument: 수치가 흔들리면 계기판이 아니다 */
+}
+
+/* layout.md §1 — 하나의 그리드에서 전부 나온다 */
+.page {
+  display: grid;
+  grid-template-columns:
+    [full-start] minmax(var(--gutter), 1fr)
+    [main-start] minmax(0, var(--container)) [main-end]
+    minmax(var(--gutter), 1fr) [full-end];
+}
+.page > * { grid-column: main; }
+.page > .full { grid-column: full; }
+
+/* ---------------------------------------------------------------- 내비 */
+.nav {
+  display: flex;
+  flex-wrap: wrap;                 /* 320px 에서 밀려 가로 스크롤이 생겼다 */
+  align-items: center;
+  gap: var(--space-2) var(--space-4);
+  padding-block: var(--space-4);
+}
+.nav__mark {
+  font-family: var(--font-display);
+  font-size: var(--step-2);
+  letter-spacing: var(--tracking-display);
+  margin: 0;
+  margin-inline-end: auto;
+}
+.nav__link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;                /* 터치 타깃 44×44 */
+  min-width: 44px;
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+}
+.nav__link:hover { color: var(--ink); border-bottom-color: var(--line); }
+
+/* ---------------------------------------------------------------- 히어로 */
+.hero {
+  /* 100vh 금지(하드게이트 #9). dvh 를 쓰고 min-height 로만 잡는다 */
+  min-height: min(84dvh, 46rem);
+  display: grid;
+  /* 비대칭 7:5. layout.md — 중앙 정렬 히어로는 쓰지 않는다 */
+  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: start;
+  padding-block: var(--space-7) var(--space-8);
+}
+
+.hero__headline {
+  font-family: var(--font-display);
+  font-size: var(--display-1);
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-display);
+  font-weight: 400;
+  margin: 0 0 var(--space-4);
+  text-wrap: balance;
+}
+
+.hero__sub {
+  max-width: var(--measure);
+  color: var(--ink-muted);
+  font-size: var(--step-1);
+  margin: 0 0 var(--space-5);
+}
+
+.hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+/* 주 CTA — 감수한 리스크: 강조색을 쓰지 않고 잉크 반전으로만 만든다 */
+.cta {
+  display: inline-block;
+  background: var(--cta-bg);
+  color: var(--cta-ink);
+  font-size: var(--step-0);
+  font-weight: 600;
+  line-height: 1.2;
+  text-decoration: none;
+  padding: var(--space-3) var(--space-5);
+  border: 0;
+  border-radius: var(--radius-md);
+  white-space: nowrap;              /* 하드게이트 #6 — 라벨이 2줄로 접히지 않는다 */
+  /* 하드게이트 #8 — transform/opacity 만 트랜지션한다 */
+  transition: transform var(--dur-instant) var(--ease-out);
+}
+.cta:hover { transform: translateY(-1px); }
+.cta:active { transform: translateY(0); }
+
+.link-quiet {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;                /* 터치 타깃 */
+  color: var(--accent);            /* 강조색은 오직 글자에만 */
+  font-size: var(--step-0);
+  text-decoration: underline;      /* 색만으로 구분하지 않는다 */
+  text-underline-offset: 0.25em;
+}
+
+/* ---------------------------------------------------------------- 제품 화면
+ * 하드게이트 #12 — div 로 만든 가짜 스크린샷 금지.
+ * 브리프가 실제 스크린샷을 제공하므로 <img> 를 쓴다.
+ * aspect-ratio 로 자리를 미리 잡아 CLS 를 막는다.
+ */
+.shot {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  object-position: left top;
+  background: var(--surface-raised);   /* 로드 전/실패 시의 자리 */
+  border-radius: var(--radius-md);
+}
+.shot-caption {
+  display: block;
+  margin-top: var(--space-2);
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+  font-family: var(--font-mono);
+}
+
+/* ---------------------------------------------------------------- 설치 명령 */
+.install {
+  grid-column: main;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3);
+  background: var(--surface-raised);
+  border-radius: var(--radius-md);
+  padding: var(--space-3) var(--space-4);
+  font-family: var(--font-mono);
+  font-size: var(--step-0);
+}
+.install__prompt { color: var(--ink-muted); user-select: none; }
+.install__cmd { color: var(--ink); }
+.install__copy {
+  margin-inline-start: auto;
+  min-height: 44px;
+  min-width: 44px;
+  background: transparent;
+  color: var(--ink-muted);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--step--1);
+  padding: var(--space-1) var(--space-3);
+  cursor: pointer;
+  transition: transform var(--dur-instant) var(--ease-out);
+}
+.install__copy:hover { color: var(--ink); transform: translateY(-1px); }
+
+/* ---------------------------------------------------------------- 테마 토글 */
+.theme-toggle {
+  min-height: 44px;
+  min-width: 44px;
+  background: transparent;
+  color: var(--ink-muted);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--step--1);
+  padding: var(--space-1) var(--space-3);
+  cursor: pointer;
+}
+.theme-toggle:hover { color: var(--ink); }
+
+.visually-hidden {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ---------------------------------------------------------------- 포커스 */
+:where(a, button):focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: var(--radius-sm);
+}
+
+/* ---------------------------------------------------------------- 반응형 */
+/* 콘텐츠가 깨지는 지점에서만. 기기 크기를 가정하지 않는다 */
+@media (max-width: 54rem) {
+  .hero { grid-template-columns: minmax(0, 1fr); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
+}
diff --git a/research/dogfood-saas/hero/src/styles/tokens.css b/research/dogfood-saas/hero/src/styles/tokens.css
new file mode 100644
index 0000000..3b35341
--- /dev/null
+++ b/research/dogfood-saas/hero/src/styles/tokens.css
@@ -0,0 +1,100 @@
+/* 3단계에서 확정한 토큰. 하드코딩된 값은 이 파일 밖에 존재하지 않는다. */
+
+:root {
+  /* ---- 타입: 본문 스케일 (비율 1.250, 5단계) ---- */
+  --step--1: 0.8125rem;
+  --step-0:  1rem;
+  --step-1:  1.25rem;
+  --step-2:  1.5625rem;
+  --step-3:  1.9531rem;
+
+  /* ---- 타입: 디스플레이 (스케일 밖. 위계를 만드는 유일한 장치) ---- */
+  --display-2: clamp(2rem,    1.4rem + 3vw,   2.5rem);
+  --display-1: clamp(2.75rem, 1.8rem + 4.8vw, 4rem);
+
+  --leading-tight:  1.05;
+  --leading-snug:   1.3;
+  --leading-normal: 1.55;
+  --measure: 68ch;
+
+  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
+  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  --tracking-display: -0.025em;
+  --tracking-body: 0;
+
+  /* ---- 간격: 4px 그리드 ---- */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 1rem;
+  --space-4: 1.5rem;
+  --space-5: 2.5rem;
+  --space-6: 4rem;
+  --space-7: 6rem;
+  --space-8: 10rem;
+  --container: 70rem;
+  --gutter: clamp(1rem, 4vw, 5rem);
+
+  /* ---- 형태: 어휘 2종 ---- */
+  --radius-sm: 2px;
+  --radius-md: 4px;
+
+  /* ---- 모션 ---- */
+  --dur-instant: 100ms;
+  --dur-quick:   200ms;
+  --dur-normal:  350ms;
+  --dur-slow:    600ms;
+  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
+  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ---- 색: 다크가 저작 기준 (2단계에서 정당화) ---- */
+  color-scheme: dark light;
+  --surface:        #0D0F12;
+  --surface-raised: #151A20;
+  --line:           #262E37;
+  --ink:            #E6E8E6;
+  --ink-muted:      #9BA6B2;
+  --accent:         #7FA6FF;
+  --accent-ink:     #0D0F12;
+  --cta-bg:         #E6E8E6;
+  --cta-ink:        #0D0F12;
+  --ok:   #4FA97A;
+  --warn: #C9A227;
+  --fail: #D46A55;
+}
+
+/* OS가 라이트를 선호하면 라이트. 토글이 명시적으로 다크를 잡으면 무시한다. */
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme='dark']) {
+    --surface:        #F7F5F0;
+    --surface-raised: #FDFCF9;
+    --line:           #DCD8CF;
+    --ink:            #16181A;
+    --ink-muted:      #5C646E;
+    --accent:         #1B4FD8;
+    --accent-ink:     #FAF9F6;
+    --cta-bg:         #16181A;
+    --cta-ink:        #FAF9F6;
+    --ok:   #2F7D57;
+    --warn: #8A6D14;
+    --fail: #A8432E;
+  }
+}
+
+/* 토글이 라이트를 잡으면 OS와 무관하게 라이트 */
+:root[data-theme='light'] {
+  --surface:        #F7F5F0;
+  --surface-raised: #FDFCF9;
+  --line:           #DCD8CF;
+  --ink:            #16181A;
+  --ink-muted:      #5C646E;
+  --accent:         #1B4FD8;
+  --accent-ink:     #FAF9F6;
+  --cta-bg:         #16181A;
+  --cta-ink:        #FAF9F6;
+  --ok:   #2F7D57;
+  --warn: #8A6D14;
+  --fail: #A8432E;
+}
diff --git a/research/dogfood-saas/tools/contrast.mjs b/research/dogfood-saas/tools/contrast.mjs
new file mode 100644
index 0000000..1ca62dd
--- /dev/null
+++ b/research/dogfood-saas/tools/contrast.mjs
@@ -0,0 +1,52 @@
+// WCAG 2.x 상대 명도 대비 검사. node tools/contrast.mjs
+const hex = h => h.replace('#','').match(/../g).map(x => parseInt(x,16)/255)
+const lin = c => c <= 0.03928 ? c/12.92 : Math.pow((c+0.055)/1.055, 2.4)
+const L = h => { const [r,g,b] = hex(h).map(lin); return 0.2126*r + 0.7152*g + 0.0722*b }
+const ratio = (a,b) => { const l1 = L(a), l2 = L(b); const [hi,lo] = l1>l2 ? [l1,l2] : [l2,l1]; return (hi+0.05)/(lo+0.05) }
+
+const themes = {
+  dark: {
+    surface: '#0D0F12', raised: '#151A20', line: '#262E37',
+    ink: '#E6E8E6', inkMuted: '#9BA6B2', accent: '#7FA6FF',
+    ctaBg: '#E6E8E6', ctaInk: '#0D0F12',
+    ok: '#4FA97A', warn: '#C9A227', fail: '#D46A55',
+  },
+  light: {
+    surface: '#F7F5F0', raised: '#FDFCF9', line: '#DCD8CF',
+    ink: '#16181A', inkMuted: '#5C646E', accent: '#1B4FD8',
+    ctaBg: '#16181A', ctaInk: '#FAF9F6',
+    ok: '#2F7D57', warn: '#8A6D14', fail: '#A8432E',
+  },
+}
+
+// [라벨, 전경, 배경키, 최소요구]
+const checks = [
+  ['본문 ink / surface',        'ink',      'surface', 4.5],
+  ['본문 ink / raised',         'ink',      'raised',  4.5],
+  ['보조 inkMuted / surface',   'inkMuted', 'surface', 4.5],
+  ['보조 inkMuted / raised',    'inkMuted', 'raised',  4.5],
+  ['링크 accent / surface',     'accent',   'surface', 4.5],
+  ['링크 accent / raised',      'accent',   'raised',  4.5],
+  ['상태 ok / raised',          'ok',       'raised',  4.5],
+  ['상태 warn / raised',        'warn',     'raised',  4.5],
+  ['상태 fail / raised',        'fail',     'raised',  4.5],
+]
+
+let fail = 0
+for (const [name, t] of Object.entries(themes)) {
+  console.log(`\n=== ${name} ===`)
+  for (const [label, fg, bg, min] of checks) {
+    const r = ratio(t[fg], t[bg])
+    const ok = r >= min
+    if (!ok) fail++
+    console.log(`${ok ? 'PASS' : 'FAIL'}  ${r.toFixed(2)}:1  (min ${min})  ${label}  ${t[fg]} on ${t[bg]}`)
+  }
+  const r = ratio(t.ctaInk, t.ctaBg)
+  const ok = r >= 4.5
+  if (!ok) fail++
+  console.log(`${ok ? 'PASS' : 'FAIL'}  ${r.toFixed(2)}:1  (min 4.5)  CTA 글자/버튼  ${t.ctaInk} on ${t.ctaBg}`)
+  // 하드게이트 #7: 버튼 텍스트/배경 대비
+  const rb = ratio(t.line, t.surface)
+  console.log(`INFO  ${rb.toFixed(2)}:1            경계선 line / surface (3:1 미만이면 비필수 장식으로만)`)
+}
+console.log(fail === 0 ? '\n전부 통과' : `\n${fail}건 실패`)
diff --git a/research/motion/01-principles.md b/research/motion/01-principles.md
new file mode 100644
index 0000000..909ad92
--- /dev/null
+++ b/research/motion/01-principles.md
@@ -0,0 +1,552 @@
+# 01. 모션 원칙 — 왜 이 움직임인가
+
+> 이 문서의 목적: 에이전트가 "어떤 이징을, 몇 ms로, 어떤 순서로" 쓸지를 **취향이 아니라 규칙으로** 결정하게 만든다.
+> 모션은 장식이 아니라 **인터페이스의 문법**이다. 문법에는 옳고 그름이 있다.
+
+---
+
+## 0. 대전제: 모션은 4가지 일만 한다
+
+애니메이션을 넣기 전에 반드시 아래 4개 중 **어느 것에 해당하는지 한 문장으로** 답할 수 있어야 한다.
+답할 수 없으면 그 애니메이션은 넣지 않는다.
+
+| # | 역할 | 질문 | 예시 |
+|---|---|---|---|
+| 1 | **인과(causality)** | "이게 왜 여기 나타났나?"에 답하는가 | 버튼을 누른 지점에서 시트가 자라남 |
+| 2 | **공간 연속성(continuity)** | "이 요소가 어디서 와서 어디로 갔나?"에 답하는가 | 썸네일 → 상세 이미지로 이어지는 shared element |
+| 3 | **상태 변화 고지(feedback)** | "내 입력이 접수됐나?"에 답하는가 | 프레스 시 눌림, 토글 스위치, 검증 실패 표시 |
+| 4 | **주의 유도(attention)** | "지금 어디를 봐야 하나?"에 답하는가 | 새 항목 하이라이트, 에러 필드로의 스크롤 |
+
+**여기에 없는 다섯 번째, "멋있어서"는 정당한 이유가 아니다.** 단, 브랜드 표현이 명시적 요구사항인
+히어로/랜딩/포트폴리오에서는 5번 **연출(expression)** 이 추가로 허용된다. 대신 연출 모션은
+반드시 (a) 스크롤/호버로 사용자가 통제 가능하거나 (b) 1회성이며 (c) `prefers-reduced-motion`에서
+완전히 제거 가능해야 한다.
+
+---
+
+## 1. 이징의 의미론 — 곡선은 "물리적 인상"이다
+
+이징 곡선은 속도의 시간 변화율이다. 사람의 뇌는 이것을 **무게, 힘, 의도**로 읽는다.
+
+### 1.1 기본 곡선 표
+
+| 이징 | cubic-bezier | 속도 변화 | 심리적 인상 | 언제 쓰나 | 쓰면 안 되는 곳 |
+|---|---|---|---|---|---|
+| `linear` | `(0,0,1,1)` | 일정 | 기계적, 무생물 | 무한 회전(스피너), 마퀴, **스크롤 스크럽** | 위치 이동, 등장/퇴장 |
+| `ease-out` | `(0,0,0.58,1)` | 빠르게 시작 → 감속 | "도착했다", 안정감 | **화면에 들어오는 모든 것**. 진입, 열림, 확장 | 화면 밖으로 나가는 것 |
+| `ease-in` | `(0.42,0,1,1)` | 느리게 시작 → 가속 | "떠난다", 이탈 | **화면 밖으로 나가는 것**. 퇴장, 닫힘 | 화면에 남는 것 (끝이 뚝 끊겨 어색함) |
+| `ease-in-out` | `(0.42,0,0.58,1)` | 감속-가속 대칭 | 신중함, 왕복 | 화면 안에서의 **이동**(A→B), 루프 애니메이션 | 짧은 마이크로 인터랙션(굼떠 보임) |
+| `ease`(기본값) | `(0.25,0.1,0.25,1)` | 짧은 가속 → 긴 감속 | 무난함 | 딱히 고민할 여유가 없을 때의 기본값 | 프로덕션 최종 튜닝 |
+| **spring** | (곡선 아님) | 물리 시뮬레이션 | 생동감, 실체감, 손맛 | 직접 조작(드래그·제스처), 토글, 레이아웃 변화 | 색/투명도 변화, 텍스트 |
+
+> **핵심 규칙 (Josh Comeau, Material, Carbon이 모두 동의하는 지점)**
+> **들어오는 것은 감속(ease-out), 나가는 것은 가속(ease-in), 안에서 움직이는 것은 감속-가속(ease-in-out).**
+> 이유: 화면에 남을 요소가 급정거하면 충돌처럼 보이고, 화면을 떠날 요소가 느리게 사라지면
+> "왜 아직 안 갔지"라는 대기 비용이 생긴다.
+
+### 1.2 왜 `linear`는 거의 항상 틀린가
+
+현실의 모든 물체는 질량이 있어 가속·감속한다. 등속 운동은 뇌가 "이건 물체가 아니라 그려진 것"으로
+읽는다. 예외는 **애초에 물체가 아닌 것**뿐이다: 진행률 표시, 회전 로더, 무한 마퀴,
+그리고 **스크롤에 직접 물린 애니메이션**(사용자의 스크롤 자체가 이미 이징이므로 곡선을 덧씌우면 이중 이징이 된다).
+
+### 1.3 커스텀 cubic-bezier를 만들 때의 안전 규칙
+
+- `x1`, `x2`는 반드시 `0~1` 범위. 벗어나면 무효.
+- `y1`, `y2`는 `0~1`을 벗어나도 되며 이때 **오버슛/언더슛**이 생긴다 (예: `cubic-bezier(0.34, 1.56, 0.64, 1)` = back-out).
+- 오버슛은 **작고 가벼운 요소**(칩, 아이콘, 토스트)에만. 큰 면적(모달, 시트)이 오버슛하면 멀미를 유발한다.
+- 오버슛 폭은 이동 거리의 **5~10%**를 넘기지 않는다.
+
+```css
+/* 프로덕션에서 실제로 쓸 만한 커스텀 곡선 세트 */
+--ease-out-quad:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
+--ease-out-cubic:   cubic-bezier(0.22, 0.61, 0.36, 1);
+--ease-out-quart:   cubic-bezier(0.16, 1,    0.3,  1);   /* 가장 범용적인 "고급스러운" 진입 */
+--ease-out-expo:    cubic-bezier(0.16, 1,    0.3,  1);
+--ease-in-quart:    cubic-bezier(0.5,  0,    0.75, 0);   /* 퇴장 */
+--ease-in-out-quart:cubic-bezier(0.76, 0,    0.24, 1);   /* 화면 내 이동 */
+--ease-back-out:    cubic-bezier(0.34, 1.56, 0.64, 1);   /* 작은 요소 전용 오버슛 */
+--ease-anticipate:  cubic-bezier(0.68, -0.6, 0.32, 1.6); /* 뒤로 당겼다 튀어나감 — 아주 아껴 쓸 것 */
+```
+
+---
+
+## 2. 스프링 — 언제 곡선 대신 물리를 쓰나
+
+### 2.1 스프링이 이기는 상황
+
+스프링은 **목표 지점이 도중에 바뀔 수 있는 애니메이션**에서 압도적으로 유리하다.
+duration 기반 이징은 목표가 바뀌면 처음부터 다시 시작하거나 속도가 뚝 끊기지만,
+스프링은 **현재 속도(velocity)를 이어받아** 자연스럽게 궤도를 수정한다.
+
+| 상황 | 선택 |
+|---|---|
+| 드래그를 놓았을 때의 관성/스냅 | **스프링** (필수) |
+| 커서를 따라가는 요소 | **스프링** 또는 lerp |
+| 토글 스위치, 체크박스 | **스프링** (손맛) |
+| 레이아웃 변화(FLIP) | **스프링** |
+| 모달 진입/퇴장 | 곡선 (예측 가능한 지속시간이 더 중요) |
+| 색상·투명도 변화 | **곡선** (스프링의 바운스가 색에는 무의미하고 깜빡임처럼 보임) |
+| 스크롤 스크럽 | **둘 다 아님** (linear) |
+
+### 2.2 파라미터의 의미
+
+| 파라미터 | 별칭 | 올리면 | 실무 기본값 |
+|---|---|---|---|
+| `stiffness` | tension | 더 빠르고 날카롭게 | 170~400 |
+| `damping` | friction | 바운스가 줄고 차분해짐 | 20~40 |
+| `mass` | — | 무겁고 굼뜨게, 관성 증가 | 1 (거의 안 건드림) |
+
+**감쇠비(ζ) = damping / (2 × √(stiffness × mass))**
+
+- ζ < 1 → 언더댐프(바운스 있음)
+- ζ = 1 → 임계 감쇠(바운스 없이 최단 시간에 정착) ← **UI 기본값으로 가장 안전**
+- ζ > 1 → 오버댐프(느리게 미끄러짐)
+
+> Motion 라이브러리는 `stiffness/damping` 대신 **`bounce`(0~1) + `visualDuration`** 조합을 권장한다.
+> 이게 디자이너 친화적이다: `{ type: "spring", visualDuration: 0.35, bounce: 0.2 }`
+> `bounce: 0`이면 임계 감쇠와 동일, `bounce: 0.25`가 Motion 기본값.
+
+### 2.3 CSS에서 스프링 흉내내기 — `linear()` 프리셋 (직접 계산한 값)
+
+CSS에는 스프링이 없지만 `linear()`(Baseline Widely available, 2023-12)로 근사할 수 있다.
+아래는 실제 스프링 미분방정식 `x(t) = 1 − e^(−ζω₀t)(cos(ω_d t) + (ζω₀/ω_d)sin(ω_d t))` 를
+샘플링해 생성한 값이다. 주석의 `duration`을 **반드시 함께** 써야 의도한 물리가 나온다.
+
+```css
+:root {
+  /* soft — m=1 k=170 d=26, ζ=0.997, 바운스 없음 / duration: 700ms */
+  --spring-soft: linear(
+    0, 0.0039 1%, 0.0148 2%, 0.0314 3%, 0.0526 4%, 0.1053 6%, 0.4302 16%,
+    0.5189 19%, 0.598 22%, 0.6669 25%, 0.7259 28%, 0.7907 32%, 0.8415 36%,
+    0.8971 42%, 0.9474 51%, 1
+  );
+
+  /* snappy — m=1 k=300 d=30, ζ=0.866, 거의 바운스 없음 / duration: 505ms */
+  --spring-snappy: linear(
+    0, 0.0036 1%, 0.0138 2%, 0.0296 3%, 0.05 4%, 0.0743 5%, 0.1317 7%,
+    0.4735 17%, 0.5669 20%, 0.65 23%, 0.7221 26%, 0.7831 29%, 0.8337 32%,
+    0.8869 36%, 0.9342 41%, 0.9739 48%, 1
+  );
+
+  /* bouncy — m=1 k=400 d=20, ζ=0.5, 최대 16% 오버슛 / duration: 635ms */
+  --spring-bouncy: linear(
+    0, 0.0077 1%, 0.0295 2%, 0.0634 3%, 0.1074 4%, 0.1597 5%, 0.2185 6%,
+    0.282 7%, 0.6231 12%, 0.6881 13%, 0.75 14%, 0.8084 15%, 0.8627 16%,
+    0.9126 17%, 0.9579 18%, 0.9984 19%, 1.0341 20%, 1.065 21%, 1.0913 22%,
+    1.113 23%, 1.1305 24%, 1.1438 25%, 1.1535 26%, 1.1596 27%, 1.1628 29%,
+    1.156 31%, 1.1329 34%, 1.0273 44%, 0.9976 48%, 0.9777 53%, 1
+  );
+
+  /* gentle — m=1 k=120 d=14, ζ=0.639, 7% 오버슛 / duration: 940ms */
+  --spring-gentle: linear(
+    0, 0.0051 1%, 0.0195 2%, 0.0419 3%, 0.071 4%, 0.1058 5%, 0.1453 6%,
+    0.2342 8%, 0.528 14%, 0.6206 16%, 0.7058 18%, 0.7823 20%, 0.8492 22%,
+    0.9062 24%, 0.9534 26%, 0.9915 28%, 1.021 30%, 1.0429 32%, 1.0636 35%,
+    1.0725 38%, 1.0673 44%, 1.0014 67%, 1
+  );
+
+  /* nobounce — m=1 k=200 d=28.284, ζ=1.0 (임계 감쇠) / duration: 650ms */
+  --spring-nobounce: linear(
+    0, 0.004 1%, 0.0151 2%, 0.0319 3%, 0.0534 4%, 0.1068 6%, 0.4339 16%,
+    0.5227 19%, 0.6017 22%, 0.6703 25%, 0.7291 28%, 0.7934 32%, 0.8438 36%,
+    0.8986 42%, 0.9483 51%, 1
+  );
+}
+
+/* 사용 예 */
+.sheet {
+  transition: translate 700ms var(--spring-soft);
+}
+.chip {
+  transition: scale 635ms var(--spring-bouncy);
+}
+```
+
+> **주의**: `linear()`로 오버슛(값 > 1)을 만들려면 애니메이션되는 값 자체가 오버슛을 허용해야 한다.
+> `opacity`에 `--spring-bouncy`를 쓰면 1을 넘는 구간이 클램프되어 정체 구간이 생긴다. **transform 계열에만.**
+
+---
+
+## 3. 지속시간 — 숫자로 못 박기
+
+### 3.1 인지 기준선
+
+| 임계값 | 의미 | 근거 |
+|---|---|---|
+| **~100ms** | 사용자가 "즉각적"이라고 느끼는 한계. 직접 조작의 착각이 유지됨 | NN/g |
+| **~1s** | 사고 흐름이 끊기지 않는 한계 | NN/g |
+| **>400ms** | UI 애니메이션은 여기서부터 "느리다"고 인식되기 시작 | NN/g |
+| **>500ms** | "짜증난다(a real drag)" 구간 진입 | NN/g |
+| **200ms** | INP(Interaction to Next Paint) "good" 임계값 | Core Web Vitals |
+
+> NN/g 요약: **대부분의 UI 애니메이션은 100~500ms.** 애니메이션은 "너무 짧아서" 문제가 되는 경우보다
+> **"너무 길어서" 문제가 되는 경우가 압도적으로 많다.**
+
+### 3.2 designpaca 표준 지속시간 표 ← **이 표를 기본값으로 쓴다**
+
+| 카테고리 | 지속시간 | 이징 | 예시 |
+|---|---|---|---|
+| **즉각 피드백** | 60~100ms | `ease-out` | 버튼 프레스, 체크박스, 리플 시작, 아이콘 상태 |
+| **호버/포커스** | 120~180ms | `ease-out` (진입) / 240ms `ease` (이탈) | 링크 밑줄, 카드 리프트, 컬러 변화 |
+| **작은 컴포넌트 진입** | 180~250ms | `ease-out-quart` | 툴팁, 드롭다운, 토스트, 칩 |
+| **작은 컴포넌트 퇴장** | 120~180ms | `ease-in` | 위와 동일 (진입의 **0.6~0.75배**) |
+| **중간 표면 진입** | 250~350ms | `ease-out-quart` 또는 spring(nobounce) | 모달, 사이드 시트, 아코디언 |
+| **중간 표면 퇴장** | 180~250ms | `ease-in-quart` | 위와 동일 |
+| **전체 화면 전환** | 300~450ms | `ease-in-out-quart` | 페이지 전환, 풀스크린 확장 |
+| **shared element 전환** | 350~500ms | `ease-in-out-quart` | 썸네일 → 상세 |
+| **스크롤 리빌** | 400~700ms | `ease-out-quart` | 섹션 등장 (1회성) |
+| **앰비언트 / 루프** | 3~20s | `ease-in-out` 또는 `linear` | 배경 그라디언트 드리프트, 마퀴 |
+| **스크롤 스크럽** | (해당 없음) | `linear` / `none` | 스크롤 진행률에 직접 물린 것 |
+
+### 3.3 지속시간 조정 규칙 (표에서 벗어날 때)
+
+1. **거리 비례**: 이동 거리가 2배면 지속시간은 **√2배** 정도만 늘린다 (선형 비례 아님).
+   IBM Carbon이 명시: "요소의 이동 거리·크기가 클수록 애니메이션은 길어져야 한다."
+   실무 근사: `duration = base × (distance / baseDistance)^0.5`, 상한은 항상 위 표의 최대값.
+2. **진입 > 퇴장**: 퇴장은 진입의 **0.6~0.75배**. 나가는 것은 볼 이유가 없다.
+3. **면적 비례**: 화면 면적을 많이 차지할수록 길게. 단 500ms 상한.
+4. **반복 빈도 반비례**: 사용자가 하루에 100번 보는 애니메이션은 **가장 짧게**. 1번 보는 것은 길어도 된다.
+   → 검색 결과 필터링(빈번) 150ms vs 온보딩 일러스트(1회) 800ms.
+5. **모바일은 짧게**: 터치는 마우스보다 직접적이라 지연에 더 민감하다. 데스크톱 값의 0.8배.
+
+### 3.4 정립된 시스템의 실제 토큰값 (1차 출처 확인)
+
+#### Material Design 3 (`material-web` 리포지토리 `_md-sys-motion.scss`, v0.192)
+
+```css
+/* Easing */
+--md-sys-motion-easing-linear:                cubic-bezier(0, 0, 1, 1);
+--md-sys-motion-easing-standard:              cubic-bezier(0.2, 0, 0, 1);
+--md-sys-motion-easing-standard-accelerate:   cubic-bezier(0.3, 0, 1, 1);
+--md-sys-motion-easing-standard-decelerate:   cubic-bezier(0, 0, 0, 1);
+--md-sys-motion-easing-emphasized:            cubic-bezier(0.2, 0, 0, 1);
+--md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
+--md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
+--md-sys-motion-easing-legacy:                cubic-bezier(0.4, 0, 0.2, 1);
+--md-sys-motion-easing-legacy-accelerate:     cubic-bezier(0.4, 0, 1, 1);
+--md-sys-motion-easing-legacy-decelerate:     cubic-bezier(0, 0, 0.2, 1);
+
+/* Duration */
+--md-sys-motion-duration-short1:      50ms;
+--md-sys-motion-duration-short2:     100ms;
+--md-sys-motion-duration-short3:     150ms;
+--md-sys-motion-duration-short4:     200ms;
+--md-sys-motion-duration-medium1:    250ms;
+--md-sys-motion-duration-medium2:    300ms;
+--md-sys-motion-duration-medium3:    350ms;
+--md-sys-motion-duration-medium4:    400ms;
+--md-sys-motion-duration-long1:      450ms;
+--md-sys-motion-duration-long2:      500ms;
+--md-sys-motion-duration-long3:      550ms;
+--md-sys-motion-duration-long4:      600ms;
+--md-sys-motion-duration-extra-long1: 700ms;
+--md-sys-motion-duration-extra-long2: 800ms;
+--md-sys-motion-duration-extra-long3: 900ms;
+--md-sys-motion-duration-extra-long4:1000ms;
+```
+
+M3의 의미론:
+- **decelerate** = 화면 밖에서 들어와 화면에 멈추는 것(**enter**)
+- **accelerate** = 화면에 있던 것이 멈추지 않고 화면 밖으로 나가는 것(**exit**)
+- **emphasized** = 사용자의 주의를 끌어야 하는 큰 전환. `standard`보다 초반이 더 느리고 후반이 더 빠른 비대칭 곡선
+- **standard** = 화면 안에서 시작하고 끝나는 대부분의 전환
+- **legacy** = M2 시절 곡선. 신규 프로젝트에서는 쓰지 않는다
+
+> **주의**: M3 사양의 "emphasized"는 원래 **2개 곡선을 이어붙인 3점 곡선**이라 단일 cubic-bezier로
+> 정확히 표현되지 않는다. 위 토큰값은 웹용 근사치다. 정확히 재현하려면 `linear()`를 쓰거나
+> JS 애니메이션에서 키프레임 2개로 나눈다.
+
+#### IBM Carbon (`@carbon/motion` v11.50.0 패키지 소스에서 직접 확인)
+
+```css
+/* productive — 실무 작업용. 빠르고 방해되지 않음 */
+--carbon-ease-standard-productive:  cubic-bezier(0.2, 0, 0.38, 0.9);
+--carbon-ease-entrance-productive:  cubic-bezier(0, 0, 0.38, 0.9);
+--carbon-ease-exit-productive:      cubic-bezier(0.2, 0, 1, 0.9);
+
+/* expressive — 브랜드/감성 표현용. 크고 눈에 띄는 전환 */
+--carbon-ease-standard-expressive:  cubic-bezier(0.4, 0.14, 0.3, 1);
+--carbon-ease-entrance-expressive:  cubic-bezier(0, 0, 0.3, 1);
+--carbon-ease-exit-expressive:      cubic-bezier(0.4, 0.14, 1, 1);
+
+/* duration — 용도가 토큰 이름에 직접 문서화되어 있다 */
+--carbon-duration-fast-01:      70ms;  /* 버튼·토글 등 마이크로 인터랙션. 즉각 반응 */
+--carbon-duration-fast-02:     110ms;  /* 작은 UI 요소의 미묘한 진입/퇴장(페이드) */
+--carbon-duration-moderate-01: 150ms;  /* 작은 확장, 짧은 거리 이동. 기본 전환 속도 */
+--carbon-duration-moderate-02: 240ms;  /* 확장, 시스템 알림, 토스트 */
+--carbon-duration-slow-01:     400ms;  /* 큰 확장, 중요 시스템 알림 */
+--carbon-duration-slow-02:     700ms;  /* 배경 디밍, 대형 히어로 전환 */
+```
+
+Carbon의 핵심 통찰: **하나의 제품 안에 두 개의 모션 인격이 공존한다.**
+- 데이터 테이블, 폼, 툴바 = **productive** (짧고 절제됨, 70~240ms)
+- 온보딩, 마케팅 섹션, 빈 상태 = **expressive** (400~700ms)
+같은 제품에서 이 둘을 섞지 말고, **컴포넌트 성격에 따라 결정**한다.
+
+#### Apple HIG
+
+Apple은 수치 토큰을 공개하지 않고 원칙만 제시한다. 요약:
+- 모션은 **사용자의 작업을 돕는 목적**일 때만 쓴다
+- **일관성**: 같은 종류의 전환은 항상 같은 모션
+- **Reduce Motion** 설정을 반드시 존중한다. 시스템 제공 애니메이션은 자동 대체되지만 커스텀은 직접 처리
+- iOS/macOS의 기본 감성은 **스프링**이다 (SwiftUI의 기본 애니메이션이 스프링)
+- 화면 전체가 회전·확대·시차 이동하는 효과는 멀미 유발원 1순위
+
+---
+
+## 4. Stagger와 오케스트레이션
+
+### 4.1 stagger 규칙
+
+| 항목 수 | 항목당 지연 | 총 지속시간 상한 |
+|---|---|---|
+| 3~5개 (네비게이션) | 40~60ms | 300ms |
+| 6~12개 (카드 그리드) | 30~50ms | 500ms |
+| 12~30개 (리스트) | 15~25ms | 600ms |
+| 30개 초과 | **stagger 쓰지 않음** — 첫 화면 항목만 stagger, 나머지는 동시 | — |
+
+**절대 규칙**
+1. `총 지속시간 = (항목수 − 1) × stagger + 개별 duration` 이 **800ms를 넘으면 안 된다.**
+   100개 리스트에 20ms stagger를 걸면 2초가 걸린다. 그건 기능이 아니라 버그다.
+2. stagger는 **가상 스크롤/무한 스크롤에서는 첫 페이지에만** 적용한다. 스크롤할 때마다 stagger가
+   재생되면 읽기를 방해한다.
+3. stagger 방향은 **읽기 방향**과 일치시킨다 (좌→우, 상→하). 중앙에서 퍼지는 stagger는
+   그리드/방사형 레이아웃에만.
+
+### 4.2 오케스트레이션 — 순서의 문법
+
+Disney 12원칙 중 UI에 실제로 유효한 4가지:
+
+| 원칙 | UI 적용 |
+|---|---|
+| **Slow in / Slow out** (이징) | 위 1장 전체 |
+| **Timing** | 위 3장 전체 |
+| **Follow through / Overlapping action** | 연관 요소들이 **동시에 끝나지 않게** 한다. 카드가 먼저, 그 안의 텍스트가 60ms 뒤에. 이게 "고급스러움"의 정체다 |
+| **Anticipation** | 큰 동작 전 반대 방향으로 살짝 당긴다. **아껴 쓸 것** — 지연으로 느껴지면 실패 |
+
+나머지 8개(squash&stretch, straight ahead, arcs, secondary action, exaggeration, solid drawing,
+appeal, staging)는 캐릭터 애니메이션용이며 UI에 억지로 적용하면 유치해진다.
+**squash & stretch**만 버튼 프레스에 한해 미세하게(scale 0.96~0.98) 유효하다.
+
+### 4.3 진입 순서 규칙
+
+```
+컨테이너 → 구조(헤더/구분선) → 콘텐츠(텍스트/이미지) → 인터랙션 요소(버튼)
+```
+
+각 단계 사이 40~80ms 오버랩. **동시에 시작해서 동시에 끝나면 평면적으로 보인다.**
+
+퇴장은 **정확히 역순**이고 더 빨라야 한다. 실무에서는 퇴장 시 stagger를 없애고 한꺼번에
+페이드아웃하는 것이 더 깔끔한 경우가 많다.
+
+---
+
+## 5. 공간 연속성 — "어디서 와서 어디로 가는가"
+
+### 5.1 원칙
+
+사용자의 머릿속에는 **인터페이스의 공간 모델**이 있다. 모션은 그 모델을 유지시키거나 파괴한다.
+
+- 동일한 객체는 **같은 정체성을 유지**한 채 이동해야 한다 (shared element transition).
+- 계층 구조에서 **아래로 들어가면** 확대·전진, **위로 나오면** 축소·후퇴.
+- 형제 관계 이동은 **수평 슬라이드** (탭, 캐러셀, 스텝).
+- 모달/시트는 **z축 위**에서 온다 (아래에서 올라오거나, 트리거 지점에서 자라남).
+
+### 5.2 트리거 지점 원칙 (인과의 시각화)
+
+**요소는 사용자가 클릭한 곳에서 나와야 한다.** 화면 정중앙에서 페이드인하는 팝오버는
+"어디서 왔는지" 정보를 버리는 것이다.
+
+```css
+/* 클릭 지점을 transform-origin으로 삼는 최소 구현 */
+.popover {
+  transform-origin: var(--origin-x, 50%) var(--origin-y, 0%);
+  scale: 0.95;
+  opacity: 0;
+  transition: scale 180ms var(--ease-out-quart), opacity 180ms linear;
+}
+.popover[data-open] {
+  scale: 1;
+  opacity: 1;
+}
+```
+
+```js
+// 트리거 버튼의 위치를 팝오버의 origin으로 전달
+function openPopover(trigger, popover) {
+  const t = trigger.getBoundingClientRect();
+  const p = popover.getBoundingClientRect();
+  popover.style.setProperty('--origin-x', `${t.left + t.width / 2 - p.left}px`);
+  popover.style.setProperty('--origin-y', `${t.top + t.height / 2 - p.top}px`);
+  popover.dataset.open = '';
+}
+```
+
+### 5.3 시선 유도
+
+- 사람의 시선은 **움직이는 것**을 먼저 본다. 따라서 **한 시점에 움직이는 것은 하나**여야 한다.
+- 동시에 여러 곳이 움직이면 시선이 분산되고 아무것도 강조되지 않는다.
+- 순차 진입(stagger)은 시선을 **경로를 따라 끌고 간다**. 그 경로가 정보 우선순위와 일치해야 한다.
+- 에러/알림은 **스크롤 이동 + 짧은 강조**로 유도한다. 화면 밖에 있는 것을 흔들어봐야 아무도 못 본다.
+
+---
+
+## 6. 나쁜 모션의 징후 — 실패 진단 체크리스트
+
+에이전트는 자기가 만든 모션에 대해 아래를 **전부** 확인해야 한다. 하나라도 걸리면 고친다.
+
+### 6.1 즉시 실격 (반드시 수정)
+
+| 징후 | 왜 나쁜가 | 처방 |
+|---|---|---|
+| 페이지 로드 시 콘텐츠가 애니메이션 때문에 **읽히기까지 지연** | 콘텐츠는 즉시 읽혀야 한다. 애니메이션이 게이트가 되면 안 된다 | 첫 화면(above the fold)은 애니메이션 없이 즉시 표시. 리빌은 스크롤 이후에만 |
+| 스크롤 리빌이 **매번 재생**됨 | 위아래로 스크롤할 때마다 깜빡여 읽기를 방해 | `once: true` / `animation-fill-mode: forwards` / IntersectionObserver 후 unobserve |
+| 애니메이션 중 **레이아웃 시프트**(CLS) 발생 | 클릭 대상이 움직여 오조작 유발 | transform/opacity만 애니메이션. 공간은 미리 확보 |
+| **동시에 3개 이상**의 독립적 애니메이션 | 시선 분산, 인지 부하 | 하나로 통합하거나 순차화 |
+| 500ms 초과 **차단성** 애니메이션 | 사용자가 기다림 | 400ms 이하로 줄이거나 인터럽트 가능하게 |
+| **인터럽트 불가** — 애니메이션 중 클릭 무시 | 통제권 상실 | 애니메이션 중에도 입력 수용, 새 목표로 재타겟 |
+| `prefers-reduced-motion` 미대응 | 접근성 위반, 실제 신체 반응 유발 | 05번 문서 참조 |
+| 무한 반복되는 **큰 면적** 움직임 | 전정기관 자극 + 배터리 소모 | 정지 가능하게 하거나 제거 |
+| 스크롤 재킹으로 **네이티브 스크롤 파괴** | 키보드/스크린리더/스크롤바 붕괴 | 03번 문서 Lenis 섹션 참조 |
+
+### 6.2 냄새 (재검토 필요)
+
+| 징후 | 진단 질문 |
+|---|---|
+| 이징이 전부 `ease` 또는 `linear` | 진입/퇴장/이동을 구분했는가? |
+| 모든 애니메이션이 같은 duration | 크기·거리·빈도가 다른데 왜 같은가? |
+| 진입과 퇴장의 duration이 같음 | 퇴장을 0.6~0.75배로 줄였는가? |
+| `will-change`가 10개 이상 요소에 상시 적용 | GPU 메모리 낭비. 필요할 때만 켜고 끄는가? |
+| 로딩 스켈레톤이 2초 이상 유지 | 스켈레톤은 지연을 가리는 반창고. 실제 지연을 줄였는가? |
+| 애니메이션 후에도 포커스가 원래 자리 | 포커스가 시각적 흐름을 따라가는가? |
+| 텍스트가 글자 단위로 쪼개짐 | 스크린리더가 "ㅇ-ㅏ-ㄴ-ㄴ-ㅕ-ㅇ"으로 읽는다. aria 처리했는가? |
+| hover에만 존재하는 정보 | 터치 기기와 키보드에서는? |
+
+### 6.3 "애니메이션을 넣지 말아야 할" 상황
+
+- **고빈도 반복 작업 흐름**: 데이터 입력, 표 편집, 코드 에디터. 여기서 애니메이션은 순수 비용이다.
+- **에러 복구 경로**: 사용자가 이미 짜증난 상태. 지연을 추가하지 않는다.
+- **결과가 이미 예측되는 전환**: 탭 전환처럼 "당연히 이렇게 될 것"인 곳에 화려한 모션은 낭비.
+- **오프라인/저사양 환경**: 프레임 드랍된 애니메이션은 없느니만 못하다.
+- **정보 밀도가 높은 대시보드**: 숫자가 계속 바뀌는 곳에서 카운트업 애니메이션은 읽기를 방해한다.
+
+---
+
+## 7. 결정 트리 — 에이전트용 실행 규칙
+
+```
+[1] 이 모션의 역할이 1~4(인과/연속성/피드백/주의) 중 하나인가?
+    NO → 만들지 않는다. (단 브랜드 표현이 명시 요구사항이면 5번으로)
+    YES ↓
+
+[2] 사용자의 직접 조작(드래그/제스처)에 물려 있거나, 목표가 도중에 바뀔 수 있는가?
+    YES → spring. bounce는 0~0.25. visualDuration은 아래 [4]의 값.
+    NO  ↓
+
+[3] 스크롤 진행률에 직접 물려 있는가?
+    YES → linear / ease "none". duration 개념 없음. CSS scroll-driven 우선(02번), 불가하면 ScrollTrigger scrub(03번).
+    NO  ↓
+
+[4] 방향은?
+    화면 안으로 들어옴  → ease-out 계열 (--ease-out-quart)
+    화면 밖으로 나감    → ease-in 계열  (--ease-in-quart), duration은 진입의 0.65배
+    화면 안에서 이동    → ease-in-out 계열 (--ease-in-out-quart)
+
+[5] 지속시간은 3.2 표에서 카테고리를 골라 가져온다.
+    거리가 표준의 2배 이상이면 ×1.4, 표의 상한을 넘지 않는다.
+
+[6] 여러 요소인가?
+    YES → 4.1 stagger 표. 총 800ms 상한 검증.
+    NO  ↓
+
+[7] 성능 검증: transform/opacity/filter/clip-path 만 애니메이션하는가?
+    NO → 05번 문서의 대체 기법 적용.
+
+[8] prefers-reduced-motion 대응이 있는가?
+    NO → 05번 문서 4장의 3단계 대응 적용. (전부 끄기는 오답)
+
+[9] 구현 스택 선택: CSS로 되나?
+    YES → 02번 문서. (기본값. 라이브러리는 필요할 때만)
+    NO  → 03번 문서의 선택 기준표.
+```
+
+---
+
+## 8. 복사해서 바로 쓰는 모션 토큰 세트
+
+```css
+:root {
+  /* ── Duration ─────────────────────────────────────────── */
+  --dur-instant:  80ms;   /* 프레스, 체크, 리플 시작 */
+  --dur-fast:    150ms;   /* 호버, 컬러, 아이콘 상태 */
+  --dur-quick:   220ms;   /* 툴팁, 드롭다운, 토스트 진입 */
+  --dur-base:    300ms;   /* 모달, 시트, 아코디언 진입 */
+  --dur-slow:    420ms;   /* 페이지 전환, shared element */
+  --dur-reveal:  600ms;   /* 스크롤 리빌 (1회성) */
+  --dur-ambient:  12s;    /* 배경 루프 */
+
+  /* 퇴장은 진입의 0.65배 */
+  --dur-quick-out: 145ms;
+  --dur-base-out:  195ms;
+  --dur-slow-out:  275ms;
+
+  /* ── Easing ───────────────────────────────────────────── */
+  --ease-in:        cubic-bezier(0.5,  0,    0.75, 0);
+  --ease-out:       cubic-bezier(0.16, 1,    0.3,  1);
+  --ease-in-out:    cubic-bezier(0.76, 0,    0.24, 1);
+  --ease-back-out:  cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-linear:    linear;
+
+  /* Material 3 호환 별칭 */
+  --ease-emphasized:            cubic-bezier(0.2,  0,   0,    1);
+  --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1,  1);
+  --ease-emphasized-accelerate: cubic-bezier(0.3,  0,   0.8,  0.15);
+
+  /* ── Stagger ──────────────────────────────────────────── */
+  --stagger-tight:  25ms;
+  --stagger-base:   40ms;
+  --stagger-loose:  60ms;
+
+  /* ── Distance ─────────────────────────────────────────── */
+  --shift-xs:  4px;   /* 미세 피드백 */
+  --shift-sm:  8px;   /* 툴팁, 드롭다운 */
+  --shift-md: 16px;   /* 카드 리빌 */
+  --shift-lg: 32px;   /* 섹션 리빌 */
+}
+
+/* reduced-motion에서의 재정의 — "끄기"가 아니라 "줄이기" */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dur-instant: 1ms;
+    --dur-fast:    1ms;
+    --dur-quick:  100ms;   /* 페이드는 남긴다 */
+    --dur-base:   120ms;
+    --dur-slow:   120ms;
+    --dur-reveal: 120ms;
+    --dur-ambient: 0s;
+
+    --dur-quick-out: 80ms;
+    --dur-base-out:  80ms;
+    --dur-slow-out:  80ms;
+
+    --stagger-tight: 0ms;
+    --stagger-base:  0ms;
+    --stagger-loose: 0ms;
+
+    --shift-xs: 0px;
+    --shift-sm: 0px;
+    --shift-md: 0px;
+    --shift-lg: 0px;   /* 이동 거리를 0으로 → 페이드만 남음 */
+
+    --ease-out:    ease-out;
+    --ease-in:     ease-out;
+    --ease-in-out: ease-out;
+    --ease-back-out: ease-out;  /* 오버슛 제거 */
+  }
+}
+```
+
+> 이 토큰 세트의 핵심 설계: **`prefers-reduced-motion`에서 거리 토큰을 0으로 만들면
+> 모든 슬라이드 애니메이션이 자동으로 크로스페이드가 된다.** 컴포넌트 코드를 한 줄도
+> 고치지 않고 전역에서 모션 강도를 낮출 수 있고, `animationend` 이벤트 의존 코드도 깨지지 않는다.
diff --git a/research/motion/02-css-native.md b/research/motion/02-css-native.md
new file mode 100644
index 0000000..614c934
--- /dev/null
+++ b/research/motion/02-css-native.md
@@ -0,0 +1,1530 @@
+# 02. CSS 네이티브 모션 — 라이브러리 없이 되는 것 전부
+
+> **원칙: CSS로 되면 CSS로 한다.** 라이브러리는 CSS가 못 하는 일을 할 때만 꺼낸다.
+> CSS 애니메이션은 상당 부분 컴포지터 스레드에서 돌아가므로 메인 스레드가 막혀도 프레임을 떨어뜨리지 않는다.
+> 이 문서의 모든 코드는 **복사해서 그대로 동작**하는 완성 코드다.
+
+---
+
+## 0. 지원 현황 — 2026년 8월 기준 (webstatus.dev API 직접 조회)
+
+| 기능 | Baseline | Chrome | Firefox | Safari | 프로덕션 판단 |
+|---|---|---|---|---|---|
+| `prefers-reduced-motion` | **widely** (2020-01) | 74 | 63 | 10.1 | 무조건 쓴다 |
+| `linear()` 이징 | **widely** (2023-12) | 113 | 112 | 17.2 | 무조건 쓴다 |
+| `@property` (registered custom properties) | **newly** (2024-07) | 85 | 128 | 16.4 | 폴백 있으면 쓴다 |
+| `@starting-style` | **newly** (2024-08) | 117 | 129 | 17.5 | 폴백 있으면 쓴다 |
+| `transition-behavior: allow-discrete` | **newly** (2024-08) | 117 | 129 | 17.4 | 폴백 있으면 쓴다 |
+| Popover API | **newly** (2025-01) | 116 | 125 | 17 / iOS 18.3 | 쓴다 |
+| View Transitions (same-document) | **newly** (2025-10) | 111 | **144** | 18 | 점진 향상으로 쓴다 |
+| **Cross-document** View Transitions | **limited** | 126 | ✗ | 18.2 | 점진 향상 전용 (Firefox 미지원) |
+| **Scroll-driven animations** | **limited** | 115 | ✗(플래그) | **26** | `@supports` 가드 필수 |
+| `interpolate-size` / `calc-size()` | **limited** | 129 | ✗ | ✗ | Chromium 전용 향상 |
+| `content-visibility` | **newly** (2025-09) | 108 | 130 | 26 | 쓴다 |
+| Long Animation Frames API | **limited** | 123 | ✗ | ✗ | 계측 전용, Chromium만 |
+
+> **핵심 판단**: scroll-driven animations와 cross-document view transitions는 아직 Baseline이 아니다.
+> **반드시 `@supports` 가드를 씌우고, 미지원 브라우저에서도 콘텐츠가 정상적으로 보이게** 만든다.
+> 특히 스크롤 리빌은 미지원 브라우저에서 `opacity: 0`으로 남아 콘텐츠가 안 보이는 사고가 잦다.
+
+---
+
+## 1. transition 기본기 — 그러나 제대로
+
+### 1.1 비대칭 타이밍 (진입 ≠ 퇴장)
+
+가장 저렴하면서 가장 효과가 큰 기법. 상태 규칙에 `transition`을 다시 선언하면 그 상태로 갈 때의
+타이밍만 바뀐다.
+
+```css
+.card {
+  --lift: 0px;
+  translate: 0 var(--lift);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
+
+  /* 마우스가 떠날 때: 여유롭게 */
+  transition:
+    translate 340ms cubic-bezier(0.16, 1, 0.3, 1),
+    box-shadow 340ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.card:hover,
+.card:focus-visible {
+  --lift: -6px;
+  box-shadow: 0 12px 32px rgb(0 0 0 / 0.16);
+
+  /* 마우스가 들어올 때: 즉각적으로 */
+  transition:
+    translate 140ms cubic-bezier(0.16, 1, 0.3, 1),
+    box-shadow 140ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+```
+
+### 1.2 개별 transform 속성 (transform 충돌 해결)
+
+`translate`, `rotate`, `scale`은 독립 CSS 속성이다. 이걸 쓰면 서로 다른 타이밍으로 애니메이션할 수 있고,
+여러 규칙이 `transform`을 덮어쓰는 문제가 사라진다. (Baseline widely, 2022년~)
+
+```css
+.tile {
+  translate: 0 0;
+  rotate: 0deg;
+  scale: 1;
+
+  transition:
+    translate 200ms cubic-bezier(0.16, 1, 0.3, 1),
+    rotate    500ms cubic-bezier(0.34, 1.56, 0.64, 1),  /* 회전만 늦게, 오버슛 */
+    scale     200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.tile:hover {
+  translate: 0 -8px;
+  rotate: -2deg;
+  scale: 1.03;
+}
+```
+
+> **주의**: `transform` 단축 속성과 개별 속성을 같은 요소에 섞으면 예측이 어려워진다. **하나만 쓴다.**
+> 적용 순서는 항상 `translate → rotate → scale → transform` 이며, 이 순서는 CSS 선언 순서와 무관하다.
+
+### 1.3 "doom flicker" 방지
+
+호버 시 요소 자체가 움직이면 커서가 요소를 벗어나 → hover 해제 → 되돌아옴 → 다시 hover의
+무한 깜빡임이 생긴다. **트리거 요소와 움직이는 요소를 분리한다.**
+
+```html
+<button class="lift-btn"><span class="lift-btn__inner">호버해 보세요</span></button>
+```
+
+```css
+.lift-btn {
+  border: 0;
+  padding: 0;
+  background: none;
+  cursor: pointer;
+  /* 버튼 자체는 절대 움직이지 않는다 → 히트 영역 고정 */
+}
+
+.lift-btn__inner {
+  display: block;
+  padding: 12px 24px;
+  border-radius: 10px;
+  background: #111;
+  color: #fff;
+  translate: 0 0;
+  transition: translate 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.lift-btn:hover .lift-btn__inner,
+.lift-btn:focus-visible .lift-btn__inner {
+  translate: 0 -4px;
+  transition-duration: 120ms;
+}
+```
+
+### 1.4 드롭다운 hover 그레이스 기간
+
+메뉴 경계에서 커서가 살짝 벗어나도 바로 닫히지 않게 한다.
+
+```css
+.dropdown {
+  opacity: 0;
+  translate: 0 -6px;
+  pointer-events: none;
+  /* 닫힐 때: 300ms 유예 후 400ms에 걸쳐 사라짐 */
+  transition:
+    opacity 400ms ease,
+    translate 400ms ease;
+  transition-delay: 300ms;
+}
+
+.dropdown-wrapper:hover .dropdown,
+.dropdown-wrapper:focus-within .dropdown {
+  opacity: 1;
+  translate: 0 0;
+  pointer-events: auto;
+  /* 열릴 때: 즉시 */
+  transition-duration: 140ms;
+  transition-delay: 0ms;
+}
+```
+
+---
+
+## 2. `@starting-style` + `transition-behavior: allow-discrete`
+
+### 2.1 문제와 해결
+
+`display: none` ↔ `display: block`은 **이산(discrete) 속성**이라 전환되지 않는다.
+또 DOM에 새로 삽입된 요소는 "이전 스타일"이 없어서 transition이 시작되지 않는다.
+
+- `@starting-style` = 요소가 **처음 렌더링될 때의 출발 스타일**을 정의 (transition에만 적용, animation에는 무의미)
+- `transition-behavior: allow-discrete` = `display`, `overlay` 같은 이산 속성도 전환 목록에 포함시켜
+  **전환이 끝날 때까지 값을 유지**하게 함
+- `overlay`는 top layer(popover/dialog) 이탈을 애니메이션 종료까지 지연시키는 속성
+
+**규칙: `@starting-style` 블록은 원본 규칙 *뒤에* 놓는다.** 명시도가 같아 순서로 승부가 난다.
+
+### 2.2 완성 코드 — `<dialog>` 모달
+
+```html
+<button id="open-modal">모달 열기</button>
+
+<dialog id="demo-modal" class="modal" aria-labelledby="modal-title">
+  <h2 id="modal-title">정말 삭제할까요?</h2>
+  <p>이 작업은 되돌릴 수 없습니다.</p>
+  <form method="dialog" class="modal__actions">
+    <button value="cancel">취소</button>
+    <button value="confirm" class="is-primary">삭제</button>
+  </form>
+</dialog>
+```
+
+```css
+.modal {
+  /* 닫힌 상태 = 퇴장 애니메이션의 종착점 */
+  opacity: 0;
+  translate: 0 16px;
+  scale: 0.97;
+
+  border: 0;
+  border-radius: 16px;
+  padding: 28px 32px;
+  max-width: min(90vw, 420px);
+  background: Canvas;
+  color: CanvasText;
+  box-shadow: 0 24px 64px rgb(0 0 0 / 0.24);
+
+  transition:
+    opacity   195ms cubic-bezier(0.5, 0, 0.75, 0),
+    translate 195ms cubic-bezier(0.5, 0, 0.75, 0),
+    scale     195ms cubic-bezier(0.5, 0, 0.75, 0),
+    display   195ms allow-discrete,
+    overlay   195ms allow-discrete;
+}
+
+/* 열린 상태 */
+.modal[open] {
+  opacity: 1;
+  translate: 0 0;
+  scale: 1;
+
+  transition:
+    opacity   300ms cubic-bezier(0.16, 1, 0.3, 1),
+    translate 300ms cubic-bezier(0.16, 1, 0.3, 1),
+    scale     300ms cubic-bezier(0.16, 1, 0.3, 1),
+    display   300ms allow-discrete,
+    overlay   300ms allow-discrete;
+}
+
+/* 진입 애니메이션의 출발점 — 반드시 .modal[open] 규칙 뒤에 */
+@starting-style {
+  .modal[open] {
+    opacity: 0;
+    translate: 0 16px;
+    scale: 0.97;
+  }
+}
+
+/* 백드롭 */
+.modal::backdrop {
+  background: rgb(0 0 0 / 0);
+  backdrop-filter: blur(0px);
+  transition:
+    background-color 195ms ease,
+    backdrop-filter  195ms ease,
+    display          195ms allow-discrete,
+    overlay          195ms allow-discrete;
+}
+
+.modal[open]::backdrop {
+  background: rgb(0 0 0 / 0.5);
+  backdrop-filter: blur(4px);
+  transition-duration: 300ms;
+}
+
+@starting-style {
+  .modal[open]::backdrop {
+    background: rgb(0 0 0 / 0);
+    backdrop-filter: blur(0px);
+  }
+}
+
+.modal__actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 24px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal,
+  .modal[open] {
+    translate: 0 0;
+    scale: 1;
+    transition:
+      opacity 120ms linear,
+      display 120ms allow-discrete,
+      overlay 120ms allow-discrete;
+  }
+  @starting-style {
+    .modal[open] { opacity: 0; translate: 0 0; scale: 1; }
+  }
+  .modal::backdrop,
+  .modal[open]::backdrop {
+    backdrop-filter: none;
+    transition:
+      background-color 120ms linear,
+      display 120ms allow-discrete,
+      overlay 120ms allow-discrete;
+  }
+}
+```
+
+```js
+document.getElementById('open-modal').addEventListener('click', () => {
+  document.getElementById('demo-modal').showModal();
+});
+```
+
+### 2.3 완성 코드 — Popover API 툴팁
+
+```html
+<button popovertarget="tip-1" popovertargetaction="toggle">도움말</button>
+<div id="tip-1" popover="auto" class="tip" role="tooltip">
+  이 필드는 계정 복구에만 사용됩니다.
+</div>
+```
+
+```css
+.tip {
+  margin: 0;
+  inset: auto;
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+
+  max-width: 280px;
+  padding: 12px 16px;
+  border: 0;
+  border-radius: 10px;
+  background: #1a1a1a;
+  color: #fff;
+  font-size: 14px;
+  line-height: 1.5;
+
+  /* 닫힌 상태 */
+  opacity: 0;
+  translate: 0 6px;
+  scale: 0.96;
+
+  transition:
+    opacity   145ms cubic-bezier(0.5, 0, 0.75, 0),
+    translate 145ms cubic-bezier(0.5, 0, 0.75, 0),
+    scale     145ms cubic-bezier(0.5, 0, 0.75, 0),
+    display   145ms allow-discrete,
+    overlay   145ms allow-discrete;
+}
+
+.tip:popover-open {
+  opacity: 1;
+  translate: 0 0;
+  scale: 1;
+  transition-duration: 220ms;
+  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@starting-style {
+  .tip:popover-open {
+    opacity: 0;
+    translate: 0 6px;
+    scale: 0.96;
+  }
+}
+```
+
+### 2.4 완성 코드 — DOM에 새로 삽입되는 리스트 항목
+
+```html
+<ul id="todo-list" class="todo"></ul>
+<button id="add-todo">항목 추가</button>
+```
+
+```css
+.todo { list-style: none; margin: 0; padding: 0; }
+
+.todo li {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  translate: 0 0;
+  overflow: hidden;
+
+  transition:
+    opacity   180ms ease,
+    translate 180ms ease,
+    grid-template-rows 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.todo li > .todo__row {
+  min-height: 0;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgb(0 0 0 / 0.08);
+}
+
+/* 삽입 시작점 — li 규칙 뒤에 배치 */
+@starting-style {
+  .todo li {
+    opacity: 0;
+    translate: -12px 0;
+    grid-template-rows: 0fr;
+  }
+}
+
+/* 제거 직전에 붙이는 클래스 */
+.todo li.is-leaving {
+  opacity: 0;
+  translate: 12px 0;
+  grid-template-rows: 0fr;
+  transition-duration: 160ms;
+}
+```
+
+```js
+const list = document.getElementById('todo-list');
+let counter = 0;
+
+document.getElementById('add-todo').addEventListener('click', () => {
+  const li = document.createElement('li');
+  li.innerHTML = `
+    <div class="todo__row">
+      항목 ${++counter}
+      <button type="button" class="todo__remove" aria-label="삭제">&times;</button>
+    </div>`;
+  list.append(li);
+});
+
+list.addEventListener('click', (e) => {
+  const btn = e.target.closest('.todo__remove');
+  if (!btn) return;
+  const li = btn.closest('li');
+  li.classList.add('is-leaving');
+  // transitionend 대신 이벤트 이름을 확인해 조기 종료 방지
+  li.addEventListener('transitionend', function onEnd(ev) {
+    if (ev.propertyName !== 'grid-template-rows') return;
+    li.removeEventListener('transitionend', onEnd);
+    li.remove();
+  });
+});
+```
+
+> **`grid-template-rows: 0fr → 1fr` 트릭**: `height: auto`를 애니메이션하는 가장 호환성 좋은 방법.
+> 부모를 `display: grid`로 두고 행을 `0fr ↔ 1fr`로 전환, 자식에 `min-height: 0`. Baseline widely.
+> Chromium 전용인 `interpolate-size`보다 훨씬 안전하다 (7장 참조).
+
+---
+
+## 3. `@property` — 애니메이션 불가능하던 것을 가능하게
+
+일반 CSS 변수는 타입이 없어서 브라우저가 "0deg에서 360deg 사이"를 보간하지 못한다.
+`@property`로 타입을 등록하면 **그라디언트 각도, 색상 정지점, 임의의 숫자**가 애니메이션된다.
+
+### 3.1 회전하는 그라디언트 테두리
+
+```html
+<div class="glow-card">
+  <div class="glow-card__content">
+    <h3>Pro 플랜</h3>
+    <p>테두리만 회전합니다. 내용은 정지 상태입니다.</p>
+  </div>
+</div>
+```
+
+```css
+@property --glow-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+.glow-card {
+  --glow-angle: 0deg;
+  position: relative;
+  padding: 2px;                 /* 테두리 두께 */
+  border-radius: 18px;
+  background: conic-gradient(
+    from var(--glow-angle),
+    #7c3aed, #ec4899, #f59e0b, #7c3aed
+  );
+  animation: glow-spin 6s linear infinite;
+}
+
+@keyframes glow-spin {
+  to { --glow-angle: 360deg; }
+}
+
+.glow-card__content {
+  border-radius: 16px;
+  padding: 28px;
+  background: #0b0b0f;
+  color: #f4f4f5;
+}
+
+/* @property 미지원 시: 회전 대신 정적 그라디언트 */
+@supports not (background: conic-gradient(from 0deg, red, blue)) {
+  .glow-card { background: linear-gradient(135deg, #7c3aed, #ec4899); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .glow-card { animation: none; --glow-angle: 135deg; }
+}
+```
+
+### 3.2 마우스를 따라오는 스포트라이트 (JS는 값만 넘긴다)
+
+```html
+<div class="spotlight" id="spotlight">
+  <h3>커서를 올려보세요</h3>
+  <p>JS는 좌표만 CSS 변수로 넘기고, 보간은 CSS가 한다.</p>
+</div>
+```
+
+```css
+@property --mx { syntax: '<length>'; inherits: false; initial-value: 50%; }
+@property --my { syntax: '<length>'; inherits: false; initial-value: 50%; }
+@property --spot-opacity { syntax: '<number>'; inherits: false; initial-value: 0; }
+
+.spotlight {
+  position: relative;
+  padding: 48px;
+  border-radius: 16px;
+  background: #0f0f14;
+  color: #e4e4e7;
+  overflow: hidden;
+  isolation: isolate;
+  transition: --spot-opacity 260ms ease;
+}
+
+.spotlight::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: radial-gradient(
+    240px circle at var(--mx) var(--my),
+    rgb(124 58 237 / 0.35),
+    transparent 70%
+  );
+  opacity: var(--spot-opacity);
+  /* --mx/--my 자체를 transition하면 커서를 부드럽게 따라온다 */
+  transition: --mx 120ms linear, --my 120ms linear;
+}
+
+.spotlight:hover { --spot-opacity: 1; }
+
+@media (prefers-reduced-motion: reduce) {
+  .spotlight::before { transition: none; }
+}
+```
+
+```js
+const spot = document.getElementById('spotlight');
+spot.addEventListener('pointermove', (e) => {
+  const r = spot.getBoundingClientRect();
+  spot.style.setProperty('--mx', `${e.clientX - r.left}px`);
+  spot.style.setProperty('--my', `${e.clientY - r.top}px`);
+});
+```
+
+### 3.3 순수 CSS 숫자 카운트업
+
+```html
+<span class="counter" style="--target: 1284" role="img" aria-label="1284명">
+  <span class="counter__num"></span>
+</span>
+```
+
+```css
+@property --count {
+  syntax: '<integer>';
+  inherits: false;
+  initial-value: 0;
+}
+
+.counter {
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  font-size: 2.5rem;
+}
+
+.counter__num {
+  counter-reset: num var(--count);
+  animation: count-up 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.counter__num::after {
+  content: counter(num);
+}
+
+@keyframes count-up {
+  from { --count: 0; }
+  to   { --count: var(--target); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .counter__num { animation: none; --count: var(--target); }
+}
+```
+
+> **접근성 필수**: 카운트업은 시각 효과일 뿐이므로 부모에 `aria-label`로 최종 값을 명시하고
+> 애니메이션되는 요소 자체는 스크린리더에 노출되지 않게 한다(위 코드는 `::after` content라
+> 대부분의 스크린리더가 읽지 않지만, 확실히 하려면 `.counter__num`에 `aria-hidden="true"`).
+
+### 3.4 `@property` 성능 주의사항
+
+CSS 변수 변경은 **paint(그리고 종종 style recalc)를 유발**한다. 특히 `:root`나 상위 요소에 선언된
+변수를 매 프레임 바꾸면 **하위 트리 전체의 스타일이 재계산**된다. 실측 사례로 1300개 요소에서
+프레임당 8ms가 소요된 보고가 있다(120fps 예산 전체).
+
+**규칙**
+1. `@property`는 항상 `inherits: false`로 선언한다 (상속을 끊어 재계산 범위를 좁힌다).
+2. 변수는 **사용하는 요소에 최대한 가깝게** 선언한다. `:root`에 애니메이션용 변수를 두지 않는다.
+3. 매 프레임 바뀌는 변수는 5개 이하 요소에만 적용한다.
+
+---
+
+## 4. CSS 스크롤 구동 애니메이션 (Scroll-driven Animations)
+
+**가장 중요한 사실: 이건 컴포지터 스레드에서 돈다.** 메인 스레드가 막혀도 스크롤 애니메이션은
+끊기지 않는다. IntersectionObserver + JS보다 근본적으로 우월하다.
+**단, 아직 Baseline이 아니다(Firefox 미지원). `@supports` 가드가 필수다.**
+
+### 4.1 두 종류의 타임라인
+
+| 종류 | 함수 | 무엇을 추적하나 | 대표 용도 |
+|---|---|---|---|
+| **Scroll Progress Timeline** | `scroll()` | 스크롤 컨테이너의 스크롤 진행률 (0~100%) | 읽기 진행 바, 배경 시프트 |
+| **View Progress Timeline** | `view()` | **요소 자신**이 스크롤포트를 지나가는 진행률 | 등장 리빌, 시차, 카드 스택 |
+
+### 4.2 `scroll()` — 읽기 진행 바
+
+```html
+<div class="progress" role="progressbar" aria-label="읽기 진행률"></div>
+<article>…긴 글…</article>
+```
+
+```css
+.progress {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline: 0;
+  height: 3px;
+  background: #7c3aed;
+  transform-origin: 0 50%;
+  scale: 0 1;
+  z-index: 100;
+}
+
+@supports (animation-timeline: scroll()) {
+  .progress {
+    animation: progress-grow linear both;
+    animation-timeline: scroll(root block);
+  }
+  @keyframes progress-grow {
+    from { scale: 0 1; }
+    to   { scale: 1 1; }
+  }
+}
+
+/* 미지원 브라우저: 바를 아예 숨긴다 (0 스케일로 남지 않게) */
+@supports not (animation-timeline: scroll()) {
+  .progress { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress { display: none; }
+}
+```
+
+`scroll()` 인자: `scroll(<scroller> <axis>)`
+- `<scroller>`: `nearest`(기본) | `root` | `self`
+- `<axis>`: `block`(기본) | `inline` | `y` | `x`
+
+### 4.3 `view()` — 스크롤 리빌 (가장 자주 쓰는 패턴)
+
+```html
+<section class="reveal-group">
+  <div class="reveal">항목 1</div>
+  <div class="reveal">항목 2</div>
+  <div class="reveal">항목 3</div>
+</section>
+```
+
+```css
+.reveal {
+  padding: 48px;
+  border-radius: 14px;
+  background: #f4f4f5;
+}
+
+@supports (animation-timeline: view()) {
+  .reveal {
+    animation: reveal-in linear both;
+    animation-timeline: view();
+    /* 요소가 뷰포트에 20% 들어왔을 때 시작, 40% 들어왔을 때 끝 */
+    animation-range: entry 20% cover 40%;
+  }
+
+  @keyframes reveal-in {
+    from { opacity: 0; translate: 0 32px; }
+    to   { opacity: 1; translate: 0 0; }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .reveal { animation: none !important; opacity: 1; translate: 0 0; }
+}
+```
+
+> **`both` 필수**: `animation-fill-mode: both`가 없으면 범위 밖에서 원래 스타일로 돌아가 깜빡인다.
+> `animation: reveal-in linear both`에서 `both`가 그것이다.
+> **`animation-duration`은 `auto`가 기본**이라 명시하지 않는다. 초를 넣으면 무시되거나 오작동한다.
+
+### 4.4 `animation-range` — 범위 이름 완전 정리
+
+`view()` 타임라인에는 5개의 명명된 범위가 있다. 요소가 스크롤포트를 통과하는 과정을 구간으로 나눈 것이다.
+
+| 범위 이름 | 0% 시점 | 100% 시점 |
+|---|---|---|
+| `cover` | 요소가 스크롤포트에 **닿기 시작** | 요소가 스크롤포트를 **완전히 벗어남** |
+| `entry` | 요소가 닿기 시작 | 요소가 **완전히 들어옴** |
+| `exit` | 요소가 **나가기 시작** | 요소가 완전히 벗어남 |
+| `contain` | 요소가 스크롤포트에 **완전히 담김** (요소가 뷰포트보다 작을 때) | 담긴 상태가 끝남 |
+| `entry-crossing` / `exit-crossing` | 요소가 시작/끝 경계를 **가로지르는** 구간 | — |
+
+```css
+/* 들어올 때 페이드인, 나갈 때 페이드아웃 — 키프레임에 범위 이름을 직접 쓴다 */
+@keyframes in-and-out {
+  entry 0%   { opacity: 0; translate: 0 40px; }
+  entry 100% { opacity: 1; translate: 0 0; }
+  exit  0%   { opacity: 1; translate: 0 0; }
+  exit  100% { opacity: 0; translate: 0 -40px; }
+}
+
+@supports (animation-timeline: view()) {
+  .fly-item {
+    animation: in-and-out linear both;
+    animation-timeline: view();
+  }
+}
+```
+
+### 4.5 명명 타임라인 — 다른 요소의 스크롤에 반응시키기
+
+```html
+<div class="gallery">
+  <div class="gallery__track">
+    <img src="1.jpg" alt=""><img src="2.jpg" alt=""><img src="3.jpg" alt="">
+  </div>
+  <div class="gallery__bar"><span></span></div>
+</div>
+```
+
+```css
+.gallery__track {
+  display: flex;
+  gap: 16px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-timeline: --gallery inline;   /* 이름 있는 스크롤 타임라인 생성 */
+}
+
+.gallery__track img {
+  flex: 0 0 80%;
+  scroll-snap-align: center;
+  border-radius: 12px;
+}
+
+.gallery {
+  /* 형제 요소에게 타임라인을 보이게 하려면 공통 조상에 timeline-scope */
+  timeline-scope: --gallery;
+}
+
+.gallery__bar {
+  height: 4px;
+  background: rgb(0 0 0 / 0.1);
+  border-radius: 2px;
+  margin-top: 12px;
+  overflow: hidden;
+}
+
+.gallery__bar span {
+  display: block;
+  height: 100%;
+  background: #111;
+  transform-origin: 0 50%;
+  scale: 0 1;
+}
+
+@supports (animation-timeline: --gallery) {
+  .gallery__bar span {
+    animation: bar-grow linear both;
+    animation-timeline: --gallery;
+  }
+  @keyframes bar-grow {
+    from { scale: 0 1; }
+    to   { scale: 1 1; }
+  }
+}
+```
+
+`timeline-scope`가 핵심이다. 기본적으로 명명 타임라인은 **자손에게만** 보인다.
+형제/사촌에게 보이게 하려면 공통 조상에 `timeline-scope: --name`을 선언한다.
+
+### 4.6 시차(parallax) 배경 — 완성 코드
+
+```html
+<section class="hero">
+  <div class="hero__bg"></div>
+  <div class="hero__content"><h1>Parallax</h1></div>
+</section>
+```
+
+```css
+.hero {
+  position: relative;
+  min-height: 100svh;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  view-timeline: --hero block;   /* 자기 자신을 뷰 타임라인으로 */
+}
+
+.hero__bg {
+  position: absolute;
+  inset: -20% 0;                 /* 이동 여유분 확보 */
+  background: url('/hero.jpg') center / cover no-repeat;
+  will-change: translate;
+}
+
+@supports (animation-timeline: view()) {
+  .hero__bg {
+    animation: parallax linear both;
+    animation-timeline: --hero;
+    animation-range: cover 0% cover 100%;
+  }
+  @keyframes parallax {
+    from { translate: 0 -10%; }
+    to   { translate: 0 10%; }
+  }
+}
+
+.hero__content { position: relative; z-index: 1; }
+
+@media (prefers-reduced-motion: reduce) {
+  .hero__bg { animation: none; translate: 0 0; inset: 0; }
+}
+```
+
+> **시차는 전정기관 장애의 1순위 유발 요인**이다. `prefers-reduced-motion`에서 반드시 완전히 끈다.
+> 이동 폭은 뷰포트 높이의 **10~15% 이내**로 제한한다.
+
+### 4.7 스티키 헤더 축소
+
+```css
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: rgb(255 255 255 / 0.9);
+  backdrop-filter: blur(8px);
+  --header-pad: 24px;
+  padding-block: var(--header-pad);
+  box-shadow: 0 0 0 rgb(0 0 0 / 0);
+}
+
+@property --header-pad {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 24px;
+}
+
+@supports (animation-timeline: scroll()) {
+  .site-header {
+    animation: header-shrink linear both;
+    animation-timeline: scroll(root block);
+    /* 문서 처음 200px 스크롤 동안만 진행 */
+    animation-range: 0 200px;
+  }
+  @keyframes header-shrink {
+    to {
+      --header-pad: 10px;
+      box-shadow: 0 4px 16px rgb(0 0 0 / 0.1);
+    }
+  }
+}
+```
+
+### 4.8 스택되는 카드 (stacking cards)
+
+```html
+<ul class="stack">
+  <li class="stack__card"><h3>01</h3></li>
+  <li class="stack__card"><h3>02</h3></li>
+  <li class="stack__card"><h3>03</h3></li>
+  <li class="stack__card"><h3>04</h3></li>
+</ul>
+```
+
+```css
+.stack {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  /* 카드 개수를 CSS에 알려준다 */
+  --cards: 4;
+  --card-h: 60vh;
+  --gap: 24px;
+}
+
+.stack__card {
+  position: sticky;
+  top: 12vh;
+  height: var(--card-h);
+  margin-bottom: var(--gap);
+  border-radius: 20px;
+  padding: 40px;
+  background: #18181b;
+  color: #fafafa;
+  transform-origin: 50% 0%;
+}
+
+@supports (animation-timeline: view()) {
+  .stack__card {
+    animation: card-shrink linear both;
+    animation-timeline: view();
+    /* 카드가 뷰포트를 빠져나가는 동안 축소 */
+    animation-range: exit-crossing 0% exit-crossing 100%;
+  }
+  @keyframes card-shrink {
+    to { scale: 0.9; filter: brightness(0.6); }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .stack__card { animation: none; position: static; }
+}
+```
+
+### 4.9 언제 쓰고 언제 쓰지 말아야 하나
+
+| 쓴다 | 쓰지 않는다 |
+|---|---|
+| 진행 바, 스크롤 인디케이터 | Firefox 지원이 요구사항인 핵심 기능 |
+| 요소 등장 리빌 (1회성) | 요소 **핀 고정 + 복잡한 시퀀스** → ScrollTrigger가 낫다 |
+| 시차, 배경 시프트 | 스크롤 위치에 따라 **DOM을 바꿔야** 할 때 (CSS는 스타일만 바꾼다) |
+| 헤더 축소/색 변화 | 스크롤 방향에 따라 다르게 동작해야 할 때 (CSS는 방향 인식 불가) |
+| 수평 캐러셀 진행 표시 | 스크롤 스냅 후 콜백이 필요할 때 |
+
+---
+
+## 5. View Transitions API
+
+### 5.1 같은 문서 (SPA / 상태 변화)
+
+```js
+/**
+ * DOM을 바꾸는 함수를 view transition으로 감싼다.
+ * 미지원 브라우저에서는 그냥 즉시 바뀐다 → 점진 향상.
+ */
+function updateWithTransition(updateDOM) {
+  if (!document.startViewTransition) {
+    updateDOM();
+    return { finished: Promise.resolve() };
+  }
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    updateDOM();
+    return { finished: Promise.resolve() };
+  }
+  return document.startViewTransition(updateDOM);
+}
+
+// 사용 예: 리스트 필터링
+document.querySelectorAll('[data-filter]').forEach((btn) => {
+  btn.addEventListener('click', () => {
+    updateWithTransition(() => {
+      const key = btn.dataset.filter;
+      document.querySelectorAll('.card').forEach((card) => {
+        card.hidden = key !== 'all' && card.dataset.category !== key;
+      });
+    });
+  });
+});
+```
+
+```css
+/* 각 카드에 고유 이름을 주면 위치 이동이 자동 애니메이션된다 */
+.card { view-transition-name: attr(data-id type(<custom-ident>)); }
+
+/* attr() 타입 지원이 불확실하면 JS로 부여 */
+::view-transition-group(*) {
+  animation-duration: 320ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+::view-transition-old(root) {
+  animation: 180ms cubic-bezier(0.5, 0, 0.75, 0) both vt-fade-out;
+}
+::view-transition-new(root) {
+  animation: 260ms cubic-bezier(0.16, 1, 0.3, 1) both vt-fade-in;
+}
+
+@keyframes vt-fade-out { to   { opacity: 0; } }
+@keyframes vt-fade-in  { from { opacity: 0; } }
+```
+
+```js
+// view-transition-name을 JS로 안전하게 부여 (이름 중복은 즉시 에러가 된다)
+document.querySelectorAll('.card').forEach((card) => {
+  card.style.viewTransitionName = `card-${card.dataset.id}`;
+});
+```
+
+### 5.2 의사 요소 트리 구조
+
+```
+::view-transition                       (오버레이 루트, 뷰포트 전체 덮음)
+└── ::view-transition-group(name)       (위치·크기를 애니메이션하는 컨테이너)
+    └── ::view-transition-image-pair(name)  (isolation: isolate)
+        ├── ::view-transition-old(name)     (이전 상태 스냅샷)
+        └── ::view-transition-new(name)     (새 상태의 라이브 표현)
+```
+
+기본 애니메이션:
+- `group`: 위치/크기를 old → new로 보간
+- `image-pair`: old는 페이드아웃, new는 페이드인 (크로스페이드)
+
+### 5.3 shared element 전환 (썸네일 → 상세)
+
+```css
+/* 목록의 썸네일과 상세의 큰 이미지에 같은 이름을 준다 */
+.thumb[data-id="42"] img,
+.detail[data-id="42"] img {
+  view-transition-name: hero-42;
+}
+
+/* 스냅샷 왜곡 방지 — 기본 object-fit이 fill이라 가로세로비가 깨진다 */
+::view-transition-old(hero-42),
+::view-transition-new(hero-42) {
+  object-fit: cover;
+  height: 100%;
+  overflow: clip;
+}
+
+::view-transition-group(hero-42) {
+  animation-duration: 420ms;
+  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+}
+```
+
+> **가장 흔한 사고 3가지**
+> 1. **같은 시점에 같은 `view-transition-name`이 2개 존재** → 전환 전체가 즉시 실패한다.
+>    필터링/정렬 UI에서 특히 자주 발생. `hidden` 처리한 요소도 이름을 갖고 있으면 카운트된다.
+> 2. **`object-fit: fill` 기본값** → 이미지가 늘어난다. 위 코드처럼 명시적으로 덮어쓴다.
+> 3. **`position: fixed` 요소** → 스냅샷 좌표계가 달라 이상하게 움직인다. `view-transition-name: none`으로 제외.
+
+### 5.4 `view-transition-class`와 `types`
+
+```css
+/* 여러 요소에 공통 전환 스타일 적용 */
+.card { view-transition-class: card-item; }
+
+::view-transition-group(.card-item) {
+  animation-duration: 300ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+```
+
+```js
+// 전환의 "종류"를 지정해 CSS에서 분기
+const dir = newIndex > oldIndex ? 'forwards' : 'backwards';
+document.startViewTransition({
+  update: () => renderSlide(newIndex),
+  types: [`slide-${dir}`],
+});
+```
+
+```css
+html:active-view-transition-type(slide-forwards) {
+  &::view-transition-old(root) {
+    animation: 300ms cubic-bezier(0.5, 0, 0.75, 0) both slide-out-left;
+  }
+  &::view-transition-new(root) {
+    animation: 300ms cubic-bezier(0.16, 1, 0.3, 1) both slide-in-right;
+  }
+}
+
+html:active-view-transition-type(slide-backwards) {
+  &::view-transition-old(root) {
+    animation: 300ms cubic-bezier(0.5, 0, 0.75, 0) both slide-out-right;
+  }
+  &::view-transition-new(root) {
+    animation: 300ms cubic-bezier(0.16, 1, 0.3, 1) both slide-in-left;
+  }
+}
+
+@keyframes slide-out-left  { to   { translate: -30% 0; opacity: 0; } }
+@keyframes slide-in-right  { from { translate:  30% 0; opacity: 0; } }
+@keyframes slide-out-right { to   { translate:  30% 0; opacity: 0; } }
+@keyframes slide-in-left   { from { translate: -30% 0; opacity: 0; } }
+```
+
+### 5.5 문서 간 전환 (MPA)
+
+**두 페이지 모두**에 아래 CSS가 있어야 한다. 같은 오리진이어야 한다.
+
+```css
+@view-transition {
+  navigation: auto;
+}
+```
+
+> **폐기된 문법 주의**: `<meta name="view-transition" content="same-origin">`은 더 이상 동작하지 않는다.
+> 콘솔 경고 없이 조용히 실패하므로 오래된 튜토리얼을 복사하지 않는다.
+
+```js
+// 나가는 페이지: 스냅샷 직전에 이름을 부여
+window.addEventListener('pageswap', (event) => {
+  if (!event.viewTransition) return;
+
+  const targetUrl = new URL(event.activation.entry.url);
+  const id = targetUrl.searchParams.get('id');
+  if (id) {
+    const thumb = document.querySelector(`.thumb[data-id="${id}"] img`);
+    if (thumb) thumb.style.viewTransitionName = 'shared-hero';
+  }
+
+  // 스냅샷 후 즉시 정리 (다음 방문 시 중복 방지)
+  event.viewTransition.finished.finally(() => {
+    document.querySelectorAll('[style*="view-transition-name"]').forEach((el) => {
+      el.style.viewTransitionName = '';
+    });
+  });
+});
+
+// 들어오는 페이지: 렌더 직전에 이름을 부여
+window.addEventListener('pagereveal', (event) => {
+  if (!event.viewTransition) return;
+
+  const from = navigation.activation?.from?.url;
+  if (from && new URL(from).pathname === '/list') {
+    const hero = document.querySelector('.detail img');
+    if (hero) hero.style.viewTransitionName = 'shared-hero';
+  }
+
+  // 4초 타임아웃 등 실패를 감지
+  event.viewTransition.finished.catch((err) => {
+    console.warn('view transition aborted:', err.name, err.message);
+  });
+});
+```
+
+**MPA 전환의 함정**
+1. **4초 타임아웃**: 새 페이지가 4초 안에 렌더되지 않으면 전환이 조용히 취소된다.
+   네트워크 지연이 이 시간에 포함된다.
+2. **렌더 블로킹으로 깜빡임 방지**: 새 페이지의 핵심 요소가 준비되기 전에 렌더되면 전환이 어색해진다.
+   ```html
+   <link rel="expect" href="#hero" blocking="render">
+   ```
+3. **스크롤 위치**: 브라우저가 스크롤 복원을 처리하지만, 전환 애니메이션과 겹치면 어색하다.
+   상세 페이지로 갈 때는 `history.scrollRestoration = 'manual'`로 두고 명시적으로 최상단으로 보낸다.
+
+### 5.6 전환 중 스크롤 위치 처리 (SPA)
+
+```js
+/**
+ * SPA 라우터에서 view transition과 스크롤 복원을 함께 처리한다.
+ * 핵심: DOM 업데이트 콜백 안에서 스크롤을 옮겨야 스냅샷이 맞는다.
+ */
+const scrollPositions = new Map();
+
+async function navigate(url, { isBack = false } = {}) {
+  scrollPositions.set(location.href, window.scrollY);
+
+  const html = await fetch(url).then((r) => r.text());
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+
+  const apply = () => {
+    document.querySelector('#app').replaceChildren(
+      ...doc.querySelector('#app').childNodes
+    );
+    document.title = doc.title;
+    history[isBack ? 'replaceState' : 'pushState']({}, '', url);
+
+    // 스냅샷이 찍히기 전에 스크롤을 확정한다
+    const y = isBack ? (scrollPositions.get(url) ?? 0) : 0;
+    window.scrollTo({ top: y, behavior: 'instant' });
+  };
+
+  if (!document.startViewTransition ||
+      matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    apply();
+    return;
+  }
+  await document.startViewTransition(apply).finished;
+}
+```
+
+### 5.7 `prefers-reduced-motion` 대응
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  /* 이동은 죽이고 크로스페이드만 남긴다 */
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation-duration: 120ms !important;
+    animation-timing-function: linear !important;
+  }
+  ::view-transition-group(*) {
+    animation-name: none !important;   /* 위치/크기 보간 제거 */
+  }
+}
+```
+
+---
+
+## 6. 스크롤 관련 CSS 유틸리티
+
+### 6.1 `scroll-behavior`와 앵커 이동
+
+```css
+/* 사용자 선호를 존중하는 부드러운 스크롤 — 이게 정답이다 */
+@media (prefers-reduced-motion: no-preference) {
+  :root { scroll-behavior: smooth; }
+}
+
+/* 고정 헤더 아래로 앵커가 숨는 문제 해결 */
+:target,
+[id] { scroll-margin-block-start: 96px; }
+```
+
+> `scroll-behavior: smooth`는 브라우저 네이티브다. Lenis 같은 라이브러리를 도입하기 전에
+> **이걸로 충분한지 먼저 확인한다.** 대부분의 경우 충분하다.
+
+### 6.2 스크롤 스냅
+
+```css
+.snap-scroller {
+  scroll-snap-type: y mandatory;
+  overflow-y: auto;
+  height: 100svh;
+  overscroll-behavior-y: contain;   /* 부모로 스크롤 전파 차단 */
+}
+
+.snap-scroller > section {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;         /* 빠르게 스와이프해도 한 칸씩 */
+  min-height: 100svh;
+}
+```
+
+> **`mandatory` vs `proximity`**: `mandatory`는 반드시 스냅되어 스크롤을 강제로 통제한다.
+> 콘텐츠가 뷰포트보다 긴 섹션에서 `mandatory`를 쓰면 **내용을 읽을 수 없는 상태에 갇힌다**.
+> 확신이 없으면 `proximity`를 쓴다.
+
+---
+
+## 7. `height: auto` 애니메이션 — 3가지 방법 비교
+
+| 방법 | 지원 | 장점 | 단점 |
+|---|---|---|---|
+| **`grid-template-rows: 0fr → 1fr`** | Baseline widely | 순수 CSS, 모든 브라우저 | 마크업 한 겹 추가, `min-height: 0` 필요 |
+| `interpolate-size: allow-keywords` | Chromium 129+ | 가장 간결 | Firefox/Safari 미지원 |
+| JS로 `scrollHeight` 측정 후 px 지정 | 전부 | 완전한 제어 | 레이아웃 강제 계산(리플로우), 코드 증가 |
+
+**권장: `grid-template-rows` 방식을 기본으로, `interpolate-size`를 점진 향상으로 겹친다.**
+
+```html
+<div class="accordion">
+  <button class="accordion__trigger" aria-expanded="false" aria-controls="panel-1">
+    섹션 제목
+  </button>
+  <div class="accordion__panel" id="panel-1" hidden>
+    <div class="accordion__inner">
+      <p>패널 내용이 여기 들어갑니다.</p>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.accordion__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.accordion__panel[data-open] {
+  grid-template-rows: 1fr;
+}
+
+.accordion__inner {
+  min-height: 0;      /* 필수: grid item의 기본 min-height는 auto */
+  overflow: hidden;
+}
+
+.accordion__inner > * { padding-block: 12px; }
+
+/* Chromium 향상: 더 정확한 intrinsic 보간 */
+@supports (interpolate-size: allow-keywords) {
+  :root { interpolate-size: allow-keywords; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .accordion__panel { transition-duration: 1ms; }
+}
+```
+
+```js
+document.querySelectorAll('.accordion__trigger').forEach((trigger) => {
+  const panel = document.getElementById(trigger.getAttribute('aria-controls'));
+
+  trigger.addEventListener('click', () => {
+    const willOpen = trigger.getAttribute('aria-expanded') === 'false';
+    trigger.setAttribute('aria-expanded', String(willOpen));
+
+    if (willOpen) {
+      panel.hidden = false;
+      // hidden 해제 후 리플로우를 강제해야 transition이 발동한다
+      void panel.offsetHeight;
+      panel.dataset.open = '';
+    } else {
+      delete panel.dataset.open;
+      panel.addEventListener('transitionend', function onEnd(e) {
+        if (e.propertyName !== 'grid-template-rows') return;
+        panel.removeEventListener('transitionend', onEnd);
+        if (trigger.getAttribute('aria-expanded') === 'false') panel.hidden = true;
+      });
+    }
+  });
+});
+```
+
+---
+
+## 8. 가변 폰트 축 애니메이션
+
+```css
+@font-face {
+  font-family: 'Inter Var';
+  src: url('/fonts/InterVariable.woff2') format('woff2-variations');
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+/* 1) 표준 속성으로 애니메이션 — 브라우저 최적화가 붙어 이 쪽이 낫다 */
+.weight-hover {
+  font-family: 'Inter Var', system-ui, sans-serif;
+  font-weight: 400;
+  transition: font-weight 260ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.weight-hover:hover { font-weight: 750; }
+
+/* 2) 커스텀 축은 font-variation-settings로 — 단, 전부 한 줄에 나열해야 한다 */
+@property --wght { syntax: '<number>'; inherits: false; initial-value: 400; }
+@property --slnt { syntax: '<number>'; inherits: false; initial-value: 0; }
+
+.vf-axis {
+  font-family: 'Inter Var', system-ui, sans-serif;
+  font-variation-settings: 'wght' var(--wght), 'slnt' var(--slnt);
+  transition: --wght 300ms cubic-bezier(0.16, 1, 0.3, 1),
+              --slnt 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.vf-axis:hover { --wght: 800; --slnt: -8; }
+
+@media (prefers-reduced-motion: reduce) {
+  .weight-hover, .vf-axis { transition: none; }
+}
+```
+
+**가변 폰트 애니메이션의 비용과 판단 기준**
+
+| 항목 | 사실 |
+|---|---|
+| 합성 가능? | **아니오.** 글리프를 다시 래스터화하므로 매 프레임 paint 발생 |
+| 레이아웃 영향? | **있음.** `wght`, `wdth` 변화는 글자 폭을 바꿔 **리플로우**를 유발한다 |
+| 안전한 사용 | 짧은 텍스트(제목, 버튼 라벨, 로고), 1회성 전환, 소수 요소 |
+| 위험한 사용 | 본문 단락, 리스트 전체, 스크롤에 물린 지속 애니메이션 |
+| 완화 | 컨테이너에 `contain: layout;` 또는 `font-variation-settings` 대신 `font-synthesis` 없이 고정폭 축(`wdth` 고정)만 사용 |
+
+> **권장**: `font-variation-settings`를 매 프레임 바꾸는 스크롤 연동 효과는 만들지 않는다.
+> 호버·포커스 같은 **이산적 상태 변화**에만 쓴다. 리플로우를 막으려면
+> 텍스트 컨테이너에 고정 폭을 주거나 `text-wrap: balance`와 함께 쓰지 않는다.
+
+---
+
+## 9. SVG 필터 파라미터 애니메이션 — CSS / SMIL / JS 비교
+
+### 9.1 세 방법
+
+| 방법 | 코드 | 장점 | 단점 | 판정 |
+|---|---|---|---|---|
+| **CSS + `@property`** | `@property --scale` + `feDisplacementMap scale="…"` 는 **불가** (SVG 속성은 CSS 변수로 직접 못 받음) | — | SVG 프레젠테이션 속성이 아닌 필터 primitive 속성은 CSS로 제어 불가 | 필터 **primitive 속성**에는 사용 불가 |
+| **SMIL `<animate>`** | 선언적, 마크업 안에 완결 | 코드가 짧고 JS 불필요 | Chrome이 한때 폐기 예고했다가 철회. IE 미지원(무관). 제어(일시정지/역재생)가 어렵고 `prefers-reduced-motion` 대응이 번거로움 | 단순 루프에는 OK |
+| **JS로 속성 직접 갱신** | `filter.setAttribute('scale', v)` | 완전한 제어, reduced-motion 대응 용이, GSAP `attr` 플러그인과 궁합 | 메인 스레드 부하 | **프로덕션 권장** |
+
+### 9.2 완성 코드 — 호버 시 물결 왜곡 (JS 제어)
+
+```html
+<div class="distort">
+  <img src="/photo.jpg" alt="" class="distort__img">
+  <svg width="0" height="0" aria-hidden="true" focusable="false">
+    <filter id="wobble" x="-20%" y="-20%" width="140%" height="140%">
+      <feTurbulence
+        id="wobble-noise"
+        type="fractalNoise"
+        baseFrequency="0.008 0.014"
+        numOctaves="2"
+        seed="7"
+        result="noise" />
+      <feDisplacementMap
+        id="wobble-disp"
+        in="SourceGraphic"
+        in2="noise"
+        scale="0"
+        xChannelSelector="R"
+        yChannelSelector="G" />
+    </filter>
+  </svg>
+</div>
+```
+
+```css
+.distort { display: inline-block; overflow: hidden; border-radius: 12px; }
+.distort__img {
+  display: block;
+  max-width: 100%;
+  filter: url(#wobble);
+  /* 필터가 걸린 요소는 자체 레이어를 갖는다 — 크기를 작게 유지할 것 */
+}
+```
+
+```js
+const disp = document.getElementById('wobble-disp');
+const noise = document.getElementById('wobble-noise');
+const wrap = document.querySelector('.distort');
+
+const reduce = matchMedia('(prefers-reduced-motion: reduce)');
+
+let raf = null;
+let current = 0;
+let target = 0;
+let t = 0;
+
+function tick() {
+  // 지수 감쇠 보간 (lerp) — 프레임레이트에 덜 민감한 형태
+  current += (target - current) * 0.12;
+  t += 0.004;
+
+  disp.setAttribute('scale', current.toFixed(2));
+  // 노이즈 주파수를 아주 미세하게 흔들어 "살아있는" 느낌을 준다
+  const fx = (0.008 + Math.sin(t) * 0.0015).toFixed(5);
+  const fy = (0.014 + Math.cos(t * 0.8) * 0.0015).toFixed(5);
+  noise.setAttribute('baseFrequency', `${fx} ${fy}`);
+
+  if (Math.abs(target - current) > 0.05 || target > 0) {
+    raf = requestAnimationFrame(tick);
+  } else {
+    disp.setAttribute('scale', '0');
+    raf = null;
+  }
+}
+
+function start() {
+  if (reduce.matches) return;
+  target = 26;
+  if (!raf) raf = requestAnimationFrame(tick);
+}
+function stop() {
+  target = 0;
+  if (!raf) raf = requestAnimationFrame(tick);
+}
+
+wrap.addEventListener('pointerenter', start);
+wrap.addEventListener('pointerleave', stop);
+wrap.addEventListener('focusin', start);
+wrap.addEventListener('focusout', stop);
+```
+
+### 9.3 SMIL 버전 (참고 — 단순 루프에만)
+
+```html
+<svg width="0" height="0" aria-hidden="true">
+  <filter id="drift">
+    <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="2" result="n">
+      <animate
+        attributeName="baseFrequency"
+        dur="14s"
+        values="0.010;0.016;0.010"
+        repeatCount="indefinite"
+        calcMode="spline"
+        keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" />
+    </feTurbulence>
+    <feDisplacementMap in="SourceGraphic" in2="n" scale="12"
+      xChannelSelector="R" yChannelSelector="G" />
+  </filter>
+</svg>
+```
+
+```js
+// SMIL도 reduced-motion을 존중하게 만든다
+if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+  document.querySelectorAll('animate, animateTransform, animateMotion')
+    .forEach((el) => el.parentElement.removeChild(el));
+}
+```
+
+### 9.4 SVG 필터 성능 규칙 (타협 불가)
+
+1. **`feTurbulence`는 가장 비싼 primitive다.** 필터 영역의 픽셀마다 노이즈를 계산한다.
+   필터가 걸린 요소 크기를 **300×300px 이하**로 유지하거나, 큰 영역에는 쓰지 않는다.
+2. `filter` 영역(`x/y/width/height`)을 반드시 명시해 확장 범위를 제한한다. 기본값은 -10%~120%다.
+3. **필터 파라미터와 transform을 동시에 애니메이션하지 않는다.** 이동은 transform으로,
+   왜곡은 필터로 하되 **왜곡은 짧은 순간만**.
+4. 정적인 텍스처(그레인, 종이 질감)는 필터를 실시간 계산하지 말고 **PNG/WebP로 미리 렌더**해서
+   `background-image`로 깐다. 비용이 0이 된다.
+5. 모바일에서는 필터 애니메이션을 아예 끄는 것을 기본값으로 고려한다.
+
+```css
+/* 저사양/모바일에서 필터 비활성화 */
+@media (max-width: 768px), (prefers-reduced-motion: reduce) {
+  .distort__img { filter: none; }
+}
+```
+
+---
+
+## 10. CSS만으로 되는 것 / 안 되는 것 요약
+
+### CSS로 충분한 것 (라이브러리 금지)
+- 호버·포커스·액티브 상태 전환
+- 모달·팝오버·툴팁 진입/퇴장 (`@starting-style`)
+- 아코디언 펼침 (`grid-template-rows`)
+- 스크롤 리빌, 진행 바, 시차, 스티키 헤더 (scroll-driven, `@supports` 가드)
+- 페이지 전환 (View Transitions)
+- 무한 루프 (마퀴, 스피너, 앰비언트 그라디언트)
+- 스프링 느낌 (`linear()` 프리셋)
+- 그라디언트 각도·색상 정지점 애니메이션 (`@property`)
+- 스크롤 스냅 캐러셀
+
+### CSS로 안 되는 것 (03번 문서로)
+- **속도(velocity)를 이어받는** 인터럽트 (드래그 던지기, 목표 재설정)
+- 복잡한 **타임라인 시퀀싱** (A 끝나고 B, B의 절반에서 C 시작)
+- **레이아웃 변화**를 transform으로 변환하는 FLIP (요소가 그리드에서 리스트로 이동)
+- 스크롤 **핀 고정 + 시퀀스** (섹션을 고정하고 여러 단계를 진행)
+- 텍스트 **문자/단어 단위 분해**
+- SVG 패스 모핑, 패스 위 이동
+- 커서/포인터 위치에 물린 **연속** 값 (스프링 스무딩 포함)
+- 물리 기반 관성 스크롤
+- WebGL/Canvas와의 동기화
diff --git a/research/motion/03-js-stacks.md b/research/motion/03-js-stacks.md
new file mode 100644
index 0000000..e06896f
--- /dev/null
+++ b/research/motion/03-js-stacks.md
@@ -0,0 +1,1797 @@
+# 03. JS 모션 스택 실전 — GSAP / Motion / Lenis
+
+> 버전 확인 시점: **2026-08-20**, npm 레지스트리 직접 조회.
+> `gsap@3.15.0` · `motion@13.1.0` (`framer-motion@13.1.0`은 동일 코드의 별칭 패키지) · `lenis@1.3.26`
+
+---
+
+## 0. 선택 기준 — 결정 트리
+
+```
+[1] CSS(02번 문서)로 되는가?
+    YES → 라이브러리 쓰지 않는다. 끝.
+    NO ↓
+
+[2] React 프로젝트인가?
+    YES ↓                                  NO ↓
+    [2a] 레이아웃 변화(FLIP)·                [2b] 스크롤 시퀀스/핀 고정/
+         공유 요소·제스처가 핵심인가?              텍스트 분해/SVG 모핑이 필요한가?
+         YES → Motion (motion/react)              YES → GSAP
+         NO  → CSS + 최소 JS 또는 Motion mini      NO  → WAAPI (Element.animate)
+
+[3] 스크롤 핀 고정 + 다단계 시퀀스 + 스냅이 필요한가?
+    YES → GSAP ScrollTrigger. (Motion에는 pin/scrub 조합 등가물이 없다)
+
+[4] 번들 크기가 최우선 제약인가? (< 10KB)
+    YES → WAAPI 또는 Motion의 `animate` mini (2.3KB)
+```
+
+### 0.1 비교표
+
+| 항목 | CSS 네이티브 | WAAPI | GSAP 3.15 | Motion 13.1 |
+|---|---|---|---|---|
+| 번들 | 0 | 0 | ~24KB(core, min+gz) + 플러그인 | 2.3KB(mini) ~ 34KB(full React) |
+| 라이선스 | — | — | **무료(상업 포함)**, Webflow 경쟁 제한 조항 있음 | MIT |
+| 실행 스레드 | 컴포지터(대부분) | 컴포지터(합성 속성) | 메인 | 메인 + WAAPI 하이브리드 |
+| 타임라인 시퀀싱 | ✗ | 제한적 | **최고** | 있음(`sequence`) |
+| 스크롤 핀/스크럽/스냅 | ✗(핀은 sticky로 유사) | ✗ | **ScrollTrigger** | scroll()만(핀 없음) |
+| 레이아웃 애니메이션(FLIP) | ✗ | ✗ | Flip 플러그인 | **`layout` prop** (최고) |
+| 스프링(속도 승계) | ✗(`linear()` 근사) | ✗ | 있음(elastic 이징, InertiaPlugin) | **최고** |
+| 텍스트 분해 | ✗ | ✗ | **SplitText** | ✗(직접 구현) |
+| SVG 모핑/패스 | ✗ | ✗ | **MorphSVG/MotionPath/DrawSVG** | 부분(path 애니메이션) |
+| React 통합 | — | 수동 | `@gsap/react` | **네이티브** |
+| 서버 컴포넌트 | — | — | 클라이언트 전용 | `motion/react-client` 지원 |
+| 디버깅 도구 | DevTools | DevTools | markers, GSDevTools | React DevTools |
+
+---
+
+## 1. GSAP 3.15.0
+
+### 1.1 라이선스 — 2025년에 실제로 바뀌었다 (1차 출처 확인)
+
+`gsap.com/community/standard-license/` 원문 확인 결과 (**발효일 2025년 4월 30일**):
+
+- **모든 GSAP은 상업 프로젝트에서 무료다.** "Commercial usage is covered under the standard license."
+- **과거 Club GreenSock 유료 플러그인 전부 포함**: SplitText, MorphSVG, DrawSVG, ScrollTrigger,
+  ScrollSmoother, Inertia, MotionPath, Flip, Observer 등.
+  원문: "All of GSAP including the plugins that were formerly 'members-only' like SplitText and
+  MorphSVG can be used in commercial projects at no charge."
+- 배경: 2024년 10월 Webflow가 GreenSock 인수 → 2025년 4월 전면 무료화.
+
+**단 하나 남은 제약 (반드시 읽을 것)**
+> GSAP을 "코드 없이 시각적으로 애니메이션을 만드는 도구"에 넣어 **Webflow의 비주얼 애니메이션 빌더와
+> 경쟁하는 솔루션**을 만드는 데 사용할 수 없다. 또한 "경쟁 제품을 만들 목적으로 리버스 엔지니어링" 금지(§III.2).
+
+FAQ가 명시적으로 허용한 것: WordPress 플러그인, 시각적 인터페이스를 가진 니치 도구,
+AI가 생성한 코드(ChatGPT/Cursor 등). **일반적인 웹사이트·앱 제작에는 아무 제약이 없다.**
+
+> **designpaca 판단**: GSAP은 이제 "돈 때문에 못 쓰는 라이브러리"가 아니다.
+> 스크롤 시퀀스와 텍스트 분해가 필요하면 주저 없이 쓴다.
+
+### 1.2 설치와 등록
+
+```bash
+npm i gsap@3.15.0
+```
+
+```js
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { SplitText }     from 'gsap/SplitText';
+import { Flip }          from 'gsap/Flip';
+import { MotionPathPlugin } from 'gsap/MotionPathPlugin';
+import { Observer }      from 'gsap/Observer';
+
+gsap.registerPlugin(ScrollTrigger, SplitText, Flip, MotionPathPlugin, Observer);
+
+// 프로젝트 전역 기본값 — 이걸 안 하면 매번 duration/ease를 반복하게 된다
+gsap.defaults({ duration: 0.6, ease: 'power3.out' });
+
+// ScrollTrigger 전역 설정
+ScrollTrigger.config({
+  // 리사이즈/방향 전환 시 불필요한 refresh 방지 (모바일 주소창 대응)
+  ignoreMobileResize: true,
+});
+```
+
+### 1.3 이징 이름 — GSAP의 문자열 이징
+
+| GSAP 문자열 | 대략 대응 |
+|---|---|
+| `none` | `linear` |
+| `power1.out` ~ `power4.out` | ease-out (숫자가 클수록 급격) |
+| `power2.inOut` | ease-in-out |
+| `expo.out` | 가장 강한 감속. "고급스러운" 느낌 |
+| `back.out(1.7)` | 오버슛. 괄호 값이 오버슛 강도 |
+| `elastic.out(1, 0.3)` | 스프링 유사. (진폭, 주기) |
+| `circ.out` | 원호 감속 |
+| `steps(12)` | 스텝 애니메이션 |
+
+**실무 기본값: `power3.out`(진입) / `power3.in`(퇴장) / `power2.inOut`(이동) / `none`(스크럽).**
+
+### 1.4 타임라인 설계 — 위치 파라미터가 핵심
+
+```js
+const tl = gsap.timeline({
+  defaults: { duration: 0.6, ease: 'power3.out' },
+  paused: true,
+});
+
+tl.from('.hero__panel', { yPercent: 100, duration: 0.8, ease: 'expo.out' })
+  // "<"      = 직전 애니메이션의 시작 시점
+  // "<0.15"  = 직전 시작 + 0.15s   ← 오버랩. 이게 "고급스러움"의 정체다
+  // ">"      = 직전 애니메이션의 종료 시점
+  // ">-0.2"  = 직전 종료 0.2s 전
+  // "+=0.3"  = 타임라인 끝 + 0.3s
+  // 1.2      = 절대 시각 1.2초
+  // "label"  = 라벨 위치
+  .from('.hero__title', { yPercent: 110, opacity: 0 }, '<0.15')
+  .from('.hero__sub',   { y: 24, opacity: 0 },          '<0.1')
+  .from('.hero__cta',   { y: 16, opacity: 0, scale: 0.96 }, '<0.1')
+  .addLabel('heroReady')
+  .from('.hero__scroll-hint', { opacity: 0, y: -8, repeat: -1, yoyo: true, duration: 1.2 }, 'heroReady');
+
+tl.play();
+```
+
+**타임라인 제어**
+
+```js
+tl.play(); tl.pause(); tl.reverse(); tl.restart();
+tl.seek('heroReady');
+tl.timeScale(1.5);           // 1.5배속
+tl.progress(0.5);            // 절반 지점으로
+tl.tweenTo('heroReady', { duration: 0.4 });  // 부드럽게 라벨로 이동
+tl.kill();                   // 완전 제거
+```
+
+### 1.5 ScrollTrigger — 전체 설정 레퍼런스
+
+```js
+ScrollTrigger.create({
+  trigger: '.section',        // 기준 요소
+  endTrigger: '.other',       // (선택) end 계산 기준을 다른 요소로
+  start: 'top 80%',           // "트리거의 top이 뷰포트의 80% 지점에 닿을 때"
+  end: 'bottom 20%',          // 또는 "+=1000"(트리거 시작에서 1000px), 숫자, 함수
+  scrub: 1,                   // true=즉시 연동, 숫자=n초 지연 스무딩
+  pin: true,                  // 트리거를 화면에 고정 (또는 다른 요소 지정)
+  pinSpacing: true,           // 고정 중 레이아웃 붕괴 방지용 여백 (기본 true)
+  anticipatePin: 1,           // 빠른 스크롤 시 핀 시작을 미리 계산 (깜빡임 방지)
+  snap: {
+    snapTo: 'labels',         // 숫자(간격) | 배열 | 함수 | "labels" | "labelsDirectional"
+    duration: { min: 0.2, max: 0.6 },
+    delay: 0.1,               // 스크롤 멈춘 뒤 대기
+    ease: 'power2.inOut',
+    directional: true,        // 스크롤 방향 쪽으로만 스냅 (기본 true)
+    inertia: true,
+  },
+  toggleActions: 'play none none reverse',  // onEnter onLeave onEnterBack onLeaveBack
+  toggleClass: { targets: '.nav-item', className: 'is-active' },
+  once: false,                // true면 1회 후 ScrollTrigger 파괴
+  markers: false,             // 개발 중에만 true
+  invalidateOnRefresh: true,  // refresh 시 캐시된 시작값 무효화 (반응형에 필수)
+  id: 'hero-pin',
+  refreshPriority: 0,         // 여러 핀이 겹칠 때 refresh 순서 제어 (위쪽일수록 높게)
+  horizontal: false,
+  containerAnimation: null,   // 수평 스크롤 안의 트리거일 때 그 트윈을 넘긴다
+  onEnter:      (self) => {},
+  onLeave:      (self) => {},
+  onEnterBack:  (self) => {},
+  onLeaveBack:  (self) => {},
+  onUpdate:     (self) => { /* self.progress, self.direction, self.velocity */ },
+  onRefresh:    (self) => {},
+  onToggle:     (self) => { /* self.isActive */ },
+});
+```
+
+**`start` / `end` 문자열 문법**: `"<트리거의 위치> <뷰포트의 위치>"`
+- `"top bottom"` = 트리거의 top이 뷰포트 bottom에 닿을 때 (요소가 막 보이기 시작)
+- `"top center"` = 트리거의 top이 뷰포트 중앙에 닿을 때
+- `"center center"`, `"bottom top"`, `"top top+=100"` 등 조합 가능
+- `"+=1000"` = 시작 지점에서 1000px 더 스크롤한 지점
+
+### 1.6 완성 코드 — 핀 고정 + 스크럽 시퀀스
+
+```html
+<section class="pin-section">
+  <div class="pin-section__stage">
+    <h2 class="pin-line" data-i="0">첫 번째</h2>
+    <h2 class="pin-line" data-i="1">두 번째</h2>
+    <h2 class="pin-line" data-i="2">세 번째</h2>
+  </div>
+</section>
+```
+
+```css
+.pin-section { min-height: 100svh; }
+.pin-section__stage {
+  height: 100svh;
+  display: grid;
+  place-items: center;
+  position: relative;
+}
+.pin-line {
+  grid-area: 1 / 1;
+  font-size: clamp(2rem, 8vw, 6rem);
+  margin: 0;
+  opacity: 0;
+}
+```
+
+```js
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+gsap.registerPlugin(ScrollTrigger);
+
+function initPinSequence() {
+  const mm = gsap.matchMedia();
+
+  mm.add(
+    {
+      isDesktop: '(min-width: 900px)',
+      isMobile: '(max-width: 899px)',
+      reduce: '(prefers-reduced-motion: reduce)',
+    },
+    (ctx) => {
+      const { isDesktop, reduce } = ctx.conditions;
+
+      if (reduce) {
+        // 감소 모드: 핀도 스크럽도 없이 전부 표시
+        gsap.set('.pin-line', { opacity: 1, y: 0 });
+        return;
+      }
+
+      const lines = gsap.utils.toArray('.pin-line');
+
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: '.pin-section',
+          start: 'top top',
+          end: () => `+=${window.innerHeight * lines.length}`,
+          scrub: 0.6,
+          pin: '.pin-section__stage',
+          pinSpacing: true,
+          anticipatePin: 1,
+          invalidateOnRefresh: true,
+        },
+        defaults: { ease: 'none' },
+      });
+
+      lines.forEach((line, i) => {
+        tl.fromTo(
+          line,
+          { opacity: 0, yPercent: isDesktop ? 40 : 20 },
+          { opacity: 1, yPercent: 0, duration: 0.4 },
+          i
+        );
+        if (i < lines.length - 1) {
+          tl.to(line, { opacity: 0, yPercent: isDesktop ? -40 : -20, duration: 0.4 }, i + 0.5);
+        }
+      });
+
+      // 조건이 바뀌면 자동으로 revert됨. 추가 정리가 필요하면 함수를 반환
+      return () => {
+        tl.scrollTrigger?.kill();
+        tl.kill();
+      };
+    }
+  );
+
+  return () => mm.revert();
+}
+
+const cleanupPin = initPinSequence();
+```
+
+### 1.7 완성 코드 — 수평 스크롤 섹션
+
+```js
+function initHorizontal() {
+  const track = document.querySelector('.h-track');
+  const panels = gsap.utils.toArray('.h-panel');
+  if (!track || panels.length === 0) return () => {};
+
+  const ctx = gsap.context(() => {
+    const scrollTween = gsap.to(panels, {
+      xPercent: -100 * (panels.length - 1),
+      ease: 'none',
+      scrollTrigger: {
+        trigger: '.h-wrapper',
+        pin: true,
+        scrub: 1,
+        snap: {
+          snapTo: 1 / (panels.length - 1),
+          duration: { min: 0.2, max: 0.5 },
+          delay: 0.05,
+          ease: 'power2.inOut',
+        },
+        end: () => `+=${track.scrollWidth - window.innerWidth}`,
+        invalidateOnRefresh: true,
+      },
+    });
+
+    // 수평 스크롤 "안"의 요소에 트리거를 걸려면 containerAnimation이 필수
+    panels.forEach((panel) => {
+      gsap.from(panel.querySelector('.h-panel__title'), {
+        opacity: 0,
+        y: 40,
+        duration: 0.6,
+        scrollTrigger: {
+          trigger: panel,
+          containerAnimation: scrollTween,   // ← 이게 핵심
+          start: 'left 70%',
+          end: 'left 30%',
+          scrub: true,
+        },
+      });
+    });
+  });
+
+  return () => ctx.revert();
+}
+```
+
+### 1.8 `ScrollTrigger.batch()` — 리스트 stagger 리빌
+
+IntersectionObserver를 직접 쓰는 것보다 낫다. 동시에 들어온 요소들을 **묶어서** 콜백을 준다.
+
+```js
+gsap.set('.grid-card', { opacity: 0, y: 32 });
+
+ScrollTrigger.batch('.grid-card', {
+  interval: 0.1,     // 이 시간 안에 들어온 요소를 한 배치로 묶는다
+  batchMax: 6,       // 한 배치 최대 개수 — stagger가 길어지는 것 방지
+  start: 'top 88%',
+  once: true,        // 다시 스크롤해도 재생하지 않는다 (읽기 방해 방지)
+  onEnter: (batch) =>
+    gsap.to(batch, {
+      opacity: 1,
+      y: 0,
+      duration: 0.6,
+      ease: 'power3.out',
+      stagger: { each: 0.06, grid: 'auto', from: 'start' },
+      overwrite: true,
+    }),
+});
+
+// 초기 y 오프셋이 ScrollTrigger의 위치 계산을 망치는 것을 방지
+ScrollTrigger.addEventListener('refreshInit', () => gsap.set('.grid-card', { y: 0 }));
+```
+
+### 1.9 SplitText (3.13+ 신 API) — 텍스트 등장
+
+```js
+import { SplitText } from 'gsap/SplitText';
+gsap.registerPlugin(SplitText);
+
+const split = SplitText.create('.headline', {
+  type: 'lines,words',
+  mask: 'lines',        // 3.13+ : 각 line을 overflow:hidden 래퍼로 감싼다
+  autoSplit: true,      // 폰트 로드/리사이즈 시 자동 재분할
+  linesClass: 'split-line',
+  onSplit(self) {
+    // autoSplit이 재분할할 때마다 호출된다.
+    // 여기서 반환한 애니메이션은 다음 재분할 때 자동으로 kill된다.
+    return gsap.from(self.lines, {
+      yPercent: 110,
+      opacity: 0,
+      duration: 0.8,
+      ease: 'expo.out',
+      stagger: 0.08,
+      scrollTrigger: {
+        trigger: '.headline',
+        start: 'top 82%',
+        once: true,
+      },
+    });
+  },
+});
+
+// 정리
+// split.revert();
+```
+
+**SplitText 접근성 — 반드시 지킬 것**
+
+문자 단위로 쪼개면 스크린리더가 "ㄱ-ㅏ-ㄴ-ㅏ-ㄷ-ㅏ"처럼 한 글자씩 읽는다.
+2026년 기준 접근성 커뮤니티의 결론은 명확하다: **글자 단위 분해(`type: "chars"`)는 쓰지 않는다.**
+
+```html
+<!-- 최선: 줄/단어 단위까지만 쪼갠다 -->
+<h1 class="headline">여기 텍스트</h1>
+
+<!-- 문자 단위가 꼭 필요하면: 원문을 별도 요소로 남기고 시각 요소는 숨긴다 -->
+<h1 class="headline-wrap">
+  <span class="sr-only">여기 텍스트</span>
+  <span class="headline" aria-hidden="true">여기 텍스트</span>
+</h1>
+```
+
+```css
+.sr-only {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+```
+
+> `<div>`에 `aria-label`을 붙이는 방식은 **동작하지 않는다.** generic role은 author naming이
+> 금지되어 있다. `<h1>`, `<p>` 같은 의미론적 요소이거나 `role="text"`(Safari 전용)가 필요하다.
+> 위의 "원문 + `aria-hidden` 시각 사본" 패턴이 가장 안전하다.
+
+### 1.10 Flip — 레이아웃 변화 애니메이션
+
+```js
+import { Flip } from 'gsap/Flip';
+gsap.registerPlugin(Flip);
+
+const grid = document.querySelector('.gallery');
+
+function setLayout(mode) {
+  // 1) 현재 상태 캡처
+  const state = Flip.getState('.gallery__item', {
+    props: 'borderRadius,backgroundColor',   // transform 외에 추적할 속성
+  });
+
+  // 2) DOM/클래스를 자유롭게 바꾼다 (레이아웃이 즉시 점프해도 됨)
+  grid.dataset.layout = mode;
+
+  // 3) 이전 상태에서 현재 상태로 애니메이션
+  Flip.from(state, {
+    duration: 0.6,
+    ease: 'power3.inOut',
+    stagger: 0.02,
+    absolute: true,        // 애니메이션 중 position:absolute로 띄워 레이아웃 흔들림 방지
+    onEnter: (els) => gsap.fromTo(els, { opacity: 0, scale: 0.9 }, { opacity: 1, scale: 1, duration: 0.4 }),
+    onLeave: (els) => gsap.to(els, { opacity: 0, scale: 0.9, duration: 0.3 }),
+  });
+}
+
+document.querySelectorAll('[data-layout-btn]').forEach((btn) => {
+  btn.addEventListener('click', () => setLayout(btn.dataset.layoutBtn));
+});
+```
+
+### 1.11 MotionPath — 패스 위 이동
+
+```js
+import { MotionPathPlugin } from 'gsap/MotionPathPlugin';
+gsap.registerPlugin(MotionPathPlugin);
+
+gsap.to('.plane', {
+  motionPath: {
+    path: '#flight-path',        // SVG path의 셀렉터 또는 좌표 배열
+    align: '#flight-path',       // 패스와 같은 좌표계로 정렬
+    alignOrigin: [0.5, 0.5],     // 요소의 중심을 패스에 맞춤
+    autoRotate: true,            // 진행 방향으로 회전
+    start: 0,
+    end: 1,
+  },
+  duration: 6,
+  ease: 'none',
+  repeat: -1,
+});
+```
+
+### 1.12 `gsap.quickTo()` — 고빈도 이벤트 (커서 추적)
+
+`gsap.to()`를 mousemove마다 호출하면 매번 새 트윈 객체가 생성된다. `quickTo`는 하나의 트윈을 재사용한다.
+
+```js
+const cursor = document.querySelector('.cursor');
+const xTo = gsap.quickTo(cursor, 'x', { duration: 0.35, ease: 'power3' });
+const yTo = gsap.quickTo(cursor, 'y', { duration: 0.35, ease: 'power3' });
+
+window.addEventListener('pointermove', (e) => {
+  xTo(e.clientX);
+  yTo(e.clientY);
+});
+```
+
+### 1.13 GSAP + React (`@gsap/react`)
+
+```bash
+npm i gsap@3.15.0 @gsap/react
+```
+
+```jsx
+'use client';
+
+import { useRef } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { useGSAP } from '@gsap/react';
+
+gsap.registerPlugin(useGSAP, ScrollTrigger);
+
+export function Hero({ items }) {
+  const container = useRef(null);
+
+  const { contextSafe } = useGSAP(
+    () => {
+      // 여기서 만든 모든 애니메이션은 언마운트 시 자동 revert된다.
+      // 셀렉터 문자열은 scope 안으로 한정된다.
+      gsap.from('.hero__item', {
+        opacity: 0,
+        y: 28,
+        duration: 0.6,
+        ease: 'power3.out',
+        stagger: 0.06,
+      });
+
+      ScrollTrigger.create({
+        trigger: container.current,
+        start: 'top 70%',
+        once: true,
+        onEnter: () => gsap.to('.hero__bar', { scaleX: 1, duration: 0.8, ease: 'expo.out' }),
+      });
+    },
+    { scope: container, dependencies: [items.length], revertOnUpdate: true }
+  );
+
+  // 이벤트 핸들러 안의 애니메이션은 useGSAP 실행 시점 이후라 자동 정리되지 않는다.
+  // contextSafe로 감싸야 정리 대상에 포함된다.
+  const onEnter = contextSafe((e) => {
+    gsap.to(e.currentTarget, { scale: 1.04, duration: 0.25, ease: 'power2.out' });
+  });
+  const onLeave = contextSafe((e) => {
+    gsap.to(e.currentTarget, { scale: 1, duration: 0.35, ease: 'power2.out' });
+  });
+
+  return (
+    <section ref={container} className="hero">
+      <div className="hero__bar" style={{ transform: 'scaleX(0)', transformOrigin: '0 50%' }} />
+      {items.map((item) => (
+        <article
+          key={item.id}
+          className="hero__item"
+          onPointerEnter={onEnter}
+          onPointerLeave={onLeave}
+        >
+          {item.title}
+        </article>
+      ))}
+    </section>
+  );
+}
+```
+
+### 1.14 GSAP 흔한 실수 10가지
+
+| # | 실수 | 결과 | 처방 |
+|---|---|---|---|
+| 1 | 플러그인을 `registerPlugin` 하지 않음 | 조용히 무시되거나 `Invalid property` 경고 | 진입점에서 한 번에 등록 |
+| 2 | React에서 `useEffect` cleanup 누락 | 디태치된 DOM 노드 참조로 메모리 누수, 리렌더 시 애니메이션 중첩 | `useGSAP` 또는 `gsap.context()` + `ctx.revert()` |
+| 3 | 이벤트 핸들러 애니메이션을 `contextSafe`로 안 감쌈 | 언마운트 후에도 살아있음 | `contextSafe()` |
+| 4 | `left/top/width/height`를 애니메이션 | 매 프레임 레이아웃 | `x/y/xPercent/yPercent/scale` 사용 |
+| 5 | 이미지 로드 전에 ScrollTrigger 생성 | 시작/끝 위치가 어긋남 | `ScrollTrigger.refresh()`를 `load` 또는 이미지 디코드 후 호출 |
+| 6 | 반응형에서 `invalidateOnRefresh` 누락 | 리사이즈 후 시작값이 옛날 값으로 고정 | `invalidateOnRefresh: true` + 함수형 `end: () => ...` |
+| 7 | `.from()`을 여러 번 재실행 | 시작값이 누적되어 요소가 사라짐 | `.fromTo()`를 쓰거나 `immediateRender: false` |
+| 8 | 여러 트윈이 같은 속성을 경쟁 | 깜빡임 | `overwrite: 'auto'` 또는 `true` |
+| 9 | 핀 요소에 `position: fixed` 자식 | transform 컨테이닝 블록 때문에 좌표가 틀어짐 | 핀 래퍼 밖으로 빼거나 `pinType: 'fixed'` 검토 |
+| 10 | `markers: true`를 프로덕션에 남김 | 화면에 개발용 마커 표시 | 빌드 시 제거 또는 `markers: import.meta.env.DEV` |
+
+**정리(cleanup) 표준 패턴 — 프레임워크 무관**
+
+```js
+function mountMotion(root) {
+  const ctx = gsap.context(() => {
+    // 이 안에서 만든 모든 GSAP 객체(트윈/타임라인/ScrollTrigger)가 추적된다
+    gsap.from('.item', { opacity: 0, y: 20, stagger: 0.05 });
+    ScrollTrigger.create({ trigger: '.section', start: 'top 80%', onEnter: () => {} });
+  }, root);   // root를 넘기면 셀렉터가 root 하위로 한정된다
+
+  return () => ctx.revert();   // 애니메이션 제거 + 인라인 스타일 원복
+}
+```
+
+### 1.15 ScrollSmoother — 쓸까 말까
+
+GSAP의 스무스 스크롤 플러그인. Lenis와 경쟁한다.
+
+```html
+<body>
+  <div id="smooth-wrapper">
+    <div id="smooth-content">
+      <!-- 모든 콘텐츠 -->
+    </div>
+  </div>
+  <!-- position: fixed 요소는 wrapper 밖에 둔다 (transform이 containing block을 만들기 때문) -->
+</body>
+```
+
+```js
+import { ScrollSmoother } from 'gsap/ScrollSmoother';
+gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
+
+const smoother = ScrollSmoother.create({
+  wrapper: '#smooth-wrapper',
+  content: '#smooth-content',
+  smooth: 1,              // 네이티브 스크롤 위치를 따라잡는 시간(초)
+  smoothTouch: false,     // 터치에서는 끄는 것이 기본이자 권장
+  effects: true,          // data-speed / data-lag 속성 활성화
+  normalizeScroll: true,  // 모바일 주소창 리사이즈 대응
+  ignoreMobileResize: true,
+});
+
+// prefers-reduced-motion 대응 — 자동이 아니다. 직접 처리해야 한다.
+if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+  smoother.kill();
+}
+```
+
+```html
+<!-- 시차 효과: data-speed -->
+<img data-speed="0.85" src="/bg.jpg" alt="">   <!-- 느리게 (뒤에 있는 느낌) -->
+<h2 data-speed="1.15">제목</h2>                 <!-- 빠르게 (앞에 있는 느낌) -->
+<div data-lag="0.4">지연 추종</div>
+```
+
+**ScrollSmoother vs Lenis**
+
+| | ScrollSmoother | Lenis |
+|---|---|---|
+| 방식 | `#smooth-content`를 transform으로 이동 | 네이티브 `scrollTop`을 이징 |
+| `position: fixed` | wrapper 밖으로 빼야 함 | 그대로 동작 |
+| `position: sticky` | 동작하나 주의 필요 | 그대로 동작 |
+| ScrollTrigger 통합 | 완벽(같은 팀) | 수동 연결 필요 |
+| reduced-motion | **수동 처리 필요** | `respectReducedMotion: true` 기본 |
+| 번들 | GSAP 생태계 안 | ~3KB |
+| 접근성 | transform 방식이라 스크롤바/문서 위치 괴리 발생 가능 | 네이티브 스크롤 유지 |
+
+> **designpaca 판단: 접근성 관점에서 Lenis가 우위.** ScrollSmoother는 이미 GSAP 중심 프로젝트이고
+> ScrollTrigger와의 완벽한 동기화가 필수일 때만.
+
+---
+
+## 2. Motion 13.1.0 (구 Framer Motion)
+
+### 2.1 패키지 구조와 번들 크기
+
+```bash
+npm i motion@13.1.0
+```
+
+| import | 크기(min+gzip, Rollup 기준) | 용도 |
+|---|---|---|
+| `import { animate } from 'motion'` | 미니 빌드 ~2.3KB | 바닐라 JS, 단순 애니메이션 |
+| `useAnimate` mini (`motion/react-mini`) | 2.3KB | React, 명령형 애니메이션만 |
+| `m` + `LazyMotion` + `domAnimation` | 4.6KB + 15KB(지연 로드) | React, 선언적 |
+| `m` + `LazyMotion` + `domMax` | 4.6KB + 25KB | + 드래그/레이아웃 |
+| `motion` (풀) | ~34KB | 전부 |
+
+> `framer-motion`은 `motion`과 **동일 코드의 별칭 패키지**다. 신규 프로젝트는 `motion`을 쓴다.
+
+### 2.2 바닐라 JS
+
+```js
+import { animate, scroll, inView, stagger, press, hover } from 'motion';
+
+// 기본 애니메이션
+animate('.box', { opacity: [0, 1], y: [24, 0] }, {
+  duration: 0.6,
+  ease: [0.16, 1, 0.3, 1],
+  delay: stagger(0.06),
+});
+
+// 스크롤 연동 (컴포지터에서 실행되는 WAAPI 경로를 자동 선택)
+const progress = animate('.progress-bar', { scaleX: [0, 1] }, { ease: 'linear' });
+scroll(progress);
+
+// 요소 기준 스크롤
+scroll(
+  animate('.hero-img', { opacity: [0, 1, 1, 0] }, { ease: 'linear' }),
+  { target: document.querySelector('.hero'), offset: ['start end', 'end start'] }
+);
+
+// 뷰포트 진입
+inView('.reveal', (element) => {
+  animate(element, { opacity: [0, 1], y: [32, 0] }, { duration: 0.6, ease: [0.16, 1, 0.3, 1] });
+  return () => {};   // 반환 함수는 요소가 뷰포트를 벗어날 때 실행
+}, { amount: 0.25 });
+
+// 제스처
+press('button', (element) => {
+  animate(element, { scale: 0.96 }, { duration: 0.08 });
+  return () => animate(element, { scale: 1 }, { type: 'spring', stiffness: 500, damping: 25 });
+});
+
+hover('.card', (element) => {
+  animate(element, { y: -6 }, { duration: 0.15 });
+  return () => animate(element, { y: 0 }, { duration: 0.35 });
+});
+```
+
+### 2.3 React — transition 옵션 전체
+
+```jsx
+<motion.div
+  animate={{ x: 100 }}
+  transition={{
+    // ── 타입 ─────────────────────────
+    type: 'spring',        // 'tween' | 'spring' | 'inertia'
+
+    // ── spring (물리 기반) ──────────
+    stiffness: 300,        // 기본 1 (실무 170~400)
+    damping: 30,           // 기본 10
+    mass: 1,               // 기본 1
+    velocity: 0,           // 초기 속도
+    restSpeed: 0.1,
+    restDelta: 0.01,
+
+    // ── spring (지속시간 기반) — 디자이너 친화적. 이걸 권장 ──
+    // visualDuration: 0.35,   // 시각적으로 목표에 닿는 시간
+    // bounce: 0.2,            // 0=바운스 없음, 1=극단
+
+    // ── tween ───────────────────────
+    // duration: 0.3,       // 기본 0.3 (키프레임 여러 개면 0.8)
+    // ease: [0.16, 1, 0.3, 1],
+    // times: [0, 0.4, 1],  // 키프레임 위치 정규화
+
+    // ── 반복 ────────────────────────
+    repeat: 0,             // Infinity 가능
+    repeatType: 'loop',    // 'loop' | 'reverse' | 'mirror'
+    repeatDelay: 0,
+    delay: 0,
+
+    // ── 값별 개별 transition ────────
+    // default: { type: 'spring' },
+    // opacity: { ease: 'linear', duration: 0.2 },
+  }}
+/>
+```
+
+### 2.4 완성 코드 — AnimatePresence (진입/퇴장)
+
+```jsx
+'use client';
+
+import { useState } from 'react';
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
+
+export function Drawer() {
+  const [open, setOpen] = useState(false);
+  const reduce = useReducedMotion();
+
+  const panel = reduce
+    ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 },
+        transition: { duration: 0.12 } }
+    : { initial: { x: '100%' }, animate: { x: 0 }, exit: { x: '100%' },
+        transition: { type: 'spring', visualDuration: 0.35, bounce: 0 } };
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>열기</button>
+
+      {/* mode="wait" = 나가는 요소가 완전히 사라진 뒤 들어오는 요소 시작 */}
+      <AnimatePresence>
+        {open && (
+          <>
+            <motion.div
+              key="scrim"
+              className="drawer__scrim"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              onClick={() => setOpen(false)}
+            />
+            <motion.aside
+              key="panel"
+              className="drawer__panel"
+              role="dialog"
+              aria-modal="true"
+              aria-label="설정"
+              {...panel}
+            >
+              <button onClick={() => setOpen(false)}>닫기</button>
+              <p>드로어 내용</p>
+            </motion.aside>
+          </>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}
+```
+
+```css
+.drawer__scrim {
+  position: fixed; inset: 0;
+  background: rgb(0 0 0 / 0.45);
+  z-index: 40;
+}
+.drawer__panel {
+  position: fixed; inset-block: 0; inset-inline-end: 0;
+  width: min(400px, 90vw);
+  background: Canvas;
+  padding: 24px;
+  z-index: 41;
+  box-shadow: -12px 0 40px rgb(0 0 0 / 0.2);
+}
+```
+
+**AnimatePresence 3가지 mode**
+- `mode="sync"` (기본): 진입/퇴장 동시
+- `mode="wait"`: 퇴장 완료 후 진입 — **페이지 전환에 적합**
+- `mode="popLayout"`: 퇴장하는 요소를 레이아웃에서 즉시 빼고 나머지가 자리를 메움 — **리스트 삭제에 필수**
+
+### 2.5 완성 코드 — layout 애니메이션 (Motion의 킬러 기능)
+
+```jsx
+'use client';
+
+import { useState } from 'react';
+import { AnimatePresence, motion, LayoutGroup } from 'motion/react';
+
+const TABS = [
+  { id: 'a', label: '개요' },
+  { id: 'b', label: '가격' },
+  { id: 'c', label: '문서' },
+];
+
+export function Tabs() {
+  const [active, setActive] = useState('a');
+
+  return (
+    <LayoutGroup>
+      <div className="tabs" role="tablist">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            role="tab"
+            aria-selected={active === tab.id}
+            className="tabs__btn"
+            onClick={() => setActive(tab.id)}
+          >
+            {tab.label}
+            {active === tab.id && (
+              // layoutId가 같은 요소끼리 위치/크기를 자동 보간한다.
+              // 이게 shared element transition의 React 버전이다.
+              <motion.span
+                layoutId="tab-underline"
+                className="tabs__underline"
+                transition={{ type: 'spring', visualDuration: 0.3, bounce: 0.15 }}
+              />
+            )}
+          </button>
+        ))}
+      </div>
+    </LayoutGroup>
+  );
+}
+
+export function ReorderableList({ items, onRemove }) {
+  return (
+    <ul className="rlist">
+      <AnimatePresence mode="popLayout" initial={false}>
+        {items.map((item) => (
+          <motion.li
+            key={item.id}
+            layout                       // 위치가 바뀌면 자동으로 애니메이션
+            initial={{ opacity: 0, scale: 0.94 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.94 }}
+            transition={{ type: 'spring', visualDuration: 0.28, bounce: 0.1 }}
+            className="rlist__item"
+          >
+            {item.label}
+            <button onClick={() => onRemove(item.id)} aria-label={`${item.label} 삭제`}>×</button>
+          </motion.li>
+        ))}
+      </AnimatePresence>
+    </ul>
+  );
+}
+```
+
+```css
+.tabs__btn { position: relative; padding: 10px 16px; border: 0; background: none; cursor: pointer; }
+.tabs__underline {
+  position: absolute;
+  inset-inline: 8px;
+  inset-block-end: 0;
+  height: 2px;
+  background: currentColor;
+  border-radius: 1px;
+}
+```
+
+**layout 애니메이션 주의사항**
+- `layout` prop은 FLIP 기법이다: 레이아웃을 한 번 측정하고 **transform으로만** 애니메이션한다.
+  따라서 프레임마다 레이아웃을 다시 계산하지 않는다(성능 B등급).
+- **`border-radius`, `box-shadow`는 scale로 왜곡된다.** Motion이 `borderRadius`는 자동 보정하지만
+  padding/font-size 같은 것은 왜곡된다. 왜곡을 피하려면 자식에 `layout="position"`을 준다.
+- `layout` 요소가 많으면(50개+) 초기 측정 비용이 커진다. `layoutDependency`로 측정 시점을 제한한다.
+
+### 2.6 완성 코드 — useScroll 시차
+
+```jsx
+'use client';
+
+import { useRef } from 'react';
+import { motion, useScroll, useTransform, useSpring, useReducedMotion } from 'motion/react';
+
+export function ParallaxSection() {
+  const ref = useRef(null);
+  const reduce = useReducedMotion();
+
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    // 'start end' = 타깃의 시작이 뷰포트 끝에 닿는 지점 → progress 0
+    // 'end start'  = 타깃의 끝이 뷰포트 시작에 닿는 지점 → progress 1
+    offset: ['start end', 'end start'],
+  });
+
+  // 스프링으로 부드럽게 (선택) — 스크럽에 과하면 오히려 지연으로 느껴진다
+  const smooth = useSpring(scrollYProgress, {
+    stiffness: 120,
+    damping: 30,
+    restDelta: 0.001,
+  });
+
+  const y = useTransform(reduce ? scrollYProgress : smooth, [0, 1], ['-8%', '8%']);
+  const opacity = useTransform(scrollYProgress, [0, 0.25, 0.75, 1], [0, 1, 1, 0]);
+
+  if (reduce) {
+    return (
+      <section ref={ref} className="px">
+        <div className="px__bg" />
+        <div className="px__content"><h2>제목</h2></div>
+      </section>
+    );
+  }
+
+  return (
+    <section ref={ref} className="px">
+      <motion.div className="px__bg" style={{ y }} />
+      <motion.div className="px__content" style={{ opacity }}>
+        <h2>제목</h2>
+      </motion.div>
+    </section>
+  );
+}
+```
+
+### 2.7 React Server Components와의 공존
+
+Motion 컴포넌트는 **클라이언트 컴포넌트**다. 하지만 서버 컴포넌트 트리 안에서 쓰는 두 가지 방법이 있다.
+
+```jsx
+// 방법 1: motion/react-client — 서버 컴포넌트 파일에서 직접 사용 가능
+// (내부적으로 "use client" 경계가 이미 설정된 re-export)
+import * as motion from 'motion/react-client';
+
+export default function Page() {   // 서버 컴포넌트 — "use client" 없음
+  return (
+    <motion.section
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: 0.3 }}
+      transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+    >
+      <h1>서버에서 렌더된 콘텐츠</h1>
+    </motion.section>
+  );
+}
+```
+
+```jsx
+// 방법 2: 작은 클라이언트 래퍼를 만들고 children을 서버에서 넘긴다 — 번들에 유리
+'use client';
+import { motion } from 'motion/react';
+
+export function Reveal({ children, delay = 0 }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 24 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: 0.25 }}
+      transition={{ duration: 0.55, delay, ease: [0.16, 1, 0.3, 1] }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+```
+
+```jsx
+// 서버 컴포넌트에서
+import { Reveal } from './reveal';
+
+export default async function Page() {
+  const posts = await getPosts();   // 서버에서 데이터 페치
+  return (
+    <>
+      {posts.map((p, i) => (
+        <Reveal key={p.id} delay={i * 0.05}>
+          <article>{p.title}</article>   {/* 이 부분은 서버 컴포넌트 */}
+        </Reveal>
+      ))}
+    </>
+  );
+}
+```
+
+> **SSR 초기 상태 주의**: `initial={{ opacity: 0 }}`는 서버 HTML에도 반영된다.
+> JS가 실패하거나 늦게 로드되면 **콘텐츠가 영원히 보이지 않는다.**
+> 중요한 콘텐츠에는 `initial={false}`를 쓰거나, CSS `@supports`/`.no-js` 폴백을 둔다.
+
+```css
+/* JS 비활성/실패 시 안전망 */
+html.no-js [style*="opacity: 0"] { opacity: 1 !important; transform: none !important; }
+```
+
+### 2.8 번들 최적화
+
+```jsx
+// app/providers.tsx
+'use client';
+import { LazyMotion, domAnimation, MotionConfig } from 'motion/react';
+
+export function MotionProvider({ children }) {
+  return (
+    <LazyMotion features={domAnimation} strict>
+      {/* strict: motion.div 사용 시 에러를 던져 m.div만 쓰도록 강제 → 번들 보호 */}
+      <MotionConfig
+        reducedMotion="user"    /* 'user' | 'always' | 'never' — 'user'가 기본이자 권장 */
+        transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+      >
+        {children}
+      </MotionConfig>
+    </LazyMotion>
+  );
+}
+```
+
+```jsx
+// 컴포넌트에서는 m을 쓴다
+import * as m from 'motion/react-m';
+
+export function Card() {
+  return <m.div whileHover={{ y: -6 }} />;
+}
+```
+
+```jsx
+// 드래그/레이아웃이 필요한 페이지에서만 domMax를 지연 로드
+const loadMax = () => import('motion/react').then((m) => m.domMax);
+
+<LazyMotion features={loadMax} strict>{children}</LazyMotion>
+```
+
+---
+
+## 3. Lenis 1.3.26 — 스무스 스크롤
+
+### 3.1 논쟁: 써야 하나 말아야 하나
+
+**반대 논거 (정당하다)**
+- 스크롤은 사용자가 기대하는 **기기 고유의 물리**를 갖는다. 이것을 바꾸는 것은 시스템 관습 침해다.
+- 스크롤 재킹의 역사가 나쁘다: `position: fixed` 컨테이너를 transform으로 밀던 구식 구현은
+  스크롤바, 키보드 스크롤(Space/PageDown), 스크린리더 커서, 브라우저 검색(Ctrl+F)의 스크롤을 전부 깨뜨렸다.
+- 관성이 붙으면 **정확한 위치에 멈추기가 어렵다**. 운동 장애가 있는 사용자에게 치명적이다.
+- 지연은 **모든 사용자에게 인지 비용**이다. 프레임이 부드러워 보이는 대신 반응이 늦어진다.
+
+**찬성 논거 (역시 정당하다)**
+- Lenis는 구식 재킹이 아니다. **네이티브 스크롤 위치(`scrollTop`)를 이징할 뿐**이다.
+  스크롤바가 정상 동작하고, 문서 좌표계가 유지되며, `position: sticky`, 앵커 링크,
+  스크린리더 탐색이 모두 그대로 작동한다.
+- WebGL/Canvas와 DOM을 동기화할 때는 **스크롤을 메인 스레드에서 통제해야만** 드리프트가 사라진다.
+- 브랜드/포트폴리오 사이트에서 스크롤 감각은 실제 디자인 자산이다.
+
+**designpaca 판단 규칙**
+
+| 프로젝트 유형 | 판단 |
+|---|---|
+| 대시보드, 관리도구, 문서, 커머스 목록, 폼 중심 | **쓰지 않는다.** `scroll-behavior: smooth`로 충분 |
+| 콘텐츠 사이트, 블로그, 뉴스 | **쓰지 않는다.** 읽기를 방해한다 |
+| 브랜드 랜딩, 포트폴리오, 캠페인 | 쓸 수 있다. 단 아래 조건 전부 충족 시 |
+| WebGL과 DOM을 동기화해야 하는 경우 | 사실상 필수 |
+
+**Lenis를 쓸 때 반드시 충족할 조건**
+1. `respectReducedMotion: true` (기본값이지만 명시)
+2. `duration`은 **1.0~1.2 이하**. 그 이상은 "느리다"가 된다
+3. `syncTouch: false` (기본값). 터치 기기에서 네이티브 스크롤을 건드리지 않는다
+4. 모달/드로어가 열릴 때 `lenis.stop()`
+5. 스크롤 가능한 내부 요소(코드 블록, 지도)에 `data-lenis-prevent`
+6. 키보드 스크롤(Space, PageUp/Down, Home/End)이 정상 동작하는지 실제로 테스트
+
+### 3.2 완성 코드 — Lenis + GSAP ScrollTrigger
+
+```bash
+npm i lenis@1.3.26 gsap@3.15.0
+```
+
+```js
+import Lenis from 'lenis';
+import 'lenis/dist/lenis.css';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+let lenis = null;
+
+export function initSmoothScroll() {
+  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+  // 감소 모드에서는 아예 생성하지 않는다 (Lenis 내부 처리보다 확실하다)
+  if (reduce.matches) {
+    document.documentElement.style.scrollBehavior = 'auto';
+    return () => {};
+  }
+
+  lenis = new Lenis({
+    duration: 1.05,
+    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),  // expo.out
+    orientation: 'vertical',
+    gestureOrientation: 'vertical',
+    smoothWheel: true,
+    syncTouch: false,          // 터치는 네이티브 그대로
+    wheelMultiplier: 1,
+    touchMultiplier: 1,
+    infinite: false,
+    autoRaf: false,            // GSAP ticker로 직접 구동하므로 false
+    respectReducedMotion: true,
+    anchors: true,             // 앵커 링크를 Lenis가 처리
+    allowNestedScroll: true,   // 중첩 스크롤 컨테이너 자동 처리
+    prevent: (node) => node.hasAttribute?.('data-lenis-prevent'),
+  });
+
+  // 1) Lenis 스크롤 → ScrollTrigger 갱신
+  lenis.on('scroll', ScrollTrigger.update);
+
+  // 2) GSAP ticker가 Lenis를 구동 (RAF 루프 하나로 통일 — 이게 핵심)
+  const raf = (time) => lenis.raf(time * 1000);   // gsap는 초, lenis는 ms
+  gsap.ticker.add(raf);
+  gsap.ticker.lagSmoothing(0);   // 탭 전환 후 점프 방지
+
+  // 3) 감소 모드로 전환되면 즉시 파괴
+  const onPrefChange = (e) => { if (e.matches) destroySmoothScroll(); };
+  reduce.addEventListener('change', onPrefChange);
+
+  return () => {
+    reduce.removeEventListener('change', onPrefChange);
+    destroySmoothScroll();
+  };
+}
+
+export function destroySmoothScroll() {
+  if (!lenis) return;
+  gsap.ticker.remove((time) => lenis.raf(time * 1000));
+  lenis.destroy();
+  lenis = null;
+  ScrollTrigger.refresh();
+}
+
+// 모달 열림/닫힘 시 스크롤 잠금
+export function lockScroll(locked) {
+  if (!lenis) {
+    document.documentElement.style.overflow = locked ? 'hidden' : '';
+    return;
+  }
+  locked ? lenis.stop() : lenis.start();
+}
+
+// 프로그램적 스크롤
+export function scrollToElement(target, offset = -80) {
+  if (lenis) {
+    lenis.scrollTo(target, { offset, duration: 1.1 });
+  } else {
+    document.querySelector(target)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+}
+```
+
+```html
+<!-- 내부 스크롤 영역은 Lenis에서 제외 -->
+<pre data-lenis-prevent><code>…긴 코드…</code></pre>
+<div class="map" data-lenis-prevent></div>
+```
+
+### 3.3 Lenis 주요 옵션 (v1.3.26 README 기준)
+
+| 옵션 | 기본값 | 설명 |
+|---|---|---|
+| `duration` | `1.2` | 애니메이션 지속시간(초). **1.0~1.2 권장** |
+| `easing` | `(t) => Math.min(1, 1.001 - 2**(-10*t))` | 이징 함수 |
+| `lerp` | `0.1` | 선형 보간 강도. `duration`과 배타적 |
+| `smoothWheel` | `true` | 휠 이벤트 스무딩 |
+| `syncTouch` | `false` | 터치를 스무스 스크롤로 동기화. **켜지 말 것** |
+| `syncTouchLerp` | `0.075` | 터치 관성 lerp |
+| `touchInertiaExponent` | `1.7` | 터치 관성 강도 |
+| `orientation` | `'vertical'` | `vertical` \| `horizontal` |
+| `gestureOrientation` | `'vertical'` | 제스처 방향 |
+| `wheelMultiplier` | `1` | 휠 배율 |
+| `touchMultiplier` | `1` | 터치 배율 |
+| `infinite` | `false` | 무한 스크롤 |
+| `autoRaf` | `false` | 내부 RAF 자동 실행 |
+| `autoResize` | `true` | ResizeObserver로 자동 리사이즈 |
+| `autoToggle` | `false` | 래퍼 overflow에 따라 자동 시작/정지 |
+| `anchors` | `false` | 앵커 링크 처리 |
+| `allowNestedScroll` | `false` | 중첩 스크롤 요소 자동 처리 |
+| `overscroll` | `true` | 오버스크롤 동작 |
+| `respectReducedMotion` | `true` | reduced-motion 시 lerp를 1로 강제, 프로그램적 스크롤은 즉시 점프 |
+| `prevent` | `undefined` | `(node) => boolean` — 제외할 요소 판정 |
+| `stopInertiaOnNavigate` | `false` | 내부 링크 클릭 시 관성 정지 |
+
+### 3.4 Lenis + React
+
+```jsx
+'use client';
+
+import { ReactLenis, useLenis } from 'lenis/react';
+import { useEffect } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+export function SmoothScrollProvider({ children }) {
+  return (
+    <ReactLenis
+      root
+      options={{
+        duration: 1.05,
+        smoothWheel: true,
+        syncTouch: false,
+        autoRaf: false,
+        respectReducedMotion: true,
+      }}
+    >
+      <LenisGsapBridge />
+      {children}
+    </ReactLenis>
+  );
+}
+
+function LenisGsapBridge() {
+  const lenis = useLenis();
+
+  useEffect(() => {
+    if (!lenis) return;
+    const onScroll = () => ScrollTrigger.update();
+    lenis.on('scroll', onScroll);
+
+    const raf = (time) => lenis.raf(time * 1000);
+    gsap.ticker.add(raf);
+    gsap.ticker.lagSmoothing(0);
+
+    return () => {
+      lenis.off('scroll', onScroll);
+      gsap.ticker.remove(raf);
+    };
+  }, [lenis]);
+
+  return null;
+}
+```
+
+---
+
+## 4. 페이지 전환
+
+### 4.1 방법 매트릭스
+
+| 아키텍처 | 1순위 | 2순위 | 비고 |
+|---|---|---|---|
+| **MPA (일반 HTML/PHP/Rails)** | `@view-transition { navigation: auto; }` | Barba.js / Swup | Firefox 미지원 → 점진 향상 |
+| **Astro** | `<ClientRouter />` | — | 폴백 내장, reduced-motion 자동 대응 |
+| **Next.js App Router** | `document.startViewTransition` 수동 래핑 | `next-view-transitions` 패키지 | React `<ViewTransition>`은 아직 `unstable_` |
+| **React Router / TanStack** | Motion `AnimatePresence mode="wait"` | View Transitions | 라우터가 exit를 기다려줘야 함 |
+| **Nuxt / Vue Router** | 내장 `<Transition>` + View Transitions | — | Nuxt는 `experimental.viewTransition` |
+
+### 4.2 Astro — 완성 코드
+
+```astro
+---
+// src/layouts/Base.astro
+import { ClientRouter, fade } from 'astro:transitions';
+---
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <ClientRouter fallback="animate" />
+  </head>
+  <body>
+    <header transition:persist="site-header">
+      <nav><a href="/">홈</a> <a href="/work">작업</a></nav>
+    </header>
+
+    <main transition:animate={fade({ duration: '0.28s' })}>
+      <slot />
+    </main>
+  </body>
+</html>
+```
+
+```astro
+---
+// src/pages/work/index.astro — 썸네일에 이름 부여
+const items = await getWorkItems();
+---
+{items.map((item) => (
+  <a href={`/work/${item.slug}`}>
+    <img
+      src={item.thumb}
+      alt={item.title}
+      transition:name={`work-${item.slug}`}
+    />
+  </a>
+))}
+```
+
+```astro
+---
+// src/pages/work/[slug].astro — 같은 이름으로 받는다
+const { slug } = Astro.params;
+const item = await getWorkItem(slug);
+---
+<img src={item.hero} alt={item.title} transition:name={`work-${slug}`} />
+```
+
+```astro
+<!-- 커스텀 전환 정의 -->
+---
+const slideUp = {
+  forwards: {
+    old: { name: 'slide-out-up',   duration: '0.24s', easing: 'cubic-bezier(0.5,0,0.75,0)' },
+    new: { name: 'slide-in-up',    duration: '0.34s', easing: 'cubic-bezier(0.16,1,0.3,1)' },
+  },
+  backwards: {
+    old: { name: 'slide-out-down', duration: '0.24s', easing: 'cubic-bezier(0.5,0,0.75,0)' },
+    new: { name: 'slide-in-down',  duration: '0.34s', easing: 'cubic-bezier(0.16,1,0.3,1)' },
+  },
+};
+---
+<section transition:animate={slideUp}><slot /></section>
+
+<style is:global>
+  @keyframes slide-out-up   { to   { opacity: 0; transform: translateY(-16px); } }
+  @keyframes slide-in-up    { from { opacity: 0; transform: translateY(16px);  } }
+  @keyframes slide-out-down { to   { opacity: 0; transform: translateY(16px);  } }
+  @keyframes slide-in-down  { from { opacity: 0; transform: translateY(-16px); } }
+</style>
+```
+
+```html
+<!-- 라이프사이클 이벤트: 전환 후 스크립트 재실행 -->
+<script>
+  document.addEventListener('astro:page-load', () => {
+    // 매 페이지 전환 후 실행 — GSAP ScrollTrigger 재초기화 등
+    ScrollTrigger.refresh();
+  });
+
+  document.addEventListener('astro:before-swap', (e) => {
+    // 새 문서가 들어오기 직전 — 테마 클래스 등을 이관
+    e.newDocument.documentElement.dataset.theme =
+      document.documentElement.dataset.theme;
+  });
+
+  document.addEventListener('astro:after-swap', () => {
+    // DOM 교체 직후, 렌더 전 — 스크롤 위치 복원 등
+  });
+</script>
+```
+
+> Astro의 `<ClientRouter />`는 `prefers-reduced-motion`을 **자동으로 존중**해 모든 애니메이션을
+> 비활성화한다. 별도 처리가 필요 없다. 또한 페이지 `<title>`을 스크린리더에 자동 안내한다.
+
+### 4.3 Next.js App Router — 완성 코드
+
+```tsx
+// components/view-transition-link.tsx
+'use client';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { startTransition, type ComponentProps } from 'react';
+
+export function VTLink({ href, onClick, ...props }: ComponentProps<typeof Link>) {
+  const router = useRouter();
+
+  return (
+    <Link
+      href={href}
+      onClick={(e) => {
+        onClick?.(e);
+        if (e.defaultPrevented) return;
+        // 새 탭/수정키는 브라우저에 맡긴다
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
+        if (!document.startViewTransition) return;
+        if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+        e.preventDefault();
+        document.startViewTransition(() => {
+          // React의 전환을 동기적으로 flush하도록 startTransition으로 감싼다
+          startTransition(() => {
+            router.push(String(href));
+          });
+        });
+      }}
+      {...props}
+    />
+  );
+}
+```
+
+```css
+/* app/globals.css */
+@view-transition { navigation: auto; }   /* MPA 폴백용. App Router에선 무시돼도 무해 */
+
+::view-transition-old(root) {
+  animation: 180ms cubic-bezier(0.5, 0, 0.75, 0) both vt-out;
+}
+::view-transition-new(root) {
+  animation: 280ms cubic-bezier(0.16, 1, 0.3, 1) both vt-in;
+}
+
+@keyframes vt-out { to   { opacity: 0; transform: translateY(-8px); } }
+@keyframes vt-in  { from { opacity: 0; transform: translateY(8px);  } }
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation-duration: 100ms;
+    animation-name: vt-fade;
+  }
+  @keyframes vt-fade { from { opacity: 0; } }
+}
+```
+
+**React `<ViewTransition>` (실험적)** — Next.js 16 기준
+
+```js
+// next.config.js
+module.exports = { experimental: { viewTransition: true } };
+```
+
+```jsx
+import { unstable_ViewTransition as ViewTransition } from 'react';
+
+export default function Layout({ children }) {
+  return <ViewTransition>{children}</ViewTransition>;
+}
+```
+
+> `unstable_` 접두사는 View Transitions Level 2 사양이 아직 진화 중이기 때문이다.
+> **프로덕션에서는 위의 `document.startViewTransition` 수동 래핑을 권장한다.**
+> 안정화되면 API 이름이 바뀔 예정이다.
+
+### 4.4 Motion `AnimatePresence`로 페이지 전환 (라우터 무관)
+
+```jsx
+'use client';
+
+import { AnimatePresence, motion } from 'motion/react';
+import { usePathname } from 'next/navigation';
+
+export function PageTransition({ children }) {
+  const pathname = usePathname();
+
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      <motion.main
+        key={pathname}
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -8 }}
+        transition={{ duration: 0.24, ease: [0.16, 1, 0.3, 1] }}
+        onAnimationComplete={() => window.scrollTo({ top: 0, behavior: 'instant' })}
+      >
+        {children}
+      </motion.main>
+    </AnimatePresence>
+  );
+}
+```
+
+> **Next.js App Router의 근본 한계**: App Router는 exit 애니메이션이 끝날 때까지 라우팅을
+> 기다려주지 않는다. `mode="wait"`을 써도 새 페이지가 이미 렌더된 상태다.
+> 이 때문에 App Router에서는 **View Transitions API가 더 적합하다.**
+
+### 4.5 전환 중 스크롤 위치 처리 — 규칙
+
+| 상황 | 처리 |
+|---|---|
+| 새 페이지로 이동(push) | 최상단으로. **DOM 업데이트 콜백 안에서** `behavior: 'instant'` |
+| 뒤로 가기(pop) | 이전 스크롤 위치 복원. `history.scrollRestoration = 'auto'` 유지 |
+| shared element 전환 | 스크롤이 애니메이션 중 움직이면 스냅샷이 어긋난다. **전환 시작 전에** 위치를 확정 |
+| 앵커 이동(#hash) | `scroll-margin-block-start`로 고정 헤더 보정 |
+| 스무스 스크롤 라이브러리 사용 중 | 전환 직전 `lenis.stop()`, 전환 후 `lenis.scrollTo(0, { immediate: true })` + `lenis.start()` |
+
+```js
+// 전환 + 스무스 스크롤 통합 처리
+async function navigateWithTransition(url) {
+  lockScroll(true);                     // lenis.stop()
+  const t = document.startViewTransition(() => {
+    renderPage(url);
+    window.scrollTo({ top: 0, behavior: 'instant' });
+  });
+  await t.finished;
+  lockScroll(false);                    // lenis.start()
+  ScrollTrigger.refresh();
+}
+```
+
+---
+
+## 5. Web Animations API — 라이브러리 없는 명령형 제어
+
+번들 0KB로 타임라인 없는 명령형 애니메이션이 필요할 때.
+
+```js
+const el = document.querySelector('.box');
+
+const anim = el.animate(
+  [
+    { opacity: 0, transform: 'translateY(24px) scale(0.96)' },
+    { opacity: 1, transform: 'translateY(0) scale(1)' },
+  ],
+  {
+    duration: 480,                       // ms (CSS와 달리 숫자)
+    easing: 'cubic-bezier(0.16, 1, 0.3, 1)',   // 기본값은 'linear' (CSS는 'ease')
+    fill: 'both',
+    iterations: 1,                       // Infinity 사용 가능 ('infinite' 아님)
+    delay: 0,
+  }
+);
+
+// 제어
+anim.pause();
+anim.play();
+anim.reverse();
+anim.finish();
+anim.cancel();
+anim.playbackRate = 0.5;
+anim.currentTime = 240;
+anim.updatePlaybackRate(0.9);   // 속도를 부드럽게 변경
+
+// 완료 대기
+await anim.finished;
+
+// fill: 'forwards'를 영구 유지하는 대신 계산된 값을 스타일에 커밋 (권장)
+anim.commitStyles();
+anim.cancel();
+
+// 페이지의 모든 애니메이션 조회 (디버깅/일괄 정지에 유용)
+document.getAnimations().forEach((a) => a.pause());
+```
+
+**WAAPI + ScrollTimeline (스크롤 연동, 컴포지터 실행)**
+
+```js
+if ('ScrollTimeline' in window) {
+  const timeline = new ScrollTimeline({ source: document.documentElement, axis: 'block' });
+  document.querySelector('.progress').animate(
+    { transform: ['scaleX(0)', 'scaleX(1)'] },
+    { timeline, fill: 'both' }
+  );
+}
+
+if ('ViewTimeline' in window) {
+  document.querySelectorAll('.reveal').forEach((el) => {
+    const timeline = new ViewTimeline({ subject: el, axis: 'block' });
+    el.animate(
+      { opacity: [0, 1], transform: ['translateY(32px)', 'translateY(0)'] },
+      { timeline, rangeStart: 'entry 20%', rangeEnd: 'cover 40%', fill: 'both' }
+    );
+  });
+}
+```
+
+---
+
+## 6. three.js ↔ DOM 스크롤 동기화
+
+### 6.1 아키텍처 3가지
+
+| 방식 | 구조 | 장점 | 단점 |
+|---|---|---|---|
+| **A. 고정 캔버스 + 진행률** | `position: fixed` 캔버스, DOM이 그 위에 스크롤 | 가장 단순, 안정적 | 3D와 DOM의 픽셀 정합은 안 됨 |
+| **B. 프록시 요소 추적** | DOM에 빈 플레이스홀더를 두고 3D 오브젝트를 그 좌표에 맞춤 | DOM과 픽셀 단위 정합 | 스크롤 중 드리프트 발생 가능 |
+| **C. 스크롤 통제(Lenis/ScrollSmoother)** | 스크롤 자체를 메인 스레드에서 이징 | 드리프트 완전 제거 | 스크롤 재킹 비용 |
+
+**핵심 문제**: 브라우저의 네이티브 스크롤은 컴포지터에서 처리되지만 WebGL 렌더는 메인 스레드다.
+따라서 빠르게 스크롤하면 **DOM이 먼저 움직이고 캔버스가 한 프레임 늦게 따라온다.**
+픽셀 단위 정합이 필요하면 C 방식(스크롤 통제)이 사실상 유일한 해법이다.
+
+### 6.2 완성 코드 — 방식 A (고정 캔버스, 대부분의 경우 이걸로 충분)
+
+```html
+<canvas id="webgl"></canvas>
+<div class="content">
+  <section class="chapter" data-chapter="0"><h2>Chapter 1</h2></section>
+  <section class="chapter" data-chapter="1"><h2>Chapter 2</h2></section>
+  <section class="chapter" data-chapter="2"><h2>Chapter 3</h2></section>
+</div>
+```
+
+```css
+#webgl {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+}
+.content { position: relative; z-index: 1; }
+.chapter { min-height: 100svh; display: grid; place-items: center; }
+```
+
+```js
+import * as THREE from 'three';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+gsap.registerPlugin(ScrollTrigger);
+
+const canvas = document.getElementById('webgl');
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 100);
+camera.position.z = 6;
+
+const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+renderer.setSize(innerWidth, innerHeight);
+// DPR 상한 — 이걸 안 하면 고해상도 모바일에서 프레임이 반토막 난다
+renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+
+const mesh = new THREE.Mesh(
+  new THREE.TorusKnotGeometry(1, 0.32, 160, 24),
+  new THREE.MeshStandardMaterial({ color: 0x7c3aed, roughness: 0.35, metalness: 0.1 })
+);
+scene.add(mesh);
+scene.add(new THREE.DirectionalLight(0xffffff, 2.4).translateZ(5));
+scene.add(new THREE.AmbientLight(0xffffff, 0.6));
+
+// ── 스크롤 상태를 "목표값"으로만 저장하고, 렌더 루프에서 보간한다 ──
+const state = { targetProgress: 0, currentProgress: 0, targetRotY: 0, currentRotY: 0 };
+
+const reduce = matchMedia('(prefers-reduced-motion: reduce)');
+
+ScrollTrigger.create({
+  trigger: '.content',
+  start: 'top top',
+  end: 'bottom bottom',
+  onUpdate: (self) => {
+    state.targetProgress = self.progress;
+    state.targetRotY = self.progress * Math.PI * 2;
+  },
+});
+
+// 챕터별 이산적 상태 변화
+gsap.utils.toArray('.chapter').forEach((section, i) => {
+  ScrollTrigger.create({
+    trigger: section,
+    start: 'top 60%',
+    end: 'bottom 40%',
+    onToggle: (self) => {
+      if (!self.isActive) return;
+      gsap.to(mesh.material.color, {
+        r: [0.49, 0.93, 0.96][i],
+        g: [0.35, 0.28, 0.62][i],
+        b: [0.93, 0.6, 0.04][i],
+        duration: reduce.matches ? 0 : 0.8,
+        ease: 'power2.out',
+      });
+    },
+  });
+});
+
+// ── 렌더 루프: GSAP ticker 하나로 통일 (RAF 루프를 두 개 돌리지 않는다) ──
+const LERP = 0.09;
+
+gsap.ticker.add(() => {
+  const k = reduce.matches ? 1 : LERP;
+  state.currentProgress += (state.targetProgress - state.currentProgress) * k;
+  state.currentRotY     += (state.targetRotY     - state.currentRotY)     * k;
+
+  mesh.rotation.y = state.currentRotY;
+  mesh.position.y = -state.currentProgress * 2;
+  camera.position.z = 6 - state.currentProgress * 1.5;
+
+  renderer.render(scene, camera);
+});
+
+// 리사이즈
+let resizeRaf = null;
+addEventListener('resize', () => {
+  if (resizeRaf) cancelAnimationFrame(resizeRaf);
+  resizeRaf = requestAnimationFrame(() => {
+    camera.aspect = innerWidth / innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(innerWidth, innerHeight);
+    renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+    ScrollTrigger.refresh();
+  });
+});
+
+// 탭이 백그라운드일 때 렌더 중단 — 배터리 절약
+document.addEventListener('visibilitychange', () => {
+  document.hidden ? gsap.ticker.sleep() : gsap.ticker.wake();
+});
+```
+
+### 6.3 완성 코드 — 방식 B (프록시 요소 픽셀 정합)
+
+```html
+<div class="proxy" data-model="chair" style="aspect-ratio: 1;"></div>
+```
+
+```js
+/**
+ * DOM 요소의 화면 좌표를 three.js 월드 좌표로 변환한다.
+ * 카메라가 원점을 바라보는 PerspectiveCamera 기준.
+ */
+function domToWorld(el, camera, distance) {
+  const rect = el.getBoundingClientRect();
+
+  // 1) 화면 중심 기준 NDC(-1~1)
+  const ndcX = ((rect.left + rect.width / 2) / innerWidth) * 2 - 1;
+  const ndcY = -((rect.top + rect.height / 2) / innerHeight) * 2 + 1;
+
+  // 2) 주어진 거리에서의 뷰 평면 크기
+  const vFov = (camera.fov * Math.PI) / 180;
+  const planeH = 2 * Math.tan(vFov / 2) * distance;
+  const planeW = planeH * camera.aspect;
+
+  // 3) 월드 좌표
+  const x = (ndcX * planeW) / 2;
+  const y = (ndcY * planeH) / 2;
+
+  // 4) DOM 픽셀 크기 → 월드 단위 스케일
+  const scale = (rect.width / innerWidth) * planeW;
+
+  return { x, y, scale, visible: rect.bottom > 0 && rect.top < innerHeight };
+}
+
+const proxies = [...document.querySelectorAll('.proxy')].map((el) => ({
+  el,
+  object: modelsByName[el.dataset.model],
+}));
+
+gsap.ticker.add(() => {
+  for (const { el, object } of proxies) {
+    const { x, y, scale, visible } = domToWorld(el, camera, camera.position.z);
+    object.visible = visible;               // 화면 밖이면 렌더 스킵
+    if (!visible) continue;
+    object.position.set(x, y, 0);
+    object.scale.setScalar(scale);
+  }
+  renderer.render(scene, camera);
+});
+```
+
+> **방식 B의 필수 조건**: 스크롤이 메인 스레드에서 통제되어야 한다(Lenis/ScrollSmoother).
+> 네이티브 스크롤에서는 `getBoundingClientRect()`가 컴포지터의 최신 위치를 반영하지 못해
+> 빠른 스크롤 시 3D 오브젝트가 DOM보다 뒤처진다.
+
+### 6.4 React Three Fiber를 쓴다면
+
+`@14islands/r3f-scroll-rig`가 위의 프록시 방식(방식 B)을 프로덕션 수준으로 구현해 둔 라이브러리다.
+직접 구현하기 전에 검토한다.
+
+---
+
+## 7. 스택별 최종 판단 요약
+
+```
+CSS 네이티브     ← 기본값. 여기서 시작한다.
+   ↓ 부족하면
+WAAPI            ← 명령형 제어가 필요하지만 번들을 늘리기 싫을 때
+   ↓ 부족하면
+Motion (React)   ← 레이아웃 변화, 제스처, 스프링, AnimatePresence
+GSAP (전부)      ← 스크롤 시퀀스, 핀 고정, 텍스트 분해, SVG, 복잡한 타임라인
+   ↓ 스크롤 감각이 브랜드 요구사항이면
+Lenis            ← 단, 위 3.1의 조건 전부 충족 시에만
+```
+
+**같은 프로젝트에서 GSAP과 Motion을 둘 다 쓰는 것은 대체로 실수다.**
+번들이 두 배가 되고 두 개의 RAF 루프가 돌아간다. 예외: Motion으로 컴포넌트 마이크로 인터랙션을,
+GSAP ScrollTrigger로 페이지 레벨 스크롤 시퀀스를 담당하는 명확한 역할 분리가 있을 때.
+그 경우에도 **RAF 루프는 `gsap.ticker` 하나로 통일**한다.
diff --git a/research/references/01-gallery-catalog.md b/research/references/01-gallery-catalog.md
new file mode 100644
index 0000000..d309fb1
--- /dev/null
+++ b/research/references/01-gallery-catalog.md
@@ -0,0 +1,359 @@
+# 01 — 디자인 레퍼런스 사이트 카탈로그
+
+> 총 **155개** URL (사이트 기준 약 145곳, 일부는 하위 페이지 별도 게재).
+> 모든 URL은 2026-08-20에 실제 HTTP 요청으로 생존을 확인함.
+> `[!]` 표시는 접속 이상이 확인된 항목 (파일 하단 "링크 상태 리포트" 참조).
+>
+> **읽는 법**: `designpaca` 스킬은 작업 시작 전 반드시 이 카탈로그에서 **최소 3개**를 고르고,
+> 왜 그 3개를 골랐는지 브리프와 연결해서 말해야 한다.
+> "언제 보나" 열이 그 선택의 근거다.
+
+---
+
+## 0. 브리프 → 갤러리 라우팅 표 (먼저 이걸 본다)
+
+| 브리프 유형 | 1순위 | 2순위 | 3순위 (디테일) |
+|---|---|---|---|
+| SaaS / B2B 랜딩 | Land-book | SaaSFrame | Refero |
+| 개인·스튜디오 포트폴리오 | Awwwards | Godly | Pafolios |
+| 에이전시 / 브랜드 사이트 | SiteInspire | The FWA | The Brand Identity |
+| 이커머스 / D2C | ecomm.design | Land-book (ecommerce) | tiny blocks |
+| 모바일 앱 UI | Mobbin | Handheld.design | Scrnshts |
+| 대시보드 / 웹앱 내부 화면 | Webframe | Nicelydone | Interface Index |
+| 문서 / 개발자 도구 | Refero | Design Systems Repo | Klim (타입) |
+| 미니멀 / 정보 밀도 낮음 | Minimal Gallery | Dead Simple Sites | Httpster |
+| 개성 강한 / 실험적 | Hover States | Brutalist Websites | Browsing Mode |
+| 다크 테마 필수 | Dark Mode Design | dark.design | Godly |
+| 이메일 / 뉴스레터 | Really Good Emails | Email Love | Inbox Flows |
+| 온보딩·결제 등 플로우 설계 | Page Flows | Mobbin | UX Bites |
+| 타이포 중심 (텍스트가 주인공) | Typewolf | Fonts In Use | Typographic Posters |
+| 모션·인터랙션이 핵심 | Codrops | Eyecandy | Landing.love |
+| 한국어 사이트 / 국내 클라이언트 | 노트폴리오 | 디비컷 | GDWeb |
+
+---
+
+## 1. 종합 어워드 · 최상위 큐레이션
+
+가장 높은 완성도의 기준선. **다만 "수상용 사이트"는 실무 제약(로딩, 접근성, CMS)을 무시한 경우가 많다.**
+구조를 그대로 가져오지 말고 "톤과 야심의 상한선"으로만 써라.
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Awwwards | https://www.awwwards.com | 심사위원 채점 기반 SOTD/SOTM/SOTY | 상한선 설정, 모션·3D 야심작 | 무료 열람 / 제출·PRO 유료 | Design 40%·Usability 30%·Creativity 20%·Content 10%로 채점 |
+| Awwwards Sites of the Day | https://www.awwwards.com/websites/sites_of_the_day/ | 일별 수상작 아카이브 | "지금 뭐가 이기고 있나" 실측 | 무료 | 최근 30일치만 봐도 트렌드가 잡힌다 |
+| The FWA | https://thefwa.com | 인터랙티브·기술 실험 프로젝트 | WebGL·캠페인 사이트 브리프 | 무료 | 1999년부터 축적된 인터랙티브 아카이브 |
+| CSS Design Awards `[!]` | https://www.cssdesignawards.com | CSS·프론트엔드 품질 중심 수상작 | Awwwards보다 실무적인 기준이 필요할 때 | 무료 열람 / 제출 $25–60 | 소규모 스튜디오 비중이 높아 재현 가능성이 큼 |
+| Godly | https://godly.website | 극도로 선별된 "잘 만든 웹" | 애니메이션·스크롤 연출 상한선 | 무료 | 주당 3–5개만 등록. 신호 대 잡음비 최고 |
+| Godly 전체 목록 | https://godly.website/websites | 카테고리·기술 필터 | 스택별로 골라볼 때 | 무료 | Framer/Webflow/Next 필터 유용 |
+| Site of Sites | https://siteofsites.co | 갤러리들을 모은 메타 갤러리 | 새 레퍼런스 소스를 발굴할 때 | 무료 | 이 카탈로그의 갱신원으로 써라 |
+| MaxiBestOf | https://maxibestof.one | 개인이 고른 "베스트 오브 베스트" | 취향이 뚜렷한 소수 정예가 필요할 때 | 무료 | 큐레이터 1인 취향이라 편차가 곧 개성 |
+| Refs.gallery `[!]` | https://refs.gallery | 주간 갱신 핸드픽 웹사이트 | 최신 감각 빠른 스캔 | 무료 | 900+ 사이트, 주간 업데이트 |
+| Webdesign-inspiration | https://www.webdesign-inspiration.com | 대량 무료 갤러리 | 볼륨이 필요할 때 | 무료 | 큐레이션 강도는 낮음 |
+| A Fresh Website | https://a-fresh.website | 신선한 실험 웹 | 뻔한 안이 나올 때 흔들기용 | 무료 | 소규모지만 밀도 높음 |
+| Call to Inspiration | https://calltoinspiration.com | 웹·브랜딩 혼합 큐레이션 | 브랜드 톤까지 같이 잡을 때 | 무료 | 웹 밖의 그래픽까지 커버 |
+
+---
+
+## 2. 미니멀 · 에디토리얼 · 타입 주도
+
+여백과 타이포만으로 승부하는 브리프. **가장 실무 재현성이 높은 카테고리다.**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| SiteInspire `[!]` | https://www.siteinspire.com | 2010년부터 핸드큐레이션한 웹 | 에디토리얼·유럽식 절제된 톤 | 무료 | style/type/subject 3축 태깅이 가장 정교 |
+| Minimal Gallery | https://minimal.gallery | 미니멀 웹만 | 정보량 적고 여백 큰 브리프 | 무료 | "여백을 얼마나 줘도 되나"의 기준선 |
+| Httpster | https://httpster.net | 독립 디자이너·소규모 스튜디오 | 과하지 않은 현대적 톤 | 무료 | 타입 파운드리·스튜디오 사이트 비중 높음 |
+| Dead Simple Sites | https://deadsimplesites.com | 극단적으로 단순한 사이트 | 1페이지·랜딩·문서 | 무료 | "덜어내기"의 하한선 확인용 |
+| One Page Love | https://onepagelove.com | 원페이지 사이트 전용 | 캠페인·이벤트·개인 페이지 | 무료 (템플릿 유료) | 스크롤 서사 구조 학습에 최적 |
+| One Page Love 인스피레이션 | https://onepagelove.com/inspiration | 카테고리별 원페이지 | 업종 지정 브리프 | 무료 | 레스토랑·컨퍼런스 등 세분화 |
+| Cargo | https://cargo.site | 아티스트·에디토리얼 사이트 빌더 | 아트북 같은 레이아웃 | 유료 (빌더) | 예시 사이트 자체가 레퍼런스 |
+| Awwwards Typography | https://www.awwwards.com/websites/typography/ | 타이포 수상작만 | 텍스트가 주인공인 브리프 | 무료 | 대형 타입 스케일 실전 사례 |
+
+---
+
+## 3. 브루탈리즘 · 실험 · 안티트렌드
+
+**2026년 현재 bento 그리드의 반작용으로 다시 강해진 흐름.** 개성이 필요한 브리프에서 꺼낸다.
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Brutalist Websites | https://brutalistwebsites.com | 웹 브루탈리즘 원본 아카이브 | 규칙을 깨야 하는 브리프 | 무료 | 2014년 Pascal Deville이 만든 정전 |
+| Neubrutalism.com | https://neubrutalism.com | 네오브루탈리즘 가이드 + 사례 | 두꺼운 테두리·오프셋 그림자 스타일 | 무료 | 스타일 정의와 예시가 같이 있음 |
+| Hover States | https://hoverstat.es | 실험적 웹 프로젝트 | 인터랙션 발상 전환 | 무료 | 아트·문화기관 웹 비중 높음 |
+| Browsing Mode | https://browsingmode.com | 극단적·기이한 웹 | 안전한 안만 나올 때 | 무료 | "이래도 되나" 상한 테스트 |
+| The Whimsical Web | https://whimsical.club | 유머·놀이가 있는 개인 웹 | 사람 냄새가 필요한 브리프 | 무료 | 개인 사이트 위주 |
+| Crypto Design Club | https://cryptodesign.club | 크립토·웹3 웹디자인 | 다크·테크 톤 브리프 | 무료 | 다크+네온의 좋은 사례/나쁜 사례 대조군 |
+| HUDS + GUIS | https://hudsandguis.com | 영화 HUD·SF 인터페이스 | 데이터·모니터링 UI | 무료 | 실제 제품에 그대로 쓰면 안 되지만 발상 자극 |
+| Auto Interfaces | https://autointerfaces.com | 자동차 인포테인먼트 UI | 대형 화면·글랜서블 UI | 무료 | 정보 밀도 대비 가독성 사례 |
+
+---
+
+## 4. SaaS · 랜딩페이지 · 웹앱
+
+**가장 자주 쓰게 될 카테고리이자 AI 슬롭이 가장 심한 영역.**
+여기서 본 걸 그대로 따라가면 04번 문서의 금지 목록에 그대로 빠진다. 경계하며 봐라.
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Land-book | https://land-book.com | 심사를 거친 랜딩페이지 | SaaS·앱·스타트업 랜딩 | 무료 + 프로 | 전수 심사라 신호 대 잡음비 높음 |
+| Landingfolio | https://www.landingfolio.com | 랜딩페이지 + 섹션 컴포넌트 | 섹션 단위로 구조 뜯을 때 | 무료 + 프로 | Tailwind/Webflow/Figma 컴포넌트 동봉 |
+| Lapa Ninja | https://www.lapa.ninja | 업종별 랜딩 풀페이지 캡처 | "실제로 출시되는 것"의 평균 | 무료 | 실험성 낮고 실무성 높음 |
+| SaaS Landing Page | https://saaslandingpage.com | SaaS 랜딩 전용 | B2B 카피·섹션 순서 | 무료 | 섹션 유형별 필터 |
+| SaaSFrame | https://www.saasframe.io | SaaS 랜딩 + 앱 + 이메일 통합 | 제품 전체 여정 설계 | 무료 + 유료 | 랜딩만이 아니라 온보딩 이메일까지 |
+| SaaSpo | https://saaspo.com | SaaS 웹사이트 대량 아카이브 | 경쟁사 스캔 | 무료 | 볼륨 위주 |
+| SaaS Interface | https://saasinterface.com | SaaS 앱 내부 화면 | 로그인 후 화면 설계 | 무료 | 오래됐지만 패턴 학습용으로 유효 |
+| Refero | https://refero.design | 웹·iOS 실제 화면 30K+ | UX 패턴·UI 요소 단위 검색 | 무료 일부 + 유료 | v4에서 6,000개 플로우 + AI 검색 추가 |
+| Webframe | https://webframe.xyz | 웹앱 화면 스크린샷 | 대시보드·설정 화면 | 무료 + 유료 | "로그인 후"의 레퍼런스가 귀한데 여기 있음 |
+| Nicelydone | https://nicelydone.club | 잘 만든 SaaS 웹앱 | 컴포넌트 디테일 | 무료 | 요소별(모달·테이블·폼) 분류 |
+| Interface Index | https://interface-index.com | 다양한 인터페이스 수집 | 장르 불문 UI 발상 | 무료 | 분류가 느슨해 탐색형 |
+| UI Sources | https://www.uisources.com | 실제 앱의 인터랙션 분해 | "왜 이렇게 했나"까지 필요할 때 | 무료 일부 | 인터랙션을 글로 설명해줌 → **AI에게 특히 유용** |
+| UI Garage | https://uigarage.net | 일별 UI 패턴 | 특정 컴포넌트 아이디어 | 무료 | 패턴 태그가 촘촘함 |
+
+---
+
+## 5. 모바일 앱 · UX 플로우
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Mobbin | https://mobbin.com | 실제 출시 앱의 전체 화면·플로우 | 앱 UI, 온보딩·결제 흐름 | 무료 제한 / 유료 중심 | iOS·Android·Web 모두. 가장 깊음 |
+| Page Flows | https://pageflows.com | 사용자 여정 **영상** 기록 | 전환·에러·엣지케이스 | 유료 | 정적 캡처로 못 보는 전환이 보임 |
+| Screenlane | https://screenlane.com | 모바일 UI 스크린샷 | 빠른 화면 단위 참고 | 무료 | Page Flows로 통합됐으나 도메인 유지 |
+| Handheld Design | https://handheld.design | 개성 있는 모바일 인터페이스 | 앱이 뻔해질 때 | 무료 | 큐레이션 강도 높음 |
+| Scrnshts | https://scrnshts.club | 앱스토어 스크린샷 세트 | 스토어 등록용 비주얼 | 무료 | 마케팅 캡처의 타이포 사례 |
+| Spotted in Prod | https://spottedinprod.com | 프로덕션의 좋은 iOS 디테일 | 마이크로 인터랙션 | 무료 | 짧은 영상 위주 |
+| iOS Icon Gallery | https://www.iosicongallery.com | 앱 아이콘 | 아이콘·파비콘 방향 | 무료 | 아이콘 그리드 감각 학습 |
+| UX Bites | https://builtformars.com/ux-bites | 실제 앱의 UX 디테일 해설 | "왜 좋은지"를 언어화할 때 | 무료 | **글 설명이 있어 AI가 읽기 좋음** |
+| Details Matter | https://detailsmatter.framer.website | 마이크로 인터랙션 모음 | 디테일 한 스푼 필요할 때 | 무료 | 짧은 영상 중심 |
+| Pushkeen | https://pushkeen.ai | 푸시 알림 카피·패턴 | 알림·이메일 카피 | 무료 | 카피 톤 레퍼런스로 특이 |
+
+---
+
+## 6. 페이지 요소 단위 갤러리
+
+**"히어로만 다시 짜야 한다" 같은 국소 브리프에서 가장 효율적이다.**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Supahero | https://supahero.io | 히어로 섹션만 | 첫 화면 구조 결정 | 무료 | 히어로 유형 분류가 좋음 |
+| Navbar Gallery | https://navbar.gallery | 내비게이션 바만 | 정보구조 노출 방식 | 무료 | 메가메뉴 사례 다수 |
+| Footer.design | https://footer.design | 푸터만 | 푸터가 성의 없어질 때 | 무료 | 푸터는 AI가 항상 대충 만드는 곳 |
+| Pricing Pages | https://pricingpages.design | 요금제 페이지 | 가격표·비교표 | 무료 | 3열 카드 말고 다른 방법이 여기 있음 |
+| 404s.design | https://404s.design | 404 페이지 | 에러·빈 상태 | 무료 | 빈 상태 톤 설계 |
+| OG Image Gallery | https://ogimage.gallery | OG·공유 이미지 | 소셜 카드 | 무료 | 공유 이미지도 디자인 대상임을 상기 |
+| Unsection | https://unsection.com | 섹션·호버 효과 | 섹션 단위 조립 | 무료 | 섹션 유형 라이브러리 |
+| Bento Grids | https://bentogrids.com | 벤토 그리드 레이아웃 | 벤토를 **잘** 써야 할 때 | 무료 | 나쁜 벤토와 좋은 벤토의 차이가 보임 |
+| Social Proof Examples | https://socialproofexamples.com | 후기·로고월·지표 | 신뢰 요소 설계 | 무료 | 로고월 말고 다른 방법들 |
+
+---
+
+## 7. 이커머스 · D2C
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| ecomm.design | https://ecomm.design | 이커머스 사이트 디렉토리 | 쇼핑몰 전 페이지 | 무료 | 사용 기술(Shopify 등) 필터 |
+| tiny blocks | https://tinyblocks.cc | 이커머스 요소·컴포넌트 | 장바구니·PDP 요소 | 무료 | 요소 단위라 조립하기 좋음 |
+| Commerce Cream `[!]` | http://commercecream.com | 잘 디자인된 이커머스 | 브랜드 중심 쇼핑몰 | 무료 | **HTTPS 연결 거부 상태 — HTTP만 응답** |
+
+---
+
+## 8. 이메일 · 뉴스레터
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Really Good Emails | https://reallygoodemails.com | 19,000+ 이메일 | 트랜잭셔널·마케팅 메일 | 무료 | HTML 소스까지 열람 가능 |
+| Email Love | https://emaillove.com | 이메일 디자인·템플릿 | 뉴스레터 레이아웃 | 무료 | 브랜드별 정리 |
+| Inbox Flows | https://inboxflows.com | 이메일 **시퀀스** 전체 | 온보딩 메일 흐름 | 무료 일부 | 단발이 아니라 흐름 단위 |
+
+---
+
+## 9. 포트폴리오
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Bestfolios | https://www.bestfolios.com | 디자이너 포트폴리오·케이스스터디 | 포트폴리오 브리프 | 무료 | 이력서·케이스스터디까지 |
+| Prettyfolio | https://prettyfolio.com | 예쁜 포트폴리오 | 비주얼 중심 포트폴리오 | 무료 | 큐레이션 좋음 |
+| Pafolios | https://pafolios.com | 수상급 포트폴리오 | 개인 브랜딩 상한선 | 무료 | 어워드 수상작 위주 |
+| PFolios | https://pfolios.net | 포트폴리오 쇼케이스 | 볼륨 확보 | 무료 | 분류 단순 |
+| Sideprojectors | https://www.sideprojectors.com | 사이드 프로젝트 매물 | 인디 제품의 실제 톤 | 무료 | 갤러리는 아니지만 "인디 감성"의 원본 |
+
+---
+
+## 10. 타이포그래피 · 폰트
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Typewolf | https://www.typewolf.com | 실제 웹의 폰트 사용례 + 추천 | **폰트 결정할 때 무조건 여기 먼저** | 무료 | 폰트별 사용 사이트·대체 무료 폰트 제시 |
+| Typewolf Google Fonts | https://www.typewolf.com/google-fonts | 구글폰트 베스트 40 | 무료 폰트만 써야 할 때 | 무료 | 본문용/디스플레이용 구분 표기 |
+| Fonts In Use | https://fontsinuse.com | 폰트 사용례 아카이브 (웹·인쇄) | 폰트의 "역사적 톤" 확인 | 무료 | 산업·시대별 분류 |
+| Typographic Posters | https://typographicposters.com | 타이포 포스터 | 대형 타입 구성 | 무료 | 웹 밖에서 타입 감각 가져오기 |
+| Google Fonts | https://fonts.google.com | 무료 웹폰트 | 라이선스 걱정 없는 기본 | 무료 | 가변폰트 필터 필수 |
+| Fontshare | https://www.fontshare.com | ITF의 고품질 무료 폰트 | 구글폰트가 뻔할 때 | 무료 (상업 가능) | Satoshi·Clash Display 등 |
+| Uncut.wtf `[!]` | https://uncut.wtf | 동시대 무료 폰트 163종 | 개성 있는 무료 폰트 | 무료 | 봇 차단으로 자동 접근 어려움 |
+| Fontesk | https://fontesk.com | 무료 폰트 대량 아카이브 | 실험적 디스플레이 폰트 | 무료 | 라이선스 개별 확인 필요 |
+| Velvetyne | https://velvetyne.fr | 프랑스 오픈소스 실험 파운드리 | 브루탈·아트 브리프 | 무료 (오픈소스) | 개성이 아주 강함 |
+| Klim Type Foundry | https://klim.co.nz | 상업 파운드리 | 유료 폰트 검토 | 유료 | 사이트 자체가 타이포 레퍼런스 |
+| Pangram Pangram | https://pangrampangram.com | 상업 파운드리 | 트렌디한 유료 폰트 | 유료 (일부 개인 무료) | 현재 웹에서 가장 많이 보이는 유료 폰트들 |
+| Grilli Type | https://www.grillitype.com | 스위스 파운드리 | 정밀한 그로테스크 | 유료 | 트라이얼 제공 |
+| Displaay | https://displaay.net | 체코 파운드리 | 에디토리얼 세리프 | 유료 | 사이트 데모가 훌륭 |
+| 눈누 | https://noonnu.cc | 상업용 무료 **한글** 폰트 | 한국어 사이트 폰트 선정 | 무료 | 라이선스 범위 표기가 명확 |
+
+---
+
+## 11. 컬러 · 팔레트
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Coolors | https://coolors.co | 팔레트 생성·저장 | 빠른 후보 생성 | 무료 + 프로 | 잠금 후 재생성이 빠름 |
+| Adobe Color | https://color.adobe.com | 색 이론 + 접근성 검사 | 대비 검증까지 필요할 때 | 무료 | 색각 이상 시뮬레이션 내장 |
+| Khroma | https://www.khroma.co | 취향 학습형 팔레트 AI | 방향 탐색 초기 | 무료 | 초기 50색 선택으로 학습 |
+| Happy Hues | https://www.happyhues.co | **실제 UI에 적용된** 팔레트 | 역할 배분(배경/텍스트/강조) | 무료 | 색을 역할로 보여줘 AI에게 특히 유용 |
+| Realtime Colors | https://www.realtimecolors.com | 실제 레이아웃에 실시간 적용 | 팔레트 검증 | 무료 | 팔레트를 "페이지로" 본다 |
+
+---
+
+## 12. 인터랙션 · 모션 · 코드
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Codrops | https://tympanus.net/codrops/ | 인터랙션 튜토리얼 + 데모 | 구현 가능한 효과 찾기 | 무료 | **소스 코드까지 제공 — AI가 직접 읽을 수 있음** |
+| Codrops Tutorials | https://tympanus.net/codrops/category/tutorials/ | 단계별 구현 글 | 효과를 코드로 옮길 때 | 무료 | 2009년부터 축적 |
+| Uiverse | https://uiverse.io | 커뮤니티 CSS/Tailwind 컴포넌트 | 버튼·로더 등 소품 | 무료 | 그대로 쓰면 슬롭. 발상만 가져와라 |
+| GSAP | https://gsap.com | 모션 라이브러리 + 쇼케이스 | 타임라인·스크롤 모션 | **2026년 전면 무료** | ScrollTrigger 포함 전 플러그인 무료화 |
+| Motion (구 Framer Motion) | https://motion.dev | 웹 애니메이션 라이브러리 | React 모션 | 무료 | 문서의 이징 가이드가 좋음 |
+| LottieFiles | https://lottiefiles.com | 벡터 애니메이션 에셋 | 아이콘·일러스트 모션 | 무료 + 유료 | 남용하면 즉시 슬롭이 되니 절제 |
+| Eyecandy | https://eyecannndy.com | 모션 **기법**을 이름 붙여 분류 | "무슨 기법인지" 언어화 | 무료 | **기법명이 텍스트로 있어 AI에게 최상급 소스** |
+| Landing.love | https://www.landing.love | 애니메이션 랜딩 모음 | 스크롤 연출 참고 | 무료 | 영상 프리뷰 제공 |
+| Art of the Title | https://www.artofthetitle.com | 영화 타이틀 시퀀스 | 인트로·로딩 연출 | 무료 | 웹 밖에서 모션 언어 훔치기 |
+
+---
+
+## 13. 디자인 시스템
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Design Systems Repo | https://designsystemsrepo.com | 공개 디자인 시스템 디렉토리 | 토큰·컴포넌트 구조 참고 | 무료 | 가장 오래된 집계처 |
+| DesignSystems.one | https://www.designsystems.one | 88개 실사용 시스템 + design.md | **AI에 먹일 토큰 문서** 확보 | 무료 | 각 항목에 design.md 다운로드 제공 |
+| Designsystems.com | https://www.designsystems.com | 시스템 구축 방법론 글 | 시스템을 만들 때 | 무료 | Figma 운영 |
+| DESIGN.md | https://designmd.app | AI 에이전트용 디자인 시스템 파일 561개 | 스킬에 주입할 스타일 정의 | 무료 | **designpaca 스킬과 직접 연결되는 포맷** |
+| Refero Styles (AI Agents) | https://styles.refero.design | AI 에이전트용 디자인 프롬프트·DESIGN.md 예시 | 프롬프트 구조 설계 | 무료 | 02번 문서의 근거 소스 |
+| Nielsen Norman Group | https://www.nngroup.com | UX 리서치 원문 | 패턴의 근거가 필요할 때 | 무료 | 트렌드 대신 원칙 |
+| Smashing Magazine | https://www.smashingmagazine.com | 심층 프론트엔드·디자인 글 | 구현 근거 | 무료 | 접근성·CSS 최신 정보 |
+
+---
+
+## 14. 이미지 · 텍스처 · 그래픽 에셋
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Unsplash `[!]` | https://unsplash.com | 무료 사진 | 사진이 필요할 때 | 무료 | **"랩탑 앞 다국적 팀"류는 즉시 슬롭. 추상·질감 위주로만** |
+| Pexels | https://www.pexels.com | 무료 사진·영상 | 배경 영상 | 무료 | 위와 동일 주의 |
+| Pattern Club | https://patternclub.io | 패턴·텍스처 | 배경 질감 | 무료 일부 | 반복 패턴 |
+| Modern Illustration | https://modernillustration.org | 동시대 일러스트 | 일러스트 방향 | 무료 | 스타일 사조별 |
+| Illustration.lol | https://illustration.lol | 에디토리얼 일러스트 | 기사·블로그 삽화 | 무료 | 잡지 삽화 중심 |
+| Behance UI/UX 갤러리 | https://www.behance.net/galleries/ui-ux | UI/UX 프로젝트 케이스 | 과정과 근거 | 무료 | 다단계 케이스스터디 |
+| Data Viz Project | https://www.datavizproject.com | 차트 유형 사전 | 데이터 시각화 선택 | 무료 | 차트 유형별 적합성 |
+
+---
+
+## 15. 무드보드 · 수집 · 정리 도구
+
+**레퍼런스를 "모으는" 단계의 도구. AI 에이전트는 여기 대신 파일로 무드보드를 만든다 (02번 §4 참조).**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Are.na | https://www.are.na | 블록·채널 기반 큐레이션 | 장기 리서치 축적 | 무료 + 유료 | 한 블록이 여러 채널에 존재 → 연결형 사고 |
+| Savee | https://savee.it | 비주얼 클리핑 | 순수 시각 수집 | **유료 전용 ($9/월)** | 무료 체험 폐지됨 |
+| Cosmos | https://www.cosmos.so | AI 큐레이션 비주얼 디스커버리 | 취향 기반 탐색 | 무료 + 프로 | **AI 생성 이미지를 필터링해줌** |
+| Designspiration | https://www.designspiration.com | 색 기반 검색 가능한 수집 | 색으로 레퍼런스 찾기 | 무료 | 색 검색이 강점 |
+| Mymind | https://mymind.com | 개인 전용 자동 정리 | 혼자 쓰는 저장소 | 유료 | 태그를 자동 생성 |
+| Kive | https://kive.ai | AI 기반 에셋 검색 | 대량 에셋 관리 | 유료 | 팀 단위 |
+| Pinterest | https://www.pinterest.com | 범용 이미지 수집 | 클라이언트와 톤 합의 | 무료 | **출처 추적 불가 + AI 이미지 오염 심함. 최후순위** |
+| Muzli | https://muz.li | 디자인 뉴스 애그리게이터 | 수동적 트렌드 유입 | 무료 | 크롬 새탭 확장 |
+
+---
+
+## 16. 브랜딩 · 그래픽 · 로고
+
+웹 밖에서 톤을 훔쳐오는 곳. **웹 갤러리만 보면 웹처럼 생긴 것만 나온다.**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| The Brand Identity | https://the-brandidentity.com | 브랜딩 프로젝트 심층 | 브랜드 톤 전체 설계 | 무료 | 케이스별 근거 설명이 충실 |
+| Branding Style Guides | https://brandingstyleguides.com | 실제 브랜드 가이드라인 | 규칙 문서 작성 | 무료 | **가이드 문서 구조 자체가 참고 대상** |
+| Brand Guidelines | https://brandguidelines.net | 브랜드 가이드 아카이브 | 위와 동일 | 무료 | 보완용 |
+| Rebrand Gallery | https://rebrand.gallery | 리브랜딩 전후 비교 | 개편 브리프 | 무료 | **before/after가 있어 "왜 바꿨나"를 학습 가능** |
+| Mindsparkle Mag | https://mindsparklemag.com | 큐레이션된 그래픽 프로젝트 | 인쇄·패키지까지 | 무료 | 웹 밖 사조 유입 |
+| AIGA Eye on Design | https://eyeondesign.aiga.org | 디자인 저널리즘 | 맥락과 담론 | 무료 | 트렌드의 "이유"를 다룸 |
+| Visuelle | https://visuelle.co.uk | 동시대 그래픽 작업 | 영국·유럽 톤 | 무료 | 인쇄물 비중 높음 |
+| Inspiration Grid | https://theinspirationgrid.com | 그래픽·브랜딩 일간 | 넓은 유입 | 무료 | 볼륨형 |
+| The Index | https://theindex.website | 그래픽 디자인 디렉토리 | 스튜디오 발굴 | 무료 | 스튜디오 사이트로 이어짐 |
+| Trending.design | https://trending.design | 트렌딩 그래픽 | 지금 뜨는 것 | 무료 | 짧은 주기 |
+| Logobook | https://logobook.com | 로고 아카이브 | 마크 설계 | 무료 | 고전 로고 다수 |
+| Logo System | https://logosystem.co | 실제·가상 로고 | 로고 시스템 | 무료 | 시스템 단위 |
+| LogoLounge | https://www.logolounge.com | 대규모 로고 DB | 로고 리서치 | 유료 | 연간 트렌드 리포트로 유명 |
+| Deck.gallery | https://www.deck.gallery | 잘 만든 발표 자료 | 피치덱·소개 자료 | 무료 | 웹이 아닌 문서 디자인 |
+| Steep | https://steep.design | 스토리형 크리에이티브 | 세로 스토리 포맷 | 무료 | 모바일 세로 구성 |
+| Love The Work More | https://lovetheworkmore.com | 수상 광고 캠페인 | 카피와 아이디어 | 무료 | 웹 카피 톤 자극 |
+| Adfolio `[!]` | https://adfolio.design | 소셜 광고 | 짧은 카피 | 무료 | 봇 차단 있음 |
+
+---
+
+## 17. 아카이브 · 메타 디렉토리 · 커뮤니티
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Web Design Museum | https://www.webdesignmuseum.org | 1991–2010년대 웹 아카이브 | 레트로·노스탤지어 브리프 | 무료 | 시대별 고증이 정확 |
+| Curated.design | https://curated.design | 디자인 리소스 디렉토리 | 도구·에셋 탐색 | 무료 | 메타 디렉토리 |
+| toools.design | https://www.toools.design | 디자인 도구·리소스 대량 집계 | 도구가 필요할 때 | 무료 | 이 카탈로그의 원 소스 중 하나 |
+| Design Spells | https://www.designspells.com | "마법 같은" 디테일 순간 | 디테일 한 방 | 무료 | 짧은 클립 중심 |
+| Recent.design | https://recent.design | 최신 UI/UX | 빠른 스캔 | 무료 | 갱신 빠름 |
+| Design Vault | https://designvault.io | UI 패턴 아카이브 | 패턴 단위 | 무료 일부 | 실제 제품 캡처 |
+| Collect UI | https://collectui.com | Daily UI 기반 수집 | 컴포넌트 발상 | 무료 | Dribbble 기반이라 비현실적인 것 섞임 |
+| Viewport UI | https://viewport-ui.design | 큐레이션된 UI 경험 | 화면 단위 | 무료 | 소규모 정예 |
+| Dribbble | https://dribbble.com | 디자인 커뮤니티 | 색·타이포 발상만 | 무료 + 유료 | **구현 불가능한 "샷"이 많다. 구조 참고 금지** |
+| Behance | https://www.behance.net | 프로젝트 케이스스터디 | 과정과 근거 | 무료 | 다단계 케이스가 강점 |
+| Best Website Gallery | https://bestwebsite.gallery | 오래된 큐레이션 갤러리 | 넓은 유입 | 무료 | 2010년대 감각 다수 |
+| Humaan | https://www.humaan.com | (스튜디오) 자체 작업 | 스튜디오 수준 기준선 | 무료 | 개별 스튜디오 사이트도 레퍼런스다 |
+
+---
+
+## 18. 다크 모드 전용
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Dark Mode Design | https://darkmodedesign.com | 다크 테마 웹 | 다크가 **요구된** 브리프 | 무료 | 다크에서의 대비 처리 학습 |
+| dark.design | https://dark.design | 다크 테마 베스트 | 위와 동일 | 무료 | 큐레이션 강도 높음 |
+
+> **경고**: 다크 모드는 AI 슬롭 1순위 시그니처다. 브리프가 요구하지 않으면 다크를 기본값으로 삼지 마라 (04번 A-01 참조).
+
+---
+
+## 19. 국내(한국) 레퍼런스
+
+한국어 타이포·정보 밀도·업종 관행은 서구 갤러리에서 안 나온다. **한국어 프로젝트면 반드시 1개 이상 포함.**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| 노트폴리오 | https://notefolio.net | 국내 디자이너 포트폴리오·작업물 | 한국어 타이포·레이아웃 감각 | 무료 | 국내 최대 창작자 플랫폼 |
+| 디비컷 (DBCUT) | https://www.dbcut.com | 국내외 신규 사이트 평가·아카이브 | 국내 기업·기관 사이트 관행 | 무료 | 커뮤니티 평가 기능 |
+| GDWeb | https://gdweb.co.kr | 국내 에이전시·제작사 포트폴리오 | 국내 에이전시 수준선 | 무료 | 분야별 순위 제공 |
+| 눈누 | https://noonnu.cc | 상업용 무료 한글 폰트 | 한글 폰트 선정 | 무료 | 10번 항목과 중복 게재 |
+
+---
+
+## 링크 상태 리포트 (2026-08-20 검증)
+
+전체 155개 URL에 대해 curl로 최종 상태 코드를 확인했다. **완전히 죽은 링크는 없었다.**
+
+| 상태 | 대상 | 해석 |
+|---|---|---|
+| **HTTPS 연결 거부** | commercecream.com | DNS는 살아있으나 443 포트 연결 거부(Connection refused). HTTP로만 200 응답. **사실상 방치 상태 — 인용 시 주의**. 이 문서에서는 `http://`로 표기 |
+| 403 (봇 차단) | cssdesignawards.com | 브라우저로는 정상. 자동 접근(WebFetch/curl) 불가 |
+| 429 (레이트 리밋) | siteinspire.com, refs.gallery, adfolio.design | 정상 운영 중. 자동 접근 시 간헐 차단 |
+| 455 (Cloudflare 차단) | uncut.wtf | 정상 운영 중. 봇 차단 정책 |
+| 401 | unsplash.com | API 인증 요구. 브라우저 접근은 정상 |
+| 200 | 나머지 149개 전부 | 정상 |
+
+**AI 에이전트 관점 시사점**: 위 6개 사이트는 `WebFetch`로 읽을 수 없다.
+자동 리서치 파이프라인에서는 **Godly, Land-book, Lapa Ninja, Typewolf, Codrops, UI Sources, Eyecandy, DesignSystems.one**처럼
+텍스트 설명이 충실하고 봇 차단이 없는 소스를 1순위로 잡아라 (02번 §5 참조).
diff --git a/research/references/02-methodology.md b/research/references/02-methodology.md
new file mode 100644
index 0000000..f146ebd
--- /dev/null
+++ b/research/references/02-methodology.md
@@ -0,0 +1,410 @@
+# 02 — 레퍼런스 해체·합성 방법론
+
+> 이 문서는 두 부분이다.
+> **§1–4**: 사람 디자이너가 레퍼런스를 다루는 방식 (원리).
+> **§5–8**: 이미지를 보지 못하는 AI 에이전트가 그 원리를 실행하는 절차 (실무).
+>
+> `designpaca` 스킬은 §6의 **6축 해체 시트**와 §7의 **3-소스 합성 규칙**을 강제 산출물로 삼는다.
+
+---
+
+## 1. 원칙: 베끼기와 참고의 경계
+
+### 1.1 무엇을 훔치고 무엇을 훔치지 않는가
+
+Austin Kleon의 *Steal Like an Artist*가 말하는 "훔치기"는 결과물 복제가 아니라
+**분해 → 원리 추출 → 재조합**이다. 실무에서 이 경계는 다음과 같이 그어진다.
+
+| 훔쳐도 되는 것 (원리) | 훔치면 안 되는 것 (표현) |
+|---|---|
+| 그리드 비율 (예: 2:1 비대칭 분할) | 그 사이트의 레이아웃 전체 배치 |
+| 타입 스케일 비율 (예: 1.333) | 폰트 조합 그대로 |
+| 색의 **역할 배분** (배경 60 / 중립 30 / 강조 10) | 색상값 그 자체 |
+| 여백 리듬 (섹션 간 120px, 요소 간 24px) | 섹션 구성 순서 그대로 |
+| 모션의 **의도** (스크롤 = 시선 유도) | 특정 애니메이션 시퀀스 복제 |
+| 정보 위계 결정 (무엇을 1순위로 뒀나) | 카피 문장 |
+
+**판별 기준 한 줄**: 레퍼런스를 언어로 설명했을 때 그 설명이 **여러 다른 결과물로 구현될 수 있으면 원리**,
+하나의 결과물로만 이어지면 표현이다. 원리만 가져가라.
+
+### 1.2 레퍼런스를 3개 이상 쓰는 이유
+
+레퍼런스가 1개면 모방이다. 2개면 절충이다. **3개 이상이어야 합성이 된다.**
+그리고 3개는 서로 다른 층위에서 골라야 한다 (§7 참조).
+
+### 1.3 레퍼런스를 쓰지 않았을 때 벌어지는 일
+
+레퍼런스 없이 생성한 디자인은 학습 데이터의 **최빈값**으로 수렴한다.
+그 최빈값이 정확히 04번 문서에 나열된 AI 슬롭 시그니처다.
+레퍼런스 참고는 취향의 문제가 아니라 **최빈값 회피 장치**다.
+
+---
+
+## 2. 6축 해체 프레임워크
+
+레퍼런스 하나를 볼 때 반드시 이 6축으로 뜯는다. 축마다 **숫자 또는 규칙으로 기록**한다.
+"세련됐다", "깔끔하다" 같은 형용사는 기록이 아니다.
+
+### 축 1 — 레이아웃 그리드
+
+기록할 것:
+- 컬럼 수와 거터 (12컬럼 / 24px 거터 / 최대폭 1280px 같은 식)
+- **콘텐츠 최대폭**과 뷰포트 폭의 비 (예: 1440 뷰포트에 1120 컨테이너 = 78%)
+- 대칭인가 비대칭인가. 비대칭이면 분할 비율 (2:1, 3:2, 5:7 등)
+- 그리드를 **깨는 요소**가 있는가 (풀블리드 이미지, 오버행 타이틀)
+- 본문 텍스트 한 줄의 글자 수 (영문 45–75자 / 국문 25–40자가 정상 범위)
+
+질문: *"이 사이트는 무엇을 정렬시키고 무엇을 일부러 어긋나게 했는가?"*
+
+### 축 2 — 타입 스케일
+
+기록할 것:
+- 실제 사용된 폰트 크기 목록 (예: 14 / 16 / 20 / 32 / 56 / 96)
+- 그 사이의 **비율** (1.2 minor third / 1.25 major third / 1.333 perfect fourth / 1.5)
+- 서로 다른 크기가 **몇 단계** 쓰였나 (좋은 디자인은 보통 3–5단계. 8단계 이상이면 통제 실패)
+- 폰트 패밀리 수 (2개가 표준. 3개 이상이면 이유가 있어야 함)
+- 굵기 대비 (400 vs 700처럼 극단으로 벌렸나, 500 vs 600처럼 붙였나)
+- line-height: 본문 1.5–1.7, 헤드라인 1.0–1.2가 일반 범위
+- letter-spacing: 대형 헤드라인은 보통 음수(-0.02em ~ -0.04em)
+
+질문: *"가장 큰 글자와 본문의 비는 몇 배인가?"* (4배 미만이면 위계가 약하다)
+
+### 축 3 — 컬러 역할
+
+색상값이 아니라 **역할**을 기록한다.
+
+| 역할 | 기록 항목 |
+|---|---|
+| surface (배경) | 몇 단계의 배경이 있나. 순백/순흑인가 아니면 오프화이트/오프블랙인가 |
+| text | 본문 / 보조 / 비활성 3단계가 있나 |
+| accent | 강조색이 **몇 %의 면적**을 차지하나 (10% 이하가 정상) |
+| border | 테두리가 존재하나, 아니면 배경 차이로만 구분하나 |
+| state | hover / focus / active / disabled가 별도 색인가 |
+
+60-30-10 규칙: 지배색 60% / 중립 30% / 강조 10%.
+레퍼런스에서 이 비율이 어떻게 깨져 있는지가 그 사이트의 성격이다.
+
+질문: *"강조색을 지우면 이 페이지는 여전히 읽히는가?"* (읽혀야 정상이다)
+
+### 축 4 — 여백 리듬
+
+기록할 것:
+- 기본 단위 (4px / 8px 그리드인가)
+- 섹션 간 수직 여백 (데스크톱에서 80–160px가 일반 범위)
+- 요소 간 여백과 섹션 간 여백의 **비율** (보통 1:4 ~ 1:6)
+- 여백 값이 몇 종류인가 (4–6종이 건강. 모든 곳이 같은 값이면 리듬이 없다)
+- 좌우 패딩 (모바일 16–24px, 데스크톱 24–80px)
+
+질문: *"이 페이지에서 가장 큰 빈 공간은 어디이고, 왜 거기인가?"*
+
+### 축 5 — 모션 언어
+
+기록할 것:
+- 트리거: 로드 / 스크롤 진입 / 호버 / 클릭 / 커서 위치 중 무엇에 반응하나
+- duration: 마이크로(100–200ms) / 트랜지션(200–400ms) / 연출(600ms+)
+- easing: ease-out인가 spring인가. **bounce가 있으면 대개 잘못된 선택**이다
+- 모션이 **정보를 전달하나** (상태 변화·연속성) 아니면 장식인가
+- 스크롤 연출이 콘텐츠를 가리는가 (reveal 실패 시 빈 화면이 되는가)
+- `prefers-reduced-motion` 대응이 있나
+
+질문: *"모션을 전부 끄면 이 사이트는 여전히 작동하는가?"* (작동해야 정상이다)
+
+### 축 6 — 시선 흐름
+
+기록할 것:
+- 첫 시선 진입점 (가장 큰 대비를 가진 요소)
+- 2번째, 3번째로 눈이 가는 곳
+- 그 순서가 **비즈니스 우선순위와 일치하는가**
+- Z 패턴인가 F 패턴인가 단일 축 수직 낙하인가
+- CTA가 시선 경로 위에 있나, 아니면 옆에 비켜 있나
+
+**측정 방법 (squint test)**: 눈을 가늘게 뜨거나 이미지를 강하게 블러 처리한다.
+디테일이 사라지고 명암 덩어리만 남았을 때 먼저 보이는 것이 실제 진입점이다.
+AI 에이전트는 눈을 못 뜨므로 대신 **회색조 위계 서술**을 만든다 (§6.3).
+
+---
+
+## 3. 프로가 실제로 하는 순서
+
+1. **브리프 한 줄 먼저.** 레퍼런스를 모으기 전에 "이 사이트는 누구에게 무엇을 하게 만드나"를 한 문장으로 쓴다.
+   이 문장이 없으면 수집은 취향 나열이 된다.
+2. **넓게 모은다.** 40–60개를 빠르게 수집. 이 단계에서는 판단하지 않는다.
+3. **12–20개로 잘라낸다.** 브리프 문장과 연결되지 않는 것을 전부 버린다.
+4. **각 레퍼런스에 "역할표"를 붙인다.** 이 이미지는 색을 위해 / 이건 그리드를 위해 / 이건 질감을 위해.
+   역할이 안 붙는 레퍼런스는 그냥 예쁜 것이므로 버린다.
+5. **6축으로 해체한다** (§2). 형용사가 아니라 숫자로 기록.
+6. **합성한다** (§7).
+7. **자가 검증한다** (§8).
+
+---
+
+## 4. 무드보드 구성법
+
+### 4.1 좋은 무드보드의 조건
+
+- **결정을 내리게 하는가.** 보기 좋기만 한 보드는 실패다. 각 항목이 "이 결정을 위해 여기 있다"를 말해야 한다.
+- **의도적 그룹핑.** 색 / 질감 / 구조 / 타입 / 모션으로 묶는다. 아무데나 붙이지 않는다.
+- **반례를 포함한다.** "이렇게는 안 한다"의 예시 2–3개를 넣으면 방향이 훨씬 선명해진다.
+- **웹 밖의 것을 30% 이상 넣는다.** 웹 갤러리만 보면 웹처럼 생긴 것만 나온다.
+  인쇄물, 포스터, 패키지, 영화 타이틀, 건축 사진을 섞어라.
+
+### 4.2 AI 에이전트용 무드보드 = 텍스트 무드보드
+
+에이전트는 이미지 보드 대신 **`MOODBOARD.md` 파일**을 만든다. 형식:
+
+```markdown
+## 브리프 한 줄
+[누가] 이 페이지에 와서 [무엇]을 하게 만든다. 그때 느껴야 할 것은 [형용사 2개].
+
+## 레퍼런스 (역할 명시 필수)
+### R1 — 구조 담당: <이름> <URL>
+- 그리드: 비대칭 5:7, 최대폭 1200
+- 섹션 간 여백: 140px
+- 왜 골랐나: 브리프의 "정보량이 많지만 답답하지 않게"에 대응
+
+### R2 — 톤 담당: <이름> <URL>
+- 색 역할: 오프화이트 #F7F5F2 배경 / 잉크 #14120F 텍스트 / 강조 단 하나
+- 타입: 세리프 디스플레이 + 그로테스크 본문, 비율 1.333
+- 왜 골랐나: 브리프의 "신뢰감"
+
+### R3 — 디테일 담당: <이름> <URL>
+- 모션: 스크롤 진입 시 8px 상승 + 페이드, 320ms, ease-out
+- 호버: 밑줄이 좌→우로 그려짐
+- 왜 골랐나: 과하지 않게 살아있는 느낌
+
+## 안 할 것 (반례)
+- 보라-파랑 그라디언트 히어로
+- 아이콘 상단 배치 3열 균등 카드
+- 다크 모드 기본값
+
+## 결정 사항 (위 3개에서 합성한 결과)
+- 그리드: R1의 5:7을 채택하되 최대폭은 1120으로 축소
+- 팔레트: R2의 역할 구조 채택, 색상값은 브랜드 기준으로 교체
+- 모션: R3 채택, duration만 280ms로 단축
+```
+
+---
+
+## 5. AI 에이전트의 현실: 이미지를 못 볼 때 무엇을 하는가
+
+### 5.1 전제
+
+에이전트는 갤러리 사이트의 **스크린샷을 볼 수 없는 경우가 많다**.
+Awwwards·Godly의 카드는 이미지이고, `WebFetch`는 이미지를 텍스트로 바꿔주지 않는다.
+그러므로 전략은 **"이미지를 보는 것"이 아니라 "구조를 읽는 것"**이다.
+
+### 5.2 세 가지 접근 경로 (우선순위 순)
+
+**경로 A — 레퍼런스 사이트 본체를 직접 읽는다 (가장 정확)**
+
+갤러리에서 링크된 **원본 사이트**를 `WebFetch`한다. 갤러리 카드가 아니라 실물이다.
+얻을 수 있는 것: 카피 톤, 섹션 순서, 정보 위계, 내비게이션 구조, 헤딩 계층.
+얻을 수 없는 것: 색, 폰트, 여백, 모션 (CSS는 마크다운 변환에서 소실됨).
+
+**경로 B — 텍스트 설명이 있는 소스를 우선한다 (가장 효율적)**
+
+이미지 대신 **말로 설명해주는** 소스를 골라라. 01번 카탈로그에서 이 성격의 사이트:
+
+| 소스 | 얻는 것 |
+|---|---|
+| Typewolf | 특정 사이트가 쓴 폰트 이름 + 대체 무료 폰트 |
+| Fonts In Use | 폰트의 역사적·산업적 톤 |
+| Eyecandy (eyecannndy.com) | 모션 기법에 붙은 **이름** (예: "displacement", "kinetic type") |
+| UI Sources | 인터랙션을 문장으로 분해한 해설 |
+| UX Bites (Built for Mars) | 특정 앱 UX가 왜 좋은지 서술 |
+| DesignSystems.one | 실제 시스템의 토큰 값 (design.md 다운로드) |
+| designmd.app | AI 에이전트용으로 정제된 561개 디자인 시스템 정의 |
+| Codrops | 효과의 **소스 코드** 그 자체 |
+| Happy Hues | 색을 "역할"로 서술한 팔레트 |
+
+**경로 C — 브라우저 도구가 있으면 computed style을 뽑는다 (가장 강력)**
+
+Chrome DevTools MCP / Playwright를 쓸 수 있으면 실제 렌더된 값을 읽을 수 있다.
+이때 뽑을 것: `font-family`, `font-size`, `line-height`, `letter-spacing`, `color`,
+`background-color`, `border-radius`, `box-shadow`, `padding`, `gap`, `max-width`, `transition`.
+
+같은 일을 하는 기성 도구:
+- **Dembrandt** (`github.com/dembrandt/dembrandt`) — Playwright로 렌더 후 토큰 추출. MCP 클라이언트에서 도구로 사용 가능
+- **Design Extractor** / **Design Snap** — 크롬 확장. computed style → `design.md` 생성
+
+### 5.3 WebFetch에 던질 프롬프트 템플릿
+
+`WebFetch`는 페이지를 마크다운으로 바꿔 작은 모델에게 질문을 던진다.
+그러므로 **"예쁜지 물어보면 안 되고, 구조를 물어야 한다."**
+
+레퍼런스 사이트 본체에 던질 프롬프트:
+
+```
+이 페이지의 구조를 분석해줘. 다음을 순서대로 답해라.
+1. 상단부터 순서대로 섹션 목록 (각 섹션의 역할을 한 단어로)
+2. h1의 정확한 문장, h2 목록
+3. CTA 문구 전부와 각각의 위치
+4. 내비게이션 항목 목록
+5. 이 페이지가 독자에게 시키려는 단 하나의 행동
+6. 카피의 톤 (문장 길이, 1인칭/2인칭, 전문용어 밀도)
+7. 숫자·지표가 사용된 곳과 그 값
+추측하지 말고 페이지에 실제로 있는 것만 답해라. 없으면 "없음"이라고 써라.
+```
+
+폰트를 알고 싶을 때 (Typewolf 등):
+
+```
+이 페이지에서 언급된 폰트 이름을 전부 나열하고,
+각각이 헤드라인용인지 본문용인지, 유료인지 무료인지,
+그리고 제시된 무료 대체 폰트가 있으면 함께 적어라.
+```
+
+모션 기법을 알고 싶을 때 (Eyecandy, Codrops):
+
+```
+이 페이지에서 설명하는 애니메이션 기법의 이름, 그 기법이 무엇을 하는지,
+그리고 구현에 쓰인 CSS 속성이나 라이브러리를 나열해라.
+```
+
+### 5.4 검색으로 레퍼런스를 "말로" 확보하는 법
+
+`WebSearch`는 이미지를 못 주지만, **디자인을 서술한 글**은 준다. 유효한 쿼리 형태:
+
+- `"<사이트명>" web design analysis typography color` — 특정 사이트 분해 글
+- `awwwards site of the day <YYYY-MM> what makes it work` — 최근 수상작 해설
+- `<업종> landing page teardown 2026` — 티어다운 글
+- `<브랜드> design system tokens color typography` — 토큰 공개 여부 확인
+- `site:typewolf.com <폰트명>` — 폰트 사용례
+
+### 5.5 하지 말아야 할 것
+
+- **갤러리 홈페이지만 WebFetch하고 "레퍼런스를 봤다"고 말하기.** 홈페이지에는 카드 이미지뿐이라 정보가 없다.
+- **레퍼런스 이름만 나열하고 넘어가기.** 6축 수치가 없으면 참고한 게 아니다.
+- **이미지를 못 본다는 이유로 레퍼런스 단계를 건너뛰기.** 경로 B만으로도 폰트·색 역할·모션 언어는 확보된다.
+
+---
+
+## 6. 실전 절차: 에이전트용 8단계
+
+### 6.1 절차
+
+| 단계 | 행동 | 산출물 |
+|---|---|---|
+| 1 | 브리프를 한 문장으로 압축 | `[대상]이 [행동]하게. 느낌은 [형용사 2개]` |
+| 2 | 01번 §0 라우팅 표로 갤러리 3개 선택 | 갤러리명 3개 + 선택 이유 |
+| 3 | 각 갤러리에서 실제 사이트 URL 1개씩 확보 | 원본 URL 3개 |
+| 4 | 각 URL을 §5.3 템플릿으로 WebFetch | 섹션 구조 3벌 |
+| 5 | 텍스트 소스로 폰트·색·모션 보강 (§5.2 경로 B) | 폰트명, 팔레트 역할, 모션 기법명 |
+| 6 | **6축 해체 시트** 작성 (§2) | 축별 숫자·규칙 |
+| 7 | **3-소스 합성** (§7) | 최종 결정 사항 목록 |
+| 8 | **자가 검증** (§8) | 통과 여부 + 재작업 항목 |
+
+### 6.2 6축 해체 시트 템플릿
+
+```markdown
+### 레퍼런스: <이름> — <URL>
+| 축 | 관측값 | 내 프로젝트에 가져갈 것 |
+|---|---|---|
+| 그리드 | 최대폭 1200 / 비대칭 7:5 / 거터 32 | 비대칭 비율만 |
+| 타입스케일 | 15/17/21/34/68 (≈1.28) / 패밀리 2개 | 비율 1.25로 조정해 채택 |
+| 컬러 역할 | 배경 1단계 / 텍스트 3단계 / 강조 1색 · 면적 6% | 구조 채택, 색상값 교체 |
+| 여백 리듬 | 8px 단위 / 섹션간 120 / 요소간 24 (1:5) | 그대로 |
+| 모션 | 스크롤 진입 fade+8px / 300ms / ease-out | 채택, 280ms |
+| 시선 흐름 | 대형 헤드라인 → 제품샷 → CTA (단일 수직축) | 채택 |
+```
+
+### 6.3 이미지를 못 볼 때의 squint test 대체 — "회색조 위계 서술"
+
+에이전트는 실제 화면을 흐리게 볼 수 없으므로, **자기가 만들 화면**에 대해 다음을 문장으로 쓴다.
+
+```
+색을 전부 제거하고 회색조로 봤을 때 이 페이지에서 가장 어두운(=가장 강한) 덩어리는 ___이고,
+두 번째는 ___, 세 번째는 ___이다.
+이 순서는 비즈니스 우선순위 [1위 ___ / 2위 ___ / 3위 ___]와 일치한다 / 일치하지 않는다.
+```
+
+일치하지 않으면 크기·굵기·대비를 조정한다. **색으로 해결하려 들지 마라** — 색을 빼도 위계가 서야 한다.
+
+---
+
+## 7. 3-소스 합성 규칙
+
+### 7.1 층위를 분리해서 고른다
+
+레퍼런스 3개를 **같은 층위에서 고르면 안 된다**. 3개 다 "예쁜 랜딩페이지"면 평균이 나온다.
+반드시 아래처럼 역할을 나눠 고른다.
+
+| 슬롯 | 무엇을 가져오나 | 어디서 고르나 |
+|---|---|---|
+| **R1 · 구조(Skeleton)** | 그리드, 섹션 순서, 정보 위계, 여백 리듬 | 같은 업종·같은 목적의 사이트 (Land-book, Refero, Lapa Ninja) |
+| **R2 · 톤(Skin)** | 색 역할, 타입 페어링, 질감, 형태 언어 | **다른 업종**의 사이트 또는 웹이 아닌 것 (SiteInspire, The Brand Identity, Typographic Posters) |
+| **R3 · 디테일(Spark)** | 모션 하나, 호버 하나, 전환 하나 | Codrops, Eyecandy, Design Spells, Details Matter |
+
+**핵심은 R2가 R1과 다른 업종이어야 한다는 것.**
+SaaS 구조 + SaaS 톤 = 또 하나의 SaaS 슬롭.
+SaaS 구조 + 독립 출판사의 톤 = 차별화.
+
+### 7.2 합성 시 충돌 해결 규칙
+
+레퍼런스 3개가 서로 어긋날 때의 우선순위:
+
+1. **가독성·접근성이 항상 이긴다.** R2의 톤이 대비를 깨면 톤을 조정한다.
+2. **R1의 구조가 R3의 모션을 이긴다.** 모션 때문에 구조를 바꾸지 않는다.
+3. **브리프 한 줄이 모든 레퍼런스를 이긴다.** 레퍼런스가 브리프와 충돌하면 레퍼런스를 버린다.
+4. **하나의 축은 하나의 소스에서만 가져온다.** 그리드는 R1에서만, 팔레트는 R2에서만.
+   축을 섞으면 이유 없는 절충이 된다.
+
+### 7.3 "그대로 가져오지 않았음"을 증명하는 변형 3가지
+
+각 레퍼런스마다 최소 하나씩 의도적으로 바꾼다. 그리고 **왜 바꿨는지 한 줄로 적는다.**
+
+- **비율 변형**: 타입 스케일 1.333 → 1.25 (정보량이 많아 단계 간 점프를 줄임)
+- **역전 변형**: 레퍼런스는 좌측 텍스트/우측 이미지 → 우측 텍스트/좌측 이미지 (읽기 흐름상 CTA를 우하단에 두기 위해)
+- **제거 변형**: 레퍼런스의 3개 요소 중 1개 삭제 (해당 정보가 우리 브리프엔 없음)
+
+---
+
+## 8. 자가 검증 체크리스트
+
+### 8.1 Awwwards 채점 축으로 자가 채점
+
+Awwwards의 실제 배점은 **Design 40% / Usability 30% / Creativity 20% / Content 10%**이다.
+Creativity가 20%뿐이라는 점이 중요하다 — **화려함은 4순위다.**
+
+| 항목 | 자문 | 통과 기준 |
+|---|---|---|
+| Design 40 | 타입 스케일·그리드·리듬이 전 브레이크포인트에서 일관한가 | 6축 시트의 값이 실제 코드에 반영됐는가 |
+| Usability 30 | 모션 끄고, 색 빼고, 키보드만으로 쓸 수 있는가 | 3개 다 예 |
+| Creativity 20 | 이 페이지에 **이 프로젝트만의 결정**이 최소 1개 있는가 | 그 결정을 한 문장으로 말할 수 있어야 함 |
+| Content 10 | 카피가 경쟁사 이름으로 바꿔도 말이 되는가 | 말이 되면 실패 (§8.2) |
+
+### 8.2 경쟁사 치환 테스트
+
+카피에서 제품/회사 이름을 경쟁사 이름으로 바꿔 읽는다.
+**여전히 자연스러우면 그 카피는 아무것도 말하지 않는 것이다.** 다시 써라.
+
+### 8.3 최종 게이트 (하나라도 걸리면 재작업)
+
+- [ ] 레퍼런스 3개의 **URL**과 각각의 **역할(R1/R2/R3)**을 말할 수 있다
+- [ ] 6축 해체 시트에 형용사가 아닌 **숫자**가 들어 있다
+- [ ] R2가 R1과 **다른 업종**이다
+- [ ] 각 레퍼런스마다 **의도적 변형 1개**와 그 이유가 있다
+- [ ] 회색조 위계 순서가 비즈니스 우선순위와 일치한다
+- [ ] 04번 문서의 금지 목록을 훑고, 걸린 항목이 없다
+- [ ] 모션을 전부 끄고도 페이지가 작동한다
+- [ ] 강조색을 지워도 페이지가 읽힌다
+- [ ] 카피가 경쟁사 치환 테스트를 통과한다
+
+---
+
+## 9. 요약 카드 (스킬에 그대로 넣을 수 있는 형태)
+
+```
+[레퍼런스 프로토콜]
+1. 브리프 1줄 → 2. 갤러리 3개 선택(01번 §0 라우팅) → 3. 원본 URL 3개 확보
+4. WebFetch 구조 분석(02번 §5.3 템플릿) → 5. 텍스트 소스로 폰트·색·모션 보강
+6. 6축 해체 시트(그리드/타입스케일/컬러역할/여백리듬/모션언어/시선흐름)
+7. 3-소스 합성(R1 구조 · R2 톤 · R3 디테일, R2는 반드시 다른 업종)
+8. 자가 검증(§8.3 9개 항목) → 하나라도 실패 시 6번으로 복귀
+
+[금지]
+- 갤러리 홈만 열어보고 "참고했다"고 말하기
+- 형용사만 적힌 해체 시트
+- 3개 레퍼런스를 같은 층위에서 고르기
+- 이미지를 못 본다는 이유로 이 절차를 건너뛰기
+```
diff --git a/research/references/03-trends-2026.md b/research/references/03-trends-2026.md
new file mode 100644
index 0000000..b4e8e7f
--- /dev/null
+++ b/research/references/03-trends-2026.md
@@ -0,0 +1,325 @@
+# 03 — 2026 웹디자인 트렌드 실측
+
+> 기준 시점: **2026년 8월**. 수치는 각 출처가 밝힌 실측치이며, 출처는 05번 문서에 대응.
+> 트렌드 나열이 아니라 **"지금 실제로 이기고 있는 것 / 죽은 것"**을 구분하는 게 목적이다.
+
+---
+
+## 1. Awwwards 수상작 실측 (2026 Q1, SOTD 47건 기준)
+
+### 1.1 채점 구조 — 화려함은 4순위다
+
+| 항목 | 배점 | 의미 |
+|---|---|---|
+| Design | **40%** | 타이포 체계, 스케일 일관성, 리듬, 위계, 여백 긴장감 |
+| Usability | **30%** | 실제 기기에서의 성능·조작성 |
+| Creativity | **20%** | WebGL·인터랙션 등 "볼거리" |
+| Content | **10%** | 카피와 정보 |
+
+심사는 최소 18명의 심사위원에게 배분되며, 평균에서 가장 먼 3개 점수는 자동 제외된다. 투표 기간은 5일.
+
+> **핵심 시사점**: Design(40) + Usability(30) = 70%가 **타이포·그리드·성능**이다.
+> 화려한 3D를 추가하는 것보다 타입 스케일을 정돈하는 편이 점수에 2배 유리하다.
+
+### 1.2 2026 Q1 수상작 기술 분포
+
+| 항목 | 수치 |
+|---|---|
+| 몰입형 3D 경험 비중 | **61%** (2024 Q1 23% → 2.6배) |
+| Three.js를 주 렌더러로 사용 | 47건 중 **29건** |
+| 커스텀 WebGL(직접 셰이더) | 8건 |
+| Babylon.js | 4건 |
+| WebGL 미사용 | 6건 |
+| 스크롤 기반 서사 채택률 | 87% |
+| 카메라 스플라인 애니메이션 | 82% |
+| 커스텀 GLSL 셰이더 | 78% |
+| 물리 기반 인터랙션 | 71% |
+| 공간 오디오 | 54% |
+| WebXR | 31% |
+| 배경 비디오 사용 | **8% 미만** (2022년 40%+ → 급감) |
+
+**성능 기준**: 스크롤 중 60fps 유지, 애니메이션 루프 프레임당 4ms 미만.
+심사위원이 실제 기기에서 테스트하므로 중급 기기에서 버벅이면 탈락한다.
+
+**업종 분포**: 럭셔리 패션 28% / 자동차 22% / 건축·부동산 18% / 문화기관 14% / **테크·SaaS 5% 미만**.
+
+> **결정적 시사점**: Awwwards 수상작은 대부분 **SaaS가 아니다.**
+> SaaS 랜딩 브리프에 Awwwards 스타일을 그대로 적용하면 목적이 어긋난다.
+> Awwwards는 "야심의 상한선"으로만 쓰고, 구조는 Land-book·Refero에서 가져와라.
+
+### 1.3 2026년 실제 수상작 사례
+
+| 사이트 | URL | 수상 | 무엇이 통했나 |
+|---|---|---|---|
+| By-Kin | https://by-kin.com/ | Awwwards SOTD + Developer Award, FWA, CSSDA | 확신 있는 **에디토리얼 타이포**, 무게감 있는 스무스 스크롤, 티 안 나는 전환. Next.js + GSAP + Strapi |
+| Iventions | https://iventions.com/ | CSSDA Website of the Month, Awwwards SOTD | Three.js의 **조명 설계**로 프로젝트를 "스포트라이트 설치물"처럼 다룸. 화려함이 아닌 분위기 |
+| Mat Voyce | https://matvoyce.tv | Awwwards SOTD, GSAP SOTY 노미네이트 | 타임라인 기반 **키네틱 타입** — 글자가 늘어나고 붙는데 가독성은 유지 |
+| Uncommon Studio | https://uncommonstudio.com.au/ | Awwwards SOTD + Developer Award, FWA | 정확한 지점에서만 깨지는 그리드, 카메라 무빙 같은 GSAP 전환 |
+| Minh Pham | https://minhpham.design/ | Awwwards SOTD (개발 점수 7.77) | GSAP 모션 위에 Three.js — **3D가 작업물을 압도하지 않음** |
+
+공통점 4가지:
+1. **아트 디렉션이 하나의 아이디어로 통일**되어 있다. 장식된 템플릿이 아니다.
+2. **타이포가 주인공**이고 3D는 프레임 역할이다.
+3. 전환이 **자기 존재를 드러내지 않는다.**
+4. 빠르다. 느린 3D는 심사에서 탈락한다.
+
+---
+
+## 2. 살아남은 트렌드 vs 과대평가된 트렌드
+
+한 스튜디오가 2026년 상반기 실제 클라이언트 작업으로 검증한 결과.
+
+### 2.1 예상대로 통한 것
+
+| 트렌드 | 실측 |
+|---|---|
+| **벤토 그리드** | 12컬럼 대비 스크롤 깊이 **+23%**. Apple·Google·Spotify가 채택하며 표준화 |
+| **다크 모드 지원** | 스마트폰 사용자 **82%+**가 최소 1개 앱을 다크로 사용. 다크 대응 사이트 세션 길이 **+18%** |
+| **디자인 시스템·토큰** | 토큰 시스템 + 컴포넌트 라이브러리 + 시각 회귀 테스트가 표준이 됨 |
+
+> 다크 모드에 대한 정확한 해석: **"다크를 지원하라"이지 "다크를 기본값으로 하라"가 아니다.**
+> 토큰 기반으로 두 테마를 모두 성립시키는 게 핵심이다.
+
+### 2.2 과대평가된 것
+
+| 트렌드 | 실제로 벌어진 일 |
+|---|---|
+| **키네틱 타이포그래피** | 데모에서는 훌륭하나 프로덕션에 거의 안 들어감. 스크린리더와 충돌, 크롤러와 충돌, 레이아웃 시프트 유발 |
+| **글래스모피즘 2.0** | 실사용 기기에서 **FPS 15–30% 하락**. 내비게이션 바와 모달 정도로 용도 제한 |
+| **유기적 블롭 형태** | 랜딩페이지에만 등장. B2B SaaS·이커머스의 전환 경로에는 거의 안 씀 |
+
+### 2.3 기대에 못 미친 것
+
+| 트렌드 | 이유 |
+|---|---|
+| **3D / WebGL의 보편화** | 히어로에 Spline 씬 하나 넣으면 JS 런타임 **800KB–2MB**. 모바일 4G에서 Core Web Vitals 실패 |
+| **AI 개인화** | GDPR 동의 흐름이 전제를 무너뜨림 (유럽 시장) |
+| **지속가능 웹디자인** | 담론에 머물고 실제 채택은 저조 |
+
+### 2.4 예상 밖으로 부상한 것
+
+| 트렌드 | 내용 |
+|---|---|
+| **AI 가독성 레이어** | schema 마크업, `llms.txt`, `agents.json`. AI 경유 유입이 실측되기 시작 (한 스튜디오 3개월간 Bing Copilot 인용 2,300건) |
+| **안티그리드 브루탈리즘** | 벤토가 흔해지자 반작용으로 등장. 의도적으로 깨진 레이아웃, 모노스페이스 타이포. **차별화 수단** |
+
+> **designpaca 관점 결론**: 3D를 기본 무기로 삼지 마라. 2026년의 실전 승부처는
+> **타이포 체계 + 여백 리듬 + 성능**이고, 개성은 3D가 아니라 **타입과 색 결정**에서 나온다.
+
+---
+
+## 3. 타이포그래피 트렌드
+
+### 3.1 흐름
+
+| 흐름 | 내용 | designpaca 적용 |
+|---|---|---|
+| **세리프 부활** | 에디토리얼·미디어 중심으로 복귀. 단 고전 세리프가 아니라 **높은 대비 + 날카로운 디테일**의 현대적 리바이벌 | AI가 sans 워드마크를 몇 초에 만들어내는 시대에 세리프는 "의도와 공예"의 신호가 된다. **차별화 1순위 카드** |
+| **가변 폰트** | 2026년 기준 선택이 아니라 **인프라**. 한 파일로 굵기·폭·광학 크기 전환 | 로딩 비용 감소 + 유연한 스케일. 기본 채택 |
+| **초대형 타입** | 헤드라인이 뷰포트 높이를 채움. 글자가 구조 요소 역할 | 스크롤 중 "쉼표" 역할. 단 본문 위계를 죽이지 않게 |
+| **키네틱 타입** | 데모용으로는 강력하나 프로덕션 채택률 낮음 (§2.2) | 접근성·SEO 리스크를 감수할 이유가 있을 때만 |
+| **대비의 극단화** | 표현적 디스플레이 + 실용적 본문의 조합 | 패밀리 2개 원칙 유지, 대신 성격 차이를 크게 |
+
+### 3.2 실전 타입 스케일 기준
+
+- **비율**: 1.25 (major third) 또는 1.333 (perfect fourth)가 웹 표준 범위.
+  1.2는 위계가 약하고, 1.5 이상은 중간 단계가 비어 답답해진다.
+- **단계 수**: 3–5단계. 8단계 이상이면 통제 실패 신호.
+- **최대/본문 비**: 4배 이상 확보 (예: 본문 17px → 히어로 68px).
+- **line-height**: 본문 1.5–1.7 / 대형 헤드라인 1.0–1.15.
+- **letter-spacing**: 대형 헤드라인 -0.02em ~ -0.04em / 본문 0 / 소형 대문자 라벨은 +0.08em.
+  **본문에 0.05em 이상 주면 가독성이 무너진다.**
+- **한 줄 글자 수**: 영문 45–75자 / **국문 25–40자**.
+
+---
+
+## 4. 컬러 트렌드
+
+### 4.1 2026년 두 갈래
+
+| 방향 | 성격 | 대표 톤 | 적합 브리프 |
+|---|---|---|---|
+| **따뜻함·촉각** | Quiet Luxury, New Botanicals, Solar Warmth, Muted Earth | 고급 중립색, 부드러운 초록, 볕에 익은 산호, 흙빛 클레이 | 브랜드, 라이프스타일, D2C, 문화기관 |
+| **차갑고 디지털** | Digital Calm, Digital Neon | 저자극 블루, 보이드 블랙 위 고전압 액센트 | 핀테크·인프라(전자) / 게이밍·테크(후자) |
+
+Pantone 2026 올해의 색: **Cloud Dancer (PANTONE 11-4201)** — 중립색이 주도.
+
+> **주의**: "Digital Neon on void black"은 04번 문서의 슬롭 시그니처와 **한 끗 차이**다.
+> 브리프가 게이밍·개발자 도구처럼 명확히 요구할 때만 쓰고, 그때도 네온은 액센트 10% 이내로 묶어라.
+
+### 4.2 색 시스템 기술 표준
+
+- **OKLCH가 사실상 표준.** 지각적으로 균일한 밝기 축을 가져 톤 스케일을 프로그램으로 생성해도 대비가 고르게 나온다.
+  많은 디자인 시스템이 **토큰은 OKLCH로 저장하고 빌드 시 HEX로 내보낸다.**
+- **의미 기반 토큰 필수.** `purple-500`이 아니라 `color-action-primary`, `color-surface-elevated`, `color-text-secondary`.
+- **톤 스케일 10–11단계**, 500이 원색. `color-mix()`로 파생하되 접근성을 위해 chroma를 클램프.
+- **대비 검증**: WCAG 2 기준 본문 4.5:1 / 대형 텍스트 3:1. APCA를 쓴다면 본문 **Lc ≥ 75**.
+
+### 4.3 팔레트 구성 규칙
+
+- 색상(hue)은 **3개 이하**.
+- 면적 배분 60(지배) / 30(중립) / 10(강조).
+- **순백 `#fff` / 순흑 `#000`을 피하고** 오프화이트·오프블랙을 쓴다 (예: `#FAFAF7`, `#111014`).
+  순백·순흑은 슬롭 시그니처이자 눈부심·번짐의 원인이다.
+- 강조색을 제거해도 페이지가 읽혀야 한다.
+
+---
+
+## 5. 모션 트렌드
+
+### 5.1 기술 지형 변화 — 2026년의 가장 큰 사건
+
+| 변화 | 내용 |
+|---|---|
+| **CSS 스크롤 기반 애니메이션 전 브라우저 지원** | `animation-timeline`, `view-timeline`, `timeline-scope`. JS 0KB로 reveal·패럴랙스 구현 |
+| **View Transitions API 크로스브라우저 안착** | SPA 라우트 전환을 CSS만으로. 브라우저가 이전/이후 상태를 스냅샷 |
+| **GSAP 전면 무료화** | ScrollTrigger 포함 모든 플러그인 무료 |
+
+**선택 기준**:
+- reveal, 패럴랙스, 스티키 진행 표시 → **CSS scroll-driven** (컴포지터에서 실행, JS 없음)
+- 페이지·라우트 전환 → **View Transitions API**
+- 복잡한 타임라인, 순차 오케스트레이션, 핀 고정 스크롤 시퀀스 → **GSAP**
+- React 컴포넌트 단위 상태 모션 → **Motion (motion.dev)**
+
+### 5.2 모션 설계 기준값
+
+| 용도 | duration | easing |
+|---|---|---|
+| 마이크로 (호버, 포커스, 토글) | 100–200ms | ease-out |
+| 트랜지션 (모달, 드로어, 탭) | 200–400ms | ease-out / cubic-bezier(0.2, 0, 0, 1) |
+| 연출 (히어로 진입, 스크롤 시퀀스) | 600–1200ms | 커스텀 베지어 |
+| 페이지 전환 | 300–500ms | ease-in-out |
+
+**금지 사항**:
+- 인터페이스 요소에 bounce/elastic 이징 — 2010년대 감성이고 즉시 촌스러워진다
+- 모든 요소에 같은 fade-in — 슬롭 1순위 모션 시그니처
+- reveal 실패 시 콘텐츠가 `opacity: 0`으로 남는 구현
+- `prefers-reduced-motion` 미대응
+
+### 5.3 모션 아이디어의 출처
+
+Awwwards 수상작을 보고 "저거 어떻게 하지"가 아니라, **기법 이름을 먼저 확보**하라.
+`eyecannndy.com`은 모션 기법마다 이름을 붙여 분류해두었고, `Codrops`는 같은 기법의 소스 코드를 준다.
+이 둘의 조합이 AI 에이전트가 모션을 다루는 가장 실용적인 경로다.
+
+---
+
+## 6. 레이아웃 트렌드
+
+| 패턴 | 상태 | 주의 |
+|---|---|---|
+| **벤토 그리드** | 표준화 완료. 스크롤 깊이 +23% | 이제 **기본값이라 차별화가 안 된다.** 2026년의 벤토는 정적 타일이 아니라 호버 시 열리거나 영상이 재생되는 "활성 벤토" |
+| **비대칭 / 깨진 그리드** | 벤토의 반작용으로 상승 | 규칙 위에서 깨야 한다. 규칙 없이 깨면 그냥 사고다 |
+| **에디토리얼 레이아웃** | 세리프 부활과 함께 | 텍스트 컬럼 폭 통제가 핵심 |
+| **안티그리드 브루탈리즘** | 차별화 수단으로 부상 | 모노스페이스 + 원시 HTML 미학. 브랜드가 감당할 수 있을 때만 |
+| **3열 균등 카드** | **죽었다** | 04번 문서 참조. AI 슬롭의 핵심 시그니처 |
+
+---
+
+## 7. 폰트 추천
+
+### 7.1 무료 — 영문 (구글 폰트 / Fontshare)
+
+| 폰트 | 성격 | 용도 | 출처 |
+|---|---|---|---|
+| **Fraunces** | 가변 세리프, 부드러움·광학 크기 축 조절 가능 | 디스플레이 + 본문 겸용 | Google Fonts |
+| **Instrument Serif** | 고대비 디스플레이 세리프 | 히어로 헤드라인 | Google Fonts |
+| **Spectral** | 화면용 세리프, 본문 가독성 좋음 | 긴 본문 | Google Fonts |
+| **Lora** | 브러시 계열 세리프 | 에디토리얼 본문 | Google Fonts |
+| **DM Sans** | 기하학 산세, 중립적이되 Inter보다 성격 있음 | 본문·UI | Google Fonts |
+| **Work Sans** | 그로테스크, 넓은 굵기 범위 | 본문·헤드라인 | Google Fonts |
+| **Libre Franklin** | 프랭클린 고딕 계열, 미국적 신문 톤 | 본문 | Google Fonts |
+| **IBM Plex Sans / Mono** | 기업적이되 개성 있음 | 개발자 도구·문서 | Google Fonts |
+| **Archivo / Archivo Narrow** | 강한 그로테스크, 축약형 있음 | 헤드라인 | Google Fonts |
+| **Satoshi** | 현대적 기하학 산세 | 본문·UI (Inter 대체) | Fontshare |
+| **Clash Display** | 개성 강한 디스플레이 | 히어로 | Fontshare |
+| **Switzer** | 스위스 그로테스크 계열 | 본문·UI | Fontshare |
+| **Chillax / Cabinet Grotesk** | 부드러운 그로테스크 | 브랜드 톤 | Fontshare |
+| **JetBrains Mono** | 모노스페이스, 가독성 좋음 | 코드·라벨 | Google Fonts |
+
+> **Inter는 금지가 아니라 "기본값 금지"다.** 명확한 이유(다국어 UI, 초고밀도 대시보드)가 있으면 쓴다.
+> 이유 없이 쓰면 04번 B-01에 걸린다. Satoshi·Switzer·DM Sans가 거의 언제나 더 나은 선택.
+
+### 7.2 유료 — 영문 (파운드리)
+
+| 파운드리 | 대표 폰트 | 성격 |
+|---|---|---|
+| **Klim** (klim.co.nz) | Söhne, Signifier, Tiempos | 정밀하고 조용한 고급감. Söhne는 현재 웹에서 "비싼 톤"의 표준 |
+| **Pangram Pangram** (pangrampangram.com) | Neue Montreal, PP Editorial New, Right Grotesk | 트렌디. 개인 사용 무료 항목 있음 |
+| **Grilli Type** (grillitype.com) | GT America, GT Walsheim, GT Sectra | 스위스 정밀. 트라이얼 제공 |
+| **Displaay** (displaay.net) | Nichrome, Signal | 에디토리얼 세리프 강세 |
+| **Velvetyne** (velvetyne.fr) | Karrik, Basteleur, Terminal Grotesque | **무료 오픈소스**인데 개성이 유료급. 브루탈·아트 브리프 |
+
+### 7.3 무료 — 한글
+
+한국어 사이트는 **영문 폰트만 지정하면 한글이 시스템 기본(맑은 고딕/애플 SD 산돌고딕)으로 떨어진다.**
+이건 그 자체로 완성도 미달 신호다. 반드시 한글 폰트를 명시하라.
+
+| 폰트 | 제작 | 성격 | 웹폰트 | 라이선스 | 언제 |
+|---|---|---|---|---|---|
+| **Pretendard** | 길형진 (orioncactus) | system-ui 대체. Thin(100)–Black(900) 9단계, 가변 버전 존재 | O (jsDelivr CDN) | SIL OFL | **기본값. 고민되면 이거** |
+| **Pretendard Variable** | 동일 | 가변 폰트 단일 파일 | O | SIL OFL | 웹에서는 static보다 이쪽 (용량 유리) |
+| **본고딕 / Noto Sans KR** | Adobe·Google | 한중일 통합, 굵기 7단계 | O | SIL OFL | 다국어 혼용, 안정성 최우선 |
+| **본명조 / Noto Serif KR** | Adobe·Google | 명조 계열 | O | SIL OFL | 에디토리얼 본문 |
+| **마루 부리** | 네이버 | 현대적 명조. 세련되고 부드러움 | O | SIL OFL | **세리프 부활 트렌드의 한글 대응. 강력 추천** |
+| **에스코어 드림** | S-Core | 굵기 9단계, 완성도 높은 고딕 | O | 상업 무료 | Pretendard 대안 |
+| **Spoqa Han Sans Neo** | 스포카 | 숫자·영문 가독성 우수 | 배포 파일 사용 | SIL OFL | 대시보드·수치 많은 UI |
+| **리디바탕** | 리디 | 화면 가독성 최적화 명조 | 배포 파일 사용 | SIL OFL | 긴 글 읽기 |
+| **페이퍼로지 (Paperlogy)** | 이주임 × Paperlogy | 기하학 산세, 9단계 | O | SIL OFL | 프레젠테이션·헤드라인 |
+| **나눔고딕 / 나눔명조** | 네이버 | 가장 널리 쓰임 | O | SIL OFL | **너무 흔해서 개성이 없다. 폴백으로만** |
+| **조선일보명조체** | 조선일보 | 전통적 명조, 고급감 | O | 상업 무료 | 미디어·아카이브 톤 |
+| **제주명조 / 한라산체** | 제주도 | 개성 있는 명조 | O | 상업 무료 | 지역·문화 브리프 |
+| **배민 한나체 / 주아체 / 도현체** | 우아한형제들 | 강한 개성, 캐주얼 | O | 상업 무료 | **B2C 캠페인 한정. B2B에 쓰면 즉시 아마추어** |
+| **여기어때 잘난체** | 여기어때 | 굵고 시원함 | O | 상업 무료 | 임팩트 헤드라인 |
+| **자이언츠체** | 롯데자이언츠 | 속도감 | O | 상업 무료 | 스포츠·이벤트 |
+| **빙그레 따옴 / 메로나체** | 빙그레 | 레트로·발랄 | O | 상업 무료 | 레트로 캠페인 |
+
+**한글 폰트 수집처**: 눈누 (https://noonnu.cc) — 라이선스 범위 표기가 가장 명확.
+
+### 7.4 한글 조판 실전 규칙
+
+- **line-height를 영문보다 높게.** 한글은 글자 밀도가 높아 영문 기준 1.5로는 답답하다. **본문 1.6–1.8** 권장.
+- **letter-spacing은 음수를 주지 마라.** 한글은 이미 고정폭에 가까워 음수 자간이 즉시 뭉개진다.
+  대형 헤드라인에서만 -0.01em ~ -0.02em 정도.
+- **`word-break: keep-all`** 을 설정하라. 기본값은 단어 중간에서 줄바꿈되어 어색하다.
+  `overflow-wrap: break-word`와 함께 쓴다.
+- **한 줄 25–40자.** 영문 기준(45–75자)을 그대로 쓰면 너무 길다. 컨테이너 폭을 좁혀라.
+- **영문·숫자 폴백 순서**: 한글 폰트를 앞에 두면 라틴 문자까지 그 폰트로 그려진다.
+  라틴을 다른 폰트로 쓰고 싶으면 `font-family: 'Satoshi', 'Pretendard', sans-serif` 순으로 라틴 폰트를 먼저 둔다.
+- Pretendard CDN:
+  `https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.min.css`
+
+### 7.5 페어링 예시 (브리프별)
+
+| 브리프 | 디스플레이 | 본문 | 한글 |
+|---|---|---|---|
+| 신뢰감 있는 B2B | Söhne / Switzer | Switzer | Pretendard |
+| 에디토리얼 · 미디어 | Instrument Serif / Fraunces | Spectral | 마루 부리 + Pretendard |
+| 럭셔리 · 브랜드 | Signifier / PP Editorial New | Söhne | 마루 부리 |
+| 개발자 도구 | Archivo | IBM Plex Sans | Pretendard + JetBrains Mono |
+| 대시보드 · 데이터 | DM Sans | DM Sans | Spoqa Han Sans Neo |
+| 캠페인 · B2C | Clash Display | Satoshi | 배민 도현체 (헤드라인만) + Pretendard |
+| 실험적 · 아트 | Karrik / Basteleur (Velvetyne) | Work Sans | 제주명조 |
+
+---
+
+## 8. 이미지·질감 트렌드
+
+- **믹스드 미디어**: 3D 요소 + 스캔한 종이 질감의 결합이 2026년 주도 흐름.
+- **필름 그레인 오버레이**: 실제 필름 스캔 기반 고해상도 그레인. 디지털 이미지에 물성을 준다.
+- **노이즈 텍스처**: 그라디언트 위 미세 노이즈는 밴딩을 없애면서 질감을 준다.
+  다만 **보라-파랑 그라디언트 + 노이즈** 조합은 슬롭이다 (04번 A-03).
+- **스톡 사진 회피**: "랩탑 앞에서 웃는 다국적 팀"은 신뢰도를 **떨어뜨린다**는 게 실측 결과다.
+  실제 제품 스크린샷 / 실제 팀 사진 / 커스텀 일러스트 / 추상 질감 순으로 선택.
+- 무료 질감 소스: Texturize, Resource Boy(8K 노이즈), Pattern Club.
+
+---
+
+## 9. 2026년 요약 — 한 문단
+
+지금 이기는 사이트는 **타이포 체계가 정돈되어 있고, 여백에 리듬이 있고, 빠르다.**
+3D는 상위권에서 흔하지만 그건 럭셔리·자동차·문화기관의 이야기이고, SaaS·제품 사이트는 5% 미만이다.
+벤토 그리드는 표준이 되어 더 이상 차별화가 아니며, 반작용으로 비대칭·브루탈 방향이 다시 올라오고 있다.
+색은 중립색이 주도하고 OKLCH 기반 의미 토큰이 기술 표준이 됐다.
+모션은 CSS 스크롤 애니메이션과 View Transitions로 JS 없이 대부분 처리 가능해졌고, GSAP은 전면 무료가 됐다.
+그리고 **가장 크게 달라진 것은, 평균적인 결과물이 AI에 의해 대량 생산되면서 "평균처럼 보이는 것" 자체가 감점 요인이 됐다는 점이다.** (→ 04번 문서)
diff --git a/research/references/04-ai-slop-signatures.md b/research/references/04-ai-slop-signatures.md
new file mode 100644
index 0000000..e057da2
--- /dev/null
+++ b/research/references/04-ai-slop-signatures.md
@@ -0,0 +1,267 @@
+# 04 — "AI가 만든 티" 시그니처 목록 (금지 목록)
+
+> **이 문서가 `designpaca`의 핵심이다.**
+> 아래 항목은 전부 **구체적 패턴**이다. "generic하다", "심심하다" 같은 말은 쓰지 않는다.
+> 각 항목은 `패턴 → 왜 문제인가 → 대신 무엇을 하나` 구조다.
+>
+> **총 101개 시그니처** — A 컬러 13 · B 타이포 15 · C 레이아웃 14 · D 컴포넌트 16 ·
+> E 모션 9 · F 카피 14 · G 이미지 9 · H 품질 11 (+ I 코드 지문 grep 목록, J 자가 채점표)
+>
+> **사용법**: 작업 완료 전 이 문서를 훑고, 걸린 항목의 ID를 나열한 뒤 전부 해소해야 한다.
+> 3개 이상 걸리면 그 디자인은 폐기하고 다시 시작한다.
+
+---
+
+## 0. 근거: 이건 인상이 아니라 실측이다
+
+Adrian Krebs가 **Show HN 랜딩페이지 1,590개**를 Playwright로 렌더한 뒤
+DOM·computed style 기반 결정론적 규칙 16개로 채점한 결과:
+
+| 등급 | 기준 | 비율 | 개수 |
+|---|---|---|---|
+| Heavy slop | 4개 이상 패턴 검출 | **22%** | 347 |
+| Mild slop | 2–3개 | **32%** | 508 |
+| Clean | 0–1개 | 46% | 735 |
+
+개별 패턴 검출률 (일부 공개치):
+
+| 패턴 | 검출률 |
+|---|---|
+| CTA 버튼이 보라 계열 (indigo/violet) | **10.7%** |
+| 헤드라인 전체 대문자 | **10.5%** |
+| 번호 매긴 단계 시퀀스 (1·2·3) | **9.4%** |
+
+> Krebs 본인의 결론: *"슬롭 페이지가 나쁜 건 아니다. 그냥 영감이 없을 뿐이다. 전환은 잘 될 수도 있다.
+> 다만 지금 Show HN에 올라오는 것의 절반 이상은 '의견 없는 채팅 인터페이스가 만들었다'는 시각적 지문을 갖고 있다."**
+
+즉 이 문서의 목표는 "예쁘게"가 아니라 **지문 제거**다.
+
+---
+
+## A. 컬러 시그니처
+
+| ID | 시그니처 (구체적으로) | 왜 문제인가 | 대신 무엇을 하나 |
+|---|---|---|---|
+| **A-01** | **다크 모드를 기본값으로.** 브리프에 없는데 `bg-slate-900` / `#0B0B0F` 배경으로 시작 | AI 툴(v0·Cursor·Bolt)의 가장 흔한 반사 반응. 단일 시그니처 중 검출 빈도 1위 | 라이트를 기본으로 설계하고 다크는 **토큰으로 파생**. 다크가 필요하면 브리프에 근거를 대라 |
+| **A-02** | **보라→파랑 그라디언트 히어로.** `#6366f1 → #a855f7`, `#8b5cf6 → #3b82f6`, Tailwind `from-purple-600 to-blue-500` | Tailwind 기본 팔레트의 indigo/violet은 "결정하지 않았다"의 신호. 수십만 개 튜토리얼의 기본값 | 브랜드 색 1개를 정하고 **단색 + 중립**으로 간다. 그라디언트를 쓸 거면 같은 hue 내 명도 변화(예: `#1B4332 → #2D6A4F`) |
+| **A-03** | **"VibeCode Purple"** — 라벤더-퍼플 (`#a78bfa`, `#c4b5fd` 계열)이 어디에나 | 텍스트→랜딩 생성기의 출력 지문. 색을 고른 게 아니라 안 고른 것 | 보라를 쓰지 마라. 꼭 필요하면 채도를 낮추고 온도를 바꿔라 (`#6B5B95` 같은 탁한 보라) |
+| **A-04** | **네온 온 다크** — 시안(`#22d3ee`) / 바이올렛(`#a855f7`)이 검정 위에서 발광 | "사이버펑크 기본값". 게이밍·개발자 툴 브리프가 아닌데 나오면 즉시 티가 남 | 다크가 필요하면 **저채도 액센트 1개**. 발광 대신 **명도 차이**로 위계를 만들어라 |
+| **A-05** | **컬러 글로우 / 박스섀도.** `box-shadow: 0 0 80px rgba(139,92,246,.5)` 같은 큰 컬러 그림자 | 깊이감을 색으로 가짜로 만든 것. 실제 광원 논리가 없음 | 그림자는 중립색으로, 작게. `0 1px 2px rgba(0,0,0,.06)` + `0 8px 24px rgba(0,0,0,.08)` 2단 구성 |
+| **A-06** | **방사형 그라디언트 헤일로** — 히어로 뒤 떠 있는 보라·파랑 원형 발광 오브 | 구성을 못 잡았을 때의 회피 수단. 정보를 담지 않는 픽셀 | 배경은 비워두거나 **실제 콘텐츠**(제품 스크린샷, 타입)로 채워라 |
+| **A-07** | **순백 `#ffffff` / 순흑 `#000000`** 배경·텍스트 | 아무 결정도 하지 않았다는 뜻. 대비 눈부심과 텍스트 번짐도 유발 | 오프화이트 `#FAFAF7` / 잉크 `#111014` 처럼 살짝 틀어라. 브랜드 hue를 2–4% 섞으면 더 좋다 |
+| **A-08** | **Tailwind 기본 토큰 그대로** — `slate-900`, `gray-500`, `indigo-600`, `emerald-500` | 수학적으로 정돈됐지만 **누구나 알아본다**. 이건 팔레트가 아니라 미결정 상태 | `tailwind.config`의 색을 **교체**하라(확장이 아니라). `ink-900`, `ember-600` 같은 프로젝트 고유 이름 |
+| **A-09** | **의미 없는 색 이름 토큰** — `purple-500`을 코드 전체에서 직접 호출 | 브랜드가 바뀌면 전부 다시 찾아야 함. 색이 역할을 못 가짐 | `--color-action-primary`, `--color-surface-elevated`, `--color-text-secondary` 같은 **의미 토큰** |
+| **A-10** | **다크 테마에서 본문 대비가 겨우 통과하거나 미달** — `#0f172a` 위 `#94a3b8` | Krebs가 별도 패턴으로 잡을 만큼 흔한 기능적 결함 | 본문 4.5:1(WCAG) 또는 APCA **Lc ≥ 75** 확보. 다크에서는 순백 대신 `#E8E6E3` 정도로 눈부심 완화 |
+| **A-11** | **그라디언트 텍스트** — 헤드라인·지표 숫자에 `background-clip: text` 그라디언트 | 가독성과 스캔성을 깎으면서 정보는 0. 스크린샷·OG 이미지에서도 깨짐 | 단색. 강조가 필요하면 **크기·굵기·여백**으로 |
+| **A-12** | **크림/베이지 배경(`#FDF8F3`, `#F5F0E8`)을 "고급스러움"의 기본값으로** | 2025–26년 들어 새로 생긴 슬롭. 보라의 대체 기본값이 됐다 | 크림을 쓸 거면 **왜 크림인지** 브리프와 연결하고, 텍스트·액센트를 그에 맞춰 재설계하라 |
+| **A-13** | **색상 hue 4개 이상** 사용 | 결정을 못 한 상태의 전형 | hue 3개 이하. 면적 배분 60(지배)/30(중립)/10(강조) |
+
+---
+
+## B. 타이포그래피 시그니처
+
+| ID | 시그니처 | 왜 문제인가 | 대신 |
+|---|---|---|---|
+| **B-01** | **Inter를 이유 없이 기본값으로.** 특히 중앙 정렬 히어로 헤드라인에 | AI 인터페이스의 기본 서체. Krebs 16패턴 1번 항목 | Satoshi / Switzer / DM Sans / Work Sans. Inter는 **초고밀도 다국어 UI 같은 명확한 이유**가 있을 때만 |
+| **B-02** | **Space Grotesk + Instrument Serif + Geist 조합** | 이 셋의 반복 조합이 생성 지문으로 특정됨 | 셋 중 하나만 쓰거나, 파운드리를 바꿔라 (Fontshare, Velvetyne) |
+| **B-03** | **헤드라인 한 단어만 세리프 이탤릭** — 나머지는 sans (`Build <em>better</em> products`) | 가장 널리 퍼진 "성의 표시" 관용구. 지금은 성의가 아니라 지문 | 강조는 **줄바꿈·크기·색·여백**으로. 굳이 서체를 섞으려면 문장 전체 단위로 |
+| **B-04** | **페이지 전체에 폰트 패밀리 1개** | 위계를 크기로만 만들게 되어 밋밋해짐 | 디스플레이 1 + 본문 1의 2개 조합. 성격 차이를 크게 (세리프+그로테스크 등) |
+| **B-05** | **타입 스케일이 평평함** — 16 / 18 / 20 / 24처럼 단계 간 비율이 1.15 미만 | 위계가 안 서고 모든 게 똑같이 중요해 보임 | 비율 1.25 또는 1.333. **최대/본문 비 4배 이상** (17 → 68) |
+| **B-06** | **타입 스케일 단계가 8개 이상** | 통제 실패. 값이 우연히 결정됐다는 뜻 | 3–5단계로 제한하고 각 단계에 역할 이름을 붙여라 |
+| **B-07** | **모든 섹션 라벨이 대문자 + 자간 넓힘** (`FEATURES`, `HOW IT WORKS`) | 검출률 10.5%. 얻지 않은 권위를 빌리는 장치 | 라벨을 없애거나, 소문자로 쓰거나, **라벨 없이 헤드라인만**으로 섹션을 구분 |
+| **B-08** | **히어로 = 작은 pill 배지 + 그 아래 거대 헤드라인** (`✨ Now in beta` + H1) | Krebs 16패턴 중 "badge above H1". 가장 알아보기 쉬운 구조 지문 | 배지를 지워라. 정말 필요한 정보면 문장 안에 넣거나 내비 옆에 둬라 |
+| **B-09** | **`_01_ _02_ _03_` 형식의 작은 번호 섹션 라벨** | 에디토리얼 흉내인데 실제 구조는 없음 | 번호가 **순서를 의미할 때만** 쓴다. 장식용 번호는 삭제 |
+| **B-10** | **본문 letter-spacing 0.05em 이상** | 글자 그룹이 흩어져 단어 인식이 느려짐 | 본문 자간 0. 대문자 소형 라벨에만 +0.08em |
+| **B-11** | **대형 헤드라인에 과도한 음수 자간** (-0.06em 이상) | 글자가 서로 먹힘. "디자인한 척"의 부작용 | -0.02em ~ -0.04em 범위. **한글은 음수 자간 금지** |
+| **B-12** | **line-height 1.3 미만의 본문** | 답답하고 읽기 어려움 | 영문 본문 1.5–1.7, **한글 본문 1.6–1.8** |
+| **B-13** | **본문 12px 이하** | 접근성 실패이자 밀도를 못 잡은 신호 | 본문 최소 14px, 권장 16–18px |
+| **B-14** | **한글 폰트를 지정하지 않아 시스템 기본으로 떨어짐** (맑은 고딕 / Apple SD 산돌고딕) | 한국어 사이트에서 즉시 미완성으로 읽힘 | `Pretendard` 또는 `본고딕` 명시. `word-break: keep-all` 함께 설정 |
+| **B-15** | **모노스페이스를 장식으로 사용** — 코드가 아닌 라벨·캡션에 `font-mono` | "테크 느낌"의 저비용 흉내 | 모노스페이스는 **코드·데이터·식별자**에만. 톤이 필요하면 그로테스크의 폭 좁은 컷을 써라 |
+
+---
+
+## C. 레이아웃 · 구조 시그니처
+
+| ID | 시그니처 | 왜 문제인가 | 대신 |
+|---|---|---|---|
+| **C-01** | **표준 페이지 골격**: 히어로 → 3열 피처 → 로고월 → 요금제 → FAQ → 푸터 | shadcn/ui 예제, Tailwind UI 스크린샷, Vercel 템플릿의 순서 그대로. 구조를 설계하지 않았다는 증거 | 섹션 순서를 **브리프의 설득 논리**로 재배열. 예: 문제 제시 → 실제 사용 화면 → 반론 처리 → 가격. FAQ를 쓸 거면 실제로 받은 질문으로 |
+| **C-02** | **중앙 정렬 히어로 (텍스트 가운데 + CTA 2개 + 아래 스크린샷)** | 가장 안전해서 가장 흔한 구조 | 비대칭 그리드(5:7, 7:5), 좌측 정렬 대형 타입, 또는 텍스트를 화면 하단 3분의 1로 내리기 |
+| **C-03** | **정확히 3열, 균등 폭 피처 카드** | 콘텐츠가 3개여서가 아니라 **3이 예쁘게 떨어져서** 3인 것 | 항목 수를 콘텐츠가 정하게 하라. 2개면 2개, 5개면 5개. 폭도 중요도에 따라 다르게 |
+| **C-04** | **아이콘이 카드 상단 중앙에 있는 피처 카드** (둥근 사각 아이콘 타일 + 제목 + 2문장) | "universal AI feature-card template". 가장 확실한 단일 지문 | 아이콘을 없애고 **숫자·스크린샷·실제 UI 조각**으로 대체. 아이콘을 쓸 거면 좌측 인라인 배치 |
+| **C-05** | **카드 좌측 3–4px 컬러 스트립** (`border-l-4 border-purple-500`) | 텍스트의 em-dash에 맞먹는 신뢰도의 AI 지문 | 좌측 스트립 삭제. 구분이 필요하면 배경 톤 차이 또는 여백 |
+| **C-06** | **카드 안의 카드 안의 카드 (cardocalypse)** | 시각적 소음. 깊이가 정보와 무관 | 중첩 최대 1단계. 안쪽은 카드가 아니라 **구분선 또는 여백** |
+| **C-07** | **번호 매긴 1·2·3 단계 섹션** | 검출률 9.4% | 단계가 실제로 순서일 때만. 그 경우에도 번호 대신 **화면 캡처 3장**이 낫다 |
+| **C-08** | **지표 배너 행** (`10,000+ users · 99.9% uptime · 4.9★`) | 근거 없는 숫자 3–4개 나열. 검증 불가라 신뢰를 오히려 깎음 | 숫자 **1개**만, 출처와 함께. 없으면 쓰지 마라 |
+| **C-09** | **모든 여백이 같은 값** — 전부 `p-6`, 전부 `gap-4` | 리듬이 없어 강약이 사라짐 | 8pt 그리드 위에서 4–6종의 여백 값. 섹션 간 : 요소 간 = 대략 1:5 |
+| **C-10** | **섹션마다 같은 상하 패딩** (`py-20` 반복) | 페이지가 균질해져 어디가 중요한지 알 수 없음 | 중요한 섹션에 더 많은 여백. 여백이 곧 강조다 |
+| **C-11** | **벤토 그리드를 기본 선택지로** | 2026년 기준 벤토는 표준이라 차별화가 아니다. "고민 안 했음"의 새 신호 | 벤토는 **타일 크기 차이가 정보 위계를 반영할 때만**. 아니면 단순 리스트가 낫다 |
+| **C-12** | **콘텐츠가 뷰포트 가장자리에 붙음** — 컨테이너 패딩 없이 텍스트가 화면 끝에 닿음 | 모바일에서 특히 조악해 보임 | 모바일 16–24px, 데스크톱 24–80px 좌우 패딩 |
+| **C-13** | **본문 컬럼이 화면 전체 폭** — 1440px에 한 줄 텍스트 | 영문 100자 이상 줄이 되어 읽기가 무너짐 | 텍스트 컬럼 `max-width: 65ch` (영문) / 국문은 25–40자 폭 |
+| **C-14** | **푸터가 링크 4열 + 소셜 아이콘 + 카피라이트** 로만 구성 | AI가 가장 성의 없이 만드는 곳 | 푸터에 실제 정보를 넣어라 (연락처, 주소, 사업자 정보, 뉴스레터). 링크가 4개뿐이면 4열로 만들지 마라 |
+
+---
+
+## D. 컴포넌트 시그니처
+
+| ID | 시그니처 | 왜 문제인가 | 대신 |
+|---|---|---|---|
+| **D-01** | **`rounded-2xl shadow-lg p-6` 를 손대지 않고 그대로 사용** | shadcn/ui 기본값. AI 에이전트가 복붙하도록 설계된 값 | radius를 하나의 어휘로 통일하되 **프로젝트 고유값**으로 (예: 4px 또는 12px). 큰 그림자 대신 1px 보더 + 배경 톤 차이 |
+| **D-02** | **모든 요소가 동일한 border-radius 16px** | radius가 결정이 아니라 기본값임을 드러냄 | radius 어휘 2개 (예: 컨테이너 12px, 인터랙티브 요소 8px). 혹은 0으로 통일하고 각을 살려라 |
+| **D-03** | **radius 24px 이상의 과도하게 둥근 카드** | 블롭처럼 보이며 정보 밀도를 낮춤 | 12–16px 이하 |
+| **D-04** | **1px 회색 보더 + 넓게 퍼진 그림자의 동시 사용** | 두 가지 깊이 표현을 겹친 것. 광원 논리 없음 | 하나만 선택. 보더로 갈 거면 그림자 제거 |
+| **D-05** | **글래스모피즘을 전면에 사용** (`backdrop-blur` 카드 다수) | 실기기에서 **FPS 15–30% 하락**. 2022년 유행의 잔재 | 내비게이션 바·모달 정도로 제한. 카드에는 쓰지 마라 |
+| **D-06** | **이모지를 아이콘 대신 사용** — 사이드바·피처 카드의 🚀 ⚡ 🎯 ✨ | Krebs 16패턴 중 "emoji icons in nav". 즉각적인 아마추어 신호 | 아이콘 세트 하나를 정해 일관되게 (Lucide, Phosphor, Radix). 이모지는 카피 안에서만 |
+| **D-07** | **버튼이 항상 2개, 나란히** (`Get started` + `Learn more`) | 주 행동이 무엇인지 정하지 못했다는 뜻 | 주 CTA **1개**. 보조는 텍스트 링크로 격하 |
+| **D-08** | **CTA 버튼이 보라·인디고 계열** | 검출률 10.7%로 단일 최다 | 브랜드 색. 없으면 중립 대비가 가장 강한 색(잉크/화이트 반전) |
+| **D-09** | **로고월** — 회색조 로고 6–8개 일렬 배치 | 로고를 나열하는 것 자체가 신호를 못 만듦. 대부분 가짜거나 무관 | 실제 고객이면 **한 곳의 사례를 문장으로**. 없으면 섹션 자체를 삭제 |
+| **D-10** | **아바타가 이니셜 원형인 텍스트 후기 3개** | 검증 불가한 후기는 신뢰를 깎는다 | 실명 + 직함 + **원문 링크**(리뷰 플랫폼, 트윗). 없으면 넣지 마라 |
+| **D-11** | **아코디언 FAQ 6개, 질문이 전부 가상** ("How does it work?") | 실제로 받은 질문이 아니라 채운 것 | 실제 문의 3개. 답변에 구체적 숫자·조건 포함 |
+| **D-12** | **요금제 3열 카드 + 가운데에 "Most popular" 배지** | 가장 재현율 높은 SaaS 템플릿 | 표 형식 비교, 단일 가격, 또는 **가격 계산기**. 3열 카드가 필수는 아니다 |
+| **D-13** | **펄스 애니메이션 상태 점** (초록 원이 깜빡이며 "All systems operational") | 정적 정보에 장식 애니메이션을 붙인 것 | 상태가 실제로 바뀔 때만 애니메이션. 아니면 정적 점 |
+| **D-14** | **자동 스크롤 마퀴** — 로고·후기·태그가 끝없이 흐름 | 콘텐츠를 가리고 읽기를 방해하며 주의를 강탈 | 정적 그리드. 정말 많으면 페이지네이션 |
+| **D-15** | **hover 시 아무 변화 없거나, 전 요소가 동일하게 `scale(1.02)`** | 인터랙션을 설계하지 않았다는 신호 | 요소마다 다른 반응 (링크는 밑줄, 카드는 배경 톤, 버튼은 명도). hover는 **가장 먼저** 설계한다 |
+| **D-16** | **장식용 깜빡이는 커서** — 편집 불가능한 히어로 카피 뒤의 `|` | 타이핑 흉내. 정보 없음 | 삭제 |
+
+---
+
+## E. 모션 시그니처
+
+| ID | 시그니처 | 왜 문제인가 | 대신 |
+|---|---|---|---|
+| **E-01** | **모든 요소에 동일한 fade-in-up** (`opacity 0→1`, `translateY 20px→0`, 전부 같은 delay) | 모션 언어가 없다는 뜻. 페이지가 계속 "떠오르기만" 함 | 모션은 **중요한 것에만**. 나머지는 즉시 노출. 순차 등장이 필요하면 stagger 40–60ms |
+| **E-02** | **인터페이스 요소에 bounce / elastic 이징** | 2010년대 감성. 즉시 촌스러움 | `ease-out` 또는 `cubic-bezier(0.2, 0, 0, 1)` |
+| **E-03** | **이미지 hover 시 `scale` 또는 `rotate`** | 생성 UI의 반복 지문 | 이미지 자체는 두고 **캡션·오버레이·보더**를 변화시켜라 |
+| **E-04** | **duration이 전부 300ms** | 마이크로와 연출을 구분하지 못함 | 마이크로 100–200 / 트랜지션 200–400 / 연출 600–1200ms |
+| **E-05** | **스크롤 reveal 실패 시 콘텐츠가 `opacity: 0`으로 남음** | JS 실패·prefers-reduced-motion 시 빈 페이지가 됨 | 기본 상태를 visible로 두고 JS가 **숨긴 뒤 보여주는** 방식. 또는 CSS scroll-driven animation |
+| **E-06** | **`prefers-reduced-motion` 미대응** | 접근성 실패이자 성의 없음의 증거 | 미디어 쿼리로 모션 제거 경로를 반드시 제공 |
+| **E-07** | **패럴랙스를 전 섹션에 적용** | 스크롤 감각이 어긋나고 성능이 떨어짐 | 한 섹션에만, 이동량 작게 (10–20px) |
+| **E-08** | **히어로에 Spline / 3D 씬을 이유 없이 삽입** | JS 런타임 **800KB–2MB**. 모바일 4G에서 Core Web Vitals 실패 | 3D는 브리프가 요구할 때만. 필요하면 정적 렌더 이미지 + 미세 모션으로 대체 |
+| **E-09** | **로딩 화면 / 프리로더 카운터** | 실제로 로딩할 게 없는데 대기를 만듦 | 삭제. 진짜 무거우면 스켈레톤 |
+
+---
+
+## F. 카피 · 문장 시그니처
+
+**AI 티는 시각보다 문장에서 먼저 난다.** 이 섹션이 가장 치명적이다.
+
+| ID | 시그니처 | 왜 문제인가 | 대신 |
+|---|---|---|---|
+| **F-01** | **`It's not X, it's Y` / `단순한 X가 아니라 Y입니다`** 구문 | ChatGPT의 최대 지문. 400단어 글에 3번씩 나옴. 독자가 즉시 이탈 | 그냥 Y를 말해라. 대조가 필요하면 구체적 비교 대상을 실명으로 |
+| **F-02** | **`Streamline / Empower / Supercharge / Unlock / Leverage / Seamless / Elevate`** | 아무 제품에나 붙는 동사. 정보량 0 | 제품이 실제로 하는 동작 동사 (`정산한다`, `병합한다`, `4일을 6시간으로 줄인다`) |
+| **F-03** | **`world-class / cutting-edge / enterprise-grade / best-in-class / state-of-the-art`** | 자기 평가 형용사는 증거가 아니다 | 증거로 대체 — 인증명, 벤치마크 수치, 고객사 실명 |
+| **F-04** | **`Build the future of X` / `Your all-in-one platform` / `Scale without limits`** 류 히어로 헤드라인 | 경쟁사 이름으로 바꿔도 성립함 | **경쟁사 치환 테스트**를 통과하는 문장으로. 예: Stripe의 "Financial infrastructure for the internet" |
+| **F-05** | **em-dash(—) 과다 사용**, 특히 한 문단에 2회 이상 | AI 문장 리듬의 대표 지문 | 마침표로 끊거나 쉼표로. 한국어에서는 특히 부자연스럽다 |
+| **F-06** | **스타카토 3연타** (`No fluff. No filler. No BS.` / `빠르게. 정확하게. 간단하게.`) | 리듬으로 내용 없음을 감추는 장치 | 한 문장으로 구체적으로 |
+| **F-07** | **`In today's fast-paced digital landscape...`** 로 시작하는 도입 | 아무 말도 하지 않는 문단 | 첫 문장부터 본론. 도입 문단 삭제 |
+| **F-08** | **헤지 표현** (`may help you`, `can potentially`, `~할 수 있습니다`) | 확신 없음이 곧 신뢰 없음 | 단정하거나, 조건을 명시하라 (`10명 이하 팀에서는`) |
+| **F-09** | **레이블·서브레이블·헬퍼텍스트가 같은 말을 3번** (`이메일` / `이메일 주소` / `이메일 주소를 입력하세요`) | 화면 소음 | 하나만 남긴다 |
+| **F-10** | **CTA가 `Get Started` / `Learn More` / `시작하기`** | 무엇이 시작되는지 알 수 없음 | 결과를 말하는 CTA (`무료로 30일 써보기`, `가격표 보기`, `데모 예약`) |
+| **F-11** | **숫자가 전부 어림수** (`10,000+ users`, `99.9% uptime`, `50% faster`) | 검증 불가한 숫자는 없느니만 못함 | 정확한 수치와 측정 조건 (`평균 응답 240ms, 2026년 7월 p95 기준`) |
+| **F-12** | **모든 헤딩이 명사구로 통일** (`Powerful Features`, `Simple Pricing`) | 헤딩이 정보를 전달하지 않음 | 헤딩에 주장을 담아라 (`엑셀 없이 정산이 끝난다`) |
+| **F-13** | **`~를 통해`, `~에 대한`, `~에 있어서` 번역투** (한국어) | 영문 AI 카피를 기계 번역한 티 | 능동 한국어로. `~로`, `~의`, `~에서` |
+| **F-14** | **이모지로 시작하는 불릿 리스트** (`✅ 빠른 속도`) | 정보 위계를 이모지로 대체한 것 | 일반 불릿 또는 없애고 문장으로 |
+
+**F 섹션 통합 테스트 — 경쟁사 치환**: 카피에서 제품·회사 이름을 경쟁사 이름으로 바꿔 읽는다.
+**여전히 자연스러우면 그 카피는 아무것도 말하지 않은 것이다.**
+
+---
+
+## G. 이미지 · 아이콘 · 일러스트 시그니처
+
+| ID | 시그니처 | 왜 문제인가 | 대신 |
+|---|---|---|---|
+| **G-01** | **랩탑 앞에서 웃는 다국적 팀 스톡 사진** (밝은 오픈 오피스) | 방문자는 스톡을 알아보고, **신뢰도가 실제로 하락**한다는 실측이 있음 | 실제 팀 사진, 실제 작업 공간, 또는 사진 없이 타입으로 |
+| **G-02** | **떠 있는 3D 추상 블롭 / 기하 도형** | 콘텐츠 부재를 덮는 장식. 브랜드와 무관 | 제품 실제 화면, 데이터 시각화, 또는 여백 |
+| **G-03** | **AI 생성 일러스트** — "약간 지나치게 매끄럽고 지나치게 대칭인" | 손 개수·글자 깨짐 같은 결함이 아니어도 톤에서 티가 남 | 일관된 일러스트 시스템을 직접 정의하거나, 일러스트를 아예 쓰지 않는다 |
+| **G-04** | **일반 SVG 도형을 조합한 히어로 그래픽** | 플레이스홀더 클립아트처럼 읽힘 | 제품 UI 조각을 실제로 렌더해 보여줘라 |
+| **G-05** | **손으로 그린 듯한 조악한 SVG 마스코트** | 의도된 러프함이 아니라 그냥 못 그린 것으로 읽힘 | 마스코트를 쓸 거면 제대로 만들거나 쓰지 마라 |
+| **G-06** | **아이콘 세트가 섞임** — 라인·필·이모지가 한 화면에 | 시스템이 없다는 증거 | 세트 하나 고정. 굵기·크기·광학 정렬 통일 |
+| **G-07** | **`src`가 비어 있거나 깨진 이미지 태그** | 생성 코드가 검증 없이 배포된 흔적 | 배포 전 이미지 로드 전수 확인 |
+| **G-08** | **모든 이미지가 같은 종횡비의 둥근 사각형** | 그리드를 이미지에 강제한 것 | 콘텐츠에 맞는 비율. 풀블리드 1장을 섞으면 리듬이 생긴다 |
+| **G-09** | **반복 그라디언트 줄무늬를 표면 장식으로** | 의미 없는 텍스처 | 실제 질감(필름 그레인, 종이 스캔) 또는 무지 |
+
+---
+
+## H. 품질 · 접근성 결함 (AI 생성물에서 특히 잦음)
+
+| ID | 시그니처 | 왜 문제인가 | 대신 |
+|---|---|---|---|
+| **H-01** | **헤딩 레벨 건너뜀** (h1 → h3) | 문서 아웃라인 파손. 스크린리더·SEO 영향 | 순차적 헤딩. 크기는 CSS로 조절 |
+| **H-02** | **본문 대비 WCAG AA 미달** (본문 4.5:1, 대형 3:1 미만) | 기능적 결함 | 대비 검증을 빌드에 포함. APCA Lc ≥ 75 |
+| **H-03** | **포커스 링 제거** (`outline: none`만 있고 대체 없음) | 키보드 사용자가 조작 불가 | `:focus-visible`에 명확한 링. 브랜드 색으로 예쁘게 만들어도 된다 |
+| **H-04** | **`p-2` 미만의 좁은 패딩으로 텍스트가 컨테이너에 붙음** | 조악함의 직접 원인 | 최소 12–16px 내부 패딩 |
+| **H-05** | **잡히지 않은 스크립트 에러**로 인터랙션 파손 | 검증 없이 생성·배포된 흔적 | 콘솔 클린 상태를 배포 조건으로 |
+| **H-06** | **터치 타깃 44×44px 미만** | 모바일에서 못 누름 | 최소 44px, 간격 8px 이상 |
+| **H-07** | **폼에 `label` 없이 placeholder만** | 입력 시작하면 라벨이 사라짐. 접근성 실패 | 항상 `label`. placeholder는 예시용 |
+| **H-08** | **`alt` 속성 없거나 `image`, `photo` 같은 무의미한 값** | 스크린리더·SEO 실패 | 이미지가 전달하는 정보를 문장으로. 장식이면 `alt=""` |
+| **H-09** | **다크/라이트 전환 시 일부 컴포넌트만 대응** | 토큰 없이 하드코딩했다는 증거 | 색은 전부 토큰 경유. 하드코딩 hex 금지 |
+| **H-10** | **모바일에서 가로 스크롤 발생** | 폭 계산 없이 고정값을 쓴 결과 | `max-width: 100%`, `overflow-x: hidden`은 증상 은폐이므로 원인을 찾아라 |
+| **H-11** | **폰트 로딩 시 FOIT (텍스트가 안 보이는 구간)** | 체감 성능 하락 | `font-display: swap` + 서브셋 + preload |
+
+---
+
+## I. 코드 지문 (grep으로 잡을 수 있는 것)
+
+배포 전 아래 문자열을 검색해서 걸리면 재검토한다.
+
+```
+# 색
+indigo-|violet-|purple-|fuchsia-
+#6366f1|#818cf8|#a855f7|#8b5cf6|#c4b5fd|#a78bfa|#22d3ee
+from-purple|to-blue-|from-violet|via-purple
+bg-slate-900|bg-gray-900|text-gray-400
+#ffffff|#000000   (배경/텍스트로 사용된 경우)
+
+# 컴포넌트 기본값
+rounded-2xl|rounded-3xl
+shadow-lg|shadow-xl|shadow-2xl
+border-l-4|border-t-4
+backdrop-blur
+
+# 타이포
+font-family:.*Inter
+Space Grotesk|Instrument Serif|Geist
+uppercase tracking-wide(r|st)?
+
+# 카피
+Get Started|Learn More|Empower|Streamline|Supercharge|Seamless
+world-class|cutting-edge|enterprise-grade|best-in-class
+It's not .* it's
+—   (한 문단에 2개 이상)
+
+# 이모지 아이콘 (JSX/HTML 텍스트 노드 안)
+🚀|⚡|✨|🎯|🔥|💡|✅
+```
+
+---
+
+## J. 자가 채점표
+
+작업 완료 전 이 표를 채워라.
+
+| 카테고리 | 걸린 항목 ID | 조치 |
+|---|---|---|
+| A 컬러 | | |
+| B 타이포 | | |
+| C 레이아웃 | | |
+| D 컴포넌트 | | |
+| E 모션 | | |
+| F 카피 | | |
+| G 이미지 | | |
+| H 품질 | | |
+
+**판정 기준**
+
+| 걸린 개수 | 판정 |
+|---|---|
+| 0–1 | 통과 |
+| 2–3 | 해당 항목만 수정 후 재검 |
+| **4 이상** | **폐기하고 02번 문서 §6 절차부터 다시** (Krebs 기준 "heavy slop") |
+
+---
+
+## K. 한 줄 요약
+
+> AI 티는 **못 만들어서** 나는 게 아니라 **결정을 안 해서** 난다.
+> 보라 그라디언트, Inter, 3열 아이콘 카드, `rounded-2xl shadow-lg`, "Get Started"는 전부 **미결정의 기본값**이다.
+> 각 축마다 하나씩 **의도적으로 다른 값을 고르고, 그 이유를 한 문장으로 말할 수 있으면** 지문은 사라진다.
diff --git a/research/references/05-sources.md b/research/references/05-sources.md
new file mode 100644
index 0000000..6085d6a
--- /dev/null
+++ b/research/references/05-sources.md
@@ -0,0 +1,181 @@
+# 05 — 출처 목록
+
+> **이 리서치에서 실제로 열어보고 인용한 소스 95개.**
+> 별도로 **01번 문서에 갤러리·도구 URL 155개**가 있으며 그쪽도 전부 개별 검증했다.
+> 모든 상태 코드는 **2026-08-20** curl 실측치.
+>
+> 상태 표기: `OK` = 200 · `BOT` = 봇 차단(브라우저는 정상) · `DEAD` = 소멸
+
+---
+
+## A. AI 슬롭 · 생성 디자인 지문 (04번 문서의 근거)
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 1 | https://www.adriankrebs.ch/blog/design-slop/ | OK | **가장 중요한 1차 소스.** Show HN 랜딩 1,590개를 Playwright로 렌더해 16개 DOM·CSS 규칙으로 채점한 실측 연구 (heavy 22% / mild 32% / clean 46%) |
+| 2 | https://www.developersdigest.tech/blog/ai-design-slop-and-how-to-spot-it | OK | 위 연구의 16개 패턴을 폰트·색·레이아웃·CSS 프레임워크 4군으로 정리한 해설 |
+| 3 | https://impeccable.style/slop/ | OK | 슬롭 시그니처를 시각·타이포·색·여백·모션·카피·이미지로 나눠 가장 많이 열거한 목록. 04번 문서의 뼈대 |
+| 4 | https://vibecodekit.dev/ai-slop-design | OK | shadcn 기본값(`rounded-2xl shadow-lg p-6`), 카드 좌측 컬러 스트립, 벤토 남용 등 코드 레벨 지문과 수정법 |
+| 5 | https://www.925studios.co/blog/ai-slop-web-design-guide | OK | Inter 기본값·보라파랑 그라디언트·radius 16px 균일화·스톡 사진 등 시그니처와 대안 폰트 제안 |
+| 6 | https://growthguys.tech/blog/genuine-website-vs-ai-slop.html | OK | 60초 판별법. **경쟁사 치환 테스트**와 신뢰 신호 부재 목록의 출처 |
+| 7 | https://dev.to/alanwest/how-to-fix-the-ai-generated-look-in-your-frontend-1ahh | OK | `indigo-600`·`slate-900` 등 Tailwind 기본 토큰 의존, 표준 섹션 골격(hero→features→social proof→pricing→FAQ→footer)의 출처 |
+| 8 | https://rnauval.dev/en/blog/improve-web-design-without-ai-slop | OK | 슬롭 회피를 위해 레퍼런스 라이브러리를 컨텍스트로 주입하라는 접근 |
+| 9 | https://gigazine.net/gsc_news/en/20260423-design-slop/ | OK | Krebs 연구를 다룬 보도. 검출률 수치(CTA 보라 10.7%, 전체 대문자 10.5%, 번호 단계 9.4%) |
+| 10 | https://news.ycombinator.com/item?id=47864393 | BOT(429) | Krebs 연구의 HN 토론 스레드. 실무자 반론 포함 |
+| 11 | https://medium.com/@sahilkargutkar.sk/your-website-looks-like-ai-made-it-and-thats-becoming-a-problem-e679668ca7f4 | BOT(403) | "AI가 만든 것처럼 보이는 것"이 비즈니스 문제가 되는 지점을 다룸 |
+| 12 | https://aiproductivity.ai/news/how-to-spot-ai-slop-websites/ | **DEAD (410)** | 슬롭 판별 가이드였으나 삭제됨. 대체로 6번 사용 |
+| 13 | https://www.blakestockton.com/dont-write-like-ai-1-101-negation/ | OK | `It's not X, it's Y` 구문이 ChatGPT 최대 지문인 이유. F-01의 근거 |
+| 14 | https://copyadscontent.com/signs-of-ai-writing/ | OK | AI 글쓰기 지문 32가지. 스타카토 3연타, em-dash 과다 등 F섹션 근거 |
+| 15 | https://tailwindcss.com/docs/colors | OK | Tailwind 기본 팔레트 원문. A-08의 색 이름·11단계 스케일 확인용 |
+
+---
+
+## B. 어워드 · 수상작 실측 (03번 §1의 근거)
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 16 | https://www.awwwards.com/about-evaluation/ | OK | Awwwards 공식 평가 체계 원문. Design 40 / Usability 30 / Creativity 20 / Content 10 |
+| 17 | https://www.hontran.dev/blog/awwwards-judging-criteria | OK | 심사 배점의 실무적 해석. 심사위원 18명·극단값 3개 제외·5일 투표 |
+| 18 | https://www.hontran.dev/blog/best-award-winning-websites-2026 | OK | 2026년 실제 수상작 5건(By-Kin, Iventions, Mat Voyce, Uncommon, Minh Pham) 분석 |
+| 19 | https://digitalstrategyforce.com/journal/why-are-immersive-experiences-dominating-the-2026-awwwards/ | OK | 2026 Q1 SOTD 47건의 기술 분포 실측 — 3D 61%, Three.js 29/47, 배경 비디오 8% 미만, 업종 분포 |
+| 20 | https://www.awwwards.com/websites/sites_of_the_day/ | OK | SOTD 원본 아카이브. 트렌드 직접 확인용 |
+| 21 | https://by-kin.com/ | OK | 2026 SOTD + Developer Award 수상작. 에디토리얼 타이포 사례 |
+| 22 | https://iventions.com/ | OK | CSSDA Website of the Month. Three.js 조명 설계 사례 |
+| 23 | https://matvoyce.tv | BOT(307) | GSAP SOTY 노미네이트. 키네틱 타입이 가독성을 유지한 드문 사례. 자동 접근 시 Location 없는 307 반환(봇 보호) |
+| 24 | https://uncommonstudio.com.au/ | OK | 그리드를 정확한 지점에서만 깨는 사례 |
+| 25 | https://minhpham.design/ | OK | 3D가 작업물을 압도하지 않는 절제 사례 |
+
+---
+
+## C. 2026 트렌드 (03번 문서 근거)
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 26 | https://studiomeyer.io/en/blog/webdesign-trends-2026-reality-check | OK | **가장 유용한 트렌드 소스.** 상반기 실측으로 "통한 것 / 과대평가 / 미달"을 구분. 벤토 +23%, 글래스모피즘 FPS -15~30%, Spline 800KB~2MB |
+| 27 | https://elements.envato.com/learn/web-design-trends | OK | 2026 키네틱 타입·깨진 그리드·시각적 개성 회귀 |
+| 28 | https://www.figma.com/resource-library/web-design-trends/ | OK | Figma의 2026 트렌드 정리 |
+| 29 | https://www.frontendhorizon.com/blog/view-transitions-api-and-css-scroll-driven-animations-the-browser-wins-of-2026 | OK | View Transitions API·CSS scroll-driven animation의 크로스브라우저 안착. 05번 §5.1 근거 |
+| 30 | https://dev.to/nickbenksim/creating-complex-scroll-driven-animations-with-pure-css-in-2026-17l | OK | `view-timeline`, `timeline-scope` 실전 구현 |
+| 31 | https://www.loungelizard.com/blog/web-design-color-trends/ | OK | 2026 컬러 트렌드 |
+| 32 | https://www.recursion.agency/blog/ui-color-trends-2026 | OK | Quiet Luxury / Digital Calm / Digital Neon 등 2026 팔레트 방향 구분 |
+| 33 | https://www.devtoolnow.com/guides/color-formats-hex-rgb-hsl-oklch | OK | OKLCH가 표준이 된 이유와 HEX 대비 이점 |
+| 34 | https://medium.com/@orami98/designing-responsive-accessible-color-schemes-in-css-for-2026-d651cc0658a6 | OK | OKLCH + `color-mix()` + 접근성 클램핑 실무 |
+| 35 | https://www.maviklabs.com/blog/design-tokens-tailwind-v4-2026/ | OK | 의미 기반 토큰 설계 (Tailwind v4 + CSS 변수) |
+| 36 | https://medium.com/@aksamark/web-design-trends-2026-why-minimalism-is-evolving-into-bento-grids-16839fd31fb7 | OK | 벤토 그리드가 미니멀리즘을 대체한 과정 |
+| 37 | https://webpeak.org/blog/css-js-animation-trends/ | OK | 2026 CSS/JS 모션 트렌드와 마이크로 인터랙션 |
+| 38 | https://www.codercops.com/blog/web-animation-gsap-framer-motion-css-2026 | OK | GSAP vs Motion vs 플랫폼 네이티브 선택 기준. GSAP 전면 무료화 |
+| 39 | https://artcoastdesign.com/blog/best-graphic-design-textures-2026 | OK | 믹스드 미디어·필름 그레인 등 2026 질감 트렌드 |
+
+---
+
+## D. 타이포그래피 · 폰트 (03번 §3, §7 근거)
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 40 | https://www.typewolf.com/google-fonts | OK | 구글폰트 베스트 40, 본문용/디스플레이용 구분. 7.1절 추천의 기준 |
+| 41 | https://www.typewolf.com/adobe-fonts | OK | Adobe Fonts 베스트 40 |
+| 42 | https://www.typewolf.com/lookbooks | OK | 파운드리별 타입 페어링 룩북 |
+| 43 | https://designflea.com/typography-trends-2026/ | OK | 가변 폰트·브루탈리즘·세리프 부활 |
+| 44 | https://www.wix.com/wixel/resources/typography-trends | OK | 2026 타이포 트렌드. 초대형 타입·세리프의 "의도" 신호 해석 |
+| 45 | https://madegooddesigns.com/font-trends-2026/ | OK | 2026 폰트 12개 흐름 |
+| 46 | https://atypeofamigo.com/quality-fonts-for-everyone-type-foundries-that-all-designers-should-know/ | OK | 오픈소스 파운드리(Velvetyne, OSP, Uncut) 소개 |
+| 47 | https://velvetyne.fr/about/resources/ | OK | Velvetyne 리소스. 오픈소스 실험 타입 |
+| 48 | https://github.com/orioncactus/pretendard | OK | **Pretendard 공식 저장소.** SIL OFL, Thin~Black 9단계, 가변 폰트, jsDelivr CDN 경로 |
+| 49 | https://awz.kr/free-korean-fonts-commercial-use/ | OK | 상업 이용 가능 무료 한글 폰트 20종 정리 (제작처·웹폰트 지원·라이선스 표 포함). 7.3절의 근거 |
+| 50 | https://hangulhub.co.kr/en/tools/fonts | OK | 상업 무료 한글 폰트 109종 갤러리 |
+| 51 | https://noonnu.cc | OK | 눈누 — 한글 무료 폰트 수집처. 라이선스 범위 표기가 가장 명확 |
+| 52 | https://www.freekoreanfont.com/paperlogy-font-download/ | OK | 페이퍼로지 9단계 지오메트릭 산세 상세 |
+
+---
+
+## E. 레퍼런스 활용 방법론 (02번 문서 근거)
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 53 | https://www.intercom.com/blog/how-to-steal-like-a-designer-and-boost-creativity/ | OK | Kleon의 "steal like an artist"를 디자인 실무로 옮긴 글. 복제와 참고의 경계 |
+| 54 | https://medium.com/@ansimuz/copy-or-steal-using-references-to-create-your-art-653a3685fb19 | OK | 레퍼런스를 분해해 원리만 가져오는 방법 |
+| 55 | https://miro.com/moodboard/how-to-make-a-moodboard/ | OK | 무드보드 구성 실무 |
+| 56 | https://blog.cg-wire.com/animation-moodboard/ | OK | **40–60개 수집 → 12–20개로 압축**, 각 레퍼런스에 "결정 역할" 라벨링. 02번 §3·§4의 근거 |
+| 57 | https://www.nngroup.com/videos/squint-test/ | OK | NN/g의 squint test 설명. 02번 축6 근거 |
+| 58 | https://www.lukew.com/ff/entry.asp?2013= | OK | Luke Wroblewski의 squint test 원문 |
+| 59 | https://www.nngroup.com/articles/good-visual-design/ | OK | 시각 디자인 평가 기준 (원칙 중심) |
+| 60 | https://designlab.com/blog/design-critique-checklist-for-ux-designers | OK | 10항목 디자인 크리틱 체크리스트 |
+| 61 | https://www.affinity.studio/blog/visual-hierarchy-in-design | OK | 회색조 스케치·8pt 그리드·타입 스케일 3단계 제한. 02번 §2 근거 |
+| 62 | https://www.zekagraphic.com/grids-in-graphic-design-ultimate-guide/ | OK | 그리드 시스템 전반 |
+
+---
+
+## F. AI 에이전트 × 디자인 (02번 §5 근거)
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 63 | https://styles.refero.design/ai-agents/design-prompts | OK | **AI 에이전트용 디자인 프롬프트 구조.** "스타일과 구조를 동시에 요구하지 마라", 레퍼런스를 구현 요청 **앞에** 둘 것 |
+| 64 | https://styles.refero.design/ai-agents/design-md-examples | OK | DESIGN.md 실제 예시 모음 |
+| 65 | https://designmd.app/ | OK | AI 코딩 에이전트용 디자인 시스템 파일 561개 |
+| 66 | https://www.designsystems.one/design-systems | OK | 88개 실사용 디자인 시스템 + 항목별 design.md 다운로드 |
+| 67 | https://github.com/dembrandt/dembrandt | OK | 웹사이트의 디자인 토큰을 CLI로 추출하는 오픈소스. Playwright 렌더 후 computed style 분석. MCP 도구로 사용 가능 |
+| 68 | https://www.dembrandt.com/blackpaper | OK | 위 도구의 토큰 추출 방법론 문서 |
+| 69 | https://designsnap.dev/ | OK | 크롬 확장. computed style에서 색·폰트·그림자·CSS 변수를 뽑아 Tailwind/shadcn/Figma 토큰으로 내보냄 |
+| 70 | https://www.mydesignmd.com/how-to-extract-a-design-system-from-any-website | OK | 임의 사이트에서 디자인 시스템을 추출하는 절차 |
+| 71 | https://www.anthropic.com/engineering/effective-context-engineering-for-ai-agents | OK | 에이전트 컨텍스트 설계 원칙. 레퍼런스를 컨텍스트로 주입하는 방식의 근거 |
+| 72 | https://www.augmentcode.com/guides/how-to-build-agents-md | OK | AGENTS.md 작성법. DESIGN.md와의 분리 구조 |
+
+---
+
+## G. 갤러리 카탈로그 수집원 (01번 문서 근거)
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 73 | https://www.toools.design/blog-posts/ultimate-list-100-best-inspiration-sites-to-inspire-designers | OK | **01번 카탈로그의 최대 수집원.** 100+ 사이트를 UI/UX·웹·모바일·SaaS·랜딩·이커머스·이메일·포트폴리오·모션·로고·일러스트·데이터시각화·브랜딩으로 분류 |
+| 74 | https://colorlib.com/wp/showcase-inspiration-sites-web-design/ | OK | 주요 갤러리 16개의 성격 비교 (Awwwards vs CSSDA vs Godly vs SiteInspire 등) |
+| 75 | https://www.siteofsites.co/ | OK | 갤러리의 갤러리. 카탈로그 갱신원 |
+| 76 | https://coolcuration.com/cool/services-mobbin-vs-alternatives | OK | Mobbin vs Refero vs Page Flows 비교. Page Flows = Screenlane 후신이라는 사실의 출처 |
+| 77 | https://www.producthunt.com/products/mobbin/alternatives | OK | Mobbin 대안 목록 |
+| 78 | https://framify.design/blog/website-inspiration-for-framer-sites | OK | 고급 웹 인스피레이션 11선 |
+| 79 | https://www.20i.com/blog/inspiration-sites-web-designers/ | BOT(403) | 인스피레이션 사이트 21선. 브라우저로는 정상 |
+| 80 | https://muz.li/blog/best-color-palette-tools-and-generators-for-designers-2026/ | OK | 컬러 팔레트 도구 18종 실사용 비교. Khroma→Coolors→Stark 워크플로 |
+| 81 | https://storyflow.so/blog/best-moodboard-tools-designers-2026 | OK | 무드보드 도구 비교 |
+| 82 | https://www.refern.app/alternatives/best-are-na-alternatives | OK | Are.na·Savee·Cosmos의 성격과 가격 차이 (Savee 무료 체험 폐지 사실 포함) |
+| 83 | https://invernessdesignstudio.com/cosmos-app-guide-7-ways-to-optimise-creative-vision-in-2026 | OK | Cosmos가 AI 생성 이미지를 필터링한다는 사실의 출처 |
+| 84 | https://www.uxpin.com/studio/blog/best-design-system-examples/ | OK | 공개 디자인 시스템 15선 |
+| 85 | https://reallygooddesigns.com/neo-brutalist-website-examples/ | OK | 네오브루탈리즘 사례 16선 |
+| 86 | https://www.nngroup.com/articles/neobrutalism/ | OK | NN/g의 네오브루탈리즘 정의와 접근성 주의 |
+| 87 | https://www.qodeinteractive.com/magazine/best-examples-of-brutalism-in-web-design/ | OK | 웹 브루탈리즘 60선. Brutalist Websites의 출처(2014, Pascal Deville) 확인 |
+| 88 | https://resourceboy.com/textures/noise-textures/ | OK | 8K 무료 노이즈 텍스처 100종 |
+| 89 | https://texturize.app/category/noise | OK | 무료 심리스 노이즈·그레인 텍스처 + 생성기 |
+
+---
+
+## H. 국내(한국) 소스
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 90 | https://notefolio.net | OK | 노트폴리오 — 국내 최대 창작자·디자이너 플랫폼 |
+| 91 | https://www.dbcut.com | OK | 디비컷 — 국내외 신규 사이트 평가·아카이브 커뮤니티 |
+| 92 | https://gdweb.co.kr | OK | GDWeb — 국내 웹 에이전시 큐레이션·순위 |
+| 93 | https://ppcle.com/blog/web-design/web-design-reference-korea | OK | 국내 웹디자인 참고 사이트 정리 (쇼핑몰·기업 홈페이지 벤치마킹 관점) |
+| 94 | https://simplewp.co.kr/ | OK | 국내외 웹디자인 레퍼런스 사이트 총정리 글의 출처 |
+| 95 | https://brunch.co.kr/@@6Pxb/41 | 302(리다이렉트) | 국내 디자인 벤치마킹 사이트 정리. 브런치 리다이렉트 정책상 자동 접근 시 302 |
+
+---
+
+## 검증 요약
+
+| 구분 | 개수 | 비고 |
+|---|---|---|
+| 05번 문서 인용 소스 | **95** | 아래 상태 분포 |
+| ↳ 정상(200) | 89 | |
+| ↳ 봇 차단 / 리다이렉트 | 5 | HN(429), Medium(403), 브런치(302), matvoyce.tv(307), 20i.com(403) — 브라우저로는 전부 정상 |
+| ↳ **소멸(410)** | **1** | `aiproductivity.ai/news/how-to-spot-ai-slop-websites/` |
+| 01번 문서 갤러리·도구 URL | **155** | 완전 소멸 0건, 접속 이상 6건 (01번 하단 리포트) |
+| **총 검증 URL** | **250** (일부 중복 포함) | 2026-08-20 curl 실측. **죽은 링크는 전체에서 단 1개** |
+
+---
+
+## 다음 갱신 시 확인할 것
+
+1. **Krebs 데이터셋 확장 여부** — 1,590건이 늘어나면 검출률 수치가 바뀐다 (04번 §0)
+2. **Awwwards 2026 Q3–Q4 SOTD 분포** — 3D 61% 비중이 계속 오르는지, 꺾이는지 (03번 §1.2)
+3. **CSS scroll-driven animation 실사용률** — GSAP 의존이 실제로 줄고 있는지 (03번 §5.1)
+4. **commercecream.com HTTPS 복구 여부** — 계속 죽어 있으면 01번에서 제거
+5. **Savee 가격 정책** — 무료 체험 재도입 시 01번 §15 수정
diff --git a/research/site-brief.md b/research/site-brief.md
new file mode 100644
index 0000000..987078b
--- /dev/null
+++ b/research/site-brief.md
@@ -0,0 +1,827 @@
+# designpaca 소개 페이지 — 1·2·3단계 산출물
+
+> **2026-08-20 갱신 (4차).** **3단계(디자인 토큰과 예산)**를 추가했다 — §J가 4단계의 입력이다.
+> 2단계는 사용자 결정 *"위에 모두 다 한다. 멀티링구얼하게 한다"* 에 따라 세 컨셉을 하나의 문장으로 통합한 것이다(§A).
+> 6축과 대비값은 전부 실측·실계산이다. 추정값 없음.
+>
+> **읽는 순서**: §1 브리프 → **§J 토큰(3단계, 복사해 쓰는 곳)** → 근거가 필요하면 2단계(§A~§I) → 1단계(§2~§11).
+
+---
+
+## 1. 브리프
+
+```
+무엇을:  designpaca 소개 페이지. 웹 디자인 파이프라인 스킬 + npx 설치 CLI 를 소개하는 단일 페이지
+누구에게: Claude Code · Codex · Cursor 를 쓰는 개발자. `npx designpaca` 를 터미널에 치게 만드는 것이 목표
+제약:    Astro 정적 → Cloudflare Pages / 한국어 우선 / 히어로까지 JS 150KB gzip, 첫 인터랙션 3초
+         이 페이지 자체가 스킬의 품질 증거물이다
+```
+
+**한 문장 브리프**: 회의적인 개발자가 이 페이지를 읽고 `npx designpaca` 를 친다. 느껴야 할 것은 **절제**와 **근거**.
+
+사용자 결정: **세 컨셉을 전부 담고, 한국어·영어 양쪽을 만든다.**
+
+---
+
+# 2단계 — 방향 결정
+
+## A. 한 문장 컨셉
+
+> **이 페이지는 designpaca를 거쳐 만들어졌고, 그 절차와 형태 수치를 한국어 기준으로 전부 공개한다.**
+
+세 컨셉이 이 한 문장 안에서 각자의 자리를 갖는다.
+
+| 컨셉 | 문장 속 위치 | 하는 일 |
+|---|---|---|
+| 3. 파이프라인을 판다 | **"designpaca를 거쳐 … 그 절차"** | 페이지의 뼈대 |
+| 1. 형태까지 간다 | **"형태 수치"** | 주장의 증거 |
+| 2. 한국어로 푼다 | **"한국어 기준으로"** | 차별화의 근거 |
+| — 통합축 | **"전부 공개한다"** | 셋을 하나로 묶는 것 |
+
+**통합축은 "자기 증명"이다.** 셋을 나열해 붙인 게 아니라, *이 페이지 자신이 첫 사례라는 사실* 하나로 묶인다.
+파이프라인은 이 페이지가 실제로 거친 과정이고, 형태 수치는 그 과정이 남긴 흔적이고, 한국어는 그 흔적이 라틴 기준 도구로는 나올 수 없었다는 증거다.
+
+---
+
+## B. 미학 프리셋 — `swiss-minimal`
+
+→ 3단계에서 `references/presets/swiss-minimal.md` **하나만** 읽는다. 넷 다 읽지 않는다.
+
+하나만 고른다. 섞지 않는다.
+
+**선택 근거**
+1. 자기 증명의 핵심 장치가 **수치 공개**다. 수치는 격자와 표로 읽힌다.
+2. **멀티링구얼이 결정적이었다.** `editorial`의 세리프 산문은 한국어에서 마루 부리, 영어에서 Spectral로 갈리며 두 판의 톤이 벌어진다. `swiss-minimal`의 그로테스크는 Pretendard / Switzer로 양쪽이 같은 성격을 유지한다.
+3. `anti-grid`는 브리프 형용사(**절제**, **근거**)와 정면 충돌한다.
+
+**나머지에서 빌릴 것 — 딱 이것만**
+
+| 프리셋 | 빌릴 것 | 빌리지 않을 것 |
+|---|---|---|
+| `editorial` | 각 규칙 옆에 **근거 1문장**을 붙이는 Klim식 어법 | 세리프 본문, 산문 중심 레이아웃 |
+| `anti-grid` | 파이프라인 섹션 **한 곳에서만** 그리드를 의도적으로 어긋내 진행감을 만든다 | 페이지 전반의 깨진 레이아웃, 모노스페이스 남용 |
+
+---
+
+## C. 감수할 리스크 — 하나
+
+> **이 페이지 자신의 형태 수치를 페이지에 공개한다.**
+> radius 어휘 수, `backdrop-filter` 개수, 타입 스케일 단계 수, 폰트 패밀리 수, 히어로까지의 JS gzip 크기, 프리플라이트 통과 항목.
+
+**왜 이게 대담한가**: 공개한 순간 검증 가능해진다. 나중에 하나라도 어기면 페이지 전체의 주장이 무너진다. 되돌릴 수 없는 약속이다.
+
+**왜 이걸 골랐나**: 컨셉의 심장이기 때문이다. "형태까지 간다"를 말로만 하면 그것도 자기 평가 형용사다. 수치를 걸어야 주장이 된다.
+
+**단 이 수치는 5단계 실측 전까지 지어내지 않는다.** SKILL.md 하드 게이트 11에 정면으로 걸린다.
+4단계에서는 `{{RADIUS_COUNT}}` `{{GLASS_COUNT}}` `{{TYPE_STEPS}}` `{{JS_GZIP_KB}}` 같은 **명시적 placeholder**로 두고,
+5단계 프리플라이트에서 실제로 측정한 값으로 채운다. 숫자 모양의 구멍은 정직하고, 그럴듯한 숫자는 슬롭이다.
+
+**나머지 두 위험은 리스크가 아니라 설계로 처리한다** — 대담함은 한 곳에만 둔다.
+- 번호 없는 파이프라인 → §E에서 3중 장치로 해결
+- 한국어판이 원본 → §F에서 영어판을 번역이 아닌 별도 집필로 해결
+
+---
+
+## D. 저격 회피 — 팀 리드 제안에서 한 걸음 더
+
+리드 제안은 "수치를 익명으로 쓰되 우리 것을 나란히 공개"였다. **더 나은 방법이 있다.**
+
+**남의 수치를 아예 쓰지 않는다. 우리 수치만 쓴다.**
+
+| 이유 | 설명 |
+|---|---|
+| 익명화가 작동하지 않는다 | 안티슬롭 도구는 손에 꼽는다. "실측한 어떤 도구"라고 써도 누군지 다 안다. 익명화는 저격을 예의 바르게 만들 뿐이다 |
+| 남의 수치는 반박 가능하다 | "그 40개는 대부분 nav야", "16px는 의도야" — 논쟁이 시작되는 순간 제품 이야기가 사라진다 |
+| 자기 수치는 반박 대상이 아니다 | 우리가 우리 페이지에 대해 말하는 건 논쟁거리가 아니라 사실이다 |
+
+**대신 이렇게 프레이밍한다**: *"카피만 고치면 남는 것"* 을 **우리 자신의 프리플라이트 로그**로 제시한다.
+이 페이지를 만들면서 실제로 걸린 항목과 고친 값을 그대로 싣는다. 남을 검사한 결과가 아니라 **자신을 검사한 결과**다.
+
+지목 대상은 제품이 아니라 **방법론**이다 — "카피 레이어만 다루는 접근". 이건 특정 제품이 아니라 안티슬롭 도구 전반의 공통 한계이므로 저격이 성립하지 않는다.
+
+tasteskill.dev의 실측치(radius 8종 / 글래스 40 / 타입 12단계)는 **1단계 조사 문서에만 남기고 페이지에는 싣지 않는다.**
+
+---
+
+## E. C-07 해법 — 번호 없이 순서 표현하기
+
+**결론: 풀렸다. 컨셉 3을 유지한다.**
+
+### 3중 장치
+
+**① 시각 — 연속선 위의 위치 (Harry Beck, 1933)**
+
+Beck의 런던 지하철 노선도는 "topology trumped topography" 원칙으로 만들어졌다.
+역을 실제 거리가 아니라 **등간격으로 선 위에 재배치**했고, 순서는 번호가 아니라 **선 위의 위치**가 만든다.
+90년 넘게 세계 표준으로 남아 있으므로 가독성은 검증된 셈이다.
+
+→ 세로 **스파인(연속선)** 이 파이프라인 섹션을 관통한다. 6단계는 그 선 위의 위치로 순서를 갖는다. 번호를 쓰지 않는다.
+
+**② 내용 — 같은 대상의 상태 변화 (IKEA)**
+
+IKEA 조립 설명서는 페이지당 한 동작만 보여주고, 화살표가 방향을, 하이라이트가 연결점을 나타낸다.
+순서는 번호가 아니라 **"한 화면 = 한 동작"이라는 분절**과 **대상의 변화**가 만든다.
+IKEA가 이렇게 하는 동기는 **언어 독립성**이다 — 한 벌로 전 세계에 나간다.
+
+→ 각 단계마다 **같은 브리프 문장 하나**가 어떻게 변해 가는지 보여준다.
+브리프 → 레퍼런스 3개 → 6축 수치 → 토큰 → 마크업 → 프리플라이트 결과.
+**변화 자체가 순서를 증명하므로 번호가 필요 없다.**
+
+**③ 의미 — `<ol role="list">` (Scott O'Hara)**
+
+Safari/VoiceOver는 `list-style: none`이 적용되면 리스트 의미를 보조기술에 노출하지 않는다.
+Scott O'Hara가 제시한 해법은 요소에 **`role="list"` 를 명시**해 의미를 복원하는 것이다.
+
+```html
+<ol role="list" class="pipeline">   <!-- list-style: none -->
+  <li>…</li>
+</ol>
+```
+
+→ **시각적으로는 번호 0개, 보조기술에는 "6개 중 1번째"로 전달된다.**
+C-07을 회피하면서 접근성은 오히려 좋아진다.
+
+### 왜 서사형(narrative)은 안 썼나
+
+문단 서술로 순서를 표현하는 방식(narrative recipe)도 검토했다.
+조리 과정처럼 초기 중국·인도·유럽 레시피가 전부 문단 서술형이었다. 하지만 **복잡하지 않은 절차에만 적합하고 따라가기 어렵다**는 한계가 문헌에서 반복 지적된다.
+6단계 파이프라인에는 부적합하다. 채택하지 않는다.
+
+### 멀티링구얼 보너스
+
+스파인과 상태 변화는 **번역이 필요 없다.** IKEA가 언어 독립성을 위해 택한 방식과 같은 이유로,
+한국어판과 영어판이 **같은 시각 구조를 공유하고 텍스트만 갈린다.** 난제 1의 해법이 난제 3을 함께 줄인다.
+
+---
+
+## F. 멀티링구얼 설계
+
+리드가 정한 기본값 4개는 **전부 타당하다. 뒤집을 근거 없음.** 그 위에 실행 값을 정한다.
+
+| 항목 | 결정 |
+|---|---|
+| 경로 | `/` = 한국어(원본) · `/en/` = 영어. 같은 페이지 내 병기 안 함 |
+| 전환 | 헤더에 하나. 자동 리다이렉트 없음. `<link rel="alternate" hreflang="ko|en|x-default">` |
+| 집필 | 번역이 아니라 **각 언어판 별도 집필** |
+| **국기 아이콘** | **쓰지 않는다.** 언어는 국가가 아니다. `한국어 / English` 텍스트로만 |
+
+### 언어별로 갈리는 값
+
+한글은 같은 px에서 라틴보다 작아 보이고 줄바꿈 규칙이 다르다. **두 판이 같은 값을 쓰면 한쪽이 깨진다.**
+
+| 값 | 한국어판 `/` | 영어판 `/en/` |
+|---|---|---|
+| UI·본문 폰트 | **Pretendard** (단일) | **Switzer** |
+| 코드·설치 명령 | JetBrains Mono | JetBrains Mono (공통) |
+| 본문 크기 | **17px** | 16px |
+| 본문 line-height | **1.7** | 1.55 |
+| letter-spacing (본문) | **0** (음수 금지) | 0 |
+| 텍스트 컬럼 폭 | **약 560px** (국문 25–40자) | 약 640px (65ch) |
+| 줄바꿈 | `word-break: keep-all` + `overflow-wrap: break-word` | 기본값 |
+| 최소 텍스트 크기 | **16px** (예외 없음) | 14px |
+
+두 판이 공유하는 것: 그리드, 여백 리듬, 컬러 토큰, radius 어휘, 모션, 스파인 구조.
+
+---
+
+## G. 섹션 구조
+
+스파인(§E-①)이 §2부터 §4까지를 관통한다.
+
+| # | 섹션 | 살아나는 컨셉 | 한국어판 | 영어판 |
+|---|---|---|---|---|
+| 1 | **히어로** — h1 `designpaca` / 한 문장 / 설치 명령 + 복사 버튼 / 보조 링크 2개 | — | 동일 구조 | 동일 구조 |
+| 2 | **파이프라인** — 스파인 위 6단계. 번호 없음. 같은 브리프 문장이 단계마다 변한다 | **컨셉 3** | 동일 시각 구조 | 동일 시각 구조 |
+| 3 | **이 페이지의 수치** — radius 어휘 수 / 글래스 개수 / 타입 단계 / 패밀리 수 / JS gzip | **컨셉 1** (+ 리스크 §C) | 동일 (언어 무관) | 동일 |
+| 4 | **프리플라이트 로그** — 이 페이지를 만들며 실제로 걸린 항목과 고친 값 | **컨셉 1** (§D 프레이밍) | 동일 | 동일 |
+| 5 | **조판** — 왜 라틴 기준 도구로는 안 되는가. 실제 대비 예시 | **컨셉 2** | *"한글 조판"* — 우리 주장의 핵심. `keep-all` 유무 대비를 실물로 | *"Your language is not Latin"* — 한글을 **사례**로 쓰고 주장을 일반화 |
+| 6 | **규칙** — 상위 항목 + 각 규칙 옆 근거 1문장 | 컨셉 1 (`editorial`에서 빌림) | 동일 | 동일 |
+| 7 | **설치 반복 + 에이전트 호환 목록** | — | 동일 | 동일 |
+| 8 | 푸터 | — | 동일 | 동일 |
+
+**§5가 두 판의 유일한 실질적 차이다.** 한국어판에서는 주장이고, 영어판에서는 사례다.
+영어판에서 한글을 사례로 쓰는 편이 오히려 강하다 — 읽는 사람이 겪어보지 않은 문제를 구체적으로 보여주기 때문이다.
+
+**설치 명령 노출 3회**: 히어로(§1) / 파이프라인 끝(§2) / 하단(§7). tasteskill과 Bun 양쪽에서 확인된 배치다.
+
+---
+
+## H. 하지 않을 것 (6단계 `design.md`에 그대로 들어간다)
+
+### tasteskill.dev에서 가져오지 않는 것
+
+| 항목 | 그들의 실측치 | 우리 값 |
+|---|---|---|
+| border-radius 어휘 | **8종** (최다 16px) | **2종** |
+| `backdrop-filter` | **40개 요소** | **0개** |
+| 타입 스케일 단계 | **12단계 이상** (9–11px 텍스트 43회) | **5단계**, 하한 16px |
+| 폰트 패밀리 | 3개 (Playfair Display 7회) | **2개** + 코드용 모노 1개 |
+| transition 최빈값 | **0.5s** | **200–320ms** |
+| 스폰서·후원자 벽 | 페이지의 **28%** | **0%** — 섹션 자체를 만들지 않는다 |
+| 클릭 요소 | **77개** | 설치라는 단일 목표를 흐리지 않는 수준으로 |
+| GitHub 스타를 최상단 지표로 | 78,216 | **쓰지 않는다.** 우리는 숫자가 없다. 인기 대신 **규율**을 증거로 쓴다 |
+| h1 = 제품명 하나 | `Taste Skill` | 제품명 + 한 문장. 무명 제품이 이름만 두면 정보가 0인 히어로가 된다 |
+| **"Anti-Slop" 명명** | 제목·설명 전반 | **이 단어를 쓰지 않는다.** 같은 말을 쓰면 즉시 아류로 읽힌다 |
+| 장식 번호 | `01 Codex 02 Claude Code` | 번호 자체를 쓰지 않는다 (§E) |
+
+### antipatterns.md에서 특히 경계할 것
+
+`C-07`(번호 단계, 검출률 9.4%) · `D-01`/`D-02`(radius 16px 기본값) · `D-05`(글래스) · `B-06`/`H-13`(타입 단계·9–11px) · `B-04`(3번째 패밀리) · `C-08`(근거 없는 지표) · `D-06`(이모지 아이콘) · `B-14`(한글 폰트 미지정) · `D-09`(로고월·스폰서 벽)
+
+---
+
+## I. SKILL.md 하드 게이트 정합성
+
+이 방향이 5단계에서 걸릴 수 있는 지점을 미리 처리한다. **지금 정해두지 않으면 4단계에서 반드시 위반한다.**
+
+| 게이트 | 이 방향에서의 위험 | 지금 내리는 결정 |
+|---|---|---|
+| **#3** radius 3종 이상 | — | **2종**으로 확정. 토큰 밖 radius 금지 |
+| **#4** 정의 없는 테마 반전 | **오프화이트 그라운드 + 다크 밴드 리듬**이 정확히 이 게이트를 건드린다 | 반전을 **토큰 규칙으로 정의**한다 — `--surface` / `--surface-inverse` 쌍을 3단계에서 만들고, **다크 밴드는 히어로와 설치 섹션 두 곳에만** 쓴다는 규칙을 함께 적는다. 섹션마다 기분대로 뒤집으면 실패다 |
+| **#11** 지어낸 수치 | §C의 자기 수치 공개가 정면으로 걸린다 | 4단계까지 `{{RADIUS_COUNT}}` 등 **placeholder**. 5단계 실측으로만 채운다 |
+| **#12** 가짜 프레임 | 파이프라인 섹션에서 `<div>`로 **가짜 터미널·에디터 창**을 만들고 싶어진다 | **만들지 않는다.** 상태 변화는 실제 텍스트와 실제 코드 블록으로 보여준다. 크롬 장식 없음 |
+| **카운트** 레이아웃 패밀리 3개 이상 (섹션 8개) | 전부 같은 세로 스택이 되기 쉽다 | 패밀리 3개 확보 — ① 중앙 정렬 히어로(§1) ② **스파인 + 좌우 교차 배치**(§2) ③ 표·격자(§3·§4·§6) |
+| **카운트** eyebrow ≤ `ceil(8/3)` = 3개 | 섹션마다 작은 대문자 라벨을 붙이기 쉽다 | eyebrow **3개 이하**. 나머지 섹션은 헤드라인만으로 구분 |
+| **카운트** 히어로 텍스트 요소 ≤ 4개 | 제품명 + 한 문장 + 설치 + 보조 링크 2개 = 5개가 된다 | 보조 링크 2개를 **하나의 그룹**으로 묶어 4개로 유지 |
+| **preflight §1** `prefers-reduced-motion` | "전부 끄기"는 오답이다 | wipe(위치 이동)만 죽이고 **페이드와 상태 변화는 남긴다.** 덮개를 `display: none` 하고 opacity 전환은 유지 (구현은 §J-0) |
+| **preflight §5-4** R2의 흔적 | Klim이 흔적 없이 사라지기 쉽다 | R2의 흔적이 남는 곳을 못박는다 — **radius 2종(1종에 가깝게)**, **타입 5단계**, **강조색 면적 극소**, **규칙 옆 근거 1문장 어법** |
+
+---
+
+# 3단계 — 디자인 토큰과 예산
+
+## J. 토큰 (4단계에서 그대로 복사해 쓴다)
+
+### J-0. 먼저 — 2단계 §E의 R3 기법을 교정한다
+
+**게이트 #8**(`transform`/`opacity` 외의 속성을 애니메이션하는가)과 2단계에서 정한 `clip-path` wipe가 충돌한다.
+
+**교정**: `clip-path` 대신 **덮개 요소를 `transform: translateX()` 로 밀어낸다.**
+시각 효과는 동일한 좌→우 리빌이고, 게이트를 통과하며, 컴포지터 처리가 보장된다.
+Codrops가 경고한 clip-path 보간 제약(같은 도형 함수·같은 점 개수)도 함께 사라진다.
+
+```css
+.reveal > .reveal__cover {              /* 대상을 덮는 단색 판 */
+  transform: translateX(0);
+  animation: wipe linear both;
+  animation-timeline: view();
+  animation-range: entry 10% entry 55%;  /* 2단계에서 정한 짧은 범위 */
+}
+@keyframes wipe { to { transform: translateX(100%); } }
+
+@supports not (animation-timeline: view()) { .reveal__cover { display: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .reveal__cover { display: none; }      /* 위치 이동만 죽인다. 페이드·상태 변화는 유지 */
+}
+```
+
+---
+
+### J-1. 타입 스케일 — 비율 **1.25**, 디스플레이는 스케일 밖
+
+비율 1.25로 5단계를 쌓으면 최대÷본문이 **2.44배**에 그쳐 `antipatterns.md` B-05(4배 이상)를 만족할 수 없다.
+**단계를 늘려 맞추지 않는다.** `tokens.md` §1대로 **디스플레이 사이즈를 스케일 밖에 따로 정의**한다.
+
+| | 한국어판 `/` | 영어판 `/en/` |
+|---|---|---|
+| 본문 | 17px | 16px |
+| 스케일 5단계 | 17 / 21.3 / 26.6 / 33.2 / 41.5 | 16 / 20 / 25 / 31.3 / 39 |
+| **디스플레이 (스케일 밖)** | **68px** | **64px** |
+| **최대÷본문** | **4.0배** ✓ | **4.0배** ✓ |
+
+**하위 단계(캡션·라벨)를 만들지 않는다.** 한글 하한 16px을 지키면 본문 아래 단계가 설 자리가 없고,
+`swiss-minimal`이 요구하는 "위계 차이를 작게, 대신 웨이트와 색으로 구분"과도 맞는다.
+eyebrow는 **본문 크기 + 자간 + `--ink-muted`** 로 만든다. 두 판의 구조가 동일하게 유지되는 이득도 있다.
+
+---
+
+### J-2. CSS — 그대로 복사한다
+
+```css
+/* ============================================================
+   designpaca 소개 페이지 — 디자인 토큰
+   프리셋: swiss-minimal / 비율 1.25 / 강조색 1개 / radius 2종
+   ============================================================ */
+
+:root {
+  /* ---- 폰트 패밀리 ---------------------------------------- */
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --mono-size: 0.9375em;          /* 부모 대비. 새 스케일 단계를 만들지 않는다 */
+
+  /* ---- 색: 라이트 (기본) ----------------------------------- */
+  --surface:            #FAF9F6;  /* 웜 오프화이트. 순백 아님 (A-07) */
+  --surface-raised:     #F2F0EA;
+  --surface-inverse:    #14161A;  /* 다크 밴드. 순흑 아님 */
+  --ink:                #16181C;  /* 대비 16.88:1 */
+  --ink-muted:          #5A5F66;  /* 대비  6.11:1 */
+  --ink-inverse:        #E9E7E2;  /* 밴드 위 14.66:1 */
+  --ink-muted-inverse:  #9AA0A6;  /* 밴드 위  6.86:1 */
+  --line:               #DFDCD4;  /* 1.30:1 — 장식 구분선 전용 */
+  --line-inverse:       #2A2E34;  /* 1.33:1 — 장식 구분선 전용 */
+  --line-strong:        var(--ink-muted);      /* 입력·컨트롤 테두리. WCAG 1.4.11 (3:1) */
+  --accent:             #0E6B63;  /* 딥 틸. 대비 6.04:1 */
+  --accent-ink:         #FFFFFF;  /* 강조 위 글자. 6.36:1 */
+  --accent-inverse:     #3FA89D;  /* 밴드 위 강조. 6.30:1 */
+
+  /* ---- 형태: radius 2종 (게이트 #3) ------------------------ */
+  --radius-sm: 3px;               /* 버튼·입력·배지 */
+  --radius-md: 6px;               /* 카드·코드 블록 */
+
+  /* ---- 간격 ------------------------------------------------ */
+  --space-1: 0.25rem;   /*   4 */
+  --space-2: 0.5rem;    /*   8 */
+  --space-3: 1rem;      /*  16 */
+  --space-4: 1.5rem;    /*  24 */
+  --space-5: 2.5rem;    /*  40 */
+  --space-6: 4rem;      /*  64 */
+  --space-7: 6rem;      /*  96 — 일반 섹션 상하 */
+  --space-8: 8rem;      /* 128 — 다크 밴드 상하. 본문 간격의 8배 */
+
+  /* ---- 모션 ------------------------------------------------ */
+  --dur-instant: 100ms;           /* 호버·포커스 */
+  --dur-quick:   200ms;           /* 작은 등장·퇴장 */
+  --dur-normal:  320ms;           /* 패널·전환. 2단계 상한 */
+  --dur-slow:    600ms;           /* 이 프로젝트에서는 사용하지 않는다 */
+
+  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
+  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
+  /* bounce·elastic 없음 (E-02) */
+}
+
+/* ---- 색: 다크 테마 — 라이트와 동등하게 정의 ------------------ */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --surface:            #14161A;
+    --surface-raised:     #1C1F24;
+    --surface-inverse:    #FAF9F6;  /* 다크에서는 밴드가 밝아진다 */
+    --ink:                #E9E7E2;
+    --ink-muted:          #9AA0A6;
+    --ink-inverse:        #16181C;
+    --ink-muted-inverse:  #5A5F66;
+    --line:               #2A2E34;
+    --line-inverse:       #DFDCD4;
+    --line-strong:        var(--ink-muted);
+    --accent:             #3FA89D;  /* 6.30:1 */
+    --accent-ink:         #0B1A18;  /* 6.21:1 */
+    --accent-inverse:     #0E6B63;
+  }
+}
+
+/* ---- 타입: 한국어판 --------------------------------------- */
+[lang="ko"] {
+  --font-sans: "Pretendard Variable", Pretendard, system-ui, sans-serif;
+
+  --step-0: 1.0625rem;            /* 17 — 본문 · eyebrow · 코드 */
+  --step-1: 1.328rem;             /* 21.3 — 리드 */
+  --step-2: 1.660rem;             /* 26.6 — h3 */
+  --step-3: 2.076rem;             /* 33.2 — h2 */
+  --step-4: 2.595rem;             /* 41.5 — h1 */
+  --display: clamp(2.595rem, 1.6rem + 4.2vw, 4.25rem);  /* → 68 */
+
+  --leading-tight:  1.15;
+  --leading-normal: 1.7;          /* 한글은 넉넉하게 */
+  --measure: 33em;                /* ≈ 561px. 한글 글자폭 ≈ 1em */
+
+  --tracking-display: -0.01em;    /* 한글은 음수 자간을 크게 주지 않는다 */
+  --tracking-body: 0;             /* 한글 본문 음수 자간 금지 */
+  --tracking-label: 0.08em;
+
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}
+
+/* ---- 타입: 영어판 ------------------------------------------ */
+[lang="en"] {
+  --font-sans: "Switzer", system-ui, -apple-system, sans-serif;
+
+  --step-0: 1rem;                 /* 16 */
+  --step-1: 1.25rem;              /* 20 */
+  --step-2: 1.5625rem;            /* 25 */
+  --step-3: 1.953rem;             /* 31.3 */
+  --step-4: 2.441rem;             /* 39 */
+  --display: clamp(2.441rem, 1.5rem + 4vw, 4rem);       /* → 64 */
+
+  --leading-tight:  1.1;
+  --leading-normal: 1.55;
+  --measure: 65ch;                /* ≈ 640px */
+
+  --tracking-display: -0.025em;
+  --tracking-body: 0;
+  --tracking-label: 0.08em;
+}
+
+/* ---- 다크 밴드: 게이트 #4가 요구하는 "규칙으로 정의된 반전" ---- */
+/* 사용처는 히어로와 설치 섹션 두 곳뿐이다. 그 외 사용 금지.        */
+.band-inverse {
+  --surface:       var(--surface-inverse);
+  --ink:           var(--ink-inverse);
+  --ink-muted:     var(--ink-muted-inverse);
+  --line:          var(--line-inverse);
+  --accent:        var(--accent-inverse);
+  background: var(--surface);
+  color: var(--ink);
+  padding-block: var(--space-8);
+}
+```
+
+---
+
+### J-3. 다크 밴드 규칙 (게이트 #4)
+
+| 규칙 | 값 |
+|---|---|
+| 반전 수단 | `.band-inverse` 클래스 **하나**. 인라인 색 금지 |
+| 사용 섹션 | **정확히 2곳** — 히어로(§G-1), 설치 반복(§G-7) |
+| 밴드 상하 여백 | `--space-8` (128px). 일반 섹션은 `--space-7` (96px) |
+| 밴드 전용 여백 토큰 | **만들지 않는다.** 기존 스케일 안에서 해결한다 (`tokens.md` §3 중간값 금지) |
+
+---
+
+### J-4. 성능 예산 — 이 프로젝트 확정값
+
+기본값보다 **전 항목을 조인다.** Astro 정적 사이트이고 이미지가 거의 없으며 인터랙션이 복사 버튼과 언어 전환뿐이다.
+
+| 항목 | 기본 | **이 프로젝트** | 근거 |
+|---|---|---|---|
+| 히어로까지 JS (gzip) | 150KB | **50KB** | Astro 아일랜드 최소. 복사 버튼 하나 |
+| WebGL/3D 추가분 | +200KB | **0KB — three.js 를 쓰지 않는다** | 브리프에 3D 요구가 없다. R3는 CSS scroll-driven이라 JS가 0이다. `three.md`는 읽지 않는다 |
+| 총 전송량 (첫 화면) | 1MB | **500KB** | 사진 없음. 폰트가 대부분 |
+| 첫 인터랙션 (모바일 4G) | 3초 | **2초** | |
+| LCP | 2.5초 | **2.0초** | LCP 요소는 히어로 텍스트다 |
+| CLS | 0.1 | **0.05** | 유일한 위험이 폰트 스왑이다 |
+| 폰트 파일 | 2개 이하 | **판당 2개** | 본문 1 + 모노 1 |
+| 애니메이션 속성 | transform/opacity | **transform/opacity 만** | J-0에서 `clip-path` 를 제거해 확보했다 |
+
+### 폰트 로딩 전략 — 최대 변수
+
+**두 벌을 한 페이지에 로드하지 않는다.** 경로가 갈려 있으므로 Astro 레이아웃을 언어별로 나눈다.
+
+| | 한국어판 `/` | 영어판 `/en/` |
+|---|---|---|
+| 본문 | Pretendard Variable — **동적 서브셋** (`unicode-range` 분할 CSS) | Switzer 가변 (라틴만) |
+| 코드 | JetBrains Mono 400 (라틴 서브셋) | 동일 |
+| preload | 본문 폰트 **1개만**. 모노는 코드 블록에만 쓰이므로 preload 하지 않는다 | 동일 |
+| `font-display` | `swap` | `swap` |
+
+- **한글 서브셋은 필수다.** 전체 한글 폰트는 MB 단위다. 동적 서브셋은 실제로 등장하는 유니코드 범위만 내려받는다.
+- 영어판에 Pretendard를 **로드하지 않는다.** 한국어판에 Switzer를 **로드하지 않는다.**
+- 실제 KB는 5단계에서 측정한다 (J-5).
+
+---
+
+### J-5. 자기 수치 공개 — 항목과 측정 방법 (지금 못 박는다)
+
+**이 9개를 고정한다. 5단계에서 이 목록대로 재고, 결과가 나쁘게 나와도 그대로 싣는다.**
+나중에 유리한 것만 골라 싣는 순간 §C의 리스크가 자기 홍보로 바뀐다.
+
+| # | 공개 항목 | placeholder | 측정 방법 |
+|---|---|---|---|
+| 1 | radius 어휘 수 | `{{RADIUS_COUNT}}` | 빌드 결과에 `reference-method.md` §5 스크립트 → `radii` distinct 개수 |
+| 2 | `backdrop-filter` 요소 수 | `{{GLASS_COUNT}}` | 같은 스크립트 `blurCount` |
+| 3 | 타입 스케일 단계 수 | `{{TYPE_STEPS}}` | 같은 스크립트 `fontSizes` distinct 개수 |
+| 4 | 폰트 패밀리 수 | `{{FONT_FAMILIES}}` | 같은 스크립트 `families` |
+| 5 | 강조색 개수 | `{{ACCENT_COUNT}}` | 토큰 파일 grep + computed 색 tally |
+| 6 | 히어로까지 JS (gzip) | `{{JS_GZIP_KB}}` | `list_network_requests` / 빌드 산출물 gzip |
+| 7 | 첫 인터랙션 (모바일 4G) | `{{TTI_S}}` | Lighthouse 또는 performance trace |
+| 8 | 하드 게이트 통과 | `{{GATES_PASSED}}/12` | `preflight.md` 실행 결과 |
+| 9 | 슬롭 지문 grep 검출 | `{{SLOP_HITS}}` | `antipatterns.md` §9 grep 목록 |
+
+**측정 대상은 프로덕션 빌드다** (`preflight.md` §0 — 소스만 보면 렌더된 DOM이 없어 잴 수 없다).
+
+---
+
+### J-6. 3단계 통과 확인
+
+> **성능 예산 = JS 50KB(gzip) / 첫 인터랙션 2초 / three.js 미사용**
+
+| 검사 | 결과 |
+|---|---|
+| 비율 하나인가 | ✓ 1.25. 디스플레이는 스케일 밖 별도 정의 |
+| 최대÷본문 4배 이상 (B-05) | ✓ 두 판 모두 정확히 4.0배 |
+| 폰트 2종 이하 (tokens.md §1) | ✓ 판당 본문 1 + 모노 1 |
+| 강조색 하나 (게이트 #2) | ✓ `--accent` 하나. `--accent-inverse` 는 같은 색의 밴드용 변형이지 두 번째 강조가 아니다 |
+| radius 3종 미만 (게이트 #3) | ✓ 2종 |
+| 테마 반전이 규칙으로 정의 (게이트 #4) | ✓ `.band-inverse`, 사용처 2곳 못박음 (J-3) |
+| 두 테마 동등 정의 (tokens.md §2) | ✓ 라이트·다크 전 역할 정의 |
+| 대비 본문 4.5:1 / 버튼 4.5:1 (게이트 #7) | ✓ 14개 조합 전부 계산해 검증. **최저 6.04:1**, 최고 16.88:1 |
+| 비텍스트 대비 3:1 (WCAG 1.4.11) | ✓ `--line`(1.30:1)은 **장식 구분선 전용**이다. 입력·컨트롤 테두리에는 `--line-strong`(= `--ink-muted`, 6.11:1)을 쓴다. 이 구분을 안 하면 4단계에서 폼 테두리가 그대로 실패한다 |
+| transform/opacity 만 (게이트 #8) | ✓ J-0에서 `clip-path` 제거 |
+| 한글 조판 (B-14) | ✓ `keep-all`, lh 1.7, 음수 자간 0, 하한 17px |
+
+**4단계 인계 주의 — `layout.md`의 그리드를 그대로 복사하지 마라.**
+`layout.md` §1의 예시 그리드는 `main` 컬럼이 `minmax(0, 60rem)` = **960px**인데, 여기서 정한 `--measure`는
+한국어 **33em(≈561px)** · 영어 **65ch(≈640px)**다. 그리드를 그대로 쓰면 본문이 measure를 훌쩍 넘겨
+`layout.md` 자신의 통과 조건("본문에 `--measure`가 적용됐다")에 걸린다.
+→ `main` 을 `minmax(0, var(--measure))` 로 바꾸고, 넓은 블록(표·코드·밴드)만 `wide`/`full` 로 내보낸다.
+
+---
+
+# 1단계 — 레퍼런스 조사 (아래 §2~§11)
+
+---
+
+## 2. 정본 도메인 확인
+
+세 도메인을 리다이렉트 체인과 응답 본문으로 비교했다.
+
+| 도메인 | 최종 URL | 상태 | 본문 크기 | 판정 |
+|---|---|---|---|---|
+| `tasteskill.com` | `tasteskill.com/` | 200 | **114 bytes** | **도메인 파킹** |
+| `design-taste.com` | `design-taste.com/` | 200 | **114 bytes** | **도메인 파킹** |
+| `tasteskill.dev` | `www.tasteskill.dev/` (308) | 200 | **253,145 bytes** | **정본** |
+
+`tasteskill.com` 과 `design-taste.com` 은 **본문이 바이트 단위까지 동일**하다:
+
+```html
+<!DOCTYPE html><html><head><script>window.onload=function(){window.location.href="/lander"}</script></head></html>
+```
+
+`/lander` 로 보내는 JS 리다이렉트 한 줄뿐이다. 전형적인 파킹 도메인 랜더 패턴이며 콘텐츠가 없다.
+**"HTTP 200" 은 살아있다는 뜻이 아니었다.** 상태 코드만 보고 판단했으면 엉뚱한 사이트를 참고할 뻔했다.
+
+**정본: `https://www.tasteskill.dev/`** (Vercel 호스팅)
+
+### 소유권 확인 근거
+
+로컬 `design-taste-frontend/SKILL.md` 에는 어느 도메인도 적혀 있지 않아 파일만으로는 확정할 수 없다. 사이트 쪽에서 확인했다.
+
+- 사이트의 설치 명령: `npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"`
+  → **로컬 스킬의 `name:` 값(`design-taste-frontend`)을 정확히 지정한다.** 이게 결정적 근거다.
+- 저장소: `github.com/Leonxlnx/taste-skill` (내비에 스타 78,216 노출)
+- 후원 링크: `github.com/sponsors/Leonxlnx` — 동일 소유자
+- 로컬 SKILL.md 본문 제목 `# tasteskill: Anti-Slop Frontend Skill` 과 사이트 제목 `Taste Skill | The Anti-Slop Frontend Framework for AI Agents` 일치
+
+---
+
+## 3. R1 · 구조 — Taste Skill — https://www.tasteskill.dev/
+
+**업종**: AI 에이전트용 프론트엔드 스킬 — **우리와 같은 문제를 이미 푼 사이트**
+**가져올 축**: 히어로 구조, 여백 리듬, 시선 흐름
+
+### 6축 실측 (viewport 1814×851, scrollHeight 8865px)
+
+| 축 | 관측값 | 가져갈 것 |
+|---|---|---|
+| **그리드** | 컨테이너 1216px / 1280px · 텍스트 컬럼 512–612px · 풀블리드 1810px | 텍스트 컬럼 **512px** (본문 16px 기준 영문 약 62자) |
+| **타입스케일** | 14(38회) / 12(21) / 11(19) / 15(17) / 10(16) / 12.5(13) / 16(12) / 9(8) / 72(6) / 128(5) / 18(4) / 60(4) → **12단계 이상**. 최대÷본문 = 128÷16 = 8배. h1 72px, lh 68.4px(0.95), ls −1.8px(−0.025em), weight 600. 패밀리 **3개** — Manrope(104) + IBM Plex Mono(62) + Playfair Display(7) | h1 lh 0.95 / ls −0.025em 만. **단계 수와 패밀리 수는 안 가져감** |
+| **컬러 역할** | 그라운드 **`#F5F4F2` 웜 오프화이트** (블록 6개, 합계 약 7,700px) · 히어로 밴드 **`#0E1011`** · 강조 **`#FF6B00` 오렌지**(배경 3회) / `#CC5400`(텍스트 4회) · 텍스트 4단계 `#0A0A0A`→lab27(≈#3C3C3C)→lab34.9(≈#4F4F4F)→lab66(≈#9E9E9E) | **오프화이트 그라운드 + 다크 밴드 리듬**, 텍스트 4단계, 강조 면적 극소 |
+| **여백 리듬** | 섹션 패딩 `64/64`, `80/80`, `96/96`, `112/112` → **4단계 리듬** | 그대로 채택 |
+| **모션 언어** | transition-duration 0.5s(92회) / 0.3s(65) / 0.6s(42) / 0.7s(10) / 0.2s(10) / 0.15s(2) / 1s(2). **0.5s가 최다** | 안 가져감 (§5 R3에서 대체) |
+| **시선 흐름** | h1 "Taste Skill"(72px, top 260) → 설명 1문단 → **설치 명령 + COPY 버튼(top 575)** → 보조 링크 2개(top 643) → 스폰서 | **설치 명령을 첫 화면 안에** 두는 배치 |
+
+### 6축 밖의 관측 — 카피 규율 (이 사이트의 진짜 성취)
+
+전체 본문을 정규식으로 훑은 결과다.
+
+| 검사 | 결과 |
+|---|---|
+| 자기 평가 형용사 (`world-class`, `cutting-edge`, `powerful`, `stunning`, `seamless` …) | **0건** |
+| 슬롭 동사 (`streamline`, `empower`, `supercharge`, `unlock`, `leverage`, `elevate`) | **0건** |
+| `It's not X, it's Y` 구문 | **0건** |
+| em-dash | **0개** |
+| 근거 없는 지표 배너 (`10,000+`, `99.9%` 류) | **0건** |
+
+- h1이 **제품명 하나(`Taste Skill`)**다. 헤드라인 문장으로 허세 부리지 않는다.
+- h2가 전부 **짧은 평서문 + 마침표**: `Works with every agent.` `Current skills.` `What is new in v2.` `Projects built with Taste Skill.`
+- 지표를 쓰되 **검증 가능한 외부 지표**만 쓴다 — 내비의 GitHub 스타 `78,216`. 자기가 만든 숫자가 아니다.
+- `Projects built with Taste Skill` 섹션에 실사용 사례(Floria, Collective OS)를 붙인다.
+
+**이 사이트는 안티슬롭을 "언어의 문제"로 풀었다.** 카피 레이어는 거의 완벽하다.
+
+### 문제 — 형태 레이어는 풀지 않았다
+
+같은 실측에서 나온 값들이다.
+
+| 항목 | 관측값 | 걸리는 규칙 |
+|---|---|---|
+| border-radius 어휘 | **8종** — 16px(65회) / pill(42) / 18px(20) / 8px(13) / 12px(4) / 6px(2) / 24px(1) / 4px(1). **최다값이 16px** | D-01·D-02 (shadcn 기본값 영역) |
+| `backdrop-filter` 적용 요소 | **40개** | D-05 글래스모피즘 전면 사용 — 실기기 FPS 15–30% 하락 |
+| 그라디언트 요소 | 25개 | A-02 인접 |
+| 폰트 크기 단계 | **12단계 이상**, 그중 9–11px 텍스트가 **43회** | B-06 통제 실패 / H-13 경계 |
+| 폰트 패밀리 | 3개. Playfair Display는 **7회만** 쓰임 | B-04 (2개 표준) |
+| transition 최빈값 | **0.5s** (92회) | E-04 — 마이크로 인터랙션에 500ms는 느리다 |
+| 스폰서·후원 영역 | top 931–2649 + 8091–8865 ≈ **2,490px / 8,865px = 28%** | D-09 로고월과 동형 |
+| 클릭 가능 요소 | **77개** (대부분 스폰서·후원자 링크) | 주의 분산 |
+| 장식 번호 | `01 Codex` `02 Claude Code` `03 Cursor` `04 OpenCode` | B-09 |
+
+**결론: 카피에서는 이겼고 형태에서는 기본값에 졌다.** 이 간극이 designpaca의 자리다.
+
+**변형**: 폰트 크기를 **5단계**로 줄이고 하한을 **16px**로 올린다.
+이유: 한국어가 주 언어다. 9–11px 텍스트 43회는 한글에서 성립하지 않는다(B-14·H-13). 12단계는 통제 실패이며, 우리 페이지는 tasteskill보다 정보량이 적어 5단계로 충분하다.
+
+---
+
+## 4. R1 판정 — tasteskill.dev vs Bun
+
+사용자 지시가 우선순위 1위이고 도메인 동일성도 압도적이므로 **R1은 tasteskill.dev**다. 다만 축별로 어느 쪽이 우리 브리프에 맞는지는 갈린다.
+
+| 축 | Bun | tasteskill.dev | 채택 |
+|---|---|---|---|
+| 문제 동일성 | JS 런타임 | **안티슬롭 스킬 = 우리와 동일** | tasteskill |
+| 히어로 + 설치 배치 | h1 문장 + 설치 3회 노출 | h1 제품명 + 설치 복사버튼(첫 화면) | **tasteskill** |
+| 여백 리듬 | 112–128px 2단계 | **64/80/96/112 4단계** | tasteskill |
+| 타입 통제 | 6단계 | 12+단계 | **Bun 방식** (단계 수만) |
+| radius 통제 | 3종 | 8종 | **Bun 방식** (어휘 수만) |
+| 카피 규율 | 좋음 (숫자에 조건 명시) | **완벽 (자기 평가 0)** | tasteskill |
+| 증거 제시 | 벤치마크 + 측정 조건 | GitHub 스타 + 사용 사례 | **Bun 방식** |
+| 성능 | 글래스 0 | 글래스 40 | **Bun 방식** |
+
+**"참고하라"는 지시는 "베끼라"가 아니다.** 구조·여백·카피 규율은 tasteskill에서 가져오고,
+**타입 단계 수·radius 어휘 수·글래스 사용은 명백히 나쁘므로 가져오지 않는다.**
+Bun은 R1에서 내려 §10 부록에 남기고, 위 표의 "Bun 방식" 항목은 R1의 **변형 근거**로만 쓴다 (한 축은 한 소스에서만 — `reference-method.md` §1-4).
+
+---
+
+## 5. R2 · 톤 — Klim Type Foundry — https://klim.co.nz/blog/soehne-design-information/
+
+**유지한다.** 재검토 결과 오히려 근거가 강해졌다.
+
+**업종**: 타입 파운드리 — R1(AI 개발 도구)과 다름 ✓
+**가져올 축**: 컬러 역할, 형태 언어
+
+| 축 | 관측값 | 가져갈 것 |
+|---|---|---|
+| **타입스케일** | 14 / 16 / 22 / 36 / 100 → **5단계**. 최대÷본문 6.25배. h1 100px, lh 98px(0.98), ls −2px(−0.02em), w700. **Söhne(그로테스크) + Martina Plantijn(세리프)** 2패밀리 | **5단계 + 2패밀리** — tasteskill의 12단계/3패밀리를 교정하는 값 |
+| **컬러 역할** | 흰 `#FFFFFF`(41회) ↔ 검정 `#000000`(11회)·`#1C1C1C` 교대 / 텍스트 회색 4단계 / 강조 `#E1162B` 빨강 **5회만** | 강조 면적 극소 |
+| **형태 언어** | **border-radius `2px` 단 하나** (122회) | **radius 어휘 1개** — tasteskill의 8종을 교정하는 값 |
+| **시선 흐름** | h1 100px → 세리프 리드 36px → 본문 16px | 채택 |
+
+**유지 근거**: tasteskill의 약점 3개(radius 8종, 타입 12단계, 글래스 40개)에 대해 Klim이 **정확한 반대값**을 갖고 있다 — radius 1종, 타입 5단계, 글래스 0.
+R2를 바꾸면 이 교정축을 잃는다.
+
+**6축 밖의 관측**: 홈에 h1이 없다. 로고와 견본으로 시작한다. 블로그 66편 대부분이 `Söhne design information` 같은 **설계 근거 문서**다. 제품 설명이 아니라 **왜 이렇게 만들었는지의 기록**으로 판다. 자기 평가 형용사가 없다.
+
+**변형**: 본문 링크에 **밑줄을 되살린다**.
+이유: 회색 색상차만으로 링크를 구분하는 건 색 단독 구분이라 접근성 문제이고, 개발자 대상 문서에서 식별이 약하다. D-15가 요구하는 호버 설계와도 맞물린다.
+
+### 폰트 결정 (무료 대체)
+
+| 원본 | 대체 | 출처 |
+|---|---|---|
+| Söhne (그로테스크) | **Switzer** | Fontshare, 무료 상업 |
+| Martina Plantijn (세리프) | **Spectral** | Google Fonts |
+| 코드·설치 명령 | **JetBrains Mono** | 기능 한정 |
+| 한글 UI | **Pretendard** | SIL OFL |
+| 한글 세리프 본문 | **마루 부리** | SIL OFL |
+
+표현 패밀리 2개 + 기능 패밀리 1개(코드 한정). B-04·B-15 준수.
+tasteskill의 Manrope / Playfair Display는 **가져오지 않는다** — Playfair는 가장 흔한 구글폰트 세리프다.
+
+---
+
+## 6. R3 · 디테일 — scroll-driven wipe
+
+> **3단계에서 교정됨.** 아래 `clip-path` 방식은 SKILL.md 하드 게이트 #8(`transform`/`opacity` 외 애니메이션 금지)에 걸린다.
+> 최종 구현은 **덮개 요소를 `transform: translateX()` 로 미는 방식**이다 → **§J-0** 참조. 시각 효과는 동일하다.
+> 아래는 1단계 조사 기록으로 보존한다.
+
+**유지한다.** tasteskill 실측이 변형 근거를 강화했다.
+
+**출처**: Codrops `clip-path` 레퍼런스 + CSS scroll-driven animation 사양
+**가져올 축**: 모션 언어 (R3는 이 축만)
+
+| 항목 | 값 |
+|---|---|
+| 기법 | `animation-timeline: view()` + `clip-path: inset()` 키프레임 |
+| 키프레임 | `inset(0% 60% 0% 0%)` → `inset(0% 0% 0% 0%)` |
+| JS 비용 | **0KB** — 컴포지터 스레드 |
+| 지원 | Chrome/Edge 115+, Firefox 132+, Safari 18+. 전역 약 84% (2026 중반) |
+| 점진적 향상 | `@supports (animation-timeline: scroll())` |
+| **보간 제약** | 초기·최종이 **같은 도형 함수 + 같은 점 개수**여야 한다. `inset()`→`inset()` 가능, `polygon()`↔`inset()` 불가 |
+
+**변형**: `animation-range` 를 **`entry 10% entry 55%`** 로 단축하고 duration 계열을 **200–320ms** 대역으로 고정.
+이유: tasteskill의 transition 최빈값이 **0.5s(92회)**인데, 이 정도면 마이크로 인터랙션에서 굼뜨게 느껴진다(E-04). 우리는 그 절반 이하로 간다. 범위도 짧게 끝내 "계속 뭔가 움직이는" 인상을 피한다.
+
+**추가 제약**: `prefers-reduced-motion: reduce` 에서 `clip-path: inset(0)` 고정 (E-06).
+**글래스모피즘 0개** — tasteskill의 `backdrop-filter` 40개를 그대로 따라가면 성능 예산(첫 인터랙션 3초)이 깨진다.
+
+---
+
+## 7. 회색조 위계
+
+색을 전부 제거했을 때 가장 강한 덩어리는 **h1(제품명)**, 두 번째는 **설치 명령 블록**, 세 번째는 **검사 결과 표**.
+
+비즈니스 우선순위 [1 `npx designpaca` 실행 / 2 신뢰 획득 / 3 규칙 열람]와 **일치한다** —
+tasteskill이 설치 명령을 첫 화면(top 575) 안에 둔 배치를 채택했기 때문이다.
+
+---
+
+## 8. 안 할 것
+
+### antipatterns.md 항목
+
+| ID | 항목 | 이 페이지에서 왜 특히 위험한가 |
+|---|---|---|
+| **C-07 / B-09** | 번호 1·2·3 단계 | 파이프라인이 실제로 6단계라 가장 걸리기 쉽다. tasteskill도 `01 Codex 02 Claude Code`로 걸려 있다. **검출률 9.4%** |
+| **C-08** | 근거 없는 지표 | "101개 규칙 / 250개 검증 URL"을 조건 없이 나열하면 걸린다 |
+| **D-01·D-02** | radius 16px 기본값 | **tasteskill의 최다 radius가 정확히 16px다.** 참고하다 그대로 옮겨붙기 가장 쉬운 값 |
+| **D-05** | 글래스모피즘 | tasteskill이 40개 요소에 쓴다. 따라가면 성능 예산이 깨진다 |
+| **B-06 / H-13** | 타입 12단계, 9–11px | tasteskill의 43회. 한글에서는 성립 불가 |
+| **B-04** | 3번째 패밀리 | tasteskill의 Playfair Display 7회. 어정쩡한 액센트 폰트 |
+| **D-06** | 이모지 아이콘 | 개발자 README 관습이 넘어오기 쉽다 |
+| **B-14** | 한글 폰트 미지정 | 한국어 우선 페이지의 즉시 실패 조건 |
+
+### tasteskill 고유 — 따라 하면 아류가 되는 지점
+
+| 항목 | 왜 우리는 안 하나 |
+|---|---|
+| **스폰서·후원자 벽 (페이지의 28%)** | 우리는 스폰서가 없다. 있어도 이건 제품 설명이 아니라 자금 조달 장치다. 로고월(D-09)과 같은 문제를 갖는다 |
+| **GitHub 스타를 최상단 지표로** | 스타 78,216은 tasteskill의 자산이지 우리 것이 아니다. 숫자 0인 상태로 같은 자리에 두면 역효과다. **인기 대신 규율을 증거로 써야 한다** |
+| **클릭 요소 77개** | 설치라는 단일 목표를 흐린다 |
+| **h1 = 제품명 하나** | 이건 이름이 이미 알려진 제품의 특권이다. 무명 제품이 따라 하면 그냥 정보가 없는 히어로가 된다 |
+| **"Anti-Slop" 이라는 명명 자체** | 같은 단어를 쓰면 즉시 아류로 읽힌다. 다른 언어로 같은 것을 말해야 한다 |
+
+---
+
+## 9. 컨셉 후보 (→ 2단계 §A에서 셋 다 통합됨)
+
+> 사용자가 셋 중 고르는 대신 **전부 채택**했다. 아래는 통합 전 원본이며, 각 컨셉이 어느 섹션에서 살아나는지는 **2단계 §G**를 보라.
+
+기존 A(설계 근거)·B(증거 먼저)는 tasteskill이 **이미 부분적으로 실행한 영역**이라 그대로 두면 아류가 된다. 재구성했다.
+기존 C(같은 마크업 대조)는 여전히 유효하지만 단독 컨셉으로는 위험이 커서 §9-1의 한 섹션으로 흡수한다.
+
+### 컨셉 1 — 형태까지 간다
+> **"카피만 고쳐서는 슬롭이 안 없어진다. radius 8종, 글래스 40개, 폰트 12단계가 남는다."**
+
+tasteskill이 언어 레이어에서 푼 문제를 **형태 레이어까지** 밀고 간다.
+페이지 자체가 증거다 — radius 어휘 2종, 글래스 0, 타입 5단계, 폰트 2패밀리.
+
+- **프리셋**: `editorial`
+- **tasteskill과 같은 것**: 설치 명령을 첫 화면 안에 복사 버튼과 함께 / h2는 짧은 평서문 + 마침표 / 자기 평가 형용사 0 / 오프화이트 그라운드 + 다크 밴드 리듬
+- **tasteskill과 다른 것**: 형태 레이어를 제품의 주장으로 삼는다. tasteskill은 형태를 말하지 않는다 — radius도 글래스도 타입 단계도 다루지 않는다. 우리는 **그 값들을 페이지에 숫자로 노출**한다
+- **리스크**: 경쟁 제품의 약점을 지목하는 구조라 **저격으로 읽힐 수 있다.** 오픈소스 커뮤니티에서 반발을 산다. 대상을 명시하지 않고 "일반적인 안티슬롭 도구"로 추상화해야 하는데, 그러면 주장이 흐려진다. 이 균형이 이 컨셉의 전부다
+
+### 컨셉 2 — 한국어로 푼다
+> **"한글은 같은 px에서 더 작다. word-break 없이는 단어가 아무 데서나 잘린다. 이걸 아는 스킬이 없다."**
+
+tasteskill을 포함해 기존 안티슬롭 도구는 전부 영어권이다. 한글 조판 규칙은 어디에도 없다.
+9–11px 텍스트 43회는 라틴에서는 라벨이지만 **한글에서는 읽을 수 없다.** 이 사실 하나가 존재 이유가 된다.
+
+- **프리셋**: `swiss-minimal`
+- **tasteskill과 같은 것**: npx 한 줄 설치 / 에이전트 호환 목록 / 증거 중심 카피
+- **tasteskill과 다른 것**: 대상 언어가 다르다. 경쟁이 아니라 **공백**이다. tasteskill을 깎을 필요 없이 "그 위에 얹는 것"으로 포지셔닝할 수 있다
+- **리스크**: 시장이 작다. "한국어 전용"으로 좁혀 보이면 영어권 사용자를 잃는다. **영어 병기가 필수인데, 한국어 우선 페이지에서 영어를 병기하면 타이포 위계가 두 배로 복잡해진다** — 브리프의 "영어 병기 검토"가 여기서 결정 사항이 된다
+
+### 컨셉 3 — 파이프라인을 판다
+> **"designpaca는 규칙 목록이 아니다. 0단계부터 5단계까지 순서다."**
+
+tasteskill은 **규칙 파일**을 판다. designpaca는 **절차**를 판다 — 브리프 게이트 → 레퍼런스 조사 → 방향 결정 → 토큰 → 구현 → 프리플라이트.
+이 페이지가 그 절차를 실제로 거쳐 만들어졌다는 기록을 함께 싣는다 (이 문서가 그 1단계 산출물이다).
+
+- **프리셋**: `anti-grid`
+- **tasteskill과 같은 것**: 오픈소스 / npx 설치 / 에이전트 대상
+- **tasteskill과 다른 것**: 파는 물건의 종류가 다르다. 규칙은 정적이고 절차는 시간축이 있다. 페이지 구조가 **선형 진행**을 갖는다는 점에서 레이아웃부터 갈린다
+- **리스크**: 6단계를 시각화하려는 순간 **C-07(번호 매긴 1·2·3 섹션, 검출률 9.4%)에 정면으로 걸린다.** 이 컨셉은 자기 금지 목록과 가장 크게 충돌한다. 번호 없이 순서를 표현하는 방법을 먼저 찾지 못하면 착수하면 안 된다
+
+### 추천
+
+**컨셉 2를 뼈대로, 컨셉 1을 근거로 얹는 조합.**
+컨셉 2는 tasteskill과 경쟁하지 않고 공백을 메우므로 저격 리스크가 없다. 컨셉 1의 형태 레이어 주장은 "왜 한글 조판만이 아니라 전반이 다른가"의 답으로 자연스럽게 들어간다.
+컨셉 3은 C-07 문제를 푼 뒤에 재검토한다.
+
+---
+
+## 10. 부록 — 기존 조사 (R1 = Bun, 2026-08-20 1차)
+
+R1에서 내렸지만 §4의 판정 근거이므로 수치를 보존한다.
+
+### Bun — https://bun.sh/ 6축 실측 (viewport 1814×851)
+
+| 축 | 관측값 |
+|---|---|
+| 그리드 | 컨테이너 1136px (뷰포트의 63%) / 텍스트 컬럼 750–798px / 벤치마크 블록 1216px |
+| 타입스케일 | 13.5 / 14 / 15 / 16 / 68 / 76 → **6단계**. 최대÷본문 5.0배. h1 68px, lh 62.56px(0.92), ls −1.36px(−0.02em), w800. 패밀리 2개 (Archivo + Martian Mono) |
+| 컬러 역할 | 배경 `#0D0A0C` / 표면 `rgba(234,234,232,.06)` / 텍스트 3단계 `#EAEAE8`·`#A8A8A5`·`#80807E` / 강조 `#FF2E97` 마젠타 |
+| 여백 리듬 | 섹션 패딩 `112/112`, `64/112`, `0/128` |
+| 모션 언어 | 미관측 |
+| 시선 흐름 | h1 → 설치 명령 → 벤치마크. 설치 명령 **3회** 노출 |
+| radius | **3종** — 9999px(116회) / 3px(68) / 4px(19) |
+
+**6축 밖의 관측**: h2가 전부 시나리오 문장(`Bundling 10 copies of three.js`, `Try it on the repo you have open right now.`). 모든 숫자에 비교 대상과 조건이 붙는다(269ms vs 495ms vs 572ms / `171,127 lines / 2,104 files`).
+
+**이 조사가 만든 결론**: 다크 배경인데도 슬롭 항목을 거의 전부 회피한다 → **"다크가 슬롭이 아니라 기본값이 슬롭이다."** 이 문장은 `antipatterns.md` §1 도입부에 반영됐다.
+
+### 폐기한 컨셉 A / B / C
+
+| 컨셉 | 폐기 사유 |
+|---|---|
+| A. 설계 근거를 파는 페이지 | tasteskill이 이미 카피 규율로 부분 실행. 그대로 가면 아류 → 컨셉 1로 재구성 |
+| B. 증거 먼저 | tasteskill의 GitHub 스타 + 사용 사례가 같은 자리. 우리는 숫자 0이라 역효과 → 컨셉 1의 "형태 수치 노출"로 대체 |
+| C. 같은 마크업, 다른 판단 | 단독 컨셉으로는 before를 잘 만들면 설득 실패 / 못 만들면 스트로맨. 컨셉 1의 한 섹션으로 흡수 |
+
+---
+
+## 11. `reference-method.md` 실사용 피드백 (2차)
+
+1차에서 고친 4건(경로 C 승격 / 6축 밖의 관측 / slug 추측 금지 / R3 예외)은 이번 실행에서 **전부 실제로 쓰였다.**
+특히 "경로 C를 안 거치면 4축이 빈칸"이 다시 확인됐다 — radius 8종, 글래스 40개, 폰트 12단계는 WebFetch로는 절대 안 나온다. 이 세 값이 이번 판정의 핵심 근거였다.
+
+**이번에 발견한 새 결함 1건**
+
+| 문제 | 조치 |
+|---|---|
+| **§3 절차가 "원본 사이트 URL을 확보한다"까지만 규정하고, 그 URL이 진짜 정본인지 검증하는 단계가 없다.** `tasteskill.com`은 HTTP 200이지만 114바이트 파킹 페이지였다. 상태 코드만 보고 갔으면 조사 전체가 어긋났다 | **수정함** — §3에 정본 검증 단계 추가 |
+
+> 근거: research/references/02-methodology.md, 04-ai-slop-signatures.md (조사일 2026-08-20)
+> 실측: www.tasteskill.dev, klim.co.nz, bun.sh computed style 추출 (2026-08-20)
diff --git a/research/skills/01-local-skill-teardown.md b/research/skills/01-local-skill-teardown.md
new file mode 100644
index 0000000..0c03124
--- /dev/null
+++ b/research/skills/01-local-skill-teardown.md
@@ -0,0 +1,750 @@
+# 01. 로컬 설치 스킬 전수 해부
+
+작성일: 2026-08-20
+조사 방법: 각 `SKILL.md` 파일을 실제로 읽고 분석. 빌트인 스킬은 Skill 도구로 로드해 본문을 직접 확인.
+원문 인용은 모두 `>` 또는 따옴표로 표기하고 출처 경로를 병기한다.
+
+---
+
+## 0. 조사 범위와 확인 결과
+
+### 실제로 읽은 파일
+
+| 스킬 | 경로 | 바이트 | 줄 수 |
+|---|---|---|---|
+| design-taste-frontend | `C:\Users\encep\.agents\skills\design-taste-frontend\SKILL.md` | 88,459 | 1,206 |
+| design-taste-frontend-v1 | `C:\Users\encep\.agents\skills\design-taste-frontend-v1\SKILL.md` | 21,421 | 226 |
+| high-end-visual-design | `C:\Users\encep\.agents\skills\high-end-visual-design\SKILL.md` | 10,659 | - |
+| minimalist-ui | `C:\Users\encep\.agents\skills\minimalist-ui\SKILL.md` | 7,986 | - |
+| industrial-brutalist-ui | `C:\Users\encep\.agents\skills\industrial-brutalist-ui\SKILL.md` | 8,548 | - |
+| gpt-taste | `C:\Users\encep\.agents\skills\gpt-taste\SKILL.md` | 7,931 | - |
+| imagegen-frontend-web | `C:\Users\encep\.agents\skills\imagegen-frontend-web\SKILL.md` | 37,841 | 987 |
+| imagegen-frontend-mobile | `C:\Users\encep\.agents\skills\imagegen-frontend-mobile\SKILL.md` | 41,791 | 1,465 |
+| image-to-code | `C:\Users\encep\.agents\skills\image-to-code\SKILL.md` | 37,670 | 1,228 |
+| redesign-existing-projects | `C:\Users\encep\.agents\skills\redesign-existing-projects\SKILL.md` | 15,238 | - |
+| stitch-design-taste | `C:\Users\encep\.agents\skills\stitch-design-taste\SKILL.md` (+ `DESIGN.md` 12,174) | 12,035 | - |
+| brandkit | `C:\Users\encep\.agents\skills\brandkit\SKILL.md` | 16,790 | 798 |
+| full-output-enforcement | `C:\Users\encep\.agents\skills\full-output-enforcement\SKILL.md` | 2,641 | - |
+| graphify | `C:\Users\encep\.claude\skills\graphify\SKILL.md` | 51,297 | 1,242 |
+| frontend-design (공식) | `C:\Users\encep\.claude\plugins\marketplaces\anthropic-agent-skills\skills\frontend-design\SKILL.md` | - | - |
+| skill-creator (공식) | `...\anthropic-agent-skills\skills\skill-creator\SKILL.md` | - | 486 |
+| artifact-design (빌트인) | 파일 없음. Skill 도구로 본문 로드해 확인 | - | - |
+| dataviz (빌트인) | SKILL.md 파일 없음. `references/`·`scripts/`만 디스크에 추출됨 | - | - |
+
+### 확인 못한 것
+
+- **`artifact-design` / `dataviz` / `artifact-diagramming` / `artifact-capabilities`의 SKILL.md 원본 파일**: Claude Code 바이너리에 임베드되어 있어 파일시스템에서 찾지 못했다. `find`로 전 사용자 디렉터리를 훑었으나 없음. 다만 **Skill 도구로 호출하면 본문이 컨텍스트에 로드되므로 내용은 직접 읽었다.** dataviz는 `C:\Users\encep\AppData\Local\Temp\claude\bundled-skills\2.1.235\a44f7fbb33676b5b8599b1fc53d4b74e\dataviz\` 아래에 `references/*.md` 7개와 `scripts/validate_palette.{js,py}`가 실제로 추출되어 있다.
+- **`.agents/skills` 전체에서 `references/` 서브디렉터리를 가진 디자인 스킬은 0개.** 유일하게 `object-separation`(디자인 스킬 아님)만 `references/model-notes.md`를 가진다. 즉 **로컬에 설치된 커뮤니티 디자인 스킬은 전부 단일 파일 SKILL.md 구조**다. 이는 뒤에서 다룰 핵심 발견이다.
+
+---
+
+## 1. 프론트매터 구조 비교표
+
+| 스킬 | `name` | `description` | 그 외 필드 | 설명 길이(문자) |
+|---|---|---|---|---|
+| design-taste-frontend | O | O | 없음 | 약 230 |
+| design-taste-frontend-v1 | O | O | 없음 | 약 210 |
+| high-end-visual-design | O | O | 없음 | 약 175 |
+| minimalist-ui | O | O | 없음 | 약 125 |
+| industrial-brutalist-ui | O | O | 없음 | 약 250 |
+| gpt-taste | O | O | 없음 | 약 300 |
+| imagegen-frontend-web | O | O | 없음 | 약 620 |
+| imagegen-frontend-mobile | O | O | 없음 | 약 610 |
+| image-to-code | O | O | 없음 | 약 500 |
+| redesign-existing-projects | O | O | 없음 | 약 190 |
+| stitch-design-taste | O | O | 없음 | 약 195 |
+| brandkit | O | O | 없음 | 약 440 |
+| full-output-enforcement | O | O | 없음 | 약 190 |
+| graphify | O | O | **`trigger: /graphify`** | 약 200 |
+| codex-image | O | O (한국어) | 없음 | 약 350 |
+| frontend-design (공식) | O | O | **`license: Complete terms in LICENSE.txt`** | 약 175 |
+| skill-creator (공식) | O | O | 없음 | 약 240 |
+| canvas-design (공식) | O | O | `license` | 약 230 |
+| algorithmic-art (공식) | O | O | `license` | 약 260 |
+| web-artifacts-builder (공식) | O | O | `license` | 약 240 |
+| discernment-nudge (공식) | O | O (YAML 블록 스칼라 `>`) | `license` | 매우 김 |
+
+### 발견 1: 프론트매터는 사실상 `name` + `description` 2개뿐
+
+**13개 커뮤니티 디자인 스킬 전부 `name`과 `description`만 쓴다.** `allowed-tools`, `disable-model-invocation`, `paths`, `metadata`, `context: fork` 같은 Claude Code 확장 필드를 쓰는 디자인 스킬은 한 개도 없었다. 이유는 명확하다. 이 스킬들은 Claude Code 전용이 아니라 Codex·Cursor 등에서도 돌아가야 하는 "휴대용" 스킬이고, Agent Skills 오픈 스펙이 허용하는 필드는 6개(`name`, `description`, `license`, `compatibility`, `metadata`, `allowed-tools`)뿐이기 때문이다.
+
+### 발견 2: `trigger:` 는 스펙에 없는 필드다
+
+`graphify`의 프론트매터:
+
+```yaml
+---
+name: graphify
+description: "any input (code, docs, papers, images, videos) to knowledge graph. Use when user asks any question about a codebase, documents, or project content - especially if graphify-out/ exists, treat the question as a /graphify query."
+trigger: /graphify
+---
+```
+출처: `C:\Users\encep\.claude\skills\graphify\SKILL.md`
+
+`trigger`는 Agent Skills 스펙에도 Claude Code 프론트매터 레퍼런스에도 없다. Claude Code는 알 수 없는 키를 무시하지만, **claude.ai 업로드나 `package_skill.py` 패키징 시에는 하드 에러**가 난다. designpaca에서 절대 흉내내면 안 되는 패턴이다. (03-format-specs.md 참조)
+
+### 발견 3: 디렉터리명이 곧 커맨드명
+
+`.claude/skills/graphify/`에 있으면 `/graphify`, `.agents/skills/design-taste-frontend/`에 있으면 그 이름이 커맨드가 된다. 프론트매터 `name`은 개인/프로젝트 스킬에서는 **표시 라벨일 뿐이고 커맨드명을 바꾸지 못한다.** 플러그인 스킬에서만 `name`이 커맨드의 마지막 세그먼트를 결정한다.
+
+---
+
+## 2. description 작성 기법 분류
+
+로컬 스킬들의 description을 4가지 패턴으로 분류할 수 있다.
+
+### 패턴 A: 도메인 선언형 (짧음, 트리거 정확도 낮음)
+
+> `description: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.`
+> — minimalist-ui
+
+"무엇을 하는가"만 있고 "언제 쓰는가"가 없다. 사용자가 "미니멀한 랜딩 만들어줘"라고 해도 트리거될지 불확실하다. **Anthropic 공식 베스트 프랙티스가 명시적으로 지적하는 실패 유형이다.**
+
+### 패턴 B: 용도 명시형 (권장)
+
+> `description: Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.`
+> — design-taste-frontend
+
+"landing pages, portfolios, and redesigns"라는 **구체적 용도 키워드**가 앞쪽에 있다. 이것이 매칭의 핵심이다.
+
+### 패턴 C: 배제 조건 포함형 (가장 정교함)
+
+> `description: ... Codex CLI 내장 image_gen 도구(gpt-image-2 = "imagegen2")를 ChatGPT 구독 인증으로 호출하며 OpenAI API 키가 필요 없다. **벡터/SVG/코드 네이티브 아이콘이나 로고 시스템 확장에는 쓰지 않는다.**`
+> — codex-image (강조는 필자)
+
+**"이럴 땐 쓰지 마라"를 description에 적는다.** 과잉 트리거를 막는 유일하게 검증된 방법. `refactor-governance`도 같은 기법을 쓴다:
+
+> `Read-only lookup, investigation, explanation, or answering questions about the code is NOT a trigger — the gated workflow applies only when a file will be changed.`
+
+### 패턴 D: 리터럴 발화 나열형 (한국어 스킬에서 특히 효과적)
+
+> `"이미지 생성해", "이미지 만들어", "일러스트 만들어", "그림 그려줘", "이미지를 생성", "generate an image", "create an illustration", "Codex로 이미지 만들어" 같은 요청에 자동으로 트리거.`
+> — codex-image
+
+**사용자가 실제로 타이핑할 문장을 그대로 박아넣는다.** 다국어 환경에서 특히 중요하다. designpaca가 한국어 사용자용이라면 이 기법은 필수다.
+
+### 패턴 E: description 안에 규칙을 넣는 반칙형
+
+> `description: ... CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. ...`
+> — imagegen-frontend-web (약 620자)
+
+description에 **본문 규칙을 밀어넣는다.** 이유: description은 항상 컨텍스트에 있으므로 본문이 로드되기 전에도 모델이 그 규칙을 본다. 하지만 대가가 크다.
+- Claude Code는 `description` + `when_to_use` 합쳐 **1,536자에서 잘라낸다.**
+- 스킬 목록 전체가 예산(기본 컨텍스트 윈도의 1%)을 넘으면 **설명이 더 짧게 잘린다.**
+- Agent Skills 스펙 상한은 1,024자.
+
+620자짜리 description은 스킬이 몇 개 없을 때만 안전하다. designpaca는 이 사용자의 환경(스킬 20개 이상)에서 돌아야 하므로 **200~350자 범위가 현실적 상한**이다.
+
+---
+
+## 3. 본문 분량·구조 비교표
+
+| 스킬 | 줄 수 | 섹션 수 | 구조 | 코드 예시 | references 분리 |
+|---|---|---|---|---|---|
+| design-taste-frontend | 1,206 | 15 + 부록 3 | 번호 섹션 + 표 + 체크리스트 + 부록 | 3개 캐노니컬 TSX 스켈레톤 | 없음 (부록으로 인라인) |
+| design-taste-frontend-v1 | 226 | 10 | 번호 섹션 | 없음 (클래스명만) | 없음 |
+| high-end-visual-design | ~200 | 8 | 번호 섹션 + 최종 체크리스트 | 없음 (Tailwind 클래스 인라인) | 없음 |
+| minimalist-ui | ~120 | 8 | 번호 섹션 | 없음 (hex/CSS 값 인라인) | 없음 |
+| industrial-brutalist-ui | ~130 | 8 | 번호 섹션 + 아키타입 분기 | CSS 스니펫 2개 | 없음 |
+| gpt-taste | ~110 | 8 | 번호 섹션 + `<design_plan>` 게이트 | JSX 한 줄 예시 | 없음 |
+| imagegen-frontend-web | 987 | 13+ | **HARD RULE 선두 배치** + 조합 엔진 | 없음 (이미지 스킬) | 없음 |
+| imagegen-frontend-mobile | 1,465 | 37 | 번호 규칙 나열 + 카테고리 바이어스 | 없음 | 없음 |
+| image-to-code | 1,228 | 38 | 번호 규칙 나열 + 예시 해석 | 없음 | 없음 |
+| redesign-existing-projects | ~180 | 감사 카테고리 8 + 업그레이드 4 | **"문제 → 고치는 법" 페어 나열** | 없음 | 없음 |
+| stitch-design-taste | ~300 | 9 + 출력 템플릿 | **메타 스킬** (DESIGN.md를 생성) | 출력 템플릿 마크다운 | `DESIGN.md` 동봉 |
+| brandkit | 798 | 20+ | 시각 모드 8종 + 프롬프트 템플릿 | 프롬프트 템플릿 | 없음 |
+| full-output-enforcement | ~60 | 5 | 금지 목록 + 프로세스 | 중단 마커 포맷 | 없음 |
+| frontend-design (공식) | ~40 | 6 | **산문(prose)** | 없음 | 없음 |
+| skill-creator (공식) | 486 | 20+ | 워크플로 + JSON 스키마 | JSON/bash | `references/schemas.md`, `agents/*.md`, `scripts/*.py` |
+| dataviz (빌트인) | ~80 | 5 | **인덱스 + 절차 7단계** | 없음 | `references/` 7개 + `scripts/` 2개 |
+
+### 발견 4: 커뮤니티 디자인 스킬은 전부 단일 파일, 공식 스킬만 분리
+
+Anthropic 공식 스킬(skill-creator, dataviz, canvas-design, algorithmic-art)은 `references/`, `scripts/`, `assets/`를 쓴다. 커뮤니티 디자인 스킬 13개는 **하나도 안 쓴다.** design-taste-frontend는 88KB 단일 파일이다.
+
+이게 왜 문제인가. Anthropic 공식 가이드는 이렇게 말한다:
+
+> "Keep SKILL.md body under 500 lines for optimal performance"
+> — Skill authoring best practices
+
+> "Note that the agent will load this entire file once it's decided to activate a skill. Consider splitting longer `SKILL.md` content into referenced files."
+> — Agent Skills Specification
+
+design-taste-frontend는 1,206줄. 발동되는 순간 **약 22,000토큰이 컨텍스트에 영구 상주한다.** Claude Code 문서:
+
+> "When you or Claude invoke a skill, the rendered `SKILL.md` content enters the conversation as a single message and stays there for the rest of the session."
+
+게다가 자동 컴팩션 시:
+
+> "Claude Code re-attaches the most recent invocation of each skill after the summary, keeping the first 5,000 tokens of each."
+
+즉 **88KB 스킬의 앞 5,000토큰만 살아남는다.** design-taste-frontend에서 5,000토큰이면 Section 0~4.2 정도까지다. **가장 중요한 Section 9 (AI TELLS)와 Section 14 (PRE-FLIGHT CHECK)는 컴팩션 후 사라진다.**
+
+이것이 designpaca 설계에서 가장 중요한 구조적 교훈이다.
+
+### 발견 5: 자기 자신의 구조를 명시하지만 구현은 없는 "계약" 섹션
+
+design-taste-frontend Section 12는 블록 라이브러리 스키마를 정의해놓고:
+
+> **Status:** schema defined here. Blocks will be added iteratively. Do not freelance new blocks without following this schema.
+
+그리고 파일 위치를 `skills/taste-skill/blocks/hero/asymmetric-split.md` 등으로 지정하는데, **실제로 그 디렉터리는 존재하지 않는다.** 존재하지 않는 파일을 가리키는 것은 모델을 혼란시킨다. 좋은 아이디어(progressive disclosure로 가는 길)를 절반만 실행한 사례다.
+
+---
+
+## 4. 프롬프트 기법 상세 비교
+
+### 4.1 금지 규칙 표현법
+
+세 가지 계보가 뚜렷하게 갈린다.
+
+#### 계보 A: 절대 금지형 (커뮤니티 디자인 스킬 대부분)
+
+> **NO em-dash (`—`) as a design element OR anywhere else.** ... **Em-dash (`—`) is COMPLETELY banned.** It is the LLM's signature stylistic crutch and it is the #1 visual Tell in production tests. **There is no "limited use" allowance, no "natural language frequency" allowance, no "in body copy is fine" allowance. None.**
+> ...
+> This rule is non-negotiable. **The agent has historically ignored em-dash limits when phrased as "use sparingly." The phrasing here is binary: zero em-dashes.**
+> — design-taste-frontend §9.G
+
+이 마지막 문장이 핵심이다. **저자는 "sparingly"라는 표현이 실패했음을 관찰하고 이진 규칙으로 바꿨다.** 그리고 그 이유를 스킬 안에 기록해뒀다. 이것이 이 문서 전체에서 가장 잘 쓰인 문장이다.
+
+#### 계보 B: 조건부 오버라이드형 (design-taste-frontend의 대부분 + 유일하게 v2에만 있음)
+
+> **THE LILA RULE:** The "AI Purple / Blue glow" aesthetic is **discouraged as a default**. ...
+> **Override:** if the brand or brief explicitly asks for purple / violet / lila, embrace it. But execute with intent: consistent palette, harmonised neutrals, restrained gradients. Not generic AI gradient slop.
+> — design-taste-frontend §4.2
+
+v1은 같은 규칙을 이렇게 썼다:
+
+> **THE LILA BAN:** The "AI Purple/Blue" aesthetic is **strictly BANNED**.
+> — design-taste-frontend-v1 §3 Rule 2
+
+**v1 → v2에서 "BAN"이 "discouraged as a default + Override"로 바뀌었다.** v2 문서 최상단이 이 철학을 선언한다:
+
+> Every rule below is **contextual**. None of it fires automatically. First read the brief, then pull only what fits.
+
+이것이 v1과 v2의 근본적 차이이며, designpaca가 채택해야 할 방향이다.
+
+#### 계보 C: 이유 설명형 (Anthropic 공식)
+
+> Try hard to explain the **why** behind everything you're asking the model to do. Today's LLMs are *smart*. ... **If you find yourself writing ALWAYS or NEVER in all caps, or using super rigid structures, that's a yellow flag** — if possible, reframe and explain the reasoning so that the model understands why the thing you're asking for is important. That's a more humane, powerful, and effective approach.
+> — skill-creator, "Improving the skill" §3
+
+**공식 가이드와 커뮤니티 디자인 스킬이 정면으로 충돌한다.** 이 긴장은 실재하며, designpaca는 입장을 정해야 한다. 필자의 판단은 05-recommendations.md에 정리했다.
+
+### 4.2 다이얼(Dial) 시스템
+
+design-taste-frontend / v1 / image-to-code / imagegen-* 가 모두 공유하는 발명품.
+
+```
+* **`DESIGN_VARIANCE: 8`** - 1 = Perfect Symmetry, 10 = Artsy Chaos
+* **`MOTION_INTENSITY: 6`** - 1 = Static, 10 = Cinematic / Physics
+* **`VISUAL_DENSITY: 4`** - 1 = Art Gallery / Airy, 10 = Cockpit / Packed Data
+```
+
+핵심 3요소:
+1. **레벨별 구체적 CSS 정의** (§7): `8-10 (Asymmetric): Masonry layouts, CSS Grid with fractional units (grid-template-columns: 2fr 1fr 1fr), massive empty zones (padding-left: 20vw)`
+2. **브리프 → 다이얼 매핑 표** (§1.A): "minimalist / clean / calm / editorial / Linear-style" → VARIANCE 5-6, MOTION 3-4, DENSITY 2-3
+3. **다이얼로 게이팅되는 규칙**: `Centered Hero sections are avoided when DESIGN_VARIANCE > 4`, `Use when MOTION_INTENSITY > 5`
+
+그리고 자기 일관성 검증 규칙:
+
+> **"Motion claimed, motion shown."** If `MOTION_INTENSITY > 4`, the page must actually move ... A static page that claims `MOTION_INTENSITY: 7` is broken. Conversely, if you cannot ship working motion in the available scope, drop the dial to 3 and ship a clean static page.
+
+또한 별칭 금지:
+
+> Cross-references throughout this document refer to these exact variable names - **never invent aliases like `LAYOUT_VARIANCE` or `ANIM_LEVEL`.**
+
+image-to-code는 다이얼을 9개로 늘렸다: `DESIGN_VARIANCE, VISUAL_DENSITY, ART_DIRECTION, IMPLEMENTATION_CLARITY, IMAGE_USAGE_PRIORITY, SPACING_GENEROSITY, ANALYSIS_PRECISION, IMAGE_GENERATION_EAGERNESS, UI_SIMPLICITY_DISCIPLINE`. 9개는 과하다. 3개가 인지 부하 대비 효과가 가장 좋다.
+
+### 4.3 게이트(Gate) 패턴
+
+출력 전에 반드시 통과해야 하는 관문.
+
+**gpt-taste — `<design_plan>` 강제 출력:**
+
+> ## 8. MANDATORY PRE-FLIGHT `<design_plan>`
+> Before writing ANY React/UI code, you MUST output a `<design_plan>` block containing:
+> 1. **Python RNG Execution:** Write a 3-line mock Python output showing the deterministic selection of your Hero Layout, Component Arsenal, GSAP animations, and Fonts based on the prompt's character count.
+> 2. **AIDA Check:** ...
+> 3. **Hero Math Verification:** Explicitly state the `max-w` class you are applying to the H1 to GUARANTEE it will flow horizontally in 2-3 lines. ...
+> 4. **Bento Density Verification:** Prove mathematically that your grid columns and rows leave zero empty spaces ...
+> 5. **Label Sweep & Button Check:** ...
+> Only output the UI code after this rigorous verification is complete.
+
+**design-taste-frontend — Design Read 한 줄 선언:**
+
+> ### 0.B Output a one-line "Design Read" before generating
+> Before any code, state in one line: **"Reading this as: \<page kind> for \<audience>, with a \<vibe> language, leaning toward \<design system or aesthetic family>."**
+
+**high-end-visual-design — 실행 순서 5단계:**
+
+> 1. **[SILENT THOUGHT]** Roll the Variance Engine (Section 3). ...
+> 2. **[SCAFFOLD]** ... 3. **[ARCHITECT]** ... 4. **[CHOREOGRAPH]** ... 5. **[OUTPUT]** ...
+
+### 4.4 기계적으로 검증 가능한 규칙
+
+가장 강력한 발명. **"세어서 확인할 수 있는" 규칙**을 만든다.
+
+> * **EYEBROW RESTRAINT (mandatory, the #1 violated rule in production tests).** ... Hard rule:
+>   - **Maximum 1 eyebrow per 3 sections.** Hero counts as 1. So a page with 9 sections may use at most 3 eyebrows total.
+>   - If section A has an eyebrow, the next 2 sections cannot have one.
+>   - **Pre-Flight Check is mechanical:** count instances of `uppercase tracking` (or similar small-caps mono labels above headlines) across all section components. **If count > ceil(sectionCount / 3), the output fails.**
+> — design-taste-frontend §4.7
+
+다른 기계적 규칙들:
+- `ZIGZAG ALTERNATION CAP`: "Max 2 sections in a row with this image+text-split pattern. The 3rd consecutive image+text split is a Pre-Flight Fail."
+- `MARQUEE MAX-ONE-PER-PAGE`
+- `BENTO CELL COUNT RULE`: "A bento grid has EXACTLY as many cells as you have content for. 3 items → 3 cells"
+- `Section-Layout-Repetition Ban`: "A landing page with 8 sections must use at least 4 different layout families."
+- `Hero MUST fit in the initial viewport`: "headline max 2 lines on desktop, subtext max **20 words** AND max 3-4 lines"
+- `HERO STACK DISCIPLINE (max 4 text elements)`
+- gpt-taste: "The H1 MUST NEVER exceed 2 to 3 lines. 4, 5, or 6 lines is a catastrophic failure."
+
+**주관적 취향 판단("세련되게")을 세는 규칙으로 번역한 것.** 이게 anti-slop 스킬의 진짜 기술이다.
+
+### 4.5 조건부 발동 ("contextual" 규칙)
+
+> ## 5. CONTEXT-AWARE PROACTIVITY
+> These are tools, not defaults. Use them when the design read calls for them. **None of these fire automatically.**
+> * **Liquid Glass / Glassmorphism:** Appropriate for premium consumer, Apple-adjacent, luxury brand, or media-overlay vibes. **Inappropriate for dashboards, public-sector, or "boring B2B."**
+> — design-taste-frontend §5
+
+그리고 모션 정당화 요구:
+
+> * **MOTION MUST BE MOTIVATED (mandatory).** Before adding any animation, ask: "what does this animation communicate?" Valid answers: hierarchy, storytelling, feedback, state transition. **Invalid answer: "it looked cool".** GSAP everywhere because GSAP is available is amateur. ... **If you cannot articulate the reason in one sentence, drop the animation.**
+
+### 4.6 랜덤화 / 반복 회피 장치
+
+같은 결과물이 반복되는 것을 막는 세 가지 접근.
+
+**gpt-taste — 가짜 Python RNG:**
+
+> ## 1. PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP)
+> LLMs are inherently lazy and always pick the first layout option. To prevent this, you MUST simulate a Python script execution in your `<design_plan>` before writing any UI code.
+> Use a deterministic seed (e.g., character count of the user prompt modulo math) to simulate `random.choice()` and strictly select: 1 Hero Architecture, 1 Typography Stack, 3 Unique Component Architectures, 2 Advanced GSAP Paradigms.
+> **You are forbidden from defaulting to the same UI twice.**
+
+**high-end-visual-design — Variance Engine:**
+
+> ## 3. THE CREATIVE VARIANCE ENGINE
+> Before writing code, silently "roll the dice" and select ONE combination from the following archetypes ...
+> ### A. Vibe & Texture Archetypes (Pick 1) — Ethereal Glass / Editorial Luxury / Soft Structuralism
+> ### B. Layout Archetypes (Pick 1) — The Asymmetrical Bento / The Z-Axis Cascade / The Editorial Split
+
+**design-taste-frontend — 세션 간 회전 규칙 (파일 없이):**
+
+> **Palette-rotation rule:** if the previous premium-consumer project you generated used the beige+brass family, this one MUST use a different family. Do not ship the same warm-craft palette twice in a row.
+
+> **Serif discipline**: ... Different serif from your previous project?
+
+**이 세 번째 방식은 작동하지 않는다.** 모델은 이전 세션을 기억하지 못한다. "이전 프로젝트와 다르게"는 상태 저장 없이는 실현 불가능한 지시다. (Hallmark가 `.hallmark/log.json`으로 이 문제를 푼 것과 대조된다 → 02-prompt-techniques.md 기법 12)
+
+### 4.7 코드 스켈레톤 제공
+
+design-taste-frontend만 실제 작동 코드를 담는다. §5.A/5.B/5.C에 GSAP Sticky-Stack, Horizontal-Pan, Motion whileInView 스켈레톤 3개. 각각 뒤에 "Critical points"를 한 줄로 요약:
+
+> Critical points: `start: "top top"`, `pin: true`, every card except the last is pinned, the scale/opacity transform is driven by the NEXT card's scroll trigger (so previous card shrinks as next one arrives).
+
+그리고 Pre-Flight에서 이를 참조:
+
+> - [ ] **GSAP sticky-stack / horizontal-pan** implemented per Section 5.A / 5.B canonical skeleton (`start: "top top"`, `pin: true`, correct scrub)?
+
+이건 잘한 설계다. **"이렇게 하라"가 아니라 "이 코드를 써라"**이므로 재현성이 높다.
+
+---
+
+## 5. AI 슬롭 방지 장치 원문 목록
+
+designpaca가 참조해야 할 실제 금지 항목들. 출처를 정확히 표기한다.
+
+### 5.1 design-taste-frontend §9.F "Production-Test Tells (banned outright)"
+
+이 섹션 서문:
+
+> These patterns came out of real LLM-generated landing-page tests. They are the signatures the model defaults to when it tries to "look designed."
+
+**히어로/상단:**
+- `NO version labels in the hero.` — `V0.6`, `v2.0`, `BETA`, `INVITE-ONLY PREVIEW`, `EARLY ACCESS`, `ALPHA`
+- `NO "Brand · No. 01"-style sub-eyebrows.` — "Marrow · No. 01 · The 6-quart" 타입
+
+**섹션 번호·마이크로 라벨:**
+- `NO section-number eyebrows.` — `00 / INDEX`, `001 · Capabilities`, `002 · Featured commission`, `06 · how it works`, `05 · The honest table`
+- `NO 01 / 4-style pagination on images or bento tiles.` — "If the user can count, they don't need the label."
+- `NO "Index of Work, 2018 - 2026"-style range labels`
+
+**구분자·점:**
+- `The middle-dot (·) is rationed. Maximum 1 per line in metadata strips.`
+- `NO decorative colored status dots on every list/nav/badge.`
+
+**대시·타이포 장식:**
+- `NO em-dash (—) as a design element OR anywhere else.`
+- `NO <br>-broken-and-italicized headlines` — "for thirty\<br\>*years.*"
+- `NO vertical rotated text` — "INDEX OF WORK, 2018 - 2026" 90도 회전
+- `NO crosshair / hairline grid lines as decoration.`
+
+**가짜 제품 프리뷰:**
+- `NO div-based fake product UI in the hero` — "It is the #1 LLM-design Tell."
+- `NO fake version footers` — "v0.6.2-rc.1", "last sync 4s ago · main"
+
+**마케팅 카피 텔:**
+- `NO "Quietly in use at" / "Quietly trusted by"`
+- `NO "From the field" / "Field notes" / "Currently on the bench" / "On our desks" style poetic labels` — "Reads as performative-craftsman."
+- `NO "We respect the French ones"-style mock-humble industry-references`
+- `NO weather / locale strips` — "LIS 14:23 · 18°C"
+- `NO micro-meta-sentences under eyebrows.` — 예: *"Each of these is a feature we ship today, not a roadmap promise. The list will stay short on purpose."*
+- `NO generic step labels.` — "Stage 1 / Stage 2 / Stage 3", "Phase 01 / Phase 02 / Phase 03", "Pass One / Pass Two / Pass Three"
+
+**필·라벨·버전 스탬프:**
+- `NO pills/labels/tags overlaid on images.`
+- `NO photo-credit captions as decoration.` — `Field study no. 12 · Ines Caetano`, `Plate 03 · House archive`, `Frame XII · 35mm`
+- `NO version footers on marketing pages.` — `v1.4.2`, `Build 0048`
+- `NO "Reservation 412 of 800"-style live-stock counters`
+
+**장식 텍스트 스트립:**
+- `NO decoration text strip at hero bottom.` — `BRAND. MOTION. SPATIAL.`, `TYPE / FORM / MOTION`, `DESIGN · BUILD · SHIP`, `ESTD. 2018 · LISBON · ...`
+- `NO floating top-right sub-text in section headings.`
+
+**리스트·구분선·스코어:**
+- `NO border-t + border-b on every row of a long list / spec table.`
+- `NO scoring/progress bars with filled background tracks as comparison visuals.`
+
+**로케일·시간·스크롤 큐:**
+- `Locale / city-name / time / weather strips are banned for 99% of briefs.`
+- `Scroll cues are banned.` — `Scroll`, `↓ scroll`, `Scroll to explore`, 애니메이션 마우스휠 아이콘. 이유가 훌륭하다: *"If the user has not scrolled yet, they are looking at the hero. They know what scroll is. The bottom of the viewport does not need a label."*
+- `ZERO decorative status dots by default.`
+
+### 5.2 design-taste-frontend §4.2 프리미엄 소비재 팔레트 금지 (hex 단위)
+
+> **PREMIUM-CONSUMER PALETTE BAN (mandatory, second-most-recurring AI-tell):**
+> - Backgrounds: `#f5f1ea`, `#f7f5f1`, `#fbf8f1`, `#efeae0`, `#ece6db`, `#faf7f1`, `#e8dfcb` (all "warm paper / cream / chalk / bone")
+> - Accents: `#b08947`, `#b6553a`, `#9a2436`, `#9c6e2a`, `#bc7c3a`, `#7d5621` (all "brass / clay / oxblood / ochre")
+> - Text: `#1a1714`, `#1a1814`, `#1b1814` (all "espresso / warm near-black")
+>
+> This palette is BANNED as the default reach for premium-consumer briefs. **Every premium-consumer site you have ever shipped uses this exact palette. The brand becomes invisible.**
+
+그리고 대안을 회전 목록으로 제공한다: Cold Luxury / Forest / Black and Tan / Cobalt + Cream / Terracotta + Slate / Olive + Brick + Paper / Pure monochrome + single saturated pop.
+
+**hex 코드 단위로 금지한 것은 로컬 스킬 중 이것뿐이다.** 매우 구체적이고 검증 가능하다.
+
+### 5.3 design-taste-frontend §4.1 세리프 금지
+
+> * **SERIF DISCIPLINE (VERY DISCOURAGED AS DEFAULT):**
+>   * "It feels creative / premium / editorial" is NOT a reason to reach for serif. **The agent's default mental model that "creative brief = serif" is the single most-tested AI tell in production rounds.**
+>   * **Specifically BANNED as defaults:** `Fraunces` and `Instrument_Serif` (the two LLM-favorite display serifs).
+>   * **EMPHASIS RULE:** ... Do NOT inject a random serif word into a sans headline (or vice versa) just to add visual interest. **Mixed-family emphasis is amateur.**
+
+### 5.4 image-to-code §29 ANTI-AI-SLOP RULES
+
+카테고리 5개로 분류한 것이 특징:
+
+> ### Layout slop
+> - one giant unreadable collage / endless centered sections / identical card rows repeated section after section / cloned left-text/right-image blocks / fake complexity without hierarchy / decorative empty space with no purpose / **cards-inside-cards-inside-cards** / giant rounded wrapper sections around everything / overcompartmentalized dashboard framing
+>
+> ### Visual slop
+> - default purple/blue AI gradients / too many glowing edges / floating blobs everywhere / glassmorphism stacked without reason / random futuristic details with no structure / over-rendered noise that hides the layout
+>
+> ### Typography slop
+> - giant heading + weak tiny subcopy / too many font moods / awkward line breaks / lazy all-caps everywhere / generic gradient headline tricks
+>
+> ### Content slop
+> Avoid generic filler vibes like: unleash / elevate / revolutionize / next-gen / seamless / transformative platform
+> Avoid fake brand slop: Acme / Nexus / Flowbit / Quantumly / NovaCore
+> Avoid fake complexity slop: pseudo-enterprise control labels / decorative system markers / filler status microcopy / **fake operator / runtime / orchestration jargon unless truly central to the brand**
+>
+> ### Density slop
+> - over-packed sections / card overload / tiny spacing between major sections / visually exhausting walls of content
+
+### 5.5 imagegen-frontend-mobile §21 MOBILE ANTI-AI-TELLS
+
+모바일 특화 목록. 특히:
+
+> ### Layout AI tells
+> - fake chart dashboard spam / repeated stat cards with no product reason / **a homepage that looks like 12 widgets fighting for attention** / cloned screens in a flow / giant empty cards with weak content / **phone-shaped websites instead of app screens**
+>
+> ### UI clutter tells
+> - too many pills / too many badges / too many tiny labels / fake system markers / meaningless avatar rows / random chart inserts / **decorative toggles with no product meaning**
+
+### 5.6 minimalist-ui §2 Absolute Negative Constraints
+
+> - DO NOT use the "Inter", "Roboto", or "Open Sans" typefaces.
+> - DO NOT use generic, thin-line icon libraries like "Lucide", "Feather", or standard "Heroicons".
+> - DO NOT use Tailwind's default heavy drop shadows (`shadow-md`, `shadow-lg`, `shadow-xl`).
+> - DO NOT use primary colored backgrounds for large elements or sections.
+> - DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs).
+> - DO NOT use `rounded-full` (pill shapes) for large containers, cards, or primary buttons.
+> - DO NOT use emojis anywhere in code, markup, text content, headings, or alt text.
+> - DO NOT use generic placeholder names like "John Doe", "Acme Corp", or "Lorem Ipsum".
+> - DO NOT use AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve".
+
+### 5.7 high-end-visual-design §2 "ABSOLUTE ZERO" DIRECTIVE
+
+> If your generated code includes ANY of the following, **the design instantly fails**:
+> - **Banned Fonts:** Inter, Roboto, Arial, Open Sans, Helvetica.
+> - **Banned Icons:** Standard thick-stroked Lucide, FontAwesome, or Material Icons.
+> - **Banned Borders & Shadows:** Generic 1px solid gray borders. Harsh, dark drop shadows (`shadow-md`, `rgba(0,0,0,0.3)`).
+> - **Banned Layouts:** Edge-to-edge sticky navbars glued to the top. Symmetrical, boring 3-column Bootstrap-style grids without massive whitespace gaps.
+> - **Banned Motion:** Standard `linear` or `ease-in-out` transitions. Instant state changes without interpolation.
+
+### 5.8 stitch-design-taste §9 Anti-Patterns (AI Tells)
+
+DESIGN.md 산출물에 넣을 목록으로 규정:
+
+> - No emojis anywhere / No `Inter` font / No generic serif fonts / No pure black (`#000000`) / No neon/outer glow shadows / No oversaturated accents / No excessive gradient text on large headers / No custom mouse cursors / No overlapping elements / No 3-column equal card layouts / No generic names ("John Doe", "Acme", "Nexus") / **No fake round numbers (`99.99%`, `50%`)** / No AI copywriting clichés / **No filler UI text: "Scroll to explore", "Swipe down", scroll arrows, bouncing chevrons** / No broken Unsplash links / No centered Hero sections (for high-variance projects)
+
+### 5.9 gpt-taste §7 The Meta-Label Ban
+
+> **The Meta-Label Ban:** BANNED FOREVER are labels like "SECTION 01", "SECTION 04", "QUESTION 05", "ABOUT US". Remove them entirely. **They look cheap and unprofessional.**
+
+### 5.10 frontend-design (Anthropic 공식) — 3대 기본값 지목
+
+공식 스킬은 금지 목록 대신 "현재 AI 디자인이 수렴하는 세 가지 룩"을 이름 붙여 지목한다:
+
+> AI-generated design right now clusters around three looks: (1) a warm cream background (near #F4F1EA) with a high-contrast serif display and a terracotta accent; (2) a near-black background with a single bright acid-green or vermilion accent; (3) a broadsheet-style layout with hairline rules, zero border-radius, and dense newspaper-like columns. **All three are legitimate for some briefs, but they are defaults rather than choices, and they appear regardless of subject.** Where the brief pins down a visual direction, follow it exactly — the brief's own words always win, including when it asks for one of these looks. **Where it leaves an axis free, don't spend that freedom on one of these defaults.**
+
+artifact-design(빌트인)은 여기에 더 붙인다:
+
+> a purple-to-blue gradient hero on white; Inter or Space Grotesk as the "safe" face; emoji as section markers; everything centered; `rounded-lg` everywhere; accent bar/rail on rounded cards.
+
+**"Where it leaves an axis free, don't spend that freedom on one of these defaults."** 이 한 문장이 커뮤니티 스킬의 200줄짜리 금지 목록과 같은 일을 한다. 표현 밀도의 차이가 극적이다.
+
+### 5.11 브랜드킷 — 이미지 도메인 anti-generic
+
+> # ANTI-GENERIC RULES
+> Never make: random floating icons / generic startup gradients / overdesigned logos / meaningless blobs / messy layout collages / fake tiny UI / inconsistent logo marks / too many colors / cheap neon / stock-template brand boards / corporate PowerPoint slides / soulless SaaS dashboards
+>
+> **Make the design quieter, sharper, and more intentional.**
+
+레퍼런스 사용 규칙도 훌륭하다:
+
+> Do not copy: exact logo / exact brand name / exact composition / exact slogan / unique visual asset
+> **Use references as quality training, not as templates.**
+
+---
+
+## 6. 스킬별 강점·약점
+
+### design-taste-frontend (v2)
+
+**잘하는 것**
+- **브리프 추론 우선(§0)**: 유일하게 "먼저 읽고 나중에 만들라"를 1번 섹션에 놓았다. 나머지 스킬은 전부 미학을 먼저 선언한다.
+- **조건부 규칙 철학**: "Every rule below is contextual. None of it fires automatically."
+- **기계적 검증 규칙**: eyebrow 카운트, zigzag 캡, bento 셀 카운트 등 세서 확인 가능
+- **실제 디자인 시스템 매핑(§2.A)**: Fluent / Material / Carbon / Polaris / Atlaskit / Primer / GOV.UK / USWDS를 브리프 유형에 매핑하고 부록에 실제 설치 명령어와 공식 문서 링크를 담았다. **"AI가 CSS를 즉흥 발명하는 것"을 막는 가장 실용적인 장치.**
+- **범위 밖 선언(§13)**: "This skill is NOT for: Dashboards / Data tables / Multi-step forms / Code editors / Native mobile / Realtime collab UIs" 그리고 "If the brief is one of the above, **say so explicitly**, point to the right tool"
+- **리디자인 프로토콜(§11)**: 모드 감지 → 감사 → 보존 규칙 → 현대화 레버 우선순위 → 결정 트리. SEO 마이그레이션을 "#1 redesign risk"로 지목한 것이 실전적이다.
+- **오버라이드 경로**: 거의 모든 금지 규칙에 명시적 탈출구가 있다
+
+**못하는 것**
+- **88KB / 1,206줄**: 공식 권고(500줄)의 2.4배. 발동 시 약 22K 토큰 상주, 컴팩션 시 앞 5K만 생존 → **가장 중요한 §9와 §14가 날아간다**
+- **references/ 분리 0**: 부록 A/B/C(설치 명령, 공식 문서 링크, Liquid Glass 근사법)는 명백히 참조 파일로 뺐어야 한다
+- **Pre-Flight 체크박스 60개**: 매번 60개를 전부 정직하게 체크하는 것은 비현실적이다. 순위나 티어가 없다
+- **§12 블록 라이브러리가 유령**: 존재하지 않는 파일 경로를 지시한다
+- **세션 간 회전 규칙이 작동 불가**: "different serif from your previous project"는 상태 저장 없이는 실행 불가
+- **`gsap` 의존**: §5.A/5.B가 GSAP 전제. §3.A는 Motion(framer-motion)을 기본으로 선언 → 스택 이중화
+- **Next.js/React/Tailwind 고정**: Vue, Svelte, Astro, 바닐라 HTML에 대한 언급이 §3.A에 없다
+
+### design-taste-frontend-v1
+
+**잘하는 것**: 226줄로 짧다. 다이얼 시스템의 원형. §9 "Motion-Engine Bento Paradigm"의 5-카드 아키타입은 구체적이고 재현 가능하다.
+**못하는 것**: 브리프 추론이 없다. 모든 규칙이 무조건 발동한다. "LILA BAN", "strictly BANNED"만 있고 오버라이드가 없다. 히어로 규율, eyebrow 규율, 카피 자가 감사가 전부 없다. 실전 테스트에서 나온 텔 목록(§9.F)이 없다.
+
+### high-end-visual-design
+
+**잘하는 것**
+- **Double-Bezel(Doppelrand) 기법**이 구체적이다: 외곽 셸 `p-1.5 rounded-[2rem] ring-1 ring-black/5` + 내부 코어 `rounded-[calc(2rem-0.375rem)]` + `shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]`. **동심원 반경 계산까지 지시한다.**
+- **Button-in-Button 화살표 패턴**: 재현 가능한 시그니처
+- 각 레이아웃 아키타입마다 **모바일 붕괴 규칙을 함께 적었다** ("Mobile Collapse: Remove all rotations and negative-margin overlaps below 768px. Overlapping elements cause touch-target conflicts on mobile.")
+- 성능 가드레일(§6)이 이유와 함께 적혀 있다: "Never apply blur filters to scrolling containers or large content areas — this causes continuous GPU repaints and severe mobile frame drops."
+
+**못하는 것**: 브리프 읽기 없음. Awwwards 미학 하나만 강제한다. B2B, 공공, 접근성 우선 브리프에 재앙적이다. `rounded-[2rem]` squircle과 glass가 모든 프로젝트에 강요된다.
+
+### minimalist-ui / industrial-brutalist-ui
+
+**잘하는 것**
+- **미학 하나에 완전히 커밋한다.** 그래서 hex 값, 폰트명, border 값까지 구체적으로 지정할 수 있다 (`border: 1px solid #EAEAEA`, `#FDEBEC` / 텍스트 `#9F2F2D`)
+- industrial-brutalist는 **모드 선택을 강제한다**: "Pick ONE per project and commit to it. **Do not alternate or mix both modes within the same interface.**" 그리고 팔레트도: "Choose ONE substrate palette per project... **Never mix light and dark substrates within the same interface.**"
+- industrial-brutalist §8.1의 그리드 기법이 영리하다: "Utilize `display: grid; gap: 1px;` with contrasting parent/child background colors to generate mathematically perfect, razor-thin dividing lines without complex border declarations."
+- 시맨틱 태그 지시: `<data>`, `<samp>`, `<kbd>`, `<output>`, `<dl>`
+
+**못하는 것**: 스타일 스킬이지 디자인 스킬이 아니다. 브리프를 읽지 않는다. designpaca가 여러 미학을 다루려면 이건 "테마 파일"로 흡수되어야 할 형태다.
+
+### gpt-taste
+
+**잘하는 것**
+- **모델의 실패를 이름 붙여 지목한다**: "Standard LLMs possess severe statistical biases: they generate massive 6-line wrapped headings **by using narrow containers**, leave ugly empty gaps in bento grids, use cheap meta-labels, output invisible button text, and endlessly repeat the same Left/Right layouts."
+- **원인까지 짚는다**: 6줄 헤드라인의 원인이 "좁은 컨테이너"임을 지적하고 해법을 준다 ("You MUST use ultra-wide containers for the H1 (`max-w-5xl`, `max-w-6xl`, `w-full`)")
+- `grid-flow-dense` 지시: bento 빈칸 문제의 실제 CSS 해법
+- 버튼 대비 체크: "Dark background = white text. Light background = dark text. Invisible text is a failure."
+
+**못하는 것**: "Python RNG 시뮬레이션"은 인지적 연극이다. 모델은 진짜 난수를 못 만든다. 프롬프트 문자 수 모듈로는 같은 프롬프트에 항상 같은 결과를 준다. 다만 **"선택했음을 명시적으로 출력하게 만드는" 효과**는 실재한다. GSAP 강제(§5)는 React 외 스택에서 무의미하다.
+
+### imagegen-frontend-web / mobile
+
+**잘하는 것**
+- **HARD OUTPUT RULE을 파일 최상단에 배치**하고 그 자체로 별도 섹션을 만들었다. "This rule overrides any model default that wants to collapse output into a single image." 모델 기본 동작과 충돌하는 규칙임을 인지하고 명시적으로 이긴다고 선언한다.
+- **조합 변형 엔진(Combinatorial Variation Engine)**: Theme Paradigm / Background Character / Typography Character / Hero Architecture / Section System / Signature Component Set / Motion-Implied Language / Composition Anchor / Background Mode / CTA Variation / Hero Scale / Narrative Spine / Second-Read Moment. **축별로 옵션을 나열하고 "섹션마다 하나씩 고르되 페이지 전체에서 최소 3개 앵커가 등장해야 한다"는 분산 규칙을 준다.**
+- **가장 흔한 기본값을 명시적으로 강등**: "The default **left-text / right-image hero is the most overused AI pattern**. It is allowed, but **it should not be your first instinct**." 그리고 대안 10개를 나열한다.
+- mobile §25 "NOT ALWAYS SIMPLE RULE": "Simplicity is not the goal by itself. **Cleanliness is the goal.** ... The rule is: not always simple, always clean." 미니멀리즘 과잉 편향을 교정한다.
+- mobile §35 QUALITY CHECK 27문항이 자문 형식이다: "**Were too few screens generated out of laziness?**"
+
+**못하는 것**: 987줄 / 1,465줄. 이미지 생성 도구 없는 환경에서는 대부분 무용지물. 규칙 번호가 37개까지 가면서 서로 중복된다.
+
+### image-to-code
+
+**잘하는 것**: "이미지 먼저, 코드는 번역 레이어"라는 강한 워크플로 선언 ("The image is the design source. The code is the translation layer."). §21~§25 추출 규칙(텍스트/타이포/스페이싱/컴포넌트/컬러)이 명확하다. §33 기본 섹션 팩(4/8/12) 제공.
+**못하는 것**: 이미지 생성 도구 없으면 전체가 죽는다. 1,228줄. 다이얼 9개는 과하다.
+
+### redesign-existing-projects
+
+**잘하는 것**
+- **구조가 다른 스킬과 완전히 다르다.** 미학 선언이 아니라 **"문제 → 고치는 법" 페어 나열**이다:
+  > - **Buttons not bottom-aligned in card groups.** When cards have different content lengths, CTAs end up at random heights. Pin buttons to the bottom of each card so they form a clean horizontal line regardless of content above.
+- **"AI가 빼먹는 것" 섹션**이 독보적이다: 법적 링크, 뒤로가기, 404 페이지, 폼 검증, skip-to-content 링크, 쿠키 동의
+- **광학적 정렬** 같은 미묘한 항목이 있다: "Mathematical alignment that looks optically wrong. Centering by the math doesn't always look centered to the eye. Icons next to text, play buttons in circles, or text in buttons often need 1-2px optical adjustments."
+- **수정 우선순위**가 위험 대비 효과 순이다: "1. Font swap — biggest instant improvement, lowest risk"
+- **스택 불가지론**: "Work with the existing tech stack. Do not migrate frameworks or styling libraries."
+
+**못하는 것**: 감사 항목 100개 이상을 나열만 하고 우선순위 티어가 없다(우선순위는 마지막 7단계뿐). 다이얼이나 브리프 추론이 없다.
+
+### stitch-design-taste
+
+**잘하는 것**: **메타 스킬이다.** 자기가 디자인하지 않고 `DESIGN.md`를 생성해서 다른 도구(Google Stitch)가 읽게 한다. 출력 템플릿을 마크다운 코드블록으로 정확히 제시한다. Best Practices / Tips / Common Pitfalls 3단 구성이 좋다:
+> - **Be Descriptive:** "Deep Charcoal Ink (#18181B)" — not just "dark text"
+> - **Be Opinionated:** This is not a neutral template — it enforces a specific, premium aesthetic
+> - Common Pitfall: "Using technical jargon without translation ("rounded-xl" instead of "generously rounded corners")"
+
+**못하는 것**: Stitch 전용. 하지만 **"휴대용 design.md를 산출한다"는 아이디어 자체는 designpaca가 반드시 훔쳐야 한다.** (Superdesign의 `.superdesign/design-system.md`, Hallmark의 `design.md`도 같은 패턴)
+
+### brandkit
+
+**잘하는 것**: 로고 컨셉 방법론 5종(Monogram+Meaning / Product Action / Metaphor Fusion / Negative Space / Construction Geometry)을 구체적으로 나눈다. 시각 모드 8종에 각각 팔레트·타이포·이미지 방향이 붙는다. 텍스트 절제 규칙이 이미지 생성 맥락에서 정확하다("Text should be large enough and sparse enough to render well"). 태그라인 좋은 예/나쁜 예를 실제 문장으로 준다.
+**못하는 것**: 웹 디자인 스킬이 아니다.
+
+### full-output-enforcement
+
+**잘하는 것**: 60줄로 한 가지 문제(잘림)만 판다. **금지 패턴을 문자열 단위로 나열한다**:
+> **In code blocks:** `// ...`, `// rest of code`, `// implement here`, `// TODO`, `/* ... */`, `// similar to above`, `// continue pattern`, `// add more as needed`, bare `...`
+> **In prose:** "Let me know if you want me to continue", "I can provide more details if needed", "for brevity", "the rest follows the same pattern", ...
+
+그리고 **한계 도달 시의 행동을 정의한다**:
+> `[PAUSED — X of Y complete. Send "continue" to resume from: next section name]`
+> On "continue", pick up exactly where you stopped. No recap, no repetition.
+
+**"Scope → Build → Cross-check"** 3단계에서 "Count how many distinct deliverables are expected. **Lock that number.**"가 핵심.
+
+**못하는 것**: 디자인 스킬이 아니다. 하지만 designpaca가 여러 섹션을 한 번에 출력해야 할 때 이 기법을 흡수해야 한다.
+
+### graphify
+
+**잘하는 것**: 스킬이 아니라 **CLI 파이프라인 실행 매뉴얼**이다. Usage 블록에 커맨드 20여 개를 나열하고, Step 1~9를 순서대로 실행하게 한다. 각 스텝에 실제 Python/bash 코드가 있다. 그리고:
+> ## Honesty Rules
+> - Never invent an edge. If unsure, use AMBIGUOUS.
+> - Never skip the corpus check warning.
+> - Always show token cost in the report.
+> - Never hide cohesion scores behind symbols - show the raw number.
+> - Never run HTML viz on a graph with more than 5,000 nodes without warning the user.
+
+**"Honesty Rules"라는 별도 섹션**은 좋은 패턴이다. designpaca에도 "이미지가 없으면 없다고 말하라", "가짜 지표를 만들지 말라" 류의 정직성 규칙 섹션이 필요하다.
+
+**못하는 것**: `trigger:` 비표준 필드 사용. 1,242줄.
+
+### frontend-design (Anthropic 공식)
+
+**잘하는 것**
+- **약 40줄. 산문. 금지 목록 거의 없음.** 그런데 효과가 있다.
+- **역할 부여가 구체적이다**: "Approach this as the design lead at a small studio known for giving every client a visual identity that could not be mistaken for anyone else's. **This client has already rejected proposals that felt templated**, and is paying for a distinctive point of view"
+- **주제에 뿌리내리기**: "The subject's own world, its materials, instruments, artifacts, and vernacular, is where distinctive choices come from."
+- **2패스 프로세스**: 계획(토큰 시스템 4요소: Color 4-6 hex / Type 2+ roles / Layout ASCII 와이어프레임 / Signature) → **계획을 브리프에 대조 검토** → 코드
+- **자기 검증 방법이 영리하다**: "if any part of it reads like the generic default you would produce for any similar page (**work through a similar prompt to see if you arrive somewhere similar**) rather than a choice made for this specific brief — revise that part, say what you changed and why."
+- **절제의 원칙**: "**Spend your boldness in one place.** Let the signature element be the one memorable thing, keep everything around it quiet and disciplined... Consider Chanel's advice: before leaving the house, take a look in the mirror and **remove one accessory**."
+- **위험 감수도 리스크임을 짚는다**: "Not taking a risk can be a risk itself!"
+- **카피 작성 지침을 디자인의 일부로 다룬다**: "Words appear in a design for one reason: to make it easier to understand... They are design material, not decoration." / "A person manages notifications, not webhook config." / "An action keeps the same name through the whole flow, so the button that says 'Publish' produces a toast that says 'Published.'"
+- **CSS 실무 함정 하나만 콕 집는다**: "It's easy to generate CSS classes that cancel each other out (especially with a type-based selector like `.section` and a element-based selector like `.cta`)"
+
+**못하는 것**: 구체적 CSS 값, 폰트명 후보, 팔레트가 전혀 없다. 초보 모델이나 저사양 모델에서는 "무엇을 해야 할지" 감이 안 잡힐 수 있다. 검증 가능한 게이트가 없다.
+
+### artifact-design (빌트인, Skill 도구로 확인)
+
+**잘하는 것**
+- **"디자인할지 말지"가 아니라 "어떤 트리트먼트인지"를 먼저 정하게 한다**: "Calibrate treatment, not whether to design. A doc deserves the same craft as a landing page — what changes is the treatment that craft is delivered in."
+- **유틸리티 트리트먼트를 명시적으로 인정한다**: "Many requests call for a more utilitarian treatment: a plan, a memo, a demo. Make it polished... but avoid over-designing. **Most pages do not need a flashy, gigantic hero.**"
+- **판단 기준 한 줄**: "When unsure: a well-composed page is never the wrong answer; an over-designed visual identity sometimes is."
+- **우선순위 체인**: "Precedence is always: the user's own words, then the project's existing system, then your choices."
+- **기존 시스템 존중을 1번에 놓았다**: "Look for an existing design system first — CLAUDE.md, a tokens or theme file, existing component styles."
+- **뉴트럴 선택 원칙**: "A pure mid-grey reads as unconsidered; **a grey with a slight hue bias toward the page's accent reads as chosen.** ... the point is that the neutral was picked, not inherited."
+- **다크모드를 3상태로 정확히 다룬다** (`data-theme` 스탬프 있음/없음 + `prefers-color-scheme`), 그리고 실패 모드를 이름 붙인다: "scan the stylesheet for any color declared only inside a media or `[data-theme]` block — **that is the classic unreadable-artifact bug.**"
+- **레이아웃 스페이싱 원칙 한 줄**: "Lay out sibling groups with flex or grid and `gap`, not per-element margins that silently collapse or double."
+- **"UI일 때는 다르다"를 분리**: "A dashboard or tool is scanned and operated, not read top-to-bottom, so the craft shifts from typography to information design. **Surface the summary before the detail; encode state in form as well as number.**"
+
+**못하는 것**: Artifact 런타임 전용 제약(CSP, 폰트 호스트)이 섞여 있어 그대로 이식 불가.
+
+### dataviz (빌트인)
+
+**잘하는 것**
+- **절차를 순서로 못 박고 이유를 준다**: "Color comes LAST. Most bad charts pick colors first."
+- **"계산 가능한 것은 계산하라"**: "The single most important habit: **the color part is computable, so compute it.** Never eyeball whether a palette is colorblind-safe — run `scripts/validate_palette.js`."
+- **실행 가능한 검증기를 번들한다** (`scripts/validate_palette.js`, `.py`) — 스킬이 취향 판단을 스크립트로 외주 주는 유일한 사례
+- **디자인 시스템 불가지론**: "The method is invariant; only these parameters change per system." 그리고 파라미터 표를 준다 (Ramps / Categorical theme / Sequential hue / Diverging pair / Status palette / Texture fill / Surfaces / Filter controls)
+- **완전한 progressive disclosure**: SKILL.md ~80줄 + `references/` 7개 + `scripts/` 2개. 본문은 **인덱스 + 절차**만 담고, 각 참조 파일이 무엇에 답하는지 표로 정리한다.
+- **anti-patterns.md를 별도 파일로 두고 "모든 차트를 이것과 대조하라"고 지시**한다. 각 항목이 `❌ 무엇 / Why it misleads / ✅ Do instead` 3단이다. **실제 사례까지 적는다**: "Real example: an 'Adoption' chart plotting Users (0–30k) against Sessions (0–800k) — a reviewer flagged it as looking 'hallucinated.'"
+- **마지막에 눈으로 확인하라고 한다**: "Render it and look at it. The validator checks color, not layout — open or screenshot the output and eyeball it for label collisions, geometry, and overflow before calling it done."
+
+**못하는 것**: 차트 전용.
+
+### skill-creator (Anthropic 공식)
+
+designpaca 설계에 가장 직접적으로 적용되는 스킬. 핵심 인용:
+
+> - **description**: ... Note: currently Claude has a tendency to "undertrigger" skills -- to not use them when they'd be useful. To combat this, please **make the skill descriptions a little bit "pushy"**.
+> - Keep SKILL.md under 500 lines; if you're approaching this limit, add an additional layer of hierarchy along with clear pointers about where the model using the skill should go next.
+> - Prefer using the imperative form in instructions.
+> - **Writing Style**: Try to explain to the model why things are important **in lieu of heavy-handed musty MUSTs**. Use theory of mind and try to make the skill general and not super-narrow to specific examples.
+> - **Generalize from the feedback.** ... if there's some stubborn issue, you might try branching out and using different metaphors, or recommending different patterns of working.
+> - **Keep the prompt lean.** Remove things that aren't pulling their weight.
+> - **Look for repeated work across test cases.** ... that's a strong signal the skill should bundle that script.
+> - **How skill triggering works**: Claude only consults skills for tasks it can't easily handle on its own — simple, one-step queries like "read this PDF" may not trigger a skill even if the description matches perfectly.
+
+description 최적화 평가 쿼리 작성 가이드도 중요하다:
+
+> Bad: `"Format this data"`, `"Extract text from PDF"`, `"Create a chart"`
+> Good: `"ok so my boss just sent me this xlsx file (its in my downloads, called something like 'Q4 sales final FINAL v2.xlsx') and she wants me to add a column that shows the profit margin as a percentage..."`
+> The key thing to avoid: **don't make should-not-trigger queries obviously irrelevant.** "Write a fibonacci function" as a negative test for a PDF skill is too easy — it doesn't test anything. **The negative cases should be genuinely tricky.**
+
+---
+
+## 7. 종합 매트릭스
+
+| 기법 | dtf(v2) | dtf-v1 | hevd | min-ui | ibu | gpt-taste | ig-web | i2c | redesign | stitch | frontend-design(공식) | artifact-design | dataviz |
+|---|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+| 브리프 추론 우선 | O | X | X | X | X | X | 부분 | 부분 | 부분 | O | O | O | O |
+| 다이얼 시스템 | O | O | X | X | X | X | O | O | X | O | X | X | X |
+| 금지 목록(하드 밴) | O | O | O | O | O | O | O | O | O | O | X | 부분 | 부분 |
+| 조건부 오버라이드 | O | X | X | X | 부분 | X | X | X | X | X | O | O | 부분 |
+| 기계적 카운트 규칙 | O | X | X | X | X | O | O | X | X | X | X | X | O |
+| 출력 전 게이트/체크리스트 | O | O | O | X | X | O | O | O | X | X | O | X | O |
+| 랜덤/변형 엔진 | 부분 | X | O | X | X | O | O | O | X | X | X | X | X |
+| 코드 스켈레톤 | O | X | X | X | 부분 | 부분 | X | X | X | X | X | X | X |
+| references/ 분리 | X | X | X | X | X | X | X | X | X | 부분 | X | X | O |
+| 범위 밖 선언 | O | X | X | X | X | X | X | X | X | X | X | 부분 | 부분 |
+| 실행 가능 검증기 | X | X | X | X | X | X | X | X | X | X | X | X | O |
+| 산출물로 design.md | X | X | X | X | X | X | X | X | X | O | X | X | X |
+| 이유(why) 서술 | 부분 | X | 부분 | X | X | O | 부분 | X | O | X | O | O | O |
+| 접근성 규칙 | O | X | X | X | X | 부분 | X | X | O | O | 부분 | O | O |
+| 카피/문구 규율 | O | X | X | 부분 | X | O | 부분 | O | O | O | O | O | X |
+| 500줄 이하 | X | O | O | O | O | O | X | X | O | O | O | O | O |
+
+약어: dtf = design-taste-frontend, hevd = high-end-visual-design, min-ui = minimalist-ui, ibu = industrial-brutalist-ui, ig-web = imagegen-frontend-web, i2c = image-to-code
+
+---
+
+## 8. 로컬 조사에서 나온 핵심 결론 5가지
+
+1. **커뮤니티 디자인 스킬은 전부 단일 파일이고, 이게 최대 약점이다.** 13개 중 references/ 를 쓴 스킬은 0개. 반면 Anthropic 공식 dataviz는 SKILL.md 80줄 + references 7개 + scripts 2개로 같은 밀도의 지식을 1/10 토큰으로 상주시킨다.
+
+2. **"공식 스타일"과 "커뮤니티 스타일"은 정반대 방향이다.** 공식(frontend-design, artifact-design)은 40줄 산문에 이유 중심. 커뮤니티(design-taste-frontend)는 1,206줄에 금지 목록 중심. 둘 다 효과가 있고, 둘 다 결점이 있다. designpaca는 이 두 계보를 계층으로 분리해서 합쳐야 한다(공식 스타일을 SKILL.md 본문에, 커뮤니티 스타일을 references/에).
+
+3. **가장 강력한 발명은 "기계적으로 셀 수 있는 규칙"이다.** eyebrow ≤ ceil(sections/3), zigzag ≤ 2연속, bento 셀 = 콘텐츠 개수, 히어로 헤드라인 ≤ 2줄, 서브텍스트 ≤ 20단어, 마퀴 ≤ 1개. 주관적 취향을 카운트로 번역하면 검증 가능해진다.
+
+4. **세션 간 다양성 규칙은 상태 저장 없이는 실패한다.** design-taste-frontend의 "different serif from your previous project"는 실행 불가능한 지시다. designpaca는 프로젝트 루트에 로그 파일을 쓰는 방식으로 이 문제를 풀어야 한다.
+
+5. **컨텍스트 수명 관리가 설계 제약이다.** 스킬은 발동 후 세션 내내 상주하고, 컴팩션 시 앞 5,000토큰만 재부착된다. 따라서 **가장 중요한 규칙은 파일 앞쪽에 있어야 한다.** design-taste-frontend는 이걸 정반대로 했다(AI Tells가 §9, Pre-Flight가 §14). imagegen-frontend-web이 HARD OUTPUT RULE을 6번째 줄에 놓은 것이 옳다.
diff --git a/research/skills/02-prompt-techniques.md b/research/skills/02-prompt-techniques.md
new file mode 100644
index 0000000..72ea9df
--- /dev/null
+++ b/research/skills/02-prompt-techniques.md
@@ -0,0 +1,1626 @@
+# 02. 검증된 프롬프트 기법 카탈로그
+
+작성일: 2026-08-20
+각 기법은 **무엇을 / 왜 효과적인지 / 실제 예문** 3요소로 정리한다.
+예문은 전부 실제 스킬·시스템 프롬프트에서 가져온 원문이며 출처를 병기한다.
+
+---
+
+## A. 발동과 컨텍스트 관리
+
+### 기법 1. Description = 용도 + 트리거 + 배제조건 (3-part description)
+
+**무엇을**
+`description` 필드를 세 부분으로 구성한다. (1) 무엇을 하는가, (2) 어떤 요청에서 발동하는가(사용자가 실제 칠 법한 문구 포함), (3) 어떤 요청에서는 발동하지 않는가.
+
+**왜 효과적인지**
+description은 스킬 선택의 유일한 근거다. Anthropic 공식 문서:
+
+> "The description is critical for skill selection: Claude uses it to choose the right Skill from potentially 100+ available Skills."
+> — Skill authoring best practices
+
+그리고 실패 모드가 두 방향이다. skill-creator는 **과소 발동**을 지적한다:
+
+> "currently Claude has a tendency to 'undertrigger' skills -- to not use them when they'd be useful. To combat this, please make the skill descriptions a little bit 'pushy'."
+
+Claude Code 문서는 **과잉 발동** 대책을 별도로 제시한다:
+
+> "**Skill triggers too often** — If Claude uses your skill when you don't want it: 1. Make the description more specific"
+
+배제조건을 description에 넣으면 두 방향을 동시에 잡는다. 로컬 스킬 중 이 기법을 쓰는 것은 `codex-image`와 `refactor-governance` 둘뿐인데, 둘 다 오탐이 잦은 도메인이라는 공통점이 있다.
+
+**실제 예문**
+
+```yaml
+description: AI 비트맵 이미지(일러스트·컨셉아트·텍스처·스프라이트·목업·컷아웃) 생성·편집이
+  필요할 때 사용. "이미지 생성해", "이미지 만들어", "일러스트 만들어", "그림 그려줘",
+  "generate an image", "create an illustration" 같은 요청에 자동으로 트리거.
+  벡터/SVG/코드 네이티브 아이콘이나 로고 시스템 확장에는 쓰지 않는다.
+```
+출처: `C:\Users\encep\.claude\skills\codex-image\SKILL.md`
+
+```yaml
+description: Evidence-gated refactoring and design-debt governance for coding agents.
+  Use when planning or executing refactors involving dead code, ... or any change that
+  must preserve behavior while improving structure.
+  Read-only lookup, investigation, explanation, or answering questions about the code
+  is NOT a trigger — the gated workflow applies only when a file will be changed.
+```
+출처: `C:\Users\encep\.codex-litellm\skills\refactor-governance\SKILL.md`
+
+---
+
+### 기법 2. 3인칭 서술 + "Use when" 시작
+
+**무엇을**
+description을 1인칭("I can help you...")이나 2인칭("You can use this to...")이 아닌 3인칭 동사로 시작한다. obra/superpowers는 한발 더 나가 **"Use when"으로 시작하라**고 규정한다.
+
+**왜 효과적인지**
+description은 시스템 프롬프트에 그대로 주입된다. 시점이 뒤섞이면 모델이 그것을 "지시"가 아니라 "인용"으로 읽는다. Anthropic이 경고 박스로 강조한 몇 안 되는 항목 중 하나다.
+
+> **Always write in third person**. The description is injected into the system prompt, and inconsistent point-of-view can cause discovery problems.
+> - **Good:** "Processes Excel files and generates reports"
+> - **Avoid:** "I can help you process Excel files"
+> - **Avoid:** "You can use this to process Excel files"
+> — Skill authoring best practices
+
+obra/superpowers의 규칙은 더 강하다:
+
+> `description`: max 1024 chars total, third-person, starts with "Use when..."
+> **Description must state *triggering conditions only*—never summarize workflow**
+> "Use when..." format prevents agents from taking workflow shortcuts
+
+마지막 문장이 미묘하지만 중요하다. description에 워크플로 요약을 넣으면 모델이 **본문을 읽지 않고 description만 보고 대충 처리**하려 든다.
+
+**실제 예문**
+
+```yaml
+# 나쁨 (워크플로 요약이 들어감)
+description: This skill reads the brief, picks a palette, generates a design plan,
+  then writes the HTML.
+
+# 좋음 (트리거 조건만)
+description: Use when building or reshaping web UI - landing pages, portfolios,
+  marketing sites, product pages, or redesigns - and the visual result matters.
+```
+
+---
+
+### 기법 3. Progressive Disclosure 3계층 (인덱스 + 참조 파일)
+
+**무엇을**
+SKILL.md 본문은 **절차와 인덱스**만 담고, 지식 본체는 `references/*.md`로 분리한다. 본문에서 "이 파일은 무엇에 답하는지"를 표로 명시한다.
+
+**왜 효과적인지**
+스킬은 발동되면 세션 내내 컨텍스트에 상주한다.
+
+> "When you or Claude invoke a skill, the rendered `SKILL.md` content enters the conversation as a single message and **stays there for the rest of the session**."
+> — Claude Code skills docs
+
+그리고 컴팩션 시 잘린다.
+
+> "When the conversation is summarized to free context, Claude Code re-attaches the most recent invocation of each skill after the summary, **keeping the first 5,000 tokens of each**. Re-attached skills share a combined budget of 25,000 tokens."
+> — Claude Code skills docs
+
+반면 참조 파일은 읽기 전까지 0토큰이다.
+
+> "**No context penalty for large files:** Reference files, data, or documentation don't consume context tokens until actually read"
+> — Skill authoring best practices
+
+핵심 수치: 본문 500줄 이하, 참조 깊이 1단계, 참조 파일 100줄 초과 시 목차 포함.
+
+> "**Keep references one level deep from SKILL.md.** All reference files should link directly from SKILL.md to ensure Claude reads complete files when needed."
+> "Claude may partially read files when they're referenced from other referenced files. When encountering nested references, Claude might use commands like `head -100` to preview content rather than reading entire files, resulting in incomplete information."
+
+**실제 예문** — dataviz의 인덱스 표 (빌트인 스킬, Skill 도구로 확인)
+
+```markdown
+## Reference files
+
+| File | What it answers |
+|------|-----------------|
+| `references/choosing-a-form.md` | Which chart type / is it even a chart? |
+| `references/color-formula.md` | The four jobs, the six checks, snap-to-passing |
+| `references/marks-and-anatomy.md` | Mark specs, spacers, labels, figures, hero number |
+| `references/interaction.md` | Tooltips & hover, filters & time ranges |
+| `references/components.md` | The pieces a chart is made of |
+| `references/anti-patterns.md` | **What goes wrong — check every chart against this** |
+| `references/palette.md` | **The reference palette instance** |
+| `scripts/validate_palette.js` | Runnable six-checks validator (run it; don't eyeball) |
+```
+
+---
+
+### 기법 4. 인덱스-후-선택 (Index-then-pick), 절대 사전 로드 금지
+
+**무엇을**
+카탈로그형 지식(테마 20개, 레이아웃 21개, 컴포넌트 아키타입 22개)은 **인덱스 파일 하나 + 항목별 개별 파일**로 쪼갠다. 인덱스만 읽고 하나를 고른 다음, **선택한 파일만** 로드한다.
+
+**왜 효과적인지**
+카탈로그를 통째로 로드하면 진짜 정보(고른 것)가 노이즈(고르지 않은 20개)에 묻힌다. 그리고 토큰이 20배 든다. Hallmark가 이 패턴을 가장 엄격하게 구현했다.
+
+**실제 예문**
+
+> ### Step 2: Macrostructure First
+> Before theme, pick one of 21 named macrostructures from `references/macrostructures.md` index.
+> **Load ONLY that one per-macro file** (e.g., `05-workbench.md`). **Never load the whole catalogue.**
+>
+> ### Step 3: Load Visual Rulesets
+> **Always-load (eager):** Genre file from Step 1 (1–2 files)
+> **Index-then-pick (never pre-load):** `macrostructures.md` → load only the picked per-macro file; `component-cookbook.md` → load only the picked archetype files (5–7 typical)
+> **Load conditionally (be honest—do not pre-load "for safety"):**
+> - `microinteractions.md` — if page has any interactive element
+> - `responsive.md` — if mobile is in scope
+> - `hero-enrichment.md` — only after image-need check
+> **At Step 7 only:** `slop-test.md` — post-emit check (not pre-emit reference)
+> — Nutlope/hallmark `skills/hallmark/SKILL.md`
+
+`"be honest—do not pre-load 'for safety'"` 이 한 마디가 실제로 필요하다. 모델은 안전빵으로 전부 읽으려는 경향이 있다.
+
+---
+
+### 기법 5. 가장 중요한 규칙을 파일 최상단에 (HARD RULE 선두 배치)
+
+**무엇을**
+모델의 기본 동작과 정면으로 충돌하는 규칙 하나를, 제목·개요·역할 부여보다 **먼저** 배치하고 별도 섹션으로 만든다.
+
+**왜 효과적인지**
+두 가지 이유. (1) 컴팩션 시 앞 5,000토큰만 살아남으므로 물리적으로 앞에 있어야 생존한다. (2) 긴 문서에서 후반부 지시는 초반 지시보다 준수율이 낮다 (lost-in-the-middle).
+
+design-taste-frontend는 이걸 반대로 했다. AI Tells가 §9(약 600줄 지점), Pre-Flight가 §14(약 910줄 지점)에 있다. 컴팩션 한 번이면 둘 다 사라진다.
+
+**실제 예문**
+
+```markdown
+---
+name: imagegen-frontend-web
+description: ...
+---
+
+# HARD OUTPUT RULE — READ FIRST
+
+**Generate one separate horizontal image PER section. Always. No exceptions.**
+
+- 1 section requested -> 1 image
+- 8 sections requested -> 8 images
+- "landing page" with no count -> default to 6 sections -> 6 images
+
+Each image is one section, generated as its own image call. Never combine multiple
+sections into one frame. Never return a single tall image that contains the whole page.
+
+**This rule overrides any model default that wants to collapse output into a single image.**
+
+---
+
+# HERO COMPOSITION BIAS — READ FIRST
+...
+```
+출처: `C:\Users\encep\.agents\skills\imagegen-frontend-web\SKILL.md` (1~24번째 줄)
+
+마지막 문장 "This rule overrides any model default"가 핵심이다. **규칙이 모델 기본값과 싸운다는 사실을 명시하면 준수율이 올라간다.**
+
+---
+
+## B. 브리프 해석과 방향 결정
+
+### 기법 6. Design Read — 코드 전에 한 줄 선언
+
+**무엇을**
+코드를 쓰기 전에 "이 브리프를 무엇으로 읽었는지"를 정해진 문장 틀로 한 줄 출력하게 한다.
+
+**왜 효과적인지**
+LLM이 나쁜 디자인을 내는 첫 번째 원인은 미학이 아니라 **브리프를 안 읽는 것**이다. 한 줄 선언은 (1) 모델이 스스로 방향을 확정하게 하고, (2) 사용자가 즉시 교정할 수 있는 지점을 만들며, (3) 이후 모든 규칙이 참조할 앵커가 된다.
+
+**실제 예문**
+
+> Before any code, state in one line: **"Reading this as: \<page kind> for \<audience>, with a \<vibe> language, leaning toward \<design system or aesthetic family>."**
+>
+> Example reads:
+> - *"Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind utilities + Geist + restrained motion."*
+> - *"Reading this as: solo designer portfolio for hiring managers, with an editorial / kinetic-type language, leaning toward native CSS + scroll-driven animation + custom typography."*
+> - *"Reading this as: redesign of a public-sector service site, with a trust-first language, leaning toward GOV.UK Frontend or USWDS."*
+> — design-taste-frontend §0.B
+
+**틀 + 예시 3개**의 조합이 중요하다. 틀만 주면 모델이 빈칸을 애매하게 채운다.
+
+---
+
+### 기법 7. 질문은 정확히 하나만
+
+**무엇을**
+브리프가 모호할 때 질문을 여러 개 묶어 던지지 못하게 하고, **정확히 하나만**, 그것도 **답이 실제로 결과를 바꿀 때만** 하게 한다.
+
+**왜 효과적인지**
+질문 폭탄은 사용자 이탈을 부른다. 반대로 질문 없이 추측하면 잘못된 방향으로 전체를 만든다. "하나만" 제약이 이 둘 사이의 실용적 균형점이다.
+
+**실제 예문**
+
+> ### 0.C If the brief is ambiguous, ask one question, do not guess
+> Ask exactly **one** clarifying question - never a multi-question dump - and only when the design read genuinely diverges. Example: *"Should this feel closer to Linear-clean or Awwwards-experimental?"*
+>
+> **If you can confidently infer from context, do not ask.** Just declare the design read and proceed.
+> — design-taste-frontend §0.C
+
+Hallmark는 반대 접근인데 이유가 있다. 3개 필드를 항상 묻되, **답이 없으면 추론하고 공개한다**:
+
+> ### Step 1: Design-Context Gate
+> Always ask three fields (even on short briefs):
+> - **Audience:** Who uses this? What do they care about?
+> - **Use case:** What's the single action the page should drive?
+> - **Tone:** Pick an extreme—editorial, brutalist, soft, utilitarian, luxury, playful, technical, austere. **(Not "clean and modern.")**
+>
+> Wait for one answer. If the user says "go ahead" or doesn't engage, **infer and disclose**—one sentence stating what you picked, so the user can redirect.
+> — Hallmark SKILL.md
+
+**"Pick an extreme ... (Not 'clean and modern.')"** — 사용자가 무의미한 답을 하는 것까지 막는다.
+
+---
+
+### 기법 8. 다이얼 시스템 (수치화된 미학 축)
+
+**무엇을**
+미학을 2~3개의 1-10 정수 축으로 환원하고, (a) 브리프 키워드 → 다이얼 값 매핑 표, (b) 축 값별 구체적 CSS 정의, (c) 다이얼로 게이팅되는 조건부 규칙을 함께 제공한다.
+
+**왜 효과적인지**
+"세련되게"는 검증 불가능하지만 "VARIANCE 8"은 검증 가능하다. 그리고 다이얼이 있으면 규칙에 **조건**을 걸 수 있다. `if VARIANCE > 4 then no centered hero`처럼. 이는 200개의 무조건 규칙보다 훨씬 적은 토큰으로 더 많은 상황을 커버한다.
+
+**실제 예문 (3요소 전부)**
+
+축 정의:
+```
+* **`DESIGN_VARIANCE: 8`**   - 1 = Perfect Symmetry, 10 = Artsy Chaos
+* **`MOTION_INTENSITY: 6`**  - 1 = Static, 10 = Cinematic / Physics
+* **`VISUAL_DENSITY: 4`**    - 1 = Art Gallery / Airy, 10 = Cockpit / Packed Data
+```
+
+브리프 → 다이얼 매핑:
+| Signal | VARIANCE | MOTION | DENSITY |
+|---|---|---|---|
+| "minimalist / clean / calm / editorial / Linear-style" | 5-6 | 3-4 | 2-3 |
+| "premium consumer / Apple-y / luxury / brand" | 7-8 | 5-7 | 3-4 |
+| "playful / wild / Dribbble / Awwwards / experimental" | 9-10 | 8-10 | 3-4 |
+| "trust-first / public-sector / regulated / accessibility-critical" | 3-4 | 2-3 | 4-5 |
+
+축 값의 구체적 정의:
+> ### DESIGN_VARIANCE (Level 1-10)
+> * **1-3 (Predictable):** Symmetrical CSS Grid (12-col, equal fr-units), equal paddings, centered alignment.
+> * **4-7 (Offset):** `margin-top: -2rem` overlaps, varied image aspect ratios (4:3 next to 16:9), left-aligned headers over center-aligned data.
+> * **8-10 (Asymmetric):** Masonry layouts, CSS Grid with fractional units (`grid-template-columns: 2fr 1fr 1fr`), massive empty zones (`padding-left: 20vw`).
+
+게이팅:
+> **ANTI-CENTER BIAS:** Centered Hero / H1 sections are avoided when `DESIGN_VARIANCE > 4`.
+> **Perpetual Micro-Interactions:** Use when `MOTION_INTENSITY > 5` AND the section actively benefits from motion.
+> For `VISUAL_DENSITY > 7`: generic card containers are banned.
+
+자기 일관성:
+> **"Motion claimed, motion shown."** If `MOTION_INTENSITY > 4`, the page must actually move: entry transitions on hero, scroll-reveal on key sections, hover physics on CTAs, at minimum. **A static page that claims `MOTION_INTENSITY: 7` is broken.** Conversely, if you cannot ship working motion in the available scope, **drop the dial to 3** and ship a clean static page.
+
+별칭 금지:
+> Cross-references throughout this document refer to these exact variable names - **never invent aliases like `LAYOUT_VARIANCE` or `ANIM_LEVEL`.**
+
+출처: design-taste-frontend §1, §4.3, §5, §7
+
+**주의**: image-to-code는 다이얼을 9개로 늘렸다. 인지 부하 대비 효과가 떨어진다. 3개가 적정선이다.
+
+---
+
+### 기법 9. 브리프 → 실제 디자인 시스템 매핑
+
+**무엇을**
+"이 브리프는 CSS를 발명할 게 아니라 공식 디자인 시스템 패키지를 써야 한다"를 판단하는 표를 준다. 그리고 **실제 설치 명령어와 공식 문서 URL**을 부록에 담는다.
+
+**왜 효과적인지**
+모델의 가장 큰 낭비는 이미 존재하는 것을 즉흥 재발명하는 것이다. 엔터프라이즈 대시보드에 커스텀 CSS를 짜는 것보다 Carbon을 설치하는 게 낫다. 그리고 **모델은 패키지명·설치 명령·API를 환각한다.** 실제 명령어를 스킬에 박아두면 그게 사라진다.
+
+**실제 예문**
+
+> ### 2.A When to reach for a real design system (use official packages)
+> | Brief reads as… | Reach for | Why |
+> |---|---|---|
+> | Microsoft / enterprise SaaS / dashboards | `@fluentui/react-components` | Official Fluent UI, Microsoft tokens, accessibility done |
+> | Google-ish UI, Material-flavored product | `@material/web` + Material 3 tokens | Official, theme-able via Material Theming |
+> | IBM-style B2B / enterprise analytics | `@carbon/react` + `@carbon/styles` | Official Carbon, mature data-density patterns |
+> | Shopify app surfaces | `polaris.js` web components | Required for Shopify admin UI |
+> | Atlassian / Jira-style product | `@atlaskit/*` + `@atlaskit/tokens` | Official Atlassian DS |
+>
+> **Do not invent CSS for things that have an official package. Do not pretend an aesthetic trend is an official system.**
+> — design-taste-frontend §2.A
+
+그리고 부록 서문:
+
+> The sections below are vendored reference content. They give the agent real install commands, real canonical doc links, and real working starter snippets for each design system named in Section 2. **Use them to ground decisions in production reality, not training-data fiction.**
+> — design-taste-frontend, Appendices 서문
+
+부록 C는 특히 정직하다. "Apple Liquid Glass"에 대해 **무엇이 공식이고 무엇이 아닌지**를 나눠 적는다(`### What is official` / `### What is NOT official` / `### Safer web approximation skeleton`). 트렌드 용어를 스펙인 것처럼 다루지 않는 규율이다.
+
+---
+
+## C. 반복·기본값 회피
+
+### 기법 10. 기본값을 이름 붙여 지목하기 (Named default attractors)
+
+**무엇을**
+금지 목록을 나열하는 대신, **현재 AI가 수렴하는 구체적 룩을 이름과 hex로 지목**하고, "이건 선택이 아니라 기본값이니 자유가 주어진 축에 이걸 쓰지 마라"고 말한다.
+
+**왜 효과적인지**
+"generic하게 만들지 마라"는 실행 불가능한 지시다. "#F4F1EA 크림 배경 + 고대비 세리프 + 테라코타 액센트 조합은 기본값이다"는 실행 가능한 지시다. 그리고 목록 100개보다 **명명된 3개**가 기억에 남는다.
+
+**실제 예문 (Anthropic 공식, 가장 밀도 높은 버전)**
+
+> For calibration: AI-generated design right now clusters around three looks:
+> **(1)** a warm cream background (near #F4F1EA) with a high-contrast serif display and a terracotta accent;
+> **(2)** a near-black background with a single bright acid-green or vermilion accent;
+> **(3)** a broadsheet-style layout with hairline rules, zero border-radius, and dense newspaper-like columns.
+>
+> All three are legitimate for some briefs, but **they are defaults rather than choices, and they appear regardless of subject.** Where the brief pins down a visual direction, follow it exactly — the brief's own words always win, including when it asks for one of these looks. **Where it leaves an axis free, don't spend that freedom on one of these defaults.**
+> — anthropic-agent-skills `frontend-design/SKILL.md`
+
+artifact-design(빌트인)의 확장판:
+
+> warm cream (#F4F1EA) with a serif display and terracotta accent; near-black with a lone acid-green or vermilion pop; broadsheet hairline rules with dense columns; **a purple-to-blue gradient hero on white; Inter or Space Grotesk as the "safe" face; emoji as section markers; everything centered; `rounded-lg` everywhere; accent bar/rail on rounded cards.**
+
+**hex 단위 명명의 극단적 버전** (design-taste-frontend §4.2):
+
+> Backgrounds: `#f5f1ea`, `#f7f5f1`, `#fbf8f1`, `#efeae0`, `#ece6db`, `#faf7f1`, `#e8dfcb`
+> Accents: `#b08947`, `#b6553a`, `#9a2436`, `#9c6e2a`, `#bc7c3a`, `#7d5621`
+> Text: `#1a1714`, `#1a1814`, `#1b1814`
+>
+> **Every premium-consumer site you have ever shipped uses this exact palette. The brand becomes invisible.**
+
+마지막 문장이 이유(why)다. "촌스럽다"가 아니라 **"브랜드가 안 보이게 된다"**는 것이 진짜 손해다.
+
+---
+
+### 기법 11. 조합 변형 엔진 (Combinatorial Variation Engine)
+
+**무엇을**
+디자인을 독립적인 축 N개로 분해하고, 각 축마다 옵션 목록을 준다. 매 실행마다 축별로 하나씩 고르게 하고, **"페이지 전체에서 최소 X개의 서로 다른 앵커가 나타나야 한다"**는 분산 제약을 건다.
+
+**왜 효과적인지**
+모델은 옵션 목록의 첫 항목을 고르는 편향이 있다. 하지만 **축을 여러 개로 쪼개면 조합 수가 곱셈으로 늘어나서**, 각 축에서 편향이 있어도 최종 조합은 달라진다. 그리고 "축 안에서 하나"보다 "축들의 조합"이 사고 단위로 더 자연스럽다.
+
+**실제 예문**
+
+축과 옵션 (imagegen-frontend-web §2):
+```
+### Composition Anchor (per-section)
+Each section picks 1 anchor; **across the site at least 3 different anchors must appear**;
+vary the hero so the page does not open on the AI default.
+- Centered statement
+- Top-left lead, support bottom-right
+- Bottom-left text over background image
+- Bottom-right CTA cluster
+- Left-third caption + right-two-thirds visual (classic — use sparingly, never twice in a row)
+- Right-third caption + left-two-thirds visual (inverted classic)
+- Centered low (text in lower 40% over hero image)
+- Off-grid editorial offset
+- Stacked center
+- Image-as-canvas with text overlaid in a clean safe area
+
+### Background Mode (per-section)
+Pick 1 per section; vary across the page so it is never all the same mode.
+**Be confident with backgrounds — they are a primary tool, not a risk.**
+- Solid surface with inline asset
+- Full-bleed image background with tonal overlay
+- Duotone treated image (two-color photo treatment, palette-locked)
+- Micro-noise gradient over solid
+- Color-blocked diptych (two flat fields meeting, modernist)
+- ...
+
+### Hero Scale (per-page)
+Pick 1 — must match brand mood:
+- Giant Statement Hero
+- Mid Editorial Hero
+- Mini Minimalist Hero (tiny logo + short statement + thin CTA, almost no image)
+**Mini does not mean weak — it means confident restraint.**
+```
+
+주목할 두 축은 아예 서사 층위다:
+
+```
+### Narrative / Concept Spine
+Pick 1 and let it thread through visuals and short copy across the page.
+- Artifact / collectible — proof, specimen, treasured object framing
+- Journey / pilgrimage — directional flow, waypoint sections, roadmap feeling
+- Tool / precision instrument — machined detail, calibrated UI, tactile controls
+- Living system / garden — organic growth metaphor, branching layout
+- Stage / spotlight — theatrical contrast, performer + audience framing
+- Archive / dossier — indexed rows, captions, understated authority
+
+### Second-Read Moment
+Pick exactly 1 unobvious but legible motif and place it deliberately, once across the page:
+- asymmetric bleed that still respects hierarchy
+- one oversized punctuation or numeral serving structure
+- a single unexpected material switch (paper vs gloss vs metal accent)
+- a narrow vertical side-rail editorial note style
+- a macro crop that carries brand color naturally
+**Avoid gimmick-for-gimmick: the moment must aid scan order or brand recall.**
+```
+
+출처: `imagegen-frontend-web/SKILL.md` §2
+
+**"Second-Read Moment: pick exactly 1"** — Anthropic 공식의 "Spend your boldness in one place"와 같은 원칙을 구현 가능한 형태로 만든 것.
+
+---
+
+### 기법 12. 프로젝트 로그 파일로 세션 간 다양성 강제
+
+**무엇을**
+디자인 선택(매크로구조, 테마, 액센트 색상 대역)을 프로젝트 루트의 JSON 로그에 기록하고, **다음 실행 때 그 로그를 읽어 최근 3~5개와 다른 것을 고르게 한다.** 그리고 산출물 CSS 첫 줄에 선택을 스탬프로 남긴다.
+
+**왜 효과적인지**
+"이전 프로젝트와 다르게 하라"는 상태 없이는 실행 불가능한 지시다. design-taste-frontend가 이 지시를 세 군데(세리프 회전, 팔레트 회전, Pre-Flight 체크)에 넣었지만 전부 작동하지 않는다. 모델은 이전 세션을 기억 못 한다.
+
+Hallmark가 이 문제를 파일시스템으로 푼다. 이것은 **"AI 슬롭"의 정의를 개별 페이지 품질이 아니라 "출력들 사이의 구조적 지문 반복"으로 재정의**한 결과다.
+
+**실제 예문**
+
+로그 쓰기:
+> **Project memory (required):**
+> Update (or create) `.hallmark/log.json` at project root. Append new entry at the front:
+> ```json
+> { "date": "YYYY-MM-DD", "macrostructure": "<name>", "theme": "<name>",
+>   "enrichment": "<E# or 'none'>", "brief": "<one-line summary>" }
+> ```
+> Custom entries add `"theme": "custom"` and `"theme_axes": "<paper-band> / <display-style> / <accent-hue>"`. **Trim to last 20 entries.**
+
+로그 읽기:
+> ### Step 2.5: Check Project Memory
+> If `.hallmark/log.json` exists, read the last 3–5 entries. Use the log to inform diversification: your picks must not match recent macrostructures or themes.
+> **State the rotation in plain text:**
+> *"Last 5 builds: [list]. Bento Grid used 2 of 5—picking from [exclusion set]. I'll go with [pick]."*
+
+CSS 스탬프:
+> **Stamping (required):** First non-empty CSS line MUST be:
+> ```css
+> /* Hallmark · macrostructure: <name> · tone: <tone> · anchor hue: <hue> */
+> ```
+
+다양성 축 정의:
+> **Theme diversification (mandatory):** Two consecutive themes must differ on at least one axis:
+> - **Paper band** — dark (L < 30%) / mid (30–85%) / light (> 85%)
+> - **Display style** — high-contrast-serif, roman-serif, classical-serif, geometric-sans, grotesk-sans, rounded-sans, mono, display-condensed, display-heavy, risograph-bold
+> - **Accent hue** — warm (10–60°) / cool (200–300°) / neutral / chromatic-other
+>
+> **State your pick in plain text before writing code:**
+> *"Macrostructure: <name>. Theme: <name>. Differs on: <axes>."*
+
+출처: Nutlope/hallmark `skills/hallmark/SKILL.md`
+
+그리고 실패를 이름 붙여 anti-pattern으로 등록했다:
+
+> ### Default-attractor sameness
+> Two consecutive Hallmark outputs in the same project use the same macrostructure. ... The page looks redesigned only because copy changed.
+> **Why it fails.** Hallmark's whole point is that two pages for two briefs feel like *different sites*, not colour-swaps of one template. **Repeating a macrostructure across outputs is the structural fingerprint of templating, which is the AI tell Hallmark exists to defeat.**
+> — Hallmark `references/anti-patterns.md`
+
+**자기 스킬의 최빈 실패까지 anti-pattern으로 등록한 사례**:
+
+> ### Specimen fall-through
+> ... **This is the single most-repeated Hallmark output, and it's the reason the skill felt like it had one shape.**
+> **Fix.** The Specimen macrostructure is one of twenty-one in `macrostructures.md`, not a default. If the brief is vague, pick from the first ten in that file. Reach for Specimen **only when the brief explicitly says "editorial", "specimen sheet", "type foundry"**.
+
+---
+
+### 기법 13. 명시적 선택 출력 강제 (Declare-your-pick)
+
+**무엇을**
+모델이 무언가를 골랐으면 **코드를 쓰기 전에 평문으로 그 선택을 선언**하게 한다.
+
+**왜 효과적인지**
+선택을 말로 뱉으면 (a) 실제로 선택 행위가 일어나고, (b) 이후 출력이 그 선언과 일관되게 나오며, (c) 사용자가 코드가 나오기 전에 교정할 수 있다. gpt-taste의 "가짜 Python RNG"도 결국 이 효과를 노린 것이다 (난수는 가짜지만 선언은 진짜다).
+
+**실제 예문 3종**
+
+Hallmark (평문 선언):
+> **State your pick in plain text before writing code:**
+> *"Macrostructure: <name>. Theme: <name>. Differs on: <axes>."*
+> ...
+> Load ONLY the picked archetype files. State both picks: *"Nav: N5 Floating pill. Footer: Ft5 Statement."*
+
+Hallmark (프리뷰 블록):
+```markdown
+**Hallmark · v1.1.0**
+
+- **Macrostructure** · <name>
+- **Theme** · <name> (or custom: <vibe> · OKLCH values · fonts)
+- **Enrichment** · <E# + tier, or "none">
+- **Sections** · <section names separated by ·>
+- **Motion** · <primitives separated by ·, or "none">
+- **Slop test** · <N / 58 pass/fail>
+- **Diversification** · <axes that differ from prior run>
+```
+
+gpt-taste (구조화된 사전 계획 블록):
+> Before writing ANY React/UI code, you MUST output a `<design_plan>` block containing:
+> 1. **Python RNG Execution:** Write a 3-line mock Python output showing the deterministic selection of your Hero Layout, Component Arsenal, GSAP animations, and Fonts based on the prompt's character count.
+> 2. **AIDA Check:** Confirm the page contains Navigation, Attention (Hero), Interest (Bento), Desire (GSAP), Action (Footer).
+> 3. **Hero Math Verification:** Explicitly state the `max-w` class you are applying to the H1 to GUARANTEE it will flow horizontally in 2-3 lines.
+> 4. **Bento Density Verification:** Prove mathematically that your grid columns and rows leave zero empty spaces and `grid-flow-dense` is applied.
+> 5. **Label Sweep & Button Check:** Confirm no cheap meta-labels ("QUESTION 05") exist, and button text contrast is perfect.
+
+Anthropic 공식 (토큰 시스템 4요소):
+> First, brainstorm a short design plan based on the human's design brief: create a compact token system with color, type, layout, and signature.
+> **Color:** describe the palette as 4–6 named hex values.
+> **Type:** the typefaces for 2+ roles (a characterful display face that's used with restraint, a complementary body face, and a utility face for captions or data if needed).
+> **Layout:** a layout concept, using one-sentence prose descriptions and **ASCII wireframes** to ideate and compare.
+> **Signature:** the single unique element this page will be remembered by.
+
+**주의점**: Anthropic 공식은 이걸 사용자에게 다 보여주지 말라고 한다.
+> "Try to do a lot of this planning and iteration in your thinking, and only show ideas to the user when you have higher confidence it'll delight them."
+
+---
+
+## D. 검증과 게이트
+
+### 기법 14. 기계적으로 셀 수 있는 규칙 (Countable rules)
+
+**무엇을**
+주관적 품질 판단을 **정수 카운트 비교**로 번역한다. 그리고 세는 방법까지 명시한다.
+
+**왜 효과적인지**
+"eyebrow를 남용하지 마라"는 준수 여부를 확인할 수 없다. "`uppercase tracking` 인스턴스 수 ≤ ceil(섹션수/3)"은 확인할 수 있다. 그리고 확인할 수 있는 규칙만이 실제로 지켜진다.
+
+**실제 예문 (원문 그대로)**
+
+> * **EYEBROW RESTRAINT (mandatory, the #1 violated rule in production tests).** An "eyebrow" is the small uppercase wide-tracking label sitting above a section headline (e.g. `FOUR COLORWAYS`, `SELECTED WORK`, `THE HARDWARE`). Typical CSS signature: `text-[11px] uppercase tracking-[0.18em]`, `font-mono text-[10.5px] uppercase tracking-[0.22em]`. Every AI-built site puts an eyebrow above EVERY section header, producing the same templated rhythm. Hard rule:
+>   - **Maximum 1 eyebrow per 3 sections.** Hero counts as 1. So a page with 9 sections may use at most 3 eyebrows total.
+>   - If section A has an eyebrow, the next 2 sections cannot have one.
+>   - **Pre-Flight Check is mechanical:** count instances of `uppercase tracking` (or similar small-caps mono labels above headlines) across all section components. **If count > ceil(sectionCount / 3), the output fails.**
+>   - **What to do instead of an eyebrow:** drop it entirely. The headline alone is enough. If you need to categorize a section, the section's location on the page already categorizes it; no label needed.
+> — design-taste-frontend §4.7
+
+이 규칙이 **4요소를 모두 갖췄다**: (1) 대상을 정의(무엇이 eyebrow인지), (2) CSS 시그니처로 식별 방법 제공, (3) 정수 비교 공식, (4) 대안 제시.
+
+다른 카운트 규칙들:
+
+> * **ZIGZAG ALTERNATION CAP (mandatory).** ... Max 2 sections in a row with this image+text-split pattern. **The 3rd consecutive image+text split is a Pre-Flight Fail.**
+> * **MARQUEE MAX-ONE-PER-PAGE (mandatory).** ... Two or more marquees on the same page reads as lazy filler.
+> * **BENTO CELL COUNT RULE (mandatory):** A bento grid has EXACTLY as many cells as you have content for. 3 items → 3 cells. 5 items → 5 cells. **If your grid has an empty cell in the middle or at the end, you planned wrong.**
+> * **Section-Layout-Repetition Ban.** Once you use a layout family for a section, that family can appear at most ONCE on the page. **A landing page with 8 sections must use at least 4 different layout families.**
+> * **Hero MUST fit in the initial viewport.** Headline max 2 lines on desktop, subtext max **20 words** AND max 3-4 lines. **If you cannot describe the value-prop in 20 words of subtext, the value-prop is unclear, not the rule too tight.**
+> * **HERO STACK DISCIPLINE (max 4 text elements).**
+> * **Navigation height cap: 80px max desktop, default 64-72px.**
+> * **Max 3 lines of quote body. Never 6.**
+> — design-taste-frontend §4.7, §4.10
+
+Hallmark의 카운트 게이트:
+> 23. Does the accent colour cover more than ~5 % of any single viewport?
+> 25. Is any prose container's `max-width` outside the 45–75 ch range?
+> 37. Does the page use **more than three** distinct `font-family` families?
+> 38. Is the **outlier face used in more than two slots** on the page?
+> 44. **Hero fit.** (a) Is `padding-block-end` ≥ 1.3× `padding-block-start`? (b) On 1280×800, can essential content be seen without scrolling?
+
+v0(Vercel)의 카운트 규칙:
+> "ALWAYS use exactly 3-5 colors total." / "NEVER exceed 5 total colors without explicit user permission."
+> "ALWAYS limit to maximum 2 font families total."
+> "Use line-height between 1.4-1.6 for body text"
+> — v0 Prompts and Tools/Prompt.txt
+
+---
+
+### 기법 15. 예/아니오 게이트 목록 (Slop test)
+
+**무엇을**
+출력 후 실행하는 **질문형 검사 목록**을 만든다. 모든 질문의 정답이 "아니오"가 되도록 설계하고, 하나라도 "예"면 수정하게 한다. 특히 심각한 항목에는 `Auto-fail` 표시를 붙인다.
+
+**왜 효과적인지**
+체크박스 목록("- [ ] X를 했는가")은 모델이 무비판적으로 전부 체크하는 경향이 있다. **질문형("X가 있는가?")은 실제 검사 행위를 요구한다.** 그리고 "모든 답이 아니오여야 한다"는 균일한 방향성이 검사를 빠르고 오류 없게 만든다.
+
+**실제 예문 (Hallmark 58 게이트 중 일부, 원문)**
+
+> ## Visual
+> 1. Is the display font Inter, Roboto, Open Sans, Poppins, Lato, or a system default?
+> 2. Is there a purple-to-blue gradient anywhere — including `background-clip: text` gradient headline?
+> 3. Is there a 3-equal-column card grid with icon-above-heading tiles?
+> 4. Is any card nested inside another card?
+> 5. Is any card using a thick coloured left/right side-stripe border?
+> 6. **Hero shape — centred-everything.** Is the hero `min-height: 100vh` with everything centred, OR are all elements stacked on the same centred axis? **Auto-fail.**
+> 7. Is pure `#000` or pure `#fff` used as a base colour anywhere?
+>
+> ## Microinteractions
+> 10. Is `transition-all` (or `transition: all`) used anywhere?
+> 11. Is `hover:scale-105` (or any uniform hover-scale) applied across multiple unrelated elements?
+> 12. Are bouncy / overshoot easings used on UI state changes — buttons, modals, tooltips?
+> 13. Does any element have *more than one* hover effect at the same time?
+> 14. Are you animating `width`, `height`, `top`, `left`, `margin`, or `padding` anywhere?
+> 15. Does the focus ring transition into existence (fade in)?
+> 16. Is there a celebratory success toast for an action whose effect the user can already see?
+> 17. Are tooltip hover-delay and focus-delay equal?
+> 18. Is auto-rotating content lacking pause-on-hover-and-focus?
+>
+> ## Layout-Safety Gates
+> 34. Does the page horizontally scroll on any viewport between 320 px and 1920 px?
+> 36. Are interactive bars explicitly vertically centered via `align-items: center`?
+>
+> ## Contrast & Readability
+> 41. **The contrast failures that ship most often.** Fail on button text ≈ button fill / `--color-accent-ink` missing or unused / dark-section ink-on-ink.
+>
+> ## Mobile-Responsiveness — The Non-Negotiables
+> 50. **Image-bearing grid track without `minmax(0, 1fr)`.** Does any `grid-template-columns` render an `<img>` inside a plain `1fr` track?
+> 51. **Display headers without long-word wrap.** Does any display-size text lack `overflow-wrap: anywhere; min-width: 0`?
+> 54. **Section eyebrow / tag beside the heading.** Does any section render an eyebrow on the same horizontal row as the heading? **Auto-fail.**
+> 55. **All-caps display heads with line-height < 1.0.**
+> 56. **Sticky element at `top: 0` below a sticky page-level nav.** Are there two sticky-at-top-0 elements on the page? **Auto-fail.**
+>
+> ---
+> **If any answer is yes, fix it. Do not ship slop.**
+> — Nutlope/hallmark `references/slop-test.md`
+
+**게이트 50, 51, 56은 특히 주목할 만하다.** 이건 미학 규칙이 아니라 **실제 렌더링 버그의 원인이 되는 CSS 패턴**이다. `1fr` 트랙 안의 `<img>`가 트랙을 넘치게 만드는 문제, 긴 단어가 있는 display 텍스트가 오버플로하는 문제, sticky 두 개가 겹치는 문제 — 전부 모델이 반복적으로 만드는 실제 버그다.
+
+---
+
+### 기법 16. 6축 자기 채점 (Pre-emit self-critique)
+
+**무엇을**
+이진 게이트와 별도로, **정성적 6축에 각각 1-5점을 매기고 전 축이 3점 이상**이어야 출력하게 한다. 그리고 점수를 산출물에 스탬프로 남긴다.
+
+**왜 효과적인지**
+이진 게이트는 "특정 실수를 안 했는가"만 잡는다. "전체가 좋은가"는 못 잡는다. 축을 이름 붙여 나누면 모델이 각 축에 대해 별도로 생각한다.
+
+**실제 예문 (원문)**
+
+> ## Pre-Emit Self-Critique (Six Axes)
+>
+> | # | Axis | What You're Scoring |
+> |---|---|---|
+> | **A** | **Philosophy** | Is there a clear *why* — a position the page is taking? Or is it just a layout? |
+> | **B** | **Hierarchy** | Can a reader tell, in 2 seconds, what's primary, secondary, tertiary? Or is everything the same weight? |
+> | **C** | **Execution** | Are the details (rule weight, accent footprint, text-wrap, focus rings, contrast) all in spec, or is there sloppiness? |
+> | **D** | **Specificity** | Does this look like *this brief* — or does it look like a generic "page that could be anyone"? |
+> | **E** | **Restraint** | Have you removed everything that isn't earning its place? Decoration, redundancy, padding-for-padding's-sake? |
+> | **F** | **Variety** | Does this output share a structural fingerprint with a previous Hallmark output in the project? |
+>
+> Score output on Philosophy, Hierarchy, Execution, Specificity, Restraint, Variety (**all ≥3**). **Stamp scores in artifact.**
+> — Nutlope/hallmark
+
+축 D("Does this look like *this brief*")가 Anthropic 공식의 자기 검증과 같은 것을 묻는다:
+
+> if any part of it reads like the generic default you would produce for any similar page (**work through a similar prompt to see if you arrive somewhere similar**) rather than a choice made for this specific brief — revise that part
+> — frontend-design/SKILL.md
+
+**"비슷한 프롬프트를 머릿속으로 돌려보고 같은 곳에 도착하는지 확인하라"** — 일반성 테스트의 가장 간명한 표현이다.
+
+---
+
+### 기법 17. 실행 가능한 검증 스크립트 번들
+
+**무엇을**
+계산으로 검증 가능한 항목은 **모델 판단에 맡기지 않고 스크립트로 검사**한다. 스킬에 스크립트를 번들하고, "눈으로 보지 말고 돌려라"라고 명시한다.
+
+**왜 효과적인지**
+색맹 안전성(ΔE), 대비비(WCAG), 명도 대역 같은 것은 계산 문제지 취향 문제가 아니다. 모델이 계산하면 틀린다. 스크립트가 계산하면 안 틀린다. 그리고 스크립트 실행은 토큰을 거의 안 쓴다(출력만 소비).
+
+> "Scripts executed efficiently: Utility scripts can be executed through bash **without loading their full contents into context**. Only the script's output consumes tokens"
+> — Skill authoring best practices
+
+**실제 예문 (dataviz, 빌트인)**
+
+> The single most important habit: **the color part is computable, so compute it.**
+> Never eyeball whether a palette is colorblind-safe — run `scripts/validate_palette.js`.
+>
+> 3. **VALIDATE the palette — run the script, don't reason about ΔE.**
+> `node scripts/validate_palette.js "<hex,hex,…>" --mode light` ... It returns pass/fail on the lightness band, chroma floor, adjacent-pair CVD separation, the normal-vision floor, and contrast. **Fix anything that FAILs before continuing.** Re-run for `--mode dark` with that mode's surface.
+>
+> - **Run the validator before shipping any categorical palette.** CVD ΔE ≥ 8 is the target (OKLab ×100); 6–8 is a floor that is legal ONLY with secondary encoding. A normal-vision floor below 15 is a hard FAIL.
+
+그리고 스크립트가 못 잡는 것을 정직하게 명시한다:
+
+> 7. **Render it and look at it.** **The validator checks color, not layout** — open or screenshot the output and eyeball it for label collisions, geometry, and overflow before calling it done.
+
+**Anthropic 공식이 스크립트 번들을 권하는 이유:**
+
+> **Benefits of utility scripts:** More reliable than generated code / Save tokens / Save time / Ensure consistency across uses
+
+그리고 언제 스크립트를 만들어야 하는지 신호까지 준다:
+
+> **Look for repeated work across test cases.** Read the transcripts from the test runs and notice if the subagents all independently wrote similar helper scripts. **If all 3 test cases resulted in the subagent writing a `create_docx.py` or a `build_chart.py`, that's a strong signal the skill should bundle that script.**
+> — skill-creator
+
+---
+
+### 기법 18. 절차 순서를 이유와 함께 못 박기
+
+**무엇을**
+단계 순서를 정하고, **왜 그 순서인지 한 문장으로** 설명한다.
+
+**왜 효과적인지**
+"1,2,3 순서로 하라"는 지켜지지 않는다. "3번을 먼저 하면 X가 망가진다"는 지켜진다. 이유가 있는 순서는 모델이 스스로 재구성할 수 있다.
+
+**실제 예문**
+
+> ## The procedure — do these in order
+> **Color comes LAST. Most bad charts pick colors first.**
+> 1. **Pick the form.** What is the data's job — magnitude, identity, polarity, a single headline, change-over-time? The job picks the chart type, and sometimes the answer is *not a chart*.
+> 2. **Assign color by the job it does.** ...
+> 3. **VALIDATE the palette** ...
+> — dataviz
+
+image-to-code:
+> ## 2. MANDATORY IMAGE-FIRST RULE
+> 1. generate the design image or image set yourself first
+> 2. deeply inspect and analyze the generated image(s)
+> 3. extract the design system from them
+> 4. implement the frontend only after that
+>
+> Do not: start with freeform coding / skip straight to implementation / **rely on memory of "good frontend taste" instead of producing the actual reference**
+>
+> **The image is the design source. The code is the translation layer.**
+
+design-taste-frontend §11.D (위험 대비 효과 순):
+> ### 11.D Modernisation Levers (priority order)
+> Apply in order - **stop when the brief is satisfied**:
+> 1. **Typography refresh** - biggest visual lift per unit of risk.
+> 2. **Spacing & rhythm** - increase section padding, fix vertical rhythm.
+> 3. **Color recalibration** - desaturate, unify neutrals, keep brand accent.
+> 4. **Motion layer** - add `MOTION_INTENSITY`-appropriate micro-interactions.
+> 5. **Hero & key-section recomposition**
+> 6. **Full block replacement** - only when the existing block is unsalvageable.
+
+redesign-existing-projects:
+> ## Fix Priority
+> Apply changes in this order for **maximum visual impact with minimum risk**:
+> 1. **Font swap** — biggest instant improvement, lowest risk
+> 2. **Color palette cleanup** ...
+
+---
+
+## E. 규칙 표현 문법
+
+### 기법 19. 이유(Why)와 대안(Fix)을 규칙에 붙이기 — 3단 구조
+
+**무엇을**
+각 금지 항목을 **`무엇이 문제인가 / 왜 AI처럼 보이는가 / 대신 무엇을 하는가`** 3단으로 쓴다.
+
+**왜 효과적인지**
+이유가 없으면 모델이 규칙의 경계를 판단할 수 없다. 대안이 없으면 모델이 금지된 것을 피하려다 더 나쁜 것을 만든다. Anthropic 공식이 이걸 스킬 작성 원칙으로 명시한다:
+
+> **Explain the why.** Try hard to explain the **why** behind everything you're asking the model to do. Today's LLMs are *smart*. They have good theory of mind and when given a good harness can go beyond rote instructions. ... **If you find yourself writing ALWAYS or NEVER in all caps, or using super rigid structures, that's a yellow flag** — if possible, reframe and explain the reasoning so that the model understands why the thing you're asking for is important.
+> — skill-creator
+
+**실제 예문 (Hallmark anti-patterns.md, 3단 구조의 모범)**
+
+> ### The AI nav
+> Wordmark hard-left, 4–5 inline text links (`Features · Pricing · Docs · Blog · About`) centred or right-grouped, a CTA button hard-right, full viewport width, sticky on scroll, white background, 1 px hairline border-bottom.
+>
+> **Why it fails.** The shape is genre-blind: it lands the same on a wedding photographer's portfolio, a bakery, a B2B SaaS, and a manifesto. **When the nav can't tell you what kind of site you're on, the page is templated.**
+>
+> **Fix.** Pick from the routing table in `component-cookbook.md` § Navigation. The genre routes you to one of N5–N9: Floating pill (modern-minimal / atmospheric), Newspaper masthead (editorial), Brutal slab (playful), Terminal command (CLI), Edge-aligned minimal (luxury / quiet).
+
+> ### Invented metrics
+> A stat-led layout, comparison row, or proof bar carrying numbers the user never supplied — "10× faster", "saves 5 hours per week", "trusted by 50,000+ teams", "99.9 % uptime", "+47 % conversion".
+>
+> **Why it fails.** Audiences read invented stats as fast as they read invented testimonials. **A page that lies on its proof bar can't be trusted on its claims either.**
+>
+> **Fix.** Three options, in order of preference: (1) replace the number with `—` and a labelled grey block ("metric to confirm"); (2) ask the user for the real number and pause the run; (3) rebuild the section without the proof slot — **a stat-led macrostructure with no real stats is the wrong macrostructure. The number-shaped hole is honest; the fabricated number is slop.**
+
+> ### Re-drawn UI chrome
+> A fake browser bar (URL pill + traffic-light dots) wrapping a screenshot. A fake phone frame around a mobile mockup. A fake code-block window wrapping a `<pre>`.
+>
+> **Why it fails.** The user already has the chrome — their browser, their phone, their IDE all *are* chrome. **Redrawing it in a page is like printing a photograph of a picture frame inside a real picture frame.** The fakery is also bad: the URL is wrong, the dots aren't macOS dots, the notch is the wrong shape.
+>
+> **Fix.** Use a real screenshot wrapped in `<figure>` (with a hairline border at most). ... **The page's job is to show content, not to imitate the OS.**
+
+> ### Lazy-loaded LCP
+> `loading="lazy"` on the hero image or hero video — the LCP element.
+> **Why it fails.** ... **Real-world data: lazy-loaded LCP images show p75 of 720 ms vs. 364 ms for preloaded — 2× slower, 4× more "poor" experiences.**
+> **Fix.** `fetchpriority="high"` and `preload="metadata"` on the LCP element.
+
+**"picture frame inside a picture frame" 같은 비유는 규칙보다 오래 기억된다.** skill-creator도 이걸 권한다:
+> "if there's some stubborn issue, you might try branching out and **using different metaphors**"
+
+---
+
+### 기법 20. 오버라이드 경로 명시 (Escape hatch)
+
+**무엇을**
+모든 금지 규칙에 **"이럴 때는 해도 된다"** 조건을 붙인다. 조건은 구체적이어야 한다.
+
+**왜 효과적인지**
+탈출구 없는 금지는 두 가지로 실패한다. (1) 사용자가 명시적으로 요청해도 모델이 거부한다. (2) 모델이 규칙 전체를 무시하기 시작한다. design-taste-frontend v1 → v2의 가장 큰 변화가 이것이다.
+
+**실제 예문**
+
+> **THE LILA RULE:** The "AI Purple / Blue glow" aesthetic is discouraged as a default. ...
+> **Override:** if the brand or brief explicitly asks for purple / violet / lila, embrace it. But execute with intent: consistent palette, harmonised neutrals, restrained gradients. Not generic AI gradient slop.
+> — design-taste-frontend §4.2
+
+> **Serif is only acceptable when ONE of these is explicitly true:**
+> - The brand brief literally names a serif font, OR
+> - The aesthetic family is genuinely editorial / luxury / publication / manuscript / heritage / vintage **AND you can articulate why this specific serif fits this specific brand**
+> — design-taste-frontend §4.1
+
+> **Override:** the beige+brass+espresso palette is acceptable ONLY when the brand brief explicitly names those colors, or when the brand identity is genuinely vintage / artisan / warm-craft AND you can articulate why this specific palette fits this specific brand. **Default-reaching for it because "this is a cookware brief" is banned.**
+> — design-taste-frontend §4.2
+
+> **Override:** allow emojis only when the user explicitly asks for a playful / chat-style / social-native vibe - and even then use them sparingly with intent.
+> — design-taste-frontend §3.D
+
+**"AND you can articulate why"** 패턴이 핵심이다. 탈출구를 열되 **설명 의무를 부과**한다. 설명할 수 없으면 기본값 회귀라는 뜻이므로 자동으로 걸러진다.
+
+Anthropic 공식의 최상위 오버라이드 원칙:
+> **Where the brief pins down a visual direction, follow it exactly — the brief's own words always win**, including when it asks for one of these looks.
+> — frontend-design
+
+artifact-design의 우선순위 체인:
+> **Precedence is always: the user's own words, then the project's existing system, then your choices.**
+
+---
+
+### 기법 21. 실패했던 완화 표현을 명시적으로 폐기하기
+
+**무엇을**
+"sparingly", "avoid", "prefer not to" 같은 완화 표현이 실패했음을 **스킬 본문에 기록**하고, 이진 규칙으로 대체한 이유를 밝힌다.
+
+**왜 효과적인지**
+모델은 정도 표현("가끔은 괜찮음")을 만나면 자기에게 유리하게 해석한다. 그리고 **저자가 그 실패를 관찰했다는 사실 자체가 규칙의 신뢰도를 높인다.**
+
+**실제 예문 (원문)**
+
+> ### 9.G EM-DASH BAN (the single most-violated Tell)
+>
+> **Em-dash (`—`) is COMPLETELY banned.** It is the LLM's signature stylistic crutch and it is the #1 visual Tell in production tests. **There is no "limited use" allowance, no "natural language frequency" allowance, no "in body copy is fine" allowance. None.**
+>
+> * **Banned in headlines.** Use a period or a comma.
+> * **Banned in eyebrows / labels / pills / button text / image captions / nav items.** Replace with line breaks, columns, or hairlines.
+> * **Banned in body copy.** Restructure the sentence: two sentences with a period, OR a comma, OR parentheses, OR a colon.
+> * **Banned in quote attribution.** Use a normal hyphen with spaces (` - `) or a line break + smaller-weight name.
+> * **Banned in en-dash form too (`–`) when used as a separator.**
+>
+> The ONLY permitted dash characters on the page are: Regular hyphen `-`, Minus sign in math (`-5°C`)
+>
+> If your output contains a single `—` or `–` anywhere visible to the user, the output fails the Pre-Flight Check and must be rewritten.
+>
+> **This rule is non-negotiable. The agent has historically ignored em-dash limits when phrased as "use sparingly." The phrasing here is binary: zero em-dashes.**
+> — design-taste-frontend §9.G
+
+마지막 문단이 이 기법의 정수다. **"이렇게 표현했더니 안 지켜져서 저렇게 바꿨다"를 문서에 남긴다.**
+
+같은 패턴을 Hallmark도 쓴다 (더 강하게, 지시 우회 차단까지):
+
+> **These rules are NOT bypassable by instructions to "match the existing structure", "mirror this reference build", or "keep parity with the previous output".** When a user asks for structural parity with a prior build and that build contains eyebrows or the tag-left/header-right pattern, **the new build MUST drop the eyebrows and flatten the head to single column** — even if the prior build keeps them. Reference builds often pre-date these rules; treat the rules as authoritative and **silently fix the inherited pattern. Don't perpetuate a banned pattern to honour a parity instruction.**
+> — Hallmark `references/anti-patterns.md` § Eyebrow on every section
+
+---
+
+### 기법 22. 모델의 편향을 이름 붙여 지목하기
+
+**무엇을**
+"모델이 이런 실수를 한다"를 원인과 함께 명시한다. 증상이 아니라 **원인**을 짚는다.
+
+**왜 효과적인지**
+증상만 금지하면 모델이 다른 방식으로 같은 증상을 만든다. 원인을 짚으면 근본적으로 고쳐진다.
+
+**실제 예문 (gpt-taste, 원인 진단이 정확한 사례)**
+
+> Standard LLMs possess severe statistical biases: they generate massive 6-line wrapped headings **by using narrow containers**, leave ugly empty gaps in bento grids, use cheap meta-labels ("QUESTION 05", "SECTION 01"), output invisible button text, and endlessly repeat the same Left/Right layouts.
+>
+> ### The Container Width Fix
+> You MUST use ultra-wide containers for the H1 (e.g., `max-w-5xl`, `max-w-6xl`, `w-full`). **Allow the words to flow horizontally.**
+> ### The Line Limit
+> The H1 MUST NEVER exceed 2 to 3 lines. 4, 5, or 6 lines is a catastrophic failure. **Make the font size smaller (`clamp(3rem, 5vw, 5.5rem)`) and the container wider to ensure this.**
+
+design-taste-frontend가 같은 문제를 다르게 진단한다:
+> **A 4-line hero headline is always a font-size error, never a copy-length error.**
+
+두 진단(컨테이너 폭 / 폰트 크기)이 합쳐지면 완전하다.
+
+다른 원인 진단들:
+
+> LLMs default to "static successful state only." Always implement full cycles: Loading / Empty States / Error States / Tactile Feedback.
+> — design-taste-frontend §4.5
+
+> **LLMs are inherently lazy and always pick the first layout option.**
+> — gpt-taste §1
+
+> **LLMs notoriously leave blank, dead cells in CSS grids.** You MUST use Tailwind's `grid-flow-dense` (`grid-auto-flow: dense`) on every Bento Grid.
+> — gpt-taste §4
+
+> The agent's default mental model that "creative brief = serif" is **the single most-tested AI tell in production rounds.**
+> — design-taste-frontend §4.1
+
+---
+
+### 기법 23. 문자열 단위 금지 (Literal string bans)
+
+**무엇을**
+개념이 아니라 **정확한 문자열**을 금지한다. 코드 주석, 산문 표현, 클래스명, hex 값, 폰트명 단위로.
+
+**왜 효과적인지**
+"placeholder를 쓰지 마라"는 모호하다. "`// rest of code`를 쓰지 마라"는 명확하다. 그리고 문자열은 grep 가능하므로 검증도 자동화된다.
+
+**실제 예문**
+
+> **In code blocks:** `// ...`, `// rest of code`, `// implement here`, `// TODO`, `/* ... */`, `// similar to above`, `// continue pattern`, `// add more as needed`, bare `...` standing in for omitted code
+>
+> **In prose:** "Let me know if you want me to continue", "I can provide more details if needed", "for brevity", "the rest follows the same pattern", "similarly for the remaining", "and so on" (when replacing actual content), "I'll leave that as an exercise"
+>
+> **Structural shortcuts:** Outputting a skeleton when the request was for a full implementation. Showing the first and last section while skipping the middle. Replacing repeated logic with one example and a description. Describing what code should do instead of writing it.
+> — full-output-enforcement
+
+카피 클리셰 문자열:
+> - AI copywriting cliches. Never use "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve", "Tapestry", or "In the world of...".
+> - **Exclamation marks in success messages.** Remove them. Be confident, not loud.
+> - **"Oops!" error messages.** Be direct: "Connection failed. Please try again."
+> - **Passive voice.** Use active voice: "We couldn't save your changes" instead of "Mistakes were made."
+> - **Title Case On Every Header.** Use sentence case instead.
+> — redesign-existing-projects
+
+가짜 브랜드명 문자열:
+> Avoid fake brand slop: Acme / Nexus / Flowbit / Quantumly / NovaCore
+> — image-to-code §29
+> Avoid fake brand slop: Acme / NovaCore / Flowbit / Quantix / VeloPay
+> — imagegen-frontend-mobile §21
+
+그리고 대안 제공:
+> **Fix.** Plausible placeholder names reflecting the audience, or pull from a seeded faker. "Maya Okonkwo", "Sam Tan", "Elena Ruiz".
+> **Fix.** Name the thing concretely. If it's a demo, use a domain-specific placeholder — "Maple Weekly", "Ridgeline Inventory" — not abstract startup bingo.
+> — Hallmark `references/anti-patterns.md`
+
+---
+
+### 기법 24. 일관성 잠금 (Consistency locks)
+
+**무엇을**
+페이지 전체에 걸쳐 **한 번 정하면 안 바뀌는 것**을 명시적으로 "Lock"으로 이름 붙인다. 그리고 위반 사례를 구체적으로 든다.
+
+**왜 효과적인지**
+모델은 섹션별로 독립 생성하는 경향이 있어 후반부에서 결정이 흔들린다. Lock을 이름 붙이면 "이건 재결정 대상이 아니다"라는 신호가 된다.
+
+**실제 예문**
+
+> * **COLOR CONSISTENCY LOCK (mandatory):** Once an accent color is chosen for a page, it is used on the WHOLE page. **A warm-grey site does not suddenly get a blue CTA in section 7. A rose-accented site does not get a teal status badge in the footer.** Pick one accent, lock it, audit every component before shipping.
+>
+> * **SHAPE CONSISTENCY LOCK (mandatory):** Pick ONE corner-radius scale for the page and stick to it. Options: all-sharp (radius 0), all-soft (radius 12-16px), all-pill (full radius for interactive). Mixed systems are allowed only when there is a documented rule (e.g. "buttons are full-pill, cards are 16px, inputs are 8px") and that rule is followed everywhere. **Round buttons in a square layout, or square cards on a pill-button page, is broken design.**
+>
+> ### 4.11 Page Theme Lock (Light / Dark Mode Consistency)
+> The page has ONE theme. Sections do not invert.
+> * If the page is dark mode, ALL sections are dark mode. No light-mode-warm-paper section sandwiched between dark sections. **The user must not feel they walked into a different website mid-scroll.**
+> * The exception: if the brief explicitly calls for a "Color Block Story" or "Theme Switch on Scroll" device AND that is a deliberate composition, it is allowed **once per page.**
+> — design-taste-frontend §4.2, §4.4, §4.11
+
+Hallmark의 토큰 잠금:
+> **Locked tokens** — Every colour and font references named CSS custom properties (`var(--color-accent)`). **Inline OKLCH/hex/rgb or font declarations are forbidden.**
+>
+> ### Mid-render token improvisation
+> **Why it fails.** Token discipline is the difference between a system and a freestyle. Once a theme is locked, every colour and every font in the file must reference a named token. **Inline values are how cohesion erodes — by the third edit pass, the page has eight colours instead of three, and the editorial restraint that made the theme work is gone. Audiences don't see the inline value, but they feel the looseness.**
+> **Fix.** If you need a value that doesn't exist as a token, **add it to the token block first** and then reference it.
+
+Lovable의 같은 규칙:
+> **CRITICAL: USE SEMANTIC TOKENS FOR COLORS, GRADIENTS, FONTS, ETC. DO NOT use direct colors like text-white, text-black, bg-white, bg-black, etc. Everything must be themed via the design system**
+> — Lovable Agent Prompt.txt
+
+v0의 같은 규칙:
+> "DO NOT use direct colors like text-white, bg-white, bg-black, etc. Everything must be themed via design tokens"
+> — v0 Prompts and Tools/Prompt.txt
+
+**세 개의 독립적인 프로덕션 시스템이 같은 결론에 도달했다.** 이건 designpaca에 반드시 들어가야 한다.
+
+---
+
+### 기법 25. 범위 밖 선언 (Out of scope + 리디렉션)
+
+**무엇을**
+스킬이 **못 하는 것**을 목록으로 명시하고, 그럴 땐 무엇을 써야 하는지 알려주고, **"명시적으로 그렇게 말하라"**고 지시한다.
+
+**왜 효과적인지**
+스킬은 발동되면 무조건 자기 규칙을 적용하려 든다. 랜딩페이지용 미학 규칙을 데이터 테이블에 적용하면 재앙이다. 범위 선언이 이걸 막는다.
+
+**실제 예문**
+
+> ## 13. OUT OF SCOPE
+> This skill is NOT for:
+> * Dashboards / dense product UI / admin panels (use Fluent, Carbon, Atlassian, or Polaris from Section 2.A).
+> * Data tables (use TanStack Table or AG Grid).
+> * Multi-step forms / wizards.
+> * Code editors (use Monaco / CodeMirror with their official skinning).
+> * Native mobile (use Apple HIG / Material directly).
+> * Realtime collab UIs (presence, cursors, OT-aware - different problem class).
+>
+> If the brief is one of the above, **say so explicitly**, point to the right tool, and only apply this skill's marketing-page / about-page / landing-page parts to the surfaces where they apply.
+> — design-taste-frontend §13
+
+artifact-design의 부드러운 버전:
+> **When it's a UI, not a document.** A dashboard or tool is scanned and operated, not read top-to-bottom, so **the craft shifts from typography to information design.** Surface the summary before the detail; encode state in form as well as number — a pill, a chip, a severity stripe — so what needs attention reads at a glance. Semantic color (good / warning / critical) is separate from the accent hue and doesn't count as your accent.
+
+Hallmark의 스코프 라우팅:
+> **Route to component-scope** if any signal fires:
+> - Brief names a single UI element (button, card, modal, etc.)
+> - Brief is ≤30 words referencing one element
+> - Target file is a single component
+> - User says "just the X," "only the Y," "this one element"
+>
+> **Component-scope differences:** Skips macrostructure, nav/footer archetypes, hero enrichment. **Requires all 8 states: default, hover, focus, active, disabled, loading, error, success.** Emits two files: the component + an 8-state demo wrapper (`.preview.html`).
+
+---
+
+## F. 산출물 구조
+
+### 기법 26. 이식 가능한 design.md 산출 (Portable design system file)
+
+**무엇을**
+스킬이 UI만 만들고 끝나지 않고, **프로젝트 루트에 디자인 시스템 파일을 쓴다.** 다음 실행과 다른 도구가 그 파일을 읽는다.
+
+**왜 효과적인지**
+스킬의 규칙은 일반적이고, 프로젝트의 디자인은 구체적이다. 그 구체적인 것을 파일로 고정하지 않으면 매번 재발명된다. **세션 간 일관성 문제의 근본 해법.**
+
+**실제 예문 (Superdesign의 DESIGN.md 문서, 이 아이디어의 가장 명료한 설명)**
+
+> Coding agents write great code and mediocre interfaces. One reason: **they have no persistent sense of *how this product is supposed to look*.** `AGENTS.md` and `CLAUDE.md` tell an agent how your code works. **A design system file does the same for how your product looks** — colors, typography, spacing, motion, component patterns, and the product context behind them — so every UI the agent ships is consistent with the last one instead of reinventing a generic look each time.
+>
+> **This is the design equivalent of `llms.txt` or `AGENTS.md`: a single, human-readable file an agent reads before it designs.**
+>
+> ## What goes in it
+> A good design system file is **implementable without the codebase** — an agent (or a person) should be able to build on-brand UI from it alone:
+> - **Product context** — what's being built, who it's for, the core value, key user journeys.
+> - **Design tokens** — colors, typography, spacing, radius, shadows.
+> - **Motion** — animation and interaction patterns.
+> - **Components** — the real patterns your product uses, with usage notes.
+>
+> ## Why it matters
+> A design system file is the difference between an agent that produces *default-shadcn-everything* and one that produces UI that looks considered. **Capture it once; every design after that is consistent, on-brand, and faster to ship.**
+> — superdesigndev/superdesign-skill `DESIGN.md`
+
+세 시스템이 같은 패턴을 쓴다:
+- Superdesign: `.superdesign/design-system.md` — "mandatory; setup if missing"
+- Hallmark: `design.md` — "Say `lock the system` to extract into `design.md`" / "`design.md` (locked system—**overrides everything**)"
+- stitch-design-taste: `DESIGN.md` — Google Stitch가 읽을 파일을 생성하는 것이 스킬의 전부
+
+stitch-design-taste가 그 파일의 정확한 템플릿을 제공한다:
+```markdown
+# Design System: [Project Title]
+## 1. Visual Theme & Atmosphere
+## 2. Color Palette & Roles
+- **Canvas White** (#F9FAFB) — Primary background surface
+- **Charcoal Ink** (#18181B) — Primary text, Zinc-950 depth
+- **[Accent Name]** (#XXXXXX) — Single accent for CTAs, active states, focus rings
+## 3. Typography Rules
+## 4. Component Stylings
+## 5. Layout Principles
+## 6. Motion & Interaction
+## 7. Anti-Patterns (Banned)
+```
+
+그리고 그 파일을 잘 쓰는 법:
+> - **Be Descriptive:** "Deep Charcoal Ink (#18181B)" — not just "dark text"
+> - **Be Functional:** Explain what each element is used for
+> - **Be Precise:** Include exact hex codes, rem values, pixel values in parentheses
+> - **Be Opinionated:** This is not a neutral template — it enforces a specific, premium aesthetic
+> - Common Pitfall: Using technical jargon without translation (**"rounded-xl" instead of "generously rounded corners"**)
+
+---
+
+### 기법 27. 사전 스캔 → 발견 사항 인용 출력
+
+**무엇을**
+기존 코드베이스가 있으면 **아무것도 묻기 전에 먼저 읽고**, 무엇을 발견했는지 **파일:줄 인용과 함께** 한 번 출력한다.
+
+**왜 효과적인지**
+기존 시스템을 무시하고 새 미학을 덮어씌우는 것이 리디자인 최악의 실패다. 그리고 "읽었다"를 인용으로 증명하면 사용자가 검증할 수 있다. 캐싱까지 지시하면 반복 스캔 비용도 없앤다.
+
+**실제 예문**
+
+> ### Step 0: Pre-flight Scan
+> **Read existing code *before* asking the user anything.** Check for:
+> - `design.md` (locked system—overrides everything)
+> - Font stack (next/font, @fontsource, Google Fonts, Tailwind config)
+> - Palette (OKLCH/HSL/hex in `:root`, tailwind theme, tokens.json, DTCG)
+> - Microinteraction stance (framer-motion, gsap, motion libraries = motion-on; none = motion-cut)
+> - Spacing scale (Tailwind extend.spacing, CSS `--space-*` pattern)
+> - Framework (Next.js, Astro, Vue, Svelte, Remix, vanilla)
+>
+> **Emit once:** a block with **file:line citations** so the user verifies what was found. **Cache findings in `.hallmark/preflight.json`; re-scan only on user request or when package.json mtimes are newer.**
+> — Hallmark SKILL.md
+
+design-taste-frontend §11.B의 리디자인 감사:
+> Document the current state before proposing changes:
+> * **Brand tokens** - primary / accent colors, type stack, logo treatment, radii.
+> * **Information architecture** - page tree, primary nav, key conversion paths.
+> * **Content blocks** - what exists, what's doing work, what's filler.
+> * **Patterns to preserve** - signature interactions, recognisable hero, copy voice.
+> * **Patterns to retire** - AI-slop tells, broken layouts, dead links, generic stock imagery, perf traps.
+> * **Dial reading of the existing site** - infer current dials. **That's your starting point, not the baseline.**
+> * **SEO baseline** - current ranking pages, meta titles, structured data, OG cards. **SEO migration is the #1 redesign risk.**
+
+artifact-design:
+> **Honor what's already there.** Look for an existing design system first — CLAUDE.md, a tokens or theme file, existing component styles. **When one exists, apply it; everything below fills gaps and never overrides.**
+
+그리고 절대 조용히 바꾸면 안 되는 것:
+> ### 11.F What Never Changes Silently
+> Never modify without explicit user approval:
+> * URL structure / route slugs.
+> * Primary nav labels.
+> * Form field names or order (**breaks analytics + autofill**).
+> * Brand logo or wordmark.
+> * Existing legal / consent / cookie copy.
+> — design-taste-frontend
+
+---
+
+### 기법 28. 캐노니컬 코드 스켈레톤 + Critical points 요약
+
+**무엇을**
+자주 틀리는 패턴은 서술이 아니라 **작동하는 코드**로 제공하고, 바로 뒤에 **"틀리기 쉬운 지점"을 한 줄로** 요약한다. 그리고 체크리스트에서 그 스켈레톤을 참조한다.
+
+**왜 효과적인지**
+GSAP ScrollTrigger의 `start`/`end`/`pin`/`scrub` 조합은 서술로 전달하면 모델이 매번 틀린다. 코드로 주면 안 틀린다. 그리고 Critical points가 있으면 모델이 변형할 때도 무엇을 지켜야 하는지 안다.
+
+**실제 예문**
+
+```tsx
+"use client";
+import { useRef, useEffect } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { useReducedMotion } from "motion/react";
+
+gsap.registerPlugin(ScrollTrigger);
+
+export function HorizontalPan({ children }: { children: React.ReactNode }) {
+  const wrap = useRef<HTMLDivElement>(null);
+  const track = useRef<HTMLDivElement>(null);
+  const reduce = useReducedMotion();
+
+  useEffect(() => {
+    if (reduce || !wrap.current || !track.current) return;
+    const ctx = gsap.context(() => {
+      const distance = track.current!.scrollWidth - window.innerWidth;
+      gsap.to(track.current, {
+        x: -distance,
+        ease: "none",
+        scrollTrigger: {
+          trigger: wrap.current,
+          start: "top top",              // pin starts when section top hits viewport top
+          end: () => `+=${distance}`,    // scroll distance = track width minus viewport
+          pin: true,
+          scrub: 1,
+          invalidateOnRefresh: true,
+        },
+      });
+    }, wrap);
+    return () => ctx.revert();
+  }, [reduce]);
+
+  return (
+    <section ref={wrap} className="relative overflow-hidden">
+      <div ref={track} className="flex h-[100dvh] items-center">{children}</div>
+    </section>
+  );
+}
+```
+> Critical points: `start: "top top"`, `pin: true`, `end: "+=${distance}"` (scroll length = horizontal travel needed), `scrub: 1`. The wrapper is pinned, the inner track slides horizontally as the user scrolls vertically.
+> — design-taste-frontend §5.B
+
+그리고 언제 더 가벼운 것을 쓸지도 명시한다:
+> ### 5.C Scroll-Reveal Stagger - Canonical Skeleton (lighter alternative)
+> For simple "items appear as they enter viewport" (no pinning), prefer Motion's `whileInView` over GSAP - lighter, no ScrollTrigger needed.
+> ...
+> Use this for: feature lists, testimonial grids, logo walls, anything that just needs "enter on scroll." **Save GSAP for actual pin/scrub work.**
+
+체크리스트 연결:
+> - [ ] **GSAP sticky-stack / horizontal-pan** implemented per Section 5.A / 5.B canonical skeleton (`start: "top top"`, `pin: true`, correct scrub)?
+
+---
+
+### 기법 29. 완전 출력 강제 (Anti-truncation)
+
+**무엇을**
+산출물 개수를 먼저 세어 고정하고, 토큰 한계에 도달했을 때의 **정확한 중단 포맷**을 정의한다.
+
+**왜 효과적인지**
+디자인 스킬은 긴 코드를 낸다. 모델은 길어지면 요약하거나 생략한다. 생략된 랜딩페이지는 쓸모가 없다.
+
+**실제 예문**
+
+> ## Execution Process
+> 1. **Scope** — Read the full request. Count how many distinct deliverables are expected (files, functions, sections, answers). **Lock that number.**
+> 2. **Build** — Generate every deliverable completely. No partial drafts, no "you can extend this later."
+> 3. **Cross-check** — Before output, re-read the original request. **Compare your deliverable count against the scope count.** If anything is missing, add it before responding.
+>
+> ## Handling Long Outputs
+> When a response approaches the token limit:
+> - Do not compress remaining sections to squeeze them in.
+> - Do not skip ahead to a conclusion.
+> - Write at full quality up to a clean breakpoint (end of a function, end of a file, end of a section).
+> - End with:
+> ```
+> [PAUSED — X of Y complete. Send "continue" to resume from: next section name]
+> ```
+> On "continue", pick up exactly where you stopped. **No recap, no repetition.**
+> — full-output-enforcement
+
+imagegen-frontend-web의 같은 문제 해법:
+> If you can only render one image at a time, output them sequentially in the same response, one after the other, until every section has its own image. **Announce each one ("Section 1 of 8: Hero", "Section 2 of 8: Trust bar", etc.).**
+
+---
+
+## G. 정직성과 자산
+
+### 기법 30. 정직성 규칙 별도 섹션
+
+**무엇을**
+"만들어내지 마라" 류의 규칙을 산발적으로 두지 않고 **하나의 섹션으로 모은다.**
+
+**왜 효과적인지**
+숫자 조작, 가짜 후기, 가짜 로고는 미학 문제가 아니라 신뢰 문제다. 같은 카테고리로 묶으면 모델이 그 심각도를 인지한다.
+
+**실제 예문**
+
+> ## Honesty Rules
+> - Never invent an edge. If unsure, use AMBIGUOUS.
+> - Never skip the corpus check warning.
+> - Always show token cost in the report.
+> - Never hide cohesion scores behind symbols - show the raw number.
+> - Never run HTML viz on a graph with more than 5,000 nodes without warning the user.
+> — graphify
+
+> **Honest copy only** — Never invent metrics, testimonials, logos, or case-study counts. Use real numbers, placeholders (**grey blocks labeled "metric to confirm"**), or different structure.
+> — Hallmark, Six Universal Disciplines
+
+design-taste-frontend의 숫자 규칙 (3분류):
+> * **Fake-precise numbers are flagged.** Numbers like `92%`, `4.1×`, `48k`, `5.8 mm`, `13.4 lb` either:
+>   - Come from real data (brief, brand guidelines, public metrics) - **fine**
+>   - Are explicitly labeled as mock (`<!-- mock -->`, "example", "sample data") - **fine**
+>   - Are AI-invented spec aesthetics - **banned**. Don't fake engineering precision the brand doesn't claim.
+
+---
+
+### 기법 31. 자산 전략 우선순위 + 마지막 수단은 정직한 실패
+
+**무엇을**
+이미지·로고 조달 방법을 우선순위로 나열하고, **아무것도 안 되면 가짜를 만들지 말고 사용자에게 요구**하게 한다.
+
+**왜 효과적인지**
+모델은 이미지가 없으면 div로 가짜 스크린샷을 만든다. 이게 #1 AI 텔이다. 명시적인 "마지막 수단"이 없으면 모델은 반드시 가짜를 만든다.
+
+**실제 예문 (원문)**
+
+> **Priority order for visual assets:**
+> 1. **Image-generation tool first.** If ANY image-gen tool is available in the environment you MUST use it to create section-specific assets. **Do not skip this step because hand-rolled CSS feels faster.**
+> 2. **Real web images second.** `https://picsum.photos/seed/{descriptive-seed}/{w}/{h}` (seed should describe the section, e.g. `marrow-cookware-kitchen`)
+> 3. **Last resort: tell the user.** If neither is possible, do NOT fill the page with hand-rolled SVG illustrations or div-based "fake screenshots." Instead, leave clearly-labeled placeholder slots (`<!-- TODO: hero product photo, 1600x1200 -->`) and at the end of the response say: *"This page needs real images at: \[list of placements\]. Please generate or provide them."*
+>
+> **Even minimalist sites need real images.** A pure-text page is not minimalism. **It is incomplete work.**
+>
+> **Div-based fake screenshots are banned.** A "hand-built product preview" rendered with `<div>` rectangles, fake task lists, fake dashboards, fake terminal windows is a Tell.
+>
+> **Hero needs a real visual.** Text + gradient blob is not a hero - it's a placeholder.
+> — design-taste-frontend §4.8
+
+로고 조달:
+> **Real company logos for social proof.** When the brief calls for a "Trusted by" logo wall, do NOT default to plain text wordmarks. Use real SVG logos:
+> * **Source: Simple Icons** (`https://cdn.simpleicons.org/{slug}/ffffff` for any color)
+> * **Alternative: devicon** for tech-stack logos
+> * **Make-up the brand name? Then make-up an SVG mark too.** Generate a simple monogram (one letter in a circle, two-letter ligature, abstract glyph) rendered as an inline `<svg>` matching the page style.
+> * **LOGO-ONLY rule (mandatory):** logo wall = logos and nothing else. Do NOT print industry / category labels below each logo (no `Vercel` + `hosting`, no `Stripe` + `payments`). **The logo is the credibility, the label adds nothing the user does not already know.**
+
+Hallmark의 계층형 자산 전략:
+> If enrichment is needed, pick a tier:
+> 1. **Tier A:** Pure CSS art
+> 2. **Tier B:** Hand-built SVG
+> 3. **Tier C:** Generated still (Nanobanana, Recraft)
+> 4. **Tier D:** Library + customisation
+> 5. **Tier E (last resort):** Lottie for complex character motion only
+>
+> **Most pages don't need imagery—the strongest hero is often typographic only.** Run the image-need table. **Default is typography-only.**
+> **Never ship invented stock photos as if final.**
+
+**흥미로운 대립**: design-taste-frontend는 "텍스트만 있는 페이지는 미완성"이라고 하고, Hallmark는 "대부분의 페이지는 이미지가 필요 없다"고 한다. 둘 다 맞다. 차이는 **환경에 이미지 생성 도구가 있느냐**다. designpaca는 이 분기를 명시해야 한다.
+
+---
+
+### 기법 32. 카피를 디자인 재료로 다루기
+
+**무엇을**
+문구 작성 규칙을 별도 섹션으로 두고, **출력 전 모든 가시 문자열을 다시 읽는 자가 감사**를 강제한다.
+
+**왜 효과적인지**
+AI가 쓴 "귀엽지만 말이 안 되는" 문구는 디자인 품질을 통째로 무너뜨린다. 그리고 이건 모델이 스스로 잘 못 잡는다. 명시적 재읽기 단계가 필요하다.
+
+**실제 예문**
+
+> * **COPY SELF-AUDIT (mandatory before ship):** Before declaring any task done, **re-read every visible string on the page** (headlines, subheads, eyebrows, button labels, body copy, captions, alt text, footer text, error messages). Flag any string that is:
+>   - **Grammatically broken** ("free on its past", "two plans but one is honest", "to put it on the table" out of context)
+>   - **Has unclear referents** ("we plan to stay that way" without prior context)
+>   - **Sounds like AI hallucination** (cute-but-wrong wordplay, forced metaphors that don't track, "elegant nothing" phrases)
+>   - **Reads like an LLM trying to sound thoughtful** (passive-aggressive humility, fake-craftsman labels, mock-poetic micro-meta)
+>
+>   Rewrite every flagged string. If unsure whether a string makes sense, replace it with a plain functional sentence. **AI-generated cute copy is worse than boring copy.**
+>
+> * **One copy register per page.** Don't mix technical mono ("47 tasks · 0.6 ctx-switches/day"), editorial prose, and marketing punch in the same composition unless the brand voice explicitly calls for it.
+> — design-taste-frontend §4.9
+
+CTA 의도 중복 금지:
+> * **NO DUPLICATE CTA INTENT (mandatory):** Two CTAs with the same intent on one page is a Pre-Flight Fail. Examples of same intent: "Get in touch" + "Contact us" + "Let's talk" + "Start a project" + "Reach out" = all "contact" intent → **pick ONE label and use it everywhere on the page (nav, hero, footer).** Same for "Try free" + "Get started" + "Sign up free" and "View work" + "See selected work" + "Browse projects". **One label per intent.**
+
+Anthropic 공식의 카피 원칙 (가장 밀도 높음):
+> Words appear in a design for one reason: to make it easier to understand, and therefore easier to use. **They are design material, not decoration.**
+>
+> Write from the end user's side of the screen. Name things by what people control and recognize, never by how the system is built. **A person manages notifications, not webhook config.** Describe what something does in plain terms rather than selling it. **Being specific is always better than being clever.**
+>
+> Use active voice as default. A control should say exactly what happens when it's used: **"Save changes," not "Submit."** An action keeps the same name through the whole flow, so **the button that says "Publish" produces a toast that says "Published."** The vocabulary of an interface is the signposting for someone navigating the product.
+>
+> Treat failure and emptiness as moments for direction, not mood. **Errors don't apologize, and they are never vague about what happened. An empty screen is an invitation to act.**
+>
+> Let each element do exactly one job. **A label labels, an example demonstrates, and nothing quietly does double duty.**
+> — frontend-design (Anthropic 공식)
+
+---
+
+## H. 역할 부여와 절제
+
+### 기법 33. 구체적 상황이 담긴 역할 부여
+
+**무엇을**
+"당신은 엘리트 디자이너다" 같은 형용사 나열 대신, **구체적인 상황과 이해관계**를 준다.
+
+**왜 효과적인지**
+"elite", "award-winning", "$150k agency" 같은 형용사는 모델에게 정보를 주지 않는다. "이 클라이언트는 이미 템플릿 같은 제안을 거절했다"는 정보를 준다. 그것이 이후 모든 판단의 제약이 된다.
+
+**실제 예문 대비**
+
+약한 버전:
+> **Persona:** `Vanguard_UI_Architect`
+> **Objective:** You engineer $150k+ agency-level digital experiences, not just websites. Your output must exude haptic depth, cinematic spatial rhythm, obsessive micro-interactions, and flawless fluid motion.
+> — high-end-visual-design
+
+> You are an elite, award-winning frontend design engineer.
+> — gpt-taste
+
+강한 버전:
+> Approach this as the design lead at a small studio known for giving every client a visual identity that could not be mistaken for anyone else's. **This client has already rejected proposals that felt templated, and is paying for a distinctive point of view:** make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and **take one real aesthetic risk you can justify.**
+> — frontend-design (Anthropic 공식)
+
+artifact-design의 변주 (다재다능함 강조):
+> Approach this as the design lead at a small studio known for **their versatility**, giving every client a visual identity **pitched at the treatment the task actually calls for.**
+
+**차이**: "elite"는 모델에게 "화려하게 하라"로 읽힌다. "이미 템플릿 제안을 거절한 클라이언트"는 "특정성을 증명하라"로 읽힌다. 후자가 실제로 원하는 것이다.
+
+---
+
+### 기법 34. 대담함은 한 곳에만 (Spend your boldness in one place)
+
+**무엇을**
+"모든 것을 화려하게"가 아니라 **하나의 시그니처 요소에 모든 대담함을 집중하고 나머지는 조용히** 하라고 지시한다.
+
+**왜 효과적인지**
+"창의적으로 하라"는 지시는 모든 섹션에 장식을 붙이는 결과를 낳는다. 그게 슬롭이다. 예산 은유("boldness를 한 곳에 쓴다")가 이 실패를 막는다.
+
+**실제 예문**
+
+> **Spend your boldness in one place.** Let the signature element be the one memorable thing, keep everything around it quiet and disciplined, and cut any decoration that does not serve the brief. **Not taking a risk can be a risk itself!** Build to a quality floor without announcing it: responsive down to mobile, visible keyboard focus, reduced motion respected. Critique your own work as you build, taking screenshots if your environment supports it – **a picture is worth 1000 tokens.**
+>
+> **Consider Chanel's advice: before leaving the house, take a look in the mirror and remove one accessory.**
+> — frontend-design (Anthropic 공식)
+
+artifact-design의 색상 버전:
+> Spend your boldness in one place; keep everything around it quiet. **If the accent fights the ground, shift it toward analogous or drop saturation rather than replacing it.**
+
+Hallmark의 구현 가능한 버전 (액센트 면적 상한):
+> 23. Does the accent colour cover more than ~5 % of any single viewport?
+
+imagegen-frontend-web의 구현 가능한 버전:
+> ### Second-Read Moment
+> **Pick exactly 1** unobvious but legible motif and place it deliberately, **once across the page**.
+> **Avoid gimmick-for-gimmick: the moment must aid scan order or brand recall.**
+
+**"5% 상한"과 "정확히 1개"가 "한 곳에만"을 검증 가능하게 만든 것.**
+
+---
+
+### 기법 35. 복잡도를 비전에 맞추기
+
+**무엇을**
+"미니멀 = 쉬움"이라는 오해를 명시적으로 교정한다. 방향에 따라 필요한 실행 정밀도가 다르다고 말한다.
+
+**왜 효과적인지**
+모델은 "미니멀하게"를 들으면 요소를 지우고 끝낸다. 그건 미니멀이 아니라 미완성이다.
+
+**실제 예문**
+
+> **Match complexity to the vision.** Maximalist directions need elaborate execution; **minimal directions need precision in spacing, type, and detail. Elegance is executing the chosen vision well.**
+> — frontend-design (Anthropic 공식)
+
+> ## 25. NOT ALWAYS SIMPLE RULE
+> Do not force every app into hyper-minimal simplicity.
+> **Simplicity is not the goal by itself. Cleanliness is the goal.**
+>
+> This means: a screen may be rich, layered, and expressive **if it remains readable**. A flow may have stronger visuals, texture, and more atmosphere **if it stays structured**.
+>
+> Allowed: sophisticated layering / controlled visual depth / richer compositions / stronger image presence / decorative accents **with purpose** / multiple visual zones within a screen
+> Not allowed: noisy complexity / **clutter disguised as creativity** / random decorative overload / muddy hierarchy / unreadable interfaces
+>
+> The rule is: **not always simple, always clean**
+> — imagegen-frontend-mobile §25
+
+> **Mini does not mean weak — it means confident restraint.**
+> — imagegen-frontend-web §2 (Hero Scale)
+
+---
+
+### 기법 36. 트리트먼트 보정 (Calibrate the treatment)
+
+**무엇을**
+"디자인할지 말지"가 아니라 **"어느 정도의 트리트먼트가 맞는지"**를 먼저 판단하게 한다. 그리고 판단이 안 서면 어느 쪽으로 기울지도 알려준다.
+
+**왜 효과적인지**
+디자인 스킬의 두 번째로 큰 실패는 **과잉 디자인**이다. 메모에 거대한 히어로를 붙이는 것. 트리트먼트 축이 없으면 스킬은 항상 최대치로 간다.
+
+**실제 예문 (artifact-design, 이 문제의 가장 정확한 처방)**
+
+> ## Read the request first
+> **Calibrate treatment, not whether to design.** A doc deserves the same craft as a landing page — **what changes is the treatment that craft is delivered in.**
+>
+> Many requests call for a more utilitarian treatment: a plan, a memo, a demo. Make it polished: include real typographic hierarchy, considered spacing, and a proper palette, **but avoid over-designing. Most pages do not need a flashy, gigantic hero.** Keep flourishes tasteful and limited.
+>
+> Some requests call for an editorial treatment: a landing page, a game, an app or tool they'll keep or share.
+>
+> **When unsure: a well-composed page is never the wrong answer; an over-designed visual identity sometimes is.**
+>
+> Fundamentals below apply to everything. **The editorial process after that runs only when the read above says so.**
+
+**"Fundamentals for every artifact" + "When the request is editorial" 2계층 구조**가 핵심이다. 기본기는 항상, 대담함은 조건부.
+
+---
+
+## I. 실무 함정 (모델이 반복하는 실제 버그)
+
+여러 소스에서 반복 등장하는, **미학이 아니라 실제로 깨지는** 항목들. designpaca에 반드시 들어가야 한다.
+
+### 기법 37. 반복 관측된 렌더링 버그 목록화
+
+**실제 예문 모음 (출처 병기)**
+
+**뷰포트:**
+> **Viewport Stability:** NEVER use `h-screen` for full-height Hero sections. ALWAYS use `min-h-[100dvh]` to prevent layout jumping on mobile (iOS Safari address bar).
+> — design-taste-frontend §3.E / high-end-visual-design §3 / stitch-design-taste §6 (세 스킬 공통)
+
+**그리드:**
+> **Grid over Flex-Math:** NEVER use complex flexbox percentage math (`w-[calc(33%-1rem)]`). ALWAYS use CSS Grid (`grid grid-cols-1 md:grid-cols-3 gap-6`).
+> — design-taste-frontend §3.E
+
+> 50. **Image-bearing grid track without `minmax(0, 1fr)`.** Does any `grid-template-columns` render an `<img>` inside a plain `1fr` track?
+> — Hallmark gate 50
+
+**긴 단어 오버플로:**
+> 51. **Display headers without long-word wrap.** Does any display-size text lack `overflow-wrap: anywhere; min-width: 0`?
+> — Hallmark gate 51
+
+> Non-negotiable: no horizontal scroll, no two-line clickable text, proper grid tracks with `minmax(0, 1fr)`, **headers wrap via `overflow-wrap: anywhere`**
+> — Hallmark, Six Universal Disciplines
+
+**가로 스크롤:**
+> **Horizontal Scroll Bug:** Wrap the entire page in `<main className="overflow-x-hidden w-full max-w-full">` to absolutely prevent horizontal scrollbars caused by off-screen animations.
+> — gpt-taste §7
+
+> **NO 100vw widths.** `width: 100vw` on anything. **Breaks on scrollbar-visible desktops.** Fix: `width: 100%` with container padding.
+> — Hallmark anti-patterns
+
+**스크롤 리스너:**
+> * **`window.addEventListener("scroll", ...)`** is banned. It runs on every scroll frame, jank-prone, no batching. Use Motion's `useScroll()`, GSAP's `ScrollTrigger`, IntersectionObserver, or CSS `scroll-driven animations` (`animation-timeline: view()`).
+> * **Custom scroll progress calculations using `window.scrollY`** in React state. Same reason. Re-renders on every frame.
+> * **`requestAnimationFrame` loops that touch React state.** Use motion values (`useMotionValue` + `useTransform`) instead.
+> — design-taste-frontend §5.D
+
+> **NEVER** use `useState` to track continuous values driven by user input (mouse position, scroll progress, pointer physics, magnetic hover). ... **`useState` re-renders the React tree on every change and collapses on mobile.**
+> — design-taste-frontend §3.B
+
+**GPU / 페인트:**
+> Animate ONLY `transform` and `opacity`. Never animate `top`, `left`, `width`, `height`.
+> — 거의 모든 스킬 공통
+
+> **Blur Constraints:** Apply `backdrop-blur` only to fixed or sticky elements (navbars, overlays). **Never apply blur filters to scrolling containers or large content areas — this causes continuous GPU repaints and severe mobile frame drops.**
+> **Grain/Noise Overlays:** Apply noise textures exclusively to fixed, `pointer-events-none` pseudo-elements. **Never attach them to scrolling containers.**
+> — high-end-visual-design §6
+
+**sticky 충돌:**
+> 56. **Sticky element at `top: 0` below a sticky page-level nav.** Are there two sticky-at-top-0 elements on the page? **Auto-fail.**
+> — Hallmark gate 56
+
+**CSS 특이성:**
+> When writing the code, be careful of structuring your CSS selector specificities. **It's easy to generate CSS classes that cancel each other out (especially with a type-based selector like `.section` and a element-based selector like `.cta`). This can happen often with paddings/margins between sections.**
+> — frontend-design (Anthropic 공식)
+
+**마진 붕괴:**
+> **Let layout do the spacing.** Lay out sibling groups with flex or grid and `gap`, **not per-element margins that silently collapse or double.** Wide content — tables, code, diagrams — gets `overflow-x: auto` on its own container so the page body never scrolls sideways.
+> — artifact-design
+
+**다크모드 3상태 버그:**
+> a color whose only definition sits behind `[data-theme]` never applies in the un-stamped state, and the page renders one theme's text on the other theme's ground. ... `body` must set an explicit `background` from a token — **a transparent body silently borrows the host's ground.** Before publishing, **scan the stylesheet for any color declared only inside a media or `[data-theme]` block — that is the classic unreadable-artifact bug.**
+> — artifact-design
+
+**포커스 링:**
+> 15. Does the focus ring transition into existence (fade in)?
+> **Fix.** Focus rings appear instantly. Always. Don't transition `outline` or `box-shadow` when the element gains focus.
+> — Hallmark gate 15 + anti-patterns
+
+**CTA 줄바꿈:**
+> * **CTA BUTTON WRAP BAN (mandatory):** Button text MUST fit on one line at desktop. If a label like "VIEW SELECTED WORK" wraps to 2 or 3 lines, the button is broken. Fix by EITHER shortening the label (**3 words max for primary CTAs, ideally 1-2**) OR widening the button.
+> — design-taste-frontend §4.5
+
+> **Fix.** In order of preference: (1) shorten the label — *"Get started free" → "Start free"*; *"Read the documentation" → "Read docs"*. **Most CTA labels are too long.** (2) Set `white-space: nowrap` on the affordance and let the parent flex container reflow. (3) Drop a non-essential nav item at narrow widths. (4) Collapse the nav into a sheet/menu. ***Never* let a primary CTA or nav link wrap.**
+> — Hallmark anti-patterns
+
+**이탤릭 디센더 클리핑:**
+> * **ITALIC DESCENDER CLEARANCE (mandatory):** When italic is used in display type and the word contains a descender letter (`y g j p q`), `leading-[1]` or `leading-none` will clip the descender. Use `leading-[1.1]` minimum and add `pb-1` or `mb-1` reserve on the wrapping element.
+> — design-taste-frontend §4.1
+
+**전각 대문자 행간:**
+> 55. **All-caps display heads with line-height < 1.0.** Does any display-size element declare both `text-transform: uppercase` AND line-height below 1.0?
+> — Hallmark gate 55
+
+**의존성 환각:**
+> **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library, you MUST check `package.json`. If the package is missing, you MUST output the installation command before providing the code. **Never** assume a library exists.
+> — design-taste-frontend §3.F / v1 §2
+
+> **Import hallucinations.** Check that every import actually exists in `package.json` or the project dependencies.
+> — redesign-existing-projects
+
+**useEffect 정리:**
+> - [ ] **`useEffect` animations** have strict cleanup functions?
+> — design-taste-frontend §14
+
+---
+
+## J. 기법 우선순위 (designpaca 채택 관점)
+
+효과 대비 토큰 비용 기준으로 등급을 매긴다.
+
+### S급 — 반드시 채택
+
+| # | 기법 | 이유 |
+|---|---|---|
+| 1 | Description 3-part (용도+트리거+배제) | 스킬이 발동 안 되면 나머지가 전부 무의미 |
+| 3 | Progressive Disclosure 3계층 | 본문 500줄 제약 + 컴팩션 5K 생존 문제의 유일한 해법 |
+| 5 | HARD RULE 선두 배치 | 컴팩션 생존 + lost-in-the-middle 회피 |
+| 6 | Design Read 한 줄 선언 | 브리프 무시가 나쁜 디자인의 1번 원인 |
+| 14 | 기계적 카운트 규칙 | 주관을 검증 가능하게 만드는 유일한 방법 |
+| 19 | Why + Fix 3단 구조 | 이유 없는 규칙은 경계 판단 불가 |
+| 20 | 오버라이드 경로 | 탈출구 없는 금지는 전체 무시로 이어짐 |
+| 24 | 일관성 잠금 (토큰/색/반경/테마) | v0·Lovable·Hallmark 3사가 독립적으로 도달한 결론 |
+| 26 | 이식 가능한 design.md 산출 | 세션 간 일관성의 근본 해법 |
+| 34 | 대담함은 한 곳에만 | "창의적으로"의 실패를 막는 유일한 프레이밍 |
+| 36 | 트리트먼트 보정 | 과잉 디자인이 두 번째로 큰 실패 |
+| 37 | 실무 렌더링 버그 목록 | 미학과 무관하게 실제로 깨지는 것들 |
+
+### A급 — 채택 권장
+
+| # | 기법 | 조건 |
+|---|---|---|
+| 4 | 인덱스-후-선택 | 테마/레이아웃 카탈로그를 둘 경우 필수 |
+| 8 | 다이얼 시스템 | 3개까지만. 9개는 과함 |
+| 10 | 기본값 명명 지목 | 최신성 유지 필요 (기본값은 변한다) |
+| 11 | 조합 변형 엔진 | 축 5~7개가 적정 |
+| 12 | 프로젝트 로그 파일 | 파일 쓰기 권한 필요 |
+| 13 | 명시적 선택 출력 | 프리뷰 블록 형태 권장 |
+| 15 | 예/아니오 게이트 | 20~30개가 현실적. 58개는 과함 |
+| 18 | 절차 순서 + 이유 | 저비용 고효과 |
+| 25 | 범위 밖 선언 | 스킬 오남용 방지 |
+| 27 | 사전 스캔 + 인용 출력 | 리디자인 모드 필수 |
+| 30 | 정직성 규칙 섹션 | 짧고 효과 큼 |
+| 31 | 자산 전략 우선순위 | 환경 분기 명시 필요 |
+| 32 | 카피 자가 감사 | 저비용 고효과 |
+
+### B급 — 조건부
+
+| # | 기법 | 유보 사유 |
+|---|---|---|
+| 2 | "Use when" 시작 강제 | 스타일 선택 문제. 3인칭은 필수, "Use when"은 선택 |
+| 9 | 디자인 시스템 매핑 | 부록 분량이 크다. references/로 분리 필요 |
+| 16 | 6축 자기 채점 | 게이트와 중복. 둘 중 하나만 |
+| 17 | 검증 스크립트 번들 | 색 대비 검증에 한해 가치 큼. 그 외는 과잉 |
+| 21 | 완화 표현 폐기 기록 | 실측 데이터가 있을 때만 정직하게 쓸 수 있음 |
+| 28 | 코드 스켈레톤 | 스택 고정 위험. 프레임워크 불가지론과 충돌 |
+| 29 | 완전 출력 강제 | 별도 스킬로 분리하는 게 나음 |
+| 33 | 구체적 역할 부여 | 필수지만 짧게. 형용사 나열은 역효과 |
+
+### 채택 안 함
+
+| 기법 | 사유 |
+|---|---|
+| 가짜 Python RNG (gpt-taste) | 난수가 실제로 생성되지 않는다. 같은 프롬프트 → 같은 결과. 기법 13(명시적 선택 출력)이 같은 효과를 정직하게 낸다 |
+| 세션 간 회전 규칙 (파일 없이) | 상태 없이 실행 불가. 기법 12로 대체 |
+| 다이얼 9개 (image-to-code) | 인지 부하 대비 효과 없음 |
+| 단일 미학 강제 (minimalist-ui / ibu / hevd 방식) | designpaca는 여러 방향을 다뤄야 함. 테마 파일로 흡수 |
+| Pre-Flight 체크박스 60개 | 정직한 체크가 불가능한 분량. 티어링 필요 |
diff --git a/research/skills/03-format-specs.md b/research/skills/03-format-specs.md
new file mode 100644
index 0000000..37e0916
--- /dev/null
+++ b/research/skills/03-format-specs.md
@@ -0,0 +1,632 @@
+# 03. 포맷 스펙과 변환 어댑터 설계
+
+작성일: 2026-08-20
+목적: designpaca를 Claude Code / Codex / Cursor(+ Windsurf, VS Code Copilot)에서 동일하게 동작시키기 위한 정확한 포맷 스펙과 변환 시 주의점.
+
+**중요한 전제 변화**: 2026년 8월 현재, **Cursor와 Codex 모두 Agent Skills 표준을 네이티브 지원한다.** 따라서 "SKILL.md를 .mdc로 변환"하는 어댑터는 더 이상 1순위가 아니다. 1순위는 **하나의 SKILL.md를 세 도구가 모두 읽을 수 있는 위치에 두는 것**이다. 변환 어댑터는 레거시 경로(`.cursor/rules/*.mdc`, `AGENTS.md`) 지원용으로 남는다.
+
+---
+
+## 1. Agent Skills 오픈 표준 (모든 도구의 공통 분모)
+
+출처: https://agentskills.io/specification (직접 fetch)
+
+### 1.1 디렉터리 구조
+
+```
+skill-name/
+├── SKILL.md          # Required: metadata + instructions
+├── scripts/          # Optional: executable code
+├── references/       # Optional: documentation
+├── assets/           # Optional: templates, resources
+└── ...               # Any additional files or directories
+```
+
+### 1.2 프론트매터 — 허용 필드 6개 전부
+
+| Field | Required | Constraints (원문) |
+|---|---|---|
+| `name` | Yes | "Max 64 characters. Lowercase letters, numbers, and hyphens only. Must not start or end with a hyphen." |
+| `description` | Yes | "Max 1024 characters. Non-empty. Describes what the skill does and when to use it." |
+| `license` | No | "License name or reference to a bundled license file." |
+| `compatibility` | No | "Max 500 characters. Indicates environment requirements (intended product, system packages, network access, etc.)." |
+| `metadata` | No | "Arbitrary key-value mapping for additional metadata (a map from string keys to string values)." |
+| `allowed-tools` | No | "Space-separated string of pre-approved tools the skill may use. **(Experimental)**" |
+
+### 1.3 `name` 상세 규칙 (원문)
+
+> * Must be 1-64 characters
+> * May only contain unicode lowercase alphanumeric characters (`a-z`, `0-9`) and hyphens (`-`)
+> * Must not start or end with a hyphen (`-`)
+> * **Must not contain consecutive hyphens (`--`)**
+> * **Must match the parent directory name**
+
+무효 예시:
+```yaml
+name: PDF-Processing  # uppercase not allowed
+name: -pdf            # cannot start with hyphen
+name: pdf--processing # consecutive hyphens not allowed
+```
+
+Anthropic 플랫폼 문서는 여기에 두 가지를 더 추가한다:
+
+> `name`: ... **Cannot contain XML tags. Cannot contain reserved words: "anthropic", "claude"**
+> `description`: ... **Cannot contain XML tags**
+> — platform.claude.com Skill authoring best practices
+
+**→ designpaca 결론**: `name: designpaca`. 예약어 없음, 하이픈 없음, 소문자만. 디렉터리명도 `designpaca`여야 한다.
+
+### 1.4 Progressive Disclosure 3계층 (원문)
+
+> 1. **Metadata** (~100 tokens): The `name` and `description` fields are loaded at startup for all skills
+> 2. **Instructions** (< 5000 tokens recommended): The full `SKILL.md` body is loaded when the skill is activated
+> 3. **Resources** (as needed): Files (e.g. those in `scripts/`, `references/`, or `assets/`) are loaded only when required
+>
+> **Keep your main `SKILL.md` under 500 lines.** Move detailed reference material to separate files.
+
+### 1.5 파일 참조 규칙 (원문)
+
+> When referencing other files in your skill, use **relative paths from the skill root**:
+> ```markdown
+> See [the reference guide](references/REFERENCE.md) for details.
+> Run the extraction script: scripts/extract.py
+> ```
+> **Keep file references one level deep from `SKILL.md`. Avoid deeply nested reference chains.**
+
+Anthropic이 이유를 설명한다:
+
+> Claude may partially read files when they're referenced from other referenced files. When encountering nested references, **Claude might use commands like `head -100` to preview content rather than reading entire files, resulting in incomplete information.**
+
+그리고 100줄 초과 참조 파일에는 목차를 넣으라고 한다:
+
+> For reference files longer than 100 lines, include a table of contents at the top. **This ensures Claude can see the full scope of available information even when previewing with partial reads.**
+
+### 1.6 검증 도구
+
+> Use the [skills-ref](https://github.com/agentskills/agentskills/tree/main/skills-ref) reference library to validate your skills:
+> ```bash
+> skills-ref validate ./my-skill
+> ```
+
+**→ designpaca는 이 검증기를 CI에 걸어야 한다.**
+
+---
+
+## 2. Claude Code SKILL.md
+
+출처: https://code.claude.com/docs/en/skills (직접 fetch)
+
+### 2.1 설치 위치와 우선순위
+
+| Location | Path | Applies to |
+|---|---|---|
+| Enterprise | managed settings 참조 | 조직 전체 |
+| Personal | `~/.claude/skills/<skill-name>/SKILL.md` | 모든 프로젝트 |
+| Project | `.claude/skills/<skill-name>/SKILL.md` | 해당 프로젝트만 |
+| Plugin | `<plugin>/skills/<skill-name>/SKILL.md` | 플러그인 활성 범위 |
+
+이름 충돌 해소 순서 (원문):
+
+> * Across levels, **enterprise overrides personal, and personal overrides project.**
+> * A skill at any of these levels also overrides a bundled skill with the same name, **but not the bundled skill's aliases.**
+> * Plugin skills use a `plugin-name:skill-name` namespace, so they can't conflict with other levels.
+> * If you have files in `.claude/commands/`, ... **if a skill and a command share the same name, the skill takes precedence.**
+
+**중첩 스킬** (모노레포용):
+
+> Skills also load from nested `.claude/skills/` directories below your working directory. ... The nested one appears under a directory-qualified name, `apps/web:deploy`.
+> **Skills in nested `.claude/skills/` directories below your starting directory aren't loaded at startup.** They load the first time Claude reads or edits a file inside that subdirectory.
+
+**심링크 지원** (중요):
+
+> A `<skill-name>` entry in the enterprise, personal, or project locations **can be a symlink to a directory elsewhere on disk.** Claude Code follows the symlink and reads `SKILL.md` from the target directory, and **if the same target is reachable from more than one location, Claude Code loads the skill once.**
+
+→ 이 사용자의 환경이 이미 이 방식이다. `~/.claude/skills/design-taste-frontend` → `~/.agents/skills/design-taste-frontend`. **designpaca도 `~/.agents/skills/designpaca/`를 정본으로 두고 심링크하는 것이 옳다.**
+
+### 2.2 프론트매터 전체 필드 (Claude Code 확장 포함)
+
+> All fields are optional. Only `description` is recommended so Claude knows when to use the skill.
+> Boolean fields accept `yes`, `no`, `on`, `off`, `1`, and `0` in any letter case, in addition to `true` and `false`.
+
+| Field | 표준? | 설명 (요약) |
+|---|:-:|---|
+| `name` | O | 스킬 목록 표시명. **개인/프로젝트 스킬에서는 커맨드명을 바꾸지 못한다** (디렉터리명이 커맨드명). 플러그인 스킬에서만 마지막 세그먼트를 결정 |
+| `description` | O | 무엇을 하고 언제 쓰는지. **"the combined `description` and `when_to_use` text is truncated at 1,536 characters in the skill listing"** |
+| `when_to_use` | X | description에 덧붙는 추가 트리거 문구. **1,536자 상한에 함께 포함됨** |
+| `argument-hint` | X | 자동완성 힌트. 예: `[issue-number]` |
+| `arguments` | X | `$name` 치환용 명명 위치 인자 |
+| `disable-model-invocation` | X | `true`면 Claude가 자동 로드 못 함. **"Description not in context"** |
+| `user-invocable` | X | `false`면 `/` 메뉴에서 숨김. Claude만 호출 |
+| `allowed-tools` | O(실험) | 해당 턴 동안 승인 없이 쓸 도구. **"The grant clears when you send your next message"** |
+| `disallowed-tools` | X | 스킬 활성 중 제거할 도구 |
+| `model` | X | 스킬 활성 시 모델 오버라이드 |
+| `effort` | X | `low`/`medium`/`high`/`xhigh`/`max` |
+| `context` | X | `fork` → 포크된 서브에이전트에서 실행 |
+| `agent` | X | `context: fork` 시 서브에이전트 타입 |
+| `background` | X | `context: fork` 시 백그라운드 여부 (기본 `true`) |
+| `hooks` | X | 스킬 호출 시 등록되는 훅 |
+| `paths` | X | 글롭 패턴. **"Claude loads the skill automatically only when working with files matching the patterns"** |
+| `shell` | X | `bash`(기본) 또는 `powershell` |
+| `metadata` | O | 자유 형식 YAML 맵 |
+| `license` | O | Claude Code는 받아들이지만 아무 동작 안 함 |
+| `compatibility` | O | 최대 500자. Claude Code는 받아들이지만 아무 동작 안 함 |
+
+### 2.3 도구 밖으로 나갈 때의 하드 에러 (가장 중요한 제약)
+
+원문:
+
+> Claude Code accepts every field in the table above. **Outside Claude Code, you can use only the fields in the Agent Skills spec:**
+>
+> | Distribution path | Frontmatter fields you can use |
+> |---|---|
+> | Claude Code skills at any level, including plugin skills | Every field in the table above |
+> | claude.ai skill uploads, the Skills API, and packaging with `package_skill.py` | `name`, `description`, `license`, `compatibility`, `metadata`, `allowed-tools` |
+>
+> **If you include any field the spec doesn't allow, packaging or upload fails with a hard error instead of ignoring the field:**
+> ```
+> Unexpected key(s) in SKILL.md frontmatter: argument-hint. Allowed properties are: allowed-tools, compatibility, description, license, metadata, name
+> ```
+
+**→ designpaca 결정: 프론트매터는 `name` + `description`만 쓴다.** 크로스툴 휴대성이 목표이므로 확장 필드는 전부 배제. 이는 로컬 커뮤니티 스킬 13개가 이미 도달한 결론과 같다.
+
+(참고: 로컬 `graphify`의 `trigger: /graphify`는 스펙에 없는 필드다. Claude Code는 무시하지만 claude.ai 업로드/패키징 시 위 에러가 난다. designpaca는 이 패턴을 복제하면 안 된다.)
+
+### 2.4 커맨드명이 결정되는 규칙
+
+| Skill location | Command name source | Example |
+|---|---|---|
+| `~/.claude/skills/` 또는 `.claude/skills/` 아래 디렉터리 | **디렉터리명** | `.claude/skills/deploy-staging/SKILL.md` → `/deploy-staging` |
+| 중첩 `.claude/skills/` (이름 충돌 시) | 작업 디렉터리 상대 경로 + 스킬 디렉터리명 | `apps/web/.claude/skills/deploy/` → `/apps/web:deploy` |
+| `.claude/commands/` 아래 파일 | 확장자 뺀 파일명 | `.claude/commands/deploy.md` → `/deploy` |
+| 플러그인 `skills/` 하위 | 프론트매터 `name` 또는 디렉터리명 + 플러그인 네임스페이스 | `my-plugin/skills/review/` → `/my-plugin:review` |
+| 플러그인 루트 `SKILL.md` | 프론트매터 `name` (없으면 플러그인 디렉터리명) | `name: review` → `/my-plugin:review` |
+
+### 2.5 컨텍스트 수명 (설계 제약)
+
+원문 그대로:
+
+> When you or Claude invoke a skill, the rendered `SKILL.md` content enters the conversation as a single message and **stays there for the rest of the session**. ... **Claude Code does not re-read the skill file on later turns.**
+>
+> When Claude re-invokes a skill whose rendered content is identical to the copy already in context, Claude Code adds a short note that the skill is already loaded rather than a second copy.
+>
+> Auto-compaction carries invoked skills forward within a token budget. When the conversation is summarized to free context, Claude Code re-attaches the most recent invocation of each skill after the summary, **keeping the first 5,000 tokens of each. Re-attached skills share a combined budget of 25,000 tokens.**
+>
+> **If a skill seems to stop influencing behavior after the first response, the content is usually still present and the model is choosing other tools or approaches.** Strengthen the skill's `description` and instructions so the model keeps preferring it, or use hooks to enforce behavior deterministically.
+
+**→ 설계 결론 3개**
+1. SKILL.md 본문은 **5,000토큰(약 500줄) 이내**여야 컴팩션 후에도 온전히 살아남는다.
+2. **가장 중요한 규칙은 파일 앞부분**에 있어야 한다.
+3. 여러 스킬을 쓰는 세션에서는 25,000토큰을 나눠 쓰므로, 큰 스킬은 다른 스킬을 밀어낸다.
+
+### 2.6 스킬 목록 예산 (트리거 실패의 숨은 원인)
+
+원문:
+
+> Claude Code loads a listing of skill names and descriptions into context so Claude knows what's available. The listing always contains every skill name, but **if you have many skills, Claude Code shortens descriptions to fit the listing's character budget, which can strip the keywords Claude needs to match your request. The budget scales at 1% of the model's context window.**
+>
+> Run `/doctor` for an estimate of the listing's context cost and its biggest contributors.
+> To raise the budget, set the `skillListingBudgetFraction` setting (e.g. `0.02` = 2%) or the `SLASH_COMMAND_TOOL_CHAR_BUDGET` environment variable.
+
+**→ description을 짧게 유지해야 하는 진짜 이유.** 이 사용자 환경에는 스킬이 40개 이상 있다. 620자 description(imagegen-frontend-web)은 잘려나갈 위험이 크다. **200~350자를 권장.**
+
+### 2.7 프론트매터 파싱 실패 시
+
+> If the frontmatter YAML is malformed, Claude Code loads the skill body with empty metadata, so `/skill-name` still works but Claude has no `description` to match against. Run with `--debug` to see the parse error.
+
+→ 조용히 실패한다. 검증기를 돌려야 하는 이유.
+
+### 2.8 커스텀 커맨드와의 통합
+
+> **Custom commands have been merged into skills.** A file at `.claude/commands/deploy.md` and a skill at `.claude/skills/deploy/SKILL.md` both create `/deploy` and work the same way.
+> Files in `.claude/commands/` support the same frontmatter, **except `name` and `paths`, which Claude Code ignores in a command file.**
+
+---
+
+## 3. Codex (OpenAI) — 두 가지 경로
+
+Codex는 **AGENTS.md**(항상 로드되는 컨텍스트)와 **Agent Skills**(온디맨드 로드) 둘 다 지원한다. 이 둘은 역할이 다르다.
+
+### 3.1 Codex Agent Skills
+
+출처: https://learn.chatgpt.com/docs/build-skills (developers.openai.com/codex/skills 에서 308 리다이렉트)
+
+**스캔 위치 (우선순위 순, 원문 기반)**
+
+| 범위 | 경로 |
+|---|---|
+| Repository | `.agents/skills` — 현재 작업 디렉터리와 상위 폴더들을 repo root까지 |
+| User | `$HOME/.agents/skills` |
+| Admin | `/etc/codex/skills` |
+| System | OpenAI 번들 |
+
+> "If two skills share the same `name`, Codex doesn't merge them; both can appear in skill selectors."
+
+**프론트매터**
+
+```yaml
+---
+name: skill-name
+description: Explain exactly when this skill should and should not trigger.
+---
+```
+
+Codex 문서의 description 지침이 특히 명확하다: **"when this skill should and should not trigger"** — 배제 조건을 스펙 수준에서 요구한다.
+
+**컨텍스트 예산**
+
+> Skills use "progressive disclosure to manage context efficiently." The initial skills list uses at most **"2% of the model's context window, or 8,000 characters when the context window is unknown"**, though full `SKILL.md` instructions load when a skill is selected.
+
+**→ 중대한 발견**: Codex의 스킬 스캔 경로가 `.agents/skills`와 `$HOME/.agents/skills`다. **이 사용자 머신의 `C:\Users\encep\.agents\skills\`가 정확히 그 경로다.** 즉 현재 설치된 디자인 스킬들은 Codex와 Cursor 양쪽에서 동시에 인식되도록 배치된 것이다.
+
+### 3.2 Codex AGENTS.md
+
+출처: https://agents.md/ (직접 fetch)
+
+**포맷 (원문)**
+
+> **No required fields.** "AGENTS.md is just standard Markdown. Use any headings you like; the agent simply parses the text you provide."
+> **프론트매터를 쓰지 않는다.**
+
+**중첩과 우선순위 (원문)**
+
+> "The closest AGENTS.md to the edited file wins; **explicit user chat prompts override everything**."
+
+Codex 구현의 3계층 (검색 결과 종합, 다수 소스 일치):
+1. `~/.codex/AGENTS.override.md` (최고 우선순위 글로벌 오버라이드)
+2. `~/.codex/AGENTS.md`
+3. 프로젝트: git root부터 현재 디렉터리까지 걸어가며 각 디렉터리의 `AGENTS.override.md` 또는 `AGENTS.md`
+- 병합 순서: root부터 아래로 연결(concatenate), 가까운 파일이 앞의 것을 오버라이드
+- **기본 크기 상한 32 KiB에서 중단**
+
+**권장 섹션 (원문)**
+
+> Project overview / Build and test commands / Code style guidelines / Testing instructions / Security considerations / Commit message/PR guidelines / Deployment steps
+
+**성격**
+
+> "Think of AGENTS.md as a **README for agents**: a dedicated, predictable place to provide the context and instructions"
+
+**지원 도구**: OpenAI Codex, Google Jules, Factory, Aider, Zed, VS Code, Devin, GitHub Copilot, Cursor, Gemini CLI 외 15개 이상. 6만 개 이상의 오픈소스 프로젝트에서 사용.
+
+**→ AGENTS.md는 스킬이 아니다.** 항상 로드된다. designpaca 전체를 AGENTS.md에 넣으면 모든 대화에서 토큰을 먹는다. **AGENTS.md에는 포인터만 두고, 본체는 `.agents/skills/designpaca/`에 두는 것이 옳다.**
+
+---
+
+## 4. Cursor — 두 가지 경로
+
+### 4.1 Cursor Agent Skills (신규, 권장)
+
+출처: https://cursor.com/docs/context/skills (직접 fetch)
+
+**로드 위치 4곳**
+- 프로젝트: `.agents/skills/` 와 `.cursor/skills/`
+- 사용자: `~/.agents/skills/` 와 `~/.cursor/skills/`
+
+> Cursor "walks the skills root recursively and picks up any `SKILL.md` it finds."
+
+**프론트매터**
+
+필수:
+- `name` — "Skill identifier. Lowercase letters, numbers, and hyphens only."
+- `description` — "Describes what the skill does and when to use it."
+
+선택 (Cursor 확장):
+- `paths` — 글롭 패턴으로 스코프 제한
+- `disable-model-invocation` — true면 `/skill-name`으로만 호출
+- `icon` — "Icon shown on the badge when the skill is used as a Custom Mode"
+- `color` — `default, green, cyan, blue, purple, magenta, orange, yellow, red, brand`
+- `metadata`
+
+> "Skills in nested project directories are automatically scoped to files inside that directory."
+
+**→ `~/.agents/skills/designpaca/` 하나가 Cursor와 Codex 양쪽에서 인식된다.** 이것이 크로스툴 배포의 정답이다.
+
+### 4.2 Cursor Rules (.mdc) — 레거시 경로
+
+출처: https://cursor.com/docs/rules (직접 fetch)
+
+**파일 위치**
+```
+.cursor/rules/
+  react-patterns.mdc
+  frontend/
+    components.mdc
+```
+
+**프론트매터 필드는 정확히 3개** (문서에 명시된 것 전부):
+
+| Field | Type | 설명 (원문) |
+|---|---|---|
+| `alwaysApply` | boolean | "Apply to every chat session" |
+| `description` | string | "Helps Agent decide relevance; omitting it restricts to manual @-mention only" |
+| `globs` | string | "File pattern(s) for auto-attachment; supports comma-separated patterns" |
+
+> "No other frontmatter fields are specified in the documentation."
+
+**4가지 규칙 타입**
+
+| Type | 조건 | 동작 |
+|---|---|---|
+| Always Apply | `alwaysApply: true` | 모든 채팅 세션에 적용 |
+| Apply Intelligently | `description` 있음, `globs` 없음 | 에이전트가 관련성 판단 |
+| Apply to Specific Files | `globs` 있음 | "Auto-attached when a matching file is in context" |
+| Apply Manually | `description`·`globs` 둘 다 없음 | "@-mention in chat (e.g., `@my-rule`)" |
+
+**공식 베스트 프랙티스 (원문)**
+
+> - "Keep rules under 500 lines"
+> - "Split large rules into multiple, composable rules"
+> - Reference files via `@filename.ts` rather than copying content
+> - Avoid duplicating style guides; use linters instead
+
+**중요한 스코프 제약**
+
+> Rules apply only to Agent (Chat), **not Cursor Tab or Inline Edit (Cmd/Ctrl+K).**
+
+**Cursor의 AGENTS.md 지원**
+
+> "`AGENTS.md` is a simple markdown file for defining agent instructions" without frontmatter. Supports nested placement: "You can place `AGENTS.md` files in any subdirectory" with hierarchical precedence.
+
+---
+
+## 5. Windsurf / Cascade Rules
+
+출처: https://docs.windsurf.com/windsurf/cascade/memories → 307 리다이렉트 → https://docs.devin.ai/desktop/cascade/memories (직접 fetch)
+
+**주의**: Windsurf 문서가 Devin 문서로 리다이렉트된다(Cognition의 Windsurf 인수 이후 통합). 아래는 리다이렉트된 최신 문서 기준이므로, `.windsurf/` 경로는 "legacy"로 표기되어 있다.
+
+### 5.1 파일 위치 3계층
+
+| 범위 | 경로 |
+|---|---|
+| Global | `~/.codeium/windsurf/memories/global_rules.md` (단일 파일, 항상 활성) |
+| Workspace | `.devin/rules/*.md` (권장) 또는 `.windsurf/rules/*.md` (legacy), 그리고 legacy `.windsurfrules` |
+| System (Enterprise) | macOS `/Library/Application Support/Devin/rules/`, Linux `/etc/devin/rules/`, Windows `C:\ProgramData\Devin\rules\` |
+
+### 5.2 문자 수 제한 (하드)
+
+> - Global rules: "Limited to **6,000 characters**"
+> - Workspace rules: "Limited to **12,000 characters per file**"
+
+**이것이 다른 어떤 포맷보다 강한 제약이다.** designpaca 본문이 12,000자를 넘으면 Windsurf에서는 반드시 분할해야 한다.
+
+### 5.3 활성화 모드 (`trigger:` 필드)
+
+| Mode | Trigger 값 | 동작 (원문) |
+|---|---|---|
+| Always On | `always_on` | "Full rule content is included in the system prompt on every message" |
+| Model Decision | `model_decision` | "Description shown always; full content retrieved when Cascade deems relevant" |
+| Glob | `glob` | "Applied when files matching specified patterns are accessed" |
+| Manual | `manual` | "Activated only via `@rule-name` mention in input" |
+
+### 5.4 프론트매터 예시 (원문)
+
+```markdown
+---
+trigger: glob
+globs: **/*.test.ts
+---
+
+All test files must use `describe`/`it` blocks and mock external API calls.
+```
+
+> Global and root-level files don't require frontmatter and remain perpetually active.
+
+**주의**: Windsurf의 `trigger:`는 값이 `always_on`/`model_decision`/`glob`/`manual` 중 하나다. Claude Code SKILL.md의 슬래시 커맨드 이름을 넣는 필드가 아니다. (`graphify`의 `trigger: /graphify`와 혼동 금지 — 서로 다른 스펙의 같은 이름 필드다.)
+
+---
+
+## 6. VS Code / GitHub Copilot Agent Skills
+
+출처: https://code.visualstudio.com/docs/copilot/customization/agent-skills (직접 fetch)
+
+**로드 위치**
+- 프로젝트: `.github/skills/`, `.claude/skills/`, `.agents/skills/`
+- 개인: `~/.copilot/skills/`, `~/.claude/skills/`, `~/.agents/skills/`
+- 추가 경로: `chat.agentSkillsLocations` 설정
+
+**프론트매터**
+- `name` (필수): "A unique identifier for the skill. Only lowercase letters, numbers, and hyphens are allowed"
+- `description` (필수): "A description of what the skill does **and when to use it**"
+- `argument-hint` (선택)
+- `user-invocable` (선택)
+- `disable-model-invocation` (선택)
+- `context` (선택, 실험): `fork`
+
+**custom instructions와의 차이 (원문)**
+
+> skills are "task-specific, loaded on-demand" and work across multiple tools, while custom instructions are "Always applied (or via glob patterns)" and limited to "VS Code and GitHub.com only."
+
+---
+
+## 7. 포맷 비교 통합표
+
+| 항목 | Claude Code SKILL.md | Agent Skills 표준 | Codex AGENTS.md | Cursor .mdc | Windsurf rules |
+|---|---|---|---|---|---|
+| **파일 위치** | `~/.claude/skills/<n>/SKILL.md`, `.claude/skills/<n>/SKILL.md` | `<n>/SKILL.md` | 리포 루트 + 각 하위 디렉터리 `AGENTS.md` | `.cursor/rules/*.mdc` | `~/.codeium/windsurf/memories/global_rules.md`, `.windsurf/rules/*.md` |
+| **프론트매터** | YAML, 22개 필드 | YAML, 6개 필드 | **없음** | YAML, 3개 필드 | YAML, `trigger` + `globs` |
+| **필수 필드** | 없음 (`description` 권장) | `name`, `description` | 없음 | 없음 | 없음 |
+| **로드 시점** | 온디맨드 (description 매칭 or `/이름`) | 온디맨드 | **항상** | 4모드 (always/글롭/설명매칭/수동) | 4모드 (always_on/glob/model_decision/manual) |
+| **크기 제한** | 본문 500줄 권장, 컴팩션 시 5K 토큰 생존 | 본문 500줄 / 5,000토큰 권장 | 32 KiB 병합 상한 | 500줄 권장 | **6,000자(글로벌) / 12,000자(워크스페이스) 하드** |
+| **description 상한** | 1,536자(+`when_to_use` 합산), 목록 예산 1% | 1,024자 | N/A | 미명시 | 미명시 |
+| **참조 파일** | O (`references/`, `scripts/`, `assets/`) | O | X (별도 AGENTS.md 중첩으로 대체) | `@filename` 참조 | X |
+| **스크립트 실행** | O | O | X | X | X |
+| **네임스페이스** | 플러그인 `plugin:skill`, 중첩 `dir:skill` | X | 경로 기반 | X | X |
+| **심링크** | O (중복 로드 방지 포함) | 구현 의존 | N/A | 미명시 | 미명시 |
+
+---
+
+## 8. designpaca 배포 전략 (권장안)
+
+### 8.1 단일 정본 + 심링크 (Tier 1)
+
+**정본 위치**: `~/.agents/skills/designpaca/`
+
+이 한 곳이 다음 세 도구에서 **변환 없이** 인식된다:
+- **Cursor**: `~/.agents/skills/` 를 직접 스캔
+- **Codex**: `$HOME/.agents/skills` 를 직접 스캔
+- **VS Code Copilot**: `~/.agents/skills/` 를 직접 스캔
+
+**Claude Code용 심링크**:
+```bash
+# Git Bash / WSL
+ln -s ~/.agents/skills/designpaca ~/.claude/skills/designpaca
+```
+```powershell
+# Windows PowerShell (관리자 또는 개발자 모드)
+New-Item -ItemType SymbolicLink -Path "$HOME\.claude\skills\designpaca" -Target "$HOME\.agents\skills\designpaca"
+```
+
+Claude Code 문서가 이 방식을 명시적으로 지원한다:
+> A `<skill-name>` entry ... can be a symlink to a directory elsewhere on disk. Claude Code follows the symlink and reads `SKILL.md` from the target directory.
+
+**프로젝트 스코프**: 리포에 `.agents/skills/designpaca/`를 두면 Cursor·Codex·Copilot이 전부 읽는다. Claude Code용으로 `.claude/skills/designpaca` 심링크를 추가한다.
+
+### 8.2 파일 구조 (권장)
+
+```
+designpaca/
+├── SKILL.md                          # 400~480줄. 절차 + 인덱스 + 핵심 게이트
+├── references/
+│   ├── anti-patterns.md              # AI 텔 카탈로그 (무엇/왜/대신)
+│   ├── slop-gates.md                 # 출력 후 예/아니오 게이트 목록
+│   ├── typography.md                 # 폰트 페어링, 스케일, 세리프 규율
+│   ├── color.md                      # 팔레트 규칙, 금지 hex 패밀리, 대비
+│   ├── layout.md                     # 매크로구조 인덱스 + 섹션 리듬
+│   ├── motion.md                     # 이징, 스크롤, reduced-motion
+│   ├── copy.md                       # 카피 규율 + 자가 감사 목록
+│   ├── responsive.md                 # 브레이크포인트, 모바일 붕괴, 실무 버그
+│   ├── design-systems.md             # 공식 DS 매핑 + 설치 명령 + 문서 링크
+│   ├── redesign.md                   # 리디자인 프로토콜 (감사/보존/레버)
+│   └── design-md-template.md         # 산출용 design.md 템플릿
+├── assets/
+│   └── themes/                       # 테마별 개별 파일 (인덱스-후-선택)
+└── scripts/
+    └── check_contrast.(js|py)        # 대비/팔레트 검증기 (선택)
+```
+
+**모든 references 파일은 SKILL.md에서 1단계 링크로만 참조.** 참조 파일끼리 서로 링크하지 않는다.
+
+### 8.3 프론트매터 (확정안)
+
+```yaml
+---
+name: designpaca
+description: <용도 + 트리거 문구 + 배제 조건. 200~350자. 3인칭.>
+---
+```
+
+**확장 필드를 쓰지 않는 이유**:
+1. claude.ai 업로드/패키징 시 하드 에러
+2. Cursor·Codex·Copilot이 지원하는 필드 집합이 서로 다름
+3. 로컬 커뮤니티 스킬 13개가 이미 같은 결론에 도달
+
+### 8.4 레거시 어댑터 (Tier 2, 필요 시)
+
+Agent Skills를 지원하지 않는 경로용 변환. **자동 생성 스크립트로 만들고 손으로 관리하지 않는다.**
+
+#### (a) → Cursor `.mdc` 규칙
+
+```
+.cursor/rules/designpaca.mdc
+```
+
+```markdown
+---
+description: Use when building or reshaping web UI - landing pages, portfolios, marketing sites, product pages, or redesigns - and the visual result matters.
+alwaysApply: false
+---
+
+<SKILL.md 본문>
+
+<!-- references/ 는 @-참조로 대체 -->
+See @.cursor/rules/designpaca-anti-patterns.mdc for the full anti-pattern catalogue.
+```
+
+**변환 시 주의점**
+1. **`name` 필드를 제거한다.** `.mdc`는 `description`/`globs`/`alwaysApply` 3개만 인식. 다른 필드는 문서화되지 않았다.
+2. **`alwaysApply: true`를 쓰지 마라.** Cursor 문서: "Use sparingly, this is your global config, not your per-feature config." 디자인 스킬은 항상 켜져 있으면 안 된다.
+3. **`globs`를 쓸지 말지**: `**/*.{tsx,jsx,vue,svelte,astro,html,css}` 로 걸면 파일 컨텍스트 기반 자동 첨부가 되지만, "새 랜딩 만들어줘"처럼 파일이 아직 없는 경우 발동하지 않는다. **디자인 스킬은 `description`만 두는 "Apply Intelligently" 모드가 맞다.**
+4. **참조 파일 링크를 `@경로`로 바꾼다.** `.mdc`는 `references/*.md` 상대 경로를 읽지 않는다.
+5. **500줄 상한 준수.** 넘으면 여러 `.mdc`로 쪼개고 서로 `@`로 연결.
+6. **Tab/Inline Edit에는 적용 안 됨**을 문서에 명시.
+
+#### (b) → Windsurf 규칙
+
+```
+.windsurf/rules/designpaca.md   (또는 .devin/rules/designpaca.md)
+```
+
+```markdown
+---
+trigger: model_decision
+description: Use when building or reshaping web UI ...
+---
+
+<SKILL.md 본문 — 12,000자 이내로 압축>
+```
+
+**변환 시 주의점**
+1. **12,000자 하드 상한.** SKILL.md가 이를 넘으면 반드시 분할. 파일 여러 개로 쪼개고 각각 `trigger: model_decision`.
+2. **`trigger: model_decision`을 쓴다.** `always_on`은 6,000자 글로벌 규칙에만.
+3. `references/` 개념이 없다. 핵심만 남기고 나머지는 버리거나 별도 규칙 파일로.
+4. `name` 필드 없음.
+
+#### (c) → AGENTS.md
+
+**전체를 넣지 마라.** AGENTS.md는 항상 로드되므로 디자인 스킬 본문을 넣으면 모든 대화에서 비용이 든다. 포인터만 넣는다:
+
+```markdown
+## Design work
+
+When building or changing UI in this repo, load the `designpaca` skill
+(`.agents/skills/designpaca/SKILL.md`) before writing any markup or styles.
+The project's locked design system lives at `design.md` at the repo root;
+it overrides the skill's defaults.
+```
+
+**변환 시 주의점**
+1. 프론트매터가 없다. YAML 블록을 넣으면 그냥 본문 텍스트로 읽힌다.
+2. 32 KiB 병합 상한이 있으므로 짧게.
+3. 중첩 시 가까운 파일이 이긴다. 모노레포에서 패키지별로 다른 디자인 지시를 줄 수 있다.
+
+### 8.5 변환 시 절대 하면 안 되는 것
+
+| 실수 | 결과 |
+|---|---|
+| SKILL.md에 `trigger: /designpaca` 넣기 | claude.ai 업로드/패키징 하드 에러. Windsurf `trigger`와 의미 충돌 |
+| `.mdc`에 `name:` 남기기 | 문서화되지 않은 필드. 무시되거나 파싱 실패 |
+| `.mdc`에서 `references/x.md` 상대 링크 유지 | Cursor가 읽지 못함. `@` 참조로 바꿔야 함 |
+| Windsurf 규칙에 `alwaysApply` 넣기 | Cursor 필드다. Windsurf는 `trigger`를 쓴다 |
+| AGENTS.md에 YAML 프론트매터 넣기 | 본문으로 렌더링됨 |
+| SKILL.md `name`을 디렉터리명과 다르게 | 스펙 위반 ("Must match the parent directory name"). 개인/프로젝트 스킬에서는 어차피 디렉터리명이 커맨드가 되므로 혼란만 유발 |
+| description에 XML 태그 | Anthropic 스펙 위반 |
+| description 1,024자 초과 | Agent Skills 스펙 위반 (Claude Code는 1,536까지 받지만 표준은 1,024) |
+| 참조 파일이 다른 참조 파일을 링크 | 부분 읽기(`head -100`)로 정보 유실 |
+| 참조 파일 100줄 초과인데 목차 없음 | 부분 읽기 시 전체 범위를 모름 |
+
+### 8.6 검증 체크리스트
+
+배포 전 확인:
+
+- [ ] `name`이 소문자+숫자+하이픈만, 64자 이내, 연속 하이픈 없음, 디렉터리명과 일치
+- [ ] `description`이 1,024자 이내, 3인칭, 용도+트리거+배제 3요소
+- [ ] 프론트매터에 표준 6필드 외 필드 없음
+- [ ] SKILL.md 본문 500줄 이내
+- [ ] 가장 중요한 규칙이 앞 100줄 안에 있음
+- [ ] 모든 참조 파일이 SKILL.md에서 1단계로 링크됨
+- [ ] 참조 파일 중 100줄 넘는 것에 목차 있음
+- [ ] 파일 경로에 백슬래시 없음 (전부 `/`)
+- [ ] `skills-ref validate ./designpaca` 통과
+- [ ] Cursor `.mdc` 변환본이 500줄 이내
+- [ ] Windsurf 변환본이 12,000자 이내
+- [ ] Claude Code에서 `/doctor`로 스킬 목록 예산 확인
+
+---
+
+## 9. 확인 못한 것
+
+- **Windsurf 공식 문서 원본**: `docs.windsurf.com`이 `docs.devin.ai`로 리다이렉트되어, 리다이렉트된 문서 기준으로 정리했다. `.windsurfrules` 단일 파일 레거시 포맷의 정확한 상한과 파싱 규칙은 리다이렉트 문서에 "legacy"로만 표기되어 있고 상세 스펙은 확인하지 못했다.
+- **Cursor `.mdc`의 미문서화 필드**: 커뮤니티 문서들이 `alwaysApply`/`description`/`globs` 외 필드를 언급하기도 하지만, 공식 문서는 "No other frontmatter fields are specified"라고 한다. 미문서화 필드는 사용하지 않는 것이 안전하다.
+- **`skills-ref` CLI의 실제 검증 항목 전체**: 저장소 URL만 확인했고 실행해보지 않았다.
+- **Cursor Skills와 `.mdc` Rules가 동시에 있을 때의 우선순위**: 공식 문서에 명시되어 있지 않다.
diff --git a/research/skills/04-sources.md b/research/skills/04-sources.md
new file mode 100644
index 0000000..8e7a724
--- /dev/null
+++ b/research/skills/04-sources.md
@@ -0,0 +1,190 @@
+# 04. 조사 소스 목록
+
+작성일: 2026-08-20
+
+표기 규칙
+- **[직접]** = WebFetch로 본문을 직접 가져와 읽음. 인용문은 이 소스에서만 가져왔다.
+- **[검색]** = WebSearch 결과 목록에서 확인. 제목과 요약만 봤고 본문은 읽지 않았다.
+- **[로컬]** = 파일시스템에서 직접 읽음.
+- **[스킬]** = Skill 도구로 로드해 본문을 직접 읽음.
+
+---
+
+## A. 공식 스펙 문서 (1~12)
+
+| # | URL | 상태 | 설명 |
+|---|---|---|---|
+| 1 | https://agentskills.io/specification | [직접] | Agent Skills 오픈 표준 완전 스펙. 프론트매터 6필드, name 정규식, description 1024자 상한, progressive disclosure 3계층, 파일 참조 1단계 규칙 |
+| 2 | https://agentskills.io/ | [직접] | 표준 개요와 지원 클라이언트 40개 이상 목록(Cursor, Codex, Gemini CLI, Copilot, Roo, Goose, Amp 등) |
+| 3 | https://code.claude.com/docs/en/skills | [직접] | Claude Code 스킬 문서 전문. 프론트매터 22개 필드 표, 설치 위치·우선순위, 심링크, 컨텍스트 수명(5,000토큰 재부착), 스킬 목록 예산(컨텍스트 1%), 트러블슈팅 |
+| 4 | https://platform.claude.com/docs/en/agents-and-tools/agent-skills/best-practices | [직접] | Anthropic 스킬 작성 베스트 프랙티스 전문. 3인칭 description 경고, degrees of freedom, progressive disclosure 패턴 3종, 워크플로/피드백 루프, 안티패턴, 최종 체크리스트 |
+| 5 | https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview | [검색] | 스킬 개념 개요와 아키텍처 |
+| 6 | https://www.anthropic.com/engineering/equipping-agents-for-the-real-world-with-agent-skills | [검색] | Anthropic 엔지니어링 블로그. progressive disclosure를 핵심 설계 원칙으로 소개 |
+| 7 | https://cursor.com/docs/rules | [직접] | Cursor `.mdc` 규칙 공식 스펙. 프론트매터 3필드(`alwaysApply`/`description`/`globs`), 4가지 규칙 타입, 500줄 상한, Tab/Inline Edit 미적용 |
+| 8 | https://cursor.com/docs/context/skills | [직접] | Cursor Agent Skills 지원. `.agents/skills`·`.cursor/skills` 4경로, 프론트매터(name/description 필수 + paths/icon/color/metadata) |
+| 9 | https://agents.md/ | [직접] | AGENTS.md 오픈 표준. 프론트매터 없음, 중첩 시 가까운 파일 우선, 권장 섹션, 6만+ 프로젝트 채택 |
+| 10 | https://learn.chatgpt.com/docs/build-skills | [직접] | Codex/ChatGPT 스킬 문서. 스캔 경로 4계층(`.agents/skills`, `$HOME/.agents/skills`, `/etc/codex/skills`, 시스템), 목록 예산 2%/8000자 |
+| 11 | https://code.visualstudio.com/docs/copilot/customization/agent-skills | [직접] | VS Code/Copilot 스킬 지원. `.github/skills`·`.claude/skills`·`.agents/skills` 경로, custom instructions와의 차이 |
+| 12 | https://docs.devin.ai/desktop/cascade/memories | [직접] | Windsurf/Cascade 규칙 스펙(docs.windsurf.com에서 307 리다이렉트). 6,000자/12,000자 상한, `trigger:` 4모드(always_on/model_decision/glob/manual) |
+
+## B. 리다이렉트 원본·부속 (13~16)
+
+| # | URL | 상태 | 설명 |
+|---|---|---|---|
+| 13 | https://docs.windsurf.com/windsurf/cascade/memories | [직접] | 307 리다이렉트 확인. Windsurf 문서가 Devin 문서로 통합됨 |
+| 14 | https://developers.openai.com/codex/skills | [직접] | 308 리다이렉트 확인 → learn.chatgpt.com/docs/build-skills |
+| 15 | https://code.claude.com/docs/en/llms.txt | [검색] | Claude Code 문서 인덱스 |
+| 16 | https://github.com/agentskills/agentskills | [검색] | Agent Skills 표준 저장소. `skills-ref validate` CLI 포함 |
+
+## C. Anthropic 공식 스킬 (17~24)
+
+| # | URL / 경로 | 상태 | 설명 |
+|---|---|---|---|
+| 17 | `~/.claude/plugins/marketplaces/anthropic-agent-skills/skills/frontend-design/SKILL.md` | [로컬] | 공식 frontend-design 스킬. 약 40줄 산문. "AI 3대 기본값" 명명, "Spend your boldness in one place", 2패스 프로세스, 카피 지침 |
+| 18 | `~/.claude/plugins/marketplaces/anthropic-agent-skills/skills/skill-creator/SKILL.md` | [로컬] | 공식 skill-creator 486줄. description 최적화 루프, eval 워크플로, "explain the why in lieu of musty MUSTs" |
+| 19 | (빌트인) `artifact-design` | [스킬] | Artifact 디자인 가이드. 트리트먼트 보정, 다크모드 3상태, 우선순위 체인, `<title>` 명명 규칙 |
+| 20 | (빌트인) `dataviz` + `.../bundled-skills/.../dataviz/references/*` | [스킬]+[로컬] | 차트 스킬. 절차 7단계, 색상은 마지막, 검증 스크립트 번들, references 7개 분리 구조 |
+| 21 | https://github.com/anthropics/skills | [검색] | Anthropic 공식 스킬 저장소 |
+| 22 | https://github.com/anthropics/skills/tree/main/skills/skill-creator | [검색] | skill-creator 소스 |
+| 23 | https://claude.com/blog/skills-explained | [검색] | Anthropic 스킬 아키텍처·베스트 프랙티스 가이드 블로그 |
+| 24 | https://anthropic.skilljar.com/introduction-to-agent-skills | [검색] | Anthropic 공식 Agent Skills 입문 코스 |
+
+## D. Hallmark (anti-slop 디자인 스킬, 가장 참고 가치 높음) (25~30)
+
+| # | URL | 상태 | 설명 |
+|---|---|---|---|
+| 25 | https://github.com/Nutlope/hallmark | [직접] | Together AI의 anti-AI-slop 디자인 스킬. 4개 verb, 21개 테마, 58 게이트. 파일 구조와 설치 경로(Claude Code/Cursor/Codex) 확인 |
+| 26 | https://raw.githubusercontent.com/nikolanaidenko-eng/antislop/main/skills/hallmark/SKILL.md | [직접] | Hallmark SKILL.md 전문(포크 미러). Six Universal Disciplines, 인덱스-후-선택 로딩 규율, `.hallmark/log.json` 프로젝트 메모리, CSS 스탬프 |
+| 27 | https://raw.githubusercontent.com/nikolanaidenko-eng/antislop/main/skills/hallmark/references/slop-test.md | [직접] | 58개 슬롭 테스트 게이트 전문 + 6축 사전 자기 채점(Philosophy/Hierarchy/Execution/Specificity/Restraint/Variety) |
+| 28 | https://raw.githubusercontent.com/nikolanaidenko-eng/antislop/main/skills/hallmark/references/anti-patterns.md | [직접] | 명명된 AI 텔 카탈로그. Critical/Major/Microinteraction/Minor 4등급, 각 항목이 "무엇/왜 실패하는가/고치는 법" 3단 |
+| 29 | https://github.com/Nutlope/hallmark/blob/main/SKILL.md | [검색] | 원본 저장소의 SKILL.md 경로(루트가 아닌 `skills/hallmark/`에 있음) |
+| 30 | https://github.com/adeoyewole028/hallmark-design-skills | [검색] | Hallmark 포크 |
+
+## E. Superdesign (design.md 산출 패턴) (31~35)
+
+| # | URL | 상태 | 설명 |
+|---|---|---|---|
+| 31 | https://github.com/superdesigndev/superdesign-skill | [직접] | Claude Code/Cursor/Codex 공용 디자인 스킬. `.claude-plugin`/`.cursor-plugin`/`.codex-plugin` 3중 배포 구조, `.superdesign/design-system.md` 필수화 |
+| 32 | https://raw.githubusercontent.com/superdesigndev/superdesign-skill/main/DESIGN.md | [직접] | "design.md는 디자인계의 AGENTS.md" 선언문. 왜 영속적 디자인 시스템 파일이 필요한지 가장 명료한 설명 |
+| 33 | https://raw.githubusercontent.com/superdesigndev/superdesign-skill/main/skills/superdesign/SKILL.md | [직접] | Superdesign 스킬 본문. 환경 확인 우선, 리포 자동 분석 6파일 생성, `.superdesign/resume.json` 웜 리줌 |
+| 34 | https://github.com/superdesigndev/superdesign | [검색] | Superdesign 본체 (IDE 내 디자인 에이전트) |
+| 35 | https://github.com/jonthebeef/superdesign-mcp-claude-code | [검색] | Superdesign의 Claude Code MCP 통합 |
+
+## F. 유출 시스템 프롬프트 (36~44)
+
+| # | URL | 상태 | 설명 |
+|---|---|---|---|
+| 36 | https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools | [직접] | 33개 도구의 시스템 프롬프트 모음. 디렉터리 목록 확인(v0, Lovable, Same.dev, Cursor, Devin, Windsurf, Replit, Bolt, Cline, Codex CLI, Gemini CLI, RooCode 등) |
+| 37 | `.../v0 Prompts and Tools/Prompt.txt` (raw) | [직접] | v0 디자인 규칙 원문. "exactly 3-5 colors total", "maximum 2 font families", "NEVER use purple or violet prominently", "Avoid gradients entirely", "NEVER generate abstract shapes like gradient circles, blurry squares, or decorative blobs", 디자인 토큰 강제 |
+| 38 | `.../Lovable/Agent Prompt.txt` (raw) | [직접] | Lovable 디자인 규칙 원문. "The design system is everything", "USE SEMANTIC TOKENS FOR COLORS... DO NOT use direct colors like text-white", "NEVER use overrides. Make sure to not hold back on design" |
+| 39 | `.../Same.dev/Prompt.txt` (raw) | [직접] | Same.dev 규칙 원문. "NEVER stay with default shadcn/ui components", "NEVER use emojis", "Avoid using purple, indigo, or blue colors unless specified", 클로닝 윤리 가드레일 |
+| 40 | `.../Open Source prompts/Bolt/Prompt.txt` (raw) | [직접] | Bolt 프롬프트. **디자인 전용 섹션이 없음을 확인.** 코드 품질·모듈 분할 중심. 디자인 지시는 사실상 부재 |
+| 41 | https://github.com/elder-plinius/CL4R1T4S | [검색] | 유출 시스템 프롬프트 대형 아카이브 (ChatGPT, Claude, Gemini, Grok, Cursor, Lovable, Replit) |
+| 42 | https://github.com/YeeKal/leaked-system-prompts | [검색] | 유출 프롬프트 모음 (v0, Lovable, Cursor, Manus 포함) |
+| 43 | https://simonwillison.net/2024/Nov/25/leaked-system-prompts-from-vercel-v0/ | [검색] | Simon Willison의 v0 유출 분석. Vercel CTO Malte Ubl의 "프롬프트만으론 가치 없다" 코멘트 |
+| 44 | https://quasa.io/media/leaked-system-prompts-of-ai-vibe-coding-tools-a-deep-dive-into-cursor-bolt-lovable-and-manus | [검색] | Cursor/Bolt/Lovable/Manus 프롬프트 비교 분석 |
+
+## G. 커뮤니티 디자인 스킬 목록·큐레이션 (45~54)
+
+| # | URL | 상태 | 설명 |
+|---|---|---|---|
+| 45 | https://github.com/travisvn/awesome-claude-skills | [직접] | Claude Skills 큐레이션. 디자인 관련: frontend-design, web-artifacts-builder, canvas-design, algorithmic-art, frontend-slides, web-asset-generator, shadcn/ui |
+| 46 | https://novitckii.com/resources/claude-design-skills/ | [직접] | 42개 디자인 스킬 전수 목록 + GitHub 저장소 URL. impeccable, animate, design-motion-principles, designer-skills, ai-design-skills 시리즈 등 |
+| 47 | https://github.com/Koomook/claude-frontend-skills | [직접] | `distinctive-frontend` 스킬. 4축(타이포/컬러·테마/모션/배경) 접근, 극단적 웨이트 대비(100-200 vs 800-900), 문화적 미학 기반 팔레트 |
+| 48 | https://github.com/jiji262/claude-design-skill | [직접] | Claude.ai 내부 Design 시스템 프롬프트를 스킬로 이식. 6단계 워크플로, Core Asset Protocol, Design Direction Advisor(3방향 제시), 스케일 하한(슬라이드 24px+, 히트타깃 44px+) |
+| 49 | https://github.com/ComposioHQ/awesome-claude-skills | [검색] | 또 다른 Claude Skills 큐레이션 |
+| 50 | https://github.com/wilwaldon/Claude-Code-Frontend-Design-Toolkit | [검색] | Claude Code 프론트엔드 디자인 개선 도구 모음(스킬·플러그인·MCP·CLAUDE.md 트릭) |
+| 51 | https://pasqualepillitteri.it/en/news/576/claude-code-skills-design-uiux-guide | [검색] | UI/UX 디자인용 Claude Code 스킬 20선 |
+| 52 | https://www.firecrawl.dev/blog/best-claude-code-skills | [검색] | 2026년 추천 Claude Code 스킬 |
+| 53 | https://skills.rest/skill/anti-slop-design | [검색] | anti-slop-design 스킬 (비제네릭 웹 인터페이스) |
+| 54 | https://ui.shadcn.com/docs/skills | [검색] | shadcn/ui 공식 스킬. 컴포넌트 컨텍스트와 디자인 패턴 강제 |
+
+## H. AI 슬롭 분석 (55~61)
+
+| # | URL | 상태 | 설명 |
+|---|---|---|---|
+| 55 | https://dev.to/rams901/hallmark-stop-ai-generated-ui-slop-in-one-command-in-2026-3p9n | [검색] | Hallmark 소개. "Pick a real direction (Swiss/editorial, brutalist, industrial-mono, organic, clean-product) and lock its tokens in a DESIGN.md at the project root" |
+| 56 | https://www.925studios.co/blog/ai-slop-web-design-guide | [검색] | AI 슬롭 웹디자인 식별·수정 가이드 |
+| 57 | https://vibecodekit.dev/ai-slop-design | [검색] | AI UI가 제네릭해지는 원인 분석. "LLMs predict the next token based on probability distributions... 'safe' design patterns that appear frequently in web training data get sampled at high probability" |
+| 58 | https://saascity.io/blog/stunning-frontend-designs-vibe-coding-avoid-ai-slop | [검색] | 바이브 코딩에서 슬롭 회피 |
+| 59 | https://www.mindstudio.ai/blog/claude-design-avoid-ai-slop-design-system | [검색] | Claude Design에서 디자인 시스템 접근으로 슬롭 회피 |
+| 60 | https://ui-ux-pro-max-skill.com/blog/avoiding-ai-slop/ | 403 | 슬롭 회피 프롬프트 기법 7가지. **접근 실패(403). 내용 확인 못함** |
+| 61 | https://www.coddykit.com/pages/blog-detail?id=512918 | [검색] | Hallmark 소개 기사 (4,600+ 스타 시점) |
+
+## I. 스킬 작성 방법론 (62~69)
+
+| # | URL | 상태 | 설명 |
+|---|---|---|---|
+| 62 | https://raw.githubusercontent.com/obra/superpowers/main/skills/writing-skills/SKILL.md | [직접] | obra/superpowers 스킬 작성 규칙. "NO SKILL WITHOUT A FAILING TEST FIRST", description은 "Use when..." 시작 + 트리거 조건만, RED-GREEN-REFACTOR, 토큰 효율 목표치 |
+| 63 | https://github.com/obra/superpowers/blob/main/skills/writing-skills/anthropic-best-practices.md | [검색] | superpowers가 정리한 Anthropic 베스트 프랙티스 요약 |
+| 64 | https://generativeprogrammer.com/p/skill-authoring-patterns-from-anthropics | [검색] | Anthropic 베스트 프랙티스에서 도출한 작성 패턴 분석 |
+| 65 | https://agentman.ai/blog/build-your-first-agent-skill-skillmd-anatomy | [검색] | SKILL.md 해부 가이드 |
+| 66 | https://www.newsletter.swirlai.com/p/agent-skills-progressive-disclosure | [검색] | progressive disclosure를 시스템 설계 패턴으로 분석 |
+| 67 | https://strapi.io/blog/what-are-agent-skills-and-how-to-use-them | [검색] | Agent Skills 개요. 3계층 로딩 토큰 수치(~30-50 토큰/스킬) |
+| 68 | https://arxiv.org/html/2602.12430v3 | [검색] | 논문: Agent Skills for LLMs — 아키텍처, 획득, 보안 |
+| 69 | https://www.deeplearning.ai/courses/agent-skills-with-anthropic | [검색] | DeepLearning.AI Agent Skills 코스 |
+
+## J. 포맷 스펙 보조 자료 (70~79)
+
+| # | URL | 상태 | 설명 |
+|---|---|---|---|
+| 70 | https://github.com/sanjeed5/awesome-cursor-rules-mdc/blob/main/cursor-rules-reference.md | [검색] | Cursor `.mdc` 레퍼런스와 예제 모음 |
+| 71 | https://techsy.io/en/blog/cursor-rules-guide | [검색] | `.mdc` 프론트매터·globs·alwaysApply 해설 |
+| 72 | https://www.vibecodingacademy.ai/blog/cursor-rules-complete-guide | [검색] | Cursor Rules 완전 가이드 + 15개 템플릿 |
+| 73 | https://dev.to/vibestackdev/why-your-cursor-rules-are-being-silently-ignored-and-how-to-fix-it-4123 | [검색] | Cursor 규칙이 조용히 무시되는 원인과 해결 |
+| 74 | https://medium.com/@ror.venkat/mastering-mdc-files-in-cursor-best-practices-f535e670f651 | [검색] | `.mdc` 베스트 프랙티스 |
+| 75 | https://www.morphllm.com/agents-md-guide | [검색] | AGENTS.md vs CLAUDE.md vs .cursorrules 비교 |
+| 76 | https://codex.danielvaughan.com/2026/03/26/agents-md-advanced-patterns/ | [검색] | AGENTS.md 중첩 계층·오버라이드 파일·폴백 패턴 |
+| 77 | https://ralphable.com/blog/agents-md-scope-precedence-codex-2026-troubleshooting-guide | [검색] | Codex AGENTS.md 스코프·우선순위 3계층, 32 KiB 상한 |
+| 78 | https://www.tembo.io/blog/agents-md | [검색] | AGENTS.md 작성법 |
+| 79 | https://www.augmentcode.com/guides/how-to-build-agents-md | [검색] | AGENTS.md 구축 가이드 |
+| 80 | https://blakecrosley.com/blog/agents-md-patterns | [검색] | 실제로 에이전트 행동을 바꾸는 AGENTS.md 패턴 |
+| 81 | https://eastondev.com/blog/en/posts/ai/20260626-codex-agents-md-project-rules/ | [검색] | Codex용 AGENTS.md 규칙·로딩·템플릿 |
+| 82 | https://prpm.dev/blog/agents-md-deep-dive | [검색] | AGENTS.md 오픈 표준 심층 |
+
+## K. 로컬 파일 (조사 대상 원본) (83~99)
+
+| # | 경로 | 상태 | 설명 |
+|---|---|---|---|
+| 83 | `C:\Users\encep\.agents\skills\design-taste-frontend\SKILL.md` | [로컬] | 88KB/1,206줄. 다이얼 3축, 브리프 추론, AI Tells 4계층, Pre-Flight 60항목, 디자인시스템 매핑 + 부록 3종 |
+| 84 | `C:\Users\encep\.agents\skills\design-taste-frontend-v1\SKILL.md` | [로컬] | 226줄 v1 원형. 다이얼 최초 도입, Motion-Engine Bento 5-카드 아키타입 |
+| 85 | `C:\Users\encep\.agents\skills\high-end-visual-design\SKILL.md` | [로컬] | Double-Bezel(Doppelrand), Button-in-Button, Variance Engine, 성능 가드레일 |
+| 86 | `C:\Users\encep\.agents\skills\minimalist-ui\SKILL.md` | [로컬] | 웜 모노크롬 에디토리얼. hex 단위 팔레트, 절대 금지 9항목 |
+| 87 | `C:\Users\encep\.agents\skills\industrial-brutalist-ui\SKILL.md` | [로컬] | 스위스 인쇄 × 군용 터미널. 모드/기판 단일 선택 강제, `gap:1px` 그리드 기법 |
+| 88 | `C:\Users\encep\.agents\skills\gpt-taste\SKILL.md` | [로컬] | Python RNG 시뮬레이션, AIDA 구조, 2줄 헤드라인 철칙, `grid-flow-dense`, `<design_plan>` 게이트 |
+| 89 | `C:\Users\encep\.agents\skills\imagegen-frontend-web\SKILL.md` | [로컬] | 987줄. HARD OUTPUT RULE 선두 배치, 조합 변형 엔진 13축, 서사 스파인, Second-Read Moment |
+| 90 | `C:\Users\encep\.agents\skills\imagegen-frontend-mobile\SKILL.md` | [로컬] | 1,465줄. 모바일 AI 텔, "not always simple, always clean", 27문항 품질 체크 |
+| 91 | `C:\Users\encep\.agents\skills\image-to-code\SKILL.md` | [로컬] | 1,228줄. 이미지 우선 워크플로, 다이얼 9축, 추출 규칙 5종, anti-slop 5분류 |
+| 92 | `C:\Users\encep\.agents\skills\redesign-existing-projects\SKILL.md` | [로컬] | "문제→해법" 페어 100+개, "AI가 빼먹는 것" 섹션, 위험 대비 효과 순 수정 우선순위 |
+| 93 | `C:\Users\encep\.agents\skills\stitch-design-taste\SKILL.md` + `DESIGN.md` | [로컬] | 메타 스킬. DESIGN.md 생성기. 출력 템플릿과 Best Practices/Pitfalls |
+| 94 | `C:\Users\encep\.agents\skills\brandkit\SKILL.md` | [로컬] | 798줄. 로고 컨셉 5방법, 시각 모드 8종, 레퍼런스 사용 윤리 |
+| 95 | `C:\Users\encep\.agents\skills\full-output-enforcement\SKILL.md` | [로컬] | 60줄. 잘림 방지. 금지 문자열 목록 + `[PAUSED — X of Y]` 중단 포맷 |
+| 96 | `C:\Users\encep\.claude\skills\graphify\SKILL.md` | [로컬] | 1,242줄. `trigger:` 비표준 필드 사용 사례. Honesty Rules 섹션 |
+| 97 | `C:\Users\encep\.claude\skills\codex-image\SKILL.md` | [로컬] | 한국어 description + 리터럴 발화 나열 + 배제 조건 조합의 모범 |
+| 98 | `C:\Users\encep\.codex-litellm\skills\refactor-governance\SKILL.md` | [로컬] | description에 "NOT a trigger" 배제 조건을 넣은 사례 |
+| 99 | `...\bundled-skills\2.1.235\...\dataviz\references\anti-patterns.md` 외 6개 | [로컬] | dataviz 참조 파일. `❌ / Why / ✅` 3단 구조, 실제 사례 인용 |
+
+---
+
+## 소스 통계
+
+- 총 URL/경로: **99개**
+- 본문 직접 확인(WebFetch): **22개**
+- 로컬 파일 직접 읽음: **17개**
+- Skill 도구로 본문 확인: **2개** (artifact-design, dataviz)
+- 검색 결과 목록에서만 확인: **57개**
+- 접근 실패: **1개** (#60, HTTP 403)
+
+## 인용문의 출처 신뢰도
+
+이 리서치의 모든 원문 인용은 위 목록에서 **[직접] / [로컬] / [스킬]** 표기된 41개 소스에서만 가져왔다. [검색] 표기 소스는 존재 확인과 맥락 파악에만 사용했고, 인용하지 않았다.
+
+## 조사하려 했으나 실패하거나 확인 못한 것
+
+1. **`artifact-design` / `dataviz` / `artifact-diagramming` / `artifact-capabilities`의 SKILL.md 원본 파일** — Claude Code 바이너리 임베드. 파일시스템 전수 검색에서 발견 못함. 단 Skill 도구 호출로 본문은 읽었다.
+2. **Windsurf 공식 문서 원본** — `docs.windsurf.com`이 `docs.devin.ai`로 리다이렉트. 리다이렉트된 문서 기준으로 정리했다. `.windsurfrules` 단일 파일 레거시 포맷의 상세 스펙은 확인 못함.
+3. **#60 ui-ux-pro-max-skill.com "7 prompt techniques"** — HTTP 403.
+4. **Hallmark의 `references/macrostructures.md`, `component-cookbook.md`, `themes/*.md` 개별 파일** — 존재는 SKILL.md에서 확인했으나 파일 자체는 fetch하지 않았다. 21개 매크로구조와 20개 테마의 실제 이름 목록은 확인 못함(SKILL.md에 일부만 언급: Bento Grid, Long Document, Marquee Hero, Stat-Led, Workbench, Conversational FAQ, Manifesto, Photographic, Quote-Led, Specimen).
+5. **`skills-ref` CLI 실제 검증 항목** — 저장소 URL만 확인, 실행 안 함.
+6. **Cursor Skills와 `.mdc` Rules 동시 존재 시 우선순위** — 공식 문서에 명시 없음.
+7. **Bolt.new의 디자인 관련 지시** — 프롬프트를 직접 읽었으나 디자인 전용 섹션이 없음을 확인. 추가 파일이 있을 수 있으나 `Prompt.txt` 하나만 확인했다.
diff --git a/research/skills/05-recommendations.md b/research/skills/05-recommendations.md
new file mode 100644
index 0000000..27236c0
--- /dev/null
+++ b/research/skills/05-recommendations.md
@@ -0,0 +1,722 @@
+# 05. designpaca 설계 원칙 10가지
+
+작성일: 2026-08-20
+근거: 01(로컬 스킬 해부), 02(기법 카탈로그), 03(포맷 스펙)에서 도출.
+각 원칙은 **주장 / 근거 / designpaca에서의 구체 형태 / 반대 의견과 그에 대한 답** 4부로 쓴다.
+
+---
+
+## 원칙 1. SKILL.md 본문은 절차와 인덱스만 담는다. 지식은 references/로 뺀다.
+
+### 주장
+SKILL.md 본문은 **400~480줄, 5,000토큰 이내**로 유지한다. 미학 지식(anti-pattern 카탈로그, 타이포그래피, 컬러, 레이아웃, 모션, 반응형, 디자인 시스템 매핑)은 전부 `references/*.md`로 분리한다. 본문에는 (a) 절차, (b) 참조 파일 인덱스 표, (c) 필수 게이트만 남긴다.
+
+### 근거
+세 가지가 겹친다.
+
+**첫째, 공식 권고 수치가 명확하다.**
+> "Keep SKILL.md body under 500 lines for optimal performance"
+> "**Instructions** (< 5000 tokens recommended)"
+> — Anthropic best practices / Agent Skills spec
+
+**둘째, 컨텍스트 수명이 하드 제약이다.**
+> "the rendered `SKILL.md` content enters the conversation as a single message and **stays there for the rest of the session**"
+> "Claude Code re-attaches the most recent invocation of each skill after the summary, **keeping the first 5,000 tokens of each. Re-attached skills share a combined budget of 25,000 tokens.**"
+> — Claude Code skills docs
+
+design-taste-frontend는 1,206줄(약 22K 토큰)이다. 컴팩션 한 번이면 앞 5K만 남는다. **§9 AI Tells도 §14 Pre-Flight도 사라진다.** 그리고 25K 공유 예산을 혼자 다 먹어서 다른 스킬을 밀어낸다.
+
+**셋째, 참조 파일은 읽기 전까지 0토큰이다.**
+> "**No context penalty for large files:** Reference files, data, or documentation don't consume context tokens until actually read"
+> — Anthropic best practices
+
+**대조군이 있다.** dataviz는 SKILL.md 약 80줄 + `references/` 7개 + `scripts/` 2개다. 같은 밀도의 지식을 1/10 토큰으로 상주시킨다. Hallmark도 SKILL.md는 절차만 담고 지식은 전부 참조 파일이다.
+
+### designpaca에서의 구체 형태
+
+```
+designpaca/
+├── SKILL.md                      # 400~480줄
+├── references/
+│   ├── anti-patterns.md          # AI 텔 카탈로그 (무엇/왜/대신)
+│   ├── slop-gates.md             # 출력 후 예/아니오 게이트
+│   ├── typography.md
+│   ├── color.md
+│   ├── layout.md                 # 매크로구조 인덱스
+│   ├── motion.md
+│   ├── copy.md
+│   ├── responsive.md             # 실무 렌더링 버그 포함
+│   ├── design-systems.md         # 공식 DS 매핑 + 설치 명령
+│   ├── redesign.md
+│   └── design-md-template.md
+├── assets/themes/                # 테마별 개별 파일
+└── scripts/                      # 선택
+```
+
+본문의 인덱스는 dataviz 형식을 따른다:
+```markdown
+| File | What it answers | When to load |
+|------|-----------------|--------------|
+| `references/anti-patterns.md` | 무엇이 AI처럼 보이는가 | 항상, 출력 직전 |
+| `references/typography.md` | 폰트 페어링·스케일 | 타입 결정 시 |
+| `references/design-systems.md` | 공식 DS를 써야 하나 | 브리프가 대시보드/엔터프라이즈일 때만 |
+```
+
+**규칙**: 참조 파일은 SKILL.md에서 1단계로만 링크. 참조 파일끼리 링크 금지. 100줄 넘는 참조 파일에는 목차.
+
+### 반론과 답
+**반론**: "참조 파일을 안 읽고 넘어가면 어쩌나."
+**답**: 그래서 "언제 로드하는가"를 인덱스에 명시하고, 절차 단계에 "지금 X를 읽어라"를 박아넣는다. Hallmark가 그렇게 한다. 그리고 안 읽고 넘어가는 실패보다 **컴팩션으로 통째로 사라지는 실패가 훨씬 크다.**
+
+---
+
+## 원칙 2. 가장 중요한 규칙 3~5개를 파일 최상단에 별도 블록으로 둔다.
+
+### 주장
+프론트매터 바로 다음, 제목·역할 부여·개요보다 **먼저** 핵심 규칙 블록을 놓는다. 그 블록은 "이 규칙은 모델의 기본 동작을 이긴다"고 명시한다.
+
+### 근거
+**컴팩션 생존선이 앞 5,000토큰이다.** 물리적으로 앞에 있어야 살아남는다.
+
+그리고 긴 문서에서 후반부 지시 준수율이 떨어진다는 것은 실무 관찰로 확인된다. design-taste-frontend가 §4.7에서 스스로 인정한다:
+> **EYEBROW RESTRAINT (mandatory, the #1 violated rule in production tests).**
+
+가장 많이 위반되는 규칙이 문서 중반에 있다.
+
+imagegen-frontend-web은 반대로 했다. 파일 6번째 줄:
+> # HARD OUTPUT RULE — READ FIRST
+> **Generate one separate horizontal image PER section. Always. No exceptions.**
+> ...
+> **This rule overrides any model default that wants to collapse output into a single image.**
+
+마지막 문장이 중요하다. **규칙이 모델 기본값과 싸운다는 사실을 명시**한다.
+
+### designpaca에서의 구체 형태
+
+프론트매터 직후:
+
+```markdown
+# READ FIRST — 이 5가지는 다른 모든 판단보다 먼저다
+
+1. **프로젝트에 `design.md`가 있으면 그것이 최상위다.** 이 스킬의 모든 기본값을 덮어쓴다.
+   없으면 기존 코드에서 토큰(폰트/팔레트/스페이싱/반경)을 먼저 읽는다.
+2. **코드를 쓰기 전에 Design Read 한 줄과 선택(구조·테마·다이얼)을 평문으로 출력한다.**
+   선언 없이 시작한 출력은 실패로 간주한다.
+3. **트리트먼트를 먼저 정한다.** 메모·플랜·데모는 유틸리티, 랜딩·포트폴리오는 에디토리얼.
+   확신이 안 서면 유틸리티 쪽. 과잉 디자인이 과소 디자인보다 나쁘다.
+4. **색·폰트는 반드시 명명 토큰을 경유한다.** 인라인 hex, 인라인 font-family, `text-white`
+   같은 직접 색 클래스는 금지. 토큰에 없으면 토큰을 먼저 추가한다.
+5. **없는 것을 만들어내지 않는다.** 지표, 후기, 로고, 스크린샷. 없으면 라벨 붙은
+   플레이스홀더를 두고 사용자에게 요구한다. 숫자 모양의 구멍은 정직하고, 지어낸 숫자는 슬롭이다.
+
+이 5가지는 모델의 기본 동작과 충돌한다. 충돌할 때 이 규칙이 이긴다.
+```
+
+### 반론과 답
+**반론**: "역할 부여가 먼저 와야 톤이 잡히지 않나."
+**답**: 역할 부여는 그 다음 20줄에 놓아도 효과가 유지된다. 규칙은 위치에 민감하지만 페르소나는 덜하다. 그리고 5개 규칙 자체가 이미 톤을 전달한다.
+
+---
+
+## 원칙 3. description은 3부 구성으로 200~350자. 확장 프론트매터는 쓰지 않는다.
+
+### 주장
+프론트매터는 `name`과 `description` **둘뿐**. description은 (1) 무엇을 하는가, (2) 어떤 요청에서 발동하는가(한국어·영어 리터럴 문구 포함), (3) 어떤 요청에서는 발동하지 않는가로 구성하고 **200~350자**를 지킨다.
+
+### 근거
+
+**확장 필드는 크로스툴 배포를 깬다.**
+> "**If you include any field the spec doesn't allow, packaging or upload fails with a hard error** instead of ignoring the field: `Unexpected key(s) in SKILL.md frontmatter: argument-hint. Allowed properties are: allowed-tools, compatibility, description, license, metadata, name`"
+> — Claude Code skills docs
+
+로컬 커뮤니티 디자인 스킬 13개 전부가 이미 `name`+`description`만 쓴다. 이건 우연이 아니라 수렴이다.
+
+**길이 상한은 두 겹이다.**
+- 스펙 상한: 1,024자
+- Claude Code 목록 상한: description + when_to_use 합쳐 1,536자
+- **실효 상한: 스킬 목록 예산.** "The budget scales at 1% of the model's context window" — 이 사용자 환경에는 스킬이 40개 이상이라 긴 description은 잘린다.
+
+imagegen-frontend-web의 620자 description은 이 환경에서 위험하다.
+
+**배제 조건이 과잉 발동을 막는 유일한 방법이다.** Codex 문서가 스펙 수준에서 이걸 요구한다:
+> `description: Explain exactly when this skill **should and should not** trigger.`
+
+**한국어 리터럴이 필요하다.** 이 사용자는 한국어로 대화한다. `codex-image`가 한국어 발화를 나열한 이유가 그것이다.
+
+### designpaca에서의 구체 형태
+
+```yaml
+---
+name: designpaca
+description: >-
+  웹 UI를 새로 만들거나 다시 디자인할 때 쓴다. 랜딩페이지, 포트폴리오,
+  마케팅·제품 페이지, 기존 사이트 리디자인이 대상이다. "랜딩 만들어줘",
+  "디자인 예쁘게", "이 페이지 다시 디자인", "UI 만들어줘", "design a landing page",
+  "make this look better", "redesign this page" 같은 요청에 발동한다.
+  브리프를 먼저 읽고 방향을 선언한 뒤, 템플릿처럼 보이지 않는 UI를 만든다.
+  대시보드·데이터테이블·차트·네이티브 모바일 앱, 그리고 버그 수정이나
+  기능 추가처럼 시각 결과가 목적이 아닌 작업에는 쓰지 않는다.
+---
+```
+
+(약 300자. 3부 구성 충족. 3인칭. 한/영 리터럴 포함. 배제 조건 명시.)
+
+### 반론과 답
+**반론**: "`paths`로 `**/*.tsx`를 걸면 자동 발동이 정확해지지 않나."
+**답**: 두 가지 문제가 있다. (1) `paths`는 Claude Code와 Cursor에만 있고 Codex에는 없다. (2) **새 페이지를 만들 때는 파일이 아직 없다.** 디자인 스킬의 가장 흔한 진입점("랜딩 만들어줘")에서 작동하지 않는다.
+
+---
+
+## 원칙 4. 모든 규칙은 조건부다. 하드 밴에는 반드시 오버라이드 경로를 붙인다.
+
+### 주장
+"절대 금지"를 기본 문법으로 쓰지 않는다. **"기본값으로는 지양 + 오버라이드 조건 + 설명 의무"** 3단이 표준 형태다. 예외는 원칙 5에서 정의하는 소수의 하드 게이트뿐이다.
+
+### 근거
+
+**design-taste-frontend v1 → v2가 이 방향으로 갔다.**
+
+v1:
+> **THE LILA BAN:** The "AI Purple/Blue" aesthetic is **strictly BANNED**.
+
+v2:
+> **THE LILA RULE:** ... is **discouraged as a default**. ...
+> **Override:** if the brand or brief explicitly asks for purple / violet / lila, **embrace it.** But execute with intent.
+
+v2 문서 최상단이 철학을 선언한다:
+> Every rule below is **contextual**. None of it fires automatically. First read the brief, then pull only what fits.
+
+**Anthropic 공식이 우선순위를 못 박는다.**
+> **Where the brief pins down a visual direction, follow it exactly — the brief's own words always win**, including when it asks for one of these looks.
+> — frontend-design
+
+> **Precedence is always: the user's own words, then the project's existing system, then your choices.**
+> — artifact-design
+
+**탈출구 없는 금지는 두 방향으로 실패한다.** (1) 사용자가 명시적으로 보라색을 요청해도 모델이 거부한다. (2) 모델이 하나를 어기기 시작하면 규칙 체계 전체의 권위가 무너진다.
+
+**"설명 의무"가 오버라이드 남용을 막는다.**
+> Serif is only acceptable when ... the aesthetic family is genuinely editorial / luxury / publication **AND you can articulate why this specific serif fits this specific brand**
+> **Default-reaching for it because "this is a cookware brief" is banned.**
+> — design-taste-frontend §4.1, §4.2
+
+설명할 수 없으면 그건 기본값 회귀라는 뜻이므로 자동으로 걸러진다.
+
+### designpaca에서의 구체 형태
+
+표준 규칙 템플릿:
+
+```markdown
+### <규칙 이름>
+<무엇이 기본 지양 대상인가. 구체적으로.>
+
+**왜.** <한 문장. 미학이 아니라 결과로 설명.>
+
+**대신.** <실행 가능한 대안 2~3개.>
+
+**해도 되는 경우.** <구체 조건> 이 경우 **왜 이 브리프에 이것이 맞는지 한 문장으로
+설명하고 진행한다.** 설명할 수 없으면 기본값으로 회귀한 것이다.
+```
+
+우선순위 체인을 본문 상단에 명시:
+```
+사용자의 명시적 지시 > 프로젝트의 design.md > 프로젝트의 기존 코드 토큰 > 이 스킬의 기본값
+```
+
+### 반론과 답
+**반론**: "오버라이드를 열어두면 모델이 다 빠져나간다."
+**답**: 그래서 원칙 5(하드 게이트)와 짝을 이룬다. 그리고 "설명 의무"가 실질적 장벽이다. 실제로 design-taste-frontend v2가 v1보다 결과가 좋다는 것이 이 스킬이 v1을 "backward compatibility용"으로만 남긴 이유다.
+
+---
+
+## 원칙 5. 하드 게이트는 검증 가능한 것에만 건다. 세거나 grep 할 수 있어야 한다.
+
+### 주장
+오버라이드 없는 절대 규칙은 **기계적으로 검증 가능한 항목에만** 적용한다. 취향 판단에는 절대 규칙을 걸지 않는다. 게이트는 20~30개로 제한하고, 각각 예/아니오 질문 형태로 쓴다.
+
+### 근거
+
+**주관적 규칙에 하드 밴을 걸면 지켜지지 않는다.** design-taste-frontend가 그 증거를 문서에 남겼다:
+> **The agent has historically ignored em-dash limits when phrased as "use sparingly." The phrasing here is binary: zero em-dashes.**
+
+em-dash는 grep 가능하다. 그래서 이진 규칙이 작동한다.
+
+**반면 카운트 규칙은 즉시 검증된다.**
+> **Pre-Flight Check is mechanical:** count instances of `uppercase tracking` across all section components. **If count > ceil(sectionCount / 3), the output fails.**
+
+**체크박스보다 질문형이 낫다.** Hallmark의 58 게이트는 전부 질문이고 정답이 전부 "아니오"다:
+> 4. Is any card nested inside another card?
+> 10. Is `transition-all` (or `transition: all`) used anywhere?
+> 14. Are you animating `width`, `height`, `top`, `left`, `margin`, or `padding` anywhere?
+> **If any answer is yes, fix it. Do not ship slop.**
+
+체크박스("- [ ] X를 했는가")는 모델이 무비판적으로 전부 체크한다. 질문형은 실제 검사 행위를 요구한다.
+
+**하지만 58개는 과하다.** design-taste-frontend의 60개 체크박스도 마찬가지다. 매번 정직하게 60개를 검사하는 것은 비현실적이고, 모델은 결국 전부 통과 표시를 한다. **20~30개가 실효 상한**이다.
+
+### designpaca에서의 구체 형태
+
+**본문에 하드 게이트 12개** (가장 자주 깨지고 가장 치명적인 것):
+
+```markdown
+## 출력 전 하드 게이트 — 전부 "아니오"여야 한다
+
+1. 인라인 hex/rgb/oklch 색상값이나 인라인 font-family가 토큰 밖에 있는가?
+2. 한 페이지에서 액센트 색이 2개 이상인가?
+3. 코너 반경 체계가 문서화된 규칙 없이 섞여 있는가?
+4. 페이지 중간에 테마(라이트/다크)가 뒤집히는가?
+5. 320~1920px 사이 어느 폭에서든 가로 스크롤이 생기는가?
+6. 버튼 라벨·내비 링크·CTA가 2줄로 접히는 폭이 있는가?
+7. 버튼 텍스트가 버튼 배경과 대비 4.5:1 미만인가?
+8. `transform`/`opacity` 외의 속성을 애니메이션하는가?
+9. `h-screen`/`100vh`를 풀하이트 섹션에 썼는가? (`100dvh`여야 한다)
+10. `window.addEventListener('scroll')`을 썼는가?
+11. 사용자가 주지 않은 수치(지표·통계·후기·고객 수)가 페이지에 있는가?
+12. `<div>`로 만든 가짜 스크린샷·가짜 브라우저바·가짜 폰 프레임이 있는가?
+```
+
+**나머지 게이트는 `references/slop-gates.md`로.** 출력 직전에 그 파일을 읽고 실행한다.
+
+**카운트 규칙 5개**를 본문에:
+```
+- eyebrow(작은 대문자 라벨) 개수 ≤ ceil(섹션수 / 3), 히어로 포함
+- 같은 image+text 스플릿 레이아웃 연속 ≤ 2회
+- 마퀴 ≤ 1개
+- 8섹션 페이지에 최소 4개의 서로 다른 레이아웃 패밀리
+- 히어로: 헤드라인 ≤ 2줄, 서브텍스트 ≤ 20단어, 텍스트 요소 ≤ 4개
+```
+
+### 반론과 답
+**반론**: "취향 문제야말로 강제해야 하는 것 아닌가."
+**답**: 취향은 원칙 4의 조건부 규칙과 원칙 8의 자기 채점으로 다룬다. 하드 게이트에 취향을 넣으면 게이트 전체의 신뢰도가 떨어진다. 모델이 "12번은 지킬 수 없으니 대충 넘어가자"를 배우면 1~11번도 같이 무너진다.
+
+---
+
+## 원칙 6. 프로젝트 루트에 design.md를 쓰고, 다음 실행은 그것을 읽는다.
+
+### 주장
+designpaca는 UI만 만들고 끝나지 않는다. **프로젝트 루트에 `design.md`를 쓴다.** 그리고 실행할 때마다 **먼저 그 파일을 찾고, 있으면 스킬 기본값보다 우선한다.** 함께 `.designpaca/log.json`에 이번 실행의 선택(구조·테마·액센트 대역)을 append 한다.
+
+### 근거
+
+**세션 간 일관성 문제는 상태 없이 풀 수 없다.** design-taste-frontend는 이 지시를 세 군데에 넣었다:
+> **Palette-rotation rule:** if the previous premium-consumer project you generated used the beige+brass family, this one MUST use a different family.
+> - [ ] **Serif discipline**: ... Different serif from your previous project?
+
+**전부 작동하지 않는다.** 모델은 이전 세션을 기억하지 못한다.
+
+**세 개의 독립 프로젝트가 파일 기반 해법에 도달했다.**
+- Superdesign: `.superdesign/design-system.md` (필수, 없으면 먼저 생성)
+- Hallmark: `design.md` (locked system, "overrides everything") + `.hallmark/log.json` (최근 20개)
+- stitch-design-taste: `DESIGN.md` 생성이 스킬의 전부
+
+Superdesign의 DESIGN.md 문서가 이유를 가장 정확히 쓴다:
+> Coding agents write great code and mediocre interfaces. One reason: **they have no persistent sense of *how this product is supposed to look*.** `AGENTS.md` and `CLAUDE.md` tell an agent how your code works. **A design system file does the same for how your product looks** ... so every UI the agent ships is consistent with the last one instead of reinventing a generic look each time.
+>
+> **Capture it once; every design after that is consistent, on-brand, and faster to ship.**
+
+**그리고 이것이 "AI 슬롭"의 정의를 바꾼다.** Hallmark의 관점:
+> **Repeating a macrostructure across outputs is the structural fingerprint of templating, which is the AI tell Hallmark exists to defeat.**
+
+개별 페이지가 아무리 예뻐도, 프로젝트 안의 페이지 5개가 같은 구조면 그게 슬롭이다.
+
+### designpaca에서의 구체 형태
+
+**읽기 (Step 0):**
+```markdown
+## Step 0 — 무엇이 이미 있는지 먼저 읽는다 (질문하기 전에)
+
+1. `design.md` (또는 `.designpaca/design.md`) — 있으면 이것이 최상위다. 스킬 기본값을 전부 덮는다.
+2. 없으면 코드에서 추출: 폰트 스택(next/font, @font-face, tailwind config),
+   팔레트(`:root`의 hex/hsl/oklch, tokens.json), 스페이싱 스케일, 모션 라이브러리, 프레임워크
+3. `.designpaca/log.json` — 최근 3~5개 항목을 읽는다
+4. **발견한 것을 파일:줄 인용과 함께 한 번 출력한다.** 사용자가 검증할 수 있어야 한다.
+```
+
+**쓰기 (마지막 단계):**
+```json
+// .designpaca/log.json — 앞에 append, 최근 20개만 유지
+{ "date": "2026-08-20", "structure": "<이름>", "theme": "<이름>",
+  "accent_band": "warm|cool|neutral|chromatic", "brief": "<한 줄>" }
+```
+
+```markdown
+<!-- design.md — 사용자가 "시스템 고정"이라고 하면 생성 -->
+# Design System: <프로젝트명>
+## 1. 제품 맥락 (무엇을, 누구를 위해, 핵심 가치)
+## 2. 컬러 (이름 + hex + 역할)
+## 3. 타이포그래피 (역할별 폰트 + 스케일)
+## 4. 스페이싱·반경·그림자
+## 5. 모션 (이징 이름, 지속시간, reduced-motion)
+## 6. 컴포넌트 패턴
+## 7. 이 프로젝트에서 금지된 것
+```
+
+템플릿은 `references/design-md-template.md`에. 작성 규칙은 stitch-design-taste에서:
+> - **Be Descriptive:** "Deep Charcoal Ink (#18181B)" — not just "dark text"
+> - **Be Precise:** Include exact hex codes, rem values, pixel values
+> - Pitfall: 기술 용어를 번역 없이 쓰기 ("rounded-xl" 대신 "generously rounded corners")
+
+### 반론과 답
+**반론**: "파일 쓰기 권한이 없는 환경에서는?"
+**답**: 로그 쓰기 실패는 조용히 넘어가고, 그 세션 안에서는 명시적 선언(원칙 7)으로 다양성을 유지한다. `design.md`는 사용자가 요청할 때만 쓴다. 읽기는 어디서나 된다.
+
+**반론**: "매번 파일을 읽으면 느리지 않나."
+**답**: Hallmark가 답을 준다. `.hallmark/preflight.json`에 캐시하고 "re-scan only on user request or when package.json mtimes are newer".
+
+---
+
+## 원칙 7. 코드를 쓰기 전에 선택을 평문으로 선언한다.
+
+### 주장
+Design Read 한 줄 + 선택 프리뷰 블록을 **코드 이전에** 출력한다. 무엇을 골랐는지, 이전 실행과 어느 축에서 다른지, 다이얼 값이 얼마인지를 사용자가 읽을 수 있는 형태로 낸다.
+
+### 근거
+
+**LLM이 나쁜 디자인을 내는 1번 원인은 미학 지식 부족이 아니라 브리프를 안 읽는 것이다.**
+> Most LLM design output is bad because **the model jumps to a default aesthetic instead of reading the room.**
+> — design-taste-frontend §0
+
+**선언은 세 가지를 동시에 한다.** (1) 선택 행위를 강제한다. (2) 이후 출력이 선언과 일관되게 나온다. (3) 코드 생성 전에 교정 지점을 만든다.
+
+**gpt-taste의 "Python RNG"도 결국 이 효과를 노린 것이다.** 난수는 가짜지만 선언은 진짜다. 그렇다면 가짜 난수를 걷어내고 선언만 남기는 게 정직하다.
+
+**Hallmark의 프리뷰 블록이 형태의 모범이다:**
+```markdown
+**Hallmark · v1.1.0**
+- **Macrostructure** · <name>
+- **Theme** · <name>
+- **Sections** · <section names>
+- **Motion** · <primitives, or "none">
+- **Slop test** · <N / 58 pass/fail>
+- **Diversification** · <axes that differ from prior run>
+```
+
+**단, 전부 보여주면 안 된다.** Anthropic 공식:
+> Try to do a lot of this planning and iteration **in your thinking**, and only show ideas to the user when you have higher confidence it'll delight them.
+
+브레인스토밍은 사고 안에서, **결론만** 프리뷰로.
+
+### designpaca에서의 구체 형태
+
+```markdown
+## Step 2 — 방향을 선언한다 (코드 전)
+
+먼저 사고 안에서: 후보 방향 2~3개를 만들고, 각각을 브리프에 대조해 가장 특정한 것을 고른다.
+비슷한 프롬프트를 머릿속으로 돌려서 같은 곳에 도착하면 그건 기본값이다. 다시 고른다.
+
+그 다음 사용자에게 **결론만** 이 형태로 출력한다:
+
+**designpaca**
+- **읽기** · <페이지 종류> for <청중>, <분위기> 언어
+- **트리트먼트** · 유틸리티 | 에디토리얼
+- **구조** · <매크로구조 이름>
+- **타입** · <디스플레이> + <본문> (+ <유틸리티>)
+- **컬러** · <액센트 이름 (hex)> / <중성 계열>
+- **시그니처** · <이 페이지를 기억하게 만들 단 하나의 요소>
+- **모션** · <목록 또는 "없음">
+- **다이얼** · variance <n> / motion <n> / density <n>
+- **직전과 다른 축** · <축 이름> (로그가 있을 때)
+```
+
+**"시그니처" 항목이 원칙 9(대담함은 한 곳에)와 연결된다.** 여기에 하나만 적을 수 있으므로 자동으로 절제가 강제된다.
+
+### 반론과 답
+**반론**: "사용자가 빨리 결과를 보고 싶어할 텐데 프리뷰가 방해되지 않나."
+**답**: 프리뷰는 9줄이다. 잘못된 방향으로 400줄 HTML을 만드는 것보다 훨씬 빠르다. 그리고 사용자가 "그냥 해"라고 하면 다음 턴부터 생략할 수 있다.
+
+---
+
+## 원칙 8. 트리트먼트를 먼저 정한다. 기본기는 항상, 대담함은 조건부.
+
+### 주장
+"디자인할지 말지"가 아니라 **"어느 정도의 트리트먼트가 맞는지"**를 먼저 판단한다. 스킬을 2계층으로 나눈다: **모든 산출물에 적용되는 기본기**와 **에디토리얼 브리프에만 적용되는 대담함**.
+
+### 근거
+
+**디자인 스킬의 두 번째로 큰 실패는 과잉 디자인이다.** 메모에 거대한 히어로를 붙이고, B2B 대시보드에 Awwwards 미학을 씌우는 것. high-end-visual-design과 gpt-taste는 이 실패를 구조적으로 피할 수 없다. 트리트먼트 축이 없기 때문이다.
+
+**artifact-design이 이 문제의 가장 정확한 처방을 담고 있다:**
+> **Calibrate treatment, not whether to design.** A doc deserves the same craft as a landing page — **what changes is the treatment that craft is delivered in.**
+>
+> Many requests call for a more utilitarian treatment: a plan, a memo, a demo. Make it polished ... **but avoid over-designing. Most pages do not need a flashy, gigantic hero.**
+>
+> **When unsure: a well-composed page is never the wrong answer; an over-designed visual identity sometimes is.**
+>
+> Fundamentals below apply to everything. **The editorial process after that runs only when the read above says so.**
+
+그리고 UI일 때 무엇이 달라지는지도 명시한다:
+> A dashboard or tool is scanned and operated, not read top-to-bottom, so **the craft shifts from typography to information design.** Surface the summary before the detail; encode state in form as well as number.
+
+**design-taste-frontend는 이걸 "범위 밖 선언"으로 처리한다:**
+> This skill is NOT for: Dashboards / Data tables / Multi-step forms / Code editors / Native mobile / Realtime collab UIs.
+> If the brief is one of the above, **say so explicitly**, point to the right tool.
+
+두 접근을 합치는 게 낫다. **범위 밖은 거절하고, 범위 안에서는 트리트먼트를 보정한다.**
+
+### designpaca에서의 구체 형태
+
+**본문 구조:**
+```markdown
+## 트리트먼트 보정 (첫 판단)
+
+**에디토리얼** — 랜딩페이지, 포트폴리오, 캠페인 페이지, 제품 소개, 사용자가 자랑할 물건.
+  → 대담함 예산 1개. 시그니처 요소 하나. 나머지는 조용히.
+
+**유틸리티** — 내부 도구, 문서 페이지, 관리 화면, 데모, 플랜/메모 페이지.
+  → 진짜 타이포그래피 위계, 계산된 여백, 제대로 된 팔레트. 그것으로 충분하다.
+     거대한 히어로 없음. 스크롤 연출 없음. 장식 없음.
+
+**정보 밀도형** — 대시보드, 데이터 테이블, 차트 화면.
+  → 이 스킬의 미학 규칙 대부분이 적용되지 않는다. 위계는 타이포가 아니라 정보설계가 만든다.
+     요약을 먼저, 상세를 나중에. 상태는 숫자만이 아니라 형태로도 인코딩한다
+     (필, 칩, 심각도 스트라이프). 의미색(good/warning/critical)은 액센트와 별개다.
+     차트가 있으면 dataviz 스킬을 쓴다.
+
+**범위 밖** — 네이티브 모바일(Apple HIG/Material), 코드 에디터(Monaco/CodeMirror),
+  실시간 협업 UI. → 그렇다고 말하고 올바른 도구를 알려준다.
+
+확신이 안 서면 유틸리티 쪽으로 기운다.
+**잘 구성된 페이지는 틀린 답이 된 적이 없다. 과잉 디자인된 비주얼 아이덴티티는 가끔 틀린 답이다.**
+
+---
+
+## 모든 트리트먼트에 적용되는 기본기
+<타이포 위계 / 여백 / 토큰 / 대비 / 반응형 / 포커스 / reduced-motion / 카피>
+
+## 에디토리얼일 때만
+<시그니처 요소 / 히어로 논지 / 모션 연출 / 미학적 위험 1개>
+```
+
+### 반론과 답
+**반론**: "사용자가 designpaca를 부른 건 화려한 걸 원해서 아닌가."
+**답**: 아니다. 사용자가 원하는 건 **잘 만들어진 것**이다. artifact-design의 문장이 이 차이를 정확히 잡는다. 그리고 유틸리티 트리트먼트를 명시적으로 인정하지 않으면, 모델은 메모에도 히어로를 붙인다.
+
+---
+
+## 원칙 9. 대담함은 한 곳에만. 나머지는 조용히.
+
+### 주장
+"창의적으로 하라"를 지시로 쓰지 않는다. 대신 **시그니처 요소 정확히 하나**를 정하게 하고, 나머지 전부에 절제를 요구한다. 그리고 그 절제를 검증 가능한 수치로 만든다.
+
+### 근거
+
+**"창의적으로"는 모든 섹션에 장식을 붙이는 결과를 낳는다. 그게 슬롭이다.**
+
+**Anthropic 공식이 이 문제의 가장 좋은 프레이밍을 갖고 있다:**
+> **Spend your boldness in one place.** Let the signature element be the one memorable thing, keep everything around it quiet and disciplined, and **cut any decoration that does not serve the brief. Not taking a risk can be a risk itself!**
+>
+> **Consider Chanel's advice: before leaving the house, take a look in the mirror and remove one accessory.**
+
+계획 단계에도 이 항목이 들어간다:
+> **Signature:** the single unique element this page will be remembered by that embodies the brief.
+
+**그런데 이것만으로는 검증이 안 된다.** 두 스킬이 이걸 수치로 만들었다:
+
+Hallmark:
+> 23. Does the accent colour cover more than ~5 % of any single viewport?
+
+imagegen-frontend-web:
+> ### Second-Read Moment
+> **Pick exactly 1** unobvious but legible motif and place it deliberately, **once across the page**.
+> **Avoid gimmick-for-gimmick: the moment must aid scan order or brand recall.**
+
+**그리고 복잡도를 방향에 맞추는 규칙이 짝을 이룬다:**
+> **Match complexity to the vision.** Maximalist directions need elaborate execution; **minimal directions need precision in spacing, type, and detail. Elegance is executing the chosen vision well.**
+> — frontend-design
+
+> **Simplicity is not the goal by itself. Cleanliness is the goal.** ... The rule is: **not always simple, always clean**
+> — imagegen-frontend-mobile §25
+
+### designpaca에서의 구체 형태
+
+**프리뷰 블록에 "시그니처" 슬롯 1개** (원칙 7). 하나만 적을 수 있다.
+
+**본문 규칙:**
+```markdown
+## 대담함 예산
+
+이 페이지에서 기억될 요소는 **하나**다. 프리뷰의 "시그니처"에 적은 것.
+그 하나에 모든 대담함을 쓰고, 나머지 전부는 조용하고 규율 있게 만든다.
+
+검증:
+- 액센트 색은 어느 뷰포트에서도 화면 면적의 5%를 넘지 않는다
+- 시그니처 요소 외에 "이건 좀 특이하네" 소리를 들을 만한 것이 2개 이상이면 하나를 뺀다
+- 브리프에 봉사하지 않는 장식은 전부 제거한다
+
+위험을 안 지는 것도 위험이다. 시그니처가 "그냥 큰 헤드라인"이면 그건 시그니처가 아니다.
+
+**복잡도는 방향에 맞춘다.** 맥시멀리즘은 정교한 실행을 요구하고, 미니멀리즘은
+여백·타입·디테일의 정밀함을 요구한다. **미니멀은 요소를 지우는 게 아니라 남은 것을
+정확하게 만드는 것이다.** 단순함이 목표가 아니라 깔끔함이 목표다.
+```
+
+### 반론과 답
+**반론**: "그럼 결과가 밋밋해지지 않나."
+**답**: 반대다. 대담함이 분산되면 아무것도 기억에 안 남는다. 한 곳에 집중되면 그 하나가 기억된다. 그리고 "Not taking a risk can be a risk itself"가 밋밋함에 대한 방어다.
+
+---
+
+## 원칙 10. 미학 규칙과 실무 버그 규칙을 분리한다. 버그 규칙은 협상 불가다.
+
+### 주장
+스킬의 규칙을 두 종류로 명확히 나눈다.
+- **미학 규칙** — 조건부, 오버라이드 있음, 브리프가 이긴다
+- **실무 규칙** — 접근성·성능·반응형·정직성. **오버라이드 없음.** 브리프가 요청해도 안 된다.
+
+그리고 실무 규칙에는 "AI가 반복적으로 만드는 실제 렌더링 버그" 목록을 포함한다.
+
+### 근거
+
+**두 종류가 섞여 있으면 둘 다 약해진다.** "Inter를 쓰지 마라"와 "버튼 텍스트가 배경과 대비 4.5:1을 넘겨라"가 같은 목록에 있으면, 모델은 둘 다 취향 문제로 읽는다.
+
+**여러 소스에서 같은 버그가 반복 등장한다.** 이건 실측 데이터에 가깝다:
+
+`h-screen` → `100dvh`: design-taste-frontend, high-end-visual-design, stitch-design-taste, redesign-existing-projects **4개 스킬 공통**
+
+`transform`/`opacity`만 애니메이션: **거의 모든 소스 공통**
+
+토큰 경유 강제: design-taste-frontend, Hallmark, **v0, Lovable 4개 시스템이 독립적으로 도달**
+> "DO NOT use direct colors like text-white, bg-white, bg-black, etc. Everything must be themed via design tokens" — v0
+> "DO NOT use direct colors like text-white, text-black, bg-white, bg-black" — Lovable
+> "Inline OKLCH/hex/rgb or font declarations are forbidden." — Hallmark
+
+**그리고 미학과 무관한 순수 버그들이 있다:**
+> 50. **Image-bearing grid track without `minmax(0, 1fr)`.** — Hallmark
+> 51. **Display headers without long-word wrap** (`overflow-wrap: anywhere; min-width: 0`) — Hallmark
+> 56. **Sticky element at `top: 0` below a sticky page-level nav.** Auto-fail. — Hallmark
+> **NO 100vw widths.** Breaks on scrollbar-visible desktops. — Hallmark
+> It's easy to generate CSS classes that cancel each other out (`.section` vs `.cta`) — frontend-design
+> Lay out sibling groups with flex or grid and `gap`, **not per-element margins that silently collapse or double** — artifact-design
+> **a color whose only definition sits behind `[data-theme]` never applies in the un-stamped state** — artifact-design
+> `useState`로 연속값 추적 금지 — "collapses on mobile" — design-taste-frontend
+> `loading="lazy"` on LCP — "p75 of 720 ms vs. 364 ms for preloaded" — Hallmark
+
+**정직성도 실무 규칙이다.** 지어낸 지표는 취향 문제가 아니라 신뢰 문제다:
+> A page that lies on its proof bar can't be trusted on its claims either ... **The number-shaped hole is honest; the fabricated number is slop.**
+> — Hallmark
+
+### designpaca에서의 구체 형태
+
+**본문에 별도 섹션:**
+
+```markdown
+## 협상 불가 규칙
+
+아래는 취향이 아니다. 브리프가 요청해도 예외를 두지 않는다.
+미학 규칙(조건부)과 달리 이 목록에는 오버라이드 경로가 없다.
+
+### 접근성
+- 모든 텍스트와 UI 요소가 배경에 대해 WCAG AA (본문 4.5:1, 18px+ 대형 텍스트 3:1)
+- 버튼 텍스트가 버튼 배경에 대해 대비 통과. 고스트 버튼이 사진 위에 있으면 스크림이나 스트로크
+- 폼 입력·플레이스홀더·헬퍼·에러 텍스트 전부 대비 통과
+- 모든 인터랙티브 요소에 보이는 `:focus-visible`. **포커스 링은 즉시 나타난다.
+  절대 페이드인시키지 않는다** (전환 중에는 키보드 사용자가 아무것도 못 본다)
+- 터치 타깃 최소 44px
+- 색만으로 정보를 전달하지 않는다
+
+### 반응형
+- 320~1920px 전 구간에서 가로 스크롤 없음
+- 버튼 라벨·내비 링크·CTA는 어느 폭에서도 1줄. 안 되면 라벨을 줄인다 (기본 CTA는 3단어 이하)
+- 풀하이트 섹션은 `min-h-[100dvh]`. `h-screen`/`100vh` 금지 (iOS Safari 주소창)
+- `width: 100vw` 금지 (스크롤바 있는 데스크톱에서 깨진다). `width: 100%` + 컨테이너 패딩
+- 이미지가 들어가는 그리드 트랙은 `minmax(0, 1fr)`. 맨 `1fr` 금지
+- 디스플레이 사이즈 텍스트에 `overflow-wrap: anywhere; min-width: 0`
+- 다단 레이아웃마다 768px 미만 붕괴 규칙을 같은 컴포넌트 안에 명시
+- 페이지 레벨 sticky 아래에 또 다른 `top: 0` sticky 금지
+
+### 성능
+- `transform`과 `opacity`만 애니메이션. `top`/`left`/`width`/`height`/`margin`/`padding` 금지
+- `window.addEventListener('scroll')` 금지. IntersectionObserver, 스크롤 구동 CSS
+  (`animation-timeline: view()`), 또는 라이브러리 훅을 쓴다
+- 연속값(마우스 위치, 스크롤 진행률)을 React state로 추적 금지
+- `backdrop-blur`는 fixed/sticky 요소에만. 스크롤 컨테이너나 큰 콘텐츠 영역에 금지
+- 노이즈/그레인은 `position: fixed; pointer-events: none` 의사요소에만
+- LCP 요소에 `loading="lazy"` 금지. `fetchpriority="high"`
+- `prefers-reduced-motion: reduce`에서 모든 공간 이동이 150ms 이하 opacity 크로스페이드로 붕괴
+- `useEffect` 애니메이션에 정리 함수
+
+### 토큰 규율
+- 모든 색과 폰트는 명명된 CSS 커스텀 프로퍼티를 경유한다
+- 인라인 hex/rgb/oklch, 인라인 `font-family`, `text-white`/`bg-black` 같은 직접 색 클래스 금지
+- 필요한 값이 토큰에 없으면 **토큰을 먼저 추가**하고 참조한다
+- 한 페이지 = 하나의 액센트, 하나의 반경 체계, 하나의 테마
+
+### 정직성
+- 사용자가 주지 않은 지표·통계·후기·로고·고객 수를 만들지 않는다.
+  없으면 라벨 붙은 플레이스홀더(`— / 확인 필요`)를 두거나, 사용자에게 묻거나, 그 섹션을 뺀다
+- `<div>`로 가짜 스크린샷·가짜 브라우저바·가짜 폰 프레임·가짜 IDE 크롬을 만들지 않는다
+- 이미지 생성 도구가 없고 실제 이미지도 없으면, 라벨 붙은 플레이스홀더 슬롯을 두고
+  **응답 끝에 무엇이 필요한지 목록으로 말한다**
+- 존재하지 않는 라이브러리를 import 하지 않는다. 쓰기 전에 의존성을 확인한다
+
+### CSS 위생
+- 셀렉터 특이성 충돌 주의. 타입 기반(`.section`)과 요소 기반(`.cta`) 셀렉터가
+  섹션 간 padding/margin을 두고 서로를 상쇄하는 일이 잦다
+- 형제 그룹 간격은 flex/grid의 `gap`으로. 요소별 margin은 조용히 붕괴하거나 두 배가 된다
+- 넓은 콘텐츠(테이블·코드·다이어그램)는 자기 컨테이너에 `overflow-x: auto`
+- 다크모드는 3상태다. 색을 미디어 쿼리나 `[data-theme]` 블록 안에서만 정의하면
+  스탬프 없는 기본 상태에서 적용되지 않는다. `body`에 명시적 배경 토큰을 준다
+```
+
+### 반론과 답
+**반론**: "이 목록이 길다. 원칙 1(500줄)과 충돌하지 않나."
+**답**: 이 섹션은 약 50줄이다. 그리고 **이게 스킬이 실제로 값을 만드는 부분**이다. 미학 지식은 references로 뺄 수 있지만, 이 목록은 매번 적용되어야 하므로 본문에 있어야 한다.
+
+**반론**: "브리프가 `100vh`를 원하면?"
+**답**: `100dvh`가 같은 결과를 더 정확하게 낸다. 이건 취향 대립이 아니라 구식 API 대 신식 API다. 다른 항목들도 마찬가지다. 브리프가 "포커스 링 없애줘"라고 하면 그건 접근성 후퇴이므로 거절하고 대안(더 절제된 포커스 스타일)을 제시한다.
+
+---
+
+## 부록 A. 원칙 간 상호작용
+
+| 원칙 | 지원하는 원칙 | 긴장 관계 |
+|---|---|---|
+| 1. references 분리 | 2(앞부분 배치), 5(게이트 분리) | 10(협상불가 목록은 본문에) |
+| 2. 최상단 핵심 규칙 | 1, 4, 10 | - |
+| 3. description 3부 | - | - |
+| 4. 조건부 규칙 | 8(트리트먼트), 9(대담함) | 5(하드 게이트), 10(협상불가) |
+| 5. 검증 가능 게이트 | 10 | 4 |
+| 6. design.md + 로그 | 7(선언), 9(시그니처) | - |
+| 7. 명시적 선언 | 6, 8, 9 | - |
+| 8. 트리트먼트 보정 | 4, 9 | - |
+| 9. 대담함 한 곳 | 7, 8 | - |
+| 10. 실무 규칙 분리 | 2, 5 | 4 |
+
+**4 vs 5·10의 긴장이 핵심이다.** 해소 방식: **규칙을 세 등급으로 명시적으로 나눈다.**
+- **협상 불가** (원칙 10) — 접근성·성능·반응형·정직성·토큰. 오버라이드 없음
+- **하드 게이트** (원칙 5) — 검증 가능한 슬롭 탐지. 오버라이드 없음, 단 검증 가능한 항목에만
+- **조건부 미학** (원칙 4) — 나머지 전부. 브리프가 이긴다, 설명 의무 있음
+
+스킬 본문에서 이 세 등급을 **시각적으로 구분**해야 한다. 같은 목록에 섞으면 등급이 무너진다.
+
+---
+
+## 부록 B. 명시적으로 채택하지 않는 것
+
+| 항목 | 어디서 왔나 | 채택 안 하는 이유 |
+|---|---|---|
+| 가짜 Python RNG 시뮬레이션 | gpt-taste §1 | 난수가 생성되지 않는다. 같은 프롬프트 → 같은 결과. 원칙 7(명시적 선언)이 같은 효과를 정직하게 낸다 |
+| "이전 프로젝트와 다른 세리프/팔레트" (파일 없이) | design-taste-frontend §4.1, §4.2, §14 | 상태 없이 실행 불가. 원칙 6(로그 파일)로 대체 |
+| 다이얼 9축 | image-to-code §1 | 인지 부하 대비 효과 없음. 3축 유지 |
+| Pre-Flight 체크박스 60개 | design-taste-frontend §14 | 정직한 검사가 불가능한 분량. 본문 12개 + references로 분리 |
+| 슬롭 게이트 58개를 본문에 | Hallmark | 같은 이유. 본문 12개, 나머지는 `references/slop-gates.md` |
+| 단일 미학 강제 | minimalist-ui, industrial-brutalist-ui, high-end-visual-design | designpaca는 여러 방향을 다뤄야 한다. 이들은 `assets/themes/` 아래 개별 테마 파일로 흡수 |
+| `trigger:` 프론트매터 필드 | graphify | 스펙에 없다. claude.ai 업로드/패키징 하드 에러. Windsurf의 `trigger`와 의미도 다르다 |
+| 존재하지 않는 파일 경로 지시 | design-taste-frontend §12 (blocks/) | 모델을 혼란시킨다. 만들 거면 만들고, 아니면 언급하지 않는다 |
+| 특정 프레임워크 고정 (React/Next 전제) | design-taste-frontend §3.A, gpt-taste §5 | Vue, Svelte, Astro, 바닐라 HTML에서도 돌아야 한다. 스택은 사전 스캔(원칙 6 Step 0)에서 감지한다 |
+| GSAP 강제 | gpt-taste §5, design-taste-frontend §5.A/5.B | 스택 의존. 모션 규칙은 라이브러리 불가지론으로 쓴다 |
+| 형용사 나열형 페르소나 ("elite", "$150k agency") | high-end-visual-design, gpt-taste | 정보를 주지 않고, "화려하게 하라"로 오독된다. 원칙 8·9와 충돌 |
+| 이미지 생성 도구 전제 워크플로 | image-to-code, imagegen-* | 환경 의존. 도구가 있으면 쓰고 없으면 정직한 플레이스홀더(원칙 10)로 분기한다 |
+
+---
+
+## 부록 C. 다음 단계 (설계 → 구현)
+
+1. **description 초안 3~5개를 쓰고 트리거 평가를 돌린다.** skill-creator의 절차대로: should-trigger 8~10개, should-not-trigger 8~10개. 네거티브는 "genuinely tricky"해야 한다 (같은 키워드를 공유하지만 다른 걸 필요로 하는 near-miss).
+2. **SKILL.md 본문 400~480줄 초안.** 순서: READ FIRST 5규칙 → 페르소나 3줄 → 트리트먼트 보정 → Step 0 사전 스캔 → Step 1 브리프 읽기 → Step 2 선언 → Step 3 참조 로드 인덱스 → Step 4 빌드 → Step 5 게이트 → Step 6 로그/design.md → 협상 불가 규칙.
+3. **references 11개 작성.** 각각 100줄 넘으면 목차 포함. anti-patterns.md는 `무엇/왜 실패/대신` 3단 구조를 지킨다.
+4. **테마 파일 작성.** minimalist-ui, industrial-brutalist-ui, high-end-visual-design의 내용을 `assets/themes/*.md`로 이식. 인덱스-후-선택 로딩.
+5. **평가.** 최소 3개 시나리오 (새 랜딩 / 기존 페이지 리디자인 / 유틸리티 페이지). 스킬 없는 베이스라인과 비교.
+6. **크로스툴 검증.** `skills-ref validate`, Claude Code `/doctor`, Cursor에서 발동 확인, Codex에서 발동 확인.
+7. **레거시 어댑터 생성 스크립트.** SKILL.md → `.mdc` / Windsurf 규칙 / AGENTS.md 포인터. 03-format-specs.md §8.4의 주의점을 스크립트에 반영.
diff --git a/research/skills/06-skill-audit.md b/research/skills/06-skill-audit.md
new file mode 100644
index 0000000..810cddd
--- /dev/null
+++ b/research/skills/06-skill-audit.md
@@ -0,0 +1,1306 @@
+# 06. designpaca SKILL.md 감사
+
+작성일: 2026-08-20
+대상: `D:\workspace\designpaca\packages\skill\SKILL.md` (235줄 본문) + `references/` 13개 파일
+기준: `05-recommendations.md` 설계 원칙 10가지, `03-format-specs.md` 포맷 스펙
+방법: 전 파일 실측(줄 수·문자 수·토큰 추정·경로 존재 여부), 어댑터 소스 4개 정독
+
+`motion.md` 는 미작성 상태이며 지적 대상에서 제외했다. `svg-filters.md`(555줄)·`three.md`(667줄)는 감사 중 생성되어 포함했다.
+
+---
+
+## 0. 총평
+
+**본문은 좋다.** 원칙 1·4·5·6·9는 사실상 그대로 구현됐고, 특히 원칙 4(조건부 규칙 + 설명 의무)와 원칙 6(design.md)는 조사한 어떤 커뮤니티 스킬보다 잘 되어 있다. 235줄 / 약 4,600토큰으로 컴팩션 생존선(5,000토큰) 안에 들어간다 — design-taste-frontend가 실패한 지점을 통과했다.
+
+**문제는 두 곳에 몰려 있다.**
+1. **문서 사이의 SSOT 붕괴** — 성능 예산 표가 3개 문서에 서로 다른 항목으로 존재하고, 가로 스크롤 기준 폭이 320px과 375px로 갈린다.
+2. **어댑터의 경로 재작성 누락** — Cursor·AGENTS.md 설치본에서 본문의 `references/...` 27곳이 전부 존재하지 않는 경로를 가리킨다. 설치는 되지만 참조 문서를 못 연다.
+
+누락된 원칙은 8(트리트먼트 보정) 하나다. 7(선언)과 10(미학/버그 분리)은 다른 형태로 이미 녹아 있다.
+
+### 판정 요약
+
+| 원칙 | 판정 | 근거 한 줄 |
+|---|:---:|---|
+| 1. references 분리 / 본문 500줄 | **준수** | 본문 235줄, 참조 13개, 인덱스 표 있음, 링크 1단계 |
+| 2. 핵심 규칙 최상단 | **준수** | 28~38줄. 본문 전체가 5,000토큰 안이라 배치 리스크 자체가 없다 |
+| 3. description 3부 구성 | **미흡** | 320자·3인칭·용도·트리거 ✓ / **배제 조건 없음, 한국어 리터럴 발화 없음** |
+| 4. 조건부 + 오버라이드 | **준수** | 18~26줄 우선순위 체인 + "왜 이 브리프에 맞는지 한 문장" 설명 의무 |
+| 5. 검증 가능한 하드 게이트 | **미흡** | 12개 중 3번이 취향 판단. 2번·11번은 정의/대안 누락 |
+| 6. design.md | **미흡** | 읽기·쓰기 모두 있음 ✓ / **재실행 시 어느 단계부터인지 분기 없음** |
+| 7. 코드 전 평문 선언 | **부분 준수** | 단계별 통과 조건이 그 역할을 함. 통합 선언 블록만 없음 |
+| 8. 트리트먼트 보정 | **누락** | 모든 브리프가 동일한 7단계를 통과한다 |
+| 9. 대담함 한 곳 | **준수** | 핵심규칙 4 + 2단계 리스크 + preflight §5 Q3 / 검증 수치만 없음 |
+| 10. 미학/버그 규칙 분리 | **부분 준수** | 하드 게이트 선언문 ✓ / 성능·접근성의 협상 가능선이 문서마다 다름 |
+
+---
+
+## 1. 반드시 고칠 것 (우선순위 순)
+
+### F1. 어댑터 경로 재작성 누락 — Cursor·AGENTS.md 설치본이 참조 문서를 못 연다
+
+본문에 `references/` 로 시작하는 경로가 **27곳** 있다. Claude Code·Codex는 스킬 디렉터리를 통째로 복사하므로 상대 경로가 맞다. Cursor와 AGENTS.md는 본문만 다른 위치로 옮기고 references를 **다른 디렉터리**에 푼다.
+
+| 타깃 | 본문이 가리키는 곳 | 실제 파일 위치 |
+|---|---|---|
+| Cursor | `references/galleries.md` | `.cursor/rules/designpaca/references/galleries.md` |
+| AGENTS.md (project) | `references/galleries.md` | `.designpaca/references/galleries.md` |
+| AGENTS.md (user) | `references/galleries.md` | `~/.designpaca/reference/references/galleries.md` |
+
+`cursor.ts` 41~51줄과 `agents-md.ts` 40~42줄이 **문서 끝에 매핑 안내를 붙이긴 한다.** 그러나 본문 27곳의 인라인 경로는 그대로다. 에이전트는 "→ `references/galleries.md`" 를 읽고 프로젝트 루트 기준으로 열려다 실패한다. 매핑 안내는 문서 맨 아래에 있어 그때 참조되지 않는다.
+
+**수정안** — `common.ts` 에 헬퍼 추가:
+
+```ts
+/** 본문의 `references/...` 상대 경로를 실제 설치 위치로 바꾼다.
+ *  본문에서 `references/` 는 참조 파일 경로로만 쓰이므로 단순 치환이 안전하다. */
+export function rewriteRefPaths(body: string, prefix: string): string {
+  return body.replaceAll("references/", `${prefix}/references/`);
+}
+```
+
+`cursor.ts` 54줄:
+```ts
+// 현재
+{ kind: "write", path: mdc, content: header + ctx.skill.body + note },
+// 제안
+{ kind: "write", path: mdc,
+  content: header + rewriteRefPaths(ctx.skill.body, ".cursor/rules/designpaca") + note },
+```
+
+`agents-md.ts` 38줄:
+```ts
+// 현재
+ctx.skill.body,
+// 제안
+rewriteRefPaths(ctx.skill.body, ctx.scope === "user" ? "~/.designpaca" : ".designpaca"),
+```
+
+덤으로 `agents-md.ts` 28줄의 user 스코프 refRoot 가 `~/.designpaca/reference` 라서 최종 경로가 `~/.designpaca/reference/references/galleries.md` 로 `reference`가 두 번 들어간다. `path.join(ctx.home, ".designpaca")` 로 줄이면 project 스코프와 구조가 같아지고 위 헬퍼도 한 규칙으로 끝난다.
+
+---
+
+### F2. AGENTS.md 에 본문 전체(14KB)를 주입한다 — 항상 로드되는 자리에 온스킬 분량이 들어간다
+
+`agents-md.ts` 38줄이 `ctx.skill.body` 를 통째로 넣는다. 본문은 14,088 바이트다.
+
+AGENTS.md 는 **스킬이 아니다. 조건 없이 항상 로드된다.**
+
+> "AGENTS.md is just standard Markdown." / "Think of AGENTS.md as a **README for agents**"
+> — agents.md (03-format-specs §3.2)
+
+그리고 Codex 는 root부터 아래로 병합하며 **기본 32 KiB 에서 자른다**. 한 블록이 14KB를 먹으면 프로젝트의 실제 AGENTS.md 내용이 잘려나갈 수 있다. 게다가 designpaca 와 무관한 모든 대화(버그 수정, 테스트 작성)에서 이 14KB를 매번 지불한다.
+
+`03-format-specs.md` §8.4(c) 가 이 경우를 명시적으로 다뤘다: **"전체를 넣지 마라. 포인터만 넣는다."**
+
+**수정안** — `agents-md.ts` 35~45줄의 `block` 을 포인터로 교체:
+
+```ts
+const block = [
+  "## designpaca — 웹 디자인 파이프라인",
+  "",
+  "이 리포에서 UI를 새로 만들거나 다시 디자인할 때는 마크업·스타일을 쓰기 전에",
+  `\`${refPrefix}/SKILL.md\` 를 읽고 그 파이프라인(0~6단계)을 따른다.`,
+  "",
+  "- 프로젝트 루트에 `design.md` 가 있으면 그것이 최상위다. 스킬 기본값을 덮는다.",
+  "- 참조 문서는 각 단계에서 지시하는 것만 그때 연다. 처음부터 전부 읽지 마라.",
+  "",
+  `<!-- designpaca v${ctx.skill.version} — \`npx designpaca update\` 가 관리한다. 직접 고치면 업데이트가 멈춘다. -->`,
+].join("\n");
+```
+
+이때 `referenceActions` 가 `SKILL.md` 도 함께 쓰도록 바꿔야 한다(현재는 references만 쓴다). `skillDirActions` 를 재사용하고 `.designpaca/` 를 루트로 주면 된다.
+
+블록이 약 400바이트로 줄고, 본문은 필요할 때만 읽힌다.
+
+부수: `agents-md.ts` 18줄의 `detect` 가 `.git` 존재만으로 `true` 를 낸다. 사실상 모든 리포에서 기본 선택된다. 항상 로드되는 타깃이 기본 선택되는 것은 위험하다. `AGENTS.md` 파일이 실제로 존재할 때만 `true` 로 좁히는 편이 낫다.
+
+---
+
+### F3. 성능 예산 표가 3개 문서에 서로 다른 항목으로 존재한다
+
+SKILL.md 3단계는 "여기서 예산을 정하고 5단계에서 검증한다"고 한다(120·131줄). 그런데 **대조할 표가 세 개고 항목 집합이 서로 다르다.**
+
+| 항목 | SKILL.md 122–127 | tokens.md 147–153 | preflight.md 55–61 |
+|---|:---:|:---:|:---:|
+| 히어로까지 JS | 150KB | 150KB (데모 400KB) | 150KB |
+| WebGL 추가분 | +200KB | +200KB (데모 +600KB) | 없음 |
+| 첫 인터랙션 | 3초 | 3초 (데모 5초) | 3초 |
+| 폰트 파일 수 | 없음 | 2개 이하 (데모 3개) | 없음 |
+| 총 전송량 | 없음 | 없음 | **1MB** |
+| LCP | 없음 | 없음 | **2.5초** |
+| CLS | 없음 | 없음 | **0.1** |
+| 애니메이션 속성 | 합성 전용 | transform/opacity (타협 없음) | 없음 |
+
+3단계에서 정한 예산에 총 전송량·LCP·CLS 가 없는데 5단계가 그걸 검증하라고 한다. 반대로 3단계가 정한 폰트 개수는 5단계에서 검증하지 않는다.
+
+**수정안** — `tokens.md` §5 를 단일 원본(SSOT)으로 삼는다.
+
+1. `tokens.md` §5 표에 `총 전송량 1MB / 2MB`, `LCP 2.5초 / 3.5초`, `CLS 0.1 / 0.1` 세 행을 추가한다. (데모 열 값은 팀 리드 판단)
+2. SKILL.md 120~129줄의 표를 지우고 두 줄로 바꾼다:
+
+```markdown
+**성능 예산도 여기서 정한다. 나중에 정하면 이미 늦는다.** 표는 `references/tokens.md` §5.
+
+기본선: 히어로까지 JS 150KB(gzip) / 첫 인터랙션 3초 / 애니메이션은 `transform`·`opacity` 만.
+브리프가 데모·포트폴리오라면 예산을 올려도 된다. **올린다는 사실과 이유를 명시해라.**
+```
+
+3. `preflight.md` §2 표의 "기본 예산" 열을 지우고 `tokens.md` §5 를 참조하게 한다. 이 문서는 **실측 열만** 갖는다.
+
+본문 8줄이 줄고, 값이 어긋날 경로가 사라진다.
+
+---
+
+### F4. 하드 게이트 3번은 검증 불가능하다 — 취향 판단이 섞여 있다
+
+```
+3. 코너 반경이 규칙 없이 섞여 있는가?
+```
+
+"규칙 없이"를 누가 판정하는가. 게이트 서문(173줄)이 "취향이 아니라 **버그**다. 여기엔 오버라이드가 없다"라고 선언한 목록에 주관 판단이 하나 들어가면, 모델은 그 항목을 통과 표시하고 넘어가는 법을 배운다. 그러면 나머지 11개의 권위도 같이 내려간다. (`01-local-skill-teardown.md` §4.1 — design-taste-frontend 가 "use sparingly" 표현으로 실패한 것과 같은 구조)
+
+**수정안** — 셀 수 있는 형태로:
+
+```
+3. `border-radius` 값이 토큰 밖에 있거나, 서로 다른 값이 3종 이상인가?
+```
+
+같은 이유로 두 항목에 손이 필요하다.
+
+**2번** — `2. 한 페이지에서 강조색이 2개 이상인가?`
+`tokens.md` §2 규칙 1은 "예외: 상태색(성공/경고/오류)은 강조색이 아니라 기능색이다"라는 예외를 둔다. 게이트에는 그 예외가 없어서 상태색이 있는 폼 페이지가 오탐으로 걸린다.
+→ `2. 상태색(성공·경고·오류)을 제외하고, 한 페이지에서 강조색이 2개 이상인가?`
+
+**11번** — `11. 사용자가 주지 않은 수치가 페이지에 있는가?`
+판정은 가능하지만 **대안이 없다.** 걸렸을 때 무엇을 하라는 지시가 없으면 모델은 숫자를 지우고 섹션을 망가뜨리거나, 그냥 놔둔다. `antipatterns.md` §3 "근거 없는 지표 배너" 행에 대안이 있지만 게이트에서 그리로 연결되지 않는다.
+→ 항목 뒤에 한 줄 추가:
+
+```
+   걸렸으면 셋 중 하나다: (a) 숫자를 `—` 로 바꾸고 "확인 필요" 라벨을 붙인다,
+   (b) 사용자에게 실제 값을 묻고 멈춘다, (c) 그 섹션 자체를 다른 구조로 바꾼다.
+   숫자 모양의 구멍은 정직하고, 지어낸 숫자는 슬롭이다.
+```
+
+나머지 9개는 전부 grep 또는 계산으로 판정된다. 유지.
+
+---
+
+### F5. Cursor 어댑터 — Windsurf 를 감지하면서 Windsurf 가 읽지 않는 파일을 쓴다
+
+`cursor.ts` 는 `label: "Cursor / Windsurf"`(14줄), `hint`(15줄), `detect`(22~23줄, `.windsurf`·`.windsurfrules` 확인)로 Windsurf 를 포함한다고 선언한다. 그런데 산출물은 `.cursor/rules/designpaca.mdc` 하나다.
+
+**Windsurf 는 `.cursor/rules/*.mdc` 를 읽지 않는다.** (`03-format-specs.md` §5)
+
+| 항목 | Cursor | Windsurf |
+|---|---|---|
+| 경로 | `.cursor/rules/*.mdc` | `.windsurf/rules/*.md` (또는 `.devin/rules/*.md`) |
+| 프론트매터 | `description` / `globs` / `alwaysApply` | `trigger` / `globs` |
+| 크기 상한 | 500줄 권고 | **12,000자 하드** |
+
+`.windsurfrules` 가 있는 프로젝트에서 이 어댑터를 선택하면 사용자는 설치됐다고 믿지만 Windsurf 는 아무것도 못 읽는다.
+
+**수정안 — 둘 중 하나.**
+
+**(a) 정직하게 좁힌다 (권장, 변경 최소)**
+- 14줄 `label: "Cursor"`
+- 15줄 `hint: ".cursor/rules/designpaca.mdc — 프로젝트 단위"`
+- 22~23줄 `.windsurf`·`.windsurfrules` 감지 제거
+
+**(b) Windsurf 어댑터를 따로 만든다**
+`.windsurf/rules/designpaca.md` 에 아래 프론트매터로 쓴다. 본문 문자 수가 **7,271자**라 12,000자 상한 안에 들어간다(측정치, 여유 4,700자).
+
+```yaml
+---
+trigger: model_decision
+description: <SKILL.md description 그대로>
+---
+```
+
+`trigger: always_on` 을 쓰면 안 된다. 디자인 스킬이 모든 메시지의 시스템 프롬프트에 상주하게 된다.
+
+---
+
+## 2. 원칙별 상세 감사
+
+### 원칙 1 — references 분리 / 본문 500줄 · 5,000토큰 · 참조 1단계
+
+**판정: 준수.**
+
+| 측정 항목 | 값 | 기준 | 판정 |
+|---|---|---|---|
+| 본문 줄 수 | 235 | ≤ 500 | ✓ |
+| 본문 문자 수 | 7,271 | — | — |
+| 본문 바이트 | 14,088 | — | — |
+| 본문 추정 토큰 | 약 4,600 | < 5,000 | ✓ (여유 400) |
+| 참조 파일 수 | 13 (motion.md 제외) | — | — |
+| 참조 링크 깊이 | 1단계 | 1단계 | ✓ |
+| 인덱스 표 | 219~233줄 | 있어야 함 | ✓ |
+
+44줄의 지시가 특히 정확하다:
+
+> 참조 문서는 **해당 단계에 들어갈 때 읽는다.** 처음부터 전부 읽지 마라 — 컨텍스트 낭비다.
+
+`02-prompt-techniques.md` 기법 4(인덱스-후-선택)를 그대로 구현했다. 프리셋도 "고른 프리셋 파일 **하나만** 읽어라. 넷 다 읽지 마라"(107줄)로 명시했다.
+
+**참조 깊이 확인**: `presets/README.md` → 개별 프리셋은 형식상 2단계로 보이나, SKILL.md 100~105줄이 개별 프리셋 파일을 **직접** 링크하므로 실질 1단계다. 문제없다.
+
+**미흡 — 긴 참조 파일에 목차가 없다.**
+
+| 파일 | 줄 수 | 목차 |
+|---|---:|:---:|
+| three.md | 667 | 없음 |
+| svg-filters.md | 555 | 없음 |
+| experimental-canvas.md | 350 | 없음 |
+| antipatterns.md | 267 | 없음 |
+
+> "For reference files longer than 100 lines, include a table of contents at the top. **This ensures Claude can see the full scope of available information even when previewing with partial reads.**"
+> — Anthropic Skill authoring best practices
+
+667줄 파일은 부분 읽기(`head -100` 등)로 훑을 가능성이 높고, 그때 뒷부분의 존재 자체를 모른다. 각 파일 상단에 3~8줄짜리 섹션 목록을 넣으면 해결된다. 우선순위는 낮다(설계 결함이 아니라 누락).
+
+---
+
+### 원칙 2 — 핵심 규칙 최상단
+
+**판정: 준수.**
+
+28~38줄 "핵심 규칙" 5개 + 접근성 예외 선언이 본문 앞 16% 지점에 있다. 그리고 18~26줄 우선순위 체인이 그보다 앞이다. 배치가 맞다.
+
+**하드 게이트가 171줄(71% 지점)에 있는 점**은 원칙 2와 형식상 어긋나지만, 실측 결과 **문제가 되지 않는다.** 본문 전체가 약 4,600토큰이라 컴팩션 재부착 예산 5,000토큰 안에 통째로 들어간다.
+
+> "Claude Code re-attaches the most recent invocation of each skill after the summary, keeping the first 5,000 tokens of each."
+> — Claude Code skills docs
+
+design-taste-frontend(22,000토큰)가 §9·§14를 잃는 실패를 designpaca 는 구조적으로 피했다. **여유는 400토큰뿐이므로, 앞으로 본문에 무엇을 추가하든 같은 분량을 다른 데서 빼야 한다.** F3(성능 예산 표 8줄 삭제)이 그 여유를 만든다.
+
+---
+
+### 원칙 3 — description 3부 구성
+
+**판정: 미흡.**
+
+측정: 320자, 3인칭, 용도 ✓, 트리거 ✓("~할 때 쓴다" + "Use when...").
+
+| 요소 | 상태 |
+|---|---|
+| 무엇을 하는가 | ✓ "웹 디자인 전 과정을 끌고 가는 파이프라인 스킬" |
+| 대상 | ✓ "랜딩 페이지·포트폴리오·마케팅 사이트·웹앱 UI" |
+| 영문 트리거 | ✓ "Use when building or redesigning any website..." |
+| **한국어 리터럴 발화** | **없음** |
+| **배제 조건** | **없음** |
+
+SKILL.md 16줄에는 "쓰지 않는다" 목록이 있지만, **본문은 스킬이 발동한 뒤에야 읽힌다.** 발동 여부를 결정하는 것은 description 뿐이다.
+
+> `description: Explain exactly when this skill **should and should not** trigger.`
+> — Codex 스킬 문서 (03-format-specs §3.1)
+
+이 사용자는 한국어로 대화한다. `codex-image` 스킬이 한국어 발화를 나열한 이유가 그것이다(`01-local-skill-teardown.md` 패턴 D).
+
+**수정안** — 현재 320자를 약 430자로. 스펙 상한 1,024자, Claude Code 목록 상한 1,536자 안이며, 스킬 목록 예산(컨텍스트 1%) 관점에서도 여전히 안전한 범위다.
+
+```yaml
+description: "웹 디자인 전 과정을 끌고 가는 파이프라인 스킬. 랜딩 페이지·포트폴리오·마케팅 사이트·웹앱 UI를 새로 만들거나 기존 사이트를 리디자인할 때 쓴다. \"랜딩 만들어줘\", \"디자인 예쁘게 해줘\", \"이 페이지 다시 디자인\", \"히어로 섹션 만들어줘\", \"UI 좀 살려줘\", \"design a landing page\", \"make this look better\", \"redesign this page\" 같은 요청에 발동한다. 레퍼런스 조사 → 방향 결정 → 디자인 토큰 → 구현 → 셀프 감사까지 순서대로 진행하고, AI가 만든 티 나는 결과물을 구체적 지문 목록으로 차단한다. 대시보드의 데이터 밀도 설계·차트·순수 백엔드, 그리고 버그 수정이나 기능 추가처럼 시각 결과가 목적이 아닌 작업에는 쓰지 않는다."
+```
+
+바뀐 것: 한국어 발화 5개 추가, 영문 발화 3개로 확장, 배제 조건 한 문장 추가, 중복되던 "(SVG 필터·three.js·인터랙티브 모션)" 축약.
+
+---
+
+### 원칙 4 — 조건부 규칙 + 오버라이드
+
+**판정: 준수. 이 스킬에서 가장 잘 된 부분이다.**
+
+18~26줄:
+
+> ```
+> 사용자의 명시적 지시  >  프로젝트의 design.md  >  프로젝트의 기존 토큰·코드  >  designpaca 기본값
+> ```
+> 사용자가 "보라색으로 해달라"고 하면 보라색으로 한다. 아래 규칙은 **브리프가 침묵할 때의 기본값**이지 금지 목록이 아니다. 단 기본값을 벗어날 때는 **왜 이 브리프에 그것이 맞는지 한 문장으로 말하고** 진행한다. 말할 수 없으면 그건 결정이 아니라 기본값 회귀다.
+
+`05-recommendations.md` 원칙 4가 요구한 세 요소(우선순위 체인 / 오버라이드 경로 / 설명 의무)가 전부 있다. 마지막 문장은 design-taste-frontend §4.1의 "AND you can articulate why"보다 짧고 더 명확하다.
+
+**작은 어긋남 하나.** 26줄이 "아래 규칙은 ... 금지 목록이 아니다"라고 선언한 뒤, 171~186줄이 "여기엔 오버라이드가 없다"고 한다. 문서 안에 두 등급이 있는데 26줄이 그 사실을 예고하지 않는다.
+
+**수정안** — 26줄 끝에 한 문장 추가:
+
+```markdown
+예외는 두 곳이다. 38줄의 접근성과 5단계의 하드 게이트 12개는 브리프가 요청해도 오버라이드하지 않는다. 그 둘은 취향이 아니라 결함이기 때문이다.
+```
+
+---
+
+### 원칙 5 — 검증 가능한 하드 게이트
+
+**판정: 미흡.** (수정안은 F4)
+
+게이트 12 + 카운트 규칙 5 = 17개. `05-recommendations.md` 가 권한 20~30개 이하이며 적정하다. Hallmark 의 58개나 design-taste-frontend 의 60개처럼 "정직한 검사가 불가능한 분량"이 아니다.
+
+서문(173줄)이 정확하다:
+
+> 취향이 아니라 **버그**다. 여기엔 오버라이드가 없다. 체크박스가 아니라 질문이니 실제로 검사해라.
+
+"체크박스가 아니라 질문"을 명시한 것은 좋다. `02-prompt-techniques.md` 기법 15의 핵심이다.
+
+**항목별 검증 가능성:**
+
+| # | 항목 | 판정 방법 | 판정 |
+|:--:|---|---|:---:|
+| 1 | 인라인 hex/rgb/oklch, 인라인 font-family | grep | ✓ |
+| 2 | 강조색 2개 이상 | 토큰 개수 | △ 상태색 예외 누락 |
+| 3 | 코너 반경이 규칙 없이 섞임 | — | **✗ 주관** |
+| 4 | 테마 뒤집힘 | 섹션별 배경 명도 비교 | ✓ |
+| 5 | 320~1920px 가로 스크롤 | 렌더 확인 | ✓ (단 F6 참조) |
+| 6 | 버튼 라벨 2줄 접힘 | 렌더 확인 | ✓ |
+| 7 | 버튼 대비 4.5:1 미만 | 계산 | ✓ |
+| 8 | transform/opacity 외 애니메이션 | grep | ✓ |
+| 9 | `100vh` 사용 | grep | ✓ |
+| 10 | `addEventListener('scroll')` | grep | ✓ |
+| 11 | 사용자가 주지 않은 수치 | 브리프 대조 | △ 대안 누락 |
+| 12 | div 가짜 스크린샷 | 소스 확인 | ✓ |
+
+**카운트 규칙 5개는 전부 검증 가능하다.** 다만 4번째 항목에 미세한 긴장이 있다:
+
+> - 작은 대문자 라벨(eyebrow) 개수 ≤ `ceil(섹션수 / 3)`
+
+`antipatterns.md` §0 2위 항목은 "헤드라인·섹션 라벨이 전체 대문자"를 검출률 10.5%로 지목하며 대안을 **"라벨을 없애고 헤드라인만으로 섹션을 구분"** 이라고 한다. 즉 antipatterns 는 0개를, SKILL.md 는 `ceil(n/3)`개를 허용한다. 둘 다 성립하려면 SKILL.md 쪽이 "**전체 대문자가 아닌** 작은 라벨은 `ceil(n/3)`까지"라는 뜻이어야 한다. 지금 문장으로는 읽히지 않는다.
+
+**수정안** — 192줄:
+```markdown
+- 작은 라벨(eyebrow) 개수 ≤ `ceil(섹션수 / 3)`. **전체 대문자 라벨은 개수와 무관하게 0개다**(antipatterns §0)
+```
+
+---
+
+### 원칙 6 — design.md
+
+**판정: 미흡 (핵심은 준수, 분기 하나 누락).**
+
+읽기(0단계 50줄)와 쓰기(6단계 202~215줄)가 모두 있다. Superdesign·Hallmark·stitch-design-taste 세 시스템이 각각 도달한 패턴을 그대로 구현했고, 213줄이 특히 좋다:
+
+> 마지막 줄이 가장 중요하다. **하지 않기로 한 결정을 적어두지 않으면 다음 사람이 그것을 "빠뜨린 것"으로 착각하고 되돌린다.**
+
+**누락 — 두 번째 실행에서 어느 단계부터인지가 없다.**
+
+50줄이 말한다:
+
+> 먼저 프로젝트 루트에 `design.md` 가 있는지 확인한다. 있으면 읽고, 그 결정을 이 스킬의 기본값보다 우선한다. 같은 프로젝트를 두 번째로 작업할 때 지난번과 다른 디자인이 나오면 그건 실패다.
+
+그런데 파이프라인은 42줄에서 "**순서를 바꾸지 마라.** 각 단계에는 통과 조건이 있고, 통과하지 못하면 다음 단계로 가지 않는다"고 한다. `design.md` 가 있는 프로젝트에서 페이지 하나를 추가할 때, 모델은 R1/R2/R3 갤러리 조사를 다시 하고 프리셋을 다시 고르고 리스크를 다시 정해야 한다. 그러면 50줄이 경고한 "지난번과 다른 디자인"이 정확히 발생한다.
+
+**수정안** — 0단계 50줄 뒤에 분기 추가:
+
+```markdown
+`design.md` 가 있으면 **1·2단계를 건너뛴다.** 레퍼런스와 방향은 이미 정해져 있다.
+읽고 그 값을 3단계 토큰으로 그대로 가져간 뒤 4단계로 간다.
+1·2단계를 다시 도는 것은 사용자가 "방향을 바꾸자"고 명시할 때뿐이며,
+그때는 새 결정으로 `design.md` 를 갱신한다.
+```
+
+그리고 219줄 참조 표의 "언제 읽나" 열에도 이 분기를 반영해두면 좋다.
+
+**낮은 우선순위 — 프로젝트 간 회전 장치가 없다.**
+`design.md` 는 **한 프로젝트 안의** 일관성을 보장한다. 서로 다른 프로젝트 5개가 전부 `swiss-minimal` 을 고르는 것은 막지 못한다. 프리셋이 4개뿐이라 이 위험은 실재한다. Hallmark 가 `.hallmark/log.json` 으로 푼 문제다(`02-prompt-techniques.md` 기법 12).
+
+다만 designpaca 는 프로젝트 단위 설치가 기본이라 전역 로그를 둘 자리가 애매하다. **지금 단계에서는 넘기고**, 대신 2단계에 한 줄을 넣어두는 정도가 비용 대비 합리적이다:
+
+```markdown
+프리셋을 고른 이유를 한 줄로 적어라. "제품이 복잡해서"처럼 브리프에서 나온 이유여야 한다.
+"무난해서"는 이유가 아니다 — 그건 네 기본값이지 이 브리프의 결정이 아니다.
+```
+
+---
+
+### 원칙 7 — 코드 전 평문 선언
+
+**판정: 부분 준수. 추가는 선택이다.**
+
+원칙 7이 요구한 것은 "코드를 쓰기 전에 선택을 사용자가 읽을 수 있는 형태로 낸다"이다. designpaca 는 이것을 **단계별 통과 조건**으로 분산 구현했다:
+
+| 단계 | 선언 산출물 | 위치 |
+|---|---|---|
+| 0 | 브리프 3줄 | 54~58줄 |
+| 1 | R1/R2/R3 + 6축 수치 + 회색조 위계 | `reference-method.md` §6 필수 블록 |
+| 2 | 한 문장 컨셉 + 프리셋 + 리스크 하나 | 96~98줄 |
+| 3 | 토큰 실제 값 + 성능 예산 | 131줄 |
+
+그리고 237줄이 "**단계를 보고하며 진행해라.** 사용자는 어느 단계인지 알아야 개입할 수 있다"로 받친다. 238줄의 "가정은 소리 내서 말해라"도 같은 계열이다.
+
+**이것으로 충분하다.** Hallmark 식 통합 프리뷰 블록은 이 구조 위에 얹으면 오히려 같은 정보를 두 번 출력하게 된다.
+
+**다만 한 가지가 빠져 있다** — 3단계와 4단계 사이에 **되돌아볼 수 없는 지점**이 있다. 4단계에 들어가면 코드가 나오기 시작하고, 그때 사용자가 방향을 바꾸면 전부 버려야 한다. 2단계 통과 조건(109줄)이 사용자 확인을 요구하지 않는다.
+
+**수정안(선택)** — 3단계 통과 조건(131줄) 뒤에 한 줄:
+
+```markdown
+> 통과 조건: 토큰이 실제 값으로 적혔고, 성능 예산이 숫자로 정해졌다.
+> **4단계로 넘어가기 전에 0~3단계의 결정을 6줄로 요약해 보여준다.** 여기가 되돌리기 가장 싼 지점이다.
+> `무엇을 / 누구에게 / R1·R2·R3 / 컨셉 / 프리셋 / 리스크` 각 한 줄.
+```
+
+6줄이면 토큰 비용이 거의 없고, 잘못된 방향으로 400줄 HTML을 만드는 것보다 훨씬 싸다.
+
+---
+
+### 원칙 8 — 트리트먼트 보정
+
+**판정: 누락. 추가를 권한다.**
+
+SKILL.md 12~16줄은 **범위**만 정의한다(쓴다 / 쓰지 않는다). 범위 안에 들어온 모든 브리프는 동일한 7단계를 통과한다.
+
+문제는 범위 안에도 편차가 크다는 것이다.
+
+| 브리프 | 현재 요구되는 것 | 적절한가 |
+|---|---|---|
+| 브랜드 랜딩 페이지 | R1/R2/R3 조사 + 리스크 하나 + design.md | 적절 |
+| 사내 도구 설정 화면 | 동일 | **과잉** |
+| API 문서 페이지 | 동일 | **과잉** |
+| 데모용 실험 페이지 | 동일 | 적절 |
+
+`03. 화려함은 4순위다`(34줄)와 `핵심 규칙 4. 대담함은 한 곳에만`(35줄)이 과잉 장식은 막는다. 그러나 **"감수할 리스크 하나"(98줄)는 필수**다:
+
+> **감수할 리스크 하나** — 정당화할 수 있는 과감한 선택 하나. 없으면 그 디자인은 안전하고 잊힌다
+
+사내 문서 페이지에 "잊히지 않기 위한 과감한 선택"을 요구하는 것은 잘못된 목표다. `artifact-design` 이 이 문제를 정확히 짚었다:
+
+> **Calibrate treatment, not whether to design.** ... Many requests call for a more utilitarian treatment: a plan, a memo, a demo. Make it polished ... **but avoid over-designing.**
+> **When unsure: a well-composed page is never the wrong answer; an over-designed visual identity sometimes is.**
+
+**수정안** — 0단계 브리프 게이트에 축 하나 추가. 3줄 블록 바로 뒤(58줄과 60줄 사이):
+
+```markdown
+**트리트먼트를 정한다.** 같은 완성도를 어느 형태로 전달할지의 문제다.
+
+- **에디토리얼** — 랜딩, 포트폴리오, 캠페인, 제품 소개. 사용자가 자랑할 물건.
+  → 전 단계를 그대로 돈다. 리스크 하나는 필수다.
+- **유틸리티** — 사내 도구, 문서 페이지, 관리 화면, 데모.
+  → 1단계 레퍼런스는 R1 하나로 줄인다. 2단계 리스크는 **생략한다**.
+  타입 위계·여백·토큰·접근성은 그대로 지킨다. 여기서 완성도가 결정된다.
+  거대한 히어로도 스크롤 연출도 필요 없다.
+
+확신이 서지 않으면 유틸리티로 간다.
+**잘 구성된 페이지가 틀린 답이 된 적은 없다. 과잉 디자인된 아이덴티티는 가끔 틀린 답이다.**
+```
+
+그리고 2단계 98줄의 리스크 항목을 조건부로:
+
+```markdown
+- **감수할 리스크 하나** — 정당화할 수 있는 과감한 선택 하나. 없으면 그 디자인은 안전하고 잊힌다.
+  **(유틸리티 트리트먼트면 생략한다. 거기서는 안전한 것이 맞다.)**
+```
+
+추가 분량 약 11줄. F3에서 8줄을 빼므로 순증 3줄, 토큰 여유 안에 들어간다.
+
+---
+
+### 원칙 9 — 대담함은 한 곳에만
+
+**판정: 준수. 검증 수치만 없다.**
+
+세 지점에 일관되게 박혀 있다:
+
+- 핵심 규칙 4 (35줄): "**대담함은 한 곳에만.** 리스크는 하나다. 나머지는 조용히 받쳐준다. 두 곳에서 소리치면 둘 다 죽는다."
+- 2단계 (98줄): "감수할 리스크 하나"
+- `preflight.md` §5 Q3: "감수하기로 한 리스크가 실제로 들어갔는가? → 구현 중에 안전한 쪽으로 후퇴하지 않았는지"
+
+Q3이 특히 좋다. 원칙 9의 "위험을 안 지는 것도 위험이다"를 검사 항목으로 바꿨다.
+
+**미흡 — 검증 가능한 수치가 없다.**
+`05-recommendations.md` 원칙 9가 권한 "액센트 면적 상한"이 어디에도 없다. `tokens.md` §2 규칙 2("채도가 높은 색은 면적을 좁게")는 정성적이고, `reference-method.md` 축3의 "accent 면적 %(10% 이하가 정상)"는 **레퍼런스를 분석할 때** 쓰는 값이지 자기 결과물 검사용이 아니다.
+
+**수정안** — 카운트 규칙(188~196줄)에 한 줄 추가:
+
+```markdown
+- 강조색이 차지하는 화면 면적 ≤ 뷰포트의 10% (`reference-method.md` 축3과 같은 기준)
+```
+
+Hallmark 는 이 값을 5%로 잡는다. 10%는 `reference-method.md` 와 일치하므로 문서 간 정합성 면에서 10%가 낫다.
+
+---
+
+### 원칙 10 — 미학 규칙과 버그 규칙 분리
+
+**판정: 부분 준수.**
+
+분리 개념은 두 곳에 있다:
+
+- 38줄: "**접근성은 예외다. 이것만은 협상하지 않는다.** 키보드·포커스·대비·`prefers-reduced-motion`은 어떤 이펙트보다, 어떤 브리프보다 우선한다. **픽셀은 왜곡해도 DOM은 살린다.**"
+- 173줄: "취향이 아니라 **버그**다. 여기엔 오버라이드가 없다."
+
+마지막 문장("픽셀은 왜곡해도 DOM은 살린다")은 HTML-in-Canvas 같은 실험 경로까지 커버하는 좋은 문장이다.
+
+**미흡 3가지.**
+
+**(a) 접근성 선언과 하드 게이트가 어긋난다.**
+38줄이 협상 불가로 지목한 넷은 `키보드 · 포커스 · 대비 · prefers-reduced-motion` 이다. 하드 게이트 12개 중 접근성 항목은 7번(버튼 대비)뿐이다. 키보드·포커스·reduced-motion 은 게이트에 없다.
+
+`preflight.md` §1 표가 그 셋을 모두 다루고, 5단계 통과 조건(198줄)이 `preflight.md` 통과를 요구하므로 **기능적으로는 커버된다.** 그러나 "협상하지 않는다"고 선언한 넷 중 하나만 게이트에 있는 것은 읽는 사람에게 불일치로 보인다.
+
+→ 수정안: 게이트를 늘리지 말고(분량), 173줄 서문에 한 줄:
+```markdown
+접근성 전체는 `preflight.md` §1에서 검사한다. 아래는 그 외에 자주 깨지는 것들이다.
+```
+
+**(b) 성능의 협상 가능선이 문서마다 다르다.**
+- SKILL.md 핵심 규칙 5(36줄): "데모·포트폴리오 브리프면 예산을 올려도 되지만 **올렸다고 말해야 한다**" → 조건부
+- `tokens.md` §5 표: `애니메이션 속성 | transform/opacity 만 | 동일 (타협 없음)` → 성능 안에서도 이 항목만 절대
+- 하드 게이트 8번: `transform`/`opacity` 외 애니메이션 → 절대
+
+즉 성능은 "예산은 조건부, 애니메이션 속성은 절대"라는 이중 구조인데, SKILL.md 36줄만 읽으면 전부 조건부로 읽힌다.
+
+→ 수정안: 36줄 끝에 한 문장:
+```markdown
+단 애니메이션 속성만은 예외다. `transform`·`opacity` 제한은 예산과 무관하게 지킨다 — 그건 예산 문제가 아니라 렌더링 파이프라인 문제다.
+```
+
+**(c) 하드 게이트에 실무 렌더링 버그 몇 개가 빠졌다.**
+`05-recommendations.md` 원칙 10이 여러 소스에서 반복 확인된 것으로 정리한 항목 중 다음이 어디에도 없다:
+
+| 항목 | 근거 | 현재 상태 |
+|---|---|---|
+| `width: 100vw` 금지 (스크롤바 있는 데스크톱에서 깨짐) | Hallmark anti-patterns | 없음 |
+| 이미지가 들어가는 그리드 트랙에 `minmax(0, 1fr)` | Hallmark gate 50 | 없음 |
+| 디스플레이 텍스트에 `overflow-wrap: anywhere` | Hallmark gate 51 | `preflight.md` §3에 있음 ✓ |
+| 페이지 레벨 sticky 아래 또 다른 `top: 0` sticky 금지 | Hallmark gate 56 | 없음 |
+| LCP 요소에 `loading="lazy"` 금지 | Hallmark anti-patterns | `preflight.md` §2에 반대 방향으로만 있음(첫 화면 밖 lazy 누락) |
+
+이 중 앞의 셋은 **하드 게이트가 아니라 `layout.md` §4(반응형)에 넣는 것이 맞다.** 게이트를 15개로 늘리는 것보다 낫다. LCP lazy 는 `preflight.md` §2 "자주 걸리는 것"에 한 줄 추가하면 된다.
+
+---
+
+## 3. 중복과 모순
+
+### 3.1 모순 — 값이 실제로 다르다
+
+| # | 항목 | 위치 A | 위치 B | 조치 |
+|:--:|---|---|---|---|
+| M1 | 가로 스크롤 검사 폭 | SKILL.md 179줄 `320~1920px 사이 어느 폭에서든` | `preflight.md` 76줄 `375px 폭에서`<br>`layout.md` 109줄 `모바일 폭(375px)에서` | **320~1920px 로 통일.** 320px 은 실제로 존재하는 최소 폭(iPhone SE 세로)이고 375px 만 검사하면 그 아래가 뚫린다 |
+| M2 | 성능 예산 항목 집합 | SKILL.md 122~127 (4항목) | `tokens.md` 147~153 (5항목)<br>`preflight.md` 55~61 (5항목, 서로 다름) | **F3** 참조. `tokens.md` §5 를 SSOT 로 |
+| M3 | eyebrow 허용 개수 | SKILL.md 192줄 `≤ ceil(섹션수/3)` | `antipatterns.md` §0 2위 `라벨을 없애고 헤드라인만으로` (사실상 0) | **원칙 5 수정안** 참조. "전체 대문자는 0개" 를 명시해 두 규칙을 분리 |
+
+M1 이 실질적으로 가장 위험하다. 하드 게이트 5번은 "오버라이드 없음"인데 참조 문서 두 곳이 더 느슨한 기준을 준다. 모델은 느슨한 쪽을 근거로 통과 표시할 수 있다.
+
+### 3.2 중복 — 값은 같으나 두 번 이상 나온다
+
+| # | 내용 | 위치 | 판단 |
+|:--:|---|---|---|
+| D1 | 기계 검사 3종(grep / 카피 치환 / 이펙트 끄기) | SKILL.md 165~169 · `preflight.md` §0 A·B·C | **유지.** SKILL.md 쪽이 "반드시 돌려라"라는 강조 역할을 하고 5줄뿐이다 |
+| D2 | 프리셋 4종 표 | SKILL.md 100~105 · `presets/README.md` 8~13 | **유지.** 표가 SKILL.md 에 있으면 README 를 안 열어도 되어 오히려 토큰 절약. 현재 두 표는 정확히 일치한다 |
+| D3 | 성능 예산 표 | 3곳 | **F3 로 정리** |
+| D4 | 터치 타깃 44×44px | `preflight.md` §3 · `layout.md` §4 | 유지. 서로 다른 단계에서 필요 |
+| D5 | 강조색 1개 규칙 | SKILL.md 게이트 2 · `tokens.md` §2 규칙1 · `preflight.md` §5 Q5 · `antipatterns.md` | 유지. 다만 상태색 예외는 `tokens.md` 에만 있다 → F4 |
+| D6 | 한글 조판 규칙 | `antipatterns.md` §8 (전체) · `layout.md` §3 (요약 + 포인터) | **좋은 형태.** `layout.md` 가 요약하고 원본을 가리킨다 |
+| D7 | 참조 문서 지도 | SKILL.md 219~233 · 각 단계 인라인 링크 | 유지. 원칙 1의 인덱스 요건 |
+
+D6 은 다른 문서들이 따라야 할 모범이다. 요약 5줄 + "자세한 건 여기"가 전문 복사보다 낫다.
+
+### 3.3 모순 아님 (확인함)
+
+- **다크 모드**: `tokens.md` §2 "다크를 기본값으로 삼지 마라" vs `presets/dark-instrument.md`. 프리셋이 6~13줄에서 "다크 기본값은 단일 슬롭 시그니처 1위다. 이유를 댈 수 없으면 라이트로 가라"고 먼저 못 박고 정당화 사유 3개를 제시한다. **정확히 원칙 4의 오버라이드 구조다.** 손댈 필요 없다.
+- **벤토 그리드**: `layout.md` §1 "새 기본값이라 차별화가 아니다" vs `antipatterns.md` §3 "기본 선택지로 쓰지 마라". 같은 말이고 `layout.md` 가 조건부 사용법까지 준다.
+
+---
+
+## 4. 분량 판정
+
+**결론: 자르지 않아도 된다. 다만 F3(성능 예산 표 8줄)은 분량이 아니라 SSOT 때문에 빼야 한다.**
+
+| 지표 | 값 | 기준 | 여유 |
+|---|---|---|---|
+| 본문 줄 수 | 235 | ≤ 500 | 265줄 |
+| 본문 추정 토큰 | 약 4,600 | < 5,000 | **약 400토큰** |
+
+토큰 여유가 400뿐이라는 점이 실제 제약이다. 이 감사에서 제안한 추가분은:
+
+| 제안 | 증감 |
+|---|---|
+| F3 성능 예산 표 삭제 | **-8줄** |
+| 원칙 8 트리트먼트 블록 | +11줄 |
+| 원칙 4 등급 예고 1문장 | +1줄 |
+| 원칙 6 design.md 분기 | +4줄 |
+| 원칙 7 3단계 요약 지시 | +2줄 |
+| 원칙 9 액센트 면적 카운트 | +1줄 |
+| 원칙 10 (a)(b) 각 1문장 | +2줄 |
+| F4 게이트 2·3·11 수정 | +3줄 |
+| 원칙 5 eyebrow 문구 | +0줄 (치환) |
+| **합계** | **+16줄 / 약 +300토큰** |
+
+4,900토큰이 되어 5,000 선에 붙는다. **한 곳을 더 빼는 것을 권한다.**
+
+가장 뺄 만한 곳은 **219~233줄 참조 문서 지도 표(15줄)** 다. 각 단계가 이미 인라인으로 파일을 지목하고 있어 정보가 중복된다. 다만 원칙 1의 인덱스 요건이라 완전 삭제는 곤란하다.
+
+→ 절충: 표를 유지하되 "언제 읽나" 열을 단계 번호만으로 축약(`1단계 — 어느 갤러리를 볼지 정할 때` → `1`). 약 5줄 절약.
+
+또는 **151~152줄 실험 경로 2줄**을 4-3 안으로 흡수. 미세하다.
+
+---
+
+## 5. 작업 2 — 포맷 어댑터 검증
+
+### 5.1 요약
+
+| 파일 | 판정 | 핵심 |
+|---|:---:|---|
+| `claude-code.ts` | **정확** | 경로·스코프 전부 스펙과 일치 |
+| `codex.ts` | **경로 재검토 필요** | `~/.codex/skills` 는 실측으로 존재하나 공식 문서엔 없다 |
+| `cursor.ts` | **수정 필요** | 경로 재작성 누락 · Windsurf 오표기 · YAML 인용 · 네이티브 스킬 경로 미사용 |
+| `agents-md.ts` | **수정 필요** | 본문 전체 주입 · 경로 재작성 누락 |
+
+### 5.2 `claude-code.ts` — 문제없음
+
+`~/.claude/skills/designpaca/` (user) / `.claude/skills/designpaca/` (project). `03-format-specs.md` §2.1 표와 정확히 일치한다. `SKILL.md` 를 그대로 쓰므로 프론트매터 변환 리스크도 없다.
+
+한 가지만 알아둘 것: Claude Code 는 심링크를 따라가고 같은 타깃이 두 경로에서 보이면 **한 번만 로드한다.**
+
+> "if the same target is reachable from more than one location, Claude Code loads the skill once"
+
+그러나 지금 어댑터는 각 타깃에 **실제 파일을 복사**한다. 사용자가 Claude Code 와 Codex 를 둘 다 선택하면 같은 내용의 별도 디렉터리가 두 개 생긴다. 동작에는 문제가 없다(각 도구가 자기 경로만 본다). 유지보수 관점에서 `update` 가 둘 다 갱신하는지만 확인하면 된다.
+
+### 5.3 `codex.ts` — `~/.codex/skills` 는 실측으로 맞지만 문서 근거가 없다
+
+**실측 결과 (이 머신):**
+
+```
+C:\Users\encep\.codex\skills\
+├── .system\
+│   ├── .codex-system-skills.marker   ← Codex 가 만든 파일
+│   ├── imagegen\  openai-docs\  plugin-creator\
+│   ├── review-agent\  skill-creator\  skill-installer\
+├── frontend-design\        (2026-06-28)
+├── web-design-guidelines\  (2026-06-28)
+├── object-separation\      (2026-07-15)
+├── viven-wiki\             (2026-04-14)
+└── codex-primary-runtime\  (2026-04-24)
+```
+
+`.system/.codex-system-skills.marker` 와 그 아래 번들 스킬 6개는 **Codex CLI 자신이 만든 것**이다. 사용자가 4월부터 이 디렉터리에 스킬을 넣어 쓰고 있다. 즉 `~/.codex/skills/` 가 Codex 의 스킬 루트인 것은 거의 확실하다.
+
+**그러나 공식 문서는 이 경로를 언급하지 않는다.** 재확인차 다시 fetch 했고 결과는 동일했다:
+
+> Codex scans: `$CWD/.agents/skills` → `$CWD/../.agents/skills` → `$REPO_ROOT/.agents/skills` → `$HOME/.agents/skills` → `/etc/codex/skills` → 번들.
+> **The documentation does not mention `~/.codex/skills` or `.codex/skills` as scan locations.**
+> — learn.chatgpt.com/docs/build-skills (2026-08-20 재확인)
+
+`~/.codex/config.toml` 에도 스킬 경로 설정은 없다(색상 항목만 검색됨).
+
+**권고 — 두 가지 중 하나.**
+
+**(a) `~/.agents/skills/designpaca/` 를 새 타깃으로 추가한다 (권장).**
+이 경로 하나가 **Codex · Cursor · VS Code Copilot 셋 다** 문서상 스캔 대상이다.
+
+| 도구 | `~/.agents/skills` 스캔 | 근거 |
+|---|:---:|---|
+| Codex | O | learn.chatgpt.com/docs/build-skills |
+| Cursor | O | cursor.com/docs/context/skills |
+| VS Code Copilot | O | code.visualstudio.com/docs/copilot/customization/agent-skills |
+
+이 사용자 머신의 `C:\Users\encep\.agents\skills\` 에 design-taste-frontend 등 16개가 이미 있고, `~/.claude/skills/` 가 그리로 심링크되어 있다. **사용자가 이미 이 배치를 쓰고 있다.** 어댑터가 그 관행을 따르는 것이 자연스럽다.
+
+**(b) `codex.ts` 를 유지하되 두 곳에 쓴다.**
+`~/.codex/skills/designpaca/` (실측) + `~/.agents/skills/designpaca/` (문서). 파일이 중복되지만 확실하다.
+
+**프로젝트 스코프는 별개 문제다.** `codex.ts` 25줄이 `.codex/skills/designpaca` 를 쓰는데, 문서가 말하는 리포 스코프는 `.agents/skills` 다. `.codex/skills` 는 실측 근거도 문서 근거도 없다.
+
+```ts
+// codex.ts 25줄 — 현재
+const root = scopeRoot(ctx, [".codex", "skills", "designpaca"], [".codex", "skills", "designpaca"]);
+// 제안 (project 만 교체)
+const root = scopeRoot(ctx, [".codex", "skills", "designpaca"], [".agents", "skills", "designpaca"]);
+```
+
+### 5.4 `cursor.ts` — 네 가지
+
+**① 경로 재작성 누락 → F1.** 가장 중요하다.
+
+**② `description` 이 인용부호 없이 쓰인다.**
+
+```ts
+// 34줄
+`description: ${ctx.skill.description}`,
+```
+
+`skill-source.ts` 16~18줄이 원본의 따옴표를 벗겨서 넘긴다. 현재 값은 320자에 `: ` 도 `#` 도 없어 **지금은 유효한 YAML 이다**(실측 확인). 그러나 description 에 콜론+공백이 한 번이라도 들어가면 그 순간 `.mdc` 프론트매터가 깨지고, Cursor 는 조용히 규칙을 무시한다. 원칙 3 수정안대로 문장을 늘리면 위험이 커진다.
+
+```ts
+// 제안
+`description: ${JSON.stringify(ctx.skill.description)}`,
+```
+
+JSON 문자열은 YAML 의 유효한 double-quoted scalar 이므로 그대로 쓸 수 있다.
+
+**③ `globs:` 빈 값 — 문제없다.**
+
+```ts
+"globs:",
+"alwaysApply: false",
+```
+
+Cursor 문서의 4가지 규칙 타입 중 우리가 원하는 것은 "Apply Intelligently"(`description` 있음, `globs` 없음)다. 빈 `globs:` 는 YAML null 이므로 이 조건을 만족한다. Cursor UI 자신이 이 형태를 생성한다.
+
+`alwaysApply: false` 도 정확하다. Cursor 문서가 `alwaysApply: true` 를 "Use sparingly, this is your global config"라고 경고한다. 디자인 스킬이 모든 세션에 상주해서는 안 된다.
+
+**굳이 더 정확히 하려면** 키 자체를 빼는 쪽이 문서 표현("no `globs`")에 더 가깝다. 낮은 우선순위.
+
+**④ Windsurf → F5.**
+
+**⑤ 추가 권고 — Cursor 는 이제 Agent Skills 를 네이티브 지원한다.**
+
+`.mdc` 변환은 레거시 경로다. Cursor 는 다음 넷을 스캔한다: `.agents/skills/`, `.cursor/skills/`, `~/.agents/skills/`, `~/.cursor/skills/`.
+
+즉 **`.cursor/skills/designpaca/` 에 SKILL.md 를 그대로 쓰면 변환이 필요 없고, 경로 재작성 문제(F1)도 사라지고, references 도 그대로 옮겨간다.** 5.3(a)의 `~/.agents/skills/` 타깃을 추가하면 Cursor user 스코프까지 한 번에 덮인다.
+
+**권고 배치:**
+```
+1순위  ~/.agents/skills/designpaca/   → Codex + Cursor + Copilot (user)
+       .agents/skills/designpaca/     → 같은 셋 (project)
+2순위  .cursor/rules/designpaca.mdc   → .mdc 를 쓰는 기존 워크플로 호환용 (레거시)
+```
+
+`cursor.ts` 16줄의 `scopes: ["project"]` 도 재검토 대상이다. 주석은 "Cursor 의 전역 규칙은 파일이 아니라 앱 설정(User Rules)이라 프로젝트 범위만 지원한다"고 하는데, **스킬은 `~/.cursor/skills/` 로 파일 설치가 된다.** 주석은 `.mdc` 규칙에 대해서는 맞고 스킬에 대해서는 틀리다.
+
+**⑥ references 를 `.cursor/rules/` 안에 두는 것.**
+`cursor.ts` 30줄이 `.cursor/rules/designpaca/` 에 참조 문서를 푼다. Cursor 는 `.cursor/rules/` 를 재귀 스캔하고, 프로젝트 규칙은 `.mdc` 확장자여야 하므로 우리 `.md` 파일들은 규칙으로 잡히지 않는다. **지금은 안전하다.** 다만 규칙 전용 디렉터리에 규칙이 아닌 파일 13개를 넣는 것은 깨지기 쉬운 가정이다. `.designpaca/` 로 빼면 AGENTS.md 타깃과 경로 규칙도 통일된다.
+
+### 5.5 `agents-md.ts` — 세 가지
+
+**① 본문 전체 주입 → F2.** 가장 중요하다.
+
+**② 경로 재작성 누락 → F1.**
+
+**③ user 스코프 경로.**
+24줄이 `~/.codex/AGENTS.md` 를 쓴다. 어댑터 라벨은 "범용 AGENTS.md" 인데 이 경로는 Codex 전용이다. 이 머신에는 해당 파일이 이미 있고(436바이트) 마커 주입은 기존 내용을 보존하므로 **동작은 문제없다.**
+
+다만 범용이라는 이름값을 하려면 user 스코프에서는 AGENTS.md 대신 `~/.agents/skills/designpaca/` 로 가는 것이 맞다. 5.3(a) 타깃이 생기면 `agents-md` 는 `scopes: ["project"]` 로 좁히는 것이 깔끔하다.
+
+**④ `detect` 가 너무 넓다.**
+```ts
+// 18줄
+return await exists(path.join(ctx.cwd, "AGENTS.md")) || await exists(path.join(ctx.cwd, ".git"));
+```
+`.git` 이 있으면 참이므로 사실상 모든 리포에서 기본 선택 후보가 된다. AGENTS.md 는 **조건 없이 항상 로드되는** 유일한 타깃이다. 기본 선택이 되기에는 비용이 크다. `AGENTS.md` 파일이 실제로 존재할 때만 `true` 로 좁히기를 권한다(없어도 사용자가 수동 선택하면 만들어진다 — 17줄 주석의 의도는 유지된다).
+
+**⑤ 마커 처리는 잘 되어 있다.**
+`marker.ts` 의 `upsertBlock`/`removeBlock`/`extractBlock` 이 블록 밖 내용을 보존한다. AGENTS.md 는 사용자 소유 문서이므로 이 설계가 맞다. `agents-md.ts` 44줄의 안내 주석("직접 고치면 업데이트가 멈춘다")도 적절하다.
+
+한 가지: `upsertBlock` 은 블록이 없으면 **문서 끝에 덧붙인다**(marker.ts 28~29줄). AGENTS.md 는 가까운 파일이 이기고 root 부터 아래로 병합되므로 위치 자체는 무해하다. 다만 32 KiB 상한을 고려하면 F2 로 블록이 작아지는 것이 더 중요하다.
+
+### 5.6 `common.ts` / `skill-source.ts` — 문제없음
+
+- `.designpaca_version` 을 스킬 디렉터리에 쓰는 것: Agent Skills 스펙이 추가 파일을 허용하므로 무해하다. Cursor 의 재귀 스캔도 `SKILL.md` 만 찾으므로 영향 없다.
+- `splitFrontmatter` 가 얕은 파서인 것: 현재 프론트매터가 `name` + `description` 2줄이라 충분하다. 단 **YAML 블록 스칼라(`>-`, `|`)를 지원하지 않는다.** 원칙 3 수정안대로 description 을 여러 줄로 쓰고 싶다면 파서를 먼저 손봐야 한다. 지금은 한 줄 double-quoted 를 유지하는 것이 안전하다.
+- `walk()` 가 `.orig` 와 `.designpaca_version` 만 제외한다: `motion.md` 처럼 아직 없는 파일은 자연히 빠지고, 나중에 추가하면 자동으로 따라간다. 정상.
+
+**추가 권고 — 빌드 타임 검증.**
+SKILL.md 본문이 가리키는 `references/*.md` 15개 중 실제 존재는 14개다(측정 시점 기준). CLI 가 패키징 전에 다음을 확인하면 깨진 링크가 배포되는 것을 막는다:
+
+```
+본문에서 /references\/[\w\/-]+\.md/ 를 전부 뽑아 파일 존재를 확인.
+없으면 빌드 실패.
+```
+
+`03-format-specs.md` §8.6 검증 체크리스트를 그대로 스크립트화하면 된다.
+
+---
+
+## 6. 조치 목록 (팀 리드용)
+
+### 반드시 (5개)
+
+| # | 파일 | 위치 | 내용 |
+|:--:|---|---|---|
+| F1 | `core/src/targets/common.ts`<br>`cursor.ts` 54줄<br>`agents-md.ts` 38줄 | — | `rewriteRefPaths()` 추가 후 Cursor·AGENTS.md 본문의 `references/` 27곳을 실제 설치 경로로 치환 |
+| F2 | `core/src/targets/agents-md.ts` | 35~45줄 | 본문 14KB 전체 주입 → 포인터 블록(약 400B)으로 교체. `detect` 를 `AGENTS.md` 존재로 좁힘 |
+| F3 | `skill/SKILL.md` 120~129<br>`references/tokens.md` §5<br>`references/preflight.md` §2 | — | 성능 예산 표를 `tokens.md` §5 단일 원본으로. SKILL.md 는 2줄 요약, preflight 는 실측 열만 |
+| F4 | `skill/SKILL.md` | 176·177·185줄 | 게이트 2번에 상태색 예외, 3번을 `border-radius 3종 이상`으로 교체, 11번에 대안 3가지 추가 |
+| F5 | `core/src/targets/cursor.ts` | 14·15·22~23줄 | Windsurf 표기 제거(또는 별도 어댑터). Windsurf 는 `.cursor/rules/*.mdc` 를 읽지 않는다 |
+
+### 권장 (10개)
+
+| # | 대상 | 내용 |
+|:--:|---|---|
+| R1 | `SKILL.md` 0단계 | 트리트먼트 축(에디토리얼 / 유틸리티) 추가 — 원칙 8 |
+| R2 | `SKILL.md` 0단계 50줄 | `design.md` 가 있으면 1·2단계 건너뛰기 분기 — 원칙 6 |
+| R3 | `SKILL.md` 프론트매터 | description 에 한국어 리터럴 발화 + 배제 조건 추가 — 원칙 3 |
+| R4 | 새 어댑터 | `~/.agents/skills/designpaca/` 타깃 추가 — 한 번 써서 Codex·Cursor·Copilot 커버 |
+| R5 | `codex.ts` 25줄 | project 스코프를 `.codex/skills` → `.agents/skills` 로 |
+| R6 | `cursor.ts` 34줄 | `description: ${JSON.stringify(...)}` 로 YAML 인용 |
+| R7 | `SKILL.md` 179줄 / `preflight.md` 76 / `layout.md` 109 | 가로 스크롤 검사 폭을 320~1920px 으로 통일 — M1 |
+| R8 | `SKILL.md` 192줄 | eyebrow 규칙에 "전체 대문자는 0개" 명시 — M3 |
+| R9 | `SKILL.md` 카운트 규칙 | 강조색 면적 ≤ 뷰포트 10% 추가 — 원칙 9 |
+| R10 | `three.md` · `svg-filters.md` · `experimental-canvas.md` · `antipatterns.md` | 파일 상단에 3~8줄 섹션 목차 |
+
+### 낮은 우선순위 (5개)
+
+| # | 대상 | 내용 |
+|:--:|---|---|
+| L1 | `SKILL.md` 26줄 | "예외는 두 곳(접근성·하드 게이트)" 1문장 — 원칙 4 |
+| L2 | `SKILL.md` 36줄 | 애니메이션 속성 제한은 예산과 무관하다는 1문장 — 원칙 10(b) |
+| L3 | `SKILL.md` 173줄 | "접근성 전체는 preflight §1에서" 1문장 — 원칙 10(a) |
+| L4 | `SKILL.md` 131줄 | 4단계 진입 전 6줄 요약 지시 — 원칙 7 |
+| L5 | `layout.md` §4 / `preflight.md` §2 | `100vw` 금지 · 이미지 그리드 트랙 `minmax(0,1fr)` · 이중 sticky 금지 · LCP `loading="lazy"` 금지 — 원칙 10(c) |
+| L6 | `cursor.ts` 30줄 | references 를 `.cursor/rules/` 밖(`.designpaca/`)으로 |
+| L7 | CLI 빌드 | 본문의 `references/*.md` 링크 존재 검증을 패키징 전 게이트로 |
+
+---
+
+## 7. 확인 못한 것
+
+- **Cursor 에서 Skills 와 `.mdc` Rules 가 동시에 있을 때의 우선순위** — 공식 문서에 명시가 없다. R4 를 적용하면 `.cursor/skills/designpaca/` 와 `.cursor/rules/designpaca.mdc` 가 공존할 수 있는데, 중복 로드되는지 하나가 이기는지 확인되지 않았다. 둘 중 하나만 설치하도록 CLI 가 배타 선택을 강제하는 편이 안전하다.
+- **`~/.codex/skills/` 가 실제로 Codex 의 사용자 스킬 스캔 경로인지** — 디렉터리 구조상 거의 확실하나(Codex 가 `.system/` 을 관리), 공식 문서 근거가 없고 실제 발동 테스트는 하지 않았다. Codex 를 띄워 `/designpaca` 가 뜨는지 한 번 확인하면 결론이 난다.
+- **Windsurf 실제 동작** — `.windsurf/rules/*.md` 의 `trigger: model_decision` 동작을 실기로 확인하지 않았다. 문서(docs.devin.ai, 리다이렉트 후) 기준이다.
+- **본문 토큰 수 정확값** — 4,600은 한글 1자≈1토큰 가정의 보수적 추정이다. 실제 토크나이저 기준으로는 더 적을 수 있다. 5,000선에 붙는 판단이 걸려 있으므로 `/context` 나 `/doctor` 로 실측하기를 권한다.
+- **`references/motion.md`** — 미작성. 파이프라인 4-4가 이 문서를 지목하고 참조 지도(230줄)에도 등재되어 있다. 작성 완료 시 F1의 경로 치환 대상에 자동 포함된다.
+
+---
+
+# §3. F1~F5 반영 재검증
+
+검증 시점: 2026-08-20. `packages/core/src/targets/` 6개 파일 + `SKILL.md` + `tokens.md` + `preflight.md` 정독.
+
+## 3.0 통과한 것
+
+| 확인 항목 | 결과 |
+|---|:---:|
+| `types.ts` 의 `TargetId` 에 `"windsurf"` 추가됨 | O |
+| `index.ts` 의 `ADAPTERS` 에 `windsurf` 등록됨 | O |
+| `installer.ts:81` 이 `plan.blocked` 를 throw 한다 | O |
+| Windsurf 상한 검사가 **경로 재작성 후** 길이로 이뤄진다 (45줄 생성 → 59줄 검사) | O |
+| `REF_PREFIX` 세 개 모두 `references/` 를 포함하지 않아 이중 치환이 없다 | O |
+| `agents-md.ts` 가 `skillMd` 를 재작성해서 `skillDirActions` 에 넘긴다 | O |
+| `agents-md.ts` 의 `detect` 가 `AGENTS.md` 실존으로 좁혀졌다 | O |
+| user 스코프 refRoot 의 `reference` 중복이 제거됐다 (`~/.designpaca/skill`) | O |
+| `cursor.ts` 에서 Windsurf 감지·라벨이 분리됐다 | O |
+| 성능 예산 값이 세 문서에서 충돌하지 않는다 (전수 grep) | O |
+| `tokens.md` 5장에 "이 표가 유일한 원본" 선언 + 5단계 열 추가 | O |
+| `preflight.md` 2장이 실측 열만 갖는다 | O |
+| 하드 게이트 2·3·11 이 검증 가능한 형태로 교체됐다 | O |
+
+게이트 11은 내가 제안한 것보다 나은 형태로 들어갔다. `{{SETUP_TIME}}` 같은 **명시적 placeholder** 를 허용하고 그것을 6단계 `design.md` 미확정 목록으로 넘기는 구조는, 단순히 대시로 바꾸는 것보다 추적이 된다. 게이트 4도 "정의 없이 섹션마다 다른 것이 실패"로 좁혀져 리듬으로 의도한 테마 반전이 오탐되지 않는다.
+
+`preflight.md` 0장에 새로 들어간 두 줄은 실측에서 나온 것으로 보이고 둘 다 정확하다:
+
+> **React·Vue·Astro 등 프레임워크 프로젝트 → 프로덕션 빌드 결과에 돌린다.** 소스만 보면 렌더된 DOM 이 없어 대비·가로 스크롤·LCP 를 잴 수 없다.
+
+> grep 검사는 **주석과 문자열을 제외**해라. "100vh 금지"라고 쓴 주석이 게이트 #9 에 걸리는 오탐이 실제로 나왔다.
+
+---
+
+## 3.1 V1 — F1 이 절반만 고쳐졌다 (참조 파일 내부 상호 링크)
+
+`rewriteRefPaths` 는 **본문(`body` / `skillMd`)에만** 적용된다. `referenceActions`(common.ts 26~37줄)와 `skillDirActions`(9~23줄)는 `skill.files` 를 **그대로 복사**한다.
+
+참조 파일 안에도 스킬 루트 기준 링크가 4곳 있다:
+
+| 파일:줄 | 내용 |
+|---|---|
+| `references/layout.md:70` | "`references/antipatterns.md` 의 한글 조판 섹션을 읽어라" |
+| `references/preflight.md:5` | "슬롭 지문 검출과 자가 채점표는 `references/antipatterns.md` 에 있다" |
+| `references/preflight.md:35` | "`references/antipatterns.md` 의 grep 목록을 소스에 돌린다" |
+| `references/tokens.md:143` | "상세는 `references/motion.md`" |
+
+Cursor·Windsurf·AGENTS.md 설치본에서 이 네 곳은 프로젝트 루트 기준 `references/antipatterns.md` 를 가리키고, 그 경로에는 아무것도 없다. **본문은 고쳐졌는데 참조 파일끼리는 여전히 끊긴다.**
+
+특히 `preflight.md:35` 가 아프다. 5단계 기계 검사 B가 antipatterns 의 grep 목록을 여는 지점인데, 그게 실패하면 슬롭 검출이 통째로 건너뛰어진다.
+
+**수정안** — `common.ts` 의 두 함수가 파일 내용도 재작성하게 한다.
+
+```ts
+export function skillDirActions(root: string, skill: SkillSource, refPrefix?: string): FileAction[] {
+  const rw = (s: string) => (refPrefix ? rewriteRefPaths(s, refPrefix) : s);
+  const actions: FileAction[] = [
+    { kind: "write", path: path.join(root, "SKILL.md"), content: rw(skill.skillMd) },
+  ];
+  for (const [rel, content] of skill.files) {
+    actions.push({ kind: "write", path: path.join(root, ...rel.split("/")), content: rw(content) });
+  }
+  actions.push({ kind: "write", path: path.join(root, ".designpaca_version"), content: `${skill.version}\n` });
+  return actions;
+}
+// referenceActions 도 같은 방식으로 refPrefix 를 받는다
+```
+
+호출부:
+
+- `claude-code.ts` / `codex.ts` — `refPrefix` 를 넘기지 않는다(스킬 디렉터리 통째 복사라 상대 경로가 맞다)
+- `cursor.ts:46` — `referenceActions(refRoot, ctx.skill, REF_PREFIX)`
+- `windsurf.ts:49` — 동일
+- `agents-md.ts:53` — `skillDirActions(refRoot, ctx.skill, refPrefix)` 로 바꾸고, 지금 인라인으로 하는 `skillMd` 재작성(54~56줄)은 제거한다(함수가 처리한다)
+
+---
+
+## 3.2 V2 — 단순 치환이 오작동한다 (`research/references/`)
+
+팀 리드가 물어본 항목이다. **오작동할 여지가 있다.**
+
+`replaceAll("references/", prefix + "/references/")` 는 문자열이 어디에 있든 자른다. 프로젝트 안에 이미 그런 문자열이 있다:
+
+```
+> 근거: research/references/04-ai-slop-signatures.md, 03-trends-2026.md (조사일 2026-08-20)
+```
+
+이 "근거" 줄은 **6개 참조 파일 하단에 각 1개씩** 있다: `antipatterns.md:271`, `galleries.md:163`, `layout.md:113`, `preflight.md:129`, `reference-method.md:240`, `tokens.md:194`.
+
+치환하면 이렇게 망가진다:
+
+```
+research/.cursor/rules/designpaca/references/04-ai-slop-signatures.md
+```
+
+**지금은 터지지 않는다.** 참조 파일이 재작성 대상이 아니기 때문이다. 그러나 **V1 을 고치는 순간 정확히 이 6곳이 깨진다.** SKILL.md 본문에 `research/references/` 가 한 번이라도 들어가도 마찬가지다.
+
+SKILL.md 본문은 지금 깨끗하다. 파일 경로가 아닌 `references/` 등장이 0곳임을 실측으로 확인했다.
+
+**수정안** — 앞 경계를 명시한다.
+
+```ts
+/**
+ * 본문의 `references/...` 상대 경로를 실제 설치 위치로 바꾼다.
+ *
+ * 앞에 경로 세그먼트가 붙은 것은 우리 참조가 아니다 — 각 참조 파일 하단의
+ * `research/references/...` 근거 줄이 그렇다. 단순 치환하면 그것까지 망가진다.
+ */
+export function rewriteRefPaths(body: string, prefix: string): string {
+  return body.replace(/(^|[^\w./-])references\//g, (_m, lead: string) => `${lead}${prefix}/references/`);
+}
+```
+
+실제 문자열로 검증했다:
+
+| 입력 | 출력 |
+|---|---|
+| "- 어디서 찾는가 → `references/galleries.md`" | "`.cursor/rules/designpaca/references/galleries.md`" 정상 |
+| "> 근거: research/references/04-ai-slop-signatures.md" | **변경 없음** 정상 |
+| "상세는 `references/motion.md`." | 정상 |
+| 표 셀 안의 "`references/presets/editorial.md`" | 정상 |
+| 줄 시작 "references/tokens.md 로 시작하는 줄" | `^` 앵커로 매치, 정상 |
+
+회귀 테스트에 `research/references/` 케이스를 추가하기를 권한다. V1 수정과 함께 들어가야 한다.
+
+---
+
+## 3.3 V3 — AGENTS.md 포인터 블록의 강도
+
+팀 리드 질문: "에이전트가 실제로 SKILL.md 를 열게 만들 만큼 충분한가."
+
+**구조는 맞다.** 조건절("UI 를 새로 만들거나 다시 디자인할 때는")이 무관한 대화에서 무시되게 하고, 순서 제약("마크업·스타일을 쓰기 전에")이 늦게 읽는 것을 막고, 경로가 구체적이다. AGENTS.md 는 항상 로드되므로 조건절 없이 쓰면 매 대화에서 노이즈가 된다. 지금 형태가 옳다.
+
+**약한 지점 두 개.**
+
+**(a) 읽지 않았을 때의 결과가 없다.** SKILL.md 자신은 결과를 말한다 — "1단계를 건너뛴 디자인은 5단계에서 실패 처리한다"(32줄), "세 줄을 못 쓰면 아직 작업을 시작할 수 없다"(52줄). 포인터에는 그런 문장이 없어서 "권고"로 읽힌다. 스킬은 호출 메커니즘이 받쳐주지만 AGENTS.md 포인터는 지시 준수만으로 버틴다. 결과 문장 하나가 그 차이를 메운다.
+
+**(b) 안에 무엇이 있는지 모른다.** "파이프라인(0~6단계)"만으로는 여는 값어치를 판단할 근거가 없다. 원칙 1이 참조 파일에 목차를 요구하는 것과 같은 논리다. 목차는 여는 비용을 낮추는 게 아니라 **여는 이유**를 준다.
+
+**수정안** — `agents-md.ts` 40~50줄. 약 400B → 약 700B (32KiB 예산의 2%).
+
+```ts
+const block = [
+  "## designpaca — 웹 디자인 파이프라인",
+  "",
+  "UI 를 새로 만들거나 다시 디자인할 때는, 마크업·스타일을 쓰기 전에",
+  `\`${refPrefix}/SKILL.md\` 를 읽고 그 파이프라인(0~6단계)을 따른다.`,
+  "**읽지 않고 만든 화면은 이 프로젝트의 토큰 규약과 감사 기준을 통과하지 못한다.**",
+  "",
+  "안에 있는 것 — 규모 판정(전체/연장/국소) · 레퍼런스 조사법 · 디자인 토큰과 성능 예산 ·",
+  "미학 프리셋 4종 · 슬롭 지문 목록과 grep · 출시 전 하드 게이트 12개.",
+  "",
+  "- 프로젝트 루트에 `design.md` 가 있으면 그것이 최상위다. 스킬 기본값을 덮는다.",
+  `- 참조 문서는 \`${refPrefix}/references/\` 에 있다. 각 단계가 지시하는 것만 그때 연다.`,
+  "",
+  `<!-- designpaca v${ctx.skill.version} — \`npx designpaca update\` 가 관리한다. 직접 고치면 업데이트가 멈춘다. -->`,
+].join("\n");
+```
+
+부수: 현재 43줄의 "이 리포에서" 는 user 스코프(`~/.codex/AGENTS.md`)에서는 리포가 아니다. 위 안에서는 그 표현을 뺐다.
+
+---
+
+## 3.4 V4 — Windsurf 어댑터 스펙 대조
+
+`03-format-specs.md` 5장과 전 항목 일치한다.
+
+| 스펙 | 문서 근거 | `windsurf.ts` | 판정 |
+|---|---|---|:---:|
+| 경로 | `.windsurf/rules/*.md` (legacy) / `.devin/rules/*.md` (권장) | `.windsurf/rules/designpaca.md` | O |
+| 확장자 | `.md` (`.mdc` 아님) | `.md` | O |
+| 프론트매터 키 | `trigger`, `globs` | `trigger`, `description` | O (아래 주) |
+| trigger 값 | `always_on` / `model_decision` / `glob` / `manual` | `model_decision` | O |
+| 워크스페이스 상한 | 12,000자/파일 | 12,000 하드, 초과 시 `blocked` | O |
+| 글로벌 상한 | 6,000자 | (글로벌 미지원) | 해당 없음 |
+
+**`description` 키에 대한 주의.** 내가 fetch 한 문서의 프론트매터 예시는 `trigger` 와 `globs` 만 보여준다. `model_decision` 모드 설명이 *"Description shown always; full content retrieved when Cascade deems relevant"* 이므로 description 필드는 이 모드의 전제이고 커뮤니티 예시들도 이 조합을 쓴다. **다만 공식 예시로 확인하지는 못했다.** 실기 확인 전까지는 "근거 있는 추정"으로 두는 게 정확하다.
+
+현재 규칙 파일 최종 크기는 **9,061자**(경로 재작성 후, 헤더 포함) / 상한 12,000. 여유 2,939자. V1 수정으로 참조 파일도 재작성되더라도 규칙 파일 본문은 변하지 않으므로 이 값은 그대로다.
+
+**`.devin/rules/` 병행 배치는 지금 하지 않는 게 맞다.** 문서가 `.windsurf/rules/` 를 legacy 로 표기하긴 하나 여전히 읽고, 두 곳에 쓰면 규칙이 두 번 적용될 수 있다.
+
+---
+
+## 3.5 V5 — description YAML 인용 (R6 미적용, 유지 권고)
+
+`cursor.ts:33` 과 `windsurf.ts:40` 이 여전히 인용부호 없이 쓴다.
+
+```ts
+`description: ${ctx.skill.description}`,
+```
+
+현재 description 값(320자)에는 콜론+공백도 `#` 도 없어 **지금은 유효한 YAML 이다**(실측 확인). 그러나 원칙 3 수정안대로 배제 조건 문장을 넣으면 콜론이 들어갈 확률이 크게 오른다. 깨지면 Cursor·Windsurf 가 **조용히 규칙을 무시한다** — 에러가 나지 않아 알아채기 어렵다.
+
+```ts
+`description: ${JSON.stringify(ctx.skill.description)}`,
+```
+
+JSON 문자열은 YAML 의 유효한 double-quoted scalar 이므로 그대로 쓸 수 있다. 두 줄 고치면 끝난다.
+
+---
+
+## 3.6 V6 — 본문이 5,000토큰 선을 넘었다
+
+F3~F4 반영 후 실측:
+
+| 시점 | 줄 | 문자 | 추정 토큰 |
+|---|---:|---:|---:|
+| 감사 시작 | 235 | 7,271 | 약 4,600 |
+| **F1~F5 반영 후** | **232** | **7,938** | **약 5,024** |
+
+Claude Code 의 컴팩션 재부착 예산은 스킬당 앞 5,000토큰이다. **지금 선을 막 넘었다.**
+
+추정치는 보수적이다(한글 1자를 1토큰으로 계산). 실제 토크나이저에서는 더 적게 나올 수 있다. 그래도 여유가 사라진 것은 사실이고, 4장의 원칙 8 블록(+14줄, 약 +300토큰)을 넣으면 확실히 넘는다.
+
+넘으면 잘리는 것은 문서 **끝** — 참조 문서 지도 표와 "작업 중 지켜야 할 것" 섹션이다. 치명적이진 않지만(각 단계가 참조 파일을 인라인으로 지목하므로) 관리해야 한다.
+
+**확보 방안 — 참조 문서 지도 표를 압축한다.** 216~233줄 표는 각 단계가 이미 인라인으로 하는 말을 반복한다. 표를 지우고 4줄로:
+
+```markdown
+## 참조 문서 지도
+
+전부 `references/` 에 있다. **각 단계가 지시할 때 그것만 연다.**
+1단계 `galleries.md` `reference-method.md` · 2단계 `presets/README.md` + 고른 프리셋 1개 · 3단계 `tokens.md` `antipatterns.md`(한글 조판) ·
+4단계 `layout.md` `svg-filters.md` `three.md` `motion.md` `experimental-canvas.md` · 5단계 `preflight.md` `antipatterns.md`
+```
+
+약 13줄 절약(약 250토큰). 원칙 1의 인덱스 요건은 유지된다 — 어떤 파일이 있고 언제 읽는지가 여전히 한눈에 보인다.
+
+`/context` 나 `/doctor` 로 실측하기를 권한다. 내 추정보다 낮게 나오면 표를 유지해도 된다.
+
+---
+
+## 3.7 V7 — M1(가로 스크롤 폭)이 아직 열려 있다
+
+R7 권장 항목이라 미적용이 예상 범위이지만, 하드 게이트와 직결되므로 다시 올린다.
+
+| 위치 | 값 |
+|---|---|
+| `SKILL.md:174` 하드 게이트 5 | `320~1920px 사이 어느 폭에서든` |
+| `references/preflight.md:88` | `375px 폭에서 가로 스크롤 없음` |
+| `references/layout.md:109` | `모바일 폭(375px)에서 가로 스크롤이 없다` |
+
+하드 게이트는 "오버라이드 없음"이라고 선언한 목록인데 참조 문서 두 곳이 **더 느슨한 기준**을 준다. 모델이 375px 만 확인하고 게이트를 통과 표시할 근거가 문서 안에 있다. 320px 으로 통일하면 된다(iPhone SE 세로 폭이 320px 이고, 그 아래가 뚫린 채 남는다).
+
+---
+
+# §4. 원칙 8 설계안 — 규모별 경로 분기
+
+## 4.1 문제
+
+지금은 모든 브리프가 0~6 전 단계를 통과한다. "이 버튼 색 좀 바꿔줘"에 갤러리 3곳 조사와 프리셋 선택과 리스크 결정을 요구하면, 모델은 **스킬 전체를 무시하는 법을 배운다.** 한 번 무시하면 하드 게이트도 같이 사라진다.
+
+반대 방향도 실패다. 경로를 쉽게 열어주면 전부 짧은 쪽으로 도망가고, 그러면 핵심 규칙 1("레퍼런스 없이 시작하지 않는다")이 무력해진다.
+
+## 4.2 선행 사례에서 가져온 것
+
+**Hallmark — 신호 발화(signal firing).** 규모를 "판단"하게 하지 않고 **사실 신호의 발화 여부**로 라우팅한다.
+
+> **Route to component-scope** if any signal fires:
+> - Brief names a single UI element (button, card, modal, etc.)
+> - Brief is ≤30 words referencing one element
+> - Target file is a single component
+> - User says "just the X," "only the Y," "this one element"
+>
+> — Nutlope/hallmark `skills/hallmark/SKILL.md`
+
+이것이 핵심 발명이다. **"작은 작업인가?"는 모델이 자기에게 유리하게 답할 수 있고, "새로 만드는 화면이 있는가?"는 사실이다.** 팀 리드가 요구한 "자의적 선언 방지"의 답이 여기 있다.
+
+Hallmark 는 경로마다 무엇이 남는지도 명시한다. component-scope 는 macrostructure·nav/footer archetype·hero enrichment 를 건너뛰지만 **8가지 상태(default/hover/focus/active/disabled/loading/error/success)는 오히려 더 강하게 요구**한다. 축소가 아니라 **초점 이동**이다.
+
+**design-taste-frontend — 모드 감지를 첫 행동으로.**
+
+> ### 11.A Detect the Mode (first action)
+> * **Greenfield** / **Redesign - Preserve** / **Redesign - Overhaul**
+> If ambiguous, ask **once**: *"Should this redesign preserve the existing brand, or are we starting visually from scratch?"*
+
+모드를 **가장 먼저** 정하고, 애매하면 딱 한 번 묻는다.
+
+**artifact-design — 트리트먼트 보정과 기본 방향.**
+
+> **Calibrate treatment, not whether to design.** ... **When unsure: a well-composed page is never the wrong answer; an over-designed visual identity sometimes is.**
+
+**단 designpaca 는 기본 방향을 반대로 잡아야 한다.** artifact-design 의 주된 실패는 과잉 디자인이지만, designpaca 는 이미 핵심 규칙 3("화려함은 4순위")과 4("대담함은 한 곳에만")로 과잉을 막아뒀다. designpaca 의 주된 실패는 **레퍼런스 없이 기본값에서 시작하는 것**이다(핵심 규칙 1). 그러므로 **애매하면 긴 경로**로 기울어야 한다.
+
+## 4.3 결정 1 — 분기 기준
+
+세 개의 **사실 질문**으로 판정한다. 셋 다 파일을 보면 답이 나오고 모델이 해석으로 뒤집을 여지가 없다.
+
+```
+A. 없던 화면을 새로 만드는가?
+B. 토큰 체계(색 역할·타입 스케일·간격 리듬·모션 문법)를 새로 정하거나 다시 정의하는가?
+C. 프로젝트에 design.md 가 있는가?
+```
+
+**왜 이 셋인가.**
+
+- **A(새 화면)** — 셀 수 있다. "기존 페이지에 섹션을 추가"는 화면을 새로 만드는 게 아니므로 아니오다. 그 경우는 아래 섹션 상한이 잡는다.
+- **B(토큰 체계)** — 이것이 진짜 경계다. 토큰을 정의·재정의하면 시스템 변경이고 페이지 전체에 파급된다. 기존 토큰 안에서 값을 쓰는 것은 적용이다. 그리고 "토큰 파일을 여는가"로 확인된다.
+- **C(design.md)** — 방향이 이미 정해졌다는 파일 증거다. 있으면 1·2단계를 다시 돌 이유가 없고, 오히려 다시 돌면 §2 원칙 6에서 지적한 "지난번과 다른 디자인"이 발생한다.
+
+**A·B 를 "규모", C 를 "이력"으로 나눈 것이 이 설계의 뼈대다.** 규모가 크면 방향이 필요하고, 이력이 있으면 방향은 이미 있다.
+
+**섹션 상한을 하나 더 건다.** A·B 가 둘 다 아니오여도 "기존 페이지 전면 개편"이 국소로 새면 안 된다.
+
+```
+국소 경로 조건 — 아래를 전부 만족할 때만
+- A 아니오 (새 화면 없음)
+- B 아니오 (토큰 체계 재정의 없음)
+- 손대는 섹션이 2개 이하
+```
+
+"섹션 2개 이하"는 셀 수 있고, 조작하려면 사실을 왜곡해야 한다.
+
+## 4.4 결정 2 — 경로 3개와 각 경로에 남는 것
+
+2개로는 부족하다. "design.md 가 있는 재작업"이 갈 곳이 없어진다. 그게 실무에서 가장 흔한 경우다(같은 사이트에 페이지 추가).
+
+| 경로 | 조건 | 도는 단계 |
+|---|---|---|
+| **전체** | (A 또는 B) 이고 C 아니오 | 0 → 1 → 2 → 3 → 4 → 5 → 6 |
+| **연장** | (A 또는 B) 이고 C 예 | 0 → 3 → 4 → 5 → 6 |
+| **국소** | A·B 아니오, 섹션 2개 이하 | 0 → 4 → 5 → 6(추기) |
+
+**어느 경로에서도 남는 것** — 팀 리드 직관대로 하드 게이트와 `design.md` 다. 여기에 판단 하나를 더한다.
+
+| 항목 | 전체 | 연장 | 국소 | 근거 |
+|---|:---:|:---:|:---:|---|
+| 하드 게이트 12개 | O | O | O | 버그 검사지 미학 검사가 아니다. 버튼 하나를 고쳐도 대비 4.5:1은 지켜야 한다 |
+| 접근성(38줄) | O | O | O | 이미 "어떤 브리프보다 우선"이라 경로와 무관하다. **경로별로 다시 쓰지 않는다** — 쓰면 오히려 "경로마다 다를 수도 있나"로 읽힌다 |
+| 토큰 경유 | O | O | O | 게이트 1번이 이미 커버한다 |
+| `design.md` | 작성 | 갱신 | **한 줄 추기** | 국소마다 전체를 다시 쓰는 것도 과잉이다 |
+| 카운트 규칙 | O | O | **손댄 부분만** | 섹션 2개를 고치면서 페이지 전체 eyebrow 를 세는 것은 범위 밖이다. 다만 **내가 추가한 것이 기존 카운트를 넘기게 만드는지**는 본다 |
+| 레퍼런스 조사(1단계) | O | X | X | 연장·국소는 `design.md` 가 그 자리를 대신한다 |
+| 리스크 하나(2단계) | O | 상속 | X | 연장은 `design.md` 의 리스크를 이어받는다. 국소에는 리스크가 없는 게 맞다 |
+
+**카운트 규칙을 국소에서 "손댄 부분만"으로 좁힌 것이 이 표에서 유일하게 논쟁적인 결정이다.** 전부 돌리자는 주장도 가능하다. 그러나 국소 작업마다 페이지 전체 레이아웃 패밀리를 다시 세게 하면 그 자체가 국소 경로의 존재 이유를 없앤다. Hallmark 가 component-scope 에서 macrostructure 를 아예 건너뛰는 것과 같은 판단이다.
+
+## 4.5 결정 3 — 어디에 쓰나
+
+**0단계 안, 브리프 3줄 다음.** 이유:
+
+- 새 섹션으로 만들면 파이프라인이 8단계처럼 보인다
+- 0단계 앞에 두면 "브리프 게이트보다 먼저 하는 것"이 되어 순서가 꼬인다. 규모는 브리프를 읽어야 판정된다
+- 0단계는 이미 "브리프 게이트"다. 규모 판정은 게이트의 일부다
+
+분량 목표 **14줄**. 3.6의 참조 지도 압축(-13줄)과 상쇄되어 순증이 거의 없다.
+
+## 4.6 결정 4 — 오용 방지 5층
+
+**(a) 판정을 사실 질문으로.** "작은 작업인가?"가 아니라 "없던 화면을 새로 만드는가?"다. Hallmark 의 신호 발화 방식.
+
+**(b) 선언 + 근거 의무.** 경로를 고르면 어느 조건으로 골랐는지 한 줄로 말한다. 원칙 4의 "설명 의무"와 같은 구조이고, 사용자가 즉시 교정할 수 있는 지점을 만든다.
+
+**(c) 기본값을 긴 쪽으로.** 애매하면 국소가 아니라 연장/전체.
+
+**(d) 승급 규칙(escalation).** 조사한 어느 스킬에도 없는 장치이고, 실무에서 가장 자주 필요한 것이다. 국소로 시작했는데 작업 중에 조건이 깨지는 일은 흔하다 — 버튼 색을 바꾸려다 보니 토큰이 아예 없어서 새로 정의해야 하는 경우.
+
+> 국소로 시작했다가 조건이 깨지면 그 자리에서 멈추고 경로를 올린다. **올렸다고 말해라. 조용히 국소에 머무는 것이 이 스킬의 최대 실패다.**
+
+**(e) 반대 방향 오용도 막는다.** 국소 경로가 "선택"이면 모델은 안전하게 긴 경로를 고른다. 그러면 사용자가 스킬을 끈다. 국소 조건에 해당하면 **국소로 가는 것이 의무**여야 한다. 이 문장이 없으면 경로 분기가 작동하지 않는다.
+
+## 4.7 SKILL.md 에 넣을 최종 문장
+
+### (1) 0단계 — 브리프 3줄 코드블록 다음, "**막혔을 때**" 앞에 삽입
+
+```markdown
+**규모를 판정한다.** 셋 다 사실 질문이다. 추측하지 말고 파일을 보고 답해라.
+
+- **A.** 없던 화면을 새로 만드는가?
+- **B.** 토큰 체계(색 역할·타입 스케일·간격 리듬·모션 문법)를 새로 정하거나 다시 정의하는가?
+- **C.** `design.md` 가 있는가?
+
+| 조건 | 경로 | 도는 단계 |
+|---|---|---|
+| (A 또는 B) 이고 C 아니오 | **전체** | 0 → 1 → 2 → 3 → 4 → 5 → 6 |
+| (A 또는 B) 이고 C 예 | **연장** | 0 → 3 → 4 → 5 → 6 — 방향은 `design.md` 가 이미 답했다 |
+| A·B 둘 다 아니오, 손대는 섹션 2개 이하 | **국소** | 0 → 4 → 5 → 6(한 줄 추기) |
+
+고른 경로와 근거를 한 줄로 말해라: *"국소 — 새 화면 없음, 토큰 재정의 없음, 섹션 1개."*
+
+**애매하면 긴 쪽으로.** 단 국소 조건에 해당하면 국소로 가라 — 버튼 하나에 갤러리 3곳을 여는 것은 사용자가 이 스킬을 끄게 만든다.
+**국소로 시작했다가 조건이 깨지면 멈추고 올린다.** 토큰을 새로 정의하게 됐거나, 손댄 섹션이 3개를 넘었거나, 방향을 바꿔야 하면. **올렸다고 말해라. 조용히 국소에 머무는 것이 이 스킬의 최대 실패다.**
+```
+
+### (2) 파이프라인 도입부 42줄 — 교체
+
+건너뛰기를 허용하되 순서는 고정임을 명시한다. 지금 문장("순서를 바꾸지 마라")과 경로 분기가 정면 충돌한다.
+
+```markdown
+일곱 단계다(0~6). 0단계에서 정한 경로에 따라 **일부 단계를 건너뛸 수는 있지만, 도는 단계의 순서는 고정이다.** 각 단계에는 통과 조건이 있고, 통과하지 못하면 다음 단계로 가지 않는다.
+```
+
+### (3) 핵심 규칙 1번 32줄 — 교체
+
+지금 문장은 연장·국소 경로를 자동으로 실패시킨다.
+
+```markdown
+1. **레퍼런스 없이 시작하지 않는다.** 전체 경로에서 1단계를 건너뛴 디자인은 5단계에서 실패 처리한다. 연장·국소 경로는 `design.md` 가 그 자리를 대신한다 — 그것도 없이 건너뛰면 실패다.
+```
+
+### (4) 1단계 제목 68줄과 첫 줄 70줄 — 교체
+
+```markdown
+### 1단계 — 레퍼런스 조사 (전체 경로 전용, **건너뛰기 금지**)
+
+이 단계가 designpaca의 심장이다. 머릿속 기본값이 아니라 **실제로 존재하는 사이트**에서 시작한다. 연장·국소 경로는 0단계에서 이미 이 단계를 건너뛰기로 정했고, 그 근거는 `design.md` 다.
+```
+
+### (5) 2단계 통과 조건 109줄 — 한 줄 추가
+
+```markdown
+> 통과 조건: 한 문장 컨셉 + 프리셋 + 리스크 하나가 적혔다.
+> **연장 경로는 이 단계를 돌지 않는다.** `design.md` 의 컨셉·프리셋·리스크를 그대로 이어받는다. 바꾸고 싶으면 전체 경로로 올린다.
+```
+
+### (6) 5단계 카운트 규칙 끝 193줄 뒤 — 두 줄 추가
+
+```markdown
+**국소 경로는 카운트를 페이지 전체로 다시 세지 않는다.** 내가 손댄 부분이 기존 카운트를 넘기게 만드는지만 본다.
+하드 게이트 12개는 경로와 무관하게 전부 돈다.
+```
+
+### (7) 6단계 210줄 뒤 — 세 줄 추가 (기존 통과 조건 교체 포함)
+
+```markdown
+**국소 경로는 전체를 다시 쓰지 않는다.** `design.md` 끝에 한 줄만 추기한다 — `2026-08-20 · 무엇을 바꿨는지 · 토큰 변경이 있으면 그 값`. 기록 없는 국소 작업이 쌓이면 design.md 가 거짓말이 된다.
+
+> 통과 조건: `design.md` 가 프로젝트 루트에 있다(국소면 추기됐다).
+```
+
+## 4.8 분량 정산
+
+| 항목 | 증감 |
+|---|---:|
+| (1) 0단계 규모 판정 블록 | +14줄 |
+| (2) 파이프라인 도입부 교체 | 0 |
+| (3) 핵심 규칙 1번 교체 | 0 |
+| (4) 1단계 제목·첫 줄 교체 | 0 |
+| (5) 2단계 통과 조건 | +1줄 |
+| (6) 5단계 카운트 단서 | +2줄 |
+| (7) 6단계 국소 추기 | +3줄 |
+| 3.6 참조 지도 압축 | **-13줄** |
+| **합계** | **+7줄** |
+
+232줄 → 239줄. 토큰은 약 5,024 → 약 5,050 근처. **여전히 선에 붙어 있다.** 참조 지도 압축을 반드시 함께 넣어야 하고, 그래도 `/context` 실측이 필요하다.
+
+## 4.9 이 설계가 하지 않는 것
+
+- **경로를 자동으로 결정하지 않는다.** 모델이 판정하고 선언한다. 자동 판정은 브리프의 뉘앙스를 놓친다.
+- **국소 경로에서 품질 기준을 낮추지 않는다.** 하드 게이트·접근성·토큰 경유는 그대로다. 줄어드는 것은 **방향 결정 비용**뿐이다.
+- **4번째 경로(예: 탐색/실험)를 만들지 않는다.** 실험은 `experimental-canvas.md` 가 이미 게이트로 다룬다. 경로가 4개가 되면 판정 자체가 부담이 된다.
diff --git a/research/svg/01-primitives-reference.md b/research/svg/01-primitives-reference.md
new file mode 100644
index 0000000..4205506
--- /dev/null
+++ b/research/svg/01-primitives-reference.md
@@ -0,0 +1,865 @@
+# 01. SVG 필터 프리미티브 전수 레퍼런스
+
+> designpaca 스킬용 실전 레퍼런스. 모든 기본값·값 범위는 W3C SVG 1.1 / Filter Effects Module Level 1 스펙과 MDN 기준.
+> "검증됨" 표시는 Chromium 151(Playwright)에서 실제 렌더링으로 확인한 항목이다. 그 외 엔진(Firefox / WebKit)은 별도 표기.
+
+---
+
+## 0. 실행 모델부터 이해하기
+
+SVG 필터는 **이미지 처리 파이프라인**이다. CSS `filter: blur(4px)`처럼 "효과 하나"가 아니라, 노드 그래프를 직접 배선하는 도구다.
+
+```
+SourceGraphic ─┬─→ [feGaussianBlur] → result="blur" ─┐
+               │                                      ├─→ [feBlend] → 최종 출력
+               └──────────────────────────────────────┘
+```
+
+### 0.1 배선 규칙 (`in` / `in2` / `result`)
+
+| 규칙 | 내용 |
+|---|---|
+| `in` 생략 시 | **첫 번째** 프리미티브면 `SourceGraphic`, 그 외에는 **직전 프리미티브의 출력** |
+| `in2` | 입력 2개가 필요한 프리미티브(`feBlend`, `feComposite`, `feDisplacementMap`, `feTile`은 예외적으로 `in`만)에서 두 번째 입력 |
+| `result` | 이 프리미티브의 출력에 이름을 붙여 뒤에서 재사용. **이름을 안 붙이면 직전 것만 참조 가능** |
+| 출력 개수 | 프리미티브당 항상 **1개** |
+
+> **함정 1**: `result`를 붙여 놓고도 다음 프리미티브에 `in`을 안 쓰면, 어차피 직전 출력이 들어가서 "왜 배선이 무시되지?"가 된다. 분기(branch)를 만들 때는 **양쪽 모두 `in`을 명시**하라.
+
+### 0.2 소스 키워드
+
+| 키워드 | 의미 | 실전 사용 가능? |
+|---|---|---|
+| `SourceGraphic` | 필터가 적용된 원본 그래픽 (RGBA 전체) | ✅ |
+| `SourceAlpha` | 원본의 **알파 채널만** (RGB는 전부 0=검정) | ✅ 그림자·아웃라인·범프맵의 기본 재료 |
+| `BackgroundImage` | 요소 뒤 배경 | ❌ **어떤 브라우저도 구현 안 함.** `backdrop-filter`로 대체 |
+| `BackgroundAlpha` | 배경의 알파 | ❌ 미구현 |
+| `FillPaint` | 대상의 `fill` 페인트로 무한 평면 채움 | ❌ 사실상 신뢰 불가 (엔진별 해석 불일치) |
+| `StrokePaint` | 대상의 `stroke` 페인트로 무한 평면 채움 | ❌ 사실상 신뢰 불가 |
+
+> **함정 2**: 튜토리얼에서 `BackgroundImage`를 봤다면 2010년대 초 문서다. 유리/글래스 효과는 `backdrop-filter: url(#id)`로 간다(§03 참고).
+
+### 0.3 필터 영역 (filter region) — 가장 흔한 버그의 원인
+
+```xml
+<!-- 기본값 -->
+<filter id="f" x="-10%" y="-10%" width="120%" height="120%"
+        filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">
+```
+
+필터 영역 밖은 **잘려 나간다**. 기본값은 바운딩 박스보다 사방 10%씩만 넓으므로, `stdDeviation`이 크거나 `feOffset`/`feMorphology`로 밀어내면 잘린 사각형이 그대로 보인다.
+
+**경험칙**
+
+| 상황 | 권장 영역 |
+|---|---|
+| 블러 `stdDeviation` ≤ 5 | 기본값(120%)으로 충분 |
+| 블러 6~15, 글로우, 아웃라인 | `x="-30%" y="-30%" width="160%" height="160%"` |
+| 다중 드롭섀도(네온), 큰 변위 | `x="-40%" y="-40%" width="180%" height="180%"` |
+| 노이즈/그레인 오버레이처럼 **영역을 넓히면 안 되는** 경우 | `x="0%" y="0%" width="100%" height="100%"` (성능도 이득) |
+
+> 필터 영역을 넓히면 **처리 픽셀 수가 제곱으로 증가**한다. 180% × 180% = 원본의 3.24배. 필요한 만큼만 넓혀라. (검증됨 — §02 레시피 18번 비교 데모)
+
+### 0.4 좌표계: `filterUnits` vs `primitiveUnits`
+
+| 속성 | 기본값 | 영향 대상 |
+|---|---|---|
+| `filterUnits` | `objectBoundingBox` | `<filter>`의 `x/y/width/height` |
+| `primitiveUnits` | `userSpaceOnUse` | 각 프리미티브의 `x/y/width/height` **그리고 `stdDeviation`, `radius`, `dx/dy`, `scale` 같은 길이값** |
+
+- `objectBoundingBox` → 0~1 또는 % 로 해석. `0.05` = 바운딩 박스 크기의 5%.
+- `userSpaceOnUse` → 현재 사용자 좌표계의 절대 길이(대개 px).
+
+```xml
+<!-- 요소 크기에 비례하는 블러 (반응형 컴포넌트에 유용) -->
+<filter id="relBlur" primitiveUnits="objectBoundingBox">
+  <feGaussianBlur stdDeviation="0.05"/>  <!-- 박스 폭의 5% -->
+</filter>
+```
+> 검증됨: 90×90px 박스에 `primitiveUnits="objectBoundingBox"` + `stdDeviation="0.05"` → 약 4.5px 블러.
+
+> **함정 3**: `primitiveUnits="objectBoundingBox"`로 바꾸면 `stdDeviation="10"`이 "박스 10배 크기 블러"가 되어 화면이 통째로 사라진다. 단위를 바꾸면 **모든 수치를 다시 계산**해야 한다.
+
+> **함정 4 (HTML 요소)**: `filter: url(#f)`를 HTML 요소에 걸면 바운딩 박스는 **border box** 기준이다. `objectBoundingBox`를 쓰는 필터를 SVG용으로 만들어놓고 HTML에 재활용하면 크기가 달라진다.
+
+### 0.5 색공간: `color-interpolation-filters`
+
+**SVG 필터의 기본 연산 색공간은 `linearRGB`다.** CSS의 `filter: blur()` 같은 단축 함수는 `sRGB`다. 이 불일치가 "같은 값인데 왜 다르게 보이지?"의 정체다.
+
+검증된 실측 (Chromium, `#e11d48` 사각형에 `feColorMatrix type="saturate" values="0"`):
+
+| 설정 | 결과 |
+|---|---|
+| 기본(linearRGB) | 밝은 회색 (≈ `#808080`) |
+| `color-interpolation-filters="sRGB"` | 어두운 회색 (≈ `#4a4a4a`, 계산값 R=G=B=74) |
+
+같은 조건의 `feGaussianBlur stdDeviation="10"`:
+- linearRGB → 헤일로가 **밝고 넓게** 번짐(물리적으로 정확한 빛의 합성)
+- sRGB → 헤일로가 **좁고 진함**(포토샵/CSS와 동일한 룩)
+
+**실전 지침**
+
+```xml
+<!-- 디자인 툴/CSS와 색을 맞추고 싶으면 항상 filter에 sRGB를 명시 -->
+<filter id="f" color-interpolation-filters="sRGB"> ... </filter>
+```
+
+| 케이스 | 권장 |
+|---|---|
+| 듀오톤, 그라디언트 맵, 브랜드 컬러 정확도 | **반드시 `sRGB`** |
+| 알파 대비 트릭(gooey), 합성 위주 | `sRGB` (예측 가능) |
+| 조명(`feDiffuseLighting`/`feSpecularLighting`)에서 물리적 자연스러움 | linearRGB 기본이 더 그럴듯할 때도 있음 — 둘 다 보고 고른다 |
+| feTurbulence 노이즈 자체 | 어느 쪽이든 무방, 단 후속 대비 조정 결과가 달라짐 |
+
+> **함정 5**: `color-interpolation-filters`는 개별 프리미티브에도 걸 수 있다. 체인 중간에서 색공간이 바뀌면 브라우저가 변환을 삽입한다 → 비용 발생 + 예측 어려움. **`<filter>` 한 곳에만 지정**하는 것이 안전하다.
+
+### 0.6 필터 붙이는 법
+
+```html
+<!-- 1. SVG 요소에 (프레젠테이션 어트리뷰트) -->
+<circle filter="url(#f)" .../>
+
+<!-- 2. HTML 요소에 (CSS) -->
+<div style="filter: url(#f)"></div>
+
+<!-- 3. 배경에 (Chromium 계열만) -->
+<div style="backdrop-filter: url(#f)"></div>
+```
+
+필터 정의를 담는 SVG 컨테이너 패턴:
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
+  <defs>
+    <filter id="myFilter"> ... </filter>
+  </defs>
+</svg>
+```
+
+> 검증됨: Chromium에서는 `<svg style="display:none">` 안에 정의한 필터도 정상 동작했다. 하지만 과거 엔진 이슈 보고가 있고 Firefox/WebKit은 이 세션에서 미검증이므로, **`width=0 height=0 + position:absolute` 패턴을 기본값으로 쓴다.**
+
+> 검증됨: 존재하지 않는 필터를 참조하면(`filter:url(#없음)`) Chromium은 **필터를 무시하고 원본을 그대로 렌더**한다(CSS·SVG 어트리뷰트 양쪽 모두). 현행 Filter Effects L1과 일치. 다만 구 SVG 1.1은 "요소를 렌더하지 않음"으로 정의했었으므로, 레거시 엔진에서 요소가 사라질 수 있다 — **ID 오타는 치명적일 수 있다.**
+
+---
+
+## 1. 소스 생성 프리미티브
+
+입력 없이 새 이미지를 만들어내는 것들. 필터 그래프의 "재료".
+
+---
+
+### 1.1 `<feTurbulence>` — 절차적 노이즈
+
+가장 강력하고, 가장 비싼 프리미티브. Perlin 노이즈를 생성한다.
+
+| 속성 | 기본값 | 범위/타입 | 의미 |
+|---|---|---|---|
+| `type` | `turbulence` | `turbulence` \| `fractalNoise` | `turbulence`=결·물결·대리석, `fractalNoise`=구름·그레인 |
+| `baseFrequency` | `0` | 0 이상 실수, `x y` 2개 가능 | **노이즈의 촘촘함.** 작을수록 큰 무늬 |
+| `numOctaves` | `1` | 양의 정수 | 겹칠 주파수 층 수. 디테일↑ 비용↑ |
+| `seed` | `0` | 정수(소수는 0 방향으로 절삭) | 난수 시드 |
+| `stitchTiles` | `noStitch` | `noStitch` \| `stitch` | 타일 경계 이음매 제거 |
+
+**`baseFrequency` 실전 값 지도**
+
+| 값 | 결과 | 용도 |
+|---|---|---|
+| `0.002 ~ 0.01` | 거대한 유기적 덩어리 | 액체 배경, 오로라, 마블 |
+| `0.01 ~ 0.03` | 큰 파형 | 손그림 왜곡, 물결 텍스트 |
+| `0.03 ~ 0.08` | 중간 결 | 종이 질감, 잉크 번짐, 러프 엣지 |
+| `0.1 ~ 0.3` | 촘촘한 결 | 천·직물, 얕은 디스토션 |
+| `0.6 ~ 0.95` | 픽셀 단위 그레인 | **필름 그레인 / 노이즈 오버레이** |
+| `> 1.0` | 에일리어싱 발생, 무의미 | ❌ |
+
+**2값 형식**: `baseFrequency="0.008 0.05"` → x축은 큰 파형, y축은 촘촘 → **가로로 늘어진 결**. 물결·글리치 스캔라인에 필수.
+
+**`numOctaves` 실전**: 1=밋밋, 2~3=대부분의 경우 최적, 4~5=거친 종이, **5 초과는 시각적 이득이 거의 없고 비용만 늘어난다.**
+
+**함정**
+
+1. **`baseFrequency`의 기본값은 `0`** = 아무것도 안 나온다. 반드시 지정하라.
+2. **알파 채널도 노이즈다.** feTurbulence 출력은 RGB뿐 아니라 A도 랜덤이라 그냥 보면 반투명 컬러 스노우다. 불투명 그레이 노이즈가 필요하면 `feColorMatrix`로 알파를 1로 고정하라:
+   ```xml
+   <feColorMatrix type="matrix" values="
+     0.33 0.33 0.33 0 0
+     0.33 0.33 0.33 0 0
+     0.33 0.33 0.33 0 0
+     0    0    0    0 1"/>   <!-- 마지막 행: A = 1 상수 -->
+   ```
+3. **특정 seed 값에서 사각형 아티팩트**가 나온다. 보고된 값: `514, 1977, 2337, 4777, 8032, 9615` 등. 스펙 참조 구현의 정수 나눗셈 버그라 Chrome·Firefox·Batik이 동일하게 재현한다. → **seed는 1~50 같은 작은 값에서 눈으로 확인하고 고정하라.**
+4. **CPU 비용이 가장 크다.** `baseFrequency`를 애니메이션하면 매 프레임 전체 노이즈를 재생성한다. §03 참고.
+5. `stitchTiles="stitch"`는 **타일링해서 배경으로 쓸 때만** 의미가 있다. `feTile`이나 CSS `background-repeat`와 조합할 때 켜라.
+
+---
+
+### 1.2 `<feFlood>` — 단색 채우기
+
+| 속성 | 기본값 | 의미 |
+|---|---|---|
+| `flood-color` | `black` | 채울 색. **CSS 프로퍼티이기도 하다 → CSS/SMIL로 애니메이션 가능** |
+| `flood-opacity` | `1` | 0~1 |
+
+필터 **서브영역 전체**를 색으로 채운다. 단독으로는 쓸모없고 `feComposite operator="in"`으로 마스킹해서 쓴다.
+
+```xml
+<!-- 알파 모양대로 특정 색 칠하기 = 실루엣 -->
+<feFlood flood-color="#22d3ee" result="col"/>
+<feComposite in="col" in2="SourceAlpha" operator="in"/>
+```
+
+> **함정 6**: `feFlood`는 서브영역 전체를 채우므로, 서브영역이 필터 영역(기본 120%)이면 색이 사방으로 넘친다. `operator="in"` 마스킹을 **반드시** 뒤에 붙이거나 `x/y/width/height`로 서브영역을 제한하라.
+
+> **활용**: `flood-color`가 CSS 프로퍼티라는 점이 핵심이다. `baseFrequency`·`stdDeviation` 같은 어트리뷰트는 CSS로 애니메이션할 수 없지만, **`flood-color`, `flood-opacity`, `lighting-color`는 CSS 트랜지션/애니메이션이 가능하다.** (검증됨: SMIL `<animate attributeName="flood-color">` 정상 동작)
+
+---
+
+### 1.3 `<feImage>` — 외부 이미지 끌어오기
+
+| 속성 | 기본값 | 의미 |
+|---|---|---|
+| `href` | — | 이미지 URL. `xlink:href`는 레거시 |
+| `preserveAspectRatio` | `xMidYMid meet` | 서브영역에 맞추는 방식. **변위맵으로 쓸 땐 `none` 권장** |
+| `crossorigin` | — | CORS |
+
+Liquid Glass 같은 정밀한 굴절에서 **미리 계산된 변위맵**을 넣는 통로.
+
+**참조 방식별 지원 현황**
+
+| 방식 | Chromium | WebKit | Firefox |
+|---|---|---|---|
+| 외부 파일 `href="map.png"` | ✅ | 부분적 | ✅ |
+| 외부 SVG 파일 `href="map.svg"` | ✅ (래스터화) | ❌ 보고됨 | ✅ |
+| 같은 문서 fragment `href="#id"` | ❌ | ✅ | ❌ |
+| **data URI** `href="data:image/svg+xml;..."` | ✅ | ✅ | ✅ |
+
+> **함정 7**: fragment 참조는 Safari 전용, 외부 SVG는 Safari 미지원 — **크로스브라우저로는 data URI가 유일한 안전 경로다.** (검증됨: data URI로 SVG 변위맵 생성 → Chromium 정상)
+
+> **함정 8**: `feImage`는 `x/y/width/height`를 **명시하지 않으면 필터 영역에 맞춰진다.** `backdrop-filter`에서 쓸 때 요소 크기와 맵 크기가 어긋나면 굴절이 엉뚱한 위치에 생긴다. 픽셀 값으로 정확히 지정하라.
+
+> **함정 9**: data URI 안의 SVG는 **완전히 URL 인코딩**해야 한다. 최소한 `#` → `%23`, `<` → `%3C`, `>` → `%3E`, `"` → `'`. `#`을 인코딩 안 하면 fragment로 잘려서 조용히 실패한다.
+
+---
+
+### 1.4 `<feTile>` — 서브영역 타일링
+
+`in`의 **필터 서브영역**을 하나의 타일로 삼아, 자기 서브영역을 가득 채울 때까지 x/y로 반복한다.
+
+```xml
+<filter id="tiled" primitiveUnits="userSpaceOnUse"
+        x="0%" y="0%" width="100%" height="100%">
+  <!-- 40×40 영역만 노이즈 생성 = 타일 원본 -->
+  <feTurbulence type="turbulence" baseFrequency="0.12" numOctaves="2" seed="5"
+                x="0" y="0" width="40" height="40" result="tile"/>
+  <feTile in="tile" x="0" y="0" width="220" height="140"/>
+</filter>
+```
+> 검증됨 (Chromium). 작은 타일만 계산하고 복사하므로 **큰 면적 노이즈보다 훨씬 싸다** — 성능 최적화 기법으로도 유용.
+
+> **함정 10**: `feTile`은 `in`에 **서브영역이 명시되어 있어야** 동작한다. 앞 프리미티브에 `x/y/width/height`가 없으면 타일 크기가 필터 영역 전체가 되어 반복이 일어나지 않는다.
+
+---
+
+## 2. 기하/변형 프리미티브
+
+---
+
+### 2.1 `<feGaussianBlur>`
+
+| 속성 | 기본값 | 의미 |
+|---|---|---|
+| `stdDeviation` | `0` | 가우시안 표준편차. `x y` 2값 가능 |
+| `edgeMode` | `none` | `duplicate` \| `wrap` \| `none` |
+
+- `stdDeviation="0"` = 효과 없음(기본값이므로 반드시 지정).
+- **2값 = 방향성 블러**: `stdDeviation="15 0"` → 가로 모션 블러. 세로 결/속도감 표현에 필수.
+- 음수는 에러(필터 전체 무시).
+- CSS `blur(6px)` ≈ `feGaussianBlur stdDeviation="6"` (단, CSS는 sRGB).
+
+> **함정 11**: `edgeMode`는 **Safari에서만 지원**된다(Chrome·Firefox 미지원). `edgeMode="duplicate"`로 가장자리 하드컷을 만드는 트릭은 크로스브라우저 불가 — `feComposite operator="in"`으로 원본 알파에 다시 클리핑하는 방식으로 대체하라.
+
+> **함정 12**: 큰 블러(≈100px 이상)는 엔진이 상한을 걸거나 극단적으로 느려진다. 큰 소프트 글로우는 블러 대신 **radialGradient**로 흉내내는 것이 압도적으로 싸다.
+
+---
+
+### 2.2 `<feOffset>`
+
+| 속성 | 기본값 | 의미 |
+|---|---|---|
+| `dx`, `dy` | `0` | 이동량 (primitiveUnits 기준) |
+
+가장 싼 프리미티브. 그림자·색분리(RGB split)의 기본 부품.
+
+> **함정 13**: `feOffset`으로 민 결과는 필터 영역 밖으로 나가면 잘린다. `dx="20"`이면 영역도 그만큼 넓혀라.
+
+---
+
+### 2.3 `<feDropShadow>` — 단축 그림자
+
+| 속성 | 기본값 |
+|---|---|
+| `dx` | `2` |
+| `dy` | `2` |
+| `stdDeviation` | `2` |
+| `flood-color` | `black` |
+| `flood-opacity` | `1` |
+
+내부적으로 `feGaussianBlur + feOffset + feFlood + feComposite + feMerge`와 동등. 훨씬 짧고 최적화도 잘 된다.
+
+**체이닝으로 다중 글로우** (검증됨 — 네온 텍스트):
+
+```xml
+<filter id="neon" x="-40%" y="-40%" width="180%" height="180%"
+        color-interpolation-filters="sRGB">
+  <feDropShadow dx="0" dy="0" stdDeviation="2"  flood-color="#22d3ee" flood-opacity="1"   result="s1"/>
+  <feDropShadow in="s1" dx="0" dy="0" stdDeviation="6"  flood-color="#7c3aed" flood-opacity="0.9" result="s2"/>
+  <feDropShadow in="s2" dx="0" dy="0" stdDeviation="14" flood-color="#ec4899" flood-opacity="0.7"/>
+</filter>
+```
+
+> `feDropShadow`는 **결과에 원본을 포함**하므로 `feMerge`가 필요 없다. 체인으로 연결하면 그림자가 누적된다.
+
+---
+
+### 2.4 `<feMorphology>` — 팽창/침식
+
+| 속성 | 기본값 | 의미 |
+|---|---|---|
+| `operator` | `erode` | `erode`(축소/가늘게) \| `dilate`(팽창/굵게) |
+| `radius` | `0` | 반경. `x y` 2값 가능. 음수는 에러 |
+
+**핵심 용도**: 텍스트 아웃라인. `stroke`는 선이 글자 안쪽으로 반 들어가 글자를 얇게 만들지만, `feMorphology dilate`는 **바깥으로만 키운다.**
+
+```xml
+<!-- 컬러 아웃라인 (검증됨) -->
+<filter id="outline" x="-20%" y="-20%" width="140%" height="140%"
+        color-interpolation-filters="sRGB">
+  <feMorphology in="SourceAlpha" operator="dilate" radius="4" result="thick"/>
+  <feFlood flood-color="#22d3ee" result="col"/>
+  <feComposite in="col" in2="thick" operator="in" result="ring"/>
+  <feMerge>
+    <feMergeNode in="ring"/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+```
+
+```xml
+<!-- 속 빈(knockout) 아웃라인 (검증됨) -->
+<filter id="knockout" x="-25%" y="-25%" width="150%" height="150%"
+        color-interpolation-filters="sRGB">
+  <feMorphology in="SourceAlpha" operator="dilate" radius="3" result="thick"/>
+  <feComposite in="thick" in2="SourceAlpha" operator="out" result="ring"/>
+  <feFlood flood-color="#f472b6" result="col"/>
+  <feComposite in="col" in2="ring" operator="in"/>
+</filter>
+```
+
+> **함정 14**: `feMorphology`의 커널은 **사각형**이다. `radius`가 커지면 둥근 모서리가 각지게 뭉개진다. radius 8 이상은 결과를 반드시 눈으로 확인하라. 부드러운 확장이 필요하면 `feGaussianBlur` + `feComponentTransfer`(알파 대비)로 대체.
+
+> **함정 15**: `radius` 기본값이 `0`이라 지정 안 하면 아무 일도 안 일어난다.
+
+---
+
+### 2.5 `<feDisplacementMap>` — 변위 (유기적 디자인의 심장)
+
+| 속성 | 기본값 | 의미 |
+|---|---|---|
+| `in` | — | 왜곡될 이미지 |
+| `in2` | — | 변위맵 |
+| `scale` | `0` | 최대 이동량(px). 음수 가능(방향 반전) |
+| `xChannelSelector` | **`A`** | `R`\|`G`\|`B`\|`A` |
+| `yChannelSelector` | **`A`** | `R`\|`G`\|`B`\|`A` |
+
+**공식**
+
+```
+P'(x,y) ← P( x + scale × (XC(x,y) − 0.5),
+             y + scale × (YC(x,y) − 0.5) )
+```
+
+- 채널 값 **128(=0.5)** → 변위 0 (중립)
+- 0 → `−scale/2`px 이동, 255 → `+scale/2`px 이동
+- 즉 `scale`은 **총 이동 폭**이고 한쪽 방향 최대치는 `scale/2`
+
+> **함정 16 (가장 자주 틀림)**: `xChannelSelector`/`yChannelSelector`의 **기본값은 `A`(알파)**다. 지정하지 않으면 알파 채널로 왜곡한다. feTurbulence를 맵으로 쓸 때 알파도 노이즈라 "되긴 되는데 왜 이렇게 나오지?"가 된다. **항상 `R`/`G`를 명시하라.** (검증됨: 기본값과 R/G 명시의 결과가 눈에 띄게 다름)
+
+> **함정 17**: 변위 후에는 **안티에일리어싱이 깨진다.** 가장자리가 계단처럼 보이면 `feGaussianBlur stdDeviation="0.5"`를 뒤에 살짝 넣거나, 텍스트라면 `scale`을 6 이하로 낮춰라.
+
+> **함정 18**: 변위는 **필터 영역 안에서만** 일어난다. 영역 밖 픽셀은 존재하지 않으므로, 큰 `scale`은 가장자리를 투명하게 빨아들인다. `scale`의 절반 이상만큼 영역을 넓혀라.
+
+**두 가지 맵 만드는 법**
+
+```xml
+<!-- (a) 절차적: feTurbulence — 유기적, 손그림, 물결 -->
+<feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="4" seed="12" result="n"/>
+<feDisplacementMap in="SourceGraphic" in2="n" scale="9"
+                   xChannelSelector="R" yChannelSelector="G"/>
+```
+
+```xml
+<!-- (b) 결정론적: feImage + 그라디언트 — 렌즈, 굴절, 유리 -->
+<!-- R채널 = x변위, G채널 = y변위. 중립은 128. -->
+<feImage preserveAspectRatio="none" x="0" y="0" width="220" height="88" result="map"
+  href="data:image/svg+xml;charset=utf-8,%3Csvg .../%3E"/>
+<feDisplacementMap in="SourceGraphic" in2="map" scale="-60"
+                   xChannelSelector="R" yChannelSelector="G"/>
+```
+
+(b)의 맵 SVG 원문 (인코딩 전) — **가장자리에만 변위가 몰리는 렌즈 프로파일**:
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" width="220" height="88">
+  <defs>
+    <linearGradient id="rx" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0"    stop-color="rgb(0,0,0)"/>
+      <stop offset="0.28" stop-color="rgb(128,0,0)"/>
+      <stop offset="0.72" stop-color="rgb(128,0,0)"/>
+      <stop offset="1"    stop-color="rgb(255,0,0)"/>
+    </linearGradient>
+    <linearGradient id="gy" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0"    stop-color="rgb(0,0,0)"/>
+      <stop offset="0.28" stop-color="rgb(0,128,0)"/>
+      <stop offset="0.72" stop-color="rgb(0,128,0)"/>
+      <stop offset="1"    stop-color="rgb(0,255,0)"/>
+    </linearGradient>
+  </defs>
+  <rect width="220" height="88" rx="44" fill="rgb(128,128,128)"/>
+  <rect width="220" height="88" rx="44" fill="url(#rx)" style="mix-blend-mode:screen"/>
+  <rect width="220" height="88" rx="44" fill="url(#gy)" style="mix-blend-mode:screen"/>
+</svg>
+```
+> 검증됨: `mix-blend-mode: screen`이 `feImage`가 래스터화하는 SVG 내부에서 정상 동작한다. R채널만 있는 레이어와 G채널만 있는 레이어를 screen으로 합치면 채널이 서로 간섭 없이 합쳐진다(= 채널별 가산). 중앙 28~72% 구간을 128로 평평하게 두는 것이 "가장자리에서만 굴절"의 핵심.
+
+---
+
+### 2.6 `<feConvolveMatrix>` — 컨볼루션 커널
+
+| 속성 | 기본값 | 의미 |
+|---|---|---|
+| `order` | `3` | 커널 크기 (`3` = 3×3) |
+| `kernelMatrix` | — | `order²`개의 값 (필수) |
+| `divisor` | 커널 합(0이면 1) | 결과를 나눌 값 |
+| `bias` | `0` | 더할 상수 |
+| `targetX`/`targetY` | `floor(order/2)` | 커널 중심 위치 |
+| `edgeMode` | `duplicate` | `duplicate`\|`wrap`\|`none` |
+| `preserveAlpha` | `false` | true면 알파를 건드리지 않음 |
+
+```xml
+<!-- 샤픈: 변위 후 흐릿해진 엣지 복구 -->
+<feConvolveMatrix order="3" preserveAlpha="true"
+                  kernelMatrix="0 -1 0  -1 5 -1  0 -1 0"/>
+
+<!-- 엠보스 -->
+<feConvolveMatrix order="3" preserveAlpha="true" bias="0.5"
+                  kernelMatrix="-2 -1 0  -1 1 1  0 1 2"/>
+
+<!-- 엣지 검출(윤곽선 추출) -->
+<feConvolveMatrix order="3" preserveAlpha="true"
+                  kernelMatrix="0 1 0  1 -4 1  0 1 0"/>
+```
+
+> **함정 19**: `preserveAlpha="false"`(기본값)면 알파에도 커널이 적용되어 형태가 무너진다. 색만 만지고 싶으면 `true`로.
+> **함정 20**: 큰 `order`(5×5 이상)는 픽셀당 연산이 제곱으로 늘어 매우 비싸다. 실시간 애니메이션에는 쓰지 마라.
+
+---
+
+## 3. 색 조작 프리미티브
+
+---
+
+### 3.1 `<feColorMatrix>`
+
+| 속성 | 기본값 | 의미 |
+|---|---|---|
+| `type` | `matrix` | `matrix`\|`saturate`\|`hueRotate`\|`luminanceToAlpha` |
+| `values` | type별 항등 | `matrix`=20개 값, `saturate`=0~1(초과도 허용), `hueRotate`=각도 |
+
+**5×4 행렬 레이아웃** (열: R G B A 상수 / 행: R' G' B' A')
+
+```
+R' = r1·R + r2·G + r3·B + r4·A + r5
+G' = g1·R + g2·G + g3·B + g4·A + g5
+B' = b1·R + b2·G + b3·B + b4·A + b5
+A' = a1·R + a2·G + a3·B + a4·A + a5
+```
+
+모든 값은 **0~1 정규화 기준**이고 결과는 0~1로 clamp된다. 5번째 열은 **상수 오프셋**(1이 곱해짐).
+
+**항등 행렬** (변화 없음, 커스텀의 출발점):
+```
+1 0 0 0 0
+0 1 0 0 0
+0 0 1 0 0
+0 0 0 1 0
+```
+
+**자주 쓰는 행렬 사전**
+
+```xml
+<!-- 그레이스케일 (Rec.709 휘도) -->
+values="0.2126 0.7152 0.0722 0 0
+        0.2126 0.7152 0.0722 0 0
+        0.2126 0.7152 0.0722 0 0
+        0      0      0      1 0"
+
+<!-- 노이즈 → 불투명 그레이 (알파 노이즈 제거) -->
+values="0.33 0.33 0.33 0 0
+        0.33 0.33 0.33 0 0
+        0.33 0.33 0.33 0 0
+        0    0    0    0 1"
+
+<!-- 단색 실루엣 (#22d3ee = 34,211,238 → /255) -->
+values="0 0 0 0 0.133
+        0 0 0 0 0.827
+        0 0 0 0 0.933
+        0 0 0 1 0"
+
+<!-- 알파 대비 극대화 = gooey/threshold 핵심 -->
+values="1 0 0 0  0
+        0 1 0 0  0
+        0 0 1 0  0
+        0 0 0 18 -7"
+
+<!-- 채널 분리 (R만) -->
+values="1 0 0 0 0
+        0 0 0 0 0
+        0 0 0 0 0
+        0 0 0 1 0"
+
+<!-- 색 반전 -->
+values="-1  0  0 0 1
+         0 -1  0 0 1
+         0  0 -1 0 1
+         0  0  0 1 0"
+```
+
+**알파 대비 트릭의 수학** — `values="... 0 0 0 M -O"` 이면 `A' = M·A − O`:
+- 임계점: `A = O / M`
+- 전이 폭: `1 / M`
+- 예) `M=18, O=7` → 임계 0.389, 폭 0.056 → A가 0.389~0.444 사이에서 0→1로 급전환.
+- `M`을 키우면 더 날카롭게, `O/M`을 키우면 형태가 더 수축한다.
+
+**`type` 단축형**
+
+| type | values | 결과 |
+|---|---|---|
+| `saturate` | `0` | 흑백 |
+| `saturate` | `0.5` | 채도 절반 |
+| `saturate` | `3` | 과채도 (1 초과 허용) |
+| `hueRotate` | `180` | 색상환 180° 회전 |
+| `luminanceToAlpha` | (없음) | RGB→0, A=휘도 → **밝기를 마스크로 변환** |
+
+> **함정 21**: `luminanceToAlpha`는 결과의 RGB가 전부 0(검정)이다. 마스크로만 쓰고, 색이 필요하면 `feFlood`+`feComposite in`으로 다시 칠하라.
+
+> **함정 22**: 행렬 값은 **0~1 스케일**이다. `#ff8000`을 넣겠다고 `255 128 0`을 쓰면 전부 clamp되어 흰색이 된다. 반드시 255로 나눠라.
+
+> **함정 23**: `type="saturate"`의 결과는 색공간에 따라 극적으로 다르다(§0.5). 브랜드 흑백 톤을 맞추려면 `sRGB`를 명시하라.
+
+---
+
+### 3.2 `<feComponentTransfer>` + `<feFuncR/G/B/A>`
+
+채널별 **전달 함수**를 적용한다. 톤 커브 도구라고 생각하면 된다.
+
+| type | 파라미터 | 공식 |
+|---|---|---|
+| `identity` | — | `C' = C` |
+| `table` | `tableValues="v0 v1 ... vn"` | n개 값을 균등 구간으로 **선형 보간** |
+| `discrete` | `tableValues="v0 v1 ... vn"` | 균등 구간별 **계단 함수**(보간 없음) |
+| `linear` | `slope`(1), `intercept`(0) | `C' = slope·C + intercept` |
+| `gamma` | `amplitude`(1), `exponent`(1), `offset`(0) | `C' = amplitude·C^exponent + offset` |
+
+**table의 동작**: 값이 n개면 n−1개 구간이 만들어진다.
+- `tableValues="0 1"` → 항등(0→0, 1→1)
+- `tableValues="0.05 0.98"` → 그림자를 0.05로, 하이라이트를 0.98로 리매핑 → **듀오톤의 원리**
+- `tableValues="0 0.5 1"` → 3점 톤 커브
+
+**discrete의 동작**: `tableValues="0 0.25 0.5 0.75 1"` → 5단계 포스터화. (검증됨)
+
+**듀오톤 = 그레이스케일 + 채널별 2점 table** (검증됨)
+
+```xml
+<filter id="duotone" color-interpolation-filters="sRGB">
+  <feColorMatrix type="matrix" values="
+    0.2126 0.7152 0.0722 0 0
+    0.2126 0.7152 0.0722 0 0
+    0.2126 0.7152 0.0722 0 0
+    0      0      0      1 0"/>
+  <feComponentTransfer>
+    <!-- 그림자색 #0D1A59, 하이라이트색 #FA591A -->
+    <feFuncR type="table" tableValues="0.05 0.98"/>
+    <feFuncG type="table" tableValues="0.10 0.35"/>
+    <feFuncB type="table" tableValues="0.35 0.10"/>
+  </feComponentTransfer>
+</filter>
+```
+
+**hex → tableValues 변환 공식**
+```
+shadowColor #RRGGBB, highlightColor #RRGGBB
+feFuncR tableValues = "R_shadow/255  R_highlight/255"
+feFuncG tableValues = "G_shadow/255  G_highlight/255"
+feFuncB tableValues = "B_shadow/255  B_highlight/255"
+```
+3색(트라이톤)이면 값 3개, 4색이면 4개를 넣으면 된다.
+
+> **함정 24**: **`color-interpolation-filters="sRGB"`를 안 넣으면 듀오톤 색이 전부 어긋난다.** 이 프리미티브에서는 필수라고 봐도 된다.
+
+> **함정 25**: 같은 채널의 `feFunc*`를 여러 개 쓰면 **마지막 것만** 적용된다.
+
+> **함정 26**: 계산은 **비프리멀티플라이드(non-premultiplied)** 값으로 이뤄진다. 반투명 영역에서 색이 튀면 이 때문이다.
+
+---
+
+## 4. 합성 프리미티브
+
+---
+
+### 4.1 `<feBlend>`
+
+| 속성 | 기본값 |
+|---|---|
+| `mode` | `normal` |
+
+지원 모드 (CSS 블렌드 모드와 동일):
+`normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity`
+
+> `in`이 **위**, `in2`가 **아래** 레이어다. 포토샵 레이어 순서와 반대로 헷갈리기 쉽다.
+
+---
+
+### 4.2 `<feComposite>`
+
+| 속성 | 기본값 |
+|---|---|
+| `operator` | `over` |
+| `k1, k2, k3, k4` | `0` |
+
+**Porter-Duff 연산자**
+
+| operator | 결과 |
+|---|---|
+| `over` | `in`을 `in2` 위에 (기본) |
+| `in` | **`in2`의 알파로 `in`을 자른다** ← 마스킹의 핵심 |
+| `out` | `in2`가 없는 곳의 `in`만 남긴다 ← 속 빈 아웃라인 |
+| `atop` | `in2` 영역 안에서만 `in`을 얹는다 |
+| `xor` | 겹치지 않는 부분만 |
+| `lighter` | 가산 합성 |
+| `arithmetic` | 아래 공식 |
+
+**arithmetic 공식**
+```
+result = k1·i1·i2 + k2·i1 + k3·i2 + k4
+```
+
+| 목적 | k1 | k2 | k3 | k4 |
+|---|---|---|---|---|
+| 단순 덧셈 (조명 합성) | 0 | 1 | 1 | 0 |
+| 곱셈 (multiply) | 1 | 0 | 0 | 0 |
+| `in`만 통과 | 0 | 1 | 0 | 0 |
+| 50:50 블렌드 | 0 | 0.5 | 0.5 | 0 |
+| 노이즈 가산 (±0.25) | 0 | 1 | 0.5 | −0.25 |
+
+> **함정 27**: `arithmetic`은 **프리멀티플라이드 알파 값**에 대해 계산된다. 반투명 입력에서 예상 밖 결과가 나오면 `feFlood`+`in`으로 불투명화 후 처리하라. Firefox에는 `arithmetic` 관련 시각 아티팩트 버그 리포트도 있다.
+
+> **함정 28**: 조명 프리미티브 결과를 원본과 합칠 때는 관례적으로 `operator="arithmetic" k1=0 k2=1 k3=1 k4=0`(가산)을 쓴다. 그냥 `over`로 얹으면 조명이 원본을 덮어버린다.
+
+---
+
+### 4.3 `<feMerge>` / `<feMergeNode>`
+
+여러 레이어를 순서대로 `over` 합성한다. **뒤에 오는 `feMergeNode`가 위**에 쌓인다.
+
+```xml
+<feMerge>
+  <feMergeNode in="glow"/>        <!-- 맨 아래 -->
+  <feMergeNode in="ring"/>
+  <feMergeNode in="SourceGraphic"/> <!-- 맨 위 -->
+</feMerge>
+```
+
+> `feComposite operator="over"`를 여러 번 체인하는 것과 같지만 훨씬 읽기 쉽다.
+
+---
+
+## 5. 조명 프리미티브
+
+알파 채널을 **높이맵(범프맵)** 으로 해석해 3D 조명을 계산한다. `feTurbulence`와 조합하면 종이·가죽·금속 질감이 나온다.
+
+### 5.1 `<feDiffuseLighting>` (난반사 — 무광)
+
+| 속성 | 기본값 | 의미 |
+|---|---|---|
+| `surfaceScale` | `1` | 알파=1일 때의 표면 높이. 클수록 굴곡 심함 |
+| `diffuseConstant` | `1` | 반사 계수(kd). 0 이상 |
+| `lighting-color` | `white` | 광원 색. **CSS 프로퍼티 → 애니메이션 가능** |
+| `kernelUnitLength` | (없음) | 노멀 계산 샘플 간격. 대개 생략 |
+
+결과는 **불투명한 RGBA**다(알파=1). 그래서 반드시 원본 알파로 다시 잘라야 한다.
+
+### 5.2 `<feSpecularLighting>` (정반사 — 광택)
+
+| 속성 | 기본값 | 범위 |
+|---|---|---|
+| `surfaceScale` | `1` | — |
+| `specularConstant` | `1` | ks, 0 이상 |
+| `specularExponent` | `1` | **1 ~ 128**. 클수록 하이라이트가 작고 날카로움 |
+| `lighting-color` | `white` | — |
+
+결과는 **정반사 성분만 담긴 RGBA**로, 알파가 0이 아닌 영역이 하이라이트다. 원본에 **가산**해야 한다.
+
+### 5.3 광원 요소 (정확히 하나를 자식으로)
+
+```xml
+<feDistantLight azimuth="45" elevation="60"/>
+```
+| 속성 | 기본값 | 의미 |
+|---|---|---|
+| `azimuth` | `0` | xy평면 방향각 0~360° |
+| `elevation` | `0` | 고도각 0~90°. 낮을수록 그림자가 길고 대비 강함 |
+
+```xml
+<fePointLight x="60" y="20" z="120"/>
+```
+| 속성 | 기본값 |
+|---|---|
+| `x`, `y`, `z` | `0` |
+
+```xml
+<feSpotLight x="55" y="15" z="90"
+             pointsAtX="110" pointsAtY="80" pointsAtZ="0"
+             specularExponent="6" limitingConeAngle="42"/>
+```
+| 속성 | 기본값 | 의미 |
+|---|---|---|
+| `x/y/z` | `0` | 광원 위치 |
+| `pointsAtX/Y/Z` | `0` | 조준점 |
+| `specularExponent` | `1` | 중심부 집중도 |
+| `limitingConeAngle` | (없음=제한 없음) | 원뿔 반각(도). 넘으면 빛 없음 |
+
+### 5.4 검증된 조합 패턴
+
+```xml
+<!-- (A) 종이 질감: 노이즈를 높이맵으로 -->
+<filter id="paper" x="0%" y="0%" width="100%" height="100%">
+  <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" seed="3" result="noise"/>
+  <feDiffuseLighting in="noise" lighting-color="#e8e0d0" surfaceScale="2" result="lit">
+    <feDistantLight azimuth="45" elevation="60"/>
+  </feDiffuseLighting>
+  <feComposite in="lit" in2="SourceAlpha" operator="in"/>
+</filter>
+```
+
+```xml
+<!-- (B) 광택 버튼: 알파 블러를 범프맵으로 -->
+<filter id="specular" x="-20%" y="-20%" width="140%" height="140%"
+        color-interpolation-filters="sRGB">
+  <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="bump"/>
+  <feSpecularLighting in="bump" surfaceScale="6" specularConstant="1"
+                      specularExponent="25" lighting-color="#ffffff" result="spec">
+    <fePointLight x="60" y="20" z="120"/>
+  </feSpecularLighting>
+  <feComposite in="spec" in2="SourceAlpha" operator="in" result="specClip"/>
+  <feComposite in="SourceGraphic" in2="specClip" operator="arithmetic"
+               k1="0" k2="1" k3="1" k4="0"/>
+</filter>
+```
+
+```xml
+<!-- (C) 스포트라이트: 조명을 screen으로 얹기 -->
+<filter id="spot" x="-20%" y="-20%" width="140%" height="140%"
+        color-interpolation-filters="sRGB">
+  <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="bump"/>
+  <feDiffuseLighting in="bump" surfaceScale="5" diffuseConstant="1"
+                     lighting-color="#ffd88a" result="light">
+    <feSpotLight x="55" y="15" z="90" pointsAtX="110" pointsAtY="80" pointsAtZ="0"
+                 specularExponent="6" limitingConeAngle="42"/>
+  </feDiffuseLighting>
+  <feComposite in="light" in2="SourceAlpha" operator="in" result="lightClipped"/>
+  <feBlend in="SourceGraphic" in2="lightClipped" mode="screen"/>
+</filter>
+```
+
+> 검증됨: (A)(B)(C) 모두 Chromium에서 의도대로 렌더. (C)에서 `mode="multiply"`로 바꾸면 음영/비네트 룩이 된다.
+
+> **함정 29**: 조명 결과를 그냥 출력하면 **필터 영역 전체가 불투명 사각형**으로 칠해진다. `feComposite operator="in"` + `SourceAlpha` 클리핑을 잊지 마라.
+
+> **함정 30**: `surfaceScale`이 크면 (20~50) 스투코/구겨진 플라스틱 같은 과장된 질감이 된다. 종이 느낌은 1~3이 적당.
+
+> **함정 31**: `kernelUnitLength`는 엔진마다 해석이 달라 결과가 갈린다. 크로스브라우저가 중요하면 **쓰지 마라.**
+
+---
+
+## 6. CSS 단축 필터 ↔ 프리미티브 대응표
+
+| CSS 함수 | 등가 프리미티브 | 비고 |
+|---|---|---|
+| `blur(<len>)` | `feGaussianBlur stdDeviation="<len>"` | CSS는 sRGB |
+| `brightness(a)` | `feComponentTransfer` + `type="linear" slope="a"` | |
+| `contrast(a)` | `feComponentTransfer` + `type="linear" slope="a" intercept="-(0.5a)+0.5"` | |
+| `grayscale(a)` | `feColorMatrix type="matrix"` (휘도 행렬 보간) | |
+| `sepia(a)` | `feColorMatrix type="matrix"` | |
+| `saturate(a)` | `feColorMatrix type="saturate" values="a"` | |
+| `hue-rotate(deg)` | `feColorMatrix type="hueRotate" values="deg"` | |
+| `invert(a)` | `feComponentTransfer type="table" tableValues="a 1-a"` | |
+| `opacity(a)` | `feComponentTransfer feFuncA type="table" tableValues="0 a"` | |
+| `drop-shadow(...)` | `feDropShadow` | |
+
+**결정적 차이**: CSS 단축 함수는 스펙상 **sRGB에서 동작**하고, SVG `<filter>`는 **linearRGB가 기본**이다. 같은 결과를 원하면 `color-interpolation-filters="sRGB"`를 명시하라.
+
+**언제 CSS 단축을 쓰나**: 단순 blur/그림자/채도만 필요하면 CSS 단축이 **더 빠르고 더 잘 가속되며 Safari 호환성이 좋다.** SVG 필터는 CSS로 표현 불가능한 것(노이즈, 변위, 채널 분리, 알파 대비, 조명)에만 써라.
+
+---
+
+## 7. 애니메이션 가능성 매트릭스
+
+| 대상 | SMIL `<animate>` | CSS 애니메이션 | JS (`setAttribute`) |
+|---|---|---|---|
+| `baseFrequency`, `stdDeviation`, `scale`, `radius`, `dx/dy`, `k1~k4`, `values` | ✅ | ❌ (CSS 프로퍼티가 아님) | ✅ |
+| `flood-color`, `flood-opacity`, `lighting-color` | ✅ | ✅ **CSS 프로퍼티다** | ✅ |
+| `filter` 속성 자체 (`url(#a)` → `url(#b)`) | — | ❌ 보간 불가, 즉시 전환만 | — |
+| CSS 단축 필터 (`blur(2px)` → `blur(8px)`) | — | ✅ 보간됨 | — |
+| 필터 걸린 요소의 `transform`/`opacity` | — | ✅ (단, 필터 재계산 유발 가능) | — |
+
+**핵심**: `feTurbulence`의 `baseFrequency`를 CSS로 애니메이션하려는 시도는 **작동하지 않는다.** SMIL이나 JS를 써야 한다. 대신 `flood-color`/`lighting-color`는 CSS 트랜지션으로 부드럽게 다룰 수 있어, 호버 인터랙션에 매우 유용하다.
+
+```xml
+<!-- SMIL: baseFrequency 애니메이션 (검증됨) -->
+<feTurbulence type="turbulence" baseFrequency="0.008 0.04" numOctaves="2" seed="2" result="n">
+  <animate attributeName="baseFrequency" dur="8s"
+           values="0.008 0.04;0.012 0.055;0.008 0.04" repeatCount="indefinite"/>
+</feTurbulence>
+```
+
+```xml
+<!-- SMIL: flood-color 애니메이션 (검증됨) -->
+<feFlood flood-color="#22d3ee" result="col">
+  <animate attributeName="flood-color"
+           values="#22d3ee;#a855f7;#f43f5e;#22d3ee" dur="4s" repeatCount="indefinite"/>
+</feFlood>
+```
+
+```js
+// JS: seed 순환으로 squigglevision (SMIL보다 제어가 쉽다)
+const t = document.querySelector('#squiggle feTurbulence');
+let i = 0;
+const seeds = [1, 2, 3, 4];
+setInterval(() => { t.setAttribute('seed', seeds[i++ % seeds.length]); }, 120);
+```
+
+---
+
+## 8. 작성 전 체크리스트
+
+작성한 필터가 이상하면 위에서부터 확인하라.
+
+1. `id` 오타 / `url(#id)`의 `#` 누락
+2. `baseFrequency`, `stdDeviation`, `radius`, `scale` — **기본값이 0이라 지정 안 하면 무효과**
+3. `feDisplacementMap`의 `xChannelSelector`/`yChannelSelector` — **기본값 A**
+4. 필터 영역이 좁아 잘리는가 → `x/y/width/height` 확대
+5. 색이 이상한가 → `color-interpolation-filters="sRGB"`
+6. `feFlood`/조명 결과가 사각형으로 넘치는가 → `feComposite operator="in"` 누락
+7. 분기했는데 무시되는가 → `in`을 양쪽 다 명시했는가
+8. `feColorMatrix` 값을 0~255로 썼는가 → 0~1로
+9. 텍스트가 뭉개지는가 → 필터 컨테이너 안에 텍스트를 넣지 마라(§03)
+10. `feTurbulence` seed가 514/1977/2337/4777/8032/9615인가 → 사각 아티팩트
diff --git a/research/svg/02-recipes.md b/research/svg/02-recipes.md
new file mode 100644
index 0000000..0c948e7
--- /dev/null
+++ b/research/svg/02-recipes.md
@@ -0,0 +1,1670 @@
+# 02. SVG 필터 레시피북 — 바로 붙여넣는 완성 코드
+
+> 22개 레시피. 모든 코드는 **생략 없는 완성본**이며, 별도 표기가 없으면 **Chromium 151에서 실제 렌더링 검증 완료**다.
+> 성능 등급: **상**=스크롤/애니메이션 중에도 안전 · **중**=정적이면 안전, 애니메이션은 작은 면적만 · **하**=큰 면적·모바일·상시 애니메이션 금물
+
+**공통 전제**: 아래 컨테이너를 문서 어딘가(보통 `</body>` 직전)에 한 번 넣고, 각 레시피의 `<filter>`를 그 안에 모은다.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
+  <defs>
+    <!-- 여기에 filter들 -->
+  </defs>
+</svg>
+```
+
+---
+
+## 목차
+
+| # | 레시피 | 성능 | 핵심 프리미티브 |
+|---|---|---|---|
+| 01 | Gooey / Metaball | 중 | feGaussianBlur + feColorMatrix |
+| 02 | 필름 그레인 오버레이 (CSS만) | 상 | feTurbulence (data URI) |
+| 03 | 그레이니 그라디언트 | 상 | feTurbulence + CSS filter |
+| 04 | 종이 질감 | 중 | feTurbulence + feDiffuseLighting |
+| 05 | Liquid Glass (굴절 유리) | 중 | feImage + feDisplacementMap + backdrop-filter |
+| 06 | Liquid Glass + 색수차 | 하 | 3× feDisplacementMap |
+| 07 | 프로스티드 글래스 (폴백 겸용) | 상 | backdrop-filter + noise |
+| 08 | 크로마틱 애버레이션 / RGB Split | 중 | feOffset + feColorMatrix + feBlend |
+| 09 | 손그림 러프 엣지 | 중 | feTurbulence + feDisplacementMap |
+| 10 | 잉크 번짐 | 중 | 변위 + 블러 + 알파 대비 |
+| 11 | Squigglevision (애니메이션 손그림) | 하 | seed 순환 |
+| 12 | 물결 텍스트 | 하 | SMIL baseFrequency |
+| 13 | 듀오톤 / 그라디언트 맵 | 상 | feColorMatrix + feComponentTransfer |
+| 14 | 포스터화 / 트라이톤 | 상 | feComponentTransfer discrete |
+| 15 | 디더 / 임계값 | 중 | 노이즈 가산 + discrete |
+| 16 | 리소그래프 인쇄 | 중 | mix-blend-mode + grain + 오프셋 |
+| 17 | 텍스트 아웃라인 | 상 | feMorphology |
+| 18 | 스티커 | 상 | feMorphology + feDropShadow |
+| 19 | 네온 글로우 | 중 | 체인 feDropShadow |
+| 20 | 스포트라이트 | 중 | feSpotLight + feDiffuseLighting |
+| 21 | 광택/엠보스 | 중 | feSpecularLighting |
+| 22 | 글리치 밴드 | 하 | feFlood 밴드 + feDisplacementMap |
+
+---
+
+## 01. Gooey / Metaball
+
+**언제 쓰나** — 떠다니는 블롭 배경, 확장되는 FAB 메뉴, 로딩 인디케이터, 유기적 로고 모션. 개별 도형들이 **액체처럼 서로 융합**해야 할 때.
+
+**원리** — 블러로 알파를 번지게 한 뒤, `feColorMatrix`로 알파 대비를 극단적으로 올려 다시 날카로운 경계를 만든다. 두 도형의 번진 알파가 겹치는 지점에서 임계값을 넘으면 하나로 붙는다.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="goo" x="-25%" y="-25%" width="150%" height="150%"
+            color-interpolation-filters="sRGB">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="9" result="blur"/>
+      <feColorMatrix in="blur" type="matrix"
+        values="1 0 0 0  0
+                0 1 0 0  0
+                0 0 1 0  0
+                0 0 0 20 -9" result="goo"/>
+      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
+    </filter>
+  </defs>
+</svg>
+
+<div class="goo-menu">
+  <span></span><span></span><span></span>
+</div>
+```
+
+```css
+.goo-menu {
+  filter: url(#goo);
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  /* 필터 영역이 잘리지 않도록 여백 확보 */
+  padding: 24px;
+}
+.goo-menu span {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: #34d399;
+  display: block;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .goo-menu { filter: none; }
+}
+```
+
+**파라미터 가이드**
+
+| 값 | 효과 |
+|---|---|
+| `stdDeviation` 5 | 도형이 아주 가까워야 붙음. 미세한 융합 |
+| `stdDeviation` 9~12 | 표준. 목(neck)이 자연스럽게 늘어남 |
+| `stdDeviation` 20+ | 멀리서도 붙음. 형태가 뭉개짐 |
+| 알파 행렬 `M`(=20) ↑ | 경계가 더 날카로움. 12~30 권장 |
+| `O/M` (=9/20=0.45) ↑ | 형태가 더 수축. 0.35~0.5 권장 |
+
+**마무리 방식 선택**
+
+| 코드 | 결과 |
+|---|---|
+| `<feBlend in="SourceGraphic" in2="goo"/>` | 원본을 위에 얹음. 원본 색이 선명하게 살아남 |
+| `<feComposite in="SourceGraphic" in2="goo" operator="atop"/>` | goo 영역 안에서만 원본. **모서리가 뾰족한 도형일 때 필수** |
+| (마무리 없음) | goo만. 알파 대비 결과의 색이 그대로 나옴 |
+
+**함정**
+- **필터 컨테이너 안에 텍스트를 넣지 마라.** 텍스트가 블러+임계값을 거쳐 판독 불가능한 덩어리가 된다(검증됨). 텍스트는 필터 밖 별도 레이어에 절대배치로 얹어라.
+- 컨테이너에 여백이 없으면 블롭이 필터 영역 경계에서 잘린다.
+
+**성능: 중** — 정적이면 문제없음. 블롭이 움직이면 매 프레임 블러 재계산이라 면적이 크면 급격히 무거워진다. 400×400px 이하로 제한하고 `will-change: filter`는 **쓰지 마라**(§03 참고).
+
+---
+
+## 02. 필름 그레인 오버레이 (SVG 없이 CSS만으로)
+
+**언제 쓰나** — 어떤 배경에도 얹는 범용 텍스처. 밋밋한 그라디언트/단색을 아날로그하게 만든다. **가장 자주 쓰게 될 레시피.**
+
+**원리** — SVG를 data URI 배경 이미지로 넣으면 **한 번만 래스터화**되어 캐시된다. 요소에 `filter`를 거는 것과 달리 리페인트마다 재계산되지 않는다.
+
+```css
+.grainy {
+  position: relative;
+  isolation: isolate; /* 블렌드가 바깥으로 새지 않게 */
+  background: linear-gradient(135deg, #4f46e5, #ec4899);
+}
+
+.grainy::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0.55;
+  mix-blend-mode: overlay;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
+}
+```
+
+**파라미터 가이드**
+
+| 조절 | 방법 |
+|---|---|
+| 입자 크기 | data URI 안 `baseFrequency`: `0.6`(굵음) ~ `0.95`(미세) |
+| 거칠기 | `numOctaves`: 1(부드러움) ~ 4(거침) |
+| 강도 | CSS `opacity`: 0.15(은은) ~ 0.7(강함) |
+| 룩 | `mix-blend-mode`: `overlay`(대비 유지) · `soft-light`(부드러움) · `multiply`(어둡게) · `screen`(밝게) |
+
+**밝은 배경용 변형** — `overlay`는 밝은 배경에서 약하다. `multiply` + 낮은 opacity로 바꿔라.
+
+```css
+.grainy-light::after {
+  mix-blend-mode: multiply;
+  opacity: 0.25;
+}
+```
+
+**URL 인코딩 필수 문자**: `#`→`%23`, `<`→`%3C`, `>`→`%3E`, `%`→`%25`, 큰따옴표는 작은따옴표로.
+
+**성능: 상** — 정적 배경 이미지라 리페인트 비용이 사실상 0. **가장 안전한 노이즈 방법.**
+
+---
+
+## 03. 그레이니 그라디언트
+
+**언제 쓰나** — 그라디언트의 밴딩(계단 현상)을 감추면서 동시에 질감을 준다. 히어로 배경, 카드 표면.
+
+```css
+.grainy-gradient {
+  position: relative;
+  isolation: isolate;
+  background: radial-gradient(circle at 30% 20%, #7c3aed, transparent 60%),
+              radial-gradient(circle at 75% 70%, #06b6d4, transparent 55%),
+              #0f172a;
+}
+
+.grainy-gradient::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
+  filter: contrast(170%) brightness(1000%);
+  mix-blend-mode: overlay;
+  opacity: 0.18;
+}
+```
+
+**핵심**: `contrast(170%) brightness(1000%)`가 회색 뭉치를 흑백 점으로 극단화한다. 이 두 값이 그레인의 성격을 결정한다.
+
+| 목표 | 값 |
+|---|---|
+| 미세한 필름 그레인 | `contrast(120%) brightness(300%)`, opacity 0.12 |
+| 거친 인쇄 노이즈 | `contrast(300%) brightness(1500%)`, opacity 0.25 |
+| 스노우/TV 노이즈 | `contrast(500%) brightness(2000%)`, opacity 0.4 |
+
+> 검증됨. `opacity: 0.18`은 의도적으로 아주 은은하다 — 어두운 영역에서 밴딩이 사라지는 것으로 확인된다. 그레인이 "보이길" 원하면 0.3 이상으로 올려라.
+
+**성능: 상** — 배경 이미지 + CSS 단축 필터. GPU 가속이 잘 된다.
+
+---
+
+## 04. 종이 질감
+
+**언제 쓰나** — 에디토리얼 레이아웃, 인쇄물 느낌의 카드, 아날로그 브랜딩.
+
+**원리** — `feTurbulence`의 알파 노이즈를 **높이맵**으로 삼아 `feDiffuseLighting`으로 조명한다. 실제 종이 섬유의 미세한 요철을 시뮬레이션한다.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="paper" x="0%" y="0%" width="100%" height="100%">
+      <feTurbulence type="fractalNoise" baseFrequency="0.04"
+                    numOctaves="5" seed="3" result="noise"/>
+      <feDiffuseLighting in="noise" lighting-color="#e8e0d0"
+                         surfaceScale="2" result="lit">
+        <feDistantLight azimuth="45" elevation="60"/>
+      </feDiffuseLighting>
+      <feComposite in="lit" in2="SourceAlpha" operator="in"/>
+    </filter>
+  </defs>
+</svg>
+
+<div class="paper-card">
+  <div class="paper-surface"></div>
+  <div class="paper-content">
+    <h2>Editorial</h2>
+    <p>텍스트는 반드시 필터 밖 레이어에 둔다.</p>
+  </div>
+</div>
+```
+
+```css
+.paper-card { position: relative; width: 420px; aspect-ratio: 3/2; }
+.paper-surface {
+  position: absolute; inset: 0;
+  background: #e8e0d0;
+  border-radius: 6px;
+  filter: url(#paper);
+}
+.paper-content {
+  position: relative;   /* 필터 위에 겹침, 필터 영향 없음 */
+  padding: 32px;
+  color: #2b2b28;
+}
+```
+
+**파라미터 가이드**
+
+| 목표 | baseFrequency | numOctaves | surfaceScale | elevation |
+|---|---|---|---|---|
+| 매끈한 카드지 | 0.02 | 3 | 1 | 70 |
+| 표준 종이 | 0.04 | 5 | 2 | 60 |
+| 거친 수제지 | 0.06 | 5 | 3.5 | 45 |
+| 캔버스/천 | 0.08 0.02 | 4 | 3 | 50 |
+| 스투코 벽 | 0.05 | 4 | 20 | 40 |
+
+- `elevation`을 낮출수록 그림자가 길어져 **대비가 강해진다.**
+- `lighting-color`를 종이 색과 같게 맞추면 자연스럽다. 다르게 하면 조명 색이 입혀진다.
+- **`feComposite operator="in"`을 빼면 필터 영역 전체가 종이로 칠해진다.**
+
+**성능: 중** — `numOctaves="5"`는 무겁다. 정적 배경이면 문제없지만, 애니메이션은 금지. 반복 배경이라면 **한 번 만들어 PNG로 굽는 것**이 최선이다.
+
+---
+
+## 05. Liquid Glass (굴절 유리)
+
+**언제 쓰나** — iOS 26 스타일 유리 UI, 플로팅 툴바/독, 모달 헤더. 배경이 **실제로 굴절**되어야 할 때(단순 블러와 차원이 다르다).
+
+**원리** — `backdrop-filter: url(#id)`로 배경 픽셀을 필터에 통과시키고, 미리 만든 변위맵으로 가장자리에서만 굴절시킨다. **중앙은 중립(128), 가장자리는 극단값**인 맵이 렌즈 효과의 전부다.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="lens" x="0%" y="0%" width="100%" height="100%"
+            color-interpolation-filters="sRGB">
+      <feImage preserveAspectRatio="none" x="0" y="0" width="220" height="88" result="map"
+        href="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='88'%3E%3Cdefs%3E%3ClinearGradient id='rx' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='rgb(0,0,0)'/%3E%3Cstop offset='0.28' stop-color='rgb(128,0,0)'/%3E%3Cstop offset='0.72' stop-color='rgb(128,0,0)'/%3E%3Cstop offset='1' stop-color='rgb(255,0,0)'/%3E%3C/linearGradient%3E%3ClinearGradient id='gy' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgb(0,0,0)'/%3E%3Cstop offset='0.28' stop-color='rgb(0,128,0)'/%3E%3Cstop offset='0.72' stop-color='rgb(0,128,0)'/%3E%3Cstop offset='1' stop-color='rgb(0,255,0)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='220' height='88' rx='44' fill='rgb(128,128,128)'/%3E%3Crect width='220' height='88' rx='44' fill='url(%23rx)' style='mix-blend-mode:screen'/%3E%3Crect width='220' height='88' rx='44' fill='url(%23gy)' style='mix-blend-mode:screen'/%3E%3C/svg%3E"/>
+      <feDisplacementMap in="SourceGraphic" in2="map" scale="-60"
+                         xChannelSelector="R" yChannelSelector="G"/>
+    </filter>
+  </defs>
+</svg>
+
+<div class="glass-pill">Liquid Glass</div>
+```
+
+```css
+.glass-pill {
+  /* 맵 크기와 정확히 일치시켜야 한다 */
+  width: 220px;
+  height: 88px;
+  border-radius: 44px;
+
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+
+  backdrop-filter: url(#lens) brightness(1.06) saturate(1.25);
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  box-shadow:
+    inset 0 1px 1px rgba(255, 255, 255, 0.7),
+    inset 0 -1px 1px rgba(255, 255, 255, 0.3),
+    0 10px 30px rgba(0, 0, 0, 0.45);
+}
+
+/* Chromium 외 브라우저 폴백 */
+@supports not (backdrop-filter: url(#lens)) {
+  .glass-pill { backdrop-filter: blur(14px) saturate(1.4); }
+}
+```
+
+**변위맵 원문** (인코딩 전 — 크기를 바꿀 때 이걸 수정해 다시 인코딩)
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" width="220" height="88">
+  <defs>
+    <linearGradient id="rx" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0"    stop-color="rgb(0,0,0)"/>
+      <stop offset="0.28" stop-color="rgb(128,0,0)"/>
+      <stop offset="0.72" stop-color="rgb(128,0,0)"/>
+      <stop offset="1"    stop-color="rgb(255,0,0)"/>
+    </linearGradient>
+    <linearGradient id="gy" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0"    stop-color="rgb(0,0,0)"/>
+      <stop offset="0.28" stop-color="rgb(0,128,0)"/>
+      <stop offset="0.72" stop-color="rgb(0,128,0)"/>
+      <stop offset="1"    stop-color="rgb(0,255,0)"/>
+    </linearGradient>
+  </defs>
+  <rect width="220" height="88" rx="44" fill="rgb(128,128,128)"/>
+  <rect width="220" height="88" rx="44" fill="url(#rx)" style="mix-blend-mode:screen"/>
+  <rect width="220" height="88" rx="44" fill="url(#gy)" style="mix-blend-mode:screen"/>
+</svg>
+```
+
+**파라미터 가이드**
+
+| 조절 | 방법 |
+|---|---|
+| 굴절 강도 | `scale`: −30(약함) ~ −90(강함). **음수가 볼록 렌즈** |
+| 굴절 방향 반전 | `scale` 부호 뒤집기 (오목 렌즈) |
+| 굴절이 몰리는 폭 | 그라디언트 stop `0.28`/`0.72`를 `0.15`/`0.85`로 → 가장자리에 더 집중 |
+| 유리 두께감 | `box-shadow`의 `inset` 하이라이트 강도 |
+| 배경 밝기/채도 | `backdrop-filter`의 `brightness()` `saturate()` |
+
+**브라우저 지원**
+- `backdrop-filter: url(#id)`는 **Chromium 계열만 실제로 렌더**한다. Safari·Firefox는 미지원(Firefox에는 기능 요청이 올라와 있음).
+- ⚠️ `CSS.supports('backdrop-filter','url(#x)')`는 **값 파싱만** 검사하므로 신뢰할 수 없다(Chromium에서 true 확인, 다른 엔진도 true를 반환할 가능성이 높음). **폴백은 `@supports`가 아니라 "폴백이 그 자체로 괜찮게 보이도록" 설계하라** — 레시피 07을 기본으로 깔고 그 위에 렌즈를 얹는 방식.
+
+**함정**
+- `backdrop-filter`의 필터 영역은 요소 크기에 **자동으로 맞춰지지 않는다.** 맵의 `width/height`와 요소의 `width/height`가 어긋나면 굴절이 엉뚱한 곳에 생긴다. 크기가 다른 버튼마다 **별도의 맵**을 만들어라.
+- 반응형으로 크기가 계속 변하는 요소에는 부적합. 고정 크기 칩/독/툴바에 쓴다.
+
+**성능: 중** — `feImage`는 한 번 래스터화 후 캐시된다. `scale`만 애니메이션하면 맵 재생성이 없어 비교적 싸다. 반대로 요소 크기를 애니메이션하면 매 프레임 맵 재계산 → 매우 비쌈.
+
+---
+
+## 06. Liquid Glass + 색수차 (프리즘 유리)
+
+**언제 쓰나** — 프리미엄 히어로, 프로덕트 쇼케이스. 유리 가장자리에서 **빛이 무지개로 분산**되는 효과.
+
+**원리** — 같은 변위맵을 R/G/B 각각 **다른 `scale`** 로 3번 적용한 뒤 `screen`으로 합친다. 굴절률이 파장마다 다른 물리 현상을 흉내낸다.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="lensRGB" x="0%" y="0%" width="100%" height="100%"
+            color-interpolation-filters="sRGB">
+      <feImage preserveAspectRatio="none" x="0" y="0" width="200" height="96" result="map"
+        href="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='96'%3E%3Cdefs%3E%3ClinearGradient id='rx' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='rgb(0,0,0)'/%3E%3Cstop offset='0.3' stop-color='rgb(128,0,0)'/%3E%3Cstop offset='0.7' stop-color='rgb(128,0,0)'/%3E%3Cstop offset='1' stop-color='rgb(255,0,0)'/%3E%3C/linearGradient%3E%3ClinearGradient id='gy' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgb(0,0,0)'/%3E%3Cstop offset='0.3' stop-color='rgb(0,128,0)'/%3E%3Cstop offset='0.7' stop-color='rgb(0,128,0)'/%3E%3Cstop offset='1' stop-color='rgb(0,255,0)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='200' height='96' rx='48' fill='rgb(128,128,128)'/%3E%3Crect width='200' height='96' rx='48' fill='url(%23rx)' style='mix-blend-mode:screen'/%3E%3Crect width='200' height='96' rx='48' fill='url(%23gy)' style='mix-blend-mode:screen'/%3E%3C/svg%3E"/>
+
+      <feDisplacementMap in="SourceGraphic" in2="map" scale="-56"
+                         xChannelSelector="R" yChannelSelector="G" result="dR"/>
+      <feColorMatrix in="dR" type="matrix" result="cR"
+        values="1 0 0 0 0
+                0 0 0 0 0
+                0 0 0 0 0
+                0 0 0 1 0"/>
+
+      <feDisplacementMap in="SourceGraphic" in2="map" scale="-60"
+                         xChannelSelector="R" yChannelSelector="G" result="dG"/>
+      <feColorMatrix in="dG" type="matrix" result="cG"
+        values="0 0 0 0 0
+                0 1 0 0 0
+                0 0 0 0 0
+                0 0 0 1 0"/>
+
+      <feDisplacementMap in="SourceGraphic" in2="map" scale="-64"
+                         xChannelSelector="R" yChannelSelector="G" result="dB"/>
+      <feColorMatrix in="dB" type="matrix" result="cB"
+        values="0 0 0 0 0
+                0 0 0 0 0
+                0 0 1 0 0
+                0 0 0 1 0"/>
+
+      <feBlend in="cR" in2="cG" mode="screen" result="rg"/>
+      <feBlend in="rg" in2="cB" mode="screen"/>
+    </filter>
+  </defs>
+</svg>
+
+<div class="prism-pill"></div>
+```
+
+```css
+.prism-pill {
+  width: 200px;
+  height: 96px;
+  border-radius: 48px;
+  backdrop-filter: url(#lensRGB);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  box-shadow:
+    inset 0 1px 2px rgba(255, 255, 255, 0.6),
+    0 10px 24px rgba(0, 0, 0, 0.5);
+}
+
+@supports not (backdrop-filter: url(#lensRGB)) {
+  .prism-pill { backdrop-filter: blur(12px) saturate(1.6); }
+}
+```
+
+**파라미터 가이드** — 3개 `scale`의 **차이**가 색수차의 세기다.
+
+| scale 조합 | 결과 |
+|---|---|
+| `-58 / -60 / -62` | 아주 미묘한 프리즘. **프로덕션 권장** |
+| `-56 / -60 / -64` | 뚜렷한 무지개 테두리 |
+| `-50 / -60 / -70` | 과장된 사이키델릭 |
+
+> 검증됨. 단 `-56/-64/-72`처럼 차이를 크게 벌리면 배경이 줄무늬 무지개로 완전히 분해되니 주의.
+
+**성능: 하** — 변위 3회 + 색행렬 3회 + 블렌드 2회 = 프리미티브 8개. 페이지에 **1~2개만** 쓴다. 모바일에서는 레시피 05나 07로 폴백하라.
+
+---
+
+## 07. 프로스티드 글래스 + 노이즈 (범용 폴백)
+
+**언제 쓰나** — 모든 브라우저에서 동작해야 하는 유리 UI. **레시피 05/06의 기본 레이어로 항상 깔아둔다.**
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="frostNoise" x="0%" y="0%" width="100%" height="100%">
+      <feTurbulence type="fractalNoise" baseFrequency="0.9"
+                    numOctaves="3" stitchTiles="stitch" result="n"/>
+      <feColorMatrix in="n" type="saturate" values="0"/>
+    </filter>
+  </defs>
+</svg>
+
+<div class="frost">FROSTED</div>
+```
+
+```css
+.frost {
+  position: relative;
+  width: 230px;
+  height: 110px;
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: #fff;
+
+  backdrop-filter: blur(12px) saturate(1.4);
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+/* 유리 표면의 미세 결정감 */
+.frost::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background: #fff;
+  filter: url(#frostNoise);
+  mix-blend-mode: overlay;
+  opacity: 0.35;
+}
+```
+
+**파라미터 가이드**
+
+| 조절 | 값 |
+|---|---|
+| 흐림 정도 | `blur()` 6px(얇은 유리) ~ 24px(두꺼운 간유리) |
+| 유리 색조 | `background: rgba(...)` 알파 0.06~0.2 |
+| 표면 결정감 | `::after`의 `opacity` 0.15~0.5 |
+| 결정 크기 | `baseFrequency` 0.6~0.95 |
+
+**성능: 상** — `backdrop-filter: blur()`는 잘 가속된다. 노이즈 오버레이는 정적이므로 캐시된다. 단, `backdrop-filter` 자체가 배경 합성을 강제하므로 **화면 전체에 깔지는 마라.**
+
+---
+
+## 08. 크로마틱 애버레이션 / RGB Split
+
+**언제 쓰나** — 사이버펑크/글리치 타이포, 레트로 CRT, VHS 룩, 호버 시 순간 왜곡.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="chromatic" x="-20%" y="-20%" width="140%" height="140%"
+            color-interpolation-filters="sRGB">
+      <feOffset in="SourceGraphic" dx="-3" dy="0" result="rShift"/>
+      <feColorMatrix in="rShift" type="matrix" result="red"
+        values="1 0 0 0 0
+                0 0 0 0 0
+                0 0 0 0 0
+                0 0 0 1 0"/>
+
+      <feColorMatrix in="SourceGraphic" type="matrix" result="green"
+        values="0 0 0 0 0
+                0 1 0 0 0
+                0 0 0 0 0
+                0 0 0 1 0"/>
+
+      <feOffset in="SourceGraphic" dx="3" dy="0" result="bShift"/>
+      <feColorMatrix in="bShift" type="matrix" result="blue"
+        values="0 0 0 0 0
+                0 0 0 0 0
+                0 0 1 0 0
+                0 0 0 1 0"/>
+
+      <feBlend in="red" in2="green" mode="screen" result="rg"/>
+      <feBlend in="rg" in2="blue" mode="screen"/>
+    </filter>
+  </defs>
+</svg>
+
+<h1 class="chroma">GLITCH</h1>
+```
+
+```css
+.chroma {
+  font-size: 44px;
+  font-weight: 800;
+  color: #fff;             /* 흰색 소스여야 RGB 분리가 선명하다 */
+  filter: url(#chromatic);
+}
+```
+
+**렌즈 색수차 변형** (블러 포함, 사진에 적용)
+
+```xml
+<filter id="chromaticLens" x="-10%" y="-10%" width="120%" height="120%"
+        color-interpolation-filters="sRGB">
+  <feColorMatrix in="SourceGraphic" type="matrix"
+    values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0"/>
+  <feOffset dx="2" dy="0"/>
+  <feGaussianBlur stdDeviation="2" result="redChannel"/>
+
+  <feColorMatrix in="SourceGraphic" type="matrix"
+    values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0"/>
+  <feGaussianBlur stdDeviation="0.5" result="greenChannel"/>
+
+  <feColorMatrix in="SourceGraphic" type="matrix"
+    values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+  <feOffset dx="-2" dy="0"/>
+  <feGaussianBlur stdDeviation="2" result="blueChannel"/>
+
+  <feBlend in="redChannel" in2="greenChannel" mode="screen" result="redGreen"/>
+  <feBlend in="redGreen" in2="blueChannel" mode="screen"/>
+</filter>
+```
+
+**파라미터 가이드**
+
+| 조절 | 값 |
+|---|---|
+| 분리 강도 | `dx`: ±1(미묘) / ±3(표준) / ±8(강한 글리치) |
+| 수직 분리 | `dy`도 함께 주면 대각 분리 |
+| 초점 흐림 | 각 채널 `stdDeviation` — G는 낮게(0.5), R/B는 높게(2) 두면 렌즈 느낌 |
+
+**왜 `screen`인가** — R/G/B 각각을 분리하면 나머지 채널이 0(검정)이다. `screen`은 가산 합성이라 세 채널을 원래 색으로 되돌린다. `normal`이면 마지막 채널만 보인다.
+
+**함정** — **소스가 유채색이면 결과가 탁해진다.** 흰색/밝은 회색 텍스트에서 가장 잘 나온다.
+
+**성능: 중** — 프리미티브 7개지만 전부 가벼운 연산. 호버 트리거로 짧게 쓰는 것을 권장.
+
+---
+
+## 09. 손그림 러프 엣지
+
+**언제 쓰나** — 딱딱한 사각형/버튼을 손으로 그린 듯 만들기. 일러스트레이션 톤의 브랜드, 노트/스케치 UI.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="rough" x="-10%" y="-10%" width="120%" height="120%">
+      <feTurbulence type="fractalNoise" baseFrequency="0.03"
+                    numOctaves="4" seed="12" result="n"/>
+      <feDisplacementMap in="SourceGraphic" in2="n" scale="9"
+                         xChannelSelector="R" yChannelSelector="G"/>
+    </filter>
+  </defs>
+</svg>
+
+<div class="rough-card">Hand drawn</div>
+```
+
+```css
+.rough-card {
+  width: 220px;
+  height: 130px;
+  background: #f59e0b;
+  border-radius: 10px;
+  filter: url(#rough);
+}
+```
+
+**파라미터 가이드**
+
+| 목표 | baseFrequency | numOctaves | scale |
+|---|---|---|---|
+| 아주 미세한 손떨림 | 0.02 | 2 | 3 |
+| 표준 손그림 | 0.03 | 4 | 9 |
+| 거친 크레용 | 0.05 | 5 | 14 |
+| 찢어진 종이 | 0.08 | 3 | 20 |
+
+- **`seed`를 바꾸면 다른 "손"이 된다.** 여러 요소에 같은 필터를 쓰면 전부 똑같이 흔들려 부자연스럽다. seed만 다른 필터를 3~4개 만들어 돌려 쓰면 살아난다.
+
+```xml
+<filter id="rough1"><feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="4" seed="1" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="9" xChannelSelector="R" yChannelSelector="G"/></filter>
+<filter id="rough2"><feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="4" seed="7" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="9" xChannelSelector="R" yChannelSelector="G"/></filter>
+<filter id="rough3"><feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="4" seed="23" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="9" xChannelSelector="R" yChannelSelector="G"/></filter>
+```
+
+**텍스트에 적용할 때** — `scale`을 **4 이하**로. 그 이상은 판독성이 급격히 떨어진다.
+
+**성능: 중** — 정적이면 안전. seed/scale 애니메이션은 §11 참고.
+
+---
+
+## 10. 잉크 번짐 / 마커 필
+
+**언제 쓰나** — 스탬프, 마커 하이라이트, 리소/실크스크린 텍스트, 손글씨 느낌 강조.
+
+**원리** — 변위로 윤곽을 흐트러뜨리고 → 블러로 번지게 하고 → 알파 대비로 다시 단단한 경계를 만든다. 잉크가 종이에 스며든 뒤 마른 결과와 같은 순서다.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="inkbleed" x="-20%" y="-20%" width="140%" height="140%"
+            color-interpolation-filters="sRGB">
+      <feTurbulence type="fractalNoise" baseFrequency="0.05"
+                    numOctaves="4" seed="7" result="n"/>
+      <feDisplacementMap in="SourceGraphic" in2="n" scale="4"
+                         xChannelSelector="R" yChannelSelector="G" result="d"/>
+      <feGaussianBlur in="d" stdDeviation="1.2" result="b"/>
+      <feColorMatrix in="b" type="matrix"
+        values="1 0 0 0  0
+                0 1 0 0  0
+                0 0 1 0  0
+                0 0 0 14 -6"/>
+    </filter>
+  </defs>
+</svg>
+
+<span class="ink">INK</span>
+```
+
+```css
+.ink {
+  font-size: 40px;
+  font-weight: 800;
+  color: #fff;
+  filter: url(#inkbleed);
+}
+```
+
+**파라미터 가이드**
+
+| 조절 | 효과 |
+|---|---|
+| `scale` 2~6 | 윤곽의 불규칙함 |
+| `stdDeviation` 0.8~2.5 | 번짐 정도. 크면 글자가 뭉친다 |
+| 알파 행렬 `M`(14) | 크면 경계가 날카롭고 "마른 잉크", 작으면 "젖은 잉크" |
+| `O/M`(6/14≈0.43) | 크면 글자가 얇아지고, 작으면 두꺼워진다 |
+| `baseFrequency` 0.03~0.09 | 번짐 결의 크기 |
+
+**성능: 중** — 텍스트처럼 작은 면적에만.
+
+---
+
+## 11. Squigglevision (애니메이션 손그림)
+
+**언제 쓰나** — 애니메이션 일러스트, 놀이/교육 UI, 브랜드 마스코트. **저프레임 스톱모션 느낌**이 핵심이라 60fps로 돌리면 안 된다.
+
+**원리** — 3~4개의 서로 다른 `seed`를 **낮은 프레임레이트로 순환**시킨다. 매 프레임 새 노이즈를 만드는 게 아니라 몇 장의 "그림"을 번갈아 보여주는 것이라 훨씬 싸고, 룩도 더 정확하다.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="squiggle" x="-10%" y="-10%" width="120%" height="120%">
+      <feTurbulence id="squiggleNoise" type="fractalNoise"
+                    baseFrequency="0.02" numOctaves="3" seed="1" result="n"/>
+      <feDisplacementMap in="SourceGraphic" in2="n" scale="6"
+                         xChannelSelector="R" yChannelSelector="G"/>
+    </filter>
+  </defs>
+</svg>
+
+<div class="squiggle-art">
+  <svg viewBox="0 0 200 120" width="200">
+    <rect x="20" y="20" width="160" height="80" rx="8"
+          fill="none" stroke="#0ea5e9" stroke-width="4"/>
+    <path d="M40 90 L80 40 L120 80 L160 30" fill="none"
+          stroke="#f43f5e" stroke-width="4" stroke-linecap="round"/>
+  </svg>
+</div>
+```
+
+```css
+.squiggle-art { filter: url(#squiggle); }
+
+@media (prefers-reduced-motion: reduce) {
+  .squiggle-art { filter: none; }
+}
+```
+
+```js
+(function squigglevision() {
+  const noise = document.getElementById('squiggleNoise');
+  if (!noise) return;
+
+  // 접근성: 감소 모션을 켠 사용자는 애니메이션 없이 정지 상태 유지
+  const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+  if (mq.matches) return;
+
+  const seeds = [1, 2, 3, 4];
+  let i = 0;
+  let timer = null;
+
+  function tick() {
+    noise.setAttribute('seed', String(seeds[i++ % seeds.length]));
+  }
+
+  function start() {
+    if (timer === null) timer = setInterval(tick, 120); // ≈8fps
+  }
+  function stop() {
+    if (timer !== null) { clearInterval(timer); timer = null; }
+  }
+
+  // 탭이 백그라운드면 멈춘다 (배터리 보호)
+  document.addEventListener('visibilitychange', () => {
+    document.hidden ? stop() : start();
+  });
+
+  // 화면 밖이면 멈춘다
+  const target = document.querySelector('.squiggle-art');
+  if (target && 'IntersectionObserver' in window) {
+    new IntersectionObserver(entries => {
+      entries[0].isIntersecting ? start() : stop();
+    }, { threshold: 0 }).observe(target);
+  } else {
+    start();
+  }
+
+  mq.addEventListener('change', e => { e.matches ? stop() : start(); });
+})();
+```
+
+**파라미터 가이드**
+
+| 조절 | 값 |
+|---|---|
+| 프레임레이트 | `setInterval` 100~200ms. **80ms 미만은 노이즈 지글거림으로 보인다** |
+| 흔들림 크기 | `scale` 3(미묘) ~ 10(과장) |
+| 시드 개수 | 3~4개. 많을수록 불규칙하지만 반복 주기가 길어짐 |
+
+**성능: 하** — feTurbulence를 초당 8회 재생성한다. **반드시** IntersectionObserver + visibilitychange로 게이팅하고, 적용 면적을 300×300px 이하로 제한하라. 모바일에서는 아예 끄는 것을 권장(§03).
+
+---
+
+## 12. 물결 텍스트 (SMIL)
+
+**언제 쓰나** — 히어로 타이틀의 미묘한 액체 모션, 수중 테마, 열기 아지랑이.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="wave" x="-15%" y="-40%" width="130%" height="180%">
+      <feTurbulence type="turbulence" baseFrequency="0.008 0.04"
+                    numOctaves="2" seed="2" result="n">
+        <animate attributeName="baseFrequency" dur="8s"
+                 values="0.008 0.04;0.012 0.055;0.008 0.04"
+                 repeatCount="indefinite"/>
+      </feTurbulence>
+      <feDisplacementMap in="SourceGraphic" in2="n" scale="7"
+                         xChannelSelector="R" yChannelSelector="G"/>
+    </filter>
+  </defs>
+</svg>
+
+<h1 class="wave">LIQUID</h1>
+```
+
+```css
+.wave {
+  font-size: 40px;
+  font-weight: 800;
+  color: #facc15;
+  filter: url(#wave);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wave { filter: none; }
+}
+```
+
+**파라미터 가이드**
+
+| 조절 | 효과 |
+|---|---|
+| `baseFrequency="0.008 0.04"` | x는 크게, y는 촘촘 → **가로로 흐르는 물결**. 값을 뒤집으면 세로 물결 |
+| `scale` 4~8 | 텍스트 판독성 한계는 대략 8 |
+| `dur` 6~12s | 느릴수록 고급스럽다. 3s 이하는 어지럽다 |
+| `type="turbulence"` | 물결에 적합. `fractalNoise`는 더 부드럽고 뭉근함 |
+
+**대안: `scale`만 애니메이션** — `baseFrequency`를 바꾸면 매 프레임 노이즈를 새로 만든다. `scale`만 애니메이션하면 **노이즈는 캐시되고 변위만 바뀌어 훨씬 싸다.**
+
+```xml
+<filter id="waveCheap" x="-15%" y="-40%" width="130%" height="180%">
+  <feTurbulence type="turbulence" baseFrequency="0.01 0.05"
+                numOctaves="2" seed="2" result="n"/>
+  <feDisplacementMap in="SourceGraphic" in2="n" scale="0"
+                     xChannelSelector="R" yChannelSelector="G">
+    <animate attributeName="scale" dur="6s"
+             values="2;9;2" repeatCount="indefinite"/>
+  </feDisplacementMap>
+</filter>
+```
+> 룩은 "흐르는" 대신 "숨쉬는" 쪽에 가깝지만 비용이 크게 낮다. 대부분의 경우 이쪽으로 충분하다.
+
+**성능: 하** (`baseFrequency` 애니메이션) / **중** (`scale` 애니메이션)
+
+---
+
+## 13. 듀오톤 / 그라디언트 맵
+
+**언제 쓰나** — 브랜드 컬러로 사진 톤을 통일. 잡다한 스톡 이미지들을 한 화면에 놓아도 일관돼 보이게 만드는 가장 강력한 기법.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="duotone" color-interpolation-filters="sRGB">
+      <!-- 1) Rec.709 휘도로 그레이스케일 -->
+      <feColorMatrix type="matrix" values="
+        0.2126 0.7152 0.0722 0 0
+        0.2126 0.7152 0.0722 0 0
+        0.2126 0.7152 0.0722 0 0
+        0      0      0      1 0"/>
+      <!-- 2) 그림자 #0D1A59 → 하이라이트 #FA591A 로 리매핑 -->
+      <feComponentTransfer>
+        <feFuncR type="table" tableValues="0.05 0.98"/>
+        <feFuncG type="table" tableValues="0.10 0.35"/>
+        <feFuncB type="table" tableValues="0.35 0.10"/>
+      </feComponentTransfer>
+    </filter>
+  </defs>
+</svg>
+
+<img class="duo" src="photo.jpg" alt="설명">
+```
+
+```css
+.duo {
+  filter: url(#duotone);
+  width: 100%;
+  height: auto;
+}
+```
+
+**임의의 두 색으로 만드는 공식**
+
+```
+그림자색 #S_R S_G S_B, 하이라이트색 #H_R H_G H_B  (각 0~255)
+
+feFuncR tableValues = "S_R/255  H_R/255"
+feFuncG tableValues = "S_G/255  H_G/255"
+feFuncB tableValues = "S_B/255  H_B/255"
+```
+
+```js
+// 헬퍼: hex 2개 → 듀오톤 필터 문자열
+function duotoneFilter(id, shadowHex, highlightHex) {
+  const toRGB = h => {
+    const n = parseInt(h.replace('#', ''), 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  };
+  const s = toRGB(shadowHex);
+  const h = toRGB(highlightHex);
+  const f = i => `${(s[i] / 255).toFixed(4)} ${(h[i] / 255).toFixed(4)}`;
+  return `
+<filter id="${id}" color-interpolation-filters="sRGB">
+  <feColorMatrix type="matrix" values="
+    0.2126 0.7152 0.0722 0 0
+    0.2126 0.7152 0.0722 0 0
+    0.2126 0.7152 0.0722 0 0
+    0      0      0      1 0"/>
+  <feComponentTransfer>
+    <feFuncR type="table" tableValues="${f(0)}"/>
+    <feFuncG type="table" tableValues="${f(1)}"/>
+    <feFuncB type="table" tableValues="${f(2)}"/>
+  </feComponentTransfer>
+</filter>`;
+}
+// duotoneFilter('brandDuo', '#12103A', '#FF6B35')
+```
+
+**트라이톤** — `tableValues`에 값을 3개 넣는다 (그림자 / 중간톤 / 하이라이트).
+
+```xml
+<feComponentTransfer>
+  <feFuncR type="table" tableValues="0.05 0.55 0.98"/>
+  <feFuncG type="table" tableValues="0.10 0.20 0.35"/>
+  <feFuncB type="table" tableValues="0.35 0.45 0.10"/>
+</feComponentTransfer>
+```
+
+**함정**
+- **`color-interpolation-filters="sRGB"`가 없으면 색이 전부 어긋난다.** 이 레시피에서는 필수.
+- 원본 대비가 낮은 사진은 듀오톤에서 뭉개진다. 앞에 `feComponentTransfer type="linear" slope="1.3" intercept="-0.15"`로 대비를 올려주면 좋다.
+
+**성능: 상** — 픽셀당 단순 산술 2회. 이미지에 적용해도 부담 없다.
+
+---
+
+## 14. 포스터화 / 컬러 밴딩
+
+**언제 쓰나** — 스크린프린트, 레트로 게임, 벡터 일러스트 느낌. 그라디언트를 계단으로 만든다.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="posterize" color-interpolation-filters="sRGB">
+      <feComponentTransfer>
+        <feFuncR type="discrete" tableValues="0 0.25 0.5 0.75 1"/>
+        <feFuncG type="discrete" tableValues="0 0.25 0.5 0.75 1"/>
+        <feFuncB type="discrete" tableValues="0 0.25 0.5 0.75 1"/>
+      </feComponentTransfer>
+    </filter>
+  </defs>
+</svg>
+```
+
+```css
+.poster { filter: url(#posterize); }
+```
+
+**파라미터 가이드**
+
+| tableValues | 단계 수 | 룩 |
+|---|---|---|
+| `0 1` | 2 | 하드 임계값(흑백 스텐실) |
+| `0 0.5 1` | 3 | 강한 실크스크린 |
+| `0 0.25 0.5 0.75 1` | 5 | 표준 포스터화 |
+| `0 0.14 0.28 0.42 0.57 0.71 0.85 1` | 8 | 미묘한 밴딩 |
+
+**채널별로 다른 단계 수**를 주면 색이 이동하며 인쇄 오차 느낌이 난다:
+```xml
+<feFuncR type="discrete" tableValues="0 0.5 1"/>
+<feFuncG type="discrete" tableValues="0 0.33 0.66 1"/>
+<feFuncB type="discrete" tableValues="0 1"/>
+```
+
+**듀오톤과 결합** — 레시피 13의 그레이스케일 뒤에 `discrete`를 넣으면 **2색 스크린프린트**가 된다.
+
+**성능: 상**
+
+---
+
+## 15. 디더 / 임계값 (하프톤 대체)
+
+**언제 쓰나** — 1비트 룩, 레트로 맥/게임보이, 리소 하프톤 근사. 그라디언트를 점 패턴으로 분해한다.
+
+**원리** — 그레이 노이즈를 소스에 **가산**한 뒤 2단계 `discrete`로 자른다. 노이즈가 임계선 주변을 흩뜨려 점 패턴이 생긴다.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="dither" x="0%" y="0%" width="100%" height="100%"
+            color-interpolation-filters="sRGB">
+      <feTurbulence type="fractalNoise" baseFrequency="0.75"
+                    numOctaves="1" seed="9" result="n"/>
+      <!-- 노이즈를 불투명 그레이로 (알파 노이즈 제거) -->
+      <feColorMatrix in="n" type="matrix" result="gray"
+        values="0.33 0.33 0.33 0 0
+                0.33 0.33 0.33 0 0
+                0.33 0.33 0.33 0 0
+                0    0    0    0 1"/>
+      <!-- 소스 + (노이즈 × 0.5 − 0.25) -->
+      <feComposite in="SourceGraphic" in2="gray" operator="arithmetic"
+                   k1="0" k2="1" k3="0.5" k4="-0.25" result="mixed"/>
+      <feComponentTransfer in="mixed">
+        <feFuncR type="discrete" tableValues="0 1"/>
+        <feFuncG type="discrete" tableValues="0 1"/>
+        <feFuncB type="discrete" tableValues="0 1"/>
+      </feComponentTransfer>
+    </filter>
+  </defs>
+</svg>
+```
+
+```css
+.dither {
+  width: 220px;
+  height: 150px;
+  background: linear-gradient(90deg, #000, #fff);
+  filter: url(#dither);
+}
+```
+
+**파라미터 가이드**
+
+| 조절 | 효과 |
+|---|---|
+| `k3` (0.5) | 노이즈 진폭 = 디더 밴드의 **폭**. 0.3(좁음) ~ 0.8(넓음) |
+| `k4` (−0.25) | 항상 `−k3/2`로 두어 노이즈를 0 중심으로 만든다 |
+| `baseFrequency` 0.5~0.9 | 점 크기 |
+| `tableValues="0 0.5 1"` | 3단계 디더 |
+
+**색 디더** — 임계 후 `feColorMatrix`로 2색 매핑하면 리소 잉크 느낌이 난다.
+
+**성능: 중** — feTurbulence + 산술 합성. 정적이면 안전, 애니메이션은 피하라.
+
+---
+
+## 16. 리소그래프 인쇄
+
+**언제 쓰나** — 잡지/포스터 감성, 인디 브랜드, 제한 팔레트 아트디렉션.
+
+**리소의 3요소**: ① 제한된 스팟 컬러 ② `multiply`로 겹치는 잉크 ③ 판 어긋남(misregistration) + 종이 그레인.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="risoGrain" x="0%" y="0%" width="100%" height="100%"
+            color-interpolation-filters="sRGB">
+      <feTurbulence type="fractalNoise" baseFrequency="0.7"
+                    numOctaves="2" stitchTiles="stitch" seed="11" result="n"/>
+      <!-- RGB는 흰색 상수, 알파만 노이즈 → 흰 바탕에 랜덤 투명도 -->
+      <feColorMatrix in="n" type="matrix"
+        values="0   0   0   0 1
+                0   0   0   0 1
+                0   0   0   0 1
+                0.4 0.4 0.4 0 -0.1"/>
+    </filter>
+  </defs>
+</svg>
+
+<div class="riso">
+  <i class="ink-a"></i>
+  <i class="ink-b"></i>
+</div>
+```
+
+```css
+.riso {
+  --misreg-x: 2px;
+  --misreg-y: 1.5px;
+
+  position: relative;
+  width: 230px;
+  height: 160px;
+  background: #f2ece0;      /* 종이색 */
+  border-radius: 6px;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.riso i {
+  position: absolute;
+  display: block;
+  width: 110px;
+  height: 110px;
+  top: 25px;
+  border-radius: 50%;
+  mix-blend-mode: multiply;  /* 잉크가 겹치면 어두워진다 */
+}
+
+.riso .ink-a {
+  left: 20px;
+  background: #ff4f39;       /* Riso Fluorescent Pink 근사 */
+  transform: translate(calc(var(--misreg-x) * -1), calc(var(--misreg-y) * -1));
+}
+
+.riso .ink-b {
+  left: 90px;
+  background: #2f6bff;       /* Riso Blue 근사 */
+  transform: translate(var(--misreg-x), var(--misreg-y));
+}
+
+/* 종이 그레인 */
+.riso::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: #fff;
+  filter: url(#risoGrain);
+  mix-blend-mode: multiply;
+  opacity: 0.5;
+}
+```
+
+**파라미터 가이드**
+
+| 조절 | 값 |
+|---|---|
+| 판 어긋남 | `--misreg-x/y` 0.5~4px. 실제 리소는 최대 3mm까지 어긋난다 |
+| 잉크 팔레트 | 형광핑크 `#FF48B0`, 블루 `#0078BF`, 옐로 `#FFE800`, 그린 `#00A95C` |
+| 종이색 | `#F2ECE0`, `#EFE6D4`, `#FBF7F0` |
+| 그레인 강도 | `::after`의 `opacity` 0.25~0.6 |
+| 그레인 굵기 | `baseFrequency` 0.5(굵음) ~ 0.9(미세) |
+
+**함정** — `mix-blend-mode`가 부모 밖으로 새지 않도록 컨테이너에 **`isolation: isolate`**를 반드시 걸어라.
+
+**성능: 중** — 잉크 레이어는 순수 CSS라 가볍고, 그레인 필터가 유일한 비용이다. 그레인을 레시피 02(배경 data URI) 방식으로 바꾸면 **상**으로 올라간다.
+
+---
+
+## 17. 텍스트 아웃라인 (feMorphology)
+
+**언제 쓰나** — 스티커 타이포, 코믹/포스터, 배경 위 텍스트 가독성 확보. CSS `-webkit-text-stroke`와 달리 **글자 두께를 깎지 않는다.**
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <!-- (A) 컬러 아웃라인 -->
+    <filter id="outline" x="-20%" y="-20%" width="140%" height="140%"
+            color-interpolation-filters="sRGB">
+      <feMorphology in="SourceAlpha" operator="dilate" radius="4" result="thick"/>
+      <feFlood flood-color="#22d3ee" result="col"/>
+      <feComposite in="col" in2="thick" operator="in" result="ring"/>
+      <feMerge>
+        <feMergeNode in="ring"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- (B) 속 빈 아웃라인 -->
+    <filter id="knockout" x="-25%" y="-25%" width="150%" height="150%"
+            color-interpolation-filters="sRGB">
+      <feMorphology in="SourceAlpha" operator="dilate" radius="3" result="thick"/>
+      <feComposite in="thick" in2="SourceAlpha" operator="out" result="ring"/>
+      <feFlood flood-color="#f472b6" result="col"/>
+      <feComposite in="col" in2="ring" operator="in"/>
+    </filter>
+  </defs>
+</svg>
+
+<h1 class="outlined">OUTLINE</h1>
+<h1 class="hollow">HOLLOW</h1>
+```
+
+```css
+.outlined { font-size: 44px; font-weight: 900; color: #111; filter: url(#outline); }
+.hollow   { font-size: 52px; font-weight: 900; color: #f472b6; filter: url(#knockout); }
+```
+
+**파라미터 가이드**
+
+| 조절 | 값 |
+|---|---|
+| 선 두께 | `radius` 1~8. 8 초과는 모서리가 각지게 뭉개진다 |
+| 이중 아웃라인 | `feMorphology`를 두 번 체인 (radius 6 → 3), 색 두 개 |
+| 굵은 글씨 | `operator="dilate"`를 `SourceGraphic`에 걸면 원본 색 그대로 굵어진다 |
+
+**이중 아웃라인 전체 코드**
+
+```xml
+<filter id="doubleOutline" x="-30%" y="-30%" width="160%" height="160%"
+        color-interpolation-filters="sRGB">
+  <feMorphology in="SourceAlpha" operator="dilate" radius="8" result="outer"/>
+  <feFlood flood-color="#0f172a" result="outerCol"/>
+  <feComposite in="outerCol" in2="outer" operator="in" result="outerRing"/>
+
+  <feMorphology in="SourceAlpha" operator="dilate" radius="4" result="inner"/>
+  <feFlood flood-color="#fbbf24" result="innerCol"/>
+  <feComposite in="innerCol" in2="inner" operator="in" result="innerRing"/>
+
+  <feMerge>
+    <feMergeNode in="outerRing"/>
+    <feMergeNode in="innerRing"/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+```
+
+**성능: 상** — 텍스트는 선택·검색·스크린리더 접근이 그대로 유지된다.
+
+---
+
+## 18. 스티커
+
+**언제 쓰나** — 배지, 이모지 스타일 라벨, 컷아웃 요소. 흰 테두리 + 아래로 떨어지는 그림자.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="sticker" x="-30%" y="-30%" width="160%" height="160%"
+            color-interpolation-filters="sRGB">
+      <feMorphology in="SourceAlpha" operator="dilate" radius="8" result="outer"/>
+      <feFlood flood-color="#ffffff" result="white"/>
+      <feComposite in="white" in2="outer" operator="in" result="whiteRing"/>
+      <feDropShadow in="whiteRing" dx="0" dy="4" stdDeviation="4"
+                    flood-color="#000000" flood-opacity="0.35" result="shadowed"/>
+      <feMerge>
+        <feMergeNode in="shadowed"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+</svg>
+
+<span class="sticker">STICKER</span>
+```
+
+```css
+.sticker {
+  font-size: 44px;
+  font-weight: 900;
+  color: #111;
+  filter: url(#sticker);
+}
+```
+
+**파라미터 가이드**
+
+| 조절 | 값 |
+|---|---|
+| 테두리 두께 | `radius` 4(얇음) ~ 14(두꺼움) |
+| 떠 있는 높이 | `dy` 2~8, `stdDeviation` 2~8 |
+| 그림자 세기 | `flood-opacity` 0.2~0.5 |
+| 테두리 색 | `flood-color` — 흰색 대신 배경보다 밝은 색도 좋다 |
+
+**이미지에도 적용 가능** — 투명 PNG 컷아웃에 그대로 걸면 스티커가 된다.
+
+**성능: 상**
+
+---
+
+## 19. 네온 글로우
+
+**언제 쓰나** — 다크 UI의 강조, 사이버펑크, 라이브/온에어 표시.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="neon" x="-40%" y="-40%" width="180%" height="180%"
+            color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="0" stdDeviation="2"
+                    flood-color="#22d3ee" flood-opacity="1" result="s1"/>
+      <feDropShadow in="s1" dx="0" dy="0" stdDeviation="6"
+                    flood-color="#7c3aed" flood-opacity="0.9" result="s2"/>
+      <feDropShadow in="s2" dx="0" dy="0" stdDeviation="14"
+                    flood-color="#ec4899" flood-opacity="0.7"/>
+    </filter>
+  </defs>
+</svg>
+
+<h1 class="neon">NEON</h1>
+```
+
+```css
+.neon {
+  font-size: 40px;
+  font-weight: 900;
+  color: #fff;
+  filter: url(#neon);
+}
+```
+
+**애니메이션 글로우 링** — `flood-color`는 CSS/SMIL 애니메이션이 가능하다.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="pulseRing" x="-20%" y="-20%" width="140%" height="140%"
+            color-interpolation-filters="sRGB">
+      <feMorphology in="SourceAlpha" operator="dilate" radius="3" result="thick"/>
+      <feComposite in="thick" in2="SourceAlpha" operator="out" result="ring"/>
+      <feFlood flood-color="#22d3ee" result="col">
+        <animate attributeName="flood-color"
+                 values="#22d3ee;#a855f7;#f43f5e;#22d3ee"
+                 dur="4s" repeatCount="indefinite"/>
+      </feFlood>
+      <feComposite in="col" in2="ring" operator="in" result="glowRing"/>
+      <feGaussianBlur in="glowRing" stdDeviation="4" result="glow"/>
+      <feMerge>
+        <feMergeNode in="glow"/>
+        <feMergeNode in="glowRing"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+</svg>
+```
+
+```css
+.pulse-card {
+  width: 200px;
+  height: 130px;
+  background: #111827;
+  border-radius: 12px;
+  filter: url(#pulseRing);
+}
+@media (prefers-reduced-motion: reduce) {
+  .pulse-card { filter: none; box-shadow: 0 0 0 3px #22d3ee; }
+}
+```
+
+**성능: 중** — `stdDeviation="14"` 블러가 주 비용. 애니메이션은 `flood-color`만 바꾸므로(형태 재계산 없음) 비교적 저렴하다.
+
+---
+
+## 20. 스포트라이트
+
+**언제 쓰나** — 히어로 포커스, 카드 호버 강조, 어두운 씬의 연출.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <!-- (A) 빛을 더하는 방식 -->
+    <filter id="spotAdd" x="-20%" y="-20%" width="140%" height="140%"
+            color-interpolation-filters="sRGB">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="bump"/>
+      <feDiffuseLighting in="bump" surfaceScale="5" diffuseConstant="1"
+                         lighting-color="#ffd88a" result="light">
+        <feSpotLight id="spotSource"
+                     x="55" y="15" z="90"
+                     pointsAtX="110" pointsAtY="80" pointsAtZ="0"
+                     specularExponent="6" limitingConeAngle="42"/>
+      </feDiffuseLighting>
+      <feComposite in="light" in2="SourceAlpha" operator="in" result="lightClipped"/>
+      <feBlend in="SourceGraphic" in2="lightClipped" mode="screen"/>
+    </filter>
+
+    <!-- (B) 음영을 만드는 방식(비네트) -->
+    <filter id="spotShade" x="-20%" y="-20%" width="140%" height="140%"
+            color-interpolation-filters="sRGB">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="bump"/>
+      <feDiffuseLighting in="bump" surfaceScale="5" diffuseConstant="1.6"
+                         lighting-color="#ffffff" result="light">
+        <feSpotLight x="55" y="15" z="90"
+                     pointsAtX="110" pointsAtY="80" pointsAtZ="0"
+                     specularExponent="4" limitingConeAngle="55"/>
+      </feDiffuseLighting>
+      <feComposite in="light" in2="SourceAlpha" operator="in" result="lightClipped"/>
+      <feBlend in="SourceGraphic" in2="lightClipped" mode="multiply"/>
+    </filter>
+  </defs>
+</svg>
+
+<div class="spot-card">Focus</div>
+```
+
+```css
+.spot-card {
+  width: 220px;
+  height: 150px;
+  background: #334155;
+  border-radius: 14px;
+  filter: url(#spotAdd);
+}
+```
+
+**포인터 추적 스포트라이트**
+
+```js
+(function trackSpotlight() {
+  const card = document.querySelector('.spot-card');
+  const light = document.getElementById('spotSource');
+  if (!card || !light) return;
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+  let raf = null;
+  let pending = null;
+
+  function apply() {
+    raf = null;
+    if (!pending) return;
+    light.setAttribute('x', String(pending.x));
+    light.setAttribute('y', String(pending.y));
+    light.setAttribute('pointsAtX', String(pending.x));
+    light.setAttribute('pointsAtY', String(pending.y));
+    pending = null;
+  }
+
+  card.addEventListener('pointermove', e => {
+    const r = card.getBoundingClientRect();
+    pending = { x: Math.round(e.clientX - r.left), y: Math.round(e.clientY - r.top) };
+    if (raf === null) raf = requestAnimationFrame(apply);
+  });
+
+  card.addEventListener('pointerleave', () => {
+    pending = { x: 55, y: 15 };
+    if (raf === null) raf = requestAnimationFrame(apply);
+  });
+})();
+```
+> 검증됨: `setAttribute`로 `feSpotLight`의 `x/y/pointsAtX/pointsAtY`를 바꾸면 조명 위치가 즉시 갱신된다(광원을 좌상단→우하단으로 옮겨 빛 웅덩이가 따라 이동함을 확인). 포인터 이벤트 결선 자체는 표준 DOM API라 별도 위험이 없다.
+
+**파라미터 가이드**
+
+| 조절 | 효과 |
+|---|---|
+| `limitingConeAngle` 20(좁은 핀조명) ~ 70(넓은 조명) | 원뿔 반각 |
+| `specularExponent` 1(균일) ~ 20(중심 집중) | 감쇠 |
+| `z` 50(가까움/강함) ~ 200(멀음/균일) | 광원 거리 |
+| `lighting-color` | 조명 색 — CSS 애니메이션 가능 |
+| `mode="screen"` vs `"multiply"` | 밝히기 vs 어둡게(비네트) |
+
+**함정** — `feComposite operator="in"` + `SourceAlpha` 클리핑을 빼면 필터 영역 전체가 불투명 조명 사각형이 된다.
+
+**성능: 중** — 조명 연산은 픽셀당 노멀 계산이 들어가 블러보다 비싸다. 포인터 추적은 rAF로 throttle 필수.
+
+---
+
+## 21. 광택 / 엠보스
+
+**언제 쓰나** — 3D 느낌 버튼, 스큐어모픽 요소, 젤리/캔디 UI.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="glossy" x="-20%" y="-20%" width="140%" height="140%"
+            color-interpolation-filters="sRGB">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="bump"/>
+      <feSpecularLighting in="bump" surfaceScale="6" specularConstant="1"
+                          specularExponent="25" lighting-color="#ffffff" result="spec">
+        <fePointLight x="60" y="20" z="120"/>
+      </feSpecularLighting>
+      <feComposite in="spec" in2="SourceAlpha" operator="in" result="specClip"/>
+      <feComposite in="SourceGraphic" in2="specClip" operator="arithmetic"
+                   k1="0" k2="1" k3="1" k4="0"/>
+    </filter>
+  </defs>
+</svg>
+
+<button class="glossy-btn">Press</button>
+```
+
+```css
+.glossy-btn {
+  width: 200px;
+  height: 140px;
+  background: #3b82f6;
+  border: 0;
+  border-radius: 20px;
+  color: transparent;      /* 텍스트는 필터 밖 레이어에 두는 것을 권장 */
+  filter: url(#glossy);
+  cursor: pointer;
+}
+```
+
+**파라미터 가이드**
+
+| 조절 | 효과 |
+|---|---|
+| `stdDeviation`(범프 블러) 3~10 | 클수록 모서리가 둥근 3D |
+| `surfaceScale` 2~10 | 돌출 높이 |
+| `specularExponent` 5(넓은 광택) ~ 60(핀 하이라이트) | 광택 집중도 |
+| `fePointLight z` 60(가까움) ~ 250(멀음) | 하이라이트 크기 |
+| `specularConstant` 0.5~2 | 밝기 |
+
+**엠보스 변형** (`feConvolveMatrix` — 돌/콘크리트 각인 질감)
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="embossTexture" x="0%" y="0%" width="100%" height="100%"
+            color-interpolation-filters="sRGB">
+      <feTurbulence type="fractalNoise" baseFrequency="0.06"
+                    numOctaves="3" seed="4" result="n"/>
+      <!-- 노이즈를 불투명 그레이로 -->
+      <feColorMatrix in="n" type="matrix" result="g"
+        values="0.33 0.33 0.33 0 0
+                0.33 0.33 0.33 0 0
+                0.33 0.33 0.33 0 0
+                0    0    0    0 1"/>
+      <!-- 합이 0인 커널 + bias 0.5 = 중간 회색 기준 엠보스 -->
+      <feConvolveMatrix in="g" order="3" preserveAlpha="true" divisor="1" bias="0.5"
+                        kernelMatrix="-2 -1 0
+                                      -1  0 1
+                                       0  1 2" result="emb"/>
+      <feComposite in="emb" in2="SourceAlpha" operator="in"/>
+    </filter>
+  </defs>
+</svg>
+```
+
+```css
+.stone { width: 180px; height: 130px; background: #8b8b8b;
+         border-radius: 12px; filter: url(#embossTexture); }
+```
+
+> 검증됨. **커널의 합이 결과를 좌우한다**는 점을 기억하라.
+> - 합 = 1 (`-2 -1 0 / -1 1 1 / 0 1 2`), `bias="0"` → 원본 밝기를 유지하며 엣지만 강조. 부드러운 그라디언트에는 거의 변화가 없다.
+> - 합 = 0 (`-2 -1 0 / -1 0 1 / 0 1 2`), `bias="0.5"` → 엣지가 없는 곳은 **중간 회색**, 엣지에서만 밝고 어두워진다. **입력에 텍스처(노이즈)가 있어야 의미가 있다.**
+> - 밝은 소스에 합=1 커널 + `bias="0.5"`를 쓰면 값이 1을 넘어 **전체가 흰색으로 날아간다**(실제로 재현함).
+
+**샤픈** (변위 후 흐려진 엣지 복구용)
+```xml
+<feConvolveMatrix order="3" preserveAlpha="true"
+                  kernelMatrix="0 -1 0  -1 5 -1  0 -1 0"/>
+```
+
+**함정** — 필터를 건 요소 안의 텍스트도 조명 처리되어 뿌옇게 된다. 텍스트는 별도 레이어로 얹어라.
+
+**성능: 중**
+
+---
+
+## 22. 글리치 밴드
+
+**언제 쓰나** — 로딩 실패 상태, 사이버펑크 전환 효과, 에러 화면. **순간적으로만** 쓴다.
+
+**원리** — 대부분이 중립색(127,127)인 평면 위에, 얇은 가로 밴드만 다른 색으로 칠한 이미지를 변위맵으로 쓴다. 밴드가 지나가는 줄만 가로로 밀린다.
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <filter id="glitch" x="-10%" y="-10%" width="120%" height="120%"
+            primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <!-- 전체를 중립으로 채움: 변위 0 -->
+      <feFlood flood-color="rgb(127,127,127)" x="0" y="0" width="100%" height="100%"
+               result="neutral"/>
+
+      <!-- 밴드 1 -->
+      <feFlood flood-color="rgb(200,127,127)" x="0" y="0" width="100%" height="14"
+               result="band1">
+        <animate attributeName="y" dur="2.7s"
+                 values="0;40;12;90;30;120;0" repeatCount="indefinite"/>
+      </feFlood>
+
+      <!-- 밴드 2 -->
+      <feFlood flood-color="rgb(60,127,127)" x="0" y="0" width="100%" height="8"
+               result="band2">
+        <animate attributeName="y" dur="1.9s"
+                 values="120;20;100;55;10;80;120" repeatCount="indefinite"/>
+      </feFlood>
+
+      <feMerge result="map">
+        <feMergeNode in="neutral"/>
+        <feMergeNode in="band1"/>
+        <feMergeNode in="band2"/>
+      </feMerge>
+
+      <feDisplacementMap in="SourceGraphic" in2="map" scale="40"
+                         xChannelSelector="R" yChannelSelector="G"/>
+    </filter>
+  </defs>
+</svg>
+
+<div class="glitch-box">SYSTEM ERROR</div>
+```
+
+```css
+.glitch-box {
+  width: 260px;
+  height: 140px;
+  display: grid;
+  place-items: center;
+  background: #111;
+  color: #f43f5e;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  filter: url(#glitch);
+}
+@media (prefers-reduced-motion: reduce) {
+  .glitch-box { filter: none; }
+}
+```
+
+> 검증됨: 밴드가 지나가는 줄만 가로로 밀리는 글리치가 정상 렌더된다. 밴드가 안 보이면 `primitiveUnits="userSpaceOnUse"`가 빠졌는지, `height`가 % 단위로 잘못 들어갔는지 먼저 확인하라.
+
+**파라미터 가이드**
+
+| 조절 | 효과 |
+|---|---|
+| 밴드 색의 R값 | 127에서 멀수록 그 줄이 크게 밀린다 (0~255) |
+| `scale` | 전체 밀림 세기 (20~60) |
+| 밴드 `height` | 밀리는 줄의 두께 |
+| `dur` 값을 서로 소수로 | 반복 주기가 길어져 자연스러움 |
+
+**성능: 하** — SMIL이 매 프레임 맵을 재구성하고 변위를 다시 계산한다. **상시 재생 금지.** 상태 전환 시 0.5~2초만 켜라.
+
+---
+
+## 부록 A. 필터 조합 시 순서 원칙
+
+1. **소스 생성** (`feTurbulence`, `feFlood`, `feImage`) — 재료를 먼저 만든다
+2. **기하 변형** (`feDisplacementMap`, `feMorphology`, `feOffset`) — 형태를 바꾼다
+3. **블러** (`feGaussianBlur`) — 부드럽게 한다
+4. **색/알파 조작** (`feColorMatrix`, `feComponentTransfer`) — 대비·색을 잡는다
+5. **합성** (`feComposite`, `feBlend`, `feMerge`) — 원본과 합친다
+
+순서를 바꾸면 결과가 달라진다. 예: 블러 → 알파대비 = gooey(붙는다) / 알파대비 → 블러 = 그냥 흐린 도형.
+
+## 부록 B. 어디에 텍스트를 두는가
+
+필터를 거는 요소 **안**에 텍스트를 두면 텍스트도 필터를 통과한다. 대부분의 레시피에서 이건 버그다.
+
+```html
+<!-- ❌ 나쁨: 텍스트가 뭉개진다 -->
+<div class="gooey-card">텍스트</div>
+
+<!-- ✅ 좋음: 표면 레이어와 콘텐츠 레이어 분리 -->
+<div class="card">
+  <div class="card-surface"></div>  <!-- filter: url(#...) -->
+  <div class="card-content">텍스트</div>  <!-- 필터 없음 -->
+</div>
+```
+
+```css
+.card { position: relative; }
+.card-surface { position: absolute; inset: 0; filter: url(#effect); }
+.card-content { position: relative; }
+```
+
+예외: 레시피 08(색수차), 09(러프), 10(잉크), 12(물결), 17(아웃라인), 18(스티커), 19(네온)은 **텍스트에 거는 것이 목적**이다.
+
+## 부록 C. 레시피 선택 트리
+
+```
+질감을 더하고 싶다
+├─ 정적 배경 위 → 02. 필름 그레인 (성능 최우선)
+├─ 그라디언트 밴딩 제거 → 03. 그레이니 그라디언트
+└─ 물리적 요철 → 04. 종이 질감
+
+배경을 왜곡하고 싶다
+├─ 굴절이 꼭 필요 + Chromium 타겟 → 05 / 06
+└─ 크로스브라우저 필수 → 07. 프로스티드 글래스
+
+형태를 유기적으로 만들고 싶다
+├─ 도형이 서로 융합 → 01. Gooey
+├─ 손으로 그린 느낌 → 09 (정적) / 11 (애니메이션)
+└─ 액체처럼 흐름 → 12. 물결
+
+색을 통제하고 싶다
+├─ 브랜드 2색으로 통일 → 13. 듀오톤
+├─ 인쇄물 느낌 → 14 / 15 / 16
+└─ 색 분리 효과 → 08. 색수차
+
+빛을 다루고 싶다
+├─ 포커스 연출 → 20. 스포트라이트
+└─ 입체감 → 21. 광택/엠보스
+
+텍스트를 강조하고 싶다
+├─ 배경과 분리 → 17. 아웃라인
+├─ 컷아웃 느낌 → 18. 스티커
+└─ 발광 → 19. 네온
+```
diff --git a/research/svg/03-performance-and-pitfalls.md b/research/svg/03-performance-and-pitfalls.md
new file mode 100644
index 0000000..d555f43
--- /dev/null
+++ b/research/svg/03-performance-and-pitfalls.md
@@ -0,0 +1,493 @@
+# 03. 성능 · 브라우저 함정 · 폴백
+
+> "SVG 필터는 예쁘다"와 "SVG 필터를 프로덕션에 넣어도 된다"는 다른 문제다. 이 문서는 후자를 위한 것이다.
+
+---
+
+## 1. 비용 모델 — 무엇이 비싼가
+
+### 1.1 기본 공식
+
+```
+프레임당 비용 ≈ (필터 영역 픽셀 수) × (프리미티브 수 × 프리미티브별 픽셀당 연산) × (재계산 빈도)
+```
+
+세 항 모두가 곱해진다. 하나만 줄여도 효과가 크고, 셋 다 방치하면 폭발한다.
+
+### 1.2 프리미티브별 비용 등급
+
+| 등급 | 프리미티브 | 픽셀당 연산 | 비고 |
+|---|---|---|---|
+| **매우 저렴** | `feOffset`, `feFlood`, `feMerge`, `feTile` | 복사/상수 | 사실상 공짜 |
+| **저렴** | `feColorMatrix`, `feComponentTransfer`, `feBlend`, `feComposite` | 산술 수 회 | 마음껏 써도 됨 |
+| **보통** | `feGaussianBlur`, `feDropShadow` | 분리형 컨볼루션 (반경 비례) | 반경이 커지면 급증 |
+| **비쌈** | `feMorphology`, `feDisplacementMap` | 이웃 탐색 / 랜덤 액세스 | 캐시 미스 다발 |
+| **매우 비쌈** | `feTurbulence`, `feConvolveMatrix`, `feDiffuseLighting`, `feSpecularLighting` | Perlin 반복 / N×N 커널 / 노멀 계산 | **애니메이션 금지 후보** |
+
+`feTurbulence`는 별도로 언급할 가치가 있다. Firefox 버그 트래커에 "far too slow"로 15년 넘게 올라와 있고, 최신 노트북에서도 큰 면적에 걸면 CPU 코어를 즉시 포화시킨다는 보고가 있다. **`numOctaves`가 1 늘어날 때마다 노이즈 계산이 한 층씩 더 쌓인다.** 5 이상은 시각적 이득 대비 손해다.
+
+### 1.3 필터 영역이 곱해지는 방식
+
+`<filter>`의 `width`/`height`는 **처리할 픽셀 수를 직접 결정**한다.
+
+| 필터 영역 | 원본 대비 픽셀 수 |
+|---|---|
+| `100% × 100%` | 1.00× |
+| `120% × 120%` (기본값) | 1.44× |
+| `160% × 160%` | 2.56× |
+| `180% × 180%` | 3.24× |
+| `200% × 200%` | 4.00× |
+
+> 노이즈 오버레이처럼 영역 확장이 필요 없는 필터는 **반드시 `x="0%" y="0%" width="100%" height="100%"`** 로 줄여라. 그것만으로 30% 절약이다.
+
+### 1.4 재계산이 일어나는 시점
+
+필터 결과는 요소가 변하지 않는 한 캐시된다. 아래 상황에서 캐시가 무효화된다.
+
+| 상황 | 재계산 |
+|---|---|
+| 필터 어트리뷰트 변경 (`baseFrequency`, `scale`, `seed`, `stdDeviation`) | ✅ 전체 |
+| `flood-color` / `lighting-color` 변경 | ✅ 전체 (단, 형태 계산은 재사용 가능) |
+| 필터 걸린 요소의 **자식이 변함** (텍스트, 애니메이션) | ✅ 전체 |
+| 필터 걸린 요소의 **크기 변경** | ✅ 전체 |
+| 필터 걸린 요소의 `transform` / `opacity` 변경 | ⚠️ 엔진·상황에 따라 다름. 합성 레이어로 승격되면 재사용되지만, 그렇지 않으면 매 프레임 재계산 |
+| `backdrop-filter`에서 **배경이 스크롤/변화** | ✅ 매 프레임 |
+
+> **가장 흔한 성능 사고**: 필터 걸린 요소를 `transform`으로 움직이는 것. 브라우저가 캐시된 레이어를 합성하는 대신 매 프레임 필터 전체를 다시 돌릴 수 있다. **필터와 모션은 서로 다른 요소에 분리하라.**
+
+```html
+<!-- ❌ 같은 요소에 필터 + 모션 -->
+<div class="blob" style="filter:url(#goo); animation: move 3s infinite"></div>
+
+<!-- ✅ 바깥이 움직이고, 안쪽이 필터를 가진다 (혹은 그 반대) -->
+<div class="mover" style="animation: move 3s infinite">
+  <div class="blob" style="filter:url(#goo)"></div>
+</div>
+```
+
+### 1.5 `will-change: filter`를 쓰지 마라 (대부분의 경우)
+
+- `will-change: filter`는 요소를 별도 합성 레이어로 승격시키고 **메모리를 상시 점유**한다.
+- 필터 자체는 여전히 CPU/GPU에서 재계산된다 — 승격이 필터 연산을 없애주지 않는다.
+- 다수 요소에 걸면 레이어 폭발로 오히려 느려진다.
+- **예외**: 짧은 인터랙션 직전에 JS로 붙였다가 끝나면 제거하는 패턴은 유효하다.
+
+```js
+el.addEventListener('pointerenter', () => { el.style.willChange = 'filter'; });
+el.addEventListener('transitionend', () => { el.style.willChange = 'auto'; });
+```
+
+### 1.6 하드웨어 가속의 현실
+
+- 엔진별로 가속하는 필터가 다르다. Chrome이 가속하는 것, Firefox가 가속하는 것이 서로 다르고, 일부 안드로이드 GPU는 아무것도 가속하지 못한다.
+- `feTurbulence`는 하드웨어 가속에 친화적이지 않은 것으로 알려져 있다.
+- **Safari는 CSS 단축 필터(`blur()`, `drop-shadow()` 등)에서는 잘 동작하지만 SVG `<filter>`에서는 문제가 잦다.**
+- Firefox에는 "하드웨어 가속을 켜면 대부분의 CSS/SVG 필터가 동작하지 않는다"는 장기 미해결 버그가 보고되어 있다.
+
+**결론**: 가속을 전제로 설계하지 마라. **CPU에서 돌아도 부드러운 수준**으로 설계하고, 가속은 보너스로 취급하라.
+
+---
+
+## 2. CSS 필터 vs SVG 필터 — 선택 기준
+
+| 판단 | 선택 |
+|---|---|
+| blur / brightness / contrast / saturate / hue-rotate / drop-shadow 만 필요 | **CSS 단축 필터** — 더 빠르고, 더 잘 가속되고, Safari에서 안전하며, 값 보간 애니메이션이 가능 |
+| 노이즈, 변위, 채널 분리, 알파 임계, 조명, 커스텀 톤커브 | **SVG 필터** — 대안이 없다 |
+| 애니메이션이 필요한 값 | CSS 단축 필터는 **보간된다**. SVG 필터 어트리뷰트는 SMIL/JS만 가능 |
+
+**혼합 사용이 가능하다** — 무거운 SVG 필터는 정적으로 두고, 값이 변하는 부분만 CSS로 처리하는 것이 최적이다.
+
+```css
+.card {
+  /* SVG 필터는 고정, CSS 필터만 트랜지션 */
+  filter: url(#texture) brightness(1);
+  transition: filter 240ms ease;
+}
+.card:hover {
+  filter: url(#texture) brightness(1.15) saturate(1.2);
+}
+```
+> `filter` 목록에서 `url()`은 그대로 두고 뒤의 CSS 함수만 바뀌면 브라우저가 그 부분만 보간한다.
+
+**CSS 필터로 대체 가능한지 먼저 확인하라.**
+
+| SVG 필터 조합 | CSS 대체 |
+|---|---|
+| `feColorMatrix type="saturate" values="0"` | `filter: grayscale(1)` (sRGB로 동작) |
+| `feGaussianBlur` + `feOffset` + `feFlood` + `feMerge` | `filter: drop-shadow(x y blur color)` |
+| `feColorMatrix type="hueRotate"` | `filter: hue-rotate(deg)` |
+| 큰 소프트 글로우 | **`radialGradient` 또는 `box-shadow`가 압도적으로 싸다** |
+
+---
+
+## 3. `backdrop-filter` 함정
+
+### 3.1 지원 현황
+
+| 기능 | Chromium | Safari | Firefox |
+|---|---|---|---|
+| `backdrop-filter: blur()` 등 CSS 함수 | ✅ | ✅ (`-webkit-` 접두사 필요했던 시기 있음) | ✅ |
+| **`backdrop-filter: url(#svgFilter)`** | ✅ | ❌ | ❌ |
+
+`backdrop-filter`에 SVG 필터를 넣는 것은 **CSS 스펙에 없는 Chromium 확장**이다. Liquid Glass류 효과가 Chrome에서만 보이는 이유가 이것이다. Firefox에는 기능 요청이 접수되어 있고(2025), `mdn/browser-compat-data`에도 관련 이슈가 열려 있다.
+
+### 3.2 기능 감지가 신뢰할 수 없다 ⚠️
+
+```js
+CSS.supports('backdrop-filter', 'url(#x)')          // Chromium: true (검증됨)
+CSS.supports('backdrop-filter', 'url(#x) brightness(1.1)')  // Chromium: true (검증됨)
+```
+
+`CSS.supports`와 `@supports`는 **값을 파싱할 수 있는지**만 검사한다. Firefox/Safari도 `url()`을 유효한 `<filter-function>` 문법으로 파싱하므로 `true`를 반환할 가능성이 높다 — 그런데 렌더링은 하지 않는다.
+
+**권장 전략: 감지하지 말고, 계단식으로 쌓아라.**
+
+```css
+/* 1단계: 모든 브라우저에서 그럴듯한 기본값 */
+.glass {
+  backdrop-filter: blur(14px) saturate(1.4);
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 10px 30px rgba(0,0,0,.4);
+}
+
+/* 2단계: 굴절을 지원하면 덮어쓴다.
+   지원 안 하는 엔진에서는 이 선언이 무효 처리되어 1단계가 남는다. */
+@supports (backdrop-filter: url(#lens)) {
+  .glass { backdrop-filter: url(#lens) brightness(1.06) saturate(1.25); }
+}
+```
+> `@supports`가 통과해버리는 엔진에서는 `backdrop-filter`가 통째로 무시되어 유리 배경만 남는다. 그래서 **`background`와 `box-shadow`만으로도 유리처럼 보이게** 설계해두는 것이 핵심이다.
+
+**확실히 가르고 싶다면 렌더 프로브를 써라** (미검증 — 로직 참고용):
+
+```js
+async function supportsBackdropSVGFilter() {
+  if (!('CSS' in window) || !CSS.supports('backdrop-filter', 'blur(1px)')) return false;
+  // Chromium 계열만 확실히 지원한다는 사실에 기대는 실용적 판단
+  const ua = navigator.userAgent;
+  const isChromium = /Chrome|Chromium|Edg/.test(ua) && !/OPR|Firefox/.test(ua);
+  const isAppleWebKit = /Safari/.test(ua) && !/Chrome|Chromium|Edg/.test(ua);
+  return isChromium && !isAppleWebKit;
+}
+```
+> UA 스니핑은 최후의 수단이다. 실패 시 폴백이 충분히 좋다면 감지 자체를 하지 않는 편이 낫다.
+
+### 3.3 크기 불일치
+
+`backdrop-filter`의 필터 영역은 요소 크기에 **자동으로 맞춰지지 않는다.** `feImage` 변위맵의 `width/height`가 요소와 다르면 굴절이 어긋나거나 잘린다.
+
+- 크기별로 별도 맵을 만들어라.
+- 반응형으로 크기가 변하는 요소에는 이 기법을 쓰지 마라.
+- 크기 변경 애니메이션은 매 프레임 맵 재계산 = 최악의 시나리오.
+
+### 3.4 `backdrop-filter`는 배경 합성을 강제한다
+
+배경이 스크롤하거나 변하면 **매 프레임 배경을 다시 캡처해 필터를 돌린다.** 뷰포트 전체를 덮는 `backdrop-filter`는 스크롤 성능을 파괴한다. 작은 칩/툴바/모달 헤더에만 써라.
+
+---
+
+## 4. 좌표계·색공간 함정 (요약과 진단)
+
+§01에 상세히 있고, 여기서는 **증상 → 원인** 진단표로 정리한다.
+
+| 증상 | 원인 | 처방 |
+|---|---|---|
+| 효과가 사각형으로 잘림 | 필터 영역이 좁음 | `x/y/width/height` 확대 |
+| 색이 물빠진 듯 밝고 채도가 낮음 | linearRGB 기본값 | `color-interpolation-filters="sRGB"` |
+| 듀오톤 색이 지정한 hex와 다름 | 위와 동일 | 위와 동일 |
+| `stdDeviation="10"`인데 화면이 사라짐 | `primitiveUnits="objectBoundingBox"` | 값을 0~1 스케일로 다시 계산 |
+| 변위가 이상한 방향으로 감 | `xChannelSelector`/`yChannelSelector` 기본값이 `A` | `R`/`G` 명시 |
+| 색이 전부 흰색으로 날아감 | `feColorMatrix` 값에 0~255를 씀 | 255로 나눠 0~1로 |
+| 필터 영역 전체가 단색 사각형 | `feFlood`/조명 결과를 클리핑 안 함 | `feComposite operator="in"` + `SourceAlpha` |
+| 분기 배선이 무시됨 | `in`을 명시하지 않아 직전 출력이 들어감 | 양쪽 모두 `in` 명시 |
+| 노이즈가 컬러 스노우로 보임 | feTurbulence의 알파도 노이즈 | `feColorMatrix`로 A를 1 상수화 |
+| 노이즈에 격자 사각형이 보임 | `seed`가 514/1977/2337/4777/8032/9615 등 | seed 변경 |
+| 요소가 통째로 사라짐 | `url(#id)` 오타 (레거시 엔진) | ID 확인 |
+
+---
+
+## 5. CSS 레이아웃 부작용 (놓치기 쉬운 것)
+
+`filter`가 `none`이 아닌 값을 가지면 그 요소는:
+
+1. **새 스태킹 컨텍스트**를 만든다 → `z-index` 계층이 갇힌다.
+2. **`position: fixed` / `absolute` 자손의 컨테이닝 블록이 된다** → 하위의 `position: fixed` 모달이 뷰포트가 아니라 그 요소 기준으로 배치된다.
+
+`backdrop-filter`, `perspective`, `will-change: transform`, `contain: layout|paint|strict|content`, `content-visibility: auto`도 동일한 부작용을 갖는다.
+
+> 이 동작은 호환성 때문에 표준화된 것이다. 모바일 WebKit이 먼저 하고 Chrome 22에서 따라갔으며, 2015년 워킹그룹 결의를 거쳐 Firefox가 마지막으로 합류했다.
+
+**실무 영향**
+
+```html
+<!-- 카드에 질감 필터를 걸었더니, 카드 안의 드롭다운이 화면 밖으로 못 나간다 -->
+<div class="card" style="filter: url(#texture)">
+  <div class="dropdown" style="position: fixed">...</div>  <!-- 카드 기준으로 배치됨 -->
+</div>
+```
+
+**회피**
+- 필터를 콘텐츠 컨테이너가 아니라 **별도의 표면(surface) 레이어**에만 건다 (레시피 부록 B의 패턴).
+- 오버레이/모달은 Portal로 `<body>` 직속에 렌더한다.
+- DevTools는 "이 요소가 컨테이닝 블록을 만든다"를 시각적으로 표시해주지 않는다. 증상(모달 위치가 이상함)에서 역추적하는 수밖에 없다.
+
+---
+
+## 6. 브라우저별 알려진 이슈
+
+### 6.1 Safari / WebKit
+
+| 이슈 | 영향 |
+|---|---|
+| `backdrop-filter: url()` 미지원 | Liquid Glass 계열 전부 폴백 필요 |
+| `feImage`로 **외부 SVG 파일** 참조 미지원 | data URI로 우회 |
+| `feImage` **fragment 참조**(`href="#id"`)는 Safari **만** 지원 | 크로스브라우저에서는 쓸 수 없음 |
+| `feImage`가 체인에 있으면 **HTML 요소에 필터 적용 실패** 보고 | SVG 콘텐츠에만 적용하거나 폴백 |
+| 대형 요소에 필터를 걸면 고해상도에서 **아예 렌더되지 않는** 경우 보고 | 필터 적용 면적 제한 |
+| SVG `<filter>`보다 CSS 단축 필터가 훨씬 안정적 | 가능하면 CSS 단축 사용 |
+| `feGaussianBlur`의 `edgeMode`는 **Safari만 지원** | 크로스브라우저에서는 사용 불가 |
+
+### 6.2 Firefox
+
+| 이슈 | 영향 |
+|---|---|
+| `backdrop-filter: url()` 미지원 (기능 요청 계류 중) | 폴백 필요 |
+| `feTurbulence` 성능 이슈 장기 보고 | 큰 면적 금지 |
+| 하드웨어 가속 활성 시 필터 미동작 버그 보고 | 사용자 환경에 따라 효과가 안 보일 수 있음 |
+| `feComposite operator="arithmetic"` 시각 아티팩트 버그 보고 | 대안 연산자 고려 |
+| 블러 반경 상한(≈100px) | 큰 블러는 다른 방법으로 |
+| `feGaussianBlur edgeMode` 미지원 | — |
+
+### 6.3 모바일 전반
+
+- 큰 면적 필터 + 애니메이션 = **배터리 소모 + 열 스로틀링**. 스로틀링이 걸리면 페이지 전체가 느려진다.
+- 일부 안드로이드 GPU는 필터 가속을 전혀 못 한다.
+- 저가 기기에서 `feTurbulence` 애니메이션은 사실상 사용 불가.
+- GSAP 포럼 등에서 "데스크톱은 멀쩡한데 모바일에서 feTurbulence가 죽는다"는 사례가 반복 보고된다.
+
+### 6.4 feTurbulence seed 아티팩트
+
+특정 `seed` 값에서 노이즈에 **격자 사각형**이 생긴다. 보고된 값: `514, 1977, 2337, 4777, 8032, 9615` 등.
+
+- 원인은 SVG 스펙의 참조 구현에 있는 정수 나눗셈 버그다. gradient 테이블의 두 값이 모두 0이 되는 경우가 생긴다.
+- Chrome, Firefox, Batik, Inkscape 등 독립 구현들이 스펙을 그대로 따랐기 때문에 **모두 동일하게 재현**된다.
+- **처방**: seed는 무작위로 생성하지 말고, 1~50 정도의 작은 값 중 눈으로 확인한 것을 하드코딩하라.
+
+---
+
+## 7. 접근성
+
+### 7.1 `prefers-reduced-motion`
+
+애니메이션되는 필터는 전정계 장애가 있는 사용자에게 실제로 불편을 준다. **모든 애니메이션 필터에 감소 모션 처리를 넣어라.**
+
+```css
+/* 방법 1: 필터 자체를 끈다 */
+@media (prefers-reduced-motion: reduce) {
+  .wave, .squiggle-art, .glitch-box { filter: none; }
+}
+
+/* 방법 2: 정적 버전으로 대체 */
+@media (prefers-reduced-motion: reduce) {
+  .pulse-card { filter: none; box-shadow: 0 0 0 3px #22d3ee; }
+}
+```
+
+**SMIL은 CSS 미디어쿼리로 끌 수 없다.** JS로 처리해야 한다.
+
+```js
+const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+function applyMotionPreference() {
+  const svgRoot = document.querySelector('#filterDefs');
+  if (!svgRoot) return;
+  if (mq.matches) {
+    // SMIL 타임라인 정지
+    if (typeof svgRoot.pauseAnimations === 'function') svgRoot.pauseAnimations();
+  } else {
+    if (typeof svgRoot.unpauseAnimations === 'function') svgRoot.unpauseAnimations();
+  }
+}
+
+applyMotionPreference();
+mq.addEventListener('change', applyMotionPreference);
+```
+> **미검증**: `pauseAnimations()`/`unpauseAnimations()`는 `SVGSVGElement`의 표준 메서드지만 이 세션에서 실측하지 않았다. SMIL을 아예 쓰지 않고 JS 타이머로 어트리뷰트를 바꾸는 방식(레시피 11)이 제어가 확실하다.
+
+> ⚠️ SVG를 `<img>`나 CSS `background-image`로 넣으면 브라우저가 샌드박스 처리해 **내부의 `prefers-reduced-motion` 미디어쿼리가 평가되지 않는다.** 인라인 SVG를 쓰거나, 애니메이션을 바깥 CSS에서 제어하라.
+
+### 7.2 텍스트 가독성
+
+- 왜곡 필터를 텍스트에 걸면 **판독성이 떨어진다.** `feDisplacementMap scale`은 텍스트에서 4~8을 넘기지 마라.
+- 필터는 **DOM 텍스트를 그대로 유지**한다 — 선택·복사·검색·스크린리더 접근은 살아있다. 이것이 이미지로 굽는 것보다 나은 결정적 이유다.
+- 듀오톤/포스터화로 **대비가 낮아질 수 있다.** 텍스트 위에 적용한다면 WCAG 대비비를 실제 렌더 결과로 다시 측정하라.
+- 색수차(RGB split)는 난독증·시각 피로가 있는 사용자에게 특히 읽기 어렵다. 본문 텍스트에는 쓰지 마라.
+
+### 7.3 필터 정의 SVG의 접근성
+
+```html
+<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
+  <defs><filter id="...">...</filter></defs>
+</svg>
+```
+- `aria-hidden="true"`: 스크린리더가 빈 그래픽으로 읽지 않게.
+- `focusable="false"`: 구형 IE/Edge에서 탭 순서에 들어가지 않게.
+- `width="0" height="0"` + `position:absolute`: 레이아웃에 영향 없음.
+
+---
+
+## 8. 폴백 · 저사양 대응 전략
+
+### 8.1 계층적 설계 (권장)
+
+```
+Layer 0 — 필터 없이도 완성된 디자인 (색, 그림자, 그라디언트)
+Layer 1 — CSS 단축 필터로 얹는 개선 (blur, saturate, drop-shadow)
+Layer 2 — SVG 필터로 얹는 개선 (질감, 굴절, 색수차)
+```
+
+각 레이어가 없어도 아래 레이어가 완결되어야 한다. **필터를 지웠을 때 깨지는 디자인은 잘못 설계된 것이다.**
+
+### 8.2 저사양 기기 감지
+
+```js
+function shouldDisableHeavyFilters() {
+  // 1) 사용자 선호
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return true;
+
+  // 2) 하드웨어 힌트 (모든 브라우저가 제공하지는 않음)
+  const cores = navigator.hardwareConcurrency;      // Chromium/Firefox
+  const memory = navigator.deviceMemory;            // Chromium only, GB 단위
+  if (typeof cores === 'number' && cores <= 4) return true;
+  if (typeof memory === 'number' && memory <= 4) return true;
+
+  // 3) 네트워크 절약 모드 (Chromium)
+  const conn = navigator.connection;
+  if (conn && conn.saveData) return true;
+
+  // 4) 좁은 화면 = 대체로 모바일
+  if (window.matchMedia('(max-width: 640px)').matches) return true;
+
+  return false;
+}
+
+if (shouldDisableHeavyFilters()) {
+  document.documentElement.classList.add('reduce-effects');
+}
+```
+
+```css
+/* 무거운 필터를 값싼 대체물로 교체 */
+.reduce-effects .paper-surface { filter: none; background: #e8e0d0; }
+.reduce-effects .squiggle-art  { filter: none; }
+.reduce-effects .prism-pill    { backdrop-filter: blur(10px) saturate(1.4); }
+.reduce-effects .grainy::after { opacity: 0.25; }  /* 그레인은 싸니 약하게 유지 */
+```
+
+> `navigator.hardwareConcurrency`/`deviceMemory`는 Chromium에서 실측 확인했다(각각 24, 32 반환). Safari는 `deviceMemory`를 제공하지 않으므로 `typeof` 가드가 필수다.
+
+### 8.3 뷰포트 밖 / 백그라운드 탭에서 정지
+
+애니메이션 필터에는 필수다.
+
+```js
+function gateAnimation(targetEl, start, stop) {
+  let visible = false;
+  let focused = !document.hidden;
+
+  function sync() { (visible && focused) ? start() : stop(); }
+
+  if ('IntersectionObserver' in window) {
+    new IntersectionObserver(entries => {
+      visible = entries[0].isIntersecting;
+      sync();
+    }, { threshold: 0 }).observe(targetEl);
+  } else {
+    visible = true;
+  }
+
+  document.addEventListener('visibilitychange', () => {
+    focused = !document.hidden;
+    sync();
+  });
+
+  sync();
+}
+```
+
+### 8.4 "구워서 쓰기" — 가장 확실한 최적화
+
+정적 텍스처(종이 질감, 그레인 패턴, 리소 그레인)는 **한 번 렌더해서 PNG/WebP로 저장**하고 `background-image`로 쓰는 것이 압도적으로 싸다.
+
+- 필터 체인이 아무리 길어도 런타임 비용은 0이 된다.
+- 해상도 독립성을 잃지만, 노이즈/텍스처는 애초에 해상도 독립성이 필요 없다.
+- 512×512 타일을 만들어 `background-repeat`로 깔면 파일도 작다.
+- CSS-Tricks의 패턴 생성 글에서도 복잡한 필터 패턴은 "JPEG/PNG로 서빙해 사용자 CPU를 아끼라"고 권한다.
+
+**data URI vs 요소 필터** — 이미 §02 레시피 02/03에서 쓴 방식이다. `background-image: url("data:image/svg+xml,...")`는 **한 번만 래스터화되어 캐시**되므로, 같은 노이즈를 `filter: url(#noise)`로 거는 것보다 훨씬 싸다. **노이즈는 언제나 data URI 배경으로.**
+
+---
+
+## 9. 측정과 디버깅
+
+### 9.1 Chrome DevTools
+
+1. **Performance 패널** → 녹화 → "Rendering" 트랙에서 Paint/Composite 시간 확인. 필터가 문제면 Paint가 길어진다.
+2. **Rendering 탭** → "Paint flashing" 켜기 → 필터 영역이 매 프레임 초록색으로 깜빡이면 재계산 중이다.
+3. **Rendering 탭** → "Layer borders"로 합성 레이어 승격 여부 확인.
+4. **CPU throttling 4×/6×** 로 저사양 기기 시뮬레이션. 이것이 가장 현실적인 테스트다.
+
+### 9.2 A/B 비교 방법
+
+필터 하나가 얼마나 비싼지 알고 싶으면 DevTools 콘솔에서 껐다 켜본다.
+
+```js
+document.querySelectorAll('.effect').forEach(el => { el.style.filter = 'none'; });
+```
+FPS가 확 오르면 그 필터가 범인이다.
+
+### 9.3 오프라인 도구
+
+| 도구 | 용도 |
+|---|---|
+| [yoksel/svg-filters](https://yoksel.github.io/svg-filters/) | 필터 체인을 GUI로 만들고 코드 추출 |
+| [yoksel/svg-gradient-map](https://yoksel.github.io/svg-gradient-map/) | 듀오톤/트라이톤 `tableValues` 자동 생성 |
+| [fffuel nnnoise](https://www.fffuel.co/nnnoise/) | 노이즈 텍스처 SVG 생성 |
+
+---
+
+## 10. 프로덕션 체크리스트
+
+배포 전에 이 목록을 통과시켜라.
+
+**성능**
+- [ ] 필터 영역(`x/y/width/height`)이 필요한 최소 크기인가
+- [ ] `numOctaves`가 4를 넘지 않는가
+- [ ] 애니메이션되는 필터의 적용 면적이 400×400px 이하인가
+- [ ] 애니메이션 필터에 IntersectionObserver / visibilitychange 게이팅이 있는가
+- [ ] 필터와 `transform` 애니메이션이 같은 요소에 걸려 있지 않은가
+- [ ] `will-change: filter`를 남발하지 않았는가
+- [ ] 정적 텍스처를 런타임 필터로 매번 계산하고 있지 않은가 (→ data URI 배경 또는 PNG)
+- [ ] CPU throttling 4×에서 스크롤이 부드러운가
+
+**호환성**
+- [ ] `color-interpolation-filters`를 의도적으로 설정했는가
+- [ ] `feDisplacementMap`의 채널 셀렉터를 명시했는가
+- [ ] `feImage`를 쓴다면 data URI인가 (외부 파일/fragment 아님)
+- [ ] `backdrop-filter: url()`에 의존한다면 폴백만으로도 완성도가 있는가
+- [ ] `edgeMode`, `kernelUnitLength`, `BackgroundImage`, `FillPaint`를 쓰지 않았는가
+- [ ] `feTurbulence` seed가 알려진 문제 값이 아닌가
+- [ ] Safari / Firefox / 모바일 실기기에서 눈으로 확인했는가
+
+**접근성**
+- [ ] 애니메이션 필터에 `prefers-reduced-motion` 처리가 있는가
+- [ ] 필터 정의 SVG에 `aria-hidden="true"`가 있는가
+- [ ] 텍스트에 필터를 걸었다면 판독성과 대비비를 확인했는가
+- [ ] 필터가 전부 꺼져도 디자인이 성립하는가
+
+**레이아웃**
+- [ ] 필터를 건 요소 안에 `position: fixed` 자손이 없는가
+- [ ] 필터로 인한 스태킹 컨텍스트가 `z-index` 계층을 깨지 않는가
+- [ ] 필터 컨테이너 안에 본문 텍스트가 들어가 있지 않은가
diff --git a/research/svg/04-sources.md b/research/svg/04-sources.md
new file mode 100644
index 0000000..ac98708
--- /dev/null
+++ b/research/svg/04-sources.md
@@ -0,0 +1,239 @@
+# 04. 조사 소스 목록
+
+총 **183개**. `★` = 본문 전체를 직접 열람해 내용을 추출한 소스(21개), 그 외는 검색 결과 메타데이터·요약 수준에서 확인한 소스.
+
+---
+
+## A. 스펙 / 표준 문서
+
+1. ★ https://www.w3.org/TR/filter-effects-1/ — Filter Effects Module Level 1. 필터 영역·서브영역 정의, 입력 키워드 6종, feBlend 모드 목록, CSS 단축 함수↔프리미티브 대응의 1차 출처.
+2. ★ https://www.w3.org/TR/SVG11/filters.html — SVG 1.1 Filter Effects 챕터. 각 프리미티브의 초기값과 에러 처리 규칙의 원전.
+3. https://drafts.fxtf.org/filter-effects-1/ — FXTF 에디터 초안(최신 편집본). `/filter-effects/` 경로는 404이므로 `-1` 붙은 쪽을 써야 한다.
+4. https://www.w3.org/Graphics/SVG/1.1/filters.html — SVG 1.1 2003년판 필터 챕터. 서브영역 설명이 상세하다.
+5. https://www.w3.org/TR/SVGFilter12/ — SVG Filters 1.2 Part 2. 채택되지 않았지만 feTile·서브영역 설명이 명확하다.
+6. https://www.w3.org/TR/2000/CR-SVG-20000802/filters.html — SVG 1.0 CR. `lighting-color`가 애니메이터블임을 명시한 초기 문서.
+7. https://lists.w3.org/Archives/Public/public-fxtf-archive/2017Nov/0003.html — filter가 fixed/absolute 자손의 컨테이닝 블록을 만들어야 한다는 워킹그룹 논의.
+8. https://github.com/w3c/fxtf-drafts/issues/323 — FillPaint/StrokePaint의 올바른 동작이 무엇인지조차 합의되지 않았음을 보여주는 이슈. 실무에서 쓰면 안 되는 근거.
+9. https://github.com/w3c/svgwg/issues/1142 — "liquid glass" UI를 위한 상호운용 가능한 backdrop displacement/refraction 정의 요청. 현재 이 기능이 비표준임을 보여준다.
+10. https://github.com/w3c/csswg-drafts/issues/1273 — CSS에 turbulence/noise 이미지 함수를 넣자는 제안. 아직 SVG 필터가 유일한 절차적 노이즈 수단인 이유.
+11. https://lists.w3.org/Archives/Public/www-svg/2007Feb/0053.html — 필터 서브영역 해석에 대한 초기 논의.
+12. https://lists.w3.org/Archives/Public/www-style/2014Mar/0161.html — 필터 성능/구현에 관한 Adobe(Dirk Schulze)의 코멘트.
+13. https://lists.w3.org/Archives/Public/www-svg/2010Aug/0000.html — feTurbulence seed 구현 문제 관련 메일.
+
+## B. MDN 레퍼런스 (프리미티브별 정본)
+
+14. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter — `<filter>`의 x/y/width/height 기본값(-10%/-10%/120%/120%), filterUnits/primitiveUnits.
+15. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence — type/baseFrequency/numOctaves/seed/stitchTiles 전체 속성과 linearRGB 기본값.
+16. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix — 5×4 행렬 레이아웃, 항등 행렬, saturate/hueRotate/luminanceToAlpha 예제.
+17. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComponentTransfer — identity/table/discrete/linear/gamma 5종의 정확한 공식과 기본값.
+18. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDropShadow — dx=2/dy=2/stdDeviation=2 기본값, flood-color/flood-opacity.
+19. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feSpecularLighting — surfaceScale/specularConstant/specularExponent(1~128), 광원 3종 속성, feComposite arithmetic 합성 관례.
+20. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feGaussianBlur — stdDeviation의 number-optional-number, 큰 블러 시 필터 영역 확장 지침.
+21. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feImage — href/preserveAspectRatio/crossorigin, SVG 소스는 래스터화된다는 점.
+22. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feBlend — in/in2 의미와 CSS 블렌드 모드 지원.
+23. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feMorphology — erode/dilate 동작과 CSS 적용 예제.
+24. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap — 변위 공식 `P'(x,y) ← P(x + scale×(XC−0.5), y + scale×(YC−0.5))`.
+25. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting — 난반사 조명, surfaceScale/diffuseConstant.
+26. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters — 필터 기본값이 linearRGB이고 다른 색 연산은 sRGB라는 불일치의 정본.
+27. https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-filters — 같은 속성의 CSS 프로퍼티 버전.
+28. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode — edgeMode 값 3종(duplicate/wrap/none)과 기본값 none.
+29. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/flood-color — flood-color가 CSS 프로퍼티이자 애니메이터블임을 명시.
+30. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/flood-opacity — flood-opacity 기본값과 애니메이션 가능 여부.
+31. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/k3 — feComposite arithmetic의 k 계수 설명.
+32. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/k2 — 위와 같음.
+33. https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter — backdrop-filter 정의와 지원 현황.
+34. https://developer.mozilla.org/en-US/docs/Web/CSS/filter — CSS filter 프로퍼티, url() 참조 포함.
+35. https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur — CSS blur()가 stdDeviation과 어떻게 대응하는지.
+36. https://developer.mozilla.org/en-US/docs/Web/API/SVGFETurbulenceElement/seed — seed의 DOM 인터페이스, 절삭 규칙.
+37. https://developer.mozilla.org/en-US/docs/Web/API/SVGFETurbulenceElement/numOctaves — numOctaves DOM 속성.
+38. https://developer.mozilla.org/en-US/docs/Web/API/SVGFESpecularLightingElement/surfaceScale — surfaceScale DOM 속성.
+39. https://developer.mozilla.org/en-US/docs/Web/API/SVGFEConvolveMatrixElement/edgeMode — feConvolveMatrix의 edgeMode 기본값(duplicate).
+40. https://github.com/mdn/content/blob/main/files/en-us/web/svg/reference/element/feturbulence/index.md — MDN feTurbulence 문서 원본 마크다운.
+41. https://github.com/mdn/browser-compat-data/issues/24110 — backdrop-filter의 SVG 필터 지원이 Firefox/Safari에 없다는 호환성 데이터 이슈.
+42. https://github.com/mdn/browser-compat-data/issues/18810 — Safari의 feTurbulence 지원 데이터 정정 이슈.
+43. https://caniuse.com/?search=feTurbulence — feTurbulence 브라우저 지원표.
+
+## C. Sara Soueidan / Codrops SVG 필터 시리즈 (교과서)
+
+44. ★ https://tympanus.net/codrops/2019/01/15/svg-filters-101/ — 필터 영역 기본값, in/in2/result 배선, SourceGraphic/SourceAlpha, 드롭섀도 체인 예제. 입문의 정본.
+45. ★ https://tympanus.net/codrops/2019/01/22/svg-filter-effects-outline-text-with-femorphology/ — feMorphology 아웃라인/녹아웃 텍스트 전체 코드. stroke 대비 장점 설명.
+46. ★ https://tympanus.net/codrops/2019/02/05/svg-filter-effects-duotone-images-with-fecomponenttransfer/ — 듀오톤 완전 코드, hex→tableValues 변환, sRGB 명시 필요성.
+47. ★ https://tympanus.net/codrops/2019/02/19/svg-filter-effects-creating-texture-with-feturbulence/ — baseFrequency 실전 범위(0.02~0.2), numOctaves 한계, 종이 질감 feDiffuseLighting 코드.
+48. https://tympanus.net/codrops/2019/02/12/svg-filter-effects-conforming-text-to-surface-texture-with-fedisplacementmap/ — 텍스처 표면에 텍스트를 밀착시키는 변위맵 기법.
+49. https://tympanus.net/codrops/2019/02/26/svg-filter-effects-moving-forward/ — 시리즈 마무리. 추가 리소스·실험 모음.
+50. https://www.sarasoueidan.com/blog/svg-filters-series/ — 시리즈 전체 인덱스.
+51. https://tympanus.net/codrops/author/sarasoueidan/ — 저자 아카이브.
+52. https://www.youtube.com/watch?v=kfOhlU_iRVU — "SVG Filters: The Crash Course" (An Event Apart). 영상 강의판.
+53. https://hookedoncode.com/2019/07/svg-filters-a-crash-course-by-sara-soueidan/ — 위 강연 요약 노트.
+54. https://tympanus.net/codrops/2015/03/10/creative-gooey-effects/ — Gooey 효과의 고전 아티클. blur+alpha contrast 원리.
+55. https://sudonull.com/post/717-Effects-of-SVG-filters-Part-2-Outline-text-with-feMorphology — 위 45번의 러시아어 번역판.
+56. https://webdesigntips.blog/more-website-design-news/svg-filter-effects-duotone-images-with-fecomponenttransfer/ — 46번의 미러.
+57. https://emptyq.net/a?ID=fe324b95-2175-46c0-9a09-31e5a0c748e1 — 45번의 미러.
+
+## D. CSS-Tricks / Smashing / Frontend Masters
+
+58. ★ https://css-tricks.com/gooey-effect/ — Gooey 필터 정본 코드. `values="... 18 -7"`의 의미, feBlend vs feComposite atop 선택, Safari 주의.
+59. ★ https://css-tricks.com/grainy-gradients/ — 노이즈 SVG를 배경으로 깔고 contrast/brightness로 극단화하는 기법.
+60. ★ https://css-tricks.com/creating-patterns-with-svg-filters/ — feTurbulence + discrete/table로 별하늘·나무결·달마시안·위장무늬 패턴 생성. "복잡한 패턴은 이미지로 구워 쓰라"는 성능 권고.
+61. https://css-tricks.com/using-svg-to-create-a-duotone-image-effect/ — feColorMatrix 기반 듀오톤(대안 접근).
+62. https://css-tricks.com/almanac/properties/f/filter/ — CSS filter 프로퍼티 알마낙.
+63. https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/ — prefers-reduced-motion 사용법.
+64. ★ https://www.smashingmagazine.com/2021/09/deep-dive-wonderful-world-svg-displacement-filtering/ — 변위 필터 심층 해설. 절대 변위맵 만들기, feImage 참조 방식별 브라우저 지원표, SMIL/anime.js 애니메이션, WebKit 제약. **가장 정보 밀도가 높은 단일 소스.**
+65. https://www.smashingmagazine.com/2022/05/magical-svg-techniques/ — SVG 전반 기법 모음(Amelia Wattenberger의 "telescope" 비유 인용).
+66. https://www.smashingmagazine.com/2026/01/unstacking-css-stacking-contexts/ — filter/backdrop-filter가 스태킹 컨텍스트와 컨테이닝 블록을 만드는 문제 정리.
+67. https://frontendmasters.com/blog/grainy-gradients/ — 그레이니 그라디언트 후속 정리.
+68. https://frontendmasters.com/blog/non-square-image-blur-extensions/ — feGaussianBlur edgeMode의 브라우저 지원(Safari 전용) 실측.
+
+## E. Liquid Glass / 굴절 유리
+
+69. ★ https://kube.io/blog/liquid-glass-css-svg/ — Snell 법칙 기반 변위맵 생성의 수학적 근거. R=x/G=y 인코딩(중립 128), scale 매핑, `color-interpolation-filters="sRGB"` 필수 이유, Chromium 전용 제약.
+70. ★ https://blog.logrocket.com/how-create-liquid-glass-effects-css-and-svg/ — feImage 변위맵 + specular 레이어 + backdrop-filter의 완전한 React 구현. 크기별 맵을 따로 만들라는 실무 제약.
+71. https://github.com/nikdelvin/liquid-glass — CSS+SVG만으로 iOS 26 Liquid Glass를 재현한 컴포넌트 모음.
+72. https://github.com/deepika-builds/liquid-glass — SVG 변위 기반 굴절, 무의존성 단일 파일 구현.
+73. https://www.cssscript.com/liquid-glass-ui/ — 순수 CSS+SVG 필터 Liquid Glass UI 튜토리얼.
+74. https://medium.com/ekino-france/liquid-glass-in-css-and-svg-839985fcb88d — feImage PNG 변위맵 + feGaussianBlur + feDisplacementMap 조합 해설.
+75. https://freefrontend.com/css-liquid-glass/ — Liquid Glass 스니펫 모음(레퍼런스 탐색용).
+76. https://freefrontend.com/code/liquid-glass-effect-2026-02-05/ — 최신 Liquid Glass 데모.
+77. https://connect.mozilla.org/t5/ideas/support-svg-filters-in-backdrop-filter-for-advanced-glass/idi-p/98453 — Firefox에 backdrop-filter SVG 필터 지원을 요청하는 공식 아이디어 스레드(2025).
+78. https://codepen.io/iamvdo/pen/VLOGdw — SVG 필터로 backdrop-filter를 흉내내는 고전 데모.
+79. https://www.svggenie.com/blog/advanced-svg-filters-glassmorphism-glitch — 글래스모피즘과 글리치 효과 조합.
+
+## F. 노이즈 / 그레인 / 텍스처
+
+80. https://www.freecodecamp.org/news/grainy-css-backgrounds-using-svg-filters/ — SVG 필터로 그레이니 배경 만들기 단계별 가이드.
+81. https://daniel.do/article/making-noisy-svgs — 노이즈 SVG 제작 실전.
+82. https://ibelick.com/blog/create-grainy-backgrounds-with-css — CSS만으로 그레인 배경 만들기.
+83. https://gist.github.com/skeptrunedev/e1f0cf00641fb26bbd0acf937f57c6a5 — 필름 그레인 SVG+HTML 스니펫.
+84. https://www.fffuel.co/nnnoise/ — 온라인 SVG 노이즈 텍스처 생성기. 파라미터 감 잡는 데 유용.
+85. https://imagetosvg.com/how-to/svg-feturbulence-filter-primitive — feTurbulence 절차적 노이즈 가이드.
+86. https://dev.to/hexshift/creating-organic-textures-with-svg-filter-distortions-1moj — 변위 기반 유기적 텍스처.
+87. https://codepen.io/Chokcoco/pen/OJWLXPY — feTurbulence + feDiffuseLighting 거친 종이 질감 CodePen.
+88. https://oreillymedia.github.io/Using_SVG/extras/ch16-feTurbulence.html — "Using SVG" 책의 feTurbulence 파형 만들기 챕터.
+89. https://www.oreilly.com/library/view/designing-svg-web/0735711666/0735711666_ch07lev1sec3.html — SVG 필터 범위 개괄(고전 서적).
+
+## G. 색상 / 듀오톤 / 색수차
+
+90. ★ https://utilitybend.com/blog/revisiting-svg-filters-my-forgotten-powerhouse-for-duotones-noise-and-other-effects/ — 듀오톤/노이즈/방향성 모션블러(`stdDeviation="15 0"`) 실용 코드 모음. 필터 컨테이너 접근성 패턴.
+91. ★ https://johndjameson.com/posts/chromatic-aberration-with-svg-filters — 색수차 완전 코드. 채널별 feColorMatrix + feOffset + feGaussianBlur + screen 블렌드.
+92. https://johndjameson.com/posts/understanding-fecolormatrix-svg-filters — feColorMatrix 행렬 읽는 법 입문.
+93. https://github.com/yoksel/svg-gradient-map — 듀오톤/트라이톤 필터 생성 도구 소스.
+94. https://yoksel.github.io/svg-gradient-map/ — 위 도구 라이브 버전. 이미지 업로드 → 코드 복사.
+95. https://yoksel.github.io/svg-filters/ — 필터 체인을 GUI로 조립하는 플레이그라운드. 프리셋 다수.
+96. https://yoksel.github.io/svg-filters-02-2018/ — yoksel의 SVG 필터 강연 슬라이드(러시아어).
+97. https://jmperezperez.com/blog/duotone-using-css-blend-modes/ — CSS 블렌드 모드 기반 듀오톤(SVG 대안, 정확도는 낮음).
+98. https://codepen.io/lentilz/pen/mPOKdG/ — 듀오톤 SVG 필터 CodePen.
+99. https://stuffandnonsense.co.uk/blog/svg-filters-for-emmas-website — 실제 사이트에 SVG 필터를 적용한 사례 연구.
+
+## H. 손그림 / 왜곡 / 글리치
+
+100. ★ https://camillovisini.com/coding/simulating-hand-drawn-motion-with-svg-filters — feTurbulence+feDisplacementMap으로 손그림 모션. baseFrequency 오프셋을 100ms마다 순환시키는 방식.
+101. ★ https://henry.codes/writing/how-to-distort-text-with-svg/ — 텍스트 왜곡. scale을 로그 스케일(1→2→10→50→200)로 탐색하라는 실용 팁, 텍스트 선택 가능성 유지.
+102. https://kirgroup.net/blog/2025/07/21-SVG-Hand-Drawing-without-js.html — JS 없이 SMIL만으로 손그림 모션 구현.
+103. https://heredragonsabound.blogspot.com/2020/02/creating-pencil-effect-in-svg.html — 연필 효과: 변위된 선을 여러 번 겹쳐 feBlend로 합치는 기법.
+104. https://bengammon.co.uk/rough-css-borders-with-svg-filters/ — CSS 테두리를 러프하게 만드는 최소 구현.
+105. https://medium.com/swlh/using-the-svg-feturbulence-filter-for-wave-effects-2b8cb2546ee6 — 파형 효과에 feTurbulence 활용.
+106. https://codepen.io/smashingmag/pen/yLXOgoQ — Smashing 기사의 글리치 트랜지션 CodePen(feFlood 밴드 + 변위).
+107. https://codepen.io/JWS-Animation/pen/jOwOpZr — feTurbulence 글리치 텍스트.
+108. https://www.nickhart.co.uk/2021/04/18/animated-svg-cyberpunk-logo-with-filters/ — 사이버펑크 로고: 색수차 + 글리치 애니메이션 조합.
+109. https://codepen.io/Sid701/pen/OJXKMXw — 물결 리플 필터.
+110. https://codepen.io/enxaneta/post/svg-waves-with-fedisplacementmap — feDisplacementMap 파형 심화.
+111. https://redstapler.co/realistic-water-effect-svg-turbulence-filter/ — 사실적인 물 효과 튜토리얼.
+112. https://dev.to/matteo1222/explained-4a4b — feDisplacementMap 동작 원리 해설.
+113. https://medium.com/@jaikumarsharma94130/building-a-special-invisible-svg-component-that-defines-wavy-filters-2a09e6050de6 — 재사용 가능한 wavy 필터 컴포넌트 설계.
+114. https://www.youtube.com/watch?v=lisZT8JIeKk — Squigglevision 메뉴 호버 효과 영상 튜토리얼.
+115. https://observablehq.com/@abbe98/svg-paths-using-filters-animated — 필터로 애니메이션되는 SVG 경로 실험.
+
+## I. 리소그래프 / 인쇄
+
+116. https://osmanyy.com/projects/risograph-css/ — Risograph.css. mix-blend-mode multiply 잉크 레이어 + feTurbulence 그레인 마스크 + 커스텀 프로퍼티 misregistration. **본 문서 레시피 16의 직접적 참고.**
+117. https://codepen.io/chriskirknielsen/pen/rNmgXyV — SVG 기반 리소그래프 그라디언트.
+118. https://chrislemke.github.io/website_designs/designs/Risograph.html — 리소그래프 웹 디자인 레퍼런스.
+119. https://libguides.reed.edu/c.php?g=1339150&p=9870131 — Reed College 리소 인쇄 가이드. 실제 인쇄 특성(어긋남 범위, 잉크 팔레트) 근거.
+120. https://studio-ity.com/riso/ — 리소 효과 온라인 시뮬레이터. 2~4색 레이어, 그레인, 하프톤 파라미터 참고.
+121. https://www.grayscaleimage.org/posts/duotone-design-guide — 듀오톤 디자인 가이드(색 선택 관점).
+
+## J. 조명 / 컨볼루션
+
+122. https://vanseodesign.com/web-design/svg-filter-primitives-fespecularlighting/ — feSpecularLighting 실전 튜토리얼.
+123. https://vanseodesign.com/web-design/svg-filter-primitives-feconvolvematrix/ — feConvolveMatrix로 엠보스/베벨/샤픈 만들기.
+124. https://vanseodesign.com/web-design/svg-filter-primitives-fecomposite/ — feComposite 연산자별 결과 비교.
+125. https://apike.ca/prog_svg_filter_feComposite.html — feComposite arithmetic k1~k4 조합 시각 예제.
+126. https://www.svgbasics.com/filters2.html — 조명 필터 기초 튜토리얼.
+127. https://www.creativebloq.com/netmag/how-go-beyond-basics-svg-filters-71412280 — 조명·질감 조합 심화(net magazine).
+128. https://docs.w3cub.com/svg/element/fespecularlighting — feSpecularLighting 레퍼런스 미러.
+129. https://docs.w3cub.com/svg/element/femorphology — feMorphology 레퍼런스 미러.
+130. https://docs.w3cub.com/svg/element/fecomposite.html — feComposite 레퍼런스 미러.
+131. https://svgwrite.readthedocs.io/en/latest/classes/fe_specular_lighting.html — Python svgwrite 문서. 속성 기본값이 명시적으로 표로 정리돼 있어 참조하기 좋다.
+132. https://svgwrite.readthedocs.io/en/latest/classes/fe_tile.html — feTile 속성 정리.
+133. https://svgwrite.readthedocs.io/en/latest/classes/fe_morphology.html — feMorphology 속성 정리.
+134. https://svgwrite.readthedocs.io/en/latest/classes/fe_composite.html — feComposite 속성 정리.
+135. https://svgwrite.readthedocs.io/en/latest/classes/fe_turbulence.html — feTurbulence 속성 정리. seed 절삭 규칙 명시.
+
+## K. 성능 / 버그 / 브라우저 이슈
+
+136. ★ https://codepen.io/tigt/post/improving-svg-rendering-performance — Taylor Hunt의 SVG 렌더 성능 심층 분석. "SVG-on-SVG / SVG-in-CSS / CSS 단축" 3가지 경로, 엔진별 가속 불일치, "Safari는 CSS 단축 필터에서만 괜찮다"는 결론.
+137. https://bugzilla.mozilla.org/show_bug.cgi?id=422371 — "SVG feTurbulence filter is far too slow". 15년 넘게 열려 있는 성능 버그.
+138. https://bugzilla.mozilla.org/show_bug.cgi?id=862225 — seed 514에서 feTurbulence가 사각형을 만드는 버그. 스펙 참조 구현의 정수 나눗셈 문제로 확인됨.
+139. https://bugs.launchpad.net/bugs/1406458 — 위와 같은 seed 버그의 Inkscape 리포트. 문제 seed 값 목록(514, 1977, 2337, 4777, 8032, 9615) 포함.
+140. https://bz.apache.org/bugzilla/show_bug.cgi?id=36744 — Batik의 feTurbulence seed 구현 버그. 독립 구현들이 동일 문제를 공유함을 보여준다.
+141. https://bugzilla.mozilla.org/show_bug.cgi?id=1441294 — feComposite arithmetic 사용 시 시각 아티팩트 버그.
+142. https://bugzilla.mozilla.org/show_bug.cgi?id=1298137 — 하드웨어 가속을 켜면 대부분의 CSS/SVG 필터가 동작하지 않는 Firefox 버그.
+143. https://bugzilla.mozilla.org/show_bug.cgi?id=1094305 — feGaussianBlur의 edgeMode="duplicate" 구현 요청(미구현 상태).
+144. https://bugzilla.mozilla.org/show_bug.cgi?id=869496 — CSS/SVG 필터 GPU 가속 구현 트래킹.
+145. https://www.chromium.org/developers/design-documents/image-filters/ — Chromium의 필터 구현 설계 문서(Blink/Skia 2중 구현).
+146. https://developer.chrome.com/blog/hardware-accelerated-animations — 하드웨어 가속 애니메이션 대상 프로퍼티 현황(opacity/filter/transform).
+147. https://gsap.com/community/forums/topic/33075-gsap-and-feturbulence-mobile-performance/ — 데스크톱은 멀쩡한데 모바일에서 feTurbulence가 죽는 실제 사례와 대응.
+148. https://www.svgator.com/help/animation-and-interactivity/how-to-fix-svg-animation-lag-in-safari — Safari 필터 렌더 실패/랙 대응. 고해상도에서 큰 요소가 아예 안 그려지는 사례.
+149. https://finance.biggo.com/news/202507211315_SVG_Filter_Performance_Issues — 손그림 애니메이션 효과의 CPU 포화 문제 보도.
+150. https://imagetosvg.com/how-to/svg-filter-performance-tips — 필터 성능 팁 요약.
+151. https://oreillymedia.github.io/Using_SVG/extras/ch19-performance.html — "Using SVG" 성능 계획 챕터.
+152. https://iamsteve.me/blog/overcoming-a-couple-of-issues-with-svg-filter-effects — Safari에서 채도가 낮게 나오는 문제를 `color-interpolation-filters="sRGB"`로 해결한 실무 기록.
+153. https://konadu.dev/backdrop-filter-breaks-position-fixed — backdrop-filter가 position:fixed를 깨뜨리는 이유와 회피법.
+154. https://gist.github.com/vielhuber/e882f1f7c03f56d9bd70985fe4fe4a5d — blur/transform/will-change가 스태킹 컨텍스트를 만들어 생기는 포지셔닝 문제 모음.
+155. https://takazudomodular.com/pj/zcss/docs/layout/positioning/containing-block-for-fixed/ — fixed 포지션의 컨테이닝 블록 규칙 정리.
+
+## L. 접근성 / 폴백
+
+156. https://a11y-101.com/development/reduced-motion — prefers-reduced-motion 기본기.
+157. https://blog.pope.tech/2025/12/08/design-accessible-animation-and-movement/ — 접근 가능한 애니메이션 설계 코드 예제.
+158. https://github.com/mgifford/ACCESSIBILITY.md/blob/main/examples/SVG_ACCESSIBILITY_BEST_PRACTICES.md — SVG 접근성 베스트 프랙티스. `<img>`로 넣은 SVG에서는 prefers-reduced-motion이 평가되지 않는다는 중요한 지적.
+159. https://tympanus.net/codrops/css_reference/supports/ — @supports 레퍼런스.
+160. https://iamsteve.me/blog/feature-detection-with-css — CSS 기능 감지 실무.
+161. https://dev.to/hexshift/real-world-use-cases-for-svg-filters-in-modern-web-development-52fm — SVG 필터의 실제 사용 사례와 점진적 향상 관점.
+
+## M. 기타 참고
+
+162. https://redev.rocks/articles/18-filters/ — SVG 필터 종합 정리(러시아어).
+163. https://webplatform.github.io/docs/svg/tutorials/smarter_svg_filters/ — WebPlatform Docs의 필터 튜토리얼(아카이브).
+164. https://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/filters2.htm — SVG Open 2010 필터 발표 자료. 실험적 조합이 많다.
+165. https://en.wikipedia.org/wiki/SVG_filter_effects — 개요.
+166. https://riptutorial.com/svg/topic/3262/filters — 필터 토픽 요약.
+167. https://www.geeksforgeeks.org/html/svg-fecomposite-element/ — feComposite 요약.
+168. https://www.geeksforgeeks.org/html/svg-fespecularlighting-element/ — feSpecularLighting 요약.
+169. https://osbo.com/svg/elements/fespecularlighting/ — feSpecularLighting 속성표.
+170. https://docs.aspose.com/svg/net/drawing-basics/filters-and-gradients/ — 필터+그라디언트 조합 예제 모음.
+171. https://animationpatterns.art/animations/gooey-blob-construction/ — gooey 블롭 구성 단계별 분해.
+172. https://animationpatterns.art/animations/gooey-blob-metaball-filter/ — metaball 필터 파라미터 비교.
+173. https://doathingy.com/blog/csssvg-gooey-effect-demo — gooey 효과 동작 원리 데모.
+174. https://freefrontend.com/javascript-gooey/ — gooey 효과 JS 구현 모음.
+175. https://x.com/jh3yy/status/1754546575248953457 — jhey의 `filter: blur(20px) contrast(30)` CSS-only gooey 트릭.
+176. https://blog.logrocket.com/complete-guide-using-css-filters-svgs/ — CSS 필터를 SVG에 적용하는 전반 가이드.
+177. https://www.testmuai.com/learning-hub/css-backdrop-filter-browser-support/ — backdrop-filter 브라우저 지원·한계 정리.
+178. https://www.w3tweaks.com/css/css-filter-backdrop-filter/ — filter/backdrop-filter 비주얼 가이드.
+179. https://imagetosvg.com/how-to/svg-duotone-effect — 듀오톤 효과 단계별 가이드.
+180. https://www.svg2png.org/blog/svg-filter-effects-guide — 블러·섀도·색 트릭 개괄(2026).
+181. https://vectosolve.com/blog/svg-filter-effects-guide — 고급 비주얼 효과 가이드.
+182. https://blog.openreplay.com/modern-svg-animation-techniques/ — 현대적 SVG 애니메이션 기법 개괄.
+183. https://dev.to/andyfitz/essential-svg-tools-41k5 — SVG 작업 필수 도구 목록.
+
+---
+
+## 검증 방법 기록
+
+본 문서 세트의 코드는 다음 절차로 검증했다.
+
+- **환경**: Playwright Chromium 151.0.0.0 (Windows 11), devicePixelRatio 1, 로컬 HTTP 서버(`python -m http.server`)
+- **방법**: 데모 페이지 8개(`test1`~`test8.html`)를 작성해 렌더링 후 스크린샷으로 육안 확인
+- **검증된 항목(레시피)**: Gooey(feBlend/atop 양쪽), 그레인 오버레이, 그레이니 그라디언트, 듀오톤, 색수차, squiggle, feMorphology 아웃라인·녹아웃, 종이 질감, feSpecularLighting 광택, 잉크 번짐, Liquid Glass v1/v2, RGB 분리 렌즈, 프로스티드 글래스, 포스터화, 디더, feTile 패턴, 리소그래프, 물결 텍스트(SMIL), 네온 체인 feDropShadow, flood-color SMIL 애니메이션, 러프 엣지, 스티커, 스포트라이트(screen/multiply + JS 광원 이동), 글리치 밴드, feConvolveMatrix 엠보스/샤픈, 필터 영역 클리핑 비교
+- **추가 실측**: `CSS.supports('backdrop-filter','url(#x)')` → `true`(따라서 기능 감지로 부적합); `display:none` SVG 내부 필터도 Chromium에서는 동작; 존재하지 않는 필터 참조 시 필터만 무시되고 요소는 렌더됨(CSS·SVG 어트리뷰트 양쪽); `saturate(0)`이 linearRGB에서 `#808080`, sRGB에서 `#4a4a4a`로 갈림; blur 헤일로의 색공간별 차이; `primitiveUnits="objectBoundingBox"` 스케일링(90px 박스 × 0.05 ≈ 4.5px); feDisplacementMap 채널 기본값(A)과 R/G 명시의 결과 차이; feConvolveMatrix 커널 합(0 vs 1)과 bias의 상호작용; `navigator.hardwareConcurrency`/`deviceMemory` 반환값
+- **미검증으로 남은 항목**: `SVGSVGElement.pauseAnimations()` 기반 SMIL 제어, UA 기반 backdrop-filter 프로브, **Firefox/Safari/모바일 실기기에서의 모든 동작**(브라우저 미보유). 문서 내 브라우저별 이슈는 벤더 버그 트래커·MDN 호환 데이터·1차 아티클의 보고에 근거한 것이며 직접 재현하지 않았다.
diff --git a/research/three/01-stack-and-setup.md b/research/three/01-stack-and-setup.md
new file mode 100644
index 0000000..977fc14
--- /dev/null
+++ b/research/three/01-stack-and-setup.md
@@ -0,0 +1,1047 @@
+# 01 — 스택 선택과 셋업
+
+> 기준 시점: **2026-08-20**. 이 문서의 모든 코드는 아래 "버전 스냅샷"에서 검증한 API를 기준으로 작성했다.
+> 버전 의존적인 API에는 `[r1XX+]` 표기를 붙였다.
+
+---
+
+## 0. 버전 스냅샷
+
+| 패키지 | 버전 | 비고 |
+|---|---|---|
+| `three` | **0.185.1** | r185. r163부터 WebGL1 미지원(WebGL2 전용) |
+| `@react-three/fiber` | **9.7.0** | peer: `react >=19 <19.3`, `three >=0.156` |
+| `@react-three/drei` | **10.7.8** | peer: `react ^19`, `three >=0.159`, `@react-three/fiber ^9` |
+| `@react-three/postprocessing` | **3.0.5** | peer: `three >= 0.182`, `postprocessing ^6.36`, `fiber >=9.7` |
+| `postprocessing` | **6.39.4** | peer: `three >= 0.168.0 < 0.186.0` ← **상한 존재. three 0.186부터 깨짐** |
+| `gsap` | **3.15.0** | 3.13(2025-04)부터 ScrollTrigger/SplitText/MorphSVG 포함 **전 플러그인 무료** |
+| `lenis` | **1.3.26** | 스무스 스크롤. `respectReducedMotion` 기본 `true` |
+| `troika-three-text` | **0.52.5** | peer: `three >=0.125`. SDF 텍스트 |
+| `detect-gpu` | 5.x | GPU tier 0~3 판정 |
+| `vite-plugin-glsl` | 1.6.x | `.glsl/.vert/.frag` import + `#include` |
+
+### 🔴 버전 조합 함정 (가장 흔한 사고)
+
+1. **`postprocessing`의 three 상한**: `>= 0.168.0 < 0.186.0`. `three@0.186`으로 올리면 포스트프로세싱이 깨진다. 포스트프로세싱을 쓸 거면 **three를 0.185.x에 고정**한다.
+2. **R3F v9는 React 19 전용**이고 `react >=19 <19.3`. React 19.2.x에서 내부 reconciler가 비호환 변경돼서 R3F가 reconciler를 번들에 포함시켰다. React 19.3+에서는 R3F v10을 기다려야 한다.
+3. **package.json에 three를 한 번만**: `three`가 중복 설치되면 `instanceof` 검사가 전부 깨진다. 모노레포/pnpm에서는 `resolutions`/`overrides`로 단일화한다.
+
+```json
+// package.json — 안전한 핀
+{
+  "dependencies": {
+    "three": "0.185.1",
+    "@react-three/fiber": "^9.7.0",
+    "@react-three/drei": "^10.7.8",
+    "@react-three/postprocessing": "^3.0.5",
+    "postprocessing": "^6.39.4"
+  },
+  "overrides": { "three": "0.185.1" },
+  "pnpm": { "overrides": { "three": "0.185.1" } }
+}
+```
+
+---
+
+## 1. Vanilla three.js vs React Three Fiber — 결정 기준
+
+### 한 줄 요약
+**페이지가 React가 아니면 vanilla. React면 R3F.** 그 외 판단은 아래 표.
+
+| 상황 | 권장 | 이유 |
+|---|---|---|
+| 정적 랜딩페이지(HTML/Astro/Webflow 등), 히어로 배경 셰이더 1개 | **Vanilla** | React 런타임(~45KB gz) 불필요. three만 15~90KB gz |
+| 스크롤 전체를 지배하는 WebGL(카메라 이동, 섹션 전환) | **Vanilla + GSAP/Lenis** | 명령형 타임라인이 스크롤 연출과 궁합이 좋음 |
+| DOM 이미지 다수를 WebGL 플레인으로 치환 | 둘 다 가능 (Vanilla 약간 유리) | DOM ↔ WebGL 좌표 동기화는 어차피 수동 |
+| Next.js/React 앱 내부의 3D 섹션, 제품 컨피규레이터 | **R3F** | 상태-씬 바인딩, Suspense 로딩, drei 재사용 |
+| 3D 모델 + 환경광 + 그림자 + 포스트프로세싱 조합 | **R3F + drei** | `<Environment>`, `<ContactShadows>`, `<EffectComposer>` 로 하루치 작업이 10줄 |
+| 팀에 React 개발자만 있음 | **R3F** | 유지보수 비용이 성능 손해보다 큼 |
+| 극한 성능(모바일 1st paint < 1.5s, 번들 < 150KB) | **Vanilla** | 트리셰이킹 통제권이 완전함 |
+
+### 비용 비교 (gzip, 실측 근사)
+
+| 구성 | 크기 |
+|---|---|
+| three 코어만 (`WebGLRenderer` + `Scene` + `PlaneGeometry` + `ShaderMaterial`) | **~90 KB** (실제 트리셰이킹 후) |
+| three 전체 번들 import | ~170 KB |
+| + `@react-three/fiber` | +30 KB |
+| + `react` + `react-dom` | +45 KB |
+| + `@react-three/drei` (전체 import 시) | +100 KB 이상 → **반드시 named import** |
+| + `postprocessing` (Bloom만) | +25 KB |
+| + `gsap` core + ScrollTrigger | +40 KB |
+| + `lenis` | +5 KB |
+
+> **현실 체크**: three는 트리셰이킹이 완전하지 않다. `WebGLRenderer` 하나가 셰이더 청크 전체를 끌고 온다.
+> "three 쓰면 최소 90KB gz"를 예산의 바닥으로 잡아라. 이보다 작게 만들려면 three가 아니라 raw WebGL/OGL을 써야 한다.
+
+### 혼합 전략 (추천 기본값)
+
+랜딩페이지에서 가장 안전한 구조는 **"WebGL은 지연 로드되는 장식 레이어"**다.
+
+```
+DOM(SSR/정적) = 콘텐츠·SEO·LCP 담당
+  └ <canvas>  = 장식. dynamic import, IntersectionObserver로 첫 진입 시 로드
+```
+
+이렇게 하면 JS 번들이 초기 경로에서 빠지고, WebGL 실패/저사양/`prefers-reduced-motion`에서 DOM만 남아도 페이지가 성립한다.
+
+---
+
+## 2. 설치
+
+### Track A — Vanilla + Vite
+
+```bash
+npm create vite@latest my-site -- --template vanilla
+cd my-site
+npm i three@0.185.1
+npm i -D vite-plugin-glsl
+# 선택
+npm i gsap lenis
+npm i troika-three-text
+npm i postprocessing@^6.39.4
+npm i detect-gpu
+```
+
+### Track B — R3F + Vite (React 19)
+
+```bash
+npm create vite@latest my-site -- --template react-ts
+cd my-site
+npm i three@0.185.1 @react-three/fiber@^9.7.0 @react-three/drei@^10.7.8
+npm i -D @types/three vite-plugin-glsl
+# 선택
+npm i @react-three/postprocessing@^3.0.5 postprocessing@^6.39.4
+npm i gsap lenis maath
+npm i -D r3f-perf leva
+```
+
+### Track C — Next.js (App Router) + R3F
+
+```bash
+npx create-next-app@latest my-site --typescript
+cd my-site
+npm i three@0.185.1 @react-three/fiber@^9.7.0 @react-three/drei@^10.7.8
+npm i -D @types/three
+```
+
+Next.js에서는 Canvas를 **반드시 클라이언트 전용 동적 임포트**로 감싼다.
+
+```tsx
+// components/SceneClient.tsx
+'use client'
+import dynamic from 'next/dynamic'
+
+const Scene = dynamic(() => import('./Scene'), {
+  ssr: false,
+  loading: () => <div className="scene-skeleton" aria-hidden="true" />,
+})
+
+export default Scene
+```
+
+---
+
+## 3. Vite 설정
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite'
+import glsl from 'vite-plugin-glsl'
+
+export default defineConfig({
+  plugins: [
+    glsl({
+      include: ['**/*.glsl', '**/*.wgsl', '**/*.vert', '**/*.frag', '**/*.vs', '**/*.fs'],
+      warnDuplicatedImports: true,
+      defaultExtension: 'glsl',
+      compress: false,       // 프로덕션에서 true로
+      watch: true,
+    }),
+  ],
+  build: {
+    target: 'es2022',
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          // three를 별도 청크로 → 앱 코드 변경 시 캐시 유지
+          if (id.includes('node_modules/three')) return 'three'
+          if (id.includes('node_modules/gsap')) return 'gsap'
+        },
+      },
+    },
+  },
+})
+```
+
+TypeScript를 쓴다면:
+
+```json
+// tsconfig.json
+{ "compilerOptions": { "types": ["vite/client", "vite-plugin-glsl/ext"] } }
+```
+
+`vite-plugin-glsl`은 three 내장 청크(`#include <common>` 등)를 자동으로 건너뛴다. 내 셰이더 파일끼리의 `#include './noise.glsl'`만 인라인한다.
+
+---
+
+## 4. 최소 보일러플레이트 — Vanilla (완성 코드)
+
+### 4.1 `index.html`
+
+```html
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>WebGL Hero</title>
+  <style>
+    :root { color-scheme: dark; }
+    * { box-sizing: border-box; }
+    body { margin: 0; background: #07070a; color: #f4f4f5; font-family: system-ui, sans-serif; }
+
+    .hero { position: relative; min-height: 100svh; display: grid; place-items: center; isolation: isolate; }
+
+    /* 캔버스는 장식. 접근성 트리에서 제외하고 포인터 이벤트도 막는다 */
+    .hero__canvas {
+      position: absolute; inset: 0; width: 100%; height: 100%;
+      z-index: -1; display: block; pointer-events: none;
+      /* WebGL 실패/미지원 시 그대로 보이는 폴백 배경 */
+      background: radial-gradient(120% 90% at 50% 0%, #2a1f5c 0%, #0b0b16 55%, #07070a 100%);
+    }
+    .hero__inner { text-align: center; max-width: 42rem; padding: 2rem; }
+    h1 { font-size: clamp(2.5rem, 8vw, 6rem); line-height: 0.95; margin: 0 0 1rem; letter-spacing: -0.04em; }
+  </style>
+</head>
+<body>
+  <section class="hero">
+    <canvas class="hero__canvas" id="gl" aria-hidden="true"></canvas>
+    <div class="hero__inner">
+      <h1>Designpaca</h1>
+      <p>WebGL은 장식이고, 콘텐츠는 DOM에 있다.</p>
+    </div>
+  </section>
+
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>
+```
+
+### 4.2 `src/gl/Stage.js` — 재사용 가능한 렌더 루프 컨테이너
+
+이 클래스가 **DPR 클램프 / 리사이즈 / 가시성 일시정지 / reduced-motion / 컨텍스트 로스 / dispose**를 전부 처리한다.
+모든 씬은 이 위에 얹는다.
+
+```js
+// src/gl/Stage.js
+import * as THREE from 'three'
+
+export default class Stage {
+  /**
+   * @param {object} opts
+   * @param {HTMLCanvasElement} opts.canvas
+   * @param {number}  [opts.dprMax=2]        디바이스 픽셀비 상한
+   * @param {boolean} [opts.antialias=false] DPR>=2면 끄는 게 이득
+   * @param {boolean} [opts.alpha=false]     투명 배경 필요할 때만 true
+   * @param {number}  [opts.fov=45]
+   * @param {boolean} [opts.pauseOffscreen=true]
+   */
+  constructor({
+    canvas,
+    dprMax = 2,
+    antialias = false,
+    alpha = false,
+    fov = 45,
+    pauseOffscreen = true,
+  }) {
+    this.canvas = canvas
+    this.dprMax = dprMax
+    this.pauseOffscreen = pauseOffscreen
+
+    this.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    this.renderer = new THREE.WebGLRenderer({
+      canvas,
+      antialias,
+      alpha,
+      powerPreference: 'high-performance',
+      stencil: false,
+      depth: true,
+    })
+    // r152+ 기본값이지만 명시해두면 라이브러리 간섭에 안전하다
+    this.renderer.outputColorSpace = THREE.SRGBColorSpace
+    this.renderer.toneMapping = THREE.NoToneMapping // 플랫 그라디언트/2D 셰이더면 None이 정확
+    this.renderer.setClearColor(0x000000, alpha ? 0 : 1)
+
+    this.scene = new THREE.Scene()
+    this.camera = new THREE.PerspectiveCamera(fov, 1, 0.1, 100)
+    this.camera.position.set(0, 0, 5)
+
+    this.clockStart = performance.now()
+    this.time = 0
+    this.delta = 0
+    this._last = 0
+    this._running = false
+    this._updaters = new Set()
+
+    this.size = { w: 0, h: 0, dpr: 1 }
+
+    this._onResize = this._onResize.bind(this)
+    this._onVisibility = this._onVisibility.bind(this)
+    this._onContextLost = this._onContextLost.bind(this)
+    this._onContextRestored = this._onContextRestored.bind(this)
+    this._tick = this._tick.bind(this)
+
+    this._resizeObserver = new ResizeObserver(this._onResize)
+    this._resizeObserver.observe(canvas)
+    document.addEventListener('visibilitychange', this._onVisibility)
+    canvas.addEventListener('webglcontextlost', this._onContextLost, false)
+    canvas.addEventListener('webglcontextrestored', this._onContextRestored, false)
+
+    if (pauseOffscreen) {
+      this._io = new IntersectionObserver(
+        ([entry]) => (entry.isIntersecting ? this.start() : this.stop()),
+        { rootMargin: '10%' }
+      )
+      this._io.observe(canvas)
+    }
+
+    this._onResize()
+  }
+
+  /** 매 프레임 호출될 콜백 등록. 반환된 함수를 호출하면 해제 */
+  add(fn) {
+    this._updaters.add(fn)
+    return () => this._updaters.delete(fn)
+  }
+
+  start() {
+    if (this._running) return
+    this._running = true
+    this._last = performance.now()
+    this.renderer.setAnimationLoop(this._tick)
+  }
+
+  stop() {
+    if (!this._running) return
+    this._running = false
+    this.renderer.setAnimationLoop(null)
+  }
+
+  /** 한 프레임만 그린다 (정지 상태에서 리사이즈/reduced-motion 대응) */
+  renderOnce() {
+    for (const fn of this._updaters) fn(this.time, 0)
+    this.renderer.render(this.scene, this.camera)
+  }
+
+  _tick(now) {
+    this.delta = Math.min((now - this._last) / 1000, 1 / 20) // 스파이크 클램프
+    this._last = now
+    this.time = (now - this.clockStart) / 1000
+
+    for (const fn of this._updaters) fn(this.time, this.delta)
+    this.renderer.render(this.scene, this.camera)
+  }
+
+  _onResize() {
+    const rect = this.canvas.getBoundingClientRect()
+    const w = Math.max(1, Math.round(rect.width))
+    const h = Math.max(1, Math.round(rect.height))
+    const dpr = Math.min(window.devicePixelRatio || 1, this.dprMax)
+    if (w === this.size.w && h === this.size.h && dpr === this.size.dpr) return
+
+    this.size = { w, h, dpr }
+    this.renderer.setPixelRatio(dpr)
+    this.renderer.setSize(w, h, false) // false = 캔버스 CSS 크기는 건드리지 않음
+    this.camera.aspect = w / h
+    this.camera.updateProjectionMatrix()
+
+    this.onResize?.(w, h, dpr)
+    if (!this._running) this.renderOnce()
+  }
+
+  _onVisibility() {
+    if (document.hidden) this.stop()
+    else if (!this.pauseOffscreen || this._isVisible()) this.start()
+  }
+
+  _isVisible() {
+    const r = this.canvas.getBoundingClientRect()
+    return r.bottom > 0 && r.top < window.innerHeight
+  }
+
+  _onContextLost(e) {
+    e.preventDefault() // 복구를 원한다는 신호. 이거 없으면 restored 이벤트가 안 온다
+    this.stop()
+    console.warn('[Stage] WebGL context lost')
+  }
+
+  _onContextRestored() {
+    console.warn('[Stage] WebGL context restored — 리소스 재생성 필요')
+    this.onContextRestored?.()
+    this.start()
+  }
+
+  /**
+   * 씬 그래프 전체를 순회하며 GPU 리소스 해제.
+   * three는 lifetime을 모르므로 반드시 앱이 호출해야 한다.
+   */
+  dispose() {
+    this.stop()
+    this._resizeObserver.disconnect()
+    this._io?.disconnect()
+    document.removeEventListener('visibilitychange', this._onVisibility)
+    this.canvas.removeEventListener('webglcontextlost', this._onContextLost)
+    this.canvas.removeEventListener('webglcontextrestored', this._onContextRestored)
+
+    this.scene.traverse((obj) => {
+      if (obj.geometry) obj.geometry.dispose()
+      const mats = Array.isArray(obj.material) ? obj.material : obj.material ? [obj.material] : []
+      for (const m of mats) {
+        for (const key of Object.keys(m)) {
+          const v = m[key]
+          if (v && v.isTexture) {
+            v.dispose()
+            v.image?.close?.() // ImageBitmap은 close()까지 해야 GC됨
+          }
+        }
+        if (m.uniforms) {
+          for (const u of Object.values(m.uniforms)) {
+            if (u.value && u.value.isTexture) u.value.dispose()
+          }
+        }
+        m.dispose()
+      }
+    })
+    this.scene.clear()
+    this.renderer.dispose()
+    this._updaters.clear()
+  }
+}
+```
+
+### 4.3 `src/main.js` — 지연 로딩 + WebGL 폴백
+
+```js
+// src/main.js
+const canvas = document.getElementById('gl')
+
+// WebGL2 지원 여부를 가벼운 프로브로 확인 (three를 로드하기 전에)
+function hasWebGL2() {
+  try {
+    const c = document.createElement('canvas')
+    const gl = c.getContext('webgl2')
+    if (!gl) return false
+    // 프로브 컨텍스트는 즉시 반납한다. 안 그러면 컨텍스트 슬롯을 낭비한다
+    gl.getExtension('WEBGL_lose_context')?.loseContext()
+    return true
+  } catch {
+    return false
+  }
+}
+
+const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+const saveData = navigator.connection?.saveData === true
+const lowMemory = (navigator.deviceMemory ?? 8) < 4
+
+if (!canvas || !hasWebGL2() || saveData || lowMemory) {
+  // 아무것도 하지 않는다 → CSS 그라디언트 폴백이 그대로 남는다
+  canvas?.remove()
+} else {
+  // 뷰포트에 들어올 때 비로소 three를 다운로드한다
+  const io = new IntersectionObserver(async ([entry], obs) => {
+    if (!entry.isIntersecting) return
+    obs.disconnect()
+    const { default: mountHero } = await import('./scenes/hero.js')
+    mountHero(canvas, { reduced })
+  }, { rootMargin: '200px' })
+
+  io.observe(canvas)
+}
+```
+
+### 4.4 `src/scenes/hero.js` — 실제 씬 (풀스크린 셰이더)
+
+```js
+// src/scenes/hero.js
+import * as THREE from 'three'
+import Stage from '../gl/Stage.js'
+import vertexShader from '../shaders/fullscreen.vert'
+import fragmentShader from '../shaders/hero.frag'
+
+export default function mountHero(canvas, { reduced = false } = {}) {
+  const stage = new Stage({ canvas, dprMax: 2, antialias: false, alpha: false })
+
+  // 풀스크린 트라이앵글: 플레인(2 tri, 4 vtx)보다 저렴하고 대각선 이음매가 없다
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.BufferAttribute(
+    new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]), 3
+  ))
+  geometry.setAttribute('uv', new THREE.BufferAttribute(
+    new Float32Array([0, 0, 2, 0, 0, 2]), 2
+  ))
+
+  const uniforms = {
+    uTime:       { value: 0 },
+    uResolution: { value: new THREE.Vector2(1, 1) },
+    uPointer:    { value: new THREE.Vector2(0.5, 0.5) },
+    uColorA:     { value: new THREE.Color('#4c1d95') },
+    uColorB:     { value: new THREE.Color('#0ea5e9') },
+    uColorC:     { value: new THREE.Color('#f43f5e') },
+    uIntensity:  { value: reduced ? 0.25 : 1.0 },
+  }
+
+  const material = new THREE.ShaderMaterial({
+    vertexShader,
+    fragmentShader,
+    uniforms,
+    depthTest: false,
+    depthWrite: false,
+  })
+
+  const mesh = new THREE.Mesh(geometry, material)
+  mesh.frustumCulled = false // 풀스크린 트라이앵글은 절대 컬링되면 안 된다
+  stage.scene.add(mesh)
+
+  // 카메라는 쓰지 않지만(클립 공간에 직접 그림) 렌더러가 요구하므로 그대로 둔다
+  stage.onResize = (w, h, dpr) => uniforms.uResolution.value.set(w * dpr, h * dpr)
+  stage.onResize(stage.size.w, stage.size.h, stage.size.dpr)
+
+  // 포인터: 즉시 반영하지 않고 lerp로 따라가게 한다
+  const target = new THREE.Vector2(0.5, 0.5)
+  const onPointer = (e) => {
+    target.set(e.clientX / window.innerWidth, 1 - e.clientY / window.innerHeight)
+  }
+  window.addEventListener('pointermove', onPointer, { passive: true })
+
+  stage.add((t, dt) => {
+    uniforms.uTime.value = reduced ? 0 : t
+    uniforms.uPointer.value.lerp(target, 1 - Math.pow(0.001, dt)) // 프레임레이트 독립 lerp
+  })
+
+  if (reduced) {
+    stage.renderOnce() // 한 장만 그리고 멈춘다
+  } else {
+    stage.start()
+  }
+
+  return () => {
+    window.removeEventListener('pointermove', onPointer)
+    stage.dispose()
+  }
+}
+```
+
+### 4.5 `src/shaders/fullscreen.vert`
+
+```glsl
+varying vec2 vUv;
+
+void main() {
+  vUv = uv;
+  // position은 이미 클립 공간(-1..1)이므로 행렬 곱 없이 그대로 출력
+  gl_Position = vec4(position.xy, 0.0, 1.0);
+}
+```
+
+### 4.6 `src/shaders/hero.frag`
+
+```glsl
+precision highp float;
+
+uniform float uTime;
+uniform vec2  uResolution;
+uniform vec2  uPointer;
+uniform vec3  uColorA;
+uniform vec3  uColorB;
+uniform vec3  uColorC;
+uniform float uIntensity;
+
+varying vec2 vUv;
+
+// --- simplex noise 3D (Ashima / stegu, MIT) -------------------------------
+vec3 mod289(vec3 x){ return x - floor(x * (1.0/289.0)) * 289.0; }
+vec4 mod289(vec4 x){ return x - floor(x * (1.0/289.0)) * 289.0; }
+vec4 permute(vec4 x){ return mod289(((x*34.0)+10.0)*x); }
+vec4 taylorInvSqrt(vec4 r){ return 1.79284291400159 - 0.85373472095314 * r; }
+
+float snoise(vec3 v) {
+  const vec2 C = vec2(1.0/6.0, 1.0/3.0);
+  const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+  vec3 i  = floor(v + dot(v, C.yyy));
+  vec3 x0 = v - i + dot(i, C.xxx);
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min(g.xyz, l.zxy);
+  vec3 i2 = max(g.xyz, l.zxy);
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy;
+  vec3 x3 = x0 - D.yyy;
+  i = mod289(i);
+  vec4 p = permute(permute(permute(
+             i.z + vec4(0.0, i1.z, i2.z, 1.0))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0))
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+  float n_ = 0.142857142857;
+  vec3 ns = n_ * D.wyz - D.xzx;
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_);
+  vec4 x = x_ * ns.x + ns.yyyy;
+  vec4 y = y_ * ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+  vec4 b0 = vec4(x.xy, y.xy);
+  vec4 b1 = vec4(x.zw, y.zw);
+  vec4 s0 = floor(b0) * 2.0 + 1.0;
+  vec4 s1 = floor(b1) * 2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+  vec3 p0 = vec3(a0.xy, h.x);
+  vec3 p1 = vec3(a0.zw, h.y);
+  vec3 p2 = vec3(a1.xy, h.z);
+  vec3 p3 = vec3(a1.zw, h.w);
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));
+  p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;
+  vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 105.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
+}
+// -------------------------------------------------------------------------
+
+void main() {
+  // 화면 비율 보정: 짧은 축 기준으로 정규화해야 노이즈가 늘어지지 않는다
+  vec2 uv = gl_FragCoord.xy / uResolution;
+  vec2 p  = (gl_FragCoord.xy * 2.0 - uResolution) / min(uResolution.x, uResolution.y);
+
+  float t = uTime * 0.08;
+
+  // 마우스가 만드는 부드러운 워프
+  vec2 toPointer = p - (uPointer * 2.0 - 1.0) * vec2(uResolution.x / uResolution.y, 1.0);
+  float pointerFalloff = exp(-dot(toPointer, toPointer) * 1.6);
+
+  // 2옥타브 도메인 워프
+  float n1 = snoise(vec3(p * 1.1, t));
+  float n2 = snoise(vec3(p * 2.3 + n1 * 0.6, t * 1.4 + 11.0));
+  float field = (n1 * 0.65 + n2 * 0.35) * uIntensity + pointerFalloff * 0.45;
+
+  // 세 색을 필드 값으로 섞는다 (uColorX는 THREE.Color → 이미 linear 공간)
+  vec3 col = mix(uColorA, uColorB, smoothstep(-0.6, 0.5, field));
+  col = mix(col, uColorC, smoothstep(0.25, 0.95, field + pointerFalloff * 0.3));
+
+  // 비네트
+  col *= 1.0 - 0.45 * dot(p, p) * 0.35;
+
+  // 밴딩 제거용 디더 (8bit 프레임버퍼에서 필수)
+  float dither = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453);
+  col += (dither - 0.5) / 255.0;
+
+  gl_FragColor = vec4(col, 1.0);
+
+  // three가 주입하는 청크. 톤매핑 → 출력 색공간 변환 순서를 지킨다
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+```
+
+> **주의**: `#include <tonemapping_fragment>` / `<colorspace_fragment>`는 `ShaderMaterial`에서만 동작한다.
+> `RawShaderMaterial`은 three의 프리픽스 주입을 건너뛰므로 이 청크들이 컴파일 에러를 낸다.
+
+---
+
+## 5. 최소 보일러플레이트 — R3F (완성 코드)
+
+### 5.1 `src/App.tsx`
+
+```tsx
+import { Suspense, lazy, useEffect, useState } from 'react'
+
+const HeroScene = lazy(() => import('./gl/HeroScene'))
+
+function useWebGLReady() {
+  const [ok, setOk] = useState(false)
+  useEffect(() => {
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    const saveData = (navigator as any).connection?.saveData === true
+    const mem = (navigator as any).deviceMemory ?? 8
+    if (reduced || saveData || mem < 4) return
+    try {
+      const c = document.createElement('canvas')
+      const gl = c.getContext('webgl2')
+      if (!gl) return
+      gl.getExtension('WEBGL_lose_context')?.loseContext()
+      setOk(true)
+    } catch { /* noop */ }
+  }, [])
+  return ok
+}
+
+export default function App() {
+  const ready = useWebGLReady()
+
+  return (
+    <section className="hero">
+      <div className="hero__canvas" aria-hidden="true">
+        {ready && (
+          <Suspense fallback={null}>
+            <HeroScene />
+          </Suspense>
+        )}
+      </div>
+      <div className="hero__inner">
+        <h1>Designpaca</h1>
+        <p>WebGL은 장식이고, 콘텐츠는 DOM에 있다.</p>
+      </div>
+    </section>
+  )
+}
+```
+
+### 5.2 `src/gl/HeroScene.tsx`
+
+```tsx
+import * as THREE from 'three'
+import { Canvas, useFrame, useThree, extend, type ThreeElement } from '@react-three/fiber'
+import { shaderMaterial, PerformanceMonitor } from '@react-three/drei'
+import { useMemo, useRef, useState } from 'react'
+
+import vertexShader from '../shaders/fullscreen.vert'
+import fragmentShader from '../shaders/hero.frag'
+
+/* ---------------------------------------------------------------
+ * 1) drei의 shaderMaterial 로 커스텀 머티리얼을 만든다.
+ *    uniforms의 각 키가 JSX prop 이자 인스턴스 프로퍼티가 된다.
+ * ------------------------------------------------------------- */
+const HeroMaterial = shaderMaterial(
+  {
+    uTime: 0,
+    uResolution: new THREE.Vector2(1, 1),
+    uPointer: new THREE.Vector2(0.5, 0.5),
+    uColorA: new THREE.Color('#4c1d95'),
+    uColorB: new THREE.Color('#0ea5e9'),
+    uColorC: new THREE.Color('#f43f5e'),
+    uIntensity: 1,
+  },
+  vertexShader,
+  fragmentShader
+)
+
+extend({ HeroMaterial })
+
+// R3F v9: 전역 JSX 네임스페이스가 아니라 ThreeElements 인터페이스를 확장한다
+declare module '@react-three/fiber' {
+  interface ThreeElements {
+    heroMaterial: ThreeElement<typeof HeroMaterial>
+  }
+}
+
+/* ---------------------------------------------------------------
+ * 2) 풀스크린 트라이앵글
+ * ------------------------------------------------------------- */
+function FullscreenTriangle() {
+  const matRef = useRef<THREE.ShaderMaterial & { uTime: number }>(null!)
+  const { size, viewport } = useThree()
+  const pointer = useRef(new THREE.Vector2(0.5, 0.5))
+
+  const geometry = useMemo(() => {
+    const g = new THREE.BufferGeometry()
+    g.setAttribute('position', new THREE.BufferAttribute(
+      new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]), 3))
+    g.setAttribute('uv', new THREE.BufferAttribute(
+      new Float32Array([0, 0, 2, 0, 0, 2]), 2))
+    return g
+  }, [])
+
+  useFrame((state, delta) => {
+    const m = matRef.current
+    if (!m) return
+    m.uTime = state.clock.elapsedTime
+    ;(m as any).uResolution.set(size.width * viewport.dpr, size.height * viewport.dpr)
+    pointer.current.set(state.pointer.x * 0.5 + 0.5, state.pointer.y * 0.5 + 0.5)
+    ;(m as any).uPointer.lerp(pointer.current, 1 - Math.pow(0.001, delta))
+  })
+
+  return (
+    <mesh geometry={geometry} frustumCulled={false}>
+      <heroMaterial
+        ref={matRef}
+        key={HeroMaterial.key}   // HMR 시 머티리얼 재생성
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  )
+}
+
+/* ---------------------------------------------------------------
+ * 3) Canvas
+ * ------------------------------------------------------------- */
+export default function HeroScene() {
+  const [dpr, setDpr] = useState(1.5)
+
+  return (
+    <Canvas
+      // dpr 은 [min, max] 배열도 되지만, PerformanceMonitor 로 제어할 땐 숫자로 둔다
+      dpr={dpr}
+      // 플랫 2D 셰이더면 톤매핑 없음이 정확하다 (flat = NoToneMapping)
+      flat
+      gl={{
+        antialias: false,
+        alpha: false,
+        powerPreference: 'high-performance',
+        stencil: false,
+      }}
+      camera={{ position: [0, 0, 5], fov: 45 }}
+      style={{ position: 'absolute', inset: 0 }}
+    >
+      <PerformanceMonitor
+        onIncline={() => setDpr(Math.min(2, window.devicePixelRatio))}
+        onDecline={() => setDpr(1)}
+      />
+      <FullscreenTriangle />
+    </Canvas>
+  )
+}
+```
+
+### 5.3 Canvas 기본값 치트시트
+
+| prop | 기본값 | 실무 권장 |
+|---|---|---|
+| `dpr` | `[1, 2]` | 배경 셰이더면 `[1, 1.5]`, 3D 모델이면 `[1, 2]` |
+| `camera` | `{ fov: 75, near: 0.1, far: 1000, position: [0,0,5] }` | far를 씬 크기에 맞게 줄여라(깊이 정밀도) |
+| `frameloop` | `'always'` | 정적 씬은 `'demand'` |
+| `shadows` | `false` | 랜딩페이지에선 대부분 `false` + baked/ContactShadows |
+| `flat` | `false` | 2D 셰이더 배경이면 `true` (= `NoToneMapping`) |
+| `linear` | `false` | 거의 항상 `false` (색공간은 자동 관리에 맡긴다) |
+| `legacy` | `false` | 절대 `true` 쓰지 마라 (r152 이전 색관리로 회귀) |
+| `gl` | `{ antialias:true, alpha:true, powerPreference:'high-performance' }` | 히어로 배경은 `alpha:false, antialias:false` |
+| `eventSource` | `gl.domElement.parentNode` | 캔버스가 `pointer-events:none`이면 상위 DOM으로 지정 |
+| `resize` | `{ scroll: true, debounce: { scroll: 50, resize: 0 } }` | 모바일 주소창 리사이즈 튐이 심하면 `scroll:false` |
+
+R3F Canvas는 기본으로 `outputColorSpace = SRGBColorSpace`, `toneMapping = ACESFilmicToneMapping`을 설정한다.
+**플랫한 그라디언트/UI성 셰이더에 ACES가 걸리면 색이 죽는다** → `flat` 사용.
+
+---
+
+## 6. r150 → r185 브레이킹 체인지 지도 (웹디자인 작업에 영향 있는 것만)
+
+| 버전 | 변경 | 대응 |
+|---|---|---|
+| **r152** | `outputEncoding` → `outputColorSpace`(기본 `SRGBColorSpace`), `Texture.encoding` → `.colorSpace`, `ColorManagement.enabled` 기본 `true`, `uv2/uv3/uv4` → `uv1/uv2/uv3` | 컬러 텍스처에 `tex.colorSpace = THREE.SRGBColorSpace` 수동 지정. 노멀/러프니스맵은 지정하지 말 것 |
+| **r153** | 포스트프로세싱 렌더타깃 기본 타입 `HalfFloatType` | — |
+| **r154** | 셰이더 청크 `encodings_fragment` → `colorspace_fragment`, `output_fragment` → `opaque_fragment` | 커스텀 셰이더의 `#include` 이름 교체 |
+| **r155** | `useLegacyLights` 기본 `false`. 조명이 물리 단위로 | 기존 라이트 intensity를 재조정(대체로 크게 올려야 함) |
+| **r157** | GLSL `GeometricContext` struct 제거 | 커스텀 라이트 셰이더 수정 |
+| **r158** | 쿼터니언은 정규화 전제. bumpScale 스케일 불변 | — |
+| **r160** | `HBAOPass` → `GTAOPass` | — |
+| **r161** | `build/three.js`, `three.min.js` **제거**. ESM만 | `<script src>` 방식 중단. importmap 또는 번들러 사용 |
+| **r162** | `WebGLMultipleRenderTargets` 제거(→ `count` 옵션) | MRT 코드 수정 |
+| **r163** | **WebGL1 지원 종료**, `stencil` 기본 `false`, `TextGeometry.height` → `depth`, `Scene.environmentIntensity` 추가 | 스텐실 쓰면 명시적으로 `stencil:true` |
+| **r165** | `useLegacyLights` **완전 제거** | — |
+| **r167** | WebGPU/TSL import 경로 재편 | — |
+| **r169** | `PackedPhongMaterial`, `SDFGeometryGenerator` 등 제거. `Controls.activate/deactivate` → `connect/disconnect` | — |
+| **r170** | `Material.type` static화, `CinematicCamera` 제거 | 커스텀 머티리얼에서 `type` 덮어쓰기 금지 |
+| **r171** | `three/webgpu`, `three/tsl` 서브패스 확정. **WebGPURenderer 프로덕션 레디** | — |
+| **r175** | `Controls.connect()`가 DOM 엘리먼트 인자 요구 | `controls.connect(renderer.domElement)` |
+| **r176** | `CapsuleGeometry`의 `length` → `height` | — |
+| **r177** | `ColorManagement.fromWorkingColorSpace()` → `workingToColorSpace()`, `toWorkingColorSpace()` → `colorSpaceToWorking()` | — |
+| **r178** | `MultiplyBlending`/`SubtractiveBlending`이 `premultipliedAlpha = true` 요구 | 블렌딩 쓰는 파티클 확인 |
+| **r179** | `Timer`가 코어로 이동(`three`에서 직접 import), `TRAAPassNode` → `TRAANode`, TSL `label()` → `setName()` | — |
+| **r180** | `RGBELoader` → **`HDRLoader`**, `RGBMLoader` 제거, resolution 프로퍼티가 스칼라 `resolutionScale` | HDRI 로딩 코드 이름 변경 |
+| **r181** | PBR 간접 스페큘러 개선 → 거친 재질이 밝아짐. 셰이더 상수 `PI2` → `TWO_PI` | 룩 재조정 |
+| **r182** | `PCFSoftShadowMap`(WebGL) deprecated → `PCFShadowMap`. `renderAsync()` 등 async 메서드 deprecated | — |
+| **r183** | `PostProcessing` → `RenderPipeline`. **`Clock` deprecated → `Timer`**. `MeshPostProcessingMaterial` 제거 | `new THREE.Clock()` 대신 `new THREE.Timer()` 또는 `setAnimationLoop(t)` 인자 사용 |
+| **r184** | `FBXLoader`가 +Z-up을 +Y-up으로 자동 변환. `FileLoader.load()` 반환값 없음 | — |
+| **r185** | WebGPU premultiplied alpha 구현 변경, `AnamorphicNode` 제거, `DRACOLoader.setDecoderConfig()` deprecated(WASM 필수화 예정) | DRACO 디코더는 WASM 버전 사용 |
+
+### 실전 규칙 3개
+
+1. **`THREE.Clock` 쓰지 마라** [r183+ deprecated]. `renderer.setAnimationLoop((timeMs) => ...)`의 인자를 쓰거나 `new THREE.Timer()`를 쓴다.
+2. **컬러 텍스처는 항상 `colorSpace` 명시** [r152+]. R3F v9는 자동 지정을 제거했다.
+   ```js
+   const tex = await new THREE.TextureLoader().loadAsync('/img.jpg')
+   tex.colorSpace = THREE.SRGBColorSpace   // 컬러맵
+   // normalMap / roughnessMap / aoMap / displacementMap 은 지정하지 않는다 (LinearSRGB)
+   ```
+3. **HDRI는 `HDRLoader`** [r180+]. `RGBELoader`라는 이름은 사라졌다.
+   ```js
+   import { HDRLoader } from 'three/addons/loaders/HDRLoader.js'
+   ```
+
+---
+
+## 7. 색공간 규칙 (r152+) — 한 장 요약
+
+```
+[입력]                        [작업 공간]           [출력]
+sRGB 텍스처 ─ colorSpace ──┐
+CSS/hex 색 ─ THREE.Color ──┼→ Linear-sRGB ─ toneMapping ─→ outputColorSpace(sRGB) ─→ 화면
+데이터 텍스처(노멀 등) ─────┘   (셰이더 연산)
+```
+
+| 대상 | 설정 |
+|---|---|
+| 컬러/알베도 텍스처 | `texture.colorSpace = THREE.SRGBColorSpace` |
+| 노멀·러프니스·메탈니스·AO·디스플레이스먼트 | 건드리지 않음 (기본 `NoColorSpace`/`LinearSRGBColorSpace`) |
+| `new THREE.Color('#ff0000')` | 자동으로 Linear-sRGB에 저장됨 → 셰이더 uniform으로 그대로 넘기면 정확 |
+| 셰이더에서 하드코딩한 `vec3(1.0, 0.0, 0.0)` | **linear 값**이다. sRGB hex를 그대로 넣으면 색이 틀린다 → JS에서 `THREE.Color`로 넘겨라 |
+| 커스텀 fragment 마지막 줄 | `#include <tonemapping_fragment>` → `#include <colorspace_fragment>` 순서 |
+| 포스트프로세싱 사용 시 | 인라인 톤매핑은 화면 렌더에만 적용됨. `OutputPass`(또는 pp 라이브러리의 ToneMapping/Output)를 체인 끝에 둔다 |
+
+---
+
+## 8. WebGPU / TSL — 지금 써야 하나?
+
+### 현황
+- **r171(2025-09)부터 `WebGPURenderer`가 프로덕션 레디**로 선언됨. `import { WebGPURenderer } from 'three/webgpu'`, 미지원 브라우저에서 **WebGL2로 자동 폴백**.
+- Safari 26(2025-09)이 WebGPU를 지원하면서 Chrome 113+/Edge/Firefox 141+/Safari 26+ 로 **주요 브라우저 커버리지 완성**.
+- **TSL(Three Shading Language)**: JS로 셰이더 그래프를 작성하면 WGSL/GLSL로 동시 컴파일. `three/tsl`에서 import.
+- 컴퓨트 셰이더로 100만+ 파티클 가능 (WebGL Points 실용 한계 ~5~10만).
+
+### 판단 기준
+
+| 쓴다 | 안 쓴다 |
+|---|---|
+| 파티클 10만 개 이상, GPU 시뮬레이션이 핵심 | 히어로 배경 셰이더 1장 |
+| 드로우콜 수천 개 규모 씬 | DOM 이미지 왜곡, 스크롤 연출 |
+| 노드 기반 머티리얼을 조합해야 함 | 기존 GLSL 자산을 재활용해야 함 |
+| 2026년 이후까지 유지할 제품 | 3개월짜리 캠페인 사이트 |
+
+### 현실적 리스크
+- **`@react-three/postprocessing` / `postprocessing`은 WebGL 전용**이다. WebGPU로 가면 포스트프로세싱은 three 내장 `RenderPipeline`[r183+] + TSL 노드로 다시 짜야 한다.
+- drei 컴포넌트 상당수가 `ShaderMaterial`(GLSL) 기반이라 WebGPU에서 안 돈다.
+- 폴백 경로(WebGL2)에서 TSL이 GLSL로 트랜스파일되지만, 성능/룩이 항상 동일하진 않다. **두 경로를 다 테스트해야 한다.**
+
+### 결론 (designpaca 기본값)
+**WebGL2 + GLSL을 기본으로 한다.** 랜딩페이지 효과의 95%는 WebGL2로 충분하고, 생태계(포스트프로세싱·drei)가 여기 붙어 있다.
+WebGPU는 "파티클 100만"처럼 명확한 이유가 있을 때만 별도 씬으로 분리해서 쓴다.
+
+### TSL 맛보기 (참고용)
+
+```js
+import { WebGPURenderer, MeshStandardNodeMaterial } from 'three/webgpu'
+import { Fn, uniform, time, sin, positionLocal, normalLocal, vec3, float } from 'three/tsl'
+
+const renderer = new WebGPURenderer({ canvas, antialias: false })
+await renderer.init()          // [r182+] 대부분 자동이지만 명시 호출이 안전
+
+const uAmp  = uniform(0.25)
+const uFreq = uniform(3.0)
+
+const wave = sin(positionLocal.x.mul(uFreq).add(time))
+const material = new MeshStandardNodeMaterial()
+material.positionNode = positionLocal.add(normalLocal.mul(wave.mul(uAmp)))
+material.colorNode = vec3(0.3, 0.4, 0.9).add(wave.mul(0.5))
+```
+
+---
+
+## 9. 권장 폴더 구조
+
+```
+src/
+├─ main.js|tsx
+├─ gl/
+│  ├─ Stage.js               # 렌더 루프 컨테이너 (vanilla)
+│  ├─ loaders.js             # GLTF/DRACO/KTX2/meshopt 싱글턴
+│  ├─ FBO.js                 # ping-pong 렌더타깃 유틸
+│  └─ scenes/
+│     ├─ hero.js
+│     ├─ gallery.js
+│     └─ product.js
+├─ shaders/
+│  ├─ lib/                   # 재사용 GLSL 청크
+│  │  ├─ noise.glsl
+│  │  ├─ curl.glsl
+│  │  ├─ uv.glsl
+│  │  └─ color.glsl
+│  ├─ fullscreen.vert
+│  ├─ hero.frag
+│  └─ image.vert / image.frag
+└─ styles/
+```
+
+- **셰이더는 반드시 별도 파일**로. 템플릿 리터럴 안에 넣으면 신택스 하이라이팅·`#include`·핫리로드를 전부 잃는다.
+- `shaders/lib/`은 `#include './lib/noise.glsl'`로 재사용. `vite-plugin-glsl`이 인라인해준다.
+- 로더는 **싱글턴**으로. `DRACOLoader`를 컴포넌트마다 새로 만들면 WASM 디코더를 반복 다운로드한다.
+
+```js
+// src/gl/loaders.js — 로더 싱글턴 (완성 코드)
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
+import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'
+import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js'
+import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js'
+
+let _gltf = null
+let _draco = null
+let _ktx2 = null
+
+/** @param {THREE.WebGLRenderer} renderer KTX2 지원 감지에 필요 */
+export function getGLTFLoader(renderer) {
+  if (_gltf) return _gltf
+
+  _draco = new DRACOLoader()
+  // decoder는 자체 호스팅 권장. node_modules/three/examples/jsm/libs/draco/ 를 public/에 복사
+  _draco.setDecoderPath('/decoders/draco/')
+  _draco.preload()
+
+  _ktx2 = new KTX2Loader()
+  _ktx2.setTranscoderPath('/decoders/basis/')
+  _ktx2.detectSupport(renderer)   // 반드시 renderer 생성 후 호출
+
+  _gltf = new GLTFLoader()
+  _gltf.setDRACOLoader(_draco)
+  _gltf.setKTX2Loader(_ktx2)
+  _gltf.setMeshoptDecoder(MeshoptDecoder)
+  return _gltf
+}
+
+export function disposeLoaders() {
+  _draco?.dispose()
+  _ktx2?.dispose()
+  _gltf = _draco = _ktx2 = null
+}
+```
+
+디코더 파일 복사 스크립트:
+
+```json
+// package.json
+{
+  "scripts": {
+    "postinstall": "node scripts/copy-decoders.mjs"
+  }
+}
+```
+
+```js
+// scripts/copy-decoders.mjs
+import { cp, mkdir } from 'node:fs/promises'
+const base = 'node_modules/three/examples/jsm/libs'
+await mkdir('public/decoders', { recursive: true })
+await cp(`${base}/draco`, 'public/decoders/draco', { recursive: true })
+await cp(`${base}/basis`, 'public/decoders/basis', { recursive: true })
+console.log('decoders copied')
+```
+
+---
+
+## 10. 셋업 체크리스트
+
+- [ ] `three` 버전을 **0.185.1로 핀**했다 (postprocessing 상한 회피)
+- [ ] `overrides`/`resolutions`로 three 중복 설치를 막았다
+- [ ] `vite-plugin-glsl`을 설정하고 셰이더를 별도 파일로 분리했다
+- [ ] 캔버스에 `aria-hidden="true"`와 CSS 폴백 배경을 넣었다
+- [ ] `hasWebGL2()` 프로브 + `saveData` + `deviceMemory` 체크로 게이팅했다
+- [ ] three를 **동적 import**로 지연 로드했다 (IntersectionObserver)
+- [ ] DPR을 `min(devicePixelRatio, 2)`로 클램프했다
+- [ ] `visibilitychange`와 `IntersectionObserver`로 렌더 루프를 멈춘다
+- [ ] `prefers-reduced-motion`에서 `renderOnce()` 한 장만 그린다
+- [ ] `webglcontextlost`에 `preventDefault()`를 걸었다
+- [ ] 언마운트/페이지 이탈 시 `dispose()`를 호출한다
+- [ ] 컬러 텍스처에 `colorSpace = SRGBColorSpace`를 지정했다
+- [ ] 플랫 2D 셰이더면 `toneMapping = NoToneMapping`(R3F는 `flat`)을 썼다
+- [ ] DRACO/KTX2 디코더를 자체 호스팅하고 로더를 싱글턴화했다
diff --git a/research/three/02-patterns.md b/research/three/02-patterns.md
new file mode 100644
index 0000000..8aae003
--- /dev/null
+++ b/research/three/02-patterns.md
@@ -0,0 +1,3385 @@
+# 02 — 바로 쓸 수 있는 패턴 15개
+
+> 전제: **three 0.185.1**, `Stage` 클래스는 [01-stack-and-setup.md](./01-stack-and-setup.md) §4.2 참고.
+> R3F 예제는 **@react-three/fiber 9.7 / drei 10.7 / React 19** 기준.
+> 모든 코드는 생략 없는 완성 코드다. 파일 경로 주석을 그대로 따라 배치하면 동작한다.
+>
+> **비용 표기**
+> - `번들`: 이 패턴이 추가로 요구하는 gzip 크기 (three 코어 ~90KB는 별도)
+> - `GPU`: 저사양 모바일(iPhone SE / Adreno 6xx) 기준 부하. 낮음 / 중간 / 높음 / 매우높음
+> - `프래그먼트 비용`: 풀스크린일 때 픽셀당 대략적 ALU 부담
+
+---
+
+## 목차
+
+| # | 패턴 | 스택 | GPU |
+|---|---|---|---|
+| [P1](#p1--유동-메시-그라디언트-vertex-displacement) | 유동 메시 그라디언트 (vertex displacement) | Vanilla | 낮음 |
+| [P2](#p2--sdf-도트그리드-배경--마우스-트레일) | SDF 도트 그리드 배경 + 마우스 트레일 | Vanilla | 낮음 |
+| [P3](#p3--파티클-필드-points--커스텀-셰이더) | 파티클 필드 (Points + 커스텀 셰이더) | Vanilla | 중간 |
+| [P4](#p4--gpgpu-플로우필드-파티클-pingpong-fbo--curl-noise) | GPGPU 플로우필드 파티클 (ping-pong FBO) | Vanilla | 높음 |
+| [P5](#p5--instancedmesh-그리드-웨이브) | InstancedMesh 그리드 웨이브 | Vanilla | 중간 |
+| [P6](#p6--스크롤-카메라-리그-lenis--gsap-scrolltrigger) | 스크롤 카메라 리그 (Lenis + ScrollTrigger) | Vanilla | 낮음 |
+| [P7](#p7--r3f-scrollcontrols-스크롤-씬) | R3F ScrollControls 스크롤 씬 | R3F | 낮음 |
+| [P8](#p8--dom-동기화-이미지-플레인--hover-왜곡--rgb-shift) | DOM 동기화 이미지 플레인 + hover 왜곡 | Vanilla | 중간 |
+| [P9](#p9--이미지-전환-displacement-map-transition) | 이미지 전환 (displacement transition) | Vanilla | 낮음 |
+| [P10](#p10--유리굴절-meshtransmissionmaterial--dispersion) | 유리/굴절 (Transmission + dispersion) | R3F / Vanilla | 매우높음 |
+| [P11](#p11--3d-텍스트-troika--디스플레이스먼트-리빌) | 3D 텍스트 (troika) + 디스플레이스먼트 리빌 | Vanilla | 낮음 |
+| [P12](#p12--포스트프로세싱-스택--커스텀-이펙트) | 포스트프로세싱 스택 + 커스텀 이펙트 | 양쪽 | 중간~높음 |
+| [P13](#p13--gltf-제품-씬-draco--ktx2--환경광--스크롤-회전) | GLTF 제품 씬 (DRACO/KTX2 + 스크롤 회전) | R3F | 중간 |
+| [P14](#p14--마우스-인터랙션-툴킷-raycast--lerp--trail) | 마우스 인터랙션 툴킷 (raycast/lerp/trail) | Vanilla | 낮음 |
+| [P15](#p15--노이즈-디졸브-리빌전환) | 노이즈 디졸브 리빌/전환 | 양쪽 | 낮음 |
+
+---
+
+## P1 — 유동 메시 그라디언트 (vertex displacement)
+
+**효과**: Stripe 홈페이지류의 "용암 램프" 그라디언트. 세그먼트가 많은 평면을 노이즈로 물결치게 하고, 정점 높이로 색을 섞는다.
+프래그먼트 전용 그라디언트(01 §4.6)보다 **깊이감과 결(silhouette)** 이 살아난다.
+
+**언제 쓰나**
+- 히어로 섹션 배경, 풀블리드 CTA 섹션
+- 브랜드 컬러 2~4개를 유기적으로 섞고 싶을 때
+- 프래그먼트 노이즈만으로는 평평해 보일 때
+
+**비용**: 번들 +0KB · GPU **낮음** · 정점 128×128 = 16,384 vtx (드로우콜 1) · 프래그먼트 비용 매우 낮음(노이즈가 vertex에 있음)
+
+**조절 파라미터**
+
+| uniform | 범위 | 의미 |
+|---|---|---|
+| `uAmplitude` | 0.05 ~ 0.6 | 물결 높이. 0.3 넘으면 실루엣이 거칠어짐 |
+| `uFrequency` | 0.5 ~ 4.0 | 노이즈 스케일. 클수록 잔물결 |
+| `uSpeed` | 0.02 ~ 0.4 | 시간 진행 속도. 0.1 이하가 "고급스러움" |
+| `uOctaves`(define) | 1 ~ 4 | FBM 옥타브. 3 이상은 모바일에서 체감 비용 |
+| `SEGMENTS` | 48 ~ 256 | 평면 세그먼트. 모바일 96, 데스크톱 160 권장 |
+| `uColorA/B/C` | — | `THREE.Color` (자동으로 linear 변환됨) |
+
+### 코드
+
+```js
+// src/scenes/meshGradient.js
+import * as THREE from 'three'
+import Stage from '../gl/Stage.js'
+import vert from '../shaders/meshGradient.vert'
+import frag from '../shaders/meshGradient.frag'
+
+export default function mountMeshGradient(canvas, opts = {}) {
+  const {
+    colors = ['#3b0764', '#2563eb', '#f472b6'],
+    amplitude = 0.28,
+    frequency = 1.4,
+    speed = 0.09,
+    reduced = false,
+  } = opts
+
+  const stage = new Stage({ canvas, dprMax: 1.75, antialias: false, alpha: false })
+
+  // 카메라를 위에서 비스듬히 내려다보게 배치 → 물결의 실루엣이 보인다
+  stage.camera.fov = 30
+  stage.camera.position.set(0, 1.35, 3.2)
+  stage.camera.lookAt(0, 0, 0)
+  stage.camera.updateProjectionMatrix()
+
+  const isMobile = window.matchMedia('(max-width: 768px)').matches
+  const SEG = isMobile ? 96 : 160
+
+  const geometry = new THREE.PlaneGeometry(6, 6, SEG, SEG)
+
+  const uniforms = {
+    uTime:      { value: 0 },
+    uAmplitude: { value: amplitude },
+    uFrequency: { value: frequency },
+    uSpeed:     { value: speed },
+    uColorA:    { value: new THREE.Color(colors[0]) },
+    uColorB:    { value: new THREE.Color(colors[1]) },
+    uColorC:    { value: new THREE.Color(colors[2]) },
+    uPointer:   { value: new THREE.Vector2(0, 0) },
+  }
+
+  const material = new THREE.ShaderMaterial({
+    vertexShader: vert,
+    fragmentShader: frag,
+    uniforms,
+    defines: { OCTAVES: isMobile ? 2 : 3 },
+    side: THREE.DoubleSide,
+  })
+
+  const mesh = new THREE.Mesh(geometry, material)
+  mesh.rotation.x = -Math.PI * 0.5   // 바닥에 눕힌다
+  stage.scene.add(mesh)
+
+  const target = new THREE.Vector2()
+  const onPointer = (e) => {
+    target.set(
+      (e.clientX / window.innerWidth) * 2 - 1,
+      -(e.clientY / window.innerHeight) * 2 + 1
+    )
+  }
+  window.addEventListener('pointermove', onPointer, { passive: true })
+
+  stage.add((t, dt) => {
+    uniforms.uTime.value = t
+    uniforms.uPointer.value.lerp(target, 1 - Math.pow(0.002, dt))
+    // 카메라가 아주 미세하게 흔들리면 "살아있다"는 인상이 생긴다
+    stage.camera.position.x = uniforms.uPointer.value.x * 0.12
+    stage.camera.position.y = 1.35 + uniforms.uPointer.value.y * 0.06
+    stage.camera.lookAt(0, 0, 0)
+  })
+
+  if (reduced) stage.renderOnce()
+  else stage.start()
+
+  return () => {
+    window.removeEventListener('pointermove', onPointer)
+    stage.dispose()
+  }
+}
+```
+
+```glsl
+// src/shaders/meshGradient.vert
+#include './lib/noise.glsl'   // snoise(vec3) 정의. 03-shaders.md §4 참조
+
+uniform float uTime;
+uniform float uAmplitude;
+uniform float uFrequency;
+uniform float uSpeed;
+uniform vec2  uPointer;
+
+varying float vElevation;
+varying vec2  vUv;
+
+#ifndef OCTAVES
+  #define OCTAVES 3
+#endif
+
+float fbm(vec3 p) {
+  float sum = 0.0;
+  float amp = 0.5;
+  float freq = 1.0;
+  for (int i = 0; i < OCTAVES; i++) {
+    sum += snoise(p * freq) * amp;
+    freq *= 2.02;
+    amp  *= 0.5;
+  }
+  return sum;
+}
+
+void main() {
+  vUv = uv;
+
+  vec3 pos = position;
+  float t = uTime * uSpeed;
+
+  // 도메인 워프: 노이즈로 좌표를 한 번 흔든 뒤 다시 노이즈를 샘플
+  vec3 q = vec3(pos.xy * uFrequency, t);
+  float warp = fbm(q) * 0.45;
+  float elevation = fbm(vec3(pos.xy * uFrequency + warp, t * 1.3));
+
+  // 마우스 근처를 부풀린다
+  float d = distance(pos.xy, uPointer * 2.4);
+  elevation += exp(-d * d * 1.1) * 0.35;
+
+  pos.z += elevation * uAmplitude;
+  vElevation = elevation;
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+}
+```
+
+```glsl
+// src/shaders/meshGradient.frag
+precision highp float;
+
+uniform vec3 uColorA;
+uniform vec3 uColorB;
+uniform vec3 uColorC;
+
+varying float vElevation;
+varying vec2  vUv;
+
+void main() {
+  float e = clamp(vElevation * 0.5 + 0.5, 0.0, 1.0);
+
+  vec3 col = mix(uColorA, uColorB, smoothstep(0.15, 0.62, e));
+  col = mix(col, uColorC, smoothstep(0.58, 0.96, e));
+
+  // 가장자리를 어둡게 → 평면 경계가 안 보이게
+  float edge = smoothstep(0.0, 0.18, vUv.x) * smoothstep(1.0, 0.82, vUv.x)
+             * smoothstep(0.0, 0.18, vUv.y) * smoothstep(1.0, 0.82, vUv.y);
+  col *= mix(0.35, 1.0, edge);
+
+  // 밴딩 제거
+  float dither = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453);
+  col += (dither - 0.5) / 255.0;
+
+  gl_FragColor = vec4(col, 1.0);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+```
+
+**튜닝 노트**
+- 세그먼트를 늘리는 대신 `uFrequency`를 낮춰라. 정점 수 2배는 항상 손해다.
+- 모바일에서 `OCTAVES 2`, `SEG 96`, `dprMax 1.5`로 내리면 60fps가 유지된다.
+- 정점 변위는 노멀을 깨뜨린다. 조명을 쓸 거면 `computeVertexNormals()`가 아니라 셰이더에서 유한차분으로 노멀을 재계산해야 한다(03 §6.3).
+
+---
+
+## P2 — SDF 도트 그리드 배경 + 마우스 트레일
+
+**효과**: 화면을 격자로 나누고 각 셀에 SDF 원을 그린다. 마우스 트레일 텍스처를 샘플해 도트 크기/밝기를 부풀린다.
+Codrops의 "Subtle Shader Background" 계열. **매우 저렴하면서 고급스러운** 기본기.
+
+**언제 쓰나**
+- 텍스트가 위에 올라가는 배경 (가독성을 해치지 않음)
+- 다크 테마 랜딩페이지의 "테크" 인상
+- 파티클을 쓰고 싶지만 예산이 없을 때
+
+**비용**: 번들 +0KB · GPU **낮음** · 드로우콜 1 · 트레일 텍스처는 128×128 2D 캔버스 (CPU 비용 무시 가능)
+
+**조절 파라미터**
+
+| uniform | 범위 | 의미 |
+|---|---|---|
+| `uGridSize` | 20 ~ 120 | 화면 짧은 축 기준 셀 개수 |
+| `uDotSize` | 0.06 ~ 0.3 | 셀 내 도트 반경(셀 크기 대비) |
+| `uDotOpacity` | 0.1 ~ 1.0 | 기본 밝기 |
+| `uTrailStrength` | 0 ~ 4 | 트레일이 도트를 얼마나 키우는가 |
+| trail `radius` | 0.05 ~ 0.2 | 브러시 반경(정규화) |
+| trail `decay` | 0.9 ~ 0.99 | 잔상 길이. 클수록 오래 남음 |
+
+### 코드
+
+```js
+// src/gl/TrailTexture.js — 2D 캔버스 기반 마우스 트레일 (vanilla)
+import * as THREE from 'three'
+
+export default class TrailTexture {
+  /**
+   * @param {object} o
+   * @param {number} [o.size=128]     트레일 버퍼 해상도
+   * @param {number} [o.radius=0.1]   브러시 반경(0~1 정규화)
+   * @param {number} [o.decay=0.95]   프레임당 감쇠 (1에 가까울수록 길게 남음)
+   * @param {number} [o.intensity=1]
+   */
+  constructor({ size = 128, radius = 0.1, decay = 0.95, intensity = 1 } = {}) {
+    this.size = size
+    this.radius = radius
+    this.decay = decay
+    this.intensity = intensity
+
+    this.canvas = document.createElement('canvas')
+    this.canvas.width = this.canvas.height = size
+    this.ctx = this.canvas.getContext('2d', { willReadFrequently: false })
+    this.ctx.fillStyle = '#000'
+    this.ctx.fillRect(0, 0, size, size)
+
+    this.texture = new THREE.CanvasTexture(this.canvas)
+    this.texture.minFilter = THREE.LinearFilter
+    this.texture.magFilter = THREE.LinearFilter
+    this.texture.wrapS = this.texture.wrapT = THREE.ClampToEdgeWrapping
+    // 트레일은 데이터다. 색공간 변환을 하면 안 된다
+    this.texture.colorSpace = THREE.NoColorSpace
+
+    this._points = []
+  }
+
+  /** uv: 0~1, y는 위가 1 */
+  addPoint(u, v) {
+    this._points.push({ x: u * this.size, y: (1 - v) * this.size, life: 1 })
+    if (this._points.length > 40) this._points.shift()
+  }
+
+  update() {
+    const { ctx, size } = this
+
+    // 1) 전체를 조금씩 검게 → 지수 감쇠
+    ctx.globalCompositeOperation = 'source-over'
+    ctx.fillStyle = `rgba(0, 0, 0, ${1 - this.decay})`
+    ctx.fillRect(0, 0, size, size)
+
+    // 2) 브러시를 additive 로 찍는다
+    ctx.globalCompositeOperation = 'lighter'
+    const r = this.radius * size
+    for (let i = this._points.length - 1; i >= 0; i--) {
+      const p = this._points[i]
+      const g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, r)
+      const a = p.life * this.intensity
+      g.addColorStop(0, `rgba(255,255,255,${a})`)
+      g.addColorStop(1, 'rgba(255,255,255,0)')
+      ctx.fillStyle = g
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, r, 0, Math.PI * 2)
+      ctx.fill()
+
+      p.life *= 0.86
+      if (p.life < 0.01) this._points.splice(i, 1)
+    }
+    ctx.globalCompositeOperation = 'source-over'
+
+    this.texture.needsUpdate = true
+  }
+
+  dispose() {
+    this.texture.dispose()
+    this._points.length = 0
+  }
+}
+```
+
+```js
+// src/scenes/dotGrid.js
+import * as THREE from 'three'
+import Stage from '../gl/Stage.js'
+import TrailTexture from '../gl/TrailTexture.js'
+import vert from '../shaders/fullscreen.vert'
+import frag from '../shaders/dotGrid.frag'
+
+export default function mountDotGrid(canvas, opts = {}) {
+  const {
+    bgColor = '#07070a',
+    dotColor = '#8b5cf6',
+    gridSize = 56,
+    dotSize = 0.13,
+    reduced = false,
+  } = opts
+
+  const stage = new Stage({ canvas, dprMax: 1.5, antialias: false })
+  const trail = new TrailTexture({ size: 128, radius: 0.09, decay: 0.94 })
+
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.BufferAttribute(
+    new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]), 3))
+  geometry.setAttribute('uv', new THREE.BufferAttribute(
+    new Float32Array([0, 0, 2, 0, 0, 2]), 2))
+
+  const uniforms = {
+    uTime:          { value: 0 },
+    uResolution:    { value: new THREE.Vector2(1, 1) },
+    uTrail:         { value: trail.texture },
+    uBgColor:       { value: new THREE.Color(bgColor) },
+    uDotColor:      { value: new THREE.Color(dotColor) },
+    uGridSize:      { value: gridSize },
+    uDotSize:       { value: dotSize },
+    uDotOpacity:    { value: 0.5 },
+    uTrailStrength: { value: 2.2 },
+  }
+
+  const mesh = new THREE.Mesh(geometry, new THREE.ShaderMaterial({
+    vertexShader: vert, fragmentShader: frag, uniforms,
+    depthTest: false, depthWrite: false,
+  }))
+  mesh.frustumCulled = false
+  stage.scene.add(mesh)
+
+  stage.onResize = (w, h, dpr) => uniforms.uResolution.value.set(w * dpr, h * dpr)
+  stage.onResize(stage.size.w, stage.size.h, stage.size.dpr)
+
+  const onPointer = (e) => {
+    trail.addPoint(e.clientX / window.innerWidth, 1 - e.clientY / window.innerHeight)
+  }
+  if (!reduced) window.addEventListener('pointermove', onPointer, { passive: true })
+
+  stage.add((t) => {
+    uniforms.uTime.value = t
+    trail.update()
+  })
+
+  if (reduced) stage.renderOnce()
+  else stage.start()
+
+  return () => {
+    window.removeEventListener('pointermove', onPointer)
+    trail.dispose()
+    stage.dispose()
+  }
+}
+```
+
+```glsl
+// src/shaders/dotGrid.frag
+precision highp float;
+
+uniform float     uTime;
+uniform vec2      uResolution;
+uniform sampler2D uTrail;
+uniform vec3      uBgColor;
+uniform vec3      uDotColor;
+uniform float     uGridSize;
+uniform float     uDotSize;
+uniform float     uDotOpacity;
+uniform float     uTrailStrength;
+
+varying vec2 vUv;
+
+// 원 SDF: 중심에서의 거리 - 반지름 (음수면 내부)
+float sdfCircle(vec2 p, float r) {
+  return length(p - 0.5) - r;
+}
+
+void main() {
+  vec2 screenUv = gl_FragCoord.xy / uResolution;
+
+  // 종횡비 보정: 짧은 축 기준으로 정사각 셀을 만든다
+  float aspect = uResolution.x / uResolution.y;
+  vec2 uv = screenUv;
+  uv.x *= aspect;
+
+  vec2 grid    = uv * uGridSize;
+  vec2 cellUv  = fract(grid);
+  vec2 cellId  = floor(grid);
+
+  // 셀 중심의 화면 좌표 → 트레일을 셀 단위로 샘플하면 "픽셀화"된 반응이 나온다
+  vec2 cellCenter = (cellId + 0.5) / uGridSize;
+  cellCenter.x /= aspect;
+  float trail = texture2D(uTrail, cellCenter).r;
+
+  // 시간에 따라 흐르는 잔잔한 마스크
+  float wave = sin(uTime * 1.2 - length(screenUv - vec2(0.5, 0.9)) * 9.0) * 0.5 + 0.5;
+  wave *= 0.28;
+
+  float boost = max(trail * uTrailStrength, wave);
+
+  float d = sdfCircle(cellUv, uDotSize * (1.0 + boost * 0.9));
+  float dot0 = smoothstep(0.02, -0.01, d);   // 안티에일리어싱된 원
+
+  // 아래로 갈수록 옅어지는 그라디언트 마스크
+  float fade = smoothstep(0.0, 0.85, 1.0 - screenUv.y);
+  float radial = 1.0 - smoothstep(0.15, 0.95, distance(screenUv, vec2(0.5, 0.62)));
+
+  float alpha = dot0 * uDotOpacity * (fade * 0.55 + radial * 0.65) * (1.0 + boost * 2.0);
+
+  vec3 col = mix(uBgColor, uDotColor, clamp(alpha, 0.0, 1.0));
+
+  gl_FragColor = vec4(col, 1.0);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+```
+
+**R3F 버전**: drei의 `useTrailTexture()`를 쓰면 `TrailTexture` 클래스가 불필요하다.
+
+```tsx
+import { useTrailTexture } from '@react-three/drei'
+
+const [trail, onMove] = useTrailTexture({
+  size: 128, radius: 0.3, maxAge: 500, interpolate: 1,
+  ease: (x: number) => 1 - Math.pow(1 - x, 3),
+})
+// <mesh onPointerMove={onMove}> ... uTrail={trail}
+```
+
+---
+
+## P3 — 파티클 필드 (Points + 커스텀 셰이더)
+
+**효과**: 수만 개의 점을 3D 공간에 뿌리고, 노이즈로 흐르게 하고, 마우스로 밀어낸다. GPU 시뮬레이션 없이 **정적 attribute + 시간 함수**만으로 구현하므로 매우 견고하다.
+
+**언제 쓰나**
+- 히어로 배경의 "먼지/별/입자" 레이어
+- 로고나 텍스트를 파티클로 형성했다가 흩어뜨리기 (attribute에 목표 위치 추가)
+- 파티클이 5만 개 이하이고 상호작용이 단순할 때 → **P4(GPGPU)보다 이걸 써라**
+
+**비용**: 번들 +0KB · GPU **중간** (오버드로우가 주범) · 드로우콜 1 · 3만 파티클 = position/scale/seed attribute 약 **480KB VRAM**
+
+**조절 파라미터**
+
+| 항목 | 범위 | 의미 |
+|---|---|---|
+| `COUNT` | 3,000 ~ 60,000 | 모바일 8,000 / 데스크톱 30,000 권장 |
+| `uSize` | 4 ~ 60 | 기준 포인트 크기(픽셀, DPR 곱해짐) |
+| `uNoiseScale` | 0.2 ~ 2.0 | 흐름의 굵기 |
+| `uNoiseSpeed` | 0.02 ~ 0.3 | 흐름 속도 |
+| `uPointerRadius` | 0.3 ~ 2.0 | 마우스 반발 반경(월드 단위) |
+| `uPointerForce` | 0 ~ 2.0 | 반발 세기 |
+
+> ⚠️ **`gl_PointSize`는 iOS에서 상한(보통 64~256px)이 있다.** 큰 입자가 필요하면 Points 대신 InstancedMesh 쿼드를 써야 한다.
+
+### 코드
+
+```js
+// src/scenes/particleField.js
+import * as THREE from 'three'
+import Stage from '../gl/Stage.js'
+import vert from '../shaders/particles.vert'
+import frag from '../shaders/particles.frag'
+
+/** 부드러운 원형 스프라이트를 코드로 생성 (텍스처 파일 불필요) */
+function makeSpriteTexture(size = 64) {
+  const c = document.createElement('canvas')
+  c.width = c.height = size
+  const ctx = c.getContext('2d')
+  const g = ctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2)
+  g.addColorStop(0.0, 'rgba(255,255,255,1)')
+  g.addColorStop(0.45, 'rgba(255,255,255,0.55)')
+  g.addColorStop(1.0, 'rgba(255,255,255,0)')
+  ctx.fillStyle = g
+  ctx.fillRect(0, 0, size, size)
+  const tex = new THREE.CanvasTexture(c)
+  tex.colorSpace = THREE.NoColorSpace   // 알파 마스크. 색공간 변환 금지
+  return tex
+}
+
+export default function mountParticleField(canvas, opts = {}) {
+  const {
+    colorA = '#a78bfa',
+    colorB = '#22d3ee',
+    reduced = false,
+  } = opts
+
+  const stage = new Stage({ canvas, dprMax: 1.75, antialias: false, alpha: true })
+  stage.camera.fov = 45
+  stage.camera.position.set(0, 0, 6)
+  stage.camera.updateProjectionMatrix()
+
+  const isMobile = window.matchMedia('(max-width: 768px)').matches
+  const COUNT = isMobile ? 8000 : 30000
+
+  const positions = new Float32Array(COUNT * 3)
+  const seeds     = new Float32Array(COUNT)     // 개체별 위상차
+  const scales    = new Float32Array(COUNT)     // 개체별 크기 변주
+
+  for (let i = 0; i < COUNT; i++) {
+    // 원반 형태로 분포 (sqrt 를 써야 중심 쏠림이 없다)
+    const r = Math.sqrt(Math.random()) * 4.2
+    const a = Math.random() * Math.PI * 2
+    positions[i * 3 + 0] = Math.cos(a) * r
+    positions[i * 3 + 1] = (Math.random() - 0.5) * 2.4
+    positions[i * 3 + 2] = Math.sin(a) * r
+    seeds[i]  = Math.random()
+    scales[i] = 0.35 + Math.random() * 0.9
+  }
+
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
+  geometry.setAttribute('aSeed',    new THREE.BufferAttribute(seeds, 1))
+  geometry.setAttribute('aScale',   new THREE.BufferAttribute(scales, 1))
+  geometry.computeBoundingSphere()
+
+  const sprite = makeSpriteTexture(64)
+
+  const uniforms = {
+    uTime:          { value: 0 },
+    uSize:          { value: isMobile ? 18 : 26 },
+    uDpr:           { value: stage.size.dpr },
+    uSprite:        { value: sprite },
+    uColorA:        { value: new THREE.Color(colorA) },
+    uColorB:        { value: new THREE.Color(colorB) },
+    uNoiseScale:    { value: 0.55 },
+    uNoiseSpeed:    { value: 0.12 },
+    uPointer:       { value: new THREE.Vector3() },
+    uPointerRadius: { value: 1.1 },
+    uPointerForce:  { value: 0.9 },
+  }
+
+  const material = new THREE.ShaderMaterial({
+    vertexShader: vert,
+    fragmentShader: frag,
+    uniforms,
+    transparent: true,
+    depthWrite: false,                    // 알파 파티클은 깊이 기록 금지
+    depthTest: true,
+    blending: THREE.AdditiveBlending,     // 밝은 입자. 어두운 배경 전용
+  })
+
+  const points = new THREE.Points(geometry, material)
+  stage.scene.add(points)
+
+  stage.onResize = (w, h, dpr) => { uniforms.uDpr.value = dpr }
+
+  // 마우스를 z=0 평면에 투영해서 월드 좌표로
+  const raycaster = new THREE.Raycaster()
+  const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)
+  const ndc = new THREE.Vector2()
+  const hit = new THREE.Vector3()
+  const targetPointer = new THREE.Vector3()
+
+  const onPointer = (e) => {
+    ndc.set(
+      (e.clientX / window.innerWidth) * 2 - 1,
+      -(e.clientY / window.innerHeight) * 2 + 1
+    )
+    raycaster.setFromCamera(ndc, stage.camera)
+    if (raycaster.ray.intersectPlane(plane, hit)) targetPointer.copy(hit)
+  }
+  if (!reduced) window.addEventListener('pointermove', onPointer, { passive: true })
+
+  stage.add((t, dt) => {
+    uniforms.uTime.value = t
+    uniforms.uPointer.value.lerp(targetPointer, 1 - Math.pow(0.005, dt))
+    points.rotation.y = t * 0.02
+  })
+
+  if (reduced) stage.renderOnce()
+  else stage.start()
+
+  return () => {
+    window.removeEventListener('pointermove', onPointer)
+    sprite.dispose()
+    stage.dispose()
+  }
+}
+```
+
+```glsl
+// src/shaders/particles.vert
+#include './lib/noise.glsl'
+
+uniform float uTime;
+uniform float uSize;
+uniform float uDpr;
+uniform float uNoiseScale;
+uniform float uNoiseSpeed;
+uniform vec3  uPointer;
+uniform float uPointerRadius;
+uniform float uPointerForce;
+
+attribute float aSeed;
+attribute float aScale;
+
+varying float vSeed;
+varying float vDepth;
+
+void main() {
+  vec3 pos = position;
+  float t = uTime * uNoiseSpeed;
+
+  // 3방향 노이즈로 유사 curl 흐름 (진짜 curl은 03 §4.4)
+  float n1 = snoise(vec3(pos * uNoiseScale + vec3(0.0, 0.0, t)));
+  float n2 = snoise(vec3(pos * uNoiseScale + vec3(31.4, 0.0, t)));
+  float n3 = snoise(vec3(pos * uNoiseScale + vec3(0.0, 17.7, t)));
+  pos += vec3(n1, n2, n3) * 0.42;
+
+  // 개체별 부유
+  pos.y += sin(uTime * 0.6 + aSeed * 6.2831) * 0.08;
+
+  // 마우스 반발
+  vec3 toP = pos - uPointer;
+  float d = length(toP);
+  float push = smoothstep(uPointerRadius, 0.0, d) * uPointerForce;
+  pos += normalize(toP + 1e-5) * push;
+
+  vec4 mv = modelViewMatrix * vec4(pos, 1.0);
+  gl_Position = projectionMatrix * mv;
+
+  // 원근 감쇠: 멀수록 작게. -mv.z 는 카메라로부터의 거리
+  gl_PointSize = uSize * aScale * uDpr * (1.0 / max(-mv.z, 0.001));
+
+  vSeed = aSeed;
+  vDepth = clamp((-mv.z - 2.0) / 8.0, 0.0, 1.0);
+}
+```
+
+```glsl
+// src/shaders/particles.frag
+precision mediump float;   // 파티클은 mediump 로 충분. 모바일에서 ~2배 빠르다
+
+uniform sampler2D uSprite;
+uniform vec3 uColorA;
+uniform vec3 uColorB;
+
+varying float vSeed;
+varying float vDepth;
+
+void main() {
+  // gl_PointCoord: 포인트 스프라이트 내부의 0~1 좌표
+  float mask = texture2D(uSprite, gl_PointCoord).a;
+  if (mask < 0.01) discard;   // 얼리 아웃으로 블렌딩 부하 절감
+
+  vec3 col = mix(uColorA, uColorB, vSeed);
+  float alpha = mask * mix(0.85, 0.12, vDepth);   // 멀수록 흐리게 = 안개
+
+  gl_FragColor = vec4(col, alpha);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+```
+
+**튜닝 노트**
+- `AdditiveBlending`은 밝은 배경에서 형체가 사라진다. 밝은 테마면 `NormalBlending` + `depthWrite:false` + 정렬 문제 감수.
+- 파티클이 화면을 크게 덮으면 **오버드로우**가 지배적이다. 개수보다 `uSize`를 먼저 줄여라.
+- `discard`는 일부 모바일 GPU에서 early-Z를 깨뜨린다. 파티클처럼 `depthWrite:false`인 경우엔 손해가 없다.
+
+---
+
+## P4 — GPGPU 플로우필드 파티클 (ping-pong FBO + curl noise)
+
+**효과**: 파티클 위치를 텍스처(RGB = XYZ)에 저장하고, 매 프레임 셰이더로 갱신한다.
+파티클이 **경로를 기억**하므로 소용돌이·유체 같은 움직임이 나온다. P3로는 절대 못 만드는 룩.
+
+**언제 쓰나**
+- 10만 개 이상 파티클
+- 파티클이 상태(속도, 수명)를 가져야 할 때
+- 마우스가 유체를 휘젓는 인터랙션
+
+**비용**: 번들 +0KB · GPU **높음** · 512×512 = 262,144 파티클, 렌더타깃 2장 × HalfFloat RGBA = **약 2MB VRAM** · 시뮬 패스 1 + 렌더 패스 1
+
+**조절 파라미터**
+
+| 항목 | 범위 | 의미 |
+|---|---|---|
+| `SIZE` | 64 ~ 512 | 파티클 수 = SIZE². 모바일 128(=16K), 데스크톱 256(=65K) |
+| `uCurlScale` | 0.3 ~ 2.5 | 소용돌이 크기 |
+| `uCurlSpeed` | 0.05 ~ 0.5 | 흐름 속도 |
+| `uDamping` | 0.3 ~ 1.5 | 스텝당 이동량 배율. 클수록 빠르게 흐름 (속도 버퍼가 없는 1-버퍼 구조) |
+| `uReturn` | 0.0 ~ 0.05 | 원래 위치로 되돌아가는 힘 (0이면 영원히 흩어짐) |
+| `uPointerForce` | 0 ~ 3 | 마우스 밀어내기 |
+
+### 코드
+
+```js
+// src/gl/PingPongFBO.js — 재사용 가능한 ping-pong 렌더타깃
+import * as THREE from 'three'
+
+export default class PingPongFBO {
+  /**
+   * @param {THREE.WebGLRenderer} renderer
+   * @param {number} size            정사각 해상도
+   * @param {THREE.DataTexture} initial 초기 상태 텍스처
+   * @param {string} fragmentShader  시뮬레이션 셰이더
+   * @param {object} uniforms        추가 uniform (uTexture는 자동 주입)
+   */
+  constructor(renderer, size, initial, fragmentShader, uniforms = {}) {
+    this.renderer = renderer
+    this.size = size
+
+    const params = {
+      minFilter: THREE.NearestFilter,
+      magFilter: THREE.NearestFilter,
+      format: THREE.RGBAFormat,
+      // FloatType 은 일부 모바일에서 render target 으로 못 쓴다. HalfFloat 이 안전
+      type: THREE.HalfFloatType,
+      depthBuffer: false,
+      stencilBuffer: false,
+      generateMipmaps: false,
+      wrapS: THREE.ClampToEdgeWrapping,
+      wrapT: THREE.ClampToEdgeWrapping,
+    }
+
+    this.rtA = new THREE.WebGLRenderTarget(size, size, params)
+    this.rtB = new THREE.WebGLRenderTarget(size, size, params)
+
+    this.scene = new THREE.Scene()
+    this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)
+
+    this.uniforms = {
+      uTexture:  { value: initial },
+      uInitial:  { value: initial },
+      uTime:     { value: 0 },
+      uDelta:    { value: 0.016 },
+      ...uniforms,
+    }
+
+    this.material = new THREE.ShaderMaterial({
+      uniforms: this.uniforms,
+      vertexShader: /* glsl */`
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = vec4(position.xy, 0.0, 1.0);
+        }
+      `,
+      fragmentShader,
+      depthTest: false,
+      depthWrite: false,
+    })
+
+    const geo = new THREE.BufferGeometry()
+    geo.setAttribute('position', new THREE.BufferAttribute(
+      new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]), 3))
+    geo.setAttribute('uv', new THREE.BufferAttribute(
+      new Float32Array([0, 0, 2, 0, 0, 2]), 2))
+
+    const quad = new THREE.Mesh(geo, this.material)
+    quad.frustumCulled = false
+    this.scene.add(quad)
+
+    // 초기 상태를 두 타깃 모두에 굽는다
+    this._blit(this.rtA)
+    this._blit(this.rtB)
+    this.uniforms.uTexture.value = this.rtA.texture
+  }
+
+  _blit(target) {
+    const prev = this.renderer.getRenderTarget()
+    this.renderer.setRenderTarget(target)
+    this.renderer.render(this.scene, this.camera)
+    this.renderer.setRenderTarget(prev)
+  }
+
+  /** 한 스텝 시뮬레이션. 결과 텍스처를 반환 */
+  update(time, delta) {
+    this.uniforms.uTime.value = time
+    this.uniforms.uDelta.value = Math.min(delta, 1 / 30)
+
+    // 읽기: rtA, 쓰기: rtB
+    this.uniforms.uTexture.value = this.rtA.texture
+    this._blit(this.rtB)
+
+    // swap
+    const tmp = this.rtA
+    this.rtA = this.rtB
+    this.rtB = tmp
+
+    return this.rtA.texture
+  }
+
+  get texture() { return this.rtA.texture }
+
+  dispose() {
+    this.rtA.dispose()
+    this.rtB.dispose()
+    this.material.dispose()
+    this.scene.traverse(o => o.geometry?.dispose())
+  }
+}
+```
+
+```js
+// src/scenes/gpgpuParticles.js
+import * as THREE from 'three'
+import Stage from '../gl/Stage.js'
+import PingPongFBO from '../gl/PingPongFBO.js'
+import simFrag from '../shaders/gpgpu.sim.frag'
+import renderVert from '../shaders/gpgpu.render.vert'
+import renderFrag from '../shaders/gpgpu.render.frag'
+
+/** 초기 파티클 위치를 담은 DataTexture 생성 */
+function makeInitialPositions(size) {
+  const data = new Float32Array(size * size * 4)
+  for (let i = 0; i < size * size; i++) {
+    // 구 표면 근처에 균등 분포
+    const u = Math.random()
+    const v = Math.random()
+    const theta = u * Math.PI * 2
+    const phi = Math.acos(2 * v - 1)
+    const r = 1.6 * (0.75 + Math.random() * 0.25)
+    data[i * 4 + 0] = r * Math.sin(phi) * Math.cos(theta)
+    data[i * 4 + 1] = r * Math.sin(phi) * Math.sin(theta)
+    data[i * 4 + 2] = r * Math.cos(phi)
+    data[i * 4 + 3] = Math.random()          // w = 개체별 시드
+  }
+  const tex = new THREE.DataTexture(data, size, size, THREE.RGBAFormat, THREE.FloatType)
+  tex.needsUpdate = true
+  tex.minFilter = tex.magFilter = THREE.NearestFilter
+  tex.colorSpace = THREE.NoColorSpace
+  return tex
+}
+
+export default function mountGpgpuParticles(canvas, opts = {}) {
+  const { colorA = '#f0abfc', colorB = '#38bdf8', reduced = false } = opts
+
+  const stage = new Stage({ canvas, dprMax: 1.75, antialias: false, alpha: true })
+  stage.camera.fov = 40
+  stage.camera.position.set(0, 0, 5.5)
+  stage.camera.updateProjectionMatrix()
+
+  const isMobile = window.matchMedia('(max-width: 768px)').matches
+  const SIZE = isMobile ? 128 : 256          // 파티클 수 = SIZE²
+  const COUNT = SIZE * SIZE
+
+  const initial = makeInitialPositions(SIZE)
+
+  const simUniforms = {
+    uCurlScale:    { value: 0.9 },
+    uCurlSpeed:    { value: 0.12 },
+    uDamping:      { value: 0.965 },
+    uReturn:       { value: 0.012 },
+    uPointer:      { value: new THREE.Vector3(999, 999, 999) },
+    uPointerForce: { value: 1.6 },
+  }
+
+  const sim = new PingPongFBO(stage.renderer, SIZE, initial, simFrag, simUniforms)
+
+  // 렌더용 지오메트리: 각 파티클이 "시뮬 텍스처의 어느 픽셀인가"만 알면 된다
+  const refs = new Float32Array(COUNT * 2)
+  const seeds = new Float32Array(COUNT)
+  for (let i = 0; i < COUNT; i++) {
+    refs[i * 2 + 0] = (i % SIZE) / SIZE + 0.5 / SIZE
+    refs[i * 2 + 1] = Math.floor(i / SIZE) / SIZE + 0.5 / SIZE
+    seeds[i] = Math.random()
+  }
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(COUNT * 3), 3))
+  geometry.setAttribute('aRef',  new THREE.BufferAttribute(refs, 2))
+  geometry.setAttribute('aSeed', new THREE.BufferAttribute(seeds, 1))
+  geometry.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 8)  // 컬링 오작동 방지
+
+  const renderUniforms = {
+    uPositions: { value: sim.texture },
+    uSize:      { value: isMobile ? 12 : 16 },
+    uDpr:       { value: stage.size.dpr },
+    uColorA:    { value: new THREE.Color(colorA) },
+    uColorB:    { value: new THREE.Color(colorB) },
+    uTime:      { value: 0 },
+  }
+
+  const material = new THREE.ShaderMaterial({
+    vertexShader: renderVert,
+    fragmentShader: renderFrag,
+    uniforms: renderUniforms,
+    transparent: true,
+    depthWrite: false,
+    blending: THREE.AdditiveBlending,
+  })
+
+  const points = new THREE.Points(geometry, material)
+  points.frustumCulled = false
+  stage.scene.add(points)
+
+  stage.onResize = (w, h, dpr) => { renderUniforms.uDpr.value = dpr }
+
+  // 포인터 → 월드 (z=0 평면)
+  const raycaster = new THREE.Raycaster()
+  const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)
+  const ndc = new THREE.Vector2()
+  const hit = new THREE.Vector3()
+  const onPointer = (e) => {
+    ndc.set((e.clientX / innerWidth) * 2 - 1, -(e.clientY / innerHeight) * 2 + 1)
+    raycaster.setFromCamera(ndc, stage.camera)
+    if (raycaster.ray.intersectPlane(plane, hit)) simUniforms.uPointer.value.copy(hit)
+  }
+  const onLeave = () => simUniforms.uPointer.value.set(999, 999, 999)
+
+  if (!reduced) {
+    window.addEventListener('pointermove', onPointer, { passive: true })
+    window.addEventListener('pointerleave', onLeave, { passive: true })
+  }
+
+  stage.add((t, dt) => {
+    renderUniforms.uTime.value = t
+    renderUniforms.uPositions.value = sim.update(t, dt)
+    points.rotation.y = t * 0.04
+  })
+
+  if (reduced) {
+    // reduced-motion: 시뮬을 30스텝만 돌려 정지 이미지를 만든다
+    for (let i = 0; i < 30; i++) sim.update(i * 0.016, 0.016)
+    renderUniforms.uPositions.value = sim.texture
+    stage.renderOnce()
+  } else {
+    stage.start()
+  }
+
+  return () => {
+    window.removeEventListener('pointermove', onPointer)
+    window.removeEventListener('pointerleave', onLeave)
+    sim.dispose()
+    initial.dispose()
+    stage.dispose()
+  }
+}
+```
+
+```glsl
+// src/shaders/gpgpu.sim.frag
+precision highp float;   // 위치 시뮬레이션은 반드시 highp
+
+#include './lib/noise.glsl'
+#include './lib/curl.glsl'   // curlNoise(vec3) — 03 §4.4
+
+uniform sampler2D uTexture;      // 이전 프레임 위치
+uniform sampler2D uInitial;      // 원래 위치 (되돌아가는 힘용)
+uniform float uTime;
+uniform float uDelta;
+uniform float uCurlScale;
+uniform float uCurlSpeed;
+uniform float uDamping;
+uniform float uReturn;
+uniform vec3  uPointer;
+uniform float uPointerForce;
+
+varying vec2 vUv;
+
+void main() {
+  vec4 state = texture2D(uTexture, vUv);
+  vec4 home  = texture2D(uInitial, vUv);
+
+  vec3 pos  = state.xyz;
+  float seed = home.w;
+
+  // 1) curl noise 로 속도장 샘플
+  vec3 flow = curlNoise(pos * uCurlScale + vec3(0.0, 0.0, uTime * uCurlSpeed));
+
+  // 2) 개체별로 속도를 다르게 → 뭉치지 않는다
+  flow *= 0.35 + seed * 0.65;
+
+  // 3) 원래 위치로 복귀하는 스프링
+  vec3 back = (home.xyz - pos) * uReturn;
+
+  // 4) 마우스 반발
+  vec3 toP = pos - uPointer;
+  float d = length(toP);
+  vec3 push = normalize(toP + 1e-5) * smoothstep(1.4, 0.0, d) * uPointerForce;
+
+  // 이 시뮬은 위치만 저장한다(속도 버퍼 없음).
+  // 따라서 uDamping 은 "한 스텝에 얼마나 이동하는가"를 조절한다.
+  // 진짜 관성이 필요하면 두 번째 렌더타깃에 속도를 저장하는 2-버퍼 구조로 확장하라.
+  vec3 vel = (flow * 0.6 + back + push) * uDamping;
+
+  pos += vel * uDelta;
+
+  // 너무 멀리 나간 파티클은 리셋
+  if (length(pos) > 6.0) pos = home.xyz;
+
+  gl_FragColor = vec4(pos, seed);
+}
+```
+
+```glsl
+// src/shaders/gpgpu.render.vert
+uniform sampler2D uPositions;
+uniform float uSize;
+uniform float uDpr;
+uniform float uTime;
+
+attribute vec2  aRef;
+attribute float aSeed;
+
+varying float vSeed;
+varying float vSpeed;
+varying float vDepth;
+
+void main() {
+  vec4 state = texture2D(uPositions, aRef);
+  vec3 pos = state.xyz;
+
+  vec4 mv = modelViewMatrix * vec4(pos, 1.0);
+  gl_Position = projectionMatrix * mv;
+
+  gl_PointSize = uSize * uDpr * (0.4 + aSeed * 0.8) * (1.0 / max(-mv.z, 0.001));
+
+  vSeed  = aSeed;
+  vSpeed = clamp(length(pos) / 3.0, 0.0, 1.0);
+  vDepth = clamp((-mv.z - 3.0) / 6.0, 0.0, 1.0);
+}
+```
+
+```glsl
+// src/shaders/gpgpu.render.frag
+precision mediump float;
+
+uniform vec3 uColorA;
+uniform vec3 uColorB;
+
+varying float vSeed;
+varying float vSpeed;
+varying float vDepth;
+
+void main() {
+  // 텍스처 없이 원형 마스크
+  vec2 c = gl_PointCoord - 0.5;
+  float d = dot(c, c);
+  if (d > 0.25) discard;
+  float mask = smoothstep(0.25, 0.02, d);
+
+  vec3 col = mix(uColorA, uColorB, vSeed * 0.6 + vSpeed * 0.4);
+  float alpha = mask * mix(0.9, 0.15, vDepth);
+
+  gl_FragColor = vec4(col, alpha);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+```
+
+**함정 정리**
+- 렌더타깃 텍스처는 `NearestFilter`여야 한다. Linear면 이웃 파티클 상태가 섞여 뭉개진다.
+- `HalfFloatType`은 정밀도가 약 3자리다. 좌표 범위를 ±10 이내로 유지해라. 넘으면 지터가 생긴다.
+- `Points`의 `frustumCulled = false` 또는 큰 `boundingSphere`를 반드시 지정. 안 하면 시뮬로 이동한 파티클이 통째로 사라진다.
+- 시뮬 패스는 **렌더 전에** 돌려야 한다. `stage.add()` 콜백 안에서 갱신하고 있으므로 순서가 맞다.
+- three 내장 `GPUComputationRenderer`(`three/addons/misc/GPUComputationRenderer.js`)를 쓰면 이 클래스를 대체할 수 있다. 다변수(위치+속도) 시뮬이 필요하면 그쪽이 낫다.
+
+---
+
+## P5 — InstancedMesh 그리드 웨이브
+
+**효과**: 동일한 지오메트리 수천 개를 **드로우콜 1번**에 그린다. 마우스 위치를 중심으로 파동이 퍼지며 각 인스턴스가 솟구치고 회전한다.
+
+**언제 쓰나**
+- "타일/블록/막대"의 격자 인터랙션 (Awwwards 단골)
+- 데이터 시각화형 히어로
+- Points로는 표현 못 하는 **입체감 있는 입자**
+
+**비용**: 번들 +0KB · GPU **중간** · 40×40=1,600 인스턴스 × 박스(12 tri) = 19,200 tri, 드로우콜 1
+
+**조절 파라미터**
+
+| 항목 | 범위 | 의미 |
+|---|---|---|
+| `GRID` | 20 ~ 80 | 한 변 개수 (총 GRID²) |
+| `uWaveSpeed` | 0.5 ~ 4 | 파동 진행 속도 |
+| `uWaveFreq` | 1 ~ 12 | 파동 밀도 |
+| `uLift` | 0.1 ~ 2 | 마우스 근처 솟구침 높이 |
+| `uFalloff` | 0.5 ~ 4 | 마우스 영향 반경 감쇠 |
+
+### 코드
+
+```js
+// src/scenes/instancedGrid.js
+import * as THREE from 'three'
+import Stage from '../gl/Stage.js'
+
+export default function mountInstancedGrid(canvas, opts = {}) {
+  const {
+    gridSize = 44,
+    spacing = 0.28,
+    colorLow = '#1e1b4b',
+    colorHigh = '#a78bfa',
+    reduced = false,
+  } = opts
+
+  const stage = new Stage({ canvas, dprMax: 1.75, antialias: true, alpha: false })
+  stage.camera.fov = 35
+  stage.camera.position.set(0, 7.5, 8.5)
+  stage.camera.lookAt(0, 0, 0)
+  stage.camera.updateProjectionMatrix()
+
+  stage.scene.add(new THREE.AmbientLight(0xffffff, 1.2))
+  const dir = new THREE.DirectionalLight(0xffffff, 2.4)
+  dir.position.set(4, 8, 5)
+  stage.scene.add(dir)
+
+  const isMobile = window.matchMedia('(max-width: 768px)').matches
+  const GRID = isMobile ? Math.round(gridSize * 0.6) : gridSize
+  const COUNT = GRID * GRID
+
+  const geometry = new THREE.BoxGeometry(spacing * 0.55, 1, spacing * 0.55)
+  geometry.translate(0, 0.5, 0)   // 피벗을 바닥으로 → scaleY 가 위로만 자란다
+
+  const material = new THREE.MeshStandardMaterial({
+    roughness: 0.45,
+    metalness: 0.1,
+    vertexColors: false,
+  })
+
+  // 인스턴스별 색상: instanceColor 는 three 가 자동으로 셰이더에 연결한다
+  const mesh = new THREE.InstancedMesh(geometry, material, COUNT)
+  mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage)   // 매 프레임 갱신 힌트
+  stage.scene.add(mesh)
+
+  const cLow = new THREE.Color(colorLow)
+  const cHigh = new THREE.Color(colorHigh)
+  const tmpColor = new THREE.Color()
+  mesh.instanceColor = new THREE.InstancedBufferAttribute(new Float32Array(COUNT * 3), 3)
+
+  // 인스턴스별 정적 데이터
+  const basePos = new Float32Array(COUNT * 2)
+  const seeds = new Float32Array(COUNT)
+  const half = (GRID - 1) * 0.5
+  for (let i = 0; i < COUNT; i++) {
+    const x = (i % GRID) - half
+    const z = Math.floor(i / GRID) - half
+    basePos[i * 2 + 0] = x * spacing
+    basePos[i * 2 + 1] = z * spacing
+    seeds[i] = Math.random()
+  }
+
+  const dummy = new THREE.Object3D()
+
+  // 포인터 → 바닥 평면
+  const raycaster = new THREE.Raycaster()
+  const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
+  const ndc = new THREE.Vector2()
+  const hit = new THREE.Vector3()
+  const pointer = new THREE.Vector2(0, 0)
+  const pointerTarget = new THREE.Vector2(0, 0)
+
+  const onPointer = (e) => {
+    ndc.set((e.clientX / innerWidth) * 2 - 1, -(e.clientY / innerHeight) * 2 + 1)
+    raycaster.setFromCamera(ndc, stage.camera)
+    if (raycaster.ray.intersectPlane(groundPlane, hit)) pointerTarget.set(hit.x, hit.z)
+  }
+  if (!reduced) window.addEventListener('pointermove', onPointer, { passive: true })
+
+  const uWaveSpeed = 1.8
+  const uWaveFreq = 5.0
+  const uLift = 0.85
+  const uFalloff = 1.6
+
+  function updateInstances(t) {
+    for (let i = 0; i < COUNT; i++) {
+      const x = basePos[i * 2 + 0]
+      const z = basePos[i * 2 + 1]
+      const seed = seeds[i]
+
+      const r = Math.hypot(x, z)
+      const wave = Math.sin(r * uWaveFreq - t * uWaveSpeed) * 0.5 + 0.5
+
+      const dx = x - pointer.x
+      const dz = z - pointer.y
+      const dp = Math.hypot(dx, dz)
+      const influence = Math.exp(-dp * dp * uFalloff)
+
+      const h = 0.06 + wave * 0.22 + influence * uLift + seed * 0.03
+
+      dummy.position.set(x, 0, z)
+      dummy.scale.set(1, h, 1)
+      dummy.rotation.y = influence * 1.2 + seed * 0.3
+      dummy.updateMatrix()
+      mesh.setMatrixAt(i, dummy.matrix)
+
+      tmpColor.copy(cLow).lerp(cHigh, Math.min(1, h / (uLift * 0.9)))
+      mesh.setColorAt(i, tmpColor)
+    }
+    mesh.instanceMatrix.needsUpdate = true
+    if (mesh.instanceColor) mesh.instanceColor.needsUpdate = true
+  }
+
+  stage.add((t, dt) => {
+    pointer.lerp(pointerTarget, 1 - Math.pow(0.004, dt))
+    updateInstances(reduced ? 0 : t)
+  })
+
+  if (reduced) stage.renderOnce()
+  else stage.start()
+
+  return () => {
+    window.removeEventListener('pointermove', onPointer)
+    stage.dispose()
+  }
+}
+```
+
+**튜닝 노트**
+- CPU 루프가 병목이다. 2,000개를 넘기면 **위 계산을 vertex 셰이더로 옮겨라**(`InstancedBufferAttribute`로 basePos/seed만 넘기고 `instanceMatrix`는 고정).
+- `setUsage(THREE.DynamicDrawUsage)`를 빼먹으면 드라이버가 매 프레임 버퍼를 재할당한다.
+- `setColorAt()`을 쓰려면 `mesh.instanceColor`가 있어야 한다. three가 첫 `setColorAt` 호출에서 만들어주지만, 명시적으로 만드는 편이 안전하다.
+- 그림자는 인스턴스 수만큼 비싸다. 랜딩페이지에서는 **끄고** `ContactShadows`나 baked AO로 대체.
+
+---
+
+## P6 — 스크롤 카메라 리그 (Lenis + GSAP ScrollTrigger)
+
+**효과**: 페이지 스크롤에 카메라 위치·회전·FOV, 오브젝트 상태를 바인딩한다. 섹션마다 다른 3D 상태로 전환.
+
+**언제 쓰나**
+- 스크롤텔링 랜딩페이지 (제품을 돌려보며 설명)
+- 섹션 진입 시 3D가 반응해야 할 때
+- **WebGL이 페이지 전체를 지배하는 구성**
+
+**비용**: 번들 **+45KB** (gsap core 30 + ScrollTrigger 10 + lenis 5) · GPU 낮음(연출만) · CPU: 스크롤당 uniform 업데이트
+
+**조절 파라미터**
+
+| 항목 | 범위 | 의미 |
+|---|---|---|
+| Lenis `lerp` | 0.06 ~ 0.15 | 작을수록 무겁고 느긋함 |
+| Lenis `duration` | 0.8 ~ 2.0 | `wheelMultiplier`와 함께 조율 |
+| ScrollTrigger `scrub` | `true` 또는 0.3~1.5 | 숫자면 관성. **0.5~1.0이 스위트스팟** |
+| `end` | `'+=100%'` ~ `'+=300%'` | 핀 구간 길이 |
+
+### 코드
+
+```js
+// src/scroll/smoothScroll.js
+import Lenis from 'lenis'
+import 'lenis/dist/lenis.css'
+import gsap from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
+gsap.registerPlugin(ScrollTrigger)
+
+let lenis = null
+
+export function initSmoothScroll() {
+  if (lenis) return lenis
+
+  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+  lenis = new Lenis({
+    duration: 1.15,
+    lerp: 0.09,
+    smoothWheel: true,
+    syncTouch: false,          // 모바일은 네이티브 스크롤이 더 낫다
+    wheelMultiplier: 1,
+    autoRaf: false,            // GSAP ticker 에 태울 것이므로 false
+    anchors: true,
+    respectReducedMotion: true, // reduced-motion 이면 Lenis 가 스스로 비활성화
+  })
+
+  // Lenis 스크롤 → ScrollTrigger 갱신
+  lenis.on('scroll', ScrollTrigger.update)
+
+  // 단일 RAF 루프: GSAP ticker 하나로 통일한다 (RAF 두 개 = 프레임 밀림)
+  gsap.ticker.add((time) => lenis.raf(time * 1000))
+  gsap.ticker.lagSmoothing(0)
+
+  if (reduced) lenis.stop()
+
+  return lenis
+}
+
+export function getLenis() { return lenis }
+
+export function destroySmoothScroll() {
+  ScrollTrigger.getAll().forEach(st => st.kill())
+  lenis?.destroy()
+  lenis = null
+}
+```
+
+```js
+// src/scenes/scrollStory.js
+import * as THREE from 'three'
+import gsap from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import Stage from '../gl/Stage.js'
+import { initSmoothScroll } from '../scroll/smoothScroll.js'
+
+/**
+ * DOM 구조 전제:
+ * <div id="story">
+ *   <section data-step="0">...</section>
+ *   <section data-step="1">...</section>
+ *   <section data-step="2">...</section>
+ * </div>
+ * <canvas id="gl" style="position:fixed; inset:0; z-index:-1"></canvas>
+ */
+export default function mountScrollStory(canvas, opts = {}) {
+  const { reduced = false } = opts
+
+  initSmoothScroll()
+
+  const stage = new Stage({ canvas, dprMax: 1.75, antialias: true, pauseOffscreen: false })
+  stage.camera.fov = 40
+  stage.camera.position.set(0, 0, 6)
+  stage.camera.updateProjectionMatrix()
+
+  stage.scene.add(new THREE.AmbientLight(0xffffff, 1.6))
+  const key = new THREE.DirectionalLight(0xffffff, 3)
+  key.position.set(3, 4, 5)
+  stage.scene.add(key)
+
+  const geo = new THREE.IcosahedronGeometry(1.2, 4)
+  const mat = new THREE.MeshStandardMaterial({
+    color: new THREE.Color('#c4b5fd'), roughness: 0.25, metalness: 0.6,
+  })
+  const hero = new THREE.Mesh(geo, mat)
+  stage.scene.add(hero)
+
+  // 스크롤로 조작할 상태 객체. GSAP 이 이 값을 트윈한다
+  const state = {
+    camX: 0, camY: 0, camZ: 6,
+    rotX: 0, rotY: 0,
+    scale: 1,
+    fov: 40,
+    hue: 0,
+  }
+
+  stage.add(() => {
+    stage.camera.position.set(state.camX, state.camY, state.camZ)
+    stage.camera.lookAt(0, 0, 0)
+    if (stage.camera.fov !== state.fov) {
+      stage.camera.fov = state.fov
+      stage.camera.updateProjectionMatrix()
+    }
+    hero.rotation.set(state.rotX, state.rotY, 0)
+    hero.scale.setScalar(state.scale)
+    mat.color.setHSL(0.72 + state.hue * 0.25, 0.6, 0.72)
+  })
+
+  if (reduced) {
+    stage.renderOnce()
+    return () => stage.dispose()
+  }
+
+  stage.start()
+
+  // --- 스크롤 타임라인 ---------------------------------------------------
+  const tl = gsap.timeline({
+    scrollTrigger: {
+      trigger: '#story',
+      start: 'top top',
+      end: 'bottom bottom',
+      scrub: 0.8,              // 관성 있는 스크럽. true 보다 훨씬 부드럽다
+      invalidateOnRefresh: true,
+    },
+  })
+
+  tl.to(state, { camZ: 4.2, rotY: Math.PI * 0.8, scale: 1.25, hue: 0.4, ease: 'none' })
+    .to(state, { camX: 1.8, camY: -0.6, rotX: 0.5, fov: 55, ease: 'none' })
+    .to(state, { camX: 0, camY: 0, camZ: 7, rotY: Math.PI * 2, scale: 0.85, hue: 1, ease: 'none' })
+
+  // --- 섹션별 개별 트리거 (진입 시 1회 재생) ------------------------------
+  document.querySelectorAll('[data-step]').forEach((section) => {
+    ScrollTrigger.create({
+      trigger: section,
+      start: 'top 60%',
+      onEnter: () => section.classList.add('is-active'),
+      onLeaveBack: () => section.classList.remove('is-active'),
+    })
+  })
+
+  // 폰트/이미지 로드로 레이아웃이 바뀌면 반드시 refresh
+  window.addEventListener('load', () => ScrollTrigger.refresh())
+  document.fonts?.ready.then(() => ScrollTrigger.refresh())
+
+  return () => {
+    tl.scrollTrigger?.kill()
+    tl.kill()
+    ScrollTrigger.getAll().forEach(st => st.kill())
+    stage.dispose()
+  }
+}
+```
+
+**함정 정리**
+- **RAF 루프는 하나여야 한다.** Lenis `autoRaf:false` + `gsap.ticker.add()`. `renderer.setAnimationLoop`은 별개 RAF지만 three 렌더 전용이라 충돌하지 않는다. 다만 GSAP 값 갱신과 three 렌더 사이 한 프레임 지연이 생길 수 있으니, 완벽한 동기가 필요하면 three 렌더도 `gsap.ticker`로 옮겨라.
+- `gsap.ticker.lagSmoothing(0)` 필수. 안 하면 무거운 프레임에서 Lenis가 튄다.
+- `position:fixed` 캔버스는 `pauseOffscreen:false`로 둬야 한다. (항상 화면에 있으므로)
+- ScrollTrigger는 **레이아웃 확정 후** `refresh()`해야 한다. 웹폰트·이미지 로드 후 필수.
+- 카메라를 직접 트윈하지 말고 **plain object를 트윈하고 렌더 루프에서 적용**해라. GSAP이 매 프레임 `updateProjectionMatrix()`를 호출하는 사고를 막는다.
+
+---
+
+## P7 — R3F ScrollControls 스크롤 씬
+
+**효과**: drei의 `ScrollControls`가 캔버스 위에 가상 스크롤 컨테이너를 만들고, `useScroll()`로 0~1 진행도를 제공한다. HTML도 `<Scroll html>`로 같이 스크롤된다.
+
+**언제 쓰나**
+- R3F 앱에서 **페이지 전체가 하나의 3D 씬**
+- Lenis/ScrollTrigger를 안 쓰고 싶을 때(의존성 0)
+- 3D와 HTML이 정확히 같은 스크롤을 공유해야 할 때
+
+**비용**: 번들 +0KB(drei에 포함) · GPU 낮음
+
+**조절 파라미터**
+
+| prop | 기본 | 의미 |
+|---|---|---|
+| `pages` | 1 | 스크롤 길이 = 뷰포트 높이 × pages |
+| `damping` | 0.2 | 관성(초). 0.1 = 빠릿, 0.4 = 묵직 |
+| `distance` | 1 | 스크롤바 이동 배율 |
+| `horizontal` | false | 가로 스크롤 |
+| `infinite` | false | 무한 루프(실험적) |
+
+`useScroll()` API: `offset`(0~1), `delta`, `range(start,len,margin?)`, `curve(start,len,margin?)`(0→1→0), `visible(start,len,margin?)`
+
+### 코드
+
+```tsx
+// src/gl/ScrollScene.tsx
+import * as THREE from 'three'
+import { Canvas, useFrame } from '@react-three/fiber'
+import { ScrollControls, Scroll, useScroll, Environment, Float } from '@react-three/drei'
+import { useRef } from 'react'
+
+function Shape() {
+  const ref = useRef<THREE.Mesh>(null!)
+  const scroll = useScroll()
+
+  useFrame((state, delta) => {
+    const m = ref.current
+    // range(start, length): 해당 구간에서 0→1 로 올라가는 값
+    const enter = scroll.range(0, 1 / 3)
+    const mid   = scroll.range(1 / 3, 1 / 3)
+    const out   = scroll.range(2 / 3, 1 / 3)
+
+    m.rotation.y = scroll.offset * Math.PI * 4
+    m.rotation.x = mid * 0.9
+    m.position.x = THREE.MathUtils.lerp(0, 1.6, mid) - out * 1.6
+    m.scale.setScalar(THREE.MathUtils.lerp(0.7, 1.35, enter) * (1 - out * 0.4))
+
+    // curve(): 구간 중앙에서 최대가 되는 0→1→0 곡선. "지나갈 때 반짝" 연출에 최적
+    const flash = scroll.curve(1 / 3, 1 / 3)
+    ;(m.material as THREE.MeshStandardMaterial).emissiveIntensity = flash * 1.4
+
+    // 카메라도 스크롤에 반응
+    state.camera.position.z = THREE.MathUtils.lerp(6, 3.4, scroll.offset)
+    state.camera.updateProjectionMatrix()
+  })
+
+  return (
+    <Float speed={1.2} rotationIntensity={0.35} floatIntensity={0.5}>
+      <mesh ref={ref}>
+        <icosahedronGeometry args={[1.2, 4]} />
+        <meshStandardMaterial
+          color="#c4b5fd"
+          emissive="#7c3aed"
+          emissiveIntensity={0}
+          roughness={0.22}
+          metalness={0.65}
+        />
+      </mesh>
+    </Float>
+  )
+}
+
+/** 스크롤에 따라 나타나는 HTML 섹션 */
+function Sections() {
+  return (
+    <Scroll html style={{ width: '100%' }}>
+      <section style={{ height: '100vh', display: 'grid', placeItems: 'center' }}>
+        <h1 style={{ fontSize: 'clamp(2.5rem,8vw,6rem)', margin: 0 }}>Scroll</h1>
+      </section>
+      <section style={{ height: '100vh', display: 'grid', placeItems: 'center' }}>
+        <h2>중간 지점에서 발광한다</h2>
+      </section>
+      <section style={{ height: '100vh', display: 'grid', placeItems: 'center' }}>
+        <h2>그리고 빠져나간다</h2>
+      </section>
+    </Scroll>
+  )
+}
+
+export default function ScrollScene() {
+  return (
+    <Canvas
+      dpr={[1, 1.75]}
+      gl={{ antialias: true, powerPreference: 'high-performance' }}
+      camera={{ position: [0, 0, 6], fov: 40 }}
+      style={{ position: 'fixed', inset: 0 }}
+    >
+      <color attach="background" args={['#07070a']} />
+      <Environment preset="city" environmentIntensity={0.6} />
+      <ambientLight intensity={0.4} />
+
+      <ScrollControls pages={3} damping={0.22}>
+        <Scroll>
+          <Shape />
+        </Scroll>
+        <Sections />
+      </ScrollControls>
+    </Canvas>
+  )
+}
+```
+
+**주의**
+- `ScrollControls`는 **자체 스크롤 컨테이너**를 만든다. 페이지의 다른 DOM과 스크롤이 공유되지 않으므로, 일반 페이지에 부분적으로 넣으면 안 된다. "페이지 전체가 캔버스"일 때만 쓴다.
+- 페이지 일부만 3D로 하고 싶다면 → **P6(Lenis + ScrollTrigger)** 또는 drei `<View>`를 써라.
+- SEO: `<Scroll html>` 내부 콘텐츠는 클라이언트 렌더링이다. 중요한 텍스트는 별도 SSR DOM에 두고 캔버스는 장식으로 유지해라.
+
+---
+
+## P8 — DOM 동기화 이미지 플레인 + hover 왜곡 + RGB shift
+
+**효과**: 페이지의 `<img>`를 숨기고 같은 위치·크기에 WebGL 플레인을 배치한다. hover하면 마우스 속도에 따라 휘고, R 채널이 어긋나며 색수차가 생긴다. Codrops의 고전이자 **에이전시 포트폴리오의 표준**.
+
+**언제 쓰나**
+- 이미지 그리드/갤러리/프로젝트 리스트
+- "DOM 레이아웃은 그대로 두고 비주얼만 업그레이드"하고 싶을 때
+- 이미지가 3~30장 정도
+
+**비용**: 번들 +0KB · GPU **중간** (텍스처 VRAM = 이미지 해상도 × 4byte) · 드로우콜 = 이미지 수 · 이미지 1920×1080 RGBA = **8.3MB VRAM/장** → 반드시 리사이즈
+
+**조절 파라미터**
+
+| uniform | 범위 | 의미 |
+|---|---|---|
+| `uHover` | 0 ~ 1 | hover 보간값 (JS에서 lerp) |
+| `uBend` | 0 ~ 0.4 | 스크롤 속도에 따른 휨 |
+| `uRgbShift` | 0 ~ 0.02 | 색수차 세기. 0.008 이상은 촌스러움 |
+| `uScale` | 1.0 ~ 1.12 | hover 시 텍스처 줌 |
+| `uVelocity` | -1 ~ 1 | 스크롤 속도(정규화) |
+
+### 코드
+
+```js
+// src/gl/DomGallery.js
+import * as THREE from 'three'
+import Stage from './Stage.js'
+import vert from '../shaders/imagePlane.vert'
+import frag from '../shaders/imagePlane.frag'
+
+/**
+ * DOM 구조 전제:
+ * <figure class="tile"><img data-webgl src="/a.jpg" alt="..."></figure>
+ * 캔버스: position:fixed; inset:0; pointer-events:none; z-index:1
+ */
+export default class DomGallery {
+  constructor(canvas, { selector = 'img[data-webgl]', reduced = false } = {}) {
+    this.reduced = reduced
+    this.stage = new Stage({
+      canvas, dprMax: 1.75, antialias: false, alpha: true, pauseOffscreen: false,
+    })
+
+    // 직교(orthographic) 대신 원근 카메라를 CSS 픽셀에 맞춘다.
+    // fov 를 이렇게 잡으면 z=0 평면에서 1 unit = 1 CSS px 이 된다.
+    this.camera = new THREE.PerspectiveCamera(45, 1, 100, 3000)
+    this.camera.position.z = 800
+    this.stage.camera = this.camera
+
+    this.geometry = new THREE.PlaneGeometry(1, 1, 24, 24)
+    this.items = []
+    this.loader = new THREE.TextureLoader()
+    this.scroll = { current: 0, target: 0, velocity: 0 }
+
+    this._onResize = this._onResize.bind(this)
+    this._onScroll = this._onScroll.bind(this)
+
+    this.stage.onResize = this._onResize
+    window.addEventListener('scroll', this._onScroll, { passive: true })
+
+    this._collect(selector)
+    this._onResize(this.stage.size.w, this.stage.size.h, this.stage.size.dpr)
+
+    this.stage.add(this._update.bind(this))
+    if (reduced) this.stage.renderOnce()
+    else this.stage.start()
+  }
+
+  _collect(selector) {
+    const nodes = [...document.querySelectorAll(selector)]
+    for (const el of nodes) {
+      const uniforms = {
+        uTexture:   { value: null },
+        uPlaneSize: { value: new THREE.Vector2(1, 1) },
+        uImageSize: { value: new THREE.Vector2(1, 1) },
+        uHover:     { value: 0 },
+        uMouse:     { value: new THREE.Vector2(0.5, 0.5) },
+        uVelocity:  { value: 0 },
+        uBend:      { value: 0.14 },
+        uRgbShift:  { value: 0.006 },
+        uScale:     { value: 1.06 },
+        uTime:      { value: 0 },
+        uReveal:    { value: 0 },
+      }
+
+      const material = new THREE.ShaderMaterial({
+        vertexShader: vert,
+        fragmentShader: frag,
+        uniforms,
+        transparent: true,
+      })
+
+      const mesh = new THREE.Mesh(this.geometry, material)
+      mesh.visible = false
+      this.stage.scene.add(mesh)
+
+      const item = { el, mesh, uniforms, hoverTarget: 0, revealTarget: 0, bounds: null }
+      this.items.push(item)
+
+      // 텍스처 로드
+      this.loader.load(el.currentSrc || el.src, (tex) => {
+        tex.colorSpace = THREE.SRGBColorSpace       // 컬러 텍스처 → 반드시 지정
+        tex.minFilter = THREE.LinearFilter          // 밉맵 없이 (메모리 33% 절약)
+        tex.generateMipmaps = false
+        tex.anisotropy = Math.min(4, this.stage.renderer.capabilities.getMaxAnisotropy())
+        uniforms.uTexture.value = tex
+        uniforms.uImageSize.value.set(tex.image.width, tex.image.height)
+        mesh.visible = true
+        el.style.opacity = '0'                      // DOM 이미지를 감춘다
+      })
+
+      // 인터랙션은 DOM 요소에 건다 (캔버스는 pointer-events:none)
+      el.addEventListener('pointerenter', () => { item.hoverTarget = 1 })
+      el.addEventListener('pointerleave', () => { item.hoverTarget = 0 })
+      el.addEventListener('pointermove', (e) => {
+        const r = el.getBoundingClientRect()
+        uniforms.uMouse.value.set(
+          (e.clientX - r.left) / r.width,
+          1 - (e.clientY - r.top) / r.height
+        )
+      })
+
+      // 뷰포트 진입 시 리빌
+      const io = new IntersectionObserver(([entry]) => {
+        item.revealTarget = entry.isIntersecting ? 1 : 0
+      }, { rootMargin: '-10% 0px' })
+      io.observe(el)
+      item.io = io
+    }
+  }
+
+  _onResize(w, h) {
+    // fov 를 화면 높이에 맞춰 재계산 → 1 unit = 1 px
+    const fov = 2 * Math.atan(h / 2 / this.camera.position.z) * (180 / Math.PI)
+    this.camera.fov = fov
+    this.camera.aspect = w / h
+    this.camera.updateProjectionMatrix()
+
+    this.viewport = { w, h }
+    for (const item of this.items) this._measure(item)
+  }
+
+  _measure(item) {
+    const r = item.el.getBoundingClientRect()
+    item.bounds = {
+      top: r.top + window.scrollY,
+      left: r.left + window.scrollX,
+      width: r.width,
+      height: r.height,
+    }
+    item.mesh.scale.set(r.width, r.height, 1)
+    item.uniforms.uPlaneSize.value.set(r.width, r.height)
+  }
+
+  _onScroll() { this.scroll.target = window.scrollY }
+
+  _update(t, dt) {
+    const k = 1 - Math.pow(0.001, dt)
+    const prev = this.scroll.current
+    this.scroll.current += (this.scroll.target - this.scroll.current) * k
+    this.scroll.velocity = (this.scroll.current - prev) / Math.max(dt, 1e-4)
+
+    const vNorm = THREE.MathUtils.clamp(this.scroll.velocity / 2500, -1, 1)
+
+    for (const item of this.items) {
+      if (!item.bounds) continue
+      const { mesh, uniforms, bounds } = item
+
+      // DOM 좌표 → WebGL 좌표 (원점이 화면 중앙, y 위쪽 +)
+      mesh.position.x = bounds.left - this.viewport.w / 2 + bounds.width / 2
+      mesh.position.y = -(bounds.top - this.scroll.current) + this.viewport.h / 2 - bounds.height / 2
+
+      uniforms.uTime.value = t
+      uniforms.uVelocity.value += (vNorm - uniforms.uVelocity.value) * k
+      uniforms.uHover.value  += (item.hoverTarget - uniforms.uHover.value) * (1 - Math.pow(0.0005, dt))
+      uniforms.uReveal.value += (item.revealTarget - uniforms.uReveal.value) * (1 - Math.pow(0.01, dt))
+
+      // 화면 밖이면 그리지 않는다
+      const offY = Math.abs(mesh.position.y)
+      mesh.visible = uniforms.uTexture.value !== null &&
+                     offY < this.viewport.h / 2 + bounds.height
+    }
+  }
+
+  /** 레이아웃이 바뀌었을 때 (폰트 로드, 필터링 등) */
+  refresh() {
+    for (const item of this.items) this._measure(item)
+  }
+
+  dispose() {
+    window.removeEventListener('scroll', this._onScroll)
+    for (const item of this.items) {
+      item.io?.disconnect()
+      item.el.style.opacity = ''
+    }
+    this.geometry.dispose()
+    this.stage.dispose()
+  }
+}
+```
+
+```glsl
+// src/shaders/imagePlane.vert
+uniform float uHover;
+uniform float uVelocity;
+uniform float uBend;
+uniform float uReveal;
+uniform vec2  uMouse;
+
+varying vec2  vUv;
+varying float vWave;
+
+const float PI = 3.141592653589793;
+
+void main() {
+  vUv = uv;
+
+  vec3 pos = position;
+
+  // 1) 스크롤 속도에 따라 플레인이 활처럼 휜다
+  float bend = sin(uv.x * PI) * uVelocity * uBend;
+  pos.y += bend;
+  pos.z += -abs(uVelocity) * uBend * 0.6 * sin(uv.y * PI);
+
+  // 2) hover 시 마우스를 중심으로 살짝 부푼다
+  float d = distance(uv, uMouse);
+  float bulge = exp(-d * d * 8.0) * uHover * 0.09;
+  pos.z += bulge;
+
+  // 3) 리빌: 아래에서 올라오며 펴진다
+  float reveal = smoothstep(0.0, 1.0, uReveal);
+  pos.y += (1.0 - reveal) * -0.12;
+  pos.z += (1.0 - reveal) * sin(uv.x * PI) * 0.25;
+
+  vWave = bend + bulge;
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+}
+```
+
+```glsl
+// src/shaders/imagePlane.frag
+precision highp float;
+
+uniform sampler2D uTexture;
+uniform vec2  uPlaneSize;
+uniform vec2  uImageSize;
+uniform float uHover;
+uniform vec2  uMouse;
+uniform float uVelocity;
+uniform float uRgbShift;
+uniform float uScale;
+uniform float uReveal;
+uniform float uTime;
+
+varying vec2  vUv;
+varying float vWave;
+
+/** object-fit: cover 와 동일한 UV 보정 */
+vec2 coverUv(vec2 uv, vec2 planeSize, vec2 imageSize) {
+  vec2 ratio = vec2(
+    min((planeSize.x / planeSize.y) / (imageSize.x / imageSize.y), 1.0),
+    min((planeSize.y / planeSize.x) / (imageSize.y / imageSize.x), 1.0)
+  );
+  return vec2(
+    uv.x * ratio.x + (1.0 - ratio.x) * 0.5,
+    uv.y * ratio.y + (1.0 - ratio.y) * 0.5
+  );
+}
+
+void main() {
+  vec2 uv = coverUv(vUv, uPlaneSize, uImageSize);
+
+  // hover 줌 (중심 기준)
+  float zoom = mix(1.0, 1.0 / uScale, uHover);
+  uv = (uv - 0.5) * zoom + 0.5;
+
+  // 마우스 방향으로의 미세한 밀림
+  vec2 dir = normalize(vUv - uMouse + 1e-5);
+  float dist = distance(vUv, uMouse);
+  uv += dir * exp(-dist * dist * 6.0) * uHover * 0.018;
+
+  // RGB shift: 속도 + hover 에 비례. 채널별로 다른 오프셋
+  float shift = uRgbShift * (uHover * 0.6 + abs(uVelocity) * 1.4);
+  vec2 offset = vec2(shift, shift * 0.35);
+
+  float r = texture2D(uTexture, uv + offset).r;
+  vec2  gb = texture2D(uTexture, uv).gb;
+  float b2 = texture2D(uTexture, uv - offset).b;
+
+  vec3 color = vec3(r, gb.x, mix(gb.y, b2, 0.7));
+
+  // 휨에 따른 명암 → 종이가 접히는 느낌
+  color *= 1.0 + vWave * 1.6;
+
+  // 리빌: 아래에서 위로 열리는 마스크
+  float reveal = smoothstep(0.0, 1.0, uReveal);
+  float mask = smoothstep(0.0, 0.55, reveal - (1.0 - vUv.y) * 0.55);
+
+  // 얇은 그레인
+  float grain = fract(sin(dot(gl_FragCoord.xy + uTime, vec2(12.9898, 78.233))) * 43758.5453);
+  color += (grain - 0.5) * 0.018;
+
+  gl_FragColor = vec4(color, mask);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+```
+
+**함정 정리**
+- 이미지 원본을 그대로 쓰면 VRAM이 폭발한다. **표시 크기 × DPR 상한**으로 서버에서 리사이즈해라. 1200px 이상은 거의 항상 낭비.
+- `generateMipmaps = false` + `minFilter = LinearFilter`는 메모리 33%를 아끼지만, 이미지가 축소 표시되면 앨리어싱이 생긴다. 축소가 크면 밉맵을 켜라.
+- `el.style.opacity = '0'`은 **텍스처 로드 후**에 해야 한다. 안 그러면 로딩 중 빈 화면이 보인다.
+- 스크롤 위치는 `window.scrollY`가 아니라 **Lenis의 `animatedScroll`**을 써야 스무스 스크롤과 동기된다(P6와 조합 시).
+- `getBoundingClientRect()`는 리플로우를 유발한다. `_measure()`는 리사이즈/리빌드 때만 호출하고 프레임마다 부르지 마라.
+
+---
+
+## P9 — 이미지 전환 (displacement map transition)
+
+**효과**: 두 이미지를 흑백 디스플레이스먼트 맵으로 섞는다. 맵의 밝기에 따라 전환 시점이 달라져 "찢어지듯/녹아들듯" 넘어간다.
+
+**언제 쓰나**
+- 히어로 슬라이더, 프로젝트 썸네일 hover 전환
+- Before/After
+- 캐러셀
+
+**비용**: 번들 +0KB · GPU **낮음** · 텍스처 3장(A, B, disp)
+
+**조절 파라미터**
+
+| uniform | 범위 | 의미 |
+|---|---|---|
+| `uProgress` | 0 ~ 1 | 전환 진행도 |
+| `uIntensity` | 0.1 ~ 1.5 | 디스플레이스먼트 세기 |
+| `uAngle` | 0 ~ 2π | 흐르는 방향 |
+| disp map | — | 노이즈/스트라이프/링 등. 룩을 결정하는 가장 큰 변수 |
+
+### 코드
+
+```js
+// src/scenes/imageTransition.js
+import * as THREE from 'three'
+import Stage from '../gl/Stage.js'
+import gsap from 'gsap'
+import vert from '../shaders/transition.vert'
+import frag from '../shaders/transition.frag'
+
+/** 디스플레이스먼트 맵을 코드로 생성 (파일 없이) */
+function makeDisplacementTexture(size = 512) {
+  const c = document.createElement('canvas')
+  c.width = c.height = size
+  const ctx = c.getContext('2d')
+
+  // 여러 개의 부드러운 방사 그라디언트를 겹쳐 유기적 패턴을 만든다
+  ctx.fillStyle = '#000'
+  ctx.fillRect(0, 0, size, size)
+  ctx.globalCompositeOperation = 'lighter'
+  for (let i = 0; i < 22; i++) {
+    const x = Math.random() * size
+    const y = Math.random() * size
+    const r = size * (0.08 + Math.random() * 0.28)
+    const g = ctx.createRadialGradient(x, y, 0, x, y, r)
+    g.addColorStop(0, 'rgba(255,255,255,0.75)')
+    g.addColorStop(1, 'rgba(255,255,255,0)')
+    ctx.fillStyle = g
+    ctx.beginPath()
+    ctx.arc(x, y, r, 0, Math.PI * 2)
+    ctx.fill()
+  }
+  const tex = new THREE.CanvasTexture(c)
+  tex.wrapS = tex.wrapT = THREE.RepeatWrapping
+  tex.colorSpace = THREE.NoColorSpace   // 데이터 텍스처
+  return tex
+}
+
+export default function mountImageTransition(canvas, urls, opts = {}) {
+  const { intensity = 0.65, angle = Math.PI * 0.25, duration = 1.2, reduced = false } = opts
+
+  const stage = new Stage({ canvas, dprMax: 1.75, antialias: false })
+  stage.camera = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5, 0, 10)
+  stage.camera.position.z = 1
+
+  const loader = new THREE.TextureLoader()
+  const textures = urls.map((u) => {
+    const t = loader.load(u)
+    t.colorSpace = THREE.SRGBColorSpace
+    t.minFilter = THREE.LinearFilter
+    t.generateMipmaps = false
+    return t
+  })
+
+  const disp = makeDisplacementTexture(512)
+
+  const uniforms = {
+    uTextureA:  { value: textures[0] },
+    uTextureB:  { value: textures[1 % textures.length] },
+    uDisp:      { value: disp },
+    uProgress:  { value: 0 },
+    uIntensity: { value: intensity },
+    uAngle:     { value: angle },
+    uResolution:{ value: new THREE.Vector2(1, 1) },
+    uSizeA:     { value: new THREE.Vector2(1, 1) },
+    uSizeB:     { value: new THREE.Vector2(1, 1) },
+  }
+
+  const mesh = new THREE.Mesh(
+    new THREE.PlaneGeometry(1, 1),
+    new THREE.ShaderMaterial({ vertexShader: vert, fragmentShader: frag, uniforms })
+  )
+  stage.scene.add(mesh)
+
+  stage.onResize = (w, h, dpr) => {
+    uniforms.uResolution.value.set(w * dpr, h * dpr)
+    // 오쏘 카메라를 화면 비율에 맞춘다
+    const aspect = w / h
+    stage.camera.left = -0.5 * aspect
+    stage.camera.right = 0.5 * aspect
+    stage.camera.updateProjectionMatrix()
+    mesh.scale.set(aspect, 1, 1)
+  }
+  stage.onResize(stage.size.w, stage.size.h, stage.size.dpr)
+
+  // 텍스처 로드가 끝나면 크기를 기록
+  Promise.all(urls.map(u => loader.loadAsync(u))).then((texs) => {
+    texs.forEach((t, i) => { t.colorSpace = THREE.SRGBColorSpace; textures[i] = t })
+    uniforms.uSizeA.value.set(texs[0].image.width, texs[0].image.height)
+    uniforms.uSizeB.value.set(texs[1 % texs.length].image.width, texs[1 % texs.length].image.height)
+  })
+
+  let index = 0
+  let animating = false
+
+  /** 다음 이미지로 전환 */
+  function goTo(next) {
+    if (animating || next === index) return
+    animating = true
+    uniforms.uTextureB.value = textures[next]
+    uniforms.uSizeB.value.set(textures[next].image?.width ?? 1, textures[next].image?.height ?? 1)
+
+    gsap.fromTo(uniforms.uProgress, { value: 0 }, {
+      value: 1,
+      duration: reduced ? 0 : duration,
+      ease: 'power2.inOut',
+      onComplete: () => {
+        uniforms.uTextureA.value = textures[next]
+        uniforms.uSizeA.value.copy(uniforms.uSizeB.value)
+        uniforms.uProgress.value = 0
+        index = next
+        animating = false
+      },
+    })
+  }
+
+  stage.start()
+
+  return {
+    next: () => goTo((index + 1) % textures.length),
+    goTo,
+    dispose() {
+      textures.forEach(t => t.dispose())
+      disp.dispose()
+      stage.dispose()
+    },
+  }
+}
+```
+
+```glsl
+// src/shaders/transition.vert
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+```
+
+```glsl
+// src/shaders/transition.frag
+precision highp float;
+
+uniform sampler2D uTextureA;
+uniform sampler2D uTextureB;
+uniform sampler2D uDisp;
+uniform float uProgress;
+uniform float uIntensity;
+uniform float uAngle;
+uniform vec2  uResolution;
+uniform vec2  uSizeA;
+uniform vec2  uSizeB;
+
+varying vec2 vUv;
+
+vec2 coverUv(vec2 uv, vec2 planeSize, vec2 imageSize) {
+  vec2 ratio = vec2(
+    min((planeSize.x / planeSize.y) / (imageSize.x / imageSize.y), 1.0),
+    min((planeSize.y / planeSize.x) / (imageSize.y / imageSize.x), 1.0)
+  );
+  return vec2(uv.x * ratio.x + (1.0 - ratio.x) * 0.5,
+              uv.y * ratio.y + (1.0 - ratio.y) * 0.5);
+}
+
+void main() {
+  vec2 dir = vec2(cos(uAngle), sin(uAngle));
+  float disp = texture2D(uDisp, vUv).r;
+
+  // 진행도에 따라 A는 밀려나고 B는 들어온다
+  float pA = uProgress;
+  float pB = 1.0 - uProgress;
+
+  vec2 uvA = coverUv(vUv, uResolution, uSizeA) + dir * disp * uIntensity * pA;
+  vec2 uvB = coverUv(vUv, uResolution, uSizeB) - dir * disp * uIntensity * pB;
+
+  vec4 a = texture2D(uTextureA, uvA);
+  vec4 b = texture2D(uTextureB, uvB);
+
+  // 디스플레이스먼트 값에 따라 전환 시점이 픽셀마다 다르다 → "찢어지는" 느낌
+  float threshold = smoothstep(disp * 0.5, disp * 0.5 + 0.5, uProgress);
+  vec4 color = mix(a, b, threshold);
+
+  // 전환 순간의 색수차
+  float edge = 1.0 - abs(uProgress * 2.0 - 1.0);
+  float ca = edge * 0.006;
+  color.r = mix(a, b, smoothstep(disp * 0.5, disp * 0.5 + 0.5, uProgress + ca)).r;
+  color.b = mix(a, b, smoothstep(disp * 0.5, disp * 0.5 + 0.5, uProgress - ca)).b;
+
+  gl_FragColor = color;
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+```
+
+**변형 아이디어**
+- `uDisp`를 스트라이프(세로줄)로 바꾸면 블라인드 전환.
+- `threshold` 대신 `step(disp, uProgress)`를 쓰면 딱딱한 디졸브.
+- `uAngle`을 마우스 방향으로 바꾸면 "밀어내는" 인터랙션.
+
+---
+
+## P10 — 유리/굴절 (MeshTransmissionMaterial + dispersion)
+
+**효과**: 배경을 굴절시키는 유리 오브젝트. 두께·거칠기·색수차로 아크릴/크리스탈/물방울을 만든다.
+
+**언제 쓰나**
+- 히어로의 중심 오브제 (로고를 유리로)
+- 유리 뒤로 텍스트가 왜곡되어 보이는 연출
+- **주의: 가장 비싼 효과다.** 매 프레임 씬을 별도 버퍼로 다시 렌더한다.
+
+**비용**: 번들 +0KB(drei) · GPU **매우높음** · `samples=6`이면 프래그먼트당 텍스처 페치 6회 + 씬 재렌더 1회 · 저사양 모바일에서는 **끄는 것을 기본으로** 하라
+
+**조절 파라미터** (drei `MeshTransmissionMaterial`)
+
+| prop | 기본 | 실용 범위 | 의미 |
+|---|---|---|---|
+| `transmission` | 1 | 0.9 ~ 1 | 투과율 |
+| `thickness` | 0 | 0.2 ~ 2.5 | 굴절 깊이. 클수록 왜곡 강함 |
+| `roughness` | 0 | 0 ~ 0.35 | 뒤 배경이 뿌옇게 |
+| `chromaticAberration` | 0.03 | 0.02 ~ 0.2 | 색분산. 0.15 넘으면 장난감 느낌 |
+| `anisotropicBlur` | 0.1 | 0 ~ 1 | 방향성 블러 |
+| `distortion` | 0 | 0 ~ 0.6 | 표면 왜곡 |
+| `distortionScale` | 0.5 | 0.1 ~ 1 | 왜곡 패턴 크기 |
+| `temporalDistortion` | 0 | 0 ~ 0.4 | 왜곡의 시간 변화 |
+| `samples` | 6 | 2 ~ 10 | **성능 직결**. 모바일 2~4 |
+| `resolution` | undefined(풀스크린) | 256 ~ 1024 | 버퍼 해상도. **반드시 낮춰라** |
+| `backside` | false | — | 뒷면까지 렌더(2배 비쌈) |
+| `transmissionSampler` | false | — | three 내장 샘플러 공유(여러 개일 때 필수) |
+| `ior` | 1.5 | 1.1 ~ 2.4 | 굴절률. 물 1.33, 유리 1.5, 다이아 2.4 |
+
+### R3F 코드
+
+```tsx
+// src/gl/GlassHero.tsx
+import * as THREE from 'three'
+import { Canvas, useFrame } from '@react-three/fiber'
+import {
+  MeshTransmissionMaterial, Environment, Text, Float, useDetectGPU,
+} from '@react-three/drei'
+import { useRef, useMemo } from 'react'
+
+function GlassObject({ quality }: { quality: 'low' | 'mid' | 'high' }) {
+  const ref = useRef<THREE.Mesh>(null!)
+
+  const config = useMemo(() => ({
+    low:  { samples: 2, resolution: 256, thickness: 0.6, chromaticAberration: 0.04 },
+    mid:  { samples: 4, resolution: 512, thickness: 1.0, chromaticAberration: 0.08 },
+    high: { samples: 8, resolution: 1024, thickness: 1.4, chromaticAberration: 0.12 },
+  })[quality], [quality])
+
+  useFrame((state, delta) => {
+    ref.current.rotation.y += delta * 0.25
+    ref.current.rotation.x = Math.sin(state.clock.elapsedTime * 0.4) * 0.18
+    // 마우스로 살짝 기울인다
+    ref.current.rotation.z = THREE.MathUtils.lerp(
+      ref.current.rotation.z, state.pointer.x * 0.25, 1 - Math.pow(0.005, delta)
+    )
+  })
+
+  return (
+    <Float speed={1.4} rotationIntensity={0.2} floatIntensity={0.6}>
+      <mesh ref={ref}>
+        <torusKnotGeometry args={[1, 0.34, 180, 32]} />
+        <MeshTransmissionMaterial
+          transmission={1}
+          thickness={config.thickness}
+          roughness={0.05}
+          chromaticAberration={config.chromaticAberration}
+          anisotropicBlur={0.35}
+          distortion={0.25}
+          distortionScale={0.35}
+          temporalDistortion={0.12}
+          samples={config.samples}
+          resolution={config.resolution}
+          ior={1.5}
+          backside={false}
+          background={new THREE.Color('#07070a')}
+          attenuationDistance={2.4}
+          attenuationColor="#a78bfa"
+          color="#ffffff"
+        />
+      </mesh>
+    </Float>
+  )
+}
+
+/** 유리 뒤에서 왜곡될 텍스트 */
+function BackText() {
+  return (
+    <Text
+      position={[0, 0, -2.2]}
+      fontSize={1.15}
+      letterSpacing={-0.05}
+      color="#e9d5ff"
+      anchorX="center"
+      anchorY="middle"
+      maxWidth={7}
+    >
+      REFRACT
+    </Text>
+  )
+}
+
+export default function GlassHero() {
+  const gpu = useDetectGPU()
+  // tier: 0 미지원/블록리스트, 1 저사양, 2 중간, 3 고사양
+  const quality = gpu.tier >= 3 && !gpu.isMobile ? 'high' : gpu.tier >= 2 ? 'mid' : 'low'
+
+  if (gpu.tier === 0) return null   // 폴백 DOM 이 그대로 보인다
+
+  return (
+    <Canvas
+      dpr={quality === 'high' ? [1, 2] : [1, 1.5]}
+      gl={{ antialias: quality !== 'low', powerPreference: 'high-performance' }}
+      camera={{ position: [0, 0, 5], fov: 40 }}
+      style={{ position: 'absolute', inset: 0 }}
+    >
+      <color attach="background" args={['#07070a']} />
+      <Environment preset="studio" environmentIntensity={0.9} />
+      <ambientLight intensity={0.35} />
+      <directionalLight position={[4, 5, 3]} intensity={2} />
+      <BackText />
+      <GlassObject quality={quality} />
+    </Canvas>
+  )
+}
+```
+
+### Vanilla 대안 — 화면 굴절 셰이더
+
+drei 없이, 이전 프레임의 화면을 굴절시키는 저렴한 방식.
+
+```js
+// src/scenes/glassVanilla.js (핵심 부분)
+import * as THREE from 'three'
+
+// 1) 배경 씬을 렌더타깃에 그린다
+const rt = new THREE.WebGLRenderTarget(
+  Math.round(window.innerWidth * 0.5),   // 절반 해상도면 충분하다
+  Math.round(window.innerHeight * 0.5),
+  { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, samples: 0 }
+)
+
+const glassMat = new THREE.ShaderMaterial({
+  uniforms: {
+    uScene:      { value: rt.texture },
+    uResolution: { value: new THREE.Vector2() },
+    uIor:        { value: 1.42 },
+    uDispersion: { value: 0.012 },
+  },
+  vertexShader: /* glsl */`
+    varying vec3 vWorldNormal;
+    varying vec3 vViewDir;
+    void main() {
+      vec4 worldPos = modelMatrix * vec4(position, 1.0);
+      vWorldNormal = normalize(mat3(modelMatrix) * normal);
+      vViewDir = normalize(cameraPosition - worldPos.xyz);
+      gl_Position = projectionMatrix * viewMatrix * worldPos;
+    }
+  `,
+  fragmentShader: /* glsl */`
+    precision highp float;
+    uniform sampler2D uScene;
+    uniform vec2  uResolution;
+    uniform float uIor;
+    uniform float uDispersion;
+    varying vec3 vWorldNormal;
+    varying vec3 vViewDir;
+
+    void main() {
+      vec2 screenUv = gl_FragCoord.xy / uResolution;
+      vec3 n = normalize(vWorldNormal);
+      vec3 v = normalize(vViewDir);
+
+      // 채널별로 다른 굴절률 → 분산(dispersion)
+      vec3 rR = refract(-v, n, 1.0 / (uIor - uDispersion));
+      vec3 rG = refract(-v, n, 1.0 / uIor);
+      vec3 rB = refract(-v, n, 1.0 / (uIor + uDispersion));
+
+      float k = 0.16;   // 굴절 오프셋 세기
+      float r = texture2D(uScene, screenUv + rR.xy * k).r;
+      float g = texture2D(uScene, screenUv + rG.xy * k).g;
+      float b = texture2D(uScene, screenUv + rB.xy * k).b;
+
+      // 프레넬: 가장자리가 밝게
+      float fres = pow(1.0 - max(dot(n, v), 0.0), 3.0);
+
+      vec3 col = vec3(r, g, b) + fres * 0.55;
+      gl_FragColor = vec4(col, 1.0);
+      #include <tonemapping_fragment>
+      #include <colorspace_fragment>
+    }
+  `,
+})
+
+// 렌더 루프
+function render() {
+  glassMesh.visible = false
+  renderer.setRenderTarget(rt)
+  renderer.render(scene, camera)     // 배경만
+  renderer.setRenderTarget(null)
+
+  glassMesh.visible = true
+  glassMat.uniforms.uResolution.value.set(
+    renderer.domElement.width, renderer.domElement.height
+  )
+  renderer.render(scene, camera)     // 전체
+}
+```
+
+**성능 규칙**
+- `resolution`을 절대 풀스크린으로 두지 마라. 512면 대부분 충분하다.
+- 유리 오브젝트가 2개 이상이면 `transmissionSampler={true}`로 버퍼를 공유해라. 안 그러면 개수만큼 씬을 다시 그린다.
+- 모바일은 `samples={2}`, `resolution={256}`, `backside={false}`로 시작해서 올려라.
+- `MeshTransmissionMaterial` 뒤의 오브젝트만 굴절된다. 유리 자체는 `EffectComposer`의 depth 기반 효과와 충돌할 수 있다.
+
+---
+
+## P11 — 3D 텍스트 (troika) + 디스플레이스먼트 리빌
+
+**효과**: SDF 기반 텍스트를 WebGL에 렌더하고 커스텀 셰이더로 왜곡/리빌한다. `TextGeometry`(폰트를 메쉬로 압출)와 달리 **폴리곤이 아니라 SDF**라 가볍고 선명하다.
+
+**언제 쓰나**
+- WebGL 씬 안의 대형 타이포그래피
+- 글자가 파티클/노이즈로 흩어지는 연출
+- 3D 공간에 배치되는 라벨
+
+**비용**: 번들 **+55KB** (troika-three-text + troika-three-utils, 폰트 파싱은 Web Worker) · GPU 낮음 · 폰트 파일(.woff/.ttf) 별도
+
+**조절 파라미터**
+
+| 항목 | 범위 | 의미 |
+|---|---|---|
+| `fontSize` | — | 월드 단위 |
+| `letterSpacing` | -0.08 ~ 0.1 | em 단위 |
+| `sdfGlyphSize` | 64 / 128 / 256 | SDF 아틀라스 해상도. 큰 텍스트면 128+ |
+| `outlineWidth` | 0 ~ 0.1 | 아웃라인 |
+| `uProgress` | 0 ~ 1 | 리빌 진행도 |
+| `uDisplace` | 0 ~ 1 | 글자 왜곡 세기 |
+
+### 코드
+
+```js
+// src/scenes/glText.js
+import * as THREE from 'three'
+import { Text, preloadFont } from 'troika-three-text'
+import Stage from '../gl/Stage.js'
+import gsap from 'gsap'
+
+/**
+ * troika 의 Text 는 내부적으로 자체 머티리얼을 쓰지만,
+ * `material` 에 우리 ShaderMaterial 을 넣으면 troika 가 SDF 처리를 주입해준다.
+ * 커스텀 셰이더는 troika 가 제공하는 `troikaSdfDerivedUniforms` 를 통해 확장된다.
+ * 가장 단순하고 안전한 방법은 material 을 그대로 두고 **onBeforeCompile** 로 훅킹하는 것.
+ */
+export default function mountGlText(canvas, opts = {}) {
+  const {
+    text = 'DESIGNPACA',
+    fontUrl = '/fonts/Inter-Bold.woff',
+    color = '#f4f4f5',
+    reduced = false,
+  } = opts
+
+  const stage = new Stage({ canvas, dprMax: 2, antialias: false, alpha: true })
+  stage.camera.fov = 35
+  stage.camera.position.set(0, 0, 5)
+  stage.camera.updateProjectionMatrix()
+
+  const uniforms = {
+    uTime:     { value: 0 },
+    uProgress: { value: 0 },
+    uDisplace: { value: 0 },
+    uPointer:  { value: new THREE.Vector2(0, 0) },
+  }
+
+  const material = new THREE.MeshBasicMaterial({
+    color: new THREE.Color(color),
+    transparent: true,
+  })
+
+  // onBeforeCompile 로 troika 가 생성한 셰이더에 우리 코드를 주입한다
+  material.onBeforeCompile = (shader) => {
+    Object.assign(shader.uniforms, uniforms)
+
+    shader.vertexShader = shader.vertexShader
+      .replace(
+        '#include <common>',
+        /* glsl */`
+        #include <common>
+        uniform float uTime;
+        uniform float uProgress;
+        uniform float uDisplace;
+        uniform vec2  uPointer;
+        varying vec2  vLocalPos;
+
+        float hash(vec2 p) {
+          return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+        }
+        `
+      )
+      .replace(
+        '#include <begin_vertex>',
+        /* glsl */`
+        #include <begin_vertex>
+        vLocalPos = position.xy;
+
+        // 글자마다 다른 위상: x 좌표를 시드로 사용
+        float seed = hash(vec2(floor(position.x * 3.0), 0.0));
+
+        // 리빌: 왼쪽부터 순차적으로 올라온다
+        float local = clamp(uProgress * 2.2 - position.x * 0.25 - 0.2, 0.0, 1.0);
+        local = local * local * (3.0 - 2.0 * local);   // smoothstep
+
+        transformed.y += (1.0 - local) * (-0.55 - seed * 0.4);
+        transformed.z += (1.0 - local) * (seed - 0.5) * 1.6;
+
+        // 마우스 근처 밀어내기
+        float d = distance(position.xy, uPointer * 2.0);
+        transformed.xy += normalize(position.xy - uPointer * 2.0 + 1e-5)
+                        * exp(-d * d * 1.4) * uDisplace * 0.22;
+
+        // 상시 미세 부유
+        transformed.y += sin(uTime * 0.9 + position.x * 1.6) * 0.012;
+        `
+      )
+
+    shader.fragmentShader = shader.fragmentShader
+      .replace(
+        '#include <common>',
+        /* glsl */`
+        #include <common>
+        uniform float uProgress;
+        varying vec2 vLocalPos;
+        `
+      )
+      .replace(
+        '#include <dithering_fragment>',
+        /* glsl */`
+        #include <dithering_fragment>
+        float local = clamp(uProgress * 2.2 - vLocalPos.x * 0.25 - 0.2, 0.0, 1.0);
+        gl_FragColor.a *= smoothstep(0.0, 0.35, local);
+        `
+      )
+  }
+  material.customProgramCacheKey = () => 'glText-v1'   // 셰이더 캐시 키 고정
+
+  const label = new Text()
+  label.text = text
+  label.font = fontUrl
+  label.fontSize = 0.62
+  label.letterSpacing = -0.045
+  label.lineHeight = 1
+  label.anchorX = 'center'
+  label.anchorY = 'middle'
+  label.maxWidth = 8
+  label.sdfGlyphSize = 128           // 큰 텍스트일수록 크게
+  label.material = material
+  label.sync()                        // 레이아웃 계산 (Web Worker)
+
+  stage.scene.add(label)
+
+  const target = new THREE.Vector2()
+  const onPointer = (e) => {
+    target.set(
+      (e.clientX / innerWidth) * 2 - 1,
+      -(e.clientY / innerHeight) * 2 + 1
+    )
+  }
+  window.addEventListener('pointermove', onPointer, { passive: true })
+
+  stage.add((t, dt) => {
+    uniforms.uTime.value = t
+    uniforms.uPointer.value.lerp(target, 1 - Math.pow(0.003, dt))
+  })
+
+  if (reduced) {
+    uniforms.uProgress.value = 1
+    stage.renderOnce()
+  } else {
+    stage.start()
+    gsap.to(uniforms.uProgress, { value: 1, duration: 1.6, ease: 'power3.out', delay: 0.2 })
+    gsap.to(uniforms.uDisplace, { value: 1, duration: 1.2, ease: 'power2.out', delay: 1.2 })
+  }
+
+  return () => {
+    window.removeEventListener('pointermove', onPointer)
+    label.dispose()      // troika Text 는 자체 dispose 를 가진다
+    material.dispose()
+    stage.dispose()
+  }
+}
+
+// 폰트 프리로드 (첫 sync 지연 제거)
+export function preload(fontUrl, sampleText) {
+  return new Promise((resolve) => {
+    preloadFont({ font: fontUrl, characters: sampleText, sdfGlyphSize: 128 }, resolve)
+  })
+}
+```
+
+### R3F 버전 (drei `<Text>`)
+
+```tsx
+import { Text } from '@react-three/drei'
+import { useRef } from 'react'
+import { useFrame } from '@react-three/fiber'
+import * as THREE from 'three'
+
+function GlText() {
+  const matRef = useRef<THREE.MeshBasicMaterial>(null!)
+  const progress = useRef(0)
+
+  useFrame((_, delta) => {
+    progress.current = Math.min(1, progress.current + delta * 0.6)
+    // onBeforeCompile 로 주입한 uniform 접근
+    const u = (matRef.current as any).userData.uniforms
+    if (u) u.uProgress.value = progress.current
+  })
+
+  return (
+    <Text
+      font="/fonts/Inter-Bold.woff"
+      fontSize={0.62}
+      letterSpacing={-0.045}
+      anchorX="center"
+      anchorY="middle"
+      maxWidth={8}
+      sdfGlyphSize={128}
+    >
+      DESIGNPACA
+      <meshBasicMaterial ref={matRef} transparent color="#f4f4f5" />
+    </Text>
+  )
+}
+```
+
+**주의**
+- **`onBeforeCompile`을 쓸 때는 `customProgramCacheKey`를 반드시 지정**해라. 안 하면 three가 셰이더를 매번 재컴파일하거나, 반대로 다른 머티리얼의 컴파일 결과를 재사용해 버그가 난다.
+- `.woff2`는 troika가 지원하지 않는다. **`.woff` 또는 `.ttf`/`.otf`**를 써라.
+- `preloadFont()`로 미리 SDF 아틀라스를 구워두면 첫 렌더의 깜빡임이 사라진다.
+- 텍스트가 작다면 troika 대신 **DOM 텍스트를 캔버스 위에 겹치는 게** 항상 더 선명하고 접근성이 좋다.
+
+---
+
+## P12 — 포스트프로세싱 스택 + 커스텀 이펙트
+
+**효과**: 렌더 결과에 bloom / 색수차 / 그레인 / 비네트 / DOF를 얹는다. `postprocessing`(pmndrs) 라이브러리는 여러 이펙트를 **하나의 셰이더로 병합**해서 three 기본 `EffectComposer`보다 훨씬 빠르다.
+
+**언제 쓰나**
+- 발광 오브젝트/네온 (Bloom 없이는 안 산다)
+- 필름 룩 (grain + vignette + subtle CA)
+- 전체 톤을 통일해야 할 때
+
+**비용**: 번들 **+25~40KB** (postprocessing, 사용 이펙트에 따라) · GPU **중간~높음** · Bloom은 다운샘플 체인 때문에 풀스크린 패스 5~7회
+
+**조절 파라미터**
+
+| 이펙트 | 핵심 prop | 실용 범위 |
+|---|---|---|
+| `Bloom` | `intensity`, `luminanceThreshold`, `luminanceSmoothing`, `mipmapBlur` | th 0.6~0.95, int 0.4~1.6, `mipmapBlur` **항상 true** |
+| `ChromaticAberration` | `offset` | `[0.0005, 0.0008]` ~ `[0.003, 0.004]` |
+| `Noise` | `opacity`, `premultiply` | 0.015 ~ 0.06 |
+| `Vignette` | `offset`, `darkness` | offset 0.15~0.45, darkness 0.5~1.2 |
+| `DepthOfField` | `focusDistance`, `focalLength`, `bokehScale` | bokehScale 1~4. **모바일에서 끄기** |
+| `ToneMapping` | `mode` | `ACES_FILMIC` 또는 `AGX` |
+
+### R3F 코드
+
+```tsx
+// src/gl/PostFX.tsx
+import {
+  EffectComposer, Bloom, ChromaticAberration, Noise, Vignette,
+  DepthOfField, ToneMapping, SMAA,
+} from '@react-three/postprocessing'
+import { BlendFunction, KernelSize, ToneMappingMode } from 'postprocessing'
+import * as THREE from 'three'
+import { useMemo } from 'react'
+
+type Quality = 'low' | 'mid' | 'high'
+
+export default function PostFX({ quality }: { quality: Quality }) {
+  const caOffset = useMemo(() => new THREE.Vector2(0.0008, 0.0012), [])
+
+  if (quality === 'low') {
+    // 저사양: 비네트만. 풀스크린 패스 1회
+    return (
+      <EffectComposer multisampling={0} enableNormalPass={false}>
+        <Vignette offset={0.32} darkness={0.75} blendFunction={BlendFunction.NORMAL} />
+        <ToneMapping mode={ToneMappingMode.AGX} />
+      </EffectComposer>
+    )
+  }
+
+  return (
+    <EffectComposer
+      multisampling={quality === 'high' ? 4 : 0}
+      enableNormalPass={false}
+      depthBuffer={quality === 'high'}
+      frameBufferType={THREE.HalfFloatType}   // HDR bloom 을 위해 필요
+    >
+      <Bloom
+        intensity={0.85}
+        luminanceThreshold={0.72}
+        luminanceSmoothing={0.28}
+        mipmapBlur                    // 필수. 없으면 계단현상 + 느림
+        kernelSize={KernelSize.LARGE}
+        radius={0.72}
+      />
+      {quality === 'high' && (
+        <DepthOfField
+          focusDistance={0.012}
+          focalLength={0.035}
+          bokehScale={2.4}
+          height={480}
+        />
+      )}
+      <ChromaticAberration
+        offset={caOffset}
+        radialModulation
+        modulationOffset={0.18}
+        blendFunction={BlendFunction.NORMAL}
+      />
+      <Noise opacity={0.028} premultiply blendFunction={BlendFunction.SCREEN} />
+      <Vignette offset={0.28} darkness={0.72} />
+      <ToneMapping mode={ToneMappingMode.AGX} />
+      {quality === 'high' && <SMAA />}
+    </EffectComposer>
+  )
+}
+```
+
+> `EffectComposer`를 쓰면 `Canvas`의 `antialias`가 무의미해진다(오프스크린 버퍼에 그리므로).
+> 대신 `multisampling={4}` 또는 `<SMAA />`를 써라. 모바일에서는 둘 다 끄는 게 정답.
+
+### Vanilla 코드
+
+```js
+// src/gl/composer.js
+import * as THREE from 'three'
+import {
+  EffectComposer, RenderPass, EffectPass,
+  BloomEffect, ChromaticAberrationEffect, NoiseEffect, VignetteEffect,
+  ToneMappingEffect, ToneMappingMode, BlendFunction, KernelSize,
+} from 'postprocessing'
+
+export function createComposer(renderer, scene, camera, { quality = 'mid' } = {}) {
+  const composer = new EffectComposer(renderer, {
+    frameBufferType: THREE.HalfFloatType,
+    multisampling: quality === 'high' ? 4 : 0,
+  })
+
+  composer.addPass(new RenderPass(scene, camera))
+
+  const effects = []
+
+  if (quality !== 'low') {
+    effects.push(new BloomEffect({
+      intensity: 0.85,
+      luminanceThreshold: 0.72,
+      luminanceSmoothing: 0.28,
+      mipmapBlur: true,
+      kernelSize: KernelSize.LARGE,
+      radius: 0.72,
+    }))
+    effects.push(new ChromaticAberrationEffect({
+      offset: new THREE.Vector2(0.0008, 0.0012),
+      radialModulation: true,
+      modulationOffset: 0.18,
+    }))
+  }
+
+  effects.push(new NoiseEffect({
+    blendFunction: BlendFunction.SCREEN, premultiply: true,
+  }))
+  effects[effects.length - 1].blendMode.opacity.value = 0.028
+
+  effects.push(new VignetteEffect({ offset: 0.28, darkness: 0.72 }))
+  effects.push(new ToneMappingEffect({ mode: ToneMappingMode.AGX }))
+
+  // EffectPass 하나에 몰아넣으면 셰이더가 병합되어 훨씬 빠르다
+  composer.addPass(new EffectPass(camera, ...effects))
+
+  return {
+    composer,
+    render(dt) { composer.render(dt) },
+    setSize(w, h) { composer.setSize(w, h) },
+    dispose() {
+      composer.dispose()
+      effects.forEach(e => e.dispose?.())
+    },
+  }
+}
+```
+
+렌더 루프에서 `renderer.render()` 대신 `composer.render(delta)`를 호출한다.
+
+```js
+const fx = createComposer(stage.renderer, stage.scene, stage.camera, { quality: 'mid' })
+stage.renderer.render = () => {}          // Stage 의 기본 렌더를 무력화하거나
+stage.add((t, dt) => { /* uniform 갱신 */ })
+// 더 깔끔하게는 Stage._tick 을 오버라이드하거나 Stage 에 renderFn 훅을 추가
+```
+
+> **권장**: `Stage`에 `this.renderFn = () => this.renderer.render(this.scene, this.camera)` 필드를 추가하고
+> `_tick`에서 `this.renderFn()`을 호출하도록 바꾼 뒤, 컴포저를 쓸 때 `stage.renderFn = () => fx.render(stage.delta)`로 교체해라.
+
+### 커스텀 이펙트 만들기
+
+`postprocessing`의 `Effect`를 상속하면 **다른 이펙트와 하나의 셰이더로 병합**된다. 별도 패스보다 훨씬 싸다.
+
+```glsl
+/* src/shaders/effects/scanline.frag
+ * 사용 가능한 uniform: resolution, texelSize, cameraNear, cameraFar, aspect, time
+ * 사용 가능한 varying: vUv
+ * inputBuffer, depthBuffer(DEPTH attribute 지정 시)
+ */
+uniform float uIntensity;
+uniform float uCount;
+uniform float uSpeed;
+
+void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+  float line = sin((uv.y + time * uSpeed) * uCount * 3.14159265);
+  float scan = 1.0 - uIntensity * (0.5 + 0.5 * line);
+
+  // 가장자리로 갈수록 미세하게 어긋나는 색수차
+  vec2 dir = uv - 0.5;
+  float amt = dot(dir, dir) * uIntensity * 0.02;
+  float r = texture2D(inputBuffer, uv + dir * amt).r;
+  float b = texture2D(inputBuffer, uv - dir * amt).b;
+
+  outputColor = vec4(vec3(r, inputColor.g, b) * scan, inputColor.a);
+}
+```
+
+```js
+// src/gl/effects/ScanlineEffect.js
+import { Effect, BlendFunction } from 'postprocessing'
+import { Uniform } from 'three'
+import fragmentShader from '../../shaders/effects/scanline.frag'
+
+export default class ScanlineEffect extends Effect {
+  constructor({ intensity = 0.12, count = 420, speed = 0.06 } = {}) {
+    super('ScanlineEffect', fragmentShader, {
+      blendFunction: BlendFunction.NORMAL,
+      uniforms: new Map([
+        ['uIntensity', new Uniform(intensity)],
+        ['uCount', new Uniform(count)],
+        ['uSpeed', new Uniform(speed)],
+      ]),
+    })
+  }
+
+  get intensity() { return this.uniforms.get('uIntensity').value }
+  set intensity(v) { this.uniforms.get('uIntensity').value = v }
+
+  /** 매 프레임 호출됨 (선택적 오버라이드) */
+  update(renderer, inputBuffer, deltaTime) {
+    // 필요하면 여기서 uniform 갱신
+  }
+}
+```
+
+R3F에서 쓰려면 `wrapEffect`로 감싼다.
+
+```tsx
+import { wrapEffect } from '@react-three/postprocessing'
+import ScanlineEffect from './effects/ScanlineEffect'
+
+const Scanline = wrapEffect(ScanlineEffect)
+
+// <EffectComposer><Scanline intensity={0.12} /></EffectComposer>
+```
+
+**함정 정리**
+- **Bloom에는 `frameBufferType: HalfFloatType`이 필요**하다. 안 하면 1.0에서 클리핑돼서 발광이 안 산다.
+- 이펙트를 여러 `EffectPass`에 나눠 담으면 패스 수만큼 풀스크린 렌더가 늘어난다. **하나의 `EffectPass`에 몰아라.**
+- `DepthOfField`는 `depthBuffer: true`가 필요하고, 모바일에서 프레임을 반으로 깎는다.
+- 톤매핑은 **체인의 마지막**에. `renderer.toneMapping`은 컴포저를 쓰면 화면 렌더에만 적용되므로 `ToneMappingEffect`로 옮겨야 한다.
+- `postprocessing`은 three `>= 0.168 < 0.186`만 지원한다(2026-08 기준).
+
+---
+
+## P13 — GLTF 제품 씬 (DRACO/KTX2 + 환경광 + 스크롤 회전)
+
+**효과**: 압축된 3D 모델을 로드하고, HDRI 환경광으로 사실적으로 조명하고, 스크롤에 따라 회전시킨다.
+
+**언제 쓰나**
+- 제품 페이지 (신발/시계/디바이스)
+- 컨피규레이터
+- 브랜드 마스코트
+
+**비용**: 번들 **+15KB**(로더) + 디코더 WASM(**DRACO 약 200KB**, **basis 약 250KB**, 둘 다 캐시됨) · 모델 크기에 따라 GPU 가변 · HDRI 1K = **약 2MB**
+
+**모델 최적화 파이프라인** (`gltf-transform` CLI)
+
+```bash
+npm i -g @gltf-transform/cli
+
+# 1) 기본 최적화: 중복 제거, 미사용 데이터 제거, 인스턴싱
+gltf-transform optimize input.glb output.glb \
+  --compress draco \
+  --texture-compress webp \
+  --texture-size 1024
+
+# 2) 세밀하게 제어하려면 단계별로
+gltf-transform prune       in.glb s1.glb              # 미사용 노드/머티리얼 제거
+gltf-transform dedup       s1.glb s2.glb              # 중복 accessor/텍스처 병합
+gltf-transform weld        s2.glb s3.glb              # 정점 병합
+gltf-transform simplify    s3.glb s4.glb --ratio 0.6 --error 0.001
+gltf-transform resize      s4.glb s5.glb --width 1024 --height 1024
+gltf-transform uastc       s5.glb s6.glb --level 4 --rdo 4 --zstd true   # KTX2(고품질)
+# 또는 etc1s (더 작음, 품질 낮음)
+gltf-transform etc1s       s5.glb s6.glb --quality 200
+gltf-transform meshopt     s6.glb final.glb           # 지오메트리 압축(DRACO 대안)
+```
+
+| 압축 | 크기 감소 | 디코드 속도 | VRAM 절감 | 비고 |
+|---|---|---|---|---|
+| **DRACO** (지오메트리) | 90~95% | 느림(WASM) | 없음 | 다운로드 최적화 |
+| **meshopt** (지오메트리) | 80~90% + gzip | **빠름** | 없음 | DRACO보다 디코드 5~10배 빠름. **권장** |
+| **KTX2/ETC1S** (텍스처) | 80~90% | 중간 | **~10배** | 노멀맵엔 부적합(아티팩트) |
+| **KTX2/UASTC** (텍스처) | 50~70% | 중간 | ~4배 | 노멀맵/고품질용 |
+| WebP/AVIF (텍스처) | 70~85% | 빠름 | **없음** | GPU에선 여전히 RGBA로 펼쳐짐 |
+
+> **핵심**: WebP는 다운로드만 줄이고 **VRAM은 그대로**다. 모바일 VRAM이 문제면 **KTX2가 유일한 답**이다.
+
+### R3F 코드
+
+```tsx
+// src/gl/ProductScene.tsx
+import * as THREE from 'three'
+import { Canvas, useFrame } from '@react-three/fiber'
+import {
+  useGLTF, Environment, ContactShadows, Center, PerformanceMonitor,
+  Preload, AdaptiveDpr, Html, useProgress,
+} from '@react-three/drei'
+import { Suspense, useRef, useState, useEffect } from 'react'
+import { useGSAP } from '@gsap/react'   // 선택
+import gsap from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
+gsap.registerPlugin(ScrollTrigger)
+
+// drei 의 useGLTF 는 DRACO/meshopt 를 자동 설정한다.
+// 자체 호스팅 디코더를 쓰려면 두 번째 인자로 경로 지정
+useGLTF.preload('/models/product.glb', '/decoders/draco/')
+
+function Model({ scrollRef }: { scrollRef: React.MutableRefObject<number> }) {
+  const { scene } = useGLTF('/models/product.glb', '/decoders/draco/')
+  const group = useRef<THREE.Group>(null!)
+
+  // 머티리얼 일괄 조정 (모델러가 준 세팅이 웹에 안 맞는 경우가 대부분)
+  useEffect(() => {
+    scene.traverse((o) => {
+      if ((o as THREE.Mesh).isMesh) {
+        const m = o as THREE.Mesh
+        m.castShadow = false
+        m.receiveShadow = false
+        m.frustumCulled = true
+        const mat = m.material as THREE.MeshStandardMaterial
+        if (mat.isMeshStandardMaterial) {
+          mat.envMapIntensity = 1.1
+          // 컬러 텍스처만 sRGB. 나머지는 그대로 둔다
+          if (mat.map) mat.map.colorSpace = THREE.SRGBColorSpace
+          if (mat.emissiveMap) mat.emissiveMap.colorSpace = THREE.SRGBColorSpace
+          mat.needsUpdate = true
+        }
+      }
+    })
+  }, [scene])
+
+  useFrame((state, delta) => {
+    const t = scrollRef.current                        // 0~1
+    const g = group.current
+    g.rotation.y = THREE.MathUtils.lerp(g.rotation.y, t * Math.PI * 2.2, 1 - Math.pow(0.01, delta))
+    g.position.y = THREE.MathUtils.lerp(g.position.y, Math.sin(t * Math.PI) * 0.25, 0.08)
+    g.rotation.x = THREE.MathUtils.lerp(g.rotation.x, state.pointer.y * 0.12, 0.06)
+  })
+
+  return (
+    <Center>
+      <group ref={group}>
+        <primitive object={scene} />
+      </group>
+    </Center>
+  )
+}
+
+function Loader() {
+  const { progress } = useProgress()
+  return (
+    <Html center>
+      <div style={{ color: '#a1a1aa', fontSize: 13, fontVariantNumeric: 'tabular-nums' }}>
+        {progress.toFixed(0)}%
+      </div>
+    </Html>
+  )
+}
+
+export default function ProductScene() {
+  const scrollRef = useRef(0)
+  const [dpr, setDpr] = useState(1.5)
+
+  useGSAP(() => {
+    ScrollTrigger.create({
+      trigger: '#product-section',
+      start: 'top bottom',
+      end: 'bottom top',
+      scrub: true,
+      onUpdate: (self) => { scrollRef.current = self.progress },
+    })
+  }, [])
+
+  return (
+    <Canvas
+      dpr={dpr}
+      shadows={false}
+      gl={{ antialias: true, powerPreference: 'high-performance', alpha: true }}
+      camera={{ position: [0, 0.4, 4.2], fov: 35 }}
+      // 정적인 제품 씬이면 demand 로 바꿔 배터리를 아낀다 (스크롤 시 invalidate 필요)
+      frameloop="always"
+    >
+      <PerformanceMonitor
+        onIncline={() => setDpr(Math.min(2, window.devicePixelRatio))}
+        onDecline={() => setDpr(1)}
+      />
+      <AdaptiveDpr pixelated />
+
+      <Suspense fallback={<Loader />}>
+        {/* files 로 자체 HDRI 를 쓰면 preset 다운로드(외부 CDN)를 피할 수 있다 */}
+        <Environment files="/hdri/studio_1k.hdr" environmentIntensity={0.9} />
+        <Model scrollRef={scrollRef} />
+        <ContactShadows
+          position={[0, -1.05, 0]}
+          opacity={0.55}
+          scale={8}
+          blur={2.6}
+          far={2.2}
+          resolution={512}
+          frames={1}              // 정적 씬이면 1프레임만 굽고 멈춘다
+        />
+        <Preload all />
+      </Suspense>
+    </Canvas>
+  )
+}
+```
+
+**함정 정리**
+- `<Environment preset="...">`은 **외부 CDN(github)에서 HDRI를 받는다.** 프로덕션에서는 `files="/hdri/..."`로 자체 호스팅해라.
+- HDRI는 1K(2048×1024)면 충분하다. 4K는 20MB가 넘고 파싱에 수백 ms가 걸린다.
+- `ContactShadows`의 `frames={1}`은 정적 씬에서 프레임당 그림자 렌더를 없앤다. 오브젝트가 움직이면 `frames={Infinity}`(기본).
+- 모델의 `castShadow`/`receiveShadow`는 랜딩페이지에서 거의 항상 끄는 게 맞다. `ContactShadows`가 훨씬 싸고 예쁘다.
+- `useGLTF.preload()`는 컴포넌트 밖(모듈 최상위)에서 호출해야 효과가 있다.
+
+---
+
+## P14 — 마우스 인터랙션 툴킷 (raycast / lerp / trail)
+
+**효과**: 세 가지 기본기를 한 파일에 모은 유틸. 어느 씬에나 얹을 수 있다.
+1. **포인터 스무딩**: 프레임레이트 독립 lerp
+2. **레이캐스팅**: 오브젝트 픽킹 + hover 상태 관리
+3. **관성 추적**: 마우스 속도/방향 → 셰이더 uniform
+
+**언제 쓰나**: 거의 모든 씬. 특히 hover 반응이 필요한 3D 오브젝트
+
+**비용**: 번들 +0KB · CPU: 레이캐스팅은 오브젝트 수에 비례(수백 개면 `three-mesh-bvh` 고려)
+
+### 코드
+
+```js
+// src/gl/Pointer.js
+import * as THREE from 'three'
+
+/**
+ * 프레임레이트 독립 지수 감쇠 lerp.
+ * factor: 1초에 남는 비율. 0.001 = 매우 빠름, 0.5 = 느긋함
+ */
+export function damp(current, target, factor, dt) {
+  return current + (target - current) * (1 - Math.pow(factor, dt))
+}
+
+export function dampVec(currentVec, targetVec, factor, dt) {
+  return currentVec.lerp(targetVec, 1 - Math.pow(factor, dt))
+}
+
+export default class Pointer {
+  /**
+   * @param {HTMLElement} domElement   이벤트를 받을 엘리먼트
+   * @param {THREE.Camera} camera
+   * @param {object} [opts]
+   * @param {number} [opts.smoothing=0.002] 낮을수록 빠르게 따라옴
+   */
+  constructor(domElement, camera, { smoothing = 0.002 } = {}) {
+    this.dom = domElement
+    this.camera = camera
+    this.smoothing = smoothing
+
+    /** NDC (-1..1) 즉시값 */
+    this.ndc = new THREE.Vector2()
+    /** NDC 스무딩 값 */
+    this.smooth = new THREE.Vector2()
+    /** 정규화 화면 UV (0..1) */
+    this.uv = new THREE.Vector2(0.5, 0.5)
+    /** 프레임간 이동량 (NDC) */
+    this.velocity = new THREE.Vector2()
+    /** 이동 속도의 크기 (0..1 정도로 클램프) */
+    this.speed = 0
+    this.isDown = false
+    this.isInside = false
+
+    this.raycaster = new THREE.Raycaster()
+    this._prev = new THREE.Vector2()
+    this._plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)
+    this._worldPoint = new THREE.Vector3()
+
+    this._hovered = null
+    this._targets = []
+    this._handlers = { enter: null, leave: null, click: null }
+
+    this._onMove = this._onMove.bind(this)
+    this._onDown = this._onDown.bind(this)
+    this._onUp = this._onUp.bind(this)
+    this._onEnter = () => { this.isInside = true }
+    this._onLeave = this._onLeave.bind(this)
+
+    const opt = { passive: true }
+    this.dom.addEventListener('pointermove', this._onMove, opt)
+    this.dom.addEventListener('pointerdown', this._onDown, opt)
+    this.dom.addEventListener('pointerup', this._onUp, opt)
+    this.dom.addEventListener('pointerenter', this._onEnter, opt)
+    this.dom.addEventListener('pointerleave', this._onLeave, opt)
+  }
+
+  _onMove(e) {
+    const r = this.dom.getBoundingClientRect()
+    const x = (e.clientX - r.left) / r.width
+    const y = (e.clientY - r.top) / r.height
+    this.uv.set(x, 1 - y)
+    this.ndc.set(x * 2 - 1, -(y * 2 - 1))
+    this.isInside = true
+  }
+
+  _onDown() { this.isDown = true }
+  _onUp() { this.isDown = false }
+  _onLeave() {
+    this.isInside = false
+    this.isDown = false
+    if (this._hovered) {
+      this._handlers.leave?.(this._hovered)
+      this._hovered = null
+      document.body.style.cursor = ''
+    }
+  }
+
+  /** 레이캐스트 대상 등록 */
+  setTargets(objects, { onEnter, onLeave, onClick } = {}) {
+    this._targets = objects
+    this._handlers = { enter: onEnter, leave: onLeave, click: onClick }
+
+    if (onClick) {
+      this._onClick = () => {
+        if (this._hovered) onClick(this._hovered)
+      }
+      this.dom.addEventListener('click', this._onClick)
+    }
+  }
+
+  /** 카메라 기준 임의 평면과의 교점을 월드 좌표로 반환 */
+  intersectPlane(normal = new THREE.Vector3(0, 0, 1), constant = 0) {
+    this._plane.set(normal, constant)
+    this.raycaster.setFromCamera(this.smooth, this.camera)
+    return this.raycaster.ray.intersectPlane(this._plane, this._worldPoint)
+      ? this._worldPoint
+      : null
+  }
+
+  /** 매 프레임 호출 */
+  update(dt) {
+    this._prev.copy(this.smooth)
+    dampVec(this.smooth, this.ndc, this.smoothing, dt)
+
+    this.velocity.subVectors(this.smooth, this._prev).divideScalar(Math.max(dt, 1e-4))
+    this.speed = THREE.MathUtils.clamp(this.velocity.length() * 0.35, 0, 1)
+
+    // 레이캐스팅은 대상이 있을 때만
+    if (this._targets.length && this.isInside) {
+      this.raycaster.setFromCamera(this.ndc, this.camera)
+      const hits = this.raycaster.intersectObjects(this._targets, false)
+      const next = hits.length ? hits[0].object : null
+
+      if (next !== this._hovered) {
+        if (this._hovered) this._handlers.leave?.(this._hovered)
+        if (next) this._handlers.enter?.(next, hits[0])
+        this._hovered = next
+        document.body.style.cursor = next ? 'pointer' : ''
+      }
+    }
+  }
+
+  get hovered() { return this._hovered }
+
+  dispose() {
+    this.dom.removeEventListener('pointermove', this._onMove)
+    this.dom.removeEventListener('pointerdown', this._onDown)
+    this.dom.removeEventListener('pointerup', this._onUp)
+    this.dom.removeEventListener('pointerenter', this._onEnter)
+    this.dom.removeEventListener('pointerleave', this._onLeave)
+    if (this._onClick) this.dom.removeEventListener('click', this._onClick)
+    document.body.style.cursor = ''
+  }
+}
+```
+
+사용 예:
+
+```js
+import Pointer from '../gl/Pointer.js'
+import gsap from 'gsap'
+
+const pointer = new Pointer(document.body, stage.camera, { smoothing: 0.0015 })
+
+pointer.setTargets(cards, {
+  onEnter: (mesh) => gsap.to(mesh.scale, { x: 1.08, y: 1.08, z: 1.08, duration: 0.4, ease: 'power3.out' }),
+  onLeave: (mesh) => gsap.to(mesh.scale, { x: 1, y: 1, z: 1, duration: 0.5, ease: 'power3.out' }),
+  onClick: (mesh) => console.log('clicked', mesh.name),
+})
+
+stage.add((t, dt) => {
+  pointer.update(dt)
+  uniforms.uPointer.value.copy(pointer.smooth)
+  uniforms.uSpeed.value = pointer.speed
+
+  const world = pointer.intersectPlane(new THREE.Vector3(0, 0, 1), 0)
+  if (world) uniforms.uPointerWorld.value.copy(world)
+})
+```
+
+**핵심 규칙**
+- **`1 - Math.pow(factor, dt)`를 써라.** `lerp(a, b, 0.1)`은 프레임레이트에 따라 속도가 달라진다(120Hz에서 2배 빠름).
+- 레이캐스팅은 `pointermove`가 아니라 **렌더 루프에서** 해라. 마우스 이벤트는 프레임보다 자주 발생한다.
+- `intersectObjects(objects, false)` — `recursive`를 `false`로 두면 자식 순회를 건너뛰어 훨씬 빠르다.
+- 오브젝트가 100개를 넘거나 폴리곤이 많으면 `three-mesh-bvh`(`+18KB`)로 BVH 가속을 붙여라.
+- 캔버스가 `pointer-events:none`이면 이벤트를 `document.body`나 상위 컨테이너에서 받아야 한다.
+
+---
+
+## P15 — 노이즈 디졸브 리빌/전환
+
+**효과**: 노이즈 값과 임계값을 비교해 픽셀을 지운다. 경계에 발광선을 넣으면 "타들어가는" 룩이 된다. 리빌·페이지 전환·오브젝트 등장에 두루 쓴다.
+
+**언제 쓰나**
+- 페이지 진입 리빌
+- 섹션 간 전환 (풀스크린 오버레이)
+- 3D 오브젝트가 나타나고 사라짐
+
+**비용**: 번들 +0KB · GPU **낮음** (노이즈 1회 + smoothstep 2회)
+
+**조절 파라미터**
+
+| uniform | 범위 | 의미 |
+|---|---|---|
+| `uProgress` | 0 ~ 1 | 진행도 |
+| `uScale` | 1 ~ 20 | 노이즈 스케일. 클수록 잘게 부서짐 |
+| `uEdgeWidth` | 0.01 ~ 0.2 | 발광 경계 두께 |
+| `uEdgeColor` | — | 경계 색 (보통 브랜드 액센트) |
+| `uDirection` | vec2 | 방향성. `(0,1)`이면 아래→위 |
+
+### 3D 오브젝트용 (머티리얼 확장)
+
+```glsl
+// src/shaders/dissolve.frag — 독립 ShaderMaterial 버전
+precision highp float;
+
+#include './lib/noise.glsl'
+
+uniform sampler2D uMap;
+uniform float uProgress;
+uniform float uScale;
+uniform float uEdgeWidth;
+uniform vec3  uEdgeColor;
+uniform vec2  uDirection;
+uniform float uTime;
+
+varying vec2 vUv;
+varying vec3 vPosition;
+
+void main() {
+  vec4 tex = texture2D(uMap, vUv);
+
+  // 3D 위치 기반 노이즈 → 오브젝트가 회전해도 패턴이 붙어 있다
+  float n = snoise(vPosition * uScale) * 0.5 + 0.5;
+
+  // 방향성 바이어스: uDirection 쪽부터 사라진다
+  float bias = dot(vUv - 0.5, normalize(uDirection + 1e-5)) + 0.5;
+  n = mix(n, bias, 0.45);
+
+  // 임계값. progress 0 → 전부 숨김, 1 → 전부 보임
+  float threshold = 1.0 - uProgress;
+
+  if (n < threshold) discard;
+
+  // 경계 발광
+  float edge = smoothstep(threshold + uEdgeWidth, threshold, n);
+  vec3 color = mix(tex.rgb, uEdgeColor, edge);
+  color += uEdgeColor * edge * 1.8;   // 오버브라이트 → Bloom 이 잡아준다
+
+  gl_FragColor = vec4(color, tex.a);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+```
+
+```js
+// src/shaders/dissolve.vert
+// varying vec2 vUv; varying vec3 vPosition;
+// void main() { vUv = uv; vPosition = position;
+//   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }
+```
+
+### 기존 `MeshStandardMaterial`에 얹기 (조명 유지)
+
+```js
+// src/gl/dissolveMaterial.js
+import * as THREE from 'three'
+
+/**
+ * 기존 PBR 머티리얼에 디졸브를 주입한다.
+ * @returns {{ material: THREE.Material, uniforms: object }}
+ */
+export function makeDissolve(material, {
+  scale = 6, edgeWidth = 0.06, edgeColor = '#a78bfa',
+} = {}) {
+  const uniforms = {
+    uProgress:  { value: 0 },
+    uScale:     { value: scale },
+    uEdgeWidth: { value: edgeWidth },
+    uEdgeColor: { value: new THREE.Color(edgeColor) },
+  }
+
+  material.onBeforeCompile = (shader) => {
+    Object.assign(shader.uniforms, uniforms)
+
+    shader.vertexShader = shader.vertexShader
+      .replace('#include <common>', `
+        #include <common>
+        varying vec3 vDissolvePos;
+      `)
+      .replace('#include <begin_vertex>', `
+        #include <begin_vertex>
+        vDissolvePos = position;
+      `)
+
+    shader.fragmentShader = shader.fragmentShader
+      .replace('#include <common>', `
+        #include <common>
+        uniform float uProgress;
+        uniform float uScale;
+        uniform float uEdgeWidth;
+        uniform vec3  uEdgeColor;
+        varying vec3  vDissolvePos;
+
+        // 값싼 value noise (simplex 대신, PBR 셰이더가 이미 무겁다)
+        float hash31(vec3 p) {
+          p = fract(p * 0.1031);
+          p += dot(p, p.yzx + 33.33);
+          return fract((p.x + p.y) * p.z);
+        }
+        float vnoise(vec3 p) {
+          vec3 i = floor(p), f = fract(p);
+          f = f * f * (3.0 - 2.0 * f);
+          return mix(
+            mix(mix(hash31(i + vec3(0,0,0)), hash31(i + vec3(1,0,0)), f.x),
+                mix(hash31(i + vec3(0,1,0)), hash31(i + vec3(1,1,0)), f.x), f.y),
+            mix(mix(hash31(i + vec3(0,0,1)), hash31(i + vec3(1,0,1)), f.x),
+                mix(hash31(i + vec3(0,1,1)), hash31(i + vec3(1,1,1)), f.x), f.y), f.z);
+        }
+      `)
+      // 알파 테스트 직후에 discard 를 넣는다
+      .replace('#include <alphatest_fragment>', `
+        #include <alphatest_fragment>
+        float dNoise = vnoise(vDissolvePos * uScale);
+        float dThreshold = 1.0 - uProgress;
+        if (dNoise < dThreshold) discard;
+      `)
+      // 조명 계산이 끝난 뒤 경계를 더한다
+      .replace('#include <dithering_fragment>', `
+        #include <dithering_fragment>
+        float dNoise2 = vnoise(vDissolvePos * uScale);
+        float dEdge = smoothstep((1.0 - uProgress) + uEdgeWidth, 1.0 - uProgress, dNoise2);
+        gl_FragColor.rgb += uEdgeColor * dEdge * 2.2;
+      `)
+  }
+
+  material.customProgramCacheKey = () => 'dissolve-v1'
+  material.needsUpdate = true
+
+  return { material, uniforms }
+}
+```
+
+사용:
+
+```js
+import gsap from 'gsap'
+import { makeDissolve } from '../gl/dissolveMaterial.js'
+
+const mat = new THREE.MeshStandardMaterial({ color: '#e4e4e7', roughness: 0.3, metalness: 0.4 })
+const { uniforms } = makeDissolve(mat, { scale: 7, edgeColor: '#a78bfa' })
+
+// 등장
+gsap.to(uniforms.uProgress, { value: 1, duration: 1.8, ease: 'power2.inOut' })
+// 퇴장
+gsap.to(uniforms.uProgress, { value: 0, duration: 1.2, ease: 'power2.in' })
+```
+
+### 풀스크린 전환 오버레이 (페이지 전환용)
+
+```glsl
+// src/shaders/dissolveOverlay.frag
+precision highp float;
+
+uniform float uProgress;
+uniform vec2  uResolution;
+uniform vec3  uColor;
+uniform float uScale;
+uniform float uEdge;
+
+varying vec2 vUv;
+
+float hash21(vec2 p) {
+  p = fract(p * vec2(233.34, 851.73));
+  p += dot(p, p + 23.45);
+  return fract(p.x * p.y);
+}
+float vnoise(vec2 p) {
+  vec2 i = floor(p), f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  return mix(mix(hash21(i), hash21(i + vec2(1,0)), f.x),
+             mix(hash21(i + vec2(0,1)), hash21(i + vec2(1,1)), f.x), f.y);
+}
+float fbm(vec2 p) {
+  float s = 0.0, a = 0.5;
+  for (int i = 0; i < 4; i++) { s += vnoise(p) * a; p *= 2.03; a *= 0.5; }
+  return s;
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / uResolution;
+  float aspect = uResolution.x / uResolution.y;
+  vec2 p = vec2(uv.x * aspect, uv.y);
+
+  float n = fbm(p * uScale);
+  // 대각선 방향 바이어스
+  n = mix(n, (p.x / aspect + p.y) * 0.5, 0.4);
+
+  float threshold = 1.0 - uProgress * 1.25;   // 1.25 로 여유를 줘야 완전히 사라진다
+  float alpha = smoothstep(threshold, threshold + uEdge, n);
+
+  // 경계 발광선
+  float line = smoothstep(threshold, threshold + uEdge * 0.35, n)
+             - smoothstep(threshold + uEdge * 0.35, threshold + uEdge, n);
+
+  vec3 col = uColor + line * 1.6;
+
+  gl_FragColor = vec4(col, 1.0 - alpha);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+```
+
+**튜닝 노트**
+- `discard`는 early-Z를 깨서 불투명 씬에서는 비싸다. 오브젝트가 몇 개 안 되면 무시 가능.
+- `uProgress`를 1.0까지만 보내면 마지막 픽셀이 남는다. **1.25배로 오버슈트**하거나 threshold 범위를 넓혀라.
+- 경계 색을 1.0 이상(오버브라이트)으로 쓰면 Bloom과 결합했을 때 진짜 불처럼 보인다.
+- `onBeforeCompile`에서 `<alphatest_fragment>` 훅은 조명 계산 **전**, `<dithering_fragment>`는 **후**다. discard는 앞에, 발광은 뒤에.
+
+---
+
+## 부록 — 패턴 조합 레시피
+
+| 룩 | 조합 |
+|---|---|
+| **차분한 SaaS 히어로** | P2(도트 그리드) + P14(포인터) |
+| **에이전시 포트폴리오** | P8(DOM 이미지) + P6(Lenis 스크롤) + P12(grain+vignette) |
+| **제품 런칭** | P13(GLTF) + P6(스크롤 회전) + P12(bloom) + P15(디졸브 등장) |
+| **뮤직/이벤트** | P4(GPGPU 파티클) + P12(bloom + CA) + P11(텍스트) |
+| **브랜드 아이덴티티** | P10(유리 로고) + P1(그라디언트 배경) + P12(AGX 톤매핑) |
+| **에디토리얼** | P9(이미지 전환) + P11(troika 텍스트) + P2(배경) |
+
+각 조합의 **모바일 다운그레이드 규칙**은 [04-performance.md](./04-performance.md) §5를 따른다.
diff --git a/research/three/03-shaders.md b/research/three/03-shaders.md
new file mode 100644
index 0000000..115ae76
--- /dev/null
+++ b/research/three/03-shaders.md
@@ -0,0 +1,1296 @@
+# 03 — GLSL 최소 지식 + 재사용 스니펫
+
+> 대상: three.js `ShaderMaterial` (WebGL2 컨텍스트, GLSL ES 1.00 문법 작성).
+> three는 WebGL2에서 GLSL1 코드를 자동으로 ESSL3로 변환한다(`attribute`→`in`, `varying`→`out/in`, `texture2D`→`texture`, `gl_FragColor`→`pc_fragColor`).
+> **따라서 GLSL1 스타일로 쓰는 것이 가장 호환성이 높다.** GLSL3 문법을 쓰려면 `glslVersion: THREE.GLSL3`를 명시해야 한다.
+
+---
+
+## 1. 파이프라인 — 딱 이만큼만 알면 된다
+
+```
+정점 데이터(attribute)  ──▶ [ Vertex Shader ]  ──▶ 래스터화 ──▶ [ Fragment Shader ] ──▶ 픽셀
+   position, uv, normal        정점당 1회 실행         보간         픽셀당 1회 실행
+   커스텀 attribute            gl_Position 출력      (varying)     gl_FragColor 출력
+                               varying 출력
+```
+
+| | Vertex Shader | Fragment Shader |
+|---|---|---|
+| 실행 횟수 | 정점 수 (예: 16,384) | 화면 픽셀 수 (예: 1920×1080×DPR² = **800만+**) |
+| 필수 출력 | `gl_Position` (클립 공간 vec4) | `gl_FragColor` (RGBA, 0~1) |
+| 할 수 있는 것 | 정점 이동/변형, 데이터 준비 | 색 결정, 텍스처 샘플, discard |
+| **비용 감각** | 싸다 | **여기가 병목이다** |
+
+### 최적화의 제1법칙
+**계산을 fragment에서 vertex로 옮겨라.** 정점 16,384개 vs 픽셀 800만 개 — 500배 차이다.
+노이즈, 거리 계산, 삼각함수는 가능한 한 vertex에서 하고 `varying`으로 넘긴다.
+
+### 좌표 변환 체인
+
+```glsl
+gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+//             └ 카메라 투영     └ view * model    └ 로컬 좌표
+```
+
+| 공간 | 얻는 법 |
+|---|---|
+| 로컬(object) | `position` |
+| 월드 | `(modelMatrix * vec4(position, 1.0)).xyz` |
+| 뷰(카메라) | `(modelViewMatrix * vec4(position, 1.0)).xyz` |
+| 클립 | `projectionMatrix * modelViewMatrix * vec4(position, 1.0)` |
+| 화면 UV (fragment) | `gl_FragCoord.xy / uResolution` |
+
+---
+
+## 2. GLSL 문법 최소셋
+
+### 타입
+
+```glsl
+float f = 1.0;        // 반드시 소수점! `1` 은 int 라서 타입 에러
+int   i = 1;
+bool  b = true;
+vec2  v2 = vec2(1.0, 2.0);
+vec3  v3 = vec3(v2, 3.0);          // 조합 가능
+vec4  v4 = vec4(v3, 1.0);
+vec4  w  = vec4(0.5);              // 전부 0.5
+mat2  m2; mat3 m3; mat4 m4;
+sampler2D tex;                     // uniform 으로만 선언 가능
+```
+
+### 스위즐 (swizzle)
+
+```glsl
+vec4 c = vec4(1.0, 0.5, 0.2, 1.0);
+c.rgb          // vec3(1.0, 0.5, 0.2)
+c.bgr          // vec3(0.2, 0.5, 1.0) — 순서 바꾸기
+c.xy           // vec2(1.0, 0.5)  (xyzw / rgba / stpq 모두 동일)
+c.xxxx         // vec4(1.0)       — 반복 가능
+c.rg = vec2(0.0);                  // 대입도 가능
+```
+
+### precision (모바일에서 매우 중요)
+
+```glsl
+precision highp float;    // 32bit. 위치/좌표 계산에 필요
+precision mediump float;  // 16bit. 색상/일반 계산에 충분. 모바일에서 ~2배 빠름
+precision lowp float;     // 8~10bit. 거의 쓰지 않음
+```
+
+**실무 규칙**
+- fragment shader 기본은 `mediump`, 정밀도가 필요한 변수만 개별적으로 `highp`.
+- vertex shader는 three가 기본 `highp`를 준다. 건드리지 마라.
+- GPGPU 위치 시뮬레이션은 **반드시 `highp`**. mediump면 좌표가 지터한다.
+
+```glsl
+precision mediump float;
+uniform highp sampler2D uPositions;   // 개별 지정
+varying highp vec3 vWorldPos;
+```
+
+### 자주 쓰는 내장 함수
+
+| 함수 | 의미 | 예시 |
+|---|---|---|
+| `mix(a, b, t)` | 선형 보간 | `mix(colA, colB, 0.5)` |
+| `clamp(x, lo, hi)` | 범위 제한 | `clamp(n, 0.0, 1.0)` |
+| `saturate` | **없다.** `clamp(x,0.,1.)` 직접 써라 | |
+| `step(edge, x)` | x < edge ? 0 : 1 | 딱딱한 경계 |
+| `smoothstep(e0, e1, x)` | 부드러운 0→1 | **가장 많이 쓴다** |
+| `fract(x)` | 소수부 | 타일링 `fract(uv * 10.0)` |
+| `floor/ceil/round` | | 셀 인덱스 `floor(uv * 10.0)` |
+| `mod(x, y)` | 나머지 | 반복 |
+| `abs / sign` | | |
+| `length(v)` / `distance(a,b)` | | 원형 마스크 |
+| `dot(a, b)` | 내적 | 프레넬, 조명 |
+| `cross(a, b)` | 외적 (vec3만) | 노멀 |
+| `normalize(v)` | 단위벡터 | **0 벡터 주의** → `normalize(v + 1e-5)` |
+| `reflect(I, N)` / `refract(I, N, eta)` | 반사/굴절 | 유리 |
+| `pow(x, y)` | | `pow(x, 2.2)` 감마 |
+| `exp(x)` / `exp2` | | 감쇠 `exp(-d*d)` |
+| `sin / cos / atan(y, x)` | | 극좌표, 파동 |
+| `min / max` | | |
+| `texture2D(sampler, uv)` | 텍스처 샘플 | GLSL3면 `texture()` |
+| `dFdx / dFdy / fwidth` | 화면 미분 | 안티에일리어싱 |
+| `discard` | 픽셀 버림 | early-Z 깨짐 주의 |
+
+### 분기와 루프 — 비용 감각
+
+```glsl
+// 나쁨: 동적 분기. GPU 는 워프 단위로 실행하므로 양쪽 다 계산될 수 있다
+if (uMode > 0.5) { heavyA(); } else { heavyB(); }
+
+// 좋음: 산술로 대체
+result = mix(a, b, step(0.5, uMode));
+
+// 좋음: 컴파일 타임 분기 (material.defines 로 제어)
+#if defined(USE_GLOW)
+  color += uGlowColor * glowMask;
+#endif
+```
+
+```glsl
+// 루프 카운트는 반드시 상수여야 한다 (GLSL ES 1.0 제약)
+#define OCTAVES 4
+
+float sum = 0.0, amp = 0.5, freq = 1.0;
+for (int i = 0; i < OCTAVES; i++) {
+  sum += snoise(p * freq) * amp;
+  freq *= 2.02;
+  amp  *= 0.5;
+}
+
+// uniform 을 루프 상한으로 쓸 수 없다. 상수 상한 + break 를 쓴다
+#define MAX_LIGHTS 8
+uniform float uLightCount;
+uniform vec3  uLightPos[MAX_LIGHTS];
+
+vec3 lighting = vec3(0.0);
+for (int i = 0; i < MAX_LIGHTS; i++) {
+  if (float(i) >= uLightCount) break;
+  float d = distance(vWorldPos, uLightPos[i]);
+  lighting += vec3(1.0) / (1.0 + d * d);
+}
+```
+
+---
+
+## 3. three가 자동으로 주입하는 것
+
+### `ShaderMaterial` (권장)
+
+three가 아래를 **자동으로 앞에 붙여준다**. 다시 선언하면 `redefinition` 에러가 난다.
+
+**Vertex shader 자동 제공**
+
+```glsl
+// uniform
+uniform mat4 modelMatrix;         // object → world
+uniform mat4 modelViewMatrix;     // object → view
+uniform mat4 projectionMatrix;    // view → clip
+uniform mat4 viewMatrix;          // world → view
+uniform mat3 normalMatrix;        // 노멀 변환용 (역전치)
+uniform vec3 cameraPosition;      // 월드 공간 카메라 위치
+uniform bool isOrthographic;
+
+// attribute (기본 지오메트리)
+attribute vec3 position;
+attribute vec3 normal;
+attribute vec2 uv;
+// 지오메트리에 있으면: attribute vec4 color; attribute vec2 uv1; ...
+// InstancedMesh: attribute mat4 instanceMatrix; attribute vec3 instanceColor;
+```
+
+**Fragment shader 자동 제공**
+
+```glsl
+uniform mat4 viewMatrix;
+uniform vec3 cameraPosition;
+uniform bool isOrthographic;
+// + 톤매핑/색공간 함수 (toneMapping, linearToOutputTexel)
+```
+
+### `RawShaderMaterial`
+
+아무것도 주입되지 않는다. `precision`부터 `projectionMatrix`까지 전부 직접 선언해야 하고,
+`#include <tonemapping_fragment>` 같은 청크도 **쓸 수 없다**.
+→ **웹디자인 작업에서는 쓸 이유가 거의 없다.** `ShaderMaterial`을 써라.
+
+### 유용한 ShaderChunk
+
+```glsl
+#include <common>                  // PI, RECIPROCAL_PI, saturate 매크로 등 유틸
+#include <tonemapping_fragment>    // gl_FragColor 에 톤매핑 적용
+#include <colorspace_fragment>     // 출력 색공간 변환 (r154+ 이름. 이전엔 encodings_fragment)
+#include <fog_fragment>            // 안개 (fog_pars_fragment 도 필요)
+#include <dithering_fragment>      // 밴딩 억제
+#include <logdepthbuf_vertex>      // 로그 깊이 버퍼
+```
+
+fragment shader **마지막**에 이 순서로:
+
+```glsl
+  gl_FragColor = vec4(color, alpha);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+```
+
+### `onBeforeCompile`로 내장 머티리얼 확장
+
+`MeshStandardMaterial`의 조명 계산을 유지한 채 코드를 삽입할 때.
+
+```js
+material.onBeforeCompile = (shader) => {
+  shader.uniforms.uTime = { value: 0 }
+
+  shader.vertexShader = shader.vertexShader
+    .replace('#include <common>', `
+      #include <common>
+      uniform float uTime;
+      varying vec3 vLocalPos;
+    `)
+    .replace('#include <begin_vertex>', `
+      #include <begin_vertex>
+      vLocalPos = position;
+      transformed.y += sin(position.x * 3.0 + uTime) * 0.1;
+    `)
+    // 노멀도 바꿔야 조명이 맞는다
+    .replace('#include <beginnormal_vertex>', `
+      #include <beginnormal_vertex>
+      // objectNormal 을 여기서 수정
+    `)
+
+  shader.fragmentShader = shader.fragmentShader
+    .replace('#include <dithering_fragment>', `
+      #include <dithering_fragment>
+      gl_FragColor.rgb *= 1.1;
+    `)
+}
+// 필수: 안 하면 셰이더 캐시가 오작동한다
+material.customProgramCacheKey = () => 'my-material-v1'
+```
+
+**자주 쓰는 훅 포인트**
+
+| 청크 | 위치 | 용도 |
+|---|---|---|
+| `<common>` | 최상단 | uniform/varying/함수 선언 |
+| `<beginnormal_vertex>` | vertex | `objectNormal` 수정 |
+| `<begin_vertex>` | vertex | `transformed`(정점 위치) 수정 |
+| `<project_vertex>` | vertex 끝 | `mvPosition`, `gl_Position` 이후 처리 |
+| `<map_fragment>` | fragment | `diffuseColor` 수정 (알베도) |
+| `<alphatest_fragment>` | fragment | discard 삽입 |
+| `<emissivemap_fragment>` | fragment | `totalEmissiveRadiance` 수정 |
+| `<dithering_fragment>` | fragment 끝 | 최종 `gl_FragColor` 후처리 |
+
+---
+
+## 4. uniform 전달 — JS ↔ GLSL 타입 매핑
+
+```js
+const uniforms = {
+  uFloat:   { value: 1.0 },                              // float
+  uInt:     { value: 1 },                                // int
+  uBool:    { value: true },                             // bool
+  uVec2:    { value: new THREE.Vector2(1, 2) },          // vec2
+  uVec3:    { value: new THREE.Vector3(1, 2, 3) },       // vec3
+  uColor:   { value: new THREE.Color('#ff0080') },       // vec3 (자동 linear 변환!)
+  uVec4:    { value: new THREE.Vector4(1, 2, 3, 4) },    // vec4
+  uMat3:    { value: new THREE.Matrix3() },              // mat3
+  uMat4:    { value: new THREE.Matrix4() },              // mat4
+  uTex:     { value: texture },                          // sampler2D
+  uCube:    { value: cubeTexture },                      // samplerCube
+  uFloats:  { value: [1, 2, 3] },                        // float[3]
+  uVecs:    { value: [new THREE.Vector3(), ...] },       // vec3[N]
+}
+```
+
+### 갱신 규칙
+
+```js
+// ✅ .value 를 바꾼다. needsUpdate 불필요
+uniforms.uFloat.value = t
+uniforms.uVec2.value.set(x, y)        // 새 객체 생성 X — GC 압력 감소
+uniforms.uColor.value.set('#00ff88')
+
+// ❌ 이렇게 하면 매 프레임 객체를 만든다
+uniforms.uVec2.value = new THREE.Vector2(x, y)
+
+// 텍스처를 교체할 때만 needsUpdate
+uniforms.uTex.value = newTexture
+material.needsUpdate = true   // uniform 개수/타입이 바뀔 때만. 값 변경엔 불필요
+```
+
+### 배열 uniform은 크기가 고정이다
+
+```glsl
+#define MAX_POINTS 8
+uniform vec3  uPoints[MAX_POINTS];
+uniform int   uPointCount;
+uniform float uRadius;
+
+// 여러 개의 인터랙션 포인트가 만드는 영향력의 합
+float influence = 0.0;
+for (int i = 0; i < MAX_POINTS; i++) {
+  if (i >= uPointCount) break;
+  float d = distance(vWorldPos, uPoints[i]);
+  influence += smoothstep(uRadius, 0.0, d);
+}
+influence = clamp(influence, 0.0, 1.0);
+```
+
+배열 크기를 바꾸려면 셰이더를 재컴파일해야 한다(`defines` 변경 + `needsUpdate = true`).
+
+---
+
+## 5. 스니펫 라이브러리 — `src/shaders/lib/`
+
+각 파일은 include guard가 있어 중복 `#include`해도 안전하다.
+
+### 5.1 `lib/uv.glsl` — UV 조작
+
+```glsl
+#ifndef LIB_UV_GLSL
+#define LIB_UV_GLSL
+
+const float PI  = 3.141592653589793;
+const float TAU = 6.283185307179586;
+
+/** object-fit: cover. 이미지 비율을 유지하며 플레인을 채운다 */
+vec2 coverUv(vec2 uv, vec2 planeSize, vec2 imageSize) {
+  vec2 ratio = vec2(
+    min((planeSize.x / planeSize.y) / (imageSize.x / imageSize.y), 1.0),
+    min((planeSize.y / planeSize.x) / (imageSize.y / imageSize.x), 1.0)
+  );
+  return vec2(uv.x * ratio.x + (1.0 - ratio.x) * 0.5,
+              uv.y * ratio.y + (1.0 - ratio.y) * 0.5);
+}
+
+/** object-fit: contain */
+vec2 containUv(vec2 uv, vec2 planeSize, vec2 imageSize) {
+  vec2 ratio = vec2(
+    max((planeSize.x / planeSize.y) / (imageSize.x / imageSize.y), 1.0),
+    max((planeSize.y / planeSize.x) / (imageSize.y / imageSize.x), 1.0)
+  );
+  return vec2(uv.x * ratio.x + (1.0 - ratio.x) * 0.5,
+              uv.y * ratio.y + (1.0 - ratio.y) * 0.5);
+}
+
+/** 화면 비율 보정: 짧은 축 기준으로 -1..1 정규화. 노이즈가 늘어지지 않는다 */
+vec2 aspectUv(vec2 fragCoord, vec2 resolution) {
+  return (fragCoord * 2.0 - resolution) / min(resolution.x, resolution.y);
+}
+
+/** 중심 기준 회전 */
+vec2 rotateUv(vec2 uv, float angle, vec2 center) {
+  float s = sin(angle), c = cos(angle);
+  uv -= center;
+  uv = mat2(c, -s, s, c) * uv;
+  return uv + center;
+}
+
+/** 중심 기준 스케일 (>1 = 축소, <1 = 확대) */
+vec2 scaleUv(vec2 uv, float scale, vec2 center) {
+  return (uv - center) * scale + center;
+}
+
+/** 타일링. .xy = 셀 내부 UV, .zw = 셀 인덱스 */
+vec4 tileUv(vec2 uv, vec2 count) {
+  vec2 g = uv * count;
+  return vec4(fract(g), floor(g));
+}
+
+/** 극좌표. x = 각도(0..1), y = 반지름 */
+vec2 polarUv(vec2 uv, vec2 center) {
+  vec2 d = uv - center;
+  return vec2(atan(d.y, d.x) / TAU + 0.5, length(d));
+}
+
+/** 만화경 */
+vec2 kaleidoUv(vec2 uv, vec2 center, float segments) {
+  vec2 p = polarUv(uv, center);
+  float seg = 1.0 / segments;
+  p.x = abs(mod(p.x, seg * 2.0) - seg) / seg;
+  float a = p.x * TAU / segments;
+  return center + vec2(cos(a), sin(a)) * p.y;
+}
+
+/** 배럴/핀쿠션 왜곡. k > 0 배럴, k < 0 핀쿠션 */
+vec2 barrelUv(vec2 uv, float k) {
+  vec2 c = uv - 0.5;
+  float r2 = dot(c, c);
+  return 0.5 + c * (1.0 + k * r2);
+}
+
+/** 중심에서 퍼지는 물결 */
+vec2 rippleUv(vec2 uv, vec2 center, float time, float amplitude, float frequency, float speed) {
+  vec2 d = uv - center;
+  float r = length(d);
+  float wave = sin(r * frequency - time * speed) * amplitude * exp(-r * 3.0);
+  return uv + normalize(d + 1e-5) * wave;
+}
+
+/** 픽셀화 */
+vec2 pixelateUv(vec2 uv, vec2 pixels) {
+  return floor(uv * pixels) / pixels;
+}
+
+#endif
+```
+
+### 5.2 `lib/noise.glsl` — 해시 · 밸류 노이즈 · 심플렉스 · FBM
+
+```glsl
+#ifndef LIB_NOISE_GLSL
+#define LIB_NOISE_GLSL
+
+/* ===== 해시 (의사난수) ================================================= */
+
+float hash11(float p) {
+  p = fract(p * 0.1031);
+  p *= p + 33.33;
+  return fract((p + p) * p);
+}
+
+float hash21(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+vec2 hash22(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.xx + p3.yz) * p3.zy);
+}
+
+float hash31(vec3 p) {
+  p = fract(p * 0.1031);
+  p += dot(p, p.yzx + 33.33);
+  return fract((p.x + p.y) * p.z);
+}
+
+vec3 hash33(vec3 p) {
+  p = fract(p * vec3(0.1031, 0.1030, 0.0973));
+  p += dot(p, p.yxz + 33.33);
+  return fract((p.xxy + p.yxx) * p.zyx);
+}
+
+/* ===== Value noise (싸다. simplex 의 1/3 비용) ========================= */
+
+float vnoise2(vec2 p) {
+  vec2 i = floor(p), f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);                 // smoothstep 보간
+  return mix(mix(hash21(i),               hash21(i + vec2(1.0, 0.0)), f.x),
+             mix(hash21(i + vec2(0.0, 1.0)), hash21(i + vec2(1.0, 1.0)), f.x), f.y);
+}
+
+float vnoise3(vec3 p) {
+  vec3 i = floor(p), f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(mix(hash31(i + vec3(0,0,0)), hash31(i + vec3(1,0,0)), f.x),
+        mix(hash31(i + vec3(0,1,0)), hash31(i + vec3(1,1,0)), f.x), f.y),
+    mix(mix(hash31(i + vec3(0,0,1)), hash31(i + vec3(1,0,1)), f.x),
+        mix(hash31(i + vec3(0,1,1)), hash31(i + vec3(1,1,1)), f.x), f.y), f.z);
+}
+
+/* ===== Simplex noise 3D (Ian McEwan, Ashima Arts / stegu — MIT) ========
+ * https://github.com/stegu/webgl-noise
+ * 반환 범위 대략 -1..1
+ * ===================================================================== */
+
+vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 permute(vec4 x) { return mod289(((x * 34.0) + 10.0) * x); }
+vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+
+float snoise(vec3 v) {
+  const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);
+  const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  vec3 i  = floor(v + dot(v, C.yyy));
+  vec3 x0 = v - i + dot(i, C.xxx);
+
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min(g.xyz, l.zxy);
+  vec3 i2 = max(g.xyz, l.zxy);
+
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy;
+  vec3 x3 = x0 - D.yyy;
+
+  i = mod289(i);
+  vec4 p = permute(permute(permute(
+             i.z + vec4(0.0, i1.z, i2.z, 1.0))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0))
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+
+  float n_ = 0.142857142857;
+  vec3 ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_);
+
+  vec4 x = x_ * ns.x + ns.yyyy;
+  vec4 y = y_ * ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4(x.xy, y.xy);
+  vec4 b1 = vec4(x.zw, y.zw);
+
+  vec4 s0 = floor(b0) * 2.0 + 1.0;
+  vec4 s1 = floor(b1) * 2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+
+  vec3 p0 = vec3(a0.xy, h.x);
+  vec3 p1 = vec3(a0.zw, h.y);
+  vec3 p2 = vec3(a1.xy, h.z);
+  vec3 p3 = vec3(a1.zw, h.w);
+
+  vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+  p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;
+
+  vec4 m = max(0.5 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
+  m = m * m;
+  return 105.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
+}
+
+/** 2D 편의 함수: z 를 시간축으로 쓴다 */
+float snoise2(vec2 p) { return snoise(vec3(p, 0.0)); }
+
+/* ===== FBM (fractal brownian motion) ================================== */
+
+#ifndef FBM_OCTAVES
+  #define FBM_OCTAVES 4
+#endif
+
+float fbm3(vec3 p) {
+  float sum = 0.0, amp = 0.5, freq = 1.0;
+  for (int i = 0; i < FBM_OCTAVES; i++) {
+    sum += snoise(p * freq) * amp;
+    freq *= 2.02;      // 2.0 정확히 쓰면 격자 패턴이 보인다
+    amp  *= 0.5;
+  }
+  return sum;
+}
+
+float fbm2(vec2 p) {
+  float sum = 0.0, amp = 0.5, freq = 1.0;
+  for (int i = 0; i < FBM_OCTAVES; i++) {
+    sum += vnoise2(p * freq) * amp;
+    freq *= 2.02;
+    amp  *= 0.5;
+  }
+  return sum;
+}
+
+/** 능선 노이즈: 산맥/번개 같은 날카로운 결 */
+float ridged3(vec3 p) {
+  float sum = 0.0, amp = 0.5, freq = 1.0;
+  for (int i = 0; i < FBM_OCTAVES; i++) {
+    float n = 1.0 - abs(snoise(p * freq));
+    sum += n * n * amp;
+    freq *= 2.02;
+    amp  *= 0.5;
+  }
+  return sum;
+}
+
+/** 도메인 워프: 노이즈로 좌표를 흔든 뒤 다시 노이즈. "유기적"의 핵심 */
+float warpedFbm3(vec3 p, float strength) {
+  vec3 q = vec3(fbm3(p), fbm3(p + vec3(5.2, 1.3, 3.7)), fbm3(p + vec3(9.1, 7.4, 2.8)));
+  return fbm3(p + q * strength);
+}
+
+/* ===== Voronoi / Worley (셀 패턴) ===================================== */
+
+/** x = 가장 가까운 점까지의 거리, y = 셀 ID */
+vec2 voronoi2(vec2 p) {
+  vec2 n = floor(p), f = fract(p);
+  float minDist = 8.0;
+  float cellId = 0.0;
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 g = vec2(float(i), float(j));
+      vec2 o = hash22(n + g);
+      vec2 r = g + o - f;
+      float d = dot(r, r);
+      if (d < minDist) { minDist = d; cellId = hash21(n + g); }
+    }
+  }
+  return vec2(sqrt(minDist), cellId);
+}
+
+/** 셀 경계선까지의 거리 (테두리 그리기용) */
+float voronoiEdge2(vec2 p) {
+  vec2 n = floor(p), f = fract(p);
+  vec2 mg, mr;
+  float md = 8.0;
+  for (int j = -1; j <= 1; j++) for (int i = -1; i <= 1; i++) {
+    vec2 g = vec2(float(i), float(j));
+    vec2 o = hash22(n + g);
+    vec2 r = g + o - f;
+    float d = dot(r, r);
+    if (d < md) { md = d; mr = r; mg = g; }
+  }
+  md = 8.0;
+  for (int j = -2; j <= 2; j++) for (int i = -2; i <= 2; i++) {
+    vec2 g = mg + vec2(float(i), float(j));
+    vec2 o = hash22(n + g);
+    vec2 r = g + o - f;
+    if (dot(mr - r, mr - r) > 0.00001) {
+      md = min(md, dot(0.5 * (mr + r), normalize(r - mr)));
+    }
+  }
+  return md;
+}
+
+#endif
+```
+
+### 5.3 `lib/curl.glsl` — 컬 노이즈 (발산 없는 유동 벡터장)
+
+```glsl
+#ifndef LIB_CURL_GLSL
+#define LIB_CURL_GLSL
+
+#include './noise.glsl'
+
+vec3 snoiseVec3(vec3 x) {
+  return vec3(
+    snoise(vec3(x.x,          x.y,          x.z)),
+    snoise(vec3(x.y - 19.1,   x.z + 33.4,   x.x + 47.2)),
+    snoise(vec3(x.z + 74.2,   x.x - 124.5,  x.y + 99.4))
+  );
+}
+
+/**
+ * 컬 노이즈: 포텐셜장의 회전(curl)을 취해 발산이 0인 벡터장을 만든다.
+ * 파티클이 뭉치거나 흩어지지 않고 "유체처럼" 흐른다.
+ * 비용: snoise 18회. 매우 비싸다. GPGPU 시뮬 패스에서만 써라.
+ */
+vec3 curlNoise(vec3 p) {
+  const float e = 0.1;
+  vec3 dx = vec3(e, 0.0, 0.0);
+  vec3 dy = vec3(0.0, e, 0.0);
+  vec3 dz = vec3(0.0, 0.0, e);
+
+  vec3 px0 = snoiseVec3(p - dx), px1 = snoiseVec3(p + dx);
+  vec3 py0 = snoiseVec3(p - dy), py1 = snoiseVec3(p + dy);
+  vec3 pz0 = snoiseVec3(p - dz), pz1 = snoiseVec3(p + dz);
+
+  float x = py1.z - py0.z - pz1.y + pz0.y;
+  float y = pz1.x - pz0.x - px1.z + px0.z;
+  float z = px1.y - px0.y - py1.x + py0.x;
+
+  const float divisor = 1.0 / (2.0 * e);
+  return normalize(vec3(x, y, z) * divisor);
+}
+
+/**
+ * 싼 버전: 3방향 노이즈. 진짜 curl 은 아니지만 육안으로 거의 구분 안 된다.
+ * 비용: snoise 3회. GPGPU 가 아닌 vertex shader 에서 쓰기 좋다.
+ */
+vec3 pseudoCurl(vec3 p) {
+  return vec3(
+    snoise(p),
+    snoise(p + vec3(31.416, 0.0, 0.0)),
+    snoise(p + vec3(0.0, 17.777, 0.0))
+  );
+}
+
+#endif
+```
+
+### 5.4 `lib/easing.glsl` — 이징 · 리매핑 · 페이드
+
+```glsl
+#ifndef LIB_EASING_GLSL
+#define LIB_EASING_GLSL
+
+float saturate_(float x) { return clamp(x, 0.0, 1.0); }
+vec3  saturate_(vec3 x)  { return clamp(x, 0.0, 1.0); }
+
+/** 범위 재매핑 */
+float remap(float v, float inMin, float inMax, float outMin, float outMax) {
+  return outMin + (v - inMin) * (outMax - outMin) / (inMax - inMin);
+}
+
+/** 범위 재매핑 + 클램프 */
+float remapc(float v, float inMin, float inMax, float outMin, float outMax) {
+  return clamp(remap(v, inMin, inMax, outMin, outMax), min(outMin, outMax), max(outMin, outMax));
+}
+
+/** 0→1→0 곡선. 구간 중앙에서 최대 */
+float pulse(float x, float center, float width) {
+  return smoothstep(center - width, center, x) - smoothstep(center, center + width, x);
+}
+
+/** smoothstep 보다 부드러운 5차 보간 */
+float quintic(float t) { return t * t * t * (t * (t * 6.0 - 15.0) + 10.0); }
+
+/* --- 표준 이징 (Robert Penner) --- */
+float easeInQuad(float t)    { return t * t; }
+float easeOutQuad(float t)   { return t * (2.0 - t); }
+float easeInOutQuad(float t) { return t < 0.5 ? 2.0*t*t : -1.0 + (4.0 - 2.0*t)*t; }
+
+float easeInCubic(float t)   { return t * t * t; }
+float easeOutCubic(float t)  { float f = t - 1.0; return f*f*f + 1.0; }
+float easeInOutCubic(float t){ return t < 0.5 ? 4.0*t*t*t : (t-1.0)*(2.0*t-2.0)*(2.0*t-2.0)+1.0; }
+
+float easeInExpo(float t)    { return t <= 0.0 ? 0.0 : pow(2.0, 10.0 * (t - 1.0)); }
+float easeOutExpo(float t)   { return t >= 1.0 ? 1.0 : 1.0 - pow(2.0, -10.0 * t); }
+
+float easeOutBack(float t) {
+  const float c1 = 1.70158, c3 = c1 + 1.0;
+  float f = t - 1.0;
+  return 1.0 + c3 * f * f * f + c1 * f * f;
+}
+
+float easeOutElastic(float t) {
+  const float c4 = 6.283185307179586 / 3.0;
+  if (t <= 0.0) return 0.0;
+  if (t >= 1.0) return 1.0;
+  return pow(2.0, -10.0 * t) * sin((t * 10.0 - 0.75) * c4) + 1.0;
+}
+
+/** 화면 픽셀 단위 안티에일리어싱 경계. SDF 와 함께 쓴다 */
+float aastep(float threshold, float value) {
+  float afwidth = fwidth(value) * 0.7;
+  return smoothstep(threshold - afwidth, threshold + afwidth, value);
+}
+
+/** 지수 감쇠 (프레임레이트 독립). GLSL 안에서 시간 적분할 때 */
+float damp(float current, float target, float lambda, float dt) {
+  return mix(current, target, 1.0 - exp(-lambda * dt));
+}
+
+#endif
+```
+
+### 5.5 `lib/color.glsl` — 팔레트 · 색공간 · 그레인 · 디더
+
+```glsl
+#ifndef LIB_COLOR_GLSL
+#define LIB_COLOR_GLSL
+
+/**
+ * Inigo Quilez 코사인 팔레트.
+ * col = a + b * cos(2π(c*t + d))
+ * https://iquilezles.org/articles/palettes/
+ *
+ * 대표 조합:
+ *  rainbow : a(.5,.5,.5) b(.5,.5,.5) c(1,1,1)   d(0,.33,.67)
+ *  warm    : a(.5,.5,.5) b(.5,.5,.5) c(1,1,1)   d(0,.1,.2)
+ *  teal    : a(.5,.5,.5) b(.5,.5,.5) c(1,1,.5)  d(.8,.9,.3)
+ *  purple  : a(.8,.5,.4) b(.2,.4,.2) c(2,1,1)   d(0,.25,.25)
+ */
+vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
+  return a + b * cos(6.283185307179586 * (c * t + d));
+}
+
+vec3 rgb2hsv(vec3 c) {
+  vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+  float d = q.x - min(q.w, q.y);
+  float e = 1.0e-10;
+  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+}
+
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+/** 수동 색공간 변환 (three 청크를 못 쓰는 상황용) */
+vec3 srgbToLinear(vec3 c) {
+  return mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));
+}
+vec3 linearToSrgb(vec3 c) {
+  return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));
+}
+
+/** ACES 근사 톤매핑 (Narkowicz) */
+vec3 acesApprox(vec3 x) {
+  const float a = 2.51, b = 0.03, c = 2.43, d = 0.59, e = 0.14;
+  return clamp((x * (a * x + b)) / (x * (c * x + d) + e), 0.0, 1.0);
+}
+
+/** 채도 조절 */
+vec3 saturation(vec3 c, float amount) {
+  float l = dot(c, vec3(0.2126, 0.7152, 0.0722));
+  return mix(vec3(l), c, amount);
+}
+
+/** 콘트라스트 (pivot 0.5 기준) */
+vec3 contrast(vec3 c, float amount) {
+  return (c - 0.5) * amount + 0.5;
+}
+
+/** 필름 그레인. time 을 넣으면 매 프레임 달라진다 */
+float grain(vec2 fragCoord, float time) {
+  return fract(sin(dot(fragCoord + time, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+/** 8bit 프레임버퍼 밴딩 제거. 그라디언트에는 거의 필수 */
+vec3 dither8(vec3 color, vec2 fragCoord) {
+  float d = fract(sin(dot(fragCoord, vec2(12.9898, 78.233))) * 43758.5453);
+  return color + (d - 0.5) / 255.0;
+}
+
+/** 4x4 Bayer 디더 (레트로 룩) */
+float bayer4(vec2 fragCoord) {
+  int x = int(mod(fragCoord.x, 4.0));
+  int y = int(mod(fragCoord.y, 4.0));
+  int index = x + y * 4;
+  float m[16];
+  m[0]=0.0;  m[1]=8.0;  m[2]=2.0;  m[3]=10.0;
+  m[4]=12.0; m[5]=4.0;  m[6]=14.0; m[7]=6.0;
+  m[8]=3.0;  m[9]=11.0; m[10]=1.0; m[11]=9.0;
+  m[12]=15.0;m[13]=7.0; m[14]=13.0;m[15]=5.0;
+  for (int i = 0; i < 16; i++) { if (i == index) return m[i] / 16.0; }
+  return 0.0;
+}
+
+/** 비네트 */
+float vignette(vec2 uv, float offset, float darkness) {
+  vec2 c = (uv - 0.5) * 2.0;
+  return clamp(1.0 - dot(c, c) * darkness + offset, 0.0, 1.0);
+}
+
+/** 스캔라인 */
+float scanline(vec2 uv, float count, float intensity, float time) {
+  return 1.0 - intensity * (0.5 + 0.5 * sin((uv.y + time) * count * 3.14159265));
+}
+
+#endif
+```
+
+### 5.6 `lib/sdf.glsl` — 2D 시그니처 거리 함수
+
+> 출처 개념: [iquilezles.org/articles/distfunctions2d](https://iquilezles.org/articles/distfunctions2d/)
+> 반환값 < 0 → 내부, = 0 → 경계, > 0 → 외부
+
+```glsl
+#ifndef LIB_SDF_GLSL
+#define LIB_SDF_GLSL
+
+float sdCircle(vec2 p, float r) { return length(p) - r; }
+
+float sdBox(vec2 p, vec2 b) {
+  vec2 d = abs(p) - b;
+  return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
+}
+
+float sdRoundBox(vec2 p, vec2 b, float r) {
+  return sdBox(p, b - r) - r;
+}
+
+float sdSegment(vec2 p, vec2 a, vec2 b) {
+  vec2 pa = p - a, ba = b - a;
+  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+  return length(pa - ba * h);
+}
+
+float sdTriangleIso(vec2 p, vec2 q) {
+  p.x = abs(p.x);
+  vec2 a = p - q * clamp(dot(p, q) / dot(q, q), 0.0, 1.0);
+  vec2 b = p - q * vec2(clamp(p.x / q.x, 0.0, 1.0), 1.0);
+  float s = -sign(q.y);
+  vec2 d = min(vec2(dot(a, a), s * (p.x * q.y - p.y * q.x)),
+               vec2(dot(b, b), s * (p.y - q.y)));
+  return -sqrt(d.x) * sign(d.y);
+}
+
+float sdHexagon(vec2 p, float r) {
+  const vec3 k = vec3(-0.866025404, 0.5, 0.577350269);
+  p = abs(p);
+  p -= 2.0 * min(dot(k.xy, p), 0.0) * k.xy;
+  p -= vec2(clamp(p.x, -k.z * r, k.z * r), r);
+  return length(p) * sign(p.y);
+}
+
+float sdStar5(vec2 p, float r, float rf) {
+  const vec2 k1 = vec2(0.809016994, -0.587785252);
+  const vec2 k2 = vec2(-k1.x, k1.y);
+  p.x = abs(p.x);
+  p -= 2.0 * max(dot(k1, p), 0.0) * k1;
+  p -= 2.0 * max(dot(k2, p), 0.0) * k2;
+  p.x = abs(p.x);
+  p.y -= r;
+  vec2 ba = rf * vec2(-k1.y, k1.x) - vec2(0.0, 1.0);
+  float h = clamp(dot(p, ba) / dot(ba, ba), 0.0, r);
+  return length(p - ba * h) * sign(p.y * ba.x - p.x * ba.y);
+}
+
+/* --- 불리언 연산 --- */
+float opUnion(float d1, float d2)        { return min(d1, d2); }
+float opSubtract(float d1, float d2)     { return max(-d1, d2); }
+float opIntersect(float d1, float d2)    { return max(d1, d2); }
+
+/** 부드러운 합집합 (메타볼). k = 블렌딩 폭 */
+float opSmoothUnion(float d1, float d2, float k) {
+  float h = clamp(0.5 + 0.5 * (d2 - d1) / k, 0.0, 1.0);
+  return mix(d2, d1, h) - k * h * (1.0 - h);
+}
+
+float opSmoothSubtract(float d1, float d2, float k) {
+  float h = clamp(0.5 - 0.5 * (d2 + d1) / k, 0.0, 1.0);
+  return mix(d2, -d1, h) + k * h * (1.0 - h);
+}
+
+/** 외곽선. width 만큼의 링 */
+float opOutline(float d, float width) { return abs(d) - width; }
+
+/** SDF → 안티에일리어싱된 채움 마스크 */
+float sdfFill(float d) { return 1.0 - smoothstep(-fwidth(d), fwidth(d), d); }
+
+/** SDF → 안티에일리어싱된 선 */
+float sdfStroke(float d, float width) {
+  float w = fwidth(d);
+  return 1.0 - smoothstep(width - w, width + w, abs(d));
+}
+
+#endif
+```
+
+---
+
+## 6. 자주 쓰는 조합 레시피
+
+### 6.1 화면 UV와 종횡비 (거의 모든 배경 셰이더의 첫 줄)
+
+```glsl
+uniform vec2 uResolution;
+
+void main() {
+  // 0..1 스크린 UV
+  vec2 uv = gl_FragCoord.xy / uResolution;
+
+  // 짧은 축 기준 -1..1 (원이 타원으로 안 찌그러진다)
+  vec2 p = (gl_FragCoord.xy * 2.0 - uResolution) / min(uResolution.x, uResolution.y);
+
+  // 종횡비 보정된 0..1 (그리드용)
+  vec2 g = uv;
+  g.x *= uResolution.x / uResolution.y;
+}
+```
+
+### 6.2 텍스처 디스플레이스먼트 + 색수차 (P8/P9의 핵심)
+
+```glsl
+uniform sampler2D uTexture;
+uniform float uAmount;      // 0 ~ 0.02
+uniform vec2  uDirection;   // 정규화된 방향
+
+vec3 rgbShift(sampler2D tex, vec2 uv, vec2 dir, float amount) {
+  float r = texture2D(tex, uv + dir * amount).r;
+  float g = texture2D(tex, uv).g;
+  float b = texture2D(tex, uv - dir * amount).b;
+  return vec3(r, g, b);
+}
+
+/** 방사형 색수차 (렌즈처럼 가장자리만) */
+vec3 radialAberration(sampler2D tex, vec2 uv, float amount) {
+  vec2 dir = uv - 0.5;
+  float d = dot(dir, dir);          // 중심에서 멀수록 큼
+  float r = texture2D(tex, uv - dir * amount * d).r;
+  float g = texture2D(tex, uv).g;
+  float b = texture2D(tex, uv + dir * amount * d).b;
+  return vec3(r, g, b);
+}
+```
+
+### 6.3 정점 변위 후 노멀 재계산 (조명이 필요할 때 필수)
+
+정점을 노이즈로 움직이면 원래 노멀이 틀린다. 유한차분으로 다시 계산한다.
+
+```glsl
+#include './lib/noise.glsl'
+
+uniform float uTime;
+uniform float uAmplitude;
+uniform float uFrequency;
+
+varying vec3 vNormal;
+varying vec3 vWorldPos;
+
+/** 위치 → 변위 높이 */
+float displace(vec3 p) {
+  return snoise(p * uFrequency + vec3(0.0, 0.0, uTime * 0.2)) * uAmplitude;
+}
+
+void main() {
+  vec3 pos = position;
+  float d = displace(pos);
+  pos += normal * d;
+
+  // 접평면의 두 방향으로 아주 조금 이동시켜 새 노멀을 구한다
+  float eps = 0.01;
+  vec3 tangent  = normalize(cross(normal, vec3(0.0, 1.0, 0.0) + 1e-4));
+  vec3 bitangent = normalize(cross(normal, tangent));
+
+  vec3 pT = position + tangent * eps;
+  vec3 pB = position + bitangent * eps;
+  pT += normal * displace(pT);
+  pB += normal * displace(pB);
+
+  vec3 newNormal = normalize(cross(pT - pos, pB - pos));
+  // 방향이 뒤집힐 수 있으므로 원래 노멀과 부호를 맞춘다
+  newNormal *= sign(dot(newNormal, normal));
+
+  vNormal = normalize(normalMatrix * newNormal);
+  vWorldPos = (modelMatrix * vec4(pos, 1.0)).xyz;
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+}
+```
+
+> 비용: `displace()`를 3번 호출한다(노이즈 3배). vertex shader이므로 대부분 감당 가능하다.
+
+### 6.4 프레넬 (가장자리 발광 — "고급스러움"의 90%)
+
+```glsl
+// vertex
+varying vec3 vNormalW;
+varying vec3 vViewDir;
+
+void main() {
+  vec4 worldPos = modelMatrix * vec4(position, 1.0);
+  vNormalW = normalize(mat3(modelMatrix) * normal);
+  vViewDir = normalize(cameraPosition - worldPos.xyz);
+  gl_Position = projectionMatrix * viewMatrix * worldPos;
+}
+```
+
+```glsl
+// fragment
+uniform vec3  uColor;
+uniform vec3  uRimColor;
+uniform float uRimPower;      // 1.5 ~ 5.0
+uniform float uRimIntensity;  // 0.3 ~ 2.0
+
+varying vec3 vNormalW;
+varying vec3 vViewDir;
+
+void main() {
+  vec3 n = normalize(vNormalW);
+  vec3 v = normalize(vViewDir);
+
+  float fresnel = pow(1.0 - clamp(dot(n, v), 0.0, 1.0), uRimPower);
+
+  vec3 col = mix(uColor, uRimColor, fresnel * uRimIntensity);
+
+  gl_FragColor = vec4(col, 1.0);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+```
+
+### 6.5 깊이 기반 페이드 (파티클/안개)
+
+```glsl
+// vertex
+varying float vDepth;
+void main() {
+  vec4 mv = modelViewMatrix * vec4(position, 1.0);
+  vDepth = -mv.z;                              // 카메라로부터의 거리
+  gl_Position = projectionMatrix * mv;
+}
+
+// fragment
+uniform float uFogNear;
+uniform float uFogFar;
+varying float vDepth;
+void main() {
+  float fog = smoothstep(uFogNear, uFogFar, vDepth);
+  vec3 col = mix(baseColor, uFogColor, fog);
+  gl_FragColor = vec4(col, 1.0 - fog);
+}
+```
+
+### 6.6 시간 기반 순차 애니메이션 (스태거)
+
+```glsl
+uniform float uProgress;   // 0 ~ 1 (JS에서 GSAP 로 트윈)
+uniform float uTotal;      // 전체 개수
+uniform float uStagger;    // 0 ~ 0.9. 개체 간 지연의 총 폭
+
+attribute float aIndex;    // 개체 인덱스 (InstancedBufferAttribute)
+
+varying float vLocal;
+
+void main() {
+  // 인덱스가 클수록 늦게 시작한다
+  float delay = (aIndex / max(uTotal, 1.0)) * uStagger;
+  float local = clamp((uProgress - delay) / max(1.0 - uStagger, 1e-4), 0.0, 1.0);
+  local = local * local * (3.0 - 2.0 * local);   // smoothstep
+
+  vec3 pos = position;
+  pos.y += (1.0 - local) * -2.0;                 // 아래에서 올라온다
+  pos *= mix(0.4, 1.0, local);                   // 작게 시작해서 커진다
+
+  vLocal = local;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+}
+```
+
+fragment에서 `vLocal`로 알파까지 맞춘다.
+
+```glsl
+varying float vLocal;
+uniform vec3 uColor;
+
+void main() {
+  gl_FragColor = vec4(uColor, vLocal);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+```
+
+---
+
+## 7. LYGIA — 대규모 셰이더 함수 라이브러리
+
+노이즈/필터/색공간/SDF/조명 수백 개 함수를 `#include`로 가져온다. GLSL/HLSL/WGSL/MSL 지원.
+
+### 설치 (로컬 번들 — 프로덕션 권장)
+
+```bash
+# 서브모듈로 추가
+git submodule add https://github.com/patriciogonzalezvivo/lygia.git src/shaders/lygia
+# 또는 그냥 clone
+git clone --depth 1 https://github.com/patriciogonzalezvivo/lygia.git src/shaders/lygia
+```
+
+```glsl
+#include "lygia/generative/snoise.glsl"
+#include "lygia/generative/curl.glsl"
+#include "lygia/generative/fbm.glsl"
+#include "lygia/space/ratio.glsl"
+#include "lygia/space/rotate.glsl"
+#include "lygia/color/palette/hue.glsl"
+#include "lygia/draw/circle.glsl"
+#include "lygia/sdf/circleSDF.glsl"
+#include "lygia/filter/gaussianBlur.glsl"
+#include "lygia/math/map.glsl"
+
+void main() {
+  vec2 st = ratio(gl_FragCoord.xy / u_resolution, u_resolution);
+  float n = fbm(vec3(st * 3.0, u_time * 0.1));
+  gl_FragColor = vec4(vec3(n), 1.0);
+}
+```
+
+`vite-plugin-glsl`이 `#include`를 인라인해준다. **경로는 프로젝트 루트가 아니라 셰이더 파일 기준 상대경로**여야 하므로, `src/shaders/lygia/`에 두고 `#include './lygia/...'`로 쓰는 게 안전하다.
+
+### 런타임 해석 (프로토타입용)
+
+```html
+<script src="https://lygia.xyz/resolve.js"></script>
+```
+
+```js
+fragmentShader = resolveLygia(fragmentShader)   // 원격에서 의존성 fetch
+```
+
+프로덕션에서 쓰지 마라. 네트워크 왕복이 첫 렌더를 지연시킨다.
+
+### 자주 쓰는 LYGIA 모듈
+
+| 경로 | 용도 |
+|---|---|
+| `generative/snoise.glsl` | simplex 노이즈 (1D~4D 오버로드) |
+| `generative/pnoise.glsl` | 주기적(타일링 가능) perlin |
+| `generative/curl.glsl` | 컬 노이즈 |
+| `generative/fbm.glsl` | FBM |
+| `generative/worley.glsl` | 셀 노이즈 |
+| `space/ratio.glsl` | 종횡비 보정 |
+| `space/rotate.glsl` | 회전 |
+| `space/scale.glsl` | 스케일 |
+| `sdf/*.glsl` | 2D/3D SDF 전체 |
+| `draw/circle.glsl`, `draw/stroke.glsl` | 안티에일리어싱된 도형 |
+| `color/palette/*.glsl` | 팔레트 (IQ 코사인 등) |
+| `color/space/*.glsl` | 색공간 변환 |
+| `filter/gaussianBlur.glsl` | 블러 (분리 가능) |
+| `lighting/fresnel.glsl` | 프레넬 |
+| `math/map.glsl`, `math/lerp.glsl` | 유틸 |
+
+---
+
+## 8. 디버깅
+
+### 8.1 색으로 값 확인하기
+
+```glsl
+// 0..1 값 확인: 흑백
+gl_FragColor = vec4(vec3(value), 1.0); return;
+
+// -1..1 값 확인: 음수는 빨강, 양수는 초록
+gl_FragColor = vec4(max(-value, 0.0), max(value, 0.0), 0.0, 1.0); return;
+
+// UV 확인: 좌하단 검정, 우상단 노랑
+gl_FragColor = vec4(vUv, 0.0, 1.0); return;
+
+// 노멀 확인
+gl_FragColor = vec4(normalize(vNormal) * 0.5 + 0.5, 1.0); return;
+
+// NaN 확인: NaN 이면 조건이 모두 false → 검정
+gl_FragColor = vec4(value == value ? vec3(0,1,0) : vec3(1,0,0), 1.0); return;
+```
+
+### 8.2 흔한 에러와 원인
+
+| 증상 | 원인 | 해결 |
+|---|---|---|
+| `'assign' : cannot convert from 'int' to 'float'` | `float x = 1;` | `float x = 1.0;` |
+| `'constructor' : too many arguments` | `vec3(1.0, 2.0, 3.0, 4.0)` | 인자 수 확인 |
+| `undeclared identifier 'texture'` | GLSL1인데 `texture()` 사용 | `texture2D()` 사용 |
+| `'gl_FragColor' : undeclared` | `glslVersion: GLSL3` 지정됨 | `out vec4 fragColor;` 선언 |
+| `redefinition of 'position'` | 자동 주입 attribute 재선언 | 선언 제거 |
+| 화면이 검정 | `gl_Position` 미설정, 카메라 뒤, `depthTest` 문제 | `gl_FragColor = vec4(1,0,0,1)`로 격리 테스트 |
+| 색이 이상하게 밝음/어두움 | 톤매핑 또는 색공간 청크 누락/중복 | `#include <tonemapping_fragment>` + `<colorspace_fragment>` 확인 |
+| 모바일에서만 깨짐 | `highp` 미지원 또는 정밀도 부족 | `precision highp float` 명시, 좌표 범위 축소 |
+| 그라디언트에 줄무늬(밴딩) | 8bit 프레임버퍼 | `dither8()` 추가 |
+| 파티클이 갑자기 사라짐 | frustum culling | `mesh.frustumCulled = false` 또는 큰 boundingSphere |
+| 텍스처가 뒤집힘 | `flipY` 차이 | `texture.flipY = false` (glTF 텍스처는 이미 false) |
+
+### 8.3 셰이더 컴파일 로그 보기
+
+```js
+renderer.debug.checkShaderErrors = true   // 기본값 true. 프로덕션에서 false 로 하면 빨라짐
+
+// 컴파일된 최종 셰이더 소스 출력
+material.onBeforeCompile = (shader) => {
+  console.log('--- VERTEX ---\n', shader.vertexShader)
+  console.log('--- FRAGMENT ---\n', shader.fragmentShader)
+}
+```
+
+### 8.4 성능 측정
+
+```js
+// GPU 시간 측정 (WebGL2 EXT_disjoint_timer_query_webgl2 필요)
+import Stats from 'three/addons/libs/stats.module.js'
+const stats = new Stats()
+document.body.appendChild(stats.dom)
+// 렌더 루프에서 stats.update()
+
+// 또는 stats-gl (GPU 시간까지 표시)
+// npm i stats-gl
+import Stats from 'stats-gl'
+const stats = new Stats({ trackGPU: true })
+await stats.init(renderer)
+```
+
+**프래그먼트 비용 격리 테스트**: 캔버스를 200×200으로 줄여보고 프레임이 회복되면 fragment 병목,
+그대로면 vertex/드로우콜 병목이다.
+
+---
+
+## 9. 셰이더 작성 체크리스트
+
+- [ ] `float` 리터럴에 소수점을 찍었다 (`1.0`, `0.5`)
+- [ ] fragment 상단에 `precision mediump float;` (좌표 계산은 `highp`)
+- [ ] 자동 주입되는 uniform/attribute를 재선언하지 않았다
+- [ ] fragment 마지막에 `<tonemapping_fragment>` → `<colorspace_fragment>` 순서로 넣었다
+- [ ] 색은 JS에서 `THREE.Color`로 넘겼다 (하드코딩된 `vec3`는 linear 값임을 인지)
+- [ ] 그라디언트가 있으면 디더를 넣었다
+- [ ] 무거운 계산을 fragment → vertex로 옮길 수 있는지 검토했다
+- [ ] 루프 카운트가 상수다 (`#define`)
+- [ ] `normalize()` 인자가 0이 될 수 있으면 `+ 1e-5`를 더했다
+- [ ] `discard`를 쓴다면 정말 필요한지 검토했다 (early-Z 손실)
+- [ ] 종횡비 보정을 했다 (원이 타원이 되지 않는가)
+- [ ] `onBeforeCompile`을 썼다면 `customProgramCacheKey`를 지정했다
+- [ ] 모바일 실기기에서 확인했다 (에뮬레이터로는 정밀도 문제를 못 잡는다)
diff --git a/research/three/04-performance.md b/research/three/04-performance.md
new file mode 100644
index 0000000..c3e3ba5
--- /dev/null
+++ b/research/three/04-performance.md
@@ -0,0 +1,1248 @@
+# 04 — 성능 · 폴백 · 접근성
+
+> 이 문서의 수치는 **실측 기준선**이다. "느리다/빠르다" 대신 숫자로 판단한다.
+> 기준 기기: 저사양 = iPhone SE 3세대 / Galaxy A54 (Adreno 613급), 중간 = iPhone 13 / Pixel 7, 고사양 = M2 MacBook / RTX 3060
+
+---
+
+## 1. 예산 (Budget) — 먼저 정하고 시작한다
+
+### 1.1 프레임 예산
+
+| 목표 fps | 프레임 예산 | 그 중 GPU가 쓸 수 있는 시간 |
+|---|---|---|
+| 60fps | **16.6ms** | ~12ms (나머지는 브라우저 합성/JS) |
+| 30fps (모바일 타협) | 33.3ms | ~26ms |
+| 120fps (ProMotion) | 8.3ms | ~6ms |
+
+**판정 기준**
+- 데스크톱: **60fps 유지**, 프레임 드롭 < 1%
+- 모바일: **최소 30fps**, 스크롤 중 45fps 이상
+- `requestAnimationFrame` 간격의 p95가 20ms를 넘으면 실패
+
+### 1.2 렌더 예산
+
+| 항목 | 데스크톱 상한 | 모바일 상한 | 측정 |
+|---|---|---|---|
+| 드로우콜 | **150** | **60** | `renderer.info.render.calls` |
+| 삼각형 | 500,000 | 120,000 | `renderer.info.render.triangles` |
+| 프로그램(셰이더) 수 | 25 | 15 | `renderer.info.programs.length` |
+| 텍스처 수 | 40 | 20 | `renderer.info.memory.textures` |
+| 지오메트리 수 | 60 | 30 | `renderer.info.memory.geometries` |
+| **VRAM 총량** | 400MB | **120MB** | 아래 §1.3 계산 |
+| 활성 라이트 | 4 | 2 | 그림자 있으면 각각 1로 카운트 |
+| 그림자 캐스터 | 2 | **0** | PointLight 그림자는 6배 |
+
+### 1.3 VRAM 계산법
+
+```
+텍스처 VRAM = width × height × 4 bytes × (밉맵 있으면 × 1.33)
+```
+
+| 텍스처 | 밉맵 없음 | 밉맵 있음 |
+|---|---|---|
+| 512×512 | 1.0 MB | 1.4 MB |
+| 1024×1024 | 4.2 MB | 5.6 MB |
+| 2048×2048 | 16.8 MB | 22.3 MB |
+| 4096×4096 | **67.1 MB** | **89.3 MB** |
+| HDRI 2048×1024 (HalfFloat) | 16.8 MB | — |
+
+**KTX2/ETC1S로 압축하면 위 값의 약 1/8**, UASTC는 약 1/4가 된다. WebP/AVIF는 다운로드만 줄이고 **VRAM은 동일**하다.
+
+```js
+// 런타임 VRAM 추정 (근사)
+function estimateVram(renderer) {
+  let bytes = 0
+  renderer.info.memory.textures // 개수만 알려줌 → 직접 추적해야 정확
+  // 실무: 로드한 텍스처를 배열에 모아두고 계산
+  return bytes
+}
+```
+
+### 1.4 번들 예산
+
+| 구성 | gzip | brotli | 판정 |
+|---|---|---|---|
+| three (트리셰이킹된 최소 씬) | ~90 KB | ~75 KB | 바닥값 |
+| three + R3F + React | ~165 KB | ~140 KB | |
+| + drei (named import 3~5개) | +15~30 KB | | |
+| + drei (배럴 전체 import) | **+100 KB 이상** | | ❌ 금지 |
+| + postprocessing (Bloom+CA+Noise) | +32 KB | | |
+| + gsap core + ScrollTrigger | +40 KB | | |
+| + lenis | +5 KB | | |
+| + troika-three-text | +55 KB | | |
+| **초기 경로 JS 총합 목표** | **< 200 KB** | | three는 지연 로드로 제외 |
+
+**규칙**: three와 씬 코드는 **초기 번들에 절대 넣지 않는다.** `import()`로 분리하고 IntersectionObserver로 트리거한다.
+
+---
+
+## 2. 측정
+
+### 2.1 개발 중 상시 표시
+
+```js
+// stats-gl: CPU + GPU 시간 둘 다 (three 내장 Stats 는 CPU만)
+// npm i stats-gl
+import Stats from 'stats-gl'
+
+const stats = new Stats({ trackGPU: true, trackHz: true, trackCPT: false })
+await stats.init(renderer)
+document.body.appendChild(stats.dom)
+
+renderer.setAnimationLoop((t) => {
+  stats.begin()
+  uniforms.uTime.value = t / 1000
+  renderer.render(scene, camera)
+  stats.end()
+  stats.update()   // begin/end 사이 구간을 CPU·GPU 각각으로 집계한다
+})
+```
+
+R3F에서는:
+
+```tsx
+// npm i -D r3f-perf
+import { Perf } from 'r3f-perf'
+// <Canvas> 내부에 <Perf position="top-left" />
+```
+
+### 2.2 렌더 통계 덤프
+
+```js
+// src/gl/debug.js
+export function logRenderInfo(renderer, label = '') {
+  const i = renderer.info
+  console.table({
+    [label || 'render']: {
+      calls: i.render.calls,
+      triangles: i.render.triangles,
+      points: i.render.points,
+      lines: i.render.lines,
+      textures: i.memory.textures,
+      geometries: i.memory.geometries,
+      programs: i.programs?.length ?? 0,
+    },
+  })
+}
+
+/** 3초마다 자동 로깅 (개발 전용) */
+export function watchRenderInfo(renderer, interval = 3000) {
+  if (import.meta.env.PROD) return () => {}
+  const id = setInterval(() => logRenderInfo(renderer), interval)
+  return () => clearInterval(id)
+}
+```
+
+### 2.3 병목 격리 실험
+
+| 실험 | 회복되면 |
+|---|---|
+| 캔버스를 200×200으로 축소 | **프래그먼트/필레이트 병목** → 셰이더 단순화, DPR 하향, 오버드로우 축소 |
+| `renderer.setPixelRatio(0.5)` | 동일 (필레이트) |
+| 오브젝트를 절반으로 줄임 | **드로우콜 병목** → 인스턴싱, 지오메트리 병합 |
+| 셰이더를 `gl_FragColor = vec4(1.0)` 로 대체 | 프래그먼트 연산 병목 |
+| 텍스처 해상도를 1/4로 | **텍스처 대역폭/VRAM 병목** |
+| 애니메이션 루프에서 씬 업데이트만 제거 | **CPU(JS) 병목** → 객체 생성, 레이캐스팅 확인 |
+
+### 2.4 Lighthouse / Core Web Vitals
+
+| 지표 | 기준 (Good) | WebGL 사이트에서 위험한 이유 |
+|---|---|---|
+| **LCP** | ≤ 2.5s | 캔버스가 LCP 요소가 되면 셰이더 컴파일까지 기다린다 |
+| **INP** | ≤ 200ms | 셰이더 컴파일/텍스처 업로드가 메인 스레드를 막는다 |
+| **CLS** | ≤ 0.1 | 캔버스 크기가 나중에 정해지면 레이아웃이 밀린다 |
+| **TBT** | ≤ 200ms | three 파싱 + 컴파일이 롱태스크가 된다 |
+
+**WebGL 사이트에서 Lighthouse를 지키는 5가지**
+
+1. **LCP 요소를 캔버스가 아닌 DOM 텍스트/이미지로 만든다.** 히어로 제목이 LCP가 되게 하고, 캔버스는 그 뒤 배경.
+2. **캔버스 컨테이너에 고정 크기(`aspect-ratio` 또는 `min-height`)를 준다.** CLS 방지.
+3. **three를 `import()`로 분리**하고 LCP 이후에 로드한다.
+4. **셰이더 컴파일을 분산한다.** 한 프레임에 머티리얼 10개를 처음 렌더하면 100ms 이상 멈춘다 → `renderer.compileAsync()`(r170+) 또는 순차 마운트.
+5. **디코더 WASM(DRACO/basis)을 preload하지 마라.** 실제 필요할 때만 받게 한다.
+
+```html
+<!-- CLS 방지: 캔버스 자리를 미리 확보 -->
+<div class="hero__canvas-wrap" style="aspect-ratio: 16/9; min-height: 60svh;">
+  <canvas id="gl"></canvas>
+</div>
+```
+
+```js
+// 셰이더 컴파일 비동기화 [r170+]
+await renderer.compileAsync(scene, camera)   // 첫 렌더 전 미리 컴파일
+```
+
+---
+
+## 3. 런타임 최적화 — 효과 순서대로
+
+### 3.1 DPR 클램프 (가장 효과가 크다)
+
+DPR 3 → 2로 낮추면 픽셀 수가 **55% 감소**한다. 육안 차이는 거의 없다.
+
+```js
+const dpr = Math.min(window.devicePixelRatio || 1, 2)
+renderer.setPixelRatio(dpr)
+```
+
+| 콘텐츠 | 권장 DPR 상한 |
+|---|---|
+| 풀스크린 배경 셰이더 | **1.25 ~ 1.5** |
+| 파티클 | 1.5 |
+| 3D 모델 (제품) | 2 |
+| 텍스트가 WebGL 안에 있음 | 2 (SDF라도 선명도 필요) |
+| 포스트프로세싱 사용 | 1.5 (이펙트마다 풀스크린 패스) |
+
+**동적 DPR** (프레임레이트에 따라):
+
+```js
+// src/gl/adaptiveDpr.js
+export function createAdaptiveDpr(renderer, { min = 0.75, max = 2, target = 55 } = {}) {
+  let current = Math.min(window.devicePixelRatio || 1, max)
+  let samples = []
+  let cooldown = 0
+
+  renderer.setPixelRatio(current)
+
+  return function update(delta) {
+    if (cooldown > 0) { cooldown -= delta; return current }
+
+    samples.push(1 / Math.max(delta, 1e-4))
+    if (samples.length < 60) return current
+
+    samples.sort((a, b) => a - b)
+    const median = samples[30]
+    samples = []
+
+    let next = current
+    if (median < target - 8) next = Math.max(min, current - 0.25)
+    else if (median > target + 8) next = Math.min(max, Math.min(window.devicePixelRatio, current + 0.25))
+
+    if (next !== current) {
+      current = next
+      renderer.setPixelRatio(current)
+      cooldown = 1.5   // 진동 방지
+    }
+    return current
+  }
+}
+```
+
+R3F는 `<PerformanceMonitor>` + `<AdaptiveDpr>`가 같은 일을 한다.
+
+```tsx
+const [dpr, setDpr] = useState(1.5)
+<Canvas dpr={dpr}>
+  <PerformanceMonitor
+    onIncline={() => setDpr(Math.min(2, window.devicePixelRatio))}
+    onDecline={() => setDpr(1)}
+    flipflops={3}                      // 3번 진동하면 포기하고 고정
+    onFallback={() => setDpr(1)}
+  />
+  <AdaptiveDpr pixelated />
+</Canvas>
+```
+
+### 3.2 안 그릴 때 안 그리기
+
+```js
+// 1) 탭이 백그라운드일 때
+document.addEventListener('visibilitychange', () => {
+  document.hidden ? renderer.setAnimationLoop(null) : renderer.setAnimationLoop(tick)
+})
+
+// 2) 캔버스가 뷰포트 밖일 때
+new IntersectionObserver(([e]) => {
+  e.isIntersecting ? start() : stop()
+}, { rootMargin: '10%' }).observe(canvas)
+
+// 3) 씬이 정적일 때 — 온디맨드 렌더
+let needsRender = true
+function invalidate() { needsRender = true }
+renderer.setAnimationLoop(() => {
+  if (!needsRender) return
+  needsRender = false
+  renderer.render(scene, camera)
+})
+controls.addEventListener('change', invalidate)
+window.addEventListener('resize', invalidate)
+```
+
+R3F:
+
+```tsx
+<Canvas frameloop="demand">   {/* 기본 always */}
+// 씬 안에서
+const invalidate = useThree(s => s.invalidate)
+// 값이 바뀔 때 invalidate() 호출
+```
+
+**효과**: 정적 제품 뷰어에서 배터리 소모가 **80% 이상** 감소한다.
+
+### 3.3 드로우콜 줄이기
+
+| 방법 | 적용 조건 | 효과 |
+|---|---|---|
+| `InstancedMesh` | 동일 지오메트리 + 동일 머티리얼 | N개 → 1콜 |
+| `BatchedMesh` [r159+] | 서로 다른 지오메트리 + 동일 머티리얼 | N개 → 1콜 |
+| `BufferGeometryUtils.mergeGeometries()` | 정적 오브젝트 | N개 → 1콜 (개별 제어 불가) |
+| drei `<Merged>` | R3F에서 인스턴싱 자동화 | 동일 |
+| 텍스처 아틀라스 | 머티리얼이 여러 개인 이유가 텍스처뿐일 때 | 머티리얼 통합 |
+
+```js
+// 정적 지오메트리 병합
+import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js'
+
+const geometries = meshes.map(m => {
+  const g = m.geometry.clone()
+  g.applyMatrix4(m.matrixWorld)
+  return g
+})
+const merged = BufferGeometryUtils.mergeGeometries(geometries)
+const one = new THREE.Mesh(merged, sharedMaterial)
+```
+
+### 3.4 지오메트리·머티리얼 공유
+
+```js
+// ❌ 100개의 지오메트리 + 100개의 셰이더 프로그램
+items.forEach(() => new THREE.Mesh(new THREE.PlaneGeometry(1,1), new THREE.MeshBasicMaterial()))
+
+// ✅ 1개 지오메트리 + 1개 머티리얼
+const geometry = new THREE.PlaneGeometry(1, 1)
+const material = new THREE.MeshBasicMaterial()
+items.forEach(() => new THREE.Mesh(geometry, material))
+```
+
+uniform이 인스턴스마다 달라야 하면 `InstancedBufferAttribute`나 `onBeforeRender`를 쓴다.
+
+### 3.5 텍스처 최적화
+
+```js
+// 표시 크기에 맞춰 리사이즈 (서버/빌드 타임에)
+// 카드가 400px 폭이면 800px 텍스처면 충분하다 (DPR 2)
+
+texture.colorSpace = THREE.SRGBColorSpace   // 컬러 텍스처만
+texture.generateMipmaps = false             // 축소 표시 안 하면 메모리 25% 절약
+texture.minFilter = THREE.LinearFilter      // 밉맵 없으면 필수
+texture.anisotropy = 1                      // 4 이상은 대부분 낭비. 바닥 텍스처만 8
+texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping
+
+// 대량 텍스처 로딩은 ImageBitmap 로더가 메인스레드를 덜 막는다
+const loader = new THREE.ImageBitmapLoader()
+loader.setOptions({ imageOrientation: 'flipY' })
+```
+
+**포맷 결정 트리**
+
+```
+텍스처가 3D 모델에 붙는가?
+├─ 예 → VRAM이 문제인가?
+│        ├─ 예 → KTX2 (알베도: ETC1S, 노멀: UASTC)
+│        └─ 아니오 → WebP (다운로드만 절약)
+└─ 아니오(플레인/배경) → WebP 또는 AVIF, 밉맵 끄기
+```
+
+### 3.6 셰이더 비용 줄이기
+
+| 항목 | 나쁨 | 좋음 |
+|---|---|---|
+| precision | 전부 `highp` | 색/일반 계산은 `mediump` (모바일 ~2배) |
+| varying 개수 | 8개 | **3개 이하** (모바일 GPU 레지스터 압박) |
+| 텍스처 페치 | 프래그먼트당 8회 | 4회 이하. 4채널에 데이터를 패킹 |
+| 노이즈 | fragment에서 FBM 5옥타브 | vertex로 이동하거나 옥타브 3 이하 |
+| 분기 | `if (uniform > 0.5)` | `mix()` + `step()` 또는 `#define` |
+| `pow(x, 2.0)` | | `x * x` |
+| `length(v)` 비교 | `length(a-b) < r` | `dot(d,d) < r*r` (sqrt 제거) |
+| `normalize()` | 매번 | 필요할 때만. vertex에서 정규화해 varying으로 |
+
+### 3.7 오버드로우 (투명 파티클의 진짜 적)
+
+투명 픽셀이 겹칠수록 프래그먼트 셰이더가 반복 실행된다. 파티클 3만 개가 화면을 5겹 덮으면 실질 필레이트는 5배다.
+
+```js
+material.depthWrite = false        // 투명 오브젝트는 필수
+material.depthTest = true
+material.blending = THREE.AdditiveBlending
+```
+
+```glsl
+// 얼리 아웃으로 블렌딩 비용 절감
+if (alpha < 0.01) discard;
+```
+
+**가장 효과적인 대책은 파티클 개수가 아니라 `gl_PointSize`를 줄이는 것이다.**
+
+### 3.8 그림자
+
+랜딩페이지에서 실시간 그림자는 거의 항상 손해다.
+
+| 대안 | 비용 | 품질 |
+|---|---|---|
+| `ContactShadows` (drei, `frames={1}`) | 1회 렌더 후 정지 | 좋음 |
+| `AccumulativeShadows` (drei) | 초기 N프레임만 | 매우 좋음 |
+| Baked AO 텍스처 | 0 | 최고 (정적 씬) |
+| 반투명 원형 플레인 | 0 | 보통 |
+| `PCFShadowMap` [r182+] | 라이트당 1 렌더 패스 | 보통 |
+
+---
+
+## 4. 로딩 전략
+
+### 4.1 3단계 로딩
+
+```
+[0ms]     DOM + CSS 폴백 배경 (그라디언트/정적 이미지)  ← LCP는 여기서 확정
+[LCP 후]  three + 씬 코드 dynamic import (~90KB)
+[씬 준비]  캔버스 fade-in (300ms), 폴백 배경은 뒤에 그대로 유지
+[유휴]    무거운 에셋(GLTF, HDRI)을 requestIdleCallback 으로 로드
+```
+
+```js
+// src/gl/bootstrap.js
+export async function bootstrapScene(canvas, { onReady } = {}) {
+  // 1) 게이팅
+  if (!canGL()) return null
+
+  // 2) LCP 이후까지 기다린다
+  await afterLCP()
+
+  // 3) 뷰포트 진입 대기
+  await inViewport(canvas)
+
+  // 4) 코드 로드
+  const { default: mount } = await import('../scenes/hero.js')
+
+  // 5) 마운트 + 페이드인
+  const dispose = mount(canvas, {})
+  canvas.style.transition = 'opacity 400ms ease'
+  canvas.style.opacity = '1'
+  onReady?.()
+  return dispose
+}
+
+function canGL() {
+  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
+  if (reduced) return false
+  if (navigator.connection?.saveData) return false
+  if ((navigator.deviceMemory ?? 8) < 4) return false
+  if ((navigator.hardwareConcurrency ?? 8) < 4) return false
+  try {
+    const gl = document.createElement('canvas').getContext('webgl2')
+    if (!gl) return false
+    gl.getExtension('WEBGL_lose_context')?.loseContext()
+    return true
+  } catch { return false }
+}
+
+function afterLCP() {
+  return new Promise((resolve) => {
+    if (!('PerformanceObserver' in window)) return setTimeout(resolve, 800)
+    let done = false
+    const finish = () => { if (!done) { done = true; resolve() } }
+    try {
+      const po = new PerformanceObserver(() => { po.disconnect(); finish() })
+      po.observe({ type: 'largest-contentful-paint', buffered: true })
+    } catch { /* noop */ }
+    // 안전망
+    setTimeout(finish, 2000)
+  })
+}
+
+function inViewport(el) {
+  return new Promise((resolve) => {
+    const io = new IntersectionObserver(([e]) => {
+      if (e.isIntersecting) { io.disconnect(); resolve() }
+    }, { rootMargin: '200px' })
+    io.observe(el)
+  })
+}
+```
+
+### 4.2 진행률 표시 (three `LoadingManager`)
+
+```js
+const manager = new THREE.LoadingManager()
+manager.onProgress = (url, loaded, total) => {
+  const pct = Math.round((loaded / total) * 100)
+  document.querySelector('.loader__bar').style.transform = `scaleX(${pct / 100})`
+}
+manager.onLoad = () => {
+  document.querySelector('.loader').classList.add('is-done')
+}
+manager.onError = (url) => {
+  console.error('load failed:', url)
+  document.querySelector('.loader').classList.add('is-done')  // 실패해도 로더는 치운다
+}
+
+const textureLoader = new THREE.TextureLoader(manager)
+const gltfLoader = new GLTFLoader(manager)
+```
+
+**로더의 원칙**: 로딩 화면은 **1.5초 이상 걸릴 때만** 보여라. 그보다 짧으면 깜빡임이 더 나쁘다.
+
+```js
+let loaderShown = false
+const showTimer = setTimeout(() => { loaderShown = true; showLoader() }, 400)
+manager.onLoad = () => {
+  clearTimeout(showTimer)
+  if (loaderShown) hideLoaderWithDelay(300)   // 최소 표시 시간 보장
+  else hideLoader()
+}
+```
+
+### 4.3 프로그레시브 에셋
+
+```js
+// 저해상도 → 고해상도 교체
+const lowRes = await loader.loadAsync('/img/hero-32.jpg')      // 2KB, 즉시 표시
+material.uniforms.uTexture.value = lowRes
+
+requestIdleCallback(async () => {
+  const highRes = await loader.loadAsync('/img/hero-1600.webp')
+  highRes.colorSpace = THREE.SRGBColorSpace
+  material.uniforms.uTexture.value = highRes
+  lowRes.dispose()
+})
+```
+
+---
+
+## 5. 품질 티어 시스템 (모바일/저사양 분기)
+
+**한 번 판정하고 전체 씬 설정을 결정한다.** 개별 컴포넌트가 각자 판단하면 조합 폭발이 일어난다.
+
+```js
+// src/gl/quality.js
+import { getGPUTier } from 'detect-gpu'
+
+/**
+ * @typedef {'off'|'low'|'mid'|'high'} Tier
+ * @typedef {object} QualityConfig
+ */
+
+const CONFIGS = {
+  off: null,
+  low: {
+    tier: 'low',
+    dpr: 1,
+    antialias: false,
+    shadows: false,
+    postprocessing: false,
+    particleCount: 4000,
+    gpgpuSize: 64,
+    planeSegments: 48,
+    fbmOctaves: 2,
+    textureMaxSize: 1024,
+    transmissionSamples: 2,
+    transmissionResolution: 256,
+    environment: false,
+    targetFps: 30,
+  },
+  mid: {
+    tier: 'mid',
+    dpr: 1.5,
+    antialias: false,
+    shadows: false,
+    postprocessing: 'minimal',   // vignette + tonemapping 만
+    particleCount: 15000,
+    gpgpuSize: 128,
+    planeSegments: 96,
+    fbmOctaves: 3,
+    textureMaxSize: 1536,
+    transmissionSamples: 4,
+    transmissionResolution: 512,
+    environment: true,
+    targetFps: 60,
+  },
+  high: {
+    tier: 'high',
+    dpr: 2,
+    antialias: true,
+    shadows: true,
+    postprocessing: 'full',
+    particleCount: 40000,
+    gpgpuSize: 256,
+    planeSegments: 160,
+    fbmOctaves: 4,
+    textureMaxSize: 2048,
+    transmissionSamples: 8,
+    transmissionResolution: 1024,
+    environment: true,
+    targetFps: 60,
+  },
+}
+
+let cached = null
+
+/**
+ * 품질 티어를 판정한다. 결과는 캐시되고 sessionStorage 에 저장된다.
+ * @returns {Promise<QualityConfig|null>} null 이면 WebGL 을 쓰지 않는다
+ */
+export async function resolveQuality({ force } = {}) {
+  if (cached !== undefined && cached !== null) return cached
+  if (force) return CONFIGS[force]
+
+  // 0) 하드 차단 조건
+  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
+  if (reduced) return (cached = null)
+  if (navigator.connection?.saveData) return (cached = null)
+
+  // 1) 캐시된 판정 재사용 (detect-gpu 벤치마크는 ~50ms 걸린다)
+  const stored = sessionStorage.getItem('gl-tier')
+  if (stored && CONFIGS[stored] !== undefined) {
+    return (cached = CONFIGS[stored])
+  }
+
+  // 2) 저사양 하드웨어 신호
+  const mem = navigator.deviceMemory ?? 8
+  const cores = navigator.hardwareConcurrency ?? 8
+  if (mem < 4 || cores < 4) {
+    sessionStorage.setItem('gl-tier', 'off')
+    return (cached = null)
+  }
+
+  // 3) GPU 벤치마크
+  let tier = 'mid'
+  try {
+    const gpu = await getGPUTier({ benchmarksURL: '/benchmarks' })  // 자체 호스팅 권장
+    // gpu.tier: 0(미지원/블록리스트) 1(<30fps) 2(<60fps) 3(60fps+)
+    if (gpu.tier === 0 || gpu.type === 'BLOCKLISTED') tier = 'off'
+    else if (gpu.tier === 1) tier = 'low'
+    else if (gpu.tier === 2) tier = gpu.isMobile ? 'low' : 'mid'
+    else tier = gpu.isMobile ? 'mid' : 'high'
+  } catch {
+    // detect-gpu 실패 시 보수적으로
+    tier = matchMedia('(max-width: 768px)').matches ? 'low' : 'mid'
+  }
+
+  sessionStorage.setItem('gl-tier', tier)
+  cached = CONFIGS[tier]
+  return cached
+}
+
+/** 런타임에 티어를 낮춘다 (프레임 저하 감지 시) */
+export function degrade(current) {
+  const order = ['high', 'mid', 'low', 'off']
+  const i = order.indexOf(current.tier)
+  const next = order[Math.min(i + 1, order.length - 1)]
+  sessionStorage.setItem('gl-tier', next)
+  return CONFIGS[next]
+}
+```
+
+### 런타임 자동 강등
+
+```js
+// src/gl/watchdog.js
+/**
+ * N초 동안 목표 fps에 못 미치면 콜백을 부른다.
+ * @param {number} targetFps
+ * @param {() => void} onFail
+ */
+export function createWatchdog(targetFps, onFail, { window: winSec = 4, ratio = 0.7 } = {}) {
+  let elapsed = 0
+  let badFrames = 0
+  let totalFrames = 0
+  let fired = false
+
+  return function update(delta) {
+    if (fired) return
+    elapsed += delta
+    totalFrames++
+    if (1 / delta < targetFps * 0.75) badFrames++
+
+    if (elapsed >= winSec) {
+      if (badFrames / totalFrames > 1 - ratio) {
+        fired = true
+        onFail()
+      }
+      elapsed = 0; badFrames = 0; totalFrames = 0
+    }
+  }
+}
+```
+
+사용:
+
+```js
+const quality = await resolveQuality()
+if (!quality) { /* 폴백 DOM 만 남긴다 */ }
+else {
+  const dispose = mountScene(canvas, quality)
+  const watchdog = createWatchdog(quality.targetFps, () => {
+    dispose()
+    const lower = degrade(quality)
+    if (lower) mountScene(canvas, lower)
+    else canvas.remove()          // 완전히 포기
+  })
+  stage.add((t, dt) => watchdog(dt))
+}
+```
+
+### R3F 버전
+
+```tsx
+import { useDetectGPU } from '@react-three/drei'
+
+function Scene() {
+  const gpu = useDetectGPU()
+  const quality = gpu.tier === 0 ? 'off'
+    : gpu.tier === 1 ? 'low'
+    : gpu.tier === 2 ? (gpu.isMobile ? 'low' : 'mid')
+    : (gpu.isMobile ? 'mid' : 'high')
+
+  if (quality === 'off') return null
+  return <>{/* quality 에 따라 컴포넌트 분기 */}</>
+}
+```
+
+---
+
+## 6. 폴백
+
+### 6.1 폴백 계층
+
+```
+1. WebGL2 + 고사양     → 전체 효과
+2. WebGL2 + 저사양     → 축소 효과 (파티클 1/4, 포스트프로세싱 없음)
+3. WebGL 미지원        → CSS 그라디언트 / 정적 이미지
+4. prefers-reduced-motion → 정지 프레임 1장 또는 CSS만
+5. saveData / 저메모리  → CSS만
+6. JS 비활성           → CSS만 (캔버스는 애초에 비어 있음)
+```
+
+### 6.2 CSS 폴백을 "기본값"으로 설계한다
+
+캔버스를 **덮어씌우는** 방식이 아니라, 캔버스 **뒤에 항상 존재하게** 한다.
+
+```css
+.hero__canvas-wrap {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  /* 폴백: 항상 여기 있다. WebGL 이 성공하면 캔버스가 위를 덮는다 */
+  background:
+    radial-gradient(90% 70% at 20% 0%, #3b0764 0%, transparent 60%),
+    radial-gradient(80% 60% at 85% 30%, #1d4ed8 0%, transparent 55%),
+    linear-gradient(180deg, #0b0b16 0%, #07070a 100%);
+}
+
+.hero__canvas-wrap canvas {
+  position: absolute; inset: 0;
+  width: 100%; height: 100%;
+  display: block;
+  opacity: 0;
+  transition: opacity 400ms ease;
+}
+.hero__canvas-wrap canvas.is-ready { opacity: 1; }
+
+/* reduced-motion: 캔버스를 아예 숨기고 CSS 만 남긴다 */
+@media (prefers-reduced-motion: reduce) {
+  .hero__canvas-wrap canvas { display: none; }
+}
+```
+
+**정적 이미지 폴백**이 더 정확한 재현이 필요하면 `<picture>`로:
+
+```html
+<picture>
+  <source media="(prefers-reduced-motion: reduce)" srcset="/img/hero-static.avif" />
+  <img src="/img/hero-static.avif" alt="" aria-hidden="true" class="hero__fallback" />
+</picture>
+```
+
+> 팁: 폴백 이미지는 **셰이더를 한 프레임 렌더해서 캡처**해 만들면 완벽히 일치한다.
+> `renderer.domElement.toDataURL('image/webp', 0.85)`
+
+### 6.3 WebGL 컨텍스트 로스
+
+```js
+canvas.addEventListener('webglcontextlost', (e) => {
+  e.preventDefault()              // 이게 없으면 restored 이벤트가 오지 않는다
+  cancelRenderLoop()
+  showFallback()                  // 폴백 배경 노출
+}, false)
+
+canvas.addEventListener('webglcontextrestored', () => {
+  // three 는 컨텍스트 복구 시 리소스를 자동 재생성하지 않는다.
+  // 가장 안전한 방법: 씬을 통째로 다시 만든다
+  disposeScene()
+  rebuildScene()
+  startRenderLoop()
+  hideFallback()
+}, false)
+```
+
+**컨텍스트 로스가 나는 이유**: VRAM 고갈(가장 흔함), 드라이버 크래시, 탭 장시간 백그라운드, 페이지에 WebGL 컨텍스트가 너무 많음(브라우저 상한 보통 8~16개).
+
+**예방**: 캔버스를 여러 개 만들지 마라. drei `<View>`나 씬 전환으로 **컨텍스트 1개**를 유지한다.
+
+### 6.4 메모리 누수 방지
+
+```js
+// SPA 라우팅에서 반드시 호출
+function disposeScene(scene, renderer) {
+  scene.traverse((obj) => {
+    obj.geometry?.dispose()
+    const mats = Array.isArray(obj.material) ? obj.material : obj.material ? [obj.material] : []
+    mats.forEach((m) => {
+      Object.values(m).forEach((v) => {
+        if (v?.isTexture) { v.dispose(); v.image?.close?.() }
+      })
+      if (m.uniforms) {
+        Object.values(m.uniforms).forEach((u) => {
+          if (u.value?.isTexture) u.value.dispose()
+          if (u.value?.isWebGLRenderTarget) u.value.dispose()
+        })
+      }
+      m.dispose()
+    })
+  })
+  scene.clear()
+  renderTargets.forEach(rt => rt.dispose())
+  renderer.dispose()
+  renderer.forceContextLoss()      // 컨텍스트 슬롯 즉시 반환
+}
+```
+
+**검증**: `renderer.info.memory`가 씬 파괴 후 `{ geometries: 0, textures: 0 }`에 가까워지는지 확인.
+배경/환경맵 등 일부 내부 텍스처는 남을 수 있다(정상).
+
+---
+
+## 7. 접근성
+
+### 7.1 `prefers-reduced-motion`
+
+이건 **선택이 아니라 요구사항**이다(WCAG 2.2 C39, 성공기준 2.3.3).
+
+```js
+const mq = matchMedia('(prefers-reduced-motion: reduce)')
+
+function applyMotionPreference(reduced) {
+  if (reduced) {
+    stage.stop()
+    stage.renderOnce()          // 정지 프레임 1장
+    lenis?.stop()
+    gsap.globalTimeline.timeScale(0)
+  } else {
+    stage.start()
+    lenis?.start()
+    gsap.globalTimeline.timeScale(1)
+  }
+}
+
+applyMotionPreference(mq.matches)
+mq.addEventListener('change', (e) => applyMotionPreference(e.matches))  // 실시간 반응
+```
+
+**단계별 대응** (전부 끄는 게 항상 정답은 아니다)
+
+| 효과 | reduced-motion 대응 |
+|---|---|
+| 자동 재생 루프 애니메이션 | **정지** (1프레임 렌더) |
+| 패럴랙스 / 스크롤 연동 카메라 | **비활성** (고정 시점) |
+| 스무스 스크롤 (Lenis) | 비활성 (`respectReducedMotion: true` 기본) |
+| 마우스 반응 | **유지 가능** (사용자가 유발한 것이므로) |
+| 페이드 인/아웃 | 유지 가능 (움직임이 아니므로) |
+| 플래시/스트로브 | **반드시 제거** (광과민성 발작 위험) |
+| 파티클 대량 이동 | 정지 또는 진폭 25%로 축소 |
+
+### 7.2 캔버스와 접근성 트리
+
+```html
+<!-- 장식용 캔버스: 접근성 트리에서 제외 -->
+<canvas aria-hidden="true" role="presentation"></canvas>
+```
+
+```html
+<!-- 의미 있는 캔버스(제품 3D 뷰): 대체 텍스트 제공 -->
+<canvas
+  role="img"
+  aria-label="제품 3D 미리보기. 회전하는 무선 이어폰."
+  tabindex="0"
+></canvas>
+<p class="visually-hidden">
+  이 3D 뷰의 정적 이미지: <a href="/product-photos">제품 사진 갤러리</a>
+</p>
+```
+
+### 7.3 콘텐츠는 항상 DOM에
+
+**WebGL 안의 텍스트는 검색되지 않고, 선택되지 않고, 스크린리더가 읽지 못한다.**
+
+```
+❌ 히어로 제목을 troika-three-text 로만 렌더
+✅ DOM 에 <h1>을 두고, 캔버스는 배경 장식
+✅ 또는 DOM <h1>을 시각적으로 숨기고(visually-hidden) WebGL 텍스트를 병행
+```
+
+```css
+.visually-hidden {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+```
+
+### 7.4 키보드와 포커스
+
+- 캔버스가 인터랙티브하면 `tabindex="0"` + 키보드 대체 조작을 제공한다.
+- 캔버스가 장식이면 `pointer-events: none`으로 포인터를 통과시켜 아래 DOM이 클릭되게 한다.
+- 포커스가 캔버스 뒤 요소로 갔을 때 시각적 피드백이 가려지지 않는지 확인한다.
+
+```js
+// 3D 오브젝트 = 링크인 경우, DOM 링크를 겹쳐 둔다
+// <a href="/project-1" class="hotspot" style="top:...;left:...">Project 1</a>
+```
+
+### 7.5 색 대비
+
+WebGL로 그린 배경 위의 DOM 텍스트는 대비를 보장하기 어렵다.
+
+```css
+/* 텍스트 뒤에 반투명 레이어를 깔아 최소 대비를 보장 */
+.hero__inner {
+  position: relative;
+}
+.hero__inner::before {
+  content: '';
+  position: absolute; inset: -2rem;
+  background: radial-gradient(closest-side, rgba(0,0,0,0.55), transparent);
+  z-index: -1;
+}
+```
+
+또는 셰이더에서 텍스트 영역의 밝기를 강제로 낮춘다(마스크 uniform 전달).
+
+---
+
+## 8. 배터리 · 발열
+
+WebGL은 GPU를 100% 점유할 수 있다. 모바일에서 3분 이상 돌면 **써멀 스로틀링**이 걸려 fps가 절반이 된다.
+
+| 대책 | 구현 |
+|---|---|
+| 뷰포트 밖 정지 | IntersectionObserver (§3.2) |
+| 탭 백그라운드 정지 | `visibilitychange` (§3.2) |
+| 정적 씬 온디맨드 | `frameloop="demand"` |
+| 프레임 상한 | 60fps 고정 (120Hz 기기에서 절반 절약) |
+| 저전력 모드 감지 | `navigator.getBattery()` (지원 제한적) |
+| 장시간 자동 강등 | 3분 후 DPR 하향 |
+
+```js
+// 60fps 상한 (ProMotion 120Hz 기기 대응)
+let lastFrame = 0
+const MIN_INTERVAL = 1000 / 60 - 1
+renderer.setAnimationLoop((now) => {
+  if (now - lastFrame < MIN_INTERVAL) return
+  lastFrame = now
+  render()
+})
+```
+
+```js
+// 배터리 상태 (Chrome/Edge 일부)
+navigator.getBattery?.().then((battery) => {
+  const check = () => {
+    if (battery.level < 0.2 && !battery.charging) {
+      quality = degrade(quality)   // 저전력 시 강등
+    }
+  }
+  check()
+  battery.addEventListener('levelchange', check)
+  battery.addEventListener('chargingchange', check)
+})
+```
+
+```js
+// 장시간 실행 시 자동 강등
+let runningTime = 0
+stage.add((t, dt) => {
+  runningTime += dt
+  if (runningTime > 180 && !degraded) {   // 3분
+    degraded = true
+    renderer.setPixelRatio(Math.min(renderer.getPixelRatio(), 1))
+  }
+})
+```
+
+---
+
+## 9. OffscreenCanvas (선택적 고급 최적화)
+
+렌더링을 워커로 옮겨 메인 스레드의 **INP/TBT를 보호**한다. 실측 사례에서 Lighthouse 95 → 100.
+
+**적용 조건**
+- 씬이 무겁고 메인 스레드 인터랙션(폼, 스크롤)이 중요할 때
+- 씬이 DOM과 강하게 결합되지 않을 때 (DOM 동기화 갤러리에는 부적합)
+
+```js
+// main.js
+const canvas = document.getElementById('gl')
+
+if ('transferControlToOffscreen' in canvas) {
+  const offscreen = canvas.transferControlToOffscreen()
+  const worker = new Worker(new URL('./gl.worker.js', import.meta.url), { type: 'module' })
+
+  worker.postMessage({
+    type: 'init',
+    canvas: offscreen,
+    width: canvas.clientWidth,
+    height: canvas.clientHeight,
+    dpr: Math.min(devicePixelRatio, 2),
+  }, [offscreen])
+
+  const ro = new ResizeObserver(() => {
+    worker.postMessage({
+      type: 'resize',
+      width: canvas.clientWidth,
+      height: canvas.clientHeight,
+      dpr: Math.min(devicePixelRatio, 2),
+    })
+  })
+  ro.observe(canvas)
+
+  // 워커에는 DOM 이벤트가 없다. 메인에서 좌표만 전달
+  window.addEventListener('pointermove', (e) => {
+    worker.postMessage({
+      type: 'pointer',
+      x: e.clientX / innerWidth,
+      y: 1 - e.clientY / innerHeight,
+    })
+  }, { passive: true })
+
+  document.addEventListener('visibilitychange', () => {
+    worker.postMessage({ type: document.hidden ? 'pause' : 'resume' })
+  })
+} else {
+  // 폴백: 메인 스레드 렌더
+  import('./scenes/hero.js').then(({ default: mount }) => mount(canvas, {}))
+}
+```
+
+```js
+// gl.worker.js
+import * as THREE from 'three'
+
+let renderer, scene, camera, uniforms, running = false
+
+self.onmessage = ({ data }) => {
+  switch (data.type) {
+    case 'init': init(data); break
+    case 'resize': resize(data); break
+    case 'pointer': uniforms.uPointer.value.set(data.x, data.y); break
+    case 'pause': stop(); break
+    case 'resume': start(); break
+    case 'dispose': dispose(); break
+  }
+}
+
+function init({ canvas, width, height, dpr }) {
+  // 워커의 OffscreenCanvas 에는 style 이 없다. three 가 참조하므로 스텁을 넣는다
+  canvas.style = { width: `${width}px`, height: `${height}px` }
+
+  renderer = new THREE.WebGLRenderer({ canvas, antialias: false, alpha: false })
+  renderer.outputColorSpace = THREE.SRGBColorSpace
+  renderer.setPixelRatio(dpr)
+  renderer.setSize(width, height, false)
+
+  scene = new THREE.Scene()
+  camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100)
+  camera.position.z = 5
+
+  uniforms = {
+    uTime: { value: 0 },
+    uResolution: { value: new THREE.Vector2(width * dpr, height * dpr) },
+    uPointer: { value: new THREE.Vector2(0.5, 0.5) },
+  }
+
+  const geo = new THREE.BufferGeometry()
+  geo.setAttribute('position', new THREE.BufferAttribute(
+    new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]), 3))
+  geo.setAttribute('uv', new THREE.BufferAttribute(
+    new Float32Array([0, 0, 2, 0, 0, 2]), 2))
+
+  const mat = new THREE.ShaderMaterial({
+    uniforms,
+    vertexShader: `varying vec2 vUv; void main(){ vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); }`,
+    fragmentShader: `
+      precision mediump float;
+      uniform float uTime; uniform vec2 uResolution; uniform vec2 uPointer;
+      varying vec2 vUv;
+      void main() {
+        vec2 uv = gl_FragCoord.xy / uResolution;
+        float d = distance(uv, uPointer);
+        vec3 col = mix(vec3(0.05,0.03,0.12), vec3(0.42,0.25,0.85),
+                       smoothstep(0.6, 0.0, d) + sin(uTime + uv.y * 6.0) * 0.08);
+        gl_FragColor = vec4(col, 1.0);
+      }`,
+    depthTest: false, depthWrite: false,
+  })
+  const mesh = new THREE.Mesh(geo, mat)
+  mesh.frustumCulled = false
+  scene.add(mesh)
+
+  start()
+}
+
+function resize({ width, height, dpr }) {
+  renderer.setPixelRatio(dpr)
+  renderer.setSize(width, height, false)
+  camera.aspect = width / height
+  camera.updateProjectionMatrix()
+  uniforms.uResolution.value.set(width * dpr, height * dpr)
+}
+
+function start() {
+  if (running) return
+  running = true
+  renderer.setAnimationLoop((t) => {
+    uniforms.uTime.value = t / 1000
+    renderer.render(scene, camera)
+  })
+}
+
+function stop() {
+  running = false
+  renderer.setAnimationLoop(null)
+}
+
+function dispose() {
+  stop()
+  scene.traverse(o => { o.geometry?.dispose(); o.material?.dispose() })
+  renderer.dispose()
+}
+```
+
+**제약**
+- 워커 안에서는 `document`, `window`, DOM 이벤트를 쓸 수 없다. **모든 입력을 postMessage로 전달**해야 한다.
+- `TextureLoader`는 `ImageBitmapLoader`로 대체해야 한다 (`Image`가 없음).
+- 디버깅이 훨씬 어렵다. **먼저 메인 스레드로 완성하고, 마지막에 옮겨라.**
+- three가 `canvas.style.width/height`를 참조하므로 스텁을 넣어야 한다.
+
+---
+
+## 10. 실측 체크리스트
+
+### 배포 전 필수 검증
+
+**성능**
+- [ ] Chrome DevTools Performance 녹화: 4x CPU 스로틀에서 롱태스크(> 50ms) 3개 이하
+- [ ] `renderer.info.render.calls` < 150(데스크톱) / < 60(모바일)
+- [ ] 실기기(중저가 안드로이드)에서 30fps 이상 유지
+- [ ] 3분 연속 실행 후에도 fps가 초기 대비 70% 이상
+- [ ] `renderer.info.memory`가 3분간 증가하지 않음 (누수 없음)
+- [ ] Lighthouse 모바일 Performance ≥ 85, LCP ≤ 2.5s, CLS ≤ 0.1, TBT ≤ 300ms
+- [ ] 초기 JS(three 제외) < 200KB gzip
+- [ ] Network 탭에서 three 청크가 **LCP 이후**에 요청됨
+
+**폴백**
+- [ ] `chrome://flags` 또는 확장으로 WebGL 비활성 → 페이지가 정상적으로 보임
+- [ ] OS 설정에서 "동작 줄이기" 켬 → 애니메이션 정지, 콘텐츠 정상
+- [ ] DevTools에서 `Save-Data: on` 에뮬레이션 → WebGL 미실행
+- [ ] `WEBGL_lose_context.loseContext()` 강제 호출 → 폴백 노출 + 크래시 없음
+- [ ] 저사양 티어 강제(`?quality=low`) → 씬이 정상 동작
+- [ ] JS 비활성 → 페이지 콘텐츠가 모두 읽힘
+
+**접근성**
+- [ ] 장식 캔버스에 `aria-hidden="true"`
+- [ ] 히어로 텍스트가 DOM에 존재하고 선택 가능
+- [ ] 키보드만으로 모든 CTA 접근 가능
+- [ ] 캔버스 위 텍스트의 대비비 ≥ 4.5:1 (큰 텍스트 3:1)
+- [ ] 스크린리더(NVDA/VoiceOver)로 페이지 전체가 읽힘
+- [ ] 초당 3회 이상 깜빡이는 요소 없음 (광과민성)
+
+**리소스**
+- [ ] 모든 컬러 텍스처에 `colorSpace = SRGBColorSpace`
+- [ ] 텍스처 최대 변 ≤ 2048 (모바일 1024)
+- [ ] GLTF에 DRACO 또는 meshopt 압축 적용
+- [ ] HDRI ≤ 1K, 자체 호스팅
+- [ ] DRACO/basis 디코더 자체 호스팅 + 로더 싱글턴
+- [ ] 라우트 이탈 시 `dispose()` 호출 확인
+
+### 자동화 스니펫
+
+```js
+// src/gl/audit.js — 개발 중 콘솔에서 window.__glAudit() 실행
+export function installAudit(renderer, budgets = {}) {
+  if (import.meta.env.PROD) return
+
+  const B = {
+    calls: 150, triangles: 500000, textures: 40, geometries: 60, programs: 25,
+    ...budgets,
+  }
+
+  window.__glAudit = () => {
+    const i = renderer.info
+    const rows = [
+      ['draw calls', i.render.calls, B.calls],
+      ['triangles', i.render.triangles, B.triangles],
+      ['textures', i.memory.textures, B.textures],
+      ['geometries', i.memory.geometries, B.geometries],
+      ['programs', i.programs?.length ?? 0, B.programs],
+    ]
+    console.table(rows.map(([name, value, budget]) => ({
+      metric: name,
+      value,
+      budget,
+      status: value <= budget ? '✅' : '❌ OVER',
+      ratio: `${((value / budget) * 100).toFixed(0)}%`,
+    })))
+  }
+
+  // fps 히스토그램
+  let frames = []
+  let last = performance.now()
+  const loop = () => {
+    const now = performance.now()
+    frames.push(1000 / (now - last))
+    last = now
+    if (frames.length > 600) frames.shift()
+    requestAnimationFrame(loop)
+  }
+  requestAnimationFrame(loop)
+
+  window.__glFps = () => {
+    const s = [...frames].sort((a, b) => a - b)
+    console.table({
+      min: s[0]?.toFixed(1),
+      p5: s[Math.floor(s.length * 0.05)]?.toFixed(1),
+      p50: s[Math.floor(s.length * 0.5)]?.toFixed(1),
+      p95: s[Math.floor(s.length * 0.95)]?.toFixed(1),
+      max: s[s.length - 1]?.toFixed(1),
+      samples: s.length,
+    })
+  }
+}
+```
+
+---
+
+## 11. 안티패턴 목록
+
+| 안티패턴 | 왜 나쁜가 | 대신 |
+|---|---|---|
+| 페이지에 캔버스 여러 개 | 컨텍스트 상한(8~16), 각각 VRAM 소모 | drei `<View>` 또는 씬 전환 |
+| `useFrame` 안에서 `setState` | 초당 60회 리렌더 | ref 직접 변경 |
+| 렌더 루프에서 `new THREE.Vector3()` | GC 압력 → 프레임 스파이크 | 모듈 스코프에 재사용 객체 |
+| 렌더 루프에서 `getBoundingClientRect()` | 강제 리플로우 | 리사이즈 때만 측정 후 캐시 |
+| 렌더 루프에서 레이캐스트 대상 전체 순회 | O(n) × 60fps | `intersectObjects(objs, false)` + BVH |
+| 머티리얼을 컴포넌트마다 새로 생성 | 셰이더 재컴파일(수십 ms) | `useMemo` 또는 모듈 스코프 공유 |
+| 런타임에 오브젝트 마운트/언마운트 | 셰이더 재컴파일 | `visible` 토글 |
+| 4K 텍스처 | 67MB VRAM/장 | 1K~2K + KTX2 |
+| `preset="city"` 등 drei Environment 프리셋 | 외부 CDN 의존 + 캐시 불가 | `files="/hdri/*.hdr"` 자체 호스팅 |
+| `import * as drei from '@react-three/drei'` | 100KB+ 번들 | named import |
+| `lerp(a, b, 0.1)` (dt 무시) | 120Hz에서 2배 빠름 | `1 - Math.pow(f, dt)` |
+| `THREE.Clock` [r183+ deprecated] | 곧 제거됨 | `setAnimationLoop(t)` 인자 또는 `THREE.Timer` |
+| RAF 루프 2개 이상 (Lenis + three) | 프레임 밀림, 지터 | `gsap.ticker` 하나로 통일 |
+| `antialias: true` + DPR 2 | MSAA 비용 2배 | DPR 2면 AA 끄거나 SMAA |
+| `postprocessing` 이펙트를 패스마다 분리 | 풀스크린 렌더 N회 | 하나의 `EffectPass`에 병합 |
+| 폴백 없이 배포 | 방문자 일부에게 빈 화면 | CSS 폴백을 기본값으로 |
diff --git a/research/three/05-sources.md b/research/three/05-sources.md
new file mode 100644
index 0000000..3d86ef5
--- /dev/null
+++ b/research/three/05-sources.md
@@ -0,0 +1,221 @@
+# 05 — 출처 목록
+
+> 조사 시점: **2026-08-20**. 각 항목은 이 리서치에서 실제로 참조한 근거다.
+> ✅ = 본문 코드/수치의 직접 근거, 📖 = 개념·기법 참고, 🔧 = 도구/패키지
+
+---
+
+## A. three.js 공식 (1–17)
+
+| # | URL | 설명 |
+|---|---|---|
+| 1 | https://threejs.org/ | ✅ three.js 공식 홈. 현재 릴리스 번호 확인용 |
+| 2 | https://threejs.org/docs/ | ✅ API 레퍼런스 전체 |
+| 3 | https://threejs.org/manual/ | 📖 공식 매뉴얼(구 Fundamentals). 개념 설명이 문서보다 낫다 |
+| 4 | https://github.com/mrdoob/three.js/wiki/Migration-Guide | ✅ **r150→r185 브레이킹 체인지 전체.** 01-stack §6의 근거 |
+| 5 | https://github.com/mrdoob/three.js/releases | ✅ 릴리스 노트. r180/r184/r185 확인 |
+| 6 | https://threejs.org/manual/en/how-to-dispose-of-objects.html | ✅ dispose 규칙. geometry/material/texture/renderTarget별 해제, `renderer.info` 활용 |
+| 7 | https://threejs.org/manual/en/webgl-compatibility-check.html | ✅ `three/addons/capabilities/WebGL.js`로 지원 여부 검사 |
+| 8 | https://threejs.org/docs/pages/ShaderMaterial.html | ✅ ShaderMaterial uniform/defines/RawShaderMaterial 차이 |
+| 9 | https://threejs.org/docs/pages/InstancedMesh.html | ✅ `setMatrixAt` / `instanceMatrix.needsUpdate` / 머티리얼 공유 금지 |
+| 10 | https://threejs.org/docs/pages/GLTFLoader.html | ✅ DRACO/KTX2/meshopt 로더 연결 방법 |
+| 11 | https://threejs.org/docs/pages/DRACOLoader.html | ✅ 디코더 경로, `preload()`, 인스턴스 재사용 권고 |
+| 12 | https://threejs.org/docs/pages/WebGL.html | ✅ `isWebGL2Available()` 및 프로브 컨텍스트 해제 이슈 |
+| 13 | https://threejs.org/docs/pages/TSL.html | 📖 TSL(Three Shading Language) 명세 |
+| 14 | https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language | 📖 TSL 위키. 노드 목록과 사용법 |
+| 15 | https://threejs.org/examples/ | 📖 공식 예제 400+. GPGPU/포스트프로세싱 구현의 1차 참조 |
+| 16 | https://github.com/mrdoob/three.js/blob/dev/examples/jsm/misc/GPUComputationRenderer.js | 📖 three 내장 GPGPU 헬퍼. P4의 자체 구현 대안 |
+| 17 | https://github.com/mrdoob/three.js/releases/tag/r165 | ✅ `useLegacyLights` 완전 제거 시점 확인 |
+
+## B. three.js 포럼 · 마이그레이션 논의 (18–22)
+
+| # | URL | 설명 |
+|---|---|---|
+| 18 | https://discourse.threejs.org/ | 📖 공식 포럼. 실무 이슈의 최종 검색처 |
+| 19 | https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791 | ✅ r152 색공간 전환의 공식 설명 스레드. `colorSpace` 지정 규칙 |
+| 20 | https://discourse.threejs.org/t/updates-to-lighting-in-three-js-r155/53733 | ✅ r155 물리 기반 조명 전환. intensity 재조정 필요성 |
+| 21 | https://discourse.threejs.org/t/compression-draco-ktx2-example/31382 | ✅ DRACO + KTX2 동시 적용 실제 코드 |
+| 22 | https://discourse.threejs.org/t/threejs-landing-page-photoreal-3d-with-100-lighthouse-score/46814 | 📖 Lighthouse 100점 랜딩페이지 사례. 로딩 전략 참고 |
+
+## C. React Three Fiber 생태계 (23–37)
+
+| # | URL | 설명 |
+|---|---|---|
+| 23 | https://r3f.docs.pmnd.rs/getting-started/introduction | ✅ R3F 개요 및 설치 |
+| 24 | https://r3f.docs.pmnd.rs/api/canvas | ✅ **Canvas 전체 prop과 기본값.** `dpr [1,2]`, `frameloop always`, `flat/linear/legacy` |
+| 25 | https://r3f.docs.pmnd.rs/advanced/scaling-performance | ✅ `frameloop="demand"`, `invalidate()`, `PerformanceMonitor`, `AdaptiveDpr`, `<Detailed>` |
+| 26 | https://r3f.docs.pmnd.rs/advanced/pitfalls | ✅ setState in loop 금지, 객체 재생성 금지, 머티리얼 공유 등 7가지 함정 |
+| 27 | https://r3f.docs.pmnd.rs/tutorials/v9-migration-guide | ✅ **v9 마이그레이션.** React 19 요구, `ThreeElements` 인터페이스, sRGB 자동 지정 제거, async `gl` 콜백 |
+| 28 | https://github.com/pmndrs/react-three-fiber/releases | ✅ 릴리스 노트. React 19.2 reconciler 이슈 |
+| 29 | https://github.com/pmndrs/react-three-fiber/discussions/3665 | 📖 v10.0.0-alpha 진행 상황 |
+| 30 | https://drei.docs.pmnd.rs/getting-started/introduction | ✅ drei 컴포넌트 카테고리 전체 목록 |
+| 31 | https://drei.docs.pmnd.rs/shaders/shader-material | ✅ `shaderMaterial()` 헬퍼. uniform→prop 자동 매핑, `key` 핫리로드 |
+| 32 | https://drei.docs.pmnd.rs/shaders/mesh-transmission-material | ✅ **MeshTransmissionMaterial 전체 prop과 기본값.** P10의 근거 |
+| 33 | https://drei.docs.pmnd.rs/shaders/mesh-refraction-material | 📖 보석/다이아 굴절 전용 머티리얼 |
+| 34 | https://drei.docs.pmnd.rs/controls/scroll-controls | ✅ `ScrollControls` prop, `useScroll()`의 `offset/delta/range/curve/visible` |
+| 35 | https://drei.docs.pmnd.rs/portals/view | ✅ `<View>` — 단일 컨텍스트로 여러 씬을 DOM에 배치 |
+| 36 | https://github.com/pmndrs/drei | 🔧 drei 소스. 컴포넌트 실제 구현 확인용 |
+| 37 | https://github.com/pmndrs/maath | 🔧 R3F용 수학 유틸(damp, easing, random). 프레임레이트 독립 보간 |
+
+## D. 포스트프로세싱 (38–43)
+
+| # | URL | 설명 |
+|---|---|---|
+| 38 | https://react-postprocessing.docs.pmnd.rs/introduction | ✅ `EffectComposer` 기본 사용법. EffectPass 자동 병합 |
+| 39 | https://react-postprocessing.docs.pmnd.rs/effects/chromatic-aberration | ✅ ChromaticAberration prop |
+| 40 | https://react-postprocessing.docs.pmnd.rs/effects/lensflare | 📖 렌즈 플레어. transmission 재질 감지 방식 |
+| 41 | https://github.com/pmndrs/postprocessing | ✅ vanilla 라이브러리 본체. peer `three >=0.168 <0.186` 확인 |
+| 42 | https://github.com/pmndrs/postprocessing/wiki/Custom-Effects | ✅ **커스텀 Effect 작성법.** `mainImage`/`mainUv` 시그니처, 사용 가능 uniform, `EffectAttribute` |
+| 43 | https://pmndrs.github.io/postprocessing/public/docs/ | 📖 API 문서 전체 |
+
+## E. 스크롤 · 애니메이션 (44–51)
+
+| # | URL | 설명 |
+|---|---|---|
+| 44 | https://gsap.com/docs/v3/Plugins/ScrollTrigger/ | ✅ ScrollTrigger 전체 API. `scrub`, `pin`, `invalidateOnRefresh` |
+| 45 | https://gsap.com/blog/3-13/ | ✅ 3.13 릴리스 — 전 플러그인 무료화, SplitText 재작성 |
+| 46 | https://webflow.com/blog/gsap-becomes-free | ✅ Webflow의 GSAP 무료화 공지(2025-04) |
+| 47 | https://css-tricks.com/gsap-is-now-completely-free-even-for-commercial-use/ | 📖 라이선스 해설 — 무료지만 오픈소스는 아님 |
+| 48 | https://github.com/darkroomengineering/lenis | ✅ **Lenis 전체 옵션·메서드·이벤트 + GSAP ScrollTrigger 통합 스니펫.** P6의 근거 |
+| 49 | https://lenis.dev/ | 🔧 Lenis 공식 사이트 |
+| 50 | https://github.com/14islands/r3f-scroll-rig | 📖 DOM↔WebGL 스크롤 동기화 라이브러리. P8의 대안 |
+| 51 | https://tympanus.net/codrops/2026/05/28/the-never-ending-story-building-a-seamless-infinite-scroll-experience-with-gsap-lenis/ | 📖 GSAP+Lenis 무한 스크롤 구현 |
+
+## F. Codrops 튜토리얼 (52–71)
+
+| # | URL | 설명 |
+|---|---|---|
+| 52 | https://tympanus.net/codrops/2024/10/31/how-to-code-a-subtle-shader-background-effect-with-react-three-fiber/ | ✅ **P2의 원형.** SDF 도트 그리드 + 트레일 텍스처 + three 셰이더 청크 활용 |
+| 53 | https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js/ | ✅ **P8의 원형.** DOM↔플레인 동기화, `deformationCurve`, RGB shift, 마우스 속도 |
+| 54 | https://tympanus.net/codrops/2020/04/14/interactive-webgl-hover-effects/ | 📖 hover 디스플레이스먼트/리퀴드 왜곡 모음 |
+| 55 | https://tympanus.net/codrops/2022/09/26/how-to-recreate-stripes-lava-lamp-gradient-with-three-js/ | ✅ **P1의 원형.** Stripe 그라디언트 정점 변위 기법 |
+| 56 | https://tympanus.net/codrops/2024/08/27/grid-displacement-texture-with-rgb-shift-using-three-js-gpgpu-and-shaders/ | 📖 GPGPU 그리드 디스플레이스먼트 + RGB shift |
+| 57 | https://tympanus.net/codrops/2019/01/17/interactive-particles-with-three-js/ | ✅ P3의 근거. 오프스크린 텍스처로 파티클 상호작용 |
+| 58 | https://tympanus.net/codrops/2023/12/13/creating-an-interactive-mouse-effect-with-instancing-in-three-js/ | ✅ P5의 근거. InstancedMesh 그리드 마우스 인터랙션 |
+| 59 | https://tympanus.net/codrops/2025/06/09/how-to-create-interactive-droplet-like-metaballs-with-three-js-and-glsl/ | 📖 SDF smooth-min 메타볼 |
+| 60 | https://tympanus.net/codrops/2025/03/24/animating-letters-with-shaders-interactive-text-effect-with-three-js-glsl/ | ✅ P11의 근거. 텍스트 디스플레이스먼트 |
+| 61 | https://tympanus.net/codrops/2020/06/02/kinetic-typography-with-three-js/ | 📖 키네틱 타이포그래피 |
+| 62 | https://tympanus.net/codrops/2022/11/08/3d-typing-effects-with-three-js/ | 📖 3D 타이핑 효과 |
+| 63 | https://tympanus.net/codrops/2025/03/13/warping-3d-text-inside-a-glass-torus/ | ✅ P10의 근거. 유리 토러스 안에서 왜곡되는 텍스트 |
+| 64 | https://tympanus.net/codrops/2023/10/10/progressively-enhanced-webgl-lens-refraction/ | ✅ 점진적 향상 원칙 + 렌즈 굴절. 04 §6의 사상적 근거 |
+| 65 | https://tympanus.net/codrops/2024/02/07/on-scroll-revealing-webgl-image-explorations/ | 📖 스크롤 리빌 이미지. P8 리빌 마스크의 참고 |
+| 66 | https://tympanus.net/codrops/2025/11/26/creating-wavy-infinite-carousels-in-react-three-fiber-with-glsl-shaders/ | 📖 R3F 무한 캐러셀 |
+| 67 | https://tympanus.net/codrops/2026/02/17/reactive-depth-building-a-scroll-driven-3d-image-tube-with-react-three-fiber/ | 📖 스크롤 구동 3D 이미지 튜브 + DOM 오버레이 동기화 |
+| 68 | https://tympanus.net/codrops/2026/07/09/building-an-interactive-wave-propagation-cube-grid-with-three-js/ | 📖 파동 전파 큐브 그리드. P5의 최신 변형 |
+| 69 | https://tympanus.net/codrops/2025/07/22/interactive-text-destruction-with-three-js-webgpu-and-tsl/ | 📖 WebGPU+TSL 텍스트 파괴 |
+| 70 | https://tympanus.net/codrops/2026/01/28/webgpu-gommage-effect-dissolving-msdf-text-into-dust-and-petals-with-three-js-tsl/ | 📖 MSDF 텍스트 디졸브 + MRT 선택적 블룸. P15의 고급 사례 |
+| 71 | https://tympanus.net/codrops/tag/three-js/ | 📖 Codrops three.js 태그 전체 아카이브 |
+
+## G. Maxime Heckel 블로그 (72–77)
+
+| # | URL | 설명 |
+|---|---|---|
+| 72 | https://blog.maximeheckel.com/posts/the-study-of-shaders-with-react-three-fiber/ | ✅ **셰이더 입문의 최고 자료.** uniform/varying, 8개 인터랙티브 씬 |
+| 73 | https://blog.maximeheckel.com/posts/the-magical-world-of-particles-with-react-three-fiber-and-shaders/ | ✅ P3/P4의 근거. attribute, BufferGeometry, FBO 파티클 |
+| 74 | https://blog.maximeheckel.com/posts/refraction-dispersion-and-other-shader-light-effects/ | ✅ P10 vanilla 굴절 셰이더의 근거. 채널별 IOR 분산 |
+| 75 | https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-shading-web/ | ✅ 03 §5.5 디더링의 근거. Bayer 매트릭스 |
+| 76 | https://blog.maximeheckel.com/posts/post-processing-as-a-creative-medium/ | 📖 포스트프로세싱을 표현 수단으로 쓰는 법 |
+| 77 | https://blog.maximeheckel.com/posts/field-guide-to-tsl-and-webgpu/ | ✅ 01 §8의 근거. TSL/WGSL 실전 가이드 |
+
+## H. 강의 · 크리에이터 (78–85)
+
+| # | URL | 설명 |
+|---|---|---|
+| 78 | https://threejs-journey.com/ | 📖 Bruno Simon의 표준 three.js 코스. 70+ 레슨 |
+| 79 | https://threejs-journey.com/lessons/gpgpu-flow-field-particles-shaders | ✅ P4의 근거. GPGPU 플로우필드 파티클 레슨 |
+| 80 | https://threejs-journey.com/lessons/raycaster-and-mouse-events | ✅ P14의 근거. 레이캐스터/마우스 이벤트 |
+| 81 | https://www.youtube.com/@akella_ | 📖 Yuri Artiukh(Akella). 셰이더 라이브코딩. 이미지 왜곡/GPGPU |
+| 82 | https://threejs-workshops.com/ | 📖 Akella의 유료 워크숍(셰이더/GPGPU/수학) |
+| 83 | https://tympanus.net/codrops/author/akella/ | 📖 Akella의 Codrops 기고 모음 |
+| 84 | https://bobbyroe.com/ | 📖 Robot Bobby. 짧은 실습 중심 three.js 튜토리얼 |
+| 85 | https://robotbobby.thinkific.com/ | 📖 Robot Bobby 코스(5~15분 단위 레슨) |
+
+## I. 셰이더 학습 · 라이브러리 (86–95)
+
+| # | URL | 설명 |
+|---|---|---|
+| 86 | https://thebookofshaders.com/ | ✅ GLSL 프래그먼트 셰이더 입문의 정본. 03의 기초 개념 근거 |
+| 87 | https://www.shadertoy.com/ | 📖 셰이더 커뮤니티. 기법 탐색과 레퍼런스 |
+| 88 | https://github.com/patriciogonzalezvivo/lygia | ✅ **LYGIA 셰이더 라이브러리.** `#include` 기반, GLSL/WGSL 다중 언어. 03 §7 |
+| 89 | https://lygia.xyz/ | 🔧 LYGIA 함수 브라우저 + 런타임 `resolve.js` |
+| 90 | https://github.com/stegu/webgl-noise | ✅ simplex/perlin 노이즈 GLSL 원본(유지보수 포크). MIT |
+| 91 | https://github.com/ashima/webgl-noise/blob/master/src/noise3D.glsl | ✅ **03 §5.2 `snoise(vec3)` 전체 코드의 출처.** 원본 파일 |
+| 92 | https://iquilezles.org/articles/palettes/ | ✅ 03 §5.5 코사인 팔레트 공식의 출처 |
+| 93 | https://iquilezles.org/articles/distfunctions2d/ | ✅ 03 §5.6 2D SDF 함수 모음의 출처 |
+| 94 | https://iquilezles.org/articles/smin/ | ✅ `opSmoothUnion` (smooth minimum) 유도 |
+| 95 | https://github.com/juniorxsound/Particle-Curl-Noise | 📖 curl noise FBO 파티클 참조 구현 |
+
+## J. 도구 · 최적화 (96–107)
+
+| # | URL | 설명 |
+|---|---|---|
+| 96 | https://gltf-transform.dev/ | ✅ **glTF 최적화 CLI/SDK.** draco/meshopt/ktx2/resize/simplify. P13의 근거 |
+| 97 | https://github.com/protectwise/troika/tree/main/packages/troika-three-text | ✅ P11의 근거. SDF 텍스트, Web Worker 폰트 파싱 |
+| 98 | https://protectwise.github.io/troika/troika-three-text/ | ✅ troika-three-text API 문서. `sync()`, `sdfGlyphSize`, `preloadFont` |
+| 99 | https://www.npmjs.com/package/troika-three-text | 🔧 버전/peer 확인 (0.52.5, `three >=0.125`) |
+| 100 | https://github.com/UstymUkhman/vite-plugin-glsl | ✅ 01 §3의 근거. `#include` 인라인, three 내장 청크 자동 스킵 |
+| 101 | https://github.com/pmndrs/detect-gpu | ✅ 04 §5의 근거. GPU 벤치마크 tier 0~3 판정 |
+| 102 | https://github.com/gkjohnson/three-mesh-bvh | 🔧 대량 오브젝트 레이캐스팅 가속(BVH). P14 참고 |
+| 103 | https://github.com/pmndrs/gltfjsx | 🔧 GLTF → R3F 컴포넌트 자동 변환 CLI |
+| 104 | https://github.com/pmndrs/react-three-a11y | 🔧 R3F 접근성 헬퍼(포커스/aria) |
+| 105 | https://evilmartians.com/chronicles/faster-webgl-three-js-3d-graphics-with-offscreencanvas-and-web-workers | ✅ 04 §9의 근거. OffscreenCanvas + Worker three 이전 |
+| 106 | https://web.dev/articles/offscreen-canvas | ✅ OffscreenCanvas 공식 가이드 |
+| 107 | https://threejsresources.com/ | 📖 three.js 도구/학습자원 디렉터리 |
+
+## K. 성능 · 접근성 · 표준 (108–116)
+
+| # | URL | 설명 |
+|---|---|---|
+| 108 | https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion | ✅ 04 §7.1의 근거. MDN 명세 |
+| 109 | https://www.w3.org/WAI/WCAG22/Techniques/css/C39 | ✅ WCAG 2.2 기법 C39 — reduced-motion으로 모션 억제 |
+| 110 | https://css-tricks.com/reduced-motion-picture-technique-take-two/ | ✅ `<picture>` + `prefers-reduced-motion`으로 정적 대체 제공 |
+| 111 | https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context/loseContext | ✅ 04 §6.3의 근거. 컨텍스트 강제 해제/복구 |
+| 112 | https://web.dev/articles/vitals | ✅ Core Web Vitals 기준(LCP 2.5s / INP 200ms / CLS 0.1) |
+| 113 | https://caniuse.com/webgl2 | ✅ WebGL2 지원 현황 (r163+ 필수 요구사항) |
+| 114 | https://caniuse.com/webgpu | ✅ WebGPU 지원 현황. 01 §8 판단 근거 |
+| 115 | https://www.utsubo.com/blog/threejs-best-practices-100-tips | ✅ **04 §1 예산 수치의 주요 근거.** 드로우콜 100, varying 3개, 라이트 3개, 그림자맵 크기, 4K 텍스처 64MB 등 |
+| 116 | https://www.utsubo.com/blog/threejs-2026-what-changed | ✅ 01 §8의 근거. r170~r184 변화, WebGPU 프로덕션 레디 시점 |
+
+## L. 사례 분석 · 레퍼런스 (117–125)
+
+| # | URL | 설명 |
+|---|---|---|
+| 117 | https://www.awwwards.com/websites/three-js/ | 📖 Awwwards three.js 수상작 컬렉션 |
+| 118 | https://www.utsubo.com/blog/best-threejs-websites-2026 | 📖 2026년 three.js 사이트 8선 + 기법 분해 |
+| 119 | https://www.utsubo.com/blog/webgl-three-js-site-seo-rankable-guide | ✅ 04 §2.4의 근거. WebGL 사이트 SEO — DOM 먼저, 캔버스는 레이어 |
+| 120 | https://www.utsubo.com/blog/webgpu-threejs-migration-guide | 📖 WebGPU 마이그레이션 체크리스트 |
+| 121 | https://www.hontran.dev/blog/webgl-website-examples | 📖 수상작 WebGL 사이트의 코드 관점 분해 |
+| 122 | https://metabole.studio/en/blog/immersive-website-examples | 📖 몰입형 웹사이트 사례 큐레이션 |
+| 123 | https://madebybeings.com/blog/interactive-liquid-gradient-background-with-three-js-a-step-by-step-tutorial | 📖 유동 그라디언트 배경 단계별 튜토리얼(그레인/컬러스킴 포함) |
+| 124 | https://blog.olivierlarose.com/tutorials/3d-glass-effect | 📖 R3F 유리 효과 튜토리얼 |
+| 125 | https://barradeau.com/blog/?p=621 | 📖 nicoptere의 FBO 파티클 원조 글. P4의 이론적 출발점 |
+
+## M. 기타 학습 (126–130)
+
+| # | URL | 설명 |
+|---|---|---|
+| 126 | https://sbcode.net/threejs/ | 📖 SBCODE three.js 튜토리얼. 라이트/그림자/로더 개별 항목 |
+| 127 | https://sbcode.net/threejs/webgpu-renderer/ | 📖 WebGPURenderer + TSL 실습 |
+| 128 | https://wawasensei.dev/courses/react-three-fiber | 📖 R3F 코스. `<View>`, 포트폴리오 패턴 |
+| 129 | https://www.npmjs.com/package/vite-plugin-glsl | 🔧 버전/옵션 확인 |
+| 130 | https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/CHANGELOG.md | ✅ R3F 상세 변경 이력. React 버전 호환 범위 추적 |
+
+---
+
+## 버전 검증에 사용한 npm 레지스트리 엔드포인트
+
+이 리서치의 "버전 스냅샷"(01 §0)은 아래를 **직접 조회**해 확인했다(2026-08-20).
+
+| 패키지 | 엔드포인트 | 확인된 값 |
+|---|---|---|
+| three | https://registry.npmjs.org/three/latest | `0.185.1` |
+| @react-three/fiber | https://registry.npmjs.org/@react-three/fiber/latest | `9.7.0`, peer `react >=19 <19.3`, `three >=0.156` |
+| @react-three/drei | https://registry.npmjs.org/@react-three/drei/latest | `10.7.8`, peer `react ^19`, `three >=0.159`, `fiber ^9` |
+| @react-three/postprocessing | https://registry.npmjs.org/@react-three/postprocessing/latest | `3.0.5`, peer `three >=0.182`, `postprocessing ^6.36`, `fiber >=9.7` |
+| postprocessing | https://registry.npmjs.org/postprocessing/latest | `6.39.4`, peer `three >=0.168.0 <0.186.0` |
+| gsap | https://registry.npmjs.org/gsap/latest | `3.15.0` |
+| lenis | https://registry.npmjs.org/lenis/latest | `1.3.26` |
+| troika-three-text | https://registry.npmjs.org/troika-three-text/latest | `0.52.5`, peer `three >=0.125.0` |
+
+> 이 문서를 재사용할 때는 위 엔드포인트를 다시 조회해 버전을 갱신하라.
+> 특히 **`postprocessing`의 three 상한(`< 0.186.0`)**은 three 업그레이드를 막는 실질적 제약이므로 매번 확인해야 한다.
diff --git a/research/youtube/SUMMARY.md b/research/youtube/SUMMARY.md
new file mode 100644
index 0000000..33c796a
--- /dev/null
+++ b/research/youtube/SUMMARY.md
@@ -0,0 +1,86 @@
+# 노마드코더 「이게 진짜 HTML이라고?」 분석
+
+- **URL**: https://www.youtube.com/watch?v=8ucoskmA1yg
+- **채널**: 노마드 코더 Nomad Coders
+- **주제**: Chrome 신규 **HTML in Canvas** API
+- 원문 자막: `transcript-ko.txt` / 압축본 `transcript-ko-compact.txt` / 영문 `nomad-html.en.srt`
+
+## 목차 (영상 챕터)
+| 시간 | 내용 |
+|---|---|
+| 0:00–2:29 | 이게 진짜 HTML이라고? (데모 쇼케이스) |
+| 2:30–2:50 | 왜 지금까지 불가능했을까? |
+| 2:51–3:51 | HTML in Canvas는 어떻게 작동할까? |
+| 3:52–6:02 | 직접 만들어보자 (반사 버튼 구현) |
+| 6:03–6:37 | 아직 당장 쓸 수는 없다 |
+
+## 핵심 주장
+
+> "웹사이트와 비디오 게임의 경계를 허무는 새로운 API"
+> "2D 페이지라기보다는 비디오 게임이나 예술 설치 작품처럼 느껴지는 웹사이트"
+
+**기존의 딜레마**: 캔버스는 다른 HTML 요소를 전혀 알지 못한다. 캔버스 안에 버튼을 그리려면 사각형+글자를 직접 그리고, 클릭 좌표를 히트테스트하고, 호버 시 다시 그려야 한다. 그렇게 해도 접근성·키보드 지원·CSS 스타일링이 전부 없는 "버튼 그림"일 뿐이다. → **픽셀(canvas)이냐 HTML이냐 둘 중 하나만** 골라야 했다.
+
+**해결**: 같은 요소가 DOM(상호작용)과 캔버스(픽셀)에 **동시에 존재**한다. 셰이더가 그 픽셀을 붙잡아 비틀고, 왜곡하고, 혼합하고, 3D 형태에 매핑한다. 접근성과 폼 동작은 DOM이 그대로 유지한다.
+
+## API 구조
+
+> ⚠️ **영상이 쓰는 API 이름은 전부 구 명칭이다.** 조사 결과 확정된 현재 이름으로 아래를 정정했다.
+> 근거와 전체 스펙: `research/canvas/01-api-spec.md`
+
+1. `<canvas layoutsubtree>` 속성 → 캔버스가 **직계 자식** 요소를 인식 (철자는 전부 소문자, IDL은 `layoutSubtree`)
+2. 그리고 싶은 HTML을 캔버스 자식으로 넣는다 (평범한 HTML/CSS 그대로)
+3. **`ctx.drawElementImage(el, x, y)`** — 요소 + 좌표를 주면 실시간 복사본을 그 자리에 그린다
+   - 이름 변천: `drawElement` → `drawHTMLElement` → `drawHTML` → **`drawElementImage`**(2025-09-11 확정). 영상은 첫 이름을 쓴다
+4. **반환값이 핵심**: 그려진 위치를 나타내는 `DOMMatrix` 를 돌려준다 → 그것을 요소의 `style.transform` 에 넣으면 실제 DOM 요소가 그려진 위치로 이동한다 → **클릭이 맞아떨어진다**
+   - 구 API의 `setHitTestRegions()` 는 2025-11-08 폐기되고 이 방식으로 대체됐다
+   - **매 프레임 반영하지 않으면 클릭이 전부 어긋난다** — 이 API의 필수 계약이다
+5. WebGL **`gl.texElementImage2D(...)`** / WebGPU **`device.queue.copyElementImageToTexture(...)`**
+   - 2026-04~06에 두 시그니처 모두 바뀌어 **Chrome 공식 블로그 예제조차 구버전**이다. WICG 공식 데모도 try/catch 로 신·구 양쪽을 지원한다
+6. 캔버스 내부 HTML이 바뀔 때(포커스·호버 등) **`paint` 이벤트** 발생 → 듣고 다시 그린다 (중첩 시 역트리 순서)
+
+### 보안 모델 — "read-back-allowed rendering"
+캔버스 픽셀은 읽을 수 있으므로, **저자가 원래 볼 수 없던 것은 아예 그리지 않는다**: cross-origin 콘텐츠, 시스템 색상, 맞춤법 마커, **`:visited`(히스토리 스니핑 차단)**, 자동완성 미리보기, 서브픽셀 AA, IME 팝업. same-origin iframe은 그려진다.
+
+### 데모 구현 흐름 (반사 버튼, JS 약 20줄)
+```
+매 프레임(rAF):
+  캔버스 clear
+  ctx.save()
+  translate(아래로) + 상하 반전 + globalAlpha 0.3
+  drawElement(button)        ← 흐릿한 뒤집힌 반사
+  ctx.restore()
+  drawElement(button)        ← 원본
+  반환된 변환값 → button.style.transform 에 적용 (히트박스 정렬)
+  requestAnimationFrame(render)
+```
+클릭 이벤트에서 클릭 좌표로 `ripple()` 호출 — 픽셀을 샘플링해 위치를 조정하는 건 기존 캔버스 연산이라 새로울 게 없다. **요점은 HTML이 일단 캔버스에 올라가면 무엇이든 할 수 있다는 것.**
+
+## 영상에 나온 데모들
+- 3D 씬의 **천 조각 위에 그려진 포트폴리오** — 찌르면 천이 실제처럼 반응하고 폼이 천에 녹아든다
+- HTML `range` 입력 → **젤리 슬라이더**
+- 폼 제출 시 셰이더로 **HTML이 왜곡되는** 효과
+- 라이트/다크 모드 전환 시 **페이지가 타들어가는** 애니메이션
+- 웹에서 구현한 **Apple Liquid Glass**
+
+## 한계
+
+영상이 밝힌 것:
+- Chrome **Canary + 플래그** 뒤에 있다 (`chrome://flags/#canvas-draw-element`)
+- 아직 **제안(proposal) 단계**, 전부 초안
+- **API 시그니처와 기본 형태조차 바뀔 수 있다** — 실제로 조사 기간에만 4번 바뀌었다
+- → "당장 내일 프로덕션에 투입할 것은 아니지만, 오늘 실험을 시작할 가치는 충분하다"
+
+조사로 보강한 것 (영상이 말하지 않은 것):
+- **Origin Trial이 진행 중이다** (M148~M150, M154까지 연장 승인). OT 토큰을 등록하면 **Chrome Stable 사용자에게도 동작한다** — 영상은 이 부분을 "플래그뿐"으로 축소해서 말한다. 다만 2026-10 초 만료 예정
+- **Firefox·Safari 모두 "No signal"**(입장 미표명), WHATWG PR #11588은 2025-08 개설 후 여전히 미머지
+- 실전 제약 둘: ① cross-origin iframe 미지원 ② **캔버스 안 콘텐츠는 컴포지터 스레드 스크롤/애니메이션을 잃고 JS에 묶인다** — Chrome은 캔버스 안에 스크롤 영역을 넣지 말고 캔버스 전체를 스크롤시키라고 명시
+- **three.js는 이미 정식 지원한다**: `THREE.HTMLTexture(element)` + `InteractionManager`, **r184 포함**(2026-04-10 머지), WebGL/WebGPU 렌더러 양쪽
+- **폴백이 존재한다**: `three-html-render` 폴리필(MIT)이 동일 API 표면을 `foreignObject`로 제공하고 네이티브가 있으면 자동으로 fast path를 탄다. three.js 공식 예제가 이걸 쓴다
+
+## designpaca 에의 함의
+
+1. **이 API는 스킬의 "실험 레이어"에 넣는다** — 기본 경로가 되어선 안 된다. 프로덕션 기본값은 SVG 필터 + three.js. 단 조사 결과 위상이 조금 올라갔다: **three.js `HTMLTexture`(r184 정식) + `three-html-render` 폴리필** 조합이면 *점진적 향상*으로 오늘 쓸 수 있다. "쓰지 마라"가 아니라 **"폴백을 먼저 만들고, 그 위에 얹어라"**로 규칙을 정한다
+2. **폴백 필수**: 미지원 브라우저에서 같은 인상을 주는 대안 경로를 항상 같이 설계한다 (`foreignObject` 폴리필, SVG displacement, backdrop-filter, CSS3DRenderer 등 — 비교표는 `research/canvas/04-fallbacks.md`)
+3. **"DOM은 살려두고 픽셀만 왜곡한다"는 원칙**은 이 API 없이도 유효하다 — 접근성을 포기하지 않고 화려함을 얻는 designpaca의 기본 철학으로 삼는다
+4. 영상의 문제의식("웹이 다시 재밌어질 수 있다", "플래시 시절처럼")이 곧 스킬의 방향성 — **안전하고 지루한 템플릿의 반대편**
diff --git a/research/youtube/nomad-html.description b/research/youtube/nomad-html.description
new file mode 100644
index 0000000..aec36b8
--- /dev/null
+++ b/research/youtube/nomad-html.description
@@ -0,0 +1,17 @@
+이게 CSS가 아니라구?
+
+0:00~02:29 🤖 이게 진짜 HTML이라고?
+02:30~02:50 🌐 왜 지금까지 불가능했을까?
+02:51~03:51 ⚡ HTML in Canvas는 어떻게 작동할까?
+03:52~06:02 ⚡ 직접 만들어보자
+06:03~06:37 🤖 아직 당장 쓸 수는 없다?
+
+
+----
+
+🚀 나만의 AI 클로를 만들 수 있다고.....!?
+노마드코더 2026 신규 강의!
+Cloudflare 위에서 24시간 돌아가는 나만의 AI Claw를 직접 만들어보세요. 
+실시간 채팅, 문서 검색, PDF 질의응답, 메모리까지 실전 기능을 하나씩 구현합니다.
+2026 가장 최첨단 AI 기술을 만나보세요. 😎
+모두를 위한 OpenClaw ⚡️https://nomadcoders.co/clawclone?utm_source=youtube&utm_medium=yt_long&utm_campaign=paid_courses_260702
\ No newline at end of file
diff --git a/research/youtube/transcript-ko-compact.txt b/research/youtube/transcript-ko-compact.txt
new file mode 100644
index 0000000..8551a6a
--- /dev/null
+++ b/research/youtube/transcript-ko-compact.txt
@@ -0,0 +1 @@
+웹사이트들이 곧 엄청난 혼란에 빠질 겁니다. 크롬에서 웹사이트들이 곧 엄청난 혼란에 빠질 겁니다. 크롬에서 웹사이트와 비디오 게임의 경계를 허무는 새로운 API를 출시했습니다. 웹사이트와 비디오 게임의 경계를 허무는 새로운 API를 출시했습니다. 캔버스에서는 HTML이라고 부릅니다. 이 기능을 사용하면 캔버스에서는 HTML이라고 부릅니다. 이 기능을 사용하면 버튼, 버튼, 버튼, 폼, 웹페이지 전체 등 모든 HTML 요소를 가져와 폼, 웹페이지 전체 등 모든 HTML 요소를 가져와 폼, 웹페이지 전체 등 모든 HTML 요소를 가져와 캔버스 안에 실시간으로 그릴 수 있습니다. 캔버스 안에 실시간으로 그릴 수 있습니다. 전에는 할 수 없었던 일. 지금 당장은 전에는 할 수 없었던 일. 지금 당장은 별것 아닌 것처럼 들릴 수도 있겠지만, 별것 아닌 것처럼 들릴 수도 있겠지만, 별것 아닌 것처럼 들릴 수도 있겠지만, 이 데모 영상을 보시면 생각이 달라질 겁니다 이 데모 영상을 보시면 생각이 달라질 겁니다 이 데모 영상을 보시면 생각이 달라질 겁니다 . 이것은 포트폴리오 웹사이트이고, . 이것은 포트폴리오 웹사이트이고, 저것은 실제 HTML 양식입니다. 저것은 실제 HTML 양식입니다. 웹페이지의 다른 텍스트처럼 마우스로 제목을 선택할 수 있습니다. 버튼도 웹페이지의 다른 텍스트처럼 마우스로 제목을 선택할 수 있습니다. 버튼도 작동하고, 슬라이더도 작동하고, 작동하고, 슬라이더도 작동하고, 작동하고, 슬라이더도 작동하고, 클릭하고, 그리고, 텍스트 입력란에 글씨도 쓸 수 있어요. 클릭하고, 그리고, 텍스트 입력란에 글씨도 쓸 수 있어요. 하지만 이 모든 일은 캔버스 안에서 일어나고 있습니다 하지만 이 모든 일은 캔버스 안에서 일어나고 있습니다 하지만 이 모든 일은 캔버스 안에서 일어나고 있습니다 . 그 형태는 . 그 형태는 3D 장면에서 천 조각 위에 그려져 있습니다. 3D 장면에서 천 조각 위에 그려져 있습니다. 찌르기나 쓰다듬기를 클릭하면 천이 실제 천처럼 반응하고 찌르기나 쓰다듬기를 클릭하면 천이 실제 천처럼 반응하고 찌르기나 쓰다듬기를 클릭하면 천이 실제 천처럼 반응하고 , 형태도 천에 자연스럽게 녹아듭니다 , 형태도 천에 자연스럽게 녹아듭니다 , 형태도 천에 자연스럽게 녹아듭니다 . 그리고 그 등장인물이 그 상황에 부딪히면 . 그리고 그 등장인물이 그 상황에 부딪히면 , 완전히 정면으로 충돌해 버립니다. 또는, , 완전히 정면으로 충돌해 버립니다. 또는, 젤리 슬라이더로 변환된 HTML 범위 입력란을 확인해 보세요. 젤리 슬라이더로 변환된 HTML 범위 입력란을 확인해 보세요. 참고로, 이 API를 사용하기 위해 반드시 완전한 3D 환경을 구축할 필요는 없습니다. 기존 웹사이트를 개선하는 데에도 사용할 수 있습니다. 예를 들어, 다음 입력을 살펴보세요 기존 웹사이트를 개선하는 데에도 사용할 수 있습니다. 예를 들어, 다음 입력을 살펴보세요 . 이것은 실제 HTML 입력 필드이며, 그 . 이것은 실제 HTML 입력 필드이며, 그 위에 텍스트를 입력할 수 있습니다. 하지만 폼을 제출하면 위에 텍스트를 입력할 수 있습니다. 하지만 폼을 제출하면 캔버스 안에 있기 때문에 캔버스 안에 있기 때문에 캔버스 안에 있기 때문에 멋진 효과를 적용할 수 있습니다. 또는, 멋진 효과를 적용할 수 있습니다. 또는, 이 양식을 사용하세요. 겉보기에는 평범해 보이지만, 이 양식을 사용하세요. 겉보기에는 평범해 보이지만, 입력에 대한 초점 효과, 입력에 대한 초점 효과, 입력에 대한 초점 효과, 테두리의 움직임, 빛나는 방식 등 모든 것은 테두리의 움직임, 빛나는 방식 등 모든 것은 테두리의 움직임, 빛나는 방식 등 모든 것은 캔버스에서 실행되는 셰이더에 의해 구현됩니다. 캔버스에서 실행되는 셰이더에 의해 구현됩니다. 그런데 제가 그걸 제출하면 셰이더 때문에 HTML이 왜곡됩니다 그런데 제가 그걸 제출하면 셰이더 때문에 HTML이 왜곡됩니다 그런데 제가 그걸 제출하면 셰이더 때문에 HTML이 왜곡됩니다 . 또는, . 또는, 밝은 모드와 어두운 모드 사이를 전환할 때 페이지가 타들어가는 듯한 애니메이션을 확인해 보세요. 그리고 이건 밝은 모드와 어두운 모드 사이를 전환할 때 페이지가 타들어가는 듯한 애니메이션을 확인해 보세요. 그리고 이건 정말 아름답네요. 누군가가 정말 아름답네요. 누군가가 웹상에서 애플의 액체 유리를 만들었습니다. 웹상에서 애플의 액체 유리를 만들었습니다. 이거 정말 멋지지 않나요? 우리가 앞으로 만들어낼 멋진 웹사이트들과 우리가 앞으로 만들어낼 멋진 웹사이트들과 우리가 앞으로 만들어낼 멋진 웹사이트들과 웹이 어떻게 변화할지 상상해 보세요. 웹이 어떻게 변화할지 상상해 보세요. 2D 페이지라기보다는 2D 페이지라기보다는 2D 페이지라기보다는 비디오 게임이나 예술 설치 작품처럼 느껴지는 웹사이트. 그런 비디오 게임이나 예술 설치 작품처럼 느껴지는 웹사이트. 그런 종류의 네트워크가 방금 열린 겁니다. 종류의 네트워크가 방금 열린 겁니다. 그렇다면 이 모든 것이 어떻게 가능한 걸까요? 우리가 그렇다면 이 모든 것이 어떻게 가능한 걸까요? 우리가 알고 있듯이, HTML의 canvas 요소는 알고 있듯이, HTML의 canvas 요소는 알고 있듯이, HTML의 canvas 요소는 그 안의 픽셀을 조작할 수 있게 해줍니다. 그 안의 픽셀을 조작할 수 있게 해줍니다. 엄청나게 강력합니다. 저희는 엄청나게 강력합니다. 저희는 게임, 이미지 편집, 3D 장면 제작 등 게임, 이미지 편집, 3D 장면 제작 등 게임, 이미지 편집, 3D 장면 제작 등 순수한 시각적 순수한 시각적 순수한 시각적 제어가 필요한 모든 분야에서 이 소프트웨어를 사용합니다. 하지만 canvas는 제어가 필요한 모든 분야에서 이 소프트웨어를 사용합니다. 하지만 canvas는 다른 HTML 요소에 대해서는 전혀 알지 못합니다. 제가 다른 HTML 요소에 대해서는 전혀 알지 못합니다. 제가 무슨 말인지 보여드리겠습니다. 무슨 말인지 보여드리겠습니다. 캔버스에 간단한 버튼을 추가하고 싶다고 가정해 봅시다. 버튼 요소를 단순히 드래그해서 버튼 요소를 단순히 드래그해서 버튼 요소를 단순히 드래그해서 안에 넣을 수는 없습니다. 캔버스는 안에 넣을 수는 없습니다. 캔버스는 그걸 이해하지 못해요. 그래서 대신에 이 그걸 이해하지 못해요. 그래서 대신에 이 모든 것을 해야 합니다. 먼저 모든 것을 해야 합니다. 먼저 사각형과 글자를 그립니다. 그다음, 사각형과 글자를 그립니다. 그다음, 캔버스 전체에서 클릭 소리를 감지하고 캔버스 전체에서 클릭 소리를 감지하고 캔버스 전체에서 클릭 소리를 감지하고 클릭이 버튼 좌표 내에서 발생했는지 확인합니다 클릭이 버튼 좌표 내에서 발생했는지 확인합니다 클릭이 버튼 좌표 내에서 발생했는지 확인합니다 . 그런 다음 . 그런 다음 마우스 오버 시에도 동일한 히트 테스트를 다시 수행하여 마우스 오버 시에도 동일한 히트 테스트를 다시 수행하여 마우스가 버튼 위로 이동할 때 버튼을 다른 색상으로 다시 그릴 수 있도록 합니다 마우스가 버튼 위로 이동할 때 버튼을 다른 색상으로 다시 그릴 수 있도록 합니다 마우스가 버튼 위로 이동할 때 버튼을 다른 색상으로 다시 그릴 수 있도록 합니다 . 그런데 그 모든 과정을 거치고 나서도, 여전히 . 그런데 그 모든 과정을 거치고 나서도, 여전히 진짜 버튼은 없네요. 진짜 버튼은 없네요. 버튼 그림은 있는데 버튼 그림은 있는데 버튼 그림은 있는데 접근성도 없고, 키보드 지원도 없고, 접근성도 없고, 키보드 지원도 없고, 접근성도 없고, 키보드 지원도 없고, CSS 스타일링도 없고, 아무것도 없어요. 자, 이제 CSS 스타일링도 없고, 아무것도 없어요. 자, 이제 페이지의 모든 버튼, 모든 페이지의 모든 버튼, 모든 페이지의 모든 버튼, 모든 입력란, 모든 양식, 전체 인터페이스에 대해 이 작업을 수행한다고 상상해 보세요. 입력란, 모든 양식, 전체 인터페이스에 대해 이 작업을 수행한다고 상상해 보세요. 그래서 오랫동안 그래서 오랫동안 그래서 오랫동안 픽셀로 가득 찬 캔버스나 픽셀로 가득 찬 캔버스나 픽셀로 가득 찬 캔버스나 HTML로 가득 찬 웹 페이지 중 하나만 선택해야 했고, 둘 다 동시에 사용할 수는 없었던 것입니다. HTML로 가득 찬 웹 페이지 중 하나만 선택해야 했고, 둘 다 동시에 사용할 수는 없었던 것입니다. 방금 보신 모든 데모, 천, 방금 보신 모든 데모, 천, 방금 보신 모든 데모, 천, 불타는 페이지, 액체 유리 등은 모두 불타는 페이지, 액체 유리 등은 모두 불타는 페이지, 액체 유리 등은 모두 실제 HTML을 기반으로 하고 있지만, 실제 HTML을 기반으로 하고 있지만, 이 API가 나오기 전에는 똑같은 이유로 구현이 불가능했습니다. 이 모든 것을 가능하게 하는 것은 바로 이것입니다 이 API가 나오기 전에는 똑같은 이유로 구현이 불가능했습니다. 이 모든 것을 가능하게 하는 것은 바로 이것입니다 . HTML은 . HTML은 실제로 클릭할 수 있는 버튼이나 실제로 클릭할 수 있는 버튼이나 실제로 클릭할 수 있는 버튼이나 입력할 수 있는 입력 필드가 있을 때는 DOM에, 그리고 입력할 수 있는 입력 필드가 있을 때는 DOM에, 그리고 입력할 수 있는 입력 필드가 있을 때는 DOM에, 그리고 단순히 픽셀로만 표현될 때는 캔버스에 동시에 존재합니다. 단순히 픽셀로만 표현될 때는 캔버스에 동시에 존재합니다. 셰이더는 픽셀을 포착하고, 비틀고, 왜곡하고, 셰이더는 픽셀을 포착하고, 비틀고, 왜곡하고, 셰이더는 픽셀을 포착하고, 비틀고, 왜곡하고, 혼합하거나, 심지어 3D 형태로 매핑할 수도 있습니다. 혼합하거나, 심지어 3D 형태로 매핑할 수도 있습니다. 동일한 요소의 두 복사본, 하나는 동일한 요소의 두 복사본, 하나는 동일한 요소의 두 복사본, 하나는 만질 수 있고, 다른 하나는 그림을 그릴 수 있습니다. 그리고 만질 수 있고, 다른 하나는 그림을 그릴 수 있습니다. 그리고 API는 놀라울 정도로 간단합니다. 먼저, API는 놀라울 정도로 간단합니다. 먼저, 레이아웃 서브트리 속성을 추가하고 레이아웃 서브트리 속성을 추가하고 레이아웃 서브트리 속성을 추가하고 그 안에 그리고자 하는 HTML을 넣어 캔버스가 해당 속성을 사용하도록 설정합니다. 그 안에 그리고자 하는 HTML을 넣어 캔버스가 해당 속성을 사용하도록 설정합니다. 그런 다음 해당 요소를 선택하고 그런 다음 해당 요소를 선택하고 그런 다음 해당 요소를 선택하고 캔버스 컨텍스트에서 요소 이미지 그리기를 호출합니다 캔버스 컨텍스트에서 요소 이미지 그리기를 호출합니다 캔버스 컨텍스트에서 요소 이미지 그리기를 호출합니다 . 요소와 . 요소와 좌표를 입력하면 캔버스가 그 자리에 좌표를 입력하면 캔버스가 그 자리에 좌표를 입력하면 캔버스가 그 자리에 실시간으로 복사본을 그려줍니다. WebGL을 사용 중이라면 실시간으로 복사본을 그려줍니다. WebGL을 사용 중이라면 텍스트 요소 이미지가 2D로 표시됩니다. 텍스트 요소 이미지가 2D로 표시됩니다. WebGPU를 사용 중이라면 WebGPU를 사용 중이라면 WebGPU를 사용 중이라면 요소 이미지를 텍스처로 복사하는 기능이 있습니다. 같은 요소 이미지를 텍스처로 복사하는 기능이 있습니다. 같은 아이디어인데, 2D 캔버스 대신 GPU 텍스처에 HTML을 입력하는 것뿐입니다 아이디어인데, 2D 캔버스 대신 GPU 텍스처에 HTML을 입력하는 것뿐입니다 아이디어인데, 2D 캔버스 대신 GPU 텍스처에 HTML을 입력하는 것뿐입니다 . . 캔버스 내부의 HTML이 캔버스 내부의 HTML이 캔버스 내부의 HTML이 변경될 때마다, 예를 들어 입력 필드에 포커스가 맞춰지거나 변경될 때마다, 예를 들어 입력 필드에 포커스가 맞춰지거나 변경될 때마다, 예를 들어 입력 필드에 포커스가 맞춰지거나 버튼에 마우스 커서가 올라갈 때마다, 캔버스는 버튼에 마우스 커서가 올라갈 때마다, 캔버스는 버튼에 마우스 커서가 올라갈 때마다, 캔버스는 페인트 이벤트를 발생시킵니다. 그 소리에 귀 기울이고 페인트 이벤트를 발생시킵니다. 그 소리에 귀 기울이고 , 그 안에서 원하는 대로 행동하면 됩니다. , 그 안에서 원하는 대로 행동하면 됩니다. HTML을 화면에 표시하거나, 셰이더를 사용하여 변형 HTML을 화면에 표시하거나, 셰이더를 사용하여 변형 HTML을 화면에 표시하거나, 셰이더를 사용하여 변형 하거나, 3D 도형으로 감쌀 수 있습니다. 하거나, 3D 도형으로 감쌀 수 있습니다. 그게 거의 API입니다. 이를 제대로 이해하려면, 그것을 이용해 무언가를 만들어 봅시다 이를 제대로 이해하려면, 그것을 이용해 무언가를 만들어 봅시다 이를 제대로 이해하려면, 그것을 이용해 무언가를 만들어 봅시다 . 우리가 만들려는 것은 . 우리가 만들려는 것은 아래쪽에 반사 효과가 있는 간단한 버튼입니다. 버튼은 실제로 아래쪽에 반사 효과가 있는 간단한 버튼입니다. 버튼은 실제로 클릭할 수 있으며, 반사된 모습은 클릭할 수 있으며, 반사된 모습은 클릭할 수 있으며, 반사된 모습은 캔버스에 그려진 것입니다. 먼저 HTML 코드부터 살펴보겠습니다. 캔버스 캔버스에 그려진 것입니다. 먼저 HTML 코드부터 살펴보겠습니다. 캔버스 캔버스에 그려진 것입니다. 먼저 HTML 코드부터 살펴보겠습니다. 캔버스 안에 버튼이 있습니다. 캔버스는 안에 버튼이 있습니다. 캔버스는 레이아웃 서브트리 속성을 가지고 있으므로 레이아웃 서브트리 속성을 가지고 있으므로 레이아웃 서브트리 속성을 가지고 있으므로 자식 요소에 대해 알고 있습니다. 해당 버튼은 그냥 자식 요소에 대해 알고 있습니다. 해당 버튼은 그냥 일반 HTML 버튼일 뿐이며, 캔버스와는 아무런 관련이 없습니다 일반 HTML 버튼일 뿐이며, 캔버스와는 아무런 관련이 없습니다 일반 HTML 버튼일 뿐이며, 캔버스와는 아무런 관련이 없습니다 . CSS도 그냥 평범한 CSS, . CSS도 그냥 평범한 CSS, 분홍색 둥근 버튼일 뿐입니다. 마우스 커서를 올리면 분홍색 둥근 버튼일 뿐입니다. 마우스 커서를 올리면 보라색으로 변하면서 약간 커집니다. 보라색으로 변하면서 약간 커집니다. 클릭하면 크기가 줄어듭니다. 자, 이제 자바 클릭하면 크기가 줄어듭니다. 자, 이제 자바 스크립트, 전체적인 내용에 대해 이야기해 봅시다. 먼저 스크립트, 전체적인 내용에 대해 이야기해 봅시다. 먼저 페이지에서 페이지에서 페이지에서 캔버스, 그림을 그리는 데 사용하는 도구인 캔버스, 그림을 그리는 데 사용하는 도구인 캔버스, 그림을 그리는 데 사용하는 도구인 컨텍스트, 그리고 버튼, 이렇게 세 가지 요소를 가져옵니다. 그런 다음, 컨텍스트, 그리고 버튼, 이렇게 세 가지 요소를 가져옵니다. 그런 다음, 세 개의 숫자를 저장합니다. X와 Y는 세 개의 숫자를 저장합니다. X와 Y는 캔버스에서 버튼이 나타날 위치입니다. H는 캔버스에서 버튼이 나타날 위치입니다. H는 버튼의 높이입니다. 자, 이제 렌더링 버튼의 높이입니다. 자, 이제 렌더링 함수를 살펴보겠습니다. 이 함수는 초당 60번 호출됩니다 함수를 살펴보겠습니다. 이 함수는 초당 60번 호출됩니다 . 먼저, 매 프레임마다 캔버스를 깨끗하게 닦습니다 . 그렇지 않으면 모든 그림이 . 그렇지 않으면 모든 그림이 쌓이게 될 것입니다. 우리는 브러시에게 쌓이게 될 것입니다. 우리는 브러시에게 현재 상태를 북마크하도록 지시합니다. 그다음엔 현재 상태를 북마크하도록 지시합니다. 그다음엔 붓을 가지고 장난을 쳐 봅니다. 우리는 붓을 가지고 장난을 쳐 봅니다. 우리는 모든 것을 약간 아래로 이동시키고, 상하 반전시키고 모든 것을 약간 아래로 이동시키고, 상하 반전시키고 모든 것을 약간 아래로 이동시키고, 상하 반전시키고 , 불투명도를 30%로 설정하여 그리도록 지시합니다. 그다음, , 불투명도를 30%로 설정하여 그리도록 지시합니다. 그다음, 버튼을 캔버스에 찍어냅니다. 버튼을 캔버스에 찍어냅니다. 브러시가 뒤집힌 흐릿한 브러시가 뒤집힌 흐릿한 브러시가 뒤집힌 흐릿한 모드이기 때문에 스탬프는 모드이기 때문에 스탬프는 모드이기 때문에 스탬프는 버튼의 흐릿하고 거꾸로 된 복사본처럼 나옵니다. 그런 다음 버튼의 흐릿하고 거꾸로 된 복사본처럼 나옵니다. 그런 다음 붓에게 책갈피로 돌아가라고 지시합니다. 뒤집히지도 붓에게 책갈피로 돌아가라고 지시합니다. 뒤집히지도 않고 흐릿해지지도 않은, 원래 모습 그대로 말입니다 않고 흐릿해지지도 않은, 원래 모습 그대로 말입니다 않고 흐릿해지지도 않은, 원래 모습 그대로 말입니다 . 이제 . 이제 일반 붓으로 버튼에 다시 한번 도장을 찍어줍니다. 일반 붓으로 버튼에 다시 한번 도장을 찍어줍니다. 시청자들이 클릭하는 바로 그 링크입니다. 하지만 여기에 시청자들이 클릭하는 바로 그 링크입니다. 하지만 여기에 문제가 있습니다. 버튼은 실제로 문제가 있습니다. 버튼은 실제로 두 곳에 존재합니다. 하나는 방금 두 곳에 존재합니다. 하나는 방금 버튼을 그린 캔버스이고, 다른 하나는 버튼을 그린 캔버스이고, 다른 하나는 버튼을 그린 캔버스이고, 다른 하나는 브라우저가 실제 보이지 않지만 브라우저가 실제 보이지 않지만 브라우저가 실제 보이지 않지만 클릭 가능한 버튼을 저장하는 DOM입니다. 브라우저는 클릭 가능한 버튼을 저장하는 DOM입니다. 브라우저는 캔버스의 어느 부분에 그림을 그렸는지 알지 못합니다. 캔버스의 어느 부분에 그림을 그렸는지 알지 못합니다. 따라서 화면에 표시된 버튼을 클릭했을 때 따라서 화면에 표시된 버튼을 클릭했을 때 따라서 화면에 표시된 버튼을 클릭했을 때 , 브라우저는 실제 보이지 않는 다른 위치의 버튼을 알아채지 못할 수도 있습니다 , 브라우저는 실제 보이지 않는 다른 위치의 버튼을 알아채지 못할 수도 있습니다 , 브라우저는 실제 보이지 않는 다른 위치의 버튼을 알아채지 못할 수도 있습니다 . 우리는 . 우리는 보이지 않는 것을 칠해진 것과 같은 위치로 옮겨야 합니다 보이지 않는 것을 칠해진 것과 같은 위치로 옮겨야 합니다 보이지 않는 것을 칠해진 것과 같은 위치로 옮겨야 합니다 . 다행히도 . 다행히도 요소 이미지 그리기 기능이 도움이 됩니다. 전화를 걸었더니 요소 이미지 그리기 기능이 도움이 됩니다. 전화를 걸었더니 버튼이 어디에 그려졌는지 알려주는 계산 결과가 나왔습니다. 우리는 버튼이 어디에 그려졌는지 알려주는 계산 결과가 나왔습니다. 우리는 그 계산 결과를 버튼 스타일 변환에 전달하고, 그 계산 결과를 버튼 스타일 변환에 전달하고, 그 계산 결과를 버튼 스타일 변환에 전달하고, 그러면 보이지 않는 버튼이 그러면 보이지 않는 버튼이 그러면 보이지 않는 버튼이 그려진 버튼과 일치하도록 이동합니다. 자, 이제 클릭이 시작됩니다 그려진 버튼과 일치하도록 이동합니다. 자, 이제 클릭이 시작됩니다 . 마지막으로, 마치 재생 버튼을 누르는 것처럼 브라우저에게 . 마지막으로, 마치 재생 버튼을 누르는 것처럼 브라우저에게 다음 프레임에서 다시 렌더링을 호출하도록 요청합니다 다음 프레임에서 다시 렌더링을 호출하도록 요청합니다 다음 프레임에서 다시 렌더링을 호출하도록 요청합니다 . 이게 바로 데모의 전부입니다. . 이게 바로 데모의 전부입니다. 캔버스에 두 번 그려진 실제 클릭 가능한 HTML 버튼이죠. 동일한 요소가 두 개 모두 캔버스에 두 번 그려진 실제 클릭 가능한 HTML 버튼이죠. 동일한 요소가 두 개 모두 정상적으로 작동하며, 약 20줄의 정상적으로 작동하며, 약 20줄의 정상적으로 작동하며, 약 20줄의 자바스크립트로 구현됩니다. 하지만, 여기서부터 자바스크립트로 구현됩니다. 하지만, 여기서부터 재밌어집니다. 이제 버튼이 캔버스에 있으므로 재밌어집니다. 이제 버튼이 캔버스에 있으므로 해당 픽셀을 우리가 소유하게 되었고, 이는 클릭 시 해당 픽셀을 우리가 소유하게 되었고, 이는 클릭 시 해당 픽셀을 우리가 소유하게 되었고, 이는 클릭 시 물결 효과와 같은 어떤 작업이든 수행할 수 있다는 것을 의미합니다 물결 효과와 같은 어떤 작업이든 수행할 수 있다는 것을 의미합니다 물결 효과와 같은 어떤 작업이든 수행할 수 있다는 것을 의미합니다 . 그리고 이를 추가하는 코드는 . 그리고 이를 추가하는 코드는 바로 이것입니다. 버튼 클릭을 감지하고 클릭이 바로 이것입니다. 버튼 클릭을 감지하고 클릭이 발생하면 발생하면 발생하면 클릭 좌표에서 ripple 함수를 호출합니다. 클릭 좌표에서 ripple 함수를 호출합니다. 물결 효과 기능 자체는 일반적인 물결 효과 기능 자체는 일반적인 물결 효과 기능 자체는 일반적인 캔버스 연산이며, AI가 이를 처리하는 데 도움을 줄 수 있습니다 캔버스 연산이며, AI가 이를 처리하는 데 도움을 줄 수 있습니다 캔버스 연산이며, AI가 이를 처리하는 데 도움을 줄 수 있습니다 . 픽셀을 샘플링하고 위치를 조정하는 것은 . 픽셀을 샘플링하고 위치를 조정하는 것은 API에서 새로운 것이 아닙니다. API에서 새로운 것이 아닙니다. 요점은, 일단 HTML이 캔버스에 올라가면 요점은, 일단 HTML이 캔버스에 올라가면 요점은, 일단 HTML이 캔버스에 올라가면 무엇이든 할 수 있다는 것입니다. 자, 이제 무엇이든 할 수 있다는 것입니다. 자, 이제 솔직한 이야기를 해볼게요. 이 API는 아직 상용화 준비가 되지 않았습니다 솔직한 이야기를 해볼게요. 이 API는 아직 상용화 준비가 되지 않았습니다 . . Chrome Canary에 플래그를 남깁니다. 따라서 Chrome Canary에 플래그를 남깁니다. 따라서 API가 작동하려면 사용자가 브라우저에서 해당 기능을 활성화해야 합니다 API가 작동하려면 사용자가 브라우저에서 해당 기능을 활성화해야 합니다 API가 작동하려면 사용자가 브라우저에서 해당 기능을 활성화해야 합니다 . 그리고 이 모든 것은 아직 . 그리고 이 모든 것은 아직 제안 단계입니다. 방금 보신 내용은 모두 아직 제안 단계입니다. 방금 보신 내용은 모두 아직 초안입니다. 초안입니다. API의 서명이나 기본적인 형태조차도 여전히 변경될 수 있습니다. 그러니까 당장 내일 API의 서명이나 기본적인 형태조차도 여전히 변경될 수 있습니다. 그러니까 당장 내일 생산에 투입할 만한 것은 아니지만, 생산에 투입할 만한 것은 아니지만, 오늘 당장 실험을 시작해 볼 만한 가치가 충분히 있는 것입니다. 오늘 당장 실험을 시작해 볼 만한 가치가 충분히 있는 것입니다. 이게 실제로 구현되면 좋겠어요. 플래시 시절처럼 이게 실제로 구현되면 좋겠어요. 플래시 시절처럼 웹서핑이 다시 재밌어질 수 있을 것 같거든요 웹서핑이 다시 재밌어질 수 있을 것 같거든요 웹서핑이 다시 재밌어질 수 있을 것 같거든요 . 네 . 네 , 여러분 좋은 하루 보내세요. , 여러분 좋은 하루 보내세요. 다음 영상에서 만나요. 안녕.
\ No newline at end of file
diff --git a/research/youtube/transcript-ko.txt b/research/youtube/transcript-ko.txt
new file mode 100644
index 0000000..53c8e4a
--- /dev/null
+++ b/research/youtube/transcript-ko.txt
@@ -0,0 +1 @@
+웹사이트들이 곧 엄청난 혼란에 빠질 겁니다. 크롬에서 웹사이트들이 곧 엄청난 혼란에 빠질 겁니다. 크롬에서 웹사이트와 비디오 게임의 경계를 허무는 새로운 API를 출시했습니다. 웹사이트와 비디오 게임의 경계를 허무는 새로운 API를 출시했습니다. 웹사이트와 비디오 게임의 경계를 허무는 새로운 API를 출시했습니다. 캔버스에서는 HTML이라고 부릅니다. 이 기능을 사용하면 캔버스에서는 HTML이라고 부릅니다. 이 기능을 사용하면 캔버스에서는 HTML이라고 부릅니다. 이 기능을 사용하면 버튼, 버튼, 버튼, 폼, 웹페이지 전체 등 모든 HTML 요소를 가져와 폼, 웹페이지 전체 등 모든 HTML 요소를 가져와 폼, 웹페이지 전체 등 모든 HTML 요소를 가져와 캔버스 안에 실시간으로 그릴 수 있습니다. 캔버스 안에 실시간으로 그릴 수 있습니다. 캔버스 안에 실시간으로 그릴 수 있습니다. 전에는 할 수 없었던 일. 지금 당장은 전에는 할 수 없었던 일. 지금 당장은 전에는 할 수 없었던 일. 지금 당장은 별것 아닌 것처럼 들릴 수도 있겠지만, 별것 아닌 것처럼 들릴 수도 있겠지만, 별것 아닌 것처럼 들릴 수도 있겠지만, 이 데모 영상을 보시면 생각이 달라질 겁니다 이 데모 영상을 보시면 생각이 달라질 겁니다 이 데모 영상을 보시면 생각이 달라질 겁니다 . 이것은 포트폴리오 웹사이트이고, . 이것은 포트폴리오 웹사이트이고, . 이것은 포트폴리오 웹사이트이고, 저것은 실제 HTML 양식입니다. 저것은 실제 HTML 양식입니다. 웹페이지의 다른 텍스트처럼 마우스로 제목을 선택할 수 있습니다. 버튼도 웹페이지의 다른 텍스트처럼 마우스로 제목을 선택할 수 있습니다. 버튼도 웹페이지의 다른 텍스트처럼 마우스로 제목을 선택할 수 있습니다. 버튼도 작동하고, 슬라이더도 작동하고, 작동하고, 슬라이더도 작동하고, 작동하고, 슬라이더도 작동하고, 클릭하고, 그리고, 텍스트 입력란에 글씨도 쓸 수 있어요. 클릭하고, 그리고, 텍스트 입력란에 글씨도 쓸 수 있어요. 클릭하고, 그리고, 텍스트 입력란에 글씨도 쓸 수 있어요. 하지만 이 모든 일은 캔버스 안에서 일어나고 있습니다 하지만 이 모든 일은 캔버스 안에서 일어나고 있습니다 하지만 이 모든 일은 캔버스 안에서 일어나고 있습니다 . 그 형태는 . 그 형태는 . 그 형태는 3D 장면에서 천 조각 위에 그려져 있습니다. 3D 장면에서 천 조각 위에 그려져 있습니다. 3D 장면에서 천 조각 위에 그려져 있습니다. 찌르기나 쓰다듬기를 클릭하면 천이 실제 천처럼 반응하고 찌르기나 쓰다듬기를 클릭하면 천이 실제 천처럼 반응하고 찌르기나 쓰다듬기를 클릭하면 천이 실제 천처럼 반응하고 , 형태도 천에 자연스럽게 녹아듭니다 , 형태도 천에 자연스럽게 녹아듭니다 , 형태도 천에 자연스럽게 녹아듭니다 . 그리고 그 등장인물이 그 상황에 부딪히면 . 그리고 그 등장인물이 그 상황에 부딪히면 . 그리고 그 등장인물이 그 상황에 부딪히면 , 완전히 정면으로 충돌해 버립니다. 또는, , 완전히 정면으로 충돌해 버립니다. 또는, 젤리 슬라이더로 변환된 HTML 범위 입력란을 확인해 보세요. 젤리 슬라이더로 변환된 HTML 범위 입력란을 확인해 보세요. 젤리 슬라이더로 변환된 HTML 범위 입력란을 확인해 보세요. 참고로, 이 API를 사용하기 위해 반드시 완전한 3D 환경을 구축할 필요는 없습니다. 참고로, 이 API를 사용하기 위해 반드시 완전한 3D 환경을 구축할 필요는 없습니다. 기존 웹사이트를 개선하는 데에도 사용할 수 있습니다. 예를 들어, 다음 입력을 살펴보세요 기존 웹사이트를 개선하는 데에도 사용할 수 있습니다. 예를 들어, 다음 입력을 살펴보세요 기존 웹사이트를 개선하는 데에도 사용할 수 있습니다. 예를 들어, 다음 입력을 살펴보세요 . 이것은 실제 HTML 입력 필드이며, 그 . 이것은 실제 HTML 입력 필드이며, 그 . 이것은 실제 HTML 입력 필드이며, 그 위에 텍스트를 입력할 수 있습니다. 하지만 폼을 제출하면 위에 텍스트를 입력할 수 있습니다. 하지만 폼을 제출하면 위에 텍스트를 입력할 수 있습니다. 하지만 폼을 제출하면 캔버스 안에 있기 때문에 캔버스 안에 있기 때문에 캔버스 안에 있기 때문에 멋진 효과를 적용할 수 있습니다. 또는, 멋진 효과를 적용할 수 있습니다. 또는, 멋진 효과를 적용할 수 있습니다. 또는, 이 양식을 사용하세요. 겉보기에는 평범해 보이지만, 이 양식을 사용하세요. 겉보기에는 평범해 보이지만, 이 양식을 사용하세요. 겉보기에는 평범해 보이지만, 입력에 대한 초점 효과, 입력에 대한 초점 효과, 입력에 대한 초점 효과, 테두리의 움직임, 빛나는 방식 등 모든 것은 테두리의 움직임, 빛나는 방식 등 모든 것은 테두리의 움직임, 빛나는 방식 등 모든 것은 캔버스에서 실행되는 셰이더에 의해 구현됩니다. 캔버스에서 실행되는 셰이더에 의해 구현됩니다. 캔버스에서 실행되는 셰이더에 의해 구현됩니다. 그런데 제가 그걸 제출하면 셰이더 때문에 HTML이 왜곡됩니다 그런데 제가 그걸 제출하면 셰이더 때문에 HTML이 왜곡됩니다 그런데 제가 그걸 제출하면 셰이더 때문에 HTML이 왜곡됩니다 . 또는, . 또는, 밝은 모드와 어두운 모드 사이를 전환할 때 페이지가 타들어가는 듯한 애니메이션을 확인해 보세요. 그리고 이건 밝은 모드와 어두운 모드 사이를 전환할 때 페이지가 타들어가는 듯한 애니메이션을 확인해 보세요. 그리고 이건 밝은 모드와 어두운 모드 사이를 전환할 때 페이지가 타들어가는 듯한 애니메이션을 확인해 보세요. 그리고 이건 정말 아름답네요. 누군가가 정말 아름답네요. 누군가가 정말 아름답네요. 누군가가 웹상에서 애플의 액체 유리를 만들었습니다. 웹상에서 애플의 액체 유리를 만들었습니다. 웹상에서 애플의 액체 유리를 만들었습니다. 이거 정말 멋지지 않나요? 이거 정말 멋지지 않나요? 이거 정말 멋지지 않나요? 우리가 앞으로 만들어낼 멋진 웹사이트들과 우리가 앞으로 만들어낼 멋진 웹사이트들과 우리가 앞으로 만들어낼 멋진 웹사이트들과 웹이 어떻게 변화할지 상상해 보세요. 웹이 어떻게 변화할지 상상해 보세요. 웹이 어떻게 변화할지 상상해 보세요. 2D 페이지라기보다는 2D 페이지라기보다는 2D 페이지라기보다는 비디오 게임이나 예술 설치 작품처럼 느껴지는 웹사이트. 그런 비디오 게임이나 예술 설치 작품처럼 느껴지는 웹사이트. 그런 비디오 게임이나 예술 설치 작품처럼 느껴지는 웹사이트. 그런 종류의 네트워크가 방금 열린 겁니다. 종류의 네트워크가 방금 열린 겁니다. 종류의 네트워크가 방금 열린 겁니다. 그렇다면 이 모든 것이 어떻게 가능한 걸까요? 우리가 그렇다면 이 모든 것이 어떻게 가능한 걸까요? 우리가 그렇다면 이 모든 것이 어떻게 가능한 걸까요? 우리가 알고 있듯이, HTML의 canvas 요소는 알고 있듯이, HTML의 canvas 요소는 알고 있듯이, HTML의 canvas 요소는 그 안의 픽셀을 조작할 수 있게 해줍니다. 그 안의 픽셀을 조작할 수 있게 해줍니다. 그 안의 픽셀을 조작할 수 있게 해줍니다. 엄청나게 강력합니다. 저희는 엄청나게 강력합니다. 저희는 엄청나게 강력합니다. 저희는 게임, 이미지 편집, 3D 장면 제작 등 게임, 이미지 편집, 3D 장면 제작 등 게임, 이미지 편집, 3D 장면 제작 등 순수한 시각적 순수한 시각적 순수한 시각적 제어가 필요한 모든 분야에서 이 소프트웨어를 사용합니다. 하지만 canvas는 제어가 필요한 모든 분야에서 이 소프트웨어를 사용합니다. 하지만 canvas는 제어가 필요한 모든 분야에서 이 소프트웨어를 사용합니다. 하지만 canvas는 다른 HTML 요소에 대해서는 전혀 알지 못합니다. 제가 다른 HTML 요소에 대해서는 전혀 알지 못합니다. 제가 다른 HTML 요소에 대해서는 전혀 알지 못합니다. 제가 무슨 말인지 보여드리겠습니다. 무슨 말인지 보여드리겠습니다. 무슨 말인지 보여드리겠습니다. 캔버스에 간단한 버튼을 추가하고 싶다고 가정해 봅시다. 캔버스에 간단한 버튼을 추가하고 싶다고 가정해 봅시다. 캔버스에 간단한 버튼을 추가하고 싶다고 가정해 봅시다. 버튼 요소를 단순히 드래그해서 버튼 요소를 단순히 드래그해서 버튼 요소를 단순히 드래그해서 안에 넣을 수는 없습니다. 캔버스는 안에 넣을 수는 없습니다. 캔버스는 안에 넣을 수는 없습니다. 캔버스는 그걸 이해하지 못해요. 그래서 대신에 이 그걸 이해하지 못해요. 그래서 대신에 이 그걸 이해하지 못해요. 그래서 대신에 이 모든 것을 해야 합니다. 먼저 모든 것을 해야 합니다. 먼저 모든 것을 해야 합니다. 먼저 사각형과 글자를 그립니다. 그다음, 사각형과 글자를 그립니다. 그다음, 사각형과 글자를 그립니다. 그다음, 캔버스 전체에서 클릭 소리를 감지하고 캔버스 전체에서 클릭 소리를 감지하고 캔버스 전체에서 클릭 소리를 감지하고 클릭이 버튼 좌표 내에서 발생했는지 확인합니다 클릭이 버튼 좌표 내에서 발생했는지 확인합니다 클릭이 버튼 좌표 내에서 발생했는지 확인합니다 . 그런 다음 . 그런 다음 . 그런 다음 마우스 오버 시에도 동일한 히트 테스트를 다시 수행하여 마우스 오버 시에도 동일한 히트 테스트를 다시 수행하여 마우스가 버튼 위로 이동할 때 버튼을 다른 색상으로 다시 그릴 수 있도록 합니다 마우스가 버튼 위로 이동할 때 버튼을 다른 색상으로 다시 그릴 수 있도록 합니다 마우스가 버튼 위로 이동할 때 버튼을 다른 색상으로 다시 그릴 수 있도록 합니다 . 그런데 그 모든 과정을 거치고 나서도, 여전히 . 그런데 그 모든 과정을 거치고 나서도, 여전히 . 그런데 그 모든 과정을 거치고 나서도, 여전히 진짜 버튼은 없네요. 진짜 버튼은 없네요. 진짜 버튼은 없네요. 버튼 그림은 있는데 버튼 그림은 있는데 버튼 그림은 있는데 접근성도 없고, 키보드 지원도 없고, 접근성도 없고, 키보드 지원도 없고, 접근성도 없고, 키보드 지원도 없고, CSS 스타일링도 없고, 아무것도 없어요. 자, 이제 CSS 스타일링도 없고, 아무것도 없어요. 자, 이제 CSS 스타일링도 없고, 아무것도 없어요. 자, 이제 페이지의 모든 버튼, 모든 페이지의 모든 버튼, 모든 페이지의 모든 버튼, 모든 입력란, 모든 양식, 전체 인터페이스에 대해 이 작업을 수행한다고 상상해 보세요. 입력란, 모든 양식, 전체 인터페이스에 대해 이 작업을 수행한다고 상상해 보세요. 입력란, 모든 양식, 전체 인터페이스에 대해 이 작업을 수행한다고 상상해 보세요. 그래서 오랫동안 그래서 오랫동안 그래서 오랫동안 픽셀로 가득 찬 캔버스나 픽셀로 가득 찬 캔버스나 픽셀로 가득 찬 캔버스나 HTML로 가득 찬 웹 페이지 중 하나만 선택해야 했고, 둘 다 동시에 사용할 수는 없었던 것입니다. HTML로 가득 찬 웹 페이지 중 하나만 선택해야 했고, 둘 다 동시에 사용할 수는 없었던 것입니다. HTML로 가득 찬 웹 페이지 중 하나만 선택해야 했고, 둘 다 동시에 사용할 수는 없었던 것입니다. 방금 보신 모든 데모, 천, 방금 보신 모든 데모, 천, 방금 보신 모든 데모, 천, 불타는 페이지, 액체 유리 등은 모두 불타는 페이지, 액체 유리 등은 모두 불타는 페이지, 액체 유리 등은 모두 실제 HTML을 기반으로 하고 있지만, 실제 HTML을 기반으로 하고 있지만, 이 API가 나오기 전에는 똑같은 이유로 구현이 불가능했습니다. 이 모든 것을 가능하게 하는 것은 바로 이것입니다 이 API가 나오기 전에는 똑같은 이유로 구현이 불가능했습니다. 이 모든 것을 가능하게 하는 것은 바로 이것입니다 이 API가 나오기 전에는 똑같은 이유로 구현이 불가능했습니다. 이 모든 것을 가능하게 하는 것은 바로 이것입니다 . HTML은 . HTML은 실제로 클릭할 수 있는 버튼이나 실제로 클릭할 수 있는 버튼이나 실제로 클릭할 수 있는 버튼이나 입력할 수 있는 입력 필드가 있을 때는 DOM에, 그리고 입력할 수 있는 입력 필드가 있을 때는 DOM에, 그리고 입력할 수 있는 입력 필드가 있을 때는 DOM에, 그리고 단순히 픽셀로만 표현될 때는 캔버스에 동시에 존재합니다. 단순히 픽셀로만 표현될 때는 캔버스에 동시에 존재합니다. 단순히 픽셀로만 표현될 때는 캔버스에 동시에 존재합니다. 셰이더는 픽셀을 포착하고, 비틀고, 왜곡하고, 셰이더는 픽셀을 포착하고, 비틀고, 왜곡하고, 셰이더는 픽셀을 포착하고, 비틀고, 왜곡하고, 혼합하거나, 심지어 3D 형태로 매핑할 수도 있습니다. 혼합하거나, 심지어 3D 형태로 매핑할 수도 있습니다. 혼합하거나, 심지어 3D 형태로 매핑할 수도 있습니다. 동일한 요소의 두 복사본, 하나는 동일한 요소의 두 복사본, 하나는 동일한 요소의 두 복사본, 하나는 만질 수 있고, 다른 하나는 그림을 그릴 수 있습니다. 그리고 만질 수 있고, 다른 하나는 그림을 그릴 수 있습니다. 그리고 만질 수 있고, 다른 하나는 그림을 그릴 수 있습니다. 그리고 API는 놀라울 정도로 간단합니다. 먼저, API는 놀라울 정도로 간단합니다. 먼저, 레이아웃 서브트리 속성을 추가하고 레이아웃 서브트리 속성을 추가하고 레이아웃 서브트리 속성을 추가하고 그 안에 그리고자 하는 HTML을 넣어 캔버스가 해당 속성을 사용하도록 설정합니다. 그 안에 그리고자 하는 HTML을 넣어 캔버스가 해당 속성을 사용하도록 설정합니다. 그 안에 그리고자 하는 HTML을 넣어 캔버스가 해당 속성을 사용하도록 설정합니다. 그런 다음 해당 요소를 선택하고 그런 다음 해당 요소를 선택하고 그런 다음 해당 요소를 선택하고 캔버스 컨텍스트에서 요소 이미지 그리기를 호출합니다 캔버스 컨텍스트에서 요소 이미지 그리기를 호출합니다 캔버스 컨텍스트에서 요소 이미지 그리기를 호출합니다 . 요소와 . 요소와 . 요소와 좌표를 입력하면 캔버스가 그 자리에 좌표를 입력하면 캔버스가 그 자리에 좌표를 입력하면 캔버스가 그 자리에 실시간으로 복사본을 그려줍니다. WebGL을 사용 중이라면 실시간으로 복사본을 그려줍니다. WebGL을 사용 중이라면 실시간으로 복사본을 그려줍니다. WebGL을 사용 중이라면 텍스트 요소 이미지가 2D로 표시됩니다. 텍스트 요소 이미지가 2D로 표시됩니다. 텍스트 요소 이미지가 2D로 표시됩니다. WebGPU를 사용 중이라면 WebGPU를 사용 중이라면 WebGPU를 사용 중이라면 요소 이미지를 텍스처로 복사하는 기능이 있습니다. 같은 요소 이미지를 텍스처로 복사하는 기능이 있습니다. 같은 요소 이미지를 텍스처로 복사하는 기능이 있습니다. 같은 아이디어인데, 2D 캔버스 대신 GPU 텍스처에 HTML을 입력하는 것뿐입니다 아이디어인데, 2D 캔버스 대신 GPU 텍스처에 HTML을 입력하는 것뿐입니다 아이디어인데, 2D 캔버스 대신 GPU 텍스처에 HTML을 입력하는 것뿐입니다 . . . 캔버스 내부의 HTML이 캔버스 내부의 HTML이 캔버스 내부의 HTML이 변경될 때마다, 예를 들어 입력 필드에 포커스가 맞춰지거나 변경될 때마다, 예를 들어 입력 필드에 포커스가 맞춰지거나 변경될 때마다, 예를 들어 입력 필드에 포커스가 맞춰지거나 버튼에 마우스 커서가 올라갈 때마다, 캔버스는 버튼에 마우스 커서가 올라갈 때마다, 캔버스는 버튼에 마우스 커서가 올라갈 때마다, 캔버스는 페인트 이벤트를 발생시킵니다. 그 소리에 귀 기울이고 페인트 이벤트를 발생시킵니다. 그 소리에 귀 기울이고 페인트 이벤트를 발생시킵니다. 그 소리에 귀 기울이고 , 그 안에서 원하는 대로 행동하면 됩니다. , 그 안에서 원하는 대로 행동하면 됩니다. , 그 안에서 원하는 대로 행동하면 됩니다. HTML을 화면에 표시하거나, 셰이더를 사용하여 변형 HTML을 화면에 표시하거나, 셰이더를 사용하여 변형 HTML을 화면에 표시하거나, 셰이더를 사용하여 변형 하거나, 3D 도형으로 감쌀 수 있습니다. 하거나, 3D 도형으로 감쌀 수 있습니다. 하거나, 3D 도형으로 감쌀 수 있습니다. 그게 거의 API입니다. 그게 거의 API입니다. 그게 거의 API입니다. 이를 제대로 이해하려면, 그것을 이용해 무언가를 만들어 봅시다 이를 제대로 이해하려면, 그것을 이용해 무언가를 만들어 봅시다 이를 제대로 이해하려면, 그것을 이용해 무언가를 만들어 봅시다 . 우리가 만들려는 것은 . 우리가 만들려는 것은 아래쪽에 반사 효과가 있는 간단한 버튼입니다. 버튼은 실제로 아래쪽에 반사 효과가 있는 간단한 버튼입니다. 버튼은 실제로 아래쪽에 반사 효과가 있는 간단한 버튼입니다. 버튼은 실제로 클릭할 수 있으며, 반사된 모습은 클릭할 수 있으며, 반사된 모습은 클릭할 수 있으며, 반사된 모습은 캔버스에 그려진 것입니다. 먼저 HTML 코드부터 살펴보겠습니다. 캔버스 캔버스에 그려진 것입니다. 먼저 HTML 코드부터 살펴보겠습니다. 캔버스 캔버스에 그려진 것입니다. 먼저 HTML 코드부터 살펴보겠습니다. 캔버스 안에 버튼이 있습니다. 캔버스는 안에 버튼이 있습니다. 캔버스는 안에 버튼이 있습니다. 캔버스는 레이아웃 서브트리 속성을 가지고 있으므로 레이아웃 서브트리 속성을 가지고 있으므로 레이아웃 서브트리 속성을 가지고 있으므로 자식 요소에 대해 알고 있습니다. 해당 버튼은 그냥 자식 요소에 대해 알고 있습니다. 해당 버튼은 그냥 자식 요소에 대해 알고 있습니다. 해당 버튼은 그냥 일반 HTML 버튼일 뿐이며, 캔버스와는 아무런 관련이 없습니다 일반 HTML 버튼일 뿐이며, 캔버스와는 아무런 관련이 없습니다 일반 HTML 버튼일 뿐이며, 캔버스와는 아무런 관련이 없습니다 . CSS도 그냥 평범한 CSS, . CSS도 그냥 평범한 CSS, . CSS도 그냥 평범한 CSS, 분홍색 둥근 버튼일 뿐입니다. 마우스 커서를 올리면 분홍색 둥근 버튼일 뿐입니다. 마우스 커서를 올리면 분홍색 둥근 버튼일 뿐입니다. 마우스 커서를 올리면 보라색으로 변하면서 약간 커집니다. 보라색으로 변하면서 약간 커집니다. 보라색으로 변하면서 약간 커집니다. 클릭하면 크기가 줄어듭니다. 자, 이제 자바 클릭하면 크기가 줄어듭니다. 자, 이제 자바 클릭하면 크기가 줄어듭니다. 자, 이제 자바 스크립트, 전체적인 내용에 대해 이야기해 봅시다. 먼저 스크립트, 전체적인 내용에 대해 이야기해 봅시다. 먼저 스크립트, 전체적인 내용에 대해 이야기해 봅시다. 먼저 페이지에서 페이지에서 페이지에서 캔버스, 그림을 그리는 데 사용하는 도구인 캔버스, 그림을 그리는 데 사용하는 도구인 캔버스, 그림을 그리는 데 사용하는 도구인 컨텍스트, 그리고 버튼, 이렇게 세 가지 요소를 가져옵니다. 그런 다음, 컨텍스트, 그리고 버튼, 이렇게 세 가지 요소를 가져옵니다. 그런 다음, 컨텍스트, 그리고 버튼, 이렇게 세 가지 요소를 가져옵니다. 그런 다음, 세 개의 숫자를 저장합니다. X와 Y는 세 개의 숫자를 저장합니다. X와 Y는 세 개의 숫자를 저장합니다. X와 Y는 캔버스에서 버튼이 나타날 위치입니다. H는 캔버스에서 버튼이 나타날 위치입니다. H는 캔버스에서 버튼이 나타날 위치입니다. H는 버튼의 높이입니다. 자, 이제 렌더링 버튼의 높이입니다. 자, 이제 렌더링 버튼의 높이입니다. 자, 이제 렌더링 함수를 살펴보겠습니다. 이 함수는 초당 60번 호출됩니다 함수를 살펴보겠습니다. 이 함수는 초당 60번 호출됩니다 함수를 살펴보겠습니다. 이 함수는 초당 60번 호출됩니다 . 먼저, 매 프레임마다 캔버스를 깨끗하게 닦습니다 . 먼저, 매 프레임마다 캔버스를 깨끗하게 닦습니다 . 먼저, 매 프레임마다 캔버스를 깨끗하게 닦습니다 . 그렇지 않으면 모든 그림이 . 그렇지 않으면 모든 그림이 . 그렇지 않으면 모든 그림이 쌓이게 될 것입니다. 우리는 브러시에게 쌓이게 될 것입니다. 우리는 브러시에게 쌓이게 될 것입니다. 우리는 브러시에게 현재 상태를 북마크하도록 지시합니다. 그다음엔 현재 상태를 북마크하도록 지시합니다. 그다음엔 현재 상태를 북마크하도록 지시합니다. 그다음엔 붓을 가지고 장난을 쳐 봅니다. 우리는 붓을 가지고 장난을 쳐 봅니다. 우리는 붓을 가지고 장난을 쳐 봅니다. 우리는 모든 것을 약간 아래로 이동시키고, 상하 반전시키고 모든 것을 약간 아래로 이동시키고, 상하 반전시키고 모든 것을 약간 아래로 이동시키고, 상하 반전시키고 , 불투명도를 30%로 설정하여 그리도록 지시합니다. 그다음, , 불투명도를 30%로 설정하여 그리도록 지시합니다. 그다음, , 불투명도를 30%로 설정하여 그리도록 지시합니다. 그다음, 버튼을 캔버스에 찍어냅니다. 버튼을 캔버스에 찍어냅니다. 버튼을 캔버스에 찍어냅니다. 브러시가 뒤집힌 흐릿한 브러시가 뒤집힌 흐릿한 브러시가 뒤집힌 흐릿한 모드이기 때문에 스탬프는 모드이기 때문에 스탬프는 모드이기 때문에 스탬프는 버튼의 흐릿하고 거꾸로 된 복사본처럼 나옵니다. 그런 다음 버튼의 흐릿하고 거꾸로 된 복사본처럼 나옵니다. 그런 다음 버튼의 흐릿하고 거꾸로 된 복사본처럼 나옵니다. 그런 다음 붓에게 책갈피로 돌아가라고 지시합니다. 뒤집히지도 붓에게 책갈피로 돌아가라고 지시합니다. 뒤집히지도 붓에게 책갈피로 돌아가라고 지시합니다. 뒤집히지도 않고 흐릿해지지도 않은, 원래 모습 그대로 말입니다 않고 흐릿해지지도 않은, 원래 모습 그대로 말입니다 않고 흐릿해지지도 않은, 원래 모습 그대로 말입니다 . 이제 . 이제 . 이제 일반 붓으로 버튼에 다시 한번 도장을 찍어줍니다. 일반 붓으로 버튼에 다시 한번 도장을 찍어줍니다. 일반 붓으로 버튼에 다시 한번 도장을 찍어줍니다. 시청자들이 클릭하는 바로 그 링크입니다. 하지만 여기에 시청자들이 클릭하는 바로 그 링크입니다. 하지만 여기에 시청자들이 클릭하는 바로 그 링크입니다. 하지만 여기에 문제가 있습니다. 버튼은 실제로 문제가 있습니다. 버튼은 실제로 문제가 있습니다. 버튼은 실제로 두 곳에 존재합니다. 하나는 방금 두 곳에 존재합니다. 하나는 방금 두 곳에 존재합니다. 하나는 방금 버튼을 그린 캔버스이고, 다른 하나는 버튼을 그린 캔버스이고, 다른 하나는 버튼을 그린 캔버스이고, 다른 하나는 브라우저가 실제 보이지 않지만 브라우저가 실제 보이지 않지만 브라우저가 실제 보이지 않지만 클릭 가능한 버튼을 저장하는 DOM입니다. 브라우저는 클릭 가능한 버튼을 저장하는 DOM입니다. 브라우저는 클릭 가능한 버튼을 저장하는 DOM입니다. 브라우저는 캔버스의 어느 부분에 그림을 그렸는지 알지 못합니다. 캔버스의 어느 부분에 그림을 그렸는지 알지 못합니다. 캔버스의 어느 부분에 그림을 그렸는지 알지 못합니다. 따라서 화면에 표시된 버튼을 클릭했을 때 따라서 화면에 표시된 버튼을 클릭했을 때 따라서 화면에 표시된 버튼을 클릭했을 때 , 브라우저는 실제 보이지 않는 다른 위치의 버튼을 알아채지 못할 수도 있습니다 , 브라우저는 실제 보이지 않는 다른 위치의 버튼을 알아채지 못할 수도 있습니다 , 브라우저는 실제 보이지 않는 다른 위치의 버튼을 알아채지 못할 수도 있습니다 . 우리는 . 우리는 . 우리는 보이지 않는 것을 칠해진 것과 같은 위치로 옮겨야 합니다 보이지 않는 것을 칠해진 것과 같은 위치로 옮겨야 합니다 보이지 않는 것을 칠해진 것과 같은 위치로 옮겨야 합니다 . 다행히도 . 다행히도 . 다행히도 요소 이미지 그리기 기능이 도움이 됩니다. 전화를 걸었더니 요소 이미지 그리기 기능이 도움이 됩니다. 전화를 걸었더니 버튼이 어디에 그려졌는지 알려주는 계산 결과가 나왔습니다. 우리는 버튼이 어디에 그려졌는지 알려주는 계산 결과가 나왔습니다. 우리는 버튼이 어디에 그려졌는지 알려주는 계산 결과가 나왔습니다. 우리는 그 계산 결과를 버튼 스타일 변환에 전달하고, 그 계산 결과를 버튼 스타일 변환에 전달하고, 그 계산 결과를 버튼 스타일 변환에 전달하고, 그러면 보이지 않는 버튼이 그러면 보이지 않는 버튼이 그러면 보이지 않는 버튼이 그려진 버튼과 일치하도록 이동합니다. 자, 이제 클릭이 시작됩니다 그려진 버튼과 일치하도록 이동합니다. 자, 이제 클릭이 시작됩니다 그려진 버튼과 일치하도록 이동합니다. 자, 이제 클릭이 시작됩니다 . 마지막으로, 마치 재생 버튼을 누르는 것처럼 브라우저에게 . 마지막으로, 마치 재생 버튼을 누르는 것처럼 브라우저에게 . 마지막으로, 마치 재생 버튼을 누르는 것처럼 브라우저에게 다음 프레임에서 다시 렌더링을 호출하도록 요청합니다 다음 프레임에서 다시 렌더링을 호출하도록 요청합니다 다음 프레임에서 다시 렌더링을 호출하도록 요청합니다 . 이게 바로 데모의 전부입니다. . 이게 바로 데모의 전부입니다. 캔버스에 두 번 그려진 실제 클릭 가능한 HTML 버튼이죠. 동일한 요소가 두 개 모두 캔버스에 두 번 그려진 실제 클릭 가능한 HTML 버튼이죠. 동일한 요소가 두 개 모두 캔버스에 두 번 그려진 실제 클릭 가능한 HTML 버튼이죠. 동일한 요소가 두 개 모두 정상적으로 작동하며, 약 20줄의 정상적으로 작동하며, 약 20줄의 정상적으로 작동하며, 약 20줄의 자바스크립트로 구현됩니다. 하지만, 여기서부터 자바스크립트로 구현됩니다. 하지만, 여기서부터 자바스크립트로 구현됩니다. 하지만, 여기서부터 재밌어집니다. 이제 버튼이 캔버스에 있으므로 재밌어집니다. 이제 버튼이 캔버스에 있으므로 재밌어집니다. 이제 버튼이 캔버스에 있으므로 해당 픽셀을 우리가 소유하게 되었고, 이는 클릭 시 해당 픽셀을 우리가 소유하게 되었고, 이는 클릭 시 해당 픽셀을 우리가 소유하게 되었고, 이는 클릭 시 물결 효과와 같은 어떤 작업이든 수행할 수 있다는 것을 의미합니다 물결 효과와 같은 어떤 작업이든 수행할 수 있다는 것을 의미합니다 물결 효과와 같은 어떤 작업이든 수행할 수 있다는 것을 의미합니다 . 그리고 이를 추가하는 코드는 . 그리고 이를 추가하는 코드는 . 그리고 이를 추가하는 코드는 바로 이것입니다. 버튼 클릭을 감지하고 클릭이 바로 이것입니다. 버튼 클릭을 감지하고 클릭이 바로 이것입니다. 버튼 클릭을 감지하고 클릭이 발생하면 발생하면 발생하면 클릭 좌표에서 ripple 함수를 호출합니다. 클릭 좌표에서 ripple 함수를 호출합니다. 클릭 좌표에서 ripple 함수를 호출합니다. 물결 효과 기능 자체는 일반적인 물결 효과 기능 자체는 일반적인 물결 효과 기능 자체는 일반적인 캔버스 연산이며, AI가 이를 처리하는 데 도움을 줄 수 있습니다 캔버스 연산이며, AI가 이를 처리하는 데 도움을 줄 수 있습니다 캔버스 연산이며, AI가 이를 처리하는 데 도움을 줄 수 있습니다 . 픽셀을 샘플링하고 위치를 조정하는 것은 . 픽셀을 샘플링하고 위치를 조정하는 것은 . 픽셀을 샘플링하고 위치를 조정하는 것은 API에서 새로운 것이 아닙니다. API에서 새로운 것이 아닙니다. API에서 새로운 것이 아닙니다. 요점은, 일단 HTML이 캔버스에 올라가면 요점은, 일단 HTML이 캔버스에 올라가면 요점은, 일단 HTML이 캔버스에 올라가면 무엇이든 할 수 있다는 것입니다. 자, 이제 무엇이든 할 수 있다는 것입니다. 자, 이제 무엇이든 할 수 있다는 것입니다. 자, 이제 솔직한 이야기를 해볼게요. 이 API는 아직 상용화 준비가 되지 않았습니다 솔직한 이야기를 해볼게요. 이 API는 아직 상용화 준비가 되지 않았습니다 솔직한 이야기를 해볼게요. 이 API는 아직 상용화 준비가 되지 않았습니다 . . . Chrome Canary에 플래그를 남깁니다. 따라서 Chrome Canary에 플래그를 남깁니다. 따라서 Chrome Canary에 플래그를 남깁니다. 따라서 API가 작동하려면 사용자가 브라우저에서 해당 기능을 활성화해야 합니다 API가 작동하려면 사용자가 브라우저에서 해당 기능을 활성화해야 합니다 API가 작동하려면 사용자가 브라우저에서 해당 기능을 활성화해야 합니다 . 그리고 이 모든 것은 아직 . 그리고 이 모든 것은 아직 . 그리고 이 모든 것은 아직 제안 단계입니다. 방금 보신 내용은 모두 아직 제안 단계입니다. 방금 보신 내용은 모두 아직 제안 단계입니다. 방금 보신 내용은 모두 아직 초안입니다. 초안입니다. API의 서명이나 기본적인 형태조차도 여전히 변경될 수 있습니다. 그러니까 당장 내일 API의 서명이나 기본적인 형태조차도 여전히 변경될 수 있습니다. 그러니까 당장 내일 API의 서명이나 기본적인 형태조차도 여전히 변경될 수 있습니다. 그러니까 당장 내일 생산에 투입할 만한 것은 아니지만, 생산에 투입할 만한 것은 아니지만, 오늘 당장 실험을 시작해 볼 만한 가치가 충분히 있는 것입니다. 오늘 당장 실험을 시작해 볼 만한 가치가 충분히 있는 것입니다. 오늘 당장 실험을 시작해 볼 만한 가치가 충분히 있는 것입니다. 이게 실제로 구현되면 좋겠어요. 플래시 시절처럼 이게 실제로 구현되면 좋겠어요. 플래시 시절처럼 이게 실제로 구현되면 좋겠어요. 플래시 시절처럼 웹서핑이 다시 재밌어질 수 있을 것 같거든요 웹서핑이 다시 재밌어질 수 있을 것 같거든요 웹서핑이 다시 재밌어질 수 있을 것 같거든요 . 네 . 네 . 네 , 여러분 좋은 하루 보내세요. , 여러분 좋은 하루 보내세요. , 여러분 좋은 하루 보내세요. 다음 영상에서 만나요. 다음 영상에서 만나요. 다음 영상에서 만나요. 안녕.
\ No newline at end of file
diff --git a/tsconfig.base.json b/tsconfig.base.json
new file mode 100644
index 0000000..81aaefd
--- /dev/null
+++ b/tsconfig.base.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "sourceMap": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}