feat(B04): 방위 표시를 지면에 누운 나침반 링으로

시안 3종 비교 뒤 사용자 선택(2026-09-03) — TerriaJS·cesium-navigation 계열 표기.
링·눈금·도북 화살을 지면 평면 도형으로 두고 카메라에 투영하므로, 링이 눌린 정도가
곧 시점 기울기이고 도북은 늘 화면의 실제 북쪽을 가리킴.

- 15° 눈금(90°마다 긴 눈금), N·E·S·W 라벨(뒤로 넘어가면 흐림).
- 표고축 침은 내려다볼수록 짧아지고, 점으로 눌리면 Z 라벨을 감춤.
- 위젯 56 → 84px — 라벨이 읽히는 최소 크기.

검증: typecheck·prettier 통과. 리로드 실측 — 위젯 84×84, 링 경로 `M0.00 −33.98…`,
도북 화살 `M0.00 −33.30 L−4.28 −17.14 L4.28 −17.14Z` 로 기본 시점 계산값과 일치.
회전 중 거동은 사용자 화면 검증 대기.

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

B04_PreProcess/B04_PreProcess_UI_Style.css

@@ -567,34 +567,57 @@
   filter: drop-shadow(0 1px 2px var(--color-surface-raised));
 }
 
-.b04-surface__compass-ring {
+/* inline SVG의 baseline 여백을 없앤다 — 안 그러면 아래로 5px 떠 모서리 여백이 어긋난다. */
+.b04-surface__compass svg {
+  display: block;
+}
+
+/* 지면에 누운 나침반 링 — 좌표는 카메라 자세대로 매 프레임 다시 쓰인다.
+   링 안쪽 면은 지형이 비치도록 아주 옅게만 깔아 도면 위 방위표처럼 읽힌다. */
+.b04-surface__compass-face {
   fill: var(--color-surface-raised);
-  fill-opacity: 0.75;
+  fill-opacity: 0.5;
+  stroke: none;
+}
+
+.b04-surface__compass-ring {
+  fill: none;
   stroke: var(--color-text-secondary);
+  stroke-width: 1.4;
+}
+
+.b04-surface__compass-tick {
+  stroke: var(--color-border);
   stroke-width: 1;
 }
 
-/* 축 하나 = 선 + 글자. 좌표는 카메라 자세대로 매 프레임 다시 쓰인다. */
-.b04-surface__compass-axis line {
+.b04-surface__compass-tick--major {
   stroke: var(--color-text-secondary);
-  stroke-width: 1.5;
-  stroke-linecap: round;
+  stroke-width: 1.6;
 }
 
-.b04-surface__compass-axis text {
-  fill: var(--color-text-body);
+/* 도북 화살 — 이 위젯에서 가장 먼저 읽혀야 하는 하나. */
+.b04-surface__compass-arrow {
+  fill: var(--color-danger, #d64545);
+}
+
+/* 표고축 — 내려다볼수록 짧아져 시점 기울기를 한 번 더 알린다. */
+.b04-surface__compass-pole {
+  stroke: var(--color-text-body);
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  opacity: 0.75;
+}
+
+.b04-surface__compass-label {
+  fill: var(--color-text-secondary);
   font-family: var(--font-body);
-  font-size: 9px;
+  font-size: 11px;
   font-weight: var(--font-weight-semibold);
   text-anchor: middle;
 }
 
-/* 도북은 눈에 먼저 들어와야 한다 — 선·글자 모두 강조색. */
-.b04-surface__compass-axis--n line {
-  stroke: var(--color-danger, #d64545);
-}
-
-.b04-surface__compass-axis--n text {
+.b04-surface__compass-label--north {
   fill: var(--color-danger, #d64545);
 }