시간축 구간 띠 3구간(주·분기 단위 전·중·후)

시즌 전·중·후, 방송 전·중·후, 분기 초·중·말처럼 기간을 3구간으로 나눠 구간별 역할과 관리 지표를 적는 도식. 주·월·분기 단위 눈금에 사용. 구간 3개 고정, 강조 구간 1개, 구간마다 설명 2~3줄 + 지표 1줄. 값 바꾸는 법: 막대 구간의 폭은 style="flex:값"(구간 길이를 그대로 숫자로). 구간 왼쪽 눈금은 i.t, 맨 끝 눈금은 마지막 구간의 i.t.e. 강조 구간 하나에 막대 .s 와 아래 카드 li 양쪽 모두 class="hot". 구간 이름·길이·설명 문구 교체. 눈금 문구를 요일·주차·분기로 바꾸면 주간·분기 단위로 그대로 사용.

구간 길이를 막대 폭 비율로 보이는 방식은 영상 콘티의 타임코드 띠와 방송 큐시트, SlideModel 의 timeline 템플릿 묶음 https://slidemodel.com/templates/tag/timeline/ 의 구간형 타임라인 참고. 띠와 설명 카드를 번호로 잇는 구성과 코드는 직접 제작.

<div class="dk dk-tband3">
<div class="bar">
<div class="s" style="flex:2"><i class="t">시작 2주 전</i><b><span class="num">01</span>시즌 전</b><em>2주</em></div>
<div class="s hot" style="flex:4"><i class="t">시즌 시작</i><b><span class="num">02</span>시즌 중</b><em>4주</em></div>
<div class="s" style="flex:2"><i class="t">시즌 종료</i><i class="t e">종료 2주 후</i><b><span class="num">03</span>시즌 후</b><em>2주</em></div>
</div>
<ol>
<li><span class="n num">01</span><h3>시즌 전<small>2주</small></h3><p>일예산과 입찰가를 단계적으로 상향. 주력 상품부터 한계 CPC 재계산</p><p class="out"><b>관리 지표</b>한계 CPC 대비 현재 입찰가</p></li>
<li class="hot"><span class="n num">02</span><h3>시즌 중<small>4주</small></h3><p>일예산과 입찰가를 함께 상향 유지. 그룹마다 한계 CPC 안에서 도달 가능한 순위 구간 목표</p><p class="out"><b>관리 지표</b>순위 구간, 소진 속도, 전환율</p></li>
<li><span class="n num">03</span><h3>시즌 후<small>2주</small></h3><p>일예산과 입찰가 원복. 기획전 참여 결과와 광고 성과를 분리해 정리</p><p class="out"><b>관리 지표</b>시즌 전 대비 전환당 비용</p></li>
</ol>
</div>

.dk-tband3{display:flex;flex-direction:column;gap:22px;padding-top:26px}
.dk-tband3 .bar{display:flex;gap:3px;height:68px}
.dk-tband3 .s{position:relative;min-width:0;background:var(--g1);display:flex;flex-direction:column;justify-content:center;padding:0 14px;color:var(--ink)}
.dk-tband3 .s:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.dk-tband3 .s:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.dk-tband3 .s b{font-size:var(--f-body);font-weight:700;color:inherit;line-height:1.25;white-space:nowrap}
.dk-tband3 .s b .num{font-size:var(--f-cap);font-weight:600;margin-right:6px;opacity:.7}
.dk-tband3 .s em{font-style:normal;font-size:var(--f-cap);line-height:1.3;white-space:nowrap}
.dk-tband3 .s.hot{background:var(--ac);color:var(--card)}
.dk-tband3 .s .t{position:absolute;left:0;top:-24px;font-style:normal;font-size:var(--f-cap);color:var(--mu);white-space:nowrap}
.dk-tband3 .s .t.e{left:auto;right:0}
.dk-tband3 .s::before{content:"";position:absolute;left:0;top:-5px;width:1px;height:5px;background:var(--line2)}
.dk-tband3 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dk-tband3 li{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 24px 22px}
.dk-tband3 li .n{display:block;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-tband3 li.hot .n{color:var(--ac)}
.dk-tband3 h3{margin:2px 0 10px;font-size:var(--f-lg);font-weight:700;line-height:1.3;color:var(--ink)}
.dk-tband3 h3 small{display:block;font-size:var(--f-sm);font-weight:500;color:var(--mu)}
.dk-tband3 li p{margin:0;font-size:var(--f-body);color:var(--ink2);line-height:1.5}
.dk-tband3 li .out{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:var(--f-sm)}
.dk-tband3 li .out b{display:block;font-size:var(--f-cap);font-weight:600;color:var(--mu)}