.search-box { display: flex; flex-direction: column; min-width: 0; anchor-scope: --search-box-open; }
.search-box__row { display: flex; min-width: 0; }
.search-box__pick {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-xs);
  max-width: var(--measure-search-pick);
  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-inline-end-width: 0;
  border-radius: var(--radius);
  color: var(--text-default);
  background: var(--surface-raised);
  white-space: nowrap;
  cursor: pointer;
}
.search-box__picked { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.search-box__pick--on { border-color: var(--border-strong); font-weight: bold; }
.search-box__pick[aria-expanded="true"] { anchor-name: --search-box-open; }
.search-box__pick:focus-visible { outline: var(--border-width) solid var(--focus-ring); }
.search-box__form { display: flex; min-width: 0; }
.search-box__input {
  width: var(--measure-search-input);
  min-width: 0;
  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);
}
.search-box__input:focus-visible { outline: var(--border-width) solid var(--focus-ring); }

/* 폰에서는 검색칸이 찾는 열 버튼 뒤 남는 폭을 다 쓰고 좁아지면 같이 줄어듦(min-width: 0 은 위
   .search-box__row 와 __form 에 이미 있음). 데스크톱은 고정 폭(measure-search-input) 그대로 */
.search-box--phone .search-box__form { flex: 1 1 auto; }
.search-box--phone .search-box__input { flex: 1 1 auto; width: auto; }

.search-box__anchor { height: 0; }
.search-box__pop {
  position: absolute;
  position-anchor: --search-box-open;
  top: anchor(bottom);
  left: anchor(left);
  position-try-fallbacks: --search-box-flip;
  position-visibility: anchors-visible;
  z-index: var(--layer-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-sm);
  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 --search-box-flip {
  left: auto;
  right: max(anchor(right), 0px);
}

@supports not (anchor-name: --a) {
  .search-box__anchor { position: relative; }
  .search-box__pop { top: 0; left: 0; }
}

/* 고르기 편집기의 ALL 과 값 목록과 같은 모양 */
.search-box__all {
  align-self: flex-start;
  font: inherit;
  font-size: var(--font-label);
  padding: var(--space-inset-xs) var(--space-inset-sm);
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-raised);
  color: var(--text-default);
  cursor: pointer;
}
.search-box__all[aria-pressed="true"] { border-color: var(--border-strong); font-weight: bold; }
.search-box__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-stack-sm); max-height: var(--measure-select-list); overflow-y: auto; }
.search-box__item label { display: flex; align-items: center; gap: var(--space-inline-xs); white-space: nowrap; }

/* 값 목록과 같은 까닭으로 바닥 시트 안에서는 제 한도를 안 씀(docs/components/SearchBox.md) */
.bottom-sheet .search-box__list { max-height: none; overflow-y: visible; }