diff --git a/B04_PreProcess/B04_PreProcess_UI_Page.ts b/B04_PreProcess/B04_PreProcess_UI_Page.ts
index 300c8495..6b97dd5e 100644
--- a/B04_PreProcess/B04_PreProcess_UI_Page.ts
+++ b/B04_PreProcess/B04_PreProcess_UI_Page.ts
@@ -39,6 +39,8 @@ import { createSurfaceMapViewer } from "./B04_PreProcess_UI_MapViewer";
 import { createSurfaceTerrainViewer } from "./B04_PreProcess_UI_TerrainViewer";
 import { createSurfacePointCloudViewer } from "./B04_PreProcess_UI_Viewer";
 import "./B04_PreProcess_UI_Style.css";
+// 700줄 제한으로 잘라낸 조각 — 본체 **다음에** 불러야 캐스케이드 순서가 같다(2026-09-04).
+import "./B04_PreProcess_UI_Style_Map.css";
 
 // 고를 수 있는 필터. 자동 전처리는 이 중 기본 하나만 만들고, 나머지는 관리자가
 // 드롭다운에서 고를 때 그 조합만 계산한다 (2026-09-01 사용자 확정).
diff --git a/B04_PreProcess/B04_PreProcess_UI_Style.css b/B04_PreProcess/B04_PreProcess_UI_Style.css
index 62e63d40..3ac47607 100644
--- a/B04_PreProcess/B04_PreProcess_UI_Style.css
+++ b/B04_PreProcess/B04_PreProcess_UI_Style.css
@@ -563,308 +563,3 @@
   right: var(--spacing-16);
   bottom: var(--spacing-16);
 }
