Merge remote-tracking branch 'origin/sub_laptop_1' into main_laptop_1

B05_Profile/B05_Profile_UI_Profile_Panel.ts

@@ -335,9 +335,35 @@ export function createRouteProfilePanel(
     });
   }
 
-  /* 줌·Y레인지 조작구 — 상태를 페이지가 들고 있어 편집·재계산으로 다시 그려도 유지된다. */
+  /* 줌 조작구(가로 배율) — 상태를 페이지가 들고 있어 편집·재계산으로 다시 그려도 유지된다.
+     세로는 보이는 구간에 맞춰 자동이라 사람이 맞출 것이 없다(2026-09-04 사용자 확정). */
   const profileZoom = createProfileZoom(() => draw());
 
+  /** 세로 자동 맞춤이 지금 쓰는 Y 창. 계획고를 끄는 동안에는 이 값을 붙잡는다. */
+  let elevationWindow: { min: number; max: number } | undefined;
+  /** 계획고 편집 버튼(▲▼)을 누르고 있는 중인가 — 그동안 Y 축을 고정한다. */
+  let heightEditing = false;
+  const holdElevationRange = (
+    next: { min: number; max: number } | null,
+  ): { min: number; max: number } | undefined => {
+    if (heightEditing) return elevationWindow;
+    elevationWindow = next ?? undefined;
+    return elevationWindow;
+  };
+  // 끌어 올리는 동안 축까지 따라 움직이면 조작 감각이 깨진다 — 손을 뗀 뒤 한 번만 다시 맞춘다.
+  body.addEventListener("pointerdown", (event) => {
+    if (!(event.target as HTMLElement).closest(".b05-profile-edit__btn")) return;
+    heightEditing = true;
+    const release = (): void => {
+      heightEditing = false;
+      window.removeEventListener("pointerup", release);
+      window.removeEventListener("pointercancel", release);
+      draw();
+    };
+    window.addEventListener("pointerup", release);
+    window.addEventListener("pointercancel", release);
+  });
+
   /* [직선화]·[쉬프트]·되돌리기·방향키 배선은 `_Panel_Tools` 로 뺐다(700줄 한계). */
   const { tools, history, handleToolPick } = createPanelTools({
     root,
@@ -474,6 +500,7 @@ export function createRouteProfilePanel(
       applyEdits,
       handleToolPick,
       zoom: profileZoom.state,
+      holdElevationRange,
       toolActive: () => tools.mode() !== "none",
       selectedRuns: () => tools.selectedRuns(),
       stationIdAtStructure,
@@ -481,6 +508,21 @@ export function createRouteProfilePanel(
     });
   }
 
+  /** 가로 스크롤이 이만큼 멈춰 있으면 보이는 구간이 정해진 것으로 보고 세로를 다시 맞춘다. */
+  const SCROLL_SETTLE_MS = 160;
+  /** 마지막으로 세로를 맞춘 가로 위치 — 같은 자리면 다시 그리지 않는다(재구성 되먹임 차단). */
+  let settledScrollLeft = 0;
+  let scrollSettleTimer = 0;
+  // 스크롤하는 내내 축이 출렁이면 어지럽다 — 멈춘 뒤에 한 번만 다시 맞춘다(2026-09-04).
+  body.addEventListener("scroll", () => {
+    window.clearTimeout(scrollSettleTimer);
+    scrollSettleTimer = window.setTimeout(() => {
+      if (heightEditing || Math.abs(body.scrollLeft - settledScrollLeft) < 1) return;
+      settledScrollLeft = body.scrollLeft;
+      draw();
+    }, SCROLL_SETTLE_MS);
+  });
+
   // 종단면도는 가로로 매우 길다. 세로 휠을 가로 스크롤로 돌려 스크롤바를 잡지 않고도
   // 노선을 훑을 수 있게 한다 (Shift+휠은 브라우저 기본 가로 스크롤이라 그대로 둔다).
   body.addEventListener(

B05_Profile/B05_Profile_UI_Profile_Render.ts

@@ -12,7 +12,11 @@ import {
   createLongitudinalProfile,
   longitudinalMinimumWidth,
 } from "../B06_Section/B06_Section_UI_Longitudinal";
-import { hasStaleDesigns, LONG_PAD } from "../B06_Section/B06_Section_UI_Section_Common";
+import {
+  hasStaleDesigns,
+  LONG_PAD,
+  windowElevationRange,
+} from "../B06_Section/B06_Section_UI_Section_Common";
 import type { SectionDetailResponse } from "../B06_Section/B06_Section_Api_Fetch";
 import { normalizedLongitudinal, toDesignProfile } from "./B05_Profile_UI_Profile_Data";
 import {
@@ -84,8 +88,15 @@ export interface ProfileRenderContext {
   applyEdits: (next: AlignmentEdits) => void;
   /** [직선화]·[쉬프트] 도구가 그래프 클릭을 먼저 먹는지(먹었으면 기본 선택을 건너뛴다). */
   handleToolPick: (chainageM: number | null) => boolean;
-  /** 가로 폭 배수·세로 표시 표고창(줌 조작구 상태) — 2026-09-04. */
+  /** 가로 폭 배수(줌 조작구 상태) — 세로는 자동이라 배율이 없다(2026-09-04). */
   zoom: () => ProfileZoomState;
+  /**
+   * 세로 자동 맞춤의 Y 창을 넘겨 주고 **실제로 쓸 창**을 돌려받는다. 계획고를 끌어 올리는
+   * 동안에는 본체가 직전 창을 붙잡아 돌려준다 — 축이 손 따라 움직이면 조작 감각이 깨진다.
+   */
+  holdElevationRange: (
+    next: { min: number; max: number } | null,
+  ) => { min: number; max: number } | undefined;
   /** 그래프 x → chainage 역변환이 필요한 도구 판정용 — 클릭 지점의 누가거리. */
   toolActive: () => boolean;
   /** [쉬프트]로 고른 직선 구간 — 그래프에 빨갛게 강조한다(2026-09-03). */
@@ -222,13 +233,26 @@ export function renderProfile(ctx: ProfileRenderContext): void {
     ...graphData,
     stations: [...regular, ...injected].sort((a, b) => a.chainage_m - b.chainage_m),
   };
+  // 세로 자동 맞춤 — 지금 화면에 보이는 누가거리 구간만 보고 Y 창을 잡는다(2026-09-04
+  // 사용자 확정). 가로 스크롤 위치(`scrollLeft`)와 본문 폭이 곧 보이는 구간이다.
+  const toChainage = chainageInverter(longitudinal, width, originOffset);
+  const maxChainageM = maxChainageOf(longitudinal);
+  const viewFromM = Math.max(0, toChainage(scrollLeft));
+  const viewToM = Math.min(maxChainageM, toChainage(scrollLeft + body.clientWidth));
+  const elevationRange = ctx.holdElevationRange(
+    windowElevationRange(
+      [graphLongitudinal.samples, ...designProfiles.map((profile) => profile.samples)],
+      viewFromM,
+      viewToM,
+    ) ?? null,
+  );
   let yAxis: { padLeft: number; ticks: Array<{ y: number; label: string }> } | null = null;
   chartWrap.append(
     createLongitudinalProfile(
       graphLongitudinal,
       selectedStationId,
-      // 세로 배율 = 표시 표고창 높이의 역수(1 = 표고 전범위).
-      zoom.y,
+      // 세로 배율은 1 고정 — 확대·축소 몫은 아래 `elevationRange`(자동 맞춤)가 맡는다.
+      1,
       undefined,
       ctx.selectStation,
       stationInterval,
@@ -252,8 +276,10 @@ export function renderProfile(ctx: ProfileRenderContext): void {
       // 올린다. 19px는 라벨-버튼 사이가 너무 벌어져 70% 수준(15px)으로 줄였다
       // (2026-08-04 사용자 지시). B06은 편집 버튼이 없어 0 유지.
       15,
-      // 표시 표고창의 중심 이동(창 높이 대비 비율) — ▲▼ 버튼이 옮긴다.
-      zoom.offsetRatio,
+      // 창 중심 이동은 쓰지 않는다 — 보이는 구간에 맞춘 Y 창이 이미 가운데다.
+      0,
+      // 보이는 구간의 지반·계획선 범위(위아래 10% 여유는 렌더러가 붙인다).
+      elevationRange,
     ),
   );
   // 구조물 우클릭 메뉴 — 측점선 위면 삭제, 빈 자리면 배관 추가. 이동도 여기(측점선 끌기)서 한다.
@@ -373,6 +399,9 @@ export function renderProfile(ctx: ProfileRenderContext): void {
         // 범례·기준 버튼 오버레이(top 34px)가 곡선 위에 떠서 그만큼 상단 여유를 준다
         // (2026-08-05 사용자 보고: 버튼과 커브 겹침).
         padTop: 40,
+        // 유토곡선 Y 도 종단과 같은 창을 본다 — 전 구간 최대 토량으로 고정하면 확대해도
+        // 곡선이 납작하게 눌린다(2026-09-04 사용자 지시).
+        viewRange: { fromM: viewFromM, toM: viewToM },
       },
       stationInterval: stationIntervalM ?? 1,
       widthPx: width,

B05_Profile/B05_Profile_UI_Profile_Zoom.ts

@@ -1,38 +1,30 @@
 /* =============================================================================
  * B05_Profile_UI_Profile_Zoom.ts
- * 종단면도 줌·Y레인지 조작구 (2026-09-04 사용자 지시).
+ * 종단면도 줌 조작구 — 버튼 셋(줌인·줌아웃·초기화), 2026-09-04 사용자 확정.
  *
- * 공사 범위가 넓고 고저차가 크면 종단 그래프가 눌려 읽히지 않는다. 조작은 두 갈래다.
+ * 공사 범위가 넓으면 종단 그래프가 눌려 읽히지 않는다. 사람이 맞출 것은 **가로 하나**다.
  *
  *   X (가로) — **폭 배수**다. SVG transform 으로 늘리면 그래프만 커지고 측점 테이블·
  *              계획고 편집 버튼층·구조물 알약 레인이 어긋난다(넷이 같은 `chainageMapper`
  *              를 쓴다). 캔버스 폭 자체를 키우고 가로 스크롤로 훑는다.
- *   Y (세로) — **표시 표고창**이다(제안 A, 2026-09-04 사용자 확정). 창 높이 = 전범위 ÷ 배율,
- *              창 중심은 창 높이 대비 비율로 위·아래로 옮긴다. 세로 스크롤이 생기지 않아
- *              X축·측점 라벨·편집 버튼이 항상 바닥에 남는다.
+ *   Y (세로) — **프로그램이 자동으로 맞춘다**. 보이는 구간의 지반·계획선 범위에 맞춰
+ *              잡으므로(`windowElevationRange`) 세로 배율·창 이동 버튼이 필요 없어졌다.
+ *              옛 `⇕+`·`⇕−`·`▲`·`▼` 네 버튼은 그래서 없앴다.
+ *
+ * **배율 1 = 기본값이자 축소 한계**(사용자 확정) — 폭맞춤보다 더 줄이면 측점이 겹쳐
+ * 읽을 수 없다. 한계에 닿은 버튼은 흐리게 죽인다.
  *
  * 배율은 페이지가 들고 있다 — 편집·재계산으로 다시 그려도 유지된다(B06 `cardZoomStates` 규칙).
- * 버튼 양식은 횡단도 줌 버튼세트(`b06-cross-card__zoom-btn`)와 같고, 설명은 툴팁이다.
  * ========================================================================== */
 
 /** 한 번 누를 때 배율 배수. 횡단도 줌(1/0.85)보다 성글게 — 폭 배수라 한 칸이 크게 느껴진다. */
 const ZOOM_STEP = 1.25;
 /** 가로 폭 배수 상한 — 이 이상은 캔버스가 수만 px이 되어 브라우저가 버겁다. */
 const MAX_X = 8;
-/** 세로 배율 상한. 전범위의 1/20 까지 좁혀 본다. */
-const MAX_Y = 20;
-/** 창 중심 이동 한 번의 몫 — 창 높이의 10%. */
-const OFFSET_STEP = 0.1;
-/** 창 중심 이동 한계 — 전범위 밖으로 완전히 벗어나지 않게 창 높이의 ±2배까지. */
-const MAX_OFFSET = 2;
 
 export interface ProfileZoomState {
-  /** 가로 폭 배수(1 = 현행 폭맞춤). */
+  /** 가로 폭 배수(1 = 현행 폭맞춤 = 기본값·축소 한계). */
   x: number;
-  /** 세로 배율(1 = 표고 전범위). */
-  y: number;
-  /** 창 중심 이동 — 창 높이 대비 비율(+ 가 위쪽). */
-  offsetRatio: number;
 }
 
 export interface ProfileZoom {
@@ -45,12 +37,12 @@ const clamp = (value: number, min: number, max: number): number =>
   Math.min(max, Math.max(min, value));
 
 export function createProfileZoom(onChange: () => void): ProfileZoom {
-  const state: ProfileZoomState = { x: 1, y: 1, offsetRatio: 0 };
+  const state: ProfileZoomState = { x: 1 };
 
   const bar = document.createElement("div");
   bar.className = "b05-profile__zoom";
 
-  function add(label: string, title: string, action: () => void): void {
+  function add(label: string, title: string, action: () => void): HTMLButtonElement {
     const button = document.createElement("button");
     button.type = "button";
     button.className = "b05-profile__zoom-btn";
@@ -60,34 +52,29 @@ export function createProfileZoom(onChange: () => void): ProfileZoom {
       // 카드·측점 선택으로 번지면 그래프를 다시 그리며 방금 맞춘 배율이 날아간다.
       event.stopPropagation();
       action();
+      syncDisabled();
       onChange();
     });
     bar.append(button);
+    return button;
   }
 
-  add("+", "가로 확대 — 측점 간격을 넓혀 폅니다 (가로 스크롤로 훑음)", () => {
+  const zoomIn = add("+", "가로 확대 — 측점 간격을 넓혀 폅니다 (세로는 자동으로 맞춥니다)", () => {
     state.x = clamp(state.x * ZOOM_STEP, 1, MAX_X);
   });
-  add("−", "가로 축소", () => {
+  const zoomOut = add("−", "가로 축소 — 기본 폭(화면 맞춤)까지만 줄어듭니다", () => {
     state.x = clamp(state.x / ZOOM_STEP, 1, MAX_X);
   });
-  add("⇕+", "세로 확대 — 표시 표고 폭을 좁혀 고저차를 크게 봅니다", () => {
-    state.y = clamp(state.y * ZOOM_STEP, 1, MAX_Y);
-  });
-  add("⇕−", "세로 축소", () => {
-    state.y = clamp(state.y / ZOOM_STEP, 1, MAX_Y);
-  });
-  add("▲", "표시 표고창을 위로 (창 높이의 10%)", () => {
-    state.offsetRatio = clamp(state.offsetRatio + OFFSET_STEP, -MAX_OFFSET, MAX_OFFSET);
-  });
-  add("▼", "표시 표고창을 아래로 (창 높이의 10%)", () => {
-    state.offsetRatio = clamp(state.offsetRatio - OFFSET_STEP, -MAX_OFFSET, MAX_OFFSET);
-  });
-  add("⤢", "가로·세로 배율과 표시 표고창을 처음 상태로", () => {
+  add("⤢", "기본 상태로 — 가로 폭맞춤, 세로 자동", () => {
     state.x = 1;
-    state.y = 1;
-    state.offsetRatio = 0;
   });
 
+  /** 한계에 닿은 버튼은 눌러도 변화가 없다 — 흐리게 죽여 그 사실을 보인다. */
+  function syncDisabled(): void {
+    zoomOut.disabled = state.x <= 1 + 1e-9;
+    zoomIn.disabled = state.x >= MAX_X - 1e-9;
+  }
+  syncDisabled();
+
   return { bar, state: () => ({ ...state }) };
 }

B05_Profile/B05_Profile_UI_Style_Table.css

@@ -509,7 +509,13 @@
   border-left: none;
 }
 
-.b05-profile__zoom-btn:hover {
+.b05-profile__zoom-btn:hover:not(:disabled) {
   color: var(--color-text);
   background: var(--color-surface);
 }
+
+/* 배율 한계(축소는 폭맞춤, 확대는 8배)에 닿은 버튼 — 눌러도 변화가 없으니 흐리게 죽인다. */
+.b05-profile__zoom-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}

B06_Section/B06_Section_UI_Longitudinal.ts

@@ -174,6 +174,12 @@ export function createLongitudinalProfile(
    * 표고(m)가 아니라 비율이라 호출부가 노선 표고 범위를 몰라도 된다(2026-09-04).
    */
   elevationOffsetRatio = 0,
+  /**
+   * **보이는 구간의 표고 범위**(자동 세로 맞춤, 2026-09-04 사용자 확정). 넘기면 전 구간
+   * 최저~최고 대신 이 범위로 Y 창을 잡는다 — 가로로 확대했을 때 그 구간의 고저차가
+   * 화면 높이를 채운다. 공통 Y 스케일(`yScaleOptions`)이 있으면 그쪽이 우선이다.
+   */
+  elevationRange?: { min: number; max: number },
 ): HTMLElement {
   const samples = data.samples.filter(validElevation);
   if (samples.length < 2) return emptyView(L("B06_Profile_View_NoLongitudinal"));
@@ -198,8 +204,10 @@ export function createLongitudinalProfile(
   const elevations = samples
     .map((sample) => sample.elevation_m)
     .concat(designProfiles.flatMap((profile) => profile.samples.map((s) => s.elevation_m)));
-  const rawMin = yScaleOptions?.globalMinElevation ?? Math.min(...elevations);
-  const rawMax = yScaleOptions?.globalMaxElevation ?? Math.max(...elevations);
+  const rawMin =
+    yScaleOptions?.globalMinElevation ?? elevationRange?.min ?? Math.min(...elevations);
+  const rawMax =
+    yScaleOptions?.globalMaxElevation ?? elevationRange?.max ?? Math.max(...elevations);
   const elevationMid = (rawMin + rawMax) / 2;
   const exaggeration = Math.max(verticalExaggeration, 0.1);
   // 데이터 영역은 축 프레임(LONG_PAD)보다 originOffsetPx만큼 더 좁게 잡아,

B06_Section/B06_Section_UI_Section_Common.ts

@@ -223,6 +223,47 @@ export function calculateYScale(
   };
 }
 
+/**
+ * **보이는 구간의 표고 최저·최고**(종단 그래프 세로 자동 맞춤, 2026-09-04 사용자 확정).
+ *
+ * 가로로 확대하면 화면에는 노선의 일부만 남는데 Y 축은 전 구간 범위로 잡혀 있어 곡선이
+ * 납작하게 눌린다. 보이는 누가거리 구간만 훑어 그 구간의 범위를 돌려준다 — B05 종단과
+ * B06 종단이 같은 함수를 쓴다.
+ *
+ * 창 밖 **이웃 한 점**까지 함께 본다. 창 경계를 걸친 선분이 창 안에서 위로 솟는데 그
+ * 바깥 끝점을 빼면 선이 축 위로 삐져나온다.
+ */
+export function windowElevationRange(
+  series: ReadonlyArray<ReadonlyArray<{ chainage_m?: number; elevation_m?: number | null }>>,
+  fromM: number,
+  toM: number,
+): { min: number; max: number } | undefined {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const list of series) {
+    let first = -1;
+    let last = -1;
+    for (let index = 0; index < list.length; index += 1) {
+      const chainage = list[index].chainage_m ?? 0;
+      if (chainage < fromM || chainage > toM) continue;
+      if (first < 0) first = index;
+      last = index;
+    }
+    if (first < 0) continue;
+    for (
+      let index = Math.max(0, first - 1);
+      index <= Math.min(list.length - 1, last + 1);
+      index += 1
+    ) {
+      const elevation = list[index].elevation_m;
+      if (typeof elevation !== "number" || !Number.isFinite(elevation)) continue;
+      if (elevation < min) min = elevation;
+      if (elevation > max) max = elevation;
+    }
+  }
+  return min <= max ? { min, max } : undefined;
+}
+
 export function emptyView(message: string): HTMLElement {
   const empty = document.createElement("div");
   empty.className = "b06-section__empty";

B06_Section/B06_Section_UI_Section_View.ts

@@ -59,7 +59,6 @@ import {
   unwrapChart,
 } from "./B06_Section_UI_Section_View_Panel";
 import {
-  calculateYScale,
   CROSS_GRID_GAP,
   CROSS_GRID_MIN_WIDTH,
   CROSS_WIDTH,
@@ -69,7 +68,9 @@ import {
   emptyView,
   inferStationInterval,
   L,
-  type YScaleOptions,
+  LONG_PAD,
+  longitudinalMaxChainage,
+  windowElevationRange,
 } from "./B06_Section_UI_Section_Common";
 
 export type { CrossDesignChange, DesignChangeHandler, RockBoundaryControl };
@@ -142,7 +143,6 @@ export function createSectionView(
   let lastChartAvailable = 0;
   let chartFitScheduled = false;
   // 카드 단위 재빌드에 재사용하는 렌더 컨텍스트 (draw에서 갱신)
-  let cachedYScale: YScaleOptions | undefined;
   let cachedStationInterval = 1;
   let cachedCardWidth = CROSS_WIDTH;
   // 같은 행 카드는 같은 높이가 되도록 draw에서 측점별 행 높이를 계산해 둔다(단건 갱신도 이 값 재사용).
@@ -473,8 +473,24 @@ export function createSectionView(
     const heights = chartHeights(lastChartAvailable);
     const minWidth = longitudinalMinimumWidth(detail.longitudinal, cachedStationInterval);
     const chartWidth = Math.max(renderWidth, minWidth);
-    // 종단도 높이가 줄면 Y스케일도 그 높이로 다시 잡아야 표고가 잘리지 않는다.
-    cachedYScale = calculateYScale(detail, heights.long);
+    // 종단 그래프의 세로는 **보이는 구간에 자동으로 맞춘다**(2026-09-04 사용자 확정,
+    // B05 와 같은 규칙·같은 함수). 가로 스크롤 위치와 컨테이너 폭이 곧 보이는 구간이다.
+    const maxChainageM = longitudinalMaxChainage(detail.longitudinal);
+    const plotWidth = Math.max(1, chartWidth - LONG_PAD.left - LONG_PAD.right);
+    const toChainage = (px: number): number => ((px - LONG_PAD.left) / plotWidth) * maxChainageM;
+    const viewFromM = Math.max(0, toChainage(keepScrollLeft));
+    const viewToM = Math.min(
+      maxChainageM,
+      toChainage(keepScrollLeft + (chartWrap.clientWidth || chartWidth)),
+    );
+    const longElevationRange = windowElevationRange(
+      [
+        detail.longitudinal.samples,
+        ...(detail.longitudinal.design_profiles ?? []).map((profile) => profile.samples),
+      ],
+      viewFromM,
+      viewToM,
+    );
 
     // Y축 눈금을 렌더러에서 받아 가로 스크롤 고정 오버레이로 얹는다(2026-08-04 사용자
     // 지시 — 테이블 행 이름표처럼 스크롤해도 계속 보이게, B05와 같은 방식).
@@ -485,7 +501,8 @@ export function createSectionView(
           detail.longitudinal,
           selectedStationId,
           currentExaggeration,
-          cachedYScale,
+          // 공통 Y 스케일(횡단 카드 몫)을 여기 넘기면 종단이 전 구간 축에 묶여 눌린다.
+          undefined,
           (stationId) => selectStation(stationId, true),
           cachedStationInterval,
           chartWidth,
@@ -496,6 +513,11 @@ export function createSectionView(
           (axis) => {
             longAxis = axis;
           },
+          undefined,
+          undefined,
+          0,
+          0,
+          longElevationRange,
         ),
       ),
     ];
@@ -517,6 +539,8 @@ export function createSectionView(
       selectStation: (stationId) => selectStation(stationId, true),
       toggleSeries,
       redraw: drawPanel,
+      // 유토곡선도 종단과 같은 창을 본다(2026-09-04).
+      viewRange: { fromM: viewFromM, toM: viewToM },
     });
     if (massHaul.chart) nodes.push(massHaul.chart);
     chartWrap.replaceChildren(...nodes);
@@ -553,6 +577,20 @@ export function createSectionView(
     }
   }
 
+  /** 가로 스크롤이 이만큼 멈춰 있으면 보이는 구간이 정해진 것으로 보고 세로를 다시 맞춘다. */
+  const SCROLL_SETTLE_MS = 160;
+  let settledScrollLeft = 0;
+  let scrollSettleTimer = 0;
+  // 스크롤·팬 하는 내내 축이 출렁이면 어지럽다 — 멈춘 뒤 한 번만 다시 그린다(2026-09-04).
+  chartWrap.addEventListener("scroll", () => {
+    window.clearTimeout(scrollSettleTimer);
+    scrollSettleTimer = window.setTimeout(() => {
+      if (Math.abs(chartWrap.scrollLeft - settledScrollLeft) < 1) return;
+      settledScrollLeft = chartWrap.scrollLeft;
+      drawPanel();
+    }, SCROLL_SETTLE_MS);
+  });
+
   const draw = (): void => {
     if (!currentDetail || !Number.isFinite(renderWidth) || renderWidth <= 0) return;
     const detail = currentDetail;

B06_Section/B06_Section_UI_Section_View_MassHaul.ts

@@ -56,6 +56,8 @@ export interface MassHaulPanelInput {
   toggleSeries: (key: string) => void;
   /** 범례에서 도형 위치를 초기화한 뒤 패널을 다시 그린다. */
   redraw: () => void;
+  /** 화면에 보이는 누가거리 구간(m) — Y 를 이 구간의 누계 토량으로 잡는다(2026-09-04). */
+  viewRange?: { fromM: number; toM: number };
 }
 
 export interface MassHaulPanelResult {
@@ -104,6 +106,7 @@ export function buildMassHaulPanel(input: MassHaulPanelInput): MassHaulPanelResu
           maxChainageM: longitudinalMaxChainage(detail.longitudinal),
           padLeft: LONG_PAD.left,
           padRight: LONG_PAD.right,
+          viewRange: input.viewRange,
         },
         input.selectedStationId,
         input.stationInterval,

B06_Section/B06_Section_UI_Standard_Panel.ts

@@ -1,6 +1,12 @@
 /* =============================================================================
  * B06_Section_UI_Standard_Panel.ts
- * 좌측 사이드 "표준 횡단면 설정" 패널 (토사 / 암 / 포장 3그룹).
+ * 좌측 사이드 "표준 횡단면 설정" 패널 — **「표준횡단면 상세값」 한 컨테이너**(2026-09-04
+ * 사용자 지시). 토사·암·포장 3그룹이 같은 필드를 각각 갖던 화면을 공통 한 벌 +
+ * 구간별로 다른 값만 남겼다. 공통 = 노폭·노견·측구·절토/성토 경사·횡단 경사,
+ * 암 = 절토 경사·L형 측구, 포장 = 횡단 경사.
+ *
+ * **저장 구조는 그대로 3그룹**(`standard_cross_section`) — 화면만 합치고 저장할 때
+ * 공통값을 세 그룹에 펼쳐 넣는다. 백엔드·기존 프로젝트가 그대로 동작한다.
  *
  * 각 그룹의 노폭·노견·측구 규격·경사값을 편집한다. 기본값은 백엔드 config
  * (STANDARD_CROSS_SECTION, context.standard_cross_section)에서 내려오고, 사용자가
@@ -26,12 +32,6 @@ function L(key: keyof typeof ui_locales): string {
   return ui_locales[key][currentLanguageIndex];
 }
 
-const GROUP_ORDER: Array<[StandardCrossKey, keyof typeof ui_locales]> = [
-  ["soil", "B06_Std_Group_Soil"],
-  ["rock", "B06_Std_Group_Rock"],
-  ["paved", "B06_Std_Group_Paved"],
-];
-
 const SESSION_PREFIX = "b06:std-cross:";
 /** config 기본값 사본 — 편집값(`SESSION_PREFIX`)과 수명은 같되 용도가 다르다. */
 const DEFAULTS_PREFIX = "b06:std-cross-default:";
@@ -151,49 +151,98 @@ export interface StandardPanelController {
   applyStored: (stored: StandardCrossSection) => void;
 }
 
+/** 값을 어느 그룹에 쓸 것인가. `common` 은 세 그룹에 함께 펼쳐 넣는다. */
+type FieldScope = "common" | "rock" | "paved";
+
 interface NumberFieldSpec {
-  label: string;
+  label: keyof typeof ui_locales;
+  scope: FieldScope;
+  /** 화면에 보일 값을 읽는다 — 공통은 **토사 값이 기준**(2026-09-04 사용자 확정). */
   get: (group: StandardCrossGroup) => number;
   set: (group: StandardCrossGroup, value: number) => void;
-  /** 암 그룹의 L형 측구처럼 특정 그룹에만 존재하는 필드는 조건으로 거른다. */
-  only?: StandardCrossKey;
+  /**
+   * 공통값이지만 이 그룹은 따로 값을 갖는다 — 공통을 펼칠 때 건너뛴다.
+   * (절토 경사는 암이, 횡단 경사는 포장이 자기 값을 쓴다)
+   */
+  exclude?: StandardCrossKey;
 }
 
-/** 그룹 하나에 노출할 편집 필드 정의. 순서 = 화면 표기 순서. */
+/** 한 컨테이너에 늘어놓을 편집 필드. 순서 = 화면 표기 순서. */
 const FIELD_SPECS: NumberFieldSpec[] = [
   {
     label: "B06_Std_Field_RoadWidth",
+    scope: "common",
     get: (g) => g.road_width_m,
     set: (g, v) => (g.road_width_m = v),
   },
   {
     label: "B06_Std_Field_ShoulderLeft",
+    scope: "common",
     get: (g) => g.shoulder_left_m,
     set: (g, v) => (g.shoulder_left_m = v),
   },
   {
     label: "B06_Std_Field_ShoulderRight",
+    scope: "common",
     get: (g) => g.shoulder_right_m,
     set: (g, v) => (g.shoulder_right_m = v),
   },
   {
     label: "B06_Std_Field_DitchTop",
+    scope: "common",
     get: (g) => g.ditch.top_width_m,
     set: (g, v) => (g.ditch.top_width_m = v),
   },
   {
     label: "B06_Std_Field_DitchBottom",
+    scope: "common",
     get: (g) => g.ditch.bottom_width_m,
     set: (g, v) => (g.ditch.bottom_width_m = v),
   },
   {
     label: "B06_Std_Field_DitchDepth",
+    scope: "common",
     get: (g) => g.ditch.depth_m,
     set: (g, v) => (g.ditch.depth_m = v),
   },
+  {
+    // 암은 아래에서 자기 절토 경사를 따로 가진다 — 공통은 토사·포장 몫이다.
+    label: "B06_Std_Field_CutSlope",
+    scope: "common",
+    exclude: "rock",
+    get: (g) => g.cut_slope_ratio,
+    set: (g, v) => (g.cut_slope_ratio = v),
+  },
+  {
+    label: "B06_Std_Field_FillSlope",
+    scope: "common",
+    get: (g) => g.fill_slope_ratio,
+    set: (g, v) => (g.fill_slope_ratio = v),
+  },
+  {
+    // 포장은 아래에서 자기 횡단 경사를 따로 가진다.
+    label: "B06_Std_Field_CrossSlopeMin",
+    scope: "common",
+    exclude: "paved",
+    get: (g) => g.cross_slope_pct.min,
+    set: (g, v) => (g.cross_slope_pct.min = v),
+  },
+  {
+    label: "B06_Std_Field_CrossSlopeMax",
+    scope: "common",
+    exclude: "paved",
+    get: (g) => g.cross_slope_pct.max,
+    set: (g, v) => (g.cross_slope_pct.max = v),
+  },
+  {
+    label: "B06_Std_Field_CutSlope",
+    scope: "rock",
+    get: (g) => g.cut_slope_ratio,
+    set: (g, v) => (g.cut_slope_ratio = v),
+  },
   {
     label: "B06_Std_Field_LDitchWidth",
-    only: "rock",
+    scope: "rock",
     get: (g) => g.ditch_l_type?.width_m ?? 0,
     set: (g, v) => {
       g.ditch_l_type = { width_m: v, depth_m: g.ditch_l_type?.depth_m ?? 0 };
@@ -201,34 +250,49 @@ const FIELD_SPECS: NumberFieldSpec[] = [
   },
   {
     label: "B06_Std_Field_LDitchDepth",
-    only: "rock",
+    scope: "rock",
     get: (g) => g.ditch_l_type?.depth_m ?? 0,
     set: (g, v) => {
       g.ditch_l_type = { width_m: g.ditch_l_type?.width_m ?? 0, depth_m: v };
     },
   },
-  {
-    label: "B06_Std_Field_CutSlope",
-    get: (g) => g.cut_slope_ratio,
-    set: (g, v) => (g.cut_slope_ratio = v),
-  },
-  {
-    label: "B06_Std_Field_FillSlope",
-    get: (g) => g.fill_slope_ratio,
-    set: (g, v) => (g.fill_slope_ratio = v),
-  },
   {
     label: "B06_Std_Field_CrossSlopeMin",
+    scope: "paved",
     get: (g) => g.cross_slope_pct.min,
     set: (g, v) => (g.cross_slope_pct.min = v),
   },
   {
     label: "B06_Std_Field_CrossSlopeMax",
+    scope: "paved",
     get: (g) => g.cross_slope_pct.max,
     set: (g, v) => (g.cross_slope_pct.max = v),
   },
 ];
 
+/** 공통 필드 하나를 그룹들에 펼쳐 넣는다(자기 값을 갖는 그룹은 건너뛴다). */
+function spread(state: StandardCrossSection, spec: NumberFieldSpec, value: number): void {
+  for (const key of ["soil", "rock", "paved"] as StandardCrossKey[]) {
+    if (spec.exclude === key) continue;
+    const group = state[key];
+    if (group) spec.set(group, value);
+  }
+}
+
+/**
+ * 그룹마다 공통값이 다르게 저장돼 있을 수 있다(옛 프로젝트) — **토사 값을 기준**으로
+ * 한 벌로 맞춘다(2026-09-04 사용자 확정). 화면은 값 하나를 보이는데 저장분이 셋으로
+ * 갈려 있으면 어느 값이 나갔는지 알 수 없기 때문이다.
+ */
+function unifyCommon(state: StandardCrossSection): void {
+  const soil = state.soil;
+  if (!soil) return;
+  for (const spec of FIELD_SPECS) {
+    if (spec.scope !== "common") continue;
+    spread(state, spec, spec.get(soil));
+  }
+}
+
 /**
  * 표준 횡단면 설정 패널을 만든다.
  * @param projectId 세션 캐시 스코프.
@@ -258,49 +322,73 @@ export function createStandardPanel(
 
   const persist = (): void => writeSession(projectId, state);
 
-  const buildGroup = (key: StandardCrossKey, legendKey: keyof typeof ui_locales): HTMLElement => {
-    const group = state[key];
-    // B05 "기준값 직접 지정"과 동일한 details/summary 패턴, 기본 접힘(N-4-1).
-    const fieldset = document.createElement("details");
-    fieldset.className = "b06-std__group";
-    const legend = document.createElement("summary");
-    legend.className = "b06-std__legend";
-    legend.textContent = L(legendKey);
-    fieldset.append(legend);
+  /** 필드 한 칸. 공통은 토사 값을 보이고, 고치면 세 그룹에 함께 펼친다. */
+  const buildField = (spec: NumberFieldSpec, grid: HTMLElement): void => {
+    const source = spec.scope === "common" ? state.soil : state[spec.scope];
+    if (!source) return;
+    const field = createInputField({
+      label: L(spec.label),
+      type: "number",
+      value: String(spec.get(source)),
+      onInput: (raw) => {
+        const parsed = Number(raw);
+        if (!Number.isFinite(parsed)) return;
+        if (spec.scope === "common") spread(state, spec, parsed);
+        else spec.set(source, parsed);
+        persist();
+      },
+    });
+    field.input.step = "0.1";
+    field.input.min = "0";
+    grid.append(field.root);
+  };
 
+  /** 구분선 + 구간 이름 — 아래 값들이 그 구간에서만 쓰인다는 표시. */
+  const buildDivider = (labelKey: keyof typeof ui_locales): HTMLElement => {
+    const divider = document.createElement("p");
+    divider.className = "b06-std__divider";
+    divider.textContent = L(labelKey);
+    return divider;
+  };
+
+  const buildScope = (scope: FieldScope): HTMLElement => {
     const grid = document.createElement("div");
     grid.className = "b06-std__grid";
     for (const spec of FIELD_SPECS) {
-      if (spec.only && spec.only !== key) continue;
-      const field = createInputField({
-        label: L(spec.label as keyof typeof ui_locales),
-        type: "number",
-        value: String(spec.get(group)),
-        onInput: (raw) => {
-          const parsed = Number(raw);
-          if (!Number.isFinite(parsed)) return;
-          spec.set(group, parsed);
-          persist();
-        },
-      });
-      field.input.step = "0.1";
-      field.input.min = "0";
-      grid.append(field.root);
+      if (spec.scope === scope) buildField(spec, grid);
     }
-    fieldset.append(grid);
+    return grid;
+  };
 
-    if (key === "rock") {
-      const note = document.createElement("p");
-      note.className = "b06-std__note";
-      note.textContent = L("B06_Std_LType_Note");
-      fieldset.append(note);
-    }
+  /** 「표준횡단면 상세값」 한 컨테이너 — 공통 → 암 → 포장 순, 구분선으로 나눈다. */
+  const buildDetails = (): HTMLElement => {
+    const fieldset = document.createElement("details");
+    fieldset.className = "b06-std__group";
+    fieldset.open = true;
+    const legend = document.createElement("summary");
+    legend.className = "b06-std__legend";
+    legend.textContent = L("B06_Std_Detail_Title");
+    const note = document.createElement("p");
+    note.className = "b06-std__note";
+    note.textContent = L("B06_Std_LType_Note");
+    fieldset.append(
+      legend,
+      buildScope("common"),
+      buildDivider("B06_Std_Section_RockOnly"),
+      buildScope("rock"),
+      buildDivider("B06_Std_Section_PavedOnly"),
+      buildScope("paved"),
+      note,
+    );
     return fieldset;
   };
 
   const renderBody = (): void => {
-    body.replaceChildren(...GROUP_ORDER.map(([key, legendKey]) => buildGroup(key, legendKey)));
+    body.replaceChildren(buildDetails());
   };
+  // 옛 저장분이 그룹마다 다른 공통값을 갖고 있으면 토사 기준으로 한 벌로 맞춘다.
+  unifyCommon(state);
+  persist();
   renderBody();
 
   /** 소스 표준값을 현재 상태에 전부 덮어쓴다(사용자가 "적용"을 눌렀을 때만 호출). */
@@ -308,6 +396,7 @@ export function createStandardPanel(
     (Object.keys(source) as StandardCrossKey[]).forEach((key) => {
       if (source[key]) state[key] = JSON.parse(JSON.stringify(source[key])) as StandardCrossGroup;
     });
+    unifyCommon(state);
     persist();
     renderBody();
   };
@@ -324,6 +413,7 @@ export function createStandardPanel(
       (Object.keys(fresh) as StandardCrossKey[]).forEach((key) => {
         state[key] = fresh[key];
       });
+      unifyCommon(state);
       persist();
       renderBody();
     },
@@ -354,6 +444,7 @@ export function createStandardPanel(
       (Object.keys(stored) as StandardCrossKey[]).forEach((key) => {
         if (stored[key]) state[key] = JSON.parse(JSON.stringify(stored[key])) as StandardCrossGroup;
       });
+      unifyCommon(state);
       renderBody();
     },
   };

B06_Section/B06_Section_UI_Style.css

@@ -287,6 +287,17 @@
   gap: var(--spacing-8);
 }
 
+/* 구간 구분선 — 「표준횡단면 상세값」 한 컨테이너 안에서 공통 / 암 / 포장을 가른다
+   (2026-09-04 사용자 지시: 공통 항목은 지우고 구분선을 쓸 것). */
+.b06-std__divider {
+  margin: var(--spacing-4) 0 0;
+  padding-top: var(--spacing-8);
+  border-top: 1px solid var(--color-border);
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+}
+
 .b06-std__note {
   margin: 0;
   font-size: var(--text-caption);

common_util/common_util_initial_snapshot.py

@@ -30,13 +30,21 @@ DESIGNING_LOCK_NAME = "initial_design.lock"
 DESIGN_FAILED_NAME = "initial_design.failed"
 
 # 프로젝트 루트 기준 상대 경로 — 정본 파일이 사는 자리 전부.
+#
+# 배수유역은 `edits/`(관 지점 편집분)만 뜨다가 **폴더 통째**로 넓혔다(2026-09-04 사용자
+# 확정: 「초기값 = 파일 입력 직후 결과 전부」). 관을 옮기면 세부유역(`04_detailed_basins`)이
+# 다시 나뉘는데 그 산출물이 스냅샷 밖이라 [초기화]가 옛 유역도를 그대로 남겼다.
+# 용량은 실측 8.6MB(스냅샷 전체 3.9MB → 약 12MB)로 감당할 만하다.
 _FILE_TREES = (
     "B05_Profile/route",
     "B06_Section/longitudinal",
     "B06_Section/cross_sections",
-    "B04_PreProcess/drainage/edits",
+    "B04_PreProcess/drainage",
 )
 
+# 배수유역을 폴더 통째로 넓히기 전(2026-09-04)에 찍힌 스냅샷이 갖고 있는 자리.
+_LEGACY_DRAINAGE_TREE = "B04_PreProcess__drainage__edits"
+
 # `routes.id`를 참조하는 표는 스키마상 이 넷이 전부다(001_create_schema.sql:539~556).
 _CHILD_TABLES = ("route_points", "route_statistics", "longitudinal_sections", "cross_sections")
 
@@ -238,11 +246,20 @@ def wipe_edited_masters(project_root: Path) -> list[str]:
 
 
 def restore_snapshot_files(project_root: Path) -> None:
-    """스냅샷 파일을 작업본 자리에 되돌린다. 스냅샷에 없던 트리는 비워 둔다."""
+    """스냅샷 파일을 작업본 자리에 되돌린다. 스냅샷에 없던 트리는 비워 둔다.
+
+    배수유역 범위를 넓히기 전(2026-09-04)에 찍힌 스냅샷은 `edits/`만 갖고 있다 —
+    그런 프로젝트는 예전처럼 그 자리만 되돌린다. 넓힌 트리를 못 찾았다고 그냥 넘어가면
+    관 지점 편집분이 초기화 뒤에도 남는다.
+    """
     root = Path(project_root)
     source = snapshot_dir(root)
     for tree in _FILE_TREES:
-        _copy_tree(source / tree.replace("/", "__"), root / tree)
+        stored = source / tree.replace("/", "__")
+        if not stored.is_dir() and tree == "B04_PreProcess/drainage":
+            _copy_tree(source / _LEGACY_DRAINAGE_TREE, root / "B04_PreProcess/drainage/edits")
+            continue
+        _copy_tree(stored, root / tree)
 
 
 async def restore_initial_snapshot(

common_util/common_util_mass_haul_view.ts

@@ -43,6 +43,12 @@ export interface MassHaulAxis {
   axisX?: number;
   /** 그래프 위 여백(px). 생략하면 기본(10). B05는 범례 오버레이만큼 크게 준다. */
   padTop?: number;
+  /**
+   * **화면에 보이는 누가거리 구간**(m). 넘기면 Y 범위를 이 구간의 누계 토량으로 잡는다
+   * (2026-09-04 사용자 지시 — 종단 그래프의 세로 자동 맞춤과 같은 창). 생략하면 예전처럼
+   * 전 구간 기준 ±200㎥ 고정이다.
+   */
+  viewRange?: { fromM: number; toM: number };
 }
 
 /** 축 눈금이 읽히는 최소 높이. 이보다 낮아지면 그래프가 뭉개진다. */
@@ -128,9 +134,44 @@ const VOLUME_RANGE_BASE_M3 = 200;
  * Y축 상·하한을 잡는다. 기본 −200~+200㎥ 고정(0선 항상 포함), 곡선이 넘치는 쪽만
  * 데이터에 5% 여유를 더해 확장한다. B05·B06이 같은 함수를 쓰므로 두 화면이 함께 고정된다.
  */
-function volumeRange(series: MassHaulSeries[]): { min: number; max: number } {
+function volumeRange(
+  series: MassHaulSeries[],
+  viewRange?: { fromM: number; toM: number },
+): { min: number; max: number } {
   let rawMin = 0;
   let rawMax = 0;
+  if (viewRange) {
+    // 보이는 구간만 훑는다. 창 경계를 걸친 선분이 안에서 솟구치므로 바깥 이웃 한 점도 본다.
+    let found = false;
+    for (const entry of series) {
+      const points = entry.result.points;
+      let first = -1;
+      let last = -1;
+      for (let index = 0; index < points.length; index += 1) {
+        const chainage = points[index].chainage_m;
+        if (chainage < viewRange.fromM || chainage > viewRange.toM) continue;
+        if (first < 0) first = index;
+        last = index;
+      }
+      if (first < 0) continue;
+      for (
+        let index = Math.max(0, first - 1);
+        index <= Math.min(points.length - 1, last + 1);
+        index += 1
+      ) {
+        const volume = points[index].cumulative_volume_m3;
+        if (!Number.isFinite(volume)) continue;
+        rawMin = found ? Math.min(rawMin, volume) : volume;
+        rawMax = found ? Math.max(rawMax, volume) : volume;
+        found = true;
+      }
+    }
+    if (found) {
+      // 창 안이 거의 평평하면(구간 토량 변화가 없으면) 최소 폭을 줘 선이 축에 붙지 않게 한다.
+      const padding = Math.max((rawMax - rawMin) * 0.05, 1);
+      return { min: rawMin - padding, max: rawMax + padding };
+    }
+  }
   for (const entry of series) {
     rawMin = Math.min(rawMin, entry.result.min_cumulative_m3);
     rawMax = Math.max(rawMax, entry.result.max_cumulative_m3);
@@ -323,7 +364,7 @@ export function createMassHaulChart(
   // 기준 버튼이 라디오가 되면서(택1 표시) Y 범위도 **표시 중인 곡선**으로 잡는다 —
   // 숨은 기준까지 합쳐 잡으면 선택한 그래프가 눌려 보인다. 아무것도 안 켰으면 전체로 폴백.
   const rangeSource = series.filter((entry) => visibleKeys.has(entry.key));
-  const { min, max } = volumeRange(rangeSource.length ? rangeSource : series);
+  const { min, max } = volumeRange(rangeSource.length ? rangeSource : series, axis.viewRange);
   const span = Math.max(max - min, 1e-6);
   const y = (volume: number) => padTop + ((max - volume) / span) * plotHeight;
 

ui_template/ui_template_locale_b2.ts

@@ -506,6 +506,10 @@ export const ui_locales_b2 = {
   B06_Std_Group_Soil: ["토사 구간", "Soil section"],
   B06_Std_Group_Rock: ["암 구간 (리핑/발파)", "Rock section (ripping/blasting)"],
   B06_Std_Group_Paved: ["포장 구간", "Paved section"],
+  B06_Std_Detail_Title: ["표준횡단면 상세값", "Standard cross-section details"],
+  B06_Std_Section_Common: ["공통", "Common"],
+  B06_Std_Section_RockOnly: ["암 구간 — 다른 값만", "Rock section - differing values"],
+  B06_Std_Section_PavedOnly: ["포장 구간 — 다른 값만", "Paved section - differing values"],
   B06_Std_Field_RoadWidth: ["노폭(m)", "Road width (m)"],
   B06_Std_Field_ShoulderLeft: ["노견 좌(m)", "Shoulder L (m)"],
   B06_Std_Field_ShoulderRight: ["노견 우(m)", "Shoulder R (m)"],