/* 300 예약 서비스 가상 예시의 기획서 작성 = 발표 자료 보기 화면(2026-10-16 글마다 다른 레이아웃).
   중심은 왼쪽 장 목록 + 가운데 한 장 + 아래 작성 기준 메모(발표자 노트), 구간마다: 말에서 글로 옮기는 음성 파형, 업무흐름도로 모이는 자료,
   개요에서 갈라지는 상세 문서 나무, 역할 칩, 새 요구 선별 깔때기, 문서 머리 정보 띠, 설명 되돌려 받기, 서식 전환 */
.v-artd .sp-300 .prose{font-size:17px}
.v-artd .sp-300 :where(.prose) .pd-lead{font-size:20px;line-height:1.7;color:var(--ink);margin:0 0 18px}
.v-artd .sp-300 :where(.prose) .pd-lead b{color:var(--blue)}
.v-artd .sp-300 :where(.prose) .pd-note{margin:0;padding:16px 20px;border-left:5px solid var(--yellow);border-radius:0 12px 12px 0;background:var(--yellow2);font-size:15px;line-height:1.6}
.v-artd .sp-300 :where(.prose) .pd-note b{display:block;margin-bottom:4px;color:var(--ink)}
.v-artd .sp-300 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:26px;letter-spacing:-.7px;display:block;min-height:0}
.v-artd .sp-300 .prose h2::before,.v-artd .sp-300 .prose h2::after{content:none}
.v-artd .sp-300 :where(.prose) .pd-s{padding:60px 0 4px}
.v-artd .sp-300 :where(.prose) .pd-s>p{margin:0 0 14px}
.v-artd .sp-300 :where(.prose) li::before{content:none}
.v-artd .sp-300 :where(.prose) ul,.v-artd .sp-300 :where(.prose) ol{list-style:none;padding:0}
.v-artd .sp-300 :where(.prose) li{margin:0}

