fix(일위대가실무): 324 다듬기 — 줄 표 줄바꿈 없음 · 고르기 창 [닫기] 안 갈라짐 · 뜻 낱말 안 겹치는 후보 숨김 · 다시 씀 · 새로 덮음 알림 글

- 줄 표: 갈래 · 수량 · 단위 · 엑셀 단가 · 맞춤 · 입력값 · 환산 · 단추 열 줄바꿈 없음(글 폭) · 입력값 길면 줄임표 · 칸 여백 좁힘 · 품명 · 규격 · 대상이 남는 폭
- 고르기 창 머리: [닫기] 단추 줄바꿈 없음 · 안 줄어듦
- 후보: 정리 이름 뜻 낱말(괄호 밖 두 글자 이상 덩어리 · 낱글자 붙임)이 하나도 안 겹치면 뺌(잔토처리 · 임도표지석 → 후보 없음) · 다 걸러지면 「가까운 것 없음」 + [다른 로직 · 자재 찾기]
- 알림: 있던 사전조합 = 「다시 씀 — 빠진 줄 N」 · [새로 만들기] 뒤 = 「새로 만들어 덮음」(토스트 · 판 글)
- 시험 hopyo 넷 42 통과 · typecheck 0

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

.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_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,157 @@ 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;
+
+export function setDrawerSteps(node: HTMLElement | null): void {
+  drawerSteps = node?.parentElement ? { 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 (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"))
+      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,
+    }),
+  );
+  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 +310,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 +382,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 +408,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_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,10 @@ 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" },
+  /** B05 3D 영역 투영(316-2) `perspective · ortho` · 없으면 원근. */
+  "b05-3d-projection": { bucket: "pref", scope: "global" },
   "section-panel-height": {
     bucket: "pref",
     scope: "global",
@@ -110,6 +114,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 +133,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 +195,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).
@@ -477,29 +489,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

@@ -61,12 +61,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 +89,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 +136,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 +160,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 +194,7 @@ export function attachSvgZoomPan(options: SvgZoomPanOptions): ZoomPanHandle {
       /* 이미 해제됨 */
     }
   };
