3×3 우선순위 매트릭스와 실행 순서

과제가 6~9개일 때 효과와 난이도를 3단계씩 나눠 배치하고, 오른쪽에 실행 순서를 정리할 때. 9칸 고정(빈 칸 가능), 칸마다 과제 1개(10자 이내). 값 바꾸는 법: .g 의 .c 9칸: 윗줄이 효과 높음, 왼쪽 열이 쉬움. 칸 등급은 class t1(1순위, 강조 바탕) / t2(회색) / t3(테두리만). 오른쪽 목록은 등급별 요약 3줄. 강조는 1순위 묶음에만.

Deckary MBB 장표 유형 정리(https://deckary.com/blog/consulting-slide-templates). GE-McKinsey 9칸 매트릭스의 3단 음영(우선·선별·보류) 방식. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-m3">
  <div class="mx">
    <div class="y"><span>높음</span><b>기대 효과</b><span>낮음</span></div>
    <div class="g"><div class="c t1">검색어 재분류</div><div class="c t1">리타기팅 구간 분리</div><div class="c t2">상세페이지 개편</div><div class="c t1">소재 묶음 교체</div><div class="c t2">쇼핑검색 확대</div><div class="c t3">영상 매체 시험</div><div class="c t2">제외 검색어 정리</div><div class="c t3">확장 소재 추가</div><div class="c t3">신규 매체 도입</div></div>
    <div></div><div class="x"><span>쉬움</span><b>실행 난이도</b><span>어려움</span></div>
  </div>
  <ol>
    <li class="hot"><b>1순위</b><h3>첫 달 실행</h3><p>검색어 재분류, 리타기팅 구간 분리, 소재 묶음 교체</p></li>
    <li><b>2순위</b><h3>2~3개월 차</h3><p>상세페이지 개편, 쇼핑검색 확대, 제외 검색어 정리</p></li>
    <li><b>3순위</b><h3>성과 확인 뒤 판단</h3><p>영상 매체 시험, 확장 소재 추가, 신규 매체 도입</p></li>
  </ol>
</div>

.dk-m3{display:grid;grid-template-columns:680px minmax(0,1fr);gap:56px;align-items:center}
.dk-m3 .mx{display:grid;grid-template-columns:72px minmax(0,1fr);row-gap:10px}
.dk-m3 .y{display:flex;flex-direction:column;justify-content:space-between;padding:6px 0}
.dk-m3 .y span,.dk-m3 .y b{font-size:var(--f-cap);color:var(--mu);font-weight:400}
.dk-m3 .y b,.dk-m3 .x b{font-weight:600;color:var(--ink2)}
.dk-m3 .x{display:flex;justify-content:space-between;padding:0 8px;font-size:var(--f-cap);color:var(--mu)}
.dk-m3 .g{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.dk-m3 .c{height:104px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 16px;font-size:var(--f-body);font-weight:600;border-radius:4px;line-height:1.4}
.dk-m3 .t1{background:var(--acw);color:var(--ac2)}
.dk-m3 .t2{background:var(--soft);color:var(--ink)}
.dk-m3 .t3{background:transparent;border:1px solid var(--line);color:var(--mu);font-weight:400}
.dk-m3 ol{list-style:none;margin:0;padding:0}
.dk-m3 li{padding:16px 0;border-bottom:1px solid var(--line)}
.dk-m3 li:last-child{border-bottom:0}
.dk-m3 li b{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-m3 li.hot b{color:var(--ac)}
.dk-m3 h3{font-size:var(--f-lg);font-weight:700;margin:0 0 2px;line-height:1.35}
.dk-m3 li p{margin:0;font-size:var(--f-sm);color:var(--ink2)}