.filter-sheet { border: 0; padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(var(--filter-viewport-height, 100dvh) - 32px); border-radius: 20px; color: #0f172a; background: #fff; box-shadow: 0 24px 70px #0f172a30; font-family: inherit; line-height: 1.5; overflow: hidden; }
.filter-sheet::backdrop { background: #0f172a80; backdrop-filter: blur(3px); }
.filter-sheet[open] { display: flex; flex-direction: column; }
.filter-header, .filter-footer { display: flex; align-items: center; gap: 12px; padding: 16px; flex-shrink: 0; background: #fff; }
.filter-header { justify-content: space-between; border-bottom: 1px solid #e2e8f0; }
.filter-header h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; }
.filter-close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #f1f5f9; }
.filter-body { overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 24px; min-height: 0; scroll-padding-block: 16px; }
.filter-section { padding: 0; border: 0; flex-shrink: 0; min-width: 0; }
.filter-section:last-child { border-bottom: 0; }
.filter-section h3, .filter-section summary { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 16px; font-weight: 600; line-height: 1.5; }
.filter-section summary { min-height: 48px; padding: 12px 0; margin: 0; cursor: pointer; list-style: none; }
.filter-section[open] > summary { margin-bottom: 16px; }
.filter-field-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; margin: 0 0 16px; }
.filter-size-group + .filter-size-group { margin-top: 24px; }
.filter-section summary::-webkit-details-marker { display: none; }
.filter-section summary .filter-chevron { margin-left: auto; }
.filter-section[open] summary .filter-chevron { transform: rotate(180deg); }
.filter-section summary small { font-size: 12px; color: #64748b; font-weight: 500; margin-left: auto; }
.filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.filter-tx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filter-option { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px; border: 1px solid #cbd5e1; border-radius: 12px; font-size: 14px; font-weight: 500; line-height: 1.5; background: #fff; }
.filter-option[aria-pressed="true"] { background: #ecfdf5; border-color: #059669; color: #065f46; }
.filter-sheet svg, .a-choice svg { flex-shrink: 0; width: 20px; height: 20px; }
.filter-sheet label { font-size: 13px; font-weight: 400; display: block; margin: 0 0 8px; line-height: 1.5; }
.filter-sheet input:not([type="checkbox"]), .filter-sheet select { box-sizing: border-box; width: 100%; min-width: 0; height: 48px; min-height: 48px; border: 1px solid #cbd5e1; border-radius: 12px; padding: 12px; background-color: #fff; font: inherit; font-size: 14px; color: #0f172a; }
.filter-sheet input::placeholder { color: #64748b; opacity: 1; }
.filter-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.filter-sheet .budget-control { height: 48px; border-radius: 12px; }
.filter-sheet .budget-control :is(input, select) { height: 46px; min-height: 46px; }
.filter-sheet .budget-unit { width: 68px; }
.filter-sheet .budget-unit > span { right: 8px; }
.budget-control { display: flex; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; background: #fff; }
.budget-control input, .analysis .budget-control input, .filter-sheet .budget-control input { border: 0; border-radius: 0; min-width: 0; }
.budget-unit { position: relative; width: 70px; flex-shrink: 0; }
.budget-control select, .analysis .budget-control select, .filter-sheet .budget-control select { width: 100%; border: 0; border-left: 1px solid #e2e8f0; border-radius: 0; background: #f8fafc; padding: 10px 28px 10px 10px; appearance: none; }
.budget-unit > span { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); display: flex; color: #64748b; pointer-events: none; }
.filter-note { font-size: 12px; line-height: 1.5; color: #64748b; margin: 10px 0 0; }
.filter-agents { max-height: 240px; overflow-y: auto; margin-top: 16px; }
.filter-agent { display: flex !important; align-items: center; gap: 10px; min-height: 44px; margin: 0 !important; padding: 10px 4px; border-bottom: 1px solid #f1f5f9; }
.filter-agent input { width: 18px; height: 18px; accent-color: #047857; flex-shrink: 0; }
.filter-agent span { flex: 1; }
.filter-agent small { font-size: 12px; color: #64748b; font-weight: 500; }
.filter-selected { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.filter-selected:empty { display: none; }
.filter-selected button { display: inline-flex; align-items: center; gap: 5px; background: #ecfdf5; color: #065f46; border-radius: 8px; padding: 6px 8px; min-height: 36px; font-size: 12px; }
.filter-selected svg { width: 14px; height: 14px; }
.filter-footer { border-top: 1px solid #e2e8f0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.filter-footer button { height: 48px; min-height: 48px; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.5; border: 1px solid #cbd5e1; }
.filter-footer .filter-apply { flex: 1; background: #047857; color: #fff; border-color: #047857; }
.filter-error { color: #b91c1c; font-size: 13px; margin: 0; padding: 8px 16px; flex-shrink: 0; }
.filter-error:empty { display: none; }
.filter-sheet :is(button, input, select, summary):focus-visible { outline: 3px solid #34d399; outline-offset: 2px; }
body:has(.filter-sheet[open]) { overflow: hidden; }
[data-purpose="mobile-nav"] > button { flex: 1; min-height: 48px; }
[data-purpose="mobile-nav"] > button span:first-of-type { font-size: 11px; }
#filter-pills-bar .filter-pill-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
#filter-pills-bar .filter-pill-btn svg { width: 18px; height: 18px; }
@media (max-width: 480px) {
  .filter-sheet { position: fixed; top: auto; bottom: var(--filter-viewport-bottom, 0px); width: 100%; max-width: 100%; max-height: calc(var(--filter-viewport-height, 100dvh) - 16px); margin: 0; border-radius: 20px 20px 0 0; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}