fix(B04/B05): 세부유역 서클 번호를 최상단 오버레이로

채움과 함께 그리던 번호가 등고선·흐름 화살표·관 마커에 가려 읽히지 않았다.
번호만 떼어내 프레임 맨 마지막에 얹는다.

- MapRender에 drawRingBadge()·ringCenterOnScreen()을 분리 노출.
  drawFilledRing은 라벨이 있을 때 drawRingBadge를 부르는 형태로 바뀐다.
- B04: drawBasinNumbers() 호출을 관 마커 뒤로 이동(관이 없어도 번호는 그린다).
- B05: 채움은 라벨 없이 그리고 배지 자리만 모아 두었다가 배관 마커 뒤에 그린다.

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

B05_wf2_Route/B05_wf2_Route_UI_Drainage_Render.ts

@@ -12,6 +12,8 @@
 
 import {
   drawFilledRing,
+  drawRingBadge,
+  ringCenterOnScreen,
   drawPreparedLayer,
   drawRidgeRing,
   drawUpstreamLines,
@@ -66,13 +68,23 @@ export function drawDrainageScene(
   scene: DrainageScene,
 ): void {
   const { meta, normalizer } = scene;
+  // 유역 번호는 **맨 위에** 얹는다 — 채움과 함께 그리면 등고선·화살표·관 마커에 가려진다
+  // (2026-08-01 사용자 지시). 자리는 채움을 그리면서 같이 모아 둔다.
+  const badges: Array<{ center: [number, number]; color: string; label: string }> = [];
   // 세부유역 채움을 가장 아래에 깔아 등고선·세류 판독을 가리지 않게 한다.
   if (normalizer) {
     scene.basins.forEach((basin) => {
       const color = basinColor(basin.index);
+      if (basin.polygon_lonlat.length >= 3) {
+        badges.push({
+          center: ringCenterOnScreen(basin.polygon_lonlat, normalizer, view),
+          color,
+          label: String(basin.index),
+        });
+      }
       drawFilledRing(
         context,
-        { ring: basin.polygon_lonlat, label: String(basin.index) },
+        { ring: basin.polygon_lonlat },
         normalizer,
         view,
         // 하나를 고르면 나머지는 옅게 물러난다.
@@ -111,6 +123,7 @@ export function drawDrainageScene(
   }
   if (!meta) {
     scene.pipeEditor.draw(context, view, scene.pipeColor);
+    drawBadges(context, badges);
     return;
   }
   const projector = createMetricProjector(meta, view);
@@ -141,6 +154,15 @@ export function drawDrainageScene(
       scene.maxHotspotArea,
     );
   }
-  // 배관(관 매설) 마커 — 계획선 위 최상단.
+  // 배관(관 매설) 마커 — 계획선 위.
   scene.pipeEditor.draw(context, view, scene.pipeColor);
+  // 유역 번호 — 무엇에도 가리지 않게 맨 마지막.
+  drawBadges(context, badges);
+}
+
+function drawBadges(
+  context: CanvasRenderingContext2D,
+  badges: ReadonlyArray<{ center: [number, number]; color: string; label: string }>,
+): void {
+  badges.forEach(({ center, color, label }) => drawRingBadge(context, center, color, label));
 }