유틸리티 카드 테마 토큰화 + 호버/그림자 조정

- 카드/아이콘 박스/구분선에 semantic 토큰 적용
- 호버: emerald 색상 변화 대신 scale-[1.02]
- 카드 그림자 추가로 라이트 배경과 구분

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/index.css

@@ -30,6 +30,25 @@
   --toggle-thumb-from: #e5e7eb;
   --toggle-thumb-to: #9ca3af;
   --toggle-thumb-icon: #0f172a;
+
+  --card-bg-from: rgba(17, 24, 39, 0.8);
+  --card-bg-to: rgba(17, 24, 39, 0.4);
+  --card-border: rgba(255, 255, 255, 0.05);
+  --card-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+
+  --icon-box-from: #1f2937;
+  --icon-box-to: #111827;
+  --icon-box-border: rgba(255, 255, 255, 0.05);
+
+  --divider-line: rgba(255, 255, 255, 0.1);
+  --skeleton-bg: rgba(255, 255, 255, 0.02);
+
+  --empty-bg: rgba(17, 24, 39, 0.4);
+  --empty-border: rgba(255, 255, 255, 0.05);
+
+  --accent: #10b981;
+  --accent-hover-text: #6ee7b7;
+  --accent-glow: rgba(16, 185, 129, 0.1);
 }
 
 /* 테마 토큰 - light */
@@ -56,6 +75,25 @@
   --toggle-thumb-from: #fde68a;
   --toggle-thumb-to: #f59e0b;
   --toggle-thumb-icon: #78350f;
+
+  --card-bg-from: #ffffff;
+  --card-bg-to: #ffffff;
+  --card-border: rgba(0, 0, 0, 0.06);
+  --card-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
+
+  --icon-box-from: #f3f4f6;
+  --icon-box-to: #e5e7eb;
+  --icon-box-border: rgba(0, 0, 0, 0.06);
+
+  --divider-line: rgba(0, 0, 0, 0.1);
+  --skeleton-bg: rgba(0, 0, 0, 0.05);
+
+  --empty-bg: rgba(249, 250, 251, 0.9);
+  --empty-border: rgba(0, 0, 0, 0.06);
+
+  --accent: #059669;
+  --accent-hover-text: #047857;
+  --accent-glow: rgba(16, 185, 129, 0.12);
 }
 
 html, body, #root {

frontend/src/pages/Home.jsx

@@ -13,9 +13,20 @@ export default function Home() {
     <div className="space-y-10 max-w-5xl mx-auto pt-6">
       {/* 구분선 */}
       <div className="flex items-center gap-4">
-        <div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+        <div
-        <span className="text-xs text-gray-500 uppercase tracking-widest">Utilities</span>
+          className="h-px flex-1 transition-colors duration-300"
-        <div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+          style={{ backgroundImage: 'linear-gradient(to right, transparent, var(--divider-line), transparent)' }}
+        />
+        <span
+          className="text-xs uppercase tracking-widest transition-colors duration-300"
+          style={{ color: 'var(--text-dim)' }}
+        >
+          Utilities
+        </span>
+        <div
+          className="h-px flex-1 transition-colors duration-300"
+          style={{ backgroundImage: 'linear-gradient(to right, transparent, var(--divider-line), transparent)' }}
+        />
       </div>
 
       {/* 메뉴 그리드 */}
@@ -23,13 +34,25 @@ export default function Home() {
         {loading ? (
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className="h-32 rounded-2xl bg-white/[0.02] animate-pulse" />
+              <div
+                key={i}
+                className="h-32 rounded-2xl animate-pulse transition-colors duration-300"
+                style={{ background: 'var(--skeleton-bg)' }}
+              />
             ))}
           </div>
         ) : menus.length === 0 ? (
-          <div className="rounded-2xl border border-white/5 bg-gray-900/40 p-16 text-center">
+          <div
+            className="rounded-2xl border p-16 text-center transition-colors duration-300"
+            style={{ background: 'var(--empty-bg)', borderColor: 'var(--empty-border)' }}
+          >
             <div className="text-5xl mb-4 opacity-50">🍁</div>
-            <p className="text-gray-400">아직 등록된 기능이 없습니다</p>
+            <p
+              className="transition-colors duration-300"
+              style={{ color: 'var(--text-muted)' }}
+            >
+              아직 등록된 기능이 없습니다
+            </p>
           </div>
         ) : (
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -37,16 +60,27 @@ export default function Home() {
               <Link
                 key={menu.id}
                 to={menu.url}
-                className="group relative overflow-hidden rounded-2xl border border-white/5 bg-gradient-to-br from-gray-900/80 to-gray-900/40 p-6 hover:border-emerald-500/30 transition-all duration-300"
+                className="relative rounded-2xl border p-6 transition-transform duration-300 hover:scale-[1.02] border-[var(--card-border)]"
+                style={{
+                  backgroundImage: 'linear-gradient(to bottom right, var(--card-bg-from), var(--card-bg-to))',
+                  boxShadow: 'var(--card-shadow)',
+                }}
               >
-                <div className="absolute -top-16 -right-16 w-40 h-40 rounded-full bg-emerald-500/0 group-hover:bg-emerald-500/10 blur-3xl transition-all duration-500" />
+                <div className="space-y-3">
-                <div className="relative space-y-3">
+                  <div
-                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-gray-800 to-gray-900 border border-white/5 flex items-center justify-center overflow-hidden group-hover:scale-110 group-hover:border-emerald-500/30 transition-all duration-300">
+                    className="w-12 h-12 rounded-xl border flex items-center justify-center overflow-hidden border-[var(--icon-box-border)]"
+                    style={{ backgroundImage: 'linear-gradient(to bottom right, var(--icon-box-from), var(--icon-box-to))' }}
+                  >
                     <img src={menu.image?.url || '/default.png'} alt={menu.title} className="w-9 h-9 object-contain" />
                   </div>
                   <div>
-                    <h2 className="font-semibold group-hover:text-emerald-300 transition">{menu.title}</h2>
+                    <h2 className="font-medium">{menu.title}</h2>
-                    <p className="text-sm text-gray-400 mt-1 leading-relaxed">{menu.description}</p>
+                    <p
+                      className="text-sm mt-1 leading-relaxed transition-colors duration-300"
+                      style={{ color: 'var(--text-muted)' }}
+                    >
+                      {menu.description}
+                    </p>
                   </div>
                 </div>
               </Link>
@@ -57,9 +91,20 @@ export default function Home() {
 
       {/* 구분선 */}
       <div className="flex items-center gap-4">
-        <div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+        <div
-        <span className="text-xs text-gray-500 uppercase tracking-widest">Notices</span>
+          className="h-px flex-1 transition-colors duration-300"
-        <div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+          style={{ backgroundImage: 'linear-gradient(to right, transparent, var(--divider-line), transparent)' }}
+        />
+        <span
+          className="text-xs uppercase tracking-widest transition-colors duration-300"
+          style={{ color: 'var(--text-dim)' }}
+        >
+          Notices
+        </span>
+        <div
+          className="h-px flex-1 transition-colors duration-300"
+          style={{ backgroundImage: 'linear-gradient(to right, transparent, var(--divider-line), transparent)' }}
+        />
       </div>
 
       {/* 메이플 공지 */}