/* 전국 민박 찾기 방문자 화면의 스타일 — 선택 줄·요약·목록·쪽 나눔·놀러와 안내·지도 자리(hmb- 접두어) */

/* ──────────────────────────────────────────────────────────────
   색 대비(WCAG 상대휘도 공식으로 실제 계산한 값, 2026-09-19)
     글자 #1A1A17 on #FFFFFF (민박 이름·본문)            17.44:1  통과
     글자 #1A1A17 on #F4F1EA (크림 배경 위 본문)         15.46:1  통과
     글자 #0A3D25 on #FFFFFF (이름·버튼 글자)            12.30:1  통과
     글자 #5B5F57 on #FFFFFF (주소·객실·요약)             6.52:1  통과
     글자 #5B5F57 on #F4F1EA (크림 배경 위 보조)          5.78:1  통과
     글자 #1F6E43 on #FFFFFF (테두리형 버튼 글자)         6.23:1  통과
     흰 글자 #FFFFFF on #1F6E43 (현재 쪽 버튼)            6.23:1  통과
   놀러와 버튼은 **테두리형 그린**이다. 채움 주황(#B85A14)은 사이트의 교육 CTA
   전용색이라 예약 안내에는 쓰지 않는다(채움도 테두리도 쓰지 않는다).
   ────────────────────────────────────────────────────────────── */

