/* ══════════════════════════════════════════════════════════════
   매물 카드(.prop-card) 공통 스타일 — index.html / detail.html(비슷한 매물)가 공유
   ⚠️ 두 화면의 카드가 "완전히 동일"해야 하므로, 이 파일이 유일한 출처(single source)다.
   레이아웃(.prop-grid/.prop-page/.carousel-dots 등 그리드·캐러셀 배치)은 화면마다
   달라도 되므로 각 페이지 CSS에 남겨두고, 카드 자체(.prop-card 내부) 스타일만 여기 둔다.
   ═════════════════════════════════════════════════════════════ */

  .prop-card {
    background: #fff; border-radius: 8px;
    border: 1px solid #e8ecf0;
    overflow: hidden; cursor: pointer;
    transition: box-shadow .2s, transform .2s;
    min-width: 0; max-width: 100%;
  }
  .prop-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); transform: translateY(-2px); }

  .prop-card-img {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
    background: #f0f0f0;
  }
  .prop-card-img img { width: 100%; height: 100%; object-fit: cover; }
  .prop-card-badges {
    position: absolute; top: 8px; left: 8px;
    display: flex; gap: 4px; flex-wrap: wrap;
  }
  .prop-badge {
    padding: 3px 8px; border-radius: 5px;
    font-size: 10px; font-weight: 700; color: #fff;
  }
  .pb-red    { background: #dc2626; }
  .pb-orange { background: #d97706; }
  .pb-blue   { background: #2563eb; }
  .pb-green  { background: #059669; }
  .pb-rec    { background: #dc2626; } /* 추천 */

  .prop-card-body { padding: 11px 13px 13px; min-width: 0; }
  .prop-card-price {
    font-size: 15px; font-weight: 800; color: #c0392b; margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .prop-card-price .tx-type {
    font-size: 11px; font-weight: 700; color: #fff;
    background: #2563eb; border-radius: 3px; padding: 1px 5px; margin-right: 4px;
  }
  .prop-card-desc { font-size: 12px; color: #444; line-height: 1.5; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prop-card-num  { font-size: 11px; color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prop-card-id   { font-size: 11px; color: #bbb; margin-left: auto; padding-left: 6px; white-space: nowrap; flex-shrink: 0; }
  .prop-card-loc  { font-size: 11px; color: #777; margin-top: 3px; display: flex; align-items: center; gap: 2px; white-space: nowrap; overflow: hidden; }
  .prop-card-loc-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .prop-no-data { text-align: center; padding: 40px 20px; color: #aaa; grid-column: 1/-1; }
  .prop-img-fallback {
    width: 100%; height: 100%; align-items: center; justify-content: center;
    font-size: 48px; opacity: .6;
  }

  /* 하단 태그 줄 맨 앞 매물종류 배지 (PC: 눈에 띄게) — 타입별 고유 색으로 카테고리 강조 */
  .prop-type-chip {
    color: #fff; font-size: 11px; font-weight: 800;
    padding: 4px 9px; border-radius: 5px;
    display: inline-flex; align-items: center; gap: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    letter-spacing: .1px; line-height: 1.3;
  }
  /* 사진 좌상단 상태 배지 (추천/확인매물 등) — 타입칩과 동일한 크기로 정렬 통일 */
  .prop-badge-top {
    color: #fff; font-size: 11px; font-weight: 800;
    padding: 4px 9px; border-radius: 5px;
    letter-spacing: .1px; line-height: 1.3;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
  }
  /* 우상단 리본(강력추천) */
  .prop-badge-ribbon {
    position: absolute; top: 0; right: 0; overflow: hidden;
    width: 80px; height: 80px; z-index: 3; pointer-events: none;
  }
  .prop-badge-ribbon-text {
    position: absolute; top: 16px; right: -18px; width: 84px;
    background: #dc2626; color: #fff; font-size: 11px; font-weight: 800;
    text-align: center; padding: 5px 0; transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,.35); letter-spacing: .5px;
  }
  /* 거래완료/계약완료 전체 오버레이 텍스트 */
  .prop-badge-overlay-text {
    color: #fff; font-size: 22px; font-weight: 900;
    letter-spacing: 4px; text-shadow: 0 2px 10px rgba(0,0,0,.7);
  }
  /* 사진 하단 특징 태그 (역세권/주차가능 등) — 톤을 하나로 통일한 글래스 스타일로 정돈 */
  .prop-badge-bottom {
    color: #fff; font-size: 10px; font-weight: 600;
    padding: 3px 8px; border-radius: 5px; line-height: 1.3;
    background: rgba(15, 23, 42, .55) !important;
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }

@media (max-width: 768px) {
    .prop-card-loc { flex-wrap: wrap; }
    .prop-card-loc-text { flex-basis: 100%; }
    .prop-card-id { display: none; }

    /* 카드가 2열(50%)로 좁아지므로 배지도 비율에 맞게 축소 (톤/모양은 PC와 동일하게 유지) */
    .prop-badge-top {
      font-size: 8.5px; padding: 2px 6px; letter-spacing: .1px;
    }
    .prop-badge-ribbon { width: 56px; height: 56px; }
    .prop-badge-ribbon-text {
      font-size: 8px; width: 60px; padding: 3px 0;
      top: 11px; right: -13px;
    }
    .prop-badge-overlay-text { font-size: 15px; letter-spacing: 2px; }
    .prop-type-chip {
      font-size: 8px; font-weight: 700;
      padding: 2px 5px; border-radius: 4px;
      gap: 2px; box-shadow: none;
    }
    .prop-badge-bottom {
      font-size: 8px; font-weight: 600;
      padding: 2px 5px; border-radius: 4px;
      gap: 2px; box-shadow: none;
    }
}

@media (max-width: 480px) {
    .prop-card-img { aspect-ratio: 16/10; }
    .prop-badge-top { font-size: 7.5px; padding: 2px 5px; }
    .prop-badge-ribbon { width: 48px; height: 48px; }
    .prop-badge-ribbon-text {
      font-size: 7px; width: 52px; padding: 2px 0;
      top: 9px; right: -11px;
    }
    .prop-badge-overlay-text { font-size: 13px; letter-spacing: 1.5px; }
    .prop-badge-bottom,
    .prop-type-chip {
      font-size: 7px; padding: 2px 4px; gap: 1px;
    }
}