diff --git a/client/app/global.css b/client/app/global.css
index 5837000..892fa97 100644
--- a/client/app/global.css
+++ b/client/app/global.css
@@ -12,123 +12,86 @@
    * A different format will require also updating the theme in tailwind.config.ts.
   */
   :root {
-    --background: 270 30% 98%;
-    --foreground: 270 30% 15%;
+    --background: 270 15% 96%;
+    --foreground: 270 40% 12%;
 
     --card: 0 0% 100%;
-    --card-foreground: 270 30% 15%;
+    --card-foreground: 270 40% 12%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 270 30% 15%;
+    --popover-foreground: 270 40% 12%;
 
     --primary: 270 84% 56%;
     --primary-foreground: 0 0% 100%;
 
-    --secondary: 270 30% 92%;
-    --secondary-foreground: 270 84% 56%;
+    --secondary: 270 25% 90%;
+    --secondary-foreground: 270 84% 50%;
 
-    --muted: 270 15% 75%;
-    --muted-foreground: 270 20% 40%;
+    --muted: 270 15% 70%;
+    --muted-foreground: 270 25% 35%;
 
     --accent: 270 84% 56%;
     --accent-foreground: 0 0% 100%;
 
-    --destructive: 0 84% 60%;
+    --destructive: 0 84% 55%;
     --destructive-foreground: 0 0% 100%;
 
-    --border: 270 30% 90%;
-    --input: 270 20% 96%;
+    --border: 270 30% 85%;
+    --input: 270 20% 92%;
     --ring: 270 84% 56%;
 
     --radius: 0.75rem;
 
-    --sidebar-background: 270 30% 98%;
-    --sidebar-foreground: 270 30% 15%;
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 270 40% 12%;
     --sidebar-primary: 270 84% 56%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 270 30% 94%;
-    --sidebar-accent-foreground: 270 84% 50%;
-    --sidebar-border: 270 30% 90%;
+    --sidebar-accent: 270 30% 92%;
+    --sidebar-accent-foreground: 270 84% 45%;
+    --sidebar-border: 270 25% 88%;
     --sidebar-ring: 270 84% 56%;
   }
 
   .dark {
-    --background: 270 20% 8%;
-    --foreground: 270 10% 92%;
+    --background: 240 6% 6%;
+    --foreground: 0 0% 93%;
 
-    --card: 270 20% 12%;
-    --card-foreground: 270 10% 88%;
+    --card: 240 5% 10%;
+    --card-foreground: 0 0% 90%;
 
-    --popover: 270 20% 12%;
-    --popover-foreground: 270 10% 88%;
+    --popover: 240 5% 10%;
+    --popover-foreground: 0 0% 90%;
 
-    --primary: 270 84% 56%;
+    --primary: 270 84% 60%;
     --primary-foreground: 0 0% 100%;
 
-    --secondary: 270 20% 20%;
-    --secondary-foreground: 270 84% 56%;
+    --secondary: 240 5% 15%;
+    --secondary-foreground: 270 80% 70%;
 
-    --muted: 270 15% 30%;
-    --muted-foreground: 270 10% 60%;
+    --muted: 240 4% 22%;
+    --muted-foreground: 240 5% 55%;
 
-    --accent: 270 84% 56%;
+    --accent: 270 84% 60%;
     --accent-foreground: 0 0% 100%;
 
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 100%;
 
-    --border: 270 20% 20%;
-    --input: 270 18% 15%;
-    --ring: 270 84% 56%;
+    --border: 240 5% 15%;
+    --input: 240 5% 12%;
+    --ring: 270 84% 60%;
 
-    --sidebar-background: 270 20% 8%;
-    --sidebar-foreground: 270 10% 88%;
-    --sidebar-primary: 270 84% 56%;
+    --sidebar-background: 240 6% 8%;
+    --sidebar-foreground: 0 0% 88%;
+    --sidebar-primary: 270 84% 60%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 270 30% 18%;
-    --sidebar-accent-foreground: 270 84% 70%;
-    --sidebar-border: 270 20% 16%;
-    --sidebar-ring: 270 84% 56%;
+    --sidebar-accent: 240 5% 14%;
+    --sidebar-accent-foreground: 270 80% 75%;
+    --sidebar-border: 240 5% 13%;
+    --sidebar-ring: 270 84% 60%;
   }
 
-  .light {
-    --background: 270 30% 98%;
-    --foreground: 270 30% 15%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 270 30% 15%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 270 30% 15%;
-
-    --primary: 270 84% 56%;
-    --primary-foreground: 0 0% 100%;
-
-    --secondary: 270 30% 92%;
-    --secondary-foreground: 270 84% 56%;
-
-    --muted: 270 15% 75%;
-    --muted-foreground: 270 20% 40%;
-
-    --accent: 270 84% 56%;
-    --accent-foreground: 0 0% 100%;
-
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 100%;
-
-    --border: 270 30% 90%;
-    --input: 270 20% 96%;
-    --ring: 270 84% 56%;
-
-    --sidebar-background: 270 30% 98%;
-    --sidebar-foreground: 270 30% 15%;
-    --sidebar-primary: 270 84% 56%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 270 30% 94%;
-    --sidebar-accent-foreground: 270 84% 50%;
-    --sidebar-border: 270 30% 90%;
-    --sidebar-ring: 270 84% 56%;
-  }
+  /* .light는 :root와 동일하므로 생략 — :root가 라이트 기본값 */
 }
 
 @layer base {
@@ -140,14 +103,8 @@
     @apply text-foreground;
   }
 
-  body.dark {
-    background: linear-gradient(145deg, hsl(270, 30%, 6%) 0%, hsl(280, 20%, 4%) 40%, hsl(300, 15%, 8%) 100%);
-    background-attachment: fixed;
-  }
-
-  body.light {
-    background: linear-gradient(145deg, hsl(270, 40%, 97%) 0%, hsl(0, 0%, 100%) 40%, hsl(330, 30%, 97%) 100%);
-    background-attachment: fixed;
+  body {
+    background: hsl(var(--background));
   }
 
   :where(p, span, li, h1, h2, h3, h4, h5, h6, a, button, label, td, th) {
@@ -182,73 +139,162 @@
   }
 }
 
-/* ── Design Token Utility Classes ── */
+/* ══════════════════════════════════════════
+   Design Token System (로그인 카드 스타일 기반)
+   ══════════════════════════════════════════ */
 
