diff --git a/B04_PreProcess/B04_PreProcess_UI_TerrainViewer_Chrome.ts b/B04_PreProcess/B04_PreProcess_UI_TerrainViewer_Chrome.ts
index 01651d77f..447e42f7d 100644
--- a/B04_PreProcess/B04_PreProcess_UI_TerrainViewer_Chrome.ts
+++ b/B04_PreProcess/B04_PreProcess_UI_TerrainViewer_Chrome.ts
@@ -135,8 +135,9 @@ export function buildTerrainViewerChrome() {
   legendBar.style.position = "absolute";
   legendBar.style.top = "16px";
   legendBar.style.right = "16px";
-  legendBar.style.background = "rgba(255, 255, 255, 0.9)";
-  legendBar.style.border = "1px solid #cbd5e1";
+  // 판 색은 테마(556-1 · 어두움에 흰 판이 남지 않게) · 띠 색은 그림 값 그대로
+  legendBar.style.background = "color-mix(in srgb, var(--color-surface-raised) 90%, transparent)";
+  legendBar.style.border = "1px solid var(--color-border-strong)";
   legendBar.style.borderRadius = "6px";
   legendBar.style.padding = "8px";
   legendBar.style.width = "50px";
@@ -144,13 +145,13 @@ export function buildTerrainViewerChrome() {
   legendBar.style.flexDirection = "column";
   legendBar.style.alignItems = "center";
   legendBar.style.zIndex = "10";
-  legendBar.style.boxShadow = "0 2px 6px rgba(0,0,0,0.08)";
+  legendBar.style.boxShadow = "var(--shadow-sm)";
   legendBar.style.pointerEvents = "none";
 
   const maxValSpan = document.createElement("span");
   maxValSpan.style.fontSize = "10px";
   maxValSpan.style.fontWeight = "bold";
-  maxValSpan.style.color = "#b91c1c";
+  maxValSpan.style.color = "var(--color-danger)";
   maxValSpan.style.marginBottom = "4px";
 
   const gradientDiv = document.createElement("div");
@@ -164,7 +165,7 @@ export function buildTerrainViewerChrome() {
   const minValSpan = document.createElement("span");
   minValSpan.style.fontSize = "10px";
   minValSpan.style.fontWeight = "bold";
-  minValSpan.style.color = "#1d4ed8";
+  minValSpan.style.color = "var(--color-info)";
   minValSpan.style.marginTop = "4px";
 
   legendBar.append(maxValSpan, gradientDiv, minValSpan);
diff --git a/resources/tester/test_556_1_page_bg.py b/resources/tester/test_556_1_page_bg.py
index abd6818cf..c2cd3b7fc 100644
--- a/resources/tester/test_556_1_page_bg.py
+++ b/resources/tester/test_556_1_page_bg.py
@@ -27,3 +27,12 @@ def test_general_layout_uses_page_bg():
 def test_b03_page_has_no_own_bg():
     css = (ROOT / "B03_FileInput/B03_FileInput_UI_Style.css").read_text(encoding="utf-8")
     assert "background" not in _rule(css, ".b03-file")
+
+
+def test_b04_elevation_legend_follows_theme():
+    ts = (ROOT / "B04_PreProcess/B04_PreProcess_UI_TerrainViewer_Chrome.ts").read_text(
+        encoding="utf-8"
+    )
+    legend = ts[ts.index("const legendBar") : ts.index("legendBar.append")]
+    assert "rgba(255, 255, 255" not in legend
+    assert "var(--color-surface-raised)" in legend