diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index bed7d26..e0bc514 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -18,7 +18,7 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
       </div>
 
       {/* 오른쪽 메인 영역 */}
-      <div className="flex-1 flex flex-col h-screen ml-[240px]" style={{ backgroundColor: "#F9FAFB" }}>
+      <div className="flex-1 flex flex-col h-screen ml-[240px] bg-app-surface-muted">
         {/* 메인 컨텐츠 영역 */}
         <main className="flex-1 overflow-y-auto">
           {children}
diff --git a/app/globals.css b/app/globals.css
index dc2aea1..5d62bf9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -37,6 +37,19 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  /* App-wide UI tokens (additive — does not override shadcn primary) */
+  --app-surface: oklch(0.96 0 0);
+  --app-surface-muted: oklch(0.985 0 0);
+  --app-border: oklch(0.922 0 0);
+  --app-accent: oklch(0.205 0 0);
+  --app-accent-muted: oklch(0.94 0 0);
+  /* Subtle blue-gray accents (not primary black) */
+  --app-accent-soft: oklch(0.93 0.02 245);
+  --app-accent-soft-foreground: oklch(0.42 0.045 245);
+  --app-focus: oklch(0.48 0.06 245);
+  --app-ring: oklch(0.72 0.03 245);
+  --app-spinner-track: oklch(0.78 0.018 250);
+  --app-sidebar-active: oklch(0.92 0.028 245);
 }
 
 .dark {
@@ -72,6 +85,17 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(0.269 0 0);
   --sidebar-ring: oklch(0.439 0 0);
+  --app-surface: oklch(0.18 0 0);
+  --app-surface-muted: oklch(0.16 0 0);
+  --app-border: oklch(0.32 0 0);
+  --app-accent: oklch(0.985 0 0);
+  --app-accent-muted: oklch(0.28 0 0);
+  --app-accent-soft: oklch(0.28 0.025 245);
+  --app-accent-soft-foreground: oklch(0.78 0.04 245);
+  --app-focus: oklch(0.72 0.05 245);
+  --app-ring: oklch(0.45 0.04 245);
+  --app-spinner-track: oklch(0.38 0.02 250);
+  --app-sidebar-active: oklch(0.3 0.03 245);
 }
 
 @theme inline {
@@ -113,6 +137,17 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-app-surface: var(--app-surface);
+  --color-app-surface-muted: var(--app-surface-muted);
+  --color-app-border: var(--app-border);
+  --color-app-accent: var(--app-accent);
+  --color-app-accent-muted: var(--app-accent-muted);
+  --color-app-accent-soft: var(--app-accent-soft);
+  --color-app-accent-soft-foreground: var(--app-accent-soft-foreground);
+  --color-app-focus: var(--app-focus);
+  --color-app-ring: var(--app-ring);
+  --color-app-spinner-track: var(--app-spinner-track);
+  --color-app-sidebar-active: var(--app-sidebar-active);
 }
 
 @layer base {
diff --git a/app/master/layout.tsx b/app/master/layout.tsx
index da6ac73..0c8fea8 100644
--- a/app/master/layout.tsx
+++ b/app/master/layout.tsx
@@ -36,10 +36,7 @@ export default function MasterLayout({
         <Sidebar />
       </div>
 
-      <div
-        className="ml-[240px] flex h-screen flex-1 flex-col"
-        style={{ backgroundColor: "#F9FAFB" }}
-      >
+      <div className="ml-[240px] flex h-screen flex-1 flex-col bg-app-surface-muted">
         <main className="flex-1 overflow-y-auto">{children}</main>
       </div>
     </div>
diff --git a/app/test/page.tsx b/app/test/page.tsx
index 40e12e4..2206df3 100644
--- a/app/test/page.tsx
+++ b/app/test/page.tsx
@@ -100,7 +100,7 @@ export default function TestPage() {
 
   if (isRestoring || !examId || !participantId) {
     return (
-      <div className="min-h-screen w-full bg-[#F5F5F5] flex items-center justify-center">
+      <div className="min-h-screen w-full bg-app-surface flex items-center justify-center">
         <div className="text-center">
           <p className="text-base font-medium text-[#1F2937]">
             {restoreError ?? "시험 세션을 복구하는 중입니다..."}
diff --git a/app/waiting/page.tsx b/app/waiting/page.tsx
index ad41253..f76cae3 100644
--- a/app/waiting/page.tsx
+++ b/app/waiting/page.tsx
@@ -69,7 +69,7 @@ export default function WaitingPage() {
   }, [examId, router]);
 
   return (
-    <div className="min-h-screen w-full bg-[#F5F5F5] flex flex-col">
+    <div className="min-h-screen w-full bg-app-surface flex flex-col">
       <header className="w-full h-[72px] bg-white flex items-center justify-start pl-16 shadow-sm">
         <h1 className="text-xl font-medium text-foreground">Vibe Coding Evaluator</h1>
       </header>
@@ -77,13 +77,13 @@ export default function WaitingPage() {
       {/* 🔥 여기 flex-1 추가 */}
       <main className="flex-1 flex flex-col items-center justify-center gap-8">
         <div
-          className="w-20 h-20 rounded-full border-[5px] border-violet-200 border-t-violet-500"
+          className="w-20 h-20 rounded-full border-[5px] border-app-spinner-track border-t-foreground"
           style={{ animation: "spin 1.5s linear infinite" }}
         />
 
         <div className="flex flex-col items-center gap-1 text-center">
           <p className="text-lg font-bold text-foreground">시험 대기 중입니다.</p>
-          <p className="text-base text-gray-500">
+          <p className="text-base text-muted-foreground">
             관리자가 시험을 시작하면 자동으로 진행됩니다.
           </p>
           {errorMessage && (
diff --git a/components/account-delete-success-dialog.tsx b/components/account-delete-success-dialog.tsx
index 15eb017..49d9d56 100644
--- a/components/account-delete-success-dialog.tsx
+++ b/components/account-delete-success-dialog.tsx
@@ -43,7 +43,7 @@ export function AccountDeleteSuccessDialog({
           <DialogDescription className="mt-2 text-[#6B7280]">{description}</DialogDescription>
         </DialogHeader>
         <DialogFooter className={ACCOUNT_DELETE_SUCCESS_FOOTER_CLASS}>
-          <Button onClick={onConfirm} className="bg-[#3B82F6] text-white hover:bg-[#2563EB]">
+          <Button onClick={onConfirm} className="bg-primary text-primary-foreground hover:bg-primary/90">
             {buttonLabel}
           </Button>
         </DialogFooter>
diff --git a/components/admin-accounts-content.tsx b/components/admin-accounts-content.tsx
index 4e5b8b2..18aa10f 100644
--- a/components/admin-accounts-content.tsx
+++ b/components/admin-accounts-content.tsx
@@ -377,18 +377,28 @@ export function AdminAccountsContent() {
   }
 
   return (
-    <div className="flex h-full flex-1 flex-col">
+    <div className="flex h-full min-w-0 flex-1 flex-col">
       <AdminPageHeader
         title="관리자 계정 관리"
         description="관리자 계정과 접근 권한을 관리합니다."
+        actions={
+          <Button
+            size="sm"
+            className="shrink-0 whitespace-nowrap bg-primary px-3 text-primary-foreground hover:bg-primary/90 md:px-4"
+            onClick={handleOpenGenerateModal}
+          >
+            <span className="md:hidden">+ 발급</span>
+            <span className="hidden md:inline">+ 관리자 번호 발급</span>
+          </Button>
+        }
       />
 
-      <main className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-6">
+      <main className="flex min-h-0 min-w-0 flex-1 flex-col gap-4 overflow-x-hidden overflow-y-auto p-4 sm:p-6">
       {/* Admin Users Card */}
       <Card className="flex min-w-0 flex-1 flex-col border border-[#E5E5E5] shadow-sm">
-        <CardHeader className="flex min-w-0 flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-6">
+        <CardHeader className="px-4 py-3 sm:px-6">
           <CardTitle
-            className="min-w-0 shrink"
+            className="min-w-0"
             style={{
               fontSize: "20px",
               fontWeight: 700,
@@ -397,19 +407,6 @@ export function AdminAccountsContent() {
           >
             관리자 목록
           </CardTitle>
-          <Button
-            size="sm"
-            className="w-full shrink-0 sm:w-auto"
-            onClick={handleOpenGenerateModal}
-            style={{
-              backgroundColor: "#3B82F6",
-              color: "#FFFFFF",
-              fontSize: "14px",
-              fontWeight: 500,
-            }}
-          >
-            + 관리자 번호 발급
-          </Button>
         </CardHeader>
         <CardContent className="flex min-w-0 flex-1 flex-col overflow-hidden px-0 pb-0 pt-0">
           {listError && !isLoading && (
@@ -762,12 +759,7 @@ export function AdminAccountsContent() {
             {!generatedKey && (
               <Button
                 onClick={handleCreateKey}
-                style={{
-                  backgroundColor: "#3B82F6",
-                  color: "#FFFFFF",
-                  fontSize: "14px",
-                  fontWeight: 500,
-                }}
+                className="bg-primary text-primary-foreground hover:bg-primary/90"
               >
                 관리자 번호 발급
               </Button>
@@ -891,13 +883,7 @@ export function AdminAccountsContent() {
             <Button
               onClick={handleConfirmResetPassword}
               disabled={isResettingPassword}
-              style={{
-                backgroundColor: "#3B82F6",
-                color: "#FFFFFF",
-                fontSize: "14px",
-                fontWeight: 500,
-                opacity: isResettingPassword ? 0.6 : 1,
-              }}
+              className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-60"
             >
               {isResettingPassword ? "처리 중..." : "비밀번호 재설정"}
             </Button>
@@ -971,12 +957,7 @@ export function AdminAccountsContent() {
           <DialogFooter>
             <Button
               onClick={handleCloseResetPasswordResult}
-              style={{
-                backgroundColor: "#3B82F6",
-                color: "#FFFFFF",
-                fontSize: "14px",
-                fontWeight: 500,
-              }}
+              className="bg-primary text-primary-foreground hover:bg-primary/90"
             >
               닫기
             </Button>
diff --git a/components/admin-page-header.tsx b/components/admin-page-header.tsx
index 395253e..9fae7b4 100644
--- a/components/admin-page-header.tsx
+++ b/components/admin-page-header.tsx
@@ -8,10 +8,10 @@ export type AdminPageHeaderProps = {
 
 export function AdminPageHeader({ title, description, actions }: AdminPageHeaderProps) {
   return (
-    <header className="flex h-[88px] shrink-0 items-center justify-between border-b border-[#E5E5E5] bg-white px-8">
-      <div>
-        <h1 className="text-2xl font-semibold text-[#1A1A1A]">{title}</h1>
-        {description ? <p className="text-sm text-[#6B7280]">{description}</p> : null}
+    <header className="flex h-[88px] min-w-0 shrink-0 items-center justify-between gap-3 border-b border-[#E5E5E5] bg-white px-4 sm:px-6 lg:px-8">
+      <div className="min-w-0 flex-1 overflow-hidden">
+        <h1 className="truncate text-2xl font-semibold text-[#1A1A1A]">{title}</h1>
+        {description ? <p className="truncate text-sm text-[#6B7280]">{description}</p> : null}
       </div>
       {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
     </header>
diff --git a/components/admin-sidebar.tsx b/components/admin-sidebar.tsx
index a85e0cd..00697dd 100644
--- a/components/admin-sidebar.tsx
+++ b/components/admin-sidebar.tsx
@@ -60,7 +60,9 @@ function MenuItem({
     <Link
       href={href}
       className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors ${
-        active ? "bg-[#E0EDFF] font-medium text-[#3B82F6]" : "text-[#6B7280] hover:bg-[#F0F7FF] hover:text-[#1A1A1A]"
+        active
+          ? "border-l-[3px] border-app-focus bg-app-sidebar-active font-medium text-app-accent-soft-foreground"
+          : "border-l-[3px] border-transparent text-muted-foreground hover:bg-app-accent-soft/60 hover:text-foreground"
       }`}
     >
       <Icon className="h-5 w-5" strokeWidth={1.5} />
@@ -129,32 +131,32 @@ export function AdminSidebar() {
   }
 
   return (
-    <aside className="flex w-[240px] h-screen flex-col border-r border-[#E5E5E5] bg-white overflow-y-auto">
+    <aside className="flex w-[240px] h-screen flex-col border-r border-app-border bg-white overflow-y-auto">
       {/* SECTION 1 — Logo Area */}
       <div className="flex items-center gap-3 px-5 py-6">
-        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#7C3AED]">
-          <span className="text-sm font-bold text-white">AI</span>
+        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary">
+          <span className="text-sm font-bold text-primary-foreground">AI</span>
         </div>
-        <span className="text-sm font-semibold text-[#1A1A1A]">AI Vibe Coding Test</span>
+        <span className="text-sm font-semibold text-foreground">AI Vibe Coding Test</span>
       </div>
 
       {/* Divider 1 */}
-      <div className="mx-4 border-t border-[#E5E5E5]" />
+      <div className="mx-4 border-t border-app-border" />
 
       {/* SECTION 2 — Profile Area */}
       <div className="flex items-center justify-between px-5 py-4">
         <div className="flex items-center gap-3">
-          <div className="flex h-9 w-9 items-center justify-center rounded-full bg-[#F3E8FF]">
-            <User className="h-5 w-5 text-[#7C3AED]" strokeWidth={1.5} />
+          <div className="flex h-9 w-9 items-center justify-center rounded-full bg-muted">
+            <User className="h-5 w-5 text-foreground" strokeWidth={1.5} />
           </div>
           <div className="flex flex-col">
-            <span className="text-sm font-medium text-[#1A1A1A]">{displayName}</span>
-            <span className="text-xs text-[#6B7280]">관리자</span>
+            <span className="text-sm font-medium text-foreground">{displayName}</span>
+            <span className="text-xs text-muted-foreground">관리자</span>
           </div>
         </div>
         <button
           onClick={handleLogoutClick}
-          className="flex items-center justify-center rounded-lg p-1.5 text-[#6B7280] transition-colors hover:bg-[#F3F4F6] hover:text-[#1A1A1A]"
+          className="flex items-center justify-center rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
           title="로그아웃"
         >
           <LogOut className="h-4 w-4" strokeWidth={1.5} />
@@ -162,7 +164,7 @@ export function AdminSidebar() {
       </div>
 
       {/* Divider 2 */}
-      <div className="mx-4 border-t border-[#E5E5E5]" />
+      <div className="mx-4 border-t border-app-border" />
 
       {/* SECTION 3 — Menu Group A (Main management) */}
       <nav className="flex flex-col gap-1 px-3 py-4">
@@ -178,7 +180,7 @@ export function AdminSidebar() {
       </nav>
 
       {/* Divider 3 */}
-      <div className="mx-4 border-t border-[#E5E5E5]" />
+      <div className="mx-4 border-t border-app-border" />
 
       {/* SECTION 4 — Menu Group B (Exam/operation) */}
       <nav className="flex flex-col gap-1 px-3 py-4">
@@ -194,7 +196,7 @@ export function AdminSidebar() {
       </nav>
 
       {/* Divider 4 */}
-      <div className="mx-4 border-t border-[#E5E5E5]" />
+      <div className="mx-4 border-t border-app-border" />
 
       {/* SECTION 5 — Menu Group C (System/config) */}
       <nav className="flex flex-col gap-1 px-3 py-4">
@@ -213,10 +215,10 @@ export function AdminSidebar() {
       <Dialog open={showLogoutModal} onOpenChange={setShowLogoutModal}>
         <DialogContent className="sm:max-w-[400px]">
           <DialogHeader>
-            <DialogTitle className="text-lg font-semibold text-[#1A1A1A]">
+            <DialogTitle className="text-lg font-semibold text-foreground">
               로그아웃 하시겠습니까?
             </DialogTitle>
-            <DialogDescription className="text-[#6B7280] mt-2">
+            <DialogDescription className="text-muted-foreground mt-2">
               로그아웃하면 관리자 대시보드에서 나가게 됩니다.
             </DialogDescription>
           </DialogHeader>
@@ -224,14 +226,14 @@ export function AdminSidebar() {
             <Button
               variant="outline"
               onClick={() => setShowLogoutModal(false)}
-              className="border-[#E5E5E5] text-[#374151]"
+              className="border-app-border text-foreground"
             >
               취소
             </Button>
             <Button
               onClick={handleConfirmLogout}
               disabled={isLoggingOut}
-              className="bg-[#3B82F6] hover:bg-[#2563EB] text-white disabled:opacity-50"
+              className="bg-primary hover:bg-primary/90 text-primary-foreground disabled:opacity-50"
             >
               {isLoggingOut ? "로그아웃 중..." : "로그아웃"}
             </Button>
diff --git a/components/ai-assistant-sidebar.tsx b/components/ai-assistant-sidebar.tsx
index af2e119..e9cf410 100644
--- a/components/ai-assistant-sidebar.tsx
+++ b/components/ai-assistant-sidebar.tsx
@@ -21,13 +21,13 @@ const MESSAGE_BUBBLE_BASE_CLASS =
 const CHAT_MARKDOWN_ASSISTANT_CLASS =
   "[&_pre]:border-[#E5E7EB] [&_pre]:bg-white [&_code]:bg-white"
 
-/** 파란 말풍선 — 밝은 배경용 MarkdownContent 오버라이드 */
+/** 사용자 말풍선 — soft accent 배경용 MarkdownContent 오버라이드 */
 const CHAT_MARKDOWN_USER_CLASS =
-  "text-white [&_p]:text-white [&_strong]:text-white [&_em]:text-white/90 [&_li]:text-white [&_h1]:text-white [&_h2]:text-white [&_h3]:text-white [&_h4]:text-white [&_blockquote]:border-white/40 [&_blockquote]:text-white/90 [&_a]:text-blue-100 [&_hr]:border-white/30 [&_code]:bg-white/20 [&_code]:text-white [&_pre]:border-white/25 [&_pre]:bg-[#1D4ED8] [&_pre]:text-white [&_table]:border-white/25 [&_thead]:bg-white/15 [&_th]:text-white [&_td]:text-white/95"
+  "text-foreground [&_p]:text-foreground [&_strong]:text-foreground [&_em]:text-foreground/90 [&_li]:text-foreground [&_h1]:text-foreground [&_h2]:text-foreground [&_h3]:text-foreground [&_h4]:text-foreground [&_blockquote]:border-app-ring/40 [&_blockquote]:text-foreground/90 [&_a]:text-app-focus [&_hr]:border-app-border [&_code]:bg-white [&_code]:text-foreground [&_pre]:border-[#E5E7EB] [&_pre]:bg-white [&_pre]:text-foreground"
 
 /** 공용 Textarea(min-h-16) 오버라이드 — 내용에 따라 늘어나되 최대 15줄, 이후 내부 스크롤 */
 const CHAT_INPUT_CLASS =
-  "!min-h-9 max-h-[15lh] min-w-0 flex-1 resize-none overflow-y-auto leading-5 break-words border-[#D0D0D0] bg-white [overflow-wrap:anywhere] whitespace-pre-wrap"
+  "!min-h-9 max-h-[15lh] min-w-0 flex-1 resize-none overflow-y-auto leading-5 break-words border-app-border bg-white [overflow-wrap:anywhere] whitespace-pre-wrap"
 
 interface AiAssistantSidebarProps {
   isOpen: boolean
@@ -184,7 +184,7 @@ export function AiAssistantSidebar({
           isOpen ? "opacity-0 pointer-events-none" : "opacity-100"
         }`}
       >
-        <div className="bg-[#2563EB] text-white px-2 py-6 rounded-l-lg shadow-lg flex flex-col items-center gap-2 hover:bg-[#1D4ED8] transition-colors">
+        <div className="bg-primary text-primary-foreground px-2 py-6 rounded-l-lg shadow-md flex flex-col items-center gap-2 hover:bg-primary/90 hover:shadow-lg transition-colors">
           <ChevronLeft className="w-4 h-4" />
           <span className="text-xs font-medium" style={{ writingMode: "vertical-rl", textOrientation: "mixed" }}>
             AI Assistant
@@ -194,26 +194,26 @@ export function AiAssistantSidebar({
 
       {/* Expanded Sidebar */}
       <aside
-        className={`fixed right-0 top-[73px] z-30 flex h-[calc(100vh-73px)] min-h-0 w-[400px] flex-col overflow-hidden border-l border-[#D0D0D0] bg-white shadow-2xl transition-transform duration-300 ease-in-out ${
+        className={`fixed right-0 top-[73px] z-30 flex h-[calc(100vh-73px)] min-h-0 w-[400px] flex-col overflow-hidden border-l border-app-border bg-white shadow-2xl transition-transform duration-300 ease-in-out ${
           isOpen ? "translate-x-0" : "translate-x-full"
         }`}
       >
         {/* Sidebar Header */}
-        <div className="flex shrink-0 items-center justify-between px-4 py-4 border-b border-[#E5E7EB]">
+        <div className="flex shrink-0 items-center justify-between px-4 py-4 border-b border-app-border">
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-[#2563EB] rounded-lg flex items-center justify-center">
-              <Bot className="w-4 h-4 text-white" />
+            <div className="w-8 h-8 bg-app-accent-soft rounded-lg flex items-center justify-center ring-1 ring-app-ring/30">
+              <Bot className="w-4 h-4 text-app-focus" />
             </div>
-            <span className="font-semibold text-[#1F2937]">AI 어시스턴트</span>
+            <span className="font-semibold text-foreground">AI 어시스턴트</span>
           </div>
-          <button onClick={onToggle} className="p-1.5 hover:bg-[#F3F4F6] rounded-md transition-colors">
-            <ChevronRight className="w-5 h-5 text-[#6B7280]" />
+          <button onClick={onToggle} className="p-1.5 hover:bg-app-accent-soft/60 rounded-md transition-colors">
+            <ChevronRight className="w-5 h-5 text-muted-foreground" />
           </button>
         </div>
 
         {/* 히스토리 로딩 중 표시 */}
         {!isHistoryLoaded && (
-          <div className="flex shrink-0 items-center gap-1 border-b border-[#E5E7EB] bg-[#F9FAFB] px-4 py-2 text-xs text-[#6B7280]">
+          <div className="flex shrink-0 items-center gap-1 border-b border-app-border bg-app-surface-muted px-4 py-2 text-xs text-muted-foreground">
             <svg className="animate-spin w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
               <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
               <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
@@ -236,20 +236,20 @@ export function AiAssistantSidebar({
             >
               <div
                 className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${
-                  message.role === "assistant" ? "bg-[#2563EB]" : "bg-[#6B7280]"
+                  message.role === "assistant" ? "bg-app-accent-soft ring-1 ring-app-ring/25" : "bg-muted-foreground"
                 }`}
               >
                 {message.role === "assistant" ? (
-                  <Bot className="h-4 w-4 text-white" />
+                  <Bot className="h-4 w-4 text-app-focus" />
                 ) : (
-                  <User className="h-4 w-4 text-white" />
+                  <User className="h-4 w-4 text-primary-foreground" />
                 )}
               </div>
               <div
                 className={`${MESSAGE_BUBBLE_BASE_CLASS} ${
                   message.role === "assistant"
-                    ? "bg-[#F3F4F6] rounded-tl-sm"
-                    : "bg-[#2563EB] rounded-tr-sm"
+                    ? "bg-muted rounded-tl-sm"
+                    : "rounded-tr-sm bg-app-accent-soft text-foreground"
                 }`}
               >
                 <MarkdownContent
@@ -267,13 +267,13 @@ export function AiAssistantSidebar({
           {/* 응답 대기 중 타이핑 인디케이터 */}
           {isSending && (
             <div className="flex min-w-0 gap-3">
-              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#2563EB]">
-                <Bot className="h-4 w-4 text-white" />
+              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-app-accent-soft ring-1 ring-app-ring/25">
+                <Bot className="h-4 w-4 text-app-focus" />
               </div>
-              <div className="flex items-center gap-1 rounded-2xl rounded-tl-sm bg-[#F3F4F6] px-4 py-3">
-                <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#9CA3AF] [animation-delay:-0.3s]" />
-                <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#9CA3AF] [animation-delay:-0.15s]" />
-                <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#9CA3AF]" />
+              <div className="flex items-center gap-1 rounded-2xl rounded-tl-sm bg-muted px-4 py-3">
+                <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground/50 [animation-delay:-0.3s]" />
+                <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground/50 [animation-delay:-0.15s]" />
+                <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground/50" />
               </div>
             </div>
           )}
@@ -281,7 +281,7 @@ export function AiAssistantSidebar({
         </div>
 
         {/* Input Area */}
-        <div className="shrink-0 overflow-hidden border-t border-[#E5E7EB] bg-[#F9FAFB] p-4">
+        <div className="shrink-0 overflow-hidden border-t border-app-border bg-app-surface-muted p-4">
           <div className="flex items-end gap-2">
             <Textarea
               value={inputValue}
@@ -300,7 +300,7 @@ export function AiAssistantSidebar({
             <Button
               onClick={handleSend}
               size="icon"
-              className="shrink-0 bg-[#2563EB] hover:bg-[#1D4ED8] text-white px-3 py-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="shrink-0 bg-primary hover:bg-primary/90 hover:ring-2 hover:ring-app-ring/40 text-primary-foreground px-3 py-2 disabled:opacity-50 disabled:cursor-not-allowed"
               disabled={isSending || !inputValue.trim() || !isConnected}
             >
               <Send className="w-4 h-4" />
diff --git a/components/analytics-content.tsx b/components/analytics-content.tsx
index 96f0779..e3e2338 100644
--- a/components/analytics-content.tsx
+++ b/components/analytics-content.tsx
@@ -105,7 +105,7 @@ function ParticipantCard({ row }: { row: BoardRow }) {
             from: "analytics",
             participantName: entry.name,
           })}
-          className="text-sm font-medium text-[#3B82F6] transition-colors hover:text-[#2563EB]"
+          className="text-sm font-medium text-app-accent-soft-foreground transition-colors hover:text-foreground"
         >
           상세 보기 →
         </Link>
@@ -271,7 +271,7 @@ export function AnalyticsContent() {
                 value={selectedExamId}
                 onChange={(e) => setSelectedExamId(e.target.value)}
                 disabled={isLoadingExams}
-                className="appearance-none rounded-lg border border-[#E5E5E5] bg-white py-2 pl-4 pr-10 text-sm text-[#1A1A1A] outline-none transition-colors focus:border-[#3B82F6] focus:ring-1 focus:ring-[#3B82F6] disabled:opacity-50"
+                className="appearance-none rounded-lg border border-[#E5E5E5] bg-white py-2 pl-4 pr-10 text-sm text-[#1A1A1A] outline-none transition-colors focus:border-ring focus:ring-1 focus:ring-ring disabled:opacity-50"
               >
                 <option value="all">모든 세션</option>
                 {exams.map((exam) => (
@@ -288,7 +288,7 @@ export function AnalyticsContent() {
             type="button"
             onClick={handleExport}
             disabled={metricsLoading || boardRows.length === 0}
-            className="inline-flex items-center gap-2 rounded-lg bg-[#3B82F6] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-[#2563EB] disabled:cursor-not-allowed disabled:opacity-50"
+            className="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
           >
             <Download className="h-4 w-4" strokeWidth={2} />
             결과보내기 (CSV)
@@ -374,7 +374,7 @@ export function AnalyticsContent() {
             key={toast.id}
             className="flex w-[360px] items-start gap-3 rounded-lg border border-[#E5E5E5] bg-white p-4 shadow-lg animate-in slide-in-from-right-full duration-300"
           >
-            <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#3B82F6]">
+            <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary">
               <CheckCircle className="h-3.5 w-3.5 text-white" strokeWidth={2} />
             </div>
             <div className="flex-1">
diff --git a/components/code-editor-section.tsx b/components/code-editor-section.tsx
index f6af073..acec8dd 100644
--- a/components/code-editor-section.tsx
+++ b/components/code-editor-section.tsx
@@ -83,7 +83,7 @@ const STATUS_LABEL: Record<SubmissionStatus, string> = {
 
 const STATUS_COLOR: Record<SubmissionStatus, string> = {
   PENDING:              "text-[#6B7280] bg-[#F3F4F6]",
-  JUDGING:              "text-[#2563EB] bg-[#EFF6FF]",
+  JUDGING:              "text-foreground bg-muted",
   ACCEPTED:             "text-[#059669] bg-[#ECFDF5]",
   WRONG_ANSWER:         "text-[#DC2626] bg-[#FEF2F2]",
   TIME_LIMIT_EXCEEDED:  "text-[#D97706] bg-[#FFFBEB]",
@@ -272,7 +272,7 @@ export const CodeEditorSection = forwardRef<CodeEditorSectionHandle, CodeEditorS
   const lineNumbers = Array.from({ length: lineCount }, (_, i) => i + 1);
 
   return (
-    <div className="bg-white rounded-xl border border-[#D0D0D0] flex flex-col flex-1 min-h-0">
+    <div className="bg-white rounded-xl border border-app-border flex flex-col flex-1 min-h-0">
       {/* Editor Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-[#E5E7EB]">
         <span className="text-sm font-medium text-[#1F2937]">Code Editor</span>
diff --git a/components/dashboard-content.tsx b/components/dashboard-content.tsx
index 3aed133..a59d510 100644
--- a/components/dashboard-content.tsx
+++ b/components/dashboard-content.tsx
@@ -88,8 +88,8 @@ export function DashboardContent() {
           {/* Total Participants */}
           <div className="flex flex-col rounded-xl border border-[#E5E5E5] bg-white px-6 py-8 shadow-sm">
             <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-50">
-                <Users className="h-5 w-5 text-blue-500" />
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
+                <Users className="h-5 w-5 text-foreground" />
               </div>
               <span className="text-sm font-medium text-gray-500">총 참가자 수</span>
             </div>
@@ -147,7 +147,7 @@ export function DashboardContent() {
             </div>
             <Link
               href="/admin/logs"
-              className="flex items-center gap-1 text-[13px] font-normal text-blue-600 transition-all hover:text-blue-700 hover:underline"
+              className="flex items-center gap-1 text-[13px] font-normal text-foreground transition-all hover:text-foreground/80 hover:underline"
             >
               모두 보기 <ArrowRight className="h-4 w-4" />
             </Link>
@@ -197,7 +197,7 @@ export function DashboardContent() {
           <div className="mt-5 flex items-center gap-3">
             <Link
               href="/admin/entry-codes"
-              className="flex items-center gap-2 rounded-lg bg-[#3B82F6] px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-[#2563EB]"
+              className="flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
             >
               <Plus className="h-4 w-4" />
               입장 코드 생성
diff --git a/components/entry-codes-content.tsx b/components/entry-codes-content.tsx
index 9306158..1e22980 100644
--- a/components/entry-codes-content.tsx
+++ b/components/entry-codes-content.tsx
@@ -67,6 +67,18 @@ const pickEntryCode = (source: unknown): string | undefined => {
   return undefined
 }
 
+/** 시험 상태 배지 스타일 (라벨/판단 로직과 분리) */
+function getExamStateBadgeClassName(examEnded: boolean, isInProgress: boolean): string {
+  const base = "rounded-full border px-2.5 py-0.5 text-xs whitespace-nowrap text-center"
+  if (examEnded) {
+    return `${base} border-app-border bg-muted font-medium text-muted-foreground`
+  }
+  if (isInProgress) {
+    return `${base} border-emerald-200 bg-emerald-50 font-semibold text-emerald-700`
+  }
+  return `${base} border-app-ring/40 bg-app-accent-soft font-medium text-app-accent-soft-foreground`
+}
+
 /** 시험 시작 버튼(0) → 종료 버튼(1) → 종료됨(2). UI 버튼 분기와 동일한 state 기준 */
 function getExamEntryCodesActionPriority(state: string): number {
   const normalized = (state ?? "").trim().toUpperCase()
@@ -675,15 +687,15 @@ export function EntryCodesContent() {
   return (
     <div className="flex h-full min-w-0 flex-1 flex-col">
       {/* Top Header Bar */}
-      <header className="flex h-[88px] shrink-0 items-center justify-between border-b border-[#E5E5E5] bg-white px-8 lg:pr-8 xl:pr-10">
+      <header className="flex h-[88px] shrink-0 items-center justify-between border-b border-[#E5E5E5] bg-white px-8 lg:pr-10 xl:pr-12">
         <div>
           <h1 className="text-2xl font-semibold text-[#1A1A1A]">코드 관리</h1>
           <p className="text-sm text-[#6B7280]">참가자 시험 입장 코드를 관리합니다</p>
         </div>
-        <div className="flex shrink-0 gap-2">
+        <div className="flex shrink-0 gap-2 lg:mr-1 xl:mr-2">
           <button
             onClick={() => setIsCreateExamOpen(true)}
-            className="rounded-full bg-[#3B82F6] px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-[#2563EB]"
+            className="rounded-full bg-primary px-5 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
           >
             시험 생성
           </button>
@@ -749,13 +761,7 @@ export function EntryCodesContent() {
                     <span className="hidden shrink-0 px-3 text-[#9CA3AF] xl:inline">|</span>
                     {/* 상태 배지 */}
                     <div className="flex w-full shrink-0 justify-start xl:w-20 xl:justify-center">
-                      <span
-                        className={`rounded-full px-2.5 py-0.5 text-xs whitespace-nowrap text-center ${
-                          isInProgress
-                            ? "bg-[#E0EDFF] font-semibold text-[#3B82F6]"
-                            : "bg-[#F3F4F6] font-medium text-[#6B7280]"
-                        }`}
-                      >
+                      <span className={getExamStateBadgeClassName(examEnded, isInProgress)}>
                         {examStateLabel}
                       </span>
                     </div>
@@ -793,7 +799,7 @@ export function EntryCodesContent() {
                       <button
                         onClick={() => handleStartExam(exam)}
                         disabled={isStartingExam && selectedExamForStart?.id === exam.id}
-                        className="shrink-0 whitespace-nowrap rounded-full border border-[#3B82F6] bg-white px-4 py-1.5 text-sm font-medium text-[#3B82F6] transition-colors hover:bg-[#E0EDFF] disabled:cursor-not-allowed disabled:opacity-50"
+                        className="shrink-0 whitespace-nowrap rounded-full border border-foreground bg-white px-4 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
                       >
                         {isStartingExam && selectedExamForStart?.id === exam.id ? "시작 중..." : "시험 시작 >"}
                       </button>
@@ -839,7 +845,7 @@ export function EntryCodesContent() {
               <button
                 onClick={() => setCurrentExamPage((p) => Math.max(1, p - 1))}
                 disabled={currentExamPage === 1}
-                className="flex h-8 items-center gap-1 rounded-md border border-[#E5E7EB] bg-white px-2 text-sm text-[#6B7280] transition-colors hover:bg-[#E0EDFF] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
+                className="flex h-8 items-center gap-1 rounded-md border border-app-border bg-white px-2 text-sm text-muted-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
               >
                 <ChevronLeft className="h-4 w-4" />
                 이전
@@ -852,8 +858,8 @@ export function EntryCodesContent() {
                   onClick={() => setCurrentExamPage(page)}
                   className={`flex h-8 w-8 items-center justify-center rounded-md border text-sm transition-colors ${
                     page === currentExamPage
-                      ? "border-[#3B82F6] bg-[#3B82F6] text-white"
-                      : "border-[#E5E7EB] bg-white text-[#6B7280] hover:bg-[#E0EDFF]"
+                      ? "border-primary bg-primary text-primary-foreground"
+                      : "border-app-border bg-white text-muted-foreground hover:bg-muted"
                   }`}
                 >
                   {page}
@@ -864,7 +870,7 @@ export function EntryCodesContent() {
               <button
                 onClick={() => setCurrentExamPage((p) => Math.min(examTotalPages, p + 1))}
                 disabled={currentExamPage === examTotalPages || examTotalPages === 0}
-                className="flex h-8 items-center gap-1 rounded-md border border-[#E5E7EB] bg-white px-2 text-sm text-[#6B7280] transition-colors hover:bg-[#E0EDFF] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
+                className="flex h-8 items-center gap-1 rounded-md border border-app-border bg-white px-2 text-sm text-muted-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
               >
                 다음
                 <ChevronRight className="h-4 w-4" />
diff --git a/components/global-settings-content.tsx b/components/global-settings-content.tsx
index 30a3d53..520bfab 100644
--- a/components/global-settings-content.tsx
+++ b/components/global-settings-content.tsx
@@ -253,7 +253,7 @@ export function GlobalSettingsContent() {
                   onCheckedChange={(checked) =>
                     setForm({ ...form, autoDeleteExpiredData: checked })
                   }
-                  className="shrink-0 data-[state=checked]:bg-[#7C3AED]"
+                  className="shrink-0 data-[state=checked]:bg-primary"
                 />
               </div>
             </div>
@@ -272,7 +272,7 @@ export function GlobalSettingsContent() {
             <Button
               onClick={() => void handleSave()}
               disabled={!isDirty || isSaving}
-              className={isDirty ? "bg-[#7C3AED] hover:bg-[#6D28D9]" : ""}
+              className={isDirty ? "bg-primary hover:bg-primary/90" : ""}
             >
               {isSaving ? "저장 중..." : "변경 사항 저장"}
             </Button>
diff --git a/components/login-card.tsx b/components/login-card.tsx
index 55acc9f..92062ae 100644
--- a/components/login-card.tsx
+++ b/components/login-card.tsx
@@ -321,7 +321,7 @@ export default function LoginCard() {
                 <button
                   type="button"
                   onClick={() => router.push("/admin-signup")}
-                  className="text-blue-600 underline hover:text-primary/80"
+                  className="cursor-pointer font-medium text-blue-600 underline transition-colors hover:text-blue-700"
                 >
                   회원가입하기
                 </button>
diff --git a/components/master-dashboard-content.tsx b/components/master-dashboard-content.tsx
index e6161b3..cd2e74e 100644
--- a/components/master-dashboard-content.tsx
+++ b/components/master-dashboard-content.tsx
@@ -20,11 +20,7 @@ import {
   isActiveExam,
   type MasterSystemStatusDisplay,
 } from "@/lib/master-dashboard-kpi"
-import {
-  isMasterSessionInProgress,
-  pickRecentSessions,
-  type MasterRecentSession,
-} from "@/lib/master-test-sessions"
+import { pickRecentSessions, type MasterRecentSession } from "@/lib/master-test-sessions"
 import { AdminPageHeader } from "@/components/admin-page-header"
 import {
   formatMasterActivityLogDateTime,
@@ -170,11 +166,11 @@ export function MasterDashboardContent({ onNavigate }: DashboardContentProps) {
                 style={{
                   width: "48px",
                   height: "48px",
-                  backgroundColor: "#EFF6FF",
+                  backgroundColor: "var(--muted)",
                   borderRadius: "12px",
                 }}
               >
-                <Users size={24} style={{ color: "#3B82F6" }} />
+                <Users size={24} style={{ color: "var(--foreground)" }} />
               </div>
             </div>
           </CardContent>
@@ -278,15 +274,13 @@ export function MasterDashboardContent({ onNavigate }: DashboardContentProps) {
                     </span>
                   </div>
                   <Badge
-                    style={{
-                      backgroundColor: isMasterSessionInProgress(session.status)
-                        ? "#DCFCE7"
-                        : "#F3F4F6",
-                      color: isMasterSessionInProgress(session.status) ? "#22C55E" : "#6B7280",
-                      fontWeight: 500,
-                      fontSize: "12px",
-                      border: "none",
-                    }}
+                    className={
+                      session.status === "진행 중"
+                        ? "border border-emerald-200 bg-emerald-50 text-xs font-semibold text-emerald-700"
+                        : session.status === "대기 중"
+                          ? "border border-app-ring/40 bg-app-accent-soft text-xs font-medium text-app-accent-soft-foreground"
+                          : "border border-app-border bg-muted text-xs font-medium text-muted-foreground"
+                    }
                   >
                     {session.status}
                   </Badge>
@@ -298,8 +292,7 @@ export function MasterDashboardContent({ onNavigate }: DashboardContentProps) {
               <Button
                 asChild
                 variant="ghost"
-                className="w-full flex items-center justify-center gap-2"
-                style={{ color: "#3B82F6", fontSize: "14px", fontWeight: 500 }}
+                className="w-full flex items-center justify-center gap-2 text-foreground"
               >
                 <Link href="/master/test-sessions">
                   모든 세션 보기
@@ -384,8 +377,7 @@ export function MasterDashboardContent({ onNavigate }: DashboardContentProps) {
               <Button
                 asChild
                 variant="ghost"
-                className="w-full flex items-center justify-center gap-2"
-                style={{ color: "#3B82F6", fontSize: "14px", fontWeight: 500 }}
+                className="w-full flex items-center justify-center gap-2 text-foreground"
               >
                 <Link href="/master/platform-logs">
                   모든 로그 보기
@@ -404,25 +396,16 @@ export function MasterDashboardContent({ onNavigate }: DashboardContentProps) {
           {/* Manage Test Sessions */}
           <Link href="/master/test-sessions" className="block">
             <Card
-              className="cursor-pointer transition-all hover:shadow-md"
+              className="cursor-pointer border border-app-border transition-all hover:border-app-ring hover:shadow-md"
               style={{
                 borderRadius: "12px",
-                border: "1px solid #E5E5E5",
                 boxShadow: "0 1px 3px rgba(0,0,0,0.04)",
               }}
             >
               <CardContent className="p-5">
                 <div className="flex items-center gap-4">
-                  <div
-                    className="flex items-center justify-center"
-                    style={{
-                      width: "48px",
-                      height: "48px",
-                      backgroundColor: "#EFF6FF",
-                      borderRadius: "12px",
-                    }}
-                  >
-                    <CalendarClock size={24} style={{ color: "#3B82F6" }} />
+                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-app-accent-soft text-app-accent-soft-foreground">
+                    <CalendarClock size={24} className="text-app-accent-soft-foreground" />
                   </div>
                   <div className="flex flex-col gap-0.5">
                     <span style={{ fontSize: "16px", fontWeight: 600, color: "#1A1A1A" }}>테스트 세션 관리</span>
@@ -436,25 +419,16 @@ export function MasterDashboardContent({ onNavigate }: DashboardContentProps) {
           {/* Manage Problems */}
           <Link href="/master/problem" className="block">
             <Card
-              className="cursor-pointer transition-all hover:shadow-md"
+              className="cursor-pointer border border-app-border transition-all hover:border-app-ring hover:shadow-md"
               style={{
                 borderRadius: "12px",
-                border: "1px solid #E5E5E5",
                 boxShadow: "0 1px 3px rgba(0,0,0,0.04)",
               }}
             >
               <CardContent className="p-5">
                 <div className="flex items-center gap-4">
-                  <div
-                    className="flex items-center justify-center"
-                    style={{
-                      width: "48px",
-                      height: "48px",
-                      backgroundColor: "#F3E8FF",
-                      borderRadius: "12px",
-                    }}
-                  >
-                    <FileCode size={24} style={{ color: "#7C3AED" }} />
+                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-app-accent-soft text-app-accent-soft-foreground">
+                    <FileCode size={24} className="text-app-accent-soft-foreground" />
                   </div>
                   <div className="flex flex-col gap-0.5">
                     <span style={{ fontSize: "16px", fontWeight: 600, color: "#1A1A1A" }}>문제 관리</span>
@@ -468,25 +442,16 @@ export function MasterDashboardContent({ onNavigate }: DashboardContentProps) {
           {/* Open Platform Logs */}
           <Link href="/master/platform-logs" className="block">
             <Card
-              className="cursor-pointer transition-all hover:shadow-md"
+              className="cursor-pointer border border-app-border transition-all hover:border-app-ring hover:shadow-md"
               style={{
                 borderRadius: "12px",
-                border: "1px solid #E5E5E5",
                 boxShadow: "0 1px 3px rgba(0,0,0,0.04)",
               }}
             >
               <CardContent className="p-5">
                 <div className="flex items-center gap-4">
-                  <div
-                    className="flex items-center justify-center"
-                    style={{
-                      width: "48px",
-                      height: "48px",
-                      backgroundColor: "#F3F4F6",
-                      borderRadius: "12px",
-                    }}
-                  >
-                    <ScrollText size={24} style={{ color: "#6B7280" }} />
+                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-app-accent-soft text-app-accent-soft-foreground">
+                    <ScrollText size={24} className="text-app-accent-soft-foreground" />
                   </div>
                   <div className="flex flex-col gap-0.5">
                     <span style={{ fontSize: "16px", fontWeight: 600, color: "#1A1A1A" }}>플랫폼 로그 열기</span>
diff --git a/components/participant-evaluation-content.tsx b/components/participant-evaluation-content.tsx
index e1f31fa..53e92a5 100644
--- a/components/participant-evaluation-content.tsx
+++ b/components/participant-evaluation-content.tsx
@@ -77,6 +77,23 @@ function formatScore(n: number | null | undefined): string {
   return `${Number(n).toFixed(1)}`
 }
 
+/** 관리자 화면용 시각 표시 — 예: 2026. 06. 12. 18:31 */
+function formatAdminEvaluationDateTime(value: string | null | undefined): string {
+  if (!value?.trim()) return "–"
+  try {
+    const date = new Date(value)
+    if (Number.isNaN(date.getTime())) return "–"
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, "0")
+    const day = String(date.getDate()).padStart(2, "0")
+    const hour = String(date.getHours()).padStart(2, "0")
+    const minute = String(date.getMinutes()).padStart(2, "0")
+    return `${year}. ${month}. ${day}. ${hour}:${minute}`
+  } catch {
+    return "–"
+  }
+}
+
 export function ParticipantEvaluationContent({
   entryCode = "",
   examId: examIdProp,
@@ -298,7 +315,7 @@ export function ParticipantEvaluationContent({
         <div>
           <h1 className="text-2xl font-semibold text-[#1A1A1A]">참가자 평가 상세</h1>
           <p className="text-sm text-[#6B7280]">
-            보드 API와 관리자 전용 제출 상세 API에서 불러온 데이터입니다. 미제공 필드는 안내 문구로 표시됩니다.
+            참가자의 제출 정보, 채점 점수, 테스트 결과를 확인할 수 있습니다.
           </p>
         </div>
       </header>
@@ -340,7 +357,6 @@ export function ParticipantEvaluationContent({
             <p className="mt-3 text-lg font-semibold text-[#1A1A1A]">
               {isLoadingBoard ? "…" : (examTitle ?? entryCode) || "–"}
             </p>
-            {examId != null && <p className="mt-1 text-xs text-[#6B7280]">examId: {examId}</p>}
           </div>
           <div className="rounded-xl border border-[#E5E5E5] bg-white p-5 shadow-sm">
             <span className="text-xs font-semibold uppercase tracking-wide text-[#6B7280]">토큰 사용량</span>
@@ -376,11 +392,6 @@ export function ParticipantEvaluationContent({
             {effectiveTotalScore != null && (
               <p className="mt-2 text-xs text-[#6B7280]">
                 기준: 80점 이상 높음 · 50점 이상 보통 · 50점 미만 낮음
-                {detailScoresMeaningful
-                  ? " (관리자 제출 상세 API 총점)"
-                  : showBoardTotalOnly
-                    ? " (관리자 보드 총점)"
-                    : ""}
               </p>
             )}
           </div>
@@ -397,11 +408,19 @@ export function ParticipantEvaluationContent({
                 <span className="text-sm text-[#6B7280]">–</span>
               )}
             </div>
-            {boardEntry?.submittedAt && (
-              <p className="mt-2 text-xs text-[#6B7280]">제출 시각: {boardEntry.submittedAt}</p>
-            )}
-            {boardEntry?.evaluatedAt && (
-              <p className="text-xs text-[#6B7280]">점수 갱신: {boardEntry.evaluatedAt}</p>
+            {(boardEntry?.submittedAt || boardEntry?.evaluatedAt) && (
+              <p className="mt-2 text-xs text-[#6B7280]">
+                {[
+                  boardEntry?.submittedAt
+                    ? `제출 시각: ${formatAdminEvaluationDateTime(boardEntry.submittedAt)}`
+                    : null,
+                  boardEntry?.evaluatedAt
+                    ? `점수 갱신: ${formatAdminEvaluationDateTime(boardEntry.evaluatedAt)}`
+                    : null,
+                ]
+                  .filter(Boolean)
+                  .join(" · ")}
+              </p>
             )}
           </div>
         </div>
@@ -420,37 +439,33 @@ export function ParticipantEvaluationContent({
                 {detailScoresMeaningful ? formatScore(scoreFromDetail?.prompt ?? null) : "–"}
               </p>
               <p className="mt-1 text-sm font-medium text-[#374151]">프롬프트 점수</p>
-              <p className="mt-1 text-xs text-[#6B7280]">관리자 제출 상세 API의 score.prompt</p>
             </div>
             <div className="rounded-xl border border-[#E5E5E5] bg-white p-6 shadow-sm">
               <p className="text-3xl font-bold text-[#1A1A1A]">
                 {detailScoresMeaningful ? formatScore(scoreFromDetail?.perf ?? null) : "–"}
               </p>
               <p className="mt-1 text-sm font-medium text-[#374151]">성능 점수</p>
-              <p className="mt-1 text-xs text-[#6B7280]">관리자 제출 상세 API의 score.perf</p>
             </div>
             <div className="rounded-xl border border-[#E5E5E5] bg-white p-6 shadow-sm">
               <p className="text-3xl font-bold text-[#1A1A1A]">
                 {detailScoresMeaningful ? formatScore(scoreFromDetail?.correctness ?? null) : "–"}
               </p>
               <p className="mt-1 text-sm font-medium text-[#374151]">정답률 점수</p>
-              <p className="mt-1 text-xs text-[#6B7280]">
-                {detailScoresMeaningful
-                  ? "관리자 제출 상세 API score.correctness"
-                  : showBoardTotalOnly
-                    ? "항목별 값 없음 — 아래 총점만 보드 참고"
-                    : "데이터 없음"}
-              </p>
+              {!detailScoresMeaningful && (
+                <p className="mt-1 text-xs text-[#6B7280]">
+                  {showBoardTotalOnly ? "항목별 값 없음 — 아래 총점 참고" : "데이터 없음"}
+                </p>
+              )}
             </div>
           </div>
           {detailScoresMeaningful && (
             <p className="mt-3 text-center text-sm font-semibold text-[#1A1A1A]">
-              총점 {formatScore(scoreFromDetail?.total ?? null)} (관리자 제출 상세 API)
+              총점 {formatScore(scoreFromDetail?.total ?? null)}
             </p>
           )}
           {!detailScoresMeaningful && showBoardTotalOnly && (
             <p className="mt-3 text-center text-sm font-semibold text-[#1A1A1A]">
-              총점 {formatScore(Number(boardEntry!.totalScore))} (관리자 보드 — 상세 점수 행 없음)
+              총점 {formatScore(Number(boardEntry!.totalScore))}
             </p>
           )}
           {!detailScoresMeaningful && !showBoardTotalOnly && !isLoadingSubmission && (
@@ -506,7 +521,7 @@ export function ParticipantEvaluationContent({
             <button
               type="button"
               onClick={handleExport}
-              className="inline-flex items-center gap-1.5 rounded-lg bg-[#3B82F6] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-[#2563EB]"
+              className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
             >
               결과보내기 (CSV)
             </button>
@@ -520,7 +535,7 @@ export function ParticipantEvaluationContent({
             key={toast.id}
             className="flex w-[360px] items-start gap-3 rounded-lg border border-[#E5E5E5] bg-white p-4 shadow-lg animate-in slide-in-from-right-full duration-300"
           >
-            <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#3B82F6]">
+            <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary">
               <CheckCircle className="h-3.5 w-3.5 text-white" strokeWidth={2} />
             </div>
             <div className="flex-1">
diff --git a/components/participant-evaluation-test-summary.tsx b/components/participant-evaluation-test-summary.tsx
index 5ca005f..442831a 100644
--- a/components/participant-evaluation-test-summary.tsx
+++ b/components/participant-evaluation-test-summary.tsx
@@ -143,21 +143,21 @@ export function ParticipantEvaluationTestSummary({
               <p className="mt-2 font-semibold text-[#1A1A1A]">
                 {detail.metrics?.timeMsMedian != null ? `${detail.metrics.timeMsMedian} ms` : "–"}
               </p>
-              <p className="mt-1 text-xs text-[#6B7280]">중앙값 (submission_runs)</p>
+              <p className="mt-1 text-xs text-[#6B7280]">테스트 실행 기준</p>
             </div>
             <div className="rounded-lg border border-[#F3F4F6] bg-[#FAFAFA] p-4">
               <p className="text-xs font-medium uppercase tracking-wide text-[#6B7280]">메모리</p>
               <p className="mt-2 font-semibold text-[#1A1A1A]">
                 {detail.metrics?.memKbPeak != null ? `${detail.metrics.memKbPeak} KB` : "–"}
               </p>
-              <p className="mt-1 text-xs text-[#6B7280]">peak (submission_runs)</p>
+              <p className="mt-1 text-xs text-[#6B7280]">최대 사용량</p>
             </div>
             <div className="rounded-lg border border-[#F3F4F6] bg-[#FAFAFA] p-4">
               <p className="text-xs font-medium uppercase tracking-wide text-[#6B7280]">코드 LOC</p>
               <p className="mt-2 font-semibold text-[#1A1A1A]">
                 {detail.metrics?.loc != null ? detail.metrics.loc : "–"}
               </p>
-              <p className="mt-1 text-xs text-[#6B7280]">submissions.code_loc</p>
+              <p className="mt-1 text-xs text-[#6B7280]">제출 코드 기준</p>
             </div>
           </div>
 
@@ -196,14 +196,14 @@ export function ParticipantEvaluationTestSummary({
                 </div>
                 {detail.tc?.passRateWeighted != null && (
                   <p className="mt-2 text-xs text-[#6B7280]">
-                    가중 통과율 (API): {(Number(detail.tc.passRateWeighted) * 100).toFixed(1)}%
+                    가중 통과율: {(Number(detail.tc.passRateWeighted) * 100).toFixed(1)}%
                   </p>
                 )}
               </>
             ) : (
               <p className="rounded-lg border border-dashed border-[#E5E5E5] bg-[#FAFAFA] px-4 py-3 text-[#6B7280]">
-                submission_runs 집계 데이터가 없습니다. 채점 완료 후에도 비어 있으면 테스트 결과가 DB에
-                저장되지 않았을 수 있습니다.
+                테스트 실행 집계 데이터가 없습니다. 채점 완료 후에도 비어 있으면 테스트 결과가 저장되지 않았을
+                수 있습니다.
               </p>
             )}
           </div>
@@ -242,19 +242,11 @@ export function ParticipantEvaluationTestSummary({
                   </tbody>
                 </table>
               </div>
-              <p className="mt-2 text-xs text-[#6B7280]">출처: 관리자 API runs[] (submission_runs)</p>
             </div>
           ) : hasAnyTcData ? (
             <p className="text-xs text-[#6B7280]">모든 기록된 케이스가 정답(AC)입니다.</p>
           ) : null}
 
-          <div className="rounded-lg border border-[#F3F4F6] bg-[#FAFAFA] px-4 py-3 text-xs text-[#6B7280]">
-            <p className="font-medium text-[#374151]">현재 API에서 제공되지 않음</p>
-            <ul className="mt-2 list-inside list-disc space-y-1">
-              <li>테스트 케이스별 expected / actual 입·출력 상세</li>
-              <li>표준 출력·에러 본문 (stdout_bytes / stderr_bytes는 API 미노출)</li>
-            </ul>
-          </div>
         </div>
       )}
     </div>
diff --git a/components/participant-list-content.tsx b/components/participant-list-content.tsx
index 92af3fa..1654275 100644
--- a/components/participant-list-content.tsx
+++ b/components/participant-list-content.tsx
@@ -143,7 +143,7 @@ export function ParticipantListContent({ entryCode }: ParticipantListContentProp
         <div className="mb-4 shrink-0">
           <Link
             href="/admin/results"
-            className="inline-flex items-center gap-1.5 text-sm text-[#6B7280] transition-colors hover:text-[#3B82F6]"
+            className="inline-flex items-center gap-1.5 text-sm text-[#6B7280] transition-colors hover:text-app-accent-soft-foreground"
           >
             <ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
             평가 결과로 돌아가기
@@ -229,7 +229,7 @@ export function ParticipantListContent({ entryCode }: ParticipantListContentProp
                         from: "results",
                         participantName: participant.name,
                       })}
-                      className="inline-flex items-center gap-1.5 rounded-md border-[#3B82F6] bg-white px-3 py-1.5 text-sm text-[#3B82F6] hover:bg-[#EFF6FF]"
+                      className="inline-flex items-center gap-1.5 rounded-md border border-app-ring/40 bg-white px-3 py-1.5 text-sm text-app-accent-soft-foreground hover:bg-app-accent-soft"
                     >
                       <Eye className="h-3.5 w-3.5" strokeWidth={1.5} />
                       상세 보기
diff --git a/components/problem-content.tsx b/components/problem-content.tsx
index d8622a7..a72cbe7 100644
--- a/components/problem-content.tsx
+++ b/components/problem-content.tsx
@@ -175,7 +175,7 @@ export function ProblemContent() {
                     e.stopPropagation()
                     void handleViewDetail(problem)
                   }}
-                  className="flex shrink-0 items-center gap-2 rounded-lg px-4 py-2 text-blue-600 transition-colors hover:bg-blue-50"
+                  className="flex shrink-0 items-center gap-2 rounded-lg px-4 py-2 text-app-accent-soft-foreground transition-colors hover:bg-app-accent-soft"
                   style={{ fontSize: "14px", fontWeight: 500 }}
                 >
                   <Eye size={18} />
diff --git a/components/problem-section.tsx b/components/problem-section.tsx
index b06ddae..f296702 100644
--- a/components/problem-section.tsx
+++ b/components/problem-section.tsx
@@ -81,7 +81,7 @@ export function ProblemSection({ examId }: ProblemSectionProps) {
   const problem = assignment?.problem
 
   return (
-    <div className="bg-white rounded-xl border border-[#D0D0D0] p-6 flex-shrink-0">
+    <div className="bg-white rounded-xl border border-app-border p-6 flex-shrink-0">
       <h2 className="text-lg font-semibold text-[#1F2937] mb-4">
         {loading
           ? "문제 배정을 확인하는 중입니다..."
@@ -98,7 +98,7 @@ export function ProblemSection({ examId }: ProblemSectionProps) {
             {problem.tags.map((tag) => (
               <span
                 key={tag}
-                className="text-xs px-2 py-0.5 rounded-full bg-[#EFF6FF] text-[#2563EB] border border-[#BFDBFE]"
+                className="text-xs px-2 py-0.5 rounded-full bg-app-accent-soft text-app-accent-soft-foreground border border-app-ring/40"
               >
                 {tag}
               </span>
diff --git a/components/problems-content.tsx b/components/problems-content.tsx
index 4fb2862..e893551 100644
--- a/components/problems-content.tsx
+++ b/components/problems-content.tsx
@@ -179,7 +179,7 @@ export function ProblemsContent() {
               placeholder="문제 검색…"
               value={searchQuery}
               onChange={(e) => handleSearchChange(e.target.value)}
-              className="h-10 w-72 rounded-lg border border-[#E5E5E5] bg-white pl-10 pr-4 text-sm text-[#1A1A1A] placeholder-[#9CA3AF] outline-none transition-colors focus:border-[#3B82F6] focus:ring-1 focus:ring-[#3B82F6]"
+              className="h-10 w-72 rounded-lg border border-[#E5E5E5] bg-white pl-10 pr-4 text-sm text-[#1A1A1A] placeholder-[#9CA3AF] outline-none transition-colors focus:border-ring focus:ring-1 focus:ring-ring"
             />
           </div>
 
@@ -248,7 +248,9 @@ export function ProblemsContent() {
                     <span
                       className={
                         "rounded-full px-2.5 py-0.5 text-xs font-medium " +
-                        (problem.available ? "bg-[#E0EDFF] text-[#3B82F6]" : "bg-[#F3F4F6] text-[#6B7280]")
+                        (problem.available
+                          ? "bg-app-accent-soft text-app-accent-soft-foreground"
+                          : "border border-border bg-muted text-muted-foreground")
                       }
                     >
                       {problem.available ? "사용 가능" : "사용 불가"}
@@ -257,7 +259,7 @@ export function ProblemsContent() {
                       checked={problem.available}
                       disabled={togglingProblemId === problem.id}
                       onCheckedChange={(checked) => void handleToggleAvailability(problem.id, checked)}
-                      className="data-[state=checked]:bg-[#3B82F6]"
+                      className="data-[state=checked]:bg-primary"
                     />
                   </div>
                 </div>
@@ -277,7 +279,7 @@ export function ProblemsContent() {
               <button
                 onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                 disabled={currentPage === 1}
-                className="flex h-8 items-center gap-1 rounded-md border border-[#E5E7EB] bg-white px-2 text-sm text-[#6B7280] transition-colors hover:bg-[#E0EDFF] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
+                className="flex h-8 items-center gap-1 rounded-md border border-app-border bg-white px-2 text-sm text-muted-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
               >
                 <ChevronLeft className="h-4 w-4" />
                 이전
@@ -290,8 +292,8 @@ export function ProblemsContent() {
                   className={
                     "flex h-8 w-8 items-center justify-center rounded-md border text-sm transition-colors " +
                     (page === currentPage
-                      ? "border-[#3B82F6] bg-[#3B82F6] text-white"
-                      : "border-[#E5E7EB] bg-white text-[#6B7280] hover:bg-[#E0EDFF]")
+                      ? "border-primary bg-primary text-primary-foreground"
+                      : "border-app-border bg-white text-muted-foreground hover:bg-muted")
                   }
                 >
                   {page}
@@ -301,7 +303,7 @@ export function ProblemsContent() {
               <button
                 onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                 disabled={currentPage === totalPages || totalPages === 0}
-                className="flex h-8 items-center gap-1 rounded-md border border-[#E5E7EB] bg-white px-2 text-sm text-[#6B7280] transition-colors hover:bg-[#E0EDFF] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
+                className="flex h-8 items-center gap-1 rounded-md border border-app-border bg-white px-2 text-sm text-muted-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
               >
                 다음
                 <ChevronRight className="h-4 w-4" />
diff --git a/components/remaining-timer.tsx b/components/remaining-timer.tsx
index 3ede681..d63648c 100644
--- a/components/remaining-timer.tsx
+++ b/components/remaining-timer.tsx
@@ -64,7 +64,7 @@ export function RemainingTimer({ endAt, onTimeOver }: RemainingTimerProps) {
   }
 
   return (
-    <span className="font-mono text-xl text-[#2563EB] font-bold">
+    <span className="font-mono text-xl text-app-focus font-bold">
       {formatTime(remainingSeconds)}
     </span>
   )
diff --git a/components/results-content.tsx b/components/results-content.tsx
index 5076622..5714dea 100644
--- a/components/results-content.tsx
+++ b/components/results-content.tsx
@@ -130,7 +130,7 @@ export function ResultsContent() {
                 setSearchQuery(e.target.value)
                 setCurrentPage(1)
               }}
-              className="w-full rounded-lg border border-[#E5E5E5] bg-white py-2.5 pl-10 pr-4 text-sm text-[#1A1A1A] placeholder-[#9CA3AF] outline-none transition-colors focus:border-[#3B82F6] focus:ring-1 focus:ring-[#3B82F6]"
+              className="w-full rounded-lg border border-[#E5E5E5] bg-white py-2.5 pl-10 pr-4 text-sm text-[#1A1A1A] placeholder-[#9CA3AF] outline-none transition-colors focus:border-ring focus:ring-1 focus:ring-ring"
             />
           </div>
         </div>
@@ -241,7 +241,7 @@ export function ResultsContent() {
                   type="button"
                   onClick={() => handleDownload(result)}
                   disabled={downloadingExamId === result.id}
-                  className="flex items-center gap-2 rounded-lg bg-[#3B82F6] px-4 py-2 text-white transition-colors hover:bg-[#2563EB] disabled:cursor-not-allowed disabled:opacity-60"
+                  className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-60"
                   style={{
                     fontSize: "14px",
                     fontWeight: 500,
@@ -256,7 +256,7 @@ export function ResultsContent() {
                 </button>
                 <Link
                   href={`/admin/results/${encodeURIComponent(result.entryCode)}`}
-                  className="flex items-center gap-2 px-4 py-2 rounded-lg text-blue-600 hover:bg-blue-50 transition-colors"
+                  className="flex items-center gap-2 rounded-lg px-4 py-2 text-app-accent-soft-foreground transition-colors hover:bg-app-accent-soft"
                   style={{
                     fontSize: "14px",
                     fontWeight: 500,
@@ -291,7 +291,7 @@ export function ResultsContent() {
               <button
                 onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                 disabled={currentPage === 1}
-                className="flex h-8 items-center gap-1 rounded-md border border-[#E5E7EB] bg-white px-2 text-sm text-[#6B7280] transition-colors hover:bg-[#E0EDFF] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
+                className="flex h-8 items-center gap-1 rounded-md border border-app-border bg-white px-2 text-sm text-muted-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
               >
                 <ChevronLeft className="h-4 w-4" />
                 이전
@@ -304,8 +304,8 @@ export function ResultsContent() {
                   onClick={() => setCurrentPage(page)}
                   className={`flex h-8 w-8 items-center justify-center rounded-md border text-sm transition-colors ${
                     page === currentPage
-                      ? "border-[#3B82F6] bg-[#3B82F6] text-white"
-                      : "border-[#E5E7EB] bg-white text-[#6B7280] hover:bg-[#E0EDFF]"
+                      ? "border-primary bg-primary text-primary-foreground"
+                      : "border-app-border bg-white text-muted-foreground hover:bg-muted"
                   }`}
                 >
                   {page}
@@ -316,7 +316,7 @@ export function ResultsContent() {
               <button
                 onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                 disabled={currentPage === totalPages || totalPages === 0}
-                className="flex h-8 items-center gap-1 rounded-md border border-[#E5E7EB] bg-white px-2 text-sm text-[#6B7280] transition-colors hover:bg-[#E0EDFF] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
+                className="flex h-8 items-center gap-1 rounded-md border border-app-border bg-white px-2 text-sm text-muted-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
               >
                 다음
                 <ChevronRight className="h-4 w-4" />
@@ -333,7 +333,7 @@ export function ResultsContent() {
             key={toast.id}
             className="flex w-[360px] items-start gap-3 rounded-lg border border-[#E5E5E5] bg-white p-4 shadow-lg animate-in slide-in-from-right-full duration-300"
           >
-            <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#3B82F6]">
+            <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary">
               <CheckCircle className="h-3.5 w-3.5 text-white" strokeWidth={2} />
             </div>
             <div className="flex-1">
diff --git a/components/settings-content.tsx b/components/settings-content.tsx
index aebd9cb..4b7c1ee 100644
--- a/components/settings-content.tsx
+++ b/components/settings-content.tsx
@@ -376,7 +376,7 @@ export function SettingsContent() {
             <Button 
               onClick={handleLogout} 
               disabled={isLoggingOut}
-              className="bg-[#3B82F6] hover:bg-[#2563EB] text-white disabled:opacity-50"
+              className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
             >
               {isLoggingOut ? "로그아웃 중..." : "로그아웃"}
             </Button>
@@ -503,7 +503,7 @@ export function SettingsContent() {
             <Button
               onClick={handleConfirmPasswordChange}
               disabled={isChangingPassword}
-              className="bg-[#3B82F6] hover:bg-[#2563EB] text-white disabled:opacity-50"
+              className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
             >
               {isChangingPassword ? "변경 중..." : "비밀번호 변경"}
             </Button>
@@ -526,7 +526,7 @@ export function SettingsContent() {
           <DialogFooter className="mt-4 flex w-full justify-center sm:justify-center">
             <Button
               onClick={() => setShowPasswordChangeSuccessModal(false)}
-              className="bg-[#3B82F6] hover:bg-[#2563EB] text-white"
+              className="bg-primary text-primary-foreground hover:bg-primary/90"
             >
               확인
             </Button>
diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index b534fc9..0fe8326 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react"
 import Link from "next/link";
-import { useRouter } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import type React from "react"
 
 import { LayoutDashboard, Users, CalendarClock, Settings, FileCode, List, User, LogOut } from "lucide-react"
@@ -73,11 +73,31 @@ const menuGroupB: MenuItem[] = [
   },
 ]
 
+function isMasterMenuActive(pathname: string, href: string): boolean {
+  if (href === "/master") {
+    return pathname === "/master" || pathname === "/master/"
+  }
+  return pathname === href || pathname.startsWith(`${href}/`)
+}
+
 export function Sidebar({ activeItem, onItemClick }: SidebarProps) {
+  const pathname = usePathname()
   const router = useRouter()
   const [showLogoutModal, setShowLogoutModal] = useState(false)
   const [isLoggingOut, setIsLoggingOut] = useState(false)
 
+  const menuLinkClassName = (href: string) => {
+    const active = isMasterMenuActive(pathname, href)
+    return `flex items-center gap-3 px-5 py-2.5 rounded-xl border-l-[3px] transition-colors ${
+      active
+        ? "border-app-focus bg-app-sidebar-active font-medium text-app-accent-soft-foreground"
+        : "border-transparent text-muted-foreground hover:bg-app-accent-soft/60 hover:text-foreground"
+    }`
+  }
+
+  const menuLabelClassName = (href: string) =>
+    isMasterMenuActive(pathname, href) ? "text-sm font-semibold" : "text-sm"
+
   const handleLogoutClick = () => {
     setShowLogoutModal(true)
   }
@@ -107,7 +127,7 @@ export function Sidebar({ activeItem, onItemClick }: SidebarProps) {
         width: "240px",
         minWidth: "240px",
         backgroundColor: "#FFFFFF",
-        borderRight: "1px solid #E5E5E5",
+        borderRight: "1px solid var(--app-border)",
         fontFamily: sidebarFontFamily,
       }}
     >
@@ -119,7 +139,7 @@ export function Sidebar({ activeItem, onItemClick }: SidebarProps) {
           style={{
             width: "40px",
             height: "40px",
-            backgroundColor: "#7C3AED",
+            backgroundColor: "var(--primary)",
           }}
         >
           <span style={{ ...textStyle, color: "#FFFFFF", fontWeight: 500 }}>AI</span>
@@ -140,10 +160,10 @@ export function Sidebar({ activeItem, onItemClick }: SidebarProps) {
             style={{
               width: "36px",
               height: "36px",
-              backgroundColor: "#F3E8FF",
+              backgroundColor: "var(--muted)",
             }}
           >
-            <User size={20} strokeWidth={1.5} style={{ color: "#7C3AED" }} />
+            <User size={20} strokeWidth={1.5} style={{ color: "var(--foreground)" }} />
           </div>
           {/* Profile Text */}
           <div className="flex flex-col">
@@ -169,14 +189,14 @@ export function Sidebar({ activeItem, onItemClick }: SidebarProps) {
           <Link
             key={item.label}
             href={item.href}
-            className="flex items-center gap-3 px-5 py-2.5 rounded-xl hover:bg-[#F5F5F5]"
+            className={menuLinkClassName(item.href)}
             onClick={() => onItemClick && onItemClick(item.label)}
           >
             <div className="flex h-5 w-5 items-center justify-center shrink-0">
               {item.icon}
             </div>
             
-            <span style={textStyle}>{item.label}</span>
+            <span className={menuLabelClassName(item.href)}>{item.label}</span>
           </Link>
         ))}
       </nav>
@@ -190,14 +210,14 @@ export function Sidebar({ activeItem, onItemClick }: SidebarProps) {
           <Link
             key={item.label}
             href={item.href}
-            className="flex items-center gap-3 px-5 py-2.5 rounded-xl hover:bg-[#F5F5F5]"
+            className={menuLinkClassName(item.href)}
             onClick={() => onItemClick && onItemClick(item.label)}
           >
             <div className="flex h-5 w-5 items-center justify-center shrink-0">
               {item.icon}
             </div>
 
-            <span style={textStyle}>{item.label}</span>
+            <span className={menuLabelClassName(item.href)}>{item.label}</span>
           </Link>
         ))}
       </nav>
@@ -224,7 +244,7 @@ export function Sidebar({ activeItem, onItemClick }: SidebarProps) {
             <Button
               onClick={handleConfirmLogout}
               disabled={isLoggingOut}
-              className="bg-[#3B82F6] hover:bg-[#2563EB] text-white disabled:opacity-50"
+              className="bg-primary hover:bg-primary/90 text-primary-foreground disabled:opacity-50"
             >
               {isLoggingOut ? "로그아웃 중..." : "로그아웃"}
             </Button>
@@ -247,8 +267,8 @@ function MenuItemButton({ item, isActive, onClick }: MenuItemButtonProps) {
       onClick={onClick}
       className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors duration-150"
       style={{
-        backgroundColor: isActive ? "#E0EDFF" : "transparent",
-        color: isActive ? "#3B82F6" : "#6B7280",
+        backgroundColor: isActive ? "var(--app-accent-muted)" : "transparent",
+        color: isActive ? "var(--foreground)" : "var(--muted-foreground)",
         fontFamily: sidebarFontFamily,
         fontWeight: isActive ? 500 : 400,
         fontSize: "14px",
@@ -257,18 +277,18 @@ function MenuItemButton({ item, isActive, onClick }: MenuItemButtonProps) {
       }}
       onMouseEnter={(e) => {
         if (!isActive) {
-          e.currentTarget.style.backgroundColor = "#F0F7FF"
-          e.currentTarget.style.color = "#1A1A1A"
+          e.currentTarget.style.backgroundColor = "var(--muted)"
+          e.currentTarget.style.color = "var(--foreground)"
         }
       }}
       onMouseLeave={(e) => {
         if (!isActive) {
           e.currentTarget.style.backgroundColor = "transparent"
-          e.currentTarget.style.color = "#6B7280"
+          e.currentTarget.style.color = "var(--muted-foreground)"
         }
       }}
     >
-      <span className="shrink-0" style={{ color: isActive ? "#3B82F6" : "#6B7280" }}>
+      <span className="shrink-0" style={{ color: isActive ? "var(--foreground)" : "var(--muted-foreground)" }}>
         {item.icon}
       </span>
       <span>{item.label}</span>
diff --git a/components/test-session-details-content.tsx b/components/test-session-details-content.tsx
index 5d0e9de..b8a780b 100644
--- a/components/test-session-details-content.tsx
+++ b/components/test-session-details-content.tsx
@@ -152,53 +152,117 @@ export default function TestSessionDetailsContent({ examId, onBack }: TestSessio
 
   const getStatusBadge = (label: string) => {
     if (label === "진행 중") {
-      return <Badge className="bg-green-100 text-green-700 hover:bg-green-100">진행 중</Badge>
+      return (
+        <Badge className="border border-emerald-200 bg-emerald-50 font-semibold text-emerald-700 hover:bg-emerald-50">
+          진행 중
+        </Badge>
+      )
     }
     if (label === "대기 중") {
-      return <Badge className="bg-yellow-100 text-yellow-700 hover:bg-yellow-100">대기 중</Badge>
+      return (
+        <Badge className="border border-app-ring/40 bg-app-accent-soft font-medium text-app-accent-soft-foreground hover:bg-app-accent-soft">
+          대기 중
+        </Badge>
+      )
     }
     if (label === "완료") {
-      return <Badge className="bg-gray-100 text-gray-700 hover:bg-gray-100">완료</Badge>
+      return (
+        <Badge className="border border-app-border bg-muted font-medium text-muted-foreground hover:bg-muted">
+          완료
+        </Badge>
+      )
     }
-    return <Badge className="bg-gray-100 text-gray-700 hover:bg-gray-100">{label}</Badge>
+    return (
+      <Badge className="border border-app-border bg-muted font-medium text-muted-foreground hover:bg-muted">
+        {label}
+      </Badge>
+    )
   }
 
   const getExamStatusBadge = (status: string) => {
     if (status === "종료됨") {
-      return <Badge className="bg-gray-100 text-gray-700 hover:bg-gray-100">종료됨</Badge>
+      return (
+        <Badge className="border border-app-border bg-muted font-medium text-muted-foreground hover:bg-muted">
+          종료됨
+        </Badge>
+      )
     }
     if (status === "응시 완료") {
-      return <Badge className="bg-green-100 text-green-700 hover:bg-green-100">응시 완료</Badge>
+      return (
+        <Badge className="border border-app-ring/40 bg-app-accent-soft font-medium text-app-accent-soft-foreground hover:bg-app-accent-soft">
+          응시 완료
+        </Badge>
+      )
     }
     if (status === "응시 중") {
-      return <Badge className="bg-blue-100 text-blue-700 hover:bg-blue-100">응시 중</Badge>
+      return (
+        <Badge className="border border-emerald-200 bg-emerald-50 font-semibold text-emerald-700 hover:bg-emerald-50">
+          응시 중
+        </Badge>
+      )
     }
     if (status === "대기 중") {
-      return <Badge className="bg-yellow-100 text-yellow-700 hover:bg-yellow-100">대기 중</Badge>
+      return (
+        <Badge className="border border-app-ring/40 bg-app-accent-soft font-medium text-app-accent-soft-foreground hover:bg-app-accent-soft">
+          대기 중
+        </Badge>
+      )
     }
-    return <Badge className="bg-gray-100 text-gray-700 hover:bg-gray-100">{status}</Badge>
+    return (
+      <Badge className="border border-app-border bg-muted font-medium text-muted-foreground hover:bg-muted">
+        {status}
+      </Badge>
+    )
   }
 
   const getSubmissionBadge = (label: string) => {
     if (label === "시작 안 함") {
-      return <Badge className="bg-gray-100 text-gray-700 hover:bg-gray-100">시작 안 함</Badge>
+      return (
+        <Badge className="border border-app-border bg-muted font-medium text-muted-foreground hover:bg-muted">
+          시작 안 함
+        </Badge>
+      )
     }
     if (label === "진행 중") {
-      return <Badge className="bg-yellow-100 text-yellow-700 hover:bg-yellow-100">진행 중</Badge>
+      return (
+        <Badge className="border border-amber-200 bg-amber-50 font-medium text-amber-700 hover:bg-amber-50">
+          진행 중
+        </Badge>
+      )
     }
     if (label === "제출 실패") {
-      return <Badge className="bg-red-100 text-red-700 hover:bg-red-100">제출 실패</Badge>
+      return (
+        <Badge className="border border-red-200 bg-red-50 font-medium text-red-700 hover:bg-red-50">
+          제출 실패
+        </Badge>
+      )
     }
     if (label.startsWith("채점 완료")) {
-      return <Badge className="bg-green-100 text-green-700 hover:bg-green-100">{label}</Badge>
+      return (
+        <Badge className="border border-emerald-200 bg-emerald-50 font-medium text-emerald-800 hover:bg-emerald-50">
+          {label}
+        </Badge>
+      )
     }
     if (label === "제출·채점 중") {
-      return <Badge className="bg-amber-100 text-amber-800 hover:bg-amber-100">{label}</Badge>
+      return (
+        <Badge className="border border-amber-200 bg-amber-50 font-medium text-amber-700 hover:bg-amber-50">
+          {label}
+        </Badge>
+      )
     }
     if (label === "제출됨") {
-      return <Badge className="bg-blue-100 text-blue-700 hover:bg-blue-100">제출됨</Badge>
+      return (
+        <Badge className="border border-app-border bg-muted font-medium text-muted-foreground hover:bg-muted">
+          제출됨
+        </Badge>
+      )
     }
-    return <Badge className="bg-gray-100 text-gray-700 hover:bg-gray-100">{label}</Badge>
+    return (
+      <Badge className="border border-app-border bg-muted font-medium text-muted-foreground hover:bg-muted">
+        {label}
+      </Badge>
+    )
   }
 
   const getPageNumbers = () => {
@@ -397,8 +461,8 @@ export default function TestSessionDetailsContent({ examId, onBack }: TestSessio
                               onClick={() => setCurrentPage(page)}
                               className={`h-8 w-8 p-0 ${
                                 currentPage === page
-                                  ? "bg-blue-600 text-white hover:bg-blue-700"
-                                  : "text-gray-600 hover:bg-gray-100"
+                                  ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                                  : "text-muted-foreground hover:bg-muted"
                               }`}
                             >
                               {page}
diff --git a/components/test-sessions-content.tsx b/components/test-sessions-content.tsx
index a9315b7..2e94c4a 100644
--- a/components/test-sessions-content.tsx
+++ b/components/test-sessions-content.tsx
@@ -26,14 +26,42 @@ import {
   type TestSessionListItem,
 } from "@/lib/master-test-sessions"
 
+function getMasterSessionStatusBadgeClassName(displayLabel: string, filterStatus?: string): string {
+  if (filterStatus === "Cancelled") {
+    return "border border-red-200 bg-red-50 text-red-700 hover:bg-red-50"
+  }
+  if (displayLabel === "진행 중") {
+    return "border border-emerald-200 bg-emerald-50 font-semibold text-emerald-700 hover:bg-emerald-50"
+  }
+  if (displayLabel === "대기 중") {
+    return "border border-app-ring/40 bg-app-accent-soft font-medium text-app-accent-soft-foreground hover:bg-app-accent-soft"
+  }
+  if (displayLabel === "완료" || displayLabel === "종료" || displayLabel === "종료됨") {
+    return "border border-app-border bg-muted font-medium text-muted-foreground hover:bg-muted"
+  }
+  return "border border-app-border bg-muted font-medium text-muted-foreground hover:bg-muted"
+}
+
 function submissionBadgeClassName(label: string): string {
-  if (label === "시작 안 함") return "bg-gray-100 text-gray-700 hover:bg-gray-100"
-  if (label === "진행 중") return "bg-yellow-100 text-yellow-700 hover:bg-yellow-100"
-  if (label === "제출 실패") return "bg-red-100 text-red-700 hover:bg-red-100"
-  if (label.startsWith("채점 완료")) return "bg-green-100 text-green-700 hover:bg-green-100"
-  if (label === "제출·채점 중") return "bg-amber-100 text-amber-800 hover:bg-amber-100"
-  if (label === "제출됨") return "bg-blue-100 text-blue-700 hover:bg-blue-100"
-  return "bg-gray-100 text-gray-700 hover:bg-gray-100"
+  if (label === "시작 안 함") {
+    return "border border-app-border bg-muted text-muted-foreground hover:bg-muted"
+  }
+  if (label === "진행 중") {
+    return "border border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-50"
+  }
+  if (label === "제출 실패") {
+    return "border border-red-200 bg-red-50 text-red-700 hover:bg-red-50"
+  }
+  if (label.startsWith("채점 완료")) {
+    return "border border-emerald-200 bg-emerald-50 text-emerald-800 hover:bg-emerald-50"
+  }
+  if (label === "제출·채점 중") {
+    return "border border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-50"
+  }
+  if (label === "제출됨") {
+    return "border border-app-border bg-muted text-muted-foreground hover:bg-muted"
+  }
+  return "border border-app-border bg-muted text-muted-foreground hover:bg-muted"
 }
 
 /** statusLabel 우선, 없으면 Active/Completed 매핑, 그 외 status 원문 */
@@ -176,9 +204,17 @@ export function TestSessionsContent({ onViewDetails }: TestSessionsContentProps)
 
   const getStatusBadge = (status: string) => {
     if (status === "Active") {
-      return <Badge className="bg-green-100 text-green-700 hover:bg-green-100">진행 중</Badge>
+      return (
+        <Badge className="border border-emerald-200 bg-emerald-50 font-semibold text-emerald-700 hover:bg-emerald-50">
+          진행 중
+        </Badge>
+      )
     }
-    return <Badge className="bg-gray-100 text-gray-700 hover:bg-gray-100">완료</Badge>
+    return (
+      <Badge className="border border-app-border bg-muted font-medium text-muted-foreground hover:bg-muted">
+        완료
+      </Badge>
+    )
   }
 
   const getPageNumbers = () => {
@@ -344,13 +380,10 @@ export function TestSessionsContent({ onViewDetails }: TestSessionsContentProps)
                     <TableCell className="text-center" style={{ width: "120px" }}>
                       <Badge
                         variant="secondary"
-                        className={
-                          session.status === "Active"
-                            ? "bg-green-100 text-green-700 hover:bg-green-100"
-                            : session.status === "Cancelled"
-                              ? "bg-red-100 text-red-700 hover:bg-red-100"
-                              : "bg-gray-100 text-gray-700 hover:bg-gray-100"
-                        }
+                        className={getMasterSessionStatusBadgeClassName(
+                          formatSessionStatusDisplay(session),
+                          session.status,
+                        )}
                         style={{
                           fontSize: "12px",
                           fontWeight: 500,
@@ -428,7 +461,7 @@ export function TestSessionsContent({ onViewDetails }: TestSessionsContentProps)
                   size="sm"
                   className={
                     currentPage === page
-                      ? "h-8 min-w-8 bg-blue-600 hover:bg-blue-700 text-white"
+                      ? "h-8 min-w-8 bg-primary hover:bg-primary/90 text-primary-foreground"
                       : "h-8 min-w-8 text-[#6B7280] hover:text-[#1A1A1A]"
                   }
                   style={{ fontSize: "14px", fontWeight: 500 }}
@@ -575,9 +608,12 @@ export function TestSessionsContent({ onViewDetails }: TestSessionsContentProps)
                   <Badge
                     variant="secondary"
                     className={
-                      detailsSession?.status === "Active"
-                        ? "bg-green-100 text-green-700 hover:bg-green-100"
-                        : "bg-gray-100 text-gray-700 hover:bg-gray-100"
+                      detailsSession
+                        ? getMasterSessionStatusBadgeClassName(
+                            formatSessionStatusDisplay(detailsSession),
+                            detailsSession.status,
+                          )
+                        : "border border-app-border bg-muted font-medium text-muted-foreground"
                     }
                     style={{ fontSize: "12px", fontWeight: 500 }}
                   >
@@ -674,8 +710,8 @@ export function TestSessionsContent({ onViewDetails }: TestSessionsContentProps)
                             variant="secondary"
                             className={
                               participant.connectionStatus === "Connected"
-                                ? "bg-green-100 text-green-700 hover:bg-green-100"
-                                : "bg-red-100 text-red-700 hover:bg-red-100"
+                                ? "border border-emerald-200 bg-emerald-50 font-semibold text-emerald-700 hover:bg-emerald-50"
+                                : "border border-red-200 bg-red-50 text-red-700 hover:bg-red-50"
                             }
                             style={{ fontSize: "12px", fontWeight: 500 }}
                           >
@@ -698,7 +734,7 @@ export function TestSessionsContent({ onViewDetails }: TestSessionsContentProps)
                           <Button
                             variant="ghost"
                             size="sm"
-                            className="h-8 text-blue-600 hover:text-blue-700 hover:bg-blue-50 px-2"
+                            className="h-8 text-foreground hover:text-foreground/80 hover:bg-muted px-2"
                             style={{ fontSize: "13px", fontWeight: 500 }}
                           >
                             상세 보기
@@ -732,7 +768,7 @@ export function TestSessionsContent({ onViewDetails }: TestSessionsContentProps)
                         size="sm"
                         className={
                           participantPage === page
-                            ? "h-8 min-w-8 bg-blue-600 hover:bg-blue-700 text-white"
+                            ? "h-8 min-w-8 bg-primary hover:bg-primary/90 text-primary-foreground"
                             : "h-8 min-w-8 text-[#6B7280] hover:text-[#1A1A1A]"
                         }
                         style={{ fontSize: "14px", fontWeight: 500 }}
diff --git a/components/user-test-screen.tsx b/components/user-test-screen.tsx
index 538cdee..e3fa063 100644
--- a/components/user-test-screen.tsx
+++ b/components/user-test-screen.tsx
@@ -43,7 +43,7 @@ const SCORING_STATUS_LABEL: Record<SubmissionStatus, string> = {
 
 const SCORING_STATUS_COLOR: Record<SubmissionStatus, string> = {
   PENDING:               "text-[#6B7280]",
-  JUDGING:               "text-[#2563EB]",
+  JUDGING:               "text-foreground",
   ACCEPTED:              "text-[#059669]",
   WRONG_ANSWER:          "text-[#DC2626]",
   TIME_LIMIT_EXCEEDED:   "text-[#D97706]",
@@ -246,16 +246,16 @@ export default function UserTestScreen() {
   };
 
   return (
-    <div className="min-h-screen bg-[#F5F5F5]">
+    <div className="min-h-screen bg-app-surface">
       {/* Top Header Bar */}
-      <header className="sticky top-0 z-50 bg-white border-b border-[#D0D0D0]">
+      <header className="sticky top-0 z-50 bg-white border-b border-app-border">
         <div className="flex items-center justify-between px-6 py-4">
           {/* Left - Logo */}
           <span className="font-semibold text-[#1F2937] pl-2">Vibe Coding Evaluator</span>
 
           {/* Center - Remaining Time */}
           <div className="absolute left-1/2 -translate-x-1/2 flex items-center gap-2">
-            <Clock className="w-5 h-5 text-[#2563EB]" />
+            <Clock className="w-5 h-5 text-app-focus" />
             <span className="text-lg font-medium text-[#1F2937]">남은 시간:</span>
             {examStateData?.endsAt ? (
               <RemainingTimer
@@ -263,20 +263,20 @@ export default function UserTestScreen() {
                 onTimeOver={handleTimeExpired}
               />
             ) : (
-              <span className="font-mono text-xl text-[#2563EB] font-bold">00:00:00</span>
+              <span className="font-mono text-xl text-app-focus font-bold">00:00:00</span>
             )}
           </div>
 
           {/* Right - Token and Submit */}
           <div className="flex items-center gap-6">
-            <div className="flex items-center gap-2 text-[#4B5563]">
-              <Coins className="w-4 h-4" />
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Coins className="w-4 h-4 text-app-accent-soft-foreground" />
               <span className="text-sm font-medium">토큰:</span>
-              <span className="font-mono text-[#1F2937] font-semibold">{usedTokens.toLocaleString()} / {maxTokens.toLocaleString()}</span>
+              <span className="font-mono text-app-accent-soft-foreground font-semibold">{usedTokens.toLocaleString()} / {maxTokens.toLocaleString()}</span>
             </div>
             {!isExamEnded && (
               <Button
-                className="bg-[#2563EB] hover:bg-[#1D4ED8] text-white px-6"
+                className="bg-primary hover:bg-primary/90 text-primary-foreground px-6"
                 onClick={() => setIsSubmitModalOpen(true)}
                 disabled={isExamEnded}
               >
@@ -358,13 +358,13 @@ export default function UserTestScreen() {
             <div className="flex gap-4 justify-center">
               <Button
                 variant="outline"
-                className="px-8 border-[#D0D0D0] text-[#4B5563] hover:bg-[#F5F5F5] bg-transparent"
+                className="px-8 border-app-border text-muted-foreground hover:bg-muted bg-transparent"
                 onClick={() => setIsSubmitModalOpen(false)}
               >
                 아니요
               </Button>
               <Button
-                className="px-8 bg-[#2563EB] hover:bg-[#1D4ED8] text-white"
+                className="px-8 bg-primary hover:bg-primary/90 text-primary-foreground"
                 disabled={isModalSubmitting}
                 onClick={async () => {
                   setIsModalSubmitting(true)
diff --git a/components/users-content.tsx b/components/users-content.tsx
index 47732ee..b8719ec 100644
--- a/components/users-content.tsx
+++ b/components/users-content.tsx
@@ -47,10 +47,10 @@ function mapBoardEntry(entry: ExamineeBoardEntry, exam: Exam): Participant {
 
 function ConnectionBadge({ status }: { status: AdminUsersConnectionStatus }) {
   const styles: Record<AdminUsersConnectionStatus, string> = {
-    "응시완료": "border-[#16A34A] bg-[#DCFCE7] text-[#16A34A]",
-    "응시중": "border-[#3B82F6] bg-white text-[#3B82F6]",
-    "대기중": "border-[#6B7280] bg-white text-[#6B7280]",
-    "종료됨": "border-[#9CA3AF] bg-[#F3F4F6] text-[#6B7280]",
+    "응시중": "border-emerald-200 bg-emerald-50 text-emerald-700 font-semibold",
+    "응시완료": "border-app-ring/40 bg-app-accent-soft text-app-accent-soft-foreground",
+    "대기중": "border-app-ring/40 bg-app-accent-soft text-app-accent-soft-foreground",
+    "종료됨": "border-app-border bg-muted text-muted-foreground",
   }
   return (
     <span className={`rounded-full border px-2.5 py-0.5 text-xs font-medium ${styles[status]}`}>
@@ -61,12 +61,16 @@ function ConnectionBadge({ status }: { status: AdminUsersConnectionStatus }) {
 
 function SubmissionBadge({ status }: { status: AdminUsersSubmissionStatus }) {
   const styles: Record<AdminUsersSubmissionStatus, string> = {
-    "미제출": "bg-[#F3F4F6] text-[#6B7280]",
-    "채점중": "bg-[#FEF3C7] text-[#D97706]",
-    "채점완료": "bg-[#DCFCE7] text-[#16A34A]",
+    "미제출": "bg-muted text-muted-foreground",
+    "채점중": "bg-amber-50 text-amber-700 border border-amber-200",
+    "채점완료": "border border-emerald-200 bg-emerald-50 text-emerald-800",
   }
 
-  return <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${styles[status]}`}>{status}</span>
+  return (
+    <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${styles[status]}`}>
+      {status}
+    </span>
+  )
 }
 
 /** 참가자 목록 그리드: 좌측(이름·시험) / 중앙(전화·상태) / 우측(토큰) */
@@ -211,7 +215,7 @@ export function UsersContent() {
               value={selectedExamId}
               onChange={(e) => setSelectedExamId(e.target.value)}
               disabled={isLoadingExams}
-              className="appearance-none rounded-lg border border-[#E5E5E5] bg-white py-2 pl-4 pr-10 text-sm text-[#1A1A1A] outline-none transition-colors focus:border-[#3B82F6] focus:ring-1 focus:ring-[#3B82F6] disabled:opacity-50"
+              className="appearance-none rounded-lg border border-app-border bg-white py-2 pl-4 pr-10 text-sm text-foreground outline-none transition-colors focus:border-ring focus:ring-1 focus:ring-ring disabled:opacity-50"
             >
               <option value="all">모든 세션</option>
               {exams.map((exam) => (
@@ -233,7 +237,7 @@ export function UsersContent() {
               placeholder="이름 또는 시험으로 검색…"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full rounded-lg border border-[#E5E5E5] bg-white py-2 pl-10 pr-4 text-sm text-[#1A1A1A] placeholder-[#9CA3AF] outline-none transition-colors focus:border-[#3B82F6] focus:ring-1 focus:ring-[#3B82F6]"
+              className="w-full rounded-lg border border-app-border bg-white py-2 pl-10 pr-4 text-sm text-foreground placeholder-muted-foreground outline-none transition-colors focus:border-ring focus:ring-1 focus:ring-ring"
             />
           </div>
         </div>
@@ -339,7 +343,7 @@ export function UsersContent() {
                 type="button"
                 onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                 disabled={currentPage === 1}
-                className="flex h-8 items-center gap-1 rounded-md border border-[#E5E7EB] bg-white px-2 text-sm text-[#6B7280] transition-colors hover:bg-[#E0EDFF] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
+                className="flex h-8 items-center gap-1 rounded-md border border-app-border bg-white px-2 text-sm text-muted-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
               >
                 <ChevronLeft className="h-4 w-4" />
                 이전
@@ -352,8 +356,8 @@ export function UsersContent() {
                   onClick={() => setCurrentPage(page)}
                   className={`flex h-8 w-8 items-center justify-center rounded-md border text-sm transition-colors ${
                     page === currentPage
-                      ? "border-[#3B82F6] bg-[#3B82F6] text-white"
-                      : "border-[#E5E7EB] bg-white text-[#6B7280] hover:bg-[#E0EDFF]"
+                      ? "border-primary bg-primary text-primary-foreground"
+                      : "border-app-border bg-white text-muted-foreground hover:bg-muted"
                   }`}
                 >
                   {page}
@@ -364,7 +368,7 @@ export function UsersContent() {
                 type="button"
                 onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                 disabled={currentPage === totalPages || totalPages === 0}
-                className="flex h-8 items-center gap-1 rounded-md border border-[#E5E7EB] bg-white px-2 text-sm text-[#6B7280] transition-colors hover:bg-[#E0EDFF] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
+                className="flex h-8 items-center gap-1 rounded-md border border-app-border bg-white px-2 text-sm text-muted-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white"
               >
                 다음
                 <ChevronRight className="h-4 w-4" />
diff --git a/lib/master-activity-logs.ts b/lib/master-activity-logs.ts
index ba0cc12..5457828 100644
--- a/lib/master-activity-logs.ts
+++ b/lib/master-activity-logs.ts
@@ -23,10 +23,10 @@ export const masterActivityLogStatusColors: Record<
   MasterActivityLogStatusLabel,
   { bg: string; text: string; marker: string }
 > = {
-  "가입 번호 발급": { bg: "#EBF0FA", text: "#4A74E0", marker: "#4A74E0" },
+  "가입 번호 발급": { bg: "#E9EEF3", text: "#5C6B7E", marker: "#5C6B7E" },
   "비활성화": { bg: "#FBEAEC", text: "#D6455D", marker: "#D6455D" },
   "재활성화": { bg: "#E8F5EF", text: "#4AA785", marker: "#4AA785" },
-  "관리자 가입 완료": { bg: "#F0EBFA", text: "#7A5AF8", marker: "#7A5AF8" },
+  "관리자 가입 완료": { bg: "#ECFDF3", text: "#2F6F4E", marker: "#2F6F4E" },
   "계정 삭제": { bg: "#FEF2F2", text: "#DC2626", marker: "#DC2626" },
   "비밀번호 재설정": { bg: "#FFF7ED", text: "#EA580C", marker: "#EA580C" },
   "전역 설정 변경": { bg: "#F3F4F6", text: "#6B7280", marker: "#6B7280" },