주 단위 간트 표(8주)

6~8주짜리 단기 캠페인 일정. 업무 5~6개를 주 단위 막대로, 핵심 구간 하나만 강조. 업무 4~6개, 주 6~8개. 값 바꾸는 법: 막대 위치는 style="grid-column:시작주/끝주+1" (예: 3~6주는 3/7). 마름모는 class="ms"에 grid-column:해당주/해당주+1. 핵심 구간 하나에만 class="bar hot". 주 수를 바꾸려면 CSS의 repeat(8) 세 곳과 background-size(100÷주 수 %)를 같이 고침.

infoDiagram Project Plan Gantt Chart Table https://www.infodiagram.com/pl/slides/project-plan-gantt-chart-table (표 왼쪽에 업무, 오른쪽에 주 단위 막대, 상태 신호). 왼쪽 업무명, 가운데 주 단위 막대, 오른쪽 기간 숫자 배치와 핵심 구간 하나만 색을 쓰는 방식 참고. 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-gantt8"><div class="dk-card">
<div class="row hd"><span class="lbl">업무</span><div class="trk"><div class="wk"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span></div></div><span class="per">기간</span></div>
<div class="row"><span class="lbl">현황 진단과 목표 합의</span><div class="trk"><i class="bar" style="grid-column:1/3"></i></div><span class="per num">1~2주</span></div>
<div class="row"><span class="lbl">계정 구조와 추적 설정</span><div class="trk"><i class="bar" style="grid-column:2/4"></i></div><span class="per num">2~3주</span></div>
<div class="row"><span class="lbl">소재와 콘텐츠 제작</span><div class="trk"><i class="bar" style="grid-column:2/5"></i></div><span class="per num">2~4주</span></div>
<div class="row"><span class="lbl">광고 집행과 주간 조정</span><div class="trk"><i class="bar hot" style="grid-column:3/9"></i></div><span class="per num">3~8주</span></div>
<div class="row"><span class="lbl">중간 점검 보고</span><div class="trk"><i class="ms" style="grid-column:5/6"></i></div><span class="per num">5주 차</span></div>
<div class="row"><span class="lbl">종료 보고와 인수인계</span><div class="trk"><i class="bar" style="grid-column:8/9"></i></div><span class="per num">8주</span></div>
</div>
<p class="lg"><span><i class="bar"></i>일반 업무</span><span><i class="bar hot"></i>핵심 구간</span><span><i class="ms"></i>보고·결정 시점</span><em>단위: 주</em></p></div>

.dk-gantt8 .dk-card{padding:18px 24px 10px}
.dk-gantt8 .row{display:grid;grid-template-columns:210px minmax(0,1fr) 84px;align-items:center;column-gap:16px;border-bottom:1px solid var(--line)}
.dk-gantt8 .row:last-child{border-bottom:0}
.dk-gantt8 .row.hd{border-bottom:1px solid var(--line2);align-items:end}
.dk-gantt8 .row.hd .lbl,.dk-gantt8 .row.hd .per{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding-bottom:10px}
.dk-gantt8 .lbl{font-size:var(--f-body);font-weight:600;color:var(--ink);line-height:1.4}
.dk-gantt8 .per{font-size:var(--f-sm);color:var(--mu);text-align:right;font-variant-numeric:tabular-nums}
.dk-gantt8 .trk{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:center;height:44px;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:12.5000% 100%}
.dk-gantt8 .row.hd .trk{display:block;height:auto;background:none}
.dk-gantt8 .wk,.dk-gantt8 .ph{display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}
.dk-gantt8 .wk span{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:center;padding-bottom:10px;font-variant-numeric:tabular-nums}
.dk-gantt8 .ph i{font-style:normal;font-size:var(--f-cap);font-weight:600;color:var(--ink);text-align:center;margin:0 3px 6px;padding:2px 0;background:var(--soft);border-radius:var(--r-sm)}
.dk-gantt8 i.bar{display:block;height:14px;border-radius:7px;background:var(--g2);margin:0 3px}
.dk-gantt8 i.bar.hot{background:var(--ac)}
.dk-gantt8 i.ms{display:block;width:12px;height:12px;background:var(--ink);transform:rotate(45deg);justify-self:center}
.dk-gantt8 .lg{display:flex;align-items:center;gap:22px;margin:12px 0 0;padding:0 24px;font-size:var(--f-cap);color:var(--mu)}
.dk-gantt8 .lg span{display:inline-flex;align-items:center;gap:8px}
.dk-gantt8 .lg i.bar{width:28px;height:10px;margin:0}
.dk-gantt8 .lg i.ms{width:9px;height:9px}
.dk-gantt8 .lg em{font-style:normal;margin-left:auto}