선순환 루프(가운데 핵심어, 주변 4단계)

하나의 핵심 자산이 돌수록 커지는 구조를 설명할 때. 후기, 데이터, 콘텐츠 축적 논리. 가운데 핵심어 1개(6자 이내), 주변 단계 4개 고정, 단계 설명 2줄. 값 바꾸는 법: 가운데 글은 svg 의 text.ct(핵심어)와 text.cs. 주변 글은 .it(왼쪽 위 1 → 오른쪽 위 2 → 오른쪽 아래 3 → 왼쪽 아래 4, 시계 방향). 강조색은 가운데 핵심어에만.

Slidesgo Cycle Diagrams(https://slidesgo.com/theme/cycle-diagrams). 컨설팅 보고서의 flywheel(선순환) 도식: 가운데 핵심 자산, 둘레에 단계. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-loop">
  <div class="side l"><div class="it"><span class="n num">1</span><h3>후기 수집</h3><p>구매 7일 뒤 요청 메시지 발송, 사진 후기 우대</p></div><div class="it"><span class="n num">4</span><h3>구매 증가</h3><p>구매가 늘면 후기 모수가 커져 다시 1번으로 연결</p></div></div>
  <svg width="380" height="380" viewBox="0 0 380 380" aria-hidden="true"><circle class="ring" cx="190" cy="190" r="140"/><polygon class="ah" points="-5,-4.5 5,0 -5,4.5" transform="translate(190.0,50.0) rotate(0)"/><polygon class="ah" points="-5,-4.5 5,0 -5,4.5" transform="translate(330.0,190.0) rotate(90)"/><polygon class="ah" points="-5,-4.5 5,0 -5,4.5" transform="translate(190.0,330.0) rotate(180)"/><polygon class="ah" points="-5,-4.5 5,0 -5,4.5" transform="translate(50.0,190.0) rotate(270)"/><circle class="nd" cx="91.0" cy="91.0" r="17"/><text class="nt" x="91.0" y="96.0" text-anchor="middle">1</text><circle class="nd" cx="289.0" cy="91.0" r="17"/><text class="nt" x="289.0" y="96.0" text-anchor="middle">2</text><circle class="nd" cx="289.0" cy="289.0" r="17"/><text class="nt" x="289.0" y="294.0" text-anchor="middle">3</text><circle class="nd" cx="91.0" cy="289.0" r="17"/><text class="nt" x="91.0" y="294.0" text-anchor="middle">4</text><circle class="core" cx="190" cy="190" r="74"/><text class="ct" x="190" y="188" text-anchor="middle">구매 후기</text><text class="cs" x="190" y="212" text-anchor="middle">선순환의 중심</text></svg>
  <div class="side"><div class="it"><span class="n num">2</span><h3>소재 활용</h3><p>반응 좋은 후기 문장을 광고 문구와 상세페이지에 반영</p></div><div class="it"><span class="n num">3</span><h3>전환 상승</h3><p>후기 기반 소재의 클릭 후 구매 비율이 일반 소재보다 높음</p></div></div>
</div>

.dk-loop{display:grid;grid-template-columns:minmax(0,1fr) 380px minmax(0,1fr);gap:28px;align-items:stretch}
.dk-loop svg{display:block}
.dk-loop .ring{fill:none;stroke:var(--line2);stroke-width:1.5}
.dk-loop .ah{fill:var(--g3)}
.dk-loop .nd{fill:var(--card);stroke:var(--line2);stroke-width:1.5}
.dk-loop .nt{font-size:14px;font-weight:700;fill:var(--ink2)}
.dk-loop .core{fill:var(--acw)}
.dk-loop .ct{font-size:22px;font-weight:700;fill:var(--ac)}
.dk-loop .cs{font-size:13px;fill:var(--mu)}
.dk-loop .side{display:flex;flex-direction:column;justify-content:space-between;padding:34px 0}
.dk-loop .side.l{text-align:right}
.dk-loop .n{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-loop h3{font-size:var(--f-lg);font-weight:700;margin:0 0 4px;line-height:1.35}
.dk-loop p{margin:0;font-size:var(--f-body);color:var(--ink2)}