fix(B05 배수유역): 349-0i 되돌리기로 저장 노선에 돌아오면 저장분 다시 받기 — 낡음 그대로 머묾 없앰

- 노선 초안이 없어지면(되돌리기 · 버림) 저장 배수유역을 열 때와 같은 길로 조용히 다시 받음(계산 아님) · 그 답의 낡음대로 흐림 풂 또는 그대로 · [적용] 따라감
- 떠 있던 초안용 live 요청 끊음 · 자동도 3 s 셈 대신 저장분 · 답 올 때까지 흐림 유지
- 패널 받기 줄 — loadSaved 를 요청 함수로(열 때 · reload · 되돌리기가 같은 길) · 700줄 맞춤
- test_349_drainage_live_flow 되돌리기 장면(자동 · 수동 요청 중 · 저장분 낡음)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XWh5wNNycMkbwMpACz1rte

.env

@@ -46,7 +46,9 @@ CORS_ORIGINS=http://localhost:5173,http://localhost:8000
 
 # Public URL for email links (프론트엔드 주소)
 APP_PUBLIC_BASE_URL=http://localhost:5173
-
+KAKAO_REST_API_KEY=ea05e4c86be146d9e28586d3f25d5a08
+KAKAO_JS_KEY=98ac6edef14ffbca300d90e540644b68
+# kakao app ID 1603330
 # Gitea 토큰 66a40de16156431db0dfbf86149f8bafcec4832f
 # 국토정보플랫폼 API키 : C7111C0D1C2D353F37EDE33145E2A286DF8D8EC6CA
 # 브이월드 API키 : 3DBD7306-7DBD-38BB-B292-267C5ED7AC6B

.gitignore

@@ -71,6 +71,8 @@ config/formula_node/
 config/spreadsheet_node/
 # 횡단도 덧그림 범위 번들 — `npm run build:b07-extent` 산출물.
 config/b07_extent_node/
+# 횡단도 표 위 CAD 칸 옵션 줄 번들 — `npm run build:b07-note` 산출물(166-1).
+config/b07_note_node/
 
 # graphify 위키 산출물 — 창끼리 같은 위키를 찾게 **통째로** git 으로 나름
 # (2026-09-09 사용자 확정 「출력물 전체를 공유해도 됨」).

A00_Common/app_settings.css

@@ -0,0 +1,53 @@
+/* ☰ [설정] 창(PLAN 332-2) — 탭 줄 · 휠 방향 고름 · 표 */
+.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 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-16);
+}
+
+.app-settings__radios > label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  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__table thead th {
+  position: sticky;
+  top: 0;
+  background: var(--color-surface-raised);
+}
+
+.app-settings__table input[aria-invalid="true"] {
+  border-color: var(--color-danger);
+}
+
+.app-settings__error {
+  color: var(--color-danger);
+}
+
+.app-settings__error:empty {
+  display: none;
+}

A00_Common/app_settings.ts

@@ -0,0 +1,159 @@
+/* =============================================================================
+ * app_settings.ts
+ * ☰ [설정] 창(PLAN 332-2 · 요구 224-8) — 탭 셋: ① 마우스 ② CAD 단축키 ③ 다른 곳 단축키(읽기 전용).
+ *
+ * - 고침은 창 안 사본에만 · [저장] 때만 계정 pref(`input-prefs`)로 한 번 씀 — 읽기는 `input_prefs.ts`
+ * - 저장 안 한 고침이 있으면 닫을 때 물음(askLeave) · 잘못 있는 별칭은 저장 안 함
+ * - 로그인 전엔 이 브라우저에만 남음(계정 올리기는 `b_page_state` 가 로그인 뒤에)
+ * ========================================================================== */
+
+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 { buildCadAliasTab, checkCadAliases } from "./app_settings_cad";
+import "./app_settings.css";
+
+type LocaleKey = Parameters<typeof L>[0];
+type TabId = "mouse" | "cad" | "keys";
+
+const TABS: [TabId, LocaleKey][] = [
+  ["mouse", "App_Settings_Tab_Mouse"],
+  ["cad", "App_Settings_Tab_Cad"],
+  ["keys", "App_Settings_Tab_Keys"],
+];
+
+const WHEEL: [WheelZoom, LocaleKey][] = [
+  ["pull", "App_Settings_Wheel_Pull"],
+  ["push", "App_Settings_Wheel_Push"],
+];
+
+const MOUSE_RULES: LocaleKey[] = [
+  "App_Settings_Rule_Pan",
+  "App_Settings_Rule_Pick",
+  "App_Settings_Rule_Right",
+  "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"],
+];
+
+/** 비교 · 저장 꼴 — 별칭 명령 차례를 맞춤 */
+const normalize = (p: InputPrefs): InputPrefs => ({
+  wheelZoom: p.wheelZoom,
+  cadAliases: Object.fromEntries(Object.entries(p.cadAliases).sort(([a], [b]) => (a < b ? -1 : 1))),
+});
+const snapshot = (p: InputPrefs): string => JSON.stringify(normalize(p));
+
+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,
+      el("h4", { text: L("App_Settings_Rules") }),
+      el("ul", { children: MOUSE_RULES.map((key) => el("li", { text: L(key) })) }),
+    ],
+  });
+}
+
+function keysTab(): HTMLElement {
+  const rows = KEY_ROWS.map(([place, keys]) =>
+    el("tr", { children: [el("th", { text: L(place) }), el("td", { text: L(keys) })] }),
+  );
+  return el("table", {
+    className: "app-settings__table",
+    children: [el("tbody", { children: rows })],
+  });
+}
+
+/** ☰ [설정] — 창을 열고 지금 설정을 사본으로 고침 */
+export function openAppSettings(): void {
+  const draft = normalize(inputPrefs());
+  let saved = snapshot(draft);
+  const cad = buildCadAliasTab(draft.cadAliases);
+  const panels: Record<TabId, HTMLElement> = {
+    mouse: mouseTab(draft),
+    cad: cad.root,
+    keys: keysTab(),
+  };
+  const tabs = el("div", {
+    className: "app-settings__tabs ui-subtabs",
+    attrs: { role: "tablist" },
+  });
+  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;
+      }),
+    );
+    for (const [tab, panel] of Object.entries(panels)) panel.hidden = tab !== id;
+  };
+
+  /** [저장] — 잘못 있는 별칭이면 CAD 탭을 보이고 안 씀 */
+  const save = (): boolean => {
+    const errors = checkCadAliases(draft.cadAliases);
+    cad.mark(errors);
+    if (Object.keys(errors).length) {
+      show("cad");
+      showToast(L("App_Settings_Cad_Invalid"), "error");
+      return false;
+    }
+    if (snapshot(draft) !== saved) writeState("input-prefs", normalize(draft));
+    saved = snapshot(draft);
+    showToast(L("App_Settings_Saved"), "success");
+    return true;
+  };
+
+  const saveButton = createButton({
+    label: L("Common_Btn_Save"),
+    variant: "filled",
+    size: "sm",
+    onClick: () => void save(),
+  });
+  openModal({
+    title: L("App_Settings"),
+    closeLabel: L("Common_Btn_Close"),
+    dialogClass: "app-settings",
+    actions: [saveButton],
+    beforeClose: async () => {
+      if (snapshot(draft) === saved) return true;
+      const choice = await askLeave(L("App_Settings_Leave"));
+      return choice === "discard" || (choice === "save" && save());
+    },
+    mount: (body) => {
+      show("mouse");
+      body.append(tabs, ...Object.values(panels));
+    },
+  });
+}

A00_Common/app_settings_cad.ts

@@ -0,0 +1,118 @@
+/* =============================================================================
+ * app_settings_cad.ts
+ * ☰ [설정] ② CAD 단축키 탭(PLAN 332-2) — 명령 표(명령 · 한글 이름 · 기본 별칭 · 내 별칭) · 검사.
+ *
+ * - 명령 목록 = `openwebcad/src/commands/command-catalog.json`(registry 거울 · commands.*.ts 는 xstate 가 딸려 와서 JSON 한 벌)
+ * - acad.pgp 식 덮어쓰기 — CAD 는 명령 이름 > 내 별칭 > 기본 별칭 순서로 찾음(배선은 332-3)
+ * - 검사 = 영문 · 숫자만 · 내 별칭끼리 겹침 금지 · 명령 이름과 같은 별칭 금지
+ * ========================================================================== */
+
+import catalog from "../B07_DesignDetail/openwebcad/src/commands/command-catalog.json";
+import { el } from "@ui/ui_template_elements";
+import { t as L } from "@ui/ui_template_locale";
+
+export interface CadCommandRow {
+  id: string;
+  label: string;
+  aliases: string[];
+}
+
+export const CAD_COMMANDS = catalog as CadCommandRow[];
+
+export type AliasError = "chars" | "dup" | "name";
+
+const ERROR_TEXT: Record<AliasError, Parameters<typeof L>[0]> = {
+  chars: "App_Settings_Cad_ErrChars",
+  dup: "App_Settings_Cad_ErrDup",
+  name: "App_Settings_Cad_ErrName",
+};
+
+/** 칸 글 → 별칭 목록(쉼표 · 빈칸으로 가름 · 대문자) */
+export const parseAliases = (text: string): string[] =>
+  text
+    .toUpperCase()
+    .split(/[\s,]+/)
+    .filter(Boolean);
+
+/** 내 별칭 검사 — `{명령: 첫 잘못}` · 비면 통과 */
+export function checkCadAliases(
+  aliases: Record<string, string[]>,
+  commands: CadCommandRow[] = CAD_COMMANDS,
+): Record<string, AliasError> {
+  const ids = new Set(commands.map((c) => c.id));
+  const owner = new Map<string, string>();
+  const errors: Record<string, AliasError> = {};
+  for (const [id, list] of Object.entries(aliases)) {
+    for (const alias of list) {
+      const first = owner.get(alias);
+      const error: AliasError | null = !/^[A-Z0-9]+$/.test(alias)
+        ? "chars"
+        : ids.has(alias)
+          ? "name"
+          : first !== undefined
+            ? "dup"
+            : null;
+      if (!error) owner.set(alias, id);
+      else {
+        errors[id] ??= error;
+        if (first !== undefined) errors[first] ??= "dup";
+      }
+    }
+  }
+  return errors;
+}
+
+/** 탭 몸 — `aliases` 를 칸 입력대로 고쳐 씀 · `mark` 로 잘못 칸 표시 */
+export function buildCadAliasTab(aliases: Record<string, string[]>): {
+  root: HTMLElement;
+  mark: (errors: Record<string, AliasError>) => void;
+} {
+  const message = el("p", { className: "app-settings__error", attrs: { role: "alert" } });
+  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")}` },
+    });
+    input.value = (aliases[command.id] ?? []).join(", ");
+    input.dataset.cadCommand = command.id;
+    input.addEventListener("input", () => {
+      const list = parseAliases(input.value);
+      if (list.length) aliases[command.id] = list;
+      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 })],
+  });
+  const mark = (errors: Record<string, AliasError>): void => {
+    for (const [id, input] of inputs) {
+      const error = errors[id];
+      if (error) input.setAttribute("aria-invalid", "true");
+      else input.removeAttribute("aria-invalid");
+      input.title = error ? L(ERROR_TEXT[error]) : "";
+    }
+    const kinds = [...new Set(Object.values(errors))];
+    message.textContent = kinds.map((k) => L(ERROR_TEXT[k])).join(" · ");
+  };
+  const root = el("div", {
+    children: [el("p", { text: L("App_Settings_Cad_Help") }), message, table],
+  });
+  return { root, mark };
+}

A00_Common/app_shell.ts

@@ -11,6 +11,7 @@ import { ui_locales, currentLanguageIndex, setLanguage } from "@ui/ui_template_l
 import { createButton } from "@ui/ui_template_elements";
 import { THEME_STORAGE_KEY, LANG_STORAGE_KEY, ROUTES } from "@config/config_frontend";
 import { navigateTo, isAuthenticated } from "./router";
+import { readTouchMode, setTouchMode, type TouchMode } from "./device_context";
 
 const BRAND_ICON_URL = new URL("../resources/app_branding/prog_icon.jpg", import.meta.url).href;
 
@@ -65,38 +66,12 @@ function buildHeader(): HTMLElement {
   const header = document.createElement("header");
   header.className = "app-header";
 
-  // 로고 (클릭 시 홈)
-  const brand = document.createElement("button");
-  brand.className = "app-brand";
-  brand.type = "button";
-  const brandIcon = document.createElement("img");
-  brandIcon.className = "app-brand__icon";
-  brandIcon.src = BRAND_ICON_URL;
-  brandIcon.alt = "";
-  const brandName = document.createElement("span");
-  brandName.className = "app-brand__name";
-  brandName.textContent = L("App_BrandName");
-  brand.append(brandIcon, brandName);
-  brand.addEventListener("click", () => navigateTo(ROUTES.A01_HOME));
+  const brand = buildBrand();
 
   // 네비게이션 링크
   const nav = document.createElement("nav");
   nav.className = "app-nav";
-  const navItems: [keyof typeof ui_locales, string][] = [
-    ["App_Nav_Program", ROUTES.A02_PROG_DETAIL],
-    ["App_Nav_Company", ROUTES.A03_COMP_DETAIL],
-    ["App_Nav_News", ROUTES.A04_NEWS_HISTORY],
-    ["App_Nav_Education", ROUTES.A05_EDU_DETAIL],
-    ["App_Nav_Support", ROUTES.A08_SUPPORT],
-  ];
-  for (const [labelKey, route] of navItems) {
-    const link = createButton({
-      label: L(labelKey),
-      variant: "pill",
-      onClick: () => navigateTo(route as never),
-    });
-    nav.append(link);
-  }
+  nav.append(...buildNavButtons());
 
   // 우측 액션 (언어/테마/로그인)
   const actions = document.createElement("div");
@@ -120,10 +95,171 @@ function buildHeader(): HTMLElement {
   actions.append(authSlot);
   void fillAuthActions(authSlot);
 
-  header.append(brand, nav, actions);
+  header.append(brand, nav, actions, ...buildDrawer(header));
   return header;
 }
 
+/** 로고 (클릭 시 홈) — 위 줄 · ☰ 서랍 첫 묶음이 같이 씀 */
+function buildBrand(): HTMLButtonElement {
+  const brand = document.createElement("button");
+  brand.className = "app-brand";
+  brand.type = "button";
+  const brandIcon = document.createElement("img");
+  brandIcon.className = "app-brand__icon";
+  brandIcon.src = BRAND_ICON_URL;
+  brandIcon.alt = "";
+  const brandName = document.createElement("span");
+  brandName.className = "app-brand__name";
+  brandName.textContent = L("App_BrandName");
+  brand.append(brandIcon, brandName);
+  brand.addEventListener("click", () => navigateTo(ROUTES.A01_HOME));
+  return brand;
+}
+
+/* ☰ 서랍 진행 단계 묶음(6-2) — 프로젝트 화면이 진행 판에 그린 단계 목록 **그 요소**를 받아 둠.
+ * 서랍을 열 때 서랍으로 옮기고 닫을 때 제자리(진행 판)로 — 그리기 · 누름 코드는 한 벌. */
+let drawerSteps: { node: HTMLElement; home: HTMLElement | null } | null = null;
+
+/** 집(진행 판) 없는 요소 = 서랍이 늘 가짐 · 닫을 때 안 옮김(B01 · M01 · M02 바로가기) */
+export function setDrawerSteps(node: HTMLElement | null): void {
+  drawerSteps = node ? { node, home: node.parentElement } : null;
+}
+
+const NAV_ITEMS: [keyof typeof ui_locales, string][] = [
+  ["App_Nav_Program", ROUTES.A02_PROG_DETAIL],
+  ["App_Nav_Company", ROUTES.A03_COMP_DETAIL],
+  ["App_Nav_News", ROUTES.A04_NEWS_HISTORY],
+  ["App_Nav_Education", ROUTES.A05_EDU_DETAIL],
+  ["App_Nav_Support", ROUTES.A08_SUPPORT],
+];
+
+function buildNavButtons(): HTMLElement[] {
+  return NAV_ITEMS.map(([labelKey, route]) =>
+    createButton({
+      label: L(labelKey),
+      variant: "pill",
+      onClick: () => navigateTo(route as never),
+    }),
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * ☰ 서랍(PLAN_기기대응 2-2 · 7-1) — 공개 쪽은 폭 900 이하 · 터치 모드에서 · 로그인 뒤 쪽(B · M)은 늘 보임.
+ * 위 메뉴 · 언어 · 테마 · 로그인 단추와 같은 항목 + 터치 모드 스위치.
+ * -------------------------------------------------------------------------- */
+function buildDrawer(header: HTMLElement): HTMLElement[] {
+  const burger = document.createElement("button");
+  burger.type = "button";
+  burger.className = "app-burger";
+  burger.textContent = "☰";
+  burger.setAttribute("aria-label", L("App_Menu"));
+  burger.setAttribute("aria-expanded", "false");
+  const drawer = document.createElement("div");
+  drawer.className = "app-drawer";
+  drawer.setAttribute("role", "dialog");
+  drawer.setAttribute("aria-label", L("App_Menu"));
+  const scrim = document.createElement("div");
+  scrim.className = "app-drawer__scrim";
+  const steps = document.createElement("div");
+  steps.className = "app-drawer__group app-drawer__steps";
+  const setOpen = (open: boolean): void => {
+    header.classList.toggle("is-drawer-open", open);
+    burger.setAttribute("aria-expanded", String(open));
+    if (!drawerSteps) return;
+    if (open) steps.append(drawerSteps.node);
+    else if (drawerSteps.home && steps.contains(drawerSteps.node))
+      drawerSteps.home.append(drawerSteps.node);
+  };
+  burger.addEventListener("click", () => setOpen(!header.classList.contains("is-drawer-open")));
+  scrim.addEventListener("click", () => setOpen(false));
+  header.addEventListener("keydown", (e) => e.key === "Escape" && setOpen(false)); // ☰ 에 포커스가 있어도 닫힘
+  // 로고 · 진행 단계 · 메뉴 · 로그인 · [설정] 을 누르면 닫힘(언어 · 테마 · 스위치는 그대로 둠)
+  drawer.addEventListener("click", (e) => {
+    const hit = (e.target as Element).closest("button");
+    if (
+      hit?.closest(
+        ".app-drawer__brand, .app-drawer__steps, .app-drawer__nav, .app-drawer__auth, .app-drawer__settings",
+      )
+    )
+      setOpen(false);
+  });
+
+  // 묶음 차례 = 로고 · 홈 ─ 진행 단계(프로젝트 안) ─ 메뉴 ─ 언어 · 테마 · 로그인 · 터치 모드
+  const brandRow = document.createElement("div");
+  brandRow.className = "app-drawer__group app-drawer__brand";
+  brandRow.append(buildBrand());
+  const navList = document.createElement("nav");
+  navList.className = "app-drawer__group app-drawer__nav";
+  navList.append(...buildNavButtons());
+  const prefs = document.createElement("div");
+  prefs.className = "app-drawer__row";
+  prefs.append(
+    createButton({
+      label: currentLanguageIndex === 0 ? "EN" : "한",
+      variant: "pill",
+      onClick: onApp_Lang_Toggle_Click,
+    }),
+    createButton({
+      label: document.documentElement.getAttribute("data-theme") === "dark" ? "☀" : "☾",
+      variant: "pill",
+      onClick: onApp_Theme_Toggle_Click,
+    }),
+  );
+  // ☰ [설정](332) — 마우스 · 단축키 창 · 처음 누를 때 불러옴
+  const settingsButton = createButton({
+    label: L("App_Settings"),
+    variant: "pill",
+    onClick: () => void import("./app_settings").then((m) => m.openAppSettings()),
+  });
+  settingsButton.classList.add("app-drawer__settings");
+  prefs.append(settingsButton);
+  const auth = document.createElement("div");
+  auth.className = "app-drawer__row app-drawer__auth";
+  void fillAuthActions(auth);
+  const settings = document.createElement("div");
+  settings.className = "app-drawer__group";
+  settings.append(prefs, auth, buildTouchModeSwitch());
+  drawer.append(brandRow, steps, navList, settings);
+  return [burger, scrim, drawer];
+}
+
+function buildTouchModeSwitch(): HTMLElement {
+  const box = document.createElement("div");
+  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;
+  });
+  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);
+  return box;
+}
+
 /** 서버 세션 상태에 따라 로그인/로그아웃 버튼을 채운다. */
 async function fillAuthActions(slot: HTMLElement): Promise<void> {
   try {
@@ -188,6 +324,7 @@ function buildFooter(): HTMLElement {
  * -------------------------------------------------------------------------- */
 export function renderShell(appRoot: HTMLElement, showFooter = true): HTMLElement {
   appRoot.innerHTML = "";
+  drawerSteps = null; // 새 쪽이 진행 판을 세우면 다시 맡김
   const header = buildHeader();
   const outlet = document.createElement("main");
   outlet.className = "app-outlet";
@@ -259,10 +396,10 @@ const SHELL_CSS = `
   gap: var(--spacing-8);
 }
 .app-outlet {
-  min-height: calc(100vh - 64px - 56px);
+  min-height: calc(100dvh - var(--app-header-h) - 56px);
 }
 .app-outlet--without-footer {
-  min-height: calc(100vh - 64px);
+  min-height: calc(100dvh - var(--app-header-h));
 }
 .app-footer {
   height: 56px;
@@ -285,7 +422,120 @@ const SHELL_CSS = `
 }
 @media (max-width: 900px) {
   .app-nav { display: none; }
+  .app-actions { margin-left: auto; }
 }
+/* ☰ 서랍 — 공개 쪽은 폭 900 이하 · 터치 모드에서만 · 로그인 뒤 쪽(B · M)은 늘 */
+.app-burger,
+.app-drawer,
+.app-drawer__scrim {
+  display: none;
+}
+.app-burger {
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 44px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-buttons);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 20px;
+  cursor: pointer;
+}
+html:is([data-burger="on"], .is-bm-route) .app-burger { display: inline-flex; }
+.app-header.is-drawer-open { z-index: var(--z-overlay); }
+.app-header.is-drawer-open .app-drawer__scrim {
+  display: block;
+  position: fixed;
+  inset: var(--app-header-h) 0 0 0;
+  background: rgba(38, 17, 74, 0.35);
+}
+.app-header.is-drawer-open .app-drawer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  position: fixed;
+  top: var(--app-header-h);
+  right: 0;
+  bottom: 0;
+  width: min(320px, 100vw);
+  padding: var(--spacing-16);
+  overflow-y: auto;
+  background: var(--color-surface-raised);
+  border-left: 1px solid var(--color-border);
+  box-shadow: var(--shadow-lg);
+}
+.app-drawer__nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+.app-drawer__nav > * { justify-content: flex-start; min-height: 44px; }
+.app-drawer__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-8);
+}
+.app-drawer__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+.app-drawer__group + .app-drawer__group {
+  padding-top: var(--spacing-16);
+  border-top: 1px solid var(--color-border);
+}
+.app-drawer__steps:empty { display: none; }
+.app-drawer__touch {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  color: var(--color-text-secondary);
+  font-size: var(--text-caption);
+}
+.app-drawer__touch [aria-checked="true"] {
+  background: var(--color-mist-violet);
+  color: var(--color-accent);
+}
+/* 휴대폰 폭 — 오른쪽 단추(언어 · 테마 · 로그인)는 서랍 안으로 */
+html[data-size="compact"] .app-header { padding: 0 var(--spacing-16); gap: var(--spacing-8); }
+html[data-size="compact"] .app-actions { display: none; }
+html[data-size="compact"] .app-burger { margin-left: auto; }
+/* 로그인 뒤 쪽(B · M) — 폭 · 입력과 상관없이 위 줄을 걷고 ☰ 만 화면 왼쪽 위 모서리에 띄움(7-1)
+   본문이 화면 높이를 다 씀 · 서랍은 왼쪽에서 열림 · 위 줄 항목은 모두 서랍에 있음 */
+html.is-bm-route .app-header {
+  height: 0;
+  padding: 0;
+  border: 0;
+  z-index: calc(var(--z-dropdown) + 1);
+}
+html.is-bm-route .app-header > :is(.app-brand, .app-nav, .app-actions) {
+  display: none;
+}
+/* ☰ 폭 36(7-4) · 높이는 손가락 44 · 마우스 36 */
+html.is-bm-route .app-burger {
+  min-width: var(--app-burger-w);
+  min-height: var(--app-burger-w);
+  position: fixed;
+  top: var(--spacing-8);
+  left: var(--spacing-8);
+  z-index: 1;
+  margin: 0;
+  padding: 0;
+  box-shadow: var(--shadow-lg);
+}
+html.is-bm-route[data-touch="on"] .app-burger { min-height: 44px; }
+html.is-bm-route .app-header.is-drawer-open .app-drawer {
+  left: 0;
+  right: auto;
+  border-left: 0;
+  border-right: 1px solid var(--color-border);
+}
+html.is-bm-route .app-drawer__brand {
+  min-height: 44px;
+  padding-left: calc(var(--app-burger-inset) - var(--spacing-16));
+}
+html.is-bm-route .app-drawer__brand .app-brand { align-self: flex-start; }
 `;
 
 export function injectShellStyles(): void {

A00_Common/b_asset_cache.ts

@@ -11,6 +11,7 @@
 
 import { API_BASE_URL } from "@config/config_frontend";
 import { fetchConfirmedSurface } from "../B04_PreProcess/B04_PreProcess_Api_Fetch";
+import { loadDesignTerrainGrid } from "../B05_Profile/B05_Profile_Api_TerrainGrid";
 
 const DB_NAME = "aislo-asset-cache";
 // 담아 둔 자료의 형식이나 내용이 바뀌면 이 번호를 올린다 — 올리면 기존 보관분을 통째로 버린다.
@@ -30,9 +31,19 @@ export interface CachedAsset {
 
 let dbPromise: Promise<IDBDatabase | null> | null = null;
 
+/** 보관함 실패는 화면을 막지 않되 한 줄은 남긴다 — 같은 까닭은 한 번만. */
+const warned = new Set<string>();
+function warnOnce(what: string, error?: unknown): void {
+  const name = (error as { name?: string } | null)?.name ?? String(error ?? "");
+  const key = `${what}|${name}`;
+  if (warned.has(key)) return;
+  warned.add(key);
+  console.warn(`[asset-cache] ${what} 실패 — 보관 없이 받음`, name);
+}
+
 function openDatabase(): Promise<IDBDatabase | null> {
   if (dbPromise) return dbPromise;
-  dbPromise = new Promise((resolve) => {
+  const opening = new Promise<IDBDatabase | null>((resolve) => {
     if (!("indexedDB" in window)) {
       resolve(null);
       return;
@@ -45,9 +56,30 @@ function openDatabase(): Promise<IDBDatabase | null> {
       const store = db.createObjectStore(STORE, { keyPath: "key" });
       store.createIndex("projectId", "projectId", { unique: false });
     };
-    request.onsuccess = () => resolve(request.result);
+    request.onsuccess = () => {
+      const db = request.result;
+      // 다른 탭이 번호를 올리면 닫아 비켜 준다 — 안 닫으면 그 탭이 막혀 기다린다.
+      db.onversionchange = () => {
+        db.close();
+        dbPromise = null;
+      };
+      resolve(db);
+    };
+    // 옛 번호로 연 다른 탭이 안 닫으면 막힘 — 기다리지 않고 이번엔 보관 없이 간다.
+    request.onblocked = () => {
+      warnOnce("열기(다른 탭이 막음)");
+      resolve(null);
+    };
     // 사생활 보호 모드 등으로 열리지 않으면 보관함 없이 동작한다(항상 새로 받는다).
-    request.onerror = () => resolve(null);
+    request.onerror = () => {
+      warnOnce("열기", request.error);
+      resolve(null);
+    };
+  });
+  // 실패(null)를 페이지 끝까지 기억하지 않는다 — 다음 부름에서 다시 열어 본다.
+  dbPromise = opening.then((db) => {
+    if (!db) dbPromise = null;
+    return db;
   });
   return dbPromise;
 }
@@ -66,9 +98,19 @@ function runTransaction<T>(
         try {
           const transaction = db.transaction(STORE, mode);
           const request = work(transaction.objectStore(STORE));
-          request.onsuccess = () => resolve(request.result ?? null);
-          request.onerror = () => resolve(null);
-        } catch {
+          // 쓰기의 끝 = 트랜잭션 완료 — 요청 성공 뒤에도 용량 초과 등으로 통째 취소될 수 있다.
+          let result: T | null = null;
+          request.onsuccess = () => {
+            result = request.result ?? null;
+            if (mode === "readonly") resolve(result);
+          };
+          transaction.oncomplete = () => resolve(result);
+          transaction.onabort = () => {
+            warnOnce(mode === "readonly" ? "읽기" : "저장", transaction.error ?? request.error);
+            resolve(null);
+          };
+        } catch (error) {
+          warnOnce(mode === "readonly" ? "읽기" : "저장", error);
           resolve(null);
         }
       }),
@@ -87,26 +129,42 @@ async function writeAsset(asset: CachedAsset): Promise<void> {
   await runTransaction("readwrite", (store) => store.put(asset) as IDBRequest<unknown>);
 }
 
-/** 다른 프로젝트 자료를 모두 지운다. B그룹 페이지에 들어올 때 호출한다. */
-export async function purgeOtherProjects(projectId: string): Promise<void> {
+/** 지우기 트랜잭션 하나 — 끝(완료 · 취소)까지 기다린다. */
+async function deleteWhere(work: (store: IDBObjectStore) => void): Promise<void> {
   const db = await openDatabase();
   if (!db) return;
   await new Promise<void>((resolve) => {
     try {
       const transaction = db.transaction(STORE, "readwrite");
-      const store = transaction.objectStore(STORE);
-      const cursorRequest = store.openCursor();
+      work(transaction.objectStore(STORE));
+      transaction.oncomplete = () => resolve();
+      transaction.onabort = () => {
+        warnOnce("지우기", transaction.error);
+        resolve();
+      };
+    } catch (error) {
+      warnOnce("지우기", error);
+      resolve();
+    }
+  });
+}
+
+/** 다른 프로젝트 자료를 모두 지운다. B그룹 페이지에 들어올 때 호출한다.
+ *  색인 열쇠만 훑는다 — 값(수십 MB 바이트)을 읽지 않는다. */
+export async function purgeOtherProjects(projectId: string): Promise<void> {
+  await deleteWhere((store) => {
+    const index = store.index("projectId");
+    for (const range of [
+      IDBKeyRange.upperBound(projectId, true),
+      IDBKeyRange.lowerBound(projectId, true),
+    ]) {
+      const cursorRequest = index.openKeyCursor(range);
       cursorRequest.onsuccess = () => {
         const cursor = cursorRequest.result;
         if (!cursor) return;
-        const value = cursor.value as CachedAsset;
-        if (value.projectId !== projectId) cursor.delete();
+        store.delete(cursor.primaryKey);
         cursor.continue();
       };
-      transaction.oncomplete = () => resolve();
-      transaction.onerror = () => resolve();
-    } catch {
-      resolve();
     }
   });
 }
@@ -150,26 +208,9 @@ export async function writeCachedBytes(
  * 먹는다. 새것을 담기 **전에** 같은 앞머리를 치운다(2026-09-06).
  */
 export async function purgeAssetsWithPrefix(projectId: string, prefix: string): Promise<void> {
-  const db = await openDatabase();
-  if (!db) return;
-  await new Promise<void>((resolve) => {
-    try {
-      const transaction = db.transaction(STORE, "readwrite");
-      const store = transaction.objectStore(STORE);
-      const cursorRequest = store.openCursor();
-      cursorRequest.onsuccess = () => {
-        const cursor = cursorRequest.result;
-        if (!cursor) return;
-        const value = cursor.value as CachedAsset;
-        if (value.projectId === projectId && value.url.startsWith(prefix)) cursor.delete();
-        cursor.continue();
-      };
-      transaction.oncomplete = () => resolve();
-      transaction.onerror = () => resolve();
-    } catch {
-      resolve();
-    }
-  });
+  // 열쇠 = `${projectId}|${url}` — 앞머리 범위로 한 번에 지운다(값을 읽지 않음).
+  const low = cacheKey(projectId, prefix);
+  await deleteWhere((store) => store.delete(IDBKeyRange.bound(low, `${low}\uffff`)));
 }
 
 export interface CachedFetchOptions {
@@ -268,6 +309,17 @@ export async function fetchCachedJson<T>(
   return JSON.parse(new TextDecoder().decode(bytes)) as T;
 }
 
+/** 등고선 주소(유일한 정의처) — 같은 파일은 같은 주소여야 보관함 · 미리 받기를 함께 쓴다. */
+export function contourAssetUrl(
+  projectId: string,
+  modelId: number,
+  interval: number,
+  smooth: boolean,
+  recalculate = false,
+): string {
+  return `${API_BASE_URL}/projects/${projectId}/surface/models/${modelId}/contour?interval=${interval}&smooth=${smooth}&recalculate=${recalculate}`;
+}
+
 /** 배수유역도 배경으로 쓰는 도엽 레이어(유일한 정의처 — 준비화면과 B05 패널이 함께 쓴다). */
 export const DRAINAGE_SHEET_LAYERS = ["도엽_등고선", "도엽_하천중심선"] as const;
 
@@ -376,10 +428,13 @@ export async function preloadSurfaceAssets(
   report("등고선을 준비하는 중…", null);
   await fetchCachedBytes(
     projectId,
-    `${base}/contour?interval=${interval}&smooth=${smooth}&recalculate=false`,
+    contourAssetUrl(projectId, confirmed.model_id, interval, smooth),
     { onProgress: (ratio) => report("등고선을 준비하는 중…", ratio) },
   );
 
+  // 노선 편집 지반고를 브라우저가 읽는 설계 지형 격자(PLAN 344-1) — 못 받아도 멈추지 않음(null).
+  await loadDesignTerrainGrid(projectId);
+
   // 배수유역도 배경(도엽 표시본·위성사진)도 함께 담는다 — 없으면 B05가 진입할 때마다 받는다.
   // 이 자료가 없어도 화면은 뜨므로 실패해도 준비를 멈추지 않는다.
   report("배경 지도를 준비하는 중…", null);

A00_Common/b_page_scaffold.ts

@@ -174,7 +174,7 @@ const SCAFFOLD_CSS = `
   font-size: var(--text-body-sm);
   color: var(--color-text-muted);
 }
-.b-scaffold-wf { height: calc(100vh - 64px - 56px); }
+.b-scaffold-wf { height: calc(100dvh - var(--app-header-h) - 56px); }
 
 .b-pending {
   display: flex;

A00_Common/b_page_state.ts

@@ -57,8 +57,6 @@ export const STATE_REGISTRY = {
     legacy: () => "b05-route-drainage-collapsed",
   },
   "drainage-width": { bucket: "pref", scope: "global", legacy: () => "b05-route-drainage-width" },
-  /** 종단도 오른쪽 판(배수유역도) 켬 · 끔 — 두 보기가 같은 값(계획서 24-2c · 24-2e). */
-  "drainage-visible": { bucket: "pref", scope: "global" },
   /** M02 면적산출 오른쪽 일위대가 패널(`AreaPanel`) — 접힘 · 폭(옛 조합 패널 키 그대로) */
   "m02-combo-panel-collapsed": { bucket: "pref", scope: "global" },
   "m02-combo-panel-width": { bucket: "pref", scope: "global" },
@@ -66,9 +64,11 @@ export const STATE_REGISTRY = {
   "m02-card-pills": { bucket: "pref", scope: "global" },
   /** M01 단가산출 로직 상세 오른쪽 — 열린 패널 하나(flow · source · none) */
   "m01-logic-panel": { bucket: "pref", scope: "global" },
-  /** B09 묶음 탭(171-3) 보기 `{탭: cards · table}` · 가로 열 수 `{탭: 1~4}` */
+  /** B09 묶음 탭(171-3) 보기 `cards · table`(304-1 셋 탭 한 값) · 가로 열 수 `{탭: 1~4}` */
   "b09-group-view": { bucket: "pref", scope: "global" },
   "b09-group-cols": { bucket: "pref", scope: "global" },
+  /** B09 행 누름(303-1) `popup · link` */
+  "b09-link-mode": { bucket: "pref", scope: "global" },
   /** B05 계획노선 편집 창 — 보던 화면(회전 · 가운데 · 배율). 프로젝트마다 따로 */
   "routeedit-view": { bucket: "pref", scope: "project" },
   /** B05 계획노선 편집 창 — 시점 · 종점 · 교각점 고정. [저장] 대상이 아니라 draft 에 안 둠 */
@@ -101,6 +101,14 @@ export const STATE_REGISTRY = {
   },
   /** B06 횡단 카드 한 줄 카드 수(138-3 · 1~6 · 기본 3). */
   "cross-columns": { bucket: "pref", scope: "global" },
+  /** B05 · B06 종단 누가토량 알약 자리(309-2) — 그래프 영역 안 비율 `{"x":0~1,"y":0~1}` · 없으면 처음 자리. */
+  "mass-haul-badge-pos": { bucket: "pref", scope: "global" },
+  /** ☰ [설정] 마우스 · 단축키(332) — 읽기는 `input_prefs.ts`(같은 키 글자) · [저장] 때만 씀. */
+  "input-prefs": { bucket: "pref", scope: "global" },
+  /** B05 3D 영역 투영(316-2) `perspective · ortho` · 없으면 원근. */
+  "b05-3d-projection": { bucket: "pref", scope: "global" },
+  /** 배수유역 계산 `manual · auto`(347-2) · 없으면 수동. */
+  "drainage-mode": { bucket: "pref", scope: "global" },
   "section-panel-height": {
     bucket: "pref",
     scope: "global",
@@ -110,6 +118,8 @@ export const STATE_REGISTRY = {
   /* ── ② 설계 초안 ─────────────────────────────────────────────────────── */
   /** B06 횡단 [상세] 모달 측점 구조물 글(138-4) — 측점키(0.01 m) → 글. [저장]이 내보냄. */
   "structure-notes": { bucket: "draft", scope: "route" },
+  /** B06 횡단 [상세] 모달 표 위 CAD 칸(260-1) — 측점키(0.01 m) → CAD 엔티티 묶음. [저장]이 내보냄. */
+  "structure-note-cads": { bucket: "draft", scope: "route" },
   /** B06 횡단 [상세] 표 손질(179-4) — 측점키(0.01 m) → 고른 칸 · 더한 행 · 열. [저장]이 내보냄. */
   "detail-table": { bucket: "draft", scope: "route" },
   /** 아직 정본에 안 넣은 구조물 목록. B05 에서 만들고 B06 [저장]이 내보낸다. */
@@ -127,10 +137,14 @@ export const STATE_REGISTRY = {
     scope: "project",
     legacy: (p) => `aislo:structure-pick:${p}`,
   },
+  /** 관 세션 id 장부(323-5 · `design_pipe_ids`) — `{next, ids: [{id, at}]}` · 저장 안 함. */
+  "pipe-ids": { bucket: "draft", scope: "project" },
   /** 설계 가게(`design/design_store`)의 고른 측점 · 구조물 — `{chainageM, structureId}`. */
   selection: { bucket: "draft", scope: "project" },
   /** 구조물 패널 종류별 캐시 — 고른 구조물 하나 × 종류마다 옛 값(54-32). [저장]·[확정] 뒤 비움. */
   "structure-type-cache": { bucket: "draft", scope: "project" },
+  /** 종류를 바꾼 관 자리 `{누가거리: 처음 종류}`(318-4) — [저장] 때 그 측점 옛 조정값을 정본에서도 비움. */
+  kindreset: { bucket: "draft", scope: "project" },
   /** 배수관·암거 조정창에서 예약한 옵션 값. */
   culvertopt: { bucket: "draft", scope: "route", legacy: (p, r) => `b06:culvertopt:${p}:${r}` },
   /** 배수관 이동(측점 옮김) 예약. */
@@ -185,6 +199,8 @@ export const STATE_REGISTRY = {
   "b08-hydro": { bucket: "draft", scope: "project", version: 3 },
   /** B08 좌측 패널 옵션 `{one_pipe_length_m, soft_rock_pct}` — [저장] 때 M02 표 변수 · project_settings 로(122). */
   "b08-options": { bucket: "draft", scope: "project" },
+  /** B08 거리이정표 입력 `{site, base, routes}` 한 벌 — [저장] 때 프로젝트 B08_Quantity/milestone 으로(244-1). */
+  "b08-milestone": { bucket: "draft", scope: "project" },
   /** B09 원가 사용자 값 `{materials, estimate}`(고친 칸만) — [저장] 때 프로젝트 B09 폴더로(144). */
   "b09-estimation": { bucket: "draft", scope: "project" },
   /** 미저장 계획고 편집(▲▼ · 곡선반경) — 설계 가게 `alignmentDraft` 의 칸(계획서 24-2c).
@@ -194,6 +210,9 @@ export const STATE_REGISTRY = {
     scope: "route",
     legacy: (_p, r) => `b05-profile-alignment-draft:${r}`,
   },
+  /** 노선 초안(344-4) — 노드 · 곡선 · 반경 · 스냅 · 지형 · rev(`RouteDraft` · `design_pipeline_types`).
+   *  노선 번호는 [저장]마다 새로 나므로 project 범위 · 가게 키 `routeDraft`. */
+  "route-draft": { bucket: "draft", scope: "project" },
 
   /* ── ④ 계산 결과 ─────────────────────────────────────────────────────── */
   /** 노선·종단 최신 응답. 페이지를 오갈 때 이 값으로 먼저 그린다. */
@@ -221,6 +240,10 @@ export const STATE_REGISTRY = {
   /** B05 계획노선 편집 창 — 마지막에 적용한 초기노선 갈래(로직 · 비중 · 노드 · 비교값).
    *  노선을 다시 계산해 결과를 버릴 때도 이 값은 새 노선의 출발점이라 되살린다(`_Apply`). */
   "routeedit-initial": { bucket: "result", scope: "project" },
+  /** 계산 묶음 결과(344-4) — 측점 · 종단 · 평면 발자국 · 가게가 메모리 우선 · 멈춘 뒤 한 번 씀. */
+  "design-stations": { bucket: "result", scope: "project" },
+  "design-profile": { bucket: "result", scope: "project" },
+  "design-footprint": { bucket: "result", scope: "project" },
 } as const satisfies Record<string, StateEntry>;
 
 export type StateName = keyof typeof STATE_REGISTRY;
@@ -400,7 +423,16 @@ function readRaw(key: string): string | null {
   }
 }
 
+const removedListeners = new Set<(key: string) => void>();
+
+/** 키가 지워질 때 부름(`clearDrafts` · `clearResults` 포함) — 메모리 우선 칸(설계 가게)이 함께 버림. */
+export function onStateRemoved(fn: (key: string) => void): () => void {
+  removedListeners.add(fn);
+  return () => removedListeners.delete(fn);
+}
+
 function writeRaw(key: string, value: string | null): void {
+  if (value === null) removedListeners.forEach((fn) => fn(key));
   try {
     const store = storageFor(key);
     if (value === null) store.removeItem(key);
@@ -477,29 +509,36 @@ export function clearState(
   routeId?: number | string | null,
 ): void {
   const entry = entryOf(name);
-  // 노선 범위인데 노선을 안 받았으면 그 프로젝트의 **모든 노선** 것을 쓸어 낸다.
+  // 노선 범위인데 노선을 안 받았으면 그 프로젝트의 **모든 노선** 것을 쓸어 낸다(`routeStateKeys`).
   // 노선을 다시 계산하면 번호가 새로 매겨져 부르는 쪽은 옛 번호를 모르고(`clearDrafts(projectId)`),
   // 그러면 `stateKey` 가 null 을 내어 **아무것도 안 지워졌다** — 용화(5601e828)에 145·161·169
   // 세 노선치가 그대로 쌓여 있었다(2026-09-07 실측). 옛 번호는 다시 불리지 않는다 —
   // 노선 복원도 **새 route id** 를 발급하므로 그 키를 읽는 자리가 없다.
   if (entry?.scope === "route" && projectId && (routeId === null || routeId === undefined)) {
-    const suffix = entry.version && entry.version > 1 ? `-v${entry.version}` : "";
-    const prefix = `aislo:${entry.bucket}:${name}${suffix}:${projectId}:`;
-    try {
-      const doomed: string[] = [];
-      for (let i = 0; i < window.sessionStorage.length; i += 1) {
-        const key = window.sessionStorage.key(i);
-        if (key && key.startsWith(prefix)) doomed.push(key);
-      }
-      doomed.forEach((key) => writeRaw(key, null));
-    } catch {
-      /* 무시 — 저장소가 막힌 브라우저 */
-    }
+    routeStateKeys(name, projectId).forEach((key) => writeRaw(key, null));
     return;
   }
   writeStateRaw(name, null, projectId, routeId);
 }
 
+/** 노선 범위 이름의 그 프로젝트 키 전부(모든 노선 · 세션에 있는 것만). */
+export function routeStateKeys(name: StateName, projectId: string): string[] {
+  const entry = entryOf(name);
+  if (entry?.scope !== "route") return [];
+  const suffix = entry.version && entry.version > 1 ? `-v${entry.version}` : "";
+  const prefix = `aislo:${entry.bucket}:${name}${suffix}:${projectId}:`;
+  const keys: string[] = [];
+  try {
+    for (let i = 0; i < window.sessionStorage.length; i += 1) {
+      const key = window.sessionStorage.key(i);
+      if (key && key.startsWith(prefix)) keys.push(key);
+    }
+  } catch {
+    /* 무시 — 저장소가 막힌 브라우저 */
+  }
+  return keys;
+}
+
 /** 등록표에서 한 통에 속한 이름만 고른다. */
 export function namesInBucket(bucket: StateBucket): StateName[] {
   return (Object.keys(STATE_REGISTRY) as StateName[]).filter(

A00_Common/b_project_switch.ts

@@ -0,0 +1,122 @@
+/* =============================================================================
+ * A00_Common/b_project_switch.ts
+ * 다른 프로젝트에 들어갈 때 **그 밖 프로젝트의 캐시**를 지운다(계획서 290-1 · 요구 183-1).
+ *
+ * 지우는 것 — 이 탭 세션의 다른 프로젝트 칸(초안 · 결과 · 고름 · 옛 키 · 페이지별 칸)과
+ * 3D 지형 보관함(IndexedDB). 남기는 것 — 지금 프로젝트 것 · 계정 취향(pref, localStorage).
+ * 다른 프로젝트에 저장 안 한 고침(초안)이 있으면 확인창 — 「남기기」면 그 초안만 둔다.
+ * 같은 프로젝트로 다시 들어오면(새로고침 포함) 아무것도 안 지운다(탭마다 들어온 표식).
+ * ========================================================================== */
+
+import { showConfirmDialog } from "@ui/ui_template_elements";
+import { purgeOtherProjects } from "./b_asset_cache";
+import { STATE_REGISTRY, type StateEntry } from "./b_page_state";
+
+/** 이 탭이 마지막으로 들어온 프로젝트. */
+const ENTERED_KEY = "aislo:entered-project";
+
+const MARK_P = "\u0001";
+const MARK_R = "\u0002";
+
+/** 프로젝트를 가르는 키 머리 — 등록표 키(`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]) => {
+    if (entry.bucket === "pref" || entry.scope === "global") return;
+    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;
+}
+
+const filled = (value: string | null): boolean =>
+  value !== null && value !== "" && value !== "{}" && value !== "[]";
+
+export interface ProjectPurgePlan {
+  /** 저장 안 한 고침이 남은 다른 프로젝트. */
+  draftProjects: string[];
+  /** 지울 키 — `keep` 프로젝트의 초안은 뺀다. */
+  doomed: (keep: ReadonlySet<string>) => string[];
+}
+
+/** 세션 칸(키 → 값)에서 다른 프로젝트 몫을 가른다 — 저장소를 만지지 않는다. */
+export function planProjectPurge(
+  session: Record<string, string>,
+  projectId: string,
+): ProjectPurgePlan {
+  const prefixes = projectPrefixes();
+  const owners = new Map<string, { project: string; draft: boolean }>();
+  Object.keys(session).forEach((key) => {
+    const hit = prefixes.find((item) => key.startsWith(item.prefix));
+    if (!hit) return;
+    const project = key.slice(hit.prefix.length).split(":")[0];
+    if (project) owners.set(key, { project, draft: hit.draft });
+  });
+  const others = new Set(
+    [...owners.values()].map((owner) => owner.project).filter((id) => id !== projectId),
+  );
+  const draftProjects = [
+    ...new Set(
+      [...owners.entries()]
+        .filter(([key, owner]) => owner.draft && others.has(owner.project) && filled(session[key]))
+        .map(([, owner]) => owner.project),
+    ),
+  ];
+  return {
+    draftProjects,
+    // 등록표 밖 칸도 키 마디에 다른 프로젝트 번호가 있으면 그 프로젝트 몫으로 본다.
+    doomed: (keep) =>
+      Object.keys(session).filter((key) => {
+        const owner = owners.get(key);
+        if (owner) return others.has(owner.project) && !(owner.draft && keep.has(owner.project));
+        return key.split(":").some((part) => others.has(part) && !keep.has(part));
+      }),
+  };
+}
+
+function sessionEntries(): Record<string, string> {
+  const out: Record<string, string> = {};
+  try {
+    for (let i = 0; i < window.sessionStorage.length; i += 1) {
+      const key = window.sessionStorage.key(i);
+      const value = key === null ? null : window.sessionStorage.getItem(key);
+      if (key !== null && value !== null) out[key] = value;
+    }
+  } catch {
+    /* 저장소가 막힌 브라우저 — 지울 것이 없다. */
+  }
+  return out;
+}
+
+/**
+ * 프로젝트에 들어감 — 들어온 표식이 다르면 그 밖 프로젝트 캐시를 지운다. 실패해도 이동은 막지 않는다.
+ * `nameOf` 는 확인창에 적을 프로젝트 이름.
+ */
+export async function enterProject(
+  projectId: string,
+  nameOf: (projectId: string) => Promise<string>,
+): Promise<void> {
+  try {
+    if (window.sessionStorage.getItem(ENTERED_KEY) === projectId) return;
+    const plan = planProjectPurge(sessionEntries(), projectId);
+    const keep = new Set<string>();
+    for (const other of plan.draftProjects) {
+      const name = await nameOf(other).catch(() => other);
+      const drop = await showConfirmDialog(
+        `「${name}」에 저장 안 한 고침이 있음 — 지우고 열기 / 남기기`,
+        "지우고 열기",
+        "남기기",
+      );
+      if (!drop) keep.add(other);
+    }
+    plan.doomed(keep).forEach((key) => window.sessionStorage.removeItem(key));
+    window.sessionStorage.setItem(ENTERED_KEY, projectId);
+    await purgeOtherProjects(projectId);
+  } catch {
+    /* 저장소가 막힌 브라우저 — 캐시를 못 지워도 프로젝트는 연다. */
+  }
+}

A00_Common/b_svg_zoom_pan.ts

@@ -14,6 +14,8 @@
  * 그리는 일은 안 한다 — 넘겨받은 `layer` 에 `transform` 만 적는다.
  * ========================================================================== */
 
+import { wheelEventIn } from "./input_prefs";
+
 /** 줌·팬 상태 — 다시 그릴 때 배율을 되살리는 데 쓴다(2026-08-22 사용자 ③). */
 export interface ZoomPanState {
   scale: number;
@@ -61,12 +63,18 @@ export interface SvgZoomPanOptions {
   maxScale?: number;
   /** 이전 상태 — 다시 그려도 배율이 살아남게. */
   initial?: ZoomPanState;
+  /** 처음 · 원복 배율(기본 1) — 플롯 중앙을 붙잡음 · 이보다 작게도 줄일 수 있음(266-1 B06 상세). */
+  homeScale?: number;
+  /** 처음 · 원복 상태를 통째로(295-2 B06 상세 — 중심점 가운데) · 주면 `homeScale` 대신 · 1 보다 작아도 됨. */
+  home?: ZoomPanState;
   /** 상태가 바뀔 때마다 부른다 — 바깥이 담아 뒀다가 다음 그림에 되돌린다. */
   onChange?: (state: ZoomPanState) => void;
   /** 도형이 실제로 그려진 범위. 확대 상태에서 팬 한계가 여기까지 늘어난다. */
   content?: ContentBounds;
   /** 휠을 줌에 묶을지(기본 안 묶음). 묶으면 **커서 아래 지점**을 붙잡고 확대한다. */
   wheelZoom?: boolean;
+  /** 팬을 시작할 누름인지 — 안 주면 가운데 버튼만. 고르기가 없는 빈 곳 왼쪽 끌기를 더할 때 쓴다. */
+  panStart?: (event: PointerEvent) => boolean;
 }
 
 /** 휠 한 칸에 얼마나 — 노선 편집 지도와 같은 계수(`_RouteEdit_Input`). */
@@ -83,9 +91,17 @@ export function attachSvgZoomPan(options: SvgZoomPanOptions): ZoomPanHandle {
     height: Math.max(heightPx - pad.top - pad.bottom, 1),
   };
   const maxScale = options.maxScale ?? 8;
-  let scale = initial?.scale ?? 1;
-  let tx = initial?.tx ?? 0;
-  let ty = initial?.ty ?? 0;
+  const homeScale = Math.min(Math.max(options.homeScale ?? 1, 1), maxScale);
+  const home: ZoomPanState = options.home ?? {
+    scale: homeScale,
+    tx: (plot.x + plot.width / 2) * (1 - homeScale),
+    ty: (plot.y + plot.height / 2) * (1 - homeScale),
+  };
+  /** 축소 한계 — 1배 · 처음 보기가 더 작으면 그만큼. */
+  const minScale = Math.min(1, home.scale);
+  let scale = initial?.scale ?? home.scale;
+  let tx = initial?.tx ?? home.tx;
+  let ty = initial?.ty ?? home.ty;
   const applyTransform = (): void => {
     layer.setAttribute("transform", `translate(${tx} ${ty}) scale(${scale})`);
     onChange?.({ scale, tx, ty });
@@ -122,7 +138,7 @@ export function attachSvgZoomPan(options: SvgZoomPanOptions): ZoomPanHandle {
 
   /** 그 자리를 붙잡고 확대·축소한다 — 버튼은 플롯 중앙을, 휠은 커서 자리를 준다. */
   const zoomAt = (factor: number, cx: number, cy: number): void => {
-    const next = Math.min(maxScale, Math.max(1, scale * factor));
+    const next = Math.min(maxScale, Math.max(minScale, scale * factor));
     tx = cx - ((cx - tx) / scale) * next;
     ty = cy - ((cy - ty) / scale) * next;
     scale = next;
@@ -146,8 +162,10 @@ export function attachSvgZoomPan(options: SvgZoomPanOptions): ZoomPanHandle {
     if (event.button === 1) event.preventDefault();
   });
   svg.addEventListener("pointerdown", (event) => {
-    // 팬은 **가운데 버튼**만. 좌클릭은 그 화면의 고르기 몫이다.
-    if (event.button !== 1) return;
+    // 누름마다 풂 — 가운데 단추 팬 뒤엔 click 이 안 와 `moved` 가 남아 왼쪽 누름을 삼켰음(259-1)
+    moved = false;
+    // 팬은 **가운데 버튼**만(기본). 좌클릭은 그 화면의 고르기 몫이다.
+    if (!(options.panStart ? options.panStart(event) : event.button === 1)) return;
     event.preventDefault();
     panning = true;
     moved = false;
@@ -178,7 +196,7 @@ export function attachSvgZoomPan(options: SvgZoomPanOptions): ZoomPanHandle {
       /* 이미 해제됨 */
     }
   };
-  if (initial && (scale !== 1 || tx !== 0 || ty !== 0)) {
+  if (scale !== 1 || tx !== 0 || ty !== 0) {
     clampPan();
     applyTransform();
   }
@@ -197,17 +215,47 @@ export function attachSvgZoomPan(options: SvgZoomPanOptions): ZoomPanHandle {
         const rect = svg.getBoundingClientRect();
         const cx = ((event.clientX - rect.left) / Math.max(rect.width, 1)) * widthPx;
         const cy = ((event.clientY - rect.top) / Math.max(rect.height, 1)) * heightPx;
-        // 노선 편집 지도와 같은 방향 — **당기면 확대**(`deltaY > 0`).
-        zoomAt(event.deltaY > 0 ? WHEEL_IN : WHEEL_OUT, cx, cy);
+        // ☰ [설정] 휠 방향(332 · 기본 당기면 확대) — 그림 면이 손가락을 받으므로 핀치는 트랙패드뿐.
+        zoomAt(wheelEventIn(event) ? WHEEL_IN : WHEEL_OUT, cx, cy);
       },
       { passive: false },
     );
   }
+  // 손가락 둘 = 벌려 확대 · 같이 끌어 이동(기기대응 3-2) — 한 손가락은 그 화면의 고르기 · 목록 밀기 몫.
+  // 휠 줌 화면은 그림 면이 손가락을 다 받음 · 아니면(B06 카드 목록) 한 손가락 밀기는 브라우저에 둠.
+  svg.setAttribute?.("data-touch-own", "pinch"); // ?. = 노드 시험의 흉내 SVG
+  svg.style?.setProperty("touch-action", options.wheelZoom ? "none" : "pan-x pan-y");
+  const touches = new Map<number, { x: number; y: number }>();
+  const touchPair = (): { x: number; y: number; dist: number } => {
+    const [a, b] = [...touches.values()];
+    return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2, dist: Math.hypot(a.x - b.x, a.y - b.y) };
+  };
+  svg.addEventListener("pointerdown", (event) => {
+    if (event.pointerType === "touch")
+      touches.set(event.pointerId, { x: event.clientX, y: event.clientY });
+  });
+  svg.addEventListener("pointermove", (event) => {
+    if (event.pointerType !== "touch" || !touches.has(event.pointerId)) return;
+    const before = touches.size === 2 ? touchPair() : null;
+    touches.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (!before) return;
+    const after = touchPair();
+    const rect = svg.getBoundingClientRect();
+    const w = Math.max(rect.width, 1);
+    const h = Math.max(rect.height, 1);
+    tx += ((after.x - before.x) / w) * widthPx;
+    ty += ((after.y - before.y) / h) * heightPx;
+    moved = true;
+    const cx = ((after.x - rect.left) / w) * widthPx;
+    const cy = ((after.y - rect.top) / h) * heightPx;
+    zoomAt(before.dist > 0 && after.dist > 0 ? after.dist / before.dist : 1, cx, cy);
+  });
+  const liftTouch = (event: PointerEvent): void => void touches.delete(event.pointerId);
+  svg.addEventListener("pointerup", liftTouch);
+  svg.addEventListener("pointercancel", liftTouch);
   const currentScale = (): number => scale;
   const reset = (): void => {
-    scale = 1;
-    tx = 0;
-    ty = 0;
+    ({ scale, tx, ty } = home);
     applyTransform();
   };
   // 더블클릭 원복.

A00_Common/b_workflow_nav.ts

@@ -10,6 +10,7 @@ import {
   fetchSurfaceStatus,
 } from "../B04_PreProcess/B04_PreProcess_Api_Fetch";
 import { isProjectPreloaded, setPreloadTarget } from "./b_asset_cache";
+import { enterProject } from "./b_project_switch";
 import { navigateTo } from "./router";
 
 export interface WorkflowState {
@@ -93,14 +94,20 @@ export async function dropGoneProject(): Promise<boolean> {
 const PRELOAD_REQUIRED_ROUTES: readonly RoutePath[] = [ROUTES.B04_PREPROCESS, ROUTES.B05_PROFILE];
 
 export function goToWorkflowStage(projectId: string, route: RoutePath): void {
-  localStorage.setItem(CURRENT_PROJECT_ID_KEY, projectId);
-  // 단계가 바뀌어 이동하는 자리다 — 캐시를 버려 다음 화면이 새 상태를 본다.
-  clearWorkflowStateCache();
-  if (!PRELOAD_REQUIRED_ROUTES.includes(route)) {
-    navigateTo(route);
-    return;
-  }
-  void routeAfterPreloadCheck(projectId, route);
+  // 다른 프로젝트에 들어가면 그 밖 프로젝트 캐시를 먼저 지운다(290-1).
+  void enterProject(
+    projectId,
+    async (id) => (await fetchWorkflowState(id)).project_name || id,
+  ).then(() => {
+    localStorage.setItem(CURRENT_PROJECT_ID_KEY, projectId);
+    // 단계가 바뀌어 이동하는 자리다 — 캐시를 버려 다음 화면이 새 상태를 본다.
+    clearWorkflowStateCache();
+    if (!PRELOAD_REQUIRED_ROUTES.includes(route)) {
+      navigateTo(route);
+      return;
+    }
+    void routeAfterPreloadCheck(projectId, route);
+  });
 }
 
 /**

A00_Common/design/CLAUDE.md

@@ -0,0 +1,38 @@
+# A00_Common/design 지침
+
+B05 · B06 한 페이지 뼈대 — 주소 둘(`#/b05-profile` · `#/b06-section`)이 `design_page` 하나를 엶.
+
+갈래 지도(앞머리 → 하는 일):
+
+- `design_page` 페이지 틀 · 보기 전환(mountCenter) · `design_shared` · `design_panel` · `design_dock` 공용 틀 · 좌측 칸 · 도크
+- `design_view_profile` 종단 보기 · `design_view_cross` 횡단 보기
+- `design_profile*` 가운데 아래 종단도 판(자리 · 겹침 · 떼어 보기 · 자유 보기)
+- `design_store` 가게 · `design_selection` · `design_pick_*` 선택 · 집기 · `design_pipe_ids` 관 id · `design_sections` 측점
+- `design_save` [저장] · `design_reset` [초기화] — B05 · B06 캐시 한 번에
+- `design_structure_*` 구조물 명세 · `_calc` 명세 계산
+
+① 짝(ts ↔ py · 거울 시험):
+
+- `design_structure_ford_calc.ts` fordHeightM ↔ `B04_PreProcess_Router_Basins.ford_height_m` · `test_65_ford_defaults.py`
+- 같은 파일 ford_depth ↔ `B08_Quantity_Engine_Hydro.ford_depth` · `test_73_11_b08_hydro_box_ford.py`
+- `design_structure_pipe_calc.ts` 관 길이 = B06 `computeStoredLayouts`(② 서버 Node) 그대로 · 새로 셈하지 않음
+
+서버 Node 묶음:
+
+- 입구 없음 · 끌려감 = `design_pick_match` · `design_pipe_ids` · `design_selection`(corridor · server-calc · b07-extent) · `design_store` · `design_structure_{box,ford,ford_pavement,guard,pipe,road,spec}`(b07-extent · b07-note) · 상위 `A00_Common/b_page_state`
+- 끌려가는 파일 모듈 맨 위에 DOM · window · sessionStorage 금지 · 고치면 해당 build 다시 지어 시험
+
+남의 페이지가 부르는 파일(고치면 부르는 쪽 시험도):
+
+- B05 · B06 둘 다 — `design_panel` · `design_pick_match` · `design_pipe_ids` · `design_profile` · `design_sections` · `design_selection`(B04 도) · `design_shared` · `design_structure_pipe_calc` · `design_structure_status`
+- M02 — `design_structure_form` · `design_structure_pipe` · `design_structure_spec`
+
+logic/ 규칙:
+
+- 페이지 전용 계산은 각 페이지 `logic/` · B05 · B06 공용 계산은 `common_util`
+- design 은 화면 · 가게 자리 — 새 순수 계산을 여기 두지 않음
+
+금지:
+
+- B05 · B06 캐시를 따로 저장하지 않음 — [저장] 한 번(`design_save`)
+- 자동저장(디바운스 PUT) 만들지 않음

A00_Common/design/design_leave.ts

@@ -0,0 +1,123 @@
+/* =============================================================================
+ * A00_Common/design/design_leave.ts
+ * B05 · B06 떠남 확인(346-4) — 저장 안 한 조작(초안 통)이 있으면 탭 닫기 · 다른 페이지로 갈 때
+ * 공용 물음(`ui_template_leave_dialog` · [취소] [버리고 넘어감] [저장 후 넘어감]).
+ *
+ * 고침 = 초안 통 칸 중 고침이 아닌 칸(고름 · 관 id 장부 · 종류 캐시 · 고른 구조물 넘김) ·
+ *   다른 페이지 칸(b08 · b09) · 저장 뒤에도 남기는 표준 횡단면(std-cross)을 뺀 것.
+ * 횡단 초안은 [저장] 뒤에도 세션에 남음 — 그래서 「있음」이 아니라 **마지막 깨끗한 때와 다름**으로 봄:
+ *   [저장] · [확정]이 끝나면 `markDesignClean` 이 그때 지문을 적음 · [초기화]는 초안을 다 지우고 새로 읽음.
+ * B05 ↔ B06 는 한 페이지 — 그 사이 이동은 묻지 않음.
+ * 프로젝트 바꿈은 이 페이지를 떠난 뒤라 이 물음이 먼저 · 들어갈 때 물음은 `b_project_switch`.
+ * ========================================================================== */
+
+import { ROUTES } from "@config/config_frontend";
+import { leaveOrStay } from "@ui/ui_template_leave_dialog";
+import { t as L } from "@ui/ui_template_locale";
+import {
+  clearState,
+  namesInBucket,
+  readByKey,
+  routeStateKeys,
+  stateKey,
+  type StateName,
+} from "../b_page_state";
+import { currentRoute, setLeaveGuard } from "../router";
+
+/** 초안 통이지만 고침으로 안 보는 칸 — 묻지 않고 [버리고 넘어감]에도 안 지움. */
+const NOT_EDITS = new Set<StateName>([
+  "selection",
+  "pipe-ids",
+  "structure-pick",
+  "structure-type-cache",
+  "std-cross",
+]);
+const OTHER_PAGE = /^b0[89]-/;
+
+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[] = [];
+  for (const name of editDraftNames()) {
+    const own = stateKey(name, projectId);
+    const keys = own ? [own] : routeStateKeys(name, projectId);
+    for (const key of keys.sort()) {
+      const raw = readByKey(key);
+      if (filled(raw)) parts.push(`${key}=${raw}`);
+    }
+  }
+  return parts.join("\n");
+}
+
+/** 긴 지문을 들고 있지 않게 — FNV-1a 32비트 + 길이. */
+function digest(text: string): string {
+  let hash = 0x811c9dc5;
+  for (let index = 0; index < text.length; index += 1) {
+    hash ^= text.charCodeAt(index);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return `${text.length}:${hash >>> 0}`;
+}
+
+// ponytail: 깨끗한 표는 메모리만 — [저장] 뒤 새로고침하면 남은 횡단 초안 때문에 한 번 더 물음.
+const cleanMarks = new Map<string, string>();
+
+/** [저장] · [확정]이 끝난 때 — 지금 초안을 깨끗한 것으로 적음. */
+export function markDesignClean(projectId: string): void {
+  if (projectId) cleanMarks.set(projectId, digest(editSignature(projectId)));
+}
+
+/** 저장 안 한 조작이 있나. */
+export function designDirty(projectId: string): boolean {
+  if (!projectId) return false;
+  const signature = editSignature(projectId);
+  if (!signature) return false;
+  return cleanMarks.get(projectId) !== digest(signature);
+}
+
+/** [버리고 넘어감] — 고침 칸만 지움(모든 노선). */
+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` 가 화면에서 빠지면 스스로 풂.
+ * `save` = [저장] 한 줄기(`saveSharedDesign(shared, false)`).
+ */
+export function guardDesignLeave(
+  projectId: string,
+  root: HTMLElement,
+  save: () => Promise<unknown>,
+): void {
+  const unload = (event: BeforeUnloadEvent): void => {
+    if (!root.isConnected) return window.removeEventListener("beforeunload", unload);
+    if (!designDirty(projectId)) return;
+    event.preventDefault();
+    event.returnValue = "";
+  };
+  window.addEventListener("beforeunload", unload);
+  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);
+}

A00_Common/design/design_page.css

@@ -10,8 +10,8 @@
   display: none;
 }
 
-/* 가운데 = 위 칸(보기마다 다름) + 아래 종단도 한 벌. 종단 보기에서 종단도는 3D 위에 떠 있는
-   판(absolute · 3D 크기가 안 바뀜)이고, 횡단 보기에서는 카드 칸 아래 흐름에 선다. */
+/* 가운데 = 위 칸(보기마다 다름) + 아래 종단도 한 벌. 종단 보기에서 종단도는 평면(노선 편집) 위에
+   떠 있는 판(absolute · 평면은 전체 영역 · 345-5)이고, 횡단 보기에서는 카드 칸 아래 흐름에 선다. */
 .design-page__main {
   position: relative;
   display: flex;
@@ -50,11 +50,40 @@
   display: none;
 }
 
-.b05-route-profile__trailing > .b05-route-profile__popout {
+.b05-route-profile__tools > .b05-route-profile__popout {
   padding: var(--btn-bar-padding);
   font-size: var(--btn-bar-font-size);
 }
 
+/* 유토곡선 · 배수유역 판 [창 분할](계획서 325-3) — 종단 [창 분할]과 같은 양식 · 유토는 판 좌상단에 띄움. */
+.b05-subpanel__popout {
+  flex: none;
+  padding: var(--btn-bar-padding);
+  font-size: var(--btn-bar-font-size);
+}
+
+.b05-profile__masshaul-overlay > .b05-subpanel__popout {
+  position: absolute;
+  top: 4px;
+  left: var(--spacing-8);
+  z-index: 4;
+}
+
+/* 새 창으로 뗀 유토곡선 · 배수유역 판 — 창 전체를 채움 · 높이 · 폭 끌기와 접기 손잡이는 감춤. */
+.b05-profile__masshaul-overlay.is-popout,
+.b05-drainage.is-popout {
+  position: relative;
+  width: 100%;
+  max-width: none;
+  height: 100dvh;
+}
+
+.b05-profile__masshaul-overlay.is-popout > .ui-resizer,
+.b05-drainage.is-popout > .ui-resizer,
+.b05-drainage.is-popout > .ui-workflow-overlay__handle {
+  display: none;
+}
+
 /* 횡단 조정(카드 조정창 사본 · 폼 칸에 옮겨 붙은 행)은 횡단 보기 몫 — 종단 보기에서는 한 벌 폼
    안에서 가린다(패널 뿌리 클래스가 보기를 따라 바뀐다). */
 .b05-route__panel .b06-adjust-dock,

A00_Common/design/design_page.ts

@@ -28,7 +28,9 @@ import {
 } from "../b_workflow_nav";
 import { currentRoute, navigateTo, type MountedPage } from "../router";
 import type { DesignView } from "./design_dock";
-import type { DesignPageShared } from "./design_shared";
+import { saveSharedDesign, type DesignPageShared } from "./design_shared";
+import { guardDesignLeave } from "./design_leave";
+import { usePipeIds } from "./design_pipe_ids";
 import "./design_page.css";
 
 export type { DesignPageShared } from "./design_shared";
@@ -105,6 +107,7 @@ export function renderDesignPage(root: HTMLElement): MountedPage {
   page.className = "design-page";
   root.replaceChildren(page);
   const projectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY) ?? "";
+  usePipeIds(projectId || null); // 관 세션 id 장부 = 이 프로젝트(323-5 · 카드 · 알약 · 종단 · 3D 같은 id)
 
   // 한 벌 틀 — 좌측 자리 · 가운데(위 칸 + 아래 종단도). 진행 단계 틀은 단계 상태가 오면 감싼다.
   const left = document.createElement("div");
@@ -136,6 +139,7 @@ export function renderDesignPage(root: HTMLElement): MountedPage {
     revealLeft: () => layout?.setOptionsOpen(true),
     ensureView: (view) => (slots.get(view) ?? mountView(view, false)).ready,
   };
+  guardDesignLeave(projectId, page, () => saveSharedDesign(shared, false)); // 떠남 확인(346-4)
 
   /** 한 벌이 보기를 따라간다 — 좌측 칸 · 단추 글자 · 종단도 판 · 진행 단계 · 제목. */
   const applyView = (view: DesignView): void => {

A00_Common/design/design_panel.ts

@@ -82,15 +82,16 @@ export function createSectionFrame(
   heading.textContent = title;
   if (view === "profile") {
     // ui-sidebar-section: 사이드 컨테이너 공통 외곽선(진하게, 2026-08-05 사용자 지시).
+    // ui-panel-form: 좌측 패널 컨테이너 공용 양식(269 · 「구조물 배치」 기준 칸 · 라벨 · 단추) — 두 보기 모두.
     // 접힘 초기값만 여기서 준다 — 펼치기·접기 토글은 ui_template_collapsible 전역 몫.
-    root.className = `b05-route__panel-section ui-collapsible ui-sidebar-section${collapsed ? " is-collapsed" : ""}`;
+    root.className = `b05-route__panel-section ui-collapsible ui-sidebar-section ui-panel-form${collapsed ? " is-collapsed" : ""}`;
     heading.className = "ui-collapsible__title";
     const body = document.createElement("div");
     body.className = "b05-route__panel-body";
     root.append(heading, body);
     return { root, body };
   }
-  root.className = `b06-profile__group ui-collapsible ui-sidebar-section${collapsed ? " is-collapsed" : ""}`;
+  root.className = `b06-profile__group ui-collapsible ui-sidebar-section ui-panel-form${collapsed ? " is-collapsed" : ""}`;
   heading.className = "b06-profile__group-legend ui-collapsible__title";
   root.append(heading);
   return { root, body: root };

A00_Common/design/design_pick_escape.ts

@@ -0,0 +1,31 @@
+/* =============================================================================
+ * A00_Common/design/design_pick_escape.ts
+ * 풀기 한 길 — Esc = 고름 한 칸 비움 (233-3 · 조사 AF (나)).
+ *
+ * 값을 비우면 구독한 화면이 모두 따라 풂 — 종단(측점선 · 알약) · 3D(띠 · 핀 · 부재) · 배수유역도 ·
+ * 좌측 폼 · 횡단 카드 · 범위 테두리 · 포장층 · 형상. 입력 칸 · 창(모달) · 메뉴 · 종단 도구가 먼저
+ * 받은 Esc(입력 취소 · 창 닫기 · 도구 끝)는 그쪽 몫이라 건드리지 않음.
+ * ========================================================================== */
+
+import { NO_SELECTION, selectDesign } from "./design_selection";
+
+/** Esc 로 푼 고름의 출처 이름 — 구독자가 폼까지 닫을지 가르는 데 씀. */
+export const ESCAPE_FROM = "esc";
+
+const OWN_ESCAPE =
+  "input, select, textarea, [contenteditable='true'], [role='dialog'], .ui-modal__backdrop";
+
+/** 보기마다 건다 — 보이는 보기 하나만 받음 · 보기를 떠나면 뗌. */
+export function bindEscapeRelease(
+  projectId: string | null,
+  host: { visible: () => boolean; onDispose: (fn: () => void) => void },
+): void {
+  const onKey = (event: KeyboardEvent): void => {
+    if (event.key !== "Escape" || event.defaultPrevented || !host.visible()) return;
+    const target = event.target as HTMLElement | null;
+    if (target?.closest?.(OWN_ESCAPE) || document.querySelector(".ui-modal__backdrop")) return;
+    selectDesign(projectId, NO_SELECTION, { from: ESCAPE_FROM });
+  };
+  window.addEventListener("keydown", onKey);
+  host.onDispose(() => window.removeEventListener("keydown", onKey));
+}

A00_Common/design/design_pick_match.ts

@@ -0,0 +1,53 @@
+/* =============================================================================
+ * A00_Common/design/design_pick_match.ts
+ * 고름 강조 한 규칙(323-5) — 그린 것(카드 형상 · 3D 부재 · 알약 · 측점선)마다 신원표 `{구조물 id · 부분 · 자리}`
+ * 를 달고, 고름 한 칸(`structure-pick`)과 이 함수 하나로 켜짐을 가름.
+ *
+ *   ① 고름 · 그림 둘 다 구조물 id 가 있으면 id 가 같아야(관 = 세션 id `design_pipe_ids` · 옮겨도 그대로)
+ *   ② 아니면 같은 자리(`PIPE_MATCH_M` — 같은 자리 거리는 이 한 값)
+ *   ③ 고른 부분(부재키)이 있으면 그 부분만 · 부분을 안 골랐으면 그 구조물 그림 모두
+ * DOM 은 `data-structure-id` · `data-part`(`tagShape`) — 부분 그림(관 · 벽 · 날개벽 · 물넘이 콘크리트)은
+ * 조정창 손잡이가 같은 고름으로 칠함(`paintPicked` 는 부분 없는 형상만 · 307 「측점 길은 부분 안 켬」).
+ * ========================================================================== */
+
+import { isNear, type DesignSelection } from "./design_selection";
+
+export interface PickTag {
+  structureId?: string | null;
+  part?: string | null;
+  chainageM?: number | null;
+}
+
+export type PickSelection =
+  (Partial<DesignSelection> & { partKey?: string | null }) | null | undefined;
+
+/** 이 그림이 고름에 켜지나 — 위 ① ② ③. */
+export function pickLights(selection: PickSelection, tag: PickTag): boolean {
+  if (!selection) return false;
+  let here: boolean;
+  if (selection.structureId && tag.structureId) here = selection.structureId === tag.structureId;
+  else if (selection.chainageM == null || tag.chainageM == null) return false;
+  else here = isNear(tag.chainageM, selection.chainageM);
+  if (!here) return false;
+  return !selection.partKey || tag.part === selection.partKey;
+}
+
+/** 그린 형상에 신원표를 닮(부분 없으면 통째 형상). */
+export function tagShape(el: Element, structureId: string | null, part?: string | null): void {
+  if (structureId) el.setAttribute("data-structure-id", structureId);
+  if (part) el.setAttribute("data-part", part);
+}
+
+/** 카드 안 통째 형상 칠하기 — 고른 구조물 id 와 같은 형상만. 부분 그림(`data-part`) · 관 계열(`pipe-`) ·
+ *  노면공 포장층은 제 손잡이(조정창 · 포장층 고름)가 칠함 — 측점 길(알약 · 목록 · 측점선)은 부분을 안 켬(307). */
+export function paintPicked(root: ParentNode, selection: PickSelection): void {
+  for (const shape of root.querySelectorAll<SVGElement>("[data-structure-id]")) {
+    const id = shape.getAttribute("data-structure-id") ?? "";
+    if (id.startsWith("pipe-") || shape.getAttribute("data-part") !== null) continue;
+    if (shape.getAttribute("data-pave-type") !== null) continue;
+    shape.classList.toggle(
+      "is-active",
+      !!selection?.structureId && pickLights(selection, { structureId: id }),
+    );
+  }
+}

A00_Common/design/design_pick_profile.ts

@@ -0,0 +1,160 @@
+/* =============================================================================
+ * A00_Common/design/design_pick_profile.ts
+ * 종단 보기 고름 강조 = 고름 한 칸에서 파생 — 종단도(측점 세로선 · 알약 · 구간 띠 · 233-1) ·
+ * 3D(측점 띠 · 핀 · 부재 · 233-2) · 배수유역도(관 마커 · 유역 · 측점 마름모 · 233-3) (조사 AF (나) ② ③ ⑤).
+ *
+ * 고름 한 칸(`structure-pick`)이 유일 원천이다. 값이 바뀌면(구독) 그 값으로 종단도를 다시 세우고,
+ * 관 · 구조물 목록이 바뀐 뒤에도 같은 값으로 다시 얹는다(`paint`) — 화면끼리 손으로 부르던 길이
+ * 하나 빠지거나 다른 길이 강조를 끄더라도 종단도는 값을 따라간다. 관 알약 id(`pipe-`+측점)는
+ * 그릴 때마다 지금 관 목록에서 다시 찾고 관 id 는 세션 id(323-5)라 관이 옮겨져도 끊기지 않는다.
+ * ========================================================================== */
+
+import {
+  nearestWithin,
+  readSelection,
+  subscribeSelection,
+  type DesignSelection,
+} from "./design_selection";
+import { bindEscapeRelease, ESCAPE_FROM } from "./design_pick_escape";
+import { pipeIdAt } from "./design_pipe_ids";
+import { graphTargetAt } from "../../B05_Profile/B05_Profile_UI_Selection";
+import { irregularStationId } from "../../B05_Profile/B05_Profile_UI_IrregularStations";
+
+/** 종단도가 켤 것 — 측점선(알약은 그 측점 짝을 종단도가 맞춤) 또는 알약(구조물 · 관 `pipe-*`). */
+export type ProfilePick = { stationId: string | null } | { structureId: string };
+
+export interface ProfilePickSource {
+  /** 구조물 측점(수동 + 관 투영) — id 는 `irregularStationId` 를 씌우기 전 값. */
+  irregular: () => ReadonlyArray<{ id: string; chainage_m: number; origin?: string }>;
+  /** 관 지점 정본(배수유역도). */
+  pipes: () => ReadonlyArray<{ chainage_m: number }>;
+  /** 일반 측점 카드. */
+  sections: () => ReadonlyArray<{ station_id: string; chainage_m: number }>;
+}
+
+export interface ProfilePickTarget {
+  setSelectedStation: (stationId: string | null) => void;
+  setSelectedStructure: (structureId: string | null) => void;
+  /** 배수유역도 — 관 마커 · 유역(알림 없이) · 측점 마름모. */
+  drainage?: {
+    selectPipeAtChainage: (chainageM: number | null, notify?: boolean) => void;
+    markStation: (chainageM: number | null) => void;
+  } | null;
+}
+
+/** 같은 값으로 적힌 측점인가 — 고름 한 칸은 고른 측점의 누가거리를 그대로 적음(찾는 폭 아님). */
+const sameAt = (a: number, b: number): boolean => Math.abs(a - b) < 1e-6;
+
+/**
+ * 고름 값 → 종단도가 켤 것(B05 규칙). ① 구조물 id = 그 알약(측점선은 제 측점이 있을 때만 · 189-1)
+ * ② 그 자리 구조물 측점(같은 m 면 측점 하나 · 구조물이 위 · 272 — 일반 카드 id 는 종단도가 숨긴 측점)
+ * ③ 고른 측점 그대로(일반 카드) ④ 그 자리 관 측점 · 관 알약 · 카드(`graphTargetAt` · 188-1).
+ */
+export function profilePickOf(
+  selection: DesignSelection | null,
+  source: ProfilePickSource,
+): ProfilePick {
+  if (!selection || selection.chainageM === null) return { stationId: null };
+  if (selection.structureId) return { structureId: selection.structureId };
+  const at = selection.chainageM;
+  const irregular = source.irregular();
+  const exact = irregular.find((entry) => sameAt(entry.chainage_m, at));
+  if (exact) return { stationId: irregularStationId(exact.id) };
+  const card = source.sections().find((entry) => sameAt(entry.chainage_m, at));
+  if (card) return { stationId: card.station_id };
+  const own = nearestWithin(
+    irregular.filter((entry) => entry.origin === "pipe"),
+    at,
+    (entry) => entry.chainage_m,
+  );
+  if (own) return { stationId: irregularStationId(own.id) };
+  const target = graphTargetAt(null, at, source.pipes(), source.sections());
+  return "pipeChainageM" in target ? { structureId: pipeIdAt(target.pipeChainageM) } : target;
+}
+
+export function paintProfilePick(target: ProfilePickTarget, pick: ProfilePick): void {
+  if ("structureId" in pick) target.setSelectedStructure(pick.structureId);
+  else target.setSelectedStation(pick.stationId);
+}
+
+/** 배수유역도 = 그 자리 관 마커 · 유역(없으면 풂) + 측점 마름모 — 재계산이 지운 뒤에도 다시 얹음(a3 · a6). */
+export function paintMapPick(
+  map: NonNullable<ProfilePickTarget["drainage"]>,
+  selection: DesignSelection | null,
+): void {
+  const at = selection?.chainageM ?? null;
+  map.selectPipeAtChainage(at, false);
+  map.markStation(at);
+}
+
+export interface ViewerPickTarget {
+  markers: { selectStation: (stationId: string | null, notify?: boolean) => void };
+  structurePick: {
+    select: (
+      pick: { chainageM: number; kind: string; key?: string; structureId?: string | null } | null,
+    ) => void;
+  };
+}
+
+/** 고름 값 → 3D 가 켤 것 — 띠(+핀) = 종단 측점선과 같은 측점(구조물 고름은 그 자리 구조물 측점만) ·
+ *  부재 = 고른 측점의 부재 전부(부재키가 있으면 그 부재 하나). */
+export function viewerPickOf(
+  selection: (DesignSelection & { partKey?: string }) | null,
+  source: ProfilePickSource,
+): {
+  stationId: string | null;
+  member: { chainageM: number; kind: string; key?: string; structureId?: string | null } | null;
+} {
+  if (!selection || selection.chainageM === null) return { stationId: null, member: null };
+  const at = selection.chainageM;
+  const pick = profilePickOf(selection, source);
+  const own = selection.structureId
+    ? nearestWithin(source.irregular(), at, (entry) => entry.chainage_m)
+    : undefined;
+  const stationId = "stationId" in pick ? pick.stationId : own ? irregularStationId(own.id) : null;
+  return {
+    stationId,
+    member: { chainageM: at, kind: "", key: selection.partKey, structureId: selection.structureId },
+  };
+}
+
+export function paintViewerPick(
+  target: ViewerPickTarget,
+  pick: ReturnType<typeof viewerPickOf>,
+): void {
+  target.markers.selectStation(pick.stationId, false); // 칠하기만 — 알림이 사슬을 다시 돌리지 않게
+  target.structurePick.select(pick.member);
+}
+
+/**
+ * 종단 보기(종단도 · 3D · 배수유역도)를 고름 한 칸에 묶음 — 값이 바뀔 때마다 그림 · `paint()` = 목록이
+ * 바뀐 뒤 · 재계산 뒤 · 폼이 닫힌 뒤 같은 값으로 다시 얹음. 보기가 숨어 있으면(횡단 보기가 종단도를 쥠)
+ * 안 그림 — 그 보기가 제 규칙으로 그림 · 보기를 떠나면 구독 끊음. Esc(풀기 한 길)는 좌측 폼까지 닫음.
+ */
+export function bindProfilePick(
+  projectId: string | null,
+  target: {
+    profile: ProfilePickTarget;
+    viewer?: ViewerPickTarget;
+    form?: { hasSelection: () => boolean; selectById: (id: null) => void };
+  },
+  host: { visible: () => boolean; onDispose: (fn: () => void) => void },
+  source: ProfilePickSource,
+): { paint: () => void } {
+  const paint = (): void => {
+    if (!host.visible()) return;
+    const selection = readSelection(projectId);
+    paintProfilePick(target.profile, profilePickOf(selection, source));
+    if (target.viewer) paintViewerPick(target.viewer, viewerPickOf(selection, source));
+    if (target.profile.drainage) paintMapPick(target.profile.drainage, selection);
+  };
+  host.onDispose(
+    subscribeSelection(projectId, (_selection, from) => {
+      paint();
+      if (from === ESCAPE_FROM && host.visible() && target.form?.hasSelection())
+        target.form.selectById(null);
+    }),
+  );
+  bindEscapeRelease(projectId, host);
+  return { paint };
+}

A00_Common/design/design_pipe_ids.ts

@@ -0,0 +1,97 @@
+/* =============================================================================
+ * A00_Common/design/design_pipe_ids.ts
+ * 관 세션 id(323-5) — 관을 처음 볼 때 자리마다 붙이는 id · 옮겨도 그대로 · 저장 안 함(파일 모양 그대로).
+ *
+ * id = `pipe-s` + 차례(`pipe-s3`) — 머리 `pipe-` 로 관임을 가름(옛 자리 이름 `pipe-{누가거리}` 와 같은 머리) ·
+ * 누가거리는 id 에서 읽지 않음(`pipeChainageOf`). 장부 = 세션 `pipe-ids`(고름 `structure-pick` 과 같은 수명 ·
+ * 초안 비우기에 함께 비움). 자리 → id = 찾는 거리(`PIPE_MATCH_M`) 안 가장 가까운 것 · 없으면 새 차례 ·
+ * 옮김 = `movePipeId`(고름 따라가기 `followMovedPipe` 가 부름).
+ * 프로젝트 = 보기가 열 때 정함(`usePipeIds`) — 그리는 함수(카드 · 알약)가 프로젝트를 몰라도 같은 id.
+ * 프로젝트가 없으면(시험 · 도움 파일) 옛 자리 이름.
+ * ========================================================================== */
+
+import { readState, writeState } from "../b_page_state";
+import { isNear, nearestWithin, readSelection, selectDesign } from "./design_selection";
+
+/** 관 찾는 거리 — 정의는 `design_selection` 한 곳(배수 패널이 관 옮김과 함께 가져감). */
+export { PIPE_MATCH_M } from "./design_selection";
+
+interface Book {
+  next: number;
+  ids: Array<{ id: string; at: number }>;
+}
+
+let active: string | null = null;
+
+/** 지금 프로젝트 — 종단 · 횡단 보기가 열 때. */
+export function usePipeIds(projectId: string | null): void {
+  active = projectId;
+}
+
+const bookOf = (projectId: string): Book =>
+  readState<Book>("pipe-ids", projectId) ?? { next: 1, ids: [] };
+
+/** 그 자리 관의 id — 장부에 없으면 새 차례로 적음. */
+export function pipeIdAt(chainageM: number, projectId: string | null = active): string {
+  if (!projectId) return `pipe-${chainageM.toFixed(2)}`;
+  const book = bookOf(projectId);
+  const hit = nearestWithin(book.ids, chainageM, (entry) => entry.at);
+  if (hit) return hit.id;
+  const id = `pipe-s${book.next}`;
+  writeState(
+    "pipe-ids",
+    { next: book.next + 1, ids: [...book.ids, { id, at: chainageM }] },
+    projectId,
+  );
+  return id;
+}
+
+/** id 의 관 자리 — 장부 · 옛 자리 이름 순 · 관 id 가 아니면 null. */
+export function pipeChainageOf(id: string, projectId: string | null = active): number | null {
+  if (!id.startsWith("pipe-")) return null;
+  const hit = projectId ? bookOf(projectId).ids.find((entry) => entry.id === id) : undefined;
+  if (hit) return hit.at;
+  const legacy = Number(id.slice("pipe-".length));
+  return Number.isFinite(legacy) ? legacy : null;
+}
+
+/** 관을 옮김 — 옛 자리 id 가 새 자리로(새 자리에 남은 옛 기록은 뺌) · 옮긴 관의 id. */
+export function movePipeId(fromM: number, toM: number, projectId: string | null = active): string {
+  if (!projectId) return `pipe-${toM.toFixed(2)}`;
+  const book = bookOf(projectId);
+  const moving = nearestWithin(book.ids, fromM, (entry) => entry.at);
+  if (!moving) return pipeIdAt(toM, projectId);
+  const stale = nearestWithin(
+    book.ids.filter((entry) => entry !== moving),
+    toM,
+    (entry) => entry.at,
+  );
+  const ids = book.ids
+    .filter((entry) => entry !== stale)
+    .map((entry) => (entry === moving ? { ...entry, at: toM } : entry));
+  writeState("pipe-ids", { next: book.next, ids }, projectId);
+  return moving.id;
+}
+
+/** 관 목록에 세션 id 를 얹은 사본 — 측점 계획의 덮는 구조물 id(종단 측점 id · 알약 짝)가 세션 id. */
+export function withPipeIds<T extends { chainage_m: number }>(
+  pipes: ReadonlyArray<T>,
+  projectId: string | null = active,
+): Array<T & { id: string }> {
+  return pipes.map((pipe) => ({ ...pipe, id: pipeIdAt(pipe.chainage_m, projectId) }));
+}
+
+/** 관을 옮김 — 관 세션 id 가 새 자리로(323-5 · id 그대로) · 그 관을 골라 둔 고름이면 자리만 새로(부재키
+ *  그대로 · 옛 자리 이름 id 면 세션 id 로). 다른 것을 골랐으면 그대로. */
+export function followMovedPipe(projectId: string | null, fromM: number, toM: number): void {
+  const id = movePipeId(fromM, toM, projectId);
+  const picked = readSelection(projectId);
+  if (!picked || picked.chainageM === null || !isNear(picked.chainageM, fromM)) return;
+  const sid = picked.structureId;
+  if (sid !== null && !sid.startsWith("pipe-")) return;
+  selectDesign(
+    projectId,
+    { chainageM: toM, structureId: sid === null ? null : id },
+    { partKey: picked.partKey },
+  );
+}

A00_Common/design/design_pipeline_cross.ts

@@ -0,0 +1,95 @@
+/* =============================================================================
+ * A00_Common/design/design_pipeline_cross.ts
+ * 계산 묶음 cross 입력 모음(PLAN 346-2 붙임) — 저장 노선 상세의 측점마다 횡단 입력 · 얹힌 시설 제원을
+ * **측점 열쇠**로 모음. 노선이 바뀌어도 같은 열쇠 측점(격자 번호 · 관 id · 구조물 id)이 그 입력을 받음.
+ * 열쇠 = 저장 노선을 stations 단계와 같은 함수로 짚은 측점(`buildStations`)과 누가거리로 짝지음 —
+ * 묶음 측점과 같은 열쇠 규칙(관 = 저장 관 id).
+ *
+ * 넘기는 칸 = 서버 노선 저장(`CARRY_INPUT_KEYS`)과 같은 일곱(지반 유형 · 측구 종류 · 측구 선택 · 2단 경사 ·
+ * 암 경계 · 암 경사 · 소단) + 얹힌 시설 맥락(포장 · 물넘이 기울임 · 세월교 노면 하강). 단면 유형 · 측구
+ * 방향은 새 지형이 정함(`logic/B05_Profile_Pipeline_Detail.ts` `crossWithUphill`) · 노견 확장 · 소단
+ * 깊이는 안 넘김. 값 = 상세에 얹힌 설계(세션 고침은 종단도 · 횡단 보기가 다시 셈하며 이미 얹음).
+ * ========================================================================== */
+
+import type { CrossSection, SectionDetailResponse } from "../../B06_Section/B06_Section_Api_Fetch";
+import { effectiveStandardCross } from "../../B06_Section/B06_Section_UI_Standard_Panel";
+import type { CrossInput, SectionSpecs } from "../../B05_Profile/logic/B05_Profile_Pipeline_Detail";
+import type { PipelineStation } from "./logic/design_pipeline_types";
+
+export interface PipelineCrossSource {
+  input: CrossInput;
+  /** 측점 열쇠 → 얹힌 시설 제원. */
+  specs: Map<string, SectionSpecs>;
+}
+
+const SPEC_KEYS = [
+  "structure",
+  "culvert",
+  "ford",
+  "box",
+  "ford_pavement",
+  "revetment",
+  "pavement",
+  "underdrain",
+] as const;
+
+/** 같은 측점으로 보는 누가거리 차(m) — 측점 열쇠 글 자릿수(0.01 m). */
+const SAME_M = 0.01;
+
+const finite = (value: unknown): number | null =>
+  typeof value === "number" && Number.isFinite(value) ? value : null;
+
+/** 측점 하나의 넘기는 입력(cross 단계 `CrossStationInput` 꼴). */
+function carried(section: CrossSection): Record<string, unknown> {
+  const design = (section.design ?? {}) as unknown as Record<string, unknown>;
+  const berm = design.berm as
+    { width_m: number; interval_m: number; slope_deg: number; depth_m?: number } | undefined;
+  const cutSlope = finite(design.cut_slope_ratio_user);
+  const drop = Number(section.ford?.overflow_depth_m);
+  return {
+    ...(typeof design.ground_type === "string" ? { groundType: design.ground_type } : {}),
+    ...(typeof design.ditch_type === "string" ? { ditchType: design.ditch_type } : {}),
+    ditchChoice: typeof design.ditch_choice === "boolean" ? design.ditch_choice : null,
+    twoStageSlope: Boolean(design.two_stage_slope),
+    rockBoundaryOffsetM: finite(design.rock_boundary_offset_m),
+    cutSlopeRatio: cutSlope !== null && cutSlope > 0 ? cutSlope : null,
+    berm: berm
+      ? {
+          widthM: berm.width_m,
+          intervalM: berm.interval_m,
+          slopeDeg: berm.slope_deg,
+          depthM: berm.depth_m,
+        }
+      : null,
+    paved: Boolean(section.pavement?.length) || Boolean(section.ford_pavement),
+    tilted: Boolean(section.ford_pavement || section.underdrain),
+    tiltPct: section.ford_pavement?.slope_pct ?? section.underdrain?.slope_pct ?? null,
+    surfaceDropM: drop > 0 ? drop : 0,
+  };
+}
+
+/** 저장 상세 + 저장 노선 측점(열쇠) → cross 입력 · 시설 제원 — 표준단면 · 상세가 없으면 null. */
+export function pipelineCrossSource(
+  projectId: string,
+  detail: SectionDetailResponse | null,
+  savedStations: ReadonlyArray<PipelineStation>,
+): PipelineCrossSource | null {
+  const standard = detail && effectiveStandardCross(projectId);
+  if (!detail || !standard) return null;
+  const byKey: CrossInput["byKey"] = {};
+  const specs = new Map<string, SectionSpecs>();
+  for (const section of detail.cross_sections) {
+    let best: PipelineStation | null = null;
+    for (const station of savedStations) {
+      const gap = Math.abs(station.chainageM - section.chainage_m);
+      if (gap < SAME_M && (!best || gap < Math.abs(best.chainageM - section.chainage_m)))
+        best = station;
+    }
+    if (!best || byKey[best.key]) continue;
+    byKey[best.key] = carried(section);
+    const own: Record<string, unknown> = {};
+    for (const name of SPEC_KEYS) if (section[name] !== undefined) own[name] = section[name];
+    specs.set(best.key, own as SectionSpecs);
+  }
+  return { input: { standard, byKey }, specs };
+}

A00_Common/design/design_pipeline_page.ts

@@ -0,0 +1,466 @@
+/* =============================================================================
+ * A00_Common/design/design_pipeline_page.ts
+ * B05 · B06 한 페이지의 계산 묶음 하나(PLAN 346-1 · 346-2 붙임) — 프로젝트마다 하나 · 페이지를 떠나면
+ * 버림(종단도 `dispose`). 단계 붙임 · 입력 모음 · 가게 잇기만 — 셈은 단계 파일 몫.
+ *
+ *   route · ground  `B05_Profile/logic/B05_Profile_Pipeline_RouteGround.ts`(sub8)
+ *   follow · planline · profile  `B05_Profile/logic/B05_Profile_Pipeline_Grade.ts`
+ *   stations  `design_pipeline_stations.ts` · footprint  `B05_Profile_Footprint_Stage.ts`(sub6)
+ *   cross · masshaul · haul  `B06_Section_Cross_Stage` · `logic/B05_Profile_MassHaul_Stage` ·
+ *     `B05_Profile_Api_HaulPlan`(sub2) · drainage  배수유역 판 `pipelineStage`(sub3) · corridor  3D 「낡음」.
+ *     haul · corridor 는 노선 초안 동안만(저장 노선은 유토곡선 판 · 횡단 다시 셈이 맡음).
+ *
+ * 입력 — 노선 = 편집기 다리(`RouteDraftBridge` · 캐시 칸 route-draft) · 계획고 = 종단도 편집
+ *   (`pipelineGrade` · 노선 초안 동안은 alignment-draft 노선 `DRAFT_ROUTE_ID`) · 횡단 = 저장 상세의 측점
+ *   입력(`design_pipeline_cross.ts`) · 관 = 가게 초안 → 저장 관 목록(좌표 · id) · 구조물 = 가게 초안 → 저장분.
+ * 출력 — 가게 stations · profile · footprint · generation · 노선 초안이 있으면 종단도가 새 첫 계획선 ·
+ *   옮긴 계획고 · 새 노선 상세(`pipelineDetail` — 지반 · 측점 · 횡단 면적 → 유토곡선)를 그림.
+ * 첫 계산 = 열 때 한 번(저장 노선 · 발자국 · 저장 안 한 노선 초안이 있으면 그 노선).
+ * [저장](sub5)이 서버 정본 — 노선을 먼저 보내고 `pendingAlignment(DRAFT_ROUTE_ID)` 를 새 노선에 보냄.
+ * ========================================================================== */
+
+import { createDesignPipeline, publishToStore, type DesignPipeline } from "./logic/design_pipeline";
+import { pipelineCrossSource, type PipelineCrossSource } from "./design_pipeline_cross";
+import { createStationsStage } from "./logic/design_pipeline_stations";
+import type {
+  FollowPatch,
+  PipelineInputs,
+  PipelineStation,
+  RouteDraft,
+  StageFn,
+  Vertex,
+} from "./logic/design_pipeline_types";
+import { useDesignStore, type DesignStoreValues } from "./design_store";
+import {
+  followStructures,
+  type FollowingStructure,
+} from "../../common_util/common_util_route_follow";
+import { fetchDetailPipePoints } from "../../B04_PreProcess/B04_PreProcess_Api_Fetch";
+import type { SectionDetailResponse } from "../../B06_Section/B06_Section_Api_Fetch";
+import { createCrossStage } from "../../B06_Section/logic/B06_Section_Cross_Stage";
+import {
+  emptyEdits,
+  type AlignmentBase,
+  type AlignmentEdits,
+  type ProfileAlignment,
+} from "../../B05_Profile/logic/B05_Profile_UI_Profile_Alignment";
+import {
+  markAlignmentSaved,
+  readAlignmentDraft,
+} from "../../B05_Profile/B05_Profile_UI_Profile_Edit";
+import { readAlignment } from "../../B05_Profile/logic/B05_Profile_UI_Profile_Data";
+import {
+  analysisTerrain,
+  fetchRoutePlan,
+  type RoutePlanResponse,
+} from "../../B05_Profile/B05_Profile_Api_Replan";
+import { createHaulStage } from "../../B05_Profile/B05_Profile_Api_HaulPlan";
+import { fetchStructures, fetchStructureTypes } from "../../B05_Profile/B05_Profile_Api_Structures";
+import {
+  groundStageDeps,
+  loadDesignTerrainGrid,
+} from "../../B05_Profile/B05_Profile_Api_TerrainGrid";
+import {
+  createGroundStage,
+  createRouteStage,
+  draftLine,
+} from "../../B05_Profile/logic/B05_Profile_Pipeline_RouteGround";
+import {
+  createFollowStage,
+  createPlanlineStage,
+  gradeRange,
+  profileStage,
+  routeRange,
+} from "../../B05_Profile/logic/B05_Profile_Pipeline_Grade";
+import {
+  crossWithUphill,
+  draftSectionDetail,
+  type CrossInput,
+} from "../../B05_Profile/logic/B05_Profile_Pipeline_Detail";
+import { buildStations } from "../../B05_Profile/logic/B05_Profile_Sections_Stations";
+import { footprintStage } from "../../B05_Profile/logic/B05_Profile_Footprint_Stage";
+import {
+  createMassHaulStage,
+  type MassHaulStageContext,
+} from "../../B05_Profile/logic/B05_Profile_MassHaul_Stage";
+import type {
+  PlanPipe,
+  PlanStructure,
+  PlanType,
+} from "../../common_util/common_util_structure_station";
+import type {
+  RouteDraftBridge,
+  RouteDraftEdit,
+} from "../../B05_Profile/B05_Profile_UI_RouteEdit_Draft";
+
+/** 노선 초안 동안의 계획고 초안 칸 — alignment-draft 의 노선 0(노선 번호는 [저장] 때 남). */
+export const DRAFT_ROUTE_ID = 0;
+
+/** 종단도(`design_profile`)가 묶음에 내주는 것. */
+export interface ProfileLink {
+  /** 저장 노선의 종단 기준(측점 한 벌) · 지금 계획고 편집 · 저장 상세 · 노선 번호. */
+  pipelineSource(): {
+    base: AlignmentBase | null;
+    edits: AlignmentEdits;
+    detail?: SectionDetailResponse | null;
+    routeId?: number | null;
+  };
+  /** 노선 초안으로 셈한 첫 계획선 · 옮긴 계획고를 그림. */
+  adoptPipeline(base: AlignmentBase, edits: AlignmentEdits, draft: boolean): void;
+  /** 새 노선 횡단이 왔음 — 다시 그림(유토곡선). */
+  redraw?(): void;
+  /** 배수유역 판 — drainage 단계. */
+  side?: { pipelineStage: StageFn<"drainage"> } | null;
+}
+
+export interface PagePipelineOptions {
+  stationIntervalM?: number;
+  /** 노선 초안 동안 종단 · 횡단이 바뀜 — 3D 「낡음」. */
+  onCorridorStale?: () => void;
+  /** 노선 조작 뒤 follow 가 가게 관 · 구조물을 다시 씀(목록 · 알약 다시) — `far` = 새 노선에서
+   *  `STRUCTURE_ROUTE_DRIFT_MAX_M` 넘게 먼 구조물 수(초안을 버려 되돌렸으면 0). */
+  onFacilitiesFollowed?: (far: number) => void;
+}
+
+interface PagePipeline {
+  pipe: DesignPipeline;
+  bridge: RouteDraftBridge;
+  grade(edits: AlignmentEdits): void;
+  restart(): void;
+  earthwork(context: MassHaulStageContext | null): void;
+  detail(): SectionDetailResponse | null;
+  dispose(): void;
+}
+
+/** 가게 관 · 구조물 초안(null = 저장분). */
+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);
+
+/** 편집기에 넘길 다리 — 그 프로젝트 묶음을 처음 부를 때 세움. */
+export function routeDraftBridge(
+  projectId: string,
+  link: ProfileLink,
+  options: PagePipelineOptions = {},
+): RouteDraftBridge {
+  let page = pages.get(projectId);
+  if (!page) pages.set(projectId, (page = createPagePipeline(projectId, link, options)));
+  return page.bridge;
+}
+
+/** 종단도 계획고 편집(▲▼ · 끌기 · 되돌리기) — 묶음이 없으면(편집기 안 뜸) 아무 일 없음. */
+export const pipelineGrade = (projectId: string, edits: AlignmentEdits): void =>
+  pages.get(projectId)?.grade(edits);
+
+/** 저장 정본이 바뀜(새로 받은 상세 · 새 노선) — 처음부터 다시. 갈아끼운 상세 · 같은 상세 다시 그림은 안 셈. */
+export const restartPagePipeline = (projectId: string): void => pages.get(projectId)?.restart();
+
+/** 유토곡선 설정(토량환산계수 · 자연방토 경사) — masshaul 단계 재료 · 표준단면이 막 왔으면 횡단 입력도. */
+export const pipelineEarthwork = (projectId: string, context: MassHaulStageContext | null): void =>
+  pages.get(projectId)?.earthwork(context);
+
+/** 노선 초안 동안 종단도가 그릴 새 노선 상세 — 초안이 없으면 null(저장 상세). */
+export const pipelineDetail = (projectId: string): SectionDetailResponse | null =>
+  pages.get(projectId)?.detail() ?? null;
+
+/** 지금 묶음(개발 · 시험) — 없으면 null. */
+export const pagePipeline = (projectId: string): DesignPipeline | null =>
+  pages.get(projectId)?.pipe ?? null;
+
+export function disposePagePipeline(projectId: string): void {
+  pages.get(projectId)?.dispose();
+  pages.delete(projectId);
+}
+
+function createPagePipeline(
+  projectId: string,
+  link: ProfileLink,
+  options: PagePipelineOptions,
+): PagePipeline {
+  const store = useDesignStore(projectId, null);
+  /** 노선 0 칸 — 종단도 편집 가게(`createProfileEditStore`)와 같은 자리(지금 프로젝트). */
+  const draftAlignment = useDesignStore(null, DRAFT_ROUTE_ID);
+  let plan: RoutePlanResponse | null = null;
+  let types: PlanType[] = [];
+  let savedStructures: PlanStructure[] = [];
+  let savedPipes: PlanPipe[] = [];
+  let earthwork: MassHaulStageContext | null = null;
+  /** 저장 노선 측점(열쇠) · 그것으로 모은 횡단 입력 — 저장 상세가 바뀌면 다시. */
+  let savedStations: PipelineStation[] = [];
+  let crossSource: { detail: SectionDetailResponse; source: PipelineCrossSource | null } | null =
+    null;
+  /** 저장 정본(서버가 준 상세 · 노선 번호) — 측점 갈아끼움(swap)이 만든 새 상세는 지반 표본 배열을
+   *  그대로 둠 → 정본 아님(묶음 출력 → 상세 → 다시 묶음 고리를 끊음). */
+  let canon: { routeId: unknown; samples: unknown; detail: SectionDetailResponse | null } | null =
+    null;
+  let shown: SectionDetailResponse | null = null;
+  let ready = false;
+  let started = false;
+  /** 앞 종단이 노선 초안으로 셈한 것인가 — 초안을 버리면 저장 기준으로 다시 그림. */
+  let drawnDraft = false;
+  let disposed = false;
+  /** 열 때 · 정본이 바뀐 차례(start) 번호 — 측점 · 종단을 가게에 안 냄(상세 = 저장 정본 그대로). */
+  let openGeneration = -1;
+  /** 노선 초안 전 가게 관 · 구조물 — 초안 동안 follow 가 새 측점을 가게에 씀 · 초안을 버리면 이것으로. */
+  let beforeDraft: Facilities | null = null;
+  /** 묶음이 가게에 마지막으로 쓴 관 · 구조물 · 쓰는 동안(메아리 — 다시 입력으로 안 받음). */
+  let written: Facilities | null = null;
+  let echo = false;
+
+  const savedLine = (): Vertex[] | null =>
+    plan ? plan.planned.map(([x, y]): Vertex => [x, y]) : null;
+  const savedCurves = () =>
+    (plan?.curves ?? []).map(({ start, apex, end, radius_m }) => ({ start, apex, end, radius_m }));
+  /** 저장 정본이 바뀌었나(새로 받은 상세 · 새 노선) — 바뀌었으면 잡아 둠. */
+  const canonChanged = (): boolean => {
+    const { detail = null, routeId } = link.pipelineSource();
+    const samples = detail?.longitudinal.samples;
+    if (canon && canon.routeId === routeId && canon.samples === samples) return false;
+    canon = { routeId, samples, detail };
+    return true;
+  };
+  /** 저장 노선 계획고 편집(세션 초안 → 저장분) — 노선 초안을 버리면 이것으로 돌아옴. */
+  const savedEdits = (): AlignmentEdits => {
+    const routeId = canon?.routeId;
+    const longitudinal = canon?.detail?.longitudinal;
+    return (
+      (typeof routeId === "number" ? readAlignmentDraft(routeId) : null) ??
+      (longitudinal && readAlignment(longitudinal)?.edits) ??
+      emptyEdits()
+    );
+  };
+  const crossNow = (): PipelineCrossSource | null => {
+    const detail = canon?.detail ?? null;
+    if (!detail) return null;
+    if (crossSource?.detail !== detail || !crossSource.source)
+      crossSource = { detail, source: pipelineCrossSource(projectId, detail, savedStations) };
+    return crossSource.source;
+  };
+  const crossStage = createCrossStage();
+  const haulStage = createHaulStage(projectId, () => link.pipelineSource().routeId ?? undefined);
+  const pipe = createDesignPipeline({
+    stages: {
+      route: createRouteStage({
+        minRadiusM: () => plan?.min_radius_m ?? 0,
+        savedLine: () => plan && { line: savedLine()!, curves: savedCurves() },
+      }),
+      follow: createFollowStage({
+        savedLine,
+        saved: () => {
+          const before = beforeDraft ?? facilitiesNow();
+          return {
+            pipes: before.pipes ?? savedPipes,
+            structures: before.structures ?? savedStructures,
+            alignment: savedEdits(),
+          };
+        },
+      }),
+      stations: createStationsStage({ intervalM: options.stationIntervalM, types: () => types }),
+      ground: createGroundStage(groundStageDeps(projectId)),
+      planline: createPlanlineStage({ savedBase: () => link.pipelineSource().base, savedLine }),
+      profile: profileStage,
+      // 단면 유형 기본값 = 새 지형 상단측(서버 노선 저장 규칙) — 단계 본문은 그대로 부름
+      cross: (ctx) =>
+        crossStage.stage({
+          ...ctx,
+          inputs: {
+            ...ctx.inputs,
+            cross: crossWithUphill(
+              ctx.inputs.cross as CrossInput | null,
+              ctx.out.ground?.stations ?? [],
+            ),
+          },
+        }),
+      footprint: footprintStage,
+      masshaul: createMassHaulStage(() => earthwork),
+      haul: (ctx) => (ctx.inputs.route ? haulStage(ctx) : (ctx.prev ?? null)),
+      drainage: link.side?.pipelineStage,
+      corridor: (ctx) => {
+        if (ctx.inputs.route) options.onCorridorStale?.();
+        return null;
+      },
+    },
+  });
+  const publish = publishToStore(store);
+  pipe.subscribe((event) => {
+    const saved = event.kind === "stage" && (event.stage === "ground" || event.stage === "profile");
+    if (!(saved && event.generation === openGeneration)) publish(event);
+  });
+  // 사용자 노선 조작 뒤 follow 가 다시 매긴 관 · 구조물 = 가게(목록 · 알약 · 횡단 보기가 바로 새 측점) ·
+  // 초안을 버리면 초안 전 값 · 열 때(start 차례)는 안 씀 — 알림 밖(틱 뒤)에서 씀(쓰기 고리 막음과 안 부딪힘)
+  pipe.subscribe((event) => {
+    if (event.kind !== "stage" || event.stage !== "follow") return;
+    if (event.generation === openGeneration) return;
+    const patch = event.value as FollowPatch;
+    queueMicrotask(() => {
+      if (event.generation !== pipe.generation) return;
+      if (!pipe.input("route")) {
+        if (!beforeDraft) return;
+        writeFacilities(beforeDraft);
+        beforeDraft = null;
+        return options.onFacilitiesFollowed?.(0);
+      }
+      const now = facilitiesNow();
+      beforeDraft ??= now;
+      writeFacilities({
+        pipes: (patch.pipes as Facilities["pipes"]) ?? now.pipes,
+        structures: (patch.structures as Facilities["structures"]) ?? now.structures,
+      });
+      const line = pipe.output("route")?.line ?? [];
+      const far = Array.isArray(patch.structures)
+        ? followStructures(
+            patch.structures as FollowingStructure[],
+            line.map(([x, y]) => ({ x, y })),
+          ).filter((moved) => moved.far).length
+        : 0;
+      options.onFacilitiesFollowed?.(far);
+    });
+  });
+  pipe.subscribe((event) => {
+    if (event.kind !== "stage" || (event.stage !== "profile" && event.stage !== "cross")) return;
+    const draft = pipe.input("route") !== null;
+    const saved = link.pipelineSource().detail ?? null;
+    const ground = pipe.output("ground");
+    const profile = pipe.output("profile") as ProfileAlignment | null;
+    shown =
+      draft && saved && ground && profile
+        ? draftSectionDetail(
+            saved,
+            ground,
+            profile,
+            pipe.output("cross"),
+            crossSource?.source?.specs ?? new Map(),
+            options.stationIntervalM ?? profile.policy.station_interval_m,
+          )
+        : null;
+    if (event.stage === "cross") return void (draft && link.redraw?.());
+    const base = pipe.output("planline");
+    const edits = (pipe.input("alignment") as AlignmentEdits | null) ?? emptyEdits();
+    if (draft) draftAlignment.set("alignmentDraft", edits);
+    else if (drawnDraft) markAlignmentSaved(DRAFT_ROUTE_ID); // 초안을 버림 — 노선 0 칸도 비움
+    if ((draft || drawnDraft) && base) link.adoptPipeline(base, edits, draft);
+    drawnDraft = draft;
+  });
+
+  function facilitiesNow(): Facilities {
+    return { pipes: store.get("pipes"), structures: store.get("structures") };
+  }
+  /** 가게에 씀 — 앞에 쓴 것과 같으면 안 씀(되돌리기가 세션을 되쓴 뒤에도 듣는 쪽은 다시 부름). */
+  function writeFacilities(next: Facilities): void {
+    echo = true;
+    try {
+      if (!written || !same(written.pipes, next.pipes)) store.set("pipes", next.pipes);
+      if (!written || !same(written.structures, next.structures))
+        store.set("structures", next.structures);
+    } finally {
+      echo = false;
+    }
+    written = next;
+  }
+
+  const inputsNow = (): PipelineInputs => {
+    const route = store.get("routeDraft");
+    return {
+      route,
+      alignment: (route && readAlignmentDraft(DRAFT_ROUTE_ID)) || link.pipelineSource().edits,
+      cross: crossNow()?.input ?? null,
+      pipes: store.get("pipes") ?? savedPipes,
+      structures: store.get("structures") ?? savedStructures,
+    };
+  };
+  const start = (): void => {
+    if (disposed || !ready || !link.pipelineSource().base) return;
+    canonChanged();
+    started = true;
+    void pipe.start(inputsNow());
+    openGeneration = pipe.generation;
+  };
+
+  /** 저장 노선(그린 선 · 곡선표 · 기본 반경) · 그 측점 열쇠 — [저장] 뒤 다시 받음(`restart`). */
+  const loadPlan = (): Promise<void> =>
+    fetchRoutePlan(projectId)
+      .then((routePlan) => {
+        plan = routePlan;
+        savedStations = buildStations(savedLine()!, savedCurves(), savedPipes, savedStructures, {
+          intervalM: options.stationIntervalM,
+          types,
+          stationSnap: routePlan.station_snap ?? false,
+        });
+        crossSource = null;
+      })
+      .catch(() => undefined);
+
+  void Promise.all([
+    fetchStructureTypes().catch(() => []),
+    fetchStructures(projectId).catch(() => null),
+    fetchDetailPipePoints(projectId).catch(() => null),
+    loadDesignTerrainGrid(projectId).catch(() => null), // 지형 격자(없으면 서버 길)
+  ])
+    .then(([structureTypes, list, pipes]) => {
+      types = structureTypes as PlanType[];
+      savedStructures = (list?.structures ?? []) as PlanStructure[];
+      savedPipes = (pipes?.pipe_points ?? []).map(({ lonlat: _lonlat, ...pipe }) => pipe);
+      return loadPlan();
+    })
+    .then(() => {
+      ready = plan !== null;
+      start(); // 열 때 한 번 — 발자국 · 저장 안 한 노선 초안이 있으면 그 노선으로
+    })
+    .catch(() => undefined);
+
+  const unsubscribe = [
+    store.subscribe(
+      "pipes",
+      (pipes) => started && !echo && void pipe.update("pipe", pipes ?? savedPipes),
+    ),
+    store.subscribe(
+      "structures",
+      (list) => started && !echo && void pipe.update("structure", list ?? savedStructures),
+    ),
+  ];
+
+  const bridge: RouteDraftBridge = {
+    saved: () => store.get("routeDraft"),
+    edited(edit: RouteDraftEdit | null) {
+      const stored = store.get("routeDraft");
+      let draft: RouteDraft | null = null;
+      if (edit) {
+        draft = { ...edit, rev: (stored?.rev ?? 0) + 1, terrain: analysisTerrain(projectId) };
+        if (stored && same({ ...stored, rev: 0 }, { ...draft, rev: 0 })) draft = stored;
+      }
+      store.set("routeDraft", draft);
+      if (!started) return start();
+      const before = pipe.output("route")?.line ?? null;
+      const after = draft ? draftLine(draft, plan?.min_radius_m ?? 0).line : savedLine();
+      void pipe.update("route", draft, routeRange(before, after));
+    },
+  };
+
+  return {
+    pipe,
+    bridge,
+    grade(edits) {
+      if (!started) return start();
+      if (same(edits, pipe.input("alignment"))) return;
+      const nodes = pipe.output("planline")?.basePvi.map((node) => node.chainage_m) ?? [];
+      const before = pipe.input("alignment") as AlignmentEdits | null;
+      void pipe.update("grade", edits, gradeRange(before, edits, nodes));
+    },
+    restart() {
+      if (!started) return start();
+      if (canonChanged()) void loadPlan().then(start); // 갈아끼움 · 같은 상세 다시 그림은 안 셈
+    },
+    earthwork(context) {
+      earthwork = context;
+      const cross = crossNow()?.input ?? null;
+      if (started && cross) void pipe.update("cross", cross);
+    },
+    detail: () => shown,
+    dispose() {
+      disposed = true;
+      unsubscribe.forEach((stop) => stop());
+      pipe.dispose();
+    },
+  };
+}

A00_Common/design/design_profile.ts

@@ -15,18 +15,15 @@ import { routeSpansFromStructures } from "../../B05_Profile/B05_Profile_UI_Drain
 import { readState, writeState } from "../b_page_state";
 import type { SectionDetailResponse } from "../../B06_Section/B06_Section_Api_Fetch";
 import { createWorkflowPanelHandle } from "@ui/ui_template_overlay";
-import { createMassHaulBadge } from "@util/common_util_mass_haul_badge";
-import { createHaulPlanPrefetch } from "../../B05_Profile/B05_Profile_Api_HaulPlan";
 import type {
   StructureInstance,
   StructureType,
 } from "../../B05_Profile/B05_Profile_Api_Structures";
-import { createProfileTableOverlay } from "../../B05_Profile/B05_Profile_UI_Profile_TableOverlay";
 import {
   hasLegacyAlignment,
   readAlignment,
   toDesignProfile,
-} from "../../B05_Profile/B05_Profile_UI_Profile_Data";
+} from "../../B05_Profile/logic/B05_Profile_UI_Profile_Data";
 import { createProgressCircle } from "@ui/ui_template_progress";
 import { showToast } from "@ui/ui_template_elements";
 import { saveProfileAlignment } from "../../B05_Profile/B05_Profile_Api_Fetch";
@@ -42,13 +39,12 @@ import type {
   AlignmentBase,
   AlignmentEdits,
   ProfileAlignment,
-} from "../../B05_Profile/B05_Profile_UI_Profile_Alignment";
+} from "../../B05_Profile/logic/B05_Profile_UI_Profile_Alignment";
 import {
   buildAlignment,
-  chainageKey,
   emptyEdits,
   toAlignmentBase,
-} from "../../B05_Profile/B05_Profile_UI_Profile_Alignment";
+} from "../../B05_Profile/logic/B05_Profile_UI_Profile_Alignment";
 import { createProfileEditStore } from "../../B05_Profile/B05_Profile_UI_Profile_Edit";
 import {
   structureGroupMenuItems,
@@ -56,11 +52,7 @@ import {
   structureIdKeeping,
 } from "../../B05_Profile/B05_Profile_UI_Profile_Structures";
 import { configureBalloonOffsets } from "@util/common_util_mass_haul_balance_view";
-import {
-  createRouteMassHaulPanel,
-  type MassHaulSummaryValues,
-  type RouteMassHaulContext,
-} from "../../B05_Profile/B05_Profile_UI_Profile_MassHaul";
+import type { RouteMassHaulContext } from "../../B05_Profile/B05_Profile_UI_Profile_MassHaul";
 import { renderBalanceBar } from "../../B05_Profile/B05_Profile_UI_Profile_Balance";
 import { createHeightCascade } from "../../B05_Profile/B05_Profile_UI_Profile_Heights";
 import { renderProfile } from "../../B05_Profile/B05_Profile_UI_Profile_Render";
@@ -77,15 +69,16 @@ import {
   createElevationHold,
   createProfileDrag,
 } from "../../B05_Profile/B05_Profile_UI_Profile_Drag";
-import {
-  planCurveWarning,
-  sampleAt,
-  snapToMasterStations,
-} from "../../B05_Profile/B05_Profile_UI_Profile_Guard";
+import { planCurveWarning, sampleAt } from "../../B05_Profile/logic/B05_Profile_UI_Profile_Guard";
+import { listedBase } from "./design_profile_base";
+import * as pagePipeline from "./design_pipeline_page";
 import type { RouteProfilePanelCallbacks } from "../../B05_Profile/B05_Profile_UI_Profile_Panel_Types";
-import { attachWheelHorizontalScroll } from "../../B05_Profile/B05_Profile_UI_Profile_Wheel";
-import { needsFullRedraw, type ElevationWindowResult } from "@util/common_util_chart_ywindow";
+import type { ElevationWindowResult } from "@util/common_util_chart_ywindow";
+import { frameOf } from "@util/common_util_view_window";
 import type { DesignSideBoard, DesignSideFactory, DesignView } from "./design_profile_slots";
+import { noticeDroppedEdits } from "./design_save";
+import { createProfileOverlays } from "./design_profile_overlays";
+import { bindProfileViewport, createSelectionReveal } from "./design_profile_viewport";
 import "../../B06_Section/B06_Section_UI_Style.css";
 // SVG 차트 색상(.b06-chart__*)의 정의처는 _Style_Cross.css다. 이걸 빼면 B05로 바로 진입했을 때
 // 배경 rect가 브라우저 기본 fill(검정)로 그려진다 — B06을 먼저 방문해야 정상으로 보이던 원인.
@@ -107,8 +100,8 @@ export interface DesignProfileContext {
   view: DesignView;
   /** 오른쪽 판 — 없으면 판 없이 종단 열만. */
   side?: DesignSideFactory;
-  /** 오른쪽 판을 켜고 끄는 단추 — 도구줄 오른쪽에 붙는다(판이 있을 때만). */
-  sideTool?: (board: DesignSideBoard) => HTMLElement;
+  /** 도구줄 [초기화] 바로 왼쪽에 놓는 단추([새 창]) — 다시 그려도 그 자리. */
+  toolLead?: HTMLElement;
   /** 측점 선택 변경 — 같은 측점 재선택·빈 곳 클릭이면 null(해제)로 알린다. */
   onSelectStation: (stationId: string | null) => void;
   /** [초기선 복원] 클릭 시 함께 실행(비정규 측점 등 다른 조작값도 초기화하려고 페이지가 넘긴다). */
@@ -161,40 +154,14 @@ export function createDesignProfile(ctx: DesignProfileContext) {
     if (drag.isSubDragging()) scheduleLightSync();
     else draw();
   };
-  /** 유토곡선 총괄값 — **그래프 좌측 상단 배지**가 보인다(2026-09-06 사용자 지시).
-   *  유토곡선을 접어도 이 값은 남아야 한다. */
-  const massBadge = createMassHaulBadge();
-  // 그래프 위에 도구줄(상단줄)이 한 줄 있다 — 그 아래로 내려 겹치지 않게 한다.
-  massBadge.root.style.setProperty("--mass-haul-badge-top", "34px");
-  bodyWrap.append(massBadge.root);
-  let massHaulSummary: MassHaulSummaryValues | null = null;
-  // 유토 배분은 **서버가 만든다**(2026-09-06) — 편집이 멈추면 뒤에서 받아 두고, 도착하면
-  // 곡선을 다시 그린다. 그 산식이 브라우저 번들에 안 실리는 것이 이 구조의 목적이다.
-  const haulPrefetch = createHaulPlanPrefetch(
+  // 유토곡선 · 테이블 오버레이 · 유토 배지는 `design_profile_overlays` 몫(700줄 한계).
+  const { massHaul, tableOverlay } = createProfileOverlays({
     projectId,
-    () => routeId ?? undefined,
-    subPanelChanged,
-  );
-  const massHaul = createRouteMassHaulPanel(
-    subPanelChanged,
-    (summary) => {
-      const before = massHaulSummary;
-      massHaulSummary = summary;
-      if (before?.finalM3 !== summary?.finalM3) massBadge.set(summary);
-    },
-    haulPrefetch,
-  );
-  bodyWrap.append(massHaul.overlay, massHaul.handle);
-  // 오버레이의 가로 스크롤을 종단 스크롤러와 양방향 동기화 — 측점 세로선 정렬 유지.
-  massHaul.attachScrollSync(body);
-  // 테이블도 유토곡선과 같은 오버레이 서브패널 — 유토곡선 위에 쌓인다(2026-08-05 사용자 지시).
-  const tableOverlay = createProfileTableOverlay(subPanelChanged);
-  bodyWrap.append(tableOverlay.overlay, tableOverlay.handle);
-  tableOverlay.attachScrollSync(body);
-  // 유토곡선·테이블 영역에서 브라우저 기본 우클릭 메뉴를 막는다(2026-08-05 사용자 지시).
-  // 종단 그래프의 구조물 메뉴는 chartWrap에서 이미 preventDefault 후 자체 메뉴를 띄운다.
-  body.addEventListener("contextmenu", (event) => event.preventDefault());
-  massHaul.overlay.addEventListener("contextmenu", (event) => event.preventDefault());
+    routeId: () => routeId,
+    bodyWrap,
+    body,
+    onChange: subPanelChanged,
+  });
   const content = document.createElement("div");
   content.className = "b05-route-profile__content";
   /** 횡단배수 최소 계획고 대상(배수관·BOX암거) — 관 목록이 바뀔 때 갱신한다. */
@@ -249,8 +216,12 @@ export function createDesignProfile(ctx: DesignProfileContext) {
   // 이어 공사 시작 기준 — 측점번호·누가거리 표시 오프셋(내부 chainage는 0기준 유지).
   let stationDisplay = { station: 0, cumulative: 0 };
   let base: AlignmentBase | null = null;
+  /** 서버 저장분 그대로의 기준 — `base` 는 늘 여기서 측점 한 벌로 다시 셈(`listed`). */
+  let storedBase: AlignmentBase | null = null;
   let alignment: ProfileAlignment | null = null;
   let store = createProfileEditStore(null, emptyEdits(), () => rebuild());
+  /** 계산 묶음이 노선 초안으로 셈한 종단을 그리는 동안의 편집 한 벌 — 노선 0 칸(alignment-draft · 346-1). */
+  let preview: typeof store | null = null;
   /** 서버 저장분 — 되돌리기 복원이 초안을 다시 읽을 때 기준으로 쓴다. */
   let savedEdits: AlignmentEdits = emptyEdits();
   let redrawPending = false;
@@ -261,9 +232,16 @@ export function createDesignProfile(ctx: DesignProfileContext) {
   /** 한 측점에 알약이 여럿(배수관 · 메쌓기)이면 지금 고른 알약을 그대로 둔다 — 첫 알약으로
    *  갈아 끼우면 누른 것과 다른 알약이 켜졌다(계획서 24-6b). */
   const structureIdAtStation = (stationId: string | null): string | null =>
-    structureIdKeeping(stationId, selectedStructureId, irregularStations, structures, detail);
+    structureIdKeeping(
+      stationId,
+      selectedStructureId,
+      irregularStations,
+      structures,
+      detail,
+      structureTypes,
+    );
   const stationIdAtStructure = (structureId: string | null): string | null =>
-    stationIdAtStructureOf(structureId, irregularStations, structures);
+    stationIdAtStructureOf(structureId, irregularStations, structures, structureTypes);
 
   /**
    * 측점 선택 — 같은 측점 재선택이면 해제한다(2026-08-04 사용자 지시).
@@ -288,7 +266,7 @@ export function createDesignProfile(ctx: DesignProfileContext) {
       planCurve: planCurveWarning(alignment, detail),
       minCoverViolations,
       balanceBar,
-      tools: tools.render(),
+      tools: withToolLead(tools.render()),
       trailing,
       alignment,
       legacyAlignment: !!detail && hasLegacyAlignment(detail.longitudinal),
@@ -310,11 +288,14 @@ export function createDesignProfile(ctx: DesignProfileContext) {
   let updateElevationWindow: (() => ElevationWindowResult | null) | null = null;
   /** 계획고 편집 버튼(▲▼)을 누르고 있는 동안 Y 축을 고정한다(`_Profile_Drag` 몫). */
   const elevationHold = createElevationHold(body, () => draw());
-  // 오른쪽 판 켬 · 끔 단추 — 가로 배율 조작구 옆, 두 보기 같은 자리.
-  const sideTool = drainagePanel && ctx.sideTool ? ctx.sideTool(drainagePanel) : null;
   const trailing = document.createElement("div");
   trailing.className = "b05-route-profile__trailing";
-  trailing.append(profileZoom.bar, ...(sideTool ? [sideTool] : []));
+  trailing.append(profileZoom.bar);
+  /** 도구 묶음은 그릴 때마다 새로 만든다 — 맨 앞([초기화] 왼쪽)에 `toolLead` 를 다시 옮겨 붙인다. */
+  const withToolLead = (wrap: HTMLElement): HTMLElement => {
+    if (ctx.toolLead) wrap.prepend(ctx.toolLead);
+    return wrap;
+  };
 
   /* [직선화]·[쉬프트]·되돌리기·방향키 배선은 `_Panel_Tools` 몫(700줄 한계). */
   const { tools, history, handleToolPick, setListening } = createPanelTools({
@@ -360,19 +341,23 @@ export function createDesignProfile(ctx: DesignProfileContext) {
     history.record();
   }
 
+  /** 계획선 측점 줄 = 측점 한 벌 — 셈은 `design_profile_base` 몫(계산 묶음 planline 도 같은 기준). */
+  const listed = (): AlignmentBase | null => listedBase(storedBase, detail, irregularStations);
+
   /**
    * 편집 후 다시 그린다. 길게 누르기(초당 10회)로 연속 호출되므로 한 프레임에 한 번만
    * 실제 렌더링하도록 모은다.
    */
   function rebuild(): void {
     if (base) alignment = buildAlignment(base, store.edits());
+    pagePipeline.pipelineGrade(projectId, store.edits());
     // 계획고가 바뀌면 측점별 횡단 단면적도 함께 바뀐다 — 전 측점을 다시 계산해 공유
     // 캐시에 얹는다. 그래야 **횡단 기준** 유토곡선과 횡단 카드가 따라 움직인다
     // (2026-08-03 사용자 보고: B05에서 계획선을 끌어도 횡단 곡선이 그대로였음).
     scheduleCrossPreview();
     if (redrawPending) return;
     redrawPending = true;
-    requestAnimationFrame(() => {
+    frameOf(root, () => {
       redrawPending = false;
       draw();
     });
@@ -384,13 +369,15 @@ export function createDesignProfile(ctx: DesignProfileContext) {
     detail: () => detail,
     routeId: () => routeId,
     edits: () => store.edits(),
+    alignment: () => (store === preview ? null : alignment),
     debounceMs: () => (root.dataset.view === "cross" ? 120 : CROSS_PREVIEW_DEBOUNCE_MS),
     onApplied: (updated) => {
       draw();
-      callbacks?.onCrossDesignsUpdated?.(updated);
+      if (updated.length) callbacks?.onCrossDesignsUpdated?.(updated);
     },
   });
-  const scheduleCrossPreview = (): void => crossPreview.schedule();
+  // 노선 초안 동안은 저장 노선 횡단을 안 고침 — 새 노선 횡단은 계산 묶음 cross(346-2)
+  const scheduleCrossPreview = (): void => void (store !== preview && crossPreview.schedule());
 
   /**
    * 높이 캐스케이드(2026-08-05 사용자 확정): 자리가 모자라면 ① 종단이 먼저 최소까지
@@ -418,12 +405,14 @@ export function createDesignProfile(ctx: DesignProfileContext) {
 
   function draw(): void {
     renderProfile({
+      // 그린 뒤 생긴 낡음도 다시 셈(317-1) · 노선 초안 동안은 묶음 cross 를 기다림
+      onStaleDesigns: (key) => crossPreview.scheduleIfStale(key, store === preview),
       body,
       callbacks,
       massHaul,
       tableOverlay,
       store,
-      detail: () => detail,
+      detail: () => pagePipeline.pipelineDetail(projectId) ?? detail,
       alignment: () => alignment,
       base: () => base,
       stationInterval: () => stationInterval,
@@ -462,46 +451,27 @@ export function createDesignProfile(ctx: DesignProfileContext) {
     });
   }
 
-  /** 그래프를 통째로 다시 만들 때까지 기다리는 시간(ms) — 눈금 갱신으로도 못 살릴 때만. */
-  const SCROLL_SETTLE_MS = 80;
-  /** 마지막으로 통째로 다시 만든 가로 위치 — 같은 자리면 다시 그리지 않는다. */
-  let settledScrollLeft = 0;
-  let scrollSettleTimer = 0;
-  // 세로 맞춤은 **그리기가 아니라 변환**이다(2026-09-04 사용자 확정) — 스크롤마다 겹 하나의
-  // 변환만 갈아 끼우므로 실시간으로 따라온다. 눈금 간격이 어긋나면 눈금층(요소 20개 안팎)만
-  // 새로 만든다. 그래프를 통째로 다시 만드는 34ms 짜리 재구성은 그래도 안 될 때만 남는다.
-  body.addEventListener("scroll", () => {
-    if (elevationHold.editing()) return;
-    const fitted = updateElevationWindow?.() ?? null;
-    window.clearTimeout(scrollSettleTimer);
-    if (!needsFullRedraw(fitted)) return;
-    scrollSettleTimer = window.setTimeout(() => {
-      if (elevationHold.editing() || Math.abs(body.scrollLeft - settledScrollLeft) < 1) return;
-      settledScrollLeft = body.scrollLeft;
-      draw();
-    }, SCROLL_SETTLE_MS);
+  /** 다른 영역에서 고른 자리가 화면 밖이면 가운데로(칠한 뒤 · `design_profile_viewport`). */
+  const reveal = createSelectionReveal(body);
+  const revealPick = (): void =>
+    reveal(
+      (selectedStationId ?? selectedStructureId)
+        ? `${selectedStationId}|${selectedStructureId}`
+        : null,
+    );
+  // 가로 스크롤 · 휠 · 크기 바뀜은 `design_profile_viewport` 몫(700줄 한계).
+  const unbindViewport = bindProfileViewport({
+    body,
+    editing: () => elevationHold.editing(),
+    fitElevation: () => updateElevationWindow?.() ?? null,
+    draw: () => draw(),
+    lastSize: () => ({ width: lastWidth, height: lastHeight }),
+    scheduleLightSync,
+    scheduleDraw: () => drag.scheduleDraw(),
   });
 
-  // 종단면도는 가로로 매우 길다. 세로 휠을 가로 스크롤로 돌려 스크롤바를 잡지 않고도
-  // 노선을 훑을 수 있게 한다 (Shift+휠은 브라우저 기본 가로 스크롤이라 그대로 둔다).
-  attachWheelHorizontalScroll(body);
-
-  const resizeObserver = new ResizeObserver(() => {
-    if (
-      body.clientWidth <= 0 ||
-      body.clientHeight <= 0 ||
-      (Math.abs(body.clientWidth - lastWidth) < 1 && Math.abs(body.clientHeight - lastHeight) < 1)
-    )
-      return;
-    // 끌리는 동안엔 프레임당 경량 높이 동기화만 — 무거운 전체 재구성은 손을 뗀 뒤 한 번.
-    // (150ms 디바운스만 있던 예전 방식은 중간 프레임이 없어 툭툭 끊겼다. 2026-08-05 사용자 보고)
-    scheduleLightSync();
-    drag.scheduleDraw();
-  });
-  resizeObserver.observe(body);
-
   // 접기 — 두 보기가 같은 키 하나를 쓴다(`_Profile_Drag` 몫).
-  bindProfileCollapse(root, panelHandle, () => requestAnimationFrame(draw));
+  bindProfileCollapse(root, panelHandle, () => frameOf(root, draw));
 
   /** 배수유역도(평면)에 **구간형 구조물 띠**를 넘긴다 — 종단 레인과 같은 자료다(계획서 3-6). */
   function syncDrainageSpans(): void {
@@ -524,15 +494,17 @@ export function createDesignProfile(ctx: DesignProfileContext) {
       const routeChanged = nextRouteId !== routeId;
       const carried = routeChanged && store.edited() ? store.edits() : null;
       // 서버 저장분을 기준으로 삼되, 남아 있는 세션 초안이 있으면 그쪽을 우선한다.
-      if (routeChanged || !store.dirty()) {
+      if (routeChanged || (store !== preview && !store.dirty())) {
         routeId = nextRouteId ?? routeId;
         savedEdits = stored?.edits ?? emptyEdits();
         store = createProfileEditStore(routeId, savedEdits, () => rebuild());
       }
-      base = stored ? toAlignmentBase(stored) : null;
+      storedBase = stored ? toAlignmentBase(stored) : null;
+      if (store !== preview) base = listed(); // 노선 초안 그림은 그대로(갈아끼운 상세)
       // 이월분은 base 설정 후 미저장 초안으로 커밋한다(확정 시 전송·재탐색 후 새로고침에도 유지).
       if (carried) store.replace(carried);
       alignment = base ? buildAlignment(base, store.edits()) : null;
+      pagePipeline.restartPagePipeline(projectId);
       // 유토곡선 balloon 위치 캐시 — 두 보기가 **같은 scope**를 써서 같은 자리를 공유한다.
       // 영구저장소 값(detail.balloon_offsets)이 있으면 그것이 이긴다.
       configureBalloonOffsets(
@@ -540,11 +512,10 @@ export function createDesignProfile(ctx: DesignProfileContext) {
         nextDetail.balloon_offsets ?? undefined,
       );
       draw();
-      requestAnimationFrame(draw);
+      frameOf(root, draw);
       // 저장된 횡단 설계가 옛 계획고로 굳어 있으면 진입 즉시 한 번 맞춘다 —
       // 지금까지는 B06에 들어가야만 고쳐져, B05의 횡단 기준 유토곡선과 3D
       // 예상형상이 옛 설계선을 그대로 썼다(2026-08-23 사용자 보고 · 실측 확인).
-      //
       // 비교 대상은 **편집이 반영된 계획선**이다. 저장분끼리 견주면, 세션에 미저장 편집이
       // 남은 채로 새로고침했을 때 「어긋남 없음」으로 나와 재계산이 예약되지 않고, 그리기
       // 쪽은 편집분 기준으로 어긋났다고 보아 유토곡선이 영영 빈 화면이 됐다
@@ -571,6 +542,7 @@ export function createDesignProfile(ctx: DesignProfileContext) {
      */
     setEarthworkContext(next: RouteMassHaulContext | null) {
       massHaul.setContext(next);
+      pagePipeline.pipelineEarthwork(projectId, next);
       draw();
     },
     setSelectedStation(stationId: string | null) {
@@ -578,6 +550,7 @@ export function createDesignProfile(ctx: DesignProfileContext) {
       // 3D·리스트·배수유역도에서 온 선택도 같은 자리 알약을 함께 켠다(2026-08-17).
       selectedStructureId = structureIdAtStation(stationId);
       draw();
+      revealPick();
     },
     /** 횡단배수 최소고를 편집에서 강제할지(사이드 체크박스). 경고 표시는 무관하게 유지된다. */
     setEnforceMinCover(enforce: boolean) {
@@ -592,9 +565,11 @@ export function createDesignProfile(ctx: DesignProfileContext) {
      *  입력을 바꾼 순간 위반 표시와 편집 차단 기준이 따라와야 한다(2026-08-19
      *  사용자 지시 6). 계획선 자체는 서버 재계산 몫이라 건드리지 않는다. */
     setGradeLimit(maxGradePct: number) {
-      if (!base || !Number.isFinite(maxGradePct) || maxGradePct <= 0) return;
+      if (!base || !storedBase || !Number.isFinite(maxGradePct) || maxGradePct <= 0) return;
       if (Math.abs(base.policy.max_grade_pct - maxGradePct) < 1e-9) return;
-      base = { ...base, policy: { ...base.policy, max_grade_pct: maxGradePct } };
+      const policy = { ...base.policy, max_grade_pct: maxGradePct };
+      storedBase = { ...storedBase, policy };
+      base = { ...base, policy };
       alignment = buildAlignment(base, store.edits());
       draw();
     },
@@ -604,7 +579,10 @@ export function createDesignProfile(ctx: DesignProfileContext) {
     },
     /** 비정규 측점 목록을 반영해 그래프(세로선+라벨)·테이블(주석)을 다시 그린다. */
     setIrregularStations(stations: IrregularStation[]) {
-      irregularStations = snapToMasterStations(alignment, stations);
+      irregularStations = stations;
+      if (store !== preview) base = listed();
+      if (base) alignment = buildAlignment(base, store.edits());
+      pagePipeline.restartPagePipeline(projectId);
       draw();
     },
     /** 구조물 타입 레지스트리를 받아 마크 색·약호에 쓴다(최초 1회 · 우클릭 목록은 사이드 패널 몫). */
@@ -629,6 +607,7 @@ export function createDesignProfile(ctx: DesignProfileContext) {
       const keep = structureId !== null && structureIdAtStation(selectedStationId) === structureId;
       selectedStationId = keep ? selectedStationId : own;
       draw();
+      revealPick();
     },
     /** 이어 공사 시작 기준(측점번호·누가거리 오프셋)을 반영해 측점 라벨·누가거리 표시를 옮긴다. */
     setStationDisplay(next: { station: number; cumulative: number }) {
@@ -640,20 +619,41 @@ export function createDesignProfile(ctx: DesignProfileContext) {
      * 비정규 측점을 옮기거나 지울 때 옛 위치에 남는 편집(유령 변화점)을 청소하는 데 쓴다.
      */
     resetStationEdit(chainageM: number, moveTo?: number) {
-      const key = chainageKey(chainageM);
+      // 옛 판 키(서버 측점 값 `264.055` · 관 값 264.06)도 같은 측점 — 0.006m 안 키(213-1 폭 · 272)
       const edits = store.edits();
-      if (edits.station_offsets[key] === undefined && edits.curve_radii[key] === undefined) return;
-      store.resetStation(chainageM, moveTo);
+      const key = [...Object.keys(edits.station_offsets), ...Object.keys(edits.curve_radii)].find(
+        (entry) => Math.abs(Number(entry) - chainageM) < 0.006,
+      );
+      if (key !== undefined) store.resetStation(Number(key), moveTo);
     },
     isDirty: () => store.dirty(),
+    /** 계산 묶음(346-1) — 저장 노선의 종단 기준 · 지금 계획고 편집. */
+    pipelineSource: () => ({ base: listed(), edits: store.edits(), detail, routeId }),
+    /** 노선 초안으로 셈한 첫 계획선 · 옮긴 계획고를 그림 — 초안 동안 편집은 노선 0 칸(저장 노선에
+     *  안 씀 · [저장]이 노선 뒤 새 노선에 보냄) · 초안을 버리면 저장 기준 · 세션 편집으로 돌아옴. */
+    adoptPipeline(nextBase: AlignmentBase, edits: AlignmentEdits, draft: boolean) {
+      const sameEdits = JSON.stringify(edits) === JSON.stringify(store.edits());
+      if (draft && store === preview && base === nextBase && sameEdits) return; // 이미 그림
+      if (draft && (store !== preview || !sameEdits))
+        store = preview = createProfileEditStore(pagePipeline.DRAFT_ROUTE_ID, edits, () =>
+          rebuild(),
+        );
+      if (!draft && store === preview)
+        store = createProfileEditStore(routeId, savedEdits, () => rebuild());
+      if (!draft) preview = null;
+      base = draft ? nextBase : listed();
+      rebuild();
+    },
     /** [확정] 직전에 호출한다. 편집이 없으면 아무 것도 하지 않는다. */
     async save(): Promise<void> {
-      if (!routeId || !store.dirty()) return;
+      if (!routeId || !store.dirty() || store === preview) return; // 노선 초안 미리보기 편집은 안 보냄
       const saved = await saveProfileAlignment(projectId, routeId, store.edits());
+      noticeDroppedEdits(saved);
       const next = saved.profile_alignment as ProfileAlignment | undefined;
       if (next?.base_pvi?.length) {
-        base = toAlignmentBase(next);
-        alignment = next;
+        storedBase = toAlignmentBase(next);
+        base = listed();
+        alignment = buildAlignment(base!, store.edits());
         if (detail) detail.longitudinal.profile_alignment = next;
       }
       store.markSaved();
@@ -662,6 +662,7 @@ export function createDesignProfile(ctx: DesignProfileContext) {
     clear() {
       detail = null;
       base = null;
+      storedBase = null;
       alignment = null;
       selectedStationId = null;
       balanceBar.replaceChildren();
@@ -686,10 +687,11 @@ export function createDesignProfile(ctx: DesignProfileContext) {
       drainagePanel?.load(projectId);
     },
     dispose() {
+      pagePipeline.disposePagePipeline(projectId);
       setListening(false);
       drag.dispose();
       crossPreview.dispose();
-      resizeObserver.disconnect();
+      unbindViewport();
     },
   };
 }

A00_Common/design/design_profile_base.ts

@@ -0,0 +1,44 @@
+/* =============================================================================
+ * A00_Common/design/design_profile_base.ts
+ * 종단도 계획선 기준 = 측점 한 벌(서버 일반 + 지금 구조물 측점 · 272) — `design_profile` 에서 나눔(700줄).
+ * 계산 묶음 planline 단계(`design_pipeline_page`)도 같은 기준을 받음.
+ * ========================================================================== */
+
+import type { SectionDetailResponse } from "../../B06_Section/B06_Section_Api_Fetch";
+import type { AlignmentBase } from "../../B05_Profile/logic/B05_Profile_UI_Profile_Alignment";
+import type { IrregularStation } from "../../B05_Profile/B05_Profile_UI_IrregularStations";
+import {
+  irregularGraphStations,
+  maxChainageOf,
+} from "../../B05_Profile/B05_Profile_UI_Profile_Layout";
+import { followMovedNodes, oneStationList } from "../../common_util/common_util_structure_station";
+
+/** 계획선 측점 줄 = 측점 한 벌(서버 일반 + 지금 구조물 측점 · 272) — 표 · ▲▼ · 그래프 · 3D · 횡단 다시 셈(342-1)이
+ *  같은 목록 · 사라진 구조물 측점의 꼭짓점은 서버와 같게 옮기거나 지움(`followMovedNodes`) · 늘 저장분에서 셈. */
+export function listedBase(
+  storedBase: AlignmentBase | null,
+  detail: SectionDetailResponse | null,
+  irregularStations: IrregularStation[],
+): AlignmentBase | null {
+  if (!storedBase || !detail) return storedBase;
+  const server = detail.longitudinal.stations;
+  const planted = irregularGraphStations(irregularStations, maxChainageOf(detail.longitudinal));
+  const list = oneStationList(server, planted);
+  const after = new Set(list.map((station) => station.chainage_m.toFixed(3)));
+  const before = new Set(server.map((station) => station.chainage_m.toFixed(3)));
+  const gone = server
+    .filter((station) => station.kind === "irregular" && !station.grid)
+    .map((station) => station.chainage_m)
+    .filter((chainage) => !after.has(chainage.toFixed(3)));
+  const born = list
+    .map((station) => station.chainage_m)
+    .filter((chainage) => !before.has(chainage.toFixed(3)));
+  return {
+    ...storedBase,
+    basePvi: followMovedNodes(storedBase.basePvi, gone, born),
+    stations: list.map((station) => ({
+      station_id: station.station_id,
+      chainage_m: station.chainage_m,
+    })),
+  };
+}

A00_Common/design/design_profile_free_view.ts

@@ -17,7 +17,7 @@ import {
   parseWindowTransform,
   type ChartWindow,
   type FreeDraw,
-} from "./design_profile_free";
+} from "./logic/design_profile_free";
 
 const SVG_NS = "http://www.w3.org/2000/svg";
 

A00_Common/design/design_profile_overlays.ts

@@ -0,0 +1,69 @@
+/* =============================================================================
+ * design_profile_overlays.ts
+ * 종단도 바닥 오버레이 서브패널 — 유토곡선 · 테이블 · 유토 총괄 배지(213-3 · 700줄 한계로 뗌).
+ * 만들어 `bodyWrap` 에 붙이고 종단 스크롤과 잇는 데까지 — 그리기 · 높이는 종단도 몫.
+ * ========================================================================== */
+
+import { attachMassHaulBadgeDrag, createMassHaulBadge } from "@util/common_util_mass_haul_badge";
+import { readStateRaw, writeStateRaw } from "../b_page_state";
+import { createHaulPlanPrefetch } from "../../B05_Profile/B05_Profile_Api_HaulPlan";
+import { createProfileTableOverlay } from "../../B05_Profile/B05_Profile_UI_Profile_TableOverlay";
+import {
+  createRouteMassHaulPanel,
+  type MassHaulSummaryValues,
+} from "../../B05_Profile/B05_Profile_UI_Profile_MassHaul";
+
+export interface ProfileOverlaysDeps {
+  projectId: string;
+  routeId: () => number | null;
+  /** 종단 열(요약 줄 · 본문 · 서클을 담은 칸) — 오버레이가 그 위를 덮는다. */
+  bodyWrap: HTMLElement;
+  /** 종단 스크롤러 — 오버레이 가로 스크롤을 이것과 맞춘다. */
+  body: HTMLElement;
+  /** 서브패널이 바뀜(펼침 · 범례 · 리사이저 · 유토 배분 도착). */
+  onChange: () => void;
+}
+
+export function createProfileOverlays(deps: ProfileOverlaysDeps) {
+  const { bodyWrap, body, onChange } = deps;
+  /** 유토곡선 총괄값 — **그래프 좌측 상단 배지**가 보인다(2026-09-06 사용자 지시).
+   *  유토곡선을 접어도 이 값은 남아야 한다. */
+  const massBadge = createMassHaulBadge();
+  // 그래프 위 도구줄 · 측점 ▲ 줄(바닥 47px) 아래로 내려 겹치지 않게 한다(289).
+  massBadge.root.style.setProperty("--mass-haul-badge-top", "52px");
+  bodyWrap.append(massBadge.root);
+  // 그래프 안 끌어 옮김(309-2) — 자리는 화면 설정 한 칸(B05 · B06 같은 값)
+  attachMassHaulBadgeDrag(massBadge.root, body, {
+    read: () => readStateRaw("mass-haul-badge-pos"),
+    write: (value) => writeStateRaw("mass-haul-badge-pos", value),
+  });
+  let massHaulSummary: MassHaulSummaryValues | null = null;
+  // 유토 배분은 **서버가 만든다**(2026-09-06) — 편집이 멈추면 뒤에서 받아 두고, 도착하면
+  // 곡선을 다시 그린다. 그 산식이 브라우저 번들에 안 실리는 것이 이 구조의 목적이다.
+  const haulPrefetch = createHaulPlanPrefetch(
+    deps.projectId,
+    () => deps.routeId() ?? undefined,
+    onChange,
+  );
+  const massHaul = createRouteMassHaulPanel(
+    onChange,
+    (summary) => {
+      const before = massHaulSummary;
+      massHaulSummary = summary;
+      if (before?.finalM3 !== summary?.finalM3) massBadge.set(summary);
+    },
+    haulPrefetch,
+  );
+  bodyWrap.append(massHaul.overlay, massHaul.handle);
+  // 오버레이의 가로 스크롤을 종단 스크롤러와 양방향 동기화 — 측점 세로선 정렬 유지.
+  massHaul.attachScrollSync(body);
+  // 테이블도 유토곡선과 같은 오버레이 서브패널 — 유토곡선 위에 쌓인다(2026-08-05 사용자 지시).
+  const tableOverlay = createProfileTableOverlay(onChange);
+  bodyWrap.append(tableOverlay.overlay, tableOverlay.handle);
+  tableOverlay.attachScrollSync(body);
+  // 유토곡선·테이블 영역에서 브라우저 기본 우클릭 메뉴를 막는다(2026-08-05 사용자 지시).
+  // 종단 그래프의 구조물 메뉴는 chartWrap에서 이미 preventDefault 후 자체 메뉴를 띄운다.
+  body.addEventListener("contextmenu", (event) => event.preventDefault());
+  massHaul.overlay.addEventListener("contextmenu", (event) => event.preventDefault());
+  return { massHaul, tableOverlay };
+}

A00_Common/design/design_profile_popout.ts

@@ -1,6 +1,7 @@
 /* =============================================================================
  * A00_Common/design/design_profile_popout.ts
  * 종단 하단 패널(종단도 · 표 · 유토곡선 · 배수유역도)을 **브라우저 새 창**으로 뺀다(계획서 54-35).
+ * 유토곡선 · 배수유역 판은 따로 또 뗀다(계획서 325-3) — 같은 몸통(`attachPopout`), 창 이름만 다름.
  *
  * 화면 조각(DOM)만 옮긴다 — 코드 · 자료 · 가게는 메인 창 그대로, 같은 함수가 그린다.
  * 창 전역에 걸린 듣기(방향키 · 포인터 놓기 · 메뉴 닫기)는 메인 창에만 있으므로 새 창에서 난
@@ -13,30 +14,39 @@ import type { DesignProfile } from "./design_profile";
 /** 메인 창 문서 · 창에 걸린 듣기가 받아야 할 새 창 이벤트. */
 const FORWARD_TYPES = ["keydown", "keyup", "pointerdown", "pointerup", "pointercancel"];
 
-/** 종단 도구줄 [배수유역도] 단추 뒤에 [새 창] 단추를 붙인다 — 두 보기가 같은 한 벌을 쓴다. */
-export function attachProfilePopout(
-  profile: DesignProfile,
-  slot: HTMLElement,
-  sideTool: HTMLElement | null,
-): void {
-  const { root } = profile;
+/** 요소가 놓인 창(문서에 안 붙었으면 메인 창). */
+const viewOfNode = (node: Node): Window => node.ownerDocument?.defaultView ?? window;
+
+/** 조각 하나를 새 창으로 떼는 단추 — 창 이름은 조각마다 달라야 함(같으면 앞 창 body 를 덮어 조각이 사라짐). */
+interface PopoutSpec {
+  piece: HTMLElement;
+  button: HTMLButtonElement;
+  name: string;
+  features: string;
+  docTitle: string;
+  /** 조각을 제자리로 돌림. */
+  home: () => void;
+  /** 뗐다 · 붙였다(조각이 옮겨 간 뒤). */
+  onMove?: (popped: boolean) => void;
+}
+
+/** 조각을 새 창으로 떼고 붙이는 몸통 — 새 창은 단추가 놓인 창에서 엶(종단 새 창 안에서 다시 떼기). */
+function attachPopout(profile: DesignProfile, spec: PopoutSpec): void {
+  const { piece, button } = spec;
   let popup: Window | null = null;
 
-  const button = document.createElement("button");
   button.type = "button";
-  button.className = "ui-btn ui-btn--ghost b05-route-profile__popout";
-  button.textContent = "새 창";
-  button.title = "종단 하단 패널을 브라우저 새 창으로 띄움";
+  button.textContent = "창 분할";
   button.addEventListener("click", () => (popup && !popup.closed ? closePopup() : open()));
-  sideTool?.after(button);
 
   const restore = (): void => {
-    if (!root.classList.contains("is-popout")) return;
-    root.classList.remove("is-popout");
-    button.textContent = "새 창";
-    slot.append(root);
+    if (!piece.classList.contains("is-popout")) return;
+    piece.classList.remove("is-popout");
+    button.textContent = "창 분할";
+    spec.home();
     popup = null;
-    requestAnimationFrame(profile.redraw);
+    spec.onMove?.(false);
+    viewOfNode(piece).requestAnimationFrame(profile.redraw);
   };
   const closePopup = (): void => {
     popup?.close();
@@ -51,28 +61,31 @@ export function attachProfilePopout(
   };
 
   function open(): void {
-    const next = window.open("", "aislo-profile-popout", "popup,width=1400,height=720");
+    const opener = viewOfNode(button);
+    const next = opener.open("", spec.name, spec.features);
     if (!next) {
       showToast("새 창이 막힘 — 주소창의 팝업 허용을 켠 뒤 다시 누름", "error");
       return;
     }
     popup = next;
+    const source = opener.document;
     const doc = next.document;
-    doc.title = "종단 — Aislo";
-    // 스타일 · 테마 — 메인 창 시트 · html 속성을 그대로 옮겨 같은 색 · 글꼴로 그린다.
+    doc.title = spec.docTitle;
+    // 스타일 · 테마 — 단추가 놓인 창의 시트 · html 속성을 그대로 옮겨 같은 색 · 글꼴로 그린다.
     doc.head.replaceChildren(
-      ...Array.from(document.querySelectorAll('link[rel="stylesheet"], style'), (node) =>
+      ...Array.from(source.querySelectorAll('link[rel="stylesheet"], style'), (node) =>
         doc.importNode(node, true),
       ),
     );
-    Array.from(document.documentElement.attributes).forEach((attr) =>
+    Array.from(source.documentElement.attributes).forEach((attr) =>
       doc.documentElement.setAttribute(attr.name, attr.value),
     );
-    doc.body.className = document.body.className;
-    doc.body.style.cssText = `margin:0;height:100dvh;overflow:hidden;background:${getComputedStyle(document.body).backgroundColor}`;
-    root.classList.add("is-popout");
-    button.textContent = "제자리로";
-    doc.body.replaceChildren(root);
+    doc.body.className = source.body.className;
+    doc.body.style.cssText = `margin:0;height:100dvh;overflow:hidden;background:${opener.getComputedStyle(source.body).backgroundColor}`;
+    piece.classList.add("is-popout");
+    button.textContent = "창 결합";
+    doc.body.replaceChildren(piece);
+    spec.onMove?.(true);
 
     // 새 창 키 · 포인터를 메인 문서로 — 대상은 새 창 요소 그대로(입력칸 판정 · 메뉴 안 판정).
     FORWARD_TYPES.forEach((type) =>
@@ -95,7 +108,75 @@ export function attachProfilePopout(
     new (next as Window & typeof globalThis).ResizeObserver(() => {
       next.cancelAnimationFrame(pending);
       pending = next.requestAnimationFrame(profile.redraw);
-    }).observe(root);
+    }).observe(piece);
     next.addEventListener("pagehide", restore);
   }
 }
+
+/** 종단 도구줄 [초기화] 왼쪽 단추(`toolLead`)를 [창 분할] 단추로 꾸민다 — 두 보기가 같은 한 벌을 쓴다. */
+export function attachProfilePopout(
+  profile: DesignProfile,
+  slot: HTMLElement,
+  button: HTMLButtonElement,
+): void {
+  button.className = "ui-btn ui-btn--ghost b05-route-profile__popout";
+  button.title = "종단 하단 패널을 별도 창으로 분할 · 다시 누르면 결합";
+  attachPopout(profile, {
+    piece: profile.root,
+    button,
+    name: "aislo-profile-popout",
+    features: "popup,width=1400,height=720",
+    docTitle: "종단 — Aislo",
+    home: () => slot.append(profile.root),
+  });
+}
+
+/** 유토곡선 · 배수유역 판에 [창 분할] 단추를 단다 — 유토 판 좌상단 · 배수 머리줄 맨 앞(계획서 325-3). */
+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.title = title;
+    return button;
+  };
+
+  const massOverlay = profile.root.querySelector<HTMLElement>(".b05-profile__masshaul-overlay");
+  const massHandle = profile.root.querySelector<HTMLElement>(".b05-profile__masshaul-handle");
+  if (massOverlay && massHandle) {
+    const button = subButton("유토곡선 창 분할");
+    massOverlay.append(button);
+    attachPopout(profile, {
+      piece: massOverlay,
+      button,
+      name: "aislo-masshaul-popout",
+      features: "popup,width=1400,height=420",
+      docTitle: "유토곡선 — Aislo",
+      // 제자리 = 유토 손잡이 바로 앞(종단 본문 바닥 겹침 판).
+      home: () => massHandle.before(massOverlay),
+      onMove: (popped) => {
+        // 뗀 동안 메인 손잡이는 숨김 · 같이 줄이기 인라인 높이는 비움(새 창은 창 높이를 다 씀).
+        massHandle.hidden = popped;
+        massOverlay.style.height = "";
+      },
+    });
+  }
+
+  const drainage = profile.side;
+  const header = drainage?.root.querySelector<HTMLElement>(".b05-drainage__header");
+  if (drainage && header) {
+    const button = subButton("배수유역 창 분할");
+    header.prepend(button);
+    const content = drainage.root.parentElement;
+    attachPopout(profile, {
+      piece: drainage.root,
+      button,
+      name: "aislo-drainage-popout",
+      features: "popup,width=1000,height=720",
+      docTitle: "배수유역 — Aislo",
+      // 제자리 = 종단 content 끝(종단 본문 오른쪽).
+      home: () => content?.append(drainage.root),
+      // 지도 크기 관찰을 놓인 창 것으로(325-1).
+      onMove: () => drainage.rehome(),
+    });
+  }
+}

A00_Common/design/design_profile_viewport.ts

@@ -0,0 +1,100 @@
+/* =============================================================================
+ * design_profile_viewport.ts
+ * 종단 스크롤러의 가로 스크롤 · 휠 · 크기 바뀜 듣개(213-3 · 700줄 한계로 뗌).
+ * 다시 그리기 · 높이 동기화는 종단도가 넘긴 함수를 부른다.
+ * ========================================================================== */
+
+import { attachWheelHorizontalScroll } from "../../B05_Profile/B05_Profile_UI_Profile_Wheel";
+import { needsFullRedraw, type ElevationWindowResult } from "@util/common_util_chart_ywindow";
+import { viewOf } from "@util/common_util_view_window";
+
+/** 그래프를 통째로 다시 만들 때까지 기다리는 시간(ms) — 눈금 갱신으로도 못 살릴 때만. */
+const SCROLL_SETTLE_MS = 80;
+
+export interface ProfileViewportDeps {
+  body: HTMLElement;
+  /** ▲▼ 계획고 편집으로 Y 축을 잡고 있는 중. */
+  editing: () => boolean;
+  /** 세로 창 갱신기 — 그릴 때마다 렌더러가 새로 준다(없으면 null). */
+  fitElevation: () => ElevationWindowResult | null;
+  draw: () => void;
+  /** 마지막으로 그린 본문 크기 — 같으면 크기 바뀜을 무시한다. */
+  lastSize: () => { width: number; height: number };
+  scheduleLightSync: () => void;
+  scheduleDraw: () => void;
+}
+
+/** 듣개를 붙이고 떼는 함수를 돌려준다. */
+export function bindProfileViewport(deps: ProfileViewportDeps): () => void {
+  const { body } = deps;
+  /** 마지막으로 통째로 다시 만든 가로 위치 — 같은 자리면 다시 그리지 않는다. */
+  let settledScrollLeft = 0;
+  let scrollSettleTimer = 0;
+  /** 시계를 건 창 — 새 창으로 빼면 그 창 시계를 쓴다(가려진 메인 창 시계는 늦게 돎 · 230-1). */
+  let timerView: Window = window;
+  // 세로 맞춤은 **그리기가 아니라 변환**이다(2026-09-04 사용자 확정) — 스크롤마다 겹 하나의
+  // 변환만 갈아 끼우므로 실시간으로 따라온다. 눈금 간격이 어긋나면 눈금층(요소 20개 안팎)만
+  // 새로 만든다. 그래프를 통째로 다시 만드는 34ms 짜리 재구성은 그래도 안 될 때만 남는다.
+  body.addEventListener("scroll", () => {
+    if (deps.editing()) return;
+    const fitted = deps.fitElevation();
+    timerView.clearTimeout(scrollSettleTimer);
+    if (!needsFullRedraw(fitted)) return;
+    timerView = viewOf(body);
+    scrollSettleTimer = timerView.setTimeout(() => {
+      if (deps.editing() || Math.abs(body.scrollLeft - settledScrollLeft) < 1) return;
+      settledScrollLeft = body.scrollLeft;
+      deps.draw();
+    }, SCROLL_SETTLE_MS);
+  });
+
+  // 종단면도는 가로로 매우 길다. 세로 휠을 가로 스크롤로 돌려 스크롤바를 잡지 않고도
+  // 노선을 훑을 수 있게 한다 (Shift+휠은 브라우저 기본 가로 스크롤이라 그대로 둔다).
+  attachWheelHorizontalScroll(body);
+
+  const resizeObserver = new ResizeObserver(() => {
+    const last = deps.lastSize();
+    if (
+      body.clientWidth <= 0 ||
+      body.clientHeight <= 0 ||
+      (Math.abs(body.clientWidth - last.width) < 1 && Math.abs(body.clientHeight - last.height) < 1)
+    )
+      return;
+    // 끌리는 동안엔 프레임당 경량 높이 동기화만 — 무거운 전체 재구성은 손을 뗀 뒤 한 번.
+    // (150ms 디바운스만 있던 예전 방식은 중간 프레임이 없어 툭툭 끊겼다. 2026-08-05 사용자 보고)
+    deps.scheduleLightSync();
+    deps.scheduleDraw();
+  });
+  resizeObserver.observe(body);
+  return () => resizeObserver.disconnect();
+}
+
+/** 고른 것이 보이는 칸 가장자리에서 이만큼(폭 비율) 안쪽이면 그대로 둔다. */
+const REVEAL_EDGE = 0.1;
+
+/**
+ * 고른 측점선(없으면 고른 구조물 알약)이 종단도 보이는 칸 밖이면 가운데로 민다 — 다른 영역(횡단 카드 ·
+ * 3D · 배수유역도 · 좌측 목록)에서 고른 자리도 종단에서 바로 보이게. 칠한 결과(강조된 선 · 알약)를
+ * 보고 옮긴다 · 같은 고름을 다시 칠할 때는 안 밂(사용자가 옮겨 본 자리를 지킴) · 그래프 안에서
+ * 누른 것은 이미 보이는 자리라 안 움직임. `key` = 고름 열쇠(풀면 null).
+ */
+export function createSelectionReveal(body: HTMLElement): (key: string | null) => void {
+  let shown: string | null = null;
+  return (key) => {
+    if (key === null || key === shown) {
+      shown = key;
+      return;
+    }
+    const mark =
+      body.querySelector(".b06-chart__station--selected") ??
+      body.querySelector(".b05-structure__mark.is-selected");
+    if (!mark || body.clientWidth <= 0) return; // 아직 안 그려짐 — 다음 칠하기에서
+    shown = key;
+    const box = mark.getBoundingClientRect();
+    const view = body.getBoundingClientRect();
+    const at = box.left + box.width / 2 - view.left;
+    if (at >= view.width * REVEAL_EDGE && at <= view.width * (1 - REVEAL_EDGE)) return;
+    // 바로 옮김 — 고른 뒤 잇따르는 다시 그리기가 부드러운 이동을 끊음(다시 그리기는 지금 자리를 지킴)
+    body.scrollLeft += at - view.width / 2;
+  };
+}

A00_Common/design/design_reset.ts

@@ -2,7 +2,7 @@
  * design_reset.ts
  * [초기화] 한 줄기 — 두 보기의 아래 단추가 **같은 함수**를 부른다(계획서 24-2b).
  *
- * 사용자 편집 전부 폐기, 계획노선 CSV 기본값으로 B05·B06 재계산 후 재진입. 네이티브 confirm 은
+ * 사용자 편집 전부 폐기, 초기값(자동설계 직후 · 추천 [적용] 직후)을 작업본에 덮어쓴 뒤 재진입(재계산 아님). 네이티브 confirm 은
  * 공용 헤드 브라우저가 자동 취소해 버튼이 죽은 듯 보였다(2026-08-19 진단) — 화면 안 모달로
  * 확인받는다. (`B05_Profile_UI_Page_Actions.resetDesignAction` 에서 옮겨 왔다 — 동작 그대로.)
  * ========================================================================== */

A00_Common/design/design_save.ts

@@ -2,7 +2,13 @@
  * A00_Common/design/design_save.ts
  * B05 · B06 **저장 한 줄기**(계획서 24-1) — [저장] · [확정]이 어느 보기에서 눌려도 같은 차례.
  *
- *   관 → 구조물 → 계획고 → 암거 옵션 → 오르막(상단측) → 횡단
+ *   노선 → 관 → 구조물 → 계획고 → 암거 옵션 → 오르막(상단측) → 횡단
+ *
+ * 노선(346-3 · [노선 반영] 없앰) — 노선 초안이 마지막 저장과 다를 때만 맨 앞에서 `POST /route/replan`
+ * (draft = 계약 `RouteDraft`). 서버가 노선 → 관 · 구조물 따라감 → 종횡단 → 계획고 · 횡단 이월까지 돌고
+ * 새 노선 번호를 준다. 그 뒤 차례는 **새 노선**으로: 관 · 구조물 초안(좌표 정본) · 계획고 초안(옛 노선 칸 →
+ * 새 노선) · 횡단 초안은 측점 열쇠로 넘겨(`carryStationDrafts`) 저장 · 결과 한 줄 · 페이지 다시 세움.
+ * 노선 저장이 실패하면 서버가 되살리고 여기서 멈춤(다른 초안도 화면 · 세션에 그대로 · 오류 한 줄).
  *
  * 차례는 여기 한 곳에만 둔다. 보기마다 다른 것은 **화면이 쥔 값으로 한 번 더 맞추는 일**
  * (B05 배수유역도 목록 · 구조물 목록 새로 받기 · 종단 패널 다시 그리기)과 횡단 저장 본문뿐이라,
@@ -26,9 +32,17 @@ import {
 } from "../../B05_Profile/B05_Profile_UI_Profile_Edit";
 import { flushCulvertOptions } from "../../B06_Section/B06_Section_Api_Culvert_Options";
 import { clearState, stateKey } from "../b_page_state";
+import {
+  carryAfterRouteSave,
+  pendingRouteSave,
+  rebuildAfterRouteSave,
+  routeSaveSummary,
+  saveRouteDraft,
+} from "../../B05_Profile/B05_Profile_UI_RouteEdit_Apply";
 
-/** 저장 차례 — 이 순서 그대로 돈다. */
+/** 저장 차례 — 이 순서 그대로 돈다(`route` 는 노선 초안이 있을 때만). */
 export const DESIGN_SAVE_ORDER = [
+  "route",
   "pipes",
   "structures",
   "alignment",
@@ -48,7 +62,7 @@ export interface DesignSaveContext {
    * 차례마다 **기본 창구 대신** 도는 일. 없으면 기본 창구(세션 초안 → 정본)가 돈다.
    * `pipes` 만 예외 — 기본(세션 초안)이 먼저 나가고 그 뒤에 돈다(화면 목록으로 한 번 더 맞춤).
    */
-  steps?: Partial<Record<Exclude<DesignSaveStep, "cross">, () => Promise<void>>>;
+  steps?: Partial<Record<Exclude<DesignSaveStep, "cross" | "route">, () => Promise<void>>>;
   /** 횡단 — 보기마다 본문이 다르다. `confirm` 이면 단계를 닫는 길로. */
   cross: (confirm: boolean) => Promise<void>;
   /** 모두 나간 뒤 — 캐시 비우기 · 화면 다시 읽기 · 알림 · 다음 단계. */
@@ -57,6 +71,13 @@ export interface DesignSaveContext {
   failed: (error: unknown, confirm: boolean) => void;
 }
 
+const saving = new Set<string>();
+
+/** 초안을 내보내는 중인가(323-9) — 그동안 바뀜 신호로 낡은 상세 · 빈 초안을 그리지 않음(뒤처리가 한 번 다시). */
+export function savingDesign(projectId: string | null): boolean {
+  return projectId !== null && saving.has(projectId);
+}
+
 /** 실패해도 저장을 멈추지 않는 창구 — 알리고 넘어간다(초안은 세션에 남아 다시 나갈 수 있다). */
 function reportOnly(label: string): (error: unknown) => void {
   return (error) => {
@@ -65,12 +86,38 @@ function reportOnly(label: string): (error: unknown) => void {
   };
 }
 
-/** 계획고 초안(가게 하나)을 종단 정본에 쓴다. 없으면 아무 일도 하지 않는다. */
-async function flushAlignmentDraft(projectId: string, routeId: number): Promise<void> {
-  const draft = pendingAlignment(routeId);
+/** 서버가 버린 계획고 편집 자리(측점 · 관 · 구조물이 없는 자리 · 213-2)를 알린다. */
+export function noticeDroppedEdits(saved: { dropped_edit_chainages?: number[] }): void {
+  const dropped = saved.dropped_edit_chainages ?? [];
+  if (!dropped.length) return;
+  const where = dropped
+    .slice(0, 5)
+    .map((value) => `${value.toFixed(2)}m`)
+    .join(" · ");
+  showToast(
+    `계획고 편집 ${dropped.length}곳을 지웠습니다 — 측점 · 관 · 구조물이 없는 자리: ${where}` +
+      (dropped.length > 5 ? ` 외 ${dropped.length - 5}곳` : ""),
+    "info",
+  );
+}
+
+/** 노선 초안 동안의 계획고 초안 칸 — `design_pipeline_page` 의 `DRAFT_ROUTE_ID` 와 같은 값(sub7). */
+const DRAFT_ROUTE_ID = 0;
+
+/** 계획고 초안(가게 하나)을 종단 정본에 쓴다. 없으면 아무 일도 하지 않는다. 노선이 바뀌었으면
+ *  노선 초안 칸(`DRAFT_ROUTE_ID`) · 없으면 옛 노선 칸(`from`)의 초안을 새 노선(`routeId`)에 · 두 칸 다
+ *  비움 — 측점이 없는 자리는 서버가 버리고 알림(213-2). */
+async function flushAlignmentDraft(
+  projectId: string,
+  routeId: number,
+  from: number = routeId,
+): Promise<void> {
+  const moved = from !== routeId;
+  const draft = (moved ? pendingAlignment(DRAFT_ROUTE_ID) : null) ?? pendingAlignment(from);
   if (!draft) return;
-  await saveProfileAlignment(projectId, routeId, draft);
-  markAlignmentSaved(routeId);
+  noticeDroppedEdits(await saveProfileAlignment(projectId, routeId, draft));
+  markAlignmentSaved(from);
+  if (moved) markAlignmentSaved(DRAFT_ROUTE_ID);
 }
 
 /** 실패해도 다음 차례로 넘어가는 창구와 그 이름(보기가 준 일에도 같이 씌운다). */
@@ -82,9 +129,10 @@ const TOLERANT: Partial<Record<DesignSaveStep, string>> = {
 
 /** 차례마다 기본 창구. 암거 옵션 · 상단측은 조용히 넘어간다(다음 [저장]에서 다시 나감). */
 function defaultStep(
-  step: Exclude<DesignSaveStep, "cross">,
+  step: Exclude<DesignSaveStep, "cross" | "route">,
   projectId: string,
   routeId: number,
+  fromRouteId: number = routeId,
 ): () => Promise<void> {
   switch (step) {
     case "pipes":
@@ -92,10 +140,10 @@ function defaultStep(
     case "structures":
       return () => flushPendingStructures(projectId);
     case "alignment":
-      return () => flushAlignmentDraft(projectId, routeId);
+      return () => flushAlignmentDraft(projectId, routeId, fromRouteId);
     case "culvertOptions":
       return () =>
-        flushCulvertOptions(projectId, stateKey("culvertopt", projectId, routeId)).catch(
+        flushCulvertOptions(projectId, stateKey("culvertopt", projectId, fromRouteId)).catch(
           () => undefined,
         );
     case "uphill":
@@ -112,18 +160,34 @@ export async function saveDesign(
   options: { confirm?: boolean } = {},
 ): Promise<boolean> {
   const confirm = options.confirm ?? false;
-  const routeId = ctx.routeId();
-  if (routeId === null) return false;
+  const fromRouteId = ctx.routeId();
+  if (fromRouteId === null) return false;
+  let routeId = fromRouteId;
+  /** 노선을 새로 저장했으면 그 결과 — 뒤 차례는 새 노선 · 화면 몫(옛 노선 판) 일은 건너뜀. */
+  let routeSaved: Awaited<ReturnType<typeof saveRouteDraft>> | null = null;
   showLoadingOverlay();
+  saving.add(ctx.projectId);
   try {
     await ctx.prepare?.();
     for (const step of DESIGN_SAVE_ORDER) {
-      if (step === "cross") {
-        await ctx.cross(confirm);
+      if (step === "route") {
+        const body = await pendingRouteSave(ctx.projectId); // 안 바뀌었으면 null — 안 보냄
+        if (!body) continue;
+        routeSaved = await saveRouteDraft(ctx.projectId, body); // 실패 = throw(서버가 되살림)
+        if (routeSaved.route_id != null) routeId = routeSaved.route_id;
         continue;
       }
-      const own = ctx.steps?.[step];
-      const base = defaultStep(step, ctx.projectId, routeId);
+      if (step === "cross") {
+        if (!routeSaved) await ctx.cross(confirm);
+        else {
+          const outside = await carryAfterRouteSave(ctx.projectId, fromRouteId, routeId);
+          showToast(routeSaveSummary(routeSaved, outside), "info");
+        }
+        continue;
+      }
+      // 노선이 바뀌면 화면 몫 일(옛 노선 판 목록 · 계획고 판)은 건너뛰고 기본 창구만 새 노선으로.
+      const own = routeSaved ? undefined : ctx.steps?.[step];
+      const base = defaultStep(step, ctx.projectId, routeId, fromRouteId);
       const run =
         step === "pipes"
           ? async () => {
@@ -135,12 +199,22 @@ export async function saveDesign(
       await (label ? run().catch(reportOnly(label)) : run());
     }
     clearState("structure-type-cache", ctx.projectId); // 종류별 캐시는 저장 뒤 비움(54-32)
+    saving.delete(ctx.projectId); // 다 나감 — 뒤처리는 새 상세로 그림
+    if (routeSaved) {
+      // 새 노선 — [확정]은 새 노선을 본 뒤 다시(단계 닫기는 새 횡단 본문이 있어야 함) · 페이지 다시 세움.
+      if (confirm)
+        showToast("노선을 저장했습니다 — 새 노선을 확인한 뒤 다시 [확정]하세요.", "info");
+      else await ctx.done?.(false);
+      await rebuildAfterRouteSave(ctx.projectId);
+      return true;
+    }
     await ctx.done?.(confirm);
     return true;
   } catch (error) {
     ctx.failed(error, confirm);
     return false;
   } finally {
+    saving.delete(ctx.projectId);
     hideLoadingOverlay();
   }
 }

A00_Common/design/design_selection.ts

@@ -13,7 +13,7 @@
 
 import { readState, writeState } from "../b_page_state";
 
-/** 관 · 구조물 찾는 거리(m) — 관은 계획선에 스냅돼 측점과 살짝 어긋난다. 이 값이 유일하다. */
+/** 관 · 구조물 찾는 거리(m) — 기준 측점은 정수 m(234-1) · 옛 소수 자료도 같은 자리로 봄. 이 값이 유일하다. */
 export const PIPE_MATCH_M = 0.51;
 
 export interface DesignSelection {

A00_Common/design/design_shared.ts

@@ -21,11 +21,12 @@ import { fetchCurrentRouteId } from "../../B06_Section/B06_Section_Api_Fetch";
 import { createStructuresSection, type StructuresSection } from "../b_structures_section";
 import type { StructuresCallbacks } from "../../B05_Profile/B05_Profile_UI_Structures_Panel_Types";
 import type { RouteProfilePanelCallbacks } from "../../B05_Profile/B05_Profile_UI_Profile_Panel_Types";
-import { drainageSide, drainageSideTool } from "../../B05_Profile/B05_Profile_UI_Profile_SideTool";
+import { drainageSide } from "../../B05_Profile/B05_Profile_UI_Profile_SideTool";
 import { createDesignPanel, type DesignPanel } from "./design_panel";
 import { createDesignProfile, type DesignProfile } from "./design_profile";
-import { attachProfilePopout } from "./design_profile_popout";
+import { attachProfilePopout, attachSubPanelPopouts } from "./design_profile_popout";
 import { saveDesign, type DesignSaveStep } from "./design_save";
+import { markDesignClean } from "./design_leave";
 import { resetDesign } from "./design_reset";
 import type { DesignView } from "./design_dock";
 
@@ -150,12 +151,12 @@ function toAll<K extends keyof RouteProfilePanelCallbacks>(
 /** 종단도 한 벌 — 처음 부를 때 만들어 종단도 자리에 붙인다. */
 export function sharedProfile(shared: DesignPageShared): DesignProfile {
   if (shared.profile) return shared.profile;
-  let sideTool: HTMLElement | null = null;
+  const popoutButton = document.createElement("button");
   const profile = createDesignProfile({
     projectId: shared.projectId,
     view: shared.view(),
     side: drainageSide,
-    sideTool: (board) => (sideTool = drainageSideTool(board)),
+    toolLead: popoutButton,
     onSelectStation: (stationId) => bound(shared).profile?.onSelectStation(stationId),
     onResetAll: () => bound(shared).profile?.onResetAll?.(),
     callbacks: {
@@ -178,7 +179,8 @@ export function sharedProfile(shared: DesignPageShared): DesignProfile {
     },
   });
   shared.profileSlot.append(profile.root);
-  attachProfilePopout(profile, shared.profileSlot, sideTool);
+  attachProfilePopout(profile, shared.profileSlot, popoutButton);
+  attachSubPanelPopouts(profile);
   shared.profile = profile;
   return profile;
 }
@@ -298,7 +300,7 @@ export async function saveSharedDesign(shared: DesignPageShared, confirm: boolea
         ...(side
           ? {
               pipes: async () => {
-                await side.savePipes();
+                await side.savePipes(confirm);
               },
             }
           : {}),
@@ -312,6 +314,7 @@ export async function saveSharedDesign(shared: DesignPageShared, confirm: boolea
         else await profileSave?.cross?.(isConfirm);
       },
       done: async (isConfirm) => {
+        markDesignClean(shared.projectId); // 떠남 확인 — 지금 초안이 저장분(346-4)
         if (isConfirm) {
           showToast(L("B06_Profile_Confirm_Success"), "success");
           goToWorkflowStage(shared.projectId, WORKFLOW_STEP_ROUTES[4]);

A00_Common/design/design_store.ts

@@ -13,14 +13,21 @@
  * `alignmentDraft` 는 등록부 `alignment-draft`(노선 칸)다 — 옛 키(`b05-profile-alignment-draft:{노선}`)
  *   값은 처음 읽을 때 옮겨 받는다. B05 되돌리기(`_Profile_History`)도 이 칸을 사진 찍는다(24-2c).
  *   부르는 쪽이 프로젝트를 모르면(`null`) 지금 연 프로젝트 칸을 쓴다.
+ *
+ * 계산 묶음 칸(344-4 · 모양 = `design_pipeline_types.ts`) — `routeDraft` 는 초안(세션 즉시) ·
+ *   `stations` · `profile` · `footprint` 는 **메모리 우선**(결과가 커서 끌기마다 세션에 쓰지 않음 ·
+ *   멈춘 뒤 `PERSIST_DELAY_MS` 한 번 · 키가 지워지면 메모리도 버림) · `generation` 은 메모리만.
  * ========================================================================== */
 
-import { readState, writeState } from "../b_page_state";
+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 type { StructureInstance } from "../../B05_Profile/B05_Profile_Api_Structures";
 import type { DetailPipeInput } from "../../B04_PreProcess/B04_PreProcess_Api_Fetch";
-import type { AlignmentEdits } from "../../B05_Profile/B05_Profile_UI_Profile_Alignment";
+import type { AlignmentEdits } from "../../B05_Profile/logic/B05_Profile_UI_Profile_Alignment";
 import type { SectionDetailResponse } from "../../B06_Section/B06_Section_Api_Fetch";
+import type { ProfileAlignment } from "../../B05_Profile/logic/B05_Profile_UI_Profile_Alignment";
+import type { PipelineStation, PlanFootprint, RouteDraft } from "./logic/design_pipeline_types";
 
 /** 한 페이지의 두 보기(계획서 24-1). */
 export type DesignView = "profile" | "cross";
@@ -43,6 +50,13 @@ export interface DesignStoreValues {
   sectionDetail: SectionDetailResponse | null;
   /** 고른 측점 · 구조물. */
   selection: DesignSelection | null;
+  /** 노선 초안(노드 · 곡선 · 반경 · 스냅 · 지형 · rev) — 노선 편집기가 놓을 때 씀. */
+  routeDraft: RouteDraft | null;
+  /** 계산 묶음 결과 — 측점(지반 채움) · 종단 · 평면 발자국 · 지금 차례 번호. */
+  stations: PipelineStation[] | null;
+  profile: ProfileAlignment | null;
+  footprint: PlanFootprint | null;
+  generation: number | null;
 }
 
 export type DesignStoreKey = keyof DesignStoreValues;
@@ -100,6 +114,7 @@ function slotOf<K extends DesignStoreKey>(
       write: (value) => writeState("alignment-draft", value, project, routeId),
     };
   }
+  if (key in MEMORY_SLOTS) return memorySlot<V>(key as MemoryKey, projectId);
   // 등록부 이름 — 가게 이름과 캐시 이름이 다른 것만 적는다.
   const name = (
     {
@@ -107,8 +122,9 @@ function slotOf<K extends DesignStoreKey>(
       pipes: "pipes",
       sectionDetail: "section-detail",
       selection: "selection",
+      routeDraft: "route-draft",
     } as const
-  )[key as Exclude<DesignStoreKey, "alignmentDraft">];
+  )[key as Exclude<DesignStoreKey, "alignmentDraft" | MemoryKey>];
   const routeScoped = name === "section-detail";
   if (!projectId || (routeScoped && routeId === null)) {
     return { id: null, read: () => null, write: () => undefined };
@@ -121,6 +137,73 @@ function slotOf<K extends DesignStoreKey>(
   };
 }
 
+/** 메모리 우선 칸 → 등록부 이름(null = 메모리만). */
+const MEMORY_SLOTS = {
+  stations: "design-stations",
+  profile: "design-profile",
+  footprint: "design-footprint",
+  generation: null,
+} as const satisfies Partial<Record<DesignStoreKey, StateName | null>>;
+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 }
+>();
+
+function cancelPersist(storageKey: string): void {
+  const pending = persistTimers.get(storageKey);
+  if (pending) clearTimeout(pending.timer);
+  persistTimers.delete(storageKey);
+}
+
+onStateRemoved((storageKey) => {
+  memory.delete(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}`;
+  if (!projectId || !storageKey) return { id: null, read: () => null, write: () => undefined };
+  return {
+    id: storageKey,
+    read: () => {
+      if (memory.has(storageKey)) return memory.get(storageKey) as T;
+      const stored = name ? readState<T>(name, projectId) : null;
+      if (stored !== null) memory.set(storageKey, stored);
+      return stored;
+    },
+    write: (value) => {
+      if (value === null) {
+        memory.delete(storageKey);
+        cancelPersist(storageKey);
+        if (name) writeState(name, null, projectId);
+        return;
+      }
+      memory.set(storageKey, value);
+      if (!name) return;
+      cancelPersist(storageKey);
+      const write = (): void => {
+        persistTimers.delete(storageKey);
+        writeState(name, memory.get(storageKey) ?? null, projectId);
+      };
+      persistTimers.set(storageKey, { timer: setTimeout(write, PERSIST_DELAY_MS), write });
+    },
+  };
+}
+
 const listeners = new Map<string, Set<(value: unknown) => void>>();
 
 /**

A00_Common/design/design_structure_ford_calc.ts

@@ -16,6 +16,8 @@
  * ========================================================================== */
 
 import { fordSection } from "../../B05_Profile/B05_Profile_UI_Drainage_Facility_Fields";
+import type { SpecForm } from "./design_structure_form";
+import type { SpecContainer, SpecItem } from "./logic/design_structure_spec";
 
 /** 월류 폭(m) → 필요 월류 높이(m) · 0.01 m 올림. 유량 · 폭이 없으면 null. */
 export function fordHeightM(designFlowM3s: number | null, widthM: number): number | null {
@@ -23,6 +25,54 @@ export function fordHeightM(designFlowM3s: number | null, widthM: number): numbe
   return section ? Math.ceil(section.depthM * 100 - 1e-9) / 100 : null;
 }
 
+/**
+ * 월류 폭 ↔ 높이 연동 — 세월교 · 물넘이 포장 한 벌(52-4 · 65-4 · 65-5 · 287-3).
+ *   · 폭을 바꾸면 높이 = 필요 수심 · 높이를 비우거나 그 아래로 넣으면 필요 수심으로.
+ *   · 새 시설(`arm(true)`) 빈 높이 = 유량이 오면 필요 수심(사용자가 넣은 것처럼 — [추가] · [수정]이 읽음).
+ *   · 상자 끝 안내 — 「필요 수심 n 이상」 · 「설계유량 없음 — 수기 입력」(유량이 없으면 손 입력).
+ * `box` = 폭 · 높이 칸이 든 상자 id(세월교 `ford` · 물넘이 `slope`) · `flow` = 담당 유역 설계유량.
+ */
+export function overflowSync(
+  form: () => Pick<SpecForm, "state" | "setValue" | "refresh">,
+  box: string,
+  flow: () => number | null,
+  emit: () => void,
+) {
+  let pending = false;
+  const values = () => form().state()[box]?.[0] ?? {};
+  const width = () => Number(values().width ?? "");
+  const need = (): number | null => fordHeightM(flow(), width());
+  return {
+    arm: (fresh: boolean): void => {
+      pending = fresh;
+    },
+    onChange: (c: SpecContainer, item: SpecItem): void => {
+      if (c.id === box && item.id === "height") pending = false;
+      const want = c.id === box ? need() : null;
+      const height = values().height ?? "";
+      const low = height === "" || !(Number(height) >= (want ?? 0));
+      if (want !== null && (item.id === "width" || (item.id === "height" && low)))
+        form().setValue(box, "height", want.toFixed(2));
+      emit();
+    },
+    /** 유량이 왔거나 시설을 올림 — 새 시설 빈 높이를 채우고 안내를 다시 그림. */
+    fill: (): void => {
+      const want = pending && !values().height ? need() : null;
+      if (want === null) return form().refresh();
+      form().setValue(box, "height", want.toFixed(2));
+      pending = false;
+    },
+    /** 상자 끝 안내 글(폼 `fields` 훅). */
+    fields: (c: SpecContainer): HTMLElement[] => {
+      if (c.id !== box) return [];
+      const hint = document.createElement("p");
+      hint.className = "b05-structure__flow-hint";
+      hint.textContent = fordHeightHint(flow(), width());
+      return [hint];
+    },
+  };
+}
+
 /** 높이 빈 칸 안내. */
 export function fordHeightHint(designFlowM3s: number | null, widthM: number): string {
   const need = fordHeightM(designFlowM3s, widthM);

A00_Common/design/design_structure_form.ts

@@ -22,6 +22,8 @@ import {
   linkOf,
   readState,
   solveSplit,
+  specContainerHidden,
+  specItemHidden,
   TEXT_MAX,
   writeOptions,
   type SpecContainer,
@@ -30,7 +32,7 @@ import {
   type SpecState,
   type SplitRole,
   type StructureSpec,
-} from "./design_structure_spec";
+} from "./logic/design_structure_spec";
 import {
   group,
   grid,
@@ -82,6 +84,8 @@ export interface SpecForm {
     groupNames?: Record<string, string>,
     /** 정의 기본값(저장 키 → 값) — 필수 상자 빈 고르기 칸이 받는 값(54-43). */
     defaults?: Record<string, string | number>,
+    /** 숨긴 옵션 키(정의 「표시」 · 322-2) — 그 키만 쓰는 칸 · 상자는 안 그림(값은 그대로). */
+    hidden?: ReadonlySet<string>,
   ) => void;
   read: () => Record<string, string | number>;
   state: () => SpecState;
@@ -104,6 +108,7 @@ export function createSpecForm(links: SpecLinks | null, hooks: SpecFormHooks = {
   let names: SpecNames = {};
   let groupNames: Record<string, string> = {};
   let defaults: Record<string, string | number> = {};
+  let hidden: ReadonlySet<string> = new Set();
   const recent = new Map<Instance, SplitRole[]>();
   const slots = new Map<string, HTMLElement>();
   const rows: Array<{ key: string; set: (item: SummaryItem | null) => void }> = [];
@@ -235,6 +240,7 @@ export function createSpecForm(links: SpecLinks | null, hooks: SpecFormHooks = {
     }
     const fields = c.items
       .filter((item) => item.kind === "auto" || !item.by || branchOf(item, view))
+      .filter((item) => !specItemHidden(item, hidden))
       .map((item) => {
         const input = control(c, item, view, tags.get(item.id));
         const wrap = labeled(itemLabel(c, item, names), input);
@@ -316,6 +322,7 @@ export function createSpecForm(links: SpecLinks | null, hooks: SpecFormHooks = {
     const fitted: SpecContainer[] = [];
     for (const c of spec?.containers ?? []) {
       const list = (state[c.id] ??= c.required ? [{}] : []);
+      if (specContainerHidden(c, hidden)) continue; // 숨긴 상자 — 값은 그대로(322-2)
       if (fit(c, list)) fitted.push(c);
       shown(c, list).forEach((values, index) => boxes.push(instanceBox(c, values, index)));
       if (c.required || (c.max && list.length >= c.max) || hooks.count?.(c) !== undefined) continue;
@@ -341,9 +348,10 @@ export function createSpecForm(links: SpecLinks | null, hooks: SpecFormHooks = {
 
   return {
     root,
-    write(next, options, nextNames = {}, nextGroups = {}, nextDefaults = {}) {
+    write(next, options, nextNames = {}, nextGroups = {}, nextDefaults = {}, nextHidden) {
       spec = next;
       defaults = nextDefaults;
+      hidden = nextHidden ?? new Set();
       names = nextNames;
       groupNames = nextGroups;
       state = readState(next, options);

A00_Common/design/design_structure_pipe_calc.ts

@@ -11,7 +11,8 @@
 
 import type { CrossSection } from "../../B06_Section/B06_Section_Api_Fetch";
 import { computeStoredLayouts } from "../../B06_Section/B06_Section_Structure_Layouts";
-export { DEFAULT_BASIN_SHAPE } from "../../B06_Section/B06_Section_UI_Cross_Culvert_Basin";
+export { DEFAULT_BASIN_SHAPE } from "../../B06_Section/logic/B06_Section_UI_Cross_Culvert_Basin";
+export { pipeLengthText } from "../../B06_Section/logic/B06_Section_UI_Cross_Culvert_Const"; // 「8 m (7.6)」(225-1)
 import { PIPE_MATCH_M } from "./design_selection";
 
 /** 횡단 측점 목록을 대는 곳 — 횡단 보기가 자료를 받으면 걸어 둠(종단만 연 동안은 없음). */

A00_Common/design/design_structure_status.ts

@@ -0,0 +1,77 @@
+/* =============================================================================
+ * A00_Common/design/design_structure_status.ts
+ * 구조물 현황 한 벌(322-3) — 저장분 둘(관 `pipe_points.json` · 구조물 `structures.json`) + 초안 둘(세션)
+ * → 한 목록(초안이 있으면 초안 · 없으면 저장분 · 종류마다 따로) · 측점 계획 한 벌(`planStations`) →
+ * 종단 측점 목록(B05 종단 · 3D 막대 · B06 종단 띠가 같은 꼴).
+ *
+ * 구조물 id = 구조물은 structure_id · 관은 세션 id(`design_pipe_ids` · 323-5 · 파일 모양 그대로 · 저장 안 함).
+ * ========================================================================== */
+
+import type { IrregularStation } from "../../B05_Profile/B05_Profile_UI_IrregularStations";
+import type { PlannedStation } from "../../common_util/common_util_structure_station";
+import { useDesignStore, type DesignStoreValues } from "./design_store";
+
+/** 현황 — 종류마다 초안이 앞섬(초안 null = 만진 적 없음 · 빈 목록 = 다 지움). */
+export function structureStatus<P, S>(
+  saved: readonly [ReadonlyArray<P>, ReadonlyArray<S>],
+  drafts: readonly [ReadonlyArray<P> | null, ReadonlyArray<S> | null],
+): { pipes: P[]; structures: S[] } {
+  return { pipes: [...(drafts[0] ?? saved[0])], structures: [...(drafts[1] ?? saved[1])] };
+}
+
+/**
+ * 측점 계획 → 종단 측점(측점번호 · 잔여거리 = 간격 기준) — 기준 측점 id = 첫 주인 id(관 = `pipe-…` ·
+ * 구조물 = structure_id) · 시작 · 끝 = `{id}:{역할}`(옮겨도 계획고 편집이 따라감 · 272) · 관 기준 측점 =
+ * 「배관」 꼴(관 끌기 · 지우기 길).
+ */
+export function plannedIrregular(
+  planned: ReadonlyArray<PlannedStation>,
+  intervalM: number,
+): IrregularStation[] {
+  const interval = intervalM > 0 ? intervalM : 20;
+  return planned.map((station) => {
+    const owner = station.owners[0];
+    const pipe = owner.startsWith("pipe-") && station.role === "anchor";
+    const number = Math.floor(station.chainage_m / interval);
+    return {
+      id: station.role === "anchor" ? owner : `${owner}:${station.role}`,
+      station: number,
+      remainder: station.chainage_m - number * interval,
+      chainage_m: station.chainage_m,
+      structure: station.title,
+      ...(pipe ? { structureType: "배관" as const, origin: "pipe" as const } : {}),
+    };
+  });
+}
+
+/**
+ * 바뀜 신호 하나(323-6) — 관 · 구조물 초안을 구독(어느 길로 쓰든 설계 가게 한 곳). 구조물 = 늘 · 관 = 자리 · 종류 ·
+ * 구간 · 잇기가 바뀔 때만(옵션만 고친 것은 폼 길 `applyPipeOptions` 가 그 카드만 고침 — 카드 줌 · 팬 지킴).
+ * 돌려주는 함수로 끊음.
+ */
+export function watchDrafts(projectId: string | null, onChange: () => void): () => void {
+  const shop = useDesignStore(projectId, null);
+  type Pipe = NonNullable<DesignStoreValues["pipes"]>[number];
+  const layout = (pipes: ReadonlyArray<Pipe> | null): string =>
+    JSON.stringify(
+      (pipes ?? []).map((p) => [
+        p.chainage_m,
+        p.facility ?? "pipe",
+        p.start_m ?? null,
+        p.end_m ?? null,
+        p.summary_item ?? null,
+        p.group_items ?? null,
+      ]),
+    );
+  let seen = layout(shop.get("pipes"));
+  const offs = [
+    shop.subscribe("structures", onChange),
+    shop.subscribe("pipes", (pipes) => {
+      const key = layout(pipes);
+      if (key === seen) return;
+      seen = key;
+      onChange();
+    }),
+  ];
+  return () => offs.forEach((off) => off());
+}

A00_Common/design/design_view_cross.ts

@@ -17,10 +17,8 @@ import { leaveForDashboard } from "../b_missing_data_guard";
 import { readByKey, stateKey, writeByKey } from "../b_page_state";
 import { showToast } from "@ui/ui_template_elements";
 import { mountMissingStationNotice } from "../../B06_Section/B06_Section_UI_Missing_Stations";
-import type {
-  StructureInstance,
-  StructureType,
-} from "../../B05_Profile/B05_Profile_Api_Structures";
+import { onStaleStructureTypes } from "../../B05_Profile/B05_Profile_Api_Structures";
+import { pipeIdAt } from "./design_pipe_ids";
 import {
   fetchSectionContext,
   getSections,
@@ -29,6 +27,7 @@ import {
   type StandardCrossSection,
 } from "../../B06_Section/B06_Section_Api_Fetch";
 import { createStationControls } from "../../B06_Section/B06_Section_UI_Page_Station_Controls";
+import { setStationAdjustReload } from "../../B06_Section/B06_Section_Api_Culvert_Options";
 import {
   createCutSlopeStore,
   createRockBoundaryStore,
@@ -37,13 +36,19 @@ import {
 } from "../../B06_Section/B06_Section_UI_Page_Persist";
 import { readStructurePick } from "../../B05_Profile/B05_Profile_UI_Structure_Pick_Session";
 import { NO_SELECTION, PIPE_MATCH_M, selectDesign } from "./design_selection";
-import { readPendingPipes } from "../../B05_Profile/B05_Profile_Api_Pipes_Draft";
+import { paintMapPick } from "./design_pick_profile";
+import { watchDrafts } from "./design_structure_status";
+import { followSwaps, shownDetail } from "../../B06_Section/B06_Section_UI_Page_Station_Swap";
+import { savingDesign } from "./design_save";
 import { applyStructurePick } from "../../B06_Section/B06_Section_UI_Page_Structure_Pick";
+import { bindCrossPick } from "../../B06_Section/B06_Section_UI_Page_Pick_Sync";
 import { createSectionView } from "../../B06_Section/B06_Section_UI_Section_View";
-import { revetFormOf, revetWallSpec } from "../../B06_Section/B06_Section_UI_Cross_Culvert_Const";
+import {
+  revetFormOf,
+  revetWallSpec,
+} from "../../B06_Section/logic/B06_Section_UI_Cross_Culvert_Const";
 import {
   applyPipeOptionsToCache,
-  replayDraftPipeOptions,
   type PipeOptionsContext,
 } from "../../B06_Section/B06_Section_UI_Page_Pipe_Options";
 import {
@@ -131,8 +136,7 @@ export async function mountCrossView(
     );
 
   // 「구조물 배치」 — 종단 보기와 같은 폼 한 벌에 횡단 보기 동작을 건다(계획서 24-3b).
-  let structureMarksSink:
-    ((structures: StructureInstance[], types: StructureType[]) => void) | null = null;
+  let structureMarksSink: Parameters<typeof createB06StructuresPanel>[0]["onMarks"] | null = null;
   /** 관 목록 초안을 고치면 한 벌 배수유역도가 그 초안으로 다시 선다(잇단 조작은 한 번). */
   let pipeReloadTimer = 0;
   let wallAdjustTimer = 0;
@@ -140,12 +144,11 @@ export async function mountCrossView(
     projectId,
     shared,
     // 종단 알약 레인에 같은 목록을 넘긴다 — 종단 보기와 같은 표기(2026-09-07 사용자 지시 4).
-    onMarks: (structures, types) => {
-      structureMarksSink?.(structures, types);
+    onMarks: (structures, types, pipes) => {
+      structureMarksSink?.(structures, types, pipes);
       syncBermSpans(structures);
     },
     // 구조물(C군 벽)이 늘거나 줄면 그 측점 횡단 제원이 달라진다 — 다시 받아 그린다(2026-09-06).
-    onStructuresChanged: () => void refreshDetailForStructures(),
     onPipesWritten: () => {
       window.clearTimeout(pipeReloadTimer);
       pipeReloadTimer = window.setTimeout(() => shared.profile?.side?.reload(), 200);
@@ -191,7 +194,7 @@ export async function mountCrossView(
       if (!isWallSelecting()) focusStationAt(chainageM, revealOnly);
     },
     releaseCard: () => releaseCross(),
-    markStructure: (structureId) => sectionView.selectMark(structureId),
+    markStructure: (structureId, span) => sectionView.selectMark(structureId, span),
     applyPipeOptions: (chainageM, patch) =>
       applyPipeOptionsToCache(pipeOptionsContext, chainageM, patch),
   });
@@ -220,6 +223,7 @@ export async function mountCrossView(
   async function refreshDetailForStructures(): Promise<void> {
     if (!projectId || currentRouteId === null) return;
     const seq = ++structuresRefreshSeq; // 잇단 조작 — 최신 요청만 그림(54-4)
+    if (savingDesign(projectId)) return; // 저장 도중 = 낡은 캐시 · 빈 초안 — 저장 뒤 한 번(323-9)
     try {
       const fresh = await loadSectionDetail(projectId, currentRouteId);
       if (seq !== structuresRefreshSeq) return;
@@ -233,6 +237,7 @@ export async function mountCrossView(
         );
       }
       renderSectionDetail();
+      void reconcileStaleDesigns(); // 구조물 제원 ↔ 저장분 값 다른 측점 다시 셈(측구 · 포장 · 노면 하강 · 314)
     } catch (error) {
       const detail = error instanceof Error ? ` ${error.message}` : "";
       showToast(`구조물을 횡단에 반영하지 못했습니다.${detail}`, "error");
@@ -301,6 +306,7 @@ export async function mountCrossView(
       wallAdjustTimer = window.setTimeout(() => structuresPanel.facility.recount(), 120);
     },
   });
+  setStationAdjustReload(() => stationControls.load()); // 종류 바꿈이 세션을 비운 뒤(318-4)
   // 배관 흙막이 개수 = 유출 단 수(54-1) — 세션 값 우선
   setPipeExtraCountSource((section) => stationControls.extraWalls.countFor(section, "outlet"));
   // 좌측 「추가 흙막이(단)」도 같은 단 수 제어로(54-27) — 사라지는 단을 고른 중이면 유출 벽으로 옮김
@@ -332,7 +338,7 @@ export async function mountCrossView(
     shared,
   );
   // 좌측 목록이 넘겨 준 구조물을 종단 알약 레인으로 보낸다(표시 통일).
-  structureMarksSink = (structures, types) => sectionView.setStructureMarks(structures, types);
+  structureMarksSink = sectionView.setStructureMarks;
   // 계획선 편집(▲/▼)은 종단도 한 벌이 맡는다(계획서 24-2c) — 같은 초안 가게 · 같은 막기 규칙.
 
   // 종단 그래프 우클릭 — 종단 보기와 같은 메뉴로 넣고 뺀다(2026-09-12 사용자). 어느 길로
@@ -341,15 +347,15 @@ export async function mountCrossView(
     addPipe: (chainageM) => structuresPanel.addPipeAt(chainageM),
     removePipe: (chainageM) => structuresPanel.removePipeAt(chainageM),
     addStructureType: (chainageM, typeId) => structuresPanel.addStructureAt(chainageM, typeId),
-    removeStructure: (structureId) => {
-      structuresPanel.removeStructureById(structureId);
-    },
+    removeStructure: (structureId) => void structuresPanel.removeStructureById(structureId),
     movePipe: (fromChainageM, toChainageM) =>
       structuresPanel.movePipeTo(fromChainageM, toChainageM),
     moveStructure: (structureId, toChainageM) => {
       structuresPanel.moveStructureTo(structureId, toChainageM);
     },
     selectStructure: (structureId) => structuresPanel.selectStructure(structureId),
+    selectPipe: (chainageM) => structuresPanel.selectPipeAt(chainageM), // 측점 없는 관(요구 178)
+    pipesChanged: () => (structuresPanel.adoptFordHeights(), void refreshDetailForStructures()),
   });
   // 폼 → 횡단 캐시 반영은 따로 뗀 모듈이 맡는다(2026-09-02 분리).
   const pipeOptionsContext: PipeOptionsContext = {
@@ -387,19 +393,18 @@ export async function mountCrossView(
       : null;
     if (!target) {
       structuresPanel.showAtChainage(null);
-      selectDesign(projectId, NO_SELECTION, { from: "b06" }); // 카드 해제 — 선택도 비운다.
+      releaseCross(); // 카드 다시 누름 = 풀기 한 길(범위 테두리 · 형상까지 · 233-2)
       return;
     }
-    const owner = isWallSelecting() ? stationControls.structureSpan.ownerOf(target) : null;
     const preferred = structuresPanel.preferred() !== null;
-    const opened = structuresPanel.showAtChainage(owner?.chainage_m ?? target.chainage_m);
+    const opened = structuresPanel.showAtChainage(structureSelection.formChainageOf(target));
     // 카드 하나 고름 = 그 측점(구조물 id 는 목록 · 알약 · 넘김이 고른 것만 · 189-1)
     const picked = preferred ? opened : { chainageM: opened.chainageM, structureId: null };
     if (!isWallSelecting()) selectDesign(projectId, picked, { from: "b06" });
     // 카드 고름은 그 카드 측점선으로 알약을 맞춤 — 일반 측점 구조물 · 옆 측점 이음 카드면
     // 알약이 꺼지므로 연 것으로 다시 세움(관 알약 id = pipe-측점 · 53-1)
     const pipeAt = structuresPanel.currentChainage();
-    const mark = opened.structureId ?? (pipeAt === null ? null : `pipe-${pipeAt.toFixed(2)}`);
+    const mark = opened.structureId ?? (pipeAt === null ? null : pipeIdAt(pipeAt, projectId));
     sectionView.selectMark(mark, false); // 측점 고름 = 카드 하나(137-4) · 덮는 것 없으면 알약 · 강조 풂(152-5)
     structureSelection.syncInletStructure();
     // 카드만 고른 경우엔 구조물(벽·구체) 선택을 비운다 — 조정창이 저절로 뜨면 안 된다
@@ -474,16 +479,11 @@ export async function mountCrossView(
       handoff,
       sectionDetail,
       {
-        // 넘겨받은 구조물 id 가 그 측점 관보다 먼저다(52-15).
-        focusStation: (stationId) => {
-          structuresPanel.prefer(handoff?.structureId ?? null);
-          sectionView.focusStation(stationId);
-          structuresPanel.prefer(null);
-          // 그 카드가 이미 골라져 있으면 카드 고름이 안 돌아 폼이 옛 것으로 남음 — id 로 직접 엶(53-1)
-          const sid = handoff?.structureId;
-          if (sid && structuresPanel.getStructures().some((entry) => entry.structure_id === sid))
-            structuresPanel.selectStructure(sid);
-        },
+        // 넘겨받은 구조물 id 가 먼저(52-15) · 폼은 id 로 직접(53-1) · 측점 없는 구조물은 카드 · 스크롤 없음(307)
+        focusStation: (stationId) =>
+          structuresPanel.focusPicked(handoff?.structureId ?? null, () =>
+            sectionView.focusStation(stationId),
+          ),
         refreshCard: (chainageM) => sectionView.refreshCard(chainageM),
         revetSelect: (chainageM, key) => stationControls.revetOffset.select(chainageM, key),
         fordSelect: (chainageM, role) => stationControls.ford.select(chainageM, role),
@@ -494,23 +494,21 @@ export async function mountCrossView(
     if (applied) appliedPick = signature;
   }
 
-  /** 고름을 다 풂(54-38) — 카드 · 벽 · 세월교 · BOX 강조 · 넘김 되얹기 표시 · 선택 칸. */
+  // 횡단 보기 강조 = 고름 한 칸 구독 · 다른 곳(Esc 등)이 바꾼 값으로 다시 세움(233-2)
+  const crossPick = bindCrossPick(projectId, host, {
+    sections: () => sectionDetail?.cross_sections ?? [],
+    controls: stationControls,
+    releaseForm: () => structuresPanel.showAtChainage(null),
+    view: sectionView,
+    reapply: () => {
+      appliedPick = null;
+      restoreStructurePick();
+    },
+    paintMap: (selection) => shared.profile?.side && paintMapPick(shared.profile.side, selection),
+  });
+  /** 고름을 다 풂(54-38) — 강조 모두 끄고 넘김 되얹기 표시 · 선택 칸 비움(풀기 한 길 · 233-2). */
   function releaseCross(): void {
-    const { revetOffset, ford, box } = stationControls;
-    const lit = (sectionDetail?.cross_sections ?? []).filter(
-      (s) =>
-        revetOffset.highlightFor(s) ||
-        ford.selectedFor(s.chainage_m) ||
-        box.selectedFor(s.chainage_m),
-    );
-    for (const s of lit) {
-      if (revetOffset.selectedFor(s)) revetOffset.select(s.chainage_m, null);
-      if (ford.selectedFor(s.chainage_m)) ford.select(s.chainage_m, null);
-      if (box.selectedFor(s.chainage_m)) box.select(s.chainage_m, null);
-    }
-    structuresPanel.releasePipe();
-    sectionView.focusStation(null);
-    sectionView.refreshCards(lit.map((s) => s.chainage_m));
+    crossPick.release();
     appliedPick = null;
     selectDesign(projectId, NO_SELECTION, { from: "b06" });
   }
@@ -520,7 +518,7 @@ export async function mountCrossView(
     showSectionView();
     // 높이 배율은 항상 1(2026-08-06 사용자 지시 — 옵션 폐지).
     sectionView.render(
-      sectionDetail,
+      shownDetail(projectId, sectionDetail), // 노선 초안 동안 = 새 노선 횡단(346-2 덧 3)
       1,
       crossHalfWidth(),
       stationInterval,
@@ -543,6 +541,7 @@ export async function mountCrossView(
     // 저장 직전 전 측점 재계산 — 표준단면·계획선을 고친 뒤 안 만진 측점이 옛 면적으로
     // 실려 나가던 자리(2026-09-09 실측).
     reconcileDesigns: () => reconcileStaleDesigns({ force: true }),
+    redraw: () => (host.visible() ? refreshDetailForStructures() : Promise.resolve()),
     patchSources: () => ({
       rockOffsets: rockStore.offsets,
       cutSlopeRatios: cutSlopeStore.ratios,
@@ -568,8 +567,14 @@ export async function mountCrossView(
     // 종단 보기에서 고름을 풀었으면 횡단 강조도 풂(54-38)
     if (!readStructurePick(projectId)) releaseCross();
     void structuresPanel.load().then(restoreStructurePick);
-    void refreshDetailForStructures().then(() => reconcileStaleDesigns());
+    void refreshDetailForStructures(); // 안에서 낡은 설계도 맞춤(314)
   });
+  // 탭이 다시 보일 때 정의 판이 바뀌었으면 종류 · 패널 다시 읽음(322-0)
+  const reloadPanel = (): void => void structuresPanel.load().then(restoreStructurePick);
+  host.onDispose(onStaleStructureTypes(() => host.visible() && reloadPanel()));
+  // 바뀜 신호 하나(323-6 · `watchDrafts`) — 초안이 어느 길로 바뀌든 보일 때 카드 · 그림 다시(옛 되부름 갈음)
+  host.onDispose(watchDrafts(projectId, () => host.visible() && void refreshDetailForStructures()));
+  host.onDispose(followSwaps(projectId, () => currentRouteId, host, refreshDetailForStructures));
   host.onDispose(() => {
     window.clearTimeout(pipeReloadTimer);
     window.clearTimeout(wallAdjustTimer);
@@ -669,8 +674,6 @@ export async function mountCrossView(
     bindPipeOptions(shared, (chainageM, patch) =>
       applyPipeOptionsToCache(pipeOptionsContext, chainageM, patch),
     );
-    // 새로고침 뒤 캐시 상세는 저장분 — 저장 전에 고친 관 옵션을 초안에서 다시 얹는다(24-7a).
-    replayDraftPipeOptions(pipeOptionsContext, readPendingPipes(projectId));
     renderSectionDetail();
     // 측점이 없는 구조물 알림 — 관을 나중에 놓으면 그 측점이 안 생겨 수량에서 조용히 빠진다
     // (계획서 3-14 ㉯). 만드는 것은 사용자가 누를 때만.

A00_Common/design/design_view_profile.ts

@@ -1,44 +1,35 @@
 /* =============================================================================
  * design_view_profile.ts
- * 한 페이지의 **종단 보기**(계획서 24-3b) — 가운데 위 칸 = 3D 화면. 좌측 패널 · 아래 단추 ·
+ * 한 페이지의 **종단 보기**(계획서 24-3b) — 가운데 위 칸 = 평면(노선 편집 · 345-3) · 3D 화면은
+ * [3D] 큰 모달(345-2). 좌측 패널 · 아래 단추 ·
  * 종단도(유토곡선 · 배수유역도)는 한 벌(`design_shared`)을 횡단 보기와 같은 노드로 쓴다.
  *
  * 여기서는 종단 보기 몫만 건다 — 3D · 좌측 종단 칸 재료 · 구조물 다리 · 종단도 알림 · 저장 몫.
  * (옛 `B05_Profile_UI_Page.ts` 의 본체다. 버튼 동작은 `_Page_Actions`, 최신 노선 캐시는
- * `_Page_Latest`, 3D 측점 바는 `_Page_Stations`, 숨김 · 보임은 `_Page_Life` 가 맡는다.)
+ * `_Page_Latest`, 3D 측점 바는 `_Page_Stations`, 숨김 · 보임은 `_Page_Life` 가 맡는다.
+ * 노선 · 종단면 그리기는 `design_view_profile_sections`, 3D 몫은 `design_view_profile_3d`.)
  * ========================================================================== */
 
 import { showToast } from "@ui/ui_template_elements";
 import { purgeOtherProjects } from "../b_asset_cache";
 import { createProgressCircle } from "@ui/ui_template_progress";
-import {
-  fetchConfirmedSurface,
-  type SurfaceConfirmedResponse,
-} from "../../B04_PreProcess/B04_PreProcess_Api_Fetch";
-import {
-  clearRouteLatestCache,
-  updateContourInterval,
-  type RouteLatestResponse,
-} from "../../B05_Profile/B05_Profile_Api_Fetch";
+import { fetchConfirmedSurface } from "../../B04_PreProcess/B04_PreProcess_Api_Fetch";
+import { clearRouteLatestCache } from "../../B05_Profile/B05_Profile_Api_Fetch";
 import { createRoutePanel } from "../../B05_Profile/B05_Profile_UI_Panel";
 import { createRouteProfilePanel } from "../../B05_Profile/B05_Profile_UI_Profile_Panel";
 import { leaveForDashboard } from "../b_missing_data_guard";
 import { currentRoute, remountRoute } from "../router";
-import { openRouteEditModal } from "../../B05_Profile/B05_Profile_UI_RouteEdit";
+import { mountRouteEditor } from "../../B05_Profile/B05_Profile_UI_RouteEdit";
+import { routeDraftBridge } from "./design_pipeline_page";
 import { createSelectionSync, graphTargetAt } from "../../B05_Profile/B05_Profile_UI_Selection";
 import {
   readStructurePick,
   restoreStructurePick,
   wireStructurePick,
 } from "../../B05_Profile/B05_Profile_UI_Structure_Pick_Session";
-import {
-  coversAtStation,
-  NO_SELECTION,
-  nearestWithin,
-  readSelection,
-  selectDesign,
-} from "./design_selection";
+import { coversAtStation, NO_SELECTION, readSelection, selectDesign } from "./design_selection";
 import type { DesignPageHost } from "./design_page";
+import { bindProfilePick } from "./design_pick_profile";
 import {
   bindDesignView,
   designReady,
@@ -46,7 +37,6 @@ import {
   type DesignPageShared,
 } from "./design_shared";
 import { bindProfileViewLife } from "../../B05_Profile/B05_Profile_UI_Page_Life";
-import { structureAnchorM } from "../../B05_Profile/B05_Profile_Api_Structures";
 import { createStructuresBridge } from "../../B05_Profile/B05_Profile_UI_Page_Structures";
 import { createRouteViewer } from "../../B05_Profile/B05_Profile_UI_Viewer";
 import {
@@ -57,24 +47,18 @@ import {
   rememberRockBoundaryDefault,
   rememberStandardDefaults,
 } from "../../B06_Section/B06_Section_UI_Standard_Panel";
+import { fetchSectionContext } from "../../B06_Section/B06_Section_Api_Fetch";
+import { invalidateSectionDetail } from "../../B06_Section/B06_Section_Section_Store";
 import {
-  fetchSectionContext,
-  type SectionDetailResponse,
-} from "../../B06_Section/B06_Section_Api_Fetch";
-import { loadSectionDetail } from "../../B06_Section/B06_Section_Section_Store";
-import { migrateLegacyStations } from "../../B05_Profile/B05_Profile_Api_Structures";
+  onStaleStructureTypes,
+  structureAnchorM,
+} from "../../B05_Profile/B05_Profile_Api_Structures";
 import { pipeToFacilityItem } from "../../B05_Profile/B05_Profile_UI_Structures_Panel_Types";
-import {
-  loadCorridorIfFresh,
-  refreshCorridor,
-  saveCorridorIfDirty,
-} from "../../B05_Profile/B05_Profile_UI_Corridor";
 import {
   profileSaveParts,
   type PageActionContext,
 } from "../../B05_Profile/B05_Profile_UI_Page_Actions";
-import { createLatestSource, panelValuesOf } from "../../B05_Profile/B05_Profile_UI_Page_Latest";
-import { stationLinesOf } from "../../B05_Profile/B05_Profile_UI_Page_Stations";
+import { createLatestSource } from "../../B05_Profile/B05_Profile_UI_Page_Latest";
 import { setPipeCrossOpener, setPipeSectionsSource } from "./design_structure_pipe_calc";
 import type { RouteProfilePanelCallbacks } from "../../B05_Profile/B05_Profile_UI_Profile_Panel_Types";
 import "../../B05_Profile/B05_Profile_UI_Style.css";
@@ -82,18 +66,19 @@ import "../../B05_Profile/B05_Profile_UI_Style.css";
 import "../../B05_Profile/B05_Profile_UI_Style_Table.css";
 import "../../B05_Profile/B05_Profile_UI_Style_Drainage.css";
 import "../../B05_Profile/B05_Profile_UI_Style_Structures.css";
+import { movePipeId, pipeIdAt } from "./design_pipe_ids";
+import { useDesignStore } from "./design_store";
+import { followPipeReports } from "../../B05_Profile/logic/B05_Profile_Pipeline_Follow";
+import { STRUCTURE_ROUTE_DRIFT_MAX_M } from "../../common_util/common_util_route_follow";
 import {
   DEFAULT_ROAD_WIDTHS,
   fetchRoadWidths,
   loadUphillOverrides,
-  restorePoints,
   saveUphillOverrides,
-  toBounds,
   toGradeClass,
 } from "../../B05_Profile/B05_Profile_UI_Page_Helpers";
-
-/** 구 구조물 측점 이관을 이미 시도한 노선 — 탭 수명 동안 유지한다. */
-const migratedRoutes = new Set<string>();
+import { createProfileSections, type ProfileViewState } from "./design_view_profile_sections";
+import { createProfile3d } from "./design_view_profile_3d";
 
 type PipeReport = Parameters<NonNullable<RouteProfilePanelCallbacks["onPipesChanged"]>>[0];
 
@@ -121,24 +106,51 @@ export async function mountProfileView(
     });
   /** 배수유역도가 마지막으로 알린 관 목록 — 숨어 있다 다시 보일 때 폼 · 3D 에 다시 싣는다. */
   let lastPipes: PipeReport | null = shared.lastPipes ?? null;
-  const applyPipes = (pipes: PipeReport): void => {
+  const designStore = useDesignStore(activeProjectId, null);
+  /** 화면 관 목록 = 배수유역도 알림을 가게 관 초안 측점으로(노선 따라 다시 매김 · 349-0d) · 관 id 도 옮김. */
+  let lastShown: PipeReport = [];
+  const shownPipes = (pipes: PipeReport): PipeReport => {
+    const byChainage = (x: PipeReport[number], y: PipeReport[number]) =>
+      x.chainage_m - y.chainage_m;
+    const shown = followPipeReports(pipes, designStore.get("pipes")).sort(byChainage);
+    const before = [...lastShown].sort(byChainage);
+    if (before.length === shown.length)
+      shown.forEach((pipe, i) => {
+        if (Math.abs(pipe.chainage_m - before[i].chainage_m) > 0.005)
+          movePipeId(before[i].chainage_m, pipe.chainage_m, activeProjectId);
+      });
+    lastShown = shown;
+    return shown;
+  };
+  const applyPipes = (reported: PipeReport, carryEdits = true): void => {
+    const pipes = shownPipes(reported);
     // 횡단배수는 계획선을 그 지점에 물리는 시설이라 그래프 세로 점선·계획고 틸팅
     // 버튼이 필요하다(2026-08-17 사용자 지시). 알약 레인은 종류·선택을 맡는다.
-    bridge.setPipes(pipes);
+    bridge.setPipes(pipes, carryEdits);
     panel.structures.setPipeFacilities(pipes.map(pipeToFacilityItem));
     profilePanel.setMinCoverPipes(pipes);
+    snapOld();
     restorePick(); // 관 목록이 실린 뒤라야 폼이 그 시설을 찾는다.
   };
+  /** 노선을 놓아 계산 묶음이 가게 관 · 구조물 측점을 다시 매김(되돌림 포함) — 목록 · 알약 · 측점선. */
+  const followFacilities = (far: number): void => {
+    if (far)
+      showToast(
+        `구조물 ${far}건이 새 노선에서 ${STRUCTURE_ROUTE_DRIFT_MAX_M} m 넘게 멀어짐`,
+        "warning",
+      );
+    if (!host.visible()) return;
+    if (lastPipes) applyPipes(lastPipes, false);
+    bridge.takeStructures(designStore.get("structures"));
+  };
   /** 측점선 강조 — 측점선이 없는 관 시설(물넘이포장 · 비정규 측점 아님)은 알약을 id 로 켬(53-2) ·
    *  관도 없는 자리면 그 측점선 · 3D 띠(횡단에서 고른 일반 측점 · 188-1) — 구조물 고름은 선 없음(189-1). */
   const selectGraphAt = (id: string | null, chainageM: number | null): void => {
     const structurePick = !!readSelection(activeProjectId)?.structureId;
-    const sections = structurePick ? [] : (currentSectionDetail?.cross_sections ?? []);
+    const sections = structurePick ? [] : (state.detail?.cross_sections ?? []);
     const target = graphTargetAt(id, chainageM, lastPipes ?? [], sections);
-    if ("pipeChainageM" in target) {
-      profilePanel.setSelectedStructure(`pipe-${target.pipeChainageM.toFixed(2)}`);
-      return;
-    }
+    if ("pipeChainageM" in target)
+      return profilePanel.setSelectedStructure(pipeIdAt(target.pipeChainageM, activeProjectId));
     profilePanel.setSelectedStation(target.stationId);
     if (id === null && target.stationId !== null) viewer.markers.selectStation(target.stationId);
   };
@@ -154,7 +166,7 @@ export async function mountProfileView(
     {
       // 계획선 편집 프리뷰가 횡단 설계선을 갱신해도 3D는 **자동으로 따라오지 않는다**
       // (2026-09-01 사용자 지시). 갱신은 상단 [3D 업데이트] 버튼으로 모았다.
-      onCrossDesignsUpdated: () => panel.setCorridorPending(true),
+      onCrossDesignsUpdated: () => sections.setCorridorPending(true),
       // 관 매설 목록 → 그래프 배관 측점선·통합 목록을 한 방향으로 맞춘다. 정본은 배수유역도의
       // 관 지점이다. 숨어 있을 때는 담아만 두고 다시 보일 때 싣는다(폼은 한 벌이라 횡단 보기 몫).
       onPipesChanged: (pipes) => {
@@ -173,13 +185,15 @@ export async function mountProfileView(
         panel.structures.addAt(chainage, LEGACY_TYPE_IDS[type] ?? "etc"),
       onIrregularSelect: (station) => syncIrregularSelection(irregularStationId(station.id)),
       // 배수유역도에서 유역·관 마커를 고르면 그 관의 측점을 그래프·3D·사이드 패널에서도 고른다.
-      onBasinSelected: (chainageM) => selectStationOfPipe(chainageM),
-      onPipeSelected: (chainageM) => selectStationOfPipe(chainageM),
+      onBasinSelected: (chainageM) => pickFromMap(chainageM),
+      onPipeSelected: (chainageM) => pickFromMap(chainageM),
       // 구조물 알약 — 그래프에서 고르면 사이드 폼도 같은 항목을 연다. 계곡 통과 시설
       // (가상 id `pipe-*`)은 관 정본 소관이라 누가거리로 되돌려 보낸다(2026-08-17).
       onStructureSelect: (structureId) => {
         const chainage = bridge.pipeMarkChainage(structureId);
-        rememberPick(bridge.markChainage(structureId), chainage === null ? structureId : null);
+        // 측점 없는 관(물넘이포장)은 알약 id 도 남김 — 같은 m 일반 측점선을 안 켬(요구 178)
+        const keepId = chainage === null || bridge.stationlessPipeMark(structureId);
+        rememberPick(bridge.markChainage(structureId), keepId ? structureId : null);
         if (chainage !== null) {
           panel.structures.selectPipeByChainage(chainage);
           selectStationOfPipe(chainage);
@@ -199,19 +213,20 @@ export async function mountProfileView(
     },
   );
 
-  /** 확정 지표면 — 모델 id 와 3D 로딩에 필요한 범위만 들고 있는다(2026-09-06 호출 정리). */
-  let confirmedSurface: SurfaceConfirmedResponse | null = null;
-  let latest: RouteLatestResponse | null = null;
-  let roadWidths = DEFAULT_ROAD_WIDTHS;
-  let currentSectionDetail: SectionDetailResponse | null = null;
+  const state: ProfileViewState = {
+    confirmedSurface: null,
+    latest: null,
+    roadWidths: DEFAULT_ROAD_WIDTHS,
+    detail: null,
+    corridorVisible: true,
+    corridorPending: false,
+    routeReady: false,
+    restoring: true,
+  };
   // 배관 관 길이 · 흙막이 개수(54-1) — 종단 보기도 같은 횡단 자료로(B05 = B06)
-  setPipeSectionsSource(() => currentSectionDetail?.cross_sections ?? null);
+  setPipeSectionsSource(() => state.detail?.cross_sections ?? null);
   // 좌측 단 수를 바꾸면 횡단 보기를 숨긴 채 세워 같은 단 수 제어로 씀(54-27)
   setPipeCrossOpener(() => shared.ensureView("cross"));
-  /** [예상형상] 표시 상태 — 측점 바를 계획고 위로 올릴지 판단한다(패널 기본 ON). */
-  let corridorVisible = true;
-  let routeReady = false;
-  let restoring = true;
   // 선택 동기화 재진입 가드(3D↔그래프↔사이드바 상호 갱신의 무한 재귀 차단).
   let selectionSyncing = false;
 
@@ -220,7 +235,7 @@ export async function mountProfileView(
    * 저장 시 uphill_overrides로 백엔드/DB(종단 정본)에 병합한다(3D 구슬 입력은 176-3 에서 지움). */
   const uphillOverrides = loadUphillOverrides(activeProjectId);
 
-  const { syncIrregularSelection, syncBasinHighlight, selectStationOfPipe } = createSelectionSync({
+  const { syncIrregularSelection, selectStationOfPipe } = createSelectionSync({
     stations: () => bridge.irregularStations(),
     isSyncing: () => selectionSyncing,
     setSyncing: (value) => {
@@ -239,14 +254,28 @@ export async function mountProfileView(
     markStation: (chainageM) => profilePanel.drainage.markStation(chainageM),
     selectStructure3D: (chainageM) => viewer.structurePick.selectAtChainage(chainageM),
     regularChainage: (stationId) =>
-      currentSectionDetail?.cross_sections.find((entry) => entry.station_id === stationId)
-        ?.chainage_m,
+      state.detail?.cross_sections.find((entry) => entry.station_id === stationId)?.chainage_m,
     remember: (chainageM) => rememberPick(chainageM, null),
   });
 
+  /** 배수유역도 유역 · 관 고름도 고름 한 칸에(사슬 도중 되울림은 안 적음 · 233-3). */
+  const pickFromMap = (chainageM: number | null): void => {
+    if (!selectionSyncing) rememberPick(chainageM, null);
+    selectStationOfPipe(chainageM);
+  };
+
+  let oldSnapped = false;
+  /** 옛 소수 측점(관 · 구조물)을 정수 m 로 — 관 · 구조물 · 계획고 편집이 다 실린 뒤 한 번(272-4). */
+  function snapOld(): void {
+    if (oldSnapped || state.restoring || !lastPipes) return;
+    oldSnapped = true;
+    panel.structures.snapOld();
+  }
+
   /** 세션에 남은 구조물 선택을 되살린다 — 횡단 보기에서 고른 것도 그대로 이어 받는다
    *  (2026-09-04). 이미 무언가 골라져 있으면 건드리지 않는다. */
   function restorePick(): void {
+    profilePick.paint(); // 관 · 구조물 목록이 바뀐 뒤에도 종단은 고름 한 칸대로(233-1)
     if (panel.structures.hasSelection()) return;
     const pick = viewer.structurePick;
     restoreStructurePick(pick, activeProjectId, panel.structures, selectStationOfPipe);
@@ -254,58 +283,31 @@ export async function mountProfileView(
 
   const latestSource = createLatestSource(activeProjectId);
   const loadLatest = latestSource.load;
+  const sections = createProfileSections({
+    projectId: activeProjectId,
+    state,
+    viewer,
+    panel: () => panel,
+    profilePanel: () => profilePanel,
+    bridge: () => bridge,
+    visible: () => host.visible(), // 숨은 동안 갈아끼운 상세(346-2)는 다시 보일 때 그림
+  });
+  host.onDispose(sections.stopSwap);
+  const { restorePanel, renderLatest, restoreSections } = sections;
+  const view3d = createProfile3d({
+    projectId: activeProjectId,
+    state,
+    viewer,
+    host,
+    latestSource,
+    profilePanel: () => profilePanel,
+    sections: () => sections,
+  });
 
   const panel = createRoutePanel(
     {
-      // 계획노선 편집 — 모달 [확인]에서 서버가 배수유역부터 다시 계산하고 그 결과가 새 초기값이
-      // 된다. 옛 노선 캐시는 모달이 비우고, 페이지는 통째로 다시 읽는다 — 제자리 다시 세우기는
-      // 옛 노선 관 목록 등 메모리 · 진행 중 요청이 살아남아 [저장]에 실렸다(PLAN 77).
-      onEditPlannedRoute: () =>
-        void openRouteEditModal(activeProjectId, () => location.reload(), {
-          // 측점 눈금 간격은 좌측 패널이 쥔 값을 그대로 넘긴다 — 모달이 따로 굳히지 않는다.
-          stationIntervalM: panel.values().stationInterval ?? undefined,
-          // 바탕 등고선 — 확정 지표면이 있으면 모달이 LAS 등고선을 쓴다(계획서 0-9 ⑥).
-          surfaceModelId: confirmedSurface?.model_id ?? null,
-          contourIntervalM: latest?.surface_params.contour_interval_m,
-          smooth: latest?.surface_params.smooth,
-        }),
-      onContourApply: (interval) => applyContours(interval),
-      onSurfaceVisible: viewer.setSurfaceVisible,
-      onCorridorVisible: (visible) => {
-        corridorVisible = visible;
-        viewer.setCorridorVisible(visible);
-        // 측점 바 기준면이 바뀐다(예상형상 위 ↔ 원지반 위) — 다시 그린다.
-        if (currentSectionDetail) renderStationLines(currentSectionDetail);
-      },
-      onContoursVisible: viewer.setContoursVisible,
-      onAxesVisible: viewer.setAxesVisible,
-      onStationLinesVisible: viewer.setStationLinesVisible,
-      onStationLabelsVisible: viewer.setStationLabelsVisible,
-      onSurfaceGrayscale: viewer.setSurfaceGrayscale,
-      onView: viewer.setView,
-      onResetView: () => viewer.setView("top"),
-      onProjection: viewer.setProjection,
-      // [3D 업데이트](2026-09-01) — 밀린 계획선 편집을 예상형상·측점선에 한 번에 반영한다.
-      onCorridorRefresh: async () => {
-        if (!currentSectionDetail || !latest?.route?.id) return;
-        const routePoints = latest.route_points ?? [];
-        if (routePoints.length <= 1) return;
-        await refreshCorridor(
-          viewer,
-          activeProjectId,
-          latest.route.id,
-          currentSectionDetail,
-          routePoints,
-          profilePanel.alignmentSamples() ?? undefined,
-        );
-        // 측점 바·라벨·램프도 계획고를 따라 움직여야 한다(2026-08-23 지적 ③).
-        renderStationLines(currentSectionDetail);
-        // 만든 것을 **바로 올려 둔다**(2026-09-06) — 다음 진입이 네트워크 없이 선다.
-        void saveCorridorIfDirty(activeProjectId, latest.route.id);
-      },
-      onMovePoint: viewer.beginMoveSelected,
-      onDeletePoint: viewer.markers.deleteSelected,
-      onRadiusChange: (radius) => viewer.markers.updateSelected({ radius_m: radius }),
+      onContourApply: (interval) => view3d.applyContours(interval),
+      ...view3d.viewCallbacks,
       onInputChange: markStale,
       onStationDisplayChange: (offset) => profilePanel.setStationDisplay(offset),
       onStructuresChange: (next) => bridge.applyStructures(next),
@@ -318,210 +320,77 @@ export async function mountProfileView(
         forwardPipeOptions(shared, from, attributes.options as Record<string, number | string>);
       },
       onPipeFacilityRemove: (chainage) => profilePanel.drainage.removePipe(chainage),
+      // 목록 고름(null = 다시 누름 해제)도 고름 한 칸에 — 종단 · 3D · 배수유역도는 구독이 그 값으로 그림(233-3)
       onPipeFacilitySelect: (chainage) => {
-        rememberPick(chainage, null); // 목록 선택도 횡단 보기로 이어진다.
-        if (selectionSyncing) return;
-        selectionSyncing = true;
-        try {
-          // null = 사이드 재클릭 해제 — 그래프·3D·배수유역도 선택도 함께 푼다(2026-08-18).
-          const station =
-            chainage === null
-              ? undefined
-              : nearestWithin(bridge.irregularStations(), chainage, (entry) => entry.chainage_m);
-          const id = station ? irregularStationId(station.id) : null;
-          viewer.markers.selectStation(id);
-          selectGraphAt(id, chainage);
-          syncBasinHighlight(id);
-          // 배수유역 마커 선택 + 부속 옵션 폼도 연다(2026-08-17 전역 선택 동기화).
-          profilePanel.drainage.selectPipeAtChainage(chainage);
-          viewer.structurePick.selectAtChainage(chainage); // 3D 도 따라옴(53-2)
-        } finally {
-          selectionSyncing = false;
-        }
+        rememberPick(chainage, null);
+        if (!selectionSyncing) profilePick.paint();
       },
+      onListRelease: () => rememberPick(null, null), // 목록 다시 누름 = 풀기 한 길(233-3)
       onStructureSelect: (structure) => {
         // 목록에서 고른 구조물도 횡단 보기로 이어진다 — 해제(null)는 여기서 적지 않는다(관 폼을
         // 여는 길이 구조물 폼을 먼저 비우며 이 콜백을 null 로 부르기 때문).
         if (structure) rememberPick(structureAnchorM(structure), structure.structure_id ?? null);
-        if (selectionSyncing) return;
-        selectionSyncing = true;
-        try {
-          profilePanel.setSelectedStructure(structure?.structure_id ?? null);
-          viewer.structurePick.selectAtChainage(structure ? structureAnchorM(structure) : null);
-        } finally {
-          selectionSyncing = false;
-        }
+        // 폼이 닫혀도(저장 뒤 · 관 폼으로) 종단 · 3D 는 고름 한 칸대로(233-1 · 233-2)
+        if (!selectionSyncing) profilePick.paint();
       },
     },
     shared,
   );
 
-  wireStructurePick(viewer.structurePick, activeProjectId, panel.structures, selectStationOfPipe);
+  // 3D 부재 고름도 측점 고름과 같은 거름 — 노면공 id 를 고름 한 칸에 적지 않음(231-1)
+  wireStructurePick(
+    viewer.structurePick,
+    activeProjectId,
+    panel.structures,
+    selectStationOfPipe,
+    (entry) => coversAtStation(bridge.typeGroup(entry.type_id)),
+  );
 
   /** 입력·마커 변경 시 측점 라인만 다시 그린다. 지형 구분·등급·기울기 세부 입력은 종단 그래프의
    *  위반 판정 기준까지 **즉시** 갈아 끼운다(2026-08-19 사용자 지시 6). */
   function markStale(): void {
-    if (restoring || !routeReady) return;
+    if (state.restoring || !state.routeReady) return;
     profilePanel.setGradeLimit(panel.gradeLimitPct());
     // 횡단배수 최소고 강제 체크는 재계산 없이 편집 가드에만 즉시 반영된다(2026-09-01).
     profilePanel.setEnforceMinCover(panel.values().enforcePipeClearance);
-    if (currentSectionDetail) renderStationLines(currentSectionDetail);
+    sections.redrawStationLines();
   }
 
   viewer.markers.onChange(markStale);
-  viewer.markers.onSelectionChange(panel.setSelected);
   viewer.markers.onStationSelectionChange((stationId) => {
     profilePanel.setSelectedStation(stationId);
     syncIrregularSelection(stationId);
   });
   viewer.root.append(panel.viewControls);
 
-  function restorePanel(next: RouteLatestResponse): void {
-    panel.restore(panelValuesOf(next));
-    viewer.markers.setPoints(restorePoints(next));
-  }
-
-  function renderStationLines(detail: SectionDetailResponse): void {
-    const lines = stationLinesOf({
-      detail,
-      irregular: bridge.irregularStations(),
-      routePoints: latest?.route_points ?? [],
-      liveSamples: profilePanel.alignmentSamples(),
-      corridorVisible,
-    });
-    viewer.renderStationLines(lines, roadWidths[panel.values().gradeClass] / 2);
-  }
-
   /** 구조물·계곡 통과 시설을 사이드 목록·그래프·3D에 맞추는 다리(정본 저장까지 맡는다). */
   const bridge = createStructuresBridge({
     projectId: activeProjectId,
     panel: () => panel,
     profilePanel: () => profilePanel,
-    renderStationLines: () => {
-      if (currentSectionDetail) renderStationLines(currentSectionDetail);
-    },
-    isRestoring: () => restoring,
+    renderStationLines: () => sections.redrawStationLines(),
+    isRestoring: () => state.restoring,
   });
+  // 종단도 · 3D 강조 = 고름 한 칸에서 파생 · 이 보기가 보일 때만(횡단 보기는 제 규칙 · 233-1 · 233-2)
+  const profilePick = bindProfilePick(
+    activeProjectId,
+    { profile: profilePanel, viewer, form: panel.structures },
+    host,
+    {
+      irregular: () => bridge.irregularStations(),
+      pipes: () => lastPipes ?? [],
+      sections: () => state.detail?.cross_sections ?? [],
+    },
+  );
   // 3D 노선 우클릭 → 구조물 배치 메뉴(그래프·배수유역도와 동일, 2026-08-19).
-  bridge.mountViewerMenu(viewer, () => latest?.route_points ?? []);
-
-  function renderSections(detail: SectionDetailResponse, routeId?: number): void {
-    currentSectionDetail = detail;
-    profilePanel.render(detail, panel.values().stationInterval ?? undefined, routeId);
-    // 저장된 계획선의 정책은 만들 당시 기준이라 지금 설정(임도 종류·설계속도·지형)과
-    // 다를 수 있다 — 그릴 때마다 현재 기준으로 맞춘다(2026-08-19).
-    profilePanel.setGradeLimit(panel.gradeLimitPct());
-    profilePanel.setEnforceMinCover(panel.values().enforcePipeClearance);
-    profilePanel.setStationDisplay(panel.stationDisplayOffset());
-    profilePanel.setIrregularStations(bridge.irregularStations());
-    renderStationLines(detail);
-    // 예상형상 코리도 — 저장본이 지금 정본과 맞을 때만 올린다. 낡았으면 [3D 업데이트] 대기
-    // 표시만 켠다(2026-09-06 실측: 받아놓고 버리는 데다 다시 만드느라 전환이 16.7초까지 갔다).
-    const routePoints = latest?.route_points ?? [];
-    if (routePoints.length > 1) {
-      void loadCorridorIfFresh(
-        viewer,
-        activeProjectId,
-        routeId ?? latest?.route?.id,
-        detail,
-        routePoints,
-        profilePanel.alignmentSamples() ?? undefined,
-      ).then((fresh) => panel.setCorridorPending(!fresh));
-    }
-  }
-
-  async function restoreSections(routeId: number): Promise<void> {
-    let detail: SectionDetailResponse;
-    profilePanel.setLoading("종단면 자료를 불러오는 중…");
-    try {
-      // 공유 캐시 — 횡단 보기가 이미 받아 뒀으면 같은 객체를 재사용해 두 보기가 같은 값을 본다.
-      detail = await loadSectionDetail(activeProjectId, routeId);
-    } catch {
-      // 종횡단 데이터 자체가 없는 경우(생성 실패·최초 진입)는 빈 안내로 둔다.
-      currentSectionDetail = null;
-      profilePanel.setLoading(null);
-      profilePanel.clear();
-      viewer.renderStationLines([], 0);
-      return;
-    }
-    profilePanel.setLoading(null);
-    try {
-      renderSections(detail, routeId);
-      // 구 확정분에 남은 비정규 측점(자유 텍스트)을 구조물 정본으로 1회 이관한다 — 멱등이지만
-      // 탭 수명 동안 노선마다 한 번만 시도한다(2026-08-17 · 09-06 실측).
-      const legacy = detail.longitudinal.stations
-        .filter((station) => station.kind === "irregular")
-        .map((station) => ({
-          chainage_m: station.chainage_m,
-          structure: station.structure ?? "",
-        }));
-      const migrateKey = `${activeProjectId}:${routeId}`;
-      if (legacy.length && !migratedRoutes.has(migrateKey)) {
-        migratedRoutes.add(migrateKey);
-        void migrateLegacyStations(activeProjectId, legacy)
-          .then((result) => {
-            if (result.migrated > 0) {
-              showToast(`구 구조물 측점 ${result.migrated}건을 구조물 목록으로 옮겼습니다.`);
-              return bridge.refreshFromServer().then(() => undefined);
-            }
-            return undefined;
-          })
-          .catch(() => {
-            /* 이관 실패는 치명적이지 않다 — 다음 진입에서 다시 시도된다. */
-          });
-      }
-    } catch (error) {
-      // 렌더 실패를 "데이터 없음"으로 감추면 원인을 알 수 없게 된다 — 실패 사실을 드러낸다.
-      console.error("B05 종단면도 렌더 실패", error);
-      showToast(
-        error instanceof Error
-          ? `종단면도 표시 실패: ${error.message}`
-          : "종단면도 표시에 실패했습니다.",
-        "error",
-      );
-    }
-  }
-
-  function renderLatest(next: RouteLatestResponse): void {
-    latest = next;
-    routeReady = Boolean(next.route && next.route_points.length > 1);
-    profilePanel.setRoutePolyline(next.route_points ?? []);
-    if (next.route) {
-      const stored = next.route.algorithm_params ?? {};
-      viewer.markers.renderRoute(
-        next.route_points,
-        (stored.curve_warning_segments as Array<{
-          polyline_start_index: number;
-          polyline_end_index: number;
-        }>) ?? [],
-      );
-    }
-  }
-
-  async function applyContours(interval: number): Promise<void> {
-    // 화면 전체를 잠그지 않는다 — 진행 표시는 [재적용] 버튼이 맡는다(CLAUDE.md 5장).
-    try {
-      await viewer.reloadContours(interval);
-      await updateContourInterval(activeProjectId, interval);
-      // 세션 캐시에도 반영해 다음 진입 시 옛 등고선 간격으로 복원되지 않게 한다.
-      const cached = latestSource.read();
-      if (cached) {
-        latestSource.write({
-          ...cached,
-          surface_params: { ...cached.surface_params, contour_interval_m: interval },
-        });
-      }
-    } catch (error) {
-      showToast(error instanceof Error ? error.message : "등고선 조회에 실패했습니다.", "error");
-    }
-  }
+  bridge.mountViewerMenu(viewer, () => state.latest?.route_points ?? []);
 
   // [경로 계산] · 저장 몫은 따로 뗀 모듈이 맡는다(2026-09-02).
   const actionContext: PageActionContext = {
     projectId: activeProjectId,
-    latest: () => latest,
-    confirmedSurface: () => confirmedSurface,
-    routeReady: () => routeReady,
+    latest: () => state.latest,
+    confirmedSurface: () => state.confirmedSurface,
+    routeReady: () => state.routeReady,
     viewer: () => viewer,
     panel: () => panel,
     profilePanel: () => profilePanel,
@@ -538,13 +407,23 @@ export async function mountProfileView(
     onReset: () => uphillOverrides.clear(),
   });
 
+  // 탭이 다시 보일 때 정의 판이 바뀌었으면 종류 · 패널 다시 읽음(322-0)
+  const reloadIfShown = (): void => void (host.visible() && !state.restoring && bridge.load());
+  host.onDispose(onStaleStructureTypes(reloadIfShown));
   // 한 페이지 두 보기 — 숨김 · 보임 · 떠남(계획서 24-3a · 24-3b).
   bindProfileViewLife(host, {
     projectId: activeProjectId,
-    viewer,
-    ready: () => !restoring,
+    // 3D 는 모달 — 숨으면 닫음(그리기 멈춤) · 보여도 모달을 열 때만 그림 · 떠나면 버림(345-2).
+    viewer: {
+      setActive: (active) => {
+        if (!active) view3d.modal.close();
+      },
+      dispose: view3d.modal.dispose,
+    },
+    ready: () => !state.restoring,
     // 다시 보이면 횡단 보기가 한 벌(폼 · 종단도)에 실어 둔 값을 종단 보기 값으로 되돌린다.
     reload: async () => {
+      sections.flushSwap(); // 숨은 동안 측점 목록이 바뀌었으면 종단도 · 3D 측점선 다시(346-2)
       await bridge.load();
       if (lastPipes) applyPipes(lastPipes);
     },
@@ -558,33 +437,37 @@ export async function mountProfileView(
         );
         return;
       }
-      viewer.markers.selectStation(null);
-      profilePanel.setSelectedStation(null);
-    },
-    // 보기를 떠나는 자리 = 코리도 영구저장 시점(2026-08-23 사용자 확정) — 이동은 막지 않는다.
-    onHide: () => {
-      if (latest?.route?.id) void saveCorridorIfDirty(activeProjectId, latest.route.id);
+      profilePick.paint();
     },
   });
 
+  /** 노선 저장([저장] · 추천 [적용]) 끝 — 서버가 배수유역부터 다시 셌고 그 결과가 새 초기값이다. 새로고침 대신 페이지를
+   *  통째로 다시 세운다(345-3) — 제자리 고침은 옛 노선 관 목록 등 메모리 · 진행 중 요청이 살아남아
+   *  [저장]에 실렸다(PLAN 77). 초안 · 결과 칸은 노선 저장이 비웠고 옛 노선 캐시는 여기서 비운다 ·
+   *  떠나는 페이지의 늦은 응답은 `host.disposed()` 로 버려진다. */
+  const rebuildAfterReplan = (): void => {
+    clearRouteLatestCache(activeProjectId);
+    invalidateSectionDetail(activeProjectId);
+    remountRoute(currentRoute());
+  };
+
   /* ── 진입 로딩 ─────────────────────────────────────────────────────────
    * 화면 틀을 먼저 띄우고 자료가 끝나는 순서대로 채운다(2026-08-01 사용자 지시).
-   * 3D 지형은 **보조 자료라 로딩에 넣지 않는다**(2026-09-04 사용자 지시). 서클은 3D 뷰포트
-   * 정중앙에 둔다(하단 종단 패널에 가려지는 것은 무방). */
+   * 3D 지형은 **보조 자료라 로딩에 넣지 않는다**(2026-09-04 사용자 지시) — [3D] 모달을 처음 열 때
+   * 올린다(345-2). 서클은 가운데 위 칸 정중앙에 둔다(하단 종단 패널에 가려지는 것은 무방). */
   const LOAD_STEP_COUNT = 3;
+  const mainContent = document.createElement("div");
+  mainContent.className = "b05-route__main";
+  mainContent.append(view3d.modal.park);
+  center.append(mainContent);
   const progress = createProgressCircle({ label: "노선 정보를 불러오는 중…", overlay: true });
-  viewer.root.append(progress.root);
+  mainContent.append(progress.root);
   let loadedSteps = 0;
   function advanceLoading(label: string): void {
     loadedSteps += 1;
     progress.set(Math.min(1, loadedSteps / LOAD_STEP_COUNT), label);
   }
 
-  const mainContent = document.createElement("div");
-  mainContent.className = "b05-route__main";
-  mainContent.append(viewer.root);
-  center.append(mainContent);
-
   try {
     // ① 좌측 폼·노선 설정값 — 캐시가 있으면 그것으로 **먼저** 그리고 신선도는 뒤에서 확인한다
     // (2026-09-06). 캐시가 없을 때만 DB를 기다린다.
@@ -595,7 +478,7 @@ export async function mountProfileView(
       fetchRoadWidths(activeProjectId),
     ]);
     if (host.disposed()) return;
-    roadWidths = configuredRoadWidths;
+    state.roadWidths = configuredRoadWidths;
     panel.restore({
       stationInterval: sectionContext.defaults.station_interval_m,
       crossSampleInterval: sectionContext.defaults.cross_sample_interval_m,
@@ -619,13 +502,30 @@ export async function mountProfileView(
 
     // ② 확정 지표면 — 모델 id·범위를 한 번에 받는다.
     const confirmed = await fetchConfirmedSurface(activeProjectId);
-    confirmedSurface = confirmed.model_id === null ? null : confirmed;
-    if (!confirmedSurface) {
+    state.confirmedSurface = confirmed.model_id === null ? null : confirmed;
+    if (!state.confirmedSurface) {
       // 새 자료가 올라와 옛 결과가 지워진 상태 — 여기서 보여 줄 게 없다.
       leaveForDashboard();
       return;
     }
     advanceLoading("종단면 자료를 불러오는 중…");
+    // 평면(노선 편집) — 가운데 위 본문 · 페이지 수명(345-3). 자료는 페이지 열기와 함께 읽는다.
+    void mountRouteEditor(mainContent, host, activeProjectId, rebuildAfterReplan, {
+      // 측점 눈금 간격은 좌측 패널이 쥔 값을 그대로 넘긴다 — 편집기가 따로 굳히지 않는다.
+      stationIntervalM: panel.values().stationInterval ?? undefined,
+      // 바탕 등고선 — 확정 지표면이 있으면 LAS 등고선을 쓴다(계획서 0-9 ⑥).
+      surfaceModelId: state.confirmedSurface.model_id,
+      contourIntervalM: latestResponse.surface_params.contour_interval_m,
+      smooth: latestResponse.surface_params.smooth,
+      tools: [view3d.modal.button],
+      recommend: panel.recommend,
+      // 계산 묶음(346-1) — 노선을 고칠 때마다 종단이 따라옴(미리보기 · [저장]이 정본).
+      draft: routeDraftBridge(activeProjectId, profilePanel, {
+        stationIntervalM: panel.values().stationInterval ?? undefined,
+        onCorridorStale: () => sections.setCorridorPending(true),
+        onFacilitiesFollowed: followFacilities,
+      }),
+    });
 
     // ③ 종단면·횡단 자료 — 하단 패널을 3D보다 먼저 채운다.
     if (latestResponse.route) await restoreSections(latestResponse.route.id);
@@ -654,32 +554,8 @@ export async function mountProfileView(
     showToast(error instanceof Error ? error.message : "화면을 불러오지 못했습니다.", "error");
   } finally {
     progress.remove();
-    restoring = false;
+    state.restoring = false;
+    snapOld();
     restorePick(); // 관·구조물 목록 중 늦게 오는 쪽이 있어 여기서 한 번 더.
   }
-
-  // ④ 3D 지형 — 화면을 잡지 않고 뒤에서 올린다. 실패해도 나머지는 그대로 쓴다.
-  void (async () => {
-    const surface = confirmedSurface;
-    const current = latest as RouteLatestResponse | null; // 닫힘 안에서 채워져 흐름 분석이 못 봄
-    if (!surface || !current || host.disposed()) return;
-    try {
-      // 범위는 ②에서 받아 둔 확정 응답에 이미 들어 있다 — 다시 부르지 않는다.
-      if (!surface.bounds) throw new Error("지표면 범위 정보를 찾을 수 없습니다.");
-      await viewer.loadSurface(
-        activeProjectId,
-        surface.model_id as number,
-        current.surface_params.method,
-        current.surface_params.smooth,
-        current.surface_params.contour_interval_m,
-        toBounds(surface.bounds),
-      );
-      if (host.disposed()) return; // 올리는 사이 페이지를 떠났다.
-      renderLatest(current); // 지형이 올라온 뒤에야 마커·측점선이 지형 위에 놓인다.
-      if (currentSectionDetail) renderStationLines(currentSectionDetail);
-      showToast("3D 지형 준비 완료", "success");
-    } catch (error) {
-      showToast(error instanceof Error ? error.message : "3D 지형을 불러오지 못했습니다.", "error");
-    }
-  })();
 }

A00_Common/design/design_view_profile_3d.ts

@@ -0,0 +1,141 @@
+/* =============================================================================
+ * design_view_profile_3d.ts
+ * 종단 보기의 **3D 몫** — 보기 조작 줄 콜백 · [3D 업데이트] · 등고선 다시 적용 · 3D 지형 올리기 ·
+ * 큰 모달(`design_view_profile_3d_modal` · 345-2 — 지형은 처음 열 때 올림).
+ * `design_view_profile.ts` 가 700줄을 넘어 뗀 조각(345-1). 상태는 본체가 쥔 `ProfileViewState`.
+ * ========================================================================== */
+
+import { showToast } from "@ui/ui_template_elements";
+import { updateContourInterval } from "../../B05_Profile/B05_Profile_Api_Fetch";
+import { refreshCorridor } from "../../B05_Profile/B05_Profile_UI_Corridor";
+import type { createLatestSource } from "../../B05_Profile/B05_Profile_UI_Page_Latest";
+import { toBounds } from "../../B05_Profile/B05_Profile_UI_Page_Helpers";
+import type { ViewControlCallbacks } from "../../B05_Profile/B05_Profile_UI_Panel_View";
+import type { createRouteProfilePanel } from "../../B05_Profile/B05_Profile_UI_Profile_Panel";
+import type { RouteViewer } from "../../B05_Profile/B05_Profile_UI_Viewer";
+import type { DesignPageHost } from "./design_page";
+import type { createProfileSections, ProfileViewState } from "./design_view_profile_sections";
+import { createViewer3dModal } from "./design_view_profile_3d_modal";
+
+export interface Profile3dDeps {
+  projectId: string;
+  state: ProfileViewState;
+  viewer: RouteViewer;
+  host: DesignPageHost;
+  latestSource: ReturnType<typeof createLatestSource>;
+  profilePanel: () => ReturnType<typeof createRouteProfilePanel>;
+  sections: () => ReturnType<typeof createProfileSections>;
+}
+
+export function createProfile3d(deps: Profile3dDeps) {
+  const { projectId, state, viewer } = deps;
+
+  /** 보기 조작 줄(ISO · 켬끔 · [3D 업데이트])이 부르는 것 — 좌측 패널 콜백에 섞어 넘긴다. */
+  const viewCallbacks: ViewControlCallbacks = {
+    onSurfaceVisible: viewer.setSurfaceVisible,
+    onCorridorVisible: (visible) => {
+      state.corridorVisible = visible;
+      viewer.setCorridorVisible(visible);
+      // 측점 바 기준면이 바뀐다(예상형상 위 ↔ 원지반 위) — 다시 그린다.
+      deps.sections().redrawStationLines();
+    },
+    onContoursVisible: viewer.setContoursVisible,
+    onAxesVisible: viewer.setAxesVisible,
+    onStationLinesVisible: viewer.setStationLinesVisible,
+    onStationLabelsVisible: viewer.setStationLabelsVisible,
+    onSurfaceGrayscale: viewer.setSurfaceGrayscale,
+    onView: viewer.setView,
+    onResetView: () => viewer.setView("top"),
+    onProjection: viewer.setProjection,
+    // [3D 업데이트](2026-09-01) — 밀린 계획선 편집을 예상형상·측점선에 한 번에 반영한다.
+    onCorridorRefresh: () => refreshOnce(),
+  };
+
+  /** 짓는 중이면 그 결과를 같이 기다린다 — 단추 · 모달 열기가 겹쳐도 한 번만 짓는다. */
+  let refreshing: Promise<void> | null = null;
+  function refreshOnce(): Promise<void> {
+    refreshing ??= refreshCorridorNow().finally(() => (refreshing = null));
+    return refreshing;
+  }
+
+  /** 낡은 3D 길 모형을 지금 노선 · 계획선으로 — 저장본이 맞으면 받기만 · 아니면 워커 미리보기. */
+  async function refreshCorridorNow(): Promise<void> {
+    const detail = state.detail;
+    const latest = state.latest;
+    if (!detail || !latest?.route?.id) return;
+    const routePoints = latest.route_points ?? [];
+    if (routePoints.length <= 1) return;
+    await refreshCorridor(
+      viewer,
+      projectId,
+      latest.route.id,
+      detail,
+      routePoints,
+      deps.profilePanel().alignmentSamples() ?? undefined,
+    );
+    // 측점 바·라벨·램프도 계획고를 따라 움직여야 한다(2026-08-23 지적 ③).
+    deps.sections().renderStationLines(detail);
+    deps.sections().setCorridorPending(false);
+  }
+
+  async function applyContours(interval: number): Promise<void> {
+    // 화면 전체를 잠그지 않는다 — 진행 표시는 [재적용] 버튼이 맡는다(CLAUDE.md 5장).
+    try {
+      await viewer.reloadContours(interval); // 지형 전(모달 안 엶)이면 그냥 지나감
+      await updateContourInterval(projectId, interval);
+      // 처음 열 때 올릴 지형도 새 간격으로(지형은 모달을 열 때 올림 · 345-2).
+      if (state.latest)
+        state.latest = {
+          ...state.latest,
+          surface_params: { ...state.latest.surface_params, contour_interval_m: interval },
+        };
+      // 세션 캐시에도 반영해 다음 진입 시 옛 등고선 간격으로 복원되지 않게 한다.
+      const cached = deps.latestSource.read();
+      if (cached) {
+        deps.latestSource.write({
+          ...cached,
+          surface_params: { ...cached.surface_params, contour_interval_m: interval },
+        });
+      }
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : "등고선 조회에 실패했습니다.", "error");
+    }
+  }
+
+  /** ④ 3D 지형 — 모달을 처음 열 때 올린다(345-2). 실패해도 나머지는 그대로 쓴다. */
+  async function loadTerrain(): Promise<void> {
+    const surface = state.confirmedSurface;
+    const current = state.latest;
+    if (!surface || !current || deps.host.disposed()) return;
+    try {
+      // 범위는 ②에서 받아 둔 확정 응답에 이미 들어 있다 — 다시 부르지 않는다.
+      if (!surface.bounds) throw new Error("지표면 범위 정보를 찾을 수 없습니다.");
+      await viewer.loadSurface(
+        projectId,
+        surface.model_id as number,
+        current.surface_params.method,
+        current.surface_params.smooth,
+        current.surface_params.contour_interval_m,
+        toBounds(surface.bounds),
+      );
+      if (deps.host.disposed()) return; // 올리는 사이 페이지를 떠났다.
+      deps.sections().renderLatest(current); // 지형이 올라온 뒤에야 마커·측점선이 지형 위에 놓인다.
+      deps.sections().redrawStationLines();
+      showToast("3D 지형 준비 완료", "success");
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : "3D 지형을 불러오지 못했습니다.", "error");
+    }
+  }
+
+  const modal = createViewer3dModal({
+    viewer,
+    loadTerrain,
+    visible: () => deps.host.visible(),
+    // 낡은 채 열면 그때 한 번 다시 짓는다(워커 · 345-4) — 닫혀 있는 동안은 안 짓는다.
+    onOpen: () => {
+      if (state.corridorPending) void refreshOnce();
+    },
+  });
+
+  return { viewCallbacks, applyContours, modal };
+}

A00_Common/design/design_view_profile_3d_modal.ts

@@ -0,0 +1,92 @@
+/* =============================================================================
+ * design_view_profile_3d_modal.ts
+ * 종단 보기 3D 를 **큰 모달**로(345-2). 3D 화면은 숨긴 자리(`park`)에 살고 [3D] 를 누르면 공용 큰
+ * 모달(`openModal({ wide })`) 몸으로 옮겨 붙는다 — 같은 노드라 보기 조작 줄 · [3D 업데이트] ·
+ * 3D 안 고름(측점 · 구조물 · 우클릭 더함)이 그대로 따라간다.
+ *
+ * 처음 열 때 3D 지형을 올린다(아직이면 로딩 원). 닫으면 숨긴 자리로 되돌려 `setActive(false)` —
+ * 그리기 루프 · 포인터 듣기만 멈추고 WebGL 문맥 · 지형은 살린다. 버림은 페이지를 떠날 때만.
+ * ========================================================================== */
+
+import { createButton } from "@ui/ui_template_elements";
+import { openModal } from "@ui/ui_template_modal";
+import { createProgressCircle } from "@ui/ui_template_progress";
+
+export interface Viewer3dModalDeps {
+  viewer: { root: HTMLElement; setActive: (active: boolean) => void; dispose: () => void };
+  /** 처음 열 때 한 번 — 3D 지형 올리기(실패해도 모달은 열림). */
+  loadTerrain: () => Promise<void>;
+  /** 종단 보기가 보이는가 — 숨은 보기에서는 안 연다. */
+  visible: () => boolean;
+  /** 열 때마다(지형이 선 뒤) — 낡은 3D 길 모형 다시 짓기(345-4). */
+  onOpen?: () => void;
+}
+
+export function createViewer3dModal(deps: Viewer3dModalDeps) {
+  const { viewer } = deps;
+  const park = document.createElement("div");
+  park.className = "b05-route__3d-park";
+  park.hidden = true;
+  park.append(viewer.root);
+  viewer.setActive(false); // 닫힌 동안 그리기 0
+  let modal: { close: () => void } | null = null;
+  let terrain: Promise<void> | null = null;
+
+  const putBack = (): void => {
+    modal = null;
+    park.append(viewer.root);
+    viewer.setActive(false);
+  };
+
+  function open(): void {
+    if (modal || !deps.visible()) return;
+    modal = openModal({
+      title: "3D 보기",
+      closeLabel: "닫기",
+      wide: true,
+      dialogClass: "b05-route__3d-modal",
+      mount: (body) => {
+        body.classList.add("b05-route__3d-body");
+        body.append(viewer.root);
+      },
+      // 닫기 단추 · Esc · 바깥 누름 — 묻지 않고 숨긴 자리로 되돌린다.
+      beforeClose: () => {
+        putBack();
+        return true;
+      },
+    });
+    viewer.setActive(true);
+    if (!terrain) {
+      const progress = createProgressCircle({ label: "3D 지형을 불러오는 중…", overlay: true });
+      progress.set(null);
+      viewer.root.append(progress.root);
+      terrain = deps.loadTerrain().finally(() => progress.remove());
+    }
+    void terrain.then(() => modal && deps.onOpen?.()); // 그 사이 닫았으면 안 지음
+  }
+
+  /** 열려 있으면 닫는다 — 보기를 떠날 때 · 페이지를 떠날 때. */
+  function close(): void {
+    if (!modal) return;
+    const shown = modal;
+    putBack();
+    shown.close();
+  }
+
+  const button = createButton({ label: "3D", variant: "ghost", onClick: open });
+  button.classList.add("b05-route__3d-open");
+  button.title = "3D 화면을 큰 창으로 엽니다 — 닫으면 그리기를 멈춥니다";
+
+  return {
+    park,
+    button,
+    open,
+    close,
+    isOpen: () => modal !== null,
+    dispose(): void {
+      close();
+      viewer.dispose();
+      park.remove();
+    },
+  };
+}

A00_Common/design/design_view_profile_sections.ts

@@ -0,0 +1,230 @@
+/* =============================================================================
+ * design_view_profile_sections.ts
+ * 종단 보기의 **노선 · 종단면 그리기** — 최신 노선 · 측점선 · 종단면 자료(불러오기 · 그리기 ·
+ * 옛 측점 이관). `design_view_profile.ts` 가 700줄을 넘어 뗀 조각(345-1). 상태는 본체가 쥔
+ * `ProfileViewState` 한 벌을 같이 본다.
+ * ========================================================================== */
+
+import { showToast } from "@ui/ui_template_elements";
+import type { SurfaceConfirmedResponse } from "../../B04_PreProcess/B04_PreProcess_Api_Fetch";
+import type { RouteLatestResponse } from "../../B05_Profile/B05_Profile_Api_Fetch";
+import type { RoutePanel } from "../../B05_Profile/B05_Profile_UI_Panel";
+import type { createRouteProfilePanel } from "../../B05_Profile/B05_Profile_UI_Profile_Panel";
+import type { createStructuresBridge } from "../../B05_Profile/B05_Profile_UI_Page_Structures";
+import type { RouteViewer } from "../../B05_Profile/B05_Profile_UI_Viewer";
+import type { SectionDetailResponse } from "../../B06_Section/B06_Section_Api_Fetch";
+import {
+  loadSectionDetail,
+  subscribeSectionDetail,
+  swapSectionStations,
+} from "../../B06_Section/B06_Section_Section_Store";
+import { useDesignStore } from "./design_store";
+import { migrateLegacyStations } from "../../B05_Profile/B05_Profile_Api_Structures";
+import { loadCorridorIfFresh } from "../../B05_Profile/B05_Profile_UI_Corridor";
+import { stationLinesOf } from "../../B05_Profile/B05_Profile_UI_Page_Stations";
+import { restorePoints, type RoadWidths } from "../../B05_Profile/B05_Profile_UI_Page_Helpers";
+import { panelValuesOf } from "../../B05_Profile/B05_Profile_UI_Page_Latest";
+
+/** 종단 보기 본체 · 조각이 함께 보는 값 한 벌. */
+export interface ProfileViewState {
+  /** 확정 지표면 — 모델 id 와 3D 로딩에 필요한 범위만 들고 있는다(2026-09-06 호출 정리). */
+  confirmedSurface: SurfaceConfirmedResponse | null;
+  latest: RouteLatestResponse | null;
+  roadWidths: RoadWidths;
+  detail: SectionDetailResponse | null;
+  /** [예상형상] 표시 상태 — 측점 바를 계획고 위로 올릴지 판단한다(패널 기본 ON). */
+  corridorVisible: boolean;
+  /** 3D 길 모형이 지금 정본보다 낡았나 — [3D 업데이트] 표시와 한 값 · 모달을 열 때 다시 짓는 기준(345-4). */
+  corridorPending: boolean;
+  routeReady: boolean;
+  restoring: boolean;
+}
+
+export interface ProfileSectionsDeps {
+  projectId: string;
+  state: ProfileViewState;
+  viewer: RouteViewer;
+  panel: () => RoutePanel;
+  profilePanel: () => ReturnType<typeof createRouteProfilePanel>;
+  bridge: () => ReturnType<typeof createStructuresBridge>;
+  /** 종단 보기가 보이나 — 숨은 동안 갈아끼운 상세는 다시 보일 때 그림(346-2 · 없으면 늘 보임). */
+  visible?: () => boolean;
+}
+
+/** 구 구조물 측점 이관을 이미 시도한 노선 — 탭 수명 동안 유지한다. */
+const migratedRoutes = new Set<string>();
+
+export function createProfileSections(deps: ProfileSectionsDeps) {
+  const { projectId, state, viewer } = deps;
+
+  function restorePanel(next: RouteLatestResponse): void {
+    deps.panel().restore(panelValuesOf(next));
+    viewer.markers.setPoints(restorePoints(next));
+  }
+
+  function renderStationLines(detail: SectionDetailResponse): void {
+    const lines = stationLinesOf({
+      detail,
+      irregular: deps.bridge().irregularStations(),
+      routePoints: state.latest?.route_points ?? [],
+      liveSamples: deps.profilePanel().alignmentSamples(),
+      corridorVisible: state.corridorVisible,
+    });
+    viewer.renderStationLines(lines, state.roadWidths[deps.panel().values().gradeClass] / 2);
+  }
+
+  /** 지금 종단면 자료로 측점선만 다시 그린다(자료가 없으면 그대로). */
+  function redrawStationLines(): void {
+    if (state.detail) renderStationLines(state.detail);
+  }
+
+  function renderSections(detail: SectionDetailResponse, routeId?: number): void {
+    const panel = deps.panel();
+    const profilePanel = deps.profilePanel();
+    state.detail = detail;
+    profilePanel.render(detail, panel.values().stationInterval ?? undefined, routeId);
+    // 저장된 계획선의 정책은 만들 당시 기준이라 지금 설정(임도 종류·설계속도·지형)과
+    // 다를 수 있다 — 그릴 때마다 현재 기준으로 맞춘다(2026-08-19).
+    profilePanel.setGradeLimit(panel.gradeLimitPct());
+    profilePanel.setEnforceMinCover(panel.values().enforcePipeClearance);
+    profilePanel.setStationDisplay(panel.stationDisplayOffset());
+    profilePanel.setIrregularStations(deps.bridge().irregularStations());
+    renderStationLines(detail);
+    // 예상형상 코리도 — 저장본이 지금 정본과 맞을 때만 올린다. 낡았으면 [3D 업데이트] 대기
+    // 표시만 켠다(2026-09-06 실측: 받아놓고 버리는 데다 다시 만드느라 전환이 16.7초까지 갔다).
+    const routePoints = state.latest?.route_points ?? [];
+    if (routePoints.length > 1) {
+      void loadCorridorIfFresh(
+        viewer,
+        projectId,
+        routeId ?? state.latest?.route?.id,
+        detail,
+        routePoints,
+        profilePanel.alignmentSamples() ?? undefined,
+      ).then((fresh) => setCorridorPending(!fresh));
+    }
+  }
+
+  async function restoreSections(routeId: number): Promise<void> {
+    const profilePanel = deps.profilePanel();
+    let detail: SectionDetailResponse;
+    profilePanel.setLoading("종단면 자료를 불러오는 중…");
+    try {
+      // 공유 캐시 — 횡단 보기가 이미 받아 뒀으면 같은 객체를 재사용해 두 보기가 같은 값을 본다.
+      detail = await loadSectionDetail(projectId, routeId);
+    } catch {
+      // 종횡단 데이터 자체가 없는 경우(생성 실패·최초 진입)는 빈 안내로 둔다.
+      state.detail = null;
+      profilePanel.setLoading(null);
+      profilePanel.clear();
+      viewer.renderStationLines([], 0);
+      return;
+    }
+    profilePanel.setLoading(null);
+    followSwap(routeId);
+    try {
+      renderSections(detail, routeId);
+      // 구 확정분에 남은 비정규 측점(자유 텍스트)을 구조물 정본으로 1회 이관한다 — 멱등이지만
+      // 탭 수명 동안 노선마다 한 번만 시도한다(2026-08-17 · 09-06 실측).
+      const legacy = detail.longitudinal.stations
+        .filter((station) => station.kind === "irregular")
+        .map((station) => ({
+          chainage_m: station.chainage_m,
+          structure: station.structure ?? "",
+        }));
+      const migrateKey = `${projectId}:${routeId}`;
+      if (legacy.length && !migratedRoutes.has(migrateKey)) {
+        migratedRoutes.add(migrateKey);
+        void migrateLegacyStations(projectId, legacy)
+          .then((result) => {
+            if (result.migrated > 0) {
+              showToast(`구 구조물 측점 ${result.migrated}건을 구조물 목록으로 옮겼습니다.`);
+              return deps
+                .bridge()
+                .refreshFromServer()
+                .then(() => undefined);
+            }
+            return undefined;
+          })
+          .catch(() => {
+            /* 이관 실패는 치명적이지 않다 — 다음 진입에서 다시 시도된다. */
+          });
+      }
+    } catch (error) {
+      // 렌더 실패를 "데이터 없음"으로 감추면 원인을 알 수 없게 된다 — 실패 사실을 드러낸다.
+      console.error("B05 종단면도 렌더 실패", error);
+      showToast(
+        error instanceof Error
+          ? `종단면도 표시 실패: ${error.message}`
+          : "종단면도 표시에 실패했습니다.",
+        "error",
+      );
+    }
+  }
+
+  /* 측점 수가 바뀜(346-2 · 묶음 측점 → 횡단 쪽이 상세를 갈아끼움) — 종단도 · 표 · 3D 측점선을 새 목록으로
+   * 다시(보일 때만 · 숨었으면 다시 보일 때 `flushSwap`). 노선마다 한 번 듣고, 노선이 바뀌면 옛 것을 끊음. */
+  let swap: { routeId: number; stop: () => void } | null = null;
+  let swapPending = false;
+  function followSwap(routeId: number): void {
+    if (swap?.routeId === routeId) return;
+    swap?.stop();
+    const stopListen = subscribeSectionDetail(projectId, routeId, (next) => {
+      state.detail = next;
+      swapPending = !(deps.visible?.() ?? true);
+      if (!swapPending) renderSections(next, routeId);
+    });
+    // 묶음 측점(가게)이 바뀌면 갈아끼움 — 횡단 보기를 안 열었어도(그쪽도 부르면 둘째는 「같은 목록」)
+    const stopStore = useDesignStore(projectId, null).subscribe("stations", (stations) => {
+      if (stations?.length) void swapSectionStations(projectId, routeId, stations);
+    });
+    swap = {
+      routeId,
+      stop: () => {
+        stopListen();
+        stopStore();
+      },
+    };
+  }
+
+  /** 숨은 동안 받은 새 상세를 그림 — 종단 보기가 다시 보일 때. */
+  function flushSwap(): void {
+    if (!swapPending || !state.detail || !swap) return;
+    swapPending = false;
+    renderSections(state.detail, swap.routeId);
+  }
+
+  /** 「3D 늦음」 — [3D 업데이트] 표시(setCorridorPending 그대로)와 상태 한 칸을 같이 맞춘다. */
+  function setCorridorPending(pending: boolean): void {
+    state.corridorPending = pending;
+    deps.panel().setCorridorPending(pending);
+  }
+
+  function renderLatest(next: RouteLatestResponse): void {
+    state.latest = next;
+    state.routeReady = Boolean(next.route && next.route_points.length > 1);
+    deps.profilePanel().setRoutePolyline(next.route_points ?? []);
+    if (next.route) {
+      const stored = next.route.algorithm_params ?? {};
+      viewer.markers.renderRoute(
+        next.route_points,
+        (stored.curve_warning_segments as Array<{
+          polyline_start_index: number;
+          polyline_end_index: number;
+        }>) ?? [],
+      );
+    }
+  }
+
+  return {
+    restorePanel,
+    renderStationLines,
+    redrawStationLines,
+    renderSections,
+    restoreSections,
+    renderLatest,
+    setCorridorPending,
+    flushSwap,
+    stopSwap: () => swap?.stop(),
+  };
+}

A00_Common/design/logic/design_pipeline.ts

@@ -0,0 +1,366 @@
+/* =============================================================================
+ * A00_Common/design/logic/design_pipeline.ts
+ * 실시간 계산 묶음 하나(PLAN 344-4) — 조작마다 차례 번호(generation) +1 · 단계 사이마다 번호
+ * 확인 · 옛 번호 결과 버림 · 뒤 단계 요청은 AbortController 로 끊음. 계약(키 모양 · 단계 · deps)
+ * = `design_pipeline_types.ts` 머리 주석.
+ *
+ *   const pipe = createDesignPipeline({ stages: { route, stations, ... } });
+ *   pipe.subscribe(publishToStore(useDesignStore(projectId, null)));
+ *   pipe.start(inputs);                                   // 처음 · 전 구간
+ *   pipe.update("grade", edits, { fromM: 40, toM: 60 });  // 조작 · 바뀐 범위
+ *
+ * 단계 시간 = `window.__aisloPipeline.runs`(마지막 RUN_LOG_SIZE 번 · 단계별 ms · 개발용).
+ * 화면 · fetch · 세션은 단계 함수(주입) 몫 — 이 파일은 차례 · 버림 · 범위 · 기록만.
+ * ========================================================================== */
+
+import type { DesignStore } from "../design_store";
+import type {
+  ChangeRange,
+  ChangeSource,
+  FollowPatch,
+  InputKey,
+  PipelineInputs,
+  PipelineOutputs,
+  PipelineRunRecord,
+  PipelineStages,
+  RangePart,
+  StageContext,
+  StageName,
+} from "./design_pipeline_types";
+import { SOURCE_INPUT } from "./design_pipeline_types";
+
+/** 브라우저 즉시 — 차례대로 기다림. */
+export const BROWSER_STAGES: StageName[] = [
+  "route",
+  "follow",
+  "stations",
+  "ground",
+  "planline",
+  "profile",
+  "cross",
+  "footprint",
+  "masshaul",
+];
+/** 뒤 — 브라우저 단계가 끝나면 함께 띄우고 기다리지 않음. */
+export const AFTER_STAGES: StageName[] = ["haul", "drainage", "corridor"];
+
+type Dep = StageName | `input.${InputKey}`;
+
+/** 단계가 기대는 값 — 이 판들이 그대로면 다시 안 셈(계약 표와 같음). */
+export const STAGE_DEPS: Record<StageName, Dep[]> = {
+  route: ["input.route"],
+  follow: ["route"],
+  stations: ["route", "input.pipes", "input.structures"],
+  ground: ["stations"],
+  planline: ["ground"],
+  profile: ["planline", "input.alignment"],
+  cross: ["profile", "ground", "input.cross", "input.pipes", "input.structures"],
+  footprint: ["cross", "ground"],
+  masshaul: ["cross"],
+  haul: ["masshaul"],
+  drainage: ["route", "input.pipes"],
+  corridor: ["profile", "cross"],
+};
+
+/** follow 가 고칠 수 있는 입력 — 노선 · 횡단은 안 됨(고리). */
+const FOLLOW_KEYS: ReadonlyArray<keyof FollowPatch> = ["pipes", "structures", "alignment"];
+/** 이 단계 뒤 한 번 쉼 — 종단이 먼저 그려지고 횡단 · 유토곡선이 그다음. */
+const YIELD_AFTER = new Set<StageName>(["profile"]);
+export const RUN_LOG_SIZE = 20;
+
+export type PipelineEvent =
+  | { kind: "generation"; generation: number }
+  | { kind: "stage"; stage: StageName; value: unknown; generation: number };
+
+export interface DesignPipeline {
+  /** 처음 · 전 구간 — 입력 다섯을 한 번에. */
+  start(inputs: PipelineInputs): Promise<PipelineRunRecord>;
+  /** 조작 하나 — 값이 같으면 안 셈(null). part 없으면 전 구간. */
+  update(
+    source: ChangeSource,
+    value: unknown,
+    part?: RangePart | null,
+  ): Promise<PipelineRunRecord> | null;
+  subscribe(fn: (event: PipelineEvent) => void): () => void;
+  output<K extends StageName>(name: K): PipelineOutputs[K] | null;
+  /** 지금 입력(follow 가 고친 뒤 값 포함 · 읽기만). */
+  input<K extends InputKey>(key: K): PipelineInputs[K];
+  readonly generation: number;
+  /** 단계 · 알림 안에서 들어온 입력 쓰기(고리)를 막은 수. */
+  readonly blockedWrites: number;
+  /** 떠 있는 뒤 단계가 다 끝날 때까지. */
+  settled(): Promise<void>;
+  /** 페이지를 떠남 — 떠 있는 계산 · 요청을 버림. */
+  dispose(): void;
+}
+
+type Outs = { [S in StageName]: PipelineOutputs[S] | null };
+
+function emptyOuts(): Outs {
+  const out = {} as Record<StageName, null>;
+  [...BROWSER_STAGES, ...AFTER_STAGES].forEach((name) => (out[name] = null));
+  return out as Outs;
+}
+
+/** 두 범위 합침 — null(전 구간)이 이김 · 거리는 앞 ~ 뒤. */
+export function mergeRange(
+  a: ChangeRange | null | undefined,
+  b: ChangeRange | null,
+): ChangeRange | null {
+  if (a === undefined) return b;
+  if (a === null || b === null) return null;
+  // ponytail: 떨어진 두 범위도 앞 ~ 뒤 하나로 — 사이까지 셈. 구간 목록은 느릴 때.
+  return {
+    sources: [...new Set([...a.sources, ...b.sources])],
+    fromM: Math.min(a.fromM, b.fromM),
+    toM: Math.max(a.toM, b.toM),
+    keys: [...new Set([...a.keys, ...b.keys])],
+  };
+}
+
+const now = (): number => (typeof performance !== "undefined" ? performance.now() : Date.now());
+
+function runLog(): { runs: PipelineRunRecord[] } {
+  const root = globalThis as { __aisloPipeline?: { runs: PipelineRunRecord[] } };
+  root.__aisloPipeline ??= { runs: [] };
+  return root.__aisloPipeline;
+}
+
+export function createDesignPipeline(options: { stages: PipelineStages }): DesignPipeline {
+  const stages = options.stages;
+  const inputs: PipelineInputs = {
+    route: null,
+    alignment: null,
+    cross: null,
+    pipes: null,
+    structures: null,
+  };
+  const inputVer: Record<InputKey, number> = {
+    route: 0,
+    alignment: 0,
+    cross: 0,
+    pipes: 0,
+    structures: 0,
+  };
+  const out = emptyOuts();
+  const outVer = {} as Record<StageName, number>;
+  const lastSig = {} as Partial<Record<StageName, string>>;
+  /** 마지막으로 끝난 뒤 쌓인 범위 — 없음(undefined) · 전 구간(null) · 범위. */
+  const pending = {} as Partial<Record<StageName, ChangeRange | null>>;
+  [...BROWSER_STAGES, ...AFTER_STAGES].forEach((name) => {
+    outVer[name] = 0;
+    pending[name] = null;
+  });
+  const listeners = new Set<(event: PipelineEvent) => void>();
+  const inFlight = new Set<Promise<unknown>>();
+  let generation = 0;
+  let controller = new AbortController();
+  /** 단계 함수 · 알림을 부르는 동안(동기) — 이때 들어온 입력 쓰기는 고리라 막음. */
+  let busy = false;
+  let blockedWrites = 0;
+
+  const emit = (event: PipelineEvent): void => {
+    busy = true;
+    try {
+      listeners.forEach((fn) => fn(event));
+    } finally {
+      busy = false;
+    }
+  };
+
+  const sigOf = (name: StageName): string =>
+    STAGE_DEPS[name]
+      .map((dep) =>
+        dep.startsWith("input.") ? inputVer[dep.slice(6) as InputKey] : outVer[dep as StageName],
+      )
+      .join(",");
+
+  const markAll = (range: ChangeRange | null): void => {
+    [...BROWSER_STAGES, ...AFTER_STAGES].forEach((name) => {
+      pending[name] = mergeRange(pending[name], range);
+    });
+  };
+
+  const applyFollow = (patch: FollowPatch | null): void => {
+    if (!patch) return;
+    for (const key of Object.keys(patch) as Array<keyof FollowPatch>) {
+      if (!FOLLOW_KEYS.includes(key)) {
+        console.warn(`[pipeline] follow 가 고칠 수 없는 입력 — 버림: ${key}`);
+        continue;
+      }
+      inputs[key] = patch[key] as never;
+      inputVer[key] += 1;
+    }
+  };
+
+  /** 한 단계 — 같은 판이면 건너뜀 · 옛 번호면 버림 · 아니면 출력 내보냄. */
+  async function step(
+    name: StageName,
+    gen: number,
+    signal: AbortSignal,
+    record: PipelineRunRecord,
+    before: Outs,
+  ): Promise<"ok" | "dropped" | "error"> {
+    const sig = sigOf(name);
+    const fn = stages[name] as ((ctx: StageContext<StageName>) => unknown) | undefined;
+    if (!fn || sig === lastSig[name]) {
+      record.skipped.push(name);
+      if (fn) delete pending[name];
+      return "ok";
+    }
+    const ctx: StageContext<StageName> = {
+      generation: gen,
+      range: pending[name] ?? null,
+      signal,
+      inputs: { ...inputs },
+      out: { ...out },
+      before,
+      prev: out[name],
+    };
+    const t0 = now();
+    let value: unknown;
+    try {
+      busy = true;
+      let pendingValue: unknown;
+      try {
+        pendingValue = fn(ctx);
+      } finally {
+        busy = false;
+      }
+      value = await pendingValue;
+    } catch (error) {
+      if (gen !== generation) return "dropped";
+      console.error(`[pipeline] ${name} 단계 실패`, error);
+      return "error";
+    }
+    if (gen !== generation) return "dropped";
+    record.stages[name] = Math.round((now() - t0) * 100) / 100;
+    if (name === "follow") applyFollow(value as FollowPatch | null);
+    (out as Record<StageName, unknown>)[name] = value;
+    outVer[name] += 1;
+    lastSig[name] = sig;
+    delete pending[name];
+    emit({ kind: "stage", stage: name, value, generation: gen });
+    return "ok";
+  }
+
+  async function run(): Promise<PipelineRunRecord> {
+    const gen = generation;
+    const signal = controller.signal;
+    const record: PipelineRunRecord = {
+      generation: gen,
+      sources: [],
+      stages: {},
+      skipped: [],
+      totalMs: 0,
+      outcome: "running",
+    };
+    // 같은 틱의 조작은 마지막 하나만 셈.
+    await Promise.resolve();
+    if (gen !== generation) {
+      record.outcome = "dropped";
+      return record;
+    }
+    record.sources = [...new Set(Object.values(pending).flatMap((range) => range?.sources ?? []))];
+    const log = runLog();
+    log.runs.push(record);
+    if (log.runs.length > RUN_LOG_SIZE) log.runs.splice(0, log.runs.length - RUN_LOG_SIZE);
+    const before = { ...out };
+    const t0 = now();
+    for (const name of BROWSER_STAGES) {
+      const result = await step(name, gen, signal, record, before);
+      if (result !== "ok") {
+        record.outcome = result;
+        return record;
+      }
+      if (YIELD_AFTER.has(name) && record.stages[name] !== undefined) {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        if (gen !== generation) {
+          record.outcome = "dropped";
+          return record;
+        }
+      }
+    }
+    record.totalMs = Math.round((now() - t0) * 100) / 100;
+    record.outcome = "done";
+    for (const name of AFTER_STAGES) {
+      const task = step(name, gen, signal, record, before);
+      inFlight.add(task);
+      void task.finally(() => inFlight.delete(task));
+    }
+    return record;
+  }
+
+  function begin(range: ChangeRange | null): Promise<PipelineRunRecord> {
+    generation += 1;
+    controller.abort();
+    controller = new AbortController();
+    markAll(range);
+    emit({ kind: "generation", generation });
+    return run();
+  }
+
+  return {
+    start(next) {
+      (Object.keys(inputs) as InputKey[]).forEach((key) => {
+        inputs[key] = next[key] as never;
+        inputVer[key] += 1;
+      });
+      return begin(null);
+    },
+    update(source, value, part = null) {
+      if (busy) {
+        // 파생(단계 · 알림)이 입력에 쓰는 길 — 고리라 막음. 예외는 follow 반환값뿐.
+        blockedWrites += 1;
+        console.warn(`[pipeline] 계산 · 알림 안에서 입력 쓰기 막음: ${source}`);
+        return null;
+      }
+      const key = SOURCE_INPUT[source];
+      if (JSON.stringify(inputs[key]) === JSON.stringify(value)) return null;
+      inputs[key] = value as never;
+      inputVer[key] += 1;
+      const range = part
+        ? { sources: [source], fromM: part.fromM, toM: part.toM, keys: part.keys ?? [] }
+        : { sources: [source], fromM: 0, toM: Infinity, keys: [] };
+      return begin(range);
+    },
+    subscribe(fn) {
+      listeners.add(fn);
+      return () => listeners.delete(fn);
+    },
+    output(name) {
+      return out[name] as never;
+    },
+    input(key) {
+      return inputs[key];
+    },
+    get generation() {
+      return generation;
+    },
+    get blockedWrites() {
+      return blockedWrites;
+    },
+    async settled() {
+      while (inFlight.size) await Promise.allSettled([...inFlight]);
+    },
+    dispose() {
+      generation += 1;
+      controller.abort();
+      listeners.clear();
+    },
+  };
+}
+
+/** 가게 잇기 — 측점(ground 단계 · 지반 채움) · 종단 · 평면 발자국 · 차례 번호를 가게 키로. */
+export function publishToStore(store: DesignStore): (event: PipelineEvent) => void {
+  return (event) => {
+    if (event.kind === "generation") return store.set("generation", event.generation);
+    if (event.stage === "ground") {
+      store.set("stations", (event.value as PipelineOutputs["ground"] | null)?.stations ?? null);
+    } else if (event.stage === "profile") {
+      store.set("profile", event.value as PipelineOutputs["profile"] | null);
+    } else if (event.stage === "footprint") {
+      store.set("footprint", event.value as PipelineOutputs["footprint"] | null);
+    }
+  };
+}

A00_Common/design/logic/design_pipeline_stations.ts

@@ -0,0 +1,56 @@
+/* =============================================================================
+ * A00_Common/design/logic/design_pipeline_stations.ts
+ * 계산 묶음 stations 단계(PLAN 346-1) — 측점 계산은 `B05_Profile/logic/B05_Profile_Sections_Stations.ts`
+ * (서버 `generate_sections` 짝) · 여기는 단계 꼴 · 범위 밖 앞 값 재사용만.
+ * ========================================================================== */
+
+import {
+  buildStations,
+  REUSE_MARGIN_M,
+  type StationsOptions,
+} from "../../../B05_Profile/logic/B05_Profile_Sections_Stations";
+import type {
+  PlanPipe,
+  PlanStructure,
+  PlanType,
+} from "../../../common_util/common_util_structure_station";
+import type { PipelineStation, StageContext, StageFn } from "./design_pipeline_types";
+
+/** 범위 밖 측점은 앞 값(같은 열쇠 · 같은 자리)을 그대로 — 뒤 단계가 같은 객체로 「안 바뀜」을 앎. */
+export function reuseOutside(
+  next: PipelineStation[],
+  prev: ReadonlyArray<PipelineStation> | null,
+  range: { fromM: number; toM: number } | null,
+): PipelineStation[] {
+  if (!prev || !range) return next;
+  const old = new Map(prev.map((station) => [station.key, station]));
+  return next.map((station) => {
+    const inside =
+      station.chainageM >= range.fromM - REUSE_MARGIN_M &&
+      station.chainageM <= range.toM + REUSE_MARGIN_M;
+    const before = old.get(station.key);
+    return !inside && before && Math.abs(before.chainageM - station.chainageM) < 1e-9
+      ? before
+      : station;
+  });
+}
+
+/** stations 단계 — 입력 관 · 구조물(follow 뒤 누가거리) · 그린 노선 · 곡선표 · 노선 초안 스냅. */
+export function createStationsStage(
+  options: Omit<StationsOptions, "stationSnap" | "types"> & {
+    types: () => ReadonlyArray<PlanType>;
+  },
+): StageFn<"stations"> {
+  return (ctx: StageContext<"stations">) => {
+    const route = ctx.out.route;
+    if (!route) return [];
+    const next = buildStations(
+      route.line,
+      route.curves,
+      (ctx.inputs.pipes as PlanPipe[] | null) ?? [],
+      (ctx.inputs.structures as PlanStructure[] | null) ?? [],
+      { ...options, types: options.types(), stationSnap: ctx.inputs.route?.stationSnap ?? false },
+    );
+    return reuseOutside(next, ctx.prev, ctx.range);
+  };
+}

A00_Common/design/logic/design_pipeline_types.ts

@@ -0,0 +1,281 @@
+/* =============================================================================
+ * A00_Common/design/logic/design_pipeline_types.ts
+ * 실시간 계산 묶음 **계약**(PLAN 344-4) — 키별 모양 · 단계 입력 · 출력. 다른 창(sub1 · sub2 ·
+ * sub3 · sub6 · sub8)은 이 모양대로 단계 함수를 만들어 `createDesignPipeline({ stages })` 에 넣음.
+ * 계산 묶음 본체 = `design_pipeline.ts`.
+ *
+ * 흐름 — 한 방향:
+ *   입력  route(노선 초안) · alignment(계획고) · cross(횡단 입력) · pipes(관) · structures(구조물)
+ *     ↓   update(출처, 값, 범위) — 조작마다 차례 번호(generation) +1 · 옛 계산 · 옛 요청 버림
+ *   브라우저 즉시(차례대로 · 단계 사이마다 번호 확인 · 단계마다 결과 바로 내보냄)
+ *     route → follow → stations → ground → planline → profile → cross → footprint → masshaul
+ *   뒤(기다리지 않음 · 새 조작이 오면 AbortSignal 로 끊김 · 옛 번호 결과 버림)
+ *     haul(흙 배분 · 서버 Node) · drainage(배수유역 「낡음」 표시) · corridor(3D 「낡음」 표시)
+ *
+ * 규칙:
+ *   · 단계는 자기 출력만 돌려줌 — 입력 · 다른 단계 출력을 고치지 않음(ctx 의 값은 읽기만).
+ *   · 예외 하나 = follow — 노선이 바뀐 차례에만 · pipes · structures · alignment 를 한 번 고쳐
+ *     돌려줌(관 · 구조물 좌표 따라감 · 계획고 옮김). 묶음이 입력에 넣고 다음 단계로 감.
+ *   · 단계 함수가 없으면(아직 안 붙음) 건너뜀 — 출력은 앞 값 그대로(처음엔 null).
+ *   · 기대는 값(deps)의 판이 그대로면 다시 안 셈(같은 입력 다시 안 셈).
+ *   · range = 마지막으로 이 단계가 끝난 뒤 쌓인 바뀐 범위 전부 — 범위만 셈 · 범위 밖은 ctx.prev 재사용.
+ *
+ * 단계 · 주인 · 입력(deps) → 출력:
+ *   | 단계      | 주인     | deps                                   | 출력                  |
+ *   | route     | sub8     | input.route                            | RouteLine             |
+ *   | follow    | sub1     | route                                  | FollowPatch(입력 고침) |
+ *   | stations  | sub7     | route · input.pipes · input.structures | PipelineStation[](지반 null) |
+ *   | ground    | sub8     | stations                               | GroundOutput          |
+ *   | planline  | sub1     | ground                                 | AlignmentBase(첫 계획선) |
+ *   | profile   | sub1     | planline · input.alignment             | ProfileAlignment      |
+ *   | cross     | sub2     | profile · ground · input.cross · pipes · structures | CrossOutput |
+ *   | footprint | sub6     | cross · ground                         | PlanFootprint         |
+ *   | masshaul  | sub2     | cross                                  | unknown(sub2 모양)     |
+ *   | haul      | sub2     | masshaul                               | unknown(서버 응답)     |
+ *   | drainage  | sub3     | route · input.pipes                    | 「낡음」 표시(출력 안 씀) |
+ *   | corridor  | sub5     | profile · cross                        | 「낡음」 표시(출력 안 씀) |
+ *
+ * 가게 키(`design_store.ts`) — routeDraft(입력 · 세션 즉시) · stations(ground 단계 출력) ·
+ *   profile · footprint(메모리 우선 · 멈춘 뒤 한 번 세션) · generation(메모리만).
+ *
+ * 측점 열쇠(344-3 · `stationKey` · `B05_Profile/logic/B05_Profile_Sections_Stations.ts`):
+ *   | 측점         | 열쇠                    | 뜻                                                    |
+ *   | 일반(격자)   | grid:k                  | k = 원래 격자 번호(누가거리 ÷ 측점 간격 반올림) · 노선 모양이 바뀌어도 같은 번호 · 스냅으로 옮긴 측점은 원래 번호 |
+ *   | 관           | pipe:<id>               | 관 세션 id(없으면 `pipe-{누가거리 2자리}`)             |
+ *   | 구조물       | structure:<id>          | structure_id · 구간형 시작 · 끝 = `:start` · `:end` 덧붙임 |
+ *   | 시종점       | end:BP · end:EP         | 그 자리 관 · 구조물이 있어도 시종점(서버 bp · ep 와 같음) |
+ *   · 같은 m(0.005) 관 · 구조물이 겹치면 관 열쇠 하나 · 격자 자리에 얹히면 관 · 구조물 열쇠(격자는 숨음).
+ *   · 누가거리를 글로 쓸 때(초안 칸 · 서버 이월) 자릿수 0.01 m 하나 — `stationText`.
+ *   · 세션 횡단 초안 · 서버 이월을 이 열쇠로 바꾸는 일 = sub2(344-3 나머지).
+ * ========================================================================== */
+
+import type {
+  AlignmentBase,
+  AlignmentEdits,
+  ProfileAlignment,
+} from "../../../B05_Profile/logic/B05_Profile_UI_Profile_Alignment";
+
+/** 평면 좌표(m) — 도면 좌표계 x · y. */
+export type Vertex = [number, number];
+
+/* ── 입력 ───────────────────────────────────────────────────────────────── */
+
+/** 노선 초안 — 캐시 칸 `route-draft`(draft · project 범위) · [저장] 때 서버로 · 노선 편집기가 씀. */
+export interface RouteDraft {
+  /** 놓을 때마다 +1 — 같은 초안인지 보는 판 번호. */
+  rev: number;
+  /** 노드(시점 · 교각점 · 종점) — 사용자가 끄는 꺾임점. 원호는 route 단계가 만듦. */
+  nodes: Vertex[];
+  /** 꺾임점마다 곡선 둠 · 못박은 반경(m · null = 기본) · 붙든 값 · 붙든 곡선 길이(m). 길이 = nodes. */
+  curveOn: boolean[];
+  curveRadius: Array<number | null>;
+  curveLock: Array<"radius" | "arc" | null>;
+  curveArc: Array<number | null>;
+  /** [측점 스냅](요구 224-2) — 켜면 호 안 측점 하나를 곡선 중점으로. */
+  stationSnap: boolean;
+  /** 분석 지형(`las` · `sheet` · null = 확정 지표면) — ground 단계가 고를 격자. */
+  terrain: string | null;
+}
+
+/** 묶음이 받는 입력 다섯. 없으면 null(= 저장분 그대로). cross · pipes · structures 모양은 주인 몫. */
+export interface PipelineInputs {
+  route: RouteDraft | null;
+  alignment: AlignmentEdits | null;
+  /** 횡단 입력(crossdesign · cutslope · berm · std-cross 등 초안 묶음) — 모양 = sub2. */
+  cross: unknown;
+  /** 관 목록(`DetailPipeInput[]`) — 좌표가 정본 · 누가거리는 stations 가 다시 매김. */
+  pipes: unknown;
+  /** 구조물 목록(`StructureInstance[]`) — 위와 같음. */
+  structures: unknown;
+}
+
+export type InputKey = keyof PipelineInputs;
+
+/** 조작 출처 — 노선 · 계획고 · 횡단 · 관 · 구조물. */
+export type ChangeSource = "route" | "grade" | "cross" | "pipe" | "structure";
+
+/** 출처 → 입력 칸. */
+export const SOURCE_INPUT: Record<ChangeSource, InputKey> = {
+  route: "route",
+  grade: "alignment",
+  cross: "cross",
+  pipe: "pipes",
+  structure: "structures",
+};
+
+/**
+ * 바뀐 범위(누가거리 m) — 부르는 쪽이 정함:
+ *   노선 = 처음 바뀐 접선점부터 끝(toM = Infinity) · 계획고 = 이웃 꼭짓점 사이 · 횡단 = 그 측점(fromM = toM).
+ * 여러 조작이 쌓이면 합침(가장 앞 ~ 가장 뒤 · keys 는 모음). null = 전 구간.
+ */
+export interface ChangeRange {
+  sources: ChangeSource[];
+  fromM: number;
+  toM: number;
+  /** 측점 키로 정한 범위(횡단 조작) — 비면 거리로만. */
+  keys: string[];
+}
+
+/** update 가 받는 범위 한 조각 — sources 는 출처로 채움. */
+export interface RangePart {
+  fromM: number;
+  toM: number;
+  keys?: string[];
+}
+
+/* ── 출력 ───────────────────────────────────────────────────────────────── */
+
+/** route 단계 — 원호가 섞인 그린 노선(`_RouteEdit_Curve` 짝) · 누가거리. */
+/** 설계 곡선표 한 줄 — 서버 `RoutePlanCurve` · `EditedCurve` 와 같은 칸(반경 · 바깥쪽 · 스냅 재료). */
+export interface DesignCurve {
+  start: Vertex;
+  apex: Vertex;
+  end: Vertex;
+  radius_m: number;
+}
+
+export interface RouteLine {
+  line: Vertex[];
+  /** 설계 곡선표(없으면 빈 칸 = 측점마다 반경을 잼 · 서버와 같음). */
+  curves: DesignCurve[];
+  /** line 정점마다 누가거리(m). */
+  chainage: number[];
+  lengthM: number;
+}
+
+/** follow 단계 — 노선이 바뀐 차례에 한 번만 입력을 고침. 안 고치는 칸은 비움. */
+export interface FollowPatch {
+  pipes?: unknown;
+  structures?: unknown;
+  alignment?: AlignmentEdits;
+}
+
+/** 측점 종류 — 격자(간격) · 구조물 · 관 · 끝(시점 · 종점). */
+export type StationKind = "grid" | "structure" | "pipe" | "end";
+
+/** 횡단 지반 표본 한 점 — 중심에서 거리(m · 좌 +) · 높이(null = 빈칸). */
+export interface GroundSample {
+  offsetM: number;
+  z: number | null;
+}
+
+export interface StationGround {
+  centerZ: number | null;
+  /** 중심 → 바깥 차례 · offsetM 은 둘 다 양수. */
+  left: GroundSample[];
+  right: GroundSample[];
+}
+
+/** 측점 한 자리 — stations 가 만들고 ground 가 지반을 채움. 가게 키 `stations`. */
+export interface PipelineStation {
+  /** 측점 열쇠 — 머리 표(grid:k · pipe:<id> · structure:<id> · end:BP/EP). */
+  key: string;
+  chainageM: number;
+  x: number;
+  y: number;
+  /** 진행 방향(도 · 북 0 시계) · 좌측 단위 벡터(`_RouteEdit_Frame` 짝). */
+  azimuthDeg: number;
+  left: Vertex;
+  kind: StationKind;
+  /** 구조물 · 관 id — 격자 · 끝은 null. */
+  id: string | null;
+  /** ground 단계 전엔 null. */
+  ground: StationGround | null;
+  /** 평면 곡선반경(m · 직선 null) · 확폭이 붙는 바깥쪽 · 확폭량(m). */
+  planRadiusM: number | null;
+  curveOuterSide: "left" | "right" | null;
+  curveWideningM: number | null;
+}
+
+/** ground 단계 — 지반 채운 측점 · 종단 지반선(1 m). */
+export interface GroundOutput {
+  stations: PipelineStation[];
+  longitudinal: { chainageM: number[]; z: Array<number | null> };
+}
+
+/** cross 단계 — 측점 키 → 그 측점 결과(면적은 유토곡선 재료 · detail 모양 = sub2). */
+export interface CrossStationResult {
+  key: string;
+  chainageM: number;
+  cutAreaM2: number;
+  fillAreaM2: number;
+  detail: unknown;
+}
+
+export interface CrossOutput {
+  byKey: Record<string, CrossStationResult>;
+}
+
+/** footprint 단계 — 평면 발자국(도로 끝 · 비탈 끝) · 시점 → 종점 차례 · 가게 키 `footprint`. */
+export interface PlanFootprint {
+  roadLeft: Vertex[];
+  roadRight: Vertex[];
+  slopeLeft: Vertex[];
+  slopeRight: Vertex[];
+  /** 비탈 끝 점마다 깎기(true) · 쌓기 — slopeLeft · slopeRight 와 같은 차례(그리기가 색을 가름). */
+  slopeLeftCut: boolean[];
+  slopeRightCut: boolean[];
+  /** 비탈 표시 짧은 선 — [도로 끝 점, 비탈 쪽 점] 묶음. */
+  ticks: number[][][];
+  /** 측점마다 원자료(측점 열쇠 · 누가거리 · 좌우 도로 끝 · 비탈 끝 m · 깎기) — 범위 밖 재사용 ·
+   *  모양 = `B05_Profile/logic/B05_Profile_PlanFootprint.ts` `FootprintRecord`(sub6). */
+  records: Array<{ key?: string; chainage_m: number }>;
+}
+
+/** 단계 이름 → 출력. drainage · corridor 는 표시만 하므로 출력이 없음(null). */
+export interface PipelineOutputs {
+  route: RouteLine;
+  follow: FollowPatch;
+  stations: PipelineStation[];
+  ground: GroundOutput;
+  planline: AlignmentBase;
+  profile: ProfileAlignment;
+  cross: CrossOutput;
+  footprint: PlanFootprint;
+  masshaul: unknown;
+  haul: unknown;
+  drainage: null;
+  corridor: null;
+}
+
+export type StageName = keyof PipelineOutputs;
+
+/* ── 단계 함수 ──────────────────────────────────────────────────────────── */
+
+export interface StageContext<K extends StageName> {
+  /** 이 계산의 차례 번호 — 다르면 이미 버려진 계산. */
+  generation: number;
+  /** 마지막으로 이 단계가 끝난 뒤 쌓인 바뀐 범위(null = 전 구간 · 처음). */
+  range: ChangeRange | null;
+  /** 새 조작이 오면 끊김 — fetch 에 그대로 넘김. */
+  signal: AbortSignal;
+  /** 입력(읽기만). */
+  inputs: Readonly<PipelineInputs>;
+  /** 앞 단계 출력(이번 계산 것 · 없으면 null · 읽기만). */
+  out: Readonly<{ [S in StageName]: PipelineOutputs[S] | null }>;
+  /** 이번 계산 시작 때 출력 — follow 가 옛 노선(`before.route`)과 새 노선을 견줌. */
+  before: Readonly<{ [S in StageName]: PipelineOutputs[S] | null }>;
+  /** 이 단계 앞 출력 — 범위 밖을 재사용. */
+  prev: PipelineOutputs[K] | null;
+}
+
+export type StageFn<K extends StageName> = (
+  ctx: StageContext<K>,
+) => PipelineOutputs[K] | Promise<PipelineOutputs[K]>;
+
+export type PipelineStages = { [K in StageName]?: StageFn<K> };
+
+/* ── 시간 기록(window.__aisloPipeline · 개발용) ─────────────────────────── */
+
+export interface PipelineRunRecord {
+  generation: number;
+  sources: ChangeSource[];
+  /** 단계 → ms(뒤 단계는 끝난 때 채움 · 건너뜀은 안 적음). */
+  stages: Partial<Record<StageName, number>>;
+  /** 건너뛴 단계(같은 입력 · 함수 없음). */
+  skipped: StageName[];
+  /** 브라우저 단계 합 ms. */
+  totalMs: number;
+  /** done = 브라우저 단계 끝 · dropped = 새 조작에 밀려 버림 · error = 단계가 던짐. */
+  outcome: "running" | "done" | "dropped" | "error";
+}

A00_Common/design/logic/design_profile_free.ts

@@ -1,5 +1,5 @@
 /* =============================================================================
- * A00_Common/design/design_profile_free.ts
+ * A00_Common/design/logic/design_profile_free.ts
  * 종단 [자유지정] 계산 — 범위 · 클릭 점 · 측점선 붙음 · 높이 변환 · 기울기 판정 · 적용(215-1).
  *
  * 흐름: 세로 측점선 둘로 범위를 고름 → 시작(또는 끝) 세로선 근처 클릭 = 그 측점 계획고에 이은
@@ -17,16 +17,16 @@ import type {
   AlignmentBase,
   AlignmentEdits,
   ProfileAlignment,
-} from "../../B05_Profile/B05_Profile_UI_Profile_Alignment";
+} from "../../../B05_Profile/logic/B05_Profile_UI_Profile_Alignment";
 import {
   buildAlignment,
   chainageKey,
   controlElevationAt,
-} from "../../B05_Profile/B05_Profile_UI_Profile_Alignment";
+} from "../../../B05_Profile/logic/B05_Profile_UI_Profile_Alignment";
 import {
   baseElevationAt,
   defaultCurveLength,
-} from "../../B05_Profile/B05_Profile_UI_Profile_Straighten";
+} from "../../../B05_Profile/logic/B05_Profile_UI_Profile_Straighten";
 
 /** 두 chainage 를 같은 측점으로 볼 허용 오차(m). */
 const SAME_M = 1e-6;

A00_Common/design/logic/design_structure_ford_pavement.ts

@@ -2,13 +2,16 @@
  * design_structure_ford_pavement.ts
  * 횡단배수 › 물넘이 포장 명세 — 사용자 구조물 표 03(`docs/raw/구조물정의_표/03_횡단배수_물넘이포장.md`) 그대로.
  *
- * 컨테이너 둘: 경사각도(필수 · 각도 손 입력 · 도 + 월류 폭 · 높이 · 65-5) · 도수로/돌붙임(선택 · 구조 = 도수로 · 돌붙임).
- * 저장 = pipe_points.json `options` — 새 키 `ford_slope_deg` · 선택 컨테이너 `ford_chute_{n}_structure` ·
+ * 컨테이너 둘: 경사각도(필수 · 각도 손 입력 · 도 + 월류 폭 · 높이 · 65-5) · 도수로/돌붙임(선택 · 다른 구조물과
+ * 같은 칸 `CHUTE_ITEMS` + 맨 아래 길이 · 286-3).
+ * 저장 = pipe_points.json `options` — 새 키 `ford_slope_deg` · 선택 컨테이너 `ford_chute_{n}_*` ·
  * 월류 폭 · 높이 = 세월교와 같은 키(`ford_width_m` · `ford_height_m`) · 같은 계산(`design_structure_ford_calc`).
  * 경사각도는 옛 「바닥 경사(%)」(`ford_slope_pct` · B06 파임 기울기)와 뜻이 같은지 또렷하지 않아 잇지 않음.
- * import 없음 — 시험이 이 파일만 옮겨 돌림.
+ * 길이(`ford_chute_{n}_length_m`) = 횡단 · 3D 띠를 사면 따라 그릴 길이 — 그림 전용(수량 · 내역 · 일위대가에 안 씀) ·
+ * 비면 원지반까지.
  * ========================================================================== */
 
+import { CHUTE_ITEMS } from "./design_structure_guard";
 import type { StructureSpec } from "./design_structure_spec";
 
 export const FORD_PAVEMENT_SPEC: StructureSpec = {
@@ -32,20 +35,8 @@ export const FORD_PAVEMENT_SPEC: StructureSpec = {
       prefix: "ford_chute",
       link: "gfordpavechute",
       max: 1,
-      // 구조(기본 도수로) · 두께(cm · 기본 45 · 173-5) — 배관 · 박스 · 세월교 `CHUTE_ITEMS` 와 같은 칸(90-2)
-      items: [
-        {
-          id: "structure",
-          label: "구조",
-          kind: "select",
-          choices: [
-            { value: "도수로", label: "도수로" },
-            { value: "돌붙임", label: "돌붙임" },
-          ],
-          default: "도수로",
-        },
-        { id: "thickness", label: "두께 (cm)", kind: "number", step: 1, default: "45" },
-      ],
+      // 배관 · 박스 · 세월교와 같은 칸(구조 · 형태 · 두께 · 면적 · 맨 아래 길이 — 그림 전용 · 286-3 · 294-4)
+      items: CHUTE_ITEMS,
     },
   ],
   // 표 03 에 없는 옛 칸 — 화면에서 빼고 값은 남김(지난 정의 값)

A00_Common/design/logic/design_structure_guard.ts

@@ -144,6 +144,8 @@ export const CHUTE_ITEMS: SpecItem[] = [
   },
   { id: "thickness", label: "두께 (cm)", kind: "number", step: 1, default: "45" },
   { id: "area", label: "면적 (㎡)", kind: "number", step: 0.1, default: "30" },
+  // 길이(294-4 · `{접두}_{n}_length_m`) — 띠를 사면 따라 그릴 길이 · 그림 전용(수량 · 내역 · 일위대가에 안 씀)
+  { id: "length_m", label: "길이 (m)", kind: "number", step: 0.1 },
 ];
 
 /** 도수로/돌붙임(선택 · 하나만 · 54-48) — 옛 둘 이상은 보이되 [추가]만 숨김. */

A00_Common/design/logic/design_structure_pipe.ts

@@ -18,6 +18,7 @@ import { BOX_SPEC } from "./design_structure_box";
 import { FORD_SPEC } from "./design_structure_ford";
 import { FORD_PAVEMENT_SPEC } from "./design_structure_ford_pavement";
 import { ETC_SPEC, PAVEMENT_SPEC } from "./design_structure_road";
+import { baseType } from "../../../common_util/common_util_structure_catalog";
 
 const SOIL = "기슭막이"; // 저장 값(옛 키 그대로) — 화면 이름은 흙막이
 const BASIN = "집수정";
@@ -116,3 +117,7 @@ export const STRUCTURE_SPECS: Readonly<Record<string, StructureSpec>> = {
   pavement_concrete: PAVEMENT_SPEC,
   etc: ETC_SPEC,
 };
+
+/** 그 종류의 명세 — 복사한 종류는 본보기 명세(323-7 · `baseType`). 화면은 이것으로 고름(종류 키 직접 안 씀). */
+export const specFor = (typeId: string): StructureSpec | undefined =>
+  STRUCTURE_SPECS[baseType(typeId)];

A00_Common/design/logic/design_structure_spec.ts

@@ -120,6 +120,23 @@ export const linkOf = (c: SpecContainer, n: number): string =>
 const text = (value: unknown): string =>
   value === undefined || value === null ? "" : String(value);
 
+/** 항목이 쓰는 정의 옵션 키 — 필수 상자 저장 키 · 갈래 키(선택 상자 인스턴스 키는 옵션 밖 · 322-2 보임). */
+export const specItemKeys = (item: SpecItem): string[] =>
+  [item.key, ...Object.values(item.by?.map ?? {}).map((b) => b.key)].filter(
+    (key): key is string => !!key,
+  );
+
+/** 숨긴 항목인가 — 쓰는 키가 있고 모두 숨김(정의 「표시」 · 322-2). */
+export const specItemHidden = (item: SpecItem, hidden: ReadonlySet<string>): boolean => {
+  const keys = specItemKeys(item);
+  return keys.length > 0 && keys.every((key) => hidden.has(key));
+};
+
+/** 숨긴 상자인가 — 키 있는 항목이 하나 이상이고 모두 숨김. */
+export const specContainerHidden = (c: SpecContainer, hidden: ReadonlySet<string>): boolean =>
+  c.items.some((item) => specItemKeys(item).length > 0) &&
+  c.items.every((item) => !specItemKeys(item).length || specItemHidden(item, hidden));
+
 /** 옵션 → 컨테이너 값. 필수는 한 벌(상위 항목 먼저 읽어 갈래 키를 앎) · 선택은 저장된 n 차례대로. */
 export function readState(
   spec: StructureSpec,

A00_Common/device_context.css

@@ -0,0 +1,98 @@
+/* =============================================================================
+ * device_context.css — 기기 대응 공통 규칙(PLAN_기기대응 2-6)
+ * 모든 규칙은 `<html>` 표시(data-touch · data-size) 안에서만 — 데스크탑 마우스 화면은 안 바뀜.
+ * 표시는 `device_context.ts` 가 적음.
+ * ========================================================================== */
+
+/* 누를 자리 44px — 손가락(주 입력 coarse) 또는 터치 모드 켬 */
+html[data-touch="on"]
+  :is(
+    .ui-btn,
+    .ui-workflow-overlay__toggle,
+    .ui-sidebar-row,
+    .ui-workflow-layout__step,
+    .ui-ctx-menu__item,
+    select,
+    input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="color"])
+  ) {
+  min-height: 44px;
+}
+
+html[data-touch="on"] .ui-btn {
+  min-width: 44px;
+}
+
+/* 체크 · 라디오 — 상자를 키우고 글까지 한 줄 전체가 누를 자리 */
+html[data-touch="on"] :is(input[type="checkbox"], input[type="radio"]) {
+  width: 22px;
+  height: 22px;
+}
+
+html[data-touch="on"] .ui-checkbox {
+  min-height: 44px;
+}
+
+/* 접힌 좌측 패널 손잡이 — 손가락 폭 · 화면 왼쪽 끝 안 */
+html[data-touch="on"]
+  .ui-workflow-overlay__panel--title.is-collapsed
+  > .ui-workflow-overlay__handle--side {
+  width: 32px;
+  right: -32px;
+}
+
+/* 팝업(2-4) — 폭 600 미만은 전체 화면 · 겹치면 나중 것(맨 위)만 보이고 × 로 앞 창.
+   공용 모달(.ui-modal) · 페이지 팝업은 공용 클래스 `.ui-popup` 만 붙여 맞춤(자리 · 크기 인라인 값도 덮음) */
+html[data-size="compact"] :is(.ui-modal, .ui-popup) {
+  position: fixed !important;
+  inset: 0 !important;
+  width: auto !important;
+  height: auto !important;
+  min-width: 0 !important;
+  max-width: none !important;
+  max-height: none !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  transform: none !important;
+  overflow: auto;
+}
+
+html[data-size="compact"] .ui-confirm__panel {
+  min-width: 0;
+  max-width: calc(100vw - var(--spacing-32));
+}
+
+/* 공용 표(2-5) — 폭 840 미만은 고정 열이 없는 표도 첫 열을 붙임(머리줄은 늘 붙어 있음 · 가로는 밀기) */
+html:is([data-size="compact"], [data-size="medium"])
+  .ui-data-table__table:not(:has(.is-frozen))
+  tr
+  > :first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+}
+
+html:is([data-size="compact"], [data-size="medium"])
+  .ui-data-table__table:not(:has(.is-frozen))
+  thead
+  tr
+  > :first-child {
+  z-index: 3;
+}
+
+/* 터치 모드에서만 보이는 단추(자판 없는 기기용 · 4-3) — 마우스 화면엔 없음 */
+html:not([data-touch="on"]) .ui-touch-only {
+  display: none !important;
+}
+
+/* 위 줄 높이(6-1) — 화면 높이 계산이 모두 이 값을 씀 · 로그인 뒤 쪽(B · M)은 위 줄을 걷어 0(7-1)
+   ☰ 폭(7-4) · 들여쓰기(7-2) = 왼쪽 위에 뜬 ☰(자리 8 + 폭) + 틈 8 · 그 자리에 걸치는 첫 줄이 이만큼 왼쪽을 비움 */
+:root {
+  --app-header-h: 64px;
+  --app-burger-w: 36px;
+  --app-burger-inset: 0px;
+}
+
+html.is-bm-route {
+  --app-header-h: 0px;
+  --app-burger-inset: calc(var(--spacing-8) * 2 + var(--app-burger-w));
+}

A00_Common/device_context.ts

@@ -0,0 +1,123 @@
+/* =============================================================================
+ * device_context.ts
+ * 기기 상태 한 곳(요구 193~195 · PLAN_기기대응 2-1) — `<html>` 에 지금 상태를 늘 적음.
+ *
+ * - data-size        = compact(<600) · medium(<840) · expanded(<1200) · large  ← 배치는 이것만 봄
+ * - data-pointer     = 주 입력 coarse · fine(미디어 `pointer`)
+ * - data-input       = 마지막 누름의 pointerType(mouse · touch · pen)
+ * - data-touch-mode  = 사용자 스위치(auto · on · off · 이 기기 브라우저에만 저장)
+ * - data-touch       = on · off — 누를 자리 크기를 키울지(auto 면 주 입력 coarse 일 때)
+ * - data-burger      = on · off — 공개 쪽에서 ☰ 서랍이 메뉴를 맡는지(폭 900 이하 · 터치) · 로그인 뒤 쪽(B · M)은 늘 ☰(7-1)
+ * 바뀔 때만 window 에 `app:context` 이벤트(detail = 지금 상태).
+ * 경계 표는 여기 한 벌 — CSS 는 위 표시(data-size)로 가르고, 숫자가 필요하면 --bp-* 변수.
+ * 첫 화면 깜빡임 — 화면은 모두 JS 가 그리므로 main.ts 가 맨 먼저 import 하면 그리기 전에 적힘.
+ * ========================================================================== */
+
+import "./device_context.css";
+
+export const SIZE_BREAKS = { medium: 600, expanded: 840, large: 1200 } as const;
+/** 위 메뉴가 숨는 폭(app_shell `@media (max-width: 900px)` 과 짝) — 이하면 ☰ 서랍 */
+export const BURGER_MAX = 900;
+export type SizeClass = "compact" | "medium" | "expanded" | "large";
+export type TouchMode = "auto" | "on" | "off";
+
+export interface DeviceContext {
+  size: SizeClass;
+  pointer: "coarse" | "fine";
+  input: string;
+  touchMode: TouchMode;
+  touch: boolean;
+  burger: boolean;
+}
+
+const TOUCH_MODE_KEY = "frd_touch_mode";
+
+export function sizeClassOf(width: number): SizeClass {
+  if (width < SIZE_BREAKS.medium) return "compact";
+  if (width < SIZE_BREAKS.expanded) return "medium";
+  if (width < SIZE_BREAKS.large) return "expanded";
+  return "large";
+}
+
+let modeInMemory: TouchMode | null = null; // 저장이 막힌 브라우저용
+
+export function readTouchMode(): TouchMode {
+  if (modeInMemory) return modeInMemory;
+  try {
+    const v = localStorage.getItem(TOUCH_MODE_KEY);
+    return v === "on" || v === "off" ? v : "auto";
+  } catch {
+    return "auto";
+  }
+}
+
+const coarseQuery = window.matchMedia("(pointer: coarse)");
+let current: DeviceContext | null = null;
+let lastInput = "";
+
+function read(): DeviceContext {
+  const pointer = coarseQuery.matches ? "coarse" : "fine";
+  const touchMode = readTouchMode();
+  const touch = touchMode === "on" || (touchMode === "auto" && pointer === "coarse");
+  return {
+    size: sizeClassOf(window.innerWidth),
+    pointer,
+    input: lastInput || (pointer === "coarse" ? "touch" : "mouse"),
+    touchMode,
+    touch,
+    burger: touch || window.innerWidth <= BURGER_MAX,
+  };
+}
+
+function apply(): void {
+  const next = read();
+  if (current && JSON.stringify(current) === JSON.stringify(next)) return;
+  const html = document.documentElement;
+  html.dataset.size = next.size;
+  html.dataset.pointer = next.pointer;
+  html.dataset.input = next.input;
+  html.dataset.touchMode = next.touchMode;
+  html.dataset.touch = next.touch ? "on" : "off";
+  html.dataset.burger = next.burger ? "on" : "off";
+  const first = !current;
+  current = next;
+  if (!first) window.dispatchEvent(new CustomEvent("app:context", { detail: next }));
+}
+
+export function deviceContext(): DeviceContext {
+  return current ?? read();
+}
+
+/** 터치 모드 스위치(☰ 서랍) — 이 기기 브라우저에만 저장 */
+export function setTouchMode(mode: TouchMode): void {
+  modeInMemory = mode;
+  try {
+    if (mode === "auto") localStorage.removeItem(TOUCH_MODE_KEY);
+    else localStorage.setItem(TOUCH_MODE_KEY, mode);
+  } catch {
+    /* 저장 막힌 브라우저 — 이번 화면만 */
+  }
+  apply();
+}
+
+function init(): void {
+  const html = document.documentElement;
+  for (const [name, px] of Object.entries(SIZE_BREAKS))
+    html.style.setProperty(`--bp-${name}`, `${px}px`);
+  apply();
+  coarseQuery.addEventListener("change", apply);
+  window.addEventListener("resize", apply);
+  window.visualViewport?.addEventListener("resize", apply);
+  screen.orientation?.addEventListener("change", apply);
+  window.addEventListener(
+    "pointerdown",
+    (e) => {
+      if (e.pointerType === lastInput) return;
+      lastInput = e.pointerType;
+      apply();
+    },
+    { capture: true, passive: true },
+  );
+}
+
+init();

A00_Common/input_prefs.ts

@@ -0,0 +1,64 @@
+/* =============================================================================
+ * input_prefs.ts
+ * 마우스 · 단축키 설정 읽기 층(PLAN 332) — ☰ [설정] 창이 [저장] 때 계정 pref 로 씀.
+ *
+ * - 값 = `aislo:pref:input-prefs`(등록표 `input-prefs`) JSON 한 벌 · 부를 때마다 읽음(새로고침 없이 바로 따름)
+ * - 없음 · 깨짐 · Node(저장소 없음) = 기본값(= 지금 동작) · 의존 없음 · 불러올 때 window 안 만짐(CAD 도 import)
+ * - 휠 확대 방향 하나로 모든 화면 일체 — 기본 밂 = 휠을 앞으로(deltaY < 0) 굴리면 확대(오토캐드) · 당김 = 몸 쪽으로
+ * - 핀치(트랙패드 · 손가락)는 설정과 상관없이 늘 벌리면 확대(deltaY < 0)
+ * ========================================================================== */
+
+export type WheelZoom = "pull" | "push";
+
+export interface InputPrefs {
+  /** 휠 확대 방향 — pull = 당기면 확대 · push = 밀면 확대 */
+  wheelZoom: WheelZoom;
+  /** CAD 내 별칭 `{명령: [별칭]}`(대문자 · acad.pgp 식 — 명령 이름 > 내 별칭 > 기본 별칭) */
+  cadAliases: Record<string, string[]>;
+}
+
+/** `stateKey("input-prefs")` 와 같은 키(시험이 맞춰 봄) — 등록표를 불러오면 window 가 딸려 와서 글자로 둠 */
+export const INPUT_PREFS_KEY = "aislo:pref:input-prefs";
+
+export const DEFAULT_INPUT_PREFS: InputPrefs = { wheelZoom: "push", cadAliases: {} };
+
+const cleanAliases = (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)) continue;
+    const aliases = list
+      .filter((a): a is string => typeof a === "string")
+      .map((a) => a.toUpperCase());
+    if (aliases.length) out[id.toUpperCase()] = aliases;
+  }
+  return out;
+};
+
+/** 지금 설정 — 부를 때마다 저장소에서 읽음 */
+export function inputPrefs(): InputPrefs {
+  try {
+    const raw = globalThis.localStorage?.getItem(INPUT_PREFS_KEY);
+    if (!raw) return { ...DEFAULT_INPUT_PREFS, cadAliases: {} };
+    const value = JSON.parse(raw) as Partial<InputPrefs> | null;
+    return {
+      wheelZoom: value?.wheelZoom === "pull" ? "pull" : "push",
+      cadAliases: cleanAliases(value?.cadAliases),
+    };
+  } catch {
+    return { ...DEFAULT_INPUT_PREFS, cadAliases: {} };
+  }
+}
+
+/** 휠 한 번이 확대인가 — 설정 방향을 따름 */
+export const wheelIn = (deltaY: number): boolean =>
+  inputPrefs().wheelZoom === "pull" ? deltaY > 0 : deltaY < 0;
+
+/** 트랙패드 핀치 — 브라우저가 Ctrl+휠 · 잘게 쪼갠 값으로 냄
+ *  ponytail: |deltaY| < 50 로 마우스 Ctrl+휠(한 칸 ≥ 약 100)과 가름 · 잘게 도는 마우스는 핀치로 봄 */
+export const isTrackpadPinch = (e: Pick<WheelEvent, "ctrlKey" | "deltaY">): boolean =>
+  e.ctrlKey && Math.abs(e.deltaY) < 50;
+
+/** 휠 사건이 확대인가 — 핀치(`pinch` 손가락 벌림 · 트랙패드)는 늘 벌리면 확대 · 나머지는 설정 방향 */
+export const wheelEventIn = (e: Pick<WheelEvent, "ctrlKey" | "deltaY">, pinch = false): boolean =>
+  pinch || isTrackpadPinch(e) ? e.deltaY < 0 : wheelIn(e.deltaY);

A00_Common/m_settings_nav.ts

@@ -0,0 +1,98 @@
+/* =============================================================================
+ * m_settings_nav.ts
+ * 시스템 설정 바로가기(334 · 요구 225-2) — 대시보드 「시스템 설정」 카드 · M01 · M02 ☰ 가 같이 쓰는
+ * 역할 규칙 한 벌(`settingLinks`) · ☰ 진행 단계 자리에 🏠 대시보드 + 카드(`mountSettingsDrawer`).
+ * ========================================================================== */
+
+import { ROUTES, type RoutePath } from "@config/config_frontend";
+import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
+import { createStepBar } from "@ui/ui_template_workflow_layout";
+import { setDrawerSteps } from "./app_shell";
+import { currentRoute, navigateTo, takeLeaveGuard } from "./router";
+
+interface SettingUser {
+  role?: string;
+  is_master?: boolean;
+  company_id?: number | null;
+}
+
+/** key = M01 은 「m01」 · M02 는 진입 인자 `open` */
+export interface SettingLink {
+  key: string;
+  title: string;
+  desc: string;
+  route: RoutePath;
+  query?: Record<string, string>;
+}
+
+function L(key: keyof typeof ui_locales): string {
+  return ui_locales[key][currentLanguageIndex];
+}
+
+const ICONS: Record<string, string> = { m01: "🗄️", 구조물조합: "🧱", 옵션: "🎛️", 도면: "📑" };
+
+/** 시스템 설정 — 역할로 카드 숨김 · M02 카드는 `?open=&root=` 로 진입(27-1d) */
+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 m02 = (title: string, open: string, root: string, desc: string): SettingLink => ({
+    key: open,
+    title,
+    desc,
+    route: ROUTES.M02_MASTER_TEMPLATE,
+    query: { open, root, ...company },
+  });
+  // 구조물 조합 기본 층 = 개인(123-1 · 누구든) · 개인 층 없음(회사 없음) = 아래 역할 규칙
+  const comboRoot = (fallback: string): string => (user.company_id ? "personal" : fallback);
+  if (user.role === "SYSTEM_ADMIN") {
+    const desc = L("B01_Dashboard_PermMasterWrite");
+    return [
+      {
+        key: "m01",
+        title: L("B01_Dashboard_MasterElements"),
+        desc: L("B01_Dashboard_PermSourceRead"),
+        route: ROUTES.M01_MASTER_DATA,
+      },
+      m02(L("B01_Dashboard_CardStructCombo"), "구조물조합", comboRoot("master"), desc),
+      m02(L("B01_Dashboard_CardStructOption"), "옵션", "master", desc),
+      m02(L("B01_Dashboard_CardDrawing"), "도면", "master", desc),
+    ];
+  }
+  // 회사 수정 = 회사 관리자 · 회사 마스터(M02 accessFor 와 같은 규칙)
+  const companyAdmin = user.role === "ADMIN" || user.is_master;
+  const root = companyAdmin ? "company" : "personal";
+  const desc = [
+    L("B01_Dashboard_PermMasterRead"),
+    L(companyAdmin ? "B01_Dashboard_PermCompanyWrite" : "B01_Dashboard_PermCompanyRead"),
+    L("B01_Dashboard_PermPersonalWrite"),
+  ].join(" · ");
+  return [m02(L("B01_Dashboard_CardStructCombo"), "구조물조합", comboRoot(root), desc)];
+}
+
+/** ☰ 진행 단계 자리 — 🏠 대시보드 + 카드 · 지금 칸 강조 · 같은 길(M02 → M02)은 머리 가드가 안 물어 여기서 먼저 */
+export function mountSettingsDrawer(
+  user: SettingUser,
+  activeKey: string,
+  companyId: number | string | null,
+): void {
+  const links = settingLinks(user, companyId);
+  const bar = createStepBar(
+    links.map((link) => link.title),
+    links.findIndex((link) => link.key === activeKey),
+    {
+      orientation: "vertical",
+      icons: links.map((link) => ICONS[link.key] ?? ""),
+      routes: links.map((link) => link.route),
+      homeButton: true,
+      onStepClick: (index) => void go(links[index]),
+    },
+  );
+  setDrawerSteps(bar);
+}
+
+async function go(link: SettingLink): Promise<void> {
+  const guard = link.route === currentRoute() ? takeLeaveGuard() : null;
+  if (guard && !(await guard())) return;
+  navigateTo(link.route, link.query);
+}

A00_Common/main.ts

@@ -9,9 +9,12 @@
  * ========================================================================== */
 
 import "./random_uuid_polyfill";
+import "./device_context"; // 맨 앞 — 그리기 전에 <html> 기기 표시(기기대응 2-1)
+import "./touch_bridge"; // 손가락 → 마우스 번역(기기대응 3-1)
 import "@ui/ui_template_theme.css";
 import { injectBaseStyles } from "@ui/ui_template_elements";
 import { blockNativeMenu, NATIVE_MENU_ROUTE } from "@ui/ui_template_native_menu";
+import { initLoupe, LOUPE_ROUTE } from "@ui/ui_template_loupe";
 import { ROUTES, type RoutePath } from "@config/config_frontend";
 import { initThemeAndLang, injectShellStyles, renderShell } from "./app_shell";
 import {
@@ -19,6 +22,7 @@ import {
   renderCurrentRoute,
   ensureInitialHash,
   setLeaveGuard,
+  draftRoute,
   showWithinPage,
   takeLeaveGuard,
 } from "./router";
@@ -54,6 +58,8 @@ function bootstrap(): void {
 
   // B · M 페이지는 브라우저 기본 오른쪽 클릭 메뉴를 막음 — 우리 메뉴는 그대로(계획서 39-9a)
   blockNativeMenu(window, () => NATIVE_MENU_ROUTE.test(currentRoute()));
+  // B01~B09 · M01 · M02 돋보기 — 오른쪽 길게 누름 · Z 누름 동안(계획서 218-1 · 220)
+  initLoupe(window, () => LOUPE_ROUTE.test(currentRoute()));
 
   // 3. 셸 렌더 + 현재 라우트 렌더를 함께 수행하는 헬퍼
   let shown = "";
@@ -67,7 +73,8 @@ function bootstrap(): void {
     shown = currentRoute();
     shownHash = window.location.hash;
     if (within) return;
-    const showFooter = !FOOTERLESS_ROUTES.includes(currentRoute());
+    const showFooter =
+      !FOOTERLESS_ROUTES.includes(currentRoute()) && !draftRoute(currentRoute())?.footerless;
     const outlet = renderShell(appRoot, showFooter); // 헤더/푸터(로그인·언어 반영) 갱신
     void renderCurrentRoute(outlet); // 아울렛에 페이지 렌더
   };

A00_Common/router.ts

@@ -74,6 +74,29 @@ const routeTable: Partial<Record<RoutePath, () => Promise<PageRenderer>>> = {
     (await import("../M02_MasterTemplete/M02_MasterTemplete_UI_Page")).renderM02MasterTemplate,
 };
 
+/** 초안 길(302-1) — 페이지 폴더 `draft/*_Route.ts` 의 `ROUTE` 선언 · 폴더째 지우면 길도 없음.
+ *  정적 표에 이름을 박지 않음 — 보호 · 단계 화면(로그인 · 회사) · 프로젝트 · 꼬리말 없음도 선언에서. */
+export interface DraftRoute {
+  path: string;
+  load: () => Promise<PageRenderer>;
+  /** 로그인 · 회사 필요(B 단계 화면) — 로그인만이면 protected */
+  workflow?: boolean;
+  protected?: boolean;
+  /** 현재 프로젝트로 여는 화면(지워진 프로젝트 안내) */
+  project?: boolean;
+  footerless?: boolean;
+}
+
+const DRAFT_ROUTES = new Map(
+  Object.values(import.meta.glob<{ ROUTE: DraftRoute }>("../*/draft/*_Route.ts", { eager: true }))
+    .map((m) => m.ROUTE)
+    .filter(Boolean)
+    .map((r) => [r.path, r] as const),
+);
+
+/** 초안 길 선언(없으면 undefined) */
+export const draftRoute = (route: string): DraftRoute | undefined => DRAFT_ROUTES.get(route);
+
 /** 페이지가 떠나기 전에 묻는 자리 — false 를 돌려주면 이동을 취소(주소도 되돌림). 이동이 끝나면 비워짐. */
 let leaveGuard: (() => Promise<boolean>) | null = null;
 export const setLeaveGuard = (guard: (() => Promise<boolean>) | null): void => {
@@ -159,7 +182,9 @@ export async function renderCurrentRoute(outlet: HTMLElement): Promise<void> {
   mounted?.dispose();
   mounted = null;
 
-  if (PROTECTED_ROUTES.includes(route) && !(await isAuthenticated())) {
+  const draft = draftRoute(route);
+  const guarded = PROTECTED_ROUTES.includes(route) || !!(draft?.protected || draft?.workflow);
+  if (guarded && !(await isAuthenticated())) {
     navigateTo(ROUTES.A06_LOGIN);
     return;
   }
@@ -178,7 +203,7 @@ export async function renderCurrentRoute(outlet: HTMLElement): Promise<void> {
     ROUTES.B11_LOADING,
   ];
 
-  if (workflowRoutes.includes(route)) {
+  if (workflowRoutes.includes(route) || draft?.workflow) {
     const { fetchSessionUser } = await import("../A06_Login/A06_Login_Api_Fetch");
     try {
       const user = await fetchSessionUser();
@@ -197,7 +222,7 @@ export async function renderCurrentRoute(outlet: HTMLElement): Promise<void> {
   }
 
   // 기억한 현재 프로젝트가 지워졌으면 페이지 대신 안내 — 모든 B 단계 화면이 여기 한 곳을 지난다.
-  if (PROJECT_ROUTES.includes(route)) {
+  if (PROJECT_ROUTES.includes(route) || draft?.project) {
     const { dropGoneProject } = await import("./b_workflow_nav");
     if (await dropGoneProject()) {
       if (seq !== renderSeq) return;
@@ -208,7 +233,7 @@ export async function renderCurrentRoute(outlet: HTMLElement): Promise<void> {
     }
   }
 
-  const loader = routeTable[route];
+  const loader = routeTable[route] ?? draft?.load;
   if (!loader) {
     renderPlaceholder(outlet, route);
     return;

A00_Common/spreadsheet/spreadsheet.ts

@@ -16,6 +16,7 @@ import { parseA1, rangeToA1, toA1 } from "./spreadsheet_address";
 import { attachClipboard, pasteTableAt, type PasteCheck } from "./spreadsheet_clipboard";
 import { applyCommand, CommandError } from "./spreadsheet_commands";
 import { createEditor, slotOf } from "./spreadsheet_editor";
+import { mountTouchKeys } from "./spreadsheet_touch_keys";
 import { toCalcValue } from "./spreadsheet_eval";
 import { attachExtras } from "./spreadsheet_extras";
 import { createCalcEngine } from "./spreadsheet_graph";
@@ -27,7 +28,7 @@ import type { LinkOptions, Links } from "./spreadsheet_links";
 import { linkCommand, type LinkInfo } from "./spreadsheet_link_set";
 import { attachMenu } from "./spreadsheet_menu";
 import { attachMouse } from "./spreadsheet_mouse";
-import { LAST_C, LAST_R, selectCell } from "./spreadsheet_selection";
+import { LAST_C, LAST_R, selectCell, selectRanges } from "./spreadsheet_selection";
 import { createStatusBar } from "./spreadsheet_statusbar";
 import { mountTabs } from "./spreadsheet_tabs";
 import { mountToolbar } from "./spreadsheet_toolbar";
@@ -89,6 +90,9 @@ export interface SpreadsheetHandle {
   /** HTML 표를 지금 시트 고른 칸(왼위)부터 붙임(105-1 도면 → 면적) — 붙여넣기와 같은 길(병합 · 되돌리기 한 번) ·
    * `check` = 덮을 자리의 값 칸 · 알약 칸 수 · 범위 → false 면 안 붙임 · 붙인 범위 A1 · 읽기만 · 못 하면 null */
   pasteTable(html: string, check?: PasteCheck): Promise<string | null>;
+  /** 범위 고름 · 보이게 굴림(329-2 엑셀 보기 창) — `시트` = id 나 이름(없으면 지금 시트 · 다르면 그 탭으로) ·
+   * 범위 여럿 = 여러 고름 · 시트가 없거나 주소가 틀리면 false(고름 그대로) */
+  select(범위: string | string[], 시트?: string): boolean;
   destroy(): void;
 }
 
@@ -161,6 +165,7 @@ export function createSpreadsheet(
   const extras = attachExtras(ctx, ed, toolbar?.root ?? null);
   others.push(...extras.parts);
   const detachKeys = attachKeys(ctx, ed, extras.keys);
+  mountTouchKeys(ctx, ed); // 자판 없는 기기 단추 줄(기기대응 4-3 · 터치 모드에서만 보임)
   const detachMouse = attachMouse(ctx, ed, extras.mouse);
   /** `addSheet` 가 나중에 붙인 탭 줄(탭 없이 띄운 시트) */
   let lateTabs: PartHandle | null = null;
@@ -348,6 +353,18 @@ export function createSpreadsheet(
       return 이름;
     },
     pasteTable: (html, check) => pasteTableAt(ctx, html, check),
+    select(range, sheetKey) {
+      const target = sheetKey
+        ? ctx.book.시트.find((s) => s.id === sheetKey || s.이름 === sheetKey)
+        : ctx.sheet();
+      const next = target && selectRanges(target, typeof range === "string" ? [range] : range);
+      if (!target || !next) return false;
+      showSheet(target.id);
+      if (ctx.selection.시트 !== target.id) return false; // 편집기 유효성에 막힘
+      select(next, true);
+      grid.reveal(next.활성.r, next.활성.c); // 범위가 판보다 크면 왼위가 보이게
+      return true;
+    },
     destroy() {
       clearTimeout(toastTimer);
       detachKeys();

A00_Common/spreadsheet/spreadsheet_area_table.ts

@@ -8,7 +8,7 @@
  * ========================================================================== */
 
 import { colName, parseRange, rangeToA1, rangesOverlap, toA1 } from "./spreadsheet_address";
-import { cellStyleAt } from "./spreadsheet_cellstyle";
+import { cellStyleAt, shownHAlign } from "./spreadsheet_cellstyle";
 import { createCalcEngine } from "./spreadsheet_graph";
 import { DEFAULT_COL_CHARS, DEFAULT_ROW_PT } from "./spreadsheet_headers";
 import { resolveName } from "./spreadsheet_names";
@@ -110,7 +110,7 @@ export function areaTable(ask: TableAsk) {
         : { 글: "", 정렬: "left" as const };
     const key = `${sheet.id}!${toA1(r, c)}`;
     값[key] = shown.글;
-    const align = ALIGN[style.가로 ?? "general"] ?? (shown.정렬 as TableCell["align"]);
+    const align: TableCell["align"] = ALIGN[shownHAlign(style.가로)] ?? "center"; // 안 준 칸 = 가운데(237-1)
     return { text: shown.글, align, ...(style.굵게 ? { bold: true } : {}), key };
   };
   const cells = rows.map((r) =>

A00_Common/spreadsheet/spreadsheet_cellstyle.ts

@@ -139,9 +139,9 @@ function borderCss(side: BorderSide | undefined, scale: number): string {
   }
 }
 
-/** 가로 정렬 → `text-align`(균등 분할 · 선택 영역 가운데는 근사: `justify` · `center`). */
+/** 가로 정렬 → `text-align`(균등 분할 · 선택 영역 가운데는 근사: `justify` · `center`). 안 준 칸(일반) = 가운데(237-1). */
 const HALIGN_CSS: Record<HAlign, string> = {
-  general: "left",
+  general: "center",
   left: "left",
   right: "right",
   center: "center",
@@ -149,13 +149,23 @@ const HALIGN_CSS: Record<HAlign, string> = {
   centerContinuous: "center",
 };
 
+/** 칸에 맞춤을 안 준(없음 · 일반) 보이는 가로 맞춤 = 가운데 — 화면 · 도구줄 · 대화상자 · 내보내기 공통(237-1). */
+export function shownHAlign(h: HAlign | undefined): HAlign {
+  return !h || h === "general" ? "center" : h;
+}
+
+/** 칸에 맞춤을 안 준 보이는 세로 맞춤 = 가운데(237-1). */
+export function shownVAlign(v: VAlign | undefined): VAlign {
+  return v ?? "center";
+}
+
 const VALIGN_CSS: Record<VAlign, string> = {
   top: "flex-start",
   center: "center",
   bottom: "flex-end",
 };
 
-/** 칸 하나에 서식 · 겹쳐 고른 테두리를 입힘. `hAlign` 은 부른 쪽이 정함(일반 정렬은 값 종류로 갈림 — B `formatValue` 의 `정렬`).
+/** 칸 하나에 서식 · 겹쳐 고른 테두리를 입힘. `hAlign` 은 부른 쪽이 정함(일반 = 가운데).
  * `scale` = 확대 · 축소 배율(칸 글자 크기 · 테두리 굵기가 같이 커짐 · 기본 1). */
 export function applyCellStyle(
   cell: HTMLElement,
@@ -178,7 +188,7 @@ export function applyCellStyle(
   s.borderLeft = borderCss(borders.왼, scale);
   s.borderBottom = borderCss(borders.아래, scale);
   s.borderRight = borderCss(borders.오른, scale);
-  s.justifyContent = VALIGN_CSS[style.세로 ?? "bottom"];
+  s.justifyContent = VALIGN_CSS[shownVAlign(style.세로)];
   s.whiteSpace = style.줄바꿈 ? "normal" : "nowrap";
 
   let text = cell.firstElementChild as HTMLElement | null;
@@ -187,7 +197,7 @@ export function applyCellStyle(
     text.className = "aislo-cell__text";
     cell.replaceChildren(text);
   }
-  text.style.textAlign = HALIGN_CSS[hAlign];
+  text.style.textAlign = HALIGN_CSS[shownHAlign(hAlign)];
   text.style.textAlignLast = hAlign === "distributed" ? "justify" : "";
 }
 

A00_Common/spreadsheet/spreadsheet_clipboard.ts

@@ -14,6 +14,7 @@
 
 import { showToast } from "@ui/ui_template_elements";
 import { colName, parseA1, parseRange, toA1 } from "./spreadsheet_address";
+import { shownHAlign, shownVAlign } from "./spreadsheet_cellstyle";
 import { clipWholeToUsed } from "./spreadsheet_grid_cells";
 import { formatValue } from "./spreadsheet_numfmt";
 import { moveFormula, r1c1ToA1 } from "./spreadsheet_refshift";
@@ -70,10 +71,11 @@ function styleToCss(style: CellStyle): string {
   if (deco) parts.push(`text-decoration:${deco}`);
   if (style.글자색) parts.push(`color:${style.글자색}`);
   if (style.채움) parts.push(`background-color:${style.채움}`);
-  if (style.가로 && style.가로 !== "general") {
-    parts.push(`text-align:${style.가로 === "centerContinuous" ? "center" : style.가로}`);
-  }
-  if (style.세로) parts.push(`vertical-align:${style.세로 === "center" ? "middle" : style.세로}`);
+  // 안 준 칸 = 가운데 · 가운데(237-1) — 밖(엑셀)에서도 같은 모양
+  const h = shownHAlign(style.가로);
+  parts.push(`text-align:${h === "centerContinuous" ? "center" : h}`);
+  const v = shownVAlign(style.세로);
+  parts.push(`vertical-align:${v === "center" ? "middle" : v}`);
   if (style.줄바꿈) parts.push("white-space:pre-wrap");
   if (style.테두리) {
     (["위", "아래", "왼", "오른"] as const).forEach((side) => {

A00_Common/spreadsheet/spreadsheet_data_menu.ts

@@ -129,7 +129,7 @@ export function mountDataMenu(ctx: SpreadsheetContext, back: () => void): DataMe
     attrs: { type: "button", title: TEXT.close },
   });
   const dialog = el("div", {
-    className: "ss-dialog",
+    className: "ss-dialog ui-popup",
     attrs: { hidden: "" },
     children: [el("div", { className: "ss-dialog__head", children: [title, shut] }), body],
   });

A00_Common/spreadsheet/spreadsheet_editor.ts

@@ -294,7 +294,7 @@ export function createEditor(ctx: SpreadsheetContext): Editor {
     ta.style.fontSize = s.크기 ? `${s.크기}pt` : "";
     ta.style.fontWeight = s.굵게 ? "bold" : "";
     ta.style.fontStyle = s.기울임 ? "italic" : "";
-    ta.style.textAlign = s.가로 === "right" || s.가로 === "center" ? s.가로 : "";
+    ta.style.textAlign = s.가로 === "left" || s.가로 === "right" ? s.가로 : "center";
     // 글이 길면 오른쪽 · 아래로 늘림(엑셀)
     ta.style.width = "0";
     ta.style.height = "0";
@@ -303,6 +303,14 @@ export function createEditor(ctx: SpreadsheetContext): Editor {
   }
 
   function focus(): void {
+    // 손가락 — 고칠 때만 화면 자판(기기대응 4-2) · 칸 고름만으로는 안 뜸
+    if (document.documentElement.dataset.touch === "on") {
+      const mode = st ? "text" : "none";
+      if (ta.inputMode !== mode) {
+        ta.inputMode = mode;
+        if (document.activeElement === ta) ta.blur();
+      }
+    }
     if (document.activeElement !== ta) ta.focus({ preventScroll: true });
   }
 

A00_Common/spreadsheet/spreadsheet_eval_steps.ts

@@ -210,7 +210,7 @@ export function openEvalSteps(ctx: SpreadsheetContext): () => void {
     onClick: () => go(i + 1 < steps.length ? i + 1 : 0),
   });
   const box = el("div", {
-    className: "ss-steps__box",
+    className: "ss-steps__box ui-popup",
     attrs: { role: "dialog", "aria-label": t("Title") },
   });
   const shade = el("div", { className: "ss-steps", children: [box] });

A00_Common/spreadsheet/spreadsheet_format_dialog.ts

@@ -23,7 +23,7 @@ import {
   type NegStyle,
 } from "./spreadsheet_format_code";
 import { dialogKeys } from "./spreadsheet_actions";
-import { isAutoInk } from "./spreadsheet_cellstyle";
+import { isAutoInk, shownHAlign, shownVAlign } from "./spreadsheet_cellstyle";
 import { formatValue } from "./spreadsheet_numfmt";
 import type { BorderLine, BorderSide, CellStyle, HAlign, VAlign } from "./spreadsheet_types";
 import type { SpreadsheetContext } from "./spreadsheet_view_types";
@@ -233,7 +233,7 @@ export function openFormatDialog(ctx: SpreadsheetContext): void {
         ["centerContinuous", "선택 영역 가운데"],
       ].map(([v, t]) => el("option", { attrs: { value: v }, text: t })),
     }) as HTMLSelectElement;
-    hSelect.value = draft.가로 ?? "general";
+    hSelect.value = shownHAlign(draft.가로);
     hSelect.addEventListener("change", () => (draft.가로 = hSelect.value as HAlign));
 
     const vSelect = el("select", {
@@ -243,7 +243,7 @@ export function openFormatDialog(ctx: SpreadsheetContext): void {
         ["bottom", "아래"],
       ].map(([v, t]) => el("option", { attrs: { value: v }, text: t })),
     }) as HTMLSelectElement;
-    vSelect.value = draft.세로 ?? "bottom";
+    vSelect.value = shownVAlign(draft.세로);
     vSelect.addEventListener("change", () => (draft.세로 = vSelect.value as VAlign));
 
     const wrapCheck = el("input", { attrs: { type: "checkbox" } }) as HTMLInputElement;

A00_Common/spreadsheet/spreadsheet_grid.css

@@ -263,3 +263,16 @@
 .ss--editing .aislo-cell.is-selected.is-spill > .aislo-cell__text {
   visibility: hidden;
 }
+
+/* 손가락(기기대응 4-2) — 채우기 손잡이를 키움 · 격자는 한 손가락 밀기만 브라우저에(두 손가락 = 격자 확대) */
+html[data-touch="on"] .aislo-grid__fill-handle {
+  width: 14px;
+  height: 14px;
+  margin: -4px 0 0 -4px;
+}
+
+@media (any-pointer: coarse) {
+  .aislo-grid {
+    touch-action: pan-x pan-y;
+  }
+}

A00_Common/spreadsheet/spreadsheet_grid.ts

@@ -13,6 +13,7 @@
 
 import "./spreadsheet_grid.css";
 import { colIndex, toA1 } from "./spreadsheet_address";
+import { wheelZoomsIn } from "../touch_bridge";
 import {
   buildColGeometry,
   buildOutlineRuns,
@@ -271,7 +272,8 @@ export function createGrid(ctx: SpreadsheetContext): GridHandle {
     if (!ev.ctrlKey) return;
     ev.preventDefault();
     const before = zoom;
-    const next = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, zoom * Math.exp(-ev.deltaY * 0.0015)));
+    const step = (wheelZoomsIn(ev) ? 1 : -1) * Math.abs(ev.deltaY) * 0.0015; // ☰ [설정] 방향(332)
+    const next = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, zoom * Math.exp(step)));
     if (next === before) return;
     zoom = next;
     colGeo = scaledGeometry(baseColGeo, zoom);
@@ -553,7 +555,12 @@ export function createGrid(ctx: SpreadsheetContext): GridHandle {
     const handleAt = sel && sel.시트 === ctx.sheet().id ? fillHandleCell() : null;
     if (handleAt) {
       const screen = screenBoxOf(handleAt.r, handleAt.c);
-      if (Math.abs(x - (screen.x + screen.w)) <= 5 && Math.abs(y - (screen.y + screen.h)) <= 5) {
+      // 손가락이면 손잡이 잡는 자리를 넓힘(기기대응 4-2)
+      const grip = document.documentElement.dataset.touch === "on" ? 20 : 5;
+      if (
+        Math.abs(x - (screen.x + screen.w)) <= grip &&
+        Math.abs(y - (screen.y + screen.h)) <= grip
+      ) {
         return { kind: "fillHandle", r: handleAt.r, c: handleAt.c };
       }
     }

A00_Common/spreadsheet/spreadsheet_grid_cells.ts

@@ -13,6 +13,7 @@ import {
   isAutoInk,
   resolveBoxBorders,
   setCellText,
+  shownHAlign,
   type ResolvedBorders,
 } from "./spreadsheet_cellstyle";
 import type { LineGeometry, OutlineRun } from "./spreadsheet_headers";
@@ -139,7 +140,7 @@ export function buildMergeMap(sheet: Sheet): Map<string, CellRange> {
 }
 
 const SPILL_ALIGN: Partial<Record<HAlign, SpillAlign>> = {
-  general: "left",
+  general: "center",
   left: "left",
   right: "right",
   center: "center",
@@ -218,7 +219,7 @@ function cellDisplay(
   const scalar = scalarAt(ctx, sheet, r, c);
   const formatted = formatValue(scalar, code);
   const isError = typeof scalar === "object" && scalar !== null && "error" in scalar;
-  const hAlign: HAlign = hAlign0 !== "general" ? hAlign0 : formatted.정렬;
+  const hAlign: HAlign = shownHAlign(hAlign0); // 안 준 칸 = 가운데(237-1)
   const title = isError ? ((scalar as ErrorValue).why ?? formatted.글) : "";
   const isNumeric =
     !isError && scalar !== null && typeof scalar !== "string" && typeof scalar !== "boolean";

A00_Common/spreadsheet/spreadsheet_mouse.ts

@@ -255,11 +255,61 @@ export function attachMouse(
   };
   const onLeave = (): void => hooks.hover?.(null);
 
+  // 손가락(기기대응 4-2) — 톡 = 칸 고름(브라우저 호환 마우스 그대로) · 고른 칸 · 행열 머리 · 채우기 손잡이에서
+  // 끌기 = 범위 · 채우기(마우스 끌기와 같은 길) · 안 고른 칸에서 끌기 = 화면 밀기 ·
+  // 두 번 톡 = 고침(손 동작 안에서 바로 열어 화면 자판이 뜸)
+  let touchDrag = false;
+  let lastTap = 0;
+  const asMouse = (t: Touch, type: string): MouseEvent =>
+    new MouseEvent(type, { clientX: t.clientX, clientY: t.clientY, button: 0, bubbles: true });
+  const onTouchStart = (e: TouchEvent): void => {
+    if (e.touches.length !== 1 || e.target === ed.ta) return;
+    const t = e.touches[0];
+    const hit = ctx.grid.hitTest(t.clientX, t.clientY);
+    const grab =
+      hit &&
+      (hit.kind === "fillHandle" ||
+        hit.kind === "rowHead" ||
+        hit.kind === "colHead" ||
+        (hit.kind === "cell" && inSelection(hit.r, hit.c)));
+    if (!grab) return;
+    e.preventDefault(); // 화면 밀기 대신 범위 · 호환 마우스 이벤트도 안 옴
+    touchDrag = true;
+    onDown(asMouse(t, "mousedown"));
+  };
+  const onTouchMove = (e: TouchEvent): void => {
+    if (!touchDrag) return;
+    e.preventDefault();
+    root.dispatchEvent(asMouse(e.touches[0], "mousemove")); // 올라가 window 끌기 듣개에 닿음
+  };
+  const onTouchEnd = (e: TouchEvent): void => {
+    if (touchDrag) {
+      touchDrag = false;
+      root.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, button: 0 })); // M02 칸 고르기도 받음
+    }
+    if (e.touches.length || e.changedTouches.length !== 1) return;
+    const t = e.changedTouches[0];
+    const hit = ctx.grid.hitTest(t.clientX, t.clientY);
+    const now = Date.now();
+    if (now - lastTap < 350 && hit?.kind === "cell" && !ed.editing() && !ctx.readOnly) {
+      lastTap = 0;
+      ed.begin();
+      return;
+    }
+    lastTap = now;
+  };
+
   root.addEventListener("mousedown", onDown);
   root.addEventListener("dblclick", onDbl);
   root.addEventListener("mousemove", onHover);
   root.addEventListener("mouseleave", onLeave);
+  root.addEventListener("touchstart", onTouchStart, { passive: false });
+  root.addEventListener("touchmove", onTouchMove, { passive: false });
+  root.addEventListener("touchend", onTouchEnd);
   return () => {
+    root.removeEventListener("touchstart", onTouchStart);
+    root.removeEventListener("touchmove", onTouchMove);
+    root.removeEventListener("touchend", onTouchEnd);
     root.removeEventListener("mousemove", onHover);
     root.removeEventListener("mouseleave", onLeave);
     stopDrag?.();

A00_Common/spreadsheet/spreadsheet_selection.ts

@@ -91,6 +91,20 @@ export function selectSpan(sheet: Sheet, anchor: CellAddress, to: CellAddress):
   return { 시트: sheet.id, 범위: [g], 활성: { ...anchor }, 기준: { ...anchor } };
 }
 
+/** A1 범위 글 여럿 → 고름(329-2 손잡이 `select`) — 병합만큼 늘림 · 활성 = 첫 범위 왼위 · 틀린 글 · 빈 목록 = null */
+export function selectRanges(sheet: Sheet, texts: string[]): Selection | null {
+  const list = merges(sheet);
+  const 범위: CellRange[] = [];
+  for (const t of texts) {
+    const g = parseRange(t);
+    if (!g) return null;
+    범위.push(expand(g, list));
+  }
+  if (!범위.length) return null;
+  const at = { r: 범위[0].r0, c: 범위[0].c0 };
+  return { 시트: sheet.id, 범위, 활성: at, 기준: { ...at } };
+}
+
 /** 행 전체(r0~r1) · 열 전체(c0~c1) · 전체 — 활성은 첫 보이는 칸 · 걸친 병합만큼 늘림(엑셀) */
 export function selectRows(sheet: Sheet, a: number, b: number, active?: number): Selection {
   const r0 = Math.min(a, b);

A00_Common/spreadsheet/spreadsheet_sort_dialog.ts

@@ -87,7 +87,7 @@ export function openSortDialog(ctx: SpreadsheetContext): () => void {
   const caseBox = el("input", { attrs: { type: "checkbox" } });
   const list = el("div", { className: "ss-sort__keys" });
   const box = el("div", {
-    className: "ss-sort__box",
+    className: "ss-sort__box ui-popup",
     attrs: { role: "dialog", "aria-label": t("Title") },
   });
   const shade = el("div", { className: "ss-sort", children: [box] });

A00_Common/spreadsheet/spreadsheet_text.ts

@@ -15,6 +15,7 @@ export function setSpreadsheetLanguage(index: 0 | 1): void {
 
 const TEXT = {
   Undo: ["되돌리기", "Undo"],
+  CellMenu: ["칸 메뉴(우클릭과 같음)", "Cell menu (same as right-click)"],
   Redo: ["다시", "Redo"],
   FontName: ["글꼴", "Font"],
   FontSize: ["크기", "Size"],

A00_Common/spreadsheet/spreadsheet_toolbar.css

@@ -291,3 +291,23 @@
   justify-content: flex-end;
   gap: var(--spacing-8);
 }
+
+/* ⋯ 칸 메뉴(기기대응 3-5) — 터치 모드에서만 */
+.ss-toolbar .ss-toolbar__more {
+  display: none;
+}
+
+html[data-touch="on"] .ss-toolbar .ss-toolbar__more {
+  display: inline-flex;
+}
+
+/* 자판 없는 기기 단추 줄(기기대응 4-3 · spreadsheet_touch_keys.ts) — 터치 모드에서만 */
+.ss-touch-keys {
+  display: none;
+}
+
+html[data-touch="on"] .ss-touch-keys {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-4);
+}

A00_Common/spreadsheet/spreadsheet_toolbar.ts

@@ -13,6 +13,7 @@
 import { createButton, el } from "@ui/ui_template_elements";
 import { confirmMerge } from "./spreadsheet_actions";
 import { colName, rangeToA1, toA1 } from "./spreadsheet_address";
+import { shownHAlign, shownVAlign } from "./spreadsheet_cellstyle";
 import { cellToText, textToCell } from "./spreadsheet_editor";
 import { st } from "./spreadsheet_text";
 import type { BorderLine, BorderSide, CellRange, CellStyle, Command } from "./spreadsheet_types";
@@ -147,6 +148,30 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
   undoBtn.title = st("Undo");
   const redoBtn = createButton({ label: "↷", variant: "ghost", onClick: () => ctx.redo() });
   redoBtn.title = st("Redo");
+  // 손가락 — 우클릭 대신 활성 칸 메뉴를 여는 ⋯(기기대응 3-5 · 터치 모드에서만 보임)
+  const moreBtn = createButton({
+    label: "⋯",
+    variant: "ghost",
+    onClick: () => {
+      const { r, c } = ctx.selection.활성;
+      const { box } = ctx.grid.editorSlot(r, c);
+      const at = ctx.grid.root.getBoundingClientRect();
+      const x = at.left + box.x + Math.min(box.w / 2, 24);
+      const y = at.top + box.y + box.h / 2;
+      const target = document.elementFromPoint(x, y) ?? ctx.grid.root;
+      target.dispatchEvent(
+        new MouseEvent("contextmenu", {
+          bubbles: true,
+          cancelable: true,
+          clientX: x,
+          clientY: y,
+          button: 2,
+        }),
+      );
+    },
+  });
+  moreBtn.classList.add("ss-toolbar__more");
+  moreBtn.title = st("CellMenu");
 
   // ── 글꼴 · 크기 ────────────────────────────────────────────────────────
   const fontInput = el("input", {
@@ -500,7 +525,7 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
   });
 
   root.append(
-    group(undoBtn, redoBtn),
+    group(undoBtn, redoBtn, moreBtn),
     group(fontInput, sizeInput),
     group(boldBtn, italicBtn, underlineBtn, strikeBtn),
     group(textColor, textColorClear, fillColor, fillColorClear),
@@ -528,8 +553,8 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
     strikeBtn.classList.toggle("is-on", !!style.취소선);
     textColor.value = style.글자색 ?? "#000000";
     fillColor.value = style.채움 ?? "#ffffff";
-    hAlignSelect.value = style.가로 ?? "general";
-    vAlignSelect.value = style.세로 ?? "bottom";
+    hAlignSelect.value = shownHAlign(style.가로);
+    vAlignSelect.value = shownVAlign(style.세로);
     wrapBtn.classList.toggle("is-on", !!style.줄바꿈);
     numfmtInput.value = style.형식 ?? "";
     const range = ctx.selection.범위[0];

A00_Common/spreadsheet/spreadsheet_touch_keys.ts

@@ -0,0 +1,43 @@
+/* =============================================================================
+ * spreadsheet_touch_keys.ts
+ * 자판 없는 기기용 단추 줄(기기대응 4-3) — 단축키로만 되던 일을 같은 키 길(`attachKeys`)로 보냄.
+ * 입력줄(`ed.bar`) 끝에 붙고 터치 모드에서만 보임(spreadsheet_toolbar.css). 마우스 화면은 그대로.
+ * ========================================================================== */
+
+import { createButton } from "@ui/ui_template_elements";
+import type { Editor } from "./spreadsheet_editor";
+import type { SpreadsheetContext } from "./spreadsheet_view_types";
+
+const KEYS: [label: string, title: string, init: KeyboardEventInit, edit: boolean][] = [
+  ["🔍", "찾기 · 바꾸기(Ctrl+F)", { key: "f", code: "KeyF", ctrlKey: true }, false],
+  ["⇉", "고른 칸 모두 같은 값(Ctrl+Enter)", { key: "Enter", ctrlKey: true }, true],
+  ["↵", "칸 안 줄바꿈(Alt+Enter)", { key: "Enter", altKey: true }, true],
+  ["✕", "고침 취소(Esc)", { key: "Escape" }, true],
+  ["📅", "오늘 날짜(Ctrl+;)", { key: ";", code: "Semicolon", ctrlKey: true }, true],
+  ["$", "참조 $ 돌리기(F4)", { key: "F4" }, true],
+];
+
+export function mountTouchKeys(ctx: SpreadsheetContext, ed: Editor): void {
+  const row = document.createElement("div");
+  row.className = "ss-touch-keys";
+  for (const [label, title, init, edit] of KEYS) {
+    if (edit && ctx.readOnly) continue;
+    const b = createButton({
+      label,
+      variant: "ghost",
+      onClick: () => {
+        // 고치는 중이면 그 칸(입력줄 · 칸 편집기) — 아니면 칸 편집기로
+        const target = document.activeElement === ed.formula ? ed.formula : ed.ta;
+        target.dispatchEvent(
+          new KeyboardEvent("keydown", { ...init, bubbles: true, cancelable: true }),
+        );
+      },
+    });
+    b.title = title;
+    b.setAttribute("aria-label", title);
+    // 누를 때 초점을 뺏지 않음 — 고치던 칸이 그대로(손가락은 호환 mousedown 이 옴)
+    b.addEventListener("mousedown", (e) => e.preventDefault());
+    row.append(b);
+  }
+  ed.bar.append(row);
+}

A00_Common/touch_bridge.ts

@@ -0,0 +1,233 @@
+/* =============================================================================
+ * touch_bridge.ts
+ * 손가락 → 마우스 번역 한 곳(요구 193~195 · PLAN_기기대응 3-1) — 페이지 코드는 마우스 그대로.
+ *
+ * - 길게 누름(500ms · 10px 안) → 그 자리에 `contextmenu` · 뒤따르는 click 막음
+ *   (안드로이드처럼 브라우저가 먼저 내면 그것 하나만)
+ * - 두 번 톡 → 브라우저가 `dblclick` 을 안 낼 때만 대신
+ * - 두 손가락 벌림 → 가운데 자리에 Ctrl+휠(deltaY = −100·ln(배율) · 배율 10% 마다 한 번 · 트랙패드 핀치와 같은 꼴)
+ *   받는 면이 touch-action 으로 브라우저 확대를 막은 곳에서만 끝까지 옴
+ * - `[data-touch-own]` 요소(3D · 공용 SVG 확대)는 건너뜀 — 자체 손가락 처리 · 입력 칸 길게 누름도 브라우저 몫
+ * 마우스 · 펜 이벤트는 건드리지 않음.
+ * ========================================================================== */
+
+import { wheelEventIn } from "./input_prefs";
+
+const LONG_MS = 500;
+const SLOP_PX = 10;
+const DOUBLE_MS = 300;
+const DOUBLE_PX = 25;
+/** 브라우저 dblclick 을 기다리는 틈 */
+const NATIVE_WAIT_MS = 350;
+/** 길게 누름 뒤 따라오는 click · 원래 contextmenu 를 막는 틈 */
+const AFTER_LONG_MS = 800;
+const PINCH_STEP = Math.log(1.1);
+
+const synthetic = new WeakSet<Event>();
+
+/** 손가락 벌림으로 만든 휠인지 — 「당기면 확대」 화면이 방향을 맞출 때 씀 */
+export const isPinchWheel = (e: Event): boolean => synthetic.has(e);
+
+let contactPx = 0;
+
+/** 고름 반경(px) — 손가락으로 눌렀으면 접촉 크기만큼(최소 24px) · 마우스 · 펜은 그대로(기기대응 4-4) */
+export const pickPx = (px: number): number => (contactPx ? Math.max(px, contactPx) : px);
+
+/** 휠 화면(B04 · B05 지도 · M02 그림 · 시트)의 확대 판정 — ☰ [설정] 방향(332) · 손가락 벌림은 늘 벌리면 확대 */
+export const wheelZoomsIn = (e: WheelEvent): boolean => wheelEventIn(e, isPinchWheel(e));
+
+const ownsTouch = (t: EventTarget | null): boolean =>
+  t instanceof Element && !!t.closest("[data-touch-own]");
+const isEditable = (t: EventTarget | null): boolean =>
+  t instanceof Element &&
+  !!t.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]');
+
+interface Pt {
+  x: number;
+  y: number;
+}
+
+const touches = new Map<number, Pt>();
+let press: (Pt & { id: number; target: Element; timer: ReturnType<typeof setTimeout> }) | null =
+  null;
+let longAt = 0;
+let nativeMenuAt = 0;
+let nativeDblAt = 0;
+let lastTap: (Pt & { t: number }) | null = null;
+let pinch: { dist: number; acc: number } | null = null;
+
+const at = (p: Pt, fallback: Element): Element => document.elementFromPoint(p.x, p.y) ?? fallback;
+
+function fire(type: "contextmenu" | "dblclick", target: Element, p: Pt): void {
+  const ev = new MouseEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+    view: window,
+    clientX: p.x,
+    clientY: p.y,
+    screenX: p.x,
+    screenY: p.y,
+    button: type === "contextmenu" ? 2 : 0,
+    detail: type === "dblclick" ? 2 : 1,
+  });
+  synthetic.add(ev);
+  target.dispatchEvent(ev);
+}
+
+function fireWheel(target: Element, p: Pt, deltaY: number): void {
+  const ev = new WheelEvent("wheel", {
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+    view: window,
+    clientX: p.x,
+    clientY: p.y,
+    ctrlKey: true,
+    deltaY,
+    deltaMode: 0,
+  });
+  synthetic.add(ev);
+  target.dispatchEvent(ev);
+}
+
+function cancelPress(): void {
+  if (press) clearTimeout(press.timer);
+  press = null;
+}
+
+const pair = (): { mid: Pt; dist: number } => {
+  const [a, b] = [...touches.values()];
+  return {
+    mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 },
+    dist: Math.hypot(a.x - b.x, a.y - b.y),
+  };
+};
+
+/** 그림 면(SVG · 캔버스)을 처음 만지면 한 번 — 「길게 누르면 메뉴」(3-5 · 이 탭에서 한 번) */
+const HINT_KEY = "frd_touch_hint_shown";
+function hintOnce(target: Element): void {
+  if (!target.closest("svg, canvas")) return;
+  try {
+    if (sessionStorage.getItem(HINT_KEY)) return;
+    sessionStorage.setItem(HINT_KEY, "1");
+  } catch {
+    return;
+  }
+  void Promise.all([import("@ui/ui_template_elements"), import("@ui/ui_template_locale")]).then(
+    ([ui, loc]) => ui.showToast(loc.t("App_Touch_LongPressHint"), "info", 4000),
+  );
+}
+
+function onDown(e: PointerEvent): void {
+  contactPx = e.pointerType === "touch" ? Math.max(24, e.width / 2, e.height / 2) : 0;
+  if (e.pointerType !== "touch") return;
+  const p = { x: e.clientX, y: e.clientY };
+  touches.set(e.pointerId, p);
+  const target = e.target as Element;
+  hintOnce(target);
+  if (touches.size === 1) {
+    if (ownsTouch(target) || isEditable(target)) return;
+    press = {
+      ...p,
+      id: e.pointerId,
+      target,
+      timer: setTimeout(() => {
+        const was = press;
+        press = null;
+        if (!was || Date.now() - nativeMenuAt < LONG_MS) return;
+        longAt = Date.now();
+        fire("contextmenu", at(was, was.target), was);
+      }, LONG_MS),
+    };
+    return;
+  }
+  cancelPress();
+  lastTap = null;
+  pinch = touches.size === 2 && !ownsTouch(target) ? { dist: pair().dist, acc: 0 } : null;
+}
+
+function onMove(e: PointerEvent): void {
+  if (e.pointerType !== "touch" || !touches.has(e.pointerId)) return;
+  const p = { x: e.clientX, y: e.clientY };
+  touches.set(e.pointerId, p);
+  if (press && press.id === e.pointerId && Math.hypot(p.x - press.x, p.y - press.y) > SLOP_PX) {
+    cancelPress();
+    lastTap = null;
+  }
+  if (!pinch || touches.size !== 2) return;
+  const { mid, dist } = pair();
+  if (pinch.dist > 0 && dist > 0) pinch.acc += Math.log(dist / pinch.dist);
+  pinch.dist = dist;
+  if (Math.abs(pinch.acc) < PINCH_STEP) return;
+  fireWheel(at(mid, e.target as Element), mid, -100 * pinch.acc);
+  pinch.acc = 0;
+}
+
+function onUp(e: PointerEvent): void {
+  if (e.pointerType !== "touch") return;
+  touches.delete(e.pointerId);
+  if (touches.size < 2) pinch = null;
+  if (!press || press.id !== e.pointerId) return;
+  const tap = press;
+  cancelPress();
+  const now = Date.now();
+  if (
+    lastTap &&
+    now - lastTap.t < DOUBLE_MS &&
+    Math.hypot(tap.x - lastTap.x, tap.y - lastTap.y) < DOUBLE_PX
+  ) {
+    lastTap = null;
+    setTimeout(() => {
+      if (nativeDblAt < now) fire("dblclick", at(tap, tap.target), tap);
+    }, NATIVE_WAIT_MS);
+    return;
+  }
+  lastTap = { x: tap.x, y: tap.y, t: now };
+}
+
+function onCancel(e: PointerEvent): void {
+  if (e.pointerType !== "touch") return;
+  touches.delete(e.pointerId);
+  cancelPress();
+  pinch = null;
+}
+
+function onNativeMenu(e: Event): void {
+  if (synthetic.has(e)) return;
+  if (Date.now() - longAt < AFTER_LONG_MS) {
+    // 우리가 이미 냄 — 브라우저 것은 하나 더라 버림
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  } else if (press) {
+    nativeMenuAt = Date.now(); // 브라우저가 먼저 냄 — 우리 것은 안 냄
+    cancelPress();
+  }
+}
+
+function onClick(e: Event): void {
+  if (synthetic.has(e) || Date.now() - longAt >= AFTER_LONG_MS) return;
+  longAt = 0;
+  e.preventDefault();
+  e.stopImmediatePropagation();
+}
+
+function listen(): void {
+  const opts = { capture: true, passive: true } as const;
+  window.addEventListener("pointerdown", onDown, opts);
+  window.addEventListener("pointermove", onMove, opts);
+  window.addEventListener("pointerup", onUp, opts);
+  window.addEventListener("pointercancel", onCancel, opts);
+  window.addEventListener("contextmenu", onNativeMenu, true);
+  window.addEventListener("click", onClick, true);
+  window.addEventListener(
+    "dblclick",
+    (e) => {
+      if (!synthetic.has(e)) nativeDblAt = Date.now();
+    },
+    true,
+  );
+}
+
+// 브라우저에서만(노드 시험이 이 모듈을 거쳐 불러도 됨)
+if (typeof window !== "undefined" && typeof window.addEventListener === "function") listen();

B01_Dashboard/B01_Dashboard_Map.py

@@ -114,3 +114,30 @@ def _search_sync(query: str, size: int) -> list[dict[str, Any]]:
 
 async def search_address(query: str, size: int = 10) -> list[dict[str, Any]]:
     return await asyncio.to_thread(_search_sync, query.strip(), size)
+
+
+def _reverse_sync(lon: float, lat: float) -> str | None:
+    """좌표 → 주소 한 줄(VWorld getAddress · 도로명 먼저 · 없으면 지번)."""
+    query = urllib.parse.urlencode(
+        {
+            "service": "address",
+            "request": "getAddress",
+            "version": "2.0",
+            "crs": "epsg:4326",
+            "point": f"{lon},{lat}",
+            "type": "both",
+            "format": "json",
+            "key": VWORLD_API_KEY,
+        }
+    )
+    try:
+        body = json.loads(_fetch(f"{_GEOCODE_URL}?{query}").decode("utf-8"))
+    except Exception:
+        return None
+    items = (body.get("response") or {}).get("result") or []
+    texts = {item.get("type"): item.get("text") for item in items if isinstance(item, dict)}
+    return texts.get("road") or texts.get("parcel") or None
+
+
+async def reverse_geocode(lon: float, lat: float) -> str | None:
+    return await asyncio.to_thread(_reverse_sync, lon, lat)

B01_Dashboard/B01_Dashboard_UI_AddressField.ts

@@ -19,6 +19,8 @@ export interface AddressFieldHandle {
   root: HTMLElement;
   /** 저장할 한 줄 주소. 비면 null. */
   value: () => string | null;
+  /** 고른(또는 지도 확인으로 찾은) 좌표. 모르면 null. */
+  point: () => { lat: number; lon: number } | null;
 }
 
 /** 지번으로 찾은 줄은 `parcel` 쪽이 시·도까지 갖춘 온전한 주소다. */
@@ -94,7 +96,7 @@ export function buildAddressField(initial: string | null): AddressFieldHandle {
     label: "지도 확인",
     variant: "ghost",
     onClick: async function onB01_Address_Map_Click() {
-      await map.show(base.input.value.trim());
+      picked = await map.show(base.input.value.trim());
     },
   });
   mapBtn.hidden = true;
@@ -102,6 +104,7 @@ export function buildAddressField(initial: string | null): AddressFieldHandle {
   root.append(searchRow, list, row(base.root, zip), row(detail.root), row(mapBtn), map.root);
 
   let manual = false;
+  let picked: { lat: number; lon: number } | null = null;
 
   function pick(item: AddressCandidate): void {
     base.input.value = candidateLine(item);
@@ -109,6 +112,7 @@ export function buildAddressField(initial: string | null): AddressFieldHandle {
     zip.hidden = !item.zipcode;
     list.hidden = true;
     list.innerHTML = "";
+    picked = { lat: item.lat, lon: item.lon };
     map.showPoint(item.lat, item.lon);
     detail.input.focus();
   }
@@ -160,7 +164,7 @@ export function buildAddressField(initial: string | null): AddressFieldHandle {
   });
 
   // 이미 있는 주소는 열자마자 지도로 보여 준다.
-  if (initial && initial.trim()) void map.show(initial.trim());
+  if (initial && initial.trim()) void map.show(initial.trim()).then((p) => (picked ??= p));
 
   return {
     root,
@@ -168,5 +172,6 @@ export function buildAddressField(initial: string | null): AddressFieldHandle {
       const merged = `${base.input.value.trim()} ${detail.input.value.trim()}`.trim();
       return merged || null;
     },
+    point: () => picked,
   };
 }

B01_Dashboard/B01_Dashboard_UI_Knowledge_Chat.ts

@@ -58,11 +58,17 @@ export function buildKnowledgeChat(): HTMLElement {
   input.rows = 2;
   input.required = true;
   input.maxLength = 500;
-  input.placeholder = "메시지를 입력하세요";
+  input.placeholder = "메시지를 입력하세요 (Shift+Enter 줄바꿈)";
   input.setAttribute("aria-label", "질문");
   const submit = document.createElement("button");
   submit.type = "submit";
   submit.textContent = "보내기";
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+      event.preventDefault();
+      submit.click();
+    }
+  });
   form.append(input, submit);
   panel.append(header, messages, form);
   wrap.append(toggle, panel);

B01_Dashboard/B01_Dashboard_UI_MapPreview.ts

@@ -32,7 +32,8 @@ function tileIndex(
 
 export function buildAddressMap(): {
   root: HTMLElement;
-  show: (address: string) => Promise<void>;
+  /** 찾은 좌표를 돌려줌 — 못 찾으면 null. */
+  show: (address: string) => Promise<{ lat: number; lon: number } | null>;
   /** 좌표를 이미 아는 경우 — 다시 찾지 않고 바로 그린다. */
   showPoint: (lat: number, lon: number) => void;
 } {
@@ -110,17 +111,18 @@ export function buildAddressMap(): {
     note.textContent = message;
   }
 
-  const show = async (address: string): Promise<void> => {
+  const show = async (address: string): Promise<{ lat: number; lon: number } | null> => {
     if (!address.trim()) {
       fail("주소를 먼저 입력하십시오.");
-      return;
+      return null;
     }
     const point = await geocodeAddress(address).catch(() => null);
     if (!point) {
       fail("그 주소를 찾지 못했습니다. 도로명 또는 지번 주소로 다시 넣으십시오.");
-      return;
+      return null;
     }
     draw(point.lat, point.lon);
+    return { lat: point.lat, lon: point.lon };
   };
 
   return { root, show, showPoint: draw };

B01_Dashboard/B01_Dashboard_UI_Page.ts

@@ -9,7 +9,10 @@ import {
 } from "@ui/ui_template_elements";
 import { section } from "@ui/ui_template_general_blocks";
 import { createGeneralLayout } from "@ui/ui_template_general_layout";
-import { navigateTo } from "../A00_Common/router";
+import { createStepBar } from "@ui/ui_template_workflow_layout";
+import { setDrawerSteps } from "../A00_Common/app_shell";
+import { settingLinks } from "../A00_Common/m_settings_nav";
+import { currentRoute, navigateTo } from "../A00_Common/router";
 import {
   fetchAllCompanies,
   fetchAllUsers,
@@ -162,40 +165,15 @@ function settingCard(title: string, desc: string, go: () => void): HTMLElement {
   return card;
 }
 
-/** 시스템 설정 — 역할로 카드 숨김 · M02 카드는 `?open=&root=` 로 진입(27-1d) */
+/** 시스템 설정 — 카드 규칙은 `settingLinks` 한 벌(☰ 바로가기와 같이 씀 · 334) */
 function buildSystemSettingsPanel(user: DashboardUser, companyId: number | null): HTMLElement {
   const wrap = document.createElement("div");
   wrap.className = "b01-dashboard__setting-grid";
-  // 시스템 관리자는 고른 회사를 해시에 실음(29-1)
-  const company: Record<string, string> =
-    user.role === "SYSTEM_ADMIN" && companyId ? { company: String(companyId) } : {};
-  const m02 = (title: string, open: string, root: string, desc: string): HTMLElement =>
-    settingCard(title, desc, () =>
-      navigateTo(ROUTES.M02_MASTER_TEMPLATE, { open, root, ...company }),
-    );
-  // 구조물 조합 기본 층 = 개인(123-1 · 누구든) · 개인 층 없음(회사 없음) = 아래 역할 규칙
-  const comboRoot = (fallback: string): string => (user.company_id ? "personal" : fallback);
-  if (user.role === "SYSTEM_ADMIN") {
-    const desc = L("B01_Dashboard_PermMasterWrite");
-    wrap.append(
-      settingCard(L("B01_Dashboard_MasterElements"), L("B01_Dashboard_PermSourceRead"), () =>
-        navigateTo(ROUTES.M01_MASTER_DATA),
-      ),
-      m02(L("B01_Dashboard_CardStructCombo"), "구조물조합", comboRoot("master"), desc),
-      m02(L("B01_Dashboard_CardStructOption"), "옵션", "master", desc),
-      m02(L("B01_Dashboard_CardDrawing"), "도면", "master", desc),
-    );
-    return wrap;
-  }
-  // 회사 수정 = 회사 관리자 · 회사 마스터(M02 accessFor 와 같은 규칙)
-  const companyAdmin = user.role === "ADMIN" || user.is_master;
-  const root = companyAdmin ? "company" : "personal";
-  const desc = [
-    L("B01_Dashboard_PermMasterRead"),
-    L(companyAdmin ? "B01_Dashboard_PermCompanyWrite" : "B01_Dashboard_PermCompanyRead"),
-    L("B01_Dashboard_PermPersonalWrite"),
-  ].join(" · ");
-  wrap.append(m02(L("B01_Dashboard_CardStructCombo"), "구조물조합", comboRoot(root), desc));
+  wrap.append(
+    ...settingLinks(user, companyId).map((link) =>
+      settingCard(link.title, link.desc, () => navigateTo(link.route, link.query)),
+    ),
+  );
   return wrap;
 }
 
@@ -231,6 +209,38 @@ function buildSystemSettingsSection(state: DashboardState): HTMLElement {
   return card;
 }
 
+/** ☰ 구역 바로가기 아이콘(334) — 구역 제목 키로 짝(EN 글에서도 같음) */
+const SECTION_ICONS: [Parameters<typeof L>[0], string][] = [
+  ["B01_Dashboard_Resources", "📊"],
+  ["B01_Dashboard_SystemSettings", "⚙️"],
+  ["B01_Dashboard_Projects", "🗂️"],
+  ["B01_Temp_Section", "📦"],
+  ["B01_Dashboard_Users", "👥"],
+  ["B01_Dashboard_Members", "👥"],
+  ["B01_Dashboard_JoinRequests", "📨"],
+  ["B01_Dashboard_Companies", "🏢"],
+  ["B01_Dashboard_Company", "🏢"],
+  ["B01_Dashboard_Profile", "👤"],
+  ["B01_Account_Section_Security", "🔒"],
+  ["B01_Dashboard_AuditLogs", "📜"],
+];
+
+/** ☰ 구역 바로가기(334) — 그린 구역 그대로 · 화면 차례 · 누름 = 서랍 닫힘 + 그 구역으로 굴림 */
+function mountSectionShortcuts(grid: HTMLElement): void {
+  // 자료 기다리는 사이 다른 쪽으로 떠났으면 맡기지 않음
+  if (currentRoute() !== ROUTES.B01_ACCOUNT) return;
+  const sections = [...grid.children] as HTMLElement[];
+  const titles = sections.map((s) => s.querySelector(".ui-card__title")?.textContent ?? "");
+  const icons = titles.map((title) => SECTION_ICONS.find(([key]) => L(key) === title)?.[1] ?? "");
+  const bar = createStepBar(titles, -1, {
+    orientation: "vertical",
+    icons,
+    routes: titles,
+    onStepClick: (index) => sections[index].scrollIntoView({ behavior: "smooth", block: "start" }),
+  });
+  setDrawerSteps(bar);
+}
+
 function buildPage(state: DashboardState): HTMLElement {
   // 제목·여백은 공용 템플릿을 따른다 (2026-09-06 사용자 지시) — B02 등 다른 화면과 같은 모양.
   const page = document.createElement("div");
@@ -311,6 +321,7 @@ function buildPage(state: DashboardState): HTMLElement {
     grid.append(section(L("B01_Dashboard_AuditLogs"), auditLogTable(state.auditLogs), true));
   }
   page.append(grid);
+  mountSectionShortcuts(grid);
   page.append(buildKnowledgeChat());
   const layout = createGeneralLayout({
     pageClass: "b01-dashboard",

B01_Dashboard/B01_Dashboard_UI_Style.css

@@ -536,8 +536,8 @@
 .b01-knowledge-chat__toggle,
 .b01-knowledge-chat__form button {
   border: 0;
-  background: var(--color-royal-amethyst, #6843a7);
-  color: #fff;
+  background: var(--color-primary);
+  color: var(--color-primary-text);
   font: inherit;
   cursor: pointer;
 }
@@ -560,12 +560,12 @@
   display: flex;
   flex-direction: column;
   width: min(380px, calc(100vw - 32px));
-  height: min(680px, calc(100vh - 104px));
+  height: min(680px, calc(100dvh - 104px));
   border: 1px solid var(--color-border);
   border-radius: 12px;
   background: var(--color-surface, #fff);
   box-shadow: 0 8px 28px #0003;
-  color: var(--color-text-primary, #222);
+  color: var(--color-text-body);
   overflow: hidden;
   overscroll-behavior: contain;
 }
@@ -588,8 +588,8 @@
   height: 34px;
   place-items: center;
   border-radius: 50%;
-  background: var(--color-royal-amethyst, #6843a7);
-  color: #fff;
+  background: var(--color-primary);
+  color: var(--color-primary-text);
 }
 
 .b01-knowledge-chat__avatar svg {
@@ -631,14 +631,15 @@
 .b01-knowledge-chat__user {
   align-self: flex-end;
   border-bottom-right-radius: 4px;
-  background: var(--color-royal-amethyst, #6843a7);
-  color: #fff;
+  background: var(--color-primary);
+  color: var(--color-primary-text);
 }
 
 .b01-knowledge-chat__reply {
   align-self: flex-start;
+  border: 1px solid var(--color-border);
   border-bottom-left-radius: 4px;
-  background: var(--color-background, #f4f4f4);
+  background: var(--color-surface-raised);
 }
 
 .b01-knowledge-chat__reply details {
@@ -722,7 +723,7 @@
 .b01-knowledge-source-modal__content code {
   padding: 0.1em 0.35em;
   border-radius: 4px;
-  background: var(--color-background, #f4f4f4);
+  background: var(--color-surface);
 }
 
 .b01-knowledge-source-modal__content .ui-markdown-table {
@@ -746,7 +747,7 @@
 }
 
 .b01-knowledge-source-modal__content th {
-  background: var(--color-background, #f4f4f4);
+  background: var(--color-surface);
 }
 
 .b01-knowledge-chat__form {
@@ -765,11 +766,17 @@
   padding: 8px;
   border: 1px solid var(--color-border);
   border-radius: 6px;
+  background: var(--color-canvas);
+  color: var(--color-text-body);
   font: inherit;
   resize: vertical;
   overflow-y: auto;
 }
 
+.b01-knowledge-chat__form textarea::placeholder {
+  color: var(--color-text-muted);
+}
+
 .b01-knowledge-chat__form button {
   padding: 9px 14px;
   border-radius: 8px;

B03_FileInput/B03_FileInput_Api_Fetch.ts

@@ -57,11 +57,14 @@ export interface UploadStatusResponse {
  */
 export class ReplaceOutputsConfirmRequired extends Error {
   readonly targets: string[];
+  /** 지형 파일이 그대로라 전처리 결과를 살리는지 — 「처음부터 다시」를 따로 묻는다. */
+  readonly preprocessKept: boolean;
 
-  constructor(message: string, targets: string[]) {
+  constructor(message: string, targets: string[], preprocessKept = false) {
     super(message);
     this.name = "ReplaceOutputsConfirmRequired";
     this.targets = targets;
+    this.preprocessKept = preprocessKept;
   }
 }
 
@@ -70,12 +73,14 @@ async function readJsonOrThrow<T>(response: Response): Promise<T> {
     message?: string;
     confirm?: string;
     targets?: string[];
+    preprocess_kept?: boolean;
   };
   if (!response.ok) {
     if (response.status === 409 && payload.confirm === "replace_outputs") {
       throw new ReplaceOutputsConfirmRequired(
         payload.message ?? "이미 만들어 둔 결과가 지워집니다.",
         payload.targets ?? [],
+        payload.preprocess_kept === true,
       );
     }
     throw new Error(payload.message ?? `HTTP ${response.status}`);
@@ -115,6 +120,7 @@ export async function createUploadSession(
   completeUpload = false,
   lasFree = false,
   confirmReplace = false,
+  freshStart = false,
 ): Promise<ChunkSessionCreateResponse> {
   const response = await fetch(`${API_BASE_URL}/projects/${projectId}/upload-sessions`, {
     method: "POST",
@@ -128,6 +134,7 @@ export async function createUploadSession(
       complete_upload: completeUpload,
       las_free: lasFree,
       confirm_replace: confirmReplace,
+      fresh_start: freshStart,
     }),
   });
   return await readJsonOrThrow<ChunkSessionCreateResponse>(response);
@@ -160,6 +167,7 @@ export async function finalizeUploadSession(
   fingerprint?: string | null,
   lasFree = false,
   confirmReplace = false,
+  freshStart = false,
 ): Promise<FileUploadResponse> {
   const response = await fetch(`${API_BASE_URL}/projects/${projectId}/finalize`, {
     method: "POST",
@@ -172,6 +180,7 @@ export async function finalizeUploadSession(
       fingerprint: fingerprint ?? null,
       las_free: lasFree,
       confirm_replace: confirmReplace,
+      fresh_start: freshStart,
     }),
   });
   return await readJsonOrThrow<FileUploadResponse>(response);

B03_FileInput/B03_FileInput_Router_Chunks.py

@@ -113,6 +113,7 @@ async def create_project_upload_session(
                             project_id,
                             payload.las_free,
                             payload.confirm_replace,
+                            payload.fresh_start,
                         )
                         await connection.commit()
                     except Exception:
@@ -309,6 +310,7 @@ async def finalize_project_upload(
                         project_id,
                         payload.las_free,
                         payload.confirm_replace,
+                        payload.fresh_start,
                     )
                 await connection.commit()
             except Exception:

B03_FileInput/B03_FileInput_Router_Helpers.py

@@ -29,7 +29,7 @@ from B03_FileInput.B03_FileInput_Schema import (
 )
 from common_util.common_util_initial_snapshot import clear_designing, discard_initial_snapshot
 from common_util.common_util_json import atomic_write_json
-from common_util.common_util_project_reset import purge_project_outputs
+from common_util.common_util_project_reset import PREPROCESS_STAGE_DIR, purge_project_outputs
 from common_util.common_util_storage import resolve_stored_project_path
 from common_util.common_util_workflow_state import (
     complete_stage,
@@ -61,8 +61,10 @@ class OutputsWouldBeDiscarded(Exception):
     로 다시 들어온다. 자동 절차는 이 예외를 만들지 않는다 — 부를 때 확인을 켜 준다.
     """
 
-    def __init__(self, targets: list[str]) -> None:
+    def __init__(self, targets: list[str], preprocess_kept: bool = False) -> None:
         self.targets = targets
+        # 지형 파일이 그대로라 전처리 결과를 살리는지 — 화면이 「처음부터 다시」를 따로 묻는다.
+        self.preprocess_kept = preprocess_kept
         super().__init__("설계 산출물이 있어 확인이 필요합니다.")
 
 
@@ -78,14 +80,17 @@ def _confirm_replace_response(exc: "OutputsWouldBeDiscarded") -> JSONResponse:
                 "아래가 지워지고 **되돌릴 수 없습니다**: " + " · ".join(exc.targets)
             ),
             "targets": exc.targets,
+            "preprocess_kept": exc.preprocess_kept,
         },
     )
 
 
-def describe_existing_outputs(project_root: Path) -> list[str]:
+def describe_existing_outputs(project_root: Path, keep_preprocess: bool = False) -> list[str]:
     """새 자료를 받으면 **지워질 것**의 이름을 사람 말로 늘어놓는다. 없으면 빈 목록."""
     targets: list[str] = []
     for stage, label in _OUTPUT_STAGE_LABELS:
+        if keep_preprocess and stage == PREPROCESS_STAGE_DIR:
+            continue
         stage_root = project_root / stage
         if not stage_root.is_dir():
             continue
@@ -201,16 +206,37 @@ async def _already_uploaded(
     )
 
 
+def preprocess_input_unchanged(project_root: Path, terrain_paths: list[Path]) -> bool:
+    """지형 파일이 마지막 전처리 때와 같은지 — `processed/source_identity.json` 과 대조.
+
+    같은 지문(크기 + 앞·가운데·끝) 파일은 전송을 건너뛰어 파일이 그대로 남는다 —
+    이름·크기·수정시각이 전처리가 적어 둔 값과 같으면 같은 입력이다.
+    """
+    if not terrain_paths:
+        return False
+    from B04_PreProcess.B04_PreProcess_Engine import _source_identity
+
+    identity_path = project_root / PREPROCESS_STAGE_DIR / "processed" / "source_identity.json"
+    try:
+        stored = json.loads(identity_path.read_text(encoding="utf-8"))
+        return stored == _source_identity(terrain_paths)
+    except (OSError, ValueError):
+        return False
+
+
 async def _complete_file_input_if_ready(
     connection: aiomysql.Connection,
     project_id: UUID,
     las_free: bool = False,
     confirm_replace: bool = True,
+    fresh_start: bool = False,
 ) -> int:
     """새 자료로 갈아 끼운다. `confirm_replace=False` 면 지울 것이 있을 때 멈추고 묻는다.
 
     기본이 `True` 인 까닭 — 자동 절차(체인·스크립트)는 물음에 걸리면 안 된다.
     사람이 올리는 갈래(라우터)만 `False` 로 불러 확인을 받는다(2026-09-08 사용자 지시).
+    지형 파일이 그대로면 전처리 결과는 살리고 단계 표시만 되돌린다 —
+    `fresh_start=True`(확인 창의 「처음부터 다시」)면 전처리까지 지운다.
     """
     file_types, point_cloud_input_id, route_csv_input_id = await get_project_input_readiness(
         connection, project_id
@@ -234,14 +260,15 @@ async def _complete_file_input_if_ready(
     gap_message = merge_gap_error(terrain_paths)
     if gap_message:
         raise ValueError(gap_message)
+    keep_preprocess = not fresh_start and preprocess_input_unchanged(project_root, terrain_paths)
     # ⚠ 여기서부터는 되돌릴 수 없다 — 아래 셋이 파일까지 지운다. 지울 것이 있으면 먼저 묻는다.
     if not confirm_replace:
-        targets = describe_existing_outputs(project_root)
+        targets = describe_existing_outputs(project_root, keep_preprocess)
         if targets:
-            raise OutputsWouldBeDiscarded(targets)
+            raise OutputsWouldBeDiscarded(targets, keep_preprocess)
     clear_designing(project_root)
     discard_initial_snapshot(project_root)
-    await purge_project_outputs(connection, str(project_id), project_root)
+    await purge_project_outputs(connection, str(project_id), project_root, keep_preprocess)
     async with connection.cursor(aiomysql.DictCursor) as cursor:
         await reset_stages_after_input_change(cursor, str(project_id))
         await complete_stage(cursor, str(project_id), 0)

B03_FileInput/B03_FileInput_Schema.py

@@ -65,6 +65,8 @@ class ChunkSessionCreateRequest(FileUploadDescriptor):
     # 이미 있는 설계 산출물을 지워도 좋다는 사람의 대답(2026-09-08). 거짓이면 지울 것이
     # 있을 때 409 로 멈추고 무엇이 지워지는지 알린다 — 되돌릴 수 없는 삭제라서다.
     confirm_replace: bool = False
+    # 확인 창의 「처음부터 다시」 — 지형 파일이 그대로여도 전처리 결과까지 지운다.
+    fresh_start: bool = False
 
 
 class ChunkSessionCreateResponse(BaseModel):
@@ -109,6 +111,8 @@ class UploadFinalizeRequest(BaseModel):
     # 이미 있는 설계 산출물을 지워도 좋다는 사람의 대답(2026-09-08). 거짓이면 지울 것이
     # 있을 때 409 로 멈추고 무엇이 지워지는지 알린다 — 되돌릴 수 없는 삭제라서다.
     confirm_replace: bool = False
+    # 확인 창의 「처음부터 다시」 — 지형 파일이 그대로여도 전처리 결과까지 지운다.
+    fresh_start: bool = False
 
 
 class UploadStatusResponse(BaseModel):

B03_FileInput/B03_FileInput_Service_Chain.py

@@ -18,6 +18,7 @@ WF1(지표면 분석·자동 확정)이 끝나면 사용자가 화면에 없어
 import asyncio
 import logging
 import time
+from dataclasses import asdict
 from pathlib import Path
 from typing import Any
 from uuid import UUID
@@ -65,7 +66,11 @@ def _planned_route_points_in_project_crs(
 
 
 async def _prepare_drainage_pipes_and_reprofile(
-    project_id: UUID, route_id: int, *, refresh: bool = False
+    project_id: UUID,
+    route_id: int,
+    *,
+    refresh: bool = False,
+    stored_options: dict[str, Any] | None = None,
 ) -> bool:
     """배수유역 분석 → 기본 관 지점 확정 저장 → 배관 정착 계획선으로 종횡단 재생성.
 
@@ -75,12 +80,13 @@ async def _prepare_drainage_pipes_and_reprofile(
     들어왔을 때 배수유역도도 비어 있게 된다 — 여기서 미리 계산해 영구저장소에 남긴다.
 
     실패해도 예외를 던지지 않는다 — 관 없이 만든 계획선이라도 남는 편이 낫다.
+
+    `stored_options` = 노선 [확인] 체인이 건너뛴 첫 생성의 옵션(342-2) — 반폭 · 재생성 옵션.
     """
     from B04_PreProcess.B04_PreProcess_Router_Basins import put_pipe_points
     from B04_PreProcess.B04_PreProcess_Router_Watershed import get_primary_region
     from B06_Section.B06_Section_Repository import get_latest_section_options
-    from B06_Section.B06_Section_Router import regenerate_sections
-    from B06_Section.B06_Section_Schema import SectionRegenerateRequest
+    from B06_Section.B06_Section_Router import regenerate_route_sections
     from config.config_db import get_db_pool
     from config.config_system import SECTION_CROSS_HALF_WIDTH_M
 
@@ -113,14 +119,16 @@ async def _prepare_drainage_pipes_and_reprofile(
         marks.append(("관 지점 확정", time.perf_counter()))
 
         # 3) 저장된 관 자리를 물려 계획선을 다시 산출한다. 반폭은 이미 쓰던 값을 유지한다.
-        pool = get_db_pool()
-        async with pool.acquire() as connection:
-            stored_options = await get_latest_section_options(connection, project_id)
+        seeded = stored_options is not None
+        if not seeded:
+            pool = get_db_pool()
+            async with pool.acquire() as connection:
+                stored_options = await get_latest_section_options(connection, project_id)
         half_width = float(
             (stored_options or {}).get("cross_half_width_m") or SECTION_CROSS_HALF_WIDTH_M
         )
-        regenerated = await regenerate_sections(
-            project_id, route_id, SectionRegenerateRequest(cross_half_width_m=half_width)
+        regenerated = await regenerate_route_sections(
+            project_id, route_id, half_width, stored_options=stored_options if seeded else None
         )
         if isinstance(regenerated, JSONResponse):
             logger.error(
@@ -319,26 +327,8 @@ async def run_auto_design_chain(
             route_id,
         )
 
-        # 3D 예상형상(코리도) — 브라우저가 쓰는 TS 빌더를 서버에서 한 번 돌려 영구저장한다
-        # (2026-09-04 사용자 확정). 이걸 빼면 사용자가 B05에 처음 들어간 그 순간 브라우저가
-        # 만들어 첫 진입이 느리다. 실패는 비치명적 — 저장본이 없으면 브라우저가 예전처럼 만든다.
-        try:
-            from B05_Profile.B05_Profile_Corridor_Prebuild import prebuild_corridor
-
-            await prebuild_corridor(project_id, route_id, project_root)
-        except Exception:  # noqa: BLE001 — 코리도 실패가 체인을 막지는 않는다
-            logger.exception("코리도 사전 생성 실패: project_id=%s", project_id)
-
-        # 구조물 폐회로 면적 + 유토곡선 — 화면이 쓰는 TS 를 서버에서 한 번 돌려 정본에
-        # 얹는다(2026-09-06). 이걸 빼면 B06 을 안 연 프로젝트의 수량이 구조물을 모르는
-        # 표준값으로 남고 유토곡선은 아예 없다. 초기값 스냅샷 **앞**이라 되돌릴
-        # 기준선에도 보정이 담긴다.
-        try:
-            from B06_Section.B06_Section_Server_Calc_Prebuild import recompute_server_side
-
-            await recompute_server_side(project_id, route_id)
-        except Exception:  # noqa: BLE001 — 재계산 실패가 체인을 막지는 않는다
-            logger.exception("횡단 서버 재계산 실패: project_id=%s", project_id)
+        # 서버 재계산(구조물 면적 · 유토곡선)과 3D 길 모형 짓기는 [확정](confirm_sections) 끝에서
+        # 한 번씩 — 재계산 → 짓기 차례 · 초기값 스냅샷 **앞**이라 기준선에도 담긴다(342-2).
 
         # 초기값 스냅샷 — 여기가 [초기화]가 되돌릴 기준선이다(CLAUDE.md 5장).
         # 체인 규약대로 실패는 비치명적이다: 계산 결과는 그대로 두고 실패 마커만 남겨
@@ -350,6 +340,18 @@ async def run_auto_design_chain(
             logger.exception("초기값 스냅샷 실패: project_id=%s", project_id)
             mark_design_failed(project_root, f"초기값 스냅샷 저장 실패: {exc}")
 
+        # 노선 추천 기본 다섯 알약 미리 셈(PLAN 327-2) — 예약만 · 체인이 [초기화] 요청 안에서도
+        # 불리므로 기다리지 않는다. 같은 입력이면 저장본이 있어 셈 없이 끝난다.
+        try:
+            from B03_FileInput.B03_FileInput_Router_Helpers import _schedule_background_task
+            from B05_Profile.B05_Profile_Router_RouteInitial import precompute_defaults
+
+            _schedule_background_task(
+                precompute_defaults(project_id), task_name=f"추천 노선 미리 셈 {project_id}"
+            )
+        except Exception:  # noqa: BLE001 — 미리 셈이 체인을 막지는 않는다
+            logger.exception("추천 노선 미리 셈 예약 실패: project_id=%s", project_id)
+
         return {
             "route_id": route_id,
             "length_m": float(solve_result.total_length_m or 0.0),
@@ -390,6 +392,53 @@ async def _ensure_initial_polyline(
         logger.exception("초기 계획노선 폴리라인 생성 실패(계속 진행): %s", project_id)
 
 
+def redesign_solve_request(
+    params: dict[str, Any], selection: dict[str, Any], surface_model_id: int
+) -> Any:
+    """stage 2 params(사용자 저장분) + 새 확정 지표면 → as_planned 풀기 요청(노선 저장도 씀)."""
+    from B05_Profile.B05_Profile_Schema import RouteSolveRequest
+
+    points = params.get("points") or {}
+    options = params.get("options") or {}
+    return RouteSolveRequest(
+        filter_key=str(selection.get("source_filter") or params.get("filter_key")),
+        method=str(selection.get("method") or params.get("method") or "dtm"),
+        smooth=bool(selection.get("smooth", params.get("smooth", False))),
+        surface_model_id=surface_model_id,
+        # 사용자가 고친 계획노선을 **그대로** 쓴다 — 다시 풀면 탐색 제약(종단경사·
+        # 최소곡선반지름·회피지역)에 걸려 체인이 통째로 멈춘다(2026-09-06 실측:
+        # 「세그먼트 1 (BP → CP1) 경로 탐색 실패」로 종횡단만 옛 노선에 남았음).
+        # PLAN 0-3 에서 자동탐색은 접기로 했고 노선은 사용자가 직접 고친다.
+        algorithm="as_planned",
+        bp=points["bp"],
+        ep=points["ep"],
+        cp=points.get("cp") or [],
+        ap=points.get("ap") or [],
+        fp=points.get("fp") or [],
+        station_interval_m=params.get("station_interval_m"),
+        cross_half_width_m=params.get("cross_half_width_m"),
+        cross_sample_interval_m=params.get("cross_sample_interval_m"),
+        long_sample_interval_m=params.get("long_sample_interval_m"),
+        **{key: options.get(key) for key in ("grade_class",) if options.get(key)},
+        paved=bool(options.get("paved", False)),
+        terrain_type=str(options.get("terrain_type") or "special"),
+        main_direction=str(options.get("main_direction") or "auto"),
+        min_curve_radius_m=options.get("min_curve_radius_m"),
+        max_uphill_grade=options.get("max_uphill_grade"),
+        max_downhill_grade=options.get("max_downhill_grade"),
+        min_uphill_grade=options.get("min_uphill_grade"),
+        min_downhill_grade=options.get("min_downhill_grade"),
+        weights=options.get("weights"),
+        allow_avoid_pass_through=bool(options.get("allow_avoid_pass_through", False)),
+        max_grade_pct=params.get("max_grade_pct"),
+        min_vertical_radius_m=params.get("min_vertical_radius_m"),
+        min_tangent_length_m=params.get("min_tangent_length_m"),
+        balance_segment_length_m=params.get("balance_segment_length_m"),
+        start_elevation_offset_m=params.get("start_elevation_offset_m"),
+        end_elevation_offset_m=params.get("end_elevation_offset_m"),
+    )
+
+
 async def run_redesign_chain(
     project_id: UUID,
     surface_model_id: int,
@@ -414,13 +463,18 @@ async def run_redesign_chain(
     """
     from B03_FileInput.B03_FileInput_Repository import get_project_storage_relative_path
     from B05_Profile.B05_Profile_Repository import get_latest_route
-    from B05_Profile.B05_Profile_Router import confirm_latest_route, solve_route
-    from B05_Profile.B05_Profile_Schema import RouteSolveRequest
+    from B05_Profile.B05_Profile_Router import (
+        _section_options,
+        confirm_latest_route,
+        solve_route_record,
+    )
     from B06_Section.B06_Section_Repository import (
         get_cross_section_designs,
+        get_latest_section_options,
         get_longitudinal_section,
     )
     from B06_Section.B06_Section_Repository_Bulk import merge_cross_section_designs
+    from B06_Section.B06_Section_Router import regenerate_route_sections
     from B06_Section.B06_Section_Router_Confirm import _rowless_station_chainages, confirm_sections
     from B06_Section.B06_Section_Router_Design import CARRY_INPUT_KEYS, compute_default_designs
     from B06_Section.B06_Section_Schema import SectionConfirmRequest
@@ -464,12 +518,12 @@ async def run_redesign_chain(
                 state = await get_workflow_state(cursor, str(project_id))
             old_longitudinal = await get_longitudinal_section(connection, project_id, old_route_id)
             old_designs = await get_cross_section_designs(connection, old_route_id)
+            old_section_options = await get_latest_section_options(connection, project_id)
         stage2 = next(
             (s for s in (state or {}).get("stages", []) if int(s.get("stage_no", -1)) == 2), None
         )
         params = (stage2 or {}).get("params") or {}
         points = params.get("points") or {}
-        options = params.get("options") or {}
         if not points.get("bp") or not points.get("ep"):
             logger.warning(
                 "재확정 체인 중단(stage 2 params에 제어점 없음): project_id=%s", project_id
@@ -479,44 +533,9 @@ async def run_redesign_chain(
         marks.append(("준비·사용자입력 회수", time.perf_counter()))
 
         # 2) B05 재계산 — 지표면 관련 값만 새 확정 선택으로 교체, 나머지는 사용자 저장분.
-        request = RouteSolveRequest(
-            filter_key=str(selection.get("source_filter") or params.get("filter_key")),
-            method=str(selection.get("method") or params.get("method") or "dtm"),
-            smooth=bool(selection.get("smooth", params.get("smooth", False))),
-            surface_model_id=surface_model_id,
-            # 사용자가 고친 계획노선을 **그대로** 쓴다 — 다시 풀면 탐색 제약(종단경사·
-            # 최소곡선반지름·회피지역)에 걸려 체인이 통째로 멈춘다(2026-09-06 실측:
-            # 「세그먼트 1 (BP → CP1) 경로 탐색 실패」로 종횡단만 옛 노선에 남았음).
-            # PLAN 0-3 에서 자동탐색은 접기로 했고 노선은 사용자가 직접 고친다.
-            algorithm="as_planned",
-            bp=points["bp"],
-            ep=points["ep"],
-            cp=points.get("cp") or [],
-            ap=points.get("ap") or [],
-            fp=points.get("fp") or [],
-            station_interval_m=params.get("station_interval_m"),
-            cross_half_width_m=params.get("cross_half_width_m"),
-            cross_sample_interval_m=params.get("cross_sample_interval_m"),
-            long_sample_interval_m=params.get("long_sample_interval_m"),
-            **{key: options.get(key) for key in ("grade_class",) if options.get(key)},
-            paved=bool(options.get("paved", False)),
-            terrain_type=str(options.get("terrain_type") or "special"),
-            main_direction=str(options.get("main_direction") or "auto"),
-            min_curve_radius_m=options.get("min_curve_radius_m"),
-            max_uphill_grade=options.get("max_uphill_grade"),
-            max_downhill_grade=options.get("max_downhill_grade"),
-            min_uphill_grade=options.get("min_uphill_grade"),
-            min_downhill_grade=options.get("min_downhill_grade"),
-            weights=options.get("weights"),
-            allow_avoid_pass_through=bool(options.get("allow_avoid_pass_through", False)),
-            max_grade_pct=params.get("max_grade_pct"),
-            min_vertical_radius_m=params.get("min_vertical_radius_m"),
-            min_tangent_length_m=params.get("min_tangent_length_m"),
-            balance_segment_length_m=params.get("balance_segment_length_m"),
-            start_elevation_offset_m=params.get("start_elevation_offset_m"),
-            end_elevation_offset_m=params.get("end_elevation_offset_m"),
-        )
-        solve_result: Any = await solve_route(project_id, request)
+        request = redesign_solve_request(params, selection, surface_model_id)
+        # 종횡단은 관을 정한 뒤 한 번만 만든다(342-2) — 여기서 만들면 아래 4c 가 통째로 덮는 헛일.
+        solve_result: Any = await solve_route_record(project_id, request, generate_sections=False)
         if isinstance(solve_result, JSONResponse):
             # 사유까지 남긴다 — 상태 코드만으로는 무엇이 막았는지 못 짚는다(2026-09-06
             # 노선 편집 [확인]이 조용히 400 으로 끊겨 종횡단만 옛 노선에 남았음).
@@ -559,7 +578,17 @@ async def run_redesign_chain(
         marks.append(("B05 확정", time.perf_counter()))
         # 노선이 바뀌었으므로 배수유역·관 지점도 새 노선 기준으로 다시 만든다 — 옛 관 자리로
         # 계획선을 앉히면 전부 어긋나고, 저장분은 노선 변경을 스스로 알지 못한다.
-        await _prepare_drainage_pipes_and_reprofile(project_id, new_route_id, refresh=True)
+        # 건너뛴 첫 생성이 남겼을 옵션(요청 → 옛 저장 → 기본) — 재생성이 그것을 읽어 결과가 같다.
+        seed = asdict(_section_options(request, old_section_options))
+        seed.pop("extra_stations", None)
+        piped = await _prepare_drainage_pipes_and_reprofile(
+            project_id, new_route_id, refresh=True, stored_options=seed
+        )
+        if not piped:
+            # 관 없이라도 종횡단은 세운다 — 새 노선엔 아직 종횡단이 없다(첫 생성을 건너뜀).
+            await regenerate_route_sections(
+                project_id, new_route_id, float(seed["cross_half_width_m"]), stored_options=seed
+            )
 
         marks.append(("배수·관·측점 재생성", time.perf_counter()))
 

B03_FileInput/B03_FileInput_UI_Style.css

@@ -1,5 +1,5 @@
 .b03-file {
-  min-height: calc(100vh - var(--app-header-height, 0px));
+  min-height: calc(100dvh - var(--app-header-height, 0px));
   background: linear-gradient(
     180deg,
     var(--color-canvas, #ffffff) 0%,

B03_FileInput/B03_FileInput_UI_TempPicker.ts

@@ -74,7 +74,7 @@ export function createTempPicker(
     const backdrop = document.createElement("div");
     backdrop.className = "b03-file__modal-backdrop";
     const modal = document.createElement("div");
-    modal.className = "b03-file__modal b03-file__temp-modal";
+    modal.className = "b03-file__modal b03-file__temp-modal ui-popup";
     modal.setAttribute("role", "dialog");
     modal.setAttribute("aria-modal", "true");
 

B03_FileInput/B03_FileInput_UI_Upload.ts

@@ -83,9 +83,11 @@ export function confirmReplaceUpload(slotLabel: string, fileName: string): Promi
  * 되돌릴 수 없는 삭제라 확인 없이는 진행하지 않는다(2026-09-08 사용자 지시).
  * 자동 절차는 이 자리를 지나지 않는다 — 서버가 확인을 켜고 부른다.
  */
-async function askReplaceOutputs<T>(run: (confirmReplace: boolean) => Promise<T>): Promise<T> {
+async function askReplaceOutputs<T>(
+  run: (confirmReplace: boolean, freshStart: boolean) => Promise<T>,
+): Promise<T> {
   try {
-    return await run(false);
+    return await run(false, false);
   } catch (error) {
     if (!(error instanceof ReplaceOutputsConfirmRequired)) throw error;
     const detail = error.targets.length
@@ -99,7 +101,16 @@ async function askReplaceOutputs<T>(run: (confirmReplace: boolean) => Promise<T>
 되돌릴 수 없습니다. 계속할까요?`,
     );
     if (!agreed) throw new Error("업로드를 취소했습니다 — 기존 결과는 그대로 있습니다.");
-    return await run(true);
+    // 지형 파일이 그대로면 전처리 결과는 살린다 — 「처음부터 다시」는 여기서 따로 고른다.
+    const freshStart =
+      error.preprocessKept &&
+      window.confirm(
+        `같은 지형 파일이라 전처리 결과(지표면)는 살려 다시 씁니다.
+
+전처리까지 처음부터 다시 할까요?
+[확인] 처음부터 다시 · [취소] 전처리 결과 살림`,
+      );
+    return await run(true, freshStart);
   }
 }
 
@@ -123,7 +134,7 @@ export async function uploadOneFile(
   const fingerprint = state.uploadSessionId ? null : await fileFingerprint(file);
   let session = state.uploadSessionId;
   if (!session) {
-    const created = await askReplaceOutputs((confirmReplace) =>
+    const created = await askReplaceOutputs((confirmReplace, freshStart) =>
       createUploadSession(
         projectId,
         file,
@@ -132,6 +143,7 @@ export async function uploadOneFile(
         completeUpload,
         lasFree,
         confirmReplace,
+        freshStart,
       ),
     );
     if (created.already_uploaded) {
@@ -184,7 +196,7 @@ export async function uploadOneFile(
     }
   }
 
-  const response = await askReplaceOutputs((confirmReplace) =>
+  const response = await askReplaceOutputs((confirmReplace, freshStart) =>
     finalizeUploadSession(
       projectId,
       session,
@@ -193,6 +205,7 @@ export async function uploadOneFile(
       fingerprint,
       lasFree,
       confirmReplace,
+      freshStart,
     ),
   );
   localStorage.removeItem(storageKey);

B04_PreProcess/B04_PreProcess_Api_Fetch.ts

@@ -18,6 +18,7 @@ import {
   API_TIMEOUT_MS,
 } from "@config/config_frontend";
 import { showToast } from "@ui/ui_template_elements";
+import { fetchCachedBytes } from "../A00_Common/b_asset_cache";
 import type { GroupItems, SummaryItem } from "../common_util/common_util_summary_item";
 
 /** 지표면 분석 실행 요청 (SurfaceAnalyzeRequest) */
@@ -244,17 +245,49 @@ export async function listSurfaceInputFiles(
   });
 }
 
+/** 점군 미리보기 고정 표본 이진(IndexedDB 보관 · ETag) — 다시 열 때 받지 않는다. */
 export async function fetchSurfacePointCloud(
   projectId: string,
   filter?: string,
 ): Promise<SurfacePointCloudSampleResponse> {
   const query = filter ? `?filter=${encodeURIComponent(filter)}` : "";
-  return requestJson<SurfacePointCloudSampleResponse>(
-    `/projects/${projectId}/surface/point-cloud${query}`,
-    {
-      method: "GET",
-    },
+  const bytes = await fetchCachedBytes(
+    projectId,
+    `${API_BASE_URL}/projects/${projectId}/surface/point-cloud/binary${query}`,
   );
+  return { status: "success", project_id: projectId, ...decodePointPreview(bytes) };
+}
+
+/**
+ * 점군 미리보기 이진 풀기 — 짝 = `B04_PreProcess_Engine_PointPreview.py` `ensure_point_preview`.
+ * [머리 길이 u32][머리 JSON][4 배수 채움][xyz f32 × 3n][rgb u16 × 3n].
+ */
+export function decodePointPreview(
+  bytes: ArrayBuffer,
+): Omit<SurfacePointCloudSampleResponse, "status" | "project_id"> {
+  const headLength = new DataView(bytes).getUint32(0, true);
+  const head = JSON.parse(new TextDecoder().decode(new Uint8Array(bytes, 4, headLength))) as {
+    point_count: number;
+    sampled_count: number;
+    bounds: SurfaceBounds;
+    has_rgb: boolean;
+  };
+  const count = head.sampled_count;
+  const offset = Math.ceil((4 + headLength) / 4) * 4;
+  const xyz = new Float32Array(bytes, offset, count * 3);
+  const points: [number, number, number][] = new Array(count);
+  for (let index = 0; index < count; index += 1) {
+    points[index] = [xyz[index * 3], xyz[index * 3 + 1], xyz[index * 3 + 2]];
+  }
+  let rgb: [number, number, number][] | undefined;
+  if (head.has_rgb) {
+    const colors = new Uint16Array(bytes, offset + xyz.byteLength, count * 3);
+    rgb = new Array(count);
+    for (let index = 0; index < count; index += 1) {
+      rgb[index] = [colors[index * 3], colors[index * 3 + 1], colors[index * 3 + 2]];
+    }
+  }
+  return { point_count: head.point_count, sampled_count: count, bounds: head.bounds, points, rgb };
 }
 
 /** 확정 지표면 구성 + 지형 가장자리만 조회한다(수 KB).
@@ -471,19 +504,14 @@ export async function fetchRoadInflow(
 export type PipeSource = "stream" | "spacing" | "user";
 
 /** 계곡 통과 시설 종류(2026-08-17 컨테이너 병합). 같은 계곡 교차점에서 유량·지형에
- *  따라 택일한다 — 정의처는 백엔드 `common_util_drainage_pipes`. 교량은 임도용이 아니다. */
+ *  따라 택일한다 — 관 지점 정본 종류 = 구조물 표 정본(`catalogRow().owner` · 323-7) · 이름 = 표 이름 ·
+ *  형상마다 손코딩 폼이 있어 종류 더하기(본보기)에서 뺌. 교량은 임도용이 아니다. */
 export type PipeFacility = "pipe" | "box_culvert" | "ford_pavement" | "ford_bridge" | "revetment";
 
-export const PIPE_FACILITY_LABELS: ReadonlyArray<[PipeFacility, string]> = [
-  ["pipe", "배수관"],
-  ["box_culvert", "BOX암거"],
-  ["ford_pavement", "물넘이포장"],
-  ["ford_bridge", "세월교"],
-  ["revetment", "기슭막이"],
-];
-
 export interface DetailPipePoint {
   chainage_m: number;
+  /** 관 고정 id(347 덧 · 측점 열쇠 `pipe:<id>`) — 서버가 붙임 · 옮겨도 그대로. */
+  id?: string;
   lonlat: [number, number];
   source: PipeSource;
   /** 시설 종류 — 응답에서 생략되면 기본 배관. */
@@ -560,6 +588,13 @@ export interface DetailBasinResponse {
   upstream_lonlat: Array<Array<[number, number]>>;
   /** [저장] 때 못 만든 구조물 조합 사본 폴더(142-2 · `*` = 통째 실패). */
   snapshot_failed?: string[];
+  /** 지문(342-3) — 지금 노선 · 관 자리. */
+  route_signature?: string;
+  pipe_signature?: string;
+  /** 분석이 낡음(노선이 분석 때와 다름) — 까닭 글 · 세부 유역 없음 · 관 자리만. */
+  stale?: string | null;
+  /** 관 자리 후보(347-3) — 제안만 · [적용] 때 관 초안에. */
+  pipe_candidates?: Array<{ chainage_m: number; lonlat: [number, number] }>;
 }
 
 let lastNote = { text: "", at: 0 };
@@ -585,7 +620,7 @@ export async function fetchDetailPipePoints(projectId: string): Promise<DetailBa
 
 /** 편집 중인 관 목록으로 세부유역을 다시 나눈다(저장하지 않는다).
  *
- *  `points`를 비우면 저장분을 무시하고 기본 관 + 자동 보충으로 되돌린다. */
+ *  빈 목록 = 관 0개(312) · 기본 관 + 자동 보충으로 되돌리기는 `resetDetailPipePoints`(DELETE)만. */
 export async function computeDetailBasins(
   projectId: string,
   points: DetailPipeInput[],
@@ -609,10 +644,13 @@ export async function resetDetailPipePoints(projectId: string): Promise<DetailBa
 export async function saveDetailPipePoints(
   projectId: string,
   points: DetailPipeInput[],
+  recompute = false,
 ): Promise<DetailBasinResponse> {
+  // [확정](recompute) = 낡았으면 서버가 지금 노선으로 배수유역부터 다시 셈(347-2) — 오래 걸림.
   const saved = await requestJson<DetailBasinResponse>(
-    `/projects/${projectId}/drainage/pipe-points`,
+    `/projects/${projectId}/drainage/pipe-points${recompute ? "?recompute=true" : ""}`,
     { method: "PUT", body: JSON.stringify({ points }) },
+    recompute ? API_ANALYSIS_TIMEOUT_MS : API_TIMEOUT_MS,
   );
   noteSnapshotFailed(saved.snapshot_failed);
   return saved;

B04_PreProcess/B04_PreProcess_Engine.py

@@ -22,6 +22,8 @@ from B04_PreProcess.B04_PreProcess_Engine_Ground import (
 from B04_PreProcess.B04_PreProcess_Engine_Pipeline import build_all_terrain_models
 from B04_PreProcess.B04_PreProcess_Engine_Structurize import structurize_las
 from common_util.common_util_atomic import atomic_write_npz
+from common_util.common_util_derived_store import file_stamp
+from common_util.common_util_derived_store import key_matches as _key_matches
 from common_util.common_util_json import atomic_write_json
 from config.config_system import (
     SHEET_SURFACE_AUTO_METHODS,
@@ -55,6 +57,79 @@ def _source_identity(las_paths: list[Path]) -> dict[str, Any]:
     return files[0] if len(files) == 1 else {"files": files}
 
 
+class _LazyXyz:
+    """structured.npz 의 xyz — 처음 값을 쓸 때만 푼다. 길이는 저장해 둔 점 수로 답한다."""
+
+    def __init__(self, structured: Any, count: int, array: np.ndarray | None = None) -> None:
+        self._structured = structured
+        self._count = count
+        self._array = array
+
+    def _load(self) -> np.ndarray:
+        if self._array is None:
+            self._array = self._structured["xyz"]
+        return self._array
+
+    def __len__(self) -> int:
+        return self._count
+
+    def __getitem__(self, key: Any) -> Any:
+        return self._load()[key]
+
+    def __array__(self, dtype: Any = None, copy: Any = None) -> np.ndarray:
+        return np.asarray(self._load(), dtype=dtype)
+
+    def __getattr__(self, name: str) -> Any:
+        return getattr(self._load(), name)
+
+
+class _LazyStructured(dict):
+    """구조화 결과 — 열쇠마다 처음 쓸 때만 푼다(저장본이 다 맞는 다시 돎은 점군을 안 풂)."""
+
+    def __init__(self, structured: Any, xyz: _LazyXyz) -> None:
+        super().__init__()
+        self._structured = structured
+        self["xyz"] = xyz
+
+    # 옛 dict 와 같은 열쇠만 보인다 — 필터가 열쇠 유무로 갈리는 일이 없게.
+    _KEYS = ("classification",)
+
+    def __missing__(self, key: str) -> Any:
+        if key not in self._KEYS:
+            raise KeyError(key)
+        value = self._structured[key]
+        self[key] = value
+        return value
+
+    def __contains__(self, key: object) -> bool:
+        return dict.__contains__(self, key) or key in self._KEYS
+
+
+def _structured_stats(structured: Any, structured_path: Path) -> tuple[dict[str, Any], Any]:
+    """점 수 · 평균 Z 를 `structured_stats.json` 에서 읽는다 — 없거나 낡으면 한 번 풀어 적는다.
+
+    돌려주는 둘째 값 = 이번에 푼 xyz(없으면 None) — 같은 부름 안에서 다시 풀지 않게.
+    """
+    stats_path = structured_path.parent / "structured_stats.json"
+    stat = structured_path.stat()
+    stamp = {"size_bytes": int(stat.st_size), "mtime_ns": int(stat.st_mtime_ns)}
+    try:
+        stored = json.loads(stats_path.read_text(encoding="utf-8"))
+        if stored.get("structured") == stamp:
+            return stored, None
+    except (OSError, ValueError, AttributeError):
+        pass
+    xyz = structured["xyz"]
+    count = int(len(xyz))
+    stats = {
+        "structured": stamp,
+        "point_count": count,
+        "mean_z": float(np.mean(xyz[:, 2])) if count else None,
+    }
+    atomic_write_json(stats_path, stats)
+    return stats, xyz
+
+
 def _relative_to_project(project_root: Path, path: Path) -> str:
     """프로젝트 루트 기준 posix 상대 경로 문자열."""
     return path.relative_to(project_root).as_posix()
@@ -179,13 +254,14 @@ def run_surface_analysis(
         _report(10, "structurize", "구조화 캐시 재사용")
         logger.info("B04 구조화 캐시 재사용: %s", structured_path.name)
     with np.load(structured_path) as structured:
-        xyz = structured["xyz"]
+        # 점 수 · 평균 Z 는 저장값 — 저장본이 다 맞으면 점군(841 MB 압축)을 풀지 않는다.
+        stored_stats, loaded_xyz = _structured_stats(structured, structured_path)
         bounds = structured["bounds"]
-        total_points = int(len(xyz))
+        total_points = int(stored_stats["point_count"])
         stats = {
             "min_z": float(bounds[2, 0]),
             "max_z": float(bounds[2, 1]),
-            "mean_z": float(np.mean(xyz[:, 2])) if total_points else None,
+            "mean_z": stored_stats["mean_z"],
         }
         bounds_dict = {
             "x_min": float(bounds[0, 0]),
@@ -193,7 +269,8 @@ def run_surface_analysis(
             "y_min": float(bounds[1, 0]),
             "y_max": float(bounds[1, 1]),
         }
-        data = {"xyz": xyz, "bounds": bounds, "classification": structured["classification"]}
+        data = _LazyStructured(structured, _LazyXyz(structured, total_points, loaded_xyz))
+        data["bounds"] = bounds
 
         # 2. 지면 필터 실행 — mask_{filter}.npy 영구 캐시 우선 재사용 (PLAN A-1)
         _report(40, "ground_filter", "지면 필터 적용 중")
@@ -242,6 +319,15 @@ def run_surface_analysis(
                     ):
                         continue
             cache_ground_points(structured_path, filter_key, mask)
+        # 점군 미리보기 고정 표본(이진) — 원천이 그대로면 머리만 보고 건너뜀
+        try:
+            from B04_PreProcess.B04_PreProcess_Engine_PointPreview import ensure_point_preview
+
+            ensure_point_preview(structured_path, None, data["xyz"])
+            for filter_key in masks:
+                ensure_point_preview(processed_dir / f"ground_points_{filter_key}.npz", filter_key)
+        except Exception as exc:  # noqa: BLE001 — 미리보기 실패가 분석을 막지 않음
+            logger.warning("B04 점군 미리보기 이진 생성 실패: %s", exc)
 
         # 3. 지표면 5종 모델 빌드
         _report(70, "surface_model", "지표면 모델 생성 중")
@@ -386,14 +472,21 @@ def download_geodata(
 
         # 등고선은 국가 gpkg 추가 시점이 전처리보다 늦을 수 있으므로 개별로 존재 여부를 확인한다.
         contour_geojson = processed_dir / "등고선_bounds.geojson"
+        # 열쇠 = 받은 범위 · 좌표계 — 노선이 바뀌어 범위가 달라지면 다시 받는다.
+        gis_key_path = processed_dir / "gis_vectors.key.json"
+        gis_key = json.loads(
+            json.dumps({"epsg": project_epsg, "bounds": bounds_dict_for_download}, default=float)
+        )
         if (
             rebuild
             or not any(processed_dir.glob("*_bounds.geojson"))
             or not contour_geojson.exists()
+            or not _key_matches(gis_key_path, gis_key)
         ):
             try:
                 step_started = time.monotonic()
                 download_all_gis_vectors(prj_path, bounds_dict_for_download, processed_dir)
+                atomic_write_json(gis_key_path, gis_key)
                 logger.info(
                     "B04 국가 GIS 벡터 다운로드 완료 (%.1fs)", time.monotonic() - step_started
                 )
@@ -433,9 +526,13 @@ def download_geodata(
             # 선정에서 빠진 zip은 쓰이지 않으므로 정리한다(다른 지역 잔재 포함).
             prune_sheets(sheet_store, sheet_grid)
 
-            # 확보된 도엽을 레이어별 병합 GeoJSON으로 산출 (기존 산출물 있으면 스킵)
+            # 확보된 도엽을 레이어별 병합 GeoJSON으로 산출 — 열쇠(도엽 번호 목록)가 같으면 스킵
+            merge_key_path = processed_dir / "sheet_merge.key.json"
+            merge_key = {"sheets": sorted(str(item) for item in sheet_result["available"])}
             if sheet_result["available"] and (
-                rebuild or not any(processed_dir.glob("도엽_*.geojson"))
+                rebuild
+                or not any(processed_dir.glob("도엽_*.geojson"))
+                or not _key_matches(merge_key_path, merge_key)
             ):
                 from B04_PreProcess.B04_PreProcess_Engine_SheetParser import (
                     parse_and_merge_sheets,
@@ -450,6 +547,7 @@ def download_geodata(
                     {k: v["count"] for k, v in merged.items()},
                     time.monotonic() - step_started,
                 )
+                atomic_write_json(merge_key_path, merge_key)
         except Exception as exc:
             logger.warning("B04 수치지형도 도엽 확보 실패: %s", exc)
     except Exception as exc:
@@ -510,6 +608,8 @@ def _collect_analysis_result(
                         "source_filter": filter_key,
                         "representation": meta.get("representation"),
                         "footprint_area_m2": meta.get("footprint_area_m2"),
+                        # 파일 지문 — 같으면 DB 행 id 를 살린다(화면 주소 · 노선 연결 유지).
+                        "file_stamp": file_stamp(model_path),
                     },
                     "layers": layers,
                 }

B04_PreProcess/B04_PreProcess_Engine_MvtHelper.py

@@ -18,7 +18,7 @@ try:
 except ImportError:
     mapbox_vector_tile = None
 
-# 메모리 캐시: {project_id}_{layer_name}: GeoDataFrame
+# 메모리 캐시: {project_id}_{layer_name}: ((mtime_ns, 크기), GeoDataFrame)
 _gdf_cache: dict[str, Any] = {}
 
 
@@ -41,9 +41,13 @@ def get_tile_bbox(xtile: int, ytile: int, zoom: int) -> tuple[float, float, floa
 def load_geojson_cached(filepath: Path, cache_key: str) -> Any:
     """GeoJSON 파일을 한 번 읽으면 메모리에 GeoDataFrame으로 캐싱합니다."""
     global _gdf_cache
-    if cache_key not in _gdf_cache:
-        if not filepath.exists():
-            raise FileNotFoundError(f"File not found: {filepath}")
+    if not filepath.exists():
+        raise FileNotFoundError(f"File not found: {filepath}")
+    # 열쇠에 수정시각·크기 — 전처리를 다시 돌려 파일이 바뀌면 옛 타일을 버린다.
+    stat = filepath.stat()
+    stamp = (stat.st_mtime_ns, stat.st_size)
+    cached = _gdf_cache.get(cache_key)
+    if cached is None or cached[0] != stamp:
         if gpd is None:
             raise ImportError("geopandas가 설치되어 있지 않습니다.")
         gdf = gpd.read_file(filepath)
@@ -51,8 +55,8 @@ def load_geojson_cached(filepath: Path, cache_key: str) -> Any:
             gdf.set_crs(epsg=4326, inplace=True)
         if gdf.crs.to_epsg() != 4326:
             gdf = gdf.to_crs(epsg=4326)
-        _gdf_cache[cache_key] = gdf
-    return _gdf_cache[cache_key]
+        _gdf_cache[cache_key] = (stamp, gdf)
+    return _gdf_cache[cache_key][1]
 
 
 def generate_mvt_tile(

B04_PreProcess/B04_PreProcess_Engine_PointPreview.py

@@ -0,0 +1,97 @@
+"""B04 점군 미리보기 — 고정 표본 이진 파일(전처리 때 한 번 · ETag 로 내보냄).
+
+JSON(27.8 MB · 요청마다 점군 풀고 표본)을 대신한다. 표본 규칙은 JSON 길과 같다
+(`sample_points` · 같은 씨앗) — 같은 점 · 같은 float32 값.
+
+파일 = [머리 길이 uint32 LE][머리 JSON utf-8][0 채움 → 4 배수][xyz float32 × 3n][rgb uint16 × 3n].
+머리 = {version, source(원천 npz mtime_ns:크기), point_count, sampled_count, bounds, has_rgb}.
+TS 짝(읽기) = `B04_PreProcess_Api_Fetch.ts` `decodePointPreview`.
+"""
+
+from __future__ import annotations
+
+import json
+import struct
+from pathlib import Path
+from typing import Any
+
+import numpy as np
+
+from common_util.common_util_atomic import atomic_write_bytes
+
+POINT_CLOUD_SAMPLE_LIMIT = 500_000
+PREVIEW_VERSION = 1
+_SAMPLE_SEED = 20260710
+
+
+def sample_points(xyz: np.ndarray, rgb: np.ndarray | None) -> tuple[np.ndarray, np.ndarray | None]:
+    """화면용 고정 표본 — 상한을 넘으면 같은 씨앗으로 고른다(열 때마다 같은 그림)."""
+    source_count = int(len(xyz))
+    if rgb is not None and (rgb.ndim == 0 or len(rgb) != source_count):
+        rgb = None
+    if source_count <= POINT_CLOUD_SAMPLE_LIMIT:
+        return xyz, rgb
+    indexes = np.random.default_rng(_SAMPLE_SEED).choice(
+        source_count, POINT_CLOUD_SAMPLE_LIMIT, replace=False
+    )
+    return xyz[indexes], (rgb[indexes] if rgb is not None else None)
+
+
+def preview_path(processed_dir: Path, filter_key: str | None) -> Path:
+    return processed_dir / f"preview_points_{filter_key or 'raw'}.bin"
+
+
+def _stamp(path: Path) -> str:
+    stat = path.stat()
+    return f"{stat.st_mtime_ns}:{stat.st_size}"
+
+
+def read_preview_header(path: Path) -> dict[str, Any] | None:
+    """머리만 읽는다 — 없거나 깨졌으면 None."""
+    try:
+        with path.open("rb") as file:
+            (length,) = struct.unpack("<I", file.read(4))
+            return json.loads(file.read(length).decode("utf-8"))
+    except (OSError, ValueError, struct.error):
+        return None
+
+
+def ensure_point_preview(source_path: Path, filter_key: str | None, xyz_source: Any = None) -> Path:
+    """원천 npz(structured · ground_points_*) 그대로면 있는 파일 · 아니면 한 번 만든다.
+
+    `xyz_source` — 이미 메모리에 있는 xyz(또는 쓸 때 푸는 대리자) · 없으면 npz 에서 푼다.
+    """
+    target = preview_path(source_path.parent, filter_key)
+    stamp = _stamp(source_path)
+    header = read_preview_header(target)
+    if header and header.get("version") == PREVIEW_VERSION and header.get("source") == stamp:
+        return target
+    with np.load(source_path) as data:
+        xyz = np.asarray(data["xyz"] if xyz_source is None else xyz_source, dtype=np.float32)
+        bounds = np.asarray(data["bounds"], dtype=np.float64)
+        point_count = int(data["point_count"]) if "point_count" in data else int(len(xyz))
+        rgb = np.asarray(data["rgb"]) if "rgb" in data else None
+    sample, rgb_sample = sample_points(xyz, rgb)
+    header = {
+        "version": PREVIEW_VERSION,
+        "source": stamp,
+        "point_count": point_count,
+        "sampled_count": int(len(sample)),
+        "bounds": {
+            "x_min": float(bounds[0, 0]),
+            "x_max": float(bounds[0, 1]),
+            "y_min": float(bounds[1, 0]),
+            "y_max": float(bounds[1, 1]),
+            "z_min": float(bounds[2, 0]),
+            "z_max": float(bounds[2, 1]),
+        },
+        "has_rgb": rgb_sample is not None,
+    }
+    head = json.dumps(header).encode("utf-8")
+    pad = (-(4 + len(head))) % 4
+    parts = [struct.pack("<I", len(head)), head, b"\0" * pad]
+    parts.append(np.ascontiguousarray(sample, dtype="<f4").tobytes())
+    if rgb_sample is not None:
+        parts.append(np.ascontiguousarray(rgb_sample, dtype="<u2").tobytes())
+    atomic_write_bytes(target, b"".join(parts))
+    return target

B04_PreProcess/B04_PreProcess_Engine_SheetSurface.py

@@ -15,6 +15,7 @@ LAS 없는 설계(2026-08-30 사용자 확정)의 지형 원천이자, LAS가
   격자에서 뽑는 1m 등고선이 곧 2D 보간선이며, 메시(glb)는 그 격자의 표현일 뿐이다.
 """
 
+import hashlib
 import json
 import logging
 import time
@@ -36,6 +37,8 @@ from B04_PreProcess.B04_PreProcess_Engine_SheetMethods import (
     SHEET_METHOD_LABELS,
 )
 from B04_PreProcess.B04_PreProcess_Engine_Watershed_Grid import grid_spec_from_bounds
+from common_util.common_util_derived_store import file_stamp
+from common_util.common_util_json import atomic_write_json
 from config.config_system import (
     SHEET_SURFACE_GRID_M,
     SHEET_SURFACE_MARGIN_M,
@@ -54,6 +57,9 @@ _CONTOUR_FILE = "도엽_등고선.geojson"
 # 산출 모델 식별자 — surface_models.generation_params.source_filter 및 파일 stem에 쓴다.
 SHEET_SOURCE_FILTER = "sheet"
 
+# 계산 판 번호 — 만드는 방식이 바뀌면 올림 · 열쇠가 어긋나 옛 저장본을 다시 셈.
+SHEET_SURFACE_ALGO = 1
+
 
 def _load_features_metric(
     processed_dir: Path, crs: str, filename: str = _CONTOUR_FILE
@@ -378,6 +384,15 @@ def _write_method_model(
     vertices, faces = _preview_mesh(x_coords, y_coords, z_grid, valid_grid)
     write_glb(preview_path, vertices, faces, scene)
     _write_smoothed(models_dir, stem, x_coords, y_coords, z_grid, valid_grid, bounds, scene)
+    return _method_model_entry(project_root, models_dir, method_key)
+
+
+def _method_model_entry(project_root: Path, models_dir: Path, method_key: str) -> dict[str, Any]:
+    """방식 하나의 등록용 dict — 저장본 그대로 쓸 때도 같은 모양."""
+    source_filter = f"{SHEET_SOURCE_FILTER}_{method_key}"
+    stem = f"dtm_{source_filter}"
+    model_path = models_dir / f"{stem}.npz"
+    preview_path = models_dir / f"{stem}_preview.glb"
     return {
         "model_type": "dtm",
         "source_filter": source_filter,
@@ -391,6 +406,7 @@ def _write_method_model(
             "interpolation": method_key,
             "interpolation_label": SHEET_METHOD_LABELS.get(method_key, method_key),
             "margin_m": SHEET_SURFACE_MARGIN_M,
+            "file_stamp": file_stamp(model_path),
         },
         "layers": [
             {
@@ -403,6 +419,59 @@ def _write_method_model(
     }
 
 
+def _sheet_key(
+    project_root: Path, processed_dir: Path, route_xy: np.ndarray, crs: str, method_key: str
+) -> dict[str, Any] | None:
+    """도엽 3D 면 열쇠 — 등고선 파일 · 노선 · 좌표계 · 격자 · 여유 · 스무딩 · 화면 상자 · 판."""
+    contour = processed_dir / _CONTOUR_FILE
+    try:
+        stat = contour.stat()
+    except OSError:
+        return None
+    scene = _scene_bounds(project_root, None)  # type: ignore[arg-type]  # 라이다 없으면 None
+    key = {
+        "algo": SHEET_SURFACE_ALGO,
+        "method": method_key,
+        "contour": f"{contour.name}:{stat.st_mtime_ns}:{stat.st_size}",
+        "route": hashlib.sha1(np.round(route_xy, 3).tobytes()).hexdigest(),
+        "crs": str(crs),
+        "grid_m": SHEET_SURFACE_GRID_M,
+        "margin_m": SHEET_SURFACE_MARGIN_M,
+        "smoothing": [
+            SURFACE_SMOOTHING_DTM_SIGMA_M,
+            SURFACE_SMOOTHING_DTM_SPLINE_SMOOTH,
+            SURFACE_SMOOTHING_DTM_PREVIEW_RESOLUTION_M,
+            SURFACE_MAX_PREVIEW_VERTICES,
+        ],
+        "scene_bounds": None if scene is None else np.round(scene, 3).tolist(),
+    }
+    return json.loads(json.dumps(key, default=float))
+
+
+def _key_path(models_dir: Path, method_key: str) -> Path:
+    return models_dir / f"dtm_{SHEET_SOURCE_FILTER}_{method_key}.key.json"
+
+
+def _cached_method_model(
+    project_root: Path, models_dir: Path, method_key: str, key: dict[str, Any] | None
+) -> dict[str, Any] | None:
+    """열쇠가 같고 결과 파일이 있으면 등록용 dict — 아니면 None(다시 셈)."""
+    if key is None:
+        return None
+    entry = _method_model_entry(project_root, models_dir, method_key)
+    if not all((project_root / item).is_file() for item in _entry_files(entry)):
+        return None
+    try:
+        stored = json.loads(_key_path(models_dir, method_key).read_text(encoding="utf-8"))
+    except (OSError, ValueError):
+        return None
+    return entry if stored == key else None
+
+
+def _entry_files(entry: dict[str, Any]) -> list[str]:
+    return [entry["model_file_path"], *(layer["file_path"] for layer in entry["layers"])]
+
+
 def build_sheet_surface_model(
     project_root: Path,
     processed_dir: Path,
@@ -420,6 +489,16 @@ def build_sheet_surface_model(
     `route_xy`: (N, 2) 노선 정점 XY(사업지 CRS, m), `crs`: 그 좌표계(pyproj 입력 문자열).
     """
     started = time.monotonic()
+    selected = methods or list(SHEET_SURFACE_METHODS)
+    # 열쇠가 같은 방식은 저장본 그대로 — 다시 셀 방식만 등고선을 읽고 굽는다.
+    keys = {key: _sheet_key(project_root, processed_dir, route_xy, crs, key) for key in selected}
+    cached = {
+        key: _cached_method_model(project_root, models_dir, key, keys[key]) for key in selected
+    }
+    pending = [key for key in selected if cached[key] is None]
+    if not pending:
+        logger.info("도엽 서피스: 열쇠 같음 — 저장본 그대로 (%s)", ", ".join(selected))
+        return [cached[key] for key in selected]  # type: ignore[misc]
     features = _load_features_metric(processed_dir, crs)
     if not features:
         return []
@@ -439,9 +518,8 @@ def build_sheet_surface_model(
     # 등고 간격(m) — 마루 연장 상한의 근거. 레벨이 하나뿐이면 5m(주곡선) 폴백.
     interval_m = float(np.diff(np.array(present)).min()) if len(present) > 1 else 5.0
 
-    selected = methods or list(SHEET_SURFACE_METHODS)
-    models: list[dict[str, Any]] = []
-    for method_key in selected:
+    built: dict[str, dict[str, Any]] = {}
+    for method_key in pending:
         builder = SHEET_METHOD_BUILDERS.get(method_key)
         if builder is None:
             logger.warning("도엽 서피스: 알 수 없는 보간 방식 %s — 건너뜁니다.", method_key)
@@ -456,9 +534,13 @@ def build_sheet_surface_model(
         except Exception as exc:  # noqa: BLE001 — 한 방식이 죽어도 나머지는 만든다
             logger.warning("도엽 서피스(%s) 생성 실패: %s", method_key, exc)
             continue
+        # 쓰는 도중 끊기면 옛 열쇠가 새 파일 조각을 덮지 않게 먼저 지움.
+        _key_path(models_dir, method_key).unlink(missing_ok=True)
         model = _write_method_model(project_root, models_dir, spec, surface, method_key)
         if model is not None:
-            models.append(model)
+            built[method_key] = model
+            if keys[method_key] is not None:
+                atomic_write_json(_key_path(models_dir, method_key), keys[method_key])
             logger.info("도엽 서피스(%s) 완료 (%.1fs)", method_key, time.monotonic() - step_started)
 
     logger.info(
@@ -466,10 +548,10 @@ def build_sheet_surface_model(
         spec.n_rows,
         spec.n_cols,
         len(present),
-        len(models),
+        len(built),
         time.monotonic() - started,
     )
-    return models
+    return [cached[key] or built[key] for key in selected if cached[key] or key in built]
 
 
 def build_sheet_surface_from_route(