/* ============================================================
   finder.css — 병원·약국 찾기 (메디어디) 전용 스타일
   ============================================================ */

/* 페이지 루트 — 모바일 가로 스크롤 방어선 (자식 그리드/플렉스 블로우-아웃 안전망).
   overflow-x: clip 은 hidden 과 달리 sticky/sticky 스크롤 컨텍스트를 끊지 않아
   .finder-active-filters sticky 가 정상 동작한다. */
#page-finder { max-width: 100%; }
@media (max-width: 1080px) {
  #page-finder { overflow-x: clip; }
}

/* ── 히어로 ─────────────────────────────────────────────────── */
/* .finder-hero 는 .page-hero--primary 를 상속. padding/min-height 는 공통 토큰이 담당.
   .finder-hero__inner: 단일 컬럼 — 좌측 메인만 (신뢰 카드는 본문 하단 .finder-guide-cards 로 이동)
   카피·검색바·빠른태그 모두 컨테이너 안에서 가운데 정렬 (PC + 모바일 공통). */
.finder-hero__inner { display: block; text-align: center; }
.finder-hero__main {
  min-width: 0;
  max-width: 720px;
  margin: 0 auto;       /* 가로 가운데 */
  text-align: center;
}
.finder-hero__badge { margin-bottom: 14px; display: inline-flex; }
/* h1 줄바꿈 — 데스크톱·모바일 모두 "병원·약국·응급실 / 한 번에 찾기" 2줄 고정.
   한국어 wrap 안정화 (단어 중간 끊김 방지) */
.finder-hero__br { display: inline; }
.finder-hero .page-hero__title,
.finder-hero .page-hero__sub {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 검색바·빠른태그 — flex 컨테이너이므로 가운데 정렬 + 폭 제한 */
.finder-hero__main .finder-search-bar {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.finder-hero__main .finder-quick-tags {
  justify-content: center;
}

/* ── 모드 토글 (직접 검색 ↔ 필터 검색) — 2026-05-20 사용자 요청 ───────────
   Hero 안에서 같은 자리 토글. 활성 모드 pane 만 표시 + 결과는 토글해도 유지.
   segmented control 스타일 (둥근 두 버튼 + 활성 흰 배경 + 그림자). */
.finder-mode-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: 5px;
  /* sub 텍스트와 시각적 분리 — hero 정보 밀도 완화 위해 간격 축소(2026-06-02). */
  margin: 18px auto 12px;
  padding: 5px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .14);
}
.finder-mode-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 132px;       /* 두 탭 폭 통일 — 토글 무게중심 안정 */
  padding: 11px 24px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
}
.finder-mode-tab svg { width: 15px; height: 15px; }
.finder-mode-tab:hover:not(.is-active) {
  color: var(--primary, #2563eb);
  background: rgba(37, 99, 235, .07);
}
.finder-mode-tab.is-active {
  background: var(--primary, #2563eb);
  color: #fff;
  box-shadow: 0 3px 10px rgba(37, 99, 235, .35);
}
.finder-mode-tab:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 2px;
}
.finder-mode-tab svg { flex-shrink: 0; }

/* mode pane — 활성 모드만 표시 */
.finder-mode-pane { display: none; }
.finder-mode-pane.is-active { display: block; }

/* hero 안 .finder-filter-section — 본문에서 옮겨온 마크업이 hero 폭/배경에 맞도록 보정 */
.finder-mode-pane--filter,
#finderModePaneFilter {
  text-align: left;
  max-width: 720px;
  margin: 0 auto;
}
#finderModePaneFilter .finder-filter-section {
  background: rgba(255, 255, 255, .92);
  padding: 18px 18px 8px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
  backdrop-filter: blur(6px);
}

@media (max-width: 768px) {
  .finder-mode-toggle {
    width: 100%;
    max-width: 320px;
    margin: 18px auto 14px; /* 모바일은 sub 와의 간격 축소 — hero 세로 압축 */
  }
  .finder-mode-tab { flex: 1 1 50%; justify-content: center; padding: 9px 12px; font-size: 12.5px; }
  #finderModePaneFilter .finder-filter-section { padding: 14px 12px 4px; }
}

