csat-chart.js 1.2.0 → 1.5.0

package/dist/csat-chart.d.cts

@@ -37,6 +37,30 @@ declare function ensureFonts(options?: EnsureFontsOptions): Promise<boolean>;
 type LegendPosition = 'bottom' | 'right';
 /** 플롯 안쪽 범례를 놓을 모서리 */
 type InsideLegendCorner = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/** 글꼴 자리. 시험지는 명조 자리와 고딕 자리가 갈린다. */
+type FontRole = 'serif' | 'sans' | 'custom';
+/**
+ * 두 글꼴 «자리»를 통째로 갈아 끼운다.
+ *
+ * 시험지 그림은 자리마다 서체가 다르다 — 축 이름·눈금·자료값은 명조,
+ * 제목·출처·각주·범례는 고딕이다. 그 짝 자체는 그대로 두고 각 자리에 무슨
+ * 글꼴을 쓸지만 바꾸고 싶을 때 쓴다. 적지 않은 자리는 기본 글꼴 그대로다.
+ *
+ * ```js
+ * // 한컴오피스가 깔린 PC 라면 내려받을 것이 없다 — 보는 사람의 글꼴을 그대로 쓴다
+ * options.fontStack = { serif: "'함초롬바탕', serif", sans: "'함초롬돋움', sans-serif" };
+ * ```
+ *
+ * `fontFamily` 와 층이 다르다. `fontFamily` 는 축이 **어느 자리**를 쓸지
+ * 고르고, 이것은 그 자리가 **무슨 글꼴**인지 정한다. 웹폰트를 쓰려면
+ * `CsatChart.ensureFonts({ href, families })` 로 먼저 받아 둔다.
+ */
+interface FontStack {
+    /** 명조 자리 — 축 이름·눈금·자료값. 기본 `'Noto Serif KR', 'NanumMyeongjo', serif` */
+    serif?: string;
+    /** 고딕 자리 — 제목·출처·각주·범례. 기본 `'Noto Sans KR', sans-serif` */
+    sans?: string;
+}
 interface GraphOptions {
     title: string;
     source: string;
@@ -56,8 +80,15 @@ interface GraphOptions {
      */
     sourceInline?: boolean;
     footnotes: string[];
-    fontFamily: 'serif' | 'sans' | 'custom';
+    fontFamily: FontRole;
     customFont: string;
+    /**
+     * 글꼴 자리를 갈아 끼운다. 적지 않은 자리는 기본 글꼴 그대로다.
+     *
+     * `customFont` 과 다르다 — `customFont` 은 `fontFamily: 'custom'` 일 때
+     * **축 쪽**만 바꾸고 제목·범례는 못 건드린다. 이쪽은 자리마다 따로 준다.
+     */
+    fontStack?: FontStack;
     fontSize: {
         title: number;
         axisLabel: number;
@@ -477,6 +508,200 @@ interface CubeGraphData {
 }
 declare function createDefaultCubeData(): CubeGraphData;
 
+/** 그릴 사분면. `'all'` 은 축 양끝에 화살표를 단다 */
+type EconQuadrants = 'first' | 'all';
+/**
+ * 유도선·격자의 점선 모양.
+ *
+ * 실물은 둘 다 쓴다 — 열세 장 중 열둘이 파선, 2027학년도 6월 16번만 촘촘한
+ * 점선이다. 두 모양이 하는 일은 같아 보인다(둘 다 값을 축으로 끌어 내린다).
+ * 조판 취향으로 보이지만 어느 쪽도 재현할 수 있게 남겨 둔다.
+ */
+type EconDash = 'dashed' | 'dotted';
+/** 글자를 기준점의 어느 쪽에 놓을지 */
+type EconLabelPos = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/**
+ * 점에서 긋는 점선 유도선.
+ *
+ * `'to-x'` 는 가로축으로 내리고 `'to-y'` 는 세로축으로 끌며 `'both'` 는 둘 다다.
+ * `'cross'` 는 점을 지나 **플롯 전체**를 가로지른다 — 2026학년도 수능 12번처럼
+ * 「이 값이 안 변했다」를 보이는 자리에 쓴다.
+ */
+type EconGuide = 'none' | 'to-x' | 'to-y' | 'both' | 'cross';
+interface EconXY {
+    x: number;
+    y: number;
+}
+interface EconAxis {
+    /**
+     * 축 이름. 세로축은 축 위에, 가로축은 화살촉 오른쪽에 놓인다.
+     *
+     * 리터럴 `\n`(역슬래시 + n)이나 진짜 줄바꿈을 넣으면 **여러 줄**로 앉는다 —
+     * 실물이 「GDP」와 「(억 달러)」를 두 줄로 쌓는 꼴이다(2027학년도 6월 16번,
+     * 2026학년도 수능 7번). 산점도의 `yLabel` 과 같은 규약이다.
+     */
+    label: string;
+    min: number;
+    max: number;
+    /**
+     * 눈금 «값». **값이 곧 자리다** — 자[尺]는 언제나 고르고, 눈금만 띄엄띄엄
+     * 찍힌다. 2026학년도 9월 15번의 `0·10·20·50` 이 그 꼴이다(50 이 20 의 세 배
+     * 거리에 선다). 눈금 표시선은 그리지 않는다 — 시험지가 그렇다. 격자나
+     * 유도선이 축까지 닿아 자리를 알려 준다.
+     */
+    ticks: number[];
+    /**
+     * 눈금 자리에 숫자 대신 적을 **글자**. `ticks` 와 짝을 이룬다(같은 자리끼리).
+     *
+     * 눈금이 값이 아니라 이름인 그림이 실물에 둘 있다. 2027학년도 6월 17번의
+     * 세로축은 숫자가 하나도 없이 `P_1`·`P_2` 두 이름만 서고, 같은 회차 16번의
+     * 가로축은 `t년`·`t+1년`·`t+2년` 이다. 그 둘은 서로 다른 그림이 아니라
+     * **같은 일**이다 — 자리는 `ticks` 가 정하고 이 배열은 거기 적을 글자만 준다.
+     *
+     * 적지 않거나 빈 문자열이면 숫자를 그대로 적는다. 아래 첨자를 쓸 수 있다.
+     */
+    tickLabels?: string[];
+    /**
+     * 눈금이 0에서 시작하지 않을 때 축에 넣는 생략 기호 `≈`.
+     * 원점과 첫 눈금 사이에 놓인다 (2026학년도 9월 7번은 두 축에 다 있다).
+     */
+    broken: boolean;
+}
+interface EconLine {
+    /** 선 끝에 붙는 이름. 계열을 쓰지 않는 그림은 범례 없이 여기에 이름을 단다 */
+    label: string;
+    from: EconXY;
+    to: EconXY;
+    /** 이름을 어느 끝에 붙일지. 시험지는 거의 언제나 오른쪽 끝이다 */
+    labelAt: 'from' | 'to';
+    /** 이름 자리를 미세하게 옮긴다(px). 선 둘이 한 점에서 만날 때 쓴다 */
+    labelDx?: number;
+    labelDy?: number;
+    /**
+     * 파선으로 긋는다.
+     *
+     * 선 종류가 문항의 뜻을 나른다. 2027학년도 6월 3번은 사적 편익만 반영한
+     * 수요 곡선 `D_1` 을 실선으로, 사회적 편익까지 반영한 `D_2` 를 파선으로
+     * 그어 둘을 가른다 — 색이 없는 흑백 시험지에서 이것이 유일한 구분이다.
+     */
+    dashed?: boolean;
+}
+/** 계열 꼭짓점에 얹는 기호 */
+type EconMarker = 'circle' | 'square';
+/**
+ * 점 여럿을 잇고 기호를 얹은 꺾은선.
+ *
+ * 값의 «자리» 가 아니라 «흐름» 을 묻는 그림에 쓴다 — 2027학년도 6월 16번의
+ * 명목 GDP·실질 GDP 가 t년부터 t+2년까지 어떻게 엇갈리는지가 그 예다.
+ * 직선(`lines`)과 갈리는 곳은 셋이다. 꼭짓점이 셋 이상일 수 있고, 꼭짓점마다
+ * 기호가 붙고, 이름을 **범례 상자**에 적는다.
+ */
+interface EconSeries {
+    /** 범례 상자에 적히는 이름 */
+    label: string;
+    /** 꼭짓점. 왼쪽에서 오른쪽으로 이어 긋는다 */
+    points: EconXY[];
+    /** 파선으로 긋는다 */
+    dashed: boolean;
+    /** 꼭짓점 기호 */
+    marker: EconMarker;
+    /** 기호 속을 비운다 (흰색 채움 + 검정 테두리) */
+    hollow: boolean;
+}
+interface EconPoint {
+    x: number;
+    y: number;
+    label: string;
+    labelPos: EconLabelPos;
+    guide: EconGuide;
+    /**
+     * 점을 찍을지.
+     *
+     * `false` 면 유도선만 남는다 — 2026학년도 수능 7번이 그 꼴이다. 문항이 쓰는
+     * 값마다 파선을 내리되 교점에 점은 찍지 않는다.
+     */
+    dot: boolean;
+}
+interface EconArrow {
+    from: EconXY;
+    to: EconXY;
+    /**
+     * 잇는 선에서 **수직으로** 이만큼(px) 비켜 놓는다.
+     *
+     * 곡선을 따라 움직이는 화살표가 이 꼴이다 — 2026학년도 9월 16번의 (가)·(나)는
+     * 총수요 곡선 위를 옮겨 가므로 그대로 그으면 곡선에 겹친다.
+     * 양수는 **진행 방향의 오른쪽**이다.
+     */
+    offset: number;
+    /** 양 끝을 이만큼(px) 줄인다 — 점에 닿지 않게 */
+    shorten: number;
+    /** 화살표 옆에 적는 글 (예: `(가)`) */
+    label: string;
+    labelPos: EconLabelPos;
+}
+interface EconPlaneData {
+    quadrants: EconQuadrants;
+    xAxis: EconAxis;
+    yAxis: EconAxis;
+    /** 눈금 자리마다 점선 격자를 깐다 */
+    grid: boolean;
+    dash: EconDash;
+    lines: EconLine[];
+    points: EconPoint[];
+    arrows: EconArrow[];
+    /**
+     * 꺾은선 계열.
+     *
+     * **선택 항목으로 둔 것에 뜻이 있다.** 이 셋(`series`·`legend`·`seriesGuides`)을
+     * 기본 데이터에 넣으면, 1.4.0 에 맞춰 적어 둔 자료가 검증기에서 「항목이
+     * 없습니다」로 막힌다 — `validate.ts` 는 «기본 데이터의 키» 를 필수로 보기
+     * 때문이다. 실물 열여섯 장 중 하나만 쓰는 그림이기도 하다.
+     */
+    series?: EconSeries[];
+    /**
+     * 계열 범례 상자를 놓을 모서리. 적지 않으면 범례를 그리지 않는다.
+     *
+     * 그 모서리가 자료에 막히면 나머지 셋을 차례로 본다. `options.showLegend` 는
+     * 읽지 않는다 — 이 상자는 «보여 줄까 말까» 하는 장식이 아니라 계열 이름을
+     * 적을 **유일한** 자리라서, 끄면 어느 선이 명목이고 실질인지 알 길이 없다.
+     */
+    legend?: InsideLegendCorner;
+    /**
+     * 계열 꼭짓점마다 가로축으로 파선을 내린다.
+     *
+     * 한 눈금 자리에 계열이 여럿이면 **가장 높은 점** 하나까지만 긋는다 —
+     * 실물이 그렇다(파선 하나가 두 점을 함께 꿴다).
+     */
+    seriesGuides?: boolean;
+}
+/**
+ * 수요·공급 교차 — 열세 장 중 여섯 장이 이 그림이다.
+ *
+ * 2027학년도 6월 9번의 자리값 그대로다. 이름만 바꿔 「국내 수요」·「국내 공급」
+ * 으로 쓰는 문항이 둘 더 있다.
+ */
+declare function createSupplyDemandData(): EconPlaneData;
+/**
+ * 총수요·총공급 — 물가와 실질 GDP 를 축으로 삼는 국민 경제 그림.
+ *
+ * 2026학년도 9월 16번의 모양이다. 눈금이 하나도 없는 것이 이 그림의 성격이다 —
+ * 값이 아니라 «어느 쪽으로 움직였는가» 만 묻기 때문이다. 같은 축 이름을 쓰는
+ * 문항이 하나 더 있다(2026학년도 수능 12번, 그쪽은 곡선 없이 점만 찍는다).
+ */
+declare function createAdAsData(): EconPlaneData;
+/**
+ * 점 이동 — 이름 붙인 점 몇 개에 유도선을 내리고 화살표로 순서를 잇는다.
+ *
+ * 이것도 여섯 장이다(균형점 이동·고용 지표·교역 전후 소비점). 자리값은
+ * 2027학년도 6월 6번에서 그대로 가져왔다.
+ */
+declare function createPointShiftData(): EconPlaneData;
+/**
+ * 기준 모양. 열세 장 중 가장 흔한 그림(수요·공급 교차)을 그대로 쓴다 —
+ * 값이 0뿐인 기본값을 하나 더 만들지 않으려는 뜻이다.
+ */
+declare function createDefaultEconPlaneData(): EconPlaneData;
+
 interface RadarSeries {
     label: string;
     values: number[];
@@ -673,6 +898,8 @@ declare function renderMatrixTable(ctx: CanvasRenderingContext2D, w: number, h:
 
 declare function renderDataTable(ctx: CanvasRenderingContext2D, w: number, h: number, data: DataTableData, options: GraphOptions): void;
 
+declare function renderEconPlane(ctx: CanvasRenderingContext2D, w: number, h: number, data: EconPlaneData, options: GraphOptions): void;
+
 declare function renderTreemapGraph(ctx: CanvasRenderingContext2D, w: number, h: number, data: TreemapGraphData, options: GraphOptions): void;
 
 declare function renderClimateGraph(ctx: CanvasRenderingContext2D, w: number, h: number, data: ClimateGraphData, options: GraphOptions): void;
@@ -712,6 +939,7 @@ interface ChartDataMap {
     'data-table': DataTableData;
     'deviation-a': DeviationAData;
     'deviation-b': DeviationBData;
+    'econ-plane': EconPlaneData;
     hythergraph: HythergraphData;
     line: LineGraphData;
     'matrix-table': MatrixTableData;
@@ -729,7 +957,7 @@ type CsatChartType = keyof ChartDataMap;
  *
  * `Partial` 은 맨 위 칸만 선택으로 만든다. 그래서 `fontSize` 는 넷을 다 적어야
  * 했다 — 런타임은 하나만 줘도 받는데 타입이 막는, 거꾸로 된 어긋남이다.
- * 한 겹 더 풀어 준다.
+ * 한 겹 더 풀어 준다. (`fontStack` 은 속이 이미 다 선택이라 손댈 것이 없다.)
  */
 type PartialGraphOptions = Omit<Partial<GraphOptions>, 'fontSize'> & {
     fontSize?: Partial<GraphOptions['fontSize']>;
@@ -740,7 +968,7 @@ interface ConfigFor<T extends CsatChartType> {
     data: ChartDataMap[T];
     options?: PartialGraphOptions;
 }
-/** 16종을 모은 판별 유니온. */
+/** 17종을 모은 판별 유니온. */
 type CsatChartConfig = {
     [K in CsatChartType]: ConfigFor<K>;
 }[CsatChartType];
@@ -772,7 +1000,7 @@ declare class CsatChart<T extends CsatChartType = CsatChartType> {
      *
      * 필드가 아니라 **메서드**로 둔다. `static readonly ensureFonts = ensureFonts`
      * 로 적으면 ES2020 로 낮출 때 클래스 «뒤» 의 대입문이 되는데, 그것은 지울 수
-     * 없는 부수효과라 이 클래스와 레지스트리와 렌더러 16종이 모든 번들에 박힌다.
+     * 없는 부수효과라 이 클래스와 레지스트리와 렌더러 17종이 모든 번들에 박힌다.
      * 메서드는 클래스 본문의 일부라 어느 목표에서도 그런 일이 없다 — 실제로
      * 겪은 문제이고, `test/bundle.test.ts` 가 이걸 회귀로 잡지는 않으니 여기
      * 적어 둔다.
@@ -844,7 +1072,7 @@ declare class CsatChart<T extends CsatChartType = CsatChartType> {
  * 모두 이 모듈 맨 위에서 실행되는 함수 호출이다 — 번들러는 함수 호출에
  * 부작용이 있을 수 있다고 보수적으로 가정하므로, 표시가 없으면 `CHART_TYPES`
  * 를 아무도 안 써도 이 문장을 지우지 못하고, 그 문장이 붙들고 있는
- * `REGISTRY`(=16종 렌더러 전부)까지 함께 남는다. **셋 중 하나라도 빠지면**
+ * `REGISTRY`(=17종 렌더러 전부)까지 함께 남는다. **셋 중 하나라도 빠지면**
  * 나머지 호출이 여전히 `REGISTRY` 를 읽으므로 소용이 없다 — 실제로 겪은
  * 문제다(`Object.freeze` 하나만 표시했을 때는 번들이 전혀 줄지 않았다).
  * 표시를 지우면 저수준 렌더러 하나만 가져와도 번들이 줄지 않는 문제가
@@ -895,7 +1123,7 @@ declare function installRoundRectPolyfill(): boolean;
  * 부작용이 있을 수 있다고 보수적으로 가정하는 대상이라, 표시가 없으면 이
  * 상수들을 아무도 안 써도 문장 자체가 안 지워진다 — 여기서는 값이 각각
  * `core` 배열 하나씩만 가리키므로 결과가 이 파일 안에서 끝나 심각하지 않지만,
- * `registry.ts` 의 `CHART_TYPES` 는 같은 문제가 16종 렌더러 전체를 붙드는
+ * `registry.ts` 의 `CHART_TYPES` 는 같은 문제가 17종 렌더러 전체를 붙드는
  * 문제로 번진다. 그 사례를 따라 여기도 표시해 둔다.
  */
 declare const AGE_GROUPS: readonly string[];
@@ -911,4 +1139,4 @@ declare const LINE_DASH: Readonly<{
     dashdot: readonly number[];
 }>;
 
-export { AGE_GROUPS, type AbsBarCategory, type AbsBarDirection, type AbsBarGraphData, type AgeLabelSide, type BubbleLegendPosition, CHART_TYPES, type CanvasLike, type CategoryDotCategory, type CategoryDotGraphData, type ChartDataMap, type ClimateGraphData, type ClimateMode, type ClimateMonthData, type ConfigFor, CsatChart, type CsatChartConfig, CsatChartError, type CsatChartType, type CubeAxisConfig, type CubeGraphData, type CubePoint, DOT_MARKER_ORDER, type DataTableData, type DataTableRow, type DeviationAData, type DeviationBData, type DeviationBRegion, type DotMarker, type EnsureFontsOptions, type GraphOptions, type HythergraphData, type HythergraphMode, type HythergraphSeries, type InsideLegendCorner, LINE_DASH, LINE_MARKER_ORDER, LINE_STYLE_ORDER, type LabelOffset, type LegendPosition, type LineGraphData, type LineLabelPlacement, type LineMarker, type LineSeries, type LineStyle, MONTH_LABELS_EN, MONTH_LABELS_NUM, type MatrixTableData, type MonthInterval, type MonthLabelStyle, type PartialGraphOptions, type PyramidAgeData, type PyramidGraphData, type PyramidUnit, type RadarGraphData, type RadarSeries, type ScatterGraphData, type ScatterMode, type ScatterPoint, type StackedBarDirection, type StackedCategory, type StackedDisplayMode, type StackedGraphData, type TernaryGraphData, type TernaryGridInterval, type TernaryPoint, type TreemapCell, type TreemapGraphData, type UpdateFor, autoRange, createDefaultAbsBarData, createDefaultCategoryDotData, createDefaultClimateData, createDefaultCubeData, createDefaultDataTableData, createDefaultDeviationAData, createDefaultDeviationBData, createDefaultGraphOptions, createDefaultHythergraphData, createDefaultLineData, createDefaultMatrixTableData, createDefaultPyramidData, createDefaultRadarData, createDefaultScatterData, createDefaultStackedData, createDefaultTernaryData, createDefaultTreemapData, ensureFonts, installRoundRectPolyfill, isCsatChartType, niceStep, renderAbsBarGraph, renderCategoryDotGraph, renderClimateGraph, renderCubeGraph, renderDataTable, renderDeviationAGraph, renderDeviationBGraph, renderHythergraph, renderLineGraph, renderMatrixTable, renderPyramidGraph, renderRadarChart, renderScatterGraph, renderStackedGraph, renderTernaryGraph, renderTreemapGraph };
+export { AGE_GROUPS, type AbsBarCategory, type AbsBarDirection, type AbsBarGraphData, type AgeLabelSide, type BubbleLegendPosition, CHART_TYPES, type CanvasLike, type CategoryDotCategory, type CategoryDotGraphData, type ChartDataMap, type ClimateGraphData, type ClimateMode, type ClimateMonthData, type ConfigFor, CsatChart, type CsatChartConfig, CsatChartError, type CsatChartType, type CubeAxisConfig, type CubeGraphData, type CubePoint, DOT_MARKER_ORDER, type DataTableData, type DataTableRow, type DeviationAData, type DeviationBData, type DeviationBRegion, type DotMarker, type EconArrow, type EconAxis, type EconDash, type EconGuide, type EconLabelPos, type EconLine, type EconPlaneData, type EconPoint, type EconQuadrants, type EconXY, type EnsureFontsOptions, type FontRole, type FontStack, type GraphOptions, type HythergraphData, type HythergraphMode, type HythergraphSeries, type InsideLegendCorner, LINE_DASH, LINE_MARKER_ORDER, LINE_STYLE_ORDER, type LabelOffset, type LegendPosition, type LineGraphData, type LineLabelPlacement, type LineMarker, type LineSeries, type LineStyle, MONTH_LABELS_EN, MONTH_LABELS_NUM, type MatrixTableData, type MonthInterval, type MonthLabelStyle, type PartialGraphOptions, type PyramidAgeData, type PyramidGraphData, type PyramidUnit, type RadarGraphData, type RadarSeries, type ScatterGraphData, type ScatterMode, type ScatterPoint, type StackedBarDirection, type StackedCategory, type StackedDisplayMode, type StackedGraphData, type TernaryGraphData, type TernaryGridInterval, type TernaryPoint, type TreemapCell, type TreemapGraphData, type UpdateFor, autoRange, createAdAsData, createDefaultAbsBarData, createDefaultCategoryDotData, createDefaultClimateData, createDefaultCubeData, createDefaultDataTableData, createDefaultDeviationAData, createDefaultDeviationBData, createDefaultEconPlaneData, createDefaultGraphOptions, createDefaultHythergraphData, createDefaultLineData, createDefaultMatrixTableData, createDefaultPyramidData, createDefaultRadarData, createDefaultScatterData, createDefaultStackedData, createDefaultTernaryData, createDefaultTreemapData, createPointShiftData, createSupplyDemandData, ensureFonts, installRoundRectPolyfill, isCsatChartType, niceStep, renderAbsBarGraph, renderCategoryDotGraph, renderClimateGraph, renderCubeGraph, renderDataTable, renderDeviationAGraph, renderDeviationBGraph, renderEconPlane, renderHythergraph, renderLineGraph, renderMatrixTable, renderPyramidGraph, renderRadarChart, renderScatterGraph, renderStackedGraph, renderTernaryGraph, renderTreemapGraph };

package/dist/csat-chart.d.mts

@@ -37,6 +37,30 @@ declare function ensureFonts(options?: EnsureFontsOptions): Promise<boolean>;
 type LegendPosition = 'bottom' | 'right';
 /** 플롯 안쪽 범례를 놓을 모서리 */
 type InsideLegendCorner = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/** 글꼴 자리. 시험지는 명조 자리와 고딕 자리가 갈린다. */
+type FontRole = 'serif' | 'sans' | 'custom';
+/**
+ * 두 글꼴 «자리»를 통째로 갈아 끼운다.
+ *
+ * 시험지 그림은 자리마다 서체가 다르다 — 축 이름·눈금·자료값은 명조,
+ * 제목·출처·각주·범례는 고딕이다. 그 짝 자체는 그대로 두고 각 자리에 무슨
+ * 글꼴을 쓸지만 바꾸고 싶을 때 쓴다. 적지 않은 자리는 기본 글꼴 그대로다.
+ *
+ * ```js
+ * // 한컴오피스가 깔린 PC 라면 내려받을 것이 없다 — 보는 사람의 글꼴을 그대로 쓴다
+ * options.fontStack = { serif: "'함초롬바탕', serif", sans: "'함초롬돋움', sans-serif" };
+ * ```
+ *
+ * `fontFamily` 와 층이 다르다. `fontFamily` 는 축이 **어느 자리**를 쓸지
+ * 고르고, 이것은 그 자리가 **무슨 글꼴**인지 정한다. 웹폰트를 쓰려면
+ * `CsatChart.ensureFonts({ href, families })` 로 먼저 받아 둔다.
+ */
+interface FontStack {
+    /** 명조 자리 — 축 이름·눈금·자료값. 기본 `'Noto Serif KR', 'NanumMyeongjo', serif` */
+    serif?: string;
+    /** 고딕 자리 — 제목·출처·각주·범례. 기본 `'Noto Sans KR', sans-serif` */
+    sans?: string;
+}
 interface GraphOptions {
     title: string;
     source: string;
@@ -56,8 +80,15 @@ interface GraphOptions {
      */
     sourceInline?: boolean;
     footnotes: string[];
-    fontFamily: 'serif' | 'sans' | 'custom';
+    fontFamily: FontRole;
     customFont: string;
+    /**
+     * 글꼴 자리를 갈아 끼운다. 적지 않은 자리는 기본 글꼴 그대로다.
+     *
+     * `customFont` 과 다르다 — `customFont` 은 `fontFamily: 'custom'` 일 때
+     * **축 쪽**만 바꾸고 제목·범례는 못 건드린다. 이쪽은 자리마다 따로 준다.
+     */
+    fontStack?: FontStack;
     fontSize: {
         title: number;
         axisLabel: number;
@@ -477,6 +508,200 @@ interface CubeGraphData {
 }
 declare function createDefaultCubeData(): CubeGraphData;
 
+/** 그릴 사분면. `'all'` 은 축 양끝에 화살표를 단다 */
+type EconQuadrants = 'first' | 'all';
+/**
+ * 유도선·격자의 점선 모양.
+ *
+ * 실물은 둘 다 쓴다 — 열세 장 중 열둘이 파선, 2027학년도 6월 16번만 촘촘한
+ * 점선이다. 두 모양이 하는 일은 같아 보인다(둘 다 값을 축으로 끌어 내린다).
+ * 조판 취향으로 보이지만 어느 쪽도 재현할 수 있게 남겨 둔다.
+ */
+type EconDash = 'dashed' | 'dotted';
+/** 글자를 기준점의 어느 쪽에 놓을지 */
+type EconLabelPos = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/**
+ * 점에서 긋는 점선 유도선.
+ *
+ * `'to-x'` 는 가로축으로 내리고 `'to-y'` 는 세로축으로 끌며 `'both'` 는 둘 다다.
+ * `'cross'` 는 점을 지나 **플롯 전체**를 가로지른다 — 2026학년도 수능 12번처럼
+ * 「이 값이 안 변했다」를 보이는 자리에 쓴다.
+ */
+type EconGuide = 'none' | 'to-x' | 'to-y' | 'both' | 'cross';
+interface EconXY {
+    x: number;
+    y: number;
+}
+interface EconAxis {
+    /**
+     * 축 이름. 세로축은 축 위에, 가로축은 화살촉 오른쪽에 놓인다.
+     *
+     * 리터럴 `\n`(역슬래시 + n)이나 진짜 줄바꿈을 넣으면 **여러 줄**로 앉는다 —
+     * 실물이 「GDP」와 「(억 달러)」를 두 줄로 쌓는 꼴이다(2027학년도 6월 16번,
+     * 2026학년도 수능 7번). 산점도의 `yLabel` 과 같은 규약이다.
+     */
+    label: string;
+    min: number;
+    max: number;
+    /**
+     * 눈금 «값». **값이 곧 자리다** — 자[尺]는 언제나 고르고, 눈금만 띄엄띄엄
+     * 찍힌다. 2026학년도 9월 15번의 `0·10·20·50` 이 그 꼴이다(50 이 20 의 세 배
+     * 거리에 선다). 눈금 표시선은 그리지 않는다 — 시험지가 그렇다. 격자나
+     * 유도선이 축까지 닿아 자리를 알려 준다.
+     */
+    ticks: number[];
+    /**
+     * 눈금 자리에 숫자 대신 적을 **글자**. `ticks` 와 짝을 이룬다(같은 자리끼리).
+     *
+     * 눈금이 값이 아니라 이름인 그림이 실물에 둘 있다. 2027학년도 6월 17번의
+     * 세로축은 숫자가 하나도 없이 `P_1`·`P_2` 두 이름만 서고, 같은 회차 16번의
+     * 가로축은 `t년`·`t+1년`·`t+2년` 이다. 그 둘은 서로 다른 그림이 아니라
+     * **같은 일**이다 — 자리는 `ticks` 가 정하고 이 배열은 거기 적을 글자만 준다.
+     *
+     * 적지 않거나 빈 문자열이면 숫자를 그대로 적는다. 아래 첨자를 쓸 수 있다.
+     */
+    tickLabels?: string[];
+    /**
+     * 눈금이 0에서 시작하지 않을 때 축에 넣는 생략 기호 `≈`.
+     * 원점과 첫 눈금 사이에 놓인다 (2026학년도 9월 7번은 두 축에 다 있다).
+     */
+    broken: boolean;
+}
+interface EconLine {
+    /** 선 끝에 붙는 이름. 계열을 쓰지 않는 그림은 범례 없이 여기에 이름을 단다 */
+    label: string;
+    from: EconXY;
+    to: EconXY;
+    /** 이름을 어느 끝에 붙일지. 시험지는 거의 언제나 오른쪽 끝이다 */
+    labelAt: 'from' | 'to';
+    /** 이름 자리를 미세하게 옮긴다(px). 선 둘이 한 점에서 만날 때 쓴다 */
+    labelDx?: number;
+    labelDy?: number;
+    /**
+     * 파선으로 긋는다.
+     *
+     * 선 종류가 문항의 뜻을 나른다. 2027학년도 6월 3번은 사적 편익만 반영한
+     * 수요 곡선 `D_1` 을 실선으로, 사회적 편익까지 반영한 `D_2` 를 파선으로
+     * 그어 둘을 가른다 — 색이 없는 흑백 시험지에서 이것이 유일한 구분이다.
+     */
+    dashed?: boolean;
+}
+/** 계열 꼭짓점에 얹는 기호 */
+type EconMarker = 'circle' | 'square';
+/**
+ * 점 여럿을 잇고 기호를 얹은 꺾은선.
+ *
+ * 값의 «자리» 가 아니라 «흐름» 을 묻는 그림에 쓴다 — 2027학년도 6월 16번의
+ * 명목 GDP·실질 GDP 가 t년부터 t+2년까지 어떻게 엇갈리는지가 그 예다.
+ * 직선(`lines`)과 갈리는 곳은 셋이다. 꼭짓점이 셋 이상일 수 있고, 꼭짓점마다
+ * 기호가 붙고, 이름을 **범례 상자**에 적는다.
+ */
+interface EconSeries {
+    /** 범례 상자에 적히는 이름 */
+    label: string;
+    /** 꼭짓점. 왼쪽에서 오른쪽으로 이어 긋는다 */
+    points: EconXY[];
+    /** 파선으로 긋는다 */
+    dashed: boolean;
+    /** 꼭짓점 기호 */
+    marker: EconMarker;
+    /** 기호 속을 비운다 (흰색 채움 + 검정 테두리) */
+    hollow: boolean;
+}
+interface EconPoint {
+    x: number;
+    y: number;
+    label: string;
+    labelPos: EconLabelPos;
+    guide: EconGuide;
+    /**
+     * 점을 찍을지.
+     *
+     * `false` 면 유도선만 남는다 — 2026학년도 수능 7번이 그 꼴이다. 문항이 쓰는
+     * 값마다 파선을 내리되 교점에 점은 찍지 않는다.
+     */
+    dot: boolean;
+}
+interface EconArrow {
+    from: EconXY;
+    to: EconXY;
+    /**
+     * 잇는 선에서 **수직으로** 이만큼(px) 비켜 놓는다.
+     *
+     * 곡선을 따라 움직이는 화살표가 이 꼴이다 — 2026학년도 9월 16번의 (가)·(나)는
+     * 총수요 곡선 위를 옮겨 가므로 그대로 그으면 곡선에 겹친다.
+     * 양수는 **진행 방향의 오른쪽**이다.
+     */
+    offset: number;
+    /** 양 끝을 이만큼(px) 줄인다 — 점에 닿지 않게 */
+    shorten: number;
+    /** 화살표 옆에 적는 글 (예: `(가)`) */
+    label: string;
+    labelPos: EconLabelPos;
+}
+interface EconPlaneData {
+    quadrants: EconQuadrants;
+    xAxis: EconAxis;
+    yAxis: EconAxis;
+    /** 눈금 자리마다 점선 격자를 깐다 */
+    grid: boolean;
+    dash: EconDash;
+    lines: EconLine[];
+    points: EconPoint[];
+    arrows: EconArrow[];
+    /**
+     * 꺾은선 계열.
+     *
+     * **선택 항목으로 둔 것에 뜻이 있다.** 이 셋(`series`·`legend`·`seriesGuides`)을
+     * 기본 데이터에 넣으면, 1.4.0 에 맞춰 적어 둔 자료가 검증기에서 「항목이
+     * 없습니다」로 막힌다 — `validate.ts` 는 «기본 데이터의 키» 를 필수로 보기
+     * 때문이다. 실물 열여섯 장 중 하나만 쓰는 그림이기도 하다.
+     */
+    series?: EconSeries[];
+    /**
+     * 계열 범례 상자를 놓을 모서리. 적지 않으면 범례를 그리지 않는다.
+     *
+     * 그 모서리가 자료에 막히면 나머지 셋을 차례로 본다. `options.showLegend` 는
+     * 읽지 않는다 — 이 상자는 «보여 줄까 말까» 하는 장식이 아니라 계열 이름을
+     * 적을 **유일한** 자리라서, 끄면 어느 선이 명목이고 실질인지 알 길이 없다.
+     */
+    legend?: InsideLegendCorner;
+    /**
+     * 계열 꼭짓점마다 가로축으로 파선을 내린다.
+     *
+     * 한 눈금 자리에 계열이 여럿이면 **가장 높은 점** 하나까지만 긋는다 —
+     * 실물이 그렇다(파선 하나가 두 점을 함께 꿴다).
+     */
+    seriesGuides?: boolean;
+}
+/**
+ * 수요·공급 교차 — 열세 장 중 여섯 장이 이 그림이다.
+ *
+ * 2027학년도 6월 9번의 자리값 그대로다. 이름만 바꿔 「국내 수요」·「국내 공급」
+ * 으로 쓰는 문항이 둘 더 있다.
+ */
+declare function createSupplyDemandData(): EconPlaneData;
+/**
+ * 총수요·총공급 — 물가와 실질 GDP 를 축으로 삼는 국민 경제 그림.
+ *
+ * 2026학년도 9월 16번의 모양이다. 눈금이 하나도 없는 것이 이 그림의 성격이다 —
+ * 값이 아니라 «어느 쪽으로 움직였는가» 만 묻기 때문이다. 같은 축 이름을 쓰는
+ * 문항이 하나 더 있다(2026학년도 수능 12번, 그쪽은 곡선 없이 점만 찍는다).
+ */
+declare function createAdAsData(): EconPlaneData;
+/**
+ * 점 이동 — 이름 붙인 점 몇 개에 유도선을 내리고 화살표로 순서를 잇는다.
+ *
+ * 이것도 여섯 장이다(균형점 이동·고용 지표·교역 전후 소비점). 자리값은
+ * 2027학년도 6월 6번에서 그대로 가져왔다.
+ */
+declare function createPointShiftData(): EconPlaneData;
+/**
+ * 기준 모양. 열세 장 중 가장 흔한 그림(수요·공급 교차)을 그대로 쓴다 —
+ * 값이 0뿐인 기본값을 하나 더 만들지 않으려는 뜻이다.
+ */
+declare function createDefaultEconPlaneData(): EconPlaneData;
+
 interface RadarSeries {
     label: string;
     values: number[];
@@ -673,6 +898,8 @@ declare function renderMatrixTable(ctx: CanvasRenderingContext2D, w: number, h:
 
 declare function renderDataTable(ctx: CanvasRenderingContext2D, w: number, h: number, data: DataTableData, options: GraphOptions): void;
 
+declare function renderEconPlane(ctx: CanvasRenderingContext2D, w: number, h: number, data: EconPlaneData, options: GraphOptions): void;
+
 declare function renderTreemapGraph(ctx: CanvasRenderingContext2D, w: number, h: number, data: TreemapGraphData, options: GraphOptions): void;
 
 declare function renderClimateGraph(ctx: CanvasRenderingContext2D, w: number, h: number, data: ClimateGraphData, options: GraphOptions): void;
@@ -712,6 +939,7 @@ interface ChartDataMap {
     'data-table': DataTableData;
     'deviation-a': DeviationAData;
     'deviation-b': DeviationBData;
+    'econ-plane': EconPlaneData;
     hythergraph: HythergraphData;
     line: LineGraphData;
     'matrix-table': MatrixTableData;
@@ -729,7 +957,7 @@ type CsatChartType = keyof ChartDataMap;
  *
  * `Partial` 은 맨 위 칸만 선택으로 만든다. 그래서 `fontSize` 는 넷을 다 적어야
  * 했다 — 런타임은 하나만 줘도 받는데 타입이 막는, 거꾸로 된 어긋남이다.
- * 한 겹 더 풀어 준다.
+ * 한 겹 더 풀어 준다. (`fontStack` 은 속이 이미 다 선택이라 손댈 것이 없다.)
  */
 type PartialGraphOptions = Omit<Partial<GraphOptions>, 'fontSize'> & {
     fontSize?: Partial<GraphOptions['fontSize']>;
@@ -740,7 +968,7 @@ interface ConfigFor<T extends CsatChartType> {
     data: ChartDataMap[T];
     options?: PartialGraphOptions;
 }
-/** 16종을 모은 판별 유니온. */
+/** 17종을 모은 판별 유니온. */
 type CsatChartConfig = {
     [K in CsatChartType]: ConfigFor<K>;
 }[CsatChartType];
@@ -772,7 +1000,7 @@ declare class CsatChart<T extends CsatChartType = CsatChartType> {
      *
      * 필드가 아니라 **메서드**로 둔다. `static readonly ensureFonts = ensureFonts`
      * 로 적으면 ES2020 로 낮출 때 클래스 «뒤» 의 대입문이 되는데, 그것은 지울 수
-     * 없는 부수효과라 이 클래스와 레지스트리와 렌더러 16종이 모든 번들에 박힌다.
+     * 없는 부수효과라 이 클래스와 레지스트리와 렌더러 17종이 모든 번들에 박힌다.
      * 메서드는 클래스 본문의 일부라 어느 목표에서도 그런 일이 없다 — 실제로
      * 겪은 문제이고, `test/bundle.test.ts` 가 이걸 회귀로 잡지는 않으니 여기
      * 적어 둔다.
@@ -844,7 +1072,7 @@ declare class CsatChart<T extends CsatChartType = CsatChartType> {
  * 모두 이 모듈 맨 위에서 실행되는 함수 호출이다 — 번들러는 함수 호출에
  * 부작용이 있을 수 있다고 보수적으로 가정하므로, 표시가 없으면 `CHART_TYPES`
  * 를 아무도 안 써도 이 문장을 지우지 못하고, 그 문장이 붙들고 있는
- * `REGISTRY`(=16종 렌더러 전부)까지 함께 남는다. **셋 중 하나라도 빠지면**
+ * `REGISTRY`(=17종 렌더러 전부)까지 함께 남는다. **셋 중 하나라도 빠지면**
  * 나머지 호출이 여전히 `REGISTRY` 를 읽으므로 소용이 없다 — 실제로 겪은
  * 문제다(`Object.freeze` 하나만 표시했을 때는 번들이 전혀 줄지 않았다).
  * 표시를 지우면 저수준 렌더러 하나만 가져와도 번들이 줄지 않는 문제가
@@ -895,7 +1123,7 @@ declare function installRoundRectPolyfill(): boolean;
  * 부작용이 있을 수 있다고 보수적으로 가정하는 대상이라, 표시가 없으면 이
  * 상수들을 아무도 안 써도 문장 자체가 안 지워진다 — 여기서는 값이 각각
  * `core` 배열 하나씩만 가리키므로 결과가 이 파일 안에서 끝나 심각하지 않지만,
- * `registry.ts` 의 `CHART_TYPES` 는 같은 문제가 16종 렌더러 전체를 붙드는
+ * `registry.ts` 의 `CHART_TYPES` 는 같은 문제가 17종 렌더러 전체를 붙드는
  * 문제로 번진다. 그 사례를 따라 여기도 표시해 둔다.
  */
 declare const AGE_GROUPS: readonly string[];
@@ -911,4 +1139,4 @@ declare const LINE_DASH: Readonly<{
     dashdot: readonly number[];
 }>;
 
-export { AGE_GROUPS, type AbsBarCategory, type AbsBarDirection, type AbsBarGraphData, type AgeLabelSide, type BubbleLegendPosition, CHART_TYPES, type CanvasLike, type CategoryDotCategory, type CategoryDotGraphData, type ChartDataMap, type ClimateGraphData, type ClimateMode, type ClimateMonthData, type ConfigFor, CsatChart, type CsatChartConfig, CsatChartError, type CsatChartType, type CubeAxisConfig, type CubeGraphData, type CubePoint, DOT_MARKER_ORDER, type DataTableData, type DataTableRow, type DeviationAData, type DeviationBData, type DeviationBRegion, type DotMarker, type EnsureFontsOptions, type GraphOptions, type HythergraphData, type HythergraphMode, type HythergraphSeries, type InsideLegendCorner, LINE_DASH, LINE_MARKER_ORDER, LINE_STYLE_ORDER, type LabelOffset, type LegendPosition, type LineGraphData, type LineLabelPlacement, type LineMarker, type LineSeries, type LineStyle, MONTH_LABELS_EN, MONTH_LABELS_NUM, type MatrixTableData, type MonthInterval, type MonthLabelStyle, type PartialGraphOptions, type PyramidAgeData, type PyramidGraphData, type PyramidUnit, type RadarGraphData, type RadarSeries, type ScatterGraphData, type ScatterMode, type ScatterPoint, type StackedBarDirection, type StackedCategory, type StackedDisplayMode, type StackedGraphData, type TernaryGraphData, type TernaryGridInterval, type TernaryPoint, type TreemapCell, type TreemapGraphData, type UpdateFor, autoRange, createDefaultAbsBarData, createDefaultCategoryDotData, createDefaultClimateData, createDefaultCubeData, createDefaultDataTableData, createDefaultDeviationAData, createDefaultDeviationBData, createDefaultGraphOptions, createDefaultHythergraphData, createDefaultLineData, createDefaultMatrixTableData, createDefaultPyramidData, createDefaultRadarData, createDefaultScatterData, createDefaultStackedData, createDefaultTernaryData, createDefaultTreemapData, ensureFonts, installRoundRectPolyfill, isCsatChartType, niceStep, renderAbsBarGraph, renderCategoryDotGraph, renderClimateGraph, renderCubeGraph, renderDataTable, renderDeviationAGraph, renderDeviationBGraph, renderHythergraph, renderLineGraph, renderMatrixTable, renderPyramidGraph, renderRadarChart, renderScatterGraph, renderStackedGraph, renderTernaryGraph, renderTreemapGraph };
+export { AGE_GROUPS, type AbsBarCategory, type AbsBarDirection, type AbsBarGraphData, type AgeLabelSide, type BubbleLegendPosition, CHART_TYPES, type CanvasLike, type CategoryDotCategory, type CategoryDotGraphData, type ChartDataMap, type ClimateGraphData, type ClimateMode, type ClimateMonthData, type ConfigFor, CsatChart, type CsatChartConfig, CsatChartError, type CsatChartType, type CubeAxisConfig, type CubeGraphData, type CubePoint, DOT_MARKER_ORDER, type DataTableData, type DataTableRow, type DeviationAData, type DeviationBData, type DeviationBRegion, type DotMarker, type EconArrow, type EconAxis, type EconDash, type EconGuide, type EconLabelPos, type EconLine, type EconPlaneData, type EconPoint, type EconQuadrants, type EconXY, type EnsureFontsOptions, type FontRole, type FontStack, type GraphOptions, type HythergraphData, type HythergraphMode, type HythergraphSeries, type InsideLegendCorner, LINE_DASH, LINE_MARKER_ORDER, LINE_STYLE_ORDER, type LabelOffset, type LegendPosition, type LineGraphData, type LineLabelPlacement, type LineMarker, type LineSeries, type LineStyle, MONTH_LABELS_EN, MONTH_LABELS_NUM, type MatrixTableData, type MonthInterval, type MonthLabelStyle, type PartialGraphOptions, type PyramidAgeData, type PyramidGraphData, type PyramidUnit, type RadarGraphData, type RadarSeries, type ScatterGraphData, type ScatterMode, type ScatterPoint, type StackedBarDirection, type StackedCategory, type StackedDisplayMode, type StackedGraphData, type TernaryGraphData, type TernaryGridInterval, type TernaryPoint, type TreemapCell, type TreemapGraphData, type UpdateFor, autoRange, createAdAsData, createDefaultAbsBarData, createDefaultCategoryDotData, createDefaultClimateData, createDefaultCubeData, createDefaultDataTableData, createDefaultDeviationAData, createDefaultDeviationBData, createDefaultEconPlaneData, createDefaultGraphOptions, createDefaultHythergraphData, createDefaultLineData, createDefaultMatrixTableData, createDefaultPyramidData, createDefaultRadarData, createDefaultScatterData, createDefaultStackedData, createDefaultTernaryData, createDefaultTreemapData, createPointShiftData, createSupplyDemandData, ensureFonts, installRoundRectPolyfill, isCsatChartType, niceStep, renderAbsBarGraph, renderCategoryDotGraph, renderClimateGraph, renderCubeGraph, renderDataTable, renderDeviationAGraph, renderDeviationBGraph, renderEconPlane, renderHythergraph, renderLineGraph, renderMatrixTable, renderPyramidGraph, renderRadarChart, renderScatterGraph, renderStackedGraph, renderTernaryGraph, renderTreemapGraph };