/* 글 계열 다섯이 같은 상자로 보임. 폭은 안 주고 Field 의 열 배치가 늘려 줌 */
.text-input {
  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);
}
.text-input:focus-visible { outline: var(--border-width) solid var(--focus-ring); }

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

/* 읽기 전용은 못 고치는 칸이라 점선과 옅은 글자로 갈라 보임 */
.text-input[readonly] { border-style: dashed; color: var(--text-muted); background: var(--surface-sunken); }

/* 여러 줄은 높이를 줄 수(rows)로 잡아 글자 토큰을 따라가고, 늘리는 것은 세로로만 둠 */
.text-input--area { resize: vertical; }