feat: strengthen design skill and refresh all showcases

apps/site/public/work/hannam-jari/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="theme-color" content="#f3f0e8">
-  <meta name="description" content="서울 한남 생활권의 집을 예산, 면적, 입주, 주차 조건으로 비교하고 AI 브리핑 뒤 공인중개사가 사실을 다시 확인하는 스마트 중개 디자인 쇼케이스입니다.">
+  <meta name="description" content="서울 한남 생활권의 집을 예산, 면적, 입주, 주차 조건으로 비교하고 계약 전 공인중개사가 사실을 다시 확인하는 주거 비교 안내입니다.">
   <meta property="og:title" content="한남자리 — 내 기준에 맞는 집부터">
   <meta property="og:description" content="조건을 정리하고 후보를 비교한 뒤 공인중개사가 확인하는 개인 주거 브리핑 데스크">
   <meta property="og:image" content="./og.png">
@@ -15,28 +15,27 @@
   <title>한남자리 — 내 기준에 맞는 집부터</title>
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23121311'/%3E%3Ctext x='32' y='39' text-anchor='middle' font-family='Arial' font-size='19' font-weight='700' fill='%23f3f0e8'%3EHJ%3C/text%3E%3C/svg%3E">
   <link rel="preload" href="./assets/hannam-evening-1600.webp" as="image" type="image/webp" media="(min-width: 961px)">
-  <link rel="stylesheet" href="./styles/tokens.css?v=20260829d">
-  <link rel="stylesheet" href="./styles/landing.css?v=20260829d">
-  <script src="./scripts/landing.js?v=20260829d" defer></script>
+  <link rel="stylesheet" href="./styles/tokens.css?v=20260912all">
+  <link rel="stylesheet" href="./styles/landing.css?v=20260912all">
+  <script src="./scripts/landing.js?v=20260830e" defer></script>
 </head>
 <body>
   <a class="skip-link" href="#main-content">본문 바로가기</a>
-  <div class="demo-strip" role="region" aria-label="쇼케이스 고지">디자인 쇼케이스 · 가상 브랜드 · 상담은 접수되지 않습니다</div>
+  <div class="demo-strip" role="region" aria-label="예시 자료 안내">안내 · 예시 자료 · 입력 내용은 전송되지 않으며 상담은 접수되지 않습니다</div>
 
   <header class="site-header" data-site-header>
     <a class="brand-link" href="#top" aria-label="한남자리 처음으로">
       <span class="brand-mark" aria-hidden="true">HJ</span>
       <span class="brand-lockup"><strong class="brand">한남자리</strong><small>개인 주거 브리핑 데스크</small></span>
     </a>
-    <button class="menu-button" type="button" aria-expanded="false" aria-controls="site-nav" data-menu-button>
-      <span class="sr-only">메뉴 열기</span><i aria-hidden="true"></i><i aria-hidden="true"></i>
+    <button class="menu-button" type="button" aria-label="메뉴 열기" aria-expanded="false" aria-controls="site-nav" data-menu-button>
+      <i aria-hidden="true"></i><i aria-hidden="true"></i>
     </button>
     <nav class="site-nav" id="site-nav" aria-label="주요 메뉴" data-site-nav>
       <a href="#briefing">맞춤 브리핑</a>
       <a href="#homes">세 집 비교</a>
       <a href="#dossier">선택 서류철</a>
       <a href="#handoff">중개사 인계</a>
-      <a class="nav-admin" href="./admin/">관리 화면</a>
     </nav>
   </header>
 
@@ -45,7 +44,7 @@
       <div class="masthead">
         <p class="eyebrow">한남 생활권 맞춤 중개</p>
         <h1 id="hero-title">한남에서, 내 기준에 맞는 집부터.</h1>
-        <p class="hero-copy">예산과 면적, 입주 계획을 먼저 정리합니다. AI가 후보를 비교하고 공인중개사가 다시 확인합니다.</p>
+        <p class="hero-copy">예산과 면적, 입주 계획을 먼저 정리합니다. 입력한 기준을 후보와 대조하고, 계약 전에는 공인중개사가 다시 확인합니다.</p>
         <div class="hero-actions">
           <button class="button button-primary" type="button" data-focus-condition>내 조건 분석하기</button>
           <a class="text-link" href="#homes">매물 보기 <span aria-hidden="true">→</span></a>
@@ -73,8 +72,8 @@
         <label class="dock-field"><span>최소 전용면적</span><span class="input-suffix"><input name="minArea" type="number" min="30" max="300" step="1" value="110" inputmode="decimal"><i>㎡</i></span></label>
         <label class="dock-field"><span>입주 희망일</span><input name="moveIn" type="date" value="2026-12-20"></label>
         <label class="dock-field"><span>필요 주차</span><select name="parking"><option value="0">상관없음</option><option value="1">1대 이상</option><option value="2" selected>2대 이상</option><option value="3">3대 이상</option></select></label>
