반폭 · 체크 목록(4~6개, 상태 표시)

준비 사항이나 선행 조건의 완료 여부를 4~6개로 보일 때. 항목 20자 이내, 상태 4자 이내. 진행 중인 항목 1개만 강조. 값 바꾸는 법: .r 하나가 한 항목. 완료는 class="on"(상자 채움), 진행 중은 class="now"(강조, 1개만), 예정은 class 없음. .t=항목, .s=상태 문구. 4~6개.

직접 제작. 프로젝트 착수 점검표(readiness checklist) 방식 참고. 체크 표시는 CSS 로 그림.

<div class="dk dkh dkh-t-chk"><div class="dk-card"><p class="dk-lb">착수 전 준비 현황</p><div class="ls">
<div class="r on"><span class="bx"></span><span class="t">광고 계정 접근 권한 수령</span><span class="s">완료</span></div>
<div class="r on"><span class="bx"></span><span class="t">전환 측정 태그 설치</span><span class="s">완료</span></div>
<div class="r on"><span class="bx"></span><span class="t">최근 12개월 성과 자료 수령</span><span class="s">완료</span></div>
<div class="r now"><span class="bx"></span><span class="t">소재 가이드와 금지 표현 목록 확인</span><span class="s">진행 중</span></div>
<div class="r"><span class="bx"></span><span class="t">월간 보고 양식 합의</span><span class="s">예정</span></div>
</div></div></div>

.dkh-t-chk .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-chk .dk-lb{margin:0 0 10px}
.dkh-t-chk .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-chk .r{flex:1;display:grid;grid-template-columns:16px 1fr auto;column-gap:12px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:var(--f-sm);line-height:1.5}
.dkh-t-chk .r:first-child{border-top-color:var(--line2)}
.dkh-t-chk .bx{position:relative;width:16px;height:16px;border:1px solid var(--g2);border-radius:4px;background:var(--card)}
.dkh-t-chk .r.on .bx{background:var(--g4);border-color:var(--g4)}
.dkh-t-chk .r.on .bx::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid var(--card);border-width:0 2px 2px 0;transform:rotate(45deg)}
.dkh-t-chk .t{color:var(--ink)}
.dkh-t-chk .r.on .t{color:var(--ink2)}
.dkh-t-chk .r.now .t{font-weight:600}
.dkh-t-chk .s{font-size:var(--f-cap);color:var(--mu);white-space:nowrap}
.dkh-t-chk .r.now .s{color:var(--ac);font-weight:600}
.dkh-t-chk .r.now .bx{border-color:var(--ac)}