이 단일 페이지 크리에이티브 스튜디오 푸터를 정확히 재현하세요. 이것은 재디자인이 아닌 충실 재현 작업입니다. 제공된 콘텐츠, 에셋, CSS, 인터랙션을 그대로 구현하세요. 이 푸터 페이지만 구축합니다. 로컬로 유지하고 공개·배포하지 마세요. 헤더, 히어로, 카드, 폼, 섹션, 버튼, 링크, 애니메이션, 추가 문구를 넣지 마세요. 아래 첨부된 소스 스냅샷이 권위 있는 사양입니다. 필요할 때만 임포트 경로나 프레임워크 배선을 조정하고 그 외에는 정확히 복사하세요. 근사한 타이포그래피, 다른 로고, 스톡 영상, 일반적인 눈 추적 효과로 대체하지 마세요. 1. 전체 외관: 페이지 전체가 하나의 푸터로, 왼쪽 정보 컬럼, 중앙 스크립트 로고, 오른쪽 연락처형 텍스트 컬럼(소셜 아이콘 3개), 라벤더색 캐릭터 영상으로 구성됩니다. 데스크톱 폭에서는 영상이 모든 콘텐츠 뒤로 뷰포트를 채웁니다. 모바일에서는 콘텐츠가 쌓이고 영상이 일반 문서 흐름에서 그 뒤에 나옵니다. 구성은 여유롭고 미니멀하며, 매우 어두운 텍스트, 영상을 덮는 틴트·스크림·그라디언트·블러·오버레이는 없습니다. 외부 링크나 실제 연락처 목적지는 없습니다. 내비게이션형 라벨, 연락처 문구, 소셜 아이콘, 로고는 정적 표시 요소이며 클릭 가능한 앵커가 아닙니다. 목적지, 이메일, 전화번호, WhatsApp 동작, 소셜 계정을 지어내지 마세요. Truus를 어디에도 표시하지 마세요. 2. 정확한 표시 문구: 철자, 대소문자, 문장 부호, 둥근 아포스트로피, 별표, 줄바꿈을 보존하세요. 왼쪽 배지: “have a fresh idea?”. 왼쪽 헤드라인: “imagination” /“meets craft”. 라벨: “Made”, “Story”, “In the lab”, “Say hey”. 오른쪽 배지: “say hey”. 오른쪽 헤드라인: “let’s team up!” /“bring us your idea*”. 노트: “*good things start with one spark. let’s make yours.”. 소셜 아이콘 순서: LinkedIn, Instagram, TikTok. 제공된 정확한 SVG를 사용하고 텍스트 라벨과 링크는 없앱니다. 중앙 로고는 BrandLogo의 아웃라인 스크립트 SVG Logoipsum(viewBox 169×40)입니다. fill을 currentColor로 하여 #080909를 상속합니다. 로고를 트레이스하거나 재생성하지 마세요. 3. 정확한 타이포그래피와 색: 헤드라인 Epilogue Black 900, 나머지 텍스트 DM Sans Regular 400. 실제 폰트 파일과 font-synthesis: none 사용. DMSans-Regular.woff2와 Epilogue-Black.woff2를 다운로드해 @font-face와 font-display: swap으로 로컬 제공. 텍스트와 로고 #080909, 데스크톱 폴백 배경 #dfe4f2, 배지 #f7f8fa, 모바일 배경 #f0eefa. 그림자, 장식 테두리, 카드, 그라디언트 없음. 4. 정확한 데스크톱 레이아웃(>700px): 전역 box-sizing border-box, body margin 0, min-height 100vh. footer position relative, min-height 100vh, padding-top 6.54vw, isolation isolate, overflow hidden. 왼쪽 블록: margin-left 8.65vw, width 25vw. 배지 pill 100px, 높이 1.9vw, padding .39vw .61vw, 폰트 .88vw. 헤드라인 margin-top 1.45vw, 폰트 1.66vw weight 900. 내비게이션 세로 flex gap .93vw, margin-top 1.3vw, 폰트 1.075vw. 로고 absolute left 40.33vw top 7.7vw width 17vw. 오른쪽 블록 absolute left 74.3vw top 6.54vw, 노트 margin 1.05vw 0 0 폰트 .733vw, 소셜 행 flex gap 1.43vw, 아이콘 1.71vw. 이 vw 값과 정확한 3열 배치를 유지하세요. 영상 레이어: 래퍼 absolute inset 0 z-index -1 pointer-events none, 영상 object-fit cover center로 텍스트 뒤에, 별도 동공 캔버스 없음. 5. 정확한 모바일 레이아웃(≤700px), @media(max-width:700px) 내에서만: 배경 #f0eefa, footer 세로 flex gap 36px, min-height 100svh, padding 40px 24px 0, 표시 순서 로고·왼쪽·오른쪽·영상, 로고 static width 210px max-width 75%, 배지 높이 30px 폰트 14px, 헤드라인 clamp(22px,6.3vw,30px), 내비게이션 2열 그리드 column-gap 24px 폰트 17px 각 라벨 min-height 44px(1행 Made/Story, 2행 In the lab/Say hey), 노트 max-width 34ch 폰트 14px 일반 줄바꿈, 소셜 행 gap 18px 래퍼 44×44px 아이콘 30×30px 첫 래퍼 margin-left -7px, 영상 래퍼 relative order 3 width calc(100%+48px) aspect-ratio 4/3 margin-top -16px, 콘텐츠 아래 풀블리드. 6. 정확한 영상 에셋: 완전한 리터럴 CloudFront URL을 사용하고 클립 대체, 경로 생략, 언더스코어 이스케이프, 파일명 변경을 하지 마세요. 소스는 1920×1080, 24fps, 약 7.041667초: 매우 옅은 라벤더 배경에 분홍 하트를 든 보송한 라벤더색 캐릭터, 눈이 원을 그립니다. public/footer-background.mp4로 다운로드하고 다음으로 public/footer-scrub.mp4를 생성: ffmpeg -hide_banner -loglevel error -i public/footer-background.mp4 -an -c:v libx264 -preset fast -crf 20 -g 1 -pix_fmt yuv420p -movflags +faststart public/footer-scrub.mp4. 치수·fps·길이·색·구성을 보존하고, 랜덤 시크용 all-intra 인코딩. 요소는 muted, playsInline, preload="auto"를 가지며 네이티브 컨트롤·오디오·포스터·로딩 UI 없음. 7. 정확한 데스크톱 마우스 인터랙션: 영상 스크러빙 — 커서를 움직이면 기록된 동공이 커서를 향하는 프레임을 선택. 동공을 다시 그리거나 CSS 눈을 애니메이션하지 마세요. 제공된 gaze-frames.json을 사용. 눈 중점은 1920×1080 프레임에서 (948,418), cover 스케일 max(w/1920,h/1080), eyeX = rect.left + rect.width/2 + (948-960)*scale, eyeY = rect.top + rect.height/2 + (418-540)*scale, 포인터에서 빼고, 8px 반경 내는 무시, atan2(dy,dx)를 [0,2π)로 정규화, 원형 각도 차가 최소인 행을 찾고, time + 1/240초 사용, 차이가 1/48초 초과·프레임 데이터 있음·시크 미진행일 때만 시크, duration - 1/24로 클램프, requestAnimationFrame으로 병합, 보간하지 않음, 데스크톱 영상은 0에서 일시정지로 시작해 선택된 프레임에 머묾, resize와 scroll에서 재계산, 패시브 리스너, 언마운트 시 모두 제거. 기본 방향: 오른쪽 2.54167s, 아래 0.33333s, 왼쪽 1.0s, 위 1.70833s. 8. 모바일 재생: ≤700px에서는 포인터 시크 비활성화, 콘텐츠 아래 영상은 음소거·루프로 정상 재생, prefers-reduced-motion을 존중해 일시정지, autoplay 불가 시 보이는 프레임을 두고 오류나 컨트롤을 표시하지 않음. matchMedia change 리스너로 700px 브레이크포인트를 올바르게 전환. 9. 시맨틱과 메타데이터: footer에 aria-label="Footer", 영상 래퍼는 aria-hidden="true"에 pointer-events:none, 로고 래퍼는 role="img" aria-label="Studio logo"에 SVG는 aria-hidden, 소셜 래퍼에 LinkedIn·Instagram·TikTok 라벨. 언어 en. 제목: Studio — Footer. 설명: Fresh ideas, imagination, and creative collaboration. 파비콘: 동일 로고 /logo.svg, fill #080909. 10. 구현 제약: React와 TypeScript, 일반 CSS 사용. 참조는 App Router 형식의 app/page.tsx, app/layout.tsx, 클라이언트 측 영상 컴포넌트. 환경이 지원하면 제공 소스를 보존. 애니메이션 라이브러리, UI 프레임워크, 캔버스 불필요. 정확한 소스 파일을 사용하고 두 폰트와 소스 영상을 가져오기. public/logo.svg는 BrandLogo의 SVG에서 fillRule/clipRule을 fill-rule/clip-rule로 되돌리고 #080909로 설정, viewBox와 path 보존. 성공적으로 빌드하고 기본 방향 시선 매핑, 모바일 스택, 320px/390px 폭 줄바꿈, 700px 초과 데스크톱 레이아웃을 확인. 검증 중 콘텐츠를 바꾸지 마세요. 모두 로컬로 유지하고 공개·배포하지 마세요.