/**
 * 매물 검색: 거래 유형 → 기본 조건 → 상세 조건.
 * 컨트롤은 Web Awesome이 그린다. 이 파일은 배치와 간격만 소유한다.
 * --w-listing-filter-pad/gap/detail-pad로 좁은 화면에서도 테두리 안쪽 여백을 보장한다.
 */
.w-listing-filter {
    --w-listing-filter-pad: 1.25rem;
    --w-listing-filter-gap: 1rem;
    --w-listing-filter-detail-pad: 1rem;
    display: flex;
    flex-direction: column;
    gap: var(--w-listing-filter-gap);
    min-width: 0;
    padding: var(--w-listing-filter-pad);
    border: 1px solid var(--site-border, var(--wa-color-surface-border));
    border-radius: var(--site-card-radius, var(--wa-panel-border-radius));
    background: var(--site-bg, var(--wa-color-surface-default));
    margin-bottom: 1.5rem;
}
.w-listing-filter__enter {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.w-listing-filter__pills,
.w-listing-filter__actions,
.w-listing-filter__advanced-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
}
.w-listing-filter__compact {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--w-listing-filter-gap);
}
.w-listing-filter__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1 1 9.5rem;
    min-width: 0;
    max-width: 100%;
}
.w-listing-filter__field--wide { flex: 2 1 13rem; }
.w-listing-filter__field--narrow { flex: 1 1 6.5rem; }
.w-listing-filter__field--range { flex: 1.5 1 13rem; }
.w-listing-filter__label {
    color: var(--site-text, var(--wa-color-text-normal));
    font-size: var(--wa-font-size-s);
    line-height: var(--wa-form-control-label-line-height);
    font-weight: var(--wa-form-control-label-font-weight);
}
.w-listing-filter__control { width: 100%; min-width: 0; }
.w-listing-filter__range { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.w-listing-filter__range > wa-input { flex: 1; width: 0; }
/* 범위의 공통 제목은 한 번만 보이고, 최소/최대의 개별 접근성 이름은 유지한다. */
.w-listing-filter__range > wa-input::part(label) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.w-listing-filter__sep { flex: 0 0 auto; color: var(--site-muted, var(--wa-color-text-quiet)); }
.w-listing-filter__actions { margin-left: auto; }

/* wa-details의 spacing이 헤더 양쪽·화살표·내용에 동일하게 적용된다.
   native details[open] summary의 음수 여백이 이 컴포넌트 안으로 들어오지 않는다. */
.w-listing-filter__advanced { --spacing: var(--w-listing-filter-detail-pad); min-width: 0; }
.w-listing-filter__advanced-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; line-height: 1.5; }
.w-listing-filter__advanced-note { color: var(--site-muted, var(--wa-color-text-quiet)); font-size: 0.8125rem; font-weight: 400; }
.w-listing-filter__advanced-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--w-listing-filter-gap); }
.w-listing-filter__field--stacked { width: auto; }
.w-listing-filter__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; padding-block: 1.25rem; }
.w-listing-filter__chip i { margin-right: 0.25rem; }
.w-listing-filter__advanced-actions { padding-top: 1rem; border-top: 1px solid var(--site-border, var(--wa-color-surface-border)); }
.w-listing-filter__advanced-actions > wa-button[type='submit'] { margin-left: auto; }
@media (max-width: 640px) {
    .w-listing-filter { --w-listing-filter-pad: 1rem; --w-listing-filter-detail-pad: 1rem; }
    .w-listing-filter__compact > .w-listing-filter__field { flex: 1 1 100%; width: 100%; }
    .w-listing-filter__actions { margin-left: 0; width: 100%; }
    .w-listing-filter__advanced-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .w-listing-filter__field--stacked.w-listing-filter__field--range { grid-column: 1 / -1; }
    .w-listing-filter__advanced-note { flex-basis: 100%; }
}