/* 칩 줄과 고르는 상자를 위아래로 둠. 폭은 안 주고 Field 의 열 배치가 늘려 줌 */
.select-input { display: flex; flex-direction: column; gap: var(--space-stack-sm); min-width: 0; }

/* 고른 값 칩. 글 계열 칸과 같은 상자 안에 있지 않고 칸 위에 쌓임 */
.select-input__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-inline-xs); font-size: var(--font-label); }
.select-input__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-xs);
  max-width: 100%;
  padding: var(--space-inset-xs) var(--space-inset-sm);
  border: var(--border-width) solid var(--border-muted);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--text-default);
}
/* 칩 하나가 줄보다 넓어지지 않게 글만 줄이고 빼는 단추는 안 줄임 */
.select-input__chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-input__remove { flex: none; font: inherit; padding: 0; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.select-input__remove:focus-visible { outline: var(--border-width) solid var(--focus-ring); }

/* 고르는 상자. 글 계열 칸과 같은 상자로 보여 한 폼 안에서 줄마다 높이가 안 튐 */
.select-input__box {
  min-width: 0;
  font: inherit;
  font-size: var(--font-body);
  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);
}
.select-input__box:focus-visible { outline: var(--border-width) solid var(--focus-ring); }

/* 오류가 걸린 칸은 테두리로 갈라 보임. 껍데기 밖에 홀로 그려도 같게 보이게 칸 자신의 속성으로 고름 */
.select-input__box[aria-invalid="true"] { border-color: var(--border-danger); }

/* 선택 상자에는 readonly 가 없어 못 고치는 칸을 disabled 로 냄. 글 계열의 읽기 전용과 같게 보임 */
.select-input__box[disabled] { border-style: dashed; color: var(--text-muted); background: var(--surface-sunken); }
.select-input__remove[disabled] { cursor: default; }