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

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

.env

@@ -88,3 +88,8 @@ PROJECT_DELETE_HARD_ENABLED=True
 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=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_settings.css

@@ -1,10 +1,11 @@
-/* ☰ [설정] 창(PLAN 332-2) — 탭 줄 · 휠 방향 고름 · 표 */
+/* ☰ [설정] 창(PLAN 332-2) — 탭 줄 = 부품 보조 탭 · 휠 방향 = 부품 라디오 · CAD 별칭 표 = 부품 표 · 규칙 줄 = 부품 값 목록 규칙 꼴 */
+.app-settings .ui-text[hidden] {
+  display: none; /* 부품 보조 글은 display:flex 라 hidden 을 이김 */
+}
+
 .app-settings__tabs {
-  display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-8);
   padding-bottom: var(--spacing-8);
-  border-bottom: 1px solid var(--color-border);
 }
 
 .app-settings__radios {
@@ -13,25 +14,13 @@
   gap: var(--spacing-16);
 }
 
-.app-settings__radios > label {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-8);
+.app-settings__radios > .ui-checkbox {
   min-height: 32px;
-  cursor: pointer;
 }
 
-.app-settings__table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.app-settings__table th,
-.app-settings__table td {
-  padding: var(--spacing-4) var(--spacing-8);
-  border-bottom: 1px solid var(--color-border);
-  text-align: left;
-  vertical-align: middle;
+/* 표 머리는 창 몸통을 따라 붙음 — 부품 표 겉틀의 가로 스크롤은 풂 */
+.app-settings .ui-table-wrap {
+  overflow: visible;
 }
 
 .app-settings__table thead th {
@@ -40,51 +29,32 @@
   background: var(--color-surface-raised);
 }
 
-.app-settings__table input[aria-invalid="true"] {
-  border-color: var(--color-danger);
+/* 588 — 찾기 줄 · 묶음 사이 · 키 배지 줄 */
+.app-settings__findbar {
+  display: flex;
+  gap: var(--spacing-8);
+  align-items: flex-start;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding-bottom: var(--spacing-8);
+  background: var(--color-surface-raised);
 }
 
-.app-settings__error {
-  color: var(--color-danger);
+.app-settings__findbar > .ui-field {
+  flex: 1;
 }
 
-.app-settings__error:empty {
+.app-settings__group + .app-settings__group {
+  margin-top: var(--spacing-4);
+}
+
+.app-settings__group[hidden] {
   display: none;
 }
 
-.app-settings__rules {
-  margin: 0 0 var(--spacing-8);
-  padding: 0;
-  list-style: none;
-}
-
-.app-settings__rules > li {
-  display: grid;
-  grid-template-columns: minmax(0, 15em) 1fr;
-  align-items: center;
-  gap: var(--spacing-12);
-  padding: var(--spacing-4) 0;
-  border-bottom: 1px solid var(--color-border);
-  white-space: nowrap;
-}
-
 .app-settings__keys {
-  display: flex;
+  display: inline-flex;
   flex-wrap: wrap;
   gap: var(--spacing-4);
 }
-
-.app-settings__keys:only-child {
-  grid-column: 1 / -1;
-}
-
-.app-settings__keys > kbd {
-  padding: 0 var(--spacing-8);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-surface-raised);
-  color: var(--color-text);
-  font-family: var(--font-body);
-  font-size: 0.85em;
-  line-height: 1.7;
-}

A00_Common/app_settings.ts

@@ -1,19 +1,26 @@
 /* =============================================================================
  * app_settings.ts
- * ☰ [설정] 창(PLAN 332-2 · 요구 224-8) — 탭 셋: ① 마우스 ② CAD 단축키 ③ 다른 곳 단축키(읽기 전용).
+ * ☰ [설정] 창(PLAN 332-2 · 588 · 요구 224-8 · 445) — 탭 셋: ① 마우스(휠 방향 · 화면 옮기기 단추) ② CAD 단축키 ③ 다른 곳 단축키.
  *
  * - 고침은 창 안 사본에만 · [저장] 때만 계정 pref(`input-prefs`)로 한 번 씀 — 읽기는 `input_prefs.ts`
- * - 저장 안 한 고침이 있으면 닫을 때 물음(askLeave) · 잘못 있는 별칭은 저장 안 함
+ * - 저장 안 한 고침이 있으면 닫을 때 물음(askLeave) · 잘못 있는 별칭 · 겹친 키는 저장 안 함
+ * - ② · ③ 표 = 단축키 등록부(`key_registry.ts`) — 바꾼 키만 `keys` 에
  * - 로그인 전엔 이 브라우저에만 남음(계정 올리기는 `b_page_state` 가 로그인 뒤에)
  * ========================================================================== */
 
+import { createBadge } from "@ui/ui_template_badge";
+import { createCheckbox } from "@ui/ui_template_checkbox";
+import { createKv } from "@ui/ui_template_kv";
 import { createButton, el, showToast } from "@ui/ui_template_elements";
 import { askLeave } from "@ui/ui_template_leave_dialog";
 import { t as L } from "@ui/ui_template_locale";
 import { openModal } from "@ui/ui_template_modal";
 import { writeState } from "./b_page_state";
-import { inputPrefs, type InputPrefs, type WheelZoom } from "./input_prefs";
+import { inputPrefs, type InputPrefs, type PanButton, type WheelZoom } from "./input_prefs";
+import { fillTabs } from "./b_page_tabs";
 import { buildCadAliasTab, checkCadAliases } from "./app_settings_cad";
+import { findPanel, keyRows } from "./app_settings_keys";
+import { KEY_ACTIONS, checkKeys, type KeyScope } from "./key_registry";
 import "./app_settings.css";
 
 type LocaleKey = Parameters<typeof L>[0];
@@ -30,6 +37,12 @@ const WHEEL: [WheelZoom, LocaleKey][] = [
   ["push", "App_Settings_Wheel_Push"],
 ];
 
+const PAN: [PanButton, LocaleKey][] = [
+  ["left", "App_Settings_Pan_Left"],
+  ["middle", "App_Settings_Pan_Middle"],
+  ["right", "App_Settings_Pan_Right"],
+];
+
 const MOUSE_RULES: LocaleKey[] = [
   "App_Settings_Rule_Pan",
   "App_Settings_Rule_Pick",
@@ -37,106 +50,111 @@ const MOUSE_RULES: LocaleKey[] = [
   "App_Settings_Rule_Pinch",
 ];
 
-/** ③ 안내 — [자리, 키] */
-const KEY_ROWS: [LocaleKey, LocaleKey][] = [
-  ["App_Settings_Keys_All", "App_Settings_Keys_All_Keys"],
-  ["App_Settings_Keys_Profile", "App_Settings_Keys_Profile_Keys"],
-  ["App_Settings_Keys_RouteEdit", "App_Settings_Keys_RouteEdit_Keys"],
-  ["App_Settings_Keys_Section", "App_Settings_Keys_Section_Keys"],
-  ["App_Settings_Keys_Cad", "App_Settings_Keys_Cad_Keys"],
-  ["App_Settings_Keys_Table", "App_Settings_Keys_Table_Keys"],
-  ["App_Settings_Keys_M02", "App_Settings_Keys_M02_Keys"],
-];
+/** ③ 자리 = CAD 뺀 등록부 자리(CAD 는 ② 탭 「키 · 마우스」) */
+const OTHER_SCOPES = [...new Set(KEY_ACTIONS.map((a) => a.scope))].filter(
+  (scope): scope is KeyScope => scope !== "cad",
+);
 
 /** 비교 · 저장 꼴 — 별칭 명령 차례를 맞춤 */
 const normalize = (p: InputPrefs): InputPrefs => ({
   wheelZoom: p.wheelZoom,
+  panButton: p.panButton,
+  keys: Object.fromEntries(Object.entries(p.keys).sort(([a], [b]) => (a < b ? -1 : 1))),
   cadAliases: Object.fromEntries(Object.entries(p.cadAliases).sort(([a], [b]) => (a < b ? -1 : 1))),
 });
 const snapshot = (p: InputPrefs): string => JSON.stringify(normalize(p));
 
-/** 규칙 목록 — 한 줄 = 「입력 = 동작」 · 입력은 키 칩(` · ` 로 여럿) · 동작 없는 줄은 칩만 */
+/** 규칙 목록 = 값 목록 부품 규칙 꼴 — 한 줄 = 「입력 = 동작」 · 입력은 키 칩(` · ` 로 여럿) · 동작 없는 줄은 칩만 */
 function ruleList(keys: LocaleKey[]): HTMLElement {
-  const items = keys
+  const rows = keys
     .flatMap((key) => L(key).split("\n"))
     .map((line) => {
       const at = line.indexOf(" = ");
       const input = at < 0 ? line : line.slice(0, at);
-      return el("li", {
-        children: [
-          el("span", {
-            className: "app-settings__keys",
-            children: input.split(" · ").map((text) => el("kbd", { text })),
-          }),
-          ...(at < 0 ? [] : [el("span", { text: line.slice(at + 3) })]),
-        ],
-      });
+      const chips = document.createDocumentFragment();
+      chips.append(...input.split(" · ").map((text) => createBadge(text, "neutral")));
+      return { label: chips, value: at < 0 ? undefined : line.slice(at + 3) };
     });
-  return el("ul", { className: "app-settings__rules", children: items });
+  return createKv(rows, { rule: true });
+}
+
+function radios<T extends string>(
+  name: string,
+  label: LocaleKey,
+  options: [T, LocaleKey][],
+  value: T,
+  onChange: (value: T) => void,
+): HTMLElement {
+  const group = el("div", {
+    className: "app-settings__radios",
+    attrs: { role: "radiogroup", "aria-label": L(label) },
+  });
+  for (const [mode, key] of options) {
+    group.append(
+      createCheckbox(L(key), {
+        radio: name,
+        value: mode,
+        checked: value === mode,
+        onChange: () => onChange(mode),
+      }).root,
+    );
+  }
+  return group;
 }
 
 function mouseTab(draft: InputPrefs): HTMLElement {
-  const group = el("div", {
-    className: "app-settings__radios",
-    attrs: { role: "radiogroup", "aria-label": L("App_Settings_Wheel") },
-  });
-  for (const [mode, key] of WHEEL) {
-    const input = el("input", {
-      attrs: { type: "radio", name: "app-settings-wheel", value: mode },
-    });
-    input.checked = draft.wheelZoom === mode;
-    input.addEventListener("change", () => (draft.wheelZoom = mode));
-    group.append(el("label", { children: [input, L(key)] }));
-  }
   return el("div", {
     children: [
       el("h4", { text: L("App_Settings_Wheel") }),
-      group,
+      radios("app-settings-wheel", "App_Settings_Wheel", WHEEL, draft.wheelZoom, (mode) => {
+        draft.wheelZoom = mode;
+      }),
+      el("h4", { text: L("App_Settings_Pan") }),
+      radios("app-settings-pan", "App_Settings_Pan", PAN, draft.panButton, (mode) => {
+        draft.panButton = mode;
+      }),
       el("h4", { text: L("App_Settings_Rules") }),
       ruleList(MOUSE_RULES),
     ],
   });
 }
 
-function keysTab(): HTMLElement {
-  return el("div", {
-    children: KEY_ROWS.flatMap(([place, keys]) => [el("h4", { text: L(place) }), ruleList([keys])]),
-  });
-}
-
 /** ☰ [설정] — 창을 열고 지금 설정을 사본으로 고침 */
 export function openAppSettings(): void {
   const draft = normalize(inputPrefs());
   let saved = snapshot(draft);
-  const cad = buildCadAliasTab(draft.cadAliases);
+  /** 키를 고칠 때마다 — 두 탭 칸 글 · 겹침 표시 다시 */
+  const keysChanged = (): void => {
+    const errors = checkKeys(draft.keys);
+    for (const rows of [cad.keys, other]) {
+      rows.refresh();
+      rows.mark(errors);
+    }
+  };
+  const cad = buildCadAliasTab(draft.cadAliases, draft.keys, keysChanged);
+  const other = keyRows(OTHER_SCOPES, draft.keys, keysChanged);
+  const keysPanel = findPanel(other.groups, [el("p", { text: L("App_Settings_Key_Help") })], () => {
+    for (const id of Object.keys(draft.keys)) if (!id.startsWith("cad.")) delete draft.keys[id];
+    keysChanged();
+  });
   const panels: Record<TabId, HTMLElement> = {
     mouse: mouseTab(draft),
     cad: cad.root,
-    keys: keysTab(),
+    keys: keysPanel.root,
   };
-  const tabs = el("div", {
-    className: "app-settings__tabs ui-subtabs",
-    attrs: { role: "tablist" },
-  });
+  const tabs = el("div", { className: "app-settings__tabs" });
   const show = (id: TabId): void => {
-    tabs.replaceChildren(
-      ...TABS.map(([tab, key]) => {
-        const button = createButton({
-          label: L(key),
-          variant: tab === id ? "filled" : "ghost",
-          size: "sm",
-          onClick: () => show(tab),
-        });
-        button.setAttribute("role", "tab");
-        button.setAttribute("aria-selected", String(tab === id));
-        button.dataset.settingsTab = tab;
-        return button;
-      }),
-    );
+    fillTabs(tabs, {
+      tabs: TABS.map(([tab, key]) => ({ key: tab, label: L(key) })),
+      value: id,
+      kind: "pill",
+      data: "settingsTab",
+      onChange: (tab) => show(tab as TabId),
+    });
     for (const [tab, panel] of Object.entries(panels)) panel.hidden = tab !== id;
   };
 
-  /** [저장] — 잘못 있는 별칭이면 CAD 탭을 보이고 안 씀 */
+  /** [저장] — 잘못 있는 별칭 · 겹친 키면 그 탭을 보이고 안 씀 */
   const save = (): boolean => {
     const errors = checkCadAliases(draft.cadAliases);
     cad.mark(errors);
@@ -145,6 +163,13 @@ export function openAppSettings(): void {
       showToast(L("App_Settings_Cad_Invalid"), "error");
       return false;
     }
+    const keyErrors = Object.keys(checkKeys(draft.keys));
+    if (keyErrors.length) {
+      keysChanged();
+      show(keyErrors.some((id) => id.startsWith("cad.")) ? "cad" : "keys");
+      showToast(L("App_Settings_Key_Invalid"), "error");
+      return false;
+    }
     if (snapshot(draft) !== saved) writeState("input-prefs", normalize(draft));
     saved = snapshot(draft);
     showToast(L("App_Settings_Saved"), "success");

A00_Common/app_settings_cad.ts

@@ -1,6 +1,6 @@
 /* =============================================================================
  * app_settings_cad.ts
- * ☰ [설정] ② CAD 단축키 탭(PLAN 332-2) — 명령 표(명령 · 한글 이름 · 기본 별칭 · 내 별칭) · 검사.
+ * ☰ [설정] ② CAD 단축키 탭(PLAN 332-2 · 588-1) — 찾기 · 키 · 마우스 묶음 · 리본 이름 묶음 명령 표(명령 · 한글 이름 · 기본 별칭 · 내 별칭) · 검사.
  *
  * - 명령 목록 = `openwebcad/src/commands/command-catalog.json`(registry 거울 · commands.*.ts 는 xstate 가 딸려 와서 JSON 한 벌)
  * - acad.pgp 식 덮어쓰기 — CAD 는 명령 이름 > 내 별칭 > 기본 별칭 순서로 찾음(배선은 332-3)
@@ -9,7 +9,11 @@
 
 import catalog from "../B07_DesignDetail/openwebcad/src/commands/command-catalog.json";
 import { el } from "@ui/ui_template_elements";
+import { createInputField } from "@ui/ui_template_input";
+import { createText } from "@ui/ui_template_text";
 import { t as L } from "@ui/ui_template_locale";
+import { cadCommandGroups } from "./app_settings_find";
+import { findGroup, findPanel, keyRows, type FindRow, type KeyRows } from "./app_settings_keys";
 
 export interface CadCommandRow {
   id: string;
@@ -62,18 +66,25 @@ export function checkCadAliases(
   return errors;
 }
 
-/** 탭 몸 — `aliases` 를 칸 입력대로 고쳐 씀 · `mark` 로 잘못 칸 표시 */
-export function buildCadAliasTab(aliases: Record<string, string[]>): {
+/** 탭 몸(588-1) — 찾기 · 「키 · 마우스」 묶음(등록부 CAD 줄) · 리본 이름 묶음 · `aliases` · `keys` 를 칸 입력대로 고쳐 씀 */
+export function buildCadAliasTab(
+  aliases: Record<string, string[]>,
+  keys: Record<string, string[]>,
+  onKeysChange: () => void,
+): {
   root: HTMLElement;
   mark: (errors: Record<string, AliasError>) => void;
+  keys: KeyRows;
+  count: () => number;
 } {
-  const message = el("p", { className: "app-settings__error", attrs: { role: "alert" } });
+  const message = createText("", "error");
+  message.hidden = true;
   const inputs = new Map<string, HTMLInputElement>();
-  const rows = CAD_COMMANDS.map((command) => {
-    const input = el("input", {
-      className: "ui-input ui-input--sm",
-      attrs: { type: "text", "aria-label": `${command.id} ${L("App_Settings_Cad_Mine")}` },
-    });
+  const byId = new Map(CAD_COMMANDS.map((command) => [command.id, command]));
+  const row = (command: CadCommandRow): FindRow => {
+    const field = createInputField({ size: 24 });
+    const input = field.input;
+    input.setAttribute("aria-label", `${command.id} ${L("App_Settings_Cad_Mine")}`);
     input.value = (aliases[command.id] ?? []).join(", ");
     input.dataset.cadCommand = command.id;
     input.addEventListener("input", () => {
@@ -82,25 +93,30 @@ export function buildCadAliasTab(aliases: Record<string, string[]>): {
       else delete aliases[command.id];
     });
     inputs.set(command.id, input);
-    const cells = [command.id, command.label, command.aliases.join(", ")].map((text) =>
-      el("td", { text }),
-    );
-    return el("tr", { children: [...cells, el("td", { children: [input] })] });
-  });
-  const head = el("tr", {
-    children: (
-      [
-        "App_Settings_Cad_Command",
-        "App_Settings_Cad_Label",
-        "App_Settings_Cad_Default",
-        "App_Settings_Cad_Mine",
-      ] as const
-    ).map((key) => el("th", { text: L(key) })),
-  });
-  const table = el("table", {
-    className: "app-settings__table",
-    children: [el("thead", { children: [head] }), el("tbody", { children: rows })],
-  });
+    return {
+      cells: [command.id, command.label, command.aliases.join(", "), field.root],
+      texts: () => [command.id, command.label, ...command.aliases, input.value],
+    };
+  };
+  const columns = (
+    [
+      "App_Settings_Cad_Command",
+      "App_Settings_Cad_Label",
+      "App_Settings_Cad_Default",
+      "App_Settings_Cad_Mine",
+    ] as const
+  ).map((key) => ({ label: L(key) }));
+  const keyRowsCad = keyRows(["cad"], keys, onKeysChange, () => L("App_Settings_Cad_Keys"));
+  const groups = [
+    ...keyRowsCad.groups,
+    ...cadCommandGroups(CAD_COMMANDS.map((c) => c.id)).map((group) =>
+      findGroup(
+        group.label || L("App_Settings_Cad_Other"),
+        columns,
+        group.ids.map((id) => row(byId.get(id)!)),
+      ),
+    ),
+  ];
   const mark = (errors: Record<string, AliasError>): void => {
     for (const [id, input] of inputs) {
       const error = errors[id];
@@ -109,10 +125,21 @@ export function buildCadAliasTab(aliases: Record<string, string[]>): {
       input.title = error ? L(ERROR_TEXT[error]) : "";
     }
     const kinds = [...new Set(Object.values(errors))];
-    message.textContent = kinds.map((k) => L(ERROR_TEXT[k])).join(" · ");
+    message.lastChild!.textContent = kinds.map((k) => L(ERROR_TEXT[k])).join(" · ");
+    message.hidden = !kinds.length;
   };
-  const root = el("div", {
-    children: [el("p", { text: L("App_Settings_Cad_Help") }), message, table],
-  });
-  return { root, mark };
+  /** [모두 기본값] — 내 별칭 · CAD 바꾼 키 비움 */
+  const resetAll = (): void => {
+    for (const id of Object.keys(aliases)) delete aliases[id];
+    for (const input of inputs.values()) input.value = "";
+    for (const id of Object.keys(keys)) if (id.startsWith("cad.")) delete keys[id];
+    mark({});
+    onKeysChange();
+  };
+  const panel = findPanel(
+    groups,
+    [el("p", { text: L("App_Settings_Cad_Help") }), message],
+    resetAll,
+  );
+  return { root: panel.root, mark, keys: keyRowsCad, count: panel.count };
 }

A00_Common/app_settings_find.ts

@@ -0,0 +1,44 @@
+/* =============================================================================
+ * app_settings_find.ts
+ * ☰ [설정] 단축키 탭 셈(PLAN 588-1) — CAD 명령 묶음 · 찾기 판정. 화면 · 저장소 안 씀.
+ *
+ * - 묶음 = 리본 탭 › 패널 이름 그대로(`openwebcad/src/ribbon/ribbon.config.ts` · 순수 자료) · 두 패널에 있으면 앞 패널 · 리본에 없는 명령 = 기타
+ * - 찾기 = 띄어 나눈 낱말이 모두 어느 글에든 들면 맞음 · 대소문자 무시
+ * 시험 = `resources/tester/test_588_key_registry.py`
+ * ========================================================================== */
+
+import { RIBBON_TABS } from "../B07_DesignDetail/openwebcad/src/ribbon/ribbon.config";
+
+export interface CadGroup {
+  /** 「홈 › 그리기」 · 기타는 빈 글 */
+  label: string;
+  ids: string[];
+}
+
+/** 명령 id 들 → 리본 묶음(리본 차례) + 끝에 기타(`label` 빈 글) */
+export function cadCommandGroups(ids: string[]): CadGroup[] {
+  const known = new Set(ids);
+  const seen = new Set<string>();
+  const groups: CadGroup[] = [];
+  for (const tab of RIBBON_TABS) {
+    for (const panel of tab.panels) {
+      const mine = [...(panel.big ?? []), ...(panel.commands ?? []), ...(panel.overflow ?? [])]
+        .filter((id) => known.has(id) && !seen.has(id))
+        .filter((id) => seen.add(id));
+      if (mine.length) groups.push({ label: `${tab.label} › ${panel.label}`, ids: mine });
+    }
+  }
+  const rest = ids.filter((id) => !seen.has(id));
+  if (rest.length) groups.push({ label: "", ids: rest });
+  return groups;
+}
+
+/** 찾기 — 빈 찾기 = 맞음 · 낱말마다 어느 글에든 들어야 */
+export function matchesFind(query: string, texts: string[]): boolean {
+  const hay = texts.join("\n").toLowerCase();
+  return query
+    .toLowerCase()
+    .split(/\s+/)
+    .filter(Boolean)
+    .every((word) => hay.includes(word));
+}

A00_Common/app_settings_keys.ts

@@ -0,0 +1,191 @@
+/* =============================================================================
+ * app_settings_keys.ts
+ * ☰ [설정] 단축키 표(PLAN 588) — 접이 묶음 · 찾기 · 키 기록 칸 · 줄마다 [기본값]. CAD 탭 · 다른 곳 탭이 같이 씀.
+ *
+ * - 표 줄 = 등록부(`key_registry.ts`) — 손글 안내 없음 · 못 바꾸는 줄은 키 배지만
+ * - 키 기록 = 칸을 누르고 새 키를 누름(Tab = 초점 넘김 · Esc = 그만) · 기본과 같으면 바꾼 키에서 뺌
+ * - 고침은 창 안 사본(`keys`)에만 · [저장] 은 `app_settings.ts`
+ * ========================================================================== */
+
+import { createBadge } from "@ui/ui_template_badge";
+import { createButton } from "@ui/ui_template_button";
+import { attachCollapsible, createCollapsibleHead } from "@ui/ui_template_collapsible";
+import { el } from "@ui/ui_template_elements";
+import { createEmpty } from "@ui/ui_template_empty";
+import { createInputField } from "@ui/ui_template_input";
+import { currentLanguageIndex, t as L } from "@ui/ui_template_locale";
+import { tableRow, tableShell, type Cell, type Column } from "@ui/ui_template_table";
+import { matchesFind } from "./app_settings_find";
+import {
+  KEY_ACTIONS,
+  KEY_SCOPES,
+  actionKeys,
+  chordOf,
+  keyLabel,
+  type KeyError,
+  type KeyScope,
+} from "./key_registry";
+
+type LocaleKey = Parameters<typeof L>[0];
+
+const KEY_ERROR_TEXT: Record<KeyError, LocaleKey> = {
+  dup: "App_Settings_Key_ErrDup",
+  reserved: "App_Settings_Key_ErrReserved",
+  letter: "App_Settings_Key_ErrLetter",
+};
+
+export interface FindRow {
+  cells: Cell[];
+  /** 찾기에 쓰는 글 — 찾을 때마다 읽음(칸에 친 글도) */
+  texts: () => string[];
+}
+
+export interface FindGroup {
+  root: HTMLElement;
+  /** 맞는 줄 수 */
+  filter: (query: string) => number;
+}
+
+/** 접이 묶음 하나 — 머리(이름 · 줄 수 배지) + 표 · 처음엔 접힘 · 찾는 동안 맞는 줄만 펼침 */
+export function findGroup(title: string, columns: Column[], rows: FindRow[]): FindGroup {
+  const badge = createBadge(String(rows.length), "neutral");
+  const head = createCollapsibleHead({ title, actions: [badge], level: 4 });
+  const { root: table, tbody } = tableShell(columns, { density: "data" });
+  table.classList.add("app-settings__table");
+  const trs = rows.map((row) => tableRow(columns, row.cells));
+  tbody.append(...trs);
+  const root = el("section", {
+    className: "ui-collapsible is-collapsed app-settings__group",
+    children: [head.root, table],
+  });
+  const filter = (query: string): number => {
+    let shown = 0;
+    rows.forEach((row, i) => {
+      const hit = matchesFind(query, row.texts());
+      trs[i].hidden = !hit;
+      if (hit) shown += 1;
+    });
+    badge.textContent = String(shown);
+    root.hidden = !shown;
+    root.classList.toggle("is-collapsed", !query.trim());
+    return shown;
+  };
+  return { root, filter };
+}
+
+/** 찾기 칸 + [모두 기본값] + 묶음들 + 0건 안내 — `count` = 맞는 줄 수(시험 · 검증) */
+export function findPanel(
+  groups: FindGroup[],
+  head: HTMLElement[],
+  onResetAll: () => void,
+): { root: HTMLElement; count: () => number } {
+  const empty = createEmpty({ text: L("App_Settings_Find_Empty"), small: true });
+  empty.hidden = true;
+  let count = 0;
+  const find = createInputField({
+    type: "search",
+    size: 28,
+    placeholder: L("App_Settings_Find"),
+    onInput: (query) => {
+      count = groups.reduce((sum, group) => sum + group.filter(query), 0);
+      empty.hidden = count > 0;
+    },
+  });
+  find.input.setAttribute("aria-label", L("App_Settings_Find"));
+  find.input.dataset.settingsFind = "";
+  const reset = createButton({
+    label: L("App_Settings_Reset_All"),
+    variant: "ghost",
+    size: 28,
+    onClick: onResetAll,
+  });
+  const bar = el("div", { className: "app-settings__findbar", children: [find.root, reset] });
+  const root = el("div", { children: [bar, ...head, ...groups.map((g) => g.root), empty] });
+  attachCollapsible(root);
+  count = groups.reduce((sum, group) => sum + group.filter(""), 0);
+  return { root, count: () => count };
+}
+
+const text = (pair: readonly [string, string]): string => pair[currentLanguageIndex] ?? pair[0];
+
+const badges = (keys: readonly string[]): HTMLElement =>
+  el("span", {
+    className: "app-settings__keys",
+    children: keys.map((key) => createBadge(keyLabel(key), "neutral")),
+  });
+
+export interface KeyRows {
+  groups: FindGroup[];
+  /** 잘못 표시 */
+  mark: (errors: Record<string, KeyError>) => void;
+  /** 사본이 바뀐 뒤 칸 글 · [기본값] 다시 맞춤 */
+  refresh: () => void;
+}
+
+/** 등록부 자리들의 묶음 — `keys` 사본을 고쳐 씀 · `onChange` = 고칠 때마다(겹침 다시 셈) */
+export function keyRows(
+  scopes: KeyScope[],
+  keys: Record<string, string[]>,
+  onChange: () => void,
+  titleOf: (scope: KeyScope) => string = (scope) => text(KEY_SCOPES[scope].label),
+): KeyRows {
+  const columns: Column[] = [
+    { label: L("App_Settings_Key_Action") },
+    { label: L("App_Settings_Key_Key"), width: "13rem" },
+    { label: "", width: "6rem" },
+  ];
+  const fields = new Map<string, { set: () => void; setError: (msg?: string) => void }>();
+  const groups = scopes.map((scope) => {
+    const rows = KEY_ACTIONS.filter((a) => a.scope === scope).map((action): FindRow => {
+      const label = text(action.label);
+      const texts = [label, ...action.keys, ...action.keys.map(keyLabel)];
+      if (action.fixed) return { cells: [label, badges(action.keys), ""], texts: () => texts };
+      const field = createInputField({ size: 24 });
+      const input = field.input;
+      input.readOnly = true;
+      input.dataset.keyAction = action.id;
+      input.setAttribute("aria-label", `${label} ${L("App_Settings_Key_Key")}`);
+      const defaults = action.keys.map(keyLabel).join(" · ");
+      const reset = createButton({
+        label: L("App_Settings_Reset"),
+        variant: "ghost",
+        size: 24,
+        onClick: () => {
+          delete keys[action.id];
+          onChange();
+        },
+      });
+      reset.title = `${L("App_Settings_Reset")}: ${defaults}`;
+      reset.dataset.keyReset = action.id;
+      input.addEventListener("keydown", (event) => {
+        if (event.key === "Tab") return;
+        event.preventDefault();
+        event.stopPropagation(); // 창 닫기 · 페이지 키로 안 샘
+        if (event.key === "Escape") return input.blur();
+        const chord = chordOf(event);
+        if (!chord) return;
+        if (action.keys.length === 1 && action.keys[0] === chord) delete keys[action.id];
+        else keys[action.id] = [chord];
+        onChange();
+      });
+      fields.set(action.id, {
+        set: () => {
+          input.value = actionKeys(action.id, keys).map(keyLabel).join(" · ");
+          reset.disabled = !keys[action.id];
+        },
+        setError: field.setError,
+      });
+      return { cells: [label, field.root, reset], texts: () => [...texts, input.value] };
+    });
+    return findGroup(titleOf(scope), columns, rows);
+  });
+  const refresh = (): void => fields.forEach((field) => field.set());
+  const mark = (errors: Record<string, KeyError>): void => {
+    for (const [id, field] of fields) {
+      const error = errors[id];
+      field.setError(error ? L(KEY_ERROR_TEXT[error]) : undefined);
+    }
+  };
+  refresh();
+  return { groups, mark, refresh };
+}

A00_Common/app_shell.ts

@@ -9,6 +9,7 @@
 
 import { ui_locales, currentLanguageIndex, setLanguage } from "@ui/ui_template_locale";
 import { createButton } from "@ui/ui_template_elements";
+import { createSegment } from "@ui/ui_template_segment";
 import { THEME_STORAGE_KEY, LANG_STORAGE_KEY, ROUTES } from "@config/config_frontend";
 import { navigateTo, isAuthenticated, setLeaveGuard, takeLeaveGuard } from "./router";
 import { readTouchMode, setTouchMode, type TouchMode } from "./device_context";
@@ -132,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;
 }
@@ -177,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)); // ☰ 에 포커스가 있어도 닫힘
@@ -246,35 +256,23 @@ function buildTouchModeSwitch(): HTMLElement {
   box.className = "app-drawer__touch";
   const label = document.createElement("span");
   label.textContent = L("App_TouchMode");
-  const group = document.createElement("div");
-  group.className = "app-drawer__row";
-  group.setAttribute("role", "radiogroup");
-  group.setAttribute("aria-label", L("App_TouchMode"));
   const modes: [TouchMode, keyof typeof ui_locales][] = [
     ["auto", "App_TouchMode_Auto"],
     ["on", "App_TouchMode_On"],
     ["off", "App_TouchMode_Off"],
   ];
-  const buttons = modes.map(([mode, key]) => {
-    const b = createButton({
-      label: L(key),
-      variant: "pill",
-      onClick: () => {
-        setTouchMode(mode);
-        mark();
-      },
-    });
-    b.setAttribute("role", "radio");
-    b.dataset.touchMode = mode;
-    return b;
+  // 부품 「분할 고르기」(36) — 칸마다 data-touch-mode
+  const group = createSegment({
+    options: modes.map(([mode, key]) => ({ value: mode, label: L(key) })),
+    value: readTouchMode(),
+    size: 36,
+    ariaLabel: L("App_TouchMode"),
+    onChange: (mode) => setTouchMode(mode as TouchMode),
   });
-  const mark = (): void => {
-    const now = readTouchMode();
-    for (const b of buttons) b.setAttribute("aria-checked", String(b.dataset.touchMode === now));
-  };
-  mark();
-  group.append(...buttons);
-  box.append(label, group);
+  group.root.querySelectorAll<HTMLElement>("[data-value]").forEach((b) => {
+    b.dataset.touchMode = b.dataset.value;
+  });
+  box.append(label, group.root);
   return box;
 }
 
@@ -496,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;
@@ -522,11 +520,8 @@ html[data-touch="on"] :is(.app-drawer__nav > *, .app-drawer__site > summary, .ap
   color: var(--color-text-secondary);
   font-size: var(--text-caption);
 }
-.app-drawer__touch .app-drawer__row { padding-inline: 0; }
-.app-drawer__touch [aria-checked="true"] {
-  background: var(--color-mist-violet);
-  color: var(--color-accent);
-}
+.app-drawer__touch .ui-segment { display: flex; }
+.app-drawer__touch .ui-segment__item { flex: 1 1 0; min-width: 0; }
 /* 휴대폰 폭 — 오른쪽 단추(언어 · 테마 · 로그인)는 서랍 안으로 */
 html[data-size="compact"] .app-header { padding: 0 var(--spacing-16); gap: var(--spacing-8); }
 html[data-size="compact"] .app-actions { display: none; }

A00_Common/b_asset_cache.ts

@@ -169,6 +169,27 @@ export async function purgeOtherProjects(projectId: string): Promise<void> {
   });
 }
 
+/** 그 프로젝트 몫만 지운다(401 · 떠날 때) — 다른 탭 · 다른 프로젝트 줄은 둠 · 이 탭 준비 표식도 버림. */
+export async function purgeProject(projectId: string): Promise<void> {
+  if (!projectId) return;
+  try {
+    const stamp = window.sessionStorage.getItem(PRELOADED_SIGNATURE_KEY);
+    if (stamp?.startsWith(`${projectId}|`))
+      window.sessionStorage.removeItem(PRELOADED_SIGNATURE_KEY);
+  } catch {
+    /* 저장소가 막힌 브라우저 — 표식이 없다. */
+  }
+  await deleteWhere((store) => {
+    const cursorRequest = store.index("projectId").openKeyCursor(IDBKeyRange.only(projectId));
+    cursorRequest.onsuccess = () => {
+      const cursor = cursorRequest.result;
+      if (!cursor) return;
+      store.delete(cursor.primaryKey);
+      cursor.continue();
+    };
+  });
+}
+
 /** 보관함에서 바이트만 꺼낸다 — 네트워크를 타지 않는다. 없으면 null.
  *  주소에 열쇠가 박히는 자료(3D 코리도)는 이걸로 **먼저 보고** 없을 때만 받는다. */
 export async function readCachedBytes(projectId: string, url: string): Promise<ArrayBuffer | null> {
@@ -456,10 +477,6 @@ export async function preloadSurfaceAssets(
       ),
     ),
   );
-  // 위성사진은 <img>로 표시하므로 보관함이 아니라 브라우저 자체 캐시를 데워 둔다.
-  await fetch(`${API_BASE_URL}/projects/${projectId}/vworld-map?layer_name=satellite`, {
-    credentials: "include",
-  }).catch(() => null);
 
   report("준비 완료", 1);
   return confirmed.signature;

A00_Common/b_page_scaffold.ts

@@ -12,7 +12,6 @@
  * ========================================================================== */
 
 import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
-import { CURRENT_PROJECT_ID_KEY } from "@config/config_frontend";
 import { createWorkflowLayout } from "@ui/ui_template_workflow_layout";
 import { createButton } from "@ui/ui_template_elements";
 import {
@@ -21,6 +20,7 @@ import {
   WORKFLOW_STEP_ROUTES,
   type WorkflowState,
 } from "./b_workflow_nav";
+import { currentProjectId } from "./b_project_switch";
 
 /** locale 헬퍼 */
 function L(key: keyof typeof ui_locales): string {
@@ -107,7 +107,7 @@ export async function renderPendingWorkflow(
   opts: PendingWorkflowOptions,
 ): Promise<void> {
   injectScaffoldStyles();
-  const projectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY);
+  const projectId = currentProjectId();
   let workflowState: WorkflowState | undefined;
   if (projectId) {
     try {

A00_Common/b_page_state.ts

@@ -32,8 +32,6 @@ export interface StateEntry {
   scope: StateScope;
   /** 형식이 바뀌면 올린다 — 옛 값을 읽지 않고 기본값으로 시작한다. */
   version?: number;
-  /** 옛 키(있으면 한 번 읽어 옮기고 지운다). `project`·`route` 범위는 함수로 받는다. */
-  legacy?: (projectId?: string, routeId?: number | string) => string;
 }
 
 /**
@@ -48,14 +46,13 @@ export const STATE_REGISTRY = {
   "profile-collapsed": {
     bucket: "pref",
     scope: "global",
-    legacy: () => "b05-route-profile-collapsed",
   },
-  "profile-height": { bucket: "pref", scope: "global", legacy: () => "b05-route-profile-height" },
+  "profile-height": { bucket: "pref", scope: "global" },
   /** B06 위 평면 겹침 패널 높이(436) */
   "plan-peek-height": { bucket: "pref", scope: "global" },
   /** 배수유역 판 접힘 — 기억 없음 = 닫힘(392-1 · 옛 "false" 기억 버림). */
   "drainage-collapsed": { bucket: "pref", scope: "global", version: 2 },
-  "drainage-width": { bucket: "pref", scope: "global", legacy: () => "b05-route-drainage-width" },
+  "drainage-width": { bucket: "pref", scope: "global" },
   /** M02 면적산출 오른쪽 일위대가 패널(`AreaPanel`) — 접힘 · 폭(옛 조합 패널 키 그대로) */
   "m02-combo-panel-collapsed": { bucket: "pref", scope: "global" },
   "m02-combo-panel-width": { bucket: "pref", scope: "global" },
@@ -77,26 +74,22 @@ export const STATE_REGISTRY = {
   "masshaul-open": {
     bucket: "pref",
     scope: "global",
-    legacy: () => "b05-route-profile-masshaul-open",
   },
   "masshaul-height": {
     bucket: "pref",
     scope: "global",
-    legacy: () => "b05-route-profile-masshaul-height",
   },
   /** 유토곡선 범례 — B05·B06 이 같은 값을 본다(예전에도 키를 공유했다). */
   "masshaul-visible": {
     bucket: "pref",
     scope: "global",
     version: 6,
-    legacy: () => "b06:masshaul-visible-v4",
   },
-  "table-open": { bucket: "pref", scope: "global", legacy: () => "b05:profile:table:open" },
-  "table-height": { bucket: "pref", scope: "global", legacy: () => "b05:profile:table:height" },
+  "table-open": { bucket: "pref", scope: "global" },
+  "table-height": { bucket: "pref", scope: "global" },
   "section-panel-collapsed": {
     bucket: "pref",
     scope: "global",
-    legacy: () => "b06:profile-panel-collapsed",
   },
   /** B06 횡단 카드 한 줄 카드 수(138-3 · 1~6 · 기본 3). */
   "cross-columns": { bucket: "pref", scope: "global" },
@@ -109,7 +102,6 @@ export const STATE_REGISTRY = {
   "section-panel-height": {
     bucket: "pref",
     scope: "global",
-    legacy: () => "b06:profile-panel-height",
   },
 
   /* ── ② 설계 초안 ─────────────────────────────────────────────────────── */
@@ -120,21 +112,20 @@ export const STATE_REGISTRY = {
   /** B06 횡단 [상세] 표 손질(179-4) — 측점키(0.01 m) → 고른 칸 · 더한 행 · 열. [저장]이 내보냄. */
   "detail-table": { bucket: "draft", scope: "route" },
   /** 아직 정본에 안 넣은 구조물 목록. B05 에서 만들고 B06 [저장]이 내보낸다. */
-  structures: { bucket: "draft", scope: "project", legacy: (p) => `b05:structures:${p}` },
+  structures: { bucket: "draft", scope: "project" },
   /** 아직 정본에 안 넣은 추가 측점(정수 m 목록 · 368-2) — 정본 `plus_stations.json` · [저장]이 내보냄. */
   "plus-stations": { bucket: "draft", scope: "project" },
   /** 3D 램프로 바꾼 측점 상단측(측구 방향). */
-  uphill: { bucket: "draft", scope: "project", legacy: (p) => `b05:uphill:${p}` },
+  uphill: { bucket: "draft", scope: "project" },
   /** B05 배수유역도에서 고친 관 목록(추가·이동·삭제) — 2026-09-06 되살림.
    *  예전에는 패널 메모리에만 있어 B06 으로 넘어가면 편집이 사라졌다(대응표 조사).
    *  정본은 `pipe_points.json` 이고, 이 초안은 [저장]·[확정] 한 본문(`pipesPart`)이
    *  내보낸 뒤 비운다. */
-  pipes: { bucket: "draft", scope: "project", legacy: (p) => `b05:pipes:${p}` },
+  pipes: { bucket: "draft", scope: "project" },
   /** B05 에서 고른 구조물을 B06 이 이어받는 자리 — 예전 `aislo:structure-pick:*`. */
   "structure-pick": {
     bucket: "draft",
     scope: "project",
-    legacy: (p) => `aislo:structure-pick:${p}`,
   },
   /** 관 세션 id 장부(323-5 · `design_pipe_ids`) — `{next, ids: [{id, at}]}` · 저장 안 함. */
   "pipe-ids": { bucket: "draft", scope: "project" },
@@ -147,41 +138,36 @@ export const STATE_REGISTRY = {
   /** 종류를 바꾼 관 자리 `{누가거리: 처음 종류}`(318-4) — [저장] 때 그 측점 옛 조정값을 정본에서도 비움. */
   kindreset: { bucket: "draft", scope: "project" },
   /** 배수관·암거 조정창에서 예약한 옵션 값. */
-  culvertopt: { bucket: "draft", scope: "route", legacy: (p, r) => `b06:culvertopt:${p}:${r}` },
+  culvertopt: { bucket: "draft", scope: "route" },
   /** 암 경계선 오프셋(측점별). */
-  rockb: { bucket: "draft", scope: "route", legacy: (p, r) => `b06:rockb:${p}:${r}` },
+  rockb: { bucket: "draft", scope: "route" },
   /** 측점별 암 절토 경사비(1:n 의 n) — 카드에서 넣은 사용자 값(2026-09-07).
    *  암 경계선(`rockb`)과 같은 자리·같은 꼴이다. 재계산에 **계산 전에** 실어 보내야
    *  설계선이 새 경사로 그려진다(값만 베껴 붙이면 그림과 숫자가 어긋난다). */
   cutslope: { bucket: "draft", scope: "route" },
-  /** 소단 제원(측점키 → {width_m, interval_m, slope_deg}) — 계획서 3-9.
-   *  사용자가 구간에 놓은 값이라 재계산에 함께 실어 보내야 한다. 안 실으면 계획선을
-   *  고치는 순간 계단이 사라진다(암 경계선이 옛 키를 보던 것과 같은 자리). */
-  berm: { bucket: "draft", scope: "route" },
   /** 표준 횡단면 설정 패널의 편집값.
    *
    * 칸이 비었으면 `sections/context` 의 저장분(`stored_standard_cross_section`)으로 채운다
    * (`B06_Section_Api_Fetch` seedStandardCross) — 같은 응답의 `standard_cross_section` 은
    * config 기본값. 고침으로 안 본다 — [폐기]에도 안 지움(`design_leave` NOT_EDITS).
    * [초기화] · 추천 노선 [적용]에서 버린다. */
-  "std-cross": { bucket: "draft", scope: "project", legacy: (p) => `b06:std-cross:${p}` },
+  "std-cross": { bucket: "draft", scope: "project" },
   /** 표시 반폭 — 사용자가 고른 값이라 초안이되, 바꾸면 횡단 재생성(③)을 함께 부른다. */
   "cross-display": {
     bucket: "draft",
     scope: "route",
-    legacy: (p, r) => `b06:cross-display:${p}:${r}`,
   },
   /* 측점 조정창이 쌓는 4축·단수·연동 값 — 전부 노선 단위 초안이고 [저장]에서 함께 나간다.
      옛 키는 `b06:{이름}:{프로젝트}:{노선}` 한 규칙이었다. */
-  crossw: { bucket: "draft", scope: "route", legacy: (p, r) => `b06:crossw:${p}:${r}` },
-  revetx: { bucket: "draft", scope: "route", legacy: (p, r) => `b06:revetx:${p}:${r}` },
-  revetlink: { bucket: "draft", scope: "route", legacy: (p, r) => `b06:revetlink:${p}:${r}` },
-  basinadjust: { bucket: "draft", scope: "route", legacy: (p, r) => `b06:basinadjust:${p}:${r}` },
-  inletstruct: { bucket: "draft", scope: "route", legacy: (p, r) => `b06:inletstruct:${p}:${r}` },
-  extrawall: { bucket: "draft", scope: "route", legacy: (p, r) => `b06:extrawall:${p}:${r}` },
-  fordadjust: { bucket: "draft", scope: "route", legacy: (p, r) => `b06:fordadjust:${p}:${r}` },
-  boxadjust: { bucket: "draft", scope: "route", legacy: (p, r) => `b06:boxadjust:${p}:${r}` },
-  extraspan: { bucket: "draft", scope: "route", legacy: (p, r) => `b06:extraspan:${p}:${r}` },
+  crossw: { bucket: "draft", scope: "route" },
+  revetx: { bucket: "draft", scope: "route" },
+  revetlink: { bucket: "draft", scope: "route" },
+  basinadjust: { bucket: "draft", scope: "route" },
+  inletstruct: { bucket: "draft", scope: "route" },
+  extrawall: { bucket: "draft", scope: "route" },
+  fordadjust: { bucket: "draft", scope: "route" },
+  boxadjust: { bucket: "draft", scope: "route" },
+  extraspan: { bucket: "draft", scope: "route" },
   /** 횡단 카드 버튼(지반유형·단면유형·측구·포장·2단 비탈) 선택 — 2026-09-06.
    *  예전에는 버튼을 누를 때마다 서버가 계산해 **바로 저장**했다. 조작은 캐시에 쌓고
    *  [저장]·[확정]에서만 정본으로 나가야 한다(사용자 확정). */
@@ -198,8 +184,10 @@ export const STATE_REGISTRY = {
   "b08-options": { bucket: "draft", scope: "project" },
   /** B08 거리이정표 입력 `{site, base, routes}` 한 벌 — [저장] 때 프로젝트 B08_Quantity/milestone 으로(244-1). */
   "b08-milestone": { bucket: "draft", scope: "project" },
-  /** D03 예정노선 분석 `{nodes: 끈 지점 P0…Pn | null, choices: {연도: 갈래}}` — [저장] 때 plan/analysis 로(530-3). */
+  /** 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).
@@ -214,10 +202,17 @@ export const STATE_REGISTRY = {
   "route-draft-hold": { bucket: "draft", scope: "project" },
   /** D04 연도별 지정 업체 목록(531-3) — [저장] 때 PUT plan/assignees. */
   "d04-assignees": { bucket: "draft", scope: "project" },
+  /* E 페이지 캐시(401) — 진입 · 떠남 비우기가 같은 표를 봄 · 옛 키는 한 번 옮김. */
+  "e02-ground": { bucket: "draft", scope: "project" },
+  "e03-prob": { bucket: "draft", scope: "project" },
+  "e04-settings": { bucket: "draft", scope: "project" },
+  "e05-report": { bucket: "draft", scope: "project" },
+  "e06-rock": { bucket: "draft", scope: "project" },
+  "e07-settings": { bucket: "draft", scope: "project" },
 
   /* ── ④ 계산 결과 ─────────────────────────────────────────────────────── */
   /** 노선·종단 최신 응답. 페이지를 오갈 때 이 값으로 먼저 그린다. */
-  latest: { bucket: "result", scope: "project", legacy: (p) => `b05:latest:${p}` },
+  latest: { bucket: "result", scope: "project" },
   /** 종횡단 설정값(config 상수 + 프로젝트 임도 종류 + 노선 id). B05·B06 이 같은 값을
    *  받아 쓰므로 화면을 오갈 때마다 다시 묻지 않는다(2026-09-06 호출 정리).
    *  노선이 바뀌면 `latest` 와 함께 버린다. */
@@ -228,13 +223,11 @@ export const STATE_REGISTRY = {
   "std-cross-default": {
     bucket: "result",
     scope: "project",
-    legacy: (p) => `b06:std-cross-default:${p}`,
   },
   /** 서버가 준 암 경계선 기본 오프셋 — 위와 같은 성격. */
   "rock-boundary-default": {
     bucket: "result",
     scope: "project",
-    legacy: (p) => `b06:rock-boundary-default:${p}`,
   },
   /** B05 계획노선 편집 창 — 마지막에 적용한 초기노선 갈래(로직 · 비중 · 노드 · 비교값).
    *  노선을 다시 계산해 결과를 버릴 때도 이 값은 새 노선의 출발점이라 되살린다(`_Apply`). */
@@ -430,6 +423,20 @@ export function onStateRemoved(fn: (key: string) => void): () => void {
   return () => removedListeners.delete(fn);
 }
 
+/** 세션 칸을 골라 지움(401 떠남) — 칸마다 지움 알림(설계 가게가 미룬 쓰기를 거둠). */
+export function clearSessionKeys(match: (key: string) => boolean): void {
+  const doomed: string[] = [];
+  try {
+    for (let index = 0; index < window.sessionStorage.length; index += 1) {
+      const key = window.sessionStorage.key(index);
+      if (key !== null && match(key)) doomed.push(key);
+    }
+  } catch {
+    return; // 저장소가 막힌 브라우저 — 지울 것이 없다.
+  }
+  doomed.forEach((key) => writeRaw(key, null));
+}
+
 function writeRaw(key: string, value: string | null): void {
   if (value === null) removedListeners.forEach((fn) => fn(key));
   try {
@@ -465,20 +472,6 @@ function setOrMakeRoom(store: Storage, key: string, value: string): void {
   }
 }
 
-/** 옛 키에 남은 값을 새 키로 한 번 옮긴다(옮기고 나면 옛 키는 지운다). */
-function migrate(
-  name: StateName,
-  key: string,
-  projectId?: string | null,
-  routeId?: number | string | null,
-): void {
-  const legacy = entryOf(name)?.legacy?.(projectId ?? undefined, routeId ?? undefined);
-  if (!legacy || legacy === key) return;
-  const old = readRaw(legacy);
-  if (old !== null && readRaw(key) === null) writeRaw(key, old);
-  if (old !== null) writeRaw(legacy, null);
-}
-
 /** 문자열 그대로 읽는다(숫자·참거짓처럼 JSON 이 아닌 값). */
 export function readStateRaw(
   name: StateName,
@@ -487,7 +480,6 @@ export function readStateRaw(
 ): string | null {
   const key = stateKey(name, projectId, routeId);
   if (!key) return null;
-  migrate(name, key, projectId, routeId);
   return readRaw(key);
 }
 
@@ -604,8 +596,32 @@ export function clearResults(projectId: string | null, routeId?: number | string
  * 값이 빈 객체(`{}`)면 없는 것으로 본다.
  */
 export function hasDrafts(projectId: string | null, routeId?: number | string | null): boolean {
-  return namesInBucket("draft").some((name) => {
-    const raw = readStateRaw(name, projectId, routeId);
-    return raw !== null && raw !== "{}" && raw !== "[]" && raw !== "";
-  });
+  return namesInBucket("draft").some((name) =>
+    draftFilled(readStateRaw(name, projectId, routeId), name, projectId),
+  );
+}
+
+/** 저장분이 비어 있지 않은 목록 칸(관 · 구조물) — 페이지가 저장분을 받을 때 적음(469-3 · 새 요청 없음). */
+const savedLists = new Set<string>();
+export function noteSavedList(projectId: string, name: StateName, nonEmpty: boolean): void {
+  const key = `${name}:${projectId}`;
+  if (nonEmpty) savedLists.add(key);
+  else savedLists.delete(key);
+}
+export function forgetSavedLists(projectId: string): void {
+  for (const key of [...savedLists]) if (key.endsWith(`:${projectId}`)) savedLists.delete(key);
+}
+
+/**
+ * 초안 칸이 고침인가 — 떠남 확인(`design_leave`)과 `hasDrafts` 가 쓰는 한 규칙.
+ * 칸 없음 · "" · "{}" = 빈 칸 · "[]" = 저장분이 비어 있지 않은 목록 칸일 때만 고침(모두 지움 ≠ 저장분).
+ */
+export function draftFilled(
+  raw: string | null,
+  name: StateName,
+  projectId: string | null,
+): boolean {
+  if (raw === null || raw === "" || raw === "{}") return false;
+  if (raw === "[]") return !!projectId && savedLists.has(`${name}:${projectId}`);
+  return true;
 }

A00_Common/b_page_tabs.ts

@@ -0,0 +1,46 @@
+/* =============================================================================
+ * b_page_tabs.ts
+ * 페이지 탭 줄 — 부품 「탭」(`ui_template_tabs`)을 이미 있는 줄 요소 안에 채움(553-3 · B08 · B09 · ☰ [설정]).
+ *
+ *   쓰기 = `fillTabs(줄, { tabs, value, onChange, kind: "pill", data: "b08Tab" })` — 칸마다 `data-<data>` = 탭 열쇠
+ *   줄 요소는 페이지가 정함(클래스 · 자리) · 칸 모양 · 크기 · 고름 표시는 부품 몫 · 누른 칸이 지금 칸이면 안 부름
+ *   탭 이름이 바뀌면 다시 부르면 됨(줄을 통째로 다시 채움)
+ * ========================================================================== */
+
+import type { UiSize } from "@ui/ui_template_button";
+import { createTabs, type TabItem } from "@ui/ui_template_tabs";
+
+export interface PageTabsOptions {
+  tabs: TabItem[];
+  value: string;
+  onChange: (key: string) => void;
+  /** line = 위 탭(밑줄) · pill = 보조 탭(작은 알약) */
+  kind?: "line" | "pill";
+  size?: UiSize;
+  /** 칸에 붙일 data 이름(camelCase · 예: b08Tab → data-b08-tab) */
+  data: string;
+  /** 칸 풍선 */
+  title?: (key: string) => string | undefined;
+}
+
+export function fillTabs(host: HTMLElement, opts: PageTabsOptions): HTMLElement[] {
+  const tabs = createTabs({
+    tabs: opts.tabs,
+    value: opts.value,
+    kind: opts.kind,
+    size: opts.size,
+    onChange: (key) => key !== opts.value && opts.onChange(key),
+  });
+  const buttons = [...tabs.root.querySelectorAll<HTMLElement>("[data-tab]")];
+  for (const button of buttons) {
+    const key = button.dataset.tab ?? "";
+    button.dataset[opts.data] = key;
+    const title = opts.title?.(key);
+    if (title) button.title = title;
+  }
+  host.classList.add(...tabs.root.classList);
+  host.dataset.size = tabs.root.dataset.size ?? "";
+  host.setAttribute("role", "tablist");
+  host.replaceChildren(...tabs.root.childNodes);
+  return buttons;
+}

A00_Common/b_project_switch.ts

@@ -1,25 +1,71 @@
 /* =============================================================================
  * A00_Common/b_project_switch.ts
- * 다른 프로젝트에 들어갈 때 **그 밖 프로젝트의 캐시**를 지운다(계획서 290-1 · 요구 183-1).
+ * 프로젝트마다 따로 동작(401) — 탭마다 지금 프로젝트 · 떠남 물음 · 떠날 때 · 들 때 비움.
  *
- * 지우는 것 — 이 탭 세션의 다른 프로젝트 칸(초안 · 결과 · 고름 · 옛 키 · 페이지별 칸)과
- * 3D 지형 보관함(IndexedDB). 남기는 것 — 지금 프로젝트 것 · 계정 취향(pref, localStorage).
- * 다른 프로젝트에 저장 안 한 고침(초안)이 있으면 확인창 — 「남기기」면 그 초안만 둔다.
- * 같은 프로젝트로 다시 들어오면(새로고침 포함) 아무것도 안 지운다(탭마다 들어온 표식).
+ * 지금 프로젝트 = 탭 세션 칸 먼저 · 없으면 마지막으로 연 프로젝트(localStorage · 새 탭이 이어받음).
+ * 들 때(`enterProject`) — 다른 프로젝트 세션 칸 · 3D 보관함을 지움(290-1) · 저장 안 한 고침이 있으면 확인창.
+ * 떠날 때(`leaveProject`) — 그 프로젝트 세션 칸 · 준비 표식 · 3D 보관함 몫 · 탭 프로젝트 표식 · 취향은 남김.
+ * 다른 프로젝트 화면을 그리려 하면 새로 엶(`reloadIfOtherProject` · 모듈 메모리 통째 비움).
+ * 떠남 물음(`guardProjectLeave`) — 화면에 붙은 가드를 모아 [취소 · 폐기 · 저장] 한 번.
+ * 화면 모듈은 부를 때만 들임 · 라우터는 스스로 이어 줌(`linkRouter`) — 설계 가게 · 인쇄 묶음이 이 파일을 부름.
  * ========================================================================== */
 
-import { CURRENT_PROJECT_ID_KEY } from "@config/config_frontend";
-import { showConfirmDialog } from "@ui/ui_template_elements";
-import { purgeOtherProjects } from "./b_asset_cache";
-import { STATE_REGISTRY, type StateEntry } from "./b_page_state";
+import { CURRENT_PROJECT_ID_KEY } from "../config/config_frontend";
+import { clearSessionKeys, STATE_REGISTRY, type StateEntry } from "./b_page_state";
 
 /** 이 탭이 마지막으로 들어온 프로젝트. */
 const ENTERED_KEY = "aislo:entered-project";
 
-const MARK_P = "\u0001";
-const MARK_R = "\u0002";
+/** 이 탭의 지금 프로젝트(401) — 탭 세션 칸 먼저 · 없으면 마지막으로 연 프로젝트(새 탭) · 없으면 "". */
+export function currentProjectId(): string {
+  try {
+    return (
+      window.sessionStorage.getItem(ENTERED_KEY) ||
+      window.localStorage.getItem(CURRENT_PROJECT_ID_KEY) ||
+      ""
+    );
+  } catch {
+    return "";
+  }
+}
 
-/** 프로젝트를 가르는 키 머리 — 등록표 키(`aislo:{통}:{이름}:`)와 옛 키 머리. 초안 여부를 함께. */
+/** 지금 프로젝트로 적음 — 이 탭 + 새 탭이 이어받을 마지막 값. 다른 프로젝트 캐시 비움은 `enterProject`. */
+export function setCurrentProject(projectId: string): void {
+  try {
+    window.sessionStorage.setItem(ENTERED_KEY, projectId);
+    window.localStorage.setItem(CURRENT_PROJECT_ID_KEY, projectId);
+  } catch {
+    /* 저장소가 막힌 브라우저 — 기억 못 함. */
+  }
+}
+
+/** 지워진 · 권한 없는 프로젝트를 잊음 — 이 탭 표식 · 마지막 값이 그 프로젝트일 때만. */
+export function forgetProject(projectId: string): void {
+  try {
+    if (window.sessionStorage.getItem(ENTERED_KEY) === projectId)
+      window.sessionStorage.removeItem(ENTERED_KEY);
+    if (window.localStorage.getItem(CURRENT_PROJECT_ID_KEY) === projectId)
+      window.localStorage.removeItem(CURRENT_PROJECT_ID_KEY);
+  } catch {
+    /* 저장소가 막힌 브라우저 — 잊을 것이 없다. */
+  }
+}
+
+/** 이 화면(모듈 메모리)이 담은 프로젝트 — 프로젝트 화면을 그릴 때마다 견줌. */
+let heldProject = "";
+
+/** 다른 프로젝트 화면을 그리려 하면 새로 엶(401 · 모듈 메모리 통째 비움) · true = 새로 여는 중. */
+export function reloadIfOtherProject(): boolean {
+  const projectId = currentProjectId();
+  if (heldProject && projectId && projectId !== heldProject) {
+    window.location.reload();
+    return true;
+  }
+  if (projectId) heldProject = projectId;
+  return false;
+}
+
+/** 프로젝트를 가르는 키 머리 — 등록표 키(`aislo:{통}:{이름}:`). 초안 여부를 함께. */
 function projectPrefixes(): Array<{ prefix: string; draft: boolean }> {
   const out: Array<{ prefix: string; draft: boolean }> = [];
   Object.entries(STATE_REGISTRY as Record<string, StateEntry>).forEach(([name, entry]) => {
@@ -27,9 +73,6 @@ function projectPrefixes(): Array<{ prefix: string; draft: boolean }> {
     const draft = entry.bucket === "draft";
     const suffix = entry.version && entry.version > 1 ? `-v${entry.version}` : "";
     out.push({ prefix: `aislo:${entry.bucket}:${name}${suffix}:`, draft });
-    const legacy = entry.legacy?.(MARK_P, MARK_R);
-    const at = legacy?.indexOf(MARK_P) ?? -1;
-    if (legacy && at > 0) out.push({ prefix: legacy.slice(0, at), draft });
   });
   return out;
 }
@@ -107,6 +150,7 @@ export async function enterProject(
     const keep = new Set<string>();
     for (const other of plan.draftProjects) {
       const name = await nameOf(other).catch(() => other);
+      const { showConfirmDialog } = await import("@ui/ui_template_elements");
       const drop = await showConfirmDialog(
         `「${name}」에 저장 안 한 고침이 있음 — 지우고 열기 / 남기기`,
         "지우고 열기",
@@ -115,7 +159,8 @@ export async function enterProject(
       if (!drop) keep.add(other);
     }
     plan.doomed(keep).forEach((key) => window.sessionStorage.removeItem(key));
-    window.sessionStorage.setItem(ENTERED_KEY, projectId);
+    setCurrentProject(projectId);
+    const { purgeOtherProjects } = await import("./b_asset_cache");
     await purgeOtherProjects(projectId);
   } catch {
     /* 저장소가 막힌 브라우저 — 캐시를 못 지워도 프로젝트는 연다. */
@@ -136,6 +181,7 @@ export async function wipeAccountCache(): Promise<void> {
   } catch {
     /* 저장소가 막힌 브라우저 — 지울 것이 없다. */
   }
+  const { purgeOtherProjects } = await import("./b_asset_cache");
   await purgeOtherProjects(""); // 빈 id 보다 큰 열쇠 = 모든 프로젝트
 }
 
@@ -153,3 +199,98 @@ export async function wipeIfOwnerChanged(user: string | number): Promise<boolean
   await wipeAccountCache();
   return true;
 }
+
+/**
+ * 프로젝트를 떠남(401) — 이 탭 세션의 그 프로젝트 칸 · 준비 표식 · 3D 보관함 몫을 지움.
+ * 탭 프로젝트 표식(뒤로 가기 · 재진입) · 취향 · 입력 설정 · CAD 복구본(localStorage)은 남김.
+ */
+export async function leaveProject(projectId: string): Promise<void> {
+  if (!projectId) return;
+  // 프로젝트 칸 열쇠는 모두 프로젝트 번호(uuid)를 품음 — 등록표 · 옛 키 · 페이지 칸을 한 줄로.
+  // 등록표 창구로 지움 — 지움 알림을 받은 설계 가게가 미뤄 둔 쓰기(1 s)를 거둠(떠난 뒤 되살아남 막음).
+  // ponytail: 아직 한 번도 안 쓴 칸의 미룬 쓰기는 못 거둠 — 생기면 가게에 프로젝트 단위 거둠을 더함.
+  clearSessionKeys((key) => key.includes(projectId));
+  const { purgeProject } = await import("./b_asset_cache");
+  await purgeProject(projectId);
+}
+
+/** 페이지가 알리는 떠남 셋(401) — 고침 있나 · 저장(false · 던짐 = 머묾) · 폐기. */
+export interface ProjectLeaveGuard {
+  dirty: () => boolean;
+  save: () => Promise<unknown>;
+  discard?: () => void | Promise<void>;
+  /** 물음 글 — 없으면 공용 */
+  message?: string;
+  /** 같은 페이지로 보는 주소(B05 ↔ B06) — 그리로 가면 안 묻고 다시 걺 */
+  samePage?: readonly string[];
+}
+
+/** 라우터의 떠남 물음 자리 — 라우터가 들 때 이어 줌(라우터 → 이 파일 한 방향 · 페이지 표를 안 끌게). */
+interface RouterLink {
+  currentRoute: () => string;
+  setLeaveGuard: (guard: (() => Promise<boolean>) | null) => void;
+}
+let routerLink: RouterLink | null = null;
+export function linkRouter(link: RouterLink): void {
+  routerLink = link;
+}
+
+const guards: Array<{ root: HTMLElement; guard: ProjectLeaveGuard }> = [];
+let unloadHooked = false;
+
+/** 화면에 붙은 가드만 — 빠진 페이지 것은 버림. */
+function liveGuards(): ProjectLeaveGuard[] {
+  for (let index = guards.length - 1; index >= 0; index -= 1) {
+    if (!guards[index].root.isConnected) guards.splice(index, 1);
+  }
+  return guards.map((entry) => entry.guard);
+}
+
+/** 저장 안 한 고침이 있나 — 화면에 붙은 가드 모두. */
+export const projectLeaveDirty = (): boolean => liveGuards().some((guard) => guard.dirty());
+
+/** 떠나도 되나 — 고친 가드를 모아 [취소 · 폐기 · 저장] 한 번 · true = 넘어감. */
+export async function askProjectLeave(): Promise<boolean> {
+  const live = liveGuards();
+  if (!live.length) return true;
+  const route = routerLink?.currentRoute() ?? "";
+  if (live.some((guard) => guard.samePage?.includes(route))) {
+    // 라우터가 「넘어감」 뒤 물음을 내림 — 같은 페이지 안 이동이면 한 틱 뒤 다시 걺.
+    window.setTimeout(() => liveGuards().length && routerLink?.setLeaveGuard(askProjectLeave), 0);
+    return true;
+  }
+  const dirty = live.filter((guard) => guard.dirty());
+  if (!dirty.length) return true;
+  const [{ leaveOrStay }, { t }] = await Promise.all([
+    import("@ui/ui_template_leave_dialog"),
+    import("@ui/ui_template_locale"),
+  ]);
+  const message = (dirty.length === 1 && dirty[0].message) || t("Common_Leave_Unsaved");
+  const got = await leaveOrStay(message, {
+    save: async () => {
+      for (const guard of dirty) {
+        if (guard.dirty() && (await guard.save()) === false) throw new Error("저장 못 함");
+      }
+    },
+    stillDirty: () => dirty.some((guard) => guard.dirty()),
+    discard: async () => {
+      for (const guard of dirty) await guard.discard?.();
+    },
+  });
+  return got !== "stay";
+}
+
+/** 페이지를 세울 때 한 번 — `root` 가 화면에서 빠지면 스스로 풂 · 탭 닫기도 물음. */
+export function guardProjectLeave(root: HTMLElement, guard: ProjectLeaveGuard): void {
+  liveGuards(); // 빠진 옛 페이지를 붙들지 않음
+  guards.push({ root, guard });
+  if (!unloadHooked) {
+    unloadHooked = true;
+    window.addEventListener("beforeunload", (event) => {
+      if (!projectLeaveDirty()) return;
+      event.preventDefault();
+      event.returnValue = "";
+    });
+  }
+  routerLink?.setLeaveGuard(askProjectLeave);
+}

A00_Common/b_svg_zoom_pan.ts

@@ -15,7 +15,7 @@
  * 그리는 일은 안 한다 — 넘겨받은 `layer` 에 `transform` 만 적는다.
  * ========================================================================== */
 
-import { wheelEventIn } from "./input_prefs";
+import { isPanButton, swallowNextMenu, wheelEventIn } from "./input_prefs";
 
 /** 줌·팬 상태 — 다시 그릴 때 배율을 되살리는 데 쓴다(2026-08-22 사용자 ③). */
 export interface ZoomPanState {
@@ -75,7 +75,7 @@ export interface SvgZoomPanOptions {
   /** 휠을 줌에 묶을지(기본 안 묶음). 묶으면 **커서 아래 지점**을 붙잡고 확대한다.
    *  `"ctrl"` = Ctrl+휠만 줌 · 맨 휠은 페이지 스크롤에 둠. */
   wheelZoom?: boolean | "ctrl";
-  /** 팬을 시작할 누름인지 — 안 주면 가운데 버튼만. 고르기가 없는 빈 곳 왼쪽 끌기를 더할 때 쓴다. */
+  /** 팬을 시작할 누름인지 — 안 주면 ☰ [설정] 옮기기 버튼(가운데는 늘). 고르기가 없는 빈 곳 왼쪽 끌기를 더할 때 쓴다. */
   panStart?: (event: PointerEvent) => boolean;
 }
 
@@ -166,9 +166,14 @@ export function attachSvgZoomPan(options: SvgZoomPanOptions): ZoomPanHandle {
   svg.addEventListener("pointerdown", (event) => {
     // 누름마다 풂 — 가운데 단추 팬 뒤엔 click 이 안 와 `moved` 가 남아 왼쪽 누름을 삼켰음(259-1)
     moved = false;
-    // 팬은 **가운데 버튼**만(기본). 좌클릭은 그 화면의 고르기 몫이다.
-    if (!(options.panStart ? options.panStart(event) : event.button === 1)) return;
-    event.preventDefault();
+    // 팬 = ☰ [설정] 옮기기 버튼(가운데는 늘 · 588-4) · 왼쪽이면 안 도형이 잡은 누름은 비킴 · 끈 뒤 click 은 아래서 막음
+    const claimed =
+      event.button === 0 &&
+      (event.defaultPrevented ||
+        (event.target as Element | null)?.hasPointerCapture?.(event.pointerId));
+    if (!(options.panStart ? options.panStart(event) : isPanButton(event.button) && !claimed))
+      return;
+    if (event.button !== 0) event.preventDefault(); // 왼쪽은 안 도형의 mousedown 을 살림
     panning = true;
     moved = false;
     lastX = event.clientX;
@@ -191,6 +196,7 @@ export function attachSvgZoomPan(options: SvgZoomPanOptions): ZoomPanHandle {
   const endPan = (event: PointerEvent): void => {
     if (!panning) return;
     panning = false;
+    if (moved && event.button === 2) swallowNextMenu(); // 오른쪽 끌어 옮김 뒤 메뉴 안 뜸
     svg.classList.remove("is-panning");
     try {
       svg.releasePointerCapture(event.pointerId);

A00_Common/b_workflow_nav.ts

@@ -1,9 +1,4 @@
-import {
-  API_BASE_URL,
-  CURRENT_PROJECT_ID_KEY,
-  ROUTES,
-  type RoutePath,
-} from "@config/config_frontend";
+import { API_BASE_URL, ROUTES, type RoutePath } from "@config/config_frontend";
 import {
   hideLoadingOverlay,
   setLoadingOverlayProgress,
@@ -16,7 +11,12 @@ import {
   fetchSurfaceStatus,
 } from "../B04_PreProcess/B04_PreProcess_Api_Fetch";
 import { isProjectPreloaded, setPreloadTarget } from "./b_asset_cache";
-import { enterProject } from "./b_project_switch";
+import {
+  currentProjectId,
+  enterProject,
+  forgetProject,
+  setCurrentProject,
+} from "./b_project_switch";
 import { navigateTo } from "./router";
 
 export interface WorkflowState {
@@ -77,7 +77,7 @@ export async function fetchWorkflowState(projectId: string): Promise<WorkflowSta
 /** 기억한 현재 프로젝트가 서버에 없으면(지워짐 · 권한 없음) 기억을 비우고 true.
  *  그 밖의 실패(서버 오류 · 끊김)는 false — 기억을 지우지 않고 페이지가 하던 대로 둔다. */
 export async function dropGoneProject(): Promise<boolean> {
-  const projectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY);
+  const projectId = currentProjectId();
   if (!projectId) return false;
   try {
     await fetchWorkflowState(projectId);
@@ -85,7 +85,7 @@ export async function dropGoneProject(): Promise<boolean> {
   } catch (error) {
     const status = (error as { status?: number }).status;
     if (status !== 403 && status !== 404) return false;
-    localStorage.removeItem(CURRENT_PROJECT_ID_KEY);
+    forgetProject(projectId);
     return true;
   }
 }
@@ -105,7 +105,7 @@ export function goToWorkflowStage(projectId: string, route: RoutePath): Promise<
     projectId,
     async (id) => (await fetchWorkflowState(id)).project_name || id,
   ).then(() => {
-    localStorage.setItem(CURRENT_PROJECT_ID_KEY, projectId);
+    setCurrentProject(projectId);
     // 단계가 바뀌어 이동하는 자리다 — 캐시를 버려 다음 화면이 새 상태를 본다.
     clearWorkflowStateCache();
     if (!PRELOAD_REQUIRED_ROUTES.includes(route)) {

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_calc_server.ts

@@ -142,18 +142,12 @@ export interface CalcRequest {
   pick: (results: Record<string, unknown>) => unknown;
 }
 
-/** F7 구조물 면적 · C4 소단 구간 — 등록부 `node:` 입력 그대로. */
+/** F7 구조물 면적 — 등록부 `node:` 입력 그대로. */
 export const areasRequest = (rows: unknown[]): CalcRequest => ({
   run: ["structure.layouts"],
   inputs: { detail: { cross_sections: rows } },
   pick: (results) => (results["structure.layouts"] as { areas: unknown }).areas,
 });
-export const bermRequest = (structures: unknown[]): CalcRequest => ({
-  run: ["cross.berm_spans"],
-  inputs: { berm: { structures, chainages: [] } },
-  pick: (results) => (results["cross.berm_spans"] as { spans: unknown }).spans,
-});
-
 export const trialRequest = (id: string, args: unknown[]): CalcRequest => ({
   run: [id],
   inputs: { args: { [id]: args } },

A00_Common/design/design_facility_lane.ts

@@ -8,20 +8,10 @@
  *   입력 = 관 알림(배수유역도 · B06 관 목록) · 구조물(보기 고침 · 저장분) · 종류 표 · 측점 간격 · 추가 측점(가게)
  *   관 id 장부 = 관 고정 id 가 쥔 세션 id 를 그 자리로(411-B) · 헛 id 정리(411-E) — 어느 보기에서 고쳐도
  *   계획고 편집 옮김(사라진 측점 → 새 측점 · 213-2) = 사용자 고침만 · 노선 따라감(`follow`)은 안 옮김(계산 묶음 몫 · 349-0d)
- *   소단 사본(세션 `berm`) = 구조물 소단 구간 — 쓰는 자리 여기 하나(B05 만 열어도 · 같으면 안 씀 · 쓰면 cross 한 번 · 467)
  * ========================================================================== */
 
 import { useDesignStore } from "./design_store";
-import { pageRouteId } from "./design_page_route";
-import { readState } from "../b_page_state";
-import {
-  bermSpansFromStructures,
-  writeBermSpans,
-  type BermSpan,
-} from "../../B06_Section/B06_Section_UI_Page_Persist";
 import { pipeIdAt, placePipeIds, prunePipeIds, withPipeIds } from "./design_pipe_ids";
-import { calcOnServerNow } from "./design_calc_sites";
-import { bermRequest, calcChecked, calcOnServerOnly } from "./design_calc_server";
 import { plannedIrregular } from "./design_structure_status";
 import { planStations } from "../../common_util/common_util_structure_station";
 import { followPipeReports } from "../../B05_Profile/logic/B05_Profile_Pipeline_Follow";
@@ -99,7 +89,7 @@ export function createFacilityLane(
   let types: StructureType[] = [];
   let stored: StructureInstance[] | null = null;
   let structures: StructureInstance[] = [];
-  let structuresKnown = false; // 구조물을 받기 전 = 소단 사본 안 씀(빈 목록으로 저장분 소단을 지우지 않게)
+  let structuresKnown = false; // 구조물을 받기 전 = 측점 계획 모름(빈 목록으로 저장 시설 측점을 지우지 않게)
   /** 마지막 관 알림 — 노선 따라감 · 관 초안이 바뀌면 이것을 초안 측점으로 다시 맞춤. */
   let reported: LanePipe[] | null = null;
   let pipes: LanePipe[] = [];
@@ -152,36 +142,6 @@ export function createFacilityLane(
 
   const marks = (): StructureInstance[] => [...structures, ...pipesToStructureMarks(pipes)];
 
-  /** 소단 사본 = 지금 구조물의 소단 구간(467 · 사본 없는 동안 다시 셈 = 저장분 `design.berm`) · 같으면 안 씀 ·
-   *  쓰면 저장 노선 cross 한 번 더(같은 값 측점은 다시 셈 기억이 건너뜀 · 묶음은 늦게 불러옴 · 순환 없음). */
-  function syncBerm(): void {
-    const routeId = pageRouteId(projectId);
-    if (!structuresKnown || routeId === null) return;
-    // 계산 자리 quantity = server 면 잠잠 뒤 서버 값만(511-A) · 아니면 브라우저 셈
-    if (calcOnServerNow("quantity")) {
-      void calcOnServerOnly<BermSpan[]>("quantity", "C4.copy", bermRequest(structures)).then(
-        (next) => next && putBerm(routeId, next),
-      );
-      return;
-    }
-    putBerm(
-      routeId,
-      calcChecked("quantity", "cross.berm_spans", bermSpansFromStructures, [structures]),
-    );
-  }
-
-  function putBerm(routeId: number, next: BermSpan[]): void {
-    const copy = readState<BermSpan[]>("berm", projectId, routeId);
-    if (Array.isArray(copy) && JSON.stringify(copy) === JSON.stringify(next)) return;
-    writeBermSpans(projectId, routeId, next);
-    void Promise.all([import("./design_pipeline_cross"), import("./design_pipeline_page")])
-      .then(([cross, page]) => {
-        cross.forceCross();
-        page.pipelineCross(projectId);
-      })
-      .catch(() => undefined);
-  }
-
   /** 측점 계획 입력이 다 옴 — 모름(관 알림 전 · 구조물 받기 전)을 빈 목록으로 셈하면 종단도가 저장 시설 측점
    *  (관 등)을 뺀 선으로 횡단을 다시 셈 · 유토 배지가 잠깐 틀림(473 · 요구 272). */
   const known = (): boolean => types.length > 0 && reported !== null && structuresKnown;
@@ -234,14 +194,12 @@ export function createFacilityLane(
       }
       if (next.pipes) reported = [...next.pipes];
       refresh(carryEdits);
-      if (next.structures) run(syncBerm);
     },
     follow() {
       const drafted = store.get("structures");
       structures = drafted ?? stored ?? [];
       structuresKnown ||= drafted !== null || stored !== null;
       refresh(false);
-      run(syncBerm);
     },
     setIntervalM(next) {
       if (next > 0 && next !== intervalM) {

A00_Common/design/design_leave.ts

@@ -4,7 +4,7 @@
  * 공용 물음(`ui_template_leave_dialog` · [취소] [폐기] [저장]).
  *
  * 고침 = 초안 통 칸 중 고침이 아닌 칸(고름 · 관 id 장부 · 종류 캐시 · 고른 구조물 넘김 · 소단 사본 = 구조물 파생) ·
- *   다른 페이지 칸(b08 · b09) · 저장 뒤에도 남기는 표준 횡단면(std-cross)을 뺀 것.
+ *   다른 페이지 칸(b08 · b09 · D · E) · 저장 뒤에도 남기는 표준 횡단면(std-cross)을 뺀 것.
  * 횡단 초안은 [저장] 뒤에도 세션에 남음 — 그래서 「있음」이 아니라 **마지막 깨끗한 때와 다름**으로 봄:
  *   [저장] · [확정]이 끝나면 `markDesignClean` 이 그때 지문을 적음 · [초기화]는 초안을 다 지우고 새로 읽음.
  * B05 ↔ B06 는 한 페이지 — 그 사이 이동은 묻지 않음.
@@ -12,18 +12,17 @@
  * ========================================================================== */
 
 import { ROUTES } from "@config/config_frontend";
-import { leaveOrStay } from "@ui/ui_template_leave_dialog";
 import { t as L } from "@ui/ui_template_locale";
-import { listenWhileAlive } from "@ui/ui_template_window_watch";
+import { guardProjectLeave } from "../b_project_switch";
 import {
   clearState,
+  draftFilled,
   namesInBucket,
   readByKey,
   routeStateKeys,
   stateKey,
   type StateName,
 } from "../b_page_state";
-import { currentRoute, setLeaveGuard } from "../router";
 
 /** 초안 통이지만 고침으로 안 보는 칸 — 묻지 않고 [폐기]에도 안 지움. */
 const NOT_EDITS = new Set<StateName>([
@@ -32,17 +31,13 @@ const NOT_EDITS = new Set<StateName>([
   "structure-pick",
   "structure-type-cache",
   "std-cross",
-  "berm", // 소단 사본 — 열 때 시설 줄이 구조물에서 씀(272 · 고침은 `structures` 칸)
 ]);
-const OTHER_PAGE = /^b0[89]-/;
+const OTHER_PAGE = /^(b0[89]|d0\d|e0\d)-/;
 
 export function editDraftNames(): StateName[] {
   return namesInBucket("draft").filter((name) => !NOT_EDITS.has(name) && !OTHER_PAGE.test(name));
 }
 
-const filled = (raw: string | null): raw is string =>
-  raw !== null && raw !== "" && raw !== "{}" && raw !== "[]";
-
 /** 고침 칸 지문 — 모든 노선 것 · 빈 칸 뺌 · 고침이 없으면 "". */
 export function editSignature(projectId: string): string {
   const parts: string[] = [];
@@ -51,7 +46,7 @@ export function editSignature(projectId: string): string {
     const keys = own ? [own] : routeStateKeys(name, projectId);
     for (const key of keys.sort()) {
       const raw = readByKey(key);
-      if (filled(raw)) parts.push(`${key}=${raw}`);
+      if (raw !== null && draftFilled(raw, name, projectId)) parts.push(`${key}=${raw}`);
     }
   }
   return parts.join("\n");
@@ -93,10 +88,8 @@ export function discardDesignEdits(projectId: string): void {
   editDraftNames().forEach((name) => clearState(name, projectId));
 }
 
-const SAME_PAGE = new Set<string>([ROUTES.B05_PROFILE, ROUTES.B06_SECTION]);
-
 /**
- * 페이지를 세울 때 한 번 — `root` 가 화면에서 빠지면 스스로 풂.
+ * 페이지를 세울 때 한 번 — `root` 가 화면에서 빠지면 스스로 풂(공용 `guardProjectLeave` 위 얇은 껍질).
  * `save` = [저장] 한 줄기(`saveSharedDesign(shared, false)`).
  */
 export function guardDesignLeave(
@@ -104,26 +97,11 @@ export function guardDesignLeave(
   root: HTMLElement,
   save: () => Promise<unknown>,
 ): void {
-  const unload = (event: BeforeUnloadEvent): void => {
-    if (!root.isConnected || !designDirty(projectId)) return;
-    event.preventDefault();
-    event.returnValue = "";
-  };
-  listenWhileAlive(window, "beforeunload", root, unload); // 다시 세운 옛 페이지를 안 붙듦(298-3)
-  const guard = async (): Promise<boolean> => {
-    if (!root.isConnected) return true;
-    if (SAME_PAGE.has(currentRoute())) {
-      // 라우터가 「넘어감」 뒤 물음을 내림 — 같은 페이지 안 이동이면 한 틱 뒤 다시 걺.
-      window.setTimeout(() => root.isConnected && setLeaveGuard(guard), 0);
-      return true;
-    }
-    if (!designDirty(projectId)) return true;
-    const got = await leaveOrStay(L("B05_Design_Leave"), {
-      save,
-      stillDirty: () => designDirty(projectId),
-      discard: () => discardDesignEdits(projectId),
-    });
-    return got !== "stay";
-  };
-  setLeaveGuard(guard);
+  guardProjectLeave(root, {
+    dirty: () => designDirty(projectId),
+    save,
+    discard: () => discardDesignEdits(projectId),
+    message: L("B05_Design_Leave"),
+    samePage: [ROUTES.B05_PROFILE, ROUTES.B06_SECTION],
+  });
 }

A00_Common/design/design_page.css

@@ -55,16 +55,9 @@
   display: none;
 }
 
-.b05-route-profile__tools > .b05-route-profile__popout {
-  padding: var(--btn-bar-padding);
-  font-size: var(--btn-bar-font-size);
-}
-
-/* 유토곡선 · 배수유역 판 [창 분할](계획서 325-3) — 종단 [창 분할]과 같은 양식 · 유토는 판 좌상단에 띄움. */
+/* 유토곡선 · 배수유역 판 [창 분할](계획서 325-3) — 종단 [창 분할]과 같은 양식(부품 단추 단 18 · 553-2) · 유토는 판 좌상단에 띄움. */
 .b05-subpanel__popout {
   flex: none;
-  padding: var(--btn-bar-padding);
-  font-size: var(--btn-bar-font-size);
 }
 
 .b05-profile__masshaul-overlay > .b05-subpanel__popout {

A00_Common/design/design_page.ts

@@ -15,7 +15,8 @@
  * 숨으면 3D 그리기 루프 · 포인터 듣기를 떼고, 보이면 가게 값으로 다시 그린다.
  * ========================================================================== */
 
-import { CURRENT_PROJECT_ID_KEY, ROUTES, type RoutePath } from "@config/config_frontend";
+import { ROUTES, type RoutePath } from "@config/config_frontend";
+import { currentProjectId } from "../b_project_switch";
 import { showToast } from "@ui/ui_template_elements";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
 import { createWorkflowLayout, type WorkflowLayoutHandle } from "@ui/ui_template_workflow_layout";
@@ -49,6 +50,12 @@ import {
   peekSectionDetail,
 } from "../../B06_Section/B06_Section_Section_Store";
 import "./design_page.css";
+// 클래스로 붙이는 부품(체크 · 빈 상태 · 범례 · 보조 글 · 표)의 CSS — B05 · B06 화면 파일이 시험 때문에 import 없이 클래스만 씀(553-2)
+import "@ui/ui_template_checkbox";
+import "@ui/ui_template_empty";
+import "@ui/ui_template_flow_legend";
+import "@ui/ui_template_table";
+import "@ui/ui_template_text";
 
 export type { DesignPageShared } from "./design_shared";
 
@@ -118,7 +125,7 @@ export function renderDesignPage(root: HTMLElement): MountedPage {
   const page = document.createElement("div");
   page.className = "design-page";
   root.replaceChildren(page);
-  const projectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY) ?? "";
+  const projectId = currentProjectId();
   pinDraftProject(projectId); // 연 프로젝트 고정(388-3) — 다른 탭이 바꿔도 이 탭 초안 칸 그대로
   void openCalcSites(projectId); // 계산 자리 판(504-2) — 열 때 한 번 · 열린 동안 바뀐 판은 다음 열기부터
   usePipeIds(projectId || null); // 관 세션 id 장부 = 이 프로젝트(323-5 · 카드 · 알약 · 종단 · 3D 같은 id)

A00_Common/design/design_page_data.ts

@@ -15,6 +15,7 @@
 
 import { fetchDetailPipePoints } from "../../B04_PreProcess/B04_PreProcess_Api_Fetch";
 import type { SectionContextResponse } from "../../B06_Section/B06_Section_Api_Fetch";
+import { forgetSavedLists, noteSavedList } from "../b_page_state";
 import { setPageRouteId } from "./design_page_route";
 export { pageRouteId } from "./design_page_route";
 import {
@@ -36,11 +37,17 @@ function once<T>(key: string, load: () => Promise<T>): Promise<T> {
 
 /** 저장 구조물(structures.json · 판번호 · 정의 판). */
 export const pageStructures = (projectId: string): ReturnType<typeof fetchStructures> =>
-  once(`structures:${projectId}`, () => fetchStructures(projectId));
+  once(`structures:${projectId}`, () => fetchStructures(projectId)).then((saved) => {
+    noteSavedList(projectId, "structures", !!saved?.structures?.length); // 떠남 확인의 「[]」 판정(469-3)
+    return saved;
+  });
 
 /** 저장 관(pipe_points.json · 유역). */
 export const pagePipes = (projectId: string): ReturnType<typeof fetchDetailPipePoints> =>
-  once(`pipes:${projectId}`, () => fetchDetailPipePoints(projectId));
+  once(`pipes:${projectId}`, () => fetchDetailPipePoints(projectId)).then((saved) => {
+    noteSavedList(projectId, "pipes", !!saved?.pipe_points?.length);
+    return saved;
+  });
 
 /** 정의 판이 바뀌었으면 종류 캐시 버림 — 페이지마다 한 번(탭이 다시 보일 때는 `onStaleStructureTypes`). */
 export const pageTypesChecked = (projectId: string): Promise<boolean> =>
@@ -49,6 +56,7 @@ export const pageTypesChecked = (projectId: string): Promise<boolean> =>
 /** 저장 정본이 바뀜 · 페이지를 떠남(`leaving` = 노선 id 칸도) — 다음에 부르면 한 번 다시 받음. */
 export function forgetPageData(projectId: string, leaving = false): void {
   for (const key of [...memo.keys()]) if (key.endsWith(`:${projectId}`)) memo.delete(key);
+  forgetSavedLists(projectId);
   if (leaving) setPageRouteId(projectId, null);
 }
 

A00_Common/design/design_pipeline_page.ts

@@ -19,7 +19,7 @@
  *   초안이 있으면 측점을 냄(새로고침 · 다시 열기 = 초안 측점 · 466).
  * 노선 초안을 버리면(되돌리기 · [저장 전으로]) 초안 전 상세 · 횡단 초안 칸 그대로(349-0k · 349-0o) · 가게 측점 ·
  *   종단 = 그 상세 측점 · 저장 기준(466) · 그 뒤 같은 측점 목록은 가게에 다시 안 냄(상세 측점이 묶음과 달라도 · 349-0q).
- * [저장](sub5)이 서버 정본 — 노선을 먼저 보내고 `pendingAlignment(DRAFT_ROUTE_ID)` 를 새 노선에 보냄.
+ * [저장]이 서버 정본 — 노선 바뀐 [저장]의 계획고 = 저장분 옮김 대 손댐만(`routeGradeTouch` · 서버가 자기 옮김 위에 · 498-2).
  * ========================================================================== */
 
 import { createDesignPipeline, type DesignPipeline } from "./logic/design_pipeline";
@@ -91,6 +91,7 @@ import {
   createPlanlineStage,
   gradeRange,
   routeRange,
+  type GradeTouch,
 } from "../../B05_Profile/logic/B05_Profile_Pipeline_Grade";
 import { groundPviAt, profileAt } from "./design_calc_profile";
 import {
@@ -127,6 +128,7 @@ interface PagePipeline {
   detail(): SectionDetailResponse | null;
   /** 노선 초안 버림 동안(그리기 멈춤 ~ 풂) — 저장 노선 낡음 다시 셈을 안 띄움(472-5 덧). */
   holding(): boolean;
+  touch(): Promise<GradeTouch | null>;
   commit(): void;
   dispose(): void;
 }
@@ -137,6 +139,9 @@ type Facilities = Pick<DesignStoreValues, "pipes" | "structures">;
 const pages = new Map<string, PagePipeline>();
 const same = (a: unknown, b: unknown): boolean => JSON.stringify(a) === JSON.stringify(b);
 
+/** 노선 바뀐 [저장]의 계획고 손댐(498-2) — 묶음이 없거나 못 가르면 null(본문 = 노선 0 칸 통째 · 옛 길). */
+export const routeGradeTouch = async (id: string) => (await pages.get(id)?.touch()) ?? null;
+
 /** 편집기에 넘길 다리 — 그 프로젝트 묶음을 처음 부를 때 세움. */
 export function routeDraftBridge(
   projectId: string,
@@ -271,7 +276,12 @@ function createPagePipeline(
         route.curves,
         (patch.pipes ?? inputs.pipes ?? []) as PlanPipe[],
         (patch.structures ?? inputs.structures ?? []) as PlanStructure[],
-        { intervalM: options.stationIntervalM, types: enabled, ...snapOptions(inputs.route, plan) },
+        {
+          intervalM: options.stationIntervalM,
+          types: enabled,
+          ...snapOptions(inputs.route, plan),
+          plus: patch.plusStations ?? inputs.plusStations ?? undefined, // stations 단계와 같게(498-2)
+        },
       ).map((station) => station.chainageM),
   });
   /** cross 서버 단계 맥락(511-B B-4) — 저장 노선 · 상세 · 시설 · 편집(`design_pipeline_cross_server`). */
@@ -328,14 +338,13 @@ function createPagePipeline(
         groundPvi: groundPviAt, // 계산 자리 「서버」 = 서버 Node(511-B B-3)
       }),
       profile: profileAt,
-      // 단면 유형 = 새 지형 상단측 · 소단 = 지금 구조물(365-5) · 저장 노선 = 다시 셈 창구 한 벌(365-4) · 엔진은
-      // 창구 출력을 앞 결과로 안 이어 씀(초안 = 새로고침)
+      // 단면 유형 = 상단측 · 소단 = 얹힌 제원(577-2) · 저장 노선 = 다시 셈 창구(365-4) · 엔진은 창구 출력 안 이어 씀
       cross: (ctx) => {
         const stations = ctx.out.ground?.stations ?? [];
         const status = statusOf(ctx.inputs.pipes, ctx.inputs.structures);
         const engine = () =>
           crossStage.stage({
-            ...contextCross(ctx, status, options.bermAt?.(ctx.inputs.structures) ?? null),
+            ...contextCross(ctx, status),
             prev: ctx.prev && savedOut.has(ctx.prev) ? null : ctx.prev,
           });
         // 계산 자리 cross = server — 엔진 길도 서버 Node 단계(같은 TS · 511-B B-4) · 못 받음 = 브라우저
@@ -678,6 +687,7 @@ function createPagePipeline(
     ownsCross: Boolean(options.savedCross),
     detail: () => draftDetailOf(projectId),
     holding: () => holding,
+    touch: async () => (await pipe.settled(), followStage.touch(pageSaved.storedEdits(), pipe)),
     commit: () => void (beforeDraft = null),
     dispose() {
       disposed = true;

A00_Common/design/design_pipeline_page_saved.ts

@@ -82,6 +82,11 @@ export function createPageSaved(
     savedSource,
     canonChanged,
     savedEdits,
+    /** 서버 저장분 계획고 편집(세션 초안 뺌) — 노선 바뀐 [저장]에서 서버가 옮기는 그 값(498-2). */
+    storedEdits(): AlignmentEdits {
+      const longitudinal = canonDetail()?.longitudinal;
+      return (longitudinal && readAlignment(longitudinal)?.edits) ?? emptyEdits();
+    },
     storedPvi,
     crossNow,
     drafted,

A00_Common/design/design_pipeline_page_types.ts

@@ -14,7 +14,6 @@ import type {
   AlignmentBase,
   AlignmentEdits,
 } from "../../B05_Profile/logic/B05_Profile_UI_Profile_Alignment";
-import type { BermAt } from "../../B05_Profile/logic/B05_Profile_Pipeline_Detail";
 import type { SectionDetailResponse } from "../../B06_Section/B06_Section_Api_Fetch";
 import type { DesignStoreValues } from "./design_store";
 
@@ -61,8 +60,6 @@ export interface PagePipelineOptions {
   stationKeys?: (routeId: number, detail: SectionDetailResponse) => string[];
   /** 고리가 `RECONCILE_ROUNDS` 바퀴 안에 안 맞음 — 「계산 불안정」 한 줄(365-2). */
   onUnstable?: () => void;
-  /** 소단 구간(지금 구조물 목록 → 누가거리마다 제원) — 초안 cross 가 따라간 구조물로 소단을 셈(365-5). */
-  bermAt?: (structures: unknown) => BermAt;
   /** 저장 노선 cross = 다시 셈 창구 한 벌(365-4 · 측점이 상세와 다르면 null = 엔진) · 주면 종단도는 따로 안 셈. */
   savedCross?: (
     d: SectionDetailResponse,

A00_Common/design/design_profile.ts

@@ -24,6 +24,7 @@ import {
 } from "../../B05_Profile/logic/B05_Profile_UI_Profile_Data";
 import { showToast } from "@ui/ui_template_elements";
 import { hasStaleDesigns } from "../../B06_Section/B06_Section_UI_Section_Common";
+import { savedSectionDetail } from "../../B06_Section/B06_Section_Section_Canon";
 import {
   blocksMinCover,
   findMinCoverViolations,
@@ -267,7 +268,8 @@ export function createDesignProfile(ctx: DesignProfileContext) {
     restore: () => void (store.resync() ? rebuild() : draw()),
     restoreSaved: () => store.restoreSaved(),
     canRestoreSaved: () => store.canRestoreSaved(),
-    refresh: () => renderBalance(),
+    // 고름 직후 종단도도 한 번 — 붉은 강조가 다음 그림을 기다리지 않게(423).
+    refresh: () => (renderBalance(), drawSoon()),
   });
 
   /** 편집을 적용한다. 법정 위반 정책이 block이면 새 위반이 생기는 편집을 막는다. false = 막힘. */
@@ -294,9 +296,14 @@ export function createDesignProfile(ctx: DesignProfileContext) {
     return true;
   }
 
-  /** 계획선 측점 줄 = 측점 한 벌 — 셈은 `design_profile_base` 몫(계산 묶음 planline 도 같은 기준). */
+  /** 계획선 측점 줄 = 측점 한 벌 — 셈은 `design_profile_base` 몫(계산 묶음 planline 도 같은 기준). 옛 측점 =
+   *  저장 정본 상세 — 갈아끼운 상세(새 측점 목록)면 옮긴 구조물 옛 측점 꼭짓점이 안 옮겨져 계획고가 갈림(583). */
   const listed = (): AlignmentBase | null =>
-    listedBase(storedBase, detail, planted ? irregularStations : null);
+    listedBase(
+      storedBase,
+      (routeId !== null && savedSectionDetail(projectId, routeId)) || detail,
+      planted ? irregularStations : null,
+    );
 
   /** 계획고 [저장] 조각(472-6) — 저장 뒤 서버 선형으로 기준을 갈아 다시 그림. */
   const alignmentSave = createProfileSave({

A00_Common/design/design_profile_popout.ts

@@ -123,6 +123,7 @@ export function attachProfilePopout(
   button: HTMLButtonElement,
 ): void {
   button.className = "ui-btn ui-btn--ghost b05-route-profile__popout";
+  button.setAttribute("data-size", "18"); // 부품 단추 단 18(553-2) — 옆 도구 단추와 같은 키
   button.title = "종단 하단 패널을 별도 창으로 분할 · 다시 누르면 결합";
   attachPopout(profile, {
     piece: profile.root,
@@ -139,6 +140,7 @@ export function attachSubPanelPopouts(profile: DesignProfile): void {
   const subButton = (title: string): HTMLButtonElement => {
     const button = document.createElement("button");
     button.className = "ui-btn ui-btn--ghost b05-subpanel__popout";
+    button.setAttribute("data-size", "18");
     button.title = title;
     return button;
   };

A00_Common/design/design_save.ts

@@ -11,7 +11,7 @@
  * 노선(346-3 · 6-B) — 노선 초안이 마지막 저장과 다르면 같은 본문에 `route`(계약 `RouteDraft`) · `carry`(옛 노선
  * 세션 횡단 고침 원본)를 실음. 서버가 맨 앞에서 노선 저장(관 · 구조물 · 추가 측점 좌표 따라감 · 종횡단 · 계획고
  * 이월) → 관 · 구조물 초안 다시 얹기 → 새 노선으로 위 차례 → 횡단 = 세션 고침을 측점 열쇠로 넘긴 patch(같은 TS ·
- * Node). 이 때 조각은 기본 조각만(화면 몫 일 = 옛 노선 판이라 건너뜀) · 계획고 초안 = 노선 초안 칸 ?? 옛 노선 칸 ·
+ * Node). 이 때 조각은 기본 조각만(화면 몫 일 = 옛 노선 판이라 건너뜀) · 계획고 = 손댐만(서버 옮김 위에 · 498-2) ·
  * 손 상단측은 안 보냄(요구 274) · [확정]도 [저장]으로(새 노선을 본 뒤 다시 [확정]) · 다 저장하면 페이지 다시 세움.
  *
  * ⚠ 차례를 바꾸면 결과가 갈린다 — 관 목록은 스냅샷이라 구간값(암거 옵션)보다 먼저, 상단측은
@@ -49,6 +49,24 @@ import {
 } from "../../B05_Profile/B05_Profile_UI_RouteEdit_Apply";
 import type { RouteSaveBody } from "../../B05_Profile/B05_Profile_Api_Replan";
 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;
@@ -166,10 +184,12 @@ export function noticeDroppedEdits(saved: { dropped_edit_chainages?: number[] })
 /** 노선 초안 동안의 계획고 초안 칸 — `design_pipeline_page` 의 `DRAFT_ROUTE_ID` 와 같은 값(sub7). */
 const DRAFT_ROUTE_ID = 0;
 
-/** 계획고 조각 — 노선이 바뀌면 노선 초안 칸(`DRAFT_ROUTE_ID`) ?? 옛 노선 칸의 초안(서버가 새 노선 번호로 고쳐
- *  씀 · 측점이 없는 자리는 버리고 알림 · 213-2) · 저장 뒤 두 칸 다 비움. */
-function alignmentPart(routeId: number, moved: boolean): SavePart | null {
-  const draft = (moved ? pendingAlignment(DRAFT_ROUTE_ID) : null) ?? pendingAlignment(routeId);
+/** 계획고 조각 — 노선이 바뀌면 사용자 손댐(`touch` · 서버가 자기 옮김 위에 얹음 · 498-2) · 못 가르면 노선 초안
+ *  칸(`DRAFT_ROUTE_ID`) ?? 옛 노선 칸의 초안 통째(서버가 새 노선 번호로 고쳐 씀) · 측점이 없는 자리는 버리고 알림
+ *  (213-2) · 저장 뒤 두 칸 다 비움. */
+function alignmentPart(routeId: number, moved: boolean, touch: GradeTouch | null): SavePart | null {
+  const draft =
+    touch?.edits ?? (moved ? pendingAlignment(DRAFT_ROUTE_ID) : null) ?? pendingAlignment(routeId);
   if (!draft) return null;
   return {
     body: { route_id: routeId, ...draft },
@@ -188,6 +208,7 @@ async function defaultPart(
   routeId: number,
   confirm: boolean,
   moved: boolean,
+  touch: GradeTouch | null,
 ): Promise<SavePart | null> {
   switch (key) {
     case "settings": // 노선 뒤 — 노선 저장이 새로 만든 종단에도 경고 기준이 얹힘(448)
@@ -199,7 +220,7 @@ async function defaultPart(
     case "plusStations": // 계획고 앞 — 추가 측점 자리의 계획고 편집이 버려지지 않게(368-2)
       return plusStationsPart(projectId);
     case "alignment":
-      return alignmentPart(routeId, moved);
+      return alignmentPart(routeId, moved, touch);
     case "culvertOptions":
       return culvertOptionsPart(stateKey("culvertopt", projectId, routeId));
     case "uphill":
@@ -244,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();
@@ -257,12 +280,13 @@ export async function saveDesign(
     const parts: Partial<Record<SavePartKey, SavePart | null>> = {};
     // 노선이 바뀌면 횡단 = 옛 노선 세션 고침 원본(서버가 새 측점에 넘김) · 화면 몫 조각은 옛 노선 판이라 안 씀
     const carried = route ? routeCarryPart(ctx.projectId, routeId) : null;
+    const touch = route ? await routeGradeTouch(ctx.projectId) : null;
     for (const key of SAVE_PART_KEYS) {
       if (key === "cross") {
         parts.cross = carried ? carried.cross : await ctx.crossPart(confirm);
         continue;
       }
-      const base = await defaultPart(key, ctx.projectId, routeId, confirm, !!route);
+      const base = await defaultPart(key, ctx.projectId, routeId, confirm, !!route, touch);
       const own = route ? undefined : ctx.parts?.[key];
       parts[key] = own ? await own(base, confirm) : base;
     }
@@ -272,7 +296,7 @@ export async function saveDesign(
       routeId,
       confirm,
       parts,
-      route ? { route, carry: carried?.carry } : {},
+      route ? { route, carry: carried?.carry, alignment_cleared: touch?.cleared } : {},
     );
     if (result.waited) showToast("앞 저장이 끝나기를 기다린 뒤 저장했습니다.", "info");
     // 저장 도중 고침(가림막 동안 키 · 되돌리기 포함 · 505-2) — 조각 정리가 그 고침까지 비우므로 건너뜀(서버는 낸

A00_Common/design/design_save_api.ts

@@ -69,7 +69,7 @@ export async function postDesignSave(
   routeId: number,
   confirm: boolean,
   parts: Partial<Record<SavePartKey, SavePart | null>>,
-  extra: { route?: unknown; carry?: unknown } = {},
+  extra: { route?: unknown; carry?: unknown; alignment_cleared?: unknown } = {},
 ): Promise<DesignSaveResult> {
   const body: Record<string, unknown> = { route_id: routeId, confirm, ...extra };
   for (const key of SAVE_PART_KEYS) {

A00_Common/design/design_shared.ts

@@ -53,14 +53,14 @@ import {
   holdSectionDetail,
   invalidateSectionDetail,
   restoreSectionDetail,
+  swapInFlight,
   swapSectionStations,
 } from "../../B06_Section/B06_Section_Section_Store";
 import {
   refreshCrossDesigns,
   type CrossRefreshInput,
 } from "../../B06_Section/B06_Section_Cross_Refresh";
-import { bermSpansFromStructures, bermSpecAt } from "../../B06_Section/B06_Section_UI_Page_Persist";
-import { areasRequest, bermRequest, calcChecked } from "./design_calc_server";
+import { areasRequest, calcChecked } from "./design_calc_server";
 import { registeredKeys, stationIntervalOf } from "../../B06_Section/B06_Section_Station_Keys";
 import { detailCross } from "../../B05_Profile/logic/B05_Profile_Pipeline_Detail";
 import type { CrossOutput, PipelineStation } from "./logic/design_pipeline_types";
@@ -255,26 +255,21 @@ function startPagePipeline(shared: DesignPageShared, profile: DesignProfile): vo
       each((hooks) => hooks.onFacilitiesFollowed?.(far));
     },
     onUnstable: () => showToast(L("Design_Pipeline_Unstable"), "warning"),
-    // 초안 소단 = 지금 구조물(따라간 자리)의 소단 구간(365-5 · 저장 노선은 다시 셈 창구가 세션 사본으로)
-    bermAt: (structures) => {
-      const list = Array.isArray(structures) ? structures : [];
-      // 계산 자리 quantity = server 면 잠잠 뒤 서버 대조만(초안 미리보기 · 511-A)
-      const spans = calcChecked("quantity", "cross.berm_spans", bermSpansFromStructures, [list], {
-        request: bermRequest(list),
-      });
-      return (chainageM) => bermSpecAt(spans, chainageM);
-    },
     // 저장 노선 횡단 = 다시 셈 창구 한 벌(365-4) — 카드 · 유토곡선 · [저장] 패치가 보는 상세 설계를 늘 고치고 그
     // 값을 묶음 출력으로(발자국 · 평면 횡단 판) · 측점이 상세와 다르면(갈아끼움 전) 묶음 엔진(439)
-    savedCross: (detail, routeId, stations) =>
-      refreshSavedCross(
+    // 새 측점(관 · 구조물 놓음) = 도는 측점 갈아끼움을 기다려 그 상세로 — 안 기다리면 엔진 길로 빠져 구조물
+    // 얹기(평면 비탈 끝 · 폐회로 면적) 없는 한 차례가 화면에 튐(583)
+    savedCross: async (saved, routeId, stations) => {
+      const detail = (await swapInFlight(projectId, routeId))?.detail ?? saved;
+      return refreshSavedCross(
         { projectId, routeId, detail, edits: profile.pipelineSource().edits },
         stations,
         (updated) => {
           if (updated.length) crossDesignsUpdated(shared, updated);
           profile.redraw();
         },
-      ),
+      );
+    },
     plantedBase, // 저장 노선 종단 기준 = 입력이 심는 측점(386-3 · 보기 심기 무관)
     // 저장 상세 측점마다 등록 열쇠 — 초안 자리로 뜬 시설 측점의 입력 짝(주인 id · 457)
     stationKeys: (routeId, detail) =>

A00_Common/design/design_store.ts

@@ -23,7 +23,7 @@
 
 import { onStateRemoved, readState, stateKey, writeState } from "../b_page_state";
 import type { StateName } from "../b_page_state";
-import { CURRENT_PROJECT_ID_KEY } from "../../config/config_frontend";
+import { currentProjectId } from "../b_project_switch";
 import type { StructureInstance } from "../../B05_Profile/B05_Profile_Api_Structures";
 import type { DetailPipeInput } from "../../B04_PreProcess/B04_PreProcess_Api_Fetch";
 import type { PageSettingsBody } from "../../B05_Profile/B05_Profile_Api_Fetch";
@@ -91,11 +91,7 @@ export function pinDraftProject(projectId: string | null): void {
 export function draftProjectId(projectId: string | null = null): string {
   if (projectId) return projectId;
   if (openedProjectId) return openedProjectId;
-  try {
-    return window.localStorage.getItem(CURRENT_PROJECT_ID_KEY) || "-";
-  } catch {
-    return "-";
-  }
+  return currentProjectId() || "-";
 }
 
 interface Slot<T> {
@@ -177,14 +173,10 @@ type MemoryKey = keyof typeof MEMORY_SLOTS;
 /** 멈춘 뒤 세션에 한 번 쓰기까지(ms). */
 export const PERSIST_DELAY_MS = 1000;
 const memory = new Map<string, unknown>();
-const persistTimers = new Map<
-  string,
-  { timer: ReturnType<typeof setTimeout>; write: () => void }
->();
+const persistTimers = new Map<string, ReturnType<typeof setTimeout>>();
 
 function cancelPersist(storageKey: string): void {
-  const pending = persistTimers.get(storageKey);
-  if (pending) clearTimeout(pending.timer);
+  clearTimeout(persistTimers.get(storageKey));
   persistTimers.delete(storageKey);
 }
 
@@ -193,14 +185,6 @@ onStateRemoved((storageKey) => {
   cancelPersist(storageKey);
 });
 
-/** 미뤄 둔 세션 쓰기를 지금 — [저장] 앞 · 시험. */
-export function flushDesignStore(): void {
-  const writes = [...persistTimers.values()];
-  persistTimers.forEach((pending) => clearTimeout(pending.timer));
-  persistTimers.clear();
-  writes.forEach((pending) => pending.write());
-}
-
 function memorySlot<T>(key: MemoryKey, projectId: string | null): Slot<T> {
   const name = MEMORY_SLOTS[key];
   const storageKey = name ? stateKey(name, projectId) : projectId && `memory:${key}:${projectId}`;
@@ -227,7 +211,7 @@ function memorySlot<T>(key: MemoryKey, projectId: string | null): Slot<T> {
         persistTimers.delete(storageKey);
         writeState(name, memory.get(storageKey) ?? null, projectId);
       };
-      persistTimers.set(storageKey, { timer: setTimeout(write, PERSIST_DELAY_MS), write });
+      persistTimers.set(storageKey, setTimeout(write, PERSIST_DELAY_MS));
     },
   };
 }

A00_Common/design/design_structure_form.ts

@@ -136,6 +136,7 @@ export function createSpecForm(links: SpecLinks | null, hooks: SpecFormHooks = {
   ): HTMLElement => {
     if (item.kind === "select") {
       const select = document.createElement("select");
+      select.className = "ui-select";
       const choices = choicesOf(item, values);
       const now = values[item.id] ?? "";
       const drawn = choices.find((ch) => ch.value === now);
@@ -154,6 +155,7 @@ export function createSpecForm(links: SpecLinks | null, hooks: SpecFormHooks = {
     }
     if (item.kind === "text") {
       const input = document.createElement("input");
+      input.className = "ui-input";
       input.type = "text";
       input.maxLength = TEXT_MAX;
       input.value = values[item.id] ?? "";
@@ -283,7 +285,7 @@ export function createSpecForm(links: SpecLinks | null, hooks: SpecFormHooks = {
     if (!c.required && hooks.count?.(c) === undefined) {
       const remove = document.createElement("button");
       remove.type = "button";
-      remove.className = "b05-route__irregular-btn";
+      remove.className = "ui-btn ui-btn--danger-ghost b05-route__irregular-btn";
       remove.textContent = "삭제";
       remove.title = `${c.title} 상자 삭제`;
       remove.dataset.specRemove = c.id;
@@ -333,7 +335,7 @@ export function createSpecForm(links: SpecLinks | null, hooks: SpecFormHooks = {
       if (c.required || (c.max && list.length >= c.max) || hooks.count?.(c) !== undefined) continue;
       const add = document.createElement("button");
       add.type = "button";
-      add.className = "b05-route__irregular-btn b05-structure__spec-add";
+      add.className = "ui-btn ui-btn--ghost b05-route__irregular-btn b05-structure__spec-add";
       add.textContent = `+ ${containerTitle(c, names, groupNames[c.link])}`;
       add.title = "추가";
       add.dataset.specAdd = c.id;

A00_Common/design/design_view_cross.ts

@@ -354,6 +354,7 @@ export async function mountCrossView(
   // 폼 → 횡단 캐시 반영은 따로 뗀 모듈이 맡는다(2026-09-02 분리).
   const pipeOptionsContext: PipeOptionsContext = {
     detail: () => sectionDetail,
+    scope: () => `${projectId}:${currentRouteId}`,
     ford: stationControls.ford,
     box: stationControls.box,
     revetOffset: stationControls.revetOffset,

A00_Common/design/design_view_profile.ts

@@ -11,7 +11,6 @@
  * ========================================================================== */
 
 import { showToast } from "@ui/ui_template_elements";
-import { purgeOtherProjects } from "../b_asset_cache";
 import { createProgressCircle } from "@ui/ui_template_progress";
 import { fetchConfirmedSurface } from "../../B04_PreProcess/B04_PreProcess_Api_Fetch";
 import { clearRouteLatestCache } from "../../B05_Profile/B05_Profile_Api_Fetch";
@@ -96,8 +95,6 @@ export async function mountProfileView(
 ): Promise<void> {
   const activeProjectId = shared.projectId;
   if (!activeProjectId) return;
-  // 새로고침으로 바로 들어온 경우에도 다른 프로젝트 자료는 보관함에서 지운다.
-  void purgeOtherProjects(activeProjectId);
 
   const viewer = createRouteViewer();
   // 구 우클릭 메뉴의 자유 텍스트 구조물 → 레지스트리 타입(2026-08-17 이관 매핑과 동일).
@@ -549,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

@@ -8,7 +8,7 @@
  * 그리기 루프 · 포인터 듣기만 멈추고 WebGL 문맥 · 지형은 살린다. 버림은 페이지를 떠날 때만.
  * ========================================================================== */
 
-import { createButton } from "@ui/ui_template_elements";
+import { mapToolButton } from "@ui/ui_template_map_tools";
 import { openModal } from "@ui/ui_template_modal";
 import { createProgressCircle } from "@ui/ui_template_progress";
 
@@ -73,9 +73,9 @@ export function createViewer3dModal(deps: Viewer3dModalDeps) {
     shown.close();
   }
 
-  const button = createButton({ label: "3D", variant: "ghost", onClick: open });
+  // 평면 도구줄 아이콘 단추(568-2) — 클래스는 가이드 촬영이 잡음.
+  const button = mapToolButton("view3d", { onClick: open }); // 마우스 글 = 공용 표(634-2)
   button.classList.add("b05-route__3d-open");
-  button.title = "3D 화면을 큰 창으로 엽니다 — 닫으면 그리기를 멈춥니다";
 
   return {
     park,

A00_Common/design/logic/design_calc_node_stages.ts

@@ -18,7 +18,6 @@
  * ========================================================================== */
 
 import { readFileSync, statSync } from "node:fs";
-import { bermSpansFromStructures, bermSpecAt } from "@util/common_util_berm_spans";
 import type { FollowingStructure } from "@util/common_util_route_follow";
 import { useCatalogDefinition, type CatalogDefinition } from "@util/common_util_structure_catalog";
 import type { PlanPipe, PlanStructure, PlanType } from "@util/common_util_structure_station";
@@ -189,9 +188,7 @@ async function runStages(
         ctx.inputs.structures ?? savedStructures,
         types,
       );
-      const list = Array.isArray(ctx.inputs.structures) ? ctx.inputs.structures : [];
-      const spans = bermSpansFromStructures(list);
-      return crossStage.stage(contextCross(ctx, status, (at) => bermSpecAt(spans, at)));
+      return crossStage.stage(contextCross(ctx, status));
     },
   };
   if (stages.until === "follow") return followOnly(table, inputs);

A00_Common/design/logic/design_pipeline_stage_inputs.ts

@@ -10,7 +10,6 @@ import {
 } from "../../../common_util/common_util_route_follow";
 import {
   crossWithContext,
-  type BermAt,
   type CrossInput,
   type ShapeStatus,
 } from "../../../B05_Profile/logic/B05_Profile_Pipeline_Detail";
@@ -45,11 +44,10 @@ export function placedFollowInputs(
   };
 }
 
-/** cross 단계 입력 = 시설 맥락(새 자리 그림) · 단면 유형 기본값(상단측) · 소단(지금 구조물) 얹음(365-5 · 457). */
+/** cross 단계 입력 = 시설 맥락(새 자리 그림 · 소단 = 얹힌 제원 · 577-2) · 단면 유형 기본값(상단측) 얹음(365-5 · 457). */
 export const contextCross = (
   ctx: StageContext<"cross">,
   status: ShapeStatus | null,
-  bermAt: BermAt | null,
 ): StageContext<"cross"> => ({
   ...ctx,
   inputs: {
@@ -58,7 +56,6 @@ export const contextCross = (
       ctx.inputs.cross as CrossInput | null,
       ctx.out.ground?.stations ?? [],
       status,
-      bermAt,
     ),
   },
 });

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

@@ -3,11 +3,12 @@
  * D 예정노선 · E 안정성평가 단계 묶음(요구 345 · PLAN 529-1) — B05~B09 틀(`createWorkflowLayout`)을
  *   단계 목록 · 아이콘 · 주소 인자로 그대로 씀. 빈 단계 = 틀 · 좌측 패널([?] [<] [>]) · 단계 막대만.
  *   페이지 길 = 각 폴더 `draft/<폴더>_Route.ts` · 본문이 생기면 그 폴더 페이지로 갈아 끼움.
+ *   떠남(560-4) = `beforeLeave` 가 true 일 때만 — 단계 아이콘 · [<] [>] 는 기다린 뒤 이동 ·
+ *   머리 메뉴 · 뒤로 가기는 같은 함수를 `setLeaveGuard` 로(false = 머묾).
  * ========================================================================== */
 
 import {
   API_BASE_URL,
-  CURRENT_PROJECT_ID_KEY,
   PLAN_STEP_ROUTES,
   STAB_STEP_ROUTES,
   type RoutePath,
@@ -15,7 +16,8 @@ import {
 import { el, hideLoadingOverlay, showLoadingOverlay, showToast } from "@ui/ui_template_elements";
 import { t, type LocaleKey } from "@ui/ui_template_locale";
 import { createWorkflowLayout } from "@ui/ui_template_workflow_layout";
-import { navigateTo, type PageRenderer } from "./router";
+import { guardProjectLeave, setCurrentProject, type ProjectLeaveGuard } from "./b_project_switch";
+import { navigateTo, setLeaveGuard, type PageRenderer } from "./router";
 
 interface GroupFlow {
   routes: readonly RoutePath[];
@@ -26,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,
@@ -35,11 +37,11 @@ const FLOWS: readonly GroupFlow[] = [
       "DE_Step_StabGround",
       "DE_Step_StabSection",
       "DE_Step_Stab3D",
-      "DE_Step_StabReport",
       "DE_Step_StabRock",
       "DE_Step_StabArea",
+      "DE_Step_StabReport",
     ],
-    icons: ["🪨", "📐", "🧊", "📄", "⛰️", "🗺️"],
+    icons: ["🪨", "📐", "🧊", "⛰️", "🗺️", "📄"],
   },
 ];
 
@@ -55,11 +57,21 @@ export function groupFlowOf(
 export function mountGroupStep(
   root: HTMLElement,
   route: RoutePath,
-  parts: { mainContent?: HTMLElement; leftPanel?: HTMLElement } = {},
+  parts: {
+    mainContent?: HTMLElement;
+    leftPanel?: HTMLElement;
+    /** 옛 떠남(저장 등 · false = 머묾) — 페이지가 dirty · save 로 옮기면 지움 */
+    beforeLeave?: () => Promise<boolean>;
+  } & Partial<ProjectLeaveGuard> = {},
 ): void {
   const flow = FLOWS.find((f) => f.routes.includes(route));
   if (!flow) throw new Error(`단계 묶음 밖 주소: ${route}`);
   const active = flow.routes.indexOf(route);
+  const leave = parts.beforeLeave;
+  if (leave) setLeaveGuard(async () => !root.isConnected || (await leave()));
+  // 떠남 셋(401) — 단계 아이콘 · [<] [>] · 머리 메뉴 · 뒤로 모두 라우터 물음 한 자리([취소 · 폐기 · 저장])
+  const { dirty, save, discard, message } = parts;
+  if (dirty && save) guardProjectLeave(root, { dirty, save, discard, message });
   const layout = createWorkflowLayout({
     title: t(flow.labels[active]),
     steps: flow.labels.map((key) => t(key)),
@@ -69,7 +81,10 @@ export function mountGroupStep(
     leftPanel: parts.leftPanel,
     mainContent:
       parts.mainContent ?? el("p", { className: "app-placeholder", text: t("DE_Step_Empty") }),
-    onStepClick: (_index, next) => navigateTo(next as RoutePath),
+    onStepClick: (_index, next) => {
+      if (!leave) return navigateTo(next as RoutePath);
+      void leave().then((ok) => ok && navigateTo(next as RoutePath));
+    },
   });
   root.append(layout.root);
 }
@@ -102,7 +117,7 @@ export async function createGroupProject(
       const detail = typeof data.detail === "string" ? data.detail : `HTTP ${response.status}`;
       throw new Error(detail);
     }
-    localStorage.setItem(CURRENT_PROJECT_ID_KEY, data.project_id);
+    setCurrentProject(data.project_id);
     showToast(t("DE_Reg_Success"), "success");
     navigateTo(firstStep);
   } catch (error) {

A00_Common/index.html

@@ -4,9 +4,65 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>임도 설계 및 견적 자동화</title>
+    <link rel="icon" href="data:," />
+    <!-- 고른 테마를 첫 그림 전에(앱 initThemeAndLang 과 같은 열쇠) · 고른 게 없으면 불러오는 중 판만
+         시스템 설정(어두움)을 따름 -->
+    <script>
+      try {
+        var t = localStorage.getItem("frd_theme");
+        if (t === "dark" || t === "light") document.documentElement.setAttribute("data-theme", t);
+        if (t === "dark" || (!t && matchMedia("(prefers-color-scheme: dark)").matches))
+          document.documentElement.setAttribute("data-boot-dark", "");
+      } catch (e) {}
+    </script>
+    <!-- 불러오는 중(555-1) — 테마 css 가 오기 전이라 색을 박음(--color-bg · --color-text-muted 값) ·
+         첫 페이지가 #app-outlet 에 그려지면 숨김 · 20 s 뒤 느린 연결 안내 · 도는 그림 없음 -->
+    <style>
+      #boot-loader {
+        position: fixed;
+        inset: 0;
+        z-index: 2147483000;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        background: #f6f7f9;
+        color: #6b7280;
+        font:
+          15px/1.5 "Noto Sans KR",
+          "Malgun Gothic",
+          "Apple SD Gothic Neo",
+          sans-serif;
+        text-align: center;
+        padding: 16px;
+      }
+      [data-boot-dark] #boot-loader {
+        color-scheme: dark;
+        background: #121417;
+        color: #9aa1ab;
+      }
+      #boot-loader-slow {
+        visibility: hidden;
+        font-size: 13px;
+        animation: boot-loader-slow 0s 20s forwards;
+      }
+      @keyframes boot-loader-slow {
+        to {
+          visibility: visible;
+        }
+      }
+      body:has(#app-outlet > *) #boot-loader {
+        display: none;
+      }
+    </style>
   </head>
   <body>
     <div id="app"></div>
+    <div id="boot-loader" role="status">
+      <div>불러오는 중…</div>
+      <div id="boot-loader-slow">연결이 느림 — 조금 더 기다리거나 새로고침</div>
+    </div>
     <script type="module" src="./main.ts"></script>
   </body>
 </html>

A00_Common/input_prefs.ts

@@ -6,13 +6,20 @@
  * - 없음 · 깨짐 · Node(저장소 없음) = 기본값(= 지금 동작) · 의존 없음 · 불러올 때 window 안 만짐(CAD 도 import)
  * - 휠 확대 방향 하나로 모든 화면 일체 — 기본 밂 = 휠을 앞으로(deltaY < 0) 굴리면 확대(오토캐드) · 당김 = 몸 쪽으로
  * - 핀치(트랙패드 · 손가락)는 설정과 상관없이 늘 벌리면 확대(deltaY < 0)
+ * - 화면 옮기기 단추 하나(PLAN 588-4) — 고른 단추로 끌면 옮김 · 안 끌고 떼면 그 단추 제 몫 · 가운데는 늘 옮김
+ * - 바꾼 키(`keys`)는 기본과 다른 것만 — 판정 · 등록부는 `key_registry.ts`
  * ========================================================================== */
 
 export type WheelZoom = "pull" | "push";
+export type PanButton = "left" | "middle" | "right";
 
 export interface InputPrefs {
   /** 휠 확대 방향 — pull = 당기면 확대 · push = 밀면 확대 */
   wheelZoom: WheelZoom;
+  /** 화면 옮기기 단추 */
+  panButton: PanButton;
+  /** 바꾼 단축키 `{동작 id: [키]}` — 기본과 다른 것만(`key_registry.ts`) */
+  keys: Record<string, string[]>;
   /** CAD 내 별칭 `{명령: [별칭]}`(대문자 · acad.pgp 식 — 명령 이름 > 내 별칭 > 기본 별칭) */
   cadAliases: Record<string, string[]>;
 }
@@ -20,7 +27,25 @@ export interface InputPrefs {
 /** `stateKey("input-prefs")` 와 같은 키(시험이 맞춰 봄) — 등록표를 불러오면 window 가 딸려 와서 글자로 둠 */
 export const INPUT_PREFS_KEY = "aislo:pref:input-prefs";
 
-export const DEFAULT_INPUT_PREFS: InputPrefs = { wheelZoom: "push", cadAliases: {} };
+export const DEFAULT_INPUT_PREFS: InputPrefs = {
+  wheelZoom: "push",
+  panButton: "middle",
+  keys: {},
+  cadAliases: {},
+};
+
+const PAN_BUTTONS: PanButton[] = ["left", "middle", "right"];
+
+const defaults = (): InputPrefs => ({ ...DEFAULT_INPUT_PREFS, keys: {}, cadAliases: {} });
+
+const cleanKeys = (raw: unknown): Record<string, string[]> => {
+  const out: Record<string, string[]> = {};
+  if (!raw || typeof raw !== "object") return out;
+  for (const [id, list] of Object.entries(raw as Record<string, unknown>)) {
+    if (Array.isArray(list)) out[id] = list.filter((k): k is string => typeof k === "string");
+  }
+  return out;
+};
 
 const cleanAliases = (raw: unknown): Record<string, string[]> => {
   const out: Record<string, string[]> = {};
@@ -39,17 +64,57 @@ const cleanAliases = (raw: unknown): Record<string, string[]> => {
 export function inputPrefs(): InputPrefs {
   try {
     const raw = globalThis.localStorage?.getItem(INPUT_PREFS_KEY);
-    if (!raw) return { ...DEFAULT_INPUT_PREFS, cadAliases: {} };
+    if (!raw) return defaults();
     const value = JSON.parse(raw) as Partial<InputPrefs> | null;
     return {
       wheelZoom: value?.wheelZoom === "pull" ? "pull" : "push",
+      panButton: PAN_BUTTONS.includes(value?.panButton as PanButton)
+        ? (value!.panButton as PanButton)
+        : "middle",
+      keys: cleanKeys(value?.keys),
       cadAliases: cleanAliases(value?.cadAliases),
     };
   } catch {
-    return { ...DEFAULT_INPUT_PREFS, cadAliases: {} };
+    return defaults();
   }
 }
 
+/** 고른 화면 옮기기 단추 */
+export const panButton = (): PanButton => inputPrefs().panButton;
+
+/** 이 단추(`MouseEvent.button` 0 왼 · 1 가운데 · 2 오른)로 끌면 화면 옮김 — 고른 단추 · 가운데는 늘 */
+export const isPanButton = (button: number): boolean =>
+  button === 1 || button === PAN_BUTTONS.indexOf(panButton());
+
+/** 왼쪽 아닌 옮기기 버튼(가운데 · 오른쪽을 고른 때) — 왼쪽이 고르기 · 돌림 몫인 화면용 */
+export const isAuxPanButton = (button: number): boolean => button !== 0 && isPanButton(button);
+
+/** 단추 번호 → `buttons` 비트(왼 1 · 오른 2 · 가운데 4) — 끄는 중 놓침 알아채기 */
+export const buttonMask = (button: number): number => [1, 4, 2][button] ?? 0;
+
+/** 이만큼(px) 끌어야 옮김 — 덜 움직이고 떼면 그 단추 제 몫(고름 · 메뉴 · Enter) */
+export const PAN_MOVE_PX = 4;
+
+/** 오른쪽 끌기로 옮긴 뒤 놓을 때 뜨는 메뉴를 한 번 막음 */
+export function swallowNextMenu(): void {
+  const stop = (event: Event): void => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  globalThis.addEventListener("contextmenu", stop, { capture: true, once: true });
+  setTimeout(() => globalThis.removeEventListener("contextmenu", stop, true), 400);
+}
+
+/** 오른쪽 누름으로 옮기기를 시작할 때 부름 — 끌고 놓으면 그 뒤 메뉴를 막음 */
+export function guardMenuAfterDrag(down: PointerEvent): void {
+  if (down.button !== 2) return;
+  const up = (event: PointerEvent): void => {
+    const moved = Math.hypot(event.clientX - down.clientX, event.clientY - down.clientY);
+    if (moved > PAN_MOVE_PX) swallowNextMenu();
+  };
+  globalThis.addEventListener("pointerup", up, { capture: true, once: true });
+}
+
 /** 휠 한 번이 확대인가 — 설정 방향을 따름 */
 export const wheelIn = (deltaY: number): boolean =>
   inputPrefs().wheelZoom === "pull" ? deltaY > 0 : deltaY < 0;

A00_Common/key_registry.ts

@@ -0,0 +1,347 @@
+/* =============================================================================
+ * key_registry.ts
+ * 단축키 등록부(PLAN 588-2 · 3) — 화면마다 실제로 받는 키 · 마우스 동작 한 벌 · ☰ [설정] 표가 여기서 그려짐.
+ *
+ * - 줄 = 동작 id · 자리 · 기본 키 · 이름 · `fixed`(못 바꿈 — Esc · 방향키 · 마우스 · 글 입력 · 시트 키)
+ * - 판정 = `keyIs(evt, id)` — 사용자가 바꾼 키(`input-prefs` 의 `keys`) 있으면 그것만 · 없으면 기본 키
+ * - 키 글 = 「Ctrl+Shift+Z」 꼴 — 글자 · 숫자는 자판 자리(`keyLetter` · 한글 자판 안전) · 차례 Ctrl · Alt · Shift · 키
+ * - 겹침 = 같은 화면에서 함께 듣는 자리끼리 · 「모든 화면」과 · 브라우저 몫 · CAD 글자 단독(명령행 몫)
+ * - 불러올 때 window 안 만짐(CAD 도 import) · 시험 = `resources/tester/test_588_key_registry.py`
+ * ========================================================================== */
+
+import { inputPrefs } from "./input_prefs";
+import { keyLetter } from "./key_shortcut";
+
+export type KeyScope =
+  | "all"
+  | "b05"
+  | "profile"
+  | "routeEdit"
+  | "drainage"
+  | "section"
+  | "plan"
+  | "b04"
+  | "cad"
+  | "b08"
+  | "b09"
+  | "m02"
+  | "stab"
+  | "etc";
+
+type Text = readonly [ko: string, en: string];
+
+export interface KeyAction {
+  id: string;
+  scope: KeyScope;
+  /** 기본 키(키 글) · 못 바꾸는 줄은 보일 글(마우스 · 「글자」 등) */
+  keys: readonly string[];
+  label: Text;
+  fixed?: true;
+}
+
+/** 자리 이름 · 함께 듣는 화면(같은 화면이면 키가 겹치면 안 됨) — 표 차례도 이대로 */
+export const KEY_SCOPES: Record<KeyScope, { label: Text; page: string }> = {
+  all: { label: ["모든 화면", "All views"], page: "all" },
+  b05: { label: ["B05 · B06 공통", "B05 · B06 common"], page: "b05" },
+  profile: { label: ["B05 종단", "B05 profile"], page: "b05" },
+  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 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" },
+  b09: { label: ["B09 내역", "B09 estimate"], page: "b09" },
+  m02: { label: ["M02 양식", "M02 templates"], page: "m02" },
+  stab: { label: ["E03 · E04 · E07 안정성", "E03 · E04 · E07 stability"], page: "stab" },
+  etc: { label: ["그 밖", "Other"], page: "etc" },
+};
+
+const ARROWS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"] as const;
+const SHIFT_ARROWS = ARROWS.map((key) => `Shift+${key}`);
+/** 화면 옮기기 — ☰ [설정] 마우스 탭에서 고른 버튼(가운데는 늘) */
+const PAN = "옮기기 버튼 끌기";
+
+const A = (
+  id: string,
+  scope: KeyScope,
+  keys: readonly string[],
+  label: Text,
+  fixed?: true,
+): KeyAction => (fixed ? { id, scope, keys, label, fixed } : { id, scope, keys, label });
+const F = true as const;
+
+/* prettier-ignore */
+export const KEY_ACTIONS: readonly KeyAction[] = [
+  A("all.escape", "all", ["Escape"], ["☰ · 창 · 메뉴 닫기 · 고름 풀기", "☰ · close window · menu · clear selection"], F),
+  A("all.loupe", "all", ["Z"], ["누른 채 = 돋보기", "Hold = loupe"], F),
+  A("all.loupeRight", "all", ["오른쪽 0.4초 누름"], ["돋보기", "Loupe"], F),
+  A("all.loupeWheel", "all", ["돋보기 중 휠"], ["돋보기 배율", "Loupe zoom"], F),
+  A("all.zoomPan", "all", [PAN], ["그림 칸 화면 옮김(횡단 · 단면 · 미리 보기)", "Pan drawings (sections · previews)"], F),
+  A("all.zoomReset", "all", ["두 번 누름"], ["그림 칸 배율 처음대로", "Reset drawing zoom"], F),
+  A("all.resizer", "all", ["칸 경계 두 번 누름"], ["칸 크기 처음대로", "Reset panel size"], F),
+  A("all.grip", "all", ["ArrowLeft", "ArrowRight", "Shift+ArrowLeft", "Shift+ArrowRight"], ["칸 경계 손잡이에서 크기 바꿈", "Resize at a panel grip"], F),
+  A("all.touchLong", "all", ["손가락 길게 누름"], ["오른쪽 누름(메뉴)", "Right click (menu)"], F),
+  A("all.touchDouble", "all", ["손가락 두 번 톡"], ["두 번 누름", "Double click"], F),
+  A("all.touchPinch", "all", ["두 손가락 벌림"], ["확대", "Zoom in"], F),
+
+  A("b05.undo", "b05", ["Ctrl+Z"], ["되돌림(평면 · 종단 · 횡단 · 관 · 구조물)", "Undo (plan · profile · section · pipes · structures)"]),
+  A("b05.redo", "b05", ["Ctrl+Shift+Z", "Ctrl+Y"], ["다시", "Redo"]),
+  A("b05.escape", "b05", ["Escape"], ["모든 보기의 고름 풀기", "Clear selection in every view"], F),
+
+  A("profile.grade", "profile", ["ArrowUp", "ArrowDown"], ["계획고 0.1 m · [쉬프트] 중 구간 평행 옮김 · 누른 채 = 되풀이", "Grade 0.1 m · parallel shift · hold = repeat"], F),
+  A("profile.station", "profile", ["ArrowLeft", "ArrowRight"], ["구조물 · 부정 측점 옮김(종단을 마지막에 누른 때)", "Move structure · irregular station"], F),
+  A("profile.freeFinish", "profile", ["Enter"], ["자유지정 끝", "Finish free mode"]),
+  A("profile.freeBack", "profile", ["Backspace"], ["자유지정 마지막 점 빼기", "Free mode: remove last point"]),
+  A("profile.escape", "profile", ["Escape"], ["자유지정 취소 · 직선화 시작 측점 취소", "Cancel free mode · straighten start"], F),
+  A("profile.wheel", "profile", ["휠"], ["가로 스크롤(그래프 · 유토곡선 · 측점 표)", "Horizontal scroll"], F),
+  A("profile.drag", "profile", ["왼쪽 끌기", PAN], ["가로 옮김", "Horizontal pan"], F),
+  A("profile.menu", "profile", ["오른쪽 누름"], ["구조물 메뉴(넣기 · 지움)", "Structure menu"], F),
+  A("profile.pill", "profile", ["알약 끌기", "알약 오른쪽 누름"], ["구조물 옮김 · 지움", "Move · delete structure"], F),
+  A("profile.marker", "profile", ["측점 표식 끌기"], ["측점 옮김", "Move station"], F),
+  A("profile.markerPick", "profile", ["Enter", "Space"], ["초점 측점 표식 고름", "Pick focused station marker"], F),
+  A("profile.balloon", "profile", ["풍선 두 번 누름"], ["유토곡선 풍선 자동 자리", "Balloon back to auto"], F),
+  A("profile.hold", "profile", ["▲▼ 누른 채"], ["되풀이(0.5초 뒤 초당 10번)", "Repeat while held"], F),
+
+  A("routeEdit.nudge", "routeEdit", ARROWS, ["교각점 0.1 m(측점 맞춤이면 한 칸) · 고른 마커 옮김", "Move IP 0.1 m · picked marker"], F),
+  A("routeEdit.nudgeBig", "routeEdit", SHIFT_ARROWS, ["교각점 1 m 옮김", "Move IP 1 m"], F),
+  A("routeEdit.unmark", "routeEdit", ["Escape"], ["마커 고름 풀기", "Clear marker pick"], F),
+  A("routeEdit.zoom", "routeEdit", ["휠"], ["커서 자리 확대 · 축소", "Zoom at cursor"], F),
+  A("routeEdit.rotate", "routeEdit", ["Ctrl+휠"], ["지도 5° 돌림", "Rotate map 5°"], F),
+  A("routeEdit.pan", "routeEdit", [PAN], ["화면 옮김", "Pan"], F),
+  A("routeEdit.measure", "routeEdit", ["Shift+누름"], ["재기", "Measure"], F),
+  A("routeEdit.drag", "routeEdit", ["노드 · 손잡이 끌기"], ["교각점 옮김 · 반지름 바꿈", "Move IP · change radius"], F),
+  A("routeEdit.tick", "routeEdit", ["측점 눈금 누름"], ["그 측점 횡단 미리 보기", "Preview that station's section"], F),
+  A("routeEdit.splice", "routeEdit", ["선 두 번 누름"], ["노드 넣기", "Add node"], F),
+  A("routeEdit.unsplice", "routeEdit", ["노드 오른쪽 누름"], ["노드 지움", "Delete node"], F),
+  A("routeEdit.menu", "routeEdit", ["노선 오른쪽 누름"], ["구조물 메뉴 · 마커 지움", "Structure menu · delete marker"], F),
+  A("routeEdit.contour", "routeEdit", ["등고선 누름"], ["등고선 고정 단추", "Contour lock button"], F),
+
+  A("drainage.zoom", "drainage", ["휠"], ["배수유역도 확대 · 축소", "Drainage map zoom"], F),
+  A("drainage.pan", "drainage", [PAN], ["배수유역도 옮김", "Drainage map pan"], F),
+  A("drainage.pipe", "drainage", ["관 표식 끌기"], ["관 옮김", "Move pipe"], F),
+  A("drainage.basin", "drainage", ["누름"], ["유역 고름 · 풂", "Pick · unpick basin"], F),
+  A("drainage.menu", "drainage", ["오른쪽 누름"], ["배수 · 3D 노선 메뉴", "Drainage · 3D route menu"], F),
+  A("drainage.orbit", "drainage", ["3D 왼쪽 끌기"], ["누른 점 둘레로 돌림", "Orbit around picked point"], F),
+  A("drainage.pan3d", "drainage", [`3D ${PAN}`], ["3D 화면 옮김", "3D pan"], F),
+  A("drainage.zoom3d", "drainage", ["3D 휠"], ["3D 커서 자리 확대", "3D zoom at cursor"], F),
+
+  A("section.pad", "section", ARROWS, ["열린 조정 판 ▲▼◀▶", "Open adjust pad ▲▼◀▶"], F),
+  A("section.zoom", "section", ["Ctrl+휠"], ["카드 확대(휠만 = 카드 목록 스크롤)", "Card zoom (wheel alone scrolls)"], F),
+  A("section.detailEnter", "section", ["Enter"], ["상세 창 고르기 칸에 넣음", "Detail: put the pick in the cell"], F),
+  A("section.detailEscape", "section", ["Escape"], ["상세 창 고르기 취소", "Detail: cancel picking"], F),
+  A("section.detailAdd", "section", ["Shift+누름", "Ctrl+누름"], ["상세 창 선 조각 · 면 더함", "Detail: add line pieces · faces"], F),
+  A("section.detailMenu", "section", ["표 칸 오른쪽 누름"], ["상세 표 칸 메뉴", "Detail table cell menu"], F),
+  A("section.hold", "section", ["▲▼ 누른 채"], ["선 칸 되풀이", "Line cell repeat"], F),
+
+  A("plan.undo", "plan", ["Ctrl+Z"], ["되돌림", "Undo"]),
+  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.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.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("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),
+  A("b04.pick", "b04", ["누름"], ["유역 · 흐름 점 고름", "Pick basin · flow point"], F),
+  A("b04.pipe", "b04", ["관 표식 끌기"], ["관 옮김", "Move pipe"], F),
+  A("b04.menu", "b04", ["오른쪽 누름"], ["노선 · 관 메뉴", "Route · pipe menu"], F),
+  A("b04.orbit", "b04", ["3D 왼쪽 끌기"], ["누른 점 둘레로 돌림", "Orbit around picked point"], F),
+
+  A("cad.snap", "cad", ["F3"], ["스냅", "Snap"]),
+  A("cad.grid", "cad", ["F7"], ["그리드", "Grid"]),
+  A("cad.ortho", "cad", ["F8"], ["직교", "Ortho"]),
+  A("cad.polar45", "cad", ["F10"], ["45°", "45°"]),
+  A("cad.undo", "cad", ["Ctrl+Z"], ["되돌림", "Undo"]),
+  A("cad.redo", "cad", ["Ctrl+Y", "Ctrl+Shift+Z"], ["다시", "Redo"]),
+  A("cad.save", "cad", ["Ctrl+S"], ["저장(M02)", "Save (M02)"]),
+  A("cad.selectAll", "cad", ["Ctrl+A"], ["모두 고름", "Select all"]),
+  A("cad.delete", "cad", ["Delete"], ["고른 것 지움", "Delete selection"]),
+  A("cad.copy", "cad", ["Ctrl+C"], ["복사", "Copy"]),
+  A("cad.copyBase", "cad", ["Ctrl+Shift+C"], ["기준점 복사", "Copy with base point"]),
+  A("cad.cut", "cad", ["Ctrl+X"], ["잘라 냄", "Cut"]),
+  A("cad.pasteBlock", "cad", ["Ctrl+Shift+V"], ["블록으로 붙여넣기", "Paste as block"]),
+  A("cad.properties", "cad", ["Ctrl+1"], ["특성", "Properties"]),
+  A("cad.paste", "cad", ["Ctrl+V"], ["붙여넣기", "Paste"], F),
+  A("cad.enter", "cad", ["Enter", "Space", "오른쪽 누름"], ["입력 끝 · 쉴 때 명령 반복", "Submit · repeat command when idle"], F),
+  A("cad.escape", "cad", ["Escape"], ["명령 취소 · 쉴 때 고름 풀기", "Cancel command · clear selection when idle"], F),
+  A("cad.type", "cad", ["글자"], ["명령 · 값 입력", "Type command · value"], F),
+  A("cad.backspace", "cad", ["Backspace"], ["입력 글 지움", "Erase typed text"], F),
+  A("cad.tab", "cad", ["Tab"], ["명령 후보 돌림 · 동적 입력 칸 넘김", "Cycle candidates · next dynamic field"], F),
+  A("cad.recall", "cad", ["ArrowUp", "ArrowDown"], ["기록 · 최근 값 · 후보", "History · recent values · candidates"], F),
+  A("cad.arrowPan", "cad", ["Shift+ArrowUp", "Shift+ArrowDown", "ArrowLeft", "ArrowRight"], ["화면 옮김", "Pan"], F),
+  A("cad.zoom", "cad", ["휠"], ["확대 · 축소", "Zoom"], F),
+  A("cad.pan", "cad", [PAN], ["화면 옮김", "Pan"], F),
+  A("cad.snapMenu", "cad", ["Shift+오른쪽 누름"], ["점 물음에서 스냅 메뉴", "Snap menu at a point prompt"], F),
+  A("cad.extents", "cad", ["가운데 두 번 누름"], ["범위 줌", "Zoom extents"], F),
+  A("cad.box", "cad", ["왼쪽 끌기"], ["고르기 상자(오른쪽으로 = 안 · 왼쪽으로 = 걸침)", "Selection window · crossing"], F),
+
+  A("b08.zoom", "b08", ["휠"], ["이정표 그림 확대 · 축소", "Milestone diagram zoom"], F),
+  A("b08.pan", "b08", [PAN, "빈 곳 왼쪽 끌기"], ["이정표 그림 옮김", "Milestone diagram pan"], F),
+  A("b08.reset", "b08", ["빈 곳 두 번 누름"], ["배율 처음대로", "Reset zoom"], F),
+  A("b08.leg", "b08", ["구간 글 두 번 누름", "Enter", "Escape"], ["노선 종류 · km 고침 · 적용 · 취소", "Edit road type · km · apply · cancel"], F),
+  A("b08.box", "b08", ["상자 · 잇는 점 끌기"], ["옮김 · 이음", "Move · link"], F),
+  A("b08.rowMenu", "b08", ["이정표 표 줄 오른쪽 누름"], ["이음 메뉴", "Link menu"], F),
+  A("b08.cell", "b08", ["두 번 누름", "Enter", "F2"], ["표 칸 입력 · Enter = 넣음", "Edit table cell · Enter = commit"], F),
+
+  A("b09.indent", "b09", ["Tab", "Shift+Tab"], ["내역 줄 들임 · 내어씀", "Indent · outdent row"], F),
+  A("b09.level", "b09", ["ArrowLeft", "ArrowRight"], ["내역 줄 단 바꿈", "Change row level"], F),
+  A("b09.move", "b09", ["ArrowUp", "ArrowDown", "Alt+ArrowUp", "Alt+ArrowDown"], ["내역 줄 위 · 아래로", "Move row up · down"], F),
+  A("b09.edit", "b09", ["Enter", "F2", "두 번 누름"], ["고른 줄 · 칸 입력", "Edit picked row · cell"], F),
+  A("b09.escape", "b09", ["Escape"], ["입력 끝 · 고름 풀기 · 빨강 표시 지움 · 뜬 창 닫기", "End edit · unpick · clear highlight · close popups"], F),
+  A("b09.menu", "b09", ["칸 · 줄 오른쪽 누름"], ["칸 · 줄 메뉴", "Cell · row menu"], F),
+  A("b09.drag", "b09", ["줄 끌기"], ["세로 = 자리 · 가로 = 단", "Vertical = position · horizontal = level"], F),
+
+  A("m02.save", "m02", ["Ctrl+S"], ["카드 저장", "Save card"], F),
+  A("m02.treeMove", "m02", ARROWS, ["나무: ↑↓ 초점 · →← 펼침 · 접음", "Tree: ↑↓ focus · →← expand · collapse"], F),
+  A("m02.rename", "m02", ["F2"], ["나무 이름 바꿈", "Tree rename"], F),
+  A("m02.delete", "m02", ["Delete"], ["나무 · 흐름도 고른 것 지움", "Delete selected (tree · data flow)"], F),
+  A("m02.copy", "m02", ["Ctrl+C", "Ctrl+V"], ["나무 복사 · 붙여넣기", "Tree copy · paste"], F),
+  A("m02.multi", "m02", ["Ctrl+누름", "Shift+누름"], ["나무 여럿 고름", "Tree multi-select"], F),
+  A("m02.menu", "m02", ["나무 빈 곳 오른쪽 누름"], ["맨 위 메뉴", "Top menu"], F),
+  A("m02.zoom", "m02", ["휠", "Ctrl+휠"], ["흐름도 · 노임 그림 배율", "Data flow · labor diagram zoom"], F),
+  A("m02.pan", "m02", [PAN, "Space+끌기"], ["흐름도 · 노임 그림 옮김", "Data flow · labor diagram pan"], F),
+  A("m02.boxMove", "m02", ARROWS, ["흐름도 고른 상자 10 px(Shift 50)", "Move selected box 10 px (Shift 50)"], F),
+  A("m02.undo", "m02", ["Ctrl+Z"], ["흐름도 되돌림", "Data flow undo"], F),
+  A("m02.escape", "m02", ["Escape"], ["잇기 · 알약 취소 · 크게 보기 줄임 · 열린 창 닫기", "Cancel link · pill · shrink full view · close window"], F),
+  A("m02.sheet", "m02", ["시트 안"], ["엑셀 키 그대로", "Excel keys"], F),
+
+  A("stab.zoom", "stab", ["휠"], ["지도 · 그림 확대 · 축소", "Map · drawing zoom"], F),
+  A("stab.pan", "stab", ["왼쪽 끌기", PAN], ["E04 · E07 지도 · E03 그림 옮김", "Pan"], F),
+  A("stab.fit", "stab", ["두 번 누름"], ["전체 보기", "Fit"], F),
+
+  A("etc.chat", "etc", ["Enter", "Shift+Enter"], ["B01 지식 물음 보냄 · 줄 바꿈", "B01 chat send · new line"], F),
+  A("etc.help", "etc", ["두 번 누름", "Ctrl+Enter", "Escape"], ["도움말 고침(관리자) · 저장 · 취소", "Help edit (admin) · save · cancel"], F),
+  A("etc.cadTab", "etc", ["CAD 탭 두 번 누름"], ["탭 이름 바꿈", "Rename tab"], F),
+  A("etc.sheet", "etc", ["항목 고르기 표"], ["방향키 · Tab · Enter · F2 · Delete · 글자 = 입력", "Arrows · Tab · Enter · F2 · Delete · typing"], F),
+  A("etc.toolbar", "etc", ["지도 도구줄 휠"], ["넘친 도구줄 가로 스크롤", "Scroll overflowing toolbar"], F),
+];
+
+const BY_ID = new Map(KEY_ACTIONS.map((action) => [action.id, action]));
+
+/** 브라우저 몫 — 못 씀 */
+export const RESERVED_KEYS = [
+  "F5",
+  "F11",
+  "F12",
+  "Ctrl+W",
+  "Ctrl+T",
+  "Ctrl+N",
+  "Ctrl+R",
+  "Ctrl+Shift+T",
+];
+
+const MODIFIERS = new Set(["Control", "Shift", "Alt", "Meta", "AltGraph", "CapsLock", "Process"]);
+const NAMED: Record<string, string> = {
+  " ": "Space",
+  Spacebar: "Space",
+  Esc: "Escape",
+  Del: "Delete",
+};
+
+/** 누른 키 → 키 글 · 수정키만 · 한글 조합 = 빈 글 */
+export function chordOf(
+  evt: Pick<KeyboardEvent, "key" | "code" | "ctrlKey" | "altKey" | "shiftKey"> &
+    Partial<Pick<KeyboardEvent, "metaKey">>,
+): string {
+  const letter = keyLetter(evt);
+  const raw = NAMED[evt.key] ?? evt.key;
+  if (!letter && (!raw || MODIFIERS.has(raw))) return "";
+  const key = letter ? letter.toUpperCase() : raw.length === 1 ? raw.toUpperCase() : raw;
+  const parts = [
+    evt.ctrlKey || evt.metaKey ? "Ctrl" : "",
+    evt.altKey ? "Alt" : "",
+    evt.shiftKey ? "Shift" : "",
+  ];
+  return [...parts.filter(Boolean), key].join("+");
+}
+
+/** 지금 쓰는 키 — 바꾼 것(`keys`) 있으면 그것 · 없으면 기본 */
+export function actionKeys(
+  id: string,
+  keys: Record<string, string[]> = inputPrefs().keys,
+): readonly string[] {
+  const action = BY_ID.get(id);
+  if (!action) return [];
+  return (!action.fixed && keys[id]) || action.keys;
+}
+
+/** 이 키가 그 동작인가 */
+export const keyIs = (
+  evt: Parameters<typeof chordOf>[0],
+  id: string,
+  keys?: Record<string, string[]>,
+): boolean => {
+  const chord = chordOf(evt);
+  return !!chord && actionKeys(id, keys).includes(chord);
+};
+
+/** 그 자리 바꿀 수 있는 동작 중 이 키에 맞는 첫 동작 id */
+export function keyAction(evt: Parameters<typeof chordOf>[0], scope: KeyScope): string | null {
+  const chord = chordOf(evt);
+  if (!chord) return null;
+  const keys = inputPrefs().keys;
+  return (
+    KEY_ACTIONS.find((a) => a.scope === scope && !a.fixed && actionKeys(a.id, keys).includes(chord))
+      ?.id ?? null
+  );
+}
+
+export type KeyError = "dup" | "reserved" | "letter";
+
+/** 함께 듣는 자리인가 — 같은 화면 · 「모든 화면」 */
+const together = (a: KeyScope, b: KeyScope): boolean =>
+  a === "all" || b === "all" || KEY_SCOPES[a].page === KEY_SCOPES[b].page;
+
+/** 바꾼 키 검사 — `{동작 id: 첫 잘못}` · 비면 통과 · 겹침은 바꾼 줄에 붙임(상대가 못 바꾸는 줄이어도) */
+export function checkKeys(keys: Record<string, string[]>): Record<string, KeyError> {
+  const errors: Record<string, KeyError> = {};
+  const live = KEY_ACTIONS.map((a) => ({ a, list: actionKeys(a.id, keys) }));
+  for (const { a, list } of live) {
+    if (a.fixed || !keys[a.id]) continue;
+    for (const key of list) {
+      const error: KeyError | null = RESERVED_KEYS.includes(key)
+        ? "reserved"
+        : a.scope === "cad" && /^(Shift\+)?.$/.test(key)
+          ? "letter"
+          : live.some(
+                ({ a: b, list: other }) =>
+                  b !== a && together(a.scope, b.scope) && other.includes(key),
+              )
+            ? "dup"
+            : null;
+      if (error) {
+        errors[a.id] ??= error;
+        break;
+      }
+    }
+  }
+  return errors;
+}
+
+const LABEL: Record<string, string> = {
+  ArrowUp: "↑",
+  ArrowDown: "↓",
+  ArrowLeft: "←",
+  ArrowRight: "→",
+  Escape: "Esc",
+};
+
+/** 키 글 → 보일 글(↑ · Esc) */
+export const keyLabel = (chord: string): string =>
+  chord
+    .split("+")
+    .map((part) => LABEL[part] ?? part)
+    .join("+");

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/main.ts

@@ -19,6 +19,7 @@ import {
   releaseSelectAfterPick,
 } from "@ui/ui_template_native_menu";
 import { initLoupe, LOUPE_ROUTE } from "@ui/ui_template_loupe";
+import { ROUTE_RESTORED_EVENT } from "@ui/ui_template_help";
 import { ROUTES, type RoutePath } from "@config/config_frontend";
 import { initThemeAndLang, injectShellStyles, renderShell } from "./app_shell";
 import {
@@ -27,9 +28,11 @@ import {
   ensureInitialHash,
   setLeaveGuard,
   draftRoute,
+  isProjectRoute,
   showWithinPage,
   takeLeaveGuard,
 } from "./router";
+import { currentProjectId, leaveProject } from "./b_project_switch";
 
 const FOOTERLESS_ROUTES: readonly RoutePath[] = [
   ROUTES.B01_ACCOUNT,
@@ -75,6 +78,10 @@ function bootstrap(): void {
       "is-bm-route",
       NATIVE_MENU_ROUTE.test(currentRoute()),
     ); // 전역 글 선택 막음(81-1)
+    // 프로젝트를 떠남(401) — 떠남 물음을 지난 뒤 · 그 프로젝트 세션 칸 · 3D 보관함 몫 비움
+    if (isProjectRoute(shown) && !isProjectRoute(currentRoute())) {
+      void leaveProject(currentProjectId());
+    }
     const within = showWithinPage(currentRoute()); // B05 ↔ B06 — 보기만 바꿈(24-3a)
     shown = currentRoute();
     shownHash = window.location.hash;
@@ -95,6 +102,7 @@ function bootstrap(): void {
         renderAll();
       } else {
         history.replaceState(null, "", shownHash); // 취소 — 머문 채 주소만 되돌림
+        window.dispatchEvent(new Event(ROUTE_RESTORED_EVENT)); // 주소 따라 그린 것(단계 [<] [>])을 다시 맞춤
       }
     });
   });

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/router.ts

@@ -8,6 +8,7 @@
  * ========================================================================== */
 
 import { ROUTES, DEFAULT_ROUTE, PROTECTED_ROUTES, type RoutePath } from "@config/config_frontend";
+import { linkRouter, reloadIfOtherProject } from "./b_project_switch";
 
 /**
  * 여러 주소를 맡는 페이지 — 같은 페이지 안 주소 이동은 다시 만들지 않고 `show` 만 부른다
@@ -103,6 +104,8 @@ export const setLeaveGuard = (guard: (() => Promise<boolean>) | null): void => {
   leaveGuard = guard;
 };
 export const takeLeaveGuard = (): (() => Promise<boolean>) | null => leaveGuard;
+// 공용 떠남 물음(401)이 이 자리를 씀 — 함수 선언은 끌어올려져 아래 currentRoute 도 바로 씀
+linkRouter({ currentRoute, setLeaveGuard });
 
 /** 현재 프로젝트(기억한 id)로 여는 화면 — 그 프로젝트가 서버에 없으면 안내를 띄운다. */
 const PROJECT_ROUTES: readonly RoutePath[] = [
@@ -116,6 +119,10 @@ const PROJECT_ROUTES: readonly RoutePath[] = [
   ROUTES.B11_LOADING,
 ];
 
+/** 프로젝트 화면(401) — B 단계 · 준비 화면 · 초안 길 `project: true`. */
+export const isProjectRoute = (route: string): boolean =>
+  PROJECT_ROUTES.includes(route as RoutePath) || Boolean(draftRoute(route)?.project);
+
 /** 지금 떠 있는 여러 주소 페이지 · 렌더 차례(늦게 끝난 옛 렌더를 버림). */
 let mounted: MountedPage | null = null;
 let renderSeq = 0;
@@ -222,7 +229,9 @@ export async function renderCurrentRoute(outlet: HTMLElement): Promise<void> {
   }
 
   // 기억한 현재 프로젝트가 지워졌으면 페이지 대신 안내 — 모든 B 단계 화면이 여기 한 곳을 지난다.
-  if (PROJECT_ROUTES.includes(route) || draft?.project) {
+  if (isProjectRoute(route)) {
+    // 다른 프로젝트 화면이면 새로 엶 — 앞 프로젝트 모듈 메모리가 안 묻어감(401)
+    if (reloadIfOtherProject()) return;
     const { dropGoneProject } = await import("./b_workflow_nav");
     if (await dropGoneProject()) {
       if (seq !== renderSeq) return;

A00_Common/spreadsheet/spreadsheet.css

@@ -109,7 +109,7 @@
   bottom: 40px;
   z-index: 20;
   padding: 6px 10px;
-  border-radius: 4px;
+  border-radius: var(--radius-buttons);
   background: var(--color-primary);
   color: var(--color-primary-text);
 }
@@ -126,6 +126,10 @@
   cursor: pointer;
 }
 
+.ss-brush:hover {
+  background: var(--color-hover);
+}
+
 .ss-brush.is-on {
   background: color-mix(in srgb, var(--color-focus-ring) 20%, var(--color-surface-raised));
   box-shadow: inset 0 0 0 2px var(--color-focus-ring);
@@ -135,19 +139,17 @@
   cursor: copy;
 }
 
-.ss-find {
-  position: absolute;
+/* 찾기 = 떠 있는 판 부품(머리 없음) · 칸 · 단추 = 부품 — 여기는 자리 · 줄 배치만(553-6) */
+.ss-find.ui-float-panel {
   top: 4px;
   right: 16px;
   z-index: 20;
+}
+
+.ss-find > .ui-float-panel__body {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  padding: 8px;
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  background: var(--color-surface-raised);
-  box-shadow: var(--shadow-lg);
 }
 
 .ss-find[hidden],
@@ -166,32 +168,17 @@
 
 .ss-find__input {
   width: 180px;
-  padding: 2px 6px;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface-raised);
-  color: var(--color-text-body);
-  font: inherit;
-}
-
-.ss-find__btn {
-  padding: 2px 8px;
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  background: var(--color-surface);
-  color: var(--color-text-body);
-  font: inherit;
-  cursor: pointer;
 }
 
 .ss-find__opt {
   display: flex;
   align-items: center;
   gap: 2px;
-  font-size: 12px;
+  font-size: var(--text-caption);
 }
 
 .ss-find__status {
-  font-size: 12px;
+  font-size: var(--text-caption);
   color: var(--color-text-secondary);
 }
 
@@ -223,19 +210,11 @@
   gap: 2px;
   padding: 4px;
   border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
   background: var(--color-surface-raised);
   box-shadow: var(--shadow-lg);
 }
 
-.ss-pick > button {
-  padding: 2px 8px;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface);
-  color: var(--color-text-body);
-  font: inherit;
-  cursor: pointer;
-}
-
 /* 함수 자동 완성 · 인자 도움말 */
 .ss-hint {
   position: absolute;
@@ -265,22 +244,17 @@
 }
 
 .ss-hint__item.is-on {
-  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface-raised));
+  background: var(--color-accent-soft);
 }
 
 /* 데이터 메뉴 — 패널 창 · 유효성 목록 ▼ */
-.ss-dialog {
-  position: absolute;
+/* 패널 창 = 떠 있는 판 부품 — 여기는 자리 · 크기만(553-6) */
+.ss-dialog.ui-float-panel {
   top: 4px;
   right: 16px;
   z-index: 21;
   max-width: min(720px, calc(100% - 32px));
   max-height: calc(100% - 8px);
-  overflow: auto;
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  background: var(--color-surface-raised);
-  box-shadow: var(--shadow-lg);
 }
 
 .ss-dialog[hidden],
@@ -288,20 +262,6 @@
   display: none;
 }
 
-.ss-dialog__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 6px 8px;
-  border-bottom: 1px solid var(--color-border);
-  font-weight: bold;
-}
-
-.ss-dialog__body {
-  padding: 8px;
-}
-
 .ss-list-arrow {
   position: absolute;
   z-index: 8;

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_actions.ts

@@ -118,10 +118,15 @@ export function dialogKeys(overlay: HTMLElement, close: () => void, run?: () =>
   });
 }
 
-/** body 에 뜬 창(.ui-confirm)이 다 닫히면 초점을 격자로 — 창을 연 바로 뒤에 부름 */
+/** body 에 뜬 창(.ui-confirm · 모달)이 다 닫히면 초점을 격자로 — 창을 연 바로 뒤에 부름 */
 export function watchClose(back: () => void): void {
   const w = new MutationObserver(() => {
-    if (document.querySelector("body > .ui-confirm, body > .ui-confirm__panel")) return;
+    if (
+      document.querySelector(
+        "body > .ui-confirm, body > .ui-confirm__panel, body > .ui-modal__backdrop",
+      )
+    )
+      return;
     w.disconnect();
     back();
   });

A00_Common/spreadsheet/spreadsheet_analysis.css

@@ -63,7 +63,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgb(0 0 0 / 18%);
+  background: var(--color-scrim);
 }
 
 .ss-steps__box {
@@ -115,18 +115,10 @@
   overflow: visible;
 }
 
-.ss-errtip__btn {
+/* ⚠ = 아이콘 단추 부품(선 · 18) — 여기는 자리 · 경고 색만(553-6) */
+.ss-errtip__btn.ui-icon-btn {
   position: absolute;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  font-size: 11px;
-  line-height: 16px;
-  cursor: pointer;
   color: var(--color-warning);
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
 }
 
 .ss-errtip__balloon {
@@ -183,5 +175,5 @@
 }
 
 .ss-errtip__item:hover {
-  background: var(--color-mist-violet);
+  background: var(--color-hover);
 }

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_data_menu.ts

@@ -12,6 +12,7 @@
 import "./spreadsheet_stage3.css"; // sub4 패널 스타일(잇는 쪽이 붙임)
 import { createMapContextMenu, type MapContextMenuItem } from "@ui/ui_template_context_menu";
 import { el, showToast } from "@ui/ui_template_elements";
+import { createFloatPanel } from "@ui/ui_template_float_panel";
 import { parseRange, rangeToA1, toA1 } from "./spreadsheet_address";
 import { autoSumCells, autoSumRange } from "./spreadsheet_autosum";
 import { isError } from "./spreadsheet_eval";
@@ -40,7 +41,6 @@ const TEXT = {
   validation: "데이터 유효성…",
   names: "이름 관리…",
   grid: "눈금선 보이기 · 숨기기",
-  close: "닫기",
   list: "값 목록(Alt+↓)",
   sheets: "시트 숨기기 · 탭 색…",
   audit: "수식 분석",
@@ -121,18 +121,14 @@ export function mountDataMenu(ctx: SpreadsheetContext, back: () => void): DataMe
   };
 
   // ── 패널 창(조건부 서식 · 유효성 · 이름) — 한 번에 하나 ─────────────────────
-  const title = el("span", { className: "ss-dialog__title" });
-  const body = el("div", { className: "ss-dialog__body" });
-  const shut = el("button", {
-    className: "ss-find__btn",
-    text: "×",
-    attrs: { type: "button", title: TEXT.close },
-  });
-  const dialog = el("div", {
-    className: "ss-dialog ui-popup",
-    attrs: { hidden: "" },
-    children: [el("div", { className: "ss-dialog__head", children: [title, shut] }), body],
+  // 떠 있는 판 부품(머리 · 닫기 ✕ · 몸 · 553-6) — 자리는 `.ss-dialog`
+  const { root: dialog, body } = createFloatPanel({
+    title: " ",
+    onClose: () => (closePanel(), back()),
   });
+  dialog.classList.add("ss-dialog");
+  dialog.setAttribute("hidden", "");
+  const title = dialog.querySelector(".ui-float-panel__title") as HTMLElement;
   ctx.root.append(dialog);
   let panel: PartHandle | null = null;
   const closePanel = (): void => {
@@ -141,7 +137,6 @@ export function mountDataMenu(ctx: SpreadsheetContext, back: () => void): DataMe
     body.replaceChildren();
     dialog.setAttribute("hidden", "");
   };
-  shut.addEventListener("click", () => (closePanel(), back()));
   dialog.addEventListener("keydown", (e) => {
     if (e.key !== "Escape") return;
     e.stopPropagation();

A00_Common/spreadsheet/spreadsheet_errcheck.ts

@@ -11,7 +11,7 @@
  *     시트 전체를 훑지 말고 그리는 칸만 물음(값 하나 · 칸 하나 읽는 값싼 부름).
  * ========================================================================== */
 
-import { el } from "@ui/ui_template_elements";
+import { createIconButton, el } from "@ui/ui_template_elements";
 import { currentLanguageIndex } from "@ui/ui_template_locale";
 import { toA1 } from "./spreadsheet_address";
 import { isError } from "./spreadsheet_eval";
@@ -137,11 +137,9 @@ export function attachErrorTip(ctx: SpreadsheetContext, trace?: TraceHandle): Er
     const g = ctx.grid.root.getBoundingClientRect();
     layer.style.left = `${box.x - (a.left - g.left) - 20}px`;
     layer.style.top = `${box.y - (a.top - g.top)}px`;
-    const btn = el("button", {
-      className: "ss-errtip__btn",
-      text: "⚠",
-      attrs: { type: "button", "aria-label": w.까닭 },
-    });
+    const btn = createIconButton({ glyph: "⚠", title: w.까닭, variant: "outline", size: 18 });
+    btn.classList.add("ss-errtip__btn");
+    btn.removeAttribute("title"); // 까닭은 옆 풍선이 보임
     const balloon = el("div", { className: "ss-errtip__balloon", text: w.까닭 });
     btn.addEventListener("mousedown", (ev) => ev.stopPropagation());
     btn.addEventListener("click", () => (menu ? closeMenu() : openMenu(w, r, c)));

A00_Common/spreadsheet/spreadsheet_extras.ts

@@ -6,7 +6,7 @@
  * 빨간 세모는 C 격자 · 우클릭 [메모 …] 는 E 메뉴 몫(브레인 배정).
  * ========================================================================== */
 
-import { el } from "@ui/ui_template_elements";
+import { createButton, el } from "@ui/ui_template_elements";
 import { watchClose } from "./spreadsheet_actions";
 import { parseClipboard } from "./spreadsheet_clipboard";
 import { attachComments, getComment, setComment } from "./spreadsheet_comments";
@@ -138,10 +138,8 @@ export function attachExtras(
         : undefined;
     picker.replaceChildren(
       ...(Object.keys(TEXT.modes) as PasteSpecialMode[]).map((mode) => {
-        const b = el("button", {
-          text: TEXT.modes[mode],
-          attrs: { type: "button", "data-mode": mode },
-        });
+        const b = createButton({ label: TEXT.modes[mode], variant: "ghost", size: 22 });
+        b.dataset.mode = mode;
         b.addEventListener("click", () => {
           picker.setAttribute("hidden", "");
           // 늦게 — 크기 예산

A00_Common/spreadsheet/spreadsheet_find_panel.ts

@@ -4,7 +4,8 @@
  * Enter = 다음 · Esc = 닫고 격자로. 바꾸기 = 활성 칸이 맞으면 바꾸고 다음으로(엑셀).
  * ========================================================================== */
 
-import { el } from "@ui/ui_template_elements";
+import { createButton, createIconButton, el, setUiSize } from "@ui/ui_template_elements";
+import { createFloatPanel } from "@ui/ui_template_float_panel";
 import { findAll, findNext, replaceAll, replaceOne, type FindOptions } from "./spreadsheet_find";
 import { selectCell } from "./spreadsheet_selection";
 import type { PartHandle, SpreadsheetContext } from "./spreadsheet_view_types";
@@ -29,12 +30,14 @@ export interface FindPanelHandle extends PartHandle {
 }
 
 export function mountFindPanel(ctx: SpreadsheetContext, back: () => void): FindPanelHandle {
-  const query = el("input", { className: "ss-find__input", attrs: { placeholder: TEXT.find } });
-  const repl = el("input", { className: "ss-find__input", attrs: { placeholder: TEXT.replace } });
+  const field = (placeholder: string): HTMLInputElement =>
+    setUiSize(el("input", { className: "ui-input ss-find__input", attrs: { placeholder } }), 24);
+  const query = field(TEXT.find);
+  const repl = field(TEXT.replace);
   const status = el("span", { className: "ss-find__status" });
   const button = (text: string, onClick: () => void): HTMLButtonElement => {
-    const b = el("button", { className: "ss-find__btn", text, attrs: { type: "button" } });
-    b.addEventListener("click", onClick);
+    const b = createButton({ label: text, variant: "ghost", size: 22, onClick });
+    b.classList.add("ss-find__btn");
     return b;
   };
   const check = (text: string): HTMLInputElement => {
@@ -42,8 +45,8 @@ export function mountFindPanel(ctx: SpreadsheetContext, back: () => void): FindP
     options.append(el("label", { className: "ss-find__opt", children: [box, text] }));
     return box;
   };
-  const closeBtn = button("×", close);
-  closeBtn.title = TEXT.close;
+  const closeBtn = createIconButton({ glyph: "×", title: TEXT.close, size: 22, onClick: close });
+  closeBtn.classList.add("ss-find__btn");
   const options = el("div", { className: "ss-find__row" });
   const caseBox = check(TEXT.case);
   const wholeBox = check(TEXT.whole);
@@ -52,19 +55,19 @@ export function mountFindPanel(ctx: SpreadsheetContext, back: () => void): FindP
     className: "ss-find__row",
     children: [repl, button(TEXT.one, one), button(TEXT.all, all)],
   });
-  const root = el("div", {
-    className: "ss-find",
-    attrs: { hidden: "" },
-    children: [
-      el("div", {
-        className: "ss-find__row",
-        children: [query, button(TEXT.next, next), closeBtn],
-      }),
-      replaceRow,
-      options,
-      status,
-    ],
-  });
+  // 떠 있는 판 부품(머리 없음 · 553-6) — 자리는 `.ss-find`
+  const { root, body } = createFloatPanel({ popover: true });
+  root.classList.add("ss-find");
+  root.setAttribute("hidden", "");
+  body.append(
+    el("div", {
+      className: "ss-find__row",
+      children: [query, button(TEXT.next, next), closeBtn],
+    }),
+    replaceRow,
+    options,
+    status,
+  );
   ctx.root.append(root);
 
   const opts = (): FindOptions => ({

A00_Common/spreadsheet/spreadsheet_format_dialog.css

@@ -1,50 +1,9 @@
 /* =============================================================================
  * spreadsheet_format_dialog.css  (2단계 · 주인 sub_laptop_1)
- * 셀 서식 대화상자 — 뿌리 배경(`.ui-confirm`)은 공용 확인 모달과 같은 것을 그대로 씀.
+ * 셀 서식 대화상자 — 창 · 탭 · 칸 = 부품 모달(40rem) · 탭(32) · 입력 · 고르기(28) · 여기는 안 배치만(553-6).
  * 색 · 간격은 테마 토큰만(`ui_template_theme.css`).
  * ========================================================================== */
 
-.ss-fmtdlg__panel {
-  display: flex;
-  flex-direction: column;
-  width: min(560px, 92vw);
-  max-height: 84vh;
-  padding: var(--spacing-16);
-  border-radius: var(--radius-cards);
-  background: var(--color-surface-raised);
-  box-shadow: var(--shadow-lg);
-}
-
-.ss-fmtdlg__title {
-  margin: 0 0 var(--spacing-8);
-  font-size: 1rem;
-  color: var(--color-text-body);
-}
-
-.ss-fmtdlg__tabs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2px;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.ss-fmtdlg__tabbtn {
-  padding: 6px 12px;
-  border: 1px solid var(--color-border);
-  border-bottom: 0;
-  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
-  background: var(--color-paper);
-  color: var(--color-text-secondary);
-  font-size: 0.82rem;
-  cursor: pointer;
-}
-
-.ss-fmtdlg__tabbtn.is-active {
-  background: var(--color-canvas);
-  color: var(--color-text-body);
-  font-weight: 600;
-}
-
 .ss-fmtdlg__body {
   flex: 1;
   min-height: 300px;
@@ -68,21 +27,7 @@
   width: 140px;
   flex-shrink: 0;
   color: var(--color-text-secondary);
-  font-size: 0.82rem;
-}
-
-.ss-fmtdlg__row select,
-.ss-fmtdlg__row input[type="text"],
-.ss-fmtdlg__row input:not([type]),
-.ss-fmtdlg__row input[type="number"],
-.ss-fmtdlg__code {
-  height: 28px;
-  padding: 0 6px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-canvas);
-  color: var(--color-text-body);
-  font-size: 0.82rem;
+  font-size: var(--text-body-sm);
 }
 
 .ss-fmtdlg__code {
@@ -135,7 +80,7 @@
 .ss-fmtdlg__note {
   margin: 0 0 var(--spacing-8);
   color: var(--color-text-muted);
-  font-size: 0.8rem;
+  font-size: var(--text-caption);
 }
 
 .ss-fmtdlg__actions {

A00_Common/spreadsheet/spreadsheet_format_dialog.ts

@@ -12,7 +12,9 @@
  * 우클릭 메뉴 [셀 서식] 도 같은 함수를 부르면 됨(`spreadsheet_menu.ts`).
  * ========================================================================== */
 
-import { createButton, el } from "@ui/ui_template_elements";
+import { createButton, el, setUiSize } from "@ui/ui_template_elements";
+import { createTabs } from "@ui/ui_template_tabs";
+import { openModal } from "@ui/ui_template_modal";
 import { toFrac } from "@ui/sheet/ui_template_sheet_frac";
 import { colName, rangeToA1, toA1 } from "./spreadsheet_address";
 import {
@@ -39,6 +41,7 @@ const TEXT = {
   tabProtect: "보호",
   ok: "확인",
   cancel: "취소",
+  close: "닫기",
   category: "범주",
   decimals: "소수 자릿수",
   thousands: "천 단위 구분 기호 사용",
@@ -105,17 +108,9 @@ export function openFormatDialog(ctx: SpreadsheetContext): void {
   const spansMany = range.r0 !== range.r1 || range.c0 !== range.c1;
   let mergeWanted = (ctx.sheet().병합 ?? []).includes(rangeToA1(range));
 
-  const overlay = el("div", { className: "ui-confirm ss-fmtdlg" });
-  const panel = el("div", { className: "ss-fmtdlg__panel" });
   const tabsBar = el("div", { className: "ss-fmtdlg__tabs" });
   const body = el("div", { className: "ss-fmtdlg__body" });
-  overlay.append(panel);
-  panel.append(el("h2", { className: "ss-fmtdlg__title", text: TEXT.title }), tabsBar, body);
-
-  const close = (): void => overlay.remove();
-  overlay.addEventListener("click", (ev) => {
-    if (ev.target === overlay) close();
-  });
+  let close = (): void => {};
 
   // ── 표시 형식 ────────────────────────────────────────────────────────
   let category: Category = guessCategory(draft.형식);
@@ -464,22 +459,25 @@ export function openFormatDialog(ctx: SpreadsheetContext): void {
     [TEXT.tabProtect, protectTab],
   ];
 
-  function showTab(index: number): void {
-    body.replaceChildren(tabs[index][1]());
-    tabsBar.querySelectorAll(".ss-fmtdlg__tabbtn").forEach((btn, i) => {
-      btn.classList.toggle("is-active", i === index);
-    });
-  }
-
-  tabs.forEach(([label], i) => {
-    const btn = el("button", {
-      className: "ss-fmtdlg__tabbtn",
-      text: label,
-      attrs: { type: "button" },
-    });
-    btn.addEventListener("click", () => showTab(i));
-    tabsBar.append(btn);
+  const tabBar = createTabs({
+    tabs: tabs.map(([label], i) => ({ key: String(i), label })),
+    value: "0",
+    size: 32,
+    onChange: (key) => showTab(Number(key)),
   });
+  tabsBar.append(tabBar.root);
+
+  function showTab(index: number): void {
+    const tab = tabs[index][1]();
+    // 칸 = 부품 입력 · 고르기 28(553-6)
+    const fields = "select, input:not([type]), input[type=text], input[type=number]";
+    for (const f of tab.querySelectorAll<HTMLElement>(fields)) {
+      f.classList.add(f.tagName === "SELECT" ? "ui-select" : "ui-input");
+      setUiSize(f, 28);
+    }
+    body.replaceChildren(tab);
+    tabBar.select(String(index));
+  }
 
   function apply(): void {
     ctx.dispatch({ 종류: "서식", 시트: ctx.selection.시트, 범위: ctx.selection.범위, 바꿀: draft });
@@ -497,13 +495,21 @@ export function openFormatDialog(ctx: SpreadsheetContext): void {
   const actions = el("div", {
     className: "ss-fmtdlg__actions",
     children: [
-      createButton({ label: TEXT.cancel, variant: "ghost", onClick: close }),
+      createButton({ label: TEXT.cancel, variant: "ghost", onClick: () => close() }),
       createButton({ label: TEXT.ok, variant: "filled", onClick: apply }),
     ],
   });
-  panel.append(actions);
 
   showTab(0);
-  document.body.append(overlay);
-  dialogKeys(overlay, close, apply);
+  openModal({
+    title: TEXT.title,
+    closeLabel: TEXT.close,
+    width: "40rem",
+    dialogClass: "ss-fmtdlg",
+    mount: (box, shut) => {
+      close = shut;
+      box.append(tabsBar, body, actions);
+      dialogKeys(box.parentElement ?? box, shut, apply);
+    },
+  });
 }

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_links.css

@@ -120,20 +120,11 @@
   width: 320px;
   padding: var(--spacing-8);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-cards);
   background: var(--color-surface-raised);
   box-shadow: var(--shadow-lg);
 }
 
-.ss-links__search {
-  padding: 4px 6px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-canvas);
-  color: var(--color-text-body);
-  font: inherit;
-}
-
 .ss-links__list {
   display: flex;
   flex-direction: column;
@@ -155,7 +146,7 @@
 }
 
 .ss-links__row:hover {
-  background: var(--color-mist-violet);
+  background: var(--color-hover);
 }
 
 .ss-links__note {

A00_Common/spreadsheet/spreadsheet_links.ts

@@ -585,8 +585,8 @@ export function mountLinks(
   function openPick(anchor: HTMLElement): void {
     closePick();
     const input = el("input", {
-      className: "ss-links__search",
-      attrs: { type: "search", placeholder: TEXT.search },
+      className: "ui-input ss-links__search",
+      attrs: { type: "search", placeholder: TEXT.search, "data-size": "28" },
     }) as HTMLInputElement;
     const list = el("div", { className: "ss-links__list" });
     const note = (text: string) => el("div", { className: "ss-links__note", text });

A00_Common/spreadsheet/spreadsheet_menu.ts

@@ -59,15 +59,15 @@ export function attachMenu(ctx: SpreadsheetContext): PartHandle {
   /** 메모 글 입력 — 작은 오버레이(native prompt 안 씀, 자동화 창이 native 창을 자동 취소하는
    * 문제는 `showConfirmDialog` 머리 주석과 같은 까닭). 저장을 누르면 `onSave`. */
   function openCommentEditor(initial: string, onSave: (text: string) => void): void {
-    const overlay = el("div", { className: "ss-comment-editor" });
-    const panel = el("div", { className: "ss-comment-editor__panel" });
+    const overlay = el("div", { className: "ui-confirm ss-comment-editor" });
+    const panel = el("div", { className: "ui-confirm__panel" });
     const textarea = el("textarea", {
-      className: "ss-comment-editor__input",
+      className: "ui-input ss-comment-editor__input",
     }) as HTMLTextAreaElement;
     textarea.value = initial;
     const done = (): void => overlay.remove();
     const actions = el("div", {
-      className: "ss-comment-editor__actions",
+      className: "ui-confirm__actions",
       children: [
         createButton({ label: "취소", variant: "ghost", onClick: done }),
         createButton({

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_sort_dialog.ts

@@ -100,12 +100,17 @@ export function openSortDialog(ctx: SpreadsheetContext): () => void {
   function drawKeys() {
     list.replaceChildren(
       ...keys.map((k, i) => {
-        const col = el("select", { attrs: { "aria-label": t("Column") } });
+        const col = el("select", {
+          className: "ui-select",
+          attrs: { "aria-label": t("Column"), "data-size": "28" },
+        });
         for (let c = rg.c0; c <= rg.c1; c++)
           col.append(el("option", { text: columnLabel(c), attrs: { value: String(c) } }));
         col.value = String(k.열);
         col.addEventListener("change", () => (k.열 = Number(col.value)));
         const dir = el("select", {
+          className: "ui-select",
+          attrs: { "data-size": "28" },
           children: [
             el("option", { text: t("Asc"), attrs: { value: "asc" } }),
             el("option", { text: t("Desc"), attrs: { value: "desc" } }),

A00_Common/spreadsheet/spreadsheet_sortfilter.css

@@ -7,7 +7,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgb(0 0 0 / 18%);
+  background: var(--color-scrim);
 }
 
 .ss-sort__box,
@@ -48,11 +48,6 @@
 
 .ss-sort__row select {
   flex: 1;
-  padding: var(--spacing-4);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-canvas);
-  color: inherit;
 }
 
 .ss-sort__row option {
@@ -92,8 +87,8 @@
 }
 
 .ss-filter__btn.is-on {
-  color: var(--color-royal-amethyst);
-  border-color: var(--color-royal-amethyst);
+  color: var(--color-accent);
+  border-color: var(--color-accent);
 }
 
 .ss-filter__panel {
@@ -130,5 +125,5 @@
 }
 
 .ss-filter__link:hover {
-  background: var(--color-mist-violet);
+  background: var(--color-hover);
 }