/* 376 프로토타입 조작으로 보는 업무 차례와 예외 상태 = 휴대폰 화면을 눌러 보는 판(2026-10-16 글마다 다른 레이아웃).
   첫머리 누르기 물결, 예약 화면 위 번호 핀 경로, 시안(점선 종이)과 구현물(실선 화면) 두 장, 상태 네 칸 작은 화면, 시연 진행표, 변경 메모, 자체 서비스 카드 */
.v-artd .sp-376 .prose{font-size:17px}
.v-artd .sp-376 .prose h2{margin:72px 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-376 .prose h2::before,.v-artd .sp-376 .prose h2::after{content:none}
.v-artd .sp-376 :where(.prose) .pt-pt>p{margin:0 0 16px}

/* 첫머리: 누르기 물결 */
.v-artd .sp-376 :where(.prose) .pt-open{display:grid;grid-template-columns:1fr 120px;gap:8px 28px;align-items:center;padding:30px 32px;border-radius:22px;background:var(--soft)}
.v-artd .sp-376 :where(.prose) .pt-lead{margin:0;font-size:20px;line-height:1.7;color:var(--ink)}
.v-artd .sp-376 :where(.prose) .pt-lead b{color:var(--blue)}
.v-artd .sp-376 :where(.prose) .pt-tap{position:relative;grid-row:span 2;width:120px;height:120px}
.v-artd .sp-376 :where(.prose) .pt-dot{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--blue)}
.v-artd .sp-376 :where(.prose) .pt-ring{position:absolute;inset:18px;border-radius:50%;border:2px solid var(--blue);opacity:.45}
.v-artd .sp-376 :where(.prose) .pt-ring.r2{inset:0;opacity:.2}
.v-artd .sp-376 :where(.prose) .pt-verdict{margin:6px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:16px;line-height:1.65;color:var(--sub)}
.v-artd .sp-376 :where(.prose) .pt-verdict b{display:inline-block;margin-right:12px;padding:3px 12px;border-radius:999px;background:var(--navy);color:#fff;font-size:14px}

/* 예약 화면 위 번호 핀 */
.v-artd .sp-376 :where(.prose) .pt-path{display:grid;grid-template-columns:250px 1fr;gap:36px;align-items:center;margin:28px 0 30px}
.v-artd .sp-376 :where(.prose) .pt-phone{position:relative;padding:18px 16px 22px;border-radius:34px;border:10px solid var(--ink);background:#fff;box-shadow:0 26px 50px -30px rgba(27,31,58,.6);font-size:13px}
.v-artd .sp-376 :where(.prose) .pp-bar{margin:0 0 14px;font-weight:800;font-size:15px;color:var(--ink);text-align:center}
.v-artd .sp-376 :where(.prose) .pp-row,.v-artd .sp-376 :where(.prose) .pp-cal,.v-artd .sp-376 :where(.prose) .pp-left,.v-artd .sp-376 :where(.prose) .pp-err{position:relative;margin:0 0 12px}
.v-artd .sp-376 :where(.prose) .pp-row{display:flex;gap:6px}
.v-artd .sp-376 :where(.prose) .pp-chip{flex:1;padding:6px 0;border-radius:8px;border:1px solid var(--line);text-align:center;color:var(--sub)}
.v-artd .sp-376 :where(.prose) .pp-chip.pt-on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.v-artd .sp-376 :where(.prose) .pp-cal{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.v-artd .sp-376 :where(.prose) .pp-cal i{height:22px;border-radius:6px;background:var(--blue2)}
.v-artd .sp-376 :where(.prose) .pp-cal i.pt-off{background:#eef0f5}
.v-artd .sp-376 :where(.prose) .pp-cal i.sel{background:var(--blue)}
.v-artd .sp-376 :where(.prose) .pp-left{padding:8px 10px;border-radius:8px;background:var(--soft);color:var(--ink)}
.v-artd .sp-376 :where(.prose) .pp-left b{color:var(--blue)}
.v-artd .sp-376 :where(.prose) .pp-err{padding:8px 10px;border-radius:8px;background:#fff1f1;color:#b4232a;font-weight:700}
.v-artd .sp-376 :where(.prose) .pp-btn{padding:10px 0;border-radius:10px;background:var(--navy);color:#fff;text-align:center;font-weight:800}
.v-artd .sp-376 :where(.prose) .pp-pin{position:absolute;left:-34px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--blue);color:#fff;font-size:12.5px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 4px #fff}
.v-artd .sp-376 :where(.prose) .pp-pin.pt-x{background:#c4282d}
.v-artd .sp-376 :where(.prose) .pt-path figcaption{margin:0;font-size:16px;line-height:1.65;color:var(--ink);text-align:left}
.v-artd .sp-376 :where(.prose) .pt-pins{margin:0 0 18px;padding:0;list-style:none;counter-reset:pp}
.v-artd .sp-376 :where(.prose) .pt-pins li{counter-increment:pp;display:flex;align-items:center;gap:12px;margin:0;padding:10px 0;border-bottom:1px dashed var(--line);font-size:18px;font-weight:800}
.v-artd .sp-376 :where(.prose) .pt-pins li::before{content:counter(pp);flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-size:13px;display:grid;place-items:center;position:static}
.v-artd .sp-376 :where(.prose) .pt-pins li:last-child::before{background:#c4282d}
.v-artd .sp-376 :where(.prose) .pt-path figcaption p{margin:0;color:var(--sub);font-size:15.5px}

/* 진행 방식: 문서 세 장 겹침 */
.v-artd .sp-376 :where(.prose) .pt-we{margin:40px 0 0;padding:28px 30px;border-radius:20px;background:var(--navy);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:6px 30px;align-items:center}
.v-artd .sp-376 :where(.prose) .pw-k{margin:0;grid-column:1;font-size:13px;font-weight:800;color:#a9b8ff}
.v-artd .sp-376 :where(.prose) .pw-t{margin:0;grid-column:1;font-size:22px;font-weight:800}
.v-artd .sp-376 :where(.prose) .pw-d{margin:8px 0 0;grid-column:1;font-size:15px;line-height:1.65;color:#cdd3ec}
.v-artd .sp-376 :where(.prose) .pw-docs{grid-column:2;grid-row:1/span 3;margin:0;padding:0;list-style:none;position:relative;height:196px}
.v-artd .sp-376 :where(.prose) .pw-docs li{position:absolute;margin:0;width:230px;height:112px;padding:12px 16px;border-radius:6px 18px 6px 6px;background:#fff;color:var(--ink);font-size:14px;font-weight:800;box-shadow:0 12px 26px -14px rgba(0,0,0,.6)}
.v-artd .sp-376 :where(.prose) .pw-docs li::before{content:none}
.v-artd .sp-376 :where(.prose) .pw-docs li span{display:block}
.v-artd .sp-376 :where(.prose) .pw-docs li::after{content:"";position:absolute;left:14px;right:30px;bottom:18px;height:34px;background:repeating-linear-gradient(#e4e6ee 0 3px,transparent 3px 11px)}
.v-artd .sp-376 :where(.prose) .pw-docs li:nth-child(1){left:0;top:0;transform:rotate(-3deg)}
.v-artd .sp-376 :where(.prose) .pw-docs li:nth-child(2){left:22px;top:42px;transform:rotate(1.5deg)}
.v-artd .sp-376 :where(.prose) .pw-docs li.pt-proto{left:44px;top:84px;background:var(--blue2)}
.v-artd .sp-376 :where(.prose) .pw-docs li.pt-proto::after{background:linear-gradient(var(--blue) 0 0) 0 0/40% 100% no-repeat,linear-gradient(#fff 0 0) 0 0/100% 100%;border-radius:6px;height:30px}

/* 시안과 구현물: 점선 종이 대 실선 화면 */
.v-artd .sp-376 :where(.prose) .pt-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0 24px}
.v-artd .sp-376 :where(.prose) .pt-c{padding:24px;border-radius:18px}
.v-artd .sp-376 :where(.prose) .pt-c.sketch{border:2px dashed #aab2c6;background:repeating-linear-gradient(0deg,#fff 0 23px,#f1f3f8 23px 24px)}
.v-artd .sp-376 :where(.prose) .pt-c.pt-real{background:var(--ink);color:#fff}
.v-artd .sp-376 :where(.prose) .pc-k{margin:0 0 4px;font-size:13px;font-weight:800;color:var(--sub)}
.v-artd .sp-376 :where(.prose) .pt-c.pt-real .pc-k{color:#a9b8ff}
.v-artd .sp-376 :where(.prose) .pc-h{margin:0 0 14px;font-size:20px;font-weight:800}
.v-artd .sp-376 :where(.prose) .pt-c ul{margin:0;padding:0;list-style:none}
.v-artd .sp-376 :where(.prose) .pt-c li{margin:0;padding:6px 0 6px 22px;position:relative;font-size:15px;line-height:1.5}
.v-artd .sp-376 :where(.prose) .pt-c li::before{content:"";position:absolute;left:0;top:12px;width:12px;height:8px}
.v-artd .sp-376 :where(.prose) .pt-c.sketch li::before{border:1.5px dashed #8b93a7;border-radius:2px}
.v-artd .sp-376 :where(.prose) .pt-c.pt-real li::before{background:#6f8bff;border-radius:2px}

/* 상태 네 칸: 작은 화면 */
.v-artd .sp-376 :where(.prose) .pt-states{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0;padding:0;list-style:none}
.v-artd .sp-376 :where(.prose) .pt-states li{margin:0;font-size:14.5px;line-height:1.55;color:var(--sub)}
.v-artd .sp-376 :where(.prose) .pt-states li::before{content:none}
.v-artd .sp-376 :where(.prose) .pt-states b{display:block;margin:12px 0 4px;font-size:16px;color:var(--ink)}
.v-artd .sp-376 :where(.prose) .ps-scr{position:relative;display:block;height:150px;border-radius:18px;border:6px solid var(--ink);background:#fff;overflow:hidden}
.v-artd .sp-376 :where(.prose) .ps-scr i{position:absolute}
.v-artd .sp-376 :where(.prose) .ps-scr.pt-empty i{left:50%;top:38%;width:44px;height:34px;margin-left:-22px;border:2px dashed #b5bccd;border-radius:8px}
.v-artd .sp-376 :where(.prose) .ps-scr.pt-empty::after{content:"";position:absolute;left:24%;right:24%;bottom:26px;height:18px;border-radius:9px;background:var(--blue)}
.v-artd .sp-376 :where(.prose) .ps-scr.pt-fail i{left:12px;right:12px;top:40px;height:28px;border:2px solid #e5484d;border-radius:8px}
.v-artd .sp-376 :where(.prose) .ps-scr.pt-fail::after{content:"";position:absolute;left:12px;width:60%;top:76px;height:7px;border-radius:4px;background:#f3a5a8}
.v-artd .sp-376 :where(.prose) .ps-scr.back i{left:12px;top:14px;width:18px;height:18px;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg) scale(.6)}
.v-artd .sp-376 :where(.prose) .ps-scr.back::after{content:"";position:absolute;left:12px;right:12px;top:52px;height:60px;border-radius:8px;background:repeating-linear-gradient(var(--blue2) 0 16px,#fff 16px 22px)}
.v-artd .sp-376 :where(.prose) .ps-scr.save i{left:12px;right:12px;top:30px;height:26px;border:2px solid var(--blue);border-radius:8px}
.v-artd .sp-376 :where(.prose) .ps-scr.save::after{content:"";position:absolute;right:14px;bottom:18px;width:34px;height:34px;border-radius:50%;background:var(--blue2);box-shadow:inset 0 0 0 3px var(--blue)}

/* 시연 진행표 */
.v-artd .sp-376 :where(.prose) .pt-run{margin:24px 0;border-top:2px solid var(--ink)}
.v-artd .sp-376 :where(.prose) .pt-run div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.v-artd .sp-376 :where(.prose) .pt-run dt{font-weight:800;color:var(--blue);font-size:15.5px}
.v-artd .sp-376 :where(.prose) .pt-run dd{margin:0;font-size:16px;line-height:1.65}

/* 변경 메모 */
.v-artd .sp-376 :where(.prose) .pt-note{margin:22px 0;padding:22px 24px;background:#fff8dc;border-radius:4px;box-shadow:0 14px 26px -20px rgba(27,31,58,.5);transform:rotate(-.6deg)}
.v-artd .sp-376 :where(.prose) .pn-h{margin:0 0 14px;font-size:16px;font-weight:700;color:var(--ink)}
.v-artd .sp-376 :where(.prose) .pn-g{display:flex;align-items:center;gap:10px;margin-top:8px}
.v-artd .sp-376 :where(.prose) .pn-g span{flex:1;padding:12px;border-radius:8px;background:#fff;border:1px solid #eadfb4;font-weight:700;font-size:15px;text-align:center}
.v-artd .sp-376 :where(.prose) .pn-g span.arr{flex:none;width:30px;padding:0;border:0;background:none;height:2px;background:var(--ink);position:relative}
.v-artd .sp-376 :where(.prose) .pn-g span.arr::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--ink);border-right:0}
.v-artd .sp-376 :where(.prose) .pn-g.low span{font-weight:600;color:var(--sub);border-style:dashed}

/* 제공 방식 낱말 */
.v-artd .sp-376 :where(.prose) .pt-k{display:inline-block;margin:0 2px;padding:1px 10px;border-radius:999px;border:1.5px solid var(--blue);color:#1d3fc4;font-weight:700;font-size:15px}

/* 자체 서비스 카드 */
.v-artd .sp-376 :where(.prose) .pt-own{margin:20px 0;padding:24px 26px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(135deg,#fff 60%,var(--blue2))}
.v-artd .sp-376 :where(.prose) .po-n{margin:0 0 10px;font-size:21px;font-weight:800;color:var(--ink)}
.v-artd .sp-376 :where(.prose) .po-r{display:flex;gap:6px;margin:0 0 14px}
.v-artd .sp-376 :where(.prose) .po-r span{padding:4px 12px;border-radius:999px;background:var(--navy);color:#fff;font-size:13.5px;font-weight:700}
.v-artd .sp-376 :where(.prose) .po-d{margin:0;font-size:16px;line-height:1.65;color:var(--sub)}

.v-artd .sp-376 :where(.prose) .pt-right{padding:16px 20px;border-left:5px solid var(--blue);border-radius:0 12px 12px 0;background:var(--soft)}

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

@media (max-width:720px){
  .v-artd .sp-376 .prose h2{font-size:23px;margin-top:56px}
  .v-artd .sp-376 :where(.prose) .pt-open{grid-template-columns:1fr 70px;padding:22px}
  .v-artd .sp-376 :where(.prose) .pt-lead{font-size:18px}
  .v-artd .sp-376 :where(.prose) .pt-tap{width:70px;height:70px;grid-row:1;grid-column:2}
  .v-artd .sp-376 :where(.prose) .pt-verdict{grid-column:1/-1}
  .v-artd .sp-376 :where(.prose) .pt-path{grid-template-columns:1fr;gap:22px;justify-items:center}
  .v-artd .sp-376 :where(.prose) .pt-phone{width:230px;margin-left:30px}
  .v-artd .sp-376 :where(.prose) .pt-path figcaption{width:100%}
  .v-artd .sp-376 :where(.prose) .pt-we{grid-template-columns:1fr;padding:24px 22px}
  .v-artd .sp-376 :where(.prose) .pw-docs{grid-column:1;grid-row:auto;margin-top:16px}
  .v-artd .sp-376 :where(.prose) .pt-two{grid-template-columns:1fr}
  .v-artd .sp-376 :where(.prose) .pt-states{grid-template-columns:1fr 1fr}
  .v-artd .sp-376 :where(.prose) .pt-run div{grid-template-columns:1fr;gap:4px}
}