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/thursday-flowers/index.html

@@ -2,303 +2,278 @@
 <html lang="ko">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>목요일의 화원 · 플로럴 스튜디오</title>
+    <!-- viewport-fit=cover 가 있어야 하단 행동 바의 env(safe-area-inset-bottom) 이 0이 아니다 -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>목요일의 화원 | 목요일에만 여는 서촌 꽃집</title>
     <meta
       name="description"
-      content="한 주에 한 번, 목요일에만 문을 여는 플로럴 스튜디오. 그 주에 좋은 꽃만 들여 주문받은 만큼만 만듭니다. 서울 서촌."
+      content="매주 목요일 10시부터 19시까지만 여는 서울 서촌의 꽃집. 이번 주 목요일에 들이는 꽃 여섯 가지와 주문 마감(수요일 18시), 격주 정기 구독, 오시는 길."
     />
-    <meta property="og:title" content="목요일의 화원 · 플로럴 스튜디오" />
+    <meta property="og:title" content="목요일의 화원 | 목요일에만 여는 서촌 꽃집" />
     <meta
       property="og:description"
-      content="한 주에 한 번, 목요일에만 문을 여는 플로럴 스튜디오. 서울 서촌."
+      content="이번 주 목요일에 들이는 꽃 여섯 가지. 주문 마감은 수요일 18시, 제작은 최대 20건."
     />
     <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
     <meta property="og:image" content="./assets/flower-01.webp" />
-    <meta name="theme-color" content="#f8f6f0" />
+    <meta name="theme-color" content="#f7ebe9" />
 
     <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
-    <!-- 한글 세리프. 라틴 세리프만 지정하면 한글이 시스템 기본으로 떨어져 전부 무너진다 -->
+    <!--
+      표제: 리디바탕(리디주식회사, SIL OFL 1.1). 배포처 ridicorp.com/ridibatang 은 페처에 403을 내
+      fonts-archive 미러(README에 OFL 전문 인용)의 다이나믹 서브셋 CSS로 싣는다. 패밀리명 "RIDI Batang".
+      본문: Pretendard 가변 다이나믹 서브셋.
+    -->
     <link
       rel="stylesheet"
-      href="./styles/fonts.css?v=20260912all"
+      href="https://cdn.jsdelivr.net/gh/fonts-archive/RIDIBatang/subsets/RIDIBatang-dynamic-subset.css"
     />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css"
+    />
+    <link rel="stylesheet" href="./styles/main.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%3Cpath d='M6 30V16a10 10 0 0 1 20 0v14z' fill='%232f6b33'/%3E%3C/svg%3E"
     />
-    <link rel="stylesheet" href="./styles/main.css?v=20260912all" />
-    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E🌿%3C/text%3E%3C/svg%3E" />
   </head>
 
   <body>
     <a class="skip" href="#main">본문으로 건너뛰기</a>
 
+    <!--
+      내비 없음. 한 장짜리이고 섹션이 넷, 행동은 "예약" 하나다(layout §2-c).
+      브랜드 표기와 행동 하나만 둔다. 모바일에서는 이 행동이 하단 고정 바로 내려간다.
+    -->
     <header class="site-head wrap">
-      <a class="wordmark" href="#main">
-        <span>목요일의</span> <span>화원</span>
-      </a>
-      <nav class="nav" aria-label="섹션">
-        <a href="#work">작업</a>
-        <a href="#thursday">목요일</a>
-        <a href="#subscribe">정기</a>
-        <a href="#visit">찾아오기</a>
-      </nav>
+      <p class="wordmark">목요일의 화원</p>
+      <a class="btn head-cta" href="#contact">이번 주 주문 예약</a>
     </header>
 
     <main id="main">
       <!--
-        히어로. 큰 사진 한 장을 깔지 않는다 — 그게 이 카테고리의 기본값이다.
-        크기도 비율도 다른 사진 넷을 공통 정렬선 없이 흩뿌리고,
-        그 사이 여백에 글자를 세로로 세운다. (R1: sarahwinward.com)
+        히어로 = 이번 주 꽃 목록 격자. 표제는 작고 격자가 주인이다(layout §2-b 격자·목록).
+        사진이 있는 꽃 넷은 아치 창으로, 아직 사진이 없는 둘은 같은 아치에 이름만 둔다.
+        첫 화면에서 한 번만 순서대로 떠오른다(스태거). 스크롤 리빌은 없다.
       -->
