feat(site): rework 19 marketing showcases for composition diversity

Measured convergence before: split hero 13/19, top-bar nav 19/19,
one-line notice footer 14/19, body Pretendard 17/21, 10 similarity
pairs above 0.78. Each showcase got a pre-assigned hero family, nav
form, footer form, type pair, background, accent hue, radius, motion
grammar and material from outputs/rework-2026-10-06/plan.md; direction
cards and the chosen reason are recorded in every design.md.

After: 0 similarity warnings, 19 distinct display faces, 7 hero
families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases
with SVG filter materials. Example contact values replace bracket
placeholders under the existing fictional-brand notices. Thumbnails,
OG images, card copy and three e2e assertions updated; dead CSS in
dure-enrollment and hannam-jari removed; similarity.mjs learns the new
font families.

apps/site/public/work/griddle-club/design.md

@@ -1,31 +1,145 @@
-# 철판클럽 — 2026-09-12 화면 보정 기록
+# design.md — 철판클럽 (griddle-club)
 
-## 구도·타입·색 관찰
+## 진행 상태
 
-- 코발트, 큰 고딕 제목, 버거 사진은 브랜드의 속도와 조리 장면을 만드는 기존 자산이다.
-- 기준 첫 화면의 파란 상품 카드는 절대 배치로 사진 프레임 밖에 걸쳐 캡션과 조합 시작 행동의 읽기 순서를 흐린다.
-- 메뉴 이미지는 이미 4:3 표면이지만 크롭 기준이 명시되지 않았고, 조합·가맹의 조건과 비용은 값보다 장식 카드처럼 보일 위험이 있다.
+- 0단계 현행 감사 2026-10-06 완료 — 분할 히어로·Pretendard·웜 페이퍼·고지 푸터·eyebrow 16개가 수렴 지문(05 계측)과 일치. 남길 자산: 상호·메뉴 6종과 가격·매장 3곳 상태·조합기 폼과 가격식·가맹 3단계 폼·생성 이미지 6장·진실 고지 범위.
+- 1단계 레퍼런스 완료 — R1 파이브가이즈 코리아(실측), R2 Gumroad(실측), R3 Gumroad 태그 캐러셀(실측). 버거킹 코리아는 내비만 읽혀 미검증.
+- 2단계 방향 완료(위임) — 카드 3장 중 A "쟁반 위의 콜라주" 선택. 이유는 "방향" 절.
+- 3단계 토큰 완료 — `styles/tokens.css` 한 곳. 색·radius 리터럴은 site.css·franchise.css에 0건.
+- 4단계 구현 완료 — 레이아웃 → (재질 없음) → 모션(스태거 등장·마퀴). 2차 페이지 `franchise/`는 공통 셸(상단 바·하단 행동 바·다열 푸터)만 맞췄다.
+- 5단계 감사 완료 — html-validate 0건, stylelint 0건, no-hanja 통과, design-gate 28/28, showcase-audit 12/12(320~2560), 철판클럽 E2E 42 시나리오 166 단언 통과, audit.mjs 2560px 3단언 통과(스크래치 복제). 루브릭 18/20.
+- 6단계 이 문서.
 
-## 근거 확인 범위
+## 브리프
 
-- `outputs/full-showcase-upgrade-20260912/screenshots/griddle-club/1440x1000-first.png`
-- 소비자 홈, `franchise/`, 기존 메뉴·조합·가상 매장·가맹 조건의 ID와 스크립트
-- 가상·생성 이미지·미전송·비용 미정·실제 주문 불가 표기는 보존한다.
+가상 스매시 버거 브랜드 철판클럽의 소비자 홈과 가맹 안내 2차 페이지. 방문자는 메뉴와 가격을 보고 재료를 조합해 가격·알레르기 정보를 확인한 뒤 가상 매장의 영업 상태를 본다. 실제 주문·결제·가맹 상담은 없다.
 
-## 결정 / 기각 조건
+- 목표 행동: 메뉴 보기 → 내 버거 조합하기(`#builder`) → 매장 상태 확인. 2차 페이지는 가맹 조건 정리 폼.
+- 기본 언어 한국어, 합니다체. 한자 금지.
+- 확정 슬롯(기존 파일에서): 메뉴 6종·가격, 세트 추가 4,100원, 매장 3곳(성수 영업 중·연남 영업 종료·문래 휴무), 알레르기 규칙, 가맹 비용 11항목 전부 미정.
+- 배정(plan.md): 비대칭 콜라주 히어로 · 두 줄 문장 표제 · 상단 바 + 모바일 하단 행동 바 · 다열 색인 푸터 · Jua/Gothic A1 · 유채 크림 #fbe9c8 · 코발트 유지 · pill·16px · 스태거 등장 + 마퀴 · 재질 없음 · 누끼 겹침(원본이 사진이면 CSS 크롭).
+- 화면 목록: `index.html`(홈), `franchise/index.html`(가맹).
 
-- 상품·예시 가격·조합 시작 버튼은 사진 아래 정상 흐름의 코발트 shelf로 둬 캡션과 겹치지 않게 한다.
-- 메뉴 이미지는 중앙 `cover` 크롭을 통일하고, 조합기는 라벨·선택·가격 보조 정보를 같은 위계로 둔다.
-- 가맹 절차와 비용은 단계·상태·다음 확인의 원장으로 정렬한다. 수익, 기간, 비용, 운영 성과를 새로 만들거나 추정하는 변경은 기각한다.
+## 미확정
 
-## 토큰·규칙
+- 사진은 전부 생성 이미지다(히어로 조각·메뉴·주방). 화면에 "생성 이미지, 실제 매장이 아닙니다" 라벨을 같은 시각 그룹 안에 둔다.
+- 누끼 원본이 없다. 콜라주 조각은 원형·둥근 사각 `border-radius` 크롭 + 크림 테두리로 "오려 낸" 모양을 만들었다. 원 안에 주방 배경이 남는다(아래 "하지 않기로 한 것").
+- 코발트 hue: plan.md는 299°로 적었지만 기존 값 `#2147e7`은 sRGB HSL 228°다. "유지" 배정이므로 값을 바꾸지 않았다.
+- 방향 선택은 위임(사용자가 재작업과 방향 선택을 맡김).
 
-- 기존 `--blue`, `--paper-*`, `--ink`, `--line`, `--font-mono`만 사용한다.
-- 상품 shelf와 제어 요소는 44px 이상의 동작 영역과 기존 focus 계약을 유지한다.
-- 320px과 200% 확대에서 `min-width: 0`, 가로 스크롤 표, normal flow로 정보를 보존한다.
+## 레퍼런스
 
-## 2026-09-12 현재 검증 기록
+| 슬롯 | URL | 관찰 | 가져온 것 |
+|---|---|---|---|
+| R1 구조 | https://www.fiveguys.co.kr/ (텍스트 페처, 2026-10-06) | 고정 헤더 + 오른쪽 "Order Now" 버튼, 히어로 바로 뒤 7항목 음식 격자, 매장 찾기 지도 섹션, 다열 푸터(고객센터·법적 고지·SNS) | 상단 바 오른쪽 행동 버튼, 히어로 → 메뉴 격자 순서, 다열 색인 푸터 |
+| R2 톤 | https://gumroad.com/ (텍스트 페처) | 히어로에 크기가 다른 동전 일러스트 5개가 흩어진 비대칭 콜라주, 알약 버튼, 둥근 디스플레이 서체 | 조각 5개(사진 3 + 가격 알약 + 스티커)를 크기 차 극단으로 겹치는 구도, 알약 radius, Jua |
+| R3 디테일 | https://gumroad.com/ 제품 발견 섹션의 반복 카테고리 태그 캐러셀 | 짧은 항목이 가로로 흐르는 띠 | 히어로 아래 메뉴·가격 마퀴(정지 버튼·가로 스크롤 폴백) |
+| 미검증 | https://www.burgerking.co.kr/ | 페처가 내비만 읽음(MENU·STORY·NEWS·STORE·CUSTOMER). 히어로·푸터 미확인 | — |
 
