Merge pull request 'feat(storybook): refine manager layout and Hanmac branding' (#14) from feat/storybook-ui-refinement into main

Reviewed-on: #14

.storybook/manager.css

@@ -65,6 +65,8 @@
   padding: 0;
   color: var(--color-fg-on-green-primary);
 }
+/* The Settings button is hidden, so the title uses the full header width. */
+#storybook-sidebar-region .sidebar-header > div { margin-right: 0; }
 #storybook-sidebar-region .sidebar-header > div a {
   color: var(--color-fg-on-green-primary);
   font: 700 16px/30px var(--hm-manager-font);
@@ -103,6 +105,10 @@
 }
 /* Storybook's named creation action only; search/filter remain available. */
 #storybook-sidebar-region button[aria-label='Create a new story'] { display: none; }
+/* Storybook Settings menu trigger only; sidebar search, tag filter and expand/collapse remain. */
+#storybook-sidebar-region .sidebar-header button[aria-label='Settings'] { display: none; }
+/* Storybook sidebar search landmark (input, icon, shortcut hint, tag filter); the tree and header remain. */
+#storybook-sidebar-region [role='search'] { display: none; }
 
 #storybook-explorer-tree .sidebar-subheading {
   position: relative;

.storybook/manager.js

@@ -31,13 +31,14 @@ document.head.appendChild(toolbarStyle)
 addons.setConfig({
   layout: {
     showPanel: false,
+    showToolbar: false,
     // LNB width 246px. recentVisibleSizes keeps the same width when the sidebar is collapsed and expanded again.
     navSize: 246,
     recentVisibleSizes: { navSize: 246 },
   },
   theme: create({
     base: 'light',
-    brandTitle: 'HM Design System',
+    brandTitle: 'Hanmac Design System',
     brandUrl: './',
     brandTarget: '_self',
     fontBase: "'Hanmac Manager Noto Sans KR', 'Noto Sans KR', 'Malgun Gothic', sans-serif",

.storybook/preview.tsx

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

.storybook/qa/STORY-INVENTORY.md

@@ -499,11 +499,11 @@ Source: `src/components/tooltip.stories.tsx`; meta.tags: []
 - All — Tooltip; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
 - Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
 
-### Foundation/HM Color
+### Foundation/Hanmac Color
 
 Source: `src/foundation/color.stories.tsx`; meta.tags: []
 
-- All — HM Color; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- All — Hanmac Color; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
 
 ### Foundation/Company Colors
 

.storybook/qa/story-inventory.json

@@ -3637,13 +3637,13 @@
     },
     {
       "file": "src/foundation/color.stories.tsx",
-      "title": "Foundation/HM Color",
+      "title": "Foundation/Hanmac Color",
       "metaTags": [],
       "stories": [
         {
           "id": "foundation-color--all",
           "exportName": "All",
-          "name": "HM Color",
+          "name": "Hanmac Color",
           "storyTags": [],
           "effectiveTags": [],
           "category": "PRIMARY",

docs/guidelines/brand-color-steps.md

@@ -33,8 +33,8 @@ Orange Dark 1·2의 원본 Needs Review 상태와 [이전 검수 보고서](../r
 
 ## 호환성과 Storybook
 
-페이지 제목은 `HM Color`(메뉴 `Foundation > HM Color`)이며 별도 소개 문구는 표시하지 않는다. 기존 Story ID `foundation-color--all`은 `meta.id`로 유지한다. 과거 `한맥 브랜드 컬러` 소개 문구는 당시 이력이다. 그룹 설명의 단계 순서 나열 문구는 제공하지 않으며, 개별 컬러칩의 단계명과 HEX는 유지한다.
+페이지 제목은 `Hanmac Color`(메뉴 `Foundation > Hanmac Color`)이며 별도 소개 문구는 표시하지 않는다. 기존 Story ID `foundation-color--all`은 `meta.id`로 유지한다. 과거 `한맥 브랜드 컬러` 소개 문구는 당시 이력이다. 그룹 설명의 단계 순서 나열 문구는 제공하지 않으며, 개별 컬러칩의 단계명과 HEX는 유지한다.
 
-[HM 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).
+[Hanmac 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 > HM Color와 별도 메뉴(HM Color 바로 아래)이며 7개 계열사·14개 컬러를 회사별로 표시한다(별도 소개 문구 없음). 데이터는 OrgChart의 기존 `companyColorPresets`를 그대로 읽고(메인 → 서브 순서, 메인은 Default 강조 재사용) HEX를 중복 정의하지 않는다. Theme 토큰·`themes/*.json`·공개 계약은 변경하지 않으며 Foundation > HM Color의 3그룹 24칩은 그대로다.
+[Company Colors Story](../../src/foundation/company-colors.stories.tsx)는 Foundation > Hanmac Color와 별도 메뉴(Hanmac Color 바로 아래)이며 7개 계열사·14개 컬러를 회사별로 표시한다(별도 소개 문구 없음). 데이터는 OrgChart의 기존 `companyColorPresets`를 그대로 읽고(메인 → 서브 순서, 메인은 Default 강조 재사용) HEX를 중복 정의하지 않는다. Theme 토큰·`themes/*.json`·공개 계약은 변경하지 않으며 Foundation > Hanmac Color의 3그룹 24칩은 그대로다.

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="HM Color">
+  return <ReferencePage title="Hanmac Color">
     {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 "HM Color"; `id` keeps the existing Story ID (foundation-color--all) stable.
-const meta = { title: "Foundation/HM Color", id: "foundation-color", parameters: { layout: "fullscreen" } } satisfies Meta
+// 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
 export default meta
-export const All: StoryObj<typeof meta> = { name: "HM Color", render: () => <ColorReferencePage /> }
+export const All: StoryObj<typeof meta> = { name: "Hanmac Color", render: () => <ColorReferencePage /> }