fix(B05): 배수유역 패널 기본 펼침 + 접기 화살표 방향 정정

상세 배수유역 정보는 페이지에 들어오면 바로 보여야 하는데 기본값이 접힘이었고,
접기/펼치기 화살표도 반대를 가리키고 있었다.

- 기본값: 저장값이 없을 때 `!== "false"`(접힘)를 `=== "true"`(펼침)로 바꿨다.
  같은 페이지 하단 종단 패널(B05_wf2_Route_UI_Profile_Panel.ts:592)이 이미 쓰던 규칙과
  같아졌다.
- 화살표: 공용 `createWorkflowPanelHandle`은 왼쪽에 도킹해 왼쪽으로 접히는 패널
  (제목 카드)을 전제로 회전값을 고정하고 있었다. 배수유역 패널은 오른쪽에 도킹해
  오른쪽으로 접히므로 같은 회전을 쓰면 열기/닫기 표시가 정확히 거꾸로 나온다.
  `collapseToward` 인자를 추가하고 이 패널만 "right"를 넘긴다.

기본값 "left"라 나머지 호출처는 회전값이 이전과 동일하다:
- ui_template_overlay.ts:81 제목 카드 — "side" 기본값, 열림 180° / 닫힘 0° 그대로
- B05_wf2_Route_UI_Profile_Panel.ts:244 하단 패널 — "bottom" 배치라 애초에 무관

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

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,

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);