디자인시스템 파일의 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