feat(project): 홈 카드 헤더 색상 채우기, 좌측 사이드바 헤더 대비 강화

- 프로젝트 카드: 이름 옆 작은 점 대신 카드 헤더 윗부분 전체를 프로젝트
  색으로 채우고 글자 흰색(보드 세션 헤더와 같은 원칙). 액션 아이콘(업무추가/
  수정)도 흰색으로, "완료" 칩은 반투명 흰 배경으로 대비 확보.
- 프로젝트 수정 후 DOM patch 로직도 새 구조(이름이 헤더 안, 설명은 본문
  맨 앞)에 맞게 수정.
- 좌측 "프로젝트"/"프로젝트 멤버"/"전체 멤버" 헤더 — 굵기만으론 12px
  회색이라 여전히 흐려 보여서, 글자 색을 진한 잉크색으로 올려 대비 확보.

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=20260917q" />
+<link rel="stylesheet" href="/static/project.css?v=20260917r" />
 <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=20260917q" />
+<link rel="stylesheet" href="/static/project.css?v=20260917r" />
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 {% endblock %}
 
@@ -22,11 +22,12 @@
          data-status="{{ p.status or 'active' }}"
          data-creator="{{ p.created_by or '' }}">
       <a class="pj-project-cardlink" href="/project/p/{{ p.id }}">
-        <span class="pj-project-dot"></span>
+        <div class="pj-project-header">
-        <div class="pj-project-body">
+          <span class="pj-project-name">{{ p.name }}
-          <div class="pj-project-name">{{ p.name }}
             {% if p.status == 'completed' %}<span class="pj-chip pj-chip-sm">완료</span>{% endif %}
+          </span>
         </div>
+        <div class="pj-project-body">
           {% if p.description %}<div class="pj-project-desc">{{ p.description }}</div>{% endif %}
           {% if p.members %}
           <div class="pj-project-members">

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=20260917q" />
+<link rel="stylesheet" href="/static/project.css?v=20260917r" />
 <!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 <!-- 타임라인 vis-timeline — self-host -->

app/static/project.css

@@ -68,26 +68,34 @@
 .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-cardlink { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
+/* 카드 헤더 — 예전엔 이름 옆 작은 점(dot)이었지만, 이제 헤더 윗부분 전체를
+   프로젝트 색으로 채우고 글자는 흰색(세션 헤더 색칠과 같은 원칙). */
+.pj-project-header {
+  display: flex; align-items: center; padding: 12px 16px;
+  background: var(--pj-color, #4573d2); color: #fff;
+  border-radius: calc(var(--pj-card-radius) - 1px) calc(var(--pj-card-radius) - 1px) 0 0;
+}
+.pj-project-name .pj-chip { background: rgba(255,255,255,.28); color: #fff; }
+.pj-project-body { padding: 12px 16px 16px; }
 /* 완료 프로젝트 — 비활성(흐리게) */
 .pj-project-card.is-done { background: #f6f7f8; opacity: .62; }
 .pj-project-card.is-done:hover { opacity: .85; }
-.pj-project-card.is-done .pj-project-dot { background: #9aa5b1; }
+/* 카드 우측 상단 액션(업무 추가/수정) — 헤더가 항상 색으로 채워지므로
-/* 카드 우측 상단 액션(업무 추가/수정) — 호버 시에만 노출 */
+   흰 아이콘으로, 호버 시에만 노출 */
 .pj-card-actions {
   position: absolute; top: 8px; right: 8px; display: flex; gap: 2px;
 }
 .pj-card-actions .pj-icon-btn {
   width: 28px; height: 28px;
   display: inline-flex; align-items: center; justify-content: center;
-  border-radius: 8px; color: #6b7280; opacity: 0; transition: opacity .12s;
+  border-radius: 8px; color: #fff; opacity: 0; transition: opacity .12s;
 }
 .pj-card-actions .pj-icon-btn .material-symbols-outlined { font-size: 18px; }
 .pj-project-card:hover .pj-card-actions .pj-icon-btn { opacity: 1; }
-.pj-card-actions .pj-icon-btn:hover { background: #eceef0; color: #1e1f21; }
+.pj-card-actions .pj-icon-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
-.pj-project-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pj-color, #4573d2); margin-top: 5px; flex: 0 0 auto; }
 .pj-project-name { font-weight: 700; font-size: 15px; }
-.pj-project-desc { color: #6b7280; font-size: 12.5px; margin-top: 3px; }
+.pj-project-desc { color: #6b7280; font-size: 12.5px; }
 /* 프로젝트 이름 아래 — 배정 멤버(아이콘+이름) */
 .pj-project-members { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 6px; }
 .pj-project-member { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #6b7280; }
@@ -204,6 +212,9 @@
 
 .pj-side-block { margin-bottom: 22px; }
 .pj-side-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 800; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
+/* 굵게 지정해도 연한 회색 + 12px 라서 눈에 잘 안 띄었음 — 텍스트만 진한
+   잉크색으로 대비를 올린다("+" 버튼은 원래 색 유지). */
+.pj-side-head span { color: var(--pj-ink); }
 .pj-member-list { list-style: none; margin: 0; padding: 0; }
 .pj-member-list li { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 7px; }
 .pj-member-list li:hover { background: #f6f7f8; }

app/static/project.js

@@ -518,7 +518,10 @@
         if (!descEl) {
           descEl = document.createElement("div");
           descEl.className = "pj-project-desc";
-          if (nameEl) nameEl.insertAdjacentElement("afterend", descEl);
+          // 이름은 이제 색칠된 헤더 안에 있으므로(afterend 로 넣으면 헤더
+          // 안에 끼어버림), 본문(.pj-project-body) 맨 앞에 넣는다.
+          const body = card.querySelector(".pj-project-body");
+          if (body) body.insertBefore(descEl, body.firstChild);
         }
         descEl.textContent = p.description;
       } else if (descEl) descEl.remove();
@@ -556,9 +559,8 @@
         ' data-start="' + (p.start_date || "") + '" data-due="' + (p.due_date || "") + '"' +
         ' data-color="' + color + '" data-status="active" data-creator="' + escapeHtml(p.created_by || "") + '">' +
         '<a class="pj-project-cardlink" href="/project/p/' + p.id + '">' +
-        '<span class="pj-project-dot"></span>' +
+        '<div class="pj-project-header"><span class="pj-project-name">' + escapeHtml(p.name || "") + "</span></div>" +
         '<div class="pj-project-body">' +
-        '<div class="pj-project-name">' + escapeHtml(p.name || "") + "</div>" +
         (p.description ? '<div class="pj-project-desc">' + escapeHtml(p.description) + "</div>" : "") +
         '<div class="pj-project-meta">' +
         (p.due_date ? '<span class="pj-chip">마감 ' + fmtDateKr(p.due_date) + "</span>" : "") +