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/checkbox.stories.tsx

@@ -17,10 +17,11 @@ function Option({ label, children }: { label: string; children: (id: string) =>
   )
 }
 
+// Starts indeterminate; a click makes it checked (Radix), so the Indeterminate example is also the interactive one.
 function Controlled() {
   const [checked, setChecked] = useState<boolean | "indeterminate">("indeterminate")
   return (
-    <Option label={`Select all (${String(checked)})`}>
+    <Option label="Option">
       {(id) => <Checkbox id={id} checked={checked} onCheckedChange={setChecked} />}
     </Option>
   )
@@ -47,18 +48,14 @@ export const All: Story = {
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
-      <StoryPageHeader
-        title="Checkbox"
-        description="18px 박스 · Checked·Indeterminate는 state-active 색"
-      />
+      <StoryPageHeader title="Checkbox" />
       <StorySection title="Overview">
         <StateBoard
           min={240}
           states={[
             { id: "unchecked", label: "Unchecked", children: <Option label="Option">{(id) => <Checkbox id={id} />}</Option> },
             { id: "checked", label: "Checked", children: <Option label="Option">{(id) => <Checkbox id={id} defaultChecked />}</Option> },
-            { id: "indeterminate", label: "Indeterminate", children: <Option label="Option">{(id) => <Checkbox id={id} checked="indeterminate" />}</Option> },
-            { id: "interactive", label: "Controlled · click toggles", noteAfter: true, note: "Indeterminate에서 클릭하면 checked가 됩니다(Radix).", children: <Controlled /> },
+            { id: "indeterminate", label: "Indeterminate", children: <Controlled /> },
           ]}
         />
       </StorySection>
@@ -66,7 +63,17 @@ export const All: Story = {
         <StateBoard
           min={240}
           states={[
-            { id: "hover", label: "Hover", noteAfter: true, note: "Unchecked는 테두리가 primary 색, Checked는 Black 20% overlay. 포인터를 올려 확인합니다.", children: <Option label="Option">{(id) => <Checkbox 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="Unchecked">{(id) => <Checkbox id={id} data-sb-hover="" />}</Option>
+                  <Option label="Checked">{(id) => <Checkbox id={id} defaultChecked data-sb-hover="" />}</Option>
+                </div>
+              ),
+            },
             { id: "focus", label: "Focus", children: <Option label="Option">{(id) => <Checkbox id={id} />}</Option> },
             {
               id: "disabled",
@@ -81,7 +88,7 @@ export const All: Story = {
           ]}
         />
       </StorySection>
-      <StorySection title="Validation" description="aria-invalid → Error 테두리">
+      <StorySection title="Validation">
         <StateBoard min={240} states={[{ id: "error", label: "Error", children: <Option label="Option">{(id) => <Checkbox id={id} aria-invalid />}</Option> }]} />
       </StorySection>
       <StorySection title="Usage">