diff --git a/src/center/center-facility.stories.tsx b/src/center/center-facility.stories.tsx
index 4532fb1..32d5ccf 100644
--- a/src/center/center-facility.stories.tsx
+++ b/src/center/center-facility.stories.tsx
@@ -16,7 +16,7 @@ import { withRepresentation } from "./center-shared"
 // Owners: ui-viz docs/visualization/facility.md and facility-assets.md (128 approved SVG references, shipped unchanged).
 // The display scale (Q2b) is HOLD and Facility has no Selected / Hover state.
 const meta = {
-  title: "노선도/Facility",
+  title: "노선도/시설물",
   id: "center-graphic-facility",
   component: TunnelFacility,
   parameters: { layout: "padded" },
@@ -31,23 +31,25 @@ const page = (name: string, Demo: ComponentType): Story => ({
   render: () => (
     <StoryPage>
       <StoryPageHeader title={name} />
-      <StorySection title="Overview">
+      <StorySection title="개요">
         {withRepresentation(() => <Demo />)}
       </StorySection>
     </StoryPage>
   ),
 })
 
-export const Tunnel: Story = page("터널", TunnelReferenceDemo)
-export const Bridge: Story = page("교량", BridgeReferenceDemo)
-export const Intersection: Story = page("교차로", IntersectionReferenceDemo)
-export const Junction: Story = page("분기점", JunctionReferenceDemo)
-export const Interchange: Story = page("나들목", InterchangeReferenceDemo)
-export const Roadside: Story = page("휴게소 · 졸음쉼터", RoadsideReferenceDemo)
+// `name` is repeated as a literal because Storybook's static indexer cannot read it through page(); it drives the sidebar label.
+export const Tunnel: Story = { ...page("터널", TunnelReferenceDemo), name: "터널" }
+export const Bridge: Story = { ...page("교량", BridgeReferenceDemo), name: "교량" }
+export const Intersection: Story = { ...page("교차로", IntersectionReferenceDemo), name: "교차로" }
+export const Junction: Story = { ...page("분기점", JunctionReferenceDemo), name: "분기점" }
+export const Interchange: Story = { ...page("나들목", InterchangeReferenceDemo), name: "나들목" }
+export const Roadside: Story = { ...page("휴게소 · 졸음쉼터", RoadsideReferenceDemo), name: "휴게소 · 졸음쉼터" }
 // Linked facilities are a standalone section heading followed by item cards.
 // Keep the reference data/artwork and road-class grouping owned by the package.
 export const Linked: Story = {
   ...page("연계 시설물", LinkedFacilityReferenceDemo),
+  name: "연계 시설물",
   render: () => (
     <StoryPage className="sb-center-linked-page">
       <StoryPageHeader title="연계 시설물" />
diff --git a/src/center/center-information.stories.tsx b/src/center/center-information.stories.tsx
index e9852ec..e544dd9 100644
--- a/src/center/center-information.stories.tsx
+++ b/src/center/center-information.stories.tsx
@@ -6,7 +6,7 @@ import { withRepresentation } from "./center-shared"
 // Owner: ui-viz docs/patterns/center-information-presentation.md and center-information-{box,table,emphasis}.md.
 // Single-line ellipsis is resolved; multi-line overflow, exact placement and the presentation scale (Q3) are not.
 const meta = {
-  title: "노선도/Information",
+  title: "노선도/정보",
   id: "center-graphic-information",
   parameters: { layout: "fullscreen", controls: { disable: true } },
 } satisfies Meta
@@ -15,11 +15,11 @@ type Story = StoryObj<typeof meta>
 
 // Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
 export const Information: Story = {
-  name: "Information",
+  name: "정보",
   render: () => (
     <StoryPage>
-      <StoryPageHeader title="Information" />
-      <StorySection title="Overview">
+      <StoryPageHeader title="정보" />
+      <StorySection title="개요">
         {withRepresentation(() => (
           <div className="sb-center-information">
             <CenterInformationDisplayReferenceDemo />
diff --git a/src/center/center-spatial.stories.tsx b/src/center/center-spatial.stories.tsx
index ed3fefb..91cd86d 100644
--- a/src/center/center-spatial.stories.tsx
+++ b/src/center/center-spatial.stories.tsx
@@ -7,7 +7,7 @@ import { withRepresentation } from "./center-shared"
 // Owners: ui-viz docs/visualization/route.md, spatial-map.md, spatial-section.md, composition.md.
 // Route layer order Shadow -> Outline -> Primary Stroke is CONFIRMED; the whole-map layer order is Candidate and line join is TBD.
 const meta = {
-  title: "노선도/Spatial",
+  title: "노선도/노선·공간",
   id: "center-graphic-spatial",
   component: RouteLine,
   parameters: { layout: "fullscreen", controls: { disable: true } },
@@ -17,11 +17,11 @@ type Story = StoryObj<typeof meta>
 
 // Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
 export const Spatial: Story = {
-  name: "Spatial",
+  name: "노선·공간",
   render: () => (
     <StoryPage className="sb-center-spatial-page">
-      <StoryPageHeader title="Spatial" />
-      <StorySection title="Overview">
+      <StoryPageHeader title="노선·공간" />
+      <StorySection title="개요">
         {withRepresentation(() => <CenterSpatialInformationReferenceDemo />)}
       </StorySection>
     </StoryPage>
diff --git a/src/center/center-title.stories.tsx b/src/center/center-title.stories.tsx
index 9979f44..6413075 100644
--- a/src/center/center-title.stories.tsx
+++ b/src/center/center-title.stories.tsx
@@ -6,7 +6,7 @@ import { withRepresentation } from "./center-shared"
 
 // Owner: ui-viz docs/components/center-title.md. Title Resolution B numeric output is TBD; the per-Type palette is SCOPED_DESIGN_APPROVAL.
 const meta = {
-  title: "노선도/Title",
+  title: "노선도/제목",
   id: "center-graphic-title",
   component: CenterTitle,
   parameters: { layout: "padded" },
@@ -17,12 +17,12 @@ type Story = StoryObj<typeof meta>
 // Representative Story: the four title types. Named after the area so Storybook shows it as a single sidebar item.
 // Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
 export const Compositions: Story = {
-  name: "Title",
+  name: "제목",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
-      <StoryPageHeader title="Title" />
-      <StorySection title="Overview">
+      <StoryPageHeader title="제목" />
+      <StorySection title="개요">
         {withRepresentation(() => <CenterTitleReferenceDemo />)}
       </StorySection>
     </StoryPage>
diff --git a/src/org-chart/department-colors-preview.css b/src/org-chart/department-colors-preview.css
index 343f396..4bfe34a 100644
--- a/src/org-chart/department-colors-preview.css
+++ b/src/org-chart/department-colors-preview.css
@@ -1,7 +1,7 @@
 /* Department Colors Storybook adapter only. The actual Tunnel sample/stage
    frame comes from center-stories.css; this sheet never selects employee cards. */
 .hm-orgchart-department-preview .hm-orgchart-department-colors-design {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--sb-center-column-gap);
 }
 
@@ -43,6 +43,12 @@
   background: transparent;
 }
 
+@media (max-width: 960px) {
+  .hm-orgchart-department-preview .hm-orgchart-department-colors-design {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 @media (max-width: 760px) {
   .hm-orgchart-department-preview .hm-orgchart-department-colors-design {
     grid-template-columns: minmax(0, 1fr);
diff --git a/src/org-chart/org-chart-cards.stories.tsx b/src/org-chart/org-chart-cards.stories.tsx
index 589dad3..e3f2d53 100644
--- a/src/org-chart/org-chart-cards.stories.tsx
+++ b/src/org-chart/org-chart-cards.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { CoreComponentPreview } from './core-component-preview';
 import { organizationStylePresets } from '../../packages/org-chart/src/core/style-presets';
 
-const meta = { title: 'OrgChart/Components/Cards', tags: ['internal'], component: CoreComponentPreview, parameters: { layout: 'padded', controls: { disable: true } } } satisfies Meta<typeof CoreComponentPreview>;
+const meta = { title: '조직도/Components/Cards', id: 'orgchart-components-cards', tags: ['internal'], component: CoreComponentPreview, parameters: { layout: 'padded', controls: { disable: true } } } satisfies Meta<typeof CoreComponentPreview>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 function organization(variant: number): Story {
diff --git a/src/org-chart/org-chart-department-colors.stories.tsx b/src/org-chart/org-chart-department-colors.stories.tsx
index b3cd009..803d3f5 100644
--- a/src/org-chart/org-chart-department-colors.stories.tsx
+++ b/src/org-chart/org-chart-department-colors.stories.tsx
@@ -2,7 +2,7 @@ import { StrictMode } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { DepartmentTypographyPreview } from './org-chart-page-previews';
 
-const meta = { title: 'OrgChart/Department Colors', component: DepartmentTypographyPreview, parameters: { layout: 'fullscreen', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof DepartmentTypographyPreview>;
+const meta = { title: '조직도/부서별 색상', component: DepartmentTypographyPreview, parameters: { layout: 'fullscreen', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof DepartmentTypographyPreview>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export const DepartmentColors: Story = { name: 'Department Colors', parameters: { __id: 'orgchart--department-colors' } };
+export const DepartmentColors: Story = { name: '부서별 색상', parameters: { __id: 'orgchart--department-colors' } };
diff --git a/src/org-chart/org-chart-expanded.stories.tsx b/src/org-chart/org-chart-expanded.stories.tsx
index 100a8b7..ebd294b 100644
--- a/src/org-chart/org-chart-expanded.stories.tsx
+++ b/src/org-chart/org-chart-expanded.stories.tsx
@@ -50,7 +50,7 @@ function ExpandedPreview() {
   })), []);
 
   return <StoryPage className="hm-orgchart-story-page hm-orgchart-story-expanded">
-    <StoryPageHeader title="Expanded OrgChart" />
+    <StoryPageHeader title="확장 조직도" />
     {/* Preview first: the chart sits right under the page title; its own header already names it, so no section header. */}
     <div className="hm-orgchart-story hm-orgchart-story-lead">
       {error ? <p role="alert" className="hm-orgchart-story-note">{error}</p> : null}
@@ -61,7 +61,7 @@ function ExpandedPreview() {
   </StoryPage>;
 }
 
-const meta = { title: 'OrgChart/Expanded OrgChart', component: ExpandedPreview, parameters: { layout: 'fullscreen', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof ExpandedPreview>;
+const meta = { title: '조직도/확장 조직도', component: ExpandedPreview, parameters: { layout: 'fullscreen', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof ExpandedPreview>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export const ExpandedOrgChart: Story = { name: 'Expanded OrgChart', parameters: { __id: 'orgchart--expanded-org-chart' } };
+export const ExpandedOrgChart: Story = { name: '확장 조직도', parameters: { __id: 'orgchart--expanded-org-chart' } };
diff --git a/src/org-chart/org-chart-full-composition.stories.tsx b/src/org-chart/org-chart-full-composition.stories.tsx
index 95a0956..6e06b8d 100644
--- a/src/org-chart/org-chart-full-composition.stories.tsx
+++ b/src/org-chart/org-chart-full-composition.stories.tsx
@@ -2,7 +2,7 @@ import { StrictMode } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { CompositionPreview } from './org-chart-page-previews';
 
-const meta = { title: 'OrgChart/Full Composition', component: CompositionPreview, parameters: { layout: 'fullscreen', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof CompositionPreview>;
+const meta = { title: '조직도/전체 구성', component: CompositionPreview, parameters: { layout: 'fullscreen', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof CompositionPreview>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export const FullComposition: Story = { name: 'Full Composition', parameters: { __id: 'orgchart--full-composition' } };
+export const FullComposition: Story = { name: '전체 구성', parameters: { __id: 'orgchart--full-composition' } };
diff --git a/src/org-chart/org-chart-overview-internal.stories.tsx b/src/org-chart/org-chart-overview-internal.stories.tsx
index 9914fa0..87047f2 100644
--- a/src/org-chart/org-chart-overview-internal.stories.tsx
+++ b/src/org-chart/org-chart-overview-internal.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { CoreComponentPreview } from './core-component-preview';
 import './org-chart-stories.css';
 
-const meta = { title: 'OrgChart/Verification/Overview', component: CoreComponentPreview, tags: ['internal'], parameters: { layout: 'padded', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof CoreComponentPreview>;
+const meta = { title: '조직도/Verification/Overview', component: CoreComponentPreview, tags: ['internal'], parameters: { layout: 'padded', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof CoreComponentPreview>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 // Literal IDs preserve every existing direct URL after moving the hidden CSF entries.
diff --git a/src/org-chart/org-chart-p1.stories.tsx b/src/org-chart/org-chart-p1.stories.tsx
index c52c331..55090b0 100644
--- a/src/org-chart/org-chart-p1.stories.tsx
+++ b/src/org-chart/org-chart-p1.stories.tsx
@@ -2,7 +2,7 @@ import { StrictMode } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { OverviewPreview } from './org-chart-page-previews';
 
-const meta = { title: 'OrgChart/Overview', component: OverviewPreview, parameters: { layout: 'fullscreen', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof OverviewPreview>;
+const meta = { title: '조직도/개요', component: OverviewPreview, parameters: { layout: 'fullscreen', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof OverviewPreview>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export const LogoPersonnelSummary: Story = { name: 'Overview', parameters: { __id: 'orgchart--logo-personnel-summary' } };
+export const LogoPersonnelSummary: Story = { name: '개요', parameters: { __id: 'orgchart--logo-personnel-summary' } };
diff --git a/src/org-chart/org-chart-page-previews.tsx b/src/org-chart/org-chart-page-previews.tsx
index 1628445..5066d03 100644
--- a/src/org-chart/org-chart-page-previews.tsx
+++ b/src/org-chart/org-chart-page-previews.tsx
@@ -19,7 +19,7 @@ export function CompositionPreview() {
   const host = useRef<HTMLElement>(null);
   useLayoutEffect(() => centerCompositionPreview(host.current!), []);
   return <StoryPage className="hm-orgchart-story-page">
-    <StoryPageHeader title="Full Composition" />
+    <StoryPageHeader title="전체 구성" />
     <StorySection title="고정형 조직도">
       <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" />
@@ -30,7 +30,7 @@ export function CompositionPreview() {
 
 export function DepartmentTypographyPreview() {
   return <StoryPage className="hm-orgchart-story-page">
-    <StoryPageHeader title="Department Colors" />
+    <StoryPageHeader title="부서별 색상" />
     <StorySection title="조직별 컬러 · 카드 미리보기">
       <div className="hm-orgchart-story-preview"><CoreComponentPreview kind="DepartmentColors" presentation="design" /></div>
     </StorySection>
@@ -39,7 +39,7 @@ export function DepartmentTypographyPreview() {
 
 export function OverviewPreview() {
   return <StoryPage className="hm-orgchart-story-page">
-    <StoryPageHeader title="Overview" />
+    <StoryPageHeader title="개요" />
     <StorySection title="관계사·회사 로고">
       <div className="hm-orgchart-story-preview"><CoreComponentPreview kind="Logo" hideLogoHeading /></div>
     </StorySection>
diff --git a/src/org-chart/org-chart-summary.stories.tsx b/src/org-chart/org-chart-summary.stories.tsx
index 0264860..a197fb2 100644
--- a/src/org-chart/org-chart-summary.stories.tsx
+++ b/src/org-chart/org-chart-summary.stories.tsx
@@ -5,7 +5,8 @@ import { CoreComponentPreview } from "./core-component-preview"
 // and automatic Raw Count. Acquired logo mapping stays in the shared Core/asset
 // layer; Stories do not duplicate summary UI or add employee data fields.
 const meta = {
-  title: "OrgChart/Components/Summaries",
+  title: "조직도/Components/Summaries",
+  id: "orgchart-components-summaries",
   tags: ["internal"],
   component: CoreComponentPreview,
   args: { kind: "PositionSummary" },
diff --git a/src/org-chart/org-chart.stories.tsx b/src/org-chart/org-chart.stories.tsx
index 0205fd4..4858d1e 100644
--- a/src/org-chart/org-chart.stories.tsx
+++ b/src/org-chart/org-chart.stories.tsx
@@ -167,7 +167,8 @@ function MultipleContent() {
 }
 
 const meta = {
-  title: "OrgChart/Content",
+  title: "조직도/콘텐츠",
+  id: "orgchart-content",
   tags: ["internal"],
   component: OrgChart,
   parameters: {
@@ -190,28 +191,28 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const BasicOrganization: Story = {
-  name: "Basic Organization",
+  name: "기본 조직도",
   render: args => <Content note="HTML 공통 v1: 조직 3개, 고유 직원 4명 (Root 1 / Team A 2 / Team B 1). 정책 미주입 시 원본 집계만 표시하고 업무상 총원은 미확정입니다."><OrgChart {...args} className="hm-orgchart-story-chart" /></Content>,
 }
 
 export const OrganizationHierarchy: Story = {
-  name: "Organization Hierarchy",
+  name: "조직 계층",
   args: { dataSource: hierarchySource },
   render: args => <Content note="공통 v1의 parentId 계층·조직장과 연결선을 확인합니다. showEmployees/showSummary만 숨기며 원본 소속과 집계는 유지합니다. 하위 조직 접기/펼치기는 Core 버튼의 키보드 Enter/Space로 실행합니다."><OrgChart {...args} className="hm-orgchart-story-chart" /></Content>,
 }
 
 export const EmployeeCards: Story = {
-  name: "Employee Cards",
+  name: "직원 카드",
   args: { dataSource: employeeSource },
   render: args => <Content note="공통 v1에서 긴 조직명·직원명·직위·직책만 파생한 가상 데이터입니다. null 프로필 이미지는 Core의 첫 글자 대체 표시를 사용합니다. 재직·파견·휴직 상태와 조직장 구분은 동일 Core 노드 UI입니다."><OrgChart {...args} className="hm-orgchart-story-chart" /></Content>,
 }
 
 export const OrganizationSummary: Story = {
-  name: "Organization Summary",
+  name: "조직 요약",
   render: args => <Content note="공통 v1 원본 직원 전체 4명, 직접 인원 Root 1 / Team A 2 / Team B 1. 하위 포함 인원은 서로 합산하지 않습니다. 승인 집계 정책을 임의 생성하지 않으며 업무상 총원은 정책 승인 필요로 표시합니다."><OrgChart {...args} className="hm-orgchart-story-chart" /></Content>,
 }
 
 export const JSONDataUpdate: Story = { name: "JSON Data Update", render: () => <DataUpdateContent /> }
-export const LoadingEmptyError: Story = { name: "Loading / Empty / Error", render: () => <LoadingContent /> }
+export const LoadingEmptyError: Story = { name: "로딩 / 비어 있음 / 오류", render: () => <LoadingContent /> }
 export const ResponsiveContainer: Story = { name: "Responsive Container", render: () => <ResponsiveContent /> }
 export const MultipleInstances: Story = { name: "Multiple Instances", render: () => <MultipleContent /> }