fix(project): 내 업무 개수 배지 - 진행/완료만, 이름 오른쪽, 하늘색/빨강

전체 배지 제거하고 진행(하늘색)·완료(빨강) 두 개만 프로젝트 이름
오른쪽(.pj-mytree-head 안, 접어도 계속 보이는 자리)에 표시.

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

app/modules/project/templates/project/inbox.html

@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/project.css?v=20260917x" />
+<link rel="stylesheet" href="/static/project.css?v=20260917y" />
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 {% endblock %}
 

app/modules/project/templates/project/index.html

@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/project.css?v=20260917x" />
+<link rel="stylesheet" href="/static/project.css?v=20260917y" />
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 {% endblock %}
 
@@ -156,13 +156,12 @@
             <a class="pj-mytree-proj" href="/project/p/{{ p.id }}">
               <span class="pj-mytree-proj-name">{{ p.name }}</span>
             </a>
-          </div>
+            <!-- .pj-mytree-head 자체는 접어도(is-collapsed 는 .pj-mytree-tasks 만
-          <!-- 폴더를 접어도(is-collapsed 는 .pj-mytree-tasks 만 숨김) 계속 보이도록
+                 숨김) 계속 보인다. -->
-               업무 목록과 별개 형제로 둔다. -->
+            <span class="pj-mytree-counts">
-          <div class="pj-mytree-counts">
+              <span class="pj-mtc-num pj-mtc-open" title="진행">{{ p.open }}</span>
-            <span class="pj-mtc">전체<span class="pj-mtc-num pj-mtc-total">{{ p.total }}</span></span>
+              <span class="pj-mtc-num pj-mtc-done" title="완료">{{ p.done }}</span>
-            <span class="pj-mtc">진행<span class="pj-mtc-num pj-mtc-open">{{ p.open }}</span></span>
+            </span>
-            <span class="pj-mtc">완료<span class="pj-mtc-num pj-mtc-done">{{ p.done }}</span></span>
           </div>
           <ul class="pj-mytree-tasks">
             {% for t in p.tasks %}

app/modules/project/templates/project/project.html

@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/project.css?v=20260917x" />
+<link rel="stylesheet" href="/static/project.css?v=20260917y" />
 <!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 <!-- 타임라인 vis-timeline — self-host -->
@@ -207,13 +207,12 @@
             <a class="pj-mytree-proj" href="/project/p/{{ p.id }}">
               <span class="pj-mytree-proj-name">{{ p.name }}</span>
             </a>
-          </div>
+            <!-- .pj-mytree-head 자체는 접어도(is-collapsed 는 .pj-mytree-tasks 만
-          <!-- 폴더를 접어도(is-collapsed 는 .pj-mytree-tasks 만 숨김) 계속 보이도록
+                 숨김) 계속 보인다. -->
-               업무 목록과 별개 형제로 둔다. -->
+            <span class="pj-mytree-counts">
-          <div class="pj-mytree-counts">
+              <span class="pj-mtc-num pj-mtc-open" title="진행">{{ p.open }}</span>
-            <span class="pj-mtc">전체<span class="pj-mtc-num pj-mtc-total">{{ p.total }}</span></span>
+              <span class="pj-mtc-num pj-mtc-done" title="완료">{{ p.done }}</span>
-            <span class="pj-mtc">진행<span class="pj-mtc-num pj-mtc-open">{{ p.open }}</span></span>
+            </span>
-            <span class="pj-mtc">완료<span class="pj-mtc-num pj-mtc-done">{{ p.done }}</span></span>
           </div>
           <ul class="pj-mytree-tasks">
             {% for t in p.tasks %}

app/static/project.css

@@ -408,19 +408,17 @@
 .pj-mytree-proj:hover { background: #f6f7f8; }
 /* 긴 이름이 밀려도 2줄로 안 꺾이게 — 말줄임표로. */
 .pj-mytree-proj-name { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-/* 프로젝트 이름 "아래" 줄에 전체/진행/완료 개수(숫자는 색깔 있는 동그라미 안에).
+/* 프로젝트 이름 오른쪽에 진행/완료 개수(숫자만, 색깔 있는 동그라미 안에).
-   .pj-mytree-tasks(업무 목록)와 형제라 폴더를 접어도(is-collapsed) 계속 보인다.
+   .pj-mytree-head 자체가 폴더를 접어도(is-collapsed 는 .pj-mytree-tasks 만
-   왼쪽 여백은 토글 버튼 폭(26px)만큼 줘서 프로젝트 이름과 줄을 맞춘다. */
+   숨김) 항상 보이므로 이 위치 그대로 유지된다. */
-.pj-mytree-counts { display: flex; align-items: center; gap: 7px; margin: 1px 0 4px 26px; }
+.pj-mytree-counts { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
-.pj-mtc { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: #9aa1a9; font-weight: 600; }
 .pj-mtc-num {
   display: inline-flex; align-items: center; justify-content: center;
-  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
+  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
-  font-size: 10px; font-weight: 800; color: #fff;
+  font-size: 10.5px; font-weight: 800; color: #fff;
 }
-.pj-mtc-num.pj-mtc-total { background: #8b93a0; } /* 전체 = 중립 회색 */
+.pj-mtc-num.pj-mtc-open { background: #38bdf8; } /* 진행 = 하늘색 */
-.pj-mtc-num.pj-mtc-open { background: #4573d2; }  /* 진행 = 파랑 */
+.pj-mtc-num.pj-mtc-done { background: #e8384f; } /* 완료 = 빨강 */
-.pj-mtc-num.pj-mtc-done { background: #37a36c; }  /* 완료 = 초록 */
 .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-group.is-collapsed .pj-mytree-tasks { display: none; }
 .pj-mytree-task a { display: flex; align-items: flex-start; gap: 7px; padding: 6px 6px; border-radius: 7px; text-decoration: none; color: inherit; }