.hmb-root {
  --hmb-brand: var(--hm-brand, #0A3D25);
  --hmb-cta: var(--hm-cta, #1F6E43);
  --hmb-line: var(--hm-line, #E4DFD3);
  --hmb-surface: var(--hm-surface, #ffffff);
  --hmb-bg: var(--hm-bg, #F4F1EA);
  --hmb-weak: var(--hm-brand-weak, #E7F1EB);
  --hmb-text: var(--hm-text, #1A1A17);
  --hmb-text-sub: var(--hm-text-sub, #5B5F57);
  --hmb-r-card: var(--hm-r-card, 16px);
  --hmb-r-input: var(--hm-r-input, 10px);
  --hmb-r-pill: var(--hm-r-pill, 999px);

  font-family: var(--hm-font, "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif);
  color: var(--hmb-text);
  letter-spacing: -0.01em;
  max-width: var(--hm-container, 1200px);
  margin: 0 auto;
}

.hmb-root *, .hmb-root *::before, .hmb-root *::after { box-sizing: border-box; }

.hmb-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 선택 줄 ─────────────────────────────────────────────── */

.hmb-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 0 0 16px;
}

.hmb-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 0; }

.hmb-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--hmb-text-sub);
}

.hmb-select, .hmb-input {
  min-height: 44px;
  width: 100%;
  padding: 0 12px;
  font-family: inherit;
  font-size: 16px;            /* 16px 미만이면 iOS 사파리가 입력할 때 화면을 확대한다. */
  color: var(--hmb-text);
  background: var(--hmb-surface);
  border: 1px solid var(--hmb-line);
  border-radius: var(--hmb-r-input);
}
.hmb-select:disabled { background: var(--hmb-bg); color: var(--hmb-text-sub); }
.hmb-input { -webkit-appearance: none; appearance: none; }
.hmb-input::placeholder { color: var(--hmb-text-sub); opacity: 1; }

/* ── 요약 ────────────────────────────────────────────────── */

.hmb-summary {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--hmb-line);
  border-bottom: 1px solid var(--hmb-line);
  font-size: 15px;
  color: var(--hmb-text-sub);
  word-break: keep-all;              /* 한국어는 낱말 단위로 줄을 바꾼다. */
  overflow-wrap: anywhere;           /* 칸보다 긴 낱말은 그때만 쪼개 화면 밖으로 밀려나지 않게 한다. */
}

/* ── 지도 자리(1단계에서는 숨김, 시안에서만 안내 상자) ──── */

.hmb-mapbox {
  margin: 16px 0 0;
  padding: 28px 16px;
  border: 1px dashed var(--hmb-line);
  border-radius: var(--hmb-r-card);
  background: var(--hmb-bg);
  text-align: center;
}
.hmb-mapbox[hidden] { display: none; }
.hmb-mapbox-note { margin: 0; font-size: 15px; font-weight: 600; color: var(--hmb-text-sub); }

/* ── 지도 (2단계 — minbak-map.js 가 켜졌을 때만) ─────────
   색 대비(WCAG 상대휘도 공식으로 실제 계산한 값, 2026-09-20)
     글자 #1A1A17 on #E7F1EB (고른 항목의 강조 배경)      15.10:1  통과
     글자 #0A3D25 on #E7F1EB (고른 항목의 민박 이름)      10.65:1  통과
     글자 #5B5F57 on #FFFFFF (지도 아래 안내 한 줄)        6.52:1  통과
     글자 #1F6E43 on #FFFFFF (지도 버튼 글자)              6.23:1  통과
   새 색은 쓰지 않고 기존 토큰만 썼다. 채움 주황(#B85A14)은 교육 CTA 전용이라 여기에도 쓰지 않는다.
   버튼·안내는 `.hmb-root` 를 한 칸 더 얹어 선언한다 — 부모 테마의 `.single-content p`(0,1,1)·
   `.single-content button`(0,1,1)이 0,1,0 규칙을 이기기 때문이다. */

.hmb-mapbox.is-live {
  padding: 0;
  border: 1px solid var(--hmb-line);
  border-radius: var(--hmb-r-card);
  background: var(--hmb-surface);
  text-align: left;
  overflow: hidden;
}

.hmb-root .hmb-map-toggle {
  display: none;                     /* 넓은 화면에서는 지도가 늘 펼쳐져 있어 토글이 필요 없다. */
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  color: var(--hmb-cta);
  background: var(--hmb-surface);
  border: 0;
  border-bottom: 1px solid var(--hmb-line);
  border-radius: 0;
  cursor: pointer;
}
.hmb-root .hmb-map-toggle:hover { background: var(--hmb-weak); }

.hmb-map-canvas {
  width: 100%;
  height: 380px;
  background: var(--hmb-bg);
}
.hmb-map-canvas[hidden] { display: none; }
/* 테마의 `img{max-width:100%;height:auto}` 가 지도 타일에 걸리면 타일이 어긋난다(카카오 공식 안내의 알려진 충돌). */
.hmb-map-canvas img { max-width: none; height: auto; }

.hmb-root .hmb-map-note {
  margin: 0;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hmb-text-sub);
  border-top: 1px solid var(--hmb-line);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.hmb-root .hmb-map-note[hidden] { display: none; }

/* 마커 말풍선 — 이름만 한 줄. */
.hmb-map-bubble {
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hmb-text);
  white-space: nowrap;
}

/* 지도에서 고른 민박 — 색만으로 구분하지 않게 왼쪽 굵은 선을 함께 준다. */
.hmb-item.is-active {
  background: var(--hmb-weak);
  border-left: 4px solid var(--hmb-cta);
  padding-left: 12px;
}
.hmb-item.is-active:focus { outline: none; }
.hmb-item.is-active:focus-visible { outline: 2px solid var(--hmb-cta); outline-offset: -2px; }

.hmb-root .hmb-tomap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--hmb-cta);
  background: var(--hmb-surface);
  border: 1px solid var(--hmb-cta);
  border-radius: var(--hmb-r-pill);
  white-space: nowrap;
  cursor: pointer;
}
.hmb-root .hmb-tomap:hover { background: var(--hmb-weak); }

@media (max-width: 767px) {
  .hmb-root .hmb-map-toggle { display: block; }
  .hmb-map-canvas { height: 300px; }
  .hmb-root .hmb-tomap { margin-left: auto; }
}

/* ── 안내·오류 ───────────────────────────────────────────── */

.hmb-status { padding: 20px 0 0; }
.hmb-status[hidden] { display: none; }
.hmb-msg { margin: 0; font-size: 15px; color: var(--hmb-text-sub); }
.hmb-msg-error { color: var(--hmb-text); font-weight: 600; margin-bottom: 12px; }

.hmb-retry {
  min-height: 44px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--hmb-cta);
  background: var(--hmb-surface);
  border: 1px solid var(--hmb-cta);
  border-radius: var(--hmb-r-pill);
  cursor: pointer;
}
.hmb-retry:hover { background: var(--hmb-weak); }

/* ── 목록 ────────────────────────────────────────────────── */

.hmb-list { list-style: none; margin: 8px 0 0; padding: 0; }
.hmb-list[hidden] { display: none; }
.hmb-list:focus { outline: none; }
.hmb-list:focus-visible { outline: 2px solid var(--hmb-cta); outline-offset: 4px; }

.hmb-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--hmb-line);
}
.hmb-item:hover { background: var(--hmb-bg); }

.hmb-item-main { flex: 1 1 260px; min-width: 0; }