-- `verify-final` 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
-- root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
-- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
+https://www.shakeshack.com/ 은 403으로 열지 못했다(두 번 시도하지 않고 다른 출처로 감).
+
+## 방향
+
+**지문**: 비대칭 콜라주(사진 조각 3 + 가격 알약 + 스티커, 원형·둥근 사각 크롭, 크기 차 4배) · Jua / Gothic A1 · 유채 크림 #fbe9c8(섹션 교대는 #fff7e8·#f4d9a3, 코발트 전면 띠 1, 먹 띠 1) · 코발트 #2147e7(228°) · pill 999px·16px · 히어로 → 마퀴 → 메뉴 격자 → 조합기(코발트 띠) → 공정 → 매장 → 가맹 띠 → 푸터 · 상단 바(브랜드+항목+행동, ≥821 sticky) + 모바일 하단 고정 행동 바 4항목 · 다열 색인 푸터 4열 · 원형·둥근 사각 크롭 + 크림 테두리, 캡션은 알약으로 사진 위 · 스태거 등장(조각 6개, 90ms 간격, 이동·확대만) + 마퀴(32s, 정지 버튼, 감소 모션은 정지 목록).
+
+**한 문장 컨셉**: 처음 온 손님이 쟁반 위 버거 사진 조각과 가격 알약을 보고, 메뉴 격자에서 조합하기를 눌러 내 버거의 가격과 알레르기를 확인한다.
+
+**프리셋**: quiet-commerce 지배(메뉴·가격·조합기가 설득) + anti-grid 보조(히어로 구도만). 축 소유권: 구도·모션 = anti-grid, 타입·색·간격·컴포넌트 = quiet-commerce.
+
+### 제시한 카드(위임)
+
+| | A. 쟁반 위의 콜라주 (선택) | B. 메뉴판이 먼저 | C. 스티커 창구 |
+|---|---|---|---|
+| 컨셉 | 손님이 버거 사진 조각과 가격을 보고 조합기로 간다 | 손님이 메뉴 카드 6장이 겹친 콜라주에서 바로 하나를 눌러 조합기로 간다 | 손님이 매장 영업 상태 스티커를 먼저 보고 메뉴로 간다 |
+| 첫 화면 | 왼쪽 두 줄 표제·리드·버튼 둘 / 오른쪽 사진 조각 3 + 가격 알약 + 스티커 겹침 | 표제는 작게 위, 메뉴 카드(사진+가격) 6장이 서로 다른 크기로 겹침 | 가운데 표제, 둘레에 두꺼운 크림 테두리의 사진 스티커와 영업 상태 스티커가 기울어져 겹침 |
+| 흐름 | 히어로 → 마퀴 → 메뉴 → 조합기 → 공정 → 매장 → 가맹 | 히어로(메뉴) → 조합기 → 매장 → 공정 → 가맹 | 히어로 → 매장 상태 → 메뉴 → 조합기 → 공정 → 가맹 |
+| 타입 | Jua / Gothic A1, 표제가 본문의 5배 | Jua / Gothic A1, 표제가 본문의 2배(카드가 주인) | Jua / Gothic A1, 표제가 본문의 6배 |
+| 색 | 크림 바탕 / 갈색 먹 / 코발트는 버튼·알약·조합기 띠 | 크림 / 먹 / 코발트는 카드 번호와 가격만 | 크림 / 먹 / 코발트 + 치즈색 스티커를 많이 |
+| 모션 | 조각 스태거 등장 + 메뉴 마퀴 | 카드 스태거 등장 + 마퀴 | 스티커 스태거 등장 + 마퀴 |
+| 히어로 첫 문장 | 주문 뒤 눌러 굽고, 바로 건넵니다. | 오늘 메뉴 여섯 가지, 단품 6,900원부터. | 성수점 영업 중, 연남점은 오늘 종료. |
+| 포기하는 것 | 메뉴 전체를 첫 화면에서 비교하기 | 두 줄 표제의 무게(배정 "두 줄 문장"과 충돌) | 매장이 가상이라 상태가 늘 같다 — 첫 화면이 거짓 생동감이 된다 |
+
+**A를 고른 이유**: 첫째 목표 행동이 "메뉴 보기 → 조합하기"이고 R1(파이브가이즈)이 히어로 바로 뒤에 음식 격자를 둔다. 가진 사진 네 장이 전부 버거·조리 장면이라 조각으로 쓸 재료가 있고, 배정된 "두 줄 문장 표제"를 B는 지키지 못하며 C는 가상 매장 상태를 첫 화면의 주인으로 세워 진실 계약과 부딪친다.
+
+### 구도·타입·색 결정표
+
+| 축 | 관찰 → 결정 |
+|---|---|
+| 구도 | `hero-handoff.webp`는 버거와 손이 오른쪽 2/3에 있다 → 원형 크롭의 `object-position: 68% 56%`로 버거를 원 중심에 두고 1440에서 조각 폭 552px(단 폭의 104%), 작은 원 138px(26%)로 4배 차를 만든다. 390에서는 조각을 뷰포트 안(84%·50%·30%)에 두고 글 아래로 내린다(감사 도구가 넘친 조각을 가로 오버플로로 셈, 실측) |
+| 타입 | "주문 뒤 눌러 굽고," 7.8em이 390(354px)에서 두 줄 계약을 지키려면 h1 ≤45px → ≤620px에서 `clamp(34px, 10.5vw, 46px)`. 1440에서는 0.55fr 단(649px)에 `clamp(44px, 5vw, 84px)`=72px → 561px. 섹션 h2 "메뉴는 여섯 가지, 단품은 6,900원부터입니다."는 320·390·1440 전부 마지막 줄이 한 어절("6,900원부터입니다.")로 남아 "단품 6,900원부터, 메뉴는 여섯 가지."로 바꿨다(실측 스크립트) |
+| 색 | 코발트 `#2147e7`는 사진 속 쟁반·클립 색과 같다 → 조합기 띠 전체를 코발트로 해 "주문대"로 읽히게 한다. 비활성 세트 상자에 `opacity: .55`를 쓰자 "세트 구성" 라벨이 3.08:1로 떨어져(게이트 실측) 투명도 대신 속 빈 테두리·`--on-blue-soft`(5.27:1)로 바꿨다 |
+
+### 반사실·수렴 점검
+
+A. 고유 요소(1440·390 첫 화면): ① 코발트 쟁반 위 더블 버거 사진(`hero-handoff.webp`, 브랜드 색과 같은 쟁반) ② "철판 더블 8,900원" 가격 알약(브리프 수치) ③ "주문 뒤 조리" 스티커(스매시 버거의 조리 순서) ④ 메뉴·가격 마퀴(메뉴 6종 수치). 같은 업종 치환: 사진·가격이 바뀌면 알약·마퀴 내용이 바뀐다 — 구도는 남지만 헤드라인·시각물 둘이 깨지므로 통과. 다른 업종 치환(세무사무소): 가격 알약·메뉴 마퀴·조합기 띠가 성립하지 않는다 — 통과. 고유 요소 4개 ≥ 2.
+
+B-1 히어로 5축(직전 산출물 = 이 쇼케이스의 이전 판): 구도 다름(분할→콜라주) · 표제 서체 다름(Pretendard 900→Jua) · eyebrow 다름(있음→없음) · CTA 다름(단색 1 + 밑줄 링크 1 → 알약 단색 1 + 알약 외곽선 1) · 캡션 다름(사진 위 띠→알약). 같음 0.
+B-2 페이지 6축: 섹션 흐름 다름(마퀴 추가, 가맹 띠가 사진 없는 띠) · 글 묶음 다름(라벨 제거) · 내비 다름(상단 바 + 하단 행동 바) · 푸터 같음(다열, 배정 "유지") · 이미지 다름(원형 크롭·알약 캡션) · 모션 다름(없음→스태거+마퀴). 같음 1.
+토큰 4축(저장소 분배표 기준): Jua는 19종 중 유일, Gothic A1 본문은 4종(≤5), 크림 배경 유채 5종 중 하나, radius pill·16은 유일.
+
+## 토큰과 예산
+
+값은 `styles/tokens.css`. 역할만 적는다.
+
+- 바탕 3단: `--bg` 크림(히어로·메뉴·푸터) / `--surface` 밝은 크림(마퀴·매장·카드) / `--bg-deep` 진한 크림(공정 띠·포스터 카드). 강한 띠는 `--blue`(조합기) 하나와 `--ink`(가맹 띠) 하나.
+- 먹 3단 + 먹 위 3단, 코발트 위 2단. 대비 실측: 코발트/크림 5.64, 흰/코발트 6.73, `--on-blue-soft`/코발트 5.27, 먹/크림 14.32, `--ink-soft` 7.05, `--ink-faint` 5.73, `--danger` 5.20, `--success` 5.71, `--pause` 5.33, 크림/먹 14.32, `--on-ink-soft` 11.60, `--on-ink-faint` 8.74, 먹/치즈 10.92.
+- 서체: Jua(표제, 400 한 굵기) / Gothic A1 500·700·800(본문). Google Fonts `display=swap`, 한글은 unicode-range 슬라이스 서브셋. Pretendard·IBM Plex Mono 링크를 제거해 폰트 요청을 두 패밀리로 줄였다. 숫자는 Gothic A1 `tabular-nums`.
+- radius: `--radius` 16px, `--radius-pill` 999px. 원형 조각은 50%.
+- 모션: `--dur` 520ms, `--stagger` 90ms, `--shift` 28px, `--marquee-dur` 32s. 감소 모션에서 전부 0.
+- 예산(tokens §5 기본선): 히어로까지 JS 150KB gzip — 실측 `site.js` 11KB(원본), 외부 JS 0. LCP 2.5s — LCP 요소는 `hero-handoff.webp` 99KB(모바일 86KB) `fetchpriority="high"`, lazy 아님. INP — 입력 핸들러는 change·click뿐, 스크롤 로직 없음. `transform`·`opacity` 밖 애니메이션 없음(등장은 transform만, 마퀴는 transform).
+
+## 이펙트와 폴백
+
+- 스태거 등장: `.hero-media .piece`에 `piece-in`(translateY·scale·rotate) 키프레임, `--i`로 지연. 투명도는 쓰지 않는다 — 페이드 중 axe가 알약 글자를 2.82:1로 쟀다(E2E 실측). 감소 모션: `animation: none`, 즉시 표시. JS 없이도 CSS만으로 돈다.
+- 마퀴: `.marquee-track` translateX(-50%) 32s 루프, 목록을 두 번 넣고 둘째는 `aria-hidden`. 정지 수단: `#marquee-toggle`(aria-pressed), hover·focus-within에서 일시정지, 감소 모션에서는 애니메이션 제거·둘째 목록 숨김·목록을 줄바꿈해 정지 목록으로. 트랙은 `overflow-x: auto` 스크롤 영역(`role="region"` `tabindex="0"`) 안에 있어 기다리지 않고 넘길 수 있다.
+- 재질 없음(배정). 그림자는 조각·카드에만.
+- 이미지 깨짐: 기존 `.image-shell.is-broken` 폴백 유지.
+
+## 하지 않기로 한 것
+
+- 누끼 생성·새 이미지 생성(브리프). 원형 크롭 안에 주방 배경이 남는 것을 감수한다.
+- 스크롤 리빌(IntersectionObserver)·패럴랙스 — 배정표에 없다.
+- 상단 바 backdrop-filter — 바탕이 단색 크림이라 불투명 면으로 충분하다. 모바일에서는 sticky도 풀었다(하단 바가 이동 수단).
+- 슬로건 "눌러 굽고, 바로 건넨다."의 h1 사용 — 표제는 사실 문장으로, 은유 0개.
+- eyebrow(`.section-kicker`) 16개 전부 제거. 카드 안의 상태 라벨(대표 메뉴·곁들임·음료)은 섹션 라벨이 아니라 항목 분류라 남겼다.
+- 가운뎃점 메타 문자열 제거(고지 띠·캡션·옵션·푸터·JS 문자열·㎡ 환산).
+- 조합기 요약의 사진(`signature-double.webp` 반복) 제거 — 영수증 카드로.
+
+## 검증
+
+검증 줄: html-validate 2파일 0건 · stylelint 3파일 0건 · no-hanja 7파일 통과 · design-gate 28 충족 / 0 미검증 / 0 실패(꺼짐 3: static·visual·webkit) · showcase-audit 12/12 (320·390·768·1440·1920·2560 × 홈·가맹) · 철판클럽 E2E 42 시나리오 166 단언 통과(스크래치 복제본, WebKit 포함) · audit.mjs 2560px 3단언 통과(스크래치 복제) · 미검증 0.
+
+캡처: `outputs/`가 아닌 세션 스크래치 `griddle-shots/`(home·franchise × 1440·390 첫 화면·전체·회색조·흐림·감소 모션, 2560 첫 화면, 포커스).
+
+시각 루브릭(홈, 약한 축부터):
+
+| 축 | 점수 | 근거 |
+|---|---|---|
+| R7 카피 | 1 | 합니다체 통일, 은유 0, §13-c 지문 grep 0. 그러나 "주문 뒤 눌러 굽고, 바로 건넵니다."는 다른 스매시 버거 가게로 바꿔도 성립한다(공정 주장). 브리프만의 고유 재료(동네·가격)는 리드와 알약에 있고 h1에는 없다 |
+| R9 마감 | 1 | 200% 확대: 마퀴 항목이 정지 버튼 뒤로 지나가며 글자가 잘려 보인다(1440 회색조 캡처 y≈860). 조각 테두리·알약 radius·숫자 정렬은 어긋남 없음 |
+| R1 첫인상 | 2 | 3초 문장 "주문 뒤 눌러 굽는 스매시 버거 가게, 메뉴 보고 조합한다" — 1440·390 모두 브랜드·표제·사진·행동이 첫 화면에 있다. 반례: 상호 '철판클럽'만으로는 버거집임을 알 수 없고 사진이 말한다 |
+| R2 위계 | 2 | 흐림 캡처(1440): 표제 덩어리 → 버거 원 → 코발트 버튼 순. 크기·색·굵기 세 축 차이. 반례: 표제와 버거 원이 거의 같은 무게로 1위를 다툰다 |
+| R3 묶음 | 2 | 시작선 x=130(표제·리드·버튼·섹션 제목), x=156(카드 안쪽), 조각은 자유 배치(의도). 묶음 사이 간격(섹션 72~128px) > 안 간격(≤24px). 반례: 가격 알약은 정렬선 밖 |
+| R4 타이포 | 2 | 합성 이탤릭·볼드 없음(Jua 400, Gothic A1 실제 굵기), 자간 -0.01em, 320·390·1440에서 h1·h2 마지막 줄 한 어절 0건(스크립트 실측), 본문 measure 30em. 반례: Jua가 한 굵기라 카드 h3와 섹션 h2의 위계가 크기에만 기댄다 |
+| R5 여백 | 2 | 마퀴 띠(얇음) ↔ 조합기 띠(1100px)로 간격 변주가 정보 전환과 일치. 극단: 조각 552px vs 138px, 코발트 전면 띠. 반례: 1440 히어로 왼쪽 위 빈 면(y 110~280)이 대기인지 남은 것인지 애매하다 |
+| R6 이미지 | 2 | 슬롯 역할: 히어로 3조각(건네기·누르기·싱글), 메뉴 1(더블), 공정 1(주방). 390 첫 화면에 사진 있음. 같은 사진 반복 없음(모바일 원형은 `<picture>`로 세로 원본 교체). 반례: 누끼가 아니라 원형 크롭이라 원 안에 스테인리스 배경이 남는다 |
+| R8 구분성 | 2 | 고유 요소 4개(위 반사실 점검), B-1 같음 0, B-2 같음 1(푸터, 배정 유지). 반례: 다열 푸터는 cask·orbit·rfs·twentyoz와 같은 형태 |
+| R10 모바일 | 2 | 390 첫 화면: 브랜드·표제·행동 2·사진 조각, 하단 고정 바 4항목. 조각은 뷰포트 안으로 재배치. 반례: 리드가 4줄이라 사진이 첫 화면 하단 1/3에서 시작한다 |
+
+합계 18/20, 0점 없음, R1·R8 2점. 통과.
+
+가맹 페이지: 같은 셸·토큰. 1440·390 첫 화면 캡처에서 표제·행동 2·사진·하단 바 확인. E2E 8시나리오(폼 단계·오류·환산·성공·실패) 통과.
+
+하드 게이트: 키보드 — 탭 순서 스킵 링크 → 브랜드 → 내비 4 → 행동 → 히어로 버튼 2 → 마퀴 정지 → 마퀴 영역 → 필터…(실측), 포커스 링 3px 코발트(코발트 띠 위는 크림). 대비 — 위 수치, axe 0건. 감소 모션 — E2E "반복 애니메이션 제거 ≤0.01s" 통과, 조각 즉시 표시(캡처). 가로 스크롤 — 320~2560 0건. 터치 타깃 — 게이트 통과(컨트롤 ≥44, 링크 ≥24).
+
+## 피드백 기록 · 보존 목록
+
+- 보존: 상호·메뉴·가격·매장 상태·알레르기 규칙·조합기 id·data 속성·가맹 폼 id·E2E 문구("가상 매장 안내 보기", "주문과 결제는 진행되지 않습니다", "약 30평").
+- 사용자 피드백: 없음(위임).
+
+## 변경 기록
+
+- 2026-09-12 화면 보정 — 파란 상품 카드를 사진 아래 shelf로, 메뉴 이미지 중앙 cover 크롭 통일, 가맹 절차·비용을 원장으로 정렬. `--blue`·`--paper-*`·`--ink`·`--line`·`--font-mono`만 사용.
+- 2026-10-02 레드팀 06 — h1 자간 -0.085em → -0.015em(쉼표·받침 충돌), "예시" 13회 → 1회, 공정 표제를 정보 문장으로.
+- 2026-10-02 카피 기준 — 슬로건 한 곳만 남기고 표제를 합니다체 정보 문장으로. 가맹 h1 2줄 계약.
+- 2026-10-06 재작업(이 문서) — 분할 히어로 → 비대칭 콜라주, Pretendard → Jua/Gothic A1, 웜 페이퍼 → 유채 크림, 4·10·18px → pill·16px, 상단 바에 모바일 하단 행동 바 추가, 고지 푸터 → 4열 색인, eyebrow 16개 제거, 가운뎃점 제거, 스태거 등장 + 마퀴 추가, 조합기 사진 제거, 가맹 페이지 셸·표제 재작성. 옛 결정 중 유지한 것: 메뉴 격자 열 배분(6/3/3 + 4/4/4), 조합기 가격식, 매장 지도 그림, 가맹 폼 3단계.

