묶음 머리 표 9~10행

D-표-묶음머리표(6~8행)의 긴 판. 역할·영역으로 묶인 9~10행 × 4열 표를 글자 크기 16px 그대로 행 높이만 줄여 한 장에 담음. 묶음 3~6개, 전체 행 9~10개, 칸 문구는 한 줄(약 20자). 매체별 역할과 지표, 과업 범위 전체 목록에 사용. 값 바꾸는 법: 묶음 이름은 td.g 에 적고 그 묶음의 행 수를 rowspan 으로 지정(1행 묶음은 rowspan 생략). 묶음의 마지막 행 tr 에 class="ge"(진한 경계선). 10행까지 그대로 들어감(행 높이 약 38px). 11행 이상은 표를 둘로 나눠 D-표-좌우2표 사용.

표 선 처리(세로선 없이 옅은 가로선, 머리줄 아래 선만 진하게, 왼쪽 정렬)는 Deckary "PowerPoint Table Design" 와 Stephen Few "Show Me the Numbers" 8장 표 설계 원칙 참고. 코드와 구성은 직접 제작. 묶음 경계만 진한 선으로 긋는 방식은 컨설팅 보고서의 과업 범위표 참고.

<div class="dk dk-grp10"><div class="dk-card"><table>
<colgroup><col style="width:170px"><col style="width:290px"><col><col style="width:290px"></colgroup>
<thead><tr><th>역할</th><th>매체</th><th>주요 지면</th><th>목표 지표</th></tr></thead>
<tbody>
<tr><td class="g" rowspan="2">수요 획득</td><td class="k">네이버 검색광고</td><td>파워링크, 쇼핑검색</td><td class="v">전환수, 상담 신청 비중</td></tr>
<tr class="ge"><td class="k">구글 검색광고</td><td>구글 검색</td><td class="v">전환수, 전환율</td></tr>
<tr class="ge"><td class="g">브랜드 진입</td><td class="k">네이버 브랜드검색</td><td>브랜드 검색 결과 상단</td><td class="v">클릭률, 유입 점유</td></tr>
<tr><td class="g" rowspan="2">수요 창출</td><td class="k">디맨드젠</td><td>유튜브, 디스커버, Gmail</td><td class="v">방문 품질, 재방문</td></tr>
<tr class="ge"><td class="k">메타</td><td>페이스북, 인스타그램</td><td class="v">도달, 신규 방문</td></tr>
<tr class="ge"><td class="g">통합 최적화</td><td class="k">PMax</td><td>구글 전체 지면</td><td class="v">전환당 비용 추이</td></tr>
<tr><td class="g" rowspan="2">재접촉</td><td class="k">네이버 성과형 디스플레이</td><td>네이버·제휴 디스플레이</td><td class="v">재방문, 전환 재개</td></tr>
<tr class="ge"><td class="k">메타 리타깃</td><td>피드, 스토리</td><td class="v">재방문, 전환</td></tr>
<tr><td class="g">유지·연결</td><td class="k">카카오</td><td>비즈보드, 디스플레이, 채널</td><td class="v">채널 유입, 재구매</td></tr>
</tbody></table></div></div>

.dk-grp10 table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-grp10 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-grp10 td{font-size:var(--f-body);color:var(--ink2);padding:8px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-grp10 tbody tr:last-child td{border-bottom:0}
.dk-grp10 td.k{font-weight:700;color:var(--ink)}
.dk-grp10 td.v{font-weight:500;color:var(--ink)}
.dk-grp10 td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-grp10 tr.hot td{background:var(--acw)}
.dk-grp10 tr.hot td.k{color:var(--ac)}
.dk-grp10 .dk-card{padding:20px 24px 12px}
.dk-grp10 .dk-card{padding:16px 24px 6px}
.dk-grp10 th{padding-bottom:8px}
.dk-grp10 td{line-height:1.3}
.dk-grp10 td.g{font-size:var(--f-body);font-weight:700;color:var(--ink);vertical-align:top;border-bottom:1px solid var(--line2);border-right:1px solid var(--line)}
.dk-grp10 tr.ge td{border-bottom:1px solid var(--line2)}
.dk-grp10 td.k{font-weight:600}
.dk-grp10 tbody tr:last-child td{border-bottom:0}