/* 라벨이 위, 입력칸이 아래 전체 폭. 입력칸이 열 배치의 자식이라 칸 폭을 따로 안 주고도 줄 폭을 다 씀 */
.field { display: flex; flex-direction: column; gap: var(--space-stack-sm); min-width: 0; }
.field__label { font-size: var(--font-label); color: var(--text-default); }
.field__req { color: var(--text-danger); }
.field__help { margin: 0; font-size: var(--font-label); color: var(--text-muted); }
.field__error { margin: 0; font-size: var(--font-label); color: var(--text-danger); }

/* 켜기 칸이 라벨과 상자를 한 줄에 둠(Field.js 의 layout: inline). 축만 가로로 바꾸고 줄 사이 세로 틈
   (row-gap)은 위 .field 규칙 그대로 물려받음. 도움글/오류에 flex-basis: 100% 를 줘 감쌀 자리가
   있어도 강제로 다음 줄로 내림. DOM 차례(label, input, help, error)는 하나도 안 바꿈 */
.field--inline { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-inline-sm); }
.field--inline > .field__help,
.field--inline > .field__error { flex-basis: 100%; }
/* 체크박스의 align-self: flex-start(CheckInput.css)는 세로 배치용 수정임. 가로 배치에서는 라벨
   글자 높이 가운데에 오게 다시 침 */
.field--inline > .check-input { align-self: center; }

/* 두 칸 배치(layout: side). 라벨 칸 폭을 고정 토큰으로 잡아, 줄마다 라벨 길이가 달라도 값 칸이 같은
   x 에 섬(DetailRows 의 dl 도 같은 토큰을 써서 두 부품이 낸 줄이 한 줄처럼 정렬됨). 도움글과 오류글은
   값 칸(2번 칸)에 두어 라벨 칸을 안 먹음 */
.field--side { display: grid; grid-template-columns: var(--measure-field-label) 1fr; column-gap: var(--space-inline-md); align-items: start; }
/* 입력칸의 위쪽 안쪽 여백만큼 라벨을 내려, 라벨 글자와 칸 안 글자의 첫 줄이 같은 높이에 섬 */
.field--side > .field__label { padding-top: var(--space-inset-xs); }
.field--side > .field__help,
.field--side > .field__error { grid-column: 2; }

/* 값 칸 폭 이름 셋(Field.js 의 width). 기본값 full 은 규칙이 없어 값 칸을 다 씀. 라벨 칸은 안 건드리고
   입력칸의 최대 폭만 잡아 줄마다 값 칸이 서는 x 는 그대로임. 배치 셋 어디에나 먹음 */
/* 도움글과 오류글은 안 좁힘. 긴 문장이 한 글자 칸 폭에 갇히면 읽을 수 없어짐 */
.field--width-short > :not(.field__label, .field__help, .field__error) { max-width: var(--measure-input-short); }
.field--width-medium > :not(.field__label, .field__help, .field__error) { max-width: var(--measure-input-medium); }
.field--width-long > :not(.field__label, .field__help, .field__error) { max-width: var(--measure-input-long); }