feat: strengthen design skill and refresh all showcases

apps/site/public/work/griddle-club/franchise/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="#fffdf8" />
@@ -35,9 +35,9 @@
       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/franchise.css?v=1" />
+    <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="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"
@@ -49,7 +49,7 @@
     <a class="skip-link" href="#main">본문으로 건너뛰기</a>
 
     <div class="truth-bar" role="note">
-      <p>쇼케이스용 가상 브랜드 · 실제 가맹 모집, 상담, 계약을 제공하지 않음</p>
+      <p>가상 브랜드 안내 · 실제 가맹 모집, 상담, 계약을 제공하지 않습니다.</p>
     </div>
 
     <header class="site-head">
@@ -64,7 +64,7 @@
           <a href="#process">개설 절차</a>
           <a href="#cost">비용 항목</a>
         </nav>
-        <a class="head-action" href="#inquiry">문의 준비하기</a>
+        <a class="head-action" href="#inquiry">조건 정리하기</a>
       </div>
     </header>
 
@@ -82,7 +82,7 @@
           </div>
           <div class="franchise-truth">
             <strong>먼저 확인해 주세요</strong>
-            <p>실제 가맹 모집이 아닌 디자인 쇼케이스입니다. 금액, 수익, 매장 수와 개점 기간을 꾸며내지 않습니다.</p>
+            <p>금액, 수익, 매장 수와 개점 기간은 확인된 정보가 없어 표시하지 않습니다.</p>
           </div>
         </div>
         <figure class="franchise-hero-media image-shell">
@@ -166,7 +166,7 @@
         <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>
-            <p class="section-note">점포, 자료, 협의와 공사 조건에 따라 기간이 달라집니다. 아래 흐름은 화면 설명용 예시이며 계약이나 개점을 보장하지 않습니다.</p>
+            <p class="section-note">점포, 자료, 협의와 공사 조건에 따라 기간이 달라집니다. 아래 순서는 검토에 필요한 항목을 정리한 것이며 계약이나 개점을 보장하지 않습니다.</p>
           </div>
           <ol class="franchise-timeline">
             <li><span>01</span><div><h3>문의 준비</h3><p>희망 지역과 시작 시기를 정리합니다.</p></div><small>준비 전</small></li>
@@ -219,17 +219,17 @@
       <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>
+            <p class="section-kicker">조건 정리</p>
             <h2 id="inquiry-heading">연락처 없이도<br />조건부터 정리하기.</h2>
-            <p>실제 이름과 연락처를 받지 않습니다. 화면 안에서 상권과 점포 조건을 정리하고 전송 전 검토 상태를 체험합니다.</p>
+            <p>실제 이름과 연락처를 받지 않습니다. 가상의 운영 조건을 입력하면 어떤 항목을 확인해야 하는지 순서대로 살펴볼 수 있습니다.</p>
             <div class="privacy-note" role="note">
               <strong>실제 개인정보를 입력하지 마세요.</strong>
-              <p>입력 내용은 서버로 보내거나 저장하지 않습니다. 성공 화면도 실제 접수가 아닙니다.</p>
+              <p>입력한 내용은 전송하거나 보관하지 않습니다. 조건을 확인해도 상담 신청은 이루어지지 않습니다.</p>
             </div>
           </div>
 
           <div class="inquiry-panel">
-            <ol class="step-indicator" aria-label="문의 준비 단계">
+            <ol class="step-indicator" aria-label="조건 정리 단계">
               <li class="is-current" data-step-indicator="1" aria-current="step"><span>1</span><small>상권</small></li>
               <li data-step-indicator="2"><span>2</span><small>점포</small></li>
               <li data-step-indicator="3"><span>3</span><small>검토</small></li>
@@ -240,8 +240,8 @@
                 <p class="step-count">1 / 3</p>
                 <h3 id="step-one-heading">어느 지역에서 시작할까요?</h3>
                 <div class="form-field">
-                  <label for="demo-name">예시 호칭</label>
-                  <input id="demo-name" name="demoName" type="text" minlength="2" autocomplete="off" placeholder="실명 대신 예시 호칭" required />
+                  <label for="demo-name">확인용 호칭</label>
+                  <input id="demo-name" name="demoName" type="text" minlength="2" autocomplete="off" placeholder="실명 대신 두 글자 이상 입력" required />
                   <small>실제 이름을 입력하지 마세요.</small>
                   <p class="field-error" id="demo-name-error"></p>
                 </div>
@@ -306,14 +306,14 @@
                   <p class="field-error" id="experience-error"></p>
                 </fieldset>
 
-                <div class="form-actions split-actions"><button class="button button-ghost" type="button" data-back>이전</button><button class="button button-primary" type="button" data-next>입력 내용 검토</button></div>
+                <div class="form-actions split-actions"><button class="button button-ghost" type="button" data-back>이전</button><button class="button button-primary" type="button" data-next>입력한 조건 검토</button></div>
               </section>
 
               <section class="form-step" data-step="3" aria-labelledby="step-three-heading">
                 <p class="step-count">3 / 3</p>
-                <h3 id="step-three-heading">보내기 전에 확인하세요.</h3>
+                <h3 id="step-three-heading">입력한 조건을 확인하세요.</h3>
                 <dl class="review-list" id="review-list">
-                  <div><dt>예시 호칭</dt><dd data-review="demoName">—</dd></div>
+                  <div><dt>확인용 호칭</dt><dd data-review="demoName">—</dd></div>
                   <div><dt>희망 지역</dt><dd data-review="region">—</dd></div>
                   <div><dt>희망 상권</dt><dd data-review="areaKind">—</dd></div>
                   <div><dt>점포 상태</dt><dd data-review="storePossession">—</dd></div>
@@ -321,18 +321,18 @@
                   <div><dt>희망 시기</dt><dd data-review="openingWindow">—</dd></div>
                   <div><dt>운영 경험</dt><dd data-review="experience">—</dd></div>
                 </dl>
-                <label class="consent-check"><input type="checkbox" id="demo-consent" required /><span>실제 문의가 아니며 개인정보를 입력하지 않았음을 확인했습니다.</span></label>
+                <label class="consent-check"><input type="checkbox" id="demo-consent" required /><span>이 페이지에서는 상담을 신청할 수 없으며 개인정보를 입력하지 않았습니다.</span></label>
                 <p class="field-error" id="demo-consent-error"></p>
-                <div class="form-actions split-actions"><button class="button button-ghost" type="button" data-back>수정하기</button><button class="button button-primary" type="submit" id="submit-inquiry">문의 준비 마치기</button></div>
+                <div class="form-actions split-actions"><button class="button button-ghost" type="button" data-back>수정하기</button><button class="button button-primary" type="submit" id="submit-inquiry">입력한 조건 확인하기</button></div>
                 <p class="submit-state" id="submit-state" role="alert"></p>
               </section>
             </form>
 
             <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>
+              <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>
             </section>
           </div>
@@ -351,7 +351,7 @@
       <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">DESIGN SHOWCASE · 2026</p></div>
+        <div class="foot-truth"><strong>가상 브랜드 안내</strong><p>실제 가맹 모집, 수익 안내, 계약과 상담 신청을 제공하지 않습니다.</p><p class="mono">GRIDDLE CLUB · 2026</p></div>
       </div>
     </footer>
   </body>