오해와 사실 3쌍

광고주가 흔히 갖는 생각을 바로잡고 확인된 내용을 나란히 둘 때. 3쌍 고정, 오해 1줄, 사실 1줄과 근거 1줄. 값 바꾸는 법: .r 하나가 한 쌍(.m 오해, b 사실, 그 아래 p 근거). 3쌍 고정. 강조색은 머리줄의 "확인된 사실"에만.

'Myth vs Fact' 2단 대조 구성. 오해는 흐린 글자, 사실은 굵은 글자로 무게를 달리하는 방식. 컨설팅 장표 규칙 해설(Deckary 'consulting slide standards' https://deckary.com/blog/consulting-slide-standards , 'slide types guide' https://deckary.com/blog/pillar-slide-types-guide)의 무장식·제한된 색·한 장 한 주장 원칙 참고. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-tmyth">
  <div class="h"><span>흔한 오해</span><i></i><span class="f">확인된 사실</span></div>
  <div class="r"><p class="m">건수가 많을수록 검색 노출이 늘어남</p><i><svg viewBox="0 0 40 16"><path d="M0 8h38M32 2l6 6-6 6"/></svg></i><div><b>노출을 가르는 것은 건수보다 키워드 배정</b><p>같은 키워드에 몰린 글은 서로 순위를 밀어냄</p></div></div>
  <div class="r"><p class="m">발행하고 나면 관리할 것이 없음</p><i><svg viewBox="0 0 40 16"><path d="M0 8h38M32 2l6 6-6 6"/></svg></i><div><b>발행 후 4주 동안 노출 위치가 계속 변함</b><p>주 1회 위치 확인과 누락 건 보완 필요</p></div></div>
  <div class="r"><p class="m">광고 표기를 하면 반응이 떨어짐</p><i><svg viewBox="0 0 40 16"><path d="M0 8h38M32 2l6 6-6 6"/></svg></i><div><b>표기 여부보다 내용의 구체성이 반응을 좌우</b><p>표기 누락은 삭제와 제재로 이어지는 위험 요인</p></div></div>
</div>

.dk-tmyth .h,.dk-tmyth .r{display:grid;grid-template-columns:minmax(0,1fr) 88px minmax(0,1.25fr);align-items:center}
.dk-tmyth .h{padding-bottom:12px;border-bottom:1px solid var(--line2)}
.dk-tmyth .h span{font-size:var(--f-sm);font-weight:600;color:var(--mu)}
.dk-tmyth .h .f{color:var(--ac)}
.dk-tmyth .r{min-height:104px;border-bottom:1px solid var(--line)}
.dk-tmyth .r:last-child{border-bottom-color:var(--line2)}
.dk-tmyth .m{margin:0;font-size:var(--f-md);color:var(--mu);padding-right:24px}
.dk-tmyth .r i{display:flex;justify-content:center}
.dk-tmyth svg{width:40px;height:16px;fill:none;stroke:var(--g2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dk-tmyth .r b{display:block;font-size:var(--f-lg);font-weight:700;line-height:1.4}
.dk-tmyth .r div p{margin:3px 0 0;font-size:var(--f-sm);color:var(--ink2)}