-      <section class="hero" aria-labelledby="hero-h">
-        <div class="hero-inner wrap">
-          <div class="hero-text">
-            <p class="hero-role reveal">플로럴 스튜디오 / 서울 서촌 / 2019</p>
-
-            <div class="hero-body">
-              <h1 id="hero-h" class="hero-h reveal">
-                그 주에 좋은 꽃만<br />들입니다
-              </h1>
-
-              <p class="lead hero-lead reveal" style="--delay: 120ms">
-                목요일 아침에 시장에서 그 주의 꽃을 고르고, 주문받은 만큼만 만듭니다.
-                남는 꽃이 없어서 시들 일도 없습니다.
-              </p>
-
-              <a class="btn hero-cta reveal" href="#contact" style="--delay: 200ms">
-                상담 신청하기
-              </a>
+      <section id="work" class="hero wrap" aria-labelledby="hero-h">
+        <div class="hero-head">
+          <h1 id="hero-h" class="hero-h">이번 주 목요일에 들이는 꽃 여섯 가지</h1>
+          <dl class="hero-facts">
+            <div>
+              <dt>주문 마감</dt>
+              <dd>수요일 18:00</dd>
             </div>
-          </div>
+            <div>
+              <dt>이번 주 제작</dt>
+              <dd>최대 20건</dd>
+            </div>
+          </dl>
+        </div>
 
-          <div class="hero-photos">
-            <figure class="ph ph-a reveal" style="--delay: 80ms">
+        <ol class="flower-grid" aria-label="이번 주 꽃 목록">
+          <li class="cell" style="--i: 0">
+            <figure class="arch">
               <img
                 src="./assets/flower-01.webp"
-                alt="흰 라넌큘러스와 작약, 유칼립투스로 묶은 꽃다발"
+                alt="흰 작약과 라넌큘러스, 유칼립투스를 묶은 꽃다발"
                 width="1086"
                 height="1448"
                 loading="eager"
                 fetchpriority="high"
               />
-              <figcaption>이번 주의 중심 꽃다발</figcaption>
             </figure>
-            <figure class="ph ph-b reveal" style="--delay: 260ms">
+            <h2 class="name">작약</h2>
+            <p class="note">흰색. 이번 주 꽃다발의 중심입니다.</p>
+          </li>
+          <li class="cell" style="--i: 1">
+            <figure class="arch">
               <img
                 src="./assets/flower-03.webp"
-                alt="꽃 한 송이의 꽃잎 결이 보이는 접사"
+                alt="크림색 라넌큘러스 꽃잎을 가까이 찍은 사진"
+                width="1086"
+                height="1448"
+                loading="eager"
+              />
+            </figure>
+            <h2 class="name">라넌큘러스</h2>
+            <p class="note">크림색. 꽃잎이 얇아 화병에 오래 둡니다.</p>
+          </li>
+          <li class="cell" style="--i: 2">
+            <figure class="arch arch-dahlia">
+              <img
+                src="./assets/flower-02.webp"
+                alt="나무 작업대 위에 놓인 연분홍 다알리아 한 송이"
+                width="1448"
+                height="1086"
+                loading="eager"
+              />
+            </figure>
+            <h2 class="name">다알리아</h2>
+            <p class="note">연분홍. 한 송이로 쓰거나 꽃다발 가운데에 둡니다.</p>
+          </li>
+          <li class="cell" style="--i: 3">
+            <figure class="arch arch-scabiosa">
+              <img
+                src="./assets/flower-05.webp"
+                alt="손으로 줄기를 잡고 가위로 다듬는 자줏빛 스카비오사"
                 width="1086"
                 height="1448"
                 loading="lazy"
               />
-              <figcaption>꽃잎의 결</figcaption>
             </figure>
