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/radar-chart.stories.tsx

@@ -1,8 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import { RadarCustomLabelExample, RadarDotExample, RadarLinesOnlyExample, RadarPlainExample } from "@hm-design/chart/examples"
-import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
+import { HMRadarChart } from "@hm-design/chart"
+import { sampleRadar } from "@hm-design/chart/examples"
+import { StoryPage, StoryPageHeader, StorySectionGrid } from "@/components/story-page"
+import { ChartSampleNotice, ChartSpecimen, chartGrid, chartPageClass } from "./chart-story"
 
-// Sample data only. All radars share one data set (six axes, two series) and the 0-100 axis range.
+// Sample data only. All radars share one data set (six axes, two series) and the 0-100 axis range. Same data and props as the
+// @hm-design/chart/examples cards; open layout (no card): see chart-story.tsx.
 const meta = {
   title: "Chart/Radar Chart",
   parameters: { layout: "fullscreen", controls: { disable: true } },
@@ -13,22 +16,23 @@ type Story = StoryObj<typeof meta>
 export const Radar: Story = {
   name: "Radar Chart",
   render: () => (
-    <StoryPage>
+    <StoryPage className={chartPageClass}>
       <StoryPageHeader title="Radar Chart" />
-      {/* Same grid as the other Chart pages: two per row from 1024px, one below. */}
-      <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">
-          <RadarPlainExample />
-        </StorySection>
-        <StorySection title="Dot">
-          <RadarDotExample />
-        </StorySection>
-        <StorySection title="Lines Only">
-          <RadarLinesOnlyExample />
-        </StorySection>
-        <StorySection title="Custom Label">
-          <RadarCustomLabelExample />
-        </StorySection>
+      <ChartSampleNotice />
+      {/* Two per row from 1024px, all four in one row from 1600px, one below. */}
+      <StorySectionGrid className={chartGrid.quad}>
+        <ChartSpecimen title="Basic" description="영역">
+          <HMRadarChart {...sampleRadar} label="단계별 처리 수준 방사형 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Dot" description="축별 Dot">
+          <HMRadarChart {...sampleRadar} dots label="단계별 처리 수준 방사형 차트, Dot(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Lines Only" description="선만">
+          <HMRadarChart {...sampleRadar} filled={false} label="단계별 처리 수준 방사형 차트, 선만(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Custom Label" description="축 Label">
+          <HMRadarChart {...sampleRadar} customLabels label="단계별 처리 수준 방사형 차트, 축 Label(예시 데이터)" />
+        </ChartSpecimen>
       </StorySectionGrid>
     </StoryPage>
   ),