/* 286 인공지능 소개 서비스의 추천 평가와 초기 회원 확보 = 매칭 화면(2026-10-16 사장님 '공통틀로 하지마 다 다르게').
   첫머리는 두 프로필 카드를 추천 기준이 잇는 매칭 카드, 회원 확보는 지역 점 지도, 추천 기회는 회원별 막대,
   평가는 이용 단계 계기, 비용은 개발비 묶음과 따로 떨어진 두 주머니, 기획 자료는 흩어진 말풍선 대 정리된 목록, 준비 항목은 계단 */
.v-artd .sp-286 .prose{font-size:17px}
.v-artd .sp-286 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-286 .prose h2::before,.v-artd .sp-286 .prose h2::after{content:none}
.v-artd .sp-286 .prose h3{margin:34px 0 10px;font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.4px}
.v-artd .sp-286 :where(.prose) .dm-s{padding:62px 0 4px}
.v-artd .sp-286 :where(.prose) .dm-s>p{margin:0 0 16px}
.v-artd .sp-286 :where(.prose) .dm-k{display:inline-block;margin:0 0 12px!important;padding:4px 12px;border-radius:999px;background:var(--yellow2);color:#7a5600;font-size:13px;font-weight:800}

/* 매칭 카드 */
.v-artd .sp-286 :where(.prose) .dm-hero{padding:34px 0 0}
.v-artd .sp-286 :where(.prose) .dm-pair{display:grid;grid-template-columns:1fr 190px 1fr;align-items:center;max-width:620px;margin:0 auto 30px}
.v-artd .sp-286 :where(.prose) .dm-card{position:relative;padding:22px 20px 20px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--line),0 24px 40px -28px rgba(27,31,58,.5);transform:rotate(-4deg)}
.v-artd .sp-286 :where(.prose) .dm-card.r{transform:rotate(4deg)}
.v-artd .sp-286 :where(.prose) .dm-card .av{display:block;width:62px;height:62px;margin:0 auto 14px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#fff 0 14px,transparent 15px),radial-gradient(ellipse 30px 22px at 50% 100%,#fff 0 99%,transparent 100%),linear-gradient(135deg,#ffd36b,#f5b400)}
.v-artd .sp-286 :where(.prose) .dm-card.r .av{background:radial-gradient(circle at 50% 38%,#fff 0 14px,transparent 15px),radial-gradient(ellipse 30px 22px at 50% 100%,#fff 0 99%,transparent 100%),linear-gradient(135deg,#7f9bff,var(--blue))}
.v-artd .sp-286 :where(.prose) .dm-card .ln{display:block;height:9px;margin:8px auto;width:80%;border-radius:5px;background:var(--line)}
.v-artd .sp-286 :where(.prose) .dm-card .ln.s{width:52%}
.v-artd .sp-286 :where(.prose) .dm-card .tg{display:table;margin:12px auto 0;padding:3px 10px;border-radius:999px;background:var(--soft);font-size:12.5px;font-weight:700;color:var(--sub)}
.v-artd .sp-286 :where(.prose) .dm-link{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;margin:0 -14px;padding:14px 10px;border-radius:16px;background:var(--navy);color:#fff;text-align:center}
.v-artd .sp-286 :where(.prose) .dm-link b{font-size:14px;color:#ffd36b}
.v-artd .sp-286 :where(.prose) .dm-link span{font-size:13.5px;font-weight:700}
.v-artd .sp-286 :where(.prose) .dm-lead{max-width:680px;margin:0 auto;font-size:19.5px;line-height:1.75;color:var(--ink);text-align:center}
.v-artd .sp-286 :where(.prose) .dm-lead b{background:linear-gradient(transparent 60%,var(--yellow2) 0)}

/* 기술 검토 범위: 한 칸 대 네 칸 */
.v-artd .sp-286 :where(.prose) .dm-scope{display:grid;grid-template-columns:1fr 2fr;gap:12px;margin:20px 0 22px}
.v-artd .sp-286 :where(.prose) .dm-scope>div{padding:18px 20px;border-radius:16px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.v-artd .sp-286 :where(.prose) .dm-scope b{flex-basis:100%;font-size:15px}
.v-artd .sp-286 :where(.prose) .dm-scope span{padding:6px 12px;border-radius:8px;font-size:14.5px;font-weight:700}
.v-artd .sp-286 :where(.prose) .ds-a{background:var(--soft)}
.v-artd .sp-286 :where(.prose) .ds-a span{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.v-artd .sp-286 :where(.prose) .ds-b{background:var(--navy);color:#fff}
.v-artd .sp-286 :where(.prose) .ds-b span{background:rgba(255,255,255,.12)}
.v-artd .sp-286 :where(.prose) .ds-b b{color:#fff}
.v-artd .sp-286 :where(.prose) .ds-a b{color:var(--ink)}

/* 지역 점 지도 */
.v-artd .sp-286 :where(.prose) .dm-map{position:relative;height:200px;margin:22px 0 4px;border-radius:18px;overflow:hidden;background:#f7f8fc}
.v-artd .sp-286 :where(.prose) .dm-map .dots{position:absolute;inset:0;background-image:radial-gradient(circle,#c3c8d6 2.5px,transparent 3px),radial-gradient(circle,#f5b400 3.5px,transparent 4px);background-size:22px 22px,58px 46px;background-position:0 0,14px 10px}
.v-artd .sp-286 :where(.prose) .dm-map .ring{position:absolute;left:30%;top:22%;width:190px;height:120px;border-radius:50%;border:2.5px dashed var(--blue);background:rgba(46,91,255,.08)}
.v-artd .sp-286 :where(.prose) .dm-map em{position:absolute;left:calc(30% + 200px);top:30%;padding:5px 12px;border-radius:8px;background:var(--blue);color:#fff;font-style:normal;font-size:13.5px;font-weight:800}

/* 회원별 추천 기회 막대 */
.v-artd .sp-286 :where(.prose) .dm-dist{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end;height:170px;margin:44px 0 20px;padding:0 6px;border-bottom:2px solid var(--ink)}
.v-artd .sp-286 :where(.prose) .dd{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.v-artd .sp-286 :where(.prose) .dd i{display:block;width:64%;height:var(--h);min-height:4px;border-radius:8px 8px 0 0;background:var(--blue2)}
.v-artd .sp-286 :where(.prose) .dd:first-child i,.v-artd .sp-286 :where(.prose) .dd:last-child i{background:#ffd36b}
.v-artd .sp-286 :where(.prose) .dd:nth-child(2) i{background:var(--blue)}
.v-artd .sp-286 :where(.prose) .dd span{position:absolute;bottom:calc(var(--h,0) + 8px);font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap}
.v-artd .sp-286 :where(.prose) .dd:first-child span{bottom:30%}
.v-artd .sp-286 :where(.prose) .dd:last-child span{bottom:16%}
.v-artd .sp-286 .prose h3.dm-sh{display:flex;align-items:center;gap:10px}
.v-artd .sp-286 .prose h3.dm-sh::before{content:"";width:22px;height:26px;background:var(--navy);clip-path:polygon(50% 0,100% 16%,100% 52%,50% 100%,0 52%,0 16%)}

/* 이용 단계 계기 */
.v-artd .sp-286 :where(.prose) .dm-gauge{display:flex;align-items:stretch;margin:20px 0 22px}
.v-artd .sp-286 :where(.prose) .dg{flex:1;padding:18px 14px;border-radius:16px;background:var(--navy);color:#fff;text-align:center}
.v-artd .sp-286 :where(.prose) .dg-n{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 8px;border-radius:50%;background:#f5b400;color:var(--navy);font-size:14px;font-weight:800}
.v-artd .sp-286 :where(.prose) .dg b{font-size:16.5px;color:#fff}
.v-artd .sp-286 :where(.prose) .dg-x{flex:0 0 130px;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:0 6px 10px;font-size:12.5px;font-weight:700;color:#7a5600;text-align:center;line-height:1.35}
.v-artd .sp-286 :where(.prose) .dg-x::before{content:"";position:absolute;left:8px;right:8px;top:42%;height:2px;background:var(--navy)}
.v-artd .sp-286 :where(.prose) .dg-x::after{content:"";position:absolute;left:50%;top:42%;width:2px;height:26px;background:#f5b400}
.v-artd .sp-286 :where(.prose) .dm-ab{display:flex;align-items:center;justify-content:center;gap:0;margin:24px 0 20px}
.v-artd .sp-286 :where(.prose) .dm-ab span{padding:14px 24px;font-size:16px;font-weight:800}
.v-artd .sp-286 :where(.prose) .dm-ab .a{border-radius:14px 0 0 14px;background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.v-artd .sp-286 :where(.prose) .dm-ab .b{border-radius:0 14px 14px 0;background:var(--blue);color:#fff}
.v-artd .sp-286 :where(.prose) .dm-ab .vs{position:relative;z-index:1;margin:0 -16px;padding:8px 10px;border-radius:999px;background:#fff;box-shadow:0 0 0 2px var(--ink);font-size:13px;color:var(--ink)}

/* 개발비 묶음과 두 주머니 */
.v-artd .sp-286 :where(.prose) .dm-cost{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:12px;margin:22px 0 22px}
.v-artd .sp-286 :where(.prose) .dc-main{grid-row:1/3;padding:20px;border-radius:18px;border:2px solid var(--ink);display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.v-artd .sp-286 :where(.prose) .dm-cost p{flex-basis:100%;margin:0 0 4px;font-size:16px;font-weight:800;color:var(--ink)}
.v-artd .sp-286 :where(.prose) .dc-main span{padding:7px 12px;border-radius:999px;background:var(--blue2);color:#1d3fc4;font-size:14.5px;font-weight:700}
.v-artd .sp-286 :where(.prose) .dc-side{display:grid;place-items:center;padding:18px;border-radius:18px;border:2px dashed #9aa1b3;text-align:center}
.v-artd .sp-286 :where(.prose) .dc-side p{margin:0;font-size:15px;color:var(--sub)}

/* 흩어진 말풍선 대 정리된 목록 */
.v-artd .sp-286 :where(.prose) .dm-gap{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 22px}
.v-artd .sp-286 :where(.prose) .dm-gap>div{padding:20px;border-radius:18px}
.v-artd .sp-286 :where(.prose) .dgp-a{background:#fffaeb}
.v-artd .sp-286 :where(.prose) .dgp-b{background:var(--soft)}
.v-artd .sp-286 :where(.prose) .dgp-h{margin:0 0 12px;font-size:15px;font-weight:800;color:var(--ink)}
.v-artd .sp-286 :where(.prose) .dgp-c{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--sub)}
.v-artd .sp-286 :where(.prose) .bub{position:relative;height:150px}
.v-artd .sp-286 :where(.prose) .bub span{position:absolute;padding:8px 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1.5px #f0cf73;font-size:13.5px;font-weight:700;color:#7a5600}
.v-artd .sp-286 :where(.prose) .bub span:nth-child(1){left:2%;top:4%;transform:rotate(-6deg)}
.v-artd .sp-286 :where(.prose) .bub span:nth-child(2){right:4%;top:0}
.v-artd .sp-286 :where(.prose) .bub span:nth-child(3){left:10%;bottom:4%;transform:rotate(5deg)}
.v-artd .sp-286 :where(.prose) .bub span:nth-child(4){right:0;bottom:12%;transform:rotate(-3deg)}
.v-artd .sp-286 :where(.prose) .bub span:nth-child(5){left:40%;top:40%}
.v-artd .sp-286 :where(.prose) .dgp-b ol{margin:0;padding:0 0 0 16px;list-style:none;border-left:3px solid var(--blue);counter-reset:g}
.v-artd .sp-286 :where(.prose) .dgp-b li{counter-increment:g;margin:0 0 8px;padding:9px 12px;border-radius:0 10px 10px 0;background:#fff;font-size:14.5px;font-weight:700;color:var(--ink)}
.v-artd .sp-286 :where(.prose) .dgp-b li::before{content:counter(g) ". ";color:var(--blue)}

/* 준비 항목 계단 */
.v-artd .sp-286 :where(.prose) .dm-stair{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end;margin:26px 0 24px;padding:0;list-style:none;counter-reset:st}
.v-artd .sp-286 :where(.prose) .dm-stair li{counter-increment:st;margin:0;padding:20px 18px;border-radius:16px 16px 0 0;background:var(--soft);font-size:14.5px;line-height:1.6;color:var(--sub);border-bottom:4px solid var(--navy)}
.v-artd .sp-286 :where(.prose) .dm-stair li:nth-child(2){padding-top:52px}
.v-artd .sp-286 :where(.prose) .dm-stair li:nth-child(3){padding-top:84px;background:var(--blue2)}
.v-artd .sp-286 :where(.prose) .dm-stair li::before{content:"0" counter(st);display:block;margin-bottom:6px;font-size:24px;font-weight:800;color:var(--blue)}
.v-artd .sp-286 :where(.prose) .dm-stair b{display:block;margin-bottom:6px;font-size:16px;color:var(--ink)}

/* 흐름소프트 진행 방식: 업무흐름도에서 문서 셋으로 */
.v-artd .sp-286 :where(.prose) .dm-we{margin:50px 0 10px;padding:30px 32px;border-radius:22px;background:linear-gradient(135deg,#fff 0,#fffaeb 100%);box-shadow:0 0 0 2px var(--navy)}
.v-artd .sp-286 :where(.prose) .dw-k{margin:0 0 6px;font-size:13px;font-weight:800;color:#7a5600}
.v-artd .sp-286 :where(.prose) .dw-t{margin:0 0 20px;font-size:21px;font-weight:800;line-height:1.4;color:var(--ink)}
.v-artd .sp-286 :where(.prose) .dw-flow{display:flex;align-items:center;gap:0;margin:0 0 16px}
.v-artd .sp-286 :where(.prose) .dw-src{flex:none;padding:16px 18px;border-radius:14px;background:var(--navy);color:#fff;font-weight:800;font-size:16px}
.v-artd .sp-286 :where(.prose) .dw-docs{position:relative;display:grid;gap:8px;margin-left:46px}
.v-artd .sp-286 :where(.prose) .dw-docs::before{content:"";position:absolute;left:-46px;top:50%;width:46px;height:2px;background:var(--navy)}
.v-artd .sp-286 :where(.prose) .dw-docs span{position:relative;padding:9px 16px 9px 40px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:15px;font-weight:700;color:var(--ink)}
.v-artd .sp-286 :where(.prose) .dw-docs span::before{content:"";position:absolute;left:14px;top:50%;width:14px;height:17px;margin-top:-8.5px;border-radius:2px;background:linear-gradient(225deg,transparent 4px,var(--blue) 0)}
.v-artd .sp-286 :where(.prose) .dw-note{margin:0 0 20px;font-size:15.5px;color:var(--ink)}
.v-artd .sp-286 :where(.prose) .dw-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-286 :where(.prose) .dw-btn:hover{background:var(--blue)}

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

@media (max-width:720px){
  .v-artd .sp-286 .prose h2{font-size:23px}
  .v-artd .sp-286 :where(.prose) .dm-s{padding-top:46px}
  .v-artd .sp-286 :where(.prose) .dm-pair{grid-template-columns:1fr 120px 1fr}
  .v-artd .sp-286 :where(.prose) .dm-card{padding:14px 10px;border-radius:16px}
  .v-artd .sp-286 :where(.prose) .dm-card .av{width:44px;height:44px}
  .v-artd .sp-286 :where(.prose) .dm-link{margin:0 -8px;padding:10px 6px}
  .v-artd .sp-286 :where(.prose) .dm-lead{font-size:17.5px;text-align:left}
  .v-artd .sp-286 :where(.prose) .dm-scope{grid-template-columns:1fr}
  .v-artd .sp-286 :where(.prose) .dm-map .ring{left:12%;width:150px}
  .v-artd .sp-286 :where(.prose) .dm-map em{left:auto;right:6%;top:auto;bottom:10%}
  .v-artd .sp-286 :where(.prose) .dm-dist{gap:6px}
  .v-artd .sp-286 :where(.prose) .dd span{font-size:11.5px}
  .v-artd .sp-286 :where(.prose) .dm-gauge{flex-direction:column}
  .v-artd .sp-286 :where(.prose) .dg-x{flex:0 0 auto;padding:12px 0 12px 40px;justify-content:flex-start}
  .v-artd .sp-286 :where(.prose) .dg-x::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto}
  .v-artd .sp-286 :where(.prose) .dg-x::after{left:50%;top:50%;width:26px;height:2px}
  .v-artd .sp-286 :where(.prose) .dg-x{padding-left:calc(50% + 34px)}
  .v-artd .sp-286 :where(.prose) .dm-ab span{padding:12px 14px;font-size:14.5px}
  .v-artd .sp-286 :where(.prose) .dm-cost{grid-template-columns:1fr}
  .v-artd .sp-286 :where(.prose) .dc-main{grid-row:auto}
  .v-artd .sp-286 :where(.prose) .dm-gap{grid-template-columns:1fr}
  .v-artd .sp-286 :where(.prose) .dm-stair{grid-template-columns:1fr}
  .v-artd .sp-286 :where(.prose) .dm-stair li,.v-artd .sp-286 :where(.prose) .dm-stair li:nth-child(2),.v-artd .sp-286 :where(.prose) .dm-stair li:nth-child(3){padding:18px;border-radius:14px;border-bottom:0;border-left:4px solid var(--navy);border-radius:0 14px 14px 0}
  .v-artd .sp-286 :where(.prose) .dm-stair li:nth-child(2){margin-left:16px}
  .v-artd .sp-286 :where(.prose) .dm-stair li:nth-child(3){margin-left:32px}
  .v-artd .sp-286 :where(.prose) .dm-we{padding:24px 20px}
  .v-artd .sp-286 :where(.prose) .dw-flow{flex-direction:column;align-items:stretch}
  .v-artd .sp-286 :where(.prose) .dw-docs{margin:30px 0 0}
  .v-artd .sp-286 :where(.prose) .dw-docs::before{left:50%;top:-30px;width:2px;height:30px}
}