refactor: 전체 프론트엔드 하드코딩 색상 → CSS 변수 일괄 치환

447+ 파일, 4500+ 줄 변경:
- gray-* → border/bg-muted/text-foreground/text-muted-foreground
- blue-* → primary/ring
- red-* → destructive
- green-* → emerald (일관성)
- indigo-* → primary
- yellow/orange → amber (통일)
- dark mode 변형도 시맨틱 토큰으로 변환

Made-with: Cursor

frontend/app/(main)/admin/debug-layout/page.tsx

@@ -133,7 +133,7 @@ export default function DebugLayoutPage() {
       <h1 className="mb-4 text-2xl font-bold">관리자 레이아웃 디버깅</h1>
 
       <div className="space-y-4">
-        <div className="rounded bg-green-100 p-4">
+        <div className="rounded bg-emerald-100 p-4">
           <h2 className="mb-2 font-semibold">토큰 상태</h2>
           <p>토큰 존재: {debugInfo.hasToken ? "✅ 예" : "❌ 아니오"}</p>
           <p>토큰 길이: {debugInfo.tokenLength}</p>
@@ -142,14 +142,14 @@ export default function DebugLayoutPage() {
           <p>SessionStorage 토큰: {debugInfo.sessionToken ? "✅ 존재" : "❌ 없음"}</p>
         </div>
 
-        <div className="rounded bg-blue-100 p-4">
+        <div className="rounded bg-primary/10 p-4">
           <h2 className="mb-2 font-semibold">페이지 정보</h2>
           <p>현재 URL: {debugInfo.currentUrl}</p>
           <p>Pathname: {debugInfo.pathname}</p>
           <p>시간: {debugInfo.timestamp}</p>
         </div>
 
-        <div className="rounded bg-yellow-100 p-4">
+        <div className="rounded bg-amber-100 p-4">
           <h2 className="mb-2 font-semibold">토큰 관리</h2>
           <div className="space-x-2">
             <button
@@ -157,11 +157,11 @@ export default function DebugLayoutPage() {
                 const token = localStorage.getItem("authToken");
                 alert(`토큰: ${token ? "존재" : "없음"}\n길이: ${token ? token.length : 0}`);
               }}
-              className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+              className="rounded bg-primary px-4 py-2 text-white hover:bg-primary"
             >
               토큰 확인
             </button>
-            <button onClick={handleTokenSync} className="rounded bg-green-500 px-4 py-2 text-white hover:bg-green-600">
+            <button onClick={handleTokenSync} className="rounded bg-emerald-500 px-4 py-2 text-white hover:bg-emerald-600">
               토큰 동기화
             </button>
             <button
@@ -173,13 +173,13 @@ export default function DebugLayoutPage() {
           </div>
         </div>
 
-        <div className="rounded bg-orange-100 p-4">
+        <div className="rounded bg-amber-100 p-4">
           <h2 className="mb-2 font-semibold">API 테스트</h2>
           <div className="mb-4 space-x-2">
-            <button onClick={handleApiTest} className="rounded bg-orange-500 px-4 py-2 text-white hover:bg-orange-600">
+            <button onClick={handleApiTest} className="rounded bg-amber-500 px-4 py-2 text-white hover:bg-orange-600">
               인증 상태 API 테스트
             </button>
-            <button onClick={handleUserApiTest} className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600">
+            <button onClick={handleUserApiTest} className="rounded bg-destructive px-4 py-2 text-white hover:bg-destructive">
               사용자 API 테스트
             </button>
             <button
@@ -194,7 +194,7 @@ export default function DebugLayoutPage() {
             <div
               className={`rounded p-3 ${
                 apiTestResult.status === "success"
-                  ? "bg-green-200"
+                  ? "bg-emerald-200"
                   : apiTestResult.status === "error"
                     ? "bg-red-200"
                     : "bg-yellow-200"