.hmb-name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--hmb-brand);
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.hmb-addr {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--hmb-text-sub);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.hmb-rooms {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--hmb-text-sub);
}

.hmb-map {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--hmb-cta);
  border-radius: var(--hmb-r-pill);
  color: var(--hmb-cta);
  background: var(--hmb-surface);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.hmb-map:hover { background: var(--hmb-weak); }

/* ── 쪽 나눔 ─────────────────────────────────────────────── */

.hmb-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 0 0;
}
.hmb-pages[hidden] { display: none; }

.hmb-page {
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--hmb-brand);
  background: var(--hmb-surface);
  border: 1px solid var(--hmb-line);
  border-radius: var(--hmb-r-pill);
  cursor: pointer;
}
.hmb-page:hover:not(:disabled) { background: var(--hmb-weak); border-color: var(--hmb-cta); }
.hmb-page:disabled { color: var(--hmb-text-sub); background: var(--hmb-bg); cursor: default; }
.hmb-page.is-current {
  color: #ffffff;                    /* 흰 글자 on #1F6E43 = 6.23:1 */
  background: var(--hmb-cta);
  border-color: var(--hmb-cta);
  font-weight: 700;
}
.hmb-gap {
  min-width: 24px;
  text-align: center;
  color: var(--hmb-text-sub);
}

/* ── 놀러와 안내 ─────────────────────────────────────────── */

.hmb-nollwa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 28px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--hmb-line);
  border-left: 4px solid var(--hmb-cta);
  border-radius: var(--hmb-r-card);
  background: var(--hmb-surface);
}
.hmb-nollwa-text {
  flex: 1 1 260px;
  margin: 0;
  font-size: 15px;
  color: var(--hmb-text);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 테두리형 — 채움 주황은 교육 CTA 전용이라 여기에 쓰지 않는다. */
.hmb-nollwa-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 2px solid var(--hmb-cta);
  border-radius: var(--hmb-r-pill);
  color: var(--hmb-cta);             /* #1F6E43 on #fff = 6.23:1 */
  background: var(--hmb-surface);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.hmb-nollwa-btn:hover { background: var(--hmb-weak); }

/* ── 스크립트가 없을 때 서버가 그려 두는 표 (render.php) ──
   스크립트가 돌면 render.php 의 boot 가 이 영역에 hidden 을 걸고, 그 자리에 위 화면이 붙는다. */

.hmb-fallback[hidden] { display: none; }

.hmb-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--hmb-surface);
  font-size: 15px;
}
.hmb-table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 8px;
  font-size: 14px;
  color: var(--hmb-text-sub);
}
.hmb-table th, .hmb-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hmb-line);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.hmb-table thead th { background: var(--hmb-bg); color: var(--hmb-text-sub); font-weight: 700; }
.hmb-table tbody th { color: var(--hmb-brand); font-weight: 700; }
.hmb-table tfoot th, .hmb-table tfoot td { background: var(--hmb-bg); color: var(--hmb-text); font-weight: 700; }
.hmb-note { margin: 10px 0 0; font-size: 14px; color: var(--hmb-text-sub); }

/* ── 포커스 ──────────────────────────────────────────────── */

.hmb-root button:focus-visible,
.hmb-root select:focus-visible,
.hmb-root input:focus-visible,
.hmb-root a:focus-visible {
  outline: 2px solid var(--hmb-cta);
  outline-offset: 2px;
}

/* ── 반응형 ──────────────────────────────────────────────── */

@media (max-width: 767px) {
  .hmb-controls { gap: 10px 12px; }
  .hmb-field { flex: 1 1 100%; }
  .hmb-summary { font-size: 14px; }
  .hmb-item { padding: 12px 0; gap: 6px 12px; }
  .hmb-item-main { flex: 1 1 100%; }
  .hmb-map { margin-left: auto; }
  .hmb-nollwa { padding: 16px; }
  .hmb-nollwa-btn { flex: 1 1 100%; }
}

