fix(contact): 문의 모달이 헤더 안에 갇혀 잘리던 문제

Navbar 는 backdrop-blur-md 를 쓴다. backdrop-filter 가 걸린 요소는
position:fixed 자손의 기준 블록이 되므로, 모달 오버레이의 inset-0 이
뷰포트가 아니라 nav 박스(1396x80)로 잡혔다. 그 결과 모달이 헤더 높이
안에서 잘려 페이지 콘텐츠가 위를 덮는 것처럼 보였다.

오버레이를 document.body 로 포털한다. 조상의 기준 블록·쌓임 맥락에서
완전히 벗어나므로 푸터 등 다른 위치에서 열어도 같은 문제가 생기지 않는다.

실측: 수정 전 오버레이 높이 80px → 수정 후 893px(뷰포트와 일치),
화면 중앙 좌표가 모달 내부로 잡히는 것 확인.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/components/ContactModal.tsx

@@ -8,6 +8,7 @@
  *   두 종류로 보이지 않게 하기 위해서다.
  */
 import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'motion/react';
 import { ArrowRight } from 'lucide-react';
 import { submitLead } from '../lib/submitLead';
@@ -76,7 +77,11 @@ export default function ContactModal({ open, onClose, source }: ContactModalProp
     return `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent('[INFINITH] 도입 문의')}&body=${encodeURIComponent(body)}`;
   };
 
-  return (
+  // 반드시 body 로 포털한다. 이 모달을 여는 Navbar 는 backdrop-blur-md 를 쓰는데,
+  // backdrop-filter 가 걸린 요소는 position:fixed 자손의 기준 블록이 된다.
+  // 그대로 두면 오버레이의 inset-0 이 뷰포트가 아니라 nav 박스(높이 80px)로 잡혀
+  // 모달이 헤더 안에 갇혀 잘린다. 2026-10-01 프로덕션에서 실제로 그렇게 나왔다.
+  return createPortal(
     <AnimatePresence>
       {open && (
         <motion.div
@@ -229,6 +234,7 @@ export default function ContactModal({ open, onClose, source }: ContactModalProp
           </motion.div>
         </motion.div>
       )}
-    </AnimatePresence>
+    </AnimatePresence>,
+    document.body,
   );
 }