:root {
  --bg: #ffffff;
  --panel: #f8f9fa;
  --line: #d1d5db;
  --txt: #1f2937;       /* 진한 회색 */
  --sub: #6b7280;
  --blue: #2563eb;
  --green: #059669;
}

html, body{
  height: 100%;
  font-family: 'Pretendard', system-ui, -apple-system;
  color: var(--txt);
  background: var(--bg);
}

/* SweetAlert2가 body 높이를 auto로 덮어쓰는 것을 방지 */
html.swal2-height-auto,
body.swal2-height-auto,
html.swal2-height-auto body,
html.swal2-height-auto body #map,
body.swal2-height-auto #map {
  height: 100% !important;
}

/* SweetAlert2 기본 폰트 크기 조정 */
.swal2-popup {
  font-size: 0.95rem;
  font-family: 'Pretendard', system-ui, -apple-system;
}

.swal2-title {
  font-size: 1.25rem;
}

.chip{padding:6px 10px; border:1px solid var(--line); border-radius:999px}
.control-bar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  gap: 8px;
}

.d-table{
  height: 100%;
  width: 100%;
}

.d-table-row{
  height: 100%;
}

.marker{
  background-repeat:no-repeat;
  width:70px;
  height:70px;
  background-size: 70px;
  text-align: center;
  line-height: 0.9;
  padding-top: 4px;
  cursor: pointer;
}

.realdeal-marker{
  background-image:url("/images/realdeal_marker.png");
}

.auction-marker{
  background-image:url("/images/auction_marker.png");
}

div#loading{
  position:absolute;
  width:50px;
  top:50%;
  left:50%;
  transform:translateX(-50%);
  margin: 0 auto;
  display: none;
  z-index: 10;
}

div#loading>img{
  height:50px;
  width:50px;
}


div#contents{
  /* height: calc(100% - 80px); */
  height: 100%;
  margin: 0px;
  padding: 0px;
  position: relative;
}

.marker-desc{
  margin: 0px;
  margin-top:5px;
}

.marker-desc-img{
  margin-left: 2px;
}

.chk-label{
  margin-left: 5px;
}

.chk-input{
  margin-right: 5px;
}
.single-row td:nth-child(1){
  font-weight: bold;
  width: 40%;
}

.single-row td:nth-child(2){
  width: 60%;
}

.auction-info{
  margin-top: 8px;
}

.auction-info .info-updated{
  font-size: 0.85rem;
  color: var(--sub);
  margin-bottom: 8px;
}

.auction-info-table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  table-layout: fixed;
}

.auction-info-table tr:first-child th,
.auction-info-table tr:first-child td{
  border-top: 1px solid var(--line);
}

.auction-info-table th:first-child,
.auction-info-table td:first-child{
  border-left: 1px solid var(--line);
}

.auction-info-table th,
.auction-info-table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  width: 25%;
}

.auction-info-table th{
  font-weight: 600;
  color: var(--sub);
  font-size: 0.85rem;
  background: var(--panel);
}

.auction-info-table td{
  color: var(--txt);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: anywhere;
  background: #fff;
}

.auction-info-table td[colspan="3"]{
  width: 75%;
}

@media (max-width: 640px){
  .auction-info-table{
    border-collapse: separate;
    border-spacing: 0;
    --auction-label-col: 140px;
    border: none;
  }

  .auction-info-table tr{
    display: grid;
    grid-template-columns: var(--auction-label-col) minmax(0, 1fr);
  }

  .auction-info-table tr:first-child > *:nth-child(-n+2){
    border-top: 1px solid var(--line);
  }
  .auction-info-table tr:first-child > *:nth-child(n+3){
    border-top: none;
  }

  .auction-info-table th,
  .auction-info-table td{
    width: auto;
    border-right: none;
  }

  .auction-info-table th{
    white-space: normal;
    word-break: keep-all;
  }

  .auction-info-table tr > *:nth-child(2n+1){
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }

  .auction-info-table tr > *:nth-child(2n){
    border-left: none;
    border-right: 1px solid var(--line);
  }

  .auction-info-table tr:last-child > *{
    border-bottom: 1px solid var(--line);
  }

  .auction-info-table td[colspan]{
    grid-column: 2 / -1;
    width: auto;
    border-right: 1px solid var(--line);
  }

  /* 전체 폭을 사용해야 하는 행에서만 .full-span-row를 사용한다. */
  .auction-info-table tr.full-span-row td[colspan]{
    grid-column: 1 / -1;
  }
}

/* ===== Guide Page ===== */
.guide-page{
  background: linear-gradient(180deg, rgba(37,99,235,0.08), transparent 260px);
  color: var(--txt);
  padding: 1.5rem 0 clamp(2rem, 5vw, 3rem);
}

.guide-page .container{
  max-width: 1280px;
}

