디자인킷 · 레이아웃
마무리: 다음 단계(고객 확인 사항 3가지와 일정)
D-레이아웃-마무리-다음단계
언제 쓰는가
제안 끝에 광고주가 할 일과 착수 일정을 나란히. 확인 사항 3가지, 일정 4~5줄. 값 바꾸는 법: 왼쪽 li 3개(광고주가 할 일), 오른쪽 dl 4~5줄(주 차 + 할 일). 헤드카피에 건수와 기간을 그대로 기재.
참고
컨설팅 보고서 마지막 장의 next steps(누가, 무엇을, 언제) 구성, IR 자료의 일정 표. 구성 방식만 참고, 코드와 문구는 직접 제작.
조각
<section class="slide lo-next">
<div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 04 · 운영과 보고</span></div>
<div class="hd"><p class="lb">다음 단계</p><h1>착수 전 확인 사항 3가지와 4주 일정</h1><p class="lede">계약 체결 주간을 1주 차로 계산</p></div>
<div class="body">
<div class="grid">
<div>
<p class="k">모루리빙 확인 사항</p>
<ol>
<li><span class="n num">1</span><div><p class="t">광고 계정 열람 권한</p><p>검색, 디스플레이, SNS 광고 계정 3종의 조회 권한 부여</p></div></li>
<li><span class="n num">2</span><div><p class="t">자사몰 주문 데이터 제공 범위</p><p>최근 12개월 주문 내역. 개인정보를 제외한 형태로 전달</p></div></li>
<li><span class="n num">3</span><div><p class="t">담당자와 승인 절차 지정</p><p>소재와 예산 변경의 승인자 1명, 회신 기한 2영업일</p></div></li>
</ol>
</div>
<div class="sch">
<p class="k">4주 일정</p>
<dl>
<div><dt>1주 차</dt><dd>계약, 계정 권한 이관, 전환 추적 점검</dd></div>
<div><dt>2주 차</dt><dd>키워드 재분류, 인플루언서 12명 섭외</dd></div>
<div><dt>3주 차</dt><dd>소재 제작과 검수, 재방문 시나리오 확정</dd></div>
<div><dt>4주 차</dt><dd>전 매체 집행 시작, 첫 주간 요약 발송</dd></div>
</dl>
</div>
</div>
</div>
<div class="pg">32</div>
</section>스타일
.slide.lo-next .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.slide.lo-next p{margin:0}
.slide.lo-next .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-next ol{list-style:none;margin:10px 0 0;padding:0;border-bottom:1px solid var(--line)}
.slide.lo-next li{display:grid;grid-template-columns:40px 1fr;padding:18px 0;border-top:1px solid var(--line);color:var(--ink2)}
.slide.lo-next li:first-child{border-top-color:var(--line2)}
.slide.lo-next .n{font-size:var(--f-lg);font-weight:700;color:var(--mu)}
.slide.lo-next .t{font-size:var(--f-lg);font-weight:700;color:var(--ink);margin-bottom:4px}
.slide.lo-next .sch{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:26px 32px 12px}
.slide.lo-next dl{margin:10px 0 0}
.slide.lo-next dl div{display:grid;grid-template-columns:88px 1fr;padding:16px 0;border-top:1px solid var(--line)}
.slide.lo-next dt{font-weight:700}
.slide.lo-next dd{margin:0;color:var(--ink2)}