아이콘 4칸 격자와 세부 항목

대등한 항목 4개에 각 2~3개의 세부 항목이 붙을 때. 구매 여정 단계별 대응, 서비스 영역별 과업. 칸 4개 고정, 세부 항목 칸당 2~3개. 값 바꾸는 법: 카드마다 아이콘, 제목, 한 줄 설명, 세부 항목(li) 2~3개 교체. 강조 카드 하나에만 class="hot". 세부 항목 수는 카드끼리 맞출 것. 아이콘은 Lucide(ISC) 원문을 인라인으로 넣은 것. 다른 아이콘으로 바꿀 때는 D-아이콘-* 묶음에서 같은 viewBox 의 내용을 복사.

PresentationGO Icon Accent Cards(https://presentationgo.com/?p=153071). 번호·아이콘·문구를 같은 크기 카드 4장에 나란히 놓는 구성을 참고. 구성 방식만 참고, 코드와 그림은 직접 제작. 아이콘: Lucide v1.52.0(ISC, https://lucide.dev).

<div class="dk dk-grid42">
  <div class="dk-card 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"><circle cx="10" cy="7" r="4"/><path d="M10.3 15H7a4 4 0 0 0-4 4v2"/><circle cx="17" cy="17" r="3"/><path d="m21 21-1.9-1.9"/></svg><h3>탐색 단계</h3><p class="ds">필요를 느끼고 정보를 찾는 시점</p><ul><li>정보성 블로그 글</li><li>영상 광고 15초</li></ul></div>
  <div class="dk-card 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="M12 3v18"/><path d="m19 8 3 8a5 5 0 0 1-6 0zV7"/><path d="M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1"/><path d="m5 8 3 8a5 5 0 0 1-6 0zV7"/><path d="M7 21h10"/></svg><h3>비교 단계</h3><p class="ds">후보 두세 곳을 견주는 시점</p><ul><li>후기·평점 관리</li><li>비교 키워드 검색 광고</li></ul></div>
  <div class="dk-card 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"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/><path d="M6 14h2"/></svg><h3>구매 단계</h3><p class="ds">결제 직전 마지막 확인 시점</p><ul><li>브랜드 키워드 방어</li><li>첫 구매 쿠폰</li></ul></div>
  <div class="dk-card 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="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></svg><h3>재구매 단계</h3><p class="ds">첫 구매 뒤 14일에서 30일</p><ul><li>메시지 재방문 제안</li><li>후기 작성 요청</li></ul></div>
</div>

.dk-grid42{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dk-grid42 .c{padding:28px 24px 24px;display:flex;flex-direction:column}
.dk-grid42 .ic{width:40px;height:40px;color:var(--g4)}
.dk-grid42 h3{margin:20px 0 4px;font-size:var(--f-xl);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.dk-grid42 .ds{margin:0 0 20px;font-size:var(--f-sm);color:var(--mu);flex:1}
.dk-grid42 ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.dk-grid42 li{font-size:var(--f-body);color:var(--ink2);padding-left:14px;position:relative}
.dk-grid42 li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--line2)}
.dk-grid42 .hot .ic{color:var(--ac)}