🔀 :: (#19) 모바일에서 스크롤 씬을 정적 레이아웃으로 폴백

[Xixn2]

원인

모바일(375×812)에서 두 스크롤 씬의 글자가 읽을 수 없을 만큼 작았다.

씬	스케일	결과
앱 카드	0.26	카드 114×159px, 서브 텍스트 5.4px
Capabilities	0.58	항목 9.0px, 칩 6.7px, 2열 유지(열당 166px)

두 씬 모두 데스크탑 고정 크기(카드 360×560, 그리드 1280px)를 기준으로 만들고 좁은 화면에서는
전체를 transform: scale()로 축소하는 구조였다. 축소는 레이아웃이 아니라 픽셀을 줄이므로 글자도 같이 작아진다.

수정

• lib/useIsMobile.ts (신규) — md 브레이크포인트(767px) 감지 훅. SSR·첫 페인트에서는 false라
  데스크탑 마크업이 프리렌더되고, 마운트 후 모바일 분기로 교체된다.
• AppCards — 모바일에서는 핀 고정 씬 대신 카드를 화면 폭에 맞춰 세로로 쌓고 Reveal로 순차 등장시킨다.
  카드 마크업은 CardFace로 추출해 두 레이아웃이 완전히 같은 모양을 공유한다.
• CapabilitiesScene — 모바일에서는 1열 정적 목록으로 펴고 축소를 적용하지 않는다.
  포인터 전용인 돋보기 렌즈와 rAF 루프는 아예 실행하지 않는다.
• globals.css — 모바일 카드 크기(min(320px, 86vw), 높이 자동, 중앙 정렬)와 칩 글자 크기(12.5px) 조정.

검증

375×812에서 실측:

• 앱 카드 서브 텍스트 5.4px → 17px, 타이틀 15.2px → 48px (스케일 1.0)
• 페이지에서 가장 작은 글자 5.4px → 12.5px
• 가로 스크롤 없음 (넘치는 요소는 스포트라이트·마퀴 2개뿐이며 부모가 overflow:hidden)
• 전체 섹션 스크롤하며 넘침 점검: approach/about/contact 이상 없음
• 햄버거 메뉴 열기·닫기, 링크 4개 화면 안에 정상
• 페이지 높이 절반으로 감소 (씬 5847px → 3725px)

데스크탑(1280×800) 회귀 확인:

• apps 280vh · capabilities 440vh 유지, sticky 씬과 돋보기 렌즈 모두 정상
• tsc --noEmit / next build 통과

비고

• 서버 변경 없음.
• 모바일은 스크롤 연동 씬 대신 정적 레이아웃이라, 저사양 기기에서 rAF 루프도 함께 사라진다.

---

Closes #19