반폭 · 전후 숫자 대비(전 → 후)

개편, 운영 전환, 소재 교체의 전후 수치 하나를 나란히 보일 때. 숫자 5자 이내, 구간 설명 12자 이내, 아래 설명 1~2행(행마다 34자 이내). 값 바꾸는 법: .bx 가 전, .bx.af 가 후(.k 구간 이름, .v 숫자와 small 단위, .c 기간). .kv 하나가 변화 또는 조건 한 행. .kv 1~2행.

직접 제작. 사례 보고서의 Before / After 수치 대비 방식 참고. 뒤 수치만 강조색, 앞 수치는 회색으로 낮춤.

<div class="dk dkh dkh-t-ba"><div class="dk-card"><p class="dk-lb">랜딩 페이지 개편 전후 전환율</p><div class="g"><div class="bx"><span class="k">개편 전</span><span class="v">1.2<small>%</small></span><span class="c">4~6월 평균</span></div><span class="ar">→</span><div class="bx af"><span class="k">개편 후</span><span class="v">1.8<small>%</small></span><span class="c">7~9월 평균</span></div></div>
<div class="kv"><span class="k">변화</span><span>0.6%p 상승, 개편 전 대비 1.5배</span></div>
<div class="kv"><span class="k">조건</span><span>같은 예산과 검색어 범위에서 랜딩 페이지만 변경</span></div></div></div>

.dkh-t-ba .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-ba .dk-lb{margin:0 0 10px}
.dkh-t-ba .g{flex:1;min-height:0;display:grid;grid-template-columns:1fr 28px 1fr;align-items:stretch;margin-bottom:10px}
.dkh-t-ba .bx{display:flex;flex-direction:column;justify-content:center;min-width:0;border-radius:var(--r-sm);padding:10px 16px;background:var(--soft)}
.dkh-t-ba .bx.af{background:var(--acw)}
.dkh-t-ba .bx .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dkh-t-ba .bx .v{font-size:var(--f-num);font-weight:700;line-height:1.15;letter-spacing:-.03em;color:var(--g3);font-variant-numeric:tabular-nums}
.dkh-t-ba .bx .v small{font-size:var(--f-lg);font-weight:600;margin-left:2px;letter-spacing:0}
.dkh-t-ba .bx.af .v{color:var(--ac)}
.dkh-t-ba .bx .c{font-size:var(--f-cap);color:var(--mu)}
.dkh-t-ba .ar{display:flex;align-items:center;justify-content:center;font-size:var(--f-md);color:var(--g3)}
.dkh-t-ba .kv{flex:none;display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:var(--f-sm);color:var(--ink2);line-height:1.5}
.dkh-t-ba .kv .k{font-weight:600;color:var(--ink);white-space:nowrap}
.dkh-t-ba .kv{padding:7px 0}