기획 BO-MAL-003(2805:1760)은 등록일시·등록자·최종 수정·현재 상태 네 쌍을 나란히 두는데,
FoxDescriptionList가 세로로 쌓고 줄마다 구분선을 그어 어긋났다. 목록에 inline 변형
(layout="inline")을 더해 쌍을 가로로 놓고 구분선을 뺀다. 이름은 label-sm·subtle, 값은
body-sm으로 시안 실측(12/13px)을 따르고, 쌍 사이 60px는 토큰에 없어 gap-11로 맞춘다.

Co-Authored-By: Claude Opus 5 

FoxModal의 `contents`가 `align-items: flex-start`인 flex 열이라, 그 안의 블록 요소가 내용
너비로 줄어들었다. 조회 목록은 줄마다 아래에 구분선을 긋기 때문에 폭이 줄면 선이 중간에서
끊긴 것처럼 보인다. 실측으로 contents 318에 폼과 목록이 169였다.

- FoxDescriptionList에 `align-self: stretch`를 줬다. flex 부모가 `flex-start`여도 스스로
  가로를 채운다 — 컴포넌트가 어디에 놓이든 폭을 보장한다.
- 학생 조회 팝업의 폼 래퍼에도 폭을 줬다. 목록의 부모가 이 폼이라, 폼이 줄면 그 안에서
  100%를 잡아도 소용이 없다.

검증 — 폼·목록·8줄 전부 318로 contents와 같아졌다(종전 169).

Co-Authored-By: Claude Opus 5 

시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) modal 5227:809.

FoxModal이 껍데기를 전부 덮는다 — padding 40 · radius 24 · 닫기 버튼 · tit/contents/foot 슬롯 ·
`
` 시맨틱까지 시안 값 그대로다. 없던 것은 라벨+값 조회 목록 하나였다.

- FoxDescriptionList 신설(사용자 확정). `
`/`
`/`
`로 그려 이름·값 관계가 보조기술에
  전달되게 하고, 이름 쪽은 `
` 안에 FoxFormLabel을 `span`으로 넣어 서식을 디자인시스템과
  맞췄다(`
`가 이미 라벨이라 ``은 가리킬 대상이 없다). 값이 ReactNode라 글자든
  토글이든 들어간다.
- student-detail-modal을 FoxModal + FoxDescriptionList + FoxToggleSwitch + FoxButton으로
  다시 썼다. components/ui의 Modal·Field·Input·RadioGroup을 더 이상 쓰지 않는다.

시안을 따라 보호자(이름/연락처)와 학교(학교/학년·반·번호)를 각각 한 줄로 묶었다 — 종전에는
따로 두던 항목이다. 둘 다 비어 있으면 `-`다.

지킨 것 — 사용여부는 백엔드에 값도 변경 API도 없어 토글·저장 버튼을 비활성으로 둔다. 폼·Server
Action 배선은 그대로라 API가 생기면 IS_ACTIVE_STATUS_EDITABLE만 되돌리면 된다. 비활성 사유는
감싼 span의 title로 남겼다(비활성 버튼은 hover를 받지 못한다).

FoxButton에는 폼을 가리키는 prop이 없어(네이티브 `form` 속성 미노출) 저장 버튼이 foot 슬롯에서
폼의 자손이 아니게 된다. @fox를 건드리는 대신 ref로 `requestSubmit()`을 부른다.

검증 — 폭 400 · padding 40 · radius 24 · 제목 "학생 회원 조회" · 닫기 버튼, 8항목이 시안과
같다(이름·ID·휴대전화 번호·이메일·생년월일·보호자 이름/연락처·학교/학년·반·번호·사용여부),
사용여부는 토글, 하단은 취소 + 저장(비활성).

Co-Authored-By: Claude Opus 5