feat(supporters): 서포터즈 사이트 초안 표시를 눈에 띄게 강화

기존 상단 띠 배너("샘플 사이트입니다")는 스크롤하면 사라져 병원이
둘러보는 동안에는 초안인지 최종본인지 판단이 서지 않았다.

- sticky 헤더 안에 "초안" 배지 추가(스크롤해도 계속 보임), 영문판도 동일
- 문구를 "샘플 사이트입니다"에서 상태 중심으로 변경:
  "초안입니다. 검색에 노출되지 않으며, 병원 확인 전입니다."
- 띠 배너 글자 크기·굵기 상향(0.83rem/500 → 0.95rem/600)
- 인쇄 시 배지 숨김(기존 배너 규칙과 동일하게)
- INDEXABLE=true(공개본)에서는 배너·배지 모두 그대로 뜨지 않음

templates/supporters-astro(정본)와 supporters/(현재 작업 사본) 양쪽에
동일하게 반영. 이미 배포된 서포터즈 사이트(예: supporters-jkplastic)에는
재빌드·재배포 전까지 적용되지 않는다.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

supporters/src/layouts/Base.astro

@@ -100,6 +100,7 @@ document.addEventListener('click',function(e){var a=e.target.closest&&e.target.c
     <header class="site-header">
       <div class="wrap-wide bar">
         <a class="brand" href={homeHref}>{has(S.logo?.src) ? <img class="brand-logo" src={S.logo.src} alt={S.logo.alt} width={S.logo.width} height={S.logo.height} /> : <span class="brand-logo brand-name">{v(f.shortName, '병원')}</span>}<span class="brand-sep" aria-hidden="true"></span><span class="brand-text">{u.brand} <small>{S.siteNameEn || 'SUPPORTERS'}</small></span></a>
+        {!INDEXABLE && <span class="draft-badge" title={u.draftBadgeAria} aria-label={u.draftBadgeAria}>{u.draftBadge}</span>}
         <div class="right">
           <nav class="nav">
             {lang === 'ko' ? (

supporters/src/lib/i18n.ts

@@ -20,7 +20,9 @@ export const isEnPath = (pathname: string): boolean => /^\/en(\/|\.html$|$)/.tes
 
 export const UI: Record<Lang, Record<string, string>> = {
   ko: {
-    sample: '샘플 사이트입니다. 정식 공개 전입니다.',
+    sample: '초안입니다. 검색에 노출되지 않으며, 병원 확인 전입니다.',
+    draftBadge: '초안',
+    draftBadgeAria: '이 사이트는 초안입니다. 검색에 노출되지 않습니다.',
     brand: '서포터즈',
     nav_posts: '상담 전 질문', nav_videos: '의료진 영상', nav_news: '뉴스룸', nav_stay: '주변 안내', nav_visit: '방문 안내', nav_plan: '회복 일정', nav_about: '매체 소개',
     cta: '상담 예약',
@@ -32,7 +34,9 @@ export const UI: Record<Lang, Record<string, string>> = {
     foot_site: '공식 홈페이지', foot_youtube: '유튜브', foot_gu: '강남언니',
   },
   en: {
-    sample: 'Sample site. Not yet public.',
+    sample: 'Draft. Not indexed by search engines, and not yet confirmed by the clinic.',
+    draftBadge: 'Draft',
+    draftBadgeAria: 'This site is a draft and is not indexed by search engines.',
     brand: 'Supporters',
     nav_home: 'Home', nav_stay: 'Nearby', nav_plan: 'Recovery Planner', nav_visit: 'Getting Here', nav_clinic: 'Clinic Facts', nav_korean: '한국어 전체 보기',
     cta: 'Book a consultation',

supporters/src/styles/global.css

@@ -67,7 +67,9 @@ td { color: var(--slate-700); }
 .brand small { font-family: "Playfair Display", Georgia, serif; font-weight: 700; color: var(--slate-500); font-size: 0.8rem; letter-spacing: 0.05em; }
 .nav a { color: var(--slate-600); margin-left: 1.3rem; font-size: 0.93rem; font-weight: 500; }
 .nav a:hover { color: var(--primary-900); text-decoration: none; }
-.sample-banner { background: var(--st-warning-bg); color: var(--st-warning-text); border-bottom: 1px solid var(--st-warning-border); font-size: 0.83rem; text-align: center; padding: 0.5rem 1rem; font-weight: 500; }
+.sample-banner { background: var(--st-warning-bg); color: var(--st-warning-text); border-bottom: 1px solid var(--st-warning-border); font-size: 0.95rem; text-align: center; padding: 0.62rem 1rem; font-weight: 600; word-break: keep-all; }
+/* 초안 배지. 띠 배너는 스크롤하면 사라지므로, sticky 헤더 안에도 같은 사실을 둔다. */
+.draft-badge { flex-shrink: 0; margin-left: 0.55rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--st-warning-bg); color: var(--st-warning-text); border: 1px solid var(--st-warning-border); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
 
 /* pills & badges */
 .pill { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; }

supporters/src/styles/plan.css

@@ -163,7 +163,7 @@ button.btn { font: inherit; cursor: pointer; border: 0; }
 }
 
 @media print {
-  .site-header, .backbar-wrap, .totop, .site-footer, .sample-banner, .plan-input, .plan-actions, .toast, .lang-links, .sticky-bar { display: none !important; }
+  .site-header, .backbar-wrap, .totop, .site-footer, .sample-banner, .draft-badge, .plan-input, .plan-actions, .toast, .lang-links, .sticky-bar { display: none !important; }
   .section { padding: 1rem 0 !important; }
   .section.dark, .section.tint { background: #fff !important; color: var(--primary-900); }
   .section.dark .sec-head h2, .plan-hero h1 { -webkit-text-fill-color: var(--primary-900); background: none; }

templates/supporters-astro/src/layouts/Base.astro

@@ -100,6 +100,7 @@ document.addEventListener('click',function(e){var a=e.target.closest&&e.target.c
     <header class="site-header">
       <div class="wrap-wide bar">
         <a class="brand" href={homeHref}>{has(S.logo?.src) ? <img class="brand-logo" src={S.logo.src} alt={S.logo.alt} width={S.logo.width} height={S.logo.height} /> : <span class="brand-logo brand-name">{v(f.shortName, '병원')}</span>}<span class="brand-sep" aria-hidden="true"></span><span class="brand-text">{u.brand} <small>{S.siteNameEn || 'SUPPORTERS'}</small></span></a>
+        {!INDEXABLE && <span class="draft-badge" title={u.draftBadgeAria} aria-label={u.draftBadgeAria}>{u.draftBadge}</span>}
         <div class="right">
           <nav class="nav">
             {lang === 'ko' ? (

templates/supporters-astro/src/lib/i18n.ts

@@ -20,7 +20,9 @@ export const isEnPath = (pathname: string): boolean => /^\/en(\/|\.html$|$)/.tes
 
 export const UI: Record<Lang, Record<string, string>> = {
   ko: {
-    sample: '샘플 사이트입니다. 정식 공개 전입니다.',
+    sample: '초안입니다. 검색에 노출되지 않으며, 병원 확인 전입니다.',
+    draftBadge: '초안',
+    draftBadgeAria: '이 사이트는 초안입니다. 검색에 노출되지 않습니다.',
     brand: '서포터즈',
     nav_posts: '상담 전 질문', nav_videos: '의료진 영상', nav_news: '뉴스룸', nav_stay: '주변 안내', nav_visit: '방문 안내', nav_plan: '회복 일정', nav_about: '매체 소개',
     cta: '상담 예약',
@@ -32,7 +34,9 @@ export const UI: Record<Lang, Record<string, string>> = {
     foot_site: '공식 홈페이지', foot_youtube: '유튜브', foot_gu: '강남언니',
   },
   en: {
-    sample: 'Sample site. Not yet public.',
+    sample: 'Draft. Not indexed by search engines, and not yet confirmed by the clinic.',
+    draftBadge: 'Draft',
+    draftBadgeAria: 'This site is a draft and is not indexed by search engines.',
     brand: 'Supporters',
     nav_home: 'Home', nav_stay: 'Nearby', nav_plan: 'Recovery Planner', nav_visit: 'Getting Here', nav_clinic: 'Clinic Facts', nav_korean: '한국어 전체 보기',
     cta: 'Book a consultation',

templates/supporters-astro/src/styles/global.css

@@ -67,7 +67,9 @@ td { color: var(--slate-700); }
 .brand small { font-family: "Playfair Display", Georgia, serif; font-weight: 700; color: var(--slate-500); font-size: 0.8rem; letter-spacing: 0.05em; }
 .nav a { color: var(--slate-600); margin-left: 1.3rem; font-size: 0.93rem; font-weight: 500; }
 .nav a:hover { color: var(--primary-900); text-decoration: none; }
-.sample-banner { background: var(--st-warning-bg); color: var(--st-warning-text); border-bottom: 1px solid var(--st-warning-border); font-size: 0.83rem; text-align: center; padding: 0.5rem 1rem; font-weight: 500; }
+.sample-banner { background: var(--st-warning-bg); color: var(--st-warning-text); border-bottom: 1px solid var(--st-warning-border); font-size: 0.95rem; text-align: center; padding: 0.62rem 1rem; font-weight: 600; word-break: keep-all; }
+/* 초안 배지. 띠 배너는 스크롤하면 사라지므로, sticky 헤더 안에도 같은 사실을 둔다. */
+.draft-badge { flex-shrink: 0; margin-left: 0.55rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--st-warning-bg); color: var(--st-warning-text); border: 1px solid var(--st-warning-border); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
 
 /* pills & badges */
 .pill { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; }

templates/supporters-astro/src/styles/plan.css

@@ -163,7 +163,7 @@ button.btn { font: inherit; cursor: pointer; border: 0; }
 }
 
 @media print {
-  .site-header, .backbar-wrap, .totop, .site-footer, .sample-banner, .plan-input, .plan-actions, .toast, .lang-links, .sticky-bar { display: none !important; }
+  .site-header, .backbar-wrap, .totop, .site-footer, .sample-banner, .draft-badge, .plan-input, .plan-actions, .toast, .lang-links, .sticky-bar { display: none !important; }
   .section { padding: 1rem 0 !important; }
   .section.dark, .section.tint { background: #fff !important; color: var(--primary-900); }
   .section.dark .sec-head h2, .plan-hero h1 { -webkit-text-fill-color: var(--primary-900); background: none; }