style(storybook): group overlay, disclosure and navigation story pages

- Sheet + Drawer, Tooltip + Hover Card, Accordion + Collapsible,
  Dialog + Alert Dialog, Dropdown Menu + Context Menu on one page each
  (specimens moved to *-examples.tsx; absorbed Stories keep their IDs)
- Popover, Tabs content spacing, Breadcrumb, Menubar and Command tidied
- Component docs updated to the new representative pages

src/components/collapsible-examples.tsx

@@ -0,0 +1,96 @@
+import { useState, type ReactNode } from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@hm-design/ui"
+import { StateBoard, type BoardState } from "@/components/story-board"
+import { StorySection } from "@/components/story-page"
+
+// Shared Collapsible specimens (Storybook only). Used by the Collapsible Stories (verification) and by the Accordion
+// representative page, which shows Accordion and Collapsible under one sidebar item ("접기·펼치기").
+// One independent disclosure per state with real, clickable triggers. Collapsible is a single disclosure: no divider system
+// and no animation.
+
+const longText = "긴 텍스트는 줄바꿈으로 전체를 표시합니다. 공백 없는 긴 문자열도 너비를 밀어내지 않고 줄바꿈합니다. ".repeat(6)
+
+const narrow = (children: ReactNode) => <div className="w-full max-w-md">{children}</div>
+
+function Frame({ label, defaultOpen, disabled, children }: { label: string; defaultOpen?: boolean; disabled?: boolean; children: ReactNode }) {
+  return narrow(
+    <Collapsible defaultOpen={defaultOpen} disabled={disabled}>
+      <CollapsibleTrigger>
+        {label}
+        <ChevronDownIcon aria-hidden />
+      </CollapsibleTrigger>
+      <CollapsibleContent>{children}</CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+export const ClosedSpecimen = () => <Frame label="고급 설정 보기">추가 옵션이 여기에 표시됩니다.</Frame>
+export const OpenSpecimen = () => (
+  <Frame label="고급 설정 보기" defaultOpen>
+    처음부터 열려 있는 영역입니다.
+  </Frame>
+)
+export const DisabledSpecimen = () => (
+  <Frame label="비활성 영역" disabled>
+    열 수 없습니다.
+  </Frame>
+)
+export const LongSpecimen = () => (
+  <Frame label="긴 콘텐츠" defaultOpen>
+    <p>{longText}</p>
+    <p className="mt-2">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
+  </Frame>
+)
+
+// Controlled: the parent owns `open`; an HM Button is the trigger through asChild and keeps its style.
+export function ControlledSpecimen() {
+  const [open, setOpen] = useState(false)
+  return narrow(
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger asChild>
+        <Button variant="primary" appearance="outline">
+          {open ? "접기" : "펼치기"}
+        </Button>
+      </CollapsibleTrigger>
+      {/* 2026-11-13: sample content instead of the former `controlled: open = …` debug text; the trigger label shows the state. */}
+      <CollapsibleContent>펼친 영역의 내용입니다.</CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+const sections = [
+  { id: "closed", label: "Closed", node: <ClosedSpecimen /> },
+  { id: "open", label: "Open", node: <OpenSpecimen /> },
+  { id: "disabled", label: "Disabled", node: <DisabledSpecimen /> },
+  { id: "long", label: "Long Content", node: <LongSpecimen /> },
+  { id: "controlled", label: "Button trigger", node: <ControlledSpecimen /> },
+]
+
+// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), one column
+// below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so the title and
+// specimen start line up, unused columns stay empty and `items-start` lets an opened item grow without touching its neighbors.
+function StateGrid({ states, cols }: { states: BoardState[]; cols: 2 | 3 }) {
+  return (
+    <div className={`grid grid-cols-1 items-start gap-6 ${cols === 3 ? "min-[1000px]:grid-cols-3" : "min-[1000px]:grid-cols-2"}`}>
+      {states.map((state) => (
+        <StateBoard key={state.id} min={10000} states={[state]} />
+      ))}
+    </div>
+  )
+}
+
+// The Collapsible sections of a representative page. `titlePrefix` names the component in each section title and `idPrefix`
+// keeps the specimen ids (data-overview-state) unique when the sections share a page with other components.
+export function CollapsibleSections({ titlePrefix, idPrefix = "" }: { titlePrefix?: string; idPrefix?: string }) {
+  const title = (name: string) => (titlePrefix ? `${titlePrefix} · ${name}` : name)
+  const board = (cols: 2 | 3, ...ids: string[]) => (
+    <StateGrid cols={cols} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: `${idPrefix}${s.id}`, label: s.label, children: s.node }))} />
+  )
+  return (
+    <>
+      <StorySection title={title("States")}>{board(3, "closed", "open", "disabled")}</StorySection>
+      <StorySection title={title("Usage")}>{board(3, "long", "controlled")}</StorySection>
+    </>
+  )
+}