조건: 비용 항목 구조(항목·산식)

결(結). 패키지 구성 다음 장. 비용이 어떤 항목으로 이루어지고 각 항목이 어떻게 계산되는지를 금액 없이 산식으로 설명. 항목 4~6행, 포함·불포함 각 3~4줄. 바꿔야 할 값: 항목명, 포함 범위, 산식, 정산 시점, 성격 칩(실비·정액·건별), 포함·불포함 목록, 강조할 원칙 1개(class hot). 값 바꾸는 법: tbody 행 교체. .ty 는 성격 칩(실비·정액·건별). .fx 는 산식(곱하기는 ×). 합계 행의 .blank 는 비워 둔 칸. 오른쪽 .in(포함) .out(불포함) li 교체. 광고주가 가장 궁금해할 원칙 한 행에만 class="hot".

컨설팅·대행 계약서의 fee structure 표(항목·산정 기준·청구 시점), 국내 대행사 견적서의 매체비·대행 수수료·제작비 구분을 참고. 금액은 싣지 않음. 직접 제작.

<section class="slide lo-tm-cost">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 05 · 제안 조건</span></div>
  <div class="hd"><p class="lb">비용 구조</p><h1>비용은 5개 항목, 매체비는 실비 그대로 청구</h1><p class="lede">항목별 포함 범위와 산식, 정산 시점. 표준형 구성 기준</p></div>
  <div class="body">
<div class="grid">
      <div class="cd tb">
        <table>
          <thead><tr><th>항목</th><th>성격</th><th>포함 범위</th><th>산식</th><th>정산</th></tr></thead>
          <tbody>
            <tr class="hot"><td class="k">매체비</td><td><span class="ty">실비</span></td><td>검색 광고, 쇼핑 검색 집행 비용</td><td class="fx">매체 청구액 그대로</td><td>월말 실집행 기준</td></tr>
            <tr><td class="k">운영 수수료</td><td><span class="ty">정액</span></td><td>계정 운영, 입찰 조정, 보고</td><td class="fx">구성별 월 고정액</td><td>매월 선청구</td></tr>
            <tr><td class="k">콘텐츠 제작비</td><td><span class="ty">건별</span></td><td>블로그 후기 기획과 원고</td><td class="fx">건당 단가 × 발행 건수</td><td>월말 발행 건수 기준</td></tr>
            <tr><td class="k">소재 제작비</td><td><span class="ty">건별</span></td><td>광고 문구와 이미지 소재</td><td class="fx">종당 단가 × 제작 종수</td><td>월말 제작 종수 기준</td></tr>
            <tr><td class="k">측정 설정비</td><td><span class="ty">1회</span></td><td>추적 설정, 대시보드 구축</td><td class="fx">착수 시 1회</td><td>첫 달 청구</td></tr>
            <tr class="sum"><td class="k">월 합계</td><td colspan="3">매체비 + 운영 수수료 + 건별 제작비</td><td><span class="blank">견적서 기재</span></td></tr>
          </tbody>
        </table>
      </div>
      <div class="r">
        <p class="k">운영 수수료에 포함</p>
        <ul class="in"><li>검색어 추가와 제외, 입찰 조정</li><li>주간·월간 보고와 정기 회의</li><li>소재 교체 2주 1회 이내</li></ul>
        <p class="k">별도 협의</p>
        <ul class="out"><li>영상 촬영과 모델 섭외</li><li>랜딩 개발 수정 작업</li><li>인플루언서 원고료</li></ul>
      </div>
    </div>
  </div>
  <div class="pg">35</div>
  <div class="src">금액은 별도 견적서에 기재. 부가세 별도</div>
</section>

.slide.lo-tm-cost .hd .lb{color:var(--mu)}
.slide.lo-tm-cost :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-tm-cost .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-tm-cost .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-tm-cost .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-tm-cost .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-tm-cost table{width:100%;border-collapse:collapse}
.slide.lo-tm-cost 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-cost td{font-size:var(--f-sm);color:var(--ink2);padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.slide.lo-tm-cost tr:last-child td{border-bottom:0}
.slide.lo-tm-cost td.k{font-size:var(--f-body);font-weight:700;color:var(--ink)}
.slide.lo-tm-cost .grid{display:grid;grid-template-columns:1fr 290px;gap:44px;align-items:center}
.slide.lo-tm-cost .tb{padding:20px 22px 8px}
.slide.lo-tm-cost td.k{white-space:nowrap}
.slide.lo-tm-cost td{padding:12px 14px}
.slide.lo-tm-cost .ty{display:inline-block;font-size:var(--f-cap);font-weight:600;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line2);border-radius:12px;padding:1px 10px;white-space:nowrap}
.slide.lo-tm-cost .fx{color:var(--ink);font-weight:600}
.slide.lo-tm-cost td:last-child{font-size:var(--f-cap);color:var(--mu);white-space:nowrap}
.slide.lo-tm-cost tr.hot td.k,.slide.lo-tm-cost tr.hot .fx{color:var(--ac)}
.slide.lo-tm-cost tr.sum td{border-top:1px solid var(--line2)}
.slide.lo-tm-cost .blank{display:block;text-align:center;font-size:var(--f-cap);color:var(--mu);border:1px dashed var(--line2);border-radius:var(--r-sm);padding:5px 10px}
.slide.lo-tm-cost .r ul{margin:6px 0 22px;border-top:1px solid var(--line2)}
.slide.lo-tm-cost .r ul:last-child{margin-bottom:0}
.slide.lo-tm-cost .r li{font-size:var(--f-sm);color:var(--ink);padding:9px 0 9px 22px;border-bottom:1px solid var(--line);position:relative}
.slide.lo-tm-cost .r .in li::before{content:"";position:absolute;left:2px;top:13px;width:10px;height:5px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.slide.lo-tm-cost .r .out li{color:var(--ink2)}
.slide.lo-tm-cost .r .out li::before{content:"";position:absolute;left:2px;top:19px;width:10px;border-top:2px solid var(--g2)}