맺음 줄 변형 3종

장의 맨 아래에서 결론을 한 줄로 받을 때. 세 가지 가운데 하나만 골라 본문 조각 아래에 붙임(한 덱 안에서는 한 종류로 통일). 문장 1줄, 45자 이내. 값 바꾸는 법: 쓸 변형의 p 하나(.end-a / .end-b / .end-c)와 해당 CSS 만 가져감. .cap 줄은 견본 설명이므로 덱에 넣지 않음. A 는 base.css 의 .dk-say 보다 한 단계 큰 글자.

맺음 상자(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/) 참고. 장 아래에 결론 한 줄을 두는 kicker 방식 세 가지를 글자 중심으로 다시 그림. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-tend">
  <div class="v"><p class="cap">A. 화살표 한 줄 · 본문이 꽉 찬 장</p><p class="end-a"><i>→</i>검색 지면 정리가 끝나야 다른 매체의 효과가 새지 않음</p></div>
  <div class="v"><p class="cap">B. 윗선과 굵은 결론 · 표나 그래프 아래</p><p class="end-b"><span>결론</span>첫 달 과업은 광고 증액이 아닌 검색 첫 화면 점유 확대</p></div>
  <div class="v"><p class="cap">C. 옅은 바탕 띠 · 다음 장으로 넘길 때</p><p class="end-c"><b>그래서 예산 배분을 바꿈</b><span>다음 장: 매체별 배분안</span></p></div>
</div>

.dk-tend{display:flex;flex-direction:column;gap:40px}
.dk-tend .cap{margin:0 0 10px;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-tend p{margin:0}
.dk-tend .end-a{display:flex;align-items:baseline;gap:12px;font-size:var(--f-md);color:var(--ink2)}
.dk-tend .end-a i{font-style:normal;font-weight:700;color:var(--ac)}
.dk-tend .end-b{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:baseline;padding-top:16px;border-top:2px solid var(--ink);font-size:var(--f-xl);font-weight:700;letter-spacing:-.02em}
.dk-tend .end-b span{font-size:var(--f-sm);font-weight:600;color:var(--mu);letter-spacing:0}
.dk-tend .end-c{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px;border-radius:var(--r-sm);background:var(--acw)}
.dk-tend .end-c b{font-size:var(--f-md);font-weight:700;color:var(--ac2)}
.dk-tend .end-c span{font-size:var(--f-sm);color:var(--ink2)}