diff --git a/B05_wf2_Route/B05_wf2_Route_UI_Drainage_Panel.ts b/B05_wf2_Route/B05_wf2_Route_UI_Drainage_Panel.ts
index 9bd8b1ba..c6692c9e 100644
--- a/B05_wf2_Route/B05_wf2_Route_UI_Drainage_Panel.ts
+++ b/B05_wf2_Route/B05_wf2_Route_UI_Drainage_Panel.ts
@@ -101,7 +101,9 @@ export interface DrainagePanelCallbacks {
 export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): DrainagePanel {
   const root = document.createElement("aside");
   root.className = "b05-drainage";
-  const panelHandle = createWorkflowPanelHandle("side");
+  // 이 패널은 하단 패널의 **오른쪽**에 도킹해 오른쪽으로 접힌다(제목 카드와 반대).
+  // 방향을 넘기지 않으면 화살표가 정확히 거꾸로 나온다.
+  const panelHandle = createWorkflowPanelHandle("side", "right");
 
   const header = document.createElement("div");
   header.className = "b05-drainage__header";
@@ -623,7 +625,9 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra
   panelHandle.root.addEventListener("click", () =>
     setCollapsed(!root.classList.contains("is-collapsed")),
   );
-  setCollapsed(sessionStorage.getItem(COLLAPSED_KEY) !== "false");
+  // 상세 배수유역 정보는 페이지에 들어오면 바로 보여야 한다 — 저장값이 없으면 펼침이 기본이다
+  // (같은 페이지의 하단 종단 패널과 같은 규칙).
+  setCollapsed(sessionStorage.getItem(COLLAPSED_KEY) === "true");
 
   return {
     root,
diff --git a/ui_template/ui_template_overlay.ts b/ui_template/ui_template_overlay.ts
index b157e005..da50d46e 100644
--- a/ui_template/ui_template_overlay.ts
+++ b/ui_template/ui_template_overlay.ts
@@ -23,7 +23,18 @@ export interface WorkflowPanelHandle {
   setOpen: (isOpen: boolean) => void;
 }
 
-export function createWorkflowPanelHandle(placement: "side" | "bottom"): WorkflowPanelHandle {
+export function createWorkflowPanelHandle(
+  placement: "side" | "bottom",
+  /**
+   * 패널이 접히면서 사라지는 쪽. 화살표가 항상 그 방향을 가리키게 만든다.
+   *
+   * 기본값 `"left"`는 왼쪽에 도킹해 왼쪽으로 접히는 패널(제목 카드)용이다.
+   * 오른쪽에 도킹해 오른쪽으로 접히는 패널(B05 배수유역도)은 `"right"`를 넘겨야
+   * 화살표가 뒤집히지 않는다 — 도킹 방향이 반대인데 같은 회전을 쓰면 열기/닫기
+   * 표시가 정확히 거꾸로 보인다.
+   */
+  collapseToward: "left" | "right" = "left",
+): WorkflowPanelHandle {
   const root = document.createElement("button");
   root.type = "button";
   root.className = `ui-workflow-overlay__handle ui-workflow-overlay__handle--${placement}`;
@@ -32,7 +43,10 @@ export function createWorkflowPanelHandle(placement: "side" | "bottom"): Workflo
   root.append(icon);
 
   function setOpen(isOpen: boolean): void {
-    const rotation = placement === "side" ? (isOpen ? 180 : 0) : isOpen ? 90 : -90;
+    // 삼각형은 회전 0°에서 오른쪽(▶)을 가리킨다. 펼친 상태면 접히는 쪽을,
+    // 접힌 상태면 펼쳐질 쪽을 가리키도록 180°를 붙였다 뗀다.
+    const pointsRight = isOpen === (collapseToward === "right");
+    const rotation = placement === "side" ? (pointsRight ? 0 : 180) : isOpen ? 90 : -90;
     icon.style.transform = `rotate(${rotation}deg)`;
     root.title = t(isOpen ? "Workflow_Overlay_Collapse" : "Workflow_Overlay_Expand");
     root.setAttribute("aria-label", root.title);