diff --git a/src/components/story-page.css b/src/components/story-page.css index c5a60d1..934db33 100644 --- a/src/components/story-page.css +++ b/src/components/story-page.css @@ -1,8 +1,7 @@ /* Storybook presentation only. Common page frame for representative Stories; all selectors stay inside .sb-page. - Inner (max 1280, gutter 16–40) and title (kicker 12 / title 28·36·700 / description, underlined) reuse Foundation / Color. + Inner (fluid, 60px each side; 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-max-width: 1280px; --sb-page-gutter: clamp(16px, 3vw, 40px); box-sizing: border-box; width: 100%; @@ -13,17 +12,11 @@ } .sb-page > .sb-page-inner { box-sizing: border-box; - /* Keep the established content width: the 1280px envelope includes both gutters. */ - width: calc(min(100%, var(--sb-page-max-width)) - 2 * var(--sb-page-gutter)); + /* 2026-11-05 (user request): no max width; the Inner follows the page width and keeps 60px on each side. */ + width: calc(100% - 120px); min-width: 0; margin-inline: auto; } -/* Wide screens (2026-10-22, user request): 80% of the viewport — 1536px at 1920px, 2048px at 2560px, 3072px at - 3840px — growing with the screen (vw, so a scrollbar does not shrink it); never wider than the page minus the - gutters, so no horizontal scroll. Below 1920px the rule above applies. */ -@media (min-width: 1920px) { - .sb-page > .sb-page-inner { width: min(80vw, calc(100% - 2 * var(--sb-page-gutter))); } -} .sb-page .sb-page-header { padding-bottom: 24px;