diff --git a/frontend/src/components/StatusSelect.vue b/frontend/src/components/StatusSelect.vue
new file mode 100644
index 0000000..99e7311
--- /dev/null
+++ b/frontend/src/components/StatusSelect.vue
@@ -0,0 +1,199 @@
+<script setup lang="ts">
+// 진행 상태(대기/진행 중/완료) 선택 드롭다운 — 상태색 테마. 메뉴는 body Teleport(스크롤 클리핑 방지).
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import type { ChecklistWorkStatus } from '@/mock/relay.mock'
+
+const props = defineProps<{ modelValue: ChecklistWorkStatus }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: ChecklistWorkStatus): void }>()
+
+const META: Record<ChecklistWorkStatus, { label: string; color: string; weak: string }> = {
+  todo: { label: '대기', color: '#9298a3', weak: '#eef0f2' },
+  doing: { label: '진행 중', color: '#2563eb', weak: '#e9f0fd' },
+  done: { label: '완료', color: '#1f9d57', weak: '#e7f5ed' },
+}
+const ORDER: ChecklistWorkStatus[] = ['todo', 'doing', 'done']
+const cur = computed(() => META[props.modelValue])
+
+const open = ref(false)
+const triggerRef = ref<HTMLElement | null>(null)
+const menuRef = ref<HTMLElement | null>(null)
+const menuStyle = ref<Record<string, string>>({})
+
+function positionMenu(): void {
+  const el = triggerRef.value
+  if (!el) return
+  const r = el.getBoundingClientRect()
+  menuStyle.value = {
+    top: `${r.bottom + 5}px`,
+    right: `${Math.max(0, window.innerWidth - r.right)}px`,
+  }
+}
+function toggle(): void {
+  open.value = !open.value
+  if (open.value) void nextTick(positionMenu)
+}
+function pick(v: ChecklistWorkStatus): void {
+  emit('update:modelValue', v)
+  open.value = false
+}
+function onDoc(e: MouseEvent): void {
+  if (!open.value) return
+  const t = e.target as Node
+  if (triggerRef.value?.contains(t) || menuRef.value?.contains(t)) return
+  open.value = false
+}
+function onReposition(): void {
+  if (open.value) open.value = false
+}
+onMounted(() => {
+  document.addEventListener('click', onDoc)
+  window.addEventListener('scroll', onReposition, true)
+  window.addEventListener('resize', onReposition)
+})
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onDoc)
+  window.removeEventListener('scroll', onReposition, true)
+  window.removeEventListener('resize', onReposition)
+})
+</script>
+
+<template>
+  <div class="ss">
+    <button
+      ref="triggerRef"
+      type="button"
+      class="ss-btn"
+      :class="{ open }"
+      :style="{ '--c': cur.color, '--w': cur.weak }"
+      @click="toggle"
+    >
+      <span class="ss-dot" />
+      <span class="ss-lbl">{{ cur.label }}</span>
+      <svg
+        class="ss-chev"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ><path d="m6 9 6 6 6-6" /></svg>
+    </button>
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="menuRef"
+        class="ss-menu"
+        :style="menuStyle"
+      >
+        <button
+          v-for="k in ORDER"
+          :key="k"
+          type="button"
+          class="ss-opt"
+          :class="{ on: k === modelValue }"
+          @click="pick(k)"
+        >
+          <span
+            class="ss-dot"
+            :style="{ background: META[k].color }"
+          />{{ META[k].label }}
+          <svg
+            v-if="k === modelValue"
+            class="ss-check"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ><path d="M20 6 9 17l-5-5" /></svg>
+        </button>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.ss {
+  position: relative;
+  flex-shrink: 0;
+}
+.ss-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 30px;
+  min-width: 100px;
+  padding: 0 9px 0 11px;
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  background: var(--w);
+  color: var(--c);
+  font-family: inherit;
+  font-size: 0.781rem;
+  font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.ss-btn.open {
+  border-color: var(--c);
+}
+.ss-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--c);
+  flex-shrink: 0;
+}
+.ss-btn .ss-lbl {
+  flex: 1;
+  text-align: left;
+}
+.ss-chev {
+  width: 14px;
+  height: 14px;
+}
+.ss-menu {
+  position: fixed;
+  z-index: 1000;
+  width: 9rem;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  box-shadow: 0 8px 24px rgba(20, 24, 33, 0.16);
+  padding: 5px;
+}
+.ss-opt {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  border: none;
+  background: none;
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-2);
+  padding: 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+}
+.ss-opt:hover {
+  background: #f4f5f7;
+}
+.ss-opt.on {
+  color: var(--text);
+}
+.ss-opt .ss-dot {
+  width: 9px;
+  height: 9px;
+}
+.ss-opt .ss-check {
+  margin-left: auto;
+  color: var(--text);
+  width: 15px;
+  height: 15px;
+}
+</style>
diff --git a/frontend/src/pages/relay/TaskDetailPage.vue b/frontend/src/pages/relay/TaskDetailPage.vue
index 59076c9..c46c3b5 100644
--- a/frontend/src/pages/relay/TaskDetailPage.vue
+++ b/frontend/src/pages/relay/TaskDetailPage.vue
@@ -29,7 +29,7 @@ import { useTaskStore } from '@/stores/task.store'
 import { useAuthStore } from '@/stores/auth.store'
 import { useDialog } from '@/composables/useDialog'
 import UserAvatar from '@/components/UserAvatar.vue'
