등급 띠 5단계와 등급별 조치

5단계 등급을 낮음에서 높음 순 가로 띠로 놓고 등급마다 조치와 판단 기준을 적는 도식. 자산 성능 등급, 계정 성숙도 5단계, 위험 등급별 대응에 사용. 등급 5개 고정, 등급마다 조치 이름 + 설명 2줄(약 30자). 조치가 필요한 등급 1개만 강조. 값 바꾸는 법: 등급 이름(div.b), 조치(h3), 설명(p) 교체. 띠 색은 li 의 class: g0(가장 옅음), g1, g3, g4(가장 짙음), 강조는 hot. 강조 등급의 위치가 바뀌면 hot 을 옮기고 원래 자리에 g1~g3 중 하나를 넣어 명도 순서를 유지.

등급을 명도 단계로 칠한 가로 띠는 Financial Times Visual Vocabulary 의 순서형 색 사용 원칙 https://ft-interactive.github.io/visual-vocabulary/ 과 구글 Ads 자산 성능 등급 표기(대기 중, 학습 중, 낮음, 양호, 최우수) 참고. 직접 제작.

<div class="dk dk-grade5">
<ol>
<li class="g0"><div class="b"><span class="num">1</span>대기 중</div><h3>판단 보류</h3><p>노출 데이터가 쌓이기 전. 등급이 표시될 때까지 유지</p></li>
<li class="g1"><div class="b"><span class="num">2</span>학습 중</div><h3>판단 보류</h3><p>최근 14일 누적 관찰 후 판단</p></li>
<li class="hot"><div class="b"><span class="num">3</span>낮음</div><h3>새 자산 추가</h3><p>삭제보다 추가가 우선. 대체 자산을 둔 뒤 교체</p></li>
<li class="g3"><div class="b"><span class="num">4</span>양호</div><h3>유지</h3><p>같은 캠페인 안의 상대 평가. 교체 대상 아님</p></li>
<li class="g4"><div class="b"><span class="num">5</span>최우수</div><h3>유지</h3><p>같은 소구를 다른 비율·길이로 넓혀 수량 확보</p></li>
</ol>
<p class="dk-say">등급은 같은 캠페인 안의 상대 평가, 비교 기간은 최근 14일</p>
</div>

.dk-grade5{display:flex;flex-direction:column;gap:30px}
.dk-grade5 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.dk-grade5 li{padding:0 20px 0 0}
.dk-grade5 .b{margin-right:-20px;height:84px;display:flex;align-items:center;gap:10px;padding:0 22px;font-size:var(--f-xl);font-weight:700;color:var(--ink)}
.dk-grade5 li:first-child .b{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.dk-grade5 li:last-child .b{border-radius:0 var(--r-sm) var(--r-sm) 0}
.dk-grade5 .b .num{font-size:var(--f-sm);font-weight:600;opacity:.7}
.dk-grade5 .g0 .b{background:var(--soft);color:var(--mu)}
.dk-grade5 .g1 .b{background:var(--g1)}
.dk-grade5 .hot .b{background:var(--ac);color:var(--card)}
.dk-grade5 .g3 .b{background:var(--g3);color:var(--card)}
.dk-grade5 .g4 .b{background:var(--g4);color:var(--card)}
.dk-grade5 h3{margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--line2);font-size:var(--f-xl);font-weight:700;line-height:1.3}
.dk-grade5 .hot h3{color:var(--ac);border-top-color:var(--ac)}
.dk-grade5 li p{margin:0;font-size:var(--f-body);color:var(--ink2);line-height:1.5}