feat: enhance DND nesting & promotion, isolated tags API, fix completion bounce UI, add Admin i18n switcher, refine typography & polish UX (v0.7.2)

.cline-context.md

@@ -15,6 +15,15 @@
   - `src/middleware.ts`: Route-level auth and admin role verification guard.
 
 - **Completed So Far:**
+  - Standardized user-isolated Tag database REST API (`/api/tags`) ensuring private custom tags per account, preventing cross-user data leakage and providing live tag autocomplete (v0.7.2).
+  - Streamlined Task Drag-and-Drop (DND) interaction model: hovering over a task nests as a subtask, dropping on blank list background elevates to root level, and prevents duplicate/looping trees (v0.7.2).
+  - Fixed completed task toggle button layout shift and centered list loader animations (v0.7.2).
+  - Constrained inline title edit double-click trigger zone strictly to task title text span (v0.7.2).
+  - Integrated i18n localization with language switcher in Admin console (`/admin`), and upgraded placeholders/dialogs across EN/KO/JA to polite, natural phrasing (v0.7.2).
+  - Standardized complete localization across all 3 supported languages (EN, KO, JA) without partial fallback leaks; translated all Settings Modal tabs (Profile, Preferences, Labs, Sync Integrations, Admin) and interactive guides (v0.7.1).
+  - Resolved list header rename layout shift bug where editing list title pushed the completed items toggle button (v0.7.1).
+  - Enhanced Markdown Note Editor preview/editor canvas alignment and unified description typography heights (v0.7.1).
+  - Standardized Task Detail priority picker into a sleek custom popover chip matching the central quick-add toolbar (v0.7.1).
   - Rewrote entire Git commit history with active local Git identity across all branches and tags, and force-pushed to self-hosted Gitea remote origin.
   - Conducted full audit of codebase against all specification items in `AGENTS.md`.
   - Verified 100% implementation of core features: n-depth recursive checklist, real-time subtask synchronization, modular blocks & split resizer, 3-way theme (VSCode dark / pastel light / system), global `UserPrefs` customization, Labs Kanban view, and mobile bottom sheet.
@@ -36,9 +45,12 @@
   - Real-time Optimistic UI updates for subtask inline addition & checklist checkbox clicks without requiring page refreshes (v0.7.0).
   - Auto-promotion of the first-ever registered user to ADMIN role on self-hosted instances (v0.7.0).
   - Full N-depth tree drag-and-drop (DND) reordering for main tasks and subtasks with LocalStorage persistence (v0.7.0).
+  - Recursive soft-delete cascading (deleting a parent task automatically soft-deletes all descendant subtasks) in both Prisma database and LocalStorage mock store (v0.7.0).
+  - Real-time Admin console API endpoints (`/api/admin/stats`, `/api/admin/users`) with Live/Demo duality (v0.7.0).
   - Validated that `npm run lint` and `npm run build` execute with 0 errors and 0 warnings.
 
 - **Next Steps (Todo):**
+  - Continuous refinement of user experience based on feedback.
   - Enhance keyboard accessibility & global shortcuts (shortcuts for switching list/kanban view, quick task navigation, Command Palette bindings).
   - Add optional automatic synchronization background polling / webhook integration if requested.
   - Plan next feature iterations or custom integrations as requested by user.

AGENTS.md

@@ -84,7 +84,9 @@ src/
 | `checkpoint-v0.6.2` | 표준 태스크 내보내기(Export) 기능 구현: TickTick/RFC 4180 호환 CSV (UTF-8 BOM 포함) 및 RFC 5545 iCalendar (`.ics` VTODO), 사이드바 프로필 메뉴 연동, 데모 모드 로컬 Blob 내보내기 지원, 다국어 사전 동기화 | 2026-08-21 |
 | `checkpoint-v0.6.3` | 노션 스타일 6도트 드래그 핸들(`⋮⋮`) & DND 태스크 재정렬, F2 단축키 인라인 제목 수정, 우측 호버 서브태스크 추가 버튼, 6초 플로팅 인터랙티브 실행 취소(Undo) 토스트 배너 탑재, 휴지통 및 로컬 스토리지 트리 중복 버그 수정 | 2026-08-21 |
 | `checkpoint-v0.6.4` | i18n 모듈러 사전 아키텍처(`types.ts`, `locales/en.ts`, `locales/ko.ts`, `locales/ja.ts`) 분리 및 번역 완성도 100%, 어드민 콘솔(`/admin`) 데모 프리뷰 및 멀티유저 게이트 연동, 설정 모달 Admin 탭 정보 고도화, 사이드바 프로필 메뉴 내 Admin Console 진입점 추가 | 2026-08-21 |
-| `checkpoint-v0.7.0` | **(현재 최신)** 좌측 사이드바 UI/UX 전면 리디자인(브랜드 로고 SVG, 중앙정렬 매트 검색창, 바닥 밀착 프로필), 뷰 전환(리스트/칸반) 미니멀 원터치 토글 및 실험실 연동 버그 수정, 휴지통 카운트 실시간 동기화 & 기본화면 튕김 버그 수정, 첫 가입 계정 자동 ADMIN 승격, 서브태스크 인라인 추가 및 체크박스 Optimistic UI 실시간 렌더링, 메모장 기본 Preview 모드 & 원터치 토글, N-depth 계층형 DND 드래그 앤 드롭 재정렬 지원 | 2026-08-21 |
+| `checkpoint-v0.7.0` | 좌측 사이드바 UI/UX 전면 리디자인(브랜드 로고 SVG, 중앙정렬 매트 검색창, 바닥 밀착 프로필), 뷰 전환(리스트/칸반) 미니멀 원터치 토글 및 실험실 연동 버그 수정, 휴지통 카운트 실시간 동기화 & 기본화면 튕김 버그 수정, 첫 가입 계정 자동 ADMIN 승격 및 실시간 Admin API(/api/admin/users, /api/admin/stats) 구축, 서브태스크 인라인 추가 및 체크박스 Optimistic UI 실시간 렌더링, 메모장 기본 Preview 모드 & 원터치 토글, N-depth 계층형 DND 드래그 앤 드롭 재정렬 및 재귀 하위 태스크 캐스케이드 삭제 지원 | 2026-08-21 |
+| `checkpoint-v0.7.1` | 설정 모달(5개 탭 및 가이드/프리뷰 전면) i18n 3개국어(EN/KO/JA) 100% 완전 번역 및 언어 로컬스토리지 영구 기억/자동 감지 적용, 태스크 목록 제목 인라인 수정 시 완료항목 토글 버튼 밀림 flexbox 레이아웃 버그 수정, 메모장 프리뷰/에디터 높이 및 플레이스홀더 타이포그래피 일관성 보정, 우측 상세 패널 우선순위 브라우저 기본 드롭다운을 중앙 퀵애드와 동일한 세련된 컬러 팝오버 칩 UI로 통일 | 2026-08-22 |
+| `checkpoint-v0.7.2` | **(현재 최신)** 태그(Tag) 사용자 계정별 데이터베이스 격리 API 구축(/api/tags), DND 드래그앤드롭 상위 태스크 하위 편입 단일화 및 빈 배경 드롭 1단계 승격 지원, 완료항목 토글 시 로딩 UI 밀림 버그 수정, 인라인 제목 수정 더블클릭 영역 텍스트 한정, 어드민 콘솔 다국어(i18n) 언어 선택기 지원, 친절하고 간결한 톤앤매너 플레이스홀더 전면 적용 | 2026-08-22 |
 
 ---
 

prisma/migrations/20260821_add_soft_delete/migration.sql

@@ -0,0 +1,6 @@
+-- AlterTable
+ALTER TABLE "Task" ADD COLUMN "isDeleted" BOOLEAN NOT NULL DEFAULT false;
+ALTER TABLE "Task" ADD COLUMN "deletedAt" TIMESTAMP(3);
+
+-- CreateIndex
+CREATE INDEX "Task_isDeleted_idx" ON "Task"("isDeleted");

prisma/schema.prisma

