문제와 대응 3쌍

진단에서 나온 문제 3개와 각각의 대응을 위아래로 짝지어 보여줄 때. 문제 3개 고정(2개면 열 수정), 문제·대응 각각 제목 + 설명 2줄, 맨 아래 기대 변화 1줄. 값 바꾸는 법: .col 하나가 한 쌍. h3.q=문제, 그 아래 .d=현상, 화살표 뒤 h3=대응, .d=방법, .g=기대 변화. 가장 먼저 할 한 쌍에 class="hot".

slideworks.io 컨설팅 장표 해설(https://slideworks.io/templates/consulting-powerpoint-templates): 고정 격자, 여백, 강조색을 핵심 한 곳에만 쓰는 방식. 컨설팅 보고서의 issue / response 대응표를 열 단위로 세운 방식. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-pairs">
  <div class="col hot"><p class="k">문제 01</p><h3 class="q">전환 수치 불일치</h3><p class="d">매체 보고서의 전환 수와 자사몰 실제 주문 수가 30% 넘게 차이</p><span class="ar"></span><p class="k a">대응</p><h3>추적 기준 통일</h3><p class="d">전환 이벤트를 다시 설정하고 매주 주문 번호 단위로 대조</p><p class="g"><b>기대 변화</b>수치 차이 5% 이내</p></div>
  <div class="col"><p class="k">문제 02</p><h3 class="q">소재 피로</h3><p class="d">같은 소재를 3개월 넘게 사용해 클릭률이 매달 지속 하락</p><span class="ar"></span><p class="k a">대응</p><h3>소재 묶음 교체</h3><p class="d">메시지 3종을 4주 주기로 교체하고 성과 낮은 묶음은 중단</p><p class="g"><b>기대 변화</b>클릭률 기준선 회복</p></div>
  <div class="col"><p class="k">문제 03</p><h3 class="q">신규 고객 정체</h3><p class="d">주문의 70%가 기존 고객에서 발생, 신규 유입 경로 부족</p><span class="ar"></span><p class="k a">대응</p><h3>신규 전용 캠페인 분리</h3><p class="d">기존 구매자를 제외한 대상에게만 노출하는 별도 예산 배정</p><p class="g"><b>기대 변화</b>신규 주문 비중 40%</p></div>
</div>

.dk-pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:72px}
.dk-pairs .col{display:flex;flex-direction:column}
.dk-pairs .k{margin:0 0 2px;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-pairs h3{font-size:var(--f-lg);font-weight:700;margin:0 0 6px;line-height:1.35}
.dk-pairs h3.q{color:var(--ink2);font-weight:600}
.dk-pairs .d{margin:0;font-size:var(--f-body);color:var(--ink2);min-height:50px}
.dk-pairs .ar{display:block;position:relative;width:1px;height:30px;background:var(--g3);margin:14px 0 16px 8px}
.dk-pairs .ar::after{content:"";position:absolute;left:-3px;bottom:1px;width:7px;height:7px;border-right:1px solid var(--g3);border-bottom:1px solid var(--g3);transform:rotate(45deg)}
.dk-pairs .g{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:var(--f-body);font-weight:600;color:var(--ink)}
.dk-pairs .g b{display:block;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-pairs .hot .k.a{color:var(--ac)}
.dk-pairs .hot .ar{background:var(--ac)}
.dk-pairs .hot .ar::after{border-color:var(--ac)}