apps/site/public/work/griddle-club/franchise/index.html

@@ -3,12 +3,12 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <title>철판클럽 가맹 안내 — 운영 조건부터 확인하기</title>
+    <title>철판클럽 가맹 안내 — 상권, 점포, 주방 동선부터</title>
     <meta
       name="description"
       content="가상 버거 브랜드 철판클럽의 상권, 점포, 면적, 개설 절차와 비용 미정 항목을 살펴보고 가맹 검토에 필요한 조건을 정리해 보세요. 실제 상담과 계약은 제공하지 않습니다."
     />
-    <meta property="og:title" content="철판클럽 가맹 안내 — 운영 조건부터" />
+    <meta property="og:title" content="철판클럽 가맹 안내 — 상권, 점포, 주방 동선부터" />
     <meta
       property="og:description"
       content="수익 약속 없이 상권, 점포, 주방 동선과 비용 미정 항목을 안내합니다."
@@ -17,43 +17,38 @@
     <meta property="og:image" content="../og.png" />
     <meta property="og:image:alt" content="직원들이 철판 조리와 포장을 나누어 맡는 주방" />
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="철판클럽 가맹 안내 — 운영 조건부터" />
+    <meta name="twitter:title" content="철판클럽 가맹 안내 — 상권, 점포, 주방 동선부터" />
     <meta
       name="twitter:description"
       content="상권, 점포, 주방 동선과 비용 미정 항목을 살펴보는 가맹 안내."
     />
     <meta name="twitter:image" content="../og.png" />
-    <meta name="theme-color" content="#fffdf8" />
-    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+    <meta name="theme-color" content="#fbe9c8" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
+      href="https://fonts.googleapis.com/css2?family=Jua&family=Gothic+A1:wght@500;700;800&display=swap"
     />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap"
-    />
-    <link rel="stylesheet" href="../styles/tokens.css?v=20260912all" />
-    <link rel="stylesheet" href="../styles/site.css?v=20260912all" />
-    <link rel="stylesheet" href="../styles/franchise.css?v=20260912all" />
+    <link rel="stylesheet" href="../styles/tokens.css?v=20261006" />
+    <link rel="stylesheet" href="../styles/site.css?v=20261006" />
+    <link rel="stylesheet" href="../styles/franchise.css?v=20261006" />
     <link
       rel="icon"
-      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%232147e7'/%3E%3Cpath d='M6 9h20M8 16h16M10 23h12' stroke='%23fffdf8' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%232147e7'/%3E%3Cpath d='M8 12h16M10 17h12M12 22h8' stroke='%23fbe9c8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"
     />
     <script>document.documentElement.classList.add("is-js");</script>
-    <script src="../scripts/franchise.js?v=1" defer></script>
+    <script src="../scripts/franchise.js?v=2" defer></script>
   </head>
   <body class="franchise-page">
     <a class="skip-link" href="#main">본문으로 건너뛰기</a>
 
     <div class="truth-bar" role="note">
-      <p>가상 브랜드 안내 · 실제 가맹 모집, 상담, 계약을 제공하지 않습니다.</p>
+      <p>가상 브랜드입니다. 가맹 모집과 상담은 하지 않습니다.</p>
     </div>
 
     <header class="site-head">
-      <div class="wrap head-row franchise-head-row">
+      <div class="wrap head-row">
         <a class="brand" href="../" aria-label="철판클럽 홈으로">
           <span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
           <span>철판클럽</span>
@@ -71,14 +66,13 @@
     <main id="main">
       <section class="franchise-hero" aria-labelledby="franchise-hero-heading">
         <div class="franchise-hero-copy">
-          <p class="section-kicker">철판클럽 가맹 안내</p>
-          <h1 id="franchise-hero-heading">매출 약속보다<br />운영 조건부터.</h1>
+          <h1 id="franchise-hero-heading">가맹은 상권과<br />점포부터 봅니다.</h1>
           <p>
             버거 사진만 보고 결정하지 않도록 상권, 점포, 전용 면적, 주방 동선과 아직 정할 수 없는 비용을 순서대로 보여 줍니다.
           </p>
           <div class="hero-actions">
