/* Pro.B 맛집지도 v1.10.0 — standalone 레이아웃 이식 */

.probmap-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px 90px;
  color: #1d1d1f;
  letter-spacing: -0.01em;
}

/* 히어로 + 통계 */
.probmap-hero { max-width: 1024px; margin: 0 auto; padding: 44px 0 24px; text-align: center; }
.probmap-hero h1 { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.probmap-hero p { margin-top: 14px; font-size: 17px; color: #6e6e73; }
.probmap-stats { margin-top: 22px; display: flex; justify-content: center; gap: 28px; }
.pm-stat { display: flex; flex-direction: column; align-items: center; }
.pm-stat-num { font-size: 22px; font-weight: 700; color: #1d1d1f; height:34px; display:flex; align-items:center; justify-content:center; overflow:visible; }
.pm-stat-label { color: #6e6e73; font-size: 12.5px; margin-top: 2px; }

/* 컨트롤 바 */
.probmap-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; min-height: 34px; }
#probmap-breadcrumb { font-size: 14px; color: #6e6e73; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pm-crumb { background: none; border: none; font: inherit; color: #0071e3; cursor: pointer; padding: 0; }
.pm-crumb:hover { text-decoration: underline; }
.pm-crumb.current { color: #1d1d1f; font-weight: 600; cursor: default; }
.pm-crumb.current:hover { text-decoration: none; }
.pm-sep { color: #c7c7cc; }
#probmap-back {
  margin-left: auto; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #1d1d1f;
  background: #f5f5f7; border: 0.5px solid rgba(0,0,0,0.1); border-radius: 980px; padding: 7px 16px;
  cursor: pointer; transition: all 0.15s; display: none; align-items: center;
}
#probmap-back:hover { background: #1d1d1f; color: #fff; }

/* 지도 패널 */
#probmap-svg-wrap {
  position: relative; width: 100%; aspect-ratio: 1000 / 720; max-height: 80vh;
  background: #fbfbfd; border: 0.5px solid rgba(0,0,0,0.06); border-radius: 18px;
  overflow: hidden; margin-bottom: 24px;
}
.probmap-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pm-map-hint { position: absolute; left: 16px; bottom: 13px; font-size: 12px; color: #aeaeb2; pointer-events: none; }

/* 지역: 맛집 수에 따라 회색 농담 (애플 톤) */
.pm-region { fill: #f0f0f2; stroke: #fff; stroke-width: 1.2; transition: fill 0.15s; vector-effect: non-scaling-stroke; }
.pm-region.clickable { cursor: pointer; }
.pm-region[data-lv="0"] { fill: #f0f0f2; }
.pm-region[data-lv="1"] { fill: #dcdce0; }
.pm-region[data-lv="2"] { fill: #bcbcc4; }
.pm-region[data-lv="3"] { fill: #95959e; }
.pm-region[data-lv="4"] { fill: #6e6e78; }
.pm-region.hover { fill: #007aff !important; }

.pm-label {
  font-family: 'Pretendard', -apple-system, sans-serif;
  font-size: 13px; font-weight: 600; fill: #1d1d1f; text-anchor: middle;
  pointer-events: none; paint-order: stroke;
  stroke: rgba(255,255,255,.92); stroke-width: 3px; stroke-linejoin: round;
}
/* 진한 지역 위 라벨은 흰색으로 (JS에서 on-dark 부여) */
.pm-label.on-dark { fill: #fff; stroke: rgba(0,0,0,.25); stroke-width: 2.5px; }
.pm-badge-bg { fill: #1d1d1f; }
.pm-badge-num { fill: #fff; font-size: 10.5px; font-weight: 700; font-family: 'Pretendard', sans-serif; text-anchor: middle; }

/* 독도 인셋 (전국 화면 우하단) */
.pm-dokdo-box { fill: #fff; stroke: #d2d2d7; stroke-width: 1; transition: stroke 0.15s; }
.pm-dokdo-box.hover { stroke: #007aff; stroke-width: 1.5; }
.pm-dokdo-isl { fill: #dcdce0; stroke: #fff; stroke-width: 0.5; }
.pm-dokdo-label { font-family: 'Pretendard', sans-serif; font-size: 12px; font-weight: 700; fill: #1d1d1f; }
.pm-dokdo-sub { font-family: 'Pretendard', sans-serif; font-size: 10px; fill: #6e6e73; }

/* 맛집 핀 (동 화면) */
.pm-pin-dot { fill: #007aff; stroke: #fff; stroke-width: 2; }
.pm-pin-halo { fill: #007aff; opacity: 0.18; }
.pm-pin:hover .pm-pin-dot { fill: #0051d5; }

.pm-tip {
  position: fixed; z-index: 9999; display: none;
  background: rgba(29,29,31,.95); color: #fff;
  padding: 8px 12px; border-radius: 10px; font-size: 13px;
  pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.pm-tip strong { display: block; margin-bottom: 2px; font-weight: 700; }
.pm-tip span { color: #c7c7cc; font-size: 12px; }

/* 목록 패널 */
.probmap-listwrap { margin-top: 0; }
.probmap-listhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
#probmap-list-title { font-size: 17px; font-weight: 700; }
.pm-list-sub { display: block; font-size: 12.5px; color: #6e6e73; margin-bottom: 14px; }

/* 검색 + 별점 필터 (애플 톤) */
.pm-tools { display: flex; align-items: center; gap: 10px; }
.pm-selwrap { position: relative; }
.pm-sel {
  font-size: 13px; font-weight: 500; padding: 0 34px 0 16px; height: 38px;
  border-radius: 19px; border: none; cursor: pointer; font-family: inherit;
  color: #1d1d1f; appearance: none; -webkit-appearance: none;
  background: #f5f5f7; transition: background .18s ease;
}
.pm-sel:hover { background: #ececef; }
.pm-sel:focus { outline: none; box-shadow: 0 0 0 3.5px rgba(0,122,255,.16); }
.pm-selwrap::after {
  content: ''; position: absolute; right: 15px; top: 50%; width: 10px; height: 6px;
  margin-top: -3px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.pm-search {
  display: flex; align-items: center; gap: 7px;
  background: #f5f5f7; border: none; border-radius: 19px;
  height: 38px; padding: 0 14px; width: 190px;
  transition: background .18s ease, box-shadow .18s ease, width .22s ease;
}
.pm-search:focus-within { background: #fff; box-shadow: 0 0 0 3.5px rgba(0,122,255,.16), inset 0 0 0 1px #e5e5ea; width: 230px; }
.pm-search svg { flex-shrink: 0; color: #8e8e93; }
.pm-search input { border: none; outline: none; font-size: 14px; width: 100%; background: transparent; font-family: inherit; color: #1d1d1f; }
.pm-search input::placeholder { color: #aeaeb2; }
.pm-search-clear { border: none; background: #c7c7cc; color: #fff; cursor: pointer; width: 17px; height: 17px; border-radius: 50%; font-size: 10px; line-height: 1; display: none; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; }
.pm-search-clear:hover { background: #aeaeb2; }
.pm-search-clear.show { display: flex; }

@media (max-width: 560px) {
  .probmap-listhead { align-items: stretch; }
  .pm-tools { width: 100%; }
  .pm-search, .pm-search:focus-within { flex: 1; width: auto; }
}

#probmap-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }

@keyframes pmCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.pm-card {
  display: block; text-decoration: none;
  background: #f5f5f7; border-radius: 14px; padding: 14px 16px;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
  animation: pmCardIn .26s ease backwards;
}
.pm-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.pm-card-top { display: flex; align-items: center; justify-content: space-between; }
.pm-card-name { font-size: 14.5px; font-weight: 700; color: #1d1d1f; }
.pm-card-rating { font-size: 12px; color: #1d1d1f; font-weight: 600; white-space: nowrap; display:flex; align-items:center; }
.pm-card-rating .pb-rate{align-items:center;gap:1px}
.pm-card-rating .pb-rate .b-ico{width:15px;height:15px;flex-shrink:0}
.pm-card-rating .pb-rate .pb-val{margin-left:5px;line-height:1;color:#6e6e73}
.pm-card-meta { font-size: 12px; color: #6e6e73; margin-top: 2px; }
.pm-card-line { font-size: 13px; color: #1d1d1f; margin-top: 7px; line-height: 1.5; }
.pm-card-date { font-size: 11.5px; color: #aeaeb2; margin-top: 7px; }

.pm-empty, .pm-error { font-size: 13px; color: #aeaeb2; padding: 30px 0; text-align: center; grid-column: 1 / -1; }

@media (max-width: 760px) {
  .probmap-hero h1 { font-size: 34px; }
}

/* Pro.B 평점 아이콘(B) 정렬 */
.pb-rate{display:inline-flex;align-items:center;gap:2px}
.pb-rate .b-ico{display:inline-block;flex-shrink:0}
.pb-rate .pb-val{margin-left:5px;font-weight:600}
.pm-stat-num .pb-rate{justify-content:center;align-items:center;gap:5px;height:34px}
.pm-stat-num .pb-rate .b-ico{width:30px;height:30px;flex-shrink:0}
.pm-stat-num .pb-rate .pb-val{margin-left:0;font-size:22px;font-weight:700;color:#1d1d1f;line-height:34px}