/* =============================================================================
 * ui_template_compass.css
 * 3D 뷰어 방위 나침반(`ui_template_compass.ts`) 전용 스타일.
 *
 * B04 지표면 뷰어에만 있던 것을 B05 종단 3D 뷰어와 함께 쓰려고 공용으로 옮겼다
 * (2026-09-03). 색상 하드코딩 금지 원칙대로 전부 토큰을 쓴다.
 * ========================================================================== */

/* 3D 뷰어 방위 나침반 — 모양·색만 여기서 정한다.
   **놓을 자리는 페이지 CSS 몫**이다(B04 우하단, B05 는 ISO 버튼 아래). 위치를 여기 박으면
   페이지마다 덮어써야 해서 규칙이 엉킨다. */
.ui-compass {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px var(--color-surface-raised));
}

/* inline SVG의 baseline 여백을 없앤다 — 안 그러면 아래로 5px 떠 모서리 여백이 어긋난다. */
.ui-compass svg {
  display: block;
}

/* 지면에 누운 나침반 링 — 좌표는 카메라 자세대로 매 프레임 다시 쓰인다.
   링 안쪽 면은 지형이 비치도록 아주 옅게만 깔아 도면 위 방위표처럼 읽힌다. */
.ui-compass-face {
  fill: var(--color-surface-raised);
  fill-opacity: 0.5;
  stroke: none;
}

.ui-compass-ring {
  fill: none;
  stroke: var(--color-text-secondary);
  stroke-width: 1.4;
}

.ui-compass-tick {
  stroke: var(--color-border);
  stroke-width: 1;
}

.ui-compass-tick--major {
  stroke: var(--color-text-secondary);
  stroke-width: 1.6;
}

/* 도북 화살 — 이 위젯에서 가장 먼저 읽혀야 하는 하나. */
.ui-compass-arrow {
  fill: var(--color-danger, #d64545);
}

/* 표고축 — 내려다볼수록 짧아져 시점 기울기를 한 번 더 알린다. */
.ui-compass-pole {
  stroke: var(--color-text-body);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.75;
}

.ui-compass-label {
  fill: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-anchor: middle;
}

.ui-compass-label--north {
  fill: var(--color-danger, #d64545);
}