반폭 · 소형 일정 막대(4행 × 8주)

작업 3~4개가 몇 주차에 걸쳐 진행되는지 절반 칸에 간단히. 행 3~4개, 주 단위 6~8칸. 보고·납품 같은 시점은 마름모. 강조색은 가장 긴 핵심 작업 하나. 작업 이름 6자 이내. 세부 일정표는 전폭 조각을 사용. 값 바꾸는 법: 주 칸 폭 37, 1주차 시작 x = 100. 작업 막대 rect 의 x = 100 + (시작 주 − 1) × 37 + 2, width = (끝 주 − 시작 주 + 1) × 37 − 4. 행 중심 y = 44 + (순번 − 1) × 44, rect y = 중심 − 10. 마름모(시점)의 중심 x = 100 + (주 − 1) × 37 + 18.5. 강조 작업 rect class="f-a", 이름 글자 class="v". 왼쪽 작업 이름과 범례 교체.

간트 차트의 일반 구성과 제안서 일정 장표의 간략 표기(주 단위 칸, 작업 막대, 마름모 시점)를 참고. 직접 제작.

<div class="dk dkh dkh-g-gantt"><div class="dk-card"><p class="dk-lb">8주 진행 일정</p>
<div class="cv"><svg width="100%" viewBox="0 0 400 204" preserveAspectRatio="xMidYMid meet" role="img">
<text x="118.5" y="14" text-anchor="middle">1주</text><line x1="100" y1="22" x2="100" y2="200" class="gr"/><text x="155.5" y="14" text-anchor="middle">2주</text><line x1="137" y1="22" x2="137" y2="200" class="gr"/><text x="192.5" y="14" text-anchor="middle">3주</text><line x1="174" y1="22" x2="174" y2="200" class="gr"/><text x="229.5" y="14" text-anchor="middle">4주</text><line x1="211" y1="22" x2="211" y2="200" class="gr"/><text x="266.5" y="14" text-anchor="middle">5주</text><line x1="248" y1="22" x2="248" y2="200" class="gr"/><text x="303.5" y="14" text-anchor="middle">6주</text><line x1="285" y1="22" x2="285" y2="200" class="gr"/><text x="340.5" y="14" text-anchor="middle">7주</text><line x1="322" y1="22" x2="322" y2="200" class="gr"/><text x="377.5" y="14" text-anchor="middle">8주</text><line x1="359" y1="22" x2="359" y2="200" class="gr"/><line x1="396" y1="22" x2="396" y2="200" class="gr"/>
<text x="0" y="49" class="k">진단·설계</text><rect x="102" y="34" width="70" height="20" rx="4" class="f-g3"/>
<text x="0" y="93" class="k">소재 제작</text><rect x="139" y="78" width="107" height="20" rx="4" class="f-g3"/>
<text x="0" y="137" class="v">매체 집행</text><rect x="213" y="122" width="181" height="20" rx="4" class="f-a"/>
<text x="0" y="181" class="k">성과 보고</text>
<polygon points="229.5,168 237.5,176 229.5,184 221.5,176" class="f-g4"/><polygon points="377.5,168 385.5,176 377.5,184 369.5,176" class="f-g4"/><text x="243" y="181">중간</text><text x="365" y="181" text-anchor="end">최종</text>
</svg></div>
<p class="lg"><span><i class="c-g3"></i>준비 작업</span><span><i class="c-a"></i>매체 집행</span><span><i class="c-g4 dm"></i>보고 시점</span></p>
</div></div>

.dkh-g-gantt .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-gantt .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-gantt .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-gantt .cv{flex:1;min-height:0;position:relative}
.dkh-g-gantt .cv svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.dkh-g-gantt svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dkh-g-gantt svg .k{fill:var(--ink2)}
.dkh-g-gantt svg .v{fill:var(--ink);font-weight:600}
.dkh-g-gantt svg .va{fill:var(--ac);font-weight:700}
.dkh-g-gantt svg .on{fill:var(--card);font-weight:600}
.dkh-g-gantt svg .t14{font-size:14px}
.dkh-g-gantt svg .f-a{fill:var(--ac)}
.dkh-g-gantt svg .f-w{fill:var(--acw)}
.dkh-g-gantt svg .f-s{fill:var(--soft)}
.dkh-g-gantt svg .f-c{fill:var(--card)}
.dkh-g-gantt svg .f-g1{fill:var(--g1)}
.dkh-g-gantt svg .f-g2{fill:var(--g2)}
.dkh-g-gantt svg .f-g3{fill:var(--g3)}
.dkh-g-gantt svg .f-g4{fill:var(--g4)}
.dkh-g-gantt svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dkh-g-gantt svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dkh-g-gantt .lg{flex:none;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--f-cap);color:var(--ink2);margin:8px 0 0}
.dkh-g-gantt .lg span{display:flex;align-items:center;gap:6px}
.dkh-g-gantt .lg i{display:block;width:10px;height:10px;border-radius:2px}
.dkh-g-gantt .lg .c-a{background:var(--ac)}
.dkh-g-gantt .lg .c-s{background:var(--soft)}
.dkh-g-gantt .lg .c-g1{background:var(--g1)}
.dkh-g-gantt .lg .c-g2{background:var(--g2)}
.dkh-g-gantt .lg .c-g3{background:var(--g3)}
.dkh-g-gantt .lg .c-g4{background:var(--g4)}
.dkh-g-gantt .lg .dm{width:9px;height:9px;border-radius:0;transform:rotate(45deg)}