허브와 가지(가운데 1, 주변 4)

하나의 중심(기준 데이터, 핵심 메시지, 전담 조직)에 여러 요소가 연결된 구조를 보여줄 때. 가운데 1개, 주변 4개 고정. 주변 항목은 제목 + 설명 2줄. 값 바꾸는 법: 가운데 글은 .core(작은 설명 + 핵심어 8자 이내). 주변 항목은 .it(왼쪽 묶음 2개, 오른쪽 묶음 2개). 강조색은 가운데에만. 주변 개수를 바꾸려면 다른 개수 조각 사용(선 좌표 고정).

Beautiful.ai Diagrams and Timeline Slides(https://support.beautiful.ai/hc/en-us/sections/40157152849805-Diagrams-and-Timeline-Slides): 허브와 가지 구성. SlideTeam hub and spoke 도식(https://www.slideteam.net/five-staged-hub-spoke-diagram-powerpoint-template-slide.html): 가지 끝에 상자 대신 글만 두는 방식으로 단순화. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-hub4">
  <svg width="1152" height="360" viewBox="0 0 1152 360" aria-hidden="true"><line x1="576" y1="180" x2="392" y2="90"/><circle cx="392" cy="90" r="3.5"/><line x1="576" y1="180" x2="760" y2="90"/><circle cx="760" cy="90" r="3.5"/><line x1="576" y1="180" x2="392" y2="270"/><circle cx="392" cy="270" r="3.5"/><line x1="576" y1="180" x2="760" y2="270"/><circle cx="760" cy="270" r="3.5"/></svg>
  <div class="side l"><div class="it"><h3>검색 광고</h3><p>전환이 난 검색어만 남기고 입찰가를 묶음별로 조정</p></div><div class="it"><h3>SNS 광고</h3><p>구매자와 닮은 대상을 찾는 기준값으로 사용</p></div></div>
  <div class="mid"><div class="core"><span>모든 매체의 기준</span><b>통합 전환 데이터</b></div></div>
  <div class="side"><div class="it"><h3>고객 메시지</h3><p>구매 주기에 맞춰 재구매 안내 시점 결정</p></div><div class="it"><h3>월간 리포트</h3><p>매체가 달라도 같은 정의의 전환 수치로 비교</p></div></div>
</div>

.dk-hub4{position:relative;height:360px;display:grid;grid-template-columns:392px 368px 392px}
.dk-hub4 svg{position:absolute;left:0;top:0}
.dk-hub4 line{stroke:var(--line2);stroke-width:1}
.dk-hub4 circle{fill:var(--g3)}
.dk-hub4 .side{position:relative;display:flex;flex-direction:column;justify-content:space-around;padding-left:0}
.dk-hub4 .it{height:120px;display:flex;flex-direction:column;justify-content:center;padding:0 0 0 20px}
.dk-hub4 .side.l .it{text-align:right;padding:0 20px 0 0}
.dk-hub4 h3{font-size:var(--f-lg);font-weight:700;margin:0 0 2px;line-height:1.35}
.dk-hub4 p{margin:0;font-size:var(--f-sm);color:var(--ink2)}
.dk-hub4 .mid{position:relative;display:flex;align-items:center;justify-content:center}
.dk-hub4 .core{width:184px;height:184px;border-radius:50%;background:var(--acw);box-shadow:0 0 0 10px var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dk-hub4 .core span{font-size:var(--f-cap);color:var(--mu)}
.dk-hub4 .core b{font-size:var(--f-xl);font-weight:700;color:var(--ac);line-height:1.3}