소형 표 4열 3행

단계·축·형식 3가지를 열 3개(대상, 역할, 방향 등)로 풀어 쓰는 표. 행 3개 고정, 열 4개(행 제목 + 내용 3열). 칸 문구 2줄(약 40자)까지. 강조 행 1개. 값 바꾸는 법: 머리줄 4칸과 행 3개의 문구만 교체. 번호(01~03)가 필요 없으면 span.num 삭제. 첫 열 150px, 둘째 열 200px 는 colgroup 에서 조정. 강조 행 하나에 class="hot".

표 선 처리(세로선 없이 옅은 가로선, 머리줄 아래 선만 진하게, 왼쪽 정렬)는 Deckary "PowerPoint Table Design" 와 Stephen Few "Show Me the Numbers" 8장 표 설계 원칙 참고. 코드와 구성은 직접 제작.

<div class="dk dk-s43"><div class="dk-card"><table>
<colgroup><col style="width:150px"><col style="width:200px"><col><col></colgroup>
<thead><tr><th>단계</th><th>지면</th><th>역할</th><th>소재 방향</th></tr></thead>
<tbody>
<tr><td class="k"><span class="num">01</span>발견</td><td class="v">스마트채널</td><td>앱·메인 최상단 고정 배너. 아직 검색하지 않는 잠재 고객에게 선노출</td><td>누끼 이미지 + 2줄 카피 + 랜딩 화살표. 텍스트 가독성 우선</td></tr>
<tr><td class="k"><span class="num">02</span>각인</td><td class="v">피드·콘텐츠 지면</td><td>뉴스·블로그·카페 소비 흐름에 자연 삽입</td><td>화보형·사용 장면형, 혜택 문구형 이원화</td></tr>
<tr class="hot"><td class="k"><span class="num">03</span>이탈 회수</td><td class="v">리타깃</td><td>검색·쇼핑 방문 후 이탈자 재접촉</td><td>본 상품, 혜택 중심</td></tr>
</tbody></table></div></div>

.dk-s43 table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-s43 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-s43 td{font-size:var(--f-body);color:var(--ink2);padding:24px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-s43 tbody tr:last-child td{border-bottom:0}
.dk-s43 td.k{font-weight:700;color:var(--ink)}
.dk-s43 td.v{font-weight:500;color:var(--ink)}
.dk-s43 td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-s43 tr.hot td{background:var(--acw)}
.dk-s43 tr.hot td.k{color:var(--ac)}
.dk-s43 .dk-card{padding:20px 24px 12px}
.dk-s43 td.k{font-size:var(--f-lg);vertical-align:top}
.dk-s43 td{vertical-align:top}
.dk-s43 td.k .num{display:block;font-size:var(--f-cap);font-weight:600;color:var(--mu);margin-bottom:2px}
.dk-s43 tr.hot td.k .num{color:var(--ac)}