style(chart): open chart pages and surface/track tokens

- @hm-design/chart: add --hm-chart-track (radial tracks, horizontal bar
  hover band; warm neutral light) and --hm-chart-surface (slice / segment
  gaps, Dot rings, label halos, radial meter center; white by default)
- --hm-chart-bar-name-halo stays an optional override and falls back to
  --hm-chart-surface; official chart.tsx unchanged
- Storybook Chart pages (Bar / Line / Area / Donut / Pie / Radar / Radial):
  open layout without example cards, 2-4 responsive columns, one sample
  data notice per page, surface token set to the content background
- Same sample data, props, tooltip and interaction as the example cards;
  examples entry and consumer example unchanged
- README: surface / track token usage

src/chart/radial-chart.stories.tsx

@@ -1,15 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import {
-  RadialGridExample,
-  RadialLabelExample,
-  RadialShapeExample,
-  RadialSimpleExample,
-  RadialStackedExample,
-  RadialTextExample,
-} from "@hm-design/chart/examples"
-import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
+import { HMRadialBarChart, HMRadialMeterChart, HMRadialStackedChart } from "@hm-design/chart"
+import { sampleRadial, sampleRadialShape, sampleRadialStacked, sampleRadialText } from "@hm-design/chart/examples"
+import { StoryPage, StoryPageHeader, StorySectionGrid } from "@/components/story-page"
+import { ChartSampleNotice, ChartSpecimen, chartGrid, chartPageClass } from "./chart-story"
 
-// Sample data only. One example per official shadcn/ui radial chart (radial-simple, -label, -grid, -text, -shape, -stacked).
+// Sample data only. One chart per official shadcn/ui radial chart (radial-simple, -label, -grid, -text, -shape, -stacked).
+// Same data and props (angles, radii, tracks) as the @hm-design/chart/examples cards; open layout (no card): see chart-story.tsx.
 const meta = {
   title: "Chart/Radial Chart",
   parameters: { layout: "fullscreen", controls: { disable: true } },
@@ -20,28 +16,29 @@ type Story = StoryObj<typeof meta>
 export const Radial: Story = {
   name: "Radial Chart",
   render: () => (
-    <StoryPage>
+    <StoryPage className={chartPageClass}>
       <StoryPageHeader title="Radial Chart" />
-      {/* Same grid as the other Chart pages: two per row from 1024px, one below; source order is the mobile order. */}
-      <StorySectionGrid className="grid-cols-1 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
-        <StorySection title="Basic">
-          <RadialSimpleExample />
-        </StorySection>
-        <StorySection title="Label">
-          <RadialLabelExample />
-        </StorySection>
-        <StorySection title="Grid">
-          <RadialGridExample />
-        </StorySection>
-        <StorySection title="Text">
-          <RadialTextExample />
-        </StorySection>
-        <StorySection title="Shape">
-          <RadialShapeExample />
-        </StorySection>
-        <StorySection title="Stacked">
-          <RadialStackedExample />
-        </StorySection>
+      <ChartSampleNotice />
+      {/* Two per row from 1024px, three from 1200px, one below; source order is the mobile order. */}
+      <StorySectionGrid className={chartGrid.compact}>
+        <ChartSpecimen title="Basic" description="radial-simple · 항목별 막대">
+          <HMRadialBarChart {...sampleRadial} label="업무 상태 방사형 막대 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Label" description="radial-label · 막대 안 항목명">
+          <HMRadialBarChart {...sampleRadial} labels startAngle={-90} endAngle={380} label="업무 상태 방사형 막대 차트, 항목명 Label(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Grid" description="radial-grid · 원형 Grid">
+          <HMRadialBarChart {...sampleRadial} grid label="업무 상태 방사형 막대 차트, Grid(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Text" description="radial-text · 중앙 Text">
+          <HMRadialMeterChart {...sampleRadialText} startAngle={0} endAngle={250} innerRadius={75} outerRadius={90} trackRadii={[88.5, 76.5]} cornerRadius={10} label="진행 중 건수 방사형 차트, 중앙 Text(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Shape" description="radial-shape · 링 트랙">
+          <HMRadialMeterChart {...sampleRadialShape} startAngle={0} endAngle={100} innerRadius={50} outerRadius={95} trackRadii={[90.5, 54.5]} label="진행 중 건수 방사형 차트, Shape(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Stacked" description="radial-stacked · 반원 누적">
+          <HMRadialStackedChart {...sampleRadialStacked} label="업무 상태 방사형 Stacked 차트(예시 데이터)" />
+        </ChartSpecimen>
       </StorySectionGrid>
     </StoryPage>
   ),