-            <figure class="ph ph-c reveal" style="--delay: 340ms">
-              <img
-                src="./assets/flower-02.webp"
-                alt="작업대 위에 놓인 꽃 줄기와 가위, 노끈"
-                width="1448"
-                height="1086"
-                loading="lazy"
-              />
-              <figcaption>목요일의 작업대</figcaption>
-            </figure>
-            <p class="hero-tags reveal" style="--delay: 420ms">
-              주문 제작 / 정기 구독 / 공간 장식
-            </p>
-          </div>
-        </div>
+            <h2 class="name">스카비오사</h2>
+            <p class="note">자줏빛. 줄기를 길게 남겨 손질합니다.</p>
+          </li>
+          <li class="cell" style="--i: 4">
+            <div class="arch arch-empty" aria-hidden="true">
+              <svg viewBox="0 0 48 48" class="leaf" focusable="false">
+                <path d="M8 40C8 22 20 10 40 8c-2 20-14 32-32 32z" />
+                <path d="M10 38 36 12" stroke-linecap="round" />
+              </svg>
+            </div>
+            <h2 class="name">유칼립투스</h2>
+            <p class="note">사진은 목요일 아침에 올립니다. 꽃다발의 잎으로 씁니다.</p>
+          </li>
+          <li class="cell" style="--i: 5">
+            <div class="arch arch-empty" aria-hidden="true">
+              <svg viewBox="0 0 48 48" class="leaf" focusable="false">
+                <path d="M8 40C8 22 20 10 40 8c-2 20-14 32-32 32z" />
+                <path d="M10 38 36 12" stroke-linecap="round" />
+              </svg>
+            </div>
+            <h2 class="name">스위트피</h2>
+            <p class="note">사진은 목요일 아침에 올립니다. 연보라와 분홍이 섞여 옵니다.</p>
+          </li>
+        </ol>
+        <p class="hero-foot">
+          목요일 새벽 시장에서 그날 상태를 보고 들입니다. 상태가 나쁜 꽃은 목록에 있어도 빼고,
+          대신 들인 꽃은 당일 알려 드립니다.
+        </p>
       </section>
 
-      <!-- 왜 목요일인가 — 이름이 곧 운영 방식이라는 것을 여기서 푼다 -->
-      <section id="thursday" class="section band" aria-labelledby="thursday-h">
-        <div class="wrap two">
-          <div class="two-text">
-            <h2 id="thursday-h">
-              일주일에 하루만 문을 엽니다
-            </h2>
-            <p>
-              수요일 밤에 경매가 끝나고, 목요일 새벽 시장에 그 주의 꽃이 나옵니다.
-              그날 좋은 것만 골라 그날 만듭니다.
-            </p>
-            <p>
-              나머지 엿새는 만들지 않습니다. 미리 사다 두면 파는 날까지 꽃이 기다려야
-              하고, 기다린 꽃은 이미 한 번 시든 꽃입니다.
-            </p>
-            <dl class="facts">
-              <div>
-                <dt>여는 날</dt>
-                <dd>매주 목요일 10:00–19:00</dd>
-              </div>
-              <div>
-                <dt>주문 마감</dt>
-                <dd>수요일 18:00</dd>
-              </div>
-              <div>
-                <dt>그 주 제작 수</dt>
-                <dd>최대 20건</dd>
-              </div>
-            </dl>
-          </div>
-          <figure class="two-photo">
-            <img
-              src="./assets/flower-05.webp"
-              alt="꽃 줄기를 가위로 다듬는 손"
-              width="1086"
-              height="1448"
-              loading="lazy"
-            />
-            <figcaption class="label">목요일 아침, 손질</figcaption>
-          </figure>
-        </div>
-      </section>
-
-      <!-- 작업 — 사진이 설득의 주체다. 크기 차이가 리듬이다 -->
-      <section id="work" class="section" aria-labelledby="work-h">
-        <div class="wrap">
-          <p class="label">작업</p>
-          <h2 id="work-h">같은 꽃을 두 번 쓰지 않습니다</h2>
-          <p class="lead">
-            주에 따라 들어오는 꽃이 다르니 결과도 매번 다릅니다. 지난 작업을 그대로
-            다시 만들어 달라는 요청은 받지 않습니다.
+      <!-- 왜 목요일인가 — 이름이 곧 운영 방식이다. 사실 세 줄과 작업실 사진 하나 -->
+      <section id="thursday" class="section wrap two" aria-labelledby="thursday-h">
+        <div class="two-text">
+          <h2 id="thursday-h">목요일 10시부터 19시까지, 일주일에 하루만 엽니다</h2>
+          <p>
+            수요일 밤에 경매가 끝나고 목요일 새벽 시장에 그 주의 꽃이 나옵니다. 그날 좋은 것만
+            골라 그날 만듭니다. 남는 꽃이 없어서 시들 일도 없습니다.
           </p>
