:root {

  --navy: #12335a;

  --navy-dark: #0c2340;

  --green: #1f8f63;

  --green-soft: #e8f5ef;

  --white: #ffffff;

  --gray-100: #f6f8fb;

  --gray-200: #e5e9f0;

  --gray-700: #475569;

}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: #1e293b;
  background: var(--gray-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.container { width: min(1120px, 92%); margin: 0 auto; }

.site-header { background: var(--white); border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; z-index: 10; }

.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 12px; }

.brand { color: var(--navy); font-weight: 800; text-decoration: none; font-size: 1.1rem; }

.brand-logo { height: 36px; width: auto; vertical-align: middle; max-width: 180px; }

.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 18px; }

.brand-text { font-size: inherit; font-weight: inherit; }

.nav-menu { display: flex; gap: 14px; align-items: center; }

.nav-menu a { color: var(--gray-700); text-decoration: none; font-weight: 600; font-size: 0.95rem; }

.nav-menu a:hover { color: var(--navy); }

.nav-toggle { display: none; border: 1px solid var(--gray-200); background: var(--white); border-radius: 8px; padding: 6px 8px; }

.hero { background: linear-gradient(125deg, var(--navy-dark), var(--navy)); color: var(--white); padding: 88px 0; }

.hero h1 { margin: 8px 0 12px; font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.2; }

.hero p { max-width: 720px; }

.section { padding: 56px 0; }

.section-alt { background: var(--white); }

.section-description { max-width: 800px; line-height: 1.7; color: var(--gray-700); }

.btn { border: 0; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; border-radius: 10px; font-weight: 700; cursor: pointer; }

.btn-primary { background: var(--green); color: var(--white); }

.btn-outline { border: 1px solid var(--navy); color: var(--navy); background: transparent; }