-            <a class="button button-light" href="#site-fit">내 조건 살펴보기</a>
-            <a class="text-link light-link" href="#cost">비용 미정 항목 보기 <span aria-hidden="true">↓</span></a>
+            <a class="button button-primary" href="#site-fit">조건 살펴보기</a>
+            <a class="button button-ghost" href="#cost">비용 항목 보기</a>
           </div>
           <div class="franchise-truth">
             <strong>먼저 확인해 주세요</strong>
@@ -94,22 +88,22 @@
             fetchpriority="high"
           />
           <span class="image-fallback" aria-hidden="true">주방 운영 동선 장면</span>
-          <figcaption>생성 이미지 · 실제 매장과 가맹 시설 아님</figcaption>
+          <figcaption>생성 이미지, 실제 매장과 가맹 시설이 아닙니다</figcaption>
         </figure>
       </section>
 
       <section class="fact-rail" aria-label="가맹 안내 원칙">
         <div class="wrap fact-rail-grid">
-          <p><span>01</span> 수익률을 약속하지 않음</p>
-          <p><span>02</span> 점포를 보기 전 금액을 확정하지 않음</p>
-          <p><span>03</span> 실제 개인정보를 받지 않음</p>
+          <p><span>01</span> 수익률을 약속하지 않습니다</p>
+          <p><span>02</span> 점포를 보기 전에는 금액을 정하지 않습니다</p>
+          <p><span>03</span> 실제 개인정보를 받지 않습니다</p>
         </div>
       </section>
 
       <section class="section model-section" id="model" aria-labelledby="model-heading">
         <div class="wrap">
           <div class="section-head split-head">
-            <div class="model-heading-copy"><p class="section-kicker">어떤 운영 방식인지</p><h2 id="model-heading">좁은 주방에서<br />역할을 분명하게.</h2></div>
+            <div class="model-heading-copy"><h2 id="model-heading">주방은 준비, 조리, 포장, 전달 네 구간으로 나눕니다.</h2></div>
             <p class="section-note">조리, 조립, 포장, 전달이 서로 겹치지 않는 흐름을 먼저 검토합니다. 실제 설비와 인원은 점포마다 달라집니다.</p>
           </div>
 
@@ -121,7 +115,7 @@
           </div>
 
           <div class="operator-fit">
-            <div class="operator-heading-copy"><p class="section-kicker">운영자에게 필요한 태도</p><h3>직접 확인하고,<br />같은 품질을 반복하기.</h3></div>
+            <div class="operator-heading-copy"><h3>점주는 매장에서 직접 조리하며 네 가지를 준비합니다.</h3></div>
             <ul>
               <li><strong>현장 참여</strong><span>조리와 응대 흐름을 직접 익힐 준비</span></li>
               <li><strong>위생 기록</strong><span>보관, 조리, 마감 상태를 남길 준비</span></li>
@@ -135,28 +129,28 @@
       <section class="section site-fit-section" id="site-fit" aria-labelledby="site-fit-heading">
         <div class="wrap">
           <div class="section-head split-head">
-            <div class="site-fit-heading-copy"><p class="section-kicker">상권과 점포</p><h2 id="site-fit-heading">주소보다 먼저<br />운영 장면을 봅니다.</h2></div>
+            <div class="site-fit-heading-copy"><h2 id="site-fit-heading">상권, 점포 상태, 전용 면적, 설비, 이전 용도 다섯 가지를 적습니다.</h2></div>
             <p class="section-note">아래 분류는 적합 판정이 아니라 문의 때 빠뜨리지 않을 조건 목록입니다. 권장 면적 수치는 실제 검토 뒤에만 제시할 수 있습니다.</p>
           </div>
 
           <div class="fit-grid">
             <article class="fit-main">
-              <p class="fit-number mono">A</p>
+              <p class="fit-number">A</p>
               <h3>상권 흐름</h3>
               <p>업무가, 주거지, 역 주변, 대학가, 상점가 또는 여러 수요가 섞인 곳인지 먼저 적습니다.</p>
               <ul><li>점심과 저녁 수요 시간</li><li>도보와 차량 접근</li><li>포장 대기 공간</li><li>배달 픽업 접근</li></ul>
             </article>
             <article>
-              <p class="fit-number mono">B</p><h3>점포 상태</h3><p>점포 없음, 찾는 중, 협의 중, 보유함으로 나눕니다.</p>
+              <p class="fit-number">B</p><h3>점포 상태</h3><p>점포 없음, 찾는 중, 협의 중, 보유함으로 나눕니다.</p>
             </article>
             <article>
-              <p class="fit-number mono">C</p><h3>전용 면적</h3><p>사용자가 입력한 ㎡와 환산한 평을 함께 봅니다. 적합 판정은 하지 않습니다.</p>
+              <p class="fit-number">C</p><h3>전용 면적</h3><p>사용자가 입력한 ㎡와 환산한 평을 함께 봅니다. 적합 판정은 하지 않습니다.</p>
             </article>
             <article>
-              <p class="fit-number mono">D</p><h3>설비 조건</h3><p>전기, 배기, 급수, 배수와 반입 경로는 점포 자료로 따로 확인합니다.</p>
+              <p class="fit-number">D</p><h3>설비 조건</h3><p>전기, 배기, 급수, 배수와 반입 경로는 점포 자료로 따로 확인합니다.</p>
             </article>
             <article>
-              <p class="fit-number mono">E</p><h3>이전 용도</h3><p>음식점, 소매점, 빈 점포 등 이전 사용 상태를 확인합니다.</p>
+              <p class="fit-number">E</p><h3>이전 용도</h3><p>음식점, 소매점, 빈 점포 등 이전 사용 상태를 확인합니다.</p>
             </article>
           </div>
         </div>
@@ -165,7 +159,7 @@
       <section class="section franchise-process" id="process" aria-labelledby="process-heading-franchise">
         <div class="wrap">
           <div class="section-head split-head">
-            <div class="process-heading-copy"><p class="section-kicker">개설 절차</p><h2 id="process-heading-franchise">기간을 꾸미지 않고<br />순서만 보여 줍니다.</h2></div>
+            <div class="process-heading-copy"><h2 id="process-heading-franchise">개설은 여덟 단계이고, 기간은 점포마다 다릅니다.</h2></div>
             <p class="section-note">점포, 자료, 협의와 공사 조건에 따라 기간이 달라집니다. 아래 순서는 검토에 필요한 항목을 정리한 것이며 계약이나 개점을 보장하지 않습니다.</p>
           </div>
           <ol class="franchise-timeline">
@@ -184,7 +178,7 @@
       <section class="section cost-section" id="cost" aria-labelledby="cost-heading">
         <div class="wrap">
           <div class="cost-head">
-            <div class="cost-heading-copy"><p class="section-kicker">비용 항목</p><h2 id="cost-heading">합계를 만들 수 없는<br />이유부터 적습니다.</h2></div>
+            <div class="cost-heading-copy"><h2 id="cost-heading">비용 항목은 열한 가지이고, 금액은 점포를 본 뒤에 정합니다.</h2></div>
             <div class="unknown-cost">
               <span>현재 상태</span>
               <strong>비용 미정</strong>
@@ -209,7 +203,7 @@
                 <tr><th scope="row">첫 물류</th><td>메뉴 범위 필요</td><td>미정</td><td>품목과 보관량 확인</td></tr>
                 <tr><th scope="row">임대 보증 관련 비용</th><td>점포 계약 필요</td><td>미정</td><td>임대 조건 직접 확인</td></tr>
               </tbody>
-              <tfoot><tr><th scope="row" colspan="2">합계</th><td colspan="2">계산하지 않음 · 확인되지 않은 숫자를 더하지 않습니다</td></tr></tfoot>
+              <tfoot><tr><th scope="row" colspan="2">합계</th><td colspan="2">계산하지 않습니다. 확인되지 않은 숫자는 더하지 않습니다.</td></tr></tfoot>
             </table>
           </div>
           <p class="cost-warning">평균 매출, 예상 수익, 회수 기간과 최저 비용은 근거 자료가 없어 제공하지 않습니다.</p>
@@ -219,8 +213,7 @@
       <section class="section inquiry-section" id="inquiry" aria-labelledby="inquiry-heading">
         <div class="wrap inquiry-layout">
           <div class="inquiry-intro">
-            <p class="section-kicker">조건 정리</p>
-            <h2 id="inquiry-heading">연락처 없이도<br />조건부터 정리하기.</h2>
+            <h2 id="inquiry-heading">연락처 없이 세 단계로 조건만 정리해 봅니다.</h2>
             <p>실제 이름과 연락처를 받지 않습니다. 가상의 운영 조건을 입력하면 어떤 항목을 확인해야 하는지 순서대로 살펴볼 수 있습니다.</p>
             <div class="privacy-note" role="note">
               <strong>실제 개인정보를 입력하지 마세요.</strong>
@@ -330,7 +323,6 @@
 
             <section class="inquiry-success" id="inquiry-success" hidden aria-labelledby="success-heading" tabindex="-1">
               <span class="success-mark" aria-hidden="true">✓</span>
-              <p class="section-kicker">조건 확인 완료</p>
               <h3 id="success-heading">입력한 조건을 확인했습니다.</h3>
               <p>입력한 내용은 전송되거나 보관되지 않으며, 상담 신청은 이루어지지 않습니다.</p>
               <div class="success-actions"><button class="button button-ghost" type="button" id="review-again">입력 내용 다시 보기</button><button class="button button-primary" type="button" id="restart-form">처음부터 보기</button></div>
@@ -341,18 +333,29 @@
 
       <section class="franchise-close" aria-labelledby="close-heading">
         <div class="wrap close-row">
-          <div class="close-heading-copy"><p class="section-kicker">철판클럽</p><h2 id="close-heading">숫자를 꾸미지 않아야<br />조건을 제대로 볼 수 있습니다.</h2></div>
-          <a class="button button-light" href="../">소비자 홈으로 돌아가기</a>
+          <div class="close-heading-copy"><h2 id="close-heading">메뉴 여섯 가지와 매장 세 곳은 홈에서 확인합니다.</h2></div>
+          <a class="button button-light" href="../">철판클럽 홈으로 돌아가기</a>
         </div>
       </section>
     </main>
 
     <footer class="site-foot">
