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

@@ -59,35 +59,41 @@ const sizes: { size: InputSize; name: string; height: number; padding: number; t
   { size: "large", name: "Large", height: 42, padding: 12, typography: "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-input-size={spec.size}>
-      <Specimen size={spec.size} label={spec.name} defaultValue={`${spec.name} ${spec.height}px`} />
-      <dl className="m-0 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
-        <dt className="text-muted-foreground">Height</dt>
-        <dd className="m-0">{spec.height}px</dd>
-        <dt className="text-muted-foreground">Padding</dt>
-        <dd className="m-0">0 / {spec.padding}px</dd>
-        <dt className="text-muted-foreground">Typography</dt>
-        <dd className="m-0">{spec.typography}</dd>
-        <dt className="text-muted-foreground">Usage</dt>
-        <dd className="m-0">{spec.usage}</dd>
-      </dl>
+      {/* Without the spec list the value would repeat the size name, so it shows sample text instead. */}
+      <Specimen size={spec.size} label={spec.name} defaultValue={showSpec ? `${spec.name} ${spec.height}px` : "Hanmac Project"} />
+      {showSpec ? (
+        <dl className="m-0 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+          <dt className="text-muted-foreground">Height</dt>
+          <dd className="m-0">{spec.height}px</dd>
+          <dt className="text-muted-foreground">Padding</dt>
+          <dd className="m-0">0 / {spec.padding}px</dd>
+          <dt className="text-muted-foreground">Typography</dt>
+          <dd className="m-0">{spec.typography}</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">
-        높이는 입력 컨트롤의 외곽 높이입니다. 값·Placeholder 글자는 size를 따르고 Label 14/20/500은 공통입니다. 업무 폼·조회 조합은 Medium을 쓰며, size를 생략하면 Large입니다.
-      </p>
+      {showSpec ? (
+        <p className="text-sm text-muted-foreground">
+          높이는 입력 컨트롤의 외곽 높이입니다. 값·Placeholder 글자는 size를 따르고 Label 14/20/500은 공통입니다. 업무 폼·조회 조합은 Medium을 쓰며, size를 생략하면 Large입니다.
+        </p>
+      ) : null}
     </div>
   )
 }
@@ -118,33 +124,27 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-// Representative Story: the common Story page (Overview → Sizes → States → Validation). Focus is placed by the play function.
+// Representative Story: the common Story page (Sizes → States → Validation). Focus is placed by the play function.
 // Named after the component, as in ui_viz.
 export const All: Story = {
   name: "Input",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
-      <StoryPageHeader
-        title="Input"
-        description="Label·Helper·Error 문구는 소비 조합"
-      />
-      <StorySection title="Overview" description="기본값: Large 42px">
-        <StateBoard states={[{ id: "default", label: "Default · size 생략(Large)", children: <Specimen placeholder={placeholder} /> }]} />
+      <StoryPageHeader title="Input" />
+      <StorySection title="Sizes">
+        <SizeComparison showSpec={false} />
       </StorySection>
-      <StorySection title="Sizes" description="28 / 34 / 42px · 업무 폼·조회는 Medium">
-        <SizeComparison />
-      </StorySection>
-      <StorySection title="States" description="Focus·Error 1.5px 테두리 · Hover 없음 · Disabled 60%">
+      <StorySection title="States">
         <StateBoard
           states={[
             { id: "focus", label: "Focus", children: <Specimen size="medium" placeholder={placeholder} /> },
             { id: "disabled", label: "Disabled", children: <Specimen disabled defaultValue="Unavailable project" /> },
-            { id: "readonly", label: "Readonly", note: readonlyNote, noteAfter: true, children: <Specimen readOnly value="Confirmed project" /> },
+            { id: "readonly", label: "Readonly", children: <Specimen readOnly value="Confirmed project" /> },
           ]}
         />
       </StorySection>
-      <StorySection title="Validation" description="aria-invalid → Error 테두리 · 오류 문구는 소비 조합">
+      <StorySection title="Validation">
         <StateBoard
           states={[
             { id: "error", label: "Error", children: <Specimen size="medium" error defaultValue="Invalid value" /> },