걸러내기(후보 → 제외 → 최종)

많은 후보에서 기준을 적용해 최종 대상을 추린 과정을 보여줄 때. 인플루언서 선정, 검색어 선별, 매체 선정. 단계 3개(후보·검토·최종), 단계 사이 제외 사유 2~3개씩. 값 바꾸는 법: .k=수와 단계 이름, .bar 의 width=그 수 ÷ 첫 단계 수 × 100%, .d=설명. .cut=단계 사이 제외 수와 사유. 최종 단계의 .k 와 .bar 에 class="hot".

SlideModel Innovation Process Funnel(https://slidemodel.com/templates/innovation-process-funnel-diagram-powerpoint-template/). Financial Times Visual Vocabulary 의 크기 비교 막대 방식(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)을 깔때기에 적용. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-filter">
  <div class="k"><b class="num">240</b>후보</div><div class="bar" style="width:100%"></div><p class="d">카테고리 검색과 기존 협업 목록에서 수집</p>
  <div class="cut"><span>제외 168</span>최근 3개월 게시 10건 미만, 팔로워 대비 반응률 1% 미만, 경쟁 브랜드 협업 중</div>
  <div class="k"><b class="num">72</b>검토</div><div class="bar" style="width:30%"></div><p class="d">게시물 표본 20건씩 직접 확인</p>
  <div class="cut"><span>제외 60</span>광고 표기 누락 이력, 댓글 품질 낮음, 타깃 연령대 불일치</div>
  <div class="k hot"><b class="num">12</b>최종</div><div class="bar hot" style="width:5%"></div><p class="d">섭외 진행, 예비 4명 별도 확보</p>
</div>

.dk-filter{display:grid;grid-template-columns:150px minmax(0,1fr) 300px;column-gap:28px;align-items:center}
.dk-filter .k{font-size:var(--f-body);color:var(--mu);display:flex;align-items:baseline;gap:10px;height:66px}
.dk-filter .k b{font-size:var(--f-num);font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:66px;min-width:86px}
.dk-filter .k.hot b{color:var(--ac)}
.dk-filter .bar{height:36px;background:var(--g1);border-radius:3px;min-width:8px}
.dk-filter .bar.hot{background:var(--ac)}
.dk-filter .d{margin:0;font-size:var(--f-sm);color:var(--ink2)}
.dk-filter .cut{grid-column:2/4;font-size:var(--f-sm);color:var(--mu);padding:9px 0 9px 22px;margin:2px 0 2px 16px;border-left:1px solid var(--line2);position:relative}
.dk-filter .cut::after{content:"";position:absolute;left:-4px;bottom:0;width:7px;height:7px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);transform:rotate(45deg)}
.dk-filter .cut span{font-weight:600;color:var(--ink2);margin-right:12px}