.filter-bar { display: flex; flex-direction: column; gap: var(--space-stack-sm); anchor-scope: --filter-bar-open; }
.filter-bar__buttons { display: flex; flex-wrap: wrap; gap: var(--space-inline-xs); }
.filter-bar__quick {
  font: inherit;
  font-size: var(--font-label);
  padding: var(--space-inset-xs) var(--space-inset-sm);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius);
  color: var(--text-default);
  background: var(--surface-raised);
  white-space: nowrap;
  cursor: pointer;
}
.filter-bar__quick[aria-pressed="true"] { border-color: var(--border-strong); font-weight: bold; }
.filter-bar__quick:focus-visible { outline: var(--border-width) solid var(--focus-ring); }
.filter-bar__anchor { height: 0; }
.filter-bar [data-pop][aria-expanded="true"] { anchor-name: --filter-bar-open; }
.filter-bar__pop {
  position: absolute;
  position-anchor: --filter-bar-open;
  top: anchor(bottom);
  left: anchor(left);
  position-try-fallbacks: --filter-bar-flip;
  position-visibility: anchors-visible;
  z-index: var(--layer-raised);
  width: max-content;
  max-width: 100%;
  padding: var(--space-inset-sm);
  border: var(--border-width) solid var(--border-strong);
  background: var(--surface-raised);
}

/* 버튼 왼쪽에 맞추되 버튼이 담는 블록 밖으로 나가면 그 끝에 붙음 */
@position-try --filter-bar-flip {
  left: auto;
  right: max(anchor(right), 0px);
}

/* 폰에서는 상자가 시트 안 버튼 줄 밑 흐름에 들어가므로 기준점 배치를 안 씀 */
.filter-bar--phone .filter-bar__anchor { height: auto; }
.filter-bar--phone .filter-bar__pop {
  position: static;
  z-index: auto;
  width: auto;
  padding: var(--space-inset-sm) 0 0;
  border-width: var(--border-width) 0 0;
  border-color: var(--border-muted);
}

@supports not (anchor-name: --a) {
  .filter-bar__anchor { position: relative; }
  .filter-bar__pop { top: 0; left: 0; }
}