diff --git a/app/(main)/activities/page.tsx b/app/(main)/activities/page.tsx
index 2a55d16..f34f085 100644
--- a/app/(main)/activities/page.tsx
+++ b/app/(main)/activities/page.tsx
@@ -1,106 +1,45 @@
 import type { Metadata } from "next";
 import { SessionsSection } from "@/components/activities/sessions-section";
 import { PageHeader } from "@/components/layout/page-header";
+import { activities } from "@/lib/activities";
 import { getSessions } from "@/lib/data";
 
 export const metadata: Metadata = {
-  title: "Activities",
-  description:
-    "정기 세션, 팀 연습, 대회 참가로 이루어진 모르고리즘의 활동을 소개합니다.",
+  title: "활동",
+  description: "정기 세션, 팀 연습, 대회 참가로 이루어진 모르고리즘의 활동을 소개합니다.",
 };
 
-const activities = [
-  {
-    number: "01",
-    label: "WEEKLY SESSION",
-    title: "정기 세션",
-    description:
-      "매주 진행되는 알고리즘 세션. 난이도별 트랙으로 나뉘어 문제를 풀고, 풀이를 공유하고 리뷰합니다.",
-    details: [
-      { label: "주기", value: "매주" },
-      { label: "형식", value: "주제별 발표와 문제풀이 리뷰" },
-      { label: "주제", value: "DP, 그래프, 문자열, 수학 등" },
-    ],
-  },
-  {
-    number: "02",
-    label: "TEAM PRACTICE",
-    title: "팀 연습",
-    description:
-      "ICPC 대회를 대비한 3인 1팀 연습. 실전과 동일한 환경에서 팀 커뮤니케이션과 전략을 다듬습니다.",
-    details: [
-      { label: "주기", value: "매주 토요일" },
-      { label: "구분", value: "Div 1, Div 2 구분 운영" },
-      { label: "문제 셋", value: "Codeforces, AtCoder 기출 활용" },
-    ],
-  },
-  {
-    number: "03",
-    label: "COMPETITIONS",
-    title: "대회 참가",
-    description:
-      "ICPC, SCPC, UCPC 등 국내외 주요 프로그래밍 대회에 참가하며 실전 경험을 쌓습니다.",
-    details: [{ label: "주요 대회", value: "ICPC, SUAPC, SCPC, UCPC" }],
-  },
-];
-
 export default function ActivitiesPage() {
   const sessions = getSessions();
 
   return (
-    <section className="bg-surface" id="activities">
+    <section id="activities">
       <PageHeader
-        label="03 // THE CURRICULUM"
-        title="Activities"
-        labelColor="tertiary"
+        eyebrow="Activities"
+        title="활동"
         description="한 학기 동안 동아리원들이 함께하는 세 가지 활동입니다."
       />
-
-      {activities.map((item, index) => (
-        <div
-          key={item.title}
-          className={
-            index % 2 === 0
-              ? "border-t border-outline-variant/20 bg-surface px-6 py-24 md:px-12"
-              : "border-t border-outline-variant/20 bg-surface-container-low px-6 py-24 md:px-12"
-          }
-        >
-          <div className="grid grid-cols-1 items-start gap-16 lg:grid-cols-[1fr_2fr]">
-            <div>
-              <span className="mb-4 block font-headline text-7xl font-extrabold text-primary/10 md:text-8xl">
-                {item.number}
-              </span>
-              <span className="mb-2 block font-label text-[10px] tracking-widest text-primary">
-                {item.label}
-              </span>
-              <h2 className="font-headline text-3xl font-bold md:text-4xl">
-                {item.title}
-              </h2>
+      <div className="flex flex-col divide-y divide-border border-y border-border">
+        {activities.map((activity) => (
+          <article key={activity.slug} className="grid grid-cols-1 gap-8 px-6 py-16 md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)] md:gap-16 md:px-10 md:py-24">
+            <div className="flex flex-col gap-3">
+              <span className="wide font-display text-xs font-semibold uppercase tracking-wide text-outline">{activity.eyebrow}</span>
+              <h2 className="text-3xl font-bold md:text-4xl">{activity.title}</h2>
             </div>
-            <div>
-              <p className="mb-12 text-lg leading-relaxed text-on-surface-variant">
-                {item.description}
-              </p>
-              <div className="grid grid-cols-1 gap-8 sm:grid-cols-3">
-                {item.details.map((detail) => (
-                  <div
-                    key={detail.label}
-                    className="border-l-2 border-primary/20 pl-6"
-                  >
-                    <p className="mb-2 font-label text-[10px] uppercase tracking-widest text-outline">
-                      {detail.label}
-                    </p>
-                    <p className="text-sm font-bold text-foreground">
-                      {detail.value}
-                    </p>
+            <div className="flex flex-col gap-10">
+              <p className="max-w-2xl text-lg leading-relaxed text-muted-foreground">{activity.description}</p>
+              <dl className="grid grid-cols-1 gap-6 sm:grid-cols-3">
+                {activity.details.map((detail) => (
+                  <div key={detail.label} className="flex flex-col gap-1 border-t border-border pt-4">
+                    <dt className="text-xs text-outline">{detail.label}</dt>
+                    <dd className="text-sm font-semibold">{detail.value}</dd>
                   </div>
                 ))}
-              </div>
+              </dl>
             </div>
-          </div>
-        </div>
-      ))}
-
+          </article>
+        ))}
+      </div>
       <SessionsSection sessions={sessions} />
     </section>
   );
diff --git a/app/(main)/awards/page.tsx b/app/(main)/awards/page.tsx
index 11749ae..5582b4a 100644
--- a/app/(main)/awards/page.tsx
+++ b/app/(main)/awards/page.tsx
@@ -4,26 +4,22 @@ import { PageHeader } from "@/components/layout/page-header";
 import { getAwards, getAwardStats } from "@/lib/data";
 
 export const metadata: Metadata = {
-  title: "Awards",
-  description:
-    "모르고리즘 동아리원들이 국내외 알고리즘 대회에서 거둔 수상 기록입니다.",
+  title: "수상 기록",
+  description: "모르고리즘 동아리원들이 국내외 알고리즘 대회에서 거둔 수상 기록입니다.",
 };
 
 export default function AwardsPage() {
   const awards = getAwards();
   const stats = getAwardStats();
-  const meta = stats.years
-    ? `${stats.total} RECORDS // ${stats.years.min}–${stats.years.max}`
-    : undefined;
+  const meta = stats.years ? `${stats.total} records · ${stats.years.min}–${stats.years.max}` : undefined;
 
   return (
-    <section className="bg-surface" id="awards">
+    <section id="awards">
       <PageHeader
-        label="02 // VERIFIED STATS"
-        title="Awards"
-        labelColor="tertiary"
+        eyebrow="Awards"
+        title="수상 기록"
         meta={meta}
-        description="ICPC, SUAPC, SCPC, UCPC 등 국내외 대회에서 모르고리즘 동아리원들이 거둔 성과입니다. 이름을 누르면 solved.ac 프로필로 이동합니다."
+        description="ICPC, SUAPC, SCPC, UCPC 등 국내외 대회에서 거둔 성과입니다. 이름을 누르면 solved.ac 프로필로 이동합니다."
       />
       <AwardsExplorer awards={awards} competitions={stats.competitions} />
     </section>
diff --git a/app/(main)/donate/page.tsx b/app/(main)/donate/page.tsx
index 5b01036..afba342 100644
--- a/app/(main)/donate/page.tsx
+++ b/app/(main)/donate/page.tsx
@@ -1,37 +1,38 @@
 import type { Metadata } from "next";
+import { PageHeader } from "@/components/layout/page-header";
 import { DonationCard } from "@/components/main/donation-card";
 
 export const metadata: Metadata = {
-  title: "Donate",
+  title: "후원",
   description: "모르고리즘 후원 안내입니다.",
 };
 
 export default function DonatePage() {
   const donationAccount = process.env.DONATION_ACCOUNT?.trim();
-  const accountHolder =
-    process.env.DONATION_ACCOUNT_HOLDER?.trim() || "모르고리즘";
+  const accountHolder = process.env.DONATION_ACCOUNT_HOLDER?.trim() || "모르고리즘";
   const contactUrl = process.env.DONATION_CONTACT_URL?.trim();
 
   return (
-    <section
-      className="py-48 px-6 md:px-12 bg-surface flex flex-col items-center text-center"
-      id="donate"
-    >
-      <span className="font-label text-primary tracking-widest uppercase text-xs mb-8">
-        06 // SUPPORT
-      </span>
-      <h1 className="font-headline text-4xl md:text-6xl font-bold tracking-tighter mb-8">
-        후원 안내
-      </h1>
-      <p className="max-w-2xl text-outline text-lg leading-relaxed mb-16">
-        모르고리즘의 대회 참가비, 서버 운영비, 스터디 교재비 등을 후원해 주세요.
-        여러분의 후원이 다음 세대의 알고리즘 인재를 키웁니다.
-      </p>
-      <DonationCard
-        account={donationAccount}
-        accountHolder={accountHolder}
-        contactUrl={contactUrl}
+    <section id="donate">
+      <PageHeader
+        eyebrow="Donate"
+        title="후원"
+        description="대회 참가비, 서버 운영비, 스터디 교재비에 쓰입니다. 후원은 다음 세대의 풍선이 됩니다."
       />
+      <div className="grid grid-cols-1 gap-12 px-6 pb-32 md:grid-cols-[minmax(0,1fr)_420px] md:gap-20 md:px-10">
+        <div className="flex flex-col">
+          {[
+            { title: "쓰이는 곳", body: "ICPC 등 대회 참가비와 교통비, 팀 연습에 쓰는 서버 운영비, 세션 교재비에 씁니다." },
+            { title: "후원 방법", body: "오른쪽 계좌로 입금해 주세요. 입금자명에 이름을 남겨 주시면 감사 인사를 드립니다." },
+          ].map((section) => (
+            <div key={section.title} className="grid grid-cols-1 gap-3 border-t border-border py-8 last:border-b md:grid-cols-[180px_minmax(0,1fr)] md:gap-10">
+              <h2 className="text-lg font-bold">{section.title}</h2>
+              <p className="leading-relaxed text-muted-foreground">{section.body}</p>
+            </div>
+          ))}
+        </div>
+        <DonationCard account={donationAccount} accountHolder={accountHolder} contactUrl={contactUrl} />
+      </div>
     </section>
   );
 }
diff --git a/app/(main)/join/page.tsx b/app/(main)/join/page.tsx
index 0fb8d80..ae5deda 100644
--- a/app/(main)/join/page.tsx
+++ b/app/(main)/join/page.tsx
@@ -1,9 +1,10 @@
 import type { Metadata } from "next";
 import { Clock, ExternalLink } from "lucide-react";
+import { PageHeader } from "@/components/layout/page-header";
 import { Button } from "@/components/ui/button";
 
 export const metadata: Metadata = {
-  title: "Join",
+  title: "지원",
   description: "모르고리즘 신입 동아리원 모집 안내입니다.",
 };
 
@@ -26,62 +27,39 @@ export default function JoinPage() {
   const joinFormUrl = process.env.JOIN_FORM_URL?.trim();
 
   return (
-    <section className="bg-primary px-6 py-32 md:px-12" id="join">
-      <div className="grid grid-cols-1 items-start gap-24 lg:grid-cols-2">
-        <div className="text-primary-foreground">
-          <span className="mb-4 block font-label text-xs uppercase tracking-widest opacity-80">
-            05 // RECRUITMENT
-          </span>
-          <h1 className="mb-12 font-headline text-6xl font-black tracking-tighter md:text-8xl">
-            Join the
-            <br />
-            Monolith.
-          </h1>
-          <div className="max-w-lg">
-            {sections.map((section, index) => (
-              <div
-                key={section.title}
-                className={
-                  index < sections.length - 1
-                    ? "border-b border-primary-foreground/20 py-8 first:pt-0"
-                    : "pt-8"
-                }
-              >
-                <h2 className="mb-2 font-headline text-xl font-bold">
-                  {section.title}
-                </h2>
-                <p className="opacity-80">{section.body}</p>
-              </div>
-            ))}
-          </div>
+    <section id="join">
+      <PageHeader eyebrow="Join" title="지원" description="같이 풀 사람을 찾습니다. 서류만 내면 끝입니다." />
+      <div className="grid grid-cols-1 gap-12 px-6 pb-32 md:grid-cols-[minmax(0,1fr)_420px] md:gap-20 md:px-10">
+        <div className="flex flex-col">
+          {sections.map((section) => (
+            <div key={section.title} className="grid grid-cols-1 gap-3 border-t border-border py-8 last:border-b md:grid-cols-[180px_minmax(0,1fr)] md:gap-10">
+              <h2 className="text-lg font-bold">{section.title}</h2>
+              <p className="leading-relaxed text-muted-foreground">{section.body}</p>
+            </div>
+          ))}
         </div>
-
-        <div className="bg-background p-12 text-foreground shadow-2xl">
-          <h2 className="mb-4 font-headline text-3xl font-bold">지원하기</h2>
-          <p className="mb-12 text-outline">
-            아래 버튼을 눌러 구글폼 지원서를 작성해 주세요. 간단한 자기소개와
-            알고리즘 관심 분야를 적어 주시면 됩니다.
-          </p>
+        <div className="flex flex-col gap-6 self-start rounded-3xl bg-surface p-8 md:p-10">
+          <div className="flex flex-col gap-2">
+            <span className="wide font-display text-xs font-semibold uppercase tracking-wide text-primary">Apply</span>
+            <h2 className="text-2xl font-bold">지원서 작성</h2>
+            <p className="text-sm leading-relaxed text-muted-foreground">
+              구글폼으로 받습니다. 간단한 자기소개와 알고리즘 관심 분야를 적어 주시면 됩니다.
+            </p>
+          </div>
           {joinFormUrl ? (
-            <Button
-              asChild
-              size="lg"
-              className="h-14 w-full font-headline uppercase tracking-widest"
-            >
+            <Button asChild className="h-14 rounded-full bg-foreground text-base font-semibold text-white hover:bg-foreground/90">
               <a href={joinFormUrl} target="_blank" rel="noopener noreferrer">
-                <ExternalLink className="size-4" aria-hidden="true" />
                 지원서 작성
+                <ExternalLink className="size-4" aria-hidden="true" />
               </a>
             </Button>
           ) : (
-            <div className="flex min-h-14 items-center justify-center gap-2 border border-outline-variant/40 px-4 text-center font-headline text-sm font-bold uppercase tracking-widest text-outline">
+            <div className="flex min-h-14 items-center justify-center gap-2 rounded-full border border-border text-sm font-medium text-muted-foreground">
               <Clock className="size-4 shrink-0" aria-hidden="true" />
-              현재 모집 기간이 아닙니다.
+              지금은 모집 기간이 아닙니다
             </div>
           )}
-          <p className="mt-6 text-center text-xs text-outline">
-            모집 기간이 아닌 경우 다음 모집 시 안내드리겠습니다.
-          </p>
+          <p className="text-xs text-outline">모집 기간이 아니면 다음 모집 때 안내드립니다.</p>
         </div>
       </div>
     </section>
diff --git a/app/(main)/members/page.tsx b/app/(main)/members/page.tsx
index c2acc05..b7620e4 100644
--- a/app/(main)/members/page.tsx
+++ b/app/(main)/members/page.tsx
@@ -1,17 +1,13 @@
 import type { Metadata } from "next";
 import { PageHeader } from "@/components/layout/page-header";
 import { MemberRow } from "@/components/members/member-row";
-import {
-  getMemberAwardCount,
-  getMemberByHandle,
-  getRosters,
-} from "@/lib/data";
+import { getMemberAwardCount, getMemberByHandle, getRosters } from "@/lib/data";
 import type { Roster } from "@/lib/schema";
 import { getSolvedacProfiles, type SolvedacProfile } from "@/lib/solvedac";
 
 export const metadata: Metadata = {
-  title: "Members",
-  description: "모르고리즘 동아리원 명단입니다.",
+  title: "운영진",
+  description: "모르고리즘을 운영하는 사람들입니다.",
 };
 
 function semesterTitle(roster: Roster): string {
@@ -21,35 +17,26 @@ function semesterTitle(roster: Roster): string {
 export default async function MembersPage() {
   const rosters = getRosters();
   const [current, ...past] = rosters;
-  const profiles = current
-    ? await getSolvedacProfiles(current.handles)
-    : new Map<string, SolvedacProfile>();
+  const profiles = current ? await getSolvedacProfiles(current.handles) : new Map<string, SolvedacProfile>();
 
   return (
-    <section className="bg-surface" id="members">
+    <section id="members">
       <PageHeader
-        label="04 // THE NODES"
-        title="Members"
-        labelColor="tertiary"
-        meta={current ? `현재 ${current.handles.length}명` : undefined}
-        description="함께 문제를 풀고 대회에 나가는 동아리원들입니다. 핸들을 누르면 solved.ac 프로필로 이동합니다."
+        eyebrow="Staff"
+        title="운영진"
+        meta={current ? `${current.handles.length} people · ${current.year}-${current.semester}` : undefined}
+        description="모르고리즘을 운영하는 사람들입니다. 핸들을 누르면 solved.ac 프로필로 이동합니다."
       />
 
-      {!current && (
-        <p className="px-6 pb-32 text-outline md:px-12">
-          아직 등록된 동아리원이 없습니다.
-        </p>
-      )}
+      {!current && <p className="px-6 pb-32 text-muted-foreground md:px-10">아직 등록된 운영진이 없습니다.</p>}
 
       {current && (
-        <div className="px-6 pb-24 md:px-12">
-          <h2 className="mb-6 font-headline text-2xl font-bold">
-            현재 동아리원
-            <span className="ml-3 font-label text-xs font-normal uppercase tracking-widest text-outline">
-              {semesterTitle(current)}
-            </span>
+        <div className="px-6 pb-24 md:px-10">
+          <h2 className="mb-6 flex items-baseline gap-3 text-2xl font-bold">
+            현재 운영진
+            <span className="wide font-display text-sm font-medium text-outline">{semesterTitle(current)}</span>
           </h2>
-          <div className="grid grid-cols-1 gap-0 md:grid-cols-2 lg:grid-cols-3">
+          <div className="grid grid-cols-1 gap-x-10 md:grid-cols-2 lg:grid-cols-3">
             {current.handles.map((handle) => {
               const member = getMemberByHandle(handle);
               if (!member) return null;
@@ -67,27 +54,19 @@ export default async function MembersPage() {
       )}
 
       {past.length > 0 && (
-        <div className="border-t border-outline-variant/20 bg-surface-container-low px-6 py-16 md:px-12">
-          <h2 className="mb-8 font-headline text-2xl font-bold">이전 학기</h2>
-          <div className="space-y-12">
+        <div className="border-t border-border bg-surface px-6 py-20 md:px-10">
+          <h2 className="mb-8 text-2xl font-bold">이전 운영진</h2>
+          <div className="flex flex-col gap-12">
             {past.map((roster) => (
               <section key={`${roster.year}-${roster.semester}`}>
-                <h3 className="mb-4 font-label text-xs uppercase tracking-widest text-outline">
-                  {semesterTitle(roster)}
-                  <span className="ml-2">{roster.handles.length}명</span>
+                <h3 className="wide mb-4 font-display text-sm font-medium text-outline">
+                  {semesterTitle(roster)} · {roster.handles.length}명
                 </h3>
-                <div className="grid grid-cols-1 gap-0 md:grid-cols-2 lg:grid-cols-3">
+                <div className="grid grid-cols-1 gap-x-10 md:grid-cols-2 lg:grid-cols-3">
                   {roster.handles.map((handle) => {
                     const member = getMemberByHandle(handle);
                     if (!member) return null;
-                    return (
-                      <MemberRow
-                        key={handle}
-                        member={member}
-                        awardCount={getMemberAwardCount(handle)}
-                        compact
-                      />
-                    );
+                    return <MemberRow key={handle} member={member} awardCount={getMemberAwardCount(handle)} compact />;
                   })}
                 </div>
               </section>
diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
index fc02d82..85d434e 100644
--- a/app/(main)/page.tsx
+++ b/app/(main)/page.tsx
@@ -1,21 +1,35 @@
-import { AboutSection } from "@/components/main/about-section";
-import { GalleryCarouselSection } from "@/components/main/gallery-carousel-section";
+import { ActivitiesSection } from "@/components/main/activities-section";
 import { HeroSection } from "@/components/main/hero-section";
+import { JoinBand } from "@/components/main/join-band";
+import { MomentsSection } from "@/components/main/moments-section";
 import { RecentAwardsSection } from "@/components/main/recent-awards-section";
-import { getMembers, getRecentAwards } from "@/lib/data";
+import { StatsBand } from "@/components/main/stats-band";
+import {
+  getAllHandles,
+  getAwardStats,
+  getPeopleCount,
+  getRecentAwards,
+} from "@/lib/data";
 import { getSolvedacProfiles, sumSolvedCount } from "@/lib/solvedac";
 
 export default async function MainPage() {
-  const profiles = await getSolvedacProfiles(
-    getMembers().map((member) => member.handle)
-  );
+  const handles = getAllHandles();
+  const profiles = await getSolvedacProfiles(handles);
+  const stats = getAwardStats();
 
   return (
     <div>
-      <HeroSection solvedCount={sumSolvedCount(profiles)} />
-      <AboutSection />
-      <RecentAwardsSection awards={getRecentAwards(3)} />
-      <GalleryCarouselSection />
+      <HeroSection />
+      <StatsBand
+        people={getPeopleCount()}
+        awards={stats.total}
+        solved={sumSolvedCount(profiles)}
+        tracked={profiles.size}
+      />
+      <RecentAwardsSection awards={getRecentAwards(3)} total={stats.total} />
+      <ActivitiesSection />
+      <MomentsSection />
+      <JoinBand />
     </div>
   );
 }
diff --git a/app/fonts.ts b/app/fonts.ts
new file mode 100644
index 0000000..0a42f00
--- /dev/null
+++ b/app/fonts.ts
@@ -0,0 +1,18 @@
+import { Archivo, Noto_Sans_KR } from "next/font/google";
+
+/** 영문 워드마크, 숫자, 라벨용. 폭을 125%로 넓혀 쓴다(globals.css의 .wide). */
+export const archivo = Archivo({
+  variable: "--font-archivo",
+  subsets: ["latin"],
+  weight: "variable",
+  axes: ["wdth"],
+  display: "swap",
+});
+
+/** 한글 제목과 본문. */
+export const notoSansKr = Noto_Sans_KR({
+  variable: "--font-noto-sans-kr",
+  subsets: ["latin"],
+  weight: ["400", "500", "700"],
+  display: "swap",
+});
diff --git a/app/globals.css b/app/globals.css
index 19375b0..8193b05 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,8 +2,6 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 
-@custom-variant dark (&:is(.dark *));
-
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -23,157 +21,77 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  /* Custom surface colors from design */
+  --color-chart-1: var(--primary);
+  --color-chart-2: var(--balloon-yellow);
+  --color-chart-3: var(--ac);
+  --color-chart-4: var(--outline);
+  --color-chart-5: var(--foreground);
+  --color-sidebar: var(--surface);
+  --color-sidebar-foreground: var(--foreground);
+  --color-sidebar-primary: var(--primary);
+  --color-sidebar-primary-foreground: var(--primary-foreground);
+  --color-sidebar-accent: var(--surface-2);
+  --color-sidebar-accent-foreground: var(--foreground);
+  --color-sidebar-border: var(--border);
+  --color-sidebar-ring: var(--ring);
+
+  /* 사이트 고유 토큰 */
   --color-surface: var(--surface);
-  --color-surface-container: var(--surface-container);
-  --color-surface-container-low: var(--surface-container-low);
-  --color-surface-container-high: var(--surface-container-high);
-  --color-on-surface-variant: var(--on-surface-variant);
-  --color-outline: var(--outline-color);
-  --color-outline-variant: var(--outline-variant);
-  --color-tertiary: var(--tertiary);
-
-  --font-sans: var(--app-font-sans);
-  --font-headline: "Manrope", var(--app-font-sans);
-  --font-label: "Inter", var(--app-font-sans);
-  --font-mono: var(--font-geist-mono);
-
-  --radius-sm: 0px;
-  --radius-md: 0px;
-  --radius-lg: 0px;
-  --radius-xl: 0px;
-
-  --shadow-2xs: 0 1px 3px 0px rgb(0 0 0 / 0.05);
-  --shadow-xs: 0 1px 3px 0px rgb(0 0 0 / 0.05);
-  --shadow-sm: 0 1px 3px 0px rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
-  --shadow: 0 1px 3px 0px rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
-  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --color-surface-2: var(--surface-2);
+  --color-sky-top: var(--sky-top);
+  --color-outline: var(--outline);
+  --color-balloon-blue: var(--balloon-blue);
+  --color-balloon-yellow: var(--balloon-yellow);
+  --color-ac: var(--ac);
+
+  --font-sans: var(--font-noto-sans-kr), "Apple SD Gothic Neo", "Pretendard", sans-serif;
+  --font-display: var(--font-archivo), "Helvetica Neue", Arial, sans-serif;
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
 }
 
 :root {
-  --app-font-sans: "Manrope", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
-
-  /* Light editorial palette */
-  --tertiary: #d48a00;
-  --background: #f5f5f5;
-  --foreground: #111111;
+  /* 하늘색에서 흰색으로 내려가는 밝은 화면. 잉크는 짙은 네이비. */
+  --background: #ffffff;
+  --foreground: #0f1a2e;
   --card: #ffffff;
-  --card-foreground: #111111;
+  --card-foreground: #0f1a2e;
   --popover: #ffffff;
-  --popover-foreground: #111111;
-  --primary: #0077a3;
+  --popover-foreground: #0f1a2e;
+  --primary: #1e6fd9;
   --primary-foreground: #ffffff;
-  --secondary: #e8e8e8;
-  --secondary-foreground: #005f82;
-  --muted: #e8e8e8;
-  --muted-foreground: #5a6a70;
-  --accent: #e8e8e8;
-  --accent-foreground: #334b52;
-  --destructive: #c0392b;
-  --border: rgba(60, 73, 78, 0.15);
-  --input: rgba(60, 73, 78, 0.15);
-  --ring: #0077a3;
-  --chart-1: #0077a3;
-  --chart-2: #005f82;
-  --chart-3: #d48a00;
-  --chart-4: #b87200;
-  --chart-5: #00a8e0;
-  --radius: 0px;
-
-  --surface: #f5f5f5;
-  --surface-container: #ffffff;
-  --surface-container-low: #efefef;
-  --surface-container-high: #e0e0e0;
-  --on-surface-variant: #334b52;
-  --outline-color: #7a8d93;
-  --outline-variant: #c0ccce;
-
-  --sidebar: #efefef;
-  --sidebar-foreground: #111111;
-  --sidebar-primary: #0077a3;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #ffffff;
-  --sidebar-accent-foreground: #111111;
-  --sidebar-border: rgba(60, 73, 78, 0.15);
-  --sidebar-ring: #0077a3;
-}
-
-.dark {
-  /* Dark editorial palette — #131313 base, #9de2ff primary, #ffab27 tertiary */
-  --tertiary: #ffab27;
-  --background: #131313;
-  --foreground: #e2e2e2;
-  --card: #1f1f1f;
-  --card-foreground: #e2e2e2;
-  --popover: #1f1f1f;
-  --popover-foreground: #e2e2e2;
-  --primary: #9de2ff;
-  --primary-foreground: #003545;
-  --secondary: #1b1b1b;
-  --secondary-foreground: #9dcee3;
-  --muted: #1b1b1b;
-  --muted-foreground: #869399;
-  --accent: #1b1b1b;
-  --accent-foreground: #bbc8d0;
-  --destructive: #ffb4ab;
-  --border: rgba(60, 73, 78, 0.2);
-  --input: rgba(60, 73, 78, 0.3);
-  --ring: #9de2ff;
-  --chart-1: #9de2ff;
-  --chart-2: #9dcee3;
-  --chart-3: #ffd098;
-  --chart-4: #ffb95a;
-  --chart-5: #5ed4ff;
-
-  --surface: #131313;
-  --surface-container: #1f1f1f;
-  --surface-container-low: #1b1b1b;
-  --surface-container-high: #2a2a2a;
-  --on-surface-variant: #bbc8d0;
-  --outline-color: #869399;
-  --outline-variant: #3c494e;
-
-  --sidebar: #1b1b1b;
-  --sidebar-foreground: #e2e2e2;
-  --sidebar-primary: #9de2ff;
-  --sidebar-primary-foreground: #003545;
-  --sidebar-accent: #1f1f1f;
-  --sidebar-accent-foreground: #e2e2e2;
-  --sidebar-border: rgba(60, 73, 78, 0.2);
-  --sidebar-ring: #9de2ff;
+  --secondary: #edf3fc;
+  --secondary-foreground: #0f1a2e;
+  --muted: #f6f9fe;
+  --muted-foreground: #4a5a75;
+  --accent: #edf3fc;
+  --accent-foreground: #0f1a2e;
+  --destructive: #d7263d;
+  --border: #e4eaf3;
+  --input: #d9e2ef;
+  --ring: #1e6fd9;
+  --radius: 12px;
+
+  --surface: #f6f9fe;
+  --surface-2: #edf3fc;
+  --sky-top: #e3eeff;
+  --outline: #8a97ad;
+  --balloon-blue: #1e6fd9;
+  --balloon-yellow: #ffd23f;
+  --ac: #34c759;
 }
 
-::-webkit-scrollbar {
-  width: 4px;
+/* Archivo 가변 폰트를 넓게 쓴다. 영문 워드마크와 라벨에 붙인다. */
+@utility wide {
+  font-stretch: 125%;
 }
 
-::-webkit-scrollbar-track {
-  background: var(--background);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--outline-variant);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--primary);
+::selection {
+  background-color: var(--balloon-yellow);
+  color: var(--foreground);
 }
 
 html {
@@ -186,12 +104,125 @@ html {
   }
 
   body {
-    font-family: "Manrope", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-sans antialiased;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Liquid Glass
+   애플 HIG 기준: 콘텐츠 위에 떠 있는 "네비게이션 레이어"에만 쓴다.
+   콘텐츠(목록, 표, 카드, 사진)에는 쓰지 않고, 유리 위에 유리를 겹치지 않는다.
+   변형은 둘. Regular는 기본 UI 표면, Clear는 사진과 3D 위의 작은 컨트롤.
+   ───────────────────────────────────────────────────────────── */
+@layer components {
+  .glass {
+    position: relative;
+    isolation: isolate;
+    -webkit-backdrop-filter: blur(16px) saturate(180%);
+    backdrop-filter: blur(16px) saturate(180%);
+    background: rgb(255 255 255 / 0.55);
+    border: 1px solid rgb(255 255 255 / 0.65);
+    /* 위쪽 안쪽 선이 유리 두께, 아래 그림자가 떠 있는 느낌을 만든다. */
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 0.85),
+      inset 0 -1px 0 rgb(15 26 46 / 0.04),
+      0 8px 24px rgb(15 26 46 / 0.1);
+  }
+
+  /* 가장자리에서 빛이 걸리는 스페큘러 림. */
+  .glass::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    z-index: 0;
+    background: linear-gradient(
+      140deg,
+      rgb(255 255 255 / 0.7) 0%,
+      rgb(255 255 255 / 0) 32%,
+      rgb(255 255 255 / 0) 68%,
+      rgb(255 255 255 / 0.45) 100%
+    );
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask-composite: exclude;
+    padding: 1px;
+  }
+
+  .glass > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  /* Clear. 사진이나 3D 위에 얹는 작은 컨트롤 전용.
+     투명도가 높은 대신 글자가 묻히지 않도록 어두운 디밍 레이어를 함께 깐다. */
+  .glass-clear {
+    -webkit-backdrop-filter: blur(10px) saturate(200%) brightness(1.06);
+    backdrop-filter: blur(10px) saturate(200%) brightness(1.06);
+    background: rgb(255 255 255 / 0.3);
+    border-color: rgb(255 255 255 / 0.55);
+  }
+
+  /* 틴트. 애플 지침대로 주요 액션 하나에만 쓴다. */
+  .glass-tint {
+    background: rgb(15 26 46 / 0.88);
+    border-color: rgb(255 255 255 / 0.28);
+    color: #ffffff;
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 0.32),
+      0 8px 24px rgb(15 26 46 / 0.24);
+  }
+
+  .glass-tint::before {
+    background: linear-gradient(
+      140deg,
+      rgb(255 255 255 / 0.45) 0%,
+      rgb(255 255 255 / 0) 34%,
+      rgb(255 255 255 / 0) 66%,
+      rgb(255 255 255 / 0.22) 100%
+    );
+  }
+
+  /* 굴절. backdrop-filter의 url() 참조는 Chrome 계열만 지원한다.
+     지원하지 않는 브라우저는 위의 흐림만 보이고 레이아웃은 같다. */
+  @supports (backdrop-filter: url(#glass-regular)) {
+    .glass {
+      -webkit-backdrop-filter: blur(14px) saturate(180%) url(#glass-regular);
+      backdrop-filter: blur(14px) saturate(180%) url(#glass-regular);
+    }
+    .glass-clear {
+      -webkit-backdrop-filter: blur(8px) saturate(200%) brightness(1.06) url(#glass-clear);
+      backdrop-filter: blur(8px) saturate(200%) brightness(1.06) url(#glass-clear);
+    }
+  }
+
+  /* 투명도 줄이기를 켠 사람에게는 불투명한 면으로 바꾼다.
+     애플도 이 설정에서 유리를 불투명하게 처리한다. */
+  @media (prefers-reduced-transparency: reduce) {
+    .glass {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+      background: #ffffff;
+      border-color: var(--border);
+    }
+    .glass::before {
+      display: none;
+    }
+    .glass-clear {
+      background: #ffffff;
+    }
+    .glass-tint {
+      background: var(--foreground);
+    }
   }
 
-  ::selection {
-    background-color: var(--primary);
-    color: var(--primary-foreground);
+  /* 대비 높이기에서는 테두리를 또렷하게. */
+  @media (prefers-contrast: more) {
+    .glass {
+      background: rgb(255 255 255 / 0.92);
+      border-color: var(--foreground);
+    }
   }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 0ebc763..3b2bcad 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,29 +1,11 @@
 import type { Metadata } from "next";
-import { Manrope, Inter } from "next/font/google";
-import { Geist_Mono } from "next/font/google";
-import { ThemeProvider } from "@/components/layout/theme-provider";
+import { GlassFilters } from "@/components/ui/glass-filters";
+import { archivo, notoSansKr } from "@/app/fonts";
 import { siteUrl } from "@/lib/site";
 import "./globals.css";
 
-const manrope = Manrope({
-  variable: "--font-manrope",
-  subsets: ["latin"],
-  weight: ["200", "400", "700", "800"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-  weight: ["400", "700"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 const description =
-  "연세대학교 알고리즘 동아리 모르고리즘입니다. 문제 해결, 팀 연습, 대회 참가를 통해 함께 성장합니다.";
+  "연세대학교 알고리즘 동아리 모르고리즘입니다. 매주 모여 문제를 풀고, 팀으로 대회에 나갑니다.";
 
 export const metadata: Metadata = {
   metadataBase: new URL(siteUrl()),
@@ -47,20 +29,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html
-      lang="ko"
-      suppressHydrationWarning
-      className={`${manrope.variable} ${inter.variable} ${geistMono.variable}`}
-    >
-      <body className="antialiased">
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="dark"
-          enableSystem={false}
-          disableTransitionOnChange
-        >
-          {children}
-        </ThemeProvider>
+    <html lang="ko" className={`${archivo.variable} ${notoSansKr.variable}`}>
+      <body>
+        <GlassFilters />
+        {children}
       </body>
     </html>
   );
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 2d0047c..9438993 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -7,22 +7,13 @@ export default function NotFound() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
-      <main className="flex min-h-[70vh] flex-col justify-center px-6 pt-32 pb-24 md:px-12">
-        <span className="mb-8 block font-label text-xs uppercase tracking-widest text-tertiary">
-          404 // NOT FOUND
-        </span>
-        <h1 className="mb-8 font-headline text-6xl font-extrabold tracking-tighter md:text-8xl">
-          Wrong Answer.
-        </h1>
-        <p className="mb-12 max-w-xl text-lg text-on-surface-variant">
-          요청하신 페이지를 찾을 수 없습니다. 주소를 다시 확인하거나 홈으로
-          돌아가 주세요.
+      <main className="flex min-h-[70vh] flex-col justify-center bg-gradient-to-b from-sky-top to-background px-6 pb-24 pt-40 md:px-10">
+        <span className="wide mb-6 font-display text-sm font-semibold uppercase tracking-wide text-primary">404</span>
+        <h1 className="wide mb-6 font-display text-6xl font-semibold tracking-tight md:text-8xl">Wrong Answer.</h1>
+        <p className="mb-10 max-w-xl text-lg text-muted-foreground">
+          요청하신 페이지를 찾을 수 없습니다. 주소를 다시 확인하거나 홈으로 돌아가 주세요.
         </p>
-        <Button
-          asChild
-          size="lg"
-          className="h-12 w-fit px-8 font-headline uppercase tracking-widest"
-        >
+        <Button asChild className="h-12 w-fit rounded-full bg-foreground px-7 text-sm font-semibold text-white hover:bg-foreground/90">
           <Link href="/">홈으로</Link>
         </Button>
       </main>
diff --git a/components/activities/sessions-section.tsx b/components/activities/sessions-section.tsx
index a25b4ab..52c4f14 100644
--- a/components/activities/sessions-section.tsx
+++ b/components/activities/sessions-section.tsx
@@ -1,58 +1,37 @@
 import { ExternalLink } from "lucide-react";
 import type { Session } from "@/lib/schema";
 
-const COLUMNS = ["Date", "Topic", "Presenter", "Link"];
+const COLUMNS = ["날짜", "주제", "발제", "자료"];
 
 export function SessionsSection({ sessions }: { sessions: Session[] }) {
   if (sessions.length === 0) return null;
 
   return (
-    <div
-      className="border-t border-outline-variant/20 bg-surface px-6 py-24 md:px-12"
-      id="sessions"
-    >
-      <span className="mb-2 block font-label text-[10px] tracking-widest text-primary">
-        SESSION LOG
-      </span>
-      <h2 className="mb-12 font-headline text-3xl font-bold md:text-4xl">
-        정기 세션 기록
-      </h2>
+    <div className="px-6 py-24 md:px-10" id="sessions">
+      <div className="mb-10 flex flex-col gap-3">
+        <span className="wide font-display text-xs font-semibold uppercase tracking-wide text-outline">Session log</span>
+        <h2 className="text-3xl font-bold md:text-4xl">정기 세션 기록</h2>
+      </div>
       <div className="overflow-x-auto">
         <table className="w-full min-w-[560px] border-collapse text-left">
           <thead>
-            <tr className="border-b border-outline-variant/30">
+            <tr className="border-b border-border">
               {COLUMNS.map((column) => (
-                <th
-                  key={column}
-                  scope="col"
-                  className="py-3 font-label text-[10px] uppercase tracking-[0.2em] text-outline"
-                >
-                  {column}
-                </th>
+                <th key={column} scope="col" className="py-3 pr-4 text-xs font-medium text-outline">{column}</th>
               ))}
             </tr>
           </thead>
           <tbody>
             {sessions.map((session) => (
-              <tr
-                key={`${session.date}-${session.topic}`}
-                className="border-b border-outline-variant/10 transition-colors hover:bg-surface-container-low"
-              >
-                <td className="py-4 pr-4 font-bold text-primary">{session.date}</td>
+              <tr key={`${session.date}-${session.topic}`} className="border-b border-border">
+                <td className="wide py-4 pr-4 font-display text-sm font-semibold tabular-nums text-primary">{session.date}</td>
                 <td className="py-4 pr-4">{session.topic}</td>
-                <td className="py-4 pr-4 text-on-surface-variant">
-                  {session.presenter}
-                </td>
+                <td className="py-4 pr-4 text-muted-foreground">{session.presenter}</td>
                 <td className="py-4">
                   {session.link && (
-                    <a
-                      href={session.link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="inline-flex items-center gap-1 text-outline transition-colors hover:text-primary"
-                    >
+                    <a href={session.link} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground">
                       <ExternalLink className="size-3.5" aria-hidden="true" />
-                      자료
+                      보기
                     </a>
                   )}
                 </td>
diff --git a/components/awards/awards-explorer.tsx b/components/awards/awards-explorer.tsx
index 71a1d63..1f37f40 100644
--- a/components/awards/awards-explorer.tsx
+++ b/components/awards/awards-explorer.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import { useState, type ReactNode } from "react";
-import { Button } from "@/components/ui/button";
 import { groupAwardsByYear, type CompetitionCount } from "@/lib/awards";
 import type { Award } from "@/lib/schema";
 import { profileUrl } from "@/lib/solvedac";
+import { cn } from "@/lib/utils";
 
 const ALL = "all";
-const COLUMNS = ["Event", "Award", "Name", "Team"];
+const COLUMNS = ["대회", "상", "이름", "팀"];
 
 type AwardsExplorerProps = {
   awards: Award[];
@@ -16,27 +16,16 @@ type AwardsExplorerProps = {
 
 export function AwardsExplorer({ awards, competitions }: AwardsExplorerProps) {
   const [selected, setSelected] = useState<string>(ALL);
-  const filtered =
-    selected === ALL
-      ? awards
-      : awards.filter((award) => award.competition === selected);
+  const filtered = selected === ALL ? awards : awards.filter((award) => award.competition === selected);
   const groups = groupAwardsByYear(filtered);
 
   if (awards.length === 0) {
-    return (
-      <p className="px-6 pb-32 text-outline md:px-12">
-        아직 등록된 수상 기록이 없습니다.
-      </p>
-    );
+    return <p className="px-6 pb-32 text-muted-foreground md:px-10">아직 등록된 수상 기록이 없습니다.</p>;
   }
 
   return (
-    <div className="px-6 pb-32 md:px-12">
-      <div
-        className="mb-12 flex flex-wrap gap-2"
-        role="group"
-        aria-label="대회 필터"
-      >
+    <div className="px-6 pb-32 md:px-10">
+      <div className="mb-14 flex flex-wrap gap-2" role="group" aria-label="대회 필터">
         <FilterChip active={selected === ALL} onClick={() => setSelected(ALL)}>
           전체 <span className="opacity-60">{awards.length}</span>
         </FilterChip>
@@ -46,72 +35,59 @@ export function AwardsExplorer({ awards, competitions }: AwardsExplorerProps) {
             active={selected === competition.name}
             onClick={() => setSelected(competition.name)}
           >
-            {competition.name}{" "}
-            <span className="opacity-60">{competition.count}</span>
+            {competition.name} <span className="opacity-60">{competition.count}</span>
           </FilterChip>
         ))}
       </div>
 
-      {groups.length === 0 && (
-        <p className="text-outline">해당 대회의 수상 기록이 없습니다.</p>
-      )}
+      {groups.length === 0 && <p className="text-muted-foreground">해당 대회의 수상 기록이 없습니다.</p>}
 
-      {groups.map((group) => (
-        <YearTable key={group.year} year={group.year} awards={group.awards} />
-      ))}
+      <div className="flex flex-col gap-20">
+        {groups.map((group) => (
+          <YearTable key={group.year} year={group.year} awards={group.awards} />
+        ))}
+      </div>
     </div>
   );
 }
 
-function FilterChip({
-  active,
-  onClick,
-  children,
-}: {
-  active: boolean;
-  onClick: () => void;
-  children: ReactNode;
-}) {
+function FilterChip({ active, onClick, children }: { active: boolean; onClick: () => void; children: ReactNode }) {
   return (
-    <Button
+    <button
       type="button"
-      size="sm"
-      variant={active ? "default" : "outline"}
       aria-pressed={active}
       onClick={onClick}
-      className="h-9 px-4 font-label text-xs uppercase tracking-widest"
+      className={cn(
+        "h-10 rounded-full border px-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+        active
+          ? "border-foreground bg-foreground text-white"
+          : "border-border bg-background text-muted-foreground hover:border-foreground/40 hover:text-foreground"
+      )}
     >
       {children}
-    </Button>
+    </button>
   );
 }
 
 function YearTable({ year, awards }: { year: number; awards: Award[] }) {
   const headingId = `awards-${year}`;
   return (
-    <section className="mb-16" aria-labelledby={headingId}>
-      <h2
-        id={headingId}
-        className="mb-4 font-headline text-4xl font-extrabold text-primary/20 md:text-5xl"
-      >
+    <section className="grid grid-cols-1 gap-6 md:grid-cols-[160px_minmax(0,1fr)]" aria-labelledby={headingId}>
+      <h2 id={headingId} className="wide font-display text-4xl font-semibold tabular-nums text-foreground md:text-5xl">
         {year}
       </h2>
       <div className="overflow-x-auto">
         <table className="w-full min-w-[640px] border-collapse text-left">
           <colgroup>
-            <col className="w-[25%]" />
-            <col className="w-[15%]" />
-            <col className="w-[30%]" />
+            <col className="w-[26%]" />
+            <col className="w-[18%]" />
             <col className="w-[30%]" />
+            <col className="w-[26%]" />
           </colgroup>
           <thead>
-            <tr className="border-b border-outline-variant/30">
+            <tr className="border-b border-border">
               {COLUMNS.map((column) => (
-                <th
-                  key={column}
-                  scope="col"
-                  className="py-3 font-label text-[10px] uppercase tracking-[0.2em] text-outline"
-                >
+                <th key={column} scope="col" className="py-3 pr-4 text-xs font-medium text-outline">
                   {column}
                 </th>
               ))}
@@ -119,27 +95,20 @@ function YearTable({ year, awards }: { year: number; awards: Award[] }) {
           </thead>
           <tbody>
             {awards.map((award) => (
-              <tr
-                key={award.id}
-                className="border-b border-outline-variant/10 transition-colors hover:bg-surface-container-low"
-              >
+              <tr key={award.id} className="border-b border-border">
                 <td className="py-4 pr-4">
-                  <span className="mr-2 font-label text-[10px] tracking-widest text-outline">
-                    {award.month}월
+                  <span className="wide mr-2 font-display text-xs font-medium tabular-nums text-outline">
+                    {String(award.month).padStart(2, "0")}
                   </span>
                   {award.competition}
                 </td>
-                <td className="py-4 pr-4 font-bold text-primary">{award.award}</td>
+                <td className="wide py-4 pr-4 font-display font-semibold text-primary">{award.award}</td>
                 <td className="py-4 pr-4">
                   <MemberNames members={award.members} />
                 </td>
-                <td className="py-4 text-on-surface-variant">
+                <td className="py-4 text-muted-foreground">
                   {award.team}
-                  {award.note && (
-                    <span className="mt-1 block font-label text-[10px] tracking-widest text-outline">
-                      {award.note}
-                    </span>
-                  )}
+                  {award.note && <span className="mt-1 block text-xs text-outline">{award.note}</span>}
                 </td>
               </tr>
             ))}
diff --git a/components/hero/balloon-hero.tsx b/components/hero/balloon-hero.tsx
new file mode 100644
index 0000000..bc16dba
--- /dev/null
+++ b/components/hero/balloon-hero.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { archivo } from "@/app/fonts";
+
+const BalloonScene = dynamic(() => import("@/components/hero/balloon-scene"), {
+  ssr: false,
+  loading: () => <StaticWordmark />,
+});
+
+/** WebGL이 준비되기 전이나 쓸 수 없을 때 보이는 정지 화면. */
+function StaticWordmark() {
+  return (
+    <div
+      aria-hidden="true"
+      className="wide pointer-events-none absolute inset-x-6 top-1/2 -translate-y-[58%] select-none text-center font-display text-[clamp(56px,10.4vw,168px)] font-semibold leading-none text-[#B9D3F7] md:inset-x-10"
+    >
+      MOLGORITHM
+    </div>
+  );
+}
+
+const subscribe = () => () => {};
+
+function useMountedAndMotion() {
+  const mounted = useSyncExternalStore(subscribe, () => true, () => false);
+  const [reduced, setReduced] = useState(false);
+  const [narrow, setNarrow] = useState(false);
+  useEffect(() => {
+    const motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const width = window.matchMedia("(max-width: 768px)");
+    const update = () => {
+      setReduced(motion.matches);
+      setNarrow(width.matches);
+    };
+    update();
+    motion.addEventListener("change", update);
+    width.addEventListener("change", update);
+    return () => {
+      motion.removeEventListener("change", update);
+      width.removeEventListener("change", update);
+    };
+  }, []);
+  return { mounted, reduced, narrow };
+}
+
+export function BalloonHero() {
+  const { mounted, reduced, narrow } = useMountedAndMotion();
+  const [solved, setSolved] = useState(0);
+  const fontFamily = archivo.style.fontFamily;
+
+  return (
+    <>
+      <div className="absolute inset-0 z-[2]">
+        {mounted ? (
+          <BalloonScene
+            fontFamily={fontFamily}
+            reduced={reduced}
+            count={narrow ? 6 : 10}
+            onPop={() => setSolved((n) => n + 1)}
+          />
+        ) : (
+          <StaticWordmark />
+        )}
+      </div>
+      {!reduced && (
+        <div
+          className="glass glass-clear pointer-events-none absolute bottom-6 left-1/2 z-[3] inline-flex -translate-x-1/2 items-center gap-2.5 rounded-full px-4 py-2.5 text-[13px] font-medium text-foreground/80 md:bottom-10"
+          aria-live="polite"
+        >
+          <span className="size-2 rounded-full bg-ac shadow-[0_0_0_4px_rgba(52,199,89,0.2)]" aria-hidden="true" />
+          <span className="wide font-display text-[15px] font-semibold tracking-wider text-foreground">AC</span>
+          <span className="font-display tabular-nums">{solved}</span>
+          <span>풍선을 눌러 보세요</span>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/components/hero/balloon-scene.tsx b/components/hero/balloon-scene.tsx
new file mode 100644
index 0000000..0a6cb0c
--- /dev/null
+++ b/components/hero/balloon-scene.tsx
@@ -0,0 +1,402 @@
+"use client";
+
+import { Canvas, useFrame, useThree, type ThreeEvent } from "@react-three/fiber";
+import { useEffect, useMemo, useRef, useState } from "react";
+import * as THREE from "three";
+
+type Kind = { glass: boolean; color: number };
+
+// 대부분 유리, 두 개만 색이 있는 광택 풍선.
+const KINDS: Kind[] = [
+  { glass: true, color: 0xffffff },
+  { glass: false, color: 0x1e6fd9 },
+  { glass: true, color: 0xcfe3ff },
+  { glass: true, color: 0xbff0e6 },
+  { glass: false, color: 0xffd23f },
+  { glass: true, color: 0xe6dcff },
+  { glass: true, color: 0xffffff },
+  { glass: true, color: 0xfff3c4 },
+  { glass: true, color: 0xffd9e0 },
+  { glass: true, color: 0xcfe3ff },
+];
+
+// 로고타입 위에 흩어 놓는 자리. 가운데는 살짝 비워 글자가 보이게.
+const SLOTS: [number, number, number][] = [
+  [-6.2, 1.4, 0.5],
+  [-3.6, -0.9, 1.2],
+  [-1.4, 2.2, -0.8],
+  [0.6, -0.2, 1.8],
+  [2.4, 2.4, 0.2],
+  [4.4, -1.0, 0.9],
+  [6.4, 1.2, -0.4],
+  [-4.8, 3.2, -1.6],
+  [3.8, 3.4, -1.4],
+  [-0.8, -2.6, -0.6],
+];
+
+const WORD_PLANE_Z = -2.5;
+const WORD_CANVAS = { width: 4096, height: 720 };
+const WORD_RATIO = WORD_CANVAS.height / WORD_CANVAS.width;
+
+function gradientCanvas(width: number, height: number, top: string, bottom: string) {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return canvas;
+  const gradient = ctx.createLinearGradient(0, 0, 0, height);
+  gradient.addColorStop(0, top);
+  gradient.addColorStop(1, bottom);
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, width, height);
+  return canvas;
+}
+
+/** 물방울 모양 풍선. 구를 위아래로 늘리고 아래를 살짝 좁힌다. */
+function makeBalloonGeometry() {
+  const geometry = new THREE.SphereGeometry(1, 72, 56);
+  const position = geometry.attributes.position;
+  for (let i = 0; i < position.count; i++) {
+    const x = position.getX(i);
+    const y = position.getY(i);
+    const z = position.getZ(i);
+    const k = y < 0 ? 1 + y * 0.22 : 1 + y * 0.04;
+    position.setXYZ(i, x * k, y * 1.18, z * k);
+  }
+  geometry.computeVertexNormals();
+  return geometry;
+}
+
+function makeStringGeometry() {
+  const points: THREE.Vector3[] = [];
+  for (let s = 0; s <= 8; s++) {
+    const t = s / 8;
+    points.push(
+      new THREE.Vector3(
+        Math.sin(t * 3.1) * 0.18 * t,
+        -1.3 - t * 3.2,
+        Math.cos(t * 2.3) * 0.12 * t
+      )
+    );
+  }
+  return new THREE.TubeGeometry(new THREE.CatmullRomCurve3(points), 24, 0.014, 6, false);
+}
+
+/** 배경 그라데이션과 환경맵. 유리가 이 배경을 굴절시키고 광택에 하늘이 비친다. */
+function SceneSetup() {
+  const background = useMemo(() => {
+    const texture = new THREE.CanvasTexture(gradientCanvas(4, 512, "#E3EEFF", "#FFFFFF"));
+    texture.colorSpace = THREE.SRGBColorSpace;
+    return texture;
+  }, []);
+  const environment = useMemo(() => {
+    const face = (top: string, bottom: string) => gradientCanvas(64, 64, top, bottom);
+    const texture = new THREE.CubeTexture([
+      face("#ffffff", "#a9c8f5"),
+      face("#ffffff", "#a9c8f5"),
+      face("#ffffff", "#ffffff"),
+      face("#8db7f0", "#4d86d8"),
+      face("#ffffff", "#a9c8f5"),
+      face("#ffffff", "#a9c8f5"),
+    ]);
+    texture.needsUpdate = true;
+    texture.colorSpace = THREE.SRGBColorSpace;
+    return texture;
+  }, []);
+  useEffect(
+    () => () => {
+      background.dispose();
+      environment.dispose();
+    },
+    [background, environment]
+  );
+  return (
+    <>
+      <primitive object={background} attach="background" />
+      <primitive object={environment} attach="environment" />
+    </>
+  );
+}
+
+/** 뒤쪽 판에 그린 MOLGORITHM 로고타입. 화면 폭의 92%에 맞춘다. */
+function drawWordmark(fontFamily: string): THREE.CanvasTexture {
+  const canvas = document.createElement("canvas");
+  canvas.width = WORD_CANVAS.width;
+  canvas.height = WORD_CANVAS.height;
+  const ctx = canvas.getContext("2d");
+  if (ctx) {
+    ctx.fillStyle = "#B9D3F7";
+    ctx.textBaseline = "middle";
+    ctx.textAlign = "center";
+    const stretchable = ctx as CanvasRenderingContext2D & { fontStretch?: string };
+    if ("fontStretch" in stretchable) stretchable.fontStretch = "expanded";
+    ctx.font = `600 560px ${fontFamily}, "Helvetica Neue", Arial, sans-serif`;
+    const text = "MOLGORITHM";
+    const measured = ctx.measureText(text).width;
+    const scale = Math.min(1, 3900 / measured);
+    ctx.save();
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.scale(scale, scale);
+    ctx.fillText(text, 0, 20);
+    ctx.restore();
+  }
+  const texture = new THREE.CanvasTexture(canvas);
+  texture.colorSpace = THREE.SRGBColorSpace;
+  texture.anisotropy = 8;
+  return texture;
+}
+
+function Wordmark({ fontFamily }: { fontFamily: string }) {
+  const camera = useThree((state) => state.camera);
+  const viewport = useThree((state) => state.viewport);
+  const size = useThree((state) => state.size);
+  const [texture, setTexture] = useState<THREE.CanvasTexture | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    let current: THREE.CanvasTexture | null = null;
+    const apply = () => {
+      if (cancelled) return;
+      current?.dispose();
+      current = drawWordmark(fontFamily);
+      setTexture(current);
+    };
+    const fonts = document.fonts;
+    const ready = fonts?.load ? fonts.load(`600 100px ${fontFamily}`) : Promise.resolve();
+    ready.then(apply, apply);
+    fonts?.ready.then(apply, () => {});
+    return () => {
+      cancelled = true;
+      current?.dispose();
+    };
+  }, [fontFamily]);
+
+  const width = useMemo(() => {
+    const current = viewport.getCurrentViewport(camera, new THREE.Vector3(0, 0.35, WORD_PLANE_Z), size);
+    return current.width * 0.92;
+  }, [camera, viewport, size]);
+
+  if (!texture) return null;
+  return (
+    <mesh position={[0, 0.35, WORD_PLANE_Z]} scale={[width, width, 1]}>
+      <planeGeometry args={[1, WORD_RATIO]} />
+      <meshBasicMaterial map={texture} transparent depthWrite={false} />
+    </mesh>
+  );
+}
+
+/** 마우스 위치에 따라 카메라를 살짝 움직인다. */
+function Rig({ reduced }: { reduced: boolean }) {
+  useFrame((state) => {
+    if (reduced) return;
+    const camera = state.camera;
+    camera.position.x += (state.pointer.x * 0.9 - camera.position.x) * 0.04;
+    camera.position.y += (0.2 - state.pointer.y * 0.6 - camera.position.y) * 0.04;
+    camera.lookAt(0, 0.2, 0);
+  });
+  return null;
+}
+
+/** 인덱스에서 0~1 사이 값을 만든다. 렌더마다 같은 값이 나와야 하므로 Math.random을 쓰지 않는다. */
+function seeded(index: number, salt: number): number {
+  const x = Math.sin(index * 127.1 + salt * 311.7) * 43758.5453;
+  return x - Math.floor(x);
+}
+
+type BalloonProps = {
+  index: number;
+  kind: Kind;
+  slot: [number, number, number];
+  reduced: boolean;
+  geometry: THREE.BufferGeometry;
+  knotGeometry: THREE.BufferGeometry;
+  stringGeometry: THREE.BufferGeometry;
+  stringMaterial: THREE.Material;
+  onPop: () => void;
+};
+
+function Balloon({ index, kind, slot, reduced, geometry, knotGeometry, stringGeometry, stringMaterial, onPop }: BalloonProps) {
+  const group = useRef<THREE.Group>(null);
+  const motion = useRef({
+    phase: seeded(index, 1) * Math.PI * 2,
+    speed: 0.5 + seeded(index, 2) * 0.4,
+    amp: 0.25 + seeded(index, 3) * 0.25,
+    rot: (seeded(index, 4) - 0.5) * 0.3,
+    scale: 0.75 + seeded(index, 5) * 0.55,
+    pop: 0,
+    rising: false,
+  });
+
+  const material = useMemo(() => {
+    if (kind.glass) {
+      return new THREE.MeshPhysicalMaterial({
+        color: kind.color,
+        roughness: 0.02,
+        metalness: 0,
+        transmission: 0.985,
+        thickness: 1.6,
+        ior: 1.5,
+        clearcoat: 1,
+        clearcoatRoughness: 0.03,
+        attenuationColor: new THREE.Color(kind.color),
+        attenuationDistance: 6,
+        iridescence: 0.28,
+        iridescenceIOR: 1.3,
+        iridescenceThicknessRange: [120, 420],
+        envMapIntensity: 1.9,
+        specularIntensity: 1.1,
+      });
+    }
+    return new THREE.MeshPhysicalMaterial({
+      color: kind.color,
+      roughness: 0.16,
+      metalness: 0,
+      clearcoat: 1,
+      clearcoatRoughness: 0.08,
+      envMapIntensity: 1.2,
+    });
+  }, [kind]);
+  useEffect(() => () => material.dispose(), [material]);
+
+  useEffect(() => {
+    group.current?.scale.setScalar(motion.current.scale);
+  }, []);
+
+  useFrame((state) => {
+    const g = group.current;
+    if (!g) return;
+    const m = motion.current;
+    const t = state.clock.elapsedTime;
+    if (m.pop > 0) {
+      m.pop += 0.08;
+      g.scale.setScalar(Math.max(0, 1 - m.pop) * m.scale);
+      if (m.pop >= 1) {
+        m.pop = 0;
+        m.rising = true;
+        g.position.y = -9;
+        g.scale.setScalar(m.scale * 0.2);
+      }
+      return;
+    }
+    if (m.rising) {
+      g.position.y += 0.06;
+      const k = Math.min(1, g.scale.x / m.scale + 0.03);
+      g.scale.setScalar(k * m.scale);
+      if (g.position.y >= slot[1]) {
+        g.position.y = slot[1];
+        m.rising = false;
+      }
+      return;
+    }
+    if (reduced) return;
+    g.position.y = slot[1] + Math.sin(t * m.speed + m.phase) * m.amp;
+    g.position.x = slot[0] + Math.sin(t * m.speed * 0.6 + m.phase) * 0.12;
+    g.rotation.z = Math.sin(t * m.speed * 0.8 + m.phase) * 0.08 + m.rot * 0.3;
+    g.rotation.y = t * 0.15 + m.phase;
+  });
+
+  const handleClick = (event: ThreeEvent<MouseEvent>) => {
+    event.stopPropagation();
+    const m = motion.current;
+    if (m.pop > 0 || m.rising) return;
+    m.pop = 1;
+    onPop();
+  };
+
+  return (
+    <group ref={group} position={slot} onClick={handleClick}>
+      <mesh geometry={geometry} material={material} castShadow />
+      <mesh geometry={knotGeometry} material={material} position={[0, -1.22, 0]} rotation={[Math.PI, 0, 0]} />
+      <mesh geometry={stringGeometry} material={stringMaterial} />
+    </group>
+  );
+}
+
+function Balloons({ reduced, count, onPop }: { reduced: boolean; count: number; onPop: () => void }) {
+  const size = useThree((state) => state.size);
+  const ratio = size.width / size.height;
+  const scale = ratio < 1 ? 0.62 : ratio < 1.4 ? 0.8 : 1;
+  const geometry = useMemo(() => makeBalloonGeometry(), []);
+  const knotGeometry = useMemo(() => new THREE.ConeGeometry(0.16, 0.22, 24), []);
+  const stringGeometry = useMemo(() => makeStringGeometry(), []);
+  const stringMaterial = useMemo(
+    () => new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.55 }),
+    []
+  );
+  useEffect(
+    () => () => {
+      geometry.dispose();
+      knotGeometry.dispose();
+      stringGeometry.dispose();
+      stringMaterial.dispose();
+    },
+    [geometry, knotGeometry, stringGeometry, stringMaterial]
+  );
+
+  return (
+    <group scale={scale}>
+      {SLOTS.slice(0, count).map((slot, index) => (
+        <Balloon
+          key={index}
+          index={index}
+          kind={KINDS[index % KINDS.length]}
+          slot={slot}
+          reduced={reduced}
+          geometry={geometry}
+          knotGeometry={knotGeometry}
+          stringGeometry={stringGeometry}
+          stringMaterial={stringMaterial}
+          onPop={onPop}
+        />
+      ))}
+    </group>
+  );
+}
+
+type BalloonSceneProps = {
+  fontFamily: string;
+  reduced: boolean;
+  count?: number;
+  onPop: () => void;
+};
+
+export default function BalloonScene({ fontFamily, reduced, count = SLOTS.length, onPop }: BalloonSceneProps) {
+  return (
+    <Canvas
+      shadows
+      dpr={[1, 1.5]}
+      camera={{ fov: 30, position: [0, 0.2, 17], near: 0.1, far: 100 }}
+      gl={{
+        antialias: true,
+        alpha: false,
+        toneMapping: THREE.ACESFilmicToneMapping,
+        outputColorSpace: THREE.SRGBColorSpace,
+      }}
+      className="touch-none"
+    >
+      <SceneSetup />
+      <hemisphereLight args={[0xffffff, 0x9dbdf0, 0.5]} />
+      <directionalLight
+        position={[-6, 9, 8]}
+        intensity={1.5}
+        castShadow
+        shadow-mapSize={[1024, 1024]}
+        shadow-radius={6}
+        shadow-camera-near={1}
+        shadow-camera-far={40}
+        shadow-camera-left={-12}
+        shadow-camera-right={12}
+        shadow-camera-top={10}
+        shadow-camera-bottom={-10}
+      />
+      <directionalLight position={[7, -3, 6]} intensity={0.4} color={0xdfeeff} />
+      <Wordmark fontFamily={fontFamily} />
+      <Balloons reduced={reduced} count={count} onPop={onPop} />
+      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -6.2, 0]} receiveShadow>
+        <planeGeometry args={[60, 60]} />
+        <shadowMaterial opacity={0.12} />
+      </mesh>
+      <Rig reduced={reduced} />
+    </Canvas>
+  );
+}
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 4f6cadb..f8ecd82 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -1,47 +1,33 @@
 import Link from "next/link";
 
 const footerLinks = [
-  { href: "/join", label: "JOIN", external: false },
-  { href: "/donate", label: "DONATE", external: false },
-  { href: "https://github.com/yonsei-molgorithm", label: "GITHUB", external: true },
+  { href: "/join", label: "지원", external: false },
+  { href: "/donate", label: "후원", external: false },
+  { href: "https://github.com/yonsei-molgorithm", label: "GitHub", external: true },
 ];
 
-const linkClass =
-  "font-label text-[10px] uppercase tracking-widest text-outline transition-colors hover:text-foreground";
+const linkClass = "text-sm text-muted-foreground transition-colors hover:text-foreground";
 
 export function Footer() {
   return (
-    <footer className="w-full border-t border-border bg-card px-6 py-12 md:px-12">
+    <footer className="w-full border-t border-border px-6 py-12 md:px-10">
       <div className="flex flex-col justify-between gap-10 md:flex-row md:items-end">
-        <div>
-          <div className="mb-4 text-lg font-black text-primary">MOLGORITHM</div>
-          <address className="space-y-1 not-italic">
-            <p className="text-xs text-outline">
-              서울특별시 서대문구 연세로 50 제1공학관 A527
-            </p>
-            <p className="text-xs text-outline">
-              <a
-                href="mailto:yonseimolgorithm@gmail.com"
-                className="transition-colors hover:text-foreground"
-              >
-                yonseimolgorithm@gmail.com
-              </a>
-            </p>
+        <div className="flex flex-col gap-3">
+          <span className="wide font-display text-lg font-semibold tracking-wide">MOLGORITHM</span>
+          <address className="flex flex-col gap-1 text-sm not-italic text-muted-foreground">
+            <span>서울특별시 서대문구 연세로 50 제1공학관 A527</span>
+            <a href="mailto:yonseimolgorithm@gmail.com" className="transition-colors hover:text-foreground">
+              yonseimolgorithm@gmail.com
+            </a>
           </address>
-          <p className="mt-4 font-label text-[10px] uppercase tracking-widest text-outline">
-            &copy; {new Date().getFullYear()} MOLGORITHM. YONSEI ALGORITHM CLUB.
+          <p className="wide font-display text-xs text-outline">
+            © {new Date().getFullYear()} MOLGORITHM · YONSEI ALGORITHM CLUB
           </p>
         </div>
         <nav className="flex gap-8" aria-label="푸터 링크">
           {footerLinks.map((link) =>
             link.external ? (
-              <a
-                key={link.href}
-                href={link.href}
-                target="_blank"
-                rel="noopener noreferrer"
-                className={linkClass}
-              >
+              <a key={link.href} href={link.href} target="_blank" rel="noopener noreferrer" className={linkClass}>
                 {link.label}
               </a>
             ) : (
diff --git a/components/layout/header.tsx b/components/layout/header.tsx
index 5b5c1dc..d1f7bc5 100644
--- a/components/layout/header.tsx
+++ b/components/layout/header.tsx
@@ -4,27 +4,15 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Menu, X } from "lucide-react";
-import {
-  NavigationMenu,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-} from "@/components/ui/navigation-menu";
 import { Button } from "@/components/ui/button";
-import { ThemeToggle } from "@/components/layout/theme-toggle";
 import { cn } from "@/lib/utils";
 
 const navLinks = [
-  { href: "/", label: "HOME" },
-  { href: "/awards", label: "AWARDS" },
-  { href: "/activities", label: "ACTIVITIES" },
-  { href: "/members", label: "MEMBERS" },
-];
-
-const mobileLinks = [
-  ...navLinks,
-  { href: "/join", label: "JOIN" },
-  { href: "/donate", label: "DONATE" },
+  { href: "/", label: "소개" },
+  { href: "/awards", label: "수상" },
+  { href: "/activities", label: "활동" },
+  { href: "/members", label: "운영진" },
+  { href: "/donate", label: "후원" },
 ];
 
 export function Header() {
@@ -33,112 +21,89 @@ export function Header() {
   const [scrolled, setScrolled] = useState(false);
 
   useEffect(() => {
-    const onScroll = () => setScrolled(window.scrollY > 50);
+    const onScroll = () => setScrolled(window.scrollY > 24);
+    onScroll();
     window.addEventListener("scroll", onScroll, { passive: true });
     return () => window.removeEventListener("scroll", onScroll);
   }, []);
 
   return (
-    <header
-      className={cn(
-        "fixed top-0 z-50 w-full backdrop-blur-xl transition-all duration-300",
-        scrolled ? "bg-card/80 shadow-lg shadow-primary/5" : "bg-card/60"
-      )}
-    >
-      <nav className="flex items-center justify-between px-6 py-6 md:px-12">
+    <header className={cn("fixed top-0 z-50 w-full transition-all duration-300", scrolled ? "py-0" : "py-1")}>
+      <nav className="flex items-center justify-between px-6 py-4 md:px-10 md:py-5">
         <Link
           href="/"
-          className="text-2xl font-black tracking-tighter text-primary"
+          className="wide font-display text-xl font-semibold tracking-wide text-foreground"
         >
           MOLGORITHM
         </Link>
 
-        <div className="hidden items-center gap-8 md:flex">
-          <NavigationMenu viewport={false}>
-            <NavigationMenuList className="gap-2">
-              {navLinks.map((link) => {
-                const isActive = pathname === link.href;
-
-                return (
-                  <NavigationMenuItem key={link.href}>
-                    <NavigationMenuLink asChild active={isActive}>
-                      <Link
-                        href={link.href}
-                        className={cn(
-                          "px-3 py-2 text-xs font-bold uppercase tracking-tight outline-none transition-colors",
-                          "focus-visible:ring-2 focus-visible:ring-ring/50",
-                          isActive
-                            ? "text-primary"
-                            : "text-foreground/70 hover:text-primary"
-                        )}
-                      >
-                        {link.label}
-                      </Link>
-                    </NavigationMenuLink>
-                  </NavigationMenuItem>
-                );
-              })}
-            </NavigationMenuList>
-          </NavigationMenu>
-
-          <div className="flex items-center gap-4">
-            <Button asChild>
-              <Link href="/join">JOIN</Link>
-            </Button>
-            <Button asChild variant="outline">
-              <Link href="/donate">DONATE</Link>
-            </Button>
-            <ThemeToggle />
-          </div>
+        <div className="glass hidden items-center gap-1 rounded-full p-1.5 md:flex">
+          {navLinks.map((link) => {
+            const isActive = pathname === link.href;
+            return (
+              <Link
+                key={link.href}
+                href={link.href}
+                aria-current={isActive ? "page" : undefined}
+                className={cn(
+                  "rounded-full px-4 py-2 text-[15px] font-medium transition-colors",
+                  isActive
+                    ? "bg-white/80 text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_2px_8px_rgba(15,26,46,0.08)]"
+                    : "text-muted-foreground hover:bg-white/50 hover:text-foreground"
+                )}
+              >
+                {link.label}
+              </Link>
+            );
+          })}
         </div>
 
-        <div className="flex items-center gap-1 md:hidden">
-          <ThemeToggle />
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className="size-10 text-primary hover:bg-transparent hover:text-foreground"
-            aria-label={open ? "메뉴 닫기" : "메뉴 열기"}
-            aria-controls="mobile-navigation"
-            aria-expanded={open}
-            onClick={() => setOpen((current) => !current)}
+        <div className="hidden md:block">
+          <Link
+            href="/join"
+            className="glass glass-tint inline-flex h-12 items-center rounded-full px-6 text-sm font-semibold transition-transform hover:scale-[1.03]"
           >
-            {open ? (
-              <X className="size-6" aria-hidden="true" />
-            ) : (
-              <Menu className="size-6" aria-hidden="true" />
-            )}
-          </Button>
+            지원하기
+          </Link>
         </div>
-      </nav>
 
-      {open && (
-        <div
-          id="mobile-navigation"
-          className="border-t border-outline-variant/20 bg-card/95 px-6 pb-6 backdrop-blur-xl md:hidden"
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="glass size-11 rounded-full text-foreground md:hidden"
+          aria-label={open ? "메뉴 닫기" : "메뉴 열기"}
+          aria-controls="mobile-navigation"
+          aria-expanded={open}
+          onClick={() => setOpen((current) => !current)}
         >
-          <div className="flex flex-col divide-y divide-outline-variant/15">
-            {mobileLinks.map((link) => {
-              const isActive = pathname === link.href;
+          {open ? <X className="size-6" aria-hidden="true" /> : <Menu className="size-6" aria-hidden="true" />}
+        </Button>
+      </nav>
 
-              return (
-                <Link
-                  key={link.href}
-                  href={link.href}
-                  className={cn(
-                    "flex min-h-14 items-center justify-between py-4 font-label text-sm font-bold tracking-widest transition-colors",
-                    isActive
-                      ? "text-primary"
-                      : "text-foreground/75 hover:text-primary"
-                  )}
-                  onClick={() => setOpen(false)}
-                >
-                  {link.label}
-                  <span className="h-px w-8 bg-current opacity-30" />
-                </Link>
-              );
-            })}
+      {open && (
+        <div id="mobile-navigation" className="glass mx-4 rounded-3xl px-6 pb-6 md:hidden">
+          <div className="flex flex-col divide-y divide-white/40">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={cn(
+                  "flex min-h-14 items-center py-4 text-base font-medium",
+                  pathname === link.href ? "text-foreground" : "text-muted-foreground"
+                )}
+                onClick={() => setOpen(false)}
+              >
+                {link.label}
+              </Link>
+            ))}
+            <Link
+              href="/join"
+              className="mt-4 flex min-h-12 items-center justify-center rounded-full bg-foreground text-sm font-semibold text-white"
+              onClick={() => setOpen(false)}
+            >
+              지원하기
+            </Link>
           </div>
         </div>
       )}
diff --git a/components/layout/page-header.tsx b/components/layout/page-header.tsx
index 6a4e4e4..8a1d95f 100644
--- a/components/layout/page-header.tsx
+++ b/components/layout/page-header.tsx
@@ -1,43 +1,24 @@
-import { cn } from "@/lib/utils";
-
 type PageHeaderProps = {
-  label: string;
+  eyebrow: string;
   title: string;
   description?: string;
   meta?: string;
-  labelColor?: "primary" | "tertiary";
 };
 
-export function PageHeader({
-  label,
-  title,
-  description,
-  meta,
-  labelColor = "primary",
-}: PageHeaderProps) {
+/** 페이지 상단. 영문 라벨, 한글 제목, 설명, 우측 메타. */
+export function PageHeader({ eyebrow, title, description, meta }: PageHeaderProps) {
   return (
-    <div className="px-6 pt-32 pb-12 md:px-12">
-      <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
-        <div>
-          <span
-            className={cn(
-              "mb-4 block font-label text-xs uppercase tracking-widest",
-              labelColor === "tertiary" ? "text-tertiary" : "text-primary"
-            )}
-          >
-            {label}
-          </span>
-          <h1 className="font-headline text-4xl font-bold tracking-tighter md:text-6xl">
-            {title}
-          </h1>
+    <div className="bg-gradient-to-b from-sky-top to-background px-6 pb-16 pt-36 md:px-10 md:pb-20 md:pt-44">
+      <div className="flex flex-col justify-between gap-6 md:flex-row md:items-end">
+        <div className="flex flex-col gap-5">
+          <span className="wide font-display text-sm font-semibold uppercase tracking-wide text-primary">{eyebrow}</span>
+          <h1 className="text-5xl font-bold tracking-tight md:text-7xl">{title}</h1>
           {description && (
-            <p className="mt-6 max-w-2xl leading-relaxed text-on-surface-variant">
-              {description}
-            </p>
+            <p className="max-w-2xl text-lg leading-relaxed text-muted-foreground">{description}</p>
           )}
         </div>
         {meta && (
-          <p className="font-label text-[10px] uppercase tracking-widest text-outline md:text-right">
+          <p className="wide font-display text-sm font-medium uppercase tracking-wide text-outline md:text-right">
             {meta}
           </p>
         )}
diff --git a/components/layout/theme-provider.tsx b/components/layout/theme-provider.tsx
deleted file mode 100644
index 8613a5f..0000000
--- a/components/layout/theme-provider.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client";
-
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-import type { ComponentProps } from "react";
-
-export function ThemeProvider({
-  children,
-  ...props
-}: ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
-}
diff --git a/components/layout/theme-toggle.tsx b/components/layout/theme-toggle.tsx
deleted file mode 100644
index 3725969..0000000
--- a/components/layout/theme-toggle.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client";
-
-import { useSyncExternalStore } from "react";
-import { Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-
-const subscribe = () => () => {};
-
-export function ThemeToggle({ className }: { className?: string }) {
-  const mounted = useSyncExternalStore(
-    subscribe,
-    () => true,
-    () => false
-  );
-  const { resolvedTheme, setTheme } = useTheme();
-  const isDark = resolvedTheme === "dark";
-
-  return (
-    <Button
-      type="button"
-      variant="ghost"
-      size="icon"
-      className={cn(
-        "size-10 text-foreground/70 hover:bg-transparent hover:text-primary",
-        className
-      )}
-      aria-label={
-        mounted
-          ? isDark
-            ? "라이트 테마로 전환"
-            : "다크 테마로 전환"
-          : "테마 전환"
-      }
-      onClick={() => setTheme(isDark ? "light" : "dark")}
-    >
-      {mounted ? (
-        isDark ? (
-          <Sun className="size-5" aria-hidden="true" />
-        ) : (
-          <Moon className="size-5" aria-hidden="true" />
-        )
-      ) : (
-        <span className="size-5" aria-hidden="true" />
-      )}
-    </Button>
-  );
-}
diff --git a/components/main/about-section.tsx b/components/main/about-section.tsx
deleted file mode 100644
index 7d324be..0000000
--- a/components/main/about-section.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Brain, Code2, Trophy, type LucideIcon } from "lucide-react";
-
-const items = [
-  {
-    Icon: Brain,
-    title: "생각한다",
-    description:
-      "알고리즘의 핵심은 사고입니다. 매주 정기 세션에서 문제를 분석하고, 최적의 접근법을 설계하며, 논리적 사고력을 키웁니다.",
-  },
-  {
-    Icon: Code2,
-    title: "푼다",
-    description:
-      "생각을 코드로 구현합니다. 난이도별 트랙에서 문제를 풀고, 서로의 풀이를 리뷰하며 더 나은 해법을 찾아갑니다.",
-  },
-  {
-    Icon: Trophy,
-    title: "경쟁한다",
-    description:
-      "ICPC, SCPC, UCPC 등 국내외 프로그래밍 대회에 팀을 이루어 참가합니다. 실전 경험을 통해 한계를 시험합니다.",
-  },
-] satisfies Array<{
-  Icon: LucideIcon;
-  title: string;
-  description: string;
-}>;
-
-export function AboutSection() {
-  return (
-    <section className="bg-surface-container-low px-6 py-32 md:px-12" id="about">
-      <div className="mb-24">
-        <span className="mb-4 block font-label text-xs uppercase tracking-widest text-primary">
-          01 // PHILOSOPHY
-        </span>
-        <h2 className="font-headline text-4xl font-bold tracking-tighter md:text-6xl">
-          생각하고,
-          <br />
-          풀고, 경쟁한다.
-        </h2>
-      </div>
-      <div className="grid grid-cols-1 gap-0 border border-outline-variant/20 md:grid-cols-3">
-        {items.map(({ Icon, title, description }, index) => (
-          <div
-            key={title}
-            className={`p-12 transition-colors duration-500 hover:bg-surface-container ${
-              index < items.length - 1
-                ? "border-b border-outline-variant/20 md:border-b-0 md:border-r"
-                : ""
-            }`}
-          >
-            <Icon className="mb-8 size-10 text-primary" aria-hidden="true" />
-            <h3 className="mb-6 font-headline text-xl font-bold">{title}</h3>
-            <p className="leading-relaxed text-on-surface-variant">
-              {description}
-            </p>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}
diff --git a/components/main/activities-section.tsx b/components/main/activities-section.tsx
new file mode 100644
index 0000000..e67130c
--- /dev/null
+++ b/components/main/activities-section.tsx
@@ -0,0 +1,34 @@
+import Link from "next/link";
+import { ArrowUpRight } from "lucide-react";
+import { activities } from "@/lib/activities";
+
+export function ActivitiesSection() {
+  return (
+    <section className="bg-surface px-6 py-24 md:px-10 md:py-32" id="activities">
+      <div className="mb-14 flex flex-col justify-between gap-6 md:flex-row md:items-end">
+        <div className="flex flex-col gap-5">
+          <span className="wide font-display text-sm font-semibold uppercase tracking-wide text-primary">Activities</span>
+          <h2 className="text-4xl font-bold tracking-tight md:text-5xl">한 학기 동안 하는 일</h2>
+        </div>
+        <Link
+          href="/activities"
+          className="inline-flex items-center gap-1 text-sm font-medium text-foreground underline-offset-4 hover:underline"
+        >
+          활동 자세히 보기
+          <ArrowUpRight className="size-4" aria-hidden="true" />
+        </Link>
+      </div>
+      <div className="grid grid-cols-1 gap-5 md:grid-cols-3">
+        {activities.map((activity) => (
+          <div key={activity.slug} className="flex flex-col gap-4 rounded-3xl border border-border bg-background p-8 md:p-10">
+            <span className="wide font-display text-xs font-semibold uppercase tracking-wide text-outline">
+              {activity.eyebrow}
+            </span>
+            <h3 className="text-2xl font-bold">{activity.title}</h3>
+            <p className="leading-relaxed text-muted-foreground">{activity.summary}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/components/main/donation-card.tsx b/components/main/donation-card.tsx
index ac6c8b2..f415c07 100644
--- a/components/main/donation-card.tsx
+++ b/components/main/donation-card.tsx
@@ -10,44 +10,26 @@ type DonationCardProps = {
   contactUrl?: string;
 };
 
-export function DonationCard({
-  account,
-  accountHolder,
-  contactUrl,
-}: DonationCardProps) {
-  const [copyState, setCopyState] = useState<"idle" | "copied" | "failed">(
-    "idle"
-  );
+export function DonationCard({ account, accountHolder, contactUrl }: DonationCardProps) {
+  const [copyState, setCopyState] = useState<"idle" | "copied" | "failed">("idle");
   const resetTimerRef = useRef<number | null>(null);
 
   useEffect(() => {
     return () => {
-      if (resetTimerRef.current !== null) {
-        window.clearTimeout(resetTimerRef.current);
-      }
+      if (resetTimerRef.current !== null) window.clearTimeout(resetTimerRef.current);
     };
   }, []);
 
   const handleCopyAccount = async () => {
-    if (!account) {
-      return;
-    }
-
+    if (!account) return;
     try {
-      if (!navigator.clipboard) {
-        throw new Error("Clipboard API is unavailable.");
-      }
-
+      if (!navigator.clipboard) throw new Error("Clipboard API is unavailable.");
       await navigator.clipboard.writeText(account);
       setCopyState("copied");
     } catch {
       setCopyState("failed");
     }
-
-    if (resetTimerRef.current !== null) {
-      window.clearTimeout(resetTimerRef.current);
-    }
-
+    if (resetTimerRef.current !== null) window.clearTimeout(resetTimerRef.current);
     resetTimerRef.current = window.setTimeout(() => {
       setCopyState("idle");
       resetTimerRef.current = null;
@@ -55,65 +37,31 @@ export function DonationCard({
   };
 
   return (
-    <div className="w-full max-w-md border border-outline-variant/30 bg-surface-container-low p-8 text-left md:p-12">
-      <div className="mb-8">
-        <p className="mb-2 font-label text-[10px] uppercase tracking-widest text-outline">
-          입금 계좌
-        </p>
-        <p className="break-keep font-headline text-2xl font-bold text-primary">
-          {account || "추후 안내 예정"}
-        </p>
-      </div>
-
-      <div className="mb-12">
-        <p className="mb-2 font-label text-[10px] uppercase tracking-widest text-outline">
-          예금주
-        </p>
-        <p className="font-headline text-xl font-bold">{accountHolder}</p>
+    <div className="flex flex-col gap-6 self-start rounded-3xl bg-surface p-8 md:p-10">
+      <div className="flex flex-col gap-1">
+        <span className="wide font-display text-xs font-semibold uppercase tracking-wide text-primary">Account</span>
+        <p className="wide break-keep font-display text-2xl font-semibold tabular-nums">{account || "추후 안내 예정"}</p>
+        <p className="text-sm text-muted-foreground">예금주 {accountHolder}</p>
       </div>
-
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-3">
         <Button
           type="button"
-          size="lg"
-          className="h-12 uppercase tracking-widest"
+          className="h-12 rounded-full bg-foreground text-sm font-semibold text-white hover:bg-foreground/90"
           disabled={!account}
           onClick={handleCopyAccount}
         >
-          {copyState === "copied" ? (
-            <Check className="size-4" aria-hidden="true" />
-          ) : (
-            <Copy className="size-4" aria-hidden="true" />
-          )}
-          {copyState === "copied"
-            ? "복사 완료"
-            : copyState === "failed"
-              ? "복사 실패"
-              : account
-                ? "계좌 복사"
-                : "계좌 준비 중"}
+          {copyState === "copied" ? <Check className="size-4" aria-hidden="true" /> : <Copy className="size-4" aria-hidden="true" />}
+          {copyState === "copied" ? "복사 완료" : copyState === "failed" ? "복사 실패" : account ? "계좌 복사" : "계좌 준비 중"}
         </Button>
-
         {contactUrl ? (
-          <Button
-            asChild
-            variant="outline"
-            size="lg"
-            className="h-12 uppercase tracking-widest"
-          >
-            <a href={contactUrl} target="_blank" rel="noreferrer">
+          <Button asChild variant="outline" className="h-12 rounded-full text-sm font-semibold">
+            <a href={contactUrl} target="_blank" rel="noopener noreferrer">
               <MessageCircle className="size-4" aria-hidden="true" />
               문의하기
             </a>
           </Button>
         ) : (
-          <Button
-            type="button"
-            variant="outline"
-            size="lg"
-            className="h-12 uppercase tracking-widest"
-            disabled
-          >
+          <Button type="button" variant="outline" className="h-12 rounded-full text-sm font-semibold" disabled>
             <MessageCircle className="size-4" aria-hidden="true" />
             문의 링크 준비 중
           </Button>
diff --git a/components/main/gallery-carousel-section.tsx b/components/main/gallery-carousel-section.tsx
deleted file mode 100644
index bac8e7b..0000000
--- a/components/main/gallery-carousel-section.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel";
-
-const galleryImages = [
-  {
-    src: "/images/icpc-apac-2024.jpg",
-    alt: "2024 ICPC 아시아 태평양 챔피언십 무대 앞에서 포즈를 취한 동아리원 여섯 명",
-    caption: "2024 ICPC Asia Pacific Championship, 하노이",
-  },
-  {
-    src: "/images/session-group.jpg",
-    alt: "강의실 화이트보드 앞에 모인 정기 세션 참가자들",
-    caption: "정기 세션 단체 사진",
-  },
-  {
-    src: "/images/graduation-banner.jpg",
-    alt: "C++ 코드로 졸업을 축하하는 모르고리즘 현수막",
-    caption: "졸업 축하 현수막, graduation.cpp",
-  },
-  {
-    src: "/images/yonsei-contest-poster.jpg",
-    alt: "모르고리즘이 출제한 연세대학교 프로그래밍 경시대회 포스터",
-    caption: "연세대학교 프로그래밍 경시대회 포스터",
-  },
-];
-
-const carouselOptions = { align: "start", loop: true } as const;
-
-export function GalleryCarouselSection() {
-  return (
-    <section className="bg-surface px-6 py-28 md:px-12" id="gallery">
-      <div className="mb-12">
-        <span className="mb-4 block font-label text-xs uppercase tracking-widest text-tertiary">
-          03 // SNAPSHOTS
-        </span>
-        <h2 className="font-headline text-4xl font-bold tracking-tighter md:text-6xl">
-          Moments
-        </h2>
-      </div>
-
-      <Carousel opts={carouselOptions} className="w-full">
-        <CarouselContent>
-          {galleryImages.map((image) => (
-            <CarouselItem
-              key={image.src}
-              className="basis-full py-3 md:basis-1/2 lg:basis-1/3"
-            >
-              <figure>
-                <div className="relative h-[280px] overflow-hidden border border-border shadow-lg shadow-primary/5 md:h-[400px]">
-                  <Image
-                    src={image.src}
-                    alt={image.alt}
-                    fill
-                    sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
-                    className="object-cover"
-                  />
-                </div>
-                <figcaption className="mt-3 font-label text-[10px] uppercase tracking-widest text-outline">
-                  {image.caption}
-                </figcaption>
-              </figure>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious className="left-3 top-1/2 border-border bg-background/70 text-foreground hover:bg-background" />
-        <CarouselNext className="right-3 top-1/2 border-border bg-background/70 text-foreground hover:bg-background" />
-      </Carousel>
-    </section>
-  );
-}
diff --git a/components/main/hero-section.tsx b/components/main/hero-section.tsx
index 08f9d46..7725c4f 100644
--- a/components/main/hero-section.tsx
+++ b/components/main/hero-section.tsx
@@ -1,63 +1,27 @@
-import Image from "next/image";
-import { Network } from "lucide-react";
+import { BalloonHero } from "@/components/hero/balloon-hero";
 
-type HeroSectionProps = {
-  solvedCount?: number;
-};
-
-export function HeroSection({ solvedCount }: HeroSectionProps) {
+export function HeroSection() {
   return (
     <section
-      className="relative flex min-h-screen flex-col justify-center overflow-hidden px-6 pt-32 md:px-12"
+      className="relative h-svh max-h-[1000px] min-h-[640px] overflow-hidden bg-gradient-to-b from-sky-top to-background text-foreground"
       id="hero"
     >
-      <Image
-        src="/images/icpc-apac-2024.jpg"
-        alt="2024 ICPC 아시아 태평양 챔피언십에 참가한 모르고리즘 동아리원들"
-        fill
-        priority
-        sizes="100vw"
-        className="object-cover object-[center_30%]"
-      />
-      <div className="absolute inset-0 bg-background/80" aria-hidden="true" />
-      <div
-        className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-background/10"
-        aria-hidden="true"
-      />
-      <div className="relative z-10">
-        <span className="mb-8 block font-label text-xs uppercase tracking-[0.4em] text-tertiary">
-          EST. 2000 / YONSEI ALGORITHM CLUB
+      <BalloonHero />
+      <div className="wide pointer-events-none absolute bottom-24 left-6 z-[3] font-display text-[clamp(22px,2.6vw,40px)] font-semibold uppercase leading-[1.05] md:bottom-10 md:left-10">
+        Solve it,
+        <br />
+        get a balloon.
+        <span className="mt-2.5 block font-sans text-sm font-medium normal-case tracking-normal text-muted-foreground">
+          연세대학교 알고리즘 동아리 모르고리즘
+        </span>
+      </div>
+      <div className="wide pointer-events-none absolute bottom-10 right-10 z-[3] hidden text-right font-display text-[clamp(22px,2.6vw,40px)] font-semibold uppercase leading-[1.05] md:block">
+        Since
+        <br />
+        2000
+        <span className="mt-2.5 block font-sans text-sm font-medium normal-case tracking-normal text-muted-foreground">
+          매주 모여 풀고, 팀으로 대회에 나갑니다
         </span>
-        <h1 className="mb-12 font-headline text-[12vw] font-extrabold leading-[0.85] tracking-tighter text-foreground">
-          MOLGORITHM
-        </h1>
-        <div className="flex flex-col gap-12 md:flex-row md:items-end">
-          <p className="max-w-xl font-headline text-xl font-light leading-relaxed opacity-80 md:text-2xl">
-            연세대학교 알고리즘 동아리 모르고리즘.
-            <br />
-            우리는 생각하고, 문제를 풀고, 경쟁합니다.
-          </p>
-          <div className="flex flex-1 items-end justify-end">
-            {solvedCount && solvedCount > 0 ? (
-              <div className="text-right">
-                <p className="font-headline text-5xl font-extrabold tracking-tighter text-primary md:text-7xl">
-                  {solvedCount.toLocaleString("ko-KR")}
-                </p>
-                <p className="mt-2 font-label text-[10px] uppercase tracking-[0.3em] text-outline">
-                  problems solved
-                </p>
-                <p className="mt-1 text-xs text-outline">
-                  동아리원 solved.ac 풀이 수 합산
-                </p>
-              </div>
-            ) : (
-              <Network
-                className="size-24 select-none text-primary/20 md:size-32"
-                aria-hidden="true"
-              />
-            )}
-          </div>
-        </div>
       </div>
     </section>
   );
diff --git a/components/main/join-band.tsx b/components/main/join-band.tsx
new file mode 100644
index 0000000..2053289
--- /dev/null
+++ b/components/main/join-band.tsx
@@ -0,0 +1,23 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function JoinBand() {
+  return (
+    <section className="px-6 pb-24 md:px-10 md:pb-32" id="join-band">
+      <div className="flex flex-col justify-between gap-8 rounded-[32px] bg-foreground px-8 py-12 text-white md:flex-row md:items-center md:px-14 md:py-16">
+        <div className="flex flex-col gap-3">
+          <span className="wide font-display text-sm font-semibold uppercase tracking-wide text-white/80">Join</span>
+          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">신입 동아리원은 매년 3월과 9월에 모집합니다.</h2>
+          <p className="text-white/85">서류 지원만 받습니다. 코딩 테스트와 면접은 없습니다.</p>
+        </div>
+        <Button asChild className="h-14 shrink-0 rounded-full bg-white px-8 text-base font-semibold text-foreground hover:bg-white/90">
+          <Link href="/join">
+            지원 안내 보기
+            <ArrowRight className="size-4" aria-hidden="true" />
+          </Link>
+        </Button>
+      </div>
+    </section>
+  );
+}
diff --git a/components/main/moments-section.tsx b/components/main/moments-section.tsx
new file mode 100644
index 0000000..4355694
--- /dev/null
+++ b/components/main/moments-section.tsx
@@ -0,0 +1,55 @@
+import Image from "next/image";
+
+const photos = [
+  {
+    src: "/images/icpc-apac-2024.jpg",
+    alt: "2024 ICPC 아시아 태평양 챔피언십 무대 앞에서 포즈를 취한 동아리원 여섯 명",
+    caption: "2024 ICPC Asia Pacific Championship, 하노이",
+    className: "md:col-span-2 md:row-span-2 aspect-[4/3] md:aspect-auto",
+  },
+  {
+    src: "/images/session-group.jpg",
+    alt: "강의실 화이트보드 앞에 모인 정기 세션 참가자들",
+    caption: "정기 세션",
+    className: "md:col-span-2 aspect-[16/10]",
+  },
+  {
+    src: "/images/graduation-banner.jpg",
+    alt: "C++ 코드로 졸업을 축하하는 모르고리즘 현수막",
+    caption: "졸업 축하 현수막",
+    className: "aspect-[4/5]",
+  },
+  {
+    src: "/images/yonsei-contest-poster.jpg",
+    alt: "모르고리즘이 출제한 연세대학교 프로그래밍 경시대회 포스터",
+    caption: "교내 경시대회 포스터",
+    className: "aspect-[4/5]",
+  },
+];
+
+export function MomentsSection() {
+  return (
+    <section className="px-6 py-24 md:px-10 md:py-32" id="moments">
+      <div className="mb-14 flex flex-col gap-5">
+        <span className="wide font-display text-sm font-semibold uppercase tracking-wide text-primary">Moments</span>
+        <h2 className="text-4xl font-bold tracking-tight md:text-5xl">장면들</h2>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-4 md:grid-rows-2 md:gap-5">
+        {photos.map((photo) => (
+          <figure key={photo.src} className={`relative flex flex-col gap-3 ${photo.className}`}>
+            <div className="relative h-full min-h-[240px] w-full overflow-hidden rounded-2xl bg-surface-2">
+              <Image
+                src={photo.src}
+                alt={photo.alt}
+                fill
+                sizes="(min-width: 768px) 50vw, 100vw"
+                className="object-cover"
+              />
+            </div>
+            <figcaption className="text-sm text-muted-foreground">{photo.caption}</figcaption>
+          </figure>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/components/main/recent-awards-section.tsx b/components/main/recent-awards-section.tsx
index 56401f1..2904cd3 100644
--- a/components/main/recent-awards-section.tsx
+++ b/components/main/recent-awards-section.tsx
@@ -2,48 +2,54 @@ import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
 import type { Award } from "@/lib/schema";
 
-export function RecentAwardsSection({ awards }: { awards: Award[] }) {
+type RecentAwardsSectionProps = {
+  awards: Award[];
+  total: number;
+};
+
+export function RecentAwardsSection({ awards, total }: RecentAwardsSectionProps) {
   if (awards.length === 0) return null;
 
   return (
-    <section className="bg-surface px-6 py-28 md:px-12" id="recent">
-      <div className="mb-12 flex flex-col justify-between gap-4 md:flex-row md:items-end">
-        <div>
-          <span className="mb-4 block font-label text-xs uppercase tracking-widest text-primary">
-            02 // RECENT
-          </span>
-          <h2 className="font-headline text-4xl font-bold tracking-tighter md:text-6xl">
-            최근 수상
-          </h2>
+    <section className="px-6 py-24 md:px-10 md:py-32" id="recent">
+      <div className="grid grid-cols-1 gap-12 md:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] md:gap-16">
+        <div className="flex flex-col gap-5">
+          <span className="wide font-display text-sm font-semibold uppercase tracking-wide text-primary">Recent</span>
+          <h2 className="text-4xl font-bold tracking-tight md:text-5xl">최근 수상</h2>
+          <p className="max-w-md leading-relaxed text-muted-foreground">
+            ICPC에서는 문제를 하나 풀 때마다 자리에 풍선이 하나 달립니다. 위의 풍선들은 그 장면에서 가져왔습니다.
+          </p>
+          <Link
+            href="/awards"
+            className="inline-flex items-center gap-1 text-sm font-medium text-foreground underline-offset-4 hover:underline"
+          >
+            전체 기록 {total}건 보기
+            <ArrowUpRight className="size-4" aria-hidden="true" />
+          </Link>
         </div>
-        <Link
-          href="/awards"
-          className="inline-flex items-center gap-1 font-label text-xs uppercase tracking-widest text-outline transition-colors hover:text-primary"
-        >
-          전체 보기
-          <ArrowUpRight className="size-4" aria-hidden="true" />
-        </Link>
+        <ul className="flex flex-col">
+          {awards.map((award) => (
+            <li
+              key={award.id}
+              className="grid grid-cols-[88px_minmax(0,1fr)_auto] items-baseline gap-6 border-t border-border py-5 last:border-b"
+            >
+              <span className="wide font-display text-sm font-semibold tabular-nums text-primary">
+                {award.year}.{String(award.month).padStart(2, "0")}
+              </span>
+              <span className="text-[17px] font-semibold">
+                {award.competition}
+                <span className="mt-0.5 block text-sm font-normal text-muted-foreground">
+                  {award.award}
+                  {award.team ? ` · ${award.team}` : ""}
+                </span>
+              </span>
+              <span className="wide font-display text-2xl font-semibold tabular-nums">
+                {award.award.match(/#\d+/)?.[0] ?? ""}
+              </span>
+            </li>
+          ))}
+        </ul>
       </div>
-      <ul className="border-t border-outline-variant/20">
-        {awards.map((award) => (
-          <li
-            key={award.id}
-            className="grid grid-cols-1 gap-2 border-b border-outline-variant/20 py-6 transition-colors hover:bg-surface-container-low md:grid-cols-[120px_1fr_1fr_1fr] md:items-center md:gap-8"
-          >
-            <span className="font-bold text-primary">
-              {award.year}.{String(award.month).padStart(2, "0")}
-            </span>
-            <span className="font-headline text-lg font-bold">
-              {award.competition}
-            </span>
-            <span>{award.award}</span>
-            <span className="text-on-surface-variant">
-              {award.team ||
-                award.members.map((member) => member.name).join(", ")}
-            </span>
-          </li>
-        ))}
-      </ul>
     </section>
   );
 }
diff --git a/components/main/stats-band.tsx b/components/main/stats-band.tsx
new file mode 100644
index 0000000..152d72f
--- /dev/null
+++ b/components/main/stats-band.tsx
@@ -0,0 +1,52 @@
+type Stat = {
+  value: string;
+  label: string;
+  note: string;
+};
+
+type StatsBandProps = {
+  people: number;
+  awards: number;
+  solved: number;
+  tracked: number;
+};
+
+/**
+ * 첫 화면 바로 아래에 놓는 세 숫자.
+ * 푼 문제 수는 핸들을 아는 사람만 더한 값이라 몇 명 기준인지 함께 적는다.
+ */
+export function StatsBand({ people, awards, solved, tracked }: StatsBandProps) {
+  const stats: Stat[] = [
+    {
+      value: people.toLocaleString("ko-KR"),
+      label: "역대 동아리원",
+      note: "수상 기록과 명단에 이름이 오른 사람",
+    },
+    {
+      value: awards.toLocaleString("ko-KR"),
+      label: "수상 기록",
+      note: "2016년부터 국내외 대회",
+    },
+    {
+      value: solved > 0 ? solved.toLocaleString("ko-KR") : "집계 중",
+      label: "푼 문제",
+      note: solved > 0 ? `solved.ac 기준 ${tracked}명 합산, 매일 갱신` : "solved.ac를 불러오지 못했습니다",
+    },
+  ];
+
+  return (
+    <section className="border-b border-border px-6 py-16 md:px-10 md:py-20" aria-label="동아리 기록 요약">
+      <dl className="grid grid-cols-1 gap-10 sm:grid-cols-3 sm:gap-6">
+        {stats.map((stat) => (
+          <div key={stat.label} className="flex flex-col gap-2">
+            <dd className="wide font-display text-6xl font-semibold tabular-nums leading-none tracking-tight md:text-7xl">
+              {stat.value}
+            </dd>
+            <dt className="text-lg font-semibold">{stat.label}</dt>
+            <p className="text-sm text-muted-foreground">{stat.note}</p>
+          </div>
+        ))}
+      </dl>
+    </section>
+  );
+}
diff --git a/components/members/member-row.tsx b/components/members/member-row.tsx
index 6d7b9d1..66327b4 100644
--- a/components/members/member-row.tsx
+++ b/components/members/member-row.tsx
@@ -11,34 +11,22 @@ type MemberRowProps = {
   compact?: boolean;
 };
 
-export function MemberRow({
-  member,
-  awardCount,
-  profile,
-  compact = false,
-}: MemberRowProps) {
+export function MemberRow({ member, awardCount, profile, compact = false }: MemberRowProps) {
   return (
     <div
       className={cn(
-        "flex items-center justify-between gap-4 border-b border-outline-variant/10 px-4 transition-colors hover:bg-surface-container-low",
-        compact ? "py-3" : "py-6"
+        "flex items-center justify-between gap-4 border-b border-border",
+        compact ? "py-3" : "py-5"
       )}
     >
       <div className="flex min-w-0 items-center gap-3">
-        <span
-          className={cn(
-            "font-headline font-bold",
-            compact ? "text-base" : "text-lg"
-          )}
-        >
-          {member.name}
-        </span>
+        <span className={cn("font-semibold", compact ? "text-base" : "text-lg")}>{member.name}</span>
         {awardCount > 0 && (
           <span
-            className="inline-flex items-center gap-1 font-label text-[10px] tracking-widest text-tertiary"
+            className="wide inline-flex items-center gap-1 font-display text-xs font-medium text-outline"
             title={`수상 ${awardCount}회`}
           >
-            <Trophy className="size-3" aria-hidden="true" />
+            <Trophy className="size-3.5" aria-hidden="true" />
             {awardCount}
           </span>
         )}
@@ -49,7 +37,7 @@ export function MemberRow({
           href={profileUrl(member.handle)}
           target="_blank"
           rel="noopener noreferrer"
-          className="font-label text-xs tracking-widest text-outline transition-colors hover:text-primary"
+          className="wide font-display text-sm text-muted-foreground transition-colors hover:text-foreground"
         >
           @{member.handle}
         </a>
diff --git a/components/members/tier-badge.tsx b/components/members/tier-badge.tsx
index 06d766d..9776aeb 100644
--- a/components/members/tier-badge.tsx
+++ b/components/members/tier-badge.tsx
@@ -5,15 +5,11 @@ export function TierBadge({ profile }: { profile: SolvedacProfile }) {
   const name = tierName(profile.tier);
   return (
     <span
-      className="inline-flex items-center gap-1.5 border px-2 py-0.5 font-label text-[10px] font-bold uppercase tracking-widest"
-      style={{ color, borderColor: `${color}66` }}
+      className="wide inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 font-display text-[11px] font-semibold uppercase"
+      style={{ color, borderColor: `${color}55` }}
       title={`solved.ac ${name}, rating ${profile.rating}`}
     >
-      <span
-        className="size-1.5"
-        style={{ backgroundColor: color }}
-        aria-hidden="true"
-      />
+      <span className="size-1.5 rounded-full" style={{ backgroundColor: color }} aria-hidden="true" />
       {name}
     </span>
   );
diff --git a/components/ui/glass-filters.tsx b/components/ui/glass-filters.tsx
new file mode 100644
index 0000000..ff18697
--- /dev/null
+++ b/components/ui/glass-filters.tsx
@@ -0,0 +1,62 @@
+/**
+ * Liquid Glass의 굴절(lensing) 필터.
+ *
+ * 애플의 Liquid Glass는 배경을 흐리기만 하는 게 아니라 렌즈처럼 휘게 한다.
+ * 가장자리에서 배경을 안쪽으로 밀어내는 변위 맵을 만들어 feDisplacementMap에 넣는다.
+ * backdrop-filter의 url() 참조는 Chrome 계열만 지원하므로 globals.css에서
+ * @supports로 감싸 점진적으로 적용한다. Safari와 Firefox는 흐림만 보인다.
+ */
+
+// 변위 맵. 회색(128,128)이 변위 없음, R은 가로, G는 세로 방향을 민다.
+const DISPLACEMENT_MAP = `data:image/svg+xml;utf8,${encodeURIComponent(
+  `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+    <defs>
+      <linearGradient id="x" x1="0" y1="0" x2="1" y2="0">
+        <stop offset="0" stop-color="rgb(0,128,128)"/>
+        <stop offset="0.28" stop-color="rgb(128,128,128)"/>
+        <stop offset="0.72" stop-color="rgb(128,128,128)"/>
+        <stop offset="1" stop-color="rgb(255,128,128)"/>
+      </linearGradient>
+      <linearGradient id="y" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0" stop-color="rgb(128,0,128)"/>
+        <stop offset="0.28" stop-color="rgb(128,128,128)"/>
+        <stop offset="0.72" stop-color="rgb(128,128,128)"/>
+        <stop offset="1" stop-color="rgb(128,255,128)"/>
+      </linearGradient>
+    </defs>
+    <rect width="200" height="200" fill="rgb(128,128,128)"/>
+    <rect width="200" height="200" fill="url(%23x)"/>
+    <rect width="200" height="200" fill="url(%23y)" style="mix-blend-mode:screen"/>
+  </svg>`
+)}`;
+
+export function GlassFilters() {
+  return (
+    <svg aria-hidden="true" focusable="false" className="pointer-events-none absolute size-0">
+      <defs>
+        {/* Regular. 기본 UI 표면에 쓰는 은은한 굴절. */}
+        <filter id="glass-regular" x="0%" y="0%" width="100%" height="100%">
+          <feImage href={DISPLACEMENT_MAP} preserveAspectRatio="none" result="map" />
+          <feDisplacementMap
+            in="SourceGraphic"
+            in2="map"
+            scale="18"
+            xChannelSelector="R"
+            yChannelSelector="G"
+          />
+        </filter>
+        {/* Clear. 사진과 3D 위의 작은 컨트롤에 쓰는 강한 굴절. */}
+        <filter id="glass-clear" x="0%" y="0%" width="100%" height="100%">
+          <feImage href={DISPLACEMENT_MAP} preserveAspectRatio="none" result="map" />
+          <feDisplacementMap
+            in="SourceGraphic"
+            in2="map"
+            scale="34"
+            xChannelSelector="R"
+            yChannelSelector="G"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
diff --git a/data/awards.json b/data/awards.json
index 9e7f8d4..aaa7d90 100644
--- a/data/awards.json
+++ b/data/awards.json
@@ -15,7 +15,8 @@
         "name": "아세안"
       },
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       }
     ]
   },
@@ -35,7 +36,8 @@
         "name": "아세안"
       },
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       }
     ]
   },
@@ -259,7 +261,8 @@
     "note": "연세대학교",
     "members": [
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       },
       {
         "name": "정용진"
@@ -304,7 +307,8 @@
         "name": "곽재혁"
       },
       {
-        "name": "김형진"
+        "name": "김형진",
+        "handle": "ez_code"
       },
       {
         "name": "박경욱",
@@ -348,7 +352,8 @@
         "name": "전우제"
       },
       {
-        "name": "이지언"
+        "name": "이지언",
+        "handle": "plast"
       }
     ]
   },
@@ -368,7 +373,8 @@
         "name": "김건우"
       },
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       }
     ]
   },
@@ -385,7 +391,8 @@
         "name": "곽재혁"
       },
       {
-        "name": "김형진"
+        "name": "김형진",
+        "handle": "ez_code"
       },
       {
         "name": "박경욱",
@@ -468,7 +475,8 @@
         "name": "김종민"
       },
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       },
       {
         "name": "이승재"
@@ -531,7 +539,8 @@
         "name": "황준호"
       },
       {
-        "name": "남현우"
+        "name": "남현우",
+        "handle": "zych1751"
       }
     ]
   },
@@ -548,7 +557,8 @@
         "name": "박선종"
       },
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       },
       {
         "name": "김민재"
@@ -588,10 +598,12 @@
         "name": "정용진"
       },
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       },
       {
-        "name": "김형진"
+        "name": "김형진",
+        "handle": "ez_code"
       }
     ]
   },
@@ -611,7 +623,8 @@
         "name": "민상원"
       },
       {
-        "name": "이지언"
+        "name": "이지언",
+        "handle": "plast"
       }
     ]
   },
@@ -642,13 +655,15 @@
     "note": "",
     "members": [
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       },
       {
         "name": "정용진"
       },
       {
-        "name": "김형진"
+        "name": "김형진",
+        "handle": "ez_code"
       }
     ]
   },
@@ -680,7 +695,8 @@
     "note": "",
     "members": [
       {
-        "name": "이택희"
+        "name": "이택희",
+        "handle": "portableangel"
       }
     ]
   },
@@ -694,7 +710,8 @@
     "note": "",
     "members": [
       {
-        "name": "남현우"
+        "name": "남현우",
+        "handle": "zych1751"
       }
     ]
   },
@@ -736,7 +753,8 @@
     "note": "",
     "members": [
       {
-        "name": "남현우"
+        "name": "남현우",
+        "handle": "zych1751"
       }
     ]
   },
@@ -764,7 +782,8 @@
     "note": "",
     "members": [
       {
-        "name": "이택희"
+        "name": "이택희",
+        "handle": "portableangel"
       }
     ]
   },
@@ -778,7 +797,8 @@
     "note": "",
     "members": [
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       }
     ]
   },
@@ -792,7 +812,8 @@
     "note": "",
     "members": [
       {
-        "name": "김형진"
+        "name": "김형진",
+        "handle": "ez_code"
       },
       {
         "name": "윤지호",
@@ -820,7 +841,8 @@
         "name": "장주원"
       },
       {
-        "name": "김형진"
+        "name": "김형진",
+        "handle": "ez_code"
       }
     ]
   },
@@ -897,7 +919,8 @@
     "note": "",
     "members": [
       {
-        "name": "김형진"
+        "name": "김형진",
+        "handle": "ez_code"
       }
     ]
   },
@@ -914,10 +937,12 @@
         "name": "정용진"
       },
       {
-        "name": "김형진"
+        "name": "김형진",
+        "handle": "ez_code"
       },
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       }
     ]
   },
@@ -1007,7 +1032,8 @@
     "note": "",
     "members": [
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       }
     ]
   },
@@ -1021,7 +1047,8 @@
     "note": "",
     "members": [
       {
-        "name": "김형진"
+        "name": "김형진",
+        "handle": "ez_code"
       }
     ]
   },
@@ -1035,7 +1062,8 @@
     "note": "연세대학교",
     "members": [
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       },
       {
         "name": "정용진"
@@ -1061,7 +1089,8 @@
         "name": "전우제"
       },
       {
-        "name": "이지언"
+        "name": "이지언",
+        "handle": "plast"
       }
     ]
   },
@@ -1078,7 +1107,8 @@
         "name": "곽재혁"
       },
       {
-        "name": "김형진"
+        "name": "김형진",
+        "handle": "ez_code"
       },
       {
         "name": "박경욱",
@@ -1116,7 +1146,8 @@
     "note": "연세대학교",
     "members": [
       {
-        "name": "김형진"
+        "name": "김형진",
+        "handle": "ez_code"
       },
       {
         "name": "동용훈"
@@ -1162,7 +1193,8 @@
         "name": "황준호"
       },
       {
-        "name": "남현우"
+        "name": "남현우",
+        "handle": "zych1751"
       }
     ]
   },
@@ -1196,7 +1228,8 @@
     "note": "연세대학교",
     "members": [
       {
-        "name": "김형진"
+        "name": "김형진",
+        "handle": "ez_code"
       },
       {
         "name": "함태완"
@@ -1216,7 +1249,8 @@
     "note": "연세대학교",
     "members": [
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       },
       {
         "name": "정은서"
@@ -1236,7 +1270,8 @@
     "note": "",
     "members": [
       {
-        "name": "남현우"
+        "name": "남현우",
+        "handle": "zych1751"
       },
       {
         "name": "윤인섭"
@@ -1256,7 +1291,8 @@
     "note": "",
     "members": [
       {
-        "name": "남현우"
+        "name": "남현우",
+        "handle": "zych1751"
       },
       {
         "name": "윤인섭"
@@ -1276,7 +1312,8 @@
     "note": "portableangel",
     "members": [
       {
-        "name": "이택희"
+        "name": "이택희",
+        "handle": "portableangel"
       },
       {
         "name": "(외부인 2명)"
@@ -1293,7 +1330,8 @@
     "note": "",
     "members": [
       {
-        "name": "서남규"
+        "name": "서남규",
+        "handle": "ae04071"
       }
     ]
   },
@@ -1307,7 +1345,8 @@
     "note": "",
     "members": [
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       }
     ]
   },
@@ -1341,7 +1380,8 @@
     "note": "연세대학교",
     "members": [
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       },
       {
         "name": "이협",
@@ -1422,7 +1462,8 @@
         "name": "민상원"
       },
       {
-        "name": "이지언"
+        "name": "이지언",
+        "handle": "plast"
       }
     ]
   },
@@ -1436,13 +1477,15 @@
     "note": "",
     "members": [
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       },
       {
         "name": "정용진"
       },
       {
-        "name": "김형진"
+        "name": "김형진",
+        "handle": "ez_code"
       }
     ]
   },
@@ -1462,7 +1505,8 @@
         "name": "박선종"
       },
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       }
     ]
   },
@@ -1496,13 +1540,16 @@
     "note": "ks9509 / zych1751 / ae04071",
     "members": [
       {
-        "name": "김규상"
+        "name": "김규상",
+        "handle": "ks9509"
       },
       {
-        "name": "남현우"
+        "name": "남현우",
+        "handle": "zych1751"
       },
       {
-        "name": "서남규"
+        "name": "서남규",
+        "handle": "ae04071"
       }
     ]
   },
@@ -1536,7 +1583,8 @@
     "note": "",
     "members": [
       {
-        "name": "남현우"
+        "name": "남현우",
+        "handle": "zych1751"
       },
       {
         "name": "윤인섭"
@@ -1556,13 +1604,15 @@
     "note": "",
     "members": [
       {
-        "name": "김태윤"
+        "name": "김태윤",
+        "handle": "ystaeyoon113"
       },
       {
         "name": "정용진"
       },
       {
-        "name": "김형진"
+        "name": "김형진",
+        "handle": "ez_code"
       }
     ]
   }
diff --git a/data/members.json b/data/members.json
index 8f46751..bdc407c 100644
--- a/data/members.json
+++ b/data/members.json
@@ -30,5 +30,37 @@
   {
     "handle": "rammma",
     "name": "이하람"
+  },
+  {
+    "handle": "portableangel",
+    "name": "이택희"
+  },
+  {
+    "handle": "ks9509",
+    "name": "김규상"
+  },
+  {
+    "handle": "zych1751",
+    "name": "남현우"
+  },
+  {
+    "handle": "ae04071",
+    "name": "서남규"
+  },
+  {
+    "handle": "ystaeyoon113",
+    "name": "김태윤"
+  },
+  {
+    "handle": "plast",
+    "name": "이지언"
+  },
+  {
+    "handle": "ez_code",
+    "name": "김형진"
+  },
+  {
+    "handle": "susanna0108",
+    "name": "양인석"
   }
 ]
diff --git a/lib/activities.ts b/lib/activities.ts
new file mode 100644
index 0000000..af5c165
--- /dev/null
+++ b/lib/activities.ts
@@ -0,0 +1,47 @@
+export type Activity = {
+  slug: string;
+  eyebrow: string;
+  title: string;
+  summary: string;
+  description: string;
+  details: { label: string; value: string }[];
+};
+
+/** 한 학기의 세 활동. 홈의 요약과 활동 페이지가 같은 데이터를 쓴다. */
+export const activities: Activity[] = [
+  {
+    slug: "session",
+    eyebrow: "Weekly session",
+    title: "정기 세션",
+    summary: "매주 한 번, 난이도별 트랙으로 문제를 풀고 풀이를 리뷰합니다.",
+    description:
+      "매주 진행되는 알고리즘 세션입니다. 난이도별 트랙으로 나뉘어 문제를 풀고, 풀이를 공유하고 리뷰합니다. DP, 그래프, 문자열, 수학까지 한 학기에 한 바퀴 돕니다.",
+    details: [
+      { label: "주기", value: "매주" },
+      { label: "형식", value: "주제별 발표와 문제풀이 리뷰" },
+      { label: "주제", value: "DP, 그래프, 문자열, 수학" },
+    ],
+  },
+  {
+    slug: "team-practice",
+    eyebrow: "Team practice",
+    title: "팀 연습",
+    summary: "매주 토요일, ICPC 형식으로 3인 1팀이 실전처럼 연습합니다.",
+    description:
+      "ICPC 대회를 대비한 3인 1팀 연습입니다. 실전과 같은 환경에서 팀 커뮤니케이션과 전략을 다듬습니다. Div 1과 Div 2로 나눠 운영합니다.",
+    details: [
+      { label: "주기", value: "매주 토요일" },
+      { label: "구분", value: "Div 1, Div 2" },
+      { label: "문제 셋", value: "Codeforces, AtCoder 기출" },
+    ],
+  },
+  {
+    slug: "contests",
+    eyebrow: "Contests",
+    title: "대회 참가",
+    summary: "ICPC, SUAPC, SCPC, UCPC 같은 대회에 팀으로 나갑니다.",
+    description:
+      "ICPC, SUAPC, SCPC, UCPC 등 국내외 주요 프로그래밍 대회에 참가하며 실전 경험을 쌓습니다. 2026년에는 ICPC 아시아 태평양 챔피언십에서 메달 두 개를 가져왔습니다.",
+    details: [{ label: "주요 대회", value: "ICPC, SUAPC, SCPC, UCPC" }],
+  },
+];
diff --git a/lib/data.ts b/lib/data.ts
index 18f38a4..d250fdb 100644
--- a/lib/data.ts
+++ b/lib/data.ts
@@ -81,6 +81,26 @@ export function getMemberAwardCount(handle: string): number {
   ).length;
 }
 
+/**
+ * 역대 활동 인원. 수상 기록에 이름이 오른 사람과 명단에 있는 사람을 합쳐
+ * 이름 기준으로 센다. 괄호로 적힌 외부 참가자는 빼고, 동명이인은 한 명으로 본다.
+ */
+export function getPeopleCount(): number {
+  const data = dataset();
+  const names = new Set(data.members.map((member) => member.name));
+  for (const award of data.awards) {
+    for (const member of award.members) {
+      if (!member.name.startsWith("(")) names.add(member.name);
+    }
+  }
+  return names.size;
+}
+
+/** solved.ac 핸들을 아는 사람 전원. 푼 문제 수를 합산할 때 쓴다. */
+export function getAllHandles(): string[] {
+  return dataset().members.map((member) => member.handle);
+}
+
 export function getSessions(): Session[] {
   return [...dataset().sessions].sort((a, b) => b.date.localeCompare(a.date));
 }
diff --git a/lib/solvedac.ts b/lib/solvedac.ts
index cfdfcfe..c43360f 100644
--- a/lib/solvedac.ts
+++ b/lib/solvedac.ts
@@ -79,14 +79,22 @@ async function fetchProfile(handle: string): Promise<SolvedacProfile | null> {
   }
 }
 
-/** 실패한 핸들은 결과에서 빠진다. 호출자는 없는 핸들에 배지를 그리지 않는다. */
+const BATCH_SIZE = 8;
+
+/**
+ * 실패한 핸들은 결과에서 빠진다. 호출자는 없는 핸들에 배지를 그리지 않는다.
+ * 명단이 길어져도 solved.ac에 한 번에 몰리지 않도록 여덟 개씩 끊어 부른다.
+ */
 export async function getSolvedacProfiles(
   handles: string[]
 ): Promise<Map<string, SolvedacProfile>> {
-  const results = await Promise.all(handles.map(fetchProfile));
   const profiles = new Map<string, SolvedacProfile>();
-  for (const profile of results) {
-    if (profile) profiles.set(profile.handle, profile);
+  for (let i = 0; i < handles.length; i += BATCH_SIZE) {
+    const batch = handles.slice(i, i + BATCH_SIZE);
+    const results = await Promise.all(batch.map(fetchProfile));
+    for (const profile of results) {
+      if (profile) profiles.set(profile.handle, profile);
+    }
   }
   return profiles;
 }
diff --git a/package.json b/package.json
index cd07e82..79cc56d 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.2.0",
+    "@react-three/fiber": "^9.7.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
@@ -25,6 +26,7 @@
     "react-dom": "19.2.3",
     "shadcn": "^3.8.5",
     "tailwind-merge": "^3.5.0",
+    "three": "^0.185.1",
     "tw-animate-css": "^1.4.0",
     "zod": "^4.5.4"
   },
@@ -34,6 +36,7 @@
     "@types/papaparse": "^5.5.2",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/three": "^0.185.4",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
     "papaparse": "^5.5.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8c389cd..d75a7a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@base-ui/react':
         specifier: ^1.2.0
         version: 1.2.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@react-three/fiber':
+        specifier: ^9.7.0
+        version: 9.7.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.185.1)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -44,6 +47,9 @@ importers:
       tailwind-merge:
         specifier: ^3.5.0
         version: 3.5.0
+      three:
+        specifier: ^0.185.1
+        version: 0.185.1
       tw-animate-css:
         specifier: ^1.4.0
         version: 1.4.0
@@ -66,6 +72,9 @@ importers:
       '@types/react-dom':
         specifier: ^19
         version: 19.2.3(@types/react@19.2.14)
+      '@types/three':
+        specifier: ^0.185.4
+        version: 0.185.4
       eslint:
         specifier: ^9
         version: 9.39.3(jiti@2.6.1)(supports-color@7.2.0)
@@ -252,6 +261,9 @@ packages:
       '@types/react':
         optional: true
 
+  '@dimforge/rapier3d-compat@0.12.0':
+    resolution: {integrity: sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==}
+
   '@dotenvx/dotenvx@1.52.0':
     resolution: {integrity: sha512-CaQcc8JvtzQhUSm9877b6V4Tb7HCotkcyud9X2YwdqtQKwgljkMRwU96fVYKnzN3V0Hj74oP7Es+vZ0mS+Aa1w==}
     hasBin: true
@@ -1511,6 +1523,31 @@ packages:
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
+  '@react-three/fiber@9.7.0':
+    resolution: {integrity: sha512-EWm9FwcaOZQu/ExFW5rggoCMM1NJet5YbxVxKaOE+KSncrjU0Wx7017qSyGFvupviK89nMYGCWU3BIK4dI1clw==}
+    peerDependencies:
+      expo: '>=43.0'
+      expo-asset: '>=8.4'
+      expo-file-system: '>=11.0'
+      expo-gl: '>=11.0'
+      react: '>=19 <19.3'
+      react-dom: '>=19 <19.3'
+      react-native: '>=0.78'
+      three: '>=0.156'
+    peerDependenciesMeta:
+      expo:
+        optional: true
+      expo-asset:
+        optional: true
+      expo-file-system:
+        optional: true
+      expo-gl:
+        optional: true
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+
   '@rolldown/binding-android-arm-eabi@1.2.6':
     resolution: {integrity: sha512-b+jTcARdTiFLI6jB4a5XjTm0RWd6KcRfQj/I2356fxUZemiho9zQLxo0RtCuMDAyKcLo6cEltkgbQp6d1+sjjQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1721,6 +1758,9 @@ packages:
   '@ts-morph/common@0.27.0':
     resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
 
+  '@tweenjs/tween.js@23.1.3':
+    resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
+
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
@@ -1750,15 +1790,29 @@ packages:
     peerDependencies:
       '@types/react': ^19.2.0
 
+  '@types/react-reconciler@0.28.9':
+    resolution: {integrity: sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==}
+    peerDependencies:
+      '@types/react': '*'
+
   '@types/react@19.2.14':
     resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
 
+  '@types/stats.js@0.17.4':
+    resolution: {integrity: sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==}
+
   '@types/statuses@2.0.6':
     resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
 
+  '@types/three@0.185.4':
+    resolution: {integrity: sha512-gAsBIC07NIFrxjbf7tH2t71c38uulFfk/RFoC7FNBSjMRAQ8J1x/RBvusX0N5PJouaYFJawXQqfCQ0RKUx/1nA==}
+
   '@types/validate-npm-package-name@4.0.2':
     resolution: {integrity: sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw==}
 
+  '@types/webxr@0.5.24':
+    resolution: {integrity: sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==}
+
   '@typescript-eslint/eslint-plugin@8.56.1':
     resolution: {integrity: sha512-Jz9ZztpB37dNC+HU2HI28Bs9QXpzCz+y/twHOwhyrIRdbuVDxSytJNDl6z/aAKlaRIwC7y8wJdkBv7FxYGgi0A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2075,6 +2129,9 @@ packages:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
 
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
   baseline-browser-mapping@2.10.0:
     resolution: {integrity: sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==}
     engines: {node: '>=6.0.0'}
@@ -2100,6 +2157,9 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
+  buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+
   bundle-name@4.1.0:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
@@ -2629,6 +2689,9 @@ packages:
     resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
     engines: {node: ^12.20 || >= 14.13}
 
+  fflate@0.8.3:
+    resolution: {integrity: sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==}
+
   figures@6.1.0:
     resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
     engines: {node: '>=18'}
@@ -2835,6 +2898,9 @@ packages:
     resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
     engines: {node: '>=0.10.0'}
 
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -3046,6 +3112,11 @@ packages:
     resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
     engines: {node: '>= 0.4'}
 
+  its-fine@2.0.0:
+    resolution: {integrity: sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==}
+    peerDependencies:
+      react: ^19.0.0
+
   jiti@2.6.1:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
@@ -3317,6 +3388,9 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  meshoptimizer@1.1.1:
+    resolution: {integrity: sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -3700,6 +3774,15 @@ packages:
       '@types/react':
         optional: true
 
+  react-use-measure@2.1.7:
+    resolution: {integrity: sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==}
+    peerDependencies:
+      react: '>=16.13'
+      react-dom: '>=16.13'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   react@19.2.3:
     resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
     engines: {node: '>=0.10.0'}
@@ -3978,6 +4061,11 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  suspend-react@0.1.3:
+    resolution: {integrity: sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==}
+    peerDependencies:
+      react: '>=17.0'
+
   tabbable@6.4.0:
     resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
 
@@ -3995,6 +4083,9 @@ packages:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
 
+  three@0.185.1:
+    resolution: {integrity: sha512-5aojFCXKwnjBRZvUnt3WFfEcvUJgkN5LlijRFN95hMy8WVkG4I0QNcJE+OuWvuJ0bOdStrbfXn0pkd6/QyiAlg==}
+
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -4355,6 +4446,24 @@ packages:
   zod@4.5.4:
     resolution: {integrity: sha512-sC95tT5iHHH9gtpj6A81kh+NEaRAUFN+qlUPDUbRfOMvNf5QCBqsb3WgvnpVtK5Y+4UfA6KqufotuTvMGiTlsA==}
 
+  zustand@5.0.15:
+    resolution: {integrity: sha512-MpSEjRiBkA9crSYeOUH32rJC7SVqAbm0Fqcqge/bUi2PPoLcBWKOsG+C8mevmpr8TwXHBVkChbbJiyvkE+i/3A==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
@@ -4578,6 +4687,8 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
+  '@dimforge/rapier3d-compat@0.12.0': {}
+
   '@dotenvx/dotenvx@1.52.0':
     dependencies:
       commander: 11.1.0
@@ -5758,6 +5869,26 @@ snapshots:
 
   '@radix-ui/rect@1.1.1': {}
 
+  '@react-three/fiber@9.7.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.185.1)':
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@types/webxr': 0.5.24
+      base64-js: 1.5.1
+      buffer: 6.0.3
+      its-fine: 2.0.0(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
+      react-use-measure: 2.1.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      scheduler: 0.27.0
+      suspend-react: 0.1.3(react@19.2.3)
+      three: 0.185.1
+      use-sync-external-store: 1.6.0(react@19.2.3)
+      zustand: 5.0.15(@types/react@19.2.14)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
+    optionalDependencies:
+      react-dom: 19.2.3(react@19.2.3)
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+
   '@rolldown/binding-android-arm-eabi@1.2.6':
     optional: true
 
@@ -5892,6 +6023,8 @@ snapshots:
       minimatch: 10.2.4
       path-browserify: 1.0.1
 
+  '@tweenjs/tween.js@23.1.3': {}
+
   '@tybys/wasm-util@0.10.1':
     dependencies:
       tslib: 2.8.1
@@ -5922,14 +6055,31 @@ snapshots:
     dependencies:
       '@types/react': 19.2.14
 
+  '@types/react-reconciler@0.28.9(@types/react@19.2.14)':
+    dependencies:
+      '@types/react': 19.2.14
+
   '@types/react@19.2.14':
     dependencies:
       csstype: 3.2.3
 
+  '@types/stats.js@0.17.4': {}
+
   '@types/statuses@2.0.6': {}
 
+  '@types/three@0.185.4':
+    dependencies:
+      '@dimforge/rapier3d-compat': 0.12.0
+      '@tweenjs/tween.js': 23.1.3
+      '@types/stats.js': 0.17.4
+      '@types/webxr': 0.5.24
+      fflate: 0.8.3
+      meshoptimizer: 1.1.1
+
   '@types/validate-npm-package-name@4.0.2': {}
 
+  '@types/webxr@0.5.24': {}
+
   '@typescript-eslint/eslint-plugin@8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -5999,7 +6149,7 @@ snapshots:
       debug: 4.4.3(supports-color@7.2.0)
       minimatch: 10.2.4
       semver: 7.7.4
-      tinyglobby: 0.2.15
+      tinyglobby: 0.2.17
       ts-api-utils: 2.4.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -6260,6 +6410,8 @@ snapshots:
 
   balanced-match@4.0.4: {}
 
+  base64-js@1.5.1: {}
+
   baseline-browser-mapping@2.10.0: {}
 
   body-parser@2.2.2(supports-color@7.2.0):
@@ -6297,6 +6449,11 @@ snapshots:
       node-releases: 2.0.27
       update-browserslist-db: 1.2.3(browserslist@4.28.1)
 
+  buffer@6.0.3:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
   bundle-name@4.1.0:
     dependencies:
       run-applescript: 7.1.0
@@ -6993,6 +7150,8 @@ snapshots:
       node-domexception: 1.0.0
       web-streams-polyfill: 3.3.3
 
+  fflate@0.8.3: {}
+
   figures@6.1.0:
     dependencies:
       is-unicode-supported: 2.1.0
@@ -7191,6 +7350,8 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
+  ieee754@1.2.1: {}
+
   ignore@5.3.2: {}
 
   ignore@7.0.5: {}
@@ -7377,6 +7538,13 @@ snapshots:
       has-symbols: 1.1.0
       set-function-name: 2.0.2
 
+  its-fine@2.0.0(@types/react@19.2.14)(react@19.2.3):
+    dependencies:
+      '@types/react-reconciler': 0.28.9(@types/react@19.2.14)
+      react: 19.2.3
+    transitivePeerDependencies:
+      - '@types/react'
+
   jiti@2.6.1: {}
 
   jose@6.1.3: {}
@@ -7576,6 +7744,8 @@ snapshots:
 
   merge2@1.4.1: {}
 
+  meshoptimizer@1.1.1: {}
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -8011,6 +8181,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
+  react-use-measure@2.1.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      react-dom: 19.2.3(react@19.2.3)
+
   react@19.2.3: {}
 
   recast@0.23.11:
@@ -8424,6 +8600,10 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  suspend-react@0.1.3(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+
   tabbable@6.4.0: {}
 
   tagged-tag@1.0.0: {}
@@ -8434,6 +8614,8 @@ snapshots:
 
   tapable@2.3.0: {}
 
+  three@0.185.1: {}
+
   tiny-invariant@1.3.3: {}
 
   tinybench@2.9.0: {}
@@ -8787,3 +8969,9 @@ snapshots:
   zod@3.25.76: {}
 
   zod@4.5.4: {}
+
+  zustand@5.0.15(@types/react@19.2.14)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3)):
+    optionalDependencies:
+      '@types/react': 19.2.14
+      react: 19.2.3
+      use-sync-external-store: 1.6.0(react@19.2.3)