/* 328 추천, 매칭의 규칙형 구현과 학습 모델 = 두 갈래(규칙 카드 대 학습 흐름)(2026-10-16 글마다 다른 레이아웃).
   처음은 체(후보의 선택)와 순위표(추천과 평가), 업무 규칙은 칩과 구현 방법 셋, 핵심은 만약/그러면 규칙 카드 대 학습 흐름,
   도구 적합성은 선택 표, 필수 조건은 관문과 저울 두 단계, 신규 사용자는 상태 둘과 방식 넷, 시험은 경계 조건 기록표,
   사례는 진행 방식 판(측정 > 지표 > 규칙 > 안내), 평가는 같지 않음과 평가 대상 셋, 학습 자료는 기록 꼬리표, 책임은 둥근 탁자 */
.v-artd .sp-328 .prose{font-size:17px}
.v-artd .sp-328 :where(.prose) .rm-lead{font-size:20px;line-height:1.7;color:var(--ink);margin:0 0 24px}
.v-artd .sp-328 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-328 .prose h2::before,.v-artd .sp-328 .prose h2::after{content:none}
.v-artd .sp-328 :where(.prose) .rm-s{padding:60px 0 4px}
.v-artd .sp-328 :where(.prose) .rm-s>p{margin:0 0 16px}
.v-artd .sp-328 .prose ul,.v-artd .sp-328 .prose ol{margin:0;padding:0;list-style:none}
.v-artd .sp-328 .prose li{margin:0}
.v-artd .sp-328 .prose li::before{content:none}

