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

@@ -1,16 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import {
-  LineCurveDotLabelExample,
-  LineCurveExample,
-  LineStepDotLabelExample,
-  LineStepExample,
-  LineStraightColorLabelExample,
-  LineStraightExample,
-} from "@hm-design/chart/examples"
-import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
+import { HMLineChart } from "@hm-design/chart"
+import { sampleLineCompare, sampleLinePointColors } 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 six examples share one data set and axis range, so connection styles compare directly: curve, straight
-// and step, each as a plain line (left) and with Dots and value labels (right).
+// Sample data only. All six charts share one data set and axis range, so connection styles compare directly: curve, straight
+// and step, each as a plain line and with Dots and value labels. Same data and props as the @hm-design/chart/examples cards;
+// open layout (no card): see chart-story.tsx.
 const meta = {
   title: "Chart/Line Chart",
   parameters: { layout: "fullscreen", controls: { disable: true } },
@@ -21,29 +17,30 @@ type Story = StoryObj<typeof meta>
 export const Line: Story = {
   name: "Line Chart",
   render: () => (
-    <StoryPage>
+    <StoryPage className={chartPageClass}>
       <StoryPageHeader title="Line Chart" />
-      {/* Same grid as Bar Chart: two per row from 1024px, one below. Source order is the mobile order; desktop reads row by row:
-          Curve | Curve + labels, Straight | Straight + colored labels, Step | Step + labels. */}
-      <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="Curve">
-          <LineCurveExample />
-        </StorySection>
-        <StorySection title="Curve · Dot + Label">
-          <LineCurveDotLabelExample />
-        </StorySection>
-        <StorySection title="Straight">
-          <LineStraightExample />
-        </StorySection>
-        <StorySection title="Straight · Color Dot + Label">
-          <LineStraightColorLabelExample />
-        </StorySection>
-        <StorySection title="Step">
-          <LineStepExample />
-        </StorySection>
-        <StorySection title="Step · Dot + Label">
-          <LineStepDotLabelExample />
-        </StorySection>
+      <ChartSampleNotice />
+      {/* Source order is the mobile order. 1024px: Curve | Curve + labels per row. 1200px: three columns, plain styles in the
+          first row and their Dot + Label versions below. */}
+      <StorySectionGrid className={chartGrid.pairs}>
+        <ChartSpecimen title="Curve" description="monotone · Dot 없음">
+          <HMLineChart {...sampleLineCompare} curve="monotone" dots={false} label="월별 접수·완료 곡선형 선 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Curve · Dot + Label" description="monotone · Dot과 값 Label">
+          <HMLineChart {...sampleLineCompare} curve="monotone" pointLabels label="월별 접수·완료 곡선형 Dot·값 라벨 선 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Straight" description="linear · Dot 없음">
+          <HMLineChart {...sampleLineCompare} curve="linear" dots={false} label="월별 접수·완료 직선형 선 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Straight · Color Dot + Label" description="linear · Dot 개별 색상 + 값 Label">
+          <HMLineChart {...sampleLinePointColors} curve="linear" pointLabels label="월별 접수·완료 직선형 포인트별 색상 선 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Step" description="step · Dot 없음">
+          <HMLineChart {...sampleLineCompare} curve="step" dots={false} label="월별 접수·완료 계단형 선 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Step · Dot + Label" description="step · Dot과 값 Label">
+          <HMLineChart {...sampleLineCompare} curve="step" pointLabels label="월별 접수·완료 계단형 Dot·값 라벨 선 차트(예시 데이터)" />
+        </ChartSpecimen>
       </StorySectionGrid>
     </StoryPage>
   ),