docs(storybook): simplify sidebar Story pages around the UI

Drop the category kicker from the 83 sidebar Stories (kicker is now optional;
hidden verification Stories keep it) and shorten or remove repeated, obvious
or internal page/section descriptions. Required specs, limits, virtual-data
and undecided-value notices stay. Story IDs, exports, fixtures, shared state
notes and package code are unchanged. Record: docs/reports/storybook-ui-simplification-2026-10-22.md

src/org-chart/org-chart-expanded.stories.tsx

@@ -113,11 +113,10 @@ function ExpandedPreview() {
 
   return <StoryPage className="hm-orgchart-story-page hm-orgchart-story-expanded">
     <StoryPageHeader
-      kicker="HM DESIGN SYSTEM / ORGCHART"
       title="Expanded OrgChart"
-      description="데이터·회사·표시 유형을 선택하고 직원 카드를 눌러 정보를 확인하세요. 모든 직원은 가상 데이터입니다."
+      description="모든 직원은 가상 데이터"
     />
-    <StorySection title="데이터 설정" description="회사 선택은 즉시 반영됩니다. 회사당 직원 수 변경은 데이터 적용을 눌러 반영합니다.">
+    <StorySection title="데이터 설정" description="직원 수 변경은 데이터 적용으로 반영">
       <fieldset className="hm-orgchart-story-settings">
         <legend className="hm-orgchart-story-section-legend">데이터 설정</legend>
         <FilterBar layout="list-extended">
@@ -167,7 +166,7 @@ function ExpandedPreview() {
         <p className="hm-orgchart-story-note">회사 숨김·다시 표시는 현재 소속 변경을 유지합니다. 데이터 적용은 선택한 조건의 예시를 새로 만들고, 초기화는 최초 데이터 설정과 소속으로 돌아갑니다.</p>
       </fieldset>
     </StorySection>
-    <StorySection title="레이아웃 설정" description="TB·LR·Hybrid 표시 유형과 초기 표시 Depth를 설정합니다.">
+    <StorySection title="레이아웃 설정" description="표시 유형 · 초기 Depth">
       <fieldset className="hm-orgchart-story-settings">
         <legend className="hm-orgchart-story-section-legend">레이아웃 설정</legend>
         <div className="hm-orgchart-story-controls">
@@ -205,7 +204,7 @@ function ExpandedPreview() {
         <p className="hm-orgchart-story-note">Compact: 미지원. 기존 직원 카드 디자인을 보존하며, 압축 배치 선택은 제공하지 않습니다.</p>
       </fieldset>
     </StorySection>
-    <StorySection title="인터랙션·직원 정보" description="Drag & Drop과 탐색 기능을 개별 선택하고 직원 카드의 팝업 방식을 설정합니다.">
+    <StorySection title="인터랙션·직원 정보" description="Drag & Drop · 탐색 · 팝업 방식">
       <div className="hm-orgchart-story-settings">
         <fieldset className="hm-orgchart-story-companies">
           <legend>독립 기능 설정 · 모든 표시 유형에서 개별 선택</legend>
@@ -232,7 +231,7 @@ function ExpandedPreview() {
         </div>
       </div>
     </StorySection>
-    <StorySection title="조직도 미리보기" description="직원 카드를 눌러 정보를 확인하고, 활성화한 탐색 기능으로 조직도를 살펴봅니다.">
+    <StorySection title="조직도 미리보기" description="직원 카드를 눌러 정보 확인">
       <div className="hm-orgchart-story">
         <p className="hm-orgchart-story-note">빈 공간 드래그는 Pan입니다. {dragDropEnabled ? '직원 카드·그룹 타이틀 드래그로 회사 안팎의 소속을 변경합니다. 키보드: Alt+M → 방향키 → Enter / ESC 취소.' : '소속 변경은 Drag & Drop을 ON으로 설정하면 사용할 수 있습니다.'} 클릭은 직원 정보·그룹 접기입니다.</p>
         <p className="hm-orgchart-story-note" data-component="OrgChartExampleCounts" aria-live="polite">

src/org-chart/org-chart-page-previews.tsx

@@ -19,8 +19,8 @@ export function CompositionPreview() {
   const host = useRef<HTMLElement>(null);
   useLayoutEffect(() => centerCompositionPreview(host.current!), []);
   return <StoryPage className="hm-orgchart-story-page">
-    <StoryPageHeader kicker="HM DESIGN SYSTEM / ORGCHART" title="Full Composition" description="Workdesk 기반 고정형 조직도입니다. 대표자와 6개 조직, 협업 허브 및 인원 현황을 한 화면에서 확인합니다." />
-    <StorySection title="고정형 조직도" description="직원 카드를 눌러 정보를 확인하세요. 미리보기 영역의 실제 폭에 맞춰 전체 구성을 비례 축소합니다.">
+    <StoryPageHeader title="Full Composition" description="Workdesk 기반 고정형 조직도" />
+    <StorySection title="고정형 조직도" description="직원 카드를 눌러 정보 확인 · 미리보기 폭에 맞춰 비례 축소">
       <section ref={host} className="hm-orgchart-story hm-orgchart-story-full" aria-label="Full Composition">
         <OrgChart dataSource={compositionSource} stylesheetUrls={compositionStylesheets} displayMode="readOnly" className="hm-orgchart-story-chart" />
       </section>
@@ -30,7 +30,7 @@ export function CompositionPreview() {
 
 export function DepartmentTypographyPreview() {
   return <StoryPage className="hm-orgchart-story-page">
-    <StoryPageHeader kicker="HM DESIGN SYSTEM / ORGCHART" title="Department Colors" />
+    <StoryPageHeader title="Department Colors" />
     <StorySection title="조직별 컬러 · 카드 미리보기">
       <div className="hm-orgchart-story-preview"><CoreComponentPreview kind="DepartmentColors" presentation="design" /></div>
     </StorySection>
@@ -39,14 +39,14 @@ export function DepartmentTypographyPreview() {
 
 export function OverviewPreview() {
   return <StoryPage className="hm-orgchart-story-page">
-    <StoryPageHeader kicker="HM DESIGN SYSTEM / ORGCHART" title="Overview" description="회사 로고와 조직·직위별, 관계사별 인원 현황입니다. 인원 현황은 고정형 조직도와 같은 Core 집계·표시 디자인을 사용하며 기존 가상 데이터를 표시합니다." />
-    <StorySection title="관계사·회사 로고" description="회사 로고와 기준 안내를 확인합니다.">
+    <StoryPageHeader title="Overview" description="회사 로고와 인원 현황 · 가상 데이터" />
+    <StorySection title="관계사·회사 로고" description="회사 로고와 기준 안내">
       <div className="hm-orgchart-story-preview"><CoreComponentPreview kind="Logo" hideLogoHeading /></div>
     </StorySection>
-    <StorySection title="조직·직위별 인원 현황" description="기존 가상 직원 데이터를 조직·직위별로 집계합니다.">
+    <StorySection title="조직·직위별 인원 현황" description="가상 데이터 조직·직위별 집계">
       <div className="hm-orgchart-story-preview"><CoreComponentPreview kind="PositionSummary" presentation="workdesk" /></div>
     </StorySection>
-    <StorySection title="관계사별 인원 현황" description="동일 데이터의 관계사별 인원 현황입니다. 실제 운영 인원수가 아닙니다.">
+    <StorySection title="관계사별 인원 현황" description="관계사별 · 실제 운영 인원수 아님">
       <div className="hm-orgchart-story-preview"><CoreComponentPreview kind="AffiliationSummary" presentation="workdesk" /></div>
     </StorySection>
   </StoryPage>;