style(storybook): localize Foundation menu and reorder sidebar

- brand title to 한맥 디자인 시스템
- Foundation: 한맥 컬러 / 가족사 컬러 titles, Story IDs kept via explicit id
- Company Colors card order 2/2/3, Foundation/Layout hidden with verification tag
- sidebar order for Foundation and 조직도

src/foundation/color.stories.tsx

@@ -35,13 +35,13 @@ function ColorChip({ prefix, stage, values }: { prefix: PalettePrefix; stage: Co
 
 function ColorReferencePage() {
   const values = useResolvedProperties(colorProperties)
-  return <ReferencePage title="Hanmac Color">
+  return <ReferencePage title="한맥 컬러">
     {palettes.map(palette => <ReferenceSection key={palette.name} title={palette.name} note="">
       <div className="hm-brand-color-row">{stages.map(stage => <ColorChip key={stage} prefix={palette.prefix} stage={stage} values={values} />)}</div>
     </ReferenceSection>)}
   </ReferencePage>
 }
-// The sidebar name is "Hanmac Color"; `id` keeps the existing Story ID (foundation-color--all) stable.
-const meta = { title: "Foundation/Hanmac Color", id: "foundation-color", parameters: { layout: "fullscreen" } } satisfies Meta
+// The sidebar name is "한맥 컬러"; `id` keeps the existing Story ID (foundation-color--all) stable.
+const meta = { title: "Foundation/한맥 컬러", id: "foundation-color", parameters: { layout: "fullscreen" } } satisfies Meta
 export default meta
-export const All: StoryObj<typeof meta> = { name: "Hanmac Color", render: () => <ColorReferencePage /> }
+export const All: StoryObj<typeof meta> = { name: "한맥 컬러", render: () => <ColorReferencePage /> }

src/foundation/company-colors.stories.tsx

@@ -4,7 +4,15 @@ 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)
+// Display order only. PC rows: 한맥기술/삼안 · 장헌/피티씨 · 장헌산업/한라산업개발/바론컨설턴트.
+// Row starts (jangheon, jangheon-industry) are pinned to column 1 in foundation.css via the section ids; companies not listed follow in preset order.
+const companyRows = [["hanmac", "saman"], ["jangheon", "ptc"], ["jangheon-industry", "halla", "baron"]]
+const presetCompanies = Object.values(companyColorPresets)
+const listedIds = companyRows.flat()
+const companies = [
+  ...companyRows.flatMap(ids => ids.flatMap(id => presetCompanies.filter(company => company.companyId === id))),
+  ...presetCompanies.filter(company => !listedIds.includes(company.companyId)),
+]
 
 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}>
@@ -14,9 +22,9 @@ function CompanyColorChip({ label, hex, main }: { label: string; hex: string; ma
 }
 
 function CompanyColorsPage() {
-  return <ReferencePage title="Company Colors">
+  return <ReferencePage title="가족사 컬러">
     <div className="hm-company-grid">
-      {companies.map(company => <ReferenceSection key={company.companyId} title={company.companyName} note="">
+      {companies.map(company => <ReferenceSection key={company.companyId} title={company.companyName} note="" id={`company-${company.companyId}`}>
         <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} />)}
@@ -25,6 +33,7 @@ function CompanyColorsPage() {
     </div>
   </ReferencePage>
 }
-const meta = { title: "Foundation/Company Colors", parameters: { layout: "fullscreen" } } satisfies Meta
+// The sidebar name is "가족사 컬러"; `id` keeps the existing Story ID (foundation-company-colors--all) stable.
+const meta = { title: "Foundation/가족사 컬러", id: "foundation-company-colors", parameters: { layout: "fullscreen" } } satisfies Meta
 export default meta
-export const All: StoryObj<typeof meta> = { name: "Company Colors", render: () => <CompanyColorsPage /> }
+export const All: StoryObj<typeof meta> = { name: "가족사 컬러", render: () => <CompanyColorsPage /> }

src/foundation/foundation.css

@@ -41,6 +41,9 @@
    chips up to 3 per row (min 100px each, 3 -> 2 -> 1). Chip size stays at one third even when a company has fewer chips. */
 .hm-foundation .hm-company-grid { display: grid; gap: 48px 32px; grid-template-columns: repeat(auto-fill, minmax(max(316px, (100% - 64px) / 3), 1fr)); }
 .hm-foundation .hm-company-grid > .sb-page-section { min-width: 0; margin-top: 0; }
+/* Row starts for the 2 / 2 / 3 company layout (한맥·삼안 / 장헌·피티씨 / 장헌산업·한라산업개발·바론컨설턴트). */
+.hm-foundation .hm-company-grid > #company-jangheon,
+.hm-foundation .hm-company-grid > #company-jangheon-industry { grid-column-start: 1; }
 .hm-foundation .hm-brand-color-row[data-company-id] { display: grid; gap: 8px; overflow: visible; padding-bottom: 0; grid-template-columns: repeat(auto-fill, minmax(max(100px, (100% - 16px) / 3), 1fr)); }
 
 /* Typography: compact specification page. Font Family one line, Font Weight small cards, Specimens as comparison tables

src/foundation/layout.stories.tsx

@@ -30,6 +30,7 @@ function LayoutReferencePage() {
     </div>
   </ReferencePage>
 }
-const meta = { title: "Foundation/Layout", parameters: { layout: "fullscreen" } } satisfies Meta
+// Hidden from the sidebar with the verification tag; the Story ID and direct URL (foundation-layout--all) stay available.
+const meta = { title: "Foundation/Layout", tags: ["verification"], parameters: { layout: "fullscreen" } } satisfies Meta
 export default meta
 export const All: StoryObj<typeof meta> = { name: "Layout", render: () => <LayoutReferencePage /> }