-      <div class="wrap foot-grid franchise-foot-grid">
-        <div><a class="brand brand-foot" href="../"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span><span>철판클럽</span></a><p>눌러 굽고, 바로 건넨다.</p></div>
-        <div><strong>가맹 안내</strong><a href="#model">운영 방식</a><a href="#site-fit">상권과 점포</a><a href="#process">개설 절차</a><a href="#cost">비용 항목</a></div>
-        <div class="foot-truth"><strong>가상 브랜드 안내</strong><p>실제 가맹 모집, 수익 안내, 계약과 상담 신청을 제공하지 않습니다.</p><p class="mono">GRIDDLE CLUB · 2026</p></div>
+      <div class="wrap foot-grid">
+        <div class="foot-brand">
+          <a class="brand brand-foot" href="../"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span><span>철판클럽</span></a>
+          <p>성수, 연남, 문래의 스매시 버거.</p>
+        </div>
+        <div><strong>가맹 안내</strong><a href="#model">운영 방식</a><a href="#site-fit">상권과 점포</a><a href="#process">개설 절차</a><a href="#cost">비용 항목</a><a href="#inquiry">조건 정리</a></div>
+        <div><strong>홈</strong><a href="../#menu">메뉴</a><a href="../#builder">조합하기</a><a href="../#stores">매장 찾기</a></div>
+        <div class="foot-truth"><strong>가상 브랜드 안내</strong><p>실제 가맹 모집, 수익 안내, 계약과 상담 신청을 제공하지 않습니다.</p><p class="foot-mark">GRIDDLE CLUB 2026</p></div>
       </div>
     </footer>
+
+    <nav class="action-bar" aria-label="빠른 이동">
+      <a href="#site-fit">상권</a>
+      <a class="action-bar-primary" href="#inquiry">조건 정리</a>
+      <a href="#cost">비용</a>
+      <a href="../">홈</a>
+    </nav>
   </body>
 </html>

apps/site/public/work/griddle-club/index.html

@@ -3,52 +3,44 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <title>철판클럽 — 눌러 굽고, 바로 건넨다</title>
+    <title>철판클럽 — 주문 뒤에 눌러 굽는 스매시 버거</title>
     <meta
       name="description"
-      content="가상 버거 브랜드 철판클럽에서 메뉴를 고르고 버거를 조합하며, 가상 매장의 이용 방식과 운영 콘셉트를 살펴보세요. 실제 주문과 결제는 제공하지 않습니다."
+      content="가상 버거 브랜드 철판클럽. 주문 뒤에 패티를 눌러 굽는 스매시 버거 메뉴를 보고 재료를 조합하며, 가상 매장의 영업 상태를 확인합니다. 실제 주문과 결제는 제공하지 않습니다."
     />
-    <meta property="og:title" content="철판클럽 — 눌러 굽고, 바로 건넨다" />
+    <meta property="og:title" content="철판클럽 — 주문 뒤에 눌러 굽는 스매시 버거" />
     <meta
       property="og:description"
-      content="메뉴를 고르고 재료를 조합하며, 가상 매장의 운영 방식을 살펴보는 버거 브랜드 콘셉트."
+      content="메뉴 6가지, 단품 6,900원부터. 재료를 바꾸면 가격과 알레르기 정보가 바로 바뀌는 가상 버거 브랜드."
     />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="./og.png" />
-    <meta property="og:image:alt" content="철판 주방에서 포장한 버거를 건네는 장면" />
+    <meta property="og:image:alt" content="크림색 바탕 위에 버거 사진 조각이 겹친 철판클럽 첫 화면" />
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="철판클럽 — 눌러 굽고, 바로 건넨다" />
-    <meta
-      name="twitter:description"
-      content="메뉴를 고르고 재료를 조합해 보는 가상 버거 브랜드 철판클럽."
-    />
+    <meta name="twitter:title" content="철판클럽 — 주문 뒤에 눌러 굽는 스매시 버거" />
+    <meta name="twitter:description" content="메뉴 6가지, 단품 6,900원부터. 가상 버거 브랜드 철판클럽." />
     <meta name="twitter:image" content="./og.png" />
-    <meta name="theme-color" content="#f4f1e9" />
-    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+    <meta name="theme-color" content="#fbe9c8" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
+      href="https://fonts.googleapis.com/css2?family=Jua&family=Gothic+A1:wght@500;700;800&display=swap"
     />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap"
-    />
-    <link rel="stylesheet" href="./styles/tokens.css?v=20260912all" />
-    <link rel="stylesheet" href="./styles/site.css?v=20260912all" />
+    <link rel="stylesheet" href="./styles/tokens.css?v=20261006" />
+    <link rel="stylesheet" href="./styles/site.css?v=20261006" />
     <link
       rel="icon"
-      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%232147e7'/%3E%3Cpath d='M6 9h20M8 16h16M10 23h12' stroke='%23fffdf8' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%232147e7'/%3E%3Cpath d='M8 12h16M10 17h12M12 22h8' stroke='%23fbe9c8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"
     />
     <script>document.documentElement.classList.add("is-js");</script>
-    <script src="./scripts/site.js?v=2" defer></script>
+    <script src="./scripts/site.js?v=3" defer></script>
   </head>
   <body>
     <a class="skip-link" href="#main">본문으로 건너뛰기</a>
 
     <div class="truth-bar" role="note">
-      <p>가상 브랜드 안내 · 가격과 매장 정보는 실제 판매 정보가 아닙니다.</p>
+      <p>가상 브랜드입니다. 가격과 매장은 실제 정보가 아닙니다.</p>
     </div>
 
     <header class="site-head" id="top">
@@ -63,72 +55,95 @@
           <a href="#stores">매장 찾기</a>
           <a href="./franchise/">가맹 안내</a>
         </nav>
-        <a class="head-action" href="#stores">가까운 매장 보기</a>
+        <a class="head-action" href="#builder">내 버거 조합하기</a>
       </div>
     </header>
 
     <main id="main">
       <section class="hero" aria-labelledby="hero-heading">
         <div class="hero-copy">
-          <p class="section-kicker">서울 도심 눌림 버거</p>
-          <h1 id="hero-heading">눌러 굽고,<span class="hero-wide-space" aria-hidden="true"> </span><br />바로 건넨다.</h1>
+          <h1 id="hero-heading">주문 뒤 눌러 굽고,<br />바로 건넵니다.</h1>
           <p class="hero-lead">
-            얇게 눌러 가장자리는 바삭하게. 주문 뒤 조립하고 포장해, 퇴근길 한 상자로 건넵니다.
+            주문을 받은 뒤에 얇은 패티를 뜨거운 철판에 눌러 가장자리까지 바삭하게 굽고, 치즈와 구운 양파를 올려 그 자리에서 포장합니다. 단품 6,900원부터.
           </p>
           <div class="hero-actions">
             <a class="button button-primary" href="#menu">오늘 메뉴 보기</a>
-            <a class="text-link" href="#builder">내 버거 조합하기 <span aria-hidden="true">→</span></a>
+            <a class="button button-ghost" href="#builder">내 버거 조합하기</a>
           </div>
-          <dl class="hero-facts">
-            <div><dt>굽기</dt><dd>얇은 패티를 주문 뒤 눌러 굽기</dd></div>
-            <div><dt>받기</dt><dd>포장과 배달 가능 여부를 매장별 표시</dd></div>
-          </dl>
         </div>
-        <figure class="hero-media image-shell">
-          <picture>
-            <source media="(max-width: 820px)" srcset="./assets/hero-handoff-mobile.webp" />
+        <div class="hero-media" aria-label="메뉴 사진 조각" role="group">
+          <figure class="piece piece-main image-shell" style="--i: 0">
+            <picture>
+              <source media="(max-width: 820px)" srcset="./assets/hero-handoff-mobile.webp" />
+              <img
+                src="./assets/hero-handoff.webp"
+                width="1600"
+                height="900"
+                alt="철판 주방에서 직원이 유산지에 싼 철판 더블을 파란 쟁반에 올려 건네는 모습"
+                fetchpriority="high"
+              />
+            </picture>
+            <span class="image-fallback" aria-hidden="true">버거 건네는 장면</span>
+          </figure>
+          <figure class="piece piece-press image-shell" style="--i: 1">
             <img
-              src="./assets/hero-handoff.webp"
-              width="1600"
-              height="900"
-              alt="밝은 철판 주방에서 직원이 포장한 버거를 건네는 모습"
-              fetchpriority="high"
+              src="./assets/griddle-press.webp"
+              width="1400"
+              height="933"
+              alt="조리사가 철판 위에서 패티를 프레스로 눌러 굽는 모습"
+              loading="eager"
             />
-          </picture>
-          <span class="image-fallback" aria-hidden="true">버거 포장 장면</span>
-          <figcaption>
-            <span>철판에서 상자까지</span>
-            <span>생성 이미지 · 실제 매장 아님</span>
-          </figcaption>
-        </figure>
-        <aside class="hero-order" aria-label="오늘 고르기">
-          <span class="order-index">01</span>
-          <p>철판 더블</p>
-          <strong>예시 단품 8,900원</strong>
-          <button type="button" data-preset="double">이 조합으로 시작</button>
-        </aside>
+            <span class="image-fallback" aria-hidden="true">철판 조리 장면</span>
+          </figure>
+          <figure class="piece piece-single image-shell" style="--i: 2">
+            <img
+              src="./assets/single-smash-generated.webp"
+              width="960"
+              height="720"
+              alt="치즈와 피클을 넣은 철판 싱글"
+              loading="eager"
+            />
+            <span class="image-fallback" aria-hidden="true">철판 싱글 사진</span>
+          </figure>
+          <p class="piece piece-tag" style="--i: 3"><span>철판 더블</span><strong>8,900원</strong></p>
+          <p class="piece piece-sticker" style="--i: 4">주문 뒤 조리</p>
+          <p class="piece piece-note" style="--i: 5">생성 이미지, 실제 매장이 아닙니다</p>
+        </div>
       </section>
 
