계층 조직도(총괄 1, 리드 3, 실무)

전담 조직의 위계와 인원을 보여줄 때. 총괄 1명 아래 리드 3~4명, 리드마다 실무 2줄. 상자는 총괄에만 쓰고 나머지는 선과 글로 구분. 값 바꾸는 법: .top=총괄(이름과 한 줄), .tm=리드(h3 이름, p 역할, li 실무 2~3줄). 연락 창구 등 강조할 리드 하나에 class="hot". 리드를 4명으로 늘리면 .row 의 3 을 4 로, ::before 의 calc(100% / 6) 을 calc(100% / 8) 로.

Deckary MBB 장표 유형 정리(https://deckary.com/blog/consulting-slide-templates). 대기업 IR 자료의 조직도 관행: 상위 1칸만 상자, 하위는 선과 글. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-org">
  <div class="top"><b>총괄 책임자</b><span>전략 방향과 최종 품질 책임, 월간 회의 참석</span></div>
  <div class="stem"></div>
  <div class="row"><div class="tm hot"><h3>전담 AE</h3><p>일상 연락과 일정 관리</p><ul><li>매체 운영 2인</li><li>검색, SNS 담당</li></ul></div><div class="tm"><h3>제작 리드</h3><p>소재 기획과 품질 관리</p><ul><li>디자이너 2인</li><li>영상 편집 1인</li></ul></div><div class="tm"><h3>데이터 리드</h3><p>추적 설정과 성과 분석</p><ul><li>분석 담당 1인</li><li>리포트 자동화</li></ul></div></div>
</div>

.dk-org{display:flex;flex-direction:column;align-items:center}
.dk-org .top{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:16px 36px;text-align:center;min-width:420px}
.dk-org .top b{display:block;font-size:var(--f-xl);font-weight:700;line-height:1.35}
.dk-org .top span{font-size:var(--f-sm);color:var(--mu)}
.dk-org .stem{width:1px;height:26px;background:var(--line2)}
.dk-org .row{position:relative;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.dk-org .row::before{content:"";position:absolute;top:0;left:calc(100% / 6);right:calc(100% / 6);height:1px;background:var(--line2)}
.dk-org .tm{position:relative;padding:44px 28px 0;text-align:center}
.dk-org .tm::before{content:"";position:absolute;top:0;left:50%;width:1px;height:28px;background:var(--line2)}
.dk-org h3{font-size:var(--f-lg);font-weight:700;margin:0;line-height:1.35}
.dk-org p{margin:2px 0 14px;font-size:var(--f-sm);color:var(--ink2)}
.dk-org ul{list-style:none;margin:0 auto;padding:0;width:240px;border-top:1px solid var(--line)}
.dk-org li{font-size:var(--f-body);color:var(--ink2);padding:10px 0;border-bottom:1px solid var(--line)}
.dk-org .hot h3{color:var(--ac)}