.guide-hero{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-align: center;
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.5rem);
  margin-bottom: clamp(1rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.guide-hero::after{
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 28px;
  background: radial-gradient(circle at top right, rgba(37,99,235,0.14), transparent 55%);
  z-index: -1;
  pointer-events: none;
}

.guide-kicker{
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-title{
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.guide-lead{
  font-size: 1.05rem;
  color: var(--sub);
  line-height: 1.6;
}

@media (max-width: 767.98px){
  .guide-hero{
    padding-left: clamp(1rem, 6vw, 1.5rem);
    padding-right: clamp(1rem, 6vw, 1.5rem);
  }
}

.guide-section{
  --guide-section-gap: 1.5rem;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 28px;
  padding: clamp(1.75rem, 2.5vw, 3rem) clamp(1.5rem, 3vw, 3.25rem);
  box-shadow: 0 28px 60px -32px rgba(15,23,42,0.28);
  backdrop-filter: blur(6px);
  position: relative;
}

.guide-section + .guide-section{
  margin-top: var(--guide-section-gap);
}

@media (min-width: 992px){
  .guide-hero{
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
  }

}

.guide-section-heading{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.guide-index{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #3b82f6);
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 15px 30px -18px rgba(37,99,235,0.6);
}

.guide-heading{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-weight: 700;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}

.guide-desc{
  color: var(--sub);
  margin-bottom: 0;
}

.guide-subsection + .guide-subsection{
  margin-top: 2rem;
}

.guide-subheading{
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.guide-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.guide-card-title{
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.guide-list{
  padding-left: 1.1rem;
  margin-bottom: 0;
}

.guide-list li + li{
  margin-top: 0.5rem;
}

.guide-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}

.guide-badge-auction{
  background: var(--blue);
}

.guide-badge-realdeal{
  background: var(--green);
}

.guide-dl{
  margin-bottom: 0;
}

.guide-dl dt{
  font-weight: 700;
  margin-top: 0.75rem;
}

.guide-dl dt:first-child{
  margin-top: 0;
}

.guide-dl dd{
  margin-bottom: 0.25rem;
  color: var(--sub);
  line-height: 1.5;
}

.guide-faq .card{
  border-radius: 16px;
  border: 1px solid rgba(209,213,219,0.7);
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.guide-faq .card:last-child{
  margin-bottom: 0;
}

.guide-faq .card-header{
  background: rgba(37,99,235,0.05);
  border-bottom: 1px solid rgba(209,213,219,0.6);
}

.guide-faq .btn-link{
  width: 100%;
  text-align: left;
  color: var(--txt);
  font-weight: 600;
  text-decoration: none;
}

.guide-faq .btn-link:hover,
.guide-faq .btn-link:focus{
  text-decoration: none;
  color: var(--blue);
}

.guide-timeline{
  display: grid;
  gap: 1.5rem;
}

.guide-timeline-item{
  display: grid;
  gap: 1rem;
  align-items: start;
  grid-template-columns: 48px minmax(0, 1fr);
}

.guide-timeline-marker{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(37,99,235,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--blue);
  box-shadow: inset 0 0 0 2px rgba(37,99,235,0.18), 0 10px 24px -14px rgba(37,99,235,0.55);
}

.guide-text{
  margin-bottom: 0;
  color: var(--sub);
  line-height: 1.6;
}

@media (max-width: 576px){
  .guide-heading{
    font-size: 1.25rem;
  }

  .guide-index{
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

}

@media (min-width: 768px){
  .guide-section-heading{
    flex-direction: column;
    align-items: flex-start;
  }

  .guide-desc{
    max-width: 100%;
    margin-left: 0;
    text-align: left;
  }
}

@media (min-width: 992px){
  .guide-hero::after{
    inset: -24px;
    background: radial-gradient(circle at 70% 20%, rgba(37,99,235,0.18), transparent 60%);
  }

  .guide-lead{
    max-width: 520px;
  }

  .guide-section{
    padding: 3rem 3.5rem;
  }

  .guide-grid{
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .guide-timeline{
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-timeline-item{
    background: transparent;
  }

  .guide-text{
    font-size: 1rem;
  }
}

@media (min-width: 1200px){
  .guide-section{
    padding: 3.5rem 4rem;
  }

  .guide-desc{
    font-size: 1.05rem;
  }
}

#district{
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 10;
}

#btn-district{
  margin: 5px;
  background-color: #ffffff;
}

#btn-district.active{
  color: #f8f9fa;
  background-color: #6f7582;
}

.navbar-form{
  /* margin-top: 0px; */
}

#addar-search{
  /* margin-left: 15px; */
}

#addr-move{
  /* margin-left: 5px; */
}

.caption-top{
  caption-side: top !important;
}


/* ===== 가독성 보강 (본문 텍스트 선명도) ===== */
html, body{
  font-weight: 500;                    /* Windows에서 얇게 보이는 문제 완화 */
  line-height: 1.55;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased; /* 크롬/사파리 스무딩 */
  text-rendering: optimizeLegibility;
}

/* ===== 헤더/상단바(어두운 바를 쓰는 경우) 대비 확보 ===== */
/* 사이트의 상단바가 어두운 배경이라면 사용 – 선택적 */
header, .navbar, .control-bar.dark {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* 통계 페이지의 어두운 헤더 보드를 기본 톤과 맞춤 */
.stats-section--board .stats-board-dark__head {
  background: transparent !important;
  border-bottom-color: transparent !important;
  color: inherit;
}
header a, .navbar a { color:#e5e7eb !important; }
.navbar .nav-link { position: relative; border-radius: 999px; transition: background .2s ease, box-shadow .2s ease, color .2s ease; }
.navbar .nav-link.active,
.navbar .navbar-brand.active {
  color: #fff !important;
}
.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.45rem;
  width: 60%;
  height: 2px;
  background: #93c5fd;
  border-radius: 999px;
  transform: translateX(-50%);
}

@media (max-width: 991.98px) {
  .navbar .nav-link.active {
    text-decoration: underline;
    text-decoration-color: #93c5fd;
    text-decoration-thickness: 2px;
    padding-block: 0.35rem;
    text-underline-offset: 0.6rem;
  }

  .navbar .nav-link.active::after {
    content: none;
  }
}

/* ===== 입력 요소 통일 (검색창/셀렉트) ===== */
input, select, .form-control{
  background:#fff;
  color: var(--txt);
  border:1px solid var(--line);
  border-radius:10px;
  height: 34px;
  padding: 6px 10px;
}
input::placeholder{ color: var(--sub); }

/* ===== 토글/칩 버튼 상태 ===== */
.chip{ background:#fff; color: var(--txt); }
.chip.active{ background:#111827; color:#fff; border-color:#111827; }

/* ===== 모달(경매 상세) 기본 톤만 정리 ===== */
.modal-content{
  background:#fff;
  color: var(--txt);
  border-radius:12px;
  border:1px solid var(--line);
  box-shadow:0 12px 32px rgba(0,0,0,.18);
}
.modal-title{ font-weight:700; }
.modal .text-muted{ color: var(--sub) !important; }

/* ===== 마커 텍스트 가독성 ===== */
.marker{
  color:#fff;                          /* 파란/초록 마커 위 흰 글자 */
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);  /* 밝은 지도 위 대비 확보 */
}

/* 실거래/경매 색 분리 필요 시 (이미지 대신 배경색 쓰는 경우만) */
/*
.realdeal-marker{ background-color: #059669; }
.auction-marker{ background-color: #2563eb; }
*/


.marker{
  width:70px; height:70px; background-size:70px 70px; background-repeat:no-repeat;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-align:center; font-weight:600;
  line-height:1.05; padding-top:4px;       /* 위쪽 여백 */
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  cursor:pointer;
}

/* 배경 이미지는 그대로 사용 */
.auction-marker{ background-image:url("/images/auction_marker.png"); }
.realdeal-marker{ background-image:url("/images/realdeal_marker.png"); }

/* 3단 텍스트 위계 */
.marker .price{   font-size:15px; letter-spacing:.1px; }  /* 총 금액 */
.marker .size{    font-size:12px; opacity:.95; }          /* 전용면적 */
.marker .ppu{     font-size:11px; opacity:.9; }           /* ㎡당 금액 */

/* 줌 레벨에 따라 살짝 키우기(선택) */
.marker.z-big .price{ font-size:17px; }
.marker.z-big .size{  font-size:13px; }
.marker.z-big .ppu{   font-size:12px; }



/* 마커 3줄 텍스트 레이아웃 안정화 */
.marker{
  box-sizing: border-box;        /* padding을 높이에 포함 (잘림 방지) */
  width:70px; height:76px;       /* 2px 여유 */
  background-size: 70px 70px;
  background-repeat:no-repeat;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;    /* 가운데 정렬 → 위쪽 정렬로 변경 */
  padding:6px 4px 8px;           /* 위/아래 패딩 명시 */
  color:#fff;
  text-align:center;
  font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  line-height:1.1;               /* 줄간격 조정 */
  white-space:nowrap;            /* 줄바꿈 방지 */
}

/* 내부 요소 기본 여백 제거 & 간격 통일 */
.marker > *{ margin:0; padding:0; }
.marker .price{ font-size:14px; }
.marker .size { font-size:12px; margin-top:2px; }
.marker .ppu  { font-size:11px; margin-top:2px; opacity:.95; }

/* 배경 이미지는 그대로 사용 중이라면 유지 */
.auction-marker{ background-image:url("/images/auction_marker.png"); }
.realdeal-marker{ background-image:url("/images/realdeal_marker.png"); }

/* 확대 시 조금 키우고 싶으면 (선택) */
.marker.z-big      { height:76px; }
.marker.z-big .price{ font-size:15px; }
.marker.z-big .size { font-size:13px; }
.marker.z-big .ppu  { font-size:12px; }


.sp-marker svg{ display:block; }
.sp-marker{ will-change: transform; transform-origin: 50% 100%; }
.sp-marker:hover{ transform: translateZ(0) scale(1.04); }  /* 살짝 확대 */
/*
@media (min-resolution: 2dppx){
  .sp-marker { filter: contrast(105%) saturate(105%); }    /* 레티나에서 색감 살짝 보정 */
}
*/

/* 커스텀 오버레이 컨테이너 */
.sp-marker{
  display:inline-block;   /* 인라인 박스의 라인박스 여백 제거 */
  line-height:0;          /* 인라인 컨텐츠로 생기는 위/아래 여백 제거 */
  transform-origin:50% 100%;
}
.sp-marker svg{ display:block; }  /* svg 자체도 블록화 */

/* 상단바 네이비 톤 + 1px 틈 제거 (가장 아래에 추가) */
#top{ background:#1f2937 !important; color:#e5e7eb; margin:0; padding:0; }
#top > .container-fluid{ padding-left:0 !important; padding-right:0 !important; }
#topnav.navbar{ background:transparent !important; margin:0; padding-left:16px; padding-right:16px; }
html, body{ margin:0; padding:0; } /* 기본 마진으로 보이는 헤어라인 차단 */

.sp-marker {
  position: relative;
  width: 70px;
  text-align: center;
  cursor: pointer;
}
.sp-marker .marker-bg {
  width: 70px; height: 58px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.sp-marker .marker-text {
  position: absolute;
  top: 6px; left: 0; right: 0;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.sp-marker .line1 { font-size: 13px; font-weight: 700; }
.sp-marker .line2 { font-size: 11px; font-weight: 600; }

/* 배경 이미지 다르게 */
/*.sp-marker.auction .marker-bg   { background-image: url('/images/auction_marker.png'); }
.sp-marker.realdeal .marker-bg  { background-image: url('/images/realdeal_marker.png'); }*/

.sp-marker.auction .marker-bg   { background-image: url('/images/auction_marker_flat.png'); }
.sp-marker.realdeal .marker-bg  { background-image: url('/images/realdeal_marker_flat.png'); }

.sp-marker { position: relative; width: 70px; }
.sp-marker .marker-bg { width:70px; height:58px; background:center/contain no-repeat; }

/* 텍스트 박스는 좌우 6px 패딩을 확보해 충돌 방지 */
.sp-marker .marker-text{
  position:absolute; top:6px; left:6px; right:6px;   /* ← 좌우 패딩 */
  line-height:1.15; text-align:center;
  /* 넘치면 가려주기 */
  overflow:hidden;
}

.sp-marker .line1, .sp-marker .line2{
  white-space:nowrap;            /* 한 줄로 */
  overflow:hidden;               /* 넘치면 숨김 */
  text-overflow:ellipsis;        /* … 표시 */
  display:block;
}

.sp-marker .line1{ font-size:13px; font-weight:700; margin-bottom:2px; }
.sp-marker .line2{ font-size:11px; font-weight:600; }


:root{
  --auc-txt: #F8FAFC;  /* auction */
  --rd-txt:  #F8FAFC;  /* realdeal */
}

/* 기본 텍스트색 + 윤곽 */
.sp-marker .marker-text{
  color:#f8fafc; /* 기본(흰색 톤) */
  text-shadow:
    0 1px 2px rgba(0,0,0,.45),   /* 하단 그림자 */
    0 0 0.5px rgba(0,0,0,.35),   /* 얇은 외곽선 */
    0 0 1px rgba(0,0,0,.18);     /* 소프트 글로우 */
}

/* 타입별 살짝 다른 톤 적용 */
.sp-marker.auction .marker-text{ color: var(--auc-txt); }
.sp-marker.realdeal .marker-text{ color: var(--rd-txt); }

/* 수치만 강조하고 싶으면 */
.sp-marker .line1 { letter-spacing:.1px; }


/* 확대 시 살짝 키움 */
.sp-marker .marker-text.z-big .line1{ font-size:15px; }
.sp-marker .marker-text.z-big .line2{ font-size:12px; }


.sp-marker.sp-marker--focus {
  transform: translateZ(0) scale(1.08);
  transition: transform 0.25s ease, filter 0.25s ease;
}

.sp-marker.sp-marker--focus .marker-text {
  filter: drop-shadow(0 6px 14px rgba(5, 150, 105, 0.35));
}

.sp-marker.sp-marker--focus .marker-bg {
  position: relative;
}

.sp-marker.sp-marker--focus .marker-bg::after {
  content: "";
  position: absolute;
  inset: -10px -8px -18px;
  border-radius: 16px;
  border: 2px solid rgba(5, 150, 105, 0.78);
  box-shadow: 0 0 18px rgba(5, 150, 105, 0.45);
  opacity: 0.85;
  pointer-events: none;
  animation: sp-marker-focus-pulse 1.8s ease-out 3;
}

.sp-marker.sp-marker--focus::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 26px;
  height: 10px;
  margin-left: -13px;
  background: radial-gradient(circle, rgba(5,150,105,0.35) 0%, rgba(5,150,105,0) 70%);
  opacity: 0.9;
  pointer-events: none;
  animation: sp-marker-focus-wave 1.8s ease-out 3;
}

@keyframes sp-marker-focus-pulse {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  35% {
    transform: scale(1);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

@keyframes sp-marker-focus-wave {
  0% {
    transform: translateX(-50%) scale(0.6);
    opacity: 0;
  }
  40% {
    transform: translateX(-50%) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translateX(-50%) scale(1.6);
    opacity: 0;
  }
}


/* 공통 마커 텍스트 박스 */
.sp-marker { position: relative; width:70px; height:58px; }
.sp-marker .marker-bg {
  width:70px; height:58px;
  background-position:center; background-size:contain; background-repeat:no-repeat;
}
.sp-marker .marker-text{
  position:absolute; inset:6px 4px auto 4px;   /* top/right/left 패딩 */
  text-align:center; line-height:1.12;
  color:#F8FAFC;                                 /* 순백 대신 살짝 오프화이트 */
  text-shadow:
     0 1px 2px rgba(0,0,0,.45),
     0 0 1px rgba(0,0,0,.6);                     /* 얇은 외곽선 느낌 */
  overflow:hidden;                               /* 전체 박스 넘침 차단 */
}

/* 각 줄 – 한 줄만, 넘치면 … + JS로 폰트 자동축소 */
.sp-marker .marker-text > div{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin:0; padding:0;
}
.sp-marker .line1{ font-weight:800; font-size:14px; } /* 가격(메인) */
.sp-marker .line2{ font-weight:600; font-size:12px; margin-top:1px; } /* 면적 */
.sp-marker .line3{ font-weight:600; font-size:11px; margin-top:1px; opacity:.95; } /* ㎡당 */

/* 확대 시 살짝 키우기(선택) */
.sp-marker .marker-text.z-big .line1{ font-size:15px; }
.sp-marker .marker-text.z-big .line2{ font-size:13px; }
.sp-marker .marker-text.z-big .line3{ font-size:12px; }

/* 배경 이미지(평면 PNG 추천) */
/*.sp-marker.auction  .marker-bg{ background-image:url('/images/auction_marker_flat.png'); }
.sp-marker.realdeal .marker-bg{ background-image:url('/images/realdeal_marker_flat.png'); }*/

.sp-marker.auction  .marker-bg{ background-image: url('/images/auction_marker.png'); }
.sp-marker.realdeal .marker-bg{ background-image: url('/images/realdeal_marker.png'); }

.sp-marker{
  position: relative;
  width: 70px;      /* ← 가로 축소 */
  height: 80px;     /* ← 세로 확대 */
  text-align: center;
  cursor: pointer;
}
.sp-marker .marker-bg{
  width: 70px;
  height: 80px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.sp-marker .marker-text{
  position: absolute;
  top: 8px; left: 4px; right: 4px; bottom: 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.15;
  overflow:hidden;
}
.sp-marker .line1{ font-size:14px; font-weight:800; }
.sp-marker .line2{ font-size:12px; font-weight:600; margin-top:2px; }
.sp-marker .line3{ font-size:11px; font-weight:600; margin-top:2px; }


/* 세로 80, 가로 70 기준 유지 */
.sp-marker{ position:relative; width:75px; height:80px; }
.sp-marker .marker-bg{ width:75px; height:80px; background:center/contain no-repeat; }

/* ← 여기만 조정 */
.sp-marker .marker-text{
  position:absolute;
  top:4px;           /* 위 여백 */
  left:4px; right:4px;
  bottom:18px;       /* ↓ 아래 여백 확대 (기존 6px → 16px) */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1.14;
  overflow:hidden;
  transform: translateY(-2px);  /* 전체 텍스트를 2px 위로 살짝 */
}

.sp-marker .line1{ font-size:14px; font-weight:800; margin:0 0 1px; }
.sp-marker .line2{ font-size:12px; font-weight:600; margin:0 0 1px; }
.sp-marker .line3{ font-size:11px; font-weight:600; margin:0;      opacity:.95; }



/* 모바일 카드 레이아웃 */
@media (max-width: 640px) {
  /* 모달 자체 튜닝: 하단시트 느낌 + 스크롤 */
  #myModal .modal-dialog { width: 96vw; max-width: 96vw; margin: .5rem auto; }
  #myModal .modal-content { max-height: 80vh; display: flex; flex-direction: column; }
  #myModal .modal-body { overflow-y: auto; }
  #myModal .modal-body { min-width: 0; }
  #myModal .modal-content { min-width: 0; }

  /* 카드 컨테이너 */
  .deal-cards {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 카드 */
  .deal-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: .7rem .8rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }

  /* 상단 라벨(거래일) */
  .deal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.35rem; }
  .deal-date { font-weight:700; }
  .deal-floor { color:#6c757d; }

  /* 본문 행 */
  .deal-row { display:flex; justify-content:space-between; padding:.15rem 0; }
  .deal-row .k { color:#6c757d;
                  white-space: nowrap;    /* 항상 한 줄 */
                  flex-shrink: 0;         /* 공간 부족해도 줄바꿈 안 함 */
                  margin-right: 6px; }
  .deal-row .v { font-weight:600; }
  .deal-row .v.price { font-weight:800; font-size:1.05rem; }
  .badge-psm { background:#eef6ff; color:#0d6efd; font-weight:700; }


  /* 강조 값 */
  .price { font-size:1.05rem; font-weight:800; }

  /* 주소값 */
  .deal-row .v.deal-addr {
    flex: 1;
    text-align: right;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   /* 최대 2줄 */
    white-space: normal;     /* 줄바꿈 허용 */
    word-break: break-word;  /* 단어 단위 줄바꿈 */
    text-overflow: ellipsis; /* 2줄 넘어가면 ... */
  }

  .card-match { border-color:#40c057 !important; box-shadow:0 0 0 2px rgba(64,192,87,.15); }

  .deal-card--highlight {
    border-color:#059669 !important;
    box-shadow:0 0 0 2px rgba(5,150,105,.22);
  }

  .deal-card__badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#059669;
    color:#fff;
    font-size:0.72rem;
    font-weight:600;
    padding:0.2rem 0.6rem;
    border-radius:999px;
    margin-bottom:0.45rem;
  }

}


#top .navbar-brand {
  font-weight: 600;
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
}
#top .navbar-brand .brand-title {
  font-weight: 700;
}
#top .navbar-brand .brand-subtitle {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
  letter-spacing: 0.04em;
}
/* 지도 좌상단 툴바 */
.map-toolbar{
  position:absolute; top:12px; left:12px; z-index:1000;
  display:flex; align-items:center; gap:8px;
  background: rgba(33,37,41,.92);
  border-radius: .5rem; padding: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.map-toolbar .chip{
  display:inline-flex; align-items:center;
  padding:4px 8px; border:1px solid rgba(255,255,255,.15);
  border-radius:999px; background:rgba(255,255,255,.06);
  color:#f8fafc; font-weight:600;
}
.map-toolbar .chip input{ margin-right:4px; }
.map-toolbar__search{ min-width: 320px; }
.map-toolbar__search .form-control{ border:0; }
.map-toolbar__search .btn{ border:0; }

/* 작은 화면에서 폭 줄이기 */
@media (max-width: 640px){
  .map-toolbar{ right:12px; flex-wrap:wrap; gap:6px; }
  .map-toolbar__search{ min-width: 220px; width: 100%; }
}

.map-controls .btn,
.map-searchbar .btn {
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.map-controls .btn.active {
  background-color: #007bff;
  color: white;
}

/* 공통 컨트롤 박스: 카카오 지도 컨트롤과 어울리게 */
.sp-ctl {
  position: absolute;
  z-index: 1000;
  background: transparent;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  box-shadow: none;
  height: 32px;
  display: inline-flex;
  align-items: center;
}

/* 좌상단 구석으로 */
#sp-left-ctls { top: 10px; left: 10px; gap: 0; }
#sp-searchbar { top: 10px; left: 220px; }

/* 토글 버튼 */
.toggle-btn {
  border: 0;
  border-right: 1px solid #e9ecef;
  background: #fff;
  color: #495057;
  padding: 0 10px;
  font-size: 13px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}
.toggle-btn:first-child { border-radius: 6px 0 0 6px; }
.toggle-btn:last-child  { border-right: 0; border-radius: 0 6px 6px 0; }
.toggle-btn:not(.active):hover { background:#fff; }

/* active 상태: 파란 배경/흰 글씨로 확실히 */
.toggle-btn.active {
  background: #2b7cff;
  color: #fff;
  border-color: #2b7cff;
}
.toggle-btn.active + .toggle-btn { border-left-color: #fff3; }

/* 검색 입력/버튼 높이 맞춤 */
.sp-input {
  width: 230px;            /* ← 폭 줄임 */
  border: 0;
  height: 30px;
  padding: 0 10px;
  outline: none;
  font-size: 13px;
}
.sp-input::placeholder { color:#adb5bd; }
.sp-btn {
  width: 34px;
  height: 30px;
  border: 0;
  border-left: 1px solid #e9ecef;
  background: #ffffff;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
}
.sp-btn:hover { background:#f6f8fa; }

/* 좌상단 컨트롤(지적도/경매/실거래/검색) 위치를 카카오 기본 컨트롤과 동일하게 */
#sp-left-ctls {
  position: absolute;
  top: 7px;         /* 카카오 기본 여백과 맞춤 (원하면 0으로 더 붙여도 됨) */
  left: 7px;
  z-index: 1000;
  display: flex;
  align-items: center;
  margin: 0;        /* ← 남는 공백 원인 제거 */
  padding: 0;
}

#sp-left-ctls:not(.is-ready),
#sp-searchbar:not(.is-ready),
#addr-form:not(.is-ready),
#btn-filter:not(.is-ready) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#map {
  position: relative;
}

#map #sp-left-ctls,
#map #sp-searchbar,
#map #addr-form,
#map #btn-filter,
#sp-left-ctls.is-ready,
#sp-searchbar.is-ready,
#addr-form.is-ready,
#btn-filter.is-ready {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

#sp-searchbar:not(.is-ready) {
  display: none;
}

/* 주소 검색 로딩바 */
#map .sp-addr-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(43, 124, 255, 0.18);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1100;
}

#map .sp-addr-loading.is-active {
  opacity: 1;
}

.sp-addr-loading__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: #2b7cff;
  animation: spAddrLoading 1s ease-in-out infinite;
}

@keyframes spAddrLoading {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(200%);
  }
}

/* 버튼들 사이 경계선 겹침/틈 제거 */
#sp-left-ctls .toggle-btn {
  margin: 0;
  border: 1px solid #e1e4e8;
  border-right: 0;
}
#sp-left-ctls .toggle-btn + .toggle-btn { margin-left: -1px; }
#sp-left-ctls .toggle-btn:first-child { border-radius: 6px 0 0 6px; }
#sp-left-ctls .toggle-btn:last-child  { border-right: 1px solid #e1e4e8; border-radius: 0 6px 6px 0; }

/* 지적도 단일 버튼이거나 아이콘 버튼의 기본 여백 제거 */
#btn-district,
#sp-left-ctls button {
  margin: 0;
}

/* 돋보기 플로팅 버튼(좌상단 컨트롤 오른쪽에 살짝 붙임) */
.sp-icon-btn{
  position:absolute;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 8px;            /* 필요하면 지적도/경매/실거래 오른쪽으로 조정 */
  z-index:1001;
  width:36px;height:36px;
  border:1px solid #e1e4e8;border-radius:6px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  padding:0;line-height:1;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

/* 모바일 전체폭 검색바(기본은 숨김, .open 때 표시) */
.sp-mobile-search{
  position:absolute;
  left:8px; right:8px;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  z-index:1002;
  display:flex;gap:6px;
  padding:8px;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(6px);
  border:1px solid #e1e4e8;border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transform:translateY(-110%); /* 숨김 */
  opacity:0; pointer-events:none; transition:transform .18s ease, opacity .18s ease;
}
.sp-mobile-search.open{
  transform:translateY(0); opacity:1; pointer-events:auto;
}

.sp-mobile-search input{
  flex:1 1 auto; min-width:0;
  height:36px; font-size:16px;   /* iOS 확대 방지 */
  padding:6px 10px;
}

/* 버튼들 크기/색상 */
.sp-mobile-search .btn{
  height:36px; padding:0 10px;
}
.sp-mobile-search .sp-clear,
.sp-mobile-search .sp-close{
  background:#fff;border:1px solid #e1e4e8;
}
.sp-mobile-search .sp-clear i{ font-size:12px; }
.sp-mobile-search .sp-close i{ font-size:14px; }

/* 데스크톱용 기존 작은 검색창이 있다면 모바일에서 숨김 */
@media (max-width: 576px){
  #addr-move{ display:none !important; }
  /* 지도 위 데스크톱용 검색 인풋이 있다면: */
  .sp-desktop-search{ display:none !important; }
}

/* 좌상단 버튼 묶음 */
#sp-left-ctls {
  position:absolute; left:8px; top:8px; z-index:1001;
  display:flex; gap:6px; align-items:center;
}

/* PC 검색바 */
#sp-searchbar {
  position:absolute; left:8px; top:54px; z-index:1001;
  background:#fff; border:1px solid #ddd; border-radius:6px;
  padding:6px; gap:6px; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
#sp-searchbar .sp-input { width:260px; height:32px; }
#sp-searchbar .sp-btn   { height:32px; display:flex; align-items:center; }

/* 모바일 돋보기 버튼 (우상단) */
.sp-icon-btn {
  position:absolute; right:8px; top:8px; z-index:1002;
  width:36px; height:36px; border:1px solid #ddd; border-radius:6px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* 모바일 전체폭 검색바 */
.sp-mobile-search {
  position:absolute; left:8px; right:8px;
  top:52px; z-index:1003;
  background:#fff; border:1px solid #ddd; border-radius:8px;
  padding:8px; display:flex; gap:8px; align-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transform:translateY(-140%); opacity:0; pointer-events:none;
  transition:transform .2s ease, opacity .2s ease;
}
.sp-mobile-search.open { transform:translateY(0); opacity:1; pointer-events:auto; }

.sp-mobile-search .form-control { height:36px; }
.sp-mobile-search .btn { height:36px; display:flex; align-items:center; }
.sp-mobile-search .sp-clear, .sp-mobile-search .sp-close { background:#f8f9fa; border-color:#eaeaea; }

/* 토글 버튼 딱 붙이기 */
.sp-ctl--stack .toggle-btn {
  margin-right: 0;   /* 간격 제거 */
  border-radius: 0;  /* 일괄적으로 둥근 모서리 제거 */
}
.sp-ctl--stack .toggle-btn:first-child {
  border-radius: 4px 0 0 4px; /* 좌측 */
}
.sp-ctl--stack .toggle-btn:last-child {
  border-radius: 0 4px 4px 0; /* 우측 */
}


/* ===== HOTFIX: 토글 간격/모바일 돋보기 위치 강제 오버라이드 ===== */

/* 좌상단 토글: 틈 없이 붙이기 */
#sp-left-ctls{ gap:0 !important; margin:0 !important; padding:0 !important; }
#sp-left-ctls .toggle-btn{
  margin:0 !important;
  border:1px solid #e1e4e8 !important;
  border-right:0 !important;
}
#sp-left-ctls .toggle-btn + .toggle-btn{ margin-left:-1px !important; }
#sp-left-ctls .toggle-btn:first-child{ border-radius:6px 0 0 6px !important; }
#sp-left-ctls .toggle-btn:last-child{
  border-right:1px solid #e1e4e8 !important;
  border-radius:0 6px 6px 0 !important;
}


/* 모바일에선 데스크톱 검색바 숨김(겹침 방지) */
@media (max-width:576px){
  #sp-searchbar{ display:none !important; }
}

/* ===== MOBILE: search icon under left toggles ===== */
:root{
  --ctl-top: 8px;     /* 좌상단 토글 묶음의 top */
  --ctl-h: 32px;      /* 토글 높이 */
  --gap: 8px;         /* 요소 간 간격 */
  --icon-h: 36px;     /* 돋보기 아이콘 높이 */
}

/* 좌상단 토글(틈 없이 붙임 – 유지) */
#sp-left-ctls{ top: var(--ctl-top) !important; left:8px !important; gap:0 !important; }

/* 모바일에서 돋보기 아이콘을 토글 아래에 배치 */
@media (max-width:576px){
  #addr-toggle {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin-left: 6px;  /* 토글 버튼과 간격 */
    z-index: auto !important;
  }

  /* 펼쳐지는 모바일 검색바는 아이콘 아래 */
  .sp-mobile-search{
    left:8px !important; right:8px !important;
    top: calc(var(--ctl-top) + var(--ctl-h) + var(--gap) + var(--icon-h) + var(--gap)) !important;
  }

  /* PC용 작은 검색바는 모바일에서 숨김(겹침 방지) */
  #sp-searchbar{ display:none !important; }
}


@media (max-width: 576px) {
  #sp-left-ctls {
    flex-wrap: nowrap !important;
    align-items: center;
  }

  /* 돋보기를 토글 옆에 붙이기 */
  #addr-toggle {
    position: static !important;
    margin-left: 6px !important;
    flex-shrink: 0;
  }

  /* 돋보기 아래에 열리는 전체 검색창 위치 보정 */
  .sp-mobile-search {
    top: calc(var(--ctl-top) + var(--ctl-h) + var(--gap)) !important;
  }
}


/* PC 버전: 검색창을 토글 버튼 옆으로 배치 */
@media (min-width: 577px){
  #sp-left-ctls {
    display: inline-flex !important;
    align-items: center;
  }

  #sp-searchbar.is-ready {
    position: relative !important;  /* absolute → relative 로 바꾸기 */
    display: inline-flex;
    margin-left: 8px;               /* 토글과 간격 */
    top: auto !important;           /* 기존 top 값 무효화 */
    left: auto !important;          /* 기존 left 값 무효화 */
    z-index: auto !important;       /* 덮임 문제 방지 */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
  }

  #sp-searchbar.is-ready .sp-input {
    width: 200px;
    height: 30px;
  }

  #sp-searchbar.is-ready .sp-btn {
    height: 30px;
  }
}


