diff --git a/A00_Common/b_page_state.ts b/A00_Common/b_page_state.ts
index b00cea81..3482913b 100644
--- a/A00_Common/b_page_state.ts
+++ b/A00_Common/b_page_state.ts
@@ -110,6 +110,8 @@ export const STATE_REGISTRY = {
     scope: "project",
     legacy: (p) => `aislo:structure-pick:${p}`,
   },
+  /** 설계 가게(`design/design_store`)의 고른 측점 · 구조물 — `{chainageM, structureId}`. */
+  selection: { bucket: "draft", scope: "project" },
   /** 배수관·암거 조정창에서 예약한 옵션 값. */
   culvertopt: { bucket: "draft", scope: "route", legacy: (p, r) => `b06:culvertopt:${p}:${r}` },
   /** 배수관 이동(측점 옮김) 예약. */
diff --git a/A00_Common/design/design_dock.ts b/A00_Common/design/design_dock.ts
new file mode 100644
index 00000000..cf773b57
--- /dev/null
+++ b/A00_Common/design/design_dock.ts
@@ -0,0 +1,127 @@
+/* =============================================================================
+ * design_dock.ts
+ * B05 · B06 한 페이지 두 보기의 **좌측 패널 맨 아래 고정 영역**(계획서 24-1 · 24-2b).
+ *
+ * 구성 = [위에 놓을 것(구조물 목록)][구분선][단추 행]. 단추 넷은 두 보기가 **같다**:
+ * [초기화] [저장] [확정] [보기 전환](종단 보기에서는 「횡단 보기」 · 횡단 보기에서는
+ * 「종단 보기」). 누르면 무엇을 하는지는 페이지가 `DesignDockActions` 로 건넨다 — 이 파일은
+ * 단추를 만들고 켜고 끄기만 한다(저장 흐름은 `design_save.ts` 몫).
+ * ========================================================================== */
+
+import { createButton } from "@ui/ui_template_elements";
+import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
+
+/** 보기 이름 — 종단 보기(3D + 종단도) · 횡단 보기(종단도 + 횡단 카드). */
+export type DesignView = "profile" | "cross";
+
+/** 단추 하나의 동작 — `enabled` 가 거짓이면 눌리지 않고 `title` 이 까닭을 알린다. */
+export interface DesignDockAction {
+  run: () => void | Promise<void>;
+  enabled?: boolean;
+  title?: string;
+}
+
+export interface DesignDockActions {
+  reset: DesignDockAction;
+  save: DesignDockAction;
+  confirm: DesignDockAction;
+  /** [보기 전환] — 지금은 주소 이동이다(2단계에서 같은 페이지 안 전환으로 바뀜). */
+  switchView: DesignDockAction;
+}
+
+export interface DesignDock {
+  root: HTMLElement;
+  /** 단추 넷의 켬·끔·설명을 다시 준다(자료가 늦게 오는 페이지가 부름). */
+  setActions: (actions: Partial<DesignDockActions>) => void;
+  /** 보기가 바뀌면 [보기 전환] 글자가 따라 바뀐다. */
+  setView: (view: DesignView) => void;
+}
+
+function label(key: keyof typeof ui_locales): string {
+  return ui_locales[key][currentLanguageIndex];
+}
+
+/** 보기 전환 단추 글자 — 가려는 **쪽** 이름이다. */
+export function switchViewLabel(view: DesignView): string {
+  return label(view === "profile" ? "Design_Btn_ToCross" : "Design_Btn_ToProfile");
+}
+
+/**
+ * 아래 고정 영역을 만든다. `above` 는 단추 행 위에 놓을 것(구조물 목록) — 목록을 「구조물 배치」
+ * 본문에 두면 고른 구조물의 폼 길이에 밀려 화면 밖으로 나갔다(2026-08-18 사용자 지시).
+ */
+export function createDesignDock(
+  view: DesignView,
+  above: ReadonlyArray<HTMLElement>,
+  initial: DesignDockActions,
+): DesignDock {
+  let current = view;
+  let actions = { ...initial };
+
+  const root = document.createElement("div");
+  root.className = "b05-route__dock ui-sidebar-actions";
+  const divider = document.createElement("hr");
+  divider.className = "b05-structure__divider";
+  const row = document.createElement("div");
+  row.className = view === "profile" ? "b05-route__actions" : "b06-profile__actions";
+
+  const press = (name: keyof DesignDockActions) => (): void => {
+    void Promise.resolve(actions[name].run());
+  };
+  const resetButton = createButton({
+    label: label("Common_Btn_Reset"),
+    variant: "danger",
+    onClick: press("reset"),
+  });
+  const saveButton = createButton({
+    label: label("B06_Profile_Btn_Save"),
+    variant: "ghost",
+    onClick: press("save"),
+  });
+  const confirmButton = createButton({
+    label: label("B06_Profile_Btn_Confirm"),
+    variant: "filled",
+    onClick: press("confirm"),
+  });
+  const switchButton = createButton({
+    label: switchViewLabel(view),
+    variant: "ghost",
+    onClick: press("switchView"),
+  });
+  resetButton.dataset.dockAction = "reset";
+  saveButton.dataset.dockAction = "save";
+  confirmButton.dataset.dockAction = "confirm";
+  switchButton.dataset.dockAction = "switchView";
+  const buttons = {
+    reset: resetButton,
+    save: saveButton,
+    confirm: confirmButton,
+    switchView: switchButton,
+  };
+
+  const sync = (): void => {
+    (Object.keys(buttons) as Array<keyof DesignDockActions>).forEach((name) => {
+      const action = actions[name];
+      buttons[name].disabled = action.enabled === false;
+      buttons[name].title = action.title ?? "";
+    });
+    switchButton.textContent = switchViewLabel(current);
+    row.className = current === "profile" ? "b05-route__actions" : "b06-profile__actions";
+  };
+
+  row.append(resetButton, saveButton, confirmButton, switchButton);
+  root.append(...above, divider, row);
+  sync();
+
+  return {
+    root,
+    setActions: (next) => {
+      actions = { ...actions, ...next };
+      sync();
+    },
+    setView: (next) => {
+      current = next;
+      sync();
+    },
+  };
+}
diff --git a/A00_Common/design/design_panel.ts b/A00_Common/design/design_panel.ts
new file mode 100644
index 00000000..76094010
--- /dev/null
+++ b/A00_Common/design/design_panel.ts
@@ -0,0 +1,151 @@
+/* =============================================================================
+ * design_panel.ts
+ * B05 · B06 한 페이지 두 보기의 **좌측 패널 칸 등록부**(계획서 24-1 · 24-2b).
+ *
+ * 칸(구조물 배치 · 페이지 설정 · 표준 횡단면 설정 …)은 **한 번만 정의**하고 보일 보기만 적는다.
+ * 페이지 파일은 칸도 단추도 직접 만들지 않고 `createDesignPanel(ctx, view)` 한 줄만 부른다 —
+ * 시험(`test_design_view_parity.py`)이 이를 지킨다.
+ *
+ *   registerPanelSection({ id, title, views, order, build })   ← 칸 정의(모듈이 읽힐 때 한 번)
+ *   createDesignPanel(ctx, view) → { root, setView }            ← 페이지가 부름
+ *
+ * 칸이 쓰는 페이지 쪽 부품(구조물 패널 · 입력 칸 묶음 …)은 `ctx.parts` 에서 이름으로 꺼낸다 —
+ * 칸 정의가 B05 · B06 의 구체 타입을 몰라도 되게 하려는 것이다.
+ * ========================================================================== */
+
+import { attachCollapsible } from "@ui/ui_template_collapsible";
+import {
+  createDesignDock,
+  type DesignDock,
+  type DesignDockActions,
+  type DesignView,
+} from "./design_dock";
+
+export type { DesignView } from "./design_dock";
+
+/** 좌측 패널 하나가 페이지에서 받는 것 — 값은 바뀌므로 부품은 이름으로, 단추 동작은 함수로. */
+export interface DesignPanelContext {
+  projectId: string | null;
+  /** 이름 → 페이지가 만든 부품. 칸 정의가 `part()` 로 꺼낸다. */
+  parts: Record<string, unknown>;
+  /** 아래 단추 넷의 동작 — 페이지가 채운다(저장 흐름은 `design_save`). */
+  dock: DesignDockActions;
+}
+
+/** 칸 정의가 돌려주는 것 — 칸 뿌리 하나, 그리고 (있으면) 아래 고정 영역 위에 얹을 것. */
+export type PanelSectionBuild = HTMLElement | { root: HTMLElement; dock?: HTMLElement };
+
+export interface PanelSectionDef {
+  id: string;
+  title: string;
+  /** 이 칸이 보일 보기 — 둘 다 적으면 한 정의로 두 보기(구조물 배치). */
+  views: ReadonlyArray<DesignView>;
+  /** 칸 차례 — 작을수록 위. */
+  order: number;
+  build: (ctx: DesignPanelContext, view: DesignView) => PanelSectionBuild;
+}
+
+const registry = new Map<string, PanelSectionDef>();
+
+/** 칸 정의를 등록한다. 같은 id 는 덮어쓴다(같은 모듈이 다시 읽혀도 한 벌). */
+export function registerPanelSection(def: PanelSectionDef): void {
+  registry.set(def.id, def);
+}
+
+/** 그 보기에 보일 칸 정의 — 차례대로. 시험이 「두 보기가 같은 칸을 쓰는지」 볼 때도 쓴다. */
+export function panelSectionsFor(view: DesignView): PanelSectionDef[] {
+  return [...registry.values()]
+    .filter((def) => def.views.includes(view))
+    .sort((a, b) => a.order - b.order);
+}
+
+/** 칸이 부품을 이름으로 꺼낸다 — 페이지가 안 건넸으면 바로 알리도록 던진다. */
+export function part<T>(ctx: DesignPanelContext, name: string): T {
+  const found = ctx.parts[name];
+  if (found === undefined)
+    throw new Error(`좌측 패널 부품 「${name}」 을 페이지가 건네지 않았습니다.`);
+  return found as T;
+}
+
+/**
+ * 칸 틀 — 접는 제목 + 본문. 두 보기가 **다른 클래스**를 쓰던 것(`b05-route__panel-section` ·
+ * `b06-profile__group`)을 그대로 살린다(2단계에서 한 벌로 합침). 종단 보기 본문은 별도 div,
+ * 횡단 보기는 칸 뿌리에 바로 붙인다.
+ */
+export function createSectionFrame(
+  view: DesignView,
+  title: string,
+  collapsed = false,
+): { root: HTMLElement; body: HTMLElement } {
+  const root = document.createElement("section");
+  const heading = document.createElement("h3");
+  heading.textContent = title;
+  if (view === "profile") {
+    // ui-sidebar-section: 사이드 컨테이너 공통 외곽선(진하게, 2026-08-05 사용자 지시).
+    // 접힘 초기값만 여기서 준다 — 펼치기·접기 토글은 ui_template_collapsible 전역 몫.
+    root.className = `b05-route__panel-section ui-collapsible ui-sidebar-section${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" : ""}`;
+  heading.className = "b06-profile__group-legend ui-collapsible__title";
+  root.append(heading);
+  return { root, body: root };
+}
+
+export interface DesignPanel {
+  root: HTMLElement;
+  /** 아래 고정 영역 — 단추 켬·끔을 페이지가 다시 줄 때 쓴다. */
+  dock: DesignDock;
+  /** 보기가 바뀌면 그 보기에 없는 칸은 숨기고 있는 칸은 (처음이면 만들어) 보인다. */
+  setView: (view: DesignView) => void;
+}
+
+/** 좌측 패널 — 그 보기의 칸을 차례대로 세우고 아래 고정 영역을 붙인다. */
+export function createDesignPanel(ctx: DesignPanelContext, view: DesignView): DesignPanel {
+  const root = document.createElement("div");
+  root.className = view === "profile" ? "b05-route__panel" : "b06-profile__form";
+  const built = new Map<string, HTMLElement>();
+  const dockParts: HTMLElement[] = [];
+  const dock = createDesignDock(view, dockParts, ctx.dock);
+
+  const show = (target: DesignView): void => {
+    const wanted = new Set(panelSectionsFor(target).map((def) => def.id));
+    for (const def of panelSectionsFor(target)) {
+      if (built.has(def.id)) continue;
+      const made = def.build(ctx, target);
+      const sectionRoot = "root" in made ? made.root : made;
+      if ("root" in made && made.dock) dock.root.prepend(made.dock);
+      built.set(def.id, sectionRoot);
+      root.insertBefore(sectionRoot, dock.root);
+    }
+    // 차례를 정의 순서로 다시 맞춘다 — 늦게 만들어진 칸이 맨 아래에 남지 않게.
+    for (const def of panelSectionsFor(target)) {
+      const element = built.get(def.id);
+      if (element) root.insertBefore(element, dock.root);
+    }
+    built.forEach((element, id) => {
+      // 칸이 스스로 숨긴 것(선택 포인트)은 건드리지 않고, 보기 밖 칸만 가리고 되살린다.
+      element.style.display = wanted.has(id) ? "" : "none";
+    });
+  };
+
+  root.append(dock.root);
+  show(view);
+  // 컨테이너 제목 행 전체 클릭 시 본문을 접거나 편다(공용 collapsible). 내부 details 등 별도
+  // 접힘 항목은 손대지 않는다.
+  attachCollapsible(root);
+
+  return {
+    root,
+    dock,
+    setView: (next) => {
+      dock.setView(next);
+      root.className = next === "profile" ? "b05-route__panel" : "b06-profile__form";
+      show(next);
+    },
+  };
+}
diff --git a/A00_Common/design/design_save.ts b/A00_Common/design/design_save.ts
new file mode 100644
index 00000000..0dbbaa72
--- /dev/null
+++ b/A00_Common/design/design_save.ts
@@ -0,0 +1,145 @@
+/* =============================================================================
+ * A00_Common/design/design_save.ts
+ * B05 · B06 **저장 한 줄기**(계획서 24-1) — [저장] · [확정]이 어느 보기에서 눌려도 같은 차례.
+ *
+ *   관 → 구조물 → 계획고 → 암거 옵션 → 오르막(상단측) → 횡단
+ *
+ * 차례는 여기 한 곳에만 둔다. 보기마다 다른 것은 **화면이 쥔 값으로 한 번 더 맞추는 일**
+ * (B05 배수유역도 목록 · 구조물 목록 새로 받기 · 종단 패널 다시 그리기)과 횡단 저장 본문뿐이라,
+ * 그 몫만 `steps` · `cross` 로 받는다. 서버 라우트는 그대로다.
+ *
+ * ⚠ 차례를 바꾸면 결과가 갈린다 — 관 목록은 스냅샷이라 구간값(암거 옵션)보다 먼저, 상단측은
+ *   횡단 patch 보다 먼저 나가야 사용자 수정이 맨 위에 얹힌다(2026-09-06 · 09-12).
+ * 영구저장은 여기서만 한다(CLAUDE.md 5장 — 자동저장 없음).
+ * ========================================================================== */
+
+import { hideLoadingOverlay, showLoadingOverlay, showToast } from "@ui/ui_template_elements";
+import { flushPendingPipes } from "../../B05_Profile/B05_Profile_Api_Pipes_Draft";
+import { flushPendingStructures } from "../../B05_Profile/B05_Profile_Api_Structures";
+import {
+  flushUphillOverrides,
+  saveProfileAlignment,
+} from "../../B05_Profile/B05_Profile_Api_Fetch";
+import {
+  markAlignmentSaved,
+  pendingAlignment,
+} from "../../B05_Profile/B05_Profile_UI_Profile_Edit";
+import { flushCulvertOptions } from "../../B06_Section/B06_Section_Api_Culvert_Options";
+import { stateKey } from "../b_page_state";
+
+/** 저장 차례 — 이 순서 그대로 돈다. */
+export const DESIGN_SAVE_ORDER = [
+  "pipes",
+  "structures",
+  "alignment",
+  "culvertOptions",
+  "uphill",
+  "cross",
+] as const;
+
+export type DesignSaveStep = (typeof DESIGN_SAVE_ORDER)[number];
+
+export interface DesignSaveContext {
+  projectId: string;
+  routeId: () => number | null;
+  /** 저장 앞 준비 — 면적을 모으기 전 전 측점 재계산(B06). */
+  prepare?: () => Promise<void>;
+  /**
+   * 차례마다 **기본 창구 대신** 도는 일. 없으면 기본 창구(세션 초안 → 정본)가 돈다.
+   * `pipes` 만 예외 — 기본(세션 초안)이 먼저 나가고 그 뒤에 돈다(화면 목록으로 한 번 더 맞춤).
+   */
+  steps?: Partial<Record<Exclude<DesignSaveStep, "cross">, () => Promise<void>>>;
+  /** 횡단 — 보기마다 본문이 다르다. `confirm` 이면 단계를 닫는 길로. */
+  cross: (confirm: boolean) => Promise<void>;
+  /** 모두 나간 뒤 — 캐시 비우기 · 화면 다시 읽기 · 알림 · 다음 단계. */
+  done?: (confirm: boolean) => Promise<void> | void;
+  /** 멈춘 저장을 알린다. */
+  failed: (error: unknown, confirm: boolean) => void;
+}
+
+/** 실패해도 저장을 멈추지 않는 창구 — 알리고 넘어간다(초안은 세션에 남아 다시 나갈 수 있다). */
+function reportOnly(label: string): (error: unknown) => void {
+  return (error) => {
+    const detail = error instanceof Error ? ` ${error.message}` : "";
+    showToast(`${label} 저장에 실패했습니다.${detail}`, "error");
+  };
+}
+
+/** 계획고 초안(가게 하나)을 종단 정본에 쓴다. 없으면 아무 일도 하지 않는다. */
+async function flushAlignmentDraft(projectId: string, routeId: number): Promise<void> {
+  const draft = pendingAlignment(routeId);
+  if (!draft) return;
+  await saveProfileAlignment(projectId, routeId, draft);
+  markAlignmentSaved(routeId);
+}
+
+/** 실패해도 다음 차례로 넘어가는 창구와 그 이름(보기가 준 일에도 같이 씌운다). */
+const TOLERANT: Partial<Record<DesignSaveStep, string>> = {
+  pipes: "배수관",
+  structures: "구조물",
+  alignment: "계획선",
+};
+
+/** 차례마다 기본 창구. 암거 옵션 · 상단측은 조용히 넘어간다(다음 [저장]에서 다시 나감). */
+function defaultStep(
+  step: Exclude<DesignSaveStep, "cross">,
+  projectId: string,
+  routeId: number,
+): () => Promise<void> {
+  switch (step) {
+    case "pipes":
+      return () => flushPendingPipes(projectId);
+    case "structures":
+      return () => flushPendingStructures(projectId);
+    case "alignment":
+      return () => flushAlignmentDraft(projectId, routeId);
+    case "culvertOptions":
+      return () =>
+        flushCulvertOptions(projectId, stateKey("culvertopt", projectId, routeId)).catch(
+          () => undefined,
+        );
+    case "uphill":
+      return () => flushUphillOverrides(projectId).catch(() => undefined);
+  }
+}
+
+/**
+ * [저장] · [확정] — 세션에 쌓인 조작을 정해진 차례로 정본에 보낸다.
+ * 노선이 없으면 아무 일도 하지 않고 false. 끝까지 나가면 true.
+ */
+export async function saveDesign(
+  ctx: DesignSaveContext,
+  options: { confirm?: boolean } = {},
+): Promise<boolean> {
+  const confirm = options.confirm ?? false;
+  const routeId = ctx.routeId();
+  if (routeId === null) return false;
+  showLoadingOverlay();
+  try {
+    await ctx.prepare?.();
+    for (const step of DESIGN_SAVE_ORDER) {
+      if (step === "cross") {
+        await ctx.cross(confirm);
+        continue;
+      }
+      const own = ctx.steps?.[step];
+      const base = defaultStep(step, ctx.projectId, routeId);
+      const run =
+        step === "pipes"
+          ? async () => {
+              await base();
+              await own?.();
+            }
+          : (own ?? base);
+      const label = TOLERANT[step];
+      await (label ? run().catch(reportOnly(label)) : run());
+    }
+    await ctx.done?.(confirm);
+    return true;
+  } catch (error) {
+    ctx.failed(error, confirm);
+    return false;
+  } finally {
+    hideLoadingOverlay();
+  }
+}
diff --git a/A00_Common/design/design_selection.ts b/A00_Common/design/design_selection.ts
new file mode 100644
index 00000000..43f23a77
--- /dev/null
+++ b/A00_Common/design/design_selection.ts
@@ -0,0 +1,155 @@
+/* =============================================================================
+ * A00_Common/design/design_selection.ts
+ * 측점 · 구조물 고름 **한 곳** (PLAN 24-2d).
+ *
+ * 24-1 약속의 `design_store` 「selection({chainageM, structureId})」 키 자리다. 그 모듈이
+ * 서면 이 파일의 `readSelection` · `selectDesign` · `subscribeSelection` 세 함수를 그쪽
+ * `get` · `set` · `subscribe("selection")` 으로 잇는다 — 부르는 쪽 코드는 바뀌지 않는다.
+ *
+ * 값은 등록표 키 `structure-pick`(② 설계 초안 · 페이지를 오가도 남음)에 실린다.
+ * 어느 화면(3D · 종단 알약 · 목록 · 횡단 카드)에서 골라도 같은 값이 적히고, 다른 쪽은
+ * 이 값을 읽어 따라간다. 관 · 구조물을 찾는 거리 `PIPE_MATCH_M` 도 여기 한 값뿐이다.
+ * ========================================================================== */
+
+import { readState, writeState } from "../b_page_state";
+
+/** 관 · 구조물 찾는 거리(m) — 관은 계획선에 스냅돼 측점과 살짝 어긋난다. 이 값이 유일하다. */
+export const PIPE_MATCH_M = 0.51;
+
+export interface DesignSelection {
+  chainageM: number | null;
+  structureId: string | null;
+}
+
+export const NO_SELECTION: DesignSelection = { chainageM: null, structureId: null };
+
+/** 두 누가거리가 같은 자리인가. */
+export function isNear(a: number, b: number): boolean {
+  return Math.abs(a - b) < PIPE_MATCH_M;
+}
+
+/** 선택을 풀 때 필요한 구조물의 최소 모양 — B05 `StructureInstance` 가 그대로 맞는다. */
+export interface SelectableStructure {
+  structure_id: string;
+  chainage_m?: number | null;
+  start_m?: number | null;
+  end_m?: number | null;
+}
+
+/** 풀린 선택 — 관이면 그 관의 누가거리, 아니면 구조물 id. 둘 다 없으면 고를 항목이 없다. */
+export interface ResolvedSelection {
+  pipeChainageM: number | null;
+  structureId: string | null;
+}
+
+/** 이 구조물이 그 측점을 덮는가 — 점형은 기준점 근처, 구간형은 시작~종료 안(양끝 여유 포함). */
+export function coversChainage(structure: SelectableStructure, chainageM: number): boolean {
+  const anchor = structure.chainage_m ?? structure.start_m;
+  const start = structure.start_m ?? anchor;
+  const end = structure.end_m ?? anchor;
+  if (start == null || end == null) return false;
+  return (
+    chainageM >= Math.min(start, end) - PIPE_MATCH_M &&
+    chainageM <= Math.max(start, end) + PIPE_MATCH_M
+  );
+}
+
+/**
+ * 선택 값을 폼이 열 항목으로 푼다 — 어느 화면에서 골랐든 **같은 순서 · 같은 거리**다.
+ * ① 구조물 id 가 있고 목록에 있으면 그 구조물 ② 측점 근처 관(계곡 통과 시설이 먼저 —
+ * 같은 측점에 구조물이 겹쳐도 횡단도에 그려지는 것은 관이다) ③ 측점을 덮는 구조물.
+ */
+export function resolveSelection(
+  selection: DesignSelection,
+  pipes: ReadonlyArray<{ chainage_m: number }>,
+  structures: ReadonlyArray<SelectableStructure>,
+): ResolvedSelection {
+  if (selection.structureId) {
+    const byId = structures.find((entry) => entry.structure_id === selection.structureId);
+    if (byId) return { pipeChainageM: null, structureId: byId.structure_id };
+  }
+  const chainageM = selection.chainageM;
+  if (chainageM === null) return { pipeChainageM: null, structureId: null };
+  const pipe = pipes.find((entry) => isNear(entry.chainage_m, chainageM));
+  if (pipe) return { pipeChainageM: pipe.chainage_m, structureId: null };
+  const hit = structures.find((entry) => coversChainage(entry, chainageM));
+  return { pipeChainageM: null, structureId: hit?.structure_id ?? null };
+}
+
+/* ── 세션 값 + 알림 ─────────────────────────────────────────────────────── */
+
+interface Stored {
+  at?: unknown;
+  key?: unknown;
+  sid?: unknown;
+}
+
+/** 세션에 남은 고름 — 없으면 null. `key` 는 횡단도가 부재를 부르는 이름(조정창 여는 데 씀). */
+export function readSelection(
+  projectId: string | null,
+): (DesignSelection & { partKey?: string }) | null {
+  if (!projectId) return null;
+  try {
+    const value = readState<Stored>("structure-pick", projectId);
+    if (!value || typeof value.at !== "number" || !Number.isFinite(value.at)) return null;
+    return {
+      chainageM: value.at,
+      structureId: typeof value.sid === "string" ? value.sid : null,
+      partKey: typeof value.key === "string" ? value.key : undefined,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export type SelectionListener = (selection: DesignSelection, from: string | undefined) => void;
+
+const listeners = new Map<string, Set<SelectionListener>>();
+let dispatching = false;
+
+/** 고름이 바뀔 때 부른다. 돌려주는 함수로 구독을 끊는다. */
+export function subscribeSelection(projectId: string | null, fn: SelectionListener): () => void {
+  if (!projectId) return () => undefined;
+  let set = listeners.get(projectId);
+  if (!set) listeners.set(projectId, (set = new Set()));
+  set.add(fn);
+  return () => set.delete(fn);
+}
+
+/**
+ * 고름을 적고 구독자에게 알린다. `partKey` 를 안 주면 이미 적힌 부재키를 지킨다 — 3D 로
+ * 부재를 집은 직후 선택 동기화가 측점만 다시 적어도 조정창이 그대로 열려야 한다.
+ * `from` 은 낸 쪽 이름 — 구독자가 제 것을 되받아 다시 그리지 않게 거른다.
+ * 값이 그대로면 알리지 않고, 알림 도중 다시 낸 값은 적기만 한다(되울림 방지).
+ */
+export function selectDesign(
+  projectId: string | null,
+  selection: DesignSelection,
+  options: { partKey?: string; from?: string } = {},
+): void {
+  if (!projectId) return;
+  if (selection.chainageM === null) {
+    writeState("structure-pick", null, projectId);
+  } else {
+    const before = readSelection(projectId);
+    const same =
+      before !== null &&
+      before.chainageM === selection.chainageM &&
+      before.structureId === selection.structureId &&
+      (options.partKey === undefined || options.partKey === before.partKey);
+    if (same) return;
+    const key = options.partKey ?? before?.partKey;
+    writeState(
+      "structure-pick",
+      { at: selection.chainageM, key, sid: selection.structureId ?? undefined },
+      projectId,
+    );
+  }
+  if (dispatching) return;
+  dispatching = true;
+  try {
+    for (const fn of [...(listeners.get(projectId) ?? [])]) fn(selection, options.from);
+  } finally {
+    dispatching = false;
+  }
+}
diff --git a/A00_Common/design/design_store.ts b/A00_Common/design/design_store.ts
new file mode 100644
index 00000000..4201d84e
--- /dev/null
+++ b/A00_Common/design/design_store.ts
@@ -0,0 +1,148 @@
+/* =============================================================================
+ * A00_Common/design/design_store.ts
+ * B05 · B06 설계 상태 **한 곳**(계획서 24-1) — 두 보기가 같은 값을 같은 창구로 읽고 쓴다.
+ *
+ *   const store = useDesignStore(projectId, routeId);
+ *   store.get("pipes") · store.set("pipes", next) · store.subscribe("pipes", fn)
+ *
+ * 밑은 지금 캐시 그대로다 — 값마다 `b_page_state` 등록 키 하나(새 키는 등록부에 먼저).
+ * 가게는 값을 따로 들고 있지 않는다: 읽을 때마다 캐시를 읽고, 쓸 때 캐시에 쓴 뒤 듣는 쪽을
+ * 부른다. 그래서 가게를 거치지 않고 캐시를 고친 옛 자리가 남아 있어도 읽는 값은 갈리지 않는다
+ * (다만 그 자리는 듣는 쪽을 못 부른다 — 쓰는 길은 가게로 옮길 것).
+ *
+ * ⚠ `alignmentDraft` 만 등록부 밖 옛 키(`b05-profile-alignment-draft:{노선}`)를 감싼다 —
+ *   B05 되돌리기(`_Profile_History`)가 `b05-` 접두어 키만 사진 찍기 때문이다. 등록부 이관은
+ *   24-2c 가 되돌리기와 함께 한다(브레인 판정 9-29).
+ * ========================================================================== */
+
+import { readByKey, readState, writeByKey, writeState } from "../b_page_state";
+import type { StructureInstance } from "../../B05_Profile/B05_Profile_Api_Structures";
+import type { DetailPipeInput } from "../../B04_PreProcess/B04_PreProcess_Api_Fetch";
+import type { AlignmentEdits } from "../../B05_Profile/B05_Profile_UI_Profile_Alignment";
+import type { SectionDetailResponse } from "../../B06_Section/B06_Section_Api_Fetch";
+
+/** 한 페이지의 두 보기(계획서 24-1). */
+export type DesignView = "profile" | "cross";
+
+/** 고른 자리 — 측점 · 구조물. 둘 다 비면 고른 것이 없다. */
+export interface DesignSelection {
+  chainageM: number | null;
+  structureId: string | null;
+}
+
+/** 가게가 드는 값 — 없으면 null(= 만진 적 없음 · 저장분을 쓸 것). */
+export interface DesignStoreValues {
+  /** 미저장 구조물 목록(정본 `structures.json`). */
+  structures: StructureInstance[] | null;
+  /** 미저장 관 목록(정본 `pipe_points.json`) — 주인은 이 가게 하나다. */
+  pipes: DetailPipeInput[] | null;
+  /** 미저장 계획고 편집(▲▼ · 곡선반경). 노선이 있어야 한다. */
+  alignmentDraft: AlignmentEdits | null;
+  /** 종횡단 상세 — 세션 사본. 화면이 함께 쥐는 객체는 `B06_Section_Section_Store`. */
+  sectionDetail: SectionDetailResponse | null;
+  /** 고른 측점 · 구조물. */
+  selection: DesignSelection | null;
+}
+
+export type DesignStoreKey = keyof DesignStoreValues;
+
+export interface DesignStore {
+  get<K extends DesignStoreKey>(key: K): DesignStoreValues[K];
+  set<K extends DesignStoreKey>(key: K, value: DesignStoreValues[K]): void;
+  /** 가게로 쓸 때마다 부른다. 돌려받은 함수로 끊는다. */
+  subscribe<K extends DesignStoreKey>(
+    key: K,
+    fn: (value: DesignStoreValues[K]) => void,
+  ): () => void;
+}
+
+/** 옛 계획고 초안 키 — 위 머리 주석 ⚠ 참조. */
+export const ALIGNMENT_DRAFT_KEY_PREFIX = "b05-profile-alignment-draft";
+
+interface Slot<T> {
+  /** 듣는 쪽을 묶는 이름 — 같은 캐시 칸이면 같은 이름. 칸을 못 정하면 null. */
+  id: string | null;
+  read(): T | null;
+  write(value: T | null): void;
+}
+
+function slotOf<K extends DesignStoreKey>(
+  key: K,
+  projectId: string | null,
+  routeId: number | null,
+): Slot<DesignStoreValues[K]> {
+  type V = DesignStoreValues[K];
+  if (key === "alignmentDraft") {
+    const raw = routeId === null ? null : `${ALIGNMENT_DRAFT_KEY_PREFIX}:${routeId}`;
+    return {
+      id: raw,
+      read: () => {
+        const text = raw ? readByKey(raw) : null;
+        if (!text) return null;
+        try {
+          const parsed = JSON.parse(text) as Partial<AlignmentEdits>;
+          return {
+            station_offsets: parsed.station_offsets ?? {},
+            curve_radii: parsed.curve_radii ?? {},
+          } as V;
+        } catch {
+          return null;
+        }
+      },
+      write: (value) => {
+        if (raw) writeByKey(raw, value === null ? null : JSON.stringify(value));
+      },
+    };
+  }
+  // 등록부 이름 — 가게 이름과 캐시 이름이 다른 것만 적는다.
+  const name = (
+    {
+      structures: "structures",
+      pipes: "pipes",
+      sectionDetail: "section-detail",
+      selection: "selection",
+    } as const
+  )[key as Exclude<DesignStoreKey, "alignmentDraft">];
+  const routeScoped = name === "section-detail";
+  if (!projectId || (routeScoped && routeId === null)) {
+    return { id: null, read: () => null, write: () => undefined };
+  }
+  const scopeRoute = routeScoped ? routeId : undefined;
+  return {
+    id: `${name}:${projectId}${routeScoped ? `:${routeId}` : ""}`,
+    read: () => readState<V>(name, projectId, scopeRoute),
+    write: (value) => writeState(name, value, projectId, scopeRoute),
+  };
+}
+
+const listeners = new Map<string, Set<(value: unknown) => void>>();
+
+/**
+ * 그 프로젝트 · 노선의 가게. 부를 때마다 새로 만들어도 된다 — 값도 듣는 쪽도 가게 밖
+ * (캐시 · 모듈 표)에 있어서 같은 칸을 가리키면 같은 가게다.
+ *
+ * 노선을 모르면 `routeId = null` — 노선 칸(`alignmentDraft` · `sectionDetail`)은 비어 보이고
+ * 쓰기는 버려진다. 프로젝트를 모르면 프로젝트 칸이 그렇다.
+ */
+export function useDesignStore(projectId: string | null, routeId: number | null): DesignStore {
+  return {
+    get(key) {
+      return slotOf(key, projectId, routeId).read() as DesignStoreValues[typeof key];
+    },
+    set(key, value) {
+      const slot = slotOf(key, projectId, routeId);
+      slot.write(value);
+      if (slot.id) listeners.get(`${key}|${slot.id}`)?.forEach((fn) => fn(value));
+    },
+    subscribe(key, fn) {
+      const id = slotOf(key, projectId, routeId).id;
+      if (!id) return () => undefined;
+      const bucket = `${key}|${id}`;
+      const set = listeners.get(bucket) ?? new Set();
+      listeners.set(bucket, set);
+      const listener = fn as (value: unknown) => void;
+      set.add(listener);
+      return () => set.delete(listener);
+    },
+  };
+}
diff --git a/B05_Profile/B05_Profile_Api_Pipes_Draft.ts b/B05_Profile/B05_Profile_Api_Pipes_Draft.ts
index 03c7fe96..acc0eb4d 100644
--- a/B05_Profile/B05_Profile_Api_Pipes_Draft.ts
+++ b/B05_Profile/B05_Profile_Api_Pipes_Draft.ts
@@ -7,9 +7,12 @@
  * 하나뿐이었다). 다른 조작값과 같은 규칙으로 세션에 쌓고 저장 앞단에서 함께 내보낸다.
  *
  * 자동저장은 하지 않는다(CLAUDE.md 5장).
+ *
+ * 관 목록의 주인은 설계 가게(`design_store` 의 `pipes`) 하나다(계획서 24-2a) — B05 배수유역도 ·
+ * B06 구조물 목록 모두 이 창구로 읽고 쓴다.
  * ========================================================================== */
 
-import { readState, writeState } from "../A00_Common/b_page_state";
+import { useDesignStore } from "../A00_Common/design/design_store";
 import { saveDetailPipePoints } from "../B04_PreProcess/B04_PreProcess_Api_Fetch";
 import type { DetailPipeInput } from "../B04_PreProcess/B04_PreProcess_Api_Fetch";
 
@@ -17,11 +20,11 @@ import type { DetailPipeInput } from "../B04_PreProcess/B04_PreProcess_Api_Fetch
 export type PendingPipes = DetailPipeInput[];
 
 export function readPendingPipes(projectId: string): PendingPipes | null {
-  return readState<PendingPipes>("pipes", projectId);
+  return useDesignStore(projectId, null).get("pipes");
 }
 
 export function writePendingPipes(projectId: string, next: PendingPipes | null): void {
-  writeState("pipes", next, projectId);
+  useDesignStore(projectId, null).set("pipes", next);
 }
 
 /** 초안이 있으면 정본에 쓰고 비운다. 없으면 아무 일도 하지 않는다. */
diff --git a/B05_Profile/B05_Profile_Engine_RouteInitial.py b/B05_Profile/B05_Profile_Engine_RouteInitial.py
index 491b5674..55570d39 100644
--- a/B05_Profile/B05_Profile_Engine_RouteInitial.py
+++ b/B05_Profile/B05_Profile_Engine_RouteInitial.py
@@ -8,8 +8,9 @@
                 제약 탐색은 하지 않고, 넘은 곳은 `metrics.violations` 에 뜬다.
   · earthwork — 후보 중 절 · 성토 합(`cut_m3 + fill_m3`) 최소.
   · gentle    — 후보 중 최대 종단기울기 최소(같으면 평균 최소).
-  · weighted  — 후보 중 예상노선 이격 · 절성토 · 기울기(최대 + 평균) 세 값을 후보 범위로
-                0~1 정규화해 비중(합 100)으로 더한 값 최소.
+  · weighted  — 후보 중 예상노선 이격 · 절성토 · 기울기(최대, 같으면 평균) 세 값을 후보
+                범위로 0~1 정규화해 비중(합 100)으로 더한 값 최소. 끝값은 그 갈래와 같은 선 —
+                토공 100 = 토공 최소 · 기울기 100 = 기울기 순한 · 예상 100 = 추적 선 그대로(23-3e).
 
 후보 = 목표 비중(토공 · 기울기 · 이격 · 기본 비중)을 바꿔 가며 격자 탐색(`..._Search`)한 노선들.
 갈래는 **비교값(화면에 보이는 값)으로 고른다** — 탐색 목표(4 m 링크 기울기 · 옆경사)는 비교값
@@ -230,12 +231,16 @@ def generate_initial_route(
             follow=follow,
         )
 
-    bound = None
-    if mode == "follow":
+    def follow_line() -> tuple[Any, dict[str, Any]]:
         # 예상노선 추적 = 전처리 초기값(`planned_route_initial.csv`)과 같은 규칙 · 같은 입력 →
         # 같은 선(`_write_planned_polyline` 기본값). 제약은 따지지 않고 넘은 곳만 목록에 뜸.
         outline = build_planned_polyline(expected, min_radius_m=min_radius_m)
-        metrics = measure(outline, None, follow=True)
+        return outline, measure(outline, None, follow=True)
+
+    bound = None
+    # 비중 예상 100 = 예상노선 추적 그 선(PLAN 23-3e) — 사이 비중은 제약 지킨 후보에서만 고름
+    if mode == "follow" or (mode == "weighted" and used["earthwork"] == used["grade"] == 0):
+        outline, metrics = follow_line()
     else:
         key = _pool_key(
             expected, terrain, streams, max_grade, min_radius_m, stream_offset, grade_smooth
@@ -354,7 +359,8 @@ def _pick(
         return metrics["cut_m3"] + metrics["fill_m3"]
 
     def grade(metrics: dict[str, Any]) -> float:
-        return metrics["max_grade_pct"] + metrics["avg_grade_pct"]
+        # 최대 먼저 · 평균은 같을 때만(기울기 순한과 같은 순서 — 값은 0.01 단위라 평균 몫 < 0.01)
+        return metrics["max_grade_pct"] + 1e-4 * metrics["avg_grade_pct"]
 
     def offset(metrics: dict[str, Any]) -> float:
         return metrics["offset_avg_m"]
diff --git a/B05_Profile/B05_Profile_UI_Drainage_Panel.ts b/B05_Profile/B05_Profile_UI_Drainage_Panel.ts
index e48a0979..82883c9a 100644
--- a/B05_Profile/B05_Profile_UI_Drainage_Panel.ts
+++ b/B05_Profile/B05_Profile_UI_Drainage_Panel.ts
@@ -32,6 +32,7 @@ import { createPipeEditor } from "./B05_Profile_UI_Drainage_Pipes";
 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 { createDrainageChrome } from "./B05_Profile_UI_Drainage_Chrome";
 import { bindDrainageInteractions } from "./B05_Profile_UI_Drainage_Interact";
 import type { RouteSpanBand } from "./B05_Profile_UI_Drainage_Spans";
@@ -355,31 +356,7 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
     summaryText(summary, pipeEditor.pipes().length, basins.length, zSource);
     // 목록 통지가 선택 통지보다 **먼저** 가야 한다 — 사이드 폼은 이 목록에서 관을
     // 찾아 편집 화면을 채우므로, 순서가 뒤집히면 새로 넣은 관의 폼이 열리지 않는다.
-    callbacks.onPipesChanged?.(
-      // 관마다 담당 유역의 배수 유효직경을 붙인다(±0.5m 매칭). 유역 없는 관은 null.
-      // 세월교 검토 유역(bridge_required)도 null — 관 규격을 최대치로 올려 봐야 무의미하고,
-      // 그 지점은 세월교·물넘이로 별도 설계한다(임도설치규정 제12조).
-      // 시설 종류·구간·부속 옵션·출처(source)도 함께 — 통합 목록·사이드 폼이
-      // 이 목록만으로 편집 화면을 채운다(2026-08-17 단일 폼 통합).
-      pipeEditor.pipes().map((pipe) => {
-        const chainage = Math.round(pipe.chainage_m * 100) / 100;
-        const basin = basins.find((entry) => Math.abs(entry.chainage_m - chainage) < 0.51);
-        const attributes = facilityStore.get(chainage);
-        return {
-          chainage_m: chainage,
-          effective_diameter_mm:
-            basin && !basin.bridge_required ? (basin.pipe_diameter_mm ?? null) : null,
-          // 설계유량은 세월교 검토 유역에도 붙인다 — 물넘이·세월교 단면이 이 값에서 나온다.
-          design_flow_m3s: basin?.design_flow_m3s ?? null,
-          facility: attributes?.facility ?? "pipe",
-          start_m: attributes?.start_m,
-          end_m: attributes?.end_m,
-          source: (pipe.reason || "user") as PipeSource,
-          options: attributes?.options,
-          summary_item: attributes?.summary_item,
-        };
-      }),
-    );
+    callbacks.onPipesChanged?.(buildPipeReports(pipeEditor.pipes(), basins, facilityStore));
     syncPipeSelection();
   }
 
@@ -405,18 +382,19 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
     }
   }
 
+  /** 지금 관 목록 + 시설 정보 — 저장 · 재계산 · 세션 초안 요청 몸통이 모두 이것이다. */
+  const pipeRequest = () =>
+    facilityStore.attach(
+      pipeEditor.pipes().map((pipe) => ({
+        chainage_m: pipe.chainage_m,
+        source: (pipe.reason || "user") as PipeSource,
+      })),
+    );
+
   /** 지금 화면의 관 목록을 세션 초안에 담는다 — 정본 쓰기는 [저장]·[확정] 몫이다. */
   function rememberPipes(): void {
     if (!projectId) return;
-    writePendingPipes(
-      projectId,
-      facilityStore.attach(
-        pipeEditor.pipes().map((pipe) => ({
-          chainage_m: pipe.chainage_m,
-          source: (pipe.reason || "user") as PipeSource,
-        })),
-      ),
-    );
+    writePendingPipes(projectId, pipeRequest());
   }
 
   /** 저장된 관 지점(없으면 자동 배치)을 불러온다. 화면에 들어올 때 1회. 저장 전 조작분(세션 초안)이
@@ -436,17 +414,7 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
   /** 세부유역을 다시 나눈다. 격자 해석은 하지 않으므로 즉시 끝난다.
    *  시설 종류·구간·옵션은 계산기에서 사라지므로 요청에 되붙인다. */
   const analyze = (): Promise<void> =>
-    run(() =>
-      computeDetailBasins(
-        projectId as string,
-        facilityStore.attach(
-          pipeEditor.pipes().map((pipe) => ({
-            chainage_m: pipe.chainage_m,
-            source: (pipe.reason || "user") as PipeSource,
-          })),
-        ),
-      ),
-    );
+    run(() => computeDetailBasins(projectId as string, pipeRequest()));
 
   analyzeButton.addEventListener("click", () => void analyze());
   deleteButton.addEventListener("click", () => void pipeEditor.deleteSelected());
@@ -664,16 +632,8 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
     },
     async savePipes() {
       if (!projectId) return 0;
-      const response = await saveDetailPipePoints(
-        projectId,
-        // 시설 종류·구간·옵션까지 정본에 남긴다(계산기 왕복에서 사라지므로 되붙임).
-        facilityStore.attach(
-          pipeEditor.pipes().map((pipe) => ({
-            chainage_m: pipe.chainage_m,
-            source: (pipe.reason || "user") as PipeSource,
-          })),
-        ),
-      );
+      // 시설 종류·구간·옵션까지 정본에 남긴다(계산기 왕복에서 사라지므로 되붙임).
+      const response = await saveDetailPipePoints(projectId, pipeRequest());
       apply(response);
       scheduleDraw();
       return response.pipe_count;
diff --git a/B05_Profile/B05_Profile_UI_Drainage_Panel_Types.ts b/B05_Profile/B05_Profile_UI_Drainage_Panel_Types.ts
index ea89c715..9b8f1003 100644
--- a/B05_Profile/B05_Profile_UI_Drainage_Panel_Types.ts
+++ b/B05_Profile/B05_Profile_UI_Drainage_Panel_Types.ts
@@ -52,24 +52,25 @@ export interface DrainagePanel {
   dispose: () => void;
 }
 
+/** 관 하나의 보고 — 누가거리 + 담당 유역의 배수 유효직경(mm) + 시설 종류 · 구간 · 옵션 · 집계 항목. */
+export interface DrainagePipeReport {
+  chainage_m: number;
+  effective_diameter_mm: number | null;
+  /** 담당 유역의 설계유량(㎥/s, 100년빈도·2.0배). 물넘이·세월교 개략 단면의 입력이다. */
+  design_flow_m3s?: number | null;
+  facility: PipeFacility;
+  start_m?: number;
+  end_m?: number;
+  source?: PipeSource;
+  options?: Record<string, string | number>;
+  /** 이 관이 뜻하는 구조물 집계표 항목(21-1) — 없으면 미지정. */
+  summary_item?: SummaryItem | null;
+}
+
 export interface DrainagePanelCallbacks {
   /** 관 목록이 바뀔 때마다 누가거리 + 담당 유역의 배수 유효직경(mm) + 시설 종류를
    *  넘긴다 — 종단 구조물 라인·통합 목록 동기화 및 관경 자동 지정(D800 기본)용. */
-  onPipesChanged?: (
-    pipes: Array<{
-      chainage_m: number;
-      effective_diameter_mm: number | null;
-      /** 담당 유역의 설계유량(㎥/s, 100년빈도·2.0배). 물넘이·세월교 개략 단면의 입력이다. */
-      design_flow_m3s?: number | null;
-      facility: PipeFacility;
-      start_m?: number;
-      end_m?: number;
-      source?: PipeSource;
-      options?: Record<string, string | number>;
-      /** 이 관이 뜻하는 구조물 집계표 항목(21-1) — 없으면 미지정. */
-      summary_item?: SummaryItem | null;
-    }>,
-  ) => void;
+  onPipesChanged?: (pipes: DrainagePipeReport[]) => void;
   /** 유역을 고르거나 풀 때 그 관의 누가거리(없으면 null)를 넘긴다 — 그래프·사이드 패널 동기화용. */
   onBasinSelected?: (chainageM: number | null) => void;
   /** 관 마커 선택이 바뀔 때(클릭·해제) 누가거리를 알린다 — 유역이 없는 관도 전 화면
diff --git a/B05_Profile/B05_Profile_UI_Drainage_Report.ts b/B05_Profile/B05_Profile_UI_Drainage_Report.ts
new file mode 100644
index 00000000..a329c75b
--- /dev/null
+++ b/B05_Profile/B05_Profile_UI_Drainage_Report.ts
@@ -0,0 +1,39 @@
+/* =============================================================================
+ * B05_Profile_UI_Drainage_Report.ts
+ * 배수유역 패널이 관 목록이 바뀔 때 밖에 알리는 **관 보고**(`DrainagePipeReport`)를 만든다.
+ * `B05_Profile_UI_Drainage_Panel` 에서 떼어냄(700줄 제한) — 셈은 그대로, 상태를 안 든다.
+ * ========================================================================== */
+
+import type { DetailBasin, PipeSource } from "../B04_PreProcess/B04_PreProcess_Api_Fetch";
+import type { createFacilityStore } from "./B05_Profile_UI_Drainage_Facility";
+import type { DrainagePipeReport } from "./B05_Profile_UI_Drainage_Panel_Types";
+
+/** 관마다 담당 유역의 배수 유효직경을 붙인다(±0.5m 매칭). 유역 없는 관은 null.
+ *  세월교 검토 유역(bridge_required)도 null — 관 규격을 최대치로 올려 봐야 무의미하고,
+ *  그 지점은 세월교·물넘이로 별도 설계한다(임도설치규정 제12조).
+ *  시설 종류·구간·부속 옵션·출처(source)도 함께 — 통합 목록·사이드 폼이
+ *  이 목록만으로 편집 화면을 채운다(2026-08-17 단일 폼 통합). */
+export function buildPipeReports(
+  pipes: ReadonlyArray<{ chainage_m: number; reason?: string }>,
+  basins: ReadonlyArray<DetailBasin>,
+  facilityStore: ReturnType<typeof createFacilityStore>,
+): DrainagePipeReport[] {
+  return pipes.map((pipe) => {
+    const chainage = Math.round(pipe.chainage_m * 100) / 100;
+    const basin = basins.find((entry) => Math.abs(entry.chainage_m - chainage) < 0.51);
+    const attributes = facilityStore.get(chainage);
+    return {
+      chainage_m: chainage,
+      effective_diameter_mm:
+        basin && !basin.bridge_required ? (basin.pipe_diameter_mm ?? null) : null,
+      // 설계유량은 세월교 검토 유역에도 붙인다 — 물넘이·세월교 단면이 이 값에서 나온다.
+      design_flow_m3s: basin?.design_flow_m3s ?? null,
+      facility: attributes?.facility ?? "pipe",
+      start_m: attributes?.start_m,
+      end_m: attributes?.end_m,
+      source: (pipe.reason || "user") as PipeSource,
+      options: attributes?.options,
+      summary_item: attributes?.summary_item,
+    };
+  });
+}
diff --git a/B05_Profile/B05_Profile_UI_Drainage_Side.ts b/B05_Profile/B05_Profile_UI_Drainage_Side.ts
index d71468f0..ca78ebeb 100644
--- a/B05_Profile/B05_Profile_UI_Drainage_Side.ts
+++ b/B05_Profile/B05_Profile_UI_Drainage_Side.ts
@@ -1,11 +1,93 @@
 /* =============================================================================
  * B05_Profile_UI_Drainage_Side.ts
- * 배수유역도를 종단도 오른쪽 판(`side`)으로 끼우는 함수(계획서 24-2c · 24-2e).
- * 판 자리 약속은 `A00_Common/design/design_profile.ts` 의 `DesignSideFactory` 다.
- * 지금은 옛 종단 패널이 직접 만들던 것을 그대로 옮긴 첫 판이다.
+ * 배수유역도를 종단도 오른쪽 판(`side`)으로 끼우는 홀로 선 함수(계획서 24-2c · 24-2e).
+ * 판 자리 약속은 `A00_Common/design/design_profile.ts` 의 `DesignSideFactory` 다 —
+ * `createDrainageSide` 가 그 모양 그대로다(`(host) => 판`).
+ *
+ * 판(`createDrainagePanel`)은 종단 패널을 모른다 — 종단쪽 일은 전부 `host`
+ * (`DrainagePanelCallbacks` + projectId · view, `_Panel_Types` 약속)로 받고, 종단쪽에서 들어오는 일은
+ * 판의 창구(`setRoute` · `setIntervalSpans` · `pipeChainages` · `setPipeChainages` ·
+ * `selectPipeAtChainage` …)로만 한다.
+ *   · 관 목록이 바뀜(최소 흙덮기 경고 · 구조물 라인 · 통합 목록) = `host.onPipesChanged`
+ *   · 관 자리 읽기 · 쓰기(되돌리기) = `pipeChainages()` · `setPipeChainages()`
+ *   · 우클릭 메뉴의 구조물 종류 = `host.structureMenuItems`
+ *   · 구간 띠 · 노선 = `setIntervalSpans()` · `setRoute()`
+ * 두 보기(종단 · 횡단)에서 같은 판을 끼우고 **켜고 끈다** — 끄면 자리를 비우되 관 · 유역
+ * 상태는 그대로 살아 있다(다시 켜면 이어서 보임). 켬 · 끔을 어디에 적을지는 끼우는 쪽 몫이다.
  * ========================================================================== */
 
-import type { DesignSideFactory } from "../A00_Common/design/design_profile";
+import "./B05_Profile_UI_Style_Drainage.css"; // 홀로 서려면 판이 자기 모양을 들고 온다.
+import type { DesignSideBoard, DesignSideHost } from "../A00_Common/design/design_profile";
 import { createDrainagePanel } from "./B05_Profile_UI_Drainage_Panel";
 
-export const createDrainageSide: DesignSideFactory = (host) => createDrainagePanel(host);
+/** 종단쪽이 넘기는 이음 — 판 바깥 약속(`DrainagePanelCallbacks`)에 projectId · view 를 더한 것. */
+export type DrainageSideHost = DesignSideHost;
+
+/** 종단도 side 판 = 배수유역 판 창구 그대로 + 켜고 끔. */
+export type DrainageSideBoard = DesignSideBoard & {
+  /** 켜고 끈다. 켜면 숨겼던 사이 바뀐 크기 · 그림을 판이 스스로 다시 맞춘다. */
+  setVisible: (visible: boolean) => void;
+  isVisible: () => boolean;
+  /** 켬 · 끔이 바뀔 때마다 부른다(단추 표시 · 저장). 해제 함수를 돌려준다. */
+  onVisibleChange: (listener: (visible: boolean) => void) => () => void;
+};
+
+export interface DrainageSideOptions {
+  /** 처음 켤지(기본 켬). */
+  visible?: boolean;
+}
+
+/** `DesignSideFactory` — 종단도를 만들 때 한 번 부른다. */
+export function createDrainageSide(
+  host: DrainageSideHost,
+  options: DrainageSideOptions = {},
+): DrainageSideBoard {
+  const panel = createDrainagePanel(host);
+  const listeners = new Set<(visible: boolean) => void>();
+  let visible = true;
+
+  function setVisible(next: boolean): void {
+    if (next === visible) return;
+    visible = next;
+    panel.root.hidden = !visible;
+    listeners.forEach((listener) => listener(visible));
+  }
+  // 처음 상태는 알림 없이 맞춘다.
+  if (options.visible === false) {
+    visible = false;
+    panel.root.hidden = true;
+  }
+
+  return {
+    ...panel,
+    // 보기가 바뀌어도 판은 다시 안 만든다 — 켬 · 끔은 끼우는 쪽이 `setVisible` 로 정한다.
+    setView: () => {},
+    setVisible,
+    isVisible: () => visible,
+    onVisibleChange(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    dispose() {
+      listeners.clear();
+      panel.dispose();
+    },
+  };
+}
+
+/** 켜고 끄는 단추 — 어느 보기에서든 같은 모양 · 같은 글. 누르면 판을 뒤집는다. */
+export function createDrainageToggleButton(side: DrainageSideBoard): HTMLButtonElement {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "ui-btn ui-btn--ghost b05-drainage__toggle";
+  button.textContent = "배수유역도";
+  button.title = "배수유역도 판을 켜고 끕니다";
+  const sync = (visible: boolean): void => {
+    button.setAttribute("aria-pressed", String(visible));
+    button.classList.toggle("is-active", visible);
+  };
+  sync(side.isVisible());
+  side.onVisibleChange(sync);
+  button.addEventListener("click", () => side.setVisible(!side.isVisible()));
+  return button;
+}
diff --git a/B05_Profile/B05_Profile_UI_Page_Actions.ts b/B05_Profile/B05_Profile_UI_Page_Actions.ts
index 8b822cad..a08bab99 100644
--- a/B05_Profile/B05_Profile_UI_Page_Actions.ts
+++ b/B05_Profile/B05_Profile_UI_Page_Actions.ts
@@ -23,9 +23,7 @@ import {
   solveRoute,
   type RouteLatestResponse,
 } from "./B05_Profile_Api_Fetch";
-import { flushCulvertOptions } from "../B06_Section/B06_Section_Api_Culvert_Options";
-import { flushPendingPipes } from "./B05_Profile_Api_Pipes_Draft";
-import { stateKey } from "../A00_Common/b_page_state";
+import { saveDesign } from "../A00_Common/design/design_save";
 import {
   invalidateSectionDetail,
   saveCachedCrossPatches,
@@ -127,74 +125,68 @@ export async function solveRouteAction(ctx: PageActionContext): Promise<void> {
 }
 
 /** [임시저장] — 현재 편집을 영구저장소에 남기되 워크플로 단계·페이지는 그대로 둔다.
- *  종·횡 통합 확정은 B06 [확정]이 담당한다(2026-08-08 워크플로우 재정의). */
+ *  종·횡 통합 확정은 B06 [확정]이 담당한다(2026-08-08 워크플로우 재정의).
+ *  차례는 저장 한 줄기(`saveDesign`)가 정한다 — B06 [저장]과 같다(계획서 24-2a). */
 export async function tempSaveAction(ctx: PageActionContext): Promise<void> {
   if (!ctx.routeReady()) return;
   const latest = ctx.latest();
   const projectId = ctx.projectId;
-  // 관 매설 지점을 B04와 같은 저장소에 남긴다 — 저장 실패가 임시저장을 막지는 않는다.
-  // 세션 초안(B06 저장도 같은 창구를 쓴다)을 먼저 내보내고, 화면 목록으로 한 번 더 맞춘다.
-  await flushPendingPipes(projectId).catch(() => undefined);
-  await ctx
-    .profilePanel()
-    .drainage.savePipes()
-    .catch(() => 0);
-  showLoadingOverlay();
-  try {
-    // 종단 계획선 편집은 화면에서만 계산해 두었으므로 저장 시점에 영속화한다.
-    await ctx.profilePanel().save();
-    // 구조물도 조작분이 세션에만 있다(2026-08-29 — CLAUDE.md 5장). 실패는 자체 토스트로
-    // 알리고 세션에 남겨 두므로, 여기서 저장 전체를 멈추지 않는다.
-    await ctx.bridge().saveStructuresIfDirty();
-    // 비정규 측점·상단측 변경분까지 데이터로는 확정 저장하되, 단계 완료 전이는 하지 않는다.
-    await confirmRoute(
-      projectId,
-      {
-        filter_key: latest?.surface_params.source_filter,
-        method: latest?.surface_params.method,
-        smooth: latest?.surface_params.smooth,
-        surface_model_id: ctx.confirmedSurface()?.model_id ?? undefined,
-        irregular_stations: ctx
-          .bridge()
-          .irregularStations()
-          .map((station) => ({
-            chainage_m: station.chainage_m,
-            structure: station.structure,
-          })),
-        // 상단측(측구 방향) 사용자 변경분 — 종단 정본에 병합되어 B06이 그대로 소비한다.
-        uphill_overrides: [...ctx.uphillOverrides.entries()].map(([chainage, side]) => ({
-          chainage_m: Number(chainage),
-          side,
-        })),
+  await saveDesign({
+    projectId,
+    routeId: () => latest?.route?.id ?? null,
+    steps: {
+      // 세션 초안이 나간 뒤 화면 목록으로 한 번 더 맞춘다(시설 보관소 되붙이기 · 응답으로 화면 갱신).
+      pipes: async () => {
+        await ctx.profilePanel().drainage.savePipes();
       },
-      false,
-    );
-    // B06 조정창에서 만진 배수관 구간값도 세션에만 있다 — 함께 내보낸다
-    // (CLAUDE.md 5장: 영구저장은 [저장]·[확정]에서만). 실패해도 저장은 진행한다.
-    // 관 위치는 두 페이지가 같은 스냅샷(`pipes`)으로만 옮김 — 옛 이동 예약은 안 보냄.
-    if (latest?.route?.id != null) {
-      await flushCulvertOptions(
-        projectId,
-        stateKey("culvertopt", projectId, latest.route.id),
-      ).catch(() => undefined);
-    }
+      // 구조물 — 저장 뒤 서버 목록(새 식별자)으로 화면을 맞춘다. 실패는 자체 토스트로 알리고
+      // 세션에 남겨 두므로 저장 전체를 멈추지 않는다(2026-08-29 — CLAUDE.md 5장).
+      structures: () => ctx.bridge().saveStructuresIfDirty(),
+      // 종단 계획선 편집은 화면에서만 계산해 두었으므로 저장 시점에 영속화한다(패널도 다시 그림).
+      alignment: () => ctx.profilePanel().save(),
+      // 상단측 + 비정규 측점 — 데이터로는 확정 저장하되, 단계 완료 전이는 하지 않는다.
+      uphill: async () => {
+        await confirmRoute(
+          projectId,
+          {
+            filter_key: latest?.surface_params.source_filter,
+            method: latest?.surface_params.method,
+            smooth: latest?.surface_params.smooth,
+            surface_model_id: ctx.confirmedSurface()?.model_id ?? undefined,
+            irregular_stations: ctx
+              .bridge()
+              .irregularStations()
+              .map((station) => ({
+                chainage_m: station.chainage_m,
+                structure: station.structure,
+              })),
+            // 상단측(측구 방향) 사용자 변경분 — 종단 정본에 병합되어 B06이 그대로 소비한다.
+            uphill_overrides: [...ctx.uphillOverrides.entries()].map(([chainage, side]) => ({
+              chainage_m: Number(chainage),
+              side,
+            })),
+          },
+          false,
+        );
+      },
+    },
     // B06에서 만져 **캐시에 얹힌** 횡단 수정분을 함께 남긴다 — 안 보내면 바로 아래
     // 캐시 비우기에서 사라진다. 계획선 저장 **뒤에** 보내야 사용자 수정 1세트가
     // 최종본으로 얹힌다(2026-08-24 사용자 지적).
-    if (latest?.route?.id != null) {
-      await saveCachedCrossPatches(projectId, latest.route.id);
-    }
-    // 서버가 종단 정본의 계획선을 다시 썼다 — 공유 캐시를 비워 B06이 옛 계획선을 못 보게 한다.
-    invalidateSectionDetail(projectId);
-    ctx.renderLatest(await ctx.loadLatest(true));
-    // 임시저장 = 코리도 영구저장 시점(2026-08-23) — 실패해도 임시저장은 성공 처리.
-    if (latest?.route?.id) void saveCorridorIfDirty(projectId, latest.route.id);
-    showToast(L("B05_Route_TempSave_Success"), "success");
-  } catch (error) {
-    showToast(error instanceof Error ? error.message : L("B05_Route_TempSave_Failed"), "error");
-  } finally {
-    hideLoadingOverlay();
-  }
+    cross: async () => {
+      if (latest?.route?.id != null) await saveCachedCrossPatches(projectId, latest.route.id);
+    },
+    done: async () => {
+      // 서버가 종단 정본의 계획선을 다시 썼다 — 공유 캐시를 비워 B06이 옛 계획선을 못 보게 한다.
+      invalidateSectionDetail(projectId);
+      ctx.renderLatest(await ctx.loadLatest(true));
+      // 임시저장 = 코리도 영구저장 시점(2026-08-23) — 실패해도 임시저장은 성공 처리.
+      if (latest?.route?.id) void saveCorridorIfDirty(projectId, latest.route.id);
+      showToast(L("B05_Route_TempSave_Success"), "success");
+    },
+    failed: (error) =>
+      showToast(error instanceof Error ? error.message : L("B05_Route_TempSave_Failed"), "error"),
+  });
 }
 
 /** [초기화] — 사용자 편집 전부 폐기, 계획노선 CSV 기본값으로 B05·B06 재계산 후 재진입.
diff --git a/B05_Profile/B05_Profile_UI_Profile_Edit.ts b/B05_Profile/B05_Profile_UI_Profile_Edit.ts
index 0eacc6fb..ccf10047 100644
--- a/B05_Profile/B05_Profile_UI_Profile_Edit.ts
+++ b/B05_Profile/B05_Profile_UI_Profile_Edit.ts
@@ -17,8 +17,8 @@
 
 import type { AlignmentEdits, ProfileAlignment } from "./B05_Profile_UI_Profile_Alignment";
 import { chainageKey, emptyEdits, hasEdits } from "./B05_Profile_UI_Profile_Alignment";
+import { ALIGNMENT_DRAFT_KEY_PREFIX, useDesignStore } from "../A00_Common/design/design_store";
 
-const DRAFT_KEY_PREFIX = "b05-profile-alignment-draft";
 /** 버튼 폭(21px)에 여유를 더한 값 — 이보다 가까우면 겹친 것으로 본다. */
 const BUTTON_CLEARANCE_PX = 23;
 const BUTTON_HALF_PX = 10;
@@ -79,6 +79,9 @@ export interface ProfileEditStore {
   edited(): boolean;
 }
 
+/** 초안 읽기 · 쓰기는 설계 가게(`design_store` 의 `alignmentDraft`) 한 창구로만. */
+const draftOf = (routeId: number) => useDesignStore(null, routeId);
+
 /**
  * 노선의 미저장 편집 초안을 읽는다(B06 공용).
  *
@@ -87,7 +90,7 @@ export interface ProfileEditStore {
  * 쓰면 초안 편집분이 B06에서 되돌아간 것처럼 보인다.
  */
 export function readAlignmentDraft(routeId: number | null): AlignmentEdits | null {
-  return routeId === null ? null : readDraft(`${DRAFT_KEY_PREFIX}:${routeId}`);
+  return routeId === null ? null : draftOf(routeId).get("alignmentDraft");
 }
 
 /**
@@ -96,13 +99,15 @@ export function readAlignmentDraft(routeId: number | null): AlignmentEdits | nul
  * 초기화는 서버 값을 초기 스냅샷으로 되돌리는데, 이 초안이 남아 있으면 화면이 그 위에
  * 옛 편집 델타를 다시 얹어 계획선이 측점에서 원지반선과 만나지 않는다(2026-09-04 실측:
  * 초기화 직후에는 멀쩡하다가 새로고침 한 번에 최대 6.0m 어긋남).
+ * 노선 번호를 모르는 옛 초안까지 쓸어야 해 여기서만 키를 훑는다.
  */
 export function clearAlignmentDrafts(): void {
+  shared.clear();
   try {
     const keys: string[] = [];
     for (let index = 0; index < sessionStorage.length; index += 1) {
       const key = sessionStorage.key(index);
-      if (key?.startsWith(`${DRAFT_KEY_PREFIX}:`)) keys.push(key);
+      if (key?.startsWith(`${ALIGNMENT_DRAFT_KEY_PREFIX}:`)) keys.push(key);
     }
     keys.forEach((key) => sessionStorage.removeItem(key));
   } catch {
@@ -110,18 +115,47 @@ export function clearAlignmentDrafts(): void {
   }
 }
 
-function readDraft(storageKey: string): AlignmentEdits | null {
-  try {
-    const raw = sessionStorage.getItem(storageKey);
-    if (!raw) return null;
-    const parsed = JSON.parse(raw) as Partial<AlignmentEdits>;
-    return {
-      station_offsets: parsed.station_offsets ?? {},
-      curve_radii: parsed.curve_radii ?? {},
-    };
-  } catch {
-    return null;
+/**
+ * 노선마다 **한 벌**인 편집 상태 — B05 종단 패널이 주인이고 B06 계획선 편집은 같은 벌을
+ * 쓴다(계획서 24-2a). 예전에는 두 화면이 가게를 따로 만들어 같은 초안 키를 각자 고쳤다 —
+ * 한쪽이 메모리에 쥔 옛 값으로 다시 쓰면 다른 쪽 편집이 덮였다.
+ */
+interface EditState {
+  current: AlignmentEdits;
+  unsaved: boolean;
+  /**
+   * [초기화]의 기준점 — **마지막 [저장] 시점의 편집분**이다(2026-09-03 사용자 지시).
+   * 처음에는 서버 저장분이고, [저장]을 누를 때마다 그때 값으로 옮겨 간다. 초기 자동
+   * 선형으로 되돌리는 것(`resetAll`)과는 다르다 — 저장한 작업까지 지우지 않는다.
+   */
+  savedBaseline: AlignmentEdits;
+  /** 서버 저장분 — 측점 원복 · 전체 원복이 자동 곡선반경을 되살리는 기준. */
+  saved: AlignmentEdits;
+}
+
+const shared = new Map<number, EditState>();
+
+/** 서버 저장분과 남은 초안으로 상태를 세운다(초안이 있으면 그것이 이기고 미저장). */
+function freshState(routeId: number | null, saved: AlignmentEdits): EditState {
+  const draft = readAlignmentDraft(routeId);
+  return { current: draft ?? saved, unsaved: draft !== null, savedBaseline: saved, saved };
+}
+
+/** [저장]이 보낼 계획고 초안 — 미저장 편집이 없으면 null. */
+export function pendingAlignment(routeId: number): AlignmentEdits | null {
+  const state = shared.get(routeId);
+  if (state) return state.unsaved ? state.current : null;
+  return readAlignmentDraft(routeId);
+}
+
+/** 계획고가 정본에 나갔다 — 그 노선 상태를 저장됨으로 두고 초안을 지운다. */
+export function markAlignmentSaved(routeId: number): void {
+  const state = shared.get(routeId);
+  if (state) {
+    state.unsaved = false;
+    state.savedBaseline = state.current;
   }
+  draftOf(routeId).set("alignmentDraft", null);
 }
 
 /**
@@ -131,6 +165,9 @@ function readDraft(storageKey: string): AlignmentEdits | null {
  * 새로고침한 경우) 초안을 우선 채택하고 미저장 상태로 표시한다. routeId가 바뀌면
  * 초안 키도 바뀌어 이전 노선의 편집이 새 노선에 잘못 얹히지 않는다.
  *
+ * 부를 때마다 그 노선의 한 벌을 **초안 · 저장분으로 다시 세운다**(되돌리기가 초안을 바꾼 뒤
+ * 다시 읽는 길). 이미 선 한 벌에 붙기만 하려면 `useProfileEditStore`.
+ *
  * routeId가 아직 없으면 **초안을 두지 않는다**(2026-09-04). 노선 없는 키(`:none`)에
  * 쌓인 초안은 어느 노선에나 되붙어 초기화로도 떨어지지 않았다.
  */
@@ -139,56 +176,62 @@ export function createProfileEditStore(
   saved: AlignmentEdits,
   onChange: () => void,
 ): ProfileEditStore {
-  const storageKey = routeId === null ? null : `${DRAFT_KEY_PREFIX}:${routeId}`;
-  const draft = storageKey ? readDraft(storageKey) : null;
-  let current = draft ?? saved;
-  let unsaved = draft !== null;
-  /**
-   * [초기화]의 기준점 — **마지막 [저장] 시점의 편집분**이다(2026-09-03 사용자 지시).
-   * 처음에는 서버 저장분이고, [저장]을 누를 때마다 그때 값으로 옮겨 간다. 초기 자동
-   * 선형으로 되돌리는 것(`resetAll`)과는 다르다 — 저장한 작업까지 지우지 않는다.
-   */
-  let savedBaseline = saved;
+  const fresh = freshState(routeId, saved);
+  // 이미 선 한 벌은 **그 자리에서** 다시 세운다 — 바꿔 끼우면 붙어 있던 쪽이 옛 벌을 쥔다.
+  const state = routeId === null ? fresh : Object.assign(shared.get(routeId) ?? fresh, fresh);
+  if (routeId !== null) shared.set(routeId, state);
+  return handleOf(routeId, state, onChange);
+}
+
+/** 그 노선에 이미 선 한 벌에 붙는다 — 없으면 `createProfileEditStore` 와 같다(B06 계획선 편집). */
+export function useProfileEditStore(
+  routeId: number,
+  saved: AlignmentEdits,
+  onChange: () => void,
+): ProfileEditStore {
+  const state = shared.get(routeId);
+  return state
+    ? handleOf(routeId, state, onChange)
+    : createProfileEditStore(routeId, saved, onChange);
+}
+
+function handleOf(
+  routeId: number | null,
+  state: EditState,
+  onChange: () => void,
+): ProfileEditStore {
+  const draft = routeId === null ? null : draftOf(routeId);
 
   function dropDraft(): void {
-    if (!storageKey) return;
-    try {
-      sessionStorage.removeItem(storageKey);
-    } catch {
-      // 세션 저장소를 못 쓰는 환경에서도 편집 자체는 계속 동작해야 한다.
-    }
+    draft?.set("alignmentDraft", null);
   }
 
   function commit(next: AlignmentEdits): void {
-    current = next;
-    unsaved = true;
-    try {
-      if (storageKey) sessionStorage.setItem(storageKey, JSON.stringify(current));
-    } catch {
-      // 초안 보관 실패는 편집을 막지 않는다.
-    }
+    state.current = next;
+    state.unsaved = true;
+    draft?.set("alignmentDraft", state.current);
     onChange();
   }
 
   return {
-    edits: () => current,
+    edits: () => state.current,
     replace: commit,
     markSaved() {
-      unsaved = false;
-      savedBaseline = current;
+      state.unsaved = false;
+      state.savedBaseline = state.current;
       dropDraft();
     },
     restoreSaved() {
-      current = savedBaseline;
-      unsaved = false;
+      state.current = state.savedBaseline;
+      state.unsaved = false;
       dropDraft();
       onChange();
     },
-    canRestoreSaved: () => JSON.stringify(current) !== JSON.stringify(savedBaseline),
+    canRestoreSaved: () => JSON.stringify(state.current) !== JSON.stringify(state.savedBaseline),
     resetStation(chainageM, moveTo) {
       const key = chainageKey(chainageM);
-      const stationOffsets = { ...current.station_offsets };
-      const curveRadii = { ...current.curve_radii };
+      const stationOffsets = { ...state.current.station_offsets };
+      const curveRadii = { ...state.current.curve_radii };
       if (moveTo !== undefined) {
         const to = chainageKey(moveTo);
         if (stationOffsets[key] !== undefined) stationOffsets[to] = stationOffsets[key];
@@ -200,7 +243,7 @@ export function createProfileEditStore(
       delete stationOffsets[key];
       // 그 측점의 곡선반경은 저장분(자동 계산이 역산해 둔 값)으로 되돌린다 — 지우면
       // 프론트가 기본 R로 다시 그려 계획고가 서버 정본과 어긋난다(2026-08-23).
-      const savedRadius = saved.curve_radii?.[key];
+      const savedRadius = state.saved.curve_radii?.[key];
       if (savedRadius === undefined) delete curveRadii[key];
       else curveRadii[key] = savedRadius;
       commit({ station_offsets: stationOffsets, curve_radii: curveRadii });
@@ -209,10 +252,10 @@ export function createProfileEditStore(
       // 지우는 것은 **사용자 편집 측점**이다. 자동 계획선이 역산해 저장한 곡선반경
       // (`curve_radii`)까지 비우면 호가 달라져 화면 계획고가 정본과 달라진다 —
       // 세월교 지점에서 0.22m 낮게 나와 최소고 경고가 잘못 떴다(2026-08-23 진단).
-      commit({ ...emptyEdits(), curve_radii: { ...(saved.curve_radii ?? {}) } });
+      commit({ ...emptyEdits(), curve_radii: { ...(state.saved.curve_radii ?? {}) } });
     },
-    dirty: () => unsaved,
-    edited: () => hasEdits(current),
+    dirty: () => state.unsaved,
+    edited: () => hasEdits(state.current),
   };
 }
 
diff --git a/B05_Profile/B05_Profile_UI_RouteEdit_Chrome.ts b/B05_Profile/B05_Profile_UI_RouteEdit_Chrome.ts
index cbeeee06..57946413 100644
--- a/B05_Profile/B05_Profile_UI_RouteEdit_Chrome.ts
+++ b/B05_Profile/B05_Profile_UI_RouteEdit_Chrome.ts
@@ -12,7 +12,7 @@
 
 /** 회전 단추 아이콘 — **반만 도는 화살표**(2026-09-12 사용자 지시 ㉙). 한 바퀴를 다 그린
  *  기호(`↺`·`↻`)는 「한 바퀴 돈다」로 읽혀 한 칸씩 도는 동작과 안 맞았다. */
-const HALF_TURN_ICON = {
+export const HALF_TURN_ICON = {
   ccw: `<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="none"
     stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
     <path d="M13 8a5 5 0 0 0-10 0" /><path d="M3 8 1.2 5.6" /><path d="M3 8 5.4 6.6" /></svg>`,
@@ -42,9 +42,9 @@ export function createRouteEditChrome(): RouteEditChrome {
         <strong>계획노선 편집</strong>
         <span class="b05-routeedit__rec-now" data-rec-now></span>
         <span class="b05-routeedit__actions">
-          <i class="b05-routeedit__divider" aria-hidden="true"></i>
           <button type="button" class="ui-btn ui-btn--ghost" data-act="recommend" disabled
             title="예상노선 추적 · 토공 최소 · 기울기 순한 · 비중 계산 중 하나로 노선을 추천받아 미리 봅니다">노선 추천</button>
+          <i class="b05-routeedit__divider" aria-hidden="true"></i>
           <button type="button" class="ui-btn ui-btn--ghost" data-act="contour-minor"
             aria-pressed="false" disabled
             title="1m 간격 등고선을 얇고 옅게 겹칩니다 (확대하면 보임)">1m 등고선</button>
diff --git a/B05_Profile/B05_Profile_UI_RouteEdit_Input.ts b/B05_Profile/B05_Profile_UI_RouteEdit_Input.ts
index 0badb0dd..d784e742 100644
--- a/B05_Profile/B05_Profile_UI_RouteEdit_Input.ts
+++ b/B05_Profile/B05_Profile_UI_RouteEdit_Input.ts
@@ -34,6 +34,8 @@ export interface RouteEditNavigationParams {
   /** 돌린 지도 보정 — 화면에서 민 만큼(dx, dy)을 **그림 좌표의 만큼**으로 바꾼다.
    *  안 주면 안 돌린 것으로 본다(배수유역도는 회전이 없다). */
   unrotateDelta?: (dx: number, dy: number) => [number, number];
+  /** 마우스 왼쪽 버튼으로도 팬 — 집을 노드가 없는 미리 보기 지도용. 편집 창은 가운데 버튼만. */
+  leftPan?: boolean;
   draw: () => void;
 }
 
@@ -78,7 +80,12 @@ export function bindRouteEditNavigation(params: RouteEditNavigationParams): void
     // 가운데 버튼 기본 동작(페이지 자동 스크롤)이 팬과 겹치지 않게 막는다.
     if (event.button === 1) event.preventDefault();
     // 마우스는 가운데 버튼만 팬이다 — 왼쪽 버튼은 노드·손잡이 조작 몫.
-    if (event.pointerType === "mouse" && event.button !== 1) return;
+    if (
+      event.pointerType === "mouse" &&
+      event.button !== 1 &&
+      !(params.leftPan && event.button === 0)
+    )
+      return;
     const view = getView();
     dragStart = {
       x: event.clientX,
diff --git a/B05_Profile/B05_Profile_UI_RouteEdit_Recommend.ts b/B05_Profile/B05_Profile_UI_RouteEdit_Recommend.ts
index f5ad8341..bb43b44a 100644
--- a/B05_Profile/B05_Profile_UI_RouteEdit_Recommend.ts
+++ b/B05_Profile/B05_Profile_UI_RouteEdit_Recommend.ts
@@ -23,7 +23,6 @@ import {
   criteriaLine,
   CRITERIA_KEYS,
   LOGIC_LABEL,
-  mapPaths,
   metricsLine,
   rebalanceWeights,
   relaxedLine,
@@ -36,6 +35,7 @@ import {
   type MapLayer,
   type WeightKey,
 } from "./B05_Profile_UI_RouteEdit_Initial_Model";
+import { createRecommendMap, RECOMMEND_MAP_HTML } from "./B05_Profile_UI_RouteEdit_Recommend_Map";
 import "./B05_Profile_UI_Style_RouteRecommend.css";
 
 type Vertex = [number, number];
@@ -61,34 +61,31 @@ const CRITERIA_FIELD: Record<
   { label: string; unit: string; title: string; of: (c: InitialCriteria) => number | null }
 > = {
   max_grade_pct: {
-    label: "기울기",
+    label: "종단기울기 상한",
     unit: "%",
     title: "종단기울기 상한(%) — 비우면 프로젝트 기본값(설계속도 · 지형 표값)",
     of: (c) => c.maxGradePct,
   },
   min_radius_m: {
-    label: "최소R",
+    label: "최소 반지름",
     unit: "m",
     title: "최소 곡선반지름(m) — 비우면 프로젝트 기본값",
     of: (c) => c.minRadiusM,
   },
   stream_offset_m: {
-    label: "계류",
+    label: "계류 이격",
     unit: "m",
     title: "계류 이격(m) — 비우면 기본값 100m",
     of: (c) => c.streamOffsetM,
   },
   grade_smooth_m: {
-    label: "지반",
+    label: "지반 고름 폭",
     unit: "m",
     title: "기울기 잴 지반 고름 폭(m) — 비우면 기본값 5m",
     of: (c) => c.gradeSmoothM,
   },
 };
 
-const MAP_W = 460;
-const MAP_H = 340;
-
 export interface RecommendParams {
   /** 칸에 처음 채울 제약 겹침(직접 넣은 값만). */
   criteria: RouteInitialCriteria | null;
@@ -120,13 +117,17 @@ export function openRecommendModal(params: RecommendParams): void {
   let seq = 0;
 
   let bodyEl: HTMLElement | null = null;
+  let map: ReturnType<typeof createRecommendMap> | null = null;
   openModal({
     title: "노선 추천",
     closeLabel: "✕",
     dialogClass: "b05-routerec",
+    // 곡선 라벨 패널(z-index 1001)이 떠 있어도 이 모달과 뒤 막이 그 위에 오게 한다.
+    backdropClass: "b05-routerec-backdrop",
     // ✕ · Esc · 바깥 누르기 모두 [닫기]와 같다 — 미리 보기를 버린다.
     beforeClose: () => {
       closed = true;
+      map?.dispose();
       return true;
     },
     mount: (body, close) => {
@@ -141,21 +142,28 @@ export function openRecommendModal(params: RecommendParams): void {
         </div>
         <div class="b05-routerec__main">
           <div class="b05-routerec__mapbox">
-            <svg class="b05-routerec__map" viewBox="0 0 ${MAP_W} ${MAP_H}" role="img"
-              aria-label="추천 노선 미리 보기"></svg>
+            <div class="b05-routerec__mapwrap" role="img" aria-label="추천 노선 미리 보기">
+              ${RECOMMEND_MAP_HTML}
+            </div>
             <div class="b05-routerec__legend">
               <span><i class="is-expected"></i>예상노선(원본)</span>
               <span><i class="is-current"></i>창을 연 노선</span>
               <span><i class="is-preview"></i>미리 보기</span>
             </div>
+            <div class="b05-routerec__maphint">휠 = 확대 · 축소 &nbsp; 끌기 = 이동 &nbsp; ↺ ↻ = 회전</div>
           </div>
           <div class="b05-routerec__side">
             <div class="b05-routerec__weights" hidden>
-              ${WEIGHT_KEYS.map(
-                (key) => `<label><span>${WEIGHT_NAME[key]}</span>
-                  <input type="range" min="0" max="100" step="1" data-weight="${key}" />
-                  <output data-weight-out="${key}"></output></label>`,
-              ).join("")}
+              <div class="b05-routerec__bars">
+                ${WEIGHT_KEYS.map(
+                  (
+                    key,
+                  ) => `<label class="b05-routerec__bar"><output data-weight-out="${key}"></output>
+                    <input type="range" min="0" max="100" step="1" data-weight="${key}"
+                      aria-label="${WEIGHT_NAME[key]} 비중" />
+                    <span>${WEIGHT_NAME[key]}</span></label>`,
+                ).join("")}
+              </div>
               <span class="b05-routerec__sum" data-weight-sum></span>
             </div>
             <div class="b05-routerec__criteria">
@@ -181,7 +189,7 @@ export function openRecommendModal(params: RecommendParams): void {
         </div>`;
 
       const q = <T extends HTMLElement>(sel: string): T => body.querySelector<T>(sel)!;
-      const svg = body.querySelector<SVGSVGElement>(".b05-routerec__map")!;
+      map = createRecommendMap(q<HTMLElement>(".b05-routerec__mapwrap"));
       const pills = [...body.querySelectorAll<HTMLButtonElement>("[data-logic]")];
       const weightsBox = q<HTMLElement>(".b05-routerec__weights");
       const rerun = q<HTMLButtonElement>('[data-act="rerun"]');
@@ -213,9 +221,7 @@ export function openRecommendModal(params: RecommendParams): void {
           { kind: "current", points: params.current },
         ];
         if (preview) layers.push({ kind: "preview", points: preview.snapshot.planned });
-        svg.innerHTML = mapPaths(layers, MAP_W, MAP_H)
-          .map((path) => `<path class="is-${path.kind}" d="${path.d}" />`)
-          .join("");
+        map?.setLayers(layers);
       }
 
       function render(): void {
diff --git a/B05_Profile/B05_Profile_UI_RouteEdit_Recommend_Map.ts b/B05_Profile/B05_Profile_UI_RouteEdit_Recommend_Map.ts
new file mode 100644
index 00000000..9408a1c1
--- /dev/null
+++ b/B05_Profile/B05_Profile_UI_RouteEdit_Recommend_Map.ts
@@ -0,0 +1,183 @@
+/* =============================================================================
+ * B05_Profile_UI_RouteEdit_Recommend_Map.ts
+ * [노선 추천] 모달의 미리 보기 지도 — 캔버스 하나에 선 세 겹(예상노선 · 창을 연 노선 · 미리 보기).
+ *
+ * 화면 셈 · 조작은 편집 창 것을 그대로 가져다 쓴다(베끼지 않음) — 좌표 옮기기 `metricToScreen` ·
+ * 처음 맞춤 `computeRouteView` · 캔버스 크기 `fitCanvas`(`_View`) · 휠 확대 · 끌기
+ * `bindRouteEditNavigation`(`_Input`) · 회전 `createMapRotation`(`_Rotate`). 배경 지도(VWorld)는
+ * 없어서, 선들의 범위를 감싼 가짜 도엽(`VWorldMeta`)을 만들어 같은 셈에 넣는다.
+ * ========================================================================== */
+
+import { themeColor } from "@ui/ui_template_palette";
+import {
+  computeMapRect,
+  computeRouteView,
+  metricToScreen,
+  ROUTE_VIEW_MARGIN_M,
+  routeLineColor,
+  type ViewState,
+} from "../B04_PreProcess/B04_PreProcess_UI_MapRender";
+import type { VWorldMeta } from "../B04_PreProcess/B04_PreProcess_Api_Fetch";
+import { HALF_TURN_ICON } from "./B05_Profile_UI_RouteEdit_Chrome";
+import { bindRouteEditNavigation } from "./B05_Profile_UI_RouteEdit_Input";
+import type { MapLayer } from "./B05_Profile_UI_RouteEdit_Initial_Model";
+import { createMapRotation } from "./B05_Profile_UI_RouteEdit_Rotate";
+import { fitCanvas } from "./B05_Profile_UI_RouteEdit_View";
+
+/** 처음 맞출 때 선 범위 둘레로 두는 여유(m) — 편집 창(200 m)보다 좁게, 선이 지도를 채우게. */
+const FIT_MARGIN_M = 30;
+
+/** 지도 칸 마크업 — 캔버스 + 회전 단추 둘(편집 창과 같은 모양 · 같은 `data-act`). */
+export const RECOMMEND_MAP_HTML = `
+  <canvas class="b05-routerec__map"></canvas>
+  <div class="b05-routeedit__spin">
+    <button type="button" class="ui-btn ui-btn--glass" data-act="rotate-ccw"
+      title="반시계로 돌리기" aria-label="반시계로 돌리기">${HALF_TURN_ICON.ccw}</button>
+    <button type="button" class="ui-btn ui-btn--glass" data-act="rotate-cw"
+      title="시계로 돌리기" aria-label="시계로 돌리기">${HALF_TURN_ICON.cw}</button>
+  </div>`;
+
+export interface RecommendMap {
+  /** 겹을 바꿔 다시 그린다. 처음 점이 있는 겹이 들어올 때 한 번만 화면을 맞춘다. */
+  setLayers: (layers: MapLayer[]) => void;
+  dispose: () => void;
+}
+
+/** `box` = `RECOMMEND_MAP_HTML` 을 넣은 칸(높이가 정해져 있어야 함). */
+export function createRecommendMap(box: HTMLElement): RecommendMap {
+  const canvas = box.querySelector<HTMLCanvasElement>("canvas")!;
+  const context = canvas.getContext("2d")!;
+  let layers: MapLayer[] = [];
+  let meta: VWorldMeta | null = null;
+  let fitted = false;
+  let view: ViewState = {
+    width: 0,
+    height: 0,
+    scale: 1,
+    offsetX: 0,
+    offsetY: 0,
+    mapRect: computeMapRect(null, 0, 0),
+  };
+  const rotation = createMapRotation({ overlay: box, size: () => view, onChange: () => draw() });
+
+  function bounds(): { x_min: number; x_max: number; y_min: number; y_max: number } | null {
+    const all = layers.flatMap((layer) => layer.points);
+    if (!all.length) return null;
+    const xs = all.map(([x]) => x);
+    const ys = all.map(([, y]) => y);
+    return {
+      x_min: Math.min(...xs),
+      x_max: Math.max(...xs),
+      y_min: Math.min(...ys),
+      y_max: Math.max(...ys),
+    };
+  }
+
+  /** 선 범위 + 여유를 도엽으로 본다 — 이후 확대 상한 · 맞춤이 편집 창과 같은 공식을 탄다. */
+  function makeMeta(range: NonNullable<ReturnType<typeof bounds>>): VWorldMeta {
+    const x_min = range.x_min - ROUTE_VIEW_MARGIN_M;
+    const y_min = range.y_min - ROUTE_VIEW_MARGIN_M;
+    const x_max = range.x_max + ROUTE_VIEW_MARGIN_M;
+    const y_max = range.y_max + ROUTE_VIEW_MARGIN_M;
+    return {
+      x_min,
+      x_max,
+      y_min,
+      y_max,
+      width_meters: x_max - x_min,
+      height_meters: y_max - y_min,
+      center_x: (x_min + x_max) / 2,
+      center_y: (y_min + y_max) / 2,
+      lon_min: 0,
+      lon_max: 1,
+      lat_min: 0,
+      lat_max: 1,
+    };
+  }
+
+  function refit(): void {
+    const b = bounds();
+    if (!b || !view.width) return;
+    meta = makeMeta(b);
+    view = {
+      ...view,
+      mapRect: computeMapRect(meta, view.width, view.height),
+      ...computeRouteView(meta, b, view.width, view.height, FIT_MARGIN_M),
+    };
+    fitted = true;
+  }
+
+  function draw(): void {
+    context.clearRect(0, 0, view.width, view.height);
+    if (!meta) return;
+    context.save();
+    context.translate(view.width / 2, view.height / 2);
+    context.rotate(rotation.radians());
+    context.translate(-view.width / 2, -view.height / 2);
+    context.lineCap = "round";
+    context.lineJoin = "round";
+    const styles: Record<MapLayer["kind"], () => void> = {
+      expected: () => {
+        context.strokeStyle = themeColor("--color-text-secondary", "#9ca3af");
+        context.lineWidth = 1.5;
+        context.setLineDash([5, 4]);
+      },
+      current: () => {
+        context.strokeStyle = routeLineColor();
+        context.globalAlpha = 0.55;
+        context.lineWidth = 2;
+        context.setLineDash([]);
+      },
+      preview: () => {
+        context.strokeStyle = themeColor("--color-primary", "#6d28d9");
+        context.lineWidth = 3;
+        context.setLineDash([]);
+      },
+    };
+    for (const layer of layers) {
+      if (layer.points.length < 2) continue;
+      context.save();
+      styles[layer.kind]();
+      context.beginPath();
+      layer.points.forEach(([x, y], index) => {
+        const [sx, sy] = metricToScreen(meta!, view, x, y);
+        if (index) context.lineTo(sx, sy);
+        else context.moveTo(sx, sy);
+      });
+      context.stroke();
+      context.restore();
+    }
+    context.restore();
+  }
+
+  function resize(): void {
+    const { width, height } = fitCanvas(canvas, context);
+    if (!width || !height) return;
+    view = { ...view, width, height, mapRect: computeMapRect(meta, width, height) };
+    // 처음 한 번만 맞춘다 — 그 뒤 창 크기가 바뀌어도 사용자가 만진 배율 · 자리를 지킨다.
+    if (!fitted) refit();
+    draw();
+  }
+
+  bindRouteEditNavigation({
+    canvas,
+    getView: () => view,
+    setView: (next) => (view = next),
+    getMeta: () => meta,
+    unrotateDelta: rotation.unrotateDelta,
+    leftPan: true,
+    draw,
+  });
+  // 모달이 붙기 전에는 칸 크기가 0 이다 — 붙은 뒤 크기가 잡히면 맞추고 그린다.
+  const observer = new ResizeObserver(() => resize());
+  observer.observe(canvas.parentElement!);
+
+  return {
+    setLayers(next) {
+      layers = next;
+      if (!fitted) refit();
+      draw();
+    },
+    dispose: () => observer.disconnect(),
+  };
+}
diff --git a/B05_Profile/B05_Profile_UI_Style_Drainage.css b/B05_Profile/B05_Profile_UI_Style_Drainage.css
index 3bfa5c43..0581d21e 100644
--- a/B05_Profile/B05_Profile_UI_Style_Drainage.css
+++ b/B05_Profile/B05_Profile_UI_Style_Drainage.css
@@ -288,3 +288,8 @@
 }
 
 /* 구조물(배관) 배치로 갈라진 구배 블록 — 평소엔 값 없이 윤곽만, 선택하면 강조와 함께 값 표시. */
+
+/* 종단도 판 자리에서 끈 배수유역도(`_Drainage_Side` · 계획서 24-2e) — 자리를 비운다. */
+.b05-drainage[hidden] {
+  display: none;
+}
diff --git a/B05_Profile/B05_Profile_UI_Style_RouteRecommend.css b/B05_Profile/B05_Profile_UI_Style_RouteRecommend.css
index fe59d8ca..0eef5e46 100644
--- a/B05_Profile/B05_Profile_UI_Style_RouteRecommend.css
+++ b/B05_Profile/B05_Profile_UI_Style_RouteRecommend.css
@@ -9,13 +9,20 @@
   white-space: nowrap;
 }
 
+/* 곡선 라벨 패널(`.b05-routeedit__label` = 모달 + 1) 위로 — 모달과 뒤 막이 함께 올라간다. */
+.ui-modal__backdrop.b05-routerec-backdrop {
+  z-index: calc(var(--z-modal, 1000) + 2);
+}
+
 .ui-modal.b05-routerec {
-  width: min(900px, 94vw);
+  width: min(960px, 94vw);
   max-height: 92vh;
+  font-size: var(--text-body-sm);
 }
 
 .b05-routerec__body {
   gap: var(--spacing-12);
+  font-size: var(--text-body-sm);
 }
 
 /* 알약 — 하나만 고른 상태(라디오 묶음). */
@@ -26,12 +33,12 @@
 }
 
 .b05-routerec__pill {
-  padding: 6px var(--spacing-16);
+  padding: 8px var(--spacing-16);
   border: 1px solid var(--color-border);
   border-radius: 999px;
   background: var(--color-surface);
   color: var(--color-text-body);
-  font-size: var(--text-body-sm);
+  font-size: var(--text-body);
   cursor: pointer;
 }
 
@@ -53,7 +60,7 @@
 
 .b05-routerec__main {
   display: grid;
-  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
   gap: var(--spacing-12);
   align-items: start;
 }
@@ -64,36 +71,27 @@
   gap: var(--spacing-4, 4px);
 }
 
-.b05-routerec__map {
-  display: block;
-  width: 100%;
-  height: auto;
+/* 미리 보기 지도 — 캔버스 칸(높이 고정). 회전 단추는 편집 창 것(`.b05-routeedit__spin`)과 같은 모양. */
+.b05-routerec__mapwrap {
+  position: relative;
+  height: 380px;
+  overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-8, 6px);
   background: var(--color-surface);
 }
 
-.b05-routerec__map path {
-  fill: none;
-  stroke-linecap: round;
-  stroke-linejoin: round;
+.b05-routerec__map {
+  display: block;
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+  cursor: grab;
 }
 
-.b05-routerec__map path.is-expected {
-  stroke: var(--color-text-secondary, #9ca3af);
-  stroke-dasharray: 5 4;
-  stroke-width: 1.5;
-}
-
-.b05-routerec__map path.is-current {
-  stroke: var(--map-route, #f97316);
-  stroke-width: 2;
-  opacity: 0.55;
-}
-
-.b05-routerec__map path.is-preview {
-  stroke: var(--color-primary);
-  stroke-width: 2.5;
+.b05-routerec__maphint {
+  color: var(--color-text-secondary);
+  font-size: var(--text-body-sm);
 }
 
 .b05-routerec__legend {
@@ -101,7 +99,7 @@
   flex-wrap: wrap;
   gap: var(--spacing-12);
   color: var(--color-text-secondary);
-  font-size: var(--text-caption);
+  font-size: var(--text-body-sm);
 }
 
 .b05-routerec__legend i {
@@ -128,53 +126,81 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-12);
-  color: var(--color-text-secondary);
-  font-size: var(--text-caption);
+  color: var(--color-text-body);
+  font-size: var(--text-body-sm);
 }
 
+/* 비중 — 세로 막대 셋이 나란히(값 위 · 이름 아래). 슬라이더가 세로로 선다. */
 .b05-routerec__weights {
-  display: grid;
-  gap: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4, 4px);
 }
 
-.b05-routerec__weights label {
-  display: grid;
-  grid-template-columns: 3.5em 1fr 2.5em;
-  align-items: center;
+.b05-routerec__weights[hidden] {
+  display: none;
+}
+
+.b05-routerec__bars {
+  display: flex;
   gap: var(--spacing-8);
 }
 
-.b05-routerec__weights output {
+.b05-routerec__bar {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-4, 4px);
+}
+
+.b05-routerec__bar input[type="range"] {
+  width: 28px;
+  height: 130px;
+  margin: 0;
+  writing-mode: vertical-lr;
+  direction: rtl; /* 위로 올릴수록 큰 값 */
+  accent-color: var(--color-primary);
+}
+
+.b05-routerec__bar output {
   color: var(--color-text-body);
-  text-align: right;
+  font-size: var(--text-body);
+  font-weight: 600;
+}
+
+.b05-routerec__bar span {
+  color: var(--color-text-secondary);
 }
 
 .b05-routerec__sum {
-  text-align: right;
+  text-align: center;
+  font-weight: 600;
 }
 
-/* 공통 제약 네 칸 — 비우면 placeholder 가 기본값. */
+/* 공통 제약 네 칸 — 한 줄에 하나(이름 · 입력 · 단위). 비우면 placeholder 가 기본값. */
 .b05-routerec__criteria {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-8) var(--spacing-12);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--spacing-8);
 }
 
 .b05-routerec__criteria label {
-  display: inline-flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 5.5em 1.5em;
   align-items: center;
-  gap: 4px;
-  white-space: nowrap;
+  gap: var(--spacing-8);
+  color: var(--color-text-body);
 }
 
 .b05-routerec__criteria input {
-  width: 4em;
-  padding: 2px 4px;
+  width: 100%;
+  padding: 4px 8px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-4, 4px);
   background: var(--color-surface);
   color: var(--color-text-body);
-  font-size: var(--text-caption);
+  font-size: var(--text-body);
   text-align: right;
 }
 
@@ -191,8 +217,8 @@
   flex-direction: column;
   gap: 2px;
   color: var(--color-text-secondary);
-  font-size: var(--text-caption);
-  line-height: 1.45;
+  font-size: var(--text-body-sm);
+  line-height: 1.5;
 }
 
 /* 상한을 풀었다는 안내 — 눈에 띄게(계획서 20). */
@@ -212,7 +238,7 @@
 .b05-routerec__state {
   flex: 1 1 12em;
   color: var(--color-text-body);
-  font-size: var(--text-caption);
+  font-size: var(--text-body-sm);
 }
 
 /* 좁은 폭 — 지도 아래로 조작 칸. */
@@ -220,4 +246,8 @@
   .b05-routerec__main {
     grid-template-columns: minmax(0, 1fr);
   }
+
+  .b05-routerec__mapwrap {
+    height: 300px;
+  }
 }
diff --git a/B06_Section/B06_Section_UI_Page_Grade_Edit.ts b/B06_Section/B06_Section_UI_Page_Grade_Edit.ts
index 8c5c87c5..ff12e945 100644
--- a/B06_Section/B06_Section_UI_Page_Grade_Edit.ts
+++ b/B06_Section/B06_Section_UI_Page_Grade_Edit.ts
@@ -5,7 +5,7 @@
  * ========================================================================== */
 
 import {
-  createProfileEditStore,
+  useProfileEditStore,
   type ProfileEditStore,
 } from "../B05_Profile/B05_Profile_UI_Profile_Edit";
 import { readAlignment, toDesignProfile } from "../B05_Profile/B05_Profile_UI_Profile_Data";
@@ -28,8 +28,8 @@ export interface GradeEditContext {
 }
 
 /**
- * 계획선 편집(▲/▼) — B05 와 **같은 세션 초안**에 쌓는다(2026-09-12 사용자: B06 에만
- * 버튼이 없었다). 누르면 그 자리에서 계획선·전 측점 횡단을 다시 풀고(`reconcile`),
+ * 계획선 편집(▲/▼) — B05 종단 패널의 **같은 가게**(노선마다 한 벌)를 쓴다(계획서 24-2a ·
+ * 2026-09-12 사용자: B06 에만 버튼이 없었다). 누르면 그 자리에서 계획선·전 측점 횡단을 다시 풀고(`reconcile`),
  * 영구저장은 [저장]·[확정]에서만 한다(CLAUDE.md 5장).
  */
 export function createGradeEdit(ctx: GradeEditContext): GradeEditProvider {
@@ -53,7 +53,7 @@ export function createGradeEdit(ctx: GradeEditContext): GradeEditProvider {
     if (!stored) return null; // 선형 저장분이 없는 옛 노선 — 편집할 기준선이 없다.
     if (!gradeStore || gradeRouteId !== currentRouteId) {
       gradeRouteId = currentRouteId;
-      gradeStore = createProfileEditStore(currentRouteId, stored.edits, () => undefined);
+      gradeStore = useProfileEditStore(currentRouteId, stored.edits, () => undefined);
     }
     const store = gradeStore;
     const base = toAlignmentBase(stored);
diff --git a/B06_Section/B06_Section_UI_Page_Persist.ts b/B06_Section/B06_Section_UI_Page_Persist.ts
index b2827081..aaf97f6e 100644
--- a/B06_Section/B06_Section_UI_Page_Persist.ts
+++ b/B06_Section/B06_Section_UI_Page_Persist.ts
@@ -7,7 +7,7 @@
  * (CLAUDE.md 5장 데이터 3층: 영구저장은 [저장]·[확정]에서만).
  * ========================================================================== */
 
-import { hideLoadingOverlay, showLoadingOverlay, showToast } from "@ui/ui_template_elements";
+import { showToast } from "@ui/ui_template_elements";
 import { goToWorkflowStage, WORKFLOW_STEP_ROUTES } from "../A00_Common/b_workflow_nav";
 import {
   confirmSections,
@@ -17,14 +17,7 @@ import {
   type SectionDetailResponse,
 } from "./B06_Section_Api_Fetch";
 import { invalidateSectionDetail } from "./B06_Section_Section_Store";
-import { flushPendingPipes } from "../B05_Profile/B05_Profile_Api_Pipes_Draft";
-import { saveProfileAlignment } from "../B05_Profile/B05_Profile_Api_Fetch";
-import {
-  clearAlignmentDrafts,
-  readAlignmentDraft,
-} from "../B05_Profile/B05_Profile_UI_Profile_Edit";
-import { flushPendingStructures } from "../B05_Profile/B05_Profile_Api_Structures";
-import { flushUphillOverrides } from "../B05_Profile/B05_Profile_Api_Fetch";
+import { saveDesign, type DesignSaveContext } from "../A00_Common/design/design_save";
 import { buildCrossPatches, type CrossPatchSources } from "./B06_Section_UI_Page_Patches";
 import { readByKey, readState, writeByKey, writeState } from "../A00_Common/b_page_state";
 import {
@@ -423,102 +416,64 @@ export function collectSectionEdits(ctx: SectionPersistContext): {
   };
 }
 
-/** 계획선 편집 초안이 있으면 종단 정본에 쓰고 초안을 지운다. 없으면 아무 일도 하지 않는다. */
-async function flushAlignmentDraft(projectId: string, routeId: number | null): Promise<void> {
-  if (routeId === null) return;
-  const draft = readAlignmentDraft(routeId);
-  if (!draft) return;
-  await saveProfileAlignment(projectId, routeId, draft);
-  clearAlignmentDrafts();
-}
-
-/** 세션에 쌓인 조정창·구조물 조작을 정본으로 내보낸다 — [저장]·[확정] 공통 앞단. */
-async function flushPendingEdits(ctx: SectionPersistContext, projectId: string): Promise<void> {
-  // ⚠ 순서는 **B05 [임시저장]과 같아야 한다**(2026-09-12 사용자: 어느 페이지에서 저장해도
-  // 결과가 같아야 한다). 관 목록은 B05 가 **전체 스냅샷**으로, B06 이 **바뀐 것만**(추가·
-  // 삭제·이동·구간값) 담으므로, 스냅샷을 먼저 얹고 그 위에 델타를 적용해야 한다. 반대로
-  // 하면 스냅샷이 B06 편집을 통째로 덮는다.
-  await flushPendingPipes(projectId).catch((error) => {
-    const detail = error instanceof Error ? ` ${error.message}` : "";
-    showToast(`배수관 저장에 실패했습니다.${detail}`, "error");
-  });
-  // 조정창 구간값·추가·삭제·이동은 세션에만 있다 — 정본 payload를 모으기 전에 내보낸다
-  // (CLAUDE.md 5장: 영구저장은 [저장]·[확정]에서만).
-  await ctx.flushCulvertOptions();
-  // B05 3D에서 바꾼 상단측(측구 방향)도 여기서 내보낸다 — 예전에는 B05 [임시저장]에만
-  // 실려, B06에서 저장·확정하면 세션에만 남아 옛 방향이 정본에 그대로 있었다
-  // (2026-09-06). 서버가 종단 정본과 저장된 횡단 설계를 함께 갱신하므로 아래
-  // 횡단 patch 저장보다 **먼저** 나가야 사용자 수정이 위에 얹힌다.
-  await flushUphillOverrides(projectId).catch(() => undefined);
-  // B05에서 만지고 넘어온 구조물 조작분도 여기서 정본에 남긴다. 실패해도 횡단
-  // 저장까지 막지는 않는다 — 미저장분은 세션에 남으므로 다시 시도할 수 있다
-  // (2026-08-29 실측: 타입이 거절되자 sections/save가 아예 나가지 않았다).
-  // 계획선 편집(▲/▼)은 세션 초안에만 있다 — B06 에서 고쳤든 B05 에서 고쳤든 여기서
-  // 종단 정본으로 내보낸다(2026-09-12). 종전에는 B06 이 초안을 **읽기만** 해서, B06 에서
-  // 저장하면 계획선 편집이 다음 진입 때 사라졌다.
-  await flushAlignmentDraft(projectId, ctx.routeId()).catch((error) => {
-    const detail = error instanceof Error ? ` ${error.message}` : "";
-    showToast(`계획선 저장에 실패했습니다.${detail}`, "error");
-  });
-  await flushPendingStructures(projectId).catch((error) => {
-    const detail = error instanceof Error ? ` ${error.message}` : "";
-    showToast(`구조물 저장에 실패했습니다.${detail}`, "error");
-  });
+/**
+ * B06 의 저장 한 줄기 창구(계획서 24-2a) — 차례는 `saveDesign` 이 정하고(B05 [임시저장]과 같음),
+ * 여기서는 B06 몫만 준다: 저장 앞 전 측점 재계산 · 조정창 구간값 · 횡단 본문 · 뒤처리.
+ */
+function sectionSaveContext(ctx: SectionPersistContext, projectId: string): DesignSaveContext {
+  return {
+    projectId,
+    routeId: ctx.routeId,
+    // ⚠ 면적을 모으기 **전에** 전 측점을 다시 계산한다 — 안 그러면 표준단면을 고친 뒤
+    //   안 만진 측점이 옛 면적으로 실려 나간다(2026-09-09 실측).
+    prepare: () => ctx.reconcileDesigns(),
+    // 조정창 구간값은 조정창 저장기가 낸다 — 실패하면 알리고 저장을 멈춘다(예전 그대로).
+    steps: { culvertOptions: () => ctx.flushCulvertOptions() },
+    cross: async (confirm) => {
+      const routeId = ctx.routeId();
+      if (routeId === null) return;
+      const edits = collectSectionEdits(ctx);
+      await (confirm ? confirmSections : saveSections)(
+        projectId,
+        routeId,
+        ctx.standardValues(),
+        edits.crossPatches.length ? edits.crossPatches : undefined,
+        edits.massHaul,
+      );
+    },
+    done: (confirm) => {
+      if (confirm) {
+        showToast(L("B06_Profile_Confirm_Success"), "success");
+        goToWorkflowStage(projectId, WORKFLOW_STEP_ROUTES[4]);
+        return;
+      }
+      // 저장으로 구조물 초안이 정본이 됐다 — 화면이 들고 있던 상세는 초안 기준으로 벽을
+      // 얹은 사본이라, 그대로 두면 새로 저장된 구조물의 벽이 다음 조회까지 안 붙는다
+      // (2026-09-06 실측: 8+0.0 흙막이가 저장 뒤 화면 사본에만 빠져 있었음).
+      const routeId = ctx.routeId();
+      if (routeId !== null) invalidateSectionDetail(projectId, routeId);
+      showToast(L("B06_Profile_Save_Success"), "success");
+    },
+    failed: (error, confirm) => {
+      if (confirm) {
+        const detail = error instanceof Error ? error.message : L("B06_Profile_Confirm_Failed");
+        showToast(`${L("B06_Profile_Confirm_Failed")} ${detail}`, "error");
+        return;
+      }
+      const detail = error instanceof Error ? ` ${error.message}` : "";
+      showToast(`${L("B06_Profile_Save_Failed")}${detail}`, "error");
+    },
+  };
 }
 
 /** 임시 저장 — 저장만 하고 페이지는 그대로 둔다. */
 export async function saveCurrentSections(ctx: SectionPersistContext): Promise<void> {
-  const routeId = ctx.routeId();
-  if (!ctx.projectId || routeId === null) return;
-  showLoadingOverlay();
-  try {
-    // ⚠ 면적을 모으기 **전에** 전 측점을 다시 계산한다 — 안 그러면 표준단면을 고친 뒤
-    //   안 만진 측점이 옛 면적으로 실려 나간다(2026-09-09 실측).
-    await ctx.reconcileDesigns();
-    await flushPendingEdits(ctx, ctx.projectId);
-    const edits = collectSectionEdits(ctx);
-    await saveSections(
-      ctx.projectId,
-      routeId,
-      ctx.standardValues(),
-      edits.crossPatches.length ? edits.crossPatches : undefined,
-      edits.massHaul,
-    );
-    // 저장으로 구조물 초안이 정본이 됐다 — 화면이 들고 있던 상세는 초안 기준으로 벽을
-    // 얹은 사본이라, 그대로 두면 새로 저장된 구조물의 벽이 다음 조회까지 안 붙는다
-    // (2026-09-06 실측: 8+0.0 흙막이가 저장 뒤 화면 사본에만 빠져 있었음).
-    invalidateSectionDetail(ctx.projectId, routeId);
-    showToast(L("B06_Profile_Save_Success"), "success");
-  } catch (error) {
-    const detail = error instanceof Error ? ` ${error.message}` : "";
-    showToast(`${L("B06_Profile_Save_Failed")}${detail}`, "error");
-  } finally {
-    hideLoadingOverlay();
-  }
+  if (!ctx.projectId) return;
+  await saveDesign(sectionSaveContext(ctx, ctx.projectId));
 }
 
 /** 확정 — 저장 뒤 다음 단계(상세설계)로 넘어간다. */
 export async function confirmCurrentSections(ctx: SectionPersistContext): Promise<void> {
-  const routeId = ctx.routeId();
-  if (!ctx.projectId || routeId === null) return;
-  showLoadingOverlay();
-  try {
-    await ctx.reconcileDesigns(); // 저장과 같은 이유 — 옛 면적이 정본으로 굳는 것을 막는다
-    await flushPendingEdits(ctx, ctx.projectId);
-    const edits = collectSectionEdits(ctx);
-    await confirmSections(
-      ctx.projectId,
-      routeId,
-      ctx.standardValues(),
-      edits.crossPatches.length ? edits.crossPatches : undefined,
-      edits.massHaul,
-    );
-    showToast(L("B06_Profile_Confirm_Success"), "success");
-    goToWorkflowStage(ctx.projectId, WORKFLOW_STEP_ROUTES[4]);
-  } catch (error) {
-    const detail = error instanceof Error ? error.message : L("B06_Profile_Confirm_Failed");
-    showToast(`${L("B06_Profile_Confirm_Failed")} ${detail}`, "error");
-  } finally {
-    hideLoadingOverlay();
-  }
+  if (!ctx.projectId) return;
+  await saveDesign(sectionSaveContext(ctx, ctx.projectId), { confirm: true });
 }
diff --git a/resources/tester/helper_b05_drainage_report.cjs b/resources/tester/helper_b05_drainage_report.cjs
new file mode 100644
index 00000000..402b32bb
--- /dev/null
+++ b/resources/tester/helper_b05_drainage_report.cjs
@@ -0,0 +1,31 @@
+/* 배수유역 관 보고(`B05_Profile_UI_Drainage_Report.ts`) 셈 단위검증 헬퍼 — TS 를 트랜스파일해 Node 로 돈다. */
+const fs = require("fs");
+const path = require("path");
+const ts = require(path.join(__dirname, "..", "..", "config", "node_modules", "typescript"));
+
+const file = path.join(__dirname, "..", "..", "B05_Profile", "B05_Profile_UI_Drainage_Report.ts");
+const js = ts.transpileModule(fs.readFileSync(file, "utf8"), {
+  compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2020 },
+}).outputText;
+const box = { exports: {} };
+new Function("exports", "module", "require", js)(box.exports, box, require);
+const { buildPipeReports } = box.exports;
+
+const store = {
+  get: (chainage) =>
+    chainage === 100.5 ? { facility: "box_culvert", start_m: 95, end_m: 106, options: { h: 2 } } : null,
+};
+const basins = [
+  { chainage_m: 40, pipe_diameter_mm: 800, design_flow_m3s: 1.2, bridge_required: false },
+  { chainage_m: 100.5, pipe_diameter_mm: 1000, design_flow_m3s: 3.4, bridge_required: true },
+];
+const out = buildPipeReports(
+  [
+    { chainage_m: 40.004, reason: "auto" },
+    { chainage_m: 100.499 },
+    { chainage_m: 200 },
+  ],
+  basins,
+  store,
+);
+process.stdout.write(JSON.stringify(out));
diff --git a/resources/tester/helper_design_store_save.cjs b/resources/tester/helper_design_store_save.cjs
new file mode 100644
index 00000000..03b12449
--- /dev/null
+++ b/resources/tester/helper_design_store_save.cjs
@@ -0,0 +1,180 @@
+/* 설계 가게 · 저장 한 줄기(계획서 24-2a) 단위검증 헬퍼 —
+ * `A00_Common/design/design_store.ts` · `design_save.ts` · `B05_Profile_UI_Profile_Edit.ts` 를
+ * 그 자리에서 트랜스파일해 Node 로 돌린다. 서버 창구는 가짜로 두고 부른 차례만 적는다.
+ */
+const fs = require("fs");
+const path = require("path");
+const ts = require(path.join(__dirname, "..", "..", "config", "node_modules", "typescript"));
+
+const ROOT = path.join(__dirname, "..", "..");
+
+function memoryStorage() {
+  const map = new Map();
+  return {
+    getItem: (key) => (map.has(key) ? map.get(key) : null),
+    setItem: (key, value) => map.set(key, String(value)),
+    removeItem: (key) => map.delete(key),
+    key: (index) => [...map.keys()][index] ?? null,
+    get length() {
+      return map.size;
+    },
+  };
+}
+const session = memoryStorage();
+globalThis.window = { sessionStorage: session, localStorage: memoryStorage() };
+globalThis.sessionStorage = session;
+
+const calls = [];
+const record = (name, fail) => async () => {
+  calls.push(name);
+  if (fail) throw new Error(`${name} 실패`);
+};
+let failStructures = false;
+const STUBS = {
+  "@ui/ui_template_elements": {
+    showToast: (text, kind) => calls.push(`toast:${kind}`),
+    showLoadingOverlay: () => calls.push("overlay:on"),
+    hideLoadingOverlay: () => calls.push("overlay:off"),
+  },
+  "../../B05_Profile/B05_Profile_Api_Pipes_Draft": {
+    flushPendingPipes: () => record("pipes")(),
+  },
+  "../../B05_Profile/B05_Profile_Api_Structures": {
+    flushPendingStructures: () => record("structures", failStructures)(),
+  },
+  "../../B05_Profile/B05_Profile_Api_Fetch": {
+    flushUphillOverrides: () => record("uphill")(),
+    saveProfileAlignment: async (_p, routeId, edits) =>
+      calls.push(`alignment:${routeId}:${JSON.stringify(edits.station_offsets)}`),
+  },
+  "../../B06_Section/B06_Section_Api_Culvert_Options": {
+    flushCulvertOptions: async (_p, key) => calls.push(`culvert:${key}`),
+  },
+};
+
+const cache = new Map();
+function loadTs(file) {
+  const full = path.resolve(file);
+  if (cache.has(full)) return cache.get(full);
+  const js = ts.transpileModule(fs.readFileSync(full, "utf8"), {
+    compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2020 },
+  }).outputText;
+  const box = { exports: {} };
+  cache.set(full, box.exports);
+  const localRequire = (request) => {
+    if (STUBS[request]) return STUBS[request];
+    if (request.startsWith(".")) return loadTs(path.join(path.dirname(full), `${request}.ts`));
+    return require(request);
+  };
+  new Function("exports", "module", "require", js)(box.exports, box, localRequire);
+  cache.set(full, box.exports);
+  return box.exports;
+}
+
+const { useDesignStore } = loadTs(path.join(ROOT, "A00_Common", "design", "design_store.ts"));
+const edit = loadTs(path.join(ROOT, "B05_Profile", "B05_Profile_UI_Profile_Edit.ts"));
+const { saveDesign, DESIGN_SAVE_ORDER } = loadTs(
+  path.join(ROOT, "A00_Common", "design", "design_save.ts"),
+);
+
+async function run() {
+  const out = {};
+
+  // ① 가게 — 등록 키 밑 · 같은 칸이면 두 가게가 같은 값 · 듣는 쪽
+  const a = useDesignStore("p1", 7);
+  const b = useDesignStore("p1", 99); // 프로젝트 칸은 노선과 무관
+  const heard = [];
+  const off = b.subscribe("pipes", (value) => heard.push(value.length));
+  a.set("pipes", [{ chainage_m: 10, source: "user" }]);
+  out.pipesShared = b.get("pipes");
+  out.pipesKey = [...Array(session.length).keys()].map((i) => session.key(i));
+  off();
+  a.set("pipes", [{ chainage_m: 10 }, { chainage_m: 20 }]);
+  out.heard = heard;
+  out.otherProject = useDesignStore("p2", 7).get("pipes");
+  out.noRoute = useDesignStore("p1", null).get("alignmentDraft");
+  a.set("selection", { chainageM: 12.5, structureId: "s-1" });
+  out.selection = b.get("selection");
+  a.set("pipes", null);
+  a.set("selection", null);
+
+  // ② 계획고 가게 한 벌 — B05 패널 · B06 계획선 편집이 같은 벌
+  const saved = { station_offsets: {}, curve_radii: { "40.000": 30 } };
+  const b05 = edit.createProfileEditStore(7, saved, () => undefined);
+  const b06 = edit.useProfileEditStore(7, saved, () => undefined);
+  b06.replace({ station_offsets: { "20.000": 0.5 }, curve_radii: saved.curve_radii });
+  out.b05SeesB06 = b05.edits().station_offsets;
+  out.b05Dirty = b05.dirty();
+  // B05 가 자기 손에 쥔 값으로 이어 고쳐도 B06 편집이 안 사라짐(옛 두 가게 흠)
+  b05.replace({
+    station_offsets: { ...b05.edits().station_offsets, "60.000": -0.2 },
+    curve_radii: b05.edits().curve_radii,
+  });
+  out.afterBoth = b06.edits().station_offsets;
+  out.draft = useDesignStore(null, 7).get("alignmentDraft").station_offsets;
+  out.pending = edit.pendingAlignment(7).station_offsets;
+  // 되돌리기가 초안을 바꾼 뒤 B05 가 다시 세움 — B06 쪽 손잡이도 같은 벌을 봄
+  useDesignStore(null, 7).set("alignmentDraft", {
+    station_offsets: { "20.000": 0.1 },
+    curve_radii: {},
+  });
+  edit.createProfileEditStore(7, saved, () => undefined);
+  out.rebuiltSeenByB06 = b06.edits().station_offsets;
+
+  // ③ 저장 한 줄기 — 차례 · 기본 창구 · 보기 몫 · 계획고 저장됨 표시
+  calls.length = 0;
+  const ok = await saveDesign({
+    projectId: "p1",
+    routeId: () => 7,
+    prepare: record("prepare"),
+    steps: { pipes: record("pipes:screen") },
+    cross: async (confirm) => calls.push(`cross:${confirm}`),
+    done: async (confirm) => calls.push(`done:${confirm}`),
+    failed: () => calls.push("failed"),
+  });
+  out.saveOk = ok;
+  out.saveCalls = [...calls];
+  out.afterSave = { dirty: b05.dirty(), draft: useDesignStore(null, 7).get("alignmentDraft") };
+  out.order = DESIGN_SAVE_ORDER;
+
+  // ④ 구조물이 실패해도 다음 차례로(알림) · 확정 · 노선 없으면 안 나감
+  calls.length = 0;
+  failStructures = true;
+  await saveDesign(
+    {
+      projectId: "p1",
+      routeId: () => 7,
+      steps: { uphill: record("uphill:screen") },
+      cross: async (confirm) => calls.push(`cross:${confirm}`),
+      failed: () => calls.push("failed"),
+    },
+    { confirm: true },
+  );
+  failStructures = false;
+  out.tolerant = [...calls];
+  calls.length = 0;
+  out.noRouteSave = await saveDesign({
+    projectId: "p1",
+    routeId: () => null,
+    cross: async () => calls.push("cross"),
+    failed: () => calls.push("failed"),
+  });
+  out.noRouteCalls = [...calls];
+
+  // ⑤ [초기화] — 초안 · 한 벌 모두 버림
+  b05.replace({ station_offsets: { "80.000": 1 }, curve_radii: {} });
+  edit.clearAlignmentDrafts();
+  out.cleared = {
+    draft: useDesignStore(null, 7).get("alignmentDraft"),
+    pending: edit.pendingAlignment(7),
+  };
+  return out;
+}
+
+run().then(
+  (out) => console.log(JSON.stringify(out)),
+  (error) => {
+    console.error(error);
+    process.exit(1);
+  },
+);
diff --git a/resources/tester/test_b05_b06_save_roundtrip.py b/resources/tester/test_b05_b06_save_roundtrip.py
index dbbcd235..7bddfb6f 100644
--- a/resources/tester/test_b05_b06_save_roundtrip.py
+++ b/resources/tester/test_b05_b06_save_roundtrip.py
@@ -474,23 +474,25 @@ def _resave_unchanged(flow: Flow) -> None:
     flow.put_structures(flow.api.get(f"{flow.base}/route/structures").json()["structures"])
 
 
+# 두 페이지 모두 저장 한 줄기(`A00_Common/design/design_save.ts` `DESIGN_SAVE_ORDER`)를 탄다 —
+# 관 → 구조물 → 계획고 → 암거 옵션(구간값) → 오르막(상단측 확정) → 횡단(계획서 24-2a).
 def _b05_save(flow: Flow) -> None:
-    """B05 [임시저장] 차례 — 관 → 계획선 → 구조물 → 확정(관 측점 · 상단측) → 구간값 → 횡단."""
+    """B05 [임시저장] — 오르막 차례에 관 측점(비정규 측점)도 함께 확정."""
     flow.put_pipes(flow.b05_pipe_payload())
-    flow.put_alignment()
     flow.put_structures(flow.screen_structures(reread=True))
-    flow.confirm(with_irregular=True)
+    flow.put_alignment()
     flow.flush_culvert()
+    flow.confirm(with_irregular=True)
     flow.save_sections()
 
 
 def _b06_save(flow: Flow) -> None:
-    """B06 [저장] 차례 — 관 → 구간값 → 상단측만 확정 → 계획선 → 구조물 → 횡단."""
+    """B06 [저장] — 오르막 차례는 상단측만 확정."""
     flow.put_pipes(flow.b06_pipe_payload())
+    flow.put_structures(flow.screen_structures(reread=False))
+    flow.put_alignment()
     flow.flush_culvert()
     flow.confirm(with_irregular=False)
-    flow.put_alignment()
-    flow.put_structures(flow.screen_structures(reread=False))
     flow.save_sections()
 
 
diff --git a/resources/tester/test_b05_drainage_side.py b/resources/tester/test_b05_drainage_side.py
new file mode 100644
index 00000000..0650f76e
--- /dev/null
+++ b/resources/tester/test_b05_drainage_side.py
@@ -0,0 +1,90 @@
+# -*- coding: utf-8 -*-
+"""배수유역도 판이 종단 패널을 모르고 홀로 선다(계획서 24-2e).
+
+- 배수유역 파일(`B05_Profile_UI_Drainage_*`)은 종단 패널(`_Profile_*`)이나 B06 을 가져오지 않는다 —
+  종단쪽 일은 `_Panel_Types` 약속(콜백 · 창구)으로만 오간다.
+- 파일마다 700줄 이하.
+- 관 보고 만들기(`_Report`)는 상태 없이 같은 결과: ±0.5m 유역 매칭 · 세월교 유역은 관경 null ·
+  시설 정보 · 출처 기본값 user.
+- `createDrainageSide` 가 켜고 끄는 창구를 낸다(두 보기에서 같은 판).
+"""
+
+import json
+import os
+import subprocess
+from pathlib import Path
+
+import pytest
+
+ROOT = Path(__file__).resolve().parents[2]
+B05 = ROOT / "B05_Profile"
+HERE = os.path.dirname(os.path.abspath(__file__))
+
+
+def _drainage_files() -> list[Path]:
+    return sorted(B05.glob("B05_Profile_UI_Drainage_*.ts"))
+
+
+def test_배수유역_파일은_종단_패널과_B06을_안_가져옴():
+    files = _drainage_files()
+    assert len(files) >= 10
+    for path in files:
+        source = path.read_text(encoding="utf-8")
+        for line in source.splitlines():
+            if not line.lstrip().startswith(("import ", "} from ", "export {", "export type {")):
+                continue
+            assert "UI_Profile_" not in line, (path.name, line)
+            assert "B06_Section" not in line, (path.name, line)
+
+
+def test_배수유역_파일은_700줄_이하():
+    for path in _drainage_files():
+        lines = len(path.read_text(encoding="utf-8").splitlines())
+        assert lines <= 700, (path.name, lines)
+
+
+def test_켜고_끄는_창구():
+    side = (B05 / "B05_Profile_UI_Drainage_Side.ts").read_text(encoding="utf-8")
+    for name in (
+        "createDrainageSide",
+        "createDrainageToggleButton",
+        "setVisible",
+        "onVisibleChange",
+    ):
+        assert name in side
+    assert "root.hidden" in side or "panel.root.hidden" in side
+    # 종단도 판 자리 약속(`DesignSideFactory` · design_profile.ts) 모양 그대로
+    assert "DesignSideBoard" in side and "DesignSideHost" in side
+    assert "export function createDrainageSide(" in side
+    types = (B05 / "B05_Profile_UI_Drainage_Panel_Types.ts").read_text(encoding="utf-8")
+    assert "export interface DrainagePipeReport" in types
+    assert "onPipesChanged?: (pipes: DrainagePipeReport[]) => void;" in types
+
+
+@pytest.fixture(scope="module")
+def reports():
+    proc = subprocess.run(
+        ["node", os.path.join(HERE, "helper_b05_drainage_report.cjs")],
+        capture_output=True,
+        text=True,
+        encoding="utf-8",
+        timeout=60,
+    )
+    assert proc.returncode == 0, proc.stderr
+    return json.loads(proc.stdout)
+
+
+def test_관_보고_유역_매칭과_기본값(reports):
+    first, box, plain = reports
+    # 누가거리는 소수 둘째 자리로 · 담당 유역의 관경 · 설계유량이 붙는다.
+    assert first["chainage_m"] == 40 and first["effective_diameter_mm"] == 800
+    assert first["design_flow_m3s"] == 1.2 and first["facility"] == "pipe"
+    assert first["source"] == "auto"
+    # 세월교 검토 유역은 관경만 null · 설계유량은 남김 · 시설 정보를 데려옴.
+    assert box["chainage_m"] == 100.5 and box["effective_diameter_mm"] is None
+    assert box["design_flow_m3s"] == 3.4
+    assert box["facility"] == "box_culvert" and (box["start_m"], box["end_m"]) == (95, 106)
+    assert box["options"] == {"h": 2} and box["source"] == "user"
+    # 유역 없는 관 — 모두 null · 맨 배관.
+    assert plain["effective_diameter_mm"] is None and plain["design_flow_m3s"] is None
+    assert plain["facility"] == "pipe"
diff --git a/resources/tester/test_b05_routeedit_initial.py b/resources/tester/test_b05_routeedit_initial.py
index 43a2adbd..fb6068d8 100644
--- a/resources/tester/test_b05_routeedit_initial.py
+++ b/resources/tester/test_b05_routeedit_initial.py
@@ -192,3 +192,24 @@ def test_되돌리기_다시하기가_현재_추천을_함께_되살림(results)
         {"logic": "earthwork"},
         None,
     ]
+
+
+def test_노선_추천_다듬기_23_3():
+    """구분선은 [노선 추천] 오른쪽 · 모달 지도는 편집 창 함수를 가져다 씀 · 모달이 라벨 패널 위."""
+    page = os.path.join(HERE, "..", "..", "B05_Profile")
+
+    def read(name):
+        return open(os.path.join(page, name), encoding="utf-8").read()
+
+    chrome = read("B05_Profile_UI_RouteEdit_Chrome.ts")
+    rec = chrome.index('data-act="recommend"')
+    divider = chrome.index("b05-routeedit__divider", rec)
+    assert rec < divider < chrome.index('data-act="contour-minor"')
+    assert chrome.count("b05-routeedit__divider") == 2
+    shared = read("B05_Profile_UI_RouteEdit_Recommend_Map.ts")
+    for name in ("bindRouteEditNavigation", "createMapRotation", "fitCanvas", "metricToScreen"):
+        assert f"{name}(" in shared
+    css = read("B05_Profile_UI_Style_RouteRecommend.css")
+    assert "calc(var(--z-modal, 1000) + 2)" in css  # 라벨 패널(+1) 위
+    assert "writing-mode: vertical-lr" in css
+    assert 'backdropClass: "b05-routerec-backdrop"' in read("B05_Profile_UI_RouteEdit_Recommend.ts")
diff --git a/resources/tester/test_b06_save_channels.py b/resources/tester/test_b06_save_channels.py
index 59a1a75a..1ba209c4 100644
--- a/resources/tester/test_b06_save_channels.py
+++ b/resources/tester/test_b06_save_channels.py
@@ -63,14 +63,36 @@ def test_창구_넷은_초안이_비면_요청을_안_낸다():
 
 
 def test_저장이_창구를_다섯_다_거친다():
-    """순서·개수가 바뀌면 위 성질의 뜻도 바뀐다 — 자리를 못박는다."""
-    persist = (ROOT / "B06_Section" / "B06_Section_UI_Page_Persist.ts").read_text(encoding="utf-8")
+    """순서·개수가 바뀌면 위 성질의 뜻도 바뀐다 — 자리를 못박는다.
+
+    차례는 저장 한 줄기(`A00_Common/design/design_save.ts`) 한 곳에 있다(계획서 24-2a) —
+    B05 [임시저장] · B06 [저장] · [확정]이 모두 그것을 탄다."""
+    save = (ROOT / "A00_Common" / "design" / "design_save.ts").read_text(encoding="utf-8")
     for token in (
-        "flushCulvertOptions()",
+        "flushCulvertOptions(",
         "flushUphillOverrides(",
         "flushPendingPipes(",
         "flushPendingStructures(",
     ):
-        assert token in persist, f"{token} 가 저장 앞단에서 사라짐"
-    # 하나가 실패해도 나머지가 나가야 한다 — 관·구조물은 `catch` 로 감싸 둔다.
-    assert persist.count(".catch(") >= 3, "실패 격리(catch)가 줄었음"
+        assert token in save, f"{token} 가 저장 한 줄기에서 사라짐"
+    persist = (ROOT / "B06_Section" / "B06_Section_UI_Page_Persist.ts").read_text(encoding="utf-8")
+    assert "ctx.flushCulvertOptions()" in persist, "B06 조정창 구간값이 저장에서 빠짐"
+    # 하나가 실패해도 나머지가 나가야 한다 — 관·구조물·계획선은 `catch` 로 감싸 둔다.
+    assert save.count(".catch(") >= 3, "실패 격리(catch)가 줄었음"
+    order = save[save.index("DESIGN_SAVE_ORDER = [") :]
+    order = order[: order.index("]")]
+    names = ["pipes", "structures", "alignment", "culvertOptions", "uphill", "cross"]
+    assert [order.index(f'"{n}"') for n in names] == sorted(order.index(f'"{n}"') for n in names), (
+        "저장 차례가 바뀜 — 관 → 구조물 → 계획고 → 암거 옵션 → 오르막 → 횡단"
+    )
+
+
+def test_두_페이지가_저장_한_줄기를_탄다():
+    """B05 [임시저장] · B06 [저장] · [확정]이 창구를 따로 부르지 않는다(계획서 24-2a)."""
+    actions = (ROOT / "B05_Profile" / "B05_Profile_UI_Page_Actions.ts").read_text(encoding="utf-8")
+    persist = (ROOT / "B06_Section" / "B06_Section_UI_Page_Persist.ts").read_text(encoding="utf-8")
+    for name, text in (("B05", actions), ("B06", persist)):
+        assert "saveDesign(" in text, f"{name} 가 저장 한 줄기를 안 탐"
+        for token in ("flushPendingPipes(", "flushPendingStructures(", "flushUphillOverrides("):
+            assert token not in text, f"{name} 가 {token} 를 따로 부름 — 차례가 갈림"
+    assert "{ confirm: true }" in persist, "[확정]이 한 줄기를 안 탐"
diff --git a/resources/tester/test_b06_save_recompute.py b/resources/tester/test_b06_save_recompute.py
index 162bceeb..c4ce42d8 100644
--- a/resources/tester/test_b06_save_recompute.py
+++ b/resources/tester/test_b06_save_recompute.py
@@ -8,6 +8,8 @@
 
 ⇒ `saveCurrentSections`·`confirmCurrentSections` 가 `collectSectionEdits` **앞에서**
   `ctx.reconcileDesigns()` 를 부른다. 순서가 뒤집히면 옛 면적이 그대로 실린다.
+  (계획서 24-2a — 둘 다 저장 한 줄기 `saveDesign` 을 탄다: B06 창구 `sectionSaveContext` 의
+  `prepare` 가 재계산, `cross` 가 면적 수집이고, `saveDesign` 이 `prepare` 를 먼저 부른다.)
 """
 
 from __future__ import annotations
@@ -17,6 +19,7 @@ from pathlib import Path
 ROOT = Path(__file__).resolve().parents[2]
 PERSIST = ROOT / "B06_Section" / "B06_Section_UI_Page_Persist.ts"
 PAGE = ROOT / "B06_Section" / "B06_Section_UI_Page.ts"
+SAVE = ROOT / "A00_Common" / "design" / "design_save.ts"
 
 
 def _body(source: str, marker: str) -> str:
@@ -30,11 +33,17 @@ def test_저장이_면적을_모으기_전에_다시_계산한다() -> None:
         "export async function saveCurrentSections",
         "export async function confirmCurrentSections",
     ):
-        body = _body(text, marker)
-        assert "ctx.reconcileDesigns()" in body, f"{marker} 가 재계산을 안 부른다"
-        assert body.index("ctx.reconcileDesigns()") < body.index("collectSectionEdits(ctx)"), (
-            f"{marker}: 재계산이 면적 수집보다 뒤에 있다 — 옛 면적이 실린다"
+        assert "saveDesign(sectionSaveContext(" in _body(text, marker)[:400], (
+            f"{marker} 가 B06 창구로 저장 한 줄기를 안 탄다"
         )
+    body = _body(text, "function sectionSaveContext")
+    assert "prepare: () => ctx.reconcileDesigns()" in body, "B06 창구가 재계산을 안 넘긴다"
+    assert "collectSectionEdits(ctx)" in body[body.index("cross:") :], "면적 수집이 횡단 차례 밖"
+    save = SAVE.read_text(encoding="utf-8")
+    run = _body(save, "export async function saveDesign")
+    assert run.index("ctx.prepare?.()") < run.index("ctx.cross(confirm)"), (
+        "저장 한 줄기가 재계산보다 면적 수집을 먼저 부른다 — 옛 면적이 실린다"
+    )
 
 
 def test_페이지가_재계산_통로를_이어_준다() -> None:
diff --git a/resources/tester/test_design_store_save.py b/resources/tester/test_design_store_save.py
new file mode 100644
index 00000000..16e4b994
--- /dev/null
+++ b/resources/tester/test_design_store_save.py
@@ -0,0 +1,80 @@
+# -*- coding: utf-8 -*-
+"""설계 가게 한 곳 · 저장 한 줄기(계획서 24-2a) 회귀검증.
+
+- 가게(`design_store`) — 밑은 등록 키 · 같은 칸이면 어느 가게든 같은 값 · 듣는 쪽.
+- 계획고 가게 한 벌 — B05 종단 패널 · B06 계획선 편집이 같은 벌을 씀(옛 두 가게 덮어쓰기 흠).
+- 저장 한 줄기(`saveDesign`) — 관 → 구조물 → 계획고 → 암거 옵션 → 오르막 → 횡단 · 관 · 구조물 ·
+  계획고는 실패해도 다음 차례로.
+Node 헬퍼(`helper_design_store_save.cjs`)가 TS 를 트랜스파일해 돌린다.
+"""
+
+import json
+import os
+import subprocess
+
+import pytest
+
+HERE = os.path.dirname(os.path.abspath(__file__))
+
+
+@pytest.fixture(scope="module")
+def out():
+    proc = subprocess.run(
+        ["node", os.path.join(HERE, "helper_design_store_save.cjs")],
+        capture_output=True,
+        text=True,
+        encoding="utf-8",
+        timeout=60,
+    )
+    assert proc.returncode == 0, proc.stderr
+    return json.loads(proc.stdout)
+
+
+def test_가게는_등록_키_밑_같은_칸은_같은_값(out):
+    assert out["pipesShared"] == [{"chainage_m": 10, "source": "user"}]
+    assert out["pipesKey"] == ["aislo:draft:pipes:p1"]
+    assert out["heard"] == [1], "끊은 뒤에는 안 불려야 함"
+    assert out["otherProject"] is None
+    assert out["noRoute"] is None
+    assert out["selection"] == {"chainageM": 12.5, "structureId": "s-1"}
+
+
+def test_계획고_가게_한_벌(out):
+    assert out["b05SeesB06"] == {"20.000": 0.5}
+    assert out["b05Dirty"] is True
+    assert out["afterBoth"] == {"20.000": 0.5, "60.000": -0.2}
+    assert out["draft"] == out["afterBoth"] == out["pending"]
+    assert out["rebuiltSeenByB06"] == {"20.000": 0.1}
+
+
+def test_저장_차례(out):
+    assert out["order"] == ["pipes", "structures", "alignment", "culvertOptions", "uphill", "cross"]
+    assert out["saveOk"] is True
+    assert out["saveCalls"] == [
+        "overlay:on",
+        "prepare",
+        "pipes",
+        "pipes:screen",
+        "structures",
+        'alignment:7:{"20.000":0.1}',
+        "culvert:aislo:draft:culvertopt:p1:7",
+        "uphill",
+        "cross:false",
+        "done:false",
+        "overlay:off",
+    ]
+    assert out["afterSave"] == {"dirty": False, "draft": None}
+
+
+def test_구조물_실패는_알리고_넘어감_확정_노선없음(out):
+    calls = out["tolerant"]
+    assert "toast:error" in calls
+    assert calls.index("structures") < calls.index("toast:error") < calls.index("uphill:screen")
+    assert "uphill" not in calls, "보기 몫이 기본 창구를 갈음"
+    assert calls[-2:] == ["cross:true", "overlay:off"]
+    assert "failed" not in calls
+    assert out["noRouteSave"] is False and out["noRouteCalls"] == []
+
+
+def test_초기화는_초안과_한_벌을_버림(out):
+    assert out["cleared"] == {"draft": None, "pending": None}
diff --git a/resources/tester/test_route_initial.py b/resources/tester/test_route_initial.py
index b9bfe580..6d5300a4 100644
--- a/resources/tester/test_route_initial.py
+++ b/resources/tester/test_route_initial.py
@@ -113,6 +113,60 @@ def test_each_branch_best_at_own_goal(hill: Terrain) -> None:
     assert all(top <= r["metrics"]["max_grade_pct"] + 1e-6 for r in runs.values())
 
 
+# 비중 끝값 · 단조(PLAN 23-3e) — 예상 · 토공 · 기울기 한쪽 100 이면 그 갈래와 같은 선
+ENDS = {
+    "follow": {"expected": 100, "earthwork": 0, "grade": 0},
+    "earthwork": {"expected": 0, "earthwork": 100, "grade": 0},
+    "gentle": {"expected": 0, "earthwork": 0, "grade": 100},
+}
+# 예상 100 → 0(나머지 반반) · 기울기 100 → 토공 100
+TOWARD_OTHERS = [
+    (100, 0, 0),
+    (90, 5, 5),
+    (75, 12.5, 12.5),
+    (50, 25, 25),
+    (25, 37.5, 37.5),
+    (0, 50, 50),
+]
+TOWARD_EARTH = [(0, 0, 100), (0, 25, 75), (0, 50, 50), (0, 75, 25), (0, 100, 0)]
+
+
+def _gap(first: dict, second: dict) -> float:
+    return LineString(first["planned"]).hausdorff_distance(LineString(second["planned"]))
+
+
+def _check_weight_ends(run) -> None:
+    for mode, weights in ENDS.items():
+        end, own = run("weighted", weights), run(mode)
+        assert _gap(end, own) < 0.01, (mode, _gap(end, own))
+        assert end["nodes"] == own["nodes"]
+        assert end["metrics"]["length_m"] == own["metrics"]["length_m"]
+
+
+def _check_weight_monotone(run) -> None:
+    """비중을 한쪽으로 옮기면 그 목표 값은 나빠지지 않음(후보가 같으니 가중합 최소의 성질)."""
+
+    def metrics(steps):
+        keys = ("expected", "earthwork", "grade")
+        return [run("weighted", dict(zip(keys, step)))["metrics"] for step in steps]
+
+    offsets = [m["offset_avg_m"] for m in metrics(TOWARD_OTHERS)]
+    assert offsets == sorted(offsets), offsets
+    earth = metrics(TOWARD_EARTH)
+    cuts = [m["cut_m3"] + m["fill_m3"] for m in earth]
+    tops = [m["max_grade_pct"] for m in earth]
+    assert cuts == sorted(cuts, reverse=True), cuts
+    assert tops == sorted(tops), tops
+
+
+def test_weight_ends_match_branches(hill: Terrain) -> None:
+    _check_weight_ends(lambda mode, weights=None: _run(hill, mode, weights=weights))
+
+
+def test_weight_moves_monotone(hill: Terrain) -> None:
+    _check_weight_monotone(lambda mode, weights=None: _run(hill, mode, weights=weights))
+
+
 def test_follow_stays_on_expected_where_allowed() -> None:
     """고른 경사(2 %) — 추종은 예상노선을 그대로(격자 칸 반 안쪽)."""
     ramp = _terrain(lambda xx, yy: 0.02 * xx)
@@ -301,18 +355,19 @@ def project_runs() -> dict:
     streams = stream_lines(_reproject_features(features, to_metric))
     route = read_planned_route_csv(expected_route_csv_path(PROJECT))
     expected = [(float(v.x), float(v.y)) for v in route.vertices]
-    return {
-        mode: generate_initial_route(
+
+    def run(mode: str, weights: dict | None = None) -> dict:
+        return generate_initial_route(
             expected,
             terrain,
             streams,
             mode=mode,
-            weights=None,
+            weights=weights,
             max_grade=GRADE,
             min_radius_m=RADIUS,
         )
-        for mode in MODES
-    }
+
+    return {**{mode: run(mode) for mode in MODES}, "run": run}
 
 
 def test_project_follow_is_preprocess_initial(project_runs: dict) -> None:
@@ -331,7 +386,7 @@ def test_project_follow_is_preprocess_initial(project_runs: dict) -> None:
 
 def test_project_branches_differ_by_goal(project_runs: dict) -> None:
     """갈래끼리 선이 수 m 이상 갈리고 · 각 갈래가 제 목표 비교값에서 가장 좋음."""
-    searched = {mode: project_runs[mode] for mode in SEARCHED}
+    searched = {mode: project_runs[mode] for mode in SEARCHED}  # 비중은 50/25/25
     for first in SEARCHED:
         for second in SEARCHED:
             if first < second:
@@ -344,3 +399,13 @@ def test_project_branches_differ_by_goal(project_runs: dict) -> None:
     assert all(top <= r["metrics"]["max_grade_pct"] for r in searched.values())
     for result in searched.values():
         assert result["metrics"]["over_limit"]["total"] == len(result["metrics"]["violations"])
+
+
+def test_project_weight_ends_match_branches(project_runs: dict) -> None:
+    """랩탑_보조 — 비중 100/0/0 = 추적(1078.01 m) · 0/100/0 = 토공 최소 · 0/0/100 = 기울기 순한."""
+    _check_weight_ends(project_runs["run"])
+    assert project_runs["run"]("weighted", ENDS["follow"])["metrics"]["length_m"] == 1078.01
+
+
+def test_project_weight_moves_monotone(project_runs: dict) -> None:
+    _check_weight_monotone(project_runs["run"])
diff --git a/ui_template/ui_template_locale_b2.ts b/ui_template/ui_template_locale_b2.ts
index 9a92cdd0..bcfd5c84 100644
--- a/ui_template/ui_template_locale_b2.ts
+++ b/ui_template/ui_template_locale_b2.ts
@@ -144,6 +144,9 @@ export const ui_locales_b2 = {
      이름이 혼선을 줬다 — [저장]으로 바꾼다(2026-08-28 사용자 지시). */
   B05_Route_Btn_TempSave: ["저장", "Save"],
   B05_Route_Btn_GoCross: ["횡단 이동", "Go to Cross"],
+  /* 좌측 패널 아래 단추 [보기 전환] — 가려는 쪽 이름(계획서 24-2b). */
+  Design_Btn_ToCross: ["횡단 보기", "Cross view"],
+  Design_Btn_ToProfile: ["종단 보기", "Profile view"],
   B05_Route_TempSave_Success: ["변경 내용을 저장했습니다.", "Changes saved."],
   B05_Route_TempSave_Failed: ["저장에 실패했습니다.", "Failed to save."],
   B05_Route_Reset_Confirm: [