feat(supporters): Astra 개선안 일부 수용 — 메뉴 재명명, 방문 안내 페이지 신설, 고객 상태별 진입 카드

- 메뉴: 상담 전 질문(/posts) · 의료진 설명(/videos) · 병원 소식(/newsroom) · 방문 안내(/visit, 신설) · 매체 소개(/about). 기존 페이지는 그대로, 병원 정보(/clinic)는 푸터와 방문 안내에서 연결
- /visit 신설: 예약 경로 3가지 → 진료시간 → 찾아가기(지하철·주차 약도) → 도착 후 동선 → 상담 전 읽어볼 글 → 상담 예약 CTA. 값은 factSheet.json에서만
- 홈 히어로 아래 "Start Here / Where Are You Now?" 섹션: 처음 알아볼 때 · 병원을 선택할 때 · 방문을 준비할 때 카드 3개 (기존 .card 룩, 영어 세리프 헤딩 유지)
- 통계 숫자 블록 유지, 1문항 1URL 원칙 유지. 사이트맵에 /visit 추가

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

supporters/src/layouts/Base.astro

@@ -45,11 +45,11 @@ const ld = jsonLd ? JSON.stringify({ '@context': 'https://schema.org', ...(Array
         <a class="brand" href="/"><img class="brand-logo" src="/img/view-logo.png" alt="뷰성형외과 View Plastic Surgery" width="184" height="66" /><span class="brand-sep" aria-hidden="true"></span><span class="brand-text">서포터즈 <small>VIEW SUPPORTERS</small></span></a>
         <div class="right">
           <nav class="nav">
-            <a href="/posts">글</a>
-            <a href="/videos">영상</a>
-            <a href="/newsroom">뉴스룸</a>
-            <a href="/clinic">병원 정보</a>
-            <a href="/about">소개</a>
+            <a href="/posts">상담 전 질문</a>
+            <a href="/videos">의료진 설명</a>
+            <a href="/newsroom">병원 소식</a>
+            <a href="/visit">방문 안내</a>
+            <a href="/about">매체 소개</a>
           </nav>
           <a class="cta" href={fact.url + '/counsel/reservation/'} rel="noopener">상담 예약</a>
         </div>
@@ -78,7 +78,7 @@ const ld = jsonLd ? JSON.stringify({ '@context': 'https://schema.org', ...(Array
           <p><strong>{SITE_NAME}</strong> · {SITE_TAGLINE}</p>
           <p>이 매체는 {fact.shortName}의 지원을 받아 서포터즈가 운영합니다. 글의 의학적 내용은 {fact.shortName} 담당 원장의 감수를 거치며, 감수 전 글은 "감수 예정"으로 표시합니다.</p>
           <p>{fact.sideEffectNotice}</p>
-          <p><a href="/about">이 사이트에 대해</a> · <a href="/editorial">편집 기준 (운영자용)</a></p>
+          <p><a href="/clinic">병원 정보</a> · <a href="/visit">방문 안내</a> · <a href="/about">이 사이트에 대해</a> · <a href="/editorial">편집 기준 (운영자용)</a></p>
         </div>
         <div>
           <p><img src="/img/view-logo-foot.png" alt="뷰성형외과" width="138" height="49" style="width:138px;height:auto;margin-bottom:0.5rem" /></p>

supporters/src/pages/index.astro

@@ -34,6 +34,17 @@ const ld = [
     </div>
   </section>
 
+  <section class="section tint" style="padding:3.2rem 0">
+    <div class="wrap-wide">
+      <div class="sec-head"><div class="eyebrow">Start Here</div><h2>Where Are You Now?</h2><p class="sub">지금 상황에 맞는 곳에서 시작하세요.</p></div>
+      <div class="grid">
+        <a class="card entry" href="/posts#cat-D"><div class="cat">처음 알아볼 때</div><h3>어떤 수술인지 알고 싶어요</h3><p>방법의 차이와 상담에서 확인할 기준을 살펴보세요.</p><span class="more">시술 정보 글 보기</span></a>
+        <a class="card entry" href="/posts#cat-E"><div class="cat">병원을 선택할 때</div><h3>안전과 회복이 걱정돼요</h3><p>병원이 공개한 관리 체계와 담당 의료진에게 물어볼 질문을 확인하세요.</p><span class="more">안전·신뢰 글 보기</span></a>
+        <a class="card entry" href="/visit"><div class="cat">방문을 준비할 때</div><h3>예약과 방문 준비가 궁금해요</h3><p>예약 경로, 가는 길, 주차, 도착 후 동선을 순서대로 안내합니다.</p><span class="more">방문 안내 보기</span></a>
+      </div>
+    </div>
+  </section>
+
   <section class="section dark">
     <div class="wrap-wide">
       <div class="sec-head"><div class="eyebrow" style="color:var(--purple-300)">Why This Site</div><h2>Questions First</h2><p class="sub">병원에 가기 전에 알고 싶은 것부터 답합니다. 답은 원장이 직접 설명한 영상과 병원 공개 자료를 근거로 합니다.</p></div>
@@ -89,3 +100,8 @@ const ld = [
 
   <section class="section tint"><div class="wrap-wide"><div class="sec-head"><div class="eyebrow">Fact Sheet</div><h2>Clinic Facts</h2><p class="sub">주소·전화·진료시간. 방문 전에 전화로 한 번 더 확인을 권합니다.</p></div><FactBlock /></div></section>
 </Base>
+<style>
+  .card.entry { text-decoration: none; color: inherit; }
+  .card.entry:hover { text-decoration: none; }
+  .card.entry .more { font-size: 0.85rem; font-weight: 600; color: var(--accent); }
+</style>

supporters/src/pages/sitemap.xml.ts

@@ -9,6 +9,7 @@ export const GET: APIRoute = async ({ site }) => {
     { loc: `${base}/`, lastmod: today },
     { loc: `${base}/posts`, lastmod: today },
     { loc: `${base}/clinic`, lastmod: today },
+    { loc: `${base}/visit`, lastmod: today },
     { loc: `${base}/newsroom`, lastmod: today },
     { loc: `${base}/videos`, lastmod: today },
     { loc: `${base}/about`, lastmod: today },

supporters/src/pages/visit.astro

@@ -0,0 +1,49 @@
+---
+// 방문 안내. 병원 정보(/clinic)가 사실 표라면 이 페이지는 "예약하고, 찾아가고, 도착해서 뭘 하는지"의 행동 순서다. 값은 모두 factSheet.json에서 가져온다.
+import Base from '../layouts/Base.astro';
+import Gallery from '../components/Gallery.astro';
+import { fact, SITE_NAME, clinicSchema } from '../lib';
+const site = Astro.site!.toString().replace(/\/$/, '');
+const ld = [
+  { '@type': 'WebPage', '@id': `${site}/visit#page`, name: '뷰성형외과 방문 안내', url: `${site}/visit`, inLanguage: 'ko', isPartOf: { '@id': `${site}/#website` }, about: { '@id': `${fact.url}/#clinic` }, publisher: { '@type': 'Organization', name: SITE_NAME, url: site } },
+  clinicSchema(site),
+];
+---
+<Base title="방문 안내 · 예약, 가는 길, 주차, 도착 후 동선" description={`뷰성형외과 방문 준비. 예약 경로 세 가지, 신논현역에서 가는 길, 주차장 진입 경로, 진료시간, 도착 후 몇 층으로 가는지를 순서대로 안내합니다. 주소 ${fact.address.full}.`} jsonLd={ld}>
+  <article class="wrap" style="padding-bottom:4rem">
+    <header class="article-head"><div class="eyebrow">Visit</div><h1 class="serif">Plan Your Visit</h1><p style="color:var(--slate-600);margin-top:0.6rem"><strong style="color:var(--primary-900)">뷰성형외과 방문 안내.</strong> 예약부터 도착 후 동선까지 순서대로 정리했습니다. 주소·전화·진료시간의 근거는 <a href="/clinic">병원 정보</a>에 있습니다.</p></header>
+
+    <h2>1. 예약하기</h2>
+    <p>상담 예약 경로는 세 가지입니다. 어느 쪽이든 같은 병원 상담센터로 연결됩니다.</p>
+    <div class="table-wrap"><table><thead><tr><th>경로</th><th>방법</th></tr></thead><tbody>
+      <tr><td>전화</td><td><a href={`tel:${fact.phone.replace(/-/g, '')}`}>{fact.phone}</a></td></tr>
+      <tr><td>카카오톡 채널</td><td><a href={fact.kakao} rel="noopener">뷰성형외과 상담 채널</a></td></tr>
+      <tr><td>홈페이지</td><td><a href={fact.url + '/counsel/reservation/'} rel="noopener">온라인 예약 페이지</a></td></tr>
+    </tbody></table></div>
+
+    <h2>2. 진료시간 확인하기</h2>
+    <div class="table-wrap"><table><thead><tr><th>요일</th><th>진료</th></tr></thead><tbody>{fact.hours.rows.map((r) => <tr><td>{r.days}</td><td>{r.open ? `${r.open} ~ ${r.close}` : r.note}</td></tr>)}</tbody></table></div>
+    <p style="font-size:0.88rem;color:var(--slate-500)">출처: <a href={fact.hours.source} rel="noopener">{fact.hours.sourceLabel}</a>. 진료시간은 바뀔 수 있으니 방문 전 전화로 한 번 더 확인하세요.</p>
+
+    <h2>3. 찾아가기</h2>
+    <p><strong>주소</strong> {fact.address.full} (지번 {fact.address.postalNote})</p>
+    <p><strong>지하철</strong> {fact.transit}. 건물 전체가 병원이라 출구에서 바로 보입니다.</p>
+    <p><strong>차로 올 때</strong> {fact.parking}.</p>
+    <Gallery cols={2} items={[
+      { src: '/img/clinic/map-1.jpg', alt: '양재·강남역 방향에서 뷰성형외과로 오는 약도. 9호선 신논현역과 병원 위치 표시', caption: '양재·강남역 방향 약도. 출처: 홈페이지 오시는길' },
+      { src: '/img/clinic/parking-map.jpg', alt: '뷰성형외과 주차장 진입 경로 약도. 약국 골목으로 진입해 사거리에서 우회전', caption: '주차장 진입 경로. 출처: 홈페이지 오시는길' },
+    ]} />
+
+    <h2>4. 도착하면</h2>
+    <p>먼저 1층 안내데스크로 가면 안내해 줍니다. 상담센터는 4~5층, VIP 상담실은 3층, 수술 전 검진은 지하 1층 검진센터입니다. 층별 구성 전체는 <a href="/clinic">병원 정보</a>에 있습니다.</p>
+
+    <h2>5. 상담 전에 읽어볼 글</h2>
+    <ul>
+      <li><a href="/posts/visit-guide">방문 가이드: 위치·진료시간·주차·예약</a> 대중교통·공항에서 오는 법까지 자세히</li>
+      <li><a href="/posts/safety-system">뷰성형외과 안전 시스템은 무엇으로 이루어져 있나요?</a> 상담에서 확인할 네 가지</li>
+      <li><a href="/posts/revision-checklist">가슴 재수술을 고민 중이라면 무엇을 먼저 확인해야 하나요?</a> 재수술 상담 준비 체크리스트</li>
+    </ul>
+    <p style="margin-top:2rem"><a class="btn primary" href={fact.url + '/counsel/reservation/'} rel="noopener">뷰성형외과 상담 예약</a></p>
+    <p class="disclosure">{fact.sideEffectNotice}</p>
+  </article>
+</Base>