style: 상세 화면 할 일 탭/항목 UI를 작성 화면과 동일하게 통일

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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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 {