merge(dev): origin/main_desktop_1 합침 — tools/est-test · stmate-test 는 dev(CODEX · 안티그래비티 워크트리 판) 채택 · 데스크탑 메인 폴더 사본 버림(두 번째)

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

.env

@@ -89,4 +89,7 @@ AUTH_OTP_DISABLED=True
 # 대시보드 지식 챗봇(B01_Dashboard_Knowledge_Chat) NVIDIA 키
 NVIDIA_API_KEY=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
 # 노선분석 산사태위험지도(행안부 생활안전지도 WMS IF_0046 · D03_PlanAnalysis_Landslide) 키 — 비우면 겹 꺼짐
-SAFEMAP_API_KEY=
+SAFEMAP_API_KEY=MFO8CY4O-MFO8-MFO8-MFO8-MFO8CY4O6X
+DATA_GO_KR_API_KEY=0j5WZHeNxSkdPVSLXUsx9kVikXEN%2BDc%2Byv68jz8IpKFffjbZkRiQrJO78y6rxPCTqhiSOW4lDxpid0twkSVQ9g%3D%3D
+# 지오빅데이터(KIGAM) 오픈API 키 · 요구 597
+GEOBIGDATA_API_KEY=FVLh4UQc9x4bvYhXJWRITxF4v3y2ns

.gitignore

@@ -42,6 +42,8 @@ storage/
 #resources/
 # 전국 등고선 gpkg 22GB — 영구 추적 제외 (배포서버 구성 시 직접 배치)
 resources/data_global_contours/national_contours.gpkg
+# 산림 주제도 원본(산림청 공개 파일) — 추적 제외
+resources/data_forest/
 
 # 로그 파일
 *.log
@@ -76,3 +78,8 @@ config/design_calc_node/
 config/e03_walls_node/
 
 ~$*
+
+# graphify 결과(폐기 도구) — 추적 안 함
+graphify-out/
+# 큰 자료 시놀로지 전달용 임시 폴더(git 밖)
+/_sync_data_forest/

A00_Common/app_shell.ts

@@ -133,7 +133,7 @@ function buildBrand(): HTMLButtonElement {
  * 서랍을 열 때 서랍으로 옮기고 닫을 때 제자리(진행 판)로 — 그리기 · 누름 코드는 한 벌. */
 let drawerSteps: { node: HTMLElement; home: HTMLElement | null } | null = null;
 
-/** 집(진행 판) 없는 요소 = 서랍이 늘 가짐 · 닫을 때 안 옮김(B01 · M01 · M02 바로가기) */
+/** 집(진행 판) 없는 요소 = 서랍이 늘 가짐 · 닫을 때 안 옮김(M01 · M02 바로가기 · 기본 목록) */
 export function setDrawerSteps(node: HTMLElement | null): void {
   drawerSteps = node ? { node, home: node.parentElement } : null;
 }
@@ -178,11 +178,20 @@ function buildDrawer(header: HTMLElement): HTMLElement[] {
   const setOpen = (open: boolean): void => {
     header.classList.toggle("is-drawer-open", open);
     burger.setAttribute("aria-expanded", String(open));
+    if (open && !drawerSteps) void fillDefaultSteps();
     if (!drawerSteps) return;
-    if (open) steps.append(drawerSteps.node);
+    if (open)
+      steps.replaceChildren(drawerSteps.node); // 앞서 맡은 기본 목록이 있으면 갈아 끼움
     else if (drawerSteps.home && steps.contains(drawerSteps.node))
       drawerSteps.home.append(drawerSteps.node);
   };
+  // 진행 판 · 바로가기를 안 맡긴 쪽(772-1) = 기본 목록(🏠 대시보드 + 권한별 M01 · M02) · 늦게 온 쪽 목록이 이김
+  const fillDefaultSteps = async (): Promise<void> => {
+    const bar = await import("./m_settings_nav").then((m) => m.defaultSettingsBar());
+    if (!bar || drawerSteps || !steps.isConnected) return;
+    setDrawerSteps(bar);
+    if (header.classList.contains("is-drawer-open")) steps.replaceChildren(bar);
+  };
   burger.addEventListener("click", () => setOpen(!header.classList.contains("is-drawer-open")));
   scrim.addEventListener("click", () => setOpen(false));
   header.addEventListener("keydown", (e) => e.key === "Escape" && setOpen(false)); // ☰ 에 포커스가 있어도 닫힘
@@ -485,7 +494,7 @@ html:is([data-burger="on"], .is-bm-route) .app-burger { display: inline-flex; }
 .app-drawer__steps .ui-workflow-layout__steps.is-vertical .ui-workflow-layout__step { min-height: var(--spacing-40); margin-inline: 8px; width: auto; padding-left: 7px; }
 .app-drawer :is(.ui-btn__label, .ui-workflow-layout__step-label) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .app-drawer__steps .ui-workflow-layout__step--home { margin-bottom: 0; }
-html[data-touch="on"] :is(.app-drawer__nav > *, .app-drawer__site > summary, .app-drawer__steps .ui-workflow-layout__step, .app-drawer__row > *) { min-height: 44px; }
+html[data-touch="on"] :is(.app-drawer__nav > *, .app-drawer__site > summary, .app-drawer__steps .ui-workflow-layout__steps.is-vertical .ui-workflow-layout__step, .app-drawer__row > *) { min-height: 44px; }
 .app-drawer__row {
   display: flex;
   flex-wrap: wrap;

A00_Common/b_page_state.ts

@@ -186,6 +186,8 @@ export const STATE_REGISTRY = {
   "b08-milestone": { bucket: "draft", scope: "project" },
   /** D03 예정노선 노선분석 `{version: 2, network: 그은 선 · 갈래 · 조각}` — [저장] 때 plan/network 로(563-1). */
   "d03-plan": { bucket: "draft", scope: "project" },
+  /** D03 예정노선 분석 지형 원천 `"sheet" | "lidar"`(624-4 · 지형 칩) — 화면 캐시만 · 서버로 안 감. */
+  "d03-terrain": { bucket: "draft", scope: "project" },
   /** B09 원가 사용자 값 `{materials, estimate}`(고친 칸만) — [저장] 때 프로젝트 B09 폴더로(144). */
   "b09-estimation": { bucket: "draft", scope: "project" },
   /** 미저장 계획고 편집(▲▼ · 곡선반경) — 설계 가게 `alignmentDraft` 의 칸(계획서 24-2c).
@@ -200,8 +202,7 @@ export const STATE_REGISTRY = {
   "route-draft-hold": { bucket: "draft", scope: "project" },
   /** D04 연도별 지정 업체 목록(531-3) — [저장] 때 PUT plan/assignees. */
   "d04-assignees": { bucket: "draft", scope: "project" },
-  /* D02 · E 페이지 캐시(401) — 진입 · 떠남 비우기가 같은 표를 봄 · 옛 키는 한 번 옮김. */
-  "d02-points": { bucket: "draft", scope: "project" },
+  /* E 페이지 캐시(401) — 진입 · 떠남 비우기가 같은 표를 봄 · 옛 키는 한 번 옮김. */
   "e02-ground": { bucket: "draft", scope: "project" },
   "e03-prob": { bucket: "draft", scope: "project" },
   "e04-settings": { bucket: "draft", scope: "project" },

A00_Common/calc_sheet.css

@@ -0,0 +1,66 @@
+/* 공용 단가산출 계산서(714-2) — 장비 · 하위 로직 한 줄 = 누르면 펼침 */
+[data-sheet-equip] {
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+
+[data-sheet-equip]:hover,
+[data-sheet-equip]:focus-visible {
+  background: var(--color-hover);
+}
+
+[data-sheet-part] .ui-calc-row__label {
+  padding-left: var(--spacing-16);
+}
+
+p[data-sheet-part] {
+  margin: 0;
+  padding-left: var(--spacing-16);
+}
+
+/* 737-1 옵션 칸 격자 — 상자 폭 따라 1 → 2 → 3 → 4 → 6 열(300 · 450 · 600 · 900) · 칸마다 이름 위 · 고르기 아래 */
+.calc-sheet__opts {
+  container-type: inline-size;
+}
+
+.calc-sheet__opts-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--spacing-8);
+}
+
+@container (min-width: 300px) {
+  .calc-sheet__opts-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 450px) {
+  .calc-sheet__opts-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 600px) {
+  .calc-sheet__opts-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 900px) {
+  .calc-sheet__opts-grid {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+
+.calc-sheet__opts-grid > .ui-calc-row {
+  grid-template-columns: minmax(0, 1fr);
+  align-items: stretch;
+  gap: var(--spacing-4);
+}
+
+.calc-sheet__opts-grid > .ui-calc-row > :is(.ui-calc-row__select, .ui-calc-row__in, .ui-field) {
+  grid-column: 1;
+  justify-self: stretch;
+  width: 100%;
+}

A00_Common/calc_sheet.ts

@@ -0,0 +1,302 @@
+/* =============================================================================
+ * calc_sheet.ts
+ * 공용 「단가산출 계산서」(PLAN 714-2 · 요구서 내역12 4장 5 · 6) — 704-2 M02 계산서 보기를 올린 것.
+ *   쓰는 곳 = M01 「인력·재료·경비」 보기 · M02 기준 목록 계산서 보기(704-2) · (뒤에) 일위대가 모달 · B09 단가산출근거
+ *   꼴 둘 —
+ *     비목(기본 · 704-2) = 비목 묶음마다 식 줄(이름 | 단가 × 품 | 금액) · 소계 · 맨 아래 계
+ *     묶음(`bundle`) = 인력 · 재료 · 경비(장비) · 하위 — 줄의 `묶음`(714-1 서버 덧칸) 으로 다시 묶음 ·
+ *       장비 · 하위 로직 = 한 줄(노 · 재 · 경 칸 · 합) + 누르면 펼침(그 줄의 노 · 재 · 경 식) ·
+ *       묶음 머리 = 이름 · 기준단위 · 환산 근거 · 그 묶음이 쓰는 입력 칸(`쓰는입력`) · 맨 아래 비목 소계 셋 + 계
+ *   값 = 서버 셈 그대로(묶음 소계만 서버 줄 금액의 합) · 변수 칸 바꾸면 `onInput(이름, 값)` — 부르는 쪽이 다시 셈
+ *   부품 = `ui_template_calc_row`(값 줄 · 식 줄) · 입력 · 고르기 · 글 — 날 단추 · 표 · 페이지 CSS 없음
+ * ========================================================================== */
+
+import { createCalcFormula, createCalcFormulaRow, createCalcRow } from "@ui/ui_template_calc_row";
+import { el } from "@ui/ui_template_elements";
+import { createInputField, createSelectField } from "@ui/ui_template_input";
+import { currentLanguageIndex } from "@ui/ui_template_locale";
+import { createText } from "@ui/ui_template_text";
+import { formatLineMoney, formatMoney } from "../common_util/common_util_money";
+import "./calc_sheet.css";
+
+export interface SheetLine {
+  이름: string;
+  /** 서버 값 식 「단가 * 품 = 금액」 — 「= 금액」 은 떼고 「*」 → 「×」 */
+  글: string;
+  금액: number | null;
+  /** 714-1 서버 덧칸 — 그 줄 값이 쓰는 로직 입력 · 묶음 · 장비 · 찾는 표 기준 · 환산 근거 */
+  쓰는입력?: string[];
+  묶음?: string | null;
+  장비?: boolean | null;
+  기준단위?: string | null;
+  환산근거?: string;
+  /** (753-1) 옵션으로 빠진 줄 — 그리지 않음(소계 · 쓰는 입력 칸은 그대로) */
+  옵션꺼짐?: boolean;
+  /** 714-1b 장비 줄 펼침 — 부른 기계경비 로직의 시간당 줄(조종원 · 주연료 · 잡재료비 · 기계손료) */
+  펼침?: SheetUnfold | null;
+}
+export interface SheetUnfold {
+  키: string;
+  이름: string;
+  단위: string;
+  줄: { 비목: string; 이름: string; 글: string; 금액: number | null }[];
+  계: number | null;
+}
+export interface SheetGroup {
+  비목: string;
+  소계: number | null;
+  끝수?: string;
+  줄: SheetLine[];
+}
+export interface SheetInput {
+  이름: string;
+  단위?: string;
+  고르기?: (string | number)[];
+}
+export interface SheetOptions {
+  묶음: SheetGroup[];
+  계: number | null;
+  /** 맨 아래 계 줄 이름(「계 (원/㎡)」) */
+  sumLabel: string;
+  /** 인력 · 재료 · 경비(장비) 묶음으로 다시 묶음(없으면 서버 비목 묶음 그대로 · 704-2) */
+  bundle?: boolean;
+  /** 변수 칸 — 입력 꼴 · 지금 값 · 바꾼 뒤 할 일(없으면 변수 칸 없음) · 칸 = 묶음 줄들의 `쓰는입력` */
+  inputs?: SheetInput[];
+  values?: Record<string, string>;
+  onInput?: (name: string, value: string) => void;
+}
+
+/* ── 순수 셈 ── */
+/** 값 식 → 식 칸 글 — 「268,908 * 0.12 = 32,269」 → 「268,908 × 0.12」 */
+export const sheetFormula = (text: string): string =>
+  text.replace(/ = [^=]*$/, "").replaceAll(" * ", " × ");
+
+/** 장비 · 하위 로직 한 줄 — 비목마다 몫 줄(서버 줄 그대로) · 합 */
+export interface SheetMerged {
+  이름: string;
+  몫: { 비목: string; 줄: SheetLine }[];
+  금액: number | null;
+}
+export interface SheetBundle {
+  묶음: string;
+  줄: (SheetLine | SheetMerged)[];
+  소계: number;
+  쓰는입력: string[];
+  기준단위: string[];
+  환산근거: string[];
+}
+
+const ORDER = ["인력", "재료", "경비", "하위"];
+const OF_COST: Record<string, string> = { 노무비: "인력", 재료비: "재료", 경비: "경비" };
+const add = (a: number | null, b: number | null): number | null =>
+  a === null && b === null ? null : (a ?? 0) + (b ?? 0);
+const merges = (l: SheetLine): boolean => !!l.장비 || l.묶음 === "하위";
+
+/** 비목 묶음 → 인력 · 재료 · 경비 · 하위 묶음 — 장비 · 하위 줄은 비목마다 갈린 몫을 한 줄로
+ * (같은 이름 k 번째끼리 짝 — 서버 줄 차례 = 호표 차례 · 비목마다 같은 차례) */
+export function bundleLines(groups: SheetGroup[]): SheetBundle[] {
+  const bundles = new Map<string, SheetBundle>();
+  const merged = new Map<string, SheetMerged>();
+  const take = (name: string): SheetBundle => {
+    let b = bundles.get(name);
+    if (!b) {
+      b = { 묶음: name, 줄: [], 소계: 0, 쓰는입력: [], 기준단위: [], 환산근거: [] };
+      bundles.set(name, b);
+    }
+    return b;
+  };
+  for (const g of groups) {
+    const seen = new Map<string, number>();
+    for (const line of g.줄) {
+      const b = take(line.묶음 || OF_COST[g.비목] || g.비목);
+      b.소계 += line.금액 ?? 0;
+      for (const n of line.쓰는입력 ?? []) if (!b.쓰는입력.includes(n)) b.쓰는입력.push(n);
+      if (line.기준단위 && !b.기준단위.includes(line.기준단위)) b.기준단위.push(line.기준단위);
+      if (line.환산근거 && !b.환산근거.includes(line.환산근거)) b.환산근거.push(line.환산근거);
+      if (!merges(line)) {
+        b.줄.push(line);
+        continue;
+      }
+      const k = seen.get(line.이름) ?? 0;
+      seen.set(line.이름, k + 1);
+      const id = `${b.묶음}\n${line.이름}\n${k}`;
+      let m = merged.get(id);
+      if (!m) {
+        m = { 이름: line.이름, 몫: [], 금액: null };
+        merged.set(id, m);
+        b.줄.push(m);
+      }
+      m.몫.push({ 비목: g.비목, 줄: line });
+      m.금액 = add(m.금액, line.금액);
+    }
+  }
+  const rank = (x: string): number => (ORDER.includes(x) ? ORDER.indexOf(x) : ORDER.length);
+  return [...bundles.values()].sort((a, b) => rank(a.묶음) - rank(b.묶음));
+}
+/* ── 순수 셈 끝 ── */
+
+const TEXT = {
+  인력: ["인력", "Labor"],
+  재료: ["재료", "Material"],
+  경비: ["경비(장비)", "Expense (equipment)"],
+  하위: ["하위 로직", "Sub logic"],
+  Basis: ["기준", "Basis"],
+  Short: ["노 {a} · 재 {b} · 경 {c}", "L {a} · M {b} · E {c}"],
+  Fold: ["누르면 펼침", "Click to expand"],
+  Per: ["{n} — {v} 원/{u}", "{n} — {v} KRW/{u}"],
+} as const satisfies Record<string, readonly [string, string]>;
+const t = (k: keyof typeof TEXT): string => TEXT[k][currentLanguageIndex as 0 | 1] ?? TEXT[k][0];
+const bundleName = (b: string): string => (b in TEXT ? t(b as keyof typeof TEXT) : b);
+
+const won = (v: number | null, digits = 0): string =>
+  v === null ? "-" : digits ? formatLineMoney(v) : formatMoney(v);
+
+const out = (v: number | null, key = false, digits = 0): HTMLElement =>
+  el("span", { className: `ui-calc-row__out${key ? " is-key" : ""}`, text: won(v, digits) });
+
+const lineRow = (line: SheetLine, label = line.이름): HTMLElement =>
+  createCalcFormulaRow(label, createCalcFormula(sheetFormula(line.글)), out(line.금액, false, 1));
+
+/** 변수 칸 하나 — 고르기 있으면 고르기(값 없으면 빈 첫 칸) · 아니면 글 칸(Enter · 떠남 때 넘김) ·
+ *  722-1 공용 단가산출 상세 박스 옵션도 씀 */
+export function varRow(spec: SheetInput, value: string, onInput: (v: string) => void): HTMLElement {
+  let control: HTMLElement;
+  if (spec.고르기?.length) {
+    control = createSelectField({
+      options: [...(value ? [] : [""]), ...spec.고르기.map(String)].map((o) => ({
+        value: o,
+        text: o,
+      })),
+      value,
+      compact: true,
+      ariaLabel: spec.이름,
+      onChange: onInput,
+    }).root;
+  } else {
+    const box = createInputField({ value, compact: true });
+    box.input.setAttribute("aria-label", spec.이름);
+    box.input.addEventListener("change", () => {
+      if (box.input.value.trim() && box.input.value !== value) onInput(box.input.value.trim());
+    });
+    control = box.root;
+  }
+  const row = createCalcRow(spec.단위 ? `${spec.이름} (${spec.단위})` : spec.이름, control);
+  row.dataset.sheetVar = spec.이름;
+  return row;
+}
+
+/** 옵션 칸들 한 덩이(737-1) — 상자 폭 따라 6 → 4 → 3 → 2 → 1 열 격자(`calc_sheet.css`) · 없으면 빈 목록 */
+export const optionGrid = (rows: HTMLElement[]): HTMLElement[] =>
+  rows.length
+    ? [
+        el("div", {
+          className: "calc-sheet__opts",
+          children: [el("div", { className: "calc-sheet__opts-grid", children: rows })],
+        }),
+      ]
+    : [];
+
+/** 장비 · 하위 한 줄 — 노 · 재 · 경 칸 + 합 · 누르면(Enter · Space) 몫 식 줄 펼침 */
+function mergedRows(m: SheetMerged): HTMLElement[] {
+  const share = (cost: string): number | null =>
+    m.몫.filter((x) => x.비목 === cost).reduce<number | null>((s, x) => add(s, x.줄.금액), null);
+  const short = t("Short")
+    .replace("{a}", won(share("노무비"), 1))
+    .replace("{b}", won(share("재료비"), 1))
+    .replace("{c}", won(share("경비"), 1));
+  const head = createCalcFormulaRow(`▸ ${m.이름}`, createCalcFormula(short), out(m.금액, false, 1));
+  // 펼침 = 부른 기계경비 로직 시간당 줄(손료 · 주연료 · 잡품 · 운전사 · 714-1b) → 이 줄 노 · 재 · 경 몫 식
+  const unfold = m.몫.find((x) => x.줄.펼침)?.줄.펼침;
+  const parts = [
+    ...(unfold
+      ? [
+          createText(
+            t("Per")
+              .replace("{n}", unfold.이름)
+              .replace("{v}", won(unfold.계, 1))
+              .replace("{u}", unfold.단위 || "-"),
+            "hint",
+          ),
+          ...unfold.줄.map((x) => lineRow(x, `${x.이름} (${x.비목})`)),
+        ]
+      : []),
+    ...m.몫.map((x) => lineRow(x.줄, `${x.비목}`)),
+  ];
+  for (const p of parts) {
+    p.hidden = true;
+    p.dataset.sheetPart = m.이름;
+  }
+  head.dataset.sheetEquip = m.이름;
+  head.title = t("Fold");
+  head.tabIndex = 0;
+  head.setAttribute("role", "button");
+  head.setAttribute("aria-expanded", "false");
+  const label = head.firstElementChild as HTMLElement;
+  const toggle = (): void => {
+    const open = head.getAttribute("aria-expanded") !== "true";
+    head.setAttribute("aria-expanded", String(open));
+    label.textContent = `${open ? "▾" : "▸"} ${m.이름}`;
+    parts.forEach((p) => (p.hidden = !open));
+  };
+  head.addEventListener("click", toggle);
+  head.addEventListener("keydown", (ev) => {
+    if (ev.key !== "Enter" && ev.key !== " ") return;
+    ev.preventDefault();
+    toggle();
+  });
+  return [head, ...parts];
+}
+
+/** 묶음 머리 — 이름 · 기준 · 환산 근거 · 쓰는 입력 칸 */
+function headRows(
+  name: string,
+  uses: string[],
+  o: SheetOptions,
+  specs: Map<string, SheetInput>,
+  basis: string[] = [],
+  notes: string[] = [],
+): HTMLElement[] {
+  const vars = o.onInput ? uses.filter((n) => specs.has(n)) : [];
+  if (!vars.length && !o.bundle) return [];
+  const title = [name, basis.length ? `${t("Basis")} ${basis.join(" · ")}` : ""].filter(Boolean);
+  const head = createText(title.join(" — "), "muted", 14);
+  head.dataset.sheetHead = name;
+  const rows: HTMLElement[] = [head];
+  if (notes.length) rows.push(createText(notes.join(" · "), "hint"));
+  const onInput = o.onInput;
+  if (onInput)
+    for (const n of vars)
+      rows.push(varRow(specs.get(n)!, o.values?.[n] ?? "", (v) => onInput(n, v)));
+  return rows;
+}
+
+const subtotal = (g: SheetGroup): HTMLElement =>
+  createCalcFormulaRow(`${g.비목}${g.끝수 ? ` (${g.끝수})` : ""}`, null, out(g.소계, true));
+
+/** 옵션으로 빠진 줄(753-1)은 안 그림 — 장비 · 하위 몫 줄은 몫이 다 빠졌을 때만 */
+const shown = (l: SheetLine | SheetMerged): boolean =>
+  "몫" in l ? l.몫.some((x) => !x.줄.옵션꺼짐) : !l.옵션꺼짐;
+
+/** 계산서 줄들 — 부르는 쪽 세로 칸(flex column)에 그대로 붙임 */
+export function calcSheetRows(o: SheetOptions): HTMLElement[] {
+  const rows: HTMLElement[] = [];
+  const specs = new Map((o.inputs ?? []).map((s) => [s.이름, s]));
+  if (o.bundle) {
+    for (const b of bundleLines(o.묶음)) {
+      const name = bundleName(b.묶음);
+      rows.push(...headRows(name, b.쓰는입력, o, specs, b.기준단위, b.환산근거));
+      for (const line of b.줄.filter(shown))
+        rows.push(...("몫" in line ? mergedRows(line) : [lineRow(line)]));
+      rows.push(createCalcFormulaRow(name, null, out(b.소계, true, 1)));
+    }
+    rows.push(...o.묶음.map(subtotal)); // 맨 아래 비목 소계(서버 끝수 그대로) — 장비 노무는 여기서 인력 노무와 더해짐
+  } else {
+    for (const g of o.묶음) {
+      const uses = [...new Set(g.줄.flatMap((l) => l.쓰는입력 ?? []))];
+      rows.push(...headRows(g.비목, uses, o, specs));
+      rows.push(...g.줄.filter(shown).map((line) => lineRow(line)), subtotal(g));
+    }
+  }
+  rows.push(createCalcFormulaRow(o.sumLabel, null, out(o.계, true)));
+  return rows;
+}

A00_Common/design/design_save.ts

@@ -52,6 +52,22 @@ import { designSignature, markDesignClean } from "./design_leave";
 import { routeGradeTouch } from "./design_pipeline_page";
 import type { GradeTouch } from "../../B05_Profile/logic/B05_Profile_Pipeline_Grade";
 
+/** [저장] · [확정] 막음(755-3) — 글을 돌려주면 알림하고 안 냄 · `root` 가 화면에서 빠지면 풂. */
+const saveHolds: Array<{ root: HTMLElement; hold: () => string | null }> = [];
+export function holdDesignSave(root: HTMLElement, hold: () => string | null): void {
+  saveHolds.push({ root, hold });
+}
+function heldSave(): string | null {
+  for (let index = saveHolds.length - 1; index >= 0; index -= 1) {
+    if (!saveHolds[index].root.isConnected) saveHolds.splice(index, 1);
+  }
+  for (const { hold } of saveHolds) {
+    const why = hold();
+    if (why) return why;
+  }
+  return null;
+}
+
 export interface DesignSaveContext {
   projectId: string;
   routeId: () => number | null;
@@ -249,6 +265,8 @@ export async function saveDesign(
   const confirm = options.confirm ?? false;
   const routeId = ctx.routeId();
   if (routeId === null) return false;
+  const held = heldSave();
+  if (held) return (showToast(held, "warning"), false);
   saving.add(ctx.projectId);
   let locked = confirm;
   if (locked) showLoadingOverlay();

A00_Common/design/design_view_profile.ts

@@ -546,7 +546,6 @@ export async function mountProfileView(
       contourIntervalM: latestResponse.surface_params.contour_interval_m,
       smooth: latestResponse.surface_params.smooth,
       tools: [view3d.modal.button],
-      recommend: panel.recommend,
       // 계산 묶음(346-1) — 페이지가 세운 다리(365-1) · 노선을 고칠 때마다 종단이 따라옴(미리보기 · [저장]이 정본).
       draft: routeDraftBridge(activeProjectId, profilePanel),
     });

A00_Common/design/design_view_profile_3d_modal.ts

@@ -74,10 +74,7 @@ export function createViewer3dModal(deps: Viewer3dModalDeps) {
   }
 
   // 평면 도구줄 아이콘 단추(568-2) — 클래스는 가이드 촬영이 잡음.
-  const button = mapToolButton("view3d", {
-    title: "3D 화면을 큰 창으로 엽니다 — 닫으면 그리기를 멈춥니다",
-    onClick: open,
-  });
+  const button = mapToolButton("view3d", { onClick: open }); // 마우스 글 = 공용 표(634-2)
   button.classList.add("b05-route__3d-open");
 
   return {

A00_Common/design/logic/design_pipeline_types.ts

@@ -76,6 +76,8 @@ export interface RouteDraft {
   stationSnapStep?: number | null;
   /** 분석 지형(`las` · `sheet` · null = 확정 지표면) — ground 단계가 고를 격자. */
   terrain: string | null;
+  /** 고친 예정노선(626-3 · B05 평면 그리기) — 없음 · null = 그대로 · [] = 지움 · 점 묶음 = [저장] 때 `expected_route_edit.csv`. */
+  expected?: Vertex[] | null;
 }
 
 /** 묶음이 받는 입력 다섯. 없으면 null(= 저장분 그대로). cross · pipes · structures 모양은 주인 몫. */

A00_Common/formula_doc_copy.ts

@@ -0,0 +1,89 @@
+/* =============================================================================
+ * formula_doc_copy.ts
+ * 수식 문서 사본 몫(PLAN 802-4b-2 · 요구 655-2 · 656 · 659-3) — M02 단가산출(SK) 수식 탭 머리
+ *   「M01 새 판 있음」 배지(값 줄 · 부름 문서가 지금 M01 과 다름) · [단가 갱신](자원 단가만 · 식 그대로) ·
+ *   [재생성](지금 M01 문서로 다시 찍음 · 버리는 것 알림) — 누를 때만(자동 갱신 없음)
+ *   흐름 = 미리 셈(`{길}/preview` {할일}) → 확인 창(계 전 → 후 · 바뀐 자원 · 버리는 것) → 저장(`{길}/save` {할일, 판})
+ *   층 쓰기 권한 없으면 「읽기만」 배지
+ * ========================================================================== */
+
+import { createBadge } from "@ui/ui_template_badge";
+import { createButton } from "@ui/ui_template_button";
+import { eqText } from "@ui/ui_template_equation";
+import { showConfirmDialog } from "@ui/ui_template_elements";
+import { ft } from "./formula_doc_text";
+
+export type CopyJob = "단가갱신" | "재생성";
+
+/** 사본 표지(서버 `M02_Doc_Copy.state` + 시점 · 따로) */
+export interface CopyMark {
+  M01새판?: boolean;
+  지운키?: string[];
+  단가새값?: boolean;
+  문서새판?: string[];
+  따로?: boolean;
+}
+
+export interface CopyOptions {
+  /** SK 키 · 꼬리(`""` · `/preview` · `/table?key=…`) → 길(`/m02/layers/{층}/sangeun/{키}/doc…` · 주인 물음) */
+  route: (key: string, path: string) => string;
+  /** 저장 뒤 그 SK 새 판(페이지 [저장] 409 막음) */
+  onSaved?: (version: string) => void;
+}
+
+type Money = Record<string, number | null> | null;
+
+export interface JobReply {
+  전?: Money;
+  후?: Money;
+  바뀐자원?: unknown[];
+  버림?: { 문서고침?: boolean; 끊음?: string[] };
+}
+
+/** 「M01 새 판 있음」 — 값 줄 · 단가 · 부름 문서 어느 하나라도 지금 M01 과 다름 */
+export function isStale(m: CopyMark | undefined): boolean {
+  return !!m && (!!m.M01새판 || !!m.단가새값 || !!m.지운키?.length || !!m.문서새판?.length);
+}
+
+export function copyBadges(m: CopyMark | undefined, edit: boolean): HTMLElement[] {
+  const out: HTMLElement[] = [];
+  if (isStale(m)) {
+    const b = createBadge(ft("New_M01"), "danger");
+    b.dataset.copyStale = "";
+    out.push(b);
+  }
+  if (!edit) out.push(createBadge(ft("Read_Only"), "neutral"));
+  return out;
+}
+
+export function copyTools(edit: boolean, run: (job: CopyJob) => void): HTMLElement[] {
+  if (!edit) return [];
+  return (["단가갱신", "재생성"] as const).map((job) => {
+    const b = createButton({
+      label: job === "단가갱신" ? ft("Price") : ft("Regen"),
+      variant: "ghost",
+      size: 28,
+      onClick: () => run(job),
+    });
+    b.dataset.copyJob = job;
+    return b;
+  });
+}
+
+const sum = (m: Money | undefined): string =>
+  typeof m?.계 === "number" ? `${eqText(m.계)} 원` : "—";
+
+/** 할일 알림 — 계 전 → 후 · 바뀐 자원 수 · 재생성이 버리는 것(이름) → 확인이면 true */
+export function askJob(job: CopyJob, got: JobReply, names: Map<string, string>): Promise<boolean> {
+  const bits = [
+    job === "단가갱신" ? ft("Price_Ask") : ft("Regen_Ask"),
+    `${ft("Before_After")} ${sum(got.전)} → ${sum(got.후)}`,
+  ];
+  if (job === "단가갱신") bits.push(`${ft("Changed")} ${got.바뀐자원?.length ?? 0}`);
+  const lost = [
+    ...(got.버림?.문서고침 ? [ft("Regen_Edit")] : []),
+    ...(got.버림?.끊음 ?? []).map((k) => `${ft("Cut")} ${names.get(k) || k}`),
+  ];
+  if (job === "재생성" && lost.length) bits.push(`${ft("Regen_Lost")} — ${lost.join(" · ")}`);
+  return showConfirmDialog(bits.join(" · "), job === "단가갱신" ? ft("Price") : ft("Regen"));
+}

A00_Common/formula_doc_foot.ts

@@ -0,0 +1,20 @@
+/* =============================================================================
+ * formula_doc_foot.ts
+ * 수식 탭 맨 아래 합계 상자(PLAN 803-2a · 요구 667-2) — 단가산출 상세 탭과 같은 부품(`buildFoot` · 노무비 · 재료비 · 경비 · 계)
+ *   값 = 계산기 셈 그대로(여기서 다시 셈 안 함) · 셈 못 함 = 「—」
+ * ========================================================================== */
+
+import type { DocAnswer } from "../common_util/common_util_formula_doc_calc";
+import { buildFoot } from "../M01_MasterData/M01_MasterData_UI_LogicLab_Foot";
+import "../M01_MasterData/M01_MasterData_UI_LogicLab_Style.css";
+
+const num = (v: unknown): number => (typeof v === "number" && Number.isFinite(v) ? v : 0);
+
+export function docFoot(a: DocAnswer): HTMLElement {
+  const done = !!a.셈됨 && typeof a.계 === "number";
+  return buildFoot(
+    { labor: num(a.노무비), material: num(a.재료비), cost: num(a.경비) },
+    done,
+    num(a.계),
+  );
+}

A00_Common/formula_doc_options.ts

@@ -0,0 +1,55 @@
+/* =============================================================================
+ * formula_doc_options.ts
+ * 수식 문서 옵션 가로(PLAN 802-3 · 802-4b-2 · 요구 655 「옵션 선택은 상단에 수평」) — 선택 · 입력 기호마다 칸 하나
+ *   값 = 화면 값(`given`) › 문서 값 · 고침은 부른 쪽 `set`(M01 = 화면 값만 · M02 사본 = 문서 값) · `lock` = 읽기만
+ * ========================================================================== */
+
+import { createInputField, createSelectField } from "@ui/ui_template_input";
+import { varId, type DocVar, type FormulaDoc } from "../common_util/common_util_formula_doc";
+
+export function buildOptions(
+  doc: FormulaDoc | null,
+  given: Record<string, unknown>,
+  lock: boolean,
+  set: (key: string, v: DocVar, value: unknown) => void,
+): HTMLElement[] {
+  const out: HTMLElement[] = [];
+  for (const v of doc?.변수 ?? []) {
+    const kind = v.연결?.갈래;
+    const k = v.열쇠;
+    if (!k || (kind !== "선택" && kind !== "입력")) continue;
+    const label = v.이름 || varId(v);
+    const now = k in given ? given[k] : v.연결?.값;
+    if (kind === "선택") {
+      const list = (v.연결?.목록 ?? []).map(String);
+      const f = createSelectField({
+        label,
+        options: list.map((x) => ({ value: x, text: x })),
+        value: String(now ?? ""),
+        compact: true,
+        size: 28,
+        disabled: lock,
+        onChange: (x) => set(k, v, x),
+      });
+      f.root.dataset.option = k;
+      out.push(f.root);
+    } else {
+      const f = createInputField({
+        label,
+        value: now === undefined || now === null ? "" : String(now),
+        compact: true,
+        size: 28,
+        unit: v.단위 || undefined,
+      });
+      f.input.disabled = lock;
+      f.input.addEventListener("change", () => {
+        const t = f.input.value.trim();
+        const n = Number(t.replace(/,/g, ""));
+        set(k, v, t !== "" && Number.isFinite(n) ? n : t);
+      });
+      f.root.dataset.option = k;
+      out.push(f.root);
+    }
+  }
+  return out;
+}

A00_Common/formula_doc_render.ts

@@ -0,0 +1,82 @@
+/* =============================================================================
+ * formula_doc_render.ts
+ * 수식 문서 닿는 기호(PLAN 802-3 · 804-6) — 줄 쌓기 산출근거(`line_stack_out.ts`)가 씀
+ *   reach = 지금 탄 갈래로 닿는 기호(만약 안 탄 갈래 · 숨김 자리 인자 빼고)
+ *   옛 수식 문서 탭의 조판 그림(renderNode · 값 식 · 수 바꿈)은 804-6 에 걷음
+ * ========================================================================== */
+
+import {
+  linkNames,
+  varId,
+  type FormulaDoc,
+  type Node,
+} from "../common_util/common_util_formula_doc";
+import {
+  offLine,
+  takenOf,
+  tryParse,
+  type Values,
+} from "../common_util/common_util_formula_doc_view";
+
+/** 탄 갈래로 부르는 이름(만약 안 탄 갈래 · 숨김 자리 인자 빼고) */
+function namesTaken(n: Node, vals: Values, out: string[] = []): string[] {
+  const add = (x: string): void => {
+    if (!out.includes(x)) out.push(x);
+  };
+  switch (n[0]) {
+    case "var":
+      add(n[1]);
+      break;
+    case "bin":
+      namesTaken(n[2], vals, out);
+      namesTaken(n[3], vals, out);
+      break;
+    case "neg":
+    case "pct":
+    case "field":
+      namesTaken(n[1], vals, out);
+      break;
+    case "call": {
+      const pick = takenOf(n, vals);
+      const items = pick ? [n[2][0], n[2][pick]] : n[2];
+      items.forEach((x) => namesTaken(x, vals, out));
+      break;
+    }
+  }
+  return out;
+}
+
+const RESERVED_MONEY = new Set(["노무비", "재료비", "경비", "번지", "단계"]);
+
+/** 정의 영역에 보일 기호 — 식 줄 · 금액 줄 · 결과에서 지금 탄 갈래로 닿는 것(보이는 차례) */
+export function reach(doc: FormulaDoc, vals: Values, showOff = false): string[] {
+  const vars = new Map((doc.변수 ?? []).map((v) => [varId(v), v]));
+  const lines = new Map((doc.식 ?? []).map((l) => [String(l.기호 ?? ""), l.식]));
+  const money = new Set((doc.금액 ?? []).map((l) => String(l.기호 ?? "")).filter(Boolean));
+  const out: string[] = [];
+  const visit = (name: string): void => {
+    if (!name || out.includes(name) || RESERVED_MONEY.has(name) || money.has(name)) return;
+    out.push(name);
+    if (lines.has(name)) {
+      const n = tryParse(lines.get(name));
+      if (n) namesTaken(n, vals).forEach(visit);
+    }
+    const v = vars.get(name);
+    if (v?.연결 && v.연결.갈래 !== "식") linkNames(v.연결).forEach(visit);
+  };
+  const from = (text: unknown): void => {
+    const n = tryParse(text);
+    if (n) namesTaken(n, vals).forEach(visit);
+  };
+  for (const l of doc.식 ?? []) {
+    visit(String(l.기호 ?? ""));
+    from(l.식);
+  }
+  for (const l of doc.금액 ?? []) {
+    if (!showOff && offLine(l, vals, lines)) continue;
+    from(l.수량);
+    from(l.단가);
+  }
+  if (doc.결과) visit(String(doc.결과));
+  return out;
+}

A00_Common/formula_doc_text.ts

@@ -0,0 +1,96 @@
+/* =============================================================================
+ * formula_doc_text.ts
+ * 수식 문서 화면 글(PLAN 802-3 · 803-2a) — [국문, 영문]
+ * ========================================================================== */
+
+import { currentLanguageIndex } from "@ui/ui_template_locale";
+
+const TEXT = {
+  Sym_Head: ["기호 식", "Symbol equation"],
+  Val_Head: ["값 식", "Value equation"],
+  Defs_Head: ["기호 정의", "Symbols"],
+  New_Group: ["새 묶음", "New group"],
+  Unnamed: ["이름 없음", "Unnamed"],
+  Subtotal: ["소계", "Subtotal"],
+  Sum: ["계", "Sum"],
+  Total: ["합계", "Total"],
+  Need: ["정의 필요", "Needs definition"],
+  Unused: ["쓰지 않는 기호", "Unused symbols"],
+  Show_Off: ["꺼진 줄 보기", "Show off lines"],
+  Hide_Off: ["꺼진 줄 숨김", "Hide off lines"],
+  Save: ["수식 저장", "Save equation"],
+  Discard: ["고침 버림", "Discard"],
+  Saved: ["수식 저장됨", "Equation saved"],
+  Save_Failed: ["저장 못 함", "Save failed"],
+  Load_Failed: ["수식 문서를 못 읽음", "Failed to load"],
+  Leave: ["저장 안 한 수식 고침이 있음 — 버리고 나갈까요?", "Discard unsaved edits?"],
+  Leave_Ok: ["버리고 나감", "Discard"],
+  Result: ["결과", "Result"],
+  Result_Sym: ["결과 기호", "Result symbol"],
+  Dirty: ["저장 안 한 고침", "Unsaved edits"],
+  Sign: ["기호", "Symbol"],
+  Low: ["아래첨자", "Subscript"],
+  Up: ["위첨자", "Superscript"],
+  Name: ["국문 이름", "Name"],
+  Unit: ["단위", "Unit"],
+  Link: ["연결", "Link"],
+  Drop_Var: ["정의 지움", "Delete definition"],
+  Value: ["값", "Value"],
+  List: ["목록(· 로 나눔)", "Options (· separated)"],
+  Default: ["기본", "Default"],
+  Low_Bound: ["아래 끝", "Min"],
+  High_Bound: ["위 끝", "Max"],
+  Find: ["찾기", "Search"],
+  Column: ["칸", "Column"],
+  Cond: ["조건", "Condition"],
+  Inputs: ["넘길 입력", "Inputs"],
+  Region: ["지역 기호", "Region symbol"],
+  Make_Line: ["식 줄 만들기", "Add line"],
+  By_Line: ["식 줄로 정의", "Defined by a line"],
+  Pick_First: ["찾아 고름", "Search and pick"],
+  Material: ["재료 고르기", "Material pick"],
+  None: ["없음", "None"],
+  Open_Sub: ["식 펼침", "Show equation"],
+  Bad_Sign: ["기호 꼴 아님 · 같은 기호 있음", "Bad or duplicate symbol"],
+  More: ["더 있음 — 찾는 말을 더 넣으세요", "More — refine search"],
+  Nothing: ["찾은 것 없음", "Nothing found"],
+  Linked: ["연결", "Linked"],
+  Cut: ["끊음", "Unlinked"],
+  Unlink: ["연결 끊기", "Unlink"],
+  Relink: ["다시 잇기", "Relink"],
+  Ask_Relink: [
+    "이 기초에서 고친 것을 버리고 부르던 문서로 돌아감",
+    "Discard edits to this basis and follow the copy again",
+  ],
+  New_M01: ["M01 새 판 있음", "New M01 version"],
+  Price: ["단가 갱신", "Refresh prices"],
+  Regen: ["재생성", "Regenerate"],
+  Price_Ask: ["자원 단가만 지금 M01 값으로 — 식 · 연결 그대로", "Prices only — equation unchanged"],
+  Regen_Ask: ["지금 M01 수식 문서로 다시 찍음", "Re-copy from the current M01 equation"],
+  Regen_Lost: ["버리는 것", "Discarded"],
+  Regen_Edit: ["수식 고침", "Equation edits"],
+  Changed: ["바뀐 자원", "Changed resources"],
+  Before_After: ["계", "Sum"],
+  Job_Done: ["적용함", "Applied"],
+  Dirty_First: [
+    "저장 안 한 고침이 있음 — [저장] 또는 [되돌림] 먼저",
+    "Save or discard edits first",
+  ],
+  No_Key: [
+    "저장한 단가산출만 수식 문서를 엶 — [단가산출 상세] 탭",
+    "Saved items only — use the detail tab",
+  ],
+  Read_Only: ["읽기만", "Read only"],
+  Tools: ["수식 도구", "Equation tools"],
+  Tool_Frac: ["분수", "Fraction"],
+  Tool_Sub: ["아래첨자", "Subscript"],
+  Tool_Sup: ["위첨자", "Superscript"],
+  Tool_Paren: ["( )", "( )"],
+  Tool_If: ["만약", "If"],
+  Tool_Round: ["반올림", "Round"],
+  Tool_Group: ["묶음", "Group"],
+} as const;
+
+export type TextKey = keyof typeof TEXT;
+
+export const ft = (key: TextKey): string => TEXT[key][currentLanguageIndex === 1 ? 1 : 0];

A00_Common/group_workflow.ts

@@ -28,8 +28,8 @@ interface GroupFlow {
 const FLOWS: readonly GroupFlow[] = [
   {
     routes: PLAN_STEP_ROUTES,
-    labels: ["DE_Step_PlanBase", "DE_Step_PlanAnalysis", "DE_Step_PlanConfirm"],
-    icons: ["📍", "🧭", "✅"],
+    labels: ["DE_Step_PlanAnalysis", "DE_Step_PlanConfirm"],
+    icons: ["🧭", "✅"],
   },
   {
     routes: STAB_STEP_ROUTES,

A00_Common/key_registry.ts

@@ -20,7 +20,6 @@ export type KeyScope =
   | "drainage"
   | "section"
   | "plan"
-  | "d02"
   | "b04"
   | "cad"
   | "b08"
@@ -48,8 +47,7 @@ export const KEY_SCOPES: Record<KeyScope, { label: Text; page: string }> = {
   routeEdit: { label: ["B05 노선 편집(평면)", "B05 route edit (plan)"], page: "b05" },
   drainage: { label: ["B05 배수 · 3D", "B05 drainage · 3D"], page: "b05" },
   section: { label: ["B06 횡단", "B06 cross section"], page: "b05" },
-  plan: { label: ["D03 노선분석", "D03 route analysis"], page: "plan" },
-  d02: { label: ["D02 기준지정", "D02 base points"], page: "d02" },
+  plan: { label: ["D03 예정노선", "D03 planned route"], page: "plan" },
   b04: { label: ["B04 지도 · 3D", "B04 map · 3D"], page: "b04" },
   cad: { label: ["CAD", "CAD"], page: "cad" },
   b08: { label: ["B08 수량 · 이정표", "B08 quantity · milestones"], page: "b08" },
@@ -140,17 +138,20 @@ export const KEY_ACTIONS: readonly KeyAction[] = [
   A("plan.redo", "plan", ["Ctrl+Shift+Z", "Ctrl+Y"], ["다시", "Redo"]),
   A("plan.drawFinish", "plan", ["Enter"], ["그리기 끝", "Finish drawing"]),
   A("plan.drawBack", "plan", ["Backspace"], ["그리기 마지막 점 빼기", "Drawing: remove last point"]),
-  A("plan.delete", "plan", ["Delete"], ["고른 것 지움", "Delete selection"]),
+  A("plan.drawKind", "plan", ["Tab"], ["긋는 중 방식 자유지정 ↔ 길이·기울기 고정", "Drawing: free ↔ length + slope"]),
+  A("plan.drawBetween", "plan", ["Shift 누른 채"], ["길이·기울기 고정 긋는 중 부채꼴 사이 기울기 자리(길이 그대로)", "Drawing: pick between-slope on fan (length kept)"], F),
+  A("plan.delete", "plan", ["Delete"], ["고른 노드 · 선 · 구역 · 전체 · 마커 지움", "Delete picked node · segment · region · all · marker"]),
   A("plan.escape", "plan", ["Escape"], ["그리기 취소 · 고름 풀기 · 재기 끝", "Cancel drawing · clear selection · end measure"], F),
   A("plan.zoom", "plan", ["휠"], ["커서 자리 확대 · 축소", "Zoom at cursor"], F),
   A("plan.rotate", "plan", ["Ctrl+휠"], ["지도 돌림", "Rotate map"], F),
   A("plan.pan", "plan", [PAN], ["화면 옮김", "Pan"], F),
-  A("plan.vertex", "plan", ["고른 선 누름", "꼭짓점 끌기"], ["꼭짓점 넣고 끌기 · 옮김", "Insert · drag vertex"], F),
-  A("plan.unvertex", "plan", ["꼭짓점 · 마커 오른쪽 누름"], ["지움", "Delete"], F),
+  A("plan.select", "plan", ["누름 · 다시 누름"], ["노드 → 선 → 구역 → 전체 고름", "Pick node → segment → region → all"], F),
+  A("plan.vertex", "plan", ["고른 선 끌기", "노드 끌기"], ["꼭짓점 넣고 끌기 · 노드 옮김(지점 같이)", "Insert · drag vertex (point follows)"], F),
+  A("plan.unvertex", "plan", ["노드 · 마커 오른쪽 누름"], ["메뉴 [노드 지움] · [마커 지움]", "Menu: delete node · marker"], F),
   A("plan.measure", "plan", ["재기: 누름 · 누름"], ["시점 · 종점", "Start · end"], F),
 
-  A("d02.place", "d02", ["지도 누름"], ["지점 놓기", "Place point"], F),
-  A("d02.drag", "d02", ["표식 끌기"], ["지점 옮김", "Move point"], F),
+  A("plan.menu", "plan", ["오른쪽 누름"], ["지도 메뉴 — 긋기 · 지점 놓기 · 노드 지움 · 연도 구역 나눔", "Map menu — draw · place point · delete node · split year"], F),
+  A("plan.point", "plan", ["지점 핀 끌기"], ["지점 옮김(그 자리 노드 같이 · 노드 12 px 안 = 붙음)", "Move point (with its node · snaps within 12 px)"], F),
 
   A("b04.zoom", "b04", ["휠"], ["지도 · 3D 확대 · 축소", "Map · 3D zoom"], F),
   A("b04.pan", "b04", [PAN], ["지도 · 3D 옮김", "Map · 3D pan"], F),

A00_Common/line_stack.css

@@ -0,0 +1,397 @@
+/* 줄 쌓기 탭(804-2) — 위 옵션 · 가운데 왼쪽 편집 | 오른쪽 산출근거 · 맨 아래 합계 상자 · 색은 공통 값만 */
+.lstk {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  min-width: 0;
+  container-type: inline-size;
+}
+
+.lstk__head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.lstk__bar,
+.lstk__badges,
+.lstk__tools {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+}
+
+.lstk__areas {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+  gap: var(--spacing-12);
+  align-items: start;
+}
+
+.lstk:not([data-edit="1"]) .lstk__areas {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.lstk:not([data-edit="1"]) .lstk__left {
+  display: none;
+}
+
+/* 합계 상자(요구 687-3) — 스크롤해도 화면 아래 고정 */
+.lstk__foot {
+  position: sticky;
+  inset-block-end: 0;
+  z-index: 2;
+  padding-block: var(--spacing-8);
+  background: var(--color-surface);
+  border-block-start: 1px solid var(--color-border);
+}
+
+.lstk__foot:empty {
+  display: none;
+}
+
+/* 산출근거(요구 683) — 왼쪽을 내려도 화면에 고정 · 길면 자기 스크롤(높이 = 스크롤 영역 − 합계 상자 · fit()) */
+.lstk[data-edit="1"] .lstk__right {
+  position: sticky;
+  inset-block-start: 0;
+  max-height: var(--lstk-view, 100vh);
+  overflow: auto;
+}
+
+/* 탭 폭이 좁으면(1366 화면 등) 편집 위 · 산출근거 아래(고정 없음) */
+@container (max-width: 1040px) {
+  .lstk__areas {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .lstk[data-edit="1"] .lstk__right {
+    position: static;
+    max-height: none;
+    overflow: visible;
+  }
+}
+
+/* ── 왼쪽 편집 ── */
+.lstk-edit {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+
+/* 항목(804-5) — 머리 띠(바탕 · 왼쪽 굵은 띠 · 번호) · 줄 = 들여쓰기 + 왼쪽 세로 선 · 가나다 = 한 단 더 들여씀 */
+.lstk-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.lstk-item.is-sub {
+  margin-inline-start: var(--spacing-24);
+}
+
+.lstk-item + .lstk-item.is-sub {
+  margin-block-start: calc(-1 * var(--spacing-8));
+}
+
+/* 그룹 머리 한 줄(요구 687-6 · 688) — 이름 칸이 늘고 줄어 [+] · X 는 늘 오른쪽 끝(접어도 그대로) */
+.lstk-ihead {
+  flex-wrap: nowrap;
+  align-items: center;
+  padding: var(--spacing-4) var(--spacing-8);
+  border-inline-start: 4px solid var(--color-accent);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-sunken);
+}
+
+.lstk-item.is-sub > .lstk-ihead {
+  border-inline-start-color: var(--color-border-strong);
+}
+
+.lstk-ihead > .lstk-f-l {
+  flex: 1 1 auto;
+  min-width: 4em;
+}
+
+.lstk-count {
+  flex: none;
+  white-space: nowrap;
+}
+
+.lstk-no {
+  flex: none;
+  min-width: 1.5em;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+}
+
+.lstk-lines {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  margin-inline-start: var(--spacing-12);
+  padding-inline-start: var(--spacing-12);
+  border-inline-start: 2px solid var(--color-border-strong);
+}
+
+.lstk-ihead,
+.lstk-fhead,
+.lstk-frow,
+.lstk-find {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-4) var(--spacing-8);
+  min-width: 0;
+}
+
+.lstk-frow {
+  align-items: center;
+}
+
+/* 줄 카드 — 금액 · 글 = 한 줄(요구 687-7 · [손잡이][종류][이름][수량][단위][비목][X] · 좁으면 접힘) · 공식 = 머리 줄 + 식 줄 */
+.lstk-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-4) var(--spacing-8);
+  padding: var(--spacing-4) var(--spacing-8);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-raised);
+}
+
+.lstk-line.k-공식 {
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  position: relative;
+  padding-inline-start: var(--spacing-24);
+}
+
+.lstk-line > .lstk-x,
+.lstk-fhead > .lstk-x {
+  margin-inline-start: auto;
+}
+
+.lstk-line > .lstk-f-l,
+.lstk-line > .lstk-qty {
+  flex: 1 1 8em;
+  min-width: 6em;
+}
+
+.lstk-line > .lstk-f-m {
+  flex: 1 1 7em;
+  min-width: 6em;
+  width: auto;
+}
+
+.lstk-line .lstk-kind {
+  flex: none;
+  min-width: 2.5em;
+}
+
+.lstk-wide {
+  flex-basis: 100%;
+}
+
+.lstk-qty.ui-btn {
+  justify-content: flex-start;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lstk-upick {
+  flex: none;
+}
+
+/* 보이는 글을 눌러 고침(요구 687-14) */
+.lstk-tap {
+  cursor: text;
+  border-radius: var(--radius-sm);
+}
+
+.lstk-tap:hover,
+.lstk-tap:focus-visible {
+  background: var(--color-surface-sunken);
+  text-decoration: underline dotted;
+}
+
+/* 끌기(804-5) — 손잡이 · 끄는 것 반투명 · 놓을 자리 = 위 · 아래 선 · 빈 항목 = 점선 */
+.lstk-grip {
+  touch-action: none;
+}
+
+.lstk-line > .lstk-grip {
+  flex: none;
+}
+
+.lstk-line.k-공식 > .lstk-grip {
+  position: absolute;
+  inset-block-start: var(--spacing-8);
+  inset-inline-start: var(--spacing-4);
+}
+
+.lstk-edit[data-dragging] {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.is-dragging {
+  opacity: 0.45;
+}
+
+.lstk-line[data-drop="before"],
+.lstk-item[data-drop="before"] {
+  box-shadow: 0 -3px 0 0 var(--color-accent);
+}
+
+.lstk-line[data-drop="after"],
+.lstk-item[data-drop="after"] {
+  box-shadow: 0 3px 0 0 var(--color-accent);
+}
+
+.lstk-item[data-drop="in"] .lstk-empty {
+  outline: 2px dashed var(--color-accent);
+  outline-offset: 2px;
+}
+
+.lstk-res {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.lstk-kind {
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+}
+
+.lstk-fhead[data-tpl="changed"] .lstk-kind {
+  color: var(--color-accent);
+}
+
+.lstk-f-s {
+  width: 6em;
+}
+
+.lstk-f-m {
+  width: 9em;
+}
+
+.lstk-f-l {
+  flex: 1 1 12em;
+  min-width: 10em;
+}
+
+.lstk-sym {
+  font-weight: var(--font-weight-medium);
+}
+
+.lstk-val,
+.lstk-unit,
+.lstk-tag,
+.lstk-hint {
+  font-size: var(--text-body-sm);
+  color: var(--color-text-secondary);
+}
+
+.lstk-tag {
+  padding: 0 var(--spacing-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+}
+
+.lstk-empty {
+  font-size: var(--text-body-sm);
+  color: var(--color-text-muted);
+}
+
+.lstk-miss,
+.lstk-tex .lstk-miss {
+  color: var(--color-danger);
+}
+
+/* ── 오른쪽 산출근거 ── */
+.lstk-out .lstk-h {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0 var(--spacing-4);
+  padding-inline-start: calc(var(--lstk-depth, 0) * var(--spacing-16));
+  white-space: normal;
+}
+
+.lstk-out tr.head,
+.lstk-out tr.item,
+.lstk-out tr.total {
+  font-weight: var(--font-weight-medium);
+}
+
+.lstk-out tr.subsum,
+.lstk-out tr.total {
+  background: var(--color-surface-sunken);
+}
+
+.lstk-out tr.is-sub .lstk-h {
+  color: var(--color-text-secondary);
+}
+
+/* 펼친 문서 제목 = 보통 글(링크 꼴 없음 · 요구 687-11) */
+.lstk-out tr.subhead .lstk-h {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+}
+
+.lstk-ftitle {
+  cursor: pointer;
+}
+
+.lstk-gap {
+  display: inline-block;
+  width: var(--spacing-24);
+}
+
+.lstk-pack {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+.lstk-tex .katex {
+  font-size: 1.05em;
+}
+
+/* 짝 강조(679 · 684) — 왼쪽 카드 · 그룹 머리 · 오른쪽 줄 = 같은 바탕 채우기 */
+.lstk-line.is-pair,
+.lstk-item.is-pair > .lstk-ihead,
+.lstk-out tr.is-pair > td {
+  background: var(--color-accent-soft);
+}
+
+.lstk-out tr[data-loc] {
+  cursor: pointer;
+}
+
+.lstk-tpick {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+/* 옵션 가로(옛 수식 문서 CSS 에서 옮김 · 804-6) */
+.fdoc__options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-8) var(--spacing-12);
+  align-items: flex-end;
+}
+
+.fdoc__options > * {
+  width: auto;
+  min-width: 8em;
+}

A00_Common/line_stack_drag.ts

@@ -0,0 +1,80 @@
+/* =============================================================================
+ * line_stack_drag.ts
+ * 줄 쌓기 왼쪽 끌어 옮기기(PLAN 804-5 · 요구 682-4) — 손잡이(⋮⋮)를 누르고 끌면 놓을 자리에 선 표시 · 놓으면 `drop`
+ *   줄 = 항목 안 · 항목 사이 어디든(빈 항목 = 그 안) → `k.p`(항목 k 의 p 자리) · 항목 = 항목 사이 → `p`
+ *   포인터 끌기(마우스 · 터치 같음) · Esc = 그만 · 자리 표시 = 클래스(`data-drop`)만 — 끄는 동안 배치 안 바뀜
+ * ========================================================================== */
+
+export interface DragOpts {
+  /** 끄는 것 — 줄 카드 · 항목 상자 */
+  what: "line" | "item";
+  /** 끌기 영역(`.lstk-edit`) */
+  root: HTMLElement;
+  /** 끄는 요소(반투명) */
+  self: HTMLElement;
+  /** 놓음 — line `k.p` · item `p` */
+  drop: (to: string) => void;
+}
+
+const mid = (r: DOMRect): number => r.top + r.height / 2;
+
+/** 포인터 y 의 놓을 자리 + 표시할 요소 · 꼴 */
+function spotOf(o: DragOpts, y: number): { to: string; at: HTMLElement; side: string } | null {
+  const boxes = [...o.root.querySelectorAll<HTMLElement>(":scope > .lstk-item")];
+  if (!boxes.length) return null;
+  if (o.what === "item") {
+    const k = boxes.findIndex((b) => y < mid(b.getBoundingClientRect()));
+    return k < 0
+      ? { to: String(boxes.length), at: boxes[boxes.length - 1], side: "after" }
+      : { to: String(k), at: boxes[k], side: "before" };
+  }
+  // 줄 — 포인터가 든 항목(위 · 아래 밖 = 처음 · 끝 항목)
+  let k = boxes.findIndex((b) => y < b.getBoundingClientRect().bottom);
+  if (k < 0) k = boxes.length - 1;
+  const cards = [...boxes[k].querySelectorAll<HTMLElement>(":scope .lstk-lines > .lstk-line")];
+  if (!cards.length) return { to: `${k}.0`, at: boxes[k], side: "in" };
+  const p = cards.findIndex((c) => y < mid(c.getBoundingClientRect()));
+  return p < 0
+    ? { to: `${k}.${cards.length}`, at: cards[cards.length - 1], side: "after" }
+    : { to: `${k}.${p}`, at: cards[p], side: "before" };
+}
+
+/** 손잡이에 끌기를 붙임 */
+export function attachDrag(grip: HTMLElement, o: DragOpts): void {
+  grip.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    grip.setPointerCapture(e.pointerId);
+    let spot: ReturnType<typeof spotOf> = null;
+    const clear = (): void => {
+      for (const x of o.root.querySelectorAll("[data-drop]")) x.removeAttribute("data-drop");
+    };
+    o.self.classList.add("is-dragging");
+    o.root.dataset.dragging = o.what;
+    const move = (ev: PointerEvent): void => {
+      clear();
+      spot = spotOf(o, ev.clientY);
+      if (spot) spot.at.dataset.drop = spot.side;
+    };
+    const end = (ok: boolean): void => {
+      grip.removeEventListener("pointermove", move);
+      grip.removeEventListener("pointerup", up);
+      grip.removeEventListener("pointercancel", cancel);
+      window.removeEventListener("keydown", esc);
+      clear();
+      o.self.classList.remove("is-dragging");
+      delete o.root.dataset.dragging;
+      if (ok && spot) o.drop(spot.to);
+    };
+    const up = (): void => end(true);
+    const cancel = (): void => end(false);
+    const esc = (ev: KeyboardEvent): void => {
+      if (ev.key === "Escape") end(false);
+    };
+    grip.addEventListener("pointermove", move);
+    grip.addEventListener("pointerup", up);
+    grip.addEventListener("pointercancel", cancel);
+    window.addEventListener("keydown", esc);
+  });
+}

A00_Common/line_stack_edit.ts

@@ -0,0 +1,464 @@
+/* =============================================================================
+ * line_stack_edit.ts
+ * 줄 쌓기 왼쪽 편집(PLAN 804-2 · 요구 670~677) — 항목(띠 · 번호 · 제목 · 가나다 · [+ 줄] · 접기 · X) 안 줄 카드(⋮⋮ · X)
+ *   차림(804-5 · 요구 682) = 항목 머리 띠 · 줄 = 들여쓰기 + 왼쪽 세로 선 · 순서 = 손잡이 끌기(`line_stack_drag.ts`) ·
+ *     X = 확인 없이 지우고 알림 눌러 되돌리기 한 번 · 자원 이름 = 단추(누르면 찾아 넣기 창 → 바꿈)
+ *   줄 = 인력 · 재료 · 기계 · 다른 단가산출 · 율 · 식(금액 줄 — 이름 · 단위 · 비목 · 수량 식 · 단가 고르기 또는 식)
+ *       · 공식 묶음(`line_stack_rows.ts`) · 글 줄
+ *   고침 = 부른 쪽 `change(fn)` — fn 이 문서 · 차림을 고치면 부른 쪽이 `docOf` 로 굳히고 미리 셈 · 다시 그림(입력은 change 때)
+ *   자원 고르기(804-3) = 찾아 넣기 창(`line_stack_pick.ts` — M02 [항목 추가] 창 그대로) · [+ 줄] 인력 · 재료 · 기계 · 다른 단가산출 =
+ *     고르면 줄이 생김(닫으면 안 생김) · 있는 줄 = 자원 이름 단추
+ * ========================================================================== */
+
+import { createButton, createIconButton } from "@ui/ui_template_button";
+import { createRowMenu } from "@ui/ui_template_context_menu";
+import { eqText } from "@ui/ui_template_equation";
+import { el, showToast } from "@ui/ui_template_elements";
+import { createInputField, createSelectField } from "@ui/ui_template_input";
+import { varId, type FormulaDoc, type MoneyLine } from "../common_util/common_util_formula_doc";
+import { isNum, type DocAnswer } from "../common_util/common_util_formula_doc_calc";
+import { lineMap, offLine, type Values } from "../common_util/common_util_formula_doc_view";
+import type { DocTable } from "../common_util/common_util_formula_doc_table";
+import {
+  dropSyms,
+  docOf,
+  freshId,
+  kindOf,
+  moveItem,
+  moveLine,
+  newVar,
+  ownedOf,
+  stackOf,
+  type MoneyKind,
+  type StackDoc,
+  type StackItem,
+} from "../common_util/common_util_line_stack";
+import { placeNames } from "../common_util/common_util_line_stack_copy";
+import {
+  addPicked,
+  aliasText,
+  repick,
+  shownUnit,
+  tableAlias,
+} from "../common_util/common_util_line_stack_pick";
+import { createUnitPick, NO_UNIT } from "../M02_MasterTemplete/DataFlow/M02_DF_UnitPick";
+import { reach } from "./formula_doc_render";
+import { attachDrag } from "./line_stack_drag";
+import { openStackPick, type StackTake } from "./line_stack_pick";
+import { buildBlock } from "./line_stack_rows";
+import { lt, type LsKey } from "./line_stack_text";
+
+export interface EditHooks {
+  doc: StackDoc;
+  answer: DocAnswer;
+  items: StackItem[];
+  change: (fn: (d: StackDoc, items: StackItem[]) => void) => void;
+  /** 품셈 표 하나(표 고르기 창) */
+  table: (key: string) => Promise<DocTable | null>;
+  subDoc: (key: string) => FormulaDoc | null;
+  name: (key: string) => string;
+  /** 공식 묶음 펼친 자리(`항목.줄`) — 화면 상태만 */
+  open: Set<string>;
+  /** 줄 · 항목 누름 — 오른쪽 짝 강조(679) */
+  pair: (loc: string) => void;
+  /** M02 단가산출(804-4) — 다른 단가산출 · 일위대가 = 복사해 펼침 · M01 = 없음(M01 전체만) */
+  take?: StackTake;
+}
+
+const field = (
+  label: string,
+  value: unknown,
+  set: (t: string) => void,
+  size: "s" | "m" | "l" = "m",
+): HTMLElement => {
+  const f = createInputField({
+    placeholder: label,
+    value: value === undefined || value === null ? "" : String(value),
+    compact: true,
+    size: 24,
+  });
+  f.root.classList.add(`lstk-f-${size}`);
+  f.input.setAttribute("aria-label", label);
+  f.input.title = label;
+  f.input.addEventListener("change", () => set(f.input.value));
+  return f.root;
+};
+const btn = (label: string, onClick: () => void) =>
+  createButton({ label, variant: "ghost", size: 24, onClick });
+
+const KIND_KEY: Record<MoneyKind, LsKey> = {
+  인력: "K_인력",
+  재료: "K_재료",
+  기계: "K_기계",
+  단가산출: "K_단가산출",
+  율: "K_율",
+};
+
+/** 금액 줄 몸 — 한 줄(804-7 · 요구 687-7): [종류][이름 단추 | 이름 칸 · 단가 식][수량][단위][비목] · 좁으면 접힘 */
+function moneyBody(h: EditHooks, i: number): HTMLElement[] {
+  const d = h.doc;
+  const line = (d.금액 ?? [])[i];
+  const kind = kindOf(d, i, h.subDoc);
+  const own = ownedOf(d).get(i);
+  const v = own ? d.변수?.find((x) => varId(x) === own) : undefined;
+  const put = (fn: (l: MoneyLine & { 규격?: string }) => void): void =>
+    h.change((doc) => fn(doc.금액![i]));
+  // 표 값 기호 = 화면 이름(요구 683) — 칸 글은 화면 이름 ↔ 기호로 오감
+  const alias = tableAlias(d);
+  const shown = (t: unknown): string => aliasText(String(t ?? ""), alias);
+  const real = (t: string): string => aliasText(t.trim(), alias, true);
+  const head: HTMLElement[] = [];
+  if (own && v) {
+    // 이름 단추(요구 687-9) — 누르면 찾아 넣기 창이 그 이름을 찾은 채 열림 · 고르면 바꿈
+    const link = v.연결 ?? {};
+    const mat = link.재료 as Record<string, unknown> | undefined;
+    const size = (line as { 규격?: string }).규격;
+    const name = String(line.이름 ?? "") || String(mat?.검색어 ?? mat?.이름 ?? "");
+    const res = link.키
+      ? link.갈래 === "단가산출"
+        ? (h.subDoc(link.키)?.이름 ?? h.name(link.키))
+        : h.name(link.키)
+      : "";
+    const pick = createButton({
+      label: (size && !name.includes(size) ? `${name} ${size}` : name) || "—",
+      variant: "ghost",
+      tone: "link",
+      size: 24,
+      iconStart: "search",
+      onClick: () =>
+        openStackPick(
+          kind,
+          (p) => h.change((doc) => repick(doc, i, own, kind, p)),
+          undefined,
+          String(mat?.검색어 ?? line.이름 ?? ""),
+        ),
+    });
+    pick.classList.add("lstk-res");
+    pick.title = `${lt("Repick")}${res ? ` — ${res}` : ""}`;
+    pick.dataset.repick = String(i);
+    head.push(pick);
+  } else
+    head.push(
+      field(lt("Name"), line.이름, (t) => put((l) => (l.이름 = t)), "m"),
+      field(lt("Price"), shown(line.단가), (t) => put((l) => (l.단가 = real(t))), "l"),
+    );
+  const why = (h.answer.줄?.[i] as { 까닭?: string } | undefined)?.까닭;
+  // 율 밑 번지(복사해 온 조각) — 칸 아래 읽는 이름(804-5)
+  const places = /번지\./.test(`${line.단가} ${line.수량 ?? ""}`) ? placeNames(d, h.items) : null;
+  const read = (t: unknown): string =>
+    shown(t).replace(/번지\.([^.\s()]+)\./g, (all, p: string) =>
+      places?.[p] ? `${places[p]} ` : all,
+    );
+  const unit = el("span", { className: "lstk-upick" });
+  const drawUnit = (): void =>
+    unit.replaceChildren(
+      createUnitPick({
+        value: String(line.단위 ?? "") || NO_UNIT,
+        size: 24,
+        free: true,
+        ariaLabel: lt("Unit"),
+        extra: [...new Set((d.금액 ?? []).map((m) => String(m.단위 ?? "")).filter(Boolean))],
+        onPick: (u) => put((l) => (u === NO_UNIT ? delete l.단위 : (l.단위 = u))),
+      }),
+    );
+  drawUnit();
+  return [
+    el("span", { className: "lstk-kind", text: lt(KIND_KEY[kind]) }),
+    ...head,
+    // 율 · 식 줄(자원 없음)에 수량이 없으면 칸 안 보임(한 줄 유지)
+    ...(own || String(line.수량 ?? "") ? [qtyBox(h, i, shown, real)] : []),
+    unit,
+    ...(line.비목 === "묶음"
+      ? []
+      : [
+          createSelectField({
+            options: ["노무비", "재료비", "경비"].map((x) => ({ value: x, text: x })),
+            value: line.비목 ?? "노무비",
+            compact: true,
+            size: 24,
+            ariaLabel: lt("Cost"),
+            onChange: (x) => put((l) => (l.비목 = x)),
+          }).root,
+        ]),
+    ...(places
+      ? [
+          el("div", {
+            className: "lstk-hint lstk-wide",
+            text: `= ${[line.수량, line.단가].filter(Boolean).map(read).join(" × ")}`,
+          }),
+        ]
+      : []),
+    ...(why ? [el("div", { className: "lstk-miss lstk-wide", text: why })] : []),
+  ];
+}
+
+/** 수량 — 기호 하나면 값 + 출처 꼬리표(「0.39 ← 표 · 잡석 수량」 · 요구 687-12 · 기호는 마우스 글) · 누르면 그 자리에서 식 고침 */
+function qtyBox(
+  h: EditHooks,
+  i: number,
+  shown: (t: unknown) => string,
+  real: (t: string) => string,
+): HTMLElement {
+  const line = (h.doc.금액 ?? [])[i];
+  const text = String(line.수량 ?? "");
+  const v = h.doc.변수?.find((x) => varId(x) === text);
+  const at = `qty:${i}`;
+  const edit = (): HTMLElement => {
+    const f = field(lt("Qty"), shown(text), (t) =>
+      h.change((doc) => {
+        h.open.delete(at);
+        const l = doc.금액![i];
+        if (t.trim()) l.수량 = real(t);
+        else delete l.수량;
+      }),
+    );
+    f.classList.add("lstk-qty");
+    f.dataset.qty = String(i);
+    return f;
+  };
+  if (!v || h.open.has(at)) return edit();
+  const val = (h.answer.값 ?? {})[text];
+  const link = v.연결 ?? {};
+  const kind = link.갈래 ?? "식";
+  const from =
+    v.이름 || (link.키 || link.표 ? h.name(String(link.키 ?? link.표)) : "") || shown(text);
+  const b = createButton({
+    label: `${isNum(val) ? eqText(val) : "—"}${v.단위 && shownUnit(v.단위) ? ` ${shownUnit(v.단위)}` : ""} ← ${kind} · ${from}`,
+    variant: "ghost",
+    size: 24,
+    onClick: () => {
+      h.open.add(at);
+      h.change(() => undefined);
+      requestAnimationFrame(() =>
+        document.querySelector<HTMLInputElement>(`[data-qty="${i}"] input`)?.focus(),
+      );
+    },
+  });
+  b.classList.add("lstk-qty");
+  b.title = `${lt("Qty")} = ${shown(text)}`;
+  b.dataset.qty = String(i);
+  return b;
+}
+
+/** [+ 줄] 고르개 값 → 새 줄 */
+function addLine(h: EditHooks, at: number, kind: string): void {
+  if (["인력", "재료", "기계", "단가산출"].includes(kind))
+    return openStackPick(
+      kind as MoneyKind,
+      (p) => h.change((d, items) => void addPicked(d, items[at], kind as MoneyKind, p)),
+      h.take,
+    );
+  h.change((d, items) => {
+    const it = items[at];
+    const n = (d.금액 ??= []).length;
+    const money = (line: MoneyLine): void => {
+      d.금액!.push(line);
+      it.줄.push({ 꼴: "금액", i: n });
+    };
+    if (kind === "율")
+      money({ 이름: "공구손료 및 경장비", 단위: "식", 비목: "경비", 단가: "노무비 × 3 %" });
+    else if (kind === "공식") {
+      const id = freshId(d, "x");
+      (d.변수 ??= []).push(newVar(id, { 갈래: "숫자", 값: 0 }));
+      it.줄.push({ 꼴: "공식", 기호: [id] });
+      h.open.add(`${at}.${it.줄.length - 1}`);
+    } else if (kind === "글") it.줄.push({ 꼴: "글", 글: "" });
+  });
+}
+
+/** 줄 지움 — 금액 줄은 그 줄이 가진 연결 기호까지 · 공식 묶음은 기호까지 */
+function dropLine(d: StackDoc, items: StackItem[], i: number, j: number): void {
+  const line = items[i].줄[j];
+  if (line.꼴 === "금액") {
+    const own = ownedOf(d).get(line.i);
+    if (own) dropSyms(d, [own]);
+  } else if (line.꼴 === "공식") dropSyms(d, line.기호);
+  items[i].줄.splice(j, 1);
+}
+
+export function buildEdit(h: EditHooks): HTMLElement {
+  // [+] 줄 더함 메뉴(요구 687-13 · 18) — 인력 · 재료 · 기계 · 단가산출 · 율 · 식 · 근거 글
+  const add = (at: number): HTMLElement => {
+    const kinds: [string, LsKey][] = [
+      ["인력", "K_인력"],
+      ["재료", "K_재료"],
+      ["기계", "K_기계"],
+      ["단가산출", h.take ? "K_복사" : "K_단가산출"],
+      ["율", "Add_율"],
+      ["공식", "Add_식"],
+      ["글", "K_글"],
+    ];
+    const menu = createRowMenu(
+      kinds.map(([k, label]) => ({ label: lt(label), onClick: () => addLine(h, at, k) })),
+      { icon: "plus", title: lt("Add_Line"), size: 24 },
+    );
+    menu.classList.add("lstk-add");
+    return menu;
+  };
+  // X 지움 — 확인 없이 · 알림 누르면 되돌림(그 뒤 다른 고침이 없을 때만)
+  const drop = (what: string, fn: (d: StackDoc, items: StackItem[]) => void): void => {
+    const snap = JSON.stringify(h.doc);
+    let after = "";
+    h.change((d, items) => {
+      fn(d, items);
+      after = JSON.stringify(docOf(d, items));
+    });
+    showToast(`${what || lt("K_줄")} ${lt("Dropped")}`, "info", 6000, () =>
+      h.change((d, items) => {
+        if (JSON.stringify(docOf(d, items)) !== after)
+          return void showToast(lt("Undo_Late"), "warning");
+        const back = JSON.parse(snap) as StackDoc;
+        for (const k of Object.keys(d)) delete (d as Record<string, unknown>)[k];
+        Object.assign(d, back);
+        items.splice(0, items.length, ...stackOf(back));
+      }),
+    );
+  };
+  const x = (title: string, onClick: () => void): HTMLElement => {
+    const b = createIconButton({ icon: "x", title, size: 24, onClick });
+    b.classList.add("lstk-x");
+    return b;
+  };
+  const grip = (): HTMLElement =>
+    el("span", { className: "ui-list-row__grip lstk-grip", attrs: { title: lt("Drag") } });
+  const root = el("div", { className: "lstk-edit" });
+  /** 항목 접힘 표시(화면 상태)를 항목 차례 바뀜에 맞춤 */
+  const refold = (fn: (flags: boolean[]) => void): void => {
+    const flags = h.items.map((_, k) => h.open.has(`fold:${k}`));
+    fn(flags);
+    h.items.forEach((_, k) => h.open.delete(`fold:${k}`));
+    flags.forEach((f, k) => f && h.open.add(`fold:${k}`));
+  };
+  // 항목 번호 — 산출근거와 같은 셈(제목 있는 항목 1. 2. · 옛 가나다 항목 = 가. 나. · 체크 걷음 요구 687-5)
+  let n = 0;
+  let sub = 0;
+  const nos = h.items.map((it) => {
+    if (!it.제목.trim()) return "";
+    const no = it.가나다 ? `${"가나다라마바사아자차카타파하"[sub++] ?? "?"}.` : `${++n}.`;
+    if (!it.가나다) sub = 0;
+    return no;
+  });
+  // 만약(IF) 안 탄 갈래(요구 687-10) — 갈래를 다 열면 닿고 지금 값으로는 안 닿는 기호 · 꺼진 금액 줄 = 숨김(산출근거와 같음)
+  const vals = (h.answer.값 ?? {}) as Values;
+  const taken = new Set(reach(h.doc, vals));
+  const every = new Set(reach(h.doc, {}, true));
+  const steps = lineMap(h.doc);
+  const off = (line: StackItem["줄"][number]): boolean =>
+    line.꼴 === "금액"
+      ? offLine((h.doc.금액 ?? [])[line.i] ?? {}, vals, steps)
+      : line.꼴 === "공식" &&
+        line.기호.length > 0 &&
+        line.기호.every((id) => every.has(id) && !taken.has(id));
+  const items = h.items.map((it, i) => {
+    const folded = h.open.has(`fold:${i}`);
+    const itemGrip = grip();
+    // 그룹 머리 한 줄(요구 687-6 · 688) — 손잡이 · 접기 · 번호 · 이름 · [+] · X · 접어도 자리 그대로
+    const head = el("div", {
+      className: "lstk-ihead",
+      children: [
+        itemGrip,
+        createIconButton({
+          icon: folded ? "chevronRight" : "chevronDown",
+          title: folded ? lt("Unfold_Item") : lt("Fold_Item"),
+          size: 24,
+          onClick: () => {
+            if (folded) h.open.delete(`fold:${i}`);
+            else h.open.add(`fold:${i}`);
+            h.change(() => undefined);
+          },
+        }),
+        el("b", { className: "lstk-no", text: nos[i] }),
+        field(lt("Title"), it.제목, (t) => h.change((_, items) => (items[i].제목 = t.trim())), "l"),
+        el("span", {
+          className: "lstk-hint lstk-count",
+          text: folded ? `${lt("K_줄")} ${it.줄.length}` : "",
+        }),
+        add(i),
+        x(lt("Del_Item"), () =>
+          drop(it.제목.trim() || lt("Item"), (d, items) => {
+            refold((f) => f.splice(i, 1));
+            for (let j = items[i].줄.length - 1; j >= 0; j--) dropLine(d, items, i, j);
+            items.splice(i, 1);
+          }),
+        ),
+      ],
+    });
+    const lines = it.줄.flatMap((line, j) => {
+      if (off(line)) return [];
+      const lineGrip = grip();
+      const del = x(lt("Del"), () =>
+        drop(line.꼴 === "금액" ? String(h.doc.금액?.[line.i]?.이름 ?? "") : "", (d, items) =>
+          dropLine(d, items, i, j),
+        ),
+      );
+      const body =
+        line.꼴 === "금액"
+          ? moneyBody(h, line.i)
+          : line.꼴 === "글"
+            ? [
+                el("span", { className: "lstk-kind", text: lt("K_글") }),
+                field(
+                  lt("Text_Ph"),
+                  line.글,
+                  (t) => h.change((_, items) => ((items[i].줄[j] as { 글: string }).글 = t)),
+                  "l",
+                ),
+              ]
+            : buildBlock(h, i, j, line, (id) => every.has(id) && !taken.has(id));
+      // 금액 · 글 = 한 줄(X 끝) · 공식 묶음 = 머리 줄 끝에 X
+      const card = el("div", {
+        className: `lstk-line k-${line.꼴}`,
+        children:
+          line.꼴 === "공식"
+            ? [lineGrip, ...body.slice(0, 1).map((hd) => (hd.append(del), hd)), ...body.slice(1)]
+            : [lineGrip, ...body, del],
+      });
+      card.dataset.loc = `${i}.${j}`;
+      card.addEventListener("pointerdown", () => h.pair(`${i}.${j}`));
+      attachDrag(lineGrip, {
+        what: "line",
+        root,
+        self: card,
+        drop: (to) => {
+          const [k, p] = to.split(".").map(Number);
+          h.change((_, items) => moveLine(items, i, j, k, p));
+        },
+      });
+      return [card];
+    });
+    const box = el("div", {
+      className: `lstk-item${it.가나다 ? " is-sub" : ""}${folded ? " is-folded" : ""}`,
+      attrs: { "data-loc": String(i) },
+      children: [
+        head,
+        ...(folded
+          ? []
+          : [
+              el("div", {
+                className: "lstk-lines",
+                children: lines.length
+                  ? lines
+                  : [el("div", { className: "lstk-empty", text: lt("Empty_Item") })],
+              }),
+            ]),
+      ],
+    });
+    head.addEventListener("pointerdown", () => h.pair(String(i)));
+    attachDrag(itemGrip, {
+      what: "item",
+      root,
+      self: box,
+      drop: (to) => {
+        const p = Number(to);
+        refold((f) => moveItem(f, i, p));
+        h.change((_, items) => moveItem(items, i, p));
+      },
+    });
+    return box;
+  });
+  root.append(
+    ...items,
+    btn(lt("Add_Item"), () => h.change((_, items) => items.push({ 제목: "", 줄: [] }))),
+  );
+  return root;
+}

A00_Common/line_stack_out.ts

@@ -0,0 +1,424 @@
+/* =============================================================================
+ * line_stack_out.ts
+ * 줄 쌓기 산출근거 출력(PLAN 804-2 · 요구 670-1 · 677) — 경쟁사 「단가산출」 시트 꼴 표(산출근거 · 합계 · 노무비 · 재료비 · 경비)
+ *   공식 줄 = 「기호 = 기호식 = 값식 = 결과 단위」(값만인 줄은 넷까지 한 줄) · 금액 줄 = 「이름 : 단가 × 수량 단위 = 금액」
+ *   기계 · 단가산출 줄 = 비목마다 「노무비 : 59,020 × … = 금액」 — 제목 줄(「굴착기 0.6㎥」) 누름 = 그 문서(기계 시간당 경비 등)를
+ *     같은 계산기로 셈해 같은 꼴로 펼침(손료 식 · 연료 · 운전사 · 노 · 재 · 경 · 계) · 비목 수는 글(링크 꼴 없음 · 요구 687-11) ·
+ *     공식 줄 단가산출 결과 = 수 누름(▸) · 접으면 한 줄 · 출력엔 펼친 것만
+ *   값 = 계산기 셈 답 그대로(`calcDoc` · 줄 `answer.줄` · 합 `노무비` …) — 여기서 다시 셈 안 함 · 조판 = KaTeX(`line_stack_tex.ts`)
+ * ========================================================================== */
+
+import { createButton, createIconButton } from "@ui/ui_template_button";
+import { eqText } from "@ui/ui_template_equation";
+import { el } from "@ui/ui_template_elements";
+import { tableRow, tableShell, type Column } from "@ui/ui_template_table";
+import { COSTS, varId, type FormulaDoc } from "../common_util/common_util_formula_doc";
+import { calcDoc, isNum, type DocAnswer } from "../common_util/common_util_formula_doc_calc";
+import type { DocCache } from "../common_util/common_util_formula_doc_cache";
+import {
+  lineMap,
+  moneyScope,
+  offLine,
+  type Values,
+} from "../common_util/common_util_formula_doc_view";
+import { reach } from "./formula_doc_render";
+import {
+  kindOf,
+  nodeOf,
+  priceSym,
+  stackOf,
+  subInputs,
+  type StackDoc,
+} from "../common_util/common_util_line_stack";
+import { placeNames } from "../common_util/common_util_line_stack_copy";
+import { shownUnit, stackLevels, tableAlias } from "../common_util/common_util_line_stack_pick";
+import { katexNode, symTex, tex, valTex, type TexCtx } from "./line_stack_tex";
+import { lt } from "./line_stack_text";
+
+type Cols = Partial<Record<"sum" | (typeof COSTS)[number], number>>;
+interface Row {
+  h: (string | HTMLElement)[];
+  cols?: Cols;
+  cls?: string;
+  won?: boolean;
+  depth: number;
+  /** 들여쓰기 수준(804-3) — 머리 0 · 항목 1 · 가나다 2 · 줄 = 항목 + 1 · 펼친 블록 = 그 줄 + 1 */
+  lv: number;
+  /** 왼쪽 짝 자리(679) — 항목 `k` · 줄 `k.j`(펼친 블록 = 그 줄) */
+  loc?: string;
+}
+export interface OutHooks {
+  /** 줄 누름 — 왼쪽 짝 자리(679) */
+  pair?: (loc: string) => void;
+  cache: DocCache;
+  /** 펼친 자리(`부모/기호`) */
+  open: Set<string>;
+  toggle: (at: string) => void;
+  /** 캐시에 없는 연결 — 뒤에서 서버에 물음 */
+  miss: () => void;
+}
+
+const COST_SHOW: Record<string, string> = { 노무비: "노무비", 재료비: "재료비", 경비: "경 비" };
+const won = (n: number): string => eqText(Math.round(n));
+const one = (n: number): string =>
+  n.toLocaleString("en-US", { minimumFractionDigits: 1, maximumFractionDigits: 1 });
+const MAX_DEPTH = 3;
+const LONG_SUM = 4; // 합계 덧셈 항이 이보다 많으면 항목 소계끼리(경쟁사 「노무비 : 2,523.3 + 919.5 = 3,442」)
+
+/** 식 글 → 조판(못 풀면 글) */
+function exprNode(
+  text: unknown,
+  side: "sym" | "val",
+  vals: Values,
+  inline = false,
+  cost?: string,
+  more: Partial<TexCtx> = {},
+) {
+  const n = nodeOf(text);
+  return n
+    ? katexNode(tex(n, { side, vals, inline, cost, ...more }))
+    : el("span", { text: String(text ?? "") });
+}
+const hasVar = (text: unknown): boolean => {
+  const n = nodeOf(text);
+  return !!n && JSON.stringify(n).includes('["var"');
+};
+
+function rows(
+  doc: StackDoc,
+  a: DocAnswer,
+  h: OutHooks,
+  depth: number,
+  at: string,
+  base = 0,
+): Row[] {
+  const out: Row[] = [];
+  let lv = base + 1; // 지금 쌓는 줄 수준
+  let loc: string | undefined; // 지금 쌓는 왼쪽 자리(맨 위 문서만)
+  const vals = (a.값 ?? {}) as Values;
+  const vars = new Map((doc.변수 ?? []).map((v) => [varId(v), v]));
+  const lines = new Map((doc.식 ?? []).map((l) => [String(l.기호 ?? ""), l.식]));
+  // 펼친 문서 줄 = 금액 칸 없이(부른 쪽 칸과 섞이지 않게)
+  const push = (r: Omit<Row, "depth" | "lv">): void =>
+    void out.push({ ...r, depth, lv, loc, ...(depth ? { cols: undefined } : {}) });
+  const shown = new Set(reach(doc, vals)); // 지금 탄 갈래로 닿는 기호만
+  const steps = lineMap(doc);
+  const place = placeNames(doc, stackOf(doc)); // 번지 읽는 이름(804-5)
+  const unit = (id: string): string => shownUnit(vars.get(id)?.단위);
+  const alias = tableAlias(doc); // 표 값 기호 화면 이름(요구 683)
+  const subOf = (id: string): FormulaDoc | null => {
+    const k = vars.get(id)?.연결;
+    if (k?.갈래 !== "단가산출" || !k.키 || k.키.includes("{")) return null;
+    try {
+      return h.cache.links.doc(k.키) ?? null;
+    } catch {
+      if (h.cache.takeMissing()) h.miss();
+      return null;
+    }
+  };
+  /** ▸ 단추 — 펼친 자리면 그 문서 줄을 뒤에 끼움 */
+  const opener = (id: string, label: string): HTMLElement => {
+    const path = `${at}/${id}`;
+    const b = createButton({
+      label: `${label} ${h.open.has(path) ? "▾" : "▸"}`,
+      variant: "link",
+      size: 20,
+      onClick: () => h.toggle(path),
+    });
+    b.dataset.expand = path;
+    return b;
+  };
+  /** 기계 · 단가산출 제목 줄 — 접기 단추 + 제목(누르면 펼침 · 요구 687-11) */
+  const fold = (id: string, title: string): HTMLElement[] => {
+    const path = `${at}/${id}`;
+    const on = h.open.has(path);
+    const b = createIconButton({
+      icon: on ? "chevronDown" : "chevronRight",
+      title: lt(on ? "Fold_Sub" : "Unfold_Sub"),
+      size: 20,
+      onClick: (e) => (e.stopPropagation(), h.toggle(path)),
+    });
+    b.dataset.expand = path;
+    const t = el("span", { className: "lstk-ftitle", text: title });
+    t.addEventListener("click", (e) => (e.stopPropagation(), h.toggle(path)));
+    return [b, t];
+  };
+  const expand = (id: string): void => {
+    const path = `${at}/${id}`;
+    const sub = subOf(id);
+    if (!h.open.has(path) || !sub || depth >= MAX_DEPTH) return;
+    const got = calcDoc(sub, h.cache.links, subInputs(vars.get(id)?.연결, vals));
+    if (h.cache.takeMissing()) h.miss();
+    out.push({
+      depth: depth + 1,
+      lv: lv + 1,
+      loc,
+      h: [`${sub.이름 ?? ""}${sub.결과단위 ? ` [${sub.결과단위}]` : ""}`],
+      cls: "subhead",
+    });
+    out.push(...rows(sub, got, h, depth + 1, path, lv + 1).map((r) => ({ ...r, loc })));
+  };
+
+  /** 공식 묶음 — 값만인 줄은 넷까지 한 줄 */
+  const block = (ids: string[]): void => {
+    let pack: HTMLElement[] = [];
+    const flush = (): void => {
+      if (pack.length)
+        push({ h: pack.flatMap((x, k) => (k ? [el("span", { className: "lstk-gap" }), x] : [x])) });
+      pack = [];
+    };
+    for (const id of ids.filter((x) => shown.has(x))) {
+      const v = vals[id];
+      const t = lines.get(id);
+      const head = katexNode(symTex(alias[id] ?? id));
+      if (t !== undefined && hasVar(t)) {
+        flush();
+        const res = isNum(v)
+          ? katexNode(`${valTex(v)}\\ ${unit(id) ? `\\text{${unit(id)}}` : ""}`)
+          : missing(a, id);
+        // 기호식 = 값식 = 결과 — 같은 꼴이 이어지면 한 번만(만약이 수 하나를 탄 줄)
+        const n = nodeOf(t)!;
+        const sym = tex(n, { side: "sym", vals, alias });
+        const val = tex(n, { side: "val", vals, alias });
+        const same = isNum(v) && val === valTex(v);
+        push({
+          h: [
+            head,
+            ...(sym === val ? [] : [" = ", katexNode(sym)]),
+            ...(same ? [] : [" = ", katexNode(val)]),
+            " = ",
+            res,
+          ],
+        });
+        continue;
+      }
+      const sub = subOf(id);
+      if (sub || (v && typeof v === "object")) {
+        flush();
+        const label =
+          v && typeof v === "object"
+            ? COSTS.map((c) => `${COST_SHOW[c]} ${eqText((v as Values)[c])}`).join(" · ")
+            : isNum(v)
+              ? `${eqText(v)} ${unit(id) || sub?.결과단위 || ""}`
+              : "—";
+        push({
+          h: [head, " = ", sub ? opener(id, label) : label, sub ? ` ${sub.이름 ?? ""}` : ""],
+        });
+        expand(id);
+        continue;
+      }
+      const expr =
+        t !== undefined && !isNum(Number(t))
+          ? [" = ", exprNode(t, "sym", vals, false, undefined, { alias })]
+          : [];
+      const cell = el("span", {
+        className: "lstk-pack",
+        children: [
+          head,
+          ...expr,
+          " = ",
+          isNum(v) ? `${eqText(v)} ${unit(id)}` : typeof v === "string" ? v : missing(a, id),
+        ],
+      });
+      pack.push(cell);
+      if (pack.length >= 4) flush();
+    }
+    flush();
+  };
+
+  const money = doc.금액 ?? [];
+  const lineRows = (i: number): { sub: boolean; cols: Cols } => {
+    const line = money[i];
+    const r = (a.줄?.[i] ?? {}) as {
+      비목?: Record<string, number>;
+      금액?: number | null;
+      까닭?: string;
+      단가?: unknown;
+    };
+    const scope: Values = { ...vals, ...moneyScope(a.줄, i) };
+    const at: Record<string, Values> = {}; // 앞 줄 번지 합(계산기와 같음 — 번지 값을 값 식에 · 804-5)
+    money.slice(0, i).forEach((m, k) => {
+      const got = a.줄?.[k] as { 금액?: unknown; 비목?: Values } | undefined;
+      if (m.기호) scope[m.기호] = got?.금액; // 앞 금액 줄 기호 = 그 줄 금액
+      if (m.번지)
+        for (const c of COSTS) {
+          const box = (at[String(m.번지)] ??= { 노무비: 0, 재료비: 0, 경비: 0 });
+          if (isNum(got?.비목?.[c]))
+            box[c] = Math.round(((box[c] as number) + (got!.비목![c] as number)) * 1e6) / 1e6;
+        }
+    });
+    if (Object.keys(at).length) scope.번지 = at;
+    const name = [line.이름, (line as { 규격?: string }).규격].filter(Boolean).join(" ");
+    const qty =
+      line.수량 !== undefined && line.수량 !== null && line.수량 !== "" ? line.수량 : null;
+    const qtyNode = (cost?: string): (string | HTMLElement)[] =>
+      qty === null
+        ? []
+        : [
+            " × ",
+            exprNode(qty, "val", scope, true, cost, { alias }),
+            line.단위 ? ` ${line.단위}` : "",
+          ];
+    if (r.까닭 && r.금액 === null) {
+      push({ h: [`${name} : — `, el("span", { className: "lstk-miss", text: r.까닭 })] });
+      return { sub: false, cols: {} };
+    }
+    if (line.비목 === "묶음") {
+      const s = priceSym(line);
+      const bundle = (r.단가 ?? {}) as Values;
+      const cols: Cols = {};
+      const title = name || (s ? (subOf(s)?.이름 ?? s) : "");
+      push({ h: s && subOf(s) ? fold(s, title) : [title], cls: "lname" });
+      for (const c of COSTS) {
+        const part = r.비목?.[c];
+        if (!isNum(part) || (!part && !bundle[c])) continue;
+        cols[c] = part;
+        push({
+          h: [`${COST_SHOW[c]} : `, eqText(bundle[c]), ...qtyNode(c), ` = ${one(part)}`],
+        });
+      }
+      if (s) expand(s);
+      return { sub: true, cols };
+    }
+    const amt = r.금액 ?? 0;
+    const price =
+      hasVar(line.단가) && kindOf(doc, i) === "율"
+        ? [
+            exprNode(line.단가, "sym", scope, true, undefined, { place, alias }),
+            " = ",
+            exprNode(line.단가, "val", scope, true, undefined, { alias }),
+          ]
+        : [exprNode(line.단가, "val", scope, true, undefined, { alias })];
+    const c = String(line.비목);
+    push({
+      h: [`${name} : `, ...price, ...qtyNode(), ` = ${one(amt)}`],
+      cols: { sum: amt, [c]: amt },
+    });
+    return { sub: false, cols: { [c]: amt } };
+  };
+
+  const items = stackOf(doc);
+  const terms: Record<string, number[]> = { 노무비: [], 재료비: [], 경비: [] };
+  const perItem: Record<string, number[]> = { 노무비: [], 재료비: [], 경비: [] }; // 덧셈이 길면 항목 소계끼리(804-5)
+  let n = 0;
+  let sub = 0;
+  const levels = stackLevels(items);
+  for (const [k, it] of items.entries()) {
+    lv = base + levels[k].item;
+    loc = depth ? undefined : String(k);
+    if (it.제목.trim()) {
+      const label = it.가나다 ? `${"가나다라마바사아자차카타파하"[sub++] ?? "?"} . ` : `${++n}. `;
+      if (!it.가나다) sub = 0;
+      push({ h: [label + it.제목], cls: it.가나다 ? "item sub" : "item" });
+    }
+    const sum: Record<string, number> = { 노무비: 0, 재료비: 0, 경비: 0 };
+    const own: Record<string, number[]> = { 노무비: [], 재료비: [], 경비: [] };
+    let hasSub = false;
+    lv = base + levels[k].line;
+    for (const [j, l] of it.줄.entries()) {
+      loc = depth ? undefined : `${k}.${j}`;
+      if (l.꼴 === "글") push({ h: [l.글] });
+      else if (l.꼴 === "공식") block(l.기호);
+      else {
+        if (offLine(money[l.i], vals, steps)) continue; // 선택으로 꺼진 줄(수식 탭과 같음)
+        const got = lineRows(l.i);
+        hasSub ||= got.sub;
+        if ((a.줄?.[l.i] as { 합밖?: boolean } | undefined)?.합밖) continue;
+        for (const [c, v] of Object.entries(got.cols)) {
+          sum[c] = Math.round((sum[c] + (v ?? 0)) * 10) / 10;
+          if (v) own[c].push(v);
+        }
+      }
+    }
+    loc = depth ? undefined : String(k);
+    if (hasSub && COSTS.some((c) => sum[c])) {
+      const s = Math.round((sum.노무비 + sum.재료비 + sum.경비) * 10) / 10;
+      push({ h: [`${lt("Sub_Sum")} : ${one(s)}`], cols: { sum: s, ...sum }, cls: "subsum" });
+    }
+    for (const c of COSTS) {
+      terms[c].push(...(hasSub ? (sum[c] ? [sum[c]] : []) : own[c]));
+      if (sum[c]) perItem[c].push(sum[c]);
+    }
+  }
+  lv = base + 1;
+  loc = undefined;
+  if (doc.결과) {
+    const r = a.결과;
+    push({
+      h: [
+        katexNode(symTex(doc.결과)),
+        ` = ${isNum(r) ? `${eqText(r)} ${doc.결과단위 ?? ""}` : "—"}`,
+      ],
+      cls: "total",
+    });
+    return out;
+  }
+  if (!money.length) return out;
+  push({ h: [`${++n}. ${lt("Total")}`], cls: "item" });
+  lv = base + 2;
+  for (const c of COSTS) {
+    const t = terms[c].length > LONG_SUM ? perItem[c] : terms[c];
+    const v = a[c];
+    const body = !isNum(v)
+      ? "—"
+      : t.length > 1
+        ? `${t.map(one).join(" + ")} = ${won(v)}`
+        : t.length
+          ? won(v)
+          : "";
+    push({ h: [`${COST_SHOW[c]} : ${body}`] });
+  }
+  push({
+    h: [`${lt("Sum")} : ${isNum(a.계) ? won(a.계) : "—"}`],
+    cols: isNum(a.계)
+      ? { sum: a.계, 노무비: a.노무비 ?? 0, 재료비: a.재료비 ?? 0, 경비: a.경비 ?? 0 }
+      : {},
+    cls: "total",
+    won: true,
+  });
+  return out;
+}
+
+const missing = (a: DocAnswer, id: string): HTMLElement =>
+  el("span", { className: "lstk-miss", text: `— ${a.빈값?.[id] ?? ""}`.trim() });
+
+/** 산출근거 표 */
+export function buildOut(doc: StackDoc, a: DocAnswer, h: OutHooks): HTMLElement {
+  const columns: Column[] = [
+    { label: lt("Basis") },
+    { label: lt("Total"), width: "92px", align: "end" },
+    { label: COST_SHOW.노무비, width: "84px", align: "end" },
+    { label: COST_SHOW.재료비, width: "84px", align: "end" },
+    { label: COST_SHOW.경비, width: "84px", align: "end" },
+  ];
+  const { root, tbody } = tableShell(columns, { density: "data" });
+  const head: Row = {
+    h: [`${doc.이름 ?? ""}${doc.결과단위 ? ` [${doc.결과단위}]` : ""}`],
+    cols: isNum(a.계)
+      ? { sum: a.계, 노무비: a.노무비 ?? 0, 재료비: a.재료비 ?? 0, 경비: a.경비 ?? 0 }
+      : {},
+    cls: "head",
+    won: true,
+    depth: 0,
+    lv: 0,
+  };
+  for (const r of [head, ...rows(doc, a, h, 0, "")]) {
+    const cell = (k: "sum" | (typeof COSTS)[number]): string => {
+      const v = r.cols?.[k];
+      if (v === undefined || (r.won && !v && k !== "sum")) return "";
+      return r.won ? won(v) : one(v);
+    };
+    const first = el("div", { className: "lstk-h", children: r.h });
+    first.style.setProperty("--lstk-depth", String(r.lv));
+    first.dataset.lv = String(r.lv);
+    const tr = tableRow(columns, [first, cell("sum"), ...COSTS.map(cell)]);
+    tr.className = `lstk-orow ${r.cls ?? ""} ${r.depth ? "is-sub" : ""}`;
+    if (r.loc !== undefined) {
+      tr.dataset.loc = r.loc;
+      tr.addEventListener("click", () => h.pair?.(r.loc!));
+    }
+    tbody.append(tr);
+  }
+  root.classList.add("lstk-out");
+  return root;
+}

A00_Common/line_stack_pick.ts

@@ -0,0 +1,157 @@
+/* =============================================================================
+ * line_stack_pick.ts
+ * 줄 쌓기 고르기 창(PLAN 804-3 · 804-4 · 요구 678-1 · 678-3 · 680-1 · 681)
+ *   찾아 넣기 = M02 [항목 추가] 창 그대로(`openFindPicker` · 탭 M01 전체 · 찾기 칸 · 표) — 줄 갈래마다 그 종류만
+ *     인력(노임 LB) · 재료(자재 MT) · 기계(EQ → 시간당 경비 로직 + 기계='원문번호') · 다른 단가산출(M01 단가산출 로직)
+ *   M01 단가산출 기초 줄 쌓기 = 「M01 전체」 탭만 — M01 은 원천 기준값이라 M02 단가산출 · 일위대가를 부르지 않음(요구 680-1)
+ *   M02 단가산출 줄 쌓기(`take` 있음) · 다른 단가산출 = 탭 [M01 전체 | M02 단가산출 | 일위대가](위 층 · 자기 SK 뺌) —
+ *     고름 = 복사해 펼침(`take(src)` · src = M01 키 | `참조|층|주인|키`) · 참조 줄 없음(요구 681)
+ *   표 고르기 = 품셈 표(조건 칸 + 값 칸) · 값 칸 누름 = 그 줄 · 칸 · 지금 닿는 칸 강조 ·
+ *     옵션에 매인 조건 = 그 줄만 고를 수 있음(다른 줄은 막힘 + 「위 옵션에서 고름」 안내)
+ * ========================================================================== */
+
+import { createButton } from "@ui/ui_template_button";
+import { eqText } from "@ui/ui_template_equation";
+import { el } from "@ui/ui_template_elements";
+import { openModal } from "@ui/ui_template_modal";
+import { tableRow, tableShell, type Column } from "@ui/ui_template_table";
+import { createText } from "@ui/ui_template_text";
+import type { DocTable } from "../common_util/common_util_formula_doc_table";
+import type { MoneyKind } from "../common_util/common_util_line_stack";
+import type { Picked } from "../common_util/common_util_line_stack_pick";
+import { showToast } from "@ui/ui_template_elements";
+import type { Layer } from "../M02_MasterTemplete/M02_MasterTemplete_Api_Fetch";
+import { openFindPicker, type FindKind } from "../M02_MasterTemplete/M02_MasterTemplete_Find_Pick";
+import { lt } from "./line_stack_text";
+
+const KINDS: Partial<Record<MoneyKind, FindKind>> = {
+  인력: "labor",
+  재료: "material",
+  기계: "machine",
+  단가산출: "logic",
+};
+
+/** M02 단가산출 복사 길(804-4) — 그 SK 층 · 키 · 복사해 넣기 */
+export interface StackTake {
+  layer: Layer;
+  owner: string | null;
+  me: string;
+  take: (src: string) => void;
+}
+
+/** 찾아 넣기 — 고르면 `done(고른 것)` · 닫으면 아무것도 안 함 · `m02` 있고 다른 단가산출 = 복사해 펼침 ·
+ *  `query` = 찾기 칸에 넣고 연 결과(이름 단추 · 요구 687-9) */
+export function openStackPick(
+  kind: MoneyKind,
+  done: (p: Picked) => void,
+  m02?: StackTake,
+  query = "",
+): void {
+  const want = KINDS[kind];
+  if (!want) return;
+  const spec = (e: { 규격: string }) => (e.규격 ? { 규격: e.규격 } : {});
+  const copy = kind === "단가산출" && m02 ? m02 : null;
+  openFindPicker({
+    layer: copy?.layer ?? "system",
+    owner: copy?.owner ?? null,
+    title: `${lt("Find_Title")} — ${lt(copy ? "K_복사" : (`K_${kind}` as never))}`,
+    kinds: copy ? ["logic", "sk", "pre"] : [want], // M01 = M01 전체만(680-1)
+    query: query.trim() || undefined,
+    ref: copy
+      ? (r) =>
+          r.키 === copy.me && r.층 === copy.layer && (!copy.owner || r.주인 === copy.owner)
+            ? showToast(lt("Self_Take"), "warning")
+            : copy.take(`참조|${r.층}|${r.주인 ?? ""}|${r.키}`)
+      : undefined,
+    logic: (x) =>
+      copy
+        ? copy.take(x.키)
+        : done({ 키: x.키, 이름: x.이름, 단위: x.결과단위.replace(/^원\/?/, "") }),
+    element: (e) => done({ 키: e.코드, 이름: e.이름, 단위: e.단위, ...spec(e) }),
+    machine: (e) =>
+      e.로직 && e.원문번호
+        ? done({ 키: e.로직, 이름: e.이름, 입력: { 기계: `'${e.원문번호}'` }, ...spec(e) })
+        : undefined,
+  });
+}
+
+const isNum = (v: unknown): boolean =>
+  typeof v === "number" || (typeof v === "string" && v.trim() !== "" && Number.isFinite(Number(v)));
+
+const cellText = (v: unknown): string =>
+  Array.isArray(v)
+    ? `${v[0] ?? ""} ~ ${v[1] ?? ""}`
+    : isNum(v)
+      ? eqText(Number(v))
+      : String(v ?? "");
+
+export interface TablePick {
+  table: DocTable;
+  /** 지금 닿는 줄(-1 = 없음) · 칸 */
+  now: number;
+  col: string;
+  /** 옵션에 매인 조건 — {조건 칸: 옵션 열쇠들} */
+  bound: Record<string, string[]>;
+  done: (row: Record<string, unknown>, col: string) => void;
+}
+
+/** 표 고르기 창 — 값 칸 누름 = 고름 */
+export function openTablePick(o: TablePick): void {
+  const t = o.table;
+  const conds = Object.keys(t.조건 ?? {});
+  const valueCols = [
+    ...new Set([...Object.keys(t.값칸 ?? {}), ...t.줄.flatMap((r) => Object.keys(r))]),
+  ].filter((k) => !conds.includes(k));
+  const locked = Object.keys(o.bound).length > 0;
+  const columns: Column[] = [
+    ...conds.map((c) => ({ label: c })),
+    ...valueCols.map((c) => {
+      const unit = (t.값칸 ?? {})[c];
+      return { label: unit ? `${c} (${String(unit)})` : c, align: "end" as const };
+    }),
+  ];
+  openModal({
+    title: [t.원문번호, (t as { 이름?: string }).이름].filter(Boolean).join(" "),
+    closeLabel: lt("Close"),
+    width: "960px",
+    mount: (body, close) => {
+      const { root, tbody } = tableShell(columns, { density: "data" });
+      t.줄.forEach((row, k) => {
+        const off = locked && k !== o.now;
+        const tr = tableRow(columns, [
+          ...conds.map((c) => cellText(row[c])),
+          ...valueCols.map((c) =>
+            isNum(row[c]) // 수만 고름(글 칸 = 단위 등은 보기만 · M02 길은 수를 글로 줌)
+              ? createButton({
+                  label: cellText(row[c]),
+                  variant: k === o.now && c === o.col ? "filled" : "ghost",
+                  size: 24,
+                  disabled: off,
+                  onClick: () => {
+                    close();
+                    o.done(row, c);
+                  },
+                })
+              : cellText(row[c]),
+          ),
+        ]);
+        tr.dataset.row = String(k);
+        tbody.append(tr);
+      });
+      const note = locked
+        ? [
+            createText(
+              `${lt("Tbl_Bound")} — ${[...new Set(Object.values(o.bound).flat())].join(" · ")}`,
+            ),
+          ]
+        : [];
+      body.append(
+        el("div", {
+          className: "lstk-tpick",
+          attrs: { "data-table-pick": t.키 ?? "" },
+          children: [...note, createText(lt("Tbl_Hint")), root],
+        }),
+      );
+    },
+  });
+}

A00_Common/line_stack_rows.ts

@@ -0,0 +1,327 @@
+/* =============================================================================
+ * line_stack_rows.ts
+ * 줄 쌓기 공식 묶음(PLAN 804-2 · 요구 675) — 「이름 = 값」 · 「이름 = 식」 줄 묶음 · 틀 이름표 · [식으로 풀기] · [틀로 저장]
+ *   보임 = 값 줄은 값 칸(연결 값을 고쳐 적으면 숫자 = 고정값 · 요구 664) · 식 줄은 「이름 = 식 = 값」 글 · 단가산출 결과 기호 = [식으로 풀기]
+ *   고침(804-7 · 요구 687-14) = [식 고치기] 걷음 — 이름 · 식 글을 누르면 그 줄만 그 자리에서 이름 · 식 · 단위 칸 + 지움 ·
+ *     바꾸면 닫힘 · 머리 [+] = 식 줄 더함 — 이름 바꿈 = 문서 전부(`rename`) · 식 = 식 줄 · 수 = 숫자 연결
+ *   만약 안 탄 갈래 기호(`hide` · 요구 687-10) = 안 보임(식 글은 그대로)
+ *   틀 = 단가산출 결과 문서(굴착기 Q 등)를 이 문서 식으로 옮김(`unfold`) — 꼴이 바뀌면 「내 틀 (틀 이름 에서 변경)」 ·
+ *     빈 틀 = [찾아 넣기](M01 단가산출 결과 — 작업량 등) · [틀로 저장] · 내 틀 목록 걷음(요구 685) · 표 값만 = 머리 「표 값」
+ *   표 값(804-3) = [표 · 칸] 단추 → 표 고르기 창(`line_stack_pick.ts`) · 값 칸 누름 = 그 줄 · 칸(`pickCell`)
+ * ========================================================================== */
+
+import { createButton, createIconButton } from "@ui/ui_template_button";
+import { eqText } from "@ui/ui_template_equation";
+import { el, showToast } from "@ui/ui_template_elements";
+import { createInputField } from "@ui/ui_template_input";
+import {
+  DocError,
+  rename,
+  splitId,
+  varId,
+  type FormulaDoc,
+} from "../common_util/common_util_formula_doc";
+import { isNum } from "../common_util/common_util_formula_doc_calc";
+import {
+  dropSyms,
+  freshId,
+  newVar,
+  setRow,
+  shapeOf,
+  unfold,
+  type StackItem,
+  type StackLine,
+} from "../common_util/common_util_line_stack";
+import {
+  aliasText,
+  boundConds,
+  currentRow,
+  pickCell,
+  shownUnit,
+  tableAlias,
+} from "../common_util/common_util_line_stack_pick";
+import { openFindPicker } from "../M02_MasterTemplete/M02_MasterTemplete_Find_Pick";
+import type { EditHooks } from "./line_stack_edit";
+import { openTablePick } from "./line_stack_pick";
+import { lt } from "./line_stack_text";
+
+const clone = <T>(v: T): T => JSON.parse(JSON.stringify(v)) as T;
+type Block = Extract<StackLine, { 꼴: "공식" }>;
+
+const LINK_TAG: Record<string, string> = {
+  표: "표",
+  요소: "요소",
+  단가산출: "단가산출",
+  선택: "선택",
+  입력: "입력",
+};
+
+const input = (
+  value: string,
+  placeholder: string,
+  cls: string,
+  set: (t: string) => void,
+): HTMLElement => {
+  const f = createInputField({ value, placeholder, compact: true, size: 24 });
+  f.root.classList.add(cls);
+  f.input.addEventListener("change", () => set(f.input.value));
+  return f.root;
+};
+
+export function buildBlock(
+  h: EditHooks,
+  i: number,
+  j: number,
+  line: Block,
+  hide: (id: string) => boolean = () => false,
+): HTMLElement[] {
+  const d = h.doc;
+  const at = `${i}.${j}`;
+  const editing = (id: string): boolean => h.open.has(`${at}:${id}`);
+  /** 그 줄 고침 켬 · 끔(화면 상태) */
+  const flip = (id: string, on: boolean): void => {
+    if (on) h.open.add(`${at}:${id}`);
+    else h.open.delete(`${at}:${id}`);
+  };
+  const vals = (h.answer.값 ?? {}) as Record<string, unknown>;
+  const vars = new Map((d.변수 ?? []).map((v) => [varId(v), v]));
+  const lines = new Map((d.식 ?? []).map((l) => [String(l.기호 ?? ""), String(l.식 ?? "")]));
+  const blockOf = (items: StackItem[]): Block => items[i].줄[j] as Block;
+  // 표 값 기호 = 화면 이름(요구 683 · 문서 기호 그대로) — 칸 글은 화면 이름 ↔ 기호로 오감
+  const alias = tableAlias(d);
+  const show = (id: string): string => alias[id] ?? id;
+  const shownText = (t: string): string => aliasText(t, alias);
+  const realText = (t: string): string => aliasText(t, alias, true);
+  const valText = (id: string): string => {
+    const v = vals[id];
+    if (isNum(v) || typeof v === "string")
+      return `${eqText(v)} ${shownUnit(vars.get(id)?.단위)}`.trim();
+    if (v && typeof v === "object")
+      return ["노무비", "재료비", "경비"]
+        .map((c) => `${c} ${eqText((v as Record<string, unknown>)[c])}`)
+        .join(" · ");
+    return `— ${h.answer.빈값?.[id] ?? ""}`.trim();
+  };
+
+  // ── 이름표 ──
+  const tplName = (k: string): string =>
+    k.startsWith("my:") ? lt("My_Tpl") : (h.subDoc(k)?.이름 ?? (h.name(k) || k)); // my: = 옛 내 틀(걷음 · 요구 685)
+  const changed = !!line.틀 && !!line.틀꼴 && shapeOf(d, line.기호) !== line.틀꼴;
+  const tableOnly = line.기호.every((id) => vars.get(id)?.연결?.갈래 === "표" && !lines.has(id));
+  const label = !line.틀
+    ? lt(tableOnly && line.기호.length ? "K_표값" : "K_공식")
+    : changed
+      ? `${lt("My_Tpl")} (${tplName(line.틀)} ${lt("Changed_From")})`
+      : tplName(line.틀);
+  const head = el("div", {
+    className: "lstk-fhead",
+    children: [
+      el("span", { className: "lstk-kind", text: label }),
+      createIconButton({
+        icon: "plus",
+        title: lt("Add_Row"),
+        size: 24,
+        onClick: () =>
+          h.change((doc, items) => {
+            const id = freshId(doc, "x");
+            (doc.변수 ??= []).push(newVar(id, { 갈래: "숫자", 값: 0 }));
+            blockOf(items).기호.push(id);
+            flip(id, true);
+          }),
+      }),
+    ],
+  });
+  head.dataset.tpl = changed ? "changed" : line.틀 ? "tpl" : "";
+
+  // ── 표 값 — [표 · 칸] → 표 고르기 ──
+  const tableBtn = (id: string, link: NonNullable<FormulaDoc["변수"]>[number]["연결"] & object) => {
+    const b = createButton({
+      label:
+        [
+          lt("Tbl"),
+          ...Object.values(link.조건 ?? {}).flatMap((t) =>
+            /^'.*'$/.test(String(t)) ? [String(t).slice(1, -1)] : [],
+          ),
+          link.칸,
+        ]
+          .filter(Boolean)
+          .join(" · ") + " ▾", // 고른 줄(글 조건) · 칸
+      variant: "ghost",
+      size: 24,
+      onClick: () =>
+        void h.table(String(link.표 ?? "")).then((t) => {
+          if (!t) return void showToast(lt("Tbl_Missing"), "warning");
+          openTablePick({
+            table: t,
+            now: currentRow(t, link, vals),
+            col: String(link.칸 ?? ""),
+            bound: boundConds(d, link),
+            done: (row, col) => h.change((doc) => pickCell(doc, id, t, row, col)),
+          });
+        }),
+    });
+    b.dataset.tablePick = id;
+    b.title = h.name(String(link.표 ?? "")) || String(link.표 ?? "");
+    return b;
+  };
+
+  // ── 줄 ──
+  const renameRow = (old: string, now: string): void => {
+    const t = now.trim();
+    if (!t || t === old) return;
+    try {
+      const copy = clone(d);
+      const [s, lo, up] = splitId(t);
+      rename(copy, old, s, lo, up);
+    } catch (e) {
+      if (e instanceof DocError) return void showToast(lt("Bad_Name"), "warning");
+      throw e;
+    }
+    h.change((doc, items) => {
+      const [s, lo, up] = splitId(t);
+      rename(doc, old, s, lo, up);
+      for (const it of items)
+        for (const l of it.줄) if (l.꼴 === "공식") l.기호 = l.기호.map((x) => (x === old ? t : x));
+    });
+  };
+  const unfoldRow = (id: string, sub: FormulaDoc, key: string): void =>
+    h.change((doc, items) => {
+      const moved = unfold(doc, sub, id);
+      const blk = blockOf(items);
+      blk.기호 = blk.기호.filter((x) => x !== id);
+      items[i].줄.splice(j + 1, 0, { 꼴: "공식", 기호: moved, 틀: key, 틀꼴: shapeOf(doc, moved) });
+      if (!blk.기호.length) items[i].줄.splice(j, 1);
+    });
+  /** 누르면 그 줄 고침(보이는 글을 고침) */
+  const tap = (node: HTMLElement, id: string): HTMLElement => {
+    node.classList.add("lstk-tap");
+    node.tabIndex = 0;
+    node.setAttribute("role", "button");
+    node.title = lt("Edit_Hint");
+    const go = (): void => {
+      flip(id, true);
+      h.change(() => undefined);
+    };
+    node.addEventListener("click", go);
+    node.addEventListener("keydown", (e) => e.key === "Enter" && go());
+    return node;
+  };
+  /** 고친 뒤 닫음 */
+  const done = (id: string, fn: () => void): void => {
+    flip(id, false);
+    fn();
+  };
+  const rows = line.기호
+    .filter((id) => !hide(id))
+    .map((id) => {
+      const v = vars.get(id);
+      const link = v?.연결;
+      const expr = lines.get(id);
+      const sub = link?.갈래 === "단가산출" && link.키 ? h.subDoc(link.키) : null;
+      const tag =
+        link?.갈래 === "표" && !expr
+          ? tableBtn(id, link)
+          : link && LINK_TAG[link.갈래 ?? ""] && !expr
+            ? el("span", {
+                className: "lstk-tag",
+                text: `${LINK_TAG[link.갈래!]}${link.키 && !link.키.includes("{") ? ` · ${sub?.이름 ?? h.name(link.키) ?? ""}` : ""}`,
+              })
+            : null;
+      const tools: HTMLElement[] = [];
+      if (sub?.결과 && link?.키)
+        tools.push(
+          createButton({
+            label: lt("Unfold"),
+            variant: "ghost",
+            size: 24,
+            onClick: () => unfoldRow(id, sub, link.키!),
+          }),
+        );
+      if (link?.갈래 === "단가산출" && !link.키)
+        tools.push(
+          createButton({
+            label: lt("Find_Title"),
+            variant: "ghost",
+            size: 24,
+            onClick: () =>
+              openFindPicker({
+                layer: "system",
+                owner: null,
+                title: lt("K_단가산출"),
+                kinds: ["logic"],
+                results: true,
+                logic: (x) =>
+                  h.change((doc) => {
+                    const y = doc.변수?.find((z) => varId(z) === id);
+                    if (y) y.연결 = { 갈래: "단가산출", 키: x.키, 입력: {} };
+                  }),
+              }),
+          }),
+        );
+      const name = tap(el("b", { className: "lstk-sym", text: show(id) }), id);
+      const valueOf =
+        expr ??
+        (link?.갈래 === "숫자" ? String(link.값 ?? "") : isNum(vals[id]) ? String(vals[id]) : "");
+      let body: (HTMLElement | string)[];
+      const open = editing(id);
+      if (open)
+        body = [
+          input(show(id), lt("Row_Name"), "lstk-f-s", (t) =>
+            done(id, () => renameRow(id, t.trim() === show(id) ? id : t)),
+          ),
+          "=",
+          input(shownText(valueOf), lt("Row_Expr"), "lstk-f-l", (t) =>
+            done(id, () => h.change((doc) => setRow(doc, id, realText(t)))),
+          ),
+          input(v?.단위 ?? "", lt("Unit"), "lstk-f-s", (t) =>
+            done(id, () =>
+              h.change((doc) => {
+                let x = doc.변수?.find((y) => varId(y) === id);
+                if (!x) (doc.변수 ??= []).push((x = newVar(id, { 갈래: "식" })));
+                x.단위 = t.trim();
+              }),
+            ),
+          ),
+          el("span", { className: "lstk-val", text: `= ${valText(id)}` }),
+          createButton({
+            label: "×",
+            variant: "danger-ghost",
+            size: 24,
+            onClick: () => done(id, () => h.change((doc) => dropSyms(doc, [id]))),
+          }),
+          createIconButton({
+            icon: "check",
+            title: lt("Close"),
+            size: 24,
+            onClick: () => done(id, () => h.change(() => undefined)),
+          }),
+        ];
+      else if (expr !== undefined || sub || link?.갈래 === "단가산출")
+        body = [
+          name,
+          "=",
+          ...(expr
+            ? [tap(el("span", { className: "lstk-expr", text: shownText(expr) }), id), "="]
+            : []),
+          el("span", { className: "lstk-val", text: valText(id) }),
+        ];
+      else
+        body = [
+          name,
+          "=",
+          input(shownText(valueOf), valText(id), "lstk-f-m", (t) =>
+            h.change((doc) => setRow(doc, id, realText(t))),
+          ),
+          ...(shownUnit(v?.단위)
+            ? [el("span", { className: "lstk-unit", text: shownUnit(v?.단위) })]
+            : []),
+        ];
+      const row = el("div", {
+        className: `lstk-frow ${open ? "is-open" : ""}`,
+        children: [...body, ...(tag ? [tag] : []), ...tools],
+      });
+      row.dataset.sym = id;
+      return row;
+    });
+  return [head, ...rows];
+}

A00_Common/line_stack_screen.ts

@@ -0,0 +1,496 @@
+/* =============================================================================
+ * line_stack_screen.ts
+ * 단가산출 「줄 쌓기」 탭(PLAN 804-2 · 요구 670~677) — 공용(M01 단가산출 기초 · M02 단가산출 = 길 앞머리만 바꿈)
+ *   위 = 옵션 가로(`formula_doc_options.ts`) · M02 사본 [단가 갱신] · [재생성] · 「M01 새 판」 배지(층 쓰기)
+ *     `page` 있음(M01 804-7 · M02 804-8) = 저장 · 되돌림 단추 없음 — 페이지 [저장] · [되돌림]이 `save` · `discard` 를 부름 ·
+ *     고침이 바뀌면 `page()` · `page` 없음(일위대가 줄 모달 등) = 위에 [고침 버림] · [수식 저장]
+ *   가운데 = 왼쪽 줄 쌓기 편집(`line_stack_edit.ts`) | 오른쪽 산출근거 출력(`line_stack_out.ts` · 기계 시간당 경비 펼침)
+ *   아래 = 합계 상자(노무비 · 재료비 · 경비 · 계 · 화면 아래 고정 · 요구 687-3)
+ *   정본 = 수식 문서(탭을 바꾸면 다시 읽음) · 줄 쌓기 차림 = 문서 칸 `쌓기` · 804-6 옛 수식 문서 탭 걷음 = 이 화면이 「수식」 탭
+ *   셈 = 브라우저 계산기(`calcDoc`) 즉시 · 캐시에 없는 연결만 뒤에서 `POST {길}/preview`(옛 요청 끊음)
+ *   고침 = 캐시(sessionStorage)에 쌓고 [저장] 한 번에 `POST {길}/save`(서버가 정본으로 다시 셈) · 자동저장 없음
+ *   M02 사본(`copy`) — 저장 몸 {문서, 끊음(받은 그대로), 판} · 판 바뀜(409)은 문서가 그대로면 새 판으로 한 번 더
+ *     [단가 갱신] · [재생성] = 미리 셈 → 알림 → 저장(`formula_doc_copy.ts` · 고친 것 먼저 저장)
+ * ========================================================================== */
+
+import { API_BASE_URL } from "@config/config_frontend";
+import { createBadge } from "@ui/ui_template_badge";
+import { createButton } from "@ui/ui_template_button";
+import {
+  el,
+  hideLoadingOverlay,
+  showConfirmDialog,
+  showLoadingOverlay,
+  showToast,
+} from "@ui/ui_template_elements";
+import { blankDoc, type FormulaDoc } from "../common_util/common_util_formula_doc";
+import { calcDoc, type DocAnswer } from "../common_util/common_util_formula_doc_calc";
+import type { DocTable } from "../common_util/common_util_formula_doc_table";
+import { createDocCache, type DocRecord } from "../common_util/common_util_formula_doc_cache";
+import {
+  docOf,
+  stackOf,
+  type StackDoc,
+  type StackItem,
+} from "../common_util/common_util_line_stack";
+import {
+  askJob,
+  copyBadges,
+  copyTools,
+  type CopyJob,
+  type CopyMark,
+  type CopyOptions,
+  type JobReply,
+} from "./formula_doc_copy";
+import { docFoot } from "./formula_doc_foot";
+import { buildOptions } from "./formula_doc_options";
+import { ft } from "./formula_doc_text";
+import { addTaken, type Taken } from "../common_util/common_util_line_stack_copy";
+import type { Layer } from "../M02_MasterTemplete/M02_MasterTemplete_Api_Fetch";
+import { buildEdit } from "./line_stack_edit";
+import { buildOut } from "./line_stack_out";
+import { lt } from "./line_stack_text";
+import "./line_stack.css";
+
+export interface StackScreenOptions {
+  /** 길 앞머리(`/m01/logic/doc`) — GET ?key · POST /preview · /save · /links */
+  base: string;
+  admin: boolean;
+  /** sessionStorage 열쇠 */
+  cache: string;
+  copy?: CopyOptions;
+  /** M02 SK 층(804-4) — 줄 쌓기 다른 단가산출 · 일위대가 복사 길 · 없으면(M01) 복사 없음 */
+  scope?: { layer: Layer; owner: string | null };
+  /** 페이지가 저장 · 되돌림을 맡음(M01 804-7 · M02 804-8) — 고침 있음이 바뀔 때 부름 · 화면 위 [고침 버림] · [수식 저장] 없음 */
+  page?: () => void;
+}
+
+type Docs = Record<string, FormulaDoc>;
+interface Loaded {
+  문서: StackDoc;
+  셈: DocAnswer;
+  연결: DocRecord;
+  새?: boolean;
+  끊음?: Docs;
+  사본?: CopyMark;
+  판?: string;
+}
+
+const clone = <T>(v: T): T => JSON.parse(JSON.stringify(v)) as T;
+
+export function createStackScreen(opt: StackScreenOptions) {
+  const head = el("div", { className: "lstk__head" });
+  const left = el("div", { className: "lstk__left" });
+  const right = el("div", { className: "lstk__right" });
+  const foot = el("div", { className: "lstk__foot" });
+  const root = el("div", {
+    className: "lstk",
+    attrs: { "data-line-stack": "" },
+    children: [head, el("div", { className: "lstk__areas", children: [left, right] }), foot],
+  });
+  // 산출근거 고정 높이(요구 683) — 스크롤 조상(없으면 창) 높이 · 넓을 때만 고정(line_stack.css)
+  const fit = (): void => {
+    let p = root.parentElement;
+    while (p && !/(auto|scroll)/.test(getComputedStyle(p).overflowY)) p = p.parentElement;
+    const view = (p?.clientHeight ?? innerHeight) - foot.offsetHeight;
+    root.style.setProperty("--lstk-view", `${Math.max(240, view)}px`);
+  };
+  window.addEventListener("resize", fit);
+  const cp = opt.copy;
+  let key = "";
+  let shown: string | null = null; // 연 키(같은 키 다시 그림 = 안 읽음 · 탭 바꿈 = force)
+  let saved = "";
+  let doc: StackDoc | null = null;
+  let answer: DocAnswer | null = null;
+  let cache = createDocCache();
+  let given: Record<string, unknown> = {};
+  let cut: Docs = {};
+  let mark: CopyMark | undefined;
+  let version = "";
+  let seq = 0;
+  let asked = "";
+  let ctl: AbortController | null = null;
+  const tables = new Map<string, Promise<DocTable | null>>(); // 표 고르기(문서 열 때 비움)
+  const opened = new Set<string>(); // 산출근거 펼친 자리
+  let paired = ""; // 짝 강조 자리(679 — 항목 `k` · 줄 `k.j`)
+  const blocks = new Set<string>(); // 풀린 공식 묶음
+
+  const call = async <T>(path: string, body?: unknown, signal?: AbortSignal): Promise<T> => {
+    const r = await fetch(`${API_BASE_URL}${cp ? cp.route(key, path) : opt.base + path}`, {
+      method: body === undefined ? "GET" : "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      ...(body === undefined ? {} : { body: JSON.stringify(body) }),
+      signal,
+    });
+    const data = (await r.json().catch(() => ({}))) as T & { detail?: unknown };
+    if (!r.ok) {
+      const why = data.detail;
+      throw Object.assign(new Error(typeof why === "string" ? why : r.statusText), {
+        status: r.status,
+      });
+    }
+    return data;
+  };
+
+  // ── 캐시 ──
+  const drafts = (): Record<string, FormulaDoc> => {
+    try {
+      return JSON.parse(sessionStorage.getItem(opt.cache) ?? "{}") as Record<string, FormulaDoc>;
+    } catch {
+      return {};
+    }
+  };
+  const dirty = (): boolean => !!doc && JSON.stringify(doc) !== saved;
+  const keep = (): void => {
+    const all = drafts();
+    if (dirty()) all[key] = doc!;
+    else delete all[key];
+    try {
+      sessionStorage.setItem(opt.cache, JSON.stringify(all));
+    } catch {
+      /* 캐시가 막혀도 화면 안 고침은 남음 */
+    }
+    opt.page?.();
+  };
+
+  // ── 셈 ──
+  const usable = (): Record<string, unknown> => {
+    const out: Record<string, unknown> = {};
+    for (const v of doc?.변수 ?? []) {
+      const k = v.열쇠;
+      if (!k || !(k in given)) continue;
+      const kind = v.연결?.갈래;
+      if (kind === "입력") out[k] = given[k];
+      if (kind === "선택" && (v.연결?.목록 ?? []).some((x) => String(x) === String(given[k])))
+        out[k] = (v.연결!.목록 ?? []).find((x) => String(x) === String(given[k]));
+    }
+    return out;
+  };
+  const recalc = (): void => {
+    if (!doc) return;
+    answer = calcDoc(doc, cache.links, usable());
+    if (cache.takeMissing()) ask();
+  };
+  /** 캐시에 없는 연결 — 뒤에서 서버 기록을 받아 더함 */
+  const ask = (): void => {
+    const snap = JSON.stringify([doc, usable()]);
+    if (snap === asked) return;
+    asked = snap;
+    ctl?.abort();
+    ctl = new AbortController();
+    const mine = ++seq;
+    void call<{ 연결: DocRecord }>(
+      "/preview",
+      cp ? { 문서: doc, 끊음: cut } : { 문서: key ? doc : { ...doc, 키: "_새" }, 입력: usable() },
+      ctl.signal,
+    )
+      .then((got) => {
+        if (mine !== seq) return;
+        cache.merge(got.연결);
+        cache.merge({ 문서: cut });
+        recalc();
+        draw();
+      })
+      .catch(() => undefined);
+  };
+  const subDoc = (k: string): FormulaDoc | null => {
+    try {
+      return cache.links.doc(k) ?? null;
+    } catch {
+      if (cache.takeMissing()) ask();
+      return null;
+    }
+  };
+
+  /** 표 하나(`/table`) — 받은 표는 계산기 캐시에도 */
+  const tableOf = (k: string): Promise<DocTable | null> => {
+    if (!tables.has(k))
+      tables.set(
+        k,
+        call<DocTable & { 끊김?: string }>(`/table?key=${encodeURIComponent(k)}`)
+          .then((t) => {
+            if (t.끊김) return null;
+            cache.putTable(k, t);
+            return t;
+          })
+          .catch(() => null),
+      );
+    return tables.get(k)!;
+  };
+
+  /** 고침 — 문서 · 차림을 고친 뒤 문서로 굳힘 */
+  const change = (fn: (d: StackDoc, items: StackItem[]) => void): void => {
+    if (!doc) return;
+    const items = stackOf(doc);
+    fn(doc, items);
+    doc = docOf(doc, items);
+    keep();
+    recalc();
+    draw();
+  };
+
+  /** 짝 강조 — 왼쪽 카드 · 오른쪽 줄(같은 자리) · from = 누른 쪽(반대쪽을 보이는 자리로) */
+  const pair = (loc: string, from?: "left" | "right"): void => {
+    paired = loc;
+    for (const x of root.querySelectorAll(".is-pair")) x.classList.remove("is-pair");
+    if (!loc) return;
+    const sel = `[data-loc="${CSS.escape(loc)}"]`;
+    const l = left.querySelector<HTMLElement>(sel);
+    const r = [...right.querySelectorAll<HTMLElement>(sel)];
+    l?.classList.add("is-pair");
+    r.forEach((x) => x.classList.add("is-pair"));
+    if (from === "right") l?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    if (from === "left") r[0]?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  };
+
+  /** 복사해 펼침(804-4) — 서버 조각 → 새 항목(고침 = 캐시 · [저장] 때 서버가 다시 셈) */
+  const takeIn = async (src: string): Promise<void> => {
+    try {
+      const got = await call<Taken>(`/take?src=${encodeURIComponent(src)}`);
+      change((d, items) => addTaken(d, items, got));
+    } catch (e) {
+      showToast(`${lt("Take_Failed")} — ${e instanceof Error ? e.message : ""}`, "error");
+    }
+  };
+  const takeCtx = () =>
+    cp && opt.scope && key
+      ? { ...opt.scope, me: key, take: (src: string) => void takeIn(src) }
+      : undefined;
+
+  // ── 그림 ──
+  const edit = (): boolean => opt.admin && (!!key || !cp);
+  const draw = (): void => {
+    if (!doc || !answer) {
+      [head, left, right, foot].forEach((x) => x.replaceChildren());
+      return;
+    }
+    const options = buildOptions(doc, given, !!cp && !opt.admin, (k, v, x) => {
+      const at = doc?.변수?.indexOf(v) ?? -1;
+      if (cp) return change((d) => at >= 0 && (d.변수![at].연결 = { ...v.연결!, 값: x }));
+      given[k] = x;
+      recalc();
+      draw();
+    });
+    const busy = dirty();
+    const tools = [
+      ...(cp && edit() && key ? copyTools(true, (job) => void runJob(job)) : []),
+      ...(edit() && key && !opt.page
+        ? [
+            createButton({
+              label: ft("Discard"),
+              variant: "ghost",
+              size: 28,
+              disabled: !busy,
+              onClick: () => void discard(),
+            }),
+            createButton({
+              label: ft("Save"),
+              variant: "filled",
+              size: 28,
+              disabled: !busy,
+              onClick: () => void save(),
+            }),
+          ]
+        : []),
+    ];
+    head.replaceChildren(
+      ...(options.length ? [el("div", { className: "fdoc__options", children: options })] : []),
+      el("div", {
+        className: "lstk__bar",
+        children: [
+          el("div", {
+            className: "lstk__badges",
+            children: [
+              ...(busy ? [createBadge(ft("Dirty"), "warning")] : []),
+              ...(cp ? copyBadges(mark, opt.admin) : []),
+            ],
+          }),
+          el("div", { className: "lstk__tools", children: tools }),
+        ],
+      }),
+    );
+    const items = stackOf(doc);
+    root.dataset.edit = edit() ? "1" : "";
+    left.replaceChildren(
+      ...(edit()
+        ? [
+            buildEdit({
+              doc,
+              answer,
+              items,
+              change,
+              table: tableOf,
+              subDoc,
+              name: (k) => cache.names.get(k) ?? "",
+              open: blocks,
+              pair: (loc) => pair(loc, "left"),
+              take: takeCtx(),
+            }),
+          ]
+        : []),
+    );
+    right.replaceChildren(
+      items.length || doc.결과
+        ? buildOut(doc, answer, {
+            cache,
+            open: opened,
+            toggle: (at) => {
+              if (opened.has(at)) opened.delete(at);
+              else opened.add(at);
+              draw();
+            },
+            miss: ask,
+            pair: (loc) => pair(loc, "right"),
+          })
+        : el("p", { className: "ui-text ui-text--muted", text: lt("Empty") }),
+    );
+    foot.replaceChildren(...(doc.결과 ? [] : [docFoot(answer)]));
+    pair(paired);
+    fit();
+  };
+
+  const take = (got: Loaded): void => {
+    cache.merge(got.연결);
+    saved = JSON.stringify(got.문서);
+    doc = clone(got.문서);
+    cut = clone(got.끊음 ?? {});
+    mark = got.사본;
+    version = got.판 ?? "";
+  };
+
+  /** 사본 [단가 갱신] · [재생성] — 미리 셈 → 알림 → 저장(고친 것 먼저 저장 · 버림) */
+  const runJob = async (job: CopyJob): Promise<void> => {
+    if (!doc || !cp) return;
+    if (dirty()) return void showToast(ft("Dirty_First"), "warning");
+    showLoadingOverlay();
+    let got: JobReply;
+    try {
+      got = await call<JobReply>("/preview", { 할일: job });
+    } catch (e) {
+      hideLoadingOverlay();
+      return void showToast(
+        `${ft("Save_Failed")} — ${e instanceof Error ? e.message : ""}`,
+        "error",
+      );
+    }
+    hideLoadingOverlay();
+    if (await askJob(job, got, cache.names)) await save({ 할일: job, 판: version }, ft("Job_Done"));
+  };
+
+  let loading: Promise<void> = Promise.resolve();
+  const save = async (job?: Record<string, unknown>, done = ft("Saved")): Promise<boolean> => {
+    await loading; // 새 로직 저장 뒤 여는 중이면 다 읽고(캐시 이어 받음)
+    if (!doc || (!job && !dirty())) return true;
+    const send = job ?? (cp ? { 문서: doc, 끊음: cut, 판: version } : { 문서: doc });
+    const was = saved;
+    showLoadingOverlay();
+    try {
+      const got = await call<Loaded>("/save", send).catch(async (e: { status?: number }) => {
+        // 사본 판 바뀜(페이지 [저장] 등) — 문서가 받은 그대로면 새 판으로 한 번 더
+        if (!cp || e.status !== 409) throw e;
+        const now = await call<Loaded>("");
+        if (JSON.stringify(now.문서) !== was) throw e;
+        return call<Loaded>("/save", { ...send, 판: (version = now.판 ?? "") });
+      });
+      take(got);
+      keep();
+      recalc();
+      draw();
+      if (cp && got.판) cp.onSaved?.(got.판);
+      if (done) showToast(done, "success");
+      return true;
+    } catch (e) {
+      showToast(`${ft("Save_Failed")} — ${e instanceof Error ? e.message : ""}`, "error");
+      return false;
+    } finally {
+      hideLoadingOverlay();
+    }
+  };
+
+  const discard = async (): Promise<void> => {
+    if (!doc || !dirty()) return void draw();
+    doc = JSON.parse(saved) as StackDoc;
+    keep();
+    recalc();
+    draw();
+  };
+
+  /** 문서 열기 — 서버 · 캐시에서 다시 읽음(수식 탭 고침 · 저장을 이어 받음) */
+  const open = async (next: string): Promise<void> => {
+    const was = key;
+    shown = next;
+    if (next !== key) {
+      paired = "";
+      opened.clear();
+      blocks.clear();
+      given = {};
+    }
+    key = next;
+    doc = answer = null;
+    asked = "";
+    cache = createDocCache();
+    tables.clear();
+    [cut, mark, version] = [{}, undefined, ""];
+    draw();
+    if (!next) {
+      if (cp)
+        return void right.replaceChildren(
+          el("p", { className: "ui-text ui-text--muted", text: lt("Unsaved_New") }),
+        );
+      doc = (drafts()[""] as StackDoc | undefined) ?? blankDoc();
+      saved = JSON.stringify(blankDoc());
+      recalc();
+      return draw();
+    }
+    const mine = ++seq;
+    try {
+      const got = await call<Loaded>(cp ? "" : `?key=${encodeURIComponent(next)}`);
+      if (mine !== seq || key !== next) return;
+      take(got);
+      const all = drafts();
+      if (!was && got.새 && all[""] && !all[next]) {
+        all[next] = { ...all[""], 키: next, 이름: got.문서.이름, 결과단위: got.문서.결과단위 };
+        delete all[""];
+        sessionStorage.setItem(opt.cache, JSON.stringify(all));
+      }
+      if (all[next]) doc = clone(all[next] as StackDoc);
+      recalc();
+      draw();
+      opt.page?.(); // 캐시에서 이어 받은 고침 — 페이지 [저장] · [되돌림] 켬
+    } catch (e) {
+      if (mine === seq)
+        head.replaceChildren(
+          el("p", {
+            className: "ui-text ui-text--muted",
+            text: `${ft("Load_Failed")} — ${e instanceof Error ? e.message : ""}`,
+          }),
+        );
+    }
+  };
+
+  const canLeave = async (): Promise<boolean> => {
+    if (!dirty()) return true;
+    if (!(key in drafts())) return true; // 다른 화면에서 이미 버림
+    if (!(await showConfirmDialog(ft("Leave"), ft("Leave_Ok")))) return false;
+    doc = JSON.parse(saved) as StackDoc;
+    keep();
+    return true;
+  };
+
+  return {
+    root,
+    /** 로직 · SK 키로 그림(빈 키 = 저장 전 새 것) — 같은 키는 그대로 · `force` = 다시 읽음(탭 바꿈) */
+    draw: (next: string, force = false): void => {
+      if (force || next !== shown) loading = open(next);
+    },
+    canLeave,
+    dirty,
+    /** 페이지 [저장](804-7) — 고침 있으면 서버 정본 저장 · 알림은 페이지가(`done` 빈 글) · 실패 = false */
+    save: (): Promise<boolean> => save(undefined, ""),
+    /** 페이지 [되돌림] — 저장 뒤 상태로(캐시 지움) */
+    discard: (): Promise<void> => discard(),
+    /** 시험 · 확인용 */
+    state: () => ({ doc, answer, dirty: dirty(), items: doc ? stackOf(doc) : [] }),
+  };
+}

A00_Common/line_stack_tex.ts

@@ -0,0 +1,152 @@
+/* =============================================================================
+ * line_stack_tex.ts
+ * 줄 쌓기 산출근거 수식 조판(PLAN 804-2 · 요구 677) — 식 나무 → TeX → KaTeX(MIT) · 분수 · 첨자 · 괄호
+ *   기호 식(side "sym") = 기호(첨자) · 값 식(side "val") = 값(모르면 기호 빨강) · 만약 = 탄 갈래만 · 반올림 · 올림 · 버림 감싸개 숨김
+ *   금액 줄 꼴(`inline`) = ÷ 한 줄(경쟁사 「노무비 : 59,020 ÷ Q」) · 공식 줄 = 분수
+ *   규칙은 수식 탭 그림(`formula_doc_render.ts` renderNode)과 같음 — 셈 정본은 계산기
+ * ========================================================================== */
+
+import katex from "katex";
+import "../config/node_modules/katex/dist/katex.min.css";
+import { eqText } from "@ui/ui_template_equation";
+import { splitId, type Node } from "../common_util/common_util_formula_doc";
+import { isNum } from "../common_util/common_util_formula_doc_calc";
+import { leafNum, takenOf, type Values } from "../common_util/common_util_formula_doc_view";
+
+export interface TexCtx {
+  side: "sym" | "val";
+  vals: Values;
+  inline?: boolean;
+  /** 묶음 값의 비목(기계 · 단가산출 줄 노 · 재 · 경) */
+  cost?: string;
+  /** 번지 읽는 이름(804-5) — 「번지.복사N.노무비」 → 「항목 이름 노무비」 */
+  place?: Record<string, string>;
+  /** 표 값 기호 화면 이름(요구 683 — 「Q_수량2^표」 → 「Q_작업반장」) */
+  alias?: Record<string, string>;
+}
+
+const HIDE = new Set(["반올림", "올림", "버림"]);
+const OPS: Record<string, string> = {
+  "+": "+",
+  "-": "-",
+  "*": "\\times",
+  "/": "\\div",
+  "<": "<",
+  "<=": "\\le",
+  ">": ">",
+  ">=": "\\ge",
+  "==": "=",
+  "!=": "\\ne",
+  그리고: "\\;\\text{그리고}\\;",
+  또는: "\\;\\text{또는}\\;",
+};
+const PREC: Record<string, number> = {
+  또는: 1,
+  그리고: 2,
+  "<": 3,
+  "<=": 3,
+  ">": 3,
+  ">=": 3,
+  "==": 3,
+  "!=": 3,
+  "+": 4,
+  "-": 4,
+  "*": 5,
+  "/": 5,
+};
+const prec = (n: Node): number => (n[0] === "bin" ? PREC[n[1]] : n[0] === "neg" ? 6 : 9);
+
+/** TeX 글 안전 — \text{} 안 */
+const txt = (s: string): string => `\\text{${s.replace(/[\\{}$&#^_%~]/g, (c) => `\\${c}`)}}`;
+const word = (s: string): string =>
+  /^[A-Za-z]$/.test(s) ? s : /^[A-Za-z]+$/.test(s) ? `\\mathit{${s}}` : txt(s);
+
+/** 기호 글(`Q_작업^표`) → TeX(첨자) */
+export function symTex(id: string): string {
+  const [s, lo, up] = splitId(id);
+  return `${word(s)}${lo ? `_{${word(lo)}}` : ""}${up ? `^{${word(up)}}` : ""}`;
+}
+
+/** 값 → TeX(천 자리 쉼표) */
+export const valTex = (v: unknown): string => {
+  const t = eqText(v);
+  return isNum(v) ? t.replace(/,/g, "{,}") : txt(t);
+};
+
+/** 칸 값 — `번지.복사1.노무비` 처럼 겹친 칸까지 */
+const look = (n: Node, vals: Values): unknown => {
+  if (n[0] === "var") return vals[n[1]];
+  if (n[0] !== "field") return undefined;
+  const v = look(n[1], vals);
+  return v && typeof v === "object" ? (v as Values)[n[2]] : undefined;
+};
+
+const paren = (t: string): string => `\\left(${t}\\right)`;
+const miss = (t: string): string => `\\htmlClass{lstk-miss}{${t}}`;
+
+export function tex(n: Node, c: TexCtx): string {
+  const go = (x: Node): string => tex(x, c);
+  switch (n[0]) {
+    case "num":
+      return valTex(n[1]);
+    case "str":
+      return txt(`'${n[1]}'`);
+    case "var": {
+      const id = c.alias?.[n[1]] ?? n[1];
+      if (c.side === "sym") return symTex(id);
+      let v = c.vals[n[1]];
+      if (v && typeof v === "object" && c.cost) v = (v as Values)[c.cost];
+      return v === null || v === undefined || typeof v === "object" ? miss(symTex(id)) : valTex(v);
+    }
+    case "field": {
+      const [, of, key] = n;
+      if (c.side === "val") {
+        const got = look(n, c.vals);
+        if (isNum(got)) return valTex(got);
+      }
+      if (of[0] === "field" && of[1][0] === "var" && of[1][1] === "번지" && c.place?.[of[2]])
+        return txt(`${c.place[of[2]]} ${key}`);
+      return `${n[1][0] === "var" ? symTex(n[1][1]) : go(n[1])}.${txt(n[2])}`;
+    }
+    case "neg":
+      return `-${n[1][0] === "bin" ? paren(go(n[1])) : go(n[1])}`;
+    case "pct":
+      return `${prec(n[1]) < 9 ? paren(go(n[1])) : go(n[1])}\\,\\%`;
+    case "call": {
+      const [, name, items] = n;
+      if (name === "만약") {
+        const pick = takenOf(n, c.vals);
+        if (pick) return go(items[pick]);
+      }
+      if (HIDE.has(name) && items.length >= 1 && items.length <= 2) return go(items[0]);
+      const fn = name === "최소" ? "\\min" : name === "최대" ? "\\max" : txt(name);
+      return `${fn}${paren(items.map(go).join(",\\,"))}`;
+    }
+    case "bin": {
+      const [, o, a, b] = n;
+      const na = leafNum(a, c.vals);
+      const nb = leafNum(b, c.vals);
+      if ((o === "+" || o === "-") && nb === 0) return go(a);
+      if ((o === "*" || o === "/") && nb === 1) return go(a);
+      if ((o === "+" && na === 0) || (o === "*" && na === 1)) return go(b);
+      if (o === "/" && !c.inline) return `\\dfrac{${go(a)}}{${go(b)}}`;
+      const mine = PREC[o];
+      const left = prec(a) < mine || (mine === 3 && prec(a) === 3) ? paren(go(a)) : go(a);
+      const right = prec(b) <= mine ? paren(go(b)) : go(b);
+      return `${left} ${OPS[o] ?? txt(o)} ${right}`;
+    }
+  }
+}
+
+/** TeX → 조판 요소(못 그리면 글 그대로) */
+export function katexNode(t: string): HTMLElement {
+  const box = document.createElement("span");
+  box.className = "lstk-tex";
+  katex.render(t, box, {
+    throwOnError: false,
+    strict: "ignore",
+    trust: (x) => x.command === "\\htmlClass",
+    output: "html",
+  });
+  return box;
+}

A00_Common/line_stack_text.ts

@@ -0,0 +1,78 @@
+/* =============================================================================
+ * line_stack_text.ts
+ * 줄 쌓기 화면 글(PLAN 804-2) — [국문, 영문] · 수식 탭과 같은 글은 `formula_doc_text.ts`
+ * ========================================================================== */
+
+import { currentLanguageIndex } from "@ui/ui_template_locale";
+
+const TEXT = {
+  Tab: ["줄 쌓기", "Line stack"],
+  Basis: ["산 출 근 거", "Basis"],
+  Total: ["합 계", "Total"],
+  Sum: ["계", "Sum"],
+  Sub_Sum: ["소 계", "Subtotal"],
+  Add_Item: ["+ 그룹", "+ Group"],
+  Add_Line: ["줄 더함", "Add line"],
+  Add_율: ["율 — 그룹 소계의 %", "Rate — % of subtotal"],
+  Add_식: ["식 — 공식 틀", "Formula"],
+  Del_Item: ["그룹 지움", "Delete group"],
+  Del: ["지움", "Delete"],
+  Item: ["그룹", "Group"],
+  K_줄: ["줄", "Line"],
+  Drag: ["끌어 옮기기", "Drag to move"],
+  Fold_Item: ["그룹 접기", "Collapse group"],
+  Unfold_Item: ["그룹 펼치기", "Expand group"],
+  Unfold_Sub: ["시간당 경비 · 산출 펼치기", "Show breakdown"],
+  Fold_Sub: ["접기", "Hide breakdown"],
+  Dropped: ["지움 — 눌러 되돌리기", "deleted — click to undo"],
+  Undo_Late: ["그 뒤 고친 것이 있어 못 되돌림", "Changed since — cannot undo"],
+  Title: ["그룹 이름", "Group title"],
+  K_인력: ["인력", "Labor"],
+  K_재료: ["재료", "Material"],
+  K_기계: ["기계", "Machine"],
+  K_단가산출: ["단가산출", "Unit price"],
+  K_복사: ["단가산출 · 일위대가 복사", "Copy unit price · combo"],
+  Self_Take: ["지금 단가산출 자신은 못 가져옴", "Cannot copy itself"],
+  Take_Failed: ["복사 못 함", "Copy failed"],
+  K_율: ["율", "Rate"],
+  K_공식: ["공식", "Formula"],
+  K_표값: ["표 값", "Table values"],
+  K_글: ["근거 글", "Basis note"],
+  Name: ["이름", "Name"],
+  Unit: ["단위", "Unit"],
+  Cost: ["비목", "Cost"],
+  Qty: ["수량", "Qty"],
+  Price: ["단가", "Price"],
+  Machine: ["기계", "Machine"],
+  Find: ["찾기", "Find"],
+  Pick: ["고름 ▾", "Pick ▾"],
+  None_Found: ["찾은 것 없음", "Nothing found"],
+  Unfold: ["식으로 풀기", "Unfold"],
+  Edit_Hint: ["눌러 고침", "Click to edit"],
+  Add_Row: ["식 줄 더함", "Add row"],
+  New_Formula: ["새 공식", "New formula"],
+  My_Formula: ["내 공식", "My formula"],
+  My_Tpl: ["내 틀", "My template"],
+  Changed_From: ["에서 변경", "changed"],
+  Row_Name: ["이름", "Name"],
+  Row_Expr: ["값 또는 식", "Value or expr"],
+  Bad_Name: ["못 쓰는 이름 · 같은 이름 있음", "Bad or duplicate name"],
+  Empty_Item: ["줄 없음 — [+]", "No lines — [+]"],
+  Empty: ["빈 단가산출 — [+ 그룹] 으로 시작", "Empty — start with [+ Group]"],
+  Text_Ph: ["< 품셈 근거 > · ※ 메모 · 별산", "Note"],
+  Unsaved_New: ["저장한 단가산출만 — 페이지 [저장] 뒤", "Saved unit prices only"],
+  Find_Title: ["찾아 넣기", "Find and add"],
+  Repick: ["찾아 바꾸기", "Find and change"],
+  Close: ["닫기", "Close"],
+  Tbl: ["표", "Table"],
+  Tbl_Missing: ["표를 못 읽음", "Table not found"],
+  Tbl_Hint: ["값 칸을 누르면 그 값이 들어감", "Click a value cell to use it"],
+  Tbl_Bound: [
+    "이 값의 줄은 위 옵션이 고름(다른 줄은 옵션에서 바꿈 · 여기선 칸만)",
+    "Row follows the option above (change it there; pick a column here)",
+  ],
+} as const;
+
+export type LsKey = keyof typeof TEXT;
+
+export const lt = (key: LsKey): string => TEXT[key][currentLanguageIndex === 1 ? 1 : 0];

A00_Common/m_settings_nav.ts

@@ -1,7 +1,8 @@
 /* =============================================================================
  * m_settings_nav.ts
- * 시스템 설정 바로가기(334 · 요구 225-2) — 대시보드 「시스템 설정」 카드 · M01 · M02 ☰ 가 같이 쓰는
- * 역할 규칙 한 벌(`settingLinks`) · ☰ 진행 단계 자리에 🏠 대시보드 + 카드(`mountSettingsDrawer`).
+ * 시스템 설정 바로가기(334 · 요구 225-2 · 716-2) — 대시보드 설계 기본값 줄(`settingLinks` · 칸마다 한 줄 ·
+ * `?open=`) / M01 · M02 ☰ 메뉴(`pageLinks` · 페이지 둘 · `mountSettingsDrawer`) /
+ * 진행 판 없는 쪽 ☰ 기본 목록(`defaultSettingsBar` · 772-1).
  * ========================================================================== */
 
 import { ROUTES, type RoutePath } from "@config/config_frontend";
@@ -16,52 +17,65 @@ interface SettingUser {
   company_id?: number | null;
 }
 
-/** key = M01 은 「m01」 · 계산 자리 창은 「calcSites」(대시보드 카드만 · 504-2) · M02 는 진입 인자 `open` */
+/** key = 페이지 열쇠(☰ · 「m01」 「m02」) 또는 칸 열쇠(대시보드 줄 · 계산 자리 「calcSites」 = 창 504-2) ·
+ * group = 대시보드 설계 기본값 묶음 제목 */
 export interface SettingLink {
   key: string;
   title: string;
   desc: string;
   route: RoutePath;
   query?: Record<string, string>;
+  group?: string;
 }
 
 function L(key: keyof typeof ui_locales): string {
   return ui_locales[key][currentLanguageIndex];
 }
 
-const ICONS: Record<string, string> = { m01: "🗄️", 구조물조합: "🧱", 옵션: "🎛️", 도면: "📑" };
+const ICONS: Record<string, string> = { m01: "🗄️", m02: "🧱" };
 
-/** 시스템 설정 — 역할로 카드 숨김 · M02 카드는 `?open=&root=` 로 진입(27-1d) */
+/** 설계 기본값 줄(대시보드) — 칸마다 한 줄 · 역할로 숨김 · M01 줄 `?open=`(칸 고름) · M02 줄 `?open=&root=`(27-1d).
+ * 칸을 더할 때는 아래 표에 한 줄(m01 / m02 호출)만 더함. */
 export function settingLinks(user: SettingUser, companyId: number | string | null): SettingLink[] {
   // 시스템 관리자는 고른 회사를 해시에 실음(29-1)
   const company: Record<string, string> =
     user.role === "SYSTEM_ADMIN" && companyId ? { company: String(companyId) } : {};
+  const m01 = (key: string, title: string, desc: string, open?: string): SettingLink => ({
+    key,
+    title,
+    desc,
+    route: ROUTES.M01_MASTER_DATA,
+    query: open ? { open } : undefined,
+    group: "마스터 데이터",
+  });
   const m02 = (title: string, open: string, root: string, desc: string): SettingLink => ({
     key: open,
     title,
     desc,
     route: ROUTES.M02_MASTER_TEMPLATE,
     query: { open, root, ...company },
+    group: "마스터 템플릿",
   });
   // 구조물 조합 기본 층 = 개인(123-1 · 누구든) · 개인 층 없음(회사 없음) = 아래 역할 규칙
   const comboRoot = (fallback: string): string => (user.company_id ? "personal" : fallback);
   if (user.role === "SYSTEM_ADMIN") {
     const desc = L("B01_Dashboard_PermMasterWrite");
+    const read = L("B01_Dashboard_PermSourceRead");
     return [
-      {
-        key: "m01",
-        title: L("B01_Dashboard_MasterElements"),
-        desc: L("B01_Dashboard_PermSourceRead"),
-        route: ROUTES.M01_MASTER_DATA,
-      },
+      m01("m01", L("M01_Title"), read),
+      m01("로직", L("B01_Dashboard_CardLogic"), read, "로직"),
+      m01("옵션", L("B01_Dashboard_CardStructOptionDef"), desc, "옵션"),
+      m01("별칭", L("B01_Dashboard_CardAliasLedger"), desc, "별칭"),
+      m02(L("B01_Dashboard_CardSangeun"), "단가산출", comboRoot("master"), desc),
+      m02(L("B01_Dashboard_CardPrecombo"), "일위대가조합", comboRoot("master"), desc),
       m02(L("B01_Dashboard_CardStructCombo"), "구조물조합", comboRoot("master"), desc),
-      m02(L("B01_Dashboard_CardStructOption"), "옵션", "master", desc),
       m02(L("B01_Dashboard_CardDrawing"), "도면", "master", desc),
       {
         key: "calcSites",
         title: L("B01_CalcSites_Title"),
         desc: L("B01_CalcSites_Desc"),
         route: ROUTES.B01_ACCOUNT,
+        group: "계산",
       },
     ];
   }
@@ -76,15 +90,47 @@ export function settingLinks(user: SettingUser, companyId: number | string | nul
   return [m02(L("B01_Dashboard_CardStructCombo"), "구조물조합", comboRoot(root), desc)];
 }
 
-/** ☰ 진행 단계 자리 — 🏠 대시보드 + 카드 · 지금 칸 강조 · 같은 길(M02 → M02)은 머리 가드가 안 물어 여기서 먼저 */
+/** ☰ 메뉴 — 페이지 둘만(M01 = 시스템 관리자 · M02 = 누구나) · 열쇠 「m01」 「m02」 */
+export function pageLinks(user: SettingUser, companyId: number | string | null): SettingLink[] {
+  const combo = settingLinks(user, companyId).find((link) => link.key === "구조물조합");
+  const links: SettingLink[] = [];
+  if (user.role === "SYSTEM_ADMIN")
+    links.push({
+      key: "m01",
+      title: L("B01_Dashboard_MasterElements"),
+      desc: "",
+      route: ROUTES.M01_MASTER_DATA,
+    });
+  if (combo)
+    links.push({ ...combo, key: "m02", title: L("M02_Title"), desc: "", group: undefined });
+  return links;
+}
+
+/** ☰ 진행 단계 자리 — 🏠 대시보드 + 페이지 둘 · 지금 페이지 강조(`activeKey` = 「m01」 「m02」) ·
+ * 같은 길(M02 → M02)은 머리 가드가 안 물어 여기서 먼저 */
 export function mountSettingsDrawer(
   user: SettingUser,
   activeKey: string,
   companyId: number | string | null,
 ): void {
-  // 계산 자리 = 대시보드 창(504-2) — 페이지가 아니라 ☰ 에 안 둠
-  const links = settingLinks(user, companyId).filter((link) => link.key !== "calcSites");
-  const bar = createStepBar(
+  setDrawerSteps(settingsBar(user, activeKey, companyId));
+}
+
+/** ☰ 기본 목록(772-1) — 진행 판 · 바로가기를 안 세운 로그인 뒤 쪽(B02 · D01 · E01 등) = 🏠 대시보드 + 권한별 페이지 둘 ·
+ * 로그인 전 = 없음 */
+export async function defaultSettingsBar(): Promise<HTMLElement | null> {
+  const { fetchSessionUser } = await import("../A06_Login/A06_Login_Api_Fetch");
+  const user = await fetchSessionUser().catch(() => null);
+  return user ? settingsBar(user, "", null) : null;
+}
+
+function settingsBar(
+  user: SettingUser,
+  activeKey: string,
+  companyId: number | string | null,
+): HTMLElement {
+  const links = pageLinks(user, companyId);
+  return createStepBar(
     links.map((link) => link.title),
     links.findIndex((link) => link.key === activeKey),
     {
@@ -95,7 +141,6 @@ export function mountSettingsDrawer(
       onStepClick: (index) => void go(links[index]),
     },
   );
-  setDrawerSteps(bar);
 }
 
 async function go(link: SettingLink): Promise<void> {

A00_Common/map/logic/map_guide_route.ts

@@ -0,0 +1,434 @@
+/* =============================================================================
+ * map_guide_route.ts(logic)
+ * 예정노선 가이드 추천선 셈(PLAN 636-1 · 요구 546) — 기준지점을 차례로 거치는 참고용 선.
+ *   화면 가이드 전용 · 파이썬 짝 없음 · 저장 안 함(설계 값 아님 · 선례 `D03_PlanAnalysis_Fan.ts:8`).
+ *   2 m 격자 A*: 걸음 = 반지름 걸음/칸 ± 0.5 격자점(20 m = 56 방향) · |Δz| > 상한 × 걸음 길이 막음 ·
+ *   비용 = 길이 × (1 + 급경사 × 급경사 표본 비율 + 기울기 × (g/상한)²) + 꺾임 × 걸음 × (꺾임각/π)² ·
+ *   어림 = 직선 거리 × 가중(가중 A*) · 구간마다 상자 = 두 점 + 여유(못 닿으면 두 배 한 번) · 펼침 상한.
+ *   첫 걸음 = 정확한 시작점에서 · 끝 걸음도 기울기 검사 · 꼭짓점 그대로(20 m 다시 나누기 금지).
+ *   1 m 격자 = 2 칸 솎아 2 m · 급경사 = 격자 높이에서 바로 셈 · 못 닿음 = 가장 가까이 간 데까지.
+ *   근거 = `docs/raw/요구_1101/_분석_546-C_추천노선_라이다.md` C1 · DOM · fetch · three 없음.
+ * ========================================================================== */
+
+import {
+  heightAt as gridHeightAt,
+  type DtmGrid,
+} from "../../../common_util/common_util_surface_sampler";
+
+export type Point2 = [number, number];
+export type Point3 = [number, number, number];
+
+/** 높이 원천 — heightAt(NaN = 밖 · 빈칸) · 원천 격자 칸(m) · 격자 원점(칸 꼭짓점 맞춤). */
+export interface GuideTerrain {
+  heightAt: (x: number, y: number) => number;
+  /** 원천 격자 칸 m(기본 2) — 2 m 보다 잘면 솎아 2 m 안팎으로. */
+  cell?: number;
+  origin?: Point2;
+}
+
+export interface GuideWeights {
+  /** 급경사 표본 비율 벌점(기본 3) */
+  steep: number;
+  /** (g/상한)² 벌점(기본 0.3) */
+  grade: number;
+  /** 꺾임 벌점(기본 1) */
+  turn: number;
+  /** 어림 가중(기본 3 · 1 = 정확 A*) */
+  heuristic: number;
+}
+
+export interface GuideOptions {
+  /** 걸음 m(기본 20 · 그리기 「길이·기울기 고정」 칸) */
+  step?: number;
+  /** 기울기 상한 비율(기본 0.14) */
+  maxGrade?: number;
+  /** 급경사 문턱 %(기본 70 = 35° · 급경사 겹 둘째 경계) */
+  steepPct?: number;
+  weights?: Partial<GuideWeights>;
+  /** 구간마다 펼침 상한(기본 30 만 ≈ 0.4 s · 못 닿음 ≤ 0.5 s) */
+  maxExpand?: number;
+  /** 구간마다 시간 상한 ms(기본 450 · 못 닿음 ≤ 0.5 s · 느린 기계 막음) */
+  maxMs?: number;
+}
+
+export interface GuideSegment {
+  /** 꼭짓점 [x, y, z] — 닿음이면 끝 = 다음 지점 · 아니면 가장 가까이 간 데까지 */
+  vertices: Point3[];
+  reached: boolean;
+  /** 평면 길이 m */
+  length: number;
+  /** 걸음 가운데 가장 큰 |기울기| 비율 */
+  maxGrade: number;
+  /** 급경사(문턱 이상) 지나는 길이 비율 0~1 */
+  steepRatio: number;
+  expanded: number;
+}
+
+export interface GuideResult {
+  segments: GuideSegment[];
+  ms: number;
+}
+
+export const GUIDE_DEFAULTS = {
+  step: 20,
+  maxGrade: 0.14,
+  steepPct: 70,
+  weights: { steep: 3, grade: 0.3, turn: 1, heuristic: 3 } as GuideWeights,
+  maxExpand: 300_000,
+  maxMs: 450,
+};
+
+const MARGIN_MIN = 200;
+const MARGIN_MAX = 800;
+const STEEP_SAMPLES = [0.25, 0.5, 0.75, 1];
+
+/** 서버 지형 격자(`parseDtmGrid`) → 가이드 높이 원천(원천 칸 · 원점 그대로). */
+export function guideTerrainFromGrid(grid: DtmGrid): GuideTerrain {
+  const n = grid.x.length;
+  const cell = n > 1 ? (grid.x[n - 1] - grid.x[0]) / (n - 1) : 2;
+  return {
+    heightAt: (x, y) => gridHeightAt(grid, x, y),
+    cell,
+    origin: [grid.x[0], grid.y[0]],
+  };
+}
+
+/** 지점 차례로 잇는 가이드 선 — 지점 사이 구간마다 A*. */
+export function guideRoute(
+  points: Point2[],
+  terrain: GuideTerrain,
+  options: GuideOptions = {},
+): GuideResult {
+  const started = performance.now();
+  const segments: GuideSegment[] = [];
+  for (let index = 0; index + 1 < points.length; index++) {
+    segments.push(guideSegment(points[index], points[index + 1], terrain, options));
+  }
+  return { segments, ms: performance.now() - started };
+}
+
+/** 두 점 사이 가이드 선 하나. */
+export function guideSegment(
+  start: Point2,
+  goal: Point2,
+  terrain: GuideTerrain,
+  options: GuideOptions = {},
+): GuideSegment {
+  const step = options.step ?? GUIDE_DEFAULTS.step;
+  const gmax = options.maxGrade ?? GUIDE_DEFAULTS.maxGrade;
+  const weights = { ...GUIDE_DEFAULTS.weights, ...options.weights };
+  const steepGrade = (options.steepPct ?? GUIDE_DEFAULTS.steepPct) / 100;
+  const source = terrain.cell ?? 2;
+  const cell = source * Math.max(1, Math.round(2 / source));
+  const origin = terrain.origin ?? [0, 0];
+  const za = terrain.heightAt(start[0], start[1]);
+  const zb = terrain.heightAt(goal[0], goal[1]);
+  if (!Number.isFinite(za) || !Number.isFinite(zb)) {
+    return measure([[start[0], start[1], za]], false, 0, null);
+  }
+  const span = Math.hypot(goal[0] - start[0], goal[1] - start[1]);
+  const margin = Math.min(MARGIN_MAX, Math.max(MARGIN_MIN, span / 2));
+  const limit = options.maxExpand ?? GUIDE_DEFAULTS.maxExpand;
+  let spent = 0; // 두 상자 합친 펼침 수
+  let late = false;
+  const deadline = performance.now() + (options.maxMs ?? GUIDE_DEFAULTS.maxMs);
+  let edge = false; // 상자 끝에 닿음 = 넓히면 길이 있을 수 있음
+  let found = search(margin);
+  if (!found.reached && edge && spent < limit && !late) found = search(margin * 2);
+  found.expanded = spent;
+  return found;
+
+  function search(pad: number): GuideSegment {
+    const i0 = Math.floor((Math.min(start[0], goal[0]) - pad - origin[0]) / cell);
+    const j0 = Math.floor((Math.min(start[1], goal[1]) - pad - origin[1]) / cell);
+    const w = Math.ceil((Math.max(start[0], goal[0]) + pad - origin[0]) / cell) - i0 + 1;
+    const h = Math.ceil((Math.max(start[1], goal[1]) + pad - origin[1]) / cell) - j0 + 1;
+    const n = w * h;
+    const START = n;
+    const GOAL = n + 1;
+    const zs = new Float32Array(n).fill(Infinity); // Infinity = 아직 안 읽음 · NaN = 밖
+    const steepState = new Uint8Array(n); // 0 모름 · 1 급경사 · 2 아님
+    const g = new Float64Array(n + 2).fill(Infinity);
+    const parent = new Int32Array(n + 2).fill(-1);
+    const dir = new Float32Array(n + 2).fill(NaN);
+    const closed = new Uint8Array(n + 2);
+    const heap = new MinHeap();
+    const nx = (id: number) => origin[0] + (i0 + (id % w)) * cell;
+    const ny = (id: number) => origin[1] + (j0 + Math.floor(id / w)) * cell;
+    const zAt = (id: number): number => {
+      let value = zs[id];
+      if (value === Infinity) {
+        value = terrain.heightAt(nx(id), ny(id));
+        zs[id] = Number.isFinite(value) ? value : NaN;
+      }
+      return value;
+    };
+    const steepSq = (2 * cell * steepGrade) ** 2;
+    const steepAt = (id: number): boolean => {
+      if (steepState[id] === 0) {
+        const i = id % w;
+        const j = (id - i) / w;
+        if (i < 1 || j < 1 || i >= w - 1 || j >= h - 1) steepState[id] = 2;
+        else {
+          const gx = zAt(id + 1) - zAt(id - 1);
+          const gy = zAt(id + w) - zAt(id - w);
+          steepState[id] = gx * gx + gy * gy >= steepSq ? 1 : 2; // NaN = 아님
+        }
+      }
+      return steepState[id] === 1;
+    };
+    const radius = step / cell;
+    // 걸음 표 — 격자 차 · 길이 · 방위 · 급경사 표본 차(1/4 · 1/2 · 3/4 · 끝)
+    const offI: number[] = [];
+    const offJ: number[] = [];
+    const offLen: number[] = [];
+    const offDir: number[] = [];
+    const sampleD: number[] = []; // 칸 번호 차
+    const reach = Math.ceil(radius + 0.5);
+    for (let dj = -reach; dj <= reach; dj++) {
+      for (let di = -reach; di <= reach; di++) {
+        if (Math.abs(Math.hypot(di, dj) - radius) > 0.5) continue;
+        offI.push(di);
+        offJ.push(dj);
+        offLen.push(Math.hypot(di, dj) * cell);
+        offDir.push(Math.atan2(dj, di));
+        for (const t of STEEP_SAMPLES) {
+          sampleD.push(Math.round(dj * t) * w + Math.round(di * t));
+        }
+      }
+    }
+    const steepShare = weights.steep / STEEP_SAMPLES.length;
+    const turnWeight = (weights.turn * step) / (Math.PI * Math.PI);
+    // 걸음 비용 — 막히면 Infinity
+    const cost = (
+      ax: number,
+      ay: number,
+      az: number,
+      bx: number,
+      by: number,
+      bz: number,
+      inDir: number,
+    ): number => {
+      const len = Math.hypot(bx - ax, by - ay);
+      const dz = Math.abs(bz - az);
+      if (!(dz <= gmax * len)) return Infinity;
+      let hits = 0;
+      for (const t of STEEP_SAMPLES) {
+        const si = Math.round((ax + (bx - ax) * t - origin[0]) / cell) - i0;
+        const sj = Math.round((ay + (by - ay) * t - origin[1]) / cell) - j0;
+        if (si >= 0 && sj >= 0 && si < w && sj < h && steepAt(sj * w + si)) hits++;
+      }
+      const grade = len > 0 ? dz / len / gmax : 0;
+      let value = len * (1 + steepShare * hits + weights.grade * grade * grade);
+      if (Number.isFinite(inDir) && len > 0) {
+        let turn = Math.abs(Math.atan2(by - ay, bx - ax) - inDir);
+        if (turn > Math.PI) turn = 2 * Math.PI - turn;
+        value += turnWeight * turn * turn;
+      }
+      return value;
+    };
+    const relax = (
+      from: number,
+      to: number,
+      c: number,
+      ax: number,
+      ay: number,
+      bx: number,
+      by: number,
+    ) => {
+      if (!Number.isFinite(c) || g[from] + c >= g[to]) return;
+      g[to] = g[from] + c;
+      parent[to] = from;
+      dir[to] = Math.atan2(by - ay, bx - ax);
+      heap.push(g[to] + weights.heuristic * Math.hypot(goal[0] - bx, goal[1] - by), to);
+    };
+    // 끝 걸음 — 한 걸음 안이면 정확한 끝점으로(기울기 검사)
+    const tryGoal = (from: number, ax: number, ay: number, az: number) => {
+      if (Math.hypot(goal[0] - ax, goal[1] - ay) <= step + 0.5 * cell) {
+        relax(
+          from,
+          GOAL,
+          cost(ax, ay, az, goal[0], goal[1], zb, dir[from]),
+          ax,
+          ay,
+          goal[0],
+          goal[1],
+        );
+      }
+    };
+    g[START] = 0;
+    tryGoal(START, start[0], start[1], za);
+    // 첫 걸음 — 정확한 시작점에서 반지름 걸음 고리
+    const ci = Math.round((start[0] - origin[0]) / cell) - i0;
+    const cj = Math.round((start[1] - origin[1]) / cell) - j0;
+    for (let j = cj - reach - 1; j <= cj + reach + 1; j++) {
+      for (let i = ci - reach - 1; i <= ci + reach + 1; i++) {
+        if (i < 0 || j < 0 || i >= w || j >= h) continue;
+        const id = j * w + i;
+        const bx = nx(id);
+        const by = ny(id);
+        if (Math.abs(Math.hypot(bx - start[0], by - start[1]) - step) > 0.5 * cell) continue;
+        const bz = zAt(id);
+        if (Number.isNaN(bz)) continue;
+        relax(START, id, cost(start[0], start[1], za, bx, by, bz, NaN), start[0], start[1], bx, by);
+      }
+    }
+    let best = START;
+    let bestDist = span;
+    while (heap.size > 0 && spent < limit && !late) {
+      const u = heap.pop();
+      if (closed[u]) continue;
+      closed[u] = 1;
+      if (u === GOAL) return finish(GOAL, true);
+      spent++;
+      if ((spent & 1023) === 0 && performance.now() > deadline) late = true;
+      const ui = u % w;
+      const uj = Math.floor(u / w);
+      const ux = nx(u);
+      const uy = ny(u);
+      const uz = zs[u];
+      const left = Math.hypot(goal[0] - ux, goal[1] - uy);
+      if (left < bestDist) {
+        bestDist = left;
+        best = u;
+      }
+      tryGoal(u, ux, uy, uz);
+      const gu = g[u];
+      const du = dir[u];
+      for (let k = 0; k < offI.length; k++) {
+        const vi = ui + offI[k];
+        const vj = uj + offJ[k];
+        if (vi < 0 || vj < 0 || vi >= w || vj >= h) {
+          edge = true;
+          continue;
+        }
+        const v = vj * w + vi;
+        if (closed[v]) continue;
+        let vz = zs[v];
+        if (vz === Infinity) vz = zAt(v);
+        if (vz !== vz) continue; // NaN = 밖
+        const len = offLen[k];
+        const dz = Math.abs(vz - uz);
+        if (dz > gmax * len) continue;
+        let hits = 0;
+        for (let s = 4 * k; s < 4 * k + 4; s++) {
+          const at = u + sampleD[s];
+          const state = steepState[at];
+          if (state === 1 || (state === 0 && steepAt(at))) hits++;
+        }
+        const grade = dz / len / gmax;
+        let c = len * (1 + steepShare * hits + weights.grade * grade * grade);
+        if (du === du) {
+          let turn = Math.abs(offDir[k] - du);
+          if (turn > Math.PI) turn = 2 * Math.PI - turn;
+          c += turnWeight * turn * turn;
+        }
+        const next = gu + c;
+        if (next >= g[v]) continue;
+        g[v] = next;
+        parent[v] = u;
+        dir[v] = offDir[k];
+        const ex = goal[0] - (ux + offI[k] * cell);
+        const ey = goal[1] - (uy + offJ[k] * cell);
+        heap.push(next + weights.heuristic * Math.sqrt(ex * ex + ey * ey), v);
+      }
+    }
+    return finish(best, false);
+
+    function finish(last: number, reached: boolean): GuideSegment {
+      const chain: Point3[] = [];
+      for (let id = last; id !== -1; id = parent[id]) {
+        if (id === START) chain.push([start[0], start[1], za]);
+        else if (id === GOAL) chain.push([goal[0], goal[1], zb]);
+        else chain.push([nx(id), ny(id), zs[id]]);
+      }
+      chain.reverse();
+      return measure(chain, reached, 0, (x, y) => {
+        const si = Math.round((x - origin[0]) / cell) - i0;
+        const sj = Math.round((y - origin[1]) / cell) - j0;
+        return si >= 0 && sj >= 0 && si < w && sj < h && steepAt(sj * w + si);
+      });
+    }
+  }
+
+  // 길이 · 최대 기울기 · 급경사 지남 비율(걸음마다 칸 간격 표본)
+  function measure(
+    vertices: Point3[],
+    reached: boolean,
+    expanded: number,
+    steepAt: ((x: number, y: number) => boolean) | null,
+  ): GuideSegment {
+    let length = 0;
+    let maxGrade = 0;
+    let steepLength = 0;
+    for (let k = 1; k < vertices.length; k++) {
+      const [ax, ay, az] = vertices[k - 1];
+      const [bx, by, bz] = vertices[k];
+      const len = Math.hypot(bx - ax, by - ay);
+      if (len <= 0) continue;
+      length += len;
+      maxGrade = Math.max(maxGrade, Math.abs(bz - az) / len);
+      if (!steepAt) continue;
+      const parts = Math.max(1, Math.ceil(len / cell));
+      for (let p = 0; p < parts; p++) {
+        const t = (p + 0.5) / parts;
+        if (steepAt(ax + (bx - ax) * t, ay + (by - ay) * t)) steepLength += len / parts;
+      }
+    }
+    return {
+      vertices,
+      reached,
+      length,
+      maxGrade,
+      steepRatio: length > 0 ? steepLength / length : 0,
+      expanded,
+    };
+  }
+}
+
+/** 이진 힙(값 작은 것 먼저) — 타입 배열 · 늘어남. */
+class MinHeap {
+  private keys = new Float64Array(1024);
+  private ids = new Int32Array(1024);
+  size = 0;
+
+  push(key: number, id: number): void {
+    if (this.size === this.keys.length) {
+      const keys = new Float64Array(this.size * 2);
+      keys.set(this.keys);
+      const ids = new Int32Array(this.size * 2);
+      ids.set(this.ids);
+      this.keys = keys;
+      this.ids = ids;
+    }
+    let at = this.size++;
+    while (at > 0) {
+      const up = (at - 1) >> 1;
+      if (this.keys[up] <= key) break;
+      this.keys[at] = this.keys[up];
+      this.ids[at] = this.ids[up];
+      at = up;
+    }
+    this.keys[at] = key;
+    this.ids[at] = id;
+  }
+
+  pop(): number {
+    const top = this.ids[0];
+    const key = this.keys[--this.size];
+    const id = this.ids[this.size];
+    let at = 0;
+    for (;;) {
+      let child = 2 * at + 1;
+      if (child >= this.size) break;
+      if (child + 1 < this.size && this.keys[child + 1] < this.keys[child]) child++;
+      if (this.keys[child] >= key) break;
+      this.keys[at] = this.keys[child];
+      this.ids[at] = this.ids[child];
+      at = child;
+    }
+    this.keys[at] = key;
+    this.ids[at] = id;
+    return top;
+  }
+}

A00_Common/map/logic/map_slope_bands.ts

@@ -0,0 +1,170 @@
+/* =============================================================================
+ * map_slope_bands.ts(logic)
+ * 공용 지도 급경사 범위(624-3 공용으로 옮김)(PLAN 603 · 요구 466 · 467 · 468) — 기울기 % 범위 · 색 · 비율 셈(화면 · 서버 없이).
+ *   서버 값 그림 칸 = 기울기 % 내림(0~250 · 250 = 250 % 이상 · `D03_PlanAnalysis_Layers.slope_values_png`) ·
+ *   칸 v 는 가운데(v + 0.5)가 [아래, 위) 안이면 그 범위(위 = 250 이면 250 % 이상도) · 앞 범위 먼저.
+ *   기본 = 지식DB 15 · 35 · 40° 의 % — `임도망_편성.md:20` · `타당성평가.md:59` · `노선_배치.md:29`.
+ *   수평 바(631) = 경계 한 줄 ↔ 범위 · 칸 나눔 · 합침 · 경계 검사.
+ *   부르는 곳 = `map_slope_bands.ts` · `map_legend.ts` · D03 `UI_LayerLegend`.
+ * ========================================================================== */
+
+export interface SlopeBand {
+  /** 아래 % (포함) */
+  low: number;
+  /** 위 % (뺌 · 250 = 끝까지) */
+  high: number;
+  /** 그림 색 이름(`--draw-map-*`) — `SLOPE_COLORS` 중 하나 */
+  color: string;
+}
+
+export const SLOPE_MAX_PCT = 250;
+export const SLOPE_EMPTY = 255;
+export const SLOPE_MAX_BANDS = 8;
+
+/** 고를 색(이름 · 그림 색 값). */
+export const SLOPE_COLORS: Array<{ name: string; color: string }> = [
+  { name: "노랑", color: "--draw-map-landslide-3" },
+  { name: "주황", color: "--draw-map-landslide-2" },
+  { name: "빨강", color: "--draw-map-landslide-1" },
+  { name: "연두", color: "--draw-map-landslide-4" },
+  { name: "초록", color: "--draw-map-landslide-5" },
+  { name: "하늘", color: "--draw-map-stream" },
+  { name: "파랑", color: "--draw-map-zone-water" },
+  { name: "보라", color: "--draw-map-zone-heritage" },
+  { name: "분홍", color: "--draw-map-parcel" },
+];
+
+export const DEFAULT_SLOPE_BANDS: SlopeBand[] = [
+  { low: 26.8, high: 70.0, color: "--draw-map-landslide-3" },
+  { low: 70.0, high: 83.9, color: "--draw-map-landslide-2" },
+  { low: 83.9, high: SLOPE_MAX_PCT, color: "--draw-map-landslide-1" },
+];
+
+export const pctToDeg = (pct: number): number => (Math.atan(pct / 100) * 180) / Math.PI;
+
+/** 범위 고칠 거리 — 없으면 null(빈 값 · 0~250 밖 · 아래 ≥ 위 · 겹침 · 없음 · 너무 많음). */
+export function checkBands(bands: SlopeBand[]): string | null {
+  if (!bands.length) return "범위가 하나는 있어야 합니다";
+  if (bands.length > SLOPE_MAX_BANDS) return `범위는 ${SLOPE_MAX_BANDS}개까지입니다`;
+  for (const [i, band] of bands.entries()) {
+    const at = `${i + 1}번째 범위`;
+    if (!Number.isFinite(band.low) || !Number.isFinite(band.high)) return `${at} — 값이 비었습니다`;
+    if (band.low < 0 || band.high > SLOPE_MAX_PCT) return `${at} — 0~${SLOPE_MAX_PCT} % 안으로`;
+    if (band.low >= band.high) return `${at} — 아래가 위보다 작아야 합니다`;
+    if (!SLOPE_COLORS.some((c) => c.color === band.color)) return `${at} — 색을 고르세요`;
+  }
+  const sorted = [...bands].sort((a, b) => a.low - b.low);
+  for (let i = 1; i < sorted.length; i++)
+    if (sorted[i].low < sorted[i - 1].high)
+      return `범위가 겹칩니다 — ${sorted[i - 1].low}~${sorted[i - 1].high} % 와 ${sorted[i].low}~${sorted[i].high} %`;
+  return null;
+}
+
+/** 저장 글 → 범위(깨졌거나 맞지 않으면 기본). */
+export function parseBands(raw: string | null): SlopeBand[] {
+  try {
+    const got = JSON.parse(raw ?? "null") as unknown;
+    if (Array.isArray(got)) {
+      const bands = got.map((b: Partial<SlopeBand>) => ({
+        low: Number(b?.low),
+        high: Number(b?.high),
+        color: String(b?.color),
+      }));
+      if (!checkBands(bands)) return bands;
+    }
+  } catch {
+    // 깨진 값 = 기본
+  }
+  return DEFAULT_SLOPE_BANDS.map((b) => ({ ...b }));
+}
+
+/** 칸 값 v(0~255) → 범위 차례(없으면 −1). */
+export function bandOf(v: number, bands: SlopeBand[]): number {
+  if (v > SLOPE_MAX_PCT) return -1;
+  const mid = v + 0.5;
+  return bands.findIndex(
+    (b) => b.low <= mid && (mid < b.high || (b.high >= SLOPE_MAX_PCT && v === SLOPE_MAX_PCT)),
+  );
+}
+
+/** 1 % 칸 수 → 범위별 비율(유효 칸 대비). */
+export function bandRatios(counts: number[], bands: SlopeBand[]): number[] {
+  const total = counts.reduce((sum, n) => sum + n, 0) || 1;
+  const out = bands.map(() => 0);
+  counts.forEach((n, v) => {
+    const i = bandOf(v, bands);
+    if (i >= 0) out[i] += n;
+  });
+  return out.map((n) => n / total);
+}
+
+/** 수평 바 꼴(631 · 요구 537) — 경계 = [0, …, 250] 한 줄 · 칸 i = [경계 i, 경계 i+1) · 색 빈 글 = 칠 안 함. */
+export interface SlopeBar {
+  edges: number[];
+  colors: string[];
+}
+
+/** 범위 → 바(사이 빈 곳 = 칠 안 함 칸). */
+export function bandsToBar(bands: SlopeBand[]): SlopeBar {
+  const edges = [0];
+  const colors: string[] = [];
+  for (const band of [...bands].sort((a, b) => a.low - b.low)) {
+    if (band.low > edges.at(-1)!) {
+      edges.push(band.low);
+      colors.push("");
+    }
+    edges.push(band.high);
+    colors.push(band.color);
+  }
+  if (edges.at(-1)! < SLOPE_MAX_PCT) {
+    edges.push(SLOPE_MAX_PCT);
+    colors.push("");
+  }
+  return { edges, colors };
+}
+
+/** 바 → 범위(칠 안 함 칸은 뺌). */
+export const barToBands = (bar: SlopeBar): SlopeBand[] =>
+  bar.colors.flatMap((color, i) =>
+    color ? [{ low: bar.edges[i], high: bar.edges[i + 1], color }] : [],
+  );
+
+/** 경계 고칠 거리 — 없으면 null(빈 값 · 0 < 값 < 250 밖 · 같은 값 · 거꾸로). */
+export function checkEdges(edges: number[]): string | null {
+  for (let i = 1; i < edges.length - 1; i++) {
+    const at = `${i}번째 경계`;
+    if (!Number.isFinite(edges[i])) return `${at} — 값이 비었습니다`;
+    if (edges[i] <= 0 || edges[i] >= SLOPE_MAX_PCT)
+      return `${at} — 0 보다 크고 ${SLOPE_MAX_PCT} % 보다 작게`;
+    if (edges[i] === edges[i - 1]) return `${at} — 옆 경계와 같은 값입니다`;
+    if (edges[i] < edges[i - 1]) return `${at} — 왼쪽 경계보다 커야 합니다`;
+  }
+  return null;
+}
+
+const colored = (bar: SlopeBar): number => bar.colors.filter(Boolean).length;
+
+/** 칸 i 를 반으로(위 반 = 새 색) — 못 나누면 null(색 칸 SLOPE_MAX_BANDS · 너무 좁음 · 경계 틀림). */
+export function splitBar(bar: SlopeBar, i: number): SlopeBar | null {
+  if (colored(bar) >= SLOPE_MAX_BANDS || checkEdges(bar.edges)) return null;
+  const [low, high] = [bar.edges[i], bar.edges[i + 1]];
+  const mid = Math.round((low + high) * 5) / 10;
+  if (!(mid > low && mid < high)) return null;
+  const color =
+    SLOPE_COLORS.find((c) => !bar.colors.includes(c.color))?.color ??
+    SLOPE_COLORS[colored(bar) % SLOPE_COLORS.length].color;
+  return {
+    edges: [...bar.edges.slice(0, i + 1), mid, ...bar.edges.slice(i + 1)],
+    colors: [...bar.colors.slice(0, i + 1), color, ...bar.colors.slice(i + 1)],
+  };
+}
+
+/** 칸 i 를 이웃과 합침(왼쪽 · 첫 칸은 오른쪽 · 이웃 색 남음) — 칸 하나면 null. */
+export function mergeBar(bar: SlopeBar, i: number): SlopeBar | null {
+  if (bar.colors.length <= 1) return null;
+  const cut = i > 0 ? i : 1;
+  return {
+    edges: bar.edges.filter((_, k) => k !== cut),
+    colors: bar.colors.filter((_, k) => k !== i),
+  };
+}

A00_Common/map/map_draw_kind.css

@@ -0,0 +1,28 @@
+/* 공용 긋기 방식 칸(626-3 · `map_draw_kind.ts`) — 고름 아래 길이 · 기울기 두 열 */
+.map-draw-kind {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.map-draw-kind__fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--spacing-8);
+  align-items: start;
+}
+
+.map-draw-kind__fields[hidden] {
+  display: none;
+}
+
+.map-draw-kind__fields .ui-field {
+  margin: 0;
+  min-width: 0;
+}
+
+.map-draw-kind__fields .ui-input-unit,
+.map-draw-kind__fields .ui-input {
+  width: 100%;
+  min-width: 0;
+}

A00_Common/map/map_draw_kind.ts

@@ -0,0 +1,161 @@
+/* =============================================================================
+ * map_draw_kind.ts
+ * 공용 긋기 방식 칸(PLAN 626-3 · 599-1 · 625-1) — 예정노선(D03) 그리기 칸 · 노드 판 · B05 평면 예정노선 그리기가 같이 씀.
+ *   꼴 = 마디 고름 2 × 2(자유지정 · 길이·기울기 고정 / 길이 고정 · 기울기 고정) + 길이 · 기울기 두 열(기울기 아래 ≈ °) ·
+ *     방식에 안 쓰는 칸은 숨김(막힘 = 권한 없음만) · 설명 글 없음(요구 463-6).
+ *   쓰는 법 = `createDrawKindFields({ value, onChange })` → { root, get, set, setDisabled, setActive }.
+ *   켬끔 꼴(589-9) = `onActive` 를 주면 고른 방식을 다시 누르면 풀림 · 방식을 고르면 켜짐 — 켬 = 긋기 시작 · 끔 = 긋기 끝
+ *     (지금 켬인지는 `setActive` 로 맞춤 · 노드 판처럼 `onActive` 없는 곳은 늘 하나 고름).
+ * ========================================================================== */
+
+import type { UiSize } from "@ui/ui_template_button";
+import { createInputField } from "@ui/ui_template_input";
+import { createSegment } from "@ui/ui_template_segment";
+import { createText } from "@ui/ui_template_text";
+import "./map_draw_kind.css";
+
+/** 기울기 % → 각(°) 한 자리 글. */
+const slopeDegText1 = (pct: number): string => ((Math.atan(pct / 100) * 180) / Math.PI).toFixed(1);
+
+/** 제약 칸 처음 값 — 길이 = 측점 간격(지식DB 설계제원_총괄) · 기울기 = 간선 20 km/h 일반지형 상한(종단선형). */
+export const DRAW_DEFAULT_LENGTH_M = 20;
+export const DRAW_DEFAULT_SLOPE_PCT = 9;
+
+export type DrawConstraint = "free" | "length" | "slope" | "both";
+
+export interface DrawKindValue {
+  kind: DrawConstraint;
+  lengthM: number;
+  slopePct: number;
+}
+
+export const DRAW_KIND_LABELS: Record<DrawConstraint, string> = {
+  free: "자유지정",
+  both: "길이·기울기 고정",
+  length: "길이 고정",
+  slope: "기울기 고정",
+};
+
+export interface DrawKindFields {
+  root: HTMLElement;
+  get: () => DrawKindValue;
+  /** 값을 바꿈(onChange 는 안 부름). */
+  set: (value: Partial<DrawKindValue>) => void;
+  setDisabled: (disabled: boolean) => void;
+  /** 켬끔 꼴에서 지금 켬인지 맞춤(onActive 는 안 부름 · 끔 = 모두 풀린 모양). */
+  setActive: (on: boolean) => void;
+}
+
+/** 긋기 방식 칸 — 고름 · 길이 · 기울기가 바뀔 때마다 `onChange(지금 값)`(빈 · 틀린 수는 칸 오류만). */
+export function createDrawKindFields(opts: {
+  value: DrawKindValue;
+  onChange: (value: DrawKindValue) => void;
+  /** 켬끔 꼴 — 방식 고름 = true · 고른 방식 다시 누름 = false. */
+  onActive?: (on: boolean) => void;
+  size?: UiSize;
+}): DrawKindFields {
+  const size = opts.size ?? 24;
+  let value = { ...opts.value };
+  let disabled = false;
+  let active = !opts.onActive;
+  const changed = (): void => opts.onChange({ ...value });
+  const segment = createSegment({
+    options: (Object.keys(DRAW_KIND_LABELS) as DrawConstraint[]).map((kind) => ({
+      value: kind,
+      label: DRAW_KIND_LABELS[kind],
+    })),
+    value: active ? value.kind : "",
+    size,
+    columns: 2,
+    clearable: !!opts.onActive,
+    ariaLabel: "긋기 방식",
+    onChange: (next) => {
+      if (next === "") return void ((active = false), opts.onActive?.(false));
+      value.kind = next as DrawConstraint;
+      fieldsState();
+      changed();
+      if (opts.onActive && !active) ((active = true), opts.onActive(true));
+    },
+  });
+  segment.root.dataset.role = "draw-constraint";
+  const lengthField = createInputField({
+    label: "길이",
+    type: "number",
+    value: String(value.lengthM),
+    min: 1,
+    unit: "m",
+    size,
+    onInput: (text) => {
+      const next = Number(text);
+      lengthField.setError(next > 0 ? undefined : "0 보다 큰 수");
+      if (!(next > 0)) return;
+      value.lengthM = next;
+      changed();
+    },
+  });
+  lengthField.input.dataset.role = "draw-length";
+  const slopeField = createInputField({
+    label: "기울기",
+    type: "number",
+    value: String(value.slopePct),
+    unit: "%",
+    size,
+    onInput: (text) => {
+      const next = Number(text);
+      const ok = text.trim() !== "" && Number.isFinite(next);
+      slopeField.setError(ok ? undefined : "숫자");
+      if (!ok) return;
+      value.slopePct = next;
+      degText();
+      changed();
+    },
+  });
+  slopeField.input.dataset.role = "draw-slope";
+  const slopeDegText = createText("", "muted");
+  slopeDegText.dataset.role = "draw-slope-deg";
+  const degText = (): void => {
+    slopeDegText.textContent = `≈ ${slopeDegText1(Math.abs(value.slopePct))}°`;
+  };
+  const slopeColumn = document.createElement("div");
+  slopeColumn.append(slopeField.root, slopeDegText);
+  const fields = document.createElement("div");
+  fields.className = "map-draw-kind__fields";
+  fields.append(lengthField.root, slopeColumn);
+  const root = document.createElement("div");
+  root.className = "map-draw-kind";
+  root.append(segment.root, fields);
+
+  function fieldsState(): void {
+    for (const button of segment.root.querySelectorAll("button")) button.disabled = disabled;
+    lengthField.input.disabled = slopeField.input.disabled = disabled;
+    fields.hidden = value.kind === "free";
+    lengthField.root.hidden = value.kind === "slope";
+    slopeColumn.hidden = value.kind === "length";
+  }
+  degText();
+  fieldsState();
+
+  return {
+    root,
+    get: () => ({ ...value }),
+    set(next) {
+      value = { ...value, ...next };
+      segment.set(active ? value.kind : "");
+      lengthField.input.value = String(value.lengthM);
+      slopeField.input.value = String(value.slopePct);
+      lengthField.setError(undefined);
+      slopeField.setError(undefined);
+      degText();
+      fieldsState();
+    },
+    setDisabled(next) {
+      disabled = next;
+      fieldsState();
+    },
+    setActive(on) {
+      if (!opts.onActive) return;
+      active = on;
+      segment.set(active ? value.kind : "");
+    },
+  };
+}

A00_Common/map/map_forest_layers.ts

@@ -0,0 +1,235 @@
+/* =============================================================================
+ * map_forest_layers.ts
+ * 공용 지도 — 받은 산림 · 환경 자료 겹(PLAN 622-2 · 624-2 · 요구 529 · 530) — 서버 줌별 조각(622-1)을 GL 고정 소스로(위성 · 등고선 615 꼴).
+ *   벡터 = 임도망도(forest_road · 전국 국가임도 · 간선 · 작업 · 산불 색 · 줌 따라 굵기 · 줌 14 부터 연도 · 종류 글) · 산림입지도(forest_soil · 토양 무리 색 ·
+ *     반투명 · z10 아래 숨김) · 경제림(eco_forest · 국유 · 사유 테두리) /
+ *   그림 = 생태자연도(ecology) · 산사태위험지도(landslide · 옛 캔버스는 받은 범위 한 장 그대로) · 암상 지질도(geology_map · 760-1 · 도형 = `map_geology`).
+ *   조각만 쓰는 겹(`TILE_ONLY`) = 받기 없음 · 옛 캔버스(그래픽 카드 끔)엔 안 보임.
+ *   토양 무리 색(`soilColor`) = 조각(`code` = SLTP_CD 두 자리) · 브이월드 요약(기호 「B₁」) 같은 색 — 범례 · 옛 캔버스도 이것.
+ *   부르는 곳 = `map_layer_specs`(꼴) · D03 `UI_MapGl`(소스) · `UI_Layers`(받기 거름) · `map_legend`(범례).
+ * ========================================================================== */
+
+import type { ExpressionSpecification, SourceSpecification } from "maplibre-gl";
+import type { LegendItem } from "@ui/ui_template_flow_legend";
+import { GL_FONT, tileSource, type GlSpec } from "@ui/ui_template_gl_map";
+import { themeColor } from "@ui/ui_template_palette";
+import type { MapLayerKey } from "./map_layer_list";
+
+/** 조각만 쓰는 겹 — 받을 자료 없음(위성 포함). */
+const TILE_ONLY = ["satellite", "nationalRoad", "ecoForest", "ecology"] as const;
+export type TileOnlyKey = (typeof TILE_ONLY)[number];
+export const tileOnly = (key: MapLayerKey): key is TileOnlyKey =>
+  (TILE_ONLY as readonly string[]).includes(key);
+
+/** 받는 동안 서클에 세는 조각 소스(등고선 포함). */
+export const TRACKED_SOURCES = [
+  "contour",
+  "forest_road",
+  "forest_soil",
+  "eco_forest",
+  "ecology",
+  "landslide",
+  "geology_map",
+];
+
+/** 고정 소스 — 벡터 z8~15(서버 줌별 단순화) · 그림 z6~19. */
+export function forestSources(projectId: string): Record<string, SourceSpecification> {
+  const vt = (name: string) => tileSource(projectId, `vt/${name}`, "pbf", 8, 15);
+  const wmt = (name: string) => tileSource(projectId, `wmt/${name}`, "png", 6, 19);
+  return {
+    forest_road: vt("forest_road"),
+    forest_soil: vt("forest_soil"),
+    eco_forest: vt("eco_forest"),
+    ecology: wmt("ecology"),
+    landslide: wmt("landslide"),
+    geology_map: wmt("geology"),
+  };
+}
+
+/** 토양형 코드(산림입지토양도 SLTP_CD) → 기호. 무리 = 갈색 · 적황색 · 암적색 · 회갈색 · 화산회 · 침식 · 미숙 · 그 밖(비산림). */
+const SOIL_SYMBOLS: Record<string, string> = {
+  "01": "B1", "02": "B2", "03": "B3", "04": "B4",
+  "05": "rB1", "06": "rB2", "07": "R1", "08": "R2", "09": "Y",
+  "10": "DR1", "11": "DR2", "12": "DR3", "13": "DRb1", "14": "DRb2",
+  "15": "GrB1", "16": "GrB2", "17": "Va1", "18": "Va2", "19": "Va3", "20": "Va4",
+  "21": "Va-R1", "22": "Va-R2", "23": "Va-gr",
+  "24": "Er1", "25": "Er2", "26": "Er-c", "27": "Im", "28": "Li", "29": "Bs",
+}; // prettier-ignore
+/** 무리 첫 코드(차례 = `--draw-map-soil-1..6`). */
+const SOIL_GROUP_START = [1, 5, 10, 15, 24, 30];
+const soilToken = (group: number): string => `--draw-map-soil-${group + 1}`;
+const SUB = /[₀-₉]/g;
+
+/** 토양형(조각 두 자리 코드 · 브이월드 기호 「B₁」) → 무리 색 값 · 모름 = 「그 밖」. */
+export function soilColor(code: string): string {
+  const plain = code.trim().replace(SUB, (c) => String(c.charCodeAt(0) - 0x2080));
+  const found = /^\d+$/.test(plain)
+    ? Number(plain)
+    : Number(Object.keys(SOIL_SYMBOLS).find((key) => SOIL_SYMBOLS[key] === plain) ?? 99);
+  return soilToken(Math.max(SOIL_GROUP_START.filter((start) => found >= start).length - 1, 0));
+}
+
+/** 임도 사업 구분(`kind` 1 간선 · 2 작업 · 3 산불) 색 값. */
+const ROAD_KINDS = [
+  { kind: 1, label: "간선", color: "--draw-map-national-road-main" },
+  { kind: 2, label: "작업", color: "--draw-map-national-road-work" },
+  { kind: 3, label: "산불", color: "--draw-map-national-road-fire" },
+];
+const ECO_KINDS = [
+  { own: "국유", color: "--draw-map-eco-national" },
+  { own: "사유", color: "--draw-map-eco-private" },
+];
+/** 생태자연도 범례 = 환경부 WMS 그림 색(3등급 = 칠 없음). */
+const ECOLOGY_LEGEND = [
+  { label: "1등급", color: "--draw-map-ecology-1" },
+  { label: "2등급", color: "--draw-map-ecology-2" },
+  { label: "별도관리지역", color: "--draw-map-ecology-x" },
+];
+
+const HALO = "rgba(0, 0, 0, 0.55)";
+const ROUND = { "line-join": "round", "line-cap": "round" } as const;
+const zoomWidth = (z8: number, z12: number, z15: number): ExpressionSpecification =>
+  ["interpolate", ["linear"], ["zoom"], 8, z8, 12, z12, 15, z15] as ExpressionSpecification;
+
+type Spec = GlSpec<MapLayerKey>;
+const raster = (
+  key: "landslide" | "ecology" | "geology",
+  opacity: number,
+  source: string = key,
+): Spec =>
+  ({
+    key,
+    id: source === key ? key : source,
+    type: "raster",
+    source,
+    paint: { "raster-opacity": opacity, "raster-fade-duration": 0 },
+  }) as Spec;
+
+/** 그림 겹(암상 지질도 · 산사태위험 · 생태자연도) — 아래 차례(급경사 위). */
+export const forestRasterSpecs = (): Spec[] => [
+  raster("geology", 0.5, "geology_map"),
+  raster("landslide", 0.6),
+  raster("ecology", 0.55),
+];
+
+/** 면 겹(산림입지도 · 경제림) — 보호구역 아래. */
+export function forestAreaSpecs(): Spec[] {
+  const soilAt = (group: number): string => themeColor(soilToken(group), "#e879f9");
+  const soil = [
+    "step",
+    ["to-number", ["get", "code"], 99],
+    soilAt(0),
+    ...SOIL_GROUP_START.slice(1).flatMap((start, i) => [start, soilAt(i + 1)]),
+  ] as ExpressionSpecification;
+  const eco = [
+    "match",
+    ["get", "own"],
+    ...ECO_KINDS.flatMap(({ own, color }) => [own, themeColor(color, "#34d399")]),
+    themeColor(ECO_KINDS[1].color, "#a78bfa"),
+  ] as unknown as ExpressionSpecification;
+  const vector = (source: string) => ({ source, "source-layer": source });
+  return [
+    {
+      key: "soils",
+      id: "soils",
+      type: "fill",
+      ...vector("forest_soil"),
+      minzoom: 10,
+      paint: { "fill-color": soil, "fill-opacity": 0.35 },
+    } as Spec,
+    {
+      key: "soils",
+      id: "soils-edge",
+      type: "line",
+      ...vector("forest_soil"),
+      minzoom: 10,
+      layout: ROUND,
+      paint: { "line-color": soil, "line-width": 0.8, "line-opacity": 0.9 },
+    } as Spec,
+    {
+      key: "ecoForest",
+      id: "ecoForest",
+      type: "line",
+      ...vector("eco_forest"),
+      layout: ROUND,
+      paint: { "line-color": eco, "line-width": zoomWidth(1, 1.8, 2.4) },
+    } as Spec,
+  ];
+}
+
+/** 임도망도(전국 국가임도) 선 — 검은 테 + 사업 구분 색(도로 위 · 임도(업로드) 아래). */
+export function forestRoadSpecs(): Spec[] {
+  const color = [
+    "match",
+    ["get", "kind"],
+    ...ROAD_KINDS.flatMap(({ kind, color }) => [kind, themeColor(color, "#ff6b00")]),
+    themeColor(ROAD_KINDS[0].color, "#ff6b00"),
+  ] as unknown as ExpressionSpecification;
+  const line = (id: string, paint: Record<string, unknown>): Spec =>
+    ({
+      key: "nationalRoad",
+      id,
+      type: "line",
+      source: "forest_road",
+      "source-layer": "forest_road",
+      layout: ROUND,
+      paint,
+    }) as Spec;
+  return [
+    line("nationalRoad-halo", { "line-color": HALO, "line-width": zoomWidth(2.2, 3.6, 5.6) }),
+    line("nationalRoad", { "line-color": color, "line-width": zoomWidth(1, 2, 3.6) }),
+  ];
+}
+
+/** 임도망도 글(요구 534) — 줌 14 부터 선 따라 「개설 연도 · 종류」(연도 0 = 종류만) · 겹치면 뺌 · 꼴 = 지명 글. */
+export function forestRoadLabelSpec(): Spec {
+  const kind = [
+    "match",
+    ["get", "kind"],
+    ...ROAD_KINDS.flatMap(({ kind, label }) => [kind, label]),
+    "",
+  ] as unknown as ExpressionSpecification;
+  return {
+    key: "nationalRoad",
+    id: "nationalRoad-label",
+    type: "symbol",
+    source: "forest_road",
+    "source-layer": "forest_road",
+    minzoom: 14,
+    layout: {
+      "symbol-placement": "line",
+      "symbol-spacing": 300,
+      "text-field": [
+        "concat",
+        ["case", [">", ["get", "year"], 0], ["concat", ["to-string", ["get", "year"]], " · "], ""],
+        kind,
+      ],
+      "text-font": [GL_FONT],
+      "text-size": 11,
+      "text-max-angle": 30,
+      "text-padding": 2,
+    },
+    paint: {
+      "text-color": themeColor("--draw-map-place", "#f8fafc"),
+      "text-halo-color": "rgba(0, 0, 0, 0.7)",
+      "text-halo-width": 1.5,
+    },
+  } as unknown as Spec;
+}
+
+/** 범례 — 켠 조각 겹(산사태위험 = 범례 자리 `LANDSLIDE_LEGEND` 따로). */
+export function forestLegendRows(on: Record<MapLayerKey, boolean>): LegendItem[][] {
+  const item = (label: string, color: string, kind?: LegendItem["kind"]): LegendItem => ({
+    label,
+    color: `var(${color})`,
+    ...(kind ? { kind } : {}),
+  });
+  const rows: LegendItem[][] = [];
+  if (on.nationalRoad)
+    rows.push(ROAD_KINDS.map(({ label, color }) => item(`임도망도 ${label}`, color, "line")));
+  if (on.ecoForest)
+    rows.push(ECO_KINDS.map(({ own, color }) => item(`경제림 ${own}`, color, "line")));
+  if (on.ecology)
+    rows.push(ECOLOGY_LEGEND.map(({ label, color }) => item(`생태자연도 ${label}`, color)));
+  return rows;
+}

A00_Common/map/map_geology.ts

@@ -0,0 +1,161 @@
+/* =============================================================================
+ * map_geology.ts
+ * 공용 지도 암상 지질도 겹(PLAN 760-1 · 요구 597-3 · 598-3) — D03 예정노선 · B05 평면이 같이 씀.
+ *   그림 = KIGAM 5만 WMS 조각(`map_forest_layers` 「geology_map」) · 도형 = 서버 `/plan/layers/geology`
+ *     (기호별 요약 · 경위도 면 · 노선마다 암상 구간 · 키는 서버만).
+ *   색 = 바위 갈래(서버 `ROCK_GROUPS` 차례) → `--draw-map-geology-1..6` · 면 위 글 = 「기호 · 첫 암상 낱말」.
+ *   범례 줄(`geologyRow`) · 노선 구간 표(`geologyTail` · 참고 — 토사 · 암 판정 아님) = 범례 칸.
+ * ========================================================================== */
+
+import type { LegendItem } from "@ui/ui_template_flow_legend";
+import { GL_FONT, type GlSpec } from "@ui/ui_template_gl_map";
+import { themeColor } from "@ui/ui_template_palette";
+import { createTable } from "@ui/ui_template_table";
+import { el } from "@ui/ui_template_elements_base";
+import { stationLabel } from "@util/common_util_station";
+import { request, type GeoJsonCollection } from "./map_layer_api";
+import { hectare } from "./map_layer_data";
+import type { MapLayerKey } from "./map_layer_list";
+
+/** 기호 하나(받은 범위 안). */
+export interface GeologyUnit {
+  symnum: string;
+  symbol: string;
+  litho: string;
+  strata: string;
+  age: string;
+  sheet: string;
+  group: number;
+  count: number;
+  area_m2: number;
+}
+
+/** 노선 구간 — `i` = 요약 차례 · -1 = 자료 없음. */
+export interface GeologySegment {
+  from_m: number;
+  to_m: number;
+  i: number;
+}
+
+export interface PlanGeology extends GeoJsonCollection {
+  source: string;
+  summary: GeologyUnit[];
+  groups: string[];
+  routes: Array<{ name: string; segments: GeologySegment[] }>;
+}
+
+const GROUP_FALLBACK = ["#f472b6", "#fb923c", "#fde047", "#818cf8", "#e5e7eb", "#5eead4"];
+const groupToken = (group: number): string => `--draw-map-geology-${Math.min(group, 5) + 1}`;
+const firstWord = (text: string): string => text.split(/\s+/)[0] ?? "";
+/** 긴 암상 글 줄임(범례 · 표 폭). */
+const short = (text: string, max = 22): string =>
+  text.length > max ? `${text.slice(0, max)}…` : text;
+
+/** 받기 — 면 위 글 꼴을 먼저 읽어 둠(한글 글자). */
+export async function fetchPlanGeology(projectId: string): Promise<PlanGeology> {
+  const got = await request<PlanGeology>(`/projects/${projectId}/plan/layers/geology`);
+  const text = got.summary.map((unit) => unit.symbol + unit.litho).join("") || "가";
+  await document.fonts.load(`600 24px "${GL_FONT}"`, text).catch(() => null);
+  return got;
+}
+
+/** GL 자료 — 지물마다 색(`_color`) · 글(`_label`). */
+export function geologyCollection(info: PlanGeology): GeoJsonCollection {
+  return {
+    features: (info.features ?? []).map((feature) => {
+      const unit = info.summary[Number(feature.properties?.["i"])];
+      const group = unit?.group ?? 5;
+      return {
+        ...feature,
+        properties: {
+          ...feature.properties,
+          _color: themeColor(groupToken(group), GROUP_FALLBACK[group] ?? GROUP_FALLBACK[5]),
+          _label: unit ? `${unit.symbol} · ${firstWord(unit.litho)}` : "",
+        },
+      };
+    }),
+  };
+}
+
+/** GL 꼴 — 연한 채움 · 갈래 색 테두리 · 면 위 글(겹치면 뺌). */
+export function geologySpecs(): GlSpec<MapLayerKey>[] {
+  const color = ["get", "_color"];
+  return [
+    {
+      key: "geology",
+      id: "geology",
+      type: "fill",
+      source: "geology",
+      paint: { "fill-color": color, "fill-opacity": 0.2 },
+    },
+    {
+      key: "geology",
+      id: "geology-edge",
+      type: "line",
+      source: "geology",
+      layout: { "line-join": "round" },
+      paint: { "line-color": color, "line-width": 1.6, "line-opacity": 0.95 },
+    },
+    {
+      key: "geology",
+      id: "geology-label",
+      type: "symbol",
+      source: "geology",
+      layout: {
+        "text-field": ["get", "_label"],
+        "text-font": [GL_FONT],
+        "text-size": 12,
+        "text-padding": 4,
+      },
+      paint: {
+        "text-color": color,
+        "text-halo-color": "rgba(0, 0, 0, 0.75)",
+        "text-halo-width": 1.5,
+      },
+    },
+  ] as unknown as GlSpec<MapLayerKey>[];
+}
+
+const unitColor = (unit: GeologyUnit | undefined): string =>
+  unit ? `var(${groupToken(unit.group)})` : "transparent";
+
+/** 범례 줄 — 기호마다 「기호 대표암상 넓이」(갈래 색) · 없으면 한 줄. */
+export function geologyRow(info: PlanGeology): LegendItem[] {
+  if (!info.summary.length)
+    return [{ label: "암상 지질도 없음(받은 범위 안)", color: "transparent", off: true }];
+  return info.summary.map((unit) => ({
+    label: `${unit.symbol} ${short(unit.litho || unit.strata)} ${hectare(unit.area_m2)}`,
+    color: unitColor(unit),
+  }));
+}
+
+/** 노선 따라 바위 종류 구간 표(노선마다) + 참고 글 — 켬 · 받음 · 노선 있을 때만. */
+export function geologyTail(on: Record<MapLayerKey, boolean>, info?: PlanGeology): HTMLElement[] {
+  if (!on.geology || !info?.routes.length) return [];
+  const columns = [
+    { label: "측점" },
+    { label: "길이", align: "end" as const },
+    { label: "기호" },
+    { label: "대표암상" },
+  ];
+  const tables = info.routes.map((route) => {
+    const rows = route.segments.map((seg) => {
+      const unit = info.summary[seg.i];
+      return [
+        `${stationLabel(seg.from_m, 20)} ~ ${stationLabel(seg.to_m, 20)}`,
+        `${(seg.to_m - seg.from_m).toFixed(0)} m`,
+        unit?.symbol ?? "—",
+        unit ? short(unit.litho || unit.strata, 30) : "자료 없음",
+      ];
+    });
+    return el("div", {
+      className: "ui-legend ui-legend--vertical",
+      children: [`암상 구간 — ${route.name}`, createTable(columns, rows, { density: "data" })],
+    });
+  });
+  const note = el("div", {
+    className: "ui-legend",
+    children: ["참고 — 토사 · 암 판정 아님(1:50,000 바위 종류 · 경계 수십 m 어긋날 수 있음)"],
+  });
+  return [...tables, note];
+}

A00_Common/map/map_layer_api.ts

@@ -0,0 +1,234 @@
+/* =============================================================================
+ * map_layer_api.ts
+ * 공용 지도 겹 받기(PLAN 569 · 581 · 584 · 603 · 605 · 606 · 624-3 · 624-4 · 요구 530) — D03 예정노선 · B05 평면이 같이 씀(D03_Api 에서 옮김).
+ *   서버 길 = `/api/projects/{id}/plan/…`(624-1 · 임도 프로젝트도 · 띠 · 올린 임도망도 = 예정노선만).
+ *   급경사 · 음영 · 0차곡 = 지형 원천 인자 `terrain`(지형 칩 값 · 624-4).
+ *   지적도 · 도엽 겹 GeoJSON 경위도 · 도엽 조각 · 그림 겹(급경사 · 음영기복 · 산사태위험) · 보호구역 · 산림입지도 ·
+ *   선 겹(단층 · 지질구조선) · 0차곡 · 띠 · 올린 임도망도(올리기 · 지움) · 산사태취약지역.
+ *   D03 = `D03_PlanAnalysis_Api` 가 다시 내놓음(부르는 곳 그대로).
+ * ========================================================================== */
+
+import { API_BASE_URL } from "@config/config_frontend";
+import type { TerrainSource } from "./map_terrain_chip";
+
+/** 경위도 GeoJSON 묶음 — B04 `GeoJsonCollection` 과 같은 꼴(공용 폴더는 페이지 파일을 안 부름). */
+export type GeoJsonCollection = {
+  features?: Array<{
+    geometry?: { type: string; coordinates: unknown } | null;
+    properties?: Record<string, unknown> | null;
+  }>;
+};
+
+export async function request<T>(path: string): Promise<T> {
+  const response = await fetch(`${API_BASE_URL}${path}`, {
+    credentials: "include",
+    headers: { "Content-Type": "application/json" },
+  });
+  const body = (await response.json().catch(() => ({}))) as T & { detail?: unknown };
+  if (!response.ok) {
+    const detail = typeof body.detail === "string" ? body.detail : `HTTP ${response.status}`;
+    throw new Error(detail);
+  }
+  return body;
+}
+
+const base = (projectId: string): string => `/projects/${projectId}/plan`;
+
+/** 지도 겹 그림(569-1) — 작업 좌표계 m 상자(칸 가장자리) · data URL(위 = 북). */
+export interface PlanRaster {
+  box_m: [number, number, number, number];
+  /** 경위도 네 귀퉁이(왼쪽 아래 · 오른쪽 아래 · 오른쪽 위 · 왼쪽 위) — GL 바탕(586-1). */
+  box?: Array<[number, number]>;
+  image: string;
+  /** 급경사만(603) — `counts[v]` = 기울기 % 내림 v(0~250) 칸 수 · 그림 = 회색 칸 값(255 = 빈 칸). */
+  counts?: number[];
+  /** 쓴 지형 원천(624-1 · 급경사 · 음영). */
+  source?: string;
+}
+
+/** 지형 원천 인자(624-1) — 안 넘김 = 서버 기본(D = 수치지형도 · B = 설계 지형). */
+const terrainQuery = (terrain?: TerrainSource): string => (terrain ? `&terrain=${terrain}` : "");
+
+export const fetchPlanCadastral = (projectId: string): Promise<GeoJsonCollection> =>
+  request(`${base(projectId)}/layers/cadastral`);
+
+/** 도엽 겹(`도로중심선` 등) — 없으면 서버가 받은 도엽에서 풀어 냄. */
+export const fetchPlanSheetLayer = (projectId: string, key: string): Promise<GeoJsonCollection> =>
+  request(`${base(projectId)}/layers/sheet?key=${encodeURIComponent(key)}`);
+
+/** 보이는 도엽(606-2) — 지도 보기 경위도 상자 → 수 · 번호(가운데부터 · 30 장 넘음 = 빈 목록). */
+export const fetchPlanSheetTiles = (
+  projectId: string,
+  bbox: [number, number, number, number],
+): Promise<{ count: number; sheets: string[] }> =>
+  request(`${base(projectId)}/sheet-tiles?bbox=${bbox.map((v) => v.toFixed(5)).join(",")}`);
+
+/** 도엽 조각 하나(606-1) — 공용 창고 · 없으면 서버가 만듦. */
+export const fetchPlanSheetTile = (
+  projectId: string,
+  sheet: string,
+  name: string,
+): Promise<GeoJsonCollection> =>
+  request(`${base(projectId)}/sheet-tiles/${sheet}/${encodeURIComponent(name)}`);
+
+/** 그림 겹 — 급경사 = PNG 바이트 + 머리 `X-Plan-Raster`(616-4 · `image` = blob 주소 · 다 읽으면
+ *  `slopeValues` 가 놓음) · 그 밖 = JSON(base64 그림). */
+export const fetchPlanRaster = async (
+  projectId: string,
+  kind: "slope" | "hillshade" | "landslide",
+  terrain?: TerrainSource,
+): Promise<PlanRaster> => {
+  const path = `${base(projectId)}/layers/raster?kind=${kind}${terrainQuery(terrain)}`;
+  if (kind !== "slope") return request(path);
+  const response = await fetch(`${API_BASE_URL}${path}`, { credentials: "include" });
+  if (!response.ok) {
+    const body = (await response.json().catch(() => ({}))) as { detail?: unknown };
+    throw new Error(typeof body.detail === "string" ? body.detail : `HTTP ${response.status}`);
+  }
+  const meta = JSON.parse(response.headers.get("X-Plan-Raster") ?? "{}") as PlanRaster;
+  return { ...meta, image: URL.createObjectURL(await response.blob()) };
+};
+
+/** 보호 · 규제 구역(581-1) — 지물 `kind` · `name` · `area_m2` + 종류별 개수 · 넓이(실패 = `failed`). */
+export interface PlanZones extends GeoJsonCollection {
+  summary: Record<string, { label: string; count: number; area_m2: number; failed?: boolean }>;
+}
+
+export const fetchPlanZones = (projectId: string): Promise<PlanZones> =>
+  request(`${base(projectId)}/layers/zones`);
+
+/** 산림입지도(581-2) — 지물 `code` · `name` · `area_m2` + 토양형별 개수 · 넓이(코드 차례). */
+export interface PlanSoils extends GeoJsonCollection {
+  summary: Array<{ code: string; name: string; count: number; area_m2: number }>;
+}
+
+export const fetchPlanSoils = (projectId: string): Promise<PlanSoils> =>
+  request(`${base(projectId)}/layers/soils`);
+
+/** 계류 100 m · 도로 300 m 띠(581-1) — 받은 범위 안 넓이 · 비율. */
+export interface PlanBand {
+  dist_m: number;
+  lines: number;
+  area_m2: number;
+  ratio: number;
+  collection: GeoJsonCollection;
+}
+
+/** 선 겹(584-1) — 받은 범위 안 선 + 가닥 · 길이 m. */
+export interface PlanLines extends GeoJsonCollection {
+  summary: { count: number; length_m: number };
+}
+
+/** 단층 · 지질구조선(브이월드 WFS · 서버 `LINE_KINDS` 열쇠). */
+export const fetchPlanLines = (projectId: string, kind: string): Promise<PlanLines> =>
+  request(`${base(projectId)}/layers/lines?kind=${encodeURIComponent(kind)}`);
+
+/** 0차곡(584-1 · 지형 추정) — 위 집수 넓이 [min_m2, max_m2) 선 + 가닥 · 길이 m. */
+export interface PlanZeroOrder {
+  min_m2: number;
+  max_m2: number;
+  cell_m: number;
+  count: number;
+  length_m: number;
+  collection: GeoJsonCollection;
+  /** 쓴 지형 원천(624-1). */
+  source?: string;
+}
+
+export const fetchPlanZeroOrder = (
+  projectId: string,
+  terrain?: TerrainSource,
+): Promise<PlanZeroOrder> =>
+  request(`${base(projectId)}/layers/zero-order?${terrainQuery(terrain).slice(1)}`);
+
+export const fetchPlanBands = (projectId: string): Promise<{ stream: PlanBand; road: PlanBand }> =>
+  request(`${base(projectId)}/layers/bands`);
+
+/** 올린 묶음 한 줄(605-1) — 올릴 때마다 하나 · 자른 가닥 · 길이 m · 원본 선 수 · 잘린 상자 · 기준점 거리. */
+export interface PlanRoadBundle {
+  id: string;
+  name: string;
+  files: string[];
+  bytes: number | null;
+  uploaded_at: string | null;
+  count: number;
+  length_m: number;
+  total: number;
+  bounds: [number, number, number, number] | null;
+  distance_m: number | null;
+}
+
+/** 올린 임도망도(584-3 · 595-4 · 605-1) — 묶음 모두를 합친 값: 기준점 ±5 km ∪ 받은 지형으로 자른 선
+ *  (선마다 `__bundle` 묶음 번호 · `__line` 묶음 안 차례) + 가닥 · 길이 m · 원본 선 수 · 좌표계 ·
+ *  잘린 상자([서, 남, 동, 북] 경위도) · 기준점 ~ 가장 가까운 임도 m · 마지막 올린 파일 · 묶음 줄. */
+export interface PlanForestRoads {
+  bundles: PlanRoadBundle[];
+  count: number;
+  length_m: number;
+  total: number;
+  crs: string[];
+  bounds: [number, number, number, number] | null;
+  distance_m: number | null;
+  source: { files: string[]; bytes: number; uploaded_at: string } | null;
+  collection: GeoJsonCollection;
+}
+
+/** 올린 적 없으면 오류(404 글 그대로). */
+export const fetchPlanForestRoads = (projectId: string): Promise<PlanForestRoads> =>
+  request(`${base(projectId)}/layers/forest-roads`);
+
+/** 묶음 하나 지움(605-1) — 남은 묶음 합친 값 · 하나도 안 남으면 null. */
+export async function deletePlanForestRoad(
+  projectId: string,
+  bundle: string,
+): Promise<PlanForestRoads | null> {
+  const response = await fetch(
+    `${API_BASE_URL}${base(projectId)}/layers/forest-roads/${encodeURIComponent(bundle)}`,
+    { method: "DELETE", credentials: "include" },
+  );
+  const body = (await response.json().catch(() => ({}))) as PlanForestRoads & {
+    detail?: unknown;
+  };
+  if (!response.ok)
+    throw new Error(typeof body.detail === "string" ? body.detail : `HTTP ${response.status}`);
+  return body.bundles.length ? body : null;
+}
+
+/** 임도망도 SHP 올리기(zip 하나 · shp · shx · dbf · prj 묶음) — 못 읽으면 서버 글 그대로 오류. */
+export async function uploadPlanForestRoads(
+  projectId: string,
+  files: File[],
+): Promise<PlanForestRoads> {
+  const form = new FormData();
+  for (const file of files) form.append("files", file);
+  const response = await fetch(`${API_BASE_URL}${base(projectId)}/layers/forest-roads`, {
+    method: "POST",
+    credentials: "include",
+    body: form,
+  });
+  const body = (await response.json().catch(() => ({}))) as PlanForestRoads & {
+    detail?: unknown;
+  };
+  if (!response.ok)
+    throw new Error(typeof body.detail === "string" ? body.detail : `HTTP ${response.status}`);
+  return body;
+}
+
+/** 산사태취약지역(584-3) — 받은 범위 안 점 · 지번 맞는 필지 테두리 · 시도별 표 · 표 없는 시도. */
+export interface PlanLandslideZones {
+  points: Array<{
+    lon: number;
+    lat: number;
+    kind: string | null;
+    area_m2: number | null;
+    place: string;
+  }>;
+  parcels: GeoJsonCollection;
+  sidos: Array<{ code: string; name: string; rows: number; located: number; basis?: string }>;
+  missing: string[];
+  /** 지적도를 받았나(못 받으면 점만). */
+  cadastral: boolean;
+}
+
+export const fetchPlanLandslideZones = (projectId: string): Promise<PlanLandslideZones> =>
+  request(`${base(projectId)}/layers/landslide-zones`);

A00_Common/map/map_layer_bar.ts

@@ -0,0 +1,133 @@
+/* =============================================================================
+ * map_layer_bar.ts
+ * 공용 지도 겹 줄(PLAN 569-2 · 586-2 · 624-2 · 634-2 · 요구 530 · 546) — 겹 단추 한 줄(공용 지도 도구줄 `createMapTools`):
+ *   단독 단추(표 묶음 없음) | 묶음 단추(여럿 고르기 메뉴 · 하나라도 켜면 눌림 · 골라도 안 닫힘) | 그래픽 카드 단추(GL ↔ 옛 캔버스).
+ *   보일 겹 · 묶음 · 호버제목 · 처음 켬 · 취향 열쇠 = 표(`map_layer_list`) · 누르면 켬끔 뒤집고 취향에 적고 `onToggle`.
+ *   막힘 = 지형을 아직 안 받음(`ready: false`) · 조각만 쓰는 겹은 옛 캔버스에서 · 페이지 까닭(`why`) — 「제목 — 까닭」.
+ *   받기 · 그리기 · 범례는 페이지 몫 — 켬끔 값(`on`)은 같은 객체를 같이 씀.
+ *   쓰는 법 = `createMapLayerBar({ page: "d03", glOn, onToggle, onGl })` → `{ root, bar, on, toggle, save, sync }`.
+ * ========================================================================== */
+
+import { createIconButton } from "@ui/ui_template_button";
+import { createPickMenu, type PickMenu } from "@ui/ui_template_context_menu";
+import { createMapTools, mapToolTip } from "@ui/ui_template_map_tools";
+import { writeByKey } from "../b_page_state";
+import { tileOnly } from "./map_forest_layers";
+import {
+  LAYER_GROUPS,
+  MAP_LAYER_PAGES,
+  pageLayers,
+  readLayerPref,
+  type LayerGroup,
+  type MapLayerKey,
+  type MapPage,
+} from "./map_layer_list";
+
+/** 그래픽 카드 단추 호버(표 밖 · 그룹1 끝 단독). */
+const GL_TITLE = "그래픽 카드";
+
+export interface MapLayerBar {
+  /** 도구줄 감싼 것(자리는 페이지 CSS · 한 행 = `createMapToolRow`). */
+  root: HTMLElement;
+  /** 도구줄 자체(폭 재기). */
+  bar: HTMLElement;
+  /** 켬끔 — 페이지가 바꾸면 `save` · 받기 실패로 끄는 것은 안 적음. */
+  on: Record<MapLayerKey, boolean>;
+  /** 뒤집고 적고 `onToggle`. */
+  toggle: (key: MapLayerKey) => void;
+  save: () => void;
+  /** 단추 · 메뉴 줄의 눌림 · 막힘 · 글을 켬끔 값에 맞춤 · `why` = 페이지 막힘 까닭(겹마다). */
+  sync: (state: {
+    ready: boolean;
+    glOn: boolean;
+    why?: Partial<Record<MapLayerKey, string>>;
+  }) => void;
+}
+
+export function createMapLayerBar(opts: {
+  page: MapPage;
+  glOn: boolean;
+  onToggle: (key: MapLayerKey) => void;
+  /** 그래픽 카드 단추 누름. */
+  onGl: () => void;
+}): MapLayerBar {
+  const { page } = opts;
+  const on = readLayerPref(page);
+  const save = (): void => writeByKey(MAP_LAYER_PAGES[page].pref, JSON.stringify(on));
+  const toggle = (key: MapLayerKey): void => {
+    on[key] = !on[key];
+    save();
+    opts.onToggle(key);
+  };
+  const defs = pageLayers(page);
+  const buttons = new Map<MapLayerKey, HTMLButtonElement>();
+  const menus = new Map<LayerGroup, PickMenu>();
+  const singles: HTMLElement[] = [];
+  for (const def of defs) {
+    if (!def.group) {
+      const button = createIconButton({
+        icon: def.icon,
+        title: def.title,
+        size: 32,
+        pressed: on[def.key],
+        onClick: () => toggle(def.key),
+      });
+      button.dataset.layer = def.key;
+      button.dataset.tip = def.title;
+      buttons.set(def.key, button);
+      singles.push(button);
+      continue;
+    }
+    if (menus.has(def.group)) continue;
+    const group = def.group;
+    const menu = createPickMenu({
+      multi: true,
+      icon: LAYER_GROUPS[group].icon,
+      title: LAYER_GROUPS[group].name,
+      items: defs
+        .filter((one) => one.group === group)
+        .map((one) => ({ value: one.key, label: one.title, icon: one.icon })),
+      onPick: (key) => key && toggle(key as MapLayerKey),
+    });
+    menu.root.dataset.layerGroup = group;
+    menus.set(group, menu);
+  }
+  for (const def of defs)
+    if (def.group) menus.get(def.group)!.setItem(def.key, { checked: on[def.key] });
+  const glButton = createIconButton({
+    icon: "gauge",
+    title: GL_TITLE,
+    size: 32,
+    pressed: opts.glOn,
+    onClick: opts.onGl,
+  });
+  glButton.dataset.layer = "gl";
+  const tools = createMapTools({
+    label: "지도 겹",
+    groups: [singles, [...menus.values()].map((menu) => menu.root), [glButton]],
+  });
+
+  function sync({ ready, glOn, why = {} }: Parameters<MapLayerBar["sync"]>[0]): void {
+    for (const def of defs) {
+      const reason = !ready
+        ? "지형 받기 뒤 보임"
+        : (why[def.key] ??
+          (tileOnly(def.key) && !glOn ? "옛 그림(그래픽 카드 끔)엔 안 보임" : null));
+      const button = buttons.get(def.key);
+      if (button) {
+        button.setAttribute("aria-pressed", String(on[def.key]));
+        button.disabled = !!reason;
+        mapToolTip(button, reason);
+        continue;
+      }
+      menus.get(def.group!)!.setItem(def.key, {
+        checked: on[def.key],
+        disabled: !!reason,
+        title: reason ? `${def.title} — ${reason}` : def.title,
+      });
+    }
+    glButton.setAttribute("aria-pressed", String(glOn));
+  }
+
+  return { root: tools.root, bar: tools.bar, on, toggle, save, sync };
+}

A00_Common/map/map_layer_data.ts

@@ -0,0 +1,76 @@
+/* =============================================================================
+ * map_layer_data.ts
+ * 공용 지도 겹 자료 도움(PLAN 569-2 · 581 · 586-2 · 624-3) — D03 예정노선 · B05 평면이 같이 씀(D03 `UI_LayerDefs` 에서 옮김).
+ *   도로 소로 · 미분류 구분 · 물 면 도엽 이름 · 넓이 글 · 그림 읽기 · GL 자료(지물 색 붙이기 · 그림 귀퉁이 · 음영 그늘 그림).
+ * ========================================================================== */
+
+import type { GlImage } from "@ui/ui_template_gl_map";
+import { themeColor } from "@ui/ui_template_palette";
+import type { GeoJsonCollection, PlanBand, PlanRaster } from "./map_layer_api";
+
+/** 도로 중 소로 · 미분류 구분(옛 임도 짐작 · 겹 걷음 · 페이지 자료 셈만 씀). */
+export const FOREST_ROAD_KINDS = new Set(["소로", "미분류"]);
+/** 물 면 = 도엽 수계(E) 면 셋. */
+export const WATER_KEYS = ["실폭하천", "수계면E003", "수계면E005"];
+
+export const hectare = (m2: number): string => `${(m2 / 10000).toFixed(1)} ha`;
+
+export const loadImage = (src: string): Promise<HTMLImageElement> =>
+  new Promise((done, fail) => {
+    const image = new Image();
+    image.onload = () => done(image);
+    image.onerror = () => fail(new Error("그림을 읽지 못했습니다"));
+    image.src = src;
+  });
+
+/** GL 자료 — 지물마다 그릴 색(`_color`) · 덧 속성을 붙인 사본. */
+export function glTagged(
+  collection: GeoJsonCollection,
+  color: (props: Record<string, unknown>) => string,
+  extra: Record<string, unknown> = {},
+): GeoJsonCollection {
+  return {
+    ...collection,
+    features: (collection.features ?? []).map((feature) => ({
+      ...feature,
+      properties: { ...feature.properties, ...extra, _color: color(feature.properties ?? {}) },
+    })),
+  };
+}
+
+/** 띠 GL 자료(581-1 · 634-2) — 도로 300 m 먼저 · 계류 100 m 위 · `_band` = 겹 가름(계류 = `bands` · 도로 = `roadBands`). */
+export function bandCollection(info: { stream: PlanBand; road: PlanBand }): GeoJsonCollection {
+  const band = (name: "stream" | "road", fallback: string): GeoJsonCollection =>
+    glTagged(info[name].collection, () => themeColor(`--draw-map-band-${name}`, fallback), {
+      _band: name,
+    });
+  return {
+    features: [
+      ...(band("road", "#facc15").features ?? []),
+      ...(band("stream", "#22d3ee").features ?? []),
+    ],
+  };
+}
+
+/** GL 그림 자리 — 서버 경위도 귀퉁이(왼쪽 아래부터 돎) → 왼쪽 위부터 · 없으면 null. */
+export function glImage(raster: PlanRaster, url = raster.image): GlImage | null {
+  const box = raster.box;
+  return box?.length === 4 ? { url, corners: [box[3], box[2], box[1], box[0]] } : null;
+}
+
+/** 음영 그늘 그림 — 위성 위 「곱하기 0.75」와 같은 검은 반투명(밝기 g → 투명도 0.75 · (1 − g)). */
+export function shadeImage(image: HTMLImageElement): string {
+  const canvas = document.createElement("canvas");
+  canvas.width = image.naturalWidth;
+  canvas.height = image.naturalHeight;
+  const context = canvas.getContext("2d")!;
+  context.drawImage(image, 0, 0);
+  const pixels = context.getImageData(0, 0, canvas.width, canvas.height);
+  const px = pixels.data;
+  for (let i = 0; i < px.length; i += 4) {
+    px[i + 3] = Math.round(0.75 * (255 - px[i]) * (px[i + 3] / 255));
+    px[i] = px[i + 1] = px[i + 2] = 0;
+  }
+  context.putImageData(pixels, 0, 0);
+  return canvas.toDataURL("image/png");
+}

A00_Common/map/map_layer_list.ts

@@ -0,0 +1,169 @@
+/* =============================================================================
+ * map_layer_list.ts
+ * 공용 지도 겹 목록(PLAN 624-2 · 요구 530 · 결정 A② · A⑧ · A⑨) — 예정노선(D03) · B05 평면이 같이 씀.
+ *   겹 = 요구 546 그룹1 표 한 줄 — 열쇠 · 아이콘 · 호버제목 · 아이콘 묶음(`LAYER_GROUPS` · 없음 = 단독) · 보일 페이지 · 처음 값(`on` = 예정노선).
+ *   페이지 표(`MAP_LAYER_PAGES`) = 처음 켬(없으면 겹의 `on`) · 켬끔 취향 열쇠.
+ *   선 겹 꼴 · 보호구역 색 · 산사태위험 범례 = GL 꼴(`map_layer_specs`) · 범례(`map_legend`) · 옛 캔버스가 같이 읽음.
+ *   쓰는 법 = 겹 줄 `createMapLayerBar({ page })`(`map_layer_bar`) · 새 겹 = `LAYERS` 한 줄 + 꼴 한 벌.
+ * ========================================================================== */
+
+import type { IconName } from "@ui/ui_template_icons";
+import type { LegendItem } from "@ui/ui_template_flow_legend";
+import { readByKey } from "../b_page_state";
+
+export type MapLayerKey =
+  | "satellite"
+  | "hillshade"
+  | "contour"
+  | "slope"
+  | "stream"
+  | "water"
+  | "road"
+  | "forestRoad" // 걷은 겹(임도 짐작 · 요구 532) — 목록 · 꼴 없음 · 페이지 자료 셈 이음만 남음
+  | "forestRoadFile"
+  | "nationalRoad"
+  | "ecoForest"
+  | "ecology"
+  | "cadastral"
+  | "zones"
+  | "soils"
+  | "landslide"
+  | "landslideZones"
+  | "geology" // 암상 지질도(760-1 · KIGAM 5만 · 그림 조각 + 도형)
+  | "faults"
+  | "lineaments"
+  | "zeroOrder"
+  | "bands" // 계류 100 m 띠(자료 = 띠 둘 한 벌 · `_band` 로 가름)
+  | "roadBands" // 도로 300 m 띠(같은 자료 · 「도로」 묶음)
+  | "building"
+  | "place";
+
+/** 임도(업로드) 고름(605-2) — 묶음 하나 또는 그 안의 선 하나(지도 강조). */
+export interface RoadPick {
+  bundle: string;
+  line?: number;
+}
+
+/** 지도가 있는 페이지. */
+export type MapPage = "d03" | "b05";
+
+/** 아이콘 묶음(요구 546 표 「아이콘 그룹명」) — 묶음 단추 = 아이콘 + ▾ + 켠 수 · 여럿 고르기 메뉴. */
+export type LayerGroup = "water" | "road" | "land" | "limit";
+export const LAYER_GROUPS: Record<LayerGroup, { name: string; icon: IconName }> = {
+  water: { name: "수계망도", icon: "streams" },
+  road: { name: "도로", icon: "signpost" },
+  land: { name: "토지·건물", icon: "parcelHouse" },
+  limit: { name: "제한·재해", icon: "ban" },
+};
+
+export interface LayerDef {
+  key: MapLayerKey;
+  icon: IconName;
+  /** 호버제목(요구 546 표) — 마우스 글 · 메뉴 줄 글. */
+  title: string;
+  /** 아이콘 묶음 — null = 단독 단추. */
+  group: LayerGroup | null;
+  /** 보일 페이지(표 「사용」). */
+  pages: readonly MapPage[];
+  /** 예정노선 처음 값 — 다른 페이지는 `MAP_LAYER_PAGES[page].on`. */
+  on: boolean;
+}
+
+const BOTH: readonly MapPage[] = ["d03", "b05"];
+const row = (
+  key: MapLayerKey,
+  icon: IconName,
+  title: string,
+  group: LayerGroup | null,
+  on = false,
+): LayerDef => ({ key, icon, title, group, pages: BOTH, on });
+
+/** 그룹1 표(요구 546 · 차례 = 단추 차례) — 도로 300 m 띠는 표 밖 한 줄(「도로」 묶음 · 기능 남김). */
+export const LAYERS: readonly LayerDef[] = [
+  row("satellite", "satellite", "위성사진", null, true),
+  row("hillshade", "sun", "음영기복도", null),
+  row("contour", "mountain", "등고선", null, true),
+  row("slope", "angle", "급경사", null),
+  row("stream", "droplet", "세류", "water", true),
+  row("water", "ripple", "하천", "water"),
+  row("zeroOrder", "arrowsJoin", "0차곡", "water"),
+  row("bands", "borderOuter", "계류100m", "water"),
+  row("road", "road", "도로", "road"),
+  row("nationalRoad", "route", "임도망도", "road"),
+  row("forestRoadFile", "map", "임도(업로드)", "road"),
+  row("roadBands", "roadBand", "도로300m", "road"),
+  row("cadastral", "borderAll", "지적도", "land"),
+  row("building", "building", "건물", "land"),
+  row("place", "mapPin", "지명", "land"),
+  row("zones", "shield", "보호규제구역", "limit"),
+  row("soils", "leaf", "산림입지도", "limit"),
+  row("ecoForest", "trees", "국유림·사유림", "limit"),
+  row("ecology", "plant", "생태자연도", "limit"),
+  row("landslide", "alert", "산사태위험지도", "limit"),
+  row("landslideZones", "alertOctagon", "산사태취약지역", "limit"),
+  row("geology", "strata", "암상 지질도", "limit"),
+  row("faults", "bolt", "단층", "limit"),
+  row("lineaments", "lineament", "지질구조선", "limit"),
+];
+
+/** 페이지 표 — 처음 켬(없음 = 겹의 `on`) · 켬끔 취향 열쇠. */
+export const MAP_LAYER_PAGES: Record<MapPage, { on?: readonly MapLayerKey[]; pref: string }> = {
+  d03: { pref: "aislo:pref:d03.layers" },
+  // A② 처음 = 지금 그대로(등고선 · 하천)
+  b05: { on: ["contour", "stream"], pref: "aislo:pref:b05.layers" },
+};
+
+/** 그 페이지에 보일 겹(표 차례). */
+export const pageLayers = (page: MapPage): LayerDef[] =>
+  LAYERS.filter((def) => def.pages.includes(page));
+
+/** 켬끔 취향 — 없거나 깨지면 페이지 처음 값 · 안 보일 겹 = 끔. */
+export function readLayerPref(page: MapPage): Record<MapLayerKey, boolean> {
+  const { on: first, pref } = MAP_LAYER_PAGES[page];
+  const on = Object.fromEntries(
+    LAYERS.map((def) => [def.key, first ? first.includes(def.key) : def.on]),
+  ) as Record<MapLayerKey, boolean>;
+  try {
+    const saved = JSON.parse(readByKey(pref) ?? "{}") as Partial<Record<MapLayerKey, unknown>>;
+    for (const def of LAYERS)
+      if (typeof saved[def.key] === "boolean") on[def.key] = saved[def.key] as boolean;
+  } catch {
+    // 깨진 값 = 처음 값
+  }
+  for (const def of LAYERS) if (!def.pages.includes(page)) on[def.key] = false;
+  return on;
+}
+
+/** 보호구역 종류 → 그림 색 값(서버 `ZONE_KINDS` 열쇠). */
+export const ZONE_COLORS: Record<string, string> = {
+  forest: "--draw-map-zone-forest",
+  baekdu: "--draw-map-zone-baekdu",
+  water: "--draw-map-zone-water",
+  park: "--draw-map-zone-park",
+  heritage: "--draw-map-zone-heritage",
+  wetland: "--draw-map-zone-wetland",
+  wildlife: "--draw-map-zone-wildlife",
+  greenbelt: "--draw-map-zone-greenbelt",
+};
+/** 산사태위험지도 범례(1 등급 = 가장 위험 · 색 = WMS 그림 색). */
+export const LANDSLIDE_LEGEND: LegendItem[] = [1, 2, 3, 4, 5].map((grade) => ({
+  label: `산사태 ${grade}등급`,
+  color: `var(--draw-map-landslide-grade-${grade})`,
+}));
+/** 선 겹 — 이름 · 그림 꼴(서버 `LINE_KINDS` 열쇠 = `kind` · 없으면 0차곡). 새 선 겹 = 여기 한 줄. */
+export type LineLayerKey = "faults" | "lineaments" | "zeroOrder";
+export const LINE_LAYERS: Record<
+  LineLayerKey,
+  { label: string; kind?: string; color: string; width: number; dash: number[] }
+> = {
+  faults: { label: "단층", kind: "faults", color: "--draw-map-fault", width: 2.4, dash: [] },
+  lineaments: {
+    label: "지질구조선",
+    kind: "lineaments",
+    color: "--draw-map-lineament",
+    width: 1.8,
+    dash: [8, 4],
+  },
+  zeroOrder: { label: "0차곡", color: "--draw-map-zero-order", width: 1.8, dash: [4, 3] },
+};
+export const LINE_KEYS = Object.keys(LINE_LAYERS) as LineLayerKey[];

A00_Common/map/map_layer_source.ts

@@ -0,0 +1,31 @@
+/* =============================================================================
+ * map_layer_source.ts
+ * 공용 지도 밖 겹 출처(PLAN 760-1 · 요구 598-4 「받아온 곳의 정보를 표기」) — 켠 겹의 받아온 곳을 범례 맨 아래 한 줄씩.
+ *   받아온 곳 = 서버가 부르는 곳 그대로(브이월드 WFS · 위성 · 산림청 원자료 · 생활안전지도 WMS · 지오빅데이터 …) ·
+ *   자체 셈 겹(음영 · 급경사 · 0차곡 · 띠) · 사용자 올림(임도(업로드)) · 자기 지형(등고선 · 세류)은 안 적음.
+ * ========================================================================== */
+
+import type { LegendItem } from "@ui/ui_template_flow_legend";
+import { LAYERS, type MapLayerKey } from "./map_layer_list";
+
+/** 받아온 곳 → 겹(차례 = 범례 차례). */
+export const LAYER_SOURCES: ReadonlyArray<[string, readonly MapLayerKey[]]> = [
+  ["브이월드", ["satellite", "cadastral", "zones", "faults", "lineaments"]],
+  ["국토지리정보원 수치지형도", ["water", "road", "building", "place"]],
+  ["산림청", ["nationalRoad", "ecoForest", "soils"]],
+  ["시도 산사태취약지역 현황(공공데이터포털)", ["landslideZones"]],
+  ["환경부 생태자연도(공공데이터포털)", ["ecology"]],
+  ["행정안전부 생활안전지도(공공누리 제4유형)", ["landslide"]],
+  ["한국지질자원연구원 수치지질도 1:50,000(CC BY-NC)", ["geology"]],
+];
+
+/** 켠 밖 겹의 출처 줄 — 「출처: 곳 — 겹 · 겹」 · 없으면 빈 것. */
+export function sourceRow(on: Record<MapLayerKey, boolean>): LegendItem[] {
+  const title = (key: MapLayerKey): string => LAYERS.find((def) => def.key === key)?.title ?? key;
+  return LAYER_SOURCES.flatMap(([where, keys]) => {
+    const shown = keys.filter((key) => on[key]);
+    return shown.length
+      ? [{ label: `출처: ${where} — ${shown.map(title).join(" · ")}`, color: "transparent" }]
+      : [];
+  });
+}

A00_Common/map/map_layer_specs.ts

@@ -0,0 +1,317 @@
+/* =============================================================================
+ * map_layer_specs.ts
+ * 공용 지도 GL 겹 꼴(PLAN 586-2 · 624-2 · 요구 530) — 바탕 겹 스물의 MapLibre 꼴 · 차례(아래 → 위):
+ *   위성 · 그림 겹(음영 · 급경사 · 산사태위험 · 생태자연도) · 면 겹(산림입지 · 경제림 · 보호구역 · 띠 · 물 면 · 건물) ·
+ *   선 겹(지적 · 등고선 · 도로 · 임도망도 · 임도(업로드) · 세류 · 단층 · 지질구조선 · 0차곡 · 산사태취약 필지) ·
+ *   점 · 글(산사태취약 · 임도망도 연도 · 종류 · 지명 · 등고 수치).
+ *   자료 = 받는 쪽이 지물에 붙인 `_color` · 고정 소스(위성 · 등고 · 산림 조각) 이름 = `map_forest_layers` · `ui_template_gl_map`.
+ *   카메라 · 지도 세우기는 페이지 몫(D03 `UI_MapGl.createGlBase` · B05 `createTmGl`) — 여기는 꼴만.
+ * ========================================================================== */
+
+import type { ExpressionSpecification, FilterSpecification } from "maplibre-gl";
+import { GL_FONT, type GlSpec as GlMapSpec } from "@ui/ui_template_gl_map";
+import { themeColor } from "@ui/ui_template_palette";
+import {
+  forestAreaSpecs,
+  forestRasterSpecs,
+  forestRoadLabelSpec,
+  forestRoadSpecs,
+} from "./map_forest_layers";
+import { geologySpecs } from "./map_geology";
+import {
+  LINE_KEYS,
+  LINE_LAYERS,
+  type LineLayerKey,
+  type MapLayerKey,
+  type RoadPick,
+} from "./map_layer_list";
+
+/** 자료 소스(위성 = 조각 · 걷은 임도 짐작 = 소스 없음). */
+export type GlSource = Exclude<MapLayerKey, "satellite" | "forestRoad">;
+
+const GL_FONT_BOLD = [`${GL_FONT} SemiBold`, GL_FONT];
+
+type GlSpec = GlMapSpec<MapLayerKey>;
+
+const HALO = "rgba(0, 0, 0, 0.55)";
+const ROUND = { "line-join": "round", "line-cap": "round" } as const;
+const COLOR: ExpressionSpecification = ["get", "_color"];
+/** 등고 조각 굵은 선(서버가 줌마다 정함) — 가는 선은 모두라 굵은 선은 두 번 겹쳐 짙음(캔버스처럼). */
+const BOLD = ["==", ["get", "k"], 1] as unknown as FilterSpecification;
+/** 캔버스 점선(px) → MapLibre 점선(선 굵기 배수). */
+const dash = (px: number[], width: number): number[] => px.map((v) => v / width);
+
+/** 선 겹 — 검은 테두리 + 선(점선이면 둘 다 같은 px 무늬). */
+function haloLine(
+  key: MapLayerKey,
+  source: GlSource,
+  color: string,
+  width: number,
+  pattern: number[] = [],
+  halo = { color: HALO, width: width + 1.6 },
+  filter?: FilterSpecification,
+): GlSpec[] {
+  const line = (id: string, paint: Record<string, unknown>, w: number): GlSpec =>
+    ({
+      key,
+      id,
+      type: "line",
+      source,
+      ...(filter ? { filter } : {}),
+      layout: ROUND,
+      paint: {
+        ...paint,
+        "line-width": w,
+        ...(pattern.length ? { "line-dasharray": dash(pattern, w) } : {}),
+      },
+    }) as GlSpec;
+  return [
+    line(`${key}-halo`, { "line-color": halo.color }, halo.width),
+    line(key, { "line-color": color }, width),
+  ];
+}
+
+/** 면 겹 — 채움 + 테두리(캔버스 `fillLayer` 처럼 테두리 투명도 0.9). */
+/** 띠 테두리 — 계류 · 도로 같은 꼴. */
+const BAND_EDGE = { color: COLOR, width: 1.2, dash: [6, 4] };
+
+function fillEdge(
+  key: MapLayerKey,
+  source: GlSource,
+  fill: string | ExpressionSpecification,
+  opacity: number | ExpressionSpecification,
+  edge: { color: string | ExpressionSpecification; width: number; dash?: number[] },
+  filter?: ExpressionSpecification,
+): GlSpec[] {
+  const only = filter ? { filter } : {};
+  return [
+    {
+      key,
+      id: key,
+      type: "fill",
+      source,
+      ...only,
+      paint: { "fill-color": fill, "fill-opacity": opacity },
+    } as GlSpec,
+    {
+      key,
+      id: `${key}-edge`,
+      type: "line",
+      source,
+      ...only,
+      layout: ROUND,
+      paint: {
+        "line-color": edge.color,
+        "line-width": edge.width,
+        "line-opacity": 0.9,
+        ...(edge.dash ? { "line-dasharray": dash(edge.dash, edge.width) } : {}),
+      },
+    } as GlSpec,
+  ];
+}
+
+/** 겹 차례(아래 → 위)와 꼴 — 옛 캔버스(D03 `UI_LayerPaint`)의 색 · 굵기 · 투명도 · 차례 그대로 · `light` = 위성 밝기 상한. */
+export function mapLayerSpecs(light: number, pick: RoadPick | null): GlSpec[] {
+  const contour = themeColor("--draw-map-contour", "#ffd68c");
+  const place = themeColor("--draw-map-place", "#f8fafc");
+  const landslideZone = themeColor("--draw-map-landslide-zone", "#e11d48");
+  const raster = (
+    key: "satellite" | "hillshade" | "slope",
+    opacity: number,
+    extra: Record<string, number> = {},
+  ): GlSpec =>
+    ({
+      key,
+      id: key,
+      type: "raster",
+      source: key,
+      paint: { "raster-opacity": opacity, "raster-fade-duration": 0, ...extra },
+    }) as GlSpec;
+  const lineKind = (key: LineLayerKey): GlSpec[] => {
+    const { color, width, dash } = LINE_LAYERS[key];
+    return haloLine(key, key, themeColor(color, "#f43f5e"), width, dash);
+  };
+  return [
+    // 위성 = 조금 어둡고 연하게(요구 475 · 노선 선 대비) — 밝기 상한은 사용자 조절
+    raster("satellite", 1, { "raster-brightness-max": light, "raster-saturation": SAT_SATURATION }),
+    raster("hillshade", 1), // 위성 위 = 「곱하기」와 같은 검은 그늘 그림(받는 쪽이 바꿈)
+    raster("slope", 0.55),
+    ...forestRasterSpecs(), // 산사태위험 · 생태자연도 = 조각 그림(622-2)
+    ...forestAreaSpecs(), // 산림입지도 · 경제림 = 벡터 조각
+    ...geologySpecs(), // 암상 지질도 면 · 글(760-1)
+    ...fillEdge("zones", "zones", COLOR, 0.22, { color: COLOR, width: 1.6 }),
+    // 띠 = 한 자료(`_band`) · 겹 둘(634-2 · 도로 300 m 아래 · 계류 100 m 위 — 옛 한 겹 차례 그대로)
+    ...fillEdge("roadBands", "bands", COLOR, 0.16, BAND_EDGE, ["==", ["get", "_band"], "road"]),
+    ...fillEdge("bands", "bands", COLOR, 0.18, BAND_EDGE, ["==", ["get", "_band"], "stream"]),
+    {
+      key: "cadastral",
+      id: "cadastral",
+      type: "line",
+      source: "cadastral",
+      layout: ROUND,
+      paint: {
+        "line-color": themeColor("--draw-map-parcel", "#f0abfc"),
+        "line-width": 0.8,
+        "line-opacity": 0.8,
+      },
+    } as GlSpec,
+    ...((): GlSpec[] => {
+      const water = themeColor("--draw-map-water", "#0ea5e9");
+      return fillEdge("water", "water", water, 0.45, { color: water, width: 1 });
+    })(),
+    ...fillEdge("building", "building", themeColor("--draw-map-building", "#fb7185"), 0.7, {
+      color: HALO,
+      width: 0.6,
+    }),
+    {
+      key: "contour",
+      id: "contour-minor",
+      type: "line",
+      source: "contour",
+      "source-layer": "contour",
+      layout: ROUND,
+      paint: { "line-color": contour, "line-width": 0.8, "line-opacity": 0.7 },
+    } as GlSpec,
+    {
+      key: "contour",
+      id: "contour-index",
+      type: "line",
+      source: "contour",
+      "source-layer": "contour",
+      filter: BOLD,
+      layout: ROUND,
+      paint: { "line-color": contour, "line-width": 1.6, "line-opacity": 0.7 },
+    } as GlSpec,
+    {
+      key: "contour",
+      id: "contour-label",
+      type: "symbol",
+      source: "contour",
+      "source-layer": "contour",
+      filter: BOLD,
+      layout: {
+        "symbol-placement": "line",
+        "symbol-spacing": 320,
+        "text-field": ["to-string", ["get", "h"]],
+        "text-font": [GL_FONT],
+        "text-size": 10,
+        "text-max-angle": 30,
+        "text-padding": 2,
+      },
+      paint: {
+        "text-color": contour,
+        "text-halo-color": "rgba(0, 0, 0, 0.6)",
+        "text-halo-width": 1.5,
+      },
+    } as GlSpec,
+    ...haloLine("road", "road", themeColor("--draw-map-road", "#f8fafc"), 1.6, [], {
+      color: HALO,
+      width: 3.2,
+    }),
+    ...forestRoadSpecs(), // 임도망도(전국 국가임도) = 벡터 조각 · 임도(업로드) 아래
+    ...haloLine(
+      "forestRoadFile",
+      "forestRoadFile",
+      themeColor("--draw-map-forest-road-file", "#ff2fd0"),
+      2.4,
+      [],
+      { color: HALO, width: 4 },
+    ),
+    // 고른 묶음 · 선 강조(605-2) — 같은 자료에서 걸러 한 겹 더 굵게
+    ...["-pick-halo", "-pick"].map(
+      (tail, i) =>
+        ({
+          key: "forestRoadFile",
+          id: `forestRoadFile${tail}`,
+          type: "line",
+          source: "forestRoadFile",
+          filter: pickFilter(pick),
+          layout: ROUND,
+          paint: {
+            "line-color": i ? themeColor("--draw-map-sketch", "#ffe94d") : HALO,
+            "line-width": i ? 4.2 : 7.4,
+          },
+        }) as GlSpec,
+    ),
+    {
+      key: "stream",
+      id: "stream",
+      type: "line",
+      source: "stream",
+      layout: ROUND,
+      paint: {
+        "line-color": themeColor("--draw-map-stream", "#38bdf8"),
+        "line-width": ["case", ["==", ["get", "구분"], "세류"], 1, 2.4],
+      },
+    } as GlSpec,
+    ...LINE_KEYS.flatMap(lineKind),
+    // 산사태취약 — 필지 = 「이 필지 안 어딘가」 테두리만 · 점 = 지정 자리
+    ...haloLine(
+      "landslideZones",
+      "landslideZones",
+      landslideZone,
+      1.8,
+      [6, 3],
+      { color: "rgba(255, 255, 255, 0.7)", width: 3.2 },
+      ["!=", ["geometry-type"], "Point"] as unknown as FilterSpecification,
+    ),
+    {
+      key: "landslideZones",
+      id: "landslideZones-point",
+      type: "circle",
+      source: "landslideZones",
+      filter: ["==", ["geometry-type"], "Point"],
+      paint: {
+        "circle-radius": 5,
+        "circle-color": landslideZone,
+        "circle-stroke-color": "#ffffff",
+        "circle-stroke-width": 1.5,
+      },
+    } as GlSpec,
+    forestRoadLabelSpec(), // 임도망도 글 — 지명 아래(겹치면 지명이 앞섬)
+    {
+      key: "place",
+      id: "place-dot",
+      type: "circle",
+      source: "place",
+      paint: { "circle-radius": 2.5, "circle-color": place },
+    } as GlSpec,
+    {
+      key: "place",
+      id: "place",
+      type: "symbol",
+      source: "place",
+      layout: {
+        "text-field": ["get", "name"],
+        "text-font": GL_FONT_BOLD,
+        "text-size": 11,
+        "text-anchor": "bottom",
+        "text-offset": [0, -0.36],
+        "text-padding": 2,
+      },
+      paint: {
+        "text-color": place,
+        "text-halo-color": "rgba(0, 0, 0, 0.7)",
+        "text-halo-width": 1.5,
+      },
+    } as GlSpec,
+  ];
+}
+
+/** 고른 묶음 · 선만 거름(고름 없음 = 아무것도 안 맞는 거름). */
+export function pickFilter(pick: RoadPick | null): FilterSpecification {
+  const all: unknown[] = ["all", ["==", ["get", "__bundle"], pick?.bundle ?? ""]];
+  if (pick?.line !== undefined) all.push(["==", ["get", "__line"], pick.line]);
+  return all as unknown as FilterSpecification;
+}
+
+/** 겹 색 지문 — 밝음 · 어두움이 바뀌면 색을 다시. */
+export const MAP_THEME_NAMES = [
+  "--draw-map-contour",
+  "--draw-map-road",
+  "--draw-map-stream",
+  "--draw-map-parcel",
+] as const;
+
+/** 위성 채도(−1~1) — 조금 연하게. */
+const SAT_SATURATION = -0.3;

A00_Common/map/map_legend.ts

@@ -0,0 +1,215 @@
+/* =============================================================================
+ * map_legend.ts
+ * 공용 지도 범례(PLAN 569-2 · 622-2 · 624-2 · 요구 530) — 켠 겹 범례 칸 하나(줄마다 `createLegend`) + 페이지가 붙이는 덧 줄.
+ *   조각 겹 범례(산사태위험 · 임도망도 · 경제림 · 생태자연도) = 받을 자료 없음 → 켬끔만 보고 여기서 만듦(`tileLegendRows`).
+ *   받은 자료 범례 줄(수 · 넓이 · 급경사 범위 · 624-3 D03 에서 옮김) = `legendRows(on, data)` — 받은 자료 꼴은 `LegendData`
+ *     (D03 옛 캔버스 자료 · B05 GL 자료 둘 다 맞음 · 받는 일은 페이지 몫).
+ *   암상 지질도 줄 · 노선 구간 표 = `map_geology`(760-1) · 켠 밖 겹 출처 줄 = 맨 아래(`map_layer_source` · 598-4).
+ *   쓰는 법 = `const legend = createMapLegend("d03-plan__legend")` → `legend.show(rows, [덧 줄])` · 줄 · 덧 없으면 숨김.
+ * ========================================================================== */
+
+import { createLegend, type LegendItem } from "@ui/ui_template_flow_legend";
+import { forestLegendRows } from "./map_forest_layers";
+import { geologyRow, type PlanGeology } from "./map_geology";
+import type {
+  PlanBand,
+  PlanForestRoads,
+  PlanLandslideZones,
+  PlanRaster,
+  PlanSoils,
+  PlanZones,
+} from "./map_layer_api";
+import { hectare } from "./map_layer_data";
+import { sourceRow } from "./map_layer_source";
+import {
+  LANDSLIDE_LEGEND,
+  LINE_KEYS,
+  LINE_LAYERS,
+  ZONE_COLORS,
+  type MapLayerKey,
+} from "./map_layer_list";
+import { SLOPE_MAX_PCT, bandRatios, pctToDeg, type SlopeBand } from "./logic/map_slope_bands";
+
+/** 지물 수만 보는 겹(옛 캔버스 자료 · GeoJSON 둘 다). */
+interface Counted {
+  features?: ArrayLike<unknown>;
+}
+
+/** 범례가 읽는 받은 자료 — 받은 겹만. */
+export interface LegendData {
+  slope: { raster: PlanRaster; bands: SlopeBand[] };
+  landslideZones: { info: PlanLandslideZones };
+  zones: { summary: PlanZones["summary"] };
+  /** 토양형(코드 차례) 색 값 · 요약. */
+  soils: { kinds: Array<{ color: string }>; summary: PlanSoils["summary"] };
+  bands: { info: { stream: PlanBand; road: PlanBand } };
+  water: Counted;
+  building: Counted;
+  road: { small: Counted };
+  forestRoadFile: { info: PlanForestRoads };
+  faults: { count: number; length_m: number };
+  lineaments: { count: number; length_m: number };
+  zeroOrder: { count: number; length_m: number };
+  geology: PlanGeology;
+}
+
+export interface MapLegend {
+  root: HTMLElement;
+  show: (rows: LegendItem[][], tail?: HTMLElement[]) => void;
+}
+
+/** 켠 조각 겹 범례 — 산사태위험 다음 산림 셋. */
+export const tileLegendRows = (on: Record<MapLayerKey, boolean>): LegendItem[][] => [
+  ...(on.landslide ? [LANDSLIDE_LEGEND] : []),
+  ...forestLegendRows(on),
+];
+
+/** `className` = 자리 · 꼴(페이지 CSS). */
+export function createMapLegend(className: string): MapLegend {
+  const root = document.createElement("div");
+  root.className = className;
+  root.title = "켠 겹 범례 — 받은 지형 범위 안 수 · 넓이";
+  return {
+    root,
+    show(rows, tail = []) {
+      root.replaceChildren(...rows.map((row) => createLegend(row)), ...tail);
+      root.hidden = !rows.length && !tail.length;
+    },
+  };
+}
+
+const km = (m: number): string => `${(m / 1000).toFixed(2)} km`;
+
+/** 급경사 범례 — 범위마다 「아래~위 %(°) · 비율」(위 = 끝 = 「↑」). */
+function slopeRow({ raster, bands }: LegendData["slope"]): LegendItem[] {
+  const ratios = bandRatios(raster.counts ?? [], bands);
+  const deg = (pct: number): string => pctToDeg(pct).toFixed(0);
+  return bands.map((band, i) => {
+    const open = band.high >= SLOPE_MAX_PCT;
+    const range = open
+      ? `${band.low} %↑(${deg(band.low)}°↑)`
+      : `${band.low}~${band.high} %(${deg(band.low)}~${deg(band.high)}°)`;
+    return { label: `${range} · ${(ratios[i] * 100).toFixed(1)} %`, color: `var(${band.color})` };
+  });
+}
+
+/** 산사태취약지역 범례 — 점 · 필지 · 위치 없는 시도 · 표 없는 시도 · 지적 못 받음. */
+function landslideZoneRow({ info }: LegendData["landslideZones"]): LegendItem[] {
+  const color = "var(--draw-map-landslide-zone)";
+  const items: LegendItem[] = [
+    {
+      label: `산사태취약지역 점 ${info.points.length}곳`,
+      color,
+      kind: "dot",
+      off: !info.points.length,
+    },
+    {
+      label: `지번 맞는 필지 ${info.parcels.features?.length ?? 0}곳(테두리)`,
+      color,
+      kind: "dash",
+      off: !info.parcels.features?.length,
+    },
+  ];
+  for (const sido of info.sidos)
+    if (!sido.located) items.push({ label: `${sido.name} 위치 없음 — 필지만`, color, off: true });
+  for (const name of info.missing)
+    items.push({ label: `${name} — 이 시도 자료 없음`, color: "transparent", off: true });
+  if (!info.cadastral)
+    items.push({ label: "지적도 못 받음 — 필지 테두리 없음", color: "transparent", off: true });
+  return items;
+}
+
+/** 켠 겹의 받은 자료 범례 줄(급경사 · 조각 겹 · 산사태취약 · 보호구역 · 토양 · 띠 · 선 겹 · 물 면 · 건물 · 임도). */
+export function legendRows(
+  on: Record<MapLayerKey, boolean>,
+  data: Partial<LegendData>,
+): LegendItem[][] {
+  const rows: LegendItem[][] = [];
+  if (on.slope && data.slope) rows.push(slopeRow(data.slope));
+  rows.push(...tileLegendRows(on)); // 조각 겹 = 받기 없음(622-2 · 공용 범례)
+  if (on.landslideZones && data.landslideZones) rows.push(landslideZoneRow(data.landslideZones));
+  if (on.zones && data.zones) {
+    const items = Object.entries(data.zones.summary)
+      .filter(([, kind]) => kind.count || kind.failed)
+      .map(([key, kind]) => ({
+        label: kind.failed
+          ? `${kind.label} 받지 못함`
+          : `${kind.label} ${kind.count}곳 ${hectare(kind.area_m2)}`,
+        color: `var(${ZONE_COLORS[key]})`,
+        off: !!kind.failed,
+      }));
+    rows.push(
+      items.length
+        ? items
+        : [{ label: "보호 · 규제 구역 없음(받은 범위 안)", color: "transparent", off: true }],
+    );
+  }
+  if (on.soils && data.soils) {
+    const { kinds, summary } = data.soils;
+    rows.push(
+      summary.length
+        ? summary.map((soil, i) => ({
+            label: `${soil.name} ${hectare(soil.area_m2)}`,
+            color: `var(${kinds[i].color})`,
+          }))
+        : [{ label: "산림입지도 없음(받은 범위 안)", color: "transparent", off: true }],
+    );
+  }
+  // 계류 100 m 띠 · 도로 300 m 띠 = 겹 둘(634-2 · 자료 한 벌)
+  if ((on.bands || on.roadBands) && data.bands) {
+    const { stream, road } = data.bands.info;
+    rows.push([
+      ...(on.bands
+        ? [
+            {
+              label: `계류 ${stream.dist_m} m 띠 ${hectare(stream.area_m2)} (${(stream.ratio * 100).toFixed(1)} %)`,
+              color: "var(--draw-map-band-stream)",
+            },
+          ]
+        : []),
+      ...(on.roadBands
+        ? [
+            {
+              label: `도로 ${road.dist_m} m 띠 ${hectare(road.area_m2)} (${(road.ratio * 100).toFixed(1)} %)`,
+              color: "var(--draw-map-band-road)",
+            },
+          ]
+        : []),
+    ]);
+  }
+  const lines = LINE_KEYS.flatMap((key) => {
+    const got = on[key] && data[key];
+    if (!got) return [];
+    const { label, color, dash } = LINE_LAYERS[key];
+    return [
+      {
+        label: `${label} ${got.count}가닥 ${km(got.length_m)}`,
+        color: `var(${color})`,
+        kind: dash.length ? ("dash" as const) : ("line" as const),
+        off: !got.count,
+      },
+    ];
+  });
+  if (lines.length) rows.push(lines);
+  if (on.geology && data.geology) rows.push(geologyRow(data.geology));
+  const tail: LegendItem[] = [];
+  if (on.water && data.water)
+    tail.push({
+      label: `물 면 ${data.water.features?.length ?? 0}곳`,
+      color: "var(--draw-map-water)",
+    });
+  if (on.building && data.building)
+    tail.push({
+      label: `건물 ${(data.building.features?.length ?? 0).toLocaleString()}동`,
+      color: "var(--draw-map-building)",
+    });
+  if (on.forestRoadFile && data.forestRoadFile)
+    tail.push({
+      label: `임도(업로드) ${data.forestRoadFile.info.count}가닥 ${km(data.forestRoadFile.info.length_m)}`,
+      color: "var(--draw-map-forest-road-file)",
+      kind: "line",
+    });
+  if (tail.length) rows.push(tail);
+  rows.push(...sourceRow(on).map((item) => [item]));
+  return rows;
+}

A00_Common/map/map_lidar_upload.ts

@@ -0,0 +1,117 @@
+/* =============================================================================
+ * map_lidar_upload.ts
+ * 공용 [LAS 올리기](PLAN 637-3 · 요구 546) — 예정노선(D03) · B05 지형 칩 옆 같은 단추 · 같은 흐름.
+ *   단추 → 파일 고름(LAS · LAZ + .prj) → `POST <path>`(multipart `files` · 못 받으면 서버 글 그대로 알림)
+ *   → 1 초마다 `poll` 로 진행(`show` = 페이지 진행 서클) → 끝(오류면 알림) → 서클 · 단추 풀고 `onDone(마지막 진행)`.
+ *   주소 · 진행 묻기 · 서클 · 끝난 뒤 일은 페이지 인자(D = `/plan/lidar` · B = `/route/lidar`).
+ *   지켜보는 동안 단추 막힘 · 페이지를 떠나면(단추가 문서 밖) 그침.
+ * ========================================================================== */
+
+import { API_BASE_URL } from "@config/config_frontend";
+import { createButton } from "@ui/ui_template_button";
+import { pickFiles } from "@ui/ui_template_drop";
+import { showToast } from "@ui/ui_template_elements";
+
+const POLL_MS = 1000;
+
+/** 서버 뒤 일 진행(`common_util_lidar_upload.start_job` 꼴). */
+export interface LidarJob {
+  running: boolean;
+  percent: number;
+  message?: string | null;
+  error?: string | null;
+  interrupted?: boolean;
+}
+
+export interface LidarUpload {
+  /** [LAS 올리기] 단추(보임은 페이지 몫). */
+  button: HTMLButtonElement;
+  /** 도는 일을 끝날 때까지 지켜봄(들어올 때 이어 보기). */
+  follow: () => Promise<void>;
+  /** 지켜보는 중. */
+  busy: () => boolean;
+}
+
+const errorText = (error: unknown): string =>
+  error instanceof Error ? error.message : String(error);
+
+/** LAS 묶음 올리기 — 못 받으면 서버 `detail` 글 그대로 오류. */
+async function postFiles(path: string, files: File[]): Promise<void> {
+  const form = new FormData();
+  for (const file of files) form.append("files", file);
+  const response = await fetch(`${API_BASE_URL}${path}`, {
+    method: "POST",
+    credentials: "include",
+    body: form,
+  });
+  if (response.ok) return;
+  const body = (await response.json().catch(() => ({}))) as { detail?: unknown };
+  throw new Error(typeof body.detail === "string" ? body.detail : `HTTP ${response.status}`);
+}
+
+export function createLidarUpload<J extends LidarJob>(opts: {
+  /** 올리기 주소(`API_BASE_URL` 뒤). */
+  path: string;
+  /** 진행 한 번 묻기. */
+  poll: () => Promise<J>;
+  /** 진행 보임(0~1 · 글) · null = 끝. */
+  show: (state: { ratio: number; text: string } | null) => void;
+  /** 지켜보기를 감쌈(예: 서클 일 셈). */
+  track?: (job: Promise<void>) => Promise<void>;
+  /** 지켜보기 시작 · 끝. */
+  onBusy?: (busy: boolean) => void;
+  /** 짓기가 끝난 뒤(오류 알림 뒤 · 단추 풀린 뒤 · 마지막 진행). */
+  onDone: (job: J) => Promise<void> | void;
+}): LidarUpload {
+  let busy = false;
+  const button = createButton({
+    label: "LAS 올리기",
+    variant: "ghost",
+    size: 32,
+    iconStart: "upload",
+    onClick: () =>
+      pickFiles({ accept: ".las,.laz,.prj", multiple: true }, (files) => void send(files)),
+  });
+
+  const setBusy = (on: boolean): void => {
+    busy = on;
+    button.disabled = on;
+    opts.onBusy?.(on);
+  };
+
+  async function send(files: File[]): Promise<void> {
+    try {
+      await postFiles(opts.path, files);
+    } catch (error) {
+      return showToast(`LAS 올리지 못함 — ${errorText(error)}`, "error");
+    }
+    await follow();
+  }
+
+  async function watch(): Promise<void> {
+    let last: J | null = null;
+    setBusy(true);
+    opts.show({ ratio: 0, text: "" });
+    try {
+      while (button.isConnected) {
+        const job = await opts.poll();
+        opts.show({ ratio: job.percent / 100, text: job.message ?? "" });
+        if (!job.running) {
+          if (job.error) showToast(`라이다 지형 못 지음 — ${job.error}`, "error");
+          last = job;
+          break;
+        }
+        await new Promise((done) => setTimeout(done, POLL_MS));
+      }
+    } catch (error) {
+      showToast(`라이다 진행을 읽지 못했습니다 — ${errorText(error)}`, "error");
+    } finally {
+      opts.show(null);
+      setBusy(false);
+    }
+    if (last) await opts.onDone(last);
+  }
+
+  const follow = (): Promise<void> => (opts.track ? opts.track(watch()) : watch());
+  return { button, follow, busy: () => busy };
+}

A00_Common/map/map_route_preview.ts

@@ -0,0 +1,57 @@
+/* =============================================================================
+ * map_route_preview.ts
+ * 공용 「추천노선」 미리보기(PLAN 626-1 → 636-2 공용 · 요구 530 · 546) — B05 평면 · 예정노선(D03)이 같이 씀.
+ *   메뉴 = 도구줄 아이콘 하나(compass · 호버 「추천노선」) + 아래 판(여럿 고르기 · 줄마다 색 점 · 「끔」 줄 없음 ·
+ *     다 끄면 꺼짐 · 부품 `createPickMenu({ multi })` · 589-12).
+ *   그리기 = 지도 위 선(노랑 `--draw-map-sketch` · 검은 테 · 기본 점선) — 위성 · 어두운 바탕 모두 보임.
+ *   항목 · 선 셈은 페이지 몫: B05 = 노선 추천 저장본 넷(`B05_Profile_UI_RouteEdit_RecPreview`) ·
+ *     예정노선 = 가이드 선(`D03_PlanAnalysis_UI_Guide`).
+ * ========================================================================== */
+
+import { createPickMenu, type PickMenu, type PickMenuItem } from "@ui/ui_template_context_menu";
+import { themeColor } from "@ui/ui_template_palette";
+
+type Vertex = [number, number] | [number, number, number];
+
+/** 「추천노선」 메뉴 — 줄 누름 = `onPick(값)`(켬끔 바뀜 · 지금 켠 줄은 `menu.values()`). */
+export function createRoutePreviewMenu(opts: {
+  items: PickMenuItem[];
+  onPick: (value: string) => void;
+}): PickMenu {
+  const menu = createPickMenu({
+    multi: true,
+    icon: "compass",
+    title: "추천노선", // 마우스 글 = 공용 표 호버제목(634-2 · `mapToolGroups` 가 맞춤)
+    items: opts.items,
+    onPick: (value) => value && opts.onPick(value),
+  });
+  menu.root.dataset.act = "recommend";
+  return menu;
+}
+
+/** 미리보기 선 하나 — 검은 테(5 px) 위 색 선(3 px) · 기본 노랑 점선. */
+export function paintRoutePreview(
+  context: CanvasRenderingContext2D,
+  line: readonly Vertex[],
+  toScreen: (vertex: [number, number]) => [number, number],
+  style: { dash?: number[]; color?: string } = {},
+): void {
+  if (line.length < 2) return;
+  context.save();
+  context.setLineDash(style.dash ?? [10, 6]);
+  context.lineJoin = "round";
+  context.beginPath();
+  line.forEach((vertex, index) => {
+    const [x, y] = toScreen([vertex[0], vertex[1]]);
+    if (index) context.lineTo(x, y);
+    else context.moveTo(x, y);
+  });
+  // 지도 위 그림 색(테마 안 따름) + 검은 테 — 위성 · 어두운 바탕 모두 보임
+  context.strokeStyle = "rgba(0, 0, 0, 0.6)";
+  context.lineWidth = 5;
+  context.stroke();
+  context.strokeStyle = style.color ?? themeColor("--draw-map-sketch", "#ffe94d");
+  context.lineWidth = 3;
+  context.stroke();
+  context.restore();
+}

A00_Common/map/map_sat_light.ts

@@ -0,0 +1,39 @@
+/* =============================================================================
+ * map_sat_light.ts
+ * 공용 지도 위성 바탕 밝기(D03 · B05 · 624-3 공용으로 옮김)(요구 475) — 노선 선 대비를 위해 위성을 조금 어둡게 · 사용자가 범례에서 조절.
+ *   값 = 밝기 상한(0.4~1) · 계정 화면 취향으로 기억. 칠하기 = D03 `UI_MapGl` `setSatelliteLight` · B05 `UI_RouteEdit_Layers`.
+ * ========================================================================== */
+
+import { createSlider } from "@ui/ui_template_input";
+import { readByKey, writeByKey } from "../b_page_state";
+
+const PREF_KEY = "aislo:pref:d03.satellite-light";
+export const SAT_LIGHT_MIN = 0.4;
+export const SAT_LIGHT_MAX = 1;
+export const SAT_LIGHT_DEFAULT = 0.8;
+
+/** 기억한 밝기 — 없거나 깨지면 처음 값. */
+export function readSatLight(): number {
+  const value = Number(readByKey(PREF_KEY));
+  return readByKey(PREF_KEY) !== null && value >= SAT_LIGHT_MIN && value <= SAT_LIGHT_MAX
+    ? value
+    : SAT_LIGHT_DEFAULT;
+}
+
+/** 범례 「위성 밝기」 칸 — 움직이면 바로 `onChange` · 기억. */
+export function createSatLightRow(value: number, onChange: (value: number) => void): HTMLElement {
+  const { root, input } = createSlider({
+    label: "위성 밝기",
+    min: SAT_LIGHT_MIN,
+    max: SAT_LIGHT_MAX,
+    step: 0.05,
+    value,
+    format: (v) => `${Math.round(v * 100)} %`,
+    onInput: (v) => {
+      writeByKey(PREF_KEY, String(v));
+      onChange(v);
+    },
+  });
+  input.dataset.role = "satellite-light";
+  return root;
+}

A00_Common/map/map_slope_bands.ts

@@ -0,0 +1,201 @@
+/* =============================================================================
+ * map_slope_bands.ts
+ * 공용 지도 급경사 범위 옵션(D03 · B05 · 624-3 공용으로 옮김)(PLAN 603 · 요구 466 · 467 · 468) — 범례 급경사 줄 ⚙ → 모달
+ *   (631 · 요구 537 = 수평 바 `ui_template_range_bar` — 칸 사이 경계값 한 번 · 아래 ° 환산 · 칸 눌러 색 · 칠 안 함 칸 ·
+ *    [단계 추가] = 고른 칸 반으로 · [단계 지움] = 이웃과 합침 · [기본값] · [적용] · 빈 값 · 같은 값 · 거꾸로 막음).
+ *   기억 = 화면 취향(`aislo:pref:d03.slope-bands` · 계정에 붙음 · 프로젝트 무관).
+ *   칠하기 = 서버 값 그림(회색 · 칸 = 기울기 % 내림) → 범위 색 그림(서버 왕복 없음 · CLAUDE.md 5장).
+ *   범위 · 비율 셈 = `logic/map_slope_bands.ts` · 부르는 곳 = D03 `UI_Layers` · B05 `UI_RouteEdit_Layers`.
+ * ========================================================================== */
+
+import { createButton, createIconButton } from "@ui/ui_template_button";
+import { openModal } from "@ui/ui_template_modal";
+import { themeColor } from "@ui/ui_template_palette";
+import { createRangeBar } from "@ui/ui_template_range_bar";
+import { createText } from "@ui/ui_template_text";
+import { readByKey, writeByKey } from "../b_page_state";
+import { loadImage } from "./map_layer_data";
+import {
+  DEFAULT_SLOPE_BANDS,
+  SLOPE_COLORS,
+  SLOPE_MAX_BANDS,
+  SLOPE_MAX_PCT,
+  bandOf,
+  bandsToBar,
+  barToBands,
+  checkBands,
+  checkEdges,
+  mergeBar,
+  parseBands,
+  pctToDeg,
+  splitBar,
+  type SlopeBand,
+  type SlopeBar,
+} from "./logic/map_slope_bands";
+
+const PREF_KEY = "aislo:pref:d03.slope-bands";
+/** 칠한 칸 투명도(겹 투명도 0.55 는 따로). */
+const ALPHA = 150;
+
+export const readSlopeBands = (): SlopeBand[] => parseBands(readByKey(PREF_KEY));
+export const writeSlopeBands = (bands: SlopeBand[]): void =>
+  writeByKey(PREF_KEY, JSON.stringify(bands));
+
+/** 값 그림 → 칸 값(빨강 자리 = 회색 값) · 받은 blob 주소는 다 읽었으니 놓음(616-4). */
+export function slopeValues(image: HTMLImageElement): ImageData {
+  const canvas = document.createElement("canvas");
+  canvas.width = image.naturalWidth;
+  canvas.height = image.naturalHeight;
+  const context = canvas.getContext("2d", { willReadFrequently: true })!;
+  context.drawImage(image, 0, 0);
+  if (image.src.startsWith("blob:")) URL.revokeObjectURL(image.src);
+  return context.getImageData(0, 0, canvas.width, canvas.height);
+}
+
+/** 범위대로 칠한 그림(주소 = data URL · toBlob 의 한가 작업 기다림 최대 1 s 없앰 616-4 ·
+ *  부르는 쪽 `URL.revokeObjectURL` 은 그대로 둬도 됨). */
+export async function paintSlope(
+  values: ImageData,
+  bands: SlopeBand[],
+): Promise<{ url: string; image: HTMLImageElement }> {
+  const rgb = bands.map((band) => hexRgb(themeColor(band.color, "#facc15")));
+  const lut = new Uint32Array(256);
+  const view = new DataView(lut.buffer);
+  for (let v = 0; v < 256; v++) {
+    const i = bandOf(v, bands);
+    if (i >= 0) view.setUint32(v * 4, ((rgb[i] << 8) | ALPHA) >>> 0, false);
+  }
+  const out = new ImageData(values.width, values.height);
+  const src = values.data;
+  const dst = new Uint32Array(out.data.buffer);
+  for (let p = 0; p < dst.length; p++) dst[p] = lut[src[p * 4]];
+  const canvas = document.createElement("canvas");
+  canvas.width = values.width;
+  canvas.height = values.height;
+  canvas.getContext("2d")!.putImageData(out, 0, 0);
+  const url = canvas.toDataURL("image/png");
+  return { url, image: await loadImage(url) };
+}
+
+/** `#rrggbb` → 0xrrggbb(못 읽으면 노랑). */
+function hexRgb(color: string): number {
+  const hex = /^#?([0-9a-f]{6})$/i.exec(color.trim())?.[1];
+  return hex ? parseInt(hex, 16) : 0xfacc15;
+}
+
+/** 범례 급경사 줄 ⚙. */
+export const slopeGear = (onClick: () => void): HTMLButtonElement => {
+  const button = createIconButton({
+    icon: "settings",
+    title: "급경사 범위 바꾸기(기울기 %)",
+    size: 20,
+    onClick,
+  });
+  button.dataset.role = "slope-bands";
+  return button;
+};
+
+/** 옵션 모달 — 수평 바(631 · 요구 537) · [적용] = 막을 것 없으면 `onApply` 후 닫음. */
+export function openSlopeBands(current: SlopeBand[], onApply: (bands: SlopeBand[]) => void): void {
+  const error = createText("", "error");
+  error.hidden = true;
+  const bar = createRangeBar({
+    ...bandsToBar(current),
+    palette: SLOPE_COLORS.map((c) => ({ value: c.color, name: c.name, color: `var(${c.color})` })),
+    noneLabel: "칠 안 함",
+    unit: "%",
+    ends: ["0 %", `${SLOPE_MAX_PCT} % 이상`],
+    hint: (pct) => `≈ ${pctToDeg(pct).toFixed(1)}°`,
+    ariaLabel: "급경사 범위",
+    onChange: () => refresh(),
+    onSelect: () => refresh(),
+  });
+  bar.root.dataset.role = "slope-bar";
+
+  /** 고칠 거리 — 경계 먼저 · 다음 범위(색 칸 없음 · 너무 많음). */
+  function problem(): string | null {
+    const state = bar.get();
+    return checkEdges(state.edges) ?? checkBands(barToBands(state));
+  }
+
+  function refresh(): void {
+    const state = bar.get();
+    const why = problem();
+    error.lastChild!.textContent = why ?? "";
+    error.hidden = !why;
+    const bad = checkEdges(state.edges) ? /(\d+)번째 경계/.exec(why ?? "")?.[1] : undefined;
+    bar.setError(bad ? Number(bad) : undefined);
+    addButton.disabled = !splitBar(state, bar.selected());
+    removeButton.disabled = !mergeBar(state, bar.selected());
+  }
+
+  const step =
+    (make: (state: SlopeBar, i: number) => SlopeBar | null, next: (i: number) => number) => () => {
+      const i = bar.selected();
+      const got = make(bar.get(), i);
+      if (!got) return;
+      bar.set(got, next(i));
+      refresh();
+    };
+  const addButton = createButton({
+    label: "단계 추가",
+    variant: "ghost",
+    size: 28,
+    iconStart: "plus",
+    onClick: step(splitBar, (i) => i + 1),
+  });
+  addButton.dataset.role = "slope-band-add";
+  addButton.title = "고른 칸을 반으로 나눔";
+  const removeButton = createButton({
+    label: "단계 지움",
+    variant: "ghost",
+    size: 28,
+    iconStart: "trash",
+    onClick: step(mergeBar, (i) => Math.max(0, i - 1)),
+  });
+  removeButton.dataset.role = "slope-band-remove";
+  removeButton.title = "고른 칸을 이웃 칸과 합침";
+
+  openModal({
+    title: "급경사 범위(기울기 %)",
+    closeLabel: "닫기",
+    width: "960px",
+    mount: (body, close, actions) => {
+      const reset = createButton({
+        label: "기본값",
+        variant: "ghost",
+        size: 28,
+        onClick: () => {
+          bar.set(bandsToBar(DEFAULT_SLOPE_BANDS), 0);
+          refresh();
+        },
+      });
+      reset.dataset.role = "slope-band-default";
+      const apply = createButton({
+        label: "적용",
+        size: 28,
+        onClick: () => {
+          refresh();
+          if (problem()) return;
+          onApply(barToBands(bar.get()));
+          close();
+        },
+      });
+      apply.dataset.role = "slope-band-apply";
+      actions.append(apply);
+      const foot = document.createElement("div");
+      foot.className = "d03-plan__row";
+      foot.append(addButton, removeButton, reset);
+      body.append(
+        createText(
+          `칸 사이 = 경계값(아래 칸 끝 = 위 칸 처음 · 아래 포함) · 칸 눌러 고르고 색 · 단계 ${SLOPE_MAX_BANDS}개까지 · 기본 = 15 · 35 · 40°(지식DB)`,
+          "hint",
+        ),
+        bar.root,
+        foot,
+        error,
+      );
+      refresh();
+    },
+  });
+}

A00_Common/map/map_terrain_chip.ts

@@ -0,0 +1,65 @@
+/* =============================================================================
+ * map_terrain_chip.ts
+ * 공용 지도 지형 칩(PLAN 624-2 · 요구 530 · 결정 A④ · A⑤ · D2) — 도구줄 끝 분할 고르기 하나: 수치지형도 · 라이다.
+ *   마우스 글 = 도구줄 표 호버제목(「수치지형도/라이다」 · 634-2) · 확인창은 B05 몫.
+ *   없는 원천 = 막힘 + 「제목 — 까닭」(D03 라이다 = D 프로젝트에 LAS 올린 뒤 · 624-4).
+ *   화면 칩만 — 바꾸는 일(서버 원천 인자 624-1 · B05 설계 지형 바꿈 626-1)은 `onChange` 로 페이지가 붙임.
+ *   쓰는 법 = `createTerrainChip({ page: "d03", value: "sheet", have: ["sheet"] })` → `{ root, set, setHave }` · root 를 도구줄 `terrain` 칸에.
+ * ========================================================================== */
+
+import { createSegment } from "@ui/ui_template_segment";
+import type { MapPage } from "./map_layer_list";
+import { mapToolTitle } from "./map_toolbar";
+
+/** 서버 겹 길 `terrain=` 값과 같음(624-1 · 빈 값 = 설계 지형). */
+export type TerrainSource = "sheet" | "lidar";
+
+export const TERRAIN_NAMES: Record<TerrainSource, string> = {
+  sheet: "수치지형도",
+  lidar: "라이다",
+};
+
+/** 막힘 까닭(마우스 글 = 「수치지형도/라이다 — 까닭」 · 요구 546). */
+const MISSING: Record<TerrainSource, string> = {
+  sheet: "이 프로젝트 범위에 도엽 지형 없음",
+  lidar: "올린 LAS 없음",
+};
+const TITLE = mapToolTitle("terrain");
+
+export interface TerrainChip {
+  root: HTMLElement;
+  /** 고름을 바꿈(onChange 는 안 부름). */
+  set: (value: TerrainSource) => void;
+  /** 고를 수 있는 원천 — 없는 것은 막힘. */
+  setHave: (have: readonly TerrainSource[]) => void;
+}
+
+export function createTerrainChip(opts: {
+  page: MapPage;
+  value: TerrainSource;
+  have: readonly TerrainSource[];
+  onChange?: (value: TerrainSource) => void;
+}): TerrainChip {
+  const sources = Object.keys(TERRAIN_NAMES) as TerrainSource[];
+  const segment = createSegment({
+    options: sources.map((value) => ({ value, label: TERRAIN_NAMES[value] })),
+    value: opts.value,
+    size: 32,
+    ariaLabel: TITLE,
+    onChange: (value) => opts.onChange?.(value as TerrainSource),
+  });
+  const root = segment.root;
+  root.dataset.act = "terrain";
+  root.title = TITLE;
+  const setHave = (have: readonly TerrainSource[]): void => {
+    for (const value of sources) {
+      const item = root.querySelector<HTMLButtonElement>(`[data-value="${value}"]`)!;
+      item.disabled = !have.includes(value);
+      // 열림 = 글 없음(칩 글 「수치지형도/라이다」 그대로) · 막힘 = 「제목 — 까닭」
+      if (item.disabled) item.title = `${TITLE} — ${TERRAIN_NAMES[value]} ${MISSING[value]}`;
+      else item.removeAttribute("title");
+    }
+  };
+  setHave(opts.have);
+  return { root, set: (value) => segment.set(value), setHave };
+}

A00_Common/map/map_toolbar.ts

@@ -0,0 +1,95 @@
+/* =============================================================================
+ * map_toolbar.ts
+ * 공용 지도 도구줄 표(PLAN 624-2 · 634-2 · 요구 530 · 546) — 예정노선(D03) · B05 평면이 같이 씀.
+ *   한 줄 = 요구 546 그룹2 표 한 줄 — 열쇠(`ui_template_map_tools` 단추 이름 · 아이콘) · 호버제목(`title`) · 할 일 · 보일 페이지.
+ *   묶음 = 나눔선 · 차례 = 도구줄 차례 · 단추 아닌 칸(간격 고르기 · 추천 노선 보기 · 지형 칩)은 페이지가 만든 요소.
+ *   마우스 글 = 이 표 `title` 하나(페이지 덮어쓰기 없음) · 막힘이면 페이지가 `mapToolTip(단추, 까닭)` → 「제목 — 까닭」.
+ *   누름 동작은 페이지 몫 — 만든 요소를 `parts` 로 넘기면 그 자리에 · 안 넘긴 단추는 기본 단추(돌리기 둘 = 공용 돌림이 `data-act` 로 찾음).
+ *   [?] 도움말 단추 = `createMapTools` 의 `hint`(맨 앞 · 글 = 이 표 첫 줄).
+ *   쓰는 법 = `createMapTools({ label, hint, groups: mapToolGroups("d03", { undo: undoButton, terrain: chip.root }) })`.
+ * ========================================================================== */
+
+import { mapToolButton, mapToolTip, type MapToolAct } from "@ui/ui_template_map_tools";
+import type { MapPage } from "./map_layer_list";
+
+export type MapToolKey = MapToolAct | "hint-toggle" | "recommend" | "terrain";
+
+export interface MapToolRow {
+  key: MapToolKey;
+  /** 호버제목(요구 546 표). */
+  title: string;
+  does: string;
+  pages: readonly MapPage[];
+}
+
+const BOTH: readonly MapPage[] = ["d03", "b05"];
+const B05: readonly MapPage[] = ["b05"];
+
+export const MAP_TOOLBAR: readonly (readonly MapToolRow[])[] = [
+  [{ key: "hint-toggle", title: "도움말", does: "조작 도움말 펼치기 · 접기(`hint`)", pages: BOTH }],
+  [
+    { key: "undo", title: "되돌리기", does: "편집 한 걸음 되돌림(Ctrl+Z)", pages: BOTH },
+    { key: "redo", title: "다시하기", does: "되돌린 걸음 다시(Ctrl+Y)", pages: BOTH },
+  ],
+  [
+    { key: "view3d", title: "3D", does: "3D 큰 창(동작 = 페이지 몫)", pages: BOTH },
+    { key: "rotate-ccw", title: "좌 회전", does: "지도 반시계로 돌림(Ctrl+휠도)", pages: BOTH },
+    { key: "rotate-cw", title: "우 회전", does: "지도 시계로 돌림", pages: BOTH },
+  ],
+  [
+    {
+      key: "contour-minor",
+      title: "등고선 1m",
+      does: "라이다 1 m 등고선 켬끔(라이다일 때만 열림)",
+      pages: B05,
+    },
+    { key: "stations", title: "측점", does: "측점 눈금 · 번호 켬끔", pages: BOTH },
+    { key: "slopes", title: "길이·기울기", does: "구간 길이 · 기울기 글 켬끔", pages: BOTH },
+    { key: "footprint", title: "절성토선", does: "도로 끝 · 비탈 끝 켬끔", pages: B05 },
+    { key: "measure", title: "길이측정", does: "거리 재기(동작 = 페이지 몫 · A⑩)", pages: BOTH },
+  ],
+  [
+    {
+      key: "station-snap",
+      title: "스냅",
+      does: "곡선 가운데(MC)를 간격 배수에 맞춤 · 고르기 메뉴 하나(측점 No. · 10 m · 끔 · 589-4)",
+      pages: B05,
+    },
+  ],
+  [
+    {
+      key: "recommend",
+      title: "추천노선",
+      does: "B05 = 노선 추천 저장본 선 여럿 고르기(색 구분) · 예정노선 = 가이드 선(지점 잇기 · 636-2)",
+      pages: BOTH,
+    },
+  ],
+  [{ key: "terrain", title: "수치지형도/라이다", does: "지형 원천 보기 · 고르기", pages: BOTH }],
+];
+
+const ROWS = MAP_TOOLBAR.flat();
+
+/** 표 호버제목 — 페이지 칸(지형 칩 막힘 글 등)이 씀. */
+export const mapToolTitle = (key: MapToolKey): string =>
+  ROWS.find((row) => row.key === key)?.title ?? key;
+
+const isAct = (key: MapToolKey): key is MapToolAct =>
+  key !== "hint-toggle" && key !== "station-snap" && key !== "recommend" && key !== "terrain";
+
+/** 그 페이지 도구줄 묶음 — 넘긴 요소 · 기본 단추(단추 열쇠만) · 마우스 글 = 표 · 빈 묶음 뺌. */
+export function mapToolGroups(
+  page: MapPage,
+  parts: Partial<Record<MapToolKey, HTMLElement>> = {},
+): HTMLElement[][] {
+  return MAP_TOOLBAR.map((group) =>
+    group
+      .filter((row) => row.pages.includes(page))
+      .flatMap((row): HTMLElement[] => {
+        const made = parts[row.key] ?? (isAct(row.key) ? mapToolButton(row.key) : null);
+        if (!made) return [];
+        made.dataset.tip = row.title;
+        mapToolTip(made);
+        return [made];
+      }),
+  ).filter((group) => group.length);
+}

A00_Common/master_unit_swap.ts

@@ -0,0 +1,133 @@
+/* =============================================================================
+ * master_unit_swap.ts
+ * SK 단위 바꿈 환산(728-1) — 짝(①): `resources/master_data/scripts/master_unit.py` `swap` · `split`.
+ * 거울 시험 `resources/tester/test_728_1_unit_swap.py`. 단위 표 · 별칭 · 분모 읽기는 그 모듈 그대로 옮김
+ * (한 벌 — 고칠 때 두 파일 함께). 화면 · fetch · 저장 없음.
+ * ========================================================================== */
+
+const ALIAS: Record<string, string> = {
+  ea: "개",
+  ton: "톤",
+  t: "톤",
+  l: "ℓ",
+  리터: "ℓ",
+  set: "조",
+  세트: "조",
+  hr: "시간",
+};
+const UNITS: Record<string, Record<string, number>> = {
+  무게: { g: 1, kg: 1000, 톤: 1000000 },
+  길이: { mm: 1, cm: 10, m: 1000, km: 1000000 },
+  넓이: { cm2: 1, m2: 10000 },
+  부피: { cm3: 1, ℓ: 1000, m3: 1000000 },
+  개수: { 개: 1, 본: 1, 매: 1, 개소: 1 },
+};
+const SCALE: Record<string, [string, number]> = {};
+for (const [kind, group] of Object.entries(UNITS)) {
+  for (const [u, n] of Object.entries(group)) SCALE[u] = [kind, n];
+}
+const WEIGHT_TABLE = "CC000337";
+const PER = /원\s*\/\s*(\d[\d,]*\.?\d*|\.\d+)?\s*([^\s·(\d,.][^\s·(]*)/;
+
+export type UnitNeed = null | "단위중량" | "사용자";
+export interface UnitSwap {
+  가: [number, string];
+  나: [number, string];
+  성격: [string | null, string | null];
+  /** have 1 개가 want 몇 개 — 1 단위 당 값은 ÷배 · 수량은 ×배 · 계수 없으면 null(셈 막음) */
+  배: number | null;
+  계수: UnitNeed;
+  근거: string;
+}
+
+export function plainUnit(unit: unknown): string {
+  const s = String(unit ?? "")
+    .normalize("NFKC")
+    .toLowerCase()
+    .replace(/\s+/g, "")
+    .replace(/ℓ/g, "l");
+  return ALIAS[s] ?? s;
+}
+
+export function unitKind(unit: unknown): string | null {
+  return SCALE[plainUnit(unit)]?.[0] ?? null;
+}
+
+function sameKind(a: unknown, b: unknown): boolean {
+  const k = unitKind(a);
+  return plainUnit(a) === plainUnit(b) || (k !== null && k === unitKind(b));
+}
+
+function weighs(a: unknown, b: unknown): boolean {
+  const ks = new Set([unitKind(a), unitKind(b)]);
+  return ks.size === 2 && ks.has("무게") && ks.has("부피");
+}
+
+/** `have` 1 단위가 `want` 몇 단위 — 부피 ↔ 무게는 단위중량(㎏/㎥) 있을 때만 · 못 하면 null */
+function factor(have: string, want: string, density?: number | null): number | null {
+  const a = plainUnit(have);
+  const b = plainUnit(want);
+  if (a === b) return 1;
+  if (sameKind(a, b)) return SCALE[a][1] / SCALE[b][1];
+  if (density && weighs(a, b)) {
+    const gramsPerCm3 = density / 1000;
+    const base = SCALE[a][1] * (unitKind(a) === "부피" ? gramsPerCm3 : 1 / gramsPerCm3);
+    return base / SCALE[b][1];
+  }
+  return null;
+}
+
+/** 열두 자리로 다듬음 — 파이썬 Decimal 셈과 같은 값(뜬수 끝 흔들림 없앰) */
+function tidy(x: number): number {
+  return Number(x.toPrecision(12));
+}
+
+function num(x: number): string {
+  return Number.isInteger(x) ? String(x) : String(x).slice(0, 10);
+}
+
+/** 기준단위 앞 수 떼기 — 「100본」 → [100, 본] · 「㎥」 → [1, ㎥] */
+export function splitUnit(unit: unknown): [number, string] {
+  const text = String(unit ?? "").trim();
+  const got = text ? PER.exec(`원/${text}`) : null;
+  if (!got) return [1, text];
+  return [got[1] ? Number(got[1].replace(/,/g, "")) : 1, got[2]];
+}
+
+/** SK 단위 `have` → `want` 환산 — 같은 성격 = 배 자동 · 부피 ↔ 무게 = 단위중량 · 그 밖 = 사용자 계수
+ *  (have 앞 수 뗀 1 단위 = want 앞 수 뗀 몇 단위 · 0 보다 커야). */
+export function swapUnit(
+  have: string,
+  want: string,
+  density?: number | null,
+  coef?: number | null,
+): UnitSwap {
+  const [na, ua] = splitUnit(have);
+  const [nb, ub] = splitUnit(want);
+  const base = { 가: [na, ua], 나: [nb, ub], 성격: [unitKind(ua), unitKind(ub)] } as Pick<
+    UnitSwap,
+    "가" | "나" | "성격"
+  >;
+  if (!ua || !ub) return { ...base, 배: 1, 계수: null, 근거: "" };
+  const need: UnitNeed = sameKind(ua, ub) ? null : weighs(ua, ub) ? "단위중량" : "사용자";
+  const f = need === "사용자" ? (coef && coef > 0 ? coef : null) : factor(ua, ub, density);
+  if (f === null) {
+    const why =
+      need === "단위중량"
+        ? `단위중량(${WEIGHT_TABLE}) 골라야 셈`
+        : "성격 다름 · 환산 계수 넣어야 셈";
+    return { ...base, 배: null, 계수: need, 근거: `${have} ↔ ${want} — ${why}` };
+  }
+  const ratio = tidy((na * f) / nb);
+  const how =
+    need === "단위중량"
+      ? ` · 단위중량 ${density}㎏/㎥`
+      : need === "사용자"
+        ? ` · 계수 1 ${ua} = ${coef} ${ub}`
+        : "";
+  let step = "";
+  if (ratio === 1) step = plainUnit(have) === plainUnit(want) ? "" : `${have} = ${want}`;
+  else
+    step = `${have} 당 → ${want} 당 ${ratio > 1 ? `÷${num(ratio)}` : `×${num(tidy(1 / ratio))}`}`;
+  return { ...base, 배: ratio, 계수: need, 근거: step + how };
+}

A00_Common/spreadsheet/spreadsheet.ts

@@ -72,6 +72,9 @@ export interface SpreadsheetOptions {
   conditions?: ConditionOptions;
   /** 그림 열쇠 → 주소(요구 347-5 · 시트 `그림`) — 없으면 이름 적힌 빈 상자 */
   figureSrc?: FigureSrc;
+  /** 칸 칠(요구 621-5) — 시트 id · 행 · 열(0 부터) → 꼴 이름 `success|warning|info|danger|muted`(흐림) + `mine`(왼쪽 띠) ·
+   * 공백으로 여럿 · 칸 `data-tone` 으로 나감 · 보이는 칸만 부름 · 안 주면 화면 그대로 */
+  칠?: (시트: string, r: number, c: number) => string | null | undefined;
 }
 
 export interface SpreadsheetHandle {
@@ -93,6 +96,8 @@ export interface SpreadsheetHandle {
   /** HTML 표를 지금 시트 고른 칸(왼위)부터 붙임(105-1 도면 → 면적) — 붙여넣기와 같은 길(병합 · 되돌리기 한 번) ·
    * `check` = 덮을 자리의 값 칸 · 알약 칸 수 · 범위 → false 면 안 붙임 · 붙인 범위 A1 · 읽기만 · 못 하면 null */
   pasteTable(html: string, check?: PasteCheck): Promise<string | null>;
+  /** 보이는 칸만 다시 그림(`칠` 결과가 바뀐 뒤) — 문서는 안 읽음 */
+  repaint(): void;
   /** 범위 고름 · 보이게 굴림(329-2 엑셀 보기 창) — `시트` = id 나 이름(없으면 지금 시트 · 다르면 그 탭으로) ·
    * 범위 여럿 = 여러 고름 · 시트가 없거나 주소가 틀리면 false(고름 그대로) */
   select(범위: string | string[], 시트?: string): boolean;
@@ -138,6 +143,7 @@ export function createSpreadsheet(
     root,
     book,
     readOnly,
+    fill: opts.칠,
     engine: createCalcEngine(book),
     history: createHistory(),
     selection: selectCell(firstSheet(book), 0, 0),
@@ -225,10 +231,10 @@ export function createSpreadsheet(
   }
 
   function dispatch(command: Command): void {
-    if (readOnly) return;
+    if (readOnly && command.종류 !== "열폭") return; // 읽기 전용도 열 폭은 바꿈(보기만 · 저장 · 되돌리기 없음)
     const eff = apply(command);
     if (!eff) return;
-    ctx.history.push(command, eff.undo);
+    if (!readOnly) ctx.history.push(command, eff.undo);
     after(command, eff);
   }
 
@@ -252,7 +258,7 @@ export function createSpreadsheet(
       else grid.render();
     }
     select(ctx.selection, false, true); // 명령이 바꾼 뒤 — 알약 점 등 문서 종속 부품도 다시(81-2)
-    opts.onChange?.(structuredClone(ctx.book));
+    if (!readOnly) opts.onChange?.(structuredClone(ctx.book));
   }
 
   /** 칸 명령이 건드린 칸(서식만 바뀐 칸도 다시 그리게) */
@@ -369,6 +375,7 @@ export function createSpreadsheet(
       return 이름;
     },
     pasteTable: (html, check) => pasteTableAt(ctx, html, check),
+    repaint: () => grid.render(),
     select(range, sheetKey) {
       const target = sheetKey
         ? ctx.book.시트.find((s) => s.id === sheetKey || s.이름 === sheetKey)

A00_Common/spreadsheet/spreadsheet_autofit.ts

@@ -13,7 +13,8 @@
  * · 확대 · 축소 — 값 자체를 저장하지 않는 화면 전용 CSS 배율(C 격자 뿌리에 transform) · 계약 밖.
  * ========================================================================== */
 
-import type { Workbook } from "./spreadsheet_types";
+import { colIndex, colName, parseRange } from "./spreadsheet_address";
+import type { Sheet, Workbook } from "./spreadsheet_types";
 import type { SpreadsheetContext } from "./spreadsheet_view_types";
 
 export type TextMeasurer = (text: string) => number;
@@ -30,13 +31,27 @@ const defaultMeasure: TextMeasurer = (text) => {
 
 const colFromKey = (key: string): number => {
   const m = /^([A-Z]+)\d+$/.exec(key);
-  if (!m) return -1;
-  let col = 0;
-  for (const ch of m[1]) col = col * 26 + (ch.charCodeAt(0) - 64);
-  return col - 1;
+  return m ? colIndex(m[1]) : -1;
 };
 
-/** 그 열에 든 칸 글자(식 칸은 식 글로 어림 — 계산값은 여기서 모름) 중 가장 넓은 것 + 여백. */
+/** 열마다 가장 넓은 칸 글자 폭(식 칸은 식 글로 어림 — 계산값은 여기서 모름) · 여러 열 병합 칸은 뺌(제목 줄). */
+function widestByColumn(sheet: Sheet, measure: TextMeasurer): Map<number, number> {
+  const wide = new Set<string>();
+  for (const text of sheet.병합 ?? []) {
+    const r = parseRange(text);
+    if (r && r.c1 > r.c0) wide.add(`${colName(r.c0)}${r.r0 + 1}`);
+  }
+  const out = new Map<number, number>();
+  for (const [key, cell] of Object.entries(sheet.칸)) {
+    const text = cell.식 !== undefined ? cell.식 : cell.값 !== undefined ? String(cell.값) : "";
+    const col = colFromKey(key);
+    if (!text || col < 0 || wide.has(key)) continue;
+    out.set(col, Math.max(out.get(col) ?? 0, measure(text)));
+  }
+  return out;
+}
+
+/** 그 열에 든 칸 글자 중 가장 넓은 것 + 여백. */
 export function estimateColumnWidth(
   book: Workbook,
   sheetId: string,
@@ -45,13 +60,19 @@ export function estimateColumnWidth(
 ): number {
   const sheet = book.시트.find((s) => s.id === sheetId);
   if (!sheet) return MIN_WIDTH;
-  let widest = 0;
-  for (const [key, cell] of Object.entries(sheet.칸)) {
-    if (colFromKey(key) !== col) continue;
-    const text = cell.식 !== undefined ? cell.식 : cell.값 !== undefined ? String(cell.값) : "";
-    if (text) widest = Math.max(widest, measure(text));
+  return Math.max(MIN_WIDTH, Math.ceil((widestByColumn(sheet, measure).get(col) ?? 0) + PADDING));
+}
+
+/** 폭 정보 없는 열(엑셀 폭을 못 읽은 파일)에 글 길이로 처음 폭을 채움 — 최소 · 최대 안(읽기 전용 보기). */
+export function fillMissingWidths(book: Workbook, min = 6, max = 60): void {
+  for (const sheet of book.시트) {
+    for (const [col, widest] of widestByColumn(sheet, defaultMeasure)) {
+      const letter = colName(col);
+      if (sheet.열?.[letter]?.폭 !== undefined) continue;
+      const 폭 = Math.min(max, Math.max(min, Math.ceil(widest + PADDING)));
+      sheet.열 = { ...sheet.열, [letter]: { ...sheet.열?.[letter], 폭 } };
+    }
   }
-  return Math.max(MIN_WIDTH, Math.ceil(widest + PADDING));
 }
 
 /** 폭을 자동 맞춤 값으로 바꿈(열넓이 명령 하나). */

A00_Common/spreadsheet/spreadsheet_grid.css

@@ -276,3 +276,40 @@ html[data-touch="on"] .aislo-grid__fill-handle {
     touch-action: pan-x pan-y;
   }
 }
+
+/* 칸 칠(옵션 `칠` · 요구 621-5) — 칸 원래 채움(인라인 background-color) 위에 겹침 · 어두움은 --color-* 가 따라감. */
+.aislo-cell[data-tone~="success"] {
+  background-image: linear-gradient(
+    color-mix(in srgb, var(--color-success) 18%, transparent),
+    color-mix(in srgb, var(--color-success) 18%, transparent)
+  );
+}
+.aislo-cell[data-tone~="warning"] {
+  background-image: linear-gradient(
+    color-mix(in srgb, var(--color-warning) 18%, transparent),
+    color-mix(in srgb, var(--color-warning) 18%, transparent)
+  );
+}
+.aislo-cell[data-tone~="info"] {
+  background-image: linear-gradient(
+    color-mix(in srgb, var(--color-info) 18%, transparent),
+    color-mix(in srgb, var(--color-info) 18%, transparent)
+  );
+}
+.aislo-cell[data-tone~="danger"] {
+  background-image: linear-gradient(
+    color-mix(in srgb, var(--color-danger) 18%, transparent),
+    color-mix(in srgb, var(--color-danger) 18%, transparent)
+  );
+}
+.aislo-cell[data-tone~="muted"] {
+  color: var(--color-text-muted) !important;
+}
+.aislo-cell[data-tone~="mine"] {
+  box-shadow: inset 3px 0 0 var(--color-accent);
+}
+
+/* 읽기만 — 시트 탭 「+」 숨김 */
+.ss--readonly .ss-tabs__add {
+  display: none;
+}

A00_Common/spreadsheet/spreadsheet_grid.ts

@@ -437,6 +437,16 @@ export function createGrid(ctx: SpreadsheetContext): GridHandle {
     };
   }
 
+  /** 굴리는 영역 밖 테두리 자르기(`overlay` 좌표) — 고정 머리 칸 · 모서리 · 스크롤바 위로 안 나가게(요구 566). */
+  function clipOf(b: CellBox, inFrozenCol: boolean, inFrozenRow: boolean): string {
+    const pad = (n: number): number => Math.max(0, Math.ceil(n));
+    const top = inFrozenRow ? 0 : pad(frozenH - b.y);
+    const left = inFrozenCol ? 0 : pad(frozenW - b.x);
+    const bottom = pad(b.y + b.h - (frozenH + paneBR.clientHeight));
+    const right = pad(b.x + b.w - (frozenW + paneBR.clientWidth));
+    return `inset(${top}px ${right}px ${bottom}px ${left}px)`;
+  }
+
   function renderSelection(): void {
     let selLayer = overlay.querySelector<HTMLElement>(".aislo-grid__sel-layer");
     if (!selLayer) {
@@ -470,6 +480,7 @@ export function createGrid(ctx: SpreadsheetContext): GridHandle {
       node.style.height = `${screen.h}px`;
       node.style.borderColor = "var(--aislo-grid-selected)";
       node.style.borderWidth = i === 0 ? "2px" : "1px";
+      node.style.clipPath = clipOf(screen, inFrozenCol, inFrozenRow);
       selLayer!.append(node);
     }
     // 활성 칸 테두리 — 칸 다시 그리기(`renderRowOfCells`) 없이 고름만 바뀌어도 옛 칸에 남지 않게.
@@ -487,6 +498,17 @@ export function createGrid(ctx: SpreadsheetContext): GridHandle {
     handle.className = "aislo-grid__fill-handle";
     handle.style.left = `${corner.x + corner.w - 4}px`;
     handle.style.top = `${corner.y + corner.h - 4}px`;
+    const hx = corner.x + corner.w;
+    const hy = corner.y + corner.h;
+    const hFC = handleAt.c < frozenCols;
+    const hFR = handleAt.r < frozenRows;
+    if (
+      (!hFC && hx < frozenW) ||
+      (!hFR && hy < frozenH) ||
+      hx > frozenW + paneBR.clientWidth ||
+      hy > frozenH + paneBR.clientHeight
+    )
+      handle.style.display = "none";
     selLayer!.append(handle);
   }
 
@@ -525,6 +547,16 @@ export function createGrid(ctx: SpreadsheetContext): GridHandle {
       node.style.width = `${merged.w}px`;
       node.style.height = `${merged.h}px`;
       node.style.borderColor = REF_COLORS[ref.색번호 % REF_COLORS.length];
+      node.style.clipPath = clipOf(
+        {
+          x: parseFloat(node.style.left),
+          y: parseFloat(node.style.top),
+          w: merged.w,
+          h: merged.h,
+        },
+        inFrozenCol,
+        inFrozenRow,
+      );
       refLayer!.append(node);
     }
   }
@@ -540,8 +572,10 @@ export function createGrid(ctx: SpreadsheetContext): GridHandle {
     const contentY =
       y < headRowH() ? -1 : y - headRowH() + (y - headRowH() > frozenH ? paneBR.scrollTop : 0);
     if (y < headRowH()) {
-      const c = colGeo.indexAt(contentX);
-      const edge = Math.abs(colGeo.offset(c + 1) - contentX) <= RESIZE_HOTZONE;
+      const at = colGeo.indexAt(contentX);
+      const after = at > 0 && contentX - colGeo.offset(at) <= RESIZE_HOTZONE; // 경계 오른쪽 반 = 앞 열 경계
+      const c = after ? at - 1 : at;
+      const edge = after || Math.abs(colGeo.offset(c + 1) - contentX) <= RESIZE_HOTZONE;
       return { kind: edge ? "colEdge" : "colHead", r: 0, c };
     }
     if (x < headColW()) {

A00_Common/spreadsheet/spreadsheet_grid_cells.ts

@@ -319,6 +319,9 @@ export function renderCells(
           if (need > w * 0.9) longs.push({ r: r0, c: c0, el: cellEl, own: w, need, align });
         }
       }
+      const tone = ctx.fill?.(sheet.id, r0, c0);
+      if (tone) cellEl.dataset.tone = tone;
+      else delete cellEl.dataset.tone; // 재사용 div — 앞 칸 꼴을 지움
       cellEl.classList.toggle("is-error", display.isError);
       cellEl.classList.toggle("has-comment", !!comment);
       cellEl.classList.toggle(

A00_Common/spreadsheet/spreadsheet_mouse.ts

@@ -233,9 +233,9 @@ export function attachMouse(
   }
 
   function onDbl(e: MouseEvent): void {
-    if (e.target === ed.ta || ctx.readOnly) return;
+    if (e.target === ed.ta) return;
     const hit = ctx.grid.hitTest(e.clientX, e.clientY);
-    if (!hit) return;
+    if (!hit || (ctx.readOnly && hit.kind !== "colEdge")) return; // 읽기 전용 = 열 경계 맞춤만
     if (hit.kind === "fillHandle") return fillDown();
     if (hit.kind === "colEdge") {
       // 고른 열 전체의 경계면 고른 열 모두(엑셀)

A00_Common/spreadsheet/spreadsheet_view_types.ts

@@ -94,6 +94,8 @@ export interface SpreadsheetContext {
   /** 지금 문서 — 명령만이 바꿈(직접 고치지 말 것) */
   book: Workbook;
   readOnly: boolean;
+  /** 칸 칠(옵션 `칠`) — 시트 id · 행 · 열 → 꼴 이름(공백으로 여럿 · 없으면 칠 없음) · 보이는 칸만 부름 */
+  fill?: (시트: string, r: number, c: number) => string | null | undefined;
   engine: CalcEngine;
   history: History;
   selection: Selection;

A05_EduDetail/guide/D01/00_설명서.md

@@ -24,7 +24,7 @@
 2. 시작 연도와 사업 지역을 넣음. [사업 연도 · 지역](D01/02_사업연도_지역) 참고.
 3. 프로젝트명을 확인함. [프로젝트명](D01/03_프로젝트명) 참고.
 4. [등록]을 누름. 문제가 있는 칸은 아래에 빨간 안내가 나옴. [입력 오류와 등록](D01/04_입력오류와_등록) 참고.
-5. 등록되면 바로 다음 화면인 [기준 지정](D02/00_설명서)이 열림.
+5. 등록되면 바로 다음 화면인 [노선 분석](D03/00_설명서)이 열리고 기준점 둘레 1 km 지형을 받음.
 
 > 주의: 등록 직후에는 시점 · 종점이 비어 있음. 두 점을 정하고 저장해야 노선 분석 단계로 갈 수 있음.
 

A05_EduDetail/guide/D01/01_새_프로젝트_여는_길.md

@@ -23,4 +23,4 @@
 - 카드 넷 = 예정노선 · 임도설계 · 사방설계 · 안정성평가. 사방설계는 「준비 중」 표시가 붙어 눌러도 열리지 않음.
 - 산림청이 아닌 계정은 「예정노선」 카드가 흐리게 보임. 마우스를 올리면 까닭이 말풍선으로 보이고, 눌러도 「예정노선은 산림청(시스템 관리자 · go.kr 메일)만 만들 수 있습니다.」 안내만 나옴.
 
-> 참고: 이미 만든 예정노선은 대시보드 프로젝트 표에 「예정노선」 종류로 나옴. 표의 단계 막대(기준 지정 · 노선 분석 · 확정 · 내보내기)를 누르면 그 단계 화면으로 감.
+> 참고: 이미 만든 예정노선은 대시보드 프로젝트 표에 「예정노선」 종류로 나옴. 표의 단계 막대(노선 분석 · 확정 · 내보내기)를 누르면 그 단계 화면으로 감.

A05_EduDetail/guide/D01/04_입력오류와_등록.md

@@ -12,7 +12,7 @@
 | --- | --- |
 | 1 | 칸을 모두 채운 뒤 [등록]을 누름. |
 | 2 | 문제가 있으면 그 칸 아래에 빨간 안내가 나오고 등록되지 않음. 고친 뒤 다시 [등록]. |
-| 3 | 문제가 없으면 프로젝트가 만들어지고 「프로젝트를 만들었습니다.」 알림과 함께 [기준 지정](D02/00_설명서) 화면이 열림. |
+| 3 | 문제가 없으면 프로젝트가 만들어지고 「프로젝트를 만들었습니다.」 알림과 함께 [노선 분석](D03/00_설명서) 화면이 열림. |
 | 4 | 등록하지 않고 나가려면 [취소]를 누름. 대시보드로 돌아감. |
 
 ![입력 오류 안내](D01_04_errors.webp)

A05_EduDetail/guide/D01/10_칸_뜻.md

@@ -17,7 +17,7 @@
 | 사업 연도 끝 | [노선 분석](D03/00_설명서)에서 구역마다 연도를 고르고 [저장]하면 가장 늦은 연도로 정해짐 |
 | 임도 종류 · 설계속도 | 받지 않음. [확정 · 내보내기](D04/00_설명서) 뒤 업체가 임도 프로젝트로 연결하면 임도설계 기본값(작업임도 · 20 km/h)으로 시작하고, 임도 프로젝트에서 바꿈 |
 | 노선 시작 · 종료 측점 | 받지 않음. 측점은 선마다 No.0 부터 새로 셈 |
-| 시점 · 종점 | [기준 지정](D02/00_설명서)에서 지도로 정함 |
+| 지점 | [노선 분석](D03/00_설명서) 지도 우클릭 「지점 놓기」 |
 
 ## 프로젝트명 자동 조합
 

A05_EduDetail/guide/D02/00_설명서.md

@@ -1,34 +0,0 @@
-# 기준 지정
-
-예정노선 1단계. 사업 전체의 시점과 종점, 두 점을 지도 위에 정하는 화면. 연도는 나누지 않음.
-
-## 여는 길
-
-- [예정노선 등록](D01/00_설명서)에서 [등록]을 누르면 바로 열림.
-- 대시보드 프로젝트 표에서 예정노선 줄의 단계 막대 「기준 지정」을 눌러도 열림.
-- 이미 만든 예정노선은 어느 단계 화면에서든 ☰ 에서 「기준 지정」을 골라 돌아옴. [단계 이동 메뉴](D02/06_단계_이동_메뉴) 참고.
-- 두 점 저장은 산림청만 할 수 있음. 지정받은 다른 회사는 보기만 가능함.
-
-![화면 한눈에](D02_00_overview.webp)
-
-## 화면 구역
-
-| 번호 | 구역 | 하는 일 |
-| --- | --- | --- |
-| 1 | 「전체 시점 · 종점」 카드 | 시점 · 종점 두 줄. 📍 · 경도 · 위도 칸이 있음 |
-| 2 | [일반] [위성] 단추 | 바탕 지도를 바꿈. 고른 값은 기억됨 |
-| 3 | 지도 | 시점 · 종점 표지와 둘을 잇는 선이 보임. 지도를 눌러 점을 놓고, 표지를 끌어 옮김 |
-| 4 | 단추 줄 | [?] 가이드 · [<] 이전 · [>] 다음 · [저장] |
-
-## 작업 순서
-
-1. 화면이 열리면 시점과 종점 두 줄이 있음. 비어 있는 첫 줄이 놓을 점으로 강조됨. [시점 · 종점 표](D02/01_시점_종점_표) 참고.
-2. 지도에서 시점이 될 자리를 누름. 다음으로 종점 자리를 누름. [지도에서 지점 놓기](D02/02_지도에서_지점_놓기) 참고.
-3. 놓은 뒤 고치려면 표지를 끌어 옮기거나 경도 · 위도 칸에 값을 직접 넣음. [좌표 직접 입력](D02/03_좌표_직접_입력) 참고.
-4. 지형이 헷갈리면 [위성]으로 바꿔 봄. [일반 · 위성 지도](D02/04_일반_위성) 참고.
-5. [저장] 또는 [>]를 누름. [단추와 저장](D02/05_단추와_저장) 참고.
-6. 노선 분석 화면이 열리면 이 두 점 사이를 직접 그어 감. [노선 분석](D03/00_설명서) 참고.
-
-> 주의: 서버에는 [저장]이나 [>]를 눌러 저장하거나, 다른 단계로 옮겨 갈 때 저장되어야 반영됨. 화면 안에서 점을 놓기만 해서는 서버에 남지 않음.
-
-> 참고: 연도는 이 화면에서 나누지 않음. 노선 분석에서 그은 선에 구역을 나누고 구역마다 연도를 고름.

A05_EduDetail/guide/D02/01_시점_종점_표.md

@@ -1,32 +0,0 @@
-# 시점 · 종점 표
-
-왼쪽 패널의 「전체 시점 · 종점」 카드. 점마다 줄 하나로 이름 · 📍 · 경도 · 위도를 보여 줌.
-
-## 여는 길
-
-- 기준 지정 화면 왼쪽 패널 맨 위의 「전체 시점 · 종점」 카드. 제목 오른쪽 ▼ 를 누르면 접고 펼침.
-
-![시점 · 종점 표](D02_01_points_table.webp)
-
-그림 번호 — 1 안내 글 · 2 시점 줄 · 3 📍 단추 · 4 경도 칸 · 5 위도 칸 · 6 저장 좌표계 줄
-
-## 단계
-
-| 단계 | 할 일 |
-| --- | --- |
-| 1 | 두 줄 중 「시점」이 노선 전체의 출발점, 「종점」이 도착점. |
-| 2 | 줄 왼쪽 띠로 지금 놓을 점인지 확인. 📍 를 누른 줄이 강조됨. |
-| 3 | 값을 고치는 방법은 [지도에서 지점 놓기](D02/02_지도에서_지점_놓기) · [좌표 직접 입력](D02/03_좌표_직접_입력) 참고. |
-
-## 보이는 것
-
-| 줄 이름 | 뜻 |
-| --- | --- |
-| 시점 | 노선 전체의 출발점. 노선 분석에서 첫 점을 이 자리에서 시작함 |
-| 종점 | 노선 전체의 도착점. 노선 분석에서 이 점 가까이 가면 선이 종점에 붙음 |
-
-- 표 아래 한 줄 = 저장 상태. 저장 전이면 「아직 저장 안 함」, 저장했으면 「저장 좌표계 EPSG:번호」와 시점의 X · Y(m).
-- 산림청이 아닌 계정은 📍 단추가 안 보이고 칸이 잠겨 있음. 보기만 가능.
-- 옛 프로젝트처럼 두 점이 비어 있어도 연도별 지점이 있었다면 첫 연도 시점과 마지막 연도 종점을 이어 두 점으로 접어 보여 줌.
-
-> 참고: 칸마다 뜻과 규칙은 [칸 뜻](D02/10_칸_뜻)에 있음. 좌표계가 정해지는 방법은 [쓰인 방법과 근거](D02/20_쓰인_방법과_근거) 참고.

A05_EduDetail/guide/D02/02_지도에서_지점_놓기.md

@@ -1,39 +0,0 @@
-# 지도에서 지점 놓기
-
-지도를 눌러 시점 · 종점을 놓고, 놓은 표지를 끌어 옮기는 방법.
-
-## 여는 길
-
-- 기준 지정 화면 가운데 지도와 왼쪽 「전체 시점 · 종점」 카드의 📍 단추.
-
-![시점과 종점을 이은 지도](D02_02_map.webp)
-
-그림 번호 — 1 지도 위 안내 글
-
-## 단계
-
-| 단계 | 할 일 |
-| --- | --- |
-| 1 | 놓을 점을 고름. 화면이 열리면 비어 있는 첫 줄이 자동으로 골라져 강조됨. 다른 줄에 놓으려면 그 줄의 📍 를 누름. |
-| 2 | 지도에서 놓을 자리를 누름. 그 자리에 표지가 놓이고 표의 경도 · 위도가 채워짐. |
-| 3 | 놓고 나면 다음 빈 점이 자동으로 놓을 점이 됨. |
-| 4 | 놓은 뒤 고치려면 표지를 마우스로 끌어 옮김. 표의 값이 따라 바뀜. |
-| 5 | 지도는 빈 곳을 끌어 옮기고 휠로 확대 · 축소함. |
-
-![놓을 지점으로 고른 줄](D02_03_pick_point.webp)
-
-그림 번호 — 1 📍 단추 · 2 강조된 줄(놓을 점)
-
-![점을 고르지 않고 지도를 누른 모습](D02_04_map_toast.webp)
-
-그림 번호 — 1 「지도에 놓을 지점 고르기」 안내
-
-## 보이는 것
-
-- 두 점이 모두 놓이면 둘 사이에 선이 이어짐. 표지 위에는 「시점」 · 「종점」 이름이 붙음.
-- 놓을 점을 고르지 않고 지도를 누르면 「지도에 놓을 지점 고르기」 안내가 나오고 아무것도 놓이지 않음.
-- 점이 하나도 없으면 우리나라 가운데쯤이 먼저 보임. 처음 점을 놓으면 그 점에 맞춰 보이고, 그 뒤로는 사용자가 맞춘 보기(중심 · 확대)를 그대로 둠.
-- 지도는 카카오맵을 씀.
-- 산림청이 아닌 계정은 지도를 눌러도 놓이지 않고 표지도 끌 수 없음. 지도 위 안내 글이 「보기 전용 — 지점은 산림청만 고칩니다.」로 바뀜.
-
-> 주의: 놓은 점은 [저장]이나 [>]를 누르거나 다른 단계로 옮겨 가기 전까지 서버에 남지 않음. [단추와 저장](D02/05_단추와_저장) 참고.

A05_EduDetail/guide/D02/03_좌표_직접_입력.md

@@ -1,28 +0,0 @@
-# 좌표 직접 입력
-
-다른 프로그램에서 구한 좌표를 표의 경도 · 위도 칸에 직접 넣는 방법.
-
-## 여는 길
-
-- 왼쪽 「전체 시점 · 종점」 카드의 줄마다 있는 경도 · 위도 두 칸.
-
-## 단계
-
-| 단계 | 할 일 |
-| --- | --- |
-| 1 | 고칠 줄의 경도 칸에 값을 넣음. |
-| 2 | 위도 칸에도 값을 넣고 칸 밖을 누르거나 Tab 키를 누름. |
-| 3 | 두 값이 범위 안이면 점이 옮겨지고 지도 표지가 따라 움직임. |
-| 4 | 범위 밖이면 두 칸이 빨갛게 표시되고 반영되지 않음. 값을 고쳐 다시 넣음. |
-
-![범위 밖 값 안내](D02_05_coordinate_error.webp)
-
-그림 번호 — 1 경도 칸(범위 밖 값 200을 넣은 모습) · 2 위도 칸
-
-## 보이는 것
-
-- 경도는 120 ~ 135, 위도는 30 ~ 45 범위만 받음.
-- 두 칸이 모두 범위 안일 때 반영됨. 한 칸만 넣으면 반영되지 않음.
-- 반영될 때 소수 7 자리(약 1 cm)로 반올림됨.
-
-> 주의: 좌표는 경도 · 위도(WGS84)로 넣음. 평면좌표(X · Y)를 그대로 넣으면 범위 밖으로 처리됨.

A05_EduDetail/guide/D02/04_일반_위성.md

@@ -1,27 +0,0 @@
-# 일반 · 위성 지도
-
-지도 오른쪽 위 [일반] [위성] 단추로 바탕 지도를 바꾸는 방법.
-
-## 여는 길
-
-- 기준 지정 화면 지도 오른쪽 위 두 칸짜리 단추.
-
-![일반 · 위성 단추](D02_08_map_type.webp)
-
-그림 번호 — 1 [일반] [위성] 단추(위성을 고른 모습)
-
-## 단계
-
-| 단계 | 할 일 |
-| --- | --- |
-| 1 | [위성]을 누르면 위성 사진 위에 지명이 겹쳐 보이는 지도로 바뀜. |
-| 2 | 도로 · 하천 이름을 보고 싶으면 [일반]을 누름. |
-| 3 | 바꿔도 놓은 점 · 선은 그대로 있음. |
-
-## 보이는 것
-
-- 고른 값은 이 컴퓨터의 화면 취향으로 기억되어, 다음에 열어도 같은 지도로 열림.
-- 두 지도 모두 카카오맵이며, 위성은 지명이 함께 나오는 종류임.
-- 바탕 지도는 점을 놓는 데 도움을 주는 용도이며 저장되는 값과는 상관 없음.
-
-> 참고: 노선 분석 화면의 바탕은 이 지도가 아니라 받은 위성 사진과 등고선임. [노선 분석](D03/00_설명서) 참고.

A05_EduDetail/guide/D02/05_단추와_저장.md

@@ -1,31 +0,0 @@
-# 단추와 저장
-
-왼쪽 패널 맨 아래 단추 줄 — [?] · [<] · [>] · [저장]과 저장 때 일어나는 일.
-
-## 여는 길
-
-- 기준 지정 화면 왼쪽 패널 맨 아래.
-
-![단추 줄](D02_06_buttons.webp)
-
-그림 번호 — 1 [?] 가이드 · 2 [<] 이전 단계(첫 단계라 흐림) · 3 [>] 다음 단계 · 4 [저장]
-
-## 단계
-
-| 단계 | 할 일 |
-| --- | --- |
-| 1 | 시점과 종점을 모두 채움. |
-| 2 | [저장]을 누름. 두 점이 서버에 저장되고 「지점을 저장했습니다.」 알림이 뜸. |
-| 3 | 바로 다음 단계로 가려면 [>]를 누름. 바뀐 것이 있으면 저장한 뒤 [노선 분석](D03/00_설명서) 화면이 열림. |
-| 4 | 저장하지 못하면(예: 점이 비어 있음) 이 화면에 머묾. |
-
-## 보이는 것
-
-- 저장하면 표 아래 한 줄이 「저장 좌표계 EPSG:번호」와 시점의 X · Y(m)로 바뀜.
-- 다른 단계로 옮길 때(단계 아이콘 · [<] · [>] · 머리 ☰ 메뉴 · 브라우저 뒤로) 고친 것이 있으면 묻지 않고 저장한 뒤 옮겨 감. 저장이 실패하면 옮기지 않고 머묾.
-- 산림청이 아닌 계정은 [저장]이 안 보이고, [>]는 저장 없이 그냥 다음 화면으로 감.
-- 이미 노선 분석에서 그은 선은 두 점을 옮겨 저장해도 지우지 않음.
-
-> 주의: 두 점의 평균 경도가 126° 나 128° 선을 넘게 옮기면 저장 좌표계가 바뀜. 자세한 내용은 [쓰인 방법과 근거](D02/20_쓰인_방법과_근거) 참고.
-
-> 참고: 연도 범위는 이 화면에서 다루지 않음. 노선 분석에서 구역마다 연도를 고름.

A05_EduDetail/guide/D02/06_단계_이동_메뉴.md

@@ -1,27 +0,0 @@
-# 단계 이동 메뉴
-
-☰ 로 진행 단계를 열어 대시보드나 다른 단계 화면으로 옮겨 가는 방법.
-
-## 여는 길
-
-- 화면 왼쪽 위의 ☰ 를 누름.
-
-![진행 단계 메뉴](D02_07_steps_menu.webp)
-
-그림 번호 — 1 진행 단계 목록(대시보드 · 기준 지정 · 노선 분석 · 확정 · 내보내기)
-
-## 단계
-
-| 단계 | 할 일 |
-| --- | --- |
-| 1 | ☰ 를 누르면 왼쪽에 메뉴가 열림. |
-| 2 | 가야 할 단계를 누름. 지금 단계는 강조되어 있음. |
-| 3 | 메뉴 밖 어두운 곳을 누르면 닫힘. |
-
-## 보이는 것
-
-- 맨 위 「대시보드」 = 프로젝트 목록 화면으로 돌아감.
-- 단계는 기준 지정 → 노선 분석 → 확정 · 내보내기 순.
-- 메뉴 아래에는 홈페이지 바로가기 · 언어 · 테마 · 로그아웃이 같이 있음.
-
-> 참고: 기준 지정에서 점을 고친 채 메뉴로 다른 단계에 가도 묻지 않고 저장한 뒤 옮겨 감. 저장이 실패하면 이 화면에 머묾.

A05_EduDetail/guide/D02/10_칸_뜻.md

@@ -1,30 +0,0 @@
-# 칸 뜻
-
-![시점 · 종점 표](D02_01_points_table.webp)
-
-그림 번호는 [시점 · 종점 표](D02/01_시점_종점_표)와 같음.
-
-## 왼쪽 「전체 시점 · 종점」 카드
-| 칸 | 뜻 | 규칙 |
-| --- | --- | --- |
-| 이름 | 「시점」 · 「종점」 | 고정. 줄은 두 개뿐 |
-| 📍 | 지도 누름이 놓을 점으로 고름 | 고른 줄이 강조됨 |
-| 경도 | 동서 위치(도) | 120 ~ 135 · 소수 가능 |
-| 위도 | 남북 위치(도) | 30 ~ 45 · 소수 가능 |
-
-- 경도 · 위도 중 하나만 넣으면 반영되지 않음. 두 칸이 모두 범위 안일 때 반영됨.
-- 반영될 때 소수 7 자리(약 1 cm)로 반올림됨.
-- 범위 밖 값은 두 칸이 모두 빨갛게 표시되고 반영되지 않음.
-
-## 지도 위
-- 표지 하나 = 점 하나. 마우스로 끌어 옮길 수 있음.
-- 시점과 종점이 모두 놓이면 둘을 잇는 선 하나가 보임. 노선 분석에서 그을 실제 선이 아니라 두 점 사이를 보여 주는 참고선임.
-- 점이 하나도 없으면 우리나라 가운데쯤이 먼저 보임. 점을 놓으면 처음 한 번만 그 점에 맞춰 보이고, 그 뒤로는 사용자가 맞춘 보기(중심 · 확대)를 그대로 둠.
-- 지도 위 안내문 = 「지도를 눌러 지점을 놓습니다.」
-- 오른쪽 위 [일반] [위성] = 바탕 지도 바꿈. [일반 · 위성 지도](D02/04_일반_위성) 참고.
-
-## 표 아래 한 줄
-| 표시 | 뜻 |
-| --- | --- |
-| 아직 저장 안 함 | 서버에 두 점이 한 번도 저장되지 않음 |
-| 저장 좌표계 EPSG:번호 · X · Y | 저장된 좌표계와 시점의 평면좌표(m, 소수 3 자리) |

A05_EduDetail/guide/D02/20_쓰인_방법과_근거.md

@@ -1,31 +0,0 @@
-# 쓰인 방법과 근거
-
-## 좌표계 처리
-- 사용자가 넣는 값은 모두 경도 · 위도(WGS84)임. 지도(카카오맵)도 이 값으로 그려짐.
-- 저장할 때 서버가 두 점의 **평균 경도**를 보고 한국 평면좌표(TM) 띠 하나를 고른 뒤, 두 점을 그 좌표계의 X(동쪽) · Y(북쪽) 미터 값으로 바꿔 저장함.
-- 노선 분석의 지형 받기 · 선 길이 · 기울기는 이 평면좌표를 씀. 사용자가 변환을 따로 할 필요는 없음.
-
-| 평균 경도 | 좌표계 | 이름 |
-| --- | --- | --- |
-| 126° 미만 | EPSG:5185 | 서부 |
-| 126° 이상 128° 미만 | EPSG:5186 | 중부 |
-| 128° 이상 | EPSG:5187 | 동부 |
-
-- 한 프로젝트는 항상 같은 좌표계 한 벌을 씀.
-- 동해(5188)는 쓰지 않음.
-- 내보내기 때의 좌표계(5179)는 확정 · 내보내기 단계에서 다룸. 이 화면에서는 쓰지 않음.
-
-## 저장 규칙
-- 두 점은 프로젝트 한 칸(`plan_base_json`)에 한꺼번에 저장됨. 연도별로 나누어 저장하지 않음.
-- 저장은 산림청 계정만 가능함(시스템 관리자 또는 `.go.kr` 메일). 그 밖의 계정이 저장하면 「예정노선 지점은 산림청만 고칠 수 있습니다.」로 막힘.
-- 두 점을 옮겨도 이미 그은 선 · 갈래 · 구역은 지우지 않음.
-- 두 점이 비어 있는 옛 예정노선(연도별 지점으로 만든 것)은 첫 연도 시점과 마지막 연도 종점을 이어 두 점으로 보여 줌. 저장하면 이 두 점이 정본이 됨.
-
-## 화면 이동 때 저장
-- 단계 아이콘 · [<] · [>] · 머리 ☰ 메뉴 · 브라우저 뒤로로 화면을 떠날 때 고친 것이 있으면 저장한 뒤 이동함. 저장이 실패하면 이동하지 않고 머묾.
-- 저장하지 않고 고친 값은 같은 브라우저 탭 안에서는 화면을 다시 열어도 남아 있음. 서버에 저장된 값이 그사이 바뀌었으면(노선 분석에서 시점을 고친 경우) 서버 값을 우선함.
-
-## 한계
-- 좌표 입력은 경위도만 받음. 평면좌표(X · Y)를 직접 넣는 칸은 없음.
-- 지도 위 위치는 카카오맵 화면 기준이며, 정밀한 측량 값이 필요하면 좌표 입력으로 넣을 것.
-- 지형 받기와 선 긋기에 관한 설명은 [노선 분석](D03/00_설명서)을 볼 것.

A05_EduDetail/guide/D02/_scenes.json

@@ -1,11 +0,0 @@
-[
-  {"name":"D02_00_overview","route":"#/d02-plan-base","project":"plan","before":[{"wait":".d02-points__row"},{"wait":".ui-kakao-map__box"},{"wait_ms":3500}],"settle_ms":1500,"clip":null,"callouts":[{"n":1,"sel":".d02-points"},{"n":2,"sel":".d02-map__type","pos":"bl"},{"n":3,"sel":".d02-map","pos":"br"},{"n":4,"sel":".ui-sidebar-actions","pos":"tr"}]},
-  {"name":"D02_01_points_table","route":"#/d02-plan-base","project":"plan","before":[{"wait":".d02-points__row"},{"wait":".ui-kakao-map__box"},{"wait_ms":3500}],"settle_ms":1500,"clip":".d02-panel .ui-sidebar-card","callouts":[{"n":1,"sel":".d02-panel p.d02-info:first-of-type"},{"n":2,"sel":".d02-points__row:nth-child(1)","pos":"tr"},{"n":3,"sel":".d02-points__row:nth-child(1) button","pos":"bl"},{"n":4,"sel":".d02-points__row:nth-child(1) input[data-axis=lon]","pos":"br"},{"n":5,"sel":".d02-points__row:nth-child(1) input[data-axis=lat]","pos":"br"},{"n":6,"sel":".d02-points ~ p.d02-info"}]},
-  {"name":"D02_02_map","route":"#/d02-plan-base","project":"plan","before":[{"wait":".d02-points__row"},{"wait":".ui-kakao-map__box"},{"wait_ms":3500}],"settle_ms":1500,"clip":".d02-map","callouts":[{"n":1,"sel":".ui-kakao-map__hint"}]},
-  {"name":"D02_03_pick_point","route":"#/d02-plan-base","project":"plan","before":[{"wait":".d02-points__row"},{"wait":".ui-kakao-map__box"},{"wait_ms":3500},{"click":".d02-points__row:nth-child(2) button"},{"wait":".d02-points__row:nth-child(2).is-active"},{"wait_ms":300}],"settle_ms":1500,"clip":".d02-panel .ui-sidebar-card","callouts":[{"n":1,"sel":".d02-points__row:nth-child(2) button"},{"n":2,"sel":".d02-points__row:nth-child(2)"}]},
-  {"name":"D02_04_map_toast","route":"#/d02-plan-base","project":"plan","before":[{"wait":".d02-points__row"},{"wait":".ui-kakao-map__box"},{"wait_ms":3500},{"click":".ui-kakao-map__box"},{"wait":"[class*=toast]"},{"wait_ms":400}],"settle_ms":1500,"clip":null,"callouts":[{"n":1,"sel":"[class*=toast]","pos":"tr"}]},
-  {"name":"D02_05_coordinate_error","route":"#/d02-plan-base","project":"plan","before":[{"wait":".d02-points__row"},{"wait":".ui-kakao-map__box"},{"wait_ms":3500},{"fill":".d02-points__row:nth-child(1) input[data-axis=lon]","value":"200"},{"press":"Tab","sel":".d02-points__row:nth-child(1) input[data-axis=lon]"},{"wait":".d02-points__row:nth-child(1) input.is-error"},{"wait_ms":300}],"settle_ms":1500,"clip":".d02-panel .ui-sidebar-card","callouts":[{"n":1,"sel":".d02-points__row:nth-child(1) input[data-axis=lon]"},{"n":2,"sel":".d02-points__row:nth-child(1) input[data-axis=lat]"}]},
-  {"name":"D02_06_buttons","route":"#/d02-plan-base","project":"plan","before":[{"wait":".d02-points__row"},{"wait":".ui-kakao-map__box"},{"wait_ms":3500}],"settle_ms":1500,"clip":".ui-sidebar-actions","callouts":[{"n":1,"sel":".ui-sidebar-actions > button:nth-child(1)"},{"n":2,"sel":".ui-sidebar-actions > button:nth-child(2)"},{"n":3,"sel":".ui-sidebar-actions > button:nth-child(3)"},{"n":4,"sel":".ui-sidebar-actions > button:nth-child(4)"}]},
-  {"name":"D02_07_steps_menu","route":"#/d02-plan-base","project":"plan","before":[{"wait":".d02-points__row"},{"click":".app-burger"},{"wait":".app-drawer__steps .ui-workflow-layout__step"},{"wait_ms":700}],"settle_ms":1500,"clip":null,"callouts":[{"n":1,"sel":".app-drawer__steps","pos":"tr"}]},
-  {"name":"D02_08_map_type","route":"#/d02-plan-base","project":"plan","before":[{"wait":".d02-points__row"},{"wait":".ui-kakao-map__box"},{"wait_ms":3500},{"click":".d02-map__type button:nth-child(2)"},{"wait_ms":3500}],"settle_ms":1500,"clip":".d02-map__type","callouts":[{"n":1,"sel":".d02-map__type","pos":"bl"}],"clip_pad":240}
-]

A05_EduDetail/guide/D03/00_설명서.md

@@ -4,9 +4,9 @@
 
 ## 여는 길
 
-- [기준 지정](D02/00_설명서) 화면에서 [>]를 누르면 두 점을 저장하고 이 화면이 열림.
+- [예정노선 등록](D01/00_설명서)에서 [등록]을 누르면 이 화면이 열림(옛 기준 지정 단계는 걷힘).
 - 대시보드 프로젝트 표의 단계 막대 「노선 분석」을 누르거나, ☰ 에서 「노선 분석」을 골라도 열림.
-- 시점 · 종점이 비어 있으면 「시점 · 종점이 비었습니다 — 1단계(기준 지정)에서 정하세요.」 안내만 나오고 진행이 안 됨.
+- 지점은 지도 우클릭 「지점 놓기」로 놓음 · 핀을 끌면 그 자리 노선 점도 같이 옮김 · 지점 없이 긋기 = 우클릭 「여기서 긋기 시작」.
 - 긋기 · 지형 받기 · 저장은 산림청만 할 수 있음. 그 밖의 계정은 「보기만 — 산림청 계정에서 긋습니다.」로 보기만 가능함.
 
 ![화면 한눈에](D03_00_overview.webp)

A05_EduDetail/guide/D03/01_지형_받기.md

@@ -26,7 +26,7 @@
 
 ## 보이는 것
 
-- 받을 범위 = 기준 지정의 시점 · 종점을 감싸는 상자에 여유를 더한 것. 여유 처음 값은 350 m 이고 300 ~ 5000 m 까지 쓸 수 있음. 이미 받은 범위가 있으면 그것과 합쳐서 받음.
+- 받을 범위 = 처음엔 등록 기준점 둘레 1 km · 그 뒤 지점 · 선 · 지도 보기가 받은 범위 밖으로 가면 조용히 이어 받음(지점 · 선을 감싸는 상자에 여유를 더한 것). 여유 처음 값은 350 m 이고 300 ~ 5000 m 까지 쓸 수 있음. 이미 받은 범위가 있으면 그것과 합쳐서 받음.
 - 요약 한 줄 = 「여유 350 m · 도엽 2매(새로 2) · 지형 칸 약 2.1백만」. 도엽은 수치지형도 조각이며 「새로」는 아직 못 받은 조각 수.
 - 받기에는 수치지형도(도엽)와 위성 사진이 들어 있음. 위성 사진을 못 받아도 받기가 멈추지 않음. 위성이 없으면 어두운 바탕에 시점 · 종점과 선만 보임.
 - 지형 받기는 서버 뒤에서 도는 일이라, 화면을 닫았다 다시 열어도 도는 중이면 이어서 진행률을 보여 줌.

A05_EduDetail/guide/D03/02_본선_긋기.md

@@ -14,7 +14,7 @@
 
 | 단계 | 할 일 |
 | --- | --- |
-| 1 | [본선 긋기]를 누름. 단추 글자가 [긋기 끝]으로 바뀌고 선 색이 짙어짐. 처음에는 기준 지정의 시점에서 시작함. |
+| 1 | [본선 긋기]를 누름. 단추 글자가 [긋기 끝]으로 바뀌고 선 색이 짙어짐. 지점 · 선 끝 · 선 위에서 시작함(빈 땅은 우클릭 「여기서 긋기 시작」). |
 | 2 | 마우스를 움직이면 마지막 점에서 마우스까지 점선이 따라오고, 옆에 길이(m)와 기울기(%)가 보임. |
 | 3 | 놓을 자리에서 누름. 그 자리에 점이 찍히고 선이 이어짐. 같은 방법으로 점을 이어 감. |
 | 4 | 종점 가까이 가서 누르면 종점에 붙으며 본선이 끝남. 아래 「보이는 것」 참고. |

A05_EduDetail/guide/D03/08_저장_초기화.md

@@ -8,7 +8,7 @@
 
 ![단추 줄](D03_15_buttons.webp)
 
-그림 번호 — 1 [?] 가이드 · 2 [<] 이전 단계(기준 지정) · 3 [>] 다음 단계(확정 · 내보내기) · 4 [저장] · 5 [초기화]
+그림 번호 — 1 [?] 가이드 · 2 [<] 이전 단계(첫 단계라 흐림) · 3 [>] 다음 단계(확정 · 내보내기) · 4 [저장] · 5 [초기화]
 
 ## 단계
 
@@ -29,7 +29,7 @@
 - 저장하면 구역 연도로 연도별 노선이 만들어지고, 사업 연도 끝은 구역 연도 중 가장 늦은 해가 됨. 서버가 저장된 선으로 다시 셈하므로 화면 값을 그대로 받아 적지 않음.
 - 저장에 실패하면 「저장하지 못했습니다 — 까닭」이 뜨고 그은 것은 그대로 남음. 구역에 업체를 이미 지정했다면 그 구역을 없애는 저장은 막힘.
 - 단계 아이콘 · [<] · [>] · 머리 ☰ 메뉴 · 브라우저 뒤로로 떠날 때도 바뀐 것이 있으면 저장한 뒤 옮겨 감. 저장이 실패하면 이 화면에 머묾.
-- [초기화] 확인 창: 「그은 선 · 갈래 · 구역을 모두 지우고 시점 · 종점만 남깁니다. 저장된 노선도 바뀝니다.」 [초기화]를 누르면 시점 · 종점만 남은 빈 선으로 저장되고 「시점 · 종점만 남겼습니다.」 알림이 뜸. [취소]면 아무것도 바뀌지 않음.
+- [초기화] 확인 창: 「그은 선 · 갈래 · 구역을 모두 지웁니다(지점은 남김). 저장된 노선도 바뀝니다.」 [초기화]를 누르면 지점만 남은 빈 노선으로 저장되고 「선을 지웠습니다(지점은 남김).」 알림이 뜸. [취소]면 아무것도 바뀌지 않음.
 - 산림청이 아닌 계정은 [저장] · [초기화]가 보이지 않음.
 
 > 주의: [초기화]는 서버에 저장된 노선까지 비움. 이미 업체를 지정한 구역이 있으면 막힐 수 있음.

A05_EduDetail/guide/D03/20_쓰인_방법과_근거.md

@@ -4,7 +4,7 @@
 
 ## 선을 만드는 방법
 
-- 선은 자동으로 찾지 않고 사용자가 점을 찍어 직선으로 이음. 본선은 기준 지정의 시점에서 시작하고 종점에서 끝나며, 갈래는 기존 선의 점에서 갈라짐.
+- 선은 자동으로 찾지 않고 사용자가 점을 찍어 직선으로 이음. 본선은 지점 · 빈 땅에서 시작하고, 갈래는 기존 선의 점에서 갈라짐.
 - 구역 마크는 선 위 거리(m)로 기록됨. 마크 사이 구간이 구역(조각)이고, 구역마다 연도를 가짐. 구역 이름은 「선 이름 + 측점 범위」임.
 - 측점은 선마다 20 m 간격으로 0+0 부터 셈. 갈래도 0+0 부터 따로 셈.
 - 선의 높이는 저장하지 않고, 필요할 때 받은 지형에서 읽음.

B01_Dashboard/B01_Dashboard_Map.py

@@ -116,6 +116,51 @@ async def search_address(query: str, size: int = 10) -> list[dict[str, Any]]:
     return await asyncio.to_thread(_search_sync, query.strip(), size)
 
 
+def _search_place_sync(query: str, size: int) -> list[dict[str, Any]]:
+    """장소 이름(POI) 찾기(594-4) — {title, road, parcel, lon, lat} · 실패 = 빈 목록."""
+    params = urllib.parse.urlencode(
+        {
+            "service": "search",
+            "request": "search",
+            "version": "2.0",
+            "crs": "EPSG:4326",
+            "size": str(size),
+            "page": "1",
+            "query": query,
+            "type": "place",
+            "format": "json",
+            "errorformat": "json",
+            "key": VWORLD_API_KEY,
+        }
+    )
+    try:
+        body = json.loads(_fetch(f"{_SEARCH_URL}?{params}", timeout=8).decode("utf-8"))
+    except Exception:
+        return []
+    found = []
+    for item in ((body.get("response") or {}).get("result") or {}).get("items") or []:
+        address = item.get("address") or {}
+        point = item.get("point") or {}
+        try:
+            lon, lat = float(point["x"]), float(point["y"])
+        except (KeyError, TypeError, ValueError):
+            continue
+        found.append(
+            {
+                "title": item.get("title") or "",
+                "road": address.get("road") or "",
+                "parcel": address.get("parcel") or "",
+                "lon": lon,
+                "lat": lat,
+            }
+        )
+    return found
+
+
+async def search_place(query: str, size: int = 10) -> list[dict[str, Any]]:
+    return await asyncio.to_thread(_search_place_sync, query.strip(), size)
+
+
 def _address_items(lon: float, lat: float) -> dict[str, dict[str, Any]]:
     """좌표 → VWorld getAddress 결과(종류 road · parcel → 한 칸) · 실패 = 빈 dict."""
     query = urllib.parse.urlencode(

B01_Dashboard/B01_Dashboard_Repository.py

@@ -137,8 +137,8 @@ async def get_workflow_states_for_projects(
     await cursor.execute(
         f"""
         SELECT project_id, stage_no, stage_key, state, progress_percent, params, message,
-               DATE_FORMAT(started_at, '%%Y-%%m-%%dT%%H:%%i:%%s') AS started_at,
-               DATE_FORMAT(completed_at, '%%Y-%%m-%%dT%%H:%%i:%%s') AS completed_at
+               DATE_FORMAT(started_at, '%%Y-%%m-%%dT%%H:%%i:%%sZ') AS started_at,
+               DATE_FORMAT(completed_at, '%%Y-%%m-%%dT%%H:%%i:%%sZ') AS completed_at
         FROM project_workflow_stages
         WHERE project_id IN ({format_strings})
         ORDER BY project_id, stage_no ASC
@@ -505,7 +505,7 @@ async def get_system_resources(days: int = 30) -> dict[str, Any]:
             bucket_seconds = 120
         else:
             bucket_seconds = max(120, (days * 86400) // target_points)
-        date_fmt = "%%Y-%%m-%%dT%%H:%%i:%%s"
+        date_fmt = "%%Y-%%m-%%dT%%H:%%i:%%sZ"
         await cursor.execute(
             f"""SELECT
                  DATE_FORMAT(

B01_Dashboard/B01_Dashboard_Router_Home.py

@@ -1,12 +1,13 @@
 """B01 대시보드 홈 API (PLAN 547) — 프로젝트 카드 요약 · 역할별 홈."""
 
-from datetime import datetime, timedelta
+from datetime import timedelta
 from typing import Any
 
 import aiomysql
 from fastapi import APIRouter, Depends, HTTPException, Query
 
 from common_util.common_util_auth import is_forest_email, verify_session
+from common_util.common_util_time import utc_now_naive, utc_text
 from config.config_db import get_db_pool
 
 from .B01_Dashboard_Repository import get_system_resources
@@ -111,13 +112,13 @@ async def _todos(cursor: Any, session: dict[str, Any], role: str) -> dict[str, A
         (int(session["user_id"]),),
     )
     batches = list(await cursor.fetchall())
-    soon = datetime.now() + timedelta(days=EXPIRE_SOON_DAYS)
+    soon = utc_now_naive() + timedelta(days=EXPIRE_SOON_DAYS)
     todos["expiring_temp"] = [
         {
             "batch_id": str(b["id"]),
             "name": b["name"],
-            "expires_at": b["expires_at"].isoformat(),
-            "days_left": max(0, (b["expires_at"] - datetime.now()).days),
+            "expires_at": utc_text(b["expires_at"]),
+            "days_left": max(0, (b["expires_at"] - utc_now_naive()).days),
         }
         for b in batches
         if b["expires_at"] and b["expires_at"] <= soon
@@ -139,7 +140,8 @@ async def _company(cursor: Any, company_id: int) -> dict[str, Any]:
 
 async def _forest(cursor: Any, company_id: int) -> dict[str, Any]:
     """예정노선 수 — 분석 전 = 노선을 아직 안 그은 프로젝트 · 분석됨 · 확정 = 연도(설계 내용 파일) ·
-    업체 지정 대기 = 확정 연도 중 그 연도 조각에 업체가 하나도 없는 것."""
+    업체 지정 대기 = 확정 연도 중 그 연도 세트에 업체가 하나도 없는 것(업체 줄 = 세트 열쇠 ·
+    옛 조각 id = 든 세트)."""
     from D03_PlanAnalysis import D03_PlanAnalysis_Store as store
 
     await cursor.execute(
@@ -160,11 +162,13 @@ async def _forest(cursor: Any, company_id: int) -> dict[str, Any]:
             continue
         if not state["plan"]["lines"]:
             status["draft"] += 1
+        found = (store.find_unit(state["units"], key) for key in pieces)
+        held = {unit["id"] for unit in found if unit}
         for year, row in state["years"].items():
             key = "confirmed" if row["confirmed_at"] else "analyzed"
             status[key] += 1
-            ids = {p["id"] for p in row["route"]["pieces"]}
-            waiting += bool(row["confirmed_at"] and not ids & pieces)
+            ids = {u["id"] for u in state["units"] if u["year"] == year}
+            waiting += bool(row["confirmed_at"] and not ids & held)
     return {"plan_status": status, "assign_waiting": waiting}
 
 

B01_Dashboard/B01_Dashboard_Router_Overview.py

@@ -14,6 +14,7 @@ import aiomysql
 from fastapi import APIRouter, Depends, HTTPException, Query
 
 from common_util.common_util_auth import verify_session
+from common_util.common_util_time import utc_now_naive
 from config.config_db import get_db_pool
 
 from .B01_Dashboard_Repository import _project_rows
@@ -22,7 +23,7 @@ from .B01_Dashboard_Summary import project_summaries
 router = APIRouter(prefix="/api/dashboard/overview", tags=["B01_Dashboard"])
 
 #: 종류별 단계 수 — 화면 단계 막대(`group_workflow.ts` · `WORKFLOW_STEP_ROUTES`)와 같음
-STAGE_TOTAL = {"ROAD": 7, "PLAN": 3, "STABILITY": 6}
+STAGE_TOTAL = {"ROAD": 7, "PLAN": 2, "STABILITY": 6}
 #: 손대지 않은 날이 이만큼 넘으면 「오래 멈춤」
 STALE_DAYS = 14
 
@@ -64,7 +65,7 @@ def idle_days(updated_at: datetime | None, now: datetime | None = None) -> int |
     """마지막 수정 뒤 지난 날 수."""
     if updated_at is None:
         return None
-    return ((now or datetime.now()) - updated_at).days
+    return ((now or utc_now_naive()) - updated_at).days
 
 
 def is_mine(row: dict[str, Any], user_id: int) -> bool:
@@ -281,7 +282,7 @@ _AUDIT_ACTIONS = ("PROJECT_CREATE", "PROJECT_UPDATE")
 async def _changes(cursor: Any, project_id: str, stages: list[dict[str, Any]]) -> list[dict]:
     """최근 변경 — 감사 기록(만듦 · 정보 고침) + 단계 마친 때 · 새것부터 8 개."""
     await cursor.execute(
-        """SELECT l.action, DATE_FORMAT(l.timestamp, '%%Y-%%m-%%d %%H:%%i:%%s') AS at,
+        """SELECT l.action, DATE_FORMAT(l.timestamp, '%%Y-%%m-%%dT%%H:%%i:%%sZ') AS at,
                   u.name AS who
            FROM system_audit_logs l LEFT JOIN users u ON u.id = l.user_id
            WHERE l.resource_type = 'project' AND l.resource_ref = %s
@@ -292,7 +293,7 @@ async def _changes(cursor: Any, project_id: str, stages: list[dict[str, Any]]) -
     items: list[dict[str, Any]] = [dict(r) for r in await cursor.fetchall()]
     items += [
         {
-            "at": s["completed_at"].replace("T", " "),
+            "at": s["completed_at"],
             "who": None,
             "action": "STAGE_COMPLETE",
             "stage_no": s["stage_no"],

B01_Dashboard/B01_Dashboard_Summary.py

@@ -9,12 +9,12 @@
 from __future__ import annotations
 
 import json
-from datetime import datetime
 from pathlib import Path
 from typing import Any
 
 import aiomysql
 
+from common_util.common_util_time import utc_now_naive, utc_text
 from config.config_db import get_db_pool
 from M02_MasterTemplete.M02_Template_Migrate import project_root
 
@@ -25,7 +25,7 @@ THUMB_POINTS = 100
 # 단계 이름 = 화면 단계 막대 글(ui_template_locale_common · _de) 한국어 · 모르는 종류 = 임도
 STAGE_NAMES: dict[str, tuple[str, ...]] = {
     "ROAD": ("파일입력", "전처리", "노선설계", "횡단설계", "상세설계", "수량산출", "원가계산"),
-    "PLAN": ("기준 지정", "노선 분석", "확정 · 내보내기"),
+    "PLAN": ("예정노선", "확정 · 내보내기"),
     "STABILITY": ("지반 조건", "2D 해석", "3D 해석", "암반 해석", "광역 위험", "보고서"),
 }
 
@@ -125,7 +125,7 @@ async def project_summaries(project_ids: list[str]) -> list[dict[str, Any]]:
             )
             stations = {int(r["route_id"]): int(r["n"]) for r in await cursor.fetchall()}
 
-    now = datetime.now()
+    now = utc_now_naive()
     result = []
     for pid in ids:
         row = rows.get(pid)
@@ -159,7 +159,7 @@ async def project_summaries(project_ids: list[str]) -> list[dict[str, Any]]:
                 "stage_total": len(names),
                 "stage_name": names[index],
                 "done": bool(stages) and all(s["state"] == "COMPLETE" for s in stages),
-                "updated_at": updated.isoformat() if updated else None,
+                "updated_at": utc_text(updated),
                 "stale_days": (now - updated).days if updated else None,
                 "owner_user_id": row.get("user_id"),
                 "owner_names": owners,

B01_Dashboard/B01_Dashboard_UI_Common.ts

@@ -7,6 +7,7 @@ import {
   showToast,
 } from "@ui/ui_template_elements";
 import type { DashboardUser } from "./B01_Dashboard_Api_Fetch";
+import { dateText, timeText } from "../common_util/common_util_time";
 
 /**
  * 목록형 컨테이너가 한 번에 보여 주는 행 수. 넘치는 만큼은 컨테이너 안에서 스크롤한다 —
@@ -36,16 +37,9 @@ export async function runRequest(action: () => Promise<unknown>): Promise<void>
   }
 }
 
-export function formatDate(value?: string | null): string {
-  return value ? value.slice(0, 10) : "-";
-}
-
-/** 시:분 — 표에서 날짜 아래 줄에 붙인다 (2026-09-06 사용자 지시). */
-export function formatTime(value?: string | null): string {
-  if (!value) return "";
-  const time = value.includes("T") ? value.split("T")[1] : value.slice(11);
-  return time ? time.slice(0, 5) : "";
-}
+/** 날짜 · 시:분 — 서버 UTC 를 보는 PC 시간대로(`common_util_time`). 시:분은 표에서 날짜 아래 줄에 붙인다. */
+export const formatDate = (value?: string | null): string => dateText(value);
+export const formatTime = (value?: string | null): string => timeText(value);
 
 /**
  * 위·아래 두 줄짜리 표 칸. 아랫줄은 작은 글씨라 **행 높이는 한 줄일 때와 같다**.

B01_Dashboard/B01_Dashboard_UI_Home_Cards.ts

@@ -9,6 +9,7 @@ import { createButton, el } from "@ui/ui_template_elements";
 import { goToWorkflowStage, WORKFLOW_STEP_ROUTES } from "../A00_Common/b_workflow_nav";
 import { groupFlowOf } from "../A00_Common/group_workflow";
 import type { ProjectSummary } from "./B01_Dashboard_Api_Home";
+import { calendarDaysAgo } from "../common_util/common_util_time";
 import { L } from "./B01_Dashboard_UI_Common";
 import { isStale } from "./logic/B01_Dashboard_Home_Layout";
 
@@ -59,10 +60,10 @@ export const stageText = (card: ProjectSummary): string =>
 
 /** 「n 일째 그대로」 · 오늘 · n 일 전 */
 export function whenText(card: ProjectSummary): string {
-  const days = card.stale_days ?? null;
+  const days = calendarDaysAgo(card.updated_at) ?? card.stale_days ?? null;
   if (days === null) return "";
   if (isStale(card)) return `${days} 일째 그대로`;
-  return days === 0 ? "오늘" : `${days} 일 전`;
+  return days <= 0 ? "오늘" : `${days} 일 전`;
 }
 
 export function continueStage(card: ProjectSummary): void {

B01_Dashboard/B01_Dashboard_UI_ProjectDetail.ts

@@ -28,6 +28,7 @@ import {
   stageProgress,
 } from "./B01_Dashboard_UI_ProjectList_Parts";
 import { openMenuAt, rowMenuItems } from "./B01_Dashboard_UI_ProjectList_Views";
+import { dateText, dateTimeText } from "../common_util/common_util_time";
 
 /** 인쇄 · 내려받기 화면(B09 초안 길) — 도면 PDF · 수량 · 내역 xlsx 를 받는 곳 */
 const PRINT_ROUTE = "b09-print" as RoutePath;
@@ -117,7 +118,7 @@ function infoPane(detail: ProjectDetail): HTMLElement {
     ["시행청", p.client_org],
     ["사업 번호", p.project_number],
     ["담당", people],
-    ["만든 날", (p.created_at ?? "").slice(0, 10)],
+    ["만든 날", dateText(p.created_at, "")],
   ];
   const kv = el("div", { className: "b01-pd-kv" });
   for (const [label, value] of rows) {
@@ -178,7 +179,7 @@ function changeText(change: ProjectChange, detail: ProjectDetail): string {
       : change.action === "PROJECT_CREATE"
         ? "만듦"
         : "정보 고침";
-  return [change.at.slice(0, 16), change.who, what].filter(Boolean).join(" · ");
+  return [dateTimeText(change.at, ""), change.who, what].filter(Boolean).join(" · ");
 }
 
 function changePane(detail: ProjectDetail): HTMLElement | null {

B01_Dashboard/B01_Dashboard_UI_ProjectList_Parts.ts

@@ -9,6 +9,7 @@ import { goToWorkflowStage, WORKFLOW_STEP_ROUTES } from "../A00_Common/b_workflo
 import { groupFlowOf } from "../A00_Common/group_workflow";
 import type { RoutePath } from "@config/config_frontend";
 import type { BoardColumn, OverviewProject } from "./B01_Dashboard_Api_Projects";
+import { agoText } from "../common_util/common_util_time";
 import { L } from "./B01_Dashboard_UI_Common";
 
 /** 종류 — 칩 · 배지 차례 · 사방설계 = 준비 중 */
@@ -121,10 +122,5 @@ export function thumbSvg(points: number[][] | null | undefined): SVGElement {
 
 /** 「오늘」 · 「어제」 · 「n 일 전」 · 그 밖 날짜 */
 export function ago(project: OverviewProject): string {
-  const days = project.idle_days;
-  if (days === null || days === undefined) return "-";
-  if (days <= 0) return "오늘";
-  if (days === 1) return "어제";
-  if (days < 7) return `${days} 일 전`;
-  return (project.updated_at ?? "").slice(0, 10);
+  return agoText(project.updated_at);
 }

B01_Dashboard/B01_Dashboard_UI_ProjectList_Views.ts

@@ -11,6 +11,7 @@ import {
 import { el } from "@ui/ui_template_elements_base";
 import type { DashboardUser } from "./B01_Dashboard_Api_Fetch";
 import type { OverviewProject } from "./B01_Dashboard_Api_Projects";
+import { dateText } from "../common_util/common_util_time";
 import { canDeleteProject, canEditProject } from "./B01_Dashboard_UI_Helper";
 import { openDeleteProjectModal, openEditProjectModal } from "./B01_Dashboard_UI_Modals";
 import {
@@ -148,7 +149,7 @@ export function projectRows(
         }),
         el("td", { text: boardLabel(project.board) }),
         el("td", { text: project.manager_name ?? "-" }),
-        el("td", { text: (project.updated_at ?? "").slice(0, 10) || "-" }),
+        el("td", { text: dateText(project.updated_at) }),
         el("td", { children: [more] }),
       ],
     });

B01_Dashboard/B01_Dashboard_UI_Shell.ts

@@ -12,6 +12,7 @@ import { icon, type IconName } from "@ui/ui_template_icons";
 import { currentLanguageIndex, setLanguage } from "@ui/ui_template_locale";
 import { readTouchMode, setTouchMode, type TouchMode } from "../A00_Common/device_context";
 import { currentQuery, navigateTo, type MountedPage } from "../A00_Common/router";
+import { parseUtcMs } from "../common_util/common_util_time";
 import {
   fetchAllCompanies,
   fetchCompanyJoinRequests,
@@ -216,7 +217,7 @@ async function refreshBadges(ctx: ViewCtx, nav: DashboardNav, bell: HTMLElement)
   const newPlans = plans.filter((p) => !p.linked_project_id || p.update_available).length;
   const now = Date.now();
   const expiring = temp.filter(
-    (b) => b.expires_at && Date.parse(b.expires_at) - now < EXPIRE_SOON_MS,
+    (b) => b.expires_at && (parseUtcMs(b.expires_at) ?? Infinity) - now < EXPIRE_SOON_MS,
   ).length;
   nav.setBadge("people", joins.length, true);
   nav.setBadge("assigned", newPlans, true);

B01_Dashboard/B01_Dashboard_UI_TempUpload.ts

@@ -29,6 +29,7 @@ import {
   uploadTempChunk,
   type TempBatchItem,
 } from "./B01_Dashboard_Api_Temp";
+import { dateText } from "../common_util/common_util_time";
 import { L } from "./B01_Dashboard_UI_Common";
 import {
   badge,
@@ -73,12 +74,6 @@ function taskKey(file: File): string {
   return `${file.name}::${file.size}`;
 }
 
-function formatDate(value: string | null): string {
-  if (!value) return "-";
-  const date = new Date(value);
-  return Number.isNaN(date.getTime()) ? "-" : date.toLocaleDateString();
-}
-
 const COLUMNS: Column[] = [
   { label: "보관 이름" },
   { label: "상태", width: "120px" },
@@ -263,7 +258,7 @@ export function buildTempBox(onGuide: () => void): TempBox {
         nameWithCaret(batch, opened),
         status,
         leftCell(batch),
-        formatDate(batch.created_at),
+        dateText(batch.created_at),
         rowMenu([
           { label: L("B01_Temp_Btn_Add"), onClick: () => openAddModal(batch) },
           {

B01_Dashboard/B01_Dashboard_UI_View_Assigned.ts

@@ -1,7 +1,7 @@
 /* =============================================================================
  * B01_Dashboard_UI_View_Assigned.ts
  * 세부 페이지 「받은 예정노선」(549-1) — 산림청이 우리 회사에 지정한 예정노선 연도 표.
- *   0 건이어도 메뉴 · 페이지 보임 · 줄 끝 ⋯ = 보기(D02) · 연결(모달)
+ *   0 건이어도 메뉴 · 페이지 보임 · 줄 끝 ⋯ = 보기(D03) · 연결(모달)
  * ========================================================================== */
 
 import { ROUTES } from "@config/config_frontend";
@@ -43,7 +43,7 @@ function stateCell(plan: AssignedPlan): HTMLElement {
 }
 
 function planRow(plan: AssignedPlan): Cell[] {
-  const view = (): void => void goToWorkflowStage(plan.project_id, ROUTES.D02_PLAN_BASE);
+  const view = (): void => void goToWorkflowStage(plan.project_id, ROUTES.D03_PLAN_ANALYSIS);
   return [
     nameCell(plan.project_name),
     plan.piece_label ? `${plan.year} · ${plan.piece_label}` : String(plan.year),

B01_Dashboard/B01_Dashboard_UI_View_SysDefaults.ts

@@ -1,7 +1,8 @@
 /* =============================================================================
  * B01_Dashboard_UI_View_SysDefaults.ts
- * 시스템 관리 › 설계 기본값(549-2) — 마스터 데이터 · 구조물 조합 · 구조물 옵션 · 도면 양식 · 계산 자리.
- *   카드 규칙은 `settingLinks` 한 벌(334) — 여기는 모양만(묶음 제목 + 둥근 상자 안 줄) · 계산 자리 = 창(504-2).
+ * 시스템 관리 › 설계 기본값(549-2 · 716-2) — 마스터 데이터(마스터 요소 · 단가산출 로직 · 구조물 옵션 정의) ·
+ *   마스터 템플릿(일위대가 · 구조물 조합 · 도면 양식) · 계산 자리. 칸마다 한 줄(누르면 그 칸을 고른 채 열림 · `?open=`).
+ *   줄 · 묶음 규칙은 `settingLinks` 한 벌(334) — 여기는 모양만(묶음 제목 + 둥근 상자 안 줄) · 계산 자리 = 창(504-2).
  * ========================================================================== */
 
 import { createButton } from "@ui/ui_template_elements";
@@ -12,22 +13,13 @@ import { pageFrame, settingCard, settingRow } from "./B01_Dashboard_UI_PageKit";
 import { group } from "./B01_Dashboard_UI_View_Parts";
 import type { ViewCtx } from "./B01_Dashboard_UI_Views";
 
-/** 카드 열쇠 → 묶음 제목 — 모르는 열쇠는 「그 밖」 */
-const GROUP_OF: Record<string, string> = {
-  m01: "마스터 데이터",
-  구조물조합: "구조물 · 도면",
-  옵션: "구조물 · 도면",
-  도면: "구조물 · 도면",
-  calcSites: "계산",
-};
-
 const open = (link: SettingLink): void =>
   link.key === "calcSites" ? void openCalcSitesDialog() : navigateTo(link.route, link.query);
 
 export function mountSysDefaults(host: HTMLElement, ctx: ViewCtx): void {
   const groups = new Map<string, HTMLElement[]>();
   for (const link of settingLinks(ctx.me, ctx.companyId)) {
-    const title = GROUP_OF[link.key] ?? "그 밖";
+    const title = link.group ?? "그 밖";
     const openBtn = createButton({ label: "열기", variant: "ghost", onClick: () => open(link) });
     groups.set(title, [...(groups.get(title) ?? []), settingRow(link.title, link.desc, openBtn)]);
   }

B01_Dashboard/B01_Dashboard_UI_View_SysLogs.ts

@@ -6,6 +6,7 @@
 
 import { fetchAuditLogPage, type AuditLog } from "./B01_Dashboard_Api_Fetch";
 import { formatDate, formatTime } from "./B01_Dashboard_UI_Common";
+import { dateText } from "../common_util/common_util_time";
 import { createButton } from "@ui/ui_template_elements";
 import { dataTable, emptyState, pageFrame } from "./B01_Dashboard_UI_PageKit";
 import { el as h, loadPage, searchBox, selectBox, toolbar } from "./B01_Dashboard_UI_View_Parts";
@@ -54,7 +55,7 @@ export interface LogFilter {
 /** 동작 · 기간(날짜 YYYY-MM-DD 양끝 포함) · 찾기(이메일 · 대상 · 접속 주소) */
 export function filterLogs(logs: AuditLog[], f: LogFilter): AuditLog[] {
   return logs.filter((l) => {
-    const day = (l.timestamp ?? "").slice(0, 10);
+    const day = dateText(l.timestamp, "");
     if (f.action && l.action !== f.action) return false;
     if (f.from && day < f.from) return false;
     if (f.to && day > f.to) return false;

B01_Dashboard/logic/B01_Dashboard_Logic_Pages.ts

@@ -43,7 +43,9 @@ export function daysLeft(
   now: number = Date.now(),
 ): number | null {
   if (!expiresAt) return null;
-  const at = new Date(expiresAt).getTime();
+  // 시간대 표시 없는 서버 글 = UTC(짝: common_util_time.parseUtcMs — 이 파일은 단독으로 돎)
+  const iso = expiresAt.trim().replace(" ", "T");
+  const at = Date.parse(/(Z|[+-]\d\d:?\d\d)$/.test(iso) ? iso : `${iso}Z`);
   if (Number.isNaN(at)) return null;
   return Math.max(0, Math.ceil((at - now) / DAY_MS));
 }

B02_ProjRegister/B02_ProjRegister_Repository.py

@@ -13,6 +13,7 @@ import aiomysql
 from common_util.common_util_audit import record_audit
 from common_util.common_util_json import atomic_write_json
 from common_util.common_util_storage import PROJECT_STORAGE_LAYOUT_V2
+from common_util.common_util_time import utc_now_text
 from common_util.common_util_workflow import load_project_workflow
 from common_util.common_util_workflow_state import initialize_project_stages
 from config.config_db import get_db_pool
@@ -40,7 +41,7 @@ def _initialize_project_storage(project_root: Path, project_id: str) -> None:
         {
             "project_id": project_id,
             "storage_version": 2,
-            "created_at": datetime.utcnow().isoformat(timespec="seconds"),
+            "created_at": utc_now_text(),
             "stages": [f"{stage}/{subdir}" for stage, subdir in PROJECT_STORAGE_LAYOUT_V2],
         },
     )
@@ -141,7 +142,7 @@ async def create_project(
             SELECT id AS project_id, name, region, road_type, project_year,
                    estimated_length_m, route_start_m, route_end_m,
                    memo, status, storage_path,
-                   DATE_FORMAT(created_at, '%%Y-%%m-%%dT%%H:%%i:%%s') AS created_at
+                   DATE_FORMAT(created_at, '%%Y-%%m-%%dT%%H:%%i:%%sZ') AS created_at
             FROM projects
             WHERE id = %s
             """,
@@ -164,7 +165,7 @@ async def get_project_by_id(project_id: str) -> dict[str, Any] | None:
             SELECT id AS project_id, user_id, company_id, name, region, road_type,
                    project_year, estimated_length_m, route_start_m, route_end_m,
                    memo, status, storage_path,
-                   DATE_FORMAT(created_at, '%%Y-%%m-%%dT%%H:%%i:%%s') AS created_at
+                   DATE_FORMAT(created_at, '%%Y-%%m-%%dT%%H:%%i:%%sZ') AS created_at
             FROM projects
             WHERE id = %s AND deleted_at IS NULL
             """,

B03_FileInput/B03_FileInput_Router.py

@@ -115,6 +115,7 @@ from B03_FileInput.B03_FileInput_Service_WF1 import trigger_wf1_analysis_and_ema
 from common_util.common_util_auth import verify_session
 from common_util.common_util_json import atomic_write_json
 from common_util.common_util_storage import resolve_stored_project_path
+from common_util.common_util_time import utc_text
 from common_util.common_util_workflow import load_project_workflow
 from common_util.common_util_workflow_state import (
     analysis_lock_owner,
@@ -366,7 +367,7 @@ async def get_project_upload_overview(
                     original_filename=str(row["original_filename"]),
                     file_size_mb=float(row["file_size_mb"] or 0.0),
                     status=str(row["status"]),
-                    uploaded_at=str(row["upload_at"]) if row.get("upload_at") else None,
+                    uploaded_at=utc_text(row.get("upload_at")),
                     relative_path=(str(row["raw_file_path"]) if row.get("raw_file_path") else None),
                     metadata=_parse_metadata(row.get("metadata")),
                 )
@@ -382,7 +383,7 @@ async def get_project_upload_overview(
                     progress_percent=round(
                         100.0 * int(row["completed_chunks"]) / max(1, int(row["total_chunks"])), 1
                     ),
-                    updated_at=str(row["updated_at"]) if row.get("updated_at") else None,
+                    updated_at=utc_text(row.get("updated_at")),
                 )
                 for row in sessions
             ],