-        </div>
-        <div class="wrap gallery">
-          <figure class="g g-1">
-            <img
-              src="./assets/flower-04.webp"
-              alt="창가 자연광이 드는 작업실, 양철 양동이에 담긴 꽃들과 나무 선반"
-              width="1600"
-              height="900"
-              loading="lazy"
-            />
-            <figcaption>작업실 · 서촌</figcaption>
-          </figure>
-          <figure class="g g-2">
-            <img
-              src="./assets/flower-01.webp"
-              alt="흰색과 크림색 위주로 묶은 꽃다발"
-              width="1086"
-              height="1448"
-              loading="lazy"
-            />
-            <figcaption>화이트 온 화이트 · 6월</figcaption>
-          </figure>
-          <figure class="g g-3">
-            <img
-              src="./assets/flower-02.webp"
-              alt="꽃 줄기와 가위, 노끈이 놓인 작업대를 위에서 본 모습"
-              width="1448"
-              height="1086"
-              loading="lazy"
-            />
-            <figcaption>손질 전 · 목요일 오전</figcaption>
-          </figure>
-        </div>
-        <div class="wrap">
-          <p class="muted work-note">
-            더 많은 작업은
-            <a class="link" href="https://instagram.com" rel="noopener">인스타그램</a>에
-            주 단위로 올립니다.
+          <p>
+            나머지 요일에는 제작하지 않습니다. 꽃을 미리 사 두면 파는 날까지 신선도가 떨어지기
+            때문입니다.
           </p>
+          <dl class="facts">
+            <div>
+              <dt>여는 날</dt>
+              <dd>매주 목요일 10:00–19:00</dd>
+            </div>
+            <div>
+              <dt>주문 마감</dt>
+              <dd>수요일 18:00</dd>
+            </div>
+            <div>
+              <dt>그 주 제작 수</dt>
+              <dd>최대 20건</dd>
+            </div>
+          </dl>
         </div>
+        <figure class="two-photo">
+          <img
+            src="./assets/flower-04.webp"
+            alt="창가 자연광이 드는 작업실, 양철 양동이에 담긴 꽃들과 나무 선반"
+            width="1600"
+            height="900"
+            loading="lazy"
+          />
+          <figcaption>서촌 작업실, 목요일 아침</figcaption>
+        </figure>
       </section>
 
-      <!-- 정기구독. 주 CTA(상담)와 경쟁하지 않게 아래쪽에 조용히 둔다 -->
+      <!-- 정기 구독. 주 행동(예약)과 경쟁하지 않게 조용한 링크 하나 -->
       <section id="subscribe" class="section band" aria-labelledby="sub-h">
-        <div class="wrap two two-reverse">
-          <div class="two-text">
-            <h2 id="sub-h">격주 목요일, 같은 자리에</h2>
+        <div class="wrap sub-inner">
+          <h2 id="sub-h">격주 목요일에 새 꽃을 놓고 지난 꽃을 거둬 갑니다</h2>
+          <div class="sub-text">
             <p>
-              사무실 응접실이나 매장 카운터처럼 꽃이 늘 있어야 하는 자리를 위한
-              것입니다. 격주로 그 주의 꽃을 가져다 놓고, 지난 것을 가져옵니다.
+              사무실 응접실, 매장 카운터처럼 꽃을 늘 두어야 하는 곳을 위한 정기 구독입니다.
+              화병은 저희 것을 놓아 드립니다.
             </p>
-            <p class="muted">
-              화병은 저희 것을 두고 씁니다. 자리와 조도를 먼저 보고 정하기 때문에
-              첫 회는 방문 상담으로 시작합니다.
+            <p>
+              놓을 자리와 조명을 먼저 확인해야 해서 첫 회는 방문 상담으로 시작합니다. 상담은
+              목요일 영업시간 안에 잡습니다.
             </p>
-            <a class="btn btn-quiet" href="#contact">정기 상담 신청</a>
+            <a class="link" href="#contact">정기 구독 상담도 아래 연락처로 받습니다</a>
           </div>
-          <figure class="two-photo">
-            <img
-              src="./assets/flower-03.webp"
-              alt="꽃잎의 결이 보이는 접사"
-              width="1086"
-              height="1448"
-              loading="lazy"
-            />
-            <figcaption class="label">이번 주 · 라넌큘러스</figcaption>
-          </figure>
         </div>
       </section>
 