/* 발표 자료 보기 */
.v-artd .sp-300 :where(.prose) .pd-deck{display:grid;grid-template-columns:190px 1fr;grid-template-rows:auto 1fr;border-radius:16px;overflow:hidden;background:#2a2f45;box-shadow:0 30px 60px -40px rgba(20,24,39,.8)}
.v-artd .sp-300 :where(.prose) .dk-file{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;margin:0;padding:12px 18px;background:#20243a;color:#fff;font-weight:800;font-size:14.5px}
.v-artd .sp-300 :where(.prose) .dk-file small{font-weight:600;font-size:12.5px;color:#aab3d6}
.v-artd .sp-300 :where(.prose) .dk-thumbs{margin:0;padding:12px 10px;display:flex;flex-direction:column;gap:8px;background:#2a2f45}
.v-artd .sp-300 :where(.prose) .dk-thumbs button{appearance:none;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px;border:2px solid transparent;border-radius:8px;background:none;color:#cfd5ec;font:inherit;font-size:12.5px;font-weight:700;text-align:left;cursor:pointer}
.v-artd .sp-300 :where(.prose) .dk-thumbs button i{display:block;width:100%;aspect-ratio:16/7;border-radius:4px;background:#fff linear-gradient(var(--blue2),var(--blue2)) 10% 22%/50% 10% no-repeat;font-style:normal;font-size:0;position:relative}
.v-artd .sp-300 :where(.prose) .dk-thumbs button i::after{content:"";position:absolute;left:10%;right:20%;top:45%;height:22%;background:repeating-linear-gradient(var(--line) 0 3px,transparent 3px 7px)}
.v-artd .sp-300 :where(.prose) .dk-thumbs button[aria-current=true]{border-color:var(--yellow);color:#fff}
.v-artd .sp-300 :where(.prose) .dk-thumbs button:focus-visible{outline:2px solid #fff}
.v-artd .sp-300 :where(.prose) .dk-stage{display:flex;flex-direction:column;justify-content:center;padding:22px;background:#3a4060}
.v-artd .sp-300 :where(.prose) .dk-slide{display:block;padding:30px 34px 22px;border-radius:6px;background:#fff;min-height:330px}
.v-artd .sp-300 :where(.prose) .dk-slide+.dk-slide{margin-top:16px}
.v-artd .sp-300 :where(.prose) .js .dk-slide{margin-top:0}
.v-artd .sp-300 :where(.prose) .dk-slide[hidden]{display:none}
.v-artd .sp-300 :where(.prose) .sl-n{margin:0 0 4px;font-size:12.5px;font-weight:800;color:var(--sub)}
.v-artd .sp-300 :where(.prose) .dk-slide h3{margin:0 0 16px;padding-bottom:12px;border-bottom:3px solid var(--blue);font-size:24px;letter-spacing:-.5px;color:var(--ink)}
.v-artd .sp-300 :where(.prose) .dk-slide p{margin:0 0 10px;font-size:16px;line-height:1.65;color:#2b3042}
.v-artd .sp-300 :where(.prose) .dk-slide p b{margin-right:8px;padding:2px 8px;border-radius:6px;background:var(--blue2);color:#1d3fc4;font-size:14px}
.v-artd .sp-300 :where(.prose) .sl-tags{display:flex;gap:6px;flex-wrap:wrap}
.v-artd .sp-300 :where(.prose) .sl-tags span{padding:4px 10px;border-radius:999px;border:1.5px solid var(--line);font-size:13px;font-weight:700;color:var(--sub)}
.v-artd .sp-300 :where(.prose) .sl-memo{margin:18px -34px -22px!important;padding:14px 34px 16px;background:#fffbea;border-top:1px dashed #e2d38f;font-size:14.5px!important}
.v-artd .sp-300 :where(.prose) .sl-memo b{display:block;margin:0 0 2px!important;padding:0!important;background:none!important;color:#8a6a00!important;font-size:12.5px!important}

/* 음성 파형 → 메모 */
.v-artd .sp-300 :where(.prose) .pd-voice{display:grid;grid-template-columns:200px 50px 1fr;align-items:center;margin:20px 0 10px}
.v-artd .sp-300 :where(.prose) .vc-wave{display:flex;align-items:center;gap:5px;height:80px;padding:0 16px;border-radius:40px;background:var(--navy)}
.v-artd .sp-300 :where(.prose) .vc-wave i{flex:1;border-radius:3px;background:var(--yellow)}
.v-artd .sp-300 :where(.prose) .vc-wave i:nth-child(1){height:20%}.v-artd .sp-300 :where(.prose) .vc-wave i:nth-child(2){height:45%}.v-artd .sp-300 :where(.prose) .vc-wave i:nth-child(3){height:70%}.v-artd .sp-300 :where(.prose) .vc-wave i:nth-child(4){height:40%}.v-artd .sp-300 :where(.prose) .vc-wave i:nth-child(5){height:85%}.v-artd .sp-300 :where(.prose) .vc-wave i:nth-child(6){height:55%}.v-artd .sp-300 :where(.prose) .vc-wave i:nth-child(7){height:30%}.v-artd .sp-300 :where(.prose) .vc-wave i:nth-child(8){height:65%}.v-artd .sp-300 :where(.prose) .vc-wave i:nth-child(9){height:45%}.v-artd .sp-300 :where(.prose) .vc-wave i:nth-child(10){height:25%}.v-artd .sp-300 :where(.prose) .vc-wave i:nth-child(11){height:50%}.v-artd .sp-300 :where(.prose) .vc-wave i:nth-child(12){height:20%}
.v-artd .sp-300 :where(.prose) .vc-ar{height:2px;margin:0 8px;background:var(--ink);position:relative}
.v-artd .sp-300 :where(.prose) .vc-ar::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left:7px solid var(--ink);border-right:0}
.v-artd .sp-300 :where(.prose) .vc-note{padding:16px 18px;border-radius:10px;background:#fff;border:1px solid var(--line);background-image:repeating-linear-gradient(transparent 0 27px,var(--soft) 27px 28px)}
.v-artd .sp-300 :where(.prose) .vc-note p{margin:0;font-size:15.5px;line-height:1.75}
.v-artd .sp-300 :where(.prose) .pd-caution{padding:12px 16px;border-radius:10px;background:#fff6f6;color:#7d1a1f;font-size:14.5px!important}
.v-artd .sp-300 :where(.prose) .pd-caution::before{content:"! ";font-weight:900;color:#c4282d}

/* 진행 방식: 자료가 업무흐름도로 모임 */
.v-artd .sp-300 :where(.prose) .pd-we{margin:30px 0 8px;padding:26px 28px;border-radius:20px;background:var(--navy);color:#fff}
.v-artd .sp-300 :where(.prose) .we-k{margin:0 0 16px!important;font-size:13px;font-weight:800;color:#a9b9ff}
.v-artd .sp-300 :where(.prose) .we-in{display:grid;grid-template-columns:1fr 60px auto;align-items:center;margin-bottom:16px}
.v-artd .sp-300 :where(.prose) .we-in ul{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
.v-artd .sp-300 :where(.prose) .we-in li{padding:9px 12px;border-radius:8px;background:rgba(255,255,255,.1);font-weight:700;font-size:14.5px}
.v-artd .sp-300 :where(.prose) .we-ar{height:2px;margin:0 10px;background:#fff;position:relative}
.v-artd .sp-300 :where(.prose) .we-ar::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left:7px solid #fff;border-right:0}
.v-artd .sp-300 :where(.prose) .we-out{margin:0;padding:18px 22px;border-radius:12px;background:var(--yellow);color:var(--navy);font-weight:900;font-size:17px}
.v-artd .sp-300 :where(.prose) .we-d{margin:0 0 18px!important;font-size:15px;color:#d3d9f5}
.v-artd .sp-300 :where(.prose) .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-300 :where(.prose) .we-btn:hover{background:var(--blue2)}

/* 상세 문서 나무 */
.v-artd .sp-300 :where(.prose) .pd-tree{margin:20px 0 10px;text-align:center}
.v-artd .sp-300 :where(.prose) .tr-root{display:inline-block;margin:0;padding:12px 26px;border-radius:12px;background:var(--ink);color:#fff;font-weight:900}
.v-artd .sp-300 :where(.prose) .tr-kids{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px;text-align:left}
.v-artd .sp-300 :where(.prose) .tr-kids::before{content:"";position:absolute;left:16.6%;right:16.6%;top:-18px;height:2px;background:var(--ink)}
.v-artd .sp-300 :where(.prose) .tr-kids::after{content:"";position:absolute;left:50%;top:-36px;width:2px;height:18px;background:var(--ink)}
.v-artd .sp-300 :where(.prose) .tr-kids div{position:relative;padding:18px;border-radius:4px 14px 4px 4px;border:1.5px solid var(--line);background:#fff;font-size:14.5px;line-height:1.6;color:#3b4152}
.v-artd .sp-300 :where(.prose) .tr-kids div::before{content:"";position:absolute;left:50%;top:-20px;width:2px;height:20px;background:var(--ink)}
.v-artd .sp-300 :where(.prose) .tr-kids b{display:block;margin-bottom:6px;font-size:16px;color:var(--ink)}

/* 역할 칩 */
.v-artd .sp-300 :where(.prose) .pd-roles{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 16px}
.v-artd .sp-300 :where(.prose) .pd-roles span{padding:12px 18px;border-radius:12px;font-weight:800;font-size:15px}
.v-artd .sp-300 :where(.prose) .rl-c{background:var(--blue2);color:#1d3fc4}
.v-artd .sp-300 :where(.prose) .rl-o{background:var(--blue);color:#fff}
.v-artd .sp-300 :where(.prose) .rl-a{background:var(--navy);color:#fff}
.v-artd .sp-300 :where(.prose) .rl-x{background:#fff;border:2px solid #3b4152;color:#3b4152;text-decoration:line-through}
.v-artd .sp-300 :where(.prose) .rl-q{background:#fff;border:2px dashed #9aa1b3;color:#3b4152}

/* 새 요구 선별 */
.v-artd .sp-300 :where(.prose) .pd-sort{display:grid;grid-template-columns:150px 1fr 150px;gap:16px;align-items:center;margin:18px 0 18px;padding:20px;border-radius:16px;background:var(--soft)}
.v-artd .sp-300 :where(.prose) .so-in{margin:0;padding:16px;border-radius:12px;background:var(--yellow2);font-weight:900;text-align:center}
.v-artd .sp-300 :where(.prose) .so-in small{display:block;margin-top:2px;font-weight:600;font-size:12.5px;color:#4a5060}
.v-artd .sp-300 :where(.prose) .so-q{display:flex;flex-direction:column;gap:6px;margin:0;padding:0 18px;border-left:2px solid var(--ink);border-right:2px solid var(--ink);clip-path:none}
.v-artd .sp-300 :where(.prose) .so-q li{padding:8px 12px;border-radius:8px;background:#fff;font-weight:700;font-size:14.5px;text-align:center}
.v-artd .sp-300 :where(.prose) .so-out{display:flex;flex-direction:column;gap:8px}
.v-artd .sp-300 :where(.prose) .so-out span{padding:12px;border-radius:10px;background:var(--blue);color:#fff;font-weight:800;text-align:center}
.v-artd .sp-300 :where(.prose) .so-out span+span{background:#fff;color:var(--ink);border:2px solid var(--blue)}

/* 문서 머리 정보 띠 */
.v-artd .sp-300 :where(.prose) .pd-head{display:flex;margin:18px 0 16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.v-artd .sp-300 :where(.prose) .pd-head span{flex:1;padding:12px 14px;font-weight:800;font-size:15px}
.v-artd .sp-300 :where(.prose) .pd-head span+span{border-left:1px solid var(--line)}
.v-artd .sp-300 :where(.prose) .pd-head small{display:block;font-size:12px;font-weight:700;color:#4a5060}
.v-artd .sp-300 :where(.prose) .st-r{background:var(--yellow2)}
.v-artd .sp-300 :where(.prose) .st-ok{background:var(--blue2);color:#1d3fc4}

/* 설명 되돌려 받기 */
.v-artd .sp-300 :where(.prose) .pd-back{display:flex;align-items:center;gap:16px;margin:18px 0 16px}
.v-artd .sp-300 :where(.prose) .bk-who{flex:none;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 50% 36%,#fff 0 22%,transparent 23%),radial-gradient(ellipse at 50% 110%,#fff 0 42%,transparent 43%),var(--sub)}
.v-artd .sp-300 :where(.prose) .pd-back p{position:relative;display:flex;gap:6px;margin:0;padding:14px 18px;border-radius:18px 18px 18px 4px;background:var(--soft)}
.v-artd .sp-300 :where(.prose) .pd-back p span{padding:6px 12px;border-radius:8px;background:#fff;font-weight:800;font-size:14.5px}

/* 서식 전환 */
.v-artd .sp-300 :where(.prose) .pd-conv{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 16px;padding:18px 20px;border-radius:14px;border:2px dashed var(--line)}
.v-artd .sp-300 :where(.prose) .pd-conv span{padding:10px 16px;border-radius:4px 12px 4px 4px;background:#fff;border:1.5px solid var(--ink);font-weight:800;font-size:15px}
.v-artd .sp-300 :where(.prose) .pd-conv em{font-style:normal;font-size:24px;color:var(--blue)}
.v-artd .sp-300 :where(.prose) .pd-conv p{flex-basis:100%;margin:4px 0 0;font-size:14px;font-weight:700;color:#1d3fc4}

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

@media (min-width:1200px){
  .v-artd .sp-300 :where(.prose) .pd-deck{margin-left:-100px;margin-right:-100px}
}
@media (max-width:720px){
  .v-artd .sp-300 :where(.prose) .pd-lead{font-size:18px}
  .v-artd .sp-300 .prose h2{font-size:22px}
  .v-artd .sp-300 :where(.prose) .pd-s{padding-top:46px}
  .v-artd .sp-300 :where(.prose) .pd-deck{grid-template-columns:1fr;margin:0 calc(var(--pad)*-1);border-radius:0}
  .v-artd .sp-300 :where(.prose) .dk-file{flex-direction:column;gap:2px}
  .v-artd .sp-300 :where(.prose) .dk-thumbs{flex-direction:row;overflow-x:auto;padding:10px}
  .v-artd .sp-300 :where(.prose) .dk-thumbs li{flex:none;width:112px}
  .v-artd .sp-300 :where(.prose) .dk-stage{padding:12px}
  .v-artd .sp-300 :where(.prose) .dk-slide{padding:22px 20px 18px;min-height:0}
  .v-artd .sp-300 :where(.prose) .sl-memo{margin:16px -20px -18px!important;padding:12px 20px 14px}
  .v-artd .sp-300 :where(.prose) .pd-voice{grid-template-columns:1fr;gap:10px}
  .v-artd .sp-300 :where(.prose) .vc-ar{display:none}
  .v-artd .sp-300 :where(.prose) .pd-we{padding:22px 20px}
  .v-artd .sp-300 :where(.prose) .we-in{grid-template-columns:1fr;gap:10px}
  .v-artd .sp-300 :where(.prose) .we-ar{display:none}
  .v-artd .sp-300 :where(.prose) .tr-kids{grid-template-columns:1fr;margin-top:18px}
  .v-artd .sp-300 :where(.prose) .tr-kids::before,.v-artd .sp-300 :where(.prose) .tr-kids::after,.v-artd .sp-300 :where(.prose) .tr-kids div::before{display:none}
  .v-artd .sp-300 :where(.prose) .pd-sort{grid-template-columns:1fr}
  .v-artd .sp-300 :where(.prose) .so-q{border:0;padding:0}
  .v-artd .sp-300 :where(.prose) .so-out{flex-direction:row}
  .v-artd .sp-300 :where(.prose) .so-out span{flex:1}
  .v-artd .sp-300 :where(.prose) .pd-head{flex-wrap:wrap}
  .v-artd .sp-300 :where(.prose) .pd-head span{flex:1 0 50%}
}

/* 왼쪽 목차 칸(1360 이상)과 겹치지 않게 본문 폭 안으로(2026-10-16) */
@media (min-width:1360px){.v-artd .sp-300 :where(.prose) .pd-deck{margin-left:0;margin-right:0}}