/* 체와 순위표 */
.v-artd .sp-328 :where(.prose) .rm-two{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;margin:0 0 14px}
.v-artd .sp-328 :where(.prose) .tw-k{margin:0;font-size:13px;font-weight:800;color:var(--sub)}
.v-artd .sp-328 :where(.prose) .tw-t{margin:2px 0 14px;font-size:19px;font-weight:800;color:var(--ink)}
.v-artd .sp-328 :where(.prose) .tw-sieve{padding:20px;border-radius:16px 16px 60px 60px;background:var(--soft);position:relative}
.v-artd .sp-328 :where(.prose) .tw-sieve ul{display:grid;gap:6px;padding-bottom:40px!important;background:repeating-linear-gradient(90deg,transparent 0 10px,#c9cfdd 10px 11px) bottom/80% 26px no-repeat}
.v-artd .sp-328 :where(.prose) .tw-sieve li{padding:9px 12px;border-radius:8px;background:#fff;font-size:14.5px;font-weight:700;color:var(--ink)}
.v-artd .sp-328 :where(.prose) .tw-rank{padding:20px;border-radius:16px;background:var(--navy);color:#fff}
.v-artd .sp-328 :where(.prose) .tw-rank .tw-k{color:#9fb3ff}
.v-artd .sp-328 :where(.prose) .tw-rank .tw-t{color:#fff}
.v-artd .sp-328 :where(.prose) .tw-rank ol{counter-reset:rk;display:grid;gap:5px}
.v-artd .sp-328 :where(.prose) .tw-rank li{counter-increment:rk;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.08);font-size:14.5px;font-weight:700}
.v-artd .sp-328 :where(.prose) .tw-rank li::before{content:counter(rk);display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#fff;color:var(--navy);font-size:12px;font-weight:800}
.v-artd .sp-328 :where(.prose) .tw-rank li:nth-child(1)::before{background:var(--yellow)}
.v-artd .sp-328 :where(.prose) .rm-bar{padding:14px 18px;border-radius:12px;border:2px solid var(--ink);font-size:16px}
.v-artd .sp-328 :where(.prose) .rm-bar b{color:var(--blue)}

/* 업무 규칙 */
.v-artd .sp-328 :where(.prose) .rm-biz{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 14px}
.v-artd .sp-328 :where(.prose) .rm-biz span{position:relative;padding:20px 12px 20px 46px;border-radius:12px;background:var(--blue2);font-size:16px;font-weight:800;color:var(--ink)}
.v-artd .sp-328 :where(.prose) .rm-biz span::before{content:"⚙";position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--blue)}
.v-artd .sp-328 :where(.prose) .rm-how{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 12px}
.v-artd .sp-328 :where(.prose) .rm-how p{margin:0 6px 0 0;font-size:14.5px;font-weight:800;color:var(--sub)}
.v-artd .sp-328 :where(.prose) .rm-how span{padding:8px 14px;border-radius:999px;border:1.5px solid var(--ink);font-size:15px;font-weight:700;color:var(--ink)}

/* 두 갈래 */
.v-artd .sp-328 :where(.prose) .rm-fork{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:4px 0 16px}
.v-artd .sp-328 :where(.prose) .fk-h{margin:0 0 12px;font-size:17px;font-weight:800;color:var(--ink)}
.v-artd .sp-328 :where(.prose) .fk-n{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:#4a5060}
.v-artd .sp-328 :where(.prose) .fk-rule{padding:20px;border-radius:16px;border:2px solid var(--ink)}
.v-artd .sp-328 :where(.prose) .if{margin:0 0 8px;padding:12px 14px;border-radius:10px;background:#11141f;color:#e6e9f5;font-size:14.5px;line-height:1.9;font-weight:600}
.v-artd .sp-328 :where(.prose) .kw{display:inline-block;margin:0 8px 0 0;padding:1px 8px;border-radius:5px;background:var(--yellow);color:var(--navy);font-size:13px;font-weight:800}
.v-artd .sp-328 :where(.prose) .if .kw:nth-of-type(2){margin-left:8px;background:#7fd0ff}
.v-artd .sp-328 :where(.prose) .fk-ml{padding:20px;border-radius:16px;background:#f6f8ff;border:2px solid var(--blue)}
.v-artd .sp-328 :where(.prose) .fk-ml .fk-h{color:var(--blue)}
.v-artd .sp-328 :where(.prose) .ml-flow{display:grid;gap:22px}
.v-artd .sp-328 :where(.prose) .ml-flow span{position:relative;padding:12px;border-radius:999px;background:#fff;border:1.5px solid #b9c6f7;text-align:center;font-size:15px;font-weight:800;color:var(--ink)}
.v-artd .sp-328 :where(.prose) .ml-flow span+span::before{content:"";position:absolute;left:50%;top:-22px;height:20px;border-left:2px dashed var(--blue)}
.v-artd .sp-328 :where(.prose) .ml-flow span:nth-child(2){background:repeating-linear-gradient(45deg,#e6ecff 0 6px,#fff 6px 12px)}
.v-artd .sp-328 :where(.prose) .ml-flow span:last-child{background:var(--blue);color:#fff;border-color:var(--blue)}

/* 선택 표 */
.v-artd .sp-328 :where(.prose) .rm-fit{margin:4px 0 16px;overflow-x:auto}
.v-artd .sp-328 :where(.prose) .rm-fit table{margin:0;min-width:620px;font-size:14.5px;border:1px solid var(--line)}
.v-artd .sp-328 :where(.prose) .rm-fit th{font-size:13.5px}
.v-artd .sp-328 :where(.prose) .rm-fit th:nth-child(n+3),.v-artd .sp-328 :where(.prose) .rm-fit td:nth-child(n+3){text-align:center;width:76px}
.v-artd .sp-328 :where(.prose) .rm-fit td:nth-child(2){color:#4a5060;font-weight:400}
.v-artd .sp-328 :where(.prose) .rm-fit i{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid #9aa1b2;vertical-align:middle}

/* 관문과 저울 */
.v-artd .sp-328 :where(.prose) .rm-gate{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:26px;align-items:center;margin:4px 0 18px;padding:22px;border-radius:18px;background:var(--soft)}
.v-artd .sp-328 :where(.prose) .gt-in{display:grid;gap:6px}
.v-artd .sp-328 :where(.prose) .gt-in span{padding:8px 12px;border-radius:8px;background:#fff;font-size:14px;font-weight:700;color:var(--ink)}
.v-artd .sp-328 :where(.prose) .gt-in .hi{background:#fde8e8;color:#b1262b;position:relative}
.v-artd .sp-328 :where(.prose) .gt-in .hi::after{content:"✕";position:absolute;right:-22px;top:50%;transform:translateY(-50%);color:#c4282d;font-weight:800}
.v-artd .sp-328 :where(.prose) .gt-g,.v-artd .sp-328 :where(.prose) .gt-s{position:relative;padding:18px 12px;border-radius:12px;text-align:center}
.v-artd .sp-328 :where(.prose) .gt-g b,.v-artd .sp-328 :where(.prose) .gt-s b{display:block;font-size:16px}
.v-artd .sp-328 :where(.prose) .gt-g small,.v-artd .sp-328 :where(.prose) .gt-s small{display:block;margin-top:4px;font-size:12.5px;font-weight:600}
.v-artd .sp-328 :where(.prose) .gt-g{background:var(--ink);color:#fff;border-left:8px solid #c4282d;border-radius:0 12px 12px 0}
.v-artd .sp-328 :where(.prose) .gt-g b{color:#fff}
.v-artd .sp-328 :where(.prose) .gt-g small{color:#c9d0ea}
.v-artd .sp-328 :where(.prose) .gt-s{background:#fff;border:2px solid var(--blue)}
.v-artd .sp-328 :where(.prose) .gt-s b{color:var(--blue)}
.v-artd .sp-328 :where(.prose) .gt-s small{color:var(--sub)}
.v-artd .sp-328 :where(.prose) .gt-g::after{content:"";position:absolute;right:-24px;top:50%;width:22px;border-top:2px solid var(--ink)}

/* 신규 사용자 */
.v-artd .sp-328 :where(.prose) .rm-cold{display:grid;grid-template-columns:1fr 1.6fr;gap:14px;margin:4px 0 16px}
.v-artd .sp-328 :where(.prose) .cd-st{display:grid;gap:8px}
.v-artd .sp-328 :where(.prose) .cd-st span{padding:16px;border-radius:12px;border:2px dashed #9aa1b2;font-size:15px;font-weight:800;color:#4a5060;text-align:center;background:repeating-linear-gradient(-45deg,#fafbfd 0 8px,#fff 8px 16px)}
.v-artd .sp-328 :where(.prose) .cd-op{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding:16px;border-radius:12px;background:var(--blue2)}
.v-artd .sp-328 :where(.prose) .cd-op p{width:100%;margin:0;font-size:13.5px;font-weight:800;color:#1d3fc4}
.v-artd .sp-328 :where(.prose) .cd-op span{padding:8px 14px;border-radius:8px;background:#fff;font-size:15px;font-weight:700;color:var(--ink)}
.v-artd .sp-328 :where(.prose) .cd-op .rnd{width:100%;border:1.5px solid #c4282d}
.v-artd .sp-328 :where(.prose) .cd-op .rnd small{display:block;margin-top:2px;font-size:13px;font-weight:700;color:#b1262b}

/* 경계 조건 기록표 */
.v-artd .sp-328 :where(.prose) .rm-test{margin:4px 0 16px;overflow-x:auto}
.v-artd .sp-328 :where(.prose) .rm-test table{margin:0;min-width:520px;font-size:14.5px;border:2px solid var(--ink);border-radius:0}
.v-artd .sp-328 :where(.prose) .rm-test th{background:#fff;border-bottom:2px solid var(--ink);font-size:13.5px}
.v-artd .sp-328 :where(.prose) .rm-test td{height:44px;border-right:1px solid var(--line)}
.v-artd .sp-328 :where(.prose) .rm-test td:first-child{background:#fffaf0}

/* 진행 방식: 사례 판 */
.v-artd .sp-328 :where(.prose) .rm-we{padding:26px 28px;border-radius:20px;background:var(--navy);color:#fff}
.v-artd .sp-328 :where(.prose) .we-k{margin:0;font-size:13px;font-weight:800;color:#9fb3ff}
.v-artd .sp-328 :where(.prose) .we-t{margin:2px 0 16px;font-size:21px;font-weight:800}
.v-artd .sp-328 :where(.prose) .we-chain{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:16px!important}
.v-artd .sp-328 :where(.prose) .we-chain li{position:relative;padding:14px 8px;border-radius:12px;background:rgba(255,255,255,.1);text-align:center;font-size:15px;font-weight:800}
.v-artd .sp-328 :where(.prose) .we-chain li+li::before{content:"→";position:absolute;left:-19px;top:50%;transform:translateY(-50%);color:var(--yellow);font-size:16px}
.v-artd .sp-328 :where(.prose) .we-chain li:last-child{background:var(--yellow);color:var(--navy)}
.v-artd .sp-328 :where(.prose) .we-d{margin:0 0 12px;font-size:15px;line-height:1.65;color:#dfe4f7}
.v-artd .sp-328 :where(.prose) .we-roles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.v-artd .sp-328 :where(.prose) .we-roles span{padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.25);font-size:14px;color:#dfe4f7}
.v-artd .sp-328 :where(.prose) .we-roles b{display:block;margin-bottom:2px;font-size:15px;color:#fff}
.v-artd .sp-328 :where(.prose) .we-btn{display:inline-flex;margin-top:4px;padding:13px 24px;border-radius:999px;background:#fff;color:var(--navy)!important;font-weight:800;text-decoration:none!important}
.v-artd .sp-328 :where(.prose) .we-btn:hover{background:var(--yellow)}

/* 평가: 같지 않음 + 대상 셋 */
.v-artd .sp-328 :where(.prose) .rm-sep{margin:4px 0 14px;padding:18px 20px;border-radius:16px;border:1px solid var(--line)}
.v-artd .sp-328 :where(.prose) .sp-c{margin:0 0 10px;font-size:13.5px;font-weight:800;color:var(--sub)}
.v-artd .sp-328 :where(.prose) .sp-two{display:grid;grid-template-columns:1fr 50px 1fr;align-items:center}
.v-artd .sp-328 :where(.prose) .sp-two span{padding:14px;border-radius:10px;background:var(--soft);text-align:center;font-size:15.5px;font-weight:800;color:var(--ink)}
.v-artd .sp-328 :where(.prose) .sp-two i{font-style:normal;text-align:center;font-size:30px;color:#c4282d}
.v-artd .sp-328 :where(.prose) .sp-n{margin:10px 0 0;font-size:14.5px;color:#4a5060}
.v-artd .sp-328 :where(.prose) .rm-eval{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 12px}
.v-artd .sp-328 :where(.prose) .rm-eval p{margin:0 6px 0 0;font-size:14.5px;font-weight:800;color:var(--sub)}
.v-artd .sp-328 :where(.prose) .rm-eval span{padding:9px 14px;border-radius:8px;background:var(--blue);color:#fff;font-size:15px;font-weight:800}

/* 기록 꼬리표 */
.v-artd .sp-328 :where(.prose) .rm-log{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 14px}
.v-artd .sp-328 :where(.prose) .rm-log span{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:6px;background:#11141f;color:#fff;font-size:15px;font-weight:800;font-family:inherit}
.v-artd .sp-328 :where(.prose) .rm-log span::before{content:"";width:10px;height:10px;border-radius:50%}
.v-artd .sp-328 :where(.prose) .lg-a::before{background:#7fd0ff}
.v-artd .sp-328 :where(.prose) .lg-b::before{background:#5ad18a}
.v-artd .sp-328 :where(.prose) .lg-c::before{background:#ff7b7b}
.v-artd .sp-328 :where(.prose) .lg-d::before{background:var(--yellow)}

/* 둥근 탁자 */
.v-artd .sp-328 :where(.prose) .rm-table{position:relative;width:340px;height:220px;margin:6px auto 16px}
.v-artd .sp-328 :where(.prose) .rm-table b{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:var(--blue2);display:grid;place-items:center;text-align:center;font-size:15px;color:#1d3fc4;padding:20px}
.v-artd .sp-328 :where(.prose) .rm-table span{position:absolute;padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:800;z-index:1;white-space:nowrap}
.v-artd .sp-328 :where(.prose) .rm-table span:nth-child(1){left:0;top:24px}
.v-artd .sp-328 :where(.prose) .rm-table span:nth-child(2){right:0;top:24px}
.v-artd .sp-328 :where(.prose) .rm-table span:nth-child(3){left:50%;bottom:0;transform:translateX(-50%)}

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

@media (max-width:720px){
  .v-artd .sp-328 :where(.prose) .rm-lead{font-size:18px}
  .v-artd .sp-328 .prose h2{font-size:23px}
  .v-artd .sp-328 :where(.prose) .rm-s{padding-top:46px}
  .v-artd .sp-328 :where(.prose) .rm-two{grid-template-columns:1fr}
  .v-artd .sp-328 :where(.prose) .rm-biz{grid-template-columns:1fr}
  .v-artd .sp-328 :where(.prose) .rm-fork{grid-template-columns:1fr}
  .v-artd .sp-328 :where(.prose) .rm-gate{grid-template-columns:1fr;gap:14px}
  .v-artd .sp-328 :where(.prose) .gt-g::after{display:none}
  .v-artd .sp-328 :where(.prose) .gt-in .hi::after{right:10px}
  .v-artd .sp-328 :where(.prose) .rm-cold{grid-template-columns:1fr}
  .v-artd .sp-328 :where(.prose) .rm-we{padding:22px 18px}
  .v-artd .sp-328 :where(.prose) .we-chain{grid-template-columns:1fr 1fr;gap:10px}
  .v-artd .sp-328 :where(.prose) .we-chain li+li::before{display:none}
  .v-artd .sp-328 :where(.prose) .we-roles{grid-template-columns:1fr}
  .v-artd .sp-328 :where(.prose) .sp-two{grid-template-columns:1fr;gap:4px}
  .v-artd .sp-328 :where(.prose) .rm-table{width:100%;max-width:320px}
}