하는 것과 하지 않는 것 2열

과업 범위나 운영 원칙의 경계를 분명히 할 때. 왼쪽 하는 것, 오른쪽 하지 않는 것. 각 열 3~4개, 항목 1줄과 이유 1줄. 값 바꾸는 법: 각 열의 li 하나가 항목(b 한 줄, p 이유 한 줄). 열 제목은 h3. 강조색은 왼쪽 열 제목에만. 두 열의 항목 수를 같게 맞춤(3~4개).

스타일 가이드의 'Do / Don't' 2단 표기(왼쪽 긍정, 오른쪽 부정, 기호는 체크와 엑스). 글머리표 대안 정리 글(Visme 'bullet points presentation' https://visme.co/blog/bullet-points-presentation/ , SlideGenius '3 Bullet Point Alternatives' https://www.slidegenius.com/blog/3-bullet-point-alternatives-that-will-improve-your-deck , Maurizio La Cava FAQ https://www.mauriziolacava.com/en/faq/creative-alternatives-to-using-bullet-points-on-a-slide/)의 '목록을 구조로 바꾼다'는 방식 참고. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-tdo">
  <div class="c do">
    <h3>하는 것</h3>
    <ul>
      <li><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><div><b>주 단위 예산 조정</b><p>성과 좋은 묶음으로 매주 이동</p></div></li>
      <li><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><div><b>소재 4주 주기 교체</b><p>묶음마다 3종을 동시에 운영</p></div></li>
      <li><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><div><b>미노출·삭제 건 보고</b><p>대체 조치와 함께 월간 리포트에 기재</p></div></li>
      <li><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><div><b>전환 기준 사전 합의</b><p>집행 전에 집계 기준을 문서로 확정</p></div></li>
    </ul>
  </div>
  <div class="c dont">
    <h3>하지 않는 것</h3>
    <ul>
      <li><svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg><div><b>사전 협의 없는 예산 증액</b><p>증액은 월간 회의에서만 결정</p></div></li>
      <li><svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg><div><b>광고 표기 없는 체험 콘텐츠</b><p>표기 누락 건은 발행하지 않음</p></div></li>
      <li><svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg><div><b>매체별 따로 쓰는 보고서</b><p>통합 리포트 1건으로만 보고</p></div></li>
      <li><svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg><div><b>근거 없는 목표 수치 제시</b><p>기준선이 없는 지표는 목표에서 제외</p></div></li>
    </ul>
  </div>
</div>

.dk-tdo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
.dk-tdo h3{margin:0;padding-bottom:12px;font-size:var(--f-xl);font-weight:700;border-bottom:2px solid var(--ink)}
.dk-tdo .do h3{color:var(--ac);border-bottom-color:var(--ac)}
.dk-tdo .dont h3{color:var(--mu);border-bottom-color:var(--line2)}
.dk-tdo ul{list-style:none;margin:0;padding:0}
.dk-tdo li{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;padding:15px 0;border-bottom:1px solid var(--line)}
.dk-tdo li:last-child{border-bottom:0}
.dk-tdo svg{width:20px;height:20px;margin-top:3px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dk-tdo .dont svg{stroke:var(--g3)}
.dk-tdo li b{display:block;font-size:var(--f-md);font-weight:700}
.dk-tdo .dont li b{color:var(--ink2)}
.dk-tdo li p{margin:1px 0 0;font-size:var(--f-sm);color:var(--mu)}