fix(supporters): 글 목록 카테고리 블록 반응형 그리드 + 태블릿 헤더 한 줄 유지

- /posts: 카테고리 섹션이 글 수만큼만 칸을 차지하는 그리드 (데스크톱 3열 → 1000px 이하 2열 → 660px 이하 1열).
  1편짜리 병원 소개·방문·예약·안전·신뢰·후기·평판이 데스크톱에서 나란히 배치되고 세로로 쌓이지 않음
- 헤더: 720~1040px 구간에 메뉴 간격·크기 축소, nowrap. 새 메뉴 이름 5개가 두 줄로 깨지던 문제 해결
- docs/v4-screenshots: posts 데스크톱·태블릿·좁은 폭·모바일 스크린샷 추가

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

supporters/src/pages/posts/index.astro

@@ -11,10 +11,30 @@ const ld = { '@type': 'CollectionPage', '@id': `${site}/posts#page`, name: '전
 <Base title="전체 글" description="뷰성형외과에 대해 사람들이 묻는 질문에 서포터즈가 먼저 답한 글 목록. 카테고리별로 정리했습니다." jsonLd={ld}>
   <div class="wrap-wide" style="padding-bottom:4rem">
     <header class="article-head"><div class="eyebrow">Archive</div><h1 class="serif">All Answers</h1><p style="color:var(--slate-600);margin-top:0.6rem">궁금한 주제를 골라 보세요. 글 하나가 질문 하나에 답합니다.</p></header>
-    {cats.map((c) => {
-      const list = posts.filter((p) => p.data.category === c);
-      if (!list.length) return null;
-      return (<section id={`cat-${c}`} style="scroll-margin-top:90px"><div class="section-title" style="margin-top:2.4rem"><h2>{c}. {CATEGORY_LABELS[c]}</h2><span style="color:var(--slate-500);font-size:0.9rem">{list.length}편</span></div><div class="grid">{list.map((p) => <PostCard post={p} />)}</div></section>);
-    })}
+    <div class="cat-grid">
+      {cats.map((c) => {
+        const list = posts.filter((p) => p.data.category === c);
+        if (!list.length) return null;
+        return (<section id={`cat-${c}`} class={`cat span-${Math.min(list.length, 3)}`}><div class="section-title"><h2>{c}. {CATEGORY_LABELS[c]}</h2><span style="color:var(--slate-500);font-size:0.9rem">{list.length}편</span></div><div class="grid">{list.map((p) => <PostCard post={p} />)}</div></section>);
+      })}
+    </div>
   </div>
 </Base>
+<style>
+  /* 카테고리 블록이 글 수만큼만 칸을 차지한다. 데스크톱 3열 → 태블릿 2열 → 모바일 1열 */
+  .cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem 1.25rem; margin-top: 2.4rem; align-items: start; }
+  .cat { scroll-margin-top: 90px; min-width: 0; }
+  .cat .section-title { margin-bottom: 1rem; }
+  .cat .grid { grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
+  .span-1 { grid-column: span 1; --cols: 1; }
+  .span-2 { grid-column: span 2; --cols: 2; }
+  .span-3 { grid-column: span 3; --cols: 3; }
+  @media (max-width: 1000px) {
+    .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .span-3 { grid-column: span 2; --cols: 2; }
+  }
+  @media (max-width: 660px) {
+    .cat-grid { grid-template-columns: 1fr; gap: 2rem; }
+    .span-2, .span-3 { grid-column: span 1; --cols: 1; }
+  }
+</style>

supporters/src/styles/global.css

@@ -200,6 +200,14 @@ td { color: var(--slate-700); }
 .site-header .right { display: flex; align-items: center; gap: 1rem; }
 .site-header .cta { background: linear-gradient(to right, var(--grad-start), var(--grad-end)); color: #fff; border-radius: 999px; padding: 0.5rem 1.05rem; font-size: 0.86rem; font-weight: 600; }
 .site-header .cta:hover { text-decoration: none; box-shadow: var(--shadow); }
+.nav a, .site-header .cta, .brand-text { white-space: nowrap; }
+/* 720~1040px: 메뉴 5개가 한 줄에 들어가도록 간격·크기 축소, 브랜드 영문 서브 숨김 */
+@media (max-width: 1040px) {
+  .nav a { margin-left: 0.85rem; font-size: 0.86rem; }
+  .site-header .right { gap: 0.7rem; }
+  .site-header .cta { padding: 0.45rem 0.85rem; font-size: 0.82rem; }
+  .brand-text small { display: none; }
+}
 @media (max-width: 720px) {
   .hero-light .inner { grid-template-columns: 1fr; }
   .hero-light h1 { font-size: 1.9rem; }