/* ============================================================================
   매물 지도 필터 (2026-10-26 집팔고-009) — map.html · agent/map.html 공용
   PC(769px~) = 시안 A 칩 줄 + 드롭다운 · 폰(~768px) = 시안 B 「필터」 한 장. 색 · 둥글기는 tokens.css 그대로.
   ⚠️ 폭 경계 768px 은 tokens.css 모바일 값(--header-h · --filterbar-h)과 같아야 한다 — zp-filter2.js PHONE_MQ 도 같은 값.
   ⚠️ --filterbar-h 는 zp-filter2.js 가 바 실제 높이로 덮어쓴다(조건 줄이 생기면 바가 커진다).
   ========================================================================== */
#zp-filterbar{ position:relative; z-index:60; background:var(--white); }
body.zf-open #zp-filterbar{ z-index:3000; }

.zf-bar{ position:relative; display:flex; align-items:center; gap:10px; padding:10px var(--sp-5); border-bottom:1px solid var(--ink-150); background:var(--white); }
.zf-search{ position:relative; flex:0 0 240px; min-width:0; margin:0; }
.zf-search input{ width:100%; height:44px; border:1.5px solid var(--ink-200); border-radius:var(--radius-pill); padding:0 14px 0 40px; font:inherit; font-size:14px; color:var(--ink-900); background:var(--white); -webkit-appearance:none; appearance:none; }
.zf-search.has-x input{ padding-right:44px; }
.zf-search input::-webkit-search-cancel-button{ -webkit-appearance:none; display:none; }
.zf-search input::placeholder{ color:var(--ink-500); }
.zf-search input:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(214,59,59,.12); }
.zf-search__ic{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-500); pointer-events:none; }
.zf-search__x{ position:absolute; right:0; top:0; width:44px; height:44px; border:0; background:none; color:var(--ink-500); font-size:14px; cursor:pointer; }