-
-/* --- 하단 2D 지도 --- */
-.b04-map {
-  --b04-map-vector: var(--color-accent);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-12);
-  margin: var(--spacing-24);
-  padding: var(--spacing-16);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
-  background: var(--color-surface-raised);
-}
-
-.b04-map__header,
-.b04-map__controls,
-.b04-map__control-group,
-.b04-map__layer-buttons {
-  display: flex;
-  align-items: center;
-}
-
-.b04-map__header {
-  justify-content: space-between;
-  gap: var(--spacing-16);
-}
-
-.b04-map__header h3 {
-  font-size: var(--text-body);
-  color: var(--color-text);
-}
-
-.b04-map__controls {
-  gap: var(--spacing-12);
-  flex-wrap: wrap;
-}
-
-.b04-map__control-group {
-  gap: var(--spacing-8);
-  color: var(--color-text-secondary);
-  font-size: var(--text-caption);
-}
-
-.b04-map__layer-buttons {
-  gap: var(--spacing-4);
-  flex-wrap: wrap;
-}
-
-.b04-map__controls button {
-  min-height: 34px;
-  padding: 0 var(--spacing-12);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-inputs);
-  background: var(--color-canvas);
-  color: var(--color-text-body);
-}
-
-.b04-map__controls button {
-  cursor: pointer;
-}
-
-.b04-map__controls .b04-map__layer-button {
-  padding: var(--spacing-8);
-  opacity: 0.55;
-}
-
-.b04-map__layer-button.is-active {
-  opacity: 1;
-  box-shadow: inset 0 0 0 1px currentColor;
-}
-
-.b04-map__layer-button--gis {
-  border-color: var(--color-border);
-  color: var(--color-text-secondary);
-}
-
-.b04-map__layer-button--gis.is-active {
-  border-color: var(--b04-layer-color);
-  color: var(--b04-layer-color);
-  box-shadow: inset 0 0 0 1px var(--b04-layer-color);
-}
-
-/* 관 매설 우클릭 메뉴 — 지도 뷰포트 기준 절대 위치. */
-.b04-map__context-menu {
-  position: absolute;
-  z-index: 6;
-  display: flex;
-  flex-direction: column;
-  min-width: 140px;
-  padding: var(--spacing-4);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
-  background: var(--color-surface-raised);
-  box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
-}
-
-.b04-map__context-menu[hidden] {
-  display: none;
-}
-
-.b04-map__context-menu-item {
-  padding: var(--spacing-8) var(--spacing-12);
-  border: 0;
-  border-radius: var(--radius-cards);
-  background: transparent;
-  color: var(--color-text-body);
-  font-size: 13px;
-  text-align: left;
-  cursor: pointer;
-}
-
-.b04-map__context-menu-item:hover {
-  background: var(--color-surface-sunken);
-}
-
-.b04-map__viewport {
-  position: relative;
-  width: 100%;
-  height: 560px;
-  overflow: hidden;
-  touch-action: none;
-  /* 좌버튼은 선택 전용이라 손바닥(grab) 커서를 쓰지 않는다. 팬 중(가운데 버튼)에만
-     JS가 grabbing으로 바꾼다(2026-08-01 사용자 지시). */
-  cursor: default;
-  user-select: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
-  background: var(--color-canvas);
-}
-
-.b04-map__image,
-.b04-map__canvas {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.b04-map__image {
-  object-fit: contain;
-  transform-origin: center;
-  user-select: none;
-  pointer-events: none;
-}
-
-.b04-map__canvas {
-  pointer-events: none;
-}
-
-.b04-map__empty {
-  position: absolute;
-  z-index: 2;
-  inset: 50% auto auto 50%;
-  transform: translate(-50%, -50%);
-  color: var(--color-text-secondary);
-  font-size: var(--text-caption);
-}
-
-/* 지도 위 좌상단 문구 묶음 — 배수유역 정보 자리(2026-08-01 사용자 지시).
-   지도 조작을 가리지 않도록 포인터 이벤트는 통과시킨다. */
-.b04-map__status-stack {
-  position: absolute;
-  z-index: 2;
-  top: var(--spacing-12);
-  left: var(--spacing-12);
-  display: flex;
-  max-width: min(62%, 900px);
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-4);
-  pointer-events: none;
-}
-
-/* 배수유역 "분석 중…" 진행 문구 자리 — 우측 최상단(2026-08-01 사용자 지시).
-   결과 문구는 좌상단에 그대로 남는다. */
-.b04-map__status-topright {
-  position: absolute;
-  z-index: 2;
-  top: var(--spacing-12);
-  right: var(--spacing-12);
-  display: flex;
-  max-width: min(40%, 360px);
-  flex-direction: column;
-  align-items: flex-end;
-  gap: var(--spacing-4);
-  pointer-events: none;
-}
-
-/* 객체 표시(지형지물 개수) 라벨 자리 — 우측 최하단(2026-08-01 사용자 지시).
-   축척은 좌하단이라 서로 겹치지 않는다. */
-.b04-map__status-corner {
-  position: absolute;
-  z-index: 2;
-  right: var(--spacing-12);
-  bottom: var(--spacing-12);
-  display: flex;
-  max-width: min(50%, 480px);
-  flex-direction: column;
-  align-items: flex-end;
-  gap: var(--spacing-4);
-  pointer-events: none;
-}
-
-/* 배수유역 전용 상태 줄 — 지도 자체 상태(.b04-map__status)와 칸을 나눠 쓰면
-   나중에 끝난 쪽이 상대 문구를 지운다. 그래서 줄을 따로 둔다.
-   배경지도(위성·지적·등고선)가 복잡해 글자가 묻히므로 배경 칩을 깐다. */
-.b04-map__status,
-.b04-map__watershed-status {
-  display: block;
-  padding: var(--spacing-4) var(--spacing-8);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-inputs);
-  background: color-mix(in srgb, var(--color-surface-raised) 92%, transparent);
-  color: var(--color-text-body);
-  font-size: var(--text-caption);
-  line-height: 1.5;
-  word-break: keep-all;
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-}
-
-.b04-map__watershed-status[hidden] {
-  display: none;
-}
-
-@media (max-width: 760px) {
-  .b04-map__header {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-}
-
-@media (max-width: 1180px) {
-  .b04-surface__viewers {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* 도엽등고 3D 서피스 컨테이너 — 2026-08-30 */
-.b04-surface__sheet-section {
-  margin: 0 var(--spacing-24) var(--spacing-16);
-  padding: var(--spacing-16);
-  box-sizing: border-box;
-}
-
-.b04-surface__sheet-section > .terrain-model-group {
-  margin-top: var(--spacing-12);
-}
-
-/* 도엽 서피스 보간 방식 전환 줄 — 2026-08-30 */
-.b04-surface__sheet-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--spacing-8);
-  margin: var(--spacing-12) 0;
-}
-
-.b04-surface__sheet-method {
-  padding: 4px 10px;
-  font-size: var(--text-caption);
-  color: var(--color-text-body);
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
-  cursor: pointer;
-}
-
-.b04-surface__sheet-method:hover {
-  border-color: var(--color-primary);
-}
-
-.b04-surface__sheet-method.is-active {
-  color: var(--color-on-primary, #fff);
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-}
-
-/* 아직 만들지 않은 방식 — 누르면 계산이 시작된다는 것을 눌러 보기 전에 알린다. */
-.b04-surface__sheet-method.is-unbuilt:not(.is-active) {
-  color: var(--color-text-muted, var(--color-text-body));
-  border-style: dashed;
-}
-
-.b04-surface__sheet-lidar {
-  margin-left: auto;
-}
-
-/* 도엽 서피스 스무딩 드롭다운 — 방식 버튼 줄 오른쪽 끝 */
-.b04-surface__sheet-smoothing {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  font-size: var(--text-caption);
-}
-
-.b04-surface__sheet-smoothing .b04-surface__select {
-  width: auto;
-  min-width: 96px;
-}
-
-.b04-surface__sheet-toolbar .b04-surface__sheet-lidar {
-  margin-left: 0;
-}
diff --git a/B04_PreProcess/B04_PreProcess_UI_Style_Map.css b/B04_PreProcess/B04_PreProcess_UI_Style_Map.css
new file mode 100644
index 00000000..b2f0bc28
--- /dev/null
+++ b/B04_PreProcess/B04_PreProcess_UI_Style_Map.css
@@ -0,0 +1,312 @@
+/* =============================================================================
+ * B04_PreProcess_UI_Style_Map.css
+ * 1차 워크플로우 하단 **2D 지도**와 그 도구줄·시트 툴바.
+ *
+ * `B04_PreProcess_UI_Style.css` 가 700줄을 넘겨 잘라낸 조각이다(2026-09-04).
+ * 규칙·순서·값 그대로 옮겼고, 진입 TS 가 본체 다음에 불러 캐스케이드 순서도 같다.
+ * ========================================================================== */
+
+/* --- 하단 2D 지도 --- */
+.b04-map {
+  --b04-map-vector: var(--color-accent);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  margin: var(--spacing-24);
+  padding: var(--spacing-16);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+  background: var(--color-surface-raised);
+}
+
+.b04-map__header,
+.b04-map__controls,
+.b04-map__control-group,
+.b04-map__layer-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.b04-map__header {
+  justify-content: space-between;
+  gap: var(--spacing-16);
+}
+
+.b04-map__header h3 {
+  font-size: var(--text-body);
+  color: var(--color-text);
+}
+
+.b04-map__controls {
+  gap: var(--spacing-12);
+  flex-wrap: wrap;
+}
+
+.b04-map__control-group {
+  gap: var(--spacing-8);
+  color: var(--color-text-secondary);
+  font-size: var(--text-caption);
+}
+
+.b04-map__layer-buttons {
+  gap: var(--spacing-4);
+  flex-wrap: wrap;
+}
+
+.b04-map__controls button {
+  min-height: 34px;
+  padding: 0 var(--spacing-12);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-inputs);
+  background: var(--color-canvas);
+  color: var(--color-text-body);
+}
+
+.b04-map__controls button {
+  cursor: pointer;
+}
+
+.b04-map__controls .b04-map__layer-button {
+  padding: var(--spacing-8);
+  opacity: 0.55;
+}
+
+.b04-map__layer-button.is-active {
+  opacity: 1;
+  box-shadow: inset 0 0 0 1px currentColor;
+}
+
+.b04-map__layer-button--gis {
+  border-color: var(--color-border);
+  color: var(--color-text-secondary);
+}
+
+.b04-map__layer-button--gis.is-active {
+  border-color: var(--b04-layer-color);
+  color: var(--b04-layer-color);
+  box-shadow: inset 0 0 0 1px var(--b04-layer-color);
+}
+
+/* 관 매설 우클릭 메뉴 — 지도 뷰포트 기준 절대 위치. */
+.b04-map__context-menu {
+  position: absolute;
+  z-index: 6;
+  display: flex;
+  flex-direction: column;
+  min-width: 140px;
+  padding: var(--spacing-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+  background: var(--color-surface-raised);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
+}
+
+.b04-map__context-menu[hidden] {
+  display: none;
+}
+
+.b04-map__context-menu-item {
+  padding: var(--spacing-8) var(--spacing-12);
+  border: 0;
+  border-radius: var(--radius-cards);
+  background: transparent;
+  color: var(--color-text-body);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.b04-map__context-menu-item:hover {
+  background: var(--color-surface-sunken);
+}
+
+.b04-map__viewport {
+  position: relative;
+  width: 100%;
+  height: 560px;
+  overflow: hidden;
+  touch-action: none;
+  /* 좌버튼은 선택 전용이라 손바닥(grab) 커서를 쓰지 않는다. 팬 중(가운데 버튼)에만
+     JS가 grabbing으로 바꾼다(2026-08-01 사용자 지시). */
+  cursor: default;
+  user-select: none;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+  background: var(--color-canvas);
+}
+
+.b04-map__image,
+.b04-map__canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.b04-map__image {
+  object-fit: contain;
+  transform-origin: center;
+  user-select: none;
+  pointer-events: none;
+}
+
+.b04-map__canvas {
+  pointer-events: none;
+}
+
+.b04-map__empty {
+  position: absolute;
+  z-index: 2;
+  inset: 50% auto auto 50%;
+  transform: translate(-50%, -50%);
+  color: var(--color-text-secondary);
+  font-size: var(--text-caption);
+}
+
+/* 지도 위 좌상단 문구 묶음 — 배수유역 정보 자리(2026-08-01 사용자 지시).
+   지도 조작을 가리지 않도록 포인터 이벤트는 통과시킨다. */
+.b04-map__status-stack {
+  position: absolute;
+  z-index: 2;
+  top: var(--spacing-12);
+  left: var(--spacing-12);
+  display: flex;
+  max-width: min(62%, 900px);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+  pointer-events: none;
+}
+
+/* 배수유역 "분석 중…" 진행 문구 자리 — 우측 최상단(2026-08-01 사용자 지시).
+   결과 문구는 좌상단에 그대로 남는다. */
+.b04-map__status-topright {
+  position: absolute;
+  z-index: 2;
+  top: var(--spacing-12);
+  right: var(--spacing-12);
+  display: flex;
+  max-width: min(40%, 360px);
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--spacing-4);
+  pointer-events: none;
+}
+
+/* 객체 표시(지형지물 개수) 라벨 자리 — 우측 최하단(2026-08-01 사용자 지시).
+   축척은 좌하단이라 서로 겹치지 않는다. */
+.b04-map__status-corner {
+  position: absolute;
+  z-index: 2;
+  right: var(--spacing-12);
+  bottom: var(--spacing-12);
+  display: flex;
+  max-width: min(50%, 480px);
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--spacing-4);
+  pointer-events: none;
+}
+
+/* 배수유역 전용 상태 줄 — 지도 자체 상태(.b04-map__status)와 칸을 나눠 쓰면
+   나중에 끝난 쪽이 상대 문구를 지운다. 그래서 줄을 따로 둔다.
+   배경지도(위성·지적·등고선)가 복잡해 글자가 묻히므로 배경 칩을 깐다. */
+.b04-map__status,
+.b04-map__watershed-status {
+  display: block;
+  padding: var(--spacing-4) var(--spacing-8);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-inputs);
+  background: color-mix(in srgb, var(--color-surface-raised) 92%, transparent);
+  color: var(--color-text-body);
+  font-size: var(--text-caption);
+  line-height: 1.5;
+  word-break: keep-all;
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+
+.b04-map__watershed-status[hidden] {
+  display: none;
+}
+
+@media (max-width: 760px) {
+  .b04-map__header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 1180px) {
+  .b04-surface__viewers {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 도엽등고 3D 서피스 컨테이너 — 2026-08-30 */
+.b04-surface__sheet-section {
+  margin: 0 var(--spacing-24) var(--spacing-16);
+  padding: var(--spacing-16);
+  box-sizing: border-box;
+}
+
+.b04-surface__sheet-section > .terrain-model-group {
+  margin-top: var(--spacing-12);
+}
+
+/* 도엽 서피스 보간 방식 전환 줄 — 2026-08-30 */
+.b04-surface__sheet-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-8);
+  margin: var(--spacing-12) 0;
+}
+
+.b04-surface__sheet-method {
+  padding: 4px 10px;
+  font-size: var(--text-caption);
+  color: var(--color-text-body);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+  cursor: pointer;
+}
+
+.b04-surface__sheet-method:hover {
+  border-color: var(--color-primary);
+}
+
+.b04-surface__sheet-method.is-active {
+  color: var(--color-on-primary, #fff);
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+/* 아직 만들지 않은 방식 — 누르면 계산이 시작된다는 것을 눌러 보기 전에 알린다. */
+.b04-surface__sheet-method.is-unbuilt:not(.is-active) {
+  color: var(--color-text-muted, var(--color-text-body));
+  border-style: dashed;
+}
+
+.b04-surface__sheet-lidar {
+  margin-left: auto;
+}
+
+/* 도엽 서피스 스무딩 드롭다운 — 방식 버튼 줄 오른쪽 끝 */
+.b04-surface__sheet-smoothing {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  font-size: var(--text-caption);
+}
+
+.b04-surface__sheet-smoothing .b04-surface__select {
+  width: auto;
+  min-width: 96px;
+}
+
+.b04-surface__sheet-toolbar .b04-surface__sheet-lidar {
+  margin-left: 0;
+}