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.css

@@ -1,6 +1,7 @@
-/* 공통 프로그레스 서클 — 뷰포트 위에 얹는 원형 진행 표시. */
+/* 공통 프로그레스 서클 — 뷰포트 위에 얹는 원형 진행 표시.
+   테두리 두께·색은 공통 로딩 스피너(.ui-spinner)와 같게 맞추고, 가운데에 진행률만 더한다. */
 .ui-progress-circle {
-  --ui-progress-size: 96px;
+  --ui-progress-size: 72px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -9,6 +10,15 @@
   user-select: none;
 }
 
+/* 컨테이너 정중앙 오버레이 — 3D 뷰포트·지도·그래프 어디에나 같은 방식으로 얹는다.
+   컨테이너에 position: relative 가 있어야 한다. */
+.ui-progress-circle--overlay {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  justify-content: center;
+}
+
 .ui-progress-circle__dial {
   position: relative;
   width: var(--ui-progress-size);
@@ -24,7 +34,7 @@
 
 .ui-progress-circle__track {
   fill: none;
-  stroke: color-mix(in srgb, var(--color-border) 70%, transparent);
+  stroke: var(--color-mist-violet);
   stroke-width: 8;
 }