.zf-chips{ display:flex; flex-wrap:wrap; gap:6px; flex:1; min-width:0; align-items:center; }
.zf-chip, .zf-filterbtn{ height:44px; padding:0 14px; border:1px solid var(--ink-200); border-radius:var(--radius-pill); background:var(--white); font:inherit; font-size:14px; font-weight:600; color:var(--ink-800); white-space:nowrap; display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.zf-chip:hover, .zf-filterbtn:hover{ border-color:var(--ink-400); }
.zf-chip.is-on, .zf-filterbtn.is-on{ border-color:var(--color-primary); color:var(--color-primary); font-weight:800; background:var(--color-primary-lighter); }
.zf-chip.is-zp:not(.is-on){ color:var(--color-primary); }
.zf-chip[aria-expanded="true"]{ border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(214,59,59,.10); }
/* 10-28 집팔고-004 필터 꺾쇠(부대표 10:52 「화살표가 뭐냐 · 사이즈도 안 맞고 위치도 안 맞고」): 글자 「⌄」 는 글꼴마다 작고 아래로 처졌다 →
   글자는 숨기고(화면 읽기는 aria-hidden 그대로) 선 두 개로 그린 같은 크기 꺾쇠를 글자 높이 가운데에. 펼치면 위로. */
.zf-caret{ font-size:0; line-height:0; display:inline-block; flex-shrink:0; width:7px; height:7px; margin-left:5px; color:var(--ink-500);
  border-right:1.7px solid currentColor; border-bottom:1.7px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .15s; }
.zf-chip[aria-expanded="true"] .zf-caret{ transform:translateY(2px) rotate(-135deg); }
.zf-chip.is-on .zf-caret, .zf-chip.is-zp .zf-caret{ color:var(--color-primary); }
.zf-n, .zf-filterbtn i{ font-style:normal; background:var(--color-primary); color:var(--white); border-radius:var(--radius-pill); min-width:20px; height:20px; font-size:12px; font-weight:800; display:inline-grid; place-items:center; padding:0 6px; }
.zf-count{ font-size:13.5px; color:var(--ink-600); white-space:nowrap; margin-left:auto; flex-shrink:0; }
.zf-count b{ color:var(--color-primary); font-weight:800; font-size:15px; }
.zf-count[aria-busy="true"] b{ opacity:.45; }
.zf-filterbtn{ padding:0 16px; font-weight:800; flex-shrink:0; }
.zf-dealseg .zf-seg{ flex-wrap:nowrap; }

/* 적용된 조건 줄 */
.zf-applied{ display:flex; gap:6px; align-items:center; padding:6px var(--sp-5); border-bottom:1px solid var(--ink-150); background:var(--ink-50); overflow-x:auto; scrollbar-width:none; }
.zf-applied::-webkit-scrollbar{ display:none; }
.zf-tag{ flex:none; min-height:36px; padding:0 8px 0 12px; border-radius:var(--radius-pill); border:1px solid var(--color-primary); background:var(--white); color:var(--color-primary); font:inherit; font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:6px; position:relative; cursor:pointer; }
.zf-tag::after{ content:''; position:absolute; inset:-4px 0; }   /* 누르는 자리 44px */
.zf-tag span{ width:20px; height:20px; border-radius:50%; background:var(--color-primary-light); display:grid; place-items:center; font-size:10px; }
.zf-reset{ flex:none; min-height:36px; padding:0 12px; border:0; background:none; color:var(--ink-600); font:inherit; font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:3px; position:relative; cursor:pointer; }
.zf-reset::after{ content:''; position:absolute; inset:-4px 0; }

/* 드롭다운(PC · 시안 A) — 바 기준 절대 위치, 왼쪽 · 위는 zp-filter2.js 가 누른 칩 아래로 맞춘다 */
.zf-pop{ position:absolute; top:62px; left:0; width:392px; max-width:calc(100vw - 16px); background:var(--white); border:1px solid var(--ink-150); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:80; display:flex; flex-direction:column; max-height:640px; }
.zf-pop__head{ display:flex; align-items:center; gap:8px; padding:12px 16px 4px; font-size:16px; }
.zf-x{ margin-left:auto; width:44px; height:44px; margin-right:-10px; border:0; background:none; font-size:16px; color:var(--ink-600); cursor:pointer; border-radius:var(--radius-sm); }
.zf-pop__body{ padding:4px 16px 14px; overflow-y:auto; overscroll-behavior:contain; }
.zf-zp{ font-size:11px; font-weight:800; color:var(--color-primary); background:var(--color-primary-light); border-radius:4px; padding:2px 6px; vertical-align:middle; }

/* 공통 조각 */
.zf-seg{ display:flex; flex-wrap:wrap; gap:6px; }
.zf-pill{ min-height:44px; padding:0 16px; border:1px solid var(--ink-200); border-radius:var(--radius-md); background:var(--white); font:inherit; font-size:14px; font-weight:600; color:var(--ink-800); cursor:pointer; }
.zf-pill:hover{ border-color:var(--ink-400); }
.zf-pill.is-on{ border-color:var(--color-primary); background:var(--color-primary); color:var(--white); font-weight:800; }
.zf-dealseg .zf-pill{ border-radius:var(--radius-pill); padding:0 14px; }
.zf-sub{ font-size:13px; font-weight:800; color:var(--ink-700); margin:14px 0 8px; }
.zf-sub__note{ font-weight:500; color:var(--ink-500); margin-left:4px; }
.zf-group{ margin:18px 0 0; padding-top:12px; border-top:1px dashed var(--ink-200); font-size:12px; font-weight:800; color:var(--color-primary); }
.zf-range{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.zf-num{ flex:1; min-width:0; position:relative; display:flex; align-items:center; height:52px; border:1.5px solid var(--ink-200); border-radius:var(--radius-md); padding:14px 10px 0; background:var(--white); cursor:text; }
.zf-num:focus-within{ border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(214,59,59,.12); }
.zf-num__cap{ position:absolute; left:10px; top:6px; font-size:11px; font-weight:700; color:var(--ink-500); }
.zf-num input{ flex:1; min-width:0; width:100%; border:0; outline:none; font:inherit; font-size:17px; font-weight:800; color:var(--ink-900); background:none; padding:0; }
.zf-num input::placeholder{ font-weight:500; color:var(--ink-400); font-size:14px; }
.zf-num__unit{ font-size:14px; font-weight:700; color:var(--ink-600); margin-left:4px; white-space:nowrap; }
.zf-num--one{ padding-top:0; height:48px; max-width:240px; }
.zf-range__dash{ color:var(--ink-500); font-weight:700; }
.zf-hint{ font-size:12.5px; color:var(--ink-500); margin:8px 0 0; line-height:1.5; }
.zf-hint--top{ margin:0 0 10px; }
.zf-hint b{ color:var(--color-primary); }
.zf-quick{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.zf-qchip{ min-height:40px; padding:0 12px; border-radius:var(--radius-pill); border:1px dashed var(--ink-300); background:var(--white); font:inherit; font-size:13px; font-weight:600; color:var(--ink-700); position:relative; cursor:pointer; }
.zf-qchip::after{ content:''; position:absolute; inset:-2px 0; }
.zf-qchip.is-on{ border:1px solid var(--color-primary); color:var(--color-primary); background:var(--color-primary-lighter); font-weight:800; }
.zf-unit{ display:inline-flex; border:1px solid var(--ink-200); border-radius:var(--radius-pill); padding:3px; margin-bottom:8px; }
.zf-unit__b{ min-width:56px; height:38px; border:0; border-radius:var(--radius-pill); background:none; font:inherit; font-size:13.5px; font-weight:700; color:var(--ink-600); position:relative; cursor:pointer; }
.zf-unit__b::after{ content:''; position:absolute; inset:-3px 0; }
.zf-unit__b.is-on{ background:var(--ink-900); color:var(--white); }

/* 두 손잡이 막대(폰) — 손잡이 28px · 누르는 줄 44px */
.zf-slider{ position:relative; height:44px; margin:6px 14px 0; }
.zf-slider__track{ position:absolute; left:0; right:0; top:20px; height:4px; border-radius:2px; background:var(--ink-150); }
.zf-slider__fill{ position:absolute; top:0; bottom:0; background:var(--color-primary); border-radius:2px; }
.zf-slider input{ position:absolute; left:-14px; width:calc(100% + 28px); top:0; height:44px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; }
.zf-slider input::-webkit-slider-runnable-track{ height:44px; background:transparent; }
.zf-slider input::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:28px; height:28px; margin-top:8px; border-radius:50%; background:var(--white); border:2px solid var(--color-primary); box-shadow:0 2px 6px rgba(0,0,0,.18); cursor:pointer; }
.zf-slider input::-moz-range-track{ background:transparent; }
.zf-slider input::-moz-range-thumb{ pointer-events:auto; width:24px; height:24px; border-radius:50%; background:var(--white); border:2px solid var(--color-primary); }
.zf-slider input:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(214,59,59,.25); }

/* 입주 날짜 · 달력 */
.zf-datebox{ min-height:44px; border:1.5px solid var(--ink-200); border-radius:var(--radius-md); display:flex; align-items:center; padding:0 12px; font-size:14px; color:var(--ink-500); }
.zf-datebox.is-on{ border-color:var(--color-primary); color:var(--ink-800); }
.zf-datebox b{ color:var(--color-primary); font-size:16px; margin-right:4px; }
.zf-cal{ margin-top:8px; border:1px solid var(--ink-150); border-radius:var(--radius-md); padding:4px 8px 8px; }
.zf-cal__head{ display:flex; align-items:center; justify-content:space-between; }
.zf-cal__head b{ font-size:15px; }
.zf-cal__nav{ width:44px; height:44px; border:0; background:none; font-size:24px; color:var(--ink-700); cursor:pointer; border-radius:var(--radius-sm); }
.zf-cal__nav:disabled{ color:var(--ink-200); cursor:default; }
.zf-cal__wk, .zf-cal__grid{ display:grid; grid-template-columns:repeat(7, 1fr); text-align:center; }
.zf-cal__wk span{ font-size:12px; color:var(--ink-500); padding:4px 0; }
.zf-day{ width:100%; max-width:44px; height:44px; margin:0 auto; border:0; background:none; border-radius:50%; font:inherit; font-size:14.5px; font-weight:600; color:var(--ink-900); cursor:pointer; }
.zf-day:hover:not(:disabled){ background:var(--ink-100); }
.zf-day:disabled{ color:var(--ink-300); cursor:default; }
.zf-cal .is-sun{ color:var(--color-primary); } .zf-cal .is-sat{ color:var(--color-info); }
.zf-day:disabled.is-sun, .zf-day:disabled.is-sat{ color:var(--ink-300); }
.zf-day.is-today{ box-shadow:inset 0 0 0 1px var(--ink-300); }
.zf-day.is-on, .zf-day.is-on.is-sun, .zf-day.is-on.is-sat{ background:var(--color-primary); color:var(--white); font-weight:800; }
.zf-check{ display:flex; align-items:center; gap:8px; min-height:44px; font-size:13.5px; color:var(--ink-700); cursor:pointer; }
.zf-check input{ width:20px; height:20px; accent-color:var(--color-primary); }

/* 바닥 단추 */
.zf-foot{ display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--ink-150); background:var(--white); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.zf-foot__reset{ flex:0 0 auto; height:48px; padding:0 16px; border:1px solid var(--ink-200); border-radius:var(--radius-md); background:var(--white); font:inherit; font-weight:700; color:var(--ink-700); cursor:pointer; }
.zf-foot__go{ flex:1; height:48px; border:0; border-radius:var(--radius-md); background:var(--color-primary); color:var(--white); font:inherit; font-size:15.5px; font-weight:800; cursor:pointer; }
.zf-foot__go[aria-busy="true"]{ opacity:.85; }

/* 폰 한 장(시안 B) */
.zf-dim{ position:fixed; inset:0; background:rgba(0,0,0,.32); z-index:70; }
.zf-drawer{ position:fixed; z-index:80; inset:0; background:var(--white); display:flex; flex-direction:column; }
.zf-drawer .zf-pop__head{ padding:10px 16px 2px; font-size:18px; }
.zf-jump{ display:flex; gap:6px; overflow-x:auto; padding:4px 16px 10px; border-bottom:1px solid var(--ink-150); scrollbar-width:none; }
.zf-jump::-webkit-scrollbar{ display:none; }
.zf-jump a{ flex:none; min-height:36px; display:inline-flex; align-items:center; padding:0 12px; border-radius:var(--radius-pill); font-size:13px; font-weight:700; color:var(--ink-600); text-decoration:none; background:var(--ink-100); position:relative; }
.zf-jump a::after{ content:''; position:absolute; inset:-4px 0; }
.zf-jump a.is-on{ color:var(--color-primary); background:var(--color-primary-light); }
.zf-drawer__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:0 16px 24px; position:relative; }
.zf-sec{ padding:16px 0 18px; border-bottom:1px solid var(--ink-150); }
.zf-sec:last-child{ border-bottom:0; }
.zf-sec h3{ font-size:15.5px; font-weight:800; margin:0 0 10px; }
.zf-drawer .zf-foot{ border-radius:0; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }

/* 키보드 초점 */
.zf-root button:focus-visible, .zf-root a:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }

/* 중간 폭(769~1180): 검색칸을 줄이고 칩은 다음 줄로 접는다 */
@media (max-width: 1180px) and (min-width: 769px){
  .zf-search{ flex-basis:200px; }
  .zf-chip{ padding:0 12px; font-size:13.5px; }
}

/* 폰(~768px) = 시안 B */
@media (max-width: 768px){
  .zf-bar{ flex-wrap:wrap; padding:8px var(--sp-4); gap:8px; }
  .zf-search{ flex:1 1 100%; }
  .zf-dealseg{ flex:1; min-width:0; }
  .zf-dealseg .zf-pill{ padding:0 12px; font-size:13.5px; }
  .zf-count{ font-size:13px; }
  .zf-applied{ padding:4px var(--sp-4) 6px; }
  .zf-applied .zf-reset{ order:-1; padding:0 8px; }
  .zf-range{ gap:6px; }
  .zf-num{ padding-left:8px; padding-right:8px; }
  .zf-num--one{ max-width:none; }
  body.zf-lock{ overflow:hidden; }
  /* 상세를 보는 중에는 목록용 바를 감춘다(예전 .zp-filterbar 와 같은 규칙 — common.css 1024px 구간) */
}
/* zp-299c 집테관리-299(11-06 15:03 김정훈 팀장 「①」 = 10%) — 휴대폰(768 이하 · 지금 휴대폰 필터 규칙과 같은 기준)만 검색 필터 1.1배 · PC · 태블릿 그대로
   zoom 안 씀 · 지금 값(common.js 가 넣는 .z214-chips · zp-filter2.js 가 넣는 .zf-all · 이 파일 .zf-*)의 글자 · 높이 · 안쪽 여백 · 사이 틈만 ×1.1
   지도 위 칩 36→39.6(.zf-bar zoom .9 라 보이는 높이 32.4→35.6) · 글자 13.5→14.85 / 시트 칩 44→48.4 · 14→15.4 · 빠른 칩 40→44 · 13→14.3
   칩 줄 위아래 여백도 ×1.1 → common.css 의 오른쪽 끝 흐림 그림(44 중 2~38)과 칩 자리 비율 그대로 · 색 · 모서리 · 숨김 규칙 · js 안 건드림 */
