제안 시스템

디자인킷 · 반폭

반폭 · 견적 구성 표(항목, 산정 방식, 금액 빈칸)

D-반폭-견적구성표

반폭 · 견적 구성 표(항목, 산정 방식, 금액 빈칸)

언제 쓰는가

견적이 어떤 항목으로 이루어지고 각각 어떻게 산정되는지 밝히되 금액은 견적서로 넘길 때. 항목 3~4행과 합계 1행. 항목 6자 이내, 산정 방식 14자 이내. 금액 칸은 「견적서 기재」 빈칸으로 둔다. 값 바꾸는 법: .r 하나가 한 항목. .k=항목, 가운데=산정 방식, 금액 칸은 .bx(견적서 기재) 그대로 두거나 다른 항목에 포함이면 .in(포함). 마지막 .r.sum 은 합계 행. 금액은 적지 않는다.

참고

직접 제작. 견적서의 항목과 산정 기준 열만 제안서로 옮기고 금액은 비워 두는 방식.

조각

<div class="dk dkh dkh-a-quote"><div class="dk-card"><p class="dk-lb">견적 구성과 산정 방식</p>
<div class="ls"><div class="th"><span>항목</span><span>산정 방식</span><span>금액</span></div>
<div class="r"><span class="k">매체비</span><span>월 집행 예산, 실비 정산</span><span class="bx">견적서 기재</span></div>
<div class="r"><span class="k">운영 수수료</span><span>매체비 대비 정률</span><span class="bx">견적서 기재</span></div>
<div class="r"><span class="k">소재 제작</span><span>제작 건수 × 건당 단가</span><span class="bx">견적서 기재</span></div>
<div class="r"><span class="k">보고와 분석</span><span>운영 수수료에 포함</span><span class="in">포함</span></div>
<div class="r sum"><span class="k">월 합계</span><span>부가세 별도, 실 집행액 기준</span><span class="bx">견적서 기재</span></div>
</div>
</div></div>

스타일

.dkh-a-quote .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-a-quote .dk-lb{flex:none;margin:0 0 10px}
.dkh-a-quote .nt{flex:none;margin:8px 0 0;font-size:var(--f-cap);color:var(--mu);line-height:1.4}
.dkh-a-quote .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-a-quote .th,.dkh-a-quote .r{display:grid;grid-template-columns:82px 1fr 88px;column-gap:12px;align-items:center}
.dkh-a-quote .th{flex:none;font-size:var(--f-cap);color:var(--mu);padding:0 0 7px;border-bottom:1px solid var(--line2);line-height:1.4}
.dkh-a-quote .r{flex:1;padding:5px 0;border-top:1px solid var(--line);font-size:var(--f-sm);line-height:1.45;color:var(--ink2)}
.dkh-a-quote .th + .r{border-top:0}
.dkh-a-quote .k{font-weight:600;color:var(--ink);white-space:nowrap}
.dkh-a-quote .bx{display:block;text-align:center;font-size:var(--f-cap);color:var(--mu);line-height:1.4;padding:3px 0;border:1px dashed var(--g2);border-radius:4px;white-space:nowrap}
.dkh-a-quote .in{text-align:center;font-size:var(--f-cap);color:var(--mu)}
.dkh-a-quote .r.sum{border-top:2px solid var(--ink)}
.dkh-a-quote .r.sum .k{font-weight:700}
.dkh-a-quote .r.sum .bx{border-color:var(--acm);background:var(--acw);color:var(--ac2);font-weight:600}