/* 133 제작비, 홍보비, 운영비 예산과 우선순위 = 예산 봉투와 열두 달 지출(2026-10-16 글마다 다른 레이아웃).
   개발비 항목은 쌓는 블록, 견적 차이는 가격표 둘과 원인 꼬리표, 별도 확인 항목은 포함과 제외 칸이 있는 견적 부록 표,
   개발 홍보 운영은 봉투 세 장, 운영비는 열두 달 누적 막대와 색 범례 목록, 조정은 줄일 것과 지킬 것, 요청 자료는 확정 표시 문서,
   진행 방식은 대금 분할 막대(5:5, 3:3:4) */
.v-artd .sp-133 .prose{font-size:17px}
.v-artd .sp-133 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-133 .prose h2::before,.v-artd .sp-133 .prose h2::after{content:none}
.v-artd .sp-133 :where(.prose) .bg-s{padding:58px 0 6px}
.v-artd .sp-133 :where(.prose) .bg-s>p{margin:0 0 16px}
.v-artd .sp-133 :where(.prose) .bg-lead{font-size:20px;line-height:1.7;color:var(--ink);margin:0 0 12px;font-weight:600}
.v-artd .sp-133 :where(.prose) .bg-sub{margin:0;color:var(--sub)}
.v-artd .sp-133 :where(.prose) .bg{--ca:var(--navy);--cb:var(--blue);--cc:#f5b400}

/* 블록 */
.v-artd .sp-133 :where(.prose) .bg-blocks{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 20px;padding:14px;border-radius:12px;background:var(--soft)}
.v-artd .sp-133 :where(.prose) .bk{flex:1 0 auto;padding:16px 14px 14px;border-radius:6px;background:var(--blue);color:#fff;font-size:14.5px;font-weight:800;text-align:center;box-shadow:inset 0 -5px 0 rgba(0,0,0,.18);position:relative}
.v-artd .sp-133 :where(.prose) .bk::before{content:"";position:absolute;left:14px;right:14px;top:-5px;height:5px;background:repeating-linear-gradient(90deg,currentColor 0 12px,transparent 12px 22px);opacity:.0}
.v-artd .sp-133 :where(.prose) .bk-w2{flex-basis:40%;background:var(--navy)}
.v-artd .sp-133 :where(.prose) .bk-q{background:#fff;color:var(--sub);border:2px dashed #9aa1b5;box-shadow:none}

/* 가격표 둘 */
.v-artd .sp-133 :where(.prose) .bg-tags{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:center;margin:6px 0 20px}
.v-artd .sp-133 :where(.prose) .tg-pair{display:flex;align-items:flex-end;gap:14px;height:150px}
.v-artd .sp-133 :where(.prose) .tg{flex:1;display:grid;place-items:end center;padding:0 0 14px;border-radius:10px 10px 4px 4px;font-size:15px;font-weight:800;color:#fff;position:relative}
.v-artd .sp-133 :where(.prose) .tg::before{content:"";position:absolute;left:50%;top:12px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;opacity:.9}
.v-artd .sp-133 :where(.prose) .tg-lo{height:60%;background:var(--blue)}
.v-artd .sp-133 :where(.prose) .tg-hi{height:100%;background:var(--navy)}
.v-artd .sp-133 :where(.prose) .tg-why{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.v-artd .sp-133 :where(.prose) .tg-why::before{content:"차이의 원인 확인";width:100%;font-size:13px;font-weight:800;color:var(--sub)}
.v-artd .sp-133 :where(.prose) .tg-why li{margin:0;padding:8px 14px 8px 12px;border-radius:4px 999px 999px 4px;background:var(--blue2);color:#1d3fc4;font-size:14.5px;font-weight:800}
.v-artd .sp-133 :where(.prose) .tg-why li::before{content:"?";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:50%;background:#1d3fc4;color:#fff;font-size:11px}

/* 견적 부록 표 */
.v-artd .sp-133 :where(.prose) .bg-appx{margin:6px 0 10px;overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.v-artd .sp-133 :where(.prose) .bg-appx table{margin:0;min-width:640px;border-radius:0;font-size:14px}
.v-artd .sp-133 :where(.prose) .bg-appx th{font-size:13px;padding:10px 12px;text-align:center}
.v-artd .sp-133 :where(.prose) .bg-appx th:nth-child(-n+2){text-align:left}
.v-artd .sp-133 :where(.prose) .bg-appx td{padding:12px;vertical-align:top;line-height:1.55}
.v-artd .sp-133 :where(.prose) .bg-appx td:first-child{width:130px;color:var(--ink)}
.v-artd .sp-133 :where(.prose) .bg-appx td:nth-child(2){color:#3a4152;font-weight:400}
.v-artd .sp-133 :where(.prose) .bg-appx td:nth-child(n+3){width:58px;text-align:center;vertical-align:middle}
.v-artd .sp-133 :where(.prose) .bg-appx td:last-child{width:90px;background:repeating-linear-gradient(transparent 0 26px,#dfe3ee 26px 27px)}
.v-artd .sp-133 :where(.prose) .bg-appx td i{display:inline-block;width:18px;height:18px;border:1.5px solid #8a93a8;border-radius:50%}

/* 봉투 셋 */
.v-artd .sp-133 :where(.prose) .bg-env{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:6px 0 20px}
.v-artd .sp-133 :where(.prose) .ev{position:relative;padding:58px 18px 18px;border-radius:8px;background:#fff;border:1.5px solid #c9cfe0;overflow:hidden}
.v-artd .sp-133 :where(.prose) .ev-flap{position:absolute;left:0;right:0;top:0;height:46px;margin:0;background:var(--blue2);clip-path:polygon(0 0,100% 0,50% 100%)}
.v-artd .sp-133 :where(.prose) .ev:nth-child(2) .ev-flap{background:#c9d4ff}
.v-artd .sp-133 :where(.prose) .ev:nth-child(3) .ev-flap{background:#dfe3ee}
.v-artd .sp-133 :where(.prose) .ev-k{position:absolute;left:50%;top:12px;margin:0;transform:translateX(-50%);font-size:16px;font-weight:800;color:var(--ink)}
.v-artd .sp-133 :where(.prose) .ev ul{margin:0;padding:0;list-style:none}
.v-artd .sp-133 :where(.prose) .ev li{margin:0;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14.5px;color:#3a4152}
.v-artd .sp-133 :where(.prose) .ev li:last-child{border-bottom:0}

/* 열두 달 누적 막대 */
.v-artd .sp-133 :where(.prose) .bg-year{margin:6px 0 18px;padding:18px 20px 14px;border-radius:14px;background:var(--soft)}
.v-artd .sp-133 :where(.prose) .yr-bars{display:flex;align-items:flex-end;gap:8px;height:150px;border-bottom:2px solid var(--ink)}
.v-artd .sp-133 :where(.prose) .yr-bars i{flex:1;display:block;height:calc((var(--a) + var(--b) + var(--c)) * 11px);background:linear-gradient(to top,var(--ca) 0 calc(var(--a) * 11px),var(--cb) calc(var(--a) * 11px) calc((var(--a) + var(--b)) * 11px),var(--cc) calc((var(--a) + var(--b)) * 11px));border-radius:4px 4px 0 0}
.v-artd .sp-133 :where(.prose) .yr-k{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0 4px!important;font-size:13.5px;font-weight:700;color:var(--ink)}
.v-artd .sp-133 :where(.prose) .yr-k span::before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:3px;vertical-align:-1px}
.v-artd .sp-133 :where(.prose) .k-a::before{background:var(--ca)}.v-artd .sp-133 :where(.prose) .k-b::before{background:var(--cb)}.v-artd .sp-133 :where(.prose) .k-c::before{background:var(--cc)}
.v-artd .sp-133 :where(.prose) .yr-f{margin:0!important;font-size:12.5px;color:var(--sub)}
.v-artd .sp-133 :where(.prose) .bg-ops{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:0 0 18px}
.v-artd .sp-133 :where(.prose) .bg-ops div{padding:12px 14px 12px 16px;border-left:4px solid;border-radius:0 10px 10px 0;background:#fff;box-shadow:0 0 0 1px var(--line)}
.v-artd .sp-133 :where(.prose) .o-a{border-left-color:var(--ca)!important}.v-artd .sp-133 :where(.prose) .o-b{border-left-color:var(--cb)!important}.v-artd .sp-133 :where(.prose) .o-c{border-left-color:var(--cc)!important}
.v-artd .sp-133 :where(.prose) .bg-ops dt{font-size:15.5px;font-weight:800;color:var(--ink)}
.v-artd .sp-133 :where(.prose) .bg-ops dd{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--sub)}

/* 줄일 것과 지킬 것 */
.v-artd .sp-133 :where(.prose) .bg-adj{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:6px 0 20px}
.v-artd .sp-133 :where(.prose) .aj{padding:18px 20px;border-radius:14px}
.v-artd .sp-133 :where(.prose) .aj-k{margin:0 0 10px;font-size:17px;font-weight:800}
.v-artd .sp-133 :where(.prose) .aj ul{margin:0;padding:0;list-style:none}
.v-artd .sp-133 :where(.prose) .aj li{margin:0;padding:5px 0 5px 22px;position:relative;font-size:15px}
.v-artd .sp-133 :where(.prose) .aj-cut{border:2px dashed var(--blue);color:var(--ink)}
.v-artd .sp-133 :where(.prose) .aj-cut .aj-k{color:#1d3fc4}
.v-artd .sp-133 :where(.prose) .aj-cut li::before{content:"✂";position:absolute;left:0;color:var(--blue);font-size:14px}
.v-artd .sp-133 :where(.prose) .aj-keep{background:var(--navy);color:#e3e7f7}
.v-artd .sp-133 :where(.prose) .aj-keep .aj-k{color:#fff}
.v-artd .sp-133 :where(.prose) .aj-keep li::before{content:"";position:absolute;left:2px;top:12px;width:10px;height:8px;border-radius:2px;background:#9fb3ff;box-shadow:0 -5px 0 -2px #9fb3ff}
.v-artd .sp-133 :where(.prose) .bg-sum{margin:6px 0 0;padding:18px 22px;border-radius:14px;border:2px solid var(--ink);font-size:15.5px;line-height:1.7}
.v-artd .sp-133 :where(.prose) .bg-sum b{display:block;color:var(--ink)}

/* 요청 문서 */
.v-artd .sp-133 :where(.prose) .bg-req{max-width:520px;margin:6px 0 18px;padding:20px 22px;border-radius:6px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 36px -28px rgba(27,31,58,.45)}
.v-artd .sp-133 :where(.prose) .rq-h{margin:0 0 10px!important;padding-bottom:10px;border-bottom:2px solid var(--ink);font-size:17px;font-weight:800;color:var(--ink)}
.v-artd .sp-133 :where(.prose) .rq{display:flex;align-items:center;gap:8px;margin:0;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.v-artd .sp-133 :where(.prose) .rq span{flex:1;font-weight:700;color:var(--ink)}
.v-artd .sp-133 :where(.prose) .rq em{font-style:normal;padding:4px 10px;border-radius:999px;border:1px solid #c3c8d6;font-size:12.5px;font-weight:700;color:var(--sub)}
.v-artd .sp-133 :where(.prose) .rq em.ok{border-color:var(--blue);color:#1d3fc4}

/* 진행 방식 = 대금 분할 막대 */
.v-artd .sp-133 :where(.prose) .bg-we{margin:36px 0 10px;padding:28px 30px;border-radius:20px;background:var(--navy);color:#fff}
.v-artd .sp-133 :where(.prose) .bw-k{margin:0 0 6px;font-size:13px;font-weight:800;color:#9fb3ff}
.v-artd .sp-133 :where(.prose) .bw-t{margin:0 0 18px;font-size:20px;font-weight:800;line-height:1.45}
.v-artd .sp-133 :where(.prose) .bw-pay{margin-bottom:16px}
.v-artd .sp-133 :where(.prose) .py{display:flex;align-items:center;gap:14px;margin:0 0 10px}
.v-artd .sp-133 :where(.prose) .py-l{flex:none;width:58px;font-size:18px;font-weight:800}
.v-artd .sp-133 :where(.prose) .py-bar{flex:1;display:flex;gap:4px}
.v-artd .sp-133 :where(.prose) .py-bar i{display:flex;align-items:center;justify-content:center;height:38px;border-radius:8px;background:#fff;color:var(--navy);font-style:normal;font-size:13px;font-weight:800}
.v-artd .sp-133 :where(.prose) .py-bar i::after{content:"%"}
.v-artd .sp-133 :where(.prose) .py-bar i:last-child{background:var(--blue);color:#fff}
.v-artd .sp-133 :where(.prose) .bw-d{margin:0 0 20px;font-size:15.5px;line-height:1.7;color:#d7dcf0}
.v-artd .sp-133 :where(.prose) .bw-btn{display:inline-flex;padding:13px 24px;border-radius:999px;background:#fff;color:var(--navy)!important;font-weight:800;text-decoration:none!important}
.v-artd .sp-133 :where(.prose) .bw-btn:hover{background:var(--blue2)}

.v-artd .sp-133 :where(.prose) .bg-rel{margin:40px 0 18px;padding:18px 0 0;border-top:1px solid var(--line);list-style:none}
.v-artd .sp-133 :where(.prose) .bg-rel li{margin:0;padding:6px 0}
.v-artd .sp-133 :where(.prose) .bg-rel li::before{content:none}
.v-artd .sp-133 :where(.prose) .bg-rel a{font-weight:700;text-decoration:none}
.v-artd .sp-133 :where(.prose) .bg-rel a::before{content:"→ ";color:var(--sub)}

@media (max-width:720px){
  .v-artd .sp-133 :where(.prose) .bg-lead{font-size:18px}
  .v-artd .sp-133 .prose h2{font-size:23px}
  .v-artd .sp-133 :where(.prose) .bg-s{padding-top:46px}
  .v-artd .sp-133 :where(.prose) .bg-tags{grid-template-columns:1fr}
  .v-artd .sp-133 :where(.prose) .tg-pair{height:110px;max-width:260px}
  .v-artd .sp-133 :where(.prose) .bg-env{grid-template-columns:1fr}
  .v-artd .sp-133 :where(.prose) .yr-bars{gap:4px;height:130px}
  .v-artd .sp-133 :where(.prose) .yr-bars i{height:calc((var(--a) + var(--b) + var(--c)) * 9px);background:linear-gradient(to top,var(--ca) 0 calc(var(--a) * 9px),var(--cb) calc(var(--a) * 9px) calc((var(--a) + var(--b)) * 9px),var(--cc) calc((var(--a) + var(--b)) * 9px))}
  .v-artd .sp-133 :where(.prose) .bg-ops{grid-template-columns:1fr}
  .v-artd .sp-133 :where(.prose) .bg-adj{grid-template-columns:1fr}
  .v-artd .sp-133 :where(.prose) .bg-we{padding:24px 22px}
}
