순환 고리 3단계

3단계가 한 방향으로 돌며 되돌아오는 순환 구조를 원 위의 세 점으로 보이고 오른쪽에 단계별 설명을 적는 도식. 탐색·방문·문의를 오가는 구매 여정, 세 매체가 서로 넘겨주는 구조에 사용. 단계 3개 고정(4·5개는 D-도식-순환고리4, 5), 단계마다 설명 2줄(약 40자). 강조 단계 1개. 값 바꾸는 법: 원 위 세 점의 이름(text.t)과 오른쪽 3행(이름 h3, 설명 p), 가운데 두 줄(text.c) 교체. 점 위치와 화살표는 고정 좌표라 단계 수는 바꾸지 않음. 강조 단계는 g.nd 와 li 양쪽에 class="hot". 이름은 4자 이내(원 지름 96px).

세 점이 도는 순환 표기는 SlideModel 의 3 step cycle diagram 템플릿 구성과 flywheel 도해 참고. 좌표 계산과 SVG 는 직접 제작.

<div class="dk dk-loop3">
<svg width="400" height="340" viewBox="0 0 400 340" role="img" aria-label="탐색, 방문, 문의가 도는 순환">
<circle class="ring" cx="200" cy="184" r="116"/>
<g class="ah"><path d="M-7 -6L6 0L-7 6" transform="translate(300.5 126) rotate(60)"/><path d="M-7 -6L6 0L-7 6" transform="translate(200 300) rotate(180)"/><path d="M-7 -6L6 0L-7 6" transform="translate(99.5 126) rotate(300)"/></g>
<g class="nd hot"><circle cx="200" cy="68" r="48"/><text x="200" y="64" text-anchor="middle" class="n">01</text><text x="200" y="86" text-anchor="middle" class="t">탐색</text></g>
<g class="nd"><circle cx="300.5" cy="242" r="48"/><text x="300.5" y="238" text-anchor="middle" class="n">02</text><text x="300.5" y="260" text-anchor="middle" class="t">방문</text></g>
<g class="nd"><circle cx="99.5" cy="242" r="48"/><text x="99.5" y="238" text-anchor="middle" class="n">03</text><text x="99.5" y="260" text-anchor="middle" class="t">문의</text></g>
<text x="200" y="182" text-anchor="middle" class="c">매물 비교가 반복되는</text><text x="200" y="202" text-anchor="middle" class="c">비선형 여정</text>
</svg>
<ol>
<li class="hot"><span class="n num">01</span><div><h3>탐색</h3><p>주거용은 지역을 넓게 훑는 조건 비교형 검색, 상업용은 업종·권리금·전용률로 좁혀진 검색</p></div></li>
<li><span class="n num">02</span><div><h3>방문</h3><p>이주 계기(통근 단축, 주거비 절감)와 입지 요소(교통, 학군, 가격) 확인</p></div></li>
<li><span class="n num">03</span><div><h3>문의</h3><p>조건이 맞지 않으면 다시 탐색으로. 맞으면 계약금·중도금·잔금 순 지불</p></div></li>
</ol>
</div>

.dk-loop3{display:grid;grid-template-columns:400px minmax(0,1fr);gap:52px;align-items:center}
.dk-loop3 svg{display:block}
.dk-loop3 .ring{fill:none;stroke:var(--g2);stroke-width:2}
.dk-loop3 .ah path{fill:none;stroke:var(--g4);stroke-width:2}
.dk-loop3 .nd circle{fill:var(--card);stroke:var(--g4);stroke-width:1.5}
.dk-loop3 .nd .n{font-size:12px;font-weight:600;fill:var(--mu)}
.dk-loop3 .nd .t{font-size:18px;font-weight:700;fill:var(--ink)}
.dk-loop3 .nd.hot circle{fill:var(--ac);stroke:var(--ac)}
.dk-loop3 .nd.hot .n,.dk-loop3 .nd.hot .t{fill:var(--card)}
.dk-loop3 .c{font-size:13px;fill:var(--mu)}
.dk-loop3 ol{list-style:none;margin:0;padding:0}
.dk-loop3 li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.dk-loop3 li:first-child{border-top:1px solid var(--line2)}
.dk-loop3 li .n{font-size:var(--f-lg);font-weight:700;color:var(--g2);line-height:1.3}
.dk-loop3 li.hot .n,.dk-loop3 li.hot h3{color:var(--ac)}
.dk-loop3 h3{margin:0 0 4px;font-size:var(--f-lg);font-weight:700;line-height:1.3}
.dk-loop3 li p{margin:0;font-size:var(--f-body);color:var(--ink2);line-height:1.5}