feat(project): 내업무 트리·벨 애니메이션·타임라인 그룹·리스트 정렬/리사이즈·검정 탭

- 홈 '내 업무': 프로젝트별 그룹 트리, 업무 아래 날짜 기간 작은 글씨
- 알림 벨: 미읽음 있으면 종 흔들림 애니메이션 + 숫자 배지(기존)
- 타임라인: 프로젝트 전체 기간을 연한 색 배경으로 칠하고(그룹 행) 그 안에
  업무 막대 표시 → 업무명에 프로젝트명 불필요
- 리스트: 컬럼 헤더 클릭 정렬(오름/내림 아이콘), 컬럼 너비 드래그 조절+
  localStorage 저장, 헤더 글씨 크고 굵게
- 상단 뷰 탭 선택 시 검은 배경 흰 글씨

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app/static/project.css

@@ -98,7 +98,18 @@
 .pj-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
 .pj-view-tabs { display: inline-flex; background: #eef0f2; border-radius: 10px; padding: 3px; gap: 2px; }
 .pj-tab { border: none; background: transparent; padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #525860; cursor: pointer; }
-.pj-tab.is-active { background: #fff; color: #1e1f21; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
+.pj-tab.is-active { background: #1e1f21; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
+
+/* 알림 벨 흔들림(미읽음 있을 때) */
+@keyframes pj-bell-ring {
+  0%, 50%, 100% { transform: rotate(0); }
+  10%, 30% { transform: rotate(14deg); }
+  20%, 40% { transform: rotate(-14deg); }
+}
+.pj-bell.has-unread .material-symbols-outlined {
+  animation: pj-bell-ring 1.4s ease-in-out infinite;
+  transform-origin: top center;
+}
 
 /* ── 보드(칸반) ── */
 .pj-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
@@ -120,9 +131,29 @@
 
 /* ── 리스트 ── */
 .pj-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
-.pj-table th { text-align: left; padding: 9px 10px; border-bottom: 2px solid #eef0f2; color: #6b7280; font-size: 12px; }
+.pj-table th { text-align: left; padding: 9px 10px; border-bottom: 2px solid #eef0f2; color: #1e1f21; font-size: 14px; font-weight: 700; position: relative; }
 .pj-table td { padding: 10px; border-bottom: 1px solid #f1f2f4; }
 .pj-table tr.is-done td { color: #9aa1a9; text-decoration: line-through; }
+.pj-table-fixed { table-layout: fixed; }
+.pj-table-fixed th, .pj-table-fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pj-th-label { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 4px; }
+.pj-th-label:hover { color: #4573d2; }
+.pj-th-sort { font-size: 11px; color: #9aa1a9; }
+.pj-th-resize { position: absolute; top: 0; right: -3px; width: 8px; height: 100%; cursor: col-resize; z-index: 2; }
+.pj-th-resize:hover { background: linear-gradient(90deg, transparent 40%, #c9d4ea 40%, #c9d4ea 60%, transparent 60%); }
+
+/* ── 내 업무 트리(홈) ── */
+.pj-mytree-group { margin-bottom: 14px; }
+.pj-mytree-proj { display: flex; align-items: center; gap: 7px; text-decoration: none; color: #1e1f21; font-weight: 700; font-size: 13.5px; padding: 4px 2px; border-radius: 7px; }
+.pj-mytree-proj:hover { background: #f6f7f8; }
+.pj-mytree-tasks { list-style: none; margin: 2px 0 0; padding: 0 0 0 8px; border-left: 2px solid #eef0f2; margin-left: 10px; }
+.pj-mytree-task a { display: flex; align-items: flex-start; gap: 7px; padding: 6px 6px; border-radius: 7px; text-decoration: none; color: inherit; }
+.pj-mytree-task a:hover { background: #f6f7f8; }
+.pj-mytree-ic { font-size: 16px; flex: 0 0 auto; margin-top: 1px; }
+.pj-mytree-body { display: flex; flex-direction: column; min-width: 0; }
+.pj-mytree-title { font-size: 13px; font-weight: 600; }
+.pj-mytree-dates { font-size: 11px; color: #9aa1a9; margin-top: 1px; }
+.pj-mytree-task.is-done .pj-mytree-title { text-decoration: line-through; color: #9aa1a9; }
 
 /* ── 달력 (휴가 모듈과 동일한 월간 그리드 룩) ── */
 .pj-cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }