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

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

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-hub6">
  <svg width="1152" height="360" viewBox="0 0 1152 360" aria-hidden="true"><line x1="576" y1="180" x2="392" y2="60"/><circle cx="392" cy="60" r="3.5"/><line x1="576" y1="180" x2="760" y2="60"/><circle cx="760" cy="60" r="3.5"/><line x1="576" y1="180" x2="392" y2="180"/><circle cx="392" cy="180" r="3.5"/><line x1="576" y1="180" x2="760" y2="180"/><circle cx="760" cy="180" r="3.5"/><line x1="576" y1="180" x2="392" y2="300"/><circle cx="392" cy="300" r="3.5"/><line x1="576" y1="180" x2="760" y2="300"/><circle cx="760" cy="300" 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 class="it"><h3>콘텐츠 제작</h3><p>영상, 이미지, 상세페이지 제작</p></div></div>
  <div class="mid"><div class="core"><span>운영의 중심</span><b>전담 AE 1인</b></div></div>
  <div class="side"><div class="it"><h3>인플루언서</h3><p>섭외, 가이드, 원고 검수</p></div><div class="it"><h3>데이터 분석</h3><p>전환 추적과 기여도 분석</p></div><div class="it"><h3>리포트</h3><p>주간 요약과 월간 종합 보고</p></div></div>
</div>

.dk-hub6{position:relative;height:360px;display:grid;grid-template-columns:392px 368px 392px}
.dk-hub6 svg{position:absolute;left:0;top:0}
.dk-hub6 line{stroke:var(--line2);stroke-width:1}
.dk-hub6 circle{fill:var(--g3)}
.dk-hub6 .side{position:relative;display:flex;flex-direction:column;justify-content:space-around;padding-left:0}
.dk-hub6 .it{height:100px;display:flex;flex-direction:column;justify-content:center;padding:0 0 0 20px}
.dk-hub6 .side.l .it{text-align:right;padding:0 20px 0 0}
.dk-hub6 h3{font-size:var(--f-lg);font-weight:700;margin:0 0 2px;line-height:1.35}
.dk-hub6 p{margin:0;font-size:var(--f-sm);color:var(--ink2)}
.dk-hub6 .mid{position:relative;display:flex;align-items:center;justify-content:center}
.dk-hub6 .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-hub6 .core span{font-size:var(--f-cap);color:var(--mu)}
.dk-hub6 .core b{font-size:var(--f-xl);font-weight:700;color:var(--ac);line-height:1.3}