feat: 보고 완료 배지 옆 보고서 아이콘으로 모달 열기

보고 완료 상태에서 배지 클릭으로만 열리던 것을 명확히 — 배지 오른쪽에 보고서 아이콘 버튼 추가, 아이콘 클릭 시 보고 모달 오픈(열람 권한자만). 배지는 상태 표시 전용으로 변경.

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

frontend/src/pages/relay/TaskDetailPage.vue

@@ -1254,15 +1254,26 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
                   >
                     보고서 작성
                   </button>
-                  <button
-                    v-else-if="checkpointState(cp) === 'reported' && canViewReports"
-                    class="cp-state reported clickable"
-                    type="button"
-                    title="보고 내용 보기"
-                    @click="openReportModal(cp)"
-                  >
-                    보고 완료
-                  </button>
+                  <template v-else-if="checkpointState(cp) === 'reported'">
+                    <span class="cp-state reported">보고 완료</span>
+                    <button
+                      v-if="canViewReports"
+                      class="cp-report-view"
+                      type="button"
+                      title="보고서 보기"
+                      aria-label="보고서 보기"
+                      @click="openReportModal(cp)"
+                    >
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      ><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /><path d="M9 13h6M9 17h6M9 9h1" /></svg>
+                    </button>
+                  </template>
                   <span
                     v-else
                     class="cp-state"
@@ -3487,11 +3498,26 @@ a.file-info {
   color: var(--red);
   background: var(--red-weak);
 }
-.cp-state.clickable {
+/* 보고서 보기 아이콘(보고 완료 배지 오른쪽) */
+.cp-report-view {
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  display: grid;
+  place-items: center;
+  border: none;
+  background: transparent;
+  color: var(--text-3);
+  border-radius: var(--radius-sm);
   cursor: pointer;
 }
-.cp-state.reported.clickable:hover {
-  background: #cfe9d8;
+.cp-report-view:hover {
+  background: var(--accent-weak);
+  color: var(--accent);
+}
+.cp-report-view svg {
+  width: 1rem;
+  height: 1rem;
 }
 .cp-report-btn {
   margin-left: auto;