역할 분담 표(주체와 업무)

업무마다 누가 주관하고 누가 협조하는지 주체 3~4곳으로 나눠 표시. 대행사 열만 강조. 업무 5~7개, 주체 3~4곳. 값 바꾸는 법: 칸에 <i class="d on"></i>(주관) 또는 <i class="d"></i>(협조)를 넣고 관여 없으면 비움. 업무당 주관은 1곳(공동 제작처럼 불가피할 때만 2곳). 강조 열은 th와 td의 class="hot".

infoDiagram RACI Matrix https://infodiagram.com/diagrams/raci-matrix-project-role-chart-ppt (역할 글자를 배지로, 범례를 표 아래에). 책임 표를 두 단계 기호(주관, 협조)로 줄인 변형. 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-role"><div class="dk-card"><table>
<colgroup><col><col style="width:170px"><col style="width:170px"><col style="width:170px"><col style="width:170px"></colgroup>
<thead><tr><th>업무</th><th class="c">광고주</th><th class="c hot">대행사</th><th class="c">제작 파트너</th><th class="c">매체사</th></tr></thead>
<tbody>
<tr><td class="k">목표와 예산 확정</td><td class="c"><i class="d on"></i></td><td class="c hot"><i class="d"></i></td><td class="c"></td><td class="c"></td></tr>
<tr><td class="k">매체 운영과 입찰 조정</td><td class="c"></td><td class="c hot"><i class="d on"></i></td><td class="c"></td><td class="c"><i class="d"></i></td></tr>
<tr><td class="k">소재와 콘텐츠 제작</td><td class="c"><i class="d"></i></td><td class="c hot"><i class="d on"></i></td><td class="c"><i class="d on"></i></td><td class="c"></td></tr>
<tr><td class="k">검수와 승인</td><td class="c"><i class="d on"></i></td><td class="c hot"><i class="d"></i></td><td class="c"><i class="d"></i></td><td class="c"></td></tr>
<tr><td class="k">전환 추적 설정</td><td class="c"><i class="d"></i></td><td class="c hot"><i class="d on"></i></td><td class="c"></td><td class="c"><i class="d"></i></td></tr>
<tr><td class="k">성과 보고와 조정안</td><td class="c"><i class="d"></i></td><td class="c hot"><i class="d on"></i></td><td class="c"></td><td class="c"></td></tr>
</tbody></table></div>
<p class="lg"><span><i class="d on"></i>주관(결과 책임)</span><span><i class="d"></i>협조(자료 제공, 확인)</span><em>빈칸은 관여 없음</em></p></div>

.dk-role table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-role th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:0 14px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.dk-role td{font-size:var(--f-body);color:var(--ink2);padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-role tbody tr:last-child td{border-bottom:0}
.dk-role .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-role .c{text-align:center}
.dk-role td.k{font-weight:600;color:var(--ink)}
.dk-role .dk-card{padding:20px 24px 12px}
.dk-role th.c{font-size:var(--f-sm);color:var(--ink)}
.dk-role th.hot{color:var(--ac)}
.dk-role td.c{height:48px}
.dk-role td.hot{background:var(--acw)}
.dk-role i.d{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid var(--g3);vertical-align:middle}
.dk-role i.d.on{background:var(--g4);border-color:var(--g4)}
.dk-role td.hot i.d.on{background:var(--ac);border-color:var(--ac)}
.dk-role td.hot i.d{border-color:var(--ac)}
.dk-role .lg{display:flex;align-items:center;gap:22px;margin:14px 0 0;padding:0 24px;font-size:var(--f-cap);color:var(--mu)}
.dk-role .lg span{display:inline-flex;align-items:center;gap:8px}
.dk-role .lg i.d{width:12px;height:12px}
.dk-role .lg em{font-style:normal;margin-left:auto}