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

끝나면 처음으로 돌아가는 반복 업무를 보여줄 때. 주간·월간 운영 주기, 개선 주기. 단계 4개 고정, 고리 옆 이름 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-cycle4">
  <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(323.4,106.6) rotate(45.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(323.4,273.4) rotate(135.0)"/><circle class="nd" cx="358.0" cy="190.0" r="20"/><text class="nt" x="358.0" y="195.0" text-anchor="middle">2</text><text class="lb" x="392.0" y="195.0" text-anchor="start">소재 시험</text><polygon class="ah" points="-5,-4.5 5,0 -5,4.5" transform="translate(156.6,273.4) rotate(225.0)"/><circle class="nd hot" cx="240.0" cy="308.0" r="20"/><text class="nt hot" x="240.0" y="313.0" text-anchor="middle">3</text><text class="lb" x="240.0" y="349.0" text-anchor="middle">결과 판독</text><polygon class="ah" points="-5,-4.5 5,0 -5,4.5" transform="translate(156.6,106.6) rotate(315.0)"/><circle class="nd" cx="122.0" cy="190.0" r="20"/><text class="nt" x="122.0" y="195.0" text-anchor="middle">4</text><text class="lb" x="88.0" y="195.0" 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">월요일</span></li><li><span class="n num">2</span><div><h3>소재 시험</h3><p>같은 조건에서 새 소재와 기존 소재를 나란히 집행</p></div><span class="w">화~목</span></li><li class="hot"><span class="n num">3</span><div><h3>결과 판독</h3><p>전환 단가와 표본 수를 함께 보고 채택 여부 결정</p></div><span class="w">금요일</span></li><li><span class="n num">4</span><div><h3>예산 반영</h3><p>채택한 묶음으로 예산을 옮기고 기록에 남김</p></div><span class="w">금요일</span></li></ol>
</div>

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