/* 지도 · 마커 · 지점 카드 */

.map-wrap {
  position: relative;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* 손그림 사진 지도(map-image.js) — Task 10b. 예전 ranch.svg 벡터 지도가
   쓰던 .marker·.pmarker·.me는 지웠다(사진 위에는 위경도 좌표 변환으로
   찍는 SVG 마커가 없다 — 번호 자체가 이미 그림에 그려져 있다).
   Task 10에서는 지도 두 장을 탭(스위치) 버튼으로 하나씩만 보여줬다 —
   그 버튼 스타일(.imap-switch 등)은 여기 있었다. Task 10b에서 두 그림을
   늘 동시에 보여주기로 하면서(map-image.js 머리말 참고 — 숨긴 프레임의
   img가 lazy 상태로 영영 안 불려오는 0×0 버그가 있었다) 스위치 자체를
   없앴다. 대신 각 지도 패널(.imap-panel)이 제목(.imap-title)을 하나씩
   갖는다. */
.imap-title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--font-spot);
}
.imap-title-sub {
  display: block;
  font-size: var(--font-body);
  font-weight: 400;
  color: var(--text-muted);
}

.imap-hint {
  margin: 0;
  font-size: var(--font-body);
  color: var(--text-muted);
}

/* 그림 상자 — .imap-frame은 가로 스크롤만 맡는다(폭을 정하지 않는다).
   실제 폭은 안쪽 .imap-canvas가 900px로 고정해서 갖는다 — 페이지 전체가
   --maxw(900px) 아래로는 안 넓어지므로 900px 아래에서는 늘 이 canvas가
   화면보다 넓어 가로 스크롤이 생기고, 900px 위에서는(이 사이트에서는
   일어나지 않지만) canvas 폭 그대로 보인다. 번호 글자는 화면을 100%로
   그냥 좁히면 못 읽을 만큼 작아지므로(사진이라 벡터보다 작아졌을 때 더
   빨리 뭉개진다 — 작업 보고서의 700px·900px 비교 스크린샷 참고) 900px
   아래로는 줄이지 않기로 했다.
   .imap-canvas가 꼭 필요한 이유(그냥 .imap-frame에 버튼을 넣지 않는 이유):
   .imap-frame처럼 overflow-x:auto인 상자는 스크롤되는 내용(그림)이 상자
   자체보다 넓어도 상자 "자기 자신의 너비"는 화면에 보이는 좁은 너비
   그대로다 — CSS 스펙이 그렇다. 탭 버튼의 left·top(%)은 그 상자의
   너비를 기준으로 계산되므로, 버튼을 .imap-frame에 직접 넣으면 그림은
   900px로 넓게 그려지는데 버튼은 화면에 보이는 좁은 너비(예: 341px)
   안에 몰려 찍히는 사고가 난다 — 실제로 이 버그가 나서(작업 보고서
   참고) 폭이 고정된 canvas를 하나 더 두는 구조로 고쳤다. */
.imap-frame {
  overflow-x: auto;
  overflow-y: hidden;
}
.imap-canvas { position: relative; width: 900px; }
.imap-img { display: block; width: 100%; height: auto; }

/* 번호 위 탭 영역 — 안 보이는 버튼이다. 번호는 이미 그림에 그려져
   있으므로(map-image-regions.js 주석 참고) 우리는 자리만 표시한다.
   44px(--tap)는 화면 크기와 무관하게 고정이다 — 그림이 아무리 커도
   작아도 손가락이 닿는 자리는 늘 44px 이상이어야 하기 때문이다(SVG
   마커의 "안 보이는 넓은 히트영역"·카카오 마커의 .kmarker 상자와 같은
   원리). left·top은 map-image.js가 x몫·y몫으로 인라인 스타일을 주고,
   .imap-canvas(고정 900px)를 기준으로 계산된다. */
.imap-region {
  position: absolute;
  width: var(--tap); height: var(--tap);
  margin: calc(var(--tap) / -2) 0 0 calc(var(--tap) / -2);
  border: 0; border-radius: 50%;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.imap-region:hover { background: rgba(46, 44, 38, 0.08); }
.imap-region:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  background: rgba(168, 84, 43, 0.12);
}