-      <section class="service-strip" aria-label="이용 방식">
-        <div class="wrap service-row">
-          <p><span aria-hidden="true">●</span> 주문 뒤 조리</p>
-          <p>단품과 세트</p>
-          <p>포장 여부 매장별 확인</p>
-          <p>배달 여부 매장별 확인</p>
-          <p class="mono">GRIDDLE CLUB</p>
+      <section class="marquee" aria-label="오늘 메뉴와 가격">
+        <button type="button" class="marquee-toggle" id="marquee-toggle" aria-pressed="false">흐름 멈춤</button>
+        <div class="marquee-scroll" role="region" aria-label="메뉴와 가격 목록, 가로로 넘길 수 있음" tabindex="0">
+          <div class="marquee-track" id="marquee-track">
+            <ul class="marquee-list">
+              <li>철판 더블 8,900원</li>
+              <li>철판 싱글 6,900원</li>
+              <li>고추 피클 더블 9,400원</li>
+              <li>얇은 감자 3,600원</li>
+              <li>양파 한 컵 2,800원</li>
+              <li>탄산 한 잔 2,400원</li>
+              <li>주문 뒤 조리</li>
+              <li>포장과 배달은 매장별 확인</li>
+            </ul>
+            <ul class="marquee-list" aria-hidden="true">
+              <li>철판 더블 8,900원</li>
+              <li>철판 싱글 6,900원</li>
+              <li>고추 피클 더블 9,400원</li>
+              <li>얇은 감자 3,600원</li>
+              <li>양파 한 컵 2,800원</li>
+              <li>탄산 한 잔 2,400원</li>
+              <li>주문 뒤 조리</li>
+              <li>포장과 배달은 매장별 확인</li>
+            </ul>
+          </div>
         </div>
       </section>
 
       <section class="section menu-section" id="menu" aria-labelledby="menu-heading">
         <div class="wrap">
           <div class="section-head split-head">
-            <div>
-              <p class="section-kicker">오늘 고를 메뉴</p>
-              <h2 id="menu-heading">메뉴를 고르고<br />내 버거를 조합해 보세요.</h2>
-            </div>
-            <p class="section-note">
-              표시된 메뉴와 가격은 브랜드 콘셉트를 설명하기 위한 값입니다. 이 페이지에서는 실제 판매와 주문을 제공하지 않습니다.
-            </p>
+            <h2 id="menu-heading">단품 6,900원부터, 메뉴는 여섯 가지.</h2>
+            <p class="section-note">세트는 감자와 음료를 더해 4,100원이 추가됩니다. 조합하기를 누르면 아래 조합기에 바로 담깁니다.</p>
           </div>
 
           <div class="menu-toolbar" role="group" aria-label="메뉴 분류">
@@ -145,7 +160,7 @@
                   src="./assets/signature-double.webp"
                   width="1400"
                   height="933"
-                  alt="철판 패티 두 장과 치즈, 구운 양파를 넣은 버거"
+                  alt="철판 패티 두 장과 치즈, 구운 양파를 넣은 철판 더블"
                   loading="lazy"
                 />
                 <span class="image-fallback" aria-hidden="true">철판 더블 사진</span>
@@ -155,42 +170,31 @@
                 <div><p class="menu-state">대표 메뉴</p><h3>철판 더블</h3></div>
                 <p>얇은 패티 두 장, 치즈, 구운 양파, 피클, 집 소스.</p>
                 <div class="menu-foot">
-                  <span><small>예시 단품</small> 8,900원</span>
+                  <span><small>단품</small> 8,900원</span>
                   <button type="button" data-preset="double">조합하기</button>
                 </div>
               </div>
             </article>
 
             <article class="menu-item menu-item-graphic" data-menu-category="burger">
-              <div class="menu-photo image-shell">
-                <img
-                  src="./assets/single-smash-generated.webp"
-                  width="960"
-                  height="720"
-                  alt="코발트색 트레이 위에 치즈와 피클을 넣은 싱글 스매시 버거"
-                  loading="lazy"
-                />
-                <span class="image-fallback" aria-hidden="true">철판 싱글 사진</span>
-                <span class="menu-number">02</span>
-                <span class="menu-image-note">생성 이미지</span>
-              </div>
+              <div class="menu-poster menu-poster-cream" aria-hidden="true"><span>02</span><b>싱글</b></div>
               <div class="menu-body">
                 <div><p class="menu-state">가볍게</p><h3>철판 싱글</h3></div>
                 <p>패티 한 장, 치즈, 피클, 집 소스. 단품으로 빠르게.</p>
                 <div class="menu-foot">
-                  <span><small>예시 단품</small> 6,900원</span>
+                  <span><small>단품</small> 6,900원</span>
                   <button type="button" data-preset="single">조합하기</button>
                 </div>
               </div>
             </article>
 
             <article class="menu-item menu-item-blue" data-menu-category="burger">
-              <div class="menu-poster" aria-hidden="true"><span>03</span><i></i><i></i><i></i></div>
+              <div class="menu-poster" aria-hidden="true"><span>03</span><b>매운맛</b></div>
               <div class="menu-body">
                 <div><p class="menu-state">매운 피클</p><h3>고추 피클 더블</h3></div>
-                <p>고추 피클과 매운 소스를 더한 더블. 맵기는 예시입니다.</p>
+                <p>고추 피클과 매운 소스를 더한 더블. 맵기는 세 단계 중 둘째.</p>
                 <div class="menu-foot">
-                  <span><small>예시 단품</small> 9,400원</span>
+                  <span><small>단품</small> 9,400원</span>
                   <button type="button" data-preset="spicy">조합하기</button>
                 </div>
               </div>
@@ -200,7 +204,7 @@
               <div class="menu-body">
                 <div><p class="menu-state">곁들임</p><h3>얇은 감자</h3></div>
                 <p>가늘게 튀겨 소금으로 마무리합니다.</p>
-                <div class="menu-foot"><span><small>예시 가격</small> 3,600원</span></div>
+                <div class="menu-foot"><span>3,600원</span></div>
               </div>
             </article>
 
@@ -208,7 +212,7 @@
               <div class="menu-body">
                 <div><p class="menu-state">곁들임</p><h3>양파 한 컵</h3></div>
                 <p>철판에서 단맛을 낸 양파를 따로 담습니다.</p>
-                <div class="menu-foot"><span><small>예시 가격</small> 2,800원</span></div>
+                <div class="menu-foot"><span>2,800원</span></div>
               </div>
             </article>
 
@@ -216,12 +220,12 @@
               <div class="menu-body">
                 <div><p class="menu-state">음료</p><h3>탄산 한 잔</h3></div>
                 <p>매장에서 고른 음료 한 잔. 제품별 성분을 확인해 주세요.</p>
-                <div class="menu-foot"><span><small>예시 가격</small> 2,400원</span></div>
+                <div class="menu-foot"><span>2,400원</span></div>
               </div>
             </article>
           </div>
           <div class="empty-state" id="menu-empty" hidden role="status">
-            <strong>이 분류에 준비된 예시 메뉴가 없어요.</strong>
+            <strong>이 분류에 준비된 메뉴가 없어요.</strong>
             <button type="button" data-show-all-menu>모든 메뉴 보기</button>
           </div>
         </div>
@@ -230,11 +234,8 @@
       <section class="section builder-section" id="builder" aria-labelledby="builder-heading">
         <div class="wrap">
           <div class="section-head split-head">
-            <div>
-              <p class="section-kicker">버거 조합기</p>
-              <h2 id="builder-heading">내 버거 조합을<br />바꿔 보세요.</h2>
-            </div>
-            <p class="section-note">아래 구성은 메뉴를 살펴보기 위한 예시입니다. 재료를 바꾸면 오른쪽 안내 카드와 예시 가격이 함께 바뀝니다.</p>
+            <h2 id="builder-heading">재료를 바꾸면 가격과 알레르기 정보가 바로 바뀝니다.</h2>
+            <p class="section-note">맛, 패티 수, 치즈, 양파와 피클, 단품과 세트, 받을 매장 순서로 고릅니다. 오른쪽 영수증에 결과가 모입니다.</p>
           </div>
 
           <div class="builder-layout">
@@ -296,44 +297,32 @@
               </fieldset>
 
               <fieldset>
-                <legend><span>05</span> 확인할 가상 매장</legend>
+                <legend><span>05</span> 받을 매장</legend>
                 <label class="field-label" for="builder-store">매장</label>
                 <select id="builder-store" name="store">
-                  <option value="seongsu">성수점 · 영업 중</option>
-                  <option value="yeonnam">연남점 · 영업 종료</option>
-                  <option value="mullae">문래점 · 오늘 휴무</option>
+                  <option value="seongsu">성수점 (영업 중)</option>
+                  <option value="yeonnam">연남점 (영업 종료)</option>
+                  <option value="mullae">문래점 (오늘 휴무)</option>
                 </select>
-                <p class="field-help">아래 매장과 운영 상태는 실제 방문·주문 정보가 아닙니다.</p>
               </fieldset>
             </form>
 
             <aside class="builder-summary" aria-labelledby="summary-heading">
-              <div class="summary-photo image-shell">
-                <img
-                  src="./assets/signature-double.webp"
-                  width="1400"
-                  height="933"
-                  alt="조합 결과를 설명하는 철판 더블 버거"
-                  loading="lazy"
-                />
-                <span class="image-fallback" aria-hidden="true">조합 버거 사진</span>
-                <span class="summary-stamp">가상 메뉴</span>
-              </div>
               <div class="summary-body">
-                <p class="section-kicker">선택 결과</p>
+                <span class="summary-tag">내 조합</span>
                 <h3 id="summary-heading">철판 더블</h3>
                 <p id="summary-lines">패티 두 장 / 치즈 한 장 / 양파 기본 / 피클 기본 / 소스 기본</p>
                 <dl class="summary-list">
                   <div><dt>받기</dt><dd id="summary-serving">단품</dd></div>
-                  <div><dt>가상 매장</dt><dd id="summary-store">성수점</dd></div>
+                  <div><dt>매장</dt><dd id="summary-store">성수점</dd></div>
                   <div><dt>상태</dt><dd id="summary-store-state">영업 중</dd></div>
                 </dl>
                 <div class="allergen-note" id="allergen-note">
-                  <strong>알레르기 예시</strong>
+                  <strong>알레르기 정보</strong>
                   <p id="summary-allergens">알, 우유, 대두, 밀, 쇠고기</p>
                   <small>같은 철판과 조리 도구를 함께 씁니다. 재료를 빼도 알레르기 안전을 보장하지 않습니다.</small>
                 </div>
