[feat] landing: 가이드 2번 탭 mp4 연결 · 최종 CTA 에 결과 화면 배치

① 이용 가이드 2번 탭 (협력사별 1:1 협상)
video 필드가 빠져 있어 이 탭만 1.7MB GIF(390x780)를 내려받고 있었다. 같은 내용의
mp4 가 저장소에 있는데 참조만 없었다 — 786K, 540x1080 으로 더 가볍고 더 크다.
GifSlot 이 video 를 우선 재생하므로 한 줄로 끝난다.

원본 캡쳐가 좌우로 잘려 문장이 중간에 끊기는 문제는 남아 있다(540x1080 원본 파일
자체에 잘린 채로 들어 있어 CSS 로 못 고친다). 재촬영이 필요하고 주석에 남겼다.

③ 최종 CTA — negotiation_annotated_3d.mp4
이용 가이드에는 넣지 않았다. 그 섹션은 "실제 화면으로 보여드립니다" 라고 약속하는데
이 영상은 재구성 목업이다(실제 UI 는 "아이마켓코리아 (구매 MD)", 영상은 "아이마켓 구매 MD").
1·3번 탭이 실제 캡쳐인데 2번만 목업이면 register 도 어긋난다.
전환을 요청하는 자리에는 그 약속이 없으므로 마케팅 컴포짓이 맞는 자리다.

