본문: 3열 카드

같은 무게의 과제·서비스·원칙 3가지를 나란히. 카드마다 제목, 설명, 산출물. 3열 고정, 설명 3줄 이내. 값 바꾸는 법: 카드마다 .k .t(12자 이내) .d(3줄 이내) .f(산출물 한 줄). 카드 높이는 자동으로 같아진다.

장 레이아웃 유형 정리(madegooddesigns.com/slide-layout-ideas), Behance·Dribbble pitch deck·editorial slide layout 검색 결과의 공통 구성 의 three-column grid(세 칸의 구조와 높이를 같게). 구성 방식만 참고, 코드와 문구는 직접 제작.

<section class="slide lo-card3">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 03 · 매체별 실행안</span></div>
  <div class="hd"><p class="lb">매체별 실행안</p><h1>상반기 실행 과제 3가지</h1><p class="lede">과제별 실행 내용과 산출물</p></div>
  <div class="body">
    <div class="cols">
      <div class="c"><p class="k">과제 1</p><p class="t">검색 광고 구조 재편</p><p class="d">480개 키워드를 구매 의도 기준으로 재분류. 전환 없는 키워드 예산을 상위 120개로 이동</p><div class="f"><span>산출물</span><p>키워드 분류표, 주간 입찰 조정 기록</p></div></div>
      <div class="c"><p class="k">과제 2</p><p class="t">리뷰 콘텐츠 제작과 재사용</p><p class="d">리빙 분야 인플루언서 12명과 사용 후기 영상 제작. 상세페이지와 광고 소재로 2차 활용</p><div class="f"><span>산출물</span><p>월 12건 콘텐츠, 2차 활용 동의서</p></div></div>
      <div class="c"><p class="k">과제 3</p><p class="t">구매 고객 재방문 설계</p><p class="d">구매 후 30일, 60일, 85일에 맞춤 광고와 알림 메시지 발송. 교체 주기 상품에 우선 적용</p><div class="f"><span>산출물</span><p>발송 시나리오, 재구매율 월간 추적표</p></div></div>
    </div>
  </div>
  <div class="pg">16</div>
</section>

.slide.lo-card3 .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.slide.lo-card3 .c{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:26px 28px;display:flex;flex-direction:column}
.slide.lo-card3 .c p{margin:0}
.slide.lo-card3 .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-card3 .c .t{font-size:var(--f-xl);font-weight:700;letter-spacing:-.02em;margin:6px 0 12px}
.slide.lo-card3 .d{color:var(--ink2);flex:1}
.slide.lo-card3 .f{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.slide.lo-card3 .f span{font-size:var(--f-cap);color:var(--mu)}
.slide.lo-card3 .f p{font-weight:600}