본문: 왼쪽 큰 숫자와 오른쪽 설명 목록

수치 하나가 장의 주인공일 때. 왼쪽에 숫자와 정의, 오른쪽에 그 원인이나 구성 요소 3~4줄. 값 바꾸는 법: .n 숫자(4자 이내), .c 수치의 정의, .s 출처와 기준. li 3~4개. 강조색은 숫자 한 곳.

장 레이아웃 유형 정리(madegooddesigns.com/slide-layout-ideas), Behance·Dribbble pitch deck·editorial slide layout 검색 결과의 공통 구성 의 hero number(수치 하나를 가장 크게, 정의는 바로 아래 작게). 구성 방식만 참고, 코드와 문구는 직접 제작.

<section class="slide lo-num-list">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 01 · 현황 진단</span></div>
  <div class="hd"><p class="lb">현황 진단</p><h1>첫 구매 고객 10명 중 9명이 90일 안에 돌아오지 않는 구조</h1><p class="lede">재구매율이 낮은 원인 4가지</p></div>
  <div class="body">
    <div class="grid">
      <div class="l">
        <p class="n num">12%</p>
        <p class="c">첫 구매 후 90일 내 재구매율</p>
        <p class="s">자사몰 주문 데이터, 2026년 1~6월 첫 구매 고객 기준</p>
      </div>
      <ul>
        <li><b>구매 후 접점 부재</b><p>배송 완료 알림 이후 브랜드가 보내는 메시지 0건</p></li>
        <li><b>재방문 광고 미운영</b><p>구매 고객에게도 신규 고객과 같은 소재 노출</p></li>
        <li><b>교체 주기 미활용</b><p>필터와 커버류 교체 주기 3개월. 안내가 없어 타 쇼핑몰에서 재구매</p></li>
        <li><b>회원 혜택 인지 부족</b><p>적립금 보유 고객의 68%가 잔액 미확인</p></li>
      </ul>
    </div>
  </div>
  <div class="pg">08</div>
</section>

.slide.lo-num-list .hd .lb{color:var(--mu)}
.slide.lo-num-list .grid{display:grid;grid-template-columns:400px 1fr;gap:64px;align-items:center}
.slide.lo-num-list .n{font-size:var(--f-huge);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--ac);margin:0 0 20px}
.slide.lo-num-list .c{font-weight:600;margin:0}
.slide.lo-num-list .s{font-size:var(--f-cap);color:var(--mu);margin:6px 0 0}
.slide.lo-num-list ul{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.slide.lo-num-list li{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:19px 0;border-top:1px solid var(--line)}
.slide.lo-num-list li:first-child{border-top-color:var(--line2)}
.slide.lo-num-list li p{margin:0;color:var(--ink2)}