diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx
index 603c4c1..3e575a2 100644
--- a/src/app/(marketing)/page.tsx
+++ b/src/app/(marketing)/page.tsx
@@ -1,142 +1,11 @@
-"use client";
+import { LandingHeroSection } from "@/components/landing/LandingHeroSection";
 
-import { SignupGroupButton } from "@/components/SiginupGroupButton";
-import { BackButton } from "@/shared/BackButton";
-import { Button } from "@/shared/button";
-import { FeatureButton } from "@/shared/FeatureButton";
-import { Icon } from "@/shared/Icon";
-import { Input } from "@/shared/input";
-import { SelectModuleCard } from "@/shared/SelectModuleCard";
-import { SpecialFeatureCard } from "@/shared/SpecialFeatureCard";
-import { InputStatus } from "@/types/input";
-import { useState } from "react";
+export const revalidate = 21600;
 
 export default function Home() {
-  const [email, setEmail] = useState("");
-  const [status, setStatus] = useState<InputStatus>("default");
-  const [isReady, setIsReady] = useState(false);
-
   return (
-    <div className="flex flex-col justify-center items-center gap-8">
-      {/* Hero CTA */}
-      <div className="flex gap-3">
-        <Button preset="hero" pill>
-          <span className="inline-flex items-center gap-4">
-            <Icon name="monitor" />
-            <span>Desktop</span>
-          </span>
-        </Button>
-        <Button preset="hero" pill>
-          <span className="inline-flex items-center gap-4">
-            <Icon name="laptop" />
-            <span>Mac</span>
-          </span>
-        </Button>
-        <Button preset="hero" pill>
-          <span className="inline-flex items-center gap-4">
-            <Icon name="smartphone" />
-            <span>iOS</span>
-          </span>
-        </Button>
-      </div>
-
-      <FeatureButton
-        icon={<Icon name="calendar" size={19} />}
-        title="일간"
-        description="오늘의 일정과 할 일을 한눈에"
-      />
-
-      <SpecialFeatureCard
-        icon={<Icon name="calendar" size={23} />}
-        title="스마트 스케줄링"
-        description="AI가 추천하는 최적의 일정 배치로 효율성을 극대화하세요."
-      />
-
-      <Button preset="auth" color="black">
-        로그인 하기
-      </Button>
-
-      <section className="space-y-2">
-        <h2 className="t-18-b">에러 상태</h2>
-        <div className="space-y-1">
-          <label htmlFor="email" className="t-14-m text-muted-foreground">
-            이메일
-          </label>
-
-          {/** status: "default" | "error" */}
-          <Input
-            id="email"
-            type="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            status={status} // ✅ cva와 1:1
-            placeholder="이메일을 입력하세요"
-            aria-describedby={status === "error" ? "email-error" : undefined}
-            onFocus={() => setStatus("default")}
-          />
-
-          {status === "error" && (
-            <p id="email-error" className="t-12-m text-destructive">
-              이메일 형식을 확인하세요.
-            </p>
-          )}
-
-          <div className="flex gap-2 pt-2">
-            <button
-              type="button"
-              onClick={() => setStatus((v: InputStatus) => (v === "error" ? "default" : "error"))}
-              className="rounded-md border px-3 py-1 text-sm"
-            >
-              에러 토글
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                setEmail("");
-                setStatus("default");
-              }}
-              className="rounded-md border px-3 py-1 text-sm"
-            >
-              값 초기화
-            </button>
-          </div>
-        </div>
-      </section>
-
-      <SignupGroupButton />
-
-      <BackButton>이전</BackButton>
-
-      <Button
-        preset="cta"
-        disabled={!isReady} // false면 활성, true면 비활성
-        onClick={() => alert("다음 단계로 이동")}
-      >
-        선택 완료
-      </Button>
-
-      <Button preset="cta" disabled={false} onClick={() => setIsReady((prev) => !prev)}>
-        {isReady ? "선택 해제" : "활성화 토글"}
-      </Button>
-
-      <SelectModuleCard
-        kind="module" // "module" | "design"
-        title="일간 플래너"
-        subtitle="Daily Intelligence"
-        description="하루를 체계적으로 관리하세요"
-        imageSrc="/images/daily-planner.png"
-        onClick={() => console.log("일간 플래너 클릭")}
-      />
-
-      <SelectModuleCard
-        kind="design" // "module" | "design"
-        title="일간 플래너"
-        subtitle="Daily Intelligence"
-        subtitleState="noSelect"
-        description="하루를 체계적으로 관리하세요"
-        imageSrc="/images/daily-planner.png"
-        onClick={() => console.log("일간 플래너 클릭")}
-      />
-    </div>
+    <>
+      <LandingHeroSection />
+    </>
   );
 }
