2칸 대비 카드(방식 A · 방식 B)

항목이 둘뿐인 좌우 대비. 칸마다 제목, 설명 2~3줄, 유의점 1줄, 맞는 경우 1줄. 한쪽을 권하지 않는 중립 대비가 기본, 필요하면 1칸만 강조. 구매 방식 2종, 권한 방식 2종, 확장 방식 2종, 검증 방식 2종, 보고 주기 2종에 사용. 칸 2개 고정, 아래 결론 1줄. 값 바꾸는 법: 칸마다 꼬리표(span.tag), 제목(h3), 설명(p.d), 유의점·맞는 경우(dd) 교체. dt 문구도 바꿀 수 있음(예: 선정 방식, 예). 한쪽을 권할 때만 그 칸에 class="c hot". 아래 결론 줄(.dk-say)은 지워도 됨.

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

<div class="dk dk-duo">
<div class="pair">
<div class="c"><span class="tag">구매 방식 A</span><h3>실시간 입찰</h3><p class="d">광고 구매 플랫폼으로 OTT 지면 낙찰. 타깃·입찰·보고를 한 곳에서 관리</p><dl><div><dt>유의점</dt><dd>낙찰 실패의 흔한 원인은 지나치게 낮은 입찰가와 좁은 타깃</dd></div><div class="fit"><dt>맞는 경우</dt><dd>유연한 예산 운영</dd></div></dl></div>
<div class="c"><span class="tag">구매 방식 B</span><h3>직접 예약</h3><p class="d">대행사와 미디어렙을 통한 연간·반기 계약</p><dl><div><dt>유의점</dt><dd>지면 확보 계약과 캠페인 운영(타깃, 소재, 분석)은 별도 업무로 관리</dd></div><div class="fit"><dt>맞는 경우</dt><dd>프리미엄 지면 선점, 성수기 일정 대비</dd></div></dl></div>
</div>
<p class="dk-say">예산이 있는 광고주는 프리미엄 지면을 직접 예약으로, 나머지를 실시간 입찰로 병행</p>
</div>

.dk-duo{display:flex;flex-direction:column;gap:20px}
.dk-duo .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.dk-duo .c{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:26px 32px 8px;display:flex;flex-direction:column}
.dk-duo .tag{align-self:flex-start;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-duo h3{margin:2px 0 10px;font-size:var(--f-h);font-weight:700;line-height:1.25;letter-spacing:-.02em}
.dk-duo .d{margin:0 0 18px;font-size:var(--f-body);color:var(--ink2);min-height:50px}
.dk-duo dl{margin:auto 0 0;padding:0}
.dk-duo dl div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--line);align-items:baseline}
.dk-duo dt{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-duo dd{margin:0;font-size:var(--f-body);color:var(--ink2);line-height:1.45}
.dk-duo .fit dd{font-weight:600;color:var(--ink)}
.dk-duo .c.hot{background:var(--acw);box-shadow:none}
.dk-duo .c.hot .tag,.dk-duo .c.hot h3{color:var(--ac)}
.dk-duo .c.hot dl div{border-top-color:var(--acm)}