-/* 모달 오버레이 */
-.om-modal-overlay {
-  @apply fixed inset-0 z-50 flex items-center justify-center p-4;
+/* ── 카드 ── */
+.om-card {
+  @apply rounded-2xl transition-all duration-300;
 }
-
-.om-modal-overlay.dark {
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(8px);
+.dark .om-card {
+  background: rgba(18, 18, 24, 0.8);
+  @apply border border-white/[0.07] hover:border-purple-500/30
+         backdrop-blur-xl;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
 }
-
-.om-modal-overlay.light {
-  background: rgba(120, 80, 160, 0.15);
-  backdrop-filter: blur(8px);
+.light .om-card {
+  @apply bg-white border border-purple-200/60 hover:border-purple-300;
+  box-shadow:
+    0 4px 16px rgba(147, 51, 234, 0.06),
+    0 1px 3px rgba(147, 51, 234, 0.04);
+}
+.light .om-card:hover {
+  box-shadow:
+    0 8px 30px rgba(147, 51, 234, 0.1),
+    0 2px 6px rgba(147, 51, 234, 0.06);
 }
 
-/* 모달 카드 — light: 글래스모피즘 */
+/* ── 모달 카드 ── */
 .om-modal-card {
   @apply rounded-2xl transition-all duration-300;
 }
-
 .dark .om-modal-card {
-  @apply bg-gradient-to-br from-purple-900/60 via-purple-950/80 to-pink-900/40
-         border border-purple-500/25 backdrop-blur-xl
-         shadow-2xl shadow-purple-500/20;
+  background: rgba(16, 16, 22, 0.95);
+  @apply border border-white/[0.08] backdrop-blur-xl;
+  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.06);
 }
-
 .light .om-modal-card {
-  @apply bg-white/95 backdrop-blur-xl
-         border border-purple-200/80
-         shadow-2xl shadow-purple-300/30;
+  @apply bg-white backdrop-blur-xl border border-purple-200/70;
   box-shadow:
-    0 25px 50px -12px rgba(147, 51, 234, 0.15),
-    0 0 0 1px rgba(192, 132, 252, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+    0 25px 60px -12px rgba(147, 51, 234, 0.15),
+    0 8px 24px rgba(147, 51, 234, 0.06),
+    0 0 0 1px rgba(192, 132, 252, 0.08);
+}
+
+/* ── 인풋 ── */
+.om-input {
+  @apply w-full px-4 py-3 rounded-xl transition-all duration-200;
+}
+.dark .om-input {
+  @apply border border-white/[0.08] bg-white/[0.04] backdrop-blur-sm
+         text-white placeholder-white/30
+         focus:bg-white/[0.07] focus:border-purple-500/50 focus:ring-2 focus:ring-purple-500/20;
+}
+.light .om-input {
+  @apply border-2 border-purple-300/60 bg-purple-50
+         text-purple-950 placeholder-purple-400/60
+         focus:bg-white focus:border-purple-500 focus:ring-2 focus:ring-purple-300/40
+         shadow-sm;
+}
+
+/* ── 라벨 ── */
+.om-label {
+  @apply text-sm font-semibold flex items-center gap-2;
+}
+.dark .om-label { @apply text-white/90; }
+.light .om-label { @apply text-purple-900; }
+
+/* ── 아이콘 (보조) ── */
+.om-icon { @apply w-4 h-4; }
+.dark .om-icon { @apply text-purple-400; }
+.light .om-icon { @apply text-purple-600; }
+
+/* ── 제목 ── */
+.om-title {
+  @apply text-2xl font-bold;
 }
+.dark .om-title { @apply text-white; }
+.light .om-title { @apply text-purple-950; }
 
-/* 그래디언트 버튼 — Primary CTA */
+.om-subtitle {
+  @apply text-sm;
+}
+.dark .om-subtitle { @apply text-white/60; }
+.light .om-subtitle { @apply text-purple-600; }
+
+/* ── 구분선 ── */
+.om-divider {
+  @apply h-px;
+}
+.dark .om-divider { @apply bg-white/[0.06]; }
+.light .om-divider { @apply bg-purple-200; }
+
+/* ── 보조 텍스트/링크 ── */
+.om-text-link {
+  @apply font-semibold transition-colors;
+}
+.dark .om-text-link { @apply text-purple-300 hover:text-pink-300; }
+.light .om-text-link { @apply text-purple-600 hover:text-purple-800; }
+
+/* ── 그래디언트 버튼 — Primary CTA ── */
 .om-btn-primary {
   @apply bg-gradient-to-r from-purple-600 to-pink-600
          hover:from-purple-700 hover:to-pink-700
          text-white font-semibold rounded-xl
          shadow-lg shadow-purple-500/30
-         hover:shadow-xl
+         hover:shadow-xl hover:shadow-purple-500/50
          transition-all duration-300
-         disabled:opacity-50 disabled:cursor-not-allowed;
+         disabled:opacity-50 disabled:cursor-not-allowed
+         flex items-center justify-center gap-2;
 }
 
-/* 그래디언트 텍스트 */
-.om-gradient-text {
-  @apply bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent;
+/* ── 세컨더리 버튼 ── */
+.om-btn-secondary {
+  @apply rounded-xl font-medium transition-all duration-200;
+}
+.dark .om-btn-secondary {
+  @apply border border-white/[0.1] text-white/70
+         hover:bg-white/[0.06] hover:text-white;
+}
+.light .om-btn-secondary {
+  @apply border-2 border-purple-200/70 text-purple-700
+         hover:bg-purple-50 hover:border-purple-300
+         hover:shadow-sm;
 }
 
-/* 텍스트 색상 (CSS 변수 기반 — dark/light 자동 대응) */
-.om-text-primary {
-  color: hsl(var(--foreground));
+/* ── 섹션 패널 ── */
+.om-panel {
+  @apply rounded-2xl p-6 transition-all duration-300;
+}
+.dark .om-panel {
+  background: rgba(18, 18, 24, 0.6);
+  @apply border border-white/[0.06] backdrop-blur-xl;
+}
+.light .om-panel {
+  @apply bg-white border border-purple-200/60;
+  box-shadow:
+    0 4px 16px rgba(147, 51, 234, 0.05),
+    0 1px 3px rgba(147, 51, 234, 0.03);
 }
 
-.om-text-secondary {
-  color: hsl(var(--muted-foreground));
+/* ── 뱃지 ── */
+.om-badge {
+  @apply px-2.5 py-1 rounded-full text-xs font-semibold;
 }
+.dark .om-badge { @apply bg-white/[0.06] text-purple-400 border border-white/[0.06]; }
+.light .om-badge { @apply bg-purple-100 text-purple-700 border border-purple-200/50; }
 
-.om-text-muted {
-  color: hsl(var(--muted-foreground) / 0.7);
+/* ── 그래디언트 텍스트 ── */
+.om-gradient-text {
+  @apply bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent;
 }
 
+/* ── 텍스트 색상 (CSS 변수 기반) ── */
+.om-text-primary { color: hsl(var(--foreground)); }
+.om-text-secondary { color: hsl(var(--muted-foreground)); }
+.om-text-muted { color: hsl(var(--muted-foreground) / 0.7); }
+
 @keyframes blob {
   0%, 100% { transform: translate(0, 0) scale(1); }
   33% { transform: translate(30px, -50px) scale(1.1); }
diff --git a/client/features/auth/api/manager.test.ts b/client/features/auth/api/manager.test.ts
index 6105155..6af74d6 100644
--- a/client/features/auth/api/manager.test.ts
+++ b/client/features/auth/api/manager.test.ts
@@ -7,7 +7,7 @@ vi.mock("./auth-fetch", () => ({
 }));
 
 import {
-  getAllEmployees,
+  getInvitableMembers,
   deactivateUser,
   activateUser,
   resetProfileImage,
@@ -27,10 +27,10 @@ beforeEach(() => {
 });
 
 describe("manager API", () => {
-  it("getAllEmployees with pagination", async () => {
-    await getAllEmployees({ page: 0, size: 10 });
+  it("getInvitableMembers with pagination", async () => {
+    await getInvitableMembers({ page: 0, size: 10 });
     const url = mockAuthFetch.mock.calls[0][0] as string;
-    expect(url).toContain("/v1/manager/employees");
+    expect(url).toContain("/v1/members/invitable");
     expect(url).toContain("page=0");
     expect(url).toContain("size=10");
   });
diff --git a/client/features/auth/api/manager.ts b/client/features/auth/api/manager.ts
index a0e303c..5c8b66c 100644
--- a/client/features/auth/api/manager.ts
+++ b/client/features/auth/api/manager.ts
@@ -13,10 +13,10 @@ import type {
   CompanyResponse,
 } from "./types";
 
-export function getAllEmployees(
+export function getInvitableMembers(
   pageable: Pageable,
 ): Promise<PageResponse<UserResponseDto>> {
-  return authFetch(`/v1/manager/employees${pageQs(pageable)}`);
+  return authFetch(`/v1/members/invitable${pageQs(pageable)}`);
 }
 
 export function deactivateUser(userId: number): Promise<UserResponseDto> {
diff --git a/client/features/auth/hooks.query.test.ts b/client/features/auth/hooks.query.test.ts
index 3a2671b..4200f95 100644
--- a/client/features/auth/hooks.query.test.ts
+++ b/client/features/auth/hooks.query.test.ts
@@ -13,7 +13,7 @@ vi.mock("@/features/auth/api", () => ({
   validateInvitation: vi.fn(),
   guestLogin: vi.fn(),
   findPassword: vi.fn(),
-  getAllEmployees: vi.fn(),
+  getInvitableMembers: vi.fn(),
   getJobTitles: vi.fn(),
   updateProfile: vi.fn(),
   withdraw: vi.fn(),
@@ -67,7 +67,7 @@ import {
   validateInvitation,
   guestLogin,
   findPassword,
-  getAllEmployees,
+  getInvitableMembers,
   getJobTitles,
   updateProfile,
   withdraw,
@@ -248,8 +248,8 @@ describe("useValidateInvitation", () => {
 // ── useAllEmployees ──
 
 describe("useAllEmployees", () => {
-  it("calls getAllEmployees with pageable", async () => {
-    vi.mocked(getAllEmployees).mockResolvedValue({ content: [] } as any);
+  it("calls getInvitableMembers with pageable", async () => {
+    vi.mocked(getInvitableMembers).mockResolvedValue({ content: [] } as any);
 
     const pageable = { page: 0, size: 10 };
     const { result } = renderHook(() => useAllEmployees(pageable), {
@@ -257,18 +257,18 @@ describe("useAllEmployees", () => {
     });
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true));
-    expect(getAllEmployees).toHaveBeenCalledWith(pageable);
+    expect(getInvitableMembers).toHaveBeenCalledWith(pageable);
   });
 
-  it("calls getAllEmployees with empty object when no pageable given", async () => {
-    vi.mocked(getAllEmployees).mockResolvedValue({ content: [] } as any);
+  it("calls getInvitableMembers with empty object when no pageable given", async () => {
+    vi.mocked(getInvitableMembers).mockResolvedValue({ content: [] } as any);
 
     const { result } = renderHook(() => useAllEmployees(), {
       wrapper: createWrapper(),
     });
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true));
-    expect(getAllEmployees).toHaveBeenCalledWith({});
+    expect(getInvitableMembers).toHaveBeenCalledWith({});
   });
 });
 
diff --git a/client/features/auth/hooks.ts b/client/features/auth/hooks.ts
index 1dd88e0..fd93169 100644
--- a/client/features/auth/hooks.ts
+++ b/client/features/auth/hooks.ts
@@ -9,7 +9,7 @@ import {
   validateInvitation as validateInvitationApi,
   guestLogin as guestLoginApi,
   findPassword as findPasswordApi,
-  getAllEmployees,
+  getInvitableMembers,
   getJobTitles,
   updateProfile,
   withdraw,
@@ -134,7 +134,7 @@ export function useAllEmployees(pageable?: Pageable, enabled = true) {
   );
   return useQuery({
     queryKey: AUTH_ADMIN_KEYS.employees(stablePageable),
-    queryFn: () => getAllEmployees(stablePageable ?? {}),
+    queryFn: () => getInvitableMembers(stablePageable ?? {}),
     enabled,
     staleTime: 5 * 60_000, // 5분 — 직원 목록은 자주 변경되지 않음
   });
diff --git a/client/features/dashboard/components/AudioPlayer.tsx b/client/features/dashboard/components/AudioPlayer.tsx
index a0151db..458a056 100644
--- a/client/features/dashboard/components/AudioPlayer.tsx
+++ b/client/features/dashboard/components/AudioPlayer.tsx
@@ -25,7 +25,7 @@ function formatTime(seconds: number): string {
 function formatDateTime(dateStr: string): string {
   if (!dateStr) return "-";
   const d = new Date(dateStr);
-  return d.toLocaleString("ko-KR", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" });
+  return d.toLocaleString("ko-KR", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "Asia/Seoul" });
 }
 
 function formatDuration(startedAt: string, endedAt: string): string {
diff --git a/client/features/dashboard/components/IntroCard.tsx b/client/features/dashboard/components/IntroCard.tsx
index 5accfb2..f281373 100644
--- a/client/features/dashboard/components/IntroCard.tsx
+++ b/client/features/dashboard/components/IntroCard.tsx
@@ -6,7 +6,7 @@ interface IntroCardProps {
 
 export default function IntroCard({ onCreateMeeting }: IntroCardProps) {
   return (
-    <div className="relative overflow-hidden rounded-2xl dark:bg-gradient-to-br dark:from-purple-900/50 dark:via-purple-950/40 dark:to-pink-900/30 light:bg-gradient-to-br light:from-white/90 light:via-purple-50/50 light:to-pink-50/40 dark:border dark:border-purple-500/30 light:border light:border-purple-200/80 light:shadow-xl light:shadow-purple-200/40 dark:backdrop-blur-xl light:backdrop-blur-md">
+    <div className="relative overflow-hidden om-card">
       <div className="relative z-10 p-8 md:p-10">
         <div className="flex items-start justify-between mb-6">
           <div className="flex-1">
diff --git a/client/features/dashboard/components/MeetingExpandedCard.tsx b/client/features/dashboard/components/MeetingExpandedCard.tsx
index bfe937a..3df99b7 100644
--- a/client/features/dashboard/components/MeetingExpandedCard.tsx
+++ b/client/features/dashboard/components/MeetingExpandedCard.tsx
@@ -159,7 +159,7 @@ export default function MeetingExpandedCard({
   const isRegenerating = minutesData?.status === "REGENERATING" || regenerateMutation.isPending;
 
   return (
-    <div className="dark:bg-gradient-to-br dark:from-purple-900/40 dark:via-black/80 dark:to-pink-900/30 light:bg-gradient-to-br light:from-white light:via-purple-50/40 light:to-pink-100/30 light:border-2 light:border-purple-300/70 light:shadow-xl light:shadow-purple-300/40 dark:border dark:border-purple-500/30 rounded-3xl p-8 animate-in fade-in slide-in-from-bottom-4 duration-300">
+    <div className="om-card rounded-3xl p-8 animate-in fade-in slide-in-from-bottom-4 duration-300">
       <div className="space-y-6">
         <div className="flex items-start justify-between">
           <div>
@@ -383,7 +383,7 @@ export default function MeetingExpandedCard({
                     }
                     const [, type, startMs, , speaker, text] = match;
                     const startDate = new Date(Number(startMs));
-                    const time = startDate.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+                    const time = startDate.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "Asia/Seoul" });
                     const isVoice = type === "VOICE";
                     return (
                       <div key={idx} className="flex gap-3">
diff --git a/client/features/dashboard/components/OngoingMeetings.tsx b/client/features/dashboard/components/OngoingMeetings.tsx
index 06358c0..34e9d5d 100644
--- a/client/features/dashboard/components/OngoingMeetings.tsx
+++ b/client/features/dashboard/components/OngoingMeetings.tsx
@@ -114,7 +114,7 @@ export default function OngoingMeetings() {
           return (
             <div
               key={meeting.id}
-              className="dark:bg-gradient-to-br dark:from-purple-900/40 dark:via-purple-950/30 dark:to-pink-900/20 light:bg-white/80 dark:border dark:border-purple-500/25 light:border light:border-purple-200/70 rounded-2xl overflow-hidden transition-all duration-300 dark:hover:shadow-lg dark:hover:shadow-purple-500/20 dark:hover:border-purple-500/40 light:hover:shadow-lg light:hover:shadow-purple-200/40 light:hover:border-purple-300 hover:-translate-y-0.5 group dark:backdrop-blur-xl light:backdrop-blur-md"
+              className="om-card overflow-hidden hover:-translate-y-0.5 group"
             >
               <div
                 className={`h-1 ${
diff --git a/client/features/dashboard/components/RecentMeetings.tsx b/client/features/dashboard/components/RecentMeetings.tsx
index 52d8ac7..cc2b15c 100644
--- a/client/features/dashboard/components/RecentMeetings.tsx
+++ b/client/features/dashboard/components/RecentMeetings.tsx
@@ -94,7 +94,7 @@ export default function RecentMeetings() {
             return (
               <div
                 key={meeting.id}
-                className="dark:bg-gradient-to-br dark:from-purple-900/30 dark:via-black/40 dark:to-pink-900/20 light:bg-white light:border-2 light:border-purple-300/60 dark:border dark:border-purple-500/30 rounded-2xl p-5 dark:hover:shadow-lg dark:hover:shadow-purple-500/20 light:hover:shadow-md light:hover:shadow-purple-300/30 light:hover:border-purple-400/60 transition-all duration-300 group dark:backdrop-blur-md light:backdrop-blur-sm"
+                className="om-card p-5 group"
               >
                 <div className="flex items-start justify-between mb-3">
                   <div className="flex-1">
diff --git a/client/features/dashboard/pages/Summary.tsx b/client/features/dashboard/pages/Summary.tsx
index 6f125a3..7501163 100644
--- a/client/features/dashboard/pages/Summary.tsx
+++ b/client/features/dashboard/pages/Summary.tsx
@@ -93,7 +93,7 @@ export default function Summary() {
 
   return (
     <>
-      <div className="max-w-6xl space-y-6 light:bg-gradient-to-br light:from-purple-50 light:via-white light:to-pink-50 light:rounded-3xl light:p-8">
+      <div className="max-w-6xl space-y-6">
 
         {!expandedMeeting && (
           <div>
@@ -104,7 +104,7 @@ export default function Summary() {
               모든 회의 기록을 한눈에 관리하고 확인하세요
             </p>
 
-            <div className="flex gap-3 mb-8 border-b-2 dark:border-purple-500/30 light:border-purple-300/70 pb-4">
+            <div className="flex gap-2 mb-8 border-b dark:border-purple-500/30 light:border-purple-200 pb-4">
               {([
                 { id: "all", label: "모든 회의" },
                 { id: "scheduled", label: "예정된 회의" },
@@ -116,8 +116,8 @@ export default function Summary() {
                   onClick={() => setActiveTab(tab.id)}
                   className={`px-5 py-2.5 rounded-lg font-semibold transition-all duration-200 ${
                     activeTab === tab.id
-                      ? "dark:bg-purple-600 dark:text-white light:bg-gradient-to-r light:from-purple-600 light:to-purple-700 light:text-white light:shadow-lg light:shadow-purple-300/40"
-                      : "dark:bg-purple-500/10 dark:text-white/70 light:bg-white/60 light:text-purple-700 light:border light:border-purple-300/30 dark:hover:bg-purple-500/20 light:hover:bg-purple-100/70"
+                      ? "dark:bg-purple-600 dark:text-white light:bg-purple-600 light:text-white light:shadow-md light:shadow-purple-400/30"
+                      : "dark:bg-purple-500/10 dark:text-white/70 light:bg-white light:text-purple-600 light:border light:border-purple-300/60 light:shadow-sm dark:hover:bg-purple-500/20 light:hover:bg-purple-50 light:hover:border-purple-400"
                   }`}
                 >
                   {tab.label}
@@ -133,7 +133,7 @@ export default function Summary() {
               <select
                 value={featureFilter}
                 onChange={(e) => setFeatureFilter(e.target.value as typeof featureFilter)}
-                className="px-4 py-3 dark:border dark:border-purple-500/30 light:border-2 light:border-purple-300 dark:rounded-xl light:rounded-xl dark:bg-purple-500/10 light:bg-white/80 light:shadow-md light:shadow-purple-200/40 dark:focus:bg-purple-500/20 light:focus:bg-white light:focus:border-purple-400 dark:focus:border-purple-400 focus:ring-2 dark:focus:ring-purple-500/20 light:focus:ring-purple-300/40 transition-all dark:text-white light:text-purple-900 text-sm appearance-none cursor-pointer font-medium"
+                className="om-input text-sm appearance-none cursor-pointer font-medium"
               >
                 <option value="all">모든 회의</option>
                 <option value="transcript">회의록 있음</option>
@@ -147,7 +147,7 @@ export default function Summary() {
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
                   placeholder="회의 제목이나 내용으로 검색..."
-                  className="w-full px-4 py-3 pl-12 dark:border dark:border-purple-500/30 light:border-2 light:border-purple-300 dark:rounded-xl light:rounded-xl dark:bg-purple-500/10 light:bg-white/80 light:shadow-md light:shadow-purple-200/40 dark:focus:bg-purple-500/20 light:focus:bg-white light:focus:border-purple-400 dark:focus:border-purple-400 focus:ring-2 dark:focus:ring-purple-500/20 light:focus:ring-purple-300/40 transition-all dark:text-white light:text-purple-900 dark:placeholder-white/40 light:placeholder-purple-700/70 font-medium"
+                  className="om-input pl-12 font-medium"
                 />
                 <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 dark:text-white/40 light:text-purple-600" />
               </div>
@@ -182,7 +182,7 @@ export default function Summary() {
                 {filteredMeetings.map((meeting) => (
                   <div
                     key={meeting.id}
-                    className="dark:bg-gradient-to-br dark:from-purple-900/40 dark:via-purple-950/30 dark:to-pink-900/20 light:bg-white/80 light:border light:border-purple-200/70 light:shadow-md light:shadow-purple-100/30 dark:border dark:border-purple-500/25 rounded-2xl p-6 dark:hover:shadow-lg dark:hover:shadow-purple-500/20 dark:hover:border-purple-500/40 light:hover:shadow-xl light:hover:shadow-purple-200/40 light:hover:border-purple-300 hover:-translate-y-1 transition-all duration-300 dark:backdrop-blur-xl light:backdrop-blur-md group flex flex-col"
+                    className="om-card p-6 hover:-translate-y-1 group flex flex-col"
                   >
                     <button
                       onClick={() => setExpandedMeetingId(meeting.id)}
diff --git a/client/features/meeting/components/MeetingRoomContent.tsx b/client/features/meeting/components/MeetingRoomContent.tsx
index 6dbebf3..15341ae 100644
--- a/client/features/meeting/components/MeetingRoomContent.tsx
+++ b/client/features/meeting/components/MeetingRoomContent.tsx
@@ -9,7 +9,6 @@ import {
   X,
   AlertTriangle,
   Ban,
-  Clock,
   Users,
   Copy,
   Info,
@@ -165,7 +164,6 @@ interface MeetingRoomContentProps {
   userId: string;
   roomTitle?: string;
   roomCode?: string;
-  scheduledAt?: string;
   maxParticipants?: number;
 }
 
@@ -175,7 +173,6 @@ export default memo(function MeetingRoomContent({
   userId,
   roomTitle,
   roomCode,
-  scheduledAt,
   maxParticipants,
 }: MeetingRoomContentProps) {
   const navigate = useNavigate();
@@ -268,7 +265,7 @@ export default memo(function MeetingRoomContent({
       room.off(RoomEvent.ParticipantDisconnected, handleParticipantDisconnected);
       if (countdownRef.current) clearInterval(countdownRef.current);
     };
-  }, [room, isHost]);
+  }, [room, isHost, roomId, userId]);
 
   const handleHostLeftExit = useCallback(async () => {
     if (countdownRef.current) clearInterval(countdownRef.current);
@@ -337,7 +334,15 @@ export default memo(function MeetingRoomContent({
   }
 
   return (
-    <div className="flex h-screen bg-gradient-to-br from-purple-950 via-black to-purple-900 text-white overflow-hidden">
+    <div className="flex h-screen bg-black text-white overflow-hidden relative">
+      {/* AuthLayout 스타일 배경 */}
+      <div className="fixed inset-0 -z-10 bg-gradient-to-br from-purple-950 via-black to-purple-900">
+        <div className="absolute inset-0 opacity-40">
+          <div className="absolute top-0 -left-20 w-[500px] h-[500px] bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob" />
+          <div className="absolute top-0 -right-20 w-[500px] h-[500px] bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000" />
+          <div className="absolute -bottom-20 left-1/3 w-[500px] h-[500px] bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000" />
+        </div>
+      </div>
       <div
         className={`flex-1 flex flex-col transition-all duration-300 ${
           showChat && showParticipants
diff --git a/client/features/meeting/pages/MeetingRoom.tsx b/client/features/meeting/pages/MeetingRoom.tsx
index c7e6be3..e768175 100644
--- a/client/features/meeting/pages/MeetingRoom.tsx
+++ b/client/features/meeting/pages/MeetingRoom.tsx
@@ -259,7 +259,7 @@ export default function MeetingRoom() {
         useMeetingRoomStore.getState().setPhase("disconnected");
       }}
     >
-      <MeetingRoomContent roomId={roomId} isHost={isHost} userId={userId} roomTitle={roomData?.title} roomCode={roomData?.roomCode} scheduledAt={roomData?.scheduledAt} maxParticipants={roomData?.maxParticipants} />
+      <MeetingRoomContent roomId={roomId} isHost={isHost} userId={userId} roomTitle={roomData?.title} roomCode={roomData?.roomCode} maxParticipants={roomData?.maxParticipants} />
     </LiveKitRoom>
   );
 }
diff --git a/client/features/schedule/pages/Schedule.tsx b/client/features/schedule/pages/Schedule.tsx
index 62daa1a..9a7f9e5 100644
--- a/client/features/schedule/pages/Schedule.tsx
+++ b/client/features/schedule/pages/Schedule.tsx
@@ -95,7 +95,7 @@ export default function Schedule() {
 
           <div>
             <div className="min-w-[320px] space-y-4">
-              <div className="dark:bg-gradient-to-br dark:from-purple-900/30 dark:via-purple-950/20 dark:to-pink-900/10 light:bg-white/80 dark:border dark:border-purple-500/20 light:border light:border-purple-200/70 rounded-2xl p-6 light:shadow-lg light:shadow-purple-100/30 dark:backdrop-blur-xl light:backdrop-blur-md">
+              <div className="om-panel">
                 <h2 className="text-xl font-bold dark:text-white/90 light:text-purple-950 mb-4">
                   {format(selectedDate, "MMMM dd, yyyy (EEEE)", { locale: ko })}
                   의 회의
@@ -124,7 +124,7 @@ export default function Schedule() {
                       return (
                         <div
                           key={meeting.id}
-                          className="dark:bg-purple-500/10 light:bg-gradient-to-br light:from-white light:via-purple-50/40 light:to-pink-100/20 dark:border dark:border-purple-500/20 light:border-2 light:border-purple-300/60 rounded-2xl p-5 dark:hover:bg-purple-500/20 light:hover:shadow-lg light:hover:border-purple-400/70 transition-all duration-300"
+                          className="om-card p-5"
                         >
                           <div className="flex items-start justify-between gap-2 mb-3">
                             <div className="flex-1">
diff --git a/client/shared/adapters/meeting.ts b/client/shared/adapters/meeting.ts
index 08166a8..0a1287f 100644
--- a/client/shared/adapters/meeting.ts
+++ b/client/shared/adapters/meeting.ts
@@ -11,7 +11,6 @@
  */
 
 import { format } from "date-fns";
-import { ko } from "date-fns/locale";
 import type { MeetingRoomResponse, RoomStatus, RoomType, AccessScope } from "@/features/meeting/api/types";
 
 // ── UI 모델 ──
@@ -56,12 +55,14 @@ export interface CalendarMeetingViewModel {
   accessScope: AccessScope;
 }
 
-// ── 포맷터 (공통) ──
+// ── 포맷터 (공통, Asia/Seoul 기준) ──
 
 export function formatMeetingTime(dateStr: string): string {
   if (!dateStr) return "";
   try {
-    return format(new Date(dateStr), "h:mm a");
+    return new Date(dateStr).toLocaleTimeString("ko-KR", {
+      hour: "2-digit", minute: "2-digit", timeZone: "Asia/Seoul",
+    });
   } catch {
     return "";
   }
@@ -70,8 +71,9 @@ export function formatMeetingTime(dateStr: string): string {
 export function formatMeetingTimeKo(dateStr: string): string {
   if (!dateStr) return "";
   try {
-    const date = new Date(dateStr);
-    return date.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" });
+    return new Date(dateStr).toLocaleTimeString("ko-KR", {
+      hour: "2-digit", minute: "2-digit", timeZone: "Asia/Seoul",
+    });
   } catch {
     return "";
   }
@@ -87,7 +89,23 @@ export function formatMeetingDuration(seconds: number): string {
 }
 
 export function formatMeetingDate(date: Date): string {
-  return format(date, "yyyy년 MMM dd일 (eee)", { locale: ko });
+  return date.toLocaleDateString("ko-KR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    weekday: "short",
+    timeZone: "Asia/Seoul",
+  });
+}
+
+/** ISO 문자열을 한국 시간으로 포맷 (서버 UTC → KST) */
+export function formatDateTimeKST(dateStr: string): string {
+  if (!dateStr) return "";
+  return new Date(dateStr).toLocaleString("ko-KR", {
+    year: "numeric", month: "2-digit", day: "2-digit",
+    hour: "2-digit", minute: "2-digit",
+    timeZone: "Asia/Seoul",
+  });
 }
 
 // ── 상태 매핑 ──
diff --git a/client/shared/components/Layout.tsx b/client/shared/components/Layout.tsx
index 5283274..5e1d4a4 100644
--- a/client/shared/components/Layout.tsx
+++ b/client/shared/components/Layout.tsx
@@ -22,25 +22,21 @@ export default function Layout({
 
   return (
     <div className="flex h-screen bg-background relative overflow-hidden">
-      {/* Dark mode — premium gradient (AuthLayout 스타일) */}
+      {/* Dark mode — 중립 블랙 + 미세 보라 글로우 포인트 */}
       {theme === "dark" && (
-        <div className="fixed inset-0 -z-10 bg-gradient-to-br from-purple-950 via-black to-purple-900 overflow-hidden">
-          <div className="absolute inset-0 opacity-40">
-            <div className="absolute top-0 -left-20 w-[500px] h-[500px] bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob" />
-            <div className="absolute top-0 -right-20 w-[500px] h-[500px] bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000" />
-            <div className="absolute -bottom-20 left-1/3 w-[500px] h-[500px] bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000" />
-          </div>
+        <div className="fixed inset-0 -z-10 overflow-hidden">
+          <div className="absolute inset-0 bg-[#101014]" />
+          <div className="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] bg-purple-500/[0.04] rounded-full filter blur-[120px]" />
+          <div className="absolute bottom-[-10%] left-[-5%] w-[400px] h-[400px] bg-purple-600/[0.03] rounded-full filter blur-[100px]" />
         </div>
       )}
 
-      {/* Light mode — soft elegant gradient (AuthLayout 스타일) */}
+      {/* Light mode — 깨끗한 회색+보라 틴트 */}
       {theme === "light" && (
-        <div className="fixed inset-0 -z-10 bg-gradient-to-br from-purple-100/80 via-white to-pink-100/60 overflow-hidden pointer-events-none">
-          <div className="absolute inset-0 opacity-70">
-            <div className="absolute top-0 -left-20 w-[500px] h-[500px] bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-40 animate-blob" />
-            <div className="absolute top-0 -right-20 w-[500px] h-[500px] bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-40 animate-blob animation-delay-2000" />
-            <div className="absolute -bottom-20 left-1/3 w-[500px] h-[500px] bg-purple-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000" />
-          </div>
+        <div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
+          <div className="absolute inset-0 bg-[#f5f3f7]" />
+          <div className="absolute top-0 right-0 w-full h-full bg-gradient-to-bl from-purple-100/40 via-transparent to-transparent" />
+          <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-purple-100/30 rounded-full filter blur-[100px]" />
         </div>
       )}
 
@@ -72,7 +68,7 @@ export default function Layout({
           )}
 
           {showRecentPanel && (
-            <div className="hidden lg:flex lg:w-96 border-l flex-col overflow-hidden dark:border-purple-500/20 light:border-purple-200/40 dark:bg-purple-950/40 light:bg-white/60 backdrop-blur-md">
+            <div className="hidden lg:flex lg:w-96 border-l flex-col overflow-hidden dark:border-purple-500/20 light:border-purple-200/60 dark:bg-purple-950/40 light:bg-white backdrop-blur-xl">
               <div className="px-6 py-4 border-b dark:border-purple-500/20 light:border-purple-200/40">
                 <h2 className="text-base font-semibold om-text-primary">
                   최근 회의 기록
diff --git a/client/shared/components/MeetingHeader.tsx b/client/shared/components/MeetingHeader.tsx
index 6ab592f..d377852 100644
--- a/client/shared/components/MeetingHeader.tsx
+++ b/client/shared/components/MeetingHeader.tsx
@@ -67,7 +67,11 @@ export default function MeetingHeader() {
   const markAllAsReadMutation = useMarkAllAsRead();
   const deleteMutation = useDeleteNotification();
   const deleteAllMutation = useDeleteAllNotifications();
-  const { connected: sseConnected } = useNotificationSSE(userId || undefined);
+  const handleSSEMessage = useCallback((notification: NotificationResponseDto) => {
+    toast({ title: notification.title, description: notification.body });
+    setIsDropdownOpen(true);
+  }, []);
+  const { connected: sseConnected } = useNotificationSSE(userId || undefined, handleSSEMessage);
   useFcmSetup(userId || undefined);
   const [processingInvite, setProcessingInvite] = useState<number | null>(null);
 
@@ -100,7 +104,7 @@ export default function MeetingHeader() {
       toast({ title: "초대를 거절했습니다" });
     } catch (err) {
       console.error("Decline invitation failed:", err);
-      toast({ title: "초대 거절 실패", description: String((err as any)?.message || err), variant: "destructive" });
+      toast({ title: "초대 거절 실패", description: err instanceof Error ? err.message : "거절에 실패했습니다", variant: "destructive" });
     } finally {
       setProcessingInvite(null);
     }
@@ -180,7 +184,7 @@ export default function MeetingHeader() {
   };
 
   return (
-    <div className="px-6 py-4 border-b dark:border-purple-500/20 light:border-purple-200/40 dark:bg-purple-950/40 dark:backdrop-blur-xl light:bg-white/80 light:backdrop-blur-xl light:shadow-sm light:shadow-purple-100/30 flex items-center justify-between">
+    <div className="px-6 py-4 border-b dark:border-white/[0.06] light:border-purple-200/60 dark:bg-[#111116]/60 dark:backdrop-blur-xl light:bg-white light:shadow-[0_1px_3px_rgba(147,51,234,0.06)] flex items-center justify-between">
       <div className="flex items-center gap-3">
         <div className="w-8 h-8 rounded-full bg-brand-500 flex items-center justify-center text-sm font-bold text-white">
           {user?.name?.charAt(0) ?? "U"}
@@ -205,7 +209,7 @@ export default function MeetingHeader() {
           <button
             ref={bellButtonRef}
             onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-            className="relative p-2 hover:bg-slate-800/50 dark:hover:bg-slate-800/50 light:hover:bg-slate-100/50 rounded-lg transition-colors text-muted-foreground hover:text-foreground"
+            className="relative p-2 dark:hover:bg-white/[0.06] light:hover:bg-purple-100 light:hover:shadow-sm rounded-lg transition-all duration-200 text-muted-foreground hover:text-foreground"
           >
             <Bell className="w-5 h-5" />
             {unreadCount > 0 && (
@@ -222,7 +226,7 @@ export default function MeetingHeader() {
           {isDropdownOpen &&
             createPortal(
               <div
-                className="fixed w-96 dark:bg-purple-950/95 light:bg-white/95 dark:border dark:border-purple-500/20 light:border light:border-purple-200/70 rounded-2xl backdrop-blur-xl dark:shadow-2xl dark:shadow-purple-500/20 light:shadow-2xl light:shadow-purple-300/30 z-[999999]"
+                className="fixed w-96 dark:bg-[#151519]/95 light:bg-white dark:border dark:border-white/[0.08] light:border light:border-purple-200/70 rounded-2xl backdrop-blur-xl dark:shadow-2xl dark:shadow-black/40 light:shadow-2xl light:shadow-purple-200/25 z-[999999]"
                 style={{
                   top: "12px",
                   right: `${dropdownPosition.right}px`,
@@ -242,14 +246,14 @@ export default function MeetingHeader() {
                     <div className="flex items-center gap-1">
                       <button
                         onClick={handleMarkAllAsRead}
-                        className="p-1.5 text-muted-foreground hover:text-foreground transition-colors rounded-md hover:dark:bg-slate-800 hover:light:bg-slate-100"
+                        className="p-1.5 text-muted-foreground hover:text-foreground transition-colors rounded-md dark:hover:bg-white/[0.06] light:hover:bg-purple-100"
                         title="모두 읽음"
                       >
                         <CheckCheck className="w-4 h-4" />
                       </button>
                       <button
                         onClick={handleDeleteAll}
-                        className="p-1.5 text-muted-foreground hover:text-destructive transition-colors rounded-md hover:dark:bg-slate-800 hover:light:bg-slate-100"
+                        className="p-1.5 text-muted-foreground hover:text-destructive transition-colors rounded-md dark:hover:bg-white/[0.06] light:hover:bg-purple-100"
                         title="모두 삭제"
                       >
                         <Trash2 className="w-4 h-4" />
@@ -269,7 +273,7 @@ export default function MeetingHeader() {
                           notification.read
                             ? "dark:bg-slate-800/30 light:bg-slate-50/60"
                             : "dark:bg-slate-800/50 light:bg-blue-50/40 light:border-b light:border-blue-200/40"
-                        } hover:dark:bg-slate-800/60 hover:light:bg-blue-50/60`}
+                        } dark:hover:bg-white/[0.04] light:hover:bg-purple-50`}
                       >
                         <button
                           onClick={() => handleNotificationClick(notification.id)}
@@ -291,7 +295,7 @@ export default function MeetingHeader() {
                             <button
                               onClick={(e) => { e.stopPropagation(); handleAcceptInvitation(notification); }}
                               disabled={processingInvite === notification.id}
-                              className="flex items-center gap-1 px-2.5 py-1.5 text-xs font-semibold rounded-lg dark:bg-green-500/20 dark:text-green-300 dark:hover:bg-green-500/30 light:bg-green-100 light:text-green-700 light:hover:bg-green-200 transition-colors disabled:opacity-50"
+                              className="flex items-center gap-1 px-2.5 py-1.5 text-xs font-semibold rounded-lg dark:bg-green-500/20 dark:text-green-300 dark:hover:bg-green-500/30 light:bg-green-600 light:text-white light:hover:bg-green-700 light:shadow-sm transition-colors disabled:opacity-50"
                               title="초대 수락"
                             >
                               <Check className="w-3.5 h-3.5" />수락
@@ -299,7 +303,7 @@ export default function MeetingHeader() {
                             <button
                               onClick={(e) => { e.stopPropagation(); handleDeclineInvitation(notification); }}
                               disabled={processingInvite === notification.id}
-                              className="flex items-center gap-1 px-2.5 py-1.5 text-xs font-semibold rounded-lg dark:bg-red-500/20 dark:text-red-300 dark:hover:bg-red-500/30 light:bg-red-100 light:text-red-700 light:hover:bg-red-200 transition-colors disabled:opacity-50"
+                              className="flex items-center gap-1 px-2.5 py-1.5 text-xs font-semibold rounded-lg dark:bg-red-500/20 dark:text-red-300 dark:hover:bg-red-500/30 light:border light:border-red-300 light:text-red-600 light:hover:bg-red-50 light:hover:border-red-400 transition-colors disabled:opacity-50"
                               title="초대 거절"
                             >
                               <XCircle className="w-3.5 h-3.5" />거절
@@ -332,7 +336,7 @@ export default function MeetingHeader() {
             )}
         </div>
 
-        <button className="p-2 hover:bg-slate-800/50 dark:hover:bg-slate-800/50 light:hover:bg-slate-100/50 rounded-lg transition-colors text-muted-foreground hover:text-foreground">
+        <button className="p-2 dark:hover:bg-white/[0.06] light:hover:bg-purple-100 light:hover:shadow-sm rounded-lg transition-all duration-200 text-muted-foreground hover:text-foreground">
           <MoreVertical className="w-5 h-5" />
         </button>
       </div>
diff --git a/client/shared/components/Sidebar.tsx b/client/shared/components/Sidebar.tsx
index 8b241d3..0c57e13 100644
--- a/client/shared/components/Sidebar.tsx
+++ b/client/shared/components/Sidebar.tsx
@@ -90,7 +90,7 @@ export default memo(function Sidebar({
   return (
     <div
       className={cn(
-        "flex flex-col h-screen transition-all duration-300 dark:bg-gradient-to-b dark:from-purple-950/90 dark:via-black/80 dark:to-purple-950/90 dark:border-r dark:border-purple-500/20 dark:backdrop-blur-xl light:bg-gradient-to-b light:from-white/95 light:via-purple-50/30 light:to-white/95 light:border-r light:border-purple-200/60 light:shadow-xl light:shadow-purple-100/50 light:backdrop-blur-xl",
+        "flex flex-col h-screen transition-all duration-300 dark:bg-[#111116]/90 dark:border-r dark:border-white/[0.06] dark:backdrop-blur-xl light:bg-white light:border-r light:border-purple-200/60 light:shadow-[4px_0_24px_-4px_rgba(147,51,234,0.06)]",
         isCollapsed ? "w-20" : "w-72",
       )}
     >
@@ -131,7 +131,7 @@ export default memo(function Sidebar({
           {onToggleCollapse && (
             <button
               onClick={onToggleCollapse}
-              className="p-2 dark:hover:bg-purple-500/20 light:hover:bg-purple-100 rounded-lg transition-colors"
+              className="p-2 dark:hover:bg-purple-500/20 light:hover:bg-purple-100 light:hover:shadow-sm rounded-lg transition-all duration-200"
               title={isCollapsed ? "사이드바 확대" : "사이드바 축소"}
               aria-label={isCollapsed ? "사이드바 확대" : "사이드바 축소"}
             >
@@ -159,8 +159,8 @@ export default memo(function Sidebar({
                     ? "justify-center p-3"
                     : "justify-between px-4 py-3",
                   isActive
-                    ? "dark:bg-purple-500/20 dark:text-purple-300 light:bg-gradient-to-r light:from-purple-100/80 light:to-pink-50/40 light:text-purple-900 light:shadow-sm light:shadow-purple-200/30 light:border light:border-purple-200/50"
-                    : "dark:text-white/60 dark:hover:text-white/90 dark:hover:bg-purple-500/10 light:text-purple-700 light:hover:text-purple-900 light:hover:bg-purple-50/80",
+                    ? "dark:bg-white/[0.06] dark:text-purple-400 light:bg-purple-100 light:text-purple-900 light:shadow-sm light:shadow-purple-200/30 light:border light:border-purple-300/50"
+                    : "dark:text-white/60 dark:hover:text-white/90 dark:hover:bg-white/[0.04] light:text-purple-600 light:hover:text-purple-900 light:hover:bg-purple-100/80 light:hover:shadow-sm light:hover:shadow-purple-200/20",
                 )}
               >
                 <div className="flex items-center gap-3">
@@ -216,8 +216,8 @@ export default memo(function Sidebar({
                   className={cn(
                     "w-full flex items-center gap-3 px-4 py-2.5 rounded-xl transition-all duration-200 group",
                     selectedTeamId === String(team.id)
-                      ? "dark:bg-purple-500/20 dark:text-purple-300 light:bg-purple-100/80 light:text-purple-900"
-                      : "dark:text-white/60 dark:hover:text-white/90 dark:hover:bg-purple-500/10 light:text-purple-700 light:hover:text-purple-900 light:hover:bg-purple-50",
+                      ? "dark:bg-white/[0.06] dark:text-purple-400 light:bg-purple-100 light:text-purple-900 light:border light:border-purple-300/40"
+                      : "dark:text-white/60 dark:hover:text-white/90 dark:hover:bg-white/[0.04] light:text-purple-600 light:hover:text-purple-900 light:hover:bg-purple-100/80 light:hover:shadow-sm",
                   )}
                   title={`${team.name} 팀 선택`}
                 >
@@ -245,7 +245,7 @@ export default memo(function Sidebar({
 
           <button
             onClick={() => setIsAddTeamModalOpen(true)}
-            className="w-full flex items-center gap-3 px-4 py-2.5 dark:text-white/50 dark:hover:text-white/80 dark:hover:bg-purple-500/10 light:text-purple-600 light:hover:text-purple-900 light:hover:bg-purple-50 rounded-xl transition-colors"
+            className="w-full flex items-center gap-3 px-4 py-2.5 dark:text-white/50 dark:hover:text-white/80 dark:hover:bg-white/[0.04] light:text-purple-500 light:hover:text-purple-800 light:hover:bg-purple-100/80 light:hover:shadow-sm rounded-xl transition-all duration-200"
           >
             <Plus className="w-5 h-5" />
             <span className="text-sm font-medium">{t("nav.addTeam")}</span>