/* === PATCH: PC에서 주소 검색창이 사라지는 증상 해결 + 토글 옆 배치 === */
@media (min-width: 577px){
  #sp-searchbar.is-ready{
    position: absolute !important;   /* 지도에 가려지지 않게 절대배치 유지 */
    top: 8px !important;             /* 토글과 같은 높이 */
    left: 220px !important;          /* 토글 그룹 오른쪽 (기존에 쓰시던 기준값) */
    display: flex;
    visibility: visible;
    opacity: 1;
    z-index: 1001 !important;        /* 좌상단 컨트롤과 동일 레벨 */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
  }
}

/* 모바일은 기존처럼 숨김 유지 */
@media (max-width: 576px){
  #sp-searchbar{ display:none !important; }
  #addr-toggle{ position: static !important; margin-left:6px !important; flex-shrink:0; }
}


/* ===== FIX: 577~768px에서 PC검색창/모바일돋보기가 함께 보이는 문제 ===== */

/* 1) 모바일(≤768px): PC 검색바는 항상 숨기고, 돋보기는 토글 오른쪽에 붙임 */
@media (max-width: 768px){
  /* PC 작은 검색창 강제 OFF (576~768도 포함) */
  #sp-searchbar{
    display: none !important;
    visibility: hidden !important;
    position: absolute !important; /* 레이아웃 영향 제거 */
  }

  /* 돋보기 버튼을 토글 옆(같은 줄)로 */
  #addr-toggle{
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    margin-left: 6px !important;
    z-index: 1002 !important;
    flex-shrink: 0;
  }

  /* 펼쳐지는 전체 검색창은 토글/돋보기 아래에 */
  .sp-mobile-search{
    left: 8px !important; right: 8px !important;
    /* 토글 높이(32px) + 간격(8px) 기준 */
    top: calc(var(--ctl-top, 8px) + var(--ctl-h, 32px) + var(--gap, 8px)) !important;
  }

  /* 토글 묶음은 줄바꿈 없이 한 줄 유지 */
  #sp-left-ctls{
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
  }
}

