/* 구약 지도(ot.html) 전용 스타일 — styles.css의 공용 변수·컴포넌트를 재사용하고
   이 페이지에만 필요한 자잘한 보정만 여기에 둔다. */


.mode-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mode-btn:disabled:hover {
  background: #f5f5f5;
}

.mmb:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 사도행전/복음서/구약 지도 전환 줄이 시대 전환 줄 위에 하나 더 추가되어
   타이틀 카드가 styles.css의 기본 가정(줄 1개)보다 높아진 만큼 필터 패널 시작 위치를 내려준다 */
@media (max-width: 760px) {
  #app.sidebar-hidden #map-panels {
    top: 122px;
  }

  /* 시대 전환 버튼 5개가 좁은 타이틀 카드 폭을 넘치므로 가로 스크롤로 처리 */
  #mobile-era-switch {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  #mobile-era-switch::-webkit-scrollbar { display: none; }
  #mobile-era-switch .mmb { flex-shrink: 0; }
}

/* 다른 시대 지명 참고 레이어 — 현재 시대의 도시 마커와 헷갈리지 않도록 흐린 톤의 작은 점+라벨만 표시 */
.other-era-marker-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.other-era-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #71808f;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.other-era-label {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  font-style: italic;
  color: #3f4753;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 4px #fff;
  pointer-events: none;
  line-height: 1;
}
.map-labels-on .other-era-label { display: block; }

/* 주변 강대국 전성기 영역 라벨 — 지형 라벨처럼 흰 테두리로 배경과 대비를 준다 */
.empire-label {
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.02em;
  text-shadow: 0 0 4px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 6px #fff;
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
}