@use "@fox/styles/abstracts" as fox;

.fields {
  display: flex;
  inline-size: 100%;
  flex-direction: column;
}

.field {
  display: flex;
  inline-size: 100%;
  flex-direction: column;
  gap: fox.gap(3);
  padding-block: fox.padding(6);
  border-block-end: fox.border(1) solid fox.color(border-neutral-subtler);
}

// 숫자 칸은 시안처럼 좁게 두고 단위·안내가 옆에 선다.
.numberRow {
  display: flex;
  align-items: center;
  gap: fox.gap(3);
}

.numberField {
  inline-size: 16rem;
}

.numberNote {
  color: fox.color(font-neutral-subtler);
  font-size: fox.font-size(label-sm);
}

.required {
  color: fox.color(font-system-danger);
  font-size: fox.font-size(label-sm);
  text-align: end;
}