시간축 구간 띠 5구간(방송 큐시트)

60분 방송, 행사 진행표처럼 5구간으로 나뉘는 시간 배분을 막대 폭으로 보이고 구간별 진행 내용을 아래 카드로 적는 도식. 라이브 큐시트, 세미나·웨비나 순서, 하루 운영 시간대 5구간에 사용. 구간 5개 고정, 강조 구간 1개, 설명 2~3줄(약 40자). 값 바꾸는 법: 막대 구간의 폭은 style="flex:값"(구간 길이를 그대로 숫자로). 구간 왼쪽 눈금은 i.t, 맨 끝 눈금은 마지막 구간의 i.t.e. 강조 구간 하나에 막대 .s 와 아래 카드 li 양쪽 모두 class="hot". 구간 이름·길이·설명 문구 교체. 5분처럼 짧은 구간은 flex 값을 6 이상으로 올려 이름이 잘리지 않게 함(전체의 10% 이상).

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

<div class="dk dk-tband5">
<div class="bar">
<div class="s" style="flex:6"><i class="t">0분</i><b><span class="num">01</span>오프닝</b><em>5분</em></div>
<div class="s" style="flex:15"><i class="t">5분</i><b><span class="num">02</span>제품 소개</b><em>15분</em></div>
<div class="s" style="flex:10"><i class="t">20분</i><b><span class="num">03</span>소통·이벤트</b><em>10분</em></div>
<div class="s hot" style="flex:24"><i class="t">30분</i><b><span class="num">04</span>소구점 반복</b><em>25분</em></div>
<div class="s" style="flex:6"><i class="t">55분</i><i class="t e">60분</i><b><span class="num">05</span>클로징</b><em>5분</em></div>
</div>
<ol>
<li><span class="n num">01</span><h3>오프닝<small>5분</small></h3><p>방송 혜택 한 문장 안내, 알림 신청 유도</p></li>
<li><span class="n num">02</span><h3>제품 소개<small>15분</small></h3><p>쿠폰 팝업과 추천 상품 링크를 소개 흐름에 맞춰 교체</p></li>
<li><span class="n num">03</span><h3>소통·이벤트<small>10분</small></h3><p>채팅 질문 응답, 라이브 전용 혜택 재안내</p></li>
<li class="hot"><span class="n num">04</span><h3>소구점 반복<small>25분</small></h3><p>중간 진입 시청자에게 핵심 소구 반복. 접속자·매출 추이로 진행 신호</p></li>
<li><span class="n num">05</span><h3>클로징<small>5분</small></h3><p>마감 혜택 고지, 다음 방송 알림 신청 안내</p></li>
</ol>
</div>

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