/* 368 범위형, 결과형, 정기 지원형, 시간제 계약 방식 = 요금제 카드처럼 나란한 계약 방식(2026-10-16 글마다 다른 레이아웃).
   처음은 갈래 나무(범위 확정 정도)와 계약 방식 세 장(가격 자리에 산정 단위), 방식별 확인은 표, 사전 검증은 관문과 신호 셋,
   방식 조합은 박람회 앱 사례(진행 방식), 후속 지원은 개발 단계부터 지원 시작까지의 선, 관리 기능은 비교 저울,
   공통 기준은 겹친 탭 셋, 시간 기준 예산은 사용 막대와 목표, 통지, 한도 표시, 상주와 원격은 세 칸 스위치, 기관은 인계 꾸러미 */
.v-artd .sp-368 .prose{font-size:17px}
.v-artd .sp-368 :where(.prose) .ct-lead{font-size:20px;line-height:1.7;color:var(--ink);margin:0 0 24px}
.v-artd .sp-368 :where(.prose) .ct-lead b{color:var(--blue)}
.v-artd .sp-368 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-368 .prose h2::before,.v-artd .sp-368 .prose h2::after{content:none}
.v-artd .sp-368 :where(.prose) .ct-s{padding:56px 0 4px}
.v-artd .sp-368 :where(.prose) .ct-s>p{margin:0 0 16px}
.v-artd .sp-368 .prose ul,.v-artd .sp-368 .prose ol{margin:0;padding:0;list-style:none}
.v-artd .sp-368 .prose li{margin:0}
.v-artd .sp-368 .prose li::before{content:none}

