등급 격자(키워드 × 요소 3단 등급)

키워드·검색어 8~10개를 요소 3개의 3단 등급으로 칠한 진단 격자와, 오른쪽에 요소별 조치 3행. 품질평가점수 3요소 진단, 검색어 × 노출 영역 순위 격자에 사용. 행 8~10개, 열 3개, 등급 3단(가장 낮은 등급만 강조색). 오른쪽 조치 3행. 값 바꾸는 법: 칸마다 span 의 class 를 hi(평균 이상) / mid(평균) / lo(평균 이하)로 바꾸고 문구 교체. 순위 격자로 쓸 때는 span 안에 순위 숫자를 적고 등급 class 로 색만 지정. 행 8~10개(행 높이 약 35px). 오른쪽 조치는 요소 3개 고정.

등급을 칸 색으로 보이는 격자는 Financial Times Visual Vocabulary 의 heatmap 항목 https://ft-interactive.github.io/visual-vocabulary/ 과 구글 Ads 품질평가점수 열 표시(평균 이상·평균·평균 이하) 참고. 가장 낮은 등급 하나만 강조색으로 두는 처리는 Storytelling with Data 의 강조 원칙. 직접 제작.

<div class="dk dk-gradegrid">
<div class="dk-card g"><table>
<colgroup><col><col style="width:128px"><col style="width:128px"><col style="width:128px"></colgroup>
<thead><tr><th>핵심 키워드</th><th class="c">예상 클릭률</th><th class="c">광고 관련성</th><th class="c">랜딩 경험</th></tr></thead>
<tbody>
<tr><td class="k">아파트 인테리어</td><td class="c"><span class="hi">평균 이상</span></td><td class="c"><span class="hi">평균 이상</span></td><td class="c"><span class="mid">평균</span></td></tr>
<tr><td class="k">욕실 리모델링</td><td class="c"><span class="mid">평균</span></td><td class="c"><span class="hi">평균 이상</span></td><td class="c"><span class="lo">평균 이하</span></td></tr>
<tr><td class="k">주방 리모델링 비용</td><td class="c"><span class="lo">평균 이하</span></td><td class="c"><span class="mid">평균</span></td><td class="c"><span class="lo">평균 이하</span></td></tr>
<tr><td class="k">인테리어 견적</td><td class="c"><span class="hi">평균 이상</span></td><td class="c"><span class="mid">평균</span></td><td class="c"><span class="mid">평균</span></td></tr>
<tr><td class="k">30평 인테리어</td><td class="c"><span class="mid">평균</span></td><td class="c"><span class="mid">평균</span></td><td class="c"><span class="hi">평균 이상</span></td></tr>
<tr><td class="k">부분 인테리어</td><td class="c"><span class="lo">평균 이하</span></td><td class="c"><span class="lo">평균 이하</span></td><td class="c"><span class="mid">평균</span></td></tr>
<tr><td class="k">인테리어 업체 추천</td><td class="c"><span class="mid">평균</span></td><td class="c"><span class="hi">평균 이상</span></td><td class="c"><span class="hi">평균 이상</span></td></tr>
<tr><td class="k">올수리 기간</td><td class="c"><span class="hi">평균 이상</span></td><td class="c"><span class="mid">평균</span></td><td class="c"><span class="lo">평균 이하</span></td></tr>
<tr><td class="k">샷시 교체</td><td class="c"><span class="mid">평균</span></td><td class="c"><span class="lo">평균 이하</span></td><td class="c"><span class="mid">평균</span></td></tr>
<tr><td class="k">신혼집 인테리어</td><td class="c"><span class="hi">평균 이상</span></td><td class="c"><span class="hi">평균 이상</span></td><td class="c"><span class="hi">평균 이상</span></td></tr>
</tbody></table></div>
<div class="r">
<p class="dk-lb">'평균 이하'일 때 조치</p>
<dl>
<div><dt>예상 클릭률</dt><dd>제목을 검색 의도에 가깝게 재작성</dd></div>
<div><dt>광고 관련성</dt><dd>키워드 의도와 문구의 정합 재점검</dd></div>
<div><dt>랜딩 페이지 경험</dt><dd>상담 신청 페이지 첫 화면 문구와 구성 개선</dd></div>
</dl>
<p class="lg"><span class="lo">평균 이하</span><span class="mid">평균</span><span class="hi">평균 이상</span></p>
</div>
</div>

.dk-gradegrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px;align-items:center}
.dk-gradegrid .dk-card{padding:16px 22px 10px}
.dk-gradegrid table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-gradegrid th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:0 6px 8px;border-bottom:1px solid var(--line2)}
.dk-gradegrid .c{text-align:center}
.dk-gradegrid td{padding:3px 6px;font-size:var(--f-body);color:var(--ink);line-height:1.3;border-bottom:1px solid var(--line)}
.dk-gradegrid tbody tr:last-child td{border-bottom:0}
.dk-gradegrid td.k{font-weight:500}
.dk-gradegrid td span{display:block;font-size:var(--f-cap);line-height:28px;border-radius:var(--r-sm)}
.dk-gradegrid .hi{background:var(--soft);color:var(--mu)}
.dk-gradegrid .mid{background:var(--g1);color:var(--ink2)}
.dk-gradegrid .lo{background:var(--ac);color:var(--card);font-weight:600}
.dk-gradegrid .r dl{margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.dk-gradegrid .r dl div{padding:14px 0;border-top:1px solid var(--line)}
.dk-gradegrid .r dl div:last-child{border-bottom:1px solid var(--line)}
.dk-gradegrid dt{font-size:var(--f-md);font-weight:700;color:var(--ink)}
.dk-gradegrid dd{margin:2px 0 0;font-size:var(--f-body);color:var(--ink2)}
.dk-gradegrid .lg{margin:18px 0 0;display:flex;gap:8px}
.dk-gradegrid .lg span{font-size:var(--f-cap);padding:3px 12px;border-radius:var(--r-sm)}