@media (max-width: 768px){
  html body #zp-filterbar .z214-chips{ gap:6.6px !important; padding:2.2px 2.2px 6.6px !important; }
  html body #zp-filterbar .z214-chips > button{ height:39.6px !important; padding:0 13.2px !important; gap:4.4px !important; font-size:14.85px !important; }
  html body #zp-filterbar .z214-chips svg{ width:16.5px !important; height:16.5px !important; }
  html body .zf-drawer .zf-pop__head b{ font-size:19.8px !important; }
  html body .zf-drawer .zf-jump{ gap:6.6px !important; }
  html body .zf-drawer .zf-jump a{ min-height:39.6px !important; padding:0 13.2px !important; font-size:14.3px !important; }
  html body .zf-drawer .zf-sec h3{ font-size:17.05px !important; }
  html body .zf-drawer .zf-sec h3.zf-h-all{ gap:6.6px !important; }
  html body .zf-drawer .zf-sub{ font-size:14.3px !important; }
  html body .zf-drawer .zf-all{ font-size:13.75px !important; }
  html body .zf-drawer .zf-all button{ min-height:33px !important; padding:6.6px 7.7px !important; font-size:13.75px !important; }
  html body .zf-drawer .zf-all i{ font-size:12.1px !important; }
  html body .zf-drawer .zf-seg{ gap:6.6px !important; }
  html body .zf-drawer .z214-fl .zf-seg{ gap:8.8px !important; }
  html body .zf-drawer .zf-pill{ min-height:48.4px !important; padding:0 17.6px !important; font-size:15.4px !important; }
  html body .zf-drawer .zf-quick{ gap:6.6px !important; }
  html body .zf-drawer .zf-qchip{ min-height:44px !important; padding:0 13.2px !important; font-size:14.3px !important; }
  html body .zf-drawer .zf-unit__b{ min-width:61.6px !important; height:41.8px !important; font-size:14.85px !important; }
  html body .zf-drawer .z214-pm{ width:37.4px !important; height:44px !important; font-size:18.7px !important; }
  html body .zf-drawer .z214-w{ gap:4.4px !important; }
}
/* zp-299c 끝 */
@media (max-width: 1024px){
  body.zp-detail-open #zp-filterbar{ display:none; }
}