feat(B04): 지표면 3D 뷰어에 방위 콤파스 추가

뷰어 좌표 규약이 `x, 높이, -y` 라 세계 북쪽은 -z 다. 카메라 오프셋(카메라 − 타깃)의
수평 성분으로 도북이 화면에서 몇 도 돌아갔는지 계산해(atan2(offset.x, offset.z)) 바늘을
돌린다. 뷰어 우하단 — 축척 막대(좌하단)의 반대편에 둔다.

뷰어 파일이 이미 946줄이라 콤파스는 별도 모듈로 분리(700줄 제한). 애니메이션 루프에서
0.5° 이상 움직였을 때만 transform 을 다시 쓴다.

검증: typecheck 통과. 공용 브라우저 실측 — [상단] 시점 0°(바늘이 북쪽=화면 위),
[사시도] 41.6°, 캔버스 220px 드래그 시 218.6° 로 카메라와 함께 회전.

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

B04_PreProcess/B04_PreProcess_UI_Style.css

@@ -557,6 +557,44 @@
   text-shadow: 0 1px 2px var(--color-surface-raised);
 }
 
+/* 방위 콤파스 — 3D 뷰어 우하단. 축척 막대(좌하단)와 짝. */
+.b04-surface__compass {
+  position: absolute;
+  right: var(--spacing-16);
+  bottom: var(--spacing-16);
+  z-index: 2;
+  pointer-events: none;
+  filter: drop-shadow(0 1px 2px var(--color-surface-raised));
+}
+
+.b04-surface__compass-dial {
+  transform-origin: 50% 50%;
+  transition: transform 80ms linear;
+}
+
+.b04-surface__compass-ring {
+  fill: var(--color-surface-raised);
+  fill-opacity: 0.75;
+  stroke: var(--color-text-secondary);
+  stroke-width: 1;
+}
+
+.b04-surface__compass-north {
+  fill: var(--color-danger, #d64545);
+}
+
+.b04-surface__compass-south {
+  fill: var(--color-text-secondary);
+}
+
+.b04-surface__compass-letter {
+  fill: var(--color-text-body);
+  font-family: var(--font-body);
+  font-size: 9px;
+  font-weight: var(--font-weight-semibold);
+  text-anchor: middle;
+}
+
 /* --- 하단 2D 지도 --- */
 .b04-map {
   --b04-map-vector: var(--color-accent);