본문: 그래프 자리와 오른쪽 해석 3줄

그래프를 넓게 놓고 오른쪽에 읽어야 할 점 3가지를 붙이는 장. 그래프 조각(D-그래프-…)을 자리에 끼워 사용. 해석 2~3개. 값 바꾸는 법: .slot 을 그래프 조각으로 교체(764×340). li 2~3개: 첫 줄은 그래프에서 읽을 사실, 둘째 줄은 의미.

BCG식 그래프 중심 장과 오른쪽 takeaway 상자(deckary.com/blog/bcg-presentation-style), Storytelling with Data 의 그래프 옆 해석 문장. 구성 방식만 참고, 코드와 문구는 직접 제작.

<section class="slide lo-chart-read">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 01 · 현황 진단</span></div>
  <div class="hd"><p class="lb">현황 진단</p><h1>재구매 고객 매출 비중 3분기 연속 하락</h1><p class="lede">자사몰 매출 중 재구매 고객 비중, 2025년 4분기~2026년 3분기</p></div>
  <div class="body">
    <div class="grid">
      <div class="slot">그래프 자리 · 폭 764 × 높이 340</div>
      <div class="r">
        <p class="k">해석</p>
        <ol>
          <li><p class="t">41%에서 33%로 하락</p><p>신규 고객 매출은 유지, 재구매 매출만 감소</p></li>
          <li><p class="t">하락 시작은 알림 발송 중단 직후</p><p>2026년 2월 중단 이후 두 분기 연속 하락</p></li>
          <li><p class="t">신규 광고 확대로는 회복 불가</p><p>같은 기간 신규 유입 비용 1.4배 상승</p></li>
        </ol>
      </div>
    </div>
  </div>
  <div class="pg">09</div>
  <div class="src">출처: 자사몰 주문 데이터</div>
</section>

.slide.lo-chart-read .hd .lb{color:var(--mu)}
.slide.lo-chart-read .slot{background:var(--soft);border:1px dashed var(--line2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:var(--f-cap);color:var(--mu)}
.slide.lo-chart-read .grid{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:center}
.slide.lo-chart-read .slot{height:340px}
.slide.lo-chart-read .k{font-size:var(--f-cap);font-weight:600;color:var(--ac);margin:0 0 4px}
.slide.lo-chart-read ol{list-style:none;margin:0;padding:0}
.slide.lo-chart-read li{padding:16px 0;border-top:1px solid var(--line)}
.slide.lo-chart-read li:first-child{border-top:0}
.slide.lo-chart-read li p{margin:0;color:var(--ink2)}
.slide.lo-chart-read li .t{font-size:var(--f-lg);font-weight:700;color:var(--ink);margin-bottom:4px}