feat(B05): 배수유역도 필터 버튼을 지도 오버레이로 · 유역 번호 배지를 라운드 사각으로

- 표시 필터 버튼 묶음을 헤더에서 지도 좌측 상단(8px 여백)으로 옮겼다. 버튼 줄과
  상태 문구를 한 오버레이가 세로로 쌓아, 문구가 버튼 아래에서 시작한다
- 버튼 줄은 한 줄 유지. 오른쪽 진행단계 오버레이에 끝이 가려도 창을 넓히거나 그
  오버레이를 접으면 드러난다(사용자 확정) — 두 줄로 접는 쪽이 지도를 더 가린다
- 오버레이 빈 자리는 pointer-events를 흘려 지도 팬·유역 고르기를 막지 않고,
  버튼 위 pointerdown만 지도로 내려가지 않게 끊는다
- 유역 번호 배지를 원에서 라운드 사각으로. 지도 위 다른 숫자가 전부 동그라미라
  크기로만 갈렸다. 크기(지름 22px)는 그대로. B04 지도 배지도 같은 함수라 함께 바뀐다

B04_PreProcess/B04_PreProcess_UI_MapOverlays.ts

@@ -55,10 +55,13 @@ export function drawFilledRing(
   drawRingBadge(context, [sumX / entry.ring.length, sumY / entry.ring.length], color, entry.label);
 }
 
-/** 유역 번호 배지 한 개(원 + 숫자). 화면 좌표를 그대로 받는다.
+/** 유역 번호 배지 한 개(라운드 사각 + 숫자). 화면 좌표를 그대로 받는다.
  *
  *  채움과 따로 떼어 둔 이유: 번호는 **맨 위에** 있어야 한다. 채움과 함께 그리면 그 위에
- *  얹히는 등고선·화살표·관 마커에 가려 읽을 수 없다(2026-08-01 사용자 지시). */
+ *  얹히는 등고선·화살표·관 마커에 가려 읽을 수 없다(2026-08-01 사용자 지시).
+ *
+ *  원이 아니라 사각인 이유: 지도 위 다른 숫자들도 전부 동그라미라 크기로만 갈렸다.
+ *  형태를 바꿔 한눈에 구분되게 했다 — 크기는 그대로다(2026-08-17 사용자 지시). */
 export function drawRingBadge(
   context: CanvasRenderingContext2D,
   center: readonly [number, number],
@@ -66,9 +69,10 @@ export function drawRingBadge(
   label: string,
 ): void {
   const [centerX, centerY] = center;
+  const half = 11;
   context.save();
   context.beginPath();
-  context.arc(centerX, centerY, 11, 0, Math.PI * 2);
+  context.roundRect(centerX - half, centerY - half, half * 2, half * 2, 6);
   context.fillStyle = color;
   context.fill();
   context.strokeStyle = haloColor();