-        <div class="dock-actions"><button class="button button-primary" type="submit">분석 결과 보기</button><button class="save-button" type="button" data-save-condition>이 브라우저에 저장</button></div>
-        <p class="condition-note" id="condition-note">입력은 전송되지 않으며, 저장을 선택하면 이 브라우저에만 보관됩니다.</p>
+        <div class="dock-actions"><button class="button button-primary" type="submit">분석 결과 보기</button><button class="save-button" type="button" data-save-condition>조건 임시 보관</button></div>
+        <p class="condition-note" id="condition-note">입력은 전송되지 않으며, 임시 보관을 선택하면 지금 사용 중인 기기에만 남습니다.</p>
       </form>
     </section>
 
@@ -82,11 +81,11 @@
       <header class="section-heading briefing-heading">
         <p class="eyebrow">내 조건 브리핑</p>
         <h2 id="briefing-title">맞는 이유와<br>조정할 지점을 나눕니다.</h2>
-        <p>화면에 입력한 값과 후보 정보를 이 브라우저에서 대조합니다.</p>
+        <p>입력한 기준과 후보 정보를 같은 항목으로 비교합니다.</p>
       </header>
 
       <div class="briefing-sheet" data-analysis-result aria-live="polite" aria-atomic="false">
-        <header><span>예시 AI 브리핑 · 모의 조건 비교 · 공인중개사 확인 전</span><strong data-analysis-home>아직 분석하지 않았습니다</strong></header>
+        <header><span>안내용 조건 비교 · 공인중개사 확인 전</span><strong data-analysis-home>아직 분석하지 않았습니다</strong></header>
         <div class="briefing-empty" data-analysis-empty>
           <span aria-hidden="true">01</span>
           <div><h3>내 조건을 먼저 알려 주세요.</h3><p>분석을 실행하면 세 후보 가운데 조건과 가까운 집을 고르고, 이유를 세 묶음으로 정리합니다.</p></div>
@@ -195,19 +194,19 @@
         <li><span>02</span><div><strong>후보 비교</strong><p>서로 다른 집의 차이를 같은 기준으로 대조합니다.</p></div></li>
         <li><span>03</span><div><strong>권리·현장 확인</strong><p>서류와 현장에서 확인한 뒤 최종 판단합니다.</p></div></li>
       </ol>
-      <button class="button button-light handoff-cta" type="button" data-open-consult>상담 흐름 미리보기</button>
+      <button class="button button-light handoff-cta" type="button" data-open-consult>상담 전 확인할 항목 보기</button>
     </section>
   </main>
 
   <footer class="site-footer">
     <div><strong>한남자리</strong><span>개인 주거 브리핑 데스크</span></div>
-    <p>한남자리는 가상 브랜드이며 등록 공인중개사무소나 거래 서비스를 제공하지 않습니다.</p>
-    <nav aria-label="보조 메뉴"><a href="#top">처음으로</a><a href="./admin/">관리 화면</a></nav>
+    <p>한남자리는 예시 자료로 구성한 서비스 화면입니다. 등록 공인중개사무소나 거래 서비스를 제공하지 않습니다.</p>
+    <nav aria-label="보조 메뉴"><a href="#top">처음으로</a></nav>
   </footer>
 
   <dialog class="consult-dialog" data-consult-dialog aria-labelledby="consult-title">
     <form method="dialog" class="dialog-shell" data-consult-form>
-      <header><div><span>상담 순서 살펴보기</span><h2 id="consult-title">중개사에게 무엇을 넘길까요?</h2></div><button class="dialog-close" type="button" aria-label="상담 흐름 닫기" data-close-consult>×</button></header>
+      <header><div><span>상담 전 확인 항목</span><h2 id="consult-title">중개사와 무엇을 먼저 확인할까요?</h2></div><button class="dialog-close" type="button" aria-label="상담 안내 닫기" data-close-consult>×</button></header>
       <p class="dialog-privacy">연락처를 받거나 입력 내용을 저장하지 않습니다.</p>
       <div class="dialog-content" data-consult-content>
         <p><strong data-consult-home>정원형 연립주택</strong>을 기준으로 준비할 항목을 골라 보세요.</p>
@@ -220,6 +219,6 @@
   </dialog>
 
   <div class="live-region" role="status" aria-live="polite" data-live-region hidden></div>
-  <noscript><div class="no-script"><strong>자바스크립트 없이 보는 중입니다.</strong><p>집 정보는 읽을 수 있지만 조건 비교, 후보 변경과 상담 미리보기는 작동하지 않습니다.</p></div></noscript>
+  <noscript><div class="no-script"><strong>자바스크립트 없이 보는 중입니다.</strong><p>집 정보는 읽을 수 있지만 조건 비교, 후보 변경과 상담 준비 순서는 이용할 수 없습니다.</p></div></noscript>
 </body>
 </html>