-import DropdownSelect from '@/components/DropdownSelect.vue'
+import StatusSelect from '@/components/StatusSelect.vue'
 import { attachmentKindOf, fileBadge } from '@/shared/utils/format'
 
 const route = useRoute()
@@ -302,15 +302,24 @@ const isAssignee = computed(
 /* ============================================================
  * 중간 점검(체크포인트) — 작업자가 점검일 당일에 보고서로 전송, 지시자는 기록 열람
  * ============================================================ */
-const WORK_STATUS_LABEL: Record<ChecklistWorkStatus, string> = {
-  todo: '대기',
-  doing: '진행 중',
-  done: '완료',
+const WORK_STATUS_ORDER: ChecklistWorkStatus[] = ['todo', 'doing', 'done']
+// 진행 상태 표시 메타(라벨/색/약색)
+const WORK_STATUS_META: Record<
+  ChecklistWorkStatus,
+  { label: string; color: string; weak: string }
+> = {
+  todo: { label: '대기', color: '#9298a3', weak: '#eef0f2' },
+  doing: { label: '진행 중', color: '#2563eb', weak: '#e9f0fd' },
+  done: { label: '완료', color: '#1f9d57', weak: '#e7f5ed' },
 }
-const WORK_STATUS_OPTIONS: ChecklistWorkStatus[] = ['todo', 'doing', 'done']
-// 보고서 작성 모달의 진행 상태 드롭다운 옵션
-const WORK_STATUS_DD: { value: ChecklistWorkStatus; label: string }[] =
-  WORK_STATUS_OPTIONS.map((s) => ({ value: s, label: WORK_STATUS_LABEL[s] }))
+// 카테고리 색(탭/그룹 dot)
+const CAT_COLOR: Record<ChecklistCategory, string> = {
+  필수: '#2563eb',
+  관리: '#1f9d57',
+  보안: '#dc2626',
+  부가: '#b7791f',
+}
+type CatTab = ChecklistCategory | 'all'
 
 // KST(UTC+9) 기준 'yyyy-MM-dd' — '당일' 판정
 function kstDate(iso: string | Date): string {
@@ -338,19 +347,19 @@ function checkpointState(cp: TaskCheckpointView): CheckpointState {
   return 'future'
 }
 
-// --- 보고서 작성(모달, 점검일 당일·담당자만) — 카테고리 탭 방식 ---
+// --- 보고서 작성(모달, 점검일 당일·담당자만) — 전체/카테고리 탭 ---
 const reportingCpId = ref<string | null>(null)
 const reportItems = ref<
   { id: string; text: string; category: ChecklistCategory; workStatus: ChecklistWorkStatus }[]
 >([])
 const reportNote = ref('')
 const reportSubmitting = ref(false)
-const writeTab = ref<ChecklistCategory>('필수')
+const writeTab = ref<CatTab>('all')
 
 function openReportForm(cp: TaskCheckpointView) {
   if (!task.value) return
   reportingCpId.value = cp.id
-  writeTab.value = '필수'
+  writeTab.value = 'all'
   // 현재(마지막 보고) 상태로 프리필
   reportItems.value = task.value.checklist
     .filter((c) => c.id)
@@ -362,13 +371,26 @@ function openReportForm(cp: TaskCheckpointView) {
     }))
   reportNote.value = ''
 }
-// 작성 모달 탭별 항목 / 개수
-function writeItemsByCat(cat: ChecklistCategory) {
-  return reportItems.value.filter((it) => it.category === cat)
-}
+// 작성 모달 — 탭별 그룹/개수/요약
+const writeGroups = computed(() => {
+  if (writeTab.value === 'all') {
+    return CHECKLIST_CATEGORIES.map((c) => ({
+      cat: c,
+      items: reportItems.value.filter((i) => i.category === c),
+    })).filter((g) => g.items.length)
+  }
+  const c = writeTab.value
+  return [{ cat: c, items: reportItems.value.filter((i) => i.category === c) }]
+})
 function writeCatCount(cat: ChecklistCategory): number {
-  return writeItemsByCat(cat).length
+  return reportItems.value.filter((i) => i.category === cat).length
 }
+const writeSummary = computed(() =>
+  WORK_STATUS_ORDER.map((k) => ({
+    k,
+    n: reportItems.value.filter((i) => i.workStatus === k).length,
+  })),
+)
 function cancelReportForm() {
   reportingCpId.value = null
   reportItems.value = []
@@ -393,22 +415,32 @@ async function submitReport() {
   }
 }
 
-// --- 보고 기록 열람(모달) ---
+// --- 보고 기록 열람(모달) — 전체/카테고리 탭 ---
 const openedReport = ref<CheckpointReportView | null>(null)
-const reportTab = ref<ChecklistCategory>('필수')
+const viewTab = ref<CatTab>('all')
 // 보고 완료 체크포인트 클릭 → 해당 체크포인트의 최신 보고를 모달로 연다
 function openReportModal(cp: TaskCheckpointView) {
   const r = task.value?.checkpointReports.find((x) => x.checkpointId === cp.id)
   if (!r) return
   openedReport.value = r
-  reportTab.value = '필수'
+  viewTab.value = 'all'
 }
-function reportItemsByCat(cat: ChecklistCategory) {
-  return openedReport.value?.items.filter((it) => it.category === cat) ?? []
-}
-function reportCatCount(cat: ChecklistCategory): number {
-  return reportItemsByCat(cat).length
+const viewItems = computed(() => openedReport.value?.items ?? [])
+const viewGroups = computed(() => {
+  const items = viewItems.value
+  if (viewTab.value === 'all') {
+    return CHECKLIST_CATEGORIES.map((c) => ({
+      cat: c,
+      items: items.filter((i) => i.category === c),
+    })).filter((g) => g.items.length)
+  }
+  const c = viewTab.value
+  return [{ cat: c, items: items.filter((i) => i.category === c) }]
+})
+function viewCatCount(cat: ChecklistCategory): number {
+  return viewItems.value.filter((i) => i.category === cat).length
 }
+const reporterInitial = computed(() => openedReport.value?.reporterName?.[0] ?? '?')
 // 담당자 액션 카드 테마(시안): changes→빨강 / review→앰버 / done→초록 / 그 외→accent
 const assigneeCardClass = computed(() => {
   switch (task.value?.status) {
@@ -1537,7 +1569,7 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
       </div>
     </Teleport>
 
-    <!-- 중간 점검 보고 열람 모달 -->
+    <!-- 받은 진행 보고 (지시자/담당자 열람) -->
     <Teleport to="body">
       <div
         class="modal-backdrop"
@@ -1546,22 +1578,34 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
       >
         <div
           v-if="openedReport"
-          class="cp-modal"
+          class="pr-modal"
           role="dialog"
           aria-modal="true"
-          aria-label="중간 점검 보고"
+          aria-label="진행 상태 보고"
         >
-          <div class="cp-modal-head">
-            <div>
-              <div class="cp-modal-title">
-                중간 점검 보고
-              </div>
-              <div class="cp-modal-sub">
-                {{ openedReport.reporterName }} · 점검일 {{ openedReport.dateLabel }} · {{ openedReport.timeLabel }}
-              </div>
+          <div class="pr-rh">
+            <span class="pr-tag">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ><path d="M22 12h-6l-2 3h-4l-2-3H2" /><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" /></svg>
+              진행 보고 도착
+            </span>
+            <h2 class="pr-title">
+              진행 상태 보고
+            </h2>
+            <div class="pr-by">
+              <span class="pr-av">{{ reporterInitial }}</span>
+              <span><b>{{ openedReport.reporterName }}</b>님이 {{ viewItems.length }}개 항목을 보고했습니다</span>
+              <span class="pr-sep">·</span>
+              <span class="pr-when">점검일 {{ openedReport.dateLabel }} · {{ openedReport.timeLabel }}</span>
             </div>
             <button
-              class="rv-x"
+              class="pr-x"
               type="button"
               aria-label="닫기"
               @click="openedReport = null"
@@ -1570,63 +1614,112 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
-                stroke-width="2"
+                stroke-width="2.2"
                 stroke-linecap="round"
-                stroke-linejoin="round"
               ><path d="M18 6 6 18M6 6l12 12" /></svg>
             </button>
           </div>
+
           <div
-            v-if="openedReport.note"
-            class="cp-modal-note"
-          >
-            {{ openedReport.note }}
-          </div>
-          <!-- 카테고리 탭 -->
-          <div
-            class="cat-tabs"
+            class="pr-tabs"
             role="tablist"
           >
             <button
-              v-for="tab in CHECKLIST_CATEGORIES"
-              :key="tab"
               type="button"
-              class="cat-tab"
-              :class="[categoryClass(tab), { active: reportTab === tab }]"
-              role="tab"
-              :aria-selected="reportTab === tab"
-              @click="reportTab = tab"
+              class="pr-tab"
+              :class="{ on: viewTab === 'all' }"
+              @click="viewTab = 'all'"
             >
-              <span class="cat-dot" />
-              {{ tab }}
-              <span class="cat-count">{{ reportCatCount(tab) }}</span>
+              전체<span class="pr-tct">{{ viewItems.length }}</span>
             </button>
-          </div>
-          <!-- 항목 목록 -->
-          <div class="cp-modal-items">
-            <div
-              v-for="(it, i) in reportItemsByCat(reportTab)"
-              :key="i"
-              class="cp-modal-item"
+            <button
+              v-for="c in CHECKLIST_CATEGORIES"
+              :key="c"
+              type="button"
+              class="pr-tab"
+              :class="{ on: viewTab === c }"
+              @click="viewTab = c"
             >
               <span
-                class="ws-badge"
-                :class="it.workStatus"
-              >{{ WORK_STATUS_LABEL[it.workStatus] }}</span>
-              <span class="cp-mi-text">{{ it.text }}</span>
-            </div>
-            <div
-              v-if="reportItemsByCat(reportTab).length === 0"
-              class="cp-modal-empty"
+                class="pr-tdot"
+                :style="{ background: CAT_COLOR[c] }"
+              />{{ c }}<span class="pr-tct">{{ viewCatCount(c) }}</span>
+            </button>
+          </div>
+
+          <div class="pr-body">
+            <template
+              v-for="g in viewGroups"
+              :key="g.cat"
             >
-              '{{ reportTab }}' 항목이 없습니다.
+              <div
+                v-if="viewTab === 'all'"
+                class="pr-ghead"
+              >
+                <span
+                  class="pr-gdot"
+                  :style="{ background: CAT_COLOR[g.cat] }"
+                />{{ g.cat }}<span class="pr-gct">· {{ g.items.length }}</span>
+              </div>
+              <div
+                v-for="(it, i) in g.items"
+                :key="g.cat + '-' + i"
+                class="pr-titem"
+                :class="{ done: it.workStatus === 'done' }"
+              >
+                <span class="pr-tn">{{ it.text }}</span>
+                <span
+                  class="pr-badge"
+                  :style="{ background: WORK_STATUS_META[it.workStatus].weak, color: WORK_STATUS_META[it.workStatus].color }"
+                >
+                  <span
+                    class="pr-bdot"
+                    :style="{ background: WORK_STATUS_META[it.workStatus].color }"
+                  />{{ WORK_STATUS_META[it.workStatus].label }}
+                </span>
+              </div>
+            </template>
+            <div
+              v-if="viewItems.length === 0"
+              class="pr-empty"
+            >
+              보고된 항목이 없습니다.
             </div>
           </div>
+
+          <div
+            v-if="openedReport.note"
+            class="pr-memo"
+          >
+            <div class="pr-memo-h">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ><path d="M8 21h8M12 17v4M3 5h18v12H3z" /></svg>
+              보고자 메모
+            </div>
+            <p>{{ openedReport.note }}</p>
+          </div>
+
+          <div class="pr-foot">
+            <div class="pr-sp" />
+            <button
+              class="btn primary"
+              type="button"
+              @click="openedReport = null"
+            >
+              닫기
+            </button>
+          </div>
         </div>
       </div>
     </Teleport>
 
-    <!-- 중간 점검 보고서 작성 모달 -->
+    <!-- 진행 상태 보고서 (작업자 작성) -->
     <Teleport to="body">
       <div
         class="modal-backdrop"
@@ -1635,22 +1728,20 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
       >
         <div
           v-if="reportingCpId"
-          class="cp-modal"
+          class="pr-modal"
           role="dialog"
           aria-modal="true"
           aria-label="진행 상태 보고서"
         >
-          <div class="cp-modal-head">
-            <div>
-              <div class="cp-modal-title">
-                진행 상태 보고서
-              </div>
-              <div class="cp-modal-sub">
-                각 할 일의 현재 상태를 선택해 지시자에게 보고합니다.
-              </div>
-            </div>
+          <div class="pr-rh">
+            <h2 class="pr-title">
+              진행 상태 보고서
+            </h2>
+            <p class="pr-sub">
+              각 할 일의 현재 상태를 선택해 지시자에게 보고합니다.
+            </p>
             <button
-              class="rv-x"
+              class="pr-x"
               type="button"
               aria-label="닫기"
               @click="cancelReportForm"
@@ -1659,80 +1750,111 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
-                stroke-width="2"
+                stroke-width="2.2"
                 stroke-linecap="round"
-                stroke-linejoin="round"
               ><path d="M18 6 6 18M6 6l12 12" /></svg>
             </button>
           </div>
-          <!-- 카테고리 탭 -->
+
           <div
-            class="cat-tabs"
+            class="pr-tabs"
             role="tablist"
           >
             <button
-              v-for="tab in CHECKLIST_CATEGORIES"
-              :key="tab"
               type="button"
-              class="cat-tab"
-              :class="[categoryClass(tab), { active: writeTab === tab }]"
-              role="tab"
-              :aria-selected="writeTab === tab"
-              @click="writeTab = tab"
+              class="pr-tab"
+              :class="{ on: writeTab === 'all' }"
+              @click="writeTab = 'all'"
             >
-              <span class="cat-dot" />
-              {{ tab }}
-              <span class="cat-count">{{ writeCatCount(tab) }}</span>
+              전체<span class="pr-tct">{{ reportItems.length }}</span>
+            </button>
+            <button
+              v-for="c in CHECKLIST_CATEGORIES"
+              :key="c"
+              type="button"
+              class="pr-tab"
+              :class="{ on: writeTab === c }"
+              @click="writeTab = c"
+            >
+              <span
+                class="pr-tdot"
+                :style="{ background: CAT_COLOR[c] }"
+              />{{ c }}<span class="pr-tct">{{ writeCatCount(c) }}</span>
             </button>
           </div>
-          <!-- 활성 탭 항목 + 상태 선택 -->
-          <div class="cp-modal-items">
-            <div
-              v-for="it in writeItemsByCat(writeTab)"
-              :key="it.id"
-              class="cp-write-item"
+
+          <div class="pr-body">
+            <template
+              v-for="g in writeGroups"
+              :key="g.cat"
             >
-              <DropdownSelect
-                v-model="it.workStatus"
-                :options="WORK_STATUS_DD"
-                align="left"
-                aria-label="진행 상태"
-                class="cp-write-dd"
-              />
-              <span class="cp-write-text">{{ it.text }}</span>
-            </div>
+              <div
+                v-if="writeTab === 'all'"
+                class="pr-ghead"
+              >
+                <span
+                  class="pr-gdot"
+                  :style="{ background: CAT_COLOR[g.cat] }"
+                />{{ g.cat }}<span class="pr-gct">· {{ g.items.length }}</span>
+              </div>
+              <div
+                v-for="it in g.items"
+                :key="it.id"
+                class="pr-task"
+                :class="{ done: it.workStatus === 'done' }"
+              >
+                <span class="pr-tn">{{ it.text }}</span>
+                <StatusSelect v-model="it.workStatus" />
+              </div>
+            </template>
             <div
-              v-if="writeItemsByCat(writeTab).length === 0"
-              class="cp-modal-empty"
+              v-if="reportItems.length === 0"
+              class="pr-empty"
             >
-              '{{ writeTab }}' 항목이 없습니다.
+              보고할 할 일이 없습니다. 메모만 전송됩니다.
             </div>
           </div>
-          <!-- 메모 + 전송 -->
-          <div class="cp-write-foot">
+
+          <div class="pr-memo-edit">
+            <label class="pr-ml">보고 메모 <span class="pr-opt">(선택)</span></label>
             <textarea
               v-model="reportNote"
-              class="cp-note-input"
-              rows="2"
-              placeholder="보고 메모(선택)"
+              placeholder="지시자에게 전달할 메모를 남겨보세요 (예: 결제 연동은 외부 API 승인 대기 중)"
             />
-            <div class="cp-write-actions">
-              <button
-                class="btn"
-                type="button"
-                @click="cancelReportForm"
+          </div>
+
+          <div class="pr-foot">
+            <div class="pr-sum">
+              <template
+                v-for="(s, i) in writeSummary"
+                :key="s.k"
               >
-                취소
-              </button>
-              <button
-                class="btn primary"
-                type="button"
-                :disabled="reportSubmitting"
-                @click="submitReport"
-              >
-                {{ reportSubmitting ? '보내는 중…' : '지시자에게 보내기' }}
-              </button>
+                <span
+                  v-if="i > 0"
+                  class="pr-sgap"
+                >·</span>
+                <span><span
+                  class="pr-sd"
+                  :style="{ background: WORK_STATUS_META[s.k].color }"
+                />{{ WORK_STATUS_META[s.k].label }} {{ s.n }}</span>
+              </template>
             </div>
+            <div class="pr-sp" />
+            <button
+              class="btn"
+              type="button"
+              @click="cancelReportForm"
+            >
+              취소
+            </button>
+            <button
+              class="btn primary"
+              type="button"
+              :disabled="reportSubmitting"
+              @click="submitReport"
+            >
+              {{ reportSubmitting ? '보내는 중…' : '지시자에게 보내기' }}
+            </button>
           </div>
         </div>
       </div>
@@ -3311,68 +3433,6 @@ a.file-info {
   white-space: pre-wrap;
 }
 
-/* ===== 중간 점검: 항목 진행상태 컨트롤 ===== */
-.ws-seg {
-  margin-left: auto;
-  display: inline-flex;
-  gap: 0.125rem;
-  background: #eceef1;
-  border-radius: var(--radius-sm);
-  padding: 0.125rem;
-  flex-shrink: 0;
-}
-.ws-btn {
-  border: none;
-  background: transparent;
-  font-family: inherit;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: var(--text-3);
-  padding: 0.1875rem 0.4375rem;
-  border-radius: 4px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-.ws-btn:hover:not(:disabled) {
-  color: var(--text);
-}
-.ws-btn:disabled {
-  cursor: default;
-}
-.ws-btn.active {
-  background: #fff;
-  box-shadow: var(--shadow-sm);
-}
-.ws-btn.active.doing {
-  color: var(--blue);
-}
-.ws-btn.active.done {
-  color: #1b7a3d;
-}
-.ws-btn.active.todo {
-  color: var(--text);
-}
-.ws-badge {
-  margin-left: auto;
-  flex-shrink: 0;
-  font-size: 0.6875rem;
-  font-weight: 700;
-  padding: 0.0625rem 0.4375rem;
-  border-radius: 20px;
-}
-.ws-badge.doing {
-  color: var(--blue);
-  background: var(--blue-weak, #e8effd);
-}
-.ws-badge.done {
-  color: #1b7a3d;
-  background: var(--green-weak);
-}
-.ws-badge.todo {
-  color: var(--text-3);
-  background: #eceef1;
-}
-
 /* ===== 중간 점검: 점검일/보고 카드 ===== */
 .cp-d-list {
   list-style: none;
@@ -3438,107 +3498,7 @@ a.file-info {
 .cp-report-btn:hover {
   background: var(--accent-hover);
 }
-/* 보고서 작성 폼 */
-/* 보고서 작성 모달 — 진행 상태 드롭다운(앞) + 항목 내용 */
-.cp-write-item {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  padding-bottom: 0.625rem;
-  border-bottom: 1px solid var(--border);
-}
-.cp-write-item:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-.cp-write-text {
-  font-size: 0.8125rem;
-  color: var(--text);
-  min-width: 0;
-}
-/* 진행 상태 드롭다운 — 콤팩트 고정폭(내용 앞쪽) */
-.cp-write-dd {
-  flex-shrink: 0;
-}
-.cp-write-dd :deep(.dd-trigger) {
-  height: 1.875rem;
-  min-width: 5.5rem;
-  padding: 0 0.5rem;
-  font-size: 0.75rem;
-}
-/* 라벨을 늘려 chevron 을 오른쪽 끝으로(min-width 로 생긴 여백이 화살표 뒤에 남지 않도록) */
-.cp-write-dd :deep(.dd-label) {
-  flex: 1;
-}
-.cp-write-foot {
-  border-top: 1px solid var(--border);
-  padding: 0.875rem 1.25rem 1rem;
-}
-.cp-write-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-}
-/* 공용 .btn 사용 — 비활성만 보강 */
-.cp-write-actions .btn:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-.cp-note-input {
-  width: 100%;
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius);
-  padding: 0.4375rem 0.5625rem;
-  font-family: inherit;
-  font-size: 0.781rem;
-  color: var(--text);
-  resize: vertical;
-  margin-bottom: 0.625rem;
-}
-.cp-note-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-weak);
-}
-/* 보고 열람 모달 */
-.cp-modal {
-  width: min(34rem, calc(100vw - 2rem));
-  max-height: calc(100vh - 3rem);
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-  border-radius: 0.875rem;
-  box-shadow: 0 1.5rem 4.375rem rgba(20, 24, 33, 0.3);
-  overflow: hidden;
-}
-.cp-modal-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 1.125rem 1.25rem 0.875rem;
-  border-bottom: 1px solid var(--border);
-}
-.cp-modal-title {
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--text);
-}
-.cp-modal-sub {
-  margin-top: 0.25rem;
-  font-size: 0.781rem;
-  color: var(--text-3);
-}
-.cp-modal-note {
-  font-size: 0.8125rem;
-  color: var(--text-2);
-  line-height: 1.6;
-  white-space: pre-wrap;
-  padding: 0.75rem 1.25rem;
-  background: rgba(20, 24, 33, 0.03);
-  border-bottom: 1px solid var(--border);
-}
-/* 카테고리 탭 */
+/* 체크리스트 카드 카테고리 탭 */
 .cat-tabs {
   display: flex;
   gap: 0.25rem;
@@ -3599,35 +3559,322 @@ a.file-info {
 .cat-tab.active .cat-count {
   color: var(--accent);
 }
-/* 모달 항목 목록 */
-.cp-modal-items {
-  flex: 1;
-  min-height: 14rem;
-  padding: 1rem 1.25rem;
-  overflow-y: auto;
+/* ===== 진행 보고 모달(작성/열람 공용) ===== */
+.pr-modal {
+  width: min(35rem, calc(100vw - 2rem));
+  max-height: calc(100vh - 3rem);
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  background: #fff;
+  border-radius: 1rem;
+  box-shadow: 0 1.5rem 4.375rem rgba(20, 24, 33, 0.34);
+  overflow: hidden;
 }
-.cp-modal-item {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-}
-.cp-modal-item .ws-badge {
-  margin-left: 0;
+/* 헤더 */
+.pr-rh {
+  position: relative;
   flex-shrink: 0;
+  padding: 1.375rem 1.5rem 1.25rem;
 }
-.cp-mi-text {
-  font-size: 0.8125rem;
-  color: var(--text);
+.pr-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.719rem;
+  font-weight: 700;
+  color: var(--accent);
+  background: var(--accent-weak);
+  border-radius: 20px;
+  padding: 0.25rem 0.6875rem;
+  margin-bottom: 0.75rem;
 }
-.cp-modal-empty {
-  /* 빈 상태 — 항목 영역 안에서 상하/좌우 중앙 배치 */
-  margin: auto;
+.pr-tag svg {
+  width: 0.8125rem;
+  height: 0.8125rem;
+}
+.pr-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  letter-spacing: -0.0125rem;
+}
+.pr-sub {
   font-size: 0.8125rem;
   color: var(--text-3);
+  margin-top: 0.3125rem;
+}
+.pr-by {
+  display: flex;
+  align-items: center;
+  gap: 0.5625rem;
+  margin-top: 0.6875rem;
+  font-size: 0.8125rem;
+  color: var(--text-2);
+  flex-wrap: wrap;
+}
+.pr-by .pr-av {
+  width: 1.625rem;
+  height: 1.625rem;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 0.719rem;
+  font-weight: 700;
+  color: #fff;
+  background: var(--accent);
+  flex-shrink: 0;
+}
+.pr-by b {
+  font-weight: 700;
+  color: var(--text);
+}
+.pr-by .pr-sep {
+  color: var(--text-3);
+}
+.pr-by .pr-when {
+  color: var(--text-3);
+}
+.pr-x {
+  position: absolute;
+  top: 1.125rem;
+  right: 1.125rem;
+  width: 1.875rem;
+  height: 1.875rem;
+  border: none;
+  background: transparent;
+  color: var(--text-3);
+  border-radius: 7px;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+}
+.pr-x:hover {
+  background: #f1f2f4;
+  color: var(--text);
+}
+.pr-x svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+/* 카테고리 탭 */
+.pr-tabs {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.25rem 1.5rem 1rem;
+  flex-shrink: 0;
+  overflow-x: auto;
+}
+.pr-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4375rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-2);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.pr-tab:hover {
+  background: #f3f4f6;
+}
+.pr-tab .pr-tdot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.pr-tab .pr-tct {
+  font-size: 0.719rem;
+  font-weight: 700;
+  color: var(--text-3);
+  min-width: 0.875rem;
   text-align: center;
 }
+.pr-tab.on {
+  background: #fff;
+  border-color: var(--border-strong);
+  color: var(--text);
+  box-shadow: 0 1px 2px rgba(20, 24, 33, 0.06);
+}
+.pr-tab.on .pr-tct {
+  color: var(--text-2);
+}
+/* 본문 */
+.pr-body {
+  flex: 1;
+  min-height: 9rem;
+  overflow-y: auto;
+  padding: 0 1.5rem;
+  border-top: 1px solid var(--border);
+}
+.pr-ghead {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 0.125rem 0.4375rem;
+  font-size: 0.719rem;
+  font-weight: 700;
+  color: var(--text-3);
+}
+.pr-ghead .pr-gdot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+}
+.pr-ghead .pr-gct {
+  color: var(--text-3);
+  font-weight: 600;
+}
+.pr-task,
+.pr-titem {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  padding: 0.75rem 0.125rem;
+}
+.pr-task + .pr-task,
+.pr-titem + .pr-titem {
+  border-top: 1px solid var(--border);
+}
+.pr-tn {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text);
+  word-break: keep-all;
+}
+.pr-task.done .pr-tn,
+.pr-titem.done .pr-tn {
+  color: var(--text-3);
+}
+/* 읽기 전용 상태 배지(열람) */
+.pr-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 1.625rem;
+  padding: 0 0.6875rem;
+  border-radius: 7px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.pr-badge .pr-bdot {
+  width: 0.4375rem;
+  height: 0.4375rem;
+  border-radius: 50%;
+}
+.pr-empty {
+  padding: 2.5rem 1.25rem;
+  text-align: center;
+  color: var(--text-3);
+  font-size: 0.8125rem;
+}
+/* 보고자 메모(열람) */
+.pr-memo {
+  flex-shrink: 0;
+  margin: 0.375rem 1.5rem 0;
+  padding: 0.875rem 1rem;
+  background: #f7f8fa;
+  border: 1px solid var(--border);
+  border-radius: 11px;
+}
+.pr-memo-h {
+  display: flex;
+  align-items: center;
+  gap: 0.4375rem;
+  font-size: 0.719rem;
+  font-weight: 700;
+  color: var(--text-3);
+  margin-bottom: 0.4375rem;
+}
+.pr-memo-h svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.pr-memo p {
+  font-size: 0.8125rem;
+  color: var(--text-2);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: keep-all;
+}
+/* 메모 입력(작성) */
+.pr-memo-edit {
+  flex-shrink: 0;
+  padding: 1rem 1.5rem 0.25rem;
+}
+.pr-memo-edit .pr-ml {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-2);
+  margin-bottom: 0.4375rem;
+}
+.pr-memo-edit .pr-opt {
+  color: var(--text-3);
+  font-weight: 500;
+}
+.pr-memo-edit textarea {
+  width: 100%;
+  min-height: 4rem;
+  max-height: 8.75rem;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--border-strong);
+  border-radius: 9px;
+  font-family: inherit;
+  font-size: 0.844rem;
+  color: var(--text);
+  line-height: 1.55;
+  resize: vertical;
+  background: #fff;
+}
+.pr-memo-edit textarea::placeholder {
+  color: var(--text-3);
+}
+.pr-memo-edit textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-weak);
+}
+/* 푸터 */
+.pr-foot {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1.5rem;
+  border-top: 1px solid var(--border);
+}
+.pr-foot .pr-sp {
+  flex: 1;
+}
+.pr-sum {
+  font-size: 0.781rem;
+  font-weight: 600;
+  color: var(--text-3);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.pr-sum .pr-sd {
+  width: 0.4375rem;
+  height: 0.4375rem;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 0.25rem;
+  vertical-align: middle;
+}
+.pr-sum .pr-sgap {
+  color: var(--border-strong);
+}
 </style>