격자 8칸(4열 2행, 우선 2칸 강조)

유형·항목 8개를 4열 2행 카드로 놓고 칸마다 이름, 문제 1줄, 대응 1줄, 근거 1줄을 적는 도식. 8행 표를 카드로 풀어 우선 항목 2칸만 강조할 때 사용. 구매 장벽 8유형, 점검 영역 8개에 사용. 칸 8개 고정(6칸은 D-인포그래픽-아이콘6칸격자), 줄마다 약 18자, 강조 1~2칸. 값 바꾸는 법: 칸마다 이름(h3), 문제(p.q), 대응(p.a), 근거(p.ev) 교체. 우선 항목 1~2칸에 class="hot". 근거 줄이 없으면 p.ev 삭제. 예시의 근거 문구는 가상이므로 광고주 리뷰·검색어·이탈 데이터로 교체.

항목이 많은 목록을 같은 크기 카드 격자로 놓고 일부만 강조하는 방식은 McKinsey 공개 보고서의 lever 목록 장과 SlideModel 의 8 item grid 템플릿 구성 참고. 직접 제작.

<div class="dk dk-g8"><ol>
<li class="hot"><h3><span class="num">01</span>가격</h3><p class="q">값어치가 맞는지 판단이 안 섬</p><p class="a">원재료, 제작 방식 등 가치 설명</p><p class="ev"><b>근거</b>"비싼 이유를 모르겠다" 리뷰 반복</p></li>
<li><h3><span class="num">02</span>신뢰</h3><p class="q">판매자와 제품을 믿을 수 있는지</p><p class="a">사업자 정보, 인증, 실제 사용 후기</p><p class="ev"><b>근거</b>브랜드명 + 후기 검색 유입</p></li>
<li class="hot"><h3><span class="num">03</span>배송</h3><p class="q">언제 오고 배송비가 얼마인지</p><p class="a">배송비·기간을 상단 근처에 명시</p><p class="ev"><b>근거</b>장바구니 단계 이탈 집중</p></li>
<li><h3><span class="num">04</span>사이즈</h3><p class="q">크기·용량이 예상과 다를까</p><p class="a">실측 이미지, 사물과 비교한 사진</p><p class="ev"><b>근거</b>크기 문의 반복</p></li>
<li><h3><span class="num">05</span>품질</h3><p class="q">써 보면 기대만큼일지</p><p class="a">사용 전후 비교, 지속 시간 등 구체 수치</p><p class="ev"><b>근거</b>사용 기간을 묻는 문의</p></li>
<li><h3><span class="num">06</span>비교</h3><p class="q">다른 상품보다 나은 선택인지</p><p class="a">비방 없이 사실 기반 차별점</p><p class="ev"><b>근거</b>경쟁 상품명 동반 검색</p></li>
<li><h3><span class="num">07</span>긴급성</h3><p class="q">지금 사야 할 이유가 없음</p><p class="a">한정 수량, 시즌 안내(과장 없이)</p><p class="ev"><b>근거</b>재방문 뒤 미구매</p></li>
<li><h3><span class="num">08</span>사후 서비스</h3><p class="q">문제가 생기면 처리되는지</p><p class="a">교환·환불 절차를 짧은 문장으로</p><p class="ev"><b>근거</b>환불 문의 비중</p></li>
</ol></div>

.dk-g8 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dk-g8 li{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px 14px;display:flex;flex-direction:column;min-height:196px}
.dk-g8 h3{margin:0 0 8px;font-size:var(--f-lg);font-weight:700;line-height:1.3}
.dk-g8 h3 .num{font-size:var(--f-cap);font-weight:600;color:var(--mu);margin-right:8px}
.dk-g8 .q{margin:0;font-size:var(--f-sm);color:var(--mu);line-height:1.45}
.dk-g8 .a{margin:6px 0 0;font-size:var(--f-sm);font-weight:600;color:var(--ink);line-height:1.45}
.dk-g8 .ev{margin:auto 0 0;padding-top:8px;border-top:1px solid var(--line);font-size:var(--f-cap);color:var(--ink2);line-height:1.4}
.dk-g8 .ev b{font-weight:600;color:var(--mu);margin-right:8px}
.dk-g8 .hot{background:var(--acw);box-shadow:none}
.dk-g8 .hot h3,.dk-g8 .hot h3 .num{color:var(--ac)}
.dk-g8 .hot .ev{border-top-color:var(--acm)}