아이콘 6칸 격자

운영 채널, 제공 서비스, 점검 항목처럼 대등한 항목 5~6개를 한눈에. 6칸(3열 2행) 기준, 5개면 마지막 칸을 비우지 말고 요약 문구 칸으로 사용. 값 바꾸는 법: 칸(.c)마다 아이콘, 제목, 설명 1~2줄 교체. 아이콘 크기는 전 칸 동일. 중심 항목 하나에만 class="c hot". 아이콘은 Lucide(ISC) 원문을 인라인으로 넣은 것. 다른 아이콘으로 바꿀 때는 D-아이콘-* 묶음에서 같은 viewBox 의 내용을 복사.

infoDiagram Flat Infographics Template(https://www.infodiagram.com/diagrams/infographics-template-ppt-presentation-flat). 카드를 따로 띄우지 않고 한 판 안에서 가는 선으로 칸을 나누는 아이콘 격자 구성을 참고. 구성 방식만 참고, 코드와 그림은 직접 제작. 아이콘: Lucide v1.52.0(ISC, https://lucide.dev).

<div class="dk dk-grid6">
  <div class="dk-card g">
    <div class="c hot"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg><div><h3>검색 광고</h3><p>구매 직전 수요 확보. 키워드 420개 운영</p></div></div>
    <div class="c"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"/><path d="M3.103 6.034h17.794"/><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/></svg><div><h3>쇼핑 검색</h3><p>상품명·속성 정비와 리뷰 수 관리</p></div></div>
    <div class="c"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg><div><h3>플레이스</h3><p>매장 정보 최신화, 예약·전화 연결</p></div></div>
    <div class="c"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"/><circle cx="12" cy="12" r="10"/></svg><div><h3>영상</h3><p>15초 소재로 인지 확대. 월 3종 교체</p></div></div>
    <div class="c"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/></svg><div><h3>메시지</h3><p>기존 고객 재방문 유도. 월 2회 발송</p></div></div>
    <div class="c"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg><div><h3>블로그</h3><p>검색 유입용 정보 글 주 2편 발행</p></div></div>
  </div>
</div>

.dk-grid6 .g{padding:6px 12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.dk-grid6 .c{display:flex;gap:18px;align-items:flex-start;padding:34px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.dk-grid6 .c:nth-child(3n){border-right:0}
.dk-grid6 .c:nth-child(n+4){border-bottom:0}
.dk-grid6 .ic{width:36px;height:36px;flex:none;color:var(--g4);margin-top:2px}
.dk-grid6 h3{margin:0 0 6px;font-size:var(--f-lg);font-weight:700;line-height:1.3}
.dk-grid6 p{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-grid6 .hot .ic{color:var(--ac)}