반폭 · 검색어 순위와 변동 화살표(5행)

검색어의 이번 달 순위와 지난달 대비 변동을 한 줄씩 보일 때. 4~6행, 검색어 10자 이내. 변동은 상승, 하락, 유지, 신규 네 가지. 가장 크게 오른 행 1개만 강조. 값 바꾸는 법: .r 하나가 한 검색어. .n=순위, .k=검색어, .d=변동(class: up=상승, dn=하락, eq=유지, nw=신규. 숫자는 오르내린 칸 수), .p=지난달 순위. 강조 행 하나에 class="hot". 4~6행.

직접 제작. 음원, 검색어 순위표의 변동 표기(삼각형과 칸 수) 방식 참고. 화살표는 CSS 로 그림.

<div class="dk dkh dkh-a-kwrank"><div class="dk-card"><p class="dk-lb">유입 검색어 순위 · 지난달 대비 변동</p>
<div class="ls"><div class="th"><span>순위</span><span>검색어</span><span>변동</span><span>지난달</span></div>
<div class="r"><span class="n">1</span><span class="k">무선 청소기 추천</span><span class="d eq"><i></i></span><span class="p">1위</span></div>
<div class="r hot"><span class="n">2</span><span class="k">원룸 청소기</span><span class="d up"><i></i>3</span><span class="p">5위</span></div>
<div class="r"><span class="n">3</span><span class="k">청소기 흡입력 비교</span><span class="d up"><i></i>1</span><span class="p">4위</span></div>
<div class="r"><span class="n">4</span><span class="k">브랜드 A 청소기</span><span class="d dn"><i></i>2</span><span class="p">2위</span></div>
<div class="r"><span class="n">5</span><span class="k">물걸레 겸용 청소기</span><span class="d nw"><i></i>신규</span><span class="p">순위 밖</span></div>
</div>
<p class="nt">월간 유입 클릭 수 기준 순위 · 예시 값</p></div></div>

.dkh-a-kwrank .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-a-kwrank .dk-lb{flex:none;margin:0 0 10px}
.dkh-a-kwrank .nt{flex:none;margin:8px 0 0;font-size:var(--f-cap);color:var(--mu);line-height:1.4}
.dkh-a-kwrank .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-a-kwrank .th,.dkh-a-kwrank .r{display:grid;grid-template-columns:26px 1fr 50px 50px;column-gap:12px;align-items:center}
.dkh-a-kwrank .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-kwrank .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-kwrank .th + .r{border-top:0}
.dkh-a-kwrank .n{font-size:var(--f-body);font-weight:700;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.dkh-a-kwrank .k{font-weight:600;color:var(--ink)}
.dkh-a-kwrank .d{display:flex;align-items:center;gap:5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dkh-a-kwrank .d i{display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--g4)}
.dkh-a-kwrank .d.dn{color:var(--mu)}
.dkh-a-kwrank .d.dn i{border-bottom:0;border-top:8px solid var(--g2)}
.dkh-a-kwrank .d.eq i{width:10px;height:2px;border:0;background:var(--g2)}
.dkh-a-kwrank .d.nw{font-size:var(--f-cap);color:var(--ink2)}
.dkh-a-kwrank .d.nw i{display:none}
.dkh-a-kwrank .r.hot .d{color:var(--ac)}
.dkh-a-kwrank .r.hot .d i{border-bottom-color:var(--ac)}
.dkh-a-kwrank .r.hot .n{color:var(--ac)}
.dkh-a-kwrank .p{font-size:var(--f-cap);color:var(--mu);white-space:nowrap}