전략: 전략 방향 한 장(지금에서 이후로, 근거 3개)

승(承)의 첫 장. 진단 결론을 받아 "무엇을 무엇으로 바꾸는지" 한 쌍으로 선언하고 그 근거 3개를 숫자로 붙임. 근거 3개 고정. 바꿔야 할 값: 지금·이후 제목과 설명 각 1쌍, 근거 3개(숫자·단위·제목·설명), 강조 숫자 없음(이후 상자가 강조). 값 바꾸는 법: .now 와 .next 의 .t(한 줄 선언) .m(설명) 교체. .why li 3개의 .v(숫자, 단위는 <i>) .t .m 교체. 근거가 2개면 li 하나 삭제 후 grid-template-columns 를 repeat(2,1fr) 로.

BCG 보고서의 from-to 장(현재 방식과 제안 방식을 좌우로 놓고 아래에 근거 수치), Bain 의 "answer first" 구성을 참고. 직접 제작.

<section class="slide lo-st-dir">
  <div class="run"><b>온배움 코딩학원 2027 신학기 수강생 모집 제안</b><span>PART 02 · 전략 방향</span></div>
  <div class="hd"><p class="lb">전략 방향</p><h1>광고 증액 대신 신청 완료율 회복에 먼저 투입</h1><p class="lede">2027년 1~3월 신학기 모집 기간 운영 기준</p></div>
  <div class="body">
<div class="ft">
      <div class="now"><p class="k">지금</p><p class="t">유입 확대 중심</p><p class="m">예산의 85%를 검색 광고 클릭 확보에 사용. 신청 화면은 2월 개편 이후 그대로</p></div>
      <div class="ar"><svg width="28" height="16" viewBox="0 0 28 16"><path d="M0 8h25M19 2l6 6-6 6"/></svg></div>
      <div class="next"><p class="k">이후</p><p class="t">신청 완료 중심</p><p class="m">첫 4주는 신청 화면과 랜딩 정비. 광고는 완료율 회복을 확인한 뒤 단계 증액</p></div>
    </div>
    <div class="why">
      <p class="k">이 방향의 근거</p>
      <ol>
        <li><p class="v num">52<i>%</i></p><p class="t">감소분의 절반이 신청 화면</p><p class="m">상담 신청 감소분 중 신청 화면 포기가 차지하는 몫</p></li>
        <li><p class="v num">1.6<i>배</i></p><p class="t">같은 예산의 신청 건수</p><p class="m">완료율 38%를 개편 전 61%로 되돌렸을 때의 신청 건수</p></li>
        <li><p class="v num">4<i>주</i></p><p class="t">정비에 필요한 기간</p><p class="m">입력 항목 축소와 수강료 안내 이동, 개발 수정 2건</p></li>
      </ol>
    </div>
  </div>
  <div class="pg">11</div>
</section>

.slide.lo-st-dir .hd .lb{color:var(--mu)}
.slide.lo-st-dir :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-st-dir .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-st-dir .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-st-dir .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-st-dir .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-st-dir .body{gap:28px}
.slide.lo-st-dir .ft{display:grid;grid-template-columns:1fr 56px 1fr;align-items:stretch}
.slide.lo-st-dir .now,.slide.lo-st-dir .next{border-radius:var(--r);padding:22px 28px}
.slide.lo-st-dir .now{background:var(--soft)}
.slide.lo-st-dir .next{background:var(--card);box-shadow:var(--shadow)}
.slide.lo-st-dir .ft .t{font-size:var(--f-xl);font-weight:700;margin:2px 0 6px}
.slide.lo-st-dir .now .t{color:var(--ink2)}
.slide.lo-st-dir .next .k,.slide.lo-st-dir .next .t{color:var(--ac)}
.slide.lo-st-dir .ft .m{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-st-dir .ar{display:flex;align-items:center;justify-content:center}
.slide.lo-st-dir .ar path{fill:none;stroke:var(--mu);stroke-width:1.6}
.slide.lo-st-dir .why ol{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:10px}
.slide.lo-st-dir .why li{border-top:1px solid var(--line2);padding-top:12px}
.slide.lo-st-dir .why .v{font-size:var(--f-big);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.slide.lo-st-dir .why .v i{font-style:normal;font-size:var(--f-xl);margin-left:3px;letter-spacing:0}
.slide.lo-st-dir .why .t{font-size:var(--f-md);font-weight:700;color:var(--ink);margin-top:6px}
.slide.lo-st-dir .why .m{font-size:var(--f-sm);color:var(--ink2)}