본문: 4칸 격자

개선 지점·점검 항목 4가지를 2×2 로. 카드 없이 선으로만 나눠 글이 왼쪽 시작선에 붙는다. 4칸 고정, 칸마다 설명 2줄. 값 바꾸는 법: 칸마다 .k(위치·구분) .t(할 일) 설명 2줄. 6칸으로 늘리려면 grid-template-columns 를 3열로, nth-child 규칙을 함께 수정.

컨설팅 보고서의 2×2 구성, 장 레이아웃 유형 정리(madegooddesigns.com/slide-layout-ideas), Behance·Dribbble pitch deck·editorial slide layout 검색 결과의 공통 구성. 구성 방식만 참고, 코드와 문구는 직접 제작.

<section class="slide lo-grid4">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 03 · 매체별 실행안</span></div>
  <div class="hd"><p class="lb">매체별 실행안</p><h1>자사몰 전환 개선 4개 지점</h1><p class="lede">상세페이지에서 결제 완료까지, 모바일 화면 기준</p></div>
  <div class="body">
    <div class="g">
      <div><p class="k">상세페이지 첫 화면</p><p class="t">가격과 배송 정보 상단 고정</p><p>현재 4회 스크롤 후 노출. 첫 화면 배치로 가격 확인 전 이탈 축소</p></div>
      <div><p class="k">리뷰 영역</p><p class="t">리뷰 요약을 구매 버튼 위로 이동</p><p>리뷰 도달률 21%. 사진 리뷰 3건과 평점을 상단에 요약 노출</p></div>
      <div><p class="k">장바구니</p><p class="t">함께 구매한 상품 추천 영역 신설</p><p>장바구니 이탈률 58%. 교체용 소모품 추천으로 묶음 구매 유도</p></div>
      <div><p class="k">결제</p><p class="t">간편결제 버튼 우선 배치</p><p>결제 단계 5개에서 3개로 축소. 비회원 주문 경로는 유지</p></div>
    </div>
  </div>
  <div class="pg">22</div>
</section>

.slide.lo-grid4 .g{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line2)}
.slide.lo-grid4 .g>div{padding:26px 40px 26px 0;border-bottom:1px solid var(--line)}
.slide.lo-grid4 .g>div:nth-child(even){padding:26px 0 26px 40px;border-left:1px solid var(--line)}
.slide.lo-grid4 .g p{margin:0;color:var(--ink2)}
.slide.lo-grid4 .g .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-grid4 .g .t{font-size:var(--f-lg);font-weight:700;color:var(--ink);margin:4px 0 8px}