진단: 현재 상황 요약(큰 숫자 3개와 해석)

기(起). 제안서 첫 본문 장. 광고주의 현재 상태를 숫자 3개로 고정하고 바로 아래에 해석 3줄을 붙임. 숫자 3개 고정, 해석 3개 고정. 바꿔야 할 값: 숫자 3개(값·단위·지표명·비교 문장), 강조할 숫자 1개(class hot), 해석 3개(제목·설명), 출처. 값 바꾸는 법: .n 세 칸의 .k(지표명) .v(값, 단위는 <i>) .d(비교 문장) 교체. 가장 문제인 숫자 한 칸에만 class="n hot". .read 안 li 3개는 .t(읽은 사실) .m(의미).

McKinsey·BCG 공개 보고서의 executive summary 장(큰 수치 3개 + so-what 문장), Storydoc 마케팅 덱 구조(https://www.storydoc.com/blog/marketing-deck-examples)의 Performance overview 장 구성을 참고. 구성 방식만 참고, 코드와 문구는 직접 제작.

<section class="slide lo-dx-sum">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 01 · 현황 진단</span></div>
  <div class="hd"><p class="lb">현황 진단</p><h1>신규 유입은 유지, 재구매와 브랜드 검색이 동시 하락</h1><p class="lede">최근 12개월 자사몰과 광고 계정 기준 핵심 수치 3가지</p></div>
  <div class="body">
<div class="nums">
      <div class="n"><p class="k">신규 방문자 수 지수</p><p class="v num">102</p><p class="d">1년 전 100 대비 유지. 광고 유입 규모는 그대로</p></div>
      <div class="n hot"><p class="k">자사몰 재구매율</p><p class="v num">33<i>%</i></p><p class="d">1년 전 41%에서 8%p 하락. 3분기 연속 감소</p></div>
      <div class="n"><p class="k">브랜드 검색량 지수</p><p class="v num">72</p><p class="d">1년 전 100 대비 28 하락. 경쟁 2개사는 상승</p></div>
    </div>
    <div class="cd read">
      <p class="k">해석</p>
      <ol>
        <li><p class="t">유입이 아니라 유지의 문제</p><p class="m">광고로 들어오는 수는 같고, 다시 사는 고객만 감소</p></li>
        <li><p class="t">알림 발송 중단 시점과 일치</p><p class="m">2026년 2월 재구매 알림 중단 이후 하락 시작</p></li>
        <li><p class="t">신규 광고 증액으로는 회복 불가</p><p class="m">같은 기간 신규 고객 확보 비용 지수 1.4배</p></li>
      </ol>
    </div>
  </div>
  <div class="pg">05</div>
  <div class="src">출처: 자사몰 주문 데이터, 매체 관리자 화면, 2025년 10월~2026년 9월</div>
</section>

.slide.lo-dx-sum .hd .lb{color:var(--mu)}
.slide.lo-dx-sum :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-dx-sum .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-dx-sum .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-dx-sum .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-dx-sum .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-dx-sum .body{gap:28px}
.slide.lo-dx-sum .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.slide.lo-dx-sum .n{border-top:2px solid var(--ink);padding-top:14px}
.slide.lo-dx-sum .n .v{font-size:var(--f-huge);font-weight:700;line-height:1.08;letter-spacing:-.03em;color:var(--ink)}
.slide.lo-dx-sum .n .v i{font-style:normal;font-size:var(--f-h);margin-left:4px;letter-spacing:0}
.slide.lo-dx-sum .n .d{font-size:var(--f-sm);color:var(--ink2);margin-top:4px}
.slide.lo-dx-sum .n.hot{border-top-color:var(--ac)}
.slide.lo-dx-sum .n.hot .v{color:var(--ac)}
.slide.lo-dx-sum .read{padding:20px 28px;display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start}
.slide.lo-dx-sum .read .k{padding-top:4px}
.slide.lo-dx-sum .read ol{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.slide.lo-dx-sum .read .t{font-size:var(--f-md);font-weight:700;color:var(--ink)}
.slide.lo-dx-sum .read .m{font-size:var(--f-sm);color:var(--ink2);margin-top:2px}