상태 라벨 세트(진행·확정·필수·수준)

표, 체크리스트, 일정표의 칸에 붙이는 글자 라벨. 진행 상태 4종, 확정 여부 2종, 필수 여부 2종, 수준 3종. 색이 아니라 채움·테두리·점선으로 구분하므로 흑백 출력에서도 읽힘. 한 표 안에서 한 묶음만 사용. 값 바꾸는 법: 진행 상태: <span class="t done|doing|plan|hold">. 확정 여부: t fix / t open. 필수 여부: t req / t opt. 수준: <span class="lv l3|l2|l1"><i></i><i></i><i></i>높음</span>. 강조색은 "진행" 하나에만 쓰임. 덱에 넣을 때는 .t 와 .lv 관련 CSS 만 가져감. 기호 그림이 필요하면 D-아이콘-상태기호 사용.

업무 관리 도구와 프로젝트 현황표의 상태 라벨 표기(채움, 테두리, 점선으로 단계를 나누는 방식)와 신호 세기 모양의 3단 수준 표시. 직접 제작.

<div class="dk dk-ics">
  <div class="set">
    <div class="row"><p>진행 상태</p><div><span class="t done">완료</span><span class="t doing">진행</span><span class="t plan">예정</span><span class="t hold">보류</span></div></div>
    <div class="row"><p>확정 여부</p><div><span class="t fix">확정</span><span class="t open">미확정</span></div></div>
    <div class="row"><p>필수 여부</p><div><span class="t req">필수</span><span class="t opt">선택</span></div></div>
    <div class="row"><p>수준</p><div><span class="lv l3"><i></i><i></i><i></i>높음</span><span class="lv l2"><i></i><i></i><i></i>중간</span><span class="lv l1"><i></i><i></i><i></i>낮음</span></div></div>
  </div>
  <div class="dk-card ex">
    <p class="dk-lb mu">표 안에서 쓰는 예</p>
    <table>
      <tr><th>과업</th><th>상태</th><th>구분</th><th>중요도</th></tr>
      <tr><td>전환 기준 합의</td><td><span class="t done">완료</span></td><td><span class="t req">필수</span></td><td><span class="lv l3"><i></i><i></i><i></i>높음</span></td></tr>
      <tr><td>소재 1차 제작</td><td><span class="t doing">진행</span></td><td><span class="t req">필수</span></td><td><span class="lv l3"><i></i><i></i><i></i>높음</span></td></tr>
      <tr><td>체험단 모집</td><td><span class="t plan">예정</span></td><td><span class="t opt">선택</span></td><td><span class="lv l2"><i></i><i></i><i></i>중간</span></td></tr>
      <tr><td>영상 소재 추가</td><td><span class="t hold">보류</span></td><td><span class="t opt">선택</span></td><td><span class="lv l1"><i></i><i></i><i></i>낮음</span></td></tr>
    </table>
  </div>
</div>

.dk-ics{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:center}
.dk-ics .t{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border:1px solid var(--line2);border-radius:999px;background:var(--card);font-size:var(--f-cap);font-weight:600;color:var(--ink2);white-space:nowrap}
.dk-ics .t.done{background:var(--ink);border-color:var(--ink);color:var(--card)}
.dk-ics .t.doing{background:var(--acw);border-color:var(--acm);color:var(--ac2)}
.dk-ics .t.hold{border-style:dashed;background:transparent;color:var(--mu)}
.dk-ics .t.fix::before,.dk-ics .t.open::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}
.dk-ics .t.open::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--g3)}
.dk-ics .t.open{color:var(--mu)}
.dk-ics .t.req,.dk-ics .t.opt{border-radius:4px;padding:0 8px}
.dk-ics .t.req{border-color:var(--ink);color:var(--ink)}
.dk-ics .t.opt{color:var(--mu)}
.dk-ics .lv{display:inline-flex;align-items:flex-end;gap:2px;font-size:var(--f-cap);font-weight:600;color:var(--ink2);line-height:1.1;white-space:nowrap}
.dk-ics .lv i{width:4px;border-radius:1px;background:var(--g1)}
.dk-ics .lv i:nth-child(1){height:6px}
.dk-ics .lv i:nth-child(2){height:10px}
.dk-ics .lv i:nth-child(3){height:14px;margin-right:6px}
.dk-ics .lv.l1 i:nth-child(1),.dk-ics .lv.l2 i:nth-child(-n+2),.dk-ics .lv.l3 i{background:var(--ink)}
.dk-ics .row{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;min-height:76px;border-bottom:1px solid var(--line)}
.dk-ics .row:first-child{border-top:1px solid var(--line2)}
.dk-ics .row:last-child{border-bottom-color:var(--line2)}
.dk-ics .row p{margin:0;font-size:var(--f-sm);font-weight:600;color:var(--mu)}
.dk-ics .row>div{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.dk-ics .ex{padding:24px 28px}
.dk-ics table{width:100%;margin-top:16px;border-collapse:collapse}
.dk-ics th{padding:0 0 8px;font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;border-bottom:1px solid var(--line2)}
.dk-ics td{padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--f-sm);color:var(--ink)}
.dk-ics tr:last-child td{border-bottom:0}