/**
 * controls.css — 공용 컨트롤 (2026-09-14)
 * =============================================================================
 * 지금 담긴 것: **닫기 버튼 한 벌** (.ui-close)
 *
 * 왜 만들었나
 *   같은 닫기 버튼이 **7개 파일에 각각 정의**돼 있었다 — regions.html · region-tour.html ·
 *   calendar.css · lightbox.css · festival-detail.js · site-chrome.js · travel-products.html …
 *   모양(32×32 · 반경 · 테두리 · 채움)은 사실상 같은데 값이 조금씩 달랐다:
 *     배경   --card(region-tour) vs --paper(regions) vs rgba(ink,.72)(calendar) vs rgba(0,0,0,.35)(라이트박스)
 *     hover  --ink-surface(틸) vs --accent(골드) vs --danger(빨강)
 *     반경   0px vs 50%  ← 같은 지도 말풍선인데 페이지마다 달랐다
 *   → 모양을 바꾸려면 7군데를 찾아 고쳐야 했다. 이제 **여기 한 곳**만 고치면 된다.
 *
 * 규칙
 *   1. **모양**은 이 파일이 단독으로 소유한다(크기 · 반경 · 테두리 · 채움 · hover · 글리프 크기).
 *   2. **배치**는 페이지가 담당한다(부모가 flex 인지, top/right 값이 몇인지).
 *      모달 헤더 안에서 줄맞춤이 필요하면 페이지에 `.ui-close { flex: 0 0 32px }` 한 줄만 둔다.
 *   3. 변형은 클래스 조합으로만: `--dark`(사진 위) · `--lg`(큰 오버레이) · `--plain`(테두리 없는 ✕)
 *      · `--plain-lg`(큰 ✕ 글자) · `--abs`(모달 우상단 고정) · `--fixed`(화면 우상단 고정).
 *   4. 이 파일은 **토큰 다음**에 링크한다(값은 tokens.css 에서 온다).
 *      지도 말풍선 규칙만 leaflet.css 를 이겨야 해서 !important 를 쓴다(아래 주석 참고).
 *
 * 사용 예
 *   <button class="ui-close" ...>✕</button>                        모달 안, 흐름 배치
 *   <button class="ui-close ui-close--abs" ...>✕</button>          모달 우상단 고정
 *   <button class="ui-close ui-close--abs ui-close--dark" ...>✕</button>   사진 위
 *   <button class="ui-close ui-close--plain" ...>✕ 닫기</button>    헤더 안 텍스트형
 * =============================================================================
 */

/* ===== 기본 — 밝은 지면(카드·모달) 위 ===== */
.ui-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--ctrl-radius);
  background: var(--card);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.ui-close:hover,
.ui-close:focus-visible {
  background: var(--ink-surface);
  border-color: var(--ink-surface);
  color: var(--paper);
}

/* ===== 배치 도우미 ===== */
.ui-close--abs { position: absolute; top: 10px; right: 10px; z-index: 5; }
.ui-close--fixed { position: fixed; top: 18px; right: 22px; z-index: 9001; }
.ui-close--fixed:hover { transform: rotate(90deg); }   /* 라이트박스 전용 제스처 */

/* ===== 어두운 채움 — 사진 · 영상 · 어두운 오버레이 위 =====
   밝은 지면용 카드 배경으로는 사진 위에서 대비가 흐려지므로 채움만 반전한다. 모양(반경·크기)은 동일. */
.ui-close--dark {
  background: rgba(var(--ink-rgb), .72);
  border-color: transparent;
  color: #fff;
  backdrop-filter: blur(3px);
}
.ui-close--dark:hover,
.ui-close--dark:focus-visible {
  background: rgba(184, 134, 11, .9);
  border-color: transparent;
  color: var(--ink);
}

/* ===== 큰 오버레이용 (라이트박스 · 햄버거 메뉴) ===== */
.ui-close--lg { width: 40px; height: 40px; font-size: 20px; }

/* ===== 테두리 없는 ✕ — 모달 헤더에서 제목과 같은 줄에 놓는 형태 ===== */
.ui-close--plain {
  width: auto;
  height: auto;
  padding: 2px 6px;
  border-color: transparent;
  background: transparent;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
}
.ui-close--plain:hover,
.ui-close--plain:focus-visible {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
}
.ui-close--plain-lg { padding: 4px 8px; font-size: 20px; }   /* 글자만 있는 큰 ✕ (공지 상세) */

/* =============================================================================
 * 지도 줌 버튼(+/-) 제거 (Work 669)
 *   지도는 스크롤 휠·핀치·드래그로 확대/축소한다. Leaflet 기본 +/- 컨트롤은 모서리를
 *   차지하고, 모바일에서는 손가락으로 누를 수 없는 크기라 지도만 가린다.
 *   JS 는 각 페이지가 `zoomControl: false` 로 만들지만(그게 정본), leaflet.css 를
 *   나중에 로드하는 페이지나 동적으로 만든 지도까지 막도록 CSS 로도 숨긴다.
 *   !important 이유는 아래 말풍선 규칙과 같다 — leaflet.css 와의 순서가 흔들린다.
 * ============================================================================= */
.leaflet-control-zoom { display: none !important; }

/* =============================================================================
 * 지도 말풍선(Leaflet) 닫기 — 클래스는 Leaflet 이 만들므로 우리 클래스를 붙일 수 없다.
 *   !important 이유: leaflet.css 가 이 파일보다 **먼저** 로드되지만, 페이지 인라인
 *   <style> 이 뒤에 오는 경우까지 고려하면 명시도만으로는 순서가 흔들린다.
 *   기본 = 밝은 지면(장소 카드), 사진이 올라간 팝업은 아래에서 어두운 채움으로 덮는다.
 * ============================================================================= */
.leaflet-container a.leaflet-popup-close-button {
  width: 32px !important;
  height: 32px !important;
  top: 8px !important;
  right: 8px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule) !important;
  border-radius: var(--ctrl-radius) !important;
  background: var(--card) !important;
  color: var(--ink-2) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 1px 4px rgba(var(--ink-rgb), .3);
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus-visible {
  background: var(--ink-surface) !important;
  border-color: var(--ink-surface) !important;
  color: var(--paper) !important;
}
/* 사진·영상이 올라간 팝업 — 캘린더의 장소/축제 팝업 (JS 가 className 으로 붙인다).
   ⚠ 명시도 주의: 위 기본 규칙이 `.leaflet-container a.leaflet-popup-close-button`(0,2,1) 이라
   `.pl-popup-wrap .leaflet-popup-close-button`(0,2,0) 로는 !important 끼리 맞붙어 기본이 이긴다.
   두 클래스를 함께 쓰는 형태로 명시도를 올려야 실제로 덮인다(첫 검증에서 이것 때문에 FAIL). */
.leaflet-container .pl-popup-wrap a.leaflet-popup-close-button,
.leaflet-container .pl-fest-popup a.leaflet-popup-close-button {
  border-color: transparent !important;
  background: rgba(var(--ink-rgb), .72) !important;
  color: #fff !important;
  backdrop-filter: blur(3px);
}
.leaflet-container .pl-popup-wrap a.leaflet-popup-close-button:hover,
.leaflet-container .pl-fest-popup a.leaflet-popup-close-button:hover {
  background: rgba(184, 134, 11, .9) !important;
  color: var(--ink) !important;
}