hwpkit-dev 0.0.2 → 0.0.3

package/src/encoders/hwpx/HwpxEncoder.ts

@@ -1,4 +1,13 @@
-import type { Encoder } from "../../contract/encoder";
+/**
+ * HwpxEncoder — DocRoot → HWPX (ZIP + XML)
+ *
+ * ANYTOHWP에서 영감받은 개선 사항:
+ *  1. LangFontBank  — 7개 언어 그룹 독립 폰트 레지스트리 (HANGUL/LATIN/HANJA/…)
+ *  2. BorderFillBank — 정확한 ID 관리 (하드코딩 "1" 제거)
+ *  3. readPixelDims  — PNG/JPEG 바이너리 헤더에서 실제 픽셀 치수 추출
+ *  4. 두 패스 구조   — Pre-scan(등록) → Encode(생성)
+ */
+
 import type {
   DocRoot,
   ParaNode,
@@ -8,9 +17,12 @@ import type {
   ImgNode,
   SheetNode,
   CellNode,
+  LinkNode,
 } from "../../model/doc-tree";
 import type { Outcome } from "../../contract/result";
+import { BaseEncoder } from "../../core/BaseEncoder";
 import type {
+  DocMeta,
   PageDims,
   TextProps,
   ParaProps,
@@ -23,8 +35,9 @@ import { Metric, safeFontToKr } from "../../safety/StyleBridge";
 import { ArchiveKit } from "../../toolkit/ArchiveKit";
 import { TextKit } from "../../toolkit/TextKit";
 import { registry } from "../../pipeline/registry";
+import { HWPX_MIME_TYPE } from "./constants";
 
-// ─── All HWPX namespaces ────────────────────────────────────
+// ─── HWPX 네임스페이스 ──────────────────────────────────────
 const NS = [
   'xmlns:ha="http://www.hancom.co.kr/hwpml/2011/app"',
   'xmlns:hp="http://www.hancom.co.kr/hwpml/2011/paragraph"',
@@ -36,77 +49,360 @@ const NS = [
   'xmlns:hm="http://www.hancom.co.kr/hwpml/2011/master-page"',
   'xmlns:hpf="http://www.hancom.co.kr/schema/2011/hpf"',
   'xmlns:dc="http://purl.org/dc/elements/1.1/"',
-  'xmlns:opf="http://www.idpf.org/2007/opf/"',
+  'xmlns:opf="http://www.idpf.org/2007/opf"',
   'xmlns:ooxmlchart="http://www.hancom.co.kr/hwpml/2016/ooxmlchart"',
-  'xmlns:hwpunitchar="http://www.hancom.co.kr/hwpml/2016/HwpUnitChar"',
   'xmlns:epub="http://www.idpf.org/2007/ops"',
   'xmlns:config="urn:oasis:names:tc:opendocument:xmlns:config:1.0"',
 ].join(" ");
 
-// ─── Registries for IDRef system ────────────────────────────
+// ─── LinesegArray Flags 상수 (HWPX 스펙) ─────────────────
+// 첫 번째 lineseg: 0x160000 = 1441792 (시작 줄, 고정 위치)
+// 이후 lineseg: 0x60000 = 393216 (일반 줄)
+const LINESEG_FLAGS_FIRST = 0x160000; // 1441792 - 첫 줄 (시작, 고정)
+const LINESEG_FLAGS_OTHER = 0x60000;  // 393216 - 이후 줄
+
+// ─── ANYTOHWP 영감: 언어별 폰트 레지스트리 ─────────────────
+// 7개 언어 그룹을 독립적으로 관리 — charPr fontRef의 정확한 ID 생성
+const LANG_GROUPS = [
+  "HANGUL",
+  "LATIN",
+  "HANJA",
+  "JAPANESE",
+  "OTHER",
+  "SYMBOL",
+  "USER",
+] as const;
+type LangGroup = (typeof LANG_GROUPS)[number];
+
+class LangFontBank {
+  // 언어 그룹별 독립 폰트 맵: face → localId (0-based)
+  private maps = new Map<LangGroup, Map<string, number>>(
+    LANG_GROUPS.map((g) => [g, new Map<string, number>()]),
+  );
+
+  constructor() {
+    // ANYTOHWP 기본값: 모든 그룹에 한컴 기본 폰트 등록 (id=0)
+    this.registerAll("함초롬바탕");
+  }
+
+  /** 모든 언어 그룹에 동일 폰트 등록 */
+  registerAll(face: string): void {
+    for (const g of LANG_GROUPS) {
+      const m = this.maps.get(g)!;
+      if (!m.has(face)) m.set(face, m.size);
+    }
+  }
+
+  /** 특정 언어 그룹에 폰트 등록, 이미 있으면 기존 ID 반환 */
+  register(lang: LangGroup, face: string): number {
+    const m = this.maps.get(lang)!;
+    if (m.has(face)) return m.get(face)!;
+    const id = m.size;
+    m.set(face, id);
+    return id;
+  }
+
+  /** 폰트 이름 → 한글 폰트 여부 판별 (ANYTOHWP 방식) */
+  private isKorean(face: string): boolean {
+    return (
+      /[\uAC00-\uD7A3\u3131-\u318E]/.test(face) ||
+      ["맑은", "나눔", "굴림", "돋움", "바탕", "함초롬", "한컴", "HY"].some(
+        (k) => face.includes(k),
+      )
+    );
+  }
+
+  /** TextProps.font 문자열에서 적절한 HANGUL/LATIN 그룹에 등록 */
+  registerFont(rawFace: string): { hangulId: number; latinId: number } {
+    const face = safeFontToKr(rawFace) || "함초롬바탕";
+    const isKor = this.isKorean(face);
+    // 한글 폰트: HANGUL/HANJA/JAPANESE/OTHER/SYMBOL/USER에 등록
+    // 라틴 폰트: LATIN에 등록, 나머지는 기본값(0) 유지
+    const hangulId = this.register("HANGUL", isKor ? face : "함초롬바탕");
+    const latinId = this.register("LATIN", isKor ? "함초롬바탕" : face);
+    for (const g of [
+      "HANJA",
+      "JAPANESE",
+      "OTHER",
+      "SYMBOL",
+      "USER",
+    ] as LangGroup[]) {
+      this.register(g, isKor ? face : "함초롬바탕");
+    }
+    return { hangulId, latinId };
+  }
+
+  /** 언어 그룹별 폰트 목록 반환 */
+  getFaces(lang: LangGroup): string[] {
+    return [...this.maps.get(lang)!.keys()];
+  }
+
+  getId(lang: LangGroup, face: string): number {
+    return this.maps.get(lang)!.get(face) ?? 0;
+  }
+
+  /** hh:fontfaces XML 생성 */
+  toXml(): string {
+    let xml = `<hh:fontfaces itemCnt="${LANG_GROUPS.length}">`;
+    for (const lang of LANG_GROUPS) {
+      const faces = this.getFaces(lang);
+      xml += `<hh:fontface lang="${lang}" fontCnt="${faces.length}">`;
+      faces.forEach((face, i) => {
+        xml +=
+          `<hh:font id="${i}" face="${esc(face)}" type="TTF" isEmbedded="0">` +
+          `<hh:typeInfo familyType="FCAT_UNKNOWN" weight="0" proportion="0" contrast="0" strokeVariation="0" armStyle="0" letterform="0" midline="252" xHeight="255"/>` +
+          `</hh:font>`;
+      });
+      xml += `</hh:fontface>`;
+    }
+    return xml + `</hh:fontfaces>`;
+  }
+}
+
+// ─── ANYTOHWP 영감: BorderFill 레지스트리 ───────────────────
+// 하드코딩 "1" 제거 — 모든 셀/표의 실제 테두리를 추적
+
+const KIND_MAP: Record<string, string> = {
+  solid: "SOLID",
+  dash: "DASH",
+  dot: "DOT",
+  double: "DOUBLE",
+  none: "NONE",
+  dash_dot: "DASH_DOT",
+  dash_dot_dot: "DASH_DOT_DOT",
+};
+
+class BorderFillBank {
+  private fills: { id: number; xml: string }[] = [];
+  private keyMap = new Map<string, number>();
+
+  constructor() {
+    // id=1: 기본 (테두리 없음) — ANYTOHWP의 기본 초기화 방식
+    this._addXml(
+      this._buildXml(undefined, undefined, undefined, undefined, undefined),
+    );
+    // id=2: 표 기본 테두리 (solid 0.5pt black)
+    const defS: Stroke = { kind: "solid", pt: 0.5, color: "000000" };
+    this._addXml(this._buildXml(defS, defS, defS, defS, undefined));
+  }
+
+  private _strokeXml(tag: string, s?: Stroke): string {
+    const type =
+      s && s.kind !== "none" ? (KIND_MAP[s.kind] ?? "SOLID") : "NONE";
+    const w =
+      s && s.kind !== "none" ? `${(s.pt * 0.3528).toFixed(2)} mm` : "0.12 mm";
+    const c = s
+      ? s.color.startsWith("#")
+        ? s.color
+        : `#${s.color}`
+      : "#000000";
+    return `<hh:${tag} type="${type}" width="${w}" color="${c}"/>`;
+  }
+
+  private _buildXml(
+    top?: Stroke,
+    right?: Stroke,
+    bottom?: Stroke,
+    left?: Stroke,
+    bg?: string,
+  ): string {
+    const fill = bg
+      ? `<hc:fillBrush><hc:winBrush faceColor="${bg.startsWith("#") ? bg : "#" + bg}" hatchColor="none" alpha="0"/></hc:fillBrush>`
+      : "";
+    return (
+      `<hh:borderFill id="__ID__" threeD="0" shadow="0" centerLine="NONE" breakCellSeparateLine="0">` +
+      `<hh:slash type="NONE" Crooked="0" isCounter="0"/>` +
+      `<hh:backSlash type="NONE" Crooked="0" isCounter="0"/>` +
+      this._strokeXml("leftBorder", left) +
+      this._strokeXml("rightBorder", right) +
+      this._strokeXml("topBorder", top) +
+      this._strokeXml("bottomBorder", bottom) +
+      `<hh:diagonal type="NONE" width="0.12 mm" color="#000000"/>` +
+      fill +
+      `</hh:borderFill>`
+    );
+  }
+
+  private _addXml(xml: string): number {
+    const id = this.fills.length + 1;
+    this.fills.push({ id, xml: xml.replace("__ID__", String(id)) });
+    return id;
+  }
+
+  private _key(
+    top?: Stroke,
+    right?: Stroke,
+    bottom?: Stroke,
+    left?: Stroke,
+    bg?: string,
+  ): string {
+    const sk = (s?: Stroke) =>
+      s ? `${s.kind}:${s.pt.toFixed(2)}:${s.color}` : "none";
+    return `${sk(top)}|${sk(right)}|${sk(bottom)}|${sk(left)}|${bg ?? ""}`;
+  }
+
+  /** 균일 테두리 등록 */
+  addUniform(s?: Stroke, bg?: string): number {
+    const key = this._key(s, s, s, s, bg);
+    if (this.keyMap.has(key)) return this.keyMap.get(key)!;
+    const id = this._addXml(this._buildXml(s, s, s, s, bg));
+    this.keyMap.set(key, id);
+    return id;
+  }
+
+  /** 방향별 테두리 등록 */
+  addPerSide(
+    top?: Stroke,
+    right?: Stroke,
+    bottom?: Stroke,
+    left?: Stroke,
+    bg?: string,
+  ): number {
+    const key = this._key(top, right, bottom, left, bg);
+    if (this.keyMap.has(key)) return this.keyMap.get(key)!;
+    const id = this._addXml(this._buildXml(top, right, bottom, left, bg));
+    this.keyMap.set(key, id);
+    return id;
+  }
+
+  /** CellProps에서 적절한 borderFill ID 계산 (하드코딩 "1" 완전 제거) */
+  addFromCellProps(cp: CellProps, defStroke?: Stroke): number {
+    const d = defStroke ?? DEFAULT_STROKE;
+    const top = cp.top ?? d;
+    const right = cp.right ?? d;
+    const bottom = cp.bot ?? d;
+    const left = cp.left ?? d;
+    const bg = cp.bg;
+    const uniform =
+      top.kind === right.kind &&
+      top.kind === bottom.kind &&
+      top.kind === left.kind &&
+      top.pt === right.pt &&
+      top.pt === bottom.pt &&
+      top.pt === left.pt &&
+      top.color === right.color &&
+      top.color === bottom.color &&
+      top.color === left.color;
+    return uniform
+      ? this.addUniform(top, bg)
+      : this.addPerSide(top, right, bottom, left, bg);
+  }
+
+  toXml(): string {
+    return `<hh:borderFills itemCnt="${this.fills.length}">${this.fills.map((f) => f.xml).join("")}</hh:borderFills>`;
+  }
+}
+
+// ─── ANYTOHWP 영감: PNG/JPEG 바이너리 헤더에서 픽셀 치수 추출
+function readPixelDims(
+  b64: string,
+  mime: string,
+): { w: number; h: number } | null {
+  try {
+    const raw = TextKit.base64Decode(b64);
+    const view = new DataView(raw.buffer, raw.byteOffset, raw.byteLength);
+
+    if (mime.includes("png")) {
+      // PNG: 시그니처 8바이트 + IHDR 청크 길이(4) + 타입(4) + 너비(4) + 높이(4)
+      if (
+        raw.length >= 24 &&
+        view.getUint32(0) === 0x89504e47 &&
+        view.getUint32(4) === 0x0d0a1a0a
+      ) {
+        return { w: view.getUint32(16), h: view.getUint32(20) };
+      }
+    } else if (mime.includes("jpeg") || mime.includes("jpg")) {
+      // JPEG: SOI(FF D8) 후 SOF0(FF C0) 또는 SOF2(FF C2) 마커 탐색
+      let off = 2;
+      while (off < raw.length - 4) {
+        const marker = view.getUint16(off);
+        off += 2;
+        if (marker === 0xffc0 || marker === 0xffc2) {
+          // SOF: length(2) + precision(1) + height(2) + width(2)
+          return { w: view.getUint16(off + 5), h: view.getUint16(off + 3) };
+        }
+        if ((marker & 0xff00) !== 0xff00) break;
+        const segLen = view.getUint16(off);
+        off += segLen;
+      }
+    }
+  } catch {
+    /* 무시 */
+  }
+  return null;
+}
+
+// ─── charPr / paraPr 레지스트리 ─────────────────────────────
 
 interface CharPrDef {
   id: number;
-  height: number;
+  height: number; // HWPX height 단위 (1000 = 10pt)
   bold: boolean;
   italic: boolean;
-  underline: string;
-  strikeout: string;
-  textColor: string;
-  fontName: string;
-  fontId: number;
+  underline: string; // "NONE" | "BOTTOM"
+  strikeout: string; // "NONE" | "SOLID"
+  textColor: string; // "#RRGGBB"
+  hangulId: number; // HANGUL 그룹 폰트 ID
+  latinId: number; // LATIN 그룹 폰트 ID
   bg?: string;
 }
 
 interface ParaPrDef {
   id: number;
   align: string;
+  leftHwp: number;
+  rightHwp: number;
+  intentHwp: number;
+  prevHwp: number;
+  nextHwp: number;
+  lineSpacing: number;
   listType?: string;
   listLevel?: number;
-  intentHwp: number; // first-line indent in HWPUNIT
-  prevHwp: number; // space before paragraph in HWPUNIT
-  nextHwp: number; // space after paragraph in HWPUNIT
-  lineSpacing: number; // line spacing percentage (e.g., 160 = 160%)
 }
 
-interface BinEntry {
-  id: string;
+interface StyleEntry {
+  id: number;
   name: string;
-  data: Uint8Array;
+  engName: string;
+  paraPrIDRef: number;
+  charPrIDRef: number;
 }
 
-interface HwpxCtx {
-  charPrs: CharPrDef[];
-  charPrMap: Map<string, number>;
-  paraPrs: ParaPrDef[];
-  paraPrMap: Map<string, number>;
-  borderFills: { id: number; xml: string }[];
-  bins: BinEntry[];
-  nextBinNum: number;
-  nextElementId: number;
-  availableWidth: number; // HWPUNIT — page width minus margins
-  fonts: string[];
-  fontMap: Map<string, number>;
-  imgMap: WeakMap<ImgNode, string>; // ImgNode → binId (no mutation)
-  nextZOrder: number; // monotonically increasing z-order for images/objects
+interface BinEntry {
+  id: string; // "BIN0001"
+  name: string; // "BIN0001.png"
+  data: Uint8Array;
 }
 
 function charPrKey(p: TextProps): string {
   return `${p.b ? 1 : 0}|${p.i ? 1 : 0}|${p.u ? 1 : 0}|${p.s ? 1 : 0}|${p.pt ?? 10}|${p.color ?? "000000"}|${p.font ?? ""}|${p.bg ?? ""}`;
 }
 
+/**
+ * ParaProps 를 해시 키로 변환 (동일 포맷팅 감지용)
+ * null/undefined는 0 으로 처리하여 일관성 유지
+ */
 function paraPrKey(p: ParaProps): string {
-  return `${p.align ?? "left"}|${p.listOrd ?? ""}|${p.listLv ?? 0}|${p.indentPt ?? 0}|${p.spaceBefore ?? 0}|${p.spaceAfter ?? 0}|${p.lineHeight ?? 0}`;
+  return `${p.align ?? "left"}|${p.listOrd ?? ""}|${p.listLv ?? 0}|${p.indentPt ?? 0}|${p.firstLineIndentPt ?? 0}|${p.spaceBefore ?? 0}|${p.spaceAfter ?? 0}|${p.lineHeight ?? 0}|${p.styleId ?? ""}`;
 }
 
-function registerFont(name: string, ctx: HwpxCtx): number {
-  const n = name || "굴림체";
-  const existing = ctx.fontMap.get(n);
-  if (existing !== undefined) return existing;
-  const id = ctx.fonts.length;
-  ctx.fonts.push(n);
-  ctx.fontMap.set(n, id);
-  return id;
+// ─── 인코딩 컨텍스트 ─────────────────────────────────────────
+
+interface HwpxCtx {
+  fontBank: LangFontBank;
+  borderFillBank: BorderFillBank;
+  charPrs: CharPrDef[];
+  charPrMap: Map<string, number>;
+  paraPrs: ParaPrDef[];
+  paraPrMap: Map<string, number>;
+  bins: BinEntry[];
+  nextBinNum: number;
+  nextElementId: number;
+  availableWidth: number; // HWPUNIT
+  imgMap: WeakMap<ImgNode, string>;
+  nextZOrder: number;
+  styleIdToHwpxId: Map<string, number>;
+  hwpxStyles: StyleEntry[];
 }
 
 function registerCharPr(props: TextProps, ctx: HwpxCtx): number {
@@ -114,11 +410,11 @@ function registerCharPr(props: TextProps, ctx: HwpxCtx): number {
   const existing = ctx.charPrMap.get(key);
   if (existing !== undefined) return existing;
 
-  const fontName = safeFontToKr(props.font) || "굴림체";
-  const fontId = registerFont(fontName, ctx);
-
+  const rawFont = props.font ?? "함초롬바탕";
+  const { hangulId, latinId } = ctx.fontBank.registerFont(rawFont);
   const id = ctx.charPrs.length;
-  const def: CharPrDef = {
+
+  ctx.charPrs.push({
     id,
     height: Metric.ptToHHeight(props.pt ?? 10),
     bold: !!props.b,
@@ -126,11 +422,10 @@ function registerCharPr(props: TextProps, ctx: HwpxCtx): number {
     underline: props.u ? "BOTTOM" : "NONE",
     strikeout: props.s ? "SOLID" : "NONE",
     textColor: props.color ? `#${props.color}` : "#000000",
-    fontName,
-    fontId,
+    hangulId,
+    latinId,
     bg: props.bg,
-  };
-  ctx.charPrs.push(def);
+  });
   ctx.charPrMap.set(key, id);
   return id;
 }
@@ -144,9 +439,11 @@ function registerParaPr(props: ParaProps, ctx: HwpxCtx): number {
   const def: ParaPrDef = {
     id,
     align: (props.align ?? "left").toUpperCase(),
-    intentHwp: props.indentPt ? Metric.ptToHwp(props.indentPt) : 0,
-    prevHwp: props.spaceBefore ? Metric.ptToHwp(props.spaceBefore) : 0,
-    nextHwp: props.spaceAfter ? Metric.ptToHwp(props.spaceAfter) : 0,
+    leftHwp: Metric.ptToHwp(props.indentPt ?? 0),
+    rightHwp: Metric.ptToHwp(props.indentRightPt ?? 0),
+    intentHwp: Metric.ptToHwp(props.firstLineIndentPt ?? 0),
+    prevHwp: Metric.ptToHwp(props.spaceBefore ?? 0),
+    nextHwp: Metric.ptToHwp(props.spaceAfter ?? 0),
     lineSpacing: props.lineHeight ? Math.round(props.lineHeight * 100) : 160,
   };
   if (props.listOrd !== undefined) {
@@ -158,33 +455,7 @@ function registerParaPr(props: ParaProps, ctx: HwpxCtx): number {
   return id;
 }
 
-// ─── Pre-scan: collect all charPr/paraPr used ───────────────
-
-function scanContent(kids: ContentNode[], ctx: HwpxCtx): void {
-  for (const kid of kids) {
-    if (kid.tag === "para") scanPara(kid, ctx);
-    else if (kid.tag === "grid") scanGrid(kid, ctx);
-  }
-}
-
-function scanPara(para: ParaNode, ctx: HwpxCtx): void {
-  registerParaPr(para.props, ctx);
-  for (const kid of para.kids) {
-    if (kid.tag === "span") registerCharPr(kid.props, ctx);
-    else if (kid.tag === "img") registerImage(kid, ctx);
-  }
-}
-
-function scanGrid(grid: GridNode, ctx: HwpxCtx): void {
-  for (const row of grid.kids)
-    for (const cell of row.kids) for (const p of cell.kids) scanPara(p, ctx);
-}
-
-function scanParas(paras: ParaNode[], ctx: HwpxCtx): void {
-  for (const p of paras) scanPara(p, ctx);
-}
-
-// ─── Image handling ─────────────────────────────────────────
+// ─── 이미지 등록 ─────────────────────────────────────────────
 
 function mimeToExt(mime: string): string {
   if (mime.includes("jpeg")) return "jpg";
@@ -204,170 +475,269 @@ function registerImage(img: ImgNode, ctx: HwpxCtx): void {
   ctx.imgMap.set(img, id);
 }
 
-// ─── BorderFill ─────────────────────────────────────────────
+// ─── 스타일 등록 ─────────────────────────────────────────────
+
+const STYLE_NAME_MAP: Record<string, string> = {
+  Normal: "바탕글",
+  "Heading 1": "개요 1",
+  "Heading 2": "개요 2",
+  "Heading 3": "개요 3",
+  "Heading 4": "개요 4",
+  "Heading 5": "개요 5",
+  "Heading 6": "개요 6",
+  "Body Text": "본문",
+};
 
-function addBorderFill(
+function registerStyle(
+  styleId: string,
+  paraPrId: number,
+  charPrId: number,
   ctx: HwpxCtx,
-  stroke?: Stroke,
-  bgColor?: string,
-): number {
-  const id = ctx.borderFills.length + 1;
-  const s = stroke ?? DEFAULT_STROKE;
-  const kindMap: Record<string, string> = {
-    solid: "SOLID",
-    dash: "DASH",
-    dot: "DOT",
-    double: "DOUBLE",
-    none: "NONE",
-  };
-  const type = kindMap[s.kind] ?? "SOLID";
-  const w = `${(s.pt * 0.3528).toFixed(2)} mm`;
-  const c = s.color.startsWith("#") ? s.color : `#${s.color}`;
-
-  let fill = "";
-  if (bgColor) {
-    const bc = bgColor.startsWith("#") ? bgColor : `#${bgColor}`;
-    fill = `<hc:fillBrush><hc:winBrush faceColor="${bc}" hatchColor="none" alpha="0"/></hc:fillBrush>`;
+): void {
+  if (!styleId || ctx.styleIdToHwpxId.has(styleId)) return;
+  if (styleId === "Normal") {
+    ctx.styleIdToHwpxId.set(styleId, 0);
+    return;
   }
-
-  const xml = `<hh:borderFill id="${id}" threeD="0" shadow="0" centerLine="NONE" breakCellSeparateLine="0"><hh:slash type="NONE" Crooked="0" isCounter="0"/><hh:backSlash type="NONE" Crooked="0" isCounter="0"/><hh:leftBorder type="${type}" width="${w}" color="${c}"/><hh:rightBorder type="${type}" width="${w}" color="${c}"/><hh:topBorder type="${type}" width="${w}" color="${c}"/><hh:bottomBorder type="${type}" width="${w}" color="${c}"/><hh:diagonal type="NONE" width="0.12 mm" color="#000000"/>${fill}</hh:borderFill>`;
-  ctx.borderFills.push({ id, xml });
-  return id;
+  const hwpxId = ctx.hwpxStyles.length;
+  ctx.styleIdToHwpxId.set(styleId, hwpxId);
+  ctx.hwpxStyles.push({
+    id: hwpxId,
+    name: STYLE_NAME_MAP[styleId] ?? styleId,
+    engName: "",
+    paraPrIDRef: paraPrId,
+    charPrIDRef: charPrId,
+  });
 }
 
-function addBorderFillPerSide(
-  ctx: HwpxCtx,
-  top?: Stroke,
-  right?: Stroke,
-  bottom?: Stroke,
-  left?: Stroke,
-  bgColor?: string,
-): number {
-  const id = ctx.borderFills.length + 1;
-  const kindMap: Record<string, string> = {
-    solid: "SOLID", dash: "DASH", dot: "DOT", double: "DOUBLE", none: "NONE",
-  };
-  function sideXml(tag: string, s?: Stroke): string {
-    const type = s ? (kindMap[s.kind] ?? "SOLID") : "NONE";
-    const w = s ? `${(s.pt * 0.3528).toFixed(2)} mm` : "0.12 mm";
-    const c = s ? (s.color.startsWith("#") ? s.color : `#${s.color}`) : "#000000";
-    return `<hh:${tag} type="${type}" width="${w}" color="${c}"/>`;
+// ─── Pre-scan: 콘텐츠 순회하며 모든 ID 사전 등록 ─────────────
+
+function scanPara(para: ParaNode, ctx: HwpxCtx): void {
+  const paraPrId = registerParaPr(para.props, ctx);
+  let firstCharPrId = 0;
+  let hasFirstSpan = false;
+
+  function scanKids(kids: ParaNode["kids"]): void {
+    for (const kid of kids) {
+      if (kid.tag === "span") {
+        const cId = registerCharPr(kid.props, ctx);
+        if (!hasFirstSpan) {
+          firstCharPrId = cId;
+          hasFirstSpan = true;
+        }
+      } else if (kid.tag === "img") {
+        registerImage(kid, ctx);
+      } else if (kid.tag === "link") {
+        scanKids((kid as LinkNode).kids as ParaNode["kids"]);
+      }
+    }
   }
+  scanKids(para.kids);
+  if (para.props.styleId)
+    registerStyle(para.props.styleId, paraPrId, firstCharPrId, ctx);
+}
 
-  let fill = "";
-  if (bgColor) {
-    const bc = bgColor.startsWith("#") ? bgColor : `#${bgColor}`;
-    fill = `<hc:fillBrush><hc:winBrush faceColor="${bc}" hatchColor="none" alpha="0"/></hc:fillBrush>`;
+function scanGrid(grid: GridNode, ctx: HwpxCtx): void {
+  const defStroke = grid.props.defaultStroke ?? DEFAULT_STROKE;
+  // 표 기본 테두리 사전 등록
+  ctx.borderFillBank.addUniform(defStroke);
+  for (const row of grid.kids) {
+    for (const cell of row.kids) {
+      ctx.borderFillBank.addFromCellProps(cell.props, defStroke);
+      for (const p of cell.kids) {
+        if (p.tag === 'grid') scanGrid(p, ctx);
+        else scanPara(p, ctx);
+      }
+    }
   }
+}
 
-  const xml = `<hh:borderFill id="${id}" threeD="0" shadow="0" centerLine="NONE" breakCellSeparateLine="0"><hh:slash type="NONE" Crooked="0" isCounter="0"/><hh:backSlash type="NONE" Crooked="0" isCounter="0"/>${sideXml("leftBorder", left)}${sideXml("rightBorder", right)}${sideXml("topBorder", top)}${sideXml("bottomBorder", bottom)}<hh:diagonal type="NONE" width="0.12 mm" color="#000000"/>${fill}</hh:borderFill>`;
-  ctx.borderFills.push({ id, xml });
-  return id;
+function scanContent(kids: ContentNode[], ctx: HwpxCtx): void {
+  for (const kid of kids) {
+    if (kid.tag === "para") scanPara(kid, ctx);
+    else if (kid.tag === "grid") scanGrid(kid, ctx);
+  }
 }
 
-// ─── Encoder class ──────────────────────────────────────────
+// ─── Encoder 클래스 ──────────────────────────────────────────
 
-export class HwpxEncoder implements Encoder {
-  readonly format = "hwpx";
+export class HwpxEncoder extends BaseEncoder {
+  protected getFormat(): string { return "hwpx"; }
+  protected getAliases(): string[] { return [HWPX_MIME_TYPE, "application/hwp+zip"]; }
 
   async encode(doc: DocRoot): Promise<Outcome<Uint8Array>> {
     try {
       const sheet = doc.kids[0];
       const dims = normalizeDims(sheet?.dims ?? A4);
 
-      // Available width = page width - left margin - right margin (in HWPUNIT)
-      const availableWidth =
+      const safeML = dims.ml > 0 ? dims.ml : 70.87;
+      const safeMR = dims.mr > 0 ? dims.mr : 70.87;
+      const availableWidth = Math.round(
         Metric.ptToHwp(dims.wPt) -
-        Metric.ptToHwp(dims.ml) -
-        Metric.ptToHwp(dims.mr);
+          Metric.ptToHwp(safeML) -
+          Metric.ptToHwp(safeMR),
+      );
 
+      // 컨텍스트 초기화
       const ctx: HwpxCtx = {
+        fontBank: new LangFontBank(), // ANYTOHWP 방식 언어별 폰트
+        borderFillBank: new BorderFillBank(), // 하드코딩 없는 테두리 관리
         charPrs: [],
         charPrMap: new Map(),
         paraPrs: [],
         paraPrMap: new Map(),
-        borderFills: [],
         bins: [],
         nextBinNum: 1,
         nextElementId: 10000,
         availableWidth,
-        fonts: [],
-        fontMap: new Map(),
         imgMap: new WeakMap(),
         nextZOrder: 0,
+        styleIdToHwpxId: new Map(),
+        hwpxStyles: [],
       };
 
-      // Default borderFill (id=1, no border)
-      addBorderFill(ctx, { kind: "none", pt: 0.1, color: "000000" });
-      // Table border borderFill (id=2)
-      addBorderFill(ctx, DEFAULT_STROKE);
-      // Default no-border for text areas (id=3)
-      addBorderFill(ctx, { kind: "none", pt: 0.1, color: "000000" });
-
-      // Register default charPr (id=0) and paraPr (id=0)
+      // id=0 기본 charPr/paraPr 등록
       registerCharPr({}, ctx);
       registerParaPr({}, ctx);
 
-      // Pre-scan all content to collect charPr/paraPr/images
+      // 바탕글(Normal) 스타일 id=0으로 고정
+      ctx.hwpxStyles.push({
+        id: 0,
+        name: "바탕글",
+        engName: "Normal",
+        paraPrIDRef: 0,
+        charPrIDRef: 0,
+      });
+      ctx.styleIdToHwpxId.set("Normal", 0);
+
+      // 패스 1: Pre-scan — 모든 charPr/paraPr/이미지/테두리 사전 등록
       scanContent(sheet?.kids ?? [], ctx);
-      if (sheet?.header) scanParas(sheet.header, ctx);
-      if (sheet?.footer) scanParas(sheet.footer, ctx);
+      if (sheet?.headers?.default) for (const p of sheet.headers.default) scanPara(p, ctx);
+      if (sheet?.footers?.default) for (const p of sheet.footers.default) scanPara(p, ctx);
 
-      // Extract plain text preview from document
+      // 패스 2: Encode — section 먼저 (borderFill 동적 등록 완료 후 header 생성)
+      const sectionData = this.stringToBytes(buildSectionXml(sheet, dims, ctx));
+      const headerData = this.stringToBytes(buildHeaderXml(dims, doc.meta, ctx));
       const previewText = extractPreviewText(sheet);
 
-      // IMPORTANT: Generate section XML FIRST so that borderFills created
-      // during table encoding are registered in ctx before headerXml runs.
-      const sectionData = TextKit.encode(sectionXml(sheet, dims, ctx));
-      const headerData = TextKit.encode(headerXml(dims, doc.meta, ctx));
-
-      const entries: { name: string; data: Uint8Array }[] = [
-        { name: "mimetype", data: TextKit.encode("application/hwp+zip") },
-        { name: "version.xml", data: TextKit.encode(VERSION_XML) },
-        { name: "Contents/header.xml", data: headerData },
-        { name: "Contents/section0.xml", data: sectionData },
-        { name: "Preview/PrvText.txt", data: TextKit.encode(previewText) },
-        { name: "settings.xml", data: TextKit.encode(SETTINGS_XML) },
-        { name: "META-INF/container.rdf", data: TextKit.encode(CONTAINER_RDF) },
+      const entries: { name: string; data: Uint8Array; mime: string; compression?: 'STORE' | 'DEFLATE' }[] = [
+        {
+          name: "mimetype",
+          data: new TextEncoder().encode(HWPX_MIME_TYPE),
+          compression: "STORE",
+          mime: "",
+        },
+        {
+          name: "version.xml",
+          data: this.stringToBytes(VERSION_XML),
+          mime: "application/xml",
+        },
+        {
+          name: "META-INF/container.xml",
+          data: this.stringToBytes(CONTAINER_XML),
+          mime: "application/xml",
+        },
+        {
+          name: "META-INF/container.rdf",
+          data: this.stringToBytes(CONTAINER_RDF),
+          mime: "application/rdf+xml",
+        },
         {
           name: "Contents/content.hpf",
-          data: TextKit.encode(contentHpf(ctx, doc.meta)),
+          data: this.stringToBytes(buildContentHpf(ctx, doc.meta)),
+          mime: "application/hwpml-package+xml",
+        },
+        {
+          name: "Contents/header.xml",
+          data: headerData,
+          mime: "application/xml",
+        },
+        {
+          name: "Contents/section0.xml",
+          data: sectionData,
+          mime: "application/xml",
+        },
+        {
+          name: "Preview/PrvText.txt",
+          data: this.stringToBytes(previewText),
+          mime: "text/plain",
+        },
+        {
+          name: "settings.xml",
+          data: this.stringToBytes(buildSettingsXml()),
+          mime: "application/xml",
         },
-        { name: "META-INF/container.xml", data: TextKit.encode(CONTAINER_XML) },
-        { name: "META-INF/manifest.xml", data: TextKit.encode(MANIFEST_XML) },
       ];
 
       for (const bin of ctx.bins) {
-        entries.push({ name: `BinData/${bin.name}`, data: bin.data });
+        const ext = bin.name.split(".").pop()?.toLowerCase() ?? "png";
+        const ct =
+          ext === "png"
+            ? "image/png"
+            : ext === "jpg" || ext === "jpeg"
+              ? "image/jpeg"
+              : ext === "gif"
+                ? "image/gif"
+                : "image/bmp";
+        entries.push({ name: `BinData/${bin.name}`, data: bin.data, mime: ct });
       }
 
-      return succeed(await ArchiveKit.zip(entries));
+      return succeed(await this.zip(entries));
     } catch (e: any) {
-      return fail(`HWPX encode error: ${e?.message ?? String(e)}`);
+      return fail(`HWPX 인코딩 오류: ${e?.message ?? String(e)}`);
     }
   }
 }
 
-// ─── Constants ──────────────────────────────────────────────
-
-const VERSION_XML = `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?><hv:HCFVersion xmlns:hv="http://www.hancom.co.kr/hwpml/2011/version" tagetApplication="WORDPROCESSOR" major="5" minor="1" micro="0" buildNumber="1" os="1" xmlVersion="1.4" application="Hancom Office Hangul" appVersion="11, 0, 0, 0"/>`;
-
-const CONTAINER_XML = `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?><ocf:container xmlns:ocf="urn:oasis:names:tc:opendocument:xmlns:container" xmlns:hpf="http://www.hancom.co.kr/schema/2011/hpf"><ocf:rootfiles><ocf:rootfile full-path="Contents/content.hpf" media-type="application/hwpml-package+xml"/><ocf:rootfile full-path="Preview/PrvText.txt" media-type="text/plain"/><ocf:rootfile full-path="META-INF/container.rdf" media-type="application/rdf+xml"/></ocf:rootfiles></ocf:container>`;
-
-const CONTAINER_RDF = `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><rdf:Description rdf:about=""><ns0:hasPart xmlns:ns0="http://www.hancom.co.kr/hwpml/2016/meta/pkg#" rdf:resource="Contents/header.xml"/></rdf:Description><rdf:Description rdf:about="Contents/header.xml"><rdf:type rdf:resource="http://www.hancom.co.kr/hwpml/2016/meta/pkg#HeaderFile"/></rdf:Description><rdf:Description rdf:about=""><ns0:hasPart xmlns:ns0="http://www.hancom.co.kr/hwpml/2016/meta/pkg#" rdf:resource="Contents/section0.xml"/></rdf:Description><rdf:Description rdf:about="Contents/section0.xml"><rdf:type rdf:resource="http://www.hancom.co.kr/hwpml/2016/meta/pkg#SectionFile"/></rdf:Description><rdf:Description rdf:about=""><rdf:type rdf:resource="http://www.hancom.co.kr/hwpml/2016/meta/pkg#Document"/></rdf:Description></rdf:RDF>`;
-
-const MANIFEST_XML = `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?><odf:manifest xmlns:odf="urn:oasis:names:tc:opendocument:xmlns:manifest:1.0"/>`;
-
-const SETTINGS_XML = `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?><ha:HWPApplicationSetting xmlns:ha="http://www.hancom.co.kr/hwpml/2011/app" xmlns:config="urn:oasis:names:tc:opendocument:xmlns:config:1.0"><ha:CaretPosition listIDRef="0" paraIDRef="0" pos="0"/><config:config-item-set name="PrintInfo"><config:config-item name="PrintMethod" type="short">0</config:config-item><config:config-item name="ZoomX" type="short">100</config:config-item><config:config-item name="ZoomY" type="short">100</config:config-item></config:config-item-set></ha:HWPApplicationSetting>`;
-
-function contentHpf(ctx: HwpxCtx, meta?: any): string {
+// ─── 상수 XML ────────────────────────────────────────────────
+
+const VERSION_XML =
+  `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>` +
+  `<hv:HCFVersion xmlns:hv="http://www.owpml.org/owpml/2024/version" ` +
+  `targetApplication="WORDPROCESSING" major="5" minor="1" micro="0" buildNumber="1" ` +
+  `os="1" xmlVersion="1.4" application="Hancom Office Hangul" appVersion="11, 0, 0, 0"/>`;
+
+const CONTAINER_XML =
+  `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>` +
+  `<ocf:container xmlns:ocf="urn:oasis:names:tc:opendocument:xmlns:container" ` +
+  `xmlns:hpf="http://www.hancom.co.kr/schema/2011/hpf">` +
+  `<ocf:rootfiles>` +
+  `<ocf:rootfile full-path="Contents/content.hpf" media-type="application/hwpml-package+xml"/>` +
+  `<ocf:rootfile full-path="Preview/PrvText.txt" media-type="text/plain"/>` +
+  `<ocf:rootfile full-path="META-INF/container.rdf" media-type="application/rdf+xml"/>` +
+  `</ocf:rootfiles></ocf:container>`;
+
+const CONTAINER_RDF =
+  `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>` +
+  `<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">` +
+  `<rdf:Description rdf:about=""><ns0:hasPart xmlns:ns0="http://www.hancom.co.kr/hwpml/2016/meta/pkg#" rdf:resource="Contents/header.xml"/></rdf:Description>` +
+  `<rdf:Description rdf:about="Contents/header.xml"><rdf:type rdf:resource="http://www.hancom.co.kr/hwpml/2016/meta/pkg#HeaderFile"/></rdf:Description>` +
+  `<rdf:Description rdf:about=""><ns0:hasPart xmlns:ns0="http://www.hancom.co.kr/hwpml/2016/meta/pkg#" rdf:resource="Contents/section0.xml"/></rdf:Description>` +
+  `<rdf:Description rdf:about="Contents/section0.xml"><rdf:type rdf:resource="http://www.hancom.co.kr/hwpml/2016/meta/pkg#SectionFile"/></rdf:Description>` +
+  `<rdf:Description rdf:about=""><rdf:type rdf:resource="http://www.hancom.co.kr/hwpml/2016/meta/pkg#Document"/></rdf:Description>` +
+  `</rdf:RDF>`;
+
+const MANIFEST_XML =
+  `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>` +
+  `<odf:manifest xmlns:odf="urn:oasis:names:tc:opendocument:xmlns:manifest:1.0"/>`;
+
+// ─── content.hpf ─────────────────────────────────────────────
+
+function buildContentHpf(ctx: HwpxCtx, meta?: DocMeta): string {
   const title = esc(meta?.title ?? "");
-  const now = new Date().toISOString().replace(/\.\d{3}Z$/, "Z");
+  const creator = esc(meta?.author ?? "text");
+  const subject = esc(meta?.subject ?? "text");
+  const desc = esc(meta?.desc ?? "text");
+  const keyword = esc(meta?.keywords ?? "text");
+  const created =
+    meta?.created ?? new Date().toISOString().replace(/\.\d{3}Z$/, "Z");
+  const modified = meta?.modified ?? created;
 
   let items =
-    `<opf:item id="header" href="Contents/header.xml" media-type="application/xml"/>` +
+    `<opf:item id="header"   href="Contents/header.xml"   media-type="application/xml"/>` +
     `<opf:item id="section0" href="Contents/section0.xml" media-type="application/xml"/>` +
-    `<opf:item id="settings" href="settings.xml" media-type="application/xml"/>`;
+    `<opf:item id="settings" href="settings.xml"          media-type="application/xml"/>`;
+
   for (const bin of ctx.bins) {
     const ext = bin.name.split(".").pop()?.toLowerCase() ?? "png";
     const ct =
@@ -380,352 +750,923 @@ function contentHpf(ctx: HwpxCtx, meta?: any): string {
             : "image/bmp";
     items += `<opf:item id="${bin.id}" href="BinData/${bin.name}" media-type="${ct}" isEmbeded="1"/>`;
   }
-  return `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?><opf:package ${NS} version="" unique-identifier="" id=""><opf:metadata><opf:title>${title}</opf:title><opf:language>ko</opf:language><opf:meta name="creator" content="text"/><opf:meta name="subject" content="text"/><opf:meta name="description" content="text"/><opf:meta name="CreatedDate" content="text">${now}</opf:meta><opf:meta name="ModifiedDate" content="text">${now}</opf:meta><opf:meta name="keyword" content="text"/></opf:metadata><opf:manifest>${items}</opf:manifest><opf:spine><opf:itemref idref="header" linear="yes"/><opf:itemref idref="section0" linear="yes"/></opf:spine></opf:package>`;
-}
-
-// ─── header.xml ─────────────────────────────────────────────
-
-function headerXml(dims: PageDims, meta: any, ctx: HwpxCtx): string {
-  // Font face definitions — register all unique fonts per language group
-  const fontCount = ctx.fonts.length || 1;
-  const langs = [
-    "HANGUL",
-    "LATIN",
-    "HANJA",
-    "JAPANESE",
-    "OTHER",
-    "SYMBOL",
-    "USER",
-  ];
-  let fontFaces = `<hh:fontfaces itemCnt="${langs.length}">`;
-  for (const lang of langs) {
-    fontFaces += `<hh:fontface lang="${lang}" fontCnt="${fontCount}">`;
-    for (let fi = 0; fi < ctx.fonts.length; fi++) {
-      fontFaces += `<hh:font id="${fi}" face="${esc(ctx.fonts[fi])}" type="TTF" isEmbedded="0"><hh:typeInfo familyType="FCAT_GOTHIC" weight="6" proportion="0" contrast="0" strokeVariation="1" armStyle="1" letterform="1" midline="1" xHeight="1"/></hh:font>`;
-    }
-    if (ctx.fonts.length === 0) {
-      fontFaces += `<hh:font id="0" face="굴림체" type="TTF" isEmbedded="0"><hh:typeInfo familyType="FCAT_GOTHIC" weight="6" proportion="0" contrast="0" strokeVariation="1" armStyle="1" letterform="1" midline="1" xHeight="1"/></hh:font>`;
-    }
-    fontFaces += `</hh:fontface>`;
-  }
-  fontFaces += `</hh:fontfaces>`;
 
-  // CharPr definitions
+  return (
+    `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>` +
+    `<opf:package ${NS} version="" unique-identifier="" id="">` +
+    `<opf:metadata>` +
+    `<opf:title>${title}</opf:title><opf:language>ko</opf:language>` +
+    `<opf:meta name="creator"      content="text">${creator}</opf:meta>` +
+    `<opf:meta name="subject"      content="text">${subject}</opf:meta>` +
+    `<opf:meta name="description"  content="text">${desc}</opf:meta>` +
+    `<opf:meta name="CreatedDate"  content="text">${created}</opf:meta>` +
+    `<opf:meta name="ModifiedDate" content="text">${modified}</opf:meta>` +
+    `<opf:meta name="keyword"      content="text">${keyword}</opf:meta>` +
+    `<opf:meta name="trackchageConfig" content="text">0</opf:meta>` +
+    `</opf:metadata>` +
+    `<opf:manifest>${items}</opf:manifest>` +
+    `<opf:spine><opf:itemref idref="header"/><opf:itemref idref="section0"/></opf:spine>` +
+    `</opf:package>`
+  );
+}
+
+// ─── settings.xml ────────────────────────────────────────────
+
+function buildSettingsXml(): string {
+  return (
+    `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>` +
+    `<ha:HWPApplicationSetting xmlns:ha="http://www.hancom.co.kr/hwpml/2011/app" ` +
+    `xmlns:config="urn:oasis:names:tc:opendocument:xmlns:config:1.0">` +
+    `<ha:CaretPosition listIDRef="0" paraIDRef="0" pos="0"/>` +
+    `<config:config-item-set name="PrintInfo">` +
+    `<config:config-item name="PrintAutoFootNote" type="boolean">false</config:config-item>` +
+    `<config:config-item name="PrintAutoHeadNote" type="boolean">false</config:config-item>` +
+    `<config:config-item name="PrintMethod" type="short">4</config:config-item>` +
+    `<config:config-item name="OverlapSize" type="short">0</config:config-item>` +
+    `<config:config-item name="PrintCropMark" type="short">0</config:config-item>` +
+    `<config:config-item name="BinderHoleType" type="short">0</config:config-item>` +
+    `<config:config-item name="ZoomX" type="short">100</config:config-item>` +
+    `<config:config-item name="ZoomY" type="short">100</config:config-item>` +
+    `</config:config-item-set>` +
+    `</ha:HWPApplicationSetting>`
+  );
+}
+
+function buildNumberingsXml(): string {
+  return (
+    `<hh:numberings itemCnt="1">` +
+    `<hh:numbering id="1" start="1">` +
+    `<hh:paraHead start="1" level="1" align="LEFT" ` +
+    `useInstWidth="1" autoIndent="0" widthAdjust="0" ` +
+    `textOffsetType="PERCENT" textOffset="50" ` +
+    `numFormat="BULLET" charPrIDRef="0" checkable="0"/>` +
+    `</hh:numbering></hh:numberings>`
+  );
+}
+
+function buildBulletsXml(): string {
+  return (
+    `<hh:bullets itemCnt="1">` +
+    `<hh:bullet id="1" charPrIDRef="0" start="1" numFormat="BULLET">` +
+    `<hh:paraHead level="1" numChar="&#x2022;"/>` +
+    `<hh:paraHead level="2" numChar="&#x2022;"/>` +
+    `<hh:paraHead level="3" numChar="&#x2022;"/>` +
+    `</hh:bullet></hh:bullets>`
+  );
+}
+
+// ─── header.xml ──────────────────────────────────────────────
+
+function buildHeaderXml(dims: PageDims, meta: DocMeta, ctx: HwpxCtx): string {
+  // 언어별 폰트 (LangFontBank → XML)
+  const fontFacesXml = ctx.fontBank.toXml();
+
+  // charPr 목록 — 언어별 폰트 ID를 fontRef에 반영 (ANYTOHWP 핵심 개선)
   let charPrXml = "";
   for (const cp of ctx.charPrs) {
     const bold = cp.bold ? "<hh:bold/>" : "";
     const italic = cp.italic ? "<hh:italic/>" : "";
-    const fid = cp.fontId ?? 0;
-    charPrXml += `<hh:charPr id="${cp.id}" height="${cp.height}" textColor="${cp.textColor}" shadeColor="none" useFontSpace="0" useKerning="0" symMark="NONE" borderFillIDRef="3"><hh:fontRef hangul="${fid}" latin="${fid}" hanja="${fid}" japanese="${fid}" other="${fid}" symbol="${fid}" user="${fid}"/><hh:ratio hangul="100" latin="100" hanja="100" japanese="100" other="100" symbol="100" user="100"/><hh:spacing hangul="0" latin="0" hanja="0" japanese="0" other="0" symbol="0" user="0"/><hh:relSz hangul="100" latin="100" hanja="100" japanese="100" other="100" symbol="100" user="100"/><hh:offset hangul="0" latin="0" hanja="0" japanese="0" other="0" symbol="0" user="0"/>${bold}${italic}<hh:underline type="${cp.underline}" shape="SOLID" color="#000000"/><hh:strikeout shape="${cp.strikeout}" color="#000000"/><hh:outline type="NONE"/><hh:shadow type="NONE" color="#C0C0C0" offsetX="10" offsetY="10"/></hh:charPr>`;
+    const hid = cp.hangulId;
+    const lid = cp.latinId;
+    const shadeColor = cp.bg ? (cp.bg.startsWith("#") ? cp.bg : `#${cp.bg}`) : "none";
+    charPrXml +=
+      `<hh:charPr id="${cp.id}" height="${cp.height}" textColor="${cp.textColor}" ` +
+      `shadeColor="${shadeColor}" useFontSpace="0" useKerning="0" symMark="NONE" borderFillIDRef="1">` +
+      `<hh:fontRef hangul="${hid}" latin="${lid}" hanja="${hid}" japanese="${hid}" other="${lid}" symbol="${lid}" user="${lid}"/>` +
+      `<hh:ratio hangul="100" latin="100" hanja="100" japanese="100" other="100" symbol="100" user="100"/>` +
+      `<hh:spacing hangul="0" latin="0" hanja="0" japanese="0" other="0" symbol="0" user="0"/>` +
+      `<hh:relSz hangul="100" latin="100" hanja="100" japanese="100" other="100" symbol="100" user="100"/>` +
+      `<hh:offset hangul="0" latin="0" hanja="0" japanese="0" other="0" symbol="0" user="0"/>` +
+      bold +
+      italic +
+      `<hh:underline type="${cp.underline}" shape="SOLID" color="#000000"/>` +
+      `<hh:strikeout shape="${cp.strikeout}" color="#000000"/>` +
+      `<hh:outline type="NONE"/>` +
+      `<hh:shadow type="NONE" color="#C0C0C0" offsetX="10" offsetY="10"/>` +
+      `</hh:charPr>`;
   }
 
-  // ParaPr definitions
+  // paraPr 목록
   let paraPrXml = "";
   for (const pp of ctx.paraPrs) {
-    const marginSwitch = `<hp:switch><hp:case hp:required-namespace="http://www.hancom.co.kr/hwpml/2016/HwpUnitChar"><hh:margin><hc:intent value="${pp.intentHwp}" unit="HWPUNIT"/><hc:left value="0" unit="HWPUNIT"/><hc:right value="0" unit="HWPUNIT"/><hc:prev value="${pp.prevHwp}" unit="HWPUNIT"/><hc:next value="${pp.nextHwp}" unit="HWPUNIT"/></hh:margin><hh:lineSpacing type="PERCENT" value="${pp.lineSpacing}" unit="HWPUNIT"/></hp:case><hp:default><hh:margin><hc:intent value="${pp.intentHwp}" unit="HWPUNIT"/><hc:left value="0" unit="HWPUNIT"/><hc:right value="0" unit="HWPUNIT"/><hc:prev value="${pp.prevHwp}" unit="HWPUNIT"/><hc:next value="${pp.nextHwp}" unit="HWPUNIT"/></hh:margin><hh:lineSpacing type="PERCENT" value="${pp.lineSpacing}" unit="HWPUNIT"/></hp:default></hp:switch>`;
-    paraPrXml += `<hh:paraPr id="${pp.id}" tabPrIDRef="0" condense="0" fontLineHeight="0" snapToGrid="0" suppressLineNumbers="0" checked="0"><hh:align horizontal="${pp.align}" vertical="BASELINE"/><hh:heading type="NONE" idRef="0" level="0"/><hh:breakSetting breakLatinWord="KEEP_WORD" breakNonLatinWord="BREAK_WORD" widowOrphan="0" keepWithNext="0" keepLines="0" pageBreakBefore="0" lineWrap="BREAK"/><hh:autoSpacing eAsianEng="0" eAsianNum="0"/>${marginSwitch}<hh:border borderFillIDRef="1" offsetLeft="0" offsetRight="0" offsetTop="0" offsetBottom="0" connect="0" ignoreMargin="0"/></hh:paraPr>`;
+    paraPrXml +=
+      `<hh:paraPr id="${pp.id}" tabPrIDRef="0" condense="0" fontLineHeight="0" snapToGrid="0" suppressLineNumbers="0" checked="0">` +
+      `<hh:align horizontal="${pp.align}" vertical="BASELINE"/>` +
+      `<hh:heading type="NONE" idRef="0" level="0"/>` +
+      `<hh:breakSetting breakLatinWord="KEEP_WORD" breakNonLatinWord="BREAK_WORD" widowOrphan="0" keepWithNext="0" keepLines="0" pageBreakBefore="0" lineWrap="BREAK"/>` +
+      `<hh:autoSpacing eAsianEng="0" eAsianNum="0"/>` +
+      `<hh:margin>` +
+      `<hc:intent value="${pp.intentHwp}" unit="HWPUNIT"/>` +
+      `<hc:left value="${pp.leftHwp}" unit="HWPUNIT"/>` +
+      `<hc:right value="${pp.rightHwp}" unit="HWPUNIT"/>` +
+      `<hc:prev value="${pp.prevHwp}" unit="HWPUNIT"/>` +
+      `<hc:next value="${pp.nextHwp}" unit="HWPUNIT"/>` +
+      `</hh:margin>` +
+      `<hh:lineSpacing type="PERCENT" value="${pp.lineSpacing}" unit="HWPUNIT"/>` +
+      `<hh:border borderFillIDRef="1" offsetLeft="0" offsetRight="0" offsetTop="0" offsetBottom="0" connect="0" ignoreMargin="0"/>` +
+      `</hh:paraPr>`;
   }
 
-  // BorderFill definitions
-  const borderFillXml = ctx.borderFills.map((bf) => bf.xml).join("");
-
-  return `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?><hh:head ${NS} version="1.4" secCnt="1"><hh:beginNum page="1" footnote="1" endnote="1" pic="1" tbl="1" equation="1"/><hh:refList>${fontFaces}<hh:borderFills itemCnt="${ctx.borderFills.length}">${borderFillXml}</hh:borderFills><hh:charProperties itemCnt="${ctx.charPrs.length}">${charPrXml}</hh:charProperties><hh:paraProperties itemCnt="${ctx.paraPrs.length}">${paraPrXml}</hh:paraProperties><hh:tabProperties itemCnt="1"><hh:tabPr id="0" autoTabLeft="0" autoTabRight="0"/></hh:tabProperties><hh:styles itemCnt="1"><hh:style id="0" type="PARA" name="바탕글" engName="Normal" paraPrIDRef="0" charPrIDRef="0" nextStyleIDRef="0" langID="1042" lockForm="0"/></hh:styles></hh:refList><hh:compatibleDocument targetProgram="HWP201X"><hh:layoutCompatibility/></hh:compatibleDocument><hh:docOption><hh:linkinfo path="" pageInherit="1" footnoteInherit="0"/></hh:docOption><hh:trackchageConfig flags="56"/></hh:head>`;
+  // borderFill 목록 (BorderFillBank → XML)
+  const borderFillXml = ctx.borderFillBank.toXml();
+
+  // 스타일 목록
+  const stylesXml =
+    `<hh:styles itemCnt="${ctx.hwpxStyles.length}">` +
+    ctx.hwpxStyles
+      .map(
+        (s) =>
+          `<hh:style id="${s.id}" type="PARA" name="${esc(s.name)}" engName="${esc(s.engName)}" ` +
+          `paraPrIDRef="${s.paraPrIDRef}" charPrIDRef="${s.charPrIDRef}" nextStyleIDRef="0" langID="1042" lockForm="0"/>`,
+      )
+      .join("") +
+    `</hh:styles>`;
+
+  return (
+    `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>` +
+    `<hh:head ${NS} version="1.2" secCnt="1">` +
+    `<hh:beginNum page="1" footnote="1" endnote="1" pic="1" tbl="1" equation="1"/>` +
+    `<hh:refList>` +
+    fontFacesXml +
+    borderFillXml +
+    `<hh:charProperties itemCnt="${ctx.charPrs.length}">${charPrXml}</hh:charProperties>` +
+    `<hh:tabProperties itemCnt="1"><hh:tabPr id="0" autoTabLeft="0" autoTabRight="0"/></hh:tabProperties>` +
+    buildNumberingsXml() +
+    buildBulletsXml() +
+    `<hh:paraProperties itemCnt="${ctx.paraPrs.length}">${paraPrXml}</hh:paraProperties>` +
+    stylesXml +
+    `</hh:refList>` +
+    `<hh:compatibleDocument targetProgram="MS_WORD">        
+          <hh:layoutCompatibility>
+            <hh:applyFontWeightToBold />
+            <hh:useInnerUnderline />
+            <hh:useLowercaseStrikeout />
+            <hh:extendLineheightToOffset />
+            <hh:treatQuotationAsLatin />
+            <hh:doNotAlignWhitespaceOnRight />
+            <hh:doNotAdjustWordInJustify />
+            <hh:baseCharUnitOnEAsian />
+            <hh:baseCharUnitOfIndentOnFirstChar />
+            <hh:adjustLineheightToFont />
+            <hh:adjustBaselineInFixedLinespacing />
+            <hh:applyPrevspacingBeneathObject />
+            <hh:applyNextspacingOfLastPara />
+            <hh:adjustParaBorderfillToSpacing />
+            <hh:connectParaBorderfillOfEqualBorder />
+            <hh:adjustParaBorderOffsetWithBorder />
+            <hh:extendLineheightToParaBorderOffset />
+            <hh:applyParaBorderToOutside />
+            <hh:applyMinColumnWidthTo1mm />
+            <hh:applyTabPosBasedOnSegment />
+            <hh:breakTabOverLine />
+            <hh:adjustVertPosOfLine />
+            <hh:doNotAlignLastForbidden />
+            <hh:adjustMarginFromAdjustLineheight />
+            <hh:baseLineSpacingOnLineGrid />
+            <hh:applyCharSpacingToCharGrid />
+            <hh:doNotApplyGridInHeaderFooter />
+            <hh:applyExtendHeaderFooterEachSection />
+            <hh:doNotApplyLinegridAtNoLinespacing />
+            <hh:doNotAdjustEmptyAnchorLine />
+            <hh:overlapBothAllowOverlap />
+            <hh:extendVertLimitToPageMargins />
+            <hh:doNotHoldAnchorOfTable />
+            <hh:doNotFormattingAtBeneathAnchor />
+            <hh:adjustBaselineOfObjectToBottom />
+        </hh:layoutCompatibility>
+    </hh:compatibleDocument>` +
+    `<hh:docOption><hh:linkinfo path="" pageInherit="0" footnoteInherit="0"/></hh:docOption>` +
+    `<hh:trackchageConfig flags="56"/>` +
+    `</hh:head>`
+  );
 }
 
-// ─── section0.xml ───────────────────────────────────────────
+// ─── section0.xml ────────────────────────────────────────────
 
-function sectionXml(
+function buildHeaderFooterRunXml(
+  sheet: SheetNode,
+  dims: PageDims,
+  ctx: HwpxCtx,
+): string {
+  const headers = sheet.headers || {};
+  const footers = sheet.footers || {};
+  const hasAny = Object.keys(headers).length > 0 || Object.keys(footers).length > 0;
+  if (!hasAny) return "";
+
+  const availW = ctx.availableWidth;
+  const mtHwp = Metric.ptToHwp(dims.mt);
+  const mbHwp = Metric.ptToHwp(dims.mb);
+  const headerZoneH = dims.headerPt ? Math.max(100, mtHwp - Metric.ptToHwp(dims.headerPt)) : 3600;
+  const footerZoneH = dims.footerPt ? Math.max(100, mbHwp - Metric.ptToHwp(dims.footerPt)) : 3600;
+
+  let inner = "";
+
+  // 1. 첫 페이지 숨김 설정 (first 헤더/푸터가 있으면 활성화)
+  const hideFirst = !!(headers.first || footers.first);
+  inner += `<hp:ctrl><hp:pageHiding hideHeader="${hideFirst ? 1 : 0}" hideFooter="${hideFirst ? 1 : 0}" hideMasterPage="0" hideBorder="0" hideFill="0" hidePageNum="0"/></hp:ctrl>`;
+
+  // 2. 헤더들 생성
+  for (const [type, paras] of Object.entries(headers)) {
+    const applyPageType = type === "even" ? "EVEN" : (type === "default" || type === "first" ? "BOTH" : "ODD");
+    const savedId = ctx.nextElementId;
+    ctx.nextElementId = 0;
+    const parasXml = paras.map((p) => encodeParaPositioned(p, ctx, 0, "", availW).xml).join("");
+    ctx.nextElementId = savedId;
+    inner +=
+      `<hp:ctrl>` +
+      `<hp:header id="1" applyPageType="${applyPageType}">` +
+      `<hp:subList id="" textDirection="HORIZONTAL" lineWrap="BREAK" vertAlign="TOP" ` +
+      `linkListIDRef="0" linkListNextIDRef="0" textWidth="${availW}" textHeight="${headerZoneH}" ` +
+      `hasTextRef="0" hasNumRef="0">` +
+      parasXml +
+      `</hp:subList>` +
+      `</hp:header>` +
+      `</hp:ctrl>`;
+  }
+
+  // 3. 푸터들 생성
+  for (const [type, paras] of Object.entries(footers)) {
+    const applyPageType = type === "even" ? "EVEN" : (type === "default" || type === "first" ? "BOTH" : "ODD");
+    const savedId = ctx.nextElementId;
+    ctx.nextElementId = 0;
+    const parasXml = paras.map((p) => encodeParaPositioned(p, ctx, 0, "", availW).xml).join("");
+    ctx.nextElementId = savedId;
+    inner +=
+      `<hp:ctrl>` +
+      `<hp:footer id="2" applyPageType="${applyPageType}">` +
+      `<hp:subList id="" textDirection="HORIZONTAL" lineWrap="BREAK" vertAlign="BOTTOM" ` +
+      `linkListIDRef="0" linkListNextIDRef="0" textWidth="${availW}" textHeight="${footerZoneH}" ` +
+      `hasTextRef="0" hasNumRef="0">` +
+      parasXml +
+      `</hp:subList>` +
+      `</hp:footer>` +
+      `</hp:ctrl>`;
+  }
+
+  return `<hp:run charPrIDRef="0" charTcId="0">${inner}</hp:run>`;
+}
+
+function buildSectionXml(
   sheet: SheetNode | undefined,
   dims: PageDims,
   ctx: HwpxCtx,
 ): string {
+  const secPrXml = buildSecPrXml(dims);
   const kids = sheet?.kids ?? [];
+  const hfRunXml = sheet ? buildHeaderFooterRunXml(sheet, dims, ctx) : "";
 
-  // First paragraph includes secPr
-  // WIDELY = portrait (standard), NARROWLY = landscape
-  const secPr = `<hp:secPr id="" textDirection="HORIZONTAL" spaceColumns="1134" tabStop="8000" tabStopVal="4000" tabStopUnit="HWPUNIT" outlineShapeIDRef="0" memoShapeIDRef="0" textVerticalWidthHead="0" masterPageCnt="0"><hp:grid lineGrid="0" charGrid="0" wonggojiFormat="0"/><hp:startNum pageStartsOn="BOTH" page="0" pic="0" tbl="0" equation="0"/><hp:visibility hideFirstHeader="0" hideFirstFooter="0" hideFirstMasterPage="0" border="SHOW_ALL" fill="SHOW_ALL" hideFirstPageNum="0" hideFirstEmptyLine="0" showLineNumber="0"/><hp:lineNumberShape restartType="0" countBy="0" distance="0" startNumber="0"/><hp:pagePr landscape="${dims.orient === "landscape" ? "NARROWLY" : "WIDELY"}" width="${Metric.ptToHwp(dims.wPt)}" height="${Metric.ptToHwp(dims.hPt)}" gutterType="LEFT_ONLY"><hp:margin header="2834" footer="2834" gutter="0" left="${Metric.ptToHwp(dims.ml)}" right="${Metric.ptToHwp(dims.mr)}" top="${Metric.ptToHwp(dims.mt)}" bottom="${Metric.ptToHwp(dims.mb)}"/></hp:pagePr><hp:footNotePr><hp:autoNumFormat type="DIGIT" userChar="" prefixChar="" suffixChar=")" supscript="0"/><hp:noteLine length="-1" type="SOLID" width="0.12 mm" color="#000000"/><hp:noteSpacing betweenNotes="284" belowLine="568" aboveLine="852"/><hp:numbering type="CONTINUOUS" newNum="1"/><hp:placement place="EACH_COLUMN" beneathText="0"/></hp:footNotePr><hp:endNotePr><hp:autoNumFormat type="DIGIT" userChar="" prefixChar="" suffixChar=")" supscript="0"/><hp:noteLine length="0" type="NONE" width="0.12 mm" color="#000000"/><hp:noteSpacing betweenNotes="0" belowLine="576" aboveLine="864"/><hp:numbering type="CONTINUOUS" newNum="1"/><hp:placement place="END_OF_DOCUMENT" beneathText="0"/></hp:endNotePr><hp:pageBorderFill type="BOTH" borderFillIDRef="1" textBorder="PAPER" headerInside="0" footerInside="0" fillArea="PAPER"><hp:offset left="1417" right="1417" top="1417" bottom="1417"/></hp:pageBorderFill><hp:pageBorderFill type="EVEN" borderFillIDRef="1" textBorder="PAPER" headerInside="0" footerInside="0" fillArea="PAPER"><hp:offset left="1417" right="1417" top="1417" bottom="1417"/></hp:pageBorderFill><hp:pageBorderFill type="ODD" borderFillIDRef="1" textBorder="PAPER" headerInside="0" footerInside="0" fillArea="PAPER"><hp:offset left="1417" right="1417" top="1417" bottom="1417"/></hp:pageBorderFill></hp:secPr><hp:ctrl><hp:colPr id="" type="NEWSPAPER" layout="LEFT" colCount="1" sameSz="1" sameGap="0"/></hp:ctrl>`;
+  // 가용 너비 계산 (HWPUNIT)
+  const availWidth = Math.max(
+    1000,
+    Metric.ptToHwp(dims.wPt) - Metric.ptToHwp(dims.ml) - Metric.ptToHwp(dims.mr),
+  );
+  ctx.availableWidth = availWidth;
 
   let contentXml = "";
-  let isFirst = true;
+  let vertPos = 0;
 
-  const defaultLineseg = `<hp:linesegarray><hp:lineseg textpos="0" vertpos="0" vertsize="1000" textheight="1000" baseline="850" spacing="600" horzpos="0" horzsize="${ctx.availableWidth}" flags="393216"/></hp:linesegarray>`;
+  for (let i = 0; i < kids.length; i++) {
+    const kid = kids[i];
+    const isFirst = i === 0;
+    const curSecPr = isFirst ? secPrXml : "";
+    const curHfRun = isFirst ? hfRunXml : "";
 
-  for (const kid of kids) {
     if (kid.tag === "para") {
-      contentXml += encodePara(kid, ctx, isFirst ? secPr : "");
-      isFirst = false;
+      const { xml, nextVertPos } = encodeParaPositioned(
+        kid,
+        ctx,
+        vertPos,
+        curSecPr,
+        availWidth,
+        curHfRun,
+      );
+      contentXml += xml;
+      vertPos = nextVertPos;
     } else if (kid.tag === "grid") {
-      // Grid is embedded inside a paragraph's run.
-      // When secPr is present, put it in a separate run (matching real HWPX structure).
-      const gridXml = encodeGrid(kid, ctx);
-      const prefix = isFirst ? secPr : "";
-      const runsXml = prefix
-        ? `<hp:run charPrIDRef="0">${prefix}</hp:run><hp:run charPrIDRef="0">${gridXml}<hp:t></hp:t></hp:run>`
-        : `<hp:run charPrIDRef="0">${gridXml}<hp:t></hp:t></hp:run>`;
-      contentXml += `<hp:p id="0" paraPrIDRef="0" styleIDRef="0" pageBreak="0" columnBreak="0" merged="0">${runsXml}${defaultLineseg}</hp:p>`;
-      isFirst = false;
+      const { xml, nextVertPos } = encodeGridPositioned(
+        kid,
+        ctx,
+        vertPos,
+        curSecPr,
+        curHfRun,
+      );
+      contentXml += xml;
+      vertPos = nextVertPos;
     }
   }
 
-  // If empty, add one empty paragraph with secPr
-  if (contentXml === "") {
-    contentXml = `<hp:p id="0" paraPrIDRef="0" styleIDRef="0" pageBreak="0" columnBreak="0" merged="0"><hp:run charPrIDRef="0">${secPr}<hp:t></hp:t></hp:run>${defaultLineseg}</hp:p>`;
+  if (kids.length === 0) {
+    // 빈 문서 — 최소 단락 1개 필수
+    const fs = 1000;
+    const vs = 1600;
+    const { xml: linesegXml } = buildLinesegarray(" ", 0, fs, vs / (fs / 100), availWidth);
+    contentXml =
+      `<hp:p id="${ctx.nextElementId++}" paraPrIDRef="0" styleIDRef="0" pageBreak="0" columnBreak="0" merged="0" paraTcId="0">` +
+      secPrXml +
+      hfRunXml +
+      `<hp:run charPrIDRef="0" charTcId="0"><hp:t xml:space="preserve"> </hp:t></hp:run>` +
+      linesegXml +
+      `</hp:p>`;
   }
 
-  return `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?><hs:sec ${NS}>${contentXml}</hs:sec>`;
+  return `<?xml version="1.0" encoding="UTF-8" standalone="yes" ?><hs:sec ${NS} xmlns:hwpunitchar="http://www.hancom.co.kr/hwpml/2016/HwpUnitChar">${contentXml}</hs:sec>`;
 }
 
-function estimateCellHeight(cell: CellNode, ctx: HwpxCtx): number {
-  const topPad = 141;
-  const botPad = 141;
-  let contentHeight = 0;
-  for (const para of cell.kids) {
-    const fontSize = getFontSizeForPara(para, ctx);
-    const paraPrId = ctx.paraPrMap.get(paraPrKey(para.props));
-    const paraPr = paraPrId !== undefined ? ctx.paraPrs[paraPrId] : null;
-    const lineSpacing = paraPr ? paraPr.lineSpacing : 160;
-    const spaceBefore = paraPr ? paraPr.prevHwp : 0;
-    const spaceAfter = paraPr ? paraPr.nextHwp : 0;
-    const lineHeight = Math.round((fontSize * lineSpacing) / 100);
-    contentHeight += lineHeight + spaceBefore + spaceAfter;
-  }
-  if (contentHeight === 0) contentHeight = Math.round(1000 * 1.6); // 10pt @ 160%
-  return contentHeight + topPad + botPad;
-}
-
-function encodePara(
-  para: ParaNode,
-  ctx: HwpxCtx,
-  secPr: string = "",
-  availWidth?: number,
-): string {
-  const paraPrId = registerParaPr(para.props, ctx);
-
-  // Detect page break: paragraph starts on new page if any span contains a pb node
-  const hasPageBreak = para.kids.some(
-    (k) => k.tag === "span" && k.kids.some((c) => c.tag === "pb"),
+function buildSecPrXml(dims: PageDims): string {
+  const wHwp = Metric.ptToHwp(dims.wPt);
+  const hHwp = Metric.ptToHwp(dims.hPt);
+  const ml = Metric.ptToHwp(dims.ml);
+  const mr = Metric.ptToHwp(dims.mr);
+  const mt = Metric.ptToHwp(dims.mt);
+  const mb = Metric.ptToHwp(dims.mb);
+  // HWPX margin header/footer = header/footer ZONE HEIGHT (not distance from paper edge)
+  // = top_hwp - header_from_top_hwp  (and  bottom_hwp - footer_from_bottom_hwp)
+  const headerZone = dims.headerPt
+    ? Math.max(0, mt - Metric.ptToHwp(dims.headerPt))
+    : 0;
+  const footerZone = dims.footerPt
+    ? Math.max(0, mb - Metric.ptToHwp(dims.footerPt))
+    : 0;
+
+  const pageBorderFill =
+    `<hp:pageBorderFill type="BOTH" borderFillIDRef="1" textBorder="PAPER" headerInside="0" footerInside="0" fillArea="PAPER">` +
+    `<hp:offset left="1417" right="1417" top="1417" bottom="1417"/>` +
+    `</hp:pageBorderFill>` +
+    `<hp:pageBorderFill type="EVEN" borderFillIDRef="1" textBorder="PAPER" headerInside="0" footerInside="0" fillArea="PAPER">` +
+    `<hp:offset left="1417" right="1417" top="1417" bottom="1417"/>` +
+    `</hp:pageBorderFill>` +
+    `<hp:pageBorderFill type="ODD" borderFillIDRef="1" textBorder="PAPER" headerInside="0" footerInside="0" fillArea="PAPER">` +
+    `<hp:offset left="1417" right="1417" top="1417" bottom="1417"/>` +
+    `</hp:pageBorderFill>`;
+
+  return (
+    `<hp:secPr id="0" textDirection="HORIZONTAL" spaceColumns="1134" tabStop="8000" outlineShapeIDRef="0" memoShapeIDRef="0" textVerticalWidthHead="0" masterPageCnt="0">` +
+    `<hp:grid lineGrid="0" charGrid="0" wonggojiFormat="0"/>` +
+    `<hp:startNum pageStartsOn="BOTH" page="0" pic="0" tbl="0" equation="0"/>` +
+    `<hp:visibility hideFirstHeader="0" hideFirstFooter="0" hideFirstMasterPage="0" border="SHOW_ALL" fill="SHOW_ALL" hideFirstPageNum="0" hideFirstEmptyLine="0" showLineNumber="0"/>` +
+    `<hp:lineNumberShape restartType="0" countBy="0" distance="0" startNumber="0"/>` +
+    `<hp:pagePr landscape="${dims.wPt >= dims.hPt ? 'WIDELY' : 'NARROWLY'}" width="${wHwp}" height="${hHwp}" gutterType="LEFT_ONLY">` +
+    `<hp:margin header="${headerZone}" footer="${footerZone}" gutter="0" left="${ml}" right="${mr}" top="${mt}" bottom="${mb}"/>` +
+    `</hp:pagePr>` +
+    `<hp:colPr id="" type="NEWSPAPER" layout="LEFT" colCount="1" sameSz="1" sameGap="0"/>` +
+    `<hp:footNotePr><hp:autoNumFormat type="DIGIT" userChar="" prefixChar="" suffixChar="" supscript="1"/>` +
+    `<hp:noteLine length="-1" type="SOLID" width="0.25 mm" color="#000000"/>` +
+    `<hp:noteSpacing betweenNotes="283" belowLine="0" aboveLine="1000"/>` +
+    `<hp:numbering type="CONTINUOUS" newNum="1"/>` +
+    `<hp:placement place="EACH_COLUMN" beneathText="0"/>` +
+    `</hp:footNotePr>` +
+    `<hp:endNotePr><hp:autoNumFormat type="DIGIT" userChar="" prefixChar="" suffixChar="" supscript="1"/>` +
+    `<hp:noteLine length="-1" type="SOLID" width="0.25 mm" color="#000000"/>` +
+    `<hp:noteSpacing betweenNotes="0" belowLine="0" aboveLine="1000"/>` +
+    `<hp:numbering type="CONTINUOUS" newNum="1"/>` +
+    `<hp:placement place="END_OF_DOCUMENT" beneathText="0"/>` +
+    `</hp:endNotePr>` +
+    pageBorderFill +
+    `</hp:secPr>`
   );
+}
+
+// ─── 줄 정보 XML (linesegarray) ──────────────────────────────
+// 가이드 준수: 실제 시각적 줄 단위로 lineseg 생성
+
+function buildLinesegarray(
+  text: string,
+  vertPosStart: number,
+  fontSize: number,
+  lineSpacingPct: number,
+  horzSize: number,
+): { xml: string; totalHeight: number } {
+  const vertsizeLine = Math.round((fontSize * lineSpacingPct) / 100);
+  const spacing = vertsizeLine - fontSize;
+  const baseline = Math.round(fontSize * 0.83);
+
+  // 글자 너비 추정 (영문 0.47, 한글 1.0)
+  const isKorean = /[\uAC00-\uD7A3\u3131-\u318E]/.test(text);
+  const charW = isKorean ? fontSize : Math.round(fontSize * 0.47);
+  const charsPerLine = Math.max(1, Math.floor(horzSize / charW));
+  const lineCount = text.length === 0 ? 1 : Math.ceil(text.length / charsPerLine);
+
+  // 성능 최적화: 문자열 병합 대신 배열 수집 후 join 사용 (O(n²) → O(n))
+  const linesegParts: string[] = [];
+  for (let i = 0; i < lineCount; i++) {
+    const flags = i === 0 ? LINESEG_FLAGS_FIRST : LINESEG_FLAGS_OTHER;
+    linesegParts.push(
+      `<hp:lineseg textpos="${i * charsPerLine}" ` +
+      `vertpos="${vertPosStart + i * vertsizeLine}" ` +
+      `vertsize="${vertsizeLine}" textheight="${fontSize}" ` +
+      `baseline="${baseline}" spacing="${spacing}" ` +
+      `horzpos="0" horzsize="${horzSize}" ` +
+      `flags="${flags}"/>`,
+    );
+  }
+
+  return {
+    xml: `<hp:linesegarray>${linesegParts.join("")}</hp:linesegarray>`,
+    totalHeight: lineCount * vertsizeLine,
+  };
+}
 
-  let runs = "";
+/** 단락에서 순수 텍스트 추출 (줄바꿈 계산용) */
+function extractParaText(para: ParaNode): string {
+  let text = "";
+  const walk = (kids: any[]) => {
+    for (const k of kids) {
+      if (k.tag === "span") {
+        for (const c of k.kids) if (c.tag === "txt") text += c.content;
+      } else if (k.tag === "link") {
+        walk(k.kids);
+      }
+    }
+  };
+  walk(para.kids);
+  return text;
+}
+
+function fontSizeForPara(para: ParaNode, ctx: HwpxCtx): number {
   for (const kid of para.kids) {
     if (kid.tag === "span") {
-      runs += encodeRun(kid, ctx);
-    } else if (kid.tag === "img") {
-      runs += encodeImage(kid, ctx);
+      const id = ctx.charPrMap.get(charPrKey(kid.props));
+      if (id !== undefined && ctx.charPrs[id]) return ctx.charPrs[id].height;
     }
   }
+  return 1000; // 기본 10pt
+}
 
-  // If no runs, add default empty run
-  if (runs === "") {
-    runs = `<hp:run charPrIDRef="0"><hp:t></hp:t></hp:run>`;
-  }
+// ─── 단락 인코딩 ─────────────────────────────────────────────
 
-  // Inject secPr into first run
-  if (secPr) {
-    // Insert secPr after the first charPrIDRef attribute close
-    const firstRunEnd = runs.indexOf(">");
-    if (firstRunEnd > -1) {
-      runs =
-        runs.substring(0, firstRunEnd + 1) +
-        secPr +
-        runs.substring(firstRunEnd + 1);
-    }
+function encodeParaPositioned(
+  para: ParaNode,
+  ctx: HwpxCtx,
+  vertPos: number,
+  secPr = "",
+  availWidth?: number,
+  hfRun = "",
+): { xml: string; nextVertPos: number } {
+  // ✅ 표(Grid)를 포함하는 단락인지 확인
+  const gridKid = para.kids.find((k): k is GridNode => k.tag === "grid");
+  if (gridKid) {
+    return encodeTablePara(para, gridKid, ctx, vertPos, secPr, hfRun);
   }
 
-  // Compute lineseg values based on font size and actual line spacing.
-  // In HWPX, vertsize = font height and spacing = extra gap = fontSize * (lineSpacing/100 - 1).
-  // Total rendered line height = vertsize + spacing.
-  const fontSize = getFontSizeForPara(para, ctx);
+  const paraPrId = ctx.paraPrMap.get(paraPrKey(para.props)) ?? 0;
+  const styleIDRef = para.props.styleId
+    ? (ctx.styleIdToHwpxId.get(para.props.styleId) ?? 0)
+    : 0;
+  const fontSize = fontSizeForPara(para, ctx);
   const paraPr = ctx.paraPrs[paraPrId];
   const lineSpacing = paraPr?.lineSpacing ?? 160;
-  const vertsize = fontSize;
-  const textheight = fontSize;
-  const baseline = Math.round(fontSize * 0.85);
   const spacing = Math.max(0, Math.round(fontSize * (lineSpacing / 100 - 1)));
-  const horzsize = availWidth ?? ctx.availableWidth;
-  const linesegarray = `<hp:linesegarray><hp:lineseg textpos="0" vertpos="0" vertsize="${vertsize}" textheight="${textheight}" baseline="${baseline}" spacing="${spacing}" horzpos="0" horzsize="${horzsize}" flags="393216"/></hp:linesegarray>`;
+  let vertSize = fontSize + spacing;
+  const horzSize = availWidth ?? ctx.availableWidth;
+
+  // 코드 블록 감지 (Courier 폰트 또는 styleId "code")
+  const isCourierFont = (kids: ParaNode["kids"]): boolean =>
+    kids.some(
+      (k) =>
+        (k.tag === "span" && k.props.font?.toLowerCase().includes("courier")) ||
+        (k.tag === "link" &&
+          isCourierFont((k as LinkNode).kids as ParaNode["kids"])),
+    );
+  const isCode =
+    availWidth === undefined &&
+    (para.props.styleId?.toLowerCase().includes("code") ||
+      isCourierFont(para.kids));
+
+  if (isCode)
+    return encodeCodeBlockPositioned(
+      para,
+      ctx,
+      vertPos,
+      secPr,
+      fontSize,
+      spacing,
+      vertSize,
+    );
+
+  let runsXml = encodeParaKids(para.kids, ctx);
+  if (!runsXml) runsXml = `<hp:run charPrIDRef="0" charTcId="0"><hp:t xml:space="preserve"> </hp:t></hp:run>`;
+
+  const paraText = extractParaText(para);
+  const { xml: linesegXml, totalHeight } = buildLinesegarray(
+    paraText,
+    vertPos,
+    fontSize,
+    lineSpacing,
+    horzSize,
+  );
+
+  const hasPageBreak = para.kids.some(
+    (k) => k.tag === "span" && k.kids.some((c) => c.tag === "pb"),
+  );
+
+  const xml =
+    `<hp:p id="${ctx.nextElementId++}" paraPrIDRef="${paraPrId}" styleIDRef="${styleIDRef}" ` +
+    `pageBreak="${hasPageBreak ? 1 : 0}" columnBreak="0" merged="0" paraTcId="0">` +
+    secPr +
+    hfRun +
+    runsXml +
+    linesegXml +
+    `</hp:p>`;
 
-  return `<hp:p id="0" paraPrIDRef="${paraPrId}" styleIDRef="0" pageBreak="${hasPageBreak ? "1" : "0"}" columnBreak="0" merged="0">${runs}${linesegarray}</hp:p>`;
+  return { xml, nextVertPos: vertPos + totalHeight };
 }
 
-/** Get the font size (in HWPX height units, 1000=10pt) for lineseg computation */
-function getFontSizeForPara(para: ParaNode, ctx: HwpxCtx): number {
-  for (const kid of para.kids) {
+/** ✅ 가이드 준수: 표를 포함하는 단락 인코딩 */
+function encodeTablePara(
+  para: ParaNode,
+  grid: GridNode,
+  ctx: HwpxCtx,
+  vertPos: number,
+  secPr: string,
+  hfRun: string,
+): { xml: string; nextVertPos: number } {
+  const paraPrId = ctx.paraPrMap.get(paraPrKey(para.props)) ?? 0;
+  
+  // 표 알맹이 생성 (기존 로직 재사용)
+  const { xml: gridXml, height: tblHeight } = buildGridXml(grid, ctx);
+  
+  // 가이드: 표 단락의 lineseg는 1개여야 하고, vertsize는 표 전체 높이여야 함
+  const fontSize = 1000; 
+  const totalHeight = Math.max(1600, tblHeight);
+  const baseline = 850;
+  const spacing = Math.max(0, totalHeight - fontSize);
+
+  const linesegXml =
+    `<hp:linesegarray>` +
+    `<hp:lineseg textpos="0" vertpos="${vertPos}" vertsize="${totalHeight}" ` +
+    `textheight="${fontSize}" baseline="${baseline}" spacing="${spacing}" ` +
+    `horzpos="0" horzsize="${ctx.availableWidth}" flags="1441792"/>` +
+    `</hp:linesegarray>`;
+
+  const xml =
+    `<hp:p id="${ctx.nextElementId++}" paraPrIDRef="${paraPrId}" styleIDRef="0" ` +
+    `pageBreak="0" columnBreak="0" merged="0" paraTcId="0">` +
+    secPr +
+    gridXml +
+    hfRun +
+    linesegXml +
+    `</hp:p>`;
+
+  return { xml, nextVertPos: vertPos + totalHeight };
+}
+
+function encodeCodeBlockPositioned(
+  para: ParaNode,
+  ctx: HwpxCtx,
+  vertPos: number,
+  secPr: string,
+  fontSize: number,
+  spacing: number,
+  vertSize: number,
+): { xml: string; nextVertPos: number } {
+  const codeBfId = ctx.borderFillBank.addUniform(
+    { kind: "solid", pt: 0.5, color: "aaaaaa" },
+    "f4f4f4",
+  );
+  const cellW = ctx.availableWidth;
+  const innerW = Math.max(cellW - 510, 100);
+  const subListId = ctx.nextElementId++;
+  const { xml: innerXml } = encodeParaPositioned(para, ctx, 0, "", innerW);
+
+  const paraText = extractParaText(para);
+  const { xml: linesegXml, totalHeight } = buildLinesegarray(
+    paraText,
+    vertPos,
+    fontSize,
+    160, // 코드 블록 기본 줄간격 160%
+    ctx.availableWidth,
+  );
+
+  const xml =
+    `<hp:p id="${ctx.nextElementId++}" paraPrIDRef="0" styleIDRef="0" paraTcId="0">` +
+    secPr +
+    `<hp:run charPrIDRef="0" charTcId="0">` +
+    `<hp:tbl id="${ctx.nextElementId++}" zOrder="0" numberingType="TABLE" textWrap="TOP_AND_BOTTOM" textFlow="BOTH_SIDES" lock="0" dropcapstyle="None" pageBreak="NONE" rowCnt="1" colCnt="1" cellSpacing="0" borderFillIDRef="${codeBfId}" noAdjust="0">` +
+    `<hp:sz width="${cellW}" widthRelTo="ABSOLUTE" height="0" heightRelTo="ABSOLUTE" protect="0"/>` +
+    `<hp:pos treatAsChar="1" affectLSpacing="0" flowWithText="1" allowOverlap="0" holdAnchorAndSO="0" vertRelTo="PARA" horzRelTo="PARA" vertAlign="TOP" horzAlign="LEFT" vertOffset="0" horzOffset="0"/>` +
+    `<hp:outMargin left="138" right="138" top="138" bottom="138"/>` +
+    `<hp:inMargin left="138" right="138" top="138" bottom="138"/>` +
+    `<hp:tr><hp:tc name="" header="0" hasMargin="1" protect="0" editable="0" dirty="0" borderFillIDRef="${codeBfId}">` +
+    `<hp:subList id="${subListId}" textDirection="HORIZONTAL" lineWrap="BREAK" vertAlign="CENTER" linkListIDRef="0" linkListNextIDRef="0" textWidth="0" textHeight="0" hasTextRef="0" hasNumRef="0">` +
+    innerXml +
+    `</hp:subList>` +
+    `<hp:cellAddr colAddr="0" rowAddr="0"/>` +
+    `<hp:cellSpan colSpan="1" rowSpan="1"/>` +
+    `<hp:cellSz width="${cellW}" height="0"/>` +
+    `<hp:cellMargin left="283" right="283" top="141" bottom="141"/>` +
+    `</hp:tc></hp:tr></hp:tbl><hp:t xml:space="preserve"> </hp:t></hp:run>` +
+    linesegXml +
+    `</hp:p>`;
+
+  return { xml, nextVertPos: vertPos + totalHeight };
+}
+
+function encodeParaKids(kids: ParaNode["kids"], ctx: HwpxCtx): string {
+  let xml = "";
+  let currentRunCharPrId: number | null = null;
+  let currentRunContent = "";
+
+  const flushRun = () => {
+    if (currentRunCharPrId !== null) {
+      // 내용이 없더라도 빈 hp:t를 생성하여 '텍스트 없음' 오류 방지
+      const content = currentRunContent || `<hp:t xml:space="preserve"> </hp:t>`;
+      xml += `<hp:run charPrIDRef="${currentRunCharPrId}" charTcId="0">${content}</hp:run>`;
+    }
+    currentRunCharPrId = null;
+    currentRunContent = "";
+  };
+
+  for (const kid of kids) {
     if (kid.tag === "span") {
-      const charPrId = ctx.charPrMap.get(charPrKey(kid.props));
-      if (charPrId !== undefined && ctx.charPrs[charPrId]) {
-        return ctx.charPrs[charPrId].height;
+      const span = kid as SpanNode;
+      const charPrId = ctx.charPrMap.get(charPrKey(span.props)) ?? 0;
+      
+      if (currentRunCharPrId !== null && currentRunCharPrId !== charPrId) {
+        flushRun();
+      }
+      
+      currentRunCharPrId = charPrId;
+      currentRunContent += encodeRunInner(span);
+    } 
+    else if (kid.tag === "link") {
+      const link = kid as LinkNode;
+      // 링크의 첫 번째 span 스타일을 기준으로 함
+      let charPrId = 0;
+      if (link.kids.length > 0 && link.kids[0].tag === "span") {
+        charPrId = ctx.charPrMap.get(charPrKey((link.kids[0] as SpanNode).props)) ?? 0;
       }
+
+      if (currentRunCharPrId !== null && currentRunCharPrId !== charPrId) {
+        flushRun();
+      }
+
+      currentRunCharPrId = charPrId;
+      currentRunContent += encodeLinkInner(link, ctx);
+    }
+    else if (kid.tag === "img") {
+      flushRun();
+      xml += encodeImgWrapped(kid, ctx);
     }
   }
-  return 1000; // default 10pt
-}
 
-function encodeRun(span: SpanNode, ctx: HwpxCtx): string {
-  const charPrId = registerCharPr(span.props, ctx);
+  flushRun();
+  return xml;
+}
 
-  const parts: string[] = [];
+/** hp:run 내부의 태그들만 생성 (span용) */
+function encodeRunInner(span: SpanNode): string {
+  let xml = "";
   for (const kid of span.kids) {
     if (kid.tag === "txt") {
-      if (kid.content) {
-        parts.push(`<hp:t>${esc(kid.content)}</hp:t>`);
-      } else {
-        parts.push(`<hp:t></hp:t>`);
-      }
-    } else if (kid.tag === "pagenum") {
-      const fmt =
-        kid.format === "roman"
-          ? "ROMAN_LOWER"
-          : kid.format === "romanCaps"
-            ? "ROMAN_UPPER"
-            : "DIGIT";
-      parts.push(`<hp:pageNum pageStartsOn="BOTH" formatType="${fmt}"/>`);
+      const content = esc(kid.content);
+      if (content) xml += `<hp:t xml:space="preserve">${content}</hp:t>`;
     } else if (kid.tag === "br") {
-      parts.push(`<hp:t>\n</hp:t>`);
+      xml += `<hp:t xml:space="preserve">\n</hp:t>`;
+    } else if (kid.tag === "pagenum") {
+      const fmt = (kid as any).format === "roman" ? "ROMAN_LOWER" 
+                : (kid as any).format === "romanCaps" ? "ROMAN_UPPER" : "DIGIT";
+      xml += `<hp:pageNum pageStartsOn="BOTH" formatType="${fmt}"/>`;
     }
-    // pb is handled at paragraph level (pageBreak attribute), skip here
   }
+  return xml;
+}
 
-  return `<hp:run charPrIDRef="${charPrId}">${parts.join("")}</hp:run>`;
+/** hp:run 내부의 태그들만 생성 (link용) */
+function encodeLinkInner(link: LinkNode, ctx: HwpxCtx): string {
+  const fieldId = 600000000 + (ctx.nextElementId++ % 100000000);
+  const instanceId = 2100000000 + (ctx.nextElementId++ % 100000000);
+  const url = link.href;
+
+  let xml = `<hp:ctrl>` +
+    `<hp:fieldBegin id="${instanceId}" type="HYPERLINK" name="" editable="0" dirty="1" zorder="-1" fieldid="${fieldId}">` +
+    `<hp:parameters cnt="6" name="">` +
+    `<hp:integerParam name="Prop">0</hp:integerParam>` +
+    `<hp:stringParam name="Command">${esc(url.replace(/:/g, "\\:"))};1;5;-1;</hp:stringParam>` +
+    `<hp:stringParam name="Path">${esc(url)}</hp:stringParam>` +
+    `<hp:stringParam name="Category">HWPHYPERLINK_TYPE_URL</hp:stringParam>` +
+    `<hp:stringParam name="TargetType">HWPHYPERLINK_TARGET_HYPERLINK</hp:stringParam>` +
+    `<hp:stringParam name="DocOpenType">HWPHYPERLINK_JUMP_DONTCARE</hp:stringParam>` +
+    `</hp:parameters>` +
+    `</hp:fieldBegin>` +
+    `</hp:ctrl>`;
+
+  for (const kid of link.kids) {
+    if (kid.tag === "span") {
+      xml += encodeRunInner(kid as SpanNode);
+    }
+  }
+
+  xml += `<hp:ctrl><hp:fieldEnd beginIDRef="${instanceId}"/></hp:ctrl>`;
+  return xml;
 }
 
-// HWPX textWrap 매핑
-const WRAP_HWPX: Record<string, string> = {
-  inline: 'TOP_AND_BOTTOM',
-  square: 'SQUARE',
-  tight: 'BOTH_SIDES',
-  through: 'BOTH_SIDES',
-  none: 'FRONT_TEXT',
-  behind: 'BEHIND_TEXT',
-  front: 'FRONT_TEXT',
-};
-// textFlow 매핑 (wrap 타입별)
-const TEXT_FLOW_HWPX: Record<string, string> = {
-  inline: 'BOTH_SIDES',
-  square: 'LARGEST_ONLY',
-  tight: 'BOTH_SIDES',
-  through: 'BOTH_SIDES',
-  none: 'BOTH_SIDES',
-  behind: 'BOTH_SIDES',
-  front: 'BOTH_SIDES',
-};
-const HORZ_RELTO_HWPX: Record<string, string> = {
-  para: 'PARA', margin: 'MARGIN', page: 'PAPER', column: 'COLUMN',
+// ─── 이미지 인코딩 (ANYTOHWP 영감: 픽셀 치수 추출) ──────────
+
+const WRAP_MAP: Record<string, string> = {
+  inline: "TOP_AND_BOTTOM",
+  square: "SQUARE",
+  tight: "BOTH_SIDES",
+  through: "BOTH_SIDES",
+  none: "FRONT_TEXT",
+  behind: "BEHIND_TEXT",
+  front: "FRONT_TEXT",
 };
-const VERT_RELTO_HWPX: Record<string, string> = {
-  para: 'PARA', margin: 'MARGIN', page: 'PAPER', line: 'LINE',
+const FLOW_MAP: Record<string, string> = {
+  inline: "BOTH_SIDES",
+  square: "LARGEST_ONLY",
+  tight: "BOTH_SIDES",
+  through: "BOTH_SIDES",
+  none: "BOTH_SIDES",
+  behind: "BOTH_SIDES",
+  front: "BOTH_SIDES",
 };
 
 function encodeImage(img: ImgNode, ctx: HwpxCtx): string {
+  // 0. 플레이스홀더 처리 (차트 등 b64가 없는 경우)
+  if (!img.b64) {
+    return `<hp:t xml:space="preserve">${esc(img.alt || "[개체]")}</hp:t>`;
+  }
+
   const binId = ctx.imgMap.get(img);
   if (!binId) return "";
 
-  const charPrId = registerCharPr({}, ctx);
-  const w = Metric.ptToHwp(img.w);
-  const h = Metric.ptToHwp(img.h);
-  const cx = Math.round(w / 2);
-  const cy = Math.round(h / 2);
+  // ANYTOHWP 영감: PNG/JPEG 바이너리 헤더에서 실제 픽셀 치수 추출
+  // img.w / img.h는 pt 단위이지만, 이미지 실제 픽셀을 HWPUNIT으로 변환하면 더 정확
+  const pixelDims = readPixelDims(img.b64, img.mime);
+  let wHwp: number, hHwp: number;
+
+  if (pixelDims && pixelDims.w > 0 && pixelDims.h > 0) {
+    // 픽셀 → pt (96dpi 기준) → HWPUNIT
+    wHwp = Metric.ptToHwp((pixelDims.w * 72) / 96);
+    hHwp = Metric.ptToHwp((pixelDims.h * 72) / 96);
+  } else {
+    wHwp = Metric.ptToHwp(img.w);
+    hHwp = Metric.ptToHwp(img.h);
+  }
+
+  // 가용 너비 초과 방지 (비율 유지)
+  if (wHwp > ctx.availableWidth) {
+    hHwp = Math.round((hHwp * ctx.availableWidth) / wHwp);
+    wHwp = ctx.availableWidth;
+  }
+
+  // 회전 중심점 (rotation center) 계산: 이미지 중앙을 기준으로 회전
+  const rotationCenterX = Math.round(wHwp / 2);
+  const rotationCenterY = Math.round(hHwp / 2);
 
   const layout = img.layout;
-  const isInline = !layout || layout.wrap === 'inline';
-
-  const textWrap = layout ? (WRAP_HWPX[layout.wrap] ?? 'TOP_AND_BOTTOM') : 'TOP_AND_BOTTOM';
-  const textFlow = layout ? (TEXT_FLOW_HWPX[layout.wrap] ?? 'BOTH_SIDES') : 'BOTH_SIDES';
-  const treatAsChar = isInline ? '1' : '0';
-  const flowWithText = '1';
-  // behind/front/inline 이미지는 다른 객체와 겹침 허용 불필요; square/tight는 허용
-  const allowOverlap = (!isInline && layout?.wrap !== 'behind' && layout?.wrap !== 'front') ? '1' : '0';
-
-  const horzRelTo = layout?.horzRelTo ? (HORZ_RELTO_HWPX[layout.horzRelTo] ?? 'PARA') : 'PARA';
-  const vertRelTo = layout?.vertRelTo ? (VERT_RELTO_HWPX[layout.vertRelTo] ?? 'PARA') : 'PARA';
-
-  const ALIGN_H: Record<string, string> = { left: 'LEFT', center: 'CENTER', right: 'RIGHT' };
-  const ALIGN_V: Record<string, string> = { top: 'TOP', center: 'CENTER', bottom: 'BOTTOM' };
-  const horzAlign = layout?.horzAlign ? (ALIGN_H[layout.horzAlign] ?? 'LEFT') : 'LEFT';
-  const vertAlign = layout?.vertAlign ? (ALIGN_V[layout.vertAlign] ?? 'TOP') : 'TOP';
-  const horzOffset = layout?.xPt != null ? Metric.ptToHwp(layout.xPt) : 0;
-  const vertOffset = layout?.yPt != null ? Metric.ptToHwp(layout.yPt) : 0;
-
-  // hp:pic children must follow the exact HWPX spec order.
+  const isInline = !layout || layout.wrap === "inline";
+  const textWrap = layout ? (WRAP_MAP[layout.wrap] ?? "SQUARE") : "SQUARE";
+  const textFlow = layout
+    ? (FLOW_MAP[layout.wrap] ?? "BOTH_SIDES")
+    : "BOTH_SIDES";
   const zOrder = ctx.nextZOrder++;
-  return `<hp:run charPrIDRef="${charPrId}"><hp:pic id="${ctx.nextElementId++}" zOrder="${zOrder}" numberingType="PICTURE" textWrap="${textWrap}" textFlow="${textFlow}" lock="0" dropcapstyle="None" href="" groupLevel="0" instid="0" reverse="0"><hp:offset x="0" y="0"/><hp:orgSz width="${w}" height="${h}"/><hp:curSz width="${w}" height="${h}"/><hp:flip horizontal="0" vertical="0"/><hp:rotationInfo angle="0" centerX="${cx}" centerY="${cy}" rotateimage="1"/><hp:renderingInfo><hc:transMatrix e1="1" e2="0" e3="0" e4="0" e5="1" e6="0"/><hc:scaMatrix e1="1" e2="0" e3="0" e4="0" e5="1" e6="0"/><hc:rotMatrix e1="1" e2="0" e3="0" e4="0" e5="1" e6="0"/></hp:renderingInfo><hp:imgRect><hc:pt0 x="0" y="0"/><hc:pt1 x="${w}" y="0"/><hc:pt2 x="${w}" y="${h}"/><hc:pt3 x="0" y="${h}"/></hp:imgRect><hp:imgClip left="0" right="0" top="0" bottom="0"/><hp:inMargin left="0" right="0" top="0" bottom="0"/><hp:imgDim dimwidth="${w}" dimheight="${h}"/><hc:img binaryItemIDRef="${binId}" bright="0" contrast="0" effect="REAL_PIC" alpha="0"/><hp:effects/><hp:sz width="${w}" widthRelTo="ABSOLUTE" height="${h}" heightRelTo="ABSOLUTE" protect="0"/><hp:pos treatAsChar="${treatAsChar}" affectLSpacing="0" flowWithText="${flowWithText}" allowOverlap="${allowOverlap}" holdAnchorAndSO="0" vertRelTo="${vertRelTo}" horzRelTo="${horzRelTo}" vertAlign="${vertAlign}" horzAlign="${horzAlign}" vertOffset="${vertOffset}" horzOffset="${horzOffset}"/><hp:outMargin left="0" right="0" top="0" bottom="0"/></hp:pic><hp:t></hp:t></hp:run>`;
+
+  return (
+    `<hp:pic id="${ctx.nextElementId++}" zOrder="${zOrder}" numberingType="PICTURE" ` +
+    `textWrap="${textWrap}" textFlow="${textFlow}" lock="0" dropcapstyle="None" href="" groupLevel="0" instid="0" reverse="0">` +
+    `<hp:offset x="0" y="0"/>` +
+    `<hp:orgSz width="${wHwp}" height="${hHwp}"/>` +
+    `<hp:curSz width="${wHwp}" height="${hHwp}"/>` +
+    `<hp:flip horizontal="0" vertical="0"/>` +
+    `<hp:rotationInfo angle="0" centerX="${rotationCenterX}" centerY="${rotationCenterY}" rotateimage="1"/>` +
+    `<hp:renderingInfo>` +
+    `<hc:transMatrix e1="1" e2="0" e3="0" e4="0" e5="1" e6="0"/>` +
+    `<hc:scaMatrix e1="1" e2="0" e3="0" e4="0" e5="1" e6="0"/>` +
+    `<hc:rotMatrix e1="1" e2="0" e3="0" e4="0" e5="1" e6="0"/>` +
+    `</hp:renderingInfo>` +
+    `<hp:imgRect>` +
+    `<hc:pt0 x="0" y="0"/><hc:pt1 x="${wHwp}" y="0"/>` +
+    `<hc:pt2 x="${wHwp}" y="${hHwp}"/><hc:pt3 x="0" y="${hHwp}"/>` +
+    `</hp:imgRect>` +
+    `<hp:imgClip left="0" right="0" top="0" bottom="0"/>` +
+    `<hp:inMargin left="0" right="0" top="0" bottom="0"/>` +
+    `<hp:imgDim dimwidth="${wHwp}" dimheight="${hHwp}"/>` +
+    `<hc:img binaryItemIDRef="${binId}" bright="0" contrast="0" effect="REAL_PIC" alpha="0"/>` +
+    `<hp:effects/>` +
+    `<hp:sz width="${wHwp}" widthRelTo="ABSOLUTE" height="${hHwp}" heightRelTo="ABSOLUTE" protect="0"/>` +
+    `<hp:pos treatAsChar="${isInline ? 1 : 0}" affectLSpacing="0" flowWithText="1" ` +
+    `allowOverlap="0" holdAnchorAndSO="0" vertRelTo="PARA" horzRelTo="PARA" ` +
+    `vertAlign="TOP" horzAlign="LEFT" vertOffset="0" horzOffset="0"/>` +
+    `<hp:outMargin left="0" right="0" top="0" bottom="0"/>` +
+    `</hp:pic>`
+  );
 }
 
-function encodeGrid(grid: GridNode, ctx: HwpxCtx): string {
+function encodeImgWrapped(img: ImgNode, ctx: HwpxCtx): string {
+  const content = encodeImage(img, ctx);
+  if (!img.b64) {
+    return `<hp:run charPrIDRef="0" charTcId="0">${content}</hp:run>`;
+  }
+  return `<hp:run charPrIDRef="0" charTcId="0">${content}<hp:t xml:space="preserve"> </hp:t></hp:run>`;
+}
+
+// ─── 표(Grid) 인코딩 ─────────────────────────────────────────
+
+function encodeGridPositioned(
+  grid: GridNode,
+  ctx: HwpxCtx,
+  vertPos: number,
+  secPr = "",
+  hfRun = "",
+): { xml: string; nextVertPos: number } {
+  const { xml: gridXml, height: tblHeight } = buildGridXml(grid, ctx);
+  const totalHeight = Math.max(1600, tblHeight);
+  const fontSize = 1000;
+  const baseline = Math.round(fontSize * 0.83);
+  const spacing = Math.max(0, totalHeight - fontSize);
+
+  const linesegXml =
+    `<hp:linesegarray>` +
+    `<hp:lineseg textpos="0" vertpos="${vertPos}" vertsize="${totalHeight}" ` +
+    `textheight="${fontSize}" baseline="${baseline}" spacing="${spacing}" ` +
+    `horzpos="0" horzsize="${ctx.availableWidth}" flags="${LINESEG_FLAGS_FIRST}"/>` +
+    `</hp:linesegarray>`;
+
+  const xml =
+    `<hp:p id="${ctx.nextElementId++}" paraPrIDRef="0" styleIDRef="0" pageBreak="0" columnBreak="0" merged="0" paraTcId="0">` +
+    secPr +
+    hfRun +
+    gridXml +
+    linesegXml +
+    `</hp:p>`;
+
+  return { xml, nextVertPos: vertPos + totalHeight };
+}
+function buildGridXml(
+  grid: GridNode,
+  ctx: HwpxCtx,
+): { xml: string; height: number } {
   const rowCount = grid.kids.length;
+  // ... (기존 tableMap 생성 로직 동일)
 
-  // 1단계: 가상 2D 맵핑 (Virtual Table Map) 생성
-  interface CellMap {
-    type: 'real' | 'absorbed';
+  // 가상 2D 맵 — 병합 셀 처리
+  interface CellEntry {
+    type: "real" | "absorbed";
     cell?: CellNode;
   }
-  const tableMap: CellMap[][] = Array.from({ length: rowCount }, () => []);
+  const tableMap: CellEntry[][] = Array.from({ length: rowCount }, () => []);
 
   for (let ri = 0; ri < rowCount; ri++) {
     let ci = 0;
     for (const cell of grid.kids[ri].kids) {
-      while (tableMap[ri][ci]) ci++; // 이미 점유된 자리 건너뜀
-
-      tableMap[ri][ci] = { type: 'real', cell };
-
-      // 병합 영역 예약
+      while (tableMap[ri][ci]) ci++;
+      tableMap[ri][ci] = { type: "real", cell };
       for (let rr = 0; rr < cell.rs; rr++) {
-        const targetRi = ri + rr;
-        if (targetRi >= rowCount) break;
-        if (!tableMap[targetRi]) tableMap[targetRi] = [];
+        const tri = ri + rr;
+        if (tri >= rowCount) break;
         for (let cc = 0; cc < cell.cs; cc++) {
           if (rr === 0 && cc === 0) continue;
-          tableMap[targetRi][ci + cc] = { type: 'absorbed' };
+          tableMap[tri][ci + cc] = { type: "absorbed" };
         }
       }
       ci += cell.cs;
     }
   }
 
-  // 정확한 전체 열 개수 계산
   let colCount = 0;
-  for (let ri = 0; ri < rowCount; ri++) {
+  for (let ri = 0; ri < rowCount; ri++)
     colCount = Math.max(colCount, tableMap[ri].length);
-  }
   if (colCount === 0) colCount = 1;
 
-  // 2단계: 컬럼 너비 계산
-  const totalWidth = ctx.availableWidth;
-  const defaultColW = Math.round(totalWidth / colCount);
+  // 컬럼 너비 계산 (Bug 6: 균등 배분 금지, 원본 보존)
+  const totalW = ctx.availableWidth;
   const colWidths: number[] = [];
+
   if (grid.props.colWidths && grid.props.colWidths.length === colCount) {
-    const srcPt = [...grid.props.colWidths];
-    const knownTotal = srcPt.filter((w) => w > 0).reduce((s, w) => s + w, 0);
-    const zeroCount = srcPt.filter((w) => w <= 0).length;
-    const availPt = Metric.hwpToPt(totalWidth);
-    const remaining = Math.max(0, availPt - knownTotal);
-    const zeroFill = zeroCount > 0 ? remaining / zeroCount : 0;
-    for (let i = 0; i < srcPt.length; i++) {
-      if (srcPt[i] <= 0) srcPt[i] = zeroFill > 0 ? zeroFill : Metric.hwpToPt(defaultColW);
+    // pt -> HWPUNIT 변환하여 원본 값 보존
+    for (const wPt of grid.props.colWidths) {
+      colWidths.push(Metric.ptToHwp(wPt));
     }
-    for (const wPt of srcPt) colWidths.push(Metric.ptToHwp(wPt));
   } else {
-    for (let c = 0; c < colCount; c++) colWidths.push(defaultColW);
+    // 너비 정보가 없을 때만 균등 배분
+    const defW = Math.round(totalW / colCount);
+    for (let c = 0; c < colCount; c++) colWidths.push(defW);
   }
 
+  // 본문 너비 초과 시에만 비율 축소 보정
   const rawTotal = colWidths.reduce((s, w) => s + w, 0);
-  if (rawTotal > totalWidth * 1.05) {
-    const scale = totalWidth / rawTotal;
-    for (let i = 0; i < colWidths.length; i++) colWidths[i] = Math.round(colWidths[i] * scale);
+  if (rawTotal > totalW && rawTotal > 0) {
+    const scale = totalW / rawTotal;
+    for (let i = 0; i < colWidths.length; i++) {
+      colWidths[i] = Math.max(100, Math.round(colWidths[i] * scale));
+    }
   }
   const actualTotal = colWidths.reduce((s, w) => s + w, 0);
 
-  // 3단계: 행 높이 계산
+  // 행 높이 계산
   const rowHeights: number[] = [];
   for (let ri = 0; ri < rowCount; ri++) {
-    const row = grid.kids[ri];
-    if (row.heightPt != null && row.heightPt > 0) {
-      rowHeights.push(Metric.ptToHwp(row.heightPt));
+    if (
+      grid.kids[ri].heightPt != null &&
+      (grid.kids[ri].heightPt as number) > 0
+    ) {
+      rowHeights.push(Metric.ptToHwp(grid.kids[ri].heightPt as number));
     } else {
       let maxH = 0;
       for (let ci = 0; ci < colCount; ci++) {
         const entry = tableMap[ri][ci];
-        if (entry?.type === 'real') {
+        if (entry?.type === "real") {
           const h = estimateCellHeight(entry.cell!, ctx);
           if (h > maxH) maxH = h;
         }
@@ -733,77 +1674,142 @@ function encodeGrid(grid: GridNode, ctx: HwpxCtx): string {
       rowHeights.push(maxH || Math.round(1000 * 1.6));
     }
   }
-  const totalTableHeight = rowHeights.reduce((s, h) => s + h, 0);
+  const totalH = rowHeights.reduce((s, h) => s + h, 0);
 
-  // 4단계: XML 조립
-  const tblBfId = grid.props.defaultStroke ? addBorderFill(ctx, grid.props.defaultStroke) : 2;
-  let rowsXml = "";
+  const defStroke = grid.props.defaultStroke ?? DEFAULT_STROKE;
+  // 표 기본 테두리 — BorderFillBank에서 실제 ID 조회
+  const tblBfId = ctx.borderFillBank.addUniform(defStroke);
 
+  let rowsXml = "";
   for (let ri = 0; ri < rowCount; ri++) {
     let cellsXml = "";
     for (let ci = 0; ci < colCount; ci++) {
       const entry = tableMap[ri][ci];
-      if (!entry || entry.type === 'absorbed') continue;
-
+      if (!entry || entry.type === "absorbed") continue;
       const cell = entry.cell!;
       const cp = cell.props;
-      let cellBfId = tblBfId;
-
-      const hasPerSideBorder = cp.top || cp.bot || cp.left || cp.right;
-      if (hasPerSideBorder || cp.bg) {
-        const defStroke = grid.props.defaultStroke ?? DEFAULT_STROKE;
-        cellBfId = hasPerSideBorder 
-          ? addBorderFillPerSide(ctx, cp.top ?? defStroke, cp.right ?? defStroke, cp.bot ?? defStroke, cp.left ?? defStroke, cp.bg)
-          : addBorderFill(ctx, defStroke, cp.bg);
-      }
 
-      let cellW = 0;
-      for (let sc = ci; sc < ci + cell.cs && sc < colWidths.length; sc++) cellW += colWidths[sc];
-      if (cellW === 0) cellW = defaultColW * cell.cs;
+      // 셀 테두리 — BorderFillBank에서 실제 ID 조회 (하드코딩 제거)
+      const cellBfId = ctx.borderFillBank.addFromCellProps(cp, defStroke);
 
-      const cellInnerW = Math.max(cellW - 282, 100);
-      const parasXml = cell.kids.map((p) => encodePara(p, ctx, "", cellInnerW)).join("");
+      let cellW = 0;
+      for (let sc = ci; sc < ci + cell.cs && sc < colWidths.length; sc++)
+        cellW += colWidths[sc];
+      if (!cellW) cellW = Math.round(totalW / colCount) * cell.cs;
+
+      const subListId = ctx.nextElementId++;
+
+      // 셀 여백 (기본 141)
+      const padL = cp.padL !== undefined ? Metric.ptToHwp(cp.padL) : 141;
+      const padR = cp.padR !== undefined ? Metric.ptToHwp(cp.padR) : 141;
+      const padT = cp.padT !== undefined ? Metric.ptToHwp(cp.padT) : 141;
+      const padB = cp.padB !== undefined ? Metric.ptToHwp(cp.padB) : 141;
+
+      const innerW = Math.max(cellW - padL - padR, 100);
+      let parasXml = '';
+      if (cell.kids.length > 0) {
+        for (const kid of cell.kids) {
+          if (kid.tag === 'grid') {
+            // 중첩 표: <hp:p><hp:run><hp:tbl>...</hp:tbl></hp:run></hp:p> 형식으로 감싸기
+            const { xml: tblXml } = buildGridXml(kid, ctx);
+            const pid = ctx.nextElementId++;
+            const rid = ctx.nextElementId++;
+            parasXml += `<hp:p id="${pid}" paraPrIDRef="0" styleIDRef="0" paraTcId="0"><hp:run id="${rid}" charPrIDRef="0" charTcId="0">${tblXml}</hp:run></hp:p>`;
+          } else {
+            parasXml += encodeParaPositioned(kid, ctx, 0, '', innerW).xml;
+          }
+        }
+      } else {
+        parasXml = `<hp:p id="${ctx.nextElementId++}" paraPrIDRef="0" styleIDRef="0" paraTcId="0"><hp:run charPrIDRef="0" charTcId="0"><hp:t xml:space="preserve"> </hp:t></hp:run></hp:p>`;
+      }
 
-      cellsXml += `<hp:tc name="" header="0" hasMargin="1" protect="0" editable="0" dirty="0" borderFillIDRef="${cellBfId}">` +
-                  `<hp:subList id="" textDirection="HORIZONTAL" lineWrap="BREAK" vertAlign="${cp.va === "mid" ? "CENTER" : cp.va === "bot" ? "BOTTOM" : "TOP"}" linkListIDRef="0" linkListNextIDRef="0" textWidth="0" textHeight="0" hasTextRef="0" hasNumRef="0">${parasXml}</hp:subList>` +
-                  `<hp:cellAddr colAddr="${ci}" rowAddr="${ri}"/><hp:cellSpan colSpan="${cell.cs}" rowSpan="${cell.rs}"/><hp:cellSz width="${cellW}" height="${rowHeights[ri]}"/><hp:cellMargin left="141" right="141" top="141" bottom="141"/></hp:tc>`;
+      const vAlign =
+        cp.va === "mid" ? "CENTER" : cp.va === "bot" ? "BOTTOM" : "TOP";
+
+      cellsXml +=
+        `<hp:tc name="" header="0" hasMargin="1" protect="0" editable="0" dirty="0" borderFillIDRef="${cellBfId}">` +
+        `<hp:cellAddr colAddr="${ci}" rowAddr="${ri}"/>` +
+        `<hp:cellSpan colSpan="${cell.cs}" rowSpan="${cell.rs}"/>` +
+        `<hp:cellSz width="${cellW}" height="${rowHeights[ri]}"/>` +
+        `<hp:cellMargin left="${padL}" right="${padR}" top="${padT}" bottom="${padB}"/>` +
+        `<hp:subList id="${subListId}" textDirection="HORIZONTAL" lineWrap="BREAK" vertAlign="${vAlign}" ` +
+        `linkListIDRef="0" linkListNextIDRef="0" textWidth="${innerW}" textHeight="${Math.max(100, rowHeights[ri] - padT - padB)}" hasTextRef="0" hasNumRef="0">` +
+        parasXml +
+        `</hp:subList>` +
+        `</hp:tc>`;
     }
     rowsXml += `<hp:tr>${cellsXml}</hp:tr>`;
   }
 
+  // 표 정렬 처리
+  const alignMap: Record<string, string> = {
+    left: 'LEFT', right: 'RIGHT', center: 'CENTER', justify: 'JUSTIFY',
+  };
+  const horzAlign = alignMap[grid.props.align ?? 'left'] ?? 'LEFT';
+
   const headerRow = grid.props.headerRow ? ' repeatHeader="1"' : "";
-  return `<hp:tbl id="${ctx.nextElementId++}" zOrder="0" numberingType="TABLE" textWrap="TOP_AND_BOTTOM" textFlow="BOTH_SIDES" lock="0" dropcapstyle="None" pageBreak="NONE"${headerRow} rowCnt="${rowCount}" colCnt="${colCount}" cellSpacing="0" borderFillIDRef="${tblBfId}" noAdjust="0"><hp:sz width="${actualTotal}" widthRelTo="ABSOLUTE" height="${totalTableHeight}" heightRelTo="ABSOLUTE" protect="0"/><hp:pos treatAsChar="1" affectLSpacing="0" flowWithText="1" allowOverlap="0" holdAnchorAndSO="0" vertRelTo="PARA" horzRelTo="PARA" vertAlign="TOP" horzAlign="LEFT" vertOffset="0" horzOffset="0"/><hp:outMargin left="138" right="138" top="138" bottom="138"/><hp:inMargin left="138" right="138" top="138" bottom="138"/>${rowsXml}</hp:tbl>`;
+  const xml =
+    `<hp:tbl id="${ctx.nextElementId++}" zOrder="0" numberingType="TABLE" textWrap="TOP_AND_BOTTOM" textFlow="BOTH_SIDES" lock="0" dropcapstyle="None" pageBreak="NONE"${headerRow} rowCnt="${rowCount}" colCnt="${colCount}" cellSpacing="0" borderFillIDRef="${tblBfId}" noAdjust="0">` +
+    `<hp:sz width="${actualTotal}" widthRelTo="ABSOLUTE" height="${totalH}" heightRelTo="ABSOLUTE" protect="0"/>` +
+    `<hp:pos treatAsChar="1" affectLSpacing="0" flowWithText="1" allowOverlap="0" holdAnchorAndSO="0" vertRelTo="PARA" horzRelTo="PARA" vertAlign="TOP" horzAlign="${horzAlign}" vertOffset="0" horzOffset="0"/>` +
+    `<hp:outMargin left="138" right="138" top="138" bottom="138"/>` +
+    `<hp:inMargin left="0" right="0" top="0" bottom="0"/>` +
+    rowsXml +
+    `</hp:tbl>`;
+
+  return { xml, height: totalH };
+}
+
+function estimateCellHeight(cell: CellNode, ctx: HwpxCtx): number {
+  const topPad = 141;
+  const botPad = 141;
+  let h = 0;
+  for (const kid of cell.kids) {
+    if (kid.tag === 'grid') {
+      // 중첩 표 높이는 최소값으로 처리
+      h += 1600;
+      continue;
+    }
+    const para = kid;
+    const fs = fontSizeForPara(para, ctx);
+    const ppId = ctx.paraPrMap.get(paraPrKey(para.props));
+    const pp = ppId !== undefined ? ctx.paraPrs[ppId] : null;
+    const ls = pp?.lineSpacing ?? 160;
+    const before = pp?.prevHwp ?? 0;
+    const after = pp?.nextHwp ?? 0;
+    h += Math.round((fs * ls) / 100) + before + after;
+  }
+  if (!h) h = Math.round(1000 * 1.6);
+  return h + topPad + botPad;
 }
 
+// ─── 미리보기 텍스트 추출 ────────────────────────────────────
+
 function extractPreviewText(sheet?: SheetNode): string {
   if (!sheet) return "";
   const lines: string[] = [];
   for (const kid of sheet.kids) {
     if (kid.tag === "para") {
       const text = kid.kids
-        .map((k) => {
-          if (k.tag === "span")
-            return k.kids
-              .map((c) => (c.tag === "txt" ? c.content : ""))
-              .join("");
-          return "";
-        })
+        .flatMap((k) =>
+          k.tag === "span"
+            ? k.kids.flatMap((c) => (c.tag === "txt" ? [c.content] : []))
+            : [],
+        )
         .join("");
       if (text) lines.push(text);
     } else if (kid.tag === "grid") {
       for (const row of kid.kids) {
         const cells = row.kids.map((cell) =>
           cell.kids
-            .map((p) =>
-              p.kids
-                .map((k) => {
-                  if (k.tag === "span")
-                    return k.kids
-                      .map((c) => (c.tag === "txt" ? c.content : ""))
-                      .join("");
-                  return "";
-                })
-                .join(""),
+            .flatMap((p) =>
+              p.tag === 'para'
+                ? p.kids.flatMap((k) =>
+                    k.tag === "span"
+                      ? k.kids.flatMap((c) => (c.tag === "txt" ? [c.content] : []))
+                      : [],
+                  )
+                : [],
             )
             .join(""),
         );
@@ -814,16 +1820,18 @@ function extractPreviewText(sheet?: SheetNode): string {
   return lines.join("\r\n");
 }
 
+// ─── XML 이스케이프 ──────────────────────────────────────────
+
 function esc(s: string): string {
   if (!s) return "";
-  // 1. 내부 처리용 플레이스홀더(__EXT_0__ 등) 제거
-  s = s.replace(/__EXT_\d+__/g, "");
-  // 2. 글자 깨짐을 유발하는 쓰레기값 및 BOM 기호 명시적 제거
-  s = s.replace(/湰灧/g, "");
-  s = s.replace(/\uFEFF/g, "");
-  // 3. XML 1.0에서 허용하지 않는 보이지 않는 제어문자 모두 제거
-  s = s.replace(/[^\x09\x0A\x0D\x20-\uD7FF\uE000-\uFFFD]/g, "");
-
+  s = s.replace(/__EXT_\d+(?:_W\d+_H\d+)?__/g, "");
+  s = s.replace(/湰灧/g, "").replace(/\uFEFF/g, "");
+  // XML 1.0 비허용 제어문자 제거
+  // eslint-disable-next-line no-control-regex
+  s = s.replace(
+    /[^\x09\x0A\x0D\x20-\uD7FF\uE000-\uFFFD\u{10000}-\u{10FFFF}]/gu,
+    "",
+  );
   return TextKit.escapeXml(s);
 }