/* 310 기획서와 설계서의 용도와 담당 주체 = 펼친 책과 대응선(2026-10-16 글마다 다른 레이아웃).
   요청 확인은 붙임 메모, 내용은 이유, 범위, 방법 세 층, 문서는 층 표시 목록표, 역할 분담은 양면 펼친 책,
   담당자는 문서 머리 칸, 반영 검토는 요구사항과 설계 항목을 잇는 대응선, 화면은 초안 대 상세 두 화면, 통합은 한 장 세 띠,
   변경 관리는 세 고리, 진행 방식은 붉은 펜 보정 표시가 있는 기획서 */
.v-artd .sp-310 .prose{font-size:17px}
.v-artd .sp-310 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-310 .prose h2::before,.v-artd .sp-310 .prose h2::after{content:none}
.v-artd .sp-310 :where(.prose) .pd-s{padding:58px 0 6px}
.v-artd .sp-310 :where(.prose) .pd-s>p{margin:0 0 16px}
.v-artd .sp-310 :where(.prose) .pd-lead{font-size:20px;line-height:1.7;color:var(--ink);margin:0 0 22px}
.v-artd .sp-310 :where(.prose) .pd-lead b{color:var(--blue)}
.v-artd .sp-310 :where(.prose) .pd{--t1:#f5b400;--t2:var(--blue);--t3:var(--navy)}

/* 붙임 메모 */
.v-artd .sp-310 :where(.prose) .pd-memo{max-width:560px;margin:0 0 30px;padding:18px 20px;background:#fff1c2;font-size:15.5px;line-height:1.65;color:#4a3d10;transform:rotate(-1deg);box-shadow:0 14px 22px -16px rgba(74,61,16,.5)}
.v-artd .sp-310 :where(.prose) .pd-memo b{display:block;margin-bottom:4px;color:#3a2f00}

/* 세 층 */
.v-artd .sp-310 :where(.prose) .pd-tier{margin:0 0 18px;display:grid;gap:8px}
.v-artd .sp-310 :where(.prose) .ti{display:grid;grid-template-columns:120px 1fr;align-items:center;border-radius:12px;overflow:hidden;background:var(--soft)}
.v-artd .sp-310 :where(.prose) .ti p{margin:0}
.v-artd .sp-310 :where(.prose) .ti-k{height:100%;display:flex;flex-direction:column;justify-content:center;padding:14px 16px;color:#fff;font-size:22px;font-weight:800;line-height:1.1}
.v-artd .sp-310 :where(.prose) .ti-k small{margin-top:4px;font-size:12.5px;font-weight:600;opacity:.9}
.v-artd .sp-310 :where(.prose) .ti-1 .ti-k{background:var(--t1);color:#3a2f00}
.v-artd .sp-310 :where(.prose) .ti-2 .ti-k{background:var(--t2)}
.v-artd .sp-310 :where(.prose) .ti-3 .ti-k{background:var(--t3)}
.v-artd .sp-310 :where(.prose) .ti-v{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px}
.v-artd .sp-310 :where(.prose) .ti-v span{padding:7px 12px;border-radius:8px;background:#fff;font-size:14.5px;font-weight:700;color:var(--ink)}
.v-artd .sp-310 :where(.prose) .ti-v span+span::before{content:"→ ";color:#9aa1b5}

/* 층 표시 목록표 */
.v-artd .sp-310 :where(.prose) .pd-cat{margin:6px 0 18px;overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.v-artd .sp-310 :where(.prose) .pd-cat table{margin:0;min-width:560px;border-radius:0;font-size:14.5px}
.v-artd .sp-310 :where(.prose) .pd-cat th{font-size:13px}
.v-artd .sp-310 :where(.prose) .pd-cat td{padding:13px 12px;vertical-align:middle}
.v-artd .sp-310 :where(.prose) .pd-cat td:first-child{width:200px}
.v-artd .sp-310 :where(.prose) .pd-cat td:nth-child(2){color:#3a4152;font-weight:400}
.v-artd .sp-310 :where(.prose) .pd-cat td:last-child{width:120px;white-space:nowrap}
.v-artd .sp-310 :where(.prose) .pd-cat td span{display:inline-block;margin:2px 4px 2px 0;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:800;color:#fff}
.v-artd .sp-310 :where(.prose) .t1{background:var(--t1);color:#3a2f00!important}.v-artd .sp-310 :where(.prose) .t2{background:var(--t2)}.v-artd .sp-310 :where(.prose) .t3{background:var(--t3)}

/* 펼친 책 */
.v-artd .sp-310 :where(.prose) .pd-book{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:6px 0 10px;padding:14px;border-radius:10px;background:var(--navy);box-shadow:0 26px 40px -30px rgba(27,31,58,.7)}
.v-artd .sp-310 :where(.prose) .bk-page{padding:24px 24px 20px;background:#fff;min-height:100%}
.v-artd .sp-310 :where(.prose) .bk-l{border-radius:6px 0 0 6px;background:linear-gradient(90deg,#fff 0 88%,#e9ecf4)}
.v-artd .sp-310 :where(.prose) .bk-r{border-radius:0 6px 6px 0;background:linear-gradient(90deg,#e9ecf4,#fff 12%)}
.v-artd .sp-310 :where(.prose) .bk-h{margin:0 0 14px;font-size:18px;font-weight:800;color:var(--ink)}
.v-artd .sp-310 :where(.prose) .bk-h small{display:block;margin-top:2px;font-size:12.5px;font-weight:700;color:var(--blue)}
.v-artd .sp-310 :where(.prose) .bk-page ul{margin:0 0 14px;padding:0;list-style:none;counter-reset:b}
.v-artd .sp-310 :where(.prose) .bk-page li{counter-increment:b;margin:0;padding:8px 0 8px 26px;position:relative;font-size:14.5px;line-height:1.5;border-bottom:1px solid #eef0f6}
.v-artd .sp-310 :where(.prose) .bk-page li::before{content:counter(b);position:absolute;left:0;top:9px;font-size:12px;font-weight:800;color:var(--sub)}
.v-artd .sp-310 :where(.prose) .bk-f{margin:0;font-size:13.5px;line-height:1.6;color:var(--sub);font-style:italic}

/* 문서 머리 칸 */
.v-artd .sp-310 :where(.prose) .pd-ctl{margin:6px 0 18px}
.v-artd .sp-310 :where(.prose) .ct-k{margin:0 0 8px;font-size:14px;font-weight:800;color:var(--sub)}
.v-artd .sp-310 :where(.prose) .ct-row{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--ink);border-radius:4px}
.v-artd .sp-310 :where(.prose) .ct-row span{height:74px;padding:8px 10px;position:relative}
.v-artd .sp-310 :where(.prose) .ct-row span+span{border-left:1px solid var(--ink)}
.v-artd .sp-310 :where(.prose) .ct-row small{font-size:13px;font-weight:800;color:var(--ink)}
.v-artd .sp-310 :where(.prose) .ct-row span::after{content:"";position:absolute;left:10px;right:10px;bottom:14px;border-bottom:1px dashed #9aa1b5}

/* 대응선 */
.v-artd .sp-310 :where(.prose) .pd-trace{display:grid;grid-template-columns:1fr 120px 1fr;align-items:stretch;margin:6px 0 18px}
.v-artd .sp-310 :where(.prose) .pd-trace ul{display:grid;grid-template-rows:repeat(3,1fr);gap:0;margin:0;padding:0;list-style:none}
.v-artd .sp-310 :where(.prose) .pd-trace li{display:flex;align-items:center;margin:6px 0;padding:10px 14px;border-radius:10px;font-size:14.5px;font-weight:800}
.v-artd .sp-310 :where(.prose) .tr-l li{background:var(--blue);color:#fff}
.v-artd .sp-310 :where(.prose) .tr-l li.miss{background:#fff;color:#b3261e;border:2px solid #e5484d}
.v-artd .sp-310 :where(.prose) .tr-r li{background:var(--navy);color:#fff}
.v-artd .sp-310 :where(.prose) .tr-r li.gap{background:none;border:2px dashed #c3c8d6;color:var(--sub);font-weight:600}
.v-artd .sp-310 :where(.prose) .tr-svg{width:100%;height:100%}
.v-artd .sp-310 :where(.prose) .tr-svg path{fill:none;stroke:var(--blue);stroke-width:2;vector-effect:non-scaling-stroke}
.v-artd .sp-310 :where(.prose) .tr-svg path.dash{stroke:#e5484d;stroke-dasharray:4 4}
.v-artd .sp-310 :where(.prose) .pd-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 18px;padding:0;list-style:none}
.v-artd .sp-310 :where(.prose) .pd-checks li{margin:0;padding:14px 16px;border-top:3px solid var(--ink);background:var(--soft);font-size:14.5px;line-height:1.55;color:var(--sub)}
.v-artd .sp-310 :where(.prose) .pd-checks b{display:block;margin-bottom:4px;font-size:15.5px;color:var(--ink)}

/* 초안 대 상세 */
.v-artd .sp-310 :where(.prose) .pd-wire{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 16px}
.v-artd .sp-310 :where(.prose) .wf{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center;padding:16px;border-radius:14px;background:var(--soft)}
.v-artd .sp-310 :where(.prose) .wf p{margin:0;font-size:14.5px;line-height:1.55;color:var(--sub)}
.v-artd .sp-310 :where(.prose) .wf b{display:block;font-size:16px;color:var(--ink);margin-bottom:4px}
.v-artd .sp-310 :where(.prose) .wf-scr{height:170px;padding:16px 10px;border-radius:16px;background:#fff;display:flex;flex-direction:column;gap:10px}
.v-artd .sp-310 :where(.prose) .wf-scr i{display:block;height:26px;border-radius:6px}
.v-artd .sp-310 :where(.prose) .wf-scr i.s{height:44px;margin-top:auto}
.v-artd .sp-310 :where(.prose) .wf-rough .wf-scr{border:2px dashed #9aa1b5}
.v-artd .sp-310 :where(.prose) .wf-rough .wf-scr i{border:1.5px dashed #9aa1b5;transform:rotate(-1deg)}
.v-artd .sp-310 :where(.prose) .wf-fine .wf-scr{border:2px solid var(--ink)}
.v-artd .sp-310 :where(.prose) .wf-fine .wf-scr i{background:var(--blue2)}
.v-artd .sp-310 :where(.prose) .wf-fine .wf-scr i.s{background:var(--blue)}

/* 한 장 세 띠 */
.v-artd .sp-310 :where(.prose) .pd-one{max-width:360px;margin:6px auto 18px;padding:16px 18px 18px;border-radius:6px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 30px -24px rgba(27,31,58,.45)}
.v-artd .sp-310 :where(.prose) .on-h{margin:0 0 12px;font-size:14px;font-weight:800;color:var(--ink);text-align:center}
.v-artd .sp-310 :where(.prose) .on-b{margin:0 0 6px;padding:12px 14px 12px 16px;border-left:6px solid;border-radius:0 8px 8px 0;font-size:15px;font-weight:800}
.v-artd .sp-310 :where(.prose) .b1{border-color:var(--t1);background:#fff8e1;color:#4a3d10}
.v-artd .sp-310 :where(.prose) .b2{border-color:var(--t2);background:var(--blue2);color:#1d3fc4}
.v-artd .sp-310 :where(.prose) .b3{border-color:var(--t3);background:#e6e8f0;color:var(--navy);margin-bottom:0}

/* 세 고리 */
.v-artd .sp-310 :where(.prose) .pd-link{display:flex;align-items:center;justify-content:center;gap:0;margin:6px 0 18px!important}
.v-artd .sp-310 :where(.prose) .pd-link span{position:relative;padding:12px 22px;border:4px solid var(--blue);border-radius:999px;font-size:15px;font-weight:800;color:var(--ink);background:#fff}
.v-artd .sp-310 :where(.prose) .pd-link span+span{margin-left:-10px}
.v-artd .sp-310 :where(.prose) .pd-link span:nth-child(2){border-color:var(--navy);z-index:1}
.v-artd .sp-310 :where(.prose) .pd-sum{margin:6px 0 0;padding:18px 22px;border-radius:14px;background:var(--soft);font-size:15.5px;line-height:1.7}
.v-artd .sp-310 :where(.prose) .pd-sum b{display:block;color:var(--ink)}

/* 진행 방식 = 보정 표시 기획서 */
.v-artd .sp-310 :where(.prose) .pd-we{display:grid;grid-template-columns:170px 1fr;gap:28px;align-items:center;margin:36px 0 10px;padding:28px 30px;border-radius:20px;background:var(--navy);color:#fff}
.v-artd .sp-310 :where(.prose) .pw-paper{position:relative;padding:16px 14px 20px;border-radius:4px;background:#fff;transform:rotate(-3deg)}
.v-artd .sp-310 :where(.prose) .pw-paper p{margin:0 0 10px;font-size:14px;font-weight:800;color:var(--ink)}
.v-artd .sp-310 :where(.prose) .pw-paper i{display:block;height:7px;margin:8px 0;border-radius:4px;background:#dfe3ee}
.v-artd .sp-310 :where(.prose) .pw-paper i.m{background:linear-gradient(90deg,#dfe3ee 0 30%,#e5484d 30% 75%,#dfe3ee 75%);height:7px}
.v-artd .sp-310 :where(.prose) .pw-paper i.s{width:60%}
.v-artd .sp-310 :where(.prose) .pw-mark{position:absolute;right:-14px;bottom:10px;padding:4px 10px;border:2px solid #e5484d;border-radius:6px;color:#e5484d;font-size:14px;font-weight:800;background:#fff;transform:rotate(8deg)}
.v-artd .sp-310 :where(.prose) .pw-k{margin:0 0 6px;font-size:13px;font-weight:800;color:#9fb3ff}
.v-artd .sp-310 :where(.prose) .pw-t{margin:0 0 10px;font-size:20px;font-weight:800;line-height:1.45}
.v-artd .sp-310 :where(.prose) .pw-d{margin:0 0 20px;font-size:15.5px;line-height:1.7;color:#d7dcf0}
.v-artd .sp-310 :where(.prose) .pw-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-310 :where(.prose) .pw-btn:hover{background:var(--blue2)}

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

@media (max-width:720px){
  .v-artd .sp-310 :where(.prose) .pd-lead{font-size:18px}
  .v-artd .sp-310 .prose h2{font-size:23px}
  .v-artd .sp-310 :where(.prose) .pd-s{padding-top:46px}
  .v-artd .sp-310 :where(.prose) .ti{grid-template-columns:1fr}
  .v-artd .sp-310 :where(.prose) .ti-k{flex-direction:row;align-items:baseline;gap:8px;font-size:18px;padding:10px 14px}
  .v-artd .sp-310 :where(.prose) .pd-book{grid-template-columns:1fr;padding:8px}
  .v-artd .sp-310 :where(.prose) .bk-l,.v-artd .sp-310 :where(.prose) .bk-r{border-radius:6px;background:#fff}
  .v-artd .sp-310 :where(.prose) .bk-r{margin-top:8px}
  .v-artd .sp-310 :where(.prose) .ct-row{grid-template-columns:1fr 1fr}
  .v-artd .sp-310 :where(.prose) .ct-row span:nth-child(3){border-left:0}
  .v-artd .sp-310 :where(.prose) .ct-row span:nth-child(n+3){border-top:1px solid var(--ink)}
  .v-artd .sp-310 :where(.prose) .pd-trace{grid-template-columns:1fr 50px 1fr}
  .v-artd .sp-310 :where(.prose) .pd-trace li{font-size:13px;padding:8px 10px}
  .v-artd .sp-310 :where(.prose) .pd-checks{grid-template-columns:1fr}
  .v-artd .sp-310 :where(.prose) .pd-wire{grid-template-columns:1fr}
  .v-artd .sp-310 :where(.prose) .pd-link{flex-wrap:wrap}
  .v-artd .sp-310 :where(.prose) .pd-link span{padding:10px 14px;font-size:14px}
  .v-artd .sp-310 :where(.prose) .pd-we{grid-template-columns:1fr;padding:24px 22px}
  .v-artd .sp-310 :where(.prose) .pw-paper{max-width:170px}
}