chore(storybook): refine navigation and foundation labels

- Rename Foundation/Typography to 폰트 and SW/Footer to SW/하단 명령어바 in
  the sidebar order; Story IDs are kept (foundation-typography, sw-footer).
- Hanmac Color: label Light 4 as "보더 하이라이트용" and add a divider between
  Light 4 and Light 3.
- Hide Patterns/Layout/Page Header from the sidebar with the verification tag
  (Story IDs and direct URLs are unchanged).
- Remove the Variants section from the representative LNB page; With Logo and
  Long Labels remain as verification Stories.

src/foundation/color.stories.tsx

@@ -11,7 +11,7 @@ const palettes = [
 ] as const
 type ColorStage = typeof stages[number]
 type PalettePrefix = typeof palettes[number]["prefix"]
-const stageLabel = (stage: ColorStage) => stage === "default" ? "Default · 기본색" : stage.replaceAll("-", " ").replace(/^./, letter => letter.toUpperCase())
+const stageLabel = (stage: ColorStage) => stage === "default" ? "Default · 기본색" : stage === "light-4" ? "Light 4 · 보더 하이라이트용" : stage.replaceAll("-", " ").replace(/^./, letter => letter.toUpperCase())
 const paletteToken = (prefix: PalettePrefix, stage: ColorStage) => `color.palette.${prefix}-${stage}` as RuntimeThemeToken
 const colorProperties = palettes.flatMap(palette => stages.map(stage => runtimeThemeContract[paletteToken(palette.prefix, stage)].property))
 

src/foundation/foundation.css

@@ -27,6 +27,9 @@
 .hm-brand-color-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
 .hm-brand-color-chip { flex: 1 0 110px; min-width: 0; padding: 8px; border: 1px solid var(--hm-sem-stroke-default); }
 .hm-brand-color-chip[data-base] { border: 2px solid var(--hm-sem-fg-primary); font-weight: var(--hm-font-weight-bold); }
+/* Hanmac Color only (data-color-stage): wider gap (8px + 16px extra = 24px) between Light 4 and Light 3 with a divider centered in it. */
+.hm-brand-color-chip[data-color-stage="light-3"] { --hm-color-divider-extra: 16px; position: relative; margin-left: var(--hm-color-divider-extra); }
+.hm-brand-color-chip[data-color-stage="light-3"]::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1px - 0.5px - (8px + var(--hm-color-divider-extra)) / 2); width: 1px; background: var(--hm-sem-stroke-default); pointer-events: none; }
 .hm-brand-color-chip h3, .hm-brand-color-chip p { margin: 8px 0 0; font-size: 13px; }
 
 /* Color reference additions only; preserve the existing palette row and Default emphasis. */

src/foundation/typography.stories.tsx

@@ -43,7 +43,7 @@ function SpecimenTable({ rows }: { rows: readonly TypographyReference[] }) {
 
 function TypographyReferencePage() {
   const values = useResolvedProperties(typographyProperties)
-  return <ReferencePage title="Typography">
+  return <ReferencePage title="폰트">
     <ReferenceSection title="Font Family">
       <p className="hm-typo-family"><span>Noto Sans KR → 맑은 고딕 → 시스템 sans-serif</span><code className="hm-foundation-note">--hm-font-family-base: {values["--hm-font-family-base"]}</code></p>
     </ReferenceSection>
@@ -59,6 +59,7 @@ function TypographyReferencePage() {
     </ReferenceSection>
   </ReferencePage>
 }
-const meta = { title: "Foundation/Typography", parameters: { layout: "fullscreen" } } satisfies Meta
+// The sidebar name is "폰트"; `id` keeps the existing Story ID (foundation-typography--all) stable.
+const meta = { title: "Foundation/폰트", id: "foundation-typography", parameters: { layout: "fullscreen" } } satisfies Meta
 export default meta
-export const All: StoryObj<typeof meta> = { name: "Typography", render: () => <TypographyReferencePage /> }
+export const All: StoryObj<typeof meta> = { name: "폰트", render: () => <TypographyReferencePage /> }

src/patterns/lnb.stories.tsx

@@ -641,15 +641,6 @@ export const All: Story = {
           ]}
         />
       </StorySection>
-      <StorySection title="Variants">
-        <StateBoard
-          min={560}
-          states={[
-            { id: "with-logo", label: "With Logo", children: <ResponsiveSpecimen nodes={simpleNav()} initial="overview" initialOpen={{ tasks: true }} logo={testLogo} dividers={false} /> },
-            { id: "long", label: "Long Labels", children: <ResponsiveSpecimen nodes={simpleNav(true)} initial="tasks/list" initialOpen={{ tasks: true }} longLabels dividers={false} /> },
-          ]}
-        />
-      </StorySection>
     </StoryPage>
   ),
 }

src/patterns/page-header.stories.tsx

@@ -20,6 +20,7 @@ import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-pag
 
 const meta = {
   title: "Patterns/Layout/Page Header",
+  tags: ["verification"], // 임시 숨김: 사이드바에서만 제외. 다시 표시하려면 이 줄 삭제
   component: PageHeader,
   parameters: { layout: "fullscreen", controls: { disable: true } },
 } satisfies Meta<typeof PageHeader>