/**
 * 검색 목록 카드 — 큰 4:3 사진 + 사진 넘김 (2026-09-24, parity.md §4-2·§4-3·§4-6).
 * 기존: 모바일 펼친 목록 80px 썸네일 · PC 목록 136×104 옆 썸네일 · PC 하트 숨김.
 * 이제: 모바일은 전체 폭 4:3 사진 카드, PC는 2열 4:3 사진 카드 + 하트, 사진은 넘김·위치 점·PC 화살표.
 * search.php 인라인 <style>·search-desktop-upgrade.css 뒤에 로드한다(파일 끝 link).
 * 가로 넘김 구조는 search-card-photos.js가 .wh-cp / .wh-cp-track을 만든다.
 */

/* ── 공통: 사진 넘김 ─────────────────────────────── */
.prop-list-item .wh-cp {
  position: relative;
  overflow: hidden;
  border-radius: var(--wh-radius-md, 16px);
}
.wh-cp-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: inherit;
}
.wh-cp-track::-webkit-scrollbar {
  display: none;
}
.wh-cp-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.wh-cp-slide .prop-list-item-img {
  display: block;
  border-radius: 0 !important;
}
.wh-cp-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
  pointer-events: none;
}
.wh-cp-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wh-card, #ffffff);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  opacity: 0.6;
  transition:
    opacity var(--wh-motion-fast, 180ms) var(--wh-ease-out-smooth, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--wh-motion-fast, 180ms) var(--wh-ease-out-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
.wh-cp-dots span.is-active {
  opacity: 1;
}
.wh-cp-dots span.is-edge {
  transform: scale(0.66);
}
.wh-cp-arrow {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .wh-cp-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--wh-touch-min, 44px);
    height: var(--wh-touch-min, 44px);
    margin-top: calc(var(--wh-touch-min, 44px) / -2);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--wh-tx, #1A1A1A);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--wh-motion-hover, 120ms) var(--wh-ease-out-smooth, cubic-bezier(0.16, 1, 0.3, 1));
  }
  .wh-cp-arrow::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--wh-card, #ffffff);
    box-shadow: var(--wh-shadow-hover);
  }
  .wh-cp-arrow svg {
    position: relative;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .wh-cp-arrow--prev { left: 4px; }
  .wh-cp-arrow--next { right: 4px; }
  .wh-cp:hover .wh-cp-arrow,
  .wh-cp-arrow:focus-visible {
    opacity: 1;
  }
  .wh-cp.is-first .wh-cp-arrow--prev,
  .wh-cp.is-last .wh-cp-arrow--next {
    visibility: hidden;
  }
}
.wh-cp-arrow:focus-visible {
  outline: 2px solid var(--wh-focus-ring, #681DC7);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .wh-cp-track { scroll-behavior: auto; }
  .wh-cp-dots span { transition: none; }
}
html.wh-reduce-motion .wh-cp-dots span { transition: none; }

/* ── 모바일 펼친 목록: 80px 썸네일 → 전체 폭 4:3 ─────────── */
html:not(.search-force-desktop-ui) #prop-list-vertical .prop-list-item {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 16px 20px;
  border-bottom: 0;
}
html:not(.search-force-desktop-ui) #prop-list-vertical .prop-list-item > :first-child {
  position: relative;
  width: 100%;
  border-radius: var(--wh-radius-md, 16px);
  overflow: hidden;
}
html:not(.search-force-desktop-ui) #prop-list-vertical .prop-list-item-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--wh-radius-md, 16px);
  object-fit: cover;
}
html:not(.search-force-desktop-ui) #prop-list-vertical .prop-list-item-info {
  padding: 0 2px;
}
html:not(.search-force-desktop-ui) .search-results-skeleton--list .search-sk-row {
  flex-direction: column;
  align-items: stretch;
  padding: 12px 16px 20px;
}
html:not(.search-force-desktop-ui) .search-results-skeleton--list .search-sk-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--wh-radius-md, 16px);
}

