현재와 목표 대조표

지표별 현재 값과 목표 값을 나란히 놓고 변화 폭과 수단을 붙임. 목표 열만 강조. 지표 4~5개. 값 바꾸는 법: 행 단위로 지표·단위·현재·목표·변화·수단 교체. 변화 칸은 비율(%) 또는 %p·개수로 직접 계산해 입력. 목표 열 강조는 class="hot" 고정.

IR 자료의 실적과 가이던스 대조표(현재, 목표, 증감 3열). Maersk Design System Table https://designsystem.maersk.com/components/table/ (숫자 열 오른쪽 정렬, 행 높이 단계). 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-asis"><div class="dk-card"><table>
<colgroup><col style="width:230px"><col style="width:150px"><col style="width:150px"><col style="width:130px"><col></colgroup>
<thead><tr><th>지표</th><th class="n">현재</th><th class="n hot">12주 뒤 목표</th><th class="n">변화</th><th>달성 수단</th></tr></thead>
<tbody>
<tr><td class="k">월 상담 신청<small>건</small></td><td class="n a">320</td><td class="n b hot">480</td><td class="n d">+50%</td><td class="m">롱테일 키워드 확장, 신청 화면 개편</td></tr>
<tr><td class="k">신청 전환 비율<small>%</small></td><td class="n a">1.8</td><td class="n b hot">2.5</td><td class="n d">+0.7%p</td><td class="m">유입 화면과 광고 문구 일치</td></tr>
<tr><td class="k">검색 첫 화면 노출<small>개</small></td><td class="n a">9</td><td class="n b hot">21</td><td class="n d">+12개</td><td class="m">블로그 월 8건, 핵심 키워드 30개 대상</td></tr>
<tr><td class="k">광고 유입 중 신규 비중<small>%</small></td><td class="n a">41</td><td class="n b hot">55</td><td class="n d">+14%p</td><td class="m">일반 키워드 비중 확대</td></tr>
<tr><td class="k">유효 상담 비율<small>%</small></td><td class="n a">62</td><td class="n b hot">70</td><td class="n d">+8%p</td><td class="m">신청서 문항 2개 추가</td></tr>
</tbody></table></div></div>

.dk-asis table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-asis 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-asis 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-asis tbody tr:last-child td{border-bottom:0}
.dk-asis .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-asis .c{text-align:center}
.dk-asis td.k{font-weight:600;color:var(--ink)}
.dk-asis .dk-card{padding:20px 24px 12px}
.dk-asis td.k small{display:inline-block;margin-left:6px;font-size:var(--f-cap);font-weight:500;color:var(--mu)}
.dk-asis td.a{font-size:var(--f-lg);color:var(--mu)}
.dk-asis td.b{font-size:var(--f-xl);font-weight:700;color:var(--ac);background:var(--acw)}
.dk-asis th.hot{color:var(--ac)}
.dk-asis td.d{font-size:var(--f-sm);font-weight:600;color:var(--ink)}
.dk-asis td.m{font-size:var(--f-sm);padding-left:28px}
.dk-asis th:last-child{padding-left:28px}