/* 305 매칭 품질 판정과 신규 사용자 대처 = 추천 엔진 제어판(2026-10-16 사장님 '공통틀로 하지마 다 다르게').
   첫머리 담당자 메모, 설계 네 항목은 입력 칩 > 거르개 > 우선순위 밀대 > 결과 목록 모듈 넷, 설명 일치는 추천 이유 표시 예시,
   규칙과 모델은 두 회로, 진행 방식은 진단에서 개발로, 신규 사용자는 갈림 나무, 제한은 스위치 목록, 평가는 계기 셋,
   사례 시험은 모눈 시험 양식, 기관 배정은 점선 연결 단계 */
.v-artd .sp-305 .prose{font-size:17px}
.v-artd .sp-305 :where(.prose) .mx>p{margin:0 0 16px}
.v-artd .sp-305 :where(.prose) .mx-lead{font-size:20px;line-height:1.7;color:var(--ink)}
.v-artd .sp-305 :where(.prose) .mx-lead b{color:var(--blue)}
.v-artd .sp-305 :where(.prose) .mx-memo{position:relative;padding:16px 20px 16px 22px;border-radius:4px;background:var(--yellow2);font-size:15.5px;line-height:1.65;color:#3b3420;box-shadow:0 12px 22px -18px rgba(80,60,0,.6)}
.v-artd .sp-305 :where(.prose) .mx-memo b{display:block;margin-bottom:4px;color:#6b5200}
.v-artd .sp-305 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-305 .prose h2::before,.v-artd .sp-305 .prose h2::after{content:none}
.v-artd .sp-305 :where(.prose) .mx-s{padding:60px 0 4px}
.v-artd .sp-305 :where(.prose) .mx-s>p{margin:0 0 16px}

/* 제어판 */
.v-artd .sp-305 :where(.prose) .mx-console{margin:26px 0 0;padding:20px;border-radius:20px;background:#20254a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.v-artd .sp-305 :where(.prose) .cn-h{margin:0 0 14px;font-size:14px;font-weight:800;color:#9fb3ff}
.v-artd .sp-305 :where(.prose) .cn-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.v-artd .sp-305 :where(.prose) .md{position:relative;display:flex;flex-direction:column;padding:16px 14px;border-radius:12px;background:#2c3263;color:#cfd6f5;font-size:13px;line-height:1.55}
.v-artd .sp-305 :where(.prose) .md:not(:last-child)::after{content:"";position:absolute;right:-8px;top:46px;width:8px;height:2px;background:#9fb3ff}
.v-artd .sp-305 :where(.prose) .md p{margin:0}
.v-artd .sp-305 :where(.prose) .md-k{font-size:11.5px;font-weight:800;color:#9fb3ff}
.v-artd .sp-305 :where(.prose) .md-t{margin:2px 0 12px!important;font-size:15.5px;font-weight:800;color:#fff}
.v-artd .sp-305 :where(.prose) .md-d{margin-top:auto!important;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.v-artd .sp-305 :where(.prose) .md ul,.v-artd .sp-305 :where(.prose) .md ol{margin:0 0 12px;padding:0;list-style:none}
.v-artd .sp-305 :where(.prose) .md li{margin:0}
.v-artd .sp-305 :where(.prose) .md li::before{content:none}
.v-artd .sp-305 :where(.prose) .md-chips{display:flex;flex-wrap:wrap;gap:4px}
.v-artd .sp-305 :where(.prose) .md-chips li{padding:4px 8px;border-radius:6px;background:var(--blue);color:#fff;font-size:12px;font-weight:700}
.v-artd .sp-305 :where(.prose) .md-filter li{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:12.5px;font-weight:700;color:#fff}
.v-artd .sp-305 :where(.prose) .md-filter li::before{content:"";display:block;width:12px;height:12px;border-radius:3px;border:2px solid #9fb3ff;background:linear-gradient(#9fb3ff,#9fb3ff) center/6px 6px no-repeat}
.v-artd .sp-305 :where(.prose) .md-sl{display:grid;gap:10px;margin-bottom:12px}
.v-artd .sp-305 :where(.prose) .md-sl span{position:relative;display:block;padding-bottom:12px;font-size:12px;font-weight:700;color:#fff}
.v-artd .sp-305 :where(.prose) .md-sl span::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--blue) var(--p),rgba(255,255,255,.18) var(--p))}
.v-artd .sp-305 :where(.prose) .md-sl span::after{content:"";position:absolute;left:var(--p);bottom:-3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--blue)}
.v-artd .sp-305 :where(.prose) .md-res li{display:flex;align-items:center;gap:6px;padding:4px;margin-bottom:4px;border-radius:6px;background:rgba(255,255,255,.08)}
.v-artd .sp-305 :where(.prose) .md-res i{width:20px;height:20px;border-radius:4px;background:#9fb3ff}
.v-artd .sp-305 :where(.prose) .md-res em{font-style:normal;padding:1px 6px;border-radius:4px;background:var(--yellow);color:var(--ink);font-size:11px;font-weight:800}

/* 추천 이유 표시 */
.v-artd .sp-305 :where(.prose) .mx-label{display:flex;align-items:center;gap:14px;width:min(100%,420px);margin:6px 0 16px;padding:14px;border-radius:14px;border:1px solid var(--line);box-shadow:0 14px 26px -22px rgba(27,31,58,.6)}
.v-artd .sp-305 :where(.prose) .lb-thumb{flex:none;width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,var(--blue2),#7d93ff)}
.v-artd .sp-305 :where(.prose) .mx-label p{margin:0}
.v-artd .sp-305 :where(.prose) .mx-label b{display:block;color:var(--ink)}
.v-artd .sp-305 :where(.prose) .lb-why{display:inline-block;margin-top:6px;padding:4px 10px;border-radius:999px;background:var(--blue2);color:#1d3fc4;font-size:13px;font-weight:700}
.v-artd .sp-305 :where(.prose) .lb-why::before{content:"ⓘ ";font-weight:800}

/* 두 회로 */
.v-artd .sp-305 :where(.prose) .mx-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 18px}
.v-artd .sp-305 :where(.prose) .mx-vs>div{padding:20px;border-radius:16px;font-size:15px;line-height:1.6;color:#3f4555}
.v-artd .sp-305 :where(.prose) .vs-rule{border:2px solid var(--ink)}
.v-artd .sp-305 :where(.prose) .vs-model{background:var(--soft)}
.v-artd .sp-305 :where(.prose) .mx-vs p{margin:0}
.v-artd .sp-305 :where(.prose) .vs-k{margin-bottom:14px!important;font-weight:800;font-size:17px;color:var(--ink)!important}
.v-artd .sp-305 :where(.prose) .rl,.v-artd .sp-305 :where(.prose) .ml{display:flex;align-items:center;margin-bottom:8px}
.v-artd .sp-305 :where(.prose) .rl span,.v-artd .sp-305 :where(.prose) .ml span{padding:5px 10px;border-radius:6px;border:1.5px solid var(--ink);font-size:12.5px;font-weight:800;color:var(--ink);background:#fff}
.v-artd .sp-305 :where(.prose) .rl i,.v-artd .sp-305 :where(.prose) .ml i{flex:1;height:2px;background:var(--ink);position:relative}
.v-artd .sp-305 :where(.prose) .rl i::after,.v-artd .sp-305 :where(.prose) .ml i::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:6px solid var(--ink);border-right:0}
.v-artd .sp-305 :where(.prose) .ml{margin:22px 0 22px}
.v-artd .sp-305 :where(.prose) .ml b{padding:12px 16px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px}
.v-artd .sp-305 :where(.prose) .rl+p,.v-artd .sp-305 :where(.prose) .ml+p{margin-top:12px!important}

/* 진행 방식 = 진단에서 개발로 */
.v-artd .sp-305 :where(.prose) .mx-hw{margin:26px 0 8px;padding:26px 28px;border-radius:20px;background:linear-gradient(135deg,var(--blue),#1d3fc4);color:#fff}
.v-artd .sp-305 :where(.prose) .mx-hw p{margin:0}
.v-artd .sp-305 :where(.prose) .hw-k{font-size:13px;font-weight:800;color:#dfe5ff}
.v-artd .sp-305 :where(.prose) .hw-t{margin:6px 0 18px!important;font-size:21px;font-weight:800;line-height:1.4}
.v-artd .sp-305 :where(.prose) .hw-two{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 20px;padding:0;list-style:none;counter-reset:h}
.v-artd .sp-305 :where(.prose) .hw-two li{counter-increment:h;position:relative;margin:0;padding:16px 18px 16px 58px;background:rgba(255,255,255,.12);font-size:14.5px;line-height:1.5}
.v-artd .sp-305 :where(.prose) .hw-two li:first-child{border-radius:12px 0 0 12px}
.v-artd .sp-305 :where(.prose) .hw-two li:last-child{border-radius:0 12px 12px 0;background:rgba(255,255,255,.22)}
.v-artd .sp-305 :where(.prose) .hw-two li::before{content:counter(h);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:50%;background:#fff;color:#1d3fc4;display:grid;place-items:center;font-weight:800}
.v-artd .sp-305 :where(.prose) .hw-two li:first-child::after{content:"";position:absolute;right:-12px;top:50%;margin-top:-12px;border:12px solid transparent;border-left:12px solid rgba(255,255,255,.12);border-right:0;z-index:1}
.v-artd .sp-305 :where(.prose) .hw-two b{display:block;font-size:16px}
.v-artd .sp-305 :where(.prose) .hw-btn{display:inline-flex;padding:13px 24px;border-radius:999px;background:#fff;color:#1d3fc4!important;font-weight:800;text-decoration:none!important}
.v-artd .sp-305 :where(.prose) .hw-btn:hover{background:var(--navy);color:#fff!important}

/* 갈림 나무 */
.v-artd .sp-305 :where(.prose) .mx-cold{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:0;margin:8px 0 16px}
.v-artd .sp-305 :where(.prose) .cd-root{position:relative;margin:0;padding:14px 10px;border-radius:12px;background:var(--navy);color:#fff;text-align:center;font-weight:800}
.v-artd .sp-305 :where(.prose) .cd-root::after{content:"";position:absolute;left:100%;top:50%;width:24px;height:2px;background:var(--navy)}
.v-artd .sp-305 :where(.prose) .cd-br{display:grid;gap:10px;margin-left:24px;padding-left:20px;border-left:2px solid var(--navy)}
.v-artd .sp-305 :where(.prose) .cd-br>div{position:relative;padding:14px 16px;border-radius:12px;border:1px solid var(--line)}
.v-artd .sp-305 :where(.prose) .cd-br>div::before{content:"";position:absolute;right:100%;top:24px;width:20px;height:2px;background:var(--navy)}
.v-artd .sp-305 :where(.prose) .cd-k{margin:0 0 6px;font-size:14px;font-weight:800;color:var(--ink)}
.v-artd .sp-305 :where(.prose) .cd-a span{font-size:14.5px;color:#3f4555}
.v-artd .sp-305 :where(.prose) .cd-b{background:var(--blue2);border-color:#c8d3ff!important}
.v-artd .sp-305 :where(.prose) .cd-b ul{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0;list-style:none}
.v-artd .sp-305 :where(.prose) .cd-b li{margin:0;padding:5px 10px;border-radius:8px;background:#fff;font-size:13.5px;font-weight:700;color:#1d3fc4}
.v-artd .sp-305 :where(.prose) .cd-b li::before{content:none}
.v-artd .sp-305 :where(.prose) .cd-none{display:inline-block;padding:5px 10px;border-radius:8px;border:1.5px dashed #1d3fc4;font-size:13px;font-weight:700;color:#1d3fc4}

/* 스위치 목록 */
.v-artd .sp-305 :where(.prose) .mx-sw{margin:6px 0 18px;padding:0;list-style:none;border-radius:14px;border:1px solid var(--line);overflow:hidden}
.v-artd .sp-305 :where(.prose) .mx-sw li{display:grid;grid-template-columns:44px 140px 1fr;align-items:center;gap:12px;margin:0;padding:14px 16px;font-size:15px;line-height:1.55;color:#3f4555}
.v-artd .sp-305 :where(.prose) .mx-sw li+li{border-top:1px solid var(--line)}
.v-artd .sp-305 :where(.prose) .mx-sw li::before{content:none}
.v-artd .sp-305 :where(.prose) .mx-sw i{position:relative;width:40px;height:22px;border-radius:999px;background:var(--blue)}
.v-artd .sp-305 :where(.prose) .mx-sw i::after{content:"";position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff}
.v-artd .sp-305 :where(.prose) .mx-sw b{color:var(--ink)}

/* 계기 셋 */
.v-artd .sp-305 :where(.prose) .mx-meter{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 18px}
.v-artd .sp-305 :where(.prose) .mt{padding:18px;border-radius:14px;background:var(--soft);font-size:14px;line-height:1.6;color:#3f4555}
.v-artd .sp-305 :where(.prose) .mt p{margin:0}
.v-artd .sp-305 :where(.prose) .mt-k{margin-bottom:12px!important;font-weight:800;font-size:16px;color:var(--ink)!important}
.v-artd .sp-305 :where(.prose) .mt-bar{display:flex;align-items:flex-end;gap:8px;height:64px;margin-bottom:4px!important}
.v-artd .sp-305 :where(.prose) .mt-bar i{flex:1;border-radius:4px 4px 0 0;background:var(--blue)}
.v-artd .sp-305 :where(.prose) .mt-bar .a{height:100%;background:#c8d3ff}.v-artd .sp-305 :where(.prose) .mt-bar .b{height:62%;background:#7d93ff}.v-artd .sp-305 :where(.prose) .mt-bar .c{height:34%}
.v-artd .sp-305 :where(.prose) .mt-l{display:flex;gap:8px;margin-bottom:10px!important}
.v-artd .sp-305 :where(.prose) .mt-l span{flex:1;text-align:center;font-size:12px;font-weight:700;color:var(--sub)}
.v-artd .sp-305 :where(.prose) .mt-rank{display:grid;gap:4px;margin-bottom:10px!important}
.v-artd .sp-305 :where(.prose) .mt-rank span{padding:6px 10px;border-radius:6px;background:#fff;font-size:12.5px;font-weight:800;color:var(--ink)}
.v-artd .sp-305 :where(.prose) .mt-rank span:first-child{background:var(--blue);color:#fff}
.v-artd .sp-305 :where(.prose) .mt-why{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px!important}
.v-artd .sp-305 :where(.prose) .mt-why span{padding:5px 9px;border-radius:999px;border:1.5px solid #9aa6c6;font-size:12.5px;font-weight:700;color:var(--ink)}

/* 모눈 시험 양식 */
.v-artd .sp-305 :where(.prose) .mx-sheet{margin:8px 0 18px;overflow-x:auto;border-radius:10px;border:1px solid #c8d3ff}
.v-artd .sp-305 :where(.prose) .mx-sheet table{margin:0;min-width:520px;border-radius:0;background:linear-gradient(#eef2ff 1px,transparent 1px) 0 0/100% 12px,linear-gradient(90deg,#eef2ff 1px,transparent 1px) 0 0/12px 100%,#fff;font-size:14.5px}
.v-artd .sp-305 :where(.prose) .mx-sheet thead th{background:#1d3fc4;color:#fff;border:0;padding:11px 14px;font-size:13.5px}
.v-artd .sp-305 :where(.prose) .mx-sheet tbody th{width:120px;padding:0 14px;background:#f6f8ff;color:#1d3fc4;font-size:14px;text-align:left;border-bottom:1px solid #c8d3ff}
.v-artd .sp-305 :where(.prose) .mx-sheet td{height:46px;border-bottom:1px solid #c8d3ff;border-left:1px dashed #c8d3ff;background:transparent}
.v-artd .sp-305 .prose .mx-sheet td:first-child{font-weight:400}

/* 점선 연결 단계 */
.v-artd .sp-305 :where(.prose) .mx-flow{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:8px 0 18px;padding:0;list-style:none}
.v-artd .sp-305 :where(.prose) .mx-flow li{margin:0;padding:8px 14px;border-radius:999px;border:2px solid var(--ink);font-size:14px;font-weight:800;color:var(--ink);background:#fff}
.v-artd .sp-305 :where(.prose) .mx-flow li:last-child{background:var(--ink);color:#fff}
.v-artd .sp-305 :where(.prose) .mx-flow li::before{content:none}
.v-artd .sp-305 :where(.prose) .mx-flow li+li{margin-left:26px;position:relative}
.v-artd .sp-305 :where(.prose) .mx-flow li+li::after{content:"";position:absolute;right:100%;top:50%;width:26px;border-top:2px dotted var(--ink)}
.v-artd .sp-305 :where(.prose) .mx-sum{margin:6px 0 0;padding:18px 22px;border-radius:14px;background:var(--navy);color:#dfe5ff;font-size:15.5px;line-height:1.65}
.v-artd .sp-305 :where(.prose) .mx-sum b{display:block;margin-bottom:4px;color:#fff}
.v-artd .sp-305 :where(.prose) .mx-rel{margin:40px 0 10px;padding:16px 0 0;border-top:1px solid var(--line);list-style:none}
.v-artd .sp-305 :where(.prose) .mx-rel li{margin:0;padding:5px 0}
.v-artd .sp-305 :where(.prose) .mx-rel li::before{content:none}
.v-artd .sp-305 :where(.prose) .mx-rel a{font-weight:700;text-decoration:none}
.v-artd .sp-305 :where(.prose) .mx-rel a::before{content:"→ ";color:var(--sub)}

@media (max-width:720px){
  .v-artd .sp-305 :where(.prose) .mx-lead{font-size:18px}
  .v-artd .sp-305 .prose h2{font-size:23px}
  .v-artd .sp-305 :where(.prose) .mx-s{padding-top:46px}
  .v-artd .sp-305 :where(.prose) .mx-console{padding:14px}
  .v-artd .sp-305 :where(.prose) .cn-row{grid-template-columns:1fr 1fr}
  .v-artd .sp-305 :where(.prose) .md::after{display:none}
  .v-artd .sp-305 :where(.prose) .mx-vs{grid-template-columns:1fr}
  .v-artd .sp-305 :where(.prose) .mx-hw{padding:22px 18px}
  .v-artd .sp-305 :where(.prose) .hw-two{grid-template-columns:1fr;gap:6px}
  .v-artd .sp-305 :where(.prose) .hw-two li,.v-artd .sp-305 :where(.prose) .hw-two li:first-child,.v-artd .sp-305 :where(.prose) .hw-two li:last-child{border-radius:12px}
  .v-artd .sp-305 :where(.prose) .hw-two li:first-child::after{display:none}
  .v-artd .sp-305 :where(.prose) .mx-cold{grid-template-columns:1fr;gap:10px}
  .v-artd .sp-305 :where(.prose) .cd-root{justify-self:start;padding:10px 18px}
  .v-artd .sp-305 :where(.prose) .cd-root::after{display:none}
  .v-artd .sp-305 :where(.prose) .cd-br{margin-left:12px}
  .v-artd .sp-305 :where(.prose) .mx-sw li{grid-template-columns:44px 1fr;gap:4px 12px}
  .v-artd .sp-305 :where(.prose) .mx-sw span{grid-column:2}
  .v-artd .sp-305 :where(.prose) .mx-meter{grid-template-columns:1fr}
  .v-artd .sp-305 :where(.prose) .mx-flow{gap:8px}
  .v-artd .sp-305 :where(.prose) .mx-flow li+li{margin-left:0}
  .v-artd .sp-305 :where(.prose) .mx-flow li+li::after{display:none}
}