.btn-danger { background: #dc2626; color: #fff; border: none; }
.btn-danger:hover { background: #b91c1c; }

.btn-kakao { background: #fee500; color: #111827; }

.button-row { display: flex; gap: 12px; }

.card-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }

.info-card { background: var(--green-soft); border: 1px solid #cde7d9; border-radius: 12px; padding: 20px; text-align: center; font-weight: 700; }

.contact-box { background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px; padding: 28px; }

.listing-filter-grid { display: flex; flex-wrap: nowrap; gap: 7px; align-items: center; }

.listing-filter-grid input, .listing-filter-grid select { flex: 1 1 0; min-width: 80px; padding: 8px; border-radius: 8px; border: 1px solid #cbd5e1; font: inherit; font-size: 0.88rem; }

.listing-filter-grid .btn { flex: 0 0 auto; padding: 8px 14px; font-size: 0.88rem; white-space: nowrap; }

.listings-filter-bar { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 8px 12px; }

.listings-filter-top {

  background: var(--white); border-bottom: 1px solid var(--gray-200);

  padding: 8px 12px;

}

.filter-top-form {

  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;

  width: min(1120px, 92%); margin: 0 auto;

}

.filter-top-form input[type="text"],

.filter-top-form select {

  flex: 1 1 140px; min-width: 100px; max-width: 240px;

  padding: 8px 10px; border-radius: 8px; border: 1px solid #cbd5e1;

  font: inherit; font-size: 0.88rem;

}

.sort-btn {

  padding: 7px 13px; border-radius: 8px; border: 1px solid var(--gray-200);

  background: var(--white); color: var(--gray-700); font: inherit;

  font-size: 0.85rem; cursor: pointer; white-space: nowrap;

}

.sort-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.sold-toggle-label {

  display: flex; align-items: center; gap: 5px;

  font-size: 0.85rem; color: var(--gray-700); cursor: pointer; white-space: nowrap;

  user-select: none;

}

.sold-toggle-label input { accent-color: var(--navy); }

.listings-body {

  display: grid;

  grid-template-columns: 180px 1fr 360px;

  height: calc(100vh - 145px);

  min-height: 600px;

}

.listings-sidebar {

  background: var(--white);

  border-right: 1px solid var(--gray-200);

  overflow-y: auto;

  padding: 12px 0;

}

.sidebar-cat {

  display: flex; align-items: center; gap: 8px;

  padding: 11px 18px; font-size: 0.9rem; font-weight: 500;

  color: var(--gray-700); text-decoration: none; cursor: pointer;

  border-left: 3px solid transparent; transition: background 0.12s, color 0.12s;

  white-space: nowrap;

}

.sidebar-cat:hover { background: var(--gray-100); color: var(--navy); }

.sidebar-cat.active { color: var(--navy); font-weight: 700; border-left-color: #C9A84C; background: #fdf8ee; }

.sidebar-cat-icon { font-size: 16px; flex-shrink: 0; }

.sidebar-divider { height: 1px; background: var(--gray-200); margin: 8px 12px; }

.map-section { overflow: hidden; border-right: 1px solid var(--gray-200); }

#map { width: 100%; height: 100%; background: #e8f0f8; border: none; }

.map-placeholder-text { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: #4a6785; font-size: 0.92rem; line-height: 2; }

.listings-panel { height: 100%; overflow-y: auto; background: var(--gray-100); display: flex; flex-direction: column; }

.listings-list-header {

  display: flex; align-items: center; justify-content: space-between;

  padding: 10px 12px 6px; flex-shrink: 0; background: var(--gray-100);

  position: sticky; top: 0; z-index: 5;

}

.list-count { font-size: 0.82rem; color: var(--gray-700); }

.listings-list-body { padding: 0 10px 12px; flex: 1; }

.listing-cards { display: grid; gap: 10px; }

.listing-cards { display: grid; gap: 12px; }

.listing-card { display: flex; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }

.listing-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.12); }

.card-img { width: 150px; min-height: 112px; background: #dce8f5; position: relative; flex-shrink: 0; overflow: hidden; }

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

.card-badge { position: absolute; top: 7px; left: 7px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }

.card-body { flex: 1; padding: 11px 13px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }

.card-address { font-size: 11px; color: var(--gray-700); display: block; }

.lp-rec-row-parking,
.lp-mini-parking,
.lp-all-parking {
  font-size: 11px;
  color: var(--gray-700);
  line-height: 1.35;
}

/* 매물 카드에서 주차 행 숨김 */
.lp-rec-card .lp-rec-row-parking,
.lp-rec-row-parking {
  display: none !important;
}

.card-title { font-size: 14px; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 3px 0; }

.card-desc { font-size: 12px; color: var(--gray-700); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.card-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 8px; }

.card-price { font-size: 14px; font-weight: 700; color: var(--green); }

.card-area { font-size: 12px; color: #444; background: var(--gray-100); padding: 2px 6px; border-radius: 4px; }

.sold-badge { position: absolute; inset: 0; background: rgba(200,0,0,0.78); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; letter-spacing: 2px; }

.hidden { display: none; }

.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.admin-form { display: grid; gap: 10px; }

.admin-form input, .admin-form select, .admin-form textarea { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #cbd5e1; font: inherit; }

/* ═══════════════════════════════════════════
   매물등록 카드형 레이아웃 v2
   ═══════════════════════════════════════════ */
.admin-register-card {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 20px 28px;
}

/* 입력폼 v2 — 구역별 카드 */
.admin-form-v2 { display: flex; flex-direction: column; gap: 10px; }
.admin-form-v2 input,
.admin-form-v2 select {
  width: 100%; padding: 5px 8px; height: 36px; border-radius: 6px;
  border: 1px solid #cbd5e1; font: inherit; font-size: 0.88rem;
  box-sizing: border-box; transition: border-color 0.15s;
}
.admin-form-v2 textarea {
  width: 100%; padding: 6px 8px; border-radius: 6px;
  border: 1px solid #cbd5e1; font: inherit; font-size: 0.88rem;
  box-sizing: border-box; resize: vertical; transition: border-color 0.15s;
}
.admin-form-v2 input:focus,
.admin-form-v2 select:focus,
.admin-form-v2 textarea:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(18,51,90,0.10);
}

/* 섹션 카드 (fieldset) */
.form-section {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--white);
  padding: 10px 14px 10px;
  margin: 0;
}
.form-section-title {
  display: block; font-size: 0.84rem; font-weight: 700; color: var(--navy);
  padding: 0 2px; margin: 0 0 8px 0;
}

/* 라벨 */
.form-label {
  display: block; font-size: 0.76rem; font-weight: 600;
  color: #475569; margin-bottom: 2px;
}
.form-hint { font-weight: 400; color: #94a3b8; font-size: 0.74rem; }
.form-req  { color: #ef4444; font-weight: 700; font-size: 0.76rem; }

/* 단일 입력 그룹 */
.form-group { margin-bottom: 5px; }
.form-group:last-child { margin-bottom: 0; }

/* 2열 배치 */
.form-row-half { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 5px; }
.form-row-half:last-child { margin-bottom: 0; }

/* 3열 배치 */
.form-row-thirds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 5px; }
.form-row-thirds:last-child { margin-bottom: 0; }

/* 4열 배치 */
.form-row-quads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 5px; }
.form-row-quads:last-child { margin-bottom: 0; }

/* 매물번호 + 매물종류 + 거래유형 메타행 */
.form-row-meta {
  display: grid; grid-template-columns: 96px 1fr 1fr;
  gap: 8px; margin-bottom: 5px; align-items: end;
}
/* 매물번호 + 1차구분 + 2차구분 + 거래유형 (4열) */
.form-row-meta4 {
  display: grid; grid-template-columns: 150px 1fr 1fr 1fr;
  gap: 8px; margin-bottom: 5px; align-items: end;
}

/* 매물번호 표시 (읽기전용 인풋처럼) */
.listing-no-display-inline {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px; height: 36px; box-sizing: border-box;
  border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc;
}
#listingNoDisplay,
.listing-no-display {
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-size: 15px;
  font-weight: 700;
}
.listing-no-display-inline strong { color: var(--navy); font-size: 0.90rem; }
.listing-no-hint { font-size: 0.70rem; color: #94a3b8; white-space: nowrap; }

/* 면적 인라인 */
.area-inline {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.area-inline:last-child { margin-bottom: 0; }
.area-label-w { min-width: 56px; flex-shrink: 0; margin-bottom: 0; }
.area-inline input[type="number"] { flex: 1; min-width: 0; max-width: 130px; }
.area-unit { font-size: 0.80rem; color: #64748b; font-weight: 600; flex-shrink: 0; }

/* 홍보스티커 pill 체크박스 */
.sticker-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.sticker-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(18, 51, 90, 0.22); background: #f8fafc;
  font-size: 0.82rem; color: #24364f;
  font-weight: 700;
  cursor: pointer; user-select: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.sticker-chip:hover { background: #f6f0dd; border-color: #c9a84c; color: #12335a; }
.sticker-chip:has(input:checked) {
  background: #fff8e1;
  border-color: #c9a84c;
  color: #12335a;
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.32);
}
.sticker-chip input[type="checkbox"] {
  width: 15px; height: 15px; cursor: pointer; flex-shrink: 0;
  accent-color: #c9a84c;
}

/* 하단 버튼 */
.form-actions { display: flex; gap: 10px; margin-top: 2px; padding-bottom: 16px; }
.form-actions .btn-primary { flex: 1; }
.btn-sm { font-size: 0.82rem; padding: 6px 12px; }
.btn-lg { padding: 11px 20px; font-size: 0.95rem; }

/* ─ 반응형 (태블릿/모바일) ─ */
@media (max-width: 700px) {
  .admin-register-card { padding: 0 10px 24px; }
  .form-section { padding: 10px 12px 8px; }
  .form-row-half,
  .form-row-thirds,
  .form-row-meta,
  .form-row-meta4 { grid-template-columns: 1fr; gap: 5px; }
  .form-row-quads { grid-template-columns: 1fr 1fr; gap: 5px; }
  .sticker-grid { gap: 7px; }
  .sticker-chip { flex: 1 1 calc(50% - 7px); justify-content: center; padding-inline: 9px; }
  .area-inline { flex-wrap: wrap; }
  .area-label-w { min-width: 100%; margin-bottom: 2px; }
  .area-inline input[type="number"] { max-width: none; }
}

.admin-list { display: grid; gap: 10px; }

.admin-item { background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 12px; }

.admin-item-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.admin-item-done { opacity: 0.65; border-left: 3px solid #dc2626; }

.image-url-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: nowrap; }

.admin-form  .image-url-row input,
.admin-form-v2 .image-url-row input { flex: 1; min-width: 0; }

.img-remove-btn { flex-shrink: 0; font-size: 0.8rem; padding: 6px 10px; border-color: #dc2626; color: #dc2626; white-space: nowrap; }

/* 파일 업로드 버튼 */
.img-file-label {
  flex-shrink: 0; cursor: pointer; font-size: 0.80rem; padding: 5px 9px;
  white-space: nowrap; user-select: none;
}
.img-file-label.disabled { opacity: 0.5; pointer-events: none; }

/* 썸네일 미리보기 */
.img-thumb {
  width: 40px; height: 40px; object-fit: cover;
  border-radius: 5px; border: 1px solid #e2e8f0;
  flex-shrink: 0; background: #f1f5f9;
}
.img-thumb.hidden { display: none; }

/* 업로드 상태 텍스트 */
.img-upload-status { font-size: 0.74rem; flex-shrink: 0; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.img-upload-status.uploading { color: #f59e0b; }
.img-upload-status.done      { color: #10b981; }
.img-upload-status.error     { color: #ef4444; white-space: normal; max-width: 220px; line-height: 1.3; }

.login-overlay { position: fixed; inset: 0; background: rgba(12,35,64,0.88); display: flex; align-items: center; justify-content: center; z-index: 100; }

.login-overlay.hidden { display: none; }

.login-box { background: var(--white); border-radius: 16px; padding: 36px 28px; width: min(360px, 90%); display: flex; flex-direction: column; gap: 12px; text-align: center; }

.login-box h2 { margin: 0 0 4px; color: var(--navy); }

.login-box input { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #cbd5e1; font: inherit; }

.login-error { color: #dc2626; font-size: 0.88rem; margin: 0; }

/* 우측 플로팅 버튼 - 흰색 원형 카드형 */

.floating-btns {

  display: none !important;

}

.float-btn-card {

  width: 68px;

  height: 68px;

  border-radius: 50%;

  background: #fff;

  color: #0b1f4d;

  text-decoration: none;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 3px;

  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);

  border: 1px solid rgba(15, 23, 42, 0.08);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}

.float-btn-card:hover {

  transform: translateY(-3px);

  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);

}

.float-btn-card svg {

  width: 24px;

  height: 24px;

  display: block;

  fill: currentColor;

}

.float-btn-card-label,

.float-btn-card span {

  font-size: 11px;

  font-weight: 700;

  line-height: 1.1;

  letter-spacing: -0.04em;

  white-space: nowrap;

}

.fbc-tel {

  color: #0b1f4d;

}

.fbc-blog {

  color: #03c75a;

}

.fbc-kakao {

  color: #3a2920;

}

.fbc-inquiry {

  color: #c9a84c;

}

.site-footer { position: static; margin-top: 0; padding: 18px 20px; background: #1f2937; color: #f9fafb; font-size: 13px; text-align: center; z-index: auto; }

.site-footer .container { max-width: 1200px; margin: 0 auto; }

.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.footer-main, .footer-sub, .footer-links { margin: 0; line-height: 1.6; }

.footer-main strong { color: #ffffff; margin-right: 12px; }

.footer-main span, .footer-sub span { display: inline-block; margin: 0 6px; color: #d1d5db; }

.footer-links { margin-top: 4px; }

.footer-links a { color: #ffffff; text-decoration: none; font-weight: 700; margin: 0 6px; }

.footer-links a:hover { text-decoration: underline; }

/* ===== 탑바 ===== */

.top-bar { background: #0A1F5C; padding: 6px 0; }

.top-bar .container { display: flex; justify-content: flex-end; align-items: center; gap: 20px; }

.top-bar-hours { font-size: 12px; color: #aab8d8; }

.top-bar-phone { font-size: 12px; font-weight: 600; color: #C9A84C; text-decoration: none; }

.top-bar-phone:hover { color: #e0c070; }

/* ===== 카테고리 탭 ===== */

.category-tab-bar { background: #fff; border-bottom: 1px solid #e5e8ed; }

.category-tab-bar .container { display: flex; align-items: center; overflow-x: auto; }

.cat-tab { font-size: 14px; font-weight: 500; color: #666; padding: 14px 18px 11px; border-bottom: 3px solid transparent; text-decoration: none; white-space: nowrap; transition: color 0.15s; cursor: pointer; }

.cat-tab:hover { color: #0A1F5C; }

.cat-tab.active { font-weight: 700; color: #0A1F5C; border-bottom: 3px solid #C9A84C; }

/* ===== 매물 상세 모달 ===== */

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; }

.modal-overlay.hidden { display: none; }

.modal-box { background: #fff; border-radius: 16px; width: 95vw; max-width: 1600px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }

.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid #e5e9f0; background: #f6f8fb; flex-shrink: 0; }

.modal-id { font-size: 12px; color: #666; }

.modal-id strong { color: #12335a; }

.modal-close { border: none; background: none; font-size: 20px; cursor: pointer; color: #666; padding: 4px 8px; border-radius: 6px; }

.modal-close:hover { background: #e5e9f0; }

.modal-body { display: grid; grid-template-columns: 42fr 33fr 25fr; overflow: hidden; flex: 1; min-height: 0; }

/* ── 3열 컬럼 ── */
/* HTML order: photo | side | info → CSS order restores desktop as photo | info | side */
.modal-col-photo { order: 1; border-right: 1px solid #e5e9f0; display: flex; flex-direction: column; overflow: hidden; background: #1e293b; }

.modal-col-info { order: 2; border-right: 1px solid #e5e9f0; display: flex; flex-direction: column; overflow-y: auto; background: #fff; }

.modal-col-side { order: 3; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; background: #f8fafc; }

.modal-main-img { flex: 1; min-height: 0; overflow: hidden; }

.modal-main-img img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; display: block; transition: transform 0.15s; }

.modal-main-img img:hover { transform: scale(1.02); }

/* 깨진 이미지(alt 텍스트·아이콘) 숨김 — JS onerror 로 숨기는 것과 동일 효과 */
.modal-main-img img[src=""], .modal-main-img img:not([src]) { display: none; }

/* 이미지 없을 때 기본 배경 메시지 */
.modal-no-img {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: #94a3b8; font-size: 15px;
  background: #1e293b;
}
.modal-no-img svg { width: 56px; height: 56px; opacity: 0.35; }

.modal-thumbs { display: flex; gap: 6px; padding: 10px; overflow-x: auto; flex-shrink: 0; background: #f6f8fb; border-top: 1px solid #e5e9f0; }

.modal-thumb { width: 80px; height: 58px; object-fit: cover; border-radius: 6px; cursor: pointer; flex-shrink: 0; border: 2px solid transparent; opacity: 0.7; transition: opacity 0.15s, border-color 0.15s; }

.modal-thumb.active, .modal-thumb:hover { opacity: 1; border-color: #12335a; }

.modal-desc-section { padding: 20px; border-top: 1px solid #e5e9f0; }

.modal-desc-section h4 { font-size: 15px; font-weight: 700; color: #12335a; margin: 0 0 10px; }

.modal-desc { font-size: 15px; color: #374151; line-height: 1.9; background: #f8fafc; padding: 14px 16px; border-radius: 8px; border: 1px solid #e2e8f0; white-space: pre-line; }

.modal-body-map-section { padding: 20px; border-top: 1px solid #e5e9f0; }
#modalBodyMap { width: 100%; height: 220px; border-radius: 8px; border: 1px solid #e2e8f0; background: #e8f0f8; overflow: hidden; }

/* .modal-right → .modal-col-side 로 이동 */

.modal-badge { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: none; color: #374151; font-size: 14px; font-weight: 600; padding: 0; border-radius: 0; margin-bottom: 6px; }

.modal-prop-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; }
.modal-badge .deal-badge { font-size: 12px; height: auto; padding: 2px 8px; }
.modal-promo-sticker { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid #c9a84c; background: #fff8e1; color: #7a5c0a; font-size: 12px; font-weight: 800; }
.modal-prop-badge.prop-factory   { background: #ccfbf1; color: #0d9488; }
.modal-prop-badge.prop-store     { background: #fee2e2; color: #dc2626; }
.modal-prop-badge.prop-land      { background: #ffedd5; color: #c2410c; }
.modal-prop-badge.prop-officetel { background: #dbeafe; color: #1d4ed8; }
.modal-prop-badge.prop-hillstate { background: #ede9fe; color: #6d28d9; }
.modal-prop-badge.prop-house     { background: #dcfce7; color: #15803d; }
.modal-prop-badge.prop-etc       { background: #f1f5f9; color: #475569; }

.info-area-row td { background: #f0fdf4; }
.info-area-row .info-label { color: #0f766e; font-weight: 700; }
.info-area-row .info-value { color: #065f46; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.info-price-row td { background: #fffbeb; }
.info-price-row .info-label { color: #92400e; font-weight: 700; }
.info-price-value { color: #b45309; font-weight: 800; font-size: 15px; }

.area-unit-btn, .area-toggle-btn { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; cursor: pointer; flex-shrink: 0; transition: background 0.15s; }
.area-unit-btn:hover, .area-toggle-btn:hover { background: #a7f3d0; }

.area-field-label { font-size: 12px; font-weight: 700; color: #475569; white-space: nowrap; min-width: 52px; }
.admin-form .detail-fields-section { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 12px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; }
.admin-form .detail-fields-section input { width: 100%; box-sizing: border-box; }

.modal-title { font-size: 19px; font-weight: 700; color: #1e293b; margin: 0; line-height: 1.3; }

.modal-address { font-size: 13px; color: #94a3b8; }

.modal-price-area { display: flex; flex-direction: column; gap: 0; background: #fff; border-radius: 10px; padding: 10px 14px; border: 1px solid #c7e8d8; border-left: 4px solid #0a7c55; }

.modal-price-row { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: none; }

.modal-price-row:last-child { border-bottom: none; }

.price-label { font-size: 13px; color: #64748b; font-weight: 600; flex-shrink: 0; background: #e8f5ef; padding: 2px 7px; border-radius: 4px; }

.price-value { font-size: 26px; font-weight: 800; color: #0a7c55; letter-spacing: -0.5px; line-height: 1.1; }

.modal-info-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }

.modal-info-table tr { border-bottom: 1px solid #f1f5f9; }

.modal-info-table tr:last-child { border-bottom: none; }

.info-label { padding: 12px 14px 12px 0; color: #64748b; width: 36%; vertical-align: top; font-size: 14.5px; white-space: nowrap; }

.info-value { padding: 12px 0; color: #1e293b; font-weight: 600; font-size: 15.5px; }

.modal-contact { display: flex; flex-wrap: wrap; gap: 6px; }

.modal-contact > * { flex: 1 1 0; min-width: 0; }

.modal-tel { background: #12335a; color: #fff; justify-content: center; min-height: 46px; padding: 0 8px; font-size: 14px; line-height: 1; text-align: center; white-space: nowrap; }

.modal-kakao-btn { background: #FEE500; color: #3a1d1d; justify-content: center; min-height: 46px; padding: 0 8px; font-size: 14px; line-height: 1; text-align: center; text-decoration: none; display: flex; align-items: center; border-radius: 8px; font-weight: 700; white-space: nowrap; }

.modal-print-btn {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  justify-content: center;
  min-height: 46px;
  padding: 0 8px;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  border-radius: 10px;
  font-weight: 700;
  width: auto;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s, color 0.15s;
}
.modal-print-btn:hover {
  background: var(--gray-100);
  color: var(--navy);
}

.modal-agent { background: #fff; border-radius: 10px; padding: 14px; font-size: 13px; color: #64748b; display: flex; flex-direction: column; gap: 4px; border: 1px solid #e2e8f0; }

.modal-agent strong { color: #12335a; font-size: 14px; }

.modal-summary { display: flex; flex-direction: column; gap: 4px; }

.modal-info-section { padding: 20px; }

.modal-section-title { font-size: 15px; font-weight: 700; color: #12335a; margin: 0 0 12px; }

.modal-area-highlight { background: #f0fdf4; border-radius: 8px; padding: 8px 12px; border: 1px solid #bbf7d0; display: flex; flex-direction: column; gap: 2px; }

.area-hl-row { display: flex; flex-direction: column; gap: 2px; }

.area-hl-row + .area-hl-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid #dcfce7; }

.area-hl-label { font-size: 11px; color: #6b7280; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }

.area-hl-control { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }

.area-hl-value { font-size: 18px; font-weight: 700; color: #1e293b; letter-spacing: -0.2px; line-height: 1.35; overflow-wrap: anywhere; }

/* ===== 라이트박스 ===== */

.lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; z-index: 300; }

.lightbox-overlay.hidden { display: none; }

.lightbox-overlay img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; }

.lightbox-close { position: absolute; top: 16px; right: 20px; background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 24px; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 32px; cursor: pointer; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.lightbox-prev { left: 16px; }

.lightbox-next { right: 16px; }

.lightbox-prev:hover, .lightbox-next:hover, .lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* ===== 반응형 ===== */

@media (max-width: 980px) {

  .card-grid { grid-template-columns: repeat(2, 1fr); }

  .admin-grid { grid-template-columns: 1fr; }

  .listing-filter-grid { flex-wrap: wrap; }

  .listing-filter-grid input, .listing-filter-grid select { flex: 1 1 120px; }

}

@media (max-width: 760px) {

  .nav-toggle { display: inline-flex; }

  .nav-menu { display: none; position: absolute; left: 4%; right: 4%; top: 64px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 10px; flex-direction: column; align-items: flex-start; z-index: 20; }

  .nav-menu.open { display: flex; }

  .hero { padding: 62px 0; }

  .card-grid { grid-template-columns: 1fr; }

  .listings-body { grid-template-columns: 1fr; height: auto; min-height: auto; }

  .listings-sidebar { display: none; }

  #map { height: 250px; }

  .map-section { border-right: none; border-bottom: 1px solid var(--gray-200); }

  .listings-panel { height: auto; overflow-y: visible; }

  .listings-list-header { position: static; }

  .filter-top-form input[type="text"], .filter-top-form select { max-width: 100%; }

  .listing-filter-grid input, .listing-filter-grid select { flex: 1 1 calc(50% - 4px); }

  .modal-box { border-radius: 0; max-height: 92vh; height: auto; }

  .modal-body { grid-template-columns: 1fr; overflow-y: auto; }
  .modal-col-photo { order: 1; border-right: none; border-bottom: 1px solid #e5e9f0; background: #1e293b; flex-shrink: 0; overflow: visible; }
  .modal-col-side { order: 2; overflow-y: visible; }
  .modal-col-info { order: 3; border-right: none; border-bottom: 1px solid #e5e9f0; overflow-y: visible; height: auto; }
  .modal-main-img { flex: none; height: 240px; }

.floating-btns {

  right: 12px;

  bottom: 84px;

  gap: 9px;

}

.float-btn-card {

  width: 56px;

  height: 56px;

  gap: 2px;

}

.float-btn-card svg {

  width: 20px;

  height: 20px;

}

.float-btn-card-label,

.float-btn-card span {

  font-size: 10px;

}

  .footer-main span, .footer-sub span { display: block; margin: 2px 0; }

  .footer-main strong { display: block; margin: 0 0 4px; }

  .modal-body { grid-template-columns: 1fr; overflow-y: auto; }
  .modal-col-photo { order: 1; border-right: none; border-bottom: 1px solid #e5e9f0; background: #1e293b; flex-shrink: 0; overflow: visible; }
  .modal-col-side { order: 2; overflow-y: visible; }
  .modal-col-info { order: 3; border-right: none; border-bottom: 1px solid #e5e9f0; overflow-y: visible; height: auto; }
  .modal-main-img { flex: none; height: 220px; }

  .top-bar-hours { display: none; }

}

/* ======================================

   관리자 대시보드 / 등록 / 관리 공통

   ====================================== */

:root { --gold: #C9A84C; }

.dash-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 28px;

}

.dash-title { margin: 0; color: var(--navy); font-size: 1.5rem; }

.dash-actions { display: flex; gap: 10px; }

.dash-stats {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin-bottom: 32px;

}

.stat-card {

  background: var(--white);

  border: 1px solid var(--gray-200);

  border-radius: 12px;

  padding: 24px 16px;

  text-align: center;

}

.stat-card.stat-gold { border-top: 4px solid var(--gold); }

.stat-card.stat-green { border-top: 4px solid var(--green); }

.stat-card.stat-red   { border-top: 4px solid #dc2626; }

.stat-num   { font-size: 2.2rem; font-weight: 800; color: var(--navy); }

.stat-label { font-size: 0.88rem; color: var(--gray-700); margin-top: 6px; }

.dash-recent h2 { color: var(--navy); margin-bottom: 12px; font-size: 1.1rem; }

.recent-list { display: grid; gap: 8px; }

.recent-item {

  display: flex;

  gap: 10px;

  align-items: center;

  background: var(--white);

  border: 1px solid var(--gray-200);

  border-radius: 8px;

  padding: 10px 14px;

  flex-wrap: wrap;

}

.recent-no {

  font-size: 11px; color: var(--gray-700);

  background: var(--gray-100); padding: 2px 7px;

  border-radius: 4px; flex-shrink: 0;

}

.recent-title {

  flex: 1; font-weight: 700; font-size: 0.9rem;

  overflow: hidden; text-overflow: ellipsis;

  white-space: nowrap; min-width: 80px;

}

.recent-type {

  font-size: 11px; color: #fff; background: var(--navy);

  padding: 2px 7px; border-radius: 4px; flex-shrink: 0;

}

.recent-price { font-size: 12px; color: var(--green); font-weight: 700; flex-shrink: 0; }

.recent-status { font-size: 11px; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }

.status-done   { background: #fee2e2; color: #dc2626; }

.status-public { background: var(--green-soft); color: var(--green); }

.recent-date   { font-size: 11px; color: var(--gray-700); flex-shrink: 0; }

.admin-page-header {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 24px;

  flex-wrap: wrap;

}

.admin-page-header h1 { margin: 0; flex: 1; color: var(--navy); }

.listing-no-display {

  background: var(--green-soft);

  border: 1px solid #cde7d9;

  border-radius: 8px;

  padding: 8px 14px;

  margin-bottom: 10px;

  font-size: 0.9rem;

}

.listing-no-display strong { color: var(--navy); font-size: 1.1rem; }

.area-row, .price-row {

  display: flex;

  gap: 8px;

  align-items: center;

}

.admin-form .area-row input,

.admin-form .price-row input { flex: 1; min-width: 0; }

.area-pyeong, .price-korean {

  font-size: 0.85rem; color: var(--green);

  font-weight: 700; white-space: nowrap; min-width: 90px;

}

.admin-filters {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-bottom: 12px;

}

.admin-filters input,

.admin-filters select {

  flex: 1 1 120px;

  padding: 8px 10px;

  border: 1px solid #cbd5e1;

  border-radius: 8px;

  font: inherit;

  font-size: 0.88rem;

}

.sort-row {

  display: flex;

  gap: 8px;

  align-items: center;

  margin-bottom: 12px;

}

.sort-row .btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.total-count { margin-left: auto; font-size: 0.88rem; color: var(--gray-700); }

.pagination {

  display: flex;

  gap: 6px;

  justify-content: center;

  margin-top: 16px;

  flex-wrap: wrap;

}

.admin-item-header {

  display: flex;

  gap: 8px;

  align-items: center;

  margin-bottom: 4px;

  flex-wrap: wrap;

}

.admin-item-no {

  font-size: 11px; color: var(--gray-700);

  background: var(--gray-100); padding: 2px 7px;

  border-radius: 4px; flex-shrink: 0;

}

.admin-item-title { font-size: 0.95rem; }

.admin-item-date { margin-left: auto; font-size: 11px; color: var(--gray-700); }

.badge-done {

  display: inline-block;

  background: #fee2e2; color: #dc2626;

  font-size: 11px; padding: 2px 7px;

  border-radius: 4px; margin-left: 4px;

}

.done-btn.done-active { border-color: #dc2626; color: #dc2626; }

@media (max-width: 760px) {

  .dash-stats { grid-template-columns: 1fr 1fr; }

  .recent-title { min-width: calc(100% - 80px); }

  .admin-filters input,

  .admin-filters select { flex: 1 1 calc(50% - 4px); }

}

@media (max-width: 480px) {

  .dash-stats { grid-template-columns: 1fr; }

}

/* ===== 모달 미니맵 ===== */

.modal-minimap-wrap { border-radius: 10px; overflow: hidden; border: 1px solid var(--gray-200); flex-shrink: 0; width: 100%; }

.modal-minimap-wrap h4 { font-size: 12px; font-weight: 700; color: var(--navy); margin: 0; padding: 8px 10px 6px; background: var(--gray-100); border-bottom: 1px solid var(--gray-200); }

#modalMiniMap,
#modalBodyMap { width: 100%; height: 240px; background: #e8f0f8; }

/* ===== 메인(index.html) 최신매물 섹션 ===== */

.home-recent-section { padding: 56px 0; background: var(--gray-100); }

.home-recent-section h2 { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin: 0 0 6px; }

.home-recent-section .section-sub { font-size: 0.92rem; color: var(--gray-700); margin: 0 0 24px; }

.home-listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.home-listing-card {

  background: var(--white); border: 1px solid var(--gray-200);

  border-radius: 12px; overflow: hidden; cursor: pointer;

  transition: transform 0.15s, box-shadow 0.15s; text-decoration: none;

}

.home-listing-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }

.hlc-img { position: relative; aspect-ratio: 4/3; background: #dce8f5; overflow: hidden; }

.hlc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hlc-body { padding: 12px 14px; }

.hlc-address { font-size: 11px; color: var(--gray-700); margin-bottom: 3px; }

.hlc-title { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hlc-price { font-size: 13px; font-weight: 700; color: var(--green); }

.home-recent-footer { margin-top: 28px; text-align: center; }

@media (max-width: 760px) {

  .home-listing-grid { grid-template-columns: 1fr; }

  .home-recent-section { padding: 40px 0; }

}

@media (min-width: 761px) and (max-width: 1060px) {

  .home-listing-grid { grid-template-columns: repeat(2, 1fr); }

  .listings-body { grid-template-columns: 160px 1fr 300px; }

}

/* ================================================================

   listings.html 전면 개편 v2 — lp- 네임스페이스

   사이드바(220px) | 지도(flex:1) | 매물패널(360px)

   ================================================================ */

:root { --orange: #F97316; --dark-navy: #1E3A5F; }

/* ── 전체 3단 그리드 ── */

.lp-body {

  display: grid;

  grid-template-columns: 220px 1fr 360px;

  grid-template-rows: 1fr;

  min-height: 770px;

  background: #F3F4F6;

}

/* ── 왼쪽 사이드바 (col 1) ── */

.lp-sidebar {

  grid-column: 1;

  grid-row: 1;

  background: #fff;

  border-right: 1px solid #E5E7EB;

}

#map { width: 100%; height: 100%; background: #dce8f5; }

.map-loading {

  width: 100%; height: 100%;

  display: flex; align-items: center; justify-content: center;

  font-size: 0.92rem; color: #4a6785;

}

.map-search-overlay {

  position: absolute; top: 14px; left: 50%;

  transform: translateX(-50%); z-index: 10;

  display: flex; gap: 6px;

  background: rgba(255,255,255,0.96);

  backdrop-filter: blur(6px);

  padding: 8px; border-radius: 10px;

  box-shadow: 0 4px 20px rgba(10,31,92,0.18);

  width: calc(100% - 32px); max-width: 480px;

}

.map-search-overlay input {

  flex: 1; padding: 9px 12px;

  border: 1.5px solid #E5E7EB; border-radius: 7px;

  font-family: inherit; font-size: 13px; outline: none; min-width: 0;

  transition: border-color 0.15s;

}

.map-search-overlay input:focus { border-color: #0A1F5C; }

.map-search-overlay button {

  padding: 9px 18px; background: #0A1F5C; color: #fff;

  border: none; border-radius: 7px;

  font-family: inherit; font-size: 13px; font-weight: 700;

  cursor: pointer; white-space: nowrap; transition: background 0.15s;

}

.map-search-overlay button:hover { background: #071544; }

/* ── 오른쪽: 패널 (40%) ── */

.lp-panel {

  background: #F8F9FA;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

}

.lp-sidebar-section { border-bottom: 1px solid #EDEEF0; }

.lp-sidebar-header {

  background: #1E3A5F;

  color: #fff;

  font-size: 11px;

  font-weight: 700;

  padding: 7px 14px;

  letter-spacing: 0.5px;

}

/* 매물 종류 항목 */

.lp-cat-item {

  display: flex;

  align-items: center;

  padding: 9px 10px 9px 12px;

  font-size: 15px;

  color: #374151;

  cursor: pointer;

  border-left: 3px solid transparent;

  transition: background 0.1s;

  gap: 4px;

  text-decoration: none;

  border-bottom: 1px solid #F3F4F6;

}

#sectionFeatured .lp-section-hd { border-left: 3px solid #F59E0B; }

#sectionLatest   .lp-section-hd { border-left: 3px solid #EF4444; }

.lp-sec-icon { font-size: 15px; }

.lp-sec-title { flex: 1; font-size: 14px; font-weight: 800; color: #0A1F5C; }

.lp-sec-more {

  font-size: 11px; color: #6B7280; background: none;

  border: 1px solid #E5E7EB; border-radius: 4px;

  padding: 3px 9px; cursor: pointer; font-family: inherit;

  transition: all 0.12s; white-space: nowrap;

}

.lp-cat-name { flex: 1; font-size: 15px; }

.lp-cat-count { font-size: 11px; color: #9CA3AF; flex-shrink: 0; margin-right: 3px; }

.lp-cat-badges { display: flex; gap: 3px; flex-shrink: 0; }

.lp-deal-badge {

  font-size: 10px; font-weight: 700;

  padding: 2px 5px; border-radius: 3px;

  cursor: pointer; color: #fff; line-height: 1.5;

  transition: opacity 0.12s;

}

.lp-deal-badge:hover { opacity: 0.75; }

.lbdg-mae  { background: #EA580C; }

.lbdg-im   { background: #059669; }

.lbdg-jeon { background: #2563EB; }

.lbdg-wol  { background: #7C3AED; }

/* 사이드바 빠른 매물 (추천/급매/신규) */

.lp-side-quick-list { padding: 4px 0; }

.lp-side-item {

  display: flex;

  flex-direction: column;

  gap: 2px;

  padding: 7px 12px;

  cursor: pointer;

  border-bottom: 1px solid #F3F4F6;

  transition: background 0.1s;

}

.lp-side-item:hover { background: #F9FAFB; }

.lp-side-item:last-child { border-bottom: none; }

.lp-side-title {

  font-size: 12px; font-weight: 600; color: #1e293b;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

}

.lp-side-price { font-size: 11px; color: #F97316; font-weight: 700; }

.lp-side-empty { font-size: 11px; color: #9CA3AF; padding: 8px 12px; }

/* 문의 박스 */

.lp-contact-box {

  margin: 12px;

  padding: 12px 14px;

  background: #F9FAFB;

  border: 1px solid #E5E7EB;

  border-radius: 8px;

  margin-top: auto;

  flex-shrink: 0;

}

.cb-label { font-size: 10px; font-weight: 700; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }

.cb-phone { font-size: 15px; font-weight: 800; color: #F97316; display: block; text-decoration: none; line-height: 1.3; }

.cb-phone:hover { color: #ea6c10; }

.cb-hours { font-size: 11px; color: #9CA3AF; margin: 3px 0 0; }

/* ── 가운데: 검색바 + 카카오맵 (col 2) ── */

.lp-center {

  grid-column: 2;

  grid-row: 1;

  min-height: 0;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border-right: 1px solid #E5E7EB;

}

/* 검색바 (맵 위, 고정) */

.lp-search-bar {

  flex-shrink: 0;

  background: #fff;

  border-bottom: 1px solid #E5E7EB;

  padding: 9px 12px;

  display: flex;

  gap: 6px;

  align-items: center;

  flex-wrap: wrap;

  z-index: 5;

}

.lp-search-bar input[type="text"] {

  flex: 1; min-width: 100px;

  padding: 7px 10px; border: 1px solid #E5E7EB;

  border-radius: 6px; font: inherit; font-size: 13px;

  outline: none; transition: border-color 0.12s;

}

.lp-search-bar input[type="text"]:focus { border-color: #1E3A5F; }

.lp-search-bar select {

  padding: 7px 7px; border: 1px solid #E5E7EB;

  border-radius: 6px; font: inherit; font-size: 13px;

  background: #fff; cursor: pointer; outline: none;

  min-width: 76px;

}

.lp-search-submit {

  padding: 7px 14px; background: #1E3A5F; color: #fff;

  border: none; border-radius: 6px; font: inherit;

  font-size: 14px; font-weight: 700; cursor: pointer;

  white-space: nowrap; transition: background 0.12s;

}

.lp-search-submit:hover { background: #162f50; }

.lp-search-reset {

  padding: 7px 9px; background: none; border: none;

  color: #9CA3AF; font: inherit; font-size: 13px;

  cursor: pointer; white-space: nowrap; border-radius: 6px;

  transition: color 0.12s;

}

.lp-search-reset:hover { color: #374151; }

/* 지도 */

#map {

  flex: 1;

  min-height: 0;

  background: #e8f0f8;

}

.map-placeholder-text {

  width: 100%; height: 100%;

  display: flex; align-items: center; justify-content: center;

  color: #4a6785; font-size: 0.92rem;

}

/* ── 오른쪽 매물 패널 (col 3) ── */

.lp-panel {

  grid-column: 3;

  grid-row: 1;

  min-height: 0;

  display: flex;

  flex-direction: column;

  background: #F3F4F6;

  overflow: hidden;

}

.lp-panel-hd {

  display: flex; align-items: center;

  justify-content: space-between;

  padding: 9px 12px 7px;

  background: #fff;

  border-bottom: 1px solid #E5E7EB;

  flex-shrink: 0;

}

.lp-result-count { font-size: 13px; color: #6B7280; }

.lp-result-count strong { color: #111827; font-weight: 700; }

.lp-sort-btns { display: flex; gap: 4px; }

.lp-sort-btn {

  padding: 5px 10px; font-size: 12px; font-weight: 600;

  border: 1px solid #E5E7EB; border-radius: 6px;

  background: #fff; color: #6B7280; cursor: pointer;

  transition: all 0.12s;

}

.lp-sort-btn.active { background: #1E3A5F; color: #fff; border-color: #1E3A5F; }

.lp-sort-btn:hover:not(.active) { border-color: #1E3A5F; color: #1E3A5F; }

/* 카드 목록 (1열, 스크롤) */

.lp-panel-cards {

  flex: 1;

  overflow-y: auto;

  padding: 8px;

  display: flex;

  flex-direction: column;

  gap: 8px;

}

/* 페이지네이션 */

.lp-pagination {

  display: flex; gap: 4px; justify-content: center;

  flex-wrap: wrap; padding: 8px; flex-shrink: 0;

  border-top: 1px solid #E5E7EB; background: #F3F4F6;

}

.lp-page-btn {

  min-width: 28px; height: 28px; padding: 0 5px;

  border-radius: 5px; border: 1px solid #E5E7EB;

  background: #fff; color: #374151; font: inherit; font-size: 12px;

  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;

  transition: all 0.12s;

}

.lp-page-btn:hover:not(.active) { border-color: #1E3A5F; color: #1E3A5F; }

.lp-page-btn.active { background: #1E3A5F; color: #fff; border-color: #1E3A5F; font-weight: 700; }

/* ── 매물 카드 (패널 & 목록 뷰 공통) ── */

.lp-card {

  background: #fff; border: 1px solid #E5E7EB;

  border-radius: 8px; overflow: hidden;

  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;

  display: flex; flex-direction: column;

  flex-shrink: 0;

}

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

.lp-card.is-done { opacity: 0.6; }

.lp-card-img {

  position: relative; height: 140px;

  overflow: hidden; background: #E5E7EB; flex-shrink: 0;

}

.lp-card-img img {

  width: 100%; height: 100%; object-fit: cover; display: block;

  transition: transform 0.2s;

}

.lp-card:hover .lp-card-img img { transform: scale(1.03); }

/* 매물번호 (이미지 좌하단) */

.lp-listing-no {

  position: absolute; bottom: 6px; left: 8px;

  background: rgba(0,0,0,0.55); color: #fff;

  font-size: 10px; font-weight: 700;

  padding: 2px 6px; border-radius: 4px; letter-spacing: 0.3px;

}

/* 특별 배지 (이미지 우상단) */

.lp-card-special {

  position: absolute; top: 6px; right: 8px;

  font-size: 16px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));

}

.lp-sold-overlay {

  position: absolute; inset: 0;

  background: rgba(153,0,0,0.72);

  display: flex; align-items: center; justify-content: center;

  font-size: 15px; font-weight: 800; color: #fff; letter-spacing: 2px;

}

.lp-card-body {

  padding: 10px 12px;

  display: flex; flex-direction: column; gap: 4px;

}

.lp-card-meta-row {

  display: flex; justify-content: space-between; align-items: center;

}

.lp-card-cat { font-size: 12px; color: #9CA3AF; }

.lp-card-area { font-size: 12px; color: #9CA3AF; }

.lp-card-title {

  font-size: 16px; font-weight: 700; color: #111827;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

  line-height: 1.3;

}

.lp-card-addr {

  font-size: 13px; color: #6B7280;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

}

.lp-card-price-row {

  display: flex; align-items: center; gap: 7px; margin-top: 3px;

}

/* 거래유형 pill */

.lp-deal-pill {

  font-size: 11px; font-weight: 700;

  padding: 3px 9px; border-radius: 12px;

  color: #fff; white-space: nowrap; flex-shrink: 0;

}

.lp-deal-pill.deal-mae  { background: #EA580C; }

.lp-deal-pill.deal-jeon { background: #2563EB; }

.lp-deal-pill.deal-wol  { background: #7C3AED; }

.lp-deal-pill.deal-im   { background: #059669; }

.lp-card-price {

  font-size: 17px; font-weight: 800; color: #F97316;

}

/* 빈 상태 */

.lp-empty { text-align: center; padding: 40px 16px; color: #9CA3AF; font-size: 14px; }

/* ── 목록 뷰 (리스트 모드, col 2~3) ── */

.lp-list-view {

  grid-column: 2 / 4;

  grid-row: 1;

  display: none;             /* 기본 숨김 */

  flex-direction: column;

  background: #F3F4F6;

  overflow: hidden;

}

/* 리스트 모드 전환 */

.lp-body.list-mode .lp-center,

.lp-body.list-mode .lp-panel { display: none; }

.lp-body.list-mode .lp-list-view { display: flex; }

.lp-list-toolbar {

  display: flex; align-items: center; gap: 10px;

  padding: 9px 16px 7px;

  background: #fff; border-bottom: 1px solid #E5E7EB;

  flex-shrink: 0;

}

.lp-back-btn {

  padding: 6px 14px; background: #1E3A5F; color: #fff;

  border: none; border-radius: 6px; font: inherit;

  font-size: 14px; font-weight: 700; cursor: pointer;

  white-space: nowrap; transition: background 0.12s;

}

.lp-back-btn:hover { background: #162f50; }

/* 목록 뷰 스크롤 영역 */

.lp-list-scroll {

  flex: 1;

  overflow-y: auto;

  padding: 14px 16px 8px;

}

.lp-list-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

  align-content: start;

}

.lp-list-grid .lp-card-img { height: 160px; }

.lp-list-grid .lp-card { flex-shrink: unset; }

.lp-list-pgn { margin-top: 16px; border-top: none; background: transparent; }

/* ── 모바일 반응형 (768px 이하) ── */

@media (max-width: 768px) {

  .lp-body {

    grid-template-columns: 1fr;

    grid-template-rows: 250px auto;

    height: auto;

    min-height: auto;

  }

  .lp-sidebar { display: none; }

  .lp-center {

    grid-column: 1; grid-row: 1;

    height: 250px; flex-shrink: 0;

  }

  #map { height: 100%; }

  .lp-panel {

    grid-column: 1; grid-row: 2;

    height: auto; overflow: visible;

  }

  .lp-panel-cards { overflow: visible; flex: none; max-height: none; }

  .lp-list-view {

    grid-column: 1; grid-row: 1;

  }

  .lp-list-grid { grid-template-columns: 1fr; }

  .lp-search-bar { flex-wrap: wrap; gap: 6px; }

  .lp-search-bar input[type="text"],

  .lp-search-bar select { min-width: 0; flex: 1 1 110px; }

  .lp-search-submit { flex: 1; text-align: center; }

  .modal-box { border-radius: 0; max-height: 92vh; height: auto; }

  .modal-body { grid-template-columns: 1fr; overflow-y: auto; }
  .modal-col-photo { order: 1; border-right: none; border-bottom: 1px solid #e5e9f0; background: #1e293b; flex-shrink: 0; overflow: visible; }
  .modal-col-side { order: 2; overflow-y: visible; }
  .modal-col-info { order: 3; border-right: none; border-bottom: 1px solid #e5e9f0; overflow-y: visible; height: auto; }
  .modal-main-img { flex: none; height: 200px; }

}

@media (min-width: 769px) and (max-width: 1100px) {

  .lp-body { grid-template-columns: 160px 1fr 280px; }

  .cat-cards-section { margin-left: 160px; }

  .lp-all-section { margin-left: 160px; }

}

/* ================================================================

   admin.html v2 — 통합 관리자 대시보드

   ================================================================ */

/* 4열 통계 카드 */

.adm-stats-4 { grid-template-columns: repeat(4, 1fr); }

.stat-card.stat-star { border-top: 4px solid #C9A84C; }

/* 필터 바 */

.adm-filter-bar {

  display: flex; gap: 8px; flex-wrap: wrap;

  margin-bottom: 14px; padding: 12px 16px;

  background: #fff; border: 1px solid #e5e9f0; border-radius: 10px;

}

.adm-filter-bar input[type="text"],

.adm-filter-bar select {

  flex: 1 1 140px; padding: 8px 10px;

  border: 1px solid #cbd5e1; border-radius: 8px;

  font: inherit; font-size: 0.88rem;

}

.adm-filter-btn { flex: 0 0 auto; padding: 8px 16px; }

/* 매물 목록 */

.adm-list { display: grid; gap: 10px; }

.adm-item {

  display: flex; gap: 0;

  background: #fff; border: 1px solid #e5e9f0;

  border-radius: 10px; overflow: hidden;

}

.adm-item-done { border-left: 4px solid #dc2626; }

.adm-item-img {

  width: 130px; min-height: 90px;

  background: #e5e9f0; flex-shrink: 0;

  position: relative; overflow: hidden;

}

.adm-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.adm-img-done img { filter: grayscale(100%); opacity: 0.5; }

.adm-done-badge {

  position: absolute; inset: 0;

  background: rgba(180,0,0,0.72); color: #fff;

  display: flex; align-items: center; justify-content: center;

  font-size: 13px; font-weight: 800; letter-spacing: 1px;

}

.adm-rec-ribbon {

  position: absolute; top: 5px; left: 5px;

  background: #C9A84C; color: #fff;

  font-size: 10px; font-weight: 700;

  padding: 2px 6px; border-radius: 3px;

}

.adm-new-ribbon {

  position: absolute; top: 5px; right: 5px;

  background: #F97316; color: #fff;

  font-size: 10px; font-weight: 700;

  padding: 2px 6px; border-radius: 3px;

}

.adm-item-body {

  flex: 1; padding: 10px 14px;

  display: flex; flex-direction: column; gap: 4px; min-width: 0;

}

.adm-item-row1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.adm-item-no {

  font-size: 11px; color: var(--gray-700);

  background: var(--gray-100); padding: 2px 7px; border-radius: 4px; flex-shrink: 0;

}

.adm-item-type, .adm-item-deal {

  font-size: 11px; font-weight: 700; color: #fff;

  padding: 2px 6px; border-radius: 3px; flex-shrink: 0;

}

.adm-item-type { background: #0A1F5C; }

.adm-item-deal { background: #2563EB; }

.adm-item-date { margin-left: auto; font-size: 11px; color: var(--gray-700); }

.adm-item-title {

  font-size: 15px; font-weight: 700; color: #111;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

}

.adm-item-info { font-size: 12px; color: var(--gray-700); }

.adm-item-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* 관리자 카드 버튼 좌우 분리 레이아웃 */
.adm-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.adm-card-actions-left {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.adm-card-actions-right {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
}

.adm-btn {

  font: inherit; font-size: 12px; font-weight: 600;

  padding: 5px 10px; border-radius: 6px;

  border: 1px solid #cbd5e1; background: #fff; color: #374151;

  cursor: pointer; transition: all 0.12s; white-space: nowrap;

}

.adm-btn:hover { border-color: #1E3A5F; color: #1E3A5F; }

.adm-btn-rec-on  { background: #FEF9E7; border-color: #C9A84C; color: #7A5C0A; }

.adm-btn-new-on  { background: #FFF7ED; border-color: #F97316; color: #C2410C; }

.adm-btn-done.done-active { background: #FEF2F2; border-color: #dc2626; color: #dc2626; }

.adm-btn-edit    { border-color: #2563EB; color: #2563EB; }

.adm-btn-edit:hover { background: #EFF6FF; }

.adm-btn-hp      { border-color: #0a7c55; color: #0a7c55; background: #f0fdf4; }

.adm-btn-hp:hover  { background: #dcfce7; }

.adm-btn-done    { border-color: #6b7280; color: #6b7280; }

.adm-btn-done:hover { background: #f1f5f9; }

.adm-btn-done.done-active { border-color: #7c3aed; color: #7c3aed; background: #f5f3ff; }

.adm-btn-del     { border-color: #dc2626; color: #dc2626; }

.adm-btn-del:hover  { background: #FEF2F2; }

/* 핀/추천 버튼 — compact size */
.adm-btn-sm { font-size: 11px; padding: 4px 8px; }

.adm-btn-rec          { border-color: #d97706; color: #92400e; }
.adm-btn-rec:hover    { background: #fef3c7; }
.adm-btn-rec.rec-active { background: linear-gradient(135deg,#FFD700,#FFA500); border-color: #d97706; color: #1a2340; font-weight: 700; }
.adm-btn-pin1         { border-color: #ea580c; color: #9a3412; }
.adm-btn-pin1:hover   { background: #fff7ed; }
.adm-btn-pin1.pin-active { background: linear-gradient(135deg,#FF6B35,#D63800); border-color: #ea580c; color: #fff; font-weight: 700; }
.adm-btn-pin2         { border-color: #b45309; color: #7c3909; }
.adm-btn-pin2:hover   { background: #fffbeb; }
.adm-btn-pin2.pin-active { background: linear-gradient(135deg,#FF6B35,#D63800); border-color: #b45309; color: #fff; font-weight: 700; }
.adm-btn-unpin        { border-color: #9ca3af; color: #6b7280; }
.adm-btn-unpin:hover  { background: #f9fafb; }
.badge-pin { display:inline-block; background:#ea580c; color:#fff; font-size:11px; font-weight:700; padding:1px 6px; border-radius:3px; margin-left:4px; }
.badge-rec { display:inline-block; background:#d97706; color:#fff; font-size:11px; font-weight:700; padding:1px 6px; border-radius:3px; margin-left:4px; }

@media (max-width: 640px) {
  .admin-item-actions .adm-btn,
  .adm-item-actions .adm-btn { font-size: 13px; padding: 7px 10px; }
}

/* 수정 모달 */

.adm-edit-modal { max-width: 560px; }

/* ================================================================

   listings.html v3 — 새 레이아웃

   ================================================================ */

/* 탑바 1.5배 */

.top-bar-lg { font-size: 18px !important; }

/* 전체 3단 */

.lp-body {

  grid-template-columns: 280px minmax(0, 1fr) 380px;

  height: auto;

}

/* ── 왼쪽 사이드바 ── */

.lp-contact-inner {

  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;

}                    

.lp-contact-inner {

  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;

}

.lp-phone-big {

  font-size: 20px; font-weight: 800; color: #C9A84C;

  text-decoration: none; display: block; line-height: 1.2;

}

.lp-phone-big:hover { color: #b89540; }

.lp-hours-small { font-size: 11px; color: #9CA3AF; margin: 0; }

.lp-kakao-btn {

  display: block; background: #C9A84C; color: #fff;

  text-align: center; padding: 10px 12px; border-radius: 8px;

  font-size: 13px; font-weight: 700; text-decoration: none;

  transition: background 0.12s;

}

.lp-kakao-btn:hover { background: #b89540; color: #fff; }

.lp-inquiry-section { flex: 1; min-height: 0; }

.lp-inquiry-form {

  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;

}

.lp-inquiry-form input,

.lp-inquiry-form textarea {

  width: 100%; padding: 8px 10px;

  font: inherit; font-size: 12px;

  border: 1px solid #E5E7EB; border-radius: 6px;

  outline: none; transition: border-color 0.12s; box-sizing: border-box;

}

.lp-inquiry-form input:focus,

.lp-inquiry-form textarea:focus { border-color: #0A1F5C; }

.lp-inquiry-submit {

  padding: 10px 12px; background: #0A1F5C; color: #fff;

  border: none; border-radius: 6px; font: inherit;

  font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.12s;

}

.lp-inquiry-submit:hover { background: #162f50; }

/* ── 가운데: 지도 + 오버레이 검색 ── */

.lp-center { position: relative; }

#map {

  position: absolute;

  inset: 0;

  background: #e8f0f8;

}

.map-placeholder-text {

  width: 100%; height: 100%;

  display: flex; align-items: center; justify-content: center;

  color: #4a6785; font-size: 0.92rem;

}

.lp-overlay-search {

  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 10;

  background: rgba(255,255,255,0.96); border-radius: 10px;

  padding: 10px 12px; display: flex; gap: 6px; align-items: center;

  box-shadow: 0 4px 18px rgba(0,0,0,0.2); flex-wrap: wrap;

}

.lp-overlay-search input[type="text"] {

  flex: 1; min-width: 80px;

  padding: 7px 10px; border: 1px solid #E5E7EB;

  border-radius: 6px; font: inherit; font-size: 13px;

  outline: none; transition: border-color 0.12s;

}

.lp-overlay-search input[type="text"]:focus { border-color: #0A1F5C; }

.lp-overlay-search select {

  padding: 7px 8px; border: 1px solid #E5E7EB;

  border-radius: 6px; font: inherit; font-size: 13px;

  background: #fff; cursor: pointer; min-width: 68px;

}

/* ── 오른쪽 패널 ── */

.lp-panel {

  display: flex; flex-direction: column; overflow: hidden;

  background: #F3F4F6;

}

/* 2열 그리드 */

.lp-panel-2col {

  display: grid; grid-template-columns: 1fr 1fr;

  flex: 1; overflow: hidden;

}

.lp-panel-col {

  display: flex; flex-direction: column; overflow: hidden;

  border-right: 1px solid #E5E7EB;

}

.lp-panel-col:last-child { border-right: none; }

.lp-col-header {

  font-size: 12px; font-weight: 700;

  padding: 7px 10px; flex-shrink: 0; border-bottom: 1px solid #E5E7EB;

}

.lp-col-rec { background: #FEF9E7; color: #7A5C0A; }

.lp-col-new { background: #FFF7ED; color: #C2410C; }

.lp-col-cards { overflow-y: auto; flex: 1; }

/* 미니 카드 */

/* ── 오른쪽 패널: 고정 헤더 + 스크롤 body 구조 ── */

/* sticky 헤더 — 패널 상단에 고정 */
.lp-panel-hd-sticky {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 9px;
  background: #071f5f;
  border-bottom: 2px solid #C9A84C;
}
.lp-panel-hd-title {
  font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -0.2px;
}
.lp-panel-hd-count {
  font-size: 12px; font-weight: 700; color: #C9A84C;
}

/* 스크롤 영역 — flex 1로 남은 공간 차지, 내부 스크롤 */
.lp-panel-scroll-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 12px 16px;
  box-sizing: border-box;
  /* 얇은 스크롤바 */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.lp-panel-scroll-body::-webkit-scrollbar      { width: 5px; }
.lp-panel-scroll-body::-webkit-scrollbar-track { background: transparent; }
.lp-panel-scroll-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* lp-mini-rec-badge — 구버전 호환 (mc-status-badges 로 대체됨) */
.lp-mini-rec-badge {
  position: absolute;
  top: 6px; left: 6px;
  background: #C9A84C; color: #fff;
  font-size: 10.5px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px;
  line-height: 1.4; pointer-events: none; z-index: 2;
}

/* img-wrap에 relative 보장 */
.lp-mini-img-wrap { position: relative; }

/* ── 기존 호환: lp-panel-inner (이제 미사용이지만 남겨둠) ── */
.lp-panel-inner {
  padding: 14px 16px;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.lp-panel-section { margin-bottom: 12px; }

.lp-panel-section-hd {
  font-size: 14px; font-weight: 800; color: #1a1a2e;
  padding: 8px 0 6px;
  border-bottom: 2px solid #C9A84C;
  margin-bottom: 12px;
}

/* PC: 2열 그리드 compact */
.lp-panel-section-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lp-panel-empty {
  grid-column: 1 / -1;
  padding: 12px 0; color: #888; font-size: 13px;
}

/* ── 가로형 미니 카드 (이미지 왼쪽 + 설명 오른쪽) ── */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   최근 등록 매물 미니 카드 — 가로형 (사진 왼쪽 + 정보 오른쪽)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.lp-mini-card {
  display: flex;
  flex-direction: row;        /* ★ 가로형 유지 */
  align-items: stretch;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-bottom: 2px solid #c7d5e8;
  box-shadow: 0 2px 8px rgba(7,31,95,0.05);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.13s;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 136px;
  min-height: 136px;
  max-height: 136px;
}

.lp-mini-card:hover {
  box-shadow: 0 5px 18px rgba(7,31,95,0.12);
  transform: translateY(-2px);
}

/* 이미지 영역 — 왼쪽 42% 고정 */
.lp-mini-img-wrap {
  width: 42%;
  min-width: 42%;
  flex-shrink: 0;
  overflow: hidden;
  background: #dce8f5;
  position: relative;
}

.lp-mini-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.22s ease;
}

.lp-mini-img--sample {
  object-fit: contain;
  background: #e8edf4;
  padding: 6px;
}

.lp-mini-card:hover .lp-mini-img { transform: scale(1.04); }

/* 이미지 위 상태 배지 그룹 (좌상단) */
.mc-status-badges {
  position: absolute;
  top: 5px; left: 5px;
  display: flex; gap: 3px; flex-direction: column;
  z-index: 2;
}

/* 상태 배지 공통 */
.mcb {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10px; font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.1px;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
}
.mcb-rec    { background: linear-gradient(135deg,#FFD700,#FFA500); color: #1a2340; font-weight: 800; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.mcb-pin    { background: linear-gradient(135deg,#FF6B35,#FF4500); color: #fff;    font-weight: 800; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.mcb-urgent { background: #ef4444; color: #fff; }
.mcb-excl   { background: #6d28d9; color: #fff; }
.mcb-new    { background: #0ea5e9; color: #fff; }

/* mc-deal-badge-img — 제거됨 (가격 앞으로 이동) */

/* 텍스트 영역 — 오른쪽 58% */
.lp-mini-body {
  flex: 1;
  min-width: 0;
  padding: 10px 11px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 종류 + 매물번호 행 */
.mc-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 1px;
}

/* 매물종류 태그 */
.lp-mini-type-tag {
  font-size: 11.5px;
  color: #334155;
  font-weight: 700;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

/* 매물번호 — pill 배지 */
.mc-propno {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
  letter-spacing: -0.1px;
}

/* 제목 — 1줄 고정 */
.lp-mini-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.42;
  letter-spacing: -0.3px;
}

/* 가격 행 */
.lp-mini-price-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  margin-top: 1px;
}
.lp-mini-price-row .deal-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  min-width: 34px !important;
  height: 22px !important;
  padding: 0 7px !important;
  margin-right: 2px !important;
  border-radius: 3px !important;
  /* background: 각 deal-badge-* 클래스에서 지정 */
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.3px !important;
}

/* 가격 — 골드브라운 강조 */
.lp-mini-price {
  font-size: 18px;
  font-weight: 900;
  color: #B45309;
  letter-spacing: -0.4px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 주소 */
.lp-mini-addr {
  font-size: 12.5px;
  color: #374151;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.38;
}

/* 면적 — 중요 정보, 진하게 */
.lp-mini-area {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.38;
}

/* 구형 클래스 호환 */
.lp-mini-img-empty { display: none; }
.lp-mini-empty { font-size: 13px; color: #9CA3AF; padding: 12px 0; }

/* ── 하단 전체 매물 섹션 ── */

.lp-all-section { background: #F3F4F6; padding: 24px 0 40px; margin-left: 280px; }

.lp-all-toolbar {

  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap;

  padding: 8px 12px;

  background: #fff;

  border-bottom: 1px solid #E5E7EB;

  flex-shrink: 0;

}

.lp-all-title { margin: 0; font-size: 13px; font-weight: 700; color: #111827; }

.lp-all-grid {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 14px; padding: 0 24px;

}

.lp-all-pgn { border-top: none; background: transparent; margin-top: 20px; }

/* 전체 매물 카드 */

.lp-all-card {

  background: #fff; border: 1px solid #E5E7EB;

  border-radius: 10px; overflow: hidden;

  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;

  display: flex; flex-direction: column;

}

.lp-all-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.1); }

.lp-all-done .lp-all-img img { filter: grayscale(100%); opacity: 0.5; }

.lp-all-img {

  position: relative; aspect-ratio: 4/3;

  background: #E5E7EB; overflow: hidden; flex-shrink: 0;

}

.lp-all-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-all-sold {

  position: absolute; inset: 0;

  background: rgba(153,0,0,0.72);

  display: flex; align-items: center; justify-content: center;

  font-size: 14px; font-weight: 800; color: #fff; letter-spacing: 2px;

}

.lp-all-cat-tag {

  position: absolute; top: 6px; left: 6px;

  background: #0A1F5C; color: #fff;

  font-size: 10px; font-weight: 700;

  padding: 2px 7px; border-radius: 3px;

}

/* ── 추천/고정 프로모션 스티커 (fullCard 이미지 위) ── */
.promo-rec-sticker {
  position: absolute; top: 8px; right: 8px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #1a2340;
  font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transform: rotate(-2deg);
  line-height: 1.4; z-index: 2;
}
.promo-pin-sticker {
  position: absolute; top: 8px; right: 8px;
  background: linear-gradient(135deg, #FF6B35, #D63800);
  color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transform: rotate(-2deg);
  line-height: 1.4; z-index: 2;
}

.lp-all-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }

.lp-all-title {

  font-size: 13px; font-weight: 700; color: #111827;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;

}

.lp-all-price { font-size: 14px; font-weight: 800; color: #F97316; }

.lp-all-area  { font-size: 11px; color: #6B7280; }

.lp-all-addr  { font-size: 11px; color: #6B7280; }

/* 카드 하단 상세페이지 링크 */
.lp-all-detail-link {
  display: block; margin-top: 6px; padding: 6px 0;
  text-align: center; font-size: 12px; font-weight: 700;
  color: #12335a; background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 6px; text-decoration: none; transition: background .15s, color .15s;
}
.lp-all-detail-link:hover { background: #12335a; color: #fff; }

/* 카드 상단 종류+거래유형 뱃지 행 */
.lp-all-row-top { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 2px; }

/* 매물종류 인라인 태그 (카드 body 안) */
.lp-all-type-tag {
  font-size: 10px; font-weight: 700;
  background: #f1f5f9; color: #475569;
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid #e2e8f0; line-height: 1.4;
}

/* lp-all-card 안 면적 영역 래퍼 */
.lp-all-area-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-top: 1px; }

/* lp-all-card 내부 lp-area-lbl 기본 색상 (파란 계열 통일) */
.lp-all-card .lp-area-lbl {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1.5px solid #bae6fd !important;
}
.lp-all-card .lp-area-val { color: #0284c7 !important; }

/* 플로팅 버튼 1.5배 */

.float-btn-lg {

  width: 81px !important; height: 81px !important;

  font-size: 13px !important;

}

/* ── 반응형 ── */

@media (max-width: 768px) {

  .lp-body {

    grid-template-columns: 1fr;

    grid-template-rows: 260px 1fr;

    height: auto;

  }

  .lp-sidebar { display: none; }

  .lp-center { grid-column: 1; grid-row: 1; height: 260px; }

  #map { position: relative; height: 100%; inset: auto; }

  .lp-panel { grid-column: 1; grid-row: 2; height: auto; }

  .lp-panel-2col { grid-template-columns: 1fr; height: 300px; }

  .lp-all-grid { grid-template-columns: repeat(2, 1fr); padding: 0 12px; }

  .lp-all-toolbar { padding: 0 12px 12px; }

  .lp-all-section { margin-left: 0; }

  .top-bar-lg { font-size: 14px !important; }

  .adm-stats-4 { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 480px) {

  .adm-stats-4 { grid-template-columns: 1fr 1fr; }

  .lp-all-grid { grid-template-columns: 1fr; }

}

/* 매물보기 페이지 - 하이탑 상호 아래 메뉴 네이비바 */

body[data-page="listings"] .lp-header-nav {

  width: 100%;

  height: 48px;

  background: #071f5f;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 34px;

  padding: 0 40px;

  box-sizing: border-box;

}

/* 네이비바 안의 메뉴 글자 */

body[data-page="listings"] .lp-header-nav a {

  color: #ffffff;

  text-decoration: none;

  font-size: 15px;

  font-weight: 700;

  line-height: 48px;

  white-space: nowrap;

}

/* 현재 페이지 또는 마우스 올렸을 때 */

body[data-page="listings"] .lp-header-nav a:hover,

body[data-page="listings"] .lp-header-nav a.nav-active {

  color: #ffd24d;

}

/* 매물보기 페이지 상단 흰색 헤더 양끝 정렬 */

body[data-page="listings"] .site-header .container.nav-wrap {

  width: 100%;

  max-width: none;

  height: 72px;

  margin: 0;

  padding: 0 40px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  box-sizing: border-box;

}

/* 로고는 왼쪽으로 */

body[data-page="listings"] .site-header .brand {

  display: flex;

  align-items: center;

  margin: 0;

}

/* 로고 크기 */

body[data-page="listings"] .site-header .brand-logo {

  height: 36px;

  display: block;

}

/* 평일시간 + 전화번호는 오른쪽으로 */

body[data-page="listings"] .site-header .lp-header-info {

  margin-left: auto;

  display: flex;

  align-items: center;

  gap: 14px;

  font-size: 16px;

  font-weight: 700;

  color: #111827;

}

/* 전화번호 색상 */

body[data-page="listings"] .site-header .lp-header-phone {

  color: #003b8f;

  text-decoration: none;

  font-size: 18px;

  font-weight: 800;

}

/* 매물보기 페이지 - 왼쪽 사이드바 카드형 디자인 */

body[data-page="listings"] .lp-sidebar {

  width: 280px;

  height: auto;

  background: #f6f7fb;

  border-right: 1px solid #e5e7eb;

  padding: 18px 14px;

  box-sizing: border-box;

  overflow-y: visible;

  align-self: stretch;

}

/* 사이드바 섹션을 카드처럼 */

body[data-page="listings"] .lp-sidebar-section {

  background: #ffffff;

  border: 1px solid #cbd5e1;

  border-radius: 0px;

  overflow: hidden;

  margin-bottom: 14px;

  box-shadow: none;

}

/* 카드 상단 제목 */

body[data-page="listings"] .lp-sidebar-header {

  height: 42px;

  line-height: 42px;

  padding: 0 18px;

  background: #071f5f;

  color: #ffffff;

  font-size: 15px;

  font-weight: 800;

  text-align: center;

  box-sizing: border-box;

}

/* 카테고리 항목 */

body[data-page="listings"] .lp-cat-item {

  height: 42px;

  padding: 0 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: #1e293b;   /* 더 진하게 */

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;  /* 500 → 600 */

  letter-spacing: -0.1px;

  border-bottom: 1px solid #edf0f4;

  background: #ffffff;

  box-sizing: border-box;

}

/* 마지막 줄 border 제거 */

body[data-page="listings"] .lp-cat-item:last-child {

  border-bottom: 0;

}

/* 카테고리 오른쪽 숫자를 화살표처럼 정리 */

body[data-page="listings"] .lp-cat-count {

  color: transparent;

  font-size: 0;

  width: 18px;

  height: 18px;

  position: relative;

}

/* 오른쪽 화살표 */

body[data-page="listings"] .lp-cat-count::after {

  content: "›";

  position: absolute;

  right: 0;

  top: -2px;

  color: #9ca3af;

  font-size: 26px;

  font-weight: 300;

  line-height: 18px;

}

/* 메뉴 hover */

body[data-page="listings"] .lp-cat-item:hover {

  background: #f8f5ed;

  color: #071f5f;

}

/* 선택된 메뉴 */

body[data-page="listings"] .lp-cat-item.active {

  background: #f8f1df;

  color: #071f5f;

  font-weight: 800;

  border-left-color: #c9a84c;

}

/* 전화문의 영역 */

body[data-page="listings"] .lp-contact-inner {

  padding: 18px 16px;

  text-align: center;

  box-sizing: border-box;

}

body[data-page="listings"] .lp-phone-big {

  display: block;

  color: #ff5a00;

  font-size: 24px;

  font-weight: 900;

  text-decoration: none;

  margin-bottom: 6px;

}

body[data-page="listings"] .lp-hours-small {

  margin: 0 0 12px;

  font-size: 12px;

  color: #8b95a7;

}

/* 카카오 오픈채팅 버튼 — 카카오 노란/골드, 진한 글자 */

body[data-page="listings"] .lp-kakao-btn,

.lp-kakao-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  width: 100%;

  min-height: 42px;

  padding: 0 12px;

  background: #FEE500;   /* 카카오 공식 노란색 */

  color: #191919;        /* 카카오 공식 진한 글자 */

  border-radius: 8px;

  text-align: center;

  font-size: 15px;

  font-weight: 800;

  line-height: 1;

  text-decoration: none;

  box-sizing: border-box;

  transition: background 0.12s, color 0.12s;

}

body[data-page="listings"] .lp-kakao-btn:hover,

.lp-kakao-btn:hover {

  background: #f0d800;

  color: #191919;

}

/* 빠른문의 폼 */

body[data-page="listings"] .lp-inquiry-form {

  padding: 14px 14px 16px;

  box-sizing: border-box;

}

body[data-page="listings"] .lp-inquiry-form input,

body[data-page="listings"] .lp-inquiry-form textarea {

  width: 100%;

  margin-bottom: 9px;

  padding: 10px 11px;

  border: 1px solid #d9dee8;

  border-radius: 8px;

  font-size: 13px;

  box-sizing: border-box;

  outline: none;

}

body[data-page="listings"] .lp-inquiry-form input:focus,

body[data-page="listings"] .lp-inquiry-form textarea:focus {

  border-color: #071f5f;

  box-shadow: 0 0 0 3px rgba(7, 31, 95, 0.12);

}

/* 상담문의 버튼 */

body[data-page="listings"] .lp-inquiry-submit {

  width: 100%;

  height: 40px;

  border: 0;

  border-radius: 8px;

  background: #071f5f;

  color: #ffffff;

  font-size: 14px;

  font-weight: 800;

  cursor: pointer;

}

body[data-page="listings"] .lp-inquiry-submit:hover {

  background: #0b2d80;

}

/* 헤더 가운데 검색창 */

body[data-page="listings"] .lp-header-search {

  flex: 1;

  min-width: 0;

  max-width: 600px;

  margin: 0 0 0 auto;

  display: flex;

  align-items: center;

  gap: 5px;

  overflow: visible;

}

body[data-page="listings"] .lp-header-search input {

  flex: 1;

  min-width: 80px;

  height: 34px;

  padding: 0 10px;

  border: 1px solid #d8dee8;

  border-radius: 7px;

  font-size: 12px;

  box-sizing: border-box;

}

body[data-page="listings"] .lp-header-search select {

  flex-shrink: 0;

  width: 88px;

  height: 34px;

  border: 1px solid #d8dee8;

  border-radius: 7px;

  padding: 0 4px;

  font-size: 12px;

  background: #ffffff;

  box-sizing: border-box;

}

body[data-page="listings"] .lp-header-search .lp-search-submit {

  flex-shrink: 0;

  width: 50px;

  height: 34px;

  border: 0;

  border-radius: 7px;

  background: #071f5f;

  color: #ffffff;

  font-size: 12px;

  font-weight: 800;

  cursor: pointer;

}

body[data-page="listings"] .lp-header-search .lp-search-reset {

  flex-shrink: 0;

  width: 46px;

  height: 34px;

  border: 0;

  background: transparent;

  color: #8b95a7;

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

}

/* 매물보기 상단 헤더 3단 정렬 복구 */

body[data-page="listings"] .site-header {

  background: #ffffff;

  position: relative;

  z-index: 50;

}

/* 흰색 헤더: 로고 / 메뉴 / 검색창 */

body[data-page="listings"] .site-header .container.nav-wrap {

  width: 100%;

  max-width: none;

  height: 78px;

  margin: 0;

  padding: 0 36px;

  display: grid;

  grid-template-columns: auto auto 1fr;

  align-items: center;

  gap: 16px;

  box-sizing: border-box;

  background: #ffffff;

}

/* 로고 */

body[data-page="listings"] .site-header .brand {

  display: flex;

  align-items: center;

  justify-content: flex-start;

}

body[data-page="listings"] .site-header .brand-logo {

  height: 36px;

  display: block;

}

/* 오른쪽 영업시간 + 전화번호 */

body[data-page="listings"] .site-header .lp-header-info {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 14px;

  white-space: nowrap;

  font-size: 16px;

  font-weight: 700;

  color: #111827;

}

body[data-page="listings"] .site-header .lp-header-phone {

  color: #003b8f;

  text-decoration: none;

  font-size: 18px;

  font-weight: 900;

}

/* ══════════════════════════════════════

   매물 카테고리 카드 섹션 (listings.html)

   ══════════════════════════════════════ */

.cat-cards-section {

  background: #0A1F5C;

  padding: 14px 36px;

  flex-shrink: 0;

  margin-left: 280px;

}

.cat-cards-grid {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 10px;

}

.cat-card {

  position: relative;

  height: 160px;

  border-radius: 10px;

  overflow: hidden;

  text-decoration: none;

  display: block;

  cursor: pointer;

  transition: box-shadow 0.22s;

}

.cat-card:hover {

  box-shadow: 0 0 0 3px #C9A84C;

}

.cat-card-img {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  transition: transform 0.35s ease;

}

.cat-card:hover .cat-card-img {

  transform: scale(1.08);

}

.cat-card-overlay {

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,0.45);

}

.cat-card-body {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 14px 16px;

}

.cat-card-name {

  font-family: "Pretendard", "Noto Sans KR", sans-serif;

  font-size: 17px;

  font-weight: 800;

  color: #fff;

  line-height: 1.3;

}

.cat-card-more {

  font-family: "Pretendard", "Noto Sans KR", sans-serif;

  font-size: 12px;

  color: #C9A84C;

  font-weight: 600;

  margin-top: 5px;

}

/* 태블릿: 3열 */

@media (max-width: 1024px) {

  .cat-cards-grid {

    grid-template-columns: repeat(3, 1fr);

  }

  .cat-cards-section {

    padding: 14px 20px;

  }

}

/* 모바일: 2열 */

@media (max-width: 768px) {

  .cat-cards-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  .cat-cards-section {

    padding: 12px 16px;

    margin-left: 0;

  }

  .cat-card {

    height: 130px;

  }

  .cat-card-name {

    font-size: 15px;

  }

}

/* ══════════════════════════════════════

   listings.html 푸터 위치 고정

   카드섹션 아래 맨 마지막, 전체 너비

   ══════════════════════════════════════ */

/* listings.html 전용 푸터 스타일 보강 및 static 정적 배치 (밀착형) */

.lp-footer {

  background: #1f2937;

  color: #f9fafb;

  font-size: 13px;

  text-align: center;

  padding: 18px 20px;

  position: static !important;

  margin-top: 4px !important; /* 카드바와 푸터 사이에 틈이 안 생기도록 타이트하게 조절 */

  clear: both;

}

.lp-footer-inner {

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 4px;

}

.lp-footer-links {

  margin-top: 4px;

}

.lp-footer-links a {

  color: #ffffff;

  text-decoration: none;

  font-weight: 700;

  margin: 0 6px;

}

.lp-footer-links a:hover {

  text-decoration: underline;

}

.lp-footer-copy {

  margin: 0;

  color: #d1d5db;

}

/* ══════════════════════════════════════

   listings.html 100vh 풀스크린 레이아웃 패치 (2행 그리드 통합 배치)

   ══════════════════════════════════════ */

body[data-page="listings"] {

  height: 100vh !important;

  max-height: 100vh !important;

  overflow: hidden !important;

  display: flex !important;

  flex-direction: column !important;

  margin: 0 !important;

  padding: 0 !important;

}

/* 상단 영역 flex-shrink 방지 */

body[data-page="listings"] .top-bar {

  flex-shrink: 0 !important;

}

body[data-page="listings"] .site-header {

  flex-shrink: 0 !important;

}

body[data-page="listings"] .lp-header-nav {

  flex-shrink: 0 !important;

}

/* 3단 그리드 바디가 100vh 중 남은 높이를 꽉 채우며, 2행 그리드 구조를 형성하도록 설정 */

body[data-page="listings"] .lp-body {

  flex: 1 !important;

  min-height: 0 !important;

  height: auto !important;

  display: grid !important;

  grid-template-columns: 260px minmax(0, 1fr) 820px !important;

  grid-template-rows: 1fr auto !important; /* 1행: 지도/추천패널, 2행: 매물 카테고리 카드바 */

}

/* ── 왼쪽 사이드바 (그리드 1열 전체, 1~2행 관통) ── */

body[data-page="listings"] .lp-sidebar {

  grid-column: 1 !important;

  grid-row: 1 / 3 !important; /* 1행부터 2행 끝까지 전체를 스팬하여 세로 폭 100% 온전히 활용! */

  display: flex !important;

  flex-direction: column !important;

  gap: 5px !important; /* 박스 사이 간격 추가 압축 */

  padding: 6px 10px !important; /* 사이드바 상하 여백 압축 */

  overflow-y: auto !important; /* 오버플로우 방지용 안전 스크롤 */

  border-right: 1px solid #E5E7EB !important;

  height: 100% !important;

  background: #ffffff !important; /* 100% 흰색 기둥 보장 */

}

/* 사이드바 섹션을 카드처럼 */

body[data-page="listings"] .lp-sidebar-section {

  margin-bottom: 8px !important; /* 14px에서 8px로 축소 */

}

/* 카드 상단 제목 */

body[data-page="listings"] .lp-sidebar-header {

  height: 34px !important; /* 42px에서 34px로 축소 */

  line-height: 34px !important;

  font-size: 14px !important; /* 15px에서 미세조정 */

}

/* 카테고리 항목 */

body[data-page="listings"] .lp-cat-item {

  height: 32px !important; /* 42px에서 32px로 70px 대폭 절약 */

  font-size: 13px !important; /* 14px에서 미세조정 */

}

/* 전화문의 영역 — 상하 패딩 압축으로 박스 높이 절감 */

body[data-page="listings"] .lp-contact-inner {

  padding: 8px 14px !important; /* 12px → 8px */

  gap: 5px !important;           /* flex gap 축소 */

}

body[data-page="listings"] .phone-inquiry-box {

  background: #ffffff !important;

  border: 1px solid #cbd5e1 !important;

  border-radius: 0px !important;

  box-shadow: none !important;

}

body[data-page="listings"] .side-call-header {

  display: flex !important;

  align-items: baseline !important;

  justify-content: center !important;

  margin-bottom: 4px !important; /* 6px → 4px */

}

body[data-page="listings"] .side-call-header .call-title {

  font-family: "Pretendard", "Noto Sans KR", sans-serif;

  font-size: 14px !important; /* 15px → 14px */

  font-weight: 800 !important;

  color: #071f5f !important;

}

body[data-page="listings"] .side-call-header .call-subtitle {

  font-family: "Pretendard", "Noto Sans KR", sans-serif;

  font-size: 11px !important;

  font-weight: 400 !important;

  color: #94a3b8 !important;

  margin-left: 6px !important;

}

body[data-page="listings"] .lp-phone-big {

  display: block !important;

  text-align: center !important;

  color: #071f5f !important;

  font-size: 22px !important; /* 26px → 22px */

  font-weight: 900 !important;

  text-decoration: none !important;

  margin: 3px 0 !important; /* 6px → 3px */

  letter-spacing: -0.5px !important;

  line-height: 1.2 !important;

}

body[data-page="listings"] .call-divider {

  width: 80% !important;

  height: 1px !important;

  background-color: #cbd5e1 !important;

  margin: 4px auto !important; /* 8px → 4px */

}

body[data-page="listings"] .lp-hours-small {

  margin: 0 0 6px 0 !important; /* 10px → 6px */

  font-size: 11px !important;   /* 12px → 11px */

  color: #64748b !important;

  font-weight: 600 !important;

  text-align: center !important;

}

/* 카카오 버튼 — listings 페이지 override */

body[data-page="listings"] .lp-kakao-btn {

  border-radius: 0px !important;

  min-height: 42px !important;

  padding: 0 10px !important;

  font-size: 15px !important;

  background: #FEE500 !important;

  color: #191919 !important;

}

body[data-page="listings"] .lp-kakao-btn:hover {

  background: #f0d800 !important;

  color: #191919 !important;

}

/* ── 상담신청 박스 — 흰 배경 카드, 버튼형 ── */

body[data-page="listings"] .side-consult-link-box {

  flex-shrink: 0 !important;

  flex-grow: 1 !important;   /* 사이드바 남은 공간 채우기 */

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 8px !important;

  padding: 12px 12px 10px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 8px !important;

  box-shadow: 0 1px 4px rgba(7,31,95,0.06) !important;

}

/* 안내 문구 */

body[data-page="listings"] .side-consult-desc {
  font-size: 12.5px !important;
  color: #374151 !important;
  text-align: center !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

body[data-page="listings"] .side-consult-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 12px !important;
  background: #D97757 !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  text-align: center !important;
  text-decoration: none !important;
  border-radius: 7px !important;
  letter-spacing: 0.2px !important;
  transition: background 0.15s !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

body[data-page="listings"] .side-consult-btn:hover {
  background: #C96549 !important;
  color: #ffffff !important;
}

body[data-page="listings"] .side-visitor-counter {
  width: 100% !important;
  padding: 10px 11px !important;
  background: linear-gradient(135deg, #071f5f 0%, #0b2b78 100%) !important;
  border: 1px solid rgba(201, 168, 76, 0.55) !important;
  border-radius: 7px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
  box-sizing: border-box !important;
}

body[data-page="listings"] .side-visitor-counter .visitor-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 21px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body[data-page="listings"] .side-visitor-counter .visitor-row + .visitor-row {
  margin-top: 4px !important;
  padding-top: 5px !important;
  border-top: 1px solid rgba(255,255,255,0.16) !important;
}

body[data-page="listings"] .side-visitor-counter .visitor-label {
  color: rgba(255,255,255,0.86) !important;
  font-weight: 500 !important;
}

body[data-page="listings"] .side-visitor-counter .visitor-value {
  color: #f4d47a !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

body[data-page="listings"] .side-visitor-counter .visitor-value strong {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin-right: 1px !important;
}

body[data-page="listings"] .side-visitor-counter.is-loading .visitor-value {
  opacity: 0.75 !important;
}

body[data-page="listings"] .side-visitor-counter.is-error {
  border-color: rgba(255,255,255,0.32) !important;
}

body[data-page="listings"] .side-consult-note {
  font-size: 11.5px !important;
  color: #6b7280 !important;
  text-align: center !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

body[data-page="listings"] .side-consult-subnote {
  font-size: 11px !important;
  color: #9ca3af !important;
  text-align: center !important;
  margin: 0 !important;
  line-height: 1.55 !important;
  letter-spacing: -0.1px !important;
}

/* ── 가운데 지도 영역 (그리드 2열 1행) ── */

body[data-page="listings"] .lp-center {

  grid-column: 2 !important;

  grid-row: 1 !important;

  height: 100% !important;

  display: flex !important;

  flex-direction: column !important;

  position: relative !important;

}

body[data-page="listings"] #map {

  flex: 1 !important;

  height: 100% !important;

}

/* ── 오른쪽 추천/최신 패널 (그리드 3열 1~2행 전체 관통) ── */

body[data-page="listings"] .lp-panel {

  grid-column: 3 !important;

  grid-row: 1 / 3 !important; /* 1행부터 2행 끝까지 전체를 차지하여 침범 완전 방지! */

  display: flex !important;

  flex-direction: column !important;

  background: #F3F4F6 !important;

  overflow: hidden !important; /* 전체 패널 스크롤 차단, 내부 카드 리스트만 독립 스크롤 */

  overflow-x: hidden !important; /* 가로 스크롤 방지 */

  box-sizing: border-box !important;

}

/* ── 하단 매물 카테고리 카드바 (그리드 2열 2행 단독 배치) ── */

/* 좌측 사이드바 및 우측 추천 패널 아래 공간을 전혀 침범하지 않고 오직 가운데 지도 영역의 아래에만 정확하게 정렬! */

body[data-page="listings"] .cat-cards-section {

  grid-column: 2 !important; /* 오직 2열(지도 아래)에만 단독 배치! */

  grid-row: 2 !important; /* 2행에 위치 */

  margin-left: 0 !important; /* margin-left 상속 초기화 (핵심 버그 픽스) */

  margin-right: 0 !important;

  margin-bottom: 0 !important;

  padding: 6px 12px 8px !important; /* 세로 콤팩트 여백 */

  background: #F3F4F6 !important;

  border-top: 1px solid #E5E7EB !important;

  flex-shrink: 0 !important;

  width: 100% !important; /* 100% 가득 채워 지도 너비와 일치 */

  box-sizing: border-box !important;

}

/* 6개 카드 가로 1줄 정렬 (PC) */

body[data-page="listings"] .cat-cards-grid {

  display: grid !important;

  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;

  gap: 6px !important;

}

body[data-page="listings"] .cat-card {

  height: 110px !important;

  min-width: 0 !important; /* 자동 수축 허용 */

}

body[data-page="listings"] .cat-card-name {

  font-size: 14px !important;

  font-weight: 800 !important;

  line-height: 1.3 !important;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.5) !important;

}

/* 카드 두 번째 줄 (아파트·오피스텔 등) */
body[data-page="listings"] .cat-card-sub {

  display: block !important;

  font-size: 11px !important;

  font-weight: 600 !important;

  opacity: 0.9 !important;

  margin-top: 1px !important;

}

body[data-page="listings"] .cat-card-more {

  font-size: 12px !important;

  font-weight: 600 !important;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;

}

body[data-page="listings"] .cat-card-body {

  padding: 6px 8px !important;

}

/* 불필요한 하단 전체 매물 스크롤 리스트 은닉 (100vh 조건 완수) */

body[data-page="listings"] #allListingsSection {

  display: none !important;

}

/* listings.html 전용 푸터 스타일 - 여유롭고 프리미엄한 회사정보바 */

body[data-page="listings"] .site-footer {

  background-color: #071f5f !important; /* 딥 네이비 계열 유지 */

  color: #cbd5e1 !important;

  font-size: 13.5px !important; /* 기본 글자 크기 13px~14px */

  text-align: center !important;

  padding: 18px 24px !important; /* 높이와 여백 자연스럽게 정리 */

  position: static !important;

  margin-top: 0 !important; /* 틈새 완벽 방지를 위해 마진탑 0px 적용 */

  clear: both !important;

  flex-shrink: 0 !important; /* 찌그러짐 방지 */

  border-top: 1px solid rgba(255, 255, 255, 0.15) !important; /* 얇은 경계선 */

}

body[data-page="listings"] .footer-inner {

  max-width: 1200px !important;

  margin: 0 auto !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  gap: 6px !important; /* 줄 간격 자연스럽게 정리 */

}

body[data-page="listings"] .footer-main,

body[data-page="listings"] .footer-sub {

  margin: 0 !important;

  line-height: 1.7 !important; /* 줄 간격 자연스럽게 정리 */

}

body[data-page="listings"] .footer-main strong {

  color: #ffffff !important;

  font-size: 14.5px !important; /* 회사명 조금 더 크게 */

  font-weight: 800 !important; /* 회사명은 조금 더 굵게 */

  margin-right: 8px !important;

}

body[data-page="listings"] .footer-main span,

body[data-page="listings"] .footer-sub span {

  display: inline-block !important;

  margin: 0 4px !important;

  color: #cbd5e1 !important; /* 흰색/연회색 계열 유지 */

  font-size: 13px !important; /* 기본 글자 크기 13px~14px */

}

/* ══════════════════════════════════════

   오른쪽: 주요 추천 매물 패널 & 좌우 2컬럼 디자인

   ══════════════════════════════════════ */

body[data-page="listings"] .lp-panel {

  display: flex !important;

  flex-direction: column !important;

  background: #ffffff !important; /* 내부 흰색 톤으로 정리 */

  border-left: 1px solid #E5E7EB !important;

  overflow: hidden !important; /* 내부 스크롤 컨테이너만 스크롤 허용 */

  overflow-x: hidden !important; /* 가로 스크롤 방지 */

  box-sizing: border-box !important;

}

body[data-page="listings"] .lp-panel-hd {

  height: 48px !important;

  line-height: 48px !important;

  padding: 0 18px !important;

  border-bottom: 1px solid #E5E7EB !important;

  background: #fcfcfd !important;

  display: flex !important;

  align-items: center !important;

  justify-content: flex-start !important;

  flex-shrink: 0 !important;

}

/* lp-panel-scroll-content는 더 이상 사용하지 않으므로 숨김 처리 대신 유지용 빈 규칙 */

body[data-page="listings"] .lp-panel-scroll-content {

  /* 이 래퍼는 제거됨 - 하위호환성 용도로만 존재 */

  display: contents;

}

/* 좌우 2컬럼 레이아웃 - 패널 전체 높이 채움 */

.lp-rec-2col-layout {

  display: grid !important;

  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; /* 좌우 50% 균등 분할 및 유연한 축소 */

  gap: 0 !important;  /* 컬럼 사이 구분선으로 대체 */

  flex: 1 !important;

  min-height: 0 !important; /* flex 자식 높이 축소 허용 */

  min-width: 0 !important;

  box-sizing: border-box !important;

  overflow: hidden !important;

}

/* 각 컬럼 영역 - 제목 고정 + 카드 스크롤 */

.lp-rec-column {

  display: flex;

  flex-direction: column;

  min-height: 0; /* flex 자식 높이 축소 허용 */

  min-width: 0 !important;

  box-sizing: border-box !important;

  border-right: 1px solid #E5E7EB; /* 컬럼 구분선 */

}

.lp-rec-column:last-child {

  border-right: none;

}

/* 고정 제목바 래퍼 */

.lp-rec-col-header {

  flex-shrink: 0; /* 제목바 높이 고정, 찌그러짐 방지 */

  background: #ffffff; /* 카드가 지나갈 때 겹침 방지 흰 배경 */

  z-index: 10;

  padding: 10px 12px 8px;

  border-bottom: 2px solid #071f5f;

}

/* 컬럼 제목 */

.lp-rec-col-title {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  font-family: "Pretendard", "Noto Sans KR", sans-serif;

  font-size: 16px !important; /* 글자 크기 확대 */

  font-weight: 800 !important; /* 더 굵게 */

  color: #071f5f !important; /* 딥 네이비 시그니처 */

  margin: 0;

  padding: 0;

  border-bottom: none; /* border는 부모 lp-rec-col-header로 이동 */

  letter-spacing: -0.4px;

}

/* 매물 더보기 버튼 */

.lp-rec-more-btn {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 13px !important; /* 글자 크기 13px */

  font-weight: 700 !important;

  color: #ffffff !important;

  background-color: #071f5f !important; /* 네이비 기본 */

  padding: 4px 10px !important;

  border-radius: 4px !important;

  text-decoration: none !important;

  transition: background-color 0.15s ease, transform 0.15s ease !important;

  line-height: 1 !important;

  letter-spacing: -0.3px;

}

.lp-rec-more-btn:hover {

  background-color: #C9A84C !important; /* 골드로 마우스오버 하이라이트 */

  color: #111827 !important;

  transform: translateY(-1px) !important;

}

/* 카드 세로 리스트 - 독립 스크롤 영역 */

.lp-rec-card-list {

  display: flex;

  flex-direction: column;

  gap: 8px !important; /* 5개 노출용 카드 간격 축소 */

  flex: 1; /* 남은 컬럼 높이 전체 차지 */

  min-height: 0; /* flex 자식 높이 축소 허용 */

  overflow-y: auto; /* 카드 목록만 스크롤 */

  padding: 10px 12px 12px;

  box-sizing: border-box;

  scrollbar-width: thin;

  scrollbar-color: #cbd5e1 transparent;

}

.lp-rec-card-list::-webkit-scrollbar {

  width: 4px;

}

.lp-rec-card-list::-webkit-scrollbar-thumb {

  background: #cbd5e1;

  border-radius: 2px;

}

.lp-rec-card-list::-webkit-scrollbar-track {

  background: transparent;

}


/* 추천 매물 카드 - 프리미엄 가로형 리스트 카드 */

.lp-rec-card {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-bottom: 2px solid #dde4ed;

  border-radius: 8px;

  overflow: hidden;

  display: flex !important;

  flex-direction: row !important; /* 가로형 리스트 카드로 변경! */

  transition: background 0.15s, transform 0.15s, box-shadow 0.15s, border-color 0.15s;

  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);

  flex: 1 1 auto !important; /* 5개 카드가 패널 높이에 맞춰 균형있게 신축 */

  height: auto !important;

  min-height: 108px !important;

  max-height: 122px !important;

  min-width: 0 !important;

  box-sizing: border-box !important;

  width: 100% !important;

}

.lp-rec-card:hover {

  background: #f8fafc !important;

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);

  border-color: #cbd5e1;

}

.lp-rec-card:hover .lp-rec-img {

  transform: scale(1.05);

}

/* 공장/창고 카드 테마 (티얼-네이비 상단 라인 포인트) */

.lp-rec-card.factory-card {

  border-top: 3px solid #0f766e !important;

}

.lp-rec-card.factory-card .lp-rec-ribbon {

  background: #0f766e !important; /* 티얼 */

  color: #ffffff !important;

}

.lp-rec-card.factory-card:nth-child(even) .lp-rec-ribbon {

  background: #0369a1 !important; /* 블루 */

  color: #ffffff !important;

}

/* 상가/빌딩 카드 테마 (버건디-퍼플 상단 라인 포인트) */

.lp-rec-card.store-card {

  border-top: 3px solid #be123c !important;

}

.lp-rec-card.store-card .lp-rec-ribbon {

  background: #be123c !important; /* 버건디 */

  color: #ffffff !important;

}

.lp-rec-card.store-card:nth-child(even) .lp-rec-ribbon {

  background: #7c3aed !important; /* 퍼플 */

  color: #ffffff !important;

}

/* 왼쪽 이미지 영역 - 고정 140px 폭 */

.lp-rec-img-wrap {

  position: relative !important;

  width: 140px !important;

  min-width: 140px !important;

  height: 100% !important;

  flex-shrink: 0 !important;

  overflow: hidden !important;

}

.lp-rec-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.2s ease;

}

/* 작고 이쁜 리본 배지 (가로형 리스트 맞춤 설계) */

.lp-rec-ribbon {

  position: absolute;

  top: 4px !important;

  left: 4px !important; /* 좌상단 배치로 변경하여 시각적 간섭 최소화 */

  right: auto !important;

  font-family: "Pretendard", "Noto Sans KR", sans-serif;

  font-size: 10px !important; /* 콤팩트한 10px 크기 */

  font-weight: 800;

  padding: 2px 5px !important;

  border-radius: 4px;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);

  border: 1px solid rgba(255, 255, 255, 0.15);

  line-height: 1;

  z-index: 5;

}

/* 오른쪽 텍스트 영역 (카드 폭의 약 65% 차지) */



.lp-rec-body {

  padding: 7px 10px 6px !important; /* 5행 완벽 맞춤 프리미엄 패딩 */

  display: flex !important;

  flex-direction: column !important;

  justify-content: space-between !important; /* 5개 행 세로 자동 분산 정렬 */

  gap: 2px !important; /* 5행 콤팩트 행간 */

  height: 100% !important;

  flex: 1 !important;

  min-width: 0 !important;

  box-sizing: border-box !important;

}

/* 개별 가로 행 스타일 */

.lp-rec-row {

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  width: 100% !important;

  box-sizing: border-box !important;

  min-width: 0 !important;

  overflow: hidden !important;

}

/* 첫째 줄: 매물종류 + 거래유형 배지 */

.lp-rec-row-top {

  justify-content: flex-start !important;

  gap: 6px !important;

}

/* 둘째 줄: 가격 단독 표시 행 */

.lp-rec-row-price {

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  justify-content: flex-start !important;

  width: 100% !important;

  min-width: 0 !important;

  overflow: hidden !important;

}

/* 셋째 줄: 핵심 설명 문장 */

.lp-rec-row-mid {

  font-size: 13px !important; /* 가독성 위해 약간 확대 */

  font-weight: 700 !important;

  color: #1e293b !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  line-height: 1.2 !important;

}

/* 넷째 줄: 전용면적 강조 행 */

.lp-rec-row-area {

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  width: 100% !important;

  box-sizing: border-box !important;

  min-width: 0 !important;

  overflow: hidden !important;

  font-size: 12px !important;

  line-height: 1.2 !important;

  white-space: nowrap !important;

  color: #334155 !important;

}

.lp-area-highlight {

  display: inline-flex !important;

  align-items: center !important;

  gap: 3px !important;

  margin-right: 5px !important;

}

/* "전용" / "창고" / "건물" 라벨 */

.lp-area-lbl {

  font-size: 9.5px !important;

  font-weight: 850 !important;

  padding: 1px 4px !important;

  border-radius: 3px !important;

  line-height: 1.1 !important;

  display: inline-block !important;

  letter-spacing: -0.3px !important;

}

/* 공장/창고 라벨 색상 (네이비/블루 톤) */

.factory-card .lp-area-lbl {

  background-color: #e0f2fe !important;

  color: #0369a1 !important;

  border: 1.5px solid #bae6fd !important;

}

/* 상가/빌딩 라벨 색상 (버건디/로즈 톤) */

.store-card .lp-area-lbl {

  background-color: #ffe4e6 !important;

  color: #be123c !important;

  border: 1.5px solid #fecdd3 !important;

}

/* 면적 숫자 강조 */

.lp-area-val {

  font-size: 12px !important;

  font-weight: 800 !important;

  letter-spacing: -0.2px !important;

}

.factory-card .lp-area-val {

  color: #0284c7 !important; /* 블루 계열 */

}

.store-card .lp-area-val {

  color: #be123c !important; /* 버건디 계열 */
}

/* 부가 면적 정보 */

.lp-area-extra {

  font-size: 11px !important;

  color: #64748b !important;

  font-weight: 500 !important;

}

/* 다섯째 줄: 주소/지역 */

.lp-rec-row-bot {

  font-size: 12px !important; /* 5줄 맞춤 가독성 보장 */

  font-weight: 600 !important;

  color: #64748b !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  line-height: 1.2 !important;

}

/* 매물 종류 */

.lp-rec-type {

  font-size: 14px !important; /* 5줄 맞춤 콤팩트화 */

  font-weight: 800 !important;

  line-height: 1;

  white-space: nowrap !important;

  letter-spacing: -0.5px !important;

  flex-shrink: 0 !important;

}

.type-factory {

  color: #0e7490 !important; /* 티얼 계열 */

}

.type-store {

  color: #be123c !important; /* 버건디 계열 */

}

/* 거래 유형 배지 스타일 */

.lp-badge-deal {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  min-width: 30px !important;

  height: 18px !important;

  padding: 1px 4px !important;

  border-radius: 4px !important;

  white-space: nowrap !important;

  line-height: 1 !important;

  font-size: 11px !important; /* 가로형 맞춤 콤팩트 크기 */

  font-weight: 800 !important;

  flex-shrink: 0 !important;

}

/* 테마별 배지 색상 */

.lp-badge-factory-rent {

  background-color: #e0f2fe !important;

  color: #0369a1 !important;

}

.lp-badge-factory-sale {

  background-color: #fef3c7 !important;

  color: #d97706 !important;

}

.lp-badge-store-rent {

  background-color: #fae8ff !important;

  color: #a21caf !important;

}

.lp-badge-store-sale {

  background-color: #ffe4e6 !important;

  color: #be123c !important;

}

/* 가격 정보 (가장 굵고 잘 보이게 16px 단독 배치 강조) */

.lp-rec-price {

  font-family: "Pretendard", "Noto Sans KR", sans-serif;

  font-size: 17px !important; /* 카드 가격 강조 확대 */

  font-weight: 900 !important; /* 가장 굵게 900 적용 */

  color: #0f172a !important;

  line-height: 1.1 !important;

  white-space: nowrap !important;

  letter-spacing: -0.4px !important; /* 자간 normal 수준 확보 */

  margin-left: 0 !important; /* 왼쪽 정렬로 복구 */

  flex-shrink: 0 !important;

}



/* ── listings.html 전용 초슬림 세련된 탑바 스타일 ── */

body[data-page="listings"] .top-bar {

  padding: 4px 0 !important; /* 높이 슬림화 */

  background-color: #071f5f !important; /* 네이비 시그니처 유지 */

  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

}

body[data-page="listings"] .top-bar .container {

  display: flex !important;

  justify-content: flex-end !important; /* 오른쪽 정렬 */

  align-items: center !important;

  gap: 15px !important;

}

body[data-page="listings"] .top-bar-hours {

  font-size: 11.5px !important;

  color: #cbd5e1 !important; /* 세련되고 연한 그레이 */

  font-weight: 500 !important;

  letter-spacing: -0.2px !important;

}

body[data-page="listings"] .top-bar-phone {

  font-size: 11.5px !important;

  font-weight: 700 !important;

  color: #C9A84C !important; /* 골드 계열 포인트 */

  letter-spacing: -0.1px !important;

  transition: color 0.15s ease !important;

}

body[data-page="listings"] .top-bar-phone:hover {

  color: #f97316 !important; /* 마우스오버 시 주황색 포인트 */

}

/* ── 하단 카테고리 카드 액티브(Active) 스타일 ── */
body[data-page="listings"] .cat-card.active {
  border: 3px solid #C9A84C !important; /* 하이탑 골드 시그니처 테두리 */
  box-shadow: 0 0 15px rgba(201, 168, 76, 0.4) !important;
  transform: translateY(-4px) !important;
}

body[data-page="listings"] .cat-card.active .cat-card-overlay {
  background: rgba(7, 31, 95, 0.45) !important; /* 딥 네이비 오버레이로 변경 */
}

/* ── 카테고리 전체 매물 뷰 스타일 ── */
/* ══════════════════════════════════════
   카테고리 전체보기 패널 — 오른쪽 패널 내부 전용 스크롤 구조
   ══════════════════════════════════════ */

/* 전체보기 뷰 래퍼: lpPanel 내 flex 전체 채움 */
.lp-cat-view {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;          /* 패널 남은 높이 전체 차지 */
  min-height: 0 !important;    /* flex child 높이 축소 허용 (필수) */
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important; /* 내부 스크롤 외 누수 방지 */
}

/* 고정 헤더 영역: 제목 + 돌아가기 버튼 */
.lp-cat-view-header {
  flex-shrink: 0 !important;   /* 고정: 절대 찌그러지지 않음 */
  background: #ffffff !important;
  z-index: 10 !important;
  padding: 10px 14px 10px !important;
  border-bottom: 2px solid #C9A84C !important; /* 골드 시그니처 경계선 */
  box-sizing: border-box !important;
}

.lp-cat-view-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  font-family: "Pretendard", "Noto Sans KR", sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #071f5f !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.4px !important;
  gap: 8px !important;
}

/* 추천매물 보기로 돌아가기 버튼 */
.lp-cat-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background-color: #071f5f !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
}

.lp-cat-back-btn:hover {
  background-color: #C9A84C !important;
  color: #111827 !important;
  transform: translateY(-1px) !important;
}

/* ── 핵심: 유일한 스크롤 컨테이너 ──
   이 div 하나만 overflow-y: auto
   나머지 조상/형제는 모두 overflow: hidden 또는 visible */
.lp-cat-2col-scroll {
  flex: 1 !important;           /* 헤더 아래 남은 높이 전부 */
  min-height: 0 !important;     /* flex child 높이 축소 허용 (필수) */
  overflow-x: hidden !important;
  overflow-y: auto !important;  /* 여기서만 세로 스크롤 */
  padding: 10px 12px 16px !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 transparent !important;
}

.lp-cat-2col-scroll::-webkit-scrollbar { width: 4px !important; }
.lp-cat-2col-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 2px !important;
}
.lp-cat-2col-scroll::-webkit-scrollbar-track { background: transparent !important; }

/* 2컬럼 그리드: 좌열/우열 컨테이너 배치 */
.lp-cat-2col-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  /* height는 설정하지 않음 → 내용물 높이에 따라 자연스럽게 늘어남 */
  align-items: start !important;
}

/* 각 열: 카드 세로 스택 */
.lp-cat-col-left,
.lp-cat-col-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
  /* height 지정 없음 → 카드 수에 따라 아래로 자연스럽게 늘어남 */
}

/* 카테고리 전체보기 뷰 내 카드 크기:
   - 고정 높이 유지 (카드 일관성)
   - max-height 제거 → 내용이 많아도 잘리지 않음
   - flex-shrink: 0 → 찌그러짐 방지 */
.lp-cat-view .lp-rec-card {
  min-height: 116px !important;
  height: 126px !important;
  max-height: none !important;  /* 핵심: 상위 규칙의 max-height 145px 해제 */
  flex: 0 0 auto !important;    /* 고정 크기, 늘어나거나 줄어들지 않음 */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 푸터 관리자 캡슐 링크 ── */
.footer-admin-link {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  text-decoration: none;
}
.footer-admin-link:hover {
  background: rgba(255,255,255,0.22);
  color: #fff;
}


/* ================================================================
   listings.html 모바일 반응형 최적화 패치 (max-width: 768px)
   ================================================================ */
@media (max-width: 768px) {

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     모바일 핵심 수정: body/html overflow hidden 완전 해제
     PC에서 100vh + overflow:hidden 으로 고정된 레이아웃을
     모바일에서는 자연스러운 전체 페이지 세로 스크롤로 전환
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* 1. body — 100vh 고정 및 overflow:hidden 완전 해제 */
  body[data-page="listings"] {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;   /* 페이지 전체 세로 스크롤 허용 */
    display: block !important;     /* flex 해제 → 자연 블록 흐름 */
  }

  /* 2. lp-body: 그리드 → 세로 flex 전환, 높이 제한 전면 해제 */
  body[data-page="listings"] .lp-body {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    flex: none !important;         /* body flex:1 상속 차단 */
  }

  /* lp-body flex 자식들의 height 상속 차단 */
  body[data-page="listings"] .lp-sidebar,
  body[data-page="listings"] .lp-center,
  body[data-page="listings"] .lp-panel,
  body[data-page="listings"] .cat-cards-section {
    flex: none !important;
  }

  /* 3. 헤더 레이아웃 모바일 2행 재배치 (로고/토글 1행, 검색창 2행) */
  body[data-page="listings"] .site-header .container.nav-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    padding: 10px 16px !important;
  }

  body[data-page="listings"] .site-header .brand {
    margin-right: auto !important;
  }

  body[data-page="listings"] .site-header .nav-toggle {
    margin-left: auto !important;
    display: inline-flex !important;
  }

  body[data-page="listings"] .nav-menu {
    top: 112px !important; /* 검색창 행 두께를 감안하여 아래로 하강 */
    left: 16px !important;
    right: 16px !important;
    z-index: 9999 !important;
  }

  body[data-page="listings"] .lp-header-search {
    width: 100% !important;
    flex: none !important;
    margin: 8px 0 0 0 !important;
    max-width: none !important;
    display: flex !important;
    gap: 4px !important;
  }

  body[data-page="listings"] .lp-header-search input {
    flex: 1.5 !important;
    min-width: 0 !important;
  }

  body[data-page="listings"] .lp-header-search select {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  body[data-page="listings"] .lp-header-search .lp-search-submit,
  body[data-page="listings"] .lp-header-search .lp-search-reset {
    flex-shrink: 0 !important;
  }

  /* 4. 카테고리 사이드바 -> 모바일 가로 스크롤형 필터 바로 파격 전환 */
  body[data-page="listings"] .lp-sidebar {
    display: block !important; /* display: none 해제 */
    width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
    border-right: none !important;
    border-bottom: 1px solid #E5E7EB !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body[data-page="listings"] .lp-sidebar .phone-inquiry-box,
  body[data-page="listings"] .lp-sidebar .lp-inquiry-section {
    display: none !important; /* 모바일에서 불필요한 고정 전화/상담 폼 카드는 차단 */
  }

  body[data-page="listings"] .lp-sidebar-section {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    scrollbar-width: none;
  }

  body[data-page="listings"] .lp-sidebar-section::-webkit-scrollbar {
    display: none;
  }

  body[data-page="listings"] .lp-sidebar-header {
    display: none !important;
  }

  body[data-page="listings"] .lp-cat-item {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    padding: 6px 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 999px !important; /* 알약 형태 디자인 */
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    color: #475569 !important;
    background: #ffffff !important;
    transition: all 0.12s ease !important;
  }

  body[data-page="listings"] .lp-cat-item.active {
    border-color: #071f5f !important;
    background: #e0f2fe !important;
    color: #071f5f !important;
    font-weight: 800 !important;
  }

  body[data-page="listings"] .lp-cat-count {
    font-size: 11px !important;
    color: inherit !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin-left: 3px !important;
  }

  body[data-page="listings"] .lp-cat-count::after {
    display: none !important;
  }

  /* 5. 지도 영역 — 모바일 360px 고정 (너무 크지 않게) */
  body[data-page="listings"] .lp-center {
    width: 100% !important;
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    flex-shrink: 0 !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  body[data-page="listings"] #map {
    height: 100% !important;
    width: 100% !important;
  }

  /* 6. 추천매물 패널 — 내부 스크롤 완전 해제, 페이지 전체 스크롤로 전환 */
  body[data-page="listings"] .lp-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    padding-right: 0 !important;
    border-left: none !important;
    border-top: 1px solid #E5E7EB !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  /* lp-panel-inner / scroll-body: 모바일에서 내부 스크롤 해제 → 페이지 전체 스크롤 */
  body[data-page="listings"] .lp-panel-inner,
  body[data-page="listings"] .lp-panel-scroll-body {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }
  body[data-page="listings"] .lp-panel-hd-sticky {
    position: static !important;
  }

  body[data-page="listings"] .lp-rec-2col-layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }

  body[data-page="listings"] .lp-rec-column {
    border-right: none !important;
    border-bottom: 1px solid #E5E7EB !important;
    height: auto !important;
    overflow: visible !important;
  }

  body[data-page="listings"] .lp-rec-column:last-child {
    border-bottom: none !important;
  }

  body[data-page="listings"] .lp-rec-card-list {
    overflow-y: visible !important;
    height: auto !important;
    padding: 12px 16px 16px !important;
  }

  /* 추천 매물 가로형 리스트 카드 모바일 미세 튜닝 */
  body[data-page="listings"] .lp-rec-card {
    min-height: 88px !important;
    max-height: none !important;
  }

  body[data-page="listings"] .lp-rec-img-wrap {
    width: 110px !important;
    min-width: 110px !important;
  }

  body[data-page="listings"] .lp-rec-body {
    padding: 6px 8px !important;
  }

  body[data-page="listings"] .lp-rec-row-mid {
    font-size: 12.5px !important;
    white-space: normal !important; /* 모바일 가독성 향상 줄바꿈 */
  }

  /* 6b. 모바일: 최근등록매물 1열 전환, 이미지 42% 가로형 유지 */
  .lp-panel-section-body {
    grid-template-columns: 1fr !important;
  }
  .lp-mini-img-wrap {
    width: 42% !important;
    min-width: 42% !important;
    height: auto !important;
  }

  /* 7. 하단 카테고리 카드 뷰 그리드 반응형 정리 */
  body[data-page="listings"] .cat-cards-section {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }

  body[data-page="listings"] .cat-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  body[data-page="listings"] .cat-cards-grid .cat-card:last-child {
    grid-column: unset !important; /* span 해제 */
  }

  body[data-page="listings"] .cat-card {
    height: 90px !important;
  }

  body[data-page="listings"] .cat-card-name {
    font-size: 12px !important;
  }

  body[data-page="listings"] .cat-card-sub {
    font-size: 10px !important;
  }

  /* 8. 플로팅 전화/카톡 버튼 세이프존 마진 보정 */
  body[data-page="listings"] .floating-btns {
    right: 16px !important;
    bottom: 24px !important;
    z-index: 9999 !important;
  }

  body[data-page="listings"] .float-btn-card {
    width: 52px !important;
    height: 52px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
  }

  body[data-page="listings"] .site-footer {
    padding-bottom: 30px !important; /* 플로팅 버튼 여백 제거 및 기본 패딩 복구 */
  }

  /* 9. 매물 상세 정보 모달 모바일 최적화 */
  .modal-box {
    max-height: 92vh !important;
    height: auto !important;
    border-radius: 0 !important;
  }

  /* modal-body가 단일 스크롤 컨테이너 역할 — 자식 컬럼은 overflow 제한 없음 */
  .modal-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-y: auto !important;
    padding-bottom: 0 !important;
  }

  /* 모바일 1열 적층 순서: ①사진 → ②요약/가격/면적/지도/문의 → ③정보표/설명 */
  .modal-col-photo { order: 1 !important; overflow: visible !important; }
  .modal-col-side  { order: 2 !important; position: static !important; overflow-y: visible !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
  .modal-col-info  { order: 3 !important; overflow-y: visible !important; height: auto !important; }

  .modal-col-side > *,
  .modal-area-highlight,
  .modal-price-area,
  .modal-agent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 문의 버튼: fixed 해제 → 일반 흐름 */
  .modal-contact {
    position: static !important;
    padding: 12px 16px !important;
    background: transparent !important;
    border-top: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .modal-contact > * {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
  }

  .modal-contact a,
  .modal-contact button {
    margin: 0 !important;
    min-height: 46px !important;
    padding: 0 8px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .modal-minimap-wrap,
  #modalBodyMap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  body[data-page="listings"] .lp-header-search {
    gap: 2px !important;
  }

  body[data-page="listings"] .lp-header-search select {
    width: 78px !important;
  }

  /* 480px 이하: 카테고리 카드 2열 */
  body[data-page="listings"] .cat-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5px !important;
  }

  body[data-page="listings"] .cat-card {
    height: 80px !important;
  }

  body[data-page="listings"] .cat-card-name {
    font-size: 11px !important;
  }

  body[data-page="listings"] .cat-card-sub {
    font-size: 9px !important;
  }

}


/* ================================================================
   consult.html 모바일 반응형 카드식 변환 패치 (max-width: 640px)
   ================================================================ */
@media (max-width: 640px) {
  
  /* 1. 테이블 기본 구조를 블록형으로 파격 개조 */
  body[data-page="consult"] .board-table {
    display: block !important;
    min-width: 0 !important; /* 모바일 min-width 560px 제약 완전 무력화 */
    border: none !important;
  }

  body[data-page="consult"] .board-table thead {
    display: none !important; /* 테이블 머리말 완전 은닉 */
  }

  body[data-page="consult"] .board-table tbody {
    display: block !important;
    width: 100% !important;
  }

  /* 2. 각 행(tr)을 하나의 예쁜 카드 아이템 상자로 포장 */
  body[data-page="consult"] .board-table tbody tr {
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px 16px 14px 16px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    box-shadow: 0 4px 10px rgba(10, 31, 92, 0.02) !important;
    box-sizing: border-box !important;
  }

  body[data-page="consult"] .board-table tbody tr:last-child {
    margin-bottom: 0 !important;
  }

  body[data-page="consult"] .board-table tbody tr:hover {
    background: #ffffff !important; /* 모버 아웃 시 색상 고정 */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(10, 31, 92, 0.04) !important;
  }

  /* 3. 테이블 셀(td) 요소를 카드 내 정보 조각으로 재배치 */
  body[data-page="consult"] .board-table td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    text-align: left !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
  }

  /* ① 순서 번호: 모바일에서는 숨김 처리 */
  body[data-page="consult"] .board-table td:nth-child(1) {
    display: none !important;
  }

  /* ② 상담 유형: 카드의 우아한 왼쪽 상단 뱃지 배치 */
  body[data-page="consult"] .board-table td:nth-child(2) {
    display: inline-flex !important;
    margin-bottom: 8px !important;
  }
  
  body[data-page="consult"] .board-table td:nth-child(2) .type-badge {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  /* ⑥ 상태 뱃지: 카드의 절대적 오른쪽 상단 뱃지 배치 (겹침 완벽 차단) */
  body[data-page="consult"] .board-table td:nth-child(6) {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    display: inline-flex !important;
  }

  body[data-page="consult"] .board-table td:nth-child(6) .status-badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* ③ 상담 제목: 카드의 핵심 바디로 중심부에 강조 노출 */
  body[data-page="consult"] .board-table td.col-title {
    display: block !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
  }

  body[data-page="consult"] .board-table td.col-title span {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* ④ 작성자(Masked Name) 및 ⑤ 등록일: 카드 최하단의 메타 가이드 라인 병렬화 */
  body[data-page="consult"] .board-table td:nth-child(4) {
    display: inline-block !important;
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 600 !important;
  }

  /* 작성자와 등록일 사이에 예쁜 구분선(Dot) 삽입 기법 */
  body[data-page="consult"] .board-table td:nth-child(4)::after {
    content: "·" !important;
    margin: 0 6px !important;
    color: #cbd5e1 !important;
    display: inline-block !important;
    font-weight: normal !important;
  }

  body[data-page="consult"] .board-table td:nth-child(5) {
    display: inline-block !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
  }

  /* 4. 기타 게시판 모바일 헤더 요소 간 정렬 붕괴 완벽 패치 */
  body[data-page="consult"] .board-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
  }

  body[data-page="consult"] .board-title-wrap {
    text-align: left !important;
  }

  body[data-page="consult"] .board-write-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important; /* 모바일에서는 글쓰기 버튼을 하단 풀 와이드로 제공해 터치 극대화 */
    padding: 12px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }
}

/* ── 거래유형 공통 색상 배지 ── */
.deal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 20px;
  padding: 2px 8px;
  border-radius: 5px;
  white-space: nowrap;
  line-height: 1;
  font-size: 11.5px;
  font-weight: 400;   /* normal */
  flex-shrink: 0;
  letter-spacing: 0.1px;
}
/* 거래유형별 색상 */
.deal-badge-mae  { background: #E53935; color: #fff; }          /* 매매 — 빨강 */
.deal-badge-im   { background: #E65100; color: #fff; }          /* 임대 — 주황 */
.deal-badge-jeon { background: #1565C0; color: #fff; }          /* 전세 — 파랑 */
.deal-badge-wol  { background: #2E7D32; color: #fff; }          /* 월세 — 초록 */
.deal-badge-bun  { background: #c2410c; color: #fff; }          /* 분양 — 주황 */
.deal-badge-etc  { background: #64748b; color: #fff; }

/* ===== 푸터 내 가로형 빠른 바로가기 버튼 셋 ===== */
.footer-quick-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
  width: 100%;
}

.footer-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.footer-quick-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  display: block;
}

/* 각 버튼별 호버 액션 효과 */
.footer-quick-btn.fbc-tel:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.footer-quick-btn.fbc-blog:hover {
  background: #2db400;
  border-color: #2db400;
  color: #ffffff;
}

.footer-quick-btn.fbc-kakao:hover {
  background: #fee500;
  border-color: #fee500;
  color: #191919;
}

.footer-quick-btn.fbc-inquiry:hover {
  background: #071f5f;
  border-color: #071f5f;
  color: #ffffff;
}

/* 모바일 전용 반응형 튜닝 */
@media (max-width: 640px) {
  .footer-quick-btns {
    gap: 8px;
    margin-bottom: 18px;
  }
  
  .footer-quick-btn {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 16px;
  }
}

/* ===== 2컬럼 레이아웃 푸터 스타일 개편 (listings.html용) ===== */
body[data-page="listings"] .site-footer.listings-footer-new {
  background-color: #071f5f !important; /* 기존 딥 네이비 색상 */
  color: #cbd5e1 !important;
  padding: 24px 36px !important; /* 높이를 확연히 줄여 compact하게 정리 */
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

body[data-page="listings"] .footer-new-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important; /* 컴팩트해진 높이에 맞춰 수직 중앙 정렬 */
  gap: 20px !important;
}

/* 왼쪽 회사 정보 영역 */
.footer-company-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.footer-company-info .company-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.footer-company-info .info-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.footer-company-info .info-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}

.footer-company-info .info-bar {
  color: rgba(255, 255, 255, 0.12) !important;
  font-weight: 300 !important;
  margin: 0 2px !important;
}

.footer-company-info .copyright-text {
  font-size: 11px !important;
  color: #64748b !important;
  margin: 4px 0 0 0 !important;
}

/* 세로 구분선 (PC용) */
body[data-page="listings"] .footer-divider-vertical {
  width: 1px !important;
  height: 48px !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  margin: 0 16px !important;
}

/* 오른쪽 6개 퀵버튼 (3열 2행 콤팩트 그리드 구성) */
.footer-new-quick-btns {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  max-width: 320px !important;
  width: 100% !important;
}

.fnq-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.fnq-btn svg {
  width: 12px !important;
  height: 12px !important;
  fill: currentColor !important;
}

/* 퀵버튼 호버 스타일 */
.fnq-btn.fbc-tel:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.fnq-btn.fbc-blog:hover {
  background: #2db400 !important;
  border-color: #2db400 !important;
}

.fnq-btn.fbc-kakao:hover {
  background: #fee500 !important;
  border-color: #fee500 !important;
  color: #191919 !important;
}

.fnq-btn.fbc-inquiry:hover {
  background: #38bdf8 !important;
  border-color: #38bdf8 !important;
  color: #0b1f4d !important;
}

.fnq-btn.fbc-youtube:hover {
  background: #ff0000 !important;
  border-color: #ff0000 !important;
  color: #ffffff !important;
}

/* 오른쪽 영역 레이아웃 (퀵버튼 & 관리자) */
body[data-page="listings"] .footer-right-area {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important; /* PC 기준 오른쪽 정렬 */
  gap: 8px !important;
  flex-shrink: 0 !important;
  max-width: 320px !important;
  width: 100% !important;
}

body[data-page="listings"] .footer-admin-wrap {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
  margin-top: 2px !important;
}

/* 관리자 버튼: 작고 덜 눈에 띄는 회색 디자인 */
body[data-page="listings"] .fbc-admin-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important; /* 연한 회색 글씨 */
  font-size: 10px !important; /* 크기 작게 */
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

body[data-page="listings"] .fbc-admin-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important; /* 호버 시 약간 밝아짐 */
}

/* 모바일 전용 미디어 쿼리 패치 */
@media (max-width: 768px) {
  body[data-page="listings"] .site-footer.listings-footer-new {
    padding: 24px 20px !important;
  }
  
  body[data-page="listings"] .footer-new-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  
  body[data-page="listings"] .footer-divider-vertical {
    display: none !important; /* 모바일에서는 구분선 숨김 */
  }

  body[data-page="listings"] .footer-right-area {
    align-items: flex-start !important;
    max-width: none !important;
  }

  body[data-page="listings"] .footer-admin-wrap {
    justify-content: flex-start !important;
    margin-top: 4px !important;
  }
  
  .footer-new-quick-btns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    justify-content: flex-start !important;
    max-width: none !important;
    width: 100% !important;
  }

  .fnq-btn {
    flex: 1 1 calc(33.333% - 4px) !important; /* 모바일에서도 3열 유지 또는 자연스러운 플렉스 정렬 */
    min-width: 80px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   통일 푸터 v2 (site-footer-v2)
   모든 페이지 공통 적용 — 좌: 회사정보 | 구분선 | 우: 퀵버튼
   ═══════════════════════════════════════════════════════ */
.site-footer-v2 {
  background: #1f2937;
  color: #d1d5db;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 12px 0;
  font-size: 12px;
  flex-shrink: 0;
}
.footer-v2-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

/* 왼쪽: 회사 정보 */
.footer-v2-company {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.footer-v2-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1px;
}
.footer-v2-info {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1px;
  column-gap: 0;
}
.footer-v2-info span {
  color: #e5e7eb;
  font-size: 12.5px;
  line-height: 1.5;
  padding-right: 10px;
  margin-right: 4px;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.footer-v2-info span:last-child {
  border-right: none;
}
.footer-v2-copy {
  font-size: 12px;
  color: #e5e7eb;
  margin: 2px 0 0;
}

/* 세로 구분선 (PC용) */
.footer-v2-divider {
  width: 1px;
  height: 42px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
  align-self: center;
  margin: 0 24px;
}

/* 오른쪽: 퀵버튼 + 관리자 */
.footer-v2-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.footer-v2-btns {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
}
.fv2-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: #e2e8f0;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.fv2-btn svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  flex-shrink: 0;
}
.fv2-btn:hover          { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.25); }
.fv2-blog:hover         { background: #2db400; border-color: #2db400; color: #fff; }
.fv2-kakao:hover        { background: #fee500; border-color: #fee500; color: #191919; }
.fv2-inquiry:hover      { background: #38bdf8; border-color: #38bdf8; color: #0b1f4d; }
.fv2-youtube:hover      { background: #ff0000; border-color: #ff0000; color: #fff; }

/* 관리자 버튼 — 튀지 않는 회색 계열 */
.fv2-admin-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #6b7280;
  font-size: 10.5px;
  font-weight: 400;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.fv2-admin-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #9ca3af;
}

/* ── 관리자 페이지: footer 하단 고정 ── */
body[data-page="admin-dashboard"],
body[data-page="admin-listings"],
body[data-page="admin-register"],
body[data-page="admin-consults"],
body[data-page="admin-consult-detail"] {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body[data-page="admin-dashboard"] #adminMain,
body[data-page="admin-listings"] #adminMain,
body[data-page="admin-register"] #adminMain,
body[data-page="admin-consults"] #adminMain,
body[data-page="admin-consult-detail"] #adminMain {
  flex: 1;
}
/* login overlay가 hidden일 때도 footer가 항상 최하단에 */
body[data-page="admin-dashboard"] > .site-footer-v2,
body[data-page="admin-listings"]  > .site-footer-v2,
body[data-page="admin-register"]  > .site-footer-v2,
body[data-page="admin-consults"]  > .site-footer-v2,
body[data-page="admin-consult-detail"] > .site-footer-v2 {
  margin-top: auto;
}

.fv2-contact:hover { background: #C9A84C; border-color: #C9A84C; color: #fff; }

/* ── 모바일 반응형 ── */
@media (max-width: 768px) {
  .footer-v2-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-v2-divider { display: none; }
  .footer-inquiry-wrap {
    width: 100%;
  }
  .footer-v2-right {
    align-items: flex-start;
    width: 100%;
  }
  .footer-v2-btns {
    flex-wrap: wrap;
    gap: 4px;
  }
  .fv2-btn { font-size: 11px; padding: 5px 8px; }
}

/* ══ 부동산정보 페이지 (info.html) ══ */
.info-page-hero {
  background: linear-gradient(135deg, #0A1F5C 0%, #15376f 100%);
  padding: 52px 0 44px;
  text-align: center;
}
.info-page-hero h1 {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}
.info-page-hero p {
  font-size: 14px;
  color: #aab8d8;
  margin: 0;
}
.info-category-bar {
  background: #fff;
  border-bottom: 1px solid #e2e6ed;
  position: sticky;
  top: 64px;
  z-index: 5;
  padding: 0;
}
.info-category-bar .container {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.info-category-bar .container::-webkit-scrollbar { display: none; }
.info-cat-btn {
  border: none;
  background: none;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.info-cat-btn:hover { color: #0A1F5C; }
.info-cat-btn.active {
  color: #0A1F5C;
  border-bottom-color: #C9A84C;
}
.info-list-section {
  background: #f2f4f7;
  padding: 40px 0 60px;
  min-height: 400px;
}
.info-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.info-card {
  background: #fff;
  border-radius: 14px;
  border: 0.5px solid #e2e6ed;
  padding: 28px 22px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
.info-card:hover {
  box-shadow: 0 6px 24px rgba(10,31,92,0.12);
  transform: translateY(-2px);
}
.info-card-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #C9A84C;
  background: #fdf6e3;
  border: 1px solid #f0d897;
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 12px;
}
.info-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0A1F5C;
  margin: 0 0 10px;
  line-height: 1.5;
}
.info-card p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.75;
  margin: 0;
}
.info-card.hidden { display: none; }

/* 상세 보기 */
.info-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  overflow-y: auto;
  padding: 40px 16px;
}
.info-detail-overlay.active { display: block; }
.info-detail-box {
  background: #fff;
  border-radius: 16px;
  max-width: 740px;
  margin: 0 auto;
  padding: 40px 36px;
  position: relative;
}
.info-detail-close {
  position: absolute;
  top: 18px;
  right: 20px;
  border: none;
  background: none;
  font-size: 22px;
  cursor: pointer;
  color: #64748b;
  line-height: 1;
}
.info-detail-cat {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #C9A84C;
  background: #fdf6e3;
  border: 1px solid #f0d897;
  border-radius: 4px;
  padding: 3px 10px;
  margin-bottom: 14px;
}
.info-detail-box h2 {
  font-size: 22px;
  font-weight: 700;
  color: #0A1F5C;
  margin: 0 0 10px;
  line-height: 1.4;
}
.info-detail-summary {
  font-size: 14px;
  color: #64748b;
  background: #f6f8fb;
  border-left: 3px solid #C9A84C;
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 24px;
  line-height: 1.7;
}
.info-detail-body {
  font-size: 14.5px;
  color: #334155;
  line-height: 1.9;
}
.info-detail-body p { margin: 0 0 16px; }
.info-detail-body h4 {
  font-size: 15px;
  font-weight: 700;
  color: #0A1F5C;
  margin: 24px 0 8px;
}
.info-detail-body ul {
  margin: 0 0 16px;
  padding-left: 20px;
}
.info-detail-body ul li { margin-bottom: 6px; }
.info-detail-consult {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e2e6ed;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.info-detail-consult a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.info-consult-tel { background: #0A1F5C; color: #fff; }
.info-consult-kakao { background: #FEE500; color: #3a1d1d; }
.info-consult-board { background: #f6f8fb; border: 1px solid #e2e6ed; color: #0A1F5C; }

@media (max-width: 768px) {
  .info-promo-grid { grid-template-columns: 1fr; }
  .info-card-grid { grid-template-columns: 1fr; }
  .info-detail-box { padding: 28px 18px; }
  .info-detail-consult { flex-direction: column; }
  .info-detail-consult a { justify-content: center; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .info-card-grid { grid-template-columns: repeat(2, 1fr); }
  .info-promo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile map touch guard: keep Kakao map gestures available on listings. */
@media (max-width: 768px) {
  body[data-page="listings"] .lp-center {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    touch-action: none !important;
    overflow: hidden !important;
  }

  body[data-page="listings"] #map,
  body[data-page="listings"] #map > div {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  body[data-page="listings"] .lp-panel,
  body[data-page="listings"] .cat-cards-section,
  body[data-page="listings"] .lp-sidebar,
  body[data-page="listings"] .site-footer-v2 {
    position: relative !important;
    z-index: 0 !important;
  }

  body[data-page="listings"] .map-placeholder-text {
    pointer-events: none !important;
  }
}