-  if (initial && (scale !== 1 || tx !== 0 || ty !== 0)) {
+  if (scale !== 1 || tx !== 0 || ty !== 0) {
     clampPan();
     applyTransform();
   }
@@ -203,11 +219,41 @@ export function attachSvgZoomPan(options: SvgZoomPanOptions): ZoomPanHandle {
       { 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/design_page.css

@@ -50,7 +50,7 @@
   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);
 }

A00_Common/design/design_page.ts

@@ -29,6 +29,7 @@ import {
 import { currentRoute, navigateTo, type MountedPage } from "../router";
 import type { DesignView } from "./design_dock";
 import type { DesignPageShared } from "./design_shared";
+import { usePipeIds } from "./design_pipe_ids";
 import "./design_page.css";
 
 export type { DesignPageShared } from "./design_shared";
@@ -105,6 +106,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");

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

@@ -15,13 +15,10 @@ 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,
@@ -45,7 +42,6 @@ import type {
 } from "../../B05_Profile/B05_Profile_UI_Profile_Alignment";
 import {
   buildAlignment,
-  chainageKey,
   emptyEdits,
   toAlignmentBase,
 } from "../../B05_Profile/B05_Profile_UI_Profile_Alignment";
@@ -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,19 @@ import {
   createElevationHold,
   createProfileDrag,
 } from "../../B05_Profile/B05_Profile_UI_Profile_Drag";
+import { planCurveWarning, sampleAt } from "../../B05_Profile/B05_Profile_UI_Profile_Guard";
 import {
-  planCurveWarning,
-  sampleAt,
-  snapToMasterStations,
-} from "../../B05_Profile/B05_Profile_UI_Profile_Guard";
+  irregularGraphStations,
+  maxChainageOf,
+} from "../../B05_Profile/B05_Profile_UI_Profile_Layout";
+import { followMovedNodes, oneStationList } from "../../common_util/common_util_structure_station";
 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 +103,8 @@ export interface DesignProfileContext {
   view: DesignView;
   /** 오른쪽 판 — 없으면 판 없이 종단 열만. */
   side?: DesignSideFactory;
-  /** 오른쪽 판을 켜고 끄는 단추 — 도구줄 오른쪽에 붙는다(판이 있을 때만). */
-  sideTool?: (board: DesignSideBoard) => HTMLElement;
+  /** 도구줄 [초기화] 바로 왼쪽에 놓는 단추([새 창]) — 다시 그려도 그 자리. */
+  toolLead?: HTMLElement;
   /** 측점 선택 변경 — 같은 측점 재선택·빈 곳 클릭이면 null(해제)로 알린다. */
   onSelectStation: (stationId: string | null) => void;
   /** [초기선 복원] 클릭 시 함께 실행(비정규 측점 등 다른 조작값도 초기화하려고 페이지가 넘긴다). */
@@ -161,40 +157,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,6 +219,8 @@ 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());
   /** 서버 저장분 — 되돌리기 복원이 초안을 다시 읽을 때 기준으로 쓴다. */
@@ -261,9 +233,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 +267,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 +289,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,6 +342,33 @@ export function createDesignProfile(ctx: DesignProfileContext) {
     history.record();
   }
 
+  /** 계획선 측점 줄 = 측점 한 벌(서버 일반 측점 + 지금 구조물 측점 · 272) — 표 · ▲▼ 가 옛 자리
+   *  구조물 측점(옮긴 관 · 서버가 다시 맞추기 전)을 안 봄 · 그래프 · 3D 와 같은 목록. 사라진 구조물
+   *  측점의 꼭짓점은 [저장] 때 서버와 같게 옮기거나 지움(`followMovedNodes`). 늘 저장분에서 셈. */
+  function listed(): 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,
+      })),
+    };
+  }
+
   /**
    * 편집 후 다시 그린다. 길게 누르기(초당 10회)로 연속 호출되므로 한 프레임에 한 번만
    * 실제 렌더링하도록 모은다.
@@ -372,7 +381,7 @@ export function createDesignProfile(ctx: DesignProfileContext) {
     scheduleCrossPreview();
     if (redrawPending) return;
     redrawPending = true;
-    requestAnimationFrame(() => {
+    frameOf(root, () => {
       redrawPending = false;
       draw();
     });
@@ -418,6 +427,7 @@ export function createDesignProfile(ctx: DesignProfileContext) {
 
   function draw(): void {
     renderProfile({
+      onStaleDesigns: crossPreview.scheduleIfStale, // 그린 뒤 생긴 낡음도 다시 셈(317-1)
       body,
       callbacks,
       massHaul,
@@ -453,7 +463,7 @@ export function createDesignProfile(ctx: DesignProfileContext) {
       zoom: profileZoom.state,
       holdElevationRange: elevationHold.hold,
       toolActive: () => tools.mode() !== "none",
-      selectedRuns: () => tools.selectedRuns(),
+      tools,
       stationIdAtStructure,
       redraw: draw,
       setElevationWindowUpdater: (update) => {
@@ -462,46 +472,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 {
@@ -529,7 +520,8 @@ export function createDesignProfile(ctx: DesignProfileContext) {
         savedEdits = stored?.edits ?? emptyEdits();
         store = createProfileEditStore(routeId, savedEdits, () => rebuild());
       }
-      base = stored ? toAlignmentBase(stored) : null;
+      storedBase = stored ? toAlignmentBase(stored) : null;
+      base = listed();
       // 이월분은 base 설정 후 미저장 초안으로 커밋한다(확정 시 전송·재탐색 후 새로고침에도 유지).
       if (carried) store.replace(carried);
       alignment = base ? buildAlignment(base, store.edits()) : null;
@@ -540,11 +532,10 @@ export function createDesignProfile(ctx: DesignProfileContext) {
         nextDetail.balloon_offsets ?? undefined,
       );
       draw();
-      requestAnimationFrame(draw);
+      frameOf(root, draw);
       // 저장된 횡단 설계가 옛 계획고로 굳어 있으면 진입 즉시 한 번 맞춘다 —
       // 지금까지는 B06에 들어가야만 고쳐져, B05의 횡단 기준 유토곡선과 3D
       // 예상형상이 옛 설계선을 그대로 썼다(2026-08-23 사용자 보고 · 실측 확인).
-      //
       // 비교 대상은 **편집이 반영된 계획선**이다. 저장분끼리 견주면, 세션에 미저장 편집이
       // 남은 채로 새로고침했을 때 「어긋남 없음」으로 나와 재계산이 예약되지 않고, 그리기
       // 쪽은 편집분 기준으로 어긋났다고 보아 유토곡선이 영영 빈 화면이 됐다
@@ -578,6 +569,7 @@ export function createDesignProfile(ctx: DesignProfileContext) {
       // 3D·리스트·배수유역도에서 온 선택도 같은 자리 알약을 함께 켠다(2026-08-17).
       selectedStructureId = structureIdAtStation(stationId);
       draw();
+      revealPick();
     },
     /** 횡단배수 최소고를 편집에서 강제할지(사이드 체크박스). 경고 표시는 무관하게 유지된다. */
     setEnforceMinCover(enforce: boolean) {
@@ -592,9 +584,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 +598,9 @@ export function createDesignProfile(ctx: DesignProfileContext) {
     },
     /** 비정규 측점 목록을 반영해 그래프(세로선+라벨)·테이블(주석)을 다시 그린다. */
     setIrregularStations(stations: IrregularStation[]) {
-      irregularStations = snapToMasterStations(alignment, stations);
+      irregularStations = stations;
+      base = listed();
+      if (base) alignment = buildAlignment(base, store.edits());
       draw();
     },
     /** 구조물 타입 레지스트리를 받아 마크 색·약호에 쓴다(최초 1회 · 우클릭 목록은 사이드 패널 몫). */
@@ -629,6 +625,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 +637,24 @@ 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(),
     /** [확정] 직전에 호출한다. 편집이 없으면 아무 것도 하지 않는다. */
     async save(): Promise<void> {
       if (!routeId || !store.dirty()) 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 +663,7 @@ export function createDesignProfile(ctx: DesignProfileContext) {
     clear() {
       detail = null;
       base = null;
+      storedBase = null;
       alignment = null;
       selectedStationId = null;
       balanceBar.replaceChildren();
@@ -689,7 +691,7 @@ export function createDesignProfile(ctx: DesignProfileContext) {
       setListening(false);
       drag.dispose();
       crossPreview.dispose();
-      resizeObserver.disconnect();
+      unbindViewport();
     },
   };
 }

A00_Common/design/design_profile_free.ts

@@ -0,0 +1,363 @@
+/* =============================================================================
+ * A00_Common/design/design_profile_free.ts
+ * 종단 [자유지정] 계산 — 범위 · 클릭 점 · 측점선 붙음 · 높이 변환 · 기울기 판정 · 적용(215-1).
+ *
+ * 흐름: 세로 측점선 둘로 범위를 고름 → 시작(또는 끝) 세로선 근처 클릭 = 그 측점 계획고에 이은
+ * 채 시작 → 클릭마다 점 하나(가로 = 범위 안 가장 가까운 측점선 · 높이 = 클릭한 높이) → 반대쪽
+ * 세로선 근처 클릭 또는 Enter = 그 측점 계획고에 이어 끝. Esc = 취소 · Backspace = 마지막 점 빼기.
+ *
+ * 적용은 직선화와 같은 길 — 편집 델타(`station_offsets` · `curve_radii`)만 만들어 캐시에 쓰고
+ * [저장] 때 서버가 다시 셈한다. 꺾이는 점 종단곡선 = 직선화 틸팅과 같은 기본 길이 L
+ * (R = L / |대수차|). 양 끝 세로선의 라운드는 직선화처럼 그대로 둔다.
+ *
+ * 화면(`design_profile_free_view.ts`)은 클릭 · 마우스 · 키만 넘기고 여기 표시 자료를 그린다.
+ * ========================================================================== */
+
+import type {
+  AlignmentBase,
+  AlignmentEdits,
+  ProfileAlignment,
+} from "../../B05_Profile/B05_Profile_UI_Profile_Alignment";
+import {
+  buildAlignment,
+  chainageKey,
+  controlElevationAt,
+} from "../../B05_Profile/B05_Profile_UI_Profile_Alignment";
+import {
+  baseElevationAt,
+  defaultCurveLength,
+} from "../../B05_Profile/B05_Profile_UI_Profile_Straighten";
+
+/** 두 chainage 를 같은 측점으로 볼 허용 오차(m). */
+const SAME_M = 1e-6;
+/** 클릭 높이를 이 단위(m)로 끊는다. */
+const ELEVATION_STEP_M = 0.01;
+
+export interface FreeVertex {
+  chainage_m: number;
+  elevation_m: number;
+}
+
+/** range = 범위 고르는 중 · armed = 시작 세로선을 기다림 · drawing = 점 찍는 중. */
+export type FreePhase = "range" | "armed" | "drawing";
+
+/** 그래프 세로 창 — 그릴 때 기준(`data-yw-*`)과 지금 걸린 변환. */
+export interface ChartWindow {
+  center: number;
+  pxPerM: number;
+  zero: number;
+  scale: number;
+  offset: number;
+}
+
+/** 세로 창 변환 글(`translate(0 a) scale(1 b)`)을 읽는다 — 없으면 그릴 때 그대로. */
+export function parseWindowTransform(text: string | null): { scale: number; offset: number } {
+  const num = "([-+0-9.eE]+)";
+  const match = new RegExp(`translate\\(\\s*0[ ,]+${num}\\s*\\)\\s*scale\\(\\s*1[ ,]+${num}`).exec(
+    text ?? "",
+  );
+  if (!match) return { scale: 1, offset: 0 };
+  const offset = Number(match[1]);
+  const scale = Number(match[2]);
+  return Number.isFinite(offset) && Number.isFinite(scale) && scale > 0
+    ? { scale, offset }
+    : { scale: 1, offset: 0 };
+}
+
+/** 그래프 y(px) → 표고(m). 과장 배율은 `pxPerM` 에 들어 있다. */
+export function elevationAtChartY(view: ChartWindow, y: number): number {
+  const baked = (y - view.offset) / view.scale;
+  return view.center + (view.zero - baked) / view.pxPerM;
+}
+
+/** 표고(m) → 그래프 y(px). `elevationAtChartY` 의 역. */
+export function chartYAtElevation(view: ChartWindow, elevationM: number): number {
+  return view.scale * (view.zero - (elevationM - view.center) * view.pxPerM) + view.offset;
+}
+
+/** 가장 가까운 측점 세로선. 범위를 주면 그 안(양 끝 포함)에서만 고른다. */
+export function snapStation(
+  stations: number[],
+  chainageM: number,
+  range: [number, number] | null = null,
+): number | null {
+  let best: number | null = null;
+  for (const station of stations) {
+    if (range && (station < range[0] - SAME_M || station > range[1] + SAME_M)) continue;
+    if (best === null || Math.abs(station - chainageM) < Math.abs(best - chainageM)) {
+      best = station;
+    }
+  }
+  return best;
+}
+
+/** 두 점 사이 기울기(%). */
+export function gradePct(from: FreeVertex, to: FreeVertex): number {
+  const span = to.chainage_m - from.chainage_m;
+  return Math.abs(span) > 1e-12 ? ((to.elevation_m - from.elevation_m) / span) * 100 : 0;
+}
+
+/** 임도 기준 최대 기울기를 넘는가 — 판정은 선형 계산의 위반 판정(`violations`)과 같은 식. */
+export function overGrade(pct: number, maxPct: number): boolean {
+  return Math.abs(pct) > maxPct + 1e-6;
+}
+
+/** 점들을 잇는 꺾은선 위 표고(chainage 오름차순 꺾은선). */
+function elevationOnPath(path: FreeVertex[], chainageM: number): number {
+  for (let index = 1; index < path.length; index += 1) {
+    const left = path[index - 1];
+    const right = path[index];
+    if (chainageM > right.chainage_m + SAME_M) continue;
+    const span = right.chainage_m - left.chainage_m;
+    const ratio = span > 1e-12 ? (chainageM - left.chainage_m) / span : 0;
+    return left.elevation_m + (right.elevation_m - left.elevation_m) * ratio;
+  }
+  return path[path.length - 1].elevation_m;
+}
+
+/**
+ * 꺾은선을 계획고 편집으로 바꾼다 — 범위 안 변화점 · 클릭 점을 그 선 위로 옮기고 옛 라운드를
+ * 지운 뒤, 꺾이는 클릭 점에만 종단곡선을 넣는다. 양 끝 점은 손대지 않는다(직선화와 같음).
+ */
+export function buildFreeEdits(
+  base: AlignmentBase,
+  edits: AlignmentEdits,
+  vertices: FreeVertex[],
+): AlignmentEdits {
+  const path = [...vertices].sort((a, b) => a.chainage_m - b.chainage_m);
+  if (path.length < 2) return edits;
+  const fromM = path[0].chainage_m;
+  const toM = path[path.length - 1].chainage_m;
+  if (toM - fromM <= SAME_M) return edits;
+  const inner = new Map<string, number>();
+  buildAlignment(base, edits).pvi.forEach((node) => {
+    if (node.chainage_m > fromM + SAME_M && node.chainage_m < toM - SAME_M) {
+      inner.set(chainageKey(node.chainage_m), node.chainage_m);
+    }
+  });
+  path
+    .slice(1, -1)
+    .forEach((vertex) => inner.set(chainageKey(vertex.chainage_m), vertex.chainage_m));
+  const offsets = { ...edits.station_offsets };
+  const radii = { ...edits.curve_radii };
+  inner.forEach((chainage, key) => {
+    const target = elevationOnPath(path, chainage);
+    offsets[key] = Number((target - baseElevationAt(base, chainage)).toFixed(6));
+    delete radii[key];
+  });
+  for (let index = 1; index < path.length - 1; index += 1) {
+    const gradeIn = gradePct(path[index - 1], path[index]) / 100;
+    const gradeOut = gradePct(path[index], path[index + 1]) / 100;
+    const deltaGrade = Math.abs(gradeOut - gradeIn);
+    if (deltaGrade < 1e-9) continue;
+    radii[chainageKey(path[index].chainage_m)] = Number(
+      (defaultCurveLength(base, deltaGrade) / deltaGrade).toFixed(6),
+    );
+  }
+  return { ...edits, station_offsets: offsets, curve_radii: radii };
+}
+
+export interface FreeSegment {
+  from: FreeVertex;
+  to: FreeVertex;
+  grade_pct: number;
+  over: boolean;
+  /** 마지막 점 → 마우스 자리(아직 안 찍음). */
+  preview: boolean;
+}
+
+/** 오버레이 표시 자료 — 화면은 이것만 그린다. */
+export interface FreeMarks {
+  /** 고른 범위(강조 띠) — 둘 다 고르기 전엔 null. */
+  band: [number, number] | null;
+  /** 세로 강조선 chainage(범위 첫 측점 또는 범위 양 끝). */
+  edges: number[];
+  segments: FreeSegment[];
+  /** 찍힌 점(시작 점 포함). */
+  dots: FreeVertex[];
+}
+
+export interface FreeDrawDeps {
+  base: () => AlignmentBase | null;
+  alignment: () => ProfileAlignment | null;
+  edits: () => AlignmentEdits;
+  /** 편집 적용 — 직선화 결과와 같은 길(캐시 · 되돌리기 · 막기 규칙). */
+  apply: (next: AlignmentEdits) => void;
+  /** 모드를 끈다(적용 뒤 · Esc). */
+  close: () => void;
+  /** 단계 · 안내가 바뀜. */
+  changed: () => void;
+}
+
+export interface FreeDraw {
+  phase: () => FreePhase;
+  reset: () => void;
+  /** 그래프 클릭 — 날 chainage · 표고와 그래프 측점선 목록. 먹었으면 true. */
+  click: (chainageM: number, elevationM: number, stations: number[]) => boolean;
+  /** 마우스 자리 — 미리 보기 대상. 그래프 밖이면 null. */
+  hover: (pointer: { chainageM: number; elevationM: number; stations: number[] } | null) => void;
+  /** Enter · Escape · Backspace — 먹었으면 true. */
+  key: (key: string) => boolean;
+  marks: () => FreeMarks;
+  hint: () => string;
+}
+
+export function createFreeDraw(deps: FreeDrawDeps): FreeDraw {
+  let phase: FreePhase = "range";
+  let pending: number | null = null;
+  let range: [number, number] | null = null;
+  let anchor: number | null = null;
+  let points: FreeVertex[] = [];
+  let target: FreeVertex | null = null;
+
+  function reset(): void {
+    phase = "range";
+    pending = null;
+    range = null;
+    anchor = null;
+    points = [];
+    target = null;
+  }
+
+  /** 그 측점의 지금 계획고(변화점이면 라운드 중심 z — 직선화와 같은 값). */
+  function heightAt(chainageM: number): number | null {
+    const alignment = deps.alignment();
+    return alignment ? controlElevationAt(alignment, chainageM) : null;
+  }
+
+  const finishM = (): number | null =>
+    range && anchor !== null ? (anchor === range[0] ? range[1] : range[0]) : null;
+  const same = (a: number | null, b: number | null): boolean =>
+    a !== null && b !== null && Math.abs(a - b) < SAME_M;
+
+  /** 지나온 점(시작 포함) — 마지막 것이 다음 선의 출발점. */
+  function path(): FreeVertex[] {
+    if (anchor === null) return [];
+    const z = heightAt(anchor);
+    return z === null ? [] : [{ chainage_m: anchor, elevation_m: z }, ...points];
+  }
+
+  /** 클릭 · 마우스 자리 → 다음 점 후보. 끝 세로선이면 그 계획고, 뒤로 가면 null. */
+  function candidate(chainageM: number, elevationM: number, stations: number[]): FreeVertex | null {
+    if (phase !== "drawing" || !range) return null;
+    const station = snapStation(stations, chainageM, range);
+    const end = finishM();
+    if (station === null || end === null) return null;
+    if (same(station, end)) {
+      const z = heightAt(end);
+      return z === null ? null : { chainage_m: end, elevation_m: z };
+    }
+    const walked = path();
+    const last = walked[walked.length - 1];
+    if (!last || (station - last.chainage_m) * Math.sign(end - last.chainage_m) <= SAME_M) {
+      return null;
+    }
+    const z = Math.round(elevationM / ELEVATION_STEP_M) * ELEVATION_STEP_M;
+    return { chainage_m: station, elevation_m: Number(z.toFixed(3)) };
+  }
+
+  function finish(): void {
+    const base = deps.base();
+    const end = finishM();
+    const z = end === null ? null : heightAt(end);
+    if (!base || end === null || z === null) return;
+    const vertices = [...path(), { chainage_m: end, elevation_m: z }];
+    const next = buildFreeEdits(base, deps.edits(), vertices);
+    reset();
+    deps.apply(next);
+    deps.close();
+  }
+
+  return {
+    phase: () => phase,
+    reset,
+    click(chainageM, elevationM, stations) {
+      if (phase === "range") {
+        const station = snapStation(stations, chainageM);
+        if (station === null) return true;
+        if (pending === null || same(pending, station)) pending = station;
+        else {
+          range = [Math.min(pending, station), Math.max(pending, station)];
+          pending = null;
+          phase = "armed";
+        }
+      } else if (phase === "armed" && range) {
+        const station = snapStation(stations, chainageM, range);
+        if (same(station, range[0]) || same(station, range[1])) {
+          anchor = station;
+          points = [];
+          phase = "drawing";
+        }
+      } else if (phase === "drawing") {
+        const next = candidate(chainageM, elevationM, stations);
+        if (!next) return true;
+        if (same(next.chainage_m, finishM())) {
+          finish();
+          return true;
+        }
+        points.push(next);
+      }
+      target = null;
+      deps.changed();
+      return true;
+    },
+    hover(pointer) {
+      target = pointer ? candidate(pointer.chainageM, pointer.elevationM, pointer.stations) : null;
+    },
+    key(key) {
+      if (key === "Escape") {
+        reset();
+        deps.close();
+        return true;
+      }
+      if (key === "Enter") {
+        if (phase !== "drawing") return false;
+        finish();
+        return true;
+      }
+      if (key === "Backspace") {
+        if (phase !== "drawing") return false;
+        if (points.length) points.pop();
+        else {
+          anchor = null;
+          phase = "armed";
+        }
+        target = null;
+        deps.changed();
+        return true;
+      }
+      return false;
+    },
+    marks() {
+      const maxPct = deps.base()?.policy.max_grade_pct ?? Number.POSITIVE_INFINITY;
+      const dots = path();
+      const line = target ? [...dots, target] : dots;
+      const segments: FreeSegment[] = [];
+      for (let index = 1; index < line.length; index += 1) {
+        const grade = gradePct(line[index - 1], line[index]);
+        segments.push({
+          from: line[index - 1],
+          to: line[index],
+          grade_pct: grade,
+          over: overGrade(grade, maxPct),
+          preview: target !== null && index === line.length - 1,
+        });
+      }
+      return {
+        band: range,
+        edges: range ? [...range] : pending !== null ? [pending] : [],
+        segments,
+        dots,
+      };
+    },
+    hint() {
+      if (phase === "range") {
+        return pending === null
+          ? "자유지정 — 범위 첫 세로 측점선을 고르세요"
+          : `${pending.toFixed(1)}m 선택 — 범위 끝 세로 측점선을 고르세요`;
+      }
+      if (phase === "armed") return "시작(또는 끝) 세로선 근처를 눌러 시작하세요 (Esc 취소)";
+      return "클릭마다 점 · 반대쪽 세로선 또는 Enter 로 끝 (Backspace 점 빼기 · Esc 취소)";
+    },
+  };
+}

A00_Common/design/design_profile_free_view.ts

@@ -0,0 +1,217 @@
+/* =============================================================================
+ * A00_Common/design/design_profile_free_view.ts
+ * 종단 [자유지정] 화면 — 그래프 클릭 · 마우스 · 오버레이(범위 강조 · 점선 · 기울기 글)(215-1).
+ *
+ * 계산 · 상태는 `design_profile_free.ts` 몫. 여기서는 마우스 자리를 (chainage, 표고)로 바꿔
+ * 넘기고 돌려받은 표시 자료를 그린다. 표고 변환은 종단 그래프 세로 창(`data-yw-*` + 지금 걸린
+ * 변환)을 그대로 되짚는다 — 스크롤로 창이 바뀌어도 같은 식이다.
+ *
+ * 그래프는 그릴 때마다 새로 만들어지므로 그릴 때마다 `mount` 를 다시 부른다.
+ * 자유지정 중엔 그래프 클릭 · 누르기를 여기서 먹는다(측점 고르기 · 구조물 끌기로 새지 않게).
+ * ========================================================================== */
+
+import { Y_WINDOW_ATTRS, Y_WINDOW_CLASS } from "../../B06_Section/B06_Section_UI_Longitudinal";
+import {
+  chartYAtElevation,
+  elevationAtChartY,
+  parseWindowTransform,
+  type ChartWindow,
+  type FreeDraw,
+} from "./design_profile_free";
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+/** 종단 그래프 한 벌의 가로 매핑 — 렌더러가 그릴 때마다 넘긴다. */
+export interface FreeChartGeom {
+  /** 그래프 래퍼(`b05-profile__chart`). */
+  chart: HTMLElement;
+  /** 가로 스크롤러 — 스크롤하면 세로 창이 바뀌어 다시 그린다. */
+  scroller: HTMLElement;
+  x: (chainageM: number) => number;
+  toChainage: (px: number) => number;
+  widthPx: number;
+  heightPx: number;
+  /** 그래프 세로 측점선 chainage(정규 + 구조물). */
+  stations: number[];
+}
+
+export interface FreeView {
+  /** 그래프를 새로 그렸거나 모드가 바뀜 — 켜져 있으면 붙이고, 꺼져 있으면 뗀다. */
+  mount: (geom: FreeChartGeom | null, active: boolean) => void;
+  redraw: () => void;
+}
+
+function svgEl(tag: string, attrs: Record<string, string | number>): SVGElement {
+  const element = document.createElementNS(SVG_NS, tag);
+  Object.entries(attrs).forEach(([name, value]) => element.setAttribute(name, String(value)));
+  return element;
+}
+
+/** 지금 그래프의 세로 창 — 자동 창 SVG 가 없으면 null. */
+function readWindow(chart: HTMLElement): { view: ChartWindow; top: number } | null {
+  const svg = chart.querySelector<SVGSVGElement>(`svg[${Y_WINDOW_ATTRS.auto}="1"]`);
+  if (!svg) return null;
+  const read = (name: string): number => Number(svg.getAttribute(name));
+  const layer = svg.querySelector(`.${Y_WINDOW_CLASS}`);
+  const view: ChartWindow = {
+    center: read(Y_WINDOW_ATTRS.center),
+    pxPerM: read(Y_WINDOW_ATTRS.pxPerM),
+    zero: read(Y_WINDOW_ATTRS.zero),
+    ...parseWindowTransform(layer?.getAttribute("transform") ?? null),
+  };
+  if (![view.center, view.pxPerM, view.zero].every(Number.isFinite) || view.pxPerM <= 0) {
+    return null;
+  }
+  // 그래프 SVG 가 래퍼 위쪽에서 떨어져 있으면 그만큼 오버레이 y 를 맞춘다.
+  const top = svg.getBoundingClientRect().top - chart.getBoundingClientRect().top;
+  return { view, top };
+}
+
+export function createFreeView(free: FreeDraw): FreeView {
+  let geom: FreeChartGeom | null = null;
+  let active = false;
+  let overlay: SVGSVGElement | null = null;
+  let listeners: AbortController | null = null;
+
+  /** 마우스 자리 → (chainage, 표고). 그래프 밖이면 null. */
+  function pointerAt(event: MouseEvent) {
+    if (!geom) return null;
+    const win = readWindow(geom.chart);
+    if (!win) return null;
+    const rect = geom.chart.getBoundingClientRect();
+    const chainageM = geom.toChainage(event.clientX - rect.left);
+    if (!Number.isFinite(chainageM)) return null;
+    const elevationM = elevationAtChartY(win.view, event.clientY - rect.top - win.top);
+    return { chainageM, elevationM, stations: geom.stations };
+  }
+
+  function redraw(): void {
+    overlay?.remove();
+    overlay = null;
+    if (!geom || !active) return;
+    const win = readWindow(geom.chart);
+    if (!win) return;
+    const { x, widthPx, heightPx } = geom;
+    const y = (elevationM: number): number => chartYAtElevation(win.view, elevationM) + win.top;
+    const marks = free.marks();
+    const svg = svgEl("svg", {
+      class: "b05-profile-freemark",
+      width: widthPx,
+      height: heightPx,
+      viewBox: `0 0 ${widthPx} ${heightPx}`,
+    }) as SVGSVGElement;
+    if (marks.band) {
+      const [left, right] = marks.band.map(x);
+      svg.append(
+        svgEl("rect", {
+          class: "b05-profile-freemark__band",
+          x: left,
+          y: 0,
+          width: Math.max(0, right - left),
+          height: heightPx,
+        }),
+      );
+    }
+    marks.edges.forEach((chainage) =>
+      svg.append(
+        svgEl("line", {
+          class: "b05-profile-freemark__edge",
+          x1: x(chainage),
+          x2: x(chainage),
+          y1: 0,
+          y2: heightPx,
+        }),
+      ),
+    );
+    marks.segments.forEach((segment) => {
+      const x1 = x(segment.from.chainage_m);
+      const x2 = x(segment.to.chainage_m);
+      const y1 = y(segment.from.elevation_m);
+      const y2 = y(segment.to.elevation_m);
+      const over = segment.over ? " is-over" : "";
+      svg.append(
+        svgEl("line", {
+          class: `b05-profile-freemark__line${over}${segment.preview ? " is-preview" : ""}`,
+          x1,
+          y1,
+          x2,
+          y2,
+        }),
+      );
+      const label = svgEl("text", {
+        class: `b05-profile-freemark__grade${over}`,
+        x: (x1 + x2) / 2,
+        y: (y1 + y2) / 2 - 6,
+        "text-anchor": "middle",
+      });
+      label.textContent = `${segment.grade_pct.toFixed(1)}%`;
+      svg.append(label);
+    });
+    marks.dots.forEach((dot) =>
+      svg.append(
+        svgEl("circle", {
+          class: "b05-profile-freemark__dot",
+          cx: x(dot.chainage_m),
+          cy: y(dot.elevation_m),
+          r: 3.5,
+        }),
+      ),
+    );
+    overlay = svg;
+    geom.chart.append(svg);
+  }
+
+  function mount(next: FreeChartGeom | null, on: boolean): void {
+    listeners?.abort();
+    listeners = null;
+    if (next) geom = next;
+    active = on;
+    if (!on) free.reset();
+    if (!geom || !on || !geom.chart.isConnected) {
+      overlay?.remove();
+      overlay = null;
+      return;
+    }
+    listeners = new AbortController();
+    const { signal } = listeners;
+    const chart = geom.chart;
+    const swallow = (event: Event): void => {
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+    };
+    // 누르기는 삼킴 — 구조물 측점선 끌기 · 계획고 버튼 길게 누르기가 시작되지 않게.
+    chart.addEventListener("pointerdown", swallow, { capture: true, signal });
+    chart.addEventListener(
+      "click",
+      (event) => {
+        swallow(event);
+        event.preventDefault();
+        const pointer = pointerAt(event);
+        if (pointer) free.click(pointer.chainageM, pointer.elevationM, pointer.stations);
+        free.hover(pointerAt(event));
+        redraw();
+      },
+      { capture: true, signal },
+    );
+    chart.addEventListener(
+      "mousemove",
+      (event) => {
+        free.hover(pointerAt(event));
+        redraw();
+      },
+      { signal },
+    );
+    chart.addEventListener(
+      "mouseleave",
+      () => {
+        free.hover(null);
+        redraw();
+      },
+      { signal },
+    );
+    geom.scroller.addEventListener("scroll", redraw, { signal, passive: true });
+    redraw();
+  }
+
+  return { mount, redraw };
+}

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

@@ -13,27 +13,25 @@ import type { DesignProfile } from "./design_profile";
 /** 메인 창 문서 · 창에 걸린 듣기가 받아야 할 새 창 이벤트. */
 const FORWARD_TYPES = ["keydown", "keyup", "pointerdown", "pointerup", "pointercancel"];
 
-/** 종단 도구줄 [배수유역도] 단추 뒤에 [새 창] 단추를 붙인다 — 두 보기가 같은 한 벌을 쓴다. */
+/** 종단 도구줄 [초기화] 왼쪽 단추(`toolLead`)를 [창 분할] 단추로 꾸민다 — 두 보기가 같은 한 벌을 쓴다. */
 export function attachProfilePopout(
   profile: DesignProfile,
   slot: HTMLElement,
-  sideTool: HTMLElement | null,
+  button: HTMLButtonElement,
 ): void {
   const { root } = profile;
   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.title = "종단 하단 패널을 별도 창으로 분할 · 다시 누르면 결합";
   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 = "새 창";
+    button.textContent = "창 분할";
     slot.append(root);
     popup = null;
     requestAnimationFrame(profile.redraw);
@@ -71,7 +69,7 @@ export function attachProfilePopout(
     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 = "제자리로";
+    button.textContent = "창 결합";
     doc.body.replaceChildren(root);
 
     // 새 창 키 · 포인터를 메인 문서로 — 대상은 새 창 요소 그대로(입력칸 판정 · 메뉴 안 판정).

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

@@ -57,6 +57,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,11 +72,26 @@ function reportOnly(label: string): (error: unknown) => void {
   };
 }
 
+/** 서버가 버린 계획고 편집 자리(측점 · 관 · 구조물이 없는 자리 · 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",
+  );
+}
+
 /** 계획고 초안(가게 하나)을 종단 정본에 쓴다. 없으면 아무 일도 하지 않는다. */
 async function flushAlignmentDraft(projectId: string, routeId: number): Promise<void> {
   const draft = pendingAlignment(routeId);
   if (!draft) return;
-  await saveProfileAlignment(projectId, routeId, draft);
+  noticeDroppedEdits(await saveProfileAlignment(projectId, routeId, draft));
   markAlignmentSaved(routeId);
 }
 
@@ -115,6 +137,7 @@ export async function saveDesign(
   const routeId = ctx.routeId();
   if (routeId === null) return false;
   showLoadingOverlay();
+  saving.add(ctx.projectId);
   try {
     await ctx.prepare?.();
     for (const step of DESIGN_SAVE_ORDER) {
@@ -135,12 +158,14 @@ export async function saveDesign(
       await (label ? run().catch(reportOnly(label)) : run());
     }
     clearState("structure-type-cache", ctx.projectId); // 종류별 캐시는 저장 뒤 비움(54-32)
+    saving.delete(ctx.projectId); // 다 나감 — 뒤처리는 새 상세로 그림
     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,7 +21,7 @@ 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";
@@ -150,12 +150,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 +178,7 @@ export function sharedProfile(shared: DesignPageShared): DesignProfile {
     },
   });
   shared.profileSlot.append(profile.root);
-  attachProfilePopout(profile, shared.profileSlot, sideTool);
+  attachProfilePopout(profile, shared.profileSlot, popoutButton);
   shared.profile = profile;
   return profile;
 }

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 "./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_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/design_structure_form.ts

@@ -22,6 +22,8 @@ import {
   linkOf,
   readState,
   solveSplit,
+  specContainerHidden,
+  specItemHidden,
   TEXT_MAX,
   writeOptions,
   type SpecContainer,
@@ -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_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/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/design_structure_pipe_calc.ts

@@ -12,6 +12,7 @@
 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 { pipeLengthText } from "../../B06_Section/B06_Section_UI_Cross_Culvert_Const"; // 「8 m (7.6)」(225-1)
 import { PIPE_MATCH_M } from "./design_selection";
 
 /** 횡단 측점 목록을 대는 곳 — 횡단 보기가 자료를 받으면 걸어 둠(종단만 연 동안은 없음). */

A00_Common/design/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/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,15 @@ 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 { 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 {
   applyPipeOptionsToCache,
-  replayDraftPipeOptions,
   type PipeOptionsContext,
 } from "../../B06_Section/B06_Section_UI_Page_Pipe_Options";
 import {
@@ -131,8 +132,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 +140,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 +190,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 +219,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 +233,7 @@ export async function mountCrossView(
         );
       }
       renderSectionDetail();
+      void reconcileStaleDesigns(); // 구조물 제원 ↔ 저장분 값 다른 측점 다시 셈(측구 · 포장 · 노면 하강 · 314)
     } catch (error) {
       const detail = error instanceof Error ? ` ${error.message}` : "";
       showToast(`구조물을 횡단에 반영하지 못했습니다.${detail}`, "error");
@@ -301,6 +302,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 +334,7 @@ export async function mountCrossView(
     shared,
   );
   // 좌측 목록이 넘겨 준 구조물을 종단 알약 레인으로 보낸다(표시 통일).
-  structureMarksSink = (structures, types) => sectionView.setStructureMarks(structures, types);
+  structureMarksSink = sectionView.setStructureMarks;
   // 계획선 편집(▲/▼)은 종단도 한 벌이 맡는다(계획서 24-2c) — 같은 초안 가게 · 같은 막기 규칙.
 
   // 종단 그래프 우클릭 — 종단 보기와 같은 메뉴로 넣고 뺀다(2026-09-12 사용자). 어느 길로
@@ -341,15 +343,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 +389,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 +475,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 +490,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" });
   }
@@ -543,6 +537,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 +563,13 @@ 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(() => {
     window.clearTimeout(pipeReloadTimer);
     window.clearTimeout(wallAdjustTimer);
@@ -669,8 +669,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

@@ -31,14 +31,9 @@ import {
   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 +41,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 {
@@ -62,7 +56,11 @@ import {
   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";
+import {
+  migrateLegacyStations,
+  onStaleStructureTypes,
+  structureAnchorM,
+} from "../../B05_Profile/B05_Profile_Api_Structures";
 import { pipeToFacilityItem } from "../../B05_Profile/B05_Profile_UI_Structures_Panel_Types";
 import {
   loadCorridorIfFresh,
@@ -82,6 +80,7 @@ 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 { pipeIdAt } from "./design_pipe_ids";
 import {
   DEFAULT_ROAD_WIDTHS,
   fetchRoadWidths,
@@ -127,6 +126,7 @@ export async function mountProfileView(
     bridge.setPipes(pipes);
     panel.structures.setPipeFacilities(pipes.map(pipeToFacilityItem));
     profilePanel.setMinCoverPipes(pipes);
+    snapOld();
     restorePick(); // 관 목록이 실린 뒤라야 폼이 그 시설을 찾는다.
   };
   /** 측점선 강조 — 측점선이 없는 관 시설(물넘이포장 · 비정규 측점 아님)은 알약을 id 로 켬(53-2) ·
@@ -135,10 +135,8 @@ export async function mountProfileView(
     const structurePick = !!readSelection(activeProjectId)?.structureId;
     const sections = structurePick ? [] : (currentSectionDetail?.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);
   };
@@ -173,13 +171,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);
@@ -220,7 +220,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) => {
@@ -244,9 +244,24 @@ export async function mountProfileView(
     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 || 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);
@@ -318,45 +333,31 @@ 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). */
@@ -402,6 +403,17 @@ export async function mountProfileView(
     },
     isRestoring: () => restoring,
   });
+  // 종단도 · 3D 강조 = 고름 한 칸에서 파생 · 이 보기가 보일 때만(횡단 보기는 제 규칙 · 233-1 · 233-2)
+  const profilePick = bindProfilePick(
+    activeProjectId,
+    { profile: profilePanel, viewer, form: panel.structures },
+    host,
+    {
+      irregular: () => bridge.irregularStations(),
+      pipes: () => lastPipes ?? [],
+      sections: () => currentSectionDetail?.cross_sections ?? [],
+    },
+  );
   // 3D 노선 우클릭 → 구조물 배치 메뉴(그래프·배수유역도와 동일, 2026-08-19).
   bridge.mountViewerMenu(viewer, () => latest?.route_points ?? []);
 
@@ -538,6 +550,9 @@ export async function mountProfileView(
     onReset: () => uphillOverrides.clear(),
   });
 
+  // 탭이 다시 보일 때 정의 판이 바뀌었으면 종류 · 패널 다시 읽음(322-0)
+  const reloadIfShown = (): void => void (host.visible() && !restoring && bridge.load());
+  host.onDispose(onStaleStructureTypes(reloadIfShown));
   // 한 페이지 두 보기 — 숨김 · 보임 · 떠남(계획서 24-3a · 24-3b).
   bindProfileViewLife(host, {
     projectId: activeProjectId,
@@ -558,8 +573,7 @@ export async function mountProfileView(
         );
         return;
       }
-      viewer.markers.selectStation(null);
-      profilePanel.setSelectedStation(null);
+      profilePick.paint();
     },
     // 보기를 떠나는 자리 = 코리도 영구저장 시점(2026-08-23 사용자 확정) — 이동은 막지 않는다.
     onHide: () => {
@@ -655,6 +669,7 @@ export async function mountProfileView(
   } finally {
     progress.remove();
     restoring = false;
+    snapOld();
     restorePick(); // 관·구조물 목록 중 늦게 오는 쪽이 있어 여기서 한 번 더.
   }
 

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

@@ -0,0 +1,49 @@
+/* =============================================================================
+ * key_shortcut.ts — Ctrl(⌘)+글자 단축키 판정 공용(PLAN 214-2)
+ * 한글 자판은 `key` 가 「ㅋ」·「ㅛ」로 와 글자로는 안 맞음 — 영문 글자·숫자면 그 글자 ·
+ * 아니면 자판 자리(`code`: KeyZ · Digit1)로 판정. Shift 의 대문자도 소문자로 맞춤.
+ * 쓰는 곳 — 페이지(B05 · M02 · 시트 키) + CAD(`B07_DesignDetail/openwebcad` 의 `input-shortcut.ts` 가 다시 내보냄).
+ * 시험 = `resources/tester/cad/ctrl-shortcut-hangul.test.ts`
+ * ========================================================================== */
+
+type KeyLike = Pick<KeyboardEvent, "code"> & Partial<Pick<KeyboardEvent, "key">>;
+
+/** 누른 글자·숫자(소문자) — 글자·숫자 자리가 아니면 빈 글 */
+export function keyLetter(evt: KeyLike): string {
+  const key = evt.key ?? "";
+  if (/^[a-zA-Z0-9]$/.test(key)) return key.toLowerCase();
+  const m = /^(?:Key([A-Z])|Digit([0-9]))$/.exec(evt.code ?? "");
+  return m ? (m[1] ?? m[2]).toLowerCase() : "";
+}
+
+/** Ctrl(Mac ⌘)과 함께 누른 `letter`(소문자 글자·숫자)인가 — Shift · Alt 는 보지 않음 */
+export function isCtrlKey(
+  evt: KeyLike & Pick<KeyboardEvent, "ctrlKey" | "metaKey">,
+  letter: string,
+): boolean {
+  return (evt.ctrlKey || evt.metaKey) && keyLetter(evt) === letter;
+}
+
+/** Ctrl 단축키 이름 */
+export type CtrlShortcut = "undo" | "redo" | "save" | "selectAll";
+
+/** 공용 Ctrl 단축키 — Z · Shift+Z · Y · S · A (Alt 함께는 아님 · Shift 는 Z 만) */
+export function ctrlShortcut(
+  evt: KeyLike &
+    Pick<KeyboardEvent, "ctrlKey" | "altKey" | "shiftKey"> &
+    Partial<Pick<KeyboardEvent, "metaKey">>,
+): CtrlShortcut | null {
+  if (!(evt.ctrlKey || evt.metaKey) || evt.altKey) return null;
+  switch (keyLetter(evt)) {
+    case "z":
+      return evt.shiftKey ? "redo" : "undo";
+    case "y":
+      return evt.shiftKey ? null : "redo";
+    case "s":
+      return evt.shiftKey ? null : "save";
+    case "a":
+      return evt.shiftKey ? null : "selectAll";
+    default:
+      return null;
+  }
+}

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";
@@ -161,6 +162,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;

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

@@ -553,7 +553,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_keys.ts

@@ -10,6 +10,7 @@
  * 복사 · 붙여넣기(Ctrl+C/X/V)는 막지 않음 — E 클립보드가 copy · paste 사건으로 받음.
  * ========================================================================== */
 
+import { keyLetter } from "../key_shortcut";
 import { cycleAbs } from "./spreadsheet_editor";
 import { fillCells } from "./spreadsheet_fill";
 import {
@@ -127,7 +128,7 @@ export function attachKeys(ctx: SpreadsheetContext, ed: Editor, hooks: KeyHooks
       go(move(sheet, sel, arrow[0], arrow[1], { extend: e.shiftKey, jump: ctrl }));
       return true;
     }
-    const k = e.key.length === 1 ? e.key.toLowerCase() : e.key;
+    const k = keyLetter(e) || (e.key.length === 1 ? e.key.toLowerCase() : e.key);
     if (ctrl && !e.altKey) {
       switch (k) {
         case "z":
@@ -233,7 +234,8 @@ export function attachKeys(ctx: SpreadsheetContext, ed: Editor, hooks: KeyHooks
   }
 
   function onKey(e: KeyboardEvent): void {
-    if (e.isComposing || e.keyCode === 229) return; // 한글 조합 중 — 브라우저 몫
+    // 한글 조합 중 — 브라우저 몫 (Ctrl+글자 단축키는 조합 중에도 판정 · 한글 자판 대응 214-2)
+    if ((e.isComposing || e.keyCode === 229) && !((e.ctrlKey || e.metaKey) && keyLetter(e))) return;
     const inBar = e.target === ed.formula;
     const done = ed.editing() ? editingKey(e, inBar) : !inBar && navKey(e);
     if (done) {

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_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,232 @@
+/* =============================================================================
+ * 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 확대)는 건너뜀 — 자체 손가락 처리 · 입력 칸 길게 누름도 브라우저 몫
+ * 마우스 · 펜 이벤트는 건드리지 않음.
+ * ========================================================================== */
+
+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 지도)의 확대 판정 — 손가락 벌림은 거꾸로라 뒤집음 */
+export const wheelZoomsIn = (e: WheelEvent): boolean =>
+  isPinchWheel(e) ? e.deltaY < 0 : e.deltaY > 0;
+
+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_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_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");
 

B04_PreProcess/B04_PreProcess_Api_Fetch.ts

@@ -471,17 +471,10 @@ 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;
   lonlat: [number, number];
@@ -585,7 +578,7 @@ export async function fetchDetailPipePoints(projectId: string): Promise<DetailBa
 
 /** 편집 중인 관 목록으로 세부유역을 다시 나눈다(저장하지 않는다).
  *
- *  `points`를 비우면 저장분을 무시하고 기본 관 + 자동 보충으로 되돌린다. */
+ *  빈 목록 = 관 0개(312) · 기본 관 + 자동 보충으로 되돌리기는 `resetDetailPipePoints`(DELETE)만. */
 export async function computeDetailBasins(
   projectId: string,
   points: DetailPipeInput[],

B04_PreProcess/B04_PreProcess_Router_Basins.py

@@ -62,16 +62,16 @@ def _build(
 ) -> tuple[DrainageDetail | None, list[PipePoint]]:
     """세부유역을 계산하고, 그 결과에 쓰인 관 목록을 함께 돌려준다.
 
-    `points`가 없으면 B04 기본 관에 최대 간격 규칙으로 자동 보충한 목록이 만들어진다.
+    `points`가 None 이면 B04 기본 관에 최대 간격 규칙으로 자동 보충한 목록이 만들어진다.
     있으면 그 자리를 그대로 쓰되, 관이 왜 거기 있는지(기본/자동/수동)는 넘겨받은 목록의
     표시를 유지한다 — 계산기는 확정 좌표만 보므로 그대로 두면 전부 "수동"이 된다.
     """
     directory = drainage_dir(stored_path)
-    chainages = [point.chainage_m for point in points] if points else None
+    chainages = [point.chainage_m for point in points] if points is not None else None
     detail = build_detail(directory, context.vertices, chainages)
     if detail is None:
         return None, []
-    if points:
+    if points is not None:
         _retag(detail.pipes, points)
     rebuilt = [PipePoint(chainage_m=pipe.chainage_m, source=pipe.reason) for pipe in detail.pipes]
     # 원본에 없던 자리 = 이번에 새로 놓인 관(자동 배치 · 간격 보충) — 등록부 기본값을 받을 관
@@ -357,26 +357,30 @@ def _basin_features(
 async def _resolve(
     project_id: UUID, payload: dict[str, Any] | None, *, use_stored: bool
 ) -> tuple[DrainageContext, DrainageDetail, list[PipePoint], bool] | JSONResponse:
-    """요청 본문 → 저장분 → 자동 생성 순으로 관 목록을 정하고 세부유역까지 계산한다."""
+    """요청 본문 → 저장분 → 자동 생성 순으로 관 목록을 정하고 세부유역까지 계산한다.
+
+    빈 목록(`[]`)은 「관 0개」로 그대로 쓴다 — 자동 생성은 요청에 칸이 없고 저장분도 없을(None) 때만(312).
+    """
     context, reason = await load_drainage_context(project_id)
     if context is None:
         return JSONResponse(status_code=404, content={"status": "error", "message": reason})
 
     try:
-        requested = parse_pipe_points((payload or {}).get("points"))
+        raw = (payload or {}).get("points")
+        requested = None if raw is None else parse_pipe_points(raw)
     except ValueError as error:  # 집계 항목(summary_item) 모양이 틀림
         return JSONResponse(status_code=400, content={"status": "error", "message": str(error)})
     signature = route_signature(context.vertices)
     stored = (
         load_pipe_points(context.stored_path, signature, context.vertices) if use_stored else None
     )
-    points = requested or stored or None
+    points = requested if requested is not None else stored
 
     result = await asyncio.to_thread(_build, context.stored_path, context, points)
     detail, resolved = result
     if detail is None:
         return JSONResponse(status_code=404, content={"status": "error", "message": _NO_ANALYSIS})
-    return context, detail, resolved, bool(stored) and not requested
+    return context, detail, resolved, requested is None and stored is not None
 
 
 @router.get("/{project_id}/drainage/pipe-points", response_model=None)
@@ -395,8 +399,8 @@ async def post_detail_basins(
 ) -> dict[str, Any] | JSONResponse:
     """화면에서 편집 중인 관 목록으로 세부유역을 다시 나눈다(저장하지 않는다).
 
-    `points`를 비우고 부르면 저장분을 무시하고 기본 관 + 자동 보충으로 되돌린다 —
-    노선이 바뀌어 전체 분석을 다시 돌린 직후의 경로다.
+    `points` 칸 없이 부르면 저장분을 무시하고 기본 관 + 자동 보충으로 되돌린다 —
+    노선이 바뀌어 전체 분석을 다시 돌린 직후의 경로다. 빈 목록은 관 0개(312).
     """
     resolved = await _resolve(project_id, payload, use_stored=False)
     if isinstance(resolved, JSONResponse):

B04_PreProcess/B04_PreProcess_UI_Basins.ts

@@ -40,6 +40,7 @@ import {
   resampleRoute,
   type RoutePoint,
 } from "./B04_PreProcess_UI_RouteSamples";
+import { PIPE_MATCH_M } from "../A00_Common/design/design_selection";
 
 function L(key: keyof typeof ui_locales): string {
   return ui_locales[key][currentLanguageIndex];
@@ -296,7 +297,7 @@ export function createDetailBasinOverlay(onChange: () => void): DetailBasinOverl
   function selectBasinOfPipe(pipeIndex: number): void {
     const pipe = pipes[pipeIndex];
     if (!pipe) return;
-    const basin = basins.find((item) => Math.abs(item.chainage_m - pipe.chainage) < 0.51);
+    const basin = basins.find((item) => Math.abs(item.chainage_m - pipe.chainage) < PIPE_MATCH_M);
     selectedBasin = basin && basin.index !== selectedBasin ? basin.index : null;
     say(summary());
   }

B04_PreProcess/B04_PreProcess_UI_Camera.ts

@@ -225,10 +225,7 @@ export function bindCursorPivotControls(options: CursorPivotOptions): () => void
     if (options.blocked?.() || !controls.enabled) return;
     if (event.button === 1 && panPointerId === null) {
       // 그랩 팬 시작 — 커서 아래 지형점을 잡고, 시선 수직 평면 위에서 따라오게 한다.
-      pickPivot(event);
-      panAnchor.copy(pivot);
-      getCamera().getWorldDirection(viewDirection);
-      panPlane.setFromNormalAndCoplanarPoint(viewDirection, panAnchor);
+      startGrabPan(event);
       panPointerId = event.pointerId;
       element.setPointerCapture?.(event.pointerId);
       return;
@@ -251,11 +248,15 @@ export function bindCursorPivotControls(options: CursorPivotOptions): () => void
   /** 휠 줌 — 커서가 가리키는 지점을 축으로 삼아 그 점이 화면에 고정된 채 멀어지고 가까워진다.
    *  휠을 위로 올리면 멀어진다(사용자 지시). */
   function onWheel(event: WheelEvent): void {
-    const camera = getCamera();
     if (!controls.enabled || options.blocked?.()) return;
     event.preventDefault();
-    pickPivot(event);
-    const factor = event.deltaY < 0 ? 1 / ZOOM_STEP : ZOOM_STEP;
+    zoomAround(event, event.deltaY < 0 ? 1 / ZOOM_STEP : ZOOM_STEP);
+  }
+
+  /** 그 자리를 축으로 멀어지고(factor > 1) 가까워짐 — 휠 · 두 손가락 벌림이 같이 씀 */
+  function zoomAround(at: { clientX: number; clientY: number }, factor: number): void {
+    const camera = getCamera();
+    pickPivot(at);
     const cameraOffset = camera.position.clone().sub(pivot).multiplyScalar(factor);
     const targetOffset = controls.target.clone().sub(pivot).multiplyScalar(factor);
     // 축에 너무 가까워지면 시점이 뒤집히므로 최소 거리를 남긴다.
@@ -276,19 +277,7 @@ export function bindCursorPivotControls(options: CursorPivotOptions): () => void
   function onPointerMove(event: PointerEvent): void {
     const camera = getCamera();
     if (panPointerId === event.pointerId) {
-      // 그랩 팬 — 잡은 점이 커서 아래에 계속 오도록 카메라·target을 평행 이동한다.
-      const rect = element.getBoundingClientRect();
-      if (rect.width <= 0 || rect.height <= 0) return;
-      pointer.set(
-        ((event.clientX - rect.left) / rect.width) * 2 - 1,
-        -((event.clientY - rect.top) / rect.height) * 2 + 1,
-      );
-      raycaster.setFromCamera(pointer, camera);
-      if (!raycaster.ray.intersectPlane(panPlane, panPoint)) return;
-      const delta = panAnchor.clone().sub(panPoint);
-      camera.position.add(delta);
-      controls.target.add(delta);
-      controls.update();
+      grabPanTo(event);
       return;
     }
     if (pointerId !== event.pointerId) return;
@@ -351,6 +340,67 @@ export function bindCursorPivotControls(options: CursorPivotOptions): () => void
     syncPivotMarker();
   }
 
+  /** 그랩 팬 — 잡은 점이 커서(손가락 가운데) 아래에 계속 오도록 카메라·target을 평행 이동한다. */
+  function grabPanTo(at: { clientX: number; clientY: number }): void {
+    const camera = getCamera();
+    const rect = element.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) return;
+    pointer.set(
+      ((at.clientX - rect.left) / rect.width) * 2 - 1,
+      -((at.clientY - rect.top) / rect.height) * 2 + 1,
+    );
+    raycaster.setFromCamera(pointer, camera);
+    if (!raycaster.ray.intersectPlane(panPlane, panPoint)) return;
+    const delta = panAnchor.clone().sub(panPoint);
+    camera.position.add(delta);
+    controls.target.add(delta);
+    controls.update();
+  }
+
+  function startGrabPan(at: { clientX: number; clientY: number }): void {
+    pickPivot(at);
+    panAnchor.copy(pivot);
+    getCamera().getWorldDirection(viewDirection);
+    panPlane.setFromNormalAndCoplanarPoint(viewDirection, panAnchor);
+  }
+
+  // 손가락(기기대응 3-1) — 하나 = 회전(왼쪽 단추와 같음) · 둘 = 벌려 확대 · 같이 끌어 이동.
+  // 3D 는 자체 처리 — 손가락 번역(`touch_bridge`)은 이 요소를 건너뜀.
+  element.dataset.touchOwn = "3d";
+  element.style.touchAction = "none";
+  const touches = new Map<number, { clientX: number; clientY: number }>();
+  let pinchDist = 0;
+  const touchMid = (): { clientX: number; clientY: number; dist: number } => {
+    const [a, b] = [...touches.values()];
+    return {
+      clientX: (a.clientX + b.clientX) / 2,
+      clientY: (a.clientY + b.clientY) / 2,
+      dist: Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY),
+    };
+  };
+  function onTouchDown(event: PointerEvent): void {
+    if (event.pointerType !== "touch" || options.blocked?.() || !controls.enabled) return;
+    touches.set(event.pointerId, { clientX: event.clientX, clientY: event.clientY });
+    if (touches.size !== 2) return;
+    stop(); // 한 손가락 회전을 멈추고 두 손가락으로
+    const m = touchMid();
+    pinchDist = m.dist;
+    startGrabPan(m);
+  }
+  function onTouchMove(event: PointerEvent): void {
+    if (event.pointerType !== "touch" || !touches.has(event.pointerId)) return;
+    touches.set(event.pointerId, { clientX: event.clientX, clientY: event.clientY });
+    if (touches.size !== 2) return;
+    const m = touchMid();
+    grabPanTo(m);
+    if (pinchDist > 0 && m.dist > 0) zoomAround(m, pinchDist / m.dist);
+    pinchDist = m.dist;
+    startGrabPan(m); // 확대 뒤 다시 잡음 — 다음 이동이 새 배율 기준
+  }
+  function onTouchUp(event: PointerEvent): void {
+    touches.delete(event.pointerId);
+  }
+
   function stop(): void {
     if (pointerId !== null && element.hasPointerCapture?.(pointerId)) {
       element.releasePointerCapture(pointerId);
@@ -381,6 +431,10 @@ export function bindCursorPivotControls(options: CursorPivotOptions): () => void
   element.addEventListener("pointercancel", onPointerEnd);
   element.addEventListener("pointerleave", onPointerLeave);
   element.addEventListener("wheel", onWheel, { passive: false });
+  element.addEventListener("pointerdown", onTouchDown);
+  element.addEventListener("pointermove", onTouchMove);
+  element.addEventListener("pointerup", onTouchUp);
+  element.addEventListener("pointercancel", onTouchUp);
 
   return () => {
     element.removeEventListener("pointerdown", onPointerDown);
@@ -389,6 +443,10 @@ export function bindCursorPivotControls(options: CursorPivotOptions): () => void
     element.removeEventListener("pointercancel", onPointerEnd);
     element.removeEventListener("pointerleave", onPointerLeave);
     element.removeEventListener("wheel", onWheel);
+    element.removeEventListener("pointerdown", onTouchDown);
+    element.removeEventListener("pointermove", onTouchMove);
+    element.removeEventListener("pointerup", onTouchUp);
+    element.removeEventListener("pointercancel", onTouchUp);
     if (pivotMarker) {
       pivotMarker.removeFromParent();
       pivotMarker.material.map?.dispose();

B04_PreProcess/B04_PreProcess_UI_MapViewer.ts

@@ -1,4 +1,5 @@
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
+import { wheelZoomsIn } from "../A00_Common/touch_bridge";
 import { createProgressCircle } from "@ui/ui_template_progress";
 import { fetchCachedSheetLayer } from "../A00_Common/b_asset_cache";
 import {
@@ -546,7 +547,7 @@ export function createSurfaceMapViewer(): SurfaceMapViewer {
         wheelWidth,
         8,
       );
-      scale = Math.min(maxScale, Math.max(0.5, scale * (event.deltaY > 0 ? 1.15 : 0.87)));
+      scale = Math.min(maxScale, Math.max(0.5, scale * (wheelZoomsIn(event) ? 1.15 : 0.87)));
       // 마우스 커서 아래 지점이 줌 전후로 같은 화면 위치에 머물도록 offset 보정.
       // screen = center + (base - center)·scale + offset 이므로,
       // 커서 고정 조건을 풀면 offset' = (cursor - center)·(1 - r) + offset·r (r = scale'/scale).

B04_PreProcess/B04_PreProcess_UI_Style.css

@@ -119,7 +119,7 @@
   flex-direction: column;
   width: 100%;
   max-width: none;
-  min-height: calc(100vh - var(--spacing-64));
+  min-height: calc(100dvh - var(--app-header-h));
 }
 
 .b04-surface__workspace > .b04-surface__status {

B05_Profile/B05_Profile_Api_Fetch.ts

@@ -219,6 +219,8 @@ export interface ProfileAlignmentSaveResponse {
   route_id: number;
   profile_alignment: unknown;
   grade_summary: RouteGradeSummary | null;
+  /** 측점 · 관 · 구조물 자리가 없어 서버가 버린 계획고 편집 자리(m · 213-2). */
+  dropped_edit_chainages?: number[];
 }
 
 /**

B05_Profile/B05_Profile_Api_Structures.ts

@@ -11,9 +11,11 @@
  * 하려는 것이라, 목록은 반드시 서버에서 받아 온다.
  * ========================================================================== */
 
-import { readState, writeState } from "../A00_Common/b_page_state";
 import { noteSnapshotFailed } from "../B04_PreProcess/B04_PreProcess_Api_Fetch";
 import type { GroupItems, SummaryItem } from "../common_util/common_util_summary_item";
+import { useCatalogDefinition } from "../common_util/common_util_structure_catalog";
+import { pipeIdAt } from "../A00_Common/design/design_pipe_ids";
+import { useDesignStore } from "../A00_Common/design/design_store";
 import { API_BASE_URL, API_TIMEOUT_MS } from "@config/config_frontend";
 import {
   type DefinedRule,
@@ -77,7 +79,6 @@ export interface StructureType {
   placement: StructurePlacement;
   options: StructureOptionField[];
   style: { color?: string; abbr?: string };
-  drawing_views: string[];
   /** 다른 정본이 관리하는 타입(배관 = pipe_points.json) — 구조물 목록에 넣지 않는다. */
   managed_by: string | null;
   /** 목록에는 두되 **제원·수량을 내는 주인이 다른 화면**인 타입 — 그 화면 이름.
@@ -140,6 +141,8 @@ export interface StructureListResponse {
   project_id: string;
   revision: number;
   structures: StructureInstance[];
+  /** 정본을 적을 때의 구조물 정의 판(322-2) — 없으면 옛 파일 · 아직 안 적음. */
+  definition_version?: number | null;
 }
 
 export interface StructureSaveResponse {
@@ -192,8 +195,66 @@ async function requestJson<T>(path: string, init: RequestInit = {}): Promise<T>
   }
 }
 
-/** 타입 레지스트리는 서버 배포 중에 바뀌지 않으므로 탭 수명 동안 한 번만 받는다. */
+/** 타입 레지스트리 캐시 — 정의 판(`typesVersion`)이 바뀌면(M02 저장) 버리고 다시 받음(322-0). */
 let typesCache: Promise<StructureType[]> | null = null;
+let typesVersion: number | null = null;
+
+/** 정의 판이 캐시 판과 다르면 종류 캐시를 버림 — 버렸으면 true(B05 · B06 보기를 열 때 · 탭이 다시 보일 때). */
+export async function dropStaleStructureTypes(): Promise<boolean> {
+  if (!typesCache || typesVersion === null) return false;
+  const now = await requestJson<{ 판: number }>("/m02/structure-definition/version", {
+    method: "GET",
+  })
+    .then((payload) => payload.판)
+    .catch(() => null);
+  if (now === null || now === typesVersion) return false;
+  typesCache = null;
+  typesVersion = null;
+  return true;
+}
+
+const noticed = new Set<string>();
+const staleSaved = new Set<string>(); // 정본이 옛 정의 판으로 적힌 프로젝트(323-9)
+
+/** 정본이 옛 정의 판으로 적혔나 — 그러면 고침이 없어도 [저장]이 정본을 다시 써 지금 판 도장(323-9). */
+export function definitionStale(projectId: string): boolean {
+  return staleSaved.has(projectId);
+}
+
+/** 프로젝트 정본이 옛 정의 판으로 적혔으면 알림 한 줄(322-2 · 탭 수명 동안 프로젝트 · 판마다 한 번). */
+export function staleDefinitionNotice(
+  projectId: string,
+  saved: number | null | undefined,
+): string | null {
+  if (saved === null || saved === undefined || typesVersion === null || saved === typesVersion) {
+    staleSaved.delete(projectId);
+    return null;
+  }
+  staleSaved.add(projectId);
+  const key = `${projectId}:${saved}:${typesVersion}`;
+  if (noticed.has(key)) return null;
+  noticed.add(key);
+  return `구조물 정의가 판 ${typesVersion} 으로 바뀜 — 저장하면 반영`;
+}
+
+const staleListeners = new Set<() => void>();
+
+function checkStaleOnShow(): void {
+  if (document.visibilityState !== "visible") return;
+  void dropStaleStructureTypes().then((stale) => {
+    if (stale) staleListeners.forEach((reload) => reload());
+  });
+}
+
+/** 탭이 다시 보일 때 정의 판이 바뀌었으면 `reload`(종류 · 패널 다시 읽음) — 떼는 함수를 돌려줌. */
+export function onStaleStructureTypes(reload: () => void): () => void {
+  if (!staleListeners.size) document.addEventListener("visibilitychange", checkStaleOnShow);
+  staleListeners.add(reload);
+  return () => {
+    staleListeners.delete(reload);
+    if (!staleListeners.size) document.removeEventListener("visibilitychange", checkStaleOnShow);
+  };
+}
 
 /**
  * 구조물 타입 목록.
@@ -212,7 +273,12 @@ export function fetchStructureTypes(includeDisabled = false): Promise<StructureT
     typesCache = requestJson<StructureTypesResponse>("/projects/structure-types", {
       method: "GET",
     })
-      .then(async (payload) => withDefinition(payload.types, await definition))
+      .then(async (payload) => {
+        const defined = await definition;
+        typesVersion = defined?.판 ?? null;
+        useCatalogDefinition({ types: payload.types, ...defined }); // 구조물 표(322-1 · 반영 · 부품)
+        return withDefinition(payload.types, defined);
+      })
       .catch((error) => {
         typesCache = null; // 실패한 약속을 남겨 두면 다시 시도할 수 없다.
         throw error;
@@ -239,6 +305,7 @@ export async function saveStructures(
     { method: "PUT", body: JSON.stringify({ base_revision: baseRevision, structures }) },
   );
   noteSnapshotFailed(saved.snapshot_failed);
+  staleSaved.delete(projectId); // 서버가 지금 판으로 적음
   return saved;
 }
 
@@ -267,7 +334,7 @@ export function pipesToStructureMarks(
   }>,
 ): StructureInstance[] {
   return pipes.map((pipe) => ({
-    structure_id: `pipe-${pipe.chainage_m.toFixed(2)}`,
+    structure_id: pipeIdAt(pipe.chainage_m), // 관 세션 id(323-5)
     type_id: pipe.facility,
     placement: "point",
     chainage_m: pipe.chainage_m,
@@ -304,21 +371,22 @@ export function defaultOptions(type: StructureType): Record<string, string | num
 
 /** 미저장 조작분(② 설계 초안). 없으면 null(= 만진 적 없음, 빈 목록과 구분된다). */
 export function readPendingStructures(projectId: string): StructureInstance[] | null {
-  return readState<StructureInstance[]>("structures", projectId);
+  return useDesignStore(projectId, null).get("structures");
 }
 
+/** 설계 가게로 씀 — 관 초안과 같은 바뀜 신호(구독 · 323-6). 칸은 그대로(`structures`). */
 export function writePendingStructures(projectId: string, next: StructureInstance[] | null): void {
-  writeState("structures", next, projectId);
+  useDesignStore(projectId, null).set("structures", next);
 }
 
 /**
  * 미저장분을 정본에 쓴다. B05 화면 밖(B06 [저장]·[확정])에서 부르는 경로라 판번호는
- * 서버에서 다시 받아 쓴다. 미저장분이 없으면 아무것도 하지 않는다.
+ * 서버에서 다시 받아 쓴다. 미저장분이 없으면 아무것도 하지 않는다 — 정본이 옛 정의 판이면 그대로 다시 씀(323-9).
  */
 export async function flushPendingStructures(projectId: string): Promise<void> {
   const pending = readPendingStructures(projectId);
-  if (!pending) return;
+  if (!pending && !definitionStale(projectId)) return;
   const stored = await fetchStructures(projectId);
-  await saveStructures(projectId, stored.revision, pending);
+  await saveStructures(projectId, stored.revision, pending ?? stored.structures); // 고침 없음 = 판 도장만
   writePendingStructures(projectId, null);
 }

B05_Profile/B05_Profile_Engine_Grade_Alignment.py

@@ -214,6 +214,30 @@ def snap_to_stations(
     )
 
 
+def drop_unplaced_edits(
+    edits: dict[str, dict[str, float]], places: np.ndarray
+) -> tuple[dict[str, dict[str, float]], list[float]]:
+    """측점 · 관 · 구조물 자리(`places`) 0.006m 안에 없는 편집 키를 버린다(213-2).
+
+    옮긴 관의 옛 자리 · 지운 시설 자리에 남은 키는 측점선 없는 꼭짓점(유령)이 된다 — 세션 초안이
+    옛 키를 다시 보내도 [저장]에서 걸러진다. (남은 편집, 버린 자리 누가거리).
+    """
+    kept: dict[str, dict[str, float]] = {}
+    dropped: set[float] = set()
+    for name, values in edits.items():
+        kept[name] = {}
+        for key, value in values.items():
+            try:
+                chainage = float(key)
+            except (TypeError, ValueError):
+                continue
+            if places.size and float(np.min(np.abs(places - chainage))) < SAME_STATION_SNAP_M:
+                kept[name][key] = value
+            else:
+                dropped.add(round(chainage, _KEY_DECIMALS))
+    return kept, sorted(dropped)
+
+
 def resolve_pvi(
     base_s: np.ndarray,
     base_z: np.ndarray,

B05_Profile/B05_Profile_Engine_Sections.py

@@ -25,13 +25,9 @@ from B05_Profile.B05_Profile_Engine_Sections_Core import (
 )
 from B05_Profile.B05_Profile_Structures_Repository import load_structures
 from B05_Profile.B05_Profile_Structures_Schema import (
-    is_station_planting_type,
     structure_type_map,
 )
 from common_util.common_util_drainage_pipes import (
-    PIPE_FACILITY_FORD_PAVEMENT,
-    PIPE_FACILITY_PIPE,
-    PIPE_FACILITY_REVET,
     PipePoint,
     load_pipe_points_file,
     parse_pipe_points,
@@ -44,14 +40,14 @@ from common_util.common_util_route_geometry import (
     planned_route_initial_path,
     planned_route_working_path,
 )
+from common_util.common_util_structure_catalog import card_title, catalog
+from common_util.common_util_structure_station import plan_stations
 from common_util.common_util_surface_sampler import build_surface_sampler
 from config.config_system import (
     DRAINAGE_CACHE_DIRNAME,
     DRAINAGE_EDITS_DIRNAME,
     DRAINAGE_PIPE_POINTS_FILENAME,
     FOREST_ROAD_PROFILE_CRITERIA,
-    PIPE_DEFAULT_DIAMETER_MM,
-    PIPE_DEFAULT_TYPE,
 )
 
 logger = logging.getLogger(__name__)
@@ -208,16 +204,10 @@ def _load_pipe_points(project_root: Path, polyline: list[list[float]]) -> list[P
 
 
 def pipe_station_label(pipe: PipePoint, types: dict[str, Any]) -> str | None:
-    """관 지점 측점 라벨 — 배관 = 「관종 D관경」 · 그 밖 = 종류 이름 · 물넘이포장 = 없음."""
-    if pipe.facility == PIPE_FACILITY_FORD_PAVEMENT:
+    """관 지점 측점 라벨 = 표 카드 이름(322-1 · 배관 = 「관종 D관경」 · 빈칸 = 정의 기본값)."""
+    if pipe.facility not in types:
         return None
-    if pipe.facility == PIPE_FACILITY_PIPE:
-        values = pipe.options or {}
-        kind = str(values.get("pipe_kind") or PIPE_DEFAULT_TYPE)
-        diameter = int(float(values.get("pipe_diameter_mm") or PIPE_DEFAULT_DIAMETER_MM))
-        return f"{kind} D{diameter}"
-    definition = types.get(pipe.facility)
-    return definition.name if definition is not None else None
+    return card_title(pipe.facility, pipe.options)
 
 
 def relabel_pipe_stations(project_root: Path, cross_sections: list[dict[str, Any]]) -> None:
@@ -239,7 +229,7 @@ def relabel_pipe_stations(project_root: Path, cross_sections: list[dict[str, Any
     except (OSError, ValueError, AttributeError):
         return
     types = structure_type_map()
-    pipe_names = {definition.name for definition in types.values() if definition.managed_by}
+    pipe_names = {row["name"] for row in catalog().values() if row["owner"] == "pipe_points"}
     for section in cross_sections:
         label = section.get("structure")
         if not isinstance(label, str) or not (
@@ -267,51 +257,22 @@ def resolve_extra_stations(
     (2026-08-28 사용자 보고). 정본 파일은 초기화에도 살아남으므로 여기서 매번 다시 만든다
     — B05·B06은 같은 응답 하나를 보는 한 페이지라 공급자도 하나여야 한다.
 
-    물넘이포장은 비정규 측점으로 올리지 않는다 — 종단 그래프 하단 구조물 표시로만 다룬다
-    (2026-08-28 사용자 확정).
+    물넘이포장도 기준 측점 하나를 심는다 — 그 측점 횡단도에 파인 노면을 그린다(286-1).
 
-    라벨 형식은 프론트 structureLabel()과 같아야 한다 — 재진입 이관이 라벨 문자열로 종류를
-    되짚기 때문이다(B05_Profile_Structures_Migration).
+    측점 · 이름 = 측점 계획 한 벌(322-3 · `plan_stations` · TS `planStations` 짝) — 표 횡단도
+    (anchor = 기준 한 곳 · span3 = 시작 · 기준 · 끝) · 카드 이름 · 같은 m(0.005) 는 하나(이름 = 관이
+    먼저 · 아니면 앞선 것). 관 지점 정본 종류는 structures.json 에 없어 겹치지 않는다.
+    거울 시험 = `resources/tester/test_322_3_plan_mirror.py` · `test_272_1_station_list.py`.
     """
-    types = structure_type_map()
-    derived: list[tuple[float, str]] = []
-    for pipe in pipes:
-        label = pipe_station_label(pipe, types)
-        if label is None:
-            continue
-        # 독립 기슭막이는 구간(시작~종료)이라 **시작·기준·종료** 세 측점을 심는다 —
-        # 길수록 횡단도가 여러 장 나온다(구 D군 구간형과 같은 규칙). 나머지 관 시설은
-        # 기준 한 곳(관이 노선을 가로지르는 점형).
-        if pipe.facility == PIPE_FACILITY_REVET:
-            marks = (pipe.start_m, pipe.chainage_m, pipe.end_m)
-        else:
-            marks = (pipe.chainage_m,)
-        for mark in marks:
-            if mark is not None:
-                derived.append((float(mark), label))
-    # 구조물 정본에서 측점이 필요한 것들. 관 정본이 관리하는 타입(managed_by)은
-    # structures.json에 저장되지 않아 중복되지 않는다.
-    #   · 점형(A군 노출형 횡단수로·개거): 기준 측점 한 곳.
-    #   · 구간형(D군 기슭막이): **시작·기준·종료** — 길이가 길수록 횡단도가 여러 장
-    #     나와야 한다(2026-08-28 사용자). 격자와 같은 정수 미터면 generate_sections가
-    #     격자로 스냅해 파일이 겹치지 않는다.
     try:
-        for structure in load_structures(str(project_root))[1]:
-            definition = types.get(structure.type_id)
-            if definition is None or definition.managed_by:
-                continue
-            if not is_station_planting_type(definition):
-                continue
-            if definition.placement == "interval":
-                marks = (structure.start_m, structure.chainage_m, structure.end_m)
-            else:
-                marks = (structure.anchor_m(),)
-            for mark in marks:
-                if mark is not None:
-                    derived.append((float(mark), definition.name))
+        structures = load_structures(str(project_root))[1]
     except Exception:
         logger.exception("B05: 구조물 정본을 읽지 못했습니다 (관 유래 측점만 씁니다)")
-    return tuple(sorted(derived))
+        structures = []
+    return tuple(
+        (float(station["chainage_m"]), str(station["title"]))
+        for station in plan_stations(pipes, structures)
+    )
 
 
 def _append_design_profiles(
@@ -549,7 +510,7 @@ def run_section_generation(
     }
 
 
-def generate_irregular_sections(
+def sample_structure_sections(
     project_root: Path,
     route_data_path: str,
     filter_key: str,
@@ -559,16 +520,15 @@ def generate_irregular_sections(
     extra_stations: tuple[tuple[float, str], ...],
     options: SectionGenerationOptions | None = None,
     crs: str | None = None,
-) -> list[dict[str, Any]]:
-    """비정규 측점만 샘플링해 **횡단 파일을 쓰고** 측점 dict 목록을 돌려준다.
+) -> tuple[list[dict[str, Any]], list[dict[str, Any]]]:
+    """구조물 측점만 샘플링해 (측점 dict, 횡단 dict) 목록을 돌려준다 — 파일은 안 씀.
 
-    기존 종단 계획선·규칙 측점·횡단은 건드리지 않는다. 격자 측점과 똑같은 접선·오프셋
-    샘플링을 거치되(`generate_sections` 재사용) kind="irregular"인 것만 골라내 각각
-    `cross_*.json`으로 저장한다. B06 상세 조회가 이 폴더를 glob하고 종단 파일의 stations로
-    필터링하므로, 이 파일들 + 종단 stations 병합만으로 다음 페이지에 횡단이 나타난다(DB 불필요).
+    격자 측점과 똑같은 접선·오프셋 샘플링을 거치되(`generate_sections` 재사용) 구조물 측점
+    (`irregular` · 격자 · 시종점에 얹힌 것 `grid` 포함)만 골라낸다. [저장] 때 정본 쓰기
+    (`generate_irregular_sections`)와 B06 미리 뜨기(`preview_structure_sections`)가 같은 길(273-2).
     """
     if not extra_stations:
-        return []
+        return [], []
     base = options or SectionGenerationOptions()
     merged_options = SectionGenerationOptions(
         station_interval_m=base.station_interval_m,
@@ -589,18 +549,48 @@ def generate_irregular_sections(
         # 비정규(구조물) 측점도 같은 곡선표를 봐야 규칙 측점과 확폭이 어긋나지 않는다.
         design_curves=_load_design_curves(project_root),
     )
-    irregular_stations = [
-        station
-        for station in result["longitudinal"]["stations"]
-        if station.get("kind") == "irregular"
-    ]
+
+    def structural(entry: dict[str, Any]) -> bool:
+        return entry.get("kind") == "irregular" or bool(entry.get("structure"))
+
+    return (
+        [station for station in result["longitudinal"]["stations"] if structural(station)],
+        [cross for cross in result["cross_sections"] if structural(cross)],
+    )
+
+
+def generate_irregular_sections(
+    project_root: Path,
+    route_data_path: str,
+    filter_key: str,
+    method: str,
+    smooth: bool,
+    *,
+    extra_stations: tuple[tuple[float, str], ...],
+    options: SectionGenerationOptions | None = None,
+    crs: str | None = None,
+) -> list[dict[str, Any]]:
+    """구조물 측점만 샘플링해 **횡단 파일을 쓰고** 측점 dict 목록을 돌려준다(빈 목록 = 없음).
+
+    기존 종단 계획선·규칙 측점·횡단은 건드리지 않는다 — 받는 쪽이 목록 전체로 다시 맞춤(272).
+    각각 `cross_*.json`으로 저장한다. B06 상세 조회가 이 폴더를 glob하고 종단 파일의 stations로
+    필터링하므로, 이 파일들 + 종단 stations 병합만으로 다음 페이지에 횡단이 나타난다(DB 불필요).
+    """
+    irregular_stations, crosses = sample_structure_sections(
+        project_root,
+        route_data_path,
+        filter_key,
+        method,
+        smooth,
+        extra_stations=extra_stations,
+        options=options,
+        crs=crs,
+    )
     if not irregular_stations:
         return []
     cross_dir = project_root / _STAGE_SUBDIR / "cross_sections"
     cross_dir.mkdir(parents=True, exist_ok=True)
-    for cross_section in result["cross_sections"]:
-        if cross_section.get("kind") != "irregular":
-            continue
+    for cross_section in crosses:
         cross_file = cross_dir / cross_filename(float(cross_section["chainage_m"]))
         atomic_write_json(cross_file, cross_section)
     return irregular_stations

B05_Profile/B05_Profile_Engine_Sections_Core.py

@@ -415,8 +415,10 @@ def generate_sections(
             kind = "bp"
         elif abs(float(value) - total) <= 1e-6:
             kind = "ep"
-        elif rounded in extras and rounded not in regular_rounded:
-            # 격자와 겹치지 않는 비정규 측점만 irregular. 규칙 격자와 겹치면 규칙 측점 우선.
+        elif rounded in extras:
+            # 구조물 측점이 위(272 · 요구 167) — 격자와 같은 m 여도 구조물 측점(irregular) 하나 ·
+            # 격자 자리는 `grid` 로 남겨 구조물이 떠나면 일반 측점으로 되돌림
+            # (`B05_Profile_Router_Confirm._merge_irregular_into_longitudinal`).
             kind = "irregular"
         else:
             kind = "regular"
@@ -466,9 +468,10 @@ def generate_sections(
             "uphill_side": uphill_side,
             "frame": frame,
         }
-        # 구조물은 kind와 무관하게 부착한다(규칙 격자와 겹쳐 regular가 돼도 구조물 정보는 유지).
         if rounded in extras:
             station["structure"] = extras[rounded]
+            if rounded in regular_rounded:
+                station["grid"] = True  # 숨은 일반 측점 자리(272)
         stations.append(station)
 
         samples = []

B05_Profile/B05_Profile_Repository.py

@@ -241,6 +241,45 @@ async def update_longitudinal_grade_summary(
         )
 
 
+async def sync_cross_section_rows(
+    connection: aiomysql.Connection, route_id: int, chainages: list[float]
+) -> int:
+    """종단 정본 측점에 횡단 행을 맞춘다 — 정본에 없는 측점의 행(옮긴 · 지운 구조물 측점의 옛 자리).
+
+    0.5 m 안에 행 없는 새 측점이 있으면 그리로 옮긴다(옛 소수 → 정수 m · 사용자 설계 값 그대로 ·
+    면적은 저장 뒤 서버 재계산) · 나머지는 지운다 — 남기면 수량(B08 토적)이 옛 자리 측점을 그대로
+    셈(272). 같은 측점 = 0.01 m 안(`_rowless_station_chainages` 와 같은 폭). 측점 목록이 비면
+    아무것도 안 건드린다. 옮기거나 지운 행 수.
+    """
+    if not chainages:
+        return 0
+    async with connection.cursor() as cursor:
+        await cursor.execute(
+            "SELECT id, chainage_m FROM cross_sections WHERE route_id = %s", (route_id,)
+        )
+        rows = [(int(row[0]), float(row[1])) for row in await cursor.fetchall()]
+        orphans = [
+            (row_id, at) for row_id, at in rows if all(abs(at - c) >= 0.01 for c in chainages)
+        ]
+        free = [c for c in chainages if all(abs(c - at) >= 0.01 for _, at in rows)]
+        pairs = sorted(
+            (abs(c - at), row_id, c) for row_id, at in orphans for c in free if abs(c - at) <= 0.5
+        )
+        moved: dict[int, float] = {}
+        for _gap, row_id, chainage in pairs:
+            if row_id not in moved and chainage not in moved.values():
+                moved[row_id] = chainage
+        for row_id, chainage in moved.items():
+            await cursor.execute(
+                "UPDATE cross_sections SET chainage_m = %s WHERE id = %s", (chainage, row_id)
+            )
+        dropped = [row_id for row_id, _ in orphans if row_id not in moved]
+        if dropped:
+            marks = ", ".join(["%s"] * len(dropped))
+            await cursor.execute(f"DELETE FROM cross_sections WHERE id IN ({marks})", dropped)
+    return len(orphans)
+
+
 async def get_surface_crs_epsg(
     connection: aiomysql.Connection, project_id: UUID, surface_model_id: int
 ) -> int | None:

B05_Profile/B05_Profile_Router.py

@@ -8,6 +8,7 @@ from typing import Any
 from uuid import UUID
 
 import aiomysql
+import numpy as np
 from fastapi import APIRouter
 from fastapi.responses import JSONResponse
 
@@ -15,6 +16,7 @@ from B03_FileInput.B03_FileInput_Repository import get_project_storage_relative_
 from B05_Profile.B05_Profile_Debug import log_b05_debug
 from B05_Profile.B05_Profile_Engine import run_route_design
 from B05_Profile.B05_Profile_Engine_Grade import GradeDesignOptions, resolve_grade_options
+from B05_Profile.B05_Profile_Engine_Grade_Alignment import drop_unplaced_edits
 from B05_Profile.B05_Profile_Engine_Grade_Profile import rebuild_alignment_profile
 from B05_Profile.B05_Profile_Engine_Sections import run_section_generation
 from B05_Profile.B05_Profile_Engine_Sections_Core import SectionGenerationOptions
@@ -384,13 +386,30 @@ async def update_contour_interval(
         )
 
 
+def _structure_marks(project_root: Path, route_data_path: str) -> list[float]:
+    """관 · 구조물 자리(m) — 관 지점 전부 + 구조물 측점 자리(시작 · 기준 · 종료)."""
+    from B05_Profile.B05_Profile_Engine_Sections import (
+        _load_pipe_points,
+        _load_route_polyline,
+        resolve_extra_stations,
+    )
+
+    pipes = _load_pipe_points(project_root, _load_route_polyline(project_root, route_data_path))
+    extras = resolve_extra_stations(project_root, pipes)
+    return [float(pipe.chainage_m) for pipe in pipes] + [float(mark) for mark, _ in extras]
+
+
 def _apply_alignment_edits(
-    project_root: Path, longitudinal_file_path: str, edits: dict[str, Any]
-) -> tuple[dict[str, Any], dict[str, Any]]:
-    """저장된 종단 JSON에 계획선 편집을 반영해 정본을 다시 쓰고 (선형, 요약)을 반환한다.
+    project_root: Path,
+    longitudinal_file_path: str,
+    edits: dict[str, Any],
+    marks: list[float] | None = None,
+) -> tuple[dict[str, Any], dict[str, Any], list[float]]:
+    """저장된 종단 JSON에 계획선 편집을 반영해 정본을 다시 쓰고 (선형, 요약, 버린 자리)를 반환한다.
 
     화면이 즉시 계산해 보여준 값과 같은 기하식을 서버에서도 다시 적용해, 파일에
-    남는 정본이 항상 한 곳(백엔드)에서 만들어지게 한다.
+    남는 정본이 항상 한 곳(백엔드)에서 만들어지게 한다. `marks`(관 · 구조물 자리)를 주면
+    측점 · 관 · 구조물 어디에도 없는 편집 키를 버린다(213-2 — 저장 차례가 관 · 구조물 뒤라 최신).
     """
     root = project_root.resolve()
     path = (root / longitudinal_file_path).resolve()
@@ -399,6 +418,16 @@ def _apply_alignment_edits(
     if not path.is_file():
         raise FileNotFoundError("종단 데이터 파일을 찾을 수 없습니다.")
     longitudinal = json.loads(path.read_text(encoding="utf-8"))
+    dropped: list[float] = []
+    if marks is not None:
+        stations = [float(s.get("chainage_m", 0.0)) for s in longitudinal.get("stations") or []]
+        edits, dropped = drop_unplaced_edits(
+            {
+                "station_offsets": dict(edits.get("station_offsets") or {}),
+                "curve_radii": dict(edits.get("curve_radii") or {}),
+            },
+            np.array(stations + marks, dtype=np.float64),
+        )
     alignment, profile = rebuild_alignment_profile(longitudinal, edits)
     longitudinal["profile_alignment"] = alignment
     profiles = longitudinal.get("design_profiles")
@@ -407,7 +436,7 @@ def _apply_alignment_edits(
     else:
         longitudinal["design_profiles"] = [profile]
     atomic_write_json(path, longitudinal)
-    return alignment, {"id": profile["id"], **profile["summary"]}
+    return alignment, {"id": profile["id"], **profile["summary"]}, dropped
 
 
 @router.put("/{project_id}/route/profile-alignment", response_model=ProfileAlignmentSaveResponse)
@@ -426,11 +455,18 @@ async def save_profile_alignment(
                 )
             stored_path = await get_project_storage_relative_path(connection, project_id)
             project_root = Path(resolve_stored_project_path(stored_path))
-            alignment, grade_summary = await asyncio.to_thread(
+            route = await get_latest_route(connection, project_id)
+            marks = None
+            if route and route["id"] == request.route_id and route.get("route_data_path"):
+                marks = await asyncio.to_thread(
+                    _structure_marks, project_root, str(route["route_data_path"])
+                )
+            alignment, grade_summary, dropped = await asyncio.to_thread(
                 _apply_alignment_edits,
                 project_root,
                 str(longitudinal["longitudinal_file_path"]),
                 request.edits(),
+                marks,
             )
             await connection.begin()
             try:
@@ -446,6 +482,7 @@ async def save_profile_alignment(
             route_id=request.route_id,
             profile_alignment=alignment,
             grade_summary=grade_summary,
+            dropped_edit_chainages=dropped,
         )
     except FileNotFoundError as exc:
         return JSONResponse(status_code=404, content={"status": "error", "message": str(exc)})

B05_Profile/B05_Profile_Router_Confirm.py

@@ -6,6 +6,7 @@
 
 import asyncio
 import json
+import math
 from pathlib import Path
 from typing import Any
 from uuid import UUID
@@ -15,9 +16,19 @@ import aiomysql
 from B03_FileInput.B03_FileInput_Repository import get_project_storage_relative_path
 from B05_Profile.B05_Profile_Engine_Grade_Alignment import chainage_key
 from B05_Profile.B05_Profile_Engine_Grade_Profile import rebuild_alignment_profile
-from B05_Profile.B05_Profile_Engine_Sections import generate_irregular_sections
+from B05_Profile.B05_Profile_Engine_Sections import (
+    _load_pipe_points,
+    _load_route_polyline,
+    find_cross_file,
+    generate_irregular_sections,
+    resolve_extra_stations,
+)
 from B05_Profile.B05_Profile_Engine_Sections_Core import SectionGenerationOptions
-from B05_Profile.B05_Profile_Repository import get_surface_crs_epsg
+from B05_Profile.B05_Profile_Repository import (
+    get_surface_crs_epsg,
+    sync_cross_section_rows,
+    update_longitudinal_grade_summary,
+)
 from B05_Profile.B05_Profile_Schema import RouteConfirmRequest
 from B06_Section.B06_Section_Repository import (
     get_latest_section_options,
@@ -96,6 +107,7 @@ async def sync_uphill_overrides_into_designs(
         compute_cross_design,
         curve_widening_args,
         stored_shoulder_extend,
+        stored_tilt,
     )
     from B06_Section.B06_Section_Repository import get_cross_section_designs
     from B06_Section.B06_Section_Repository_Bulk import merge_cross_section_designs
@@ -158,12 +170,13 @@ async def sync_uphill_overrides_into_designs(
                 paved=bool(design.get("paved", False)),
                 standard=stored_standard,
                 rock_boundary_offset_m=design.get("rock_boundary_offset_m"),
-                two_stage_slope=bool(design.get("two_stage_slope", True)),
+                two_stage_slope=bool(design.get("two_stage_slope", False)),
                 ditch_enabled=design.get("ditch_enabled"),
                 ditch_choice=design.get("ditch_choice"),
                 surface_drop_m=ford_drop_at(float(chainage), ford_drops),
                 **curve_widening_args(cross_record),
                 **stored_shoulder_extend(design),  # 노견 확장(139-6)
+                **stored_tilt(design),  # 물넘이 · 맹암거 자리 측구 없음 · 기울기(286-2 · 287-4)
             )
             next_design["status"] = design.get("status", "provisional")
             next_design["pavement_suggested"] = design.get("pavement_suggested", pavement_suggested)
@@ -188,12 +201,16 @@ async def sync_uphill_overrides_into_designs(
 _SAME_STATION_M = 0.006
 
 
-def _follow_moved_stations(data: dict[str, Any], before: list[float]) -> dict[str, Any] | None:
+def _follow_moved_stations(
+    data: dict[str, Any], before: list[float], previous: list[float] | None = None
+) -> dict[str, Any] | None:
     """사라진 비정규 측점의 계획선 꼭짓점(base_pvi) · 편집을 새 측점으로 옮기거나 지운다.
 
     남기면 측점선 없는 변화점이 계획선을 꺾는다(192-1 — 관 769.28 → 769.38 뒤 두 자리에
-    편집이 남아 0.1m 사이 −465% 계단). 반올림 차이(0.006m 안)만 옮기고 나머지는 지운다.
-    바뀌었으면 새 등급 요약(DB 몫)을, 아니면 `None`.
+    편집이 남아 0.1m 사이 −465% 계단). 반올림 차이(0.006m 안) · 옛 소수 측점의 정수 m 맞춤
+    자리(272)만 옮기고 나머지는 지운다.
+    측점 목록이 계획선 측점 줄과 달라져도 다시 센다(272). 다시 셌으면 새 등급 요약(DB 몫)을,
+    아니면 `None`.
     """
     stored = data.get("profile_alignment")
     if not isinstance(stored, dict) or not stored.get("base_pvi"):
@@ -213,6 +230,11 @@ def _follow_moved_stations(data: dict[str, Any], before: list[float]) -> dict[st
             ),
             None,
         )
+        # 옛 소수 측점 → 정수 m 맞춤(272 · 요구 167) — 맞춘 자리가 새 측점이면 꼭짓점 · 편집도
+        # 그리로(지우면 계획선이 그 자리에서 바뀜 · 화면 `followMovedNodes` 와 짝)
+        snapped = chainage_key(math.floor(old + 0.5))
+        if near is None and snapped in after_keys and snapped not in before_keys:
+            near = float(snapped)
         moves[chainage_key(old)] = None if near is None else chainage_key(near)
 
     def moved(value: float) -> tuple[bool, str | None]:
@@ -249,7 +271,15 @@ def _follow_moved_stations(data: dict[str, Any], before: list[float]) -> dict[st
         changed = True
         if new_key is not None:
             base.append({**node, "chainage_m": float(new_key)})
-    if not changed:
+    # 측점 목록만 바뀌어도 다시 셈 — 계획선 측점 줄(표 · ▲▼)이 옛 측점을 들고 남지 않게(272) ·
+    # 줄이 없는 판은 맞추기 전 측점(`previous`)과 견줌
+    rows = stored.get("stations")
+    listed = (
+        [round(float(row.get("chainage_m", 0.0)), 6) for row in rows]
+        if isinstance(rows, list)
+        else previous
+    )
+    if not changed and listed in (None, [round(value, 6) for value in after]):
         return None
     stored["base_pvi"] = base
     alignment, profile = rebuild_alignment_profile(data, next_edits)
@@ -265,12 +295,17 @@ def _follow_moved_stations(data: dict[str, Any], before: list[float]) -> dict[st
 def _merge_irregular_into_longitudinal(
     project_root: Path, longitudinal_file_path: str, irregular_stations: list[dict[str, Any]]
 ) -> dict[str, Any] | None:
-    """종단 정본 파일의 stations에 비정규 측점을 병합한다(기존 비정규는 교체·정렬).
+    """종단 정본 stations 의 구조물 측점을 **지금 목록 전체로 다시 맞춘다**(272 · 요구 167).
 
-    B06 상세는 종단 파일의 stations를 읽고 그에 맞는 cross 파일만 노출하므로, 이 병합과
-    (엔진이 이미 쓴) cross 파일만으로 다음 페이지에 횡단이 나타난다. 규칙 측점·표고 샘플은
-    손대지 않는다. 계획선은 사라진 비정규 측점 자리만 고친다(`_follow_moved_stations` —
-    바뀌면 새 등급 요약을 돌려줌). 파일 기반이라 재확정해도 중복이 생기지 않는다.
+    `irregular_stations` = 지금 관 · 구조물로 새로 뜬 구조물 측점 전부(격자와 같은 m 인 것은
+    `grid` 표시 · `generate_irregular_sections`). 옛 구조물 측점은 다 빼고(빈 목록이어도),
+    구조물이 떠난 격자 자리(`grid`)는 일반 측점으로 되돌리고, 새 목록의 격자 자리 측점은 그
+    격자 측점을 갈음한다(같은 m 측점 하나 · 구조물이 위). 표고 샘플은 손대지 않는다.
+    B06 상세는 종단 파일의 stations 에 맞는 cross 파일만 노출하고 남은 파일을 지운다
+    (`prune_stale_cross_files`). 계획선은 사라진 구조물 측점 자리만 고친다(`_follow_moved_stations`
+    — 바뀌면 새 등급 요약을 돌려줌). 파일 기반이라 다시 맞춰도 중복이 생기지 않는다.
+    TS 짝 = `common_util_structure_station.ts` `oneStationList`(화면 측점 한 벌) · 거울 시험 =
+    `resources/tester/test_272_1_station_list.py`.
     """
     root = project_root.resolve()
     path = (root / longitudinal_file_path).resolve()
@@ -285,15 +320,53 @@ def _merge_irregular_into_longitudinal(
         for station in stations
         if station.get("kind") == "irregular"
     ]
-    regular = [station for station in stations if station.get("kind") != "irregular"]
-    merged = regular + list(irregular_stations)
-    merged.sort(key=lambda station: float(station.get("chainage_m", 0.0)))
-    data["stations"] = merged
-    summary = _follow_moved_stations(data, before)
+    fresh = {round(float(s.get("chainage_m", 0.0)), 6): s for s in irregular_stations}
+    kept: dict[float, dict[str, Any]] = {}
+    left: list[dict[str, Any]] = []
+    for station in stations:
+        if station.get("kind") == "irregular" and not station.get("grid"):
+            continue  # 옛 구조물 측점 — 새 목록이 갈음
+        key = round(float(station.get("chainage_m", 0.0)), 6)
+        if key not in fresh and ("structure" in station or station.get("grid")):
+            # 구조물이 떠난 격자 · 시종점 자리 — 일반 측점으로(옛 판 「regular + 글」 포함)
+            station = {k: v for k, v in station.items() if k not in ("grid", "structure")}
+            if station.get("kind") == "irregular":
+                station["kind"] = "regular"
+            left.append(station)
+        kept[key] = station
+    kept.update(fresh)
+    data["stations"] = sorted(kept.values(), key=lambda s: float(s.get("chainage_m", 0.0)))
+    previous = [round(float(station.get("chainage_m", 0.0)), 6) for station in stations]
+    summary = _follow_moved_stations(data, before, previous)
     atomic_write_json(path, data)
+    _relabel_cross_files(path.parent.parent / "cross_sections", left)
     return summary
 
 
+async def drop_rows_off_stations(
+    connection: aiomysql.Connection, route_id: int, project_root: Path, longitudinal_path: str
+) -> None:
+    """측점을 다시 맞춘 뒤 — 종단 정본에 없는 측점의 횡단 행을 새 측점으로 옮기거나 지운다(272)."""
+    path = (project_root.resolve() / longitudinal_path).resolve()
+    stations = json.loads(path.read_text(encoding="utf-8")).get("stations") or []
+    await sync_cross_section_rows(
+        connection, route_id, [float(station["chainage_m"]) for station in stations]
+    )
+
+
+def _relabel_cross_files(cross_dir: Path, stations: list[dict[str, Any]]) -> None:
+    """일반 측점으로 돌아온 자리의 횡단 파일 글(종류 · 구조물)도 맞춘다 — 카드 제목(272)."""
+    for station in stations:
+        cross_path = find_cross_file(cross_dir, float(station.get("chainage_m", 0.0)))
+        if not cross_path.is_file():
+            continue
+        cross = json.loads(cross_path.read_text(encoding="utf-8"))
+        cross.pop("structure", None)
+        cross.pop("grid", None)
+        cross["kind"] = station.get("kind")
+        atomic_write_json(cross_path, cross)
+
+
 #: 지표 샘플링 조건을 적어 두는 파일 — **나중에 측점을 더 만들 때 같은 조건으로** 뜨기 위해.
 #: ⚠ 조건이 다르면 그 측점만 다른 지표에서 뽑혀 옆 측점과 지반고가 어긋난다.
 SAMPLING_SNAPSHOT_NAME = "sampling.json"
@@ -350,24 +423,38 @@ async def _append_irregular_cross_sections(
     save_sampling_snapshot(project_root, request)
     stored_options = await get_latest_section_options(connection, project_id)
     crs_epsg = await get_surface_crs_epsg(connection, project_id, request.surface_model_id)
-    irregular_stations = await asyncio.to_thread(
-        generate_irregular_sections,
-        project_root,
-        str(route["route_data_path"]),
-        request.filter_key,
-        request.method,
-        request.smooth,
-        extra_stations=request.extra_stations(),
-        options=_section_options_from_stored(stored_options),
-        crs=f"EPSG:{crs_epsg}" if crs_epsg is not None else None,
-    )
-    if not irregular_stations:
-        return
+    route_data_path = str(route["route_data_path"])
+
+    def _generate() -> list[dict[str, Any]]:
+        # 측점 목록 = 서버 정본(관 · 구조물)에서 — 화면 목록(관 · A군)을 받아 적으면 서버가 심은
+        # 소단 · 옹벽 · 흙막이 · 독립 기슭막이 시작 · 종료 측점이 통째로 빠짐(238-1).
+        polyline = _load_route_polyline(project_root, route_data_path)
+        extras = resolve_extra_stations(project_root, _load_pipe_points(project_root, polyline))
+        return generate_irregular_sections(
+            project_root,
+            route_data_path,
+            request.filter_key,
+            request.method,
+            request.smooth,
+            extra_stations=extras,
+            options=_section_options_from_stored(stored_options),
+            crs=f"EPSG:{crs_epsg}" if crs_epsg is not None else None,
+        )
+
+    # 빈 목록이어도 맞춤 — 옛 구조물 측점 · 떠난 격자 자리 글을 지워야 함(272)
+    irregular_stations = await asyncio.to_thread(_generate)
     longitudinal = await get_longitudinal_section(connection, project_id, route["id"])
     if longitudinal:
-        await asyncio.to_thread(
+        summary = await asyncio.to_thread(
             _merge_irregular_into_longitudinal,
             project_root,
             str(longitudinal["longitudinal_file_path"]),
             irregular_stations,
         )
+        if summary is not None:  # 계획선을 다시 셈 — DB 등급 요약도 같이(B06 측점 만들기와 같은 길)
+            await update_longitudinal_grade_summary(
+                connection, route_id=route["id"], grade_summary=summary
+            )
+        await drop_rows_off_stations(
+            connection, route["id"], project_root, str(longitudinal["longitudinal_file_path"])
+        )

B05_Profile/B05_Profile_Router_RouteInitial.py

@@ -173,7 +173,9 @@ async def apply_profile_target(
         root = Path(resolve_stored_project_path(stored_path))
         relative = str(row["longitudinal_file_path"])
         count = await asyncio.to_thread(_set_base_pvi, root / relative, *target)
-        _alignment, summary = await asyncio.to_thread(_apply_alignment_edits, root, relative, {})
+        _alignment, summary, _dropped = await asyncio.to_thread(
+            _apply_alignment_edits, root, relative, {}
+        )
         async with pool.acquire() as connection:
             await connection.begin()
             await update_longitudinal_grade_summary(

B05_Profile/B05_Profile_Schema.py

@@ -225,6 +225,8 @@ class ProfileAlignmentSaveResponse(BaseModel):
     route_id: int
     profile_alignment: dict[str, Any]
     grade_summary: dict[str, Any] | None = None
+    #: 측점 · 관 · 구조물 자리가 없어 버린 계획고 편집 자리(m) — 화면이 알림으로 보임(213-2)
+    dropped_edit_chainages: list[float] = Field(default_factory=list)
 
 
 class RouteSolveResponse(BaseModel):
@@ -266,7 +268,8 @@ class RouteConfirmRequest(BaseModel):
     """경로 확정 요청.
 
     확정 시 비정규 측점의 **횡단을 함께 생성**하기 위해, 지표 샘플러 재구성에 필요한 값
-    (solve 때 쓰던 필터/방법/모델)을 함께 받는다. 비정규 측점이 없으면 재생성 없이 확정만 한다.
+    (solve 때 쓰던 필터/방법/모델)을 함께 받는다. 셋이 다 오면 구조물 측점을 서버 정본 목록
+    전체로 다시 맞춘다(빈 목록이어도 · 272).
     모든 필드가 선택이라 빈 본문(`{}`)이면 기존 확정 동작과 동일하다.
     """
 
@@ -284,12 +287,8 @@ class RouteConfirmRequest(BaseModel):
         return tuple((item.chainage_m, item.structure) for item in self.irregular_stations)
 
     def can_regenerate(self) -> bool:
-        return bool(
-            self.irregular_stations
-            and self.filter_key
-            and self.method
-            and self.surface_model_id is not None
-        )
+        # 화면 목록이 비어도 맞춤 — 측점 목록은 서버 정본에서 뜨고, 옛 구조물 측점을 지워야 함(272)
+        return bool(self.filter_key and self.method and self.surface_model_id is not None)
 
 
 class RouteConfirmResponse(BaseModel):

B05_Profile/B05_Profile_Structures_Migration.py

@@ -16,15 +16,16 @@
 """
 
 import re
+from collections.abc import Sequence
 from dataclasses import dataclass, field
 from typing import Any, Iterable
 
 from B05_Profile.B05_Profile_Structures_Schema import (
     StructureInstance,
-    station_planting_labels,
     structure_type_map,
 )
 from common_util.common_util_drainage_pipes import PIPE_SOURCE_USER, PipePoint
+from common_util.common_util_structure_station import SAME_STATION_M
 
 PIPE_STRUCTURE_NAME = "배관"
 # 구조물 정본이 아니라 관 지점 정본이 관리한다는 표식(레지스트리 `managed_by`).
@@ -54,28 +55,22 @@ _PIPE_LABEL = re.compile(r"^(배관|.*관)\s+D\d+", re.UNICODE)
 _ESCAPE_LABEL = re.compile(r"^대피로(?:\s+([\d.]+)\s*m)?", re.UNICODE)
 
 
-def _managed_elsewhere_labels() -> set[str]:
-    """서버가 종단 정본에 직접 심는 라벨 — 구조물로 재이관하면 안 된다(정본 이중화 →
-    "기타" 고스트). 규칙은 측점 생성과 **같은 자리**에서 온다(station_planting_labels).
+def _is_managed_elsewhere(entry: dict[str, Any], planted: Sequence[float]) -> bool:
+    """정본(관 지점 · 구조물)이 이미 관리하는 측점인가 — 재이관하면 정본 이중화 → 「기타」 유령.
 
-    관 지점 정본이 관리하는 타입 이름도 같이 막는다 — 그 측점은 이미 관 시설에서
-    투영된 것이라 되옮기면 이름을 못 알아보고 "기타"로 굳는다(기슭막이 2026-08-28 이관).
+    자리로 가름(323-7 · 지금 관 · 구조물이 심는 측점 계획 자리 `planted`) — 옛 이름 되짚기
+    (지난 판 이름 전부 · 322-0)는 걷음 · 이름을 바꿔도 자리는 그대로라 옛 이름 측점도 알아봄.
+    지금 판 종류 이름 · 관 라벨 꼴(관종 D관경)은 자리를 못 받은 부름(옛 확정분만)을 위해 그대로.
     """
-    owned = {
-        item.name for item in structure_type_map().values() if item.managed_by == PIPE_POINTS_OWNER
-    }
-    return station_planting_labels() | owned
-
-
-def _is_managed_elsewhere(entry: dict[str, Any]) -> bool:
-    """다른 정본(pipe_points.json·구조물 A군)이 관리하는 측점인가."""
     label = str(entry.get("structure", "")).strip()
+    at = float(entry.get("chainage_m", 0.0))
     return (
         entry.get("origin") == "pipe"
         or entry.get("structureType") == PIPE_STRUCTURE_NAME
         or label == PIPE_STRUCTURE_NAME
-        or label in _managed_elsewhere_labels()
+        or label in {item.name for item in structure_type_map().values()}
         or bool(_PIPE_LABEL.match(label))
+        or any(abs(at - p) < SAME_STATION_M for p in planted)
     )
 
 
@@ -107,7 +102,9 @@ def _escape_width_of(entry: dict[str, Any]) -> float | None:
     return None
 
 
-def migrate_irregular_stations(entries: Iterable[dict[str, Any]]) -> MigrationPlan:
+def migrate_irregular_stations(
+    entries: Iterable[dict[str, Any]], planted: Sequence[float] = ()
+) -> MigrationPlan:
     """기존 비정규 측점 목록을 정본별로 나눠 옮긴다(같은 입력이면 같은 결과).
 
     타입이 다른 정본 소관(`managed_by`)이면 구조물 목록이 아니라 그 정본으로 간다 —
@@ -120,7 +117,7 @@ def migrate_irregular_stations(entries: Iterable[dict[str, Any]]) -> MigrationPl
     seen: set[tuple[str, float]] = set()
 
     for entry in entries:
-        if _is_managed_elsewhere(entry):
+        if _is_managed_elsewhere(entry, planted):
             continue
 
         chainage = float(entry.get("chainage_m", 0.0))

B05_Profile/B05_Profile_Structures_Repository.py

@@ -69,6 +69,17 @@ def load_structures(project_root: str) -> tuple[int, list[StructureInstance]]:
     return revision, structures
 
 
+def load_saved_definition_version(project_root: str) -> int | None:
+    """정본을 적을 때의 구조물 정의 판(322-2 판 알림) — 파일이 없거나 옛 파일이면 None."""
+    path = structures_file_path(project_root)
+    try:
+        with open(path, encoding="utf-8") as handle:
+            value = json.load(handle).get("definition_version")
+    except (OSError, ValueError, TypeError, AttributeError):
+        return None
+    return value if isinstance(value, int) and not isinstance(value, bool) else None
+
+
 def load_migrated_legacy(project_root: str) -> set[str]:
     """이미 구조물 정본으로 옮긴 구 비정규 측점의 표식 집합.
 

B05_Profile/B05_Profile_Structures_Router.py

@@ -24,6 +24,7 @@ from B05_Profile.B05_Profile_Structures_Migration import migrate_irregular_stati
 from B05_Profile.B05_Profile_Structures_Repository import (
     StructureRevisionConflict,
     load_migrated_legacy,
+    load_saved_definition_version,
     load_structures,
     requires_downstream_invalidation,
     save_structures,
@@ -42,6 +43,7 @@ from common_util.common_util_drainage_pipes import (
     read_pipe_points_file,
 )
 from common_util.common_util_storage import resolve_stored_project_path
+from common_util.common_util_structure_station import plan_stations
 from config.config_db import get_db_pool
 from M02_MasterTemplete.StructOptions.M02_SO_Options import TypesWithVisible, with_visible
 
@@ -159,7 +161,10 @@ async def read_structures(project_id: UUID) -> StructureListResponse | JSONRespo
             return JSONResponse(status_code=404, content=_PROJECT_PATH_MISSING)
         revision, structures = load_structures(root)
         return StructureListResponse(
-            project_id=str(project_id), revision=revision, structures=structures
+            project_id=str(project_id),
+            revision=revision,
+            structures=structures,
+            definition_version=load_saved_definition_version(root),
         )
     except LookupError:
         # 저장 경로 조회가 예외로 알려온 "프로젝트 없음" — 500이 아니라 404다.
@@ -189,7 +194,14 @@ async def migrate_structures(project_id: UUID, payload: StructureMigrateRequest)
             return JSONResponse(status_code=404, content=_PROJECT_PATH_MISSING)
         revision, existing = load_structures(root)
         migrated_before = load_migrated_legacy(root)
-        plan = migrate_irregular_stations(payload.stations)
+        # 정본이 이미 심는 자리(측점 계획 · 323-7) — 이름이 아니라 자리로 가름(옛 이름 되짚기 걷음)
+        planted = [
+            float(station["chainage_m"])
+            for station in plan_stations(
+                read_pipe_points_file(pipe_points_path_in(Path(root))), existing
+            )
+        ]
+        plan = migrate_irregular_stations(payload.stations, planted)
         # 표식 = "타입@위치". 원천(종단 정본의 비정규 측점)은 원복용으로 그대로 두고,
         # 옮긴 이력만 남긴다 — 그래야 사용자가 지운 구조물이 재진입 때 되살아나지 않는다
         # (2026-08-24 사용자: 초기 계산값은 원복용, 사용자 수정 1세트가 최종본).

B05_Profile/B05_Profile_Structures_Schema.py

@@ -88,8 +88,6 @@ class StructureType(BaseModel):
     placement: Placement
     options: list[StructureOptionField] = Field(default_factory=list)
     style: dict[str, str] = Field(default_factory=dict)
-    # B06 도면 연계용 메타데이터 — 저장만 하고 이번 단계 완료 조건에는 넣지 않는다.
-    drawing_views: list[str] = Field(default_factory=list)
     # 다른 정본이 관리하는 타입(배관 = pipe_points.json). structures.json에 저장하지 않는다.
     managed_by: str | None = None
     # 목록에는 두되 **제원·수량을 내는 주인이 다른 화면**인 타입 — 그 화면 이름을 적는다
@@ -116,10 +114,19 @@ def _read_definition(path: str, _mtime: int, _size: int) -> dict[str, Any]:
         return json.load(handle)
 
 
+#: 정의에 남은 옛 칸 — 아무도 안 읽어 걷음(323-7 · 마스터는 M02 [저장] 때 빠짐 · 읽을 때 버림).
+RETIRED_TYPE_KEYS = ("drawing_views",)
+
+
+def without_retired(item: dict[str, Any]) -> dict[str, Any]:
+    """종류 한 줄에서 옛 칸을 뺀 사본."""
+    return {k: v for k, v in item.items() if k not in RETIRED_TYPE_KEYS}
+
+
 @lru_cache(maxsize=4)
 def _read_types(path: str, mtime: int, size: int) -> tuple[StructureType, ...]:
     payload = _read_definition(path, mtime, size)
-    return tuple(StructureType.model_validate(item) for item in payload["types"])
+    return tuple(StructureType.model_validate(without_retired(item)) for item in payload["types"])
 
 
 def load_definition() -> dict[str, Any]:
@@ -141,25 +148,19 @@ def structure_type_map() -> dict[str, StructureType]:
 
 
 def is_station_planting_type(item: StructureType) -> bool:
-    """서버가 종단 정본에 **측점으로 심는** 타입인가 (단일 규칙, 2026-08-28).
+    """서버가 종단 정본에 **측점으로 심는** 타입인가 — 구조물 표 횡단도 부품이 있음(322-1).
 
-    - A군(횡단배수·계곡 통과 시설): 그 자리에 횡단도가 필요하다.
-    - D군 구간형(기슭막이 등): 구간 시작·기준·종료에 횡단도가 필요하다 — 길이가 길면
-      그만큼 여러 장이 나온다(사용자 확정).
-    - C군 구간형(사면안정 — 옹벽·흙막이·소단 등): D군 구간형과 같이 시작·기준·종료.
-      안 심으면 측점 격자 사이에 놓인 벽이 횡단도에 안 얹힌다.
-
-    측점 생성(`resolve_extra_stations`)과 구조물 재이관 차단
-    (`B05_Profile_Structures_Migration`)이 같은 규칙을 봐야 "기타" 고스트가 안 생긴다.
+    anchor(기준 한 장 · 횡단배수 · 관 지점 시설) · span3(시작 · 기준 · 끝 · 벽 · 소단 · 기슭막이
+    — 길이가 길면 그만큼 여러 장). 옛 군 글자 규칙(A군 · C · D군 구간형)은 표 처음값으로 옮김.
     """
-    if item.group == "A":
-        return True
-    return item.group in ("C", "D") and item.placement == "interval"
+    from common_util.common_util_structure_catalog import catalog_row
+
+    row = catalog_row(item.type_id)
+    return row is not None and row["station"] != "none"
 
 
-def station_planting_labels() -> set[str]:
-    """서버가 심는 측점 라벨 집합 — 구조물로 되옮기면 정본이 이중화된다."""
-    return {item.name for item in load_structure_types() if is_station_planting_type(item)}
+#: 지난 판 정의(`판_N.json`) 폴더 — 정본 옆(M02 `M02_SO_Definition.HISTORY` 와 같은 이름)
+HISTORY_DIRNAME = "구조물정의_이력"
 
 
 def registry_schema_version() -> int:
@@ -290,3 +291,5 @@ class StructureListResponse(BaseModel):
     project_id: str
     revision: int
     structures: list[StructureInstance] = Field(default_factory=list)
+    # 정본을 적을 때의 정의 판(322-2) — 지금 판과 다르면 화면이 「저장하면 반영」 한 줄 알림
+    definition_version: int | None = None

B05_Profile/B05_Profile_UI_Corridor.ts

@@ -20,6 +20,7 @@ import {
   writeCachedBytes,
 } from "../A00_Common/b_asset_cache";
 import type { SectionDetailResponse } from "../B06_Section/B06_Section_Api_Fetch";
+import { refreshStaleDesigns } from "../B06_Section/B06_Section_Cross_Refresh";
 import type { RoutePoint } from "./B05_Profile_Api_Fetch";
 import { buildCorridor, type CorridorBuildResult } from "./B05_Profile_UI_Corridor_Build";
 import {
@@ -247,7 +248,7 @@ function withSections(
 
 /** Page 훅 — 현재 종횡단 정본 그대로 코리도를 확보해 뷰어에 반영(실패 시 제거).
  *  끝나는 시점을 [3D 업데이트] 버튼이 기다려야 해 Promise를 돌려준다(2026-09-01). */
-export function refreshCorridor(
+export async function refreshCorridor(
   viewer: { setCorridor: (build: CorridorBuildResult | null) => void },
   projectId: string,
   routeId: number | undefined,
@@ -256,7 +257,9 @@ export function refreshCorridor(
   designSamples?: ProfileSamples,
   rebuild = true,
 ): Promise<void> {
-  if (!routeId) return Promise.resolve();
+  if (!routeId) return;
+  // [3D 업데이트] — 낡은 횡단 설계(계획고 · 구조물 자리 값)를 먼저 다시 셈한 뒤 그 설계로 지음(317-1)
+  if (rebuild) await refreshStaleDesigns({ projectId, routeId, detail }).catch(() => []);
   return ensureCorridor(projectId, routeId, detail, routePoints, designSamples, rebuild)
     .then((build) => viewer.setCorridor(withSections(build, detail)))
     .catch(() => viewer.setCorridor(null));

B05_Profile/B05_Profile_UI_Corridor_Envelope.ts

@@ -181,7 +181,8 @@ function fnv1a(text: string): string {
 //      (세월교 유입·유출, BOX 좌·우, 본체는 `body`). 91 저장본엔 배수관 세트 키만 있다.
 // 93 = 측점 사이 행 자리를 **노선 길이 직선 보간**으로(115-5 P0-2) — 균일 Catmull-Rom 이
 //      행을 최대 7.2 m 미끄러뜨리고 되접었다. 모든 행 자리가 바뀌어 저장본을 만료한다.
-const BUILD_VERSION = 93;
+// 94 = 물넘이포장 노면을 파지 않음(287-4) — 설계 노면이 콘크리트 윗면 · 저장본을 만료한다.
+const BUILD_VERSION = 94;
 
 /** 종횡단 정본에서 코리도에 영향을 주는 입력만 요약해 해시 — 갱신 감지 기준. */
 export function corridorHash(detail: SectionDetailResponse, routePoints: RoutePoint[]): string {

B05_Profile/B05_Profile_UI_Corridor_Mesh.ts

@@ -382,7 +382,12 @@ export function createCorridorGroup(build: CorridorBuildResult, bounds: ModelBou
   (build.structures ?? []).forEach((structure, index) => {
     // 신원표 — 3D 클릭이 이 값으로 부재를 가려낸다(2026-09-04). 이름 규칙은 그대로 둔다
     // (다른 코드가 이름으로 찾는다). 배관은 겉·속 두 겹이라 자식까지 같은 표를 단다.
-    const tag = { chainageM: structure.chainage_m, kind: structure.kind, key: structure.key };
+    const tag = {
+      chainageM: structure.chainage_m,
+      kind: structure.kind,
+      key: structure.key,
+      structureId: structure.structure_id, // 323-5 — 벽은 id 로 고름
+    };
     if (structure.kind === "pipe") {
       const mesh = structurePipeMesh(structure, origin);
       if (mesh) {

B05_Profile/B05_Profile_UI_Corridor_Station.ts

@@ -9,7 +9,6 @@
  * (2026-08-23 사용자 지시)의 핵심.
  * ========================================================================== */
 
-import { fordDeckElevationAt } from "../B06_Section/B06_Section_UI_Cross_Ford_Pavement";
 import type { CrossSection } from "../B06_Section/B06_Section_Api_Fetch";
 import { structureSilhouettes } from "./B05_Profile_UI_Corridor_Station_Structure";
 
@@ -227,22 +226,8 @@ export function classifyStation(section: CrossSection): StationPieces | null {
   if (!design || !line || line.length < 2) return null;
   const roadL = design.road_edges.left.offset_m;
   const roadR = design.road_edges.right.offset_m;
-  // 물넘이포장 — 노면(노견 포함)이 파인다. 횡단도와 **같은 산식**으로 표고를 내려
-  // 3D도 같은 자리에 같은 깊이로 팬다(2026-08-28 사용자 지시). 노면 밖 비탈은 그대로라
-  // 노견 끝에 파임 벽(수직 단차)이 선다 — 횡단도 그림과 같은 표현이다.
-  const ford = section.ford_pavement;
-  const carved =
-    ford && ford.depth_m
-      ? line.map((point) =>
-          point.offset_m <= roadL + 1e-9 && point.offset_m >= roadR - 1e-9
-            ? {
-                ...point,
-                elevation_m: fordDeckElevationAt(design, ford, point.offset_m, point.elevation_m),
-              }
-            : point,
-        )
-      : line;
-  const sorted = [...carved].sort((a, b) => a.offset_m - b.offset_m);
+  // 물넘이포장 — 설계 노면이 곧 콘크리트 윗면(287-4 · 서버가 지대 낮은 쪽 한 경사로 냄) · 파지 않음
+  const sorted = [...line].sort((a, b) => a.offset_m - b.offset_m);
   const cwL = design.carriageway_edges?.left.offset_m ?? roadL;
   const cwR = design.carriageway_edges?.right.offset_m ?? roadR;
 

B05_Profile/B05_Profile_UI_Corridor_Structures.ts

@@ -20,7 +20,7 @@
  * 폴리곤을 갈아 끼워(`polygons`) 측점 사이를 Catmull-Rom으로 잇는다. 벽은 여전히 하나다.
  * ========================================================================== */
 
-import { structureHashParts } from "./B05_Profile_UI_Corridor_Structures_Hash";
+import { structureHashParts, wallSweepAt } from "./B05_Profile_UI_Corridor_Structures_Hash";
 import type { CrossSection, CulvertSideSpec } from "../B06_Section/B06_Section_Api_Fetch";
 import { computeCulvertLayout } from "../B06_Section/B06_Section_UI_Cross_Culvert";
 import {
@@ -54,6 +54,7 @@ import { computeRevetmentLayout } from "../B06_Section/B06_Section_UI_Cross_Reve
 import { withoutGuardedFill } from "../B06_Section/B06_Section_UI_Cross_Body_Guard";
 import { chuteBands, fordPavementChute } from "./B05_Profile_UI_Corridor_Structures_Chute";
 import { isChuteSegment } from "../B06_Section/B06_Section_UI_Cross_Wall_Hatch";
+import { builds, culvertBody, ownsBody } from "./B05_Profile_UI_Corridor_Structures_Pick";
 
 /** 스윕 프레임 하나 — 노선 위 한 지점의 중심 XY·좌향 단위벡터와 종단 표고 오프셋. */
 export interface StructureFrame {
@@ -85,6 +86,8 @@ export interface CorridorStructure {
    * 신원표다(2026-09-04). 세월교·BOX암거 부재는 아직 비워 둔다.
    */
   key?: string;
+  /** 구조물 id(323-5) — C군 벽(id 로 고름 · 덮는 측점 어디서 골라도 · 한 번 스윕). 관 부재는 자리로 고름. */
+  structure_id?: string;
   /** 단면 폴리곤 [offset, elevation][] — 스윕형(벽·집수정). pipe는 없음. */
   polygon?: Array<[number, number]>;
   /**
@@ -276,17 +279,31 @@ export function buildCorridorStructures(
 ): CorridorStructure[] {
   const solids: CorridorStructure[] = [];
   for (const section of crossSections) {
-    const layout = culvertLayoutOf(section);
+    // 몸체 고르기 = 그림 자료 열쇠의 주인 종류 표 3D 부품(322-1) · 같은 시설 카드 둘이면 한 번(323-9)
+    const own = (key: "culvert" | "ford" | "box"): boolean => ownsBody(section, crossSections, key);
+    const layout = own("culvert") && culvertBody(section) ? culvertLayoutOf(section) : null;
     // 흙막이가 선 쪽은 횡단과 같은 자리 함수로 — 측벽 걷고 관 · 바닥판이 흙막이까지(89-1)
-    const fordLayout = withoutGuardedFill(fordLayoutOf(section), layout);
+    const fordLayout =
+      own("ford") && builds("ford_bridge", "ford")
+        ? withoutGuardedFill(fordLayoutOf(section), layout)
+        : null;
     // 독립 기슭막이(옛 D군 경로) — 측점에 배관/숨김 기슭막이 세트가 붙으면 그쪽(위
     // culvertLayoutOf)이 그린다. 아직 이관 안 된 정본만 이 옛 경로로 스윕한다
     // (2026-08-28 이관 이중그리기 방지 — 횡단도 가드와 같은 규칙).
-    const revetLayout = ownWallsDrawAt(section, culvertOwnerFor(section, crossSections))
-      ? computeRevetmentLayout(section, section.design?.revet_adjust?.own)
+    // C군 벽 = 덮는 측점 중 한 곳에서만 · 시작 ~ 끝 스윕(323-4 · 측점마다 통째로 겹치던 것)
+    const wallSweep = wallSweepAt(section, crossSections);
+    const wallId = section.revetment?.structure_id;
+    const revetLayout =
+      wallSweep &&
+      ownWallsDrawAt(section, culvertOwnerFor(section, crossSections)) &&
+      builds(section.revetment?.type_id, "wall")
+        ? computeRevetmentLayout(section, section.design?.revet_adjust?.own)
+        : null;
+    const paveChute = builds("ford_pavement", "chute")
+      ? fordPavementChute(section, crossSections)
       : null;
-    const paveChute = fordPavementChute(section, crossSections);
-    if (!layout && !fordLayout && !section.box && !revetLayout && !paveChute) continue;
+    const box = own("box") && builds("box_culvert", "box") ? section.box : undefined;
+    if (!layout && !fordLayout && !box && !revetLayout && !paveChute) continue;
     const chainage = section.chainage_m;
     const stationFrame: StructureFrame = {
       cx: section.center_x,
@@ -355,18 +372,12 @@ export function buildCorridorStructures(
       });
     };
 
-    if (revetLayout) {
+    if (revetLayout && wallSweep) {
       // 다단이면 단마다 솔리드 하나 — 횡단 카드와 같은 폴리곤을 그대로 스윕한다.
-      for (const tier of revetLayout.tiers) {
-        pushSwept(
-          "revet",
-          tier.polygon,
-          revetLayout.span.beforeM,
-          revetLayout.span.afterM,
-          null,
-          "own",
-        );
-      }
+      const from = solids.length;
+      for (const tier of revetLayout.tiers)
+        pushSwept("revet", tier.polygon, wallSweep.beforeM, wallSweep.afterM, null, "own");
+      for (const solid of solids.slice(from)) solid.structure_id = wallId ?? undefined;
     }
 
     /**
@@ -447,7 +458,7 @@ export function buildCorridorStructures(
       }
     };
 
-    if (section.box) {
+    if (box) {
       solids.push(...boxSolids(section, stationFrame, boxAdjustOf(section)));
     }
     paveChute?.bands.forEach((band) =>
@@ -487,6 +498,8 @@ export function buildCorridorStructures(
       chuteBands(
         fordLayout.sides.filter((side) => side.role === "outlet").flatMap((s) => s.fillSegments),
         section.ford?.chute,
+        undefined,
+        fordLayout.ground,
       ).forEach((band) => pushSwept("chute", band, half, half, null, "chute"));
       // 날개벽 4매 — BOX암거와 같은 규칙(2026-08-25 사용자). 뿌리는 **벽 외측면**
       // (성토 경사측면과 마주치는 면) 모서리다(2026-08-25 ⑤ — 종전 바닥판 바깥 끝은
@@ -595,7 +608,12 @@ export function buildCorridorStructures(
         );
     }
     // 도수로 · 돌붙임 띠 — 유출 성토 조각(단 사이 포함) · 묻힌 끝 3도 절토 조각(152-3) · 유출 벽 길이(135-3).
-    chuteBands(layout.outletFill.segments, section.culvert?.chute, isChuteSegment).forEach((band) =>
+    chuteBands(
+      layout.outletFill.segments,
+      section.culvert?.chute,
+      isChuteSegment,
+      layout.ground,
+    ).forEach((band) =>
       pushSwept("chute", band, outletSpan.beforeM, outletSpan.afterM, null, "chute"),
     );
     // 다단은 **단별 구간값**을 따른다(2026-08-29 사용자 — 단마다 연장이 다르다).

B05_Profile/B05_Profile_UI_Corridor_Structures_Box.ts

@@ -182,6 +182,8 @@ export function boxSolids(
   const chutes: CorridorStructure[] = chuteBands(
     layout.sides.filter((side) => side.wingRole === "outlet").flatMap((side) => side.fillSegments),
     box.chute,
+    undefined,
+    layout.ground,
   ).map((band) => ({
     chainage_m: chainage,
     kind: "chute",

B05_Profile/B05_Profile_UI_Corridor_Structures_Chute.ts

@@ -10,7 +10,11 @@
 
 import type { ChuteSpec, CrossSection } from "../B06_Section/B06_Section_Api_Fetch";
 import type { OffsetPoint } from "../B06_Section/B06_Section_UI_Cross_Culvert_Types";
-import { chuteBandOutline } from "../B06_Section/B06_Section_UI_Cross_Wall_Hatch";
+import {
+  chuteBandOutline,
+  chuteRun,
+  groundLine,
+} from "../B06_Section/B06_Section_UI_Cross_Wall_Hatch";
 import { outletFillLine } from "../B06_Section/B06_Section_UI_Cross_Ford_Pavement";
 
 /** 성토 조각 하나 — B06 오버레이가 띠를 그리는 선(절토 조각은 뺀다). */
@@ -25,10 +29,11 @@ export function chuteBands(
   segments: ReadonlyArray<FillSegment>,
   chute: ChuteSpec | null | undefined,
   keep: (segment: FillSegment) => boolean = (segment) => segment.kind !== "cut",
+  /** 원지반 — 길이가 사면보다 길면 이어 그림(294-4 · 횡단 띠와 같은 `chuteRun`). */
+  ground?: readonly OffsetPoint[],
 ): OffsetPoint[][] {
   if (!chute) return [];
-  return segments.flatMap((segment) => {
-    if (!keep(segment)) return [];
+  return chuteRun(segments.filter(keep), chute.length_m, ground).flatMap((segment) => {
     const band = chuteBandOutline(segment.points, chute.thickness_m);
     return band ? [band.outline] : [];
   });
@@ -51,6 +56,12 @@ export function fordPavementChute(
     );
     if (owner !== section) return null;
   }
-  const bands = chuteBands([{ points: outletFillLine(section.design) }], pave.chute);
+  const ground = groundLine(section.samples ?? []);
+  const bands = chuteBands(
+    [{ points: outletFillLine(section.design, ground) }],
+    pave.chute,
+    undefined,
+    ground,
+  );
   return bands.length ? { bands, halfM: Math.max(pave.span_m, 0.5) / 2 } : null;
 }

B05_Profile/B05_Profile_UI_Corridor_Structures_Hash.ts

@@ -1,138 +1,79 @@
 /* =============================================================================
  * B05_Profile_UI_Corridor_Structures_Hash.ts
- * 저장 코리도 만료 판정용 **구조물 해시 요약**.
+ * 저장 코리도 만료 판정용 **구조물 지문** · C군 벽 3D 한 번(323-4).
  *
- * `B05_Profile_UI_Corridor_Structures` 에서 떼어냈다(700줄 제한, 2026-09-02).
- * 값이 바뀌면 저장본이 만료되도록 **구조물에 영향을 주는 값만** 이어 붙인다 —
- * 빠뜨린 값은 곧 "고쳐도 3D가 안 바뀌는" 버그가 되므로 항목 추가에 주의할 것.
- * 원래 파일이 그대로 다시 내보내므로 기존 import 경로는 유효하다.
+ * 지문 = 그 측점 그림 자료(형상 얹기 한 벌 `SHAPE_KEYS` · 카드 · 상세 창 · B07 · 3D 가 같은 목록) + 형상을
+ * 바꾸는 조작값 통째를 키 차례 고정 글로 — 손으로 고른 칸 목록(빠뜨린 칸 = 「고쳐도 3D 가 안 바뀜」)을 걷음.
+ * 원래 파일(`B05_Profile_UI_Corridor_Structures`)이 그대로 다시 내보내므로 기존 import 경로는 유효하다.
  * ========================================================================== */
 
-import type {
-  ChuteSpec,
-  CrossSection,
-  CulvertSideSpec,
-} from "../B06_Section/B06_Section_Api_Fetch";
+import type { CrossSection } from "../B06_Section/B06_Section_Api_Fetch";
+import { SHAPE_KEYS } from "../common_util/common_util_structure_shape_keys";
 
-/** 도수로 · 돌붙임 띠(135-3) — 고른 때만 붙인다(안 고른 측점은 해시 그대로 · 저장본 안 만료). */
-function chuteParts(chute: ChuteSpec | null | undefined): Array<string | number> {
-  return chute ? ["ch", chute.structure, chute.thickness_m] : [];
-}
+/** 형상을 바꾸는 조작값(정본 `design` 칸) — 조정창 · 다단 · 연동 · 유입 구조. */
+const ADJUST_KEYS = [
+  "revet_adjust",
+  "box_adjust",
+  "ford_adjust",
+  "basin_adjust",
+  "extra_wall_counts",
+  "extra_spans",
+  "revet_follow_grade",
+  "revet_link_detached",
+  "inlet_structure",
+] as const;
 
-/** 해시 입력용 요약 — 구조물에 영향을 주는 값만 짧게 이어 붙인다(Corridor.ts가 쓴다). */
-export function structureHashParts(section: CrossSection): Array<string | number> {
-  // 물넘이 파임·독립 기슭막이는 다른 세트와 함께 설 수 있으니 앞에 이어 붙인다 —
-  // 빼먹으면 값을 고쳐도 저장 코리도가 만료되지 않는다(2026-08-28).
-  const extras: Array<string | number> = [];
-  const fordPave = section.ford_pavement;
-  if (fordPave) {
-    extras.push("fp", fordPave.span_m, fordPave.depth_m ?? "", fordPave.slope_pct ?? "");
-    extras.push(...chuteParts(fordPave.chute));
-  }
-  const ownRevet = section.revetment;
-  if (ownRevet) {
-    extras.push(
-      "rv",
-      ownRevet.start_m,
-      ownRevet.end_m,
-      ownRevet.anchor_m,
-      ownRevet.height_m ?? "",
-      ownRevet.side ?? "",
-      ownRevet.form ?? "",
-      ownRevet.tiers ?? "",
-      ownRevet.lift_m ?? "",
-      ownRevet.shift_m ?? "",
-      // 조정창 조작값이 바뀌면 저장 코리도를 만료시킨다.
-      JSON.stringify(section.design?.revet_adjust?.own ?? ""),
-    );
-  }
-  const box = section.box;
-  // 세월교 · 박스에 흙막이(`culvert`)가 함께 서면 그 값도 이어 붙임(73-4) — 일찍 돌려주지 않음.
-  if (box) {
-    extras.push(
-      "bx",
-      box.inner_width_m,
-      box.inner_height_m,
-      box.span_m,
-      box.cover_m,
-      box.wing_in.slab_extend_m,
-      box.wing_in.height_m ?? "",
-      box.wing_out.slab_extend_m,
-      box.wing_out.height_m ?? "",
-      // 조작값이 정본에 실리므로 해시에도 넣는다 — 안 넣으면 저장 코리도가 안 만료된다.
-      ...(["left", "right"] as const).map((side) => {
-        const value = section.design?.box_adjust?.[side];
-        return value ? `${side}:${value.lengthM},${value.riseM}` : "";
-      }),
-      ...chuteParts(box.chute),
-    );
-  }
-  const ford = section.ford;
-  if (ford) {
-    const adjust = section.design?.ford_adjust;
-    const wall = (role: "inlet" | "outlet"): string => {
-      const value = adjust?.[role];
-      return value ? `${value.heightM ?? ""},${value.lateralM},${value.slopeM}` : "";
-    };
-    extras.push(`dr:${adjust?.dropM ?? ""}`);
-    extras.push(
-      "fd",
-      ford.diameter_m,
-      ford.pipe_count,
-      ford.span_m,
-      ford.wing_in.slab_extend_m,
-      ford.wing_out.slab_extend_m,
-      wall("inlet"),
-      wall("outlet"),
-      ...chuteParts(ford.chute),
-    );
-  }
-  const culvert = section.culvert;
-  if (!culvert) return extras;
-  const side = (spec: CulvertSideSpec): string =>
-    [
-      spec.structure,
-      spec.revet_form ?? "",
-      spec.revet_height_m ?? "",
-      spec.revet_length_m ?? "",
-      spec.revet_before_m ?? "",
-      spec.revet_after_m ?? "",
-      spec.basin_length_m ?? "",
-      spec.basin_before_m ?? "",
-      spec.basin_after_m ?? "",
-      spec.basin_height_m ?? "",
-    ].join(",");
-  const basin = section.design?.basin_adjust;
-  const revet = section.design?.revet_adjust;
-  const counts = section.design?.extra_wall_counts;
+/** 키 차례를 고정한 JSON — 같은 값이면 같은 글. */
+const stable = (value: unknown): string =>
+  JSON.stringify(value, (_key, item: unknown) =>
+    item && typeof item === "object" && !Array.isArray(item)
+      ? Object.fromEntries(
+          Object.keys(item)
+            .sort()
+            .map((key) => [key, (item as Record<string, unknown>)[key]]),
+        )
+      : item,
+  );
+
+/** 해시 입력 — 구조물이 없는 측점은 빈 목록(저장본 지문 그대로). */
+export function structureHashParts(section: CrossSection): string[] {
+  const record = section as unknown as Record<string, unknown>;
+  const shapes = SHAPE_KEYS.filter((key) => record[key] != null);
+  if (!shapes.length) return [];
+  const design = (section.design ?? {}) as unknown as Record<string, unknown>;
   return [
-    ...extras,
-    "cv",
-    culvert.diameter_m,
-    culvert.pipe_kind ?? "",
-    side(culvert.inlet),
-    side(culvert.outlet),
-    section.design?.inlet_structure ?? "",
-    basin ? `${basin.innerWidthM},${basin.innerHeightM},${basin.lateralM},${basin.slopeM}` : "",
-    // 조작값이 정본에 실리므로 해시에도 넣는다 — 안 넣으면 저장 코리도가 안 만료된다.
-    revet
-      ? Object.keys(revet)
-          .sort()
-          .map((role) => {
-            const value = revet[role];
-            return `${role}:${value.x},${value.d ?? ""},${value.h ?? ""},${value.m ?? ""}`;
-          })
-          .join("|")
-      : "",
-    counts ? `${counts.outlet},${counts.basin}` : "",
-    section.design?.revet_follow_grade === false ? "flatZ" : "",
-    // 다단 단별 구간값·연동 해제도 형상을 바꾼다 — 빠지면 저장 코리도가 안 만료돼
-    // 값만 바뀌고 3D는 옛 모양 그대로다(2026-08-30).
-    Object.entries(section.design?.extra_spans ?? {})
-      .sort(([a], [b]) => (a < b ? -1 : 1))
-      .map(([wall, span]) => `${wall}:${span.length_m},${span.before_m},${span.after_m}`)
-      .join("|"),
-    section.design?.revet_link_detached === true ? "detached" : "",
-    ...chuteParts(culvert.chute),
+    stable({
+      ...Object.fromEntries(shapes.map((key) => [key, record[key]])),
+      adjust: Object.fromEntries(ADJUST_KEYS.map((key) => [key, design[key] ?? null])),
+    }),
   ];
 }
+
+/**
+ * C군 벽 3D 한 번 — 그 벽을 얹은 측점 중 기준 측점과 가장 가까운 것(목록 앞쪽 먼저)만 스윕 ·
+ * 스윕 = 시작 ~ 끝(그 측점 기준 전 · 후). 다른 측점은 null(덮는 측점마다 통째로 겹치던 것).
+ */
+export function wallSweepAt(
+  section: CrossSection,
+  sections: readonly CrossSection[],
+): { beforeM: number; afterM: number } | null {
+  const wall = section.revetment;
+  if (!wall) return null;
+  const same = (other: CrossSection): boolean =>
+    !!other.revetment &&
+    (wall.structure_id
+      ? other.revetment.structure_id === wall.structure_id
+      : other.revetment.start_m === wall.start_m && other.revetment.end_m === wall.end_m);
+  const gap = (other: CrossSection): number => Math.abs(other.chainage_m - wall.anchor_m);
+  const owner = sections
+    .filter(same)
+    .reduce<CrossSection | null>(
+      (best, other) => (!best || gap(other) < gap(best) ? other : best),
+      null,
+    );
+  if (owner !== section) return null;
+  return {
+    beforeM: Math.max(section.chainage_m - wall.start_m, 0),
+    afterM: Math.max(wall.end_m - section.chainage_m, 0),
+  };
+}

B05_Profile/B05_Profile_UI_Corridor_Structures_Pick.ts

@@ -0,0 +1,38 @@
+/* =============================================================================
+ * B05_Profile_UI_Corridor_Structures_Pick.ts
+ * 3D 몸체 고르기(322-1) — 그림 자료 열쇠(`culvert` · `box` · `ford` · `ford_pavement` · `revetment`)의 주인
+ * 종류가 구조물 표 3D 부품으로 그 몸체를 세우는가. 지금 처음값 = 지금 결과 그대로(표가 끈 것만 빠짐).
+ * 쓰는 곳 = `B05_Profile_UI_Corridor_Structures.buildCorridorStructures`.
+ * ========================================================================== */
+
+import type { CrossSection } from "../B06_Section/B06_Section_Api_Fetch";
+import { catalogRow } from "../common_util/common_util_structure_catalog";
+
+/** 그림 자료의 주인 종류가 이 3D 몸체를 세우는가 — 표에 없는 종류면 세움. */
+export const builds = (typeId: string | null | undefined, body: string): boolean =>
+  (catalogRow(typeId ?? "")?.model3d ?? body) === body;
+
+/**
+ * 이 카드가 시설(관 · 세월교 · BOX) 몸체를 세우는가 — 같은 시설(얹을 때 적은 시설 누가거리)을 그리는 카드 중
+ * 시설 자리에 가장 가까운 하나만(노선 끝 EP 카드 0.01 m 차 · 323-9 · `fordPavementChute` 와 같은 규칙).
+ */
+export function ownsBody(
+  section: CrossSection,
+  sections: readonly CrossSection[],
+  key: "culvert" | "ford" | "box",
+): boolean {
+  const at = section[key]?.chainage_m;
+  if (typeof at !== "number") return true; // 시설 자리 없음 = 옛 자료 그대로
+  const gap = (item: CrossSection): number => Math.abs(item.chainage_m - at);
+  const same = sections.filter((item) => item[key]?.chainage_m === at);
+  const owner = same.reduce((best, item) => (gap(item) < gap(best) ? item : best), same[0]);
+  return owner === section;
+}
+
+/** `culvert` 자리 주인 = 박스 · 세월교 흙막이(body) · 독립 기슭막이(관 숨김) · 배관. */
+export function culvertBody(section: CrossSection): boolean {
+  const spec = section.culvert;
+  if (!spec) return false;
+  if (spec.body) return builds(spec.body === "box" ? "box_culvert" : "ford_bridge", spec.body);
+  return spec.hidden_pipe ? builds("revetment", "wall") : builds("pipe", "pipe");
+}

B05_Profile/B05_Profile_UI_Drainage_Facility.ts

@@ -50,14 +50,14 @@ import {
   outletTiersRow,
   revetChoiceRow,
 } from "./B05_Profile_UI_Drainage_Revet_Choice";
-import { optionDefaults } from "./B05_Profile_UI_Structures_Fields";
+import { hiddenOptionKeys, optionDefaults } from "./B05_Profile_UI_Structures_Fields";
 import {
   createSpecForm,
   type SpecForm,
   type SpecLinks,
 } from "../A00_Common/design/design_structure_form";
-import type { SpecContainer, SpecItem } from "../A00_Common/design/design_structure_spec";
 import { PIPE_SPEC } from "../A00_Common/design/design_structure_pipe";
+import { catalogRow } from "../common_util/common_util_structure_catalog";
 import {
   BOX_SPEC,
   bodyOf,
@@ -65,11 +65,12 @@ import {
   boxOptionsIn,
 } from "../A00_Common/design/design_structure_box";
 import { FORD_SPEC, withLegacyGuards } from "../A00_Common/design/design_structure_ford";
-import { fordHeightM } from "../A00_Common/design/design_structure_ford_calc";
+import { overflowSync } from "../A00_Common/design/design_structure_ford_calc";
 import {
   pipeDrawn,
   pipeExtraCount,
   pipeLengthM,
+  pipeLengthText,
 } from "../A00_Common/design/design_structure_pipe_calc";
 import {
   hasLinks,
@@ -339,7 +340,7 @@ export function createFacilityOptionsForm(
     auto: (_c, item) => {
       if (item.id !== "length") return "";
       const length = pipeLengthM(chainage);
-      return length === null ? "횡단 설계 뒤 셈" : String(Math.round(length));
+      return length === null ? "횡단 설계 뒤 셈" : pipeLengthText(length);
     },
     // 흙막이 개수 = 유출 「추가 기슭막이(단)」(54-1)
     count: (c) => (c.id === "soil_add" ? pipeExtraCount(chainage) : undefined),
@@ -371,38 +372,21 @@ export function createFacilityOptionsForm(
   // 월류 높이 = 월류 폭과 연동(폭을 바꾸면 필요 수심으로 채움 · 그 아래는 안 받음 · `design_structure_ford_calc`) —
   // 물넘이 포장도 같은 키 · 같은 계산(65-5) · 새 시설은 유량이 오면 빈 높이를 필요 수심으로(65-4)
   let fordFlow: number | null = null;
-  let heightPending = false;
-  const overflow = (form: () => SpecForm, box: string) => {
-    const values = () => form().state()[box]?.[0] ?? {};
-    const need = (): number | null => fordHeightM(fordFlow, Number(values().width ?? ""));
-    return {
-      onChange: (c: SpecContainer, item: SpecItem) => {
-        if (c.id === box && item.id === "height") heightPending = 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: () => {
-        const want = heightPending && !values().height ? need() : null;
-        if (want === null) return;
-        form().setValue(box, "height", want.toFixed(2));
-        heightPending = false;
-      },
-    };
-  };
-  const fordFlowBox = overflow(() => fordForm, "ford");
+  const fordFlowBox = overflowSync(
+    () => fordForm,
+    "ford",
+    () => fordFlow,
+    emit,
+  );
+  const guardFields = guardChoiceFields(
+    () => chainage,
+    () => fordForm.refresh(),
+    () => fordForm.recount(),
+  );
   // 유출 흙막이 단 수 = 흙막이 상자 수(관보호공과 같은 방향 · 「+ 흙막이」 없음 · 90-1)
   const fordForm: SpecForm = createSpecForm(specLinks, {
     onChange: fordFlowBox.onChange,
-    fields: guardChoiceFields(
-      () => chainage,
-      () => fordForm.refresh(),
-      () => fordForm.recount(),
-    ),
+    fields: (c, values) => [...guardFields(c, values), ...fordFlowBox.fields(c)],
     count: guardSoilCount(
       () => chainage,
       () => fordForm.state().outlet?.[0]?.structure,
@@ -484,8 +468,16 @@ export function createFacilityOptionsForm(
 
   // ── 물넘이 포장 = 사용자 구조물 표 03 명세(PLAN 52-3) — 경사각도(+ 월류 폭 · 높이 · 65-5) · 도수로/돌붙임 ·
   // 옛 바닥 경사 · 두께 · 길이 칸은 뺌(지난 정의 값) ──
-  const paveFlowBox = overflow(() => paveForm, "slope");
-  const paveForm: SpecForm = createSpecForm(specLinks, { onChange: paveFlowBox.onChange });
+  const paveFlowBox = overflowSync(
+    () => paveForm,
+    "slope",
+    () => fordFlow,
+    emit,
+  );
+  const paveForm: SpecForm = createSpecForm(specLinks, {
+    onChange: paveFlowBox.onChange,
+    fields: paveFlowBox.fields,
+  });
 
   // 10-A ⑲ 저장 규칙 글은 [?] 설명서 `구조물_<시설>.md` 로 옮김(54-2) — 병합은 `_Drainage_Facility_Merge`.
 
@@ -505,13 +497,16 @@ export function createFacilityOptionsForm(
   );
 
   let current: PipeFacility | null = null;
+  /** 서브폼 = 구조물 표 형상(323-7 · 종류 키 대신 · 관 지점 시설은 형상마다 손코딩 폼 하나). */
+  const shapeOf = (facility: PipeFacility | null) =>
+    (facility && catalogRow(facility)?.shape) || null;
 
   function syncVisibility(): void {
     root.hidden = current === null;
     if (current === null) return;
-    const isPipe = current === "pipe";
-    const isBox = current === "box_culvert";
-    const isBridge = current === "ford_bridge";
+    const isPipe = shapeOf(current) === "pipe_set";
+    const isBox = shapeOf(current) === "box";
+    const isBridge = shapeOf(current) === "ford";
     pipeForm.root.hidden = !isPipe;
     boxForm.root.hidden = !isBox;
     fordForm.root.hidden = !isBridge;
@@ -521,8 +516,8 @@ export function createFacilityOptionsForm(
     wingOutFields.root.hidden = true;
     (spec ? spec.slot("inlet") : wingInHome).append(wingInFields.slot);
     (spec ? spec.slot("outlet") : wingOutHome).append(wingOutFields.slot);
-    paveForm.root.hidden = current !== "ford_pavement";
-    const isRevet = current === "revetment";
+    paveForm.root.hidden = shapeOf(current) !== "ford_pavement";
+    const isRevet = shapeOf(current) === "hidden_revet";
     revetTopRow.hidden = !isRevet;
     // 설치 측이 한쪽이면 그쪽 칸만 남긴다 — 이름표는 측점이 정한 좌·우다(안 정함 = 양쪽처럼 보임).
     const side = revetSide.value || "양쪽";
@@ -589,10 +584,10 @@ export function createFacilityOptionsForm(
     },
     setChainage(chainageM) {
       chainage = chainageM;
-      if (current === "pipe") pipeForm.refresh();
+      if (shapeOf(current) === "pipe_set") pipeForm.refresh();
     },
     recount() {
-      if (current === "pipe") pipeForm.recount();
+      if (shapeOf(current) === "pipe_set") pipeForm.recount();
     },
     onInletStructureChange(handler) {
       inletStructureHandler = handler;
@@ -602,7 +597,7 @@ export function createFacilityOptionsForm(
     },
     setFacility(facility, options = {}, designFlow = null, definition = null, fresh = false) {
       current = facility;
-      heightPending = fresh;
+      [fordFlowBox, paveFlowBox].forEach((box) => box.arm(fresh));
       hiddenOptions.remember(options);
       fordFlow = designFlow ?? null;
       if (facility === null) {
@@ -616,6 +611,7 @@ export function createFacilityOptionsForm(
       const names = definition?.spec_names ?? {};
       // 필수 상자 빈 고르기 칸이 받는 정의 기본값(54-43) — 옛 키는 열 때와 같은 길로 바꿈
       const defaults = optionDefaults(definition?.options ?? []);
+      const hidden = hiddenOptionKeys(definition?.options ?? []); // 정의 「표시」 숨김(322-2)
       if (facility === "pipe") {
         // 정의 파일의 옛 이름 「흙막이 추가」 — 명세 이름 「흙막이」가 앞섬(54-1)
         const { soil_add: _old, ...pipeNames } = names;
@@ -625,11 +621,18 @@ export function createFacilityOptionsForm(
           !["revet", "I", "L", "U"].includes(String(kind ?? ""))
             ? { structure: kind }
             : null;
-        pipeForm.write(PIPE_SPEC, options, pipeNames, groups, defaults);
+        pipeForm.write(PIPE_SPEC, options, pipeNames, groups, defaults, hidden);
       }
       if (facility === "box_culvert") {
         // 본체 규격은 저장 안 함 — 폭 · 높이로 되찾음 · 옛 설치 「있음」 = 날개벽
-        boxForm.write(BOX_SPEC, boxOptionsIn(options), names, groups, boxOptionsIn(defaults));
+        boxForm.write(
+          BOX_SPEC,
+          boxOptionsIn(options),
+          names,
+          groups,
+          boxOptionsIn(defaults),
+          hidden,
+        );
         for (const [id, value] of Object.entries(bodyOf(options)))
           boxForm.setValue("body", id, value);
       }
@@ -640,9 +643,10 @@ export function createFacilityOptionsForm(
           names,
           groups,
           withLegacyGuards(defaults),
+          hidden,
         );
       if (facility === "ford_pavement")
-        paveForm.write(FORD_PAVEMENT_SPEC, options, names, groups, defaults);
+        paveForm.write(FORD_PAVEMENT_SPEC, options, names, groups, defaults, hidden);
       if (facility === "ford_bridge") fordFlowBox.fill();
       if (facility === "ford_pavement") paveFlowBox.fill();
       wingInFields.write(options);
@@ -658,28 +662,28 @@ export function createFacilityOptionsForm(
     },
     setDesignFlow(designFlow) {
       fordFlow = designFlow ?? null;
-      if (current === "ford_bridge") fordFlowBox.fill();
-      if (current === "ford_pavement") paveFlowBox.fill();
+      if (shapeOf(current) === "ford") fordFlowBox.fill();
+      if (shapeOf(current) === "ford_pavement") paveFlowBox.fill();
       syncVisibility();
     },
     readOptions() {
       const options: Record<string, string | number> = {};
       // 고른 칸만 싣는다 — 「안 정함」은 빈 값(기본값을 몰래 확정으로 안 바꿈).
-      if (current === "pipe") {
+      if (shapeOf(current) === "pipe_set") {
         Object.assign(options, pipeForm.read()); // 명세 컨테이너 값 = 옛 키 그대로(PLAN 52-1)
         // 자동(규칙)은 고를 때까지 그대로 — 보여 주기만으로 파일이 안 바뀜(54-13)
         if (inletIsAuto()) {
           if (inletAuto!.structure === undefined) delete options.inlet_structure;
           else options.inlet_structure = inletAuto!.structure;
         }
-      } else if (current === "box_culvert") {
+      } else if (shapeOf(current) === "box") {
         // 정본은 폭 · 높이 두 칸 — 규격이면 규격 수 · 사용자 입력이면 명세 숫자 칸(PLAN 52-2)
         Object.assign(options, boxForm.read(), bodyOptions(boxForm.state().body?.[0]));
-      } else if (current === "ford_pavement") {
+      } else if (shapeOf(current) === "ford_pavement") {
         Object.assign(options, paveForm.read()); // 표 03 명세 값 · 옛 월류 · 경사 · 두께 · 길이는 병합이 이어 붙임(52-3)
-      } else if (current === "ford_bridge") {
+      } else if (shapeOf(current) === "ford") {
         Object.assign(options, fordForm.read()); // 표 04 명세 값 · 옛 관종 · 날개벽 치수는 병합이 이어 붙임(52-4)
-      } else if (current === "revetment") {
+      } else if (shapeOf(current) === "hidden_revet") {
         if (revetSide.value) options.side = revetSide.value;
         // 단 수는 폼이 갖지 않는다 — 횡단 설계 patch(extra_wall_counts)가 정본이고
         // 조작은 [추가 기슭막이(단)] 행이 한다(2026-08-30 사용자: 중복이라 삭제).

B05_Profile/B05_Profile_UI_Drainage_Ford_Fill.ts

@@ -12,18 +12,29 @@ import {
   FORD_PAVEMENT_DEFAULT_WIDTH_M,
 } from "@config/config_frontend";
 import { fordHeightM } from "../A00_Common/design/design_structure_ford_calc";
+import { PIPE_MATCH_M } from "../A00_Common/design/design_selection";
 
 const FORD_KINDS: Record<string, number> = {
   ford_bridge: FORD_BRIDGE_DEFAULT_WIDTH_M,
   ford_pavement: FORD_PAVEMENT_DEFAULT_WIDTH_M,
 };
 
+/** 프로젝트마다 높이를 기다리는 측점 — 배수유역도 판 · B06 [추가] 가 같은 표를 씀(298-1). */
+const waits = new Map<string, Set<number>>();
+export function fordWaitsOf(projectId: string | null): Set<number> {
+  const key = projectId ?? "";
+  if (!waits.has(key)) waits.set(key, new Set());
+  return waits.get(key) as Set<number>;
+}
+
 /** 새로 놓으면 높이를 기다리는 종류 — 높이 칸이 빈 세월교 · 물넘이포장. */
 export function waitsFordHeight(
   facility: string | undefined,
   options?: Record<string, string | number>,
 ): boolean {
-  return !!facility && facility in FORD_KINDS && options?.ford_height_m === undefined;
+  // 빈 글자도 빈칸 — 채우는 쪽(`fillFordHeights`)과 같은 규칙(314)
+  const height = options?.ford_height_m;
+  return !!facility && facility in FORD_KINDS && (height === undefined || height === "");
 }
 
 /** 기다리는 측점의 빈 높이를 채움 — 채운(또는 사용자 값이라 그만 기다릴) 측점은 `pending` 에서 뺌.
@@ -39,7 +50,7 @@ export function fillFordHeights(
 ): boolean {
   let filled = false;
   for (const wait of [...pending]) {
-    const point = points.find((entry) => Math.abs(entry.chainage_m - wait) < 0.51);
+    const point = points.find((entry) => Math.abs(entry.chainage_m - wait) < PIPE_MATCH_M);
     if (!point?.facility || !(point.facility in FORD_KINDS)) {
       pending.delete(wait); // 관이 사라졌거나 종류가 바뀜
       continue;
@@ -48,7 +59,9 @@ export function fillFordHeights(
       pending.delete(wait); // 사용자가 넣은 값 — 안 덮음
       continue;
     }
-    const flow = basins.find((entry) => Math.abs(entry.chainage_m - point.chainage_m) < 0.51);
+    const flow = basins.find(
+      (entry) => Math.abs(entry.chainage_m - point.chainage_m) < PIPE_MATCH_M,
+    );
     const width = Number(point.options?.ford_width_m) || FORD_KINDS[point.facility];
     const need = fordHeightM(flow?.design_flow_m3s ?? null, width);
     if (need === null) continue; // 유량 아직 없음 — 다음 응답까지 빈칸

B05_Profile/B05_Profile_UI_Drainage_Interact.ts

@@ -8,6 +8,7 @@
  * 그리기·유역 목록·마커 편집기가 같은 값을 보던 구조를 그대로 두기 위함이다.
  * ========================================================================== */
 
+import { wheelZoomsIn } from "../A00_Common/touch_bridge";
 import {
   computeMaxScale,
   lonLatToScreen,
@@ -17,6 +18,7 @@ import {
 import type { VWorldMeta } from "../B04_PreProcess/B04_PreProcess_Api_Fetch";
 import type { DetailBasin } from "../B04_PreProcess/B04_PreProcess_Api_Fetch";
 import { pointInRings } from "../B04_PreProcess/B04_PreProcess_UI_MapOverlays";
+import { clampWheelScale } from "./B05_Profile_UI_Drainage_ZoomRange";
 import type { createPipeEditor } from "./B05_Profile_UI_Drainage_Pipes";
 import type { createMapContextMenu } from "@ui/ui_template_context_menu";
 
@@ -33,6 +35,8 @@ export interface DrainageInteractParams {
   setScale: (value: number) => void;
   /** 배율 상한을 도엽 실폭으로 계산하기 위한 메타 (2026-09-04). 없으면 종전 고정 상한. */
   getMeta: () => VWorldMeta | null;
+  /** 줌아웃 한계 배율 — 노선 기준(계획서 281). */
+  getMinScale: () => number;
   getOffset: () => { x: number; y: number };
   setOffset: (x: number, y: number) => void;
   scheduleDraw: () => void;
@@ -62,7 +66,13 @@ export function bindDrainageInteractions(params: DrainageInteractParams): void {
       // 상한은 「화면 폭 20m」로 계산한다 — B04 지도와 같은 규칙(2026-09-04 사용자 지시).
       const view = currentView();
       const maxScale = computeMaxScale(params.getMeta(), view.mapRect.width, view.width, 16);
-      const scale = Math.min(maxScale, Math.max(0.5, prevScale * (event.deltaY > 0 ? 1.15 : 0.87)));
+      // 하한은 노선 기준(계획서 281) — 도엽 전체까지 빠지지 않는다.
+      const scale = clampWheelScale(
+        prevScale * (wheelZoomsIn(event) ? 1.15 : 0.87),
+        prevScale,
+        params.getMinScale(),
+        maxScale,
+      );
       params.setScale(scale);
       // 커서 아래 지점을 고정한 채 확대/축소 (B04 지도와 동일 동작).
       const ratio = scale / prevScale;

B05_Profile/B05_Profile_UI_Drainage_Panel.ts

@@ -1,5 +1,6 @@
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
 import { readStateRaw, writeStateRaw } from "../A00_Common/b_page_state";
+import { viewOf } from "../common_util/common_util_view_window";
 import {
   computeDetailBasins,
   fetchDetailPipePoints,
@@ -29,20 +30,24 @@ import type { FlowArrow } from "../B04_PreProcess/B04_PreProcess_UI_FlowArrows";
 import { buildStrengthArray } from "../B04_PreProcess/B04_PreProcess_UI_FlowRamp";
 import { resampleRoute } from "../B04_PreProcess/B04_PreProcess_UI_RouteSamples";
 import { createPipeEditor } from "./B05_Profile_UI_Drainage_Pipes";
+import { followMovedPipe, PIPE_MATCH_M } from "../A00_Common/design/design_pipe_ids";
+import { snapStructureStation } from "../common_util/common_util_structure_station";
 import { createFacilityStore } from "./B05_Profile_UI_Drainage_Facility";
 import { mergeFacilityOptions } from "./B05_Profile_UI_Drainage_Facility_Merge";
 import { readPendingPipes, writePendingPipes } from "./B05_Profile_Api_Pipes_Draft";
 import { buildPipeReports } from "./B05_Profile_UI_Drainage_Report";
-import { fillFordHeights, waitsFordHeight } from "./B05_Profile_UI_Drainage_Ford_Fill";
+import { fillFordHeights, fordWaitsOf, waitsFordHeight } from "./B05_Profile_UI_Drainage_Ford_Fill";
 import { createDrainageChrome } from "./B05_Profile_UI_Drainage_Chrome";
 import { bindDrainageInteractions } from "./B05_Profile_UI_Drainage_Interact";
 import type { RouteSpanBand } from "./B05_Profile_UI_Drainage_Spans";
 import { drawDrainageScene } from "./B05_Profile_UI_Drainage_Render";
+import { computeZoomOutLimit } from "./B05_Profile_UI_Drainage_ZoomRange";
 import {
   mountDrainageToggles,
   DRAINAGE_LAYERS,
   fetchDrainageLayers,
   createProgressReporter,
+  analyzeFailed,
   fitCanvasToViewport,
   fitViewToRoute,
   observeViewportSize,
@@ -172,10 +177,12 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
   let offsetX = 0;
   let offsetY = 0;
   let frameHandle = 0;
+  /** 화면 틀은 판이 놓인 창 것 — 새 창 최대화로 가려진 메인 창 틀은 멈춤(230-2). */
+  let frameView: Window = window;
   let loadSequence = 0;
   let requestSeq = 0; // 세부유역 요청 — 최신 응답만 채택
-  /** 우클릭으로 바로 놓은 세월교 · 물넘이포장 — 재계산 유량이 오면 빈 월류 높이를 채울 측점(126-1). */
-  const fordWaits = new Set<number>();
+  /** 바로 놓은 세월교 · 물넘이포장 — 재계산 유량이 오면 빈 월류 높이를 채울 측점(126-1 · B06 [추가]도 298-1). */
+  const fordWaits = () => fordWaitsOf(projectId);
   let canvasWidth = 0;
   let canvasHeight = 0;
   let canvasDpr = 0;
@@ -284,24 +291,25 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
   const pipeColor = (chainage: number): string => pipeMarkerColor(basins, chainage);
 
   /** 마커 선택 ↔ 유역 강조 동기화 + 삭제 버튼 갱신(편집 폼은 사이드 소관). */
-  function syncPipeSelection(): void {
+  function syncPipeSelection(notify = true): void {
     const index = pipeEditor.selected();
     deleteButton.disabled = index === null;
     const picked = index === null ? null : pipeEditor.pipes()[index];
-    selectBasin(basinIndexOfPipe(basins, picked ?? null));
+    selectBasin(basinIndexOfPipe(basins, picked ?? null), notify);
     // 유역 유무와 무관하게 선택 자체를 알린다 — 그래프·3D·리스트 동기화(재진입은
     // Page의 selectionSyncing 가드가 끊는다). 값이 안 바뀌면 조용히 — 재계산(apply)
     // 뒤의 재호출이 다른 화면 선택을 풀어 버리지 않게.
     const pickedChainage = picked ? picked.chainage_m : null;
     if (pickedChainage !== lastNotifiedPipeChainage) {
       lastNotifiedPipeChainage = pickedChainage;
-      callbacks.onPipeSelected?.(pickedChainage);
+      if (notify) callbacks.onPipeSelected?.(pickedChainage);
     }
   }
 
   function scheduleDraw(): void {
     if (frameHandle) return;
-    frameHandle = window.requestAnimationFrame(() => {
+    frameView = viewOf(root);
+    frameHandle = frameView.requestAnimationFrame(() => {
       frameHandle = 0;
       draw();
     });
@@ -351,7 +359,7 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
       })),
     );
     // 시설 확장 정보(종류·구간·옵션)는 응답이 정본 — 통째로 다시 채운다(기다리던 월류 높이를 먼저 얹음).
-    const fordFilled = fillFordHeights(response.pipe_points, response.basins, fordWaits);
+    const fordFilled = fillFordHeights(response.pipe_points, response.basins, fordWaits());
     facilityStore.replaceFromResponse(response.pipe_points);
     if (fordFilled) rememberPipes();
     // 재계산 뒤에는 선택을 다시 알려야 한다 — 관을 새로 넣은 직후에는 목록이 아직
@@ -384,8 +392,7 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
     } catch (error) {
       if (seq !== requestSeq) return;
       status.hidden = false;
-      status.textContent =
-        error instanceof Error ? error.message : L("B05_Drainage_Status_AnalyzeFailed");
+      status.textContent = analyzeFailed(error, L("B05_Drainage_Status_AnalyzeFailed"));
     } finally {
       if (seq === requestSeq) {
         analyzeButton.disabled = false;
@@ -414,7 +421,7 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
   const loadSaved = (): Promise<void> =>
     run(() => {
       const pending = readPendingPipes(projectId as string);
-      return pending?.length
+      return pending !== null // 빈 목록 = 다 지움(관 0개 · 312) — 저장분으로 안 넘어감
         ? computeDetailBasins(projectId as string, pending)
         : fetchDetailPipePoints(projectId as string);
     });
@@ -455,6 +462,11 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
     offsetY = fitted.offsetY;
   }
 
+  function zoomOutLimit(): number {
+    const view = currentView();
+    return computeZoomOutLimit(meta, routePoints, basins, view.width, view.height);
+  }
+
   async function loadLayers(): Promise<void> {
     if (!projectId) return;
     const activeProjectId = projectId;
@@ -511,6 +523,7 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
       scale = value;
     },
     getMeta: () => meta,
+    getMinScale: zoomOutLimit,
     getOffset: () => ({ x: offsetX, y: offsetY }),
     setOffset: (x, y) => {
       offsetX = x;
@@ -534,8 +547,8 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
       offsetY = next.offsetY;
     },
     redraw: () => {
-      // 배치가 잡히면 미뤄 둔 화면 맞춤을 그때 수행한다.
-      if (fitPending) fitToRoute();
+      // 배치가 잡히면 미뤄 둔 화면 맞춤을 그때 수행한다. 늘려서 줌아웃 한계 밖이면 노선 맞춤(281-2).
+      if (fitPending || scale < zoomOutLimit() * 0.999) fitToRoute();
       scheduleDraw();
     },
   });
@@ -567,15 +580,18 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
     movePipe(fromChainage, toChainage) {
       const index = pipeEditor
         .pipes()
-        .findIndex((pipe) => Math.abs(pipe.chainage_m - fromChainage) < 0.51);
+        .findIndex((pipe) => Math.abs(pipe.chainage_m - fromChainage) < PIPE_MATCH_M);
       if (index < 0) return;
-      pipeEditor.moveTo(index, toChainage);
+      const to = snapStructureStation(toChainage); // 정수 m(234-1) — 시설 속성도 새 자리로(지도 끌기와 같게)
+      facilityStore.move(pipeEditor.pipes()[index].chainage_m, to);
+      followMovedPipe(projectId, pipeEditor.pipes()[index].chainage_m, to); // 고름 유지(322-3)
+      pipeEditor.moveTo(index, to);
     },
     selectBasinByChainage(chainageM) {
       const picked =
         chainageM === null
           ? null
-          : (basins.find((basin) => Math.abs(basin.chainage_m - chainageM) < 0.51) ?? null);
+          : (basins.find((basin) => Math.abs(basin.chainage_m - chainageM) < PIPE_MATCH_M) ?? null);
       // 밖에서 온 요청이므로 되돌려 보내지 않는다(그래프 ↔ 유역 순환 차단).
       selectBasin(picked ? picked.index : null, false);
     },
@@ -601,23 +617,28 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
       scheduleDraw();
     },
     addPipe(chainageM, attributes) {
+      chainageM = snapStructureStation(chainageM); // 관 기준 측점 = 정수 m(234-1)
       // 시설 정보를 먼저 보관해야 addAtChainage가 촉발하는 재계산 요청에 실려 간다.
       facilityStore.set(chainageM, attributes ?? null);
-      if (waitsFordHeight(attributes?.facility, attributes?.options)) fordWaits.add(chainageM);
+      if (waitsFordHeight(attributes?.facility, attributes?.options)) fordWaits().add(chainageM);
       pipeEditor.addAtChainage(chainageM);
     },
     updatePipeFacility(fromChainageM, toChainageM, attributes) {
+      // 옮겼으면 정수 m · 속성 열쇠도 그 자리로(234-1) — 값만 고친 옛 소수 관은 제자리
+      if (Math.abs(toChainageM - fromChainageM) > 0.005)
+        toChainageM = snapStructureStation(toChainageM);
       // ⚠ 통째로 갈아 끼우지 않음 — 폼이 모르는 칸(집계표로 적은 기초 등)을 지키려 이어 붙임.
       const previous = facilityStore.get(fromChainageM);
       facilityStore.set(fromChainageM, null);
       facilityStore.set(toChainageM, mergeFacilityOptions(previous, attributes));
-      if (fordWaits.delete(fromChainageM)) fordWaits.add(toChainageM);
+      if (fordWaits().delete(fromChainageM)) fordWaits().add(toChainageM);
       if (Math.abs(fromChainageM - toChainageM) > 0.005) {
         // 기준점이 옮겨졌다 — 관을 이동시키면 onCommit이 재계산을 돌리고,
         // attach가 새 위치로 시설 정보를 승계한다.
         const index = pipeEditor
           .pipes()
-          .findIndex((pipe) => Math.abs(pipe.chainage_m - fromChainageM) < 0.51);
+          .findIndex((pipe) => Math.abs(pipe.chainage_m - fromChainageM) < PIPE_MATCH_M);
+        followMovedPipe(projectId, fromChainageM, toChainageM); // 고름 유지(322-3)
         if (index >= 0) pipeEditor.moveTo(index, toChainageM);
         else void analyze();
       } else {
@@ -630,21 +651,23 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
     removePipe(chainageM) {
       const index = pipeEditor
         .pipes()
-        .findIndex((pipe) => Math.abs(pipe.chainage_m - chainageM) < 0.51);
+        .findIndex((pipe) => Math.abs(pipe.chainage_m - chainageM) < PIPE_MATCH_M);
       if (index < 0) return;
       pipeEditor.select(index);
       pipeEditor.deleteSelected();
     },
-    selectPipeAtChainage(chainageM) {
+    selectPipeAtChainage(chainageM, notify = true) {
       const index =
         chainageM === null
           ? null
-          : pipeEditor.pipes().findIndex((pipe) => Math.abs(pipe.chainage_m - chainageM) < 0.51);
+          : pipeEditor
+              .pipes()
+              .findIndex((pipe) => Math.abs(pipe.chainage_m - chainageM) < PIPE_MATCH_M);
       const next = index === -1 ? null : index;
       if (pipeEditor.selected() === next) return;
       // select()는 onChange를 울리지 않는다 — 폼·유역·재그리기를 직접 맞춘다.
       pipeEditor.select(next);
-      syncPipeSelection();
+      syncPipeSelection(notify);
       scheduleDraw();
     },
     async savePipes() {
@@ -667,7 +690,7 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
     dispose() {
       loadSequence += 1;
       if (frameHandle) {
-        window.cancelAnimationFrame(frameHandle);
+        frameView.cancelAnimationFrame(frameHandle);
         frameHandle = 0;
       }
       resizeObserver.disconnect();

B05_Profile/B05_Profile_UI_Drainage_Panel_Types.ts

@@ -45,7 +45,8 @@ export interface DrainagePanel {
   selectBasinByChainage: (chainageM: number | null) => void;
   /** 밖(리스트·그래프·3D)에서 관을 고른다 — 마커 선택·유역 강조를 맞춘다.
    *  이미 같으면 무시(2026-08-17 전역 선택 동기화). */
-  selectPipeAtChainage: (chainageM: number | null) => void;
+  /** notify 거짓 = 고름 한 칸에서 파생해 칠하기만(밖으로 안 알림 · 재계산 뒤 다시 얹음 · 233-3). */
+  selectPipeAtChainage: (chainageM: number | null, notify?: boolean) => void;
   /** 측점 선택 마킹 — 계획선 위 해당 누가거리에 표식을 그린다(null이면 지움). */
   markStation: (chainageM: number | null) => void;
   /** 구간형 구조물이 놓인 자리 — 계획선 위에 띠로 얹는다(계획서 3-6).

B05_Profile/B05_Profile_UI_Drainage_Parts.ts

@@ -9,6 +9,7 @@
 import { stateKey } from "../A00_Common/b_page_state";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
 import { themeColor } from "@ui/ui_template_palette";
+import { showToast } from "@ui/ui_template_elements";
 import { DRAINAGE_SHEET_LAYERS, fetchCachedSheetLayer } from "../A00_Common/b_asset_cache";
 import { fetchVWorldMeta, type VWorldMeta } from "../B04_PreProcess/B04_PreProcess_Api_Fetch";
 import {
@@ -21,6 +22,7 @@ import { normalizeStrength, rampColor } from "../B04_PreProcess/B04_PreProcess_U
 import type { MapContextMenu, MapContextMenuItem } from "@ui/ui_template_context_menu";
 import type { DetailBasin } from "../B04_PreProcess/B04_PreProcess_Api_Fetch";
 import type { PipeEditor, PipePoint } from "./B05_Profile_UI_Drainage_Pipes";
+import { PIPE_MATCH_M } from "../A00_Common/design/design_selection";
 
 function L(key: keyof typeof ui_locales): string {
   return ui_locales[key][currentLanguageIndex];
@@ -153,7 +155,7 @@ export function renderBasinRows(
       .replace("{relief}", basin.relief_m.toFixed(1))
       .replace("{flow}", String(Math.round(basin.flow_length_m)))
       .replace("{pipe}", pipe);
-    row.title = L("B05_Drainage_Basin_Chainage").replace("{chainage}", basin.chainage_m.toFixed(1));
+    row.title = L("B05_Drainage_Basin_Chainage").replace("{chainage}", basin.chainage_m.toFixed(0)); // 정수 m(167)
     // 산출 근거(도달시간·강우강도·설계유량)는 툴팁 둘째 줄로 붙인다 — 행이 길어지지 않게.
     if (basin.tc_minutes != null && basin.design_flow_m3s != null) {
       row.title +=
@@ -352,7 +354,7 @@ export function reconcilePipes(
     return null;
   }
   return next.map((chainage) => {
-    const matched = before.find((pipe) => Math.abs(pipe.chainage_m - chainage) < 0.51);
+    const matched = before.find((pipe) => Math.abs(pipe.chainage_m - chainage) < PIPE_MATCH_M);
     return { chainage_m: chainage, reason: matched?.reason ?? "confirmed" };
   });
 }
@@ -514,9 +516,16 @@ export function createProgressReporter(progress: {
   };
 }
 
+/** 세부유역 요청 실패 — 지도 칸 문구를 돌려주고 토스트 한 줄(뒤에서 다시 나눔이 조용히 안 끝나게 · 298-1). */
+export function analyzeFailed(error: unknown, fallback: string): string {
+  const text = error instanceof Error ? error.message : fallback;
+  showToast(text === fallback ? text : `${fallback} ${text}`, "error");
+  return text;
+}
+
 /** 배관 마커 색 — 같은 누가거리 유역의 파스텔색(불투명). 유역이 없으면 회색. */
 export function pipeMarkerColor(basins: ReadonlyArray<DetailBasin>, chainageM: number): string {
-  const basin = basins.find((item) => Math.abs(item.chainage_m - chainageM) < 0.51);
+  const basin = basins.find((item) => Math.abs(item.chainage_m - chainageM) < PIPE_MATCH_M);
   if (!basin) return themeColor("--map-pipe-orphan", "#e5e7eb");
   return basinColor(basin.index).replace(/0\.45\)$/, "1)");
 }
@@ -527,7 +536,7 @@ export function basinIndexOfPipe(
   pipe: { chainage_m: number } | null,
 ): number | null {
   if (!pipe) return null;
-  const basin = basins.find((item) => Math.abs(item.chainage_m - pipe.chainage_m) < 0.51);
+  const basin = basins.find((item) => Math.abs(item.chainage_m - pipe.chainage_m) < PIPE_MATCH_M);
   return basin ? basin.index : null;
 }