@moda-chart/core 0.1.2

package/dist/svg.js

@@ -0,0 +1,1022 @@
+import { DEFAULT_PALETTE } from "./core.js";
+import { formatNumber } from "./scales.js";
+export function escapeXml(s) {
+    return s
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+const num = (n) => Number(n.toFixed(2));
+/** 사람 아이콘 path — 24×24 박스 기준, pictogram 아이콘에 scale 적용 */
+const PERSON_ICON_D = "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z" +
+    "m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z";
+/** 시리즈/슬라이스 색상 해석 */
+export function seriesColor(color, colorIndex, mode) {
+    if (color)
+        return color;
+    if (mode.export)
+        return DEFAULT_PALETTE[colorIndex % DEFAULT_PALETTE.length];
+    return `var(--chart-palette-${(colorIndex % DEFAULT_PALETTE.length) + 1})`;
+}
+/** fill/stroke 속성 문자열 — dom은 style로(var 지원), export는 프레젠테이션 속성 */
+function paint(prop, color, colorIndex, mode) {
+    const c = seriesColor(color, colorIndex, mode);
+    return mode.export
+        ? `${prop}="${escapeXml(c)}"`
+        : `style="${prop}:${escapeXml(c)}"`;
+}
+// ── 접근성 패턴 (patterns 옵션) ─────────────────────────────
+/** 패턴 무늬 — colorIndex % 8로 선택. 모두 6px 타일 기준 */
+const PATTERN_BODIES = [
+    "M-1 1 L1 -1 M0 6 L6 0 M5 7 L7 5", // / 대각선
+    "M-1 5 L1 7 M0 0 L6 6 M5 -1 L7 1", // \ 역대각선
+    "M-1 1 L1 -1 M0 6 L6 0 M5 7 L7 5 M-1 5 L1 7 M0 0 L6 6 M5 -1 L7 1", // 교차
+    "", // 점 (아래에서 circle로)
+    "M0 3 L6 3", // 수평
+    "M3 0 L3 6", // 수직
+    "M0 3 L6 3 M3 0 L3 6", // 격자
+    "M0 7 L7 0", // 넓은 대각선
+];
+/**
+ * patterns 옵션의 색→패턴 맵. 같은 (색상,colorIndex) 조합은 같은
+ * 패턴을 공유한다 — 명시 color를 쓴 시리즈도 자기 색 기반 무늬를 받는다.
+ */
+class PatternRegistry {
+    constructor(clipId) {
+        Object.defineProperty(this, "clipId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: clipId
+        });
+        Object.defineProperty(this, "ids", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+    }
+    idOf(color, colorIndex) {
+        const key = `${color ?? ""}|${colorIndex % 8}`;
+        let id = this.ids.get(key);
+        if (!id) {
+            id = `${this.clipId}-pat-${this.ids.size}`;
+            this.ids.set(key, id);
+        }
+        return id;
+    }
+    /** 사용된 패턴의 <defs> 마크업 */
+    defs(mode) {
+        const fg = mode.export ? "#ffffff" : "var(--chart-bg)";
+        const out = [];
+        for (const [key, id] of this.ids) {
+            const [color, idx] = key.split("|");
+            const ci = Number(idx);
+            const base = color || seriesColor(null, ci, mode);
+            const body = ci === 3
+                ? `<circle cx="3" cy="3" r="1.2" fill="${escapeXml(fg)}" fill-opacity="0.9"/>`
+                : `<path d="${PATTERN_BODIES[ci] ?? PATTERN_BODIES[0]}" stroke="${escapeXml(fg)}" stroke-width="1.2" stroke-opacity="0.85" fill="none"/>`;
+            out.push(`<pattern id="${escapeXml(id)}" class="mc-pattern" ` +
+                `patternUnits="userSpaceOnUse" width="6" height="6">` +
+                `<rect width="6" height="6" fill="${escapeXml(base)}"/>${body}</pattern>`);
+        }
+        return out.join("");
+    }
+}
+/** 값→색 보간 — dom은 CSS 변수 color-mix, export는 선형 보간 hex */
+function scaleFill(t, from, to, mode, cssFrom, cssTo, hexFrom, hexTo) {
+    const pct = Math.round(t * 100);
+    if (!mode.export) {
+        const f = from ?? cssFrom;
+        const tt = to ?? cssTo;
+        return `style="fill:color-mix(in srgb, ${escapeXml(tt)} ${pct}%, ${escapeXml(f)})"`;
+    }
+    const lerp = (a, b) => {
+        const pa = parseInt(a.slice(1), 16);
+        const pb = parseInt(b.slice(1), 16);
+        const ch = (sh) => Math.round(((pa >> sh) & 255) + (((pb >> sh) & 255) - ((pa >> sh) & 255)) * t);
+        return `#${((1 << 24) | (ch(16) << 16) | (ch(8) << 8) | ch(0)).toString(16).slice(1)}`;
+    };
+    return `fill="${lerp(from ?? hexFrom, to ?? hexTo)}"`;
+}
+/** 히트맵 셀 색 — dom은 CSS 변수 color-mix, export는 선형 보간 hex */
+function heatFill(cell, g, mode) {
+    return scaleFill(cell.t, g.from, g.to, mode, "var(--chart-heat-from)", "var(--chart-heat-to)", "#dbeafe", "#1d4ed8");
+}
+/** 지도 지역 채움 — 값 스케일 t 위치 색 (from/to 커스텀 가능) */
+function mapFill(t, g, mode) {
+    return scaleFill(t, g.from, g.to, mode, "var(--chart-map-from)", "var(--chart-map-to)", "#dbeafe", "#1d4ed8");
+}
+function axisMarkup(a, snap, mode) {
+    const { plot } = snap;
+    const stroke = mode.export ? 'stroke="#cbd5e1"' : "";
+    const fill = mode.export ? 'fill="#64748b"' : "";
+    const parts = [];
+    if (a.kind === "x") {
+        const y = a.position === "top" ? plot.y : plot.y + plot.h;
+        parts.push(`<line class="mc-axis-line" x1="${num(plot.x)}" y1="${num(y)}" x2="${num(plot.x + plot.w)}" y2="${num(y)}" ${stroke}/>`);
+        for (const t of a.ticks) {
+            const dir = a.position === "top" ? -1 : 1;
+            parts.push(`<g class="mc-tick"><line class="mc-tick-line" x1="${num(t.pos)}" y1="${num(y)}" x2="${num(t.pos)}" y2="${num(y + dir * 5)}" ${stroke}/>` +
+                `<text class="mc-tick-label" x="${num(t.pos)}" y="${num(y + dir * 16)}" text-anchor="middle" ${fill}>${escapeXml(t.label)}</text></g>`);
+        }
+        // 그룹 카테고리 — 두 번째 틱 행 (범위 구분선 + 그룹 라벨)
+        if (a.groups?.length) {
+            const dir = a.position === "top" ? -1 : 1;
+            const gy = y + dir * 30;
+            for (const gr of a.groups) {
+                parts.push(`<g class="mc-tick-group">` +
+                    `<line class="mc-tick-group-line" x1="${num(gr.x0)}" y1="${num(y + dir * 20)}" x2="${num(gr.x0)}" y2="${num(gy + dir * 6)}" ${stroke}/>` +
+                    `<line class="mc-tick-group-line" x1="${num(gr.x1)}" y1="${num(y + dir * 20)}" x2="${num(gr.x1)}" y2="${num(gy + dir * 6)}" ${stroke}/>` +
+                    `<text class="mc-tick-group-label" x="${num(gr.pos)}" y="${num(gy)}" text-anchor="middle" ${fill}>${escapeXml(gr.label)}</text>` +
+                    `</g>`);
+            }
+        }
+        if (a.label)
+            parts.push(`<text class="mc-axis-label" x="${num(plot.x + plot.w / 2)}" y="${num(a.position === "top" ? plot.y - 22 : plot.y + plot.h + 26)}" text-anchor="middle" ${fill}>${escapeXml(a.label)}</text>`);
+    }
+    else {
+        const x = a.position === "right" ? plot.x + plot.w : plot.x;
+        parts.push(`<line class="mc-axis-line" x1="${num(x)}" y1="${num(plot.y)}" x2="${num(x)}" y2="${num(plot.y + plot.h)}" ${stroke}/>`);
+        for (const t of a.ticks) {
+            const dir = a.position === "right" ? 1 : -1;
+            const anchor = a.position === "right" ? "start" : "end";
+            parts.push(`<g class="mc-tick"><line class="mc-tick-line" x1="${num(x)}" y1="${num(t.pos)}" x2="${num(x + dir * 5)}" y2="${num(t.pos)}" ${stroke}/>` +
+                `<text class="mc-tick-label" x="${num(x + dir * 8)}" y="${num(t.pos + 3)}" text-anchor="${anchor}" ${fill}>${escapeXml(t.label)}</text></g>`);
+        }
+        if (a.label) {
+            const lx = a.position === "right" ? plot.x + plot.w + 34 : plot.x - 38;
+            parts.push(`<text class="mc-axis-label" x="${num(lx)}" y="${num(plot.y + plot.h / 2)}" text-anchor="middle" transform="rotate(-90 ${num(lx)} ${num(plot.y + plot.h / 2)})" ${fill}>${escapeXml(a.label)}</text>`);
+        }
+    }
+    const pos = a.position;
+    return `<g class="mc-axis mc-axis-${a.kind} mc-axis-${pos}" data-axis-id="${escapeXml(a.id)}">${parts.join("")}</g>`;
+}
+function gridMarkup(snap, mode) {
+    const stroke = mode.export ? 'stroke="#e2e8f0"' : "";
+    const parts = [];
+    for (const a of snap.axes) {
+        if (!a.grid)
+            continue;
+        for (const t of a.ticks) {
+            if (a.kind === "x")
+                parts.push(`<line class="mc-grid-line" x1="${num(t.pos)}" y1="${num(snap.plot.y)}" x2="${num(t.pos)}" y2="${num(snap.plot.y + snap.plot.h)}" ${stroke}/>`);
+            else
+                parts.push(`<line class="mc-grid-line" x1="${num(snap.plot.x)}" y1="${num(t.pos)}" x2="${num(snap.plot.x + snap.plot.w)}" y2="${num(t.pos)}" ${stroke}/>`);
+        }
+    }
+    return `<g class="mc-grid">${parts.join("")}</g>`;
+}
+function pointAttrs(p, extra, extraClass = "") {
+    const cls = [
+        "mc-point",
+        extraClass,
+        p.focused ? "mc-focused" : "",
+        p.dimmed ? "mc-dimmed" : "",
+        p.selected ? "mc-selected" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return `class="${cls}" data-series-id="${escapeXml(p.seriesId)}" data-index="${p.index}" aria-label="${escapeXml(`${p.label}: ${p.value ?? ""}`)}" ${extra}`;
+}
+export function svgInner(snap, mode) {
+    const { plot } = snap;
+    // 시리즈를 먼저 빌드해 사용된 패턴을 수집한 뒤 defs를 만든다
+    const patterns = snap.patterns ? new PatternRegistry(snap.clipId) : null;
+    const fillOf = (color, colorIndex) => patterns
+        ? `fill="url(#${escapeXml(patterns.idOf(color, colorIndex))})"`
+        : paint("fill", color, colorIndex, mode);
+    const seriesParts = [];
+    const sliceMarkup = (g, cls) => {
+        const slices = g.slices
+            .map((sl) => {
+            if (!sl.path)
+                return "";
+            const cls2 = [
+                "mc-slice",
+                sl.focused ? "mc-focused" : "",
+                sl.dimmed ? "mc-dimmed" : "",
+                sl.selected ? "mc-selected" : "",
+            ]
+                .filter(Boolean)
+                .join(" ");
+            return `<path class="${cls2}" data-index="${sl.index}" d="${sl.path}" aria-label="${escapeXml(`${sl.label}: ${sl.value}`)}" ${fillOf(sl.color, sl.colorIndex)} stroke-width="1" ${mode.export ? 'stroke="#ffffff"' : ""}/>`;
+        })
+            .join("");
+        seriesParts.push(`<g class="mc-series ${cls}" data-series-id="${escapeXml(g.seriesId)}">${slices}</g>`);
+    };
+    for (const g of snap.geometry) {
+        const s = snap.series.find((x) => x.id === g.seriesId);
+        const col = (prop) => paint(prop, s?.color ?? null, s?.colorIndex ?? 0, mode);
+        // 포인트 고정색(itemStyle/points.color) > 시리즈 색
+        const colP = (prop, pc) => paint(prop, pc ?? s?.color ?? null, s?.colorIndex ?? 0, mode);
+        if (g.kind === "line" || g.kind === "scatter") {
+            const line = g.kind === "line" && g.path
+                ? `<path class="mc-line${g.shape && g.shape !== "linear" ? ` mc-${g.shape}` : ""}" d="${g.path}" fill="none" ${col("stroke")}/>`
+                : "";
+            const pts = g.points
+                .map((p) => `<circle ${pointAttrs(p, `cx="${num(p.x)}" cy="${num(p.y)}" r="3.5"`)} ${colP("fill", p.color)}/>`)
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-${g.kind}" data-series-id="${escapeXml(g.seriesId)}">${line}${pts}</g>`);
+        }
+        else if (g.kind === "bubble") {
+            const pts = g.points
+                .map((p) => `<circle ${pointAttrs(p, `cx="${num(p.x)}" cy="${num(p.y)}" r="${num(p.r ?? 5)}"`, "mc-bubble")} ${fillOf(p.color ?? s?.color ?? null, s?.colorIndex ?? 0)}/>`)
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-bubble" data-series-id="${escapeXml(g.seriesId)}">${pts}</g>`);
+        }
+        else if (g.kind === "area") {
+            const pts = g.points
+                .map((p) => `<circle ${pointAttrs(p, `cx="${num(p.x)}" cy="${num(p.y)}" r="3.5"`)} ${colP("fill", p.color)}/>`)
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-area" data-series-id="${escapeXml(g.seriesId)}">` +
+                (g.path
+                    ? `<path class="mc-area" d="${g.path}" ${fillOf(s?.color ?? null, s?.colorIndex ?? 0)}/>`
+                    : "") +
+                (g.linePath
+                    ? `<path class="mc-line" d="${g.linePath}" fill="none" ${col("stroke")}/>`
+                    : "") +
+                pts +
+                `</g>`);
+        }
+        else if (g.kind === "bar") {
+            const bars = g.bars
+                .map((b) => {
+                const cls = [
+                    "mc-bar",
+                    b.tone ? `mc-bar-${b.tone}` : "",
+                    b.focused ? "mc-focused" : "",
+                    b.dimmed ? "mc-dimmed" : "",
+                    b.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                // waterfall 톤 — 시리즈/포인트 고정색이 없으면 증감 색 변수를 쓴다
+                const fill = b.tone && !s?.color && !b.color && !patterns
+                    ? mode.export
+                        ? `fill="${b.tone === "up" ? "#16a34a" : "#dc2626"}"`
+                        : `style="fill:var(--chart-${b.tone}-color)"`
+                    : fillOf(b.color ?? s?.color ?? null, s?.colorIndex ?? 0);
+                return `<rect class="${cls}" data-series-id="${escapeXml(b.seriesId)}" data-index="${b.index}" x="${num(b.x)}" y="${num(b.y)}" width="${num(b.w)}" height="${num(b.h)}" rx="2" aria-label="${escapeXml(`${b.label}: ${b.value}`)}" ${fill}/>`;
+            })
+                .join("");
+            const conn = g.connectorPath
+                ? `<path class="mc-waterfall-line" d="${g.connectorPath}" fill="none"/>`
+                : "";
+            seriesParts.push(`<g class="mc-series mc-type-bar${g.horizontal ? " mc-horizontal" : ""}" data-series-id="${escapeXml(g.seriesId)}">${conn}${bars}</g>`);
+        }
+        else if (g.kind === "pie") {
+            sliceMarkup(g, "mc-type-pie");
+        }
+        else if (g.kind === "funnel") {
+            sliceMarkup(g, "mc-type-funnel");
+        }
+        else if (g.kind === "cone-funnel") {
+            // cone-funnel — 값 비례 높이 + 직선 외곽 퍼널 (.mc-type-cone-funnel)
+            sliceMarkup(g, "mc-type-cone-funnel");
+        }
+        else if (g.kind === "pyramid") {
+            sliceMarkup(g, "mc-type-pyramid");
+        }
+        else if (g.kind === "heatmap") {
+            const cells = g.cells
+                .map((c) => {
+                const cls = [
+                    "mc-heat-cell",
+                    c.focused ? "mc-focused" : "",
+                    c.dimmed ? "mc-dimmed" : "",
+                    c.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                return (`<rect class="${cls}" data-series-id="${escapeXml(c.seriesId)}" ` +
+                    `data-index="${c.index}" x="${num(c.x)}" y="${num(c.y)}" ` +
+                    `width="${num(c.w)}" height="${num(c.h)}" ` +
+                    `aria-label="${escapeXml(`${c.label}: ${c.value}`)}" ${heatFill(c, g, mode)}/>`);
+            })
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-heatmap" data-series-id="${escapeXml(g.cells[0]?.seriesId ?? "heat")}">${cells}</g>`);
+        }
+        else if (g.kind === "wordcloud") {
+            const words = g.words
+                .map((w) => {
+                const cls = [
+                    "mc-word",
+                    w.focused ? "mc-focused" : "",
+                    w.dimmed ? "mc-dimmed" : "",
+                    w.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                return (`<text class="${cls}" data-index="${w.index}" x="${num(w.x)}" ` +
+                    `y="${num(w.y)}" font-size="${num(w.size)}" ` +
+                    `aria-label="${escapeXml(`${w.text}: ${w.value}`)}" ` +
+                    `${fillOf(w.color, w.colorIndex)}>${escapeXml(w.text)}</text>`);
+            })
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-wordcloud" data-series-id="${escapeXml(g.seriesId)}">${words}</g>`);
+        }
+        else if (g.kind === "pictogram") {
+            // 픽토그램 — 행 라벨 + 사람 아이콘 그리드. 빈 아이콘은 윤곽만 (CSS)
+            const rows = g.rows
+                .map((r) => {
+                const icons = r.icons
+                    .map((ic) => {
+                    const cls = [
+                        "mc-picto",
+                        ic.filled ? "mc-picto-fill" : "mc-picto-empty",
+                        ic.focused ? "mc-focused" : "",
+                        ic.dimmed ? "mc-dimmed" : "",
+                        ic.selected ? "mc-selected" : "",
+                    ]
+                        .filter(Boolean)
+                        .join(" ");
+                    return (`<path class="${cls}" d="${PERSON_ICON_D}" ` +
+                        `transform="translate(${num(ic.x)} ${num(ic.y)}) scale(${num(ic.size / 24)})" ` +
+                        `data-index="${ic.index}"` +
+                        (ic.seriesId
+                            ? ` data-series-id="${escapeXml(ic.seriesId)}"` +
+                                ` aria-label="${escapeXml(`${ic.label}: ${ic.value ?? ""}`)}" ` +
+                                fillOf(null, ic.colorIndex)
+                            : "") +
+                        `/>`);
+                })
+                    .join("");
+                return (`<g class="mc-picto-row" data-index="${r.index}">` +
+                    `<text class="mc-picto-label" x="${num(r.labelX)}" y="${num(r.labelY)}" ` +
+                    `text-anchor="end" dominant-baseline="central">${escapeXml(r.label)}</text>` +
+                    icons +
+                    `</g>`);
+            })
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-pictogram" data-series-id="${escapeXml(g.seriesId)}">${rows}</g>`);
+        }
+        else if (g.kind === "radar") {
+            // 레이더 — 폐합 폴리곤. radar-area는 패턴/색 채움 + 반투명 (CSS fill-opacity)
+            const pts = g.points
+                .map((p) => `<circle ${pointAttrs(p, `cx="${num(p.x)}" cy="${num(p.y)}" r="3"`)} ${col("fill")}/>`)
+                .join("");
+            const path = g.path
+                ? `<path class="mc-radar${g.area ? " mc-radar-area" : ""}" d="${g.path}" ` +
+                    `${g.area ? fillOf(s?.color ?? null, s?.colorIndex ?? 0) : 'fill="none"'} ${col("stroke")}/>`
+                : "";
+            seriesParts.push(`<g class="mc-series mc-type-${g.area ? "radar-area" : "radar"}" data-series-id="${escapeXml(g.seriesId)}">${path}${pts}</g>`);
+        }
+        else if (g.kind === "range-bar") {
+            const bars = g.bars
+                .map((b) => {
+                const cls = [
+                    "mc-range-bar",
+                    b.focused ? "mc-focused" : "",
+                    b.dimmed ? "mc-dimmed" : "",
+                    b.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                return `<rect class="${cls}" data-series-id="${escapeXml(b.seriesId)}" data-index="${b.index}" x="${num(b.x)}" y="${num(b.y)}" width="${num(b.w)}" height="${num(b.h)}" rx="2" aria-label="${escapeXml(`${b.label}: ${b.low}–${b.high}`)}" ${fillOf(b.color ?? s?.color ?? null, s?.colorIndex ?? 0)}/>`;
+            })
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-range-bar${g.horizontal ? " mc-horizontal" : ""}" data-series-id="${escapeXml(g.seriesId)}">${bars}</g>`);
+        }
+        else if (g.kind === "range-area") {
+            const pts = g.points
+                .map((p) => `<circle ${pointAttrs(p, `cx="${num(p.x)}" cy="${num(p.y)}" r="3"`)} ${col("fill")}/>`)
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-range-area" data-series-id="${escapeXml(g.seriesId)}">` +
+                (g.bandPath
+                    ? `<path class="mc-range-area" d="${g.bandPath}" ${fillOf(s?.color ?? null, s?.colorIndex ?? 0)}/>`
+                    : "") +
+                pts +
+                `</g>`);
+        }
+        else if (g.kind === "candlestick") {
+            const candles = g.candles
+                .map((c) => {
+                const cls = [
+                    "mc-candle",
+                    `mc-candle-${c.tone}`,
+                    c.focused ? "mc-focused" : "",
+                    c.dimmed ? "mc-dimmed" : "",
+                    c.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                // 증감 톤 — 시리즈 고정색이 없으면 up/down CSS 변수(waterfall과 공유)
+                const paintC = !s?.color && !patterns
+                    ? mode.export
+                        ? `fill="${c.tone === "up" ? "#16a34a" : "#dc2626"}" stroke="${c.tone === "up" ? "#16a34a" : "#dc2626"}"`
+                        : `style="fill:var(--chart-${c.tone}-color);stroke:var(--chart-${c.tone}-color)"`
+                    : `${fillOf(s?.color ?? null, s?.colorIndex ?? 0)} ${col("stroke")}`;
+                return (`<g class="${cls}" data-series-id="${escapeXml(c.seriesId)}" data-index="${c.index}" ` +
+                    `aria-label="${escapeXml(`${c.label}: O${c.open} H${c.high} L${c.low} C${c.close}`)}">` +
+                    // 심지 — 시리즈 고정색이면 인라인, 아니면 CSS가 톤 변수로 칠한다
+                    `<line class="mc-candle-wick" x1="${num(c.cx)}" y1="${num(c.highY)}" x2="${num(c.cx)}" y2="${num(c.lowY)}" ` +
+                    (s?.color
+                        ? `style="stroke:${escapeXml(s.color)}"`
+                        : mode.export
+                            ? `stroke="${c.tone === "up" ? "#16a34a" : "#dc2626"}"`
+                            : "") +
+                    `/>` +
+                    `<rect class="mc-candle-body" x="${num(c.x)}" y="${num(c.y)}" width="${num(c.w)}" height="${num(c.h)}" ${paintC}/>` +
+                    `</g>`);
+            })
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-candlestick" data-series-id="${escapeXml(g.seriesId)}">${candles}</g>`);
+        }
+        else if (g.kind === "ohlc") {
+            // ohlc — 캔들 바디 대신 시가(좌)/종가(우) 틱 + 고저 심지 선분.
+            // open/close의 y는 톤으로 복원한다: up=close가 위, down=open이 위
+            const bars2 = g.candles
+                .map((c) => {
+                const cls = [
+                    "mc-ohlc",
+                    `mc-ohlc-${c.tone}`,
+                    c.focused ? "mc-focused" : "",
+                    c.dimmed ? "mc-dimmed" : "",
+                    c.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                const openY = c.tone === "up" ? c.y + c.h : c.y;
+                const closeY = c.tone === "up" ? c.y : c.y + c.h;
+                const strokeC = s?.color
+                    ? `style="stroke:${escapeXml(s.color)}"`
+                    : mode.export
+                        ? `stroke="${c.tone === "up" ? "#16a34a" : "#dc2626"}"`
+                        : "";
+                return (`<g class="${cls}" data-series-id="${escapeXml(c.seriesId)}" data-index="${c.index}" ` +
+                    `aria-label="${escapeXml(`${c.label}: O${c.open} H${c.high} L${c.low} C${c.close}`)}">` +
+                    `<line class="mc-ohlc-stem" x1="${num(c.cx)}" y1="${num(c.highY)}" x2="${num(c.cx)}" y2="${num(c.lowY)}" ${strokeC}/>` +
+                    `<line class="mc-ohlc-open" x1="${num(c.x)}" y1="${num(openY)}" x2="${num(c.cx)}" y2="${num(openY)}" ${strokeC}/>` +
+                    `<line class="mc-ohlc-close" x1="${num(c.cx)}" y1="${num(closeY)}" x2="${num(c.x + c.w)}" y2="${num(closeY)}" ${strokeC}/>` +
+                    `</g>`);
+            })
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-ohlc" data-series-id="${escapeXml(g.seriesId)}">${bars2}</g>`);
+        }
+        else if (g.kind === "boxplot") {
+            // boxplot — 수염(min↔max) + 상자(Q1~Q3) + 중앙값 선 + 수염 캡
+            const boxes = g.boxes
+                .map((b) => {
+                const cls = [
+                    "mc-box",
+                    b.focused ? "mc-focused" : "",
+                    b.dimmed ? "mc-dimmed" : "",
+                    b.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                const fillB = fillOf(b.color ?? s?.color ?? null, s?.colorIndex ?? 0);
+                const strokeB = colP("stroke", b.color);
+                const capW = b.w / 2;
+                return (`<g class="${cls}" data-series-id="${escapeXml(b.seriesId)}" data-index="${b.index}" ` +
+                    `aria-label="${escapeXml(`${b.label}: ${b.min}–${b.max}, med ${b.median}`)}">` +
+                    `<line class="mc-box-whisker" x1="${num(b.cx)}" y1="${num(b.highY)}" x2="${num(b.cx)}" y2="${num(b.lowY)}" ${strokeB}/>` +
+                    `<line class="mc-box-cap" x1="${num(b.cx - capW / 2)}" y1="${num(b.highY)}" x2="${num(b.cx + capW / 2)}" y2="${num(b.highY)}" ${strokeB}/>` +
+                    `<line class="mc-box-cap" x1="${num(b.cx - capW / 2)}" y1="${num(b.lowY)}" x2="${num(b.cx + capW / 2)}" y2="${num(b.lowY)}" ${strokeB}/>` +
+                    `<rect class="mc-box-body" x="${num(b.x)}" y="${num(b.y)}" width="${num(b.w)}" height="${num(b.h)}" ${fillB} ${strokeB}/>` +
+                    `<line class="mc-box-median" x1="${num(b.x)}" y1="${num(b.medY)}" x2="${num(b.x + b.w)}" y2="${num(b.medY)}" ${strokeB}/>` +
+                    `</g>`);
+            })
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-boxplot" data-series-id="${escapeXml(g.seriesId)}">${boxes}</g>`);
+        }
+        else if (g.kind === "map") {
+            // 지도 — 지역 폴리곤. 조인된 값이 있으면 스케일 색, 없으면 no-data
+            const regions = g.regions
+                .map((r) => {
+                const cls = [
+                    "mc-map-region",
+                    r.value == null ? "mc-map-no-data" : "",
+                    r.focused ? "mc-focused" : "",
+                    r.dimmed ? "mc-dimmed" : "",
+                    r.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                const fill = r.value == null
+                    ? mode.export
+                        ? 'fill="#e2e8f0"'
+                        : ""
+                    : mapFill(r.t, g, mode);
+                return (`<path class="${cls}" data-map-code="${escapeXml(r.code)}" ` +
+                    `data-index="${r.index}" d="${r.path}" ` +
+                    `aria-label="${escapeXml(`${r.name}: ${r.value ?? ""}`)}" ${fill}/>`);
+            })
+                .join("");
+            // 마커 레이어 — mapPoints의 투영된 원. image가 있으면 원형 클립
+            // 아바타(프로필 핀), pulse면 내 위치 펄스 링을 함께 그린다
+            const markers = g.markers
+                .map((m) => {
+                const cls = [
+                    "mc-map-marker",
+                    m.image ? "mc-map-avatar" : "",
+                    m.focused ? "mc-focused" : "",
+                    m.dimmed ? "mc-dimmed" : "",
+                    m.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                const aria = `aria-label="${escapeXml(`${m.label}: ${m.value ?? ""}`)}"`;
+                const pulseRing = m.pulse
+                    ? `<circle class="mc-map-pulse" cx="${num(m.x)}" cy="${num(m.y)}" r="${num(m.r)}" fill="none"/>`
+                    : "";
+                if (m.image) {
+                    const cid = `${snap.clipId}-av${m.index}`;
+                    return (`<g class="${cls}" data-index="${m.index}" ${aria}>` +
+                        pulseRing +
+                        `<circle class="mc-map-avatar-ring" cx="${num(m.x)}" cy="${num(m.y)}" r="${num(m.r)}" ` +
+                        `${fillOf(m.color ?? s?.color ?? null, s?.colorIndex ?? 0)}/>` +
+                        `<clipPath id="${escapeXml(cid)}"><circle cx="${num(m.x)}" cy="${num(m.y)}" r="${num(m.r - 1.5)}"/></clipPath>` +
+                        `<image class="mc-map-avatar-img" href="${escapeXml(m.image)}" ` +
+                        `x="${num(m.x - m.r)}" y="${num(m.y - m.r)}" width="${num(m.r * 2)}" height="${num(m.r * 2)}" ` +
+                        `clip-path="url(#${escapeXml(cid)})" preserveAspectRatio="xMidYMid slice"/>` +
+                        `</g>`);
+                }
+                return (pulseRing +
+                    `<circle class="${cls}" data-index="${m.index}" ` +
+                    `cx="${num(m.x)}" cy="${num(m.y)}" r="${num(m.r)}" ` +
+                    `${aria} ` +
+                    `${fillOf(m.color ?? s?.color ?? null, s?.colorIndex ?? 0)}/>`);
+            })
+                .join("");
+            // 클러스터 레이어 — map.cluster로 묶인 마커의 카운트 버블
+            const clusters = g.clusters
+                .map((c) => `<g class="mc-map-cluster" data-members="${c.members.join(",")}" ` +
+                `aria-label="${c.count} points">` +
+                `<circle class="mc-map-cluster-bg" cx="${num(c.x)}" cy="${num(c.y)}" r="${num(c.r)}"/>` +
+                `<text class="mc-map-cluster-count" x="${num(c.x)}" y="${num(c.y)}" ` +
+                `text-anchor="middle" dominant-baseline="central">${c.count}</text>` +
+                `</g>`)
+                .join("");
+            // 라인 레이어 — mapLines의 투영된 선분
+            const mlines = g.lines
+                .map((l) => `<path class="mc-map-line" data-index="${l.index}" d="${l.path}" fill="none" ` +
+                `${mode.export ? 'stroke="#64748b" stroke-width="1.5"' : ""}/>`)
+                .join("");
+            // panZoom — 지역/라인만 그룹 transform (마커는 코어가 좌표를 변환)
+            const tfAttr = g.transform ? ` transform="${g.transform}"` : "";
+            const geo = regions || mlines
+                ? `<g class="mc-map-geo"${tfAttr}>${regions}` +
+                    (mlines ? `<g class="mc-map-lines">${mlines}</g>` : "") +
+                    `</g>`
+                : "";
+            seriesParts.push(`<g class="mc-series mc-type-map" data-series-id="${escapeXml(g.seriesId)}">${geo}` +
+                (clusters ? `<g class="mc-map-clusters">${clusters}</g>` : "") +
+                (markers ? `<g class="mc-map-markers">${markers}</g>` : "") +
+                `</g>`);
+        }
+        else if (g.kind === "organization") {
+            // organization — 엘보 링크를 노드 박스 아래에 깐다
+            const links = g.links
+                .map((l) => `<path class="mc-org-link" d="${l.path}" fill="none" ` +
+                `${mode.export ? 'stroke="#94a3b8"' : ""}/>`)
+                .join("");
+            const nodes = g.nodes
+                .map((n) => {
+                const cls = [
+                    "mc-org-node",
+                    n.focused ? "mc-focused" : "",
+                    n.dimmed ? "mc-dimmed" : "",
+                    n.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                return (`<rect class="${cls}" data-index="${n.index}" x="${num(n.x)}" ` +
+                    `y="${num(n.y)}" width="${num(n.w)}" height="${num(n.h)}" rx="4" ` +
+                    `${fillOf(n.color, n.colorIndex)} ` +
+                    `aria-label="${escapeXml(`${n.name}: ${n.value}`)}"/>`);
+            })
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-organization" data-series-id="${escapeXml(g.seriesId)}">` +
+                `<g class="mc-org-links">${links}</g>` +
+                `<g class="mc-org-nodes">${nodes}</g></g>`);
+        }
+        else if (g.kind === "sunburst") {
+            // sunburst — 깊이 링의 환형 섹터 path
+            const nodes = g.nodes
+                .map((n) => {
+                const cls = [
+                    "mc-sunburst-node",
+                    n.focused ? "mc-focused" : "",
+                    n.dimmed ? "mc-dimmed" : "",
+                    n.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                return (`<path class="${cls}" data-index="${n.index}" d="${n.path}" ` +
+                    `${fillOf(n.color, n.colorIndex)} ` +
+                    `aria-label="${escapeXml(`${n.name}: ${n.value}`)}"/>`);
+            })
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-sunburst" data-series-id="${escapeXml(g.seriesId)}">${nodes}</g>`);
+        }
+        else if (g.kind === "treemap") {
+            // treemap — 리프 rect. 이름 라벨은 dataLabels 채널로 나간다
+            const nodes = g.nodes
+                .map((n) => {
+                const cls = [
+                    "mc-treemap-node",
+                    n.focused ? "mc-focused" : "",
+                    n.dimmed ? "mc-dimmed" : "",
+                    n.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                return (`<rect class="${cls}" data-index="${n.index}" x="${num(n.x)}" ` +
+                    `y="${num(n.y)}" width="${num(n.w)}" height="${num(n.h)}" ` +
+                    `${fillOf(n.color, n.colorIndex)} ` +
+                    `aria-label="${escapeXml(`${n.name}: ${n.value}`)}"/>`);
+            })
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-treemap" data-series-id="${escapeXml(g.seriesId)}">${nodes}</g>`);
+        }
+        else if (g.kind === "sankey") {
+            // sankey — 리본을 노드 아래에 깔고 노드 rect를 위에
+            const links = g.links
+                .map((l) => `<path class="mc-sankey-link" data-source="${l.sourceIndex}" ` +
+                `data-target="${l.targetIndex}" d="${l.path}" ` +
+                `${fillOf(null, l.colorIndex)}/>`)
+                .join("");
+            const nodes = g.nodes
+                .map((n) => {
+                const cls = [
+                    "mc-sankey-node",
+                    n.focused ? "mc-focused" : "",
+                    n.dimmed ? "mc-dimmed" : "",
+                    n.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                return (`<rect class="${cls}" data-index="${n.index}" x="${num(n.x)}" ` +
+                    `y="${num(n.y)}" width="${num(n.w)}" height="${num(n.h)}" ` +
+                    `${fillOf(n.color, n.colorIndex)} ` +
+                    `aria-label="${escapeXml(`${n.name}: ${n.value}`)}"/>`);
+            })
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-sankey" data-series-id="${escapeXml(g.seriesId)}">` +
+                `<g class="mc-sankey-links">${links}</g>` +
+                `<g class="mc-sankey-nodes">${nodes}</g></g>`);
+        }
+        else if (g.kind === "chord") {
+            // chord — 리본을 그룹 아크 아래에 깐다
+            const ribbons = g.ribbons
+                .map((rb) => `<path class="mc-chord-ribbon" data-source="${rb.sourceIndex}" ` +
+                `data-target="${rb.targetIndex}" d="${rb.path}" ` +
+                `${fillOf(null, rb.colorIndex)}/>`)
+                .join("");
+            const groups = g.groups
+                .map((gr) => {
+                const cls = [
+                    "mc-chord-group",
+                    gr.focused ? "mc-focused" : "",
+                    gr.dimmed ? "mc-dimmed" : "",
+                    gr.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                return (`<path class="${cls}" data-index="${gr.index}" d="${gr.path}" ` +
+                    `${fillOf(gr.color, gr.colorIndex)} ` +
+                    `aria-label="${escapeXml(`${gr.name}: ${gr.value}`)}"/>`);
+            })
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-chord" data-series-id="${escapeXml(g.seriesId)}">` +
+                `<g class="mc-chord-ribbons">${ribbons}</g>` +
+                `<g class="mc-chord-groups">${groups}</g></g>`);
+        }
+        else if (g.kind === "nightingale" ||
+            g.kind === "radial-bar" ||
+            g.kind === "radial-column") {
+            // 극좌표 섹터 — 환형/부채꼴 path. 클래스는 타입별로 나눈다
+            const cls0 = g.kind === "nightingale"
+                ? "mc-nightingale-node"
+                : g.kind === "radial-column"
+                    ? "mc-radial-column"
+                    : "mc-radial-bar";
+            const nodes = g.sectors
+                .map((s) => {
+                const cls = [
+                    cls0,
+                    s.focused ? "mc-focused" : "",
+                    s.dimmed ? "mc-dimmed" : "",
+                    s.selected ? "mc-selected" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                return (`<path class="${cls}" data-index="${s.index}" ` +
+                    `data-series-id="${escapeXml(s.seriesId)}" d="${s.path}" ` +
+                    `${fillOf(s.color, s.colorIndex)} ` +
+                    `aria-label="${escapeXml(`${s.name}: ${s.value}`)}"/>`);
+            })
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-${g.kind}" data-series-id="${escapeXml(g.seriesId)}">${nodes}</g>`);
+        }
+        else if (g.kind === "gauge") {
+            // 게이지 — 트랙 아크 + 값 아크 + 바늘 + 중앙 라벨 + min/max 눈금
+            const gv = g.gauge;
+            const vcls = [
+                "mc-gauge-value",
+                gv.focused ? "mc-focused" : "",
+                gv.dimmed ? "mc-dimmed" : "",
+                gv.selected ? "mc-selected" : "",
+            ]
+                .filter(Boolean)
+                .join(" ");
+            const target = gv.target
+                ? `<line class="mc-gauge-target" x1="${num(gv.target.x1)}" y1="${num(gv.target.y1)}" ` +
+                    `x2="${num(gv.target.x2)}" y2="${num(gv.target.y2)}"/>`
+                : "";
+            const ticks = gv.ticks
+                .map((t) => `<text class="mc-gauge-tick" x="${num(t.x)}" y="${num(t.y)}" ` +
+                `text-anchor="middle">${escapeXml(t.text)}</text>`)
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-gauge" data-series-id="${escapeXml(g.seriesId)}">` +
+                `<path class="mc-gauge-track" d="${gv.trackPath}"/>` +
+                (gv.valuePath
+                    ? `<path class="${vcls}" data-index="0" d="${gv.valuePath}" ` +
+                        `${fillOf(gv.color, gv.colorIndex)} aria-label="${escapeXml(`value: ${gv.value}`)}"/>`
+                    : "") +
+                target +
+                `<line class="mc-gauge-needle" x1="${num(gv.needle.x1)}" y1="${num(gv.needle.y1)}" ` +
+                `x2="${num(gv.needle.x2)}" y2="${num(gv.needle.y2)}"/>` +
+                `<circle class="mc-gauge-hub" cx="${num(gv.needle.x1)}" cy="${num(gv.needle.y1)}" r="4"/>` +
+                `<text class="mc-gauge-label" x="${num(gv.label.x)}" y="${num(gv.label.y)}" ` +
+                `text-anchor="middle">${escapeXml(gv.label.text)}</text>` +
+                ticks +
+                `</g>`);
+        }
+        else if (g.kind === "linear-gauge") {
+            // linear-gauge — 수평 트랙 + 값 채움 바 + 목표 눈금 + 라벨
+            const gv = g.gauge;
+            const vcls = [
+                "mc-lg-value",
+                gv.focused ? "mc-focused" : "",
+                gv.dimmed ? "mc-dimmed" : "",
+                gv.selected ? "mc-selected" : "",
+            ]
+                .filter(Boolean)
+                .join(" ");
+            const target = gv.target
+                ? `<line class="mc-lg-target" x1="${num(gv.target.x)}" y1="${num(gv.target.y0)}" ` +
+                    `x2="${num(gv.target.x)}" y2="${num(gv.target.y1)}"/>`
+                : "";
+            const ticks = gv.ticks
+                .map((t, ti) => `<text class="mc-lg-tick" x="${num(t.x)}" y="${num(t.y)}" ` +
+                `text-anchor="${ti === 0 ? "start" : "end"}">${escapeXml(t.text)}</text>`)
+                .join("");
+            seriesParts.push(`<g class="mc-series mc-type-linear-gauge" data-series-id="${escapeXml(g.seriesId)}">` +
+                `<rect class="mc-lg-track" x="${num(gv.track.x)}" y="${num(gv.track.y)}" ` +
+                `width="${num(gv.track.w)}" height="${num(gv.track.h)}" rx="3"/>` +
+                `<rect class="${vcls}" data-index="0" x="${num(gv.bar.x)}" y="${num(gv.bar.y)}" ` +
+                `width="${num(gv.bar.w)}" height="${num(gv.bar.h)}" rx="3" ` +
+                `${fillOf(gv.color, gv.colorIndex)} aria-label="${escapeXml(`value: ${gv.value}`)}"/>` +
+                target +
+                `<text class="mc-lg-label" x="${num(gv.label.x)}" y="${num(gv.label.y)}" ` +
+                `text-anchor="middle">${escapeXml(gv.label.text)}</text>` +
+                ticks +
+                `</g>`);
+        }
+    }
+    const out = [];
+    const defs = [
+        `<clipPath id="${escapeXml(snap.clipId)}"><rect x="${num(plot.x)}" y="${num(plot.y)}" width="${num(plot.w)}" height="${num(plot.h)}"/></clipPath>`,
+        patterns ? patterns.defs(mode) : "",
+    ];
+    // 지도 값 범례 그라데이션 — .mc-map-scale 바가 참조
+    if (snap.mapScale) {
+        const ms = snap.mapScale;
+        const f = ms.from ?? (mode.export ? "#dbeafe" : "var(--chart-map-from)");
+        const t2 = ms.to ?? (mode.export ? "#1d4ed8" : "var(--chart-map-to)");
+        defs.push(`<linearGradient id="${escapeXml(snap.clipId)}-mapscale" x1="0" x2="1" y1="0" y2="0">` +
+            `<stop offset="0" stop-color="${escapeXml(f)}"/>` +
+            `<stop offset="1" stop-color="${escapeXml(t2)}"/></linearGradient>`);
+    }
+    out.push(`<defs>${defs.join("")}</defs>`);
+    out.push(gridMarkup(snap, mode));
+    // 레이더 그리드 — 동심원 링 + 방사 스포크 (직교 축 대체)
+    if (snap.radar) {
+        const rg = snap.radar;
+        const stroke = mode.export ? 'stroke="#e2e8f0"' : "";
+        const fill = mode.export ? 'fill="#64748b" font-size="10"' : "";
+        const rings = rg.rings
+            .map((r) => `<circle class="mc-radar-ring" cx="${num(rg.cx)}" cy="${num(rg.cy)}" r="${num(r.r)}" fill="none" ${stroke}/>` +
+            `<text class="mc-radar-ring-label" x="${num(rg.cx + 3)}" y="${num(rg.cy - r.r + 3)}" ${fill}>${escapeXml(r.label)}</text>`)
+            .join("");
+        const spokes = rg.spokes
+            .map((sp) => `<line class="mc-radar-spoke" x1="${num(rg.cx)}" y1="${num(rg.cy)}" x2="${num(sp.x2)}" y2="${num(sp.y2)}" ${stroke}/>` +
+            `<text class="mc-spoke-label" x="${num(sp.lx)}" y="${num(sp.ly)}" text-anchor="middle" ${fill}>${escapeXml(sp.label)}</text>`)
+            .join("");
+        out.push(`<g class="mc-radar-grid">${rings}${spokes}</g>`);
+    }
+    // 값 축 기준 영역 — 그리드 위, 시리즈 아래
+    if (snap.markBands.length) {
+        const bands = snap.markBands
+            .map((b) => {
+            const fill = b.color
+                ? mode.export
+                    ? `fill="${escapeXml(b.color)}" fill-opacity="0.12"`
+                    : `style="fill:${escapeXml(b.color)};fill-opacity:0.12"`
+                : mode.export
+                    ? 'fill="#f43f5e" fill-opacity="0.08"'
+                    : "";
+            return (`<g class="mc-mark"><rect class="mc-mark-band" x="${num(b.x)}" y="${num(b.y)}" width="${num(b.w)}" height="${num(b.h)}" ${fill}/>` +
+                (b.label
+                    ? `<text class="mc-mark-label" x="${num(b.lx)}" y="${num(b.ly)}" ${mode.export ? `fill="${escapeXml(b.color ?? "#f43f5e")}"` : ""}>${escapeXml(b.label)}</text>`
+                    : "") +
+                `</g>`);
+        })
+            .join("");
+        out.push(`<g class="mc-mark-bands">${bands}</g>`);
+    }
+    for (const a of snap.axes)
+        out.push(axisMarkup(a, snap, mode));
+    const clip = snap.geometry.some((g) => g.kind !== "pie" &&
+        g.kind !== "funnel" &&
+        g.kind !== "cone-funnel" &&
+        g.kind !== "pyramid")
+        ? ` clip-path="url(#${escapeXml(snap.clipId)})"`
+        : "";
+    out.push(`<g class="mc-plot"${clip}>${seriesParts.join("")}</g>`);
+    // 에러바 — 시리즈 위 오버레이 (포인트별 ±오차, 수직 막대 + 캡)
+    if (snap.errors.length) {
+        const bars = snap.errors
+            .map((e) => `<path class="mc-error" data-series-id="${escapeXml(e.seriesId)}" data-index="${e.index}" ` +
+            `d="M${num(e.x - 4)} ${num(e.yLo)} H${num(e.x + 4)} M${num(e.x)} ${num(e.yLo)} V${num(e.yHi)} M${num(e.x - 4)} ${num(e.yHi)} H${num(e.x + 4)}" ` +
+            `fill="none" ${mode.export ? 'stroke="#64748b"' : ""}/>`)
+            .join("");
+        out.push(`<g class="mc-errors"${clip}>${bars}</g>`);
+    }
+    // 추세선 — 시리즈 위 오버레이 (series.trend)
+    if (snap.trendLines.length) {
+        const tls = snap.trendLines
+            .map((t) => `<path class="mc-trendline" data-series-id="${escapeXml(t.seriesId)}" d="${t.path}" fill="none" ` +
+            (mode.export
+                ? `stroke="${escapeXml(seriesColor(t.color, t.colorIndex, mode))}" stroke-dasharray="6 3"`
+                : `style="stroke:${escapeXml(seriesColor(t.color, t.colorIndex, mode))}"`) +
+            `/>`)
+            .join("");
+        out.push(`<g class="mc-trendlines"${clip}>${tls}</g>`);
+    }
+    // 값 라벨 — clip 바깥에 두어 경계에서 잘리지 않게 한다
+    if (snap.dataLabels.length) {
+        const labels = snap.dataLabels
+            .map((d) => `<text class="mc-data-label" x="${num(d.x)}" y="${num(d.y)}" text-anchor="${d.anchor}" ${mode.export ? 'fill="#475569" font-size="10"' : ""}>${escapeXml(d.text)}</text>`)
+            .join("");
+        out.push(`<g class="mc-data-labels">${labels}</g>`);
+    }
+    // 값 축 기준선 — 플롯 위, 시리즈 아래가 아니라 위에 둔다 (가시성)
+    for (const m of snap.markLines) {
+        const stroke = m.color
+            ? `stroke="${escapeXml(m.color)}"`
+            : mode.export
+                ? 'stroke="#f43f5e"'
+                : "";
+        out.push(`<g class="mc-mark"><line class="mc-mark-line" x1="${num(m.x1)}" y1="${num(m.y1)}" x2="${num(m.x2)}" y2="${num(m.y2)}" ${stroke}/>` +
+            (m.label
+                ? `<text class="mc-mark-label" x="${num(m.lx)}" y="${num(m.ly)}" text-anchor="end" ${mode.export ? `fill="${escapeXml(m.color ?? "#f43f5e")}"` : ""}>${escapeXml(m.label)}</text>`
+                : "") +
+            `</g>`);
+    }
+    // 인라인 주석 — 데이터 좌표에 텍스트/이미지 (clip 바깥, 시리즈 위)
+    if (snap.annotations.length) {
+        const anns = snap.annotations
+            .map((a) => `<g class="mc-annotation" data-key="${escapeXml(a.key)}">` +
+            `<circle class="mc-annotation-dot" cx="${num(a.x)}" cy="${num(a.y)}" r="2.5" ${mode.export ? 'fill="#64748b"' : ""}/>` +
+            (a.image
+                ? `<image class="mc-annotation-image" href="${escapeXml(a.image)}" x="${num(a.x - a.w / 2)}" y="${num(a.y - a.h - 4)}" width="${num(a.w)}" height="${num(a.h)}"/>`
+                : "") +
+            (a.label
+                ? `<text class="mc-annotation-label" x="${num(a.x)}" y="${num(a.y - (a.image ? a.h + 8 : 8))}" text-anchor="middle" ${mode.export ? 'fill="#475569" font-size="10"' : ""}>${escapeXml(a.label)}</text>`
+                : "") +
+            `</g>`)
+            .join("");
+        out.push(`<g class="mc-annotations">${anns}</g>`);
+    }
+    // 그린 주석 — setDrawMode 드래그로 만든 선/영역 (clip 바깥, 시리즈 위)
+    if (snap.drawings.length) {
+        const ds = snap.drawings
+            .map((d) => {
+            const col = escapeXml(seriesColor(d.color, d.colorIndex, mode));
+            const cls = `mc-draw mc-draw-${d.tool}${d.draft ? " mc-draw-draft" : ""}`;
+            const strokeAttr = mode.export
+                ? `stroke="${col}" stroke-width="1.5"${d.draft ? ' stroke-dasharray="4 3"' : ""}`
+                : `style="stroke:${col}${d.draft ? ";stroke-dasharray:4 3" : ""}"`;
+            const fillAttr = mode.export
+                ? `fill="${col}" fill-opacity="0.1" stroke="${col}" stroke-width="1.5"${d.draft ? ' stroke-dasharray="4 3"' : ""}`
+                : `style="stroke:${col};fill:${col};fill-opacity:0.1${d.draft ? ";stroke-dasharray:4 3" : ""}"`;
+            const label = d.label
+                ? `<text class="mc-draw-label" x="${num((d.x1 + d.x2) / 2)}" y="${num(Math.min(d.y1, d.y2) - 4)}" text-anchor="middle" ${mode.export ? `fill="${col}" font-size="10"` : `style="fill:${col}"`}>${escapeXml(d.label)}</text>`
+                : "";
+            if (d.tool === "rect")
+                return (`<g class="${cls}" data-key="${escapeXml(d.key)}">` +
+                    `<rect class="mc-draw-box" x="${num(Math.min(d.x1, d.x2))}" y="${num(Math.min(d.y1, d.y2))}" width="${num(Math.abs(d.x2 - d.x1))}" height="${num(Math.abs(d.y2 - d.y1))}" ${fillAttr}/>` +
+                    label +
+                    `</g>`);
+            if (d.tool === "channel") {
+                // 추세선 + 평행선 + 사이 음영 밴드 — 오프셋은 선분의 수직 방향
+                const w = d.width ?? 16;
+                const dx = d.x2 - d.x1;
+                const dy = d.y2 - d.y1;
+                const len = Math.hypot(dx, dy) || 1;
+                const nx = (-dy / len) * w;
+                const ny = (dx / len) * w;
+                const bandFill = mode.export
+                    ? `fill="${col}" fill-opacity="0.08"`
+                    : `style="fill:${col};fill-opacity:0.08"`;
+                return (`<g class="${cls}" data-key="${escapeXml(d.key)}">` +
+                    `<polygon class="mc-draw-band" points="${num(d.x1)},${num(d.y1)} ${num(d.x2)},${num(d.y2)} ${num(d.x2 + nx)},${num(d.y2 + ny)} ${num(d.x1 + nx)},${num(d.y1 + ny)}" ${bandFill}/>` +
+                    `<line class="mc-draw-seg" x1="${num(d.x1)}" y1="${num(d.y1)}" x2="${num(d.x2)}" y2="${num(d.y2)}" ${strokeAttr}/>` +
+                    `<line class="mc-draw-seg mc-draw-parallel" x1="${num(d.x1 + nx)}" y1="${num(d.y1 + ny)}" x2="${num(d.x2 + nx)}" y2="${num(d.y2 + ny)}" ${strokeAttr}/>` +
+                    label +
+                    `</g>`);
+            }
+            if (d.tool === "fibonacci") {
+                // 되돌림 레벨 — y1..y2 구간을 고정 비율로 나눈 수평선들
+                const FIB = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
+                const labelAttr = mode.export
+                    ? `fill="${col}" font-size="9"`
+                    : `style="fill:${col}"`;
+                const levels = FIB.map((r) => {
+                    const y = d.y1 + (d.y2 - d.y1) * r;
+                    return (`<line class="mc-draw-fib-level" x1="${num(d.x1)}" y1="${num(y)}" x2="${num(d.x2)}" y2="${num(y)}" ${strokeAttr}/>` +
+                        `<text class="mc-draw-fib-label" x="${num(d.x2 + 3)}" y="${num(y + 3)}" font-size="9" ${labelAttr}>${r * 100}%</text>`);
+                }).join("");
+                return (`<g class="${cls}" data-key="${escapeXml(d.key)}">` +
+                    levels +
+                    label +
+                    `</g>`);
+            }
+            return (`<g class="${cls}" data-key="${escapeXml(d.key)}">` +
+                `<line class="mc-draw-seg" x1="${num(d.x1)}" y1="${num(d.y1)}" x2="${num(d.x2)}" y2="${num(d.y2)}" ${strokeAttr}/>` +
+                label +
+                `</g>`);
+        })
+            .join("");
+        out.push(`<g class="mc-drawings">${ds}</g>`);
+    }
+    if (snap.crosshair != null)
+        out.push(`<line class="mc-crosshair" x1="${num(snap.crosshair)}" y1="${num(plot.y)}" x2="${num(snap.crosshair)}" y2="${num(plot.y + plot.h)}" ${mode.export ? 'stroke="#94a3b8" stroke-dasharray="4 3"' : ""}/>`);
+    if (snap.selection)
+        out.push(`<rect class="mc-selection" x="${num(snap.selection.x)}" y="${num(snap.selection.y ?? plot.y)}" width="${num(snap.selection.w)}" height="${num(snap.selection.h ?? plot.h)}" ${mode.export ? 'fill="#2563eb" fill-opacity="0.12"' : ""}/>`);
+    if (snap.empty)
+        out.push(`<text class="mc-empty" x="${num(snap.width / 2)}" y="${num(snap.height / 2)}" text-anchor="middle" ${mode.export ? 'fill="#94a3b8"' : ""}>${escapeXml(snap.emptyText)}</text>`);
+    // 네비게이터(미니맵) — 플롯 아래 전체 도메인 개요 + 줌 창/핸들
+    if (snap.navigator) {
+        const n = snap.navigator;
+        const tracks = n.tracks
+            .map((t) => `<path class="mc-nav-track" d="${t.path}" fill="none" ` +
+            (mode.export
+                ? `stroke="${escapeXml(seriesColor(t.color, t.colorIndex, mode))}"`
+                : `style="stroke:${escapeXml(seriesColor(t.color, t.colorIndex, mode))}"`) +
+            `/>`)
+            .join("");
+        const winFill = mode.export
+            ? 'fill="#2563eb" fill-opacity="0.08" stroke="#2563eb" stroke-opacity="0.35"'
+            : "";
+        const handleFill = mode.export ? 'fill="#2563eb" fill-opacity="0.3"' : "";
+        out.push(`<g class="mc-navigator">` +
+            `<rect class="mc-nav-bg" x="${num(n.left)}" y="${num(n.y)}" width="${num(n.right - n.left)}" height="${num(n.h)}" ${mode.export ? 'fill="#f1f5f9"' : ""}/>` +
+            tracks +
+            `<rect class="mc-nav-window" x="${num(n.window.x)}" y="${num(n.y)}" width="${num(n.window.w)}" height="${num(n.h)}" ${winFill}/>` +
+            `<rect class="mc-nav-handle mc-nav-handle-l" x="${num(n.window.x - 3)}" y="${num(n.y)}" width="6" height="${num(n.h)}" rx="2" ${handleFill}/>` +
+            `<rect class="mc-nav-handle mc-nav-handle-r" x="${num(n.window.x + n.window.w - 3)}" y="${num(n.y)}" width="6" height="${num(n.h)}" rx="2" ${handleFill}/>` +
+            `</g>`);
+    }
+    // 스크롤바 — 미니 시리즈 없는 얇은 줌 스트립 (.mc-scrollbar)
+    if (snap.scrollbar) {
+        const n = snap.scrollbar;
+        const winFill = mode.export
+            ? 'fill="#2563eb" fill-opacity="0.08" stroke="#2563eb" stroke-opacity="0.35"'
+            : "";
+        const handleFill = mode.export ? 'fill="#2563eb" fill-opacity="0.3"' : "";
+        out.push(`<g class="mc-scrollbar">` +
+            `<rect class="mc-sb-bg" x="${num(n.left)}" y="${num(n.y)}" width="${num(n.right - n.left)}" height="${num(n.h)}" rx="${num(n.h / 2)}" ${mode.export ? 'fill="#f1f5f9"' : ""}/>` +
+            `<rect class="mc-sb-window" x="${num(n.window.x)}" y="${num(n.y + 2)}" width="${num(n.window.w)}" height="${num(n.h - 4)}" rx="${num((n.h - 4) / 2)}" ${winFill}/>` +
+            `<rect class="mc-sb-handle mc-sb-handle-l" x="${num(n.window.x - 3)}" y="${num(n.y + 2)}" width="6" height="${num(n.h - 4)}" rx="3" ${handleFill}/>` +
+            `<rect class="mc-sb-handle mc-sb-handle-r" x="${num(n.window.x + n.window.w - 3)}" y="${num(n.y + 2)}" width="6" height="${num(n.h - 4)}" rx="3" ${handleFill}/>` +
+            `</g>`);
+    }
+    // 지도 값 범례 — 플롯 우하단 그라데이션 바 + min/max 라벨
+    if (snap.mapScale) {
+        const ms = snap.mapScale;
+        const bx = plot.x + plot.w - 96;
+        const by = plot.y + plot.h - 14;
+        const lbl = mode.export ? 'fill="#64748b" font-size="10"' : "";
+        out.push(`<g class="mc-map-scale">` +
+            `<rect class="mc-map-scale-bar" x="${num(bx)}" y="${num(by)}" width="80" height="8" fill="url(#${escapeXml(snap.clipId)}-mapscale)"/>` +
+            `<text class="mc-map-scale-label" x="${num(bx)}" y="${num(by - 2)}" text-anchor="start" ${lbl}>${escapeXml(formatNumber(ms.min))}</text>` +
+            `<text class="mc-map-scale-label" x="${num(bx + 80)}" y="${num(by - 2)}" text-anchor="end" ${lbl}>${escapeXml(formatNumber(ms.max))}</text>` +
+            `</g>`);
+    }
+    return out.join("");
+}
+/** 독립 SVG 문서 — toSVGString / PNG 변환의 소스 */
+export function svgString(snap) {
+    return (`<svg xmlns="http://www.w3.org/2000/svg" width="${snap.width}" height="${snap.height}" ` +
+        `viewBox="0 0 ${snap.width} ${snap.height}" font-family="system-ui, sans-serif" font-size="11">` +
+        `<rect width="100%" height="100%" fill="${snap.theme === "dark" ? "#0f172a" : "#ffffff"}"/>` +
+        svgInner(snap, { export: true }) +
+        `</svg>`);
+}
+//# sourceMappingURL=svg.js.map