반폭 · 검색 결과 지면 점유(지면 × 5자리)

대표 검색어 하나를 검색했을 때 지면별 상위 5자리를 자사와 경쟁사가 얼마나 차지하는지 절반 칸에. 지면 4~5행, 자리 5칸 고정. 지면 이름 5자 이내. 지면 6개 이상이거나 자리 10칸이 필요하면 전폭 D-그래프-검색지면점유띠 사용. 값 바꾸는 법: .r 하나가 한 지면. .cells 안의 i 5개가 1~5번째 자리(왼쪽이 위). 자사 자리는 class="me", 경쟁사 자리는 class="co", 그 외는 class 없음. 오른쪽 .v 는 자사 자리 수. 자사가 0이면 행에 class="zero". 지면 4~5행.

직접 제작. 검색 결과 화면 점유(share of search results page) 점검표의 칸 채우기 방식 참고. 자사 칸만 강조색.

<div class="dk dkh dkh-a-serp"><div class="dk-card"><p class="dk-lb">「원룸 청소기 추천」 검색 결과 1쪽 점유</p>
<div class="ls"><div class="th"><span>지면</span><span class="cells"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></span><span class="v">자사</span></div>
<div class="r"><span class="k">파워링크</span><span class="cells"><i class="me"></i><i class="co"></i><i class="me"></i><i></i><i></i></span><span class="v">2<small>/5</small></span></div>
<div class="r"><span class="k">쇼핑 검색</span><span class="cells"><i class="co"></i><i class="me"></i><i></i><i class="me"></i><i></i></span><span class="v">2<small>/5</small></span></div>
<div class="r zero"><span class="k">블로그</span><span class="cells"><i class="co"></i><i class="co"></i><i></i><i></i><i></i></span><span class="v">0<small>/5</small></span></div>
<div class="r zero"><span class="k">숏폼 영상</span><span class="cells"><i class="co"></i><i></i><i></i><i></i><i></i></span><span class="v">0<small>/5</small></span></div>
<div class="r"><span class="k">지식 답변</span><span class="cells"><i></i><i class="me"></i><i></i><i></i><i></i></span><span class="v">1<small>/5</small></span></div>
</div>
<div class="lg"><span><i class="me"></i>자사</span><span><i class="co"></i>경쟁 3사</span><span><i></i>그 외</span><span class="ex">조사일 기재 · 예시 값</span></div>
</div></div>

.dkh-a-serp .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-a-serp .dk-lb{flex:none;margin:0 0 10px}
.dkh-a-serp .nt{flex:none;margin:8px 0 0;font-size:var(--f-cap);color:var(--mu);line-height:1.4}
.dkh-a-serp .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-a-serp .th,.dkh-a-serp .r{display:grid;grid-template-columns:70px 1fr 40px;column-gap:12px;align-items:center}
.dkh-a-serp .th{flex:none;font-size:var(--f-cap);color:var(--mu);padding:0 0 7px;border-bottom:1px solid var(--line2);line-height:1.4}
.dkh-a-serp .r{flex:1;padding:5px 0;border-top:1px solid var(--line);font-size:var(--f-sm);line-height:1.45;color:var(--ink2)}
.dkh-a-serp .th + .r{border-top:0}
.dkh-a-serp .cells{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.dkh-a-serp .th .cells span{text-align:center}
.dkh-a-serp .cells i{display:block;height:18px;border-radius:4px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.dkh-a-serp .cells i.co{background:var(--g2);box-shadow:none}
.dkh-a-serp .cells i.me{background:var(--ac);box-shadow:none}
.dkh-a-serp .k{font-weight:600;color:var(--ink);white-space:nowrap}
.dkh-a-serp .v{text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dkh-a-serp .th .v{font-weight:400;color:var(--mu)}
.dkh-a-serp .v small{font-size:var(--f-cap);font-weight:400;color:var(--mu)}
.dkh-a-serp .r.zero .v{color:var(--mu)}
.dkh-a-serp .lg{flex:none;display:flex;flex-wrap:wrap;gap:4px 16px;margin:10px 0 0;font-size:var(--f-cap);color:var(--ink2);line-height:1.4}
.dkh-a-serp .lg span{display:flex;align-items:center;gap:6px}
.dkh-a-serp .lg i{display:block;width:12px;height:12px;border-radius:3px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.dkh-a-serp .lg i.co{background:var(--g2);box-shadow:none}
.dkh-a-serp .lg i.me{background:var(--ac);box-shadow:none}
.dkh-a-serp .lg .ex{margin-left:auto;color:var(--mu)}