전후 변화(아이콘 상태 변화)

운영 전과 후에 무엇이 달라지는지 항목별로 짝지어 보여줄 때. 행 3~4개. 같은 대상의 아이콘이 상태만 바뀌도록 짝을 맞춤(끊긴 전화와 연결된 전화, 가린 눈과 뜬 눈). 값 바꾸는 법: 행(.rw)을 복사·삭제해 3~4개. 왼쪽(현재)과 오른쪽(이후) 각각 아이콘·굵은 한 줄·보조 한 줄, 오른쪽 끝 변화 수치(em) 교체. 화살표 문자 → 는 수치 표기에만 사용. 강조색은 머리줄의 "이후" 라벨 한 곳. 아이콘은 Lucide(ISC) 원문을 인라인으로 넣은 것. 다른 아이콘으로 바꿀 때는 D-아이콘-* 묶음에서 같은 viewBox 의 내용을 복사.

SlideModel Before & After Slides(https://slidemodel.com/templates/before-after-powerpoint-template-slides), infoDiagram Before-After Comparison Table(https://infodiagram.com/slides/comparison-table-sample-percentage-before-after). 전·후를 좌우 열로 두고 행마다 짝을 맞추는 구성, 전은 흐리게 후는 또렷하게 두는 대비를 참고. 구성 방식만 참고, 코드와 그림은 직접 제작. 아이콘: Lucide v1.52.0(ISC, https://lucide.dev).

<div class="dk dk-ba2">
  <div class="hd3"><span>현재</span><span></span><span class="on">운영 3개월 후</span></div>
  <div class="rw"><div class="bf"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg><div><b>검색 결과 2쪽 노출</b><span>주요 키워드 40개 중 9개만 1쪽</span></div></div><span class="ar"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span><div class="af dk-card"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg><div><b>1쪽 상단 노출</b><span>주요 키워드 40개 중 28개 1쪽</span></div><em class="num">9개 → 28개</em></div></div>
  <div class="rw"><div class="bf"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16 2 6 6"/><path d="m22 2-6 6"/><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg><div><b>부재중 문의 방치</b><span>영업시간 외 전화 문의 응대 없음</span></div></div><span class="ar"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span><div class="af dk-card"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2a9 9 0 0 1 9 9"/><path d="M13 6a5 5 0 0 1 5 5"/><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg><div><b>예약 폼으로 접수</b><span>시간 외 문의를 다음 날 오전 회신</span></div><em class="num">회신율 90%</em></div></div>
  <div class="rw"><div class="bf"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg><div><b>채널별 보고서 4종</b><span>양식과 기준일이 서로 달라 비교 불가</span></div></div><span class="ar"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span><div class="af dk-card"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M8 18v-1"/><path d="M12 18v-6"/><path d="M16 18v-3"/></svg><div><b>통합 리포트 1종</b><span>같은 기준일, 같은 전환 정의로 집계</span></div><em class="num">4종 → 1종</em></div></div>
</div>

.dk-ba2{display:flex;flex-direction:column;gap:12px}
.dk-ba2 .hd3,.dk-ba2 .rw{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1.15fr);gap:16px;align-items:stretch}
.dk-ba2 .hd3 span{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding:0 28px}
.dk-ba2 .hd3 .on{color:var(--ac)}
.dk-ba2 .bf,.dk-ba2 .af{display:flex;align-items:center;gap:20px;padding:22px 28px;border-radius:var(--r)}
.dk-ba2 .bf{background:var(--soft)}
.dk-ba2 .ic{width:36px;height:36px;flex:none}
.dk-ba2 .bf .ic{color:var(--g3)}
.dk-ba2 .af .ic{color:var(--ink)}
.dk-ba2 .rw b{display:block;font-size:var(--f-lg);font-weight:700;line-height:1.35}
.dk-ba2 .bf b{color:var(--ink2);font-weight:600}
.dk-ba2 .rw span{font-size:var(--f-sm);color:var(--mu)}
.dk-ba2 .af>div{flex:1;min-width:0}
.dk-ba2 .af em{font-style:normal;font-size:var(--f-md);font-weight:700;color:var(--ink);white-space:nowrap}
.dk-ba2 .ar{display:flex;align-items:center;justify-content:center;color:var(--g2)}
.dk-ba2 .ar .ic{width:26px;height:26px}