/* 2) PC(≥769px): PC 검색바만 보이게 */
@media (min-width: 769px){
  /* PC 검색바 ON + 토글 오른쪽에 고정(원하시는 좌표로 보정 가능) */
  #sp-searchbar.is-ready{
    display: flex;
    visibility: visible;
    position: absolute !important;
    top: 8px !important;
    left: 220px !important;   /* 필요시 200~260px에서 미세조정 */
    z-index: 1001 !important;
  }

  /* PC에서는 모바일 돋보기는 숨김(필요 시 비노출) */
  #addr-toggle{
    display: none !important;
  }
}


/* === PC: 검색창을 토글 버튼에 더 붙여 보이게 (겹쳐 보이는 결합 스타일) === */
@media (min-width: 769px){
  /* 1) 토글 마지막 버튼의 오른쪽 둥근 모서리/경계선 제거 → 검색창과 매끈하게 결합 */
  #sp-left-ctls .toggle-btn:last-child{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;               /* 경계선 겹침 제거 */
  }

  /* 2) 검색창 왼쪽 경계/모서리 제거 + 좌표를 조금 왼쪽으로 당겨서 '붙는' 느낌 */
  #sp-searchbar.is-ready{
    left: 180px !important;                    /* 기존 220px에서 14px 당김 (더 붙이고 싶으면 202~208px로 조절) */
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding-left: 6px !important;              /* 시각적 균형 */
    z-index: 1001 !important;
  }

  /* 3) 내부 높이 맞춤(토글 32px과 동일) */
  #sp-searchbar.is-ready .sp-input{ height: 30px !important; }
  #sp-searchbar.is-ready .sp-btn  { height: 30px !important; }
}

