디자인킷 · 도식
심의 체크 카드(단일 목록 4~8항목)
D-도식-심의체크카드
언제 쓰는가
집행 전에 확인할 심의·표기 항목을 한 장짜리 체크 목록으로 놓는 도식. 항목마다 체크 표시, 확인 내용 1줄, 오른쪽에 근거 한마디. 업종별 심의·표기 주의, 계약 조항 점검, 하지 않을 것 목록에 사용. 항목 4~8개, 문구 한 줄(약 45자), 근거 12자 이내. 가장 무거운 항목 1개 강조. 값 바꾸는 법: 항목 문구(span)와 근거(em) 교체. 항목 4~8개(8개면 li padding 15px 를 9px 로). 가장 무거운 항목 하나에 class="hot". 근거는 실제 조문·기준 이름만 적고, 확인되지 않은 조문 번호는 적지 않음.
참고
한 장짜리 점검 목록에 근거를 오른쪽에 붙이는 방식은 법무 실사 체크리스트와 항공 운항 체크리스트 표기 참고. 체크 표시는 아이콘 파일 없이 CSS 로 그린 직접 제작.
조각
<div class="dk dk-chk1"><div class="dk-card"> <p class="dk-lb mu">심의·표기 점검</p> <ul> <li class="hot"><i></i><span>치료경험담(후기)·비교광고·신의료기술 미평가 광고 전면 금지</span><em>의료법 제56조</em></li> <li><i></i><span>SNS(일일 평균 이용자 10만명 이상) 게시물은 사전심의 후 게재</span><em>의료광고 사전심의</em></li> <li><i></i><span>전문의 표기는 등록 완료 후에만. 효과 단정 표현 금지</span><em>의료광고 심의 기준</em></li> <li><i></i><span>할인·금융상품은 대상·기간·범위·금액과 할인 전 금액 동시 표시</span><em>가격 표시 기준</em></li> <li><i></i><span>문자·카카오톡·이메일은 (광고) 표시, 발신자 정보, 수신거부 명시</span><em>정보통신망법 제50조</em></li> </ul></div></div>
스타일
.dk-chk1 .dk-card{padding:22px 32px 10px}
.dk-chk1 .dk-lb{margin:0 0 8px}
.dk-chk1 ul{list-style:none;margin:0;padding:0}
.dk-chk1 li{display:grid;grid-template-columns:24px minmax(0,1fr) 190px;gap:16px;align-items:center;padding:15px 0;border-top:1px solid var(--line)}
.dk-chk1 li:first-child{border-top:1px solid var(--line2)}
.dk-chk1 li i{position:relative;width:22px;height:22px;border-radius:5px;border:1.5px solid var(--g3)}
.dk-chk1 li i::after{content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;border-right:2px solid var(--g4);border-bottom:2px solid var(--g4);transform:rotate(45deg)}
.dk-chk1 li span{font-size:var(--f-md);color:var(--ink);line-height:1.4}
.dk-chk1 li em{font-style:normal;font-size:var(--f-sm);color:var(--mu);text-align:right}
.dk-chk1 li.hot i{background:var(--ac);border-color:var(--ac)}
.dk-chk1 li.hot i::after{border-color:var(--card)}
.dk-chk1 li.hot span{font-weight:700}
.dk-chk1 li.hot em{color:var(--ac);font-weight:600}