본문: 2단 대비(지금 / 이후)

현재 방식과 제안 방식을 같은 항목으로 나란히 대비. 항목 3~5개, 양쪽 줄 수 동일. 값 바꾸는 법: 양쪽 dl 의 항목 이름(dt)을 같게 두고 dd 만 교체. 3~5줄. 강조색은 "이후" 라벨 한 곳.

장 레이아웃 유형 정리(madegooddesigns.com/slide-layout-ideas), Behance·Dribbble pitch deck·editorial slide layout 검색 결과의 공통 구성 의 50/50 split, 컨설팅 보고서의 as-is / to-be 대비 장. 구성 방식만 참고, 코드와 문구는 직접 제작.

<section class="slide lo-before-after">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 02 · 전략 방향</span></div>
  <div class="hd"><p class="lb">전략 방향</p><h1>매체 운영 기준을 클릭 수에서 재구매율로 변경</h1><p class="lede">4개 항목 비교, 2027년 1월 적용</p></div>
  <div class="body">
    <div class="grid">
      <div class="p now"><p class="k">지금</p><p class="t">매체별 개별 운영</p>
        <dl><div><dt>목표 지표</dt><dd>클릭 수와 클릭 단가</dd></div><div><dt>예산 배분</dt><dd>검색 광고 71% 고정</dd></div><div><dt>소재</dt><dd>매체마다 별도 제작</dd></div><div><dt>보고</dt><dd>매체사 리포트 4종 개별 전달</dd></div></dl>
      </div>
      <div class="ar">→</div>
      <div class="p next"><p class="k">이후</p><p class="t">단계별 통합 운영</p>
        <dl><div><dt>목표 지표</dt><dd>전환당 비용과 90일 내 재구매율</dd></div><div><dt>예산 배분</dt><dd>월간 성과에 따라 20% 범위에서 조정</dd></div><div><dt>소재</dt><dd>리뷰 콘텐츠 1건을 3개 매체에 재사용</dd></div><div><dt>보고</dt><dd>통합 리포트 1종, 매월 5일</dd></div></dl>
      </div>
    </div>
  </div>
  <div class="pg">14</div>
</section>

.slide.lo-before-after .hd .lb{color:var(--mu)}
.slide.lo-before-after .grid{display:grid;grid-template-columns:1fr 48px 1fr;align-items:center}
.slide.lo-before-after .p{border-radius:var(--r);padding:28px 32px 16px}
.slide.lo-before-after .now{background:var(--soft)}
.slide.lo-before-after .next{background:var(--card);box-shadow:var(--shadow)}
.slide.lo-before-after .ar{font-size:var(--f-xl);color:var(--mu);text-align:center}
.slide.lo-before-after .k{font-size:var(--f-cap);font-weight:600;color:var(--mu);margin:0}
.slide.lo-before-after .next .k{color:var(--ac)}
.slide.lo-before-after .t{font-size:var(--f-xl);font-weight:700;letter-spacing:-.02em;margin:4px 0 14px}
.slide.lo-before-after .now .t{color:var(--ink2)}
.slide.lo-before-after dl{margin:0}
.slide.lo-before-after dl div{display:grid;grid-template-columns:96px 1fr;align-items:baseline;padding:14px 0;border-top:1px solid var(--line2)}
.slide.lo-before-after dt{font-size:var(--f-cap);color:var(--mu)}
.slide.lo-before-after dd{margin:0;color:var(--ink2)}
.slide.lo-before-after .next dd{color:var(--ink);font-weight:600}