2×2 매트릭스(축 이름과 4칸)

두 가지 기준으로 과제나 대상을 네 묶음으로 나눌 때. 효과 × 실행 난이도, 구매력 × 관심도. 4칸 고정, 칸마다 이름·판단 1줄·해당 항목 1줄. 값 바꾸는 법: .y=세로축(위 끝, 축 이름, 아래 끝), .x=가로축. 칸 순서는 왼쪽 위, 오른쪽 위, 왼쪽 아래, 오른쪽 아래. 말하려는 한 칸에 class="hot".

Deckary MBB 장표 유형 정리(https://deckary.com/blog/consulting-slide-templates). BCG 성장·점유율 매트릭스 이래의 2×2 장표 관행: 축은 실선, 칸 구분은 옅은 선, 한 칸만 색. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-m2">
  <div class="y"><span>높음</span><b>기대 효과</b><span>낮음</span></div>
  <div class="g"><div class="c hot"><h3>집중 투자</h3><p>효과 크고 바로 실행 가능</p><p class="e"><b>해당 과제</b>검색어 재분류, 장바구니 리타기팅</p></div><div class="c"><h3>단계 추진</h3><p>효과 크지만 준비 기간 필요</p><p class="e"><b>해당 과제</b>상세페이지 개편, 추적 체계 재구축</p></div><div class="c"><h3>틈틈이 처리</h3><p>효과 작지만 손쉬움</p><p class="e"><b>해당 과제</b>확장 소재 문구 정리, 제외 검색어 추가</p></div><div class="c"><h3>보류</h3><p>효과 작고 부담 큼</p><p class="e"><b>해당 과제</b>신규 매체 전면 도입</p></div></div>
  <div></div><div class="x"><span>쉬움</span><b>실행 난이도</b><span>어려움</span></div>
</div>

.dk-m2{display:grid;grid-template-columns:72px minmax(0,1fr);row-gap:10px}
.dk-m2 .y{display:flex;flex-direction:column;justify-content:space-between;padding:6px 0}
.dk-m2 .y span,.dk-m2 .y b{font-size:var(--f-cap);color:var(--mu);font-weight:400}
.dk-m2 .y b,.dk-m2 .x b{font-weight:600;color:var(--ink2)}
.dk-m2 .x{display:flex;justify-content:space-between;padding:0 8px;font-size:var(--f-cap);color:var(--mu)}
.dk-m2 .g{display:grid;grid-template-columns:1fr 1fr;border-left:1px solid var(--g3);border-bottom:1px solid var(--g3)}
.dk-m2 .c{height:172px;padding:22px 32px;display:flex;flex-direction:column}
.dk-m2 .c:nth-child(odd){border-right:1px dashed var(--line2)}
.dk-m2 .c:nth-child(-n+2){border-bottom:1px dashed var(--line2)}
.dk-m2 h3{font-size:var(--f-lg);font-weight:700;margin:0;line-height:1.35}
.dk-m2 p{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-m2 .e{margin-top:auto;font-size:var(--f-sm);color:var(--ink)}
.dk-m2 .e b{display:block;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-m2 .hot{background:var(--acw)}
.dk-m2 .hot h3{color:var(--ac)}