/* ===== 필터 버튼 (FAB) ===== */
.sp-fab-filter {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1002;
  width: 48px; height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  cursor: pointer;
}
.sp-fab-filter:hover { background: #1d4ed8; }
.sp-fab-filter.active {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}
.sp-fab-filter.active::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  background: #ec4899;
  border: 2px solid #fff;
  border-radius: 50%;
}


/* ==== 공통 톤: 유리 백드롭 + 부드러운 모션 ==== */
.modal-backdrop.show{
  background: rgba(15,23,42,.35) !important;  /* 짙은 남회색 */
  backdrop-filter: blur(4px) saturate(110%);   /* 유리 느낌 */
}

/* 기본 모달을 카드처럼 */
#filterModal.sp-sheet .modal-content{
  border: 0;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
  overflow: hidden;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
}

/* 헤더–푸터 톤업 */
#filterModal .modal-header{
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border-bottom: 1px solid #edf0f5;
}
#filterModal .modal-title{ font-weight: 700; }
#filterModal .modal-footer{
  border-top: 1px solid #edf0f5;
  background: #fff;
}

/* 버튼을 더 또렷하게 */
#filterModal .btn-primary{
  border-radius: 10px; font-weight: 700;
}
#filterModal .btn-light{
  border-radius: 10px; border:1px solid #e9edf3;
}

