feat: strengthen design skill and refresh all showcases

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

@@ -6,12 +6,12 @@
     <title>철판클럽 — 눌러 굽고, 바로 건넨다</title>
     <meta
       name="description"
-      content="서울의 빠른 한 끼를 위한 가상 눌림 버거 브랜드 철판클럽의 메뉴, 조합기, 예시 매장과 운영 방식을 살펴보세요."
+      content="가상 버거 브랜드 철판클럽에서 메뉴를 고르고 버거를 조합하며, 가상 매장의 이용 방식과 운영 콘셉트를 살펴보세요. 실제 주문과 결제는 제공하지 않습니다."
     />
     <meta property="og:title" content="철판클럽 — 눌러 굽고, 바로 건넨다" />
     <meta
       property="og:description"
-      content="메뉴를 고르고, 재료를 조합하고, 예시 매장 운영 상태까지 확인하는 국내형 버거 쇼케이스."
+      content="메뉴를 고르고 재료를 조합하며, 가상 매장의 운영 방식을 살펴보는 버거 브랜드 콘셉트."
     />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="./og.png" />
@@ -20,7 +20,7 @@
     <meta name="twitter:title" content="철판클럽 — 눌러 굽고, 바로 건넨다" />
     <meta
       name="twitter:description"
-      content="메뉴를 고르고 재료를 조합해 보는 국내형 버거 브랜드 쇼케이스."
+      content="메뉴를 고르고 재료를 조합해 보는 가상 버거 브랜드 철판클럽."
     />
     <meta name="twitter:image" content="./og.png" />
     <meta name="theme-color" content="#f4f1e9" />
@@ -35,20 +35,20 @@
       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=1" />
-    <link rel="stylesheet" href="./styles/site.css?v=1" />
+    <link rel="stylesheet" href="./styles/tokens.css?v=20260912all" />
+    <link rel="stylesheet" href="./styles/site.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%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"
     />
     <script>document.documentElement.classList.add("is-js");</script>
-    <script src="./scripts/site.js?v=1" defer></script>
+    <script src="./scripts/site.js?v=2" 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">
@@ -71,7 +71,7 @@
       <section class="hero" aria-labelledby="hero-heading">
         <div class="hero-copy">
           <p class="section-kicker">서울 도심 눌림 버거</p>
-          <h1 id="hero-heading">눌러 굽고,<br />바로 건넨다.</h1>
+          <h1 id="hero-heading">눌러 굽고,<span class="hero-wide-space" aria-hidden="true"> </span><br />바로 건넨다.</h1>
           <p class="hero-lead">
             얇게 눌러 가장자리는 바삭하게. 주문 뒤 조립하고 포장해, 퇴근길 한 상자로 건넵니다.
           </p>
@@ -124,10 +124,10 @@
           <div class="section-head split-head">
             <div>
               <p class="section-kicker">오늘 고를 메뉴</p>
-              <h2 id="menu-heading">버거가 먼저 보이게.</h2>
+              <h2 id="menu-heading">메뉴를 고르고<br />내 버거를 조합해 보세요.</h2>
             </div>
             <p class="section-note">
-              모든 가격은 조합기 동작을 보여 주기 위한 예시입니다. 실제 판매와 주문은 이루어지지 않습니다.
+              표시된 메뉴와 가격은 브랜드 콘셉트를 설명하기 위한 값입니다. 이 페이지에서는 실제 판매와 주문을 제공하지 않습니다.
             </p>
           </div>
 
@@ -162,9 +162,17 @@
             </article>
 
             <article class="menu-item menu-item-graphic" data-menu-category="burger">
-              <div class="ingredient-stack" aria-hidden="true">
-                <span class="bun"></span><span class="pickle"></span><span class="cheese"></span><span class="patty"></span><span class="bun bottom"></span>
-                <b>02</b>
+              <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-body">
                 <div><p class="menu-state">가볍게</p><h3>철판 싱글</h3></div>
@@ -224,9 +232,9 @@
           <div class="section-head split-head">
             <div>
               <p class="section-kicker">버거 조합기</p>
-              <h2 id="builder-heading">상자에 담길 내용을<br />먼저 정하세요.</h2>
+              <h2 id="builder-heading">내 버거 조합을<br />바꿔 보세요.</h2>
             </div>
-            <p class="section-note">재료 선택과 예시 총액은 실제로 바뀝니다. 주문 전송 기능은 없습니다.</p>
+            <p class="section-note">아래 구성은 메뉴를 살펴보기 위한 예시입니다. 재료를 바꾸면 오른쪽 안내 카드와 예시 가격이 함께 바뀝니다.</p>
           </div>
 
           <div class="builder-layout">
