제목을 안 넘기면 제목 줄이 통째로 빠져 닫기 아이콘이 내용 위로 내려앉았다. 시안의 tit
프레임은 제목이 없어도 28px(제목 글자 크기 × 줄높이)을 차지한다.

줄은 항상 내고 `
`만 제목이 있을 때 낸다 — 빈 제목을 심으면 이름 없는 heading이 되어
스크린리더가 헛읽는다. 높이는 토큰에서 계산해 브레이크포인트가 바뀌어도 따라간다.

검증: 제목이 있든 없든 제목줄 높이 28 · 위치 41 · 내용 시작 85로 같다. 제목이 없을 때
닫기 아이콘 아래끝 56이 내용 시작 85보다 위라 겹치지 않는다.

Co-Authored-By: Claude Opus 5 

시안은 버튼이 80×40인데 51×40으로 나왔다. 최소 폭 80px이 빠져 있었다.

btn 컴포넌트 세트 전체를 뒤져 보니 최소 폭 표기가 한 건도 없다 — 버튼 자체의 성질이
아니라 모달 아래쪽 자리의 규칙이다. 그래서 FoxButton이 아니라 모달 쪽에 준다. 글자가
짧아도 두 버튼의 폭이 같아 보이게 하려는 값이다.

검증: 버튼 80×40 · 묶음 168 · 오른쪽 끝이 내용 영역과 맞는다(시안과 동일).

Co-Authored-By: Claude Opus 5 

디자인시스템 파일의 modal(190:1136)을 옮겼다. 크기 넷(sm 400 · md 560 · lg 760 · full)이
모두 폭 토큰이고, 모바일에서는 넷 다 같은 폭으로 모이며 여백·모서리·닫기 버튼도 함께
줄어든다 — 반응형 토큰이 그렇게 정의돼 있다.

네이티브 `
`를 `showModal()`로 띄운다. 초점 가두기·Esc·뒷배경·맨 위 레이어를
브라우저가 처리하므로 직접 구현하지 않는다. 다만 Esc와 바깥 클릭에도 모달이 스스로 닫지
않고 `onClose`만 부른다 — 닫을지는 호출부가 정한다(저장하지 않은 입력이 있을 때 막아야
하는 경우가 있다).

제목 줄에만 오른쪽 여백을 준다 — 닫기 버튼이 그 자리에 겹쳐 앉기 때문이다. 닫기 아이콘은
64px 칸의 아래쪽에 붙어 제목 글줄과 눈높이가 맞는다(시안 items-end).

작업 중 잡은 것: `display: flex`를 그냥 주면 `
`가 닫혀 있을 때 브라우저가 숨기는
기본값을 덮어, 닫힌 모달이 페이지에 그대로 남는다. 열렸을 때만 배치를 주도록 고쳤다.

검증: 폭 560 · 여백 40 · 모서리 24 · 그림자 8px8px16px + 2px2px8px · 제목 20px w800 ·
닫기 칸 64×64가 시안과 일치(15항목). 열면 `:modal`로 잡히고 초점이 안에 갇힌다.
닫힌 모달 7개가 모두 화면에서 빠진다. sass 652규칙 · tsc · eslint 통과.

Co-Authored-By: Claude Opus 5