2칸 대비 카드(양쪽 항목 목록)

기준 하나로 항목을 두 무리로 가르는 대비. 칸마다 무리 이름 + 항목 2~4개(항목 이름 + 기준 1줄). 마케터가 통제하는 항목과 시스템이 맡는 항목, 허용 목록과 차단 목록, 대행사 몫과 광고주 몫에 사용. 칸 2개 고정, 칸마다 항목 2~4개, 강조는 한 칸의 머리줄에만. 값 바꾸는 법: 칸 머리줄(무리 이름 b, 구분 문구 span)과 항목(li 의 이름 b, 기준 span) 교체. 항목은 칸마다 2~4개, 양쪽 개수가 달라도 카드 높이는 같게 맞춰짐. 강조 칸 하나에 class="c hot"(머리줄만 강조색).

두 방식을 같은 틀의 카드 2장으로 나란히 놓는 구성은 컨설팅 보고서의 option comparison 장과 SlideModel 의 comparison slide 묶음 https://slidemodel.com/templates/tag/comparison/ 참고. 어느 쪽도 권하지 않는 중립 대비로 만든 구성과 코드는 직접 제작.

<div class="dk dk-duolist">
<div class="c hot"><div class="h"><span>마케터가 통제</span><b>공급하는 것</b></div>
<ul>
<li><b>소재</b><span>서로 다른 콘셉트로 6~10개에서 시작해 점진 확대. 색만 바꾼 변형은 다양성으로 보지 않음</span></li>
<li><b>기존 고객 정의</b><span>구매 이벤트 기반과 회원 명단 기반 맞춤 타깃을 기존 고객 소스로 등록, 주기적 갱신</span></li>
<li><b>신규와 기존 비중</b><span>기존 고객 예산 상한 기능이 없어 캠페인 분리 등으로 통제</span></li>
</ul></div>
<div class="c"><div class="h"><span>시스템이 담당</span><b>맡기는 것</b></div>
<ul>
<li><b>타깃과 지면</b><span>타깃 설정을 줄이고 소재와 고객 데이터를 학습 신호로 사용</span></li>
<li><b>예산 배분</b><span>초반 반응이 좋은 소재에 예산이 몰리는 구조. 신규 소재 최소 노출 확보로 보완</span></li>
<li><b>자동 보정 기능</b><span>음악 추가, 밝기 보정 등은 소재 단위로 켜고 끔</span></li>
</ul></div>
</div>

.dk-duolist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.dk-duolist .c{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.dk-duolist .h{padding:18px 30px 18px;background:var(--soft);display:flex;align-items:baseline;gap:14px}
.dk-duolist .h b{font-size:var(--f-xl);font-weight:700;line-height:1.3;order:-1}
.dk-duolist .h span{font-size:var(--f-sm);font-weight:600;color:var(--mu)}
.dk-duolist .hot .h{background:var(--ac)}
.dk-duolist .hot .h b{color:var(--card)}
.dk-duolist .hot .h span{color:var(--acw)}
.dk-duolist ul{list-style:none;margin:0;padding:6px 30px 10px;flex:1;display:flex;flex-direction:column}
.dk-duolist li{flex:1;display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.dk-duolist li:last-child{border-bottom:0}
.dk-duolist li b{font-size:var(--f-md);font-weight:700;line-height:1.35}
.dk-duolist li span{font-size:var(--f-sm);color:var(--ink2);line-height:1.5}