체크 매트릭스(항목과 대상)

점검 항목이 채널·지면마다 있는지 없는지 한눈에 보는 표. 가장 비어 있는 행 하나 강조, 오른쪽 끝에 보유 수. 항목 5~7개, 대상 4~6개. 값 바꾸는 법: 칸에 <i class="d on"></i>(있음) 또는 <i class="d"></i>(없음). 오른쪽 보유 수는 직접 세어 입력. 가장 비어 있는 행 하나에 tr class="hot".

감사·진단 보고서의 항목 대 대상 격자표(coverage matrix). PresentationGO 비교표 템플릿 https://www.presentationgo.com/?p=1988 (열 머리를 크게, 행은 기능 단위). 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-mx"><div class="dk-card"><table>
<colgroup><col><col style="width:132px"><col style="width:132px"><col style="width:132px"><col style="width:132px"><col style="width:132px"><col style="width:110px"></colgroup>
<thead><tr><th>점검 항목</th><th class="c">자사몰</th><th class="c">오픈마켓</th><th class="c">블로그</th><th class="c">인스타그램</th><th class="c">유튜브</th><th class="n">보유</th></tr></thead>
<tbody>
<tr><td class="k">브랜드 소개 문구 통일</td><td class="c"><i class="d on"></i></td><td class="c"><i class="d on"></i></td><td class="c"><i class="d on"></i></td><td class="c"><i class="d on"></i></td><td class="c"><i class="d"></i></td><td class="n s">4<small>/5</small></td></tr>
<tr><td class="k">대표 상품 상세 설명</td><td class="c"><i class="d on"></i></td><td class="c"><i class="d on"></i></td><td class="c"><i class="d on"></i></td><td class="c"><i class="d"></i></td><td class="c"><i class="d"></i></td><td class="n s">3<small>/5</small></td></tr>
<tr><td class="k">구매 후기 노출</td><td class="c"><i class="d on"></i></td><td class="c"><i class="d on"></i></td><td class="c"><i class="d"></i></td><td class="c"><i class="d"></i></td><td class="c"><i class="d"></i></td><td class="n s">2<small>/5</small></td></tr>
<tr class="hot"><td class="k">자주 묻는 질문</td><td class="c"><i class="d on"></i></td><td class="c"><i class="d"></i></td><td class="c"><i class="d"></i></td><td class="c"><i class="d"></i></td><td class="c"><i class="d"></i></td><td class="n s">1<small>/5</small></td></tr>
<tr><td class="k">상담 연결 경로</td><td class="c"><i class="d on"></i></td><td class="c"><i class="d on"></i></td><td class="c"><i class="d"></i></td><td class="c"><i class="d on"></i></td><td class="c"><i class="d"></i></td><td class="n s">3<small>/5</small></td></tr>
<tr><td class="k">최근 30일 내 갱신</td><td class="c"><i class="d"></i></td><td class="c"><i class="d on"></i></td><td class="c"><i class="d on"></i></td><td class="c"><i class="d on"></i></td><td class="c"><i class="d"></i></td><td class="n s">3<small>/5</small></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-mx table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-mx 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-mx td{font-size:var(--f-body);color:var(--ink2);padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-mx tbody tr:last-child td{border-bottom:0}
.dk-mx .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-mx .c{text-align:center}
.dk-mx td.k{font-weight:600;color:var(--ink)}
.dk-mx .dk-card{padding:20px 24px 12px}
.dk-mx th.c{font-size:var(--f-sm);color:var(--ink)}
.dk-mx i.d{display:inline-block;width:14px;height:14px;border-radius:4px;border:1.5px solid var(--line2);vertical-align:middle}
.dk-mx i.d.on{background:var(--g4);border-color:var(--g4)}
.dk-mx td.s{font-size:var(--f-md);font-weight:700;color:var(--ink)}
.dk-mx td.s small{font-size:var(--f-cap);font-weight:500;color:var(--mu)}
.dk-mx tr.hot td{background:var(--acw)}
.dk-mx tr.hot td.k,.dk-mx tr.hot td.s{color:var(--ac)}
.dk-mx tr.hot i.d.on{background:var(--ac);border-color:var(--ac)}
.dk-mx tr.hot i.d{border-color:var(--acm)}
.dk-mx .lg{display:flex;align-items:center;gap:22px;margin:14px 0 0;padding:0 24px;font-size:var(--f-cap);color:var(--mu)}
.dk-mx .lg span{display:inline-flex;align-items:center;gap:8px}
.dk-mx .lg i.d{width:12px;height:12px}
.dk-mx .lg em{font-style:normal;margin-left:auto}