표지: 아래 정보 띠형

문서명을 위쪽에 크게, 대상·제안사·제출일·판 정보를 아래 흰 띠 4칸에 정리하는 표지. 문서명 2줄 이내, 띠 3~4칸. 값 바꾸는 법: h1 문서명, .scope 범위 한 줄, .band 의 칸 3~4개(칸 수를 바꾸면 grid-template-columns 의 4 를 같이 수정). 강조색은 띠 윗선 한 곳.

대기업 IR 자료와 증권사 리포트 표지의 하단 정보 띠 구성, 장 레이아웃 유형 정리(madegooddesigns.com/slide-layout-ideas), Behance·Dribbble pitch deck·editorial slide layout 검색 결과의 공통 구성. 구성 방식만 참고, 코드와 문구는 직접 제작.

<section class="slide lo-cover-band">
  <div class="body">
    <p class="kind">제안서 · 1차</p>
    <h1>모루리빙 2027 상반기<br>통합 디지털 마케팅 제안서</h1>
    <p class="scope">검색 광고, 디스플레이 광고, 인플루언서 협업, 자사몰 전환 개선</p>
  </div>
  <div class="band">
    <div><span>대상</span><p>모루리빙 마케팅본부</p></div>
    <div><span>제안사</span><p>슬로우베리</p></div>
    <div><span>제출일</span><p>2026년 10월 5일</p></div>
    <div><span>집행 기간</span><p>2027년 1월~6월</p></div>
  </div>
</section>

.slide.lo-cover-band{padding:0 64px}
.slide.lo-cover-band .body{padding:0;gap:0}
.slide.lo-cover-band .kind{font-size:var(--f-body);font-weight:600;color:var(--mu);margin:0}
.slide.lo-cover-band h1{font-size:var(--f-big);font-weight:700;line-height:1.2;letter-spacing:-.03em;margin:12px 0 24px}
.slide.lo-cover-band .scope{font-size:var(--f-lg);color:var(--ink2);margin:0}
.slide.lo-cover-band .band{flex:none;margin:0 -64px;padding:28px 64px 36px;background:var(--card);border-top:4px solid var(--ac);display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.slide.lo-cover-band .band span{display:block;font-size:var(--f-cap);color:var(--mu)}
.slide.lo-cover-band .band p{font-size:var(--f-lg);font-weight:600;margin:4px 0 0}