diff --git a/src/app/globals.css b/src/app/globals.css
index a2dc41e..098b4b9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,26 +1,214 @@
 @import "tailwindcss";
 
+/* ── 자연 친화 팔레트 ── */
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #f6eeda;
+  --foreground: #3f2c14;
+  --wood-dark: #6b4220;
+  --wood: #8a5a2b;
+  --wood-light: #b57f42;
+  --cream: #f6eeda;
+  --cream-bright: #fffdf6;
+  --ink: #3f2c14;
+  --ink-soft: #6f5c39;
+  --gold-line: rgba(236, 215, 166, 0.28);
+  --leaf: #7fb539;
+  --leaf-dark: #4f8420;
+  --leaf-bright: #b6e05e;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --font-sans: var(--font-gowun);
+  --font-mono: var(--font-mono);
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-gowun), sans-serif;
+}
+
+.font-jua {
+  font-family: var(--font-jua), sans-serif;
+}
+.font-gowun {
+  font-family: var(--font-gowun), sans-serif;
+}
+.font-num {
+  font-family: var(--font-mono), monospace;
+}
+
+/* ── 공통 컴포넌트 스타일 ── */
+
+/* 상단 어두운 나무 바 */
+.nature-topbar {
+  background: linear-gradient(rgba(30, 20, 8, 0.92), rgba(30, 20, 8, 0.72));
+  border-bottom: 1px solid var(--gold-line);
+}
+
+/* 매달린 나무 판자 (타이틀) */
+.wood-plank {
+  border-radius: 14px 20px 14px 20px;
+  background: linear-gradient(#8a5a2b, #6b4220);
+  border: 1px solid rgba(48, 30, 12, 0.6);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 236, 196, 0.35),
+    inset 0 -3px 8px rgba(0, 0, 0, 0.35),
+    0 6px 14px rgba(30, 20, 8, 0.35);
+  color: #fbf1d9;
+}
+
+/* 어두운 우드 pill (자원·보조 버튼) */
+.wood-pill {
+  border-radius: 999px;
+  background: linear-gradient(rgba(44, 30, 14, 0.86), rgba(28, 19, 8, 0.9));
+  border: 1px solid var(--gold-line);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 240, 205, 0.18),
+    0 4px 10px rgba(20, 14, 4, 0.3);
+  color: #f4e9cf;
+}
+.wood-pill-icon {
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 25%, #f6ecd2, #d8c39a);
+  box-shadow: inset 0 -2px 4px rgba(120, 95, 50, 0.35);
+}
+
+/* 초록 자연 버튼 (주 액션) */
+.nature-btn {
+  border-radius: 999px;
+  background: linear-gradient(#a3d24f, #5d8f22);
+  border: 1px solid #3f6a13;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 235, 0.5),
+    0 6px 14px rgba(50, 80, 20, 0.4);
+  color: #26400c;
+  font-family: var(--font-jua), sans-serif;
+}
+.nature-btn:hover:not(:disabled) {
+  background: linear-gradient(#b0dc60, #6a9e2c);
+}
+
+/* 앰버 우드 버튼 (구매·건설) */
+.amber-btn {
+  border-radius: 999px;
+  background: linear-gradient(#d6a43c, #a87a1e);
+  border: 1px solid #7a5510;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 240, 200, 0.5),
+    0 5px 12px rgba(90, 60, 10, 0.35);
+  color: #3d2c07;
+  font-family: var(--font-jua), sans-serif;
+}
+.amber-btn:hover:not(:disabled) {
+  background: linear-gradient(#e2b34e, #b78829);
+}
+
+/* 패널: 바깥 나무 프레임 */
+.panel-wood {
+  border-radius: 30px;
+  background-image:
+    repeating-linear-gradient(
+      118deg,
+      rgba(255, 232, 186, 0.22) 0 3px,
+      rgba(0, 0, 0, 0) 3px 9px,
+      rgba(52, 28, 8, 0.4) 9px 15px,
+      rgba(0, 0, 0, 0) 15px 24px
+    ),
+    repeating-linear-gradient(
+      62deg,
+      rgba(255, 232, 186, 0.1) 0 2px,
+      rgba(0, 0, 0, 0) 2px 11px
+    ),
+    linear-gradient(160deg, #b57f42, #8a5a2b 45%, #6d4420);
+  box-shadow:
+    inset 0 2px 0 rgba(255, 238, 200, 0.35),
+    inset 0 -4px 10px rgba(34, 18, 4, 0.4),
+    0 12px 28px rgba(20, 14, 4, 0.4);
+}
+
+/* 패널: 안쪽 크림 종이 */
+.panel-paper {
+  border-radius: 22px;
+  background-image:
+    radial-gradient(
+      140% 90% at 50% 0%,
+      rgba(255, 252, 240, 0.9),
+      rgba(246, 238, 218, 0.94)
+    ),
+    repeating-linear-gradient(
+      90deg,
+      rgba(140, 110, 60, 0.05) 0 2px,
+      rgba(0, 0, 0, 0) 2px 7px
+    );
+  background-color: #f6eeda;
+  box-shadow:
+    inset 0 0 0 1px rgba(120, 90, 45, 0.25),
+    inset 0 6px 18px rgba(140, 110, 60, 0.18);
+}
+
+/* 크림 카드 (잎모양 비대칭 모서리) */
+.card-nature {
+  position: relative;
+  border-radius: 6px 22px 6px 22px;
+  background: linear-gradient(#fffdf6, #f3e9d0);
+  border: 1px solid rgba(126, 95, 48, 0.3);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 250, 0.9),
+    0 4px 10px rgba(120, 95, 50, 0.14);
+}
+.card-accent {
+  position: absolute;
+  left: 0;
+  top: 14px;
+  bottom: 14px;
+  width: 4px;
+  border-radius: 0 4px 4px 0;
+  background: linear-gradient(#9ccc48, #4f8420);
+}
+
+/* 연두 칩 (적성 등) */
+.chip-nature {
+  border-radius: 3px 10px 3px 10px;
+  background: rgba(126, 181, 57, 0.14);
+  border: 1px solid rgba(94, 140, 42, 0.3);
+  color: #4d6b21;
+}
+
+/* 잎사귀 장식 */
+.leaf {
+  position: absolute;
+  border-radius: 0 100% 0 100%;
+  background: linear-gradient(140deg, #a8d95c, #59902a);
+  pointer-events: none;
+}
+.leaf-bright {
+  background: linear-gradient(140deg, #bde36f, #6aa233);
+}
+
+/* 진행 바 (포만도 등) */
+.bar-track {
+  border-radius: 999px;
+  background: rgba(126, 95, 48, 0.16);
+  box-shadow: inset 0 1px 2px rgba(100, 75, 35, 0.28);
+  overflow: hidden;
+}
+.bar-fill-green {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #7fc23a, #b6e05e);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 230, 0.6);
+}
+.bar-fill-amber {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #d6a43c, #eec767);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 230, 0.6);
+}
+.bar-fill-red {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #d66a4a, #ee9367);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 00a640c..642b453 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,14 +1,21 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Jua, Gowun_Dodum, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const jua = Jua({
+  weight: "400",
+  variable: "--font-jua",
   subsets: ["latin"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const gowunDodum = Gowun_Dodum({
+  weight: "400",
+  variable: "--font-gowun",
+  subsets: ["latin"],
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  variable: "--font-mono",
   subsets: ["latin"],
 });
 
@@ -20,10 +27,10 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: LayoutProps<"/">) {
   return (
     <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      lang="ko"
+      className={`${jua.variable} ${gowunDodum.variable} ${jetbrainsMono.variable} h-full antialiased`}
     >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col font-gowun">{children}</body>
     </html>
   );
 }
diff --git a/src/components/game/Game.tsx b/src/components/game/Game.tsx
index 4c58a5d..7143e9a 100644
--- a/src/components/game/Game.tsx
+++ b/src/components/game/Game.tsx
@@ -57,7 +57,7 @@ export default function Game() {
 
   if (!state) {
     return (
-      <div className="fixed inset-0 flex items-center justify-center bg-emerald-50 text-gray-400 dark:bg-gray-950">
+      <div className="fixed inset-0 flex items-center justify-center bg-[#f6eeda] font-jua text-lg text-[#8a7551]">
         마을 불러오는 중…
       </div>
     );
@@ -91,76 +91,85 @@ export default function Game() {
 
       {/* ── 배치 모드 힌트 ── */}
       {placing && (
-        <div className="absolute bottom-6 left-1/2 z-40 flex -translate-x-1/2 items-center gap-3 rounded-full bg-gray-900/90 px-5 py-2.5 text-sm font-semibold text-white shadow-lg">
+        <div className="wood-plank font-jua absolute bottom-6 left-1/2 z-40 flex -translate-x-1/2 items-center gap-3 px-5 py-2.5 text-sm">
           📍 {placing.moveId ? "옮길" : "배치할"} 위치를 클릭하세요
           {placing.type === "dock" && " (부두는 물가에만)"}
           <button
             onClick={() => setPlacing(null)}
-            className="rounded-full bg-white/20 px-3 py-1 text-xs hover:bg-white/30"
+            className="wood-pill px-3 py-1 text-xs hover:brightness-125"
           >
             취소 (ESC)
           </button>
         </div>
       )}
 
-      {/* ── 상단 HUD ── */}
-      <div className="pointer-events-none absolute inset-x-0 top-0 z-30 flex flex-wrap items-start justify-between gap-2 p-3">
-        <div className="pointer-events-auto flex flex-wrap items-center gap-2">
-          <button
-            onClick={() => setPanel({ type: "hall" })}
-            className="rounded-full bg-white/85 px-4 py-2 text-sm font-bold shadow backdrop-blur hover:bg-white dark:bg-gray-900/85 dark:hover:bg-gray-900"
-          >
-            🏡 고양이 마을 · 회관 Lv{state.hall.level}
-          </button>
-          <span className="rounded-full bg-white/85 px-3 py-2 text-sm shadow backdrop-blur dark:bg-gray-900/85">
-            🐱 {state.cats.length}/{state.hall.capacity}
-          </span>
-          <span className="rounded-full bg-white/85 px-3 py-2 text-sm shadow backdrop-blur dark:bg-gray-900/85">
-            🐟 {Math.floor(state.resources.fish)}
-          </span>
-          <span className="rounded-full bg-white/85 px-3 py-2 text-sm shadow backdrop-blur dark:bg-gray-900/85">
-            🪵 {Math.floor(state.resources.wood)}
-          </span>
-          <span className="rounded-full bg-white/85 px-3 py-2 text-sm shadow backdrop-blur dark:bg-gray-900/85">
-            🪨 {Math.floor(state.resources.stone)}
-          </span>
-          <span
-            title="부엌에 보관 중인 요리"
-            className="rounded-full bg-white/85 px-3 py-2 text-sm shadow backdrop-blur dark:bg-gray-900/85"
-          >
-            🍖 {meals}
-          </span>
-        </div>
-        <div className="pointer-events-auto flex gap-2">
-          <button
-            onClick={() =>
-              setPanel(panel?.type === "shop" ? null : { type: "shop" })
-            }
-            className="rounded-full bg-white/85 px-4 py-2 text-sm font-semibold shadow backdrop-blur hover:bg-white dark:bg-gray-900/85 dark:hover:bg-gray-900"
-          >
-            🛒 상점
-          </button>
-          <button
-            onClick={() =>
-              setPanel(panel?.type === "cats" ? null : { type: "cats" })
-            }
-            className="rounded-full bg-white/85 px-4 py-2 text-sm font-semibold shadow backdrop-blur hover:bg-white dark:bg-gray-900/85 dark:hover:bg-gray-900"
-          >
-            🐾 고양이
-          </button>
-          <button
-            onClick={() => setCandidates(engine.generateCandidates())}
-            disabled={state.cats.length >= state.hall.capacity}
-            className="rounded-full bg-orange-500 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-orange-600 disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            😻 입양
-          </button>
+      {/* ── 상단 HUD (어두운 나무 바) ── */}
+      <div className="nature-topbar pointer-events-none absolute inset-x-0 top-0 z-30 h-[52px]">
+        <div className="flex h-full items-start justify-between gap-2 px-4">
+          {/* 매달린 나무 판자 타이틀 */}
+          <div className="pointer-events-auto relative mt-0 flex items-start gap-3.5">
+            <button
+              onClick={() => setPanel({ type: "hall" })}
+              className="wood-plank relative mt-1 flex items-center gap-2 px-4 py-2"
+            >
+              <span className="absolute -top-1 left-4 h-4 w-[3px] -rotate-12 bg-linear-to-b from-[#c9b184] to-[#8c7550]" />
+              <span className="absolute -top-1 right-4 h-4 w-[3px] rotate-12 bg-linear-to-b from-[#c9b184] to-[#8c7550]" />
+              <span className="font-jua text-[17px] tracking-wide [text-shadow:0_1px_2px_rgba(0,0,0,.45)]">
+                🏡 고양이 마을 · 회관 Lv{state.hall.level}
+              </span>
+            </button>
+            {/* 자원 pill */}
+            <div className="mt-2 flex flex-wrap items-center gap-2">
+              {[
+                ["🐱", `${state.cats.length}/${state.hall.capacity}`],
+                ["🐟", Math.floor(state.resources.fish)],
+                ["🪵", Math.floor(state.resources.wood)],
+                ["🪨", Math.floor(state.resources.stone)],
+                ["🍖", meals],
+              ].map(([icon, value]) => (
+                <span
+                  key={icon as string}
+                  className="wood-pill flex items-center gap-1.5 py-1 pl-1 pr-3"
+                >
+                  <span className="wood-pill-icon grid h-6 w-6 place-items-center text-[13px]">
+                    {icon}
+                  </span>
+                  <span className="font-num text-sm leading-none">{value}</span>
+                </span>
+              ))}
+            </div>
+          </div>
+          <div className="pointer-events-auto mt-2 flex gap-2">
+            <button
+              onClick={() =>
+                setPanel(panel?.type === "shop" ? null : { type: "shop" })
+              }
+              className="wood-pill font-jua flex items-center gap-1.5 px-4 py-2 text-[15px] hover:brightness-125"
+            >
+              🛒 상점
+            </button>
+            <button
+              onClick={() =>
+                setPanel(panel?.type === "cats" ? null : { type: "cats" })
+              }
+              className="wood-pill font-jua flex items-center gap-1.5 px-4 py-2 text-[15px] hover:brightness-125"
+            >
+              🐾 고양이
+            </button>
+            <button
+              onClick={() => setCandidates(engine.generateCandidates())}
+              disabled={state.cats.length >= state.hall.capacity}
+              className="nature-btn flex items-center gap-1.5 px-4 py-2 text-[15px] disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              😻 입양
+            </button>
+          </div>
         </div>
       </div>
 
       {/* ── 메시지 토스트 ── */}
       {message && (
-        <div className="absolute left-1/2 top-16 z-50 -translate-x-1/2 rounded-full bg-amber-500/95 px-5 py-2 text-sm font-semibold text-white shadow-lg">
+        <div className="wood-plank font-jua absolute left-1/2 top-16 z-50 -translate-x-1/2 px-5 py-2 text-sm">
           ⚠️ {message}
         </div>
       )}
@@ -255,23 +264,31 @@ function SidePanel({
   children: React.ReactNode;
 }) {
   return (
-    <aside className="absolute bottom-3 right-3 top-16 z-40 flex w-full max-w-sm flex-col rounded-2xl border border-gray-200 bg-white/95 shadow-2xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/95">
-      <div className="flex items-center justify-between border-b border-gray-100 px-5 py-4 dark:border-gray-800">
-        <h2 className="flex items-center gap-2 text-lg font-bold">
-          {icon && (
-            /* eslint-disable-next-line @next/next/no-img-element */
-            <img src={icon} alt="" className="h-8 w-8 object-contain" />
-          )}
-          {title}
-        </h2>
-        <button
-          onClick={onClose}
-          className="rounded-lg px-3 py-1 text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
-        >
-          ✕
-        </button>
+    <aside className="panel-wood absolute bottom-3 right-3 top-15 z-40 w-full max-w-sm p-2.5">
+      {/* 잎사귀 장식 */}
+      <span className="leaf left-2 top-14 h-6 w-6 rotate-[-28deg]" />
+      <span className="leaf leaf-bright left-1 top-20 h-4 w-4 rotate-24" />
+      <span className="leaf right-2 top-52 h-5 w-5 rotate-140" />
+      <span className="leaf leaf-bright bottom-2 left-24 h-5 w-5 rotate-[-140deg]" />
+      <span className="leaf leaf-bright bottom-1.5 right-32 h-4 w-4 rotate-[-200deg]" />
+      <div className="panel-paper relative flex h-full flex-col overflow-hidden">
+        <div className="flex items-center justify-between border-b border-[rgba(126,95,48,.18)] px-5 py-3.5">
+          <h2 className="font-jua flex items-center gap-2 text-[19px] text-[#4a3418]">
+            {icon && (
+              /* eslint-disable-next-line @next/next/no-img-element */
+              <img src={icon} alt="" className="h-8 w-8 object-contain" />
+            )}
+            {title}
+          </h2>
+          <button
+            onClick={onClose}
+            className="grid h-8 w-8 place-items-center rounded-full bg-linear-to-b from-[#e8d6ae] to-[#cdb488] text-sm text-[#6b4a20] shadow hover:brightness-105"
+          >
+            ✕
+          </button>
+        </div>
+        <div className="flex-1 overflow-y-auto px-4 py-4">{children}</div>
       </div>
-      <div className="flex-1 overflow-y-auto px-5 py-4">{children}</div>
     </aside>
   );
 }
@@ -282,25 +299,25 @@ function HallPanel({ state, onUpgrade }: { state: GameState; onUpgrade: () => vo
   const next = HALL_LEVELS[state.hall.level + 1];
   return (
     <div className="space-y-4">
-      <p className="text-sm text-gray-500 dark:text-gray-400">
+      <p className="text-sm text-[#6f5c39]">
         마을의 중심. 회관 레벨이 수용 인원과 건물·레시피 해금을 결정합니다.
       </p>
-      <div className="rounded-lg bg-gray-50 px-4 py-3 text-sm dark:bg-gray-800">
+      <div className="card-nature px-4 py-3 text-sm">
         현재 수용 인원 <b>{state.cats.length}/{state.hall.capacity}마리</b>
       </div>
       {next ? (
-        <div className="rounded-xl border border-gray-200 p-4 dark:border-gray-700">
-          <h3 className="mb-2 font-semibold">
+        <div className="card-nature p-4">
+          <h3 className="font-jua mb-2 text-[16px] text-[#4a3418]">
             Lv{state.hall.level + 1} 증축 → 수용 {next.capacity}마리
           </h3>
-          <ul className="mb-3 space-y-1 text-sm text-gray-600 dark:text-gray-300">
+          <ul className="mb-3 space-y-1 text-sm text-[#6f5c39]">
             {Object.entries(next.cost).map(([key, amount]) => {
               const have = Math.floor(
                 state.resources[key as keyof typeof state.resources],
               );
               const ok = have >= (amount ?? 0);
               return (
-                <li key={key} className={ok ? "text-emerald-600 dark:text-emerald-400" : ""}>
+                <li key={key} className={ok ? "text-[#5c8a2a]" : ""}>
                   {ok ? "✓" : "·"} {RES_EMOJI[key]} {RES_LABEL[key]} {have}/{amount}
                 </li>
               );
@@ -309,7 +326,7 @@ function HallPanel({ state, onUpgrade }: { state: GameState; onUpgrade: () => vo
               const b = state.buildings.find((x) => x.type === req.type);
               const ok = Boolean(b && b.level >= (req.level ?? 1));
               return (
-                <li key={req.label} className={ok ? "text-emerald-600 dark:text-emerald-400" : ""}>
+                <li key={req.label} className={ok ? "text-[#5c8a2a]" : ""}>
                   {ok ? "✓" : "·"} {req.label}
                 </li>
               );
@@ -334,13 +351,13 @@ function HallPanel({ state, onUpgrade }: { state: GameState; onUpgrade: () => vo
             )}
           </ul>
           {next.locked ? (
-            <p className="rounded-lg bg-gray-100 px-3 py-2 text-xs text-gray-500 dark:bg-gray-800 dark:text-gray-400">
+            <p className="chip-nature px-3 py-2 text-xs">
               🔒 {next.locked}
             </p>
           ) : (
             <button
               onClick={onUpgrade}
-              className="w-full rounded-lg bg-emerald-600 py-2 text-sm font-semibold text-white hover:bg-emerald-700"
+              className="nature-btn w-full py-2 text-sm"
             >
               🏗️ 증축하기
             </button>
@@ -364,7 +381,7 @@ function ShopPanel({
 }) {
   return (
     <div className="space-y-3">
-      <p className="text-xs text-gray-400">
+      <p className="text-xs text-[#8a7551]">
         구매 후 마을의 원하는 타일을 클릭해 배치합니다. 비용은 배치 확정 시 차감돼요.
       </p>
       {BUILD_DEFS.map((def) => {
@@ -378,7 +395,7 @@ function ShopPanel({
         return (
           <div
             key={def.type}
-            className="flex items-center gap-3 rounded-xl border border-gray-200 p-3 dark:border-gray-700"
+            className="card-nature flex items-center gap-3 p-3"
           >
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
@@ -387,22 +404,22 @@ function ShopPanel({
               className={`h-12 w-12 shrink-0 object-contain ${built || !hallOk ? "opacity-40" : ""}`}
             />
             <div className="min-w-0 flex-1">
-              <div className="text-sm font-semibold">{def.name}</div>
-              <div className="text-xs text-gray-500 dark:text-gray-400">
+              <div className="font-jua text-[15px] text-[#3f2c14]">{def.name}</div>
+              <div className="font-num text-xs text-[#8a6316]">
                 {costEntries.map(([k, v]) => `${RES_EMOJI[k]} ${v}`).join(" + ")}
                 {def.reqHallLv > 1 && ` · 회관 Lv${def.reqHallLv}`}
               </div>
-              <div className="mt-0.5 line-clamp-2 text-[11px] text-gray-400">{def.desc}</div>
+              <div className="mt-0.5 line-clamp-2 text-[11px] text-[#8a7551]">{def.desc}</div>
             </div>
             {built ? (
-              <span className="shrink-0 rounded-lg bg-gray-100 px-3 py-1.5 text-xs text-gray-400 dark:bg-gray-800">
+              <span className="chip-nature shrink-0 px-3 py-1.5 text-xs">
                 보유 중
               </span>
             ) : (
               <button
                 onClick={() => onBuy(def)}
                 disabled={!hallOk || !affordable}
-                className="shrink-0 rounded-lg bg-amber-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-amber-700 disabled:cursor-not-allowed disabled:opacity-40"
+                className="amber-btn shrink-0 px-3.5 py-1.5 text-xs disabled:cursor-not-allowed disabled:opacity-40"
               >
                 {!hallOk ? `회관 Lv${def.reqHallLv}` : !affordable ? "자원 부족" : "구매"}
               </button>
@@ -455,7 +472,7 @@ function BuildingPanel({
   return (
     <div className="space-y-5">
       {/* 정보 */}
-      <div className="rounded-lg bg-gray-50 px-4 py-3 text-sm leading-relaxed dark:bg-gray-800">
+      <div className="card-nature px-4 py-3 text-sm leading-relaxed">
         <div className="flex items-center justify-between">
           <span>
             필요 적성: <b>{APTITUDE_LABEL[building.aptitude]}</b> · 슬롯{" "}
@@ -464,7 +481,7 @@ function BuildingPanel({
           <button
             onClick={onMove}
             title="건물 위치 옮기기"
-            className="shrink-0 rounded-lg bg-gray-200 px-2.5 py-1 text-xs font-semibold text-gray-600 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+            className="wood-plank shrink-0 px-2.5 py-1 text-xs hover:brightness-110"
           >
             📍 이동
           </button>
@@ -479,9 +496,9 @@ function BuildingPanel({
               → 포만도 +{recipe.fullness})
             </div>
             <div>요리 속도 {totalRate.toFixed(2)}/초</div>
-            <div className="mt-1 h-1.5 w-full overflow-hidden rounded bg-gray-200 dark:bg-gray-700">
+            <div className="bar-track mt-1 h-2 w-full">
               <div
-                className="h-full bg-amber-400"
+                className="bar-fill-amber"
                 style={{
                   width: `${Math.min(100, ((building.progress ?? 0) / recipe.work) * 100)}%`,
                 }}
@@ -496,18 +513,18 @@ function BuildingPanel({
       {/* 산출/선반 */}
       {isKitchen ? (
         <>
-          <div className="rounded-lg bg-amber-50 px-4 py-2.5 text-center text-sm font-semibold text-amber-700 dark:bg-amber-950 dark:text-amber-300">
+          <div className="card-nature px-4 py-2.5 text-center text-sm font-semibold text-[#8a6316]">
             {recipe.emoji} 선반 {stored}/{mealCap(building.level)} — 배고픈 고양이가 자동으로 먹습니다
           </div>
           {building.level < 2 && (
-            <div className="rounded-xl border border-gray-200 p-3 text-sm dark:border-gray-700">
-              <div className="mb-1 font-semibold">⬆️ 부엌 Lv2 증축</div>
-              <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">
+            <div className="card-nature p-3 text-sm">
+              <div className="font-jua mb-1 text-[15px] text-[#3f2c14]">⬆️ 부엌 Lv2 증축</div>
+              <p className="mb-2 text-xs text-[#6f5c39]">
                 선반 15칸으로 확장 · 회관 Lv3 달성 시 🐟 훈제 생선 해금
               </p>
               <button
                 onClick={onUpgradeKitchen}
-                className="w-full rounded-lg bg-emerald-600 py-2 text-xs font-semibold text-white hover:bg-emerald-700"
+                className="nature-btn w-full py-2 text-xs"
               >
                 {Object.entries(KITCHEN_UPGRADE_COST)
                   .map(([k, v]) => `${RES_EMOJI[k]} ${v}`)
@@ -522,7 +539,7 @@ function BuildingPanel({
               (r) => r.reqHallLv > state.hall.level || r.reqKitchenLv > kitchenLv,
             );
             return lockedRecipe ? (
-              <p className="text-xs text-gray-400">
+              <p className="text-xs text-[#8a7551]">
                 🔒 {lockedRecipe.emoji} {lockedRecipe.name} — 회관 Lv
                 {lockedRecipe.reqHallLv} · 부엌 Lv{lockedRecipe.reqKitchenLv} 해금
               </p>
@@ -533,7 +550,7 @@ function BuildingPanel({
         <button
           onClick={onCollect}
           disabled={stored <= 0}
-          className="w-full rounded-lg bg-sky-500 py-2.5 text-sm font-semibold text-white hover:bg-sky-600 disabled:cursor-not-allowed disabled:opacity-40"
+          className="amber-btn w-full py-2.5 text-sm disabled:cursor-not-allowed disabled:opacity-40"
         >
           {building.resource === "fish" ? "🐟" : "🪵"} {stored}개 회수
         </button>
@@ -541,11 +558,11 @@ function BuildingPanel({
 
       {/* 배치된 고양이 */}
       <section>
-        <h3 className="mb-2 text-sm font-bold text-gray-500 dark:text-gray-400">
+        <h3 className="font-jua mb-2 text-sm text-[#8a7551]">
           일하는 중 ({assignedCats.length}/{building.maxSlots})
         </h3>
         {assignedCats.length === 0 && (
-          <p className="text-xs text-gray-400">아직 아무도 없어요</p>
+          <p className="text-xs text-[#8a7551]">아직 아무도 없어요</p>
         )}
         <div className="space-y-2">
           {assignedCats.map((cat) => (
@@ -562,11 +579,11 @@ function BuildingPanel({
 
       {/* 배치 가능한 고양이 */}
       <section>
-        <h3 className="mb-2 text-sm font-bold text-gray-500 dark:text-gray-400">
+        <h3 className="font-jua mb-2 text-sm text-[#8a7551]">
           배치 가능한 고양이
         </h3>
         {candidates.length === 0 && (
-          <p className="text-xs text-gray-400">
+          <p className="text-xs text-[#8a7551]">
             {APTITUDE_LABEL[building.aptitude]} 적성이 있는 고양이가 없어요
           </p>
         )}
@@ -590,7 +607,7 @@ function BuildingPanel({
           })}
         </div>
         {slotsLeft <= 0 && candidates.length > 0 && (
-          <p className="mt-2 text-xs text-amber-600 dark:text-amber-400">
+          <p className="mt-2 text-xs text-[#8a6316]">
             슬롯이 가득 찼어요 — 먼저 해제하거나 건물을 증축하세요
           </p>
         )}
@@ -617,7 +634,8 @@ function CatRow({
   };
 }) {
   return (
-    <div className="flex items-center gap-3 rounded-xl border border-gray-200 px-3 py-2 dark:border-gray-700">
+    <div className="card-nature flex items-center gap-3 px-3 py-2">
+      <span className="card-accent" />
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         src={catSprite(cat.breed, "idle")}
@@ -625,26 +643,26 @@ function CatRow({
         className="h-10 w-10 shrink-0 object-contain"
       />
       <div className="min-w-0 flex-1">
-        <div className="truncate text-sm font-semibold">
+        <div className="font-jua truncate text-sm text-[#3f2c14]">
           {cat.name}{" "}
-          <span className="text-xs font-normal text-gray-400">Lv{cat.level}</span>
+          <span className="font-num text-xs text-[#8a7551]">Lv{cat.level}</span>
         </div>
-        <div className="text-xs text-gray-500 dark:text-gray-400">
+        <div className="text-xs text-[#6f5c39]">
           {APTITUDE_LABEL[aptitude]} {cat.aptitude[aptitude]} ·{" "}
           {effectiveRate(cat, aptitude).toFixed(2)}/초
           {fullnessPenalty(cat) < 1 && (
-            <span className="ml-1 text-red-500">배고픔</span>
+            <span className="ml-1 text-[#b0472a]">배고픔</span>
           )}
         </div>
-        {tag && <div className="text-[11px] text-gray-400">{tag}</div>}
+        {tag && <div className="text-[11px] text-[#a3906c]">{tag}</div>}
       </div>
       <button
         onClick={action.onClick}
         disabled={action.disabled}
-        className={`shrink-0 rounded-lg px-3 py-1.5 text-xs font-semibold disabled:cursor-not-allowed disabled:opacity-40 ${
+        className={`shrink-0 px-3 py-1.5 text-xs disabled:cursor-not-allowed disabled:opacity-40 ${
           action.style === "primary"
-            ? "bg-orange-500 text-white hover:bg-orange-600"
-            : "bg-gray-100 text-gray-600 hover:bg-red-100 hover:text-red-600 dark:bg-gray-800 dark:text-gray-300"
+            ? "nature-btn"
+            : "wood-plank hover:brightness-110"
         }`}
       >
         {action.label}
@@ -696,9 +714,10 @@ function CatCard({
   const cap = BREEDS.find((b) => b.key === cat.breed)?.aptitudeCap ?? 5;
 
   return (
-    <div className="rounded-xl border border-gray-200 p-4 dark:border-gray-700">
+    <div className="card-nature p-4">
+      <span className="card-accent" />
       <div className="mb-1 flex items-center justify-between">
-        <span className="flex items-center gap-1.5 font-semibold">
+        <span className="font-jua flex items-center gap-1.5 text-[16px] text-[#3f2c14]">
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={catSprite(cat.breed, "idle")}
@@ -706,14 +725,14 @@ function CatCard({
             className="h-7 w-7 object-contain"
           />
           {cat.name}{" "}
-          <span className="text-xs font-normal text-gray-400">Lv{cat.level}</span>
+          <span className="font-num text-xs text-[#8a7551]">Lv{cat.level}</span>
         </span>
-        <span className="text-xs text-gray-400">{cat.breedName}</span>
+        <span className="text-xs text-[#a3906c]">{cat.breedName}</span>
       </div>
 
-      <div className="mb-2 h-1.5 w-full overflow-hidden rounded bg-gray-100 dark:bg-gray-800">
+      <div className="bar-track mb-2 h-1.5 w-full">
         <div
-          className="h-full bg-orange-400"
+          className="bar-fill-amber"
           style={{ width: `${Math.min(100, (cat.exp / expNeeded) * 100)}%` }}
         />
       </div>
@@ -724,14 +743,14 @@ function CatCard({
           .map((k) => (
             <span
               key={k}
-              className="flex items-center gap-0.5 rounded bg-sky-50 px-1.5 py-0.5 text-[11px] text-sky-700 dark:bg-sky-950 dark:text-sky-300"
+              className="chip-nature flex items-center gap-0.5 px-1.5 py-0.5 text-[11px]"
             >
               {APTITUDE_LABEL[k]} {cat.aptitude[k]}
               {cat.aptitudePoints > 0 && cat.aptitude[k] < cap && (
                 <button
                   onClick={() => onInvest(cat.id, k)}
                   title="적성 포인트 투자"
-                  className="ml-0.5 rounded bg-sky-600 px-1 text-[10px] font-bold text-white hover:bg-sky-700"
+                  className="ml-0.5 rounded bg-[#5d8f22] px-1 text-[10px] font-bold text-white hover:bg-[#4f8420]"
                 >
                   +
                 </button>
@@ -739,29 +758,27 @@ function CatCard({
             </span>
           ))}
       </div>
-      <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+      <p className="mt-1 text-xs text-[#6f5c39]">
         💪 근면 {cat.stats.diligence}
         {cat.aptitudePoints > 0 && (
-          <span className="ml-2 rounded bg-orange-100 px-1.5 py-0.5 text-[11px] font-semibold text-orange-600 dark:bg-orange-950 dark:text-orange-300">
+          <span className="ml-2 rounded-full bg-[rgba(214,164,60,.2)] px-2 py-0.5 text-[11px] font-semibold text-[#8a6316]">
             ✨ 적성 포인트 {cat.aptitudePoints}
           </span>
         )}
       </p>
 
       <div className="mt-2 flex items-center gap-2">
-        <div className="h-1.5 flex-1 overflow-hidden rounded bg-gray-100 dark:bg-gray-800">
+        <div className="bar-track h-2 flex-1">
           <div
-            className={`h-full ${
-              cat.status.fullness < 25 ? "bg-red-400" : "bg-emerald-400"
-            }`}
+            className={cat.status.fullness < 25 ? "bar-fill-red" : "bar-fill-green"}
             style={{ width: `${cat.status.fullness}%` }}
           />
         </div>
-        <span className="text-[11px] text-gray-400">
+        <span className="font-num text-[11px] text-[#8a7a58]">
           🍽️ {Math.floor(cat.status.fullness)} (식욕 {cat.stats.appetite})
         </span>
         {fullnessPenalty(cat) < 1 && (
-          <span className="rounded bg-red-50 px-1.5 py-0.5 text-[11px] text-red-600 dark:bg-red-950 dark:text-red-300">
+          <span className="rounded-full bg-[rgba(214,106,74,.16)] px-2 py-0.5 text-[11px] text-[#b0472a]">
             배고픔
           </span>
         )}
@@ -777,11 +794,11 @@ function CatCard({
 
       <p className="mt-2 text-xs">
         {workplace ? (
-          <span className="text-sky-600 dark:text-sky-400">
+          <span className="text-[#5c8a2a]">
             {workplace.emoji} {workplace.name}에서 일하는 중
           </span>
         ) : (
-          <span className="text-gray-400">쉬는 중</span>
+          <span className="text-[#a3906c]">쉬는 중</span>
         )}
       </p>
     </div>
@@ -805,14 +822,15 @@ function AdoptModal({
       onClick={onClose}
     >
       <div
-        className="max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-2xl bg-white p-6 shadow-2xl dark:bg-gray-900"
+        className="panel-wood max-h-[90vh] w-full max-w-3xl overflow-hidden p-2.5"
         onClick={(e) => e.stopPropagation()}
       >
+        <div className="panel-paper max-h-[calc(90vh-20px)] overflow-y-auto p-5">
         <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-xl font-bold">😻 입양할 고양이를 선택하세요</h2>
+          <h2 className="font-jua text-xl text-[#4a3418]">😻 입양할 고양이를 선택하세요</h2>
           <button
             onClick={onClose}
-            className="rounded-lg px-3 py-1 text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+            className="grid h-8 w-8 place-items-center rounded-full bg-linear-to-b from-[#e8d6ae] to-[#cdb488] text-sm text-[#6b4a20] shadow hover:brightness-105"
           >
             ✕
           </button>
@@ -826,7 +844,7 @@ function AdoptModal({
             return (
               <div
                 key={cat.id}
-                className="flex flex-col rounded-xl border border-gray-200 p-4 dark:border-gray-700"
+                className="card-nature flex flex-col p-4"
               >
                 <div className="mb-2 text-center">
                   {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -835,8 +853,8 @@ function AdoptModal({
                     alt={cat.name}
                     className="mx-auto h-20 w-auto object-contain drop-shadow-sm"
                   />
-                  <div className="mt-1 font-bold">{cat.name}</div>
-                  <div className="text-xs text-gray-400">
+                  <div className="font-jua mt-1 text-[17px] text-[#3f2c14]">{cat.name}</div>
+                  <div className="text-xs text-[#a3906c]">
                     {cat.breedName}{" "}
                     <span className="text-amber-400">
                       {"★".repeat(breed?.rarity ?? 1)}
@@ -844,7 +862,7 @@ function AdoptModal({
                   </div>
                 </div>
 
-                <div className="mb-2 rounded-lg bg-gray-50 px-3 py-2 text-xs leading-relaxed dark:bg-gray-800">
+                <div className="chip-nature mb-2 px-3 py-2 text-xs leading-relaxed">
                   💪 근면 {cat.stats.diligence} · ❤️ 체력 {cat.stats.stamina} · 🍽️
                   식욕 {cat.stats.appetite}
                 </div>
@@ -854,13 +872,13 @@ function AdoptModal({
                     aptitudes.map((k) => (
                       <span
                         key={k}
-                        className="rounded bg-sky-50 px-1.5 py-0.5 text-[11px] text-sky-700 dark:bg-sky-950 dark:text-sky-300"
+                        className="chip-nature px-1.5 py-0.5 text-[11px]"
                       >
                         {APTITUDE_LABEL[k]} {cat.aptitude[k]}
                       </span>
                     ))
                   ) : (
-                    <span className="text-[11px] text-gray-400">적성 없음…</span>
+                    <span className="text-[11px] text-[#a3906c]">적성 없음…</span>
                   )}
                 </div>
 
@@ -868,13 +886,13 @@ function AdoptModal({
                   {cat.passives.length > 0 ? (
                     cat.passives.map((key) => <PassiveBadge key={key} passiveKey={key} />)
                   ) : (
-                    <span className="text-[11px] text-gray-400">패시브 없음</span>
+                    <span className="text-[11px] text-[#a3906c]">패시브 없음</span>
                   )}
                 </div>
 
                 <button
                   onClick={() => onPick(cat)}
-                  className="mt-auto rounded-lg bg-orange-500 py-2 text-sm font-semibold text-white hover:bg-orange-600"
+                  className="nature-btn mt-auto py-2 text-sm"
                 >
                   이 아이로 할래요
                 </button>
@@ -882,9 +900,10 @@ function AdoptModal({
             );
           })}
         </div>
-        <p className="mt-4 text-center text-xs text-gray-400">
+        <p className="mt-4 text-center text-xs text-[#8a7551]">
           한 마리만 선택할 수 있어요 · 패시브에 마우스를 올리면 상세 정보가 보입니다
         </p>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/game/VillageView.tsx b/src/components/game/VillageView.tsx
index 6dfcfcb..03328db 100644
--- a/src/components/game/VillageView.tsx
+++ b/src/components/game/VillageView.tsx
@@ -210,6 +210,52 @@ export default function VillageView({
     let raf = 0;
     let last = performance.now();
 
+    // next/font가 생성한 실제 폰트 패밀리명 (캔버스 텍스트용)
+    const juaFamily =
+      getComputedStyle(document.documentElement)
+        .getPropertyValue("--font-jua")
+        .trim() || "sans-serif";
+
+    // 나무 판자 배지 그리기 (자원 카운트)
+    const drawPlankBadge = (cx: number, cy: number, label: string) => {
+      ctx.font = `bold 13px ${juaFamily}`;
+      const w = ctx.measureText(label).width + 18;
+      const h = 22;
+      const x0 = cx - w / 2;
+      const y0 = cy - h;
+      const grad = ctx.createLinearGradient(0, y0, 0, y0 + h);
+      grad.addColorStop(0, "#a97640");
+      grad.addColorStop(0.55, "#7d4e24");
+      grad.addColorStop(1, "#5f3a19");
+      ctx.beginPath();
+      ctx.roundRect(x0, y0, w, h, [11, 4, 11, 4]);
+      ctx.fillStyle = grad;
+      ctx.fill();
+      ctx.strokeStyle = "rgba(44,26,8,0.75)";
+      ctx.stroke();
+      // 상단 하이라이트·하단 초록 글로우
+      ctx.beginPath();
+      ctx.moveTo(x0 + 4, y0 + 2);
+      ctx.lineTo(x0 + w - 4, y0 + 2);
+      ctx.strokeStyle = "rgba(255,238,200,0.35)";
+      ctx.stroke();
+      const glow = ctx.createLinearGradient(x0, 0, x0 + w, 0);
+      glow.addColorStop(0, "rgba(126,181,57,0)");
+      glow.addColorStop(0.5, "rgba(126,181,57,0.75)");
+      glow.addColorStop(1, "rgba(126,181,57,0)");
+      ctx.beginPath();
+      ctx.moveTo(x0 + 5, y0 + h - 2.5);
+      ctx.lineTo(x0 + w - 5, y0 + h - 2.5);
+      ctx.strokeStyle = glow;
+      ctx.lineWidth = 2;
+      ctx.stroke();
+      ctx.lineWidth = 1;
+      // 텍스트
+      ctx.fillStyle = "#fbf1d9";
+      ctx.textAlign = "center";
+      ctx.fillText(label, cx, y0 + 16);
+    };
+
     const draw = (now: number) => {
       const dt = Math.min((now - last) / 1000, 0.1);
       last = now;
@@ -468,9 +514,13 @@ export default function VillageView({
           draw: () => {
             shadow(x, y + 6, 26);
             drawEmoji("🏛️", x, y + 8, 48);
-            ctx.font = "bold 12px sans-serif";
+            ctx.font = `13px ${juaFamily}`;
             ctx.textAlign = "center";
-            ctx.fillStyle = "#374151";
+            ctx.strokeStyle = "rgba(255,252,238,0.75)";
+            ctx.lineWidth = 3;
+            ctx.strokeText(`마을 회관 Lv${state.hall.level}`, x, y + 24);
+            ctx.lineWidth = 1;
+            ctx.fillStyle = "#4a3418";
             ctx.fillText(`마을 회관 Lv${state.hall.level}`, x, y + 24);
           },
         });
@@ -503,20 +553,17 @@ export default function VillageView({
             } else {
               drawEmoji(b.emoji, x, y + 8, 42);
             }
-            ctx.font = "bold 12px sans-serif";
+            ctx.font = `13px ${juaFamily}`;
             ctx.textAlign = "center";
-            ctx.fillStyle = "#374151";
+            ctx.strokeStyle = "rgba(255,252,238,0.75)";
+            ctx.lineWidth = 3;
+            ctx.strokeText(b.name, x, y + 24);
+            ctx.lineWidth = 1;
+            ctx.fillStyle = "#4a3418";
             ctx.fillText(b.name, x, y + 24);
             if (stored > 0) {
-              const label = `${isKitchen ? "🍖" : RES_EMOJI[b.resource ?? "fish"]}${stored}`;
-              ctx.font = "bold 12px sans-serif";
-              const w = ctx.measureText(label).width + 12;
-              ctx.beginPath();
-              ctx.roundRect(x - w / 2, y - 58, w, 20, 10);
-              ctx.fillStyle = "#f97316";
-              ctx.fill();
-              ctx.fillStyle = "#fff";
-              ctx.fillText(label, x, y - 43);
+              const label = `${isKitchen ? "🍖" : RES_EMOJI[b.resource ?? "fish"]} ${stored}`;
+              drawPlankBadge(x, y - 40, label);
             }
           },
         });
@@ -569,9 +616,13 @@ export default function VillageView({
             } else {
               drawEmoji(cat.emoji, anim.x, anim.y + bob, 30, anim.flip);
             }
-            ctx.font = "10px sans-serif";
+            ctx.font = `10px ${juaFamily}`;
             ctx.textAlign = "center";
-            ctx.fillStyle = "rgba(55,65,81,0.85)";
+            ctx.strokeStyle = "rgba(255,252,238,0.7)";
+            ctx.lineWidth = 2.5;
+            ctx.strokeText(cat.name, anim.x, anim.y + 14);
+            ctx.lineWidth = 1;
+            ctx.fillStyle = "rgba(74,52,24,0.9)";
             ctx.fillText(cat.name, anim.x, anim.y + 14);
             if (working) drawEmoji("💦", anim.x + 14, anim.y - 30 + bob, 11);
           },