/* 범위 입력은 항상 한 줄에 */
#filterModal .sp-range{
  display:flex;
  align-items:center;
  gap:.5rem;
}
#filterModal .sp-range .form-control{
  flex:1 1 0;
  min-width:0;
}
#filterModal .sp-range .dash{ flex:0 0 auto; }
#filterModal .sp-section-title{ font-weight:600; }

/* ==== 필터 모달: 항상 하단에서 슬라이드업 ==== */
#filterModal.sp-sheet .modal-dialog{
  position: fixed;
  left: 0; right: 0; bottom: 24px;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  transform: translateY(calc(100% + 24px));
  transition: transform .24s cubic-bezier(.22,1,.36,1);
}
#filterModal.sp-sheet.show .modal-dialog{ transform: translateY(0); }

/* 상하단 고정으로 조작성 ↑ */
#filterModal .modal-header{ position: sticky; top: 0; z-index: 1; }
#filterModal .modal-footer{ position: sticky; bottom: 0; z-index: 1; }

/* 손잡이 */
#filterModal .sp-handle{
  height: 6px; width: 48px; border-radius: 999px;
  background: #d7dde7; margin: 10px auto -4px; opacity: .9;
}

/* 큰 화면에서는 폭 제한 */
@media (min-width: 992px){
  #filterModal.sp-sheet .modal-content{
    max-height: none;
    border-radius: 18px;
  }
  #filterModal.sp-sheet .modal-dialog{
    left: 50%;
    right: auto;
    margin: 0;
    width: 100%;
    max-width: 920px;
    transform: translate(-50%, calc(100% + 24px));
  }
  #filterModal.sp-sheet.show .modal-dialog{ transform: translate(-50%, 0); }
  #filterModal .modal-body{
    padding: 1.25rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem;
  }
  #filterModal .sp-filter-section{ grid-column: 1 / -1; }
}


/* ===== 경매 목록 페이지 ===== */
.auction-page .card{
  border-radius: 16px;
  border: 1px solid var(--line);
}

.auction-page .card-title{
  font-size: 1.1rem;
}

.auction-page .auction-range{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  column-gap: 0.5rem;
}

.auction-page .auction-range .form-control{
  flex: 1 1 0;
  min-width: 0;
}

.auction-page .auction-range .dash{
  color: var(--sub);
  font-weight: 600;
}

.auction-page .auction-summary{
  font-weight: 600;
}

.auction-page .auction-card-list-wrapper{
  display: none;
}

.auction-page .auction-card-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.auction-page .auction-card{
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: #fff;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.auction-page .auction-card-empty{
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--sub);
  background-color: #f8fafc;
  font-size: 0.95rem;
}

.auction-page .auction-card__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.auction-page .auction-card__court{
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--strong);
}

.auction-page .auction-card__case{
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primary);
  text-decoration: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.auction-page .auction-card__case:hover,
.auction-page .auction-card__case:focus{
  text-decoration: underline;
}

.auction-page .auction-card__address{
  font-size: 0.95rem;
  color: var(--body);
  margin-bottom: 0.75rem;
}

.auction-page .auction-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--sub);
  margin-bottom: 0.75rem;
}

.auction-page .auction-card__meta-item{
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.auction-page .auction-card__meta-label{
  font-weight: 600;
  color: var(--strong);
}

.auction-page .auction-card__stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 0;
}

.auction-page .auction-card__stat{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.auction-page .auction-card__stat-label{
  font-size: 0.8rem;
  color: var(--sub);
  font-weight: 600;
}

.auction-page .auction-card__stat-value{
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--strong);
}

.auction-page .auction-card-status{
  margin-top: 0.75rem;
}

.auction-page .auction-card-sentinel{
  width: 100%;
  height: 1px;
  margin-top: 0.5rem;
}

.auction-tooltip{
  position: absolute;
  z-index: 12000;
  display: none;
  padding: 0.25rem 0;
  border-radius: 8px;
  background: #f1f3f5;
  color: var(--txt);
  font-size: 0.9rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  border: 1px solid rgba(15, 23, 42, 0.12);
  pointer-events: auto;
  min-width: 120px;
}

.auction-tooltip__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.auction-tooltip__item + .auction-tooltip__item{
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.auction-tooltip__item-button{
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0.55rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.auction-tooltip__item-button:hover,
.auction-tooltip__item-button:focus{
  background-color: rgba(15, 23, 42, 0.08);
  outline: none;
  text-decoration: none;
}

.auction-tooltip__item-button:active{
  background-color: rgba(15, 23, 42, 0.12);
}

.auction-tooltip-target{
  position: relative;
}

.auction-page #auction-result-table tbody tr.auction-tooltip-target{
  background-color: rgba(13, 110, 253, 0.08);
}

.auction-page .auction-card.auction-tooltip-target{
  border-color: rgba(13, 110, 253, 0.45);
  box-shadow: 0 16px 36px rgba(13, 110, 253, 0.18);
}

.realdeal-tooltip{
  position: absolute;
  z-index: 12000;
  display: none;
  padding: 0.25rem 0;
  border-radius: 8px;
  background: #f1f5f9;
  color: var(--txt);
  font-size: 0.9rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  border: 1px solid rgba(15, 23, 42, 0.12);
  pointer-events: auto;
  min-width: 120px;
}

.realdeal-tooltip__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.realdeal-tooltip__item + .realdeal-tooltip__item{
  border-top: 1px solid rgba(5, 150, 105, 0.15);
}

.realdeal-tooltip__item-button{
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0.55rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.realdeal-tooltip__item-button:hover,
.realdeal-tooltip__item-button:focus{
  background-color: rgba(5, 150, 105, 0.12);
  outline: none;
  text-decoration: none;
}

.realdeal-tooltip__item-button:active{
  background-color: rgba(5, 150, 105, 0.18);
}

.realdeal-tooltip-target{
  position: relative;
}

.realdeal-page #realdeal-result-table tbody tr.realdeal-tooltip-target{
  background-color: rgba(5, 150, 105, 0.12);
}

.realdeal-page .realdeal-card.realdeal-tooltip-target{
  border-color: rgba(5, 150, 105, 0.45);
  box-shadow: 0 16px 36px rgba(5, 150, 105, 0.18);
}

.auction-page table th,
.auction-page table td{
  vertical-align: middle;
}

.auction-page table td:nth-child(1),
.auction-page table td:nth-child(2),
.auction-page table td:nth-child(5),
.auction-page table td:nth-child(6),
.auction-page table td:nth-child(7),
.auction-page table td:nth-child(8){
  white-space: nowrap;
}

.auction-page table td:nth-child(3){
  white-space: nowrap;
}

.auction-page table td:nth-child(4){
  min-width: 130px;
  white-space: normal;
}

.auction-page table th:nth-child(10),
.auction-page table td:nth-child(10){
  white-space: nowrap;
  min-width: 120px;
}

.auction-page .auction-pagination .page-link{
  min-width: 2.5rem;
  text-align: center;
}

@media (max-width: 767.98px){
  .auction-page #auction-search-form .form-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-left: 0;
    margin-right: 0;
  }

  .auction-page #auction-search-form .form-row + .form-row{
    margin-top: 1rem;
  }

  .auction-page #auction-search-form .form-row > [class*='col-']{
    padding-left: 0;
    padding-right: 0;
  }

  .auction-page #auction-search-form .form-row > .form-group{
    margin-bottom: 0;
  }

  .auction-page #auction-search-form .form-row > .col-12:not(.form-group){
    grid-column: 1 / -1;
  }

  .auction-page #auction-search-form .form-group{
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .auction-page #auction-search-form .form-group > label{
    margin-bottom: 0;
    flex: 0 0 120px;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .auction-page #auction-search-form .form-group > .form-control,
  .auction-page #auction-search-form .form-group .auction-range{
    flex: 1 1 auto;
  }

  .auction-page .auction-range{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 0.5rem;
    align-items: center;
  }

  .auction-page .auction-range .form-control{
    width: 100%;
    min-width: 0;
    flex: initial;
  }

  .auction-page .auction-table-wrapper{
    display: none;
  }

  .auction-page .auction-card-list-wrapper{
    display: block;
  }

  .auction-page .auction-card-list{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .auction-page .auction-card__stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== 실거래 목록 페이지 ===== */
.realdeal-page .card{
  border-radius: 16px;
  border: 1px solid var(--line);
}

.realdeal-page .card-title{
  font-size: 1.1rem;
}

.realdeal-page .realdeal-range{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.realdeal-page .realdeal-range .form-control{
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

.realdeal-page .realdeal-range .dash{
  color: var(--sub);
  font-weight: 600;
}

.realdeal-page .realdeal-summary{
  font-weight: 600;
}

.realdeal-page .realdeal-action-group{
  gap: 0.5rem;
  flex-wrap: wrap;
}

.realdeal-page .realdeal-action-group .btn{
  flex: 0 0 auto;
}

.realdeal-page .realdeal-card-list-wrapper{
  display: none;
}

.realdeal-page .realdeal-card-list{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.realdeal-page .realdeal-card{
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: #fff;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.realdeal-page .realdeal-card-empty{
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--sub);
  background-color: #f8fafc;
  font-size: 0.95rem;
}

.realdeal-page .realdeal-card__header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.realdeal-page .realdeal-card__address{
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--txt);
  flex: 1 1 auto;
}

.realdeal-page .realdeal-card__deal-date{
  font-size: 0.85rem;
  color: var(--sub);
  white-space: nowrap;
  font-weight: 600;
}

.realdeal-page .realdeal-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--sub);
}

