푸터 조건 단순화 + 심볼 타입 배지 테마 대응

- 푸터를 홈 경로에서만 렌더링 (!fullscreen → isHome)
  이동 시 푸터가 잠깐 보였다 사라지는 플래시 제거
- 심볼 관리 타입 배지(아케인/어센틱/그랜드 어센틱) 테마별 토큰화
  라이트 모드에서 violet/sky/amber-300이 흰 배경에 안 보이던 문제 해결
- 계산기 페이지의 fullscreen 훅을 useLayoutEffect로 변경

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

backend/routes/character.js

@@ -1,5 +1,8 @@
 import { Router } from 'express';
 import axios from 'axios';
+import { Op } from 'sequelize';
+import { Image } from '../models/index.js';
+import { getPublicUrl } from '../lib/s3.js';
 
 const router = Router();
 const NEXON_API_BASE = 'https://open.api.nexon.com';
@@ -78,4 +81,68 @@ router.get('/symbols', async (req, res) => {
   }
 });
 
+// API 키로 캐릭터 목록 조회 (사용자 제공 키 사용)
+router.get('/list', async (req, res) => {
+  const key = req.header('x-user-api-key');
+  if (!key) return res.status(400).json({ error: 'API 키가 필요합니다' });
+
+  try {
+    const { data } = await axios.get(`${NEXON_API_BASE}/maplestory/v1/character/list`, {
+      headers: { 'x-nxopen-api-key': key },
+    });
+
+    // 계정별 캐릭터를 하나로 합치고 월드 필터링 (스페셜/리부트 제외)
+    const characters = [];
+    for (const acc of data.account_list || []) {
+      for (const c of acc.character_list || []) {
+        const world = c.world_name || '';
+        if (world.includes('스페셜') || world.includes('리부트')) continue;
+        characters.push({
+          ocid: c.ocid,
+          character_name: c.character_name,
+          world_name: world,
+          job_name: c.character_class_name || c.character_class,
+          character_level: c.character_level,
+        });
+      }
+    }
+
+    characters.sort((a, b) => (b.character_level || 0) - (a.character_level || 0));
+
+    // 월드 아이콘 매핑 ("월드 : 월드명", "월드:월드명" 등 공백 유연하게 매칭)
+    const worldNames = [...new Set(characters.map((c) => c.world_name).filter(Boolean))];
+    if (worldNames.length) {
+      const images = await Image.findAll({
+        where: {
+          [Op.or]: [
+            { name: { [Op.like]: '월드%' } },
+            ...worldNames.map((w) => ({ name: w })),
+          ],
+        },
+      });
+      const worldIconMap = {};
+      for (const img of images) {
+        const m = img.name.match(/^월드\s*:\s*(.+)$/);
+        const key = m ? m[1].trim() : img.name.trim();
+        worldIconMap[key] = getPublicUrl(img.path);
+      }
+      for (const c of characters) {
+        c.world_icon = worldIconMap[c.world_name] || null;
+      }
+    }
+
+    res.json({ characters });
+  } catch (err) {
+    const code = err.response?.data?.error?.name;
+    if (['OPENAPI00001', 'OPENAPI00007', 'OPENAPI00010', 'OPENAPI00011'].includes(code)) {
+      return res.status(503).json({ error: 'API 점검중입니다', code, maintenance: true });
+    }
+    if (err.response?.status === 401 || err.response?.status === 403 || code === 'OPENAPI00004') {
+      return res.status(401).json({ error: '유효하지 않은 API 키입니다' });
+    }
+    console.error('캐릭터 목록 조회 오류:', err.response?.data || err.message);
+    res.status(500).json({ error: '캐릭터 목록 조회 실패' });
+  }
+});
+
 export default router;

frontend/src/api/client.js

