/* 313 목적, 메뉴 목록, 이동 흐름의 초안 = 책상 위 초안 쪽지(2026-10-16 글마다 다른 레이아웃).
   핀 꽂힌 쪽지 넷, 짧은 요청 말풍선에서 기획 문서까지(진행 방식), 목적 문장 공식과 색칠 예문, 이름표가 업무 셋으로 갈림, 할 일 두 칸, 손그림 화면 흐름과 갈래, 발견 딱지, 세 갈래 선택, 초안 세 장 겹침, 질문 두 쪽지, 집게판 */
.v-artd .sp-313 .prose{font-size:17px}
.v-artd .sp-313 .prose h2{margin:70px 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-313 .prose h2::before,.v-artd .sp-313 .prose h2::after{content:none}
.v-artd .sp-313 :where(.prose) .sk>p{margin:0 0 16px}
.v-artd .sp-313 :where(.prose) .sk-lead{font-size:20px;line-height:1.7;color:var(--ink)}
.v-artd .sp-313 :where(.prose) .sk-lead b{background:linear-gradient(transparent 60%,#fff1c2 0)}

/* 쪽지 넷 */
.v-artd .sp-313 :where(.prose) .sk-desk{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0 30px;padding:30px 22px 26px;border-radius:18px;background:#eef1f7}
.v-artd .sp-313 :where(.prose) .sk-note{position:relative;padding:24px 16px 18px;background:#fffdf3;box-shadow:0 14px 22px -16px rgba(27,31,58,.5);font-size:14.5px;line-height:1.55;color:#3b4256}
.v-artd .sp-313 :where(.prose) .sk-note p{margin:0}
.v-artd .sp-313 :where(.prose) .sk-note.n1{transform:rotate(-2deg)}.v-artd .sp-313 :where(.prose) .sk-note.n2{transform:rotate(1.5deg);background:#f4f8ff}
.v-artd .sp-313 :where(.prose) .sk-note.n3{transform:rotate(-1deg);background:#fff6f6}.v-artd .sp-313 :where(.prose) .sk-note.n4{transform:rotate(2deg);background:#f3fbf6}
.v-artd .sp-313 :where(.prose) .sk-nt{margin-bottom:8px!important;font-size:18px;font-weight:800;color:var(--ink);border-bottom:2px solid currentColor;padding-bottom:6px}
.v-artd .sp-313 :where(.prose) .sk-pin{position:absolute;left:50%;top:-8px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#e5484d;box-shadow:0 3px 4px rgba(0,0,0,.25)}
.v-artd .sp-313 :where(.prose) .n2 .sk-pin{background:var(--blue)}.v-artd .sp-313 :where(.prose) .n3 .sk-pin{background:#f5b400}.v-artd .sp-313 :where(.prose) .n4 .sk-pin{background:#15803d}

/* 진행 방식 */
.v-artd .sp-313 :where(.prose) .sk-we{margin:0 0 10px;padding:28px 30px;border-radius:20px;background:var(--navy);color:#fff}
.v-artd .sp-313 :where(.prose) .sk-wk{margin:0 0 6px;font-size:13px;font-weight:800;color:#a9b8ff}
.v-artd .sp-313 :where(.prose) .sk-wt{margin:0 0 18px;font-size:21px;font-weight:800;line-height:1.4}
.v-artd .sp-313 :where(.prose) .sk-wf{display:grid;grid-template-columns:auto 40px 1fr;align-items:center;gap:10px;margin:0 0 16px}
.v-artd .sp-313 :where(.prose) .sk-bub{margin:0;padding:14px 18px;border-radius:18px 18px 18px 4px;background:#fff;color:var(--ink);font-weight:700;font-size:15.5px;max-width:240px}
.v-artd .sp-313 :where(.prose) .sk-arr{height:2px;background:#8fa5ff;position:relative}
.v-artd .sp-313 :where(.prose) .sk-arr::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid #8fa5ff;border-right:0}
.v-artd .sp-313 :where(.prose) .sk-wf ol{margin:0;padding:0;list-style:none;counter-reset:w}
.v-artd .sp-313 :where(.prose) .sk-wf li{counter-increment:w;margin:0;padding:7px 0 7px 32px;position:relative;font-size:15px;border-bottom:1px solid rgba(255,255,255,.14)}
.v-artd .sp-313 :where(.prose) .sk-wf li::before{content:counter(w);position:absolute;left:0;top:7px;width:22px;height:22px;border-radius:50%;background:#2e5bff;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.v-artd .sp-313 :where(.prose) .sk-wf li:nth-child(2){font-weight:800;font-size:16.5px}
.v-artd .sp-313 :where(.prose) .sk-wd{margin:0 0 18px;font-size:15.5px;color:#d6dbf0}
.v-artd .sp-313 :where(.prose) .sk-wb{display:inline-flex;padding:12px 24px;border-radius:999px;background:#fff;color:var(--navy)!important;font-weight:800;text-decoration:none!important}

/* 목적 공식 */
.v-artd .sp-313 :where(.prose) .sk-formula{margin:20px 0 22px;padding:24px 26px;border-radius:16px;border:2px solid var(--ink)}
.v-artd .sp-313 :where(.prose) .sk-fx{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px;font-weight:800;font-size:17px}
.v-artd .sp-313 :where(.prose) .sk-fx i{font-style:normal;color:var(--sub)}
.v-artd .sp-313 :where(.prose) .sk-fx span{padding:6px 14px;border-radius:8px}
.v-artd .sp-313 :where(.prose) .sk-formula .sk-u{background:#dfe6ff}.v-artd .sp-313 :where(.prose) .sk-formula .sk-s{background:#fff1c2}.v-artd .sp-313 :where(.prose) .sk-formula .sk-r{background:#dcf5e6}
.v-artd .sp-313 :where(.prose) .sk-ex{margin:0 0 6px;font-size:19px;line-height:1.9;font-weight:700;color:var(--ink)}
.v-artd .sp-313 :where(.prose) .sk-ex span{padding:2px 2px;border-radius:4px}
.v-artd .sp-313 :where(.prose) .sk-exn{margin:0;font-size:14px;color:var(--sub)}
.v-artd .sp-313 :where(.prose) .sk-name{display:flex;align-items:center;gap:18px;margin:6px 0 16px}
.v-artd .sp-313 :where(.prose) .sk-bad{margin:0;padding:10px 16px;border:2px dashed #9aa3b8;border-radius:10px;font-weight:800;color:#5b6475;white-space:nowrap}
.v-artd .sp-313 :where(.prose) .sk-name ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0 0 0 22px;list-style:none;border-left:3px solid var(--blue)}
.v-artd .sp-313 :where(.prose) .sk-name li{margin:0;padding:8px 14px;border-radius:10px;background:var(--blue);color:#fff;font-weight:800;font-size:15px}
.v-artd .sp-313 :where(.prose) .sk-name li::before{content:none}
.v-artd .sp-313 :where(.prose) .sk-use{padding:16px 20px;border-left:5px solid #f5b400;border-radius:0 12px 12px 0;background:#fffbea;font-size:15.5px;line-height:1.65}
.v-artd .sp-313 :where(.prose) .sk-use b{display:block;margin-bottom:2px}

/* 할 일 두 칸 */
.v-artd .sp-313 :where(.prose) .sk-todo{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:18px 0 18px;border:2px solid var(--ink);border-radius:6px;background:repeating-linear-gradient(#fff 0 31px,#e9edf6 31px 32px)}
.v-artd .sp-313 :where(.prose) .sk-col{padding:16px 20px 18px}
.v-artd .sp-313 :where(.prose) .sk-col+.sk-col{border-left:2px solid var(--ink)}
.v-artd .sp-313 :where(.prose) .sk-col p{margin:0}
.v-artd .sp-313 :where(.prose) .sk-ch{font-size:18px;font-weight:800;color:var(--ink)}
.v-artd .sp-313 :where(.prose) .sk-ch::before{content:"☑ ";color:var(--blue)}
.v-artd .sp-313 :where(.prose) .sk-later .sk-ch::before{content:"☐ ";color:var(--sub)}
.v-artd .sp-313 :where(.prose) .sk-cd{margin-top:6px!important;font-size:15px;color:#3b4256;line-height:1.6}
.v-artd .sp-313 :where(.prose) .sk-col ul{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.v-artd .sp-313 :where(.prose) .sk-col li{margin:0;padding:3px 10px;border-radius:6px;background:#fff1c2;font-size:14px;font-weight:700}
.v-artd .sp-313 :where(.prose) .sk-col li::before{content:none}

/* 화면 흐름 */
.v-artd .sp-313 :where(.prose) .sk-flow{margin:18px 0 20px;padding:24px;border-radius:16px;background:#fffdf3;border:1px solid #eadfb4}
.v-artd .sp-313 :where(.prose) .sk-main{display:flex;align-items:center;gap:8px}
.v-artd .sp-313 :where(.prose) .sk-main span{flex:1;padding:22px 10px;border:2.5px solid var(--ink);border-radius:12px 16px 10px 14px;text-align:center;font-weight:800;font-size:15.5px;background:#fff}
.v-artd .sp-313 :where(.prose) .sk-main span.sk-ok{border-color:#15803d;color:#15803d}
.v-artd .sp-313 :where(.prose) .sk-main i{flex:none;width:30px;height:2.5px;background:var(--ink);position:relative}
.v-artd .sp-313 :where(.prose) .sk-main i::after{content:"";position:absolute;right:-2px;top:-5px;border:6px solid transparent;border-left:8px solid var(--ink);border-right:0}
.v-artd .sp-313 :where(.prose) .sk-br{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding-top:16px;border-top:2px dashed #cdbf8a}
.v-artd .sp-313 :where(.prose) .sk-br span{padding:5px 12px;border:1.5px dashed var(--ink);border-radius:999px;font-size:14px;font-weight:700}
.v-artd .sp-313 :where(.prose) .sk-br span.er{border-color:#c4282d;color:#c4282d}

/* 발견 딱지 */
.v-artd .sp-313 :where(.prose) .sk-found{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 18px}
.v-artd .sp-313 :where(.prose) .sk-fh{margin:0 6px 0 0!important;font-size:14px;font-weight:800;color:var(--sub)}
.v-artd .sp-313 :where(.prose) .sk-found span{position:relative;padding:8px 14px 8px 34px;border-radius:10px;background:#fff;border:2px solid var(--blue);font-weight:800;font-size:15px;color:var(--ink)}
.v-artd .sp-313 :where(.prose) .sk-found span::before{content:"+";position:absolute;left:10px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--blue);color:#fff;font-size:14px;line-height:18px;text-align:center}

/* 세 갈래 */
.v-artd .sp-313 :where(.prose) .sk-fork{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:0;margin:8px 0 18px}
.v-artd .sp-313 :where(.prose) .sk-fq{margin:0;padding:18px;border-radius:14px;background:var(--ink);color:#fff;font-weight:800;text-align:center}
.v-artd .sp-313 :where(.prose) .sk-fork ul{margin:0;padding:0 0 0 30px;list-style:none;display:grid;gap:8px;position:relative}
.v-artd .sp-313 :where(.prose) .sk-fork ul::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:2px;background:var(--blue)}
.v-artd .sp-313 :where(.prose) .sk-fork li{position:relative;margin:0;padding:12px 16px;border-radius:10px;background:var(--blue2);font-weight:800;color:#1d3fc4}
.v-artd .sp-313 :where(.prose) .sk-fork li::before{content:"";position:absolute;left:-30px;top:50%;width:30px;height:2px;background:var(--blue)}

/* 초안 세 장 */
.v-artd .sp-313 :where(.prose) .sk-vers{position:relative;height:120px;margin:6px 0 18px}
.v-artd .sp-313 :where(.prose) .sk-vers span{position:absolute;top:0;width:200px;height:110px;padding:14px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:800;box-shadow:0 10px 18px -14px rgba(27,31,58,.5);background-image:repeating-linear-gradient(transparent 0 40px,#e4e6ee 40px 42px,transparent 42px 54px);background-position:14px 30px;background-size:70% 60px;background-repeat:no-repeat}
.v-artd .sp-313 :where(.prose) .sk-vers span:nth-child(1){left:0;transform:rotate(-3deg);color:var(--sub)}
.v-artd .sp-313 :where(.prose) .sk-vers span:nth-child(2){left:120px;transform:rotate(1deg)}
.v-artd .sp-313 :where(.prose) .sk-vers span:nth-child(3){left:240px;transform:rotate(-1deg);border:2px solid var(--blue);color:#1d3fc4}

.v-artd .sp-313 :where(.prose) .sk-field{padding:16px 20px;border-radius:14px;background:var(--soft)}
.v-artd .sp-313 :where(.prose) .sk-qs{display:flex;gap:14px;margin:6px 0 18px}
.v-artd .sp-313 :where(.prose) .sk-qs span{flex:1;padding:18px;border-radius:4px 16px 16px 16px;font-weight:800;text-align:center}
.v-artd .sp-313 :where(.prose) .sk-qs .sk-b{background:#fff1c2;color:#7a5200}
.v-artd .sp-313 :where(.prose) .sk-qs .sk-t{background:#dfe6ff;color:#1d3fc4}
.v-artd .sp-313 :where(.prose) .sk-qs span::before{content:"? ";font-weight:900}

/* 집게판 */
.v-artd .sp-313 :where(.prose) .sk-clip{position:relative;margin:28px 0 18px;padding:34px 24px 18px;border-radius:14px;background:#c79a5a}
.v-artd .sp-313 :where(.prose) .sk-clip::before{content:"";position:absolute;left:50%;top:-12px;width:110px;height:26px;margin-left:-55px;border-radius:8px;background:linear-gradient(#9aa3b8,#6b7080)}
.v-artd .sp-313 :where(.prose) .sk-clh{margin:0;padding:14px 18px 0;background:#fff;font-weight:800;color:var(--ink)}
.v-artd .sp-313 :where(.prose) .sk-clip dl{margin:0;padding:6px 18px 14px;background:#fff}
.v-artd .sp-313 :where(.prose) .sk-clip dl div{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.v-artd .sp-313 :where(.prose) .sk-clip dt{font-weight:800;font-size:15px}
.v-artd .sp-313 :where(.prose) .sk-clip dd{margin:0;font-size:15px;line-height:1.55;color:#3b4256}

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

@media (max-width:720px){
  .v-artd .sp-313 .prose h2{font-size:23px;margin-top:54px}
  .v-artd .sp-313 :where(.prose) .sk-lead{font-size:18px}
  .v-artd .sp-313 :where(.prose) .sk-desk{grid-template-columns:1fr 1fr;padding:24px 14px}
  .v-artd .sp-313 :where(.prose) .sk-we{padding:24px 20px}
  .v-artd .sp-313 :where(.prose) .sk-wf{grid-template-columns:1fr}
  .v-artd .sp-313 :where(.prose) .sk-arr{width:2px;height:22px;margin-left:24px}
  .v-artd .sp-313 :where(.prose) .sk-arr::after{right:-4px;top:auto;bottom:-1px;border:5px solid transparent;border-top:7px solid #8fa5ff;border-bottom:0}
  .v-artd .sp-313 :where(.prose) .sk-formula{padding:20px}
  .v-artd .sp-313 :where(.prose) .sk-ex{font-size:17px}
  .v-artd .sp-313 :where(.prose) .sk-name{flex-direction:column;align-items:flex-start}
  .v-artd .sp-313 :where(.prose) .sk-name ul{border-left:0;border-top:3px solid var(--blue);padding:12px 0 0}
  .v-artd .sp-313 :where(.prose) .sk-todo{grid-template-columns:1fr}
  .v-artd .sp-313 :where(.prose) .sk-col+.sk-col{border-left:0;border-top:2px solid var(--ink)}
  .v-artd .sp-313 :where(.prose) .sk-main span{padding:16px 4px;font-size:13.5px}
  .v-artd .sp-313 :where(.prose) .sk-main i{width:16px}
  .v-artd .sp-313 :where(.prose) .sk-fork{grid-template-columns:1fr;gap:12px}
  .v-artd .sp-313 :where(.prose) .sk-vers span{width:150px;height:96px}
  .v-artd .sp-313 :where(.prose) .sk-vers span:nth-child(2){left:90px}
  .v-artd .sp-313 :where(.prose) .sk-vers span:nth-child(3){left:180px}
  .v-artd .sp-313 :where(.prose) .sk-clip dl div{grid-template-columns:1fr;gap:2px}
}