-                <div class="summary-total"><span>예시 총액</span><strong id="summary-total">8,900원</strong></div>
+                <div class="summary-total"><span>총액</span><strong id="summary-total">8,900원</strong></div>
                 <p class="truth-inline">이 페이지는 메뉴 조합을 살펴보는 안내 페이지이며, 주문과 결제는 진행되지 않습니다.</p>
                 <a class="button button-primary button-full" href="#stores" id="check-store-link">가상 매장 안내 보기</a>
               </div>
@@ -345,24 +334,23 @@
       <section class="section process-section" id="process" aria-labelledby="process-heading">
         <div class="wrap process-grid">
           <div class="process-copy">
-            <p class="section-kicker">철판에서 상자까지</p>
-            <h2 id="process-heading">빠르다는 말 대신,<br />순서를 보여 줍니다.</h2>
+            <h2 id="process-heading">굽고, 쌓고,<br />상자에 담습니다.</h2>
             <ol class="process-list">
-              <li><span>01</span><div><strong>누르기</strong><p>얇은 패티를 뜨거운 철판에 눌러 가장자리를 만듭니다.</p></div></li>
-              <li><span>02</span><div><strong>겹치기</strong><p>치즈, 구운 양파, 피클을 고른 순서대로 올립니다.</p></div></li>
-              <li><span>03</span><div><strong>건네기</strong><p>유산지와 상자에 담고 포장 상태를 확인합니다.</p></div></li>
+              <li><span>01</span><div><strong>굽기</strong><p>얇은 패티를 뜨거운 철판에 눌러 가장자리를 바삭하게 굽습니다.</p></div></li>
+              <li><span>02</span><div><strong>쌓기</strong><p>치즈, 구운 양파, 피클을 고른 순서대로 올립니다.</p></div></li>
+              <li><span>03</span><div><strong>포장하기</strong><p>유산지와 상자에 담고 포장 상태를 확인합니다.</p></div></li>
             </ol>
           </div>
           <figure class="process-media image-shell">
             <img
-              src="./assets/griddle-press.webp"
+              src="./assets/kitchen-flow.webp"
               width="1400"
               height="933"
-              alt="조리사가 철판에서 패티를 눌러 굽고 양파를 익히는 모습"
+              alt="좁고 밝은 주방에서 한 사람은 철판에서 굽고 다른 사람은 포장대에서 상자에 담는 모습"
               loading="lazy"
             />
-            <span class="image-fallback" aria-hidden="true">철판 조리 장면</span>
-            <figcaption>생성 이미지 · 실제 조리 시설 아님</figcaption>
+            <span class="image-fallback" aria-hidden="true">주방 동선 장면</span>
+            <figcaption>생성 이미지, 실제 조리 시설이 아닙니다</figcaption>
           </figure>
         </div>
       </section>
@@ -370,13 +358,13 @@
       <section class="section stores-section" id="stores" aria-labelledby="stores-heading">
         <div class="wrap">
           <div class="section-head split-head">
-            <div><p class="section-kicker">가상 매장 안내</p><h2 id="stores-heading">매장별 이용 방식은<br />이렇게 안내합니다.</h2></div>
-            <p class="section-note">주소, 전화, 거리와 운영 상태를 임의로 만들지 않습니다. 아래 세 곳은 브랜드 콘셉트를 설명하는 가상 매장입니다.</p>
+            <h2 id="stores-heading">매장 세 곳의 영업 상태와 포장, 배달 가능 여부입니다.</h2>
+            <p class="section-note">성수, 연남, 문래 세 곳은 가상 매장이라 상세 주소와 전화번호를 적지 않았습니다.</p>
           </div>
 
           <div class="store-tools">
             <div class="search-box">
-              <input id="store-search" type="search" placeholder="동네 또는 매장명 검색" autocomplete="off" aria-label="가상 매장 검색" />
+              <input id="store-search" type="search" placeholder="동네 또는 매장명 검색" autocomplete="off" aria-label="매장 검색" />
               <button type="button" id="clear-store-search" hidden>지우기</button>
             </div>
             <div class="region-filters" role="group" aria-label="지역 고르기">
@@ -390,34 +378,34 @@
           <div class="store-layout">
             <div class="store-list" id="store-list">
               <article class="store-card is-selected" data-store="seongsu" data-region="성동" data-search="성수점 성동 성수동" tabindex="-1">
-                <div class="store-card-top"><span class="store-state state-open">영업 중</span><span>가상 매장</span></div>
+                <div class="store-card-top"><span class="store-state state-open">영업 중</span><span>성동</span></div>
                 <h3>성수점</h3>
-                <p>서울 성동구 성수동 일대 · 상세 주소 없음</p>
+                <p>서울 성동구 성수동 일대, 상세 주소 없음</p>
                 <dl><div><dt>운영</dt><dd>11:00–21:30</dd></div><div><dt>마지막 주문</dt><dd>21:00</dd></div></dl>
                 <ul aria-label="이용 방식"><li>포장 가능</li><li>배달 가능</li></ul>
                 <button type="button" data-select-store="seongsu">성수점으로 조합 보기</button>
               </article>
 
               <article class="store-card" data-store="yeonnam" data-region="마포" data-search="연남점 마포 연남동" tabindex="-1">
-                <div class="store-card-top"><span class="store-state state-closed">영업 종료</span><span>가상 매장</span></div>
+                <div class="store-card-top"><span class="store-state state-closed">영업 종료</span><span>마포</span></div>
                 <h3>연남점</h3>
-                <p>서울 마포구 연남동 일대 · 상세 주소 없음</p>
+                <p>서울 마포구 연남동 일대, 상세 주소 없음</p>
                 <dl><div><dt>운영</dt><dd>11:30–20:30</dd></div><div><dt>마지막 주문</dt><dd>오늘 마감</dd></div></dl>
                 <ul aria-label="이용 방식"><li>포장 마감</li><li>배달 마감</li></ul>
                 <button type="button" data-select-store="yeonnam">연남점으로 조합 보기</button>
               </article>
 
               <article class="store-card" data-store="mullae" data-region="영등포" data-search="문래점 영등포 문래동" tabindex="-1">
-                <div class="store-card-top"><span class="store-state state-pause">오늘 휴무</span><span>가상 매장</span></div>
+                <div class="store-card-top"><span class="store-state state-pause">오늘 휴무</span><span>영등포</span></div>
                 <h3>문래점</h3>
-                <p>서울 영등포구 문래동 일대 · 상세 주소 없음</p>
+                <p>서울 영등포구 문래동 일대, 상세 주소 없음</p>
                 <dl><div><dt>운영</dt><dd>임시 휴무</dd></div><div><dt>다음 확인</dt><dd>매장별 안내 필요</dd></div></dl>
                 <ul aria-label="이용 방식"><li>포장 불가</li><li>배달 불가</li></ul>
                 <button type="button" data-select-store="mullae">문래점으로 조합 보기</button>
               </article>
             </div>
 
-            <aside class="store-map" aria-label="가상 매장 분포 그림">
+            <aside class="store-map" aria-label="매장 분포 그림">
               <div class="map-grid" aria-hidden="true"></div>
               <span class="map-river" aria-hidden="true"></span>
               <button type="button" class="map-pin pin-seongsu is-active" data-map-store="seongsu" aria-label="성수점 고르기"><span>성수</span></button>
@@ -428,7 +416,7 @@
           </div>
 
           <div class="empty-state store-empty" id="store-empty" hidden role="status">
-            <strong>찾는 조건과 맞는 가상 매장이 없어요.</strong>
+            <strong>찾는 조건과 맞는 매장이 없어요.</strong>
             <p>검색어와 지역 조건을 지우고 다시 확인해 주세요.</p>
             <button type="button" id="reset-store-search">검색 조건 지우기</button>
           </div>
@@ -436,33 +424,33 @@
       </section>
 
       <section class="franchise-callout" aria-labelledby="franchise-heading">
-        <figure class="franchise-image image-shell">
-          <img
-            src="./assets/kitchen-flow.webp"
-            width="1400"
-            height="933"
-            alt="좁고 밝은 주방에서 두 직원이 철판 조리와 포장을 나누어 맡는 모습"
-            loading="lazy"
-          />
-          <span class="image-fallback" aria-hidden="true">주방 운영 동선 장면</span>
-        </figure>
-        <div class="franchise-copy">
-          <p class="section-kicker">가맹을 생각한다면</p>
-          <h2 id="franchise-heading">매출 약속보다<br />운영 조건부터.</h2>
-          <p>상권, 점포, 면적, 조리 동선과 비용 미정 항목을 먼저 확인할 수 있게 분리했습니다.</p>
-          <a class="button button-light" href="./franchise/">가맹 운영 조건 보기 <span aria-hidden="true">→</span></a>
-          <small>실제 가맹 모집과 상담을 제공하지 않습니다.</small>
+        <div class="wrap franchise-row">
+          <div class="franchise-copy">
+            <h2 id="franchise-heading">가맹 안내는 금액보다 상권, 점포, 주방 동선부터 보여 드립니다.</h2>
+            <p>비용 미정 항목을 먼저 확인할 수 있게 홈과 분리했습니다. 실제 가맹 모집과 상담은 제공하지 않습니다.</p>
+          </div>
+          <a class="button button-light" href="./franchise/">가맹 운영 조건 보기</a>
         </div>
       </section>
     </main>
 
     <footer class="site-foot">
       <div class="wrap foot-grid">
