반폭 · 주기별 3행 표(주기, 형식, 내용)

보고, 회의, 점검의 주기와 형식, 다루는 내용을 3행으로 놓을 때. 주기 2~3자, 형식 6자 이내, 내용 22자 이내. 강조 행 1개. 값 바꾸는 법: .r 하나가 한 주기. .cy=주기, .fm 안의 i=형식, 마지막 span=내용. 강조 행 하나에 class="hot". 2~3행(4행은 내용 한 줄일 때만).

직접 제작. 운영 제안서의 보고 체계 표(cadence table) 방식 참고. 주기를 가장 크게, 형식은 작은 꼬리표로 낮춤.

<div class="dk dkh dkh-t-cycle"><div class="dk-card"><p class="dk-lb">보고 주기와 내용</p><div class="tb"><div class="hr"><span>주기</span><span>형식</span><span>내용</span></div>
<div class="r"><span class="cy">주간</span><span class="fm"><i>요약 메일</i></span><span>매체별 지출과 전환 건수, 전주 대비 증감</span></div>
<div class="r hot"><span class="cy">월간</span><span class="fm"><i>대면 보고</i></span><span>달성률, 소재별 성과, 다음 달 계획</span></div>
<div class="r"><span class="cy">분기</span><span class="fm"><i>전략 회의</i></span><span>매체 구성 재검토, 예산 배분 조정안</span></div>
</div></div></div>

.dkh-t-cycle .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-cycle .dk-lb{margin:0 0 10px}
.dkh-t-cycle .tb{flex:1;min-height:0;display:flex;flex-direction:column;font-size:var(--f-sm);line-height:1.5}
.dkh-t-cycle .hr,.dkh-t-cycle .r{display:grid;grid-template-columns:52px 88px 1fr;column-gap:14px;align-items:center}
.dkh-t-cycle .hr{flex:none;font-size:var(--f-cap);color:var(--mu);padding:0 0 8px;border-bottom:1px solid var(--line2)}
.dkh-t-cycle .r{flex:1;padding:8px 0;border-top:1px solid var(--line);color:var(--ink2)}
.dkh-t-cycle .hr + .r{border-top:0}
.dkh-t-cycle .r .cy{font-size:var(--f-lg);font-weight:700;color:var(--ink);letter-spacing:-.02em}
.dkh-t-cycle .r.hot .cy{color:var(--ac)}
.dkh-t-cycle .r .fm i{display:inline-block;font-style:normal;font-size:var(--f-cap);color:var(--ink2);background:var(--soft);border-radius:var(--r-sm);padding:2px 8px;white-space:nowrap}