/* 318 와이어프레임의 기호, 기기별 크기, 동작 메모 = 모눈 도면(2026-10-16 글마다 다른 레이아웃).
   모눈 종이 첫머리와 도면 표제란, 기호 사전과 화면 견본, 데스크톱과 휴대폰 틀(한 화면 경계선), 배치 순서 막대, 지금과 나중 두 겹, 버튼 문구 셋, 화면 둘레 여백 메모, 표현 수준 세 단, 완료 기준 도장 */
.v-artd .sp-318{--grid:linear-gradient(rgba(46,91,255,.08) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(46,91,255,.08) 1px,transparent 1px) 0 0/20px 20px}
.v-artd .sp-318 .prose{font-size:17px}
.v-artd .sp-318 .prose h2{margin:72px 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-318 .prose h2::before,.v-artd .sp-318 .prose h2::after{content:none}
.v-artd .sp-318 :where(.prose) .wfm>p{margin:0 0 16px}

/* 모눈 첫머리 + 표제란 */
.v-artd .sp-318 :where(.prose) .wfm-sheet{padding:34px 32px 26px;border:1.5px solid #c6d0f5;border-radius:6px;background:var(--grid),#fbfcff}
.v-artd .sp-318 :where(.prose) .wfm-lead{margin:0 0 26px;font-size:20px;line-height:1.7;color:var(--ink)}
.v-artd .sp-318 :where(.prose) .wfm-lead b{color:var(--blue)}
.v-artd .sp-318 :where(.prose) .wfm-title{margin:0 0 0 auto;max-width:440px;border:2px solid var(--ink);background:#fff}
.v-artd .sp-318 :where(.prose) .wfm-title div{display:grid;grid-template-columns:96px 1fr}
.v-artd .sp-318 :where(.prose) .wfm-title div+div{border-top:1px solid var(--ink)}
.v-artd .sp-318 :where(.prose) .wfm-title dt{padding:10px 12px;border-right:1px solid var(--ink);font-size:13px;font-weight:800;color:var(--ink);background:var(--soft)}
.v-artd .sp-318 :where(.prose) .wfm-title dd{margin:0;padding:10px 12px;font-size:14.5px;line-height:1.5}

/* 기호 사전 + 화면 견본 */
.v-artd .sp-318 :where(.prose) .wfm-legend{display:grid;grid-template-columns:1fr 230px;gap:34px;align-items:center;margin:24px 0}
.v-artd .sp-318 :where(.prose) .wfm-dict{margin:0;border-top:2px solid var(--ink)}
.v-artd .sp-318 :where(.prose) .wfm-dict div{display:grid;grid-template-columns:110px 1fr;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.v-artd .sp-318 :where(.prose) .wfm-dict dt{margin:0}
.v-artd .sp-318 :where(.prose) .wfm-dict dd{margin:0;font-size:17px;font-weight:700;color:var(--ink)}
.v-artd .sp-318 :where(.prose) .sym{display:block;width:76px;height:44px;position:relative}
.v-artd .sp-318 :where(.prose) .sym.area{border:2px dashed #7b86a3;border-radius:4px}
.v-artd .sp-318 :where(.prose) .sym.text i{display:block;height:6px;margin:6px 0;border-radius:3px;background:#9aa3b8}
.v-artd .sp-318 :where(.prose) .sym.text i:last-child{width:60%}
.v-artd .sp-318 :where(.prose) .sym.wfm-img{border:2px solid #7b86a3;background:linear-gradient(to top right,transparent calc(50% - 1px),#7b86a3 50%,transparent calc(50% + 1px)),linear-gradient(to bottom right,transparent calc(50% - 1px),#7b86a3 50%,transparent calc(50% + 1px))}
.v-artd .sp-318 :where(.prose) .sym.wfm-btn{height:30px;margin-top:7px;border:2px solid var(--ink);border-radius:15px;background:var(--soft)}
.v-artd .sp-318 :where(.prose) .wfm-phone{display:flex;flex-direction:column;gap:8px;padding:22px 16px;border:3px solid var(--ink);border-radius:30px;background:var(--grid),#fff}
.v-artd .sp-318 :where(.prose) .wfm-phone .wfm-t{height:8px;border-radius:4px;background:#9aa3b8}
.v-artd .sp-318 :where(.prose) .wfm-phone .wfm-t.wfm-s{width:70%}.v-artd .sp-318 :where(.prose) .wfm-phone .wfm-t.wfm-m{width:88%;height:12px;background:#7b86a3}
.v-artd .sp-318 :where(.prose) .wfm-phone .wfm-img{display:grid;place-items:center;height:96px;border:2px solid #7b86a3;font-size:12.5px;font-weight:700;color:#5b6475;background:linear-gradient(to top right,transparent calc(50% - 1px),#c3c9d8 50%,transparent calc(50% + 1px)),linear-gradient(to bottom right,transparent calc(50% - 1px),#c3c9d8 50%,transparent calc(50% + 1px)),#fff}
.v-artd .sp-318 :where(.prose) .wfm-phone .wfm-btn{margin-top:8px;padding:9px 0;border:2px solid var(--ink);border-radius:18px;font-size:13.5px;font-weight:800;text-align:center}

/* 기기 틀 */
.v-artd .sp-318 :where(.prose) .wfm-devices{display:flex;align-items:flex-end;gap:26px;margin:24px 0}
.v-artd .sp-318 :where(.prose) .dv-k{margin:0 0 8px;font-size:13.5px;font-weight:800;color:var(--sub)}
.v-artd .sp-318 :where(.prose) .dv-desk{flex:1}
.v-artd .sp-318 :where(.prose) .dv-desk .dv-scr{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:20px 70px 70px;gap:10px;padding:14px;border:3px solid var(--ink);border-radius:10px 10px 4px 4px;background:var(--grid),#fff}
.v-artd .sp-318 :where(.prose) .dv-desk .dv-scr span{border:2px dashed #9aa3b8;border-radius:4px}
.v-artd .sp-318 :where(.prose) .dv-desk .wfm-c1{grid-column:1/-1;border-style:solid!important;background:var(--soft)}
.v-artd .sp-318 :where(.prose) .dv-desk .wfm-c2{grid-row:2/4}
.v-artd .sp-318 :where(.prose) .dv-desk .wfm-c4{border-color:var(--ink)!important;border-style:solid!important;border-radius:16px!important;align-self:end;height:30px}
.v-artd .sp-318 :where(.prose) .dv-desk::after{content:"";display:block;width:30%;height:10px;margin:0 auto;background:var(--ink);border-radius:0 0 8px 8px}
.v-artd .sp-318 :where(.prose) .dv-mob{width:140px}
.v-artd .sp-318 :where(.prose) .dv-mob .dv-scr{position:relative;display:flex;flex-direction:column;gap:8px;height:230px;padding:14px 12px;border:3px solid var(--ink);border-radius:22px;background:var(--grid),#fff;overflow:hidden}
.v-artd .sp-318 :where(.prose) .dv-mob span{display:block;height:36px;border:2px dashed #9aa3b8;border-radius:4px;flex:none}
.v-artd .sp-318 :where(.prose) .dv-mob span.wfm-b{height:26px;border:2px solid var(--ink);border-radius:14px}
.v-artd .sp-318 :where(.prose) .dv-mob span.fold{height:auto;border:0;border-top:2px solid #e5484d;border-radius:0;padding-top:2px;font-size:11px;font-weight:800;color:#c4282d}

/* 배치 순서 막대 */
.v-artd .sp-318 :where(.prose) .wfm-rank{display:grid;grid-template-columns:1fr 280px;gap:30px;align-items:center}
.v-artd .sp-318 :where(.prose) .rk-copy p{margin:0 0 14px}
.v-artd .sp-318 :where(.prose) .rk-bars{margin:0;padding:0;list-style:none;counter-reset:r}
.v-artd .sp-318 :where(.prose) .rk-bars li{counter-increment:r;margin:0 0 8px;padding:0 14px;display:flex;align-items:center;border-radius:8px;font-weight:800;color:#fff;background:var(--blue)}
.v-artd .sp-318 :where(.prose) .rk-bars li::before{content:counter(r);position:static;margin-right:10px;opacity:.7;background:none;width:auto;height:auto}
.v-artd .sp-318 :where(.prose) .rk-bars .r1{height:64px;font-size:19px}
.v-artd .sp-318 :where(.prose) .rk-bars .r2{height:50px;width:86%;font-size:17px;background:#4d73ff}
.v-artd .sp-318 :where(.prose) .rk-bars .r3{height:42px;width:72%;font-size:15.5px;background:var(--navy)}
.v-artd .sp-318 :where(.prose) .rk-bars .r4{height:32px;width:52%;font-size:13.5px;background:var(--line);color:#3b4256}

/* 지금과 나중 두 겹 */
.v-artd .sp-318 :where(.prose) .wfm-layers{position:relative;margin:24px 0 22px;padding:0 0 26px 26px}
.v-artd .sp-318 :where(.prose) .ly{border-radius:16px;padding:22px 24px}
.v-artd .sp-318 :where(.prose) .ly p{margin:0;font-size:15.5px;line-height:1.65}
.v-artd .sp-318 :where(.prose) .ly .ly-k{margin-bottom:6px;font-size:16px;font-weight:800}
.v-artd .sp-318 :where(.prose) .ly.wfm-now{position:relative;z-index:1;margin-right:60px;border:2px solid var(--ink);background:var(--grid),#fff}
.v-artd .sp-318 :where(.prose) .ly.wfm-later{margin:-14px 0 0 60px;padding-top:30px;background:linear-gradient(135deg,#ffe7f0,#e7ecff);color:#3b4256}
.v-artd .sp-318 :where(.prose) .wfm-btns{display:flex;gap:10px;flex-wrap:wrap}
.v-artd .sp-318 :where(.prose) .wfm-btns span{padding:9px 20px;border-radius:20px;border:2px solid var(--ink);font-weight:800;font-size:15px}
.v-artd .sp-318 :where(.prose) .wfm-btns span:last-child{background:var(--ink);color:#fff}

/* 화면 둘레 메모 */
.v-artd .sp-318 :where(.prose) .wfm-notes{display:grid;grid-template-columns:1fr 170px 1fr;grid-template-rows:repeat(3,auto);gap:12px 22px;align-items:center;margin:24px 0}
.v-artd .sp-318 :where(.prose) .wfm-nt{position:relative;padding:12px 14px;background:#fff8dc;border-radius:3px;box-shadow:0 8px 16px -12px rgba(27,31,58,.45);font-size:14px;line-height:1.5;color:#3b4256}
.v-artd .sp-318 :where(.prose) .wfm-nt b{display:block;font-size:15px;color:var(--ink);margin-bottom:2px}
.v-artd .sp-318 :where(.prose) .wfm-nt.l1{grid-column:1;grid-row:1}.v-artd .sp-318 :where(.prose) .wfm-nt.l2{grid-column:1;grid-row:2}.v-artd .sp-318 :where(.prose) .wfm-nt.l3{grid-column:1;grid-row:3}
.v-artd .sp-318 :where(.prose) .wfm-nt.r1{grid-column:3;grid-row:1}.v-artd .sp-318 :where(.prose) .wfm-nt.r2{grid-column:3;grid-row:2}
.v-artd .sp-318 :where(.prose) .wfm-nt.wfm-q{background:#ffe9e9}
.v-artd .sp-318 :where(.prose) .wfm-nt::after{content:"";position:absolute;top:50%;width:22px;border-top:1.5px dashed #7b86a3}
.v-artd .sp-318 :where(.prose) .wfm-nt.l1::after,.v-artd .sp-318 :where(.prose) .wfm-nt.l2::after,.v-artd .sp-318 :where(.prose) .wfm-nt.l3::after{right:-22px}
.v-artd .sp-318 :where(.prose) .wfm-nt.r1::after,.v-artd .sp-318 :where(.prose) .wfm-nt.r2::after{left:-22px}
.v-artd .sp-318 :where(.prose) .nt-scr{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;gap:8px;height:100%;min-height:300px;padding:14px 12px;border:3px solid var(--ink);border-radius:24px;background:var(--grid),#fff}
.v-artd .sp-318 :where(.prose) .nt-scr .wfm-no{font-size:12px;font-weight:800;color:#1d3fc4}
.v-artd .sp-318 :where(.prose) .nt-scr .wfm-row{height:30px;border:2px dashed #9aa3b8;border-radius:4px}
.v-artd .sp-318 :where(.prose) .nt-scr .emp{flex:1;border:2px dashed #e5a3a6;border-radius:4px}
.v-artd .sp-318 :where(.prose) .nt-scr .bt{height:28px;border:2px solid var(--ink);border-radius:14px}

/* 표현 수준 세 단 */
.v-artd .sp-318 :where(.prose) .wfm-fid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 20px;padding:0;list-style:none}
.v-artd .sp-318 :where(.prose) .wfm-fid li{margin:0;padding:0 0 4px;font-size:15px;line-height:1.55;color:var(--sub)}
.v-artd .sp-318 :where(.prose) .wfm-fid li::before{content:none}
.v-artd .sp-318 :where(.prose) .wfm-fid p{margin:0 0 6px}
.v-artd .sp-318 :where(.prose) .wfm-fd{display:block;height:120px;margin-bottom:14px;border-radius:12px;position:relative}
.v-artd .sp-318 :where(.prose) .f1 .wfm-fd{background:#fffdf5;border:1px solid #eadfb4;background-image:repeating-linear-gradient(-2deg,transparent 0 22px,#9aa3b8 22px 24px);background-size:70% 100%;background-repeat:no-repeat;background-position:20px 14px}
.v-artd .sp-318 :where(.prose) .f2 .wfm-fd{background:var(--grid),#fff;border:2px solid #9aa3b8}
.v-artd .sp-318 :where(.prose) .f2 .wfm-fd::before{content:"";position:absolute;left:16px;right:16px;top:18px;height:38px;border-radius:6px;background:#dfe3ec}
.v-artd .sp-318 :where(.prose) .f2 .wfm-fd::after{content:"";position:absolute;left:16px;width:50%;top:66px;height:10px;border-radius:5px;background:#c6ccda}
.v-artd .sp-318 :where(.prose) .f3 .wfm-fd{background:var(--navy)}
.v-artd .sp-318 :where(.prose) .f3 .wfm-fd::before{content:"";position:absolute;left:18px;right:18px;bottom:20px;height:30px;border-radius:15px;background:var(--blue)}
.v-artd .sp-318 :where(.prose) .f3 .wfm-fd::after{content:"";position:absolute;right:30%;bottom:6px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:20px solid #fff;transform:rotate(-30deg)}
.v-artd .sp-318 :where(.prose) .wfm-fk{font-size:13px;font-weight:800;color:#1d3fc4}
.v-artd .sp-318 :where(.prose) .wfm-ft{font-size:18px;font-weight:800;color:var(--ink)}
.v-artd .sp-318 :where(.prose) .fx{display:inline-block;padding:3px 10px;border-radius:6px;background:var(--soft);font-size:13.5px;font-weight:700;color:#3b4256}
.v-artd .sp-318 :where(.prose) .wfm-done{position:relative;padding:20px 24px 20px 120px;border:2px dashed var(--blue);border-radius:16px}
.v-artd .sp-318 :where(.prose) .wfm-done b{position:absolute;left:18px;top:50%;width:84px;height:84px;margin-top:-42px;border-radius:50%;border:3px solid #c4282d;color:#c4282d;font-size:13px;line-height:1.25;display:grid;place-items:center;text-align:center;transform:rotate(-12deg);padding:8px}

/* 진행 방식 */
.v-artd .sp-318 :where(.prose) .wfm-we{margin:40px 0 0;padding:28px 30px;border-radius:20px;background:var(--grid),var(--navy);background-blend-mode:normal;color:#fff}
.v-artd .sp-318 :where(.prose) .wfm-we-k{margin:0 0 14px;font-size:13px;font-weight:800;color:#a9b8ff}
.v-artd .sp-318 :where(.prose) .wfm-we ol{margin:0 0 20px;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.v-artd .sp-318 :where(.prose) .wfm-we li{margin:0;padding:18px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:15.5px;line-height:1.6}
.v-artd .sp-318 :where(.prose) .wfm-we li::before{content:none}
.v-artd .sp-318 :where(.prose) .wfm-we li b{display:block;margin-bottom:6px;font-size:18px;color:#fff}
.v-artd .sp-318 :where(.prose) .wfm-we-btn{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-318 :where(.prose) .wfm-say{margin:20px 0;padding:20px 24px;border:0;border-radius:18px 18px 18px 4px;background:var(--blue);color:#fff;position:relative}
.v-artd .sp-318 :where(.prose) .wfm-say p{margin:0;font-size:18px;font-weight:700;line-height:1.6;font-style:normal}
.v-artd .sp-318 :where(.prose) .wfm-say::before,.v-artd .sp-318 :where(.prose) .wfm-say::after{content:none}
.v-artd .sp-318 :where(.prose) .wfm-sum{margin:24px 0;padding:22px 24px;border-radius:16px;background:var(--soft)}
.v-artd .sp-318 :where(.prose) .wfm-ws-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.v-artd .sp-318 :where(.prose) .wfm-ws-row span{padding:6px 14px;border:2px solid var(--ink);border-radius:6px;font-weight:800;font-size:15px;background:#fff}
.v-artd .sp-318 :where(.prose) .wfm-sum p:last-child{margin:0;font-size:15.5px;line-height:1.65}

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

@media (max-width:720px){
  .v-artd .sp-318 .prose h2{font-size:23px;margin-top:54px}
  .v-artd .sp-318 :where(.prose) .wfm-sheet{padding:24px 20px 20px}
  .v-artd .sp-318 :where(.prose) .wfm-lead{font-size:18px}
  .v-artd .sp-318 :where(.prose) .wfm-legend{grid-template-columns:1fr}
  .v-artd .sp-318 :where(.prose) .wfm-phone{width:220px;justify-self:center}
  .v-artd .sp-318 :where(.prose) .wfm-devices{gap:14px}
  .v-artd .sp-318 :where(.prose) .dv-mob{width:100px}
  .v-artd .sp-318 :where(.prose) .dv-desk .dv-scr{grid-template-rows:14px 50px 50px;padding:10px;gap:6px}
  .v-artd .sp-318 :where(.prose) .wfm-rank{grid-template-columns:1fr}
  .v-artd .sp-318 :where(.prose) .ly.wfm-now{margin-right:20px}
  .v-artd .sp-318 :where(.prose) .ly.wfm-later{margin-left:20px}
  .v-artd .sp-318 :where(.prose) .wfm-layers{padding-left:0}
  .v-artd .sp-318 :where(.prose) .wfm-notes{grid-template-columns:1fr;grid-template-rows:none}
  .v-artd .sp-318 :where(.prose) .wfm-nt,.v-artd .sp-318 :where(.prose) .nt-scr{grid-column:1!important;grid-row:auto!important}
  .v-artd .sp-318 :where(.prose) .nt-scr{min-height:200px;width:170px;justify-self:center;order:-1}
  .v-artd .sp-318 :where(.prose) .wfm-nt::after{display:none}
  .v-artd .sp-318 :where(.prose) .wfm-fid{grid-template-columns:1fr}
  .v-artd .sp-318 :where(.prose) .wfm-done{padding:110px 20px 20px}
  .v-artd .sp-318 :where(.prose) .wfm-done b{top:14px;margin-top:0}
  .v-artd .sp-318 :where(.prose) .wfm-we{padding:24px 20px}
  .v-artd .sp-318 :where(.prose) .wfm-we ol{grid-template-columns:1fr}
}