목차: 기승전결 4단 표시형

문서 흐름을 진단, 방향, 실행, 운영 4단으로 나란히 보여 주는 목차. 단마다 파트명, 장 제목 3개, 쪽 범위. 4단 고정, 장 제목 2~4개. 값 바꾸는 법: 단마다 .st(단 이름) .nm(파트명) li(장 제목 2~4개) .pp(쪽 범위) 교체. 단 수를 바꾸면 repeat(4,1fr) 수정.

McKinsey·BCG·Bain 장 구성 해설(slidemodel.com/mckinsey-presentation-structure, deckary.com/blog/consulting-slide-standards, deckary.com/blog/executive-summary-slides) 의 상황·문제·해결 흐름을 목차에 드러내는 방식, 장 레이아웃 유형 정리(madegooddesigns.com/slide-layout-ideas), Behance·Dribbble pitch deck·editorial slide layout 검색 결과의 공통 구성. 구성 방식만 참고, 코드와 문구는 직접 제작.

<section class="slide lo-toc-flow">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>목차</span></div>
  <div class="hd"><p class="lb">목차</p><h1>진단에서 운영까지 4단 구성</h1><p class="lede">각 파트 첫 장은 그 파트의 결론 요약</p></div>
  <div class="body">
    <div class="cols">
      <div><p class="st">1단 · 진단</p><p class="nm">현황 진단</p><ul><li>검색 유입 의존 구조</li><li>상세페이지 이탈 구간</li><li>재구매율 추이</li></ul><p class="pp num">04~09쪽</p></div>
      <div><p class="st">2단 · 방향</p><p class="nm">전략 방향</p><ul><li>상반기 목표 지표</li><li>매체 역할 3단 분리</li><li>운영 기준 변경</li></ul><p class="pp num">10~15쪽</p></div>
      <div><p class="st">3단 · 실행</p><p class="nm">매체별 실행안</p><ul><li>검색 광고 구조 재편</li><li>리뷰 콘텐츠 제작</li><li>자사몰 전환 개선</li></ul><p class="pp num">16~27쪽</p></div>
      <div><p class="st">4단 · 운영</p><p class="nm">운영과 보고</p><ul><li>참여 인력과 역할</li><li>월별 일정</li><li>리포트 체계</li></ul><p class="pp num">28~33쪽</p></div>
    </div>
  </div>
  <div class="pg">02</div>
</section>

.slide.lo-toc-flow .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.slide.lo-toc-flow .cols>div{border-top:2px solid var(--ink);padding-top:20px;display:flex;flex-direction:column}
.slide.lo-toc-flow .st{font-size:var(--f-cap);font-weight:600;color:var(--mu);margin:0}
.slide.lo-toc-flow .nm{font-size:var(--f-xl);font-weight:700;margin:6px 0 20px}
.slide.lo-toc-flow ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;color:var(--ink2)}
.slide.lo-toc-flow li{padding-bottom:10px;border-bottom:1px solid var(--line)}
.slide.lo-toc-flow .pp{font-size:var(--f-cap);color:var(--mu);margin:16px 0 0}