feat(B04/B05): 프로그레스 서클을 3D·지도·그래프 전 영역에 공통 적용

- 공통 서클 양식을 로딩 스피너(.ui-spinner) 기준으로 통일하고 overlay 옵션 신설
  (컨테이너 정중앙 배치를 페이지별 CSS 없이 처리)
- B05 3D: 위쪽 18% → 뷰포트 정중앙 (하단 패널에 가려져도 무방)
- B04 포인트클라우드 뷰어: setLoading() 신설, render() 시 자동 해제
- B04 지형 뷰어: GLTF/PLY 로더 진행 이벤트로 실제 바이트 진행률 표시
- B04 2D 지도: 도엽 레이어 n/10 진행률
- B05 종단면 그래프: body-wrap으로 감싸 서클 유지, 자료 조회 전후로 토글
- B05 배수유역도: 배경도 → 도엽 레이어 → 세부유역 산정 단계 진행률

ui_template/ui_template_progress.ts

@@ -15,10 +15,12 @@ const RADIUS = 42;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 
 export interface ProgressCircleOptions {
-  /** 지름(px). 기본 96. */
+  /** 지름(px). 기본 72(공통 로딩 스피너와 같은 무게감). */
   size?: number;
   /** 서클 아래 안내 문구. */
   label?: string;
+  /** 컨테이너 정중앙에 띄우는 오버레이로 만든다(컨테이너는 position: relative 여야 한다). */
+  overlay?: boolean;
 }
 
 export interface ProgressCircleHandle {
@@ -31,7 +33,7 @@ export interface ProgressCircleHandle {
 
 export function createProgressCircle(options: ProgressCircleOptions = {}): ProgressCircleHandle {
   const root = document.createElement("div");
-  root.className = "ui-progress-circle";
+  root.className = "ui-progress-circle" + (options.overlay ? " ui-progress-circle--overlay" : "");
   root.setAttribute("role", "status");
   root.setAttribute("aria-live", "polite");
   if (options.size) root.style.setProperty("--ui-progress-size", `${options.size}px`);