style(storybook): refine foundation color chips and typography layout

- Hanmac Color: continuous spectrum band (8/4/2 columns by width), 120px
  swatches with name, role and HEX inside, Default/Light 4 role lines
- Company Colors: separate 120px chips (12px padding, 4px radius),
  name top left and HEX bottom right; company layout and data unchanged
- Typography: Font Family/Weight in two columns with info | preview rows,
  vertically centered specimens grouped by component, Text Colors chips
  with 14px Medium names
- Shared colorHex/textTone helpers pick the first text tone reaching 4.5:1
- Update brand color guide and WORKING_CONTEXT

src/foundation/color.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { runtimeThemeContract, type RuntimeThemeToken } from "@hm-design/ui/theme"
-import { ReferencePage, ReferenceSection, useResolvedProperties } from "./reference"
+import { colorHex, ReferencePage, ReferenceSection, textTone, textToneProperties, useResolvedProperties } from "./reference"
 
 // Keep the confirmed eight stages; presentation changes never alter Theme values.
 const stages = ["light-4", "light-3", "light-2", "light-1", "default", "dark-1", "dark-2", "dark-3"] as const
@@ -11,25 +11,25 @@ const palettes = [
 ] as const
 type ColorStage = typeof stages[number]
 type PalettePrefix = typeof palettes[number]["prefix"]
-const stageLabel = (stage: ColorStage) => stage === "default" ? "Default · 기본색" : stage === "light-4" ? "Light 4 · 보더 하이라이트용" : stage.replaceAll("-", " ").replace(/^./, letter => letter.toUpperCase())
+// Stage names stay plain; Default and Light 4 add a role line under the name (ColorChip).
+const stageLabel = (stage: ColorStage) => stage.replaceAll("-", " ").replace(/^./, letter => letter.toUpperCase())
+const stageNote: Partial<Record<ColorStage, string>> = { "light-4": "보더 하이라이트용", default: "기본색" }
 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))
-
-// Read the current CSS value rather than duplicating Theme HEX values.
-function colorHex(value: string | undefined) {
-  if (value === undefined) return "확인 중"
-  if (!value) return "미정의"
-  if (/^#[\da-f]{6}$/i.test(value)) return value.toUpperCase()
-  const rgb = value.match(/^rgb\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)\s*\)$/)
-  return rgb ? `#${rgb.slice(1).map(channel => Number(channel).toString(16).padStart(2, "0")).join("").toUpperCase()}` : value
-}
+// Palette values plus the swatch text candidates (textTone, reference.tsx).
+const colorProperties = [...palettes.flatMap(palette => stages.map(stage => runtimeThemeContract[paletteToken(palette.prefix, stage)].property)), ...textToneProperties]
 
 function ColorChip({ prefix, stage, values }: { prefix: PalettePrefix; stage: ColorStage; values: Record<string, string> }) {
   const token = paletteToken(prefix, stage)
   const definition = runtimeThemeContract[token]
-  return <article className="hm-brand-color-chip" data-color-stage={stage} data-color-token={token} data-base={stage === "default" ? "" : undefined}>
-    <div className="hm-foundation-swatch" style={{ background: `var(${definition.property})` }} />
-    <h3>{stageLabel(stage)}</h3><p data-color-value>{colorHex(values[definition.property])}</p>
+  const hex = colorHex(values[definition.property])
+  return <article className="hm-brand-color-chip" data-color-stage={stage} data-color-token={token} data-text-tone={textTone(hex, values)}>
+    <div className="hm-foundation-swatch" style={{ background: `var(${definition.property})` }}>
+      <div className="hm-color-name">
+        <h3>{stageLabel(stage)}</h3>
+        {stageNote[stage] && <p className="hm-color-note">{stageNote[stage]}</p>}
+      </div>
+      <p data-color-value>{hex}</p>
+    </div>
   </article>
 }
 
@@ -37,7 +37,7 @@ function ColorReferencePage() {
   const values = useResolvedProperties(colorProperties)
   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>
+      <div className="hm-brand-color-row" data-palette={palette.prefix}>{stages.map(stage => <ColorChip key={stage} prefix={palette.prefix} stage={stage} values={values} />)}</div>
     </ReferenceSection>)}
   </ReferencePage>
 }