/* ══════════════════════════════════════════════
   common/search-filters.css
   네이버부동산 스타일 검색/정렬 UI 공용 스타일 (2026-08-28, 2026-08-29 축소).
   list.html / agent.html / myprops.html이 공용으로 쓴다. 기존 페이지별
   .lp-dropdown/.ag-dropdown/.mp-dropdown 패널 컨테이너·확인/초기화 버튼은
   그대로 두고, 그 "안쪽"에 들어가는 새 컴포넌트(슬라이더/프리셋/스테퍼/
   라디오리스트/상단 거래유형 세그먼트탭/정렬 드롭다운)만 여기서 정의한다.
   클래스 접두사 sf-(search-filter)로 페이지 접두사와 충돌을 피한다.
   색상은 기존 Hklanders 브랜드 블루(#1a56db)를 그대로 쓴다.

   2026-08-29: 사용자 요청으로 금액/면적 팝업 폭 및 트리거 탭 크기를 추가로
   축소 — 프리셋 그리드 4열->3열(폭을 줄이려면 한 줄에 들어가는 버튼 수를
   줄여야 각 버튼이 좁아짐), 프리셋/스테퍼/타이틀 폰트·패딩 축소.
   ══════════════════════════════════════════════ */

/* ── 드롭다운 패널 헤더: 제목 + X 닫기 버튼 ── */
.sf-dd-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.sf-dd-title { font-size: 12px; font-weight: 700; color: #1e293b; }
.sf-dd-close {
  width: 18px; height: 18px; border-radius: 50%; border: none; background: transparent;
  color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; transition: all .15s;
}
.sf-dd-close:hover { background: #f1f5f9; color: #475569; }

/* 단위(㎡/평) 토글은 기존 .area-unit-toggle 재사용 — 헤더 우측에 나란히 배치 */
.sf-dd-head-actions { display: flex; align-items: center; gap: 6px; }

/* 헤더의 닫기(X) 버튼 앞에 붙는 작은 텍스트형 초기화 링크 (2026-09-01, 테마 종류 드롭다운) */
.sf-dd-head-clear {
  background: none; border: none; padding: 2px 4px;
  font-size: 11px; color: #64748b; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.sf-dd-head-clear:hover { color: #1a56db; }

/* ── 슬라이더 ── */
.sf-slider-label {
  text-align: center; font-size: 12px; font-weight: 700; color: #1a56db;
  margin-bottom: 10px;
}
.sf-slider-wrap { position: relative; height: 18px; margin: 0 8px 10px; }
.sf-slider-track {
  position: absolute; top: 50%; left: 0; right: 0; height: 4px;
  background: #e2e8f0; border-radius: 2px; transform: translateY(-50%);
  cursor: pointer;
}
.sf-slider-fill {
  position: absolute; top: 50%; height: 4px; background: #1a56db;
  border-radius: 2px; transform: translateY(-50%);
}
.sf-slider-handle {
  position: absolute; top: 50%; width: 16px; height: 16px;
  background: #fff; border: 3px solid #1a56db; border-radius: 50%;
  transform: translate(-50%, -50%); cursor: grab; touch-action: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: box-shadow .15s;
}
.sf-slider-handle:hover, .sf-slider-handle:focus-visible { box-shadow: 0 2px 10px rgba(26,86,219,.35); outline: none; }
.sf-slider-handle.dragging { cursor: grabbing; box-shadow: 0 2px 12px rgba(26,86,219,.45); }

/* ── 프리셋 그리드 ── 2026-08-29: 4열->3열(팝업 폭 축소를 위해 한 줄당 버튼 수 축소) */
.sf-preset-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
}
.sf-preset-btn {
  padding: 4px 2px; border-radius: 6px; border: 1px solid #e2e8f0; background: #f8fafc;
  font-size: 9.5px; font-weight: 500; color: #475569; cursor: pointer; transition: all .15s;
  text-align: center; white-space: nowrap;
}
.sf-preset-btn:hover { border-color: #93c5fd; background: #f0f7ff; color: #1a56db; }
.sf-preset-btn.active { border-color: #1a56db; background: #1a56db; color: #fff; font-weight: 700; }

/* ── 스테퍼(−/+ 입력) ── */
/* 2026-08-29: .sf-stepper 자체가 .sf-stepper-row 안의 flex 아이템인데 flex/min-width가
   없어서 내부 input의 min-width:0이 바깥으로 전달되지 않고, 팝업 폭(320px)보다 내용이
   넓어지면 줄어들지 못하고 팝업 밖으로 튀어나갔다(매매/전세, 보증금, 월세 전부 공용
   컴포넌트라 다 같이 영향받음) -- flex:1과 min-width:0을 추가해 둘 다 균등하게 줄어들게 함. */
.sf-stepper { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.sf-stepper input {
  flex: 1; min-width: 0; width: 0; padding: 4px 3px; border-radius: 5px;
  border: 1px solid #e2e8f0; font-size: 11px; color: #1e293b;
  background: #f8fafc; text-align: center;
}
.sf-step-btn {
  flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%;
  border: 1px solid #cbd5e1; background: #fff; color: #475569;
  font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.sf-step-btn:hover { border-color: #1a56db; color: #1a56db; }
.sf-stepper-sep { color: #94a3b8; font-size: 9.5px; flex-shrink: 0; }

.sf-stepper-row { display: flex; align-items: center; gap: 4px; margin-top: 5px; min-width: 0; }
.sf-section-title { font-size: 10px; font-weight: 700; color: #475569; margin: 6px 0 4px; }
.sf-section-title:first-child { margin-top: 0; }

/* ── 정렬: 상시노출 가로 탭 (2026-08-28: 버튼+드롭다운 대신 각 정렬옵션을 탭으로
   항상 노출 — 사용자 요청). 5개(최신순/가격낮은순/가격높은순/면적좁은순/면적넓은순)가
   좁은 영역에 다 안 들어갈 수 있어 가로 스크롤 허용.
   2026-08-29(3차): 낱개로 흩어져 떠 있던 탭들을 옆 필터캡슐(.sf-dd-group)과 같은
   회색 캡슐 안에 묶어서 하나의 세그먼트 컨트롤처럼 보이게 정리(사용자 요청) —
   선택된 탭만 흰 알약으로 떠 보이는 동일한 시각언어를 재사용한다. */
.sf-sort-tabs {
  display: flex; align-items: center; gap: 1px;
  background: #f1f5f9; border-radius: 11px; padding: 2px;
  width: fit-content; max-width: 100%;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sf-sort-tabs::-webkit-scrollbar { display: none; }
.sf-sort-tab {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  min-height: 26px; box-sizing: border-box;
  padding: 0 10px; border-radius: 9px;
  font-size: 11px; font-weight: 600; color: #64748b;
  border: none; background: transparent;
  cursor: pointer; white-space: nowrap; transition: all .15s; user-select: none;
}
.sf-sort-tab:hover { color: #1a56db; }
.sf-sort-tab.active {
  background: #fff; color: #1a56db; font-weight: 700;
  box-shadow: 0 1px 4px rgba(26,86,219,.15);
}

/* ── 필터 버튼 캡슐 그룹 (2026-08-29): 성격이 같은 필터(지역+매물종류+거래유형,
   금액+면적)를 회색 캡슐 하나로 묶어 시각적으로 정리한다.
   페이지별 트리거 버튼 클래스(.lp-filt-btn/.ag-filt-btn)를 모두 지원 —
   버튼 자체의 active 토글은 각 페이지 JS가 그대로 하므로, 선택된 필터만 캡슐 안에서
   흰 알약으로 떠 보이게 스타일만 덧입힌다. list.html/agent.html 공용
   (myprops.html은 아직 이 필터 UI를 안 써서 .mp-filt-* 훅은 필요해지면 추가). */
/* 2026-08-29(3차): 옆 키워드 검색창 높이(list 36px/agent 34px)에 맞추려고
   패딩만으로 높이를 흉내냈더니(9px 16px) 실제로는 검색창보다 눈에 띄게 더 커
   보였다(사용자 스크린샷으로 확인) — 패딩+line-height 조합은 폰트 메트릭에
   따라 오차가 생기기 쉬우므로, min-height를 명시하고 flex로 텍스트를 수직
   중앙정렬하는 방식으로 바꿔 오차 없이 정확히 맞춘다. 아래 기본값은 list
   기준(캡슐 padding 2px×2 + 버튼 32px = 36px)이고, agent(34px)는 agent.css에서
   버튼 min-height만 30px로 덮어써 맞춘다. */
.sf-dd-group {
  display: flex; align-items: center;
  background: #f1f5f9; border-radius: 10px; padding: 2px;
  flex-shrink: 0;
}
.sf-dd-group > div:not(:last-child) { margin-right: 1px; position: relative; }
.sf-dd-group > div:not(:last-child)::after {
  content: ''; position: absolute; right: -1px; top: 50%;
  transform: translateY(-50%); width: 1px; height: 16px; background: #dde3ee;
}
.sf-dd-group .lp-filt-btn, .sf-dd-group .ag-filt-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 32px; box-sizing: border-box;
  border: none; background: transparent; border-radius: 8px;
  padding: 0 14px; font-size: 12.5px; color: #64748b; white-space: nowrap;
}
.sf-dd-group .lp-filt-btn:hover, .sf-dd-group .ag-filt-btn:hover { color: #1a56db; }
.sf-dd-group .lp-filt-btn.active, .sf-dd-group .ag-filt-btn.active {
  background: #fff; color: #1a56db; box-shadow: 0 1px 4px rgba(26,86,219,.15);
}
/* 2026-08-30(2차): 지역/매물종류/거래유형/금액/면적 — 원래 두 개의 캡슐(sf-dd-group)로
   나뉘어 있던 걸(지역·매물종류·거래유형 캡슐 + 금액·면적 캡슐) list.html/agent.html
   양쪽 다 하나의 캡슐로 합쳤다(사용자 요청 — "5개 배지를 하나로 관리하자"). 위에서
   시도했던 라벨 글자수 비례 폭 배분(#btn-type/#btn-tx만 더 넓게)도 "균등배분"
   요청으로 되돌린다 — 기본 상태(필터 미선택) 5개 모두 라벨 길이와 무관하게 폭을
   고정값으로 통일한다(가장 긴 라벨인 "매물 종류 ▾"/"거래 유형 ▾"의 실측 텍스트
   폭 63px 기준으로 여유 있게 92px — 1024px 폭의 데스크톱 창에서도 겹치지 않는
   걸 실측 확인함). ID 선택자라 특정도가 아래 @media(max-width:768px) 모바일
   규칙(클래스 선택자)보다 높아서 그냥 두면 모바일에서도 이겨버리므로,
   min-width:769px로 감싸서 데스크톱에만 적용되게 한다(모바일은 기존
   flex:1 균등분배 + ellipsis 로직 그대로 유지 — 캡슐이 하나로 합쳐지면서
   모바일도 5개가 자동으로 정확히 균등폭이 된다).
   display:block인 이유는 모바일 쪽과 동일 — flex 컨테이너에서는
   text-overflow:ellipsis가 정상 동작하지 않는다.
   세로 중앙정렬은 align-items 대신 height와 동일한 line-height로 처리한다.

   2026-08-30(3차): "PC는 공간 많은데 굳이 항상 줄여야 하나" 사용자 피드백 반영 —
   기본(미선택) 상태는 위 고정폭 92px 그대로 유지해 5개 균등폭을 지키되, 실제로
   필터가 선택된 탭(JS가 toggle('active')하는 .active 클래스 — region-select.js/
   list.js 전 5개 버튼에 공통 적용됨)만 폭을 콘텐츠에 맞춰 늘려서 PC에서는 굳이
   줄임표시(...)를 안 쓰고 라벨을 다 보여준다(모바일은 화면이 좁아 선택 여부와
   무관하게 위 고정폭+ellipsis 그대로 — 모바일 쪽은 손대지 않음). 다만 유형을
   여러 개 골라 라벨이 극단적으로 길어지는 경우(예: "아파트,오피스텔,단독주택,
   상가 ▾")까지 무제한으로 늘어나면 다른 탭들이 화면 밖으로 밀려날 수 있어
   max-width로 상한만 두고, 그 이상은 여전히 "..."로 자른다. */
@media (min-width: 769px) {
  #btn-region, #btn-type, #btn-tx, #btn-price, #btn-area {
    display: block; width: 92px; height: 32px; line-height: 32px; min-height: 0;
    text-align: center; overflow: hidden; text-overflow: ellipsis; padding: 0;
  }
  /* .lp-filt-btn.active(클래스, 특정도 30)는 위 #btn-region 등(id, 특정도 100)에
     막혀 width:auto가 적용 안 되므로, id+class로 다시 걸어 특정도(110)를 올린다. */
  #btn-region.active, #btn-type.active, #btn-tx.active, #btn-price.active, #btn-area.active {
    display: inline-block; width: auto; min-width: 92px; max-width: 220px; padding: 0 14px;
  }
}

/* 초기화: 텍스트 알약 대신 원형 아이콘 버튼 — 모바일 검색행의 초기화 아이콘과 톤 통일 */
.lp-filt-reset-icon, .ag-filt-reset-icon {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0; padding: 0;
  border: 1.5px solid #f1f5f9; background: #f8fafc; border-radius: 50%;
  color: #94a3b8; cursor: pointer; transition: all .15s;
}
.lp-filt-reset-icon:hover, .ag-filt-reset-icon:hover { border-color: #cbd5e1; color: #64748b; background: #fff; }

/* ── 면적(#dd-area) 전용 조정 (2026-08-29): 프리셋 그리드는 4열로 반듯하게 정렬.
   직접입력 칸은 금액과 동일한 .sf-stepper(−/+ 버튼) 컴포넌트로 통일했으므로
   별도 폭 지정 불필요(.sf-stepper가 flex:1로 알아서 균등 분배됨). ── */
#dd-area .sf-preset-grid { grid-template-columns: repeat(4, 1fr); }

#dd-tx .lp-dd-options, #dd-tx .ag-dd-options {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
}
#dd-tx .lp-dd-chip, #dd-tx .ag-dd-chip {
  padding: 7px 4px; font-size: 11.5px; border-radius: 14px;
  text-align: center; justify-content: center;
}

/* ── 모바일 ── */
@media (max-width: 768px) {
  .sf-preset-btn { padding: 6px 3px; font-size: 11px; }
  .sf-slider-handle { width: 22px; height: 22px; }
  .sf-sort-tab { padding: 4px 9px; font-size: 10.5px; }
  .sf-stepper input { font-size: 16px; } /* iOS 자동 확대 방지 */
  /* 금액/면적 팝업은 인라인 width:320px를 쓰므로(list.html/agent.html 공용 id),
     모바일 풀스크린 바텀시트에서는 !important로 되돌려야 인라인을 이길 수 있다. */
  #dd-price, #dd-area, #dd-tx { width: 100% !important; min-width: 0 !important; }

  /* 캡슐(.sf-dd-group)이 내용 크기만큼만 좁게 잡혀 화면 오른쪽에 빈 공간이
     남던 문제 — 캡슐과 그 안의 버튼을 모두 flex:1로 늘려서 화면 가로폭을
     꽉 채우게 한다(사용자 요청).
     2026-08-29(10차): 예전엔 라벨(예: '매물 종류', 또는 여러 유형을 콤마로
     이어붙인 긴 라벨)이 좁은 버튼 폭보다 길 수 있어 nowrap을 풀어 2줄까지
     자연스럽게 줄바꿈되게 뒀는데, 탭 5개 중 하나만 2줄이 되면 그 행 전체
     높이가 늘어나 다른 탭들과 높이가 안 맞아 보이는 문제가 있었다(사용자
     요청 — 줄바꿈 없이 한 줄로). 폰트/패딩을 한 번 더 줄이고 nowrap +
     ellipsis로 되돌려서, 웬만한 라벨은 한 줄에 들어가고 그래도 넘치는
     극단적인 경우(유형을 여러 개 골라 라벨이 아주 길어진 경우)만 "..."로
     말줄임되게 한다(2줄로 튀는 것보다 훨씬 안정적). */
  .sf-dd-group { flex: 1; min-width: 0; }
  .sf-dd-group > div { flex: 1; min-width: 0; }
  /* 2026-08-30: display:flex(기본 규칙, PC용)가 모바일에서도 그대로 상속되고 있었는데,
     flex 컨테이너는 자기 텍스트(익명 flex 아이템)에 대해 text-overflow:ellipsis가
     제대로 적용되지 않는(크로미움 등에서 검증됨) 문제가 있어 — 바로 위 주석에서 의도한
     "말줄임" 처리가 실제로는 동작하지 않고 긴 라벨이 옆 탭 위로 텍스트가 흘러넘쳐
     보이는 버그였다(사용자 요청 — "선택해도 탭이 커지거나 늘어나지 말고 크기 고정"
     확인 과정에서 발견). display:block으로 바꾸면 이 컨테이너가 더 이상 flex가
     아니게 되어 overflow/ellipsis가 정상 동작한다. 세로 중앙정렬은 flex의
     align-items 대신 위아래 대칭 padding(6px)만으로 충분(min-height는 32px(PC용
     버튼 높이)를 그대로 두면 콘텐츠보다 커서 위로 쏠려 보이므로 0으로 리셋). */
  .sf-dd-group .lp-filt-btn, .sf-dd-group .ag-filt-btn {
    display: block; min-height: 0;
    width: 100%; text-align: center; white-space: nowrap; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis;
    padding: 6px 2px; font-size: 10px;
  }
}