반폭 · 조건별 판정 표(조건, 기준, 판정)

어떤 조건에서 무엇을 하는지 판정 규칙을 3~4행으로 놓을 때. 조건 12자 이내, 기준 12자 이내, 판정 5자 이내. 가장 무거운 판정 1개만 강조. 값 바꾸는 법: .r 하나가 한 규칙. .k=조건, 가운데 span=기준, .p 안의 i=판정. 강조할 판정 하나의 행에 class="hot". 3~4행.

직접 제작. 운영 규칙을 조건, 기준, 조치로 나누는 의사결정 표(decision table) 방식 참고. 판정만 알약 모양으로 구분.

<div class="dk dkh dkh-t-judge"><div class="dk-card"><p class="dk-lb">매체 예산 조정 기준</p><div class="tb"><div class="hr"><span>조건</span><span>기준</span><span>판정</span></div>
<div class="r"><span class="k">전환당 비용 목표 이내</span><span>2주 연속 유지</span><span class="p"><i>증액</i></span></div>
<div class="r"><span class="k">전환당 비용 목표 초과</span><span>초과 폭 20% 이내</span><span class="p"><i>유지</i></span></div>
<div class="r"><span class="k">클릭률 하락</span><span>기준 대비 30% 이상</span><span class="p"><i>소재 교체</i></span></div>
<div class="r hot"><span class="k">전환 미발생</span><span>3주 누적 0건</span><span class="p"><i>중단</i></span></div>
</div></div></div>

.dkh-t-judge .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-judge .dk-lb{margin:0 0 10px}
.dkh-t-judge .tb{flex:1;min-height:0;display:flex;flex-direction:column;font-size:var(--f-sm);line-height:1.5}
.dkh-t-judge .hr,.dkh-t-judge .r{display:grid;grid-template-columns:1.1fr 1fr 80px;column-gap:12px;align-items:center}
.dkh-t-judge .hr{flex:none;font-size:var(--f-cap);color:var(--mu);padding:0 0 8px;border-bottom:1px solid var(--line2)}
.dkh-t-judge .r{flex:1;padding:8px 0;border-top:1px solid var(--line);color:var(--ink2)}
.dkh-t-judge .hr + .r{border-top:0}
.dkh-t-judge .r .k{font-weight:600;color:var(--ink)}
.dkh-t-judge .r .p i{display:inline-block;font-style:normal;font-size:var(--f-cap);font-weight:600;color:var(--ink2);border:1px solid var(--line2);border-radius:12px;padding:1px 10px;white-space:nowrap}
.dkh-t-judge .r.hot .p i{background:var(--ac);border-color:var(--ac);color:var(--card)}