반폭 · 허용과 금지 2단 체크리스트

심의 기준, 표현 가이드, 운영 규칙처럼 되는 것과 안 되는 것을 좌우로 나란히 보일 때. 단마다 3~4개, 항목 14자 이내. 값 바꾸는 법: .c 가 한 단(왼쪽 허용, 오른쪽 .c.no 금지). .h=단 제목, .i 하나가 한 항목(.m 은 빈 표식 자리로 CSS 가 동그라미와 가위표를 그린다, 다음 span 이 문구). 단마다 3~4개로 좌우 개수를 맞춘다.

직접 제작. 브랜드 가이드 문서의 Do / Don't 2단 구성 참고. 색 상자 대신 가로선과 표식 글자만 사용.

<div class="dk dkh dkh-t-okno"><div class="dk-card"><p class="dk-lb">광고 문구 심의 기준</p><div class="g"><div class="c"><div class="h">쓸 수 있는 표현</div>
<div class="i"><span class="m"></span><span>사용 후기 인용 표기</span></div>
<div class="i"><span class="m"></span><span>시험 성적서 근거 수치</span></div>
<div class="i"><span class="m"></span><span>기간을 밝힌 혜택 안내</span></div>
<div class="i"><span class="m"></span><span>자사 기존 제품 대비 비교</span></div>
</div><div class="c no"><div class="h">쓸 수 없는 표현</div>
<div class="i"><span class="m"></span><span>최고, 유일 등 최상급 표현</span></div>
<div class="i"><span class="m"></span><span>질병 예방과 치료 암시</span></div>
<div class="i"><span class="m"></span><span>타사 제품 직접 비방</span></div>
<div class="i"><span class="m"></span><span>근거 없는 순위 표기</span></div>
</div></div></div></div>

.dkh-t-okno .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-okno .dk-lb{margin:0 0 10px}
.dkh-t-okno .g{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
.dkh-t-okno .c{display:flex;flex-direction:column;min-width:0}
.dkh-t-okno .h{flex:none;font-size:var(--f-cap);font-weight:600;color:var(--ink);padding:0 0 8px;border-bottom:1px solid var(--line2)}
.dkh-t-okno .i{flex:1;display:grid;grid-template-columns:16px 1fr;column-gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:var(--f-sm);line-height:1.5;color:var(--ink2)}
.dkh-t-okno .h + .i{border-top:0}
.dkh-t-okno .i .m{position:relative;justify-self:center;width:11px;height:11px;border:2px solid var(--g3);border-radius:6px}
.dkh-t-okno .c.no .i .m{border:0;border-radius:0}
.dkh-t-okno .c.no .i .m::before,.dkh-t-okno .c.no .i .m::after{content:"";position:absolute;left:-1px;top:4px;width:13px;height:2px;border-radius:1px;background:var(--ac);transform:rotate(45deg)}
.dkh-t-okno .c.no .i .m::after{transform:rotate(-45deg)}