/* 284 공방 반복 질의의 자동 회신과 개별 상담 분리 = 업무 책상에서 메신저까지(2026-10-16 글마다 다른 레이아웃).
   처음은 담당자 책상(쌓인 업무 쪽지 대 자동 처리 줄), 우선순위는 계산식과 두 축 칸, 역할은 손 카드와 나눔 막대,
   부재 대응은 두 줄 선로, 준비는 계단, 공방 사례는 메신저 화면, 예외는 발송 관문 */
.v-artd .sp-284 .prose{font-size:17px}
.v-artd .sp-284 :where(.prose) .ab-lead{font-size:20px;line-height:1.7;color:var(--ink);font-weight:600;margin:0 0 14px}
.v-artd .sp-284 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-284 .prose h2::before,.v-artd .sp-284 .prose h2::after{content:none}
.v-artd .sp-284 :where(.prose) .ab-s{padding:60px 0 6px}
.v-artd .sp-284 :where(.prose) .ab-s>p{margin:0 0 16px}
.v-artd .sp-284 .prose ul,.v-artd .sp-284 .prose ol{margin:0;padding:0;list-style:none}
.v-artd .sp-284 .prose li{margin:0}
.v-artd .sp-284 .prose li::before{content:none}

/* 책상: 쌓인 쪽지(기울어진 메모) 대 자동 처리 줄 */
.v-artd .sp-284 :where(.prose) .ab-desk{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:30px 0 10px}
.v-artd .sp-284 :where(.prose) .ab-cap{margin:0 0 14px;font-size:14px;font-weight:800;color:var(--sub)}
.v-artd .sp-284 :where(.prose) .ab-pile{padding:24px 22px;border-radius:18px;background:#fbf7ec}
.v-artd .sp-284 :where(.prose) .ab-pile li{margin:-4px 0 0;padding:12px 14px;background:#fff8d6;border:1px solid #efe2a8;box-shadow:0 6px 12px -8px rgba(27,31,58,.35);font-size:15px;font-weight:600;color:#3b3f4e;line-height:1.45}
.v-artd .sp-284 :where(.prose) .ab-pile li:nth-child(odd){transform:rotate(-1.4deg)}
.v-artd .sp-284 :where(.prose) .ab-pile li:nth-child(even){transform:rotate(1.1deg) translateX(8px)}
.v-artd .sp-284 :where(.prose) .ab-belt{padding:24px 22px;border-radius:18px;background:var(--soft)}
.v-artd .sp-284 :where(.prose) .ab-belt ol{position:relative;display:grid;gap:8px}
.v-artd .sp-284 :where(.prose) .ab-belt ol::before{content:"";position:absolute;left:15px;top:12px;bottom:12px;width:2px;background:var(--blue)}
.v-artd .sp-284 :where(.prose) .ab-belt li{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px 10px 40px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.v-artd .sp-284 :where(.prose) .ab-belt li::after{content:"";position:absolute;left:10px;top:50%;margin-top:-6px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--blue)}
.v-artd .sp-284 :where(.prose) .ab-belt b{font-size:15px;color:var(--ink)}
.v-artd .sp-284 :where(.prose) .ab-belt small{flex:none;padding:3px 9px;border-radius:999px;background:var(--blue2);color:#1d3fc4;font-size:12.5px;font-weight:700}

/* 우선순위: 계산식 띠 + 두 축 칸 */
.v-artd .sp-284 :where(.prose) .ab-calc{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px 0 22px;padding:22px 18px;border-radius:16px;border:2px dashed #c9cfdd;position:relative}
.v-artd .sp-284 :where(.prose) .c-k{position:absolute;left:16px;top:-12px;padding:0 8px;background:#fff;font-size:13px;font-weight:800;color:var(--sub)}
.v-artd .sp-284 :where(.prose) .c-n{text-align:center;min-width:92px}
.v-artd .sp-284 :where(.prose) .c-n b{display:block;font-size:34px;letter-spacing:-1px;color:var(--ink);line-height:1.1}
.v-artd .sp-284 :where(.prose) .c-n small{font-size:13px;color:var(--sub)}
.v-artd .sp-284 :where(.prose) .c-r b{color:var(--blue)}
.v-artd .sp-284 :where(.prose) .c-op{font-size:28px;font-weight:300;color:var(--sub)}
.v-artd .sp-284 :where(.prose) .ab-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0 22px;padding:28px 0 30px}
.v-artd .sp-284 :where(.prose) .g-y,.v-artd .sp-284 :where(.prose) .g-x{position:absolute;font-size:13px;font-weight:800;color:var(--sub)}
.v-artd .sp-284 :where(.prose) .g-y{left:0;top:0}
.v-artd .sp-284 :where(.prose) .g-y::before{content:"↑ "}
.v-artd .sp-284 :where(.prose) .g-x::after{content:" →"}
.v-artd .sp-284 :where(.prose) .g-x{bottom:4px;left:50%;transform:translateX(-50%)}
.v-artd .sp-284 :where(.prose) .g-c{min-height:78px;padding:14px 16px;border-radius:12px;background:var(--soft);font-size:14px;color:var(--sub)}
.v-artd .sp-284 :where(.prose) .g-c b{display:block;font-weight:700;color:#4a5060}
.v-artd .sp-284 :where(.prose) .g-hl{background:var(--navy);color:#fff}
.v-artd .sp-284 :where(.prose) .g-hl b{color:#fff}
.v-artd .sp-284 :where(.prose) .g-hl em{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;background:var(--yellow);color:var(--navy);font-style:normal;font-weight:800;font-size:13px}

/* 역할: 사람 손이 필요한 일 세 장 + 나눔 막대 */
.v-artd .sp-284 :where(.prose) .ab-hands{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 22px}
.v-artd .sp-284 :where(.prose) .ab-hands>div{padding:20px 18px;border-radius:16px;border:1px solid var(--line);box-shadow:0 16px 30px -26px rgba(27,31,58,.4)}
.v-artd .sp-284 :where(.prose) .h-ic{display:block;width:36px;height:36px;margin-bottom:12px;border-radius:50%;background:var(--blue2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e5bff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c1-4 4-6 7-6s6 2 7 6'/%3E%3C/svg%3E") center/20px no-repeat}
.v-artd .sp-284 :where(.prose) .ab-hands b{display:block;font-size:16.5px;line-height:1.4;color:var(--ink);margin-bottom:6px}
.v-artd .sp-284 :where(.prose) .ab-hands p{margin:0;font-size:15px;line-height:1.6;color:#4a5060}
.v-artd .sp-284 :where(.prose) .ab-split{display:grid;grid-template-columns:2fr 3fr;margin:6px 0 18px;border-radius:14px;overflow:hidden;font-size:16px;font-weight:700}
.v-artd .sp-284 :where(.prose) .ab-split>div{padding:16px 20px}
.v-artd .sp-284 :where(.prose) .ab-split small{display:block;margin-bottom:2px;font-size:12.5px;font-weight:800;opacity:.85}
.v-artd .sp-284 :where(.prose) .sp-p{background:var(--yellow2);color:#5a4500}
.v-artd .sp-284 :where(.prose) .sp-m{background:var(--navy);color:#fff}

/* 부재 대응: 두 줄 선로 */
.v-artd .sp-284 :where(.prose) .ab-lanes{margin:22px 0 20px;display:grid;gap:12px}
.v-artd .sp-284 :where(.prose) .ln{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:14px}
.v-artd .sp-284 :where(.prose) .ln-h{margin:0;font-size:14.5px;font-weight:800;color:var(--sub)}
.v-artd .sp-284 :where(.prose) .ln ol{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.v-artd .sp-284 :where(.prose) .ln ol::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#d8dce6}
.v-artd .sp-284 :where(.prose) .ln li{position:relative;justify-self:center;padding:8px 12px;border-radius:999px;background:#fff;border:1.5px solid #c9cfdd;font-size:14px;font-weight:700;color:#4a5060;white-space:nowrap}
.v-artd .sp-284 :where(.prose) .ln-b .ln-h{color:var(--blue)}
.v-artd .sp-284 :where(.prose) .ln-b ol::before{background:var(--blue)}
.v-artd .sp-284 :where(.prose) .ln-b li{border-color:var(--blue);color:var(--ink)}
.v-artd .sp-284 :where(.prose) .ab-memo{padding:18px 22px;border-left:6px solid var(--blue);border-radius:0 12px 12px 0;background:var(--blue2);font-size:15.5px;line-height:1.65}
.v-artd .sp-284 :where(.prose) .ab-memo b{display:block;margin-bottom:4px;color:#1d3fc4}

/* 준비 여섯 단계: 계단 */
.v-artd .sp-284 :where(.prose) .ab-stairs{counter-reset:st;display:grid;gap:10px;margin:24px 0 10px}
.v-artd .sp-284 :where(.prose) .ab-stairs li{counter-increment:st;position:relative;padding:16px 18px 16px 64px;border-radius:14px;background:var(--soft);font-size:15.5px;line-height:1.6;color:#4a5060}
.v-artd .sp-284 :where(.prose) .ab-stairs li:nth-child(2){margin-left:24px}
.v-artd .sp-284 :where(.prose) .ab-stairs li:nth-child(3){margin-left:48px}
.v-artd .sp-284 :where(.prose) .ab-stairs li:nth-child(4){margin-left:72px}
.v-artd .sp-284 :where(.prose) .ab-stairs li:nth-child(5){margin-left:96px}
.v-artd .sp-284 :where(.prose) .ab-stairs li:nth-child(6){margin-left:120px;background:var(--blue2)}
.v-artd .sp-284 :where(.prose) .ab-stairs li::before{content:counter(st);position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:9px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
.v-artd .sp-284 :where(.prose) .ab-stairs b{display:block;font-size:16.5px;color:var(--ink);margin-bottom:2px}

/* 공방 사례: 메신저 화면 */
.v-artd .sp-284 :where(.prose) .ab-chat-wrap{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start;margin:8px 0 18px}
.v-artd .sp-284 :where(.prose) .ab-chat{margin:0;padding:0 16px 20px;border-radius:30px;border:8px solid var(--navy);background:#eef1f8;box-shadow:0 30px 50px -36px rgba(27,31,58,.6);display:flex;flex-direction:column;gap:8px;overflow:hidden}
.v-artd .sp-284 :where(.prose) .ab-chat p{margin:0}
.v-artd .sp-284 :where(.prose) .ch-top{margin:0 -16px 6px!important;padding:14px 16px;background:#fff;border-bottom:1px solid var(--line);font-size:14px;font-weight:800;text-align:center;color:var(--ink)}
.v-artd .sp-284 :where(.prose) .ch-q{align-self:flex-end;max-width:80%;padding:9px 14px;border-radius:16px 16px 4px 16px;background:var(--blue);color:#fff;font-size:14.5px;font-weight:600}
.v-artd .sp-284 :where(.prose) .ch-a{align-self:flex-start;max-width:88%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:#fff;border:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--ink)}
.v-artd .sp-284 :where(.prose) .ch-q2{margin-top:10px!important;background:var(--navy)}
.v-artd .sp-284 :where(.prose) .ch-p{align-self:flex-start;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--yellow2);font-size:14px;font-weight:800;color:#5a4500}
.v-artd .sp-284 :where(.prose) .ch-p span{width:22px;height:22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a4500' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c1-4 4-6 7-6s6 2 7 6'/%3E%3C/svg%3E") center/14px no-repeat}
.v-artd .sp-284 :where(.prose) .ab-case-t p{margin:0 0 14px}

/* 예외: 발송 관문 */
.v-artd .sp-284 :where(.prose) .ab-gate{margin:22px 0 20px;padding:22px 24px;border-radius:18px;background:var(--navy);color:#fff}
.v-artd .sp-284 :where(.prose) .gt-h{margin:0 0 14px;font-size:18px;font-weight:800}
.v-artd .sp-284 :where(.prose) .gt-k{margin:0 0 8px;font-size:13px;font-weight:700;color:#aab3d6}
.v-artd .sp-284 :where(.prose) .gt-c{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px!important}
.v-artd .sp-284 :where(.prose) .gt-c li{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:rgba(255,255,255,.1);font-size:15px;font-weight:700}
.v-artd .sp-284 :where(.prose) .gt-c li::after{content:"";order:-1;width:10px;height:10px;border-radius:50%;background:var(--yellow)}
.v-artd .sp-284 :where(.prose) .gt-out{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.v-artd .sp-284 :where(.prose) .gt-out span{padding:12px 16px;border-radius:12px;font-size:15px;font-weight:800;text-align:center}
.v-artd .sp-284 :where(.prose) .o-y{background:#fff;color:var(--navy)}
.v-artd .sp-284 :where(.prose) .o-n{border:1.5px dashed rgba(255,255,255,.6)}

/* 흐름소프트 진행 방식: 자료 넷이 업무흐름도 한 장으로 */
.v-artd .sp-284 :where(.prose) .ab-we{margin:56px 0 12px;padding:28px 30px;border-radius:20px;background:var(--blue2)}
.v-artd .sp-284 :where(.prose) .we-k{margin:0 0 4px;font-size:13px;font-weight:800;color:#1d3fc4}
.v-artd .sp-284 :where(.prose) .we-t{margin:0 0 18px;font-size:21px;font-weight:800;color:var(--ink);line-height:1.4}
.v-artd .sp-284 :where(.prose) .we-flow{display:grid;grid-template-columns:1fr 46px 170px;align-items:center;gap:10px;margin-bottom:16px}
.v-artd .sp-284 :where(.prose) .we-in{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.v-artd .sp-284 :where(.prose) .we-in li{padding:10px 12px;border-radius:10px;background:#fff;font-size:14.5px;font-weight:700;color:var(--ink)}
.v-artd .sp-284 :where(.prose) .we-in small{display:block;font-size:12.5px;font-weight:600;color:var(--sub)}
.v-artd .sp-284 :where(.prose) .we-ar{height:3px;background:var(--blue);position:relative}
.v-artd .sp-284 :where(.prose) .we-ar::after{content:"";position:absolute;right:-2px;top:-5px;border:6px solid transparent;border-left:9px solid var(--blue);border-right:0}
.v-artd .sp-284 :where(.prose) .we-doc{position:relative;padding:34px 14px;border-radius:6px 22px 6px 6px;background:#fff;border:2px solid var(--blue);text-align:center;font-size:17px;font-weight:800;color:var(--blue)}
.v-artd .sp-284 :where(.prose) .we-n{margin:0 0 18px;font-size:15.5px;line-height:1.6;color:var(--ink)}
.v-artd .sp-284 :where(.prose) .we-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-284 :where(.prose) .we-btn:hover{background:var(--blue)}

.v-artd .sp-284 :where(.prose) .ab-rel{margin:36px 0 10px!important;padding:16px 0 0!important;border-top:1px solid var(--line)}
.v-artd .sp-284 :where(.prose) .ab-rel li{padding:6px 0}
.v-artd .sp-284 :where(.prose) .ab-rel a{font-weight:700;text-decoration:none}
.v-artd .sp-284 :where(.prose) .ab-rel a::before{content:"→ ";color:var(--sub)}

@media (max-width:720px){
  .v-artd .sp-284 :where(.prose) .ab-lead{font-size:18px}
  .v-artd .sp-284 .prose h2{font-size:23px}
  .v-artd .sp-284 :where(.prose) .ab-s{padding-top:46px}
  .v-artd .sp-284 :where(.prose) .ab-desk{grid-template-columns:1fr}
  .v-artd .sp-284 :where(.prose) .c-n{min-width:0}
  .v-artd .sp-284 :where(.prose) .c-n b{font-size:26px}
  .v-artd .sp-284 :where(.prose) .ab-calc{gap:8px}
  .v-artd .sp-284 :where(.prose) .g-c{font-size:13px;padding:12px}
  .v-artd .sp-284 :where(.prose) .ab-hands{grid-template-columns:1fr}
  .v-artd .sp-284 :where(.prose) .ab-split{grid-template-columns:1fr}
  .v-artd .sp-284 :where(.prose) .ln{grid-template-columns:1fr;gap:8px}
  .v-artd .sp-284 :where(.prose) .ln ol{grid-template-columns:1fr 1fr;gap:8px}
  .v-artd .sp-284 :where(.prose) .ln ol::before{display:none}
  .v-artd .sp-284 :where(.prose) .ln li{justify-self:stretch;text-align:center;white-space:normal}
  .v-artd .sp-284 :where(.prose) .ab-stairs li:nth-child(n){margin-left:0}
  .v-artd .sp-284 :where(.prose) .ab-stairs li{padding-left:60px}
  .v-artd .sp-284 :where(.prose) .ab-chat-wrap{grid-template-columns:1fr}
  .v-artd .sp-284 :where(.prose) .ab-chat{max-width:320px;margin:0 auto}
  .v-artd .sp-284 :where(.prose) .gt-out{grid-template-columns:1fr}
  .v-artd .sp-284 :where(.prose) .ab-we{padding:24px 20px}
  .v-artd .sp-284 :where(.prose) .we-flow{grid-template-columns:1fr}
  .v-artd .sp-284 :where(.prose) .we-ar{width:3px;height:30px;margin:0 auto}
  .v-artd .sp-284 :where(.prose) .we-ar::after{right:-5px;top:auto;bottom:-2px;border:6px solid transparent;border-top:9px solid var(--blue);border-bottom:0}
  .v-artd .sp-284 :where(.prose) .we-doc{padding:20px}
}