feat(project): 카드 드래그 순서변경/전체멤버/탭 슬라이드/내업무 실시간반영

- 홈 프로젝트 카드 드래그 재정렬(관리자, projects.sort_order 공유)
- 프로젝트 제목 색상 pill 스타일로 강조
- 보드 세션 우클릭에 "업무 추가" 메뉴 추가
- 좌측 "멤버"→"프로젝트 멤버" + "전체 멤버" 그리드(클릭 시 담당 업무 팝업)
- 뷰 탭/스코프 토글에 슬라이드 하이라이트 애니메이션
- "내 업무" 패널이 8초 실시간 폴링에서 빠져 있던 문제 수정(홈/프로젝트 화면 모두 /api/my-tasks 로 patch)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/static/project.css

@@ -66,6 +66,8 @@
   background: #fff; box-shadow: var(--pj-card-shadow); transition: box-shadow .14s, transform .1s;
 }
 .pj-project-card:hover { box-shadow: var(--pj-card-shadow-hover); transform: translateY(-1px); }
+.pj-project-card[draggable="true"] { cursor: grab; }
+.pj-project-card.is-dragging { opacity: .45; }
 .pj-project-cardlink { display: flex; gap: 12px; padding: 16px; text-decoration: none; color: inherit; }
 /* 완료 프로젝트 — 비활성(흐리게) */
 .pj-project-card.is-done { background: #f6f7f8; opacity: .62; }
@@ -239,7 +241,11 @@
 .pj-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex: none; }
 .pj-project-title {
   flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 16px; text-align: center;
-  font-size: 20px; font-weight: 800; color: var(--pj-ink);
+}
+.pj-project-title-pill {
+  display: inline-block; max-width: 100%; vertical-align: middle;
+  font-size: 22px; font-weight: 800; color: #fff;
+  background: var(--pj-color, var(--pj-accent)); border-radius: 14px; padding: 8px 24px;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 /* 현재 활성 뷰(보드/리스트/달력/타임라인)가 pj-main 의 남은 세로 공간을
@@ -248,9 +254,17 @@
 .pj-view { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
 .pj-view[hidden] { display: none; }
 .pj-view[data-view="board"]:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; }
-.pj-view-tabs { display: inline-flex; flex: 0 0 auto; 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; white-space: nowrap; }
-.pj-tab.is-active { background: var(--pj-accent); color: #fff; box-shadow: 0 1px 3px rgba(123,104,238,.35); }
+.pj-view-tabs { display: inline-flex; position: relative; flex: 0 0 auto; background: #eef0f2; border-radius: 10px; padding: 3px; gap: 2px; }
+.pj-tab { position: relative; z-index: 1; border: none; background: transparent; padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #525860; cursor: pointer; white-space: nowrap; }
+.pj-tab.is-active { background: transparent; color: #fff; }
+/* 뷰 탭이 바뀔 때 배경이 새 탭 위치로 미끄러지는 하이라이트 — is-active 의
+   단순 배경색 대신 이 절대배치 요소 하나가 실제로 움직인다. */
+.pj-tab-highlight {
+  position: absolute; top: 3px; left: 0; z-index: 0;
+  background: var(--pj-accent); border-radius: 8px; box-shadow: 0 1px 3px rgba(123,104,238,.35);
+  transition: transform .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1);
+}
+.pj-tab-highlight.pj-no-anim { transition: none; }
 
 /* 알림 벨 흔들림(미읽음 있을 때) */
 @keyframes pj-bell-ring {
@@ -577,6 +591,32 @@
 .pj-member-pick-avatar img.pj-member-pick-icon { width: 36px; height: 36px; }
 .pj-member-pick-stacked .pj-member-pick-name { font-size: 12.5px; }
 
+/* ── 좌측 사이드바 "전체 멤버" — 4열 그리드, 아이콘 아래 이름(새 프로젝트
+   모달의 pj-member-pick-stacked 와 같은 아이콘 크기 재사용). ── */
+.pj-allmembers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 4px; }
+.pj-allmember-item {
+  display: flex; flex-direction: column; align-items: center; gap: 4px;
+  padding: 6px 2px; border: none; background: none; border-radius: 8px; cursor: pointer;
+  font: inherit; width: 100%;
+}
+.pj-allmember-item:hover { background: #f5f6f8; }
+.pj-allmember-item .pj-member-pick-icon.material-symbols-outlined { font-size: 40px; }
+.pj-allmember-item img.pj-member-pick-icon { width: 36px; height: 36px; }
+.pj-allmember-name { font-size: 11.5px; color: #333; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ── 전체 멤버 클릭 팝업 — 담당 업무 목록(프로젝트/세션/제목/마감일) ── */
+.pj-mt-card { width: min(600px, 94vw); }
+.pj-mt-list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 50vh; overflow-y: auto; }
+.pj-mt-row {
+  display: grid; grid-template-columns: 100px 90px 1fr 80px; gap: 8px; align-items: center;
+  padding: 8px 6px; border-bottom: 1px solid #f1f2f4; font-size: 12.5px;
+}
+.pj-mt-row.is-done { color: #9aa1a9; text-decoration: line-through; }
+.pj-mt-proj { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pj-mt-stage { color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pj-mt-title2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pj-mt-due { text-align: right; color: var(--pj-ink-soft); font-weight: 600; white-space: nowrap; }
+
 /* ── 댓글만 보는 채팅형 팝업(카톡 대화창 느낌) ── */
 /* 크기 고정(500x850) — 내용이 많아도 팝업 크기는 그대로, 목록만 스크롤. */
 .pj-modal-chat {