기존 → 제안(화살표 사이에 바뀌는 것)

현재 방식과 제안 방식을 좌우에 놓고 그 사이에 무엇이 바뀌는지 적을 때. 운영 방식 전환, 구조 개편 제안. 좌우 항목 3~4개씩, 가운데 변화 2~3개. 값 바꾸는 법: .old=기존(제목과 항목), .new=제안, .mid 의 li=바뀌는 것 2~3개. 좌우 항목 수를 같게 맞춘다. 강조색은 "제안" 이름표에만.

slideworks.io 컨설팅 장표 해설(https://slideworks.io/templates/consulting-powerpoint-templates): 고정 격자, 여백, 강조색을 핵심 한 곳에만 쓰는 방식. 컨설팅 보고서의 as-is / to-be 장표: 왼쪽은 눌러 두고 오른쪽만 흰 바탕으로 올리는 방식. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-shift2">
  <div class="p old"><p class="k">기존</p><h3>매체별 분리 운영</h3><ul><li>매체마다 담당자와 보고서가 따로</li><li>전환 정의가 달라 수치 비교 불가</li><li>예산은 월초 배분 후 고정</li><li>소재는 매체별 개별 제작</li></ul></div>
  <div class="mid"><p class="k">바뀌는 것</p><ul><li>전환 정의 하나로 통일</li><li>예산 조정 주기 월 → 주</li><li>소재 묶음 공동 사용</li></ul><span class="ar"></span></div>
  <div class="p new"><p class="k">제안</p><h3>목적별 통합 운영</h3><ul><li>신규 확보, 재구매로 캠페인 구분</li><li>같은 기준의 전환 수치로 매체 비교</li><li>주 단위로 성과 좋은 쪽에 예산 이동</li><li>메시지 묶음을 전 매체에 동시 적용</li></ul></div>
</div>

.dk-shift2{display:grid;grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr);align-items:stretch}
.dk-shift2 .p{padding:28px 32px;border-radius:var(--r)}
.dk-shift2 .old{background:var(--soft)}
.dk-shift2 .new{background:var(--card);box-shadow:var(--shadow)}
.dk-shift2 .k{margin:0 0 4px;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-shift2 .new .k{color:var(--ac)}
.dk-shift2 h3{font-size:var(--f-xl);font-weight:700;margin:0 0 14px;line-height:1.35}
.dk-shift2 .old h3{color:var(--ink2)}
.dk-shift2 .p ul{list-style:none;margin:0;padding:0}
.dk-shift2 .p li{font-size:var(--f-body);padding:11px 0;border-top:1px solid var(--line);color:var(--ink)}
.dk-shift2 .old li{color:var(--mu);border-top-color:var(--line2)}
.dk-shift2 .mid{padding:28px 24px 0;display:flex;flex-direction:column;align-items:center;text-align:center}
.dk-shift2 .mid ul{list-style:none;margin:10px 0 0;padding:0}
.dk-shift2 .mid li{font-size:var(--f-sm);font-weight:600;color:var(--ink);padding:6px 0}
.dk-shift2 .ar{display:block;position:relative;width:100%;height:1px;background:var(--g3);margin-top:22px}
.dk-shift2 .ar::after{content:"";position:absolute;right:1px;top:50%;width:7px;height:7px;border-top:1px solid var(--g3);border-right:1px solid var(--g3);transform:translateY(-50%) rotate(45deg)}