-        <div><a class="brand brand-foot" href="#top"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span><span>철판클럽</span></a><p>눌러 굽고, 바로 건넨다.</p></div>
-        <div><strong>살펴보기</strong><a href="#menu">메뉴</a><a href="#builder">조합하기</a><a href="#stores">가상 매장 안내</a><a href="./franchise/">가맹 안내</a></div>
-        <div><strong>정보 안내</strong><p>알레르기 정보도 예시입니다.</p><p>원산지와 영양 정보는 실제 제품 자료가 아닙니다.</p></div>
-        <div class="foot-truth"><strong>가상 브랜드 안내</strong><p>실제 주문, 결제, 매장 방문, 가맹 문의를 제공하지 않습니다.</p><p class="mono">GRIDDLE CLUB · 2026</p></div>
+        <div class="foot-brand">
+          <a class="brand brand-foot" href="#top"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span><span>철판클럽</span></a>
+          <p>성수, 연남, 문래의 스매시 버거.</p>
+        </div>
+        <div><strong>살펴보기</strong><a href="#menu">메뉴</a><a href="#builder">조합하기</a><a href="#stores">매장 찾기</a><a href="./franchise/">가맹 안내</a></div>
+        <div><strong>매장</strong><a href="#stores">성수점, 영업 중</a><a href="#stores">연남점, 영업 종료</a><a href="#stores">문래점, 오늘 휴무</a></div>
+        <div class="foot-truth"><strong>가상 브랜드 안내</strong><p>메뉴, 가격, 매장, 알레르기, 원산지 정보는 예시입니다. 실제 주문, 결제, 매장 방문, 가맹 문의를 제공하지 않습니다.</p><p class="foot-mark">GRIDDLE CLUB 2026</p></div>
       </div>
     </footer>
+
+    <nav class="action-bar" aria-label="빠른 이동">
+      <a href="#menu">메뉴</a>
+      <a class="action-bar-primary" href="#builder">조합하기</a>
+      <a href="#stores">매장</a>
+      <a href="./franchise/">가맹</a>
+    </nav>
   </body>
 </html>

apps/site/public/work/griddle-club/scripts/franchise.js

@@ -140,7 +140,7 @@
       return;
     }
     const pyeong = Math.round((squareMeters / 3.3058) * 10) / 10;
-    areaOutput.textContent = `${squareMeters.toLocaleString("ko-KR")}㎡ · 약 ${pyeong.toLocaleString("ko-KR")}평`;
+    areaOutput.textContent = `${squareMeters.toLocaleString("ko-KR")}㎡, 약 ${pyeong.toLocaleString("ko-KR")}평`;
   };
 
   const validateStepTwo = () => {
@@ -172,7 +172,7 @@
   const reviewValues = () => {
     const squareMeters = Number(getInputValue("exclusiveArea"));
     const areaLabel = requiresArea() && squareMeters > 0
-      ? `${squareMeters.toLocaleString("ko-KR")}㎡ · 약 ${(Math.round((squareMeters / 3.3058) * 10) / 10).toLocaleString("ko-KR")}평`
+      ? `${squareMeters.toLocaleString("ko-KR")}㎡, 약 ${(Math.round((squareMeters / 3.3058) * 10) / 10).toLocaleString("ko-KR")}평`
       : "해당 없음";
     const values = {
       demoName: getInputValue("demoName"),

apps/site/public/work/griddle-club/scripts/site.js

@@ -115,7 +115,7 @@
     const flavorLabel = flavor === "spicy" ? "고추 피클" : "철판";
     const cheeseLabel = Number(cheese) === 0 ? "치즈 없음" : `치즈 ${cheese === "2" ? "두" : "한"} 장`;
     const productName = `${flavorLabel} ${pattyLabel}`;
-    const servingLabel = serving === "set" ? "세트 · 얇은 감자와 음료" : "단품";
+    const servingLabel = serving === "set" ? "세트, 얇은 감자와 음료" : "단품";
 
     if (summaryHeading) summaryHeading.textContent = productName;
     if (summaryLines) {
@@ -229,6 +229,25 @@
     storeSearch?.focus();
   });
 
+  // 마퀴 — 5초 넘게 움직이므로 정지 수단을 둔다(WCAG 2.2.2). 감소 모션이면 CSS가 정지 목록으로
+  // 바꾸고 버튼을 숨긴다. 설정이 도중에 바뀌어도 새로고침 없이 상태만 맞춘다.
+  const marquee = document.querySelector(".marquee");
+  const marqueeToggle = document.querySelector("#marquee-toggle");
+  const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const syncMarquee = () => {
+    if (!marquee || !marqueeToggle) return;
+    const paused = motionQuery.matches || marqueeToggle.getAttribute("aria-pressed") === "true";
+    marquee.classList.toggle("is-paused", paused);
+    marqueeToggle.textContent = paused ? "흐름 재생" : "흐름 멈춤";
+  };
+  marqueeToggle?.addEventListener("click", () => {
+    const pressed = marqueeToggle.getAttribute("aria-pressed") === "true";
+    marqueeToggle.setAttribute("aria-pressed", String(!pressed));
+    syncMarquee();
+  });
+  motionQuery.addEventListener("change", syncMarquee);
+  syncMarquee();
+
   updateBuilder();
   filterStores();
 })();

apps/site/public/work/griddle-club/styles/tokens.css

@@ -1,32 +1,76 @@
+/* 철판클럽 토큰 — 2026-10-06 재작업(outputs/rework-2026-10-06/plan.md 배정값).
+   색·서체·radius·모션 값은 이 파일에만 둔다. site.css·franchise.css는 var()만 쓴다. */
 :root {
   color-scheme: light;
-  --paper: #f4f1e9;
-  --paper-bright: #fffdf8;
-  --ink: #211f1c;
-  --ink-soft: #56514a;
-  --ink-faint: #625d56;
-  --line: #c9c2b7;
-  --line-strong: #8a8379;
+
+  /* 바탕 — 유채 크림. 쟁반 위 유산지의 색이다. 섹션 교대는 밝은 크림(surface)과 진한 크림(bg-deep)으로만 한다 */
+  --bg: #fbe9c8;
+  --bg-deep: #f4d9a3;
+  --surface: #fff7e8;
+  --surface-rgb: 255 247 232;
+
+  /* 먹 — 따뜻한 갈색 먹. 패티 가장자리의 색. 크림 위 대비 14.3:1 */
+  --ink: #26190f;
+  --ink-soft: #5c4a39; /* 7.0:1 */
+  --ink-faint: #6b5744; /* 5.7:1 — 보조 라벨 하한 */
+  --ink-rgb: 38 25 15;
+  --on-ink: #fbe9c8;
+  --on-ink-soft: #e9d2a8; /* 먹 위 11.6:1 */
+  --on-ink-faint: #c9b79b; /* 먹 위 8.7:1 */
+
+  /* 선 — 크림보다 한 단 진한 모래색 */
+  --line: #e2c99e;
+  --line-strong: #b89a6c;
+
+  /* 강조 — 코발트(유지). 쟁반과 클립의 색. 크림 위 5.6:1, 흰 글자 6.7:1 */
   --blue: #2147e7;
   --blue-dark: #1533ac;
-  --blue-soft: #8ea5ff;
-  --blue-pale: #dce4ff;
-  --steel: #d9dcda;
+  --blue-pale: #dbe3ff;
+  --on-blue: #ffffff;
+  --on-blue-soft: #dbe3ff; /* 코발트 위 5.3:1 */
+
+  /* 치즈 — 스티커 한 장에만 쓴다 */
   --cheese: #ffc642;
-  --danger: #b33124;
-  --success: #17683b;
+  --on-cheese: #26190f; /* 10.9:1 */
+
+  /* 상태 */
+  --danger: #b33124; /* 크림 위 5.2:1 */
+  --success: #17683b; /* 5.7:1 */
+  --pause: #7a5a10; /* 5.3:1 */
   --focus: #2147e7;
-  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
+
+  /* 서체 — 표제 Jua(한 굵기), 본문 Gothic A1. 둘 다 Google Fonts OFL, 한글 슬라이스 서브셋 */
+  --font-display: "Jua", "Gothic A1", "Apple SD Gothic Neo", sans-serif;
+  --font-body: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
+  --weight-body: 500;
+  --weight-strong: 700;
+  --weight-heavy: 800;
+
+  /* 타입 스케일 — 본문 16, 표제는 vw 보간 */
+  --text-xs: 13px;
+  --text-sm: 14px;
+  --text-md: 16px;
+  --text-lg: clamp(17px, 1.4vw, 19px);
+  --text-h3: clamp(24px, 2.2vw, 30px);
+  --text-h2: clamp(36px, 4.4vw, 60px);
+  --text-h1: clamp(46px, 6.2vw, 92px);
+  --leading-body: 1.7;
+  --leading-tight: 1.2;
+  --leading-display: 1.14;
+  --tracking-display: -0.01em;
+
+  /* 폭 */
   --wrap: 1180px;
-  /* 초광폭에서도 히어로와 후속 정보 표면은 같은 폭을 쓰지 않는다. */
+  --measure: 36em;
   --hero-wide: 2160px;
   --stage-wide: 1680px;
   --workbench-wide: 1480px;
-  --copy-wide: 900px;
-  --media-wide: 1120px;
+  --copy-wide: 880px;
+  --media-wide: 1100px;
   --gutter: clamp(18px, 4vw, 52px);
-  --section: clamp(76px, 10vw, 144px);
+  --section: clamp(72px, 9vw, 128px);
+
+  /* 간격 */
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
@@ -35,17 +79,32 @@
   --space-6: 32px;
   --space-7: 48px;
   --space-8: 72px;
-  --radius-sm: 4px;
-  --radius: 10px;
-  --radius-lg: 18px;
-  --shadow: 0 18px 50px rgb(33 31 28 / 10%);
-  --header-height: 78px;
+
+  /* radius — 알약과 16px, 둘뿐이다 */
+  --radius: 16px;
+  --radius-pill: 999px;
+
+  /* 깊이 — 그림자는 콜라주 조각에만 */
+  --shadow-piece: 0 24px 60px rgb(38 25 15 / 18%);
+  --shadow-card: 0 10px 30px rgb(38 25 15 / 10%);
+
+  /* 모션 — 스태거 등장(히어로 조각) + 마퀴. 감소 모션에서는 전부 0 */
+  --dur: 520ms;
+  --dur-fast: 180ms;
+  --stagger: 90ms;
+  --shift: 28px;
+  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --marquee-dur: 32s;
+
+  --header-height: 72px;
+  --action-bar-height: 64px;
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
 }
 
 @media (max-width: 720px) {
   :root {
-    --header-height: 64px;
-    --section: 72px;
+    --header-height: 60px;
+    --section: 64px;
   }
 }
 
@@ -60,3 +119,13 @@
     --wrap: 1400px;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dur: 0.01ms;
+    --dur-fast: 0.01ms;
+    --stagger: 0ms;
+    --shift: 0px;
+    --marquee-dur: 0.01ms;
+  }
+}