.realdeal-page .realdeal-card__meta-item{
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.realdeal-page .realdeal-card__meta-label{
  font-weight: 600;
  color: var(--txt);
}

.realdeal-page .realdeal-card__stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

.realdeal-page .realdeal-card__stat{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.realdeal-page .realdeal-card__stat-label{
  font-size: 0.8rem;
  color: var(--sub);
  font-weight: 600;
}

.realdeal-page .realdeal-card__stat-value{
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--txt);
}

.realdeal-page .realdeal-card__stat-value--emphasis{
  font-size: 1.05rem;
  color: var(--green);
}

.realdeal-page .realdeal-card-status{
  margin-top: 0.75rem;
}

.realdeal-page .realdeal-card-sentinel{
  width: 100%;
  height: 1px;
  margin-top: 0.5rem;
}

#tb_realDeal tbody tr.rd-modal-row td{
  vertical-align: middle;
}

#tb_realDeal tbody tr.rd-modal-row--highlight{
  background-color: rgba(5, 150, 105, 0.12);
  font-weight: 600;
}

#tb_realDeal tbody tr.rd-modal-row--highlight td{
  border-top-color: rgba(5, 150, 105, 0.3);
}

.deal-highlight-cell{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.deal-highlight-badge{
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #059669;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
}

.realdeal-page table th,
.realdeal-page table td{
  vertical-align: middle;
}

.realdeal-page table td:nth-child(1){
  min-width: 180px;
  white-space: normal;
}

.realdeal-page table td:nth-child(2),
.realdeal-page table td:nth-child(3),
.realdeal-page table td:nth-child(4),
.realdeal-page table td:nth-child(5),
.realdeal-page table td:nth-child(6),
.realdeal-page table td:nth-child(7){
  white-space: nowrap;
}

.realdeal-page .realdeal-pagination .page-link{
  min-width: 2.5rem;
  text-align: center;
}

@media (max-width: 1199.98px){
  .realdeal-page #realdeal-search-form .realdeal-search-fields{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-left: 0;
    margin-right: 0;
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields + .form-row{
    margin-top: 1rem;
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields > [class*='col-']{
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields .form-group{
    margin-bottom: 0;
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields .realdeal-range{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 0.5rem;
    align-items: center;
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields .realdeal-range .form-control{
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 767.98px){
  .realdeal-page #realdeal-search-form .realdeal-search-fields{
    grid-template-columns: minmax(0, 1fr);
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields > [class*='col-']{
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields .form-group{
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields .form-group > label{
    margin-bottom: 0;
    flex: 0 0 120px;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields .form-group > .form-control,
  .realdeal-page #realdeal-search-form .realdeal-search-fields .form-group .realdeal-range{
    flex: 1 1 auto;
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields .realdeal-range{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 0.5rem;
    align-items: center;
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields .realdeal-range .form-control{
    width: 100%;
    min-width: 0;
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields .realdeal-date-group{
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: center;
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields .realdeal-date-group > label{
    grid-column: 1;
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields .realdeal-date-group .realdeal-range{
    grid-column: 2;
    min-width: 0;
    width: 100%;
  }

  .realdeal-page #realdeal-search-form .realdeal-search-fields .realdeal-date-group .form-text{
    grid-column: 2;
    width: 100%;
    margin-top: 0.25rem;
  }

  .realdeal-page .realdeal-action-group{
    justify-content: flex-end;
  }

  .realdeal-page .realdeal-table-wrapper{
    display: none;
  }

  .realdeal-page .realdeal-card-list-wrapper{
    display: flex;
    flex-direction: column;
  }

  .realdeal-page .realdeal-card-sentinel{
    display: block;
  }
}

/* =====================
   통계 페이지 스타일
   ===================== */
#stats-page {
  background: linear-gradient(180deg, #eef4f1 0%, #f6f8fb 100%);
  padding: 24px 0 56px;
  color: #0f172a;
  font-family: 'Pretendard', system-ui, -apple-system;
}

#stats-page .stats-page__inner {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.stats-filters__field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 200px;
}

.stats-filters__label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
}

.stats-filters__control {
  width: min(240px, 100%);
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 0.95rem;
  color: #0f172a;
  background: #ffffff;
  box-shadow: 0 18px 36px -28px rgba(15, 23, 42, 0.6);
  line-height: 1.5;
  min-height: 44px;
  flex: 1 1 auto;
}

.stats-filters__control:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.stats-filters__actions {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin-left: auto;
}

.stats-filters__refresh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  box-shadow: 0 24px 38px -28px rgba(37, 99, 235, 0.8);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}

.stats-filters__refresh:hover {
  transform: translateY(-1px);
  box-shadow: 0 26px 44px -30px rgba(37, 99, 235, 0.85);
}

.stats-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: transparent !important;
  border-bottom: none !important;
  color: #0f172a !important;
}

.stats-section__title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #0f172a;
}

.stats-section__desc {
  margin: 6px 0 0;
  color: #64748b;
  line-height: 1.6;
}

.stats-section__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 999px;
  padding: 10px 20px;
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.stats-section--board {
  gap: 20px;
}

.stats-frame {
  width: 100%;
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.9), #ffffff);
  border-radius: 28px;
  padding: 32px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 35px 60px -35px rgba(15, 23, 42, 0.45);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.stat-metric-grid {
  display: grid;
  gap: 20px;
}

.stat-metric-grid--desktop {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.stat-metric {
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid #e2e8f0;
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 18px 36px -24px rgba(15, 23, 42, 0.45);
}

.stat-metric__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: linear-gradient(135deg, #22d3ee, #2563eb);
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.stat-metric--realdeal .stat-metric__icon {
  background: linear-gradient(135deg, #34d399, #059669);
}

.stat-metric__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-metric__label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
  margin: 0;
}

.stat-metric__value {
  font-size: 1.85rem;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
}

.stat-metric__delta {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8;
}

.stat-metric__delta.positive {
  color: #16a34a;
}

.stat-metric__delta.negative {
  color: #ef4444;
}

.stat-metric__delta.neutral {
  color: #64748b;
}

.stat-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.stat-panel {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 24px 48px -32px rgba(15, 23, 42, 0.4);
}

.stat-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.stat-panel__head h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
}

.stat-panel__head p {
  font-size: 0.9rem;
  color: #94a3b8;
  margin: 4px 0 0;
}

.stat-panel__more {
  border: none;
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
}

.stat-panel__body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart {
  width: 100%;
}

.chart--bars {
  padding: 8px 0 24px;
}

.chart-echart {
  width: 100%;
  height: 240px;
  min-height: 220px;
}

.chart-bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  height: 180px;
}

.chart-bar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.chart-bar::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(var(--value) * 1%);
  border-radius: 12px;
  background: linear-gradient(180deg, #4ade80, #22c55e);
  box-shadow: inset 0 -6px 12px rgba(22, 163, 74, 0.15);
}

.chart-bar span {
  position: absolute;
  bottom: -26px;
  font-size: 0.75rem;
  color: #94a3b8;
}

.chart--line svg {
  width: 100%;
  height: auto;
}

.chart--donut {
  display: flex;
  align-items: center;
  gap: 24px;
}

.chart-donut__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.chart-donut__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
}

.chart-donut {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
}

.chart-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 600;
  pointer-events: none;
}

.chart-donut__center strong {
  font-size: 1.8rem;
  color: #0f172a;
}

.chart-donut__center span {
  font-size: 0.85rem;
  color: #64748b;
}

.chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #64748b;
  font-size: 0.9rem;
}

.chart-echart--donut {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
}

.chart-legend--stacked {
  gap: 16px;
}

.chart-legend--stacked li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #0f172a;
}

.chart-legend--stacked .legend-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chart-legend--stacked .legend-title,
.chart-legend--stacked .legend-metric {
  margin: 0;
  line-height: 1.25;
}

.chart-legend--stacked .legend-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.chart-legend--stacked .legend-metric {
  font-size: 0.85rem;
  color: #475569;
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.legend-dot--primary {
  background: #34d399;
}

.legend-dot--secondary {
  background: #60a5fa;
}

.legend-dot--muted {
  background: #cbd5f5;
}

.chart--map {
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.chart-echart--map {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 280px;
}

.chart-map__legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #475569;
  font-size: 0.9rem;
  min-width: 160px;
}

.chart-map__legend-title {
  margin: 0;
  font-weight: 600;
  color: #0f172a;
}

.chart-map__gradient {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-map__gradient-bar {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #dbeafe 0%, #1d4ed8 100%);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  position: relative;
}

.chart-map__scale {
  font-size: 0.85rem;
  color: #1e293b;
  min-width: 3em;
  text-align: center;
}

.chart-map__average-line {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.15);
  transform: translateX(-50%);
  pointer-events: none;
}

.chart-map__average-info {
  margin: 0;
  font-size: 0.85rem;
  color: #b91c1c;
  font-weight: 600;
}

.chart-map__note {
  margin: 0;
  color: #64748b;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .chart--map {
    flex-direction: column;
  }

  .chart-map__legend {
    flex-direction: column;
    align-items: flex-start;
    min-width: auto;
  }

  .chart-map__gradient {
    width: 100%;
  }
}

.stats-preview--desktop {
  display: flex;
}

.stats-preview--comparison {
  justify-content: center;
}

.stats-board-dark {
  width: 100%;
  background: #ffffff;
  border-radius: 32px;
  padding: 40px;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  box-shadow: 0 28px 48px -28px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.stats-board-dark__head {
  display: flex;
  justify-content: flex-end;
}

.stats-board-dark__legend {
  display: flex;
  justify-content: flex-end;
}

.stats-board-dark__legend .comparison-legend {
  margin: 0;
}

.stats-board-dark__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comparison-chart {
  width: 100%;
  min-height: 320px;
}

.stats-board-dark__empty {
  padding: 48px 20px;
  text-align: center;
  color: #64748b;
  background: rgba(226, 232, 240, 0.35);
  border: 1px dashed rgba(148, 163, 184, 0.4);
  border-radius: 20px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.stats-board-dark__empty[hidden] {
  display: none !important;
}

.comparison-item {
  background: #f8fafc;
  border-radius: 22px;
  border: 1px solid #e2e8f0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 12px 24px -18px rgba(15, 23, 42, 0.25);
}

.comparison-item__info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.comparison-item__info h4 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
}

.comparison-item__meta {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: #64748b;
}


.comparison-item__ratio {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 96px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #ecfdf5;
}

.comparison-item__ratio strong {
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 700;
  color: #047857;
}

.comparison-item__ratio-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f172a;
}

.comparison-item__ratio--muted {
  background: #f1f5f9;
}

.comparison-item__ratio--muted strong {
  color: #334155;
}

.comparison-item__values {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.comparison-item__value {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comparison-item__value .label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.comparison-item__value strong {
  font-size: 1.05rem;
  color: #0f172a;
}

.comparison-item__value small {
  font-size: 0.75rem;
  color: #64748b;
}

.comparison-item__bars {

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 18px 24px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

.comparison-bar-track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 18px 24px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

.comparison-bar-track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 18px 24px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

.comparison-bar-track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 18px 24px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

.comparison-bar-track {
  position: relative;
  height: 26px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: visible;
}

.comparison-bar {

  position: absolute;
  left: 0;
  border-radius: inherit;
  overflow: visible;
  transition: width 0.3s ease;
}

.comparison-bar::before {
  position: absolute;
  right: 0;
  top: 0;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  pointer-events: none;
  content: attr(data-amount);
  transform: translate(calc(50% + var(--label-offset, 0px)), -160%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.comparison-bar::after {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  pointer-events: none;
  content: attr(data-label);
  transform: translate(calc(50% + var(--label-offset, 0px)), 160%);
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: #0f172a;
  text-shadow: none;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}

.comparison-bar[data-label-layer='1']::before {
  transform: translate(calc(50% + var(--label-offset, 0px)), -240%);
}

.comparison-bar[data-label-layer='2']::before {
  transform: translate(calc(50% + var(--label-offset, 0px)), -320%);
}

.comparison-bar[data-label-layer='1']::after {
  transform: translate(calc(50% + var(--label-offset, 0px)), 240%);
}

.comparison-bar[data-label-layer='2']::after {
  transform: translate(calc(50% + var(--label-offset, 0px)), 320%);
}

.comparison-bar--appraisal {
  top: 16%;
  height: 70%;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.45), rgba(148, 163, 184, 0.95));
}

.comparison-bar--appraisal::before {
  background: rgba(148, 163, 184, 0.95);
  color: #0f172a;
}

.comparison-bar--appraisal::after {
  background: rgba(148, 163, 184, 0.25);
  border-color: rgba(148, 163, 184, 0.45);
  color: #0f172a;
}

.comparison-bar--winning {
  top: 32%;
  height: 45%;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.55), rgba(56, 189, 248, 0.95));
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
}

.comparison-bar--winning::before {
  background: rgba(56, 189, 248, 0.95);
  color: #082f49;
}

.comparison-bar--winning::after {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.45);
  color: #0f172a;
}

.comparison-bar--real {
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.5), rgba(74, 222, 128, 0.95));
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.4);
}