/* 갈래 나무 */
.v-artd .sp-368 :where(.prose) .ct-tree{margin:0 0 18px}
.v-artd .sp-368 :where(.prose) .tr-root{position:relative;width:max-content;max-width:100%;margin:0 auto 34px;padding:12px 22px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:800}
.v-artd .sp-368 :where(.prose) .tr-root::after{content:"";position:absolute;left:50%;top:100%;height:18px;border-left:2px solid var(--ink)}
.v-artd .sp-368 :where(.prose) .tr-br{position:relative;display:grid;grid-template-columns:2fr 1fr;gap:14px}
.v-artd .sp-368 :where(.prose) .tr-br::before{content:"";position:absolute;left:33%;right:16%;top:-16px;border-top:2px solid var(--ink)}
.v-artd .sp-368 :where(.prose) .br{position:relative;padding:14px 16px;border-radius:12px}
.v-artd .sp-368 :where(.prose) .br::before{content:"";position:absolute;left:50%;top:-16px;height:16px;border-left:2px solid var(--ink)}
.v-artd .sp-368 :where(.prose) .br p{margin:0}
.v-artd .sp-368 :where(.prose) .br-k{font-size:13px;font-weight:800}
.v-artd .sp-368 :where(.prose) .br-q{margin-top:4px!important;font-size:15.5px;font-weight:800;color:var(--ink)}
.v-artd .sp-368 :where(.prose) .br-a{background:var(--blue2)}
.v-artd .sp-368 :where(.prose) .br-a .br-k{color:#1d3fc4}
.v-artd .sp-368 :where(.prose) .br-b{background:#fff1c2}
.v-artd .sp-368 :where(.prose) .br-b .br-k{color:#6b5300}

/* 계약 방식 세 장 */
.v-artd .sp-368 :where(.prose) .ct-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.v-artd .sp-368 :where(.prose) .pl{padding:22px 18px;border-radius:18px;border:1px solid var(--line);background:#fff}
.v-artd .sp-368 :where(.prose) .pl p{margin:0}
.v-artd .sp-368 :where(.prose) .pl-n{font-size:15px;font-weight:800;color:var(--sub)}
.v-artd .sp-368 :where(.prose) .pl-p{margin:8px 0 14px!important;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:21px;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.v-artd .sp-368 :where(.prose) .pl li{position:relative;padding:6px 0 6px 24px;font-size:14px;line-height:1.5;color:#4a5060}
.v-artd .sp-368 :where(.prose) .pl li::after{content:"✓";position:absolute;left:0;top:6px;font-weight:800;color:var(--blue)}
.v-artd .sp-368 :where(.prose) .pl-b{background:var(--navy);border-color:var(--navy);transform:translateY(-8px)}
.v-artd .sp-368 :where(.prose) .pl-b .pl-n{color:#9fb3ff}
.v-artd .sp-368 :where(.prose) .pl-b .pl-p{color:#fff;border-color:rgba(255,255,255,.18)}
.v-artd .sp-368 :where(.prose) .pl-b li{color:#dfe4f7}
.v-artd .sp-368 :where(.prose) .pl-b li::after{color:var(--yellow)}
.v-artd .sp-368 :where(.prose) .pl-c .pl-p{color:#1d3fc4}

/* 확인 조건 표 */
.v-artd .sp-368 :where(.prose) .ct-cmp{margin:4px 0 14px;overflow-x:auto}
.v-artd .sp-368 :where(.prose) .ct-cmp table{margin:0;min-width:560px;font-size:14.5px;border:1px solid var(--line)}
.v-artd .sp-368 :where(.prose) .ct-cmp th{font-size:13.5px}
.v-artd .sp-368 :where(.prose) .ct-cmp td{vertical-align:top;line-height:1.55}
.v-artd .sp-368 :where(.prose) .ct-cmp td:first-child{width:22%;white-space:nowrap}
.v-artd .sp-368 :where(.prose) .ct-cmp td:last-child{color:#5b6475;font-weight:400;background:#fffaf0}

/* 사전 검증 관문 */
.v-artd .sp-368 :where(.prose) .ct-pre{display:grid;grid-template-columns:1fr 50px 1.3fr;align-items:center;margin:4px 0 14px}
.v-artd .sp-368 :where(.prose) .ct-pre>div{display:flex;flex-wrap:wrap;gap:6px;padding:16px;border-radius:14px}
.v-artd .sp-368 :where(.prose) .ct-pre p{width:100%;margin:0 0 4px;font-size:14.5px;font-weight:800}
.v-artd .sp-368 :where(.prose) .pr-a{background:var(--soft)}
.v-artd .sp-368 :where(.prose) .pr-a span{padding:6px 12px;border-radius:6px;background:#fff;font-size:14px;font-weight:700;color:var(--ink)}
.v-artd .sp-368 :where(.prose) .pr-ar{height:3px;background:var(--ink);position:relative}
.v-artd .sp-368 :where(.prose) .pr-ar::after{content:"";position:absolute;right:-2px;top:-6px;border:7px solid transparent;border-left:10px solid var(--ink);border-right:0}
.v-artd .sp-368 :where(.prose) .pr-b{background:var(--navy)}
.v-artd .sp-368 :where(.prose) .pr-b p{color:#fff}
.v-artd .sp-368 :where(.prose) .pr-b span{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:14px;font-weight:800}
.v-artd .sp-368 :where(.prose) .pr-b span::before{content:"";width:10px;height:10px;border-radius:50%}
.v-artd .sp-368 :where(.prose) .pr-b .g::before{background:#2fd47a}
.v-artd .sp-368 :where(.prose) .pr-b .y::before{background:var(--yellow)}
.v-artd .sp-368 :where(.prose) .pr-b .r::before{background:#ff5a5f}
.v-artd .sp-368 :where(.prose) .pr-b small{width:100%;margin-top:4px;font-size:12.5px;font-weight:700;color:#aab3d6}

/* 진행 방식: 박람회 앱 */
.v-artd .sp-368 :where(.prose) .ct-we{margin:6px 0 10px;padding:26px 28px;border-radius:20px;background:linear-gradient(135deg,#fff8e0,#fff);border:2px solid var(--yellow)}
.v-artd .sp-368 :where(.prose) .we-k{margin:0;font-size:13px;font-weight:800;color:#6b5300}
.v-artd .sp-368 :where(.prose) .we-t{margin:2px 0 14px;font-size:21px;font-weight:800;color:var(--ink)}
.v-artd .sp-368 :where(.prose) .we-line{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:14px!important}
.v-artd .sp-368 :where(.prose) .we-line li{position:relative;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid #f1e3bf;font-size:14px;color:#4a5060}
.v-artd .sp-368 :where(.prose) .we-line b{display:block;font-size:16px;color:var(--ink)}
.v-artd .sp-368 :where(.prose) .we-line li+li::before{content:"→";position:absolute;left:-24px;top:50%;transform:translateY(-50%);font-size:18px;color:#6b5300}
.v-artd .sp-368 :where(.prose) .we-chg{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.v-artd .sp-368 :where(.prose) .we-chg p{margin:0 6px 0 0;font-size:14px;font-weight:800;color:#6b5300}
.v-artd .sp-368 :where(.prose) .we-chg span{padding:6px 14px;border-radius:999px;background:var(--navy);color:#fff;font-size:14px;font-weight:800}
.v-artd .sp-368 :where(.prose) .we-d{margin:0 0 18px;font-size:15px;line-height:1.65;color:var(--ink)}
.v-artd .sp-368 :where(.prose) .we-btn{display:inline-flex;padding:13px 24px;border-radius:999px;background:var(--navy);color:#fff!important;font-weight:800;text-decoration:none!important}
.v-artd .sp-368 :where(.prose) .we-btn:hover{background:var(--blue)}

/* 후속 지원 선 */
.v-artd .sp-368 :where(.prose) .ct-when{margin:4px 0 14px;padding:20px;border-radius:16px;background:var(--soft)}
.v-artd .sp-368 :where(.prose) .wh-l{position:relative;display:flex;justify-content:space-between;margin-bottom:18px}
.v-artd .sp-368 :where(.prose) .wh-l::before{content:"";position:absolute;left:10px;right:10px;top:50%;height:3px;background:linear-gradient(90deg,var(--blue) 0 34%,#c9cfdd 34%)}
.v-artd .sp-368 :where(.prose) .wh-l span{position:relative;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:800;background:#fff;border:2px solid #c9cfdd;color:#4a5060}
.v-artd .sp-368 :where(.prose) .wh-l .d{background:var(--blue);border-color:var(--blue);color:#fff}
.v-artd .sp-368 :where(.prose) .wh-n{margin:0 0 8px;font-size:13.5px;font-weight:800;color:#1d3fc4}
.v-artd .sp-368 :where(.prose) .wh-i{display:flex;flex-wrap:wrap;gap:6px}
.v-artd .sp-368 :where(.prose) .wh-i span{padding:8px 12px;border-radius:8px;background:#fff;font-size:14px;font-weight:700;color:var(--ink)}

/* 비교 저울 */
.v-artd .sp-368 :where(.prose) .ct-bal{display:grid;grid-template-columns:1.6fr 70px 1fr;align-items:center;margin:4px 0 12px}
.v-artd .sp-368 :where(.prose) .ct-bal>div{display:flex;flex-wrap:wrap;gap:6px;padding:16px;border-radius:14px}
.v-artd .sp-368 :where(.prose) .ct-bal p{width:100%;margin:0 0 4px;font-size:15px;font-weight:800}
.v-artd .sp-368 :where(.prose) .bl-a{background:var(--blue2)}
.v-artd .sp-368 :where(.prose) .bl-a p{color:#1d3fc4}
.v-artd .sp-368 :where(.prose) .bl-b{background:#fff;border:2px solid var(--ink)}
.v-artd .sp-368 :where(.prose) .ct-bal span{padding:6px 12px;border-radius:6px;background:#fff;font-size:14px;font-weight:700;color:var(--ink)}
.v-artd .sp-368 :where(.prose) .bl-b span{background:var(--soft)}
.v-artd .sp-368 :where(.prose) .ct-bal i{font-style:normal;text-align:center;font-size:13px;font-weight:800;color:var(--sub)}

/* 겹친 탭 */
.v-artd .sp-368 :where(.prose) .ct-tabs{display:grid;gap:0;margin:16px 0 14px}
.v-artd .sp-368 :where(.prose) .ct-tabs div{position:relative;padding:18px 20px;border-radius:0 12px 12px 12px;background:#fff;border:1px solid var(--line);font-size:14.5px;line-height:1.6;color:#4a5060;margin-top:28px}
.v-artd .sp-368 :where(.prose) .ct-tabs div:first-child{margin-top:0}
.v-artd .sp-368 :where(.prose) .ct-tabs p{margin:0}
.v-artd .sp-368 :where(.prose) .tb-k{position:absolute;left:-1px;top:-28px;padding:5px 16px;border-radius:10px 10px 0 0;background:var(--navy);color:#fff;font-size:14px!important;font-weight:800}
.v-artd .sp-368 :where(.prose) .ct-tabs div:nth-child(2) .tb-k{left:90px;background:#2c44b8}
.v-artd .sp-368 :where(.prose) .ct-tabs div:nth-child(3) .tb-k{left:180px;background:var(--blue)}
.v-artd .sp-368 :where(.prose) .ct-tabs div:first-child{margin-top:28px}

/* 예산 막대 */
.v-artd .sp-368 :where(.prose) .ct-meter{margin:6px 0 16px;padding:22px 20px 16px;border-radius:16px;background:var(--soft)}
.v-artd .sp-368 :where(.prose) .mt-bar{position:relative;height:22px;border-radius:11px;background:#fff;border:1px solid var(--line)}
.v-artd .sp-368 :where(.prose) .mt-bar .used{position:absolute;left:0;top:0;bottom:0;width:58%;border-radius:11px 0 0 11px;background:var(--blue)}
.v-artd .sp-368 :where(.prose) .mt-bar .goal{position:absolute;left:70%;top:-8px;bottom:-8px;border-left:2px dashed var(--ink)}
.v-artd .sp-368 :where(.prose) .mt-bar .note{position:absolute;left:80%;top:-8px;bottom:-8px;border-left:3px solid var(--yellow)}
.v-artd .sp-368 :where(.prose) .mt-bar .cap{position:absolute;left:92%;top:-10px;bottom:-10px;border-left:4px solid #c4282d}
.v-artd .sp-368 :where(.prose) .mt-lab{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:13px;font-weight:800}
.v-artd .sp-368 :where(.prose) .mt-lab span{display:flex;align-items:center;gap:6px}
.v-artd .sp-368 :where(.prose) .mt-lab span::before{content:"";width:14px;height:12px;border-radius:3px}
.v-artd .sp-368 :where(.prose) .l-u{color:#1d3fc4}
.v-artd .sp-368 :where(.prose) .l-u::before{background:var(--blue)}
.v-artd .sp-368 :where(.prose) .l-g{color:var(--ink)}
.v-artd .sp-368 :where(.prose) .l-g::before{width:0!important;border-left:2px dashed var(--ink)}
.v-artd .sp-368 :where(.prose) .l-n{color:#6b5300}
.v-artd .sp-368 :where(.prose) .l-n::before{width:4px!important;background:var(--yellow)}
.v-artd .sp-368 :where(.prose) .l-c{color:#b1262b}
.v-artd .sp-368 :where(.prose) .l-c::before{width:4px!important;background:#c4282d}

/* 상주와 원격 */
.v-artd .sp-368 :where(.prose) .ct-place{margin:4px 0 14px;padding:16px;border-radius:14px;border:1px solid var(--line)}
.v-artd .sp-368 :where(.prose) .pc-s{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:999px;background:var(--soft)}
.v-artd .sp-368 :where(.prose) .pc-s span{padding:10px;border-radius:999px;text-align:center;font-size:15px;font-weight:800;color:#4a5060}
.v-artd .sp-368 :where(.prose) .pc-s span:nth-child(2){background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(27,31,58,.15)}
.v-artd .sp-368 :where(.prose) .pc-s span.on{background:none;box-shadow:none}
.v-artd .sp-368 :where(.prose) .ct-place p{margin:12px 0 0;font-size:14.5px;color:#4a5060}

/* 인계 꾸러미 */
.v-artd .sp-368 :where(.prose) .ct-kit{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px;padding:18px;border-radius:14px;background:var(--navy)}
.v-artd .sp-368 :where(.prose) .ct-kit p{width:100%;margin:0 0 4px;font-size:14px;font-weight:800;color:#9fb3ff}
.v-artd .sp-368 :where(.prose) .ct-kit span{padding:8px 14px;border-radius:6px;background:#e7d3ae;box-shadow:inset 0 -3px 0 #c9a978;font-size:14.5px;font-weight:800;color:var(--ink)}

.v-artd .sp-368 :where(.prose) .ct-rel{margin:36px 0 10px!important;padding:16px 0 0!important;border-top:1px solid var(--line)}
.v-artd .sp-368 :where(.prose) .ct-rel li{padding:6px 0}
.v-artd .sp-368 :where(.prose) .ct-rel a{font-weight:700;text-decoration:none}
.v-artd .sp-368 :where(.prose) .ct-rel a::before{content:"→ ";color:var(--sub)}

@media (max-width:720px){
  .v-artd .sp-368 :where(.prose) .ct-lead{font-size:18px}
  .v-artd .sp-368 .prose h2{font-size:23px}
  .v-artd .sp-368 :where(.prose) .ct-s{padding-top:46px}
  .v-artd .sp-368 :where(.prose) .tr-root{white-space:normal;text-align:center}
  .v-artd .sp-368 :where(.prose) .tr-br{grid-template-columns:1fr;gap:10px}
  .v-artd .sp-368 :where(.prose) .tr-br::before,.v-artd .sp-368 :where(.prose) .br::before{display:none}
  .v-artd .sp-368 :where(.prose) .tr-root::after{display:none}
  .v-artd .sp-368 :where(.prose) .tr-root{margin-bottom:14px}
  .v-artd .sp-368 :where(.prose) .ct-plans{grid-template-columns:1fr}
  .v-artd .sp-368 :where(.prose) .pl-b{transform:none}
  .v-artd .sp-368 :where(.prose) .ct-pre{grid-template-columns:1fr;gap:10px}
  .v-artd .sp-368 :where(.prose) .pr-ar{display:none}
  .v-artd .sp-368 :where(.prose) .ct-we{padding:22px 18px}
  .v-artd .sp-368 :where(.prose) .we-line{grid-template-columns:1fr;gap:20px}
  .v-artd .sp-368 :where(.prose) .we-line li+li::before{content:"↓";left:50%;top:-20px;transform:translateX(-50%)}
  .v-artd .sp-368 :where(.prose) .wh-l span{font-size:13px;padding:6px 10px}
  .v-artd .sp-368 :where(.prose) .ct-bal{grid-template-columns:1fr;gap:6px}
  .v-artd .sp-368 :where(.prose) .ct-tabs div:nth-child(2) .tb-k,.v-artd .sp-368 :where(.prose) .ct-tabs div:nth-child(3) .tb-k{left:-1px}
}