@media (max-width: 359px) {
  .hmb-page { min-width: 44px; padding: 0 8px; }
  .hmb-map { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hmb-root *, .hmb-root *::before, .hmb-root *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ══ 테마 간섭 차단 ══════════════════════════════════════════════
   사이트 추가 CSS 의 본문 공통 규칙(`body:not(.home) .entry-content …`)이 이 컴포넌트
   안까지 닿아 시안과 다르게 보이는 것을 막는다. 실측 재현 — 60_제작기록/minbak/theme_repro.html.
   테마 규칙의 특이도는 0,2,2 ~ 0,3,3 이라 컴포넌트의 0,1,0 규칙을 이긴다. 그래서 같은
   조상 사슬에 `.hmb-root` 를 한 칸 더 얹어 특이도를 0,3,x ~ 0,5,x 로 올리고, 테마가
   덮어쓴 속성만 컴포넌트가 원래 쓰던 값으로 다시 선언한다. !important 는 쓰지 않는다.
   홈(body.home)에는 이 컴포넌트가 없어 고려하지 않는다.
   ① ul/li — 민박 한 곳마다 앞에 녹색 점(li::before)·왼쪽 22px 들여쓰기·아래 10px 여백
   ② table — 스크립트가 없을 때 보이는 표(.hmb-table)의 테두리·둥근 모서리·칸 여백
             14/16px·글자색·캡션이 표 아래로 내려가는 것·첫 열 90px 고정
   `inherit` 을 쓴 곳은 컴포넌트가 값을 선언하지 않고 물려받기를 의도한 자리다.
   서버가 그려 두는 표도 `.hmb-root hmb-fallback` 안에 있어 이 구역이 함께 덮는다. */

/* ① 목록 */
body:not(.home) .entry-content .hmb-root ul { margin: 0; padding: 0; }
body:not(.home) .entry-content .hmb-root li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: static;
  color: inherit;
  line-height: inherit;
}
body:not(.home) .entry-content .hmb-root li::before,
body:not(.home) .entry-content .hmb-root li::after { content: none; }
body:not(.home) .entry-content .hmb-root .hmb-list { margin: 8px 0 0; }
body:not(.home) .entry-content .hmb-root .hmb-item { padding: 12px 4px; }

/* ② 서버 렌더 표 */
body:not(.home) .entry-content .hmb-root .hmb-table {
  border: 0;
  border-radius: 0;
  overflow: visible;
  font-size: 15px;
  border-collapse: collapse;
  border-spacing: 2px;        /* 브라우저 기본값. collapse 에서는 쓰이지 않지만 테마가 0 으로 바꿔 둔 것을 되돌린다. */
}
/* 캡션은 표 위에 남는다 — 테마는 표 아래로 내린다. */
body:not(.home) .entry-content .hmb-root .hmb-table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 8px;
  font-size: 14px;
  color: var(--hmb-text-sub);
}
body:not(.home) .entry-content .hmb-root .hmb-table th,
body:not(.home) .entry-content .hmb-root .hmb-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hmb-line);
  color: inherit;
  line-height: inherit;
}
/* 테마는 표의 첫 열을 90px·가운데로 고정한다 — 시·도 이름 칸이 그대로여야 한다. */
body:not(.home) .entry-content .hmb-root .hmb-table th:first-child { width: auto; }
body:not(.home) .entry-content .hmb-root .hmb-table thead th { color: var(--hmb-text-sub); }
body:not(.home) .entry-content .hmb-root .hmb-table tbody th {
  color: var(--hmb-brand);
  background: transparent;
  white-space: normal;
}

@media (max-width: 767px) {
  body:not(.home) .entry-content .hmb-root .hmb-item { padding: 12px 0; }
}

/* ③ 지도(2단계) — 위 ① 의 `.hmb-item { padding: 12px 4px }` 가 강조 항목의 왼쪽 여백을
   되돌려 버리고, 본문 공통 규칙이 안내 한 줄·버튼·지도 타일에 닿는 것을 막는다.
   부모 테마의 `.single-content p`(아래 여백 2rem)·`.single-content button` 과
   `img{max-width:100%}` 도 같은 자리에서 함께 막는다(위 지도 구역에도 같은 선언이 있다). */
body:not(.home) .entry-content .hmb-root .hmb-item.is-active { padding-left: 12px; }
body:not(.home) .entry-content .hmb-root .hmb-map-note {
  margin: 0;
  padding: 12px 16px;
  color: var(--hmb-text-sub);
  line-height: 1.6;
  max-width: none;
}
body:not(.home) .entry-content .hmb-root .hmb-map-toggle,
body:not(.home) .entry-content .hmb-root .hmb-tomap {
  font-family: inherit;
  color: var(--hmb-cta);
  background: var(--hmb-surface);
}
body:not(.home) .entry-content .hmb-root .hmb-map-canvas img { max-width: none; height: auto; }