style(storybook): unify page hierarchy and compact layouts

src/components/toggle.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite"
 import { BoldIcon, ItalicIcon, StarIcon } from "lucide-react"
 import { Toggle, ToggleGroup, ToggleGroupItem } from "@hm-design/ui"
 import { StateBoard, type BoardState } from "@/components/story-board"
-import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
 
 // Toggle is a persistent pressed-state control. The representative Story shows each state with real, clickable toggles; the same
 // specimens also exist as Stories tagged `verification` (hidden from the sidebar). Icon-only toggles carry an `aria-label`.
@@ -97,14 +97,14 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Toggle" />
-      <div className="grid gap-x-6 min-[1000px]:grid-cols-3">
+      <StorySectionGrid className="grid-cols-1 min-[1000px]:grid-cols-3">
         <StorySection title="Variants">
           <StateBoard min={10000} states={[specimen("offon")]} />
         </StorySection>
         <StorySection title="States">
           <StateBoard min={10000} states={[specimen("disabled")]} />
         </StorySection>
-      </div>
+      </StorySectionGrid>
       <StorySection title="단독 · 연결 그룹">
         <SpecimenGrid
           states={[