/* 333 기획 대행의 문서화와 사업 결정 분담 = 결재 문서(2026-10-16 사장님 '공통틀로 하지마 다 다르게').
   첫머리는 작성(기획 지원), 검토, 승인(발주자) 결재란이 붙은 기획 결재 문서, 역할은 권고가 건너가는 두 책상, 같은 이름 기능은 갈래,
   이해 확인은 사용자와 운영자 두 줄, 사례는 자료가 자라는 길, 결정 점검은 결재선, 보류는 기록 카드, 계약은 두 갈래, 활용은 가운데 기록에서 세 방향 */
.v-artd .sp-333 .prose{font-size:17px}
.v-artd .sp-333 .prose h2{margin:0 0 16px;padding:0;border:0;font-size:26px;letter-spacing:-.7px;display:block;min-height:0}
.v-artd .sp-333 .prose h2::before,.v-artd .sp-333 .prose h2::after{content:none}
.v-artd .sp-333 :where(.prose) .pl-s{padding:56px 0 4px}
.v-artd .sp-333 :where(.prose) .pl-s>p,.v-artd .sp-333 :where(.prose) .pl>p{margin:0 0 16px}
.v-artd .sp-333 :where(.prose) .pl-lead{font-size:20px;line-height:1.7;color:var(--ink);margin:0 0 26px!important}
.v-artd .sp-333 :where(.prose) .pl-lead b{color:var(--blue)}

