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

@@ -71,35 +71,40 @@ const sizes = [
   { size: "large" as const, name: "Large", outer: "44px / 42px", typography: "16 / 24 / 400", option: "42px minimum · 16 / 24 / 400", usage: "Component default" },
 ]
 
-function SizeCard({ spec }: { spec: (typeof sizes)[number] }) {
+function SizeCard({ spec, showSpec = true }: { spec: (typeof sizes)[number]; showSpec?: boolean }) {
   return (
     <section className="grid content-start gap-4" data-select-size={spec.size}>
       <SelectSpecimen size={spec.size} label={spec.name} placeholder="Choose a status" />
-      <dl className="m-0 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
-        <dt className="text-muted-foreground">Outer Height / Trigger</dt>
-        <dd className="m-0">{spec.outer}</dd>
-        <dt className="text-muted-foreground">Trigger Typography</dt>
-        <dd className="m-0">{spec.typography}</dd>
-        <dt className="text-muted-foreground">Option</dt>
-        <dd className="m-0">{spec.option}</dd>
-        <dt className="text-muted-foreground">Usage</dt>
-        <dd className="m-0">{spec.usage}</dd>
-      </dl>
+      {showSpec ? (
+        <dl className="m-0 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+          <dt className="text-muted-foreground">Outer Height / Trigger</dt>
+          <dd className="m-0">{spec.outer}</dd>
+          <dt className="text-muted-foreground">Trigger Typography</dt>
+          <dd className="m-0">{spec.typography}</dd>
+          <dt className="text-muted-foreground">Option</dt>
+          <dd className="m-0">{spec.option}</dd>
+          <dt className="text-muted-foreground">Usage</dt>
+          <dd className="m-0">{spec.usage}</dd>
+        </dl>
+      ) : null}
     </section>
   )
 }
 
-function SizeComparison() {
+// `showSpec={false}` keeps the representative page UI-only; the verification Story keeps the spec lists and the size note.
+function SizeComparison({ showSpec = true }: { showSpec?: boolean }) {
   return (
     <div className="grid max-w-[1120px] gap-6">
       <div className="grid gap-6 [grid-template-columns:repeat(auto-fit,minmax(240px,1fr))]">
         {sizes.map((spec) => (
-          <SizeCard key={spec.size} spec={spec} />
+          <SizeCard key={spec.size} spec={spec} showSpec={showSpec} />
         ))}
       </div>
-      <p className="text-sm text-muted-foreground">
-        Select는 Input과 독립된 두 크기(Medium 34 / Large 44)입니다. 각 Trigger를 클릭해 연결된 목록과 선택 상태를 확인하세요. 목록의 Option은 Trigger의 size를 그대로 따르며(최소 높이 42px, Medium 14/20/400, Large 16/24/400) 폭은 항상 Trigger와 같습니다.
-      </p>
+      {showSpec ? (
+        <p className="text-sm text-muted-foreground">
+          Select는 Input과 독립된 두 크기(Medium 34 / Large 44)입니다. 각 Trigger를 클릭해 연결된 목록과 선택 상태를 확인하세요. 목록의 Option은 Trigger의 size를 그대로 따르며(최소 높이 42px, Medium 14/20/400, Large 16/24/400) 폭은 항상 Trigger와 같습니다.
+        </p>
+      ) : null}
     </div>
   )
 }
@@ -144,52 +149,32 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // Representative Story: every state on one page. Named after the component, as in ui_viz.
-// The open list is a Radix popover: press Escape or click outside to close it, click the trigger to reopen.
+// It starts at Sizes; each trigger opens the real list (the open-on-load list is the hidden `Open` Story).
 export const All: Story = {
   name: "Select",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
-      <StoryPageHeader
-        title="Select"
-        description="Option은 Trigger size를 따르고 목록 폭 = Trigger 폭"
-      />
-      {/* Open stays in the first section: the list opens on load, so its trigger must be on the first screen. */}
-      <StorySection title="Overview" description="기본값: Large 44px · 열린 목록">
-        <StateBoard
-          fixed
-          states={[
-            { id: "default", label: "Default · Large (size 생략)", children: <SelectSpecimen /> },
-            {
-              id: "open",
-              label: "Open",
-              children: (
-                <div className="min-h-64">
-                  <SelectSpecimen size="medium" defaultOpen />
-                </div>
-              ),
-            },
-          ]}
-        />
-      </StorySection>
-      <StorySection title="Sizes" description="34 / 44px · Input과 별도 크기">
-        <SizeComparison />
+      <StoryPageHeader title="Select" />
+      <StorySection title="Sizes">
+        <SizeComparison showSpec={false} />
       </StorySection>
       <StorySection title="States">
         <StateBoard
           fixed
           states={[
-            { id: "selected", label: "Selected", children: <SelectSpecimen size="medium" defaultValue="active" /> },
-            { id: "disabled", label: "Disabled", children: <DisabledStates /> },
+            { id: "selected", label: "Selected", children: <SelectSpecimen size="medium" label="Status" defaultValue="active" /> },
+            { id: "disabled", label: "Disabled", children: <SelectSpecimen size="medium" label="Status" defaultValue="active" disabled /> },
+            { id: "disabled-placeholder", label: "Disabled · Placeholder", children: <SelectSpecimen size="medium" label="Status" disabled /> },
           ]}
         />
       </StorySection>
-      <StorySection title="Invalid / Focus" description="aria-invalid → Error 테두리">
+      <StorySection title="Invalid / Focus">
         <StateBoard
           fixed
           states={[
-            { id: "invalid", label: "Invalid", children: <SelectSpecimen size="medium" aria-invalid label="Invalid Select" defaultValue="active" /> },
-            { id: "invalid-disabled", label: "Invalid · Disabled", children: <SelectSpecimen size="medium" aria-invalid disabled label="Disabled Invalid Select" /> },
+            { id: "invalid", label: "Invalid", children: <SelectSpecimen size="medium" aria-invalid label="Status" defaultValue="active" /> },
+            { id: "invalid-disabled", label: "Invalid · Disabled", children: <SelectSpecimen size="medium" aria-invalid disabled label="Status" /> },
           ]}
         />
       </StorySection>