diff --git a/src/components/landing/LandingFooter.tsx b/src/components/landing/LandingFooter.tsx
index 7fecc5b..d55070b 100644
--- a/src/components/landing/LandingFooter.tsx
+++ b/src/components/landing/LandingFooter.tsx
@@ -32,16 +32,26 @@ export function LandingFooter() {
         <div
           className={cn(
             "grid grid-cols-[14rem_14rem] grid-rows-[auto_auto] justify-center items-start gap-10 text-center",
-            "md:grid-cols-3 md:grid-rows-1 md:justify-between md:text-left",
+            "md:grid-cols-3 md:grid-rows-1 md:justify-between",
           )}
         >
           {/* 제품 컬럼 */}
-          <div className="col-span-1 row-start-2 justify-self-center md:row-auto md:justify-self-start">
+          <div
+            className={cn(
+              "col-span-1 row-start-2 justify-self-center",
+              "md:row-auto md:justify-self-start",
+            )}
+          >
             <LandingFooterColumn title="제품" links={productLinks} />
           </div>
 
           {/* 로고 블록*/}
-          <div className="col-span-2 row-start-1 flex flex-col items-center gap-4 justify-self-center md:col-span-1 md:row-auto">
+          <div
+            className={cn(
+              "col-span-2 row-start-1 flex flex-col items-center gap-4 justify-self-center",
+              "md:col-span-1 md:row-auto",
+            )}
+          >
             <Link
               href="/"
               aria-label="MyPlanMate 홈으로 이동"
@@ -62,7 +72,12 @@ export function LandingFooter() {
           </div>
 
           {/* 지원 컬럼 */}
-          <div className="col-span-1 row-start-2 justify-self-center md:row-auto md:justify-self-end">
+          <div
+            className={cn(
+              "col-span-1 row-start-2 justify-self-center",
+              "md:row-auto md:justify-self-end",
+            )}
+          >
             <LandingFooterColumn title="지원" links={supportLinks} />
           </div>
         </div>
diff --git a/src/components/landing/LandingHeroAnimation.tsx b/src/components/landing/LandingHeroAnimation.tsx
new file mode 100644
index 0000000..826e116
--- /dev/null
+++ b/src/components/landing/LandingHeroAnimation.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+export function LandingHeroAnimation() {
+  return (
+    <div className="relative">
+      <div
+        className={cn(
+          "group relative overflow-hidden rounded-2xl bg-[var(--color-white)]",
+          "shadow-[0_12px_40px_rgba(0,0,0,0.12)]",
+          "aspect-video w-full",
+        )}
+      >
+        <video
+          className="h-full w-full object-cover"
+          src="/videos/landing-hero.mp4"
+          autoPlay
+          loop
+          muted
+          playsInline
+          aria-label="PlanMate 데일리 플래너 사용 예시 영상"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/landing/LandingHeroCtas.tsx b/src/components/landing/LandingHeroCtas.tsx
new file mode 100644
index 0000000..8ab3220
--- /dev/null
+++ b/src/components/landing/LandingHeroCtas.tsx
@@ -0,0 +1,35 @@
+import { cn } from "@/lib/utils";
+import { Button } from "@/shared/button";
+import { Icon } from "@/shared/Icon";
+import Link from "next/link";
+
+export function LandingHeroCtas() {
+  return (
+    <div className={cn("flex flex-col gap-12 mt-20", "md:flex-row items-center gap-8 mt-10")}>
+      <Link href="/login">
+        <Button preset="hero" pill>
+          <span className="inline-flex items-center gap-4">
+            <Icon name="monitor" />
+            <span>Desktop</span>
+          </span>
+        </Button>
+      </Link>
+      <Link href="/login">
+        <Button preset="hero" pill>
+          <span className="inline-flex items-center gap-4">
+            <Icon name="laptop" />
+            <span>Mac</span>
+          </span>
+        </Button>
+      </Link>
+      <Link href="/login">
+        <Button preset="hero" pill>
+          <span className="inline-flex items-center gap-4">
+            <Icon name="smartphone" />
+            <span>iOS</span>
+          </span>
+        </Button>
+      </Link>
+    </div>
+  );
+}
diff --git a/src/components/landing/LandingHeroSection.tsx b/src/components/landing/LandingHeroSection.tsx
new file mode 100644
index 0000000..8b7df69
--- /dev/null
+++ b/src/components/landing/LandingHeroSection.tsx
@@ -0,0 +1,25 @@
+import { LandingHeroAnimation } from "@/components/landing/LandingHeroAnimation";
+import { LandingHeroCtas } from "@/components/landing/LandingHeroCtas";
+import { LandingHeroTitle } from "@/components/landing/LandingHeroTitle";
+import { cn } from "@/lib/utils";
+import { LandingHeroSectionProps } from "@/types/landing";
+
+export function LandingHeroSection({ className }: LandingHeroSectionProps) {
+  return (
+    <section
+      id="landing-hero"
+      aria-labelledby="landing-hero-title"
+      className={cn(
+        "grid gap-10",
+        "md:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] md:items-center",
+        className,
+      )}
+    >
+      <div className="space-y-8">
+        <LandingHeroTitle />
+        <LandingHeroCtas />
+      </div>
+      <LandingHeroAnimation />
+    </section>
+  );
+}
diff --git a/src/components/landing/LandingHeroTitle.tsx b/src/components/landing/LandingHeroTitle.tsx
new file mode 100644
index 0000000..a3e2ec1
--- /dev/null
+++ b/src/components/landing/LandingHeroTitle.tsx
@@ -0,0 +1,19 @@
+import { cn } from "@/lib/utils";
+
+export function LandingHeroTitle() {
+  return (
+    <header className="space-y-8">
+      <h1
+        id="landing-hero-title"
+        className={cn("t-40-b leading-tight text-[var(--color-gray-900)]", "md:t-58-b")}
+      >
+        나만의 데일리 플래너
+        <br />
+        PlanMate
+      </h1>
+      <p className={cn("t-14-m text-[var(--color-gray-600)]", "md:t-18-m")}>
+        원하는 기능만 골라 쓰는 맞춤형 일정 관리 서비스입니다.
+      </p>
+    </header>
+  );
+}
diff --git a/src/components/landing/LandingMainSection.tsx b/src/components/landing/LandingMainSection.tsx
index a6a4db3..7069e84 100644
--- a/src/components/landing/LandingMainSection.tsx
+++ b/src/components/landing/LandingMainSection.tsx
@@ -5,7 +5,7 @@ export function LandingMainSection({ children, className }: LandingMainSectionPr
   return (
     <main
       id="landing-main"
-      className={cn("mx-auto w-full max-w-[128rem] px-6 py-15", "space-y-[10rem]", className)}
+      className={cn("mx-auto w-full max-w-[128rem] px-6 mt-70", "space-y-[10rem]", className)}
     >
       {children}
     </main>
diff --git a/src/components/landing/LandingNavBar.tsx b/src/components/landing/LandingNavBar.tsx
index c8a114b..a053e64 100644
--- a/src/components/landing/LandingNavBar.tsx
+++ b/src/components/landing/LandingNavBar.tsx
@@ -29,7 +29,7 @@ export function LandingNavBar() {
           type="button"
           className={cn(
             "cursor-pointer t-14-m text-[var(--color-gray-600)] hover:text-[var(--color-gray-900)]",
-            "md: t-16-m",
+            "md:t-16-m",
           )}
           aria-label="언어 전환"
         >
@@ -39,7 +39,7 @@ export function LandingNavBar() {
           href="/login"
           className={cn(
             "t-14-m text-[var(--color-gray-600)] hover:text-[var(--color-gray-900)]",
-            "md: t-16-m",
+            "md:t-16-m",
           )}
           aria-label="로그인페이지로 이동"
         >
diff --git a/src/styles/globals.css b/src/styles/globals.css
index a6061ac..edf1940 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -388,3 +388,235 @@
     line-height: 140%;
   }
 }
+
+/* -------------------------------------------------
+   3-1) 타이포그래피 유틸 — md 브레이크포인트 전용
+   ------------------------------------------------- */
+@layer utilities {
+  @media (min-width: 768px) {
+    /* 8~32px */
+    .md\:t-8-m {
+      font-size: 0.8rem;
+      font-weight: 500;
+    }
+    .md\:t-8-b {
+      font-size: 0.8rem;
+      font-weight: 700;
+    }
+
+    .md\:t-10-m {
+      font-size: 1rem;
+      font-weight: 500;
+    }
+    .md\:t-10-b {
+      font-size: 1rem;
+      font-weight: 700;
+    }
+
+    .md\:t-12-m {
+      font-size: 1.2rem;
+      font-weight: 500;
+    }
+    .md\:t-12-b {
+      font-size: 1.2rem;
+      font-weight: 700;
+    }
+
+    .md\:t-14-m {
+      font-size: 1.4rem;
+      font-weight: 500;
+    }
+    .md\:t-14-b {
+      font-size: 1.4rem;
+      font-weight: 700;
+    }
+
+    .md\:t-16-m {
+      font-size: 1.6rem;
+      font-weight: 500;
+    }
+    .md\:t-16-b {
+      font-size: 1.6rem;
+      font-weight: 700;
+    }
+
+    .md\:t-18-m {
+      font-size: 1.8rem;
+      font-weight: 500;
+    }
+    .md\:t-18-b {
+      font-size: 1.8rem;
+      font-weight: 700;
+    }
+
+    .md\:t-20-m {
+      font-size: 2rem;
+      font-weight: 500;
+    }
+    .md\:t-20-b {
+      font-size: 2rem;
+      font-weight: 700;
+    }
+
+    .md\:t-22-m {
+      font-size: 2.2rem;
+      font-weight: 500;
+    }
+    .md\:t-22-b {
+      font-size: 2.2rem;
+      font-weight: 700;
+    }
+
+    .md\:t-24-m {
+      font-size: 2.4rem;
+      font-weight: 500;
+    }
+    .md\:t-24-b {
+      font-size: 2.4rem;
+      font-weight: 700;
+    }
+
+    .md\:t-26-m {
+      font-size: 2.6rem;
+      font-weight: 500;
+    }
+    .md\:t-26-b {
+      font-size: 2.6rem;
+      font-weight: 700;
+    }
+
+    .md\:t-28-m {
+      font-size: 2.8rem;
+      font-weight: 500;
+    }
+    .md\:t-28-b {
+      font-size: 2.8rem;
+      font-weight: 700;
+    }
+
+    .md\:t-30-m {
+      font-size: 3rem;
+      font-weight: 500;
+    }
+    .md\:t-30-b {
+      font-size: 3rem;
+      font-weight: 700;
+    }
+
+    .md\:t-32-m {
+      font-size: 3.2rem;
+      font-weight: 500;
+    }
+    .md\:t-32-b {
+      font-size: 3.2rem;
+      font-weight: 700;
+    }
+
+    /* 40~60px */
+    .md\:t-40-m {
+      font-size: 4rem;
+      font-weight: 500;
+    }
+    .md\:t-40-b {
+      font-size: 4rem;
+      font-weight: 700;
+    }
+
+    .md\:t-44-m {
+      font-size: 4.4rem;
+      font-weight: 500;
+    }
+    .md\:t-44-b {
+      font-size: 4.4rem;
+      font-weight: 700;
+    }
+
+    .md\:t-48-m {
+      font-size: 4.8rem;
+      font-weight: 500;
+    }
+    .md\:t-48-b {
+      font-size: 4.8rem;
+      font-weight: 700;
+    }
+
+    .md\:t-50-m {
+      font-size: 5rem;
+      font-weight: 500;
+    }
+    .md\:t-50-b {
+      font-size: 5rem;
+      font-weight: 700;
+    }
+
+    .md\:t-54-m {
+      font-size: 5.4rem;
+      font-weight: 500;
+    }
+    .md\:t-54-b {
+      font-size: 5.4rem;
+      font-weight: 700;
+    }
+
+    .md\:t-58-m {
+      font-size: 5.8rem;
+      font-weight: 500;
+    }
+    .md\:t-58-b {
+      font-size: 5.8rem;
+      font-weight: 700;
+    }
+
+    .md\:t-60-m {
+      font-size: 6rem;
+      font-weight: 500;
+    }
+    .md\:t-60-b {
+      font-size: 6rem;
+      font-weight: 700;
+    }
+
+    /* Body scale (+ line-height) */
+    .md\:tb-12-m {
+      font-size: 1.2rem;
+      font-weight: 500;
+      line-height: 160%;
+    }
+
+    .md\:tb-14-m {
+      font-size: 1.4rem;
+      font-weight: 500;
+      line-height: 180%;
+    }
+
+    .md\:tb-16-m {
+      font-size: 1.6rem;
+      font-weight: 500;
+      line-height: 180%;
+    }
+
+    .md\:tb-18-b {
+      font-size: 1.8rem;
+      font-weight: 700;
+      line-height: 140%;
+    }
+
+    .md\:tb-20-b {
+      font-size: 2rem;
+      font-weight: 700;
+      line-height: 160%;
+    }
+
+    .md\:tb-24-m {
+      font-size: 2.4rem;
+      font-weight: 500;
+      line-height: 160%;
+    }
+
+    .md\:tb-32-b {
+      font-size: 3.2rem;
+      font-weight: 700;
+      line-height: 140%;
+    }
+  }
+}
diff --git a/src/types/landing.ts b/src/types/landing.ts
index 9d99971..cde48ee 100644
--- a/src/types/landing.ts
+++ b/src/types/landing.ts
@@ -17,3 +17,7 @@ export type LandingMainSectionProps = {
   children: React.ReactNode;
   className?: string;
 };
+
+export type LandingHeroSectionProps = {
+  className?: string;
+};