/* ── PC 목록: 옆 136×104 → 2열 4:3 카드 ─────────────────── */
/* 인라인 #prop-list-wrap.is-list .prop-list-vertical {display:block !important}보다 우선. 결과 없음·재조회 중 숨김은 그대로 둔다 */
html.search-force-desktop-ui #prop-list-wrap.is-list:not(.show-empty):not(.search-refetching) #prop-list-vertical {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  align-content: start;
  padding: 12px 16px 16px;
}
html.search-force-desktop-ui #prop-list-vertical > :not(.prop-list-item) {
  grid-column: 1 / -1;
}
html.search-force-desktop-ui #prop-list-vertical .prop-list-item {
  flex-direction: column !important;
  gap: 10px;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--wh-radius-md, 16px);
  background: transparent !important;
  box-shadow: none !important;
}
html.search-force-desktop-ui #prop-list-vertical .prop-list-item:hover {
  background: transparent !important;
  box-shadow: none !important;
}
html.search-force-desktop-ui #prop-list-vertical .prop-list-item > :first-child {
  position: relative;
  width: 100%;
  border-radius: var(--wh-radius-md, 16px);
  overflow: hidden;
}
html.search-force-desktop-ui #prop-list-vertical .prop-list-item-img {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  border-radius: var(--wh-radius-md, 16px);
  object-fit: cover;
}
html.search-force-desktop-ui #prop-list-vertical .prop-list-item.is-map-selected > :first-child {
  outline: 2px solid var(--wh-brand, #681DC7);
  outline-offset: 2px;
}
html.search-force-desktop-ui #prop-list-vertical .prop-list-item .favorite {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  display: flex !important;
}
/* 하트 켜짐·꺼짐 전환 규칙이 모바일 구간에만 있어 PC에서 두 하트가 겹쳐 보였다 */
html.search-force-desktop-ui #prop-list-vertical .favorite .heart_on { display: none; }
html.search-force-desktop-ui #prop-list-vertical .favorite.fav-on .heart { display: none; }
html.search-force-desktop-ui #prop-list-vertical .favorite.fav-on .heart_on { display: block; }
html.search-force-desktop-ui #prop-list-vertical .prop-list-item-info {
  padding: 0 2px;
}
html.search-force-desktop-ui .search-results-skeleton--list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  padding: 12px 16px 16px;
}
html.search-force-desktop-ui .search-results-skeleton--list .search-sk-item {
  flex-direction: column;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}
html.search-force-desktop-ui .search-results-skeleton--list .search-sk-item .search-sk-img {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--wh-radius-md, 16px);
}

/* ── 지도 가격표 겹침 정리 (2026-09-24, parity.md §4-5) ─────────────
   search-map-declutter.js가 겹치는 가격표 중 순위가 낮은 쪽에 .is-mini를 붙인다.
   가격표 기준점(anchor 40,20)에 점의 중심이 오도록 옮긴다. 누르면 기존 마커 클릭 동작 그대로. */
#search-map .price-marker.is-mini {
  width: 12px;
  height: 12px;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: var(--wh-tx, #1A1A1A);
  border: 2px solid var(--wh-card, #ffffff);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translate(34px, 14px);
}
#search-map .price-marker.is-hidden {
  visibility: hidden;
}

/* ── 검색 첫 화면(접힌 시트) 가로 카드 사진 키우기 (2026-09-25, parity.md §4) ─────────
   기존 188×100 → 220×(화면 높이 16%, 최대 136px). 시트 높이 상한은 search.php에서 44% → 55%.
   가로 카드 줄 자체가 좌우로 넘어가므로 카드 안 사진 넘김은 넣지 않는다(겹치는 제스처). */
@media (max-width: 480px) {
  html:not(.search-force-desktop-ui) #prop-list-wrap .prop-swiper .prop-slide-v {
    width: 220px !important;
    max-width: 220px !important;
    flex-basis: 220px !important;
  }
}
html:not(.search-force-desktop-ui) #prop-list-wrap:not(.is-list) .prop-swiper .prop-slide-v .r26-prop-img-wrap {
  height: min(136px, 16vh) !important;
  flex-basis: min(136px, 16vh) !important;
}
html:not(.search-force-desktop-ui) #prop-list-wrap:not(.is-list) .search-sk-card {
  height: calc(min(136px, 16vh) + 110px);
}

/* ── 모바일 필터 시트 손잡이 (2026-09-25, motion §1g M5) — search-filter-sheet-drag.js가 넣는다 ── */
.wh-sheet-grabber {
  display: none;
}
@media (max-width: 1023px) {
  html:not(.search-force-desktop-ui) #filter-sheet .wh-sheet-grabber {
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: 20px;
    position: relative;
    touch-action: none;
  }
  html:not(.search-force-desktop-ui) #filter-sheet .wh-sheet-grabber::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 36px;
    height: 5px;
    margin-left: -18px;
    border-radius: 999px;
    background: var(--wh-bd-input, rgba(0, 0, 0, 0.42));
    opacity: 0.5;
  }
  html:not(.search-force-desktop-ui) #filter-sheet .wh-sheet-grabber + div {
    padding-top: 4px !important;
    touch-action: none;
  }
}

/* ── 검색 첫 화면 가로 카드 스냅 (2026-09-25, 4차 채점: 길게 넘기면 반쯤 잘린 카드에서 멈춰 지도 강조가 엇나감) ── */
html:not(.search-force-desktop-ui) #prop-list-wrap:not(.is-list) .prop-swiper:not(.swiper-initialized) .swiper-wrapper {
  scroll-snap-type: x mandatory !important;
  scroll-padding-left: 16px;
}
html:not(.search-force-desktop-ui) #prop-list-wrap:not(.is-list) .prop-swiper:not(.swiper-initialized) .swiper-slide {
  scroll-snap-align: start;
}