/* 번호 위 반짝이는 고리 — Task 11. 그림 위 번호를 눌러도 반응이 없어
   보이는 문제(인간 파트너가 산다미아노 십자가의 흰 테두리 점을 참고로
   보내주었다)를 고치려고, 인쇄된 검은 동그라미 둘레에 딱 맞는 고리를
   그린다. 속을 채우지 않고 테두리(border)만 그리는 이유는 명시적이다 —
   여기서는 번호 그 자체가 정체성이라(map-image-regions.js 주석 참고),
   고리가 번호를 가리면 안 된다. 새 색을 넣지 않는다: 고리는 버튼 색
   --accent(테라코타)를 쓰고, 둘레의 흰 테두리는 이미 있는 --white를
   쓴다 — 올리브·겨자·회색(출입 3색)에 손대지 않는다.
   .imap-region 자체(44px 누르는 상자)의 pointer-event는 그대로 살아
   있어야 하므로, 고리는 ::after 가상 요소로만 그려 클릭을 가로채지
   않는다(gap 요소가 아니라 장식이다). */
.imap-region::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  /* 테두리(border)를 그리지 않는다 — 인간 파트너 지적: "동그라미가 너무
     튀어, 그냥 번호 주변에 빛만 남으면 안 되니". 선을 그리면 그 선이
     인쇄된 번호 동그라미와 크기가 딱 맞아야 하는데, 두 장의 그림에서
     번호 동그라미 지름이 조금씩 다르다 — 안 맞으면 어긋난 테처럼 보인다.
     가장자리가 없는 빛(radial-gradient)은 애초에 맞출 크기가 없어서
     그 문제 자체가 사라진다. 색은 --accent(테라코타) 그대로, 진하기만
     낮췄다 — 출입 3색(올리브·겨자·회색)에는 손대지 않는다. */
  background: radial-gradient(circle,
    rgba(168, 84, 43, 0.30) 0%,
    rgba(168, 84, 43, 0.16) 45%,
    rgba(168, 84, 43, 0) 70%);
  pointer-events: none;
}

/* 반짝임(펄스) — 눈에 띄되 몇 초 뒤 스스로 멈춘다. 어르신 방문객이 많은
   화면에서 계속 움직이는 것은 피로를 준다(작업 지시 원칙) — 그래서
   무한 반복이 아니라 정확히 3번만 커졌다 옅어지는 원을 그리고, 애니메이션이
   끝나면(iteration-count: 3) 그 뒤로는 위 고리(::after)만 가만히 남는다.
   이 바깥 원은 ::before로 따로 그려 고리(::after)의 항상-보임 상태와
   펄스의 나타났다-사라짐 상태를 겹치지 않게 분리한다. */
.imap-region::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  /* 펄스도 선이 아니라 빛이다 — 위 ::after와 같은 이유(테두리는 인쇄된
     번호 동그라미와 크기가 안 맞으면 어긋나 보인다). 퍼져 나가는 원 대신
     제자리에서 밝아졌다 잦아드는 숨쉬기로 바꿨다: 커지는 원은 옆 번호의
     빛까지 침범하는데(1·2·3번은 그림에서 서로 가깝다) 밝기만 오르내리면
     자기 자리를 안 벗어난다. */
  background: radial-gradient(circle,
    rgba(168, 84, 43, 0.45) 0%,
    rgba(168, 84, 43, 0.22) 45%,
    rgba(168, 84, 43, 0) 70%);
  opacity: 0;
  pointer-events: none;
  animation: imap-pulse 1.8s ease-in-out 3;
  animation-delay: 0.3s;
}

@keyframes imap-pulse {
  0%,  100% { opacity: 0; }
  50%       { opacity: 1; }
}

