세 줄 요약 상자

파트 끝이나 문서 맨 앞에서 내용을 세 문장으로 줄일 때. 3줄 고정, 문장 40자 이내, 줄마다 왼쪽에 구분 낱말. 값 바꾸는 법: li 하나가 한 줄(span 구분 낱말: 현황·원인·방향 또는 문제·해법·효과, p 문장). 3줄 고정. 상자는 이 조각에서만 쓰고 장 안의 다른 상자와 겹쳐 쓰지 않음.

보고서 첫 장의 'executive summary' 상자와 뉴스 기사의 세 줄 요약. 맺음 상자(takeaway box, kicker box) 해설(Slideworks https://slideworks.io/resources/how-to-write-key-takeaway-slides-with-examples-and-free-template , Ampler https://ampler.io/articles/how-to-create-a-key-takeaway-slide-like-a-mckinsey-consultant-with-examples/) 참고. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-tsum3">
  <div class="dk-card">
    <p class="dk-lb">세 줄 요약</p>
    <ol>
      <li><span>현황</span><p>광고 예산은 유지되고 있으나 브랜드 검색 첫 화면의 자사 점유는 10칸 중 3칸</p></li>
      <li><span>원인</span><p>매체별로 따로 운영되어 메시지와 일정이 맞지 않고 후기 콘텐츠가 오래됨</p></li>
      <li><span>방향</span><p>검색 지면 정리를 먼저, 그다음 광고와 후기 콘텐츠를 한 계획으로 통합</p></li>
    </ol>
  </div>
</div>

.dk-tsum3 .dk-card{padding:30px 44px 18px}
.dk-tsum3 ol{list-style:none;margin:12px 0 0;padding:0}
.dk-tsum3 li{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;min-height:92px;border-top:1px solid var(--line)}
.dk-tsum3 li span{font-size:var(--f-md);font-weight:700;color:var(--g3)}
.dk-tsum3 li p{margin:0;font-size:var(--f-xl);font-weight:600;line-height:1.45;letter-spacing:-.015em;color:var(--ink)}