From 0f5a5a96c4f4637117d63a25fead46aa1fcdb943 Mon Sep 17 00:00:00 2001
From: chpark <chpark@wace.me>
Date: Thu, 30 Apr 2026 22:26:41 +0900
Subject: [PATCH] =?UTF-8?q?Revert=20"feat:=20=EC=82=AC=EC=9D=B4=ED=8A=B8?=
 =?UTF-8?q?=20=EC=A0=84=EB=A9=B4=20=EB=8B=A4=ED=81=AC=20=EB=A6=AC=EB=89=B4?=
 =?UTF-8?q?=EC=96=BC=20(invyone=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B8=EB=B3=B4=EC=9A=B0=20=EA=B7=B8=EB=9D=BC=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98)"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit eb28c6a719b678321b21b3cecd7823aa1b685ce0.
---
 apps/web/src/app/auth-buttons.tsx |  15 +-
 apps/web/src/app/globals.css      | 594 ++----------------------
 apps/web/src/app/layout.tsx       | 126 ++---
 apps/web/src/app/page.tsx         | 733 +++++++++++-------------------
 4 files changed, 369 insertions(+), 1099 deletions(-)

diff --git a/apps/web/src/app/auth-buttons.tsx b/apps/web/src/app/auth-buttons.tsx
index cdfab9d..b52dfa5 100644
--- a/apps/web/src/app/auth-buttons.tsx
+++ b/apps/web/src/app/auth-buttons.tsx
@@ -29,18 +29,13 @@ export function AuthButtons({ session }: AuthButtonsProps) {
       <div className="flex items-center gap-2">
         <Link
           href="/auth/login"
-          className="text-sm font-medium text-cloud-2 hover:text-cloud-0 transition-colors"
+          className="text-sm text-ink-light hover:text-warm-600 transition-colors"
         >
           로그인
         </Link>
         <Link
           href="/auth/register"
-          className="rounded-full px-4 py-1.5 text-sm font-semibold text-white transition-transform hover:-translate-y-0.5"
-          style={{
-            background:
-              'linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%)',
-            boxShadow: '0 6px 20px -6px rgba(168, 85, 247, 0.55)',
-          }}
+          className="rounded-full bg-ink px-4 py-1.5 text-sm text-warm-50 hover:bg-warm-800 transition-colors"
         >
           회원가입
         </Link>
@@ -50,15 +45,15 @@ export function AuthButtons({ session }: AuthButtonsProps) {
 
   return (
     <div className="flex items-center gap-3">
-      <span className="text-sm text-cloud-2">
+      <span className="text-sm text-ink-light">
         {session.user.name}
-        <span className="ml-1.5 font-mono text-[10px] text-cloud-4">
+        <span className="ml-1 text-xs text-ink-muted">
           ({ROLE_LABELS[session.user.primaryRole] || session.user.primaryRole})
         </span>
       </span>
       <button
         onClick={() => signOut({ callbackUrl: '/' })}
-        className="rounded-full border border-white/10 px-3 py-1.5 text-sm text-cloud-2 transition-colors hover:border-white/25 hover:bg-white/[0.05] hover:text-cloud-0"
+        className="rounded-full px-3 py-1.5 text-sm text-ink-light hover:bg-warm-100 transition-colors"
       >
         로그아웃
       </button>
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 1d767e2..bdf0146 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -1,14 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+KR:wght@300;400;500;700;900&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap');
 @import "tailwindcss";
 
 @theme {
-  /* Typography */
-  --font-body: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
-  --font-display: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
-  --font-serif: 'Instrument Serif', Georgia, serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
-
-  /* Legacy warm palette — still referenced on sub-pages (blog, stores, about, etc.) */
+  --font-display: 'Playfair Display', Georgia, serif;
+  --font-body: 'Noto Sans KR', sans-serif;
   --color-warm-50: #fefcf9;
   --color-warm-100: #fdf6ec;
   --color-warm-200: #f9e8cf;
@@ -24,204 +19,58 @@
   --color-ink-muted: #8a7e72;
   --color-sage-500: #6b8f71;
   --color-sage-600: #527a58;
-
-  /* invyone-inspired dark foundation */
-  --color-night-0: #05050f;
-  --color-night-1: #0a0a18;
-  --color-night-2: #10101f;
-  --color-night-3: #1a1a2e;
-  --color-night-4: #252540;
-  --color-night-5: #353848;
-  --color-cloud-0: #ffffff;
-  --color-cloud-1: rgba(255, 255, 255, 0.92);
-  --color-cloud-2: rgba(255, 255, 255, 0.68);
-  --color-cloud-3: rgba(255, 255, 255, 0.48);
-  --color-cloud-4: rgba(255, 255, 255, 0.28);
-
-  /* Rainbow accent palette */
-  --color-iris: #6366f1;
-  --color-iris-light: #818cf8;
-  --color-violet: #a855f7;
-  --color-violet-light: #c084fc;
-  --color-rose: #ec4899;
-  --color-rose-light: #f472b6;
-  --color-tangerine: #f97316;
-  --color-tangerine-light: #fb923c;
-  --color-azure: #60a5fa;
-  --color-lime: #22c55e;
-  --color-lime-light: #34d399;
-  --color-amber: #fbbf24;
 }
 
-/* -----------------------------------------------------------------
- * Global body defaults
- * ----------------------------------------------------------------- */
-html {
-  background: #05050f;
-}
-body {
-  background: #05050f;
-  color: rgba(255, 255, 255, 0.92);
-  font-feature-settings: "cv11", "ss01";
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-::selection {
-  background: rgba(168, 85, 247, 0.35);
-  color: #ffffff;
-}
-
-/* -----------------------------------------------------------------
- * Keyframes
- * ----------------------------------------------------------------- */
+/* Staggered fade-in-up animation */
 @keyframes fade-up {
-  from { opacity: 0; transform: translateY(32px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(32px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
+
 @keyframes fade-in {
   from { opacity: 0; }
-  to   { opacity: 1; }
+  to { opacity: 1; }
 }
+
 @keyframes slide-in-right {
-  from { opacity: 0; transform: translateX(24px); }
-  to   { opacity: 1; transform: translateX(0); }
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
+
 @keyframes mesh-float {
   0%, 100% { transform: translate(0, 0) scale(1); }
-  33%      { transform: translate(40px, -30px) scale(1.08); }
-  66%      { transform: translate(-30px, 20px) scale(0.92); }
-}
-@keyframes shimmer {
-  0%   { background-position: 0% 50%; }
-  100% { background-position: 200% 50%; }
-}
-@keyframes gradient-pan {
-  0%, 100% { background-position: 0% 50%; }
-  50%      { background-position: 100% 50%; }
-}
-@keyframes pulse-glow {
-  0%, 100% { opacity: 0.55; transform: scale(1); }
-  50%      { opacity: 0.95; transform: scale(1.07); }
-}
-@keyframes marquee {
-  0%   { transform: translateX(0); }
-  100% { transform: translateX(-50%); }
-}
-@keyframes spin-slow {
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
-}
-@keyframes grid-drift {
-  0%   { background-position: 0 0; }
-  100% { background-position: 48px 48px; }
+  33% { transform: translate(30px, -20px) scale(1.05); }
+  66% { transform: translate(-20px, 15px) scale(0.95); }
 }
 
-/* Reveal-on-load with stagger */
-.reveal    { opacity: 0; transform: translateY(24px); animation: fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
-.reveal.d1 { animation-delay: 0.08s; }
-.reveal.d2 { animation-delay: 0.18s; }
-.reveal.d3 { animation-delay: 0.28s; }
-.reveal.d4 { animation-delay: 0.4s; }
-.reveal.d5 { animation-delay: 0.55s; }
-.reveal.d6 { animation-delay: 0.7s; }
-.reveal.d7 { animation-delay: 0.85s; }
-
-.animate-fade-up     { animation: fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; opacity: 0; }
-.animate-fade-in     { animation: fade-in 0.7s ease forwards; opacity: 0; }
-.animate-slide-right { animation: slide-in-right 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; opacity: 0; }
-.animate-spin-slow   { animation: spin-slow 30s linear infinite; }
-
-/* -----------------------------------------------------------------
- * Gradient / text utilities
- * ----------------------------------------------------------------- */
-.text-grad-primary {
-  background: linear-gradient(135deg, #6366f1 0%, #a855f7 40%, #ec4899 70%, #f97316 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-}
-.text-grad-subtle {
-  background: linear-gradient(120deg, #818cf8 0%, #c084fc 30%, #f472b6 60%, #fb923c 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-}
-.text-grad-rainbow {
-  background: linear-gradient(120deg, #60a5fa, #c084fc, #f472b6, #fb923c, #fbbf24, #34d399, #60a5fa);
-  background-size: 200% auto;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-  animation: shimmer 8s linear infinite;
-}
-.text-grad-iris {
-  background: linear-gradient(135deg, #818cf8 0%, #6366f1 50%, #4f46e5 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-}
-.text-grad-rose {
-  background: linear-gradient(135deg, #f472b6 0%, #ec4899 50%, #db2777 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-}
-.text-grad-tangerine {
-  background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #ea580c 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  color: transparent;
+.animate-fade-up {
+  animation: fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  opacity: 0;
 }
 
-/* -----------------------------------------------------------------
- * Backgrounds / patterns
- * ----------------------------------------------------------------- */
-.bg-grid {
-  background-image:
-    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
-  background-size: 48px 48px;
-}
-.bg-grid-animated {
-  background-image:
-    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
-  background-size: 48px 48px;
-  animation: grid-drift 20s linear infinite;
-}
-.bg-dot {
-  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
-  background-size: 24px 24px;
-}
-.bg-radial-fade {
-  background: radial-gradient(ellipse at center, transparent 0%, #05050f 75%);
+.animate-fade-in {
+  animation: fade-in 0.6s ease forwards;
+  opacity: 0;
 }
 
-/* Glow orbs */
-.orb {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(80px);
-  opacity: 0.55;
-  pointer-events: none;
-  animation: mesh-float 18s ease-in-out infinite, pulse-glow 9s ease-in-out infinite;
+.animate-slide-right {
+  animation: slide-in-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  opacity: 0;
 }
-.orb-iris     { background: radial-gradient(circle, #6366f1 0%, transparent 70%); }
-.orb-violet   { background: radial-gradient(circle, #a855f7 0%, transparent 70%); }
-.orb-rose     { background: radial-gradient(circle, #ec4899 0%, transparent 70%); }
-.orb-tangerine{ background: radial-gradient(circle, #f97316 0%, transparent 70%); }
-.orb-azure    { background: radial-gradient(circle, #60a5fa 0%, transparent 70%); }
-.orb-lime     { background: radial-gradient(circle, #34d399 0%, transparent 70%); }
 
-/* Legacy mesh-blob preserved for other pages */
+/* Gradient mesh blobs */
 .mesh-blob {
   position: absolute;
   border-radius: 50%;
@@ -230,114 +79,16 @@ body {
   pointer-events: none;
 }
 
-/* -----------------------------------------------------------------
- * Glass / gradient-border cards
- * ----------------------------------------------------------------- */
-.glass-dark {
-  background: rgba(16, 16, 31, 0.6);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-.glass-darker {
-  background: rgba(10, 10, 24, 0.72);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.grad-border {
-  position: relative;
-  background: rgba(16, 16, 31, 0.65);
-  border-radius: 20px;
-  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
-              background 0.4s ease;
-}
-.grad-border::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  padding: 1px;
-  border-radius: inherit;
-  background: linear-gradient(135deg,
-    rgba(99, 102, 241, 0.5) 0%,
-    rgba(168, 85, 247, 0.35) 35%,
-    rgba(236, 72, 153, 0.25) 65%,
-    rgba(249, 115, 22, 0.18) 100%);
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  pointer-events: none;
-  transition: opacity 0.4s ease;
-}
-.grad-border:hover {
-  transform: translateY(-6px);
-  background: rgba(24, 24, 48, 0.8);
-}
-.grad-border:hover::before {
-  background: linear-gradient(135deg,
-    rgba(99, 102, 241, 0.9) 0%,
-    rgba(168, 85, 247, 0.75) 35%,
-    rgba(236, 72, 153, 0.6) 65%,
-    rgba(249, 115, 22, 0.45) 100%);
-}
-
-/* -----------------------------------------------------------------
- * Buttons
- * ----------------------------------------------------------------- */
-.btn-grad {
-  position: relative;
-  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
-  color: white;
-  border-radius: 999px;
-  padding: 14px 28px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  box-shadow: 0 10px 32px -8px rgba(168, 85, 247, 0.55),
-              0 0 0 1px rgba(255, 255, 255, 0.08) inset;
-  transition: transform 0.25s ease, box-shadow 0.25s ease;
-}
-.btn-grad:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 16px 40px -8px rgba(168, 85, 247, 0.7),
-              0 0 0 1px rgba(255, 255, 255, 0.14) inset;
-}
-.btn-ghost {
-  background: rgba(255, 255, 255, 0.04);
-  color: rgba(255, 255, 255, 0.92);
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  border-radius: 999px;
-  padding: 14px 28px;
-  font-weight: 600;
-  backdrop-filter: blur(10px);
-  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
-}
-.btn-ghost:hover {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.28);
-  transform: translateY(-2px);
-}
-
-/* -----------------------------------------------------------------
- * Card lift (legacy + dark variant)
- * ----------------------------------------------------------------- */
+/* Card hover lift */
 .card-lift {
-  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
-              box-shadow 0.4s ease,
-              background 0.3s ease;
+  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
 }
 .card-lift:hover {
   transform: translateY(-6px);
+  box-shadow: 0 20px 60px -12px rgba(26, 20, 16, 0.15);
 }
 
-/* -----------------------------------------------------------------
- * Link underline (legacy)
- * ----------------------------------------------------------------- */
+/* Link underline animation */
 .link-underline {
   position: relative;
   display: inline-block;
@@ -355,268 +106,3 @@ body {
 .link-underline:hover::after {
   width: 100%;
 }
-
-/* Gradient underline for dark theme */
-.link-grad {
-  position: relative;
-  display: inline-block;
-}
-.link-grad::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  bottom: -3px;
-  width: 0;
-  height: 2px;
-  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #f97316);
-  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
-}
-.link-grad:hover::after {
-  width: 100%;
-}
-
-/* -----------------------------------------------------------------
- * Marquee
- * ----------------------------------------------------------------- */
-.marquee-track {
-  display: flex;
-  gap: 3rem;
-  animation: marquee 40s linear infinite;
-  white-space: nowrap;
-  width: max-content;
-}
-.marquee-mask {
-  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
-  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
-}
-
-/* -----------------------------------------------------------------
- * Conic/orbit decorative ring
- * ----------------------------------------------------------------- */
-.conic-ring {
-  background: conic-gradient(
-    from 0deg,
-    #6366f1 0deg,
-    #a855f7 90deg,
-    #ec4899 180deg,
-    #f97316 270deg,
-    #6366f1 360deg
-  );
-  filter: blur(2px);
-}
-
-/* Reduce motion preference */
-@media (prefers-reduced-motion: reduce) {
-  .reveal,
-  .animate-fade-up,
-  .animate-fade-in,
-  .animate-slide-right,
-  .animate-spin-slow,
-  .orb,
-  .mesh-blob,
-  .bg-grid-animated,
-  .text-grad-rainbow,
-  .marquee-track {
-    animation: none !important;
-    opacity: 1 !important;
-    transform: none !important;
-  }
-}
-
-/* =================================================================
- * SITE-WIDE DARK THEME OVERRIDES
- * Legacy pages (stores/blog/about/auth/faq/contact/admin/etc.)
- * use warm-*/ink/white color classes. Remap them to dark equivalents
- * here so every page inherits the new look without touching code.
- * ================================================================= */
-
-/* --- Page / section backgrounds (warm-50, warm-100) --- */
-.bg-warm-50         { background-color: #05050f !important; }
-.bg-warm-50\/50     { background-color: rgba(5, 5, 15, 0.6) !important; }
-.bg-warm-50\/60     { background-color: rgba(5, 5, 15, 0.7) !important; }
-.bg-warm-50\/70     { background-color: rgba(5, 5, 15, 0.75) !important; }
-.bg-warm-50\/80     { background-color: rgba(5, 5, 15, 0.8) !important; }
-
-.bg-warm-100        { background-color: #0a0a18 !important; }
-.bg-warm-100\/40    { background-color: rgba(10, 10, 24, 0.45) !important; }
-.bg-warm-100\/50    { background-color: rgba(10, 10, 24, 0.55) !important; }
-.bg-warm-100\/60    { background-color: rgba(10, 10, 24, 0.65) !important; }
-.bg-warm-100\/70    { background-color: rgba(10, 10, 24, 0.75) !important; }
-
-.bg-warm-200        { background-color: #10101f !important; }
-.bg-warm-200\/50    { background-color: rgba(16, 16, 31, 0.6) !important; }
-
-/* --- Accent color tints (warm-400/500/600 → violet/iris/rose) --- */
-.bg-warm-400\/15    { background-color: rgba(192, 132, 252, 0.14) !important; }
-.bg-warm-400\/30    { background-color: rgba(192, 132, 252, 0.28) !important; }
-.bg-warm-400\/40    { background-color: rgba(192, 132, 252, 0.38) !important; }
-.bg-warm-500        { background-color: #a855f7 !important; color: white !important; }
-.bg-warm-500\/10    { background-color: rgba(168, 85, 247, 0.12) !important; }
-.bg-warm-500\/15    { background-color: rgba(168, 85, 247, 0.18) !important; }
-.bg-warm-500\/20    { background-color: rgba(168, 85, 247, 0.24) !important; }
-.bg-warm-600        { background-color: #ec4899 !important; color: white !important; }
-.bg-warm-600\/90    { background-color: rgba(236, 72, 153, 0.92) !important; color: white !important; }
-.bg-warm-700        { background-color: #6366f1 !important; color: white !important; }
-.bg-warm-800        { background-color: #0f0f22 !important; }
-.bg-warm-900        { background-color: #050510 !important; }
-
-/* --- Ink (dark) backgrounds — now map to darkest navy --- */
-.bg-ink             { background-color: #05050f !important; }
-.bg-ink\/5          { background-color: rgba(255, 255, 255, 0.04) !important; }
-.bg-ink\/10         { background-color: rgba(255, 255, 255, 0.07) !important; }
-.bg-ink\/20         { background-color: rgba(255, 255, 255, 0.12) !important; }
-
-/* --- Sage (green) tints --- */
-.bg-sage-500        { background-color: #34d399 !important; color: #05050f !important; }
-.bg-sage-500\/5     { background-color: rgba(52, 211, 153, 0.08) !important; }
-.bg-sage-500\/10    { background-color: rgba(52, 211, 153, 0.14) !important; }
-.bg-sage-500\/15    { background-color: rgba(52, 211, 153, 0.2) !important; }
-.bg-sage-500\/90    { background-color: rgba(52, 211, 153, 0.88) !important; color: #05050f !important; }
-
-/* --- White backgrounds → dark glass cards --- */
-.bg-white {
-  background-color: rgba(16, 16, 31, 0.85) !important;
-  color: rgba(255, 255, 255, 0.92) !important;
-}
-.bg-white\/50 {
-  background-color: rgba(16, 16, 31, 0.55) !important;
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-}
-.bg-white\/60 {
-  background-color: rgba(16, 16, 31, 0.6) !important;
-  backdrop-filter: blur(18px);
-  -webkit-backdrop-filter: blur(18px);
-}
-.bg-white\/70 {
-  background-color: rgba(16, 16, 31, 0.65) !important;
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-}
-.bg-white\/80 {
-  background-color: rgba(16, 16, 31, 0.75) !important;
-  backdrop-filter: blur(22px);
-  -webkit-backdrop-filter: blur(22px);
-}
-.bg-white\/90 {
-  background-color: rgba(16, 16, 31, 0.85) !important;
-}
-
-/* --- Text colors --- */
-.text-ink           { color: #ffffff !important; }
-.text-ink-light     { color: rgba(255, 255, 255, 0.68) !important; }
-.text-ink-muted     { color: rgba(255, 255, 255, 0.45) !important; }
-.text-warm-50       { color: #ffffff !important; }
-.text-warm-100      { color: rgba(255, 255, 255, 0.9) !important; }
-.text-warm-200      { color: rgba(255, 255, 255, 0.72) !important; }
-.text-warm-400      { color: #c084fc !important; }
-.text-warm-500      { color: #a855f7 !important; }
-.text-warm-600      { color: #ec4899 !important; }
-.text-warm-700      { color: #818cf8 !important; }
-.text-warm-800      { color: #c084fc !important; }
-.text-warm-900      { color: #ffffff !important; }
-.text-sage-500      { color: #34d399 !important; }
-.text-sage-600      { color: #10b981 !important; }
-
-/* --- Borders --- */
-.border-ink         { border-color: rgba(255, 255, 255, 0.92) !important; }
-.border-ink\/5      { border-color: rgba(255, 255, 255, 0.05) !important; }
-.border-ink\/10     { border-color: rgba(255, 255, 255, 0.08) !important; }
-.border-ink\/15     { border-color: rgba(255, 255, 255, 0.12) !important; }
-.border-ink\/20     { border-color: rgba(255, 255, 255, 0.16) !important; }
-.border-ink\/40     { border-color: rgba(255, 255, 255, 0.3) !important; }
-.border-warm-200    { border-color: rgba(255, 255, 255, 0.1) !important; }
-.border-warm-200\/30{ border-color: rgba(255, 255, 255, 0.12) !important; }
-.border-warm-200\/60{ border-color: rgba(255, 255, 255, 0.2) !important; }
-.border-warm-500    { border-color: #a855f7 !important; }
-
-/* --- Hover variants --- */
-.hover\:bg-warm-50:hover    { background-color: rgba(255, 255, 255, 0.03) !important; }
-.hover\:bg-warm-100:hover   { background-color: rgba(255, 255, 255, 0.05) !important; }
-.hover\:bg-warm-200:hover   { background-color: rgba(255, 255, 255, 0.08) !important; }
-.hover\:bg-warm-400:hover   { background-color: #c084fc !important; }
-.hover\:bg-warm-500:hover   { background-color: #a855f7 !important; }
-.hover\:bg-warm-600:hover   { background-color: #ec4899 !important; }
-.hover\:bg-warm-700:hover   { background-color: #6366f1 !important; }
-.hover\:bg-warm-800:hover   { background-color: #10101f !important; }
-.hover\:text-warm-600:hover { color: #ec4899 !important; }
-.hover\:text-warm-700:hover { color: #818cf8 !important; }
-.hover\:text-warm-800:hover { color: #c084fc !important; }
-.hover\:border-ink\/40:hover{ border-color: rgba(255, 255, 255, 0.3) !important; }
-.hover\:border-warm-200:hover { border-color: rgba(255, 255, 255, 0.2) !important; }
-
-/* --- Form inputs: dark theme by default --- */
-input[type="text"],
-input[type="email"],
-input[type="password"],
-input[type="number"],
-input[type="tel"],
-input[type="url"],
-input[type="search"],
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input:not([type]),
-textarea,
-select {
-  background-color: rgba(16, 16, 31, 0.6) !important;
-  border: 1px solid rgba(255, 255, 255, 0.1) !important;
-  color: #ffffff !important;
-  border-radius: 10px;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-input::placeholder,
-textarea::placeholder {
-  color: rgba(255, 255, 255, 0.35) !important;
-}
-input:focus,
-textarea:focus,
-select:focus {
-  border-color: #a855f7 !important;
-  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.18) !important;
-  outline: none !important;
-}
-/* Checkbox / radio — keep accent purple */
-input[type="checkbox"],
-input[type="radio"] {
-  accent-color: #a855f7;
-}
-/* Option elements inside select */
-select option {
-  background-color: #10101f;
-  color: #ffffff;
-}
-
-/* --- Blog article prose (if used) --- */
-.prose,
-.prose-lg,
-.prose-xl {
-  --tw-prose-body: rgba(255, 255, 255, 0.78);
-  --tw-prose-headings: #ffffff;
-  --tw-prose-lead: rgba(255, 255, 255, 0.72);
-  --tw-prose-links: #c084fc;
-  --tw-prose-bold: #ffffff;
-  --tw-prose-counters: rgba(255, 255, 255, 0.5);
-  --tw-prose-bullets: rgba(255, 255, 255, 0.35);
-  --tw-prose-hr: rgba(255, 255, 255, 0.1);
-  --tw-prose-quotes: rgba(255, 255, 255, 0.85);
-  --tw-prose-quote-borders: rgba(168, 85, 247, 0.5);
-  --tw-prose-captions: rgba(255, 255, 255, 0.5);
-  --tw-prose-code: #f472b6;
-  --tw-prose-pre-code: #e4e4e7;
-  --tw-prose-pre-bg: rgba(16, 16, 31, 0.75);
-  --tw-prose-th-borders: rgba(255, 255, 255, 0.15);
-  --tw-prose-td-borders: rgba(255, 255, 255, 0.08);
-}
-
-/* --- Placeholder/disabled states --- */
-*:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* --- Ensure html/body stay dark for non-home routes too --- */
-html, body {
-  background-color: #05050f;
-  color-scheme: dark;
-}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 1805543..7b8f44e 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -65,54 +65,42 @@ const OPERATOR_ROLES = [
   'SUPER_ADMIN',
 ];
 
-const NAV_LINKS = [
-  { href: '/stores', label: '매장 검색' },
-  { href: '/stores/new', label: '매장 등록' },
-  { href: '/matching', label: '매칭' },
-  { href: '/subsidies', label: '지원금' },
-  { href: '/vendors', label: '업체' },
-  { href: '/blog', label: '블로그' },
-  { href: '/faq', label: 'FAQ' },
-];
-
 async function Navigation() {
   const session = await auth();
   const isOperator = session?.user && OPERATOR_ROLES.includes(session.user.primaryRole);
 
   return (
-    <nav className="sticky top-0 z-50 border-b border-white/[0.06] bg-night-0/70 backdrop-blur-xl">
-      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-5">
-        <Link
-          href="/"
-          className="group flex items-center gap-2 font-display text-xl font-black tracking-tight text-cloud-0"
-        >
-          <span
-            aria-hidden
-            className="relative inline-flex h-7 w-7 items-center justify-center rounded-md"
-            style={{
-              background: 'linear-gradient(135deg,#6366f1 0%,#a855f7 45%,#ec4899 80%,#f97316 100%)',
-            }}
-          >
-            <span className="text-sm font-black text-white">S</span>
-          </span>
-          <span>
-            start<span className="text-grad-primary">over</span>
-          </span>
+    <nav className="border-b border-ink/5 bg-warm-50/80 backdrop-blur-md">
+      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4">
+        <Link href="/" className="font-display text-xl font-bold text-ink">
+          Startover
         </Link>
-        <div className="hidden items-center gap-6 md:flex">
-          {NAV_LINKS.map((l) => (
-            <Link
-              key={l.href}
-              href={l.href}
-              className="text-sm font-medium text-cloud-2 transition-colors hover:text-cloud-0"
-            >
-              {l.label}
-            </Link>
-          ))}
+        <div className="flex items-center gap-5">
+          <Link href="/stores" className="text-sm text-ink-light hover:text-warm-600 transition-colors">
+            매장 검색
+          </Link>
+          <Link href="/stores/new" className="text-sm text-ink-light hover:text-warm-600 transition-colors">
+            매장 등록
+          </Link>
+          <Link href="/matching" className="text-sm text-ink-light hover:text-warm-600 transition-colors">
+            매칭
+          </Link>
+          <Link href="/subsidies" className="text-sm text-ink-light hover:text-warm-600 transition-colors">
+            지원금
+          </Link>
+          <Link href="/vendors" className="text-sm text-ink-light hover:text-warm-600 transition-colors">
+            업체 인증
+          </Link>
+          <Link href="/blog" className="text-sm text-ink-light hover:text-warm-600 transition-colors">
+            블로그
+          </Link>
+          <Link href="/faq" className="text-sm text-ink-light hover:text-warm-600 transition-colors">
+            FAQ
+          </Link>
           {isOperator && (
             <Link
               href="/admin"
-              className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-sm text-cloud-2 transition-colors hover:border-white/20 hover:bg-white/[0.08] hover:text-cloud-0"
+              className="rounded-full bg-warm-100 px-3 py-1.5 text-sm text-ink-light hover:bg-warm-200"
             >
               운영자
             </Link>
@@ -126,58 +114,44 @@ async function Navigation() {
 
 function Footer() {
   return (
-    <footer className="relative mt-24 border-t border-white/5 bg-night-0 font-body">
-      {/* decorative glow */}
-      <div className="pointer-events-none absolute inset-0 overflow-hidden opacity-60">
-        <div className="orb orb-iris absolute -left-32 top-10 h-72 w-72" />
-        <div className="orb orb-rose absolute right-0 bottom-0 h-72 w-72" />
-      </div>
-
-      <div className="relative mx-auto grid max-w-7xl grid-cols-2 gap-10 px-6 py-16 md:grid-cols-4">
+    <footer className="mt-24 border-t border-ink/5 bg-warm-50/60 font-body">
+      <div className="mx-auto grid max-w-7xl grid-cols-2 gap-8 px-6 py-12 md:grid-cols-4">
         <div>
-          <p className="font-display text-xl font-black tracking-tight text-cloud-0">
-            start<span className="text-grad-primary">over</span>
-          </p>
-          <p className="mt-3 text-xs leading-relaxed text-cloud-3">
+          <p className="font-display text-lg font-bold text-ink">Startover</p>
+          <p className="mt-2 text-xs leading-relaxed text-ink-muted">
             폐업 · 양도 · 창업을 잇는
             <br />
             소상공인 중개 플랫폼
           </p>
         </div>
         <div>
-          <p className="font-mono text-[10px] tracking-[0.25em] uppercase text-cloud-4">
-            Service
-          </p>
-          <ul className="mt-4 space-y-2.5 text-sm">
-            <li><Link href="/stores" className="text-cloud-2 hover:text-cloud-0 transition-colors">매장 검색</Link></li>
-            <li><Link href="/stores/new" className="text-cloud-2 hover:text-cloud-0 transition-colors">매장 등록</Link></li>
-            <li><Link href="/subsidies" className="text-cloud-2 hover:text-cloud-0 transition-colors">지원금</Link></li>
-            <li><Link href="/vendors" className="text-cloud-2 hover:text-cloud-0 transition-colors">업체 인증</Link></li>
+          <p className="text-xs font-medium tracking-widest uppercase text-ink-muted">서비스</p>
+          <ul className="mt-3 space-y-2 text-sm">
+            <li><Link href="/stores" className="text-ink-light hover:text-warm-700">매장 검색</Link></li>
+            <li><Link href="/stores/new" className="text-ink-light hover:text-warm-700">매장 등록</Link></li>
+            <li><Link href="/subsidies" className="text-ink-light hover:text-warm-700">지원금</Link></li>
+            <li><Link href="/vendors" className="text-ink-light hover:text-warm-700">업체 인증</Link></li>
           </ul>
         </div>
         <div>
-          <p className="font-mono text-[10px] tracking-[0.25em] uppercase text-cloud-4">
-            Learn
-          </p>
-          <ul className="mt-4 space-y-2.5 text-sm">
-            <li><Link href="/about" className="text-cloud-2 hover:text-cloud-0 transition-colors">회사 소개</Link></li>
-            <li><Link href="/blog" className="text-cloud-2 hover:text-cloud-0 transition-colors">블로그</Link></li>
-            <li><Link href="/faq" className="text-cloud-2 hover:text-cloud-0 transition-colors">자주 묻는 질문</Link></li>
-            <li><Link href="/contact" className="text-cloud-2 hover:text-cloud-0 transition-colors">문의하기</Link></li>
+          <p className="text-xs font-medium tracking-widest uppercase text-ink-muted">알아보기</p>
+          <ul className="mt-3 space-y-2 text-sm">
+            <li><Link href="/about" className="text-ink-light hover:text-warm-700">회사 소개</Link></li>
+            <li><Link href="/blog" className="text-ink-light hover:text-warm-700">블로그</Link></li>
+            <li><Link href="/faq" className="text-ink-light hover:text-warm-700">자주 묻는 질문</Link></li>
+            <li><Link href="/contact" className="text-ink-light hover:text-warm-700">문의하기</Link></li>
           </ul>
         </div>
         <div>
-          <p className="font-mono text-[10px] tracking-[0.25em] uppercase text-cloud-4">
-            Legal
-          </p>
-          <ul className="mt-4 space-y-2.5 text-sm">
-            <li><Link href="/terms" className="text-cloud-2 hover:text-cloud-0 transition-colors">이용약관</Link></li>
-            <li><Link href="/privacy" className="text-cloud-2 hover:text-cloud-0 transition-colors">개인정보처리방침</Link></li>
+          <p className="text-xs font-medium tracking-widest uppercase text-ink-muted">약관</p>
+          <ul className="mt-3 space-y-2 text-sm">
+            <li><Link href="/terms" className="text-ink-light hover:text-warm-700">이용약관</Link></li>
+            <li><Link href="/privacy" className="text-ink-light hover:text-warm-700">개인정보처리방침</Link></li>
           </ul>
         </div>
       </div>
-      <div className="relative border-t border-white/5 px-6 py-5 text-center font-mono text-[11px] tracking-[0.15em] text-cloud-4">
-        © 2026 STARTOVER · ALL RIGHTS RESERVED
+      <div className="border-t border-ink/5 px-6 py-4 text-center text-xs text-ink-muted">
+        © 2026 Startover. All rights reserved.
       </div>
     </footer>
   );
@@ -198,7 +172,7 @@ export default function RootLayout({
           strategy="afterInteractive"
         />
       </head>
-      <body className="min-h-screen bg-night-0 font-body text-cloud-1">
+      <body className="min-h-screen bg-warm-50 font-body">
         <Navigation />
         {children}
         <Footer />
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index c02e090..ec2478e 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -7,35 +7,30 @@ const PROCESS_STEPS = [
     num: '01',
     title: '매장 등록',
     desc: '업종·지역·권리금·월매출 등 기본 정보를 입력하면 운영팀 검수를 거쳐 공개됩니다.',
-    accent: 'from-iris via-violet to-rose',
   },
   {
     num: '02',
     title: '자동 매칭',
     desc: '등록된 매장은 인수 희망자와 인증된 철거·인테리어 업체에 동시에 노출됩니다.',
-    accent: 'from-violet via-rose to-tangerine',
   },
   {
     num: '03',
     title: '계약·정산',
     desc: '표준 계약서, 에스크로 결제, 단계별 검수 승인으로 안전하게 거래가 마무리됩니다.',
-    accent: 'from-rose via-tangerine to-amber',
   },
 ];
 
 const STATS = [
-  { value: '1', unit: '회', label: '매장 등록', sub: '인수자·철거·인테리어 동시 매칭' },
-  { value: '7', unit: '개', label: '업종 대분류', sub: '49개 소분류까지 세분화' },
-  { value: '2–4', unit: '주', label: '평균 매칭 기간', sub: '운영팀 검수 포함' },
-  { value: '3', unit: '단계', label: '에스크로 정산', sub: '사전·중간·최종 검수' },
+  { value: '1회', label: '매장 등록으로', sub: '인수자·철거·인테리어 동시 매칭' },
+  { value: '7개', label: '업종 대분류', sub: '49개 소분류까지 세분화' },
+  { value: '2~4주', label: '평균 매칭 기간', sub: '운영팀 검수 포함' },
+  { value: '에스크로', label: '단계별 정산', sub: '사전·중간·최종 검수 후 해제' },
 ];
 
 const BENEFITS = [
   {
     label: '매도인',
-    english: 'for sellers',
     title: '깔끔한 마무리',
-    accent: 'iris',
     points: [
       '매장 한 번 등록으로 인수자·철거업체 동시 매칭',
       '원상복구 비용을 인수자에게 이전하는 양도 우선 시도',
@@ -44,9 +39,7 @@ const BENEFITS = [
   },
   {
     label: '매수인',
-    english: 'for founders',
     title: '검증된 시작',
-    accent: 'violet',
     points: [
       '운영팀 검수를 통과한 매물만 공개',
       '권리금·월매출·월수익·회수기간까지 한 페이지에 공개',
@@ -55,9 +48,7 @@ const BENEFITS = [
   },
   {
     label: '업체',
-    english: 'for partners',
     title: '안정적 수주',
-    accent: 'rose',
     points: [
       '인증 통과 후 지역·업종 맞춤 안건이 자동 전달',
       '에스크로 선입금으로 대금 회수 리스크 최소화',
@@ -84,33 +75,30 @@ const FAQ_PREVIEW = [
 const FEATURES = [
   {
     label: '폐업자',
-    english: 'Closing owners',
     title: '깔끔한 마무리,\n새로운 시작',
     desc: '매장 정보를 등록하면 철거비 절감, 시설 처분, 지원금 신청까지 한 번에 해결됩니다.',
     href: '/stores/new',
     cta: '매장 등록',
+    accent: 'bg-warm-500',
     num: '01',
-    glow: 'iris',
   },
   {
     label: '창업자',
-    english: 'Founders',
     title: '검증된 매장,\n합리적 시작',
     desc: '검증된 매장을 검색하고 매칭 요청을 보내 시설 인수와 인테리어 비용을 절감하세요.',
     href: '/stores',
     cta: '매장 검색',
+    accent: 'bg-sage-500',
     num: '02',
-    glow: 'violet',
   },
   {
     label: '철거·인테리어 업체',
-    english: 'Partners',
     title: '안정적 수주,\n정확한 정산',
     desc: '인증 업체로 등록하면 안정적인 수주와 정산을 보장받을 수 있습니다.',
     href: '/vendors',
     cta: '업체 인증',
+    accent: 'bg-warm-700',
     num: '03',
-    glow: 'rose',
   },
 ];
 
@@ -120,7 +108,6 @@ const SERVICES = [
     desc: '폐업 관련 정부 지원금 자격을 확인하고, 체크리스트와 서류 준비를 도와드립니다.',
     href: '/subsidies',
     cta: '지원금 확인',
-    tag: 'Guide',
     icon: (
       <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
         <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
@@ -132,7 +119,6 @@ const SERVICES = [
     desc: '표준 계약서, 에스크로 결제, 검수 승인 시스템으로 안전한 거래를 보장합니다.',
     href: '/contracts',
     cta: '계약 관리',
-    tag: 'Escrow',
     icon: (
       <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
         <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
@@ -141,349 +127,255 @@ const SERVICES = [
   },
 ];
 
-const MARQUEE_ITEMS = [
-  '매장 한 번 등록',
-  '인수자 · 철거 · 인테리어 동시 매칭',
-  '에스크로 단계별 정산',
-  '희망리턴패키지 자격 자동 조회',
-  '7개 업종 · 49개 소분류 지원',
-  '운영팀 검수 통과 매물만 공개',
-  '권리금 회수기간 자동 계산',
-];
-
 export default function HomePage() {
   const latestPosts = getPostsSortedByDate().slice(0, 4);
 
   return (
-    <main className="relative overflow-hidden bg-night-0 text-cloud-1 font-body">
-      {/* ==========================================================
-       *  HERO
-       * ========================================================== */}
-      <section className="relative min-h-[calc(100vh-4rem)] overflow-hidden">
-        {/* Animated grid */}
-        <div className="pointer-events-none absolute inset-0 bg-grid-animated opacity-80" />
-        {/* Radial fade to edges */}
-        <div className="pointer-events-none absolute inset-0 bg-radial-fade" />
-        {/* Glow orbs */}
-        <div className="pointer-events-none absolute inset-0">
-          <div className="orb orb-iris absolute -top-20 -left-20 h-[520px] w-[520px]" style={{ animationDelay: '0s' }} />
-          <div className="orb orb-violet absolute top-1/4 right-0 h-[440px] w-[440px]" style={{ animationDelay: '-4s' }} />
-          <div className="orb orb-rose absolute bottom-0 left-1/4 h-[380px] w-[380px]" style={{ animationDelay: '-8s' }} />
-          <div className="orb orb-tangerine absolute -bottom-24 right-1/3 h-[320px] w-[320px] opacity-40" style={{ animationDelay: '-12s' }} />
-        </div>
+    <main className="relative overflow-hidden bg-warm-50 font-body">
+      {/* Gradient Mesh Background */}
+      <div className="pointer-events-none absolute inset-0">
+        <div
+          className="mesh-blob bg-warm-200/60 absolute -top-32 -right-32 h-[500px] w-[500px]"
+          style={{ animationDelay: '0s' }}
+        />
+        <div
+          className="mesh-blob bg-warm-300/40 absolute top-1/3 -left-24 h-[400px] w-[400px]"
+          style={{ animationDelay: '-4s' }}
+        />
+        <div
+          className="mesh-blob absolute top-2/3 right-1/4 h-[350px] w-[350px] bg-sage-500/15"
+          style={{ animationDelay: '-8s' }}
+        />
+      </div>
 
-        {/* Hero content */}
-        <div className="relative mx-auto flex min-h-[calc(100vh-4rem)] max-w-7xl flex-col justify-center px-6 py-24">
-          <p className="reveal d1 font-mono text-xs tracking-[0.3em] uppercase text-cloud-3">
-            <span className="inline-block h-1.5 w-1.5 translate-y-[-2px] rounded-full bg-lime-light align-middle mr-2 animate-pulse" />
-            폐업 · 양도 · 창업을 잇다
-          </p>
-
-          <h1 className="reveal d2 mt-6 font-display text-[clamp(3.5rem,11vw,10rem)] font-black leading-[0.95] tracking-tight text-cloud-0">
-            Start<br />
-            <span className="text-grad-rainbow">
-              over
-            </span>
-            <span className="font-serif italic text-cloud-1" style={{ fontWeight: 400 }}>
-              .
-            </span>
-          </h1>
-
-          <p className="reveal d3 mt-10 max-w-2xl text-lg leading-relaxed text-cloud-2 sm:text-xl">
-            <span className="font-serif italic text-cloud-0">매장 한 번 등록</span>으로
-            창업자 · 철거 · 인테리어 업체를 동시에 연결하고,
-            정부 지원금 신청까지 한 흐름으로 이어드립니다.
-          </p>
-
-          <div className="reveal d4 mt-12 flex flex-wrap items-center gap-4">
-            <Link href="/stores" className="btn-grad group inline-flex items-center gap-2 text-base">
-              매장 둘러보기
-              <span className="inline-block transition-transform group-hover:translate-x-1">→</span>
-            </Link>
-            <Link href="/stores/new" className="btn-ghost group inline-flex items-center gap-2 text-base">
-              매장 등록
-              <span className="inline-block transition-transform group-hover:translate-x-1">→</span>
-            </Link>
-          </div>
-
-          {/* Floating stats pills */}
-          <div className="reveal d5 mt-20 flex flex-wrap items-center gap-3">
-            {[
-              { k: '업종', v: '7개 대분류' },
-              { k: '세분류', v: '49개' },
-              { k: '정산', v: '에스크로 3단계' },
-              { k: '지원금', v: '자격 자동 조회' },
-            ].map((p) => (
-              <span
-                key={p.k}
-                className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-4 py-2 text-xs text-cloud-2 backdrop-blur-md"
-              >
-                <span className="font-mono text-[10px] uppercase tracking-widest text-cloud-4">{p.k}</span>
-                <span className="text-cloud-1">{p.v}</span>
-              </span>
-            ))}
-          </div>
-
-          {/* Scroll indicator */}
-          <div className="reveal d6 absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2">
-            <span className="font-mono text-[10px] uppercase tracking-[0.3em] text-cloud-4">scroll</span>
-            <span className="h-10 w-px bg-gradient-to-b from-cloud-3 to-transparent" />
-          </div>
-        </div>
-      </section>
-
-      {/* ==========================================================
-       *  MARQUEE
-       * ========================================================== */}
-      <section className="relative border-y border-white/5 bg-night-1 py-8">
-        <div className="marquee-mask overflow-hidden">
-          <div className="marquee-track">
-            {[...MARQUEE_ITEMS, ...MARQUEE_ITEMS].map((item, i) => (
-              <span key={i} className="flex items-center gap-12 font-serif text-2xl italic text-cloud-2 md:text-3xl">
-                {item}
-                <span className="inline-block h-1.5 w-1.5 rounded-full bg-gradient-to-r from-iris to-rose" />
-              </span>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* ==========================================================
-       *  FOR WHO — 3 big role cards
-       * ========================================================== */}
-      <section className="relative mx-auto max-w-7xl px-6 py-28">
-        <div className="mb-16 flex flex-col items-start justify-between gap-6 md:flex-row md:items-end">
-          <div>
-            <p className="font-mono text-xs tracking-[0.3em] uppercase text-cloud-4">
-              <span className="text-grad-primary">◆</span> 01 · For Who
+      {/* Hero Section */}
+      <section className="relative mx-auto max-w-6xl px-6 pt-24 pb-20">
+        <div className="grid grid-cols-1 items-end gap-12 lg:grid-cols-12">
+          {/* Main headline — editorial style, large serif */}
+          <div className="lg:col-span-7">
+            <p
+              className="animate-fade-up text-sm font-medium tracking-[0.2em] uppercase text-warm-600"
+              style={{ animationDelay: '0.1s' }}
+            >
+              폐업 · 양도 · 창업을 잇다
             </p>
-            <h2 className="mt-4 font-display text-4xl font-black tracking-tight text-cloud-0 sm:text-5xl md:text-6xl">
-              <span className="font-serif italic font-normal text-cloud-2">누구</span>를 위한
+            <h1
+              className="animate-fade-up mt-6 font-display text-6xl leading-[1.1] font-black tracking-tight text-ink sm:text-7xl lg:text-8xl"
+              style={{ animationDelay: '0.25s' }}
+            >
+              Start
+              <span className="relative">
+                over
+                <span className="absolute -bottom-2 left-0 h-3 w-full bg-warm-400/40" />
+              </span>
+            </h1>
+            <p
+              className="animate-fade-up mt-8 max-w-lg text-lg leading-relaxed font-light text-ink-light"
+              style={{ animationDelay: '0.4s' }}
+            >
+              매장 정보 1회 등록으로
               <br />
-              서비스인가요
-            </h2>
+              창업자 · 철거업체 · 인테리어업체를 동시에 연결합니다.
+            </p>
+          </div>
+
+          {/* CTA buttons — offset right for asymmetry */}
+          <div className="flex flex-col gap-4 lg:col-span-5 lg:items-end lg:pb-4">
+            <Link
+              href="/stores"
+              className="animate-slide-right group inline-flex items-center gap-3 rounded-full bg-ink px-8 py-4 text-base font-medium text-warm-50 transition-colors hover:bg-warm-800"
+              style={{ animationDelay: '0.5s' }}
+            >
+              매장 둘러보기
+              <span className="inline-block transition-transform group-hover:translate-x-1">
+                &rarr;
+              </span>
+            </Link>
+            <Link
+              href="/stores/new"
+              className="animate-slide-right inline-flex items-center gap-3 rounded-full border-2 border-ink/15 px-8 py-4 text-base font-medium text-ink transition-colors hover:border-ink/40 hover:bg-warm-100"
+              style={{ animationDelay: '0.65s' }}
+            >
+              매장 등록하기
+            </Link>
           </div>
-          <p className="max-w-md text-sm leading-relaxed text-cloud-2">
-            폐업자 · 창업자 · 업체 — 매장 거래의 세 주체가 한 플랫폼에서
-            안전하게 연결됩니다.
-          </p>
         </div>
 
+        {/* Decorative divider */}
+        <div
+          className="animate-fade-in mt-20 flex items-center gap-4"
+          style={{ animationDelay: '0.8s' }}
+        >
+          <div className="h-px flex-1 bg-ink/10" />
+          <span className="text-xs tracking-[0.3em] uppercase text-ink-muted">
+            누구를 위한 서비스인가요
+          </span>
+          <div className="h-px flex-1 bg-ink/10" />
+        </div>
+      </section>
+
+      {/* Feature Cards — asymmetric grid */}
+      <section className="relative mx-auto max-w-6xl px-6 pb-24">
         <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
           {FEATURES.map((f, i) => (
             <Link
               key={f.num}
               href={f.href}
-              className="grad-border group relative overflow-hidden p-8"
-              style={{ minHeight: 380 }}
+              className="card-lift animate-fade-up group relative rounded-2xl border border-ink/5 bg-white/70 p-8 backdrop-blur-sm"
+              style={{ animationDelay: `${0.9 + i * 0.12}s` }}
             >
-              {/* Glow accent */}
-              <div
-                className={`pointer-events-none absolute -top-20 -right-20 h-48 w-48 rounded-full opacity-30 blur-3xl transition-opacity group-hover:opacity-70 ${
-                  f.glow === 'iris' ? 'bg-iris' : f.glow === 'violet' ? 'bg-violet' : 'bg-rose'
-                }`}
-              />
-
-              <span className="font-mono text-[10px] tracking-[0.25em] uppercase text-cloud-4">
-                {f.english}
+              {/* Number accent */}
+              <span className="font-display text-5xl font-bold text-ink/[0.04]">
+                {f.num}
               </span>
 
-              <p className="mt-2 inline-flex items-center gap-2 text-xs font-medium tracking-widest uppercase text-cloud-2">
-                <span className="font-serif text-5xl font-normal not-italic leading-none text-grad-primary">
-                  {f.num}
-                </span>
-                <span className="ml-2">{f.label}</span>
-              </p>
+              {/* Accent bar */}
+              <div className={`mt-4 h-1 w-10 rounded-full ${f.accent}`} />
 
-              <h3 className="mt-8 font-display text-2xl font-bold leading-[1.2] whitespace-pre-line text-cloud-0">
+              <p className="mt-4 text-xs font-medium tracking-widest uppercase text-ink-muted">
+                {f.label}
+              </p>
+              <h3 className="mt-3 font-display text-2xl leading-snug font-bold text-ink whitespace-pre-line">
                 {f.title}
               </h3>
-              <p className="mt-4 text-sm leading-relaxed text-cloud-2">
+              <p className="mt-4 text-sm leading-relaxed text-ink-light">
                 {f.desc}
               </p>
 
-              <span className="absolute bottom-8 left-8 inline-flex items-center gap-2 text-sm font-semibold text-cloud-1 transition-transform group-hover:translate-x-1">
+              <span className="link-underline mt-6 inline-flex items-center gap-1 text-sm font-medium text-warm-700 transition-colors group-hover:text-warm-600">
                 {f.cta}
-                <span className="text-grad-primary text-base">→</span>
+                <span className="inline-block transition-transform group-hover:translate-x-1">
+                  &rarr;
+                </span>
               </span>
             </Link>
           ))}
         </div>
       </section>
 
-      {/* ==========================================================
-       *  PROCESS
-       * ========================================================== */}
-      <section className="relative border-y border-white/5 bg-night-1">
-        {/* subtle decoration */}
-        <div className="pointer-events-none absolute inset-0 overflow-hidden opacity-50">
-          <div className="orb orb-iris absolute -top-20 left-0 h-80 w-80" />
-          <div className="orb orb-tangerine absolute -bottom-20 right-0 h-80 w-80" />
-        </div>
-
-        <div className="relative mx-auto max-w-7xl px-6 py-28">
-          <div className="mb-16 max-w-3xl">
-            <p className="font-mono text-xs tracking-[0.3em] uppercase text-cloud-4">
-              <span className="text-grad-primary">◆</span> 02 · Process
-            </p>
-            <h2 className="mt-4 font-display text-4xl font-black tracking-tight text-cloud-0 sm:text-5xl md:text-6xl">
-              매장 한 번,
-              <br />
-              <span className="text-grad-rainbow">세 단계</span>로 완료
-            </h2>
-            <p className="mt-6 text-cloud-2">
-              인수 · 양도 · 철거 · 인테리어 · 지원금까지 흩어진 절차를
-              하나의 흐름으로 묶었습니다.
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
-            {PROCESS_STEPS.map((step, i) => (
-              <div key={step.num} className="relative">
-                {/* Connector line (only between cards on desktop) */}
-                {i < PROCESS_STEPS.length - 1 && (
-                  <div className="hidden md:block absolute top-14 left-full z-0 h-px w-6 bg-gradient-to-r from-white/10 to-transparent" />
-                )}
-                <div className="glass-darker relative z-10 rounded-2xl p-8">
-                  <div className="flex items-center gap-4">
-                    <span
-                      className={`inline-flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br ${step.accent} font-mono text-lg font-bold text-white shadow-[0_8px_32px_-8px_rgba(168,85,247,0.45)]`}
-                    >
-                      {step.num}
-                    </span>
-                    <h3 className="font-display text-2xl font-bold text-cloud-0">
-                      {step.title}
-                    </h3>
-                  </div>
-                  <p className="mt-5 text-sm leading-relaxed text-cloud-2">
-                    {step.desc}
-                  </p>
-                </div>
+      {/* Services section */}
+      <section className="relative mx-auto max-w-6xl px-6 pb-32">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+          {SERVICES.map((s, i) => (
+            <Link
+              key={s.title}
+              href={s.href}
+              className="card-lift animate-fade-up group flex gap-6 rounded-2xl border border-ink/5 bg-white/50 p-8 backdrop-blur-sm"
+              style={{ animationDelay: `${1.3 + i * 0.12}s` }}
+            >
+              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-warm-100 text-warm-700 transition-colors group-hover:bg-warm-200">
+                {s.icon}
               </div>
-            ))}
-          </div>
+              <div>
+                <h3 className="font-display text-xl font-bold text-ink">
+                  {s.title}
+                </h3>
+                <p className="mt-2 text-sm leading-relaxed text-ink-light">
+                  {s.desc}
+                </p>
+                <span className="link-underline mt-4 inline-flex items-center gap-1 text-sm font-medium text-warm-700 transition-colors group-hover:text-warm-600">
+                  {s.cta}
+                  <span className="inline-block transition-transform group-hover:translate-x-1">
+                    &rarr;
+                  </span>
+                </span>
+              </div>
+            </Link>
+          ))}
         </div>
       </section>
 
-      {/* ==========================================================
-       *  STATS
-       * ========================================================== */}
-      <section className="relative mx-auto max-w-7xl px-6 py-28">
-        <div className="mb-14">
-          <p className="font-mono text-xs tracking-[0.3em] uppercase text-cloud-4">
-            <span className="text-grad-primary">◆</span> 03 · Numbers
-          </p>
-          <h2 className="mt-4 font-display text-4xl font-black tracking-tight text-cloud-0 sm:text-5xl">
-            숫자로 보는 <span className="font-serif italic font-normal text-cloud-2">startover</span>
-          </h2>
-        </div>
-        <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
-          {STATS.map((s, i) => (
-            <div key={s.label} className="glass-darker rounded-2xl p-7">
-              <p className="flex items-baseline gap-1 font-display">
-                <span className="text-6xl font-black tracking-tight text-grad-primary">{s.value}</span>
-                <span className="text-xl font-bold text-cloud-2">{s.unit}</span>
-              </p>
-              <p className="mt-4 text-sm font-semibold text-cloud-1">{s.label}</p>
-              <p className="mt-1 text-xs text-cloud-3">{s.sub}</p>
+      {/* Stats band */}
+      <section className="relative border-y border-ink/5 bg-white/50 backdrop-blur-sm">
+        <div className="mx-auto grid max-w-6xl grid-cols-2 gap-8 px-6 py-14 md:grid-cols-4">
+          {STATS.map((s) => (
+            <div key={s.label} className="text-center">
+              <p className="font-display text-4xl font-black text-ink">{s.value}</p>
+              <p className="mt-2 text-sm font-medium text-ink">{s.label}</p>
+              <p className="mt-1 text-xs text-ink-muted">{s.sub}</p>
             </div>
           ))}
         </div>
       </section>
 
-      {/* ==========================================================
-       *  CATEGORIES
-       * ========================================================== */}
-      <section className="relative border-y border-white/5 bg-night-1">
-        <div className="pointer-events-none absolute inset-0 bg-dot opacity-40" />
-        <div className="relative mx-auto max-w-7xl px-6 py-28">
-          <div className="mb-14 flex flex-col items-start justify-between gap-6 md:flex-row md:items-end">
+      {/* How it works */}
+      <section className="relative mx-auto max-w-6xl px-6 py-24">
+        <div className="mb-12 text-center">
+          <p className="text-xs font-medium tracking-[0.3em] uppercase text-warm-600">How it works</p>
+          <h2 className="mt-4 font-display text-3xl font-bold text-ink sm:text-4xl">
+            매장 한 번 등록, 세 단계로 완료
+          </h2>
+          <p className="mt-4 text-ink-light">
+            인수·양도·철거·인테리어·지원금까지 흩어진 절차를 하나의 흐름으로 묶었습니다
+          </p>
+        </div>
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+          {PROCESS_STEPS.map((step) => (
+            <div
+              key={step.num}
+              className="relative rounded-2xl border border-ink/5 bg-white/70 p-8 backdrop-blur-sm"
+            >
+              <span className="font-display text-5xl font-bold text-warm-400/30">{step.num}</span>
+              <h3 className="mt-4 font-display text-xl font-bold text-ink">{step.title}</h3>
+              <p className="mt-3 text-sm leading-relaxed text-ink-light">{step.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Industry categories showcase */}
+      <section className="relative border-t border-ink/5 bg-warm-100/40">
+        <div className="mx-auto max-w-6xl px-6 py-24">
+          <div className="mb-12 flex items-end justify-between">
             <div>
-              <p className="font-mono text-xs tracking-[0.3em] uppercase text-cloud-4">
-                <span className="text-grad-primary">◆</span> 04 · Categories
-              </p>
-              <h2 className="mt-4 font-display text-4xl font-black tracking-tight text-cloud-0 sm:text-5xl">
-                지원 <span className="text-grad-rose">업종</span>
-              </h2>
-              <p className="mt-5 max-w-xl text-cloud-2">
-                휴게음식점부터 기타업종까지 7개 대분류,
-                49개 소분류를 지원합니다.
+              <p className="text-xs font-medium tracking-[0.3em] uppercase text-warm-600">Categories</p>
+              <h2 className="mt-3 font-display text-3xl font-bold text-ink">지원 업종</h2>
+              <p className="mt-3 text-ink-light">
+                휴게음식점부터 기타업종까지 7개 대분류, 49개 소분류를 지원합니다
               </p>
             </div>
             <Link
               href="/stores"
-              className="link-grad hidden text-sm font-semibold text-cloud-1 md:inline-flex md:items-center md:gap-2"
+              className="hidden text-sm font-medium text-warm-700 hover:text-warm-600 md:inline-flex"
             >
-              전체 매장 보기 <span className="text-grad-primary">→</span>
+              전체 매장 보기 →
             </Link>
           </div>
-          <div className="grid grid-cols-2 gap-3 md:grid-cols-4 lg:grid-cols-7">
-            {INDUSTRY_MAJORS.map((m, i) => (
+          <div className="grid grid-cols-2 gap-4 md:grid-cols-4 lg:grid-cols-7">
+            {INDUSTRY_MAJORS.map((m) => (
               <Link
                 key={m.code}
                 href={`/stores?industryMajor=${m.code}`}
-                className="group relative overflow-hidden rounded-2xl border border-white/[0.08] bg-white/[0.02] p-5 text-center transition-all hover:-translate-y-1 hover:border-white/20 hover:bg-white/[0.05]"
+                className="rounded-2xl border border-ink/5 bg-white/70 p-5 text-center backdrop-blur-sm card-lift"
               >
-                <p className="font-display text-base font-bold text-cloud-0 transition-colors group-hover:text-grad-primary">
-                  {m.label}
-                </p>
-                <p className="mt-1 font-mono text-[10px] text-cloud-4">
-                  {m.children.length} sub
-                </p>
+                <p className="font-display font-bold text-ink">{m.label}</p>
+                <p className="mt-1 text-xs text-ink-muted">{m.children.length}개 소분류</p>
               </Link>
             ))}
           </div>
         </div>
       </section>
 
-      {/* ==========================================================
-       *  BENEFITS
-       * ========================================================== */}
-      <section className="relative mx-auto max-w-7xl px-6 py-28">
-        <div className="mb-16 max-w-3xl">
-          <p className="font-mono text-xs tracking-[0.3em] uppercase text-cloud-4">
-            <span className="text-grad-primary">◆</span> 05 · Benefits
-          </p>
-          <h2 className="mt-4 font-display text-4xl font-black tracking-tight text-cloud-0 sm:text-5xl md:text-6xl">
-            각자에게 필요한
-            <br />
-            <span className="text-grad-primary">혜택</span>
+      {/* Benefits for three roles */}
+      <section className="relative mx-auto max-w-6xl px-6 py-24">
+        <div className="mb-12 text-center">
+          <p className="text-xs font-medium tracking-[0.3em] uppercase text-warm-600">Benefits</p>
+          <h2 className="mt-4 font-display text-3xl font-bold text-ink sm:text-4xl">
+            각자에게 필요한 혜택
           </h2>
         </div>
         <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
           {BENEFITS.map((b) => (
-            <div key={b.label} className="grad-border group relative overflow-hidden p-8">
-              <div
-                className={`pointer-events-none absolute -top-24 -right-16 h-48 w-48 rounded-full opacity-25 blur-3xl transition-opacity group-hover:opacity-60 ${
-                  b.accent === 'iris' ? 'bg-iris' : b.accent === 'violet' ? 'bg-violet' : 'bg-rose'
-                }`}
-              />
-              <p className="font-mono text-[10px] tracking-[0.25em] uppercase text-cloud-4">
-                {b.english}
-              </p>
-              <p className="mt-1 text-xs font-semibold tracking-widest uppercase text-cloud-2">
-                {b.label}
-              </p>
-              <h3 className="mt-4 font-display text-3xl font-bold text-cloud-0">
-                {b.title}
-              </h3>
-              <ul className="mt-7 space-y-4">
-                {b.points.map((p, idx) => (
-                  <li key={p} className="flex gap-3 text-sm leading-relaxed text-cloud-2">
-                    <span
-                      className="mt-1.5 h-2 w-2 shrink-0 rounded-full"
-                      style={{
-                        background:
-                          b.accent === 'iris'
-                            ? 'linear-gradient(135deg,#818cf8,#6366f1)'
-                            : b.accent === 'violet'
-                              ? 'linear-gradient(135deg,#c084fc,#a855f7)'
-                              : 'linear-gradient(135deg,#f472b6,#ec4899)',
-                        boxShadow: `0 0 8px ${
-                          b.accent === 'iris' ? '#6366f1' : b.accent === 'violet' ? '#a855f7' : '#ec4899'
-                        }`,
-                      }}
-                    />
+            <div
+              key={b.label}
+              className="rounded-2xl border border-ink/5 bg-white/70 p-8 backdrop-blur-sm"
+            >
+              <p className="text-xs font-medium tracking-widest uppercase text-warm-700">{b.label}</p>
+              <h3 className="mt-3 font-display text-2xl font-bold text-ink">{b.title}</h3>
+              <ul className="mt-5 space-y-3">
+                {b.points.map((p) => (
+                  <li key={p} className="flex gap-2 text-sm leading-relaxed text-ink-light">
+                    <span className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-warm-500" />
                     {p}
                   </li>
                 ))}
@@ -493,182 +385,105 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* ==========================================================
-       *  SERVICES
-       * ========================================================== */}
-      <section className="relative border-y border-white/5 bg-night-1">
-        <div className="relative mx-auto max-w-7xl px-6 py-28">
-          <div className="mb-16 max-w-3xl">
-            <p className="font-mono text-xs tracking-[0.3em] uppercase text-cloud-4">
-              <span className="text-grad-primary">◆</span> 06 · Services
-            </p>
-            <h2 className="mt-4 font-display text-4xl font-black tracking-tight text-cloud-0 sm:text-5xl">
-              더 나아간 지원
-            </h2>
+      {/* Latest blog posts */}
+      <section className="relative border-t border-ink/5 bg-warm-50/60">
+        <div className="mx-auto max-w-6xl px-6 py-24">
+          <div className="mb-12 flex items-end justify-between">
+            <div>
+              <p className="text-xs font-medium tracking-[0.3em] uppercase text-warm-600">Journal</p>
+              <h2 className="mt-3 font-display text-3xl font-bold text-ink">실무 가이드</h2>
+              <p className="mt-3 text-ink-light">
+                폐업 절차, 지원금 신청, 상권 분석 — 현장에서 자주 묻는 질문을 글로 정리합니다
+              </p>
+            </div>
+            <Link
+              href="/blog"
+              className="hidden text-sm font-medium text-warm-700 hover:text-warm-600 md:inline-flex"
+            >
+              블로그 전체 보기 →
+            </Link>
           </div>
-          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-            {SERVICES.map((s) => (
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+            {latestPosts.map((post) => (
               <Link
-                key={s.title}
-                href={s.href}
-                className="grad-border group relative flex gap-6 p-8"
+                key={post.slug}
+                href={`/blog/${post.slug}`}
+                className="group flex flex-col rounded-2xl border border-ink/5 bg-white/70 p-6 backdrop-blur-sm card-lift"
               >
-                <div
-                  className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl text-white shadow-[0_10px_30px_-8px_rgba(168,85,247,0.5)]"
-                  style={{
-                    background:
-                      'linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%)',
-                  }}
-                >
-                  {s.icon}
-                </div>
-                <div className="flex-1">
-                  <p className="font-mono text-[10px] tracking-[0.25em] uppercase text-cloud-4">
-                    {s.tag}
-                  </p>
-                  <h3 className="mt-1 font-display text-2xl font-bold text-cloud-0">
-                    {s.title}
-                  </h3>
-                  <p className="mt-3 text-sm leading-relaxed text-cloud-2">
-                    {s.desc}
-                  </p>
-                  <span className="link-grad mt-5 inline-flex items-center gap-2 text-sm font-semibold text-cloud-1">
-                    {s.cta}
-                    <span className="text-grad-primary">→</span>
-                  </span>
-                </div>
+                <span className="inline-flex w-fit rounded-full bg-warm-100 px-2.5 py-0.5 text-xs font-medium text-warm-800">
+                  {post.category}
+                </span>
+                <h3 className="mt-3 flex-1 font-display font-bold leading-snug text-ink group-hover:text-warm-700 transition-colors line-clamp-2">
+                  {post.title}
+                </h3>
+                <p className="mt-2 text-xs leading-relaxed text-ink-muted line-clamp-3">
+                  {post.description}
+                </p>
+                <p className="mt-4 text-xs text-ink-muted">
+                  {post.publishedAt} · {post.readMinutes}분 읽기
+                </p>
               </Link>
             ))}
           </div>
         </div>
       </section>
 
-      {/* ==========================================================
-       *  BLOG
-       * ========================================================== */}
-      <section className="relative mx-auto max-w-7xl px-6 py-28">
-        <div className="mb-14 flex flex-col items-start justify-between gap-6 md:flex-row md:items-end">
-          <div>
-            <p className="font-mono text-xs tracking-[0.3em] uppercase text-cloud-4">
-              <span className="text-grad-primary">◆</span> 07 · Journal
-            </p>
-            <h2 className="mt-4 font-display text-4xl font-black tracking-tight text-cloud-0 sm:text-5xl">
-              실무 <span className="font-serif italic font-normal text-cloud-2">가이드</span>
-            </h2>
-            <p className="mt-5 max-w-xl text-cloud-2">
-              폐업 절차, 지원금 신청, 상권 분석 — 현장에서 자주 묻는
-              질문을 글로 정리합니다.
-            </p>
-          </div>
-          <Link
-            href="/blog"
-            className="link-grad hidden text-sm font-semibold text-cloud-1 md:inline-flex md:items-center md:gap-2"
-          >
-            블로그 전체 보기 <span className="text-grad-primary">→</span>
-          </Link>
+      {/* FAQ preview */}
+      <section className="relative mx-auto max-w-4xl px-6 py-24">
+        <div className="mb-12 text-center">
+          <p className="text-xs font-medium tracking-[0.3em] uppercase text-warm-600">FAQ</p>
+          <h2 className="mt-4 font-display text-3xl font-bold text-ink sm:text-4xl">
+            자주 묻는 질문
+          </h2>
         </div>
-        <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
-          {latestPosts.map((post) => (
-            <Link
-              key={post.slug}
-              href={`/blog/${post.slug}`}
-              className="group flex flex-col rounded-2xl border border-white/[0.08] bg-white/[0.02] p-6 transition-all hover:-translate-y-1 hover:border-white/20 hover:bg-white/[0.05]"
+        <div className="space-y-3">
+          {FAQ_PREVIEW.map((f, i) => (
+            <details
+              key={i}
+              className="group rounded-2xl border border-ink/5 bg-white/70 p-6 backdrop-blur-sm"
             >
-              <span className="inline-flex w-fit rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 font-mono text-[10px] tracking-widest uppercase text-cloud-2">
-                {post.category}
-              </span>
-              <h3 className="mt-4 flex-1 font-display font-bold leading-snug text-cloud-0 transition-colors group-hover:text-grad-primary line-clamp-2">
-                {post.title}
-              </h3>
-              <p className="mt-3 text-xs leading-relaxed text-cloud-3 line-clamp-3">
-                {post.description}
-              </p>
-              <p className="mt-5 font-mono text-[10px] tracking-wider text-cloud-4">
-                {post.publishedAt} · {post.readMinutes}min
-              </p>
-            </Link>
+              <summary className="flex cursor-pointer items-start justify-between gap-4 list-none">
+                <span className="font-display font-semibold text-ink">{f.q}</span>
+                <span className="mt-1 shrink-0 text-ink-muted transition-transform group-open:rotate-45">
+                  +
+                </span>
+              </summary>
+              <p className="mt-4 text-sm leading-relaxed text-ink-light">{f.a}</p>
+            </details>
           ))}
         </div>
-      </section>
-
-      {/* ==========================================================
-       *  FAQ
-       * ========================================================== */}
-      <section className="relative border-y border-white/5 bg-night-1">
-        <div className="pointer-events-none absolute inset-0 overflow-hidden opacity-60">
-          <div className="orb orb-violet absolute top-0 right-0 h-96 w-96" />
-          <div className="orb orb-iris absolute bottom-0 left-0 h-96 w-96" />
-        </div>
-        <div className="relative mx-auto max-w-4xl px-6 py-28">
-          <div className="mb-14 text-center">
-            <p className="font-mono text-xs tracking-[0.3em] uppercase text-cloud-4">
-              <span className="text-grad-primary">◆</span> 08 · FAQ
-            </p>
-            <h2 className="mt-4 font-display text-4xl font-black tracking-tight text-cloud-0 sm:text-5xl">
-              자주 묻는 <span className="text-grad-primary">질문</span>
-            </h2>
-          </div>
-          <div className="space-y-3">
-            {FAQ_PREVIEW.map((f, i) => (
-              <details
-                key={i}
-                className="group glass-darker rounded-2xl p-6 open:border-white/20 transition-colors"
-              >
-                <summary className="flex cursor-pointer items-start justify-between gap-4 list-none">
-                  <span className="font-display text-base font-semibold text-cloud-0">{f.q}</span>
-                  <span className="mt-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-white/15 text-sm text-cloud-2 transition-transform group-open:rotate-45 group-open:border-white/30 group-open:text-cloud-0">
-                    +
-                  </span>
-                </summary>
-                <p className="mt-4 text-sm leading-relaxed text-cloud-2">{f.a}</p>
-              </details>
-            ))}
-          </div>
-          <div className="mt-12 text-center">
-            <Link
-              href="/faq"
-              className="inline-flex items-center gap-2 font-mono text-xs tracking-widest uppercase text-cloud-2 hover:text-cloud-0 transition-colors"
-            >
-              전체 FAQ 보기 <span className="text-grad-primary">→</span>
-            </Link>
-          </div>
+        <div className="mt-10 text-center">
+          <Link
+            href="/faq"
+            className="inline-flex items-center gap-2 text-sm font-medium text-warm-700 hover:text-warm-600"
+          >
+            전체 FAQ 보기
+            <span>→</span>
+          </Link>
         </div>
       </section>
 
-      {/* ==========================================================
-       *  FINAL CTA
-       * ========================================================== */}
-      <section className="relative overflow-hidden">
-        {/* Massive gradient background */}
-        <div
-          className="pointer-events-none absolute inset-0 opacity-90"
-          style={{
-            background:
-              'radial-gradient(ellipse at 30% 40%, #6366f1 0%, transparent 55%), radial-gradient(ellipse at 70% 60%, #ec4899 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, #f97316 0%, transparent 65%), #05050f',
-          }}
-        />
-        <div className="pointer-events-none absolute inset-0 bg-grid opacity-30" />
-        <div className="pointer-events-none absolute inset-0 bg-radial-fade opacity-50" />
-
-        <div className="relative mx-auto max-w-5xl px-6 py-32 text-center">
-          <p className="font-mono text-xs tracking-[0.3em] uppercase text-cloud-3">
-            Get started
-          </p>
-          <h2 className="mt-5 font-display text-5xl font-black tracking-tight text-cloud-0 sm:text-6xl md:text-7xl">
-            <span className="font-serif italic font-normal text-cloud-0">지금</span>,<br />
-            <span className="text-grad-rainbow">새로 시작</span>하세요
+      {/* Final CTA */}
+      <section className="relative border-t border-ink/5 bg-ink">
+        <div className="mx-auto max-w-5xl px-6 py-20 text-center">
+          <h2 className="font-display text-3xl font-bold text-warm-50 sm:text-4xl">
+            지금 매장을 등록하거나 둘러보세요
           </h2>
-          <p className="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-cloud-2">
-            한 번의 등록으로 인수자 · 철거 · 인테리어 · 지원금까지.
-            <br className="hidden md:block" />
-            흩어진 절차를 한 흐름으로 정돈합니다.
+          <p className="mt-4 text-sm text-warm-200 sm:text-base">
+            한 번의 등록으로 인수자, 철거업체, 인테리어업체, 지원금까지 연결됩니다
           </p>
-          <div className="mt-12 flex flex-wrap justify-center gap-4">
-            <Link href="/stores/new" className="btn-grad inline-flex items-center gap-2 text-base">
-              매장 등록 <span>→</span>
+          <div className="mt-10 flex flex-wrap justify-center gap-3">
+            <Link
+              href="/stores/new"
+              className="rounded-full bg-warm-500 px-8 py-4 text-sm font-medium text-warm-50 transition-colors hover:bg-warm-400"
+            >
+              매장 등록
             </Link>
-            <Link href="/stores" className="btn-ghost inline-flex items-center gap-2 text-base">
-              매장 둘러보기 <span>→</span>
+            <Link
+              href="/stores"
+              className="rounded-full border-2 border-warm-200/30 px-8 py-4 text-sm font-medium text-warm-50 transition-colors hover:border-warm-200/60"
+            >
+              매장 둘러보기
             </Link>
           </div>
         </div>