4칸 격자(번호 · 제목 · 설명)

순서가 없는 네 가지 항목을 같은 크기로 묶어 보여줄 때. 서비스 범위, 운영 약속, 지원 항목. 4칸 고정, 칸마다 제목(8자 이내)과 설명 2줄. 칸은 가운데 십자 선으로만 나눈다. 값 바꾸는 법: .c 4칸(왼쪽 위, 오른쪽 위, 왼쪽 아래, 오른쪽 아래). .n=번호, h3=제목, p=설명. 강조할 한 칸에 class="hot"(번호만 색).

slideworks.io 컨설팅 장표 해설(https://slideworks.io/templates/consulting-powerpoint-templates): 고정 격자, 여백, 강조색을 핵심 한 곳에만 쓰는 방식. Slidesgo 4칸 인포그래픽(https://slidesgo.com/theme/roadmap-infographics)에서 상자를 걷어내고 십자 선만 남긴 방식. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-grid4">
  <div class="c"><span class="n num">01</span><div><h3>전담 인력</h3><p>AE 1인이 모든 매체의 연락 창구, 평일 2시간 안에 회신</p></div></div>
  <div class="c hot"><span class="n num">02</span><div><h3>주간 조정</h3><p>매주 금요일 묶음별 성과를 비교해 다음 주 예산 확정</p></div></div>
  <div class="c"><span class="n num">03</span><div><h3>증빙 리포트</h3><p>집행 화면과 링크를 건별로 첨부, 수치 출처 명시</p></div></div>
  <div class="c"><span class="n num">04</span><div><h3>심의 검수</h3><p>게시 전 표현 심의 항목 12개를 점검표로 확인</p></div></div>
</div>

.dk-grid4{display:grid;grid-template-columns:1fr 1fr}
.dk-grid4 .c{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:start;padding:34px 48px 34px 0;min-height:168px}
.dk-grid4 .c:nth-child(even){padding:34px 0 34px 48px;border-left:1px solid var(--line2)}
.dk-grid4 .c:nth-child(-n+2){border-bottom:1px solid var(--line2)}
.dk-grid4 .n{font-size:var(--f-num);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--g2)}
.dk-grid4 h3{font-size:var(--f-xl);font-weight:700;margin:0 0 6px;line-height:1.3}
.dk-grid4 p{margin:0;font-size:var(--f-md);color:var(--ink2)}
.dk-grid4 .hot .n{color:var(--ac)}