style(storybook): refine data display story layout

src/components/carousel.stories.tsx

@@ -142,20 +142,45 @@ const meta = { title: "Components/Data & Display/Carousel", component: Carousel,
 export default meta
 type Story = StoryObj<typeof meta>
 
-const board = (...ids: string[]) => (
-  <StateBoard min={460} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
-)
+// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
+// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
+// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
+// The Media example spans two columns; carousels fill their column by design.
+const specimenColumns = {
+  2: "min-[1000px]:grid-cols-2",
+  3: "min-[1000px]:grid-cols-3",
+  4: "min-[1000px]:grid-cols-4",
+} as const
+
+function SpecimenGrid({ ids, columns, spans = {} }: { ids: string[]; columns: 2 | 3 | 4; spans?: Record<string, 2> }) {
+  return (
+    <div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${specimenColumns[columns]}`}>
+      {ids.map((id) => {
+        const s = sections.find((section) => section.id === id)!
+        return (
+          <div key={id} className={spans[id] ? "min-[1000px]:col-span-2" : undefined}>
+            <StateBoard min={10000} states={[{ id: s.id, label: s.label, children: s.node }]} />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
 
 // Representative Story: the common Story page; the sections group the same specimens.
+// Representative Story: Overview (Basic) is merged into Variants (Basic, Multiple items, Loop, Vertical), 4 columns on PC; Media stays under Usage.
 export const All: Story = {
   name: "Carousel",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Carousel" />
-      <StorySection title="Overview">{board("basic")}</StorySection>
-      <StorySection title="Variants">{board("multiple", "loop", "vertical")}</StorySection>
-      <StorySection title="Usage">{board("media")}</StorySection>
+      <StorySection title="Variants">
+        <SpecimenGrid ids={["basic", "multiple", "loop", "vertical"]} columns={4} />
+      </StorySection>
+      <StorySection title="Usage">
+        <SpecimenGrid ids={["media"]} columns={4} spans={{ media: 2 }} />
+      </StorySection>
     </StoryPage>
   ),
 }