body { font-family: 'Noto Sans KR', sans-serif; }
.login-btn { border-radius: 0.75rem; border: 1px solid #e5e7eb; background-color: white;}
.scroll-smoothy { scrollbar-width: thin; }
.filter-chip { border-radius: 0.75rem; border: 1px solid #e5e7eb; background-color: white; padding: 0.25rem 0.5rem; font-size: 0.75rem; transition: all 0.2s; } 
.filter-chip:hover { background-color: #f9fafb; } 
.filter-chip.active { background-color: #059a50; border-color: #059a50; color: white; font-weight: 600; }
.filter-chip.applied { background-color: #059a50; /* brand */ border-color: #059a50; color: #fff; font-weight: 600; }

/* 셀렉트처럼 보이는 칩 */
.nf-select{ position: relative; display:inline-flex; align-items:center; gap:.25rem; padding:.375rem .75rem; font-size:.85rem; border:1px solid #e5e7eb; border-radius:.5rem; background:#fff; }
.nf-select::after{ content:""; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid #6b7280; margin-left:.25rem; }
.nf-select.applied{ background:#059a50; border-color:#059a50; color:#fff; font-weight:600; }
.nf-select.applied::after{ border-top-color:#fff; }

#nfDropdowns { position:absolute; left:0; right:0; top:100%; z-index:30; }
/* 드롭다운 패널 */
.nf-panel{ position:absolute; display:none; margin-top:8px; background:#fff; border:1px solid #e5e7eb; border-radius:.75rem; box-shadow:0 10px 30px rgba(0,0,0,.08); width:auto;              /* 내용 기반 */ max-width:420px;         /* 데스크톱 상한 */ min-width:var(--minw,280px); /* 칩 폭 이상으로 */ }
.nf-panel.open{ display:block; }
.nf-input{ width:8rem; border:1px solid #e5e7eb; background:#f9fafb; border-radius:.5rem; padding:.375rem .5rem; }
.nf-check, .nf-radio{ display:inline-flex; align-items:center; gap:.5rem; }
.nf-range{ position:absolute; inset:0; width:100%; background:transparent; -webkit-appearance:none; appearance:none; }
.nf-range::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:9999px; background:#3b82f6; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.nf-range::-moz-range-thumb{ width:16px; height:16px; border-radius:9999px; background:#3b82f6; border:none; }
.nf-range-track{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:3px; background:#e5e7eb; border-radius:2px; pointer-events:none; }
.nf-reset{ border:1px solid #e5e7eb; background:#fff; padding:.375rem .75rem; border-radius:.5rem; font-size:.75rem; }

/* 체크박스 숨김 */ 
.nf-check input[type="checkbox"] { display: none; } /* 기본 라벨 스타일 */ 
.nf-check { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; border: 1px solid #999; border-radius: 6px; background-color: #fff; color: #333; cursor: pointer; font-size: 14px; user-select: none; transition: all 0.15s ease; } /* 호버 시 */ 
.nf-check:hover { border-color: #059a50; color: #059a50; } /* 선택된 상태 — label에 적용 */ 
.nf-check:has(input[type="checkbox"]:checked) { background-color: #059a50; border-color: #059a50; color: #fff; }

/* 라디오 숨김 */ 
.nf-radio input[type="radio"] { display: none; } /* 기본 스타일 */ 
.nf-radio { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; border: 1px solid #999; border-radius: 6px; background-color: #fff; color: #333; cursor: pointer; font-size: 14px; user-select: none; transition: all 0.15s ease; } /* 호버 */ 
.nf-radio:hover { border-color: #059a50; color: #059a50; } /* 선택 상태 — :has() 사용 */ 
.nf-radio:has(input[type="radio"]:checked) { background-color: #059a50; border-color: #059a50; color: #fff; }

/* 모바일에선 전체폭에 가깝게 */
@media (max-width: 640px){
  .nf-panel{ left:16px !important; right:16px !important; width:auto; max-width:none; }
}

.slider-wrap {
    position: relative;
    width: 100%;
    padding: 10px 0;
}
.slider-wrap {
  position: relative;
  height: 25px;            /* thumb 높이에 맞춰 여유 */
}

/* 실제 바(회색 줄) — 한 줄만 */
.slider-track {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: #ddd;
  border-radius: 2px;
  transform: translateY(-50%);
  z-index: 1;
}

/* 두 슬라이더는 '같은 자리'에 겹친다 */
.range {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 0; right: 0; top: 50%;
  width: 100%;
  height: 4px;
  background: transparent;     /* ← 바는 div가 그려주므로 투명 */
  transform: translateY(-50%);
  pointer-events: none;        /* 트랙 클릭은 막고 */
  z-index: 2;                  /* 기본 z-index */
}

/* 왼쪽(최소) 슬라이더를 항상 위로 */
#depositRangeMin, #rentRangeMin { z-index: 3; }

/* 크롬/사파리 thumb */
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  background: #fff;
  border: 2px solid #999;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;        /* thumb는 드래그 가능 */
  /* 트랙 중앙에 오도록 보정 */
  margin-top: -8px;            /* (20-4)/2 */
}

/* 파폭 thumb */
.range::-moz-range-thumb {
  width: 20px; height: 20px;
  background: #fff;
  border: 2px solid #999;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
}

/* 파폭에서 트랙 */
.range::-moz-range-track {
  height: 4px; background: transparent;
}


.slider-values {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
}

/* 타일 그리드 */
.seg-grid{
  display:grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap:0; /* 테두리 맞물리게 */
  border:1px solid #d1d5db;
  border-radius:5px;
  overflow:hidden;
  max-width: 420px;
}

/* 기본 타일 */
.seg{
  display:flex; align-items:center; justify-content:center;
  padding:.6rem 0;
  font-size:14px;
  background:#fff;
  color:#374151;
  border-right:1px solid #d1d5db;
  border-bottom:1px solid #d1d5db;
}
.seg:nth-child(4n){ border-right:none; }      /* 맨 오른쪽 */
.seg:nth-last-child(-n+4){ border-bottom:none;}/* 마지막 행 */

/* 활성 */
.seg.active{
  font-weight:700;
  color:#fff;
  background:#059a50;
  box-shadow: inset 0 0 0 1px #059a50;
}

/* 호버 */
.seg:hover{ 
    background:#059a50; 
    color: #fff;
}


/* 지도 컨테이너 */
#map { width: 100%; height: 100%; }

/* 선택된 클러스터 하이라이트 배지 */
.cluster-selected {
    position: relative;
    border-radius: 9999px;
    background: #fff;               /* 흰 배경으로 아래 초록 배지를 가린다 */
    color: #06c167;                 /* 브랜드 초록 글자 */
    border: 2px solid #06c167;      /* 초록 테두리 */
    font-weight: 900;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.20);
    pointer-events: none;           /* 클릭 방해하지 않게 */
    z-index: 9999;
}
/* 클러스터 크기 단계(너가 clusterStyles에서 쓰는 크기와 맞춤) */
.cluster-selected.t0 { width: 28px; height: 28px; line-height: 28px; font-size: 12px; }
.cluster-selected.t1 { width: 34px; height: 34px; line-height: 34px; font-size: 13px; }
.cluster-selected.t2 { width: 40px; height: 40px; line-height: 40px; font-size: 14px; }

#listPane.detail-open .list-header { display:none; }

/* 행 선택 상태(키보드 포커스 등) 표시용 */
#searchDropdown .sg-item[aria-selected="true"] {
    background: rgba(5, 154, 80, 0.12);
}

/* 스크롤바 살짝 얇게(크로미움/사파리) */
#searchDropdown::-webkit-scrollbar { height: 10px; width: 5px; }
#searchDropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 9999px; }

/* 뱃지 타입별 색상(텍스트값으로 간단 매칭) */
#searchDropdown .badge { font-weight: 600; }

#searchDropdown .no-result {
    cursor: default;
    color: #6b7280; /* text-gray-500 */
}
#searchDropdown .no-result:hover { background: transparent; }

#searchDropdown .suggest-item { cursor: pointer; }
#searchDropdown .suggest-item:hover { background: rgba(0,0,0,0.04); }

/* 검색 영역 기본 테두리 */
#globalSearchForm .search-container {
    border: 1px solid #e5e7eb; /* tailwind gray-200 */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 포커스 시 강조 */
#globalSearchForm .search-container:focus-within {
    border-color: #06c167;
    box-shadow: 0 0 0 3px rgba(6, 193, 103, 0.2);
}