/* 388 착수 전제, 중간 산출물, 승인 일정의 합의 = 계약 일정표(2026-10-16 글마다 다른 레이아웃).
   머리에 깃발 네 개가 꽂힌 가로 길(단계별 결과물과 확인), 구간마다 일정 문서의 실제 모양:
   관문 세 칸, 단계 칸 견본, 단계 수 막대, 달력과 자, 제출과 회신 차례, 시험 휴대폰, 지급 기준 고르기, 계획 대 실제 막대, 시연 안내, 일치 확인 */
.v-artd .sp-388 .prose{font-size:17px}
.v-artd .sp-388 :where(.prose) .ms-lead{font-size:20px;line-height:1.7;color:var(--ink);margin:0}
.v-artd .sp-388 :where(.prose) .ms-lead b{color:var(--blue)}
.v-artd .sp-388 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:26px;letter-spacing:-.7px;display:block;min-height:0}
.v-artd .sp-388 .prose h2::before,.v-artd .sp-388 .prose h2::after{content:none}
.v-artd .sp-388 :where(.prose) .ms-s{padding:60px 0 6px}
.v-artd .sp-388 :where(.prose) .ms-s>p{margin:0 0 14px}

/* 깃발 길: 1100 폭으로 본문보다 넓게 */
.v-artd .sp-388 :where(.prose) .ms-road{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:44px 0 10px;padding:0;list-style:none;counter-reset:none}
.v-artd .sp-388 :where(.prose) .ms-road::before{content:"";position:absolute;left:0;right:0;top:46px;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--line) 0 14px,transparent 14px 22px),var(--soft)}
.v-artd .sp-388 :where(.prose) .ms-road li{position:relative;margin:0;padding:72px 14px 0 0;font-size:14.5px;line-height:1.5}
.v-artd .sp-388 :where(.prose) .ms-road li::before{content:"";position:absolute;left:0;top:0;width:3px;height:56px;background:var(--navy);border-radius:2px}
.v-artd .sp-388 :where(.prose) .mr-flag{position:absolute;left:3px;top:0;padding:5px 12px 5px 10px;background:var(--blue);color:#fff;font-size:13px;font-weight:800;clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%)}
.v-artd .sp-388 :where(.prose) .ms-road li:last-child .mr-flag{background:var(--navy)}
.v-artd .sp-388 :where(.prose) .mr-when{display:block;font-size:13px;color:var(--sub)}
.v-artd .sp-388 :where(.prose) .ms-road b{display:block;margin:4px 0 10px;font-size:17px;color:var(--ink);letter-spacing:-.3px}
.v-artd .sp-388 :where(.prose) .mr-out,.v-artd .sp-388 :where(.prose) .mr-ok{display:block;margin-top:6px;color:var(--ink)}
.v-artd .sp-388 :where(.prose) .mr-out i,.v-artd .sp-388 :where(.prose) .mr-ok i{display:block;font-style:normal;font-size:12.5px;font-weight:800;color:#1d3fc4}
.v-artd .sp-388 :where(.prose) .mr-ok i{color:var(--sub)}

/* 관문 세 칸 */
.v-artd .sp-388 :where(.prose) .ms-gates{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:22px 0 8px;border:2px solid var(--ink);border-radius:14px;overflow:hidden}
.v-artd .sp-388 :where(.prose) .ms-gates div{padding:20px 20px 18px;position:relative}
.v-artd .sp-388 :where(.prose) .ms-gates div+div{border-left:2px dashed #c9cedb}
.v-artd .sp-388 :where(.prose) .ms-gates span{display:inline-block;margin-bottom:10px;font-size:20px;font-weight:900;color:var(--ink);letter-spacing:-.5px}
.v-artd .sp-388 :where(.prose) .ms-gates p{margin:0;font-size:15px;line-height:1.6;color:#3b4152}

/* 단계 칸 견본 */
.v-artd .sp-388 :where(.prose) .ms-spec{margin:6px 0 22px;padding:22px 24px;border-radius:16px;background:var(--soft)}
.v-artd .sp-388 :where(.prose) .sp-h{margin:0 0 12px;font-size:14px;font-weight:800;color:var(--sub)}
.v-artd .sp-388 :where(.prose) .ms-spec dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.v-artd .sp-388 :where(.prose) .ms-spec dl div{display:flex;align-items:flex-end;gap:12px}
.v-artd .sp-388 :where(.prose) .ms-spec dt{flex:none;font-size:15px;font-weight:800;color:var(--ink)}
.v-artd .sp-388 :where(.prose) .ms-spec dd{flex:1;margin:0;min-height:26px;border-bottom:1.5px solid #b9bfce;font-size:14.5px;color:var(--sub);padding-bottom:3px}
.v-artd .sp-388 :where(.prose) .ms-neq{display:flex;align-items:center;gap:14px;margin:26px 0 14px!important;font-size:18px;font-weight:800}
.v-artd .sp-388 :where(.prose) .ms-neq span{padding:10px 18px;border-radius:10px;background:#fff;border:1.5px solid var(--line)}
.v-artd .sp-388 :where(.prose) .ms-neq span:last-child{border-color:var(--blue);color:var(--blue)}
.v-artd .sp-388 :where(.prose) .ms-neq em{font-style:normal;font-size:26px;color:#e5484d}
.v-artd .sp-388 :where(.prose) .ms-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.v-artd .sp-388 :where(.prose) .ms-chips li{margin:0;padding:7px 14px;border-radius:999px;background:var(--blue2);color:#1d3fc4;font-size:14.5px;font-weight:700}
.v-artd .sp-388 :where(.prose) .ms-chips li::before,.v-artd .sp-388 :where(.prose) .ms-levers li::before,.v-artd .sp-388 :where(.prose) .us-phone li::before,.v-artd .sp-388 :where(.prose) .ms-we li::before,.v-artd .sp-388 :where(.prose) .ms-rel li::before{content:none}

/* 단계 수 막대 */
.v-artd .sp-388 :where(.prose) .ms-scale{margin:20px 0 22px;display:grid;gap:12px}
.v-artd .sp-388 :where(.prose) .sc-row{display:flex;align-items:center;gap:16px}
.v-artd .sp-388 :where(.prose) .sc-l{flex:none;width:76px;font-size:14px;font-weight:800;color:var(--sub)}
.v-artd .sp-388 :where(.prose) .sc-bar{flex:1;display:flex;gap:5px}
.v-artd .sp-388 :where(.prose) .sc-bar i{flex:1;height:22px;border-radius:5px;background:var(--blue2)}
.v-artd .sp-388 :where(.prose) .sc-bar i:nth-child(odd){background:#b9c8ff}

/* 달력과 자 */
.v-artd .sp-388 :where(.prose) .ms-dates{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0 24px}
.v-artd .sp-388 :where(.prose) .ms-dates>div{padding:20px;border:1px solid var(--line);border-radius:16px}
.v-artd .sp-388 :where(.prose) .dt-k{margin:0 0 14px;font-size:16px;font-weight:800;color:var(--ink)}
.v-artd .sp-388 :where(.prose) .dt-n{margin:12px 0 0;font-size:14px;color:var(--sub)}
.v-artd .sp-388 :where(.prose) .dt-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.v-artd .sp-388 :where(.prose) .dt-cal i{aspect-ratio:1;border-radius:6px;background:var(--soft)}
.v-artd .sp-388 :where(.prose) .dt-cal i.on{background:#e5484d;box-shadow:0 0 0 3px #ffd6d7}
.v-artd .sp-388 :where(.prose) .dt-rule{display:flex;align-items:center;gap:10px;height:72px}
.v-artd .sp-388 :where(.prose) .dt-rule b{flex:none;padding:6px 10px;border-radius:8px;background:var(--navy);color:#fff;font-size:13px}
.v-artd .sp-388 :where(.prose) .dt-rule b:last-child{background:var(--blue)}
.v-artd .sp-388 :where(.prose) .dt-rule span{flex:1;height:14px;background:repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 12px) bottom/100% 8px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom/100% 1.5px no-repeat}

/* 제출과 회신 차례(두 줄 교대) */
.v-artd .sp-388 :where(.prose) .ms-volley{margin:20px 0 22px;padding:18px 20px;border-radius:16px;background:var(--navy)}
.v-artd .sp-388 :where(.prose) .vl-lane{display:grid;grid-template-columns:70px repeat(4,1fr);gap:8px;align-items:center;margin:0}
.v-artd .sp-388 :where(.prose) .vl-lane+.vl-lane{margin-top:10px}
.v-artd .sp-388 :where(.prose) .vl-lane b{font-size:14px;color:#aab6e8}
.v-artd .sp-388 :where(.prose) .vl-a{padding:10px 8px;border-radius:10px;background:#fff;color:var(--ink);font-size:14px;font-weight:700;text-align:center;line-height:1.35}
.v-artd .sp-388 :where(.prose) .vl-b .vl-a{background:var(--blue);color:#fff}
.v-artd .sp-388 :where(.prose) .vl-gap{height:2px;background:rgba(255,255,255,.18)}

/* 문서 대 시험 휴대폰 */
.v-artd .sp-388 :where(.prose) .ms-use{display:grid;grid-template-columns:110px 1fr 190px;gap:22px;align-items:center;margin:0 0 20px}
.v-artd .sp-388 :where(.prose) .us-doc{height:140px;padding:18px 14px;border:1px solid var(--line);border-radius:6px;background:#fff;box-shadow:6px 6px 0 var(--soft)}
.v-artd .sp-388 :where(.prose) .us-doc i{display:block;height:7px;margin:0 0 12px;border-radius:4px;background:var(--line)}
.v-artd .sp-388 :where(.prose) .us-doc i.s{width:60%}
.v-artd .sp-388 :where(.prose) .us-tx p{margin:0}
.v-artd .sp-388 :where(.prose) .us-phone{padding:16px 14px 18px;border:7px solid var(--ink);border-radius:26px;background:#fff}
.v-artd .sp-388 :where(.prose) .ph-t{margin:0 0 10px;font-size:12.5px;font-weight:800;color:var(--sub);text-align:center}
.v-artd .sp-388 :where(.prose) .us-phone ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.v-artd .sp-388 :where(.prose) .us-phone li{margin:0;padding:7px 10px;border-radius:8px;background:var(--soft);font-size:13.5px;font-weight:700}
.v-artd .sp-388 :where(.prose) .us-phone li:nth-child(n+2){background:#fff1f1;color:#b4232a}

/* 지급 기준 고르기 */
.v-artd .sp-388 :where(.prose) .ms-pick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:20px 0 22px;padding:18px 20px;border:2px dashed var(--blue);border-radius:16px}
.v-artd .sp-388 :where(.prose) .ms-pick span{padding:10px 20px;border-radius:12px;background:#fff;border:1.5px solid var(--line);font-size:16px;font-weight:800;color:var(--ink)}
.v-artd .sp-388 :where(.prose) .ms-pick span::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-1px;border:2px solid var(--blue);border-radius:50%}
.v-artd .sp-388 :where(.prose) .ms-pick p{flex-basis:100%;margin:4px 0 0;font-size:14px;color:var(--sub)}

/* 계획 대 실제 */
.v-artd .sp-388 :where(.prose) .ms-gantt{margin:20px 0 22px;padding:20px 22px;border-radius:16px;background:var(--soft)}
.v-artd .sp-388 :where(.prose) .gt-row{display:flex;align-items:center;gap:14px}
.v-artd .sp-388 :where(.prose) .gt-row+.gt-row{margin-top:10px}
.v-artd .sp-388 :where(.prose) .gt-l{flex:none;width:40px;font-size:14px;font-weight:800;color:var(--sub)}
.v-artd .sp-388 :where(.prose) .gt-track{position:relative;flex:1;height:24px}
.v-artd .sp-388 :where(.prose) .gt-track i{position:absolute;top:0;height:24px;border-radius:6px;background:#b9c8ff}
.v-artd .sp-388 :where(.prose) .gt-act .gt-track i{background:var(--blue)}
.v-artd .sp-388 :where(.prose) .gt-act .gt-track i.gt-left{background:repeating-linear-gradient(45deg,#fff 0 6px,#ffd6d7 6px 12px);border:1.5px dashed #e5484d}
.v-artd .sp-388 :where(.prose) .gt-note{margin:14px 0 0 54px;font-size:14px;font-weight:700;color:#b4232a}
.v-artd .sp-388 :where(.prose) .ms-levers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 18px;padding:0;list-style:none}
.v-artd .sp-388 :where(.prose) .ms-levers li{margin:0;padding:14px 8px;border-radius:12px;background:var(--ink);color:#fff;text-align:center;font-weight:800;font-size:16px}

/* 시연 안내 쪽지 */
.v-artd .sp-388 :where(.prose) .ms-demo{margin:18px 0 20px;max-width:440px;padding:18px 22px;background:#fffbea;border:1px solid #f1e3a6;border-radius:4px;transform:rotate(-.6deg);box-shadow:0 14px 24px -20px rgba(27,31,58,.5)}
.v-artd .sp-388 :where(.prose) .dm-h{margin:0 0 8px;font-weight:900;color:var(--ink)}
.v-artd .sp-388 :where(.prose) .dm-r{display:flex;justify-content:space-between;gap:12px;margin:0;padding:7px 0;border-top:1px dashed #e2d38f;font-size:15px}
.v-artd .sp-388 :where(.prose) .dm-r span{color:var(--sub)}
.v-artd .sp-388 :where(.prose) .dm-t{display:flex;gap:6px}
.v-artd .sp-388 :where(.prose) .dm-t i{font-style:normal;padding:1px 8px;border-radius:6px;background:var(--navy);color:#fff;font-size:13px;font-weight:700}

/* 흐름소프트 진행 방식: 세 시점 띠 */
.v-artd .sp-388 :where(.prose) .ms-we{margin:30px 0 8px;padding:26px 28px;border-radius:20px;background:linear-gradient(135deg,var(--navy),#28307a);color:#fff}
.v-artd .sp-388 :where(.prose) .we-k{margin:0 0 16px;font-size:13px;font-weight:800;color:#a9b9ff}
.v-artd .sp-388 :where(.prose) .ms-we ol{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 20px;padding:0;list-style:none}
.v-artd .sp-388 :where(.prose) .ms-we li{margin:0;padding:16px;border-radius:14px;background:rgba(255,255,255,.08)}
.v-artd .sp-388 :where(.prose) .ms-we li b{display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:999px;background:#fff;color:var(--navy);font-size:12.5px}
.v-artd .sp-388 :where(.prose) .ms-we li span{display:block;font-size:16.5px;font-weight:800}
.v-artd .sp-388 :where(.prose) .ms-we li small{display:block;margin-top:4px;font-size:14px;color:#d3d9f5;line-height:1.5}
.v-artd .sp-388 :where(.prose) .we-btn{display:inline-flex;padding:12px 24px;border-radius:999px;background:var(--blue);color:#fff!important;font-weight:800;text-decoration:none!important}
.v-artd .sp-388 :where(.prose) .we-btn:hover{background:#fff;color:var(--navy)!important}

/* 일치 확인 */
.v-artd .sp-388 :where(.prose) .ms-match{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:20px 0 22px;padding:22px;border-radius:16px;border:1px solid var(--line)}
.v-artd .sp-388 :where(.prose) .ms-match span{padding:14px 16px 14px 34px;position:relative;border-radius:8px;background:var(--soft);font-weight:800;font-size:15.5px;color:var(--ink)}
.v-artd .sp-388 :where(.prose) .ms-match span::before{content:"";position:absolute;left:12px;top:50%;width:13px;height:16px;margin-top:-8px;border:2px solid var(--blue);border-radius:2px}
.v-artd .sp-388 :where(.prose) .ms-match em{font-style:normal;font-size:24px;font-weight:900;color:var(--blue)}

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

@media (min-width:1200px){
  .v-artd .sp-388 :where(.prose) .ms-road{margin-left:-120px;margin-right:-120px}
}
@media (max-width:720px){
  .v-artd .sp-388 :where(.prose) .ms-lead{font-size:18px}
  .v-artd .sp-388 .prose h2{font-size:22px}
  .v-artd .sp-388 :where(.prose) .ms-s{padding-top:46px}
  .v-artd .sp-388 :where(.prose) .ms-road{grid-template-columns:1fr;gap:26px;padding-left:18px}
  .v-artd .sp-388 :where(.prose) .ms-road::before{left:0;right:auto;top:0;bottom:0;width:4px;height:auto;background:var(--soft)}
  .v-artd .sp-388 :where(.prose) .ms-road li{padding:34px 0 0 12px}
  .v-artd .sp-388 :where(.prose) .ms-road li::before{left:-17px;top:0;width:12px;height:12px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 4px #fff}
  .v-artd .sp-388 :where(.prose) .mr-flag{left:12px}
  .v-artd .sp-388 :where(.prose) .ms-gates{grid-template-columns:1fr}
  .v-artd .sp-388 :where(.prose) .ms-gates div+div{border-left:0;border-top:2px dashed #c9cedb}
  .v-artd .sp-388 :where(.prose) .ms-spec dl{grid-template-columns:1fr}
  .v-artd .sp-388 :where(.prose) .ms-dates{grid-template-columns:1fr}
  .v-artd .sp-388 :where(.prose) .vl-lane{grid-template-columns:52px 1fr 1fr}
  .v-artd .sp-388 :where(.prose) .vl-gap{display:none}
  .v-artd .sp-388 :where(.prose) .ms-use{grid-template-columns:1fr}
  .v-artd .sp-388 :where(.prose) .us-doc{display:none}
  .v-artd .sp-388 :where(.prose) .us-phone{max-width:220px}
  .v-artd .sp-388 :where(.prose) .ms-levers{grid-template-columns:repeat(2,1fr)}
  .v-artd .sp-388 :where(.prose) .ms-we{padding:22px 20px}
  .v-artd .sp-388 :where(.prose) .ms-we ol{grid-template-columns:1fr}
  .v-artd .sp-388 :where(.prose) .ms-match{flex-direction:column;gap:4px}
  .v-artd .sp-388 :where(.prose) .ms-match em{font-size:20px;line-height:1}
}

/* 왼쪽 목차 칸(1360 이상)과 겹치지 않게 본문 폭 안으로(2026-10-16) */
@media (min-width:1360px){.v-artd .sp-388 :where(.prose) .ms-road{margin-left:0;margin-right:0}}