@@ -63,6 +63,9 @@ model Task {
   priority    Int       @default(0)
   sortOrder   Int       @default(0)
 
+  isDeleted   Boolean   @default(false)
+  deletedAt   DateTime?
+
   createdAt   DateTime  @default(now())
   updatedAt   DateTime  @updatedAt
 
@@ -75,6 +78,7 @@ model Task {
   @@index([userId])
   @@index([listId])
   @@index([parentId])
+  @@index([isDeleted])
 }
 
 model Tag {

src/app/admin/page.tsx

@@ -1,9 +1,10 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { getDemoStore } from "@/lib/mockData";
 import { useI18n } from "@/lib/i18n";
+import { LanguageSelector } from "@/components/ui/LanguageSelector";
 
 interface AdminUser {
   id: string;
@@ -15,7 +16,7 @@ interface AdminUser {
   active: boolean;
 }
 
-const INITIAL_ADMIN_USERS: AdminUser[] = [
+const INITIAL_DEMO_USERS: AdminUser[] = [
   {
     id: "user-1",
     name: "Admin Master",
@@ -47,29 +48,20 @@ const INITIAL_ADMIN_USERS: AdminUser[] = [
 
 export default function AdminPage() {
   const { data: session, status } = useSession();
-  const { t } = useI18n();
+  const { t, lang } = useI18n();
 
-  const [users, setUsers] = useState<AdminUser[]>(INITIAL_ADMIN_USERS);
-  const [search, setSearch] = useState("");
-  const [totalTasks] = useState(() => {
-    if (typeof window !== "undefined") {
-      const store = getDemoStore();
-      return store.tasks ? store.tasks.length : 67;
-    }
-    return 67;
-  });
-  const [totalLists] = useState(() => {
-    if (typeof window !== "undefined") {
-      const store = getDemoStore();
-      return store.lists ? store.lists.length : 9;
-    }
-    return 9;
-  });
-
-  // Is this running in Demo mode (no session or unauthenticated)
   const isDemo = status === "unauthenticated" || !session;
 
-  // 어드민 권한 판별
+  const [users, setUsers] = useState<AdminUser[]>(INITIAL_DEMO_USERS);
+  const [stats, setStats] = useState({
+    totalUsers: 3,
+    totalLists: 9,
+    totalTasks: 67,
+    caldavStatus: "Active",
+  });
+  const [loadingUsers, setLoadingUsers] = useState(false);
+  const [search, setSearch] = useState("");
+
   const userRole = session?.user?.role;
   const userEmail = session?.user?.email;
   const isAuthorized =
@@ -79,7 +71,49 @@ export default function AdminPage() {
     userEmail?.startsWith("admin@") ||
     userEmail === "admin@checkflow.local";
 
-  // 로딩 중
+  const fetchAdminData = useCallback(async () => {
+    if (isDemo) {
+      if (typeof window !== "undefined") {
+        const store = getDemoStore();
+        setStats({
+          totalUsers: INITIAL_DEMO_USERS.length,
+          totalLists: store.lists.length,
+          totalTasks: store.tasks.length,
+          caldavStatus: "Active",
+        });
+        setUsers(INITIAL_DEMO_USERS);
+      }
+      return;
+    }
+
+    setLoadingUsers(true);
+    try {
+      const [usersRes, statsRes] = await Promise.all([
+        fetch("/api/admin/users"),
+        fetch("/api/admin/stats"),
+      ]);
+
+      if (usersRes.ok) {
+        const uData = await usersRes.json();
+        setUsers(uData);
+      }
+      if (statsRes.ok) {
+        const sData = await statsRes.json();
+        setStats(sData);
+      }
+    } catch (err) {
+      console.error("Failed to load admin data:", err);
+    } finally {
+      setLoadingUsers(false);
+    }
+  }, [isDemo]);
+
+  useEffect(() => {
+    if (status !== "loading") {
+      fetchAdminData();
+    }
+  }, [status, fetchAdminData]);
+
   if (status === "loading") {
     return (
       <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--bg-primary)" }}>
@@ -114,10 +148,27 @@ export default function AdminPage() {
     );
   }
 
-  const toggleRole = (id: string) => {
+  const toggleRole = async (user: AdminUser) => {
+    const newRole = user.role === "ADMIN" ? "USER" : "ADMIN";
+    if (isDemo) {
       setUsers((prev) =>
-      prev.map((u) => (u.id === id ? { ...u, role: u.role === "ADMIN" ? "USER" : "ADMIN" } : u))
+        prev.map((u) => (u.id === user.id ? { ...u, role: newRole } : u))
       );
+      return;
+    }
+
+    try {
+      const res = await fetch("/api/admin/users", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId: user.id, role: newRole }),
+      });
+      if (res.ok) {
+        fetchAdminData();
+      }
+    } catch (err) {
+      console.error("Failed to toggle role:", err);
+    }
   };
 
   const toggleStatus = (id: string) => {
@@ -126,9 +177,26 @@ export default function AdminPage() {
     );
   };
 
-  const deleteUser = (id: string) => {
-    if (confirm("Are you sure you want to delete this user and all their tasks?")) {
-      setUsers((prev) => prev.filter((u) => u.id !== id));
+  const deleteUser = async (user: AdminUser) => {
+    if (!confirm(`Are you sure you want to delete ${user.name} (${user.email}) and all their tasks?`)) {
+      return;
+    }
+
+    if (isDemo) {
+      setUsers((prev) => prev.filter((u) => u.id !== user.id));
+      return;
+    }
+
+    try {
+      const res = await fetch(`/api/admin/users?userId=${user.id}`, { method: "DELETE" });
+      if (res.ok) {
+        fetchAdminData();
+      } else {
+        const data = await res.json();
+        alert(data.error || "Failed to delete user");
+      }
+    } catch (err) {
+      console.error("Failed to delete user:", err);
     }
   };
 
@@ -149,10 +217,14 @@ export default function AdminPage() {
               <h1 style={{ fontSize: 20, fontWeight: 700, margin: 0, letterSpacing: -0.5 }}>
                 CheckFlow Admin Console
               </h1>
-              {isDemo && (
+              {isDemo ? (
                 <span className="demo-badge" style={{ fontSize: 11, padding: "2px 8px" }}>
                   Demo Preview
                 </span>
+              ) : (
+                <span className="badge badge-primary" style={{ fontSize: 11, padding: "2px 8px" }}>
+                  Live Instance
+                </span>
               )}
             </div>
             <p style={{ fontSize: 12, color: "var(--text-tertiary)", margin: "2px 0 0" }}>
@@ -161,12 +233,19 @@ export default function AdminPage() {
           </div>
         </div>
 
-        <div style={{ display: "flex", gap: 8 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <LanguageSelector />
+          {isDemo ? (
             <Link href="/demo" className="btn btn-ghost btn-sm">
-            ← Back to Demo
+              ← {lang === "ko" ? "데모로 돌아가기" : lang === "ja" ? "デモに戻る" : "Back to Demo"}
             </Link>
+          ) : (
+            <button type="button" className="btn btn-ghost btn-sm" onClick={fetchAdminData}>
+              🔄 {lang === "ko" ? "새로고침" : lang === "ja" ? "更新" : "Refresh"}
+            </button>
+          )}
           <Link href="/" className="btn btn-primary btn-sm">
-            🚀 Open Dashboard
+            🚀 {lang === "ko" ? "할 일 대시보드" : lang === "ja" ? "タスク一覧" : "Open Dashboard"}
           </Link>
         </div>
       </div>
@@ -175,25 +254,25 @@ export default function AdminPage() {
       <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 16, marginBottom: 28 }}>
         <div style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)", padding: "16px 20px", borderRadius: "var(--radius-md)" }}>
           <div style={{ fontSize: 12, color: "var(--text-tertiary)", fontWeight: 600, textTransform: "uppercase" }}>Total Users</div>
-          <div style={{ fontSize: 28, fontWeight: 800, color: "var(--accent)", marginTop: 4 }}>{users.length}</div>
+          <div style={{ fontSize: 28, fontWeight: 800, color: "var(--accent)", marginTop: 4 }}>{stats.totalUsers}</div>
           <div style={{ fontSize: 11, color: "var(--success)", marginTop: 2 }}>● 100% active instances</div>
         </div>
 
         <div style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)", padding: "16px 20px", borderRadius: "var(--radius-md)" }}>
           <div style={{ fontSize: 12, color: "var(--text-tertiary)", fontWeight: 600, textTransform: "uppercase" }}>Total Projects / Lists</div>
-          <div style={{ fontSize: 28, fontWeight: 800, color: "#10B981", marginTop: 4 }}>{totalLists}</div>
+          <div style={{ fontSize: 28, fontWeight: 800, color: "#10B981", marginTop: 4 }}>{stats.totalLists}</div>
           <div style={{ fontSize: 11, color: "var(--text-tertiary)", marginTop: 2 }}>Across all users</div>
         </div>
 
         <div style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)", padding: "16px 20px", borderRadius: "var(--radius-md)" }}>
           <div style={{ fontSize: 12, color: "var(--text-tertiary)", fontWeight: 600, textTransform: "uppercase" }}>Total Tasks & Notes</div>
-          <div style={{ fontSize: 28, fontWeight: 800, color: "#8B5CF6", marginTop: 4 }}>{totalTasks}</div>
+          <div style={{ fontSize: 28, fontWeight: 800, color: "#8B5CF6", marginTop: 4 }}>{stats.totalTasks}</div>
           <div style={{ fontSize: 11, color: "var(--text-tertiary)", marginTop: 2 }}>Recursive subtasks included</div>
         </div>
 
         <div style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)", padding: "16px 20px", borderRadius: "var(--radius-md)" }}>
           <div style={{ fontSize: 12, color: "var(--text-tertiary)", fontWeight: 600, textTransform: "uppercase" }}>CalDAV / DAVx⁵ Status</div>
-          <div style={{ fontSize: 28, fontWeight: 800, color: "#F59E0B", marginTop: 4 }}>Active</div>
+          <div style={{ fontSize: 28, fontWeight: 800, color: "#F59E0B", marginTop: 4 }}>{stats.caldavStatus}</div>
           <div style={{ fontSize: 11, color: "var(--success)", marginTop: 2 }}>● Basic Auth Bypass Verified</div>
         </div>
       </div>
@@ -218,6 +297,11 @@ export default function AdminPage() {
 
         {/* Users Table */}
         <div style={{ overflowX: "auto" }}>
+          {loadingUsers ? (
+            <div style={{ padding: "30px", textAlign: "center", color: "var(--text-tertiary)" }}>
+              {t("loading")}
+            </div>
+          ) : (
             <table style={{ width: "100%", borderCollapse: "collapse", textAlign: "left", fontSize: 13 }}>
               <thead>
                 <tr style={{ borderBottom: "1px solid var(--border)", color: "var(--text-tertiary)" }}>
@@ -267,7 +351,7 @@ export default function AdminPage() {
                         <button
                           type="button"
                           className="btn btn-ghost btn-sm"
-                        onClick={() => toggleRole(u.id)}
+                          onClick={() => toggleRole(u)}
                           title="Change role"
                           style={{ fontSize: 11, padding: "3px 8px" }}
                         >
@@ -285,7 +369,7 @@ export default function AdminPage() {
                         <button
                           type="button"
                           className="btn btn-ghost btn-sm"
-                        onClick={() => deleteUser(u.id)}
+                          onClick={() => deleteUser(u)}
                           title="Delete user"
                           style={{ fontSize: 11, padding: "3px 8px", color: "var(--danger)" }}
                         >
@@ -297,6 +381,7 @@ export default function AdminPage() {
                 ))}
               </tbody>
             </table>
+          )}
         </div>
       </div>
     </div>

src/app/api/admin/stats/route.ts

@@ -0,0 +1,41 @@
+import { NextResponse } from "next/server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+
+export async function GET() {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const userRole = session.user.role;
+    const userEmail = session.user.email;
+    const isAuthorized =
+      userRole === "ADMIN" ||
+      userEmail?.startsWith("admin@") ||
+      userEmail?.endsWith("@checkflow.local") ||
+      userEmail === "admin@checkflow.local";
+
+    if (!isAuthorized) {
+      return NextResponse.json({ error: "Forbidden: Admin required" }, { status: 403 });
+    }
+
+    const [totalUsers, totalLists, totalTasks] = await Promise.all([
+      prisma.user.count(),
+      prisma.list.count(),
+      prisma.task.count(),
+    ]);
+
+    return NextResponse.json({
+      totalUsers,
+      totalLists,
+      totalTasks,
+      caldavStatus: "Active",
+    });
+  } catch (error) {
+    console.error("[API/Admin/Stats GET] Error:", error);
+    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
+  }
+}

src/app/api/admin/users/route.ts

@@ -0,0 +1,94 @@
+import { NextResponse } from "next/server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+
+function checkAdminAuth(session: any): boolean {
+  if (!session?.user) return false;
+  const userRole = session.user.role;
+  const userEmail = session.user.email;
+  return (
+    userRole === "ADMIN" ||
+    userEmail?.startsWith("admin@") ||
+    userEmail?.endsWith("@checkflow.local") ||
+    userEmail === "admin@checkflow.local"
+  );
+}
+
+// GET /api/admin/users - List all registered users with task count
+export async function GET() {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!checkAdminAuth(session)) {
+      return NextResponse.json({ error: "Forbidden: Admin required" }, { status: 403 });
+    }
+
+    const users = await prisma.user.findMany({
+      select: {
+        id: true,
+        name: true,
+        email: true,
+        createdAt: true,
+        _count: {
+          select: {
+            tasks: true,
+          },
+        },
+      },
+      orderBy: { createdAt: "asc" },
+    });
+
+    const formattedUsers = users.map((u, idx) => {
+      const isAdmin =
+        idx === 0 ||
+        u.email.startsWith("admin@") ||
+        u.email.endsWith("@checkflow.local") ||
+        u.email === "admin@checkflow.local";
+
+      return {
+        id: u.id,
+        name: u.name || "User",
+        email: u.email,
+        role: (isAdmin ? "ADMIN" : "USER") as "USER" | "ADMIN",
+        createdAt: u.createdAt.toISOString(),
+        taskCount: u._count.tasks,
+        active: true,
+      };
+    });
+
+    return NextResponse.json(formattedUsers);
+  } catch (error) {
+    console.error("[API/Admin/Users GET] Error:", error);
+    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+// DELETE /api/admin/users - Delete a user
+export async function DELETE(req: Request) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!checkAdminAuth(session)) {
+      return NextResponse.json({ error: "Forbidden: Admin required" }, { status: 403 });
+    }
+
+    const { searchParams } = new URL(req.url);
+    const userId = searchParams.get("userId");
+    if (!userId) {
+      return NextResponse.json({ error: "userId is required" }, { status: 400 });
+    }
+
+    // Prevent admin from deleting themselves
+    if (userId === session?.user?.id) {
+      return NextResponse.json({ error: "Cannot delete own admin account" }, { status: 400 });
+    }
+
+    await prisma.user.delete({
+      where: { id: userId },
+    });
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("[API/Admin/Users DELETE] Error:", error);
+    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
+  }
+}

src/app/api/lists/route.ts

@@ -12,7 +12,7 @@ export async function GET() {
       where: { userId: session.user.id },
       orderBy: { sortOrder: "asc" },
       include: {
-        _count: { select: { tasks: { where: { completed: false, parentId: null } } } },
+        _count: { select: { tasks: { where: { isDeleted: false, completed: false, parentId: null } } } },
       },
     });
     return NextResponse.json(lists);

src/app/api/tags/route.ts

@@ -0,0 +1,70 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+
+export async function GET() {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+    const tags = await prisma.tag.findMany({
+      where: { userId: session.user.id },
+      orderBy: { name: "asc" },
+      include: {
+        _count: {
+          select: {
+            tasks: {
+              where: {
+                task: {
+                  isDeleted: false,
+                  completed: false,
+                },
+              },
+            },
+          },
+        },
+      },
+    });
+
+    return NextResponse.json(tags);
+  } catch (err) {
+    console.error("[tags:GET]", err);
+    return NextResponse.json({ error: "Failed to fetch tags" }, { status: 500 });
+  }
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+    const body = await req.json().catch(() => null);
+    if (!body || !body.name?.trim()) {
+      return NextResponse.json({ error: "Tag name required" }, { status: 400 });
+    }
+
+    const name = body.name.trim();
+    const color = body.color || "#4B7BF5";
+
+    const tag = await prisma.tag.upsert({
+      where: {
+        userId_name: {
+          userId: session.user.id,
+          name,
+        },
+      },
+      update: { color },
+      create: {
+        userId: session.user.id,
+        name,
+        color,
+      },
+    });
+
+    return NextResponse.json(tag, { status: 201 });
+  } catch (err) {
+    console.error("[tags:POST]", err);
+    return NextResponse.json({ error: "Failed to create/update tag" }, { status: 500 });
+  }
+}

src/app/api/tasks/[id]/route.ts

@@ -36,7 +36,7 @@ export async function PATCH(req: NextRequest, { params }: Ctx) {
     if (!task) return NextResponse.json({ error: "Not found" }, { status: 404 });
 
     // Sanitize allowed fields
-    const allowed = ["title", "note", "completed", "completedAt", "dueDate", "priority", "sortOrder", "listId", "parentId"];
+    const allowed = ["title", "note", "completed", "completedAt", "dueDate", "priority", "sortOrder", "listId", "parentId", "isDeleted", "deletedAt"];
     const data: Record<string, unknown> = {};
     for (const key of allowed) {
       if (key in body) data[key] = body[key];
@@ -71,9 +71,25 @@ export async function PATCH(req: NextRequest, { params }: Ctx) {
       data.dueDate = data.dueDate ? new Date(data.dueDate as string) : null;
     }
 
+    // If restoring a child task (isDeleted: false), also restore ancestor parents
+    if (data.isDeleted === false) {
+      let currentParentId = task.parentId;
+      while (currentParentId) {
+        const parentTask: any = await prisma.task.findUnique({ where: { id: currentParentId } });
+        if (!parentTask) break;
+        if (parentTask.isDeleted) {
+          await prisma.task.update({
+            where: { id: currentParentId },
+            data: { isDeleted: false, deletedAt: null } as any,
+          });
+        }
+        currentParentId = parentTask.parentId;
+      }
+    }
+
     const updated = await prisma.task.update({
       where: { id },
-      data,
+      data: data as any,
       include: { children: { orderBy: { sortOrder: "asc" } }, tags: { include: { tag: true } } },
     });
     return NextResponse.json(updated);
@@ -83,7 +99,7 @@ export async function PATCH(req: NextRequest, { params }: Ctx) {
   }
 }
 
-export async function DELETE(_: NextRequest, { params }: Ctx) {
+export async function DELETE(req: NextRequest, { params }: Ctx) {
   try {
     const session = await getServerSession(authOptions);
     if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
@@ -92,8 +108,36 @@ export async function DELETE(_: NextRequest, { params }: Ctx) {
     const task = await prisma.task.findFirst({ where: { id, userId: session.user.id } });
     if (!task) return NextResponse.json({ error: "Not found" }, { status: 404 });
 
+    const { searchParams } = new URL(req.url);
+    const permanent = searchParams.get("permanent") === "true";
+
+    if (permanent) {
       await prisma.task.delete({ where: { id } });
       return NextResponse.json({ ok: true });
+    }
+
+    // Soft delete task and all its descendants recursively
+    const now = new Date();
+    const collectDescendantIds = async (parentIds: string[]): Promise<string[]> => {
+      if (parentIds.length === 0) return [];
+      const children = await prisma.task.findMany({
+        where: { parentId: { in: parentIds }, userId: session.user.id },
+        select: { id: true },
+      });
+      const childIds = children.map((c) => c.id);
+      const grandChildIds = await collectDescendantIds(childIds);
+      return [...childIds, ...grandChildIds];
+    };
+
+    const allDescendants = await collectDescendantIds([id]);
+    const allIdsToDelete = [id, ...allDescendants];
+
+    await prisma.task.updateMany({
+      where: { id: { in: allIdsToDelete }, userId: session.user.id },
+      data: { isDeleted: true, deletedAt: now } as any,
+    });
+
+    return NextResponse.json({ ok: true, softDeleted: true });
   } catch (err) {
     console.error("[tasks/id:DELETE]", err);
     return NextResponse.json({ error: "Failed to delete task" }, { status: 500 });

src/app/api/tasks/route.ts

@@ -11,19 +11,53 @@ export async function GET(req: NextRequest) {
     const { searchParams } = new URL(req.url);
     const listId = searchParams.get("listId");
     const showCompleted = searchParams.get("showCompleted") === "true";
+    const tagName = searchParams.get("tag");
+    const isTrash = searchParams.get("isTrash") === "true";
+    const countTrash = searchParams.get("countTrash") === "true";
+
+    if (countTrash) {
+      const trashCount = await prisma.task.count({
+        where: { userId: session.user.id, isDeleted: true } as any,
+      });
+      return NextResponse.json({ count: trashCount });
+    }
+
+    if (isTrash) {
+      // Return all deleted tasks (top-level or subtasks)
+      const trashTasks = await prisma.task.findMany({
+        where: { userId: session.user.id, isDeleted: true } as any,
+        orderBy: [{ deletedAt: "desc" } as any, { createdAt: "desc" }],
+        include: {
+          children: {
+            orderBy: [{ sortOrder: "asc" }],
+            include: { tags: { include: { tag: true } } },
+          },
+          tags: { include: { tag: true } },
+        },
+      });
+      return NextResponse.json(trashTasks);
+    }
 
     const where: Record<string, unknown> = {
       userId: session.user.id,
-      parentId: null,
-      ...(listId ? { listId } : {}),
+      isDeleted: false,
+      ...(listId ? { listId, parentId: null } : tagName ? {} : { parentId: null }),
       ...(showCompleted ? {} : { completed: false }),
+      ...(tagName ? { tags: { some: { tag: { name: tagName } } } } : {}),
     };
 
     const tasks = await prisma.task.findMany({
-      where,
+      where: where as any,
       orderBy: [{ sortOrder: "asc" }, { createdAt: "asc" }],
       include: {
-        children: { orderBy: [{ sortOrder: "asc" }] },
+        children: {
+          where: { isDeleted: false } as any,
+          orderBy: [{ sortOrder: "asc" }],
+          include: {
+            children: { where: { isDeleted: false } as any, orderBy: [{ sortOrder: "asc" }] },
+            tags: { include: { tag: true } },
+          },
+        },
         tags: { include: { tag: true } },
       },
     });
@@ -34,6 +68,29 @@ export async function GET(req: NextRequest) {
   }
 }
 
+export async function DELETE(req: NextRequest) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+    const { searchParams } = new URL(req.url);
+    const trash = searchParams.get("trash") === "true";
+
+    if (trash) {
+      // Empty all trash permanently
+      await prisma.task.deleteMany({
+        where: { userId: session.user.id, isDeleted: true } as any,
+      });
+      return NextResponse.json({ ok: true });
+    }
+
+    return NextResponse.json({ error: "Invalid delete request" }, { status: 400 });
+  } catch (err) {
+    console.error("[tasks:DELETE_BATCH]", err);
+    return NextResponse.json({ error: "Failed to empty trash" }, { status: 500 });
+  }
+}
+
 export async function POST(req: NextRequest) {
   try {
     const session = await getServerSession(authOptions);

src/components/layout/AppShell.tsx

@@ -5,6 +5,7 @@ import { TaskList, Task, List, User } from "../tasks/TaskList";
 import { useUserPrefs, usePrefsStyle } from "@/lib/useUserPrefs";
 import { TaskDetail } from "../tasks/TaskDetail";
 import { CommandPalette } from "../ui/CommandPalette";
+import { useI18n } from "@/lib/i18n";
 import {
   getDemoStore,
   saveDemoStore,
@@ -20,6 +21,8 @@ import {
   findTaskInTree,
   getAllTrashTasks,
   filterTasksByTag,
+  filterActiveTree,
+  removeTaskFromTree,
 } from "@/lib/mockData";
 
 interface AppShellProps {
@@ -56,6 +59,7 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
   const [showCompleted, setShowCompleted] = useState(false);
   const [cmdPaletteOpen, setCmdPaletteOpen] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
+  const { t } = useI18n();
 
   // Global user preferences (reactive)
   const { prefs, updatePrefs } = useUserPrefs();
@@ -116,7 +120,9 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
     return () => document.removeEventListener("checkflow:openCommandPalette", handler);
   }, []);
 
-  // Demo tasks filter & reconstruct hierarchical structure
+  const [apiTrashCount, setApiTrashCount] = useState(0);
+
+  // Task filter & reconstruct hierarchical structure for Demo and API modes
   useEffect(() => {
     if (isDemo) {
       const store = getDemoStore();
@@ -126,10 +132,36 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
       } else if (selectedTag) {
         setTasks(filterTasksByTag(store.tasks, selectedTag) as Task[]);
       } else if (selectedListId) {
-        const listTasks = (store.tasks as Task[]).filter(
-          (t) => !t.isDeleted && t.listId === selectedListId && (showCompleted ? true : !t.completed)
+        const listTasks = filterActiveTree(store.tasks as MockTask[], showCompleted).filter(
+          (t) => t.listId === selectedListId
         );
-        setTasks(listTasks);
+        setTasks(listTasks as Task[]);
+      } else {
+        setTasks([]);
+      }
+    } else {
+      // Authenticated API mode
+      // Also fetch trash count for sidebar
+      fetch("/api/tasks?countTrash=true")
+        .then((r) => (r.ok ? r.json() : { count: 0 }))
+        .then((data) => setApiTrashCount(data.count || 0))
+        .catch(() => {});
+
+      if (isTrashActive) {
+        fetch("/api/tasks?isTrash=true")
+          .then((r) => (r.ok ? r.json() : []))
+          .then((data) => setTasks(Array.isArray(data) ? data : []))
+          .catch((err) => console.error("Failed to load trash tasks", err));
+      } else if (selectedTag) {
+        fetch(`/api/tasks?tag=${encodeURIComponent(selectedTag)}&showCompleted=${showCompleted}`)
+          .then((r) => (r.ok ? r.json() : []))
+          .then((data) => setTasks(Array.isArray(data) ? data : []))
+          .catch((err) => console.error("Failed to load tag tasks", err));
+      } else if (selectedListId) {
+        fetch(`/api/tasks?listId=${selectedListId}&showCompleted=${showCompleted}`)
+          .then((r) => (r.ok ? r.json() : []))
+          .then((data) => setTasks(Array.isArray(data) ? data : []))
+          .catch((err) => console.error("Failed to load list tasks", err));
       }
     }
   }, [isDemo, selectedListId, isTrashActive, selectedTag, showCompleted, refreshKey]);
@@ -161,18 +193,28 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
 
   const handleTagSelect = useCallback((tagName: string | null) => {
     setIsTrashActive(false);
+    setSelectedListId(null);
     setSelectedTag(tagName);
     setSelectedTask(null);
     setSidebarOpen(false);
   }, []);
 
   const handleTrashSelect = useCallback(() => {
-    setIsTrashActive(true);
-    setSelectedTag(null);
     setSelectedListId(null);
+    setSelectedTag(null);
+    setIsTrashActive(true);
     setSelectedTask(null);
     setSidebarOpen(false);
-  }, []);
+    if (isDemo) {
+      const store = getDemoStore();
+      setTasks(getAllTrashTasks(store.tasks) as Task[]);
+    } else {
+      fetch("/api/tasks?isTrash=true")
+        .then((r) => (r.ok ? r.json() : []))
+        .then((data) => setTasks(Array.isArray(data) ? data : []))
+        .catch((err) => console.error("Failed to load trash tasks", err));
+    }
+  }, [isDemo]);
 
   // Update List Name
   const handleUpdateListName = async (id: string, newName: string) => {
@@ -303,7 +345,7 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
   const [undoToast, setUndoToast] = useState<{ task: Task; title: string } | null>(null);
   const undoTimerRef = useRef<NodeJS.Timeout | null>(null);
 
-  // Unified task delete handler with immediate Undo Toast
+  // Unified task delete handler with immediate Undo Toast (recursively removes task & all descendants)
   const handleDeleteTaskWithUndo = useCallback((task: Task) => {
     if (undoTimerRef.current) clearTimeout(undoTimerRef.current);
 
@@ -313,20 +355,37 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
       const store = getDemoStore();
       const newTasks = moveToTrashInTree(store.tasks, task.id);
       saveDemoStore(store.lists, newTasks);
-      setTasks((prev) => prev.filter((t) => t.id !== task.id));
+      if (isTrashActive) {
+        setTasks(getAllTrashTasks(newTasks) as Task[]);
+      } else if (selectedListId) {
+        setTasks(filterActiveTree(newTasks, showCompleted).filter((t) => t.listId === selectedListId) as Task[]);
+      } else if (selectedTag) {
+        setTasks(filterTasksByTag(newTasks, selectedTag) as Task[]);
+      }
       if (selectedTask?.id === task.id) setSelectedTask(null);
     } else {
-      setTasks((prev) => prev.filter((t) => t.id !== task.id));
+      // API Mode: Optimistically strip target task and all its subtasks from active tree immediately
+      setTasks((prev) => removeTaskFromTree(prev as MockTask[], task.id) as Task[]);
+      setApiTrashCount((c) => c + 1);
       if (selectedTask?.id === task.id) setSelectedTask(null);
-      fetch(`/api/tasks/${task.id}`, { method: "DELETE" }).catch((e) => console.error(e));
+
+      fetch(`/api/tasks/${task.id}`, { method: "DELETE" })
+        .then(() => {
+          // Re-sync trash count in background
+          fetch("/api/tasks?countTrash=true")
+            .then((r) => (r.ok ? r.json() : { count: 0 }))
+            .then((data) => setApiTrashCount(data.count || 0))
+            .catch(() => {});
+        })
+        .catch((e) => console.error(e));
     }
 
     undoTimerRef.current = setTimeout(() => {
       setUndoToast(null);
     }, 6000);
-  }, [isDemo, selectedTask]);
+  }, [isDemo, selectedTask, isTrashActive, selectedListId, selectedTag, showCompleted]);
 
-  // Undo delete
+  // Undo delete (Restores exact soft-deleted task hierarchy)
   const handleUndoDelete = useCallback(async () => {
     if (!undoToast) return;
     if (undoTimerRef.current) clearTimeout(undoTimerRef.current);
@@ -346,28 +405,16 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
       refresh();
     } else {
       try {
-        const res = await fetch("/api/tasks", {
-          method: "POST",
+        const res = await fetch(`/api/tasks/${task.id}`, {
+          method: "PATCH",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            title: task.title,
-            listId: task.listId,
-            parentId: task.parentId,
-            note: task.note,
-            completed: task.completed,
-            dueDate: task.dueDate,
-            priority: task.priority,
-          }),
+          body: JSON.stringify({ isDeleted: false, deletedAt: null }),
         });
         if (res.ok) {
-          const created = await res.json();
-          if (created.listId === selectedListId) {
-            setTasks((prev) => [...prev, created]);
-          }
           refresh();
         }
       } catch (err) {
-        console.error("Failed to restore task", err);
+        console.error("Failed to restore task via Undo", err);
       }
     }
   }, [undoToast, isDemo, selectedListId, refresh]);
@@ -386,30 +433,48 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
     }
   };
 
-  // Restore from Trash
-  const handleRestoreTask = (id: string) => {
+  // Restore from Trash (Restores task and all its nested subtasks)
+  const handleRestoreTask = async (id: string) => {
     if (isDemo) {
       const store = getDemoStore();
       const newTasks = restoreTaskInTree(store.tasks, id);
       saveDemoStore(store.lists, newTasks);
-      setTasks((prev) => prev.filter((t) => t.id !== id));
+      setTasks(getAllTrashTasks(newTasks) as Task[]);
       refresh();
+    } else {
+      try {
+        await fetch(`/api/tasks/${id}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ isDeleted: false, deletedAt: null }),
+        });
+        refresh();
+      } catch (err) {
+        console.error("Failed to restore task", err);
+      }
     }
   };
 
   // Permanent Delete
-  const handlePermanentDeleteTask = (id: string) => {
+  const handlePermanentDeleteTask = async (id: string) => {
     if (isDemo) {
       const store = getDemoStore();
       const newTasks = deleteTaskInTree(store.tasks, id);
       saveDemoStore(store.lists, newTasks);
-      setTasks((prev) => prev.filter((t) => t.id !== id));
+      setTasks(getAllTrashTasks(newTasks) as Task[]);
       refresh();
+    } else {
+      try {
+        await fetch(`/api/tasks/${id}?permanent=true`, { method: "DELETE" });
+        refresh();
+      } catch (err) {
+        console.error("Failed to permanently delete task", err);
+      }
     }
   };
 
   // Empty Trash
-  const handleEmptyTrash = () => {
+  const handleEmptyTrash = async () => {
     if (!confirm("Permanently empty all items in trash?")) return;
     if (isDemo) {
       const store = getDemoStore();
@@ -417,6 +482,13 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
       saveDemoStore(store.lists, newTasks);
       setTasks([]);
       refresh();
+    } else {
+      try {
+        await fetch("/api/tasks?trash=true", { method: "DELETE" });
+        refresh();
+      } catch (err) {
+        console.error("Failed to empty trash", err);
+      }
     }
   };
 
@@ -483,7 +555,7 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
         onTagSelect={handleTagSelect}
         isTrashActive={isTrashActive}
         onTrashSelect={handleTrashSelect}
-        trashCount={isDemo && typeof window !== "undefined" ? getAllTrashTasks(getDemoStore().tasks).length : undefined}
+        trashCount={isDemo && typeof window !== "undefined" ? getAllTrashTasks(getDemoStore().tasks).length : apiTrashCount}
         mobileOpen={sidebarOpen}
         onClose={() => setSidebarOpen(false)}
         isDemo={isDemo}
@@ -607,12 +679,12 @@ export function AppShell({ user, isDemo = false }: AppShellProps) {
           <div className="undo-toast-content">
             <span className="undo-toast-icon">🗑️</span>
             <span className="undo-toast-msg">
-              <strong>{undoToast.title || "할 일"}</strong>이(가) 삭제되었습니다.
+              <strong>{undoToast.title || t("tasks")}</strong> {t("taskUndoHint")}
             </span>
           </div>
           <div className="undo-toast-actions">
             <button type="button" className="undo-toast-btn" onClick={handleUndoDelete}>
-              실행 취소
+              {t("undoDelete")}
             </button>
             <button
               type="button"

src/components/layout/Sidebar.tsx

@@ -7,10 +7,11 @@ import { useTheme } from "@/app/providers";
 import { LanguageSelector } from "@/components/ui/LanguageSelector";
 import { ContextMenu, MenuItem } from "@/components/ui/ContextMenu";
 import { SettingsModal } from "@/components/settings/SettingsModal";
-import { getCustomTags, MockTag, getAllTrashTasks, getDemoStore } from "@/lib/mockData";
+import { getCustomTags, MockTag, getAllTrashTasks, getDemoStore, getTagTaskCount, filterActiveTree, MockTask } from "@/lib/mockData";
 
 interface User { id: string; name?: string | null; email?: string | null }
 interface List { id: string; name: string; color: string; icon: string; _count?: { tasks: number } }
+interface APITag { id: string; name: string; color: string; _count?: { tasks: number } }
 
 const LIST_COLORS = ["#5B8DEF", "#E05252", "#3DAD84", "#E8931A", "#8B6CF7", "#E4609B", "#0ABAD1", "#F17A3B", "#6875F5", "#14B8A6"];
 
@@ -74,14 +75,8 @@ export function Sidebar({
   const [exportListId, setExportListId] = useState<string>("all");
   const [exportIncludeCompleted, setExportIncludeCompleted] = useState<boolean>(true);
   const [exporting, setExporting] = useState(false);
-  const [tags, setTags] = useState<MockTag[]>(() => (typeof window !== "undefined" ? getCustomTags() : []));
-  const [internalTrashCount, setInternalTrashCount] = useState(() => {
-    if (typeof window !== "undefined") {
-      const store = getDemoStore();
-      return getAllTrashTasks(store.tasks).length;
-    }
-    return 0;
-  });
+  const [tags, setTags] = useState<Array<MockTag | APITag>>(() => (isDemo && typeof window !== "undefined" ? getCustomTags() : []));
+  const [internalTrashCount, setInternalTrashCount] = useState(0);
 
   const trashCount = externalTrashCount !== undefined ? externalTrashCount : internalTrashCount;
 
@@ -98,17 +93,16 @@ export function Sidebar({
   const inputRef = useRef<HTMLInputElement>(null);
   const fileRef = useRef<HTMLInputElement>(null);
 
+  const initialListSelectedRef = useRef(false);
+
   useEffect(() => {
+    if (isDemo) {
       setTags(getCustomTags());
       const store = getDemoStore();
       const trashed = getAllTrashTasks(store.tasks);
       setInternalTrashCount(trashed.length);
-  }, [lists]);
-
-  const initialListSelectedRef = useRef(false);
-
-  useEffect(() => {
-    if (!isDemo) {
+    } else {
+      // Load lists
       fetch("/api/lists")
         .then((r) => (r.ok ? r.json() : []))
         .then((data) => {
@@ -121,8 +115,26 @@ export function Sidebar({
           }
         })
         .catch((err) => console.error("Failed to load lists", err));
+
+      // Load tags
+      fetch("/api/tags")
+        .then((r) => (r.ok ? r.json() : []))
+        .then((data) => {
+          if (Array.isArray(data)) setTags(data);
+          else setTags([]);
+        })
+        .catch((err) => {
+          console.error("Failed to load tags", err);
+          setTags([]);
+        });
+
+      // Load trash count
+      fetch("/api/tasks?countTrash=true")
+        .then((r) => (r.ok ? r.json() : { count: 0 }))
+        .then((data) => setInternalTrashCount(data.count || 0))
+        .catch(() => {});
     }
-  }, [isDemo, onListSelect, selectedListId, isTrashActive, selectedTag, setLists]);
+  }, [isDemo, onListSelect, selectedListId, isTrashActive, selectedTag, setLists, lists.length]);
 
   useEffect(() => {
     if (showNewList) setTimeout(() => inputRef.current?.focus(), 50);
@@ -573,7 +585,16 @@ export function Sidebar({
                 <span className="item-label">{list.name}</span>
               )}
 
-              <span className="item-count">{list._count?.tasks || ""}</span>
+              <span className="item-count">
+                {isDemo
+                  ? (() => {
+                      if (typeof window === "undefined") return "";
+                      const store = getDemoStore();
+                      const active = filterActiveTree(store.tasks as MockTask[], false).filter((t) => t.listId === list.id);
+                      return active.length > 0 ? active.length : "";
+                    })()
+                  : (list._count?.tasks ? list._count.tasks : "")}
+              </span>
               <button
                 className="icon-btn"
                 style={{ width: 20, height: 20, opacity: 0, transition: "opacity var(--dur-fast)", flexShrink: 0 }}
@@ -598,7 +619,11 @@ export function Sidebar({
         {tags.length > 0 && (
           <div className="sidebar-section">
             <div className="sidebar-section-label">🏷️ {t("tags") || "Tags"}</div>
-            {tags.map((tag) => (
+            {tags.map((tag) => {
+              const tagCount = isDemo && typeof window !== "undefined"
+                ? getTagTaskCount(getDemoStore().tasks, tag.name)
+                : ((tag as APITag)._count?.tasks ?? 0);
+              return (
                 <div
                   key={tag.id}
                   className={`sidebar-item${selectedTag === tag.name ? " active" : ""}`}
@@ -606,8 +631,10 @@ export function Sidebar({
                 >
                   <span style={{ color: tag.color, fontSize: 13, fontWeight: 700 }}>#</span>
                   <span className="item-label">{tag.name}</span>
+                  {tagCount > 0 && <span className="item-count">{tagCount}</span>}
                 </div>
-            ))}
+              );
+            })}
           </div>
         )}
 
@@ -616,14 +643,19 @@ export function Sidebar({
           <div
             className={`sidebar-item${isTrashActive ? " active" : ""}`}
             id="trash-menu-btn"
-            onClick={onTrashSelect}
+            onClick={() => {
+              onTagSelect(null);
+              onTrashSelect();
+            }}
             style={{ color: isTrashActive ? "var(--danger)" : "var(--text-secondary)" }}
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ opacity: 0.7 }}>
               <polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14H6L5 6" /><path d="M10 11v6M14 11v6" /><path d="M9 6V4h6v2" />
             </svg>
             <span className="item-label">{t("trash") || "Trash"}</span>
-            {trashCount > 0 && <span className="item-count" style={{ color: "var(--danger)" }}>{trashCount}</span>}
+            {trashCount > 0 ? (
+              <span className="item-count" style={{ color: "var(--danger)", fontWeight: 700 }}>{trashCount}</span>
+            ) : null}
           </div>
         </div>
 

src/components/settings/SettingsModal.tsx

@@ -131,8 +131,8 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
   const { prefs, updatePrefs, resetToDefaults } = useUserPrefs();
 
   const [activeTab, setActiveTab] = useState<"profile" | "preferences" | "labs" | "sync" | "admin">("profile");
-  const [displayName, setDisplayName] = useState(() => user.name || (typeof window !== "undefined" ? getUserSettings().displayName : "Demo User"));
-  const [email, setEmail] = useState(() => user.email || (typeof window !== "undefined" ? getUserSettings().email : "demo@checkflow.local"));
+  const [displayName, setDisplayName] = useState(() => user.name || (typeof window !== "undefined" ? getUserSettings().displayName : "User"));
+  const [email, setEmail] = useState(() => user.email || (typeof window !== "undefined" ? getUserSettings().email : "user@checkflow.local"));
   const [password, setPassword] = useState("");
   const [trashRetention, setTrashRetention] = useState(() => (typeof window !== "undefined" ? (getUserSettings().trashRetentionDays ?? 30) : 30));
   const [savedMsg, setSavedMsg] = useState("");
@@ -143,8 +143,8 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
   useEffect(() => {
     if (isOpen) {
       const s = getUserSettings();
-      setDisplayName(user.name || s.displayName);
-      setEmail(user.email || s.email);
+      setDisplayName(user.name || s.displayName || "User");
+      setEmail(user.email || s.email || "user@checkflow.local");
       setTrashRetention(s.trashRetentionDays ?? 30);
     }
   }, [isOpen, user]);
@@ -177,7 +177,7 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
       language: lang,
     };
     saveUserSettings(newSettings);
-    setSavedMsg("✓ " + (lang === "ko" ? "설정이 저장되었습니다" : lang === "ja" ? "設定が保存されました" : "Settings saved"));
+    setSavedMsg("✓ " + t("settingsSaved"));
     setTimeout(() => {
       setSavedMsg("");
       onClose();
@@ -192,11 +192,11 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
   const accentPreview = `hsl(${hue}, ${sat}%, 54%)`;
 
   const tabs = [
-    { id: "profile", label: `👤 ${t("profile") || "Profile"}` },
-    { id: "preferences", label: `⚙️ ${t("preferences") || "Preferences"}` },
-    { id: "labs", label: `🧪 ${t("labs") || "Labs"}` },
-    { id: "sync", label: `📱 ${t("syncIntegrations") || "Integrations"}` },
-    { id: "admin", label: `👑 ${t("admin") || "Admin"}` },
+    { id: "profile", label: `👤 ${t("profile")}` },
+    { id: "preferences", label: `⚙️ ${t("preferences")}` },
+    { id: "labs", label: `🧪 ${t("labs")}` },
+    { id: "sync", label: `📱 ${t("syncIntegrations")}` },
+    { id: "admin", label: `👑 ${t("admin")}` },
   ] as const;
 
   return (
@@ -208,7 +208,7 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
       >
         {/* Header */}
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
-          <h2 className="modal-title" style={{ marginBottom: 0, fontSize: 17 }}>⚙️ {t("settingsModalTitle") || "Settings"}</h2>
+          <h2 className="modal-title" style={{ marginBottom: 0, fontSize: 17 }}>⚙️ {t("settingsModalTitle")}</h2>
           <button className="icon-btn" onClick={onClose} aria-label="Close" type="button">✕</button>
         </div>
 
@@ -255,15 +255,32 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
             <div className="settings-tab-content">
               <div className="form-group">
                 <label className="form-label">{t("displayName")}</label>
-                <input className="form-input" value={displayName} onChange={(e) => setDisplayName(e.target.value)} placeholder="Your Name" />
+                <input
+                  className="form-input"
+                  value={displayName}
+                  onChange={(e) => setDisplayName(e.target.value)}
+                  placeholder={t("yourNamePlaceholder")}
+                />
               </div>
               <div className="form-group">
                 <label className="form-label">{t("email")}</label>
-                <input className="form-input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="your.email@example.com" />
+                <input
+                  className="form-input"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="your.email@example.com"
+                />
               </div>
               <div className="form-group">
-                <label className="form-label">{t("password")} (Change)</label>
-                <input className="form-input" type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="New password (leave blank to keep current)" />
+                <label className="form-label">{t("password")}</label>
+                <input
+                  className="form-input"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder={t("passwordChangePlaceholder")}
+                />
               </div>
             </div>
           )}
@@ -273,16 +290,16 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
             <div className="settings-tab-content">
               <div className="form-group">
                 <label className="form-label" style={{ fontWeight: 600 }}>
-                  🗑️ {t("trashRetention") || "Trash Auto-Delete Retention Period"}
+                  🗑️ {t("trashRetention")}
                 </label>
                 <p style={{ fontSize: 12, color: "var(--text-tertiary)", marginBottom: 8 }}>
-                  {t("trashRetentionHint") || "Deleted tasks will be permanently removed after the specified period."}
+                  {t("trashRetentionHint")}
                 </p>
                 <select className="form-input" value={trashRetention} onChange={(e) => setTrashRetention(parseInt(e.target.value, 10))}>
-                  <option value={7}>{t("days7") || "7 Days"}</option>
-                  <option value={14}>{t("days14") || "14 Days"}</option>
-                  <option value={30}>{t("days30") || "30 Days (Recommended)"}</option>
-                  <option value={0}>{t("neverDelete") || "Never Auto-Delete (Manual empty only)"}</option>
+                  <option value={7}>{t("days7")}</option>
+                  <option value={14}>{t("days14")}</option>
+                  <option value={30}>{t("days30")}</option>
+                  <option value={0}>{t("neverDelete")}</option>
                 </select>
               </div>
               <div className="form-group">
@@ -320,46 +337,46 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
             <div className="settings-tab-content">
               {/* Section: View */}
               <div style={{ fontSize: 11, fontWeight: 700, color: "var(--text-tertiary)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8 }}>
-                View
+                {t("labsSectionView")}
               </div>
 
               <LabsRow
-                label="📊 Kanban Board"
-                desc="Switch between list view and 3-column Kanban board (To Do / In Progress / Done)."
+                label={`📊 ${t("labsKanbanTitle")}`}
+                desc={t("labsKanbanDesc")}
               >
                 <SegmentedControl
-                  value={prefs.viewMode}
+                  value={prefs.labs?.kanbanBoard ? "enabled" : "disabled"}
                   options={[
-                    { label: "List", value: "list" },
-                    { label: "Kanban", value: "kanban" },
+                    { label: t("animationOff"), value: "disabled" },
+                    { label: "ON", value: "enabled" },
                   ]}
-                  onChange={(v) => updatePrefs({ viewMode: v })}
+                  onChange={(v) => updatePrefs({ labs: { kanbanBoard: v === "enabled" } })}
                 />
               </LabsRow>
 
               {/* Section: Layout */}
               <div style={{ fontSize: 11, fontWeight: 700, color: "var(--text-tertiary)", letterSpacing: "0.08em", textTransform: "uppercase", margin: "16px 0 8px" }}>
-                Layout
+                {t("labsSectionLayout")}
               </div>
 
               <LabsRow
-                label="📐 Content Density"
-                desc="Controls the vertical spacing of task items."
+                label={`📐 ${t("labsDensityTitle")}`}
+                desc={t("labsDensityDesc")}
               >
                 <SegmentedControl
                   value={prefs.density}
                   options={[
-                    { label: "Compact", value: "compact" },
-                    { label: "Default", value: "default" },
-                    { label: "Airy", value: "comfortable" },
+                    { label: t("densityCompact"), value: "compact" },
+                    { label: t("densityDefault"), value: "default" },
+                    { label: t("densityComfortable"), value: "comfortable" },
                   ]}
                   onChange={(v) => updatePrefs({ density: v })}
                 />
               </LabsRow>
 
               <LabsRow
-                label="↔️ Sidebar Width"
-                desc={`Drag the sidebar edge or adjust here. (${prefs.sidebarWidth}px)`}
+                label={`↔️ ${t("sidebarWidthTitle")}`}
+                desc={`${t("sidebarWidthDesc")} (${prefs.sidebarWidth}px)`}
               >
                 <PrefSlider
                   min={160}
@@ -371,8 +388,8 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
               </LabsRow>
 
               <LabsRow
-                label="↔️ Detail Panel Width"
-                desc={`Drag the panel edge or adjust here. (${prefs.detailWidth}px)`}
+                label={`↔️ ${t("detailWidthTitle")}`}
+                desc={`${t("detailWidthDesc")} (${prefs.detailWidth}px)`}
               >
                 <PrefSlider
                   min={300}
@@ -385,27 +402,27 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
 
               {/* Section: Appearance */}
               <div style={{ fontSize: 11, fontWeight: 700, color: "var(--text-tertiary)", letterSpacing: "0.08em", textTransform: "uppercase", margin: "16px 0 8px" }}>
-                Appearance
+                {t("labsSectionAppearance")}
               </div>
 
               <LabsRow
-                label="🔤 Font Size"
-                desc="Base font size across the app."
+                label={`🔤 ${t("fontSizeTitle")}`}
+                desc={t("fontSizeDesc")}
               >
                 <SegmentedControl
                   value={prefs.fontSize}
                   options={[
-                    { label: "S", value: "small" },
-                    { label: "M", value: "default" },
-                    { label: "L", value: "large" },
+                    { label: t("fontSizeSmall"), value: "small" },
+                    { label: t("fontSizeMedium"), value: "default" },
+                    { label: t("fontSizeLarge"), value: "large" },
                   ]}
                   onChange={(v) => updatePrefs({ fontSize: v })}
                 />
               </LabsRow>
 
               <LabsRow
-                label="🎨 Accent Color"
-                desc="Choose the hue of your accent color. Saturation controls vibrancy."
+                label={`🎨 ${t("accentColorTitle")}`}
+                desc={t("accentColorDesc")}
               >
                 <div style={{ display: "flex", flexDirection: "column", gap: 6, alignItems: "flex-end" }}>
                   {/* Hue ring preview */}
@@ -431,7 +448,7 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
                     ))}
                   </div>
                   <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
-                    <span style={{ fontSize: 11, color: "var(--text-tertiary)" }}>Saturation</span>
+                    <span style={{ fontSize: 11, color: "var(--text-tertiary)" }}>{t("saturationLabel")}</span>
                     <PrefSlider
                       min={20}
                       max={100}
@@ -442,7 +459,7 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
                   </div>
                   {/* Custom hue input */}
                   <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
-                    <span style={{ fontSize: 11, color: "var(--text-tertiary)" }}>Hue °</span>
+                    <span style={{ fontSize: 11, color: "var(--text-tertiary)" }}>{t("hueLabel")}</span>
                     <input
                       type="range"
                       min={0}
@@ -457,31 +474,31 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
               </LabsRow>
 
               <LabsRow
-                label="⬛ Border Roundness"
-                desc="Controls the roundness of cards, buttons, and UI elements."
+                label={`⬛ ${t("roundnessTitle")}`}
+                desc={t("roundnessDesc")}
               >
                 <SegmentedControl
                   value={prefs.roundness}
                   options={[
-                    { label: "Sharp", value: "sharp" },
-                    { label: "Default", value: "default" },
-                    { label: "Round", value: "round" },
+                    { label: t("roundnessSharp"), value: "sharp" },
+                    { label: t("roundnessDefault"), value: "default" },
+                    { label: t("roundnessRound"), value: "round" },
                   ]}
                   onChange={(v) => updatePrefs({ roundness: v })}
                 />
               </LabsRow>
 
               <LabsRow
-                label="⚡ Animation Speed"
-                desc="Controls the speed of transitions and hover effects."
+                label={`⚡ ${t("animationSpeedTitle")}`}
+                desc={t("animationSpeedDesc")}
               >
                 <SegmentedControl
                   value={prefs.animationSpeed}
                   options={[
-                    { label: "Off", value: "none" },
-                    { label: "Fast", value: "fast" },
-                    { label: "Default", value: "default" },
-                    { label: "Slow", value: "slow" },
+                    { label: t("animationOff"), value: "none" },
+                    { label: t("animationFast"), value: "fast" },
+                    { label: t("animationDefault"), value: "default" },
+                    { label: t("animationSlow"), value: "slow" },
                   ]}
                   onChange={(v) => updatePrefs({ animationSpeed: v })}
                 />
@@ -490,20 +507,20 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
               {/* Reset to Defaults */}
               <div style={{ marginTop: 20, borderTop: "1px solid var(--border)", paddingTop: 16 }}>
                 <LabsRow
-                  label="🔄 Reset to Defaults"
-                  desc="Restores all layout, appearance, and view settings to their factory defaults."
+                  label={`🔄 ${t("resetDefaultsTitle")}`}
+                  desc={t("resetDefaultsDesc")}
                 >
                   <button
                     type="button"
                     className="btn btn-sm"
                     style={{ color: "var(--danger)", border: "1px solid var(--danger)", background: "transparent" }}
                     onClick={() => {
-                      if (confirm(t("resetConfirm") || "Reset all customizations to defaults?")) {
+                      if (confirm(t("resetConfirm"))) {
                         resetToDefaults();
                       }
                     }}
                   >
-                    {t("resetDefaults") || "Reset"}
+                    {t("resetDefaults")}
                   </button>
                 </LabsRow>
               </div>
@@ -514,15 +531,15 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
           {activeTab === "sync" && (
             <div className="settings-tab-content">
               <h3 style={{ fontSize: 15, fontWeight: 700, marginBottom: 6 }}>
-                📱 {t("syncTitle") || "CalDAV & Mobile Sync (Android / Apple)"}
+                📱 {t("syncTitle")}
               </h3>
               <p style={{ fontSize: 13, color: "var(--text-secondary)", lineHeight: 1.5, marginBottom: 14 }}>
-                {t("syncDesc") || "CheckFlow supports native two-way synchronization with Android, Apple Reminders, and Thunderbird via standard CalDAV."}
+                {t("syncDesc")}
               </p>
 
               {/* Endpoint bar & Action buttons */}
               <div className="form-group" style={{ marginBottom: 14 }}>
-                <label className="form-label" style={{ fontWeight: 600 }}>{t("syncBaseUrl") || "CalDAV Server Base URL"}</label>
+                <label className="form-label" style={{ fontWeight: 600 }}>{t("syncBaseUrl")}</label>
                 <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                   <input
                     className="form-input"
@@ -541,7 +558,7 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
                     }}
                     style={{ minWidth: 80, fontWeight: 600 }}
                   >
-                    {copiedCalDav ? `✓ ${t("syncCopied") || "Copied!"}` : `📋 ${t("syncCopyUrl") || "Copy"}`}
+                    {copiedCalDav ? `✓ ${t("syncCopied")}` : `📋 ${t("syncCopyUrl")}`}
                   </button>
                 </div>
               </div>
@@ -555,7 +572,7 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
                   disabled={testSyncStatus === "testing"}
                   style={{ display: "inline-flex", alignItems: "center", gap: 6 }}
                 >
-                  {testSyncStatus === "testing" ? `⏳ ${t("syncTesting") || "Testing..."}` : `🔍 ${t("syncTestConnection") || "Test Endpoint"}`}
+                  {testSyncStatus === "testing" ? `⏳ ${t("syncTesting")}` : `🔍 ${t("syncTestConnection")}`}
                 </button>
                 <a
                   href="/api/dav"
@@ -564,16 +581,16 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
                   className="btn btn-sm btn-ghost"
                   style={{ display: "inline-flex", alignItems: "center", gap: 6, textDecoration: "none" }}
                 >
-                  📥 {t("syncDownloadIcs") || "Download .ICS Feed"}
+                  📥 {t("syncDownloadIcs")}
                 </a>
                 {testSyncStatus === "success" && (
                   <span style={{ fontSize: 12, color: "var(--success)", fontWeight: 600 }}>
-                    {t("syncTestSuccess") || "✓ CalDAV endpoint responded successfully"}
+                    ✓ {t("syncTestSuccess")}
                   </span>
                 )}
                 {testSyncStatus === "error" && (
                   <span style={{ fontSize: 12, color: "var(--danger)", fontWeight: 600 }}>
-                    ✕ Endpoint test failed
+                    ✕ {t("syncTestError")}
                   </span>
                 )}
               </div>
@@ -583,9 +600,9 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
                 <SegmentedControl
                   value={syncPlatform}
                   options={[
-                    { label: `🤖 ${t("syncTabAndroid") || "Android (DAVx⁵)"}`, value: "android" },
-                    { label: `🍎 ${t("syncTabApple") || "Apple Reminders"}`, value: "apple" },
-                    { label: `🦅 ${t("syncTabThunderbird") || "Thunderbird"}`, value: "thunderbird" },
+                    { label: `🤖 ${t("syncTabAndroid")}`, value: "android" },
+                    { label: `🍎 ${t("syncTabApple")}`, value: "apple" },
+                    { label: `🦅 ${t("syncTabThunderbird")}`, value: "thunderbird" },
                   ]}
                   onChange={(v) => setSyncPlatform(v)}
                 />
@@ -615,7 +632,7 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
                       <li>{t("syncAndroidStep4")}</li>
                     </ol>
                     <div style={{ marginTop: 10, fontSize: 11.5, color: "var(--text-tertiary)", borderTop: "1px dashed var(--border)", paddingTop: 8 }}>
-                      💡 <strong>Tip:</strong> In DAVx⁵ account settings, set Sync Interval to <strong>15 minutes</strong> for battery efficiency and near real-time sync.
+                      💡 <strong>Tip:</strong> {t("syncAndroidTip")}
                     </div>
                   </div>
                 )}
@@ -632,7 +649,7 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
                       <li>{t("syncAppleStep4")}</li>
                     </ol>
                     <div style={{ marginTop: 10, fontSize: 11.5, color: "var(--text-tertiary)", borderTop: "1px dashed var(--border)", paddingTop: 8 }}>
-                      💡 <strong>Tip:</strong> If using HTTPS behind a reverse proxy (Nginx/Caddy), ensure valid SSL certificates are trusted by Apple devices.
+                      💡 <strong>Tip:</strong> {t("syncAppleTip")}
                     </div>
                   </div>
                 )}
@@ -649,7 +666,7 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
                       <li>{t("syncThunderbirdStep4")}</li>
                     </ol>
                     <div style={{ marginTop: 10, fontSize: 11.5, color: "var(--text-tertiary)", borderTop: "1px dashed var(--border)", paddingTop: 8 }}>
-                      💡 <strong>Tip:</strong> Thunderbird Tasks view will display CheckFlow priority tags, due dates, and completion status.
+                      💡 <strong>Tip:</strong> {t("syncThunderbirdTip")}
                     </div>
                   </div>
                 )}
@@ -664,7 +681,7 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
                 <span style={{ fontSize: 24 }}>👑</span>
                 <div>
                   <h3 style={{ fontSize: 15, fontWeight: 700, margin: 0 }}>
-                    {t("admin") || "Admin Console"}
+                    {t("admin")}
                   </h3>
                   <p style={{ fontSize: 12, color: "var(--text-tertiary)", margin: "2px 0 0" }}>
                     Multi-user administration, account control, and system telemetry
@@ -685,7 +702,7 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
               >
                 <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10, flexWrap: "wrap", gap: 8 }}>
                   <div>
-                    <strong style={{ color: "var(--text-primary)" }}>Current Account:</strong>{" "}
+                    <strong style={{ color: "var(--text-primary)" }}>{t("adminCurrentAccount")}:</strong>{" "}
                     <code style={{ background: "var(--bg-primary)", padding: "2px 6px", borderRadius: 4, border: "1px solid var(--border)" }}>
                       {user.email || "demo@checkflow.local"}
                     </code>
@@ -709,12 +726,12 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
 
                 <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 12 }}>
                   <div style={{ background: "var(--bg-primary)", padding: "10px 12px", borderRadius: "var(--radius-sm)", border: "1px solid var(--border)" }}>
-                    <div style={{ fontSize: 11, color: "var(--text-tertiary)" }}>Isolation Mode</div>
-                    <div style={{ fontSize: 13, fontWeight: 600, marginTop: 2, color: "var(--success)" }}>● Multi-User Privacy</div>
+                    <div style={{ fontSize: 11, color: "var(--text-tertiary)" }}>{t("adminIsolationMode")}</div>
+                    <div style={{ fontSize: 13, fontWeight: 600, marginTop: 2, color: "var(--success)" }}>● {t("adminMultiUserPrivacy")}</div>
                   </div>
                   <div style={{ background: "var(--bg-primary)", padding: "10px 12px", borderRadius: "var(--radius-sm)", border: "1px solid var(--border)" }}>
-                    <div style={{ fontSize: 11, color: "var(--text-tertiary)" }}>CalDAV Endpoint</div>
-                    <div style={{ fontSize: 13, fontWeight: 600, marginTop: 2, color: "var(--accent)" }}>● Active / Enabled</div>
+                    <div style={{ fontSize: 11, color: "var(--text-tertiary)" }}>{t("adminCalDavEndpoint")}</div>
+                    <div style={{ fontSize: 13, fontWeight: 600, marginTop: 2, color: "var(--accent)" }}>● {t("adminActiveEnabled")}</div>
                   </div>
                 </div>
               </div>
@@ -725,7 +742,7 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
                   className="btn btn-primary"
                   style={{ display: "inline-flex", alignItems: "center", gap: 8, textDecoration: "none" }}
                 >
-                  🚀 Open Admin Dashboard →
+                  🚀 {t("adminOpenDashboard")}
                 </a>
               </div>
             </div>
@@ -741,7 +758,7 @@ export function SettingsModal({ isOpen, onClose, user, isDemo = false }: Setting
           <div style={{ display: "flex", gap: 8, marginLeft: "auto" }}>
             <button className="btn btn-ghost" onClick={onClose} type="button">{t("cancel")}</button>
             <button className="btn btn-primary" onClick={handleSave} type="button">
-              {t("save") || "Save Changes"}
+              {t("save")}
             </button>
           </div>
         </div>

src/components/tasks/KanbanView.tsx

@@ -101,6 +101,27 @@ export function KanbanView({
                 </span>
               )}
 
+              {task.tags && task.tags.length > 0 && task.tags.map((tg) => {
+                const tagName = typeof tg === "string" ? tg : tg.tag?.name;
+                const tagKey = typeof tg === "string" ? tg : tg.tag?.id || tg.tag?.name;
+                if (!tagName) return null;
+                return (
+                  <span
+                    key={tagKey}
+                    style={{
+                      fontSize: 10,
+                      fontWeight: 600,
+                      padding: "2px 6px",
+                      borderRadius: "var(--radius-sm)",
+                      background: "rgba(59, 130, 246, 0.12)",
+                      color: "#3B82F6",
+                    }}
+                  >
+                    #{tagName}
+                  </span>
+                );
+              })}
+
               {subtaskCount > 0 && (
                 <span
                   style={{

src/components/tasks/MarkdownNoteEditor.tsx

@@ -17,6 +17,11 @@ export function MarkdownNoteEditor({ value, onChange, onSave }: MarkdownNoteEdit
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const previewRef = useRef<HTMLDivElement>(null);
 
+  // Reset to preview whenever value or active task changes
+  useEffect(() => {
+    // Keep preview mode as primary
+  }, []);
+
   // Configure marked to open links in new tabs safely
   useEffect(() => {
     const renderer = new marked.Renderer();
@@ -49,7 +54,7 @@ export function MarkdownNoteEditor({ value, onChange, onSave }: MarkdownNoteEdit
   // Convert markdown to sanitized HTML with safe links
   const renderMarkdownHtml = () => {
     if (!value || !value.trim()) {
-      return `<p style="color: var(--text-tertiary); font-style: italic; padding: 8px 0;">${t("notesPlaceholder").split("\n")[0]}</p>`;
+      return `<div style="color: var(--text-tertiary); font-style: italic; user-select: none; line-height: 1.6;">${t("notesPlaceholder")}</div>`;
     }
 
     try {
@@ -96,6 +101,7 @@ export function MarkdownNoteEditor({ value, onChange, onSave }: MarkdownNoteEdit
           alignItems: "center",
           justifyContent: "space-between",
           padding: "4px 8px 8px 8px",
+          flexShrink: 0,
         }}
       >
         <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.05em", color: "var(--text-tertiary)" }}>
@@ -133,7 +139,19 @@ export function MarkdownNoteEditor({ value, onChange, onSave }: MarkdownNoteEdit
       </div>
 
       {/* Editor / Preview Area */}
-      <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", position: "relative" }}>
+      <div
+        style={{
+          flex: 1,
+          minHeight: 0,
+          display: "flex",
+          flexDirection: "column",
+          position: "relative",
+          background: "var(--bg-primary)",
+          borderRadius: "var(--radius-md)",
+          border: "1px solid var(--border)",
+          overflow: "hidden",
+        }}
+      >
         {mode === "edit" ? (
           <textarea
             ref={textareaRef}
@@ -142,8 +160,7 @@ export function MarkdownNoteEditor({ value, onChange, onSave }: MarkdownNoteEdit
               flex: 1,
               width: "100%",
               height: "100%",
-              minHeight: 120,
-              padding: "8px 10px",
+              padding: "10px 12px",
               background: "transparent",
               border: "none",
               outline: "none",
@@ -152,6 +169,7 @@ export function MarkdownNoteEditor({ value, onChange, onSave }: MarkdownNoteEdit
               lineHeight: 1.6,
               resize: "none",
               fontFamily: "inherit",
+              boxSizing: "border-box",
             }}
             placeholder={t("notesPlaceholder")}
             value={value}
@@ -169,11 +187,13 @@ export function MarkdownNoteEditor({ value, onChange, onSave }: MarkdownNoteEdit
               flex: 1,
               width: "100%",
               height: "100%",
-              padding: "8px 10px",
+              padding: "10px 12px",
               overflowY: "auto",
               color: "var(--text-primary)",
               fontSize: 13.5,
               lineHeight: 1.6,
+              boxSizing: "border-box",
+              cursor: "text",
             }}
             dangerouslySetInnerHTML={{ __html: renderMarkdownHtml() }}
             onClick={() => {

src/components/tasks/TaskDetail.tsx

@@ -40,11 +40,30 @@ export function TaskDetail({
   const [dueDate, setDueDate] = useState(task.dueDate ? task.dueDate.split("T")[0] : "");
   const [priority, setPriority] = useState(task.priority);
   const [tags, setTags] = useState<{ tag: Tag }[]>(task.tags || []);
-  const [allAvailableTags, setAllAvailableTags] = useState<MockTag[]>(() => (typeof window !== "undefined" ? getCustomTags() : []));
+  const [allAvailableTags, setAllAvailableTags] = useState<MockTag[]>(() => (isDemo && typeof window !== "undefined" ? getCustomTags() : []));
   const [showTagPicker, setShowTagPicker] = useState(false);
   const [showListPicker, setShowListPicker] = useState(false);
+  const [showPriorityPicker, setShowPriorityPicker] = useState(false);
   const [newTagName, setNewTagName] = useState("");
 
+  // Load user's actual tags in non-demo mode
+  useEffect(() => {
+    if (isDemo) {
+      if (typeof window !== "undefined") {
+        setAllAvailableTags(getCustomTags());
+      }
+    } else {
+      fetch("/api/tags")
+        .then((res) => (res.ok ? res.json() : []))
+        .then((data) => {
+          if (Array.isArray(data)) {
+            setAllAvailableTags(data);
+          }
+        })
+        .catch((err) => console.error("Failed to fetch user tags", err));
+    }
+  }, [isDemo]);
+
   // Modular Blocks Customization via global prefs
   const { prefs, updatePrefs } = useUserPrefs();
   const blockOrder = prefs.detailBlockOrder;
@@ -160,8 +179,8 @@ export function TaskDetail({
         const updatedTask: Task = {
           ...task,
           ...data,
-          children: subtasks,
-          tags,
+          children: (data.children as Task[]) || subtasks,
+          tags: (data.tags as { tag: Tag }[]) || tags,
           updatedAt: new Date().toISOString(),
         } as Task;
         if (onDemoUpdateTask) onDemoUpdateTask(updatedTask);
@@ -243,17 +262,43 @@ export function TaskDetail({
     save(task.id, { tags: nextTags });
   };
 
-  const addCustomTag = () => {
+  const addCustomTag = async () => {
     const trimmed = newTagName.trim().replace(/^#/, "");
     if (!trimmed) return;
+    const randomColor = ["#4B7BF5", "#10B981", "#EF4444", "#F59E0B", "#8B5CF6"][Math.floor(Math.random() * 5)];
+
+    if (isDemo) {
       const newTag: MockTag = {
         id: "tag-" + Date.now(),
         name: trimmed,
-      color: ["#4B7BF5", "#10B981", "#EF4444", "#F59E0B", "#8B5CF6"][Math.floor(Math.random() * 5)],
+        color: randomColor,
       };
-    setAllAvailableTags((p) => [...p, newTag]);
+      const updatedAvailable = [...allAvailableTags, newTag];
+      setAllAvailableTags(updatedAvailable);
+      if (typeof window !== "undefined") {
+        const { saveCustomTags } = require("@/lib/mockData");
+        saveCustomTags(updatedAvailable);
+      }
       toggleTag(newTag);
       setNewTagName("");
+      return;
+    }
+
+    try {
+      const res = await fetch("/api/tags", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: trimmed, color: randomColor }),
+      });
+      if (res.ok) {
+        const createdTag = await res.json();
+        setAllAvailableTags((prev) => [...prev.filter((tItem) => tItem.id !== createdTag.id), createdTag]);
+        toggleTag(createdTag);
+        setNewTagName("");
+      }
+    } catch (err) {
+      console.error("Failed to create tag", err);
+    }
   };
 
   const addSubtask = useCallback(async () => {
@@ -701,31 +746,63 @@ export function TaskDetail({
             }}
           />
 
-          {/* Priority selector */}
-          <select
-            className="tick-meta-chip"
+          {/* Priority custom popover chip */}
+          <div style={{ position: "relative" }}>
+            <button
+              type="button"
+              className={`tick-meta-chip${priority > 0 ? " active" : ""}`}
+              onClick={() => setShowPriorityPicker((p) => !p)}
               style={{
                 fontSize: 11.5,
                 padding: "3px 8px",
-              cursor: "pointer",
+                borderRadius: "var(--radius-sm)",
                 border: "1px solid var(--border)",
-              color: priority > 0 ? priorityMap[priority].color : "inherit",
-              fontWeight: priority > 0 ? 700 : 500,
-            }}
-            value={priority}
-            onChange={(e) => {
-              const val = parseInt(e.target.value, 10);
-              setPriority(val);
-              save(task.id, { priority: val });
+                color: priority > 0 ? priorityMap[priority].color : "var(--text-tertiary)",
+                borderColor: priority > 0 ? priorityMap[priority].color : "var(--border)",
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 5,
+                cursor: "pointer",
               }}
+              title={t("selectPriority")}
+            >
+              <span>🚩</span>
+              <span>{priorityMap[priority].label}</span>
+            </button>
+
+            {showPriorityPicker && (
+              <div
+                className="dropdown"
+                style={{ left: 0, top: "calc(100% + 4px)", minWidth: 130, padding: 4, zIndex: 130 }}
+                onClick={(e) => e.stopPropagation()}
               >
                 {priorityMap.map((p, idx) => (
-              <option key={idx} value={idx}>
-                {p.icon ? `${p.icon} ` : ""}
-                {p.label}
-              </option>
+                  <div
+                    key={idx}
+                    className="context-menu-item"
+                    style={{
+                      padding: "5px 8px",
+                      fontSize: 12,
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6,
+                      color: idx > 0 ? p.color : "inherit",
+                      fontWeight: priority === idx ? 700 : 400,
+                    }}
+                    onClick={() => {
+                      setPriority(idx);
+                      save(task.id, { priority: idx });
+                      setShowPriorityPicker(false);
+                    }}
+                  >
+                    <span>{idx === 0 ? "○" : "●"}</span>
+                    <span>{p.label}</span>
+                  </div>
                 ))}
-          </select>
+              </div>
+            )}
+          </div>
 
           {/* Tag Selector */}
           <div style={{ position: "relative" }}>

src/components/tasks/TaskList.tsx

@@ -44,7 +44,7 @@ interface TaskItemProps {
   isTrashMode?: boolean;
   onRestore?: (id: string) => void;
   onPermanentDelete?: (id: string) => void;
-  onDragTask?: (draggedId: string, targetId: string, position: "before" | "after") => void;
+  onDragTask?: (draggedId: string, targetId: string, position: "before" | "after" | "inside" | "root") => void;
 }
 
 // Recursive Task Tree Item (Supports 1st, 2nd, 3rd, N-level sub-tasks seamlessly)
@@ -157,12 +157,12 @@ function RecursiveTaskItem({
     touchStartX.current = null;
   };
 
-  const [dragOverPos, setDragOverPos] = useState<"top" | "bottom" | null>(null);
+  const [isDragOver, setIsDragOver] = useState(false);
 
   return (
     <div style={{ paddingLeft: depth > 0 ? 24 : 0, position: "relative" }}>
       <div
-        className={`task-item${task.completed ? " completed" : ""}${isSelected ? " selected" : ""}${dragOverPos ? ` drag-over-${dragOverPos}` : ""}`}
+        className={`task-item${task.completed ? " completed" : ""}${isSelected ? " selected" : ""}${isDragOver ? " drag-over-nested" : ""}`}
         onClick={() => onSelect(task)}
         tabIndex={0}
         onKeyDown={(e) => {
@@ -183,20 +183,25 @@ function RecursiveTaskItem({
         onDragOver={(e) => {
           if (isTrashMode) return;
           e.preventDefault();
+          e.stopPropagation();
           e.dataTransfer.dropEffect = "move";
-          const rect = e.currentTarget.getBoundingClientRect();
-          const mid = rect.top + rect.height / 2;
-          setDragOverPos(e.clientY < mid ? "top" : "bottom");
+          if (!isDragOver) setIsDragOver(true);
+        }}
+        onDragLeave={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragOver(false);
         }}
-        onDragLeave={() => setDragOverPos(null)}
         onDrop={(e) => {
           if (isTrashMode) return;
           e.preventDefault();
+          e.stopPropagation();
+          setIsDragOver(false);
           const draggedId = e.dataTransfer.getData("text/plain");
           if (draggedId && draggedId !== task.id && onDragTask) {
-            onDragTask(draggedId, task.id, dragOverPos === "top" ? "before" : "after");
+            // Unified interaction: drop on task to nest as subtask
+            onDragTask(draggedId, task.id, "inside");
           }
-          setDragOverPos(null);
         }}
         id={`task-${task.id}`}
         style={{
@@ -204,6 +209,9 @@ function RecursiveTaskItem({
           marginLeft: depth > 0 ? 8 : 0,
           transform: `translateX(${swipeOffset}px)`,
           transition: swipeOffset === 0 ? "transform 0.2s cubic-bezier(0.16, 1, 0.3, 1)" : "none",
+          outline: isDragOver ? "2px dashed var(--accent)" : undefined,
+          outlineOffset: -2,
+          background: isDragOver ? "var(--accent-light, rgba(75, 123, 245, 0.12))" : undefined,
         }}
       >
         {/* Notion-style 6-dot Drag Handle */}
@@ -295,7 +303,8 @@ function RecursiveTaskItem({
               style={{ padding: "2px 6px", fontSize: depth > 0 ? 13 : 14, fontWeight: 500, height: 26, width: "100%" }}
             />
           ) : (
-            <div
+            <div style={{ display: "inline-flex", alignItems: "center", maxWidth: "100%" }}>
+              <span
                 className="task-title"
                 onDoubleClick={(e) => {
                   if (isTrashMode) return;
@@ -303,9 +312,15 @@ function RecursiveTaskItem({
                   setEditingTitle(true);
                 }}
                 title="Double click or press F2 to edit"
-              style={{ fontSize: depth > 0 ? 13 : 14, fontWeight: depth === 0 ? 600 : 500 }}
+                style={{
+                  fontSize: depth > 0 ? 13 : 14,
+                  fontWeight: depth === 0 ? 600 : 500,
+                  cursor: "text",
+                  display: "inline-block",
+                }}
               >
                 {task.title}
+              </span>
             </div>
           )}
 
@@ -771,17 +786,43 @@ export function TaskList({
     setEditingHeader(false);
   };
 
-  // Tree-aware reordering function that supports reordering both top-level tasks and nested subtasks
-  const handleReorderTasks = useCallback((draggedId: string, targetId: string, position: "before" | "after") => {
-    setTasks((prev) => {
-      // Helper to find and remove a node from the tree
-      let extractedNode: Task | null = null;
+  // Helper: check if targetId is inside the subtree of ancestorId (prevents circular nesting / node disappearing)
+  const isDescendantNode = (nodes: Task[], ancestorId: string, targetId: string): boolean => {
+    for (const node of nodes) {
+      if (node.id === ancestorId) {
+        const checkChildren = (children: Task[]): boolean => {
+          for (const c of children) {
+            if (c.id === targetId) return true;
+            if (c.children && c.children.length > 0 && checkChildren(c.children)) return true;
+          }
+          return false;
+        };
+        return checkChildren(node.children || []);
+      }
+      if (node.children && node.children.length > 0) {
+        if (isDescendantNode(node.children, ancestorId, targetId)) return true;
+      }
+    }
+    return false;
+  };
 
+  // Robust Tree-aware reordering function (1st, 2nd, 3rd depth task reordering, promoting to top-level, and demoting into subtask)
+  const handleReorderTasks = useCallback((draggedId: string, targetId: string, position: "before" | "after" | "inside" | "root") => {
+    // Prevent dropping onto itself or into its own subtree (which causes loops/disappearing tasks)
+    if (draggedId === targetId && position !== "root") return;
+
+    setTasks((prev) => {
+      if (isDescendantNode(prev, draggedId, targetId)) {
+        return prev;
+      }
+
+      // 1. Extract and remove the dragged node from its current position
+      let extractedNode: Task | null = null;
       const removeNode = (nodes: Task[]): Task[] => {
         const result: Task[] = [];
         for (const node of nodes) {
           if (node.id === draggedId) {
-            extractedNode = node;
+            extractedNode = { ...node };
           } else {
             const updatedNode = { ...node };
             if (updatedNode.children && updatedNode.children.length > 0) {
@@ -795,23 +836,86 @@ export function TaskList({
 
       const treeWithoutDragged = removeNode(prev);
       if (!extractedNode) return prev;
+      const safeExtractedNode: Task = extractedNode;
 
-      // Helper to insert the extracted node adjacent to targetId in the same list/level
-      const insertNode = (nodes: Task[]): { list: Task[]; inserted: boolean } => {
+      let determinedParentId: string | null = null;
+
+      if (position === "root") {
+        // Promote directly to top-level (1st depth root task)
+        determinedParentId = null;
+        const nodeAsRoot: Task = { ...safeExtractedNode, parentId: null };
+        const finalTree = [...treeWithoutDragged, nodeAsRoot];
+
+        if (isDemo && typeof window !== "undefined") {
+          const store = getDemoStore();
+          saveDemoStore(store.lists, finalTree as unknown as MockTask[]);
+        } else {
+          fetch(`/api/tasks/${draggedId}`, {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ parentId: null }),
+          }).catch((err) => console.error("Failed to promote task to root", err));
+        }
+        return finalTree;
+      }
+
+      // 2. Insert into the target position
+      if (position === "inside") {
+        determinedParentId = targetId;
+        const insertInside = (nodes: Task[]): { list: Task[]; inserted: boolean } => {
+          let hasInserted = false;
+          const newNodes = nodes.map((node) => {
+            if (node.id === targetId) {
+              hasInserted = true;
+              const nodeWithNewParent: Task = { ...safeExtractedNode, parentId: targetId };
+              return {
+                ...node,
+                children: [...(node.children || []), nodeWithNewParent],
+              };
+            }
+            if (node.children && node.children.length > 0) {
+              const res = insertInside(node.children);
+              if (res.inserted) {
+                hasInserted = true;
+                return { ...node, children: res.list };
+              }
+            }
+            return node;
+          });
+          return { list: newNodes, inserted: hasInserted };
+        };
+
+        const result = insertInside(treeWithoutDragged);
+        const finalTree = result.inserted ? result.list : [...treeWithoutDragged, { ...safeExtractedNode, parentId: null }];
+
+        if (isDemo && typeof window !== "undefined") {
+          const store = getDemoStore();
+          saveDemoStore(store.lists, finalTree as unknown as MockTask[]);
+        } else {
+          fetch(`/api/tasks/${draggedId}`, {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ parentId: determinedParentId }),
+          }).catch((err) => console.error("Failed to update parentId", err));
+        }
+        return finalTree;
+      } else {
+        // Drop before/after as sibling (if target is at root level, parentId becomes null -> promoted to 1st level)
+        const insertSibling = (nodes: Task[], currentParentId: string | null): { list: Task[]; inserted: boolean } => {
           const idx = nodes.findIndex((n) => n.id === targetId);
           if (idx !== -1) {
-          const newNodes = [...nodes];
+            determinedParentId = currentParentId;
             const insertIdx = position === "before" ? idx : idx + 1;
-          // Maintain target's parentId for the dragged node
-          const adjustedNode = { ...extractedNode!, parentId: nodes[idx].parentId };
-          newNodes.splice(insertIdx, 0, adjustedNode);
+            const nodeWithNewParent: Task = { ...safeExtractedNode, parentId: currentParentId };
+            const newNodes = [...nodes];
+            newNodes.splice(insertIdx, 0, nodeWithNewParent);
             return { list: newNodes, inserted: true };
           }
 
           let hasInserted = false;
           const newNodes = nodes.map((node) => {
             if (!hasInserted && node.children && node.children.length > 0) {
-            const res = insertNode(node.children);
+              const res = insertSibling(node.children, node.id);
               if (res.inserted) {
                 hasInserted = true;
                 return { ...node, children: res.list };
@@ -823,15 +927,21 @@ export function TaskList({
           return { list: newNodes, inserted: hasInserted };
         };
 
-      const finalTree = insertNode(treeWithoutDragged).list;
+        const result = insertSibling(treeWithoutDragged, null);
+        const finalTree = result.inserted ? result.list : [...treeWithoutDragged, { ...safeExtractedNode, parentId: null }];
 
-      // Update demo store or backend sort orders
         if (isDemo && typeof window !== "undefined") {
           const store = getDemoStore();
           saveDemoStore(store.lists, finalTree as unknown as MockTask[]);
+        } else {
+          fetch(`/api/tasks/${draggedId}`, {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ parentId: determinedParentId }),
+          }).catch((err) => console.error("Failed to update sibling parentId", err));
         }
-
         return finalTree;
+      }
     });
   }, [isDemo, setTasks]);
 
@@ -861,7 +971,8 @@ export function TaskList({
   return (
     <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
       {/* Header */}
-      <div className="main-header">
+      <div className="main-header" style={{ justifyContent: "space-between" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 10, flex: 1, minWidth: 0, marginRight: 12 }}>
           <button className="icon-btn mobile-only" id="menu-btn" onClick={onMenuOpen} aria-label="Menu" type="button">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
               <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
@@ -870,12 +981,12 @@ export function TaskList({
 
           {/* Header Title / Trash Header / Tag Header */}
           {isTrashActive ? (
-          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
               <span style={{ fontSize: 18, fontWeight: 700, color: "var(--danger)" }}>🗑️ {t("trash") || "Trash"}</span>
               <span style={{ fontSize: 12, color: "var(--text-tertiary)" }}>({tasks.length})</span>
             </div>
           ) : selectedTag ? (
-          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
               <span style={{ fontSize: 18, fontWeight: 700, color: "var(--accent)" }}>🏷️ #{selectedTag}</span>
               <span style={{ fontSize: 12, color: "var(--text-tertiary)" }}>({tasks.length})</span>
             </div>
@@ -896,7 +1007,7 @@ export function TaskList({
               }}
               onClick={(e) => e.stopPropagation()}
               autoFocus
-            style={{ fontSize: 18, fontWeight: 700, height: 36, padding: "2px 10px", maxWidth: 360 }}
+              style={{ fontSize: 18, fontWeight: 700, height: 36, padding: "2px 10px", width: "100%", maxWidth: 320 }}
             />
           ) : (
             <div
@@ -911,6 +1022,10 @@ export function TaskList({
                 padding: "4px 8px",
                 borderRadius: "var(--radius-sm)",
                 transition: "background var(--dur-fast)",
+                minWidth: 0,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
               }}
               onClick={(e) => {
                 e.stopPropagation();
@@ -918,13 +1033,16 @@ export function TaskList({
               }}
               title="Click to rename list"
             >
-            <span>{currentList?.name || t("tasks")}</span>
-            <span style={{ fontSize: 13, opacity: 0.5 }}>✏️</span>
+              <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{currentList?.name || t("tasks")}</span>
+              <span style={{ fontSize: 12, color: "var(--text-tertiary)", fontWeight: 400, flexShrink: 0 }}>
+                ({incompleteTasks.length})
+              </span>
             </div>
           )}
+        </div>
 
         {/* Header Actions */}
-        <div className="main-header-actions" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <div className="main-header-actions" style={{ flexShrink: 0, marginLeft: "auto", display: "flex", alignItems: "center", gap: 8 }}>
           {/* View Switcher: Minimal & Matte Single Toggle (Only shown when Kanban is enabled in Labs) */}
           {!isTrashActive && !selectedTag && kanbanEnabled && (
             <button
@@ -1004,17 +1122,38 @@ export function TaskList({
           />
         </div>
       ) : (
-        /* Task list container */
+        /* Task list container with background drop support for promoting subtask to 1st depth */
         <div
           className="task-list-container"
+          onDragOver={(e) => {
+            if (e.target === e.currentTarget) {
+              e.preventDefault();
+              e.dataTransfer.dropEffect = "move";
+            }
+          }}
+          onDrop={(e) => {
+            if (e.target === e.currentTarget) {
+              e.preventDefault();
+              const draggedId = e.dataTransfer.getData("text/plain");
+              if (draggedId) {
+                // Promote to 1st depth root task
+                handleReorderTasks(draggedId, "", "root");
+              }
+            }
+          }}
           onContextMenu={(e) => {
             if (e.target === e.currentTarget) {
               e.preventDefault();
             }
           }}
         >
-          {loading && (
-            <div style={{ padding: "20px", textAlign: "center", color: "var(--text-tertiary)" }}>{t("loading")}</div>
+          {loading && tasks.length === 0 && (
+            <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: "40px", color: "var(--text-tertiary)" }}>
+              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
+                <div style={{ width: 24, height: 24, border: "2px solid var(--border)", borderTopColor: "var(--accent)", borderRadius: "50%", animation: "spin 0.8s linear infinite" }} />
+                <span style={{ fontSize: 13 }}>{t("loading")}</span>
+              </div>
+            </div>
           )}
           {!loading && tasks.length === 0 && (
             <div className="task-list-empty">
@@ -1026,7 +1165,7 @@ export function TaskList({
           )}
 
         {/* Tasks Tree */}
-        {incompleteTasks.map((task) => (
+        {(isTrashActive ? tasks : incompleteTasks).map((task) => (
           <RecursiveTaskItem
             key={task.id}
             task={task}

src/lib/i18n/index.tsx

@@ -2,6 +2,7 @@
 import React, { createContext, useContext, useState, useEffect } from "react";
 import { Language, TranslationKey, TranslationDict } from "./types";
 import { translations, en, ko, ja } from "./locales";
+import { getUserSettings, saveUserSettings } from "@/lib/mockData";
 
 export type { Language, TranslationKey, TranslationDict };
 export { translations, en, ko, ja };
@@ -20,15 +21,35 @@ const I18nContext = createContext<I18nContextType>({
 
 const LANG_STORAGE_KEY = "checkflow_lang";
 
-export function I18nProvider({ children }: { children: React.ReactNode }) {
-  const [lang, setLangState] = useState<Language>("en");
+function getInitialLanguage(): Language {
+  if (typeof window === "undefined") return "en";
 
-  useEffect(() => {
   try {
     const saved = localStorage.getItem(LANG_STORAGE_KEY) as Language | null;
     if (saved && (saved === "en" || saved === "ko" || saved === "ja")) {
-        setLangState(saved);
+      return saved;
     }
+    const userSettings = getUserSettings();
+    if (userSettings?.language && (userSettings.language === "en" || userSettings.language === "ko" || userSettings.language === "ja")) {
+      return userSettings.language;
+    }
+    const navLang = navigator.language?.toLowerCase() || "";
+    if (navLang.startsWith("ko")) return "ko";
+    if (navLang.startsWith("ja")) return "ja";
+  } catch {
+    // fallback
+  }
+
+  return "en";
+}
+
+export function I18nProvider({ children }: { children: React.ReactNode }) {
+  const [lang, setLangState] = useState<Language>(getInitialLanguage);
+
+  useEffect(() => {
+    try {
+      const initLang = getInitialLanguage();
+      setLangState(initLang);
     } catch {
       // ignore
     }
@@ -38,6 +59,8 @@ export function I18nProvider({ children }: { children: React.ReactNode }) {
     setLangState(l);
     try {
       localStorage.setItem(LANG_STORAGE_KEY, l);
+      const cur = getUserSettings();
+      saveUserSettings({ ...cur, language: l });
     } catch {
       // ignore
     }

src/lib/i18n/locales/en.ts

@@ -3,50 +3,50 @@ import { TranslationDict } from "../types";
 export const en: TranslationDict = {
   // Auth
   appName: "CheckFlow",
-  tagline: "Your Personal Todo & Markdown Workspace",
+  tagline: "TickTick-style independent task manager",
   welcomeBack: "Welcome back",
-  signInSubtitle: "Sign in to your account",
+  signInSubtitle: "Sign in to manage your tasks securely",
   createAccount: "Create account",
-  createAccountSubtitle: "Start organizing your tasks today",
+  createAccountSubtitle: "Get started with your self-hosted tasks",
   displayName: "Display Name",
   email: "Email",
   password: "Password",
-  min8Chars: "Min. 8 characters",
-  signIn: "Sign in",
+  min8Chars: "At least 8 characters",
+  signIn: "Sign In",
   signingIn: "Signing in...",
-  createBtn: "Create account",
+  createBtn: "Create Account",
   creatingBtn: "Creating account...",
-  alreadyHaveAccount: "Already have an account?",
-  dontHaveAccount: "Don't have an account?",
-  tryDemoMode: "Try Demo Mode (No DB Required)",
+  alreadyHaveAccount: "Already have an account? Sign in",
+  dontHaveAccount: "Don't have an account? Create one",
+  tryDemoMode: "Try Demo Mode (No DB)",
   demoBadge: "Demo Mode",
-  signOut: "Sign out",
+  signOut: "Sign Out",
 
   // Sidebar
   lists: "Lists",
   newList: "New List",
-  listNamePlaceholder: "List name",
+  listNamePlaceholder: "List name...",
   create: "Create",
   cancel: "Cancel",
   save: "Save",
-  deleteListConfirm: "Delete this list and all its tasks?",
+  deleteListConfirm: "Are you sure you want to delete this list?",
   undoDelete: "Undo",
   listDeleted: "List deleted",
   importTasks: "Import Tasks",
-  importModalTitle: "Import Tasks",
+  importModalTitle: "Import Tasks (CSV / ICS)",
   targetList: "Target List",
-  fileSelectLabel: "File (CSV or ICS from TickTick)",
-  tickTickExportHint: "TickTick: Settings → Export → Export as CSV or iCalendar",
+  fileSelectLabel: "Select .csv or .ics file (TickTick export supported)",
+  tickTickExportHint: "TickTick export: Settings → Backup → Export CSV",
   importBtn: "Import",
   importing: "Importing...",
   exportTasks: "Export Tasks",
-  exportModalTitle: "Export Tasks",
+  exportModalTitle: "Export Tasks (CSV / ICS)",
   exportFormat: "Format",
-  exportScope: "Target List",
-  allLists: "All Lists (Entire Tasks)",
-  includeCompleted: "Include Completed Tasks",
-  exportBtn: "Export & Download",
-  exportSuccess: "Tasks exported successfully!",
+  exportScope: "Scope",
+  allLists: "All Lists",
+  includeCompleted: "Include completed tasks",
+  exportBtn: "Export",
+  exportSuccess: "Tasks exported successfully",
   theme: "Theme",
   themeSystem: "System",
   themeLight: "Light",
@@ -55,21 +55,70 @@ export const en: TranslationDict = {
   tags: "Tags",
   trash: "Trash",
   emptyTrash: "Empty Trash",
-  searchPlaceholder: "Search tasks, notes, tags...",
-  searchExpandedPlaceholder: "Search anything — tasks, notes, tags (Ctrl+K)...",
+  searchPlaceholder: "Search tasks...",
+  searchExpandedPlaceholder: "Type to search tasks, tags, notes...",
 
-  // Settings Modal
+  // Settings Modal - General & Tabs
   settingsModalTitle: "Settings",
   profile: "Profile",
   preferences: "Preferences",
-  syncIntegrations: "Integrations (CalDAV)",
+  syncIntegrations: "Integrations",
   admin: "Admin",
-  trashRetention: "Trash Retention Period",
+  trashRetention: "Trash Auto-Delete Retention Period",
   trashRetentionHint: "Deleted tasks will be permanently removed after the specified period.",
   days7: "7 Days",
   days14: "14 Days",
   days30: "30 Days (Recommended)",
-  neverDelete: "Never Auto-Delete",
+  neverDelete: "Never Auto-Delete (Manual empty only)",
+  settingsSaved: "Settings saved",
+  passwordChangePlaceholder: "New password (leave blank to keep current)",
+  yourNamePlaceholder: "Your Name",
+
+  // Settings Modal - Labs & Customization
+  labsSectionView: "View",
+  labsSectionLayout: "Layout",
+  labsSectionAppearance: "Appearance",
+  labsKanbanTitle: "Kanban Board",
+  labsKanbanDesc: "Switch between list view and 3-column Kanban board (To Do / In Progress / Done).",
+  labsDensityTitle: "Content Density",
+  labsDensityDesc: "Controls the vertical spacing of task items.",
+  densityCompact: "Compact",
+  densityDefault: "Default",
+  densityComfortable: "Airy",
+  sidebarWidthTitle: "Sidebar Width",
+  sidebarWidthDesc: "Drag the sidebar edge or adjust here.",
+  detailWidthTitle: "Detail Panel Width",
+  detailWidthDesc: "Drag the panel edge or adjust here.",
+  fontSizeTitle: "Font Size",
+  fontSizeDesc: "Base font size across the app.",
+  fontSizeSmall: "S",
+  fontSizeMedium: "M",
+  fontSizeLarge: "L",
+  accentColorTitle: "Accent Color",
+  accentColorDesc: "Choose the hue of your accent color. Saturation controls vibrancy.",
+  saturationLabel: "Saturation",
+  hueLabel: "Hue °",
+  roundnessTitle: "Border Roundness",
+  roundnessDesc: "Controls the roundness of cards, buttons, and UI elements.",
+  roundnessSharp: "Sharp",
+  roundnessDefault: "Default",
+  roundnessRound: "Round",
+  animationSpeedTitle: "Animation Speed",
+  animationSpeedDesc: "Controls the speed of transitions and hover effects.",
+  animationOff: "Off",
+  animationFast: "Fast",
+  animationDefault: "Default",
+  animationSlow: "Slow",
+  resetDefaultsTitle: "Reset to Defaults",
+  resetDefaultsDesc: "Restores all layout, appearance, and view settings to their factory defaults.",
+
+  // Settings Modal - Admin tab
+  adminCurrentAccount: "Current Account",
+  adminIsolationMode: "Isolation Mode",
+  adminMultiUserPrivacy: "Multi-User Privacy",
+  adminCalDavEndpoint: "CalDAV Endpoint",
+  adminActiveEnabled: "Active / Enabled",
+  adminOpenDashboard: "Open Admin Dashboard →",
 
   // CalDAV & Sync
   syncTitle: "CalDAV & Mobile Sync (Android / Apple)",
@@ -80,33 +129,37 @@ export const en: TranslationDict = {
   syncDownloadIcs: "Download .ICS Feed",
   syncTestConnection: "Test Endpoint",
   syncTesting: "Testing...",
-  syncTestSuccess: "✓ CalDAV endpoint responded successfully (200 OK)",
+  syncTestSuccess: "CalDAV endpoint responded successfully",
+  syncTestError: "Endpoint test failed",
   syncTabAndroid: "Android (DAVx⁵)",
-  syncTabApple: "Apple Reminders (iOS / macOS)",
-  syncTabThunderbird: "Thunderbird (Desktop)",
+  syncTabApple: "Apple Reminders",
+  syncTabThunderbird: "Thunderbird",
   syncAndroidStep1: "Install DAVx⁵ from Google Play Store or F-Droid.",
-  syncAndroidStep2: "Open DAVx⁵ → Add Account → Select 'Login with URL and user name'.",
-  syncAndroidStep3: "Paste the Base URL above, then enter your CheckFlow email & password.",
-  syncAndroidStep4: "Enable 'VTODO (Tasks)' collection to sync with Android Tasks or OpenTasks.",
-  syncAppleStep1: "Open Settings → Reminders → Accounts → Add Account.",
-  syncAppleStep2: "Select 'Other' → Add CalDAV Account.",
-  syncAppleStep3: "Server: paste base URL without protocol, User/Pass: CheckFlow credentials.",
-  syncAppleStep4: "Toggle 'Reminders' ON and tap Save.",
-  syncThunderbirdStep1: "Open Thunderbird → Switch to Calendar view → New Calendar.",
-  syncThunderbirdStep2: "Select 'On the Network' → Format: CalDAV.",
-  syncThunderbirdStep3: "Location: paste the Base URL, Username: CheckFlow email.",
-  syncThunderbirdStep4: "Enter your password when prompted to finalize sync.",
+  syncAndroidStep2: "Choose 'Login with URL and user name' and enter the CalDAV URL above.",
+  syncAndroidStep3: "Enter your CheckFlow email and password.",
+  syncAndroidStep4: "Open your favorite To-Do app (e.g. Tasks.org, OpenTasks) to manage your synchronized tasks.",
+  syncAppleStep1: "Open System Settings (macOS) or Settings (iOS/iPadOS) → Internet Accounts.",
+  syncAppleStep2: "Tap 'Add Account' → 'Add CalDAV Account'.",
+  syncAppleStep3: "Set Account Type to 'Manual', Server Address to the CalDAV URL, with your email & password.",
+  syncAppleStep4: "Tasks will automatically sync inside the Apple Reminders app.",
+  syncThunderbirdStep1: "Open Thunderbird → Calendar / Tasks tab.",
+  syncThunderbirdStep2: "Right-click Calendar list → 'New Calendar' → 'On the Network'.",
+  syncThunderbirdStep3: "Select 'CalDAV', paste the CalDAV URL, and enter your credentials.",
+  syncThunderbirdStep4: "Your CheckFlow task lists will appear under Tasks.",
+  syncAndroidTip: "In DAVx⁵ account settings, set Sync Interval to 15 minutes for battery efficiency and near real-time sync.",
+  syncAppleTip: "If using HTTPS behind a reverse proxy (Nginx/Caddy), ensure valid SSL certificates are trusted by Apple devices.",
+  syncThunderbirdTip: "Thunderbird Tasks view will display CheckFlow priority tags, due dates, and completion status.",
 
   // Task List
   tasks: "Tasks",
-  hideDone: "Hide done",
-  showDone: "Show done",
+  hideDone: "Hide Done",
+  showDone: "Show Done",
   completedSection: "Completed",
-  addTaskPlaceholder: "Add a task...",
+  addTaskPlaceholder: "What would you like to accomplish?",
   add: "Add",
-  noTasksYet: "No tasks yet. Add one below!",
+  noTasksYet: "No tasks in this list",
   selectListToStart: "Select a list to get started",
-  loading: "Loading...",
+  loading: "Loading tasks...",
   today: "Today",
   tomorrow: "Tomorrow",
 
@@ -117,32 +170,34 @@ export const en: TranslationDict = {
   priorityLow: "Low",
   priorityMedium: "Medium",
   priorityHigh: "High",
-  dueDate: "Due Date",
+  dueDate: "Due date",
   clear: "Clear",
   notes: "Notes",
-  notesPlaceholder: "Add notes, details, or anything you need to remember…\n\nMarkdown supported: **bold**, *italic*, # heading, - list, - [ ] checkbox",
-  subtasks: "Sub-tasks",
-  addSubtaskPlaceholder: "Add sub-task…",
+  notesPlaceholder: "Add details, markdown supported...",
+  subtasks: "Subtasks",
+  addSubtaskPlaceholder: "Add a subtask...",
   deleteTaskConfirm: "Delete this task?",
-  autoSaved: "Auto-saved",
-  saving: "Saving…",
+  autoSaved: "Saved",
+  saving: "Saving...",
   created: "Created",
   edited: "Edited",
+  previewTab: "Preview",
+  editTab: "Edit",
 
   // Toolbars
   bold: "Bold",
   italic: "Italic",
   heading: "Heading",
-  bulletList: "Bullet list",
-  numberedList: "Numbered list",
+  bulletList: "Bullet List",
+  numberedList: "Numbered List",
   checkbox: "Checkbox",
   code: "Code",
 
   // TickTick Mode Switcher & Quick Add
-  textMode: "Text Note Mode",
-  subtaskMode: "Checklist Mode",
-  switchToTextMode: "Switch to Markdown Note",
-  switchToSubtaskMode: "Switch to Checklist Sub-tasks",
+  textMode: "Text Mode",
+  subtaskMode: "Subtask Mode",
+  switchToTextMode: "Switch to Text Mode",
+  switchToSubtaskMode: "Switch to Subtask Mode",
   moveToList: "Move to List",
   quickAdd: "Quick Add",
   quickToday: "Today",
@@ -151,31 +206,31 @@ export const en: TranslationDict = {
   selectDate: "Date",
   selectPriority: "Priority",
   selectTag: "Tag",
-  copied: "Copied!",
+  copied: "Copied",
 
   // Context Menu
-  editTask: "Edit",
+  editTask: "Edit Task",
   duplicateTask: "Duplicate",
-  moveTask: "Move to…",
-  deleteTask: "Delete",
+  moveTask: "Move To...",
+  deleteTask: "Delete Task",
   renameList: "Rename",
-  deleteList: "Delete list",
-  taskUndoHint: "Deleted. Tap to undo.",
-  listUndoHint: "List deleted. Tap to undo.",
+  deleteList: "Delete List",
+  taskUndoHint: "Task deleted",
+  listUndoHint: "List deleted",
 
   // Labs, Kanban & Customization
   labs: "Labs",
-  labsDesc: "Enable or disable experimental features individually.",
-  kanbanView: "Kanban Board",
-  listView: "List View",
+  labsDesc: "Experimental features and UI personalization.",
+  kanbanView: "Kanban",
+  listView: "List",
   enableKanban: "Kanban Board View",
-  enableKanbanDesc: "Switch between list and 3-column board (To Do / Doing / Done).",
-  swapBlocks: "Swap Position",
-  resetDefaults: "Reset to Defaults",
-  resetConfirm: "Reset all UI customizations to factory defaults?",
+  enableKanbanDesc: "Enable 3-column Kanban board view (To Do, In Progress, Done) switchable in task lists.",
+  swapBlocks: "Swap Blocks",
+  resetDefaults: "Reset",
+  resetConfirm: "Reset all customizations to defaults?",
   todoCol: "To Do",
   inProgressCol: "In Progress",
   doneCol: "Done",
   accessRestricted: "Access Restricted",
-  adminRequired: "This console requires ADMIN role.",
+  adminRequired: "This console requires ADMIN privileges.",
 };

src/lib/i18n/locales/ja.ts

@@ -3,109 +3,162 @@ import { TranslationDict } from "../types";
 export const ja: TranslationDict = {
   // Auth
   appName: "CheckFlow",
-  tagline: "シンプルで洗練されたパーソナルタスク管理",
-  welcomeBack: "お帰りなさい 👋",
-  signInSubtitle: "メールアドレスでサインインしてください",
-  createAccount: "アカウント新規登録",
-  createAccountSubtitle: "CheckFlowでタスクの整理を始めましょう",
+  tagline: "TickTickスタイルのセルフホスト型タスク管理",
+  welcomeBack: "おかえりなさい",
+  signInSubtitle: "安全にログインしてタスクを管理します",
+  createAccount: "アカウント作成",
+  createAccountSubtitle: "セルフホストToDoプラットフォームを始めましょう",
   displayName: "表示名",
   email: "メールアドレス",
   password: "パスワード",
   min8Chars: "8文字以上",
-  signIn: "サインイン",
-  signingIn: "サインイン中...",
-  createBtn: "アカウントを作成",
-  creatingBtn: "アカウント作成中...",
-  alreadyHaveAccount: "すでにアカウントをお持ちですか？",
-  dontHaveAccount: "アカウントをお持ちでないですか？",
-  tryDemoMode: "体験モードで試す（DB不要）",
-  demoBadge: "体験モード",
-  signOut: "サインアウト",
+  signIn: "ログイン",
+  signingIn: "ログイン中...",
+  createBtn: "アカウント作成",
+  creatingBtn: "作成中...",
+  alreadyHaveAccount: "既にアカウントをお持ちですか？ ログイン",
+  dontHaveAccount: "アカウントをお持ちでないですか？ 新規作成",
+  tryDemoMode: "デモモードを試す（DB不要）",
+  demoBadge: "デモモード",
+  signOut: "ログアウト",
 
   // Sidebar
   lists: "リスト",
-  newList: "新規リスト",
-  listNamePlaceholder: "リスト名を入力",
+  newList: "新しいリスト",
+  listNamePlaceholder: "リスト名を入力...",
   create: "作成",
   cancel: "キャンセル",
   save: "保存",
-  deleteListConfirm: "このリストを削除しますか？含まれるすべてのタスクも削除されます。",
+  deleteListConfirm: "このリストと含まれるすべてのタスクを削除しますか？",
   undoDelete: "元に戻す",
-  listDeleted: "リストを削除しました",
-  importTasks: "インポート",
-  importModalTitle: "タスクのインポート",
+  listDeleted: "リストが削除されました",
+  importTasks: "タスクをインポート",
+  importModalTitle: "タスクのインポート (CSV / ICS)",
   targetList: "インポート先リスト",
-  fileSelectLabel: "ファイル選択 (TickTick CSV / ICS)",
-  tickTickExportHint: "TickTick: 設定 → データのエクスポート → CSVまたはiCalendar",
+  fileSelectLabel: ".csv または .ics ファイルを選択 (TickTickエクスポート対応)",
+  tickTickExportHint: "TickTickエクスポート手順: 設定 → バックアップ → CSVエクスポート",
   importBtn: "インポート",
   importing: "インポート中...",
-  exportTasks: "エクスポート",
-  exportModalTitle: "タスクのエクスポート",
-  exportFormat: "エクスポート形式",
-  exportScope: "対象リスト",
-  allLists: "すべてのリスト (全体)",
+  exportTasks: "タスクをエクスポート",
+  exportModalTitle: "タスクのエクスポート (CSV / ICS)",
+  exportFormat: "ファイル形式",
+  exportScope: "対象範囲",
+  allLists: "すべてのリスト",
   includeCompleted: "完了したタスクを含める",
-  exportBtn: "エクスポートしてダウンロード",
-  exportSuccess: "タスクを正常にエクスポートしました！",
+  exportBtn: "エクスポート",
+  exportSuccess: "タスクのエクスポートが完了しました",
   theme: "テーマ",
-  themeSystem: "システム設定に同期",
-  themeLight: "ライトモード",
-  themeDark: "ダークモード",
-  language: "言語 (Language)",
+  themeSystem: "システム",
+  themeLight: "ライト",
+  themeDark: "ダーク",
+  language: "言語",
   tags: "タグ",
   trash: "ゴミ箱",
   emptyTrash: "ゴミ箱を空にする",
-  searchPlaceholder: "タスク、メモ、タグを検索...",
-  searchExpandedPlaceholder: "タスク、メモ、タグをすべて検索 (Ctrl+K)...",
+  searchPlaceholder: "タスクを検索...",
+  searchExpandedPlaceholder: "タスク名、タグ、メモを検索...",
 
-  // Settings Modal
-  settingsModalTitle: "環境設定",
+  // Settings Modal - General & Tabs
+  settingsModalTitle: "設定",
   profile: "プロフィール",
-  preferences: "カスタマイズ設定",
-  syncIntegrations: "外部連携 (CalDAV)",
-  admin: "管理者設定",
-  trashRetention: "ゴミ箱の自動保持期間",
-  trashRetentionHint: "指定した期間が経過した削除済みタスクは自動的に完全に削除されます。",
-  days7: "7日後に完全削除",
-  days14: "14日後に完全削除",
-  days30: "30日後に完全削除 (推奨)",
-  neverDelete: "自動削除しない (手動削除のみ)",
+  preferences: "環境設定",
+  syncIntegrations: "外部連携",
+  admin: "管理者",
+  trashRetention: "ゴミ箱自動削除の保持期間",
+  trashRetentionHint: "削除されたタスクは指定期間を過ぎると自動的に完全に削除されます。",
+  days7: "7日間",
+  days14: "14日間",
+  days30: "30日間 (推奨)",
+  neverDelete: "自動削除しない (手動で空にするのみ)",
+  settingsSaved: "設定が正常に保存されました",
+  passwordChangePlaceholder: "新しいパスワード (変更しない場合は空白)",
+  yourNamePlaceholder: "お名前",
+
+  // Settings Modal - Labs & Customization
+  labsSectionView: "ビュー設定",
+  labsSectionLayout: "レイアウト",
+  labsSectionAppearance: "外観とデザイン",
+  labsKanbanTitle: "カンバンボード",
+  labsKanbanDesc: "リストビューと3カラムのカンバンボード (To Do / 進行中 / 完了) を切り替えます。",
+  labsDensityTitle: "表示密度",
+  labsDensityDesc: "タスク項目の行間および縦の余白を調整します。",
+  densityCompact: "コンパクト",
+  densityDefault: "標準",
+  densityComfortable: "ゆったり",
+  sidebarWidthTitle: "サイドバーの幅",
+  sidebarWidthDesc: "サイドバーの境界線をドラッグするかスライダーで調整します。",
+  detailWidthTitle: "詳細パネルの幅",
+  detailWidthDesc: "右側詳細タブの境界線をドラッグするかスライダーで調整します。",
+  fontSizeTitle: "フォントサイズ",
+  fontSizeDesc: "アプリ全体の基準フォントサイズを設定します。",
+  fontSizeSmall: "小",
+  fontSizeMedium: "中",
+  fontSizeLarge: "大",
+  accentColorTitle: "アクセントカラー",
+  accentColorDesc: "アクセントカラーの色相(Hue)と彩度(Saturation)をカスタマイズします。",
+  saturationLabel: "彩度",
+  hueLabel: "色相 °",
+  roundnessTitle: "角の丸み",
+  roundnessDesc: "カードやボタン、UI要素の角丸スタイルを設定します。",
+  roundnessSharp: "シャープ",
+  roundnessDefault: "標準",
+  roundnessRound: "ラウンド",
+  animationSpeedTitle: "アニメーション速度",
+  animationSpeedDesc: "画面切り替えやホバー効果の速度を調整します。",
+  animationOff: "オフ",
+  animationFast: "高速",
+  animationDefault: "標準",
+  animationSlow: "ゆっくり",
+  resetDefaultsTitle: "設定を初期状態に戻す",
+  resetDefaultsDesc: "すべてのレイアウト、デザイン、ビューのカスタマイズ設定を初期値にリセットします。",
+
+  // Settings Modal - Admin tab
+  adminCurrentAccount: "現在のアカウント",
+  adminIsolationMode: "分離モード",
+  adminMultiUserPrivacy: "マルチユーザー・プライバシー保護",
+  adminCalDavEndpoint: "CalDAV エンドポイント",
+  adminActiveEnabled: "正常に稼働中",
+  adminOpenDashboard: "管理者ダッシュボードを開く →",
 
   // CalDAV & Sync
-  syncTitle: "CalDAV モバイルおよび外部アプリ同期",
-  syncDesc: "Android (DAVx⁵, Tasks.org)、Apple リマインダー、Thunderbird など標準 CalDAV をサポートする各種端末やアプリと双方向同期できます。",
-  syncBaseUrl: "CalDAV サーバー基本 URL",
+  syncTitle: "CalDAV モバイル同期 (Android / Apple)",
+  syncDesc: "CheckFlowは標準CalDAVプロトコルにより、Android、Appleリマインダー、Thunderbirdとの双方向同期に対応しています。",
+  syncBaseUrl: "CalDAV サーバーアドレス (Base URL)",
   syncCopyUrl: "URLをコピー",
-  syncCopied: "コピー完了！",
+  syncCopied: "コピーしました！",
   syncDownloadIcs: ".ICS フィードをダウンロード",
   syncTestConnection: "接続テスト",
-  syncTesting: "テスト中...",
-  syncTestSuccess: "✓ CalDAV エンドポイントは正常に応答しています (200 OK)",
+  syncTesting: "確認中...",
+  syncTestSuccess: "CalDAVサーバーが正常に応答しました",
+  syncTestError: "エンドポイントテスト失敗",
   syncTabAndroid: "Android (DAVx⁵)",
-  syncTabApple: "Apple リマインダー (iOS / macOS)",
-  syncTabThunderbird: "Thunderbird (Desktop)",
-  syncAndroidStep1: "Google Play または F-Droid から「DAVx⁵」アプリをインストールします。",
-  syncAndroidStep2: "DAVx⁵ を起動 → アカウント追加(+) →「URL とユーザー名でログイン」を選択します。",
-  syncAndroidStep3: "上記の基本 URL を入力し、CheckFlow のログインメールアドレスとパスワードを入力します。",
-  syncAndroidStep4: "「VTODO (タスク)」コレクションを有効にすると、Tasks.org や OpenTasks と双方向同期されます。",
-  syncAppleStep1: "端末の設定 → リマインダー → アカウント →「アカウントを追加」を開きます。",
-  syncAppleStep2: "「その他」を選択 →「CalDAV アカウントを追加」を選択します。",
-  syncAppleStep3: "サーバーに上記の URL、ユーザー名とパスワードに CheckFlow のアカウント情報を入力します。",
-  syncAppleStep4: "「リマインダー」をオンにして保存します。",
-  syncThunderbirdStep1: "Thunderbird を起動 → カレンダータブ →「新しいカレンダー」を作成します。",
-  syncThunderbirdStep2: "「ネットワーク上」を選択 → 形式:「CalDAV」を選択します。",
-  syncThunderbirdStep3: "場所に上記の基本 URL、ユーザー名に CheckFlow のメールアドレスを入力します。",
-  syncThunderbirdStep4: "認証ダイアログでパスワードを入力して設定を完了します。",
+  syncTabApple: "Apple リマインダー",
+  syncTabThunderbird: "Thunderbird",
+  syncAndroidStep1: "Google Play または F-Droid から DAVx⁵ をインストールします。",
+  syncAndroidStep2: "「URLとユーザー名でログイン」を選択し、上記のCalDAV URLを入力します。",
+  syncAndroidStep3: "CheckFlow のメールアドレスとパスワードを入力します。",
+  syncAndroidStep4: "Tasks.org や OpenTasks などのアプリを開いてタスクを管理します。",
+  syncAppleStep1: "システム設定 (macOS) または 設定 (iOS/iPadOS) → インターネットアカウント を開きます。",
+  syncAppleStep2: "「アカウントを追加」→「CalDAVアカウントを追加」を選択します。",
+  syncAppleStep3: "アカウントの種類を「手動」にし、上記のCalDAV URLとログイン情報を入力します。",
+  syncAppleStep4: "Apple リマインダー (Reminders) アプリにタスクが自動同期されます。",
+  syncThunderbirdStep1: "Mozilla Thunderbird を開き、カレンダー/タスク タブを開きます。",
+  syncThunderbirdStep2: "カレンダー一覧を右クリック →「新しいカレンダー」→「ネットワーク上」を選択します。",
+  syncThunderbirdStep3: "「CalDAV」を選択し、上記のCalDAV URLとログイン情報を入力します。",
+  syncThunderbirdStep4: "CheckFlow のタスク一覧が Thunderbird Tasks に表示されます。",
+  syncAndroidTip: "DAVx⁵ の設定で同期周期を 15 分に設定すると、バッテリーを節約しながら準リアルタイム同期が可能です。",
+  syncAppleTip: "Nginx/Caddy などのリバースプロキシで HTTPS を使用する場合は、有効な SSL 証明書が設定されているか確認してください。",
+  syncThunderbirdTip: "Thunderbird のタスクビューで CheckFlow の優先度、期日、完了状態がそのまま表示されます。",
 
   // Task List
   tasks: "タスク",
-  hideDone: "完了済みを非表示",
-  showDone: "完了済みを表示",
-  completedSection: "完了したタスク",
-  addTaskPlaceholder: "新しいタスクを入力...",
+  hideDone: "完了項目を非表示",
+  showDone: "完了項目を表示",
+  completedSection: "完了済み",
+  addTaskPlaceholder: "新しいタスクを書き留めましょう",
   add: "追加",
-  noTasksYet: "タスクがありません。下から新しいタスクを追加してみましょう！",
-  selectListToStart: "リストを選択してタスクを表示してください",
+  noTasksYet: "このリストにはタスクがありません",
+  selectListToStart: "リストを選択して開始してください",
   loading: "読み込み中...",
   today: "今日",
   tomorrow: "明日",
@@ -113,69 +166,71 @@ export const ja: TranslationDict = {
   // Task Detail
   taskTitlePlaceholder: "タスク名",
   priority: "優先度",
-  priorityNone: "指定なし",
+  priorityNone: "なし",
   priorityLow: "低",
   priorityMedium: "中",
   priorityHigh: "高",
-  dueDate: "期日",
+  dueDate: "期限日",
   clear: "クリア",
   notes: "メモ",
-  notesPlaceholder: "自由にメモを記入してください…\n\nMarkdown対応: **太字**, *斜体*, # 見出し, - リスト, - [ ] チェックボックス",
+  notesPlaceholder: "詳細を入力 (Markdown対応)...",
   subtasks: "サブタスク",
-  addSubtaskPlaceholder: "サブタスクを追加…",
-  deleteTaskConfirm: "このタスクを削除しますか？",
-  autoSaved: "自動保存済み",
-  saving: "保存中…",
+  addSubtaskPlaceholder: "サブタスクを追加...",
+  deleteTaskConfirm: "タスクを削除しますか？",
+  autoSaved: "保存済み",
+  saving: "保存中...",
   created: "作成日時",
   edited: "更新日時",
+  previewTab: "プレビュー",
+  editTab: "編集",
 
   // Toolbars
   bold: "太字",
   italic: "斜体",
   heading: "見出し",
-  bulletList: "箇条書きリスト",
+  bulletList: "箇条書き",
   numberedList: "番号付きリスト",
   checkbox: "チェックボックス",
-  code: "コードブロック",
+  code: "コード",
 
   // TickTick Mode Switcher & Quick Add
-  textMode: "Markdownメモモード",
-  subtaskMode: "チェックリストモード",
-  switchToTextMode: "Markdownメモモードに切り替え",
-  switchToSubtaskMode: "チェックリストモードに切り替え",
-  moveToList: "別のリストに移動",
+  textMode: "テキストモード",
+  subtaskMode: "サブタスクモード",
+  switchToTextMode: "テキストモードに切り替え",
+  switchToSubtaskMode: "サブタスクモードに切り替え",
+  moveToList: "リストへ移動",
   quickAdd: "クイック追加",
   quickToday: "今日",
   quickTomorrow: "明日",
   quickNextWeek: "来週",
-  selectDate: "期日設定",
-  selectPriority: "優先度設定",
-  selectTag: "タグ設定",
-  copied: "コピー完了！",
+  selectDate: "日付を選択",
+  selectPriority: "優先度",
+  selectTag: "タグを選択",
+  copied: "コピー完了",
 
   // Context Menu
-  editTask: "編集",
+  editTask: "タスクを編集",
   duplicateTask: "複製",
-  moveTask: "移動…",
-  deleteTask: "削除",
-  renameList: "名前を変更",
+  moveTask: "移動...",
+  deleteTask: "タスクを削除",
+  renameList: "リスト名を変更",
   deleteList: "リストを削除",
-  taskUndoHint: "削除しました。クリックして元に戻せます。",
-  listUndoHint: "リストを削除しました。クリックして元に戻せます。",
+  taskUndoHint: "タスクが削除されました",
+  listUndoHint: "リストが削除されました",
 
   // Labs, Kanban & Customization
-  labs: "Labs (実験室)",
-  labsDesc: "開発中の実験的機能を個別に有効化・無効化できます。",
-  kanbanView: "カンバンボード",
-  listView: "リストビュー",
+  labs: "実験室",
+  labsDesc: "実験的な機能とUIのカスタマイズ設定です。",
+  kanbanView: "カンバン",
+  listView: "リスト",
   enableKanban: "カンバンボードビュー",
-  enableKanbanDesc: "タスクを3列ボード（未着手 / 進行中 / 完了）形式で管理します。",
-  swapBlocks: "ブロック配置の入れ替え",
-  resetDefaults: "初期設定にリセット",
-  resetConfirm: "すべてのUIカスタマイズを初期デフォルト設定に戻しますか？",
-  todoCol: "未着手",
+  enableKanbanDesc: "タスクリストでリストビューと3カラムカンバンビューを切り替えられるようにします。",
+  swapBlocks: "ブロック順序の入れ替え",
+  resetDefaults: "初期状態に戻す",
+  resetConfirm: "すべてのカスタマイズ設定を初期状態に戻しますか？",
+  todoCol: "To Do",
   inProgressCol: "進行中",
   doneCol: "完了",
-  accessRestricted: "アクセス権限制限",
-  adminRequired: "この管理コンソールにはADMIN権限が必要です。",
+  accessRestricted: "アクセス制限",
+  adminRequired: "このコンソールには ADMIN 権限が必要です。",
 };

src/lib/i18n/locales/ko.ts

@@ -3,109 +3,162 @@ import { TranslationDict } from "../types";
 export const ko: TranslationDict = {
   // Auth
   appName: "CheckFlow",
-  tagline: "나만의 스마트 할 일 & 마크다운 워크스페이스",
-  welcomeBack: "다시 오신 것을 환영합니다 👋",
-  signInSubtitle: "이메일 계정으로 로그인하세요",
-  createAccount: "새 계정 생성",
-  createAccountSubtitle: "CheckFlow에서 효율적인 할 일 관리를 시작하세요",
-  displayName: "사용자 이름",
-  email: "이메일 주소",
+  tagline: "TickTick 스타일의 독립형 To-Do & 노트 웹앱",
+  welcomeBack: "다시 오신 것을 환영합니다",
+  signInSubtitle: "안전하게 로그인하여 할 일을 관리하세요",
+  createAccount: "계정 만들기",
+  createAccountSubtitle: "셀프호스팅 To-Do 플랫폼을 시작하세요",
+  displayName: "이름",
+  email: "이메일",
   password: "비밀번호",
-  min8Chars: "8자 이상 입력",
+  min8Chars: "최소 8자 이상",
   signIn: "로그인",
   signingIn: "로그인 중...",
   createBtn: "계정 생성",
   creatingBtn: "계정 생성 중...",
-  alreadyHaveAccount: "이미 계정이 있으신가요?",
-  dontHaveAccount: "아직 계정이 없으신가요?",
-  tryDemoMode: "체험 모드로 둘러보기 (DB 불필요)",
-  demoBadge: "체험 모드",
+  alreadyHaveAccount: "이미 계정이 있으신가요? 로그인",
+  dontHaveAccount: "계정이 없으신가요? 계정 만들기",
+  tryDemoMode: "데모 모드로 체험하기 (DB 미연결)",
+  demoBadge: "데모 모드",
   signOut: "로그아웃",
 
   // Sidebar
   lists: "목록",
   newList: "새 목록",
-  listNamePlaceholder: "목록 이름 입력",
+  listNamePlaceholder: "목록 이름 입력...",
   create: "생성",
   cancel: "취소",
   save: "저장",
-  deleteListConfirm: "이 목록을 삭제하시겠습니까? 포함된 모든 할 일도 함께 삭제됩니다.",
+  deleteListConfirm: "이 목록과 포함된 모든 할 일을 삭제하시겠습니까?",
   undoDelete: "실행 취소",
   listDeleted: "목록이 삭제되었습니다",
-  importTasks: "가져오기",
-  importModalTitle: "할 일 가져오기",
+  importTasks: "할 일 가져오기",
+  importModalTitle: "할 일 가져오기 (CSV / ICS)",
   targetList: "가져올 대상 목록",
-  fileSelectLabel: "파일 선택 (TickTick CSV 또는 ICS)",
-  tickTickExportHint: "TickTick: 설정 → 데이터 내보내기 → CSV 또는 iCalendar 선택",
+  fileSelectLabel: ".csv 또는 .ics 파일 선택 (TickTick 백업 지원)",
+  tickTickExportHint: "TickTick 내보내기 방법: 설정 → 백업 → CSV 내보내기",
   importBtn: "가져오기",
   importing: "가져오는 중...",
-  exportTasks: "내보내기",
-  exportModalTitle: "할 일 내보내기",
-  exportFormat: "내보내기 형식",
-  exportScope: "내보낼 대상 목록",
-  allLists: "모든 목록 (전체 할 일)",
-  includeCompleted: "완료된 항목 포함",
-  exportBtn: "내보내기 및 다운로드",
-  exportSuccess: "할 일을 성공적으로 내보냈습니다!",
+  exportTasks: "할 일 내보내기",
+  exportModalTitle: "할 일 내보내기 (CSV / ICS)",
+  exportFormat: "파일 포맷",
+  exportScope: "내보낼 대상",
+  allLists: "전체 목록",
+  includeCompleted: "완료된 작업 포함",
+  exportBtn: "내보내기",
+  exportSuccess: "할 일이 성공적으로 내보내졌습니다",
   theme: "테마",
-  themeSystem: "시스템 설정 동기화",
-  themeLight: "라이트 모드",
-  themeDark: "다크 모드",
-  language: "언어 (Language)",
+  themeSystem: "시스템",
+  themeLight: "라이트",
+  themeDark: "다크",
+  language: "언어",
   tags: "태그",
   trash: "휴지통",
   emptyTrash: "휴지통 비우기",
-  searchPlaceholder: "할 일, 메모, 태그 검색...",
-  searchExpandedPlaceholder: "할 일, 메모, 태그 전체 검색 (Ctrl+K)...",
+  searchPlaceholder: "할 일 검색...",
+  searchExpandedPlaceholder: "작업 제목, 태그, 메모 검색...",
 
-  // Settings Modal
-  settingsModalTitle: "환경설정",
+  // Settings Modal - General & Tabs
+  settingsModalTitle: "설정",
   profile: "프로필",
-  preferences: "개인화 설정",
-  syncIntegrations: "외부 연동 (CalDAV)",
-  admin: "관리자 설정",
-  trashRetention: "휴지통 자동 보관 기간",
-  trashRetentionHint: "지정한 보관 기간이 경과한 삭제 항목은 자동으로 영구 삭제됩니다.",
-  days7: "7일 후 영구 삭제",
-  days14: "14일 후 영구 삭제",
-  days30: "30일 후 영구 삭제 (권장)",
-  neverDelete: "자동 삭제 안 함 (수동 삭제)",
+  preferences: "환경설정",
+  syncIntegrations: "외부 연동",
+  admin: "관리자",
+  trashRetention: "휴지통 자동 삭제 보관 기간",
+  trashRetentionHint: "삭제된 작업은 지정된 기간이 지나면 영구적으로 자동 삭제됩니다.",
+  days7: "7일",
+  days14: "14일",
+  days30: "30일 (권장)",
+  neverDelete: "자동 삭제 안 함 (수동 비우기만)",
+  settingsSaved: "설정이 성공적으로 저장되었습니다",
+  passwordChangePlaceholder: "새 비밀번호 (현재 비밀번호 유지 시 비워두기)",
+  yourNamePlaceholder: "사용자 이름",
+
+  // Settings Modal - Labs & Customization
+  labsSectionView: "뷰 설정",
+  labsSectionLayout: "레이아웃",
+  labsSectionAppearance: "외형 및 디자인",
+  labsKanbanTitle: "칸반 보드",
+  labsKanbanDesc: "목록 뷰와 3개 컬럼의 칸반 보드(To Do / 진행 중 / 완료) 간 전환을 지원합니다.",
+  labsDensityTitle: "화면 표시 밀도",
+  labsDensityDesc: "태스크 항목의 세로 여백 및 행 높이를 조절합니다.",
+  densityCompact: "컴팩트",
+  densityDefault: "기본값",
+  densityComfortable: "여유롭게",
+  sidebarWidthTitle: "사이드바 기본 너비",
+  sidebarWidthDesc: "사이드바 경계선을 드래그하거나 슬라이더로 조절할 수 있습니다.",
+  detailWidthTitle: "상세 패널 기본 너비",
+  detailWidthDesc: "우측 상세 탭 경계선을 드래그하거나 슬라이더로 조절할 수 있습니다.",
+  fontSizeTitle: "기본 폰트 크기",
+  fontSizeDesc: "앱 전체에 적용되는 텍스트 기준 크기를 설정합니다.",
+  fontSizeSmall: "작게",
+  fontSizeMedium: "보통",
+  fontSizeLarge: "크게",
+  accentColorTitle: "포인트(액센트) 색상",
+  accentColorDesc: "강조 색상의 색조(Hue)와 채도(Saturation)를 사용자에 맞게 조절합니다.",
+  saturationLabel: "채도",
+  hueLabel: "색조 °",
+  roundnessTitle: "모서리 둥글기",
+  roundnessDesc: "카드, 버튼 및 UI 요소의 모서리 라운드 스타일을 설정합니다.",
+  roundnessSharp: "각지게",
+  roundnessDefault: "기본값",
+  roundnessRound: "둥글게",
+  animationSpeedTitle: "애니메이션 속도",
+  animationSpeedDesc: "화면 전환 및 호버 인터랙션 효과의 속도를 조절합니다.",
+  animationOff: "끄기",
+  animationFast: "빠르게",
+  animationDefault: "기본값",
+  animationSlow: "부드럽게",
+  resetDefaultsTitle: "설정 기본값 복원",
+  resetDefaultsDesc: "모든 레이아웃, 디자인 및 뷰 커스터마이징 설정을 초기 순정 상태로 되돌립니다.",
+
+  // Settings Modal - Admin tab
+  adminCurrentAccount: "현재 계정",
+  adminIsolationMode: "격리 모드",
+  adminMultiUserPrivacy: "완전한 멀티유저 프라이버시",
+  adminCalDavEndpoint: "CalDAV 엔드포인트",
+  adminActiveEnabled: "정상 동작 중",
+  adminOpenDashboard: "관리자 콘솔 대시보드 열기 →",
 
   // CalDAV & Sync
-  syncTitle: "CalDAV 모바일 및 외부 앱 동기화",
-  syncDesc: "Android(DAVx⁵, Tasks.org), Apple 미리알림, Thunderbird 등 표준 CalDAV를 지원하는 모든 기기 및 앱과 실시간 양방향으로 동기화됩니다.",
-  syncBaseUrl: "CalDAV 기본 엔드포인트 URL",
+  syncTitle: "CalDAV 모바일 동기화 (Android / Apple)",
+  syncDesc: "CheckFlow는 표준 CalDAV 프로토콜을 통해 Android, Apple 미리알림, Thunderbird와의 완전한 양방향 동기화를 지원합니다.",
+  syncBaseUrl: "CalDAV 서버 주소 (Base URL)",
   syncCopyUrl: "URL 복사",
-  syncCopied: "복사 완료!",
+  syncCopied: "복사됨!",
   syncDownloadIcs: ".ICS 피드 다운로드",
-  syncTestConnection: "연결 테스트",
+  syncTestConnection: "엔드포인트 연결 테스트",
   syncTesting: "연결 확인 중...",
-  syncTestSuccess: "✓ CalDAV 엔드포인트가 정상적으로 응답합니다 (200 OK)",
+  syncTestSuccess: "CalDAV 서버가 정상적으로 응답했습니다",
+  syncTestError: "엔드포인트 테스트 실패",
   syncTabAndroid: "Android (DAVx⁵)",
-  syncTabApple: "Apple 미리알림 (iOS / macOS)",
-  syncTabThunderbird: "Thunderbird (Desktop)",
-  syncAndroidStep1: "Google Play Store 또는 F-Droid에서 'DAVx⁵' 앱을 설치합니다.",
-  syncAndroidStep2: "DAVx⁵ 실행 → 계정 추가(+) → 'URL 및 사용자 이름으로 로그인'을 선택합니다.",
-  syncAndroidStep3: "위 기본 URL을 입력하고, CheckFlow 계정 이메일과 비밀번호를 입력합니다.",
-  syncAndroidStep4: "'VTODO (할 일)' 컬렉션을 활성화하면 Tasks.org 또는 OpenTasks 앱과 실시간 동기화됩니다.",
-  syncAppleStep1: "기기 설정 → 미리알림 → 계정 → '계정 추가'를 선택합니다.",
-  syncAppleStep2: "'기타' 선택 → 'CalDAV 계정 추가'를 선택합니다.",
-  syncAppleStep3: "서버 주소에 위 URL을 입력하고, 사용자 이름/비밀번호에 CheckFlow 계정 정보를 입력합니다.",
-  syncAppleStep4: "'미리알림' 항목을 활성화하고 저장을 누릅니다.",
-  syncThunderbirdStep1: "Thunderbird 실행 → 캘린더 탭으로 이동 → '새 캘린더'를 선택합니다.",
-  syncThunderbirdStep2: "'네트워크에 저장' 선택 → 형식: 'CalDAV'를 선택합니다.",
-  syncThunderbirdStep3: "위치에 위 기본 URL을 입력하고, 사용자 이름에 CheckFlow 계정 이메일을 입력합니다.",
-  syncThunderbirdStep4: "인증 대화상자가 표시되면 비밀번호를 입력하여 완료합니다.",
+  syncTabApple: "Apple 미리알림",
+  syncTabThunderbird: "Thunderbird",
+  syncAndroidStep1: "Google Play 스토어 또는 F-Droid에서 DAVx⁵ 앱을 설치합니다.",
+  syncAndroidStep2: "'URL 및 사용자 이름으로 로그인'을 선택하고 위의 CalDAV URL을 입력합니다.",
+  syncAndroidStep3: "CheckFlow 이메일 계정과 비밀번호를 입력합니다.",
+  syncAndroidStep4: "Tasks.org 또는 OpenTasks 등의 앱을 열어 동기화된 할 일을 관리하세요.",
+  syncAppleStep1: "시스템 설정(macOS) 또는 설정(iOS/iPadOS) → 인터넷 계정으로 이동합니다.",
+  syncAppleStep2: "'계정 추가' → 'CalDAV 계정 추가'를 선택합니다.",
+  syncAppleStep3: "계정 유형을 '수동'으로 설정하고 위의 CalDAV 서버 주소와 로그인 정보를 입력합니다.",
+  syncAppleStep4: "Apple 미리알림(Reminders) 앱에 작업 목록이 자동으로 동기화됩니다.",
+  syncThunderbirdStep1: "Mozilla Thunderbird를 열고 캘린더 / 작업 탭으로 이동합니다.",
+  syncThunderbirdStep2: "캘린더 목록 우클릭 → '새 캘린더' → '네트워크에서'를 선택합니다.",
+  syncThunderbirdStep3: "'CalDAV'를 선택하고 위의 CalDAV 주소와 로그인 정보를 입력합니다.",
+  syncThunderbirdStep4: "CheckFlow의 작업 목록이 Thunderbird Tasks에 표시됩니다.",
+  syncAndroidTip: "DAVx⁵ 계정 설정에서 동기화 주기를 15분으로 설정하면 배터리 소모를 줄이면서 실시간 동기화를 유지할 수 있습니다.",
+  syncAppleTip: "Nginx/Caddy 등 리버스 프록시 뒤에서 HTTPS를 사용할 경우 올바른 SSL 인증서가 구성되어 있는지 확인하세요.",
+  syncThunderbirdTip: "Thunderbird 작업 뷰에서 CheckFlow의 우선순위, 마감일, 완료 상태가 그대로 표시됩니다.",
 
   // Task List
   tasks: "할 일",
   hideDone: "완료항목 숨기기",
   showDone: "완료항목 표시",
-  completedSection: "완료된 항목",
-  addTaskPlaceholder: "새 할 일 추가...",
+  completedSection: "완료됨",
+  addTaskPlaceholder: "새로운 할 일을 적어볼까요?",
   add: "추가",
-  noTasksYet: "등록된 할 일이 없습니다. 새로운 할 일을 추가해보세요!",
-  selectListToStart: "목록을 선택하여 할 일을 확인하세요",
+  noTasksYet: "이 목록에 등록된 할 일이 없습니다",
+  selectListToStart: "시작할 목록을 선택하세요",
   loading: "불러오는 중...",
   today: "오늘",
   tomorrow: "내일",
@@ -113,69 +166,71 @@ export const ko: TranslationDict = {
   // Task Detail
   taskTitlePlaceholder: "할 일 제목",
   priority: "우선순위",
-  priorityNone: "지정 안 함",
+  priorityNone: "없음",
   priorityLow: "낮음",
-  priorityMedium: "보통",
+  priorityMedium: "중간",
   priorityHigh: "높음",
   dueDate: "마감일",
   clear: "초기화",
   notes: "메모",
-  notesPlaceholder: "자유롭게 메모를 작성하세요…\n\n마크다운 문법 지원: **굵게**, *기울임*, # 제목, - 목록, - [ ] 체크박스 등",
+  notesPlaceholder: "상세 내용을 입력하세요 (마크다운 지원)...",
   subtasks: "하위작업",
-  addSubtaskPlaceholder: "하위 작업 추가…",
-  deleteTaskConfirm: "이 할 일을 삭제하시겠습니까?",
-  autoSaved: "자동 저장 완료",
-  saving: "저장 중…",
-  created: "생성 일시",
-  edited: "수정 일시",
+  addSubtaskPlaceholder: "하위 작업을 적어보세요...",
+  deleteTaskConfirm: "태스크를 삭제하시겠습니까?",
+  autoSaved: "저장됨",
+  saving: "저장 중...",
+  created: "생성일",
+  edited: "수정일",
+  previewTab: "미리보기",
+  editTab: "편집",
 
   // Toolbars
   bold: "굵게",
   italic: "기울임",
   heading: "제목",
-  bulletList: "글머리 기호 목록",
-  numberedList: "번호 매기기 목록",
+  bulletList: "글머리 기호",
+  numberedList: "번호 목록",
   checkbox: "체크박스",
-  code: "코드 블록",
+  code: "코드",
 
   // TickTick Mode Switcher & Quick Add
-  textMode: "마크다운 메모 모드",
-  subtaskMode: "체크리스트 모드",
-  switchToTextMode: "마크다운 메모 모드로 전환",
-  switchToSubtaskMode: "하위 체크리스트 모드로 전환",
-  moveToList: "다른 목록으로 이동",
+  textMode: "텍스트 모드",
+  subtaskMode: "하위작업 모드",
+  switchToTextMode: "텍스트 모드로 전환",
+  switchToSubtaskMode: "하위작업 모드로 전환",
+  moveToList: "목록 이동",
   quickAdd: "빠른 추가",
   quickToday: "오늘",
   quickTomorrow: "내일",
   quickNextWeek: "다음 주",
-  selectDate: "마감일 지정",
-  selectPriority: "우선순위 지정",
-  selectTag: "태그 지정",
-  copied: "복사 완료!",
+  selectDate: "날짜 선택",
+  selectPriority: "우선순위",
+  selectTag: "태그 선택",
+  copied: "복사됨",
 
   // Context Menu
-  editTask: "수정",
+  editTask: "작업 수정",
   duplicateTask: "복제",
-  moveTask: "이동…",
+  moveTask: "이동...",
   deleteTask: "삭제",
-  renameList: "이름 변경",
+  renameList: "목록 이름 변경",
   deleteList: "목록 삭제",
-  taskUndoHint: "삭제되었습니다. 클릭하여 되돌리기",
-  listUndoHint: "목록이 삭제되었습니다. 클릭하여 되돌리기",
+  taskUndoHint: "작업이 삭제되었습니다",
+  listUndoHint: "목록이 삭제되었습니다",
 
   // Labs, Kanban & Customization
-  labs: "실험실 (Labs)",
-  labsDesc: "실험적인 기능들을 개별적으로 활성화하거나 비활성화할 수 있습니다.",
+  labs: "실험실",
+  labsDesc: "실험적 기능 및 UI 개인화 설정입니다.",
   kanbanView: "칸반 보드",
-  listView: "리스트 뷰",
+  listView: "목록 뷰",
   enableKanban: "칸반 보드 뷰",
-  enableKanbanDesc: "할 일을 3컬럼 보드(할 일 / 진행 중 / 완료) 형태로 전환하여 관리합니다.",
-  swapBlocks: "상하 블록 위치 변경",
-  resetDefaults: "기본값으로 복원",
-  resetConfirm: "모든 UI 커스텀 설정을 초기 기본값으로 복원하시겠습니까?",
+  enableKanbanDesc: "목록에서 리스트 뷰와 3컬럼 칸반 보드 뷰 간을 자유롭게 전환합니다.",
+  swapBlocks: "블록 순서 변경",
+  resetDefaults: "기본값 복원",
+  resetConfirm: "모든 커스터마이징 설정을 초기 상태로 되돌리시겠습니까?",
   todoCol: "할 일",
   inProgressCol: "진행 중",
   doneCol: "완료",
-  accessRestricted: "접근 권한 제한",
-  adminRequired: "이 관리 콘솔은 ADMIN 권한이 필요합니다.",
+  accessRestricted: "접근 제한",
+  adminRequired: "이 콘솔은 ADMIN 권한이 필요합니다.",
 };

src/lib/i18n/types.ts

@@ -58,7 +58,7 @@ export interface TranslationDict {
   searchPlaceholder: string;
   searchExpandedPlaceholder: string;
 
-  // Settings Modal
+  // Settings Modal - General & Tabs
   settingsModalTitle: string;
   profile: string;
   preferences: string;
@@ -70,6 +70,55 @@ export interface TranslationDict {
   days14: string;
   days30: string;
   neverDelete: string;
+  settingsSaved: string;
+  passwordChangePlaceholder: string;
+  yourNamePlaceholder: string;
+
+  // Settings Modal - Labs & Customization
+  labsSectionView: string;
+  labsSectionLayout: string;
+  labsSectionAppearance: string;
+  labsKanbanTitle: string;
+  labsKanbanDesc: string;
+  labsDensityTitle: string;
+  labsDensityDesc: string;
+  densityCompact: string;
+  densityDefault: string;
+  densityComfortable: string;
+  sidebarWidthTitle: string;
+  sidebarWidthDesc: string;
+  detailWidthTitle: string;
+  detailWidthDesc: string;
+  fontSizeTitle: string;
+  fontSizeDesc: string;
+  fontSizeSmall: string;
+  fontSizeMedium: string;
+  fontSizeLarge: string;
+  accentColorTitle: string;
+  accentColorDesc: string;
+  saturationLabel: string;
+  hueLabel: string;
+  roundnessTitle: string;
+  roundnessDesc: string;
+  roundnessSharp: string;
+  roundnessDefault: string;
+  roundnessRound: string;
+  animationSpeedTitle: string;
+  animationSpeedDesc: string;
+  animationOff: string;
+  animationFast: string;
+  animationDefault: string;
+  animationSlow: string;
+  resetDefaultsTitle: string;
+  resetDefaultsDesc: string;
+
+  // Settings Modal - Admin tab
+  adminCurrentAccount: string;
+  adminIsolationMode: string;
+  adminMultiUserPrivacy: string;
+  adminCalDavEndpoint: string;
+  adminActiveEnabled: string;
+  adminOpenDashboard: string;
 
   // CalDAV & Sync
   syncTitle: string;
@@ -81,6 +130,7 @@ export interface TranslationDict {
   syncTestConnection: string;
   syncTesting: string;
   syncTestSuccess: string;
+  syncTestError: string;
   syncTabAndroid: string;
   syncTabApple: string;
   syncTabThunderbird: string;
@@ -96,6 +146,9 @@ export interface TranslationDict {
   syncThunderbirdStep2: string;
   syncThunderbirdStep3: string;
   syncThunderbirdStep4: string;
+  syncAndroidTip: string;
+  syncAppleTip: string;
+  syncThunderbirdTip: string;
 
   // Task List
   tasks: string;
@@ -128,6 +181,8 @@ export interface TranslationDict {
   saving: string;
   created: string;
   edited: string;
+  previewTab: string;
+  editTab: string;
 
   // Toolbars
   bold: string;

src/lib/mockData.ts

@@ -258,11 +258,18 @@ export function updateTaskInTree(tree: MockTask[], updated: MockTask): MockTask[
   });
 }
 
-// Soft delete to Trash
+// Soft delete to Trash (recursively mark node and its children)
 export function moveToTrashInTree(tree: MockTask[], id: string): MockTask[] {
+  const markDeleted = (node: MockTask): MockTask => ({
+    ...node,
+    isDeleted: true,
+    deletedAt: new Date().toISOString(),
+    children: node.children ? node.children.map(markDeleted) : [],
+  });
+
   return tree.map((node) => {
     if (node.id === id) {
-      return { ...node, isDeleted: true, deletedAt: new Date().toISOString() };
+      return markDeleted(node);
     }
     if (node.children && node.children.length > 0) {
       return { ...node, children: moveToTrashInTree(node.children, id) };
@@ -271,14 +278,65 @@ export function moveToTrashInTree(tree: MockTask[], id: string): MockTask[] {
   });
 }
 
-// Restore from Trash
-export function restoreTaskInTree(tree: MockTask[], id: string): MockTask[] {
-  return tree.map((node) => {
-    if (node.id === id) {
-      return { ...node, isDeleted: false, deletedAt: null };
+// Restore task (and all its subtasks) from Trash, ensuring ancestor parents are also un-deleted
+export function restoreTaskInTree(tree: MockTask[], targetId: string): MockTask[] {
+  const unmarkNodeAndChildren = (node: MockTask): MockTask => ({
+    ...node,
+    isDeleted: false,
+    deletedAt: null,
+    children: node.children ? node.children.map(unmarkNodeAndChildren) : [],
+  });
+
+  function processNodes(nodes: MockTask[]): { updated: MockTask[]; found: boolean } {
+    let foundInThisLevel = false;
+    const updated = nodes.map((node) => {
+      if (node.id === targetId) {
+        foundInThisLevel = true;
+        return unmarkNodeAndChildren(node);
       }
       if (node.children && node.children.length > 0) {
-      return { ...node, children: restoreTaskInTree(node.children, id) };
+        const res = processNodes(node.children);
+        if (res.found) {
+          foundInThisLevel = true;
+          // If a child was restored, ancestor parent must also be restored
+          return {
+            ...node,
+            isDeleted: false,
+            deletedAt: null,
+            children: res.updated,
+          };
+        }
+        return { ...node, children: res.updated };
+      }
+      return node;
+    });
+    return { updated, found: foundInThisLevel };
+  }
+
+  return processNodes(tree).updated;
+}
+
+// Recursively filter active tree (stripping isDeleted tasks at all depths)
+export function filterActiveTree(nodes: MockTask[], showCompleted = true): MockTask[] {
+  const result: MockTask[] = [];
+  for (const node of nodes) {
+    if (!node.isDeleted) {
+      if (showCompleted || !node.completed) {
+        const cleanChildren = node.children ? filterActiveTree(node.children, showCompleted) : [];
+        result.push({ ...node, children: cleanChildren });
+      }
+    }
+  }
+  return result;
+}
+
+// Completely remove task and all its descendants from active tree state
+export function removeTaskFromTree(tree: MockTask[], idToDelete: string): MockTask[] {
+  return tree
+    .filter((node) => node.id !== idToDelete)
+    .map((node) => {
+      if (node.children && node.children.length > 0) {
+        return { ...node, children: removeTaskFromTree(node.children, idToDelete) };
       }
       return node;
     });
@@ -286,14 +344,7 @@ export function restoreTaskInTree(tree: MockTask[], id: string): MockTask[] {
 
 // Permanent delete
 export function deleteTaskInTree(tree: MockTask[], idToDelete: string): MockTask[] {
-  return tree
-    .filter((node) => node.id !== idToDelete)
-    .map((node) => {
-      if (node.children && node.children.length > 0) {
-        return { ...node, children: deleteTaskInTree(node.children, idToDelete) };
-      }
-      return node;
-    });
+  return removeTaskFromTree(tree, idToDelete);
 }
 
 export function emptyTrashInTree(tree: MockTask[]): MockTask[] {
@@ -334,25 +385,24 @@ export function findTaskInTree(tree: MockTask[], id: string): MockTask | null {
   return null;
 }
 
-// Get all active tasks or all trash tasks flattened (strictly deduplicated)
+// Get all top-level trash tasks preserving intact nested sub-tasks hierarchy
 export function getAllTrashTasks(tree: MockTask[]): MockTask[] {
-  const map = new Map<string, MockTask>();
+  const result: MockTask[] = [];
 
   function collect(nodes: MockTask[]) {
     for (const node of nodes) {
       if (node.isDeleted) {
-        if (!map.has(node.id)) {
-          map.set(node.id, { ...node, children: [] });
-        }
-      }
-      if (node.children && node.children.length > 0) {
+        // Collect top-level deleted item with its full subtasks tree intact
+        result.push(node);
+      } else if (node.children && node.children.length > 0) {
+        // If parent is not deleted, check if any subtask was individually deleted
         collect(node.children);
       }
     }
   }
 
   collect(tree);
-  return Array.from(map.values());
+  return result;
 }
 
 // Filter tasks by custom tag
@@ -368,3 +418,8 @@ export function filterTasksByTag(tree: MockTask[], tagName: string): MockTask[]
   }
   return matched;
 }
+
+// Get count of active tasks for a tag
+export function getTagTaskCount(tree: MockTask[], tagName: string): number {
+  return filterTasksByTag(tree, tagName).filter((t) => !t.completed).length;
+}