diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index c4aaabc..9605434 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1,8 +1,12 @@
 @import "tailwindcss";
 
+/* Force light mode: dark: classes only activate with .dark ancestor */
+@custom-variant dark (&:is(.dark *));
+
 :root {
   --background: #FFFAF5;
   --foreground: #171717;
+  --surface: #FFFFFF;
   --brand-50:  #FFF8F0;
   --brand-100: #FFEDD5;
   --brand-200: #FFD6A5;
@@ -14,12 +18,13 @@
   --brand-800: #9A4500;
   --brand-900: #6B3000;
   --brand-950: #3D1A00;
-  color-scheme: light dark;
+  color-scheme: light;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-surface: var(--surface);
   --color-brand-50: var(--brand-50);
   --color-brand-100: var(--brand-100);
   --color-brand-200: var(--brand-200);
@@ -34,12 +39,14 @@
   --font-sans: var(--font-pretendard), var(--font-geist), system-ui, sans-serif;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+/* Dark mode CSS vars (disabled — activate by adding .dark class to <html>) */
+/*
+.dark {
+  --background: #12100E;
+  --foreground: #ededed;
+  --surface: #1C1916;
 }
+*/
 
 body {
   background: var(--background);
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 0476482..9a39e02 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -28,7 +28,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="ko" className="dark:bg-gray-950" suppressHydrationWarning>
+    <html lang="ko" className="bg-background" suppressHydrationWarning>
       <body className={`${pretendard.variable} ${geist.variable} font-sans antialiased`}>
         <Providers>{children}</Providers>
       </body>
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 2513ac9..2a79abf 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -583,9 +583,9 @@ export default function Home() {
   );
 
   return (
-    <div className="h-screen flex flex-col bg-white dark:bg-gray-950">
+    <div className="h-screen flex flex-col bg-background">
       {/* ── Header row 1: Logo + User ── */}
-      <header className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b dark:border-gray-800 shrink-0">
+      <header className="bg-surface/80 backdrop-blur-md border-b dark:border-gray-800 shrink-0">
         <div className="px-5 py-3 flex items-center justify-between">
           <button onClick={handleReset} className="text-lg font-bold whitespace-nowrap">
             Tasteby
@@ -600,12 +600,12 @@ export default function Home() {
               </div>
               <button
                 onClick={handleReset}
-                className="p-1.5 text-gray-400 dark:text-gray-500 hover:text-brand-500 dark:hover:text-brand-400 transition-colors"
+                className="p-1.5 text-gray-500 dark:text-gray-500 hover:text-brand-500 dark:hover:text-brand-400 transition-colors"
                 title="초기화"
               >
                 <svg viewBox="0 0 24 24" className="w-4.5 h-4.5 fill-current"><path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
               </button>
-              <span className="text-xs text-gray-400 dark:text-gray-500 tabular-nums">
+              <span className="text-xs text-gray-500 dark:text-gray-500 tabular-nums">
                 {filteredRestaurants.length}개
               </span>
               <div className="w-px h-4 bg-gray-200 dark:bg-gray-700" />
@@ -659,7 +659,7 @@ export default function Home() {
                   </span>
                   <button
                     onClick={logout}
-                    className="px-2 py-0.5 text-[10px] text-gray-400 dark:text-gray-500 border border-gray-200 dark:border-gray-700 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 transition-colors"
+                    className="px-2 py-0.5 text-[10px] text-gray-500 dark:text-gray-500 border border-gray-200 dark:border-gray-700 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 transition-colors"
                   >
                     로그아웃
                   </button>
@@ -694,7 +694,7 @@ export default function Home() {
                         <p className={`text-xs font-semibold truncate ${
                           channelFilter === ch.channel_name ? "text-brand-600 dark:text-brand-400" : "dark:text-gray-200"
                         }`}>{ch.channel_name}</p>
-                        {ch.description && <p className="text-[10px] text-gray-400 dark:text-gray-500 truncate">{ch.description}</p>}
+                        {ch.description && <p className="text-[10px] text-gray-500 dark:text-gray-500 truncate">{ch.description}</p>}
                       </div>
                     </button>
                   ))}
@@ -705,7 +705,7 @@ export default function Home() {
             <div className="flex items-center gap-1.5 text-xs">
               {/* 음식 필터 그룹 */}
               <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 rounded-lg px-2 py-1">
-                <span className="text-gray-400 dark:text-gray-500 text-[10px] font-medium shrink-0">음식</span>
+                <span className="text-gray-500 dark:text-gray-500 text-[10px] font-medium shrink-0">음식</span>
                 <select
                   value={cuisineFilter}
                   onChange={(e) => { setCuisineFilter(e.target.value); if (e.target.value) setBoundsFilterOn(false); }}
@@ -750,7 +750,7 @@ export default function Home() {
               </div>
               {/* 지역 필터 그룹 */}
               <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 rounded-lg px-2 py-1">
-                <span className="text-gray-400 dark:text-gray-500 text-[10px] font-medium shrink-0">지역</span>
+                <span className="text-gray-500 dark:text-gray-500 text-[10px] font-medium shrink-0">지역</span>
                 <select
                   value={countryFilter}
                   onChange={(e) => handleCountryChange(e.target.value)}
@@ -1074,7 +1074,7 @@ export default function Home() {
       <div className="hidden md:flex flex-1 overflow-hidden">
         {viewMode === "map" ? (
           <>
-            <aside className="w-80 bg-white dark:bg-gray-950 border-r dark:border-gray-800 overflow-y-auto shrink-0">
+            <aside className="w-80 bg-surface border-r dark:border-gray-800 overflow-y-auto shrink-0">
               {sidebarContent}
             </aside>
             <main className="flex-1 relative">
@@ -1096,7 +1096,7 @@ export default function Home() {
           </>
         ) : (
           <>
-            <aside className="flex-1 bg-white dark:bg-gray-950 overflow-y-auto">
+            <aside className="flex-1 bg-surface overflow-y-auto">
               {sidebarContent}
             </aside>
             <main className="w-[40%] shrink-0 relative border-l dark:border-gray-800">
@@ -1134,7 +1134,7 @@ export default function Home() {
               onMyLocation={handleMyLocation}
               activeChannel={channelFilter || undefined}
             />
-            <div className="absolute top-2 left-2 bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm rounded-lg px-3 py-1.5 shadow-sm z-10">
+            <div className="absolute top-2 left-2 bg-surface/90 backdrop-blur-sm rounded-lg px-3 py-1.5 shadow-sm z-10">
               <span className="text-xs font-medium text-brand-600 dark:text-brand-400">
                 내 주변 {filteredRestaurants.length}개
               </span>
@@ -1147,7 +1147,7 @@ export default function Home() {
           </div>
         ) : mobileTab === "profile" ? (
           /* 내정보 */
-          <div className="flex-1 overflow-y-auto bg-white dark:bg-gray-950">
+          <div className="flex-1 overflow-y-auto bg-surface">
             {!user ? (
               <div className="flex flex-col items-center justify-center h-full gap-4 px-6">
                 <p className="text-gray-500 dark:text-gray-400 text-sm">로그인하고 리뷰와 찜 목록을 관리하세요</p>
@@ -1207,7 +1207,7 @@ export default function Home() {
           </div>
         ) : (
           /* 홈 / 식당 목록 / 찜: 리스트 표시 */
-          <div className="flex-1 overflow-y-auto bg-white dark:bg-gray-950">
+          <div className="flex-1 overflow-y-auto bg-surface">
             {mobileTab === "favorites" && !user ? (
               <div className="flex flex-col items-center justify-center h-full gap-4 px-6">
                 <p className="text-gray-500 dark:text-gray-400 text-sm">로그인하고 찜 목록을 확인하세요</p>
@@ -1235,7 +1235,7 @@ export default function Home() {
       </div>
 
       {/* ── Mobile Bottom Nav (fixed) ── */}
-      <nav className="md:hidden fixed bottom-0 left-0 right-0 z-40 border-t dark:border-gray-800 bg-white dark:bg-gray-950 safe-area-bottom">
+      <nav className="md:hidden fixed bottom-0 left-0 right-0 z-40 border-t dark:border-gray-800 bg-surface safe-area-bottom">
         <div className="flex items-stretch h-14">
             {([
               { key: "home", label: "홈", icon: (
@@ -1260,7 +1260,7 @@ export default function Home() {
                 className={`flex-1 flex flex-col items-center justify-center gap-0.5 py-2 transition-colors ${
                   mobileTab === tab.key
                     ? "text-brand-600 dark:text-brand-400"
-                    : "text-gray-400 dark:text-gray-500"
+                    : "text-gray-500 dark:text-gray-500"
                 }`}
               >
                 {tab.icon}
@@ -1271,7 +1271,7 @@ export default function Home() {
         </nav>
 
       {/* Desktop Footer */}
-      <footer className="hidden md:flex shrink-0 border-t dark:border-gray-800 bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm py-2.5 items-center justify-center gap-2 text-[11px] text-gray-400 dark:text-gray-500 group">
+      <footer className="hidden md:flex shrink-0 border-t dark:border-gray-800 bg-surface/60 backdrop-blur-sm py-2.5 items-center justify-center gap-2 text-[11px] text-gray-500 dark:text-gray-500 group">
         <div className="relative">
           <img
             src="/icon.jpg"
diff --git a/frontend/src/components/BottomSheet.tsx b/frontend/src/components/BottomSheet.tsx
index b68106f..669c16e 100644
--- a/frontend/src/components/BottomSheet.tsx
+++ b/frontend/src/components/BottomSheet.tsx
@@ -89,7 +89,7 @@ export default function BottomSheet({ open, onClose, children }: BottomSheetProp
       {/* Sheet */}
       <div
         ref={sheetRef}
-        className="fixed bottom-0 left-0 right-0 z-50 md:hidden flex flex-col bg-white/85 dark:bg-gray-900/90 backdrop-blur-xl rounded-t-2xl shadow-2xl"
+        className="fixed bottom-0 left-0 right-0 z-50 md:hidden flex flex-col bg-surface/85 backdrop-blur-xl rounded-t-2xl shadow-2xl"
         style={{
           height: `${height * 100}vh`,
           transition: dragging ? "none" : "height 0.3s cubic-bezier(0.2, 0, 0, 1)",
diff --git a/frontend/src/components/LoginMenu.tsx b/frontend/src/components/LoginMenu.tsx
index c49621c..acef55e 100644
--- a/frontend/src/components/LoginMenu.tsx
+++ b/frontend/src/components/LoginMenu.tsx
@@ -26,7 +26,7 @@ export default function LoginMenu({ onGoogleSuccess }: LoginMenuProps) {
           style={{ zIndex: 99999 }}
           onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}
         >
-          <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl p-6 mx-4 w-full max-w-xs space-y-4">
+          <div className="bg-surface rounded-2xl shadow-2xl p-6 mx-4 w-full max-w-xs space-y-4">
             <div className="flex items-center justify-between">
               <h3 className="text-base font-semibold dark:text-gray-100">로그인</h3>
               <button
diff --git a/frontend/src/components/MapView.tsx b/frontend/src/components/MapView.tsx
index 8125dcf..0f7c846 100644
--- a/frontend/src/components/MapView.tsx
+++ b/frontend/src/components/MapView.tsx
@@ -231,7 +231,7 @@ export default function MapView({ restaurants, selected, onSelectRestaurant, onB
       {onMyLocation && (
         <button
           onClick={onMyLocation}
-          className="absolute top-2 right-2 w-9 h-9 bg-white dark:bg-gray-900 rounded-lg shadow-md flex items-center justify-center text-gray-600 dark:text-gray-300 hover:text-brand-500 dark:hover:text-brand-400 transition-colors z-10"
+          className="absolute top-2 right-2 w-9 h-9 bg-surface rounded-lg shadow-md flex items-center justify-center text-gray-600 dark:text-gray-300 hover:text-brand-500 dark:hover:text-brand-400 transition-colors z-10"
           title="내 위치"
         >
           <svg viewBox="0 0 24 24" className="w-5 h-5 fill-current">
@@ -240,7 +240,7 @@ export default function MapView({ restaurants, selected, onSelectRestaurant, onB
         </button>
       )}
       {channelNames.length > 0 && (
-        <div className="absolute bottom-2 left-2 bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm rounded-lg shadow px-2.5 py-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] z-10">
+        <div className="absolute bottom-2 left-2 bg-surface/90 backdrop-blur-sm rounded-lg shadow px-2.5 py-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] z-10">
           {channelNames.map((ch) => (
             <div key={ch} className="flex items-center gap-1">
               <span
diff --git a/frontend/src/components/RestaurantList.tsx b/frontend/src/components/RestaurantList.tsx
index cc74c4a..e15100c 100644
--- a/frontend/src/components/RestaurantList.tsx
+++ b/frontend/src/components/RestaurantList.tsx
@@ -40,11 +40,11 @@ export default function RestaurantList({
           className={`w-full text-left p-3 rounded-xl shadow-sm border transition-all hover:shadow-md hover:-translate-y-0.5 ${
             selectedId === r.id
               ? "bg-brand-50 dark:bg-brand-900/20 border-brand-300 dark:border-brand-700 shadow-brand-100 dark:shadow-brand-900/10"
-              : "bg-white dark:bg-gray-900 border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800"
+              : "bg-surface border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800"
           }`}
         >
           <div className="flex items-start justify-between gap-2">
-            <h4 className="font-semibold text-sm dark:text-gray-100">
+            <h4 className="font-semibold text-sm text-gray-900 dark:text-gray-100">
               <span className="mr-1">{getCuisineIcon(r.cuisine_type)}</span>
               {r.name}
             </h4>
@@ -56,14 +56,14 @@ export default function RestaurantList({
           </div>
           <div className="flex flex-wrap gap-x-2 gap-y-0.5 mt-1.5 text-xs">
             {r.cuisine_type && (
-              <span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-gray-600 dark:text-gray-400">{r.cuisine_type}</span>
+              <span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-gray-700 dark:text-gray-400">{r.cuisine_type}</span>
             )}
             {r.price_range && (
-              <span className="px-1.5 py-0.5 bg-gray-50 dark:bg-gray-800 rounded text-gray-600 dark:text-gray-400">{r.price_range}</span>
+              <span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-gray-700 dark:text-gray-400">{r.price_range}</span>
             )}
           </div>
           {r.region && (
-            <p className="mt-1 text-xs text-gray-400 dark:text-gray-500 truncate">{r.region}</p>
+            <p className="mt-1 text-xs text-gray-500 dark:text-gray-500 truncate">{r.region}</p>
           )}
           {r.foods_mentioned && r.foods_mentioned.length > 0 && (
             <div className="flex flex-wrap gap-1 mt-1.5">
@@ -76,7 +76,7 @@ export default function RestaurantList({
                 </span>
               ))}
               {r.foods_mentioned.length > 5 && (
-                <span className="text-[10px] text-gray-400">+{r.foods_mentioned.length - 5}</span>
+                <span className="text-[10px] text-gray-500">+{r.foods_mentioned.length - 5}</span>
               )}
             </div>
           )}
diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
index b23820a..a48c5dc 100644
--- a/frontend/src/components/SearchBar.tsx
+++ b/frontend/src/components/SearchBar.tsx
@@ -36,7 +36,7 @@ export default function SearchBar({ onSearch, isLoading }: SearchBarProps) {
         value={query}
         onChange={(e) => setQuery(e.target.value)}
         placeholder="식당, 지역, 음식 검색..."
-        className="w-full pl-9 pr-3 py-2 bg-gray-100 dark:bg-gray-800 border border-transparent focus:border-brand-400 focus:bg-white dark:focus:bg-gray-900 rounded-xl text-sm outline-none transition-all dark:text-gray-200 dark:placeholder-gray-500"
+        className="w-full pl-9 pr-3 py-2 bg-gray-100 dark:bg-gray-800 border border-transparent focus:border-brand-400 focus:bg-surface rounded-xl text-sm outline-none transition-all dark:text-gray-200 dark:placeholder-gray-500"
       />
       {isLoading && (
         <div className="absolute right-3 top-1/2 -translate-y-1/2">