/* 이 화면은 어르신 방문객이 많다 — 움직임에 민감한 분들을 위해 기기가
   "동작 줄이기"를 요청하면 펄스를 아예 켜지 않는다. 고리(::after)는
   움직이지 않으므로 그대로 남아 번호를 누를 수 있다는 것은 계속 보여준다. */
@media (prefers-reduced-motion: reduce) {
  .imap-region::before { animation: none; opacity: 0; }
}

.imap-fallback { padding: var(--space-3); text-align: center; }

/* 카카오맵 위 내 위치 점(map-kakao.js의 setMeKakao) — 손그림 지도에는
   이 점을 찍지 않는다(locate.js의 갱신위치표시() 주석 참고 — 삽화라
   실제 축척을 따르지 않아 점을 찍으면 오히려 틀린 위치를 정확한 척
   보여주게 된다). 카카오맵에서만 뜨므로 "내 위치는 이 색"이라는 약속은
   카카오맵 단독으로 지킨다. 누르는 대상이 아니므로 44px(--tap) 규칙은
   해당하지 않는다. */
.kme {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--accent);
  pointer-events: none;
}

/* 카카오맵 배경(map-kakao.js) — 그림 지도가 뜨면 SVG가 이 자리를 차지하고,
   카카오맵이 뜨면 이 div가 대신 그 자리를 채운다. 지도 그림처럼 최소 폭을
   강제하지 않는다 — 카카오맵은 어떤 폭에서도 스스로 다시 그려진다. */
.kmap-el { width: 100%; height: 60vh; min-height: 320px; max-height: 560px; }

/* 카카오맵 위 지점 마커 — SVG 마커(.marker)와 같은 시각 언어를 그대로
   가져온다: 누구나=꽉 찬 원 / 시간에 맞춰=두꺼운 테두리 / 밖에서만=점선
   테두리. 누르는 상자(.kmarker)는 언제나 44px(--tap) 그대로다 — 눈에
   보이는 몸(.몸-바탕, SVG)만 아래 줌 단계별 규칙으로 줄어든다. 상자 자체가
   map.js의 "안 보이는 넓은 히트영역"과 같은 역할을 한다.
   .몸-바탕은 고정 viewBox(0 0 40 40) 위에 원 하나만 그려 두고, CSS로
   렌더링 크기만 바꾼다 — 그러면 테두리 굵기와 점선 간격이 원과 함께
   그대로 줄어들어, 작아져도 "두꺼운 테두리"와 "점선 테두리"가 뭉개지지
   않고 서로 다른 모양으로 남는다(border-style:dashed로는 이 간격을
   맞출 수 없어 32px에서 두 모양이 비슷해 보이는 문제가 있었다).
   원의 반지름(map-kakao.js의 지점마커(), r=18)은 상자(40 단위) 거의
   전체를 채우도록 잡았다 — 뭉침(.kcluster .몸)·화장실·주차장은 전부
   div라 "상자 크기 = 보이는 크기"인데, 예전 지점 원(r=15)은 상자의
   75%만 채워 같은 40px인데도 뭉침보다 눈에 띄게 작아 보였다(실측
   30px vs 40px). 이제는 넷 다 "상자 크기 = 보이는 크기" 규칙을 따른다. */
