반폭 · 하는 것과 하지 않는 것

업무 범위나 운영 약속을 하는 것과 하지 않는 것으로 위아래 나눠 보일 때. 묶음마다 2~3개, 항목 16자 이내. 값 바꾸는 법: .b 가 한 묶음(위 하는 것, 아래 .b.no 하지 않는 것). .h=묶음 제목, .ul 안의 div 하나가 한 항목. 묶음마다 2~3개.

직접 제작. 서비스 범위 정의 장의 In scope / Out of scope 구성 참고. 아래 묶음만 옅은 바탕으로 구분.

<div class="dk dkh dkh-t-dodont"><div class="dk-card"><p class="dk-lb">운영 범위</p><div class="g"><div class="b"><div class="h">하는 것</div><div class="ul">
<div>주간 성과 공유와 원인 설명</div>
<div>소재 교체안 사전 제시</div>
<div>계정 소유권 광고주 유지</div>
</div></div><div class="b no"><div class="h">하지 않는 것</div><div class="ul">
<div>사전 협의 없는 예산 증액</div>
<div>근거 없는 성과 보장 문구</div>
<div>보고서 수치 선별 기재</div>
</div></div></div></div></div>

.dkh-t-dodont .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-dodont .dk-lb{margin:0 0 10px}
.dkh-t-dodont .g{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.dkh-t-dodont .b{flex:1;display:grid;grid-template-columns:92px 1fr;column-gap:14px;border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 16px}
.dkh-t-dodont .b.no{background:var(--soft);border-color:var(--soft)}
.dkh-t-dodont .h{display:flex;align-items:center;font-size:var(--f-sm);font-weight:700}
.dkh-t-dodont .b.no .h{color:var(--ac)}
.dkh-t-dodont .ul{display:flex;flex-direction:column;min-width:0}
.dkh-t-dodont .ul div{flex:1;display:flex;align-items:center;padding:5px 0;border-top:1px solid var(--line);font-size:var(--f-sm);line-height:1.5;color:var(--ink2)}
.dkh-t-dodont .b.no .ul div{border-top-color:var(--line2)}
.dkh-t-dodont .ul div:first-child{border-top:0}