주 단위 간트 표(12주, 단계 묶음)

10~12주 일정을 단계 묶음(준비·집행·정리)과 함께 표시. 업무 6~7개, 주 10~12개, 단계 3개. 값 바꾸는 법: 막대 위치는 style="grid-column:시작주/끝주+1" (예: 3~6주는 3/7). 마름모는 class="ms"에 grid-column:해당주/해당주+1. 핵심 구간 하나에만 class="bar hot". 주 수를 바꾸려면 CSS의 repeat(12) 세 곳과 background-size(100÷주 수 %)를 같이 고침.

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

<div class="dk dk-gantt12"><div class="dk-card">
<div class="row hd"><span class="lbl">업무</span><div class="trk"><div class="ph"><i style="grid-column:1/3">준비</i><i style="grid-column:3/11">집행</i><i style="grid-column:11/13">정리</i></div><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><span>9</span><span>10</span><span>11</span><span>12</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:1/4"></i></div><span class="per num">1~3주</span></div>
<div class="row"><span class="lbl">소재와 콘텐츠 제작</span><div class="trk"><i class="bar" style="grid-column:2/10"></i></div><span class="per num">2~9주</span></div>
<div class="row"><span class="lbl">검색 광고 집행</span><div class="trk"><i class="bar hot" style="grid-column:3/11"></i></div><span class="per num">3~10주</span></div>
<div class="row"><span class="lbl">콘텐츠 발행과 확산</span><div class="trk"><i class="bar" style="grid-column:4/11"></i></div><span class="per num">4~10주</span></div>
<div class="row"><span class="lbl">중간 점검 보고</span><div class="trk"><i class="ms" style="grid-column:6/7"></i></div><span class="per num">6주 차</span></div>
<div class="row"><span class="lbl">종료 보고와 인수인계</span><div class="trk"><i class="bar" style="grid-column:11/13"></i></div><span class="per num">11~12주</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-gantt12 .dk-card{padding:18px 24px 10px}
.dk-gantt12 .row{display:grid;grid-template-columns:210px minmax(0,1fr) 84px;align-items:center;column-gap:16px;border-bottom:1px solid var(--line)}
.dk-gantt12 .row:last-child{border-bottom:0}
.dk-gantt12 .row.hd{border-bottom:1px solid var(--line2);align-items:end}
.dk-gantt12 .row.hd .lbl,.dk-gantt12 .row.hd .per{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding-bottom:10px}
.dk-gantt12 .lbl{font-size:var(--f-body);font-weight:600;color:var(--ink);line-height:1.4}
.dk-gantt12 .per{font-size:var(--f-sm);color:var(--mu);text-align:right;font-variant-numeric:tabular-nums}
.dk-gantt12 .trk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;height:38px;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:8.3333% 100%}
.dk-gantt12 .row.hd .trk{display:block;height:auto;background:none}
.dk-gantt12 .wk,.dk-gantt12 .ph{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.dk-gantt12 .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-gantt12 .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-gantt12 i.bar{display:block;height:14px;border-radius:7px;background:var(--g2);margin:0 3px}
.dk-gantt12 i.bar.hot{background:var(--ac)}
.dk-gantt12 i.ms{display:block;width:12px;height:12px;background:var(--ink);transform:rotate(45deg);justify-self:center}
.dk-gantt12 .lg{display:flex;align-items:center;gap:22px;margin:12px 0 0;padding:0 24px;font-size:var(--f-cap);color:var(--mu)}
.dk-gantt12 .lg span{display:inline-flex;align-items:center;gap:8px}
.dk-gantt12 .lg i.bar{width:28px;height:10px;margin:0}
.dk-gantt12 .lg i.ms{width:9px;height:9px}
.dk-gantt12 .lg em{font-style:normal;margin-left:auto}