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

packages/chart/README.md

@@ -25,6 +25,7 @@
 - `@hm-design/ui/theme.css`는 차트 색 별칭(`--hm-chart-*`)이 가리키는 `--hm-sem-*` 토큰과 Noto Sans KR 글꼴을 제공합니다.
 - 차트 스타일(`@hm-design/chart/style.css`)은 JS 진입점(`@hm-design/chart`, `@hm-design/chart/examples`)이 자동으로 불러오므로 따로 import하지 않습니다.
 - `<html>`·`<body>`에 배경·글꼴을 정하는 것은 소비 앱의 몫입니다(차트는 전역 규칙을 넣지 않습니다).
+- 흰색이 아닌 배경(카드 없이 콘텐츠 배경 위 등)에 차트를 바로 놓을 때는 차트를 감싼 요소에 `--hm-chart-surface`를 그 배경색으로 지정합니다. 예: CSS `.report-charts { --hm-chart-surface: var(--hm-sem-bg-content); }` 또는 Tailwind `[--hm-chart-surface:var(--hm-sem-bg-content)]`. 조각·세그먼트 사이 간격, 포인트 Dot 외곽선, Label halo, 래디얼 미터(`HMRadialMeterChart`) 중앙 원이 이 색을 써서 배경처럼 보입니다. 지정하지 않으면 기본값 흰색(`--hm-sem-bg-surface`)입니다.
 
 ## 2. 진입점과 차트 고르기
 
@@ -116,7 +117,7 @@ npm run storybook                         # Chart 그룹: Bar / Line / Donut / P
 
 ### 예제 컴포넌트
 
-소비 예제(`examples/chart/main.tsx`)와 Storybook은 `@hm-design/chart/examples`의 예제 카드를 사용합니다: Bar(`BarChartExample`, `StackedBarChartExample`, `HorizontalBarChartExample`, `SignedBarChartExample`), Line(`LineChartExample` 외 Curve·Straight·Step 변형), Donut(`DonutChartExample` 외 Plain·Center·Active·Interactive·`DonutSolidExample`(입체형)), Pie(`PiePlainExample`, `PieLabelExample`, `PieLabelListExample`, `PieStackedExample`, `PieSolidExample`(입체형)), Radar(`RadarPlainExample`, `RadarDotExample`, `RadarLinesOnlyExample`, `RadarCustomLabelExample`), Area(`AreaCurveExample` 외 Straight·Step·Stacked·Expanded), Radial(`RadialSimpleExample`, `RadialLabelExample`, `RadialGridExample`, `RadialTextExample`, `RadialShapeExample`, `RadialStackedExample`), 묶음 `ChartExamples`. 예시 데이터(`sampleBar`, `samplePie`, `sampleRadial` 등)는 같은 진입점에서 export됩니다. 예제 카드는 `ExampleCard`(내부 컴포넌트)로 감싸며 실제 업무 데이터가 아님을 표시합니다.
+소비 예제(`examples/chart/main.tsx`)는 `@hm-design/chart/examples`의 예제 카드를 사용합니다. Storybook(`Chart` 그룹)은 같은 예시 데이터·props로 공개 차트 컴포넌트(`HM*Chart`)를 카드 없이 오픈형으로 전시합니다(Story 전용 레이아웃 `src/chart/chart-story.tsx`). 예제 카드: Bar(`BarChartExample`, `StackedBarChartExample`, `HorizontalBarChartExample`, `SignedBarChartExample`), Line(`LineChartExample` 외 Curve·Straight·Step 변형), Donut(`DonutChartExample` 외 Plain·Center·Active·Interactive·`DonutSolidExample`(입체형)), Pie(`PiePlainExample`, `PieLabelExample`, `PieLabelListExample`, `PieStackedExample`, `PieSolidExample`(입체형)), Radar(`RadarPlainExample`, `RadarDotExample`, `RadarLinesOnlyExample`, `RadarCustomLabelExample`), Area(`AreaCurveExample` 외 Straight·Step·Stacked·Expanded), Radial(`RadialSimpleExample`, `RadialLabelExample`, `RadialGridExample`, `RadialTextExample`, `RadialShapeExample`, `RadialStackedExample`), 묶음 `ChartExamples`. 예시 데이터(`sampleBar`, `samplePie`, `sampleRadial` 등)는 같은 진입점에서 export됩니다. 예제 카드는 `ExampleCard`(내부 컴포넌트)로 감싸며 실제 업무 데이터가 아님을 표시합니다.
 
 ## 공식 shadcn Chart와의 차이
 
