feat(sw): 3-column property compare, clamp Overview panel, narrower viewer file name

- Property Panel compare page: from 1080px, none/all stacked in column 1,
  circle and expanded side by side (2x2 and 1 column below)
- Overview Stage: the property panel is clamped to the Stage height so the
  Stage gets no scrollbar; the panel body scrolls
- Viewer header file name: clamp(140px, calc(45cqw - 256px), 360px) so a
  950px header shows no More; 1280px and wider unchanged

src/sw/sw-header-overview.tsx

@@ -151,7 +151,7 @@ export function SWHeaderOverview({ initial, fixtures, propertyGroups, propertyFi
     </div>}
     <div ref={slotRef} className="sw-overview-slot" data-preview-slot="">
       <div className="sw-overview-stage" data-preview-stage="" role="region" tabIndex={0} aria-label="SW Header 16:9 미리보기, 작은 화면에서는 내부 스크롤"
-        style={{ ...size, "--sw-preview-panel-left": `${panelLeft}px`, "--sw-preview-panel-top": barOpen ? "77px" : "49px" } as CSSProperties}>
+        style={{ ...size, "--sw-preview-stage-height": `${size.height}px`, "--sw-preview-panel-left": `${panelLeft}px`, "--sw-preview-panel-top": barOpen ? "77px" : "49px" } as CSSProperties}>
         <div className="sw-overview-world">
           <SWHeader ref={headerRef} {...initial}
             documents={documents} activeDocumentId={documentId} documentTitle={documents.find(document => document.id === documentId)?.name ?? "열린 문서 없음"}

src/sw/sw-header.stories.tsx

@@ -918,7 +918,8 @@ function PropertyState({ example, shapeContent, onLog }: { example: PropertyExam
     onClose={() => onLog?.("close")} /></SWTheme>
 }
 /** Design check only: a real header shows one panel for the current selection.
-    2 columns × 2 rows at the panels' own size; the Inner scrolls instead of shrinking or wrapping them. */
+    3 columns at the panels' own size (none/all stacked, circle and expanded side by side); narrower screens fall back to
+    2 × 2, then one column (sw-stories.css). */
 function PropertyCompare() {
   const [log, setLog] = useState<string[]>([])
   return <>

src/sw/sw-stories.css

@@ -40,11 +40,20 @@
 .sw-story-compare { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
 .sw-story-compare__cell { margin: 0; }
 .sw-story-compare__cell figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; font-size: 12px; color: #3d4a45; }
-/* Property panel 4-state comparison: 2 columns × 2 rows at the panels' own size (314px wide, never shrunk).
-   2026-10-22 (user request): no Inner scroller — the page scrolls normally, and a screen too narrow for two
-   panels (2 × 314 + 24px gap + gutters) shows one column instead of scrolling sideways. */
+/* Property panel 4-state comparison at the panels' own size (314px wide, never shrunk).
+   2026-10-26 (user request): 3 columns — the short panels (none, all) stacked in column 1, the long ones (circle,
+   expanded) side by side in columns 2 and 3. Rows are auto / 1fr so the long panels' height goes to row 2 only and
+   "all" sits 24px under "none". Narrower screens: 2 columns × 2 rows (3 × 314 + 2 gaps + gutters do not fit), and one
+   column below 720px; no Inner scroller and no sideways scroll (2026-10-22). */
 .sw-story-compare-page .sw-story-log { margin-top: 12px; }
 .sw-story-compare.sw-story-compare--grid { display: grid; grid-template-columns: repeat(2, max-content); align-items: start; gap: 24px; }
+@media (min-width: 1080px) {
+  .sw-story-compare.sw-story-compare--grid { grid-template-columns: repeat(3, max-content); grid-template-rows: auto 1fr; }
+  .sw-story-compare--grid > [data-compare="none"] { grid-area: 1 / 1; }
+  .sw-story-compare--grid > [data-compare="all"] { grid-area: 2 / 1; }
+  .sw-story-compare--grid > [data-compare="circle"] { grid-area: 1 / 2 / span 2; }
+  .sw-story-compare--grid > [data-compare="expanded"] { grid-area: 1 / 3 / span 2; }
+}
 @media (max-width: 719.98px) { .sw-story-compare.sw-story-compare--grid { grid-template-columns: max-content; } }
 /* Placement-only exception, same as the Overview Stage: the product clamps a panel to the viewport
    height; here the scroller provides the room so the 754px panel keeps its size. */
@@ -68,9 +77,11 @@
 .sw-overview-slot { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
 .sw-overview-stage { flex: 0 0 auto; overflow: auto; overscroll-behavior: contain; background: var(--sw-story-canvas); outline: 1px solid var(--hm-sem-stroke-input-default); }
 .sw-overview-world { min-width: 390px; min-height: 100%; position: relative; }
-/* Placement-only Storybook exception: keep the original panel size/content in the Stage scroll area.
+/* Placement-only Storybook exception: the panel sits in the Stage. 2026-10-26 (user request): no Stage scrollbar when
+   it opens — the panel is clamped to the Stage height (as the product clamps it to the viewport) and its body scrolls.
+   The Stage height comes from the Story (--sw-preview-stage-height): the panel's containing block is the Header.
    Header's public API deliberately excludes panel style; package CSS and other Stories stay untouched. */
-.sw-overview-stage .hm-sw-property { position: absolute !important; left: var(--sw-preview-panel-left) !important; top: var(--sw-preview-panel-top) !important; max-height: none !important; }
+.sw-overview-stage .hm-sw-property { position: absolute !important; left: var(--sw-preview-panel-left) !important; top: var(--sw-preview-panel-top) !important; max-height: calc(var(--sw-preview-stage-height) - var(--sw-preview-panel-top) - 4px) !important; }
 /* The document wrapper otherwise stacks below the independently positioned property Bar. */
 .sw-overview-stage .hm-sw-header__document:has(.hm-sw-header__document-menu) { z-index: 3; }
 /* Responsive More measured section: Storybook controls (width range, host content toggles) above the frame. */