@@ -288,14 +296,14 @@
               </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>
+                <p class="field-help">아래 매장과 운영 상태는 실제 방문·주문 정보가 아닙니다.</p>
               </fieldset>
             </form>
 
@@ -309,27 +317,25 @@
                   loading="lazy"
                 />
                 <span class="image-fallback" aria-hidden="true">조합 버거 사진</span>
-                <span class="summary-stamp">화면 예시</span>
+                <span class="summary-stamp">가상 메뉴</span>
               </div>
               <div class="summary-body">
-                <p class="section-kicker">고른 내용</p>
+                <p class="section-kicker">선택 결과</p>
                 <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-state">영업 중 예시</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>
                   <p id="summary-allergens">알, 우유, 대두, 밀, 쇠고기</p>
                   <small>같은 철판과 조리 도구를 함께 씁니다. 재료를 빼도 알레르기 안전을 보장하지 않습니다.</small>
                 </div>
-                <div class="summary-total"><span>화면 계산용 예시 총액</span><strong id="summary-total">8,900원</strong></div>
-                <p class="truth-inline">실제 주문이나 결제로 전송되지 않습니다.</p>
-                <button class="button button-primary button-full" type="button" id="save-builder">선택 내용 저장</button>
-                <a class="button button-ghost button-full" href="#stores" id="other-store-link">다른 매장 찾기</a>
-                <p class="save-status" id="save-status" role="status" aria-live="polite"></p>
+                <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>
             </aside>
           </div>
@@ -364,13 +370,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>
+            <div><p class="section-kicker">가상 매장 안내</p><h2 id="stores-heading">매장별 이용 방식은<br />이렇게 안내합니다.</h2></div>
+            <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="지역 고르기">
@@ -383,46 +389,46 @@
 
           <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>
-                <h3>성수 예시점</h3>
+              <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>
+                <h3>성수점</h3>
                 <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>
+                <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>
-                <h3>연남 예시점</h3>
+              <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>
+                <h3>연남점</h3>
                 <p>서울 마포구 연남동 일대 · 상세 주소 없음</p>
-                <dl><div><dt>운영</dt><dd>예시 11:30–20:30</dd></div><div><dt>마지막 주문</dt><dd>오늘 마감</dd></div></dl>
+                <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>
+                <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>
-                <h3>문래 예시점</h3>
+              <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>
+                <h3>문래점</h3>
                 <p>서울 영등포구 문래동 일대 · 상세 주소 없음</p>
-                <dl><div><dt>운영</dt><dd>임시 휴무 예시</dd></div><div><dt>다음 확인</dt><dd>매장별 안내 필요</dd></div></dl>
+                <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>
+                <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>
-              <button type="button" class="map-pin pin-yeonnam" data-map-store="yeonnam" aria-label="연남 예시점 고르기"><span>연남</span></button>
-              <button type="button" class="map-pin pin-mullae" data-map-store="mullae" aria-label="문래 예시점 고르기"><span>문래</span></button>
-              <p>실제 지도와 위치가 아닌 화면 설명용 도식</p>
+              <button type="button" class="map-pin pin-seongsu is-active" data-map-store="seongsu" aria-label="성수점 고르기"><span>성수</span></button>
+              <button type="button" class="map-pin pin-yeonnam" data-map-store="yeonnam" aria-label="연남점 고르기"><span>연남</span></button>
+              <button type="button" class="map-pin pin-mullae" data-map-store="mullae" aria-label="문래점 고르기"><span>문래</span></button>
+              <p>위치 안내가 아닌 지역별 이용 상태를 보여 주는 그림입니다.</p>
             </aside>
           </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>
@@ -445,7 +451,7 @@
           <h2 id="franchise-heading">매출 약속보다<br />운영 조건부터.</h2>
           <p>상권, 점포, 면적, 조리 동선과 비용 미정 항목을 먼저 확인할 수 있게 분리했습니다.</p>
           <a class="button button-light" href="./franchise/">가맹 운영 조건 보기 <span aria-hidden="true">→</span></a>
-          <small>실제 가맹 모집과 상담이 아닌 쇼케이스용 흐름입니다.</small>
+          <small>실제 가맹 모집과 상담을 제공하지 않습니다.</small>
         </div>
       </section>
     </main>
@@ -453,9 +459,9 @@
     <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><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">DESIGN SHOWCASE · 2026</p></div>
+        <div class="foot-truth"><strong>가상 브랜드 안내</strong><p>실제 주문, 결제, 매장 방문, 가맹 문의를 제공하지 않습니다.</p><p class="mono">GRIDDLE CLUB · 2026</p></div>
       </div>
     </footer>
   </body>