feat: implement user preference management with persistence, reactive CSS variables, and layout customization

src/app/admin/page.tsx

@@ -56,10 +56,15 @@ export default function AdminPage() {
   const [totalTasks, setTotalTasks] = useState(67);
   const [totalLists, setTotalLists] = useState(9);
 
+  // 어드민 권한 판별
+  const userRole = session?.user?.role;
+  const userEmail = session?.user?.email;
+  const isAdmin = userRole === "ADMIN" || userEmail?.endsWith("@checkflow.local") || userEmail?.startsWith("admin@");
+
   // 인증 게이트: 비로그인 시 /login으로 리디렉션
   useEffect(() => {
     if (status === "unauthenticated") {
-      router.replace("/login");
+      router.replace("/login?callbackUrl=/admin");
     }
   }, [status, router]);
 
@@ -75,7 +80,30 @@ export default function AdminPage() {
       <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--bg-primary)" }}>
         <div style={{ textAlign: "center" }}>
           <div style={{ fontSize: 32, marginBottom: 12 }}>🔒</div>
-          <p style={{ color: "var(--text-secondary)" }}>Checking access...</p>
+          <p style={{ color: "var(--text-secondary)" }}>Checking administrator credentials...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // 비인가 사용자(일반 유저) 차단 화면
+  if (!isAdmin) {
+    return (
+      <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--bg-primary)", color: "var(--text-primary)", padding: 24 }}>
+        <div style={{ maxWidth: 440, width: "100%", background: "var(--bg-secondary)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: 32, textAlign: "center" }}>
+          <div style={{ fontSize: 44, marginBottom: 16 }}>🛡️</div>
+          <h2 style={{ fontSize: 20, fontWeight: 700, margin: "0 0 8px" }}>Access Restricted</h2>
+          <p style={{ fontSize: 13, color: "var(--text-secondary)", lineHeight: 1.6, margin: "0 0 24px" }}>
+            This console requires <strong>ADMIN</strong> privileges. Your account (<code>{session?.user?.email}</code>) does not have authorization to view multi-user system telemetry.
+          </p>
+          <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
+            <Link href="/demo" className="btn btn-ghost">
+              Open Demo
+            </Link>
+            <Link href="/" className="btn btn-primary">
+              Return to Tasks
+            </Link>
+          </div>
         </div>
       </div>
     );