From 4efe5a7a9a03c6d051279aced72ec9adfa11a250 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Mon, 22 Jun 2026 17:36:02 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=EC=83=81=EC=84=B8=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=ED=95=A0=20=EC=9D=BC=20=ED=83=AD/=ED=95=AD?=
 =?UTF-8?q?=EB=AA=A9=20UI=EB=A5=BC=20=EC=9E=91=EC=84=B1=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=EA=B3=BC=20=EB=8F=99=EC=9D=BC=ED=95=98=EA=B2=8C=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

상세 체크리스트 카테고리 탭을 작성 화면과 동일한 테두리 pill + 배지형 카운트로 변경(플랫 탭 제거),
항목 행 hover/텍스트 flex 도 작성 화면과 맞춤. 미사용 ck-tabs 클래스 제거.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/relay/TaskDetailPage.vue | 50 +++++++++++----------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/frontend/src/pages/relay/TaskDetailPage.vue b/frontend/src/pages/relay/TaskDetailPage.vue
index 1f1688f..03cbca4 100644
--- a/frontend/src/pages/relay/TaskDetailPage.vue
+++ b/frontend/src/pages/relay/TaskDetailPage.vue
@@ -681,7 +681,7 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
             <div class="checklist">
               <!-- 카테고리 탭 -->
               <div
-                class="cat-tabs ck-tabs"
+                class="cat-tabs"
                 role="tablist"
               >
                 <button
@@ -2604,9 +2604,12 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
   display: flex;
   align-items: center;
   gap: 0.6875rem;
-  padding: 0.5rem 0;
+  padding: 0.5625rem 0;
   border-radius: var(--radius-sm);
 }
+.citem:hover {
+  background: #f7f8fa;
+}
 /* 항목별 보완 내용(읽기 전용) — 체크박스+간격(1.8125rem)만큼 들여쓰기 */
 .citem-note {
   margin: 0 0 0.375rem 1.8125rem;
@@ -2653,6 +2656,7 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
 .citem .ctext {
   font-size: 0.844rem;
   color: var(--text);
+  flex: 1;
 }
 .citem.done .ctext {
   color: var(--text-3);
@@ -3534,42 +3538,35 @@ a.file-info {
 .cp-report-btn:hover {
   background: var(--accent-hover);
 }
-/* 체크리스트 카드 카테고리 탭 */
+/* 체크리스트 카드 카테고리 탭 — 업무 작성 화면과 동일한 pill 스타일 */
 .cat-tabs {
   display: flex;
-  gap: 0.25rem;
-  padding: 0.75rem 1.25rem 0;
-}
-/* 체크리스트 카드용 탭 — 모달과 달리 좌우 패딩 없이, 항목과 구분선 */
-.ck-tabs {
+  gap: 0.375rem;
+  margin-bottom: 0.5rem;
   flex-wrap: wrap;
-  padding: 0;
-  margin-bottom: 0.75rem;
-  border-bottom: 1px solid var(--border);
-  padding-bottom: 0.5rem;
 }
 .cat-tab {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
-  border: none;
-  background: transparent;
+  padding: 0.375rem 0.6875rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: #fff;
   font-family: inherit;
-  font-size: 0.8125rem;
+  font-size: 0.781rem;
   font-weight: 600;
   color: var(--text-2);
-  padding: 0.375rem 0.625rem;
-  border-radius: var(--radius-sm);
   cursor: pointer;
 }
 .cat-tab:hover {
-  background: #f1f2f4;
+  background: #f7f8fa;
 }
 .cat-tab .cat-dot {
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 50%;
-  background: var(--text-3);
+  flex-shrink: 0;
 }
 .cat-tab.sec-1 .cat-dot {
   background: var(--accent);
@@ -3584,16 +3581,23 @@ a.file-info {
   background: #a96a13;
 }
 .cat-tab .cat-count {
-  font-size: 0.6875rem;
+  font-size: 0.719rem;
   font-weight: 700;
   color: var(--text-3);
+  background: #eceef1;
+  border-radius: 999px;
+  padding: 0.0625rem 0.375rem;
+  min-width: 1.125rem;
+  text-align: center;
 }
 .cat-tab.active {
-  background: var(--accent-weak);
-  color: var(--accent);
+  color: var(--text);
+  border-color: var(--text);
+  background: #fff;
 }
 .cat-tab.active .cat-count {
-  color: var(--accent);
+  background: var(--text);
+  color: #fff;
 }
 /* ===== 진행 보고 모달(작성/열람 공용) ===== */
 .pr-modal {