/* 401 출시 후 신규 요청의 기대 효과와 운영비 증가 = 효과와 부담의 평면(2026-10-16 글마다 다른 레이아웃).
   첫머리는 사용 가치 대 유지 부담 산점 평면, 운영 비용은 개발비 뒤로 길게 늘어지는 꼬리, 검증 기준은 정의 카드,
   요청자는 점 무리 속 일부, 단계 구현은 길어지는 증분 막대, 영향은 아이콘 세 칸, 전환 안내는 알림 창, 배포는 화살표 한 개 대 세 개,
   미사용 기능은 세 칸 스위치, 진행 방식은 더하기 표지 */
.v-artd .sp-401 .prose{font-size:17px}
.v-artd .sp-401 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-401 .prose h2::before,.v-artd .sp-401 .prose h2::after{content:none}
.v-artd .sp-401 :where(.prose) .af-s{padding:58px 0 6px}
.v-artd .sp-401 :where(.prose) .af-s>p{margin:0 0 16px}
.v-artd .sp-401 :where(.prose) .af-lead{font-size:20px;line-height:1.7;color:var(--ink);margin:0 0 26px}
.v-artd .sp-401 :where(.prose) .af-lead b{color:var(--blue)}

/* 산점 평면 */
.v-artd .sp-401 :where(.prose) .af-plot{margin:0}
.v-artd .sp-401 :where(.prose) .pl-area{position:relative;height:280px;margin:36px 0 0 6px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);background:linear-gradient(90deg,transparent calc(50% - .5px),var(--line) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),var(--line) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(135deg,var(--blue2) 0 30%,transparent 30%)}
.v-artd .sp-401 :where(.prose) .pl-y{position:absolute;left:-2px;top:-30px;font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap}
.v-artd .sp-401 :where(.prose) .pl-x{position:absolute;right:0;bottom:-28px;font-size:14px;font-weight:800;color:var(--ink)}
.v-artd .sp-401 :where(.prose) .pl-y::before{content:"↑ "}.v-artd .sp-401 :where(.prose) .pl-x::after{content:" →"}
.v-artd .sp-401 :where(.prose) .d{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(46,91,255,.18)}
.v-artd .sp-401 :where(.prose) .d1{left:18%;top:22%}.v-artd .sp-401 :where(.prose) .d2{left:32%;top:38%}.v-artd .sp-401 :where(.prose) .d3{left:62%;top:28%;background:var(--navy);box-shadow:0 0 0 5px rgba(27,31,58,.15)}
.v-artd .sp-401 :where(.prose) .d4{left:74%;top:72%;background:#c3c8d6;box-shadow:none}.v-artd .sp-401 :where(.prose) .d5{left:44%;top:64%;background:#c3c8d6;box-shadow:none}.v-artd .sp-401 :where(.prose) .d6{left:86%;top:52%;background:#c3c8d6;box-shadow:none}
.v-artd .sp-401 :where(.prose) .af-plot figcaption{margin:40px 0 0;font-size:15.5px;color:var(--sub);text-align:center}

/* 비용 꼬리 */
.v-artd .sp-401 :where(.prose) .af-tail{display:grid;grid-template-columns:110px repeat(3,1fr);margin:6px 0 10px;border-radius:12px;overflow:hidden}
.v-artd .sp-401 :where(.prose) .af-tail span{padding:16px 14px;font-size:14px;line-height:1.5}
.v-artd .sp-401 :where(.prose) .tl-dev{display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:800;font-size:16px}
.v-artd .sp-401 :where(.prose) .tl-x{background:repeating-linear-gradient(-45deg,#eef1ff 0 9px,#e2e7fb 9px 18px);color:#3a4152;border-left:2px solid #fff}
.v-artd .sp-401 :where(.prose) .tl-x:nth-child(3){opacity:.88}.v-artd .sp-401 :where(.prose) .tl-x:nth-child(4){opacity:.76}
.v-artd .sp-401 :where(.prose) .tl-x b{display:block;margin-bottom:4px;color:#1d3fc4;font-size:15px}

/* 정의 카드 */
.v-artd .sp-401 :where(.prose) .af-hyp{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:6px 0 20px;border:2px solid var(--ink);border-radius:14px;overflow:hidden}
.v-artd .sp-401 :where(.prose) .af-hyp>p{margin:0;height:64px;padding:10px 14px;border-bottom:1px solid var(--line);position:relative}
.v-artd .sp-401 :where(.prose) .af-hyp>p:nth-child(odd){border-right:1px solid var(--line)}
.v-artd .sp-401 :where(.prose) .af-hyp>p span{font-size:13px;font-weight:800;color:var(--blue)}
.v-artd .sp-401 :where(.prose) .af-hyp>p::after{content:"";position:absolute;left:14px;right:14px;bottom:14px;border-bottom:1px dashed #c3c8d6}
.v-artd .sp-401 :where(.prose) .hy-m{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:12px 14px;list-style:none;background:var(--soft)}
.v-artd .sp-401 :where(.prose) .hy-m::before{content:"기준";margin-right:4px;font-size:13px;font-weight:800;color:var(--sub);align-self:center}
.v-artd .sp-401 :where(.prose) .hy-m li{margin:0;padding:5px 11px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--ink)}

/* 점 무리 */
.v-artd .sp-401 :where(.prose) .af-crowd{display:grid;grid-template-columns:1fr 220px;gap:20px;align-items:center;margin:6px 0 20px}
.v-artd .sp-401 :where(.prose) .cr-dots{position:relative;height:150px;border-radius:14px;background:radial-gradient(circle,#c9cedb 0 4px,transparent 4.5px) 0 0/22px 22px,var(--soft)}
.v-artd .sp-401 :where(.prose) .cr-dots i{position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%}
.v-artd .sp-401 :where(.prose) .cr-dots .q{background:var(--blue);box-shadow:0 0 0 4px rgba(46,91,255,.2)}
.v-artd .sp-401 :where(.prose) .cr-dots .l{background:#fff;border:2px dashed #8a93a8}
.v-artd .sp-401 :where(.prose) .cr-key{margin:0;padding:0;list-style:none}
.v-artd .sp-401 :where(.prose) .cr-key li{margin:0 0 10px;padding-left:24px;position:relative;font-size:14.5px;font-weight:700;color:var(--ink)}
.v-artd .sp-401 :where(.prose) .cr-key li::before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px;border-radius:50%}
.v-artd .sp-401 :where(.prose) .k-req::before{background:var(--blue)}
.v-artd .sp-401 :where(.prose) .k-quiet::before{background:#c9cedb}
.v-artd .sp-401 :where(.prose) .k-left::before{border:2px dashed #8a93a8;box-sizing:border-box}

/* 증분 막대 */
.v-artd .sp-401 :where(.prose) .af-inc{margin:6px 0 20px;padding:0;list-style:none}
.v-artd .sp-401 :where(.prose) .af-inc li{position:relative;margin:0 0 14px;padding:0 0 0 0;font-size:14.5px;line-height:1.55;color:var(--sub)}
.v-artd .sp-401 :where(.prose) .ic-bar{display:block;height:12px;width:calc(var(--n) * 25%);margin-bottom:8px;border-radius:6px;background:linear-gradient(90deg,var(--navy) 0 25%,#1d3fc4 25% 50%,var(--blue) 50% 75%,#7d98ff 75%);background-size:calc(100% / var(--n) * 4) 100%}
.v-artd .sp-401 :where(.prose) .af-inc b{display:inline-block;margin-right:10px;font-size:16px;color:var(--ink)}
.v-artd .sp-401 :where(.prose) .af-inc b::before{content:"단계 " counter(list-item) "  ";color:var(--blue);font-size:13px}

/* 영향 세 칸 */
.v-artd .sp-401 :where(.prose) .af-imp{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 10px}
.v-artd .sp-401 :where(.prose) .im{padding:18px 16px;border-radius:14px;background:var(--soft)}
.v-artd .sp-401 :where(.prose) .im b{display:block;margin:12px 0 4px;font-size:16px;color:var(--ink)}
.v-artd .sp-401 :where(.prose) .im p{margin:0;font-size:14.5px;line-height:1.55;color:var(--sub)}
.v-artd .sp-401 :where(.prose) .im-g{display:block;width:40px;height:40px;border-radius:12px;background:var(--ink);position:relative}
.v-artd .sp-401 :where(.prose) .im-db::before{content:"";position:absolute;left:11px;top:9px;width:18px;height:22px;border-radius:9px/4px;border:2px solid #fff;box-shadow:inset 0 6px 0 -4px #fff}
.v-artd .sp-401 :where(.prose) .im-key::before{content:"";position:absolute;left:9px;top:12px;width:12px;height:12px;border-radius:50%;border:2px solid #fff}
.v-artd .sp-401 :where(.prose) .im-key::after{content:"";position:absolute;left:22px;top:19px;width:10px;height:2px;background:#fff;box-shadow:6px 3px 0 -0px #fff}
.v-artd .sp-401 :where(.prose) .im-sum::before{content:"";position:absolute;left:10px;bottom:10px;width:5px;height:10px;background:#fff;box-shadow:7px -6px 0 #fff,14px -12px 0 #fff;border-radius:1px}

/* 알림 창 */
.v-artd .sp-401 :where(.prose) .af-notice{max-width:380px;margin:6px auto 20px;padding:20px 22px 16px;border-radius:18px;background:#fff;box-shadow:0 24px 50px -24px rgba(27,31,58,.5),0 0 0 1px var(--line)}
.v-artd .sp-401 :where(.prose) .nt-h{margin:0 0 10px;font-size:18px;font-weight:800;color:var(--ink);text-align:center}
.v-artd .sp-401 :where(.prose) .af-notice ul{margin:0 0 16px;padding:0;list-style:none}
.v-artd .sp-401 :where(.prose) .af-notice li{margin:0;padding:8px 0 8px 22px;position:relative;font-size:14.5px;color:#3a4152;border-bottom:1px solid var(--soft)}
.v-artd .sp-401 :where(.prose) .af-notice li::before{content:"";position:absolute;left:4px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.v-artd .sp-401 :where(.prose) .nt-ok{display:block;padding:11px;border-radius:12px;background:var(--blue);color:#fff;text-align:center;font-weight:800}

/* 배포 화살표 */
.v-artd .sp-401 :where(.prose) .af-ship{margin:6px 0 18px;padding:18px 20px;border-radius:14px;border:1px solid var(--line)}
.v-artd .sp-401 :where(.prose) .sh-row{display:flex;align-items:center;gap:10px;height:46px}
.v-artd .sp-401 :where(.prose) .sh-row+.sh-row{border-top:1px dashed var(--line)}
.v-artd .sp-401 :where(.prose) .sh-k{flex:none;width:90px;font-size:15px;font-weight:800;color:var(--ink)}
.v-artd .sp-401 :where(.prose) .sh-a{flex:1;height:14px;background:var(--blue);clip-path:polygon(0 25%,calc(100% - 12px) 25%,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,calc(100% - 12px) 75%,0 75%)}
.v-artd .sp-401 :where(.prose) .sh-one{flex:3.2;background:var(--navy)}

/* 세 칸 스위치 */
.v-artd .sp-401 :where(.prose) .af-sw{display:inline-flex;margin:4px 0 18px;padding:5px;border-radius:999px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.v-artd .sp-401 :where(.prose) .af-sw span{padding:9px 22px;border-radius:999px;font-size:15px;font-weight:800;color:var(--sub)}
.v-artd .sp-401 :where(.prose) .af-sw span:first-child{background:#fff;color:var(--ink);box-shadow:0 4px 10px -6px rgba(27,31,58,.4)}
.v-artd .sp-401 :where(.prose) .af-last{margin:4px 0 0;padding:16px 20px 16px 18px;border-left:5px solid var(--blue);border-radius:0 12px 12px 0;background:var(--soft);font-size:15.5px;line-height:1.65}
.v-artd .sp-401 :where(.prose) .af-last b{display:block;color:var(--ink)}

/* 진행 방식 = 더하기 표지 */
.v-artd .sp-401 :where(.prose) .af-we{display:grid;grid-template-columns:110px 1fr;gap:26px;align-items:start;margin:36px 0 10px;padding:28px 30px;border-radius:20px;background:var(--navy);color:#fff}
.v-artd .sp-401 :where(.prose) .aw-plus{display:grid;place-items:center;width:110px;height:110px;border-radius:28px;background:var(--blue);font-size:70px;font-weight:300;line-height:1}
.v-artd .sp-401 :where(.prose) .aw-k{margin:0 0 6px;font-size:13px;font-weight:800;color:#9fb3ff}
.v-artd .sp-401 :where(.prose) .aw-t{margin:0 0 10px;font-size:20px;font-weight:800;line-height:1.45}
.v-artd .sp-401 :where(.prose) .aw-d{margin:0 0 20px;font-size:15.5px;line-height:1.7;color:#d7dcf0}
.v-artd .sp-401 :where(.prose) .aw-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-401 :where(.prose) .aw-btn:hover{background:var(--blue2)}

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

@media (max-width:720px){
  .v-artd .sp-401 :where(.prose) .af-lead{font-size:18px}
  .v-artd .sp-401 .prose h2{font-size:23px}
  .v-artd .sp-401 :where(.prose) .af-s{padding-top:46px}
  .v-artd .sp-401 :where(.prose) .pl-area{height:220px}
  .v-artd .sp-401 :where(.prose) .af-tail{grid-template-columns:1fr}
  .v-artd .sp-401 :where(.prose) .tl-x{border-left:0;border-top:2px solid #fff}
  .v-artd .sp-401 :where(.prose) .af-hyp{grid-template-columns:1fr}
  .v-artd .sp-401 :where(.prose) .af-hyp>p:nth-child(odd){border-right:0}
  .v-artd .sp-401 :where(.prose) .af-crowd{grid-template-columns:1fr}
  .v-artd .sp-401 :where(.prose) .af-imp{grid-template-columns:1fr}
  .v-artd .sp-401 :where(.prose) .af-we{grid-template-columns:1fr;padding:24px 22px}
  .v-artd .sp-401 :where(.prose) .aw-plus{width:64px;height:64px;font-size:42px;border-radius:18px}
}