번호·단계 배지 세트

목록, 단계 도식, 주석에 붙이는 번호 표식. 원 번호, 네모 번호, STEP 라벨, 기·승·전·결 네 가지. 한 장에는 한 가지 모양만. 번호는 1~9(원), 01~12(네모). 값 바꾸는 법: 원 번호: <b class="c">1</b>, 지난 단계 on, 현재 hot. 네모 번호: <b class="s">01</b>. STEP 라벨: <span class="p">STEP<b>1</b></span>. 기승전결: <b class="k">기</b> 뒤에 낱말, 현재 대목에 hot. 덱에 넣을 때는 쓰는 모양의 CSS 만 가져감(.dk-icn 접두는 붙일 자리의 조각 이름으로 바꿈).

보고서와 설명서의 번호 표식(원 번호, 표 번호 칸, 단계 꼬리표)과 국내 기획서에서 쓰는 기·승·전·결 흐름 표시. 직접 제작.

<div class="dk dk-icn">
  <div class="row"><p>원 번호<span>주석, 짧은 목록</span></p><div><b class="c on">1</b><b class="c on">2</b><b class="c hot">3</b><b class="c">4</b><b class="c">5</b></div><em>채움=지난 단계, 강조=현재, 테두리=남은 단계</em></div>
  <div class="row"><p>네모 번호<span>표의 행, 긴 목록</span></p><div><b class="s on">01</b><b class="s">02</b><b class="s">03</b><b class="s">04</b><b class="s">05</b></div><em>두 자리 숫자, 표의 첫 칸에 맞춤</em></div>
  <div class="row"><p>STEP 라벨<span>단계 도식의 머리</span></p><div class="st"><span class="p">STEP<b>1</b></span><span class="p">STEP<b>2</b></span><span class="p">STEP<b>3</b></span><span class="p">STEP<b>4</b></span></div><em>단계 이름 위에 작게 올리는 꼬리표</em></div>
  <div class="row"><p>기·승·전·결<span>이야기 흐름 표시</span></p><div class="ks"><span><b class="k">기</b>배경</span><span><b class="k">승</b>과제</span><span><b class="k hot">전</b>해법</span><span><b class="k">결</b>기대 효과</span></div><em>지금 말하는 대목 하나만 강조</em></div>
</div>

.dk-icn .row{display:grid;grid-template-columns:200px minmax(0,1fr) 330px;align-items:center;min-height:88px;border-bottom:1px solid var(--line)}
.dk-icn .row:first-child{border-top:1px solid var(--line2)}
.dk-icn .row:last-child{border-bottom-color:var(--line2)}
.dk-icn .row p{margin:0;font-size:var(--f-md);font-weight:700}
.dk-icn .row p span{display:block;font-size:var(--f-cap);font-weight:400;color:var(--mu)}
.dk-icn .row>div{display:flex;align-items:center;gap:14px}
.dk-icn .row em{font-style:normal;font-size:var(--f-sm);color:var(--mu)}
.dk-icn .c{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--g2);font-size:var(--f-body);font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.dk-icn .c.on{background:var(--ink);border-color:var(--ink);color:var(--card)}
.dk-icn .c.hot{background:var(--ac);border-color:var(--ac);color:var(--card)}
.dk-icn .s{display:inline-flex;align-items:center;justify-content:center;width:40px;height:32px;border-radius:var(--r-sm);background:var(--soft);font-size:var(--f-sm);font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.dk-icn .s.on{background:var(--ink);color:var(--card)}
.dk-icn .st{gap:28px}
.dk-icn .p{display:inline-flex;align-items:baseline;gap:6px;padding-bottom:4px;border-bottom:2px solid var(--ink);font-size:var(--f-cap);font-weight:700;letter-spacing:.1em;color:var(--mu)}
.dk-icn .p b{font-size:var(--f-lg);letter-spacing:0;color:var(--ink)}
.dk-icn .ks{gap:0}
.dk-icn .ks span{display:inline-flex;align-items:center;gap:10px;font-size:var(--f-sm);color:var(--ink2)}
.dk-icn .ks span+span::before{content:"";width:28px;height:1px;margin:0 14px 0 4px;background:var(--line2)}
.dk-icn .k{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--card);font-size:var(--f-md);font-weight:700;color:var(--ink)}
.dk-icn .k.hot{background:var(--ac);border-color:var(--ac);color:var(--card)}