/* 결재 문서 */
.v-artd .sp-333 :where(.prose) .pl-doc{margin:0 0 20px;padding:24px 26px 18px;background:#fff;border:1.5px solid var(--ink)}
.v-artd .sp-333 :where(.prose) .pd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:0 0 18px}
.v-artd .sp-333 :where(.prose) .pd-t{margin:8px 0 0;font-size:24px;font-weight:800;letter-spacing:.3em;color:var(--ink)}
.v-artd .sp-333 :where(.prose) .pd-sign{width:auto;margin:0;border-collapse:collapse;border-radius:0!important;overflow:visible;font-size:13px}
.v-artd .sp-333 :where(.prose) .pd-sign th,.v-artd .sp-333 :where(.prose) .pd-sign td{width:86px;border:1.5px solid var(--ink);text-align:center;padding:5px 4px}
.v-artd .sp-333 :where(.prose) .pd-sign th{background:#eef0f4!important;color:var(--ink);font-weight:800;font-size:12.5px}
.v-artd .sp-333 :where(.prose) .pd-sign td{height:62px;font-size:12.5px;color:var(--sub);font-weight:700!important;vertical-align:middle}
.v-artd .sp-333 :where(.prose) .pd-sign td.me span{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2.5px solid #d13438;color:#d13438;font-weight:800;font-size:12px;transform:rotate(-12deg)}
.v-artd .sp-333 :where(.prose) .pd-body{margin:0;padding:0;list-style:none;counter-reset:b;border-top:2px solid var(--ink)}
.v-artd .sp-333 :where(.prose) .pd-body li{counter-increment:b;display:grid;grid-template-columns:40px 190px 1fr;align-items:baseline;margin:0;padding:12px 0;border-bottom:1px solid #c9cdd8;font-size:15px}
.v-artd .sp-333 :where(.prose) .pd-body li::before{content:counter(b) ".";font-weight:800;color:var(--ink)}
.v-artd .sp-333 :where(.prose) .pd-body b{color:var(--ink)}
.v-artd .sp-333 :where(.prose) .pd-body span{color:#4b5263;font-size:14.5px}
.v-artd .sp-333 :where(.prose) .pd-foot{margin:14px 0 0;font-size:14px;color:var(--ink);text-align:right}
.v-artd .sp-333 :where(.prose) .pd-foot::before{content:"※ ";color:#c4282d}
.v-artd .sp-333 :where(.prose) .pl-note{padding:16px 20px;border-radius:14px;background:var(--blue2);font-size:15.5px;line-height:1.65}
.v-artd .sp-333 :where(.prose) .pl-note b{display:block;margin-bottom:2px;color:#1d3fc4}

/* 두 책상 */
.v-artd .sp-333 :where(.prose) .pl-desk{display:grid;grid-template-columns:1fr 64px 1fr;align-items:stretch;margin:16px 0 20px}
.v-artd .sp-333 :where(.prose) .dk{padding:20px;border-radius:16px}
.v-artd .sp-333 :where(.prose) .dk p{margin:0;font-size:14.5px;line-height:1.65}
.v-artd .sp-333 :where(.prose) .dk .dk-h{margin:0 0 10px;font-size:16.5px;font-weight:800}
.v-artd .sp-333 :where(.prose) .dk-h small{display:block;margin-top:2px;font-size:12.5px;font-weight:700}
.v-artd .sp-333 :where(.prose) .dk-a{background:var(--soft);color:#3a4052}
.v-artd .sp-333 :where(.prose) .dk-a .dk-h{color:var(--ink)}
.v-artd .sp-333 :where(.prose) .dk-a small{color:var(--sub)}
.v-artd .sp-333 :where(.prose) .dk-b{background:var(--navy);color:#e6e9f5}
.v-artd .sp-333 :where(.prose) .dk-b .dk-h{color:#fff}
.v-artd .sp-333 :where(.prose) .dk-b small{color:#9fb3ff}
.v-artd .sp-333 :where(.prose) .dk-pass{display:flex;align-items:center;justify-content:center;position:relative}
.v-artd .sp-333 :where(.prose) .dk-pass::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;background:var(--ink)}
.v-artd .sp-333 :where(.prose) .dk-pass::after{content:"";position:absolute;right:2px;top:50%;margin-top:-5px;border:5px solid transparent;border-left:8px solid var(--ink);border-right:0}
.v-artd .sp-333 :where(.prose) .dk-pass span{position:relative;z-index:1;padding:4px 6px;border-radius:6px;background:#fff;box-shadow:0 0 0 1.5px var(--ink);font-size:12px;font-weight:800;color:var(--ink)}

/* 같은 이름 다른 조건 */
.v-artd .sp-333 :where(.prose) .pl-same{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:0;margin:16px 0 20px}
.v-artd .sp-333 :where(.prose) .sm-n{padding:20px 0;border-radius:14px;background:var(--blue);color:#fff;text-align:center;font-size:18px;font-weight:800}
.v-artd .sp-333 :where(.prose) .sm-b{position:relative;display:grid;gap:8px;padding-left:44px}
.v-artd .sp-333 :where(.prose) .sm-b::before{content:"";position:absolute;left:22px;top:18px;bottom:18px;width:2px;background:var(--blue)}
.v-artd .sp-333 :where(.prose) .sm-b::after{content:"";position:absolute;left:0;top:50%;width:22px;height:2px;background:var(--blue)}
.v-artd .sp-333 :where(.prose) .sm-b span{position:relative;padding:10px 14px;border-radius:10px;background:#fff;box-shadow:0 0 0 1.5px var(--blue2);font-size:15px;font-weight:700;color:var(--ink)}
.v-artd .sp-333 :where(.prose) .sm-b span::before{content:"";position:absolute;left:-22px;top:50%;width:22px;height:2px;background:var(--blue)}

/* 사용자와 운영자 두 줄 */
.v-artd .sp-333 :where(.prose) .pl-lane{margin:16px 0 20px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.v-artd .sp-333 :where(.prose) .ln-r{display:grid;grid-template-columns:90px 1fr 1fr;align-items:stretch}
.v-artd .sp-333 :where(.prose) .ln-r+.ln-r{border-top:1px dashed #c3c8d6}
.v-artd .sp-333 :where(.prose) .ln-who{display:grid;place-items:center;background:var(--soft);font-size:14px;font-weight:800;color:var(--ink)}
.v-artd .sp-333 :where(.prose) .ln-c{position:relative;margin:12px;padding:12px;border-radius:10px;background:var(--blue2);text-align:center;font-size:14.5px;font-weight:800;color:#1d3fc4}
.v-artd .sp-333 :where(.prose) .ln-gap{background:none}
.v-artd .sp-333 :where(.prose) .ln-r:first-child .ln-c:first-of-type::after{content:"→";position:absolute;right:-16px;top:50%;margin-top:-12px;color:var(--ink)}

/* 사례 길 */
.v-artd .sp-333 :where(.prose) .pl-case{margin:16px 0 18px;padding:22px 24px;border-radius:18px;background:var(--navy);color:#e6e9f5}
.v-artd .sp-333 :where(.prose) .cs-k{margin:0 0 14px;font-size:13px;font-weight:800;color:#9fb3ff}
.v-artd .sp-333 :where(.prose) .cs-path{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;align-items:end;margin:0 0 16px}
.v-artd .sp-333 :where(.prose) .cs-path span{display:flex;align-items:flex-end;padding:10px;border-radius:8px;background:rgba(255,255,255,.1);font-size:13px;font-weight:800;line-height:1.3;color:#fff}
.v-artd .sp-333 :where(.prose) .cs-path .p1{height:46px}
.v-artd .sp-333 :where(.prose) .cs-path .p2{height:64px}
.v-artd .sp-333 :where(.prose) .cs-path .p3{height:82px}
.v-artd .sp-333 :where(.prose) .cs-path .p4{height:100px;background:var(--blue)}
.v-artd .sp-333 :where(.prose) .pl-case p{margin:0 0 10px;font-size:15px;line-height:1.7}

/* 결재선 */
.v-artd .sp-333 :where(.prose) .pl-line{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:16px 0 20px;padding:0;list-style:none;border:1.5px solid var(--ink)}
.v-artd .sp-333 :where(.prose) .pl-line li{margin:0;padding:14px 14px 16px;font-size:13.5px;line-height:1.55;color:#4b5263}
.v-artd .sp-333 :where(.prose) .pl-line li+li{border-left:1.5px solid var(--ink)}
.v-artd .sp-333 :where(.prose) .pl-line li::before{content:"";display:block;width:26px;height:26px;margin:0 0 10px;border-radius:50%;border:2px dashed #9aa1b3}
.v-artd .sp-333 :where(.prose) .pl-line b{display:block;margin-bottom:4px;font-size:15.5px;color:var(--ink)}

/* 보류 기록 카드 */
.v-artd .sp-333 :where(.prose) .pl-hold{max-width:480px;margin:16px 0 20px;padding:18px 22px;border-radius:6px;background:#fffbea;box-shadow:0 0 0 1px #efe2b0;border-top:6px solid #f5b400}
.v-artd .sp-333 :where(.prose) .hd-h{margin:0 0 8px;font-size:14px;font-weight:800;color:#7a5600}
.v-artd .sp-333 :where(.prose) .pl-hold dl{margin:0}
.v-artd .sp-333 :where(.prose) .pl-hold dl div{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed #e4d59e}
.v-artd .sp-333 :where(.prose) .pl-hold dt{flex:none;width:110px;font-size:14.5px;font-weight:800;color:var(--ink)}

/* 계약 두 갈래 */
.v-artd .sp-333 :where(.prose) .pl-fork{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 20px}
.v-artd .sp-333 :where(.prose) .pl-fork>div{position:relative;padding:20px 18px 18px;border-radius:14px;border:1.5px solid var(--line)}
.v-artd .sp-333 :where(.prose) .pl-fork b{display:block;margin-bottom:6px;font-size:16px;color:var(--ink)}
.v-artd .sp-333 :where(.prose) .pl-fork span{font-size:14px;line-height:1.6;color:var(--sub)}
.v-artd .sp-333 :where(.prose) .fk-a::before,.v-artd .sp-333 :where(.prose) .fk-b::before{content:"";position:absolute;left:18px;top:-1.5px;width:44px;height:4px;border-radius:0 0 4px 4px;background:var(--blue)}
.v-artd .sp-333 :where(.prose) .fk-b::before{background:var(--navy)}

/* 가운데 기록에서 세 방향 */
.v-artd .sp-333 :where(.prose) .pl-use{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;gap:12px;margin:16px 0 20px}
.v-artd .sp-333 :where(.prose) .us-c{grid-column:1/-1;justify-self:center;padding:14px 30px;border-radius:999px;background:var(--navy);color:#fff;text-align:center;font-size:15px;font-weight:800;line-height:1.35;position:relative}
.v-artd .sp-333 :where(.prose) .us-c::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:12px;background:var(--navy)}
.v-artd .sp-333 :where(.prose) .us{padding:16px;border-radius:14px;background:var(--soft);border-top:3px solid var(--navy);font-size:14px;line-height:1.55;color:var(--sub)}
.v-artd .sp-333 :where(.prose) .us b{display:block;margin-bottom:4px;font-size:15.5px;color:var(--ink)}

/* 흐름소프트 진행 방식: 기획 결과물 봉투 */
.v-artd .sp-333 :where(.prose) .pl-we{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:center;margin:50px 0 10px;padding:30px;border-radius:22px;background:var(--blue2)}
.v-artd .sp-333 :where(.prose) .pw-env{position:relative;height:180px}
.v-artd .sp-333 :where(.prose) .pw-env span{position:absolute;left:10%;width:80%;padding:10px 12px;border-radius:6px;background:#fff;box-shadow:0 8px 18px -10px rgba(27,31,58,.5);font-size:13px;font-weight:800;color:var(--ink)}
.v-artd .sp-333 :where(.prose) .pw-env span:nth-child(1){top:0;transform:rotate(-6deg)}
.v-artd .sp-333 :where(.prose) .pw-env span:nth-child(2){top:40px;transform:rotate(3deg)}
.v-artd .sp-333 :where(.prose) .pw-env span:nth-child(3){top:80px;transform:rotate(-2deg)}
.v-artd .sp-333 :where(.prose) .pw-env::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62px;border-radius:8px;background:var(--navy);clip-path:polygon(0 0,50% 40%,100% 0,100% 100%,0 100%)}
.v-artd .sp-333 :where(.prose) .pw-k{margin:0 0 6px;font-size:13px;font-weight:800;color:#1d3fc4}
.v-artd .sp-333 :where(.prose) .pw-t{margin:0 0 10px;font-size:21px;font-weight:800;color:var(--ink)}
.v-artd .sp-333 :where(.prose) .pw-d{margin:0 0 18px;font-size:15.5px;line-height:1.7;color:var(--ink)}
.v-artd .sp-333 :where(.prose) .pw-btn{display:inline-flex;padding:13px 24px;border-radius:999px;background:var(--navy);color:#fff!important;font-weight:800;text-decoration:none!important}
.v-artd .sp-333 :where(.prose) .pw-btn:hover{background:var(--blue)}

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

@media (max-width:720px){
  .v-artd .sp-333 :where(.prose) .pl-lead{font-size:18px}
  .v-artd .sp-333 .prose h2{font-size:22px}
  .v-artd .sp-333 :where(.prose) .pl-s{padding-top:46px}
  .v-artd .sp-333 :where(.prose) .pl-doc{padding:18px 14px 14px}
  .v-artd .sp-333 :where(.prose) .pd-head{flex-direction:column;gap:12px}
  .v-artd .sp-333 :where(.prose) .pd-sign th,.v-artd .sp-333 :where(.prose) .pd-sign td{width:33%}
  .v-artd .sp-333 :where(.prose) .pd-sign{width:100%}
  .v-artd .sp-333 :where(.prose) .pd-body li{grid-template-columns:28px 1fr}
  .v-artd .sp-333 :where(.prose) .pd-body span{grid-column:2}
  .v-artd .sp-333 :where(.prose) .pl-desk{grid-template-columns:1fr;gap:0}
  .v-artd .sp-333 :where(.prose) .dk-pass{height:52px}
  .v-artd .sp-333 :where(.prose) .dk-pass::before{left:50%;right:auto;top:4px;bottom:4px;width:2px;height:auto}
  .v-artd .sp-333 :where(.prose) .dk-pass::after{right:auto;left:50%;top:auto;bottom:2px;margin:0 0 0 -5px;border:5px solid transparent;border-top:8px solid var(--ink);border-bottom:0}
  .v-artd .sp-333 :where(.prose) .pl-same{grid-template-columns:90px 1fr}
  .v-artd .sp-333 :where(.prose) .ln-r{grid-template-columns:70px 1fr 1fr}
  .v-artd .sp-333 :where(.prose) .ln-c{margin:8px;font-size:13px}
  .v-artd .sp-333 :where(.prose) .cs-path{grid-template-columns:1fr 1fr}
  .v-artd .sp-333 :where(.prose) .pl-line{grid-template-columns:1fr 1fr}
  .v-artd .sp-333 :where(.prose) .pl-line li:nth-child(3){border-left:0}
  .v-artd .sp-333 :where(.prose) .pl-line li:nth-child(n+3){border-top:1.5px solid var(--ink)}
  .v-artd .sp-333 :where(.prose) .pl-fork{grid-template-columns:1fr}
  .v-artd .sp-333 :where(.prose) .pl-use{grid-template-columns:1fr}
  .v-artd .sp-333 :where(.prose) .pl-we{grid-template-columns:1fr;padding:22px 18px}
  .v-artd .sp-333 :where(.prose) .pw-env{width:200px;margin:0 auto}
}