- 영상 배경이 밝은 회색(#EEF4F5)이라 무대 위에 그냥 놓으면 구멍처럼 뜬다.
  모서리를 깎고 그림자를 깔아 "떠 있는 물체"로 만들면 밝기 차이가 의도로 읽힌다.
- 폰 프레임이 영상에 내장돼 있어 PhoneFrame 으로 감싸지 않는다. 감싸면 이중 프레임이다.
- 2단이 되면서 width md(max-w-4xl) → lg(max-w-5xl), 제목은 lg 부터 한 단계 축소.
  4xl 안에 세로 목업과 카피를 밀어넣으면 양쪽 다 좁아진다.
- preload="none" — 페이지 최하단이라 첫 로드에 677K 를 미리 받을 이유가 없다.

검증: 1280x900 2단 정상, 375x812 카피→영상 중앙 적층·가로 넘침 없음.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

landing/app/components/sections/final-cta.tsx

@@ -15,41 +15,68 @@ import { useFadeUp } from "@/lib/motion"
  *
  * 섹션 껍데기와 머리도 손으로 짜던 걸 Section/SectionHeading 으로 돌렸다.
  * 우회하는 동안 아이브로우 간격이 여기만 20px 이었다(다른 섹션은 12px).
+ *
+ * 전환을 요청하는 자리에 결과 화면을 같이 둔다. 이용 가이드는 "실제 화면으로 보여드립니다"
+ * 라고 약속해서 재구성 목업을 넣을 수 없지만, 여기는 그 약속이 없어 마케팅 컴포짓이 맞는 자리다.
  */
 export function FinalCTA() {
   const fadeUp = useFadeUp()
+  const mediaFadeUp = useFadeUp(0.12)
 
   return (
-    /* width="md"(max-w-4xl) — sm(max-w-3xl)이면 "조용히 새고 있을지 / 모릅니다" 로 끊겨
+    /* 영상이 붙으면서 width 를 md(max-w-4xl) → lg(max-w-5xl) 로 넓혔다.
-       마지막 줄이 고아가 된다. */
+       세로 목업과 카피를 4xl 안에 2단으로 밀어넣으면 양쪽 다 좁아진다. */
-    <Section bg="stage" width="md" containerClassName="text-center">
+    <Section bg="stage" width="lg">
-      <motion.div {...fadeUp}>
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
-        <SectionHeading
+        <motion.div {...fadeUp} className="lg:col-span-7 text-center lg:text-left">
-          align="center"
+          <SectionHeading
-          tone="stage"
+            align="left"
-          size="display"
+            className="text-center lg:text-left"
-          gap="none"
+            tone="stage"
-          eyebrow="Start Today"
+            size="display"
-          /* 닫는 CTA 라 히어로(74px)보다는 낮추고 섹션 제목(64px)보다는 세운다. */
+            gap="none"
-          titleClassName="text-[32px] sm:text-[44px] md:text-[56px]"
+            eyebrow="Start Today"
-          title={
+            /* 닫는 CTA 라 히어로(74px)보다는 낮추고 섹션 제목(64px)보다는 세운다.
-            <>
+               2단이 되면서 한 줄이 짧아져 lg 부터 한 단계 더 줄인다. */
-              <span className="text-white">지금도 구매 예산은</span>
+            titleClassName="text-[32px] sm:text-[44px] md:text-[56px] lg:text-[48px]"
-              <br />
+            title={
-              <span className="text-on-stage-soft/60">조용히 새고 있을지 모릅니다</span>
+              <>
-            </>
+                <span className="text-white">지금도 구매 예산은</span>
-          }
+                <br />
-          description="협상 테이블에 오르지 못하고 그냥 넘어가던 건들이 있습니다. 네고시움 에이전트가 정해진 기준 안에서 그 건들을 대신 조율합니다."
+                <span className="text-on-stage-soft/60">조용히 새고 있을지 모릅니다</span>
-          descriptionClassName="max-w-xl text-on-stage-soft/75"
+              </>
-        />
+            }
+            description="협상 테이블에 오르지 못하고 그냥 넘어가던 건들이 있습니다. 네고시움 에이전트가 정해진 기준 안에서 그 건들을 대신 조율합니다."
+            descriptionClassName="max-w-xl text-on-stage-soft/75 mx-auto lg:mx-0"
+          />
 
-        <div className={CTA_GAP}>
+          <div className={`${CTA_GAP} flex justify-center lg:justify-start`}>
-          <Button href="#contact-section" variant="stage" size="xl" className="group">
+            <Button href="#contact-section" variant="stage" size="xl" className="group">
-            <span>도입 상담 신청</span>
+              <span>도입 상담 신청</span>
-            <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
+              <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
-          </Button>
+            </Button>
-        </div>
+          </div>
-      </motion.div>
+        </motion.div>
+
+        {/* 결과 화면. 영상 배경이 밝은 회색(#EEF4F5)이라 무대 위에 그냥 놓으면 구멍처럼 뜬다.
+            모서리를 깎고 그림자를 깔아 "떠 있는 물체"로 만들면 밝기 차이가 의도로 읽힌다.
+            폰 프레임은 영상에 내장돼 있어서 PhoneFrame 으로 감싸지 않는다 — 감싸면 이중 프레임이 된다. */}
+        <motion.div {...mediaFadeUp} className="lg:col-span-5">
+          <div className="mx-auto max-w-[300px] lg:max-w-none rounded-card overflow-hidden ring-1 ring-white/10 shadow-[0_30px_80px_-30px_rgba(3,6,15,0.95)]">
+            <video
+              className="w-full h-auto block"
+              src="/gifs/negotiation_annotated_3d.mp4"
+              poster="/gifs/negotiation_annotated_3d.jpg"
+              autoPlay
+              muted
+              loop
+              playsInline
+              preload="none"
+              aria-label="협상 타결 후 낙찰가와 절감액이 표시된 화면"
+            />
+          </div>
+        </motion.div>
+      </div>
     </Section>
   )
 }

landing/app/components/sections/how-it-works-demo.tsx

@@ -238,7 +238,11 @@ const DEMO_TABS: DemoTab[] = [
     ],
     checks: ["협력사별 1:1 비대면 협상 포털", "같은 기준으로 응대해 관계 부담 없음"],
     mockup: "phone",
+    /* mp4 를 붙이기 전까지 이 탭만 1.7MB GIF(390x780)를 내려받고 있었다. 같은 내용의
+       mp4 가 저장소에 있는데 참조가 빠져 있었다 — 786K, 540x1080 으로 더 가볍고 더 크다.
+       (원본 캡쳐가 좌우로 잘려 문장이 끊기는 문제는 남아 있다. 재촬영이 필요하다.) */
     gif: "/gifs/negotiation.gif",
+    video: "/gifs/negotiation.mp4",
     gifAlt: "협력사 포털 모바일 협상 화면",
     fallback: {
       icon: Smartphone,