refactor(storybook): simplify component and preview examples

Drop page / section descriptions, state notes and repeated captions from
the representative Stories of 44 components, the Patterns, Center
Graphic and OrgChart pages. Value readouts, spec lists and captions hide
only on the representative page; hidden verification Stories keep them.
Tabs Default API and the Filter Bar draft / applied counts move to the
hidden DefaultApi and DraftApplied Stories; Center Overview is hidden
with its direct URL kept. Story IDs are unchanged.

Align the component, pattern and OrgChart docs with the pages, point the
quality reference check at the DraftApplied Story, and make the P8
styles check expect no section header on the preview-only Expanded page.

src/components/switch.stories.tsx

@@ -1,4 +1,4 @@
-import { useId, useState, type ReactNode } from "react"
+import { useId, type ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { Label, Switch } from "@hm-design/ui"
 import { StateBoard } from "@/components/story-board"
@@ -14,11 +14,6 @@ function Option({ label, children }: { label: string; children: (id: string) =>
   )
 }
 
-function Controlled() {
-  const [on, setOn] = useState(false)
-  return <Option label={`Notifications (${on ? "on" : "off"})`}>{(id) => <Switch id={id} checked={on} onCheckedChange={setOn} />}</Option>
-}
-
 const meta = {
   title: "Components/Form/Switch",
   component: Switch,
@@ -40,17 +35,13 @@ export const All: Story = {
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
-      <StoryPageHeader
-        title="Switch"
-        description="트랙 36×20 · 썸 16 · On은 state-active 색"
-      />
+      <StoryPageHeader title="Switch" />
       <StorySection title="Overview">
         <StateBoard
           min={240}
           states={[
             { id: "off", label: "Off", children: <Option label="Option">{(id) => <Switch id={id} />}</Option> },
             { id: "on", label: "On", children: <Option label="Option">{(id) => <Switch id={id} defaultChecked />}</Option> },
-            { id: "interactive", label: "Controlled · click toggles", children: <Controlled /> },
           ]}
         />
       </StorySection>
@@ -58,7 +49,17 @@ export const All: Story = {
         <StateBoard
           min={240}
           states={[
-            { id: "hover", label: "Hover", noteAfter: true, note: "Black 20% overlay. 포인터를 올려 확인합니다.", children: <Option label="Option">{(id) => <Switch id={id} />}</Option> },
+            {
+              id: "hover",
+              label: "Hover",
+              // data-sb-hover pins :hover (Storybook only, .storybook/pseudo-states.ts).
+              children: (
+                <div className="grid gap-3">
+                  <Option label="Off">{(id) => <Switch id={id} data-sb-hover="" />}</Option>
+                  <Option label="On">{(id) => <Switch id={id} defaultChecked data-sb-hover="" />}</Option>
+                </div>
+              ),
+            },
             { id: "focus", label: "Focus", children: <Option label="Option">{(id) => <Switch id={id} />}</Option> },
             {
               id: "disabled",