@@ -1,9 +1,11 @@
+import { useAuthStore } from '../stores/auth'
+
 export async function api(url, options = {}) {
   const headers = { 'Content-Type': 'application/json', ...options.headers }
 
-  // 관리자 API에는 인증 헤더 자동 추가
+  // 관리자 API에는 로그인 다이얼로그에서 저장한 키를 자동으로 헤더에 포함
   if (url.startsWith('/api/admin')) {
-    const adminKey = localStorage.getItem('maple-admin-key')
+    const adminKey = useAuthStore.getState().apiKey
     if (adminKey) headers['x-admin-key'] = adminKey
   }
 

frontend/src/components/CharacterSuggestDropdown.jsx

@@ -0,0 +1,109 @@
+import { useMemo } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { motion, AnimatePresence } from 'framer-motion'
+import { api } from '../api/client'
+import { useAuthStore } from '../stores/auth'
+
+/**
+ * 캐릭터 입력 input 아래 뜨는 드롭다운
+ * - 로그인된 API 키로 /api/character/list 조회
+ * - input value로 필터링
+ * - 항목 클릭 시 onSelect(characterName)
+ * - excludeNames: 이미 추가된 캐릭터는 목록에서 제외
+ */
+export default function CharacterSuggestDropdown({ open, filter = '', excludeNames = [], onSelect }) {
+  const apiKey = useAuthStore((s) => s.apiKey)
+
+  const { data = [], isLoading, error } = useQuery({
+    queryKey: ['user-character-list', apiKey],
+    queryFn: async () => {
+      const r = await api('/api/character/list', { headers: { 'x-user-api-key': apiKey } })
+      return r.characters || []
+    },
+    enabled: open && !!apiKey,
+    staleTime: 10 * 60 * 1000,
+    retry: false,
+  })
+
+  const filtered = useMemo(() => {
+    const exclude = new Set(excludeNames)
+    const q = filter.trim().toLowerCase()
+    return data
+      .filter((c) => !exclude.has(c.character_name))
+      .filter((c) => !q || c.character_name.toLowerCase().includes(q))
+      .slice()
+      .sort((a, b) => (b.character_level || 0) - (a.character_level || 0))
+      .slice(0, 50)
+  }, [data, filter, excludeNames])
+
+  return (
+    <AnimatePresence>
+      {open && apiKey && (
+      <motion.div
+        key="dropdown"
+        initial={{ opacity: 0, y: -4 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -4 }}
+        transition={{ duration: 0.15, ease: [0.22, 1, 0.36, 1] }}
+        className="absolute top-full left-0 right-0 mt-1 z-30 rounded-lg border max-h-64 overflow-y-auto"
+        style={{
+          background: 'var(--popup-bg)',
+          borderColor: 'var(--popup-border)',
+          boxShadow: 'var(--popup-shadow)',
+        }}
+      >
+        {isLoading ? (
+          <div className="p-4 text-center text-sm" style={{ color: 'var(--text-dim)' }}>불러오는 중...</div>
+        ) : error ? (
+          <div className="p-4 text-center text-sm" style={{ color: 'var(--danger-text)' }}>
+            {error.message || '조회 실패'}
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="p-4 text-center text-sm" style={{ color: 'var(--text-dim)' }}>
+            {data.length === 0 ? '캐릭터가 없습니다' : '일치하는 캐릭터가 없습니다'}
+          </div>
+        ) : (
+          <ul>
+            {filtered.map((c) => (
+              <li key={c.ocid}>
+                <button
+                  type="button"
+                  onMouseDown={(e) => { e.preventDefault(); onSelect(c.character_name) }}
+                  className="w-full text-left px-3 py-2.5 flex items-center gap-2 hover:bg-[var(--row-hover-bg)]"
+                >
+                  {c.world_icon ? (
+                    <img
+                      src={c.world_icon}
+                      alt={c.world_name}
+                      title={c.world_name}
+                      className="w-5 h-5 shrink-0 object-contain"
+                      style={{ imageRendering: 'pixelated' }}
+                    />
+                  ) : (
+                    <span
+                      className="w-5 h-5 shrink-0 rounded-full text-[10px] font-bold flex items-center justify-center"
+                      style={{
+                        background: 'var(--surface-nested)',
+                        color: 'var(--text-dim)',
+                      }}
+                      title={c.world_name}
+                    >
+                      {c.world_name?.[0] || '?'}
+                    </span>
+                  )}
+                  <span className="text-sm font-medium truncate" style={{ color: 'var(--text-strong)' }}>
+                    {c.character_name}
+                  </span>
+                  <span className="text-xs shrink-0" style={{ color: 'var(--text-dim)' }}>
+                    Lv.{c.character_level} · {c.job_name}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}

frontend/src/components/Checkbox.jsx

@@ -14,11 +14,17 @@ export default function Checkbox({ checked, onChange, disabled, className = '',
       disabled={disabled}
       tabIndex={tabIndex}
       onClick={(e) => { e.stopPropagation(); !disabled && onChange?.(!checked) }}
-      className={`${sizeCls} shrink-0 rounded-md border-2 flex items-center justify-center transition ${
-        checked
-          ? 'border-emerald-500 bg-emerald-500 text-white'
-          : 'border-white/20 bg-gray-950 hover:border-white/40'
-      } ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} ${className}`}
+      className={`${sizeCls} shrink-0 rounded-md border-2 flex items-center justify-center ${
+        disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'
+      } ${className}`}
+      style={checked ? {
+        borderColor: 'var(--accent)',
+        background: 'var(--accent)',
+        color: 'var(--btn-primary-text)',
+      } : {
+        borderColor: 'var(--input-border)',
+        background: 'var(--input-bg)',
+      }}
     >
       {checked && (
         <svg className={iconSize} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">

frontend/src/components/Layout.jsx

@@ -3,7 +3,9 @@ import { Outlet, Link, useLocation, useMatch } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { api } from '../api/client'
 import Footer from './Footer'
+import LoginDialog from './LoginDialog'
 import { useThemeStore } from '../stores/theme'
+import { useAuthStore } from '../stores/auth'
 
 const SITE_NAME = '메이플스토리 유틸리티'
 
@@ -38,6 +40,23 @@ function CurrentMenuTitle() {
     }
   }, [isAdmin, menu])
 
+  if (isAdmin) {
+    return (
+      <div
+        className="flex items-center gap-3"
+        style={{ color: 'var(--text-muted)' }}
+      >
+        <span style={{ color: 'var(--text-slash)' }}>/</span>
+        <span
+          className="text-sm font-medium"
+          style={{ color: 'var(--accent-bright)' }}
+        >
+          관리자
+        </span>
+      </div>
+    )
+  }
+
   if (!menu) return null
 
   return (
@@ -102,12 +121,100 @@ function ThemeToggle() {
   )
 }
 
+function LoginButton({ onClick }) {
+  const apiKey = useAuthStore((s) => s.apiKey)
+  const loggedIn = !!apiKey
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={loggedIn ? 'API 키 관리' : 'API 키 로그인'}
+      title={loggedIn ? 'API 키 관리' : 'API 키 로그인'}
+      className="inline-flex items-center gap-1.5 rounded-full border px-3 h-8 text-xs font-medium hover:border-[var(--selected-border)]"
+      style={{
+        background: 'var(--toggle-bg)',
+        borderColor: loggedIn ? 'var(--selected-border)' : 'var(--toggle-border)',
+        color: loggedIn ? 'var(--accent-bright)' : 'var(--text-muted)',
+      }}
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+        <path d="M15 7C15 5.34 13.66 4 12 4C10.34 4 9 5.34 9 7C9 7.74 9.27 8.42 9.71 8.95L4 14.66V20H9.34L15.05 14.29C15.58 14.73 16.26 15 17 15C18.66 15 20 13.66 20 12M17 8.5C16.72 8.5 16.5 8.28 16.5 8C16.5 7.72 16.72 7.5 17 7.5C17.28 7.5 17.5 7.72 17.5 8C17.5 8.28 17.28 8.5 17 8.5Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+      {loggedIn ? '로그인됨' : '로그인'}
+    </button>
+  )
+}
+
+function AdminLinkButton() {
+  const apiKey = useAuthStore((s) => s.apiKey)
+  const isAdminRoute = !!useMatch('/admin/*')
+  const { data } = useQuery({
+    queryKey: ['admin', 'verify', apiKey],
+    queryFn: async () => {
+      await api('/api/admin/verify', { method: 'POST', body: { key: apiKey } })
+      return true
+    },
+    enabled: !!apiKey,
+    retry: false,
+    staleTime: Infinity,
+  })
+
+  if (data !== true || isAdminRoute) return null
+
+  return (
+    <Link
+      to="/admin"
+      className="inline-flex items-center gap-1.5 rounded-full border px-3 h-8 text-xs font-medium hover:border-[var(--selected-border)]"
+      style={{
+        background: 'var(--toggle-bg)',
+        borderColor: 'var(--toggle-border)',
+        color: 'var(--text-muted)',
+      }}
+      title="관리자 페이지"
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+        <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" stroke="currentColor" strokeWidth="1.8" />
+        <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+      관리자
+    </Link>
+  )
+}
+
+function HomeLinkButton() {
+  const isAdminRoute = !!useMatch('/admin/*')
+  if (!isAdminRoute) return null
+
+  return (
+    <Link
+      to="/"
+      className="inline-flex items-center gap-1.5 rounded-full border px-3 h-8 text-xs font-medium hover:border-[var(--selected-border)]"
+      style={{
+        background: 'var(--toggle-bg)',
+        borderColor: 'var(--toggle-border)',
+        color: 'var(--text-muted)',
+      }}
+      title="홈으로"
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+        <path d="M3 10.5L12 3l9 7.5V21a1 1 0 01-1 1h-5v-7h-6v7H4a1 1 0 01-1-1V10.5z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+      홈으로
+    </Link>
+  )
+}
+
 export default function Layout() {
+  const location = useLocation()
   const [fullscreen, setFullscreen] = useState(false)
+  const [loginOpen, setLoginOpen] = useState(false)
   const isAdmin = !!useMatch('/admin/*')
   const homeTo = isAdmin ? '/admin' : '/'
   const theme = useThemeStore((s) => s.theme)
 
+  const isHome = location.pathname === '/'
+
   useEffect(() => {
     const root = document.documentElement
     if (theme === 'light') root.setAttribute('data-theme', 'light')
@@ -138,15 +245,21 @@ export default function Layout() {
               </Link>
               <CurrentMenuTitle />
             </div>
-            <ThemeToggle />
+            <div className="flex items-center gap-2">
+              <LoginButton onClick={() => setLoginOpen(true)} />
+              <AdminLinkButton />
+              <HomeLinkButton />
+              <ThemeToggle />
+            </div>
           </div>
         </header>
+        <LoginDialog open={loginOpen} onClose={() => setLoginOpen(false)} />
         <main className={`flex-1 mx-auto w-full max-w-[1400px] ${
           fullscreen ? 'min-h-0 px-6 py-4' : 'px-6 pt-4 pb-10'
         }`}>
           <Outlet />
         </main>
-        {!fullscreen && <Footer />}
+        {isHome && <Footer />}
       </div>
     </LayoutContext.Provider>
   )

frontend/src/components/LoginDialog.jsx

@@ -0,0 +1,170 @@
+import { useEffect, useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { useAuthStore } from '../stores/auth'
+import { api } from '../api/client'
+
+export default function LoginDialog({ open, onClose }) {
+  const apiKey = useAuthStore((s) => s.apiKey)
+  const setApiKey = useAuthStore((s) => s.setApiKey)
+  const clearApiKey = useAuthStore((s) => s.clearApiKey)
+
+  const [input, setInput] = useState('')
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  useEffect(() => {
+    if (open) {
+      setInput(apiKey || '')
+      setError('')
+      setBusy(false)
+    }
+  }, [open, apiKey])
+
+  const handleSave = async () => {
+    const key = input.trim()
+    if (!key) {
+      setError('API 키를 입력해주세요')
+      return
+    }
+    setError('')
+    setBusy(true)
+    try {
+      await api('/api/character/list', { headers: { 'x-user-api-key': key } })
+      setApiKey(key)
+      onClose()
+    } catch (err) {
+      setError(err.message || '키 검증 실패')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleLogout = () => {
+    clearApiKey()
+    setInput('')
+    onClose()
+  }
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          key="backdrop"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.18 }}
+          className="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md"
+          style={{ background: 'var(--dialog-backdrop)' }}
+        >
+          <motion.div
+            key="dialog"
+            initial={{ opacity: 0, scale: 0.94, y: 8 }}
+            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 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': 'var(--ring-info)',
+            }}
+            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"
+                style={{
+                  background: 'var(--icon-info-bg)',
+                  borderColor: 'var(--icon-info-border)',
+                  color: 'var(--accent-bright)',
+                }}
+              >
+                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
+                  <path d="M15 7C15 5.34 13.66 4 12 4C10.34 4 9 5.34 9 7C9 7.74 9.27 8.42 9.71 8.95L4 14.66V20H9.34L15.05 14.29C15.58 14.73 16.26 15 17 15C18.66 15 20 13.66 20 12M17 8.5C16.72 8.5 16.5 8.28 16.5 8C16.5 7.72 16.72 7.5 17 7.5C17.28 7.5 17.5 7.72 17.5 8C17.5 8.28 17.28 8.5 17 8.5Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </div>
+              <div className="flex-1">
+                <h3 className="text-xl font-bold pt-1" style={{ color: 'var(--text-strong)' }}>API 키 로그인</h3>
+                <p className="text-sm mt-1" style={{ color: 'var(--text-muted)' }}>
+                  NEXON Open API 키를 입력하면 계정의 캐릭터 목록을 불러올 수 있습니다
+                </p>
+              </div>
+              <button
+                onClick={onClose}
+                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 py-4 space-y-2">
+              <input
+                type="text"
+                value={input}
+                onChange={(e) => { setInput(e.target.value); if (error) setError('') }}
+                onKeyDown={(e) => { if (e.key === 'Enter' && !busy) handleSave() }}
+                placeholder="live_xxxxxxxxxxxxxxxxxx..."
+                className="w-full rounded-lg border-2 px-3 py-2.5 text-sm outline-none focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)] font-mono"
+                style={{
+                  background: 'var(--input-bg)',
+                  borderColor: 'var(--input-border)',
+                  color: 'var(--text-strong)',
+                }}
+                autoFocus
+              />
+              {error && (
+                <p className="text-xs" style={{ color: 'var(--danger-text)' }}>{error}</p>
+              )}
+              <p className="text-xs leading-relaxed" style={{ color: 'var(--text-dim)' }}>
+                키는 브라우저에만 저장되며 서버로 전송되지 않습니다.
+              </p>
+            </div>
+            <div
+              className="flex gap-2 px-7 py-4 border-t"
+              style={{ borderColor: 'var(--panel-border)' }}
+            >
+              {apiKey ? (
+                <button
+                  onClick={handleLogout}
+                  className="flex-1 rounded-lg border px-4 h-11 text-sm font-medium hover:bg-[var(--danger-bg-hover)] hover:text-[var(--danger-text)]"
+                  style={{
+                    borderColor: 'var(--btn-border)',
+                    color: 'var(--text-emphasis)',
+                  }}
+                >
+                  로그아웃
+                </button>
+              ) : (
+                <button
+                  onClick={onClose}
+                  className="flex-1 rounded-lg border px-4 h-11 text-sm font-medium hover:bg-[var(--btn-bg-hover)]"
+                  style={{
+                    background: 'var(--btn-bg)',
+                    borderColor: 'var(--btn-border)',
+                    color: 'var(--text-emphasis)',
+                  }}
+                >
+                  취소
+                </button>
+              )}
+              <button
+                onClick={handleSave}
+                disabled={busy}
+                className="flex-1 rounded-lg px-4 h-11 text-sm font-semibold disabled:opacity-50 hover:bg-[var(--btn-primary-bg-hover)]"
+                style={{
+                  background: 'var(--btn-primary-bg)',
+                  color: 'var(--btn-primary-text)',
+                  boxShadow: 'var(--btn-primary-shadow)',
+                }}
+              >
+                {busy ? '확인 중...' : apiKey ? '업데이트' : '저장'}
+              </button>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}

frontend/src/features/admin/AdminBoss.jsx

@@ -1,8 +1,16 @@
 export default function AdminBoss() {
   return (
     <div className="space-y-4">
-      <h2 className="text-lg font-semibold">보스 수익 계산기 관리</h2>
-      <div className="rounded-lg border border-gray-800 bg-gray-900/50 p-8 text-center text-gray-500">
+      <h2 className="text-lg font-medium">보스 수익 계산기 관리</h2>
+      <div
+        className="rounded-lg border p-8 text-center"
+        style={{
+          background: 'var(--panel-bg)',
+          borderColor: 'var(--panel-border)',
+          boxShadow: 'var(--panel-shadow)',
+          color: 'var(--text-dim)',
+        }}
+      >
         준비 중
       </div>
     </div>

frontend/src/features/admin/AdminFeaturePage.jsx

@@ -17,22 +17,29 @@ export default function AdminFeaturePage() {
 
   if (!Component) {
     return (
-      <div className="space-y-4">
+      <div className="space-y-4 max-w-5xl mx-auto pt-6">
         {menu && (
           <div>
-            <h2 className="text-lg font-semibold">{menu.title}</h2>
-            <p className="text-sm text-gray-500 mt-0.5">{menu.description}</p>
+            <h2 className="text-lg font-medium">{menu.title}</h2>
+            <p className="text-sm mt-0.5" style={{ color: 'var(--text-dim)' }}>{menu.description}</p>
           </div>
         )}
-        <div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] p-12 text-center">
+        <div
+          className="rounded-2xl border border-dashed p-12 text-center"
+          style={{
+            borderColor: 'var(--dashed-border)',
+            background: 'var(--skeleton-bg)',
+          }}
+        >
           <div className="text-4xl mb-3 opacity-30">🛠️</div>
-          <p className="text-gray-400">이 기능에는 관리 페이지가 없습니다</p>
-          <p className="text-xs text-gray-600 mt-2 font-mono">
+          <p style={{ color: 'var(--text-muted)' }}>이 기능에는 관리 페이지가 없습니다</p>
+          <p className="text-xs mt-2 font-mono" style={{ color: 'var(--text-dim)' }}>
             features/{slug}/{slug.split('-').map((s) => s[0].toUpperCase() + s.slice(1)).join('')}Admin.jsx
           </p>
           <Link
             to={`/admin/menus/${menu?.id || ''}`}
-            className="inline-block mt-4 text-xs text-emerald-400 hover:text-emerald-300 transition"
+            className="inline-block mt-4 text-xs hover:text-[var(--accent-hover-text)]"
+            style={{ color: 'var(--accent)' }}
           >
             메뉴 정보 편집 →
           </Link>
@@ -44,7 +51,10 @@ export default function AdminFeaturePage() {
   return (
     <Suspense fallback={
       <div className="flex items-center justify-center pt-20">
-        <div className="w-6 h-6 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin" />
+        <div
+          className="w-6 h-6 border-2 border-t-transparent rounded-full animate-spin"
+          style={{ borderColor: 'var(--accent)', borderTopColor: 'transparent' }}
+        />
       </div>
     }>
       <Component />

frontend/src/features/admin/AdminHome.jsx

@@ -1,4 +1,4 @@
-import { Link, useNavigate, useOutletContext } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { api } from '../../api/client'
 
@@ -72,7 +72,6 @@ function AddCard({ to, icon, label }) {
 }
 
 export default function AdminHome() {
-  const { handleLogout } = useOutletContext() || {}
   const { data: menus = [], isLoading: loading } = useQuery({
     queryKey: ['admin', 'menus'],
     queryFn: () => api('/api/admin/menus').catch(() => []),
@@ -157,18 +156,6 @@ export default function AdminHome() {
         </div>
       </section>
 
-      {/* 로그아웃 */}
-      {handleLogout && (
-        <div className="pt-4 text-center">
-          <button
-            onClick={handleLogout}
-            className="text-xs transition-colors hover:text-red-500"
-            style={{ color: 'var(--text-dim)' }}
-          >
-            관리자 로그아웃
-          </button>
-        </div>
-      )}
     </div>
   )
 }

frontend/src/features/admin/AdminImages.jsx

@@ -2,16 +2,37 @@ import { useState, useEffect } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { api } from '../../api/client'
 import ConfirmDialog from '../../components/ConfirmDialog'
+import { useAuthStore } from '../../stores/auth'
 
 /* ── 공용 모달 ── */
 function Modal({ open, onClose, title, children, maxWidth = 'max-w-md' }) {
   if (!open) return null
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm" onClick={onClose}>
-      <div className={`w-full ${maxWidth} rounded-2xl bg-gray-900 border border-white/10 shadow-2xl max-h-[90vh] flex flex-col`} onClick={(e) => e.stopPropagation()}>
-        <div className="px-6 py-4 border-b border-white/5 flex items-center justify-between shrink-0">
-          <h3 className="font-semibold">{title}</h3>
-          <button onClick={onClose} className="text-gray-500 hover:text-white transition text-xl leading-none">×</button>
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
+      style={{ background: 'var(--dialog-backdrop)' }}
+      onClick={onClose}
+    >
+      <div
+        className={`w-full ${maxWidth} rounded-2xl border shadow-2xl max-h-[90vh] flex flex-col`}
+        style={{
+          backgroundImage: 'linear-gradient(to bottom, var(--dialog-bg-from), var(--dialog-bg-to))',
+          borderColor: 'var(--dialog-border)',
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          className="px-6 py-4 border-b flex items-center justify-between shrink-0"
+          style={{ borderColor: 'var(--panel-border)' }}
+        >
+          <h3 className="font-semibold" style={{ color: 'var(--text-strong)' }}>{title}</h3>
+          <button
+            onClick={onClose}
+            className="text-xl leading-none hover:bg-[var(--row-hover-bg)] w-7 h-7 rounded flex items-center justify-center"
+            style={{ color: 'var(--text-dim)' }}
+          >
+            ×
+          </button>
         </div>
         {children}
       </div>
@@ -21,7 +42,7 @@ function Modal({ open, onClose, title, children, maxWidth = 'max-w-md' }) {
 
 /* ── 업로드 모달 (다중 지원) ── */
 function UploadModal({ open, onClose, onUpload, uploading, existingNames }) {
-  const [items, setItems] = useState([]) // { file, name, preview, id }
+  const [items, setItems] = useState([])
   const [dragOver, setDragOver] = useState(false)
 
   useEffect(() => {
@@ -81,13 +102,18 @@ function UploadModal({ open, onClose, onUpload, uploading, existingNames }) {
               setDragOver(false)
               addFiles(e.dataTransfer.files)
             }}
-            className={`relative rounded-xl border-2 border-dashed transition cursor-pointer min-h-[120px] flex flex-col items-center justify-center ${
-              dragOver ? 'border-emerald-500 bg-emerald-500/10' : 'border-white/10 hover:border-white/20 bg-white/[0.02]'
-            }`}
+            className="relative rounded-xl border-2 border-dashed cursor-pointer min-h-[120px] flex flex-col items-center justify-center"
+            style={dragOver ? {
+              borderColor: 'var(--selected-border)',
+              background: 'var(--selected-bg)',
+            } : {
+              borderColor: 'var(--dashed-border)',
+              background: 'var(--skeleton-bg)',
+            }}
           >
             <div className="text-2xl mb-1 opacity-50">📥</div>
-            <p className="text-sm text-gray-400">클릭하거나 이미지를 끌어다 놓으세요</p>
-            <p className="text-xs text-gray-600 mt-0.5">여러 개 선택 가능</p>
+            <p className="text-sm" style={{ color: 'var(--text-muted)' }}>클릭하거나 이미지를 끌어다 놓으세요</p>
+            <p className="text-xs mt-0.5" style={{ color: 'var(--text-dim)' }}>여러 개 선택 가능</p>
             <input
               type="file"
               accept="image/*"
@@ -111,14 +137,22 @@ function UploadModal({ open, onClose, onUpload, uploading, existingNames }) {
                   : null
 
                 return (
-                  <div key={item.id} className={`flex items-start gap-3 rounded-lg border bg-gray-950/50 p-2 ${
-                    errorMsg ? 'border-red-500/40' : 'border-white/5'
-                  }`}>
-                    <div className="w-12 h-12 rounded bg-gray-900 flex items-center justify-center overflow-hidden shrink-0">
+                  <div
+                    key={item.id}
+                    className="flex items-start gap-3 rounded-lg border p-2"
+                    style={{
+                      background: 'var(--surface-3)',
+                      borderColor: errorMsg ? 'var(--icon-danger-border)' : 'var(--panel-border)',
+                    }}
+                  >
+                    <div
+                      className="w-12 h-12 rounded flex items-center justify-center overflow-hidden shrink-0"
+                      style={{ background: 'var(--surface-nested)' }}
+                    >
                       {item.preview ? (
                         <img src={item.preview} alt="" className="w-full h-full object-contain" />
                       ) : (
-                        <div className="w-4 h-4 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin" />
+                        <div className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin" style={{ borderColor: 'var(--accent)', borderTopColor: 'transparent' }} />
                       )}
                     </div>
                     <div className="flex-1 min-w-0 space-y-0.5">
@@ -126,16 +160,22 @@ function UploadModal({ open, onClose, onUpload, uploading, existingNames }) {
                         type="text"
                         value={item.name}
                         onChange={(e) => updateName(item.id, e.target.value)}
-                        className={`w-full rounded border bg-gray-900 px-2 py-1.5 text-sm outline-none transition ${
-                          errorMsg ? 'border-red-500/40 focus:border-red-500/60' : 'border-white/10 focus:border-emerald-500/50'
-                        }`}
+                        className="w-full rounded border px-2 py-1.5 text-sm outline-none"
+                        style={{
+                          background: 'var(--input-bg)',
+                          borderColor: errorMsg ? 'var(--icon-danger-border)' : 'var(--input-border)',
+                          color: 'var(--text-strong)',
+                        }}
                       />
-                      {errorMsg && <div className="text-[11px] text-red-400 px-0.5">{errorMsg}</div>}
+                      {errorMsg && (
+                        <div className="text-[11px] px-0.5" style={{ color: 'var(--danger-text)' }}>{errorMsg}</div>
+                      )}
                     </div>
                     <button
                       type="button"
                       onClick={() => removeItem(item.id)}
-                      className="w-7 h-7 rounded text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition shrink-0"
+                      className="w-7 h-7 rounded shrink-0 hover:bg-[var(--danger-bg-hover)] hover:text-[var(--danger-text)]"
+                      style={{ color: 'var(--text-dim)' }}
                     >
                       ×
                     </button>
@@ -147,14 +187,31 @@ function UploadModal({ open, onClose, onUpload, uploading, existingNames }) {
         </div>
 
         {/* 버튼 */}
-        <div className="flex gap-2 px-6 py-4 border-t border-white/5 shrink-0">
-          <button type="button" onClick={onClose} className="flex-1 rounded-lg border border-white/10 px-4 py-2 text-sm hover:bg-white/5 transition">
+        <div
+          className="flex gap-2 px-6 py-4 border-t shrink-0"
+          style={{ borderColor: 'var(--panel-border)' }}
+        >
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex-1 rounded-lg border px-4 py-2 text-sm hover:bg-[var(--btn-bg-hover)]"
+            style={{
+              background: 'var(--btn-bg)',
+              borderColor: 'var(--btn-border)',
+              color: 'var(--text-emphasis)',
+            }}
+          >
             취소
           </button>
           <button
             type="submit"
             disabled={!canSubmit || uploading}
-            className="flex-1 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-medium hover:bg-emerald-500 disabled:opacity-50 disabled:cursor-not-allowed transition"
+            className="flex-1 rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[var(--btn-primary-bg-hover)]"
+            style={{
+              background: 'var(--btn-primary-bg)',
+              color: 'var(--btn-primary-text)',
+              boxShadow: 'var(--btn-primary-shadow)',
+            }}
           >
             {uploading ? '업로드 중...' : `${items.length > 0 ? `${items.length}개 ` : ''}업로드`}
           </button>
@@ -169,22 +226,32 @@ function ImageCard({ image, selected, selectMode, onToggle, onCopyUrl, copied })
   return (
     <div
       onClick={() => selectMode && onToggle(image.id)}
-      className={`group relative rounded-xl border overflow-hidden transition ${
-        selected
-          ? 'border-emerald-500/60 bg-emerald-500/5 ring-2 ring-emerald-500/30'
-          : 'border-white/5 bg-gray-900/40 hover:border-white/15'
-      } ${selectMode ? 'cursor-pointer' : ''}`}
+      className={`group relative rounded-xl border overflow-hidden ${selectMode ? 'cursor-pointer' : ''}`}
+      style={{
+        borderColor: selected ? 'var(--selected-border)' : 'var(--panel-border)',
+        background: selected ? 'var(--selected-bg)' : 'var(--panel-bg)',
+        boxShadow: selected ? '0 0 0 2px var(--ring-info)' : 'var(--panel-shadow)',
+      }}
     >
-      {/* 체크박스 (선택모드) */}
       {selectMode && (
-        <div className={`absolute top-2 left-2 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition ${
-          selected ? 'border-emerald-500 bg-emerald-500' : 'border-white/30 bg-gray-950/80'
-        }`}>
-          {selected && <span className="text-xs text-white">✓</span>}
+        <div
+          className="absolute top-2 left-2 z-10 w-5 h-5 rounded border-2 flex items-center justify-center"
+          style={selected ? {
+            borderColor: 'var(--accent)',
+            background: 'var(--accent)',
+          } : {
+            borderColor: 'var(--panel-border)',
+            background: 'var(--surface-3)',
+          }}
+        >
+          {selected && <span className="text-xs" style={{ color: 'var(--btn-primary-text)' }}>✓</span>}
         </div>
       )}
 
-      <div className="aspect-square bg-gradient-to-br from-gray-900 to-gray-950 flex items-center justify-center p-4 relative">
+      <div
+        className="aspect-square flex items-center justify-center p-4 relative"
+        style={{ backgroundImage: 'linear-gradient(to bottom right, var(--icon-box-from), var(--icon-box-to))' }}
+      >
         <img
           src={image.url}
           alt={image.name}
@@ -196,7 +263,12 @@ function ImageCard({ image, selected, selectMode, onToggle, onCopyUrl, copied })
           <div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition">
             <button
               onClick={(e) => { e.stopPropagation(); onCopyUrl(image) }}
-              className="w-7 h-7 rounded-md bg-gray-950/80 backdrop-blur-sm border border-white/10 hover:bg-emerald-500/20 hover:border-emerald-500/40 text-xs flex items-center justify-center transition"
+              className="w-7 h-7 rounded-md backdrop-blur-sm border text-xs flex items-center justify-center hover:bg-[var(--selected-bg)] hover:border-[var(--selected-border)]"
+              style={{
+                background: 'var(--btn-bg)',
+                borderColor: 'var(--btn-border)',
+                color: 'var(--text-emphasis)',
+              }}
               title="URL 복사"
             >
               {copied ? '✓' : '⧉'}
@@ -205,7 +277,10 @@ function ImageCard({ image, selected, selectMode, onToggle, onCopyUrl, copied })
         )}
       </div>
 
-      <div className="px-3 py-2 border-t border-white/5">
+      <div
+        className="px-3 py-2 border-t"
+        style={{ borderColor: 'var(--panel-border)' }}
+      >
         <div className="text-sm font-medium truncate">{image.name}</div>
       </div>
     </div>
@@ -223,50 +298,61 @@ function Pagination({ page, totalPages, onChange }) {
   if (end - start + 1 < maxButtons) start = Math.max(1, end - maxButtons + 1)
   for (let i = start; i <= end; i++) pages.push(i)
 
-  const btn = "min-w-9 h-9 px-3 rounded-lg text-sm transition flex items-center justify-center"
+  const baseBtn = "min-w-9 h-9 px-3 rounded-lg text-sm flex items-center justify-center border hover:bg-[var(--btn-bg-hover)]"
+  const btnStyle = {
+    background: 'var(--btn-bg)',
+    borderColor: 'var(--btn-border)',
+    color: 'var(--text-emphasis)',
+  }
 
   return (
     <div className="flex items-center justify-center gap-1 pt-2">
       <button
         onClick={() => onChange(page - 1)}
         disabled={page === 1}
-        className={`${btn} border border-white/10 hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed`}
+        className={`${baseBtn} disabled:opacity-30 disabled:cursor-not-allowed`}
+        style={btnStyle}
       >
         ‹
       </button>
 
       {start > 1 && (
         <>
-          <button onClick={() => onChange(1)} className={`${btn} border border-white/10 hover:bg-white/5`}>1</button>
-          {start > 2 && <span className="text-gray-600 px-1">…</span>}
+          <button onClick={() => onChange(1)} className={baseBtn} style={btnStyle}>1</button>
+          {start > 2 && <span className="px-1" style={{ color: 'var(--text-dim)' }}>…</span>}
         </>
       )}
 
-      {pages.map((p) => (
-        <button
-          key={p}
-          onClick={() => onChange(p)}
-          className={`${btn} ${
-            p === page
-              ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-medium'
-              : 'border border-white/10 hover:bg-white/5'
-          }`}
-        >
-          {p}
-        </button>
-      ))}
+      {pages.map((p) => {
+        const active = p === page
+        return (
+          <button
+            key={p}
+            onClick={() => onChange(p)}
+            className={`${baseBtn} ${active ? 'font-medium' : ''}`}
+            style={active ? {
+              background: 'var(--selected-bg)',
+              borderColor: 'var(--selected-border)',
+              color: 'var(--accent-bright)',
+            } : btnStyle}
+          >
+            {p}
+          </button>
+        )
+      })}
 
       {end < totalPages && (
         <>
-          {end < totalPages - 1 && <span className="text-gray-600 px-1">…</span>}
-          <button onClick={() => onChange(totalPages)} className={`${btn} border border-white/10 hover:bg-white/5`}>{totalPages}</button>
+          {end < totalPages - 1 && <span className="px-1" style={{ color: 'var(--text-dim)' }}>…</span>}
+          <button onClick={() => onChange(totalPages)} className={baseBtn} style={btnStyle}>{totalPages}</button>
         </>
       )}
 
       <button
         onClick={() => onChange(page + 1)}
         disabled={page === totalPages}
-        className={`${btn} border border-white/10 hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed`}
+        className={`${baseBtn} disabled:opacity-30 disabled:cursor-not-allowed`}
+        style={btnStyle}
       >
         ›
       </button>
@@ -285,10 +371,9 @@ export default function AdminImages() {
   const [uploadOpen, setUploadOpen] = useState(false)
   const [selectMode, setSelectMode] = useState(false)
   const [selectedIds, setSelectedIds] = useState(new Set())
-  const [confirmDelete, setConfirmDelete] = useState(null) // {ids, names}
+  const [confirmDelete, setConfirmDelete] = useState(null)
   const [copiedId, setCopiedId] = useState(null)
 
-  // 검색어 디바운싱
   useEffect(() => {
     const t = setTimeout(() => {
       setDebouncedSearch(search)
@@ -297,7 +382,6 @@ export default function AdminImages() {
     return () => clearTimeout(t)
   }, [search])
 
-  // 이미지 목록 (페이징 + 검색)
   const { data: imagesData, isLoading } = useQuery({
     queryKey: ['admin', 'images', { page, search: debouncedSearch }],
     queryFn: async () => {
@@ -314,7 +398,6 @@ export default function AdminImages() {
   const images = imagesData?.items || []
   const totalPages = imagesData?.total_pages || 1
 
-  // 전체 이름 (중복 체크용)
   const { data: allNamesArray = [] } = useQuery({
     queryKey: ['admin', 'images', 'names'],
     queryFn: () => api('/api/admin/images/names'),
@@ -325,7 +408,6 @@ export default function AdminImages() {
     queryClient.invalidateQueries({ queryKey: ['admin', 'images'] })
   }
 
-  // 업로드
   const uploadMutation = useMutation({
     mutationFn: async (items) => {
       const formData = new FormData()
@@ -333,7 +415,7 @@ export default function AdminImages() {
         formData.append('files', it.file)
         formData.append('names', it.name.trim())
       })
-      const adminKey = localStorage.getItem('maple-admin-key')
+      const adminKey = useAuthStore.getState().apiKey
       const res = await fetch('/api/admin/images', {
         method: 'POST',
         headers: { 'x-admin-key': adminKey },
@@ -382,7 +464,6 @@ export default function AdminImages() {
     })
   }
 
-  // 삭제
   const deleteMutation = useMutation({
     mutationFn: (ids) => api('/api/admin/images/delete', { method: 'POST', body: { ids } }),
     onSuccess: () => {
@@ -401,32 +482,47 @@ export default function AdminImages() {
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 max-w-5xl mx-auto pt-6">
       <div className="flex items-end justify-between gap-4 flex-wrap">
         <div>
-          <h2 className="text-lg font-semibold">이미지 관리</h2>
-          <p className="text-sm text-gray-500 mt-0.5">공용 이미지를 업로드하고 관리합니다</p>
+          <h2 className="text-lg font-medium">이미지 관리</h2>
+          <p className="text-sm mt-0.5" style={{ color: 'var(--text-dim)' }}>공용 이미지를 업로드하고 관리합니다</p>
         </div>
         <div className="flex items-center gap-2">
           {selectMode ? (
             <>
-              <span className="text-sm text-gray-400">{selectedIds.size}개 선택</span>
+              <span className="text-sm" style={{ color: 'var(--text-muted)' }}>{selectedIds.size}개 선택</span>
               <button
                 onClick={selectAll}
-                className="rounded-lg border border-white/10 px-3 py-2 text-sm hover:bg-white/5 transition"
+                className="rounded-lg border px-3 py-2 text-sm hover:bg-[var(--btn-bg-hover)]"
+                style={{
+                  background: 'var(--btn-bg)',
+                  borderColor: 'var(--btn-border)',
+                  color: 'var(--text-emphasis)',
+                }}
               >
                 {selectedIds.size === images.length && images.length > 0 ? '전체 해제' : '전체 선택'}
               </button>
               <button
                 onClick={requestDelete}
                 disabled={selectedIds.size === 0}
-                className="rounded-lg bg-red-600 hover:bg-red-500 px-3 py-2 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed transition shadow-lg shadow-red-500/20"
+                className="rounded-lg px-3 py-2 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[var(--btn-danger-bg-hover)]"
+                style={{
+                  background: 'var(--btn-danger-bg)',
+                  color: 'var(--btn-primary-text)',
+                  boxShadow: 'var(--btn-danger-shadow)',
+                }}
               >
                 삭제
               </button>
               <button
                 onClick={toggleSelectMode}
-                className="rounded-lg border border-white/10 px-3 py-2 text-sm hover:bg-white/5 transition"
+                className="rounded-lg border px-3 py-2 text-sm hover:bg-[var(--btn-bg-hover)]"
+                style={{
+                  background: 'var(--btn-bg)',
+                  borderColor: 'var(--btn-border)',
+                  color: 'var(--text-emphasis)',
+                }}
               >
                 완료
               </button>
@@ -436,14 +532,23 @@ export default function AdminImages() {
               {images.length > 0 && (
                 <button
                   onClick={toggleSelectMode}
-                  className="rounded-lg border border-red-500/30 text-red-400 hover:bg-red-500/10 hover:border-red-500/50 px-3 py-2 text-sm transition"
+                  className="rounded-lg border px-3 py-2 text-sm hover:bg-[var(--danger-bg-hover)]"
+                  style={{
+                    borderColor: 'var(--icon-danger-border)',
+                    color: 'var(--danger-text)',
+                  }}
                 >
                   삭제
                 </button>
               )}
               <button
                 onClick={() => setUploadOpen(true)}
-                className="flex items-center gap-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 px-4 py-2 text-sm font-medium transition shadow-lg shadow-emerald-500/20"
+                className="flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium hover:bg-[var(--btn-primary-bg-hover)]"
+                style={{
+                  background: 'var(--btn-primary-bg)',
+                  color: 'var(--btn-primary-text)',
+                  boxShadow: 'var(--btn-primary-shadow)',
+                }}
               >
                 <span className="text-base leading-none">+</span>
                 이미지 업로드
@@ -461,9 +566,14 @@ export default function AdminImages() {
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             placeholder="이미지 이름으로 검색..."
-            className="w-full rounded-lg border border-white/10 bg-gray-900/50 pl-10 pr-4 py-2.5 text-sm outline-none focus:border-emerald-500/50 transition"
+            className="w-full rounded-lg border pl-10 pr-4 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)',
+              color: 'var(--text-strong)',
+            }}
           />
-          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">🔍</span>
+          <span className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: 'var(--input-icon)' }}>🔍</span>
         </div>
       )}
 
@@ -471,19 +581,30 @@ export default function AdminImages() {
       {isLoading ? (
         <div className="grid gap-3 grid-cols-3 sm:grid-cols-4 lg:grid-cols-6">
           {Array.from({ length: 8 }).map((_, i) => (
-            <div key={i} className="aspect-square rounded-xl bg-white/[0.02] animate-pulse" />
+            <div
+              key={i}
+              className="aspect-square rounded-xl animate-pulse"
+              style={{ background: 'var(--skeleton-bg)' }}
+            />
           ))}
         </div>
       ) : images.length === 0 ? (
-        <div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] p-16 text-center">
+        <div
+          className="rounded-2xl border border-dashed p-16 text-center"
+          style={{
+            borderColor: 'var(--dashed-border)',
+            background: 'var(--skeleton-bg)',
+          }}
+        >
           <div className="text-5xl mb-3 opacity-30">🖼️</div>
-          <p className="text-gray-400 mb-4">
+          <p className="mb-4" style={{ color: 'var(--text-muted)' }}>
             {debouncedSearch ? '검색 결과가 없습니다' : '업로드된 이미지가 없습니다'}
           </p>
           {!debouncedSearch && (
             <button
               onClick={() => setUploadOpen(true)}
-              className="text-sm text-emerald-400 hover:text-emerald-300 transition"
+              className="text-sm hover:text-[var(--accent-hover-text)]"
+              style={{ color: 'var(--accent)' }}
             >
               첫 이미지 업로드하기 →
             </button>

frontend/src/features/admin/AdminLayout.jsx

@@ -1,23 +1,20 @@
-import { useSearchParams, Outlet, Navigate } from 'react-router-dom'
+import { Outlet, Navigate } from 'react-router-dom'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { api } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'
 
 export default function AdminLayout() {
   const queryClient = useQueryClient()
-  const [searchParams] = useSearchParams()
-
-  const keyFromUrl = searchParams.get('key')
-  const key = keyFromUrl || localStorage.getItem('maple-admin-key')
+  const apiKey = useAuthStore((s) => s.apiKey)
+  const clearApiKey = useAuthStore((s) => s.clearApiKey)
 
   const { data, isLoading } = useQuery({
-    queryKey: ['admin', 'verify', key],
+    queryKey: ['admin', 'verify', apiKey],
     queryFn: async () => {
-      if (!key) throw new Error('no key')
-      await api('/api/admin/verify', { method: 'POST', body: { key } })
-      localStorage.setItem('maple-admin-key', key)
+      await api('/api/admin/verify', { method: 'POST', body: { key: apiKey } })
       return true
     },
-    enabled: !!key,
+    enabled: !!apiKey,
     retry: false,
     staleTime: Infinity,
   })
@@ -25,23 +22,20 @@ export default function AdminLayout() {
   const verified = data === true
 
   const handleLogout = () => {
-    localStorage.removeItem('maple-admin-key')
+    clearApiKey()
     queryClient.removeQueries({ queryKey: ['admin'] })
     window.location.href = '/'
   }
 
-  if (key && isLoading) {
+  if (apiKey && isLoading) {
     return (
       <div className="flex items-center justify-center pt-20">
-        <div className="w-6 h-6 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin" />
+        <div className="w-6 h-6 border-2 border-t-transparent rounded-full animate-spin" style={{ borderColor: 'var(--accent)', borderTopColor: 'transparent' }} />
       </div>
     )
   }
 
-  if (!verified) {
-    if (key) localStorage.removeItem('maple-admin-key')
-    return <Navigate to="/" replace />
-  }
+  if (!verified) return <Navigate to="/" replace />
 
   return <Outlet context={{ handleLogout }} />
 }

frontend/src/features/admin/AdminMenuForm.jsx

@@ -9,18 +9,23 @@ function Field({ label, hint, error, required, children }) {
   return (
     <div className="space-y-1.5">
       <div className="flex items-baseline justify-between">
-        <label className="text-sm font-medium text-gray-300">
-          {label} {required && <span className="text-red-400">*</span>}
+        <label className="text-sm font-medium" style={{ color: 'var(--text-emphasis)' }}>
+          {label} {required && <span style={{ color: 'var(--danger-text)' }}>*</span>}
         </label>
-        {hint && <span className="text-xs text-gray-500">{hint}</span>}
+        {hint && <span className="text-xs" style={{ color: 'var(--text-dim)' }}>{hint}</span>}
       </div>
       {children}
-      {error && <div className="text-[11px] text-red-400">{error}</div>}
+      {error && <div className="text-[11px]" style={{ color: 'var(--danger-text)' }}>{error}</div>}
     </div>
   )
 }
 
-const inputCls = 'w-full rounded-lg border border-white/10 bg-gray-950 px-3 py-2 text-sm outline-none focus:border-emerald-500/50 transition'
+const inputCls = 'w-full rounded-lg border px-3 py-2 text-sm outline-none focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]'
+const inputStyle = {
+  background: 'var(--input-bg)',
+  borderColor: 'var(--input-border)',
+  color: 'var(--text-strong)',
+}
 
 export default function AdminMenuForm() {
   const navigate = useNavigate()
@@ -33,20 +38,18 @@ export default function AdminMenuForm() {
   const [form, setForm] = useState({
     title: '',
     description: '',
-    slug: '', // 사용자 입력 (앞 / 제외)
+    slug: '',
     image_id: null,
-    image: null, // 미리보기용 캐시
+    image: null,
   })
   const [errors, setErrors] = useState({})
 
-  // 편집 모드일 때 기존 데이터 로드
   const { data: menuData } = useQuery({
     queryKey: ['admin', 'menus', id],
     queryFn: () => api(`/api/admin/menus/${id}`),
     enabled: isEdit,
   })
 
-  // id 변경 또는 데이터 로드 시 폼 동기화
   useEffect(() => {
     if (!isEdit) {
       setForm({ title: '', description: '', slug: '', image_id: null, image: null })
@@ -65,7 +68,6 @@ export default function AdminMenuForm() {
 
   const update = (patch) => setForm((prev) => ({ ...prev, ...patch }))
 
-  // slug에서 / 자동 제거 (붙여넣기 등 대비)
   const handleSlugChange = (value) => {
     update({ slug: value.replace(/^\/+/, '') })
   }
@@ -119,24 +121,55 @@ export default function AdminMenuForm() {
   })
 
   return (
-    <div className="space-y-6 max-w-2xl mx-auto">
+    <div className="space-y-6 max-w-2xl mx-auto pt-6">
       <div>
-        <h2 className="text-lg font-semibold">{isEdit ? '메뉴 항목 편집' : '메뉴 항목 추가'}</h2>
-        <p className="text-sm text-gray-500 mt-0.5">홈 화면에 표시되는 카드의 정보를 설정합니다</p>
+        <h2 className="text-lg font-medium">{isEdit ? '메뉴 항목 편집' : '메뉴 항목 추가'}</h2>
+        <p className="text-sm mt-0.5" style={{ color: 'var(--text-dim)' }}>
+          홈 화면에 표시되는 카드의 정보를 설정합니다
+        </p>
       </div>
 
-      <form onSubmit={handleSubmit} className="space-y-5 rounded-2xl border border-white/5 bg-gray-900/40 p-6">
+      <form
+        onSubmit={handleSubmit}
+        className="space-y-5 rounded-2xl border p-6"
+        style={{
+          background: 'var(--panel-bg)',
+          borderColor: 'var(--panel-border)',
+          boxShadow: 'var(--panel-shadow)',
+        }}
+      >
         {/* 미리보기 */}
-        <div className="rounded-xl border border-white/5 bg-gray-950/50 p-4">
-          <div className="text-xs text-gray-500 mb-3">미리보기</div>
-          <div className="rounded-xl border border-white/10 bg-gradient-to-br from-gray-900/80 to-gray-900/40 p-5">
+        <div
+          className="rounded-xl border p-4"
+          style={{
+            background: 'var(--surface-3)',
+            borderColor: 'var(--panel-border)',
+          }}
+        >
+          <div className="text-xs mb-3" style={{ color: 'var(--text-dim)' }}>미리보기</div>
+          <div
+            className="rounded-xl border p-5"
+            style={{
+              backgroundImage: 'linear-gradient(to bottom right, var(--card-bg-from), var(--card-bg-to))',
+              borderColor: 'var(--card-border)',
+              boxShadow: 'var(--card-shadow)',
+            }}
+          >
             <div className="flex items-start gap-4">
-              <div className="shrink-0 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">
+              <div
+                className="shrink-0 w-12 h-12 rounded-xl border flex items-center justify-center overflow-hidden"
+                style={{
+                  backgroundImage: 'linear-gradient(to bottom right, var(--icon-box-from), var(--icon-box-to))',
+                  borderColor: 'var(--icon-box-border)',
+                }}
+              >
                 <img src={form.image?.url || '/default.png'} alt="" className="w-9 h-9 object-contain" />
               </div>
               <div className="flex-1 min-w-0">
-                <h3 className="font-semibold">{form.title || '제목 없음'}</h3>
-                <p className="text-sm text-gray-400 mt-1">{form.description || '설명 없음'}</p>
+                <h3 className="font-medium">{form.title || '제목 없음'}</h3>
+                <p className="text-sm mt-1" style={{ color: 'var(--text-muted)' }}>
+                  {form.description || '설명 없음'}
+                </p>
               </div>
             </div>
           </div>
@@ -149,6 +182,7 @@ export default function AdminMenuForm() {
             onChange={(e) => update({ title: e.target.value })}
             placeholder="예: 주간 보스 수익 계산기"
             className={inputCls}
+            style={inputStyle}
           />
         </Field>
 
@@ -159,26 +193,45 @@ export default function AdminMenuForm() {
             onChange={(e) => update({ description: e.target.value })}
             placeholder="예: 캐릭터별 보스 결정석 수익을 계산합니다"
             className={inputCls}
+            style={inputStyle}
           />
         </Field>
 
         <Field label="경로" required error={errors.slug}>
-          <div className={`flex items-stretch rounded-lg border bg-gray-950 transition focus-within:border-emerald-500/50 ${
-            errors.slug ? 'border-red-500/40' : 'border-white/10'
-          }`}>
-            <span className="flex items-center px-3 text-sm text-gray-500 border-r border-white/10 select-none">/</span>
+          <div
+            className="flex items-stretch rounded-lg border focus-within:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]"
+            style={{
+              background: 'var(--input-bg)',
+              borderColor: errors.slug ? 'var(--icon-danger-border)' : 'var(--input-border)',
+            }}
+          >
+            <span
+              className="flex items-center px-3 text-sm border-r select-none"
+              style={{ color: 'var(--text-dim)', borderColor: 'var(--input-border)' }}
+            >
+              /
+            </span>
             <input
               type="text"
               value={form.slug}
               onChange={(e) => handleSlugChange(e.target.value)}
               placeholder="boss-crystal"
               className="flex-1 min-w-0 bg-transparent px-3 py-2 text-sm outline-none"
+              style={{ color: 'var(--text-strong)' }}
             />
           </div>
           {form.slug.trim() && !errors.slug && (
-            <div className="text-xs text-gray-500 mt-1.5 flex items-center gap-1.5">
+            <div className="text-xs mt-1.5 flex items-center gap-1.5" style={{ color: 'var(--text-dim)' }}>
               <span>전체 URL:</span>
-              <code className="text-emerald-400 bg-gray-950/50 px-1.5 py-0.5 rounded">https://maple.caadiq.co.kr{fullUrl}</code>
+              <code
+                className="px-1.5 py-0.5 rounded"
+                style={{
+                  color: 'var(--accent-bright)',
+                  background: 'var(--surface-3)',
+                }}
+              >
+                https://maple.caadiq.co.kr{fullUrl}
+              </code>
             </div>
           )}
         </Field>
@@ -188,12 +241,16 @@ export default function AdminMenuForm() {
             <button
               type="button"
               onClick={() => setPickerOpen(true)}
-              className="w-16 h-16 rounded-lg border border-white/10 hover:border-emerald-500/40 bg-gray-950 flex items-center justify-center overflow-hidden transition shrink-0 cursor-pointer"
+              className="w-16 h-16 rounded-lg border flex items-center justify-center overflow-hidden shrink-0 cursor-pointer hover:border-[var(--selected-border)]"
+              style={{
+                background: 'var(--input-bg)',
+                borderColor: 'var(--input-border)',
+              }}
             >
               {form.image?.url ? (
                 <img src={form.image.url} alt="" className="max-w-[80%] max-h-[80%] object-contain" />
               ) : (
-                <span className="text-2xl text-gray-700">+</span>
+                <span className="text-2xl" style={{ color: 'var(--text-dim)' }}>+</span>
               )}
             </button>
             <div className="flex-1 min-w-0">
@@ -203,13 +260,14 @@ export default function AdminMenuForm() {
                   <button
                     type="button"
                     onClick={() => update({ image_id: null, image: null })}
-                    className="text-xs text-red-400 hover:text-red-300 transition mt-1"
+                    className="text-xs mt-1 hover:text-[var(--danger-text-strong)]"
+                    style={{ color: 'var(--danger-text)' }}
                   >
                     이미지 제거
                   </button>
                 </>
               ) : (
-                <div className="text-sm text-gray-500">이미지 선택</div>
+                <div className="text-sm" style={{ color: 'var(--text-dim)' }}>이미지 선택</div>
               )}
             </div>
           </div>
@@ -220,7 +278,11 @@ export default function AdminMenuForm() {
             <button
               type="button"
               onClick={() => setConfirmDelete(true)}
-              className="rounded-lg border border-red-500/30 text-red-400 hover:bg-red-500/10 hover:border-red-500/50 px-4 py-2.5 text-sm transition"
+              className="rounded-lg border px-4 py-2.5 text-sm hover:bg-[var(--danger-bg-hover)]"
+              style={{
+                borderColor: 'var(--icon-danger-border)',
+                color: 'var(--danger-text)',
+              }}
             >
               삭제
             </button>
@@ -229,14 +291,24 @@ export default function AdminMenuForm() {
           <button
             type="button"
             onClick={() => navigate('/admin')}
-            className="rounded-lg border border-white/10 px-5 py-2.5 text-sm hover:bg-white/5 transition"
+            className="rounded-lg border px-5 py-2.5 text-sm hover:bg-[var(--btn-bg-hover)]"
+            style={{
+              background: 'var(--btn-bg)',
+              borderColor: 'var(--btn-border)',
+              color: 'var(--text-emphasis)',
+            }}
           >
             취소
           </button>
           <button
             type="submit"
             disabled={saveMutation.isPending}
-            className="rounded-lg bg-emerald-600 hover:bg-emerald-500 px-5 py-2.5 text-sm font-medium disabled:opacity-50 transition shadow-lg shadow-emerald-500/20"
+            className="rounded-lg px-5 py-2.5 text-sm font-medium disabled:opacity-50 hover:bg-[var(--btn-primary-bg-hover)]"
+            style={{
+              background: 'var(--btn-primary-bg)',
+              color: 'var(--btn-primary-text)',
+              boxShadow: 'var(--btn-primary-shadow)',
+            }}
           >
             {saveMutation.isPending ? '저장 중...' : (isEdit ? '저장' : '추가')}
           </button>

frontend/src/features/admin/components/ImagePicker.jsx

@@ -4,9 +4,6 @@ import { api } from '../../../api/client'
 
 const PAGE_SIZE = 24
 
-/**
- * 업로드된 이미지 중 하나를 선택하는 모달 피커
- */
 export default function ImagePicker({ open, onClose, onSelect, currentImageId }) {
   const [page, setPage] = useState(1)
   const [search, setSearch] = useState('')
@@ -48,11 +45,31 @@ export default function ImagePicker({ open, onClose, onSelect, currentImageId })
   if (!open) return null
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm" onClick={onClose}>
-      <div className="w-full max-w-3xl rounded-2xl bg-gray-900 border border-white/10 shadow-2xl max-h-[90vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
-        <div className="px-6 py-4 border-b border-white/5 flex items-center justify-between shrink-0">
-          <h3 className="font-semibold">이미지 선택</h3>
-          <button onClick={onClose} className="text-gray-500 hover:text-white transition text-xl leading-none">×</button>
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
+      style={{ background: 'var(--dialog-backdrop)' }}
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-3xl rounded-2xl border shadow-2xl max-h-[90vh] flex flex-col"
+        style={{
+          backgroundImage: 'linear-gradient(to bottom, var(--dialog-bg-from), var(--dialog-bg-to))',
+          borderColor: 'var(--dialog-border)',
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          className="px-6 py-4 border-b flex items-center justify-between shrink-0"
+          style={{ borderColor: 'var(--panel-border)' }}
+        >
+          <h3 className="font-semibold" style={{ color: 'var(--text-strong)' }}>이미지 선택</h3>
+          <button
+            onClick={onClose}
+            className="text-xl leading-none hover:bg-[var(--row-hover-bg)] w-7 h-7 rounded flex items-center justify-center"
+            style={{ color: 'var(--text-dim)' }}
+          >
+            ×
+          </button>
         </div>
 
         {/* 검색 */}
@@ -63,9 +80,14 @@ export default function ImagePicker({ open, onClose, onSelect, currentImageId })
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               placeholder="이미지 이름으로 검색..."
-              className="w-full rounded-lg border border-white/10 bg-gray-950 pl-10 pr-4 py-2.5 text-sm outline-none focus:border-emerald-500/50 transition"
+              className="w-full rounded-lg border pl-10 pr-4 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)',
+                color: 'var(--text-strong)',
+              }}
             />
-            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">🔍</span>
+            <span className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: 'var(--input-icon)' }}>🔍</span>
           </div>
         </div>
 
@@ -74,55 +96,84 @@ export default function ImagePicker({ open, onClose, onSelect, currentImageId })
           {isLoading ? (
             <div className="grid gap-3 grid-cols-3 sm:grid-cols-4 lg:grid-cols-6">
               {Array.from({ length: 12 }).map((_, i) => (
-                <div key={i} className="aspect-square rounded-lg bg-white/[0.02] animate-pulse" />
+                <div
+                  key={i}
+                  className="aspect-square rounded-lg animate-pulse"
+                  style={{ background: 'var(--skeleton-bg)' }}
+                />
               ))}
             </div>
           ) : images.length === 0 ? (
-            <div className="py-12 text-center text-gray-500 text-sm">
+            <div className="py-12 text-center text-sm" style={{ color: 'var(--text-dim)' }}>
               {debouncedSearch ? '검색 결과가 없습니다' : '업로드된 이미지가 없습니다'}
             </div>
           ) : (
             <div className="grid gap-3 grid-cols-3 sm:grid-cols-4 lg:grid-cols-6">
-              {images.map((image) => (
-                <button
-                  key={image.id}
-                  type="button"
-                  onClick={() => { onSelect(image); onClose() }}
-                  className={`group rounded-lg border overflow-hidden transition ${
-                    currentImageId === image.id
-                      ? 'border-emerald-500/60 ring-2 ring-emerald-500/30'
-                      : 'border-white/5 hover:border-white/20'
-                  }`}
-                  title={image.name}
-                >
-                  <div className="aspect-square bg-gradient-to-br from-gray-900 to-gray-950 flex items-center justify-center p-3">
-                    <img src={image.url} alt={image.name} className="max-w-full max-h-full object-contain" />
-                  </div>
-                  <div className="px-2 py-1.5 border-t border-white/5 bg-gray-950/50">
-                    <div className="text-xs truncate">{image.name}</div>
-                  </div>
-                </button>
-              ))}
+              {images.map((image) => {
+                const isSelected = currentImageId === image.id
+                return (
+                  <button
+                    key={image.id}
+                    type="button"
+                    onClick={() => { onSelect(image); onClose() }}
+                    className="group rounded-lg border overflow-hidden"
+                    style={{
+                      borderColor: isSelected ? 'var(--selected-border)' : 'var(--panel-border)',
+                      boxShadow: isSelected ? '0 0 0 2px var(--ring-info)' : undefined,
+                    }}
+                    title={image.name}
+                  >
+                    <div
+                      className="aspect-square flex items-center justify-center p-3"
+                      style={{ backgroundImage: 'linear-gradient(to bottom right, var(--icon-box-from), var(--icon-box-to))' }}
+                    >
+                      <img src={image.url} alt={image.name} className="max-w-full max-h-full object-contain" />
+                    </div>
+                    <div
+                      className="px-2 py-1.5 border-t"
+                      style={{
+                        borderColor: 'var(--panel-border)',
+                        background: 'var(--surface-3)',
+                      }}
+                    >
+                      <div className="text-xs truncate">{image.name}</div>
+                    </div>
+                  </button>
+                )
+              })}
             </div>
           )}
         </div>
 
         {/* 페이지네이션 + 액션 */}
-        <div className="px-6 py-4 border-t border-white/5 flex items-center justify-between shrink-0 gap-3">
+        <div
+          className="px-6 py-4 border-t flex items-center justify-between shrink-0 gap-3"
+          style={{ borderColor: 'var(--panel-border)' }}
+        >
           {totalPages > 1 ? (
             <div className="flex items-center gap-1">
               <button
                 onClick={() => setPage((p) => Math.max(1, p - 1))}
                 disabled={page === 1}
-                className="w-8 h-8 rounded border border-white/10 hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center text-sm"
+                className="w-8 h-8 rounded border hover:bg-[var(--btn-bg-hover)] disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center text-sm"
+                style={{
+                  background: 'var(--btn-bg)',
+                  borderColor: 'var(--btn-border)',
+                  color: 'var(--text-emphasis)',
+                }}
               >
                 ‹
               </button>
-              <span className="text-xs text-gray-400 px-2">{page} / {totalPages}</span>
+              <span className="text-xs px-2" style={{ color: 'var(--text-muted)' }}>{page} / {totalPages}</span>
               <button
                 onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                 disabled={page === totalPages}
-                className="w-8 h-8 rounded border border-white/10 hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center text-sm"
+                className="w-8 h-8 rounded border hover:bg-[var(--btn-bg-hover)] disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center text-sm"
+                style={{
+                  background: 'var(--btn-bg)',
+                  borderColor: 'var(--btn-border)',
+                  color: 'var(--text-emphasis)',
+                }}
               >
                 ›
               </button>
@@ -133,7 +184,8 @@ export default function ImagePicker({ open, onClose, onSelect, currentImageId })
             <button
               type="button"
               onClick={() => { onSelect(null); onClose() }}
-              className="text-sm text-red-400 hover:text-red-300 transition"
+              className="text-sm hover:text-[var(--danger-text-strong)]"
+              style={{ color: 'var(--danger-text)' }}
             >
               이미지 제거
             </button>

frontend/src/features/boss-crystal/BossCrystal.jsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useLayoutEffect } from 'react'
 import { useQuery, useQueries } from '@tanstack/react-query'
 import { api } from '../../api/client'
 import { useLayout } from '../../components/Layout'
@@ -21,7 +21,7 @@ export default function BossCrystal() {
 
   // 풀스크린 모드 (푸터 숨김 + 내부 스크롤)
   const { setFullscreen } = useLayout()
-  useEffect(() => {
+  useLayoutEffect(() => {
     setFullscreen(true)
     return () => setFullscreen(false)
   }, [setFullscreen])

frontend/src/features/boss-crystal/admin/BossForm.jsx

@@ -5,6 +5,7 @@ import { api } from '../../../api/client'
 import ConfirmDialog from '../../../components/ConfirmDialog'
 import Checkbox from '../../../components/Checkbox'
 import Select from '../../../components/Select'
+import { useAuthStore } from '../../../stores/auth'
 import { DIFFICULTIES, formatMeso, getDifficultyImageUrl } from './constants'
 
 const PARTY_OPTIONS = [1, 2, 3, 4, 5, 6].map((n) => ({ value: n, label: `${n}인` }))
@@ -13,18 +14,23 @@ function Field({ label, hint, error, required, children }) {
   return (
     <div className="space-y-1.5">
       <div className="flex items-baseline justify-between">
-        <label className="text-sm font-medium text-gray-300">
-          {label} {required && <span className="text-red-400">*</span>}
+        <label className="text-sm font-medium" style={{ color: 'var(--text-emphasis)' }}>
+          {label} {required && <span style={{ color: 'var(--danger-text)' }}>*</span>}
         </label>
-        {hint && <span className="text-xs text-gray-500">{hint}</span>}
+        {hint && <span className="text-xs" style={{ color: 'var(--text-dim)' }}>{hint}</span>}
       </div>
       {children}
-      {error && <div className="text-[11px] text-red-400">{error}</div>}
+      {error && <div className="text-[11px]" style={{ color: 'var(--danger-text)' }}>{error}</div>}
     </div>
   )
 }
 
-const inputCls = 'w-full rounded-lg border border-white/10 bg-gray-950 px-3 py-2 text-sm outline-none focus:border-emerald-500/50 transition'
+const inputCls = 'w-full rounded-lg border px-3 py-2 text-sm outline-none focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]'
+const inputStyle = {
+  background: 'var(--input-bg)',
+  borderColor: 'var(--input-border)',
+  color: 'var(--text-strong)',
+}
 
 function emptyDifficultyState() {
   const obj = {}
@@ -134,7 +140,7 @@ export default function BossForm() {
         }))
       formData.append('difficulties', JSON.stringify(diffsPayload))
 
-      const adminKey = localStorage.getItem('maple-admin-key')
+      const adminKey = useAuthStore.getState().apiKey
       const url = isEdit
         ? `/api/admin/boss-crystal/bosses/${id}`
         : '/api/admin/boss-crystal/bosses'
@@ -174,13 +180,21 @@ export default function BossForm() {
   const displayImage = imagePreview || existingImageUrl
 
   return (
-    <div className="space-y-6 max-w-2xl mx-auto">
+    <div className="space-y-6 max-w-2xl mx-auto pt-6">
       <div>
-        <h2 className="text-lg font-semibold">{isEdit ? '보스 편집' : '보스 추가'}</h2>
-        <p className="text-sm text-gray-500 mt-0.5">보스 이름과 난이도별 결정 정보를 입력합니다</p>
+        <h2 className="text-lg font-medium">{isEdit ? '보스 편집' : '보스 추가'}</h2>
+        <p className="text-sm mt-0.5" style={{ color: 'var(--text-dim)' }}>보스 이름과 난이도별 결정 정보를 입력합니다</p>
       </div>
 
-      <form onSubmit={handleSubmit} className="space-y-5 rounded-2xl border border-white/5 bg-gray-900/40 p-6">
+      <form
+        onSubmit={handleSubmit}
+        className="space-y-5 rounded-2xl border p-6"
+        style={{
+          background: 'var(--panel-bg)',
+          borderColor: 'var(--panel-border)',
+          boxShadow: 'var(--panel-shadow)',
+        }}
+      >
         {/* 이름 + 최대 인원 */}
         <div className="grid grid-cols-[1fr_auto] gap-3">
           <Field label="보스 이름" required error={errors.name}>
@@ -190,6 +204,7 @@ export default function BossForm() {
               onChange={(e) => setName(e.target.value)}
               placeholder="예: 검은 마법사"
               className={inputCls}
+              style={inputStyle}
             />
           </Field>
           <Field label="최대 인원">
@@ -205,26 +220,32 @@ export default function BossForm() {
         {/* 이미지 */}
         <Field label="보스 이미지" required={!isEdit} error={errors.image}>
           <label
-            className={`flex items-center gap-4 rounded-xl border-2 border-dashed bg-gray-950/50 p-4 transition cursor-pointer ${
-              errors.image
-                ? 'border-red-500/40'
-                : 'border-white/10 hover:border-emerald-500/40 hover:bg-emerald-500/5'
-            }`}
+            className="flex items-center gap-4 rounded-xl border-2 border-dashed p-4 cursor-pointer hover:border-[var(--selected-border)]"
+            style={{
+              background: 'var(--surface-3)',
+              borderColor: errors.image ? 'var(--icon-danger-border)' : 'var(--dashed-border)',
+            }}
           >
-            <div className="w-32 h-32 rounded-lg bg-gray-900 border border-white/5 flex items-center justify-center overflow-hidden shrink-0">
+            <div
+              className="w-32 h-32 rounded-lg border flex items-center justify-center overflow-hidden shrink-0"
+              style={{
+                background: 'var(--surface-nested)',
+                borderColor: 'var(--panel-border)',
+              }}
+            >
               {displayImage ? (
                 <img src={displayImage} alt="" className="w-full h-full object-cover" />
               ) : (
-                <span className="text-5xl text-gray-700">+</span>
+                <span className="text-5xl" style={{ color: 'var(--text-dim)' }}>+</span>
               )}
             </div>
             <div className="flex-1 min-w-0">
-              <div className="text-sm font-medium text-gray-300">
+              <div className="text-sm font-medium" style={{ color: 'var(--text-emphasis)' }}>
                 {displayImage ? '클릭하여 이미지 변경' : '클릭하여 이미지 업로드'}
               </div>
-              <p className="text-xs text-gray-500 mt-1">PNG, JPG, GIF 등 → WebP로 자동 변환됩니다</p>
+              <p className="text-xs mt-1" style={{ color: 'var(--text-dim)' }}>PNG, JPG, GIF 등 → WebP로 자동 변환됩니다</p>
               {imageFile && (
-                <div className="text-xs text-emerald-400 mt-2 truncate">📎 {imageFile.name}</div>
+                <div className="text-xs mt-2 truncate" style={{ color: 'var(--accent-bright)' }}>📎 {imageFile.name}</div>
               )}
             </div>
             <input
@@ -246,12 +267,14 @@ export default function BossForm() {
               return (
                 <div
                   key={d.key}
-                  className={`rounded-lg border bg-gray-950/50 p-3 transition ${
-                    v.enabled ? 'border-white/10' : 'border-white/5 opacity-60'
-                  }`}
+                  className="rounded-lg border p-3"
+                  style={{
+                    background: 'var(--surface-3)',
+                    borderColor: 'var(--panel-border)',
+                    opacity: v.enabled ? 1 : 0.6,
+                  }}
                 >
                   <div className="flex items-center gap-3">
-                    {/* 체크박스 + 난이도 이미지 (이미지 클릭으로도 토글 가능) */}
                     <div
                       className="flex items-center gap-2.5 shrink-0 cursor-pointer select-none"
                       onClick={() => updateDifficulty(d.key, { enabled: !v.enabled })}
@@ -269,7 +292,6 @@ export default function BossForm() {
                       />
                     </div>
 
-                    {/* 가격 */}
                     <div className="flex-1 min-w-0">
                       <div className="relative">
                         <input
@@ -282,12 +304,18 @@ export default function BossForm() {
                           }}
                           disabled={!v.enabled}
                           placeholder="결정 가격"
-                          className={`w-full rounded-lg border bg-gray-900 pl-4 pr-28 py-2 text-sm outline-none focus:border-emerald-500/50 disabled:opacity-50 disabled:cursor-not-allowed transition ${
-                            priceErr ? 'border-red-500/40' : 'border-white/10'
-                          }`}
+                          className="w-full rounded-lg border pl-4 pr-28 py-2 text-sm outline-none focus:border-[var(--input-border-focus)] disabled:opacity-50 disabled:cursor-not-allowed"
+                          style={{
+                            background: 'var(--input-bg)',
+                            borderColor: priceErr ? 'var(--icon-danger-border)' : 'var(--input-border)',
+                            color: 'var(--text-strong)',
+                          }}
                         />
                         {v.crystal_price && v.enabled && (
-                          <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-emerald-400/80 pointer-events-none whitespace-nowrap">
+                          <span
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-sm pointer-events-none whitespace-nowrap"
+                            style={{ color: 'var(--accent-bright)' }}
+                          >
                             {formatMeso(Number(v.crystal_price))}
                           </span>
                         )}
@@ -300,13 +328,16 @@ export default function BossForm() {
           </div>
         </Field>
 
-        {/* 버튼 */}
         <div className="flex items-center gap-2 pt-2">
           {isEdit && (
             <button
               type="button"
               onClick={() => setConfirmDelete(true)}
-              className="rounded-lg border border-red-500/30 text-red-400 hover:bg-red-500/10 hover:border-red-500/50 px-4 py-2.5 text-sm transition"
+              className="rounded-lg border px-4 py-2.5 text-sm hover:bg-[var(--danger-bg-hover)]"
+              style={{
+                borderColor: 'var(--icon-danger-border)',
+                color: 'var(--danger-text)',
+              }}
             >
               삭제
             </button>
@@ -315,14 +346,24 @@ export default function BossForm() {
           <button
             type="button"
             onClick={() => navigate('..')}
-            className="rounded-lg border border-white/10 px-5 py-2.5 text-sm hover:bg-white/5 transition"
+            className="rounded-lg border px-5 py-2.5 text-sm hover:bg-[var(--btn-bg-hover)]"
+            style={{
+              background: 'var(--btn-bg)',
+              borderColor: 'var(--btn-border)',
+              color: 'var(--text-emphasis)',
+            }}
           >
             취소
           </button>
           <button
             type="submit"
             disabled={saveMutation.isPending}
-            className="rounded-lg bg-emerald-600 hover:bg-emerald-500 px-5 py-2.5 text-sm font-medium disabled:opacity-50 transition shadow-lg shadow-emerald-500/20"
+            className="rounded-lg px-5 py-2.5 text-sm font-medium disabled:opacity-50 hover:bg-[var(--btn-primary-bg-hover)]"
+            style={{
+              background: 'var(--btn-primary-bg)',
+              color: 'var(--btn-primary-text)',
+              boxShadow: 'var(--btn-primary-shadow)',
+            }}
           >
             {saveMutation.isPending ? '저장 중...' : (isEdit ? '저장' : '추가')}
           </button>

frontend/src/features/boss-crystal/admin/BossList.jsx

@@ -16,13 +16,16 @@ import { DIFFICULTIES, formatMeso, getDifficultyBadgeStyle } from './constants'
 
 function BossCardContent({ boss, dragging = false }) {
   return (
-    <div className={`flex items-stretch rounded-2xl border bg-gradient-to-br from-gray-900/80 to-gray-900/40 ${
-      dragging
-        ? 'border-emerald-500/60 shadow-2xl shadow-emerald-500/30'
-        : 'border-white/5'
-    }`}>
+    <div
+      className="flex items-stretch rounded-2xl border"
+      style={{
+        backgroundImage: 'linear-gradient(to bottom right, var(--card-bg-from), var(--card-bg-to))',
+        borderColor: dragging ? 'var(--selected-border)' : 'var(--card-border)',
+        boxShadow: dragging ? '0 12px 32px rgba(16, 185, 129, 0.25)' : 'var(--card-shadow)',
+      }}
+    >
       {/* 핸들 자리 */}
-      <div className="flex items-center px-2 text-gray-700 cursor-grab active:cursor-grabbing">
+      <div className="flex items-center px-2 cursor-grab active:cursor-grabbing" style={{ color: 'var(--text-dim)' }}>
         <svg width="14" height="20" viewBox="0 0 14 20" fill="currentColor">
           <circle cx="4" cy="4" r="1.5" />
           <circle cx="10" cy="4" r="1.5" />
@@ -34,13 +37,19 @@ function BossCardContent({ boss, dragging = false }) {
       </div>
 
       <div className="flex-1 min-w-0 flex items-start gap-3 p-4 pl-2">
-        <div className="shrink-0 w-14 h-14 rounded-xl bg-gradient-to-br from-gray-800 to-gray-900 border border-white/5 flex items-center justify-center overflow-hidden">
+        <div
+          className="shrink-0 w-14 h-14 rounded-xl border flex items-center justify-center overflow-hidden"
+          style={{
+            backgroundImage: 'linear-gradient(to bottom right, var(--icon-box-from), var(--icon-box-to))',
+            borderColor: 'var(--icon-box-border)',
+          }}
+        >
           <img src={boss.image_url || '/default.png'} alt={boss.name} className="w-full h-full object-cover" />
         </div>
         <div className="flex-1 min-w-0">
           <div className="flex items-baseline gap-2">
-            <h3 className="font-semibold truncate">{boss.name}</h3>
-            <span className="text-xs text-gray-500 shrink-0">최대 {boss.max_party_size}인</span>
+            <h3 className="font-medium truncate">{boss.name}</h3>
+            <span className="text-xs shrink-0" style={{ color: 'var(--text-dim)' }}>최대 {boss.max_party_size}인</span>
           </div>
           <div className="flex flex-wrap gap-1 mt-2">
             {DIFFICULTIES.filter((d) => boss.difficulties?.some((bd) => bd.difficulty === d.key)).map((d) => {
@@ -80,17 +89,15 @@ function SortableBossCard({ boss }) {
       style={style}
       className={`relative ${isDragging ? 'opacity-30' : ''}`}
     >
-      {/* 드래그 핸들 (좌측) */}
       <button
         type="button"
         ref={setActivatorNodeRef}
         {...attributes}
         {...listeners}
-        className="absolute left-0 top-0 bottom-0 w-8 z-10 cursor-grab active:cursor-grabbing rounded-l-2xl hover:bg-white/5 transition touch-none"
+        className="absolute left-0 top-0 bottom-0 w-8 z-10 cursor-grab active:cursor-grabbing rounded-l-2xl hover:bg-[var(--row-hover-bg)] transition touch-none"
         aria-label="순서 변경"
       />
-      {/* 카드 본체 - Link */}
-      <Link to={`bosses/${boss.id}`} className="block group hover:[&_h3]:text-emerald-300 [&_h3]:transition">
+      <Link to={`bosses/${boss.id}`} className="block group hover:[&_h3]:text-[var(--accent-hover-text)] [&_h3]:transition">
         <BossCardContent boss={boss} />
       </Link>
     </div>
@@ -143,15 +150,20 @@ export default function BossList() {
   const activeBoss = items.find((b) => b.id === activeId)
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 max-w-5xl mx-auto pt-6">
       <div className="flex items-end justify-between gap-4 flex-wrap">
         <div>
-          <h2 className="text-lg font-semibold">보스 결정 관리</h2>
-          <p className="text-sm text-gray-500 mt-0.5">보스 정보 및 난이도별 결정 가격을 관리합니다</p>
+          <h2 className="text-lg font-medium">보스 결정 관리</h2>
+          <p className="text-sm mt-0.5" style={{ color: 'var(--text-dim)' }}>보스 정보 및 난이도별 결정 가격을 관리합니다</p>
         </div>
         <Link
           to="bosses/new"
-          className="flex items-center gap-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 px-4 py-2 text-sm font-medium transition shadow-lg shadow-emerald-500/20"
+          className="flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium hover:bg-[var(--btn-primary-bg-hover)]"
+          style={{
+            background: 'var(--btn-primary-bg)',
+            color: 'var(--btn-primary-text)',
+            boxShadow: 'var(--btn-primary-shadow)',
+          }}
         >
           <span className="text-base leading-none">+</span>
           보스 추가
@@ -161,14 +173,24 @@ export default function BossList() {
       {isLoading ? (
         <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
           {Array.from({ length: 4 }).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" style={{ background: 'var(--skeleton-bg)' }} />
           ))}
         </div>
       ) : items.length === 0 ? (
-        <div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] p-16 text-center">
+        <div
+          className="rounded-2xl border border-dashed p-16 text-center"
+          style={{
+            borderColor: 'var(--dashed-border)',
+            background: 'var(--skeleton-bg)',
+          }}
+        >
           <div className="text-5xl mb-3 opacity-30">⚔️</div>
-          <p className="text-gray-400 mb-4">등록된 보스가 없습니다</p>
-          <Link to="bosses/new" className="text-sm text-emerald-400 hover:text-emerald-300 transition">
+          <p className="mb-4" style={{ color: 'var(--text-muted)' }}>등록된 보스가 없습니다</p>
+          <Link
+            to="bosses/new"
+            className="text-sm hover:text-[var(--accent-hover-text)]"
+            style={{ color: 'var(--accent)' }}
+          >
             첫 보스 추가하기 →
           </Link>
         </div>

frontend/src/features/boss-crystal/user/CharacterPanel.jsx

@@ -5,6 +5,7 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 import { api } from '../../../api/client'
 import ConfirmDialog from '../../../components/ConfirmDialog'
 import Tooltip from '../../../components/Tooltip'
+import CharacterSuggestDropdown from '../../../components/CharacterSuggestDropdown'
 import { useFitText } from '../../../hooks/useFitText'
 import { DIFFICULTIES, formatMeso, getDifficultyBadgeStyle } from '../admin/constants'
 
@@ -198,6 +199,7 @@ export default function CharacterPanel({
   const [name, setName] = useState('')
   const [error, setError] = useState('')
   const [confirmRemove, setConfirmRemove] = useState(null)
+  const [dropdownOpen, setDropdownOpen] = useState(false)
 
   const searchMutation = useMutation({
     mutationFn: (n) => api(`/api/character/search?name=${encodeURIComponent(n)}`),
@@ -331,6 +333,8 @@ export default function CharacterPanel({
               type="text"
               value={name}
               onChange={(e) => { setName(e.target.value); if (error) setError('') }}
+              onFocus={() => setDropdownOpen(true)}
+              onBlur={() => setTimeout(() => setDropdownOpen(false), 150)}
               placeholder="캐릭터 닉네임 검색"
               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={{
@@ -339,6 +343,17 @@ export default function CharacterPanel({
                 color: 'var(--text-strong)',
               }}
             />
+            <CharacterSuggestDropdown
+              open={dropdownOpen}
+              filter={name}
+              excludeNames={characters.map((c) => c.character_name)}
+              onSelect={(n) => {
+                setName(n)
+                setDropdownOpen(false)
+                setError('')
+                searchMutation.mutate(n)
+              }}
+            />
           </div>
           <button
             type="submit"

frontend/src/features/liberation/Liberation.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useLayoutEffect } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import dayjs from 'dayjs'
 import { api } from '../../api/client'
@@ -62,7 +62,7 @@ function calcMonthlyEarn(weekData) {
 
 export default function Liberation() {
   const { setFullscreen } = useLayout()
-  useEffect(() => {
+  useLayoutEffect(() => {
     setFullscreen(true)
     return () => setFullscreen(false)
   }, [setFullscreen])

frontend/src/features/symbol/Symbol.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect, useLayoutEffect, useMemo } from 'react'
 import { useQuery, useQueries, useMutation } from '@tanstack/react-query'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
@@ -7,6 +7,7 @@ import { api } from '../../api/client'
 import { useLayout } from '../../components/Layout'
 import Select from '../../components/Select'
 import Tooltip from '../../components/Tooltip'
+import CharacterSuggestDropdown from '../../components/CharacterSuggestDropdown'
 import { useSymbolStore } from './store'
 
 dayjs.extend(utc)
@@ -370,7 +371,7 @@ function SymbolCard({ symbol, equipped, charId }) {
 
 export default function Symbol() {
   const { setFullscreen } = useLayout()
-  useEffect(() => {
+  useLayoutEffect(() => {
     setFullscreen(true)
     return () => setFullscreen(false)
   }, [setFullscreen])
@@ -469,6 +470,7 @@ export default function Symbol() {
 
   const [addName, setAddName] = useState('')
   const [addError, setAddError] = useState('')
+  const [dropdownOpen, setDropdownOpen] = useState(false)
 
   const symbols = allSymbols.filter((s) => s.type === tab)
   const tabInfo = tabs.find((t) => t.key === tab)
@@ -570,6 +572,8 @@ export default function Symbol() {
               type="text"
               value={addName}
               onChange={(e) => { setAddName(e.target.value); if (addError) setAddError('') }}
+              onFocus={() => setDropdownOpen(true)}
+              onBlur={() => setTimeout(() => setDropdownOpen(false), 150)}
               placeholder="캐릭터 닉네임으로 장착 심볼 불러오기"
               className="w-full h-12 box-border rounded-lg border pl-10 pr-4 text-base outline-none focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]"
               style={{
@@ -578,6 +582,17 @@ export default function Symbol() {
                 color: 'var(--text-strong)',
               }}
             />
+            <CharacterSuggestDropdown
+              open={dropdownOpen}
+              filter={addName}
+              excludeNames={characters.map((c) => c.character_name)}
+              onSelect={(n) => {
+                setAddName(n)
+                setDropdownOpen(false)
+                setAddError('')
+                searchMutation.mutate(n)
+              }}
+            />
           </div>
           <button
             type="submit"

frontend/src/features/symbol/admin/SymbolForm.jsx

@@ -4,6 +4,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { api } from '../../../api/client'
 import Select from '../../../components/Select'
 import ConfirmDialog from '../../../components/ConfirmDialog'
+import { useAuthStore } from '../../../stores/auth'
 
 const TYPE_OPTIONS = [
   { value: '아케인', label: '아케인' },
@@ -11,7 +12,12 @@ const TYPE_OPTIONS = [
   { value: '그랜드 어센틱', label: '그랜드 어센틱' },
 ]
 
-const inputCls = 'w-full rounded-lg border border-white/10 bg-gray-950 px-3 py-2 text-sm outline-none focus:border-emerald-500/50 transition'
+const inputCls = 'w-full rounded-lg border px-3 py-2 text-sm outline-none focus:border-[var(--input-border-focus)] hover:border-[var(--input-border-hover)]'
+const inputStyle = {
+  background: 'var(--input-bg)',
+  borderColor: 'var(--input-border)',
+  color: 'var(--text-strong)',
+}
 
 function formatMesoKorean(n) {
   if (!n || n <= 0) return ''
@@ -38,9 +44,15 @@ function MesoInput({ value, onChange, ...rest }) {
           onChange(digits)
         }}
         className={`${inputCls} tabular-nums text-right`}
+        style={inputStyle}
         {...rest}
       />
-      <div className="text-sm text-amber-300 mt-1 text-right tabular-nums min-h-[18px]">{korean || '\u00A0'}</div>
+      <div
+        className="text-sm mt-1 text-right tabular-nums min-h-[18px]"
+        style={{ color: 'var(--warning-text-bright)' }}
+      >
+        {korean || '\u00A0'}
+      </div>
     </div>
   )
 }
@@ -49,13 +61,13 @@ function Field({ label, hint, error, required, children }) {
   return (
     <div className="space-y-1.5">
       <div className="flex items-baseline justify-between">
-        <label className="text-sm font-medium text-gray-300">
-          {label} {required && <span className="text-red-400">*</span>}
+        <label className="text-sm font-medium" style={{ color: 'var(--text-emphasis)' }}>
+          {label} {required && <span style={{ color: 'var(--danger-text)' }}>*</span>}
         </label>
-        {hint && <span className="text-xs text-gray-500">{hint}</span>}
+        {hint && <span className="text-xs" style={{ color: 'var(--text-dim)' }}>{hint}</span>}
       </div>
       {children}
-      {error && <div className="text-[11px] text-red-400">{error}</div>}
+      {error && <div className="text-[11px]" style={{ color: 'var(--danger-text)' }}>{error}</div>}
     </div>
   )
 }
@@ -79,7 +91,6 @@ export default function SymbolForm() {
   const [confirmDelete, setConfirmDelete] = useState(false)
   const [error, setError] = useState('')
 
-  // 편집 시 데이터 로드
   const { data: symbolData } = useQuery({
     queryKey: ['admin', 'symbol', 'symbols', id],
     queryFn: () => api(`/api/admin/symbol/symbols/${id}`),
@@ -148,7 +159,7 @@ export default function SymbolForm() {
       ))
       if (imageFile) formData.append('image', imageFile)
 
-      const adminKey = localStorage.getItem('maple-admin-key')
+      const adminKey = useAuthStore.getState().apiKey
       const url = isEdit ? `/api/admin/symbol/symbols/${id}` : '/api/admin/symbol/symbols'
       const res = await fetch(url, {
         method: isEdit ? 'PATCH' : 'POST',
@@ -188,33 +199,51 @@ export default function SymbolForm() {
 
   const displayImage = imagePreview || existingImageUrl
 
+  const panelStyle = {
+    background: 'var(--panel-bg)',
+    borderColor: 'var(--panel-border)',
+    boxShadow: 'var(--panel-shadow)',
+  }
+
   return (
-    <div className="max-w-2xl mx-auto space-y-6">
+    <div className="max-w-2xl mx-auto space-y-6 pt-6">
       <div>
-        <h2 className="text-lg font-semibold">{isEdit ? '심볼 편집' : '심볼 추가'}</h2>
-        <p className="text-sm text-gray-500 mt-0.5">심볼 정보와 레벨별 필요 개수/메소를 입력합니다</p>
+        <h2 className="text-lg font-medium">{isEdit ? '심볼 편집' : '심볼 추가'}</h2>
+        <p className="text-sm mt-0.5" style={{ color: 'var(--text-dim)' }}>심볼 정보와 레벨별 필요 개수/메소를 입력합니다</p>
       </div>
 
       {/* 기본 정보 */}
-      <div className="rounded-2xl border border-white/5 bg-gray-900/40 p-6 space-y-5">
-        <div className="text-sm font-semibold text-emerald-300">기본 정보</div>
+      <div className="rounded-2xl border p-6 space-y-5" style={panelStyle}>
+        <div className="text-sm font-semibold" style={{ color: 'var(--accent-bright)' }}>기본 정보</div>
 
         <Field label="심볼 이미지" required={!isEdit}>
-          <label className="flex items-center gap-4 rounded-xl border-2 border-dashed border-white/10 hover:border-emerald-500/40 hover:bg-emerald-500/5 bg-gray-950/50 p-4 transition cursor-pointer">
-            <div className="w-32 h-32 rounded-lg bg-gray-900 border border-white/5 flex items-center justify-center overflow-hidden shrink-0">
+          <label
+            className="flex items-center gap-4 rounded-xl border-2 border-dashed p-4 cursor-pointer hover:border-[var(--selected-border)]"
+            style={{
+              background: 'var(--surface-3)',
+              borderColor: 'var(--dashed-border)',
+            }}
+          >
+            <div
+              className="w-32 h-32 rounded-lg border flex items-center justify-center overflow-hidden shrink-0"
+              style={{
+                background: 'var(--surface-nested)',
+                borderColor: 'var(--panel-border)',
+              }}
+            >
               {displayImage ? (
                 <img src={displayImage} alt="" className="w-full h-full object-contain" style={{ imageRendering: 'pixelated' }} />
               ) : (
-                <span className="text-5xl text-gray-700">+</span>
+                <span className="text-5xl" style={{ color: 'var(--text-dim)' }}>+</span>
               )}
             </div>
             <div className="flex-1 min-w-0">
-              <div className="text-sm font-medium text-gray-300">
+              <div className="text-sm font-medium" style={{ color: 'var(--text-emphasis)' }}>
                 {displayImage ? '클릭하여 이미지 변경' : '클릭하여 이미지 업로드'}
               </div>
-              <p className="text-xs text-gray-500 mt-1">PNG, JPG, GIF 등 → WebP로 자동 변환됩니다</p>
+              <p className="text-xs mt-1" style={{ color: 'var(--text-dim)' }}>PNG, JPG, GIF 등 → WebP로 자동 변환됩니다</p>
               {imageFile && (
-                <div className="text-xs text-emerald-400 mt-2 truncate">📎 {imageFile.name}</div>
+                <div className="text-xs mt-2 truncate" style={{ color: 'var(--accent-bright)' }}>📎 {imageFile.name}</div>
               )}
             </div>
             <input ref={fileInputRef} type="file" accept="image/*" onChange={handleFile} className="hidden" />
@@ -232,6 +261,7 @@ export default function SymbolForm() {
                   value={region}
                   onChange={(e) => setRegion(e.target.value)}
                   className={inputCls}
+                  style={inputStyle}
                   placeholder="소멸의 여로"
                 />
               </Field>
@@ -244,6 +274,7 @@ export default function SymbolForm() {
                   value={maxLevel}
                   onChange={(e) => { setMaxLevel(e.target.value); adjustLevelRows(e.target.value) }}
                   className={inputCls}
+                  style={inputStyle}
                   min="2"
                 />
               </Field>
@@ -253,6 +284,7 @@ export default function SymbolForm() {
                   value={dailyDefault}
                   onChange={(e) => setDailyDefault(e.target.value)}
                   className={inputCls}
+                  style={inputStyle}
                 />
               </Field>
               <Field label="기본 주간퀘 획득량">
@@ -261,35 +293,35 @@ export default function SymbolForm() {
                   value={weeklyDefault}
                   onChange={(e) => setWeeklyDefault(e.target.value)}
                   className={inputCls}
+                  style={inputStyle}
                 />
               </Field>
             </div>
-
-          </div>
+        </div>
       </div>
 
       {/* 레벨별 설정 */}
-      <div className="rounded-2xl border border-white/5 bg-gray-900/40 p-6 space-y-4">
+      <div className="rounded-2xl border p-6 space-y-4" style={panelStyle}>
         <div className="flex items-baseline justify-between">
-          <div className="text-sm font-semibold text-emerald-300">레벨별 필요 개수 · 메소</div>
-          <div className="text-xs text-gray-500">레벨 N → N+1 업그레이드 기준 (만렙-1행)</div>
+          <div className="text-sm font-semibold" style={{ color: 'var(--accent-bright)' }}>레벨별 필요 개수 · 메소</div>
+          <div className="text-xs" style={{ color: 'var(--text-dim)' }}>레벨 N → N+1 업그레이드 기준 (만렙-1행)</div>
         </div>
 
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="text-xs text-gray-500 uppercase border-b border-white/5">
+              <tr className="text-xs uppercase border-b" style={{ color: 'var(--text-dim)', borderColor: 'var(--panel-border)' }}>
                 <th className="py-2 px-3 text-left font-medium w-20">레벨</th>
                 <th className="py-2 px-3 text-left font-medium">필요 심볼 수</th>
                 <th className="py-2 px-3 text-left font-medium">메소</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-white/5">
+            <tbody>
               {levels.map((l, idx) => (
-                <tr key={l.level}>
-                  <td className="py-1.5 px-3 text-gray-400 tabular-nums">
-                    Lv.<span className="text-gray-200 font-semibold">{l.level}</span>
-                    <span className="text-gray-600 mx-1">→</span>
+                <tr key={l.level} className="border-t first:border-t-0" style={{ borderColor: 'var(--row-divider)' }}>
+                  <td className="py-1.5 px-3 tabular-nums" style={{ color: 'var(--text-muted)' }}>
+                    Lv.<span className="font-semibold" style={{ color: 'var(--text-emphasis)' }}>{l.level}</span>
+                    <span className="mx-1" style={{ color: 'var(--text-dim)' }}>→</span>
                     {l.level + 1}
                   </td>
                   <td className="py-1.5 px-3">
@@ -298,6 +330,7 @@ export default function SymbolForm() {
                       value={l.required_count}
                       onChange={(e) => updateLevel(idx, 'required_count', e.target.value)}
                       className={`${inputCls} max-w-36`}
+                      style={inputStyle}
                       placeholder="0"
                     />
                   </td>
@@ -324,7 +357,12 @@ export default function SymbolForm() {
             <button
               type="button"
               onClick={() => setConfirmDelete(true)}
-              className="rounded-lg border border-red-500/40 bg-red-500/10 hover:bg-red-500/20 text-red-300 px-4 py-2 text-sm font-medium transition"
+              className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-[var(--danger-bg-hover)]"
+              style={{
+                borderColor: 'var(--icon-danger-border)',
+                background: 'var(--icon-danger-bg)',
+                color: 'var(--danger-text)',
+              }}
             >
               삭제
             </button>
@@ -334,7 +372,12 @@ export default function SymbolForm() {
           <button
             type="button"
             onClick={() => navigate('..')}
-            className="rounded-lg border border-white/10 hover:bg-white/5 text-gray-300 px-4 py-2 text-sm transition"
+            className="rounded-lg border px-4 py-2 text-sm hover:bg-[var(--btn-bg-hover)]"
+            style={{
+              background: 'var(--btn-bg)',
+              borderColor: 'var(--btn-border)',
+              color: 'var(--text-emphasis)',
+            }}
           >
             취소
           </button>
@@ -342,7 +385,12 @@ export default function SymbolForm() {
             type="button"
             onClick={handleSubmit}
             disabled={saveMutation.isPending}
-            className="rounded-lg bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 text-white px-5 py-2 text-sm font-semibold shadow-lg shadow-emerald-500/20 transition"
+            className="rounded-lg px-5 py-2 text-sm font-semibold disabled:opacity-50 hover:bg-[var(--btn-primary-bg-hover)]"
+            style={{
+              background: 'var(--btn-primary-bg)',
+              color: 'var(--btn-primary-text)',
+              boxShadow: 'var(--btn-primary-shadow)',
+            }}
           >
             {saveMutation.isPending ? '저장 중...' : isEdit ? '저장' : '추가'}
           </button>
@@ -350,7 +398,14 @@ export default function SymbolForm() {
       </div>
 
       {error && (
-        <div className="rounded-lg border border-red-500/40 bg-red-500/10 text-red-300 text-sm px-4 py-2">
+        <div
+          className="rounded-lg border text-sm px-4 py-2"
+          style={{
+            borderColor: 'var(--icon-danger-border)',
+            background: 'var(--icon-danger-bg)',
+            color: 'var(--danger-text)',
+          }}
+        >
           {error}
         </div>
       )}

frontend/src/features/symbol/admin/SymbolList.jsx

@@ -12,21 +12,36 @@ import {
 import { CSS } from '@dnd-kit/utilities'
 import { api } from '../../../api/client'
 
-const TYPE_COLOR = {
-  '아케인': { text: 'text-violet-300', bg: 'bg-violet-500/15', border: 'border-violet-500/30' },
-  '어센틱': { text: 'text-sky-300', bg: 'bg-sky-500/15', border: 'border-sky-500/30' },
-  '그랜드 어센틱': { text: 'text-amber-300', bg: 'bg-amber-500/15', border: 'border-amber-500/30' },
+const TYPE_STYLE = {
+  '아케인': {
+    color: 'var(--symbol-arcane-text)',
+    background: 'var(--symbol-arcane-bg)',
+    borderColor: 'var(--symbol-arcane-border)',
+  },
+  '어센틱': {
+    color: 'var(--symbol-authentic-text)',
+    background: 'var(--symbol-authentic-bg)',
+    borderColor: 'var(--symbol-authentic-border)',
+  },
+  '그랜드 어센틱': {
+    color: 'var(--symbol-grand-text)',
+    background: 'var(--symbol-grand-bg)',
+    borderColor: 'var(--symbol-grand-border)',
+  },
 }
 
 function SymbolCardContent({ symbol, dragging = false }) {
-  const color = TYPE_COLOR[symbol.type] || TYPE_COLOR['아케인']
+  const badgeStyle = TYPE_STYLE[symbol.type] || TYPE_STYLE['아케인']
   return (
-    <div className={`flex items-stretch rounded-2xl border bg-gradient-to-br from-gray-900/80 to-gray-900/40 ${
-      dragging
-        ? 'border-emerald-500/60 shadow-2xl shadow-emerald-500/30'
-        : 'border-white/5'
-    }`}>
-      <div className="flex items-center px-2 text-gray-700 cursor-grab active:cursor-grabbing">
+    <div
+      className="flex items-stretch rounded-2xl border"
+      style={{
+        backgroundImage: 'linear-gradient(to bottom right, var(--card-bg-from), var(--card-bg-to))',
+        borderColor: dragging ? 'var(--selected-border)' : 'var(--card-border)',
+        boxShadow: dragging ? '0 12px 32px rgba(16, 185, 129, 0.25)' : 'var(--card-shadow)',
+      }}
+    >
+      <div className="flex items-center px-2 cursor-grab active:cursor-grabbing" style={{ color: 'var(--text-dim)' }}>
         <svg width="14" height="20" viewBox="0 0 14 20" fill="currentColor">
           <circle cx="4" cy="4" r="1.5" /><circle cx="10" cy="4" r="1.5" />
           <circle cx="4" cy="10" r="1.5" /><circle cx="10" cy="10" r="1.5" />
@@ -34,21 +49,30 @@ function SymbolCardContent({ symbol, dragging = false }) {
         </svg>
       </div>
       <div className="flex-1 min-w-0 flex items-start gap-3 p-4 pl-2">
-        <div className="shrink-0 w-14 h-14 rounded-xl bg-gradient-to-br from-gray-800 to-gray-900 border border-white/5 flex items-center justify-center overflow-hidden">
+        <div
+          className="shrink-0 w-14 h-14 rounded-xl border flex items-center justify-center overflow-hidden"
+          style={{
+            backgroundImage: 'linear-gradient(to bottom right, var(--icon-box-from), var(--icon-box-to))',
+            borderColor: 'var(--icon-box-border)',
+          }}
+        >
           {symbol.image_url ? (
             <img src={symbol.image_url} alt="" className="w-12 h-12 object-contain" style={{ imageRendering: 'pixelated' }} />
           ) : (
-            <span className="text-gray-700 text-2xl">?</span>
+            <span className="text-2xl" style={{ color: 'var(--text-dim)' }}>?</span>
           )}
         </div>
         <div className="flex-1 min-w-0">
           <div className="flex items-baseline gap-2 flex-wrap">
-            <h3 className="font-semibold truncate">{symbol.region}</h3>
-            <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded border ${color.text} ${color.bg} ${color.border}`}>
+            <h3 className="font-medium truncate">{symbol.region}</h3>
+            <span
+              className="text-[10px] font-medium px-1.5 py-0.5 rounded border"
+              style={badgeStyle}
+            >
               {symbol.type}
             </span>
           </div>
-          <div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-gray-500 tabular-nums">
+          <div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-0.5 text-xs tabular-nums" style={{ color: 'var(--text-dim)' }}>
             <span>만렙 {symbol.max_level}</span>
             <span>일퀘 {symbol.daily_default}</span>
             <span>주간퀘 {symbol.weekly_default}</span>
@@ -72,10 +96,10 @@ function SortableSymbolCard({ symbol }) {
         ref={setActivatorNodeRef}
         {...attributes}
         {...listeners}
-        className="absolute left-0 top-0 bottom-0 w-8 z-10 cursor-grab active:cursor-grabbing rounded-l-2xl hover:bg-white/5 transition touch-none"
+        className="absolute left-0 top-0 bottom-0 w-8 z-10 cursor-grab active:cursor-grabbing rounded-l-2xl hover:bg-[var(--row-hover-bg)] transition touch-none"
         aria-label="순서 변경"
       />
-      <Link to={`symbols/${symbol.id}`} className="block group hover:[&_h3]:text-emerald-300 [&_h3]:transition">
+      <Link to={`symbols/${symbol.id}`} className="block group hover:[&_h3]:text-[var(--accent-hover-text)] [&_h3]:transition">
         <SymbolCardContent symbol={symbol} />
       </Link>
     </div>
@@ -126,15 +150,20 @@ export default function SymbolList() {
   const activeSymbol = items.find((s) => s.id === activeId)
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 max-w-5xl mx-auto pt-6">
       <div className="flex items-end justify-between gap-4 flex-wrap">
         <div>
-          <h2 className="text-lg font-semibold">심볼 관리</h2>
-          <p className="text-sm text-gray-500 mt-0.5">심볼 정보 및 레벨별 필요 개수/메소를 관리합니다</p>
+          <h2 className="text-lg font-medium">심볼 관리</h2>
+          <p className="text-sm mt-0.5" style={{ color: 'var(--text-dim)' }}>심볼 정보 및 레벨별 필요 개수/메소를 관리합니다</p>
         </div>
         <Link
           to="symbols/new"
-          className="flex items-center gap-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 px-4 py-2 text-sm font-medium transition shadow-lg shadow-emerald-500/20"
+          className="flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium hover:bg-[var(--btn-primary-bg-hover)]"
+          style={{
+            background: 'var(--btn-primary-bg)',
+            color: 'var(--btn-primary-text)',
+            boxShadow: 'var(--btn-primary-shadow)',
+          }}
         >
           <span className="text-base leading-none">+</span>
           심볼 추가
@@ -144,14 +173,24 @@ export default function SymbolList() {
       {isLoading ? (
         <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
           {Array.from({ length: 4 }).map((_, i) => (
-            <div key={i} className="h-24 rounded-2xl bg-white/[0.02] animate-pulse" />
+            <div key={i} className="h-24 rounded-2xl animate-pulse" style={{ background: 'var(--skeleton-bg)' }} />
           ))}
         </div>
       ) : items.length === 0 ? (
-        <div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] p-16 text-center">
+        <div
+          className="rounded-2xl border border-dashed p-16 text-center"
+          style={{
+            borderColor: 'var(--dashed-border)',
+            background: 'var(--skeleton-bg)',
+          }}
+        >
           <div className="text-5xl mb-3 opacity-30">🔮</div>
-          <p className="text-gray-400 mb-4">등록된 심볼이 없습니다</p>
-          <Link to="symbols/new" className="text-sm text-emerald-400 hover:text-emerald-300 transition">
+          <p className="mb-4" style={{ color: 'var(--text-muted)' }}>등록된 심볼이 없습니다</p>
+          <Link
+            to="symbols/new"
+            className="text-sm hover:text-[var(--accent-hover-text)]"
+            style={{ color: 'var(--accent)' }}
+          >
             첫 심볼 추가하기 →
           </Link>
         </div>

frontend/src/index.css

@@ -145,6 +145,16 @@
   --liberation-primary-bar: rgba(167, 139, 250, 0.5);
   --liberation-secondary: #fda4af;
   --liberation-secondary-bar: rgba(253, 164, 175, 0.5);
+
+  --symbol-arcane-text: #c4b5fd;
+  --symbol-arcane-bg: rgba(139, 92, 246, 0.15);
+  --symbol-arcane-border: rgba(139, 92, 246, 0.3);
+  --symbol-authentic-text: #7dd3fc;
+  --symbol-authentic-bg: rgba(14, 165, 233, 0.15);
+  --symbol-authentic-border: rgba(14, 165, 233, 0.3);
+  --symbol-grand-text: #fcd34d;
+  --symbol-grand-bg: rgba(245, 158, 11, 0.15);
+  --symbol-grand-border: rgba(245, 158, 11, 0.3);
 }
 
 /* 테마 토큰 - light */
@@ -286,6 +296,16 @@
   --liberation-primary-bar: rgba(124, 58, 237, 0.5);
   --liberation-secondary: #e11d48;
   --liberation-secondary-bar: rgba(225, 29, 72, 0.5);
+
+  --symbol-arcane-text: #6d28d9;
+  --symbol-arcane-bg: rgba(139, 92, 246, 0.12);
+  --symbol-arcane-border: rgba(109, 40, 217, 0.4);
+  --symbol-authentic-text: #0369a1;
+  --symbol-authentic-bg: rgba(14, 165, 233, 0.12);
+  --symbol-authentic-border: rgba(3, 105, 161, 0.4);
+  --symbol-grand-text: #b45309;
+  --symbol-grand-bg: rgba(245, 158, 11, 0.15);
+  --symbol-grand-border: rgba(180, 83, 9, 0.4);
 }
 
 html, body, #root {

frontend/src/stores/auth.js

@@ -0,0 +1,11 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+export const useAuthStore = create(persist(
+  (set) => ({
+    apiKey: '',
+    setApiKey: (k) => set({ apiKey: k }),
+    clearApiKey: () => set({ apiKey: '' }),
+  }),
+  { name: 'maple-auth' },
+))