/* 고르는 칸이 위, 고른 파일 목록이 아래. 폭은 안 주고 Field 의 열 배치가 늘려 줌 */
.file-input { display: flex; flex-direction: column; gap: var(--space-stack-sm); min-width: 0; }

/* 고르는 칸. 안쪽 단추는 브라우저가 그리고 겉 상자만 글 계열 칸과 맞춰 한 폼 안에서 줄 높이가 안 튐 */
.file-input__pick {
  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);
}
.file-input__pick:focus-visible { outline: var(--border-width) solid var(--focus-ring); }

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

/* 파일 칸에는 readonly 가 없어 못 고치는 칸을 disabled 로 냄. 글 계열의 읽기 전용과 같게 보임 */
.file-input__pick[disabled] { border-style: dashed; color: var(--text-muted); background: var(--surface-sunken); }

/* 고른 파일 목록. 한 줄에 그림, 이름, 크기, 빼는 단추가 옆으로 섬 */
.file-input__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-stack-sm); font-size: var(--font-label); }
.file-input__item { display: flex; align-items: center; gap: var(--space-inline-sm); min-width: 0; }

/* 사진 그림과 확장자 표시가 같은 네모를 차지해 줄마다 이름이 시작하는 자리가 같음 */
.file-input__thumb,
.file-input__ext {
  flex: none;
  width: var(--measure-file-thumb);
  height: var(--measure-file-thumb);
  border: var(--border-width) solid var(--border-muted);
  border-radius: var(--radius);
}
/* 비율이 다른 사진도 네모를 채우게 잘라 넣음. 늘리면 사람 얼굴이 찌그러짐 */
.file-input__thumb { object-fit: cover; }
.file-input__ext { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-sunken); color: var(--text-muted); }

/* 이름만 줄이고 크기와 빼는 단추는 안 줄임 */
.file-input__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-input__size { flex: none; color: var(--text-muted); }

/* 빼는 단추는 줄 오른쪽 끝으로 밀어 줄마다 같은 자리에 섬 */
.file-input__remove { flex: none; margin-left: auto; font: inherit; padding: 0; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.file-input__remove:focus-visible { outline: var(--border-width) solid var(--focus-ring); }
.file-input__remove[disabled] { cursor: default; }

/* 고른 것이 없는 자리. 도움글과 같은 크기와 색임 */
.file-input__empty { margin: 0; font-size: var(--font-label); color: var(--text-muted); }