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/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();
 })();