/* 지도 화면 제어 도구줄(568-1) — 도구줄 + 아래 [?] 안내 판 · 자리는 페이지가 줌 · 빈 자리는 지도 조작 통과 */
.ui-map-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  pointer-events: none;
}

.ui-map-tools > .ui-toolbar {
  max-width: 100%;
  pointer-events: auto;
  /* 571-1 — 한 줄 고정 · 모자라면 가로 밀기(막대 숨김) · 넘친 쪽 끝만 흐림 */
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  --map-tools-fade-start: 0px;
  --map-tools-fade-end: 0px;
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--color-text-body) var(--map-tools-fade-start),
    var(--color-text-body) calc(100% - var(--map-tools-fade-end)),
    transparent
  );
}

.ui-map-tools > .ui-toolbar::-webkit-scrollbar {
  display: none;
}

.ui-map-tools > .ui-toolbar > * {
  flex-shrink: 0;
}

.ui-map-tools > .ui-toolbar.is-more-start {
  --map-tools-fade-start: var(--spacing-24);
}

.ui-map-tools > .ui-toolbar.is-more-end {
  --map-tools-fade-end: var(--spacing-24);
}

/* 안내 판 — 기본 접힘 · 2열 · 글판은 클릭 통과 */
.ui-map-tools__hint {
  display: none;
  grid-template-columns: auto auto;
  gap: 2px var(--spacing-16);
  max-width: 100%;
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
  border-radius: var(--radius-cards);
  background: color-mix(in srgb, var(--color-surface-raised) 72%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.ui-map-tools__hint.is-open {
  display: grid;
}

/* 숨김 — display 가 [hidden] 을 덮지 않게 */
.ui-map-tools[hidden],
.ui-map-tools__hint[hidden] {
  display: none !important;
}