feat(foundation): add company colors story

Add Foundation > Company Colors as a separate Storybook menu placed right
after Color. It shows the 7 affiliates and 14 colors from the existing
companyColorPresets (main first, then secondary) with the Color chip styles
and the Default emphasis reused for the main color. Theme tokens, public API
and the existing Color story are unchanged.

- Foundation sort order: Color, Company Colors, Typography, Layout
- Company chip width rule scoped to the company rows
- Document the menu in brand-color-steps.md
- Add the new story to the Story Inventory records

.storybook/preview.tsx

@@ -25,7 +25,7 @@ const preview: Preview = {
         includeNames: true,
         order: [
           "Foundation",
-          ["Color", "Typography", "Layout"],
+          ["Color", "Company Colors", "Typography", "Layout"],
           "Components",
           [
             "Form",

.storybook/qa/STORY-INVENTORY.md

@@ -6,16 +6,16 @@ This is a classification record. No Story IDs, exports or titles are renamed. HI
 
 ## Summary
 
-- PRIMARY: 65
+- PRIMARY: 66
 - VERIFICATION: 212
 - UTILITY: 15
 - LEGACY / DUPLICATE: 0
-- KEEP: 65
+- KEEP: 66
 - HIDE: 227
 - MERGE_CANDIDATE: 31
 - DELETE_CANDIDATE: 0
-- Story files: 63
-- Stories: 292
+- Story files: 64
+- Stories: 293
 - Hierarchy: Foundation → Components → Patterns → Center Graphic → Theme
 
 ## Full inventory
@@ -504,6 +504,12 @@ Source: `src/foundation/color.stories.tsx`; meta.tags: []
 
 - All — Color; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
 
+### Foundation/Company Colors
+
+Source: `src/foundation/company-colors.stories.tsx`; meta.tags: []
+
+- All — Company Colors; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
 ### Foundation/Layout
 
 Source: `src/foundation/layout.stories.tsx`; meta.tags: []

.storybook/qa/story-inventory.json

@@ -1,15 +1,15 @@
 {
   "summary": {
-    "storyFiles": 63,
-    "stories": 292,
+    "storyFiles": 64,
+    "stories": 293,
     "categories": {
-      "PRIMARY": 65,
+      "PRIMARY": 66,
       "VERIFICATION": 212,
       "UTILITY": 15,
       "LEGACY / DUPLICATE": 0
     },
     "decisions": {
-      "KEEP": 65,
+      "KEEP": 66,
       "HIDE": 227,
       "MERGE_CANDIDATE": 31,
       "DELETE_CANDIDATE": 0
@@ -3631,6 +3631,24 @@
         }
       ]
     },
+    {
+      "file": "src/foundation/company-colors.stories.tsx",
+      "title": "Foundation/Company Colors",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "foundation-company-colors--all",
+          "exportName": "All",
+          "name": "Company Colors",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        }
+      ]
+    },
     {
       "file": "src/foundation/layout.stories.tsx",
       "title": "Foundation/Layout",

docs/guidelines/brand-color-steps.md

@@ -36,3 +36,5 @@ Orange Dark 1·2의 원본 Needs Review 상태와 [이전 검수 보고서](../r
 페이지 소개는 `한맥 브랜드 컬러`로 표시한다. 그룹 설명의 단계 순서 나열 문구는 제공하지 않으며, 개별 컬러칩의 단계명과 HEX는 유지한다.
 
 [Color 대표 Story](../../src/foundation/color.stories.tsx)는 한맥그린·한맥브라운·한맥오렌지 3개 그룹에 각 8개, 총 24개 컬러칩만 표시한다. Green 8/8·Brown 8/8·Orange 8/8 확정이며 단계명·현재 HEX와 Default 기본색 강조를 유지한다. 2026-10-11 최종 표시 요청에 따라 Brown Deep, Orange Light·Mid·Dark·Deep의 별도 표시, Accent·Semantic·Gradients 섹션과 개발용 Token·CSS Variable·Runtime Key 설명은 제거한다. Legacy Button 색상과 Accent·Semantic·Gradient의 실제 Key·값·소비처는 보존한다. 기존 Component mapping을 새 값에 연결하지 않으며 public Key·Property·type·Default·API·schemaVersion 1과 서비스 partial JSON 호환성을 유지한다. [Runtime Theme](runtime-theme.md)의 geometry/상태 권한과 Designer의 기존 17개 상위 역할 입력 UI는 확대하지 않는다. 한맥오렌지의 미확정 브랜드 단계는 없다. [표시 정리 검증 기록](../reports/foundation-color-display-cleanup-2026-10-11.md).
+
+[Company Colors Story](../../src/foundation/company-colors.stories.tsx)는 Foundation > Color와 별도 메뉴(Color 바로 아래)이며 7개 계열사·14개 컬러를 회사별로 표시한다. 데이터는 OrgChart의 기존 `companyColorPresets`를 그대로 읽고(메인 → 서브 순서, 메인은 Default 강조 재사용) HEX를 중복 정의하지 않는다. Theme 토큰·`themes/*.json`·공개 계약은 변경하지 않으며 Foundation > Color의 3그룹 24칩은 그대로다.

src/foundation/company-colors.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { companyColorPresets } from "@hm-design/org-chart"
+import { ReferencePage, ReferenceSection } from "./reference"
+
+// Company colors come from the existing OrgChart presets; HEX values are never duplicated here.
+// The chip markup and classes are shared with Foundation/Color (foundation.css).
+const companies = Object.values(companyColorPresets)
+
+function CompanyColorChip({ label, hex, main }: { label: string; hex: string; main: boolean }) {
+  return <article className="hm-brand-color-chip" data-company-color={hex} data-base={main ? "" : undefined}>
+    <div className="hm-foundation-swatch" style={{ background: hex }} />
+    <h3>{label}</h3><p data-color-value>{hex.toUpperCase()}</p>
+  </article>
+}
+
+function CompanyColorsPage() {
+  return <ReferencePage title="Company Colors" intro="계열사 브랜드 컬러">
+    {companies.map(company => <ReferenceSection key={company.companyId} title={company.companyName} note="">
+      <div className="hm-brand-color-row" data-company-id={company.companyId}>
+        <CompanyColorChip label="메인" hex={company.primary} main />
+        {company.secondary.map((hex, index) => <CompanyColorChip key={hex} label={`서브 ${index + 1}`} hex={hex} main={false} />)}
+      </div>
+    </ReferenceSection>)}
+  </ReferencePage>
+}
+const meta = { title: "Foundation/Company Colors", parameters: { layout: "fullscreen" } } satisfies Meta
+export default meta
+export const All: StoryObj<typeof meta> = { name: "Company Colors", render: () => <CompanyColorsPage /> }

src/foundation/foundation.css

@@ -38,3 +38,6 @@
 /* New common background stop IDs stay on one line at the supported widths. */
 .hm-foundation .hm-color-gradient-stops .hm-brand-color-chip[data-gradient-stop-token] { flex-basis: 220px; }
 .hm-foundation .hm-color-foreground-sample { padding: 16px; background: var(--hm-sem-bg-surface); }
+
+/* Company Colors: keep each chip close to the Color row width so 1-3 chips per company do not stretch across the page. */
+.hm-foundation .hm-brand-color-row[data-company-id] .hm-brand-color-chip { flex: 0 1 140px; }