전후 큰 숫자 대비(지금에서 목표로)

현재 값과 목표 값(또는 집행 전과 후) 두 숫자가 장의 전부일 때. 위에 숫자 2개와 차이, 아래에 그 차이를 만드는 수단 3가지. 목표 쪽 숫자에만 강조색. 값 바꾸는 법: 왼쪽 카드 = 현재 값, 오른쪽 카드 = 목표 값. 가운데 차이(.gap)와 기간(.when), 아래 수단 3가지(li) 교체. 값은 단위 포함 4자 이내. 비율끼리의 차이는 %p 로 표기.

Storytelling with Data(https://www.storytellingwithdata.com)의 before and after 구성과 컨설팅 장표의 "현재(as-is)와 목표(to-be)" 대비 관행 참고. 현재는 회색, 목표만 강조색으로 직접 제작.

<div class="dk dk-b2a">
<div class="top">
<div class="dk-card now"><p class="lb">지금 · 3분기 평균</p><p class="v num">38<span>%</span></p><p class="ds">장바구니에 담은 방문자 가운데 결제까지 간 비율</p></div>
<div class="mid"><p class="gap num">+17%p</p><svg width="120" height="20" viewBox="0 0 120 20" role="img"><line x1="0" y1="10" x2="108" y2="10"/><polyline points="100,3 110,10 100,17"/></svg><p class="when">6개월</p></div>
<div class="dk-card goal"><p class="lb">목표 · 내년 1분기 평균</p><p class="v num">55<span>%</span></p><p class="ds">업종 상위 25% 수준, 구매 건수로는 약 1.4배</p></div>
</div>
<ol><li><span class="no num">01</span><b>상세 페이지 개편</b><span class="t">첫 화면에 후기와 비교표 배치</span></li><li><span class="no num">02</span><b>장바구니 알림</b><span class="t">담은 뒤 24시간 안에 1회 발송</span></li><li><span class="no num">03</span><b>검색 소재 정비</b><span class="t">구매 의도 키워드 중심으로 재편</span></li></ol>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>

.dk-b2a .top{display:grid;grid-template-columns:minmax(0,1fr) 160px minmax(0,1fr);align-items:center}
.dk-b2a .dk-card{padding:28px 40px}
.dk-b2a .lb{font-size:var(--f-sm);font-weight:600;color:var(--mu);margin:0}
.dk-b2a .v{font-size:var(--f-huge);font-weight:800;line-height:1.1;letter-spacing:-4px;margin:var(--s1) 0 var(--s2);color:var(--g3)}
.dk-b2a .v span{font-size:var(--f-num);font-weight:700;letter-spacing:0;margin-left:4px}
.dk-b2a .goal .v{color:var(--ac)}
.dk-b2a .ds{font-size:var(--f-sm);color:var(--ink2);margin:0}
.dk-b2a .mid{text-align:center}
.dk-b2a .mid svg{display:block;margin:6px auto}
.dk-b2a .mid line,.dk-b2a .mid polyline{stroke:var(--ink);stroke-width:2;fill:none}
.dk-b2a .gap{font-size:var(--f-xl);font-weight:700;margin:0;color:var(--ink)}
.dk-b2a .when{font-size:var(--f-cap);color:var(--mu);margin:0}
.dk-b2a ol{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.dk-b2a li{border-top:1px solid var(--line2);padding-top:var(--s3);display:grid;grid-template-columns:32px minmax(0,1fr);row-gap:2px}
.dk-b2a .no{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-top:2px}
.dk-b2a li b{font-size:var(--f-body);font-weight:700}
.dk-b2a .t{grid-column:2;font-size:var(--f-sm);color:var(--ink2)}
.dk-b2a .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s4) 0 0}