제안 시스템

디자인킷 · 레이아웃

조건: 패키지 3종 구성(금액 빈칸)

D-레이아웃-완성-조건-패키지3종

조건: 패키지 3종 구성(금액 빈칸)

언제 쓰는가

결(結). 제안 조건 파트의 첫 장. 운영 범위를 3단계 구성으로 나란히 놓고 권장 구성을 표시. 금액 칸은 비워 두고 견적서로 넘김. 구성 3종 고정, 비교 항목 5~7행. 바꿔야 할 값: 구성 이름과 한 줄 설명, 항목별 내용, 맞는 경우, 권장 구성 1개(class hot), 금액 칸 문구, 계약 조건 한 줄. 값 바꾸는 법: thead 의 구성 이름(.n)과 설명(.d), tbody 행 교체. 권장 열은 th·td 모두 class="hot". 금액 행의 .blank 는 비워 둔 칸(견적서 기재). 금액을 직접 넣지 말 것.

참고

SaaS 요금제 비교 표(가운데 권장안을 옅은 바탕으로 띄우는 3열 구성), 국내 대행사 운영 대행 견적 양식의 범위 표를 참고. 금액은 싣지 않음. 직접 제작.

조각

<section class="slide lo-tm-pkg">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 05 · 제안 조건</span></div>
  <div class="hd"><p class="lb">운영 패키지</p><h1>운영 패키지 3종, 기본안 시나리오에는 표준형 해당</h1><p class="lede">운영 범위에 따른 3가지 구성. 6개월 뒤 상위 구성으로 전환 가능</p></div>
  <div class="body">
<div class="cd tb">
      <table>
        <thead><tr><th>구성</th><th><p class="n">기본형</p><p class="d">검색 중심 유지 관리</p></th><th class="hot"><p class="n">표준형<b>권장</b></p><p class="d">검색과 콘텐츠 병행</p></th><th><p class="n">확장형</p><p class="d">영상 포함 전 영역</p></th></tr></thead>
        <tbody>
          <tr><td class="k">운영 매체</td><td>검색 광고, 쇼핑 검색</td><td class="hot">기본형 + 블로그 후기, 재구매 알림</td><td>표준형 + 숏폼 영상, 디스플레이</td></tr>
          <tr><td class="k">월 콘텐츠</td><td>없음</td><td class="hot">블로그 12건</td><td>블로그 12건, 숏폼 4편</td></tr>
          <tr><td class="k">소재 교체</td><td>월 1회</td><td class="hot">2주 1회</td><td>매주</td></tr>
          <tr><td class="k">성과 보고</td><td>월간</td><td class="hot">주간과 월간</td><td>주간, 월간, 상시 대시보드</td></tr>
          <tr><td class="k">전담 인력</td><td>1명</td><td class="hot">2명</td><td>3명</td></tr>
          <tr><td class="k">맞는 경우</td><td>예산 동결, 현 수준 유지</td><td class="hot">상반기 전환 1.5배 목표</td><td>신제품 출시 병행</td></tr>
          <tr class="pr"><td class="k">월 운영비</td><td><span class="blank">견적서 기재</span></td><td class="hot"><span class="blank">견적서 기재</span></td><td><span class="blank">견적서 기재</span></td></tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="pg">34</div>
  <div class="src">금액은 별도 견적서에 기재. 매체비는 운영비와 별도, 최소 계약 기간 3개월</div>
</section>

스타일

.slide.lo-tm-pkg .hd .lb{color:var(--mu)}
.slide.lo-tm-pkg :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-tm-pkg .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-tm-pkg .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-tm-pkg .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-tm-pkg .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-tm-pkg table{width:100%;border-collapse:collapse}
.slide.lo-tm-pkg th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:0 14px 10px;border-bottom:1px solid var(--line2)}
.slide.lo-tm-pkg td{font-size:var(--f-sm);color:var(--ink2);padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.slide.lo-tm-pkg tr:last-child td{border-bottom:0}
.slide.lo-tm-pkg td.k{font-size:var(--f-body);font-weight:700;color:var(--ink)}
.slide.lo-tm-pkg .tb{padding:0 22px}
.slide.lo-tm-pkg th{vertical-align:bottom;padding:20px 18px 12px}
.slide.lo-tm-pkg th:first-child,.slide.lo-tm-pkg td.k{width:150px;padding-left:14px}
.slide.lo-tm-pkg th .n{font-size:var(--f-xl);font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:space-between}
.slide.lo-tm-pkg th .n b{font-size:var(--f-cap);font-weight:700;color:var(--card);background:var(--ac);border-radius:12px;padding:1px 12px}
.slide.lo-tm-pkg th .d{font-size:var(--f-sm);font-weight:400;color:var(--ink2)}
.slide.lo-tm-pkg td{padding:9px 18px;font-size:var(--f-body)}
.slide.lo-tm-pkg th.hot,.slide.lo-tm-pkg td.hot{background:var(--acw)}
.slide.lo-tm-pkg th.hot{box-shadow:inset 0 3px 0 var(--ac)}
.slide.lo-tm-pkg th.hot .n{color:var(--ac)}
.slide.lo-tm-pkg td.hot{font-weight:600;color:var(--ink)}
.slide.lo-tm-pkg tr.pr td{border-top:1px solid var(--line2);padding-top:12px;padding-bottom:16px}
.slide.lo-tm-pkg .blank{display:block;text-align:center;font-size:var(--f-cap);font-weight:400;color:var(--mu);background:var(--card);border:1px dashed var(--line2);border-radius:var(--r-sm);padding:6px 0}