.comparison-bar--real::before {
  background: rgba(74, 222, 128, 0.95);
  color: #022c22;
}

.comparison-bar--real::after {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.45);
  color: #0f172a;
}

.comparison-bar[data-amount='']::before {
  content: '';
}

.comparison-legend {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  list-style: none;
  padding: 0;
  color: #334155;
  font-size: 0.75rem;
}

.comparison-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.comparison-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.comparison-legend__dot--appraisal {
  background: rgba(148, 163, 184, 0.7);
}

.comparison-legend__dot--winning {
  background: rgba(56, 189, 248, 0.75);
}

.comparison-legend__dot--real {
  background: rgba(74, 222, 128, 0.75);
}

.comparison-loading {
  width: 100%;
  padding: 36px 12px;
  text-align: center;
  color: #64748b;
  font-size: 0.95rem;
}

@media (max-width: 1200px) {
  .stats-filters__field {
    flex-basis: 180px;
    min-width: 180px;
  }
}

@media (max-width: 1024px) {
  .stats-filters__actions {
    justify-content: flex-start;
  }

  .stats-frame {
    padding: 28px;
  }

  .stat-panel-grid {
    grid-template-columns: 1fr;
  }

  .chart-bars {
    grid-template-columns: repeat(12, minmax(12px, 1fr));
  }
}

@media (max-width: 768px) {
  #stats-page {
    padding: 22px 0 44px;
  }

  #stats-page .stats-page__inner {
    gap: 22px;
  }

  .stats-filters__field {
    flex-basis: 160px;
    min-width: 160px;
  }

  .stats-frame {
    padding: 24px;
  }

  .stat-metric-grid--desktop {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .stats-section__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-section__action {
    width: 100%;
    justify-content: center;
  }

  .stats-board-dark {
    padding: 32px 24px;
  }
}

@media (max-width: 640px) {
  #stats-page .stats-page__inner {
    width: calc(100% - 32px);
    gap: 20px;
  }

  .stats-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .stats-filters__field {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 100%;
  }

  .stats-filters__control {
    width: 100%;
    min-width: 0;
  }

  .stats-filters__actions {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .stats-filters__refresh {
    width: 100%;
    justify-content: center;
  }

  .chart-donut {
    width: 120px;
    height: 120px;
  }

  .stats-board-dark {
    border-radius: 28px;
  }
}