body {
  font-family: "Noto Sans KR", sans-serif;
  background-color: #f8f9fa;
  color: #333;
}

/* 상단 네비게이션 */
.navbar-brand img {
  height: 40px;
}

/* 레이아웃 컨테이너 */
.main-wrapper {
  display: flex;
  height: calc(100vh - 60px);
  /* 헤더 높이 제외한 전체 높이 */
  overflow: hidden;
}

/* 좌측 필터 사이드바 */
.sidebar-filter {
  width: 360px;
  min-width: 360px;
  background-color: #fff;
  border-right: 1px solid #e9ecef;
  overflow-y: auto;
  padding: 20px;
}

.filter-group {
  margin-bottom: 24px;
}

.filter-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #212529;
}

/* 우측 콘텐츠 (지도 + 매물목록) */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* 지도 더미 박스 영역 */
.map-placeholder {
  width: 100%;
  height: 500px;
  min-height: 500px;
  background-color: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #dee2e6;
  color: #6c757d;
}

/* 매물 카드 스타일 */
.property-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  background-color: #fff;
}

.property-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.property-img {
  height: 160px;
  object-fit: cover;
  width: 100%;
  background-color: #f1f3f5;
}

.badge-theme {
  background-color: #e7f5ff;
  color: #1971c2;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 4px;
}

/* 좌측 로고 영역 */
.footer-logo img {
  height: 55px;
  width: auto;
}

.logo-fallback {
  color: #ffffff;
  text-align: center;
  line-height: 1.2;
}

/* 우측 텍스트 정보 영역 */
.footer-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #e0e0e0;
}

.info-row strong {
  color: #ffffff;
  font-weight: 600;
}

/* 텍스트 구분선 */
.divider {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #777777;
  margin: 0 4px;
}

/* 저작권 문구 */
.copyright {
  margin-top: 6px;
  color: #b0b0b0;
  font-size: 0.8rem;
}

/* 모바일 반응형 처리 */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .divider {
    display: none;
  }

  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* 지도 + 우측 영역 컨테이너 수정 */
.map-container-wrapper {
  display: flex !important;
  align-items: stretch !important; /* 🔥 핵심: 자식 요소(지도, 사이드바)의 높이를 고정/동일하게 유지 */
  width: 100%;
  height: 560px !important; /* 고정 높이 */
  min-height: 560px !important; /* 🔥 핵심: 내용이 적어져도 세로가 줄어들지 않도록 최소 높이 보장 */
  border-bottom: 1px solid #dee2e6;
  background-color: #fff;
}

/* 좌측 지도 영역 (남은 공간 전체 사용) */
.map-container-wrapper #map,
.map-container-wrapper .map-placeholder {
  flex: 1;
  height: 100% !important;
  border-bottom: none !important;
}

/* 지도 + 우측 영역 컨테이너 */
.map-container-wrapper {
  display: flex !important;
  width: 100%;
  height: 560px; /* 세로 높이 약간 확장 */
  border-bottom: 1px solid #dee2e6;
  background-color: #fff;
}

/* 지도 영역 : 남은 가로 공간 자동 채움 */
.map-container-wrapper #map {
  flex: 1 !important;
  height: 100% !important;
}

/* 우측 영역 전체 크기 조절 */
.map-side-wrapper {
  width: 460px !important;
  min-width: 460px !important;
  height: 100% !important;
  overflow-y: auto !important;
  border-left: 1px solid #e0e0e0;
  padding: 12px;
  background-color: #fff !important;
}

/* 카드 전체 틀 */
.map-side-card-custom {
  display: flex;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  margin-bottom: 12px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  gap: 12px;
  transition: background-color 0.15s ease;
}

.map-side-card-custom:hover {
  background-color: #f8fafc;
  color: inherit;
}

/* 이미지 박스 */
.card-img-box {
  position: relative;
  width: 130px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

.card-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 하트 버튼 */
.btn-like {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

/* 본문 레이아웃 */
.card-content-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 상단: 매물번호/주소/비교 */
.card-top-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.property-id-box {
  border: 1px solid #cbd5e1;
  color: #64748b;
  padding: 0px 4px;
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 500;
}

.address-text {
  color: #94a3b8;
  font-size: 0.8rem;
}

.btn-compare {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1px 7px;
  font-size: 0.7rem;
  color: #64748b;
  cursor: pointer;
  flex-shrink: 0;
}

/* 중단 1: 제목 */
.card-title-text {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1e293b;
  margin-top: 2px;
}

/* 중단 2: 면적 및 종류 */
.card-sub-info {
  font-size: 0.8rem;
  color: #94a3b8;
}

.card-sub-info .divider {
  margin: 0 3px;
  color: #cbd5e1;
}

/* 하단 가격 영역 (경계선 포함) */
.card-price-row {
  border-top: 1px solid #f1f5f9;
  padding-top: 6px;
  margin-top: 4px;
  display: flex;
  align-items: center;
}

/* 녹색 뱃지 (보증금/월세/전세) */
.badge-green {
  background-color: #00c853;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 2px;
  margin-right: 4px;
}

/* 주황색 뱃지 (매매 전용) */
.badge-orange {
  background-color: #ff9800;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 2px;
  margin-right: 4px;
}

.price-val {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}

/* 모달 우측 외부 버튼 바 (z-index를 더 높여서 맨 위로 올림) */
.modal-side-actions {
  position: absolute;
  top: 10px;
  right: -60px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2000 !important; /* 기존보다 훨씬 높게 설정하여 다른 요소가 가리지 않도록 함 */
}

/* 동그란 아이콘 버튼 기본 스타일 */
.modal-side-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  color: #111111 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  pointer-events: auto !important; /* 마우스 이벤트가 확실히 감지되도록 강제 설정 */
  transition:
    transform 0.2s ease-in-out,
    background-color 0.2s ease-in-out !important;
}

/* 내부 아이콘 기본 색상 강제 고정 */
.modal-side-btn i {
  color: #111111 !important;
  pointer-events: none; /* 아이콘 자체보다는 버튼 영역이 이벤트를 받도록 설정 */
}

/* 🖱️ 마우스를 갖다 대었을 때 (Hover 효과) */
.modal-side-btn:hover {
  background-color: #0d6efd !important; /* 파란색 배경 */
  color: #ffffff !important;
  transform: scale(1.05) !important;
}

/* 호버 시 내부 아이콘 색상도 흰색으로 변경 */
.modal-side-btn:hover i {
  color: #ffffff !important;
}

/* 모바일 등 좁은 화면 대응 */
@media (max-width: 991px) {
  .modal-side-actions {
    right: 10px;
    top: -55px;
    flex-direction: row;
    z-index: 2000 !important;
  }
}