/* 123 기능별 요구 정의의 행위자, 동작, 실행 시기, 예외 = 문장 분해 도식(2026-10-16 사장님 '공통틀로 하지마 다 다르게').
   첫머리 다섯 색 범례(사용자, 동작, 자료, 시점, 예외)를 글 전체 색 기준으로, 요청 표현은 사전 표제어와 풀이, 회원가입은 한 낱말에서 퍼지는 결정,
   다섯 항목은 색 칸 조립기, 정리 순서는 세 칸 계단, 정상과 예외는 갈림길, 사례는 처리 파이프, 진행 방식은 메모가 문서로,
   참고 서비스는 포함 표시 체크 목록, 점검 상황은 경고 줄, 준비 자료는 폴더 넷 */
.v-artd .sp-123 .prose{font-size:17px}
.v-artd .sp-123{--k1:#2e5bff;--k2:#0f9d76;--k3:#c77700;--k4:#7a3ff2;--k5:#d23a3a}
.v-artd .sp-123 :where(.prose) .ps-lead{margin:0 0 18px;font-size:20px;line-height:1.7;color:var(--ink)}
.v-artd .sp-123 :where(.prose) .ps-key{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.v-artd .sp-123 :where(.prose) .ps-key span{padding:6px 14px;border-radius:999px;color:#fff;font-size:14px;font-weight:800}
.v-artd .sp-123 :where(.prose) .k1{--c:var(--k1)}.v-artd .sp-123 :where(.prose) .k2{--c:var(--k2)}.v-artd .sp-123 :where(.prose) .k3{--c:var(--k3)}.v-artd .sp-123 :where(.prose) .k4{--c:var(--k4)}.v-artd .sp-123 :where(.prose) .k5{--c:var(--k5)}
.v-artd .sp-123 :where(.prose) .ps-key span{background:var(--c)}
.v-artd .sp-123 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-123 .prose h2::before,.v-artd .sp-123 .prose h2::after{content:none}
.v-artd .sp-123 :where(.prose) .ps-s{padding:60px 0 4px}
.v-artd .sp-123 :where(.prose) .ps-s>p{margin:0 0 16px}

/* 사전 표제어 */
.v-artd .sp-123 :where(.prose) .ps-dict{margin:6px 0 20px;columns:2;column-gap:30px}
.v-artd .sp-123 :where(.prose) .ps-dict div{break-inside:avoid;padding:12px 0;border-top:1px solid var(--line)}
.v-artd .sp-123 :where(.prose) .ps-dict dt{font-family:'Pretendard Variable',serif;font-size:18px;font-weight:800;color:var(--ink)}
.v-artd .sp-123 :where(.prose) .ps-dict dt::before{content:"“";color:#1d3fc4}
.v-artd .sp-123 :where(.prose) .ps-dict dt::after{content:"”";color:#1d3fc4}
.v-artd .sp-123 :where(.prose) .ps-dict dd{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:#3f4555}
.v-artd .sp-123 :where(.prose) .ps-dict dd::before{content:"풀이 ";font-size:12px;font-weight:800;color:#1d3fc4}

/* 한 낱말에서 퍼지는 결정 */
.v-artd .sp-123 :where(.prose) .ps-burst{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:0;margin:8px 0 22px;padding:22px;border-radius:16px;background:var(--soft)}
.v-artd .sp-123 :where(.prose) .bs-w{position:relative;margin:0;padding:22px 10px;border-radius:14px;background:var(--navy);color:#fff;text-align:center;font-size:22px;font-weight:800}
.v-artd .sp-123 :where(.prose) .bs-w small{display:block;font-size:12.5px;font-weight:700;color:#9fb3ff}
.v-artd .sp-123 :where(.prose) .ps-burst ul{position:relative;margin:0;padding:0 0 0 46px;list-style:none}
.v-artd .sp-123 :where(.prose) .ps-burst ul::before{content:"";position:absolute;left:22px;top:18px;bottom:18px;width:2px;background:var(--navy)}
.v-artd .sp-123 :where(.prose) .ps-burst ul::after{content:"";position:absolute;left:0;top:50%;width:22px;height:2px;background:var(--navy)}
.v-artd .sp-123 :where(.prose) .ps-burst li{position:relative;margin:5px 0;padding:9px 14px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:15px;font-weight:700;color:var(--ink)}
.v-artd .sp-123 :where(.prose) .ps-burst li::before{content:"";position:absolute;left:-24px;top:50%;width:24px;height:2px;background:var(--navy)}

/* 색 칸 조립기 */
.v-artd .sp-123 :where(.prose) .ps-build{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:8px 0 10px}
.v-artd .sp-123 :where(.prose) .pb-c{display:flex;flex-direction:column;border-radius:12px;border:1.5px solid var(--c);overflow:hidden;background:#fff}
.v-artd .sp-123 :where(.prose) .pb-h{margin:0;padding:10px 12px;background:var(--c);color:#fff;font-size:14.5px;font-weight:800}
.v-artd .sp-123 :where(.prose) .pb-c ul{display:flex;flex-direction:column;gap:4px;margin:0;padding:10px 10px 6px;list-style:none}
.v-artd .sp-123 :where(.prose) .pb-c li{margin:0;padding:5px 8px;border-radius:6px;border:1px dashed var(--c);color:var(--c);font-size:13px;font-weight:700}
.v-artd .sp-123 :where(.prose) .pb-c li::before{content:none}
.v-artd .sp-123 :where(.prose) .pb-d{margin:auto 0 0;padding:10px 12px 12px;font-size:13px;line-height:1.55;color:#3f4555;border-top:1px solid var(--line)}
.v-artd .sp-123 :where(.prose) .pb-d b{color:var(--ink)}

/* 세 칸 계단 */
.v-artd .sp-123 :where(.prose) .ps-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start;margin:8px 0 22px;counter-reset:s}
.v-artd .sp-123 :where(.prose) .st{display:block;height:auto;min-height:0;aspect-ratio:auto;counter-increment:s;padding:18px;border-radius:14px 14px 4px 4px;background:var(--blue2);font-size:14.5px;line-height:1.6;color:#3f4555}
.v-artd .sp-123 :where(.prose) .st:nth-child(2){margin-top:30px;background:#c9d4ff}
.v-artd .sp-123 :where(.prose) .st:nth-child(3){margin-top:60px;background:var(--blue);color:#e7ecff}
.v-artd .sp-123 :where(.prose) .st p{margin:0}
.v-artd .sp-123 .prose .st h3{margin:0 0 8px;padding:0;font-size:17px;color:var(--ink)}
.v-artd .sp-123 .prose .st h3::before{content:counter(s) "단계  ";font-size:13px;color:#1d3fc4}
.v-artd .sp-123 .prose .st:nth-child(3) h3{color:#fff}
.v-artd .sp-123 .prose .st:nth-child(3) h3::before{color:#cfd8ff}

/* 정상과 예외 갈림길 */
.v-artd .sp-123 :where(.prose) .ps-path{margin:0 0 10px;padding:20px 22px;border-radius:14px;border:1px solid var(--line)}
.v-artd .sp-123 :where(.prose) .ps-path p{margin:0}
.v-artd .sp-123 :where(.prose) .ph-k{margin-bottom:12px!important;font-weight:800;color:var(--ink)}
.v-artd .sp-123 :where(.prose) .ph-row{display:flex;align-items:center;gap:0}
.v-artd .sp-123 :where(.prose) .ph-start{padding:9px 16px;border-radius:10px;background:var(--navy);color:#fff;font-weight:800}
.v-artd .sp-123 :where(.prose) .ph-ok{position:relative;margin-left:60px;padding:9px 16px;border-radius:10px;background:var(--k2);color:#fff;font-weight:800}
.v-artd .sp-123 :where(.prose) .ph-ok::before{content:"";position:absolute;right:100%;top:50%;width:60px;height:2px;background:var(--k2)}
.v-artd .sp-123 :where(.prose) .ph-ex{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px 40px;padding-left:20px;border-left:2px dashed var(--k5)}
.v-artd .sp-123 :where(.prose) .ph-ex span{padding:7px 12px;border-radius:8px;border:1.5px solid var(--k5);color:var(--k5);font-size:14px;font-weight:800}
.v-artd .sp-123 :where(.prose) .ph-d{font-size:15px;color:#3f4555}

/* 처리 파이프 */
.v-artd .sp-123 :where(.prose) .ps-case{margin:6px 0 24px;padding:22px 24px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 30px -26px rgba(27,31,58,.5)}
.v-artd .sp-123 .prose .ps-case h3{margin:0 0 14px;padding:0;font-size:19px;color:var(--ink)}
.v-artd .sp-123 .prose .ps-case h3::before{content:"프로젝트 사례";display:block;margin-bottom:4px;font-size:12.5px;color:#1d3fc4}
.v-artd .sp-123 :where(.prose) .ps-case p{margin:12px 0 0;font-size:15.5px;line-height:1.7}
.v-artd .sp-123 :where(.prose) .cs-pipe{display:flex;margin:0;padding:0;list-style:none;border-radius:10px;overflow:hidden;counter-reset:p}
.v-artd .sp-123 :where(.prose) .cs-pipe li{counter-increment:p;flex:1;margin:0;padding:12px 10px 12px 14px;background:var(--soft);font-size:13px;font-weight:700;line-height:1.4;color:var(--ink);position:relative}
.v-artd .sp-123 :where(.prose) .cs-pipe li+li{border-left:2px solid #fff}
.v-artd .sp-123 :where(.prose) .cs-pipe li::before{content:counter(p);display:block;margin-bottom:4px;font-size:12px;color:#1d3fc4}
.v-artd .sp-123 :where(.prose) .cs-pipe li:last-child{background:var(--blue2)}

/* 진행 방식 = 메모가 문서로 */
.v-artd .sp-123 :where(.prose) .ps-we{display:grid;grid-template-columns:150px 50px 1fr;align-items:center;gap:10px;margin:10px 0 8px;padding:26px;border-radius:20px;background:var(--navy);color:#fff}
.v-artd .sp-123 :where(.prose) .hw-memo{display:flex;flex-direction:column;gap:6px}
.v-artd .sp-123 :where(.prose) .hw-memo span{padding:9px 10px;background:var(--yellow2);color:#6b5200;font-size:13px;font-weight:800;border-radius:2px;transform:rotate(-2deg)}
.v-artd .sp-123 :where(.prose) .hw-memo span:nth-child(2){transform:rotate(1.5deg);background:#fff}
.v-artd .sp-123 :where(.prose) .hw-memo span:nth-child(2){color:var(--ink)}
.v-artd .sp-123 :where(.prose) .hw-memo span:nth-child(3){transform:rotate(-1deg);background:#dfe6ff;color:#1d3fc4}
.v-artd .sp-123 :where(.prose) .hw-arrow{height:2px;background:#9fb3ff;position:relative}
.v-artd .sp-123 :where(.prose) .hw-arrow::after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-left:8px solid #9fb3ff;border-right:0}
.v-artd .sp-123 :where(.prose) .hw-body p{margin:0}
.v-artd .sp-123 :where(.prose) .hw-k{font-size:13px;font-weight:800;color:#9fb3ff}
.v-artd .sp-123 :where(.prose) .hw-t{margin:6px 0 10px!important;font-size:21px;font-weight:800}
.v-artd .sp-123 :where(.prose) .hw-d{margin-bottom:18px!important;font-size:15.5px;line-height:1.65;color:#cfd6f5}
.v-artd .sp-123 :where(.prose) .hw-btn{display:inline-flex;padding:12px 22px;border-radius:999px;background:#fff;color:var(--navy)!important;font-weight:800;text-decoration:none!important}
.v-artd .sp-123 :where(.prose) .hw-btn:hover{background:var(--blue2)}

/* 포함 표시 체크 목록 */
.v-artd .sp-123 :where(.prose) .ps-ref{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 20px}
.v-artd .sp-123 :where(.prose) .rf{padding:18px 20px;border-radius:14px;background:var(--soft)}
.v-artd .sp-123 :where(.prose) .rf p{margin:0}
.v-artd .sp-123 :where(.prose) .rf-h{margin-bottom:10px!important;font-weight:800;color:var(--ink);font-size:15.5px}
.v-artd .sp-123 :where(.prose) .rf ul{margin:0 0 10px;padding:0;list-style:none}
.v-artd .sp-123 :where(.prose) .rf li{display:flex;align-items:center;justify-content:space-between;margin:0;padding:8px 10px;border-bottom:1px solid #e3e6ef;font-size:15px;color:var(--ink)}
.v-artd .sp-123 :where(.prose) .rf li::before{content:none}
.v-artd .sp-123 :where(.prose) .rf li::after{content:"포함 여부";padding:2px 8px;border-radius:5px;border:1.5px solid #9aa6c6;font-size:12px;font-weight:700;color:var(--sub)}
.v-artd .sp-123 :where(.prose) .rf-d{font-size:14.5px;line-height:1.6;color:#3f4555}

/* 경고 줄 */
.v-artd .sp-123 :where(.prose) .ps-alert{margin:6px 0 10px;padding:0;list-style:none}
.v-artd .sp-123 :where(.prose) .ps-alert li{display:grid;grid-template-columns:30px 1fr 1fr;align-items:center;gap:12px;margin:0 0 8px;padding:14px 16px;border-radius:12px;background:#fff6f6}
.v-artd .sp-123 :where(.prose) .ps-alert li::before{content:"!";display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--k5);color:#fff;font-weight:800}
.v-artd .sp-123 :where(.prose) .ps-alert b{font-size:15.5px;color:var(--ink)}
.v-artd .sp-123 :where(.prose) .ps-alert span{font-size:15px;color:#3f4555}
.v-artd .sp-123 :where(.prose) .ps-alert span::before{content:"→ ";color:var(--k5)}

/* 폴더 넷 */
.v-artd .sp-123 :where(.prose) .ps-folder{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0 20px}
.v-artd .sp-123 :where(.prose) .fd{position:relative;padding:18px 16px;border-radius:0 12px 12px 12px;background:#e8ecf8;font-size:14px;line-height:1.55;color:#3f4555}
.v-artd .sp-123 :where(.prose) .fd::before{content:"";position:absolute;left:0;top:-14px;width:46%;height:14px;border-radius:8px 8px 0 0;background:#e8ecf8}
.v-artd .sp-123 :where(.prose) .fd p{margin:0}
.v-artd .sp-123 :where(.prose) .fd-t{margin-bottom:6px!important;font-weight:800;font-size:16px;color:var(--ink)}
.v-artd .sp-123 :where(.prose) .fd-q{background:#fff;border:1.5px dashed #9aa6c6}
.v-artd .sp-123 :where(.prose) .fd-q::before{background:#fff;border:1.5px dashed #9aa6c6;border-bottom:0;top:-15px;left:-1.5px}
.v-artd .sp-123 :where(.prose) .ps-rel{margin:40px 0 10px;padding:16px 0 0;border-top:1px solid var(--line);list-style:none}
.v-artd .sp-123 :where(.prose) .ps-rel li{margin:0;padding:5px 0}
.v-artd .sp-123 :where(.prose) .ps-rel li::before{content:none}
.v-artd .sp-123 :where(.prose) .ps-rel a{font-weight:700;text-decoration:none}
.v-artd .sp-123 :where(.prose) .ps-rel a::before{content:"→ ";color:var(--sub)}

@media (max-width:720px){
  .v-artd .sp-123 :where(.prose) .ps-lead{font-size:18px}
  .v-artd .sp-123 .prose h2{font-size:23px}
  .v-artd .sp-123 :where(.prose) .ps-s{padding-top:46px}
  .v-artd .sp-123 :where(.prose) .ps-dict{columns:1}
  .v-artd .sp-123 :where(.prose) .ps-burst{grid-template-columns:1fr;gap:14px;padding:16px}
  .v-artd .sp-123 :where(.prose) .ps-burst ul::after{display:none}
  .v-artd .sp-123 :where(.prose) .ps-burst ul{padding-left:30px}
  .v-artd .sp-123 :where(.prose) .ps-burst ul::before{left:8px}
  .v-artd .sp-123 :where(.prose) .ps-burst li::before{left:-22px;width:22px}
  .v-artd .sp-123 :where(.prose) .ps-build{grid-template-columns:1fr 1fr}
  .v-artd .sp-123 :where(.prose) .pb-c.k5{grid-column:1/-1}
  .v-artd .sp-123 :where(.prose) .ps-steps{grid-template-columns:1fr}
  .v-artd .sp-123 :where(.prose) .st:nth-child(2){margin:0 0 0 16px}
  .v-artd .sp-123 :where(.prose) .st:nth-child(3){margin:0 0 0 32px}
  .v-artd .sp-123 :where(.prose) .ph-ok{margin-left:30px}
  .v-artd .sp-123 :where(.prose) .ph-ok::before{width:30px}
  .v-artd .sp-123 :where(.prose) .ph-ex{margin-left:20px}
  .v-artd .sp-123 :where(.prose) .cs-pipe{flex-direction:column}
  .v-artd .sp-123 :where(.prose) .cs-pipe li+li{border-left:0;border-top:2px solid #fff}
  .v-artd .sp-123 :where(.prose) .cs-pipe li::before{display:inline;margin-right:8px}
  .v-artd .sp-123 :where(.prose) .ps-case{padding:18px}
  .v-artd .sp-123 :where(.prose) .ps-we{grid-template-columns:1fr;padding:22px 18px}
  .v-artd .sp-123 :where(.prose) .hw-memo{flex-direction:row;flex-wrap:wrap}
  .v-artd .sp-123 :where(.prose) .hw-arrow{width:2px;height:22px;margin:0 auto}
  .v-artd .sp-123 :where(.prose) .hw-arrow::after{right:-5px;top:auto;bottom:-1px;border:6px solid transparent;border-top:8px solid #9fb3ff;border-bottom:0}
  .v-artd .sp-123 :where(.prose) .ps-ref{grid-template-columns:1fr}
  .v-artd .sp-123 :where(.prose) .ps-alert li{grid-template-columns:30px 1fr;gap:4px 12px}
  .v-artd .sp-123 :where(.prose) .ps-alert span{grid-column:2}
  .v-artd .sp-123 :where(.prose) .ps-folder{grid-template-columns:1fr 1fr;row-gap:28px}
}