-      <!-- 문의 — 이 페이지의 유일한 주 CTA가 도착하는 곳 -->
-      <section id="contact" class="section contact" aria-labelledby="contact-h">
-        <div class="wrap contact-inner">
-          <p class="label">문의</p>
-          <h2 id="contact-h">무엇에 쓸 꽃인지부터 듣습니다</h2>
-          <p class="lead">
-            받는 분과 자리, 예산을 알려주시면 그 주에 가능한 것을 먼저 말씀드립니다.
-            가능하지 않은 주에는 그렇다고 말씀드립니다.
-          </p>
-          <ul class="contact-list">
-            <li>
-              <span class="label">전화</span>
-              <a class="link" href="tel:0212345678">02-1234-5678</a>
-            </li>
-            <li>
-              <span class="label">메일</span>
-              <a class="link" href="mailto:hello@thursday.flowers"
-                >hello@thursday.flowers</a
-              >
-            </li>
-            <li>
-              <span class="label">인스타그램</span>
-              <a class="link" href="https://instagram.com" rel="noopener"
-                >@thursday.flowers</a
-              >
-            </li>
-          </ul>
-        </div>
-      </section>
-
-      <!-- 찾아오기. 푸터를 따로 두지 않고 마지막 섹션이 그 역할을 한다 -->
-      <section id="visit" class="section visit" aria-labelledby="visit-h">
-        <div class="wrap visit-inner">
-          <div>
-            <h2 id="visit-h">서촌, 목요일에만</h2>
-            <address class="visit-address">
-              서울 종로구 자하문로 00길 00, 2층<br />
-              경복궁역 3번 출구에서 도보 8분
-            </address>
-          </div>
-          <p class="visit-note muted">
-            목요일 외에는 상주하지 않습니다. 다른 요일 방문은 미리 연락 주세요.
-          </p>
-          <p class="visit-mark">목요일의 화원</p>
-        </div>
+      <!-- 예약·문의 — 페이지의 유일한 행동이 도착하는 곳. 폼은 없고 연락처 셋이다 -->
+      <section id="contact" class="section wrap contact" aria-labelledby="contact-h">
+        <h2 id="contact-h">수요일 18시 전에 예약하면 이번 주 목요일에 받습니다</h2>
+        <p class="lead">
+          받는 분, 놓을 장소, 예산을 알려 주시면 이번 주 꽃으로 가능한 구성을 답해 드립니다.
+          20건이 차면 바로 알려 드립니다.
+        </p>
+        <ul class="contact-list">
+          <li>
+            <span class="label">전화</span>
+            <a class="link" href="tel:0212345678">02-1234-5678</a>
+          </li>
+          <li>
+            <span class="label">메일</span>
+            <a class="link" href="mailto:hello@thursday.flowers">hello@thursday.flowers</a>
+          </li>
+          <li>
+            <span class="label">인스타그램</span>
+            <a class="link" href="https://instagram.com" rel="noopener">@thursday.flowers</a>
+          </li>
+        </ul>
       </section>
     </main>
 
-    <script>
-      /*
-        등장 처리만 한다. 스크롤 이벤트는 쓰지 않는다 —
-        매 프레임 레이아웃을 강제하고 모바일에서 프레임이 무너진다.
-        한 번 보이면 유지한다: 이펙트를 끄면 보이고 켜면 사라지는 것은 폴백이 아니다.
-      */
-      const io = new IntersectionObserver(
-        (entries) => {
-          for (const e of entries) {
-            if (!e.isIntersecting) continue;
-            e.target.classList.add("is-in");
-            io.unobserve(e.target);
-          }
-        },
-        { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
-      );
-      for (const el of document.querySelectorAll(".reveal")) io.observe(el);
-    </script>
+    <!-- 푸터 = 연락처·영업시간 카드(layout §2-d). 찾아가는 곳이라 이 형태다 -->
+    <footer id="visit" class="site-foot wrap" aria-labelledby="visit-h">
+      <div class="foot-card">
+        <div class="foot-col">
+          <h2 id="visit-h" class="foot-h">찾아오는 길과 여는 시간</h2>
+          <address class="foot-address">
+            서울 종로구 자하문로 00길 00, 2층<br />
+            경복궁역 3번 출구에서 도보 8분
+          </address>
+        </div>
+        <dl class="foot-hours">
+          <div>
+            <dt>목요일</dt>
+            <dd>10:00–19:00</dd>
+          </div>
+          <div>
+            <dt>금요일부터 수요일</dt>
+            <dd>쉽니다. 방문은 미리 연락 주세요</dd>
+          </div>
+          <div>
+            <dt>전화</dt>
+            <dd><a class="link" href="tel:0212345678">02-1234-5678</a></dd>
+          </div>
+          <div>
+            <dt>메일</dt>
+            <dd><a class="link" href="mailto:hello@thursday.flowers">hello@thursday.flowers</a></dd>
+          </div>
+        </dl>
+      </div>
+      <p class="foot-mark">목요일의 화원</p>
+    </footer>
+
+    <!--
+      모바일 하단 고정 행동 바(layout §2-c). 768px 이하에서만 보인다.
+      본문 가림은 body 의 padding-bottom 과 섹션의 scroll-margin-bottom 으로 막는다.
+    -->
+    <div class="action-bar">
+      <a class="btn btn-bar" href="#contact">이번 주 주문 예약</a>
+      <a class="btn btn-quiet btn-bar-phone" href="tel:0212345678">전화</a>
+    </div>
   </body>
 </html>