/* ── 신뢰/안내 카드 (본문 하단 .finder-guide-cards 안에 사용) ── */
.finder-trust-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.finder-trust-card:hover {
  border-color: #cbd5e1;
}
.finder-trust-card__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1d4ed8;
}
.finder-trust-card__icon--alt {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #047857;
}
.finder-trust-card__icon--emrg {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #b91c1c;
}
.finder-trust-card__body { min-width: 0; }
.finder-trust-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  line-height: 1.35;
  margin-bottom: 2px;
}
.finder-trust-card__sub {
  font-size: 11.5px;
  color: var(--text-sub, #475569);
  line-height: 1.4;
}
.finder-trust-card__sub a {
  color: #b91c1c;
  font-weight: 700;
  text-decoration: none;
}
.finder-trust-card__sub a:hover { text-decoration: underline; }

/* ── 검색바 — [GPS 인라인 | divider | 입력창] + [검색 버튼] ── */
.finder-search-bar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.finder-search-input-wrap {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 620px;
  position: relative;
  background: #fff;
  border-radius: 14px;
  display: flex;
  align-items: stretch;
  padding: 0;
  gap: 0;
  box-shadow: 0 6px 18px rgba(15,23,42,.12);
  transition: box-shadow .15s ease;
  overflow: hidden;
}
.finder-search-input-wrap:focus-within {
  box-shadow: 0 8px 24px rgba(37,99,235,.20);
}

/* GPS 인라인 버튼 — 검색창 안 좌측 */
.finder-gps-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 14px;
  border: none;
  background: transparent;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.finder-gps-inline:hover { background: #eff6ff; }
.finder-gps-inline:active { background: #dbeafe; }
.finder-gps-inline:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  border-radius: 12px;
}
.finder-gps-inline.has-location {
  background: #2563eb;
  color: #fff;
}
.finder-gps-inline.has-location:hover { background: #1d4ed8; }

/* 좌측 GPS ↔ 입력창 사이 구분선 */
.finder-search-input-wrap__divider {
  width: 1px;
  background: #e5e7eb;
  margin: 10px 0;
  flex-shrink: 0;
}

.finder-search-input-wrap input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  /* 16px — iOS Safari 는 focus 시 폰트 16px 미만 input 을 자동 확대(줌인)함.
     모든 폭/방향(아이폰 가로모드 포함)에서 줌 방지하려 base 부터 16px (2026-06-02). */
  font-size: 16px;
  height: 48px;
  padding: 0 14px;
  color: var(--text-main);
}

/* ── 우측 검색 버튼 — height 48px (input wrap 과 동일) ────────── */
.finder-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.finder-hero-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* hero 배경(파란 그라데이션) 위에서 확실한 대비를 주는 흰 배경 + primary 텍스트 + 진한 그림자.
   동일 톤 파란 버튼은 배경과 묻혀 CTA 강조 X. */
.finder-hero-btn--primary {
  background: #fff;
  color: var(--primary, #1a5fb4);
  border-color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  font-weight: 800;
}
.finder-hero-btn--primary:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
.finder-hero-btn--primary:active { transform: translateY(0); }
.finder-hero-btn:active { transform: translateY(0); }
.finder-address-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  max-height: 240px;
  overflow-y: auto;
  display: none;
}
.finder-address-dropdown.open { display: block; }
.finder-addr-item {
  padding: 10px 16px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  line-height: 1.4;
}
.finder-addr-item:last-child { border-bottom: none; }
.finder-addr-item:hover,
.finder-addr-item.is-active { background: var(--bg-hover); }
.finder-addr-item.is-active { outline: 2px solid var(--primary); outline-offset: -2px; }
.finder-addr-item__main { font-weight: 600; color: var(--text-main); }
.finder-addr-item__sub  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* 드롭다운 섹션 분리 — 의료기관·약국 / 지역 / 최근 검색 */
.finder-addr-section + .finder-addr-section {
  border-top: 1px solid var(--border-light, #eef0f3);
}
.finder-addr-section__title {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  letter-spacing: .02em;
  text-transform: uppercase;
  background: var(--bg-subtle, #fafbfc);
}
.finder-addr-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.finder-addr-item__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text-muted, #94a3b8);
}
.finder-addr-item__body { flex: 1; min-width: 0; }
.finder-addr-item--hospital .finder-addr-item__icon { color: var(--primary, #2563eb); }
.finder-addr-item--pharmacy .finder-addr-item__icon { color: #16a34a; }
.finder-addr-item--region   .finder-addr-item__icon { color: #f59e0b; }
.finder-addr-item--recent   .finder-addr-item__icon { color: #6b7280; }

/* 자동완성 "더 보기" 인플레이스 확장 칩 (모바일 트랙당 3건 1차 노출용) */
.finder-addr-more {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary, #2563eb);
  text-align: center;
  cursor: pointer;
  border-top: 1px dashed var(--border-light, #eef0f3);
}
.finder-addr-more:hover { background: var(--bg-hover, #f8fafc); }
.finder-addr-more:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* 자체 DB suggest 결과 0 안내 (renderSuggestDropdown) */
.finder-addr-empty {
  padding: 16px 18px;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  font-style: italic;
}

/* 결과 헤더의 검색 모드 뱃지 — [hidden] 속성을 author CSS 가 덮어쓰지 않도록 :not([hidden]) 한정 */
.finder-mode-banner[hidden] { display: none; }
.finder-mode-banner:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin: -4px 0 14px;
  background: linear-gradient(0deg, rgba(37,99,235,.04), rgba(37,99,235,.04)), var(--bg-card, #fff);
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-main);
}
.finder-mode-banner__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.finder-mode-banner__tag--name   { background: #dbeafe; color: #1d4ed8; }
.finder-mode-banner__tag--region { background: #fef3c7; color: #b45309; }
.finder-mode-banner__tag--hybrid { background: #ede9fe; color: #6d28d9; }
.finder-mode-banner__text { flex: 1; min-width: 120px; color: var(--text-sub, #475569); }
/* 작은 시도(세종 등) 인접 시도 fallback 안내 — 모드 배너 안에 인라인 */
.finder-mode-banner__note {
  flex-basis: 100%;
  font-size: 11.5px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 5px 8px;
  margin-top: 4px;
  line-height: 1.5;
}
/* 검색 해제 버튼 — 상세 필터 컨트롤·정렬 select 와 동일 pill 톤 */
.finder-mode-banner__clear {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;
  color: var(--text-sub, #475569);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.finder-mode-banner__clear:hover {
  background: #f0f7ff;
  border-color: var(--primary);
  color: var(--primary);
}
.finder-mode-banner__clear:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 검색어 하이라이트 (카드 이름 안 토큰) */
.finder-mark {
  background: #fff3a8;
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: inherit;
}

/* 일치도 최상위 강조 카드 — 이름 모드 1위 */
.finder-card--top-match {
  position: relative;
  border: 2px solid var(--primary, #2563eb);
  background: linear-gradient(0deg, rgba(37,99,235,.02), rgba(37,99,235,.02)), var(--bg-card, #fff);
}
.finder-card--top-match::before {
  content: "검색어 최상위 일치";
  position: absolute;
  top: -10px;
  left: 14px;
  background: var(--primary, #2563eb);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .02em;
}
.finder-card__top-pill { display: none; }
.finder-card__score-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(37,99,235,.08);
  color: var(--primary, #2563eb);
}

/* Phase 2 (HIRA) 보강 진행 인디케이터 — Phase 1 (Kakao) 결과 위에 얇은 띠로 노출 */
.finder-enrich-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 0 10px;
  background: linear-gradient(0deg, rgba(245, 158, 11, .06), rgba(245, 158, 11, .06)), var(--bg-card, #fff);
  border: 1px solid rgba(245, 158, 11, .25);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-sub, #475569);
}
.finder-enrich-badge__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  animation: finderEnrichPulse 1.2s ease-in-out infinite;
}
@keyframes finderEnrichPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

/* 시각 보조 (스크린리더 전용) */
.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px;
  padding: 0; border: 0;
  overflow: hidden;
  white-space: nowrap;
}

.finder-gps-btn { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.finder-gps-btn svg { flex-shrink: 0; }
.finder-search-btn { white-space: nowrap; }

/* ── 빠른 태그 ───────────────────────────────────────────────── */
.finder-quick-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.finder-quick-tags__label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: .02em;
  margin-right: 4px;
}
.finder-quick-tag {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.finder-quick-tag:hover {
  background: rgba(255,255,255,.32);
  border-color: rgba(255,255,255,.55);
  transform: translateY(-1px);
}
.finder-quick-tag--emergency {
  background: rgba(220,38,38,.78);
  border-color: rgba(254,202,202,.5);
}
.finder-quick-tag--emergency:hover {
  background: rgba(220,38,38,.92);
  border-color: rgba(254,202,202,.7);
}

/* ── 레이아웃 그리드 ──────────────────────────────────────────── */
/* minmax(0, 1fr) — 그리드 블로우-아웃 방지 (자식 콘텐츠가 길어져도 컨테이너를 밀어내지 않음).
   자식에 min-width:0 를 같이 적용해 카드 카로셀·긴 주소 등이 viewport 를 넘기지 않도록 보장. */
.finder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
  padding-top: 16px;
  padding-bottom: 64px;
}
.finder-layout > * { min-width: 0; }

/* ── 모바일 뷰 전환 탭 ───────────────────────────────────────── */
.finder-view-toggle {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 16px;
}
.finder-view-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all .15s;
}
.finder-view-btn.active {
  background: var(--primary);
  color: #fff;
}

/* ── 왼쪽 컬럼 ───────────────────────────────────────────────── */
.finder-list-col { display: flex; flex-direction: column; gap: 0; }

/* ── 필터 토글(details) — primary outline 버튼 형태로 강조 ──────────────
   직관성: 좌측 큰 아이콘 박스 + 제목 + 활성 필터 카운트 뱃지 + 우측 "펼치기/접기" 텍스트 + chevron.
   접힘/펼침 상태 모두 한눈에 인식. 기본 접힘이지만 클릭 영역이 커져 발견성 ↑. */
.finder-filter-details {
  margin: 0 0 14px;
}
.finder-filter-details__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid var(--primary, #1a5fb4);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  user-select: none;
  box-shadow: 0 2px 8px rgba(26, 95, 180, .08);
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .12s ease;
}
.finder-filter-details__summary::-webkit-details-marker { display: none; }
.finder-filter-details__summary::marker { display: none; }
.finder-filter-details__summary:hover {
  background: #f0f7ff;
  box-shadow: 0 4px 14px rgba(26, 95, 180, .14);
  transform: translateY(-1px);
}
.finder-filter-details__summary:active { transform: translateY(0); }
.finder-filter-details__summary:focus-visible {
  outline: 2px solid var(--primary, #1a5fb4);
  outline-offset: 2px;
}

/* 좌측 아이콘 박스 — primary 배경의 둥근 사각형 */
.finder-filter-details__icon-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: var(--primary, #1a5fb4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.finder-filter-details__title {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--text-main, #0f172a);
}

/* 활성 필터 개수 뱃지 — JS 가 hidden 토글 + 텍스트 갱신 */
.finder-filter-details__count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--primary, #1a5fb4);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.finder-filter-details__count[hidden] { display: none; }

.finder-filter-details__hint {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-sub, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 우측 액션 — "펼치기/접기" 텍스트 + chevron */
.finder-filter-details__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #1a5fb4);
  background: rgba(26, 95, 180, .08);
  padding: 5px 10px 5px 12px;
  border-radius: 999px;
}
.finder-filter-details__chev {
  transition: transform .2s ease;
}

/* 펼침 상태 — chevron 회전 + summary 외곽 표시 + 텍스트 "접기" 로 토글(JS 또는 CSS attr) */
.finder-filter-details[open] .finder-filter-details__summary {
  background: #f0f7ff;
  border-radius: 12px 12px 0 0;
  border-bottom-color: transparent;
}
.finder-filter-details[open] .finder-filter-details__chev { transform: rotate(180deg); }
.finder-filter-details[open] .finder-filter-section {
  border: 1.5px solid var(--primary, #1a5fb4);
  border-top: none;
  border-radius: 0 0 12px 12px;
  margin-top: 0;
  background: #fff;
}

/* 활성 필터 있을 때 summary 더 강조 (JS 가 .has-active 클래스 토글) */
.finder-filter-details.has-active .finder-filter-details__summary {
  background: #eff6ff;
  border-color: var(--primary, #1a5fb4);
  box-shadow: 0 4px 14px rgba(26, 95, 180, .18);
}

@media (max-width: 768px) {
  .finder-filter-details { margin-bottom: 10px; }
  .finder-filter-details__summary {
    padding: 10px 12px;
    gap: 10px;
    font-size: 13px;
  }
  .finder-filter-details__icon-wrap { width: 28px; height: 28px; border-radius: 7px; }
  /* hint 는 시각적으로 숨기되 flex 공간 차지 — spacer 로 작동해 action 을 우측 끝으로 push */
  .finder-filter-details__hint {
    visibility: hidden;
    width: 0;
    padding: 0;
    margin: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }
  .finder-filter-details__action {
    padding: 4px 8px 4px 10px;
    font-size: 12px;
  }
}
@media (max-width: 380px) {
  .finder-filter-details__action-text { display: none; }
  .finder-filter-details__action { padding: 5px; }
}

/* ── 필터 섹션 ───────────────────────────────────────────────── */
.finder-filter-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 필터 적용 액션 — 필터 변경은 즉시 검색 X, 사용자가 [이 조건으로 검색] 클릭 시만 실행.
   2026-05-20: sticky bottom 제거 (사용자 요청 — 스크롤 시 버튼이 따라와 거슬림).
   필터 영역 끝에 정적 배치 → 사용자가 명시적으로 필터를 다 만지고 아래로 이동해 클릭. */
.finder-filter-actions {
  display: flex;
  gap: 12px;
  align-items: stretch;
  justify-content: flex-end;
  padding: 16px 0 4px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  background: transparent;
}
.finder-filter-actions__reset {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-sub);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all .15s ease;
}
.finder-filter-actions__reset:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: #f0f7ff;
}
/* 메인 검색 액션 — flex-grow 1 로 reset 보다 크게 차지 + 큰 사이즈·강한 그림자로 CTA 강조 */
.finder-filter-actions__apply {
  flex: 1 1 auto;
  height: 46px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #2a85e3);
  border: 1px solid var(--primary);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 99, 216, .28);
  transition: all .15s ease;
}
.finder-filter-actions__apply svg {
  width: 16px;
  height: 16px;
}
.finder-filter-actions__apply:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(15, 99, 216, .36);
  transform: translateY(-1px);
}
.finder-filter-actions__apply:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(15, 99, 216, .28);
}

/* 모바일 — column-reverse 로 메인 액션(apply) 위 · 보조(reset) 아래. 둘 다 풀폭 + 터치 타겟 48px */
@media (max-width: 640px) {
  .finder-filter-actions {
    flex-direction: column-reverse;
    gap: 8px;
    padding: 14px 0 4px;
  }
  .finder-filter-actions__reset,
  .finder-filter-actions__apply {
    width: 100%;
    height: 48px;
    padding: 0 16px;
  }
  .finder-filter-actions__apply {
    font-size: 14.5px;
  }
}
/* 필터 변경됨 — 검색 버튼들에 .has-pending 추가 시 강조 (펄스 + 강한 그림자) */
.finder-filter-actions__apply.has-pending,
#finderSearchBtn.has-pending {
  animation: finderApplyPulse 1.6s ease-in-out infinite;
}
@keyframes finderApplyPulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(15, 99, 216, .22); }
  50%      { box-shadow: 0 4px 18px rgba(15, 99, 216, .55); }
}
/* main.css 의 `.filter-group { margin-bottom: 20px }` 가 section 의 gap 14px 과 누적되어
   각 그룹 사이가 34px 로 과도해지고, 마지막 그룹(지역) 아래에 20px 잉여 여백 발생 → margin 제거 */
.finder-filter-section .filter-group {
  margin-bottom: 0;
}
.finder-filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.pill-group--wrap { flex-wrap: wrap; gap: 6px; }

/* ── 상세 필터 컨트롤 통일 스펙 ──────────────────────────────────────────
   진료과목 pill / 조건·분류·등급 chip / 반경 버튼 / 시도 select 모두
   동일한 height·padding·font·border-radius 적용해 시각 정돈
   (높이 32px · padding 7×14 · font 12.5px · radius 999px pill)              */
.finder-filter-section .pill,
.finder-filter-section .finder-chip,
.finder-filter-section .finder-radius-btn,
.finder-filter-section .finder-select,
.finder-filter-section .finder-spec-toggle {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text-sub);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  user-select: none;
  white-space: nowrap;
  min-height: 32px;
  box-shadow: none;
}
.finder-filter-section .pill:hover,
.finder-filter-section .finder-chip:hover,
.finder-filter-section .finder-radius-btn:hover,
.finder-filter-section .finder-spec-toggle:hover {
  background: #f0f7ff;
  border-color: var(--primary);
  color: var(--primary);
  transform: none;
  box-shadow: none;
}
.finder-filter-section .pill.active,
.finder-filter-section .finder-radius-btn.active,
.finder-filter-section .finder-chip.chip-active,
.finder-filter-section .finder-chip:has(input:checked) {
  background: linear-gradient(135deg, var(--primary), #2a85e3);
  color: #fff;
  border-color: var(--primary);
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(15, 99, 216, .22);
}

/* 조건 칩 필터 */
.finder-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.finder-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-sub);
  transition: all .15s;
  user-select: none;
}
.finder-chip input { display: none; }
.finder-chip:has(input:checked) {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
/* fallback for browsers without :has */
.finder-chip.chip-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* 반경 + 지역 행 — 각 그룹이 라벨 위/컨트롤 아래 세로 스택, 행 단위로 가로 배치.
   2026-05-22: 반경 UI 제거 후 사실상 지역 그룹 단독. flex: 0 1 auto 기본값이 자식을
   콘텐츠 폭만 차지하게 만들어 우측 잉여 발생 → flex: 1 1 100% 로 부모 폭 강제 점유. */
.finder-filter-row2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.finder-filter-row2 > .filter-group {
  min-width: 0;
  flex: 1 1 100%;
}
/* 반경 버튼 + "위치 설정 필요" 배지를 한 행으로 묶음 (라벨 아래) */
.finder-radius-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* finder-filter-inline:
   - 부모(filter-row2) 내에서 100% 폭 확보. 5개 반경 버튼 + 라벨 + 위치설정 hint 가
     모바일에서 좁아도 줄바꿈으로 처리되도록 flex-wrap 허용 + min-width:0. */
.finder-filter-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.finder-filter-inline__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  white-space: nowrap;
}
/* 반경 버튼 트랙 — 좁은 단말에서 5개 버튼이 한 줄로 안 들어오면 줄바꿈 허용. */
.finder-radius-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.finder-radius-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-sub);
  background: transparent;
  transition: all .15s;
}
.finder-radius-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.finder-radius-btns.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}
.finder-radius-btns.is-disabled .finder-radius-btn { cursor: not-allowed; }
.finder-radius-hint {
  display: none;
  font-size: 11px;
  color: #b91c1c;
  margin-left: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 2px 8px;
  border-radius: 999px;
  animation: finder-radius-hint-pop .3s ease;
}
.finder-radius-hint.is-show { display: inline-block; }

/* 소프트 안내 배너 (운영시간 데이터 부재 등) */
.finder-soft-notice {
  display: flex; align-items: center; gap: 8px;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.finder-soft-notice svg { flex-shrink: 0; }
.finder-soft-notice span { flex: 1; }
.finder-soft-notice button {
  background: transparent; border: none; cursor: pointer;
  color: #92400e; font-size: 18px; padding: 0 4px; line-height: 1;
}

/* ── 저장 완료 토스트 — 헤더 ♥ 아이콘 안내 ─────────────────────── */
.finder-save-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 380px;
  width: calc(100% - 24px);
  box-shadow: 0 12px 28px rgba(6, 95, 70, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.finder-save-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.finder-save-toast__icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #10b981; color: #fff;
  border-radius: 50%;
}
.finder-save-toast__body { flex: 1; min-width: 0; }
.finder-save-toast__body strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
  color: #064e3b;
}
.finder-save-toast__body span { font-size: 12.5px; color: #047857; display: inline; }
.finder-save-toast__heart {
  vertical-align: -2px;
  margin: 0 1px;
  color: #10b981;
}
.finder-save-toast__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #065f46;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  align-self: flex-start;
}
@media (max-width: 640px) {
  .finder-save-toast {
    bottom: 16px;
    left: 12px;
    right: 12px;
    transform: translateY(10px);
    max-width: none;
    width: auto;
  }
  .finder-save-toast.show {
    transform: translateY(0);
  }
}

@keyframes finder-radius-hint-pop {
  0%   { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: translateX(0); }
}
.finder-select {
  padding: 5px 28px 5px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-main);
  background: var(--bg-card);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
/* 상세 필터 안 select 는 통일 스펙 + 화살표 자리 확보 (padding-right 28px)
   통일 룰의 `background: #fff` shorthand 가 base 의 chevron background-image 를 덮어쓰므로
   여기서 명시적으로 chevron data URI 를 다시 부여 (드롭다운임을 시각적으로 명확화) */
.finder-filter-section .finder-select {
  padding: 0 28px 0 14px;
  color: var(--text-sub);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.finder-filter-section .finder-select:hover {
  background-color: #f0f7ff;
}

/* ── 지역 캐스케이드 (시·도 → 시·군·구 → 읍·면·동) ─────────────────
   상위 3개 컨트롤(시·도 select / 시·군·구 select / 동 input)을 가로 정렬.
   모바일에서는 줄바꿈 + 각 컨트롤 100% 폭으로 떨어짐. */
.finder-region-cascade {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
/* 데스크톱 — 3개 select(시도·시군구·동) 가용 폭 균등 분배. 기존 min-width: 130px + flex: 0 0 auto
   조합은 부모 폭이 큰 데스크톱에서 우측에 잉여 공간을 남기는 회귀였음. */
.finder-region-cascade .finder-select--cascade {
  flex: 1 1 0;
  min-width: 0;
}
.finder-region-cascade .finder-select--cascade:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* 태블릿~대형 모바일 — 시도 풀폭(가장 중요한 1차 분류) · 시군구/동 2열 */
@media (max-width: 768px) {
  .finder-region-cascade { gap: 6px; }
  .finder-region-cascade .finder-select--cascade:first-child {
    flex: 1 1 100%;
  }
  .finder-region-cascade .finder-select--cascade:nth-child(2),
  .finder-region-cascade .finder-select--cascade:nth-child(3) {
    flex: 1 1 calc(50% - 3px);
  }
}

/* 좁은 폰 — 3개 모두 풀폭 세로 스택 (터치 타겟·가독성) */
@media (max-width: 480px) {
  .finder-region-cascade .finder-select--cascade {
    flex: 1 1 100%;
  }
}

/* 결과 탭 UI 폐기 (2026-05-20 사용자 요청) — .finder-result-tab* 블록 제거.
   검색/필터 결과는 동시 표시 X, 전환 X. 결과 영역 1개로 단순화. */

/* ── SSR 카드 (검색엔진 인덱싱용) — 2026-05-20 ──────────────────────────
   PHP 가 첫 페이지 5개 의료기관을 microdata 포함 HTML 로 미리 렌더. 크롤러가
   raw HTML 인덱싱 가능 → "전북 치과" 같은 쿼리에 페이지 매칭 확률 상승.
   JS 가 doSearch 직전에 .finder-ssr-cards 를 명시 제거하므로 사용자에겐 깜빡임 짧음.
   디자인은 본 .finder-card 마크업과 별도 (간단 카드) — JS 갱신 후 정식 카드 노출. */
.finder-ssr-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.finder-card--ssr {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.finder-card--ssr .finder-card__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.finder-card--ssr .finder-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  margin: 0;
}
.finder-card--ssr .finder-card__cls {
  font-size: 11.5px;
  color: var(--text-sub, #475569);
  padding: 2px 8px;
  background: #f1f5f9;
  border-radius: 999px;
}
.finder-card--ssr .finder-card__spec {
  font-size: 12.5px;
  color: var(--primary, #2563eb);
  font-weight: 600;
}
.finder-card--ssr .finder-card__addr {
  font-size: 12.5px;
  color: var(--text-sub, #475569);
  font-style: normal;
  line-height: 1.5;
}
.finder-card--ssr .finder-card__tel {
  font-size: 13px;
  color: var(--primary, #2563eb);
  text-decoration: none;
  font-weight: 600;
}
.finder-card--ssr .finder-card__tel:hover { text-decoration: underline; }

/* ── 내부 hub 링크 (SEO/AEO 인덱싱 가속) — 2026-05-20 ──────────────────── */
.finder-internal-hub {
  margin: 32px auto 24px;
  padding: 24px;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px solid var(--border, #e5e7eb);
}
.finder-internal-hub__head { margin-bottom: 18px; }
.finder-internal-hub__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  margin: 0 0 4px;
}
.finder-internal-hub__desc {
  font-size: 13px;
  color: var(--text-sub, #475569);
  margin: 0;
}
.finder-internal-hub__group {
  margin-top: 16px;
}
.finder-internal-hub__group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub, #475569);
  margin: 0 0 10px;
  text-transform: none;
  letter-spacing: 0;
}
.finder-internal-hub__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.finder-internal-hub__list li { margin: 0; }
.finder-internal-hub__list a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text-main, #0f172a);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.finder-internal-hub__list a:hover {
  border-color: var(--primary, #2563eb);
  background: #eff6ff;
  color: var(--primary, #2563eb);
}
@media (max-width: 768px) {
  .finder-internal-hub { padding: 18px; }
  .finder-internal-hub__list a { padding: 5px 10px; font-size: 12px; }
}

/* ── 허브 인트로 (Phase 2) — 지역/진료과 소개 본문 + 시군구 내부링크 ───── */
.finder-intro {
  margin: 16px auto 4px;
}
.finder-intro__body {
  background: #f8fafc;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 20px 22px;
}
.finder-intro__lead {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--text-main, #0f172a);
  margin: 0 0 10px;
}
.finder-intro__text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-sub, #475569);
  margin: 0 0 10px;
}
.finder-intro__note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-weak, #64748b);
  margin: 0;
}
.finder-intro__links {
  margin-top: 16px;
}
.finder-intro__links-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  margin: 0 0 10px;
}
.finder-intro__links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.finder-intro__links-list li { margin: 0; }
.finder-intro__links-list a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text-main, #0f172a);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.finder-intro__links-list a:hover {
  border-color: var(--primary, #2563eb);
  background: #eff6ff;
  color: var(--primary, #2563eb);
}
/* 상세페이지 접이식 링크 (2026-06-19) — 기본 접힘. summary 를 명확한 토글 버튼처럼.
   접힌 상태로도 링크는 HTML 에 남아 크롤러 추종(색인 영향 0) — 시각 표현만 담당. */
.finder-intro__places {
  margin-top: 14px;
}
.finder-intro__places-summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: #f8fafc;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main, #0f172a);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.finder-intro__places-summary::-webkit-details-marker { display: none; }
.finder-intro__places-summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity: .55;
  margin-left: 1px;
}
.finder-intro__places[open] .finder-intro__places-summary::after {
  transform: rotate(-135deg);
}
.finder-intro__places-summary:hover {
  border-color: var(--primary, #2563eb);
  background: #eff6ff;
  color: var(--primary, #2563eb);
}
.finder-intro__places .finder-intro__links-list {
  margin-top: 12px;
}
/* 인트로 본문 접이식(이용안내·유의사항) — 회색 박스 안이라 토글 배경 흰색으로 구분. */
.finder-intro__more {
  margin-top: 12px;
}
.finder-intro__more .finder-intro__places-summary {
  background: #fff;
}
.finder-intro__more .finder-intro__text {
  margin-top: 12px;
}
@media (max-width: 768px) {
  .finder-intro__body { padding: 16px; }
  .finder-intro__lead { font-size: 14px; }
  .finder-intro__text { font-size: 13px; }
  /* 접이식 토글 — 모바일은 풀폭 아코디언 행: 탭 영역 확대 + 화살표 우측 정렬 */
  .finder-intro__links { margin-top: 12px; }
  .finder-intro__places { margin-top: 10px; }
  .finder-intro__places-summary {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 13.5px;
    border-radius: 12px;
  }
  .finder-intro__places-summary::after { margin-left: 8px; }
  /* 펼친 링크 목록 — 모바일에서 더 촘촘하게(가독성·탭 영역) */
  .finder-intro__places .finder-intro__links-list { margin-top: 10px; }
  .finder-intro__links-list { gap: 6px; }
  .finder-intro__links-list a { font-size: 12px; padding: 8px 12px; }
}

/* ── 결과 헤더 ───────────────────────────────────────────────── */
.finder-result-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
/* 2026-05-22 — 모바일: h2 위, hint 아래 (세로 스택). hint 가 길어 한 줄 강제 시 압축되던 회귀 차단. */
@media (max-width: 640px) {
  .finder-result-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}
.finder-result-count { font-size: 13px; color: var(--text-sub); }
.finder-result-count strong { font-weight: 700; color: var(--text-main); font-size: 15px; }
/* 결과 정렬 드롭다운(.finder-sort-select) — 2026-05-22 UI 제거. JS state.sort 자동 정렬은 유지. */

/* ── 안내/경고 배너 ──────────────────────────────────────────── */
.finder-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
}
.finder-notice--warn {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fcd34d;
}
/* 응급실 반경 안내 — 응급 톤(레드) + 줄바꿈 허용(설명이 길 수 있음) */
.finder-notice--emrg {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  align-items: flex-start;
  line-height: 1.5;
}
.finder-notice--emrg svg { flex-shrink: 0; margin-top: 1px; }
/* 달빛어린이병원 안내 — 정보 톤(블루) + 줄바꿈 허용 */
.finder-notice--moonlight {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  align-items: flex-start;
  line-height: 1.5;
}
.finder-notice--moonlight svg { flex-shrink: 0; margin-top: 1px; }
.finder-notice a { color: var(--primary); font-weight: 600; margin-left: 4px; }

/* ── 로딩 ────────────────────────────────────────────────────── */
.finder-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 0;
  font-size: 13px;
  color: var(--text-sub);
}
.finder-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: finder-spin .7s linear infinite;
}
@keyframes finder-spin { to { transform: rotate(360deg); } }

/* ── 빈 상태 ─────────────────────────────────────────────────── */
.finder-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 0;
  color: var(--text-sub);
  font-size: 14px;
  text-align: center;
}
.finder-empty p { margin: 0 0 16px; max-width: 480px; line-height: 1.6; }
.finder-empty__suggest { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.finder-empty__suggest-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-muted);
}
.finder-empty__suggest-row > span { font-weight: 600; }
.finder-empty__alt {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  transition: all .15s;
}
.finder-empty__alt:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.finder-empty__actions { display: flex; gap: 8px; }

/* ── 결과 헤더 안내 (2026-05-22) — "카드 클릭 시 상세 페이지" 안내.
   데스크톱: h2 옆 pill (둥근 모서리). 모바일(≤640): 너비 100% block, 둥근 직사각형.
   SVG 와 텍스트가 한 줄 못 들어갈 때 SVG 가 첫 줄 윗쪽 정렬되도록 align-items: flex-start. */
.finder-result-hint {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #0c4a6e;
  background: rgba(12, 135, 165, 0.07);
  border: 1px solid rgba(12, 135, 165, 0.15);
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 100%;
  box-sizing: border-box;
}
.finder-result-hint__icon {
  color: var(--primary, #0c87a5);
  flex-shrink: 0;
  margin-top: 2px; /* 첫 글자 baseline 에 맞춤 — line-height 1.45 기준 */
}
.finder-result-hint > span {
  min-width: 0;
  flex: 1 1 auto;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .finder-result-hint {
    display: flex;
    width: 100%;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ── 카드 목록 ───────────────────────────────────────────────── */
.finder-list { display: flex; flex-direction: column; gap: 10px; }

.finder-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  /* 우상단 화살표 자리 확보 — chev 가 absolute 라 마크업 영향 X. */
  padding-right: 40px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .15s;
  position: relative;
}
.finder-card:hover {
  border-color: var(--primary-light, #93c5fd);
}

/* 카드 우상단 chevron — 카드 자체가 클릭 가능함을 시각 안내.
   영구 표시(은은한 회색) + hover 시 primary 색 + 약간 우측 이동. */
.finder-card__chev {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.08);
  color: #94a3b8;
  transition: color .15s, background .15s, transform .15s;
  pointer-events: none;
  z-index: 1;
}
.finder-card:hover .finder-card__chev {
  color: var(--primary, #0c87a5);
  background: rgba(12, 135, 165, 0.12);
  transform: translateX(2px);
}
@media (max-width: 480px) {
  .finder-card { padding-right: 36px; }
  .finder-card__chev {
    top: 12px;
    right: 10px;
    width: 22px;
    height: 22px;
  }
}

/* 상세보기 버튼 — 카드 actions 영역에서 primary 강조로 가장 눈에 띄게.
   사용자가 "어디서 상세 볼 수 있나" 헷갈리지 않도록 visual hierarchy 상단. */
.finder-card__detail-btn {
  gap: 5px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.finder-card__detail-btn svg {
  flex-shrink: 0;
}
.finder-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(26,95,180,.15);
}

/* 제휴 카드 */
.finder-card--affiliate {
  border-color: #fbbf24;
  background: #fffbeb;
}
.finder-card--affiliate:hover { border-color: #f59e0b; }

/* 카드 상단 */
.finder-card__top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.finder-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(26,95,180,.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.finder-card__icon--pharmacy  { background: rgba(44,201,180,.12); color: var(--accent); }
.finder-card__icon--emergency { background: #fef2f2; color: #dc2626; }
.finder-card__icon--vet       { background: #f0fdfa; color: #0d9488; } /* 동물병원 — teal */
.finder-card__icon--fitness   { background: #fff7ed; color: #ea580c; } /* 피트니스 — amber/orange (비의료 구분) */
.finder-card__icon--logo {
  background: #f1f5f9;
  overflow: hidden;
}
.finder-card__icon--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

/* 정보 영역 — 행마다 제각각 margin 대신 일관된 세로 리듬(gap)으로 통일.
   빈 행(:empty)은 자동 collapse 되도록 자식 margin 0. */
.finder-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finder-card__info > * { margin: 0; }
.finder-card__name {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.finder-affiliate-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.finder-affiliate-badge--blue { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.finder-affiliate-badge--green { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
/* 위닥스 제휴병원 — 플랫 솔리드 골드 인증 배지 (흰 체크 디스크로 강조, 가장 눈에 띄게) */
.finder-affiliate-badge--gold {
  background: #f5a300;
  color: #fff;
  border: 0;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px 3px 4px;
  letter-spacing: 0;
  box-shadow: 0 2px 6px rgba(245, 163, 0, .45);
}
.finder-affiliate-badge--gold::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.finder-card__address {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.4;
}
.finder-card__address svg { flex-shrink: 0; margin-top: 2px; }
.finder-card__hours {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  flex-wrap: wrap;
}
.finder-card__hours-text { font-size: 12px; color: var(--text-sub); }
.finder-card__status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}
.finder-card__status.open   { background: #dcfce7; color: #15803d; }
.finder-card__status.closed { background: #f3f4f6; color: var(--text-muted); }
.finder-card__status.unknown{ background: #f3f4f6; color: var(--text-muted); }

/* 태그 배지 행 */
.finder-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 진료과목 칩 영역 — 카드 렌더 후 HIRA getDgsbjtInfo2 batch fetch 로 채워짐.
   종합병원의 다양한 진료과를 모두 노출 (단일 dgsbjtCdNm 한계 극복). */
.finder-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 22px; /* fetch 도착 전에도 레이아웃 점프 방지 */
}
.finder-card__specs:empty { display: none; }
.finder-card__spec-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, .15);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* 검색·필터로 매칭된 진료과만 파란색 강조 — 종합병원 카드에서 사용자가 찾는 과를 즉시 식별 */
.finder-card__spec-chip--match {
  background: #eff6ff;
  color: #2563eb;
  border-color: rgba(37, 99, 235, .15);
  font-weight: 600;
}
/* 진료과 칩 clamp — 기본 2줄까지만 노출(카드 높이 균일화). 넘치면 토글로 전체 펼침. */
.finder-card__specs--clamp {
  max-height: 50px; /* chip 1줄 ≈ 22px + gap → 약 2줄 */
  overflow: hidden;
}
.finder-card__specs--clamp.is-expanded {
  max-height: none;
}
/* 진료과 더보기/접기 토글 — 칩이 2줄 초과일 때만 노출(JS). */
.finder-card__specs-toggle {
  align-self: flex-start;
  margin-top: -2px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}
.finder-card__specs-toggle:hover { text-decoration: underline; }
/* 분류 칩(의원·종합병원·약국 등) — 이름 옆에 붙는 기관 정체성 라벨. 중립 톤으로 차분하게. */
.finder-card__cls {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  padding: 1px 8px;
  border-radius: 6px;
  background: #eef2f7;
  color: #5b6b7f;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* 운영/특성 태그 — 하단 한 행에 모아 일관된 플랫 핀 디자인(테두리 없음, 동일 radius/padding) */
.finder-tag {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: var(--text-sub);
  white-space: nowrap;
}
.finder-tag--night   { background: #eff6ff; color: #2563eb; }
.finder-tag--weekend { background: #f0fdf4; color: #16a34a; }
.finder-tag--holiday { background: #faf5ff; color: #9333ea; }
.finder-tag--parking { background: #fff7ed; color: #ea580c; }
.finder-tag--emrg    { background: #fef2f2; color: #dc2626; }

/* 카드 액션 */
.finder-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light, #f1f5f9);
}
.finder-card__save-btn {
  margin-left: auto;
  /* 우상단 chevron(.finder-card__chev) 우측 끝과 저장 버튼 우측 끝을 맞춤.
     chevron 은 right:14px, 카드 padding-right:40px → 저장 버튼 우측 끝(40px)을
     chevron 우측 끝(14px)까지 끌어내려면 -(40-14)= -26px (데스크톱 한정). */
  margin-right: -26px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-sub);
  transition: all .15s;
  white-space: nowrap;
}
.finder-card__save-btn:not(.saved):hover {
  border-color: #fca5a5;
  color: #dc2626;
}
.finder-card__save-btn:not(.saved):hover svg { stroke: #dc2626; }
.finder-card__save-btn.saved {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}
.finder-card__save-btn svg { transition: fill .15s, stroke .15s; }
.finder-card__save-btn.saved svg { fill: #dc2626; stroke: #dc2626; }

/* 카드 인라인 길찾기 버튼 — 접힌 상태에서 바로 카카오 길찾기 진입 */
.finder-card__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: var(--text-sub);
}
.finder-card__nav-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}
.finder-card__nav-btn:hover svg { stroke: var(--primary); }

/* ── 더보기 ──────────────────────────────────────────────────── */
.finder-load-more {
  padding: 20px 0 8px;
  text-align: center;
}

/* 페이지네이션 — 카드 5개씩 슬라이스. 이전·번호·다음 nav. */
.finder-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 0 8px;
  flex-wrap: wrap;
}
.finder-pagination[hidden] { display: none !important; }
.finder-pagination__btn,
.finder-pagination__page {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .12s ease;
}
.finder-pagination__btn:hover:not(:disabled),
.finder-pagination__page:hover:not(.is-active) {
  color: var(--primary);
  border-color: var(--primary);
  background: #f0f7ff;
}
.finder-pagination__page.is-active {
  background: linear-gradient(135deg, var(--primary), #2a85e3);
  color: #fff;
  border-color: var(--primary);
  cursor: default;
}
.finder-pagination__btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.finder-pagination__ellipsis {
  padding: 0 6px;
  color: var(--text-muted);
  font-weight: 600;
  align-self: center;
}
.finder-pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── 오른쪽 컬럼 (지도) ──────────────────────────────────────── */
.finder-map-col {
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.finder-map-wrap {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  height: 560px;
  position: relative;
  background: #f0f4f8;
}
.finder-map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.finder-map-placeholder__inner {
  text-align: center;
  color: var(--text-sub);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 재검색 버튼 (지도 위) */
.finder-map-rerequest {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  z-index: 10;
  display: none;
  white-space: nowrap;
}
.finder-map-rerequest.visible { display: flex; }

/* 지도 위 플로팅 GPS 버튼 (FAB) */
.finder-map-gps {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  z-index: 10;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.finder-map-gps:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.finder-map-gps:active { transform: translateY(0); }
.finder-map-gps__spinner {
  display: none;
  animation: finder-map-gps-spin 1s linear infinite;
}
.finder-map-gps.loading .finder-map-gps__icon    { display: none; }
.finder-map-gps.loading .finder-map-gps__spinner { display: block; }
.finder-map-gps.has-location {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.finder-map-gps.has-location:hover { background: #1d4ed8; }
@keyframes finder-map-gps-spin {
  to { transform: rotate(360deg); }
}

/* 히어로 "현재 위치" 버튼 — GPS 활성 상태 표시 */
.finder-gps-btn.has-location {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #2563eb !important;
}
.finder-gps-btn.has-location svg { stroke: #fff; }

/* ── 상세 패널 ───────────────────────────────────────────────── */
.finder-detail-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 90%;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  z-index: 20;
  overflow-y: auto;
}
.finder-map-wrap { position: relative; }
.finder-detail-panel.open { transform: translateY(0); }
.finder-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.finder-detail-inner { padding: 20px 20px 24px; }
.finder-detail__name {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-right: 40px;
}
.finder-detail__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}
.finder-detail__section {
  border-top: 1px solid var(--border);
  padding: 14px 0;
}
.finder-detail__section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.finder-detail__hours-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.finder-detail__hours-table td { padding: 3px 0; }
.finder-detail__hours-table td:first-child { color: var(--text-sub); width: 60px; }
.finder-detail__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.finder-detail__actions .btn { flex: 1; min-width: 100px; justify-content: center; }
.finder-detail__save-btn {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s;
  margin-top: 10px;
}
.finder-detail__save-btn:not(.saved) {
  background: var(--bg-card);
  color: var(--text-sub);
  border-color: var(--border);
}

/* ── 안내 카드 (지도 아래) — 신규 .finder-trust-card 컴포넌트 호스팅 ── */
.finder-guide-cards { display: flex; flex-direction: column; gap: 10px; }
/* 옛 .finder-guide-card 마크업은 .finder-trust-card 로 일원화되어 룰 제거 */

/* ── 탭 바 (병원/약국/응급실) — finder 페이지 한정 풀폭 균등 분배 ────── */
.tab-bar { margin-bottom: 16px; }
.finder-type-bar {
  width: 100%;
  display: flex;
  flex-wrap: wrap;          /* 좁으면 자연스럽게 다음 줄로 (한 줄 강제 X) */
  gap: 4px;
}
.finder-type-bar .tab {
  flex: 1 1 0;             /* 넓은 화면 — 5탭 균등 1줄 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 9px 12px;
  white-space: nowrap;
}
.finder-type-bar .tab svg {
  flex-shrink: 0;
  display: block;
}
/* 5탭(달빛·동물병원 추가) — 긴 라벨이 균등폭을 넘쳐 겹치지 않도록 말줄임 안전장치 */
.finder-type-bar .tab__label {
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finder-type-bar .tab__label-short { display: none; }
/* 태블릿 이하 — 폭·간격 축소 + 긴 라벨은 짧은 버전(달빛/동물)으로 전환 */
@media (max-width: 600px) {
  .finder-type-bar { gap: 6px; }
  .finder-type-bar .tab { padding: 9px 8px; font-size: 13px; gap: 5px; }
  .finder-type-bar .tab__label-full  { display: none; }
  .finder-type-bar .tab__label-short { display: inline; }
}
/* 작은 폰 — 한 줄 강제/가로 스크롤 대신 자연스러운 wrap(한 줄 3개 → 5탭은 3+2).
   버튼이 뭉개지지 않게 폭·터치 타깃(44px) 확보. 마지막 줄 2개는 grow 로 폭 채움. */
@media (max-width: 480px) {
  .finder-type-bar .tab {
    flex: 1 1 calc(33.333% - 4px);
    min-height: 44px;
    padding: 8px 8px;
  }
}
@media (max-width: 360px) {
  .finder-type-bar .tab { font-size: 12.5px; padding: 8px 6px; gap: 4px; }
  .finder-type-bar .tab svg { width: 14px; height: 14px; }
}

/* ════════════════════════════════════════════════════════════════
   반응형: 1024px 이하 — 지도 상단, 리스트 하단
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .finder-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .finder-map-col {
    position: static;
    order: -1;
    margin-bottom: 20px;
  }
  .finder-map-wrap { height: 320px; }
  .finder-guide-cards { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   반응형: 768px 이하 — 모바일 (목록/지도 탭 전환)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .finder-hero { padding-bottom: 20px; }

  /* 모바일 hero 카피 — 글로벌 .page-hero__title(30px)/.page-hero__sub(14px) 가
     좁은 폭에서 줄바꿈 위치가 어긋나는 문제 대응. 디바이스 크기별 점진 축소. */
  .finder-hero .page-hero__title { font-size: 24px; line-height: 1.32; letter-spacing: -.01em; }
  .finder-hero .page-hero__sub   { font-size: 13px; line-height: 1.55; padding: 0 6px; }

  /* 검색바 — 모바일 1행 레이아웃 [GPS + input | 검색]
     - input wrap 은 남은 공간 차지, 검색 버튼은 우측 컴팩트 */
  .finder-search-bar {
    gap: 6px;
    flex-wrap: nowrap;
  }
  .finder-search-input-wrap {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  /* 모바일 GPS 인라인 — 텍스트 숨기고 아이콘만 (좁은 폭에서 입력창 공간 확보) */
  .finder-gps-inline { padding: 0 12px; }
  .finder-gps-inline__label { display: none; }
  .finder-search-input-wrap input { padding: 0 12px; }
  /* 모바일 placeholder 축소 — 짧은 카피여도 좁은 폭에선 잘려 보임.
     input 값 폰트는 base 16px 유지(iOS 자동 줌 방지) · placeholder 만 축소(줌과 무관). */
  .finder-search-input-wrap input::placeholder { font-size: 12.5px; }
  .finder-search-input-wrap input::-webkit-input-placeholder { font-size: 12.5px; }

  /* 검색 버튼 — 우측 컴팩트 (height 는 input wrap 과 동일 48px 유지로 정렬 일관) */
  .finder-search-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 12px;
  }
  .finder-search-btn svg { width: 14px; height: 14px; }

  /* 모바일 모드 뱃지 — 줄바꿈 + 폰트 살짝 작게 */
  .finder-mode-banner { font-size: 12px; padding: 8px 10px; gap: 6px; }
  .finder-mode-banner__text { width: 100%; }
  .finder-mode-banner__clear {
    height: 28px;
    padding: 0 12px;
    font-size: 11.5px;
  }

  /* 드롭다운 — 모바일에서 더 넉넉하게 (iOS Safari 주소바 변동 보정: dvh + JS visualViewport 동적값) */
  .finder-address-dropdown {
    max-height: 60vh;
    max-height: 60dvh;
    /* JS 가 visualViewport 기반으로 채워주는 변수 — 가상 키보드 가림 보정 */
    max-height: var(--finder-dd-max-h, 60dvh);
  }
  .finder-addr-item { padding: 12px 14px; min-height: 44px; }

  /* 일치도 강조 카드 라벨 — 모바일에서 작게 */
  .finder-card--top-match::before { font-size: 10px; padding: 2px 6px; }

  /* 뷰 전환 탭 표시 */
  .finder-view-toggle { display: flex; }

  /* 모바일: 지도 + 목록 탭 전환 */
  .finder-layout {
    padding-top: 16px;
    padding-bottom: 40px;
  }
  .finder-map-col {
    display: none;
    margin-bottom: 12px;
  }
  .finder-map-col.show-map {
    display: flex;
    order: -1;
  }
  .finder-map-wrap { height: 320px; }

  /* 지도 보기 시 캐러셀이 FAB·재검색 버튼을 가리지 않도록 위치 조정 */
  .finder-map-col.show-map .finder-map-gps       { bottom: 110px; }
  .finder-map-col.show-map .finder-map-rerequest { top: 10px; }

  /* 리스트 컬럼: 지도 보기 모드에서는 숨김 */
  .finder-list-col.hide-list .finder-filter-section,
  .finder-list-col.hide-list .finder-filter-details,
  .finder-list-col.hide-list .finder-result-header,
  .finder-list-col.hide-list .finder-list,
  .finder-list-col.hide-list .finder-load-more,
  .finder-list-col.hide-list #finderLoading,
  .finder-list-col.hide-list #finderEmpty {
    display: none;
  }

  /* 필터 compact — 모바일 통일 스펙(높이 30px·padding 0×12·font 12px·radius 999px)
     /medical-columns/ 조건 필터와 시각 통일 (터치 타겟 확보 위해 30px 유지) */
  .finder-filter-section { padding: 12px; gap: 10px; }
  .pill-group--wrap { gap: 5px; }
  .finder-filter-section .pill,
  .finder-filter-section .finder-chip,
  .finder-filter-section .finder-radius-btn,
  .finder-filter-section .finder-select,
  .finder-filter-section .finder-spec-toggle {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    min-height: 30px;
  }
  /* 진료과목 "결과 없는 진료과 N개 숨김 · 모두 보기" 토글 — 모바일에서만 가운데 정렬 */
  .finder-filter-section .finder-spec-toggle {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
  }
  .finder-filter-section .finder-select {
    padding: 0 26px 0 12px;
  }

  /* 카드 최적화 */
  /* padding 단축이 베이스 padding-right(우상단 chev 자리)를 덮어써 일치도 pill 과 겹치던 문제 →
     우측 여백 복원(chev right:14+width:24=38px 기준 + 여유). */
  .finder-card { padding: 14px; padding-right: 40px; }
  .finder-card__icon { width: 38px; height: 38px; }
  .finder-card__name { font-size: 14px; }

  /* 카드 액션 — 한 줄 균등 분배. 좁은 단말에서도 버튼이 카드 폭을 넘지 않게 보장.
     "상세" 버튼은 카드 자체가 클릭 시 확장되므로 모바일에서 숨김 (스페이스 절약). */
  .finder-card__actions {
    gap: 6px;
    flex-wrap: nowrap;
    /* 카드 우측 padding(40, 우상단 chev 자리)을 상쇄 — chev 는 상단만 차지하므로 하단 액션 행은
       전폭 사용. 안 하면 전화/길찾기/저장 행이 좌측 14 vs 우측 40 으로 왼쪽에 쏠려 보임(우측 여백 과다).
       카드 padding-left(14)와 대칭이 되도록 -(40-14)=-26px. border-top 구분선도 함께 대칭 복원. */
    margin-right: -26px;
  }
  .finder-card__actions [data-detail-trigger] { display: none; }
  .finder-card__actions .btn,
  .finder-card__actions .btn--call,
  .finder-card__actions .finder-card__nav-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
    font-size: 12px;
    justify-content: center;
  }
  .finder-card__actions .btn svg,
  .finder-card__actions .finder-card__nav-btn svg { flex: 0 0 auto; }
  .finder-card__save-btn {
    flex: 0 1 auto;
    margin-left: 0;
    margin-right: 0; /* 데스크톱 chevron 정렬용 음수 마진 무효화 — 모바일은 한 줄 균등 분배 */
    padding: 6px 10px;
    font-size: 12px;
  }

  /* 결과 헤더 — 컨테이너 폭 안에서 정렬 (count 영역 축소 허용) */
  .finder-result-header { gap: 8px; }
  .finder-result-count { min-width: 0; flex: 1; }
}

/* ════════════════════════════════════════════════════════════════
   초소형 단말 (320px ~ 360px) — iPhone SE 1세대·갤럭시 폴드 외부 등.
   카드 액션의 "저장" 라벨을 아이콘만으로 압축, 길찾기 라벨도 축약.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  /* 좌우 패딩만 — 단축속성(padding: 0 12px) 쓰면 .container 를 함께 쓰는 푸터 밴드
     (.footer__inner/__middle/__bottom-inner)의 세로 패딩까지 0 으로 덮어써 푸터가 붙는다. */
  .container { padding-left: 12px; padding-right: 12px; }
  /* 우상단 chev 자리 확보 — 단축 padding 이 right 를 덮지 않게 복원(≤360 chev right:10+w22=32px). */
  .finder-card { padding: 12px; padding-right: 36px; }
  .finder-card__actions { gap: 4px; margin-right: -24px; } /* ≤360 은 padding-right 36 → 대칭 상쇄값 -(36-12)=-24 */
  .finder-card__actions .btn,
  .finder-card__actions .finder-card__nav-btn { padding: 6px 4px; font-size: 11px; }
  /* 저장 버튼 라벨 숨김 (아이콘만 노출) — aria-label 은 데이터 속성이 보완 */
  .finder-card__save-btn {
    padding: 6px 8px;
    font-size: 0;
    gap: 0;
  }
  .finder-card__save-btn svg { width: 14px; height: 14px; }
}

@media (max-width: 480px) {
  .finder-quick-tags { gap: 6px; }
  .finder-quick-tag { padding: 5px 10px; font-size: 12px; }
  .finder-filter-chips { gap: 6px; }
  /* .finder-chip / .finder-radius-btn 모바일 사이즈는 위 통일 분기에서 처리됨 (중복 제거) */

  /* 좁은 폰: hero h1·sub 한 단계 더 축소 */
  .finder-hero .page-hero__title { font-size: 22px; line-height: 1.3; }
  .finder-hero .page-hero__sub   { font-size: 12.5px; line-height: 1.5; padding: 0 4px; }

  /* 좁은 폰: 검색창 placeholder 추가 축소 (≤767px 의 12.5px 에서 한 단계 더) */
  .finder-search-input-wrap input::placeholder { font-size: 11.5px; }
  .finder-search-input-wrap input::-webkit-input-placeholder { font-size: 11.5px; }
}

@media (max-width: 360px) {
  /* 초소형 디바이스: 본문 영역이 좁아 sub 가 3줄 이상 떨어지는 문제 추가 보정 */
  .finder-hero .page-hero__title { font-size: 20px; }
  .finder-hero .page-hero__sub   { font-size: 12px; padding: 0 2px; }

  /* 초소형 디바이스: placeholder 가독 한계 직전 단계까지 축소 (카피 변경 없이 잘림 방지) */
  .finder-search-input-wrap input::placeholder { font-size: 10.5px; }
  .finder-search-input-wrap input::-webkit-input-placeholder { font-size: 10.5px; }
}

/* 모바일: 활성 필터 요약 바 sticky — 스크롤 내려도 어떤 필터가 걸려 있는지 항상 보이도록
   헤더(.header__inner) 높이 64px 와 정확히 맞춤. 컨테이너 외곽으로 튀어나오는 음수 margin 제거. */
@media (max-width: 767px) {
  .finder-active-filters:not([hidden]) {
    position: sticky;
    top: 64px;
    z-index: 5;
    background: var(--bg, #fff);
    padding: 8px 0;
    margin: 0 0 10px;
    box-shadow: 0 6px 8px -6px rgba(15, 23, 42, .12);
  }
  /* 라벨 hint 모바일 가독성 */
  .finder-filter-label__hint { font-size: 9.5px; padding: 1px 6px; }
}

/* ── 카카오맵 인포윈도우 커스텀 ──────────────────────────────── */
.finder-infowindow {
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  border: 1px solid var(--border);
  min-width: 160px;
  font-size: 13px;
  line-height: 1.5;
}
.finder-infowindow__name { font-weight: 700; color: var(--text-main); }
.finder-infowindow__sub  { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.finder-infowindow__status { margin-top: 4px; }
.finder-infowindow__save-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-sub);
  transition: all .15s;
  white-space: nowrap;
}
.finder-infowindow__save-btn:not(.saved):hover {
  border-color: #fca5a5;
  color: #dc2626;
}
.finder-infowindow__save-btn:not(.saved):hover svg { stroke: #dc2626; }
.finder-infowindow__save-btn.saved {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}
.finder-infowindow__save-btn svg { transition: fill .15s, stroke .15s; }
.finder-infowindow__save-btn.saved svg { fill: #dc2626; stroke: #dc2626; }

/* ── 내 위치 마커 (GPS 승인 후 표시되는 파란 펄스 점) ───────────────────── */
.finder-my-location {
  position: relative;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.finder-my-location__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: #2563eb;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(37, 99, 235, .45);
}
.finder-my-location__pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: rgba(37, 99, 235, .35);
  border-radius: 50%;
  animation: finder-my-location-pulse 1.8s ease-out infinite;
}
@keyframes finder-my-location-pulse {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(2.6); opacity: 0;  }
}

/* ── 스켈레톤 카드 (로딩 즉시 시각 피드백) ─────────────────────── */
.finder-skeleton {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.finder-skeleton__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: finder-skel 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
.finder-skeleton__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.finder-skeleton__line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: finder-skel 1.2s ease-in-out infinite;
}
.finder-skeleton__line--title { height: 16px; width: 60%; }
.finder-skeleton__line--meta  { width: 40%; }
.finder-skeleton__line--addr  { width: 85%; }
@keyframes finder-skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 카드 인라인 상세 (펼침 영역) ─────────────────────────────── */
.finder-card__detail {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  padding-top: 0;
  /* 점선 separator 제거 — 액션 버튼 위 solid border 와 중복 시각 라인이라 사용자 피드백으로 제거 */
  overflow: hidden;
  transition: grid-template-rows .25s ease, margin-top .25s ease, padding-top .2s ease;
}
.finder-card__detail > * { min-height: 0; }
.finder-card.expanded {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(26,95,180,.15);
}
.finder-card.expanded .finder-card__detail {
  grid-template-rows: 1fr;
  margin-top: 12px;
  padding-top: 12px;
}
/* 카드 펼침 시 상단 "저장" 버튼 숨김 — 인라인 상세 안의 큰 "저장하기" 버튼이 같은 기능 제공.
   동작(저장 토글) 은 widocs:place-saved-changed 이벤트로 자동 동기화되어 상태 일관성 유지. */
.finder-card.expanded .finder-card__save-btn {
  display: none;
}

/* 카드 키보드 포커스 (접근성) */
.finder-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* 마커 hover → 카드 강조 (양방향 인터랙션) */
.finder-card.hover-from-map {
  border-color: var(--primary);
}

/* 응급의료기관 분류/등급 라벨 (응급실 탭 전용 — 병·의원 분류는 .finder-card__cls 로 이동) */
.finder-tag--cls       { background: #eef2f7; color: #5b6b7f; }
.finder-tag--emrg-grade { background: #fef2f2; color: #b91c1c; font-weight: 700; }
.finder-tag--rt-avail  { background: #ecfdf5; color: #047857; font-weight: 700; }
.finder-tag--rt-full   { background: #f3f4f6; color: #6b7280; font-weight: 700; }
/* 달빛어린이병원 — 평일 야간·휴일 소아진료 지정 라벨 (e-gen) */
.finder-tag--moonlight { background: #eef2ff; color: #4338ca; font-weight: 700; }
/* 동물약 취급약국 — 행안부 동물약국 인허가. 상세 배지와 동일 그린 톤(주말 태그와 구분되게 솔리드). */
.finder-tag--animalpharm { background: #16a34a; color: #fff; font-weight: 700; }

/* 미사용 슬라이드업 상세 패널 — 카드 인라인 확장으로 대체된 후 숨김
   (재사용 시 .open 클래스가 붙어야만 노출되도록 게이트) */
.finder-detail-panel:not(.open) { display: none !important; }

/* ── 모바일 지도 뷰 캐러셀 (지도 위 슬라이드 카드) ──────────────── */
.finder-mobile-carousel {
  display: none;
  position: absolute;
  left: 0; right: 0;
  bottom: 10px;
  padding: 0 10px;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  z-index: 11;
  pointer-events: auto;
}
.finder-mobile-carousel::-webkit-scrollbar { display: none; }
@media (max-width: 767px) {
  .finder-map-col.show-map .finder-mobile-carousel { display: flex; }
}
.finder-mc-card {
  flex: 0 0 72%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.finder-mc-card.is-snapped {
  border-color: var(--primary);
}
.finder-mc-card__main { flex: 1; min-width: 0; }
.finder-mc-card__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finder-mc-card__sub {
  font-size: 11px;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finder-mc-card__detail {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card, #f8fafc);
  color: var(--text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.finder-mc-card__detail:hover,
.finder-mc-card__detail:focus-visible {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* 운영시간 칩 — 보건복지부 휴일·야간 진료기관 데이터로 동작 (B 단계 적용)
   주차 칩은 공공 API 미제공으로 영구 제거됨 */

/* ── 상세 — 기관 정보 그리드 (의사수 / 개설일) ───────────────── */
.finder-detail__info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-sub);
}
.finder-detail__info-cell {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
}
.finder-detail__info-cell strong {
  color: var(--text-main);
  font-weight: 700;
  margin-right: 2px;
}

/* ── 응급실 실시간 가용 그리드 ─────────────────────────────────── */
.finder-detail__realtime-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.finder-rt-cell {
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  text-align: center;
}
.finder-rt-cell__label { font-size: 11px; color: var(--text-sub); margin-bottom: 4px; }
.finder-rt-cell__val   { font-size: 13px; font-weight: 700; color: var(--text-main); }
.finder-rt-cell--avail { background: #ecfdf5; border-color: #a7f3d0; }
.finder-rt-cell--avail .finder-rt-cell__val { color: #047857; }
.finder-rt-cell--full  { background: #fef2f2; border-color: #fecaca; }
.finder-rt-cell--full  .finder-rt-cell__val { color: #b91c1c; }
.finder-detail__realtime-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}
.finder-detail__severe-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.finder-detail__severe-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-size: 11px;
  font-weight: 700;
}

/* ── 공유 / 복사 버튼 성공 상태 ───────────────────────────────── */
.finder-detail__btn-success {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}
.finder-detail__btn-success svg { stroke: #15803d !important; }

/* ── 이름 모드 시 진료과·유형 그룹 dim ─────────────────────────────────
   "삼성서울병원" 같은 이름 검색 결과 위에서 진료과/유형 으로 더 좁히면
   결과가 0 이 되기 쉬워, 칩을 비활성처럼 보이게 한다. 검색어를 지우면 자동 해제. */
.is-name-mode-dim .pill,
.is-name-mode-dim .finder-chip {
  opacity: .45;
  pointer-events: none;
  filter: saturate(.6);
}
.finder-filter-label__hint {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fef3c7;
  color: #b45309;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  vertical-align: middle;
}
.finder-filter-label__hint[hidden] { display: none; }

/* 반경 비활성 인라인 hint (모바일 title 미표시 보완)
   parent flex 의 gap (8px) 이 간격을 처리하므로 자체 margin 은 0 — 모바일 wrap 시 정렬 일치 */
.finder-radius-need-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px dashed #93c5fd;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.finder-radius-need-loc:hover {
  background: var(--primary, #2563eb);
  color: #fff;
  border-color: var(--primary, #2563eb);
}
.finder-radius-need-loc[hidden] { display: none; }

/* ── 활성 필터 요약 바 ───────────────────────────────────────── */
.finder-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}
.finder-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: rgba(26, 95, 180, .08);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.finder-active-chip:hover { background: var(--primary); color: #fff; }
.finder-active-chip:hover svg { stroke: #fff; }
.finder-active-chip svg { stroke: var(--primary); transition: stroke .15s; }
.finder-active-chip--reset {
  background: transparent;
  border-color: var(--border);
  color: var(--text-sub);
  padding-right: 10px;
}
.finder-active-chip--reset:hover { background: var(--text-sub); color: #fff; border-color: var(--text-sub); }
/* 읽기 전용 정보 칩 (예: "기본 위치: 서울 구로구 구로3동") — X 없음, 클릭 동작 없음.
   사용자 명시 필터와 시각적으로 구분 (회색톤·hover 없음). */
.finder-active-chip--info {
  background: var(--bg, #f5f6f8);
  border-color: var(--border, #e2e5ea);
  color: var(--text-sub, #5b6370);
  cursor: default;
  padding-right: 12px;
}
.finder-active-chip--info:hover { background: var(--bg, #f5f6f8); color: var(--text-sub, #5b6370); }

/* ── 관리자 캐시 워밍 박스 ───────────────────────────────────── */
.finder-admin-warmup {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  background: #f0f9ff;
  color: #075985;
  border: 1px solid #bae6fd;
  align-items: stretch;
}
.finder-admin-warmup__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
}
.finder-admin-warmup__pct {
  font-size: 13px; font-weight: 800; color: #0369a1;
}
.finder-admin-warmup__bar {
  width: 100%; height: 6px;
  background: #e0f2fe; border-radius: 999px; overflow: hidden;
}
.finder-admin-warmup__fill {
  height: 100%; background: linear-gradient(90deg, #0ea5e9 0%, #0284c7 100%);
  transition: width .4s ease;
}
.finder-admin-warmup__meta {
  font-size: 11px; color: #0c4a6e; line-height: 1.5;
}
.finder-admin-warmup__btn { align-self: flex-start; }

/* ── 진료과목 0건 숨김 토글 ────────────────────────────────────────── */
/* 워밍 캐시 합산 결과가 0건인 spec 칩은 기본 hidden — 토글 클릭으로 펼침 */
.finder-spec-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub, #64748b);
  background: transparent;
  border: 1px dashed #cbd5e1;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.finder-spec-toggle:hover {
  color: var(--text, #0f172a);
  border-color: #94a3b8;
  background: #f8fafc;
}
.finder-spec-toggle.is-expanded {
  color: #0369a1;
  border-color: #7dd3fc;
  background: #f0f9ff;
  border-style: solid;
}
.finder-spec-toggle svg { flex: 0 0 auto; opacity: .8; }

/* 펼친 상태에서 0건 칩은 옅게 표시 — 사용자가 "결과 없을 가능성" 인지하도록 */
#finderSpecPills .pill[data-empty="1"]:not([hidden]) {
  opacity: .55;
  border-style: dashed;
}
#finderSpecPills .pill[data-empty="1"]:not([hidden]):hover { opacity: .85; }

/* ── 데스크톱: 결과 헤더 sticky — 스크롤해도 결과 수 / 정렬 항상 노출 ──── */
@media (min-width: 768px) {
  .finder-result-header {
    position: sticky;
    top: 64px;
    background: #fff;
    z-index: 4;
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* ── 페이지 하단 정보 섹션 (FAQ + 면책 — 컴팩트) ─────────────────
   주의: 이 섹션은 <section class="container finder-info-section">. 패딩 단축속성을 쓰면
   .container 의 좌우 패딩(24px / 모바일 16px·12px)을 덮어써 좌우 여백이 사라진다.
   → 세로 패딩만 개별 속성으로 지정해 .container 좌우 패딩을 보존. */
.finder-info-section {
  padding-top: 56px;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.finder-info-section--compact {
  padding-top: 40px;
  padding-bottom: 56px;
}
.finder-info-section__head {
  margin-bottom: 4px;
}
.finder-info-section__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #14202e;
  margin: 0 0 8px;
}
.finder-info-section__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.finder-info-section__disclaimer {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}
@media (max-width: 768px) {
  .finder-info-section__title { font-size: 19px; }
}

/* FAQ — page-leader-hub(.hub-faq) 디자인과 통일 */
.finder-faq {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.finder-faq__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
  margin: 0 0 4px;
}
.finder-faq__item {
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.finder-faq__item[open] {
  border-color: rgba(26,95,180,.25);
}
.finder-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.55;
}
.finder-faq__item summary::-webkit-details-marker { display: none; }
.finder-faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.finder-faq__item[open] summary::after {
  transform: rotate(45deg);
  background: var(--primary);
  color: #fff;
}
.finder-faq__item p {
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-sub);
  margin: 0;
}
@media (max-width: 768px) {
  .finder-faq__item summary {
    padding: 16px 18px;
    font-size: 14px;
  }
  .finder-faq__item p {
    padding: 0 18px 18px;
    font-size: 13.5px;
  }
}

/* AIO 가이드 블록 */
.finder-guide-blocks { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .finder-guide-blocks { grid-template-columns: 1fr 1fr; }
}
.finder-guide-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
}
.finder-guide-block h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 10px;
}
.finder-guide-block ol,
.finder-guide-block ul {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-sub);
  padding-left: 18px;
  margin: 0 0 8px;
}
.finder-guide-block li { margin-bottom: 4px; }
.finder-guide-block p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-sub);
  margin: 0;
}
.finder-guide-block strong { color: var(--text-main); font-weight: 700; }

/* ── 인포윈도우 mini (마커 클릭 시) ───────────────────────────── */
.finder-infowindow--mini { min-width: 140px; padding: 8px 12px; }
.finder-infowindow__hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── 검색창 inline smart hint (2026-05-21) ──────────────────────
   사용자가 지역/진료과 키워드 입력 시 검색창 아래 노출되는 안내 박스.
   필터 모드 원클릭 라우팅 버튼 + 닫기 버튼.
   검색창 폭에 맞춰 가로 배치(데스크톱), 모바일은 wrap. */
.finder-search-smart-hint {
  position: relative;                 /* 닫기(×) 절대배치 기준 */
  display: flex;
  flex-direction: column;             /* 세로 카드 — 메시지 → 버튼 → 구분선 안내 */
  align-items: center;                /* 내부 요소 가운데 정렬 */
  gap: 8px;
  margin: 10px 0 0;                   /* 검색바와 동일 폭(풀폭) — PC 에서 치우침 방지 */
  width: 100%;
  padding: 12px 38px;                 /* 좌우 대칭(38px) — 가운데 정렬 균형 + 우상단 × 자리 */
  background: #fefce8;                /* 옅은 amber-50 — 정보성 강조 (경고 X) */
  border: 1px solid #fde68a;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #713f12;
  text-align: center;
}
.finder-search-smart-hint[hidden] { display: none; }

/* 검색 방식 안내(2026-06-02) — 직접검색=이름 매칭 / 응급실=지역(예외) 명시. 항상 노출되는 보조 설명.
   파란 hero 배경 위라 회색 텍스트는 묻혀 안 보임 → 밝은 흰색 계열로 대비 확보. */
.finder-search-mode-note {
  display: inline-flex;
  align-items: flex-start;   /* 2줄 wrap 시 아이콘이 첫 줄에 정렬 — 박스 찌그러짐 방지 */
  gap: 6px;
  margin: 10px auto 0;
  max-width: 440px;
  padding: 6px 12px;
  border-radius: 10px;       /* stadium(999) 대신 둥근 사각 — 여러 줄에서도 자연스러움 */
  background: rgba(255, 255, 255, 0.12);
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
}
.finder-search-mode-note__ico { flex: 0 0 auto; margin-top: 1px; opacity: 0.8; }
.finder-search-mode-note strong {
  color: #fff;
  font-weight: 600;
}
/* 작은 폰 — 2줄 wrap 이 흔하므로 알약 배경 제거하고 일반 보조 텍스트로(박스 이상함 차단) */
@media (max-width: 768px) {
  .finder-search-mode-note {
    max-width: 92%;
    padding: 0 4px;
    background: none;
    border-radius: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
  }
}

.finder-search-smart-hint__msg {
  width: 100%;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 강조 단어 — 지역명·진료과 키워드 amber-800 톤.
   본문 색(#713f12) 대비 약간 진한 갈색-주황으로 시각 가중치 ↑. */
.finder-search-smart-hint__msg strong {
  color: #92400e;
  font-weight: 700;
}

/* 보조 안내 라인 — "병원 이름 검색은 [검색] 버튼" 유도. 항상 새 줄 풀폭으로 표시해
   메시지·버튼 위치(디바이스마다 다른 아래/우측)와 무관하게 동작.
   order: 4 — 모바일 분기에서 다른 자식들이 order 0~3 을 쓰므로 명시 (미지정 시 0 → 맨 앞으로 와서 깨짐). */
.finder-search-smart-hint__alt {
  width: 100%;
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed #fde68a;
  font-size: 12.5px;
  color: #713f12;
  line-height: 1.5;
}
.finder-search-smart-hint__alt strong {
  color: #92400e;
  font-weight: 700;
}
.finder-search-smart-hint__btn {
  align-self: center;           /* 가운데 — 데스크톱 내용 폭. 모바일은 풀폭(아래 미디어쿼리). */
  background: #f59e0b;          /* amber-500 */
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
  white-space: nowrap;
}
.finder-search-smart-hint__btn:hover,
.finder-search-smart-hint__btn:focus-visible {
  background: #d97706;          /* amber-600 */
  outline: 2px solid #fbbf24;
  outline-offset: 1px;
}
.finder-search-smart-hint__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  color: #92400e;
  cursor: pointer;
  padding: 0;
}
.finder-search-smart-hint__close:hover,
.finder-search-smart-hint__close:focus-visible {
  background: rgba(146, 64, 14, 0.1);
  outline: 2px solid #fbbf24;
  outline-offset: 1px;
}
/* 모바일 — 세로 카드 그대로(메시지 → 버튼 풀폭 → 구분선 안내). 버튼만 풀폭으로 확대해 탭 쉽게. */
@media (max-width: 640px) {
  .finder-search-smart-hint {
    padding: 11px 36px;
    gap: 7px;
    font-size: 12.5px;
  }
  .finder-search-smart-hint__msg { font-size: 12.5px; line-height: 1.5; }
  .finder-search-smart-hint__btn {
    align-self: stretch;          /* 풀폭 — 누르기 쉽게 */
    width: 100%;
    padding: 10px 12px;
    font-size: 12.5px;
  }
  .finder-search-smart-hint__alt { font-size: 12px; }
}

/* 초소형 단말 (iPhone SE / 폴드 외부) — padding·폰트 추가 컴팩트 */
@media (max-width: 380px) {
  .finder-search-smart-hint { padding: 10px 32px; gap: 6px; }
  .finder-search-smart-hint__msg { font-size: 12px; }
  .finder-search-smart-hint__btn { font-size: 12px; padding: 9px 10px; }
}

/* ── 빈 결과 CTA 강화 (2026-05-21) ──────────────────────────────
   검색 키워드가 지역/진료과로 인식되면 큰 1차 CTA 버튼으로 필터 모드 라우팅.
   기존 .finder-empty__alt 보다 시각 가중치 ↑. */
.finder-empty__cta-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  background: #f0f9ff;          /* sky-50 */
  border: 1px solid #bae6fd;    /* sky-200 */
  border-radius: 10px;
}
.finder-empty__cta-title {
  font-size: 13px;
  font-weight: 600;
  color: #075985;               /* sky-800 */
  margin: 0 0 4px;
}
.finder-empty__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.finder-empty__alt--primary {
  background: #0284c7 !important;  /* sky-600 */
  color: #fff !important;
  border: 0 !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
}
.finder-empty__alt--primary:hover,
.finder-empty__alt--primary:focus-visible {
  background: #0369a1 !important; /* sky-700 */
  outline: 2px solid #38bdf8 !important;
  outline-offset: 1px !important;
}