단계별 아이콘 흐름

착수부터 보고까지 순서가 있는 과정. 단계 4~5개. 단계마다 아이콘·이름·하는 일·시점. 현재 단계나 핵심 단계 하나만 강조. 값 바꾸는 법: 단계(.st)와 화살표(.ar)를 한 쌍으로 복사·삭제해 4~5단계. 아이콘, 순번, 이름, 설명 2줄 이내, 시점 칩 교체. 강조 단계 하나에만 class="st hot". 아이콘은 Lucide(ISC) 원문을 인라인으로 넣은 것. 다른 아이콘으로 바꿀 때는 D-아이콘-* 묶음에서 같은 viewBox 의 내용을 복사.

infoDiagram Flat Infographics Template(https://www.infodiagram.com/diagrams/infographics-template-ppt-presentation-flat), PresentationGO Icon Accent Cards(https://presentationgo.com/?p=153071). 원 안의 아이콘을 화살표로 잇고 설명을 아래에 두는 프로세스 구성을 참고. 구성 방식만 참고, 코드와 그림은 직접 제작. 아이콘: Lucide v1.52.0(ISC, https://lucide.dev).

<div class="dk dk-flow2">
  <div class="dk-card f">
    <div class="st"><span class="ib"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 11 2 2 4-4"/><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></span><p class="no">01</p><h3>진단</h3><p class="ds">계정·키워드·랜딩 현황 점검</p><span class="wk">1주차</span></div>
    <span class="ar"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span>
    <div class="st"><span class="ib"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg></span><p class="no">02</p><h3>목표 설정</h3><p class="ds">전환 정의와 측정 방식 합의</p><span class="wk">2주차</span></div>
    <span class="ar"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span>
    <div class="st"><span class="ib"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 21h8"/><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg></span><p class="no">03</p><h3>소재 제작</h3><p class="ds">검색 문안 12종, 배너 6종</p><span class="wk">3주차</span></div>
    <span class="ar"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span>
    <div class="st hot"><span class="ib"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"/><path d="M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"/></svg></span><p class="no">04</p><h3>집행</h3><p class="ds">예산 분할 투입, 일 단위 조정</p><span class="wk">4주차부터</span></div>
    <span class="ar"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span>
    <div class="st"><span class="ib"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M8 18v-1"/><path d="M12 18v-6"/><path d="M16 18v-3"/></svg></span><p class="no">05</p><h3>보고</h3><p class="ds">주간 요약과 월간 리포트</p><span class="wk">매주·매월</span></div>
  </div>
</div>

.dk-flow2 .f{display:flex;align-items:flex-start;padding:36px 28px 32px}
.dk-flow2 .st{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px}
.dk-flow2 .ib{width:84px;height:84px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.dk-flow2 .ib .ic{width:36px;height:36px}
.dk-flow2 .ar{flex:none;width:24px;margin-top:30px;color:var(--g2)}
.dk-flow2 .ar .ic{width:24px;height:24px;display:block}
.dk-flow2 .no{margin:18px 0 0;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-flow2 h3{margin:2px 0 8px;font-size:var(--f-lg);font-weight:700;line-height:1.3}
.dk-flow2 .ds{margin:0 0 16px;font-size:var(--f-sm);color:var(--ink2);min-height:44px}
.dk-flow2 .wk{font-size:var(--f-cap);font-weight:600;color:var(--ink2);background:var(--soft);border-radius:999px;padding:4px 12px}
.dk-flow2 .hot .ib{background:var(--ac);color:var(--card)}
.dk-flow2 .hot h3{color:var(--ac)}