시간축 구간 띠 4구간(영상 콘티)

영상·오디오 소재 한 편을 4구간으로 나눠 구간 길이를 막대 폭으로, 구간마다 넣을 것을 아래 카드로 보이는 도식. 릴스 4단 구성, 인스트림 초반 5초, 오디오 대본 4단계, 프리롤·미드롤 위치 표시에 사용. 구간 4개 고정, 강조 구간 1개, 설명 2줄(약 40자). 값 바꾸는 법: 막대 구간의 폭은 style="flex:값"(구간 길이를 그대로 숫자로). 구간 왼쪽 눈금은 i.t, 맨 끝 눈금은 마지막 구간의 i.t.e. 강조 구간 하나에 막대 .s 와 아래 카드 li 양쪽 모두 class="hot". 구간 이름·길이·설명 문구 교체. 가장 짧은 구간도 flex 2 이상(전체의 12% 이상)이어야 이름이 한 줄에 들어감.

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

<div class="dk dk-tband4">
<div class="bar">
<div class="s hot" style="flex:3"><i class="t">0초</i><b><span class="num">01</span>오프닝</b><em>약 3초</em></div>
<div class="s" style="flex:3"><i class="t">3초</i><b><span class="num">02</span>반전</b><em>2~3초</em></div>
<div class="s" style="flex:7"><i class="t">6초</i><b><span class="num">03</span>증거</b><em>전체의 절반 이상</em></div>
<div class="s" style="flex:2"><i class="t">13초</i><i class="t e">15초</i><b><span class="num">04</span>행동 유도</b><em>2~3초</em></div>
</div>
<ol>
<li class="hot"><span class="n num">01</span><h3>오프닝<small>약 3초</small></h3><p>로고·패키지 없이 일반 콘텐츠처럼 시작. 손 클로즈업, 셀피 구도</p></li>
<li><span class="n num">02</span><h3>반전<small>2~3초</small></h3><p>제품이나 문제 상황 등장</p></li>
<li><span class="n num">03</span><h3>증거<small>전체의 절반 이상</small></h3><p>사용 전후 영상과 구매 후기로 효과 제시</p></li>
<li><span class="n num">04</span><h3>행동 유도<small>2~3초</small></h3><p>버튼 문구와 같은 한 가지 행동 안내</p></li>
</ol>
</div>

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