전략: 3안 시나리오 비교(보수·기본·공격)

승(承)의 끝 또는 결(結)의 조건 장 앞. 예산 규모별 3안을 같은 항목으로 비교하고 한 안을 권장. 3안 고정, 비교 항목 3개. 바꿔야 할 값: 안 이름과 한 줄 설명, 예산 지수와 전환 지수(막대 길이), 매체 범위, 주요 위험, 맞는 조건, 권장안 1개(class hot), 가정 문장. 값 바꾸는 법: .s 카드 3개. .bars 의 i width = 지수 ÷ 200 × 100%(최댓값 200 기준). .v 지수 값. dl 3줄(매체 범위·주요 위험·맞는 조건). 권장안에만 class="s hot" 과 .rc 표시.

Bain·McKinsey 보고서의 base/upside/downside 시나리오 표, SlideModel 3-option comparison 구성(가운데 권장안 강조)을 참고. 직접 제작.

<section class="slide lo-st-scn">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 02 · 전략 방향</span></div>
  <div class="hd"><p class="lb">시나리오</p><h1>기본안 권장, 예산 지수 130으로 전환 지수 158 예상</h1><p class="lede">보수·기본·공격 3안의 예산 규모와 예상 전환, 위험 비교</p></div>
  <div class="body">
<div class="sc">
      <div class="cd s"><p class="n">보수안</p><p class="d">현재 예산 안에서 배분만 조정</p>
        <div class="bars"><p><span>예산 지수</span><u><i style="width:50%"></i></u><b class="num">100</b></p><p><span>전환 지수</span><u><i class="cv" style="width:62%"></i></u><b class="num">124</b></p></div>
        <dl><dt>매체 범위</dt><dd>검색 광고, 쇼핑 검색, 재구매 알림</dd><dt>주요 위험</dt><dd>후기 구역 공백 지속</dd><dt>맞는 조건</dt><dd>상반기 예산 동결</dd></dl></div>
      <div class="cd s hot"><p class="n">기본안<b class="rc">권장</b></p><p class="d">후기와 숏폼을 더해 5개 매체 운영</p>
        <div class="bars"><p><span>예산 지수</span><u><i style="width:65%"></i></u><b class="num">130</b></p><p><span>전환 지수</span><u><i class="cv" style="width:79%"></i></u><b class="num">158</b></p></div>
        <dl><dt>매체 범위</dt><dd>보수안 + 블로그 후기, 숏폼 영상</dd><dt>주요 위험</dt><dd>콘텐츠 제작 일정 지연</dd><dt>맞는 조건</dt><dd>상반기 전환 1.5배 목표</dd></dl></div>
      <div class="cd s"><p class="n">공격안</p><p class="d">신규 고객 확보까지 동시 확대</p>
        <div class="bars"><p><span>예산 지수</span><u><i style="width:90%"></i></u><b class="num">180</b></p><p><span>전환 지수</span><u><i class="cv" style="width:96%"></i></u><b class="num">192</b></p></div>
        <dl><dt>매체 범위</dt><dd>기본안 + 디스플레이, 인플루언서</dd><dt>주요 위험</dt><dd>전환당 비용 상승, 재고 부담</dd><dt>맞는 조건</dt><dd>신제품 출시와 병행</dd></dl></div>
    </div>
    <p class="say"><b>예산 1 늘릴 때 전환 증가 폭이 가장 큰 구간은 기본안.</b> 공격안은 2분기 성과 확인 후 전환 검토</p>
  </div>
  <div class="pg">16</div>
  <div class="src">지수는 현재 월 매체비와 현재 월 전환 수를 각각 100으로 둔 값. 예상치는 최근 6개월 전환율 유지 가정</div>
</section>

.slide.lo-st-scn .hd .lb{color:var(--mu)}
.slide.lo-st-scn :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-st-scn .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-st-scn .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-st-scn .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-st-scn .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-st-scn .body{gap:18px}
.slide.lo-st-scn .sc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.slide.lo-st-scn .s{padding:20px 24px 14px;border-top:3px solid transparent}
.slide.lo-st-scn .s .n{font-size:var(--f-xl);font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:space-between}
.slide.lo-st-scn .rc{font-size:var(--f-cap);font-weight:700;color:var(--card);background:var(--ac);border-radius:12px;padding:2px 12px}
.slide.lo-st-scn .s .d{font-size:var(--f-sm);color:var(--ink2)}
.slide.lo-st-scn .bars{margin:14px 0 10px;display:flex;flex-direction:column;gap:8px}
.slide.lo-st-scn .bars p{display:grid;grid-template-columns:64px 1fr 44px;gap:10px;align-items:center}
.slide.lo-st-scn .bars span{font-size:var(--f-cap);color:var(--mu)}
.slide.lo-st-scn .bars u{display:block;height:12px;background:var(--soft);border-radius:6px;text-decoration:none}
.slide.lo-st-scn .bars i{display:block;height:12px;border-radius:6px;background:var(--g2)}
.slide.lo-st-scn .bars i.cv{background:var(--g4)}
.slide.lo-st-scn .bars b{font-size:var(--f-md);font-weight:700;text-align:right}
.slide.lo-st-scn .s dl{display:grid;grid-template-columns:72px 1fr;border-top:1px solid var(--line2)}
.slide.lo-st-scn .s dt,.slide.lo-st-scn .s dd{font-size:var(--f-sm);padding:8px 0;border-bottom:1px solid var(--line)}
.slide.lo-st-scn .s dt{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding-top:9px}
.slide.lo-st-scn .s dd{color:var(--ink2)}
.slide.lo-st-scn .s dt:last-of-type,.slide.lo-st-scn .s dd:last-of-type{border-bottom:0}
.slide.lo-st-scn .s.hot{border-top-color:var(--ac)}
.slide.lo-st-scn .s.hot .n{color:var(--ac)}
.slide.lo-st-scn .s.hot .bars i.cv{background:var(--ac)}