주기별 3단 표와 원칙 목록

주기·단계·등급처럼 3~4개 행으로 나뉘는 내용을 왼쪽 표로, 지켜야 할 원칙 4~6개를 오른쪽 목록으로. 보고 체계, 검수 단계, 운영 주기에 사용. 행 3~4개, 열 3개, 원칙 6개 이하. 값 바꾸는 법: 표의 행과 원칙 목록의 문구만 교체. 강조할 행 하나에 class="hot".

컨설팅 보고서의 '표 + 우측 요점' 구성(표를 화면 전체로 늘리지 않고 요점을 옆에 둠). 직접 제작.

<div class="dk dk-table3">
  <div class="dk-card t">
    <table>
      <thead><tr><th>주기</th><th>형식</th><th>담는 것</th></tr></thead>
      <tbody>
        <tr><td class="k">상시</td><td>웹 대시보드</td><td>단계별 진행 현황, 실행물 링크, 반응 수치</td></tr>
        <tr><td class="k">주간</td><td>간이 요약</td><td>업로드와 검수 진행, 다음 주 일정</td></tr>
        <tr class="hot"><td class="k">월간</td><td>종합 리포트</td><td>지표, 증빙, 다음 달 조정안</td></tr>
      </tbody>
    </table>
  </div>
  <div class="r">
    <p class="dk-lb">리포트 원칙</p>
    <ul>
      <li><b>증빙</b> 실행물 링크를 건별로 첨부</li>
      <li><b>통합</b> 채널이 늘어도 리포트는 하나</li>
      <li><b>그대로</b> 삭제·미노출 건도 대체 조치와 함께 보고</li>
      <li><b>다음</b> 월간 리포트 끝에 조정안 포함</li>
    </ul>
  </div>
</div>

.dk-table3{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:center}
.dk-table3 table{width:100%;border-collapse:collapse}
.dk-table3 th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:0 16px 12px;border-bottom:1px solid var(--line2)}
.dk-table3 td{font-size:var(--f-body);color:var(--ink2);padding:18px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.dk-table3 tr:last-child td{border-bottom:0}
.dk-table3 td.k{font-size:var(--f-lg);font-weight:700;color:var(--ink);width:96px}
.dk-table3 tr.hot td{background:var(--acw)}
.dk-table3 tr.hot td.k{color:var(--ac)}
.dk-table3 .r ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.dk-table3 .r li{font-size:var(--f-body);color:var(--ink2);padding-left:18px;position:relative}
.dk-table3 .r li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--line2)}
.dk-table3 .r li b{margin-right:8px}