순환 고리 5단계와 설명 목록

끝나면 처음으로 돌아가는 반복 업무를 보여줄 때. 주간·월간 운영 주기, 개선 주기. 단계 5개 고정, 고리 옆 이름 6자 이내, 오른쪽 설명 1~2줄. 값 바꾸는 법: 고리 위 이름은 svg 의 text.lb, 가운데 글은 text.ct 와 text.cs, 오른쪽 목록은 li(번호·제목·설명·시기). 강조할 단계 하나: svg 의 해당 circle.nd 와 text.nt, 목록의 li 에 class="hot". 단계 수를 바꾸려면 다른 개수 조각 사용(점 좌표가 고정).

Slidesgo Cycle Diagrams(https://slidesgo.com/theme/cycle-diagrams). 고리에는 번호와 이름만 두고 설명은 옆 목록으로 빼는 방식. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-cycle5">
  <svg width="480" height="380" viewBox="0 0 480 380" aria-hidden="true"><circle class="ring" cx="240" cy="190" r="118"/><polygon class="ah" points="-5,-4.5 5,0 -5,4.5" transform="translate(309.4,94.5) rotate(36.0)"/><circle class="nd" cx="240.0" cy="72.0" r="20"/><text class="nt" x="240.0" y="77.0" text-anchor="middle">1</text><text class="lb" x="240.0" y="41.0" text-anchor="middle">수치 수집</text><polygon class="ah" points="-5,-4.5 5,0 -5,4.5" transform="translate(352.2,226.5) rotate(108.0)"/><circle class="nd" cx="352.2" cy="153.5" r="20"/><text class="nt" x="352.2" y="158.5" text-anchor="middle">2</text><text class="lb" x="384.6" y="147.4" text-anchor="start">원인 분석</text><polygon class="ah" points="-5,-4.5 5,0 -5,4.5" transform="translate(240.0,308.0) rotate(180.0)"/><circle class="nd" cx="309.4" cy="285.5" r="20"/><text class="nt" x="309.4" y="290.5" text-anchor="middle">3</text><text class="lb" x="329.3" y="319.6" text-anchor="start">조정안 작성</text><polygon class="ah" points="-5,-4.5 5,0 -5,4.5" transform="translate(127.8,226.5) rotate(252.0)"/><circle class="nd hot" cx="170.6" cy="285.5" r="20"/><text class="nt hot" x="170.6" y="290.5" text-anchor="middle">4</text><text class="lb" x="150.7" y="319.6" text-anchor="end">광고주 합의</text><polygon class="ah" points="-5,-4.5 5,0 -5,4.5" transform="translate(170.6,94.5) rotate(324.0)"/><circle class="nd" cx="127.8" cy="153.5" r="20"/><text class="nt" x="127.8" y="158.5" text-anchor="middle">5</text><text class="lb" x="95.4" y="147.4" text-anchor="end">적용</text><text class="ct" x="240" y="186" text-anchor="middle">월간 주기</text><text class="cs" x="240" y="210" text-anchor="middle">매월 반복</text></svg>
  <ol><li><span class="n num">1</span><div><h3>수치 수집</h3><p>매체별 수치를 한 기준으로 모음</p></div><span class="w">1일</span></li><li><span class="n num">2</span><div><h3>원인 분석</h3><p>오른 지표와 내린 지표의 이유를 구분</p></div><span class="w">2~3일</span></li><li><span class="n num">3</span><div><h3>조정안 작성</h3><p>다음 달 예산과 소재 변경안 정리</p></div><span class="w">4일</span></li><li class="hot"><span class="n num">4</span><div><h3>광고주 합의</h3><p>월간 회의에서 조정안 확정</p></div><span class="w">5일</span></li><li><span class="n num">5</span><div><h3>적용</h3><p>합의한 내용을 계정에 반영하고 기록</p></div><span class="w">6일 이후</span></li></ol>
</div>

.dk-cycle5{display:grid;grid-template-columns:480px minmax(0,1fr);gap:40px;align-items:center}
.dk-cycle5 svg{display:block}
.dk-cycle5 .ring{fill:none;stroke:var(--line2);stroke-width:1.5}
.dk-cycle5 .ah{fill:var(--g3)}
.dk-cycle5 .nd{fill:var(--card);stroke:var(--line2);stroke-width:1.5}
.dk-cycle5 .nd.hot{fill:var(--ac);stroke:var(--ac)}
.dk-cycle5 .nt{font-size:15px;font-weight:700;fill:var(--ink2)}
.dk-cycle5 .nt.hot{fill:var(--card)}
.dk-cycle5 .lb{font-size:15px;font-weight:600;fill:var(--ink)}
.dk-cycle5 .ct{font-size:20px;font-weight:700;fill:var(--ink)}
.dk-cycle5 .cs{font-size:14px;fill:var(--mu)}
.dk-cycle5 ol{list-style:none;margin:0;padding:0}
.dk-cycle5 li{display:grid;grid-template-columns:40px minmax(0,1fr) 96px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.dk-cycle5 li:last-child{border-bottom:0}
.dk-cycle5 .n{font-size:var(--f-lg);font-weight:700;color:var(--g2)}
.dk-cycle5 h3{font-size:var(--f-md);font-weight:700;margin:0;line-height:1.35}
.dk-cycle5 p{margin:0;font-size:var(--f-sm);color:var(--ink2)}
.dk-cycle5 .w{font-size:var(--f-sm);color:var(--mu);text-align:right}
.dk-cycle5 .hot .n,.dk-cycle5 .hot h3{color:var(--ac)}