하루 24시간 배치(줄 3개)

하루 24시간 축 위에 광고 상품·송출 구간·대응 인력을 줄 2~3개로 배치하는 도식. 24시간 독점 상품과 병행 광고, 시간대별 송출 조건, 영업·브레이크타임·마감 구간 예산 배정에 사용. 줄 2~3개, 줄마다 구간 1~4개, 강조 줄 1개, 오른쪽 끝에 종료 후 칸 1개. 값 바꾸는 법: 구간 하나 = span.b. 위치는 style 의 left = 시작 시각 × 33px, width = (끝 시각 - 시작 시각) × 33 - 3px. 예: 7시~10시는 left:231px;width:96px. 강조 줄은 div.row 에 class="hot", 그 줄 구간에 class="b ac". 폭 3시간(96px) 미만 구간은 문구를 4자 이내로. 주 단위로 쓰려면 눈금을 요일 7칸으로 바꾸고 1칸 폭을 113px 로 계산.

하루 시간축에 구간을 가로 막대로 얹는 방식은 매체 플라이트 차트와 방송 편성표, Datawrapper 의 range plot 설명 https://academy.datawrapper.de/article/119-how-to-create-a-range-plot 참고. 직접 제작.

<div class="dk dk-day24">
<div class="row ax"><div class="l"></div><div class="tr"><i style="left:0px">0시</i><i style="left:99px">3시</i><i style="left:198px">6시</i><i style="left:297px">9시</i><i style="left:396px">12시</i><i style="left:495px">15시</i><i style="left:594px">18시</i><i style="left:693px">21시</i><i style="left:792px">24시</i></div><div class="af">종료 후</div></div>
<div class="row hot"><div class="l"><b>트렌드 테이크오버</b><span>탐색 탭 상단 독점</span></div><div class="tr"><span class="b ac" style="left:0px;width:789px">24시간 동안 탐색 탭과 실시간 화제 영역 상단 독점</span></div><div class="af"><b>후속 게시</b><span>종료 직후 올릴 게시물 사전 준비</span></div></div>
<div class="row"><div class="l"><b>프로모션 광고</b><span>홈 타임라인, 3~6개 병행</span></div><div class="tr"><span class="b" style="left:231px;width:96px">출근 시간대</span><span class="b" style="left:396px;width:63px">점심</span><span class="b" style="left:594px;width:162px">저녁 집중 노출</span></div><div class="af"><span>성과 좋은 소재만 연장</span></div></div>
<div class="row"><div class="l"><b>실시간 대응</b><span>대응 담당 상주</span></div><div class="tr"><span class="b" style="left:297px;width:426px">승인된 말투 지침과 대응 제외 주제 목록에 따라 답글·인용 대응</span></div><div class="af"><span>대응 기록 정리</span></div></div>
</div>

.dk-day24{display:flex;flex-direction:column}
.dk-day24 .row{display:grid;grid-template-columns:186px 792px minmax(0,1fr);align-items:stretch;border-bottom:1px solid var(--line)}
.dk-day24 .row.ax{border-bottom:1px solid var(--line2);height:30px}
.dk-day24 .row:last-child{border-bottom:0}
.dk-day24 .l{padding:18px 12px 18px 0;display:flex;flex-direction:column;justify-content:center}
.dk-day24 .l b{font-size:var(--f-md);font-weight:700;line-height:1.3}
.dk-day24 .l span{font-size:var(--f-cap);color:var(--mu)}
.dk-day24 .row.hot .l b{color:var(--ac)}
.dk-day24 .tr{position:relative;min-height:88px;background-image:repeating-linear-gradient(90deg,var(--line) 0,var(--line) 1px,transparent 1px,transparent 99px)}
.dk-day24 .ax .tr{min-height:0;background:none}
.dk-day24 .ax .tr i{position:absolute;top:2px;font-style:normal;font-size:var(--f-cap);color:var(--mu);transform:translateX(-50%);white-space:nowrap}
.dk-day24 .ax .tr i:first-child{transform:none}
.dk-day24 .ax .tr i:last-child{transform:translateX(-100%)}
.dk-day24 .b{position:absolute;top:16px;bottom:16px;display:flex;align-items:center;padding:0 12px;background:var(--g1);border-radius:var(--r-sm);font-size:var(--f-sm);font-weight:500;color:var(--ink);line-height:1.3}
.dk-day24 .b.ac{background:var(--ac);color:var(--card);font-weight:600}
.dk-day24 .af{padding:14px 0 14px 18px;border-left:1px dashed var(--line2);display:flex;flex-direction:column;justify-content:center}
.dk-day24 .ax .af{padding-top:2px;padding-bottom:0;font-size:var(--f-cap);color:var(--mu);justify-content:flex-start}
.dk-day24 .af b{font-size:var(--f-body);font-weight:700}
.dk-day24 .af span{font-size:var(--f-sm);color:var(--ink2);line-height:1.4}