/* 예식장 약도 검색 공통 스타일.
 *
 * 에디터(/editor 간편편집 > 약도) 결과 카드의 구조를 공통화한 것이다.
 * 폼접수 주문폼 모달과 사이트 "예식장 약도 찾기"가 이 파일 하나를 함께 쓰되,
 * 화면 역할에 맞는 크기는 아래 --hms-* 변수로 조정한다.
 * 마크업은 card/lib/hall_map_search.php 가 만든다 — 한쪽만 고치지 않는다.
 *
 * 치수 원천: editor/css/editor.css 의 .ed-venue-map-card 계열(3100~3250줄).
 *   카드 grid 86px / 1fr / 28px · gap 10px · padding 8px · radius 8px · 카드 간격 7px
 *   썸네일 86×56 · 이름 13px/600 · 부제 11px · 최신 배지 10.5px/600
 * --bj-* 토큰이 없는 화면(모달)에서도 그대로 서도록 fallback 값을 함께 둔다.
 */

.hms-results {
  --hms-result-count-size: 12px;
  --hms-card-thumb-width: 86px;
  --hms-card-thumb-height: 56px;
  --hms-card-trail-width: 28px;
  --hms-card-gap: 10px;
  --hms-card-min-height: 76px;
  --hms-card-padding: 8px;
  --hms-card-name-size: 13px;
  --hms-card-sub-size: 11px;
  --hms-card-badge-size: 10.5px;
  --hms-card-go-size: 15px;
  --hms-list-gap: 7px;
}

.hms-results,
.hms-results * { box-sizing: border-box; }

/* ─── 검색 결과 요약 ─── */
.hms-result-count {
  margin: 0 0 7px;
  color: var(--bj-muted, #64748b);
  font-size: var(--hms-result-count-size);
  line-height: 1.5;
}

/* 검색어가 짧아 무시됐을 때 — 왜 검색이 안 걸렸는지 알려준다. */
.hms-short-query {
  margin: 0 0 7px;
  padding: 7px 10px;
  border: 1px dashed #d9e0ea;
  border-radius: 8px;
  background: #fbfcfe;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

/* ─── 카드 목록 ─── */
/* 폭은 각 화면의 레일을 그대로 따른다 — 카드 구성(썸네일·제목·부제·간격)이 같으면
   좁은 모달과 넓은 사이트 레일 어느 쪽에서도 같은 카드로 읽힌다. */
.hms-map-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--hms-list-gap);
}

.hms-hall-block + .hms-hall-block { margin-top: var(--hms-list-gap); }

/* ─── 약도 카드 ─── */
.hms-map-card {
  position: relative;
  display: grid;
  grid-template-columns: var(--hms-card-thumb-width) minmax(0, 1fr) var(--hms-card-trail-width);
  align-items: center;
  gap: var(--hms-card-gap);
  width: 100%;
  min-height: var(--hms-card-min-height);
  margin: 0;
  padding: var(--hms-card-padding);
  border: 1px solid var(--bj-line, #e4e7ec);
  border-radius: 8px;
  background: var(--bj-clean, #fff);
  color: var(--bj-ink, #111827);
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.hms-map-card:hover,
.hms-map-card:focus-visible {
  border-color: #cbd5e1;
  background: #f8fafc;
  box-shadow: 0 1px 5px rgba(15, 23, 42, .06);
  text-decoration: none;
}

/* Block surface focus: the result card keeps its hover surface and underlines the hall name; no box. */
.hms-map-card:focus-visible { outline: none; }
.hms-map-card:focus-visible .hms-map-card__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* 최신 약도가 따로 있는 예식장에서 구자료 카드를 눌러 표시 — 에디터 opts.dim 과 같다. */
.hms-map-card.is-dim { opacity: .6; }
.hms-map-card.is-dim:hover { opacity: 1; }

/* ─── 썸네일 ─── */
.hms-map-card__thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hms-card-thumb-width);
  height: var(--hms-card-thumb-height);
  overflow: hidden;
  border: 1px solid #edf1f5;
  border-radius: 6px;
  background: #fbfcfe;
  color: #94a3b8;
  font-size: 10px;
}

.hms-map-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 약도 원본은 좌상단에 지도, 하단에 교통 안내 텍스트가 오는 구성이 많다.
     에디터와 같은 지점을 잡아 썸네일에서 지도가 보이게 한다. */
  object-position: 30% 18%;
  filter: contrast(1.08) saturate(.96);
}

/* 이미지가 있을 때는 대체 문구를 감춘다. 이미지 로드 실패 시 onerror 가 is-empty 를 붙인다. */
.hms-map-card__thumb-fallback { display: none; }
.hms-map-card__thumb.is-empty .hms-map-card__thumb-fallback { display: block; }

/* ─── 본문 ─── */
.hms-map-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hms-map-card__name,
.hms-map-card__sub {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hms-map-card__name {
  color: var(--bj-charcoal, #182230);
  font-size: var(--hms-card-name-size);
  font-weight: 600;
}

.hms-map-card__sub {
  color: #94a3b8;
  font-size: var(--hms-card-sub-size);
}

.hms-map-card__latest {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9px;
  background: #e1f5ee;
  color: #0f6e56;
  font-size: var(--hms-card-badge-size);
  font-weight: 600;
  vertical-align: 1px;
}

/* 관리자에게만 보이는 보조 표식(에디터 변환 완료 등). 고객 화면에는 나오지 않는다. */
.hms-map-card__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9px;
  background: #eef2ff;
  color: #4338ca;
  font-size: var(--hms-card-badge-size);
  font-weight: 600;
  vertical-align: 1px;
}

.hms-map-card__go {
  justify-self: center;
  color: #cbd5e1;
  font-size: var(--hms-card-go-size);
  line-height: 1;
}

.hms-map-card:hover .hms-map-card__go { color: #64748b; }

/* ─── 전체 보기 ─── */
/* 레거시 카탈로그는 한 예식장에 약도가 수십 개인 곳이 있다(63빌딩 19개).
   카드로는 최근 3개만 펼치고 나머지는 이 줄로 상세에 넘긴다. */
.hms-hall-more {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px dashed #d9e0ea;
  border-radius: 8px;
  background: #fbfcfe;
  color: var(--bj-muted, #64748b);
  font-size: 12px;
  text-align: center;
  text-decoration: none;
}

.hms-hall-more:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: var(--bj-charcoal, #182230);
  text-decoration: none;
}

/* ─── 빈 상태 ─── */
.hms-prompt,
.hms-empty {
  padding: 42px 18px 30px;
  color: #94a3b8;
  text-align: center;
}

.hms-prompt svg { display: block; margin: 0 auto 14px; color: #cbd5e1; }

.hms-prompt strong,
.hms-empty strong {
  display: block;
  margin-bottom: 7px;
  color: #334155;
  font-size: 14.5px;
  font-weight: 600;
}

.hms-prompt p,
.hms-empty p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.hms-empty {
  padding: 34px 18px;
  border: 1px dashed #d9e0ea;
  border-radius: 8px;
  background: #fbfcfe;
}

/* ─── 모바일 ─── */
@media (max-width: 767px) {
  .hms-results {
    --hms-card-thumb-width: 74px;
    --hms-card-thumb-height: 50px;
    --hms-card-trail-width: 22px;
    --hms-card-gap: 9px;
    --hms-card-min-height: 70px;
  }
}