diff --git a/frontend/src/components/ConfirmDialog.jsx b/frontend/src/components/ConfirmDialog.jsx
index d7d2e02..5eaf405 100644
--- a/frontend/src/components/ConfirmDialog.jsx
+++ b/frontend/src/components/ConfirmDialog.jsx
@@ -12,8 +12,18 @@ export default function ConfirmDialog({
   loading = false,
 }) {
   const accent = destructive
-    ? { ring: 'ring-red-500/20', icon: 'text-red-300', iconBg: 'bg-red-500/10 border-red-500/30' }
-    : { ring: 'ring-emerald-500/20', icon: 'text-emerald-300', iconBg: 'bg-emerald-500/10 border-emerald-500/30' }
+    ? {
+        ringColor: 'var(--ring-danger)',
+        iconColor: 'var(--danger-text)',
+        iconBg: 'var(--icon-danger-bg)',
+        iconBorder: 'var(--icon-danger-border)',
+      }
+    : {
+        ringColor: 'var(--ring-info)',
+        iconColor: 'var(--accent-bright)',
+        iconBg: 'var(--icon-info-bg)',
+        iconBorder: 'var(--icon-info-border)',
+      }
 
   return (
     <AnimatePresence>
@@ -24,7 +34,8 @@ export default function ConfirmDialog({
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           transition={{ duration: 0.18 }}
-          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-md"
+          className="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md"
+          style={{ background: 'var(--dialog-backdrop)' }}
           onClick={onClose}
         >
           <motion.div
@@ -33,48 +44,82 @@ export default function ConfirmDialog({
             animate={{ opacity: 1, scale: 1, y: 0 }}
             exit={{ opacity: 0, scale: 0.96, y: 4 }}
             transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
-            className={`w-full max-w-md rounded-2xl bg-gradient-to-b from-gray-900 to-gray-950 border border-white/10 shadow-2xl ring-1 ${accent.ring}`}
+            className="w-full max-w-md rounded-2xl border shadow-2xl ring-1"
+            style={{
+              backgroundImage: 'linear-gradient(to bottom, var(--dialog-bg-from), var(--dialog-bg-to))',
+              borderColor: 'var(--dialog-border)',
+              '--tw-ring-color': accent.ringColor,
+            }}
             onClick={(e) => e.stopPropagation()}
           >
             <div className="px-7 pt-7 pb-3 flex items-start gap-4">
-              <div className={`shrink-0 w-11 h-11 rounded-xl border flex items-center justify-center ${accent.iconBg}`}>
+              <div
+                className="shrink-0 w-11 h-11 rounded-xl border flex items-center justify-center"
+                style={{ background: accent.iconBg, borderColor: accent.iconBorder, color: accent.iconColor }}
+              >
                 {destructive ? (
-                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" className={accent.icon}>
+                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                     <path d="M12 9V13M12 17H12.01M10.29 3.86L1.82 18C1.64 18.31 1.55 18.67 1.55 19.03C1.55 19.4 1.65 19.76 1.83 20.07C2 20.39 2.26 20.65 2.57 20.83C2.88 21.01 3.24 21.1 3.6 21.1H20.47C20.83 21.1 21.19 21.01 21.5 20.83C21.81 20.65 22.07 20.39 22.24 20.07C22.42 19.76 22.52 19.4 22.52 19.03C22.52 18.67 22.43 18.31 22.25 18L13.78 3.86C13.6 3.56 13.35 3.31 13.04 3.14C12.74 2.96 12.4 2.87 12.06 2.87C11.72 2.87 11.38 2.96 11.08 3.14C10.77 3.31 10.52 3.56 10.34 3.86H10.29Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                   </svg>
                 ) : (
-                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" className={accent.icon}>
+                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                     <path d="M12 8V12M12 16H12.01M22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2C17.52 2 22 6.48 22 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                   </svg>
                 )}
               </div>
-              <h3 className="flex-1 text-xl font-bold text-white pt-1.5">{title}</h3>
+              <h3
+                className="flex-1 text-xl font-bold pt-1.5"
+                style={{ color: 'var(--text-strong)' }}
+              >
+                {title}
+              </h3>
               <button
                 onClick={onClose}
-                className="shrink-0 w-8 h-8 -mt-1 -mr-1 rounded-lg text-gray-500 hover:text-white hover:bg-white/5 transition flex items-center justify-center text-xl leading-none"
+                className="shrink-0 w-8 h-8 -mt-1 -mr-1 rounded-lg hover:bg-[var(--row-hover-bg)] flex items-center justify-center text-xl leading-none"
+                style={{ color: 'var(--text-dim)' }}
                 aria-label="닫기"
               >
                 ×
               </button>
             </div>
             <div className="px-7 pt-4 pb-7">
-              <p className="text-lg text-gray-300 leading-relaxed whitespace-pre-line">{description}</p>
+              <p
+                className="text-lg leading-relaxed whitespace-pre-line"
+                style={{ color: 'var(--text-muted)' }}
+              >
+                {description}
+              </p>
             </div>
-            <div className="flex gap-2 px-7 py-4 border-t border-white/5">
+            <div
+              className="flex gap-2 px-7 py-4 border-t"
+              style={{ borderColor: 'var(--panel-border)' }}
+            >
               <button
                 onClick={onClose}
-                className="flex-1 rounded-lg border border-white/10 bg-white/[0.02] hover:bg-white/[0.06] text-gray-200 px-4 h-11 text-sm font-medium transition"
+                className="flex-1 rounded-lg border px-4 h-11 text-sm font-medium hover:bg-[var(--btn-bg-hover)] hover:border-[var(--btn-border-hover)]"
+                style={{
+                  background: 'var(--btn-bg)',
+                  borderColor: 'var(--btn-border)',
+                  color: 'var(--text-emphasis)',
+                }}
               >
                 {cancelText}
               </button>
               <button
                 onClick={onConfirm}
                 disabled={loading}
-                className={`flex-1 rounded-lg px-4 h-11 text-sm font-semibold transition disabled:opacity-50 ${
-                  destructive
-                    ? 'bg-red-600 hover:bg-red-500 text-white shadow-lg shadow-red-500/20'
-                    : 'bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20'
-                }`}
+                className="flex-1 rounded-lg px-4 h-11 text-sm font-semibold disabled:opacity-50"
+                style={{
+                  background: destructive ? 'var(--btn-danger-bg)' : 'var(--btn-primary-bg)',
+                  color: destructive ? 'var(--btn-primary-text)' : 'var(--btn-primary-text)',
+                  boxShadow: destructive ? 'var(--btn-danger-shadow)' : 'var(--btn-primary-shadow)',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = destructive ? 'var(--btn-danger-bg-hover)' : 'var(--btn-primary-bg-hover)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = destructive ? 'var(--btn-danger-bg)' : 'var(--btn-primary-bg)'
+                }}
               >
                 {loading ? '처리 중...' : confirmText}
               </button>
diff --git a/frontend/src/features/boss-crystal/user/CharacterPanel.jsx b/frontend/src/features/boss-crystal/user/CharacterPanel.jsx
index 4c51432..621bf0e 100644
--- a/frontend/src/features/boss-crystal/user/CharacterPanel.jsx
+++ b/frontend/src/features/boss-crystal/user/CharacterPanel.jsx
@@ -332,7 +332,7 @@ export default function CharacterPanel({
               value={name}
               onChange={(e) => { setName(e.target.value); if (error) setError('') }}
               placeholder="캐릭터 닉네임 검색"
-              className="w-full rounded-lg border-2 pl-10 pr-3 py-2.5 text-sm outline-none transition focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]"
+              className="w-full rounded-lg border-2 pl-10 pr-3 py-2.5 text-sm outline-none focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]"
               style={{
                 background: 'var(--input-bg)',
                 borderColor: 'var(--input-border)',
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a25a6ce..f611b4b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -123,6 +123,23 @@
 
   --disabled-opacity: 0.3;
   --inactive-filter: brightness(0.4);
+
+  --dialog-bg-from: #111827;
+  --dialog-bg-to: #030712;
+  --dialog-border: rgba(255, 255, 255, 0.1);
+  --dialog-backdrop: rgba(0, 0, 0, 0.7);
+
+  --icon-danger-bg: rgba(239, 68, 68, 0.1);
+  --icon-danger-border: rgba(239, 68, 68, 0.3);
+  --icon-info-bg: rgba(16, 185, 129, 0.1);
+  --icon-info-border: rgba(16, 185, 129, 0.3);
+
+  --ring-danger: rgba(239, 68, 68, 0.2);
+  --ring-info: rgba(16, 185, 129, 0.2);
+
+  --btn-danger-bg: #dc2626;
+  --btn-danger-bg-hover: #ef4444;
+  --btn-danger-shadow: 0 4px 14px rgba(239, 68, 68, 0.2);
 }
 
 /* 테마 토큰 - light */
@@ -242,6 +259,23 @@
 
   --disabled-opacity: 0.5;
   --inactive-filter: opacity(0.25);
+
+  --dialog-bg-from: #ffffff;
+  --dialog-bg-to: #ffffff;
+  --dialog-border: rgba(0, 0, 0, 0.1);
+  --dialog-backdrop: rgba(15, 23, 42, 0.45);
+
+  --icon-danger-bg: rgba(220, 38, 38, 0.08);
+  --icon-danger-border: rgba(220, 38, 38, 0.3);
+  --icon-info-bg: rgba(16, 185, 129, 0.08);
+  --icon-info-border: rgba(5, 150, 105, 0.4);
+
+  --ring-danger: rgba(220, 38, 38, 0.15);
+  --ring-info: rgba(16, 185, 129, 0.18);
+
+  --btn-danger-bg: #dc2626;
+  --btn-danger-bg-hover: #b91c1c;
+  --btn-danger-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
 }
 
 html, body, #root {