TODO UX 개선

src/pages/todo/Todo.css

@@ -83,7 +83,7 @@
 
 .todo-board {
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 16px;
     align-items: start;
 }
@@ -247,6 +247,129 @@
     color: #f9b6b1;
 }
 
+/* ── Done Panel ──────────────────────────────────────────────────────── */
+
+.todo-done-panel {
+    background: rgba(10, 18, 45, 0.6);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    transition: border-color 0.2s ease, background 0.2s ease;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+}
+
+.todo-done-panel.is-drag-over {
+    border-color: rgba(244, 114, 182, 0.4);
+    background: rgba(244, 114, 182, 0.04);
+}
+
+.todo-done-panel__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 14px 16px 12px;
+    border-bottom: 1px solid var(--line);
+    flex-wrap: wrap;
+}
+
+.todo-done-panel__title-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.todo-done-panel__total-hint {
+    font-size: 11px;
+    color: var(--text-muted);
+    opacity: 0.6;
+}
+
+/* ── 날짜 필터 ────────────────────────────────────────────────────────── */
+
+.todo-done-panel__filter {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+    flex: 1;
+    justify-content: flex-end;
+}
+
+.todo-date-btn {
+    font-size: 11px;
+    padding: 3px 10px;
+    border-radius: 999px;
+    border: 1px solid var(--line);
+    background: rgba(255, 255, 255, 0.04);
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+    white-space: nowrap;
+    font-family: inherit;
+    line-height: 1.6;
+}
+
+.todo-date-btn:hover {
+    background: rgba(244, 114, 182, 0.1);
+    border-color: rgba(244, 114, 182, 0.3);
+    color: #f472b6;
+}
+
+.todo-date-btn.is-active {
+    background: rgba(244, 114, 182, 0.18);
+    border-color: rgba(244, 114, 182, 0.5);
+    color: #f472b6;
+    font-weight: 600;
+}
+
+.todo-date-input {
+    font-size: 11px;
+    padding: 3px 8px;
+    border-radius: 8px;
+    border: 1px solid var(--line);
+    background: rgba(0, 0, 0, 0.25);
+    color: var(--text-muted);
+    cursor: pointer;
+    font-family: inherit;
+    outline: none;
+    transition: border-color 0.15s ease;
+    height: 26px;
+}
+
+.todo-date-input:focus {
+    border-color: rgba(244, 114, 182, 0.4);
+    color: var(--text-bright);
+}
+
+/* 완료 패널 카드 그리드 */
+.todo-done-panel__body {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 10px;
+    padding: 12px;
+}
+
+.todo-done-panel__body .todo-col__empty {
+    grid-column: 1 / -1;
+}
+
+.todo-done-panel__body .todo-card {
+    opacity: 0.75;
+}
+
+.todo-done-panel__body .todo-card:hover {
+    opacity: 1;
+}
+
+.todo-done-panel__body .todo-card__title {
+    text-decoration: line-through;
+    text-decoration-color: rgba(244, 114, 182, 0.4);
+}
+
 /* ── Responsive ──────────────────────────────────────────────────────── */
 
 @media (max-width: 768px) {
@@ -257,6 +380,20 @@
     .todo-col {
         min-height: 120px;
     }
+
+    .todo-done-panel__head {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .todo-done-panel__filter {
+        justify-content: flex-start;
+    }
+
+    .todo-done-panel__body {
+        grid-template-columns: 1fr;
+    }
 }
 
 @media (max-width: 480px) {