.kmarker {
  position: relative;
  width: var(--tap); height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.kmarker .몸-바탕 {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px;
}
.kmarker .몸-바탕 circle { stroke: var(--white); stroke-width: 3; }
.kmarker[data-출입="누구나"]     .몸-바탕 circle { fill: var(--open-fill); }
.kmarker[data-출입="시간에 맞춰"] .몸-바탕 circle { fill: var(--timed-fill); }
.kmarker[data-출입="밖에서만"]   .몸-바탕 circle { fill: var(--closed-fill); }
.kmarker .번호 {
  position: relative; z-index: 1; pointer-events: none;
  font: bold 16px var(--font-sans);
}
.kmarker[data-출입="누구나"]     .번호 { color: var(--white); }
.kmarker[data-출입="시간에 맞춰"] .번호 { color: var(--text); }
.kmarker[data-출입="밖에서만"]   .번호 { color: var(--white); }
.kmarker:focus { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 50%; }

/* 줌 단계(map-kakao.js가 .kmap-el에 붙인다): 가까이=44px 번호 있음,
   중간=32px 번호 있음, 멀리=작은 점(색+모양만, 번호 없음) — 26곳 숫자가
   다 겹치면 어차피 못 읽으므로 멀리서는 아예 버린다. */
.kmap-el.zoom-mid .kmarker .몸-바탕 { width: 32px; height: 32px; }
.kmap-el.zoom-mid .kmarker .번호 { font-size: 14px; }
/* 멀리서는 번호를 버리고 색만 남긴다 — 26곳 숫자가 겹치면 어차피 못 읽는다.
   구분이 색으로만 되어 있으므로 작아져도 뜻이 그대로 남는다. */
.kmap-el.zoom-far .kmarker .몸-바탕 { width: 14px; height: 14px; }
.kmap-el.zoom-far .kmarker .몸-바탕 circle { stroke-width: 3.5; }
.kmap-el.zoom-far .kmarker .번호 { display: none; }

/* 카카오맵 위 화장실 마커 — 지점과 헷갈리지 않도록 문(사각형) 그림으로
   구분한다. 지점이 "가는 목적지"라면 화장실은 "필요할 때 확인하는 것"이라
   지점보다 늘 작게 그리고(zIndex를 지점보다 낮게 준다 — map-kakao.js),
   그래서 지점 번호를 가리는 일이 없다. */
.ktoilet {
  width: var(--tap); height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ktoilet .몸 {
  width: 24px; height: 24px; box-sizing: border-box; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 2.5px solid var(--text-muted); color: var(--text-muted);
}
.ktoilet .몸 svg { width: 65%; height: 65%; }
.ktoilet:focus { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.kmap-el.zoom-mid .ktoilet .몸 { width: 18px; height: 18px; }
.kmap-el.zoom-far .ktoilet .몸 { width: 9px; height: 9px; border-radius: 2px; background: var(--text-muted); }
.kmap-el.zoom-far .ktoilet .몸 svg { display: none; }

/* 카카오맵 위 주차장 마커 — 화장실과 같은 이유로 중립색(--text-muted)을
   쓴다: "가는 목적지"가 아니라 "확인 대상"이라 출입 세 색 어디에도 속하지
   않는다. 색으로는 화장실과 구분이 안 되므로 모양으로 가른다 — 화장실은
   둥근 사각형(문), 주차장은 완전한 원이다. 지점보다 늘 작게 그리고
   (zIndex를 지점보다 낮게 준다 — map-kakao.js), 그래서 지점 번호를
   가리는 일이 없다. */
.kparking {
  width: var(--tap); height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.kparking .몸 {
  width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 2.5px solid var(--text-muted); color: var(--text-muted);
}
.kparking .몸 svg { width: 65%; height: 65%; }
.kparking:focus { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
.kmap-el.zoom-mid .kparking .몸 { width: 18px; height: 18px; }
.kmap-el.zoom-far .kparking .몸 { width: 9px; height: 9px; background: var(--text-muted); }
.kmap-el.zoom-far .kparking .몸 svg { display: none; }

/* ── 뭉침(클러스터) 마커는 여기 있었고, 없앴다 ─────────────────────
   .kcluster / .kcluster-list 규칙이 이 자리에 있었다. 다시 만들지 말 것.
   이 지도의 정체성은 '번호가 적힌 동그라미'다. 그 한가운데 "3곳"이라고
   적힌 또 다른 동그라미를 놓으면 방문객은 그것을 3번 지점과 구분할 수
   없다 — 두 번 거절당한 이유가 이것이고, 뭉침이 화장실·주차장을 통째로
   숨겨 "화장실이 지도에 없다"는 불만까지 같이 만들었다.
   대신 map-kakao.js의 재계산()이 겹친 마커를 작은 원 위로 벌린다(펼치기).
   아무것도 숨기지 않고 새 기호도 만들지 않으므로 이 자리에 CSS가 없다 —
   벌어진 마커도 그냥 .kmarker / .ktoilet / .kparking 그대로다. */

/* 지도 아래 글 목록 — 지도를 못 보는 사람을 위한 같은 정보 */
.spot-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.spot-list li { border-top: 1px solid var(--line); }
.spot-list button {
  width: 100%; text-align: left; border: 0; background: none;
  padding: var(--space-2) var(--space-1); font-size: var(--font-spot);
}
.spot-list .한줄 { display: block; font-size: var(--font-body); color: var(--text-muted); }

/* 출입 구분 표시 — 카드·목록에서 쓴다.
   동그라미는 지도 마커와 같은 채움색으로, 글자는 읽히는 어두운 색으로.
   (--*-fill 은 마커용이라 밝은 색이 있어 글자로 쓰면 안 읽힌다) */
.entry { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.entry svg { flex: none; }
.entry[data-출입="누구나"]     { color: var(--open); }
.entry[data-출입="시간에 맞춰"] { color: var(--timed); }
.entry[data-출입="밖에서만"]   { color: var(--closed); }
.entry[data-출입="누구나"]     svg circle { fill: var(--open-fill); }
.entry[data-출입="시간에 맞춰"] svg circle { fill: var(--timed-fill); }
.entry[data-출입="밖에서만"]   svg circle { fill: var(--closed-fill); }

/* 지점 카드 — 화면 아래에서 올라온다 */
/* 카카오맵은 자기 요소에 높은 z-index를 매긴다. 층 번호를 안 주면
   카드가 지도 아래로 깔려 글이 안 보인다 — 실제로 그렇게 났던 문제다. */
.card-back {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(46, 44, 38, 0.45);
  border: 0;
}
.card-back[hidden] { display: none; }

/* 아래에서 올라오는 반쪽 창. 지도를 다 덮지 않는 것이 중요하다 —
   방문객은 "이 마커가 어디였지"를 지도에서 보면서 설명을 읽는다.
   85vh로 덮으면 지도가 사라져 어디 이야기인지 알 수 없다. */
.card {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 901;
  max-height: 58vh; overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--space-3) var(--space-2) var(--space-4);
  box-shadow: 0 -8px 40px rgba(46, 44, 38, 0.18);
}
/* 창이 짧아졌으니 손잡이를 얹어 "올려서 더 볼 수 있다"를 알린다 */
.card::before {
  content: ""; display: block; width: 44px; height: 4px;
  margin: 0 auto var(--space-2); border-radius: 2px;
  background: var(--line);
}
@media (min-width: 700px) {
  .card { left: 50%; right: auto; bottom: var(--space-3); width: 560px; transform: translateX(-50%);
          max-height: 70vh; border-radius: var(--radius); }
  .card::before { display: none; }
}
.card h2 { font-size: 23px; margin-bottom: var(--space-1); }
.card .닫기 { position: absolute; top: var(--space-2); right: var(--space-2); }

.card .시간 {
  margin: var(--space-2) 0; padding: var(--space-2);
  background: var(--bg-alt); border-radius: 12px;
}

/* 닫힌 곳에는 대신 갈 곳이 반드시 붙는다 — 행동(버튼)이 있는 구획이라
   열린 색(--open) 테두리로 "여기서 할 수 있다"는 느낌을 준다. */
.card .대신 {
  margin: var(--space-2) 0 0; padding: var(--space-2);
  border: 2px solid var(--open); border-radius: 12px;
}
.card .대신 p { margin: 0 0 var(--space-2); }

/* 대안 없이 위치만 알리는 landmark 설명 — 대신 박스와 다르게 행동을 요구하지
   않는다. 오류나 비활성 버튼처럼 보이면 안 되므로 경고색을 쓰지 않고,
   왼쪽에 옅은 선 하나로 조용히 구분한다. */
.card .랜드마크 {
  margin: var(--space-2) 0 0; padding: var(--space-2);
  background: var(--bg-alt); border-radius: 12px;
  border-left: 4px solid var(--line);
}
.card .랜드마크 p { margin: 0; color: var(--text-muted); }

.card .버튼줄 { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-3); }

/* 세로로 찍은 사진만 높이를 눌러 준다(card.js가 사진높이 > 사진폭일 때만
   이 class를 붙인다). 900×1200짜리를 카드 폭에 그대로 맞추면 사진 하나가
   세로 450px을 넘게 차지해, 정작 읽어야 할 시간·해설·길찾기 버튼이 화면
   밖으로 밀린다. 가로 사진에는 이 class가 안 붙으므로 기존 사진 열 장의
   보이는 모습은 하나도 바뀌지 않는다.

   높이가 아니라 '폭'을 조인다는 점이 중요하다. max-height + width:auto로
   누르면, 사진이 아직 안 내려온 사이에는 타고난 크기가 0이라 상자가 0×0으로
   접혔다가 사진이 도착하는 순간 확 펴진다 — img의 width·height 속성으로
   자리를 미리 잡아 두는 장치(검사_check.py가 강제하는 그것)를 스스로
   무너뜨리는 셈이다. 폭만 조이면 width·height가 알려 준 가로세로비가 그대로
   살아 있어 자리는 미리 잡히고, 높이는 비율을 따라 저절로 줄어든다.
   32vh 폭 × (4/3) = 약 42vh 높이다. */
.card img.세로사진 {
  display: block; margin-left: auto; margin-right: auto;
  max-width: min(100%, 32vh);
}

/* 오프라인 안내 — 저장된 화면을 보고 있다는 사실만 조용히 알린다.
   오류가 아니므로 경고색(--alert)을 쓰지 않는다 — .locate-status와 같은
   결(옅은 배경, 보조 글자색)로 "상태 한 줄"처럼 보이게 한다. */
.offline-notice {
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  background: var(--bg-alt);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--font-body);
}
.offline-notice[hidden] { display: none; }

/* 오늘의 알림 — 갑작스러운 폐쇄·행사가 있는 날만 나타난다.
   지도 위를 덮지 않고 지도보다 앞에 그냥 한 줄로 쌓인다 — position: fixed를
   쓰지 않는 이유다. 대성당이 열리는 날처럼 평범한 소식이 대부분이라
   경고색(--alert)을 쓰되 느낌표·굵은 테두리 같은 것은 더하지 않는다. */
.alert-band {
  background: var(--alert);
  color: var(--white);
  padding: var(--space-2);
  font-weight: 600;
  text-align: center;
}
/* 칸이 비어 있으면(글자가 하나도 없으면) 아예 그리지 않는다 —
   "빈 상자"가 아니라 "없음"이어야 한다. */
.alert-band:empty { display: none; }

/* 화면 아래 항상 있는 막대(locate.js) — 화장실은 안내 데스크 문의 1순위라
   늘 보이게 둔다. sticky라 지도·목록을 내려도 화면에 남는다. */
.bottom-bar {
  position: sticky; bottom: 0;
  display: flex; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.bottom-bar button { flex: 1; }

/* 위치 상태 문구 — "위치는 점으로만 보여주지 않는다"는 접근성 요구를
   지키는 자리다. 화면 읽기 프로그램에는 aria-live로, 눈으로 보는 사람에게도
   거리·오차·이유를 글자로 알려준다. 비어 있으면 아예 그리지 않는다(.alert-band와
   같은 규칙). */
.locate-status {
  margin: var(--space-1) var(--space-2) 0;
  font-size: var(--font-body);
  color: var(--text-muted);
}
.locate-status:empty { display: none; }

/* 위치를 모를 때(권한 거절·시간초과·이 기기가 위치를 지원 안 함·목장 밖)
   "가장 가까운 화장실" 버튼이 대신 여는 화장실 다섯 곳 전체 목록.
   .spot-list와 같은 생김새를 그대로 쓴다 — 같은 뜻(목록에서 골라 카드를 연다)이면
   같은 모양이어야 헷갈리지 않는다. */
.toilet-panel { margin: var(--space-2) 0 0; }
.toilet-panel[hidden] { display: none; }