@@ -125,6 +126,7 @@ npm run storybook                         # Chart 그룹: Bar / Line / Donut / P
 ## 제한
 
 - 차트 전용 HM 디자인 규격은 아직 없습니다. 색은 기존 HM 팔레트 Semantic 토큰의 별칭이며(`src/chart.css`), 차트 Token은 이 패키지 안에서만 정의합니다.
+- 배경 관련 차트 토큰(2026-11-12): `--hm-chart-track`(기본 `--hm-sem-palette-warm-neutral-light` #E0DACE)은 래디얼 비활성 트랙(`HMRadialBarChart` 배경 트랙, `HMRadialMeterChart` 링 트랙)과 가로 막대 Hover 띠입니다. 공식 shadcn 소스는 `muted`(#F4F1EA)인데, 콘텐츠 배경 #F5F0E5와 거의 같아 보이지 않으므로 `chart.css`에서 덮어씁니다(`chart.tsx`는 그대로). `--hm-chart-surface`(기본 `--hm-sem-bg-surface` 흰색)는 차트가 놓인 면의 색입니다(위 §1 참고). `--hm-chart-bar-name-halo`는 선택 override로 남았고, 지정하지 않으면 `--hm-chart-surface`를 씁니다. 흰 배경에서는 트랙·Hover 띠만 한 단계 진해지고 나머지는 이전과 같습니다.
 - 글자색은 Admin 텍스트 위계를 따릅니다: 툴팁 값·중앙값·막대 이름/값은 `--hm-sem-fg-primary`(#212121), 축 눈금(Cartesian·Radar 기본 축 이름)·범례·툴팁 이름·중앙 캡션은 `--hm-chart-axis-text` → `--hm-sem-fg-secondary`(#616161)입니다.
 - 접근성 후속 항목(2026-11-11 기록, 미수정): Line·Area 포인트 값 Label은 시리즈 색을 그대로 씁니다. 기본 시리즈 4 `#ECD4A2`(흰색 대비 1.45:1)·5 `#9A9284`(3.08:1)는 4.5:1 미만입니다. 시리즈 색은 유지하며 Label 색 정책은 별도 결정입니다.
 - `@hm-design/chart/examples`의 `ExampleCard`는 공개 Export가 아닙니다(예제 카드를 통해서만 사용).

packages/chart/src/chart.css

@@ -34,6 +34,14 @@
   --hm-chart-axis-text: var(--hm-sem-fg-secondary);
   --hm-chart-center-value: var(--hm-sem-fg-primary);
   --hm-chart-font-family: var(--hm-font-family-base);
+
+  /* Inactive track of the radial charts and the hover band behind horizontal bars: a warm neutral one step darker than the
+     muted background, so it stays visible on white and on the warm content background (#F5F0E5) without competing with data. */
+  --hm-chart-track: var(--hm-sem-palette-warm-neutral-light);
+  /* The surface the chart sits on. Gaps between slices / segments, the ring around point Dots, label halos and the circle that
+     cuts the radial meter track into a ring use it, so they read as background. White by default (charts on a card); a chart
+     placed directly on another background sets it on its container, e.g. --hm-chart-surface: var(--hm-sem-bg-content). */
+  --hm-chart-surface: var(--hm-sem-bg-surface);
 }
 
 [data-slot="chart"] {
@@ -53,6 +61,12 @@
   stroke: var(--hm-chart-grid-color);
   stroke-opacity: 0.6;
 }
+/* Track and hover band. The official chart.tsx paints both with `muted` (#F4F1EA), which disappears on the content background;
+   this unlayered rule wins over its layered utilities, so the official source stays unchanged. */
+[data-slot="chart"] .recharts-radial-bar-background-sector,
+[data-slot="chart"] .recharts-rectangle.recharts-tooltip-cursor {
+  fill: var(--hm-chart-track);
+}
 
 [data-slot="chart-tooltip-content"] {
   border: 1px solid var(--hm-chart-tooltip-border-color);
@@ -87,10 +101,12 @@
 }
 
 /* Horizontal bar chart labels. The item name sits on a gradient that starts at 30% of the series color, so the dark text gets
-   a light halo (the card surface) to stay readable from the faint left end to the opaque right end. */
+   a light halo (the chart surface) to stay readable from the faint left end to the opaque right end.
+   --hm-chart-bar-name-halo stays an optional override, but it is no longer declared here: a value declared on :root would resolve
+   --hm-chart-surface there, so a container that sets --hm-chart-surface would not reach the halo. The rules below fall back to
+   --hm-chart-surface (white by default, the same color as before). */
 :root, [data-hm-theme] {
   --hm-chart-bar-name-text: var(--hm-sem-fg-primary);
-  --hm-chart-bar-name-halo: var(--hm-sem-bg-surface);
   --hm-chart-bar-value-text: var(--hm-sem-fg-primary);
 }
 [data-slot="chart-bar-name"],
@@ -101,7 +117,7 @@
 }
 [data-slot="chart-bar-name"] {
   fill: var(--hm-chart-bar-name-text);
-  stroke: var(--hm-chart-bar-name-halo);
+  stroke: var(--hm-chart-bar-name-halo, var(--hm-chart-surface));
   stroke-width: 3px;
   stroke-linejoin: round;
   paint-order: stroke;
@@ -136,7 +152,7 @@
 }
 [data-slot="chart-slice-label"] {
   fill: var(--hm-chart-bar-name-text);
-  stroke: var(--hm-chart-bar-name-halo);
+  stroke: var(--hm-chart-bar-name-halo, var(--hm-chart-surface));
   stroke-width: 3px;
   stroke-linejoin: round;
   paint-order: stroke;
@@ -153,7 +169,7 @@
 /* Radial: item names curved along the start of each bar. The halo keeps the text readable on pale bar colors. */
 .hm-radial-name {
   fill: var(--hm-chart-bar-name-text);
-  stroke: var(--hm-chart-bar-name-halo);
+  stroke: var(--hm-chart-bar-name-halo, var(--hm-chart-surface));
   stroke-width: 2px;
   stroke-linejoin: round;
   paint-order: stroke;

packages/chart/src/components/donut-chart.tsx

@@ -165,7 +165,7 @@ export function HMDonutChart({ data, totalLabel, activeId, onActiveChange, label
           // Room for the active slice to grow outwards without leaving the chart.
           outerRadius={ring.outer}
           paddingAngle={paddingAngle(selectable)}
-          stroke="var(--hm-sem-bg-surface)"
+          stroke="var(--hm-chart-surface)"
           strokeWidth={2}
           onClick={onActiveChange ? (_slice, index) => onActiveChange(data[index].id) : undefined}
           shape={(props: PieSectorShapeProps, index: number) => (

packages/chart/src/components/line-points.tsx

@@ -50,7 +50,7 @@ export function PointDot({
       cy={y}
       r={radius}
       fill={pointColor(payload, colorKey, fallback)}
-      stroke="var(--hm-sem-bg-surface)"
+      stroke="var(--hm-chart-surface)"
       strokeWidth={2}
     />
   )

packages/chart/src/components/pie-chart.tsx

@@ -126,7 +126,7 @@ export function HMPieChart({ data, labels, label, className }: HMPieChartProps)
           dataKey="value"
           nameKey="id"
           outerRadius={outside ? "58%" : "80%"}
-          stroke="var(--hm-sem-bg-surface)"
+          stroke="var(--hm-chart-surface)"
           strokeWidth={2}
           label={
             outside ? <PieOutsideLabel items={data} /> : labels === "inside" ? <PieSliceLabel items={data} /> : false
@@ -185,8 +185,8 @@ export function HMStackedPieChart({ rings, label, className }: HMStackedPieChart
       <PieChart accessibilityLayer>
         <ChartTooltip content={<RingTooltip />} />
         <ChartLegend itemSorter={null} content={<RingLegend rings={rings} items={items} />} />
-        <Pie data={slices[0]} dataKey="value" nameKey="id" outerRadius="46%" stroke="var(--hm-sem-bg-surface)" strokeWidth={2} />
-        <Pie data={slices[1]} dataKey="value" nameKey="id" innerRadius="54%" outerRadius="76%" stroke="var(--hm-sem-bg-surface)" strokeWidth={2} />
+        <Pie data={slices[0]} dataKey="value" nameKey="id" outerRadius="46%" stroke="var(--hm-chart-surface)" strokeWidth={2} />
+        <Pie data={slices[1]} dataKey="value" nameKey="id" innerRadius="54%" outerRadius="76%" stroke="var(--hm-chart-surface)" strokeWidth={2} />
       </PieChart>
     </ChartContainer>
   )

packages/chart/src/components/radial-chart.tsx

@@ -193,12 +193,12 @@ export function HMRadialMeterChart({
   return (
     <ChartContainer config={config} role="group" aria-label={label} className={cn(CHART_BOX, className)}>
       <RadialBarChart data={[row]} startAngle={startAngle} endAngle={endAngle} innerRadius={innerRadius} outerRadius={outerRadius}>
-        {/* Official: the first circle is the muted track, the second (smaller) one is the surface color that cuts it into a ring. */}
+        {/* Official: the first circle is the track (official muted, HM --hm-chart-track), the second (smaller) one is the chart surface color that cuts it into a ring. */}
         <PolarGrid
           gridType="circle"
           radialLines={false}
           stroke="none"
-          className="first:fill-muted last:fill-[var(--hm-sem-bg-surface)]"
+          className="first:fill-[var(--hm-chart-track)] last:fill-[var(--hm-chart-surface)]"
           polarRadius={[...trackRadii]}
         />
         <PolarAngleAxis type="number" domain={[0, maxOf([item.value])]} tick={false} axisLine={false} />
@@ -269,7 +269,7 @@ export function HMRadialStackedChart({
               stackId="a"
               fill={`var(--color-${item.key})`}
               cornerRadius={5}
-              stroke="var(--hm-sem-bg-surface)"
+              stroke="var(--hm-chart-surface)"
               strokeWidth={2}
             />
           ))}

packages/chart/src/components/solid-chart.tsx

@@ -89,7 +89,7 @@ function SolidSlice({ sector, hole, sideColor, topColor, center }: SolidSlicePro
   const frontTo = Math.min(to, 360)
   const backFrom = Math.max(from, 0)
   const backTo = Math.min(to, 180)
-  const seam = "var(--hm-sem-bg-surface)"
+  const seam = "var(--hm-chart-surface)"
   // The seam between slices is a surface-colored stroke; on a very thin slice it thins out so the slice stays visible.
   const arcPx = (to - from) * RAD * p.rx
   const seamTop = arcPx < 4 ? 0.5 : arcPx < 10 ? 1 : 2

src/chart/area-chart.stories.tsx

@@ -1,18 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import {
-  AreaCurveDotLabelExample,
-  AreaCurveExample,
-  AreaExpandedExample,
-  AreaStackedExample,
-  AreaStepDotLabelExample,
-  AreaStepExample,
-  AreaStraightColorLabelExample,
-  AreaStraightExample,
-} from "@hm-design/chart/examples"
-import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
+import { HMAreaChart } 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. The eight examples share the Line Chart data: connection styles as a plain area (left) and with Dots and
-// value Labels (right), then Stacked (running total) and Expanded (each month normalized to 100%).
+// Sample data only. The eight charts share the Line Chart data: connection styles as a plain area and with Dots and value
+// Labels, then Stacked (running total) and Expanded (each month normalized to 100%). Same data and props as the
+// @hm-design/chart/examples cards; open layout (no card): see chart-story.tsx.
 const meta = {
   title: "Chart/Area Chart",
   parameters: { layout: "fullscreen", controls: { disable: true } },
@@ -23,34 +17,37 @@ type Story = StoryObj<typeof meta>
 export const Area: Story = {
   name: "Area Chart",
   render: () => (
-    <StoryPage>
+    <StoryPage className={chartPageClass}>
       <StoryPageHeader title="Area Chart" />
-      {/* Same grid and order as Line Chart, plus a Stacked | Expanded row. */}
-      <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">
-          <AreaCurveExample />
-        </StorySection>
-        <StorySection title="Curve · Dot + Label">
-          <AreaCurveDotLabelExample />
-        </StorySection>
-        <StorySection title="Straight">
-          <AreaStraightExample />
-        </StorySection>
-        <StorySection title="Straight · Color Dot + Label">
-          <AreaStraightColorLabelExample />
-        </StorySection>
-        <StorySection title="Step">
-          <AreaStepExample />
-        </StorySection>
-        <StorySection title="Step · Dot + Label">
-          <AreaStepDotLabelExample />
-        </StorySection>
-        <StorySection title="Stacked">
-          <AreaStackedExample />
-        </StorySection>
-        <StorySection title="Expanded">
-          <AreaExpandedExample />
-        </StorySection>
+      <ChartSampleNotice />
+      {/* Same grid and order as Line Chart, then a Stacked | Expanded row. */}
+      <StorySectionGrid className={chartGrid.pairs}>
+        <ChartSpecimen title="Curve" description="monotone">
+          <HMAreaChart {...sampleLineCompare} curve="monotone" label="월별 접수·완료 곡선형 영역 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Curve · Dot + Label" description="monotone · Dot과 값 Label">
+          <HMAreaChart {...sampleLineCompare} curve="monotone" pointLabels label="월별 접수·완료 곡선형 Dot·값 Label 영역 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Straight" description="linear">
+          <HMAreaChart {...sampleLineCompare} curve="linear" label="월별 접수·완료 직선형 영역 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Straight · Color Dot + Label" description="linear · Dot 개별 색상 + 값 Label">
+          <HMAreaChart {...sampleLinePointColors} curve="linear" pointLabels label="월별 접수·완료 직선형 포인트별 색상 영역 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Step" description="step">
+          <HMAreaChart {...sampleLineCompare} curve="step" label="월별 접수·완료 계단형 영역 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Step · Dot + Label" description="step · Dot과 값 Label">
+          <HMAreaChart {...sampleLineCompare} curve="step" pointLabels label="월별 접수·완료 계단형 Dot·값 Label 영역 차트(예시 데이터)" />
+        </ChartSpecimen>
+      </StorySectionGrid>
+      <StorySectionGrid className={chartGrid.pair}>
+        <ChartSpecimen title="Stacked" description="값 누적">
+          <HMAreaChart {...sampleLineCompare} stacked label="월별 접수·완료 Stacked 영역 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Expanded" description="합계 100%">
+          <HMAreaChart {...sampleLineCompare} expanded label="월별 접수·완료 Expanded 영역 차트(예시 데이터)" />
+        </ChartSpecimen>
       </StorySectionGrid>
     </StoryPage>
   ),

src/chart/bar-chart.stories.tsx

@@ -1,13 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import {
-  BarChartExample,
-  HorizontalBarChartExample,
-  SignedBarChartExample,
-  StackedBarChartExample,
-} from "@hm-design/chart/examples"
-import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
+import { HMBarChart, HMHorizontalBarChart, HMSignedBarChart } from "@hm-design/chart"
+import { sampleBar, sampleHorizontalBar, sampleSignedBar } from "@hm-design/chart/examples"
+import { StoryPage, StoryPageHeader, StorySectionGrid } from "@/components/story-page"
+import { ChartSampleNotice, ChartSpecimen, chartGrid, chartPageClass } from "./chart-story"
 
-// shadcn/ui Chart (Recharts) with HM tokens, from the public @hm-design/chart entries. All values are sample data.
+// shadcn/ui Chart (Recharts) with HM tokens, from the public @hm-design/chart entry. All values are sample data; each chart has
+// the same data and props as the matching @hm-design/chart/examples card. Open layout (no card): see chart-story.tsx.
 // Narrow widths: use the toolbar Viewport presets (HM Mobile · 390). The chart is fluid.
 const meta = {
   title: "Chart/Bar Chart",
@@ -19,24 +17,24 @@ type Story = StoryObj<typeof meta>
 export const Bar: Story = {
   name: "Bar Chart",
   render: () => (
-    <StoryPage>
+    <StoryPage className={chartPageClass}>
       <StoryPageHeader title="Bar Chart" />
-      {/* Two sections per row from 1024px (HM desktop boundary), one below. Source order is the mobile order; on desktop it reads
-          row by row: Grouped | Horizontal, then Stacked | Positive / Negative. On desktop every row has the same height and each
-          card fills its section, so card tops, bottoms and chart areas line up. */}
-      <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="Grouped">
-          <BarChartExample />
-        </StorySection>
-        <StorySection title="Horizontal">
-          <HorizontalBarChartExample />
-        </StorySection>
-        <StorySection title="Stacked">
-          <StackedBarChartExample />
-        </StorySection>
-        <StorySection title="Positive / Negative">
-          <SignedBarChartExample />
-        </StorySection>
+      <ChartSampleNotice />
+      {/* Two per row from 1024px, one below. Source order is the mobile order; desktop reads row by row:
+          Grouped | Horizontal, then Stacked | Positive / Negative. */}
+      <StorySectionGrid className={chartGrid.pair}>
+        <ChartSpecimen title="Grouped" description="월별 접수·완료 현황 · 상반기 월별 건수">
+          <HMBarChart {...sampleBar} label="월별 접수·완료 건수 막대 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Horizontal" description="항목별 처리 건수 · 가로 막대">
+          <HMHorizontalBarChart {...sampleHorizontalBar} label="항목별 처리 건수 가로 막대 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Stacked" description="월별 접수·완료 현황(누적)">
+          <HMBarChart {...sampleBar} stacked label="월별 접수·완료 건수 누적 막대 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Positive / Negative" description="월별 순증감 · 0 기준 양수·음수">
+          <HMSignedBarChart {...sampleSignedBar} label="월별 순증감 양수·음수 막대 차트(예시 데이터)" />
+        </ChartSpecimen>
       </StorySectionGrid>
     </StoryPage>
   ),

src/chart/chart-story.tsx

@@ -0,0 +1,76 @@
+import type { ReactNode } from "react"
+import { sampleDataNotice } from "@hm-design/chart/examples"
+import { StorySection } from "@/components/story-page"
+
+// Storybook presentation only (not part of @hm-design/chart): the open Chart page layout (2026-11-12, user request).
+// Charts sit directly on the Storybook content background, without the example card (background, border, padding). Each chart
+// is one StorySection: H2 variant name → description (what the example shows) → thin section divider → optional toolbar → chart.
+// The charts themselves are the public @hm-design/chart components on the @hm-design/chart/examples sample data, with the same
+// props as the matching *Example card, so data, legend, tooltip and interaction are unchanged. No common layout change; the page
+// only sets the chart's own surface token (chartPageClass).
+
+/**
+ * className of every Chart page's StoryPage. The charts sit on the Storybook content background (--hm-sem-bg-content), so the page
+ * sets the chart's public surface token to it (2026-11-12): slice / segment gaps, Dot rings, label halos and the radial meter's
+ * center read as background instead of white. Only the token value is set, as a consumer would; no chart internals are overridden.
+ */
+export const chartPageClass = "[--hm-chart-surface:var(--hm-sem-bg-content)]"
+
+/** One sample-data notice per page, instead of a badge and a notice under every chart. */
+export function ChartSampleNotice() {
+  return (
+    <p className="m-0 text-[length:var(--hm-label-font-size)] leading-[var(--hm-label-line-height)] text-[color:var(--hm-sem-fg-secondary)]">
+      {sampleDataNotice}
+    </p>
+  )
+}
+
+/**
+ * One chart of a Chart page. `toolbar` keeps the example card's control row (Select height, so the charts of a row start at the
+ * same height); pass `null` for an empty row of that height next to charts that have one.
+ */
+export function ChartSpecimen({
+  title,
+  description,
+  toolbar,
+  children,
+}: {
+  title: string
+  description?: ReactNode
+  toolbar?: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <StorySection title={title} description={description}>
+      {toolbar !== undefined ? (
+        <div
+          data-slot="chart-story-toolbar"
+          aria-hidden={toolbar === null ? true : undefined}
+          className="mb-3 flex min-h-[34px] items-center text-sm text-muted-foreground"
+        >
+          {toolbar}
+        </div>
+      ) : null}
+      {children}
+    </StorySection>
+  )
+}
+
+// Grid columns (className of StorySectionGrid). Widths are the preview iframe width, which already excludes the Storybook sidebar.
+// A third column only from 1200px, where each column keeps about 340px (Radial needs 320px). Rows align at the top; every
+// chart keeps its own height. Source order is the one-column (mobile) order. All breakpoints are px (min-[…]): Tailwind does not
+// order a rem breakpoint (lg) against a px one, so `lg:grid-cols-2` would win over `min-[1200px]:grid-cols-3`.
+const base = "grid-cols-1 items-start *:min-w-0"
+export const chartGrid = {
+  /** Wide charts (Bar): two per row from 1024px. */
+  pair: `${base} min-[1024px]:grid-cols-2`,
+  /** Compact round charts (Donut, Pie, Radial): two per row from 1024px, three from 1200px. */
+  compact: `${base} min-[1024px]:grid-cols-2 min-[1200px]:grid-cols-3`,
+  /** Radar (four charts): two per row from 1024px, four in one row from 1600px. */
+  quad: `${base} min-[1024px]:grid-cols-2 min-[1600px]:grid-cols-4`,
+  /**
+   * Plain / labelled pairs (Line, Area): two per row from 1024px (each pair in one row); from 1200px three columns that fill
+   * top to bottom, so the plain styles form the first row and their Dot + Label versions the second.
+   */
+  pairs: `${base} min-[1024px]:grid-cols-2 min-[1200px]:grid-flow-col min-[1200px]:grid-cols-3 min-[1200px]:grid-rows-2`,
+} as const

src/chart/donut-chart.stories.tsx

@@ -1,14 +1,14 @@
+import { useState } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import {
-  DonutActiveExample,
-  DonutCenterExample,
-  DonutInteractiveExample,
-  DonutPlainExample,
-  DonutSolidExample,
-} from "@hm-design/chart/examples"
-import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
+import { HMDonutChart, HMSolidDonutChart } from "@hm-design/chart"
+import { sampleDonutStates } from "@hm-design/chart/examples"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@hm-design/ui"
+import { StoryPage, StoryPageHeader, StorySectionGrid } from "@/components/story-page"
+import { ChartSampleNotice, ChartSpecimen, chartGrid, chartPageClass } from "./chart-story"
 
-// Sample data only. The four examples share one data set, color mapping and item order.
+// Sample data only. The five charts share one data set, color mapping and item order. Same data, props and toolbar text as the
+// @hm-design/chart/examples cards; open layout (no card): see chart-story.tsx. Every chart has a toolbar row (Select height),
+// so the donuts of a row start at the same height.
 const meta = {
   title: "Chart/Donut Chart",
   parameters: { layout: "fullscreen", controls: { disable: true } },
@@ -16,29 +16,61 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+// Interactive: Select and slice click share one active item (same as DonutInteractiveExample).
+function DonutInteractive() {
+  const [activeId, setActiveId] = useState(sampleDonutStates.activeId)
+  return (
+    <ChartSpecimen
+      title="Interactive"
+      description="선택 또는 클릭"
+      toolbar={
+        <Select value={activeId} onValueChange={setActiveId}>
+          <SelectTrigger size="medium" aria-label="강조할 업무 상태 선택" className="w-full max-w-64">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {sampleDonutStates.data.map(item => (
+              <SelectItem key={item.id} value={item.id}>{item.label}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      }
+    >
+      <HMDonutChart
+        data={sampleDonutStates.data}
+        activeId={activeId}
+        onActiveChange={setActiveId}
+        label="업무 상태 도넛 차트, 항목을 선택하거나 조각을 클릭해 강조(예시 데이터)"
+      />
+    </ChartSpecimen>
+  )
+}
+
 export const Donut: Story = {
   name: "Donut Chart",
-  render: () => (
-    <StoryPage>
-      <StoryPageHeader title="Donut Chart" />
-      {/* Same grid as Bar and Line Chart: 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">
-          <DonutPlainExample />
-        </StorySection>
-        <StorySection title="Basic · Center Text">
-          <DonutCenterExample />
-        </StorySection>
-        <StorySection title="Active">
-          <DonutActiveExample />
-        </StorySection>
-        <StorySection title="Interactive">
-          <DonutInteractiveExample />
-        </StorySection>
-        <StorySection title="Solid">
-          <DonutSolidExample />
-        </StorySection>
-      </StorySectionGrid>
-    </StoryPage>
-  ),
+  render: () => {
+    const selected = sampleDonutStates.data.find(item => item.id === sampleDonutStates.activeId)
+    return (
+      <StoryPage className={chartPageClass}>
+        <StoryPageHeader title="Donut Chart" />
+        <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="기본" toolbar="중앙 표시 없음">
+            <HMDonutChart data={sampleDonutStates.data} label="업무 상태 도넛 차트, 가운데 값 없음(예시 데이터)" />
+          </ChartSpecimen>
+          <ChartSpecimen title="Basic · Center Text" description="전체 합계" toolbar="중앙 표시: 전체 합계">
+            <HMDonutChart data={sampleDonutStates.data} totalLabel={sampleDonutStates.totalLabel} label="업무 상태 도넛 차트, 가운데 전체 합계(예시 데이터)" />
+          </ChartSpecimen>
+          <ChartSpecimen title="Active" description="선택된 항목" toolbar={`선택 항목: ${selected?.label ?? ""}`}>
+            <HMDonutChart data={sampleDonutStates.data} activeId={sampleDonutStates.activeId} label="업무 상태 도넛 차트, 선택된 항목 강조(예시 데이터)" />
+          </ChartSpecimen>
+          <DonutInteractive />
+          <ChartSpecimen title="Solid" description="입체형" toolbar={null}>
+            <HMSolidDonutChart data={sampleDonutStates.data} totalLabel={sampleDonutStates.totalLabel} label="업무 상태 입체형 도넛 차트, 가운데 전체 합계(예시 데이터)" />
+          </ChartSpecimen>
+        </StorySectionGrid>
+      </StoryPage>
+    )
+  },
 }

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>
   ),

src/chart/pie-chart.stories.tsx

@@ -1,8 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import { PieLabelExample, PieLabelListExample, PiePlainExample, PieSolidExample, PieStackedExample } from "@hm-design/chart/examples"
-import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
+import { HMPieChart, HMSolidPieChart, HMStackedPieChart } from "@hm-design/chart"
+import { samplePie, sampleStackedPie } 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 pies share one item list and color mapping; the stacked pie draws two series as concentric rings.
+// Same data and props as the @hm-design/chart/examples cards; open layout (no card): see chart-story.tsx.
 const meta = {
   title: "Chart/Pie Chart",
   parameters: { layout: "fullscreen", controls: { disable: true } },
@@ -13,25 +16,26 @@ type Story = StoryObj<typeof meta>
 export const Pie: Story = {
   name: "Pie Chart",
   render: () => (
-    <StoryPage>
+    <StoryPage className={chartPageClass}>
       <StoryPageHeader title="Pie Chart" />
-      {/* Same grid as Bar, Line and Donut Chart: 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">
-          <PiePlainExample />
-        </StorySection>
-        <StorySection title="Label">
-          <PieLabelExample />
-        </StorySection>
-        <StorySection title="Label List">
-          <PieLabelListExample />
-        </StorySection>
-        <StorySection title="Stacked">
-          <PieStackedExample />
-        </StorySection>
-        <StorySection title="Solid">
-          <PieSolidExample />
-        </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="기본">
+          <HMPieChart {...samplePie} label="업무 상태 파이 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Label" description="이름과 값">
+          <HMPieChart {...samplePie} labels="outside" label="업무 상태 파이 차트, 조각 바깥 이름·값 Label(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Label List" description="조각 안 값">
+          <HMPieChart {...samplePie} labels="inside" label="업무 상태 파이 차트, 조각 안 값 Label(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Stacked" description="두 시리즈 링">
+          <HMStackedPieChart {...sampleStackedPie} label="분기별 업무 상태 Stacked 파이 차트(예시 데이터)" />
+        </ChartSpecimen>
+        <ChartSpecimen title="Solid" description="입체형">
+          <HMSolidPieChart {...samplePie} label="업무 상태 입체형 파이 차트(예시 데이터)" />
+        </ChartSpecimen>
       </StorySectionGrid>
     </StoryPage>
   ),

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>
   ),

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>
   ),