/* 335 노코드 제품의 로그인, 지불 연동 한도 = 블록 조립(2026-10-16 사장님 '공통틀로 하지마 다 다르게').
   첫머리는 기능 블록 아홉 개를 아래(기본 기능)부터 쌓고, 가입과 로그인부터 위는 세부 조건을 시험하는 구간으로 한도선을 긋는다.
   구간마다 실제 모양: 요구와 제품 대조, 퍼즐 조각과 한도선, 확장 단자, 지원 상태 검토표, 유지 스위치, 시험 계획 카드, 일정 막대, 이삿짐 꼬리표, 두 원 겹침 */
.v-artd .sp-335 .prose{font-size:17px}
.v-artd .sp-335 :where(.prose) .nc-lead{font-size:20px;line-height:1.7;color:var(--ink);margin:0 0 14px}
.v-artd .sp-335 :where(.prose) .nc-lead b{color:var(--blue)}
.v-artd .sp-335 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-335 .prose h2::before,.v-artd .sp-335 .prose h2::after{content:none}
.v-artd .sp-335 :where(.prose) .nc-s{padding:60px 0 4px}
.v-artd .sp-335 :where(.prose) .nc-s>p{margin:0 0 16px}

/* 블록 쌓기 */
.v-artd .sp-335 :where(.prose) .nc-stack{display:grid;grid-template-columns:330px 1fr;gap:40px;align-items:end;margin:36px 0 10px;padding:30px 32px;border-radius:20px;background:var(--soft)}
.v-artd .sp-335 :where(.prose) .nc-stack-h{grid-column:1/-1;margin:0 0 -16px;font-size:14px;font-weight:800;color:var(--sub)}
.v-artd .sp-335 :where(.prose) .nc-stack ol{margin:0;padding:0;list-style:none}
.v-artd .sp-335 :where(.prose) .nc-stack li{position:relative;display:flex;justify-content:space-between;align-items:center;margin:0 0 4px;padding:9px 14px;border-radius:6px;font-size:14.5px;line-height:1.3}
.v-artd .sp-335 :where(.prose) .nc-stack li b{font-weight:800}
.v-artd .sp-335 :where(.prose) .nc-stack li span{font-size:13px;opacity:.9}
.v-artd .sp-335 :where(.prose) .nc-stack .lo{background:var(--blue2);color:#1d3fc4}
.v-artd .sp-335 :where(.prose) .nc-stack .hi{background:var(--blue);color:#fff}
.v-artd .sp-335 :where(.prose) .nc-stack .hi:nth-child(odd){margin-left:18px}
.v-artd .sp-335 :where(.prose) .nc-stack .lo:nth-child(even){margin-right:18px}
.v-artd .sp-335 :where(.prose) .nc-stack .hi+.lo{margin-top:30px}
.v-artd .sp-335 :where(.prose) .nc-stack .hi+.lo::after{content:"↑ 세부 조건 시험";position:absolute;left:-6px;right:-6px;top:-20px;border-top:2px dashed #e5484d;padding-top:2px;font-size:12px;font-weight:800;color:#c4282d;text-align:right}
.v-artd .sp-335 :where(.prose) .nc-stack figcaption{margin:0;font-size:16px;line-height:1.75;color:var(--ink)}
.v-artd .sp-335 :where(.prose) .nc-stack figcaption b{color:var(--blue)}

/* 요구와 제품 대조 */
.v-artd .sp-335 :where(.prose) .nc-match{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;margin:4px 0 24px}
.v-artd .sp-335 :where(.prose) .nm-col{display:grid;gap:8px}
.v-artd .sp-335 :where(.prose) .nm-h{margin:0 0 2px;font-size:13px;font-weight:800;color:var(--sub)}
.v-artd .sp-335 :where(.prose) .nm-col span{padding:10px 14px;border-radius:10px;border:1.5px solid var(--ink);font-size:15px;font-weight:700;color:var(--ink);background:#fff}
.v-artd .sp-335 :where(.prose) .nm-r span{border-color:var(--blue);color:#1d3fc4}
.v-artd .sp-335 :where(.prose) .nm-mid{align-self:stretch;margin:26px 0 0;--d:repeating-linear-gradient(90deg,#9aa1b3 0 6px,transparent 6px 10px);background:var(--d) 0 16.6%/100% 2px no-repeat,var(--d) 0 50%/100% 2px no-repeat,var(--d) 0 83.4%/100% 2px no-repeat}
.v-artd .sp-335 :where(.prose) .nm-r{text-align:right}

/* 퍼즐 조각과 한도선 */
.v-artd .sp-335 :where(.prose) .nc-limit{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;margin:22px 0 26px;padding:28px 28px 22px;border-radius:18px;border:1px solid var(--line)}
.v-artd .sp-335 :where(.prose) .nl-piece{position:relative;padding:18px 20px;border-radius:12px;background:var(--navy);color:#fff}
.v-artd .sp-335 :where(.prose) .nl-piece::after{content:"";position:absolute;right:-15px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--navy)}
.v-artd .sp-335 :where(.prose) .nl-piece+.nl-piece::after{right:auto;left:-15px;background:#fff;box-shadow:inset 0 0 0 0 #fff}
.v-artd .sp-335 :where(.prose) .nl-name{margin:0 0 10px;font-size:19px;font-weight:800}
.v-artd .sp-335 :where(.prose) .nl-piece ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.v-artd .sp-335 :where(.prose) .nl-piece li{margin:0;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);font-size:13.5px;font-weight:600}
.v-artd .sp-335 :where(.prose) .nl-piece li::before{content:none}
.v-artd .sp-335 :where(.prose) .nl-line{grid-column:1/-1;border-top:2px dashed #e5484d;padding-top:6px;font-size:13px;font-weight:800;color:#c4282d}
.v-artd .sp-335 :where(.prose) .nl-out{grid-column:1/-1;display:flex;gap:8px;align-items:center}
.v-artd .sp-335 :where(.prose) .nl-out::before{content:"다른 처리가 필요하면";font-size:13px;font-weight:700;color:var(--sub);margin-right:4px}
.v-artd .sp-335 :where(.prose) .nl-out span{padding:6px 12px;border:1.5px dashed #9aa1b3;border-radius:8px;font-size:14px;font-weight:700;color:var(--sub)}

/* 확장 단자 */
.v-artd .sp-335 :where(.prose) .nc-plug{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 24px;padding:0;list-style:none}
.v-artd .sp-335 :where(.prose) .nc-plug li{margin:0;padding:16px 16px 16px 58px;position:relative;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line),0 14px 30px -24px rgba(27,31,58,.4);font-size:15.5px;font-weight:800;color:var(--ink)}
.v-artd .sp-335 :where(.prose) .nc-plug li::before{content:none}
.v-artd .sp-335 :where(.prose) .nc-plug i{position:absolute;left:16px;top:50%;width:28px;height:22px;margin-top:-11px;border-radius:5px;background:var(--blue)}
.v-artd .sp-335 :where(.prose) .nc-plug i::before,.v-artd .sp-335 :where(.prose) .nc-plug i::after{content:"";position:absolute;top:-7px;width:4px;height:8px;border-radius:2px;background:var(--blue)}
.v-artd .sp-335 :where(.prose) .nc-plug i::before{left:7px}
.v-artd .sp-335 :where(.prose) .nc-plug i::after{right:7px}

/* 지원 상태 검토표 */
.v-artd .sp-335 :where(.prose) .nc-sheet{margin:20px 0 24px;overflow-x:auto;border-radius:12px;border:1px solid var(--line)}
.v-artd .sp-335 :where(.prose) .nc-sheet table{margin:0;min-width:520px;border-radius:0;font-size:15px}
.v-artd .sp-335 :where(.prose) .nc-sheet th{background:#fff;color:var(--sub);font-size:13px;border-bottom:2px solid var(--ink);padding:12px 16px}
.v-artd .sp-335 :where(.prose) .nc-sheet td{padding:14px 16px;height:52px;vertical-align:middle}
.v-artd .sp-335 :where(.prose) .st{display:inline-block;padding:4px 10px;border-radius:6px;font-size:13.5px;font-weight:800;white-space:nowrap}
.v-artd .sp-335 :where(.prose) .st-a{background:var(--blue2);color:#1d3fc4}
.v-artd .sp-335 :where(.prose) .st-b{background:var(--yellow2);color:#7a5600}
.v-artd .sp-335 :where(.prose) .st-c{background:#f1f2f6;color:#4b5263}

/* 유지 스위치 */
.v-artd .sp-335 :where(.prose) .nc-keep{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:20px 0 22px;border-radius:999px;background:var(--soft);padding:6px}
.v-artd .sp-335 :where(.prose) .nc-keep>div{padding:16px 24px;border-radius:999px;font-size:15px;line-height:1.5;color:var(--sub)}
.v-artd .sp-335 :where(.prose) .nc-keep b{display:block;font-size:16px;color:var(--ink);margin-bottom:2px}
.v-artd .sp-335 :where(.prose) .nk-a{background:#fff;box-shadow:0 8px 20px -14px rgba(27,31,58,.5)}
.v-artd .sp-335 :where(.prose) .nk-a b{color:var(--blue)}
.v-artd .sp-335 :where(.prose) .nc-doc{position:relative;margin:24px 0 10px;padding:20px 64px 20px 22px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:15.5px;line-height:1.65}
.v-artd .sp-335 :where(.prose) .nc-doc b{display:block;margin-bottom:4px;color:var(--ink)}
.v-artd .sp-335 :where(.prose) .nc-doc::after{content:"";position:absolute;right:20px;top:20px;width:26px;height:32px;border-radius:3px;background:linear-gradient(225deg,transparent 8px,var(--blue2) 0);box-shadow:inset 0 -8px 0 -5px var(--blue),inset 0 -14px 0 -11px var(--blue)}

/* 시험 계획 카드(줄 공책 색인 카드) */
.v-artd .sp-335 :where(.prose) .nc-card{max-width:520px;margin:20px 0 24px;padding:18px 24px 14px 52px;border-radius:6px;background:#fffdf6 linear-gradient(90deg,transparent 36px,#f2b8b8 36px 38px,transparent 38px);box-shadow:0 14px 30px -22px rgba(27,31,58,.5),0 0 0 1px #efe8d6;transform:rotate(-.6deg)}
.v-artd .sp-335 :where(.prose) .ncd-h{margin:0 0 6px;font-size:13px;font-weight:800;color:#a3741a;letter-spacing:.08em}
.v-artd .sp-335 :where(.prose) .nc-card dl{margin:0}
.v-artd .sp-335 :where(.prose) .nc-card dl div{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid #d9e2f2}
.v-artd .sp-335 :where(.prose) .nc-card dt{flex:none;width:96px;font-size:14px;font-weight:800;color:var(--ink)}
.v-artd .sp-335 :where(.prose) .nc-card dd{margin:0;font-size:15px;color:#1d3fc4}

/* 일정 막대 */
.v-artd .sp-335 :where(.prose) .nc-time{margin:22px 0 30px;padding:0 0 34px}
.v-artd .sp-335 :where(.prose) .nt-bar{position:relative;display:flex;height:48px;border-radius:10px;overflow:visible}
.v-artd .sp-335 :where(.prose) .nt-bar span{display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff}
.v-artd .sp-335 :where(.prose) .nt-bar .t1{flex:2;background:var(--navy);border-radius:10px 0 0 10px}
.v-artd .sp-335 :where(.prose) .nt-bar .t2{flex:1.4;background:#3a4380}
.v-artd .sp-335 :where(.prose) .nt-bar .t3{flex:1.6;background:var(--blue)}
.v-artd .sp-335 :where(.prose) .nt-bar .t4{flex:1.6;color:#1d3fc4;border-radius:0 10px 10px 0;background:repeating-linear-gradient(135deg,var(--blue2) 0 8px,#fff 8px 14px);box-shadow:inset 0 0 0 1.5px var(--blue)}
.v-artd .sp-335 :where(.prose) .nt-flag{position:absolute;left:75.8%;top:-10px;bottom:-30px;border-left:2px solid #e5484d;padding:44px 0 0 8px;font-style:normal;font-size:13px;font-weight:800;color:#c4282d;white-space:nowrap;display:flex;align-items:flex-end}

/* 이삿짐 꼬리표 */
.v-artd .sp-335 :where(.prose) .nc-tags{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 24px;padding:0;list-style:none}
.v-artd .sp-335 :where(.prose) .nc-tags li{position:relative;margin:0;padding:18px 20px 18px 44px;border-radius:16px;background:#fff;border:1.5px solid var(--navy);font-size:15px;line-height:1.55;color:var(--sub)}
.v-artd .sp-335 :where(.prose) .nc-tags li::before{content:"";position:absolute;left:14px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--navy);background:var(--soft)}
.v-artd .sp-335 :where(.prose) .nc-tags li:nth-child(even){transform:rotate(.7deg)}
.v-artd .sp-335 :where(.prose) .nc-tags li:nth-child(odd){transform:rotate(-.5deg)}
.v-artd .sp-335 :where(.prose) .nc-tags b{display:block;margin-bottom:4px;font-size:16.5px;color:var(--ink)}

/* 두 원 겹침 */
.v-artd .sp-335 :where(.prose) .nc-two{position:relative;display:flex;flex-wrap:wrap;justify-content:center;width:min(100%,420px);margin:18px auto 26px}
.v-artd .sp-335 :where(.prose) .nc-two .a,.v-artd .sp-335 :where(.prose) .nc-two .b{aspect-ratio:1;border-radius:50%;width:56%;display:grid;place-items:center;padding:0 8%;text-align:center;font-size:15.5px;font-weight:800;line-height:1.4}
.v-artd .sp-335 :where(.prose) .nc-two .a{background:rgba(46,91,255,.14);color:#1d3fc4;padding-right:16%}
.v-artd .sp-335 :where(.prose) .nc-two .b{background:rgba(27,31,58,.08);color:var(--ink);margin-left:-12%;padding-left:16%}
.v-artd .sp-335 :where(.prose) .nc-two ul{flex-basis:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.v-artd .sp-335 :where(.prose) .nc-two li{margin:0;padding:5px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:700}
.v-artd .sp-335 :where(.prose) .nc-two li::before{content:none}

/* 흐름소프트 진행 방식 = 연결 단자판 */
.v-artd .sp-335 :where(.prose) .nc-we{margin:56px 0 10px;padding:30px 32px;border-radius:20px;background:var(--navy);color:#fff}
.v-artd .sp-335 :where(.prose) .nw-k{margin:0 0 6px;font-size:13px;font-weight:800;color:#9fb3ff}
.v-artd .sp-335 :where(.prose) .nw-t{margin:0 0 20px;font-size:21px;font-weight:800;line-height:1.4}
.v-artd .sp-335 :where(.prose) .nw-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 24px}
.v-artd .sp-335 :where(.prose) .nw-g>div{padding:16px;border-radius:14px;background:rgba(255,255,255,.07);display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.v-artd .sp-335 :where(.prose) .nw-h{flex-basis:100%;margin:0 0 4px;font-size:14px;font-weight:800;color:#c9d3ff}
.v-artd .sp-335 :where(.prose) .nw-g span{padding:4px 10px;border-radius:7px;background:#fff;color:var(--navy);font-size:13.5px;font-weight:700}
.v-artd .sp-335 :where(.prose) .nw-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-335 :where(.prose) .nw-btn:hover{background:var(--blue2)}

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

@media (max-width:720px){
  .v-artd .sp-335 :where(.prose) .nc-lead{font-size:18px}
  .v-artd .sp-335 .prose h2{font-size:23px}
  .v-artd .sp-335 :where(.prose) .nc-s{padding-top:46px}
  .v-artd .sp-335 :where(.prose) .nc-stack{grid-template-columns:1fr;gap:24px;padding:24px 20px}
  .v-artd .sp-335 :where(.prose) .nc-match{grid-template-columns:1fr 24px 1fr}
  .v-artd .sp-335 :where(.prose) .nm-col span{padding:8px 10px;font-size:14px}
  .v-artd .sp-335 :where(.prose) .nc-limit{grid-template-columns:1fr;padding:22px 18px}
  .v-artd .sp-335 :where(.prose) .nl-piece::after{display:none}
  .v-artd .sp-335 :where(.prose) .nl-out{flex-wrap:wrap}
  .v-artd .sp-335 :where(.prose) .nc-plug{grid-template-columns:1fr}
  .v-artd .sp-335 :where(.prose) .nc-keep{grid-template-columns:1fr;border-radius:20px}
  .v-artd .sp-335 :where(.prose) .nc-keep>div{border-radius:16px}
  .v-artd .sp-335 :where(.prose) .nc-card{padding-left:48px}
  .v-artd .sp-335 :where(.prose) .nt-bar span{font-size:12px}
  .v-artd .sp-335 :where(.prose) .nc-tags{grid-template-columns:1fr}
  .v-artd .sp-335 :where(.prose) .nc-two .a,.v-artd .sp-335 :where(.prose) .nc-two .b{font-size:13px}
  .v-artd .sp-335 :where(.prose) .nc-we{padding:24px 20px}
  .v-artd .sp-335 :where(.prose) .nw-g{grid-template-columns:1fr}
}