fix(storybook): refine responsive page inner width

- Story page Inner side margin: 16px up to a 480px viewport, linear to 60px at 768px, 60px beyond (no width jump)
- Follow the 60px margins: Responsive 1920 row from a 2040px page (was 2000px); property compare 3 columns from 1125px, 2 columns from 787px (was 1080 / 720)
- SW browser tests: drop the removed --sb-page-max-width override, compare thresholds 787 / 1125

src/components/story-page.css

@@ -1,5 +1,5 @@
 /* Storybook presentation only. Common page frame for representative Stories; all selectors stay inside .sb-page.
-   Inner (fluid, 60px each side; vertical gutter 16–40) and title (kicker 12 / title 28·36·700 / description, underlined) reuse Foundation / Color.
+   Inner (fluid; 16px each side up to 480px, growing to 60px at 768px; vertical gutter 16–40) and title (kicker 12 / title 28·36·700 / description, underlined) reuse Foundation / Color.
    Section reuses the Center Graphic / 교량 split: heading + description, a divider, then the specimen. */
 .sb-page {
   --sb-page-gutter: clamp(16px, 3vw, 40px);
@@ -12,8 +12,10 @@
 }
 .sb-page > .sb-page-inner {
   box-sizing: border-box;
-  /* 2026-11-05 (user request): no max width; the Inner follows the page width and keeps 60px on each side. */
-  width: calc(100% - 120px);
+  /* 2026-11-05 (user request): no max width; the Inner follows the page width. Side margin (each side) = 16px up to a
+     480px viewport (358px Inner at 390px, so a 314px specimen fits), then linear to 60px at 768px (44px over 288px,
+     11 / 72 of the viewport growth), 60px from 768px. The Inner keeps growing (about 0.69px per 1px), with no jump. */
+  width: calc(100% - 2 * clamp(16px, calc(16px + (100vw - 480px) * 11 / 72), 60px));
   min-width: 0;
   margin-inline: auto;
 }

src/sw/sw-footer-stories.css

@@ -32,7 +32,7 @@
 .sw-footer-story-inline { display: inline-flex; flex-direction: column; padding: 0; }
 .sw-footer-story-width + .sw-footer-story-width { margin-top: 16px; }
 /* The hidden 1920px row (Responsive More, narrower than 1920px) takes its gap with it. */
-@container sw-story-page (max-width: 1999.98px) { .sw-story-responsive-hidden + .sw-footer-story-width { margin-top: 0; } }
+@container sw-story-page (max-width: 2039.98px) { .sw-story-responsive-hidden + .sw-footer-story-width { margin-top: 0; } }
 .sw-footer-story-aux-compare { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 16px; }
 .sw-footer-story-aux-row { display: flex; align-items: center; gap: 12px; margin: 0; }
 .sw-footer-story-aux-row figcaption { flex: 0 0 120px; font-size: 12px; color: #3d4a45; }

src/sw/sw-stories.css

@@ -1,12 +1,13 @@
 /* Story canvas only: frames that simulate a header width. Never styles the header itself. */
 .sw-story-scroller { max-width: 100%; overflow-x: auto; }
 /* Responsive More pages: the 1920px row (sw-story-responsive-hidden) shows when the page has 1920px of usable width —
-   the page (container sw-story-page, not the browser) minus its 40px gutters, so 2000px; with less room the whole row —
+   the page (container sw-story-page, not the browser) minus the Inner's 60px side margins (story-page.css,
+   60px from a 768px viewport), so 2040px (2026-11-05; was 2000px with the former 40px gutters); with less room the whole row —
    title, header, background, margin — is hidden. 2026-10-23: it stays inside the Story column like every other row (the
    former reach-out of the 80vw Inner, sw-story-responsive-wide, is gone); its preview is at most 1920px wide. */
 .sw-story-responsive { container-type: inline-size; }
 .sb-page:has(.sw-story-responsive) { container: sw-story-page / inline-size; }
-@container sw-story-page (max-width: 1999.98px) { .sw-story-responsive-hidden { display: none; } }
+@container sw-story-page (max-width: 2039.98px) { .sw-story-responsive-hidden { display: none; } }
 .sw-story-frame { background: #060606; }
 /* Shared drawing-area canvas of the SW Stories (2026-10-19): the SW/Viewer black grid — 40px cells, 1px lines of
    HM green #266651 at 18%, on #0A0A0B. Used behind the SW Header work area and dropdown room and the viewer frames. */
@@ -43,18 +44,22 @@
 /* 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). */
+   "all" sits 24px under "none". Narrower screens: 2 columns × 2 rows, and one column below 787px; no Inner scroller
+   and no sideways scroll (2026-10-22). 2026-11-05: each step needs its columns plus the Inner's 60px side margins
+   (120, story-page.css) and a ~15px vertical scrollbar (the media queries read the viewport): 3 columns from 1125px
+   (3 × 314 + 2 × 24 = 990), 2 columns from 787px (2 × 314 + 24 = 652). Before: 1080px / 720px with 16–40px gutters.
+   Both steps sit above 768px, where the margins are 60px. The single column always fits: the margins are 16px up to
+   480px and grow to 60px by 768px (story-page.css), so 375 / 390px screens have 343 / 358px for the 314px panel. */
 .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) {
+@media (min-width: 1125px) {
   .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; } }
+@media (max-width: 786.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. */
 .sw-story-compare--grid .hm-sw-property { max-height: none; }