좌우 대비 2단(지금 / 이후)

같은 항목을 지금과 이후로 나란히 견줄 때. 가운데에 항목 이름을 두고 좌우에 값을 적는다. 항목 3~5개, 값은 1줄(최대 2줄). 값 바꾸는 법: .l=지금 값, .m=항목 이름, .r=이후 값. 세 묶음의 .v 개수를 같게. 행 높이 68px 고정이라 값은 2줄 이내.

slideworks.io 컨설팅 장표 해설(https://slideworks.io/templates/consulting-powerpoint-templates): 고정 격자, 여백, 강조색을 핵심 한 곳에만 쓰는 방식. Storytelling with Data 의 before / after 대비 원칙(https://www.storytellingwithdata.com/): 비교 대상은 회색, 말하려는 쪽만 진하게. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-contrast">
  <div class="c l"><div class="h">지금</div><div class="v">매체별 엑셀 4종, 월 1회</div><div class="v">월초 배분 후 고정</div><div class="v">분기 1회 교체</div><div class="v">매체 담당자별 개별 연락</div></div>
  <div class="c m"><div class="h"></div><div class="v"><span>보고</span></div><div class="v"><span>예산 조정</span></div><div class="v"><span>소재</span></div><div class="v"><span>연락 창구</span></div></div>
  <div class="c r"><div class="h">이후</div><div class="v">통합 대시보드 1개, 상시 확인</div><div class="v">주 단위로 성과 좋은 묶음에 이동</div><div class="v">4주 주기 묶음 교체</div><div class="v">전담 AE 1인</div></div>
</div>

.dk-contrast{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr)}
.dk-contrast .c{padding:10px 36px 12px}
.dk-contrast .h{height:56px;display:flex;align-items:center;font-size:var(--f-xl);font-weight:700}
.dk-contrast .v{height:68px;display:flex;align-items:center;font-size:var(--f-md);border-top:1px solid var(--line);line-height:1.4}
.dk-contrast .l{text-align:right}
.dk-contrast .l .h,.dk-contrast .l .v{justify-content:flex-end;color:var(--mu)}
.dk-contrast .l .h{color:var(--ink2)}
.dk-contrast .m{padding:10px 0 12px}
.dk-contrast .m .v{justify-content:center;border-top-color:transparent}
.dk-contrast .m span{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-contrast .m .v::before,.dk-contrast .m .v::after{content:"";flex:1;height:1px;background:var(--line2);margin:0 12px}
.dk-contrast .r{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.dk-contrast .r .h{color:var(--ac)}
.dk-contrast .r .v{font-weight:600;color:var(--ink)}