/* 308 명세에서 빠지는 암묵적 규칙과 운영자 몫 = 빙산(2026-10-16 글마다 다른 레이아웃).
   누락 항목은 물 위 기본 화면과 물밑 확인 항목의 빙산, 암묵적 규칙은 머릿속 생각 구름에서 문서로, 운영자 몫은 고객과 운영자 두 줄,
   완료 이후는 완료 선과 변경 지점, 빈 상태는 정상 빈 화면 대 실패 화면, 발견 시점은 길어지는 수정 범위 막대, 자체 검토는 기호 셋,
   기술 예외는 경고 칩, 진행 방식은 물밑에서 떠오르는 방법 셋 */
.v-artd .sp-308 .prose{font-size:17px}
.v-artd .sp-308 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-308 .prose h2::before,.v-artd .sp-308 .prose h2::after{content:none}
.v-artd .sp-308 :where(.prose) .ib-s{padding:58px 0 6px}
.v-artd .sp-308 :where(.prose) .ib-s>p{margin:0 0 16px}
.v-artd .sp-308 :where(.prose) .ib-lead{font-size:20px;line-height:1.7;color:var(--ink);margin:0 0 18px}
.v-artd .sp-308 :where(.prose) .ib-lead b{color:var(--blue)}
.v-artd .sp-308 :where(.prose) .ib-gap{margin:0;padding:16px 20px;border-radius:12px;border:2px dashed #9aa1b5;font-size:15.5px;line-height:1.65}
.v-artd .sp-308 :where(.prose) .ib-gap b{display:block;color:var(--ink)}

/* 빙산 */
.v-artd .sp-308 :where(.prose) .ib-berg{position:relative;margin:6px 0 10px;border-radius:18px;overflow:hidden;background:#eef3ff}
.v-artd .sp-308 :where(.prose) .bg-water{background:linear-gradient(#1f3a8a,#0f1f52)}
.v-artd .sp-308 :where(.prose) .bg-top{position:relative;width:46%;margin:20px auto 0;padding:16px 16px 10px;background:#fff;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);text-align:center}
.v-artd .sp-308 :where(.prose) .bg-sea{position:relative;width:86%;margin:0 auto;padding:22px 30px 30px;background:rgba(223,230,255,.16);clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);text-align:center}
.v-artd .sp-308 :where(.prose) .bg-k{margin:0 0 8px;font-size:13px;font-weight:800;color:var(--sub)}
.v-artd .sp-308 :where(.prose) .bg-sea .bg-k{color:#bfcaff}
.v-artd .sp-308 :where(.prose) .ib-berg ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.v-artd .sp-308 :where(.prose) .ib-berg li{margin:0;padding:5px 10px;border-radius:6px;font-size:13.5px;font-weight:700}
.v-artd .sp-308 :where(.prose) .bg-top li{background:var(--soft);color:var(--ink)}
.v-artd .sp-308 :where(.prose) .bg-sea li{padding:8px 14px;background:#fff;color:var(--navy);font-size:14.5px}
.v-artd .sp-308 :where(.prose) .bg-sea::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:repeating-linear-gradient(90deg,#9fb3ff 0 12px,transparent 12px 20px)}

/* 생각 구름에서 문서로 */
.v-artd .sp-308 :where(.prose) .ib-head{display:grid;grid-template-columns:1fr 60px 180px;align-items:center;margin:6px 0 18px}
.v-artd .sp-308 :where(.prose) .hd-cloud{padding:20px 22px;border-radius:60px 60px 60px 18px;background:var(--soft);display:flex;flex-wrap:wrap;gap:6px}
.v-artd .sp-308 :where(.prose) .hd-k{width:100%;margin:0 0 4px;font-size:13px;font-weight:800;color:var(--sub)}
.v-artd .sp-308 :where(.prose) .hd-cloud span{padding:7px 12px;border-radius:999px;background:#fff;font-size:14px;font-weight:700;color:var(--ink);border:1.5px dashed #9aa1b5}
.v-artd .sp-308 :where(.prose) .hd-arrow{height:3px;background:var(--blue);position:relative;margin:0 8px}
.v-artd .sp-308 :where(.prose) .hd-arrow::after{content:"";position:absolute;right:-2px;top:-6px;border:7px solid transparent;border-left:10px solid var(--blue);border-right:0}
.v-artd .sp-308 :where(.prose) .hd-doc{padding:16px;border-radius:6px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 26px -18px rgba(27,31,58,.45)}
.v-artd .sp-308 :where(.prose) .hd-doc i{display:block;height:8px;margin-top:8px;border-radius:4px;background:var(--blue2)}
.v-artd .sp-308 :where(.prose) .hd-doc i.s{width:60%}
.v-artd .sp-308 :where(.prose) .hd-doc .hd-k{color:var(--ink)}

/* 고객과 운영자 */
.v-artd .sp-308 :where(.prose) .ib-two{margin:6px 0 18px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.v-artd .sp-308 :where(.prose) .tl{display:flex;align-items:center;gap:8px;padding:12px 16px}
.v-artd .sp-308 :where(.prose) .tl b{flex:none;width:70px;font-size:15px;color:var(--ink)}
.v-artd .sp-308 :where(.prose) .tl span{padding:7px 14px;border-radius:8px;font-size:14px;font-weight:800}
.v-artd .sp-308 :where(.prose) .tl-c span{background:var(--soft);color:var(--ink)}
.v-artd .sp-308 :where(.prose) .tl-o{background:var(--navy)}
.v-artd .sp-308 :where(.prose) .tl-o b{color:#fff}
.v-artd .sp-308 :where(.prose) .tl-o span{background:rgba(255,255,255,.12);color:#fff}
.v-artd .sp-308 :where(.prose) .tl-o span+span::before{content:"→ ";color:#9fb3ff}

/* 완료 이후 */
.v-artd .sp-308 :where(.prose) .ib-after{margin:6px 0 10px}
.v-artd .sp-308 :where(.prose) .af-line{position:relative;display:flex;align-items:center;gap:16px;height:56px;padding:0 16px;border-radius:12px;background:linear-gradient(90deg,var(--soft) 0 30%,#eef1ff 30%)}
.v-artd .sp-308 :where(.prose) .af-done{padding:7px 12px;border-radius:999px;background:#17703d;color:#fff;font-size:13.5px;font-weight:800}
.v-artd .sp-308 :where(.prose) .af-chg{margin-left:auto;padding:7px 12px;border-radius:8px;background:#fff;border:2px solid #e5484d;color:#b3261e;font-size:13.5px;font-weight:800}
.v-artd .sp-308 :where(.prose) .af-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.v-artd .sp-308 :where(.prose) .af-cols p{margin:0;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--sub)}
.v-artd .sp-308 :where(.prose) .af-cols b{display:block;margin-bottom:4px;font-size:15.5px;color:var(--ink)}

/* 빈 상태 대 실패 */
.v-artd .sp-308 :where(.prose) .ib-empty{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:6px 0 16px}
.v-artd .sp-308 :where(.prose) .em{border-radius:12px;border:1px solid var(--line);overflow:hidden;text-align:center}
.v-artd .sp-308 :where(.prose) .em p{margin:0}
.v-artd .sp-308 :where(.prose) .em-bar{padding:10px 14px;background:var(--soft);font-size:13.5px;font-weight:800;color:var(--ink);text-align:left}
.v-artd .sp-308 :where(.prose) .em-msg{padding:30px 14px 10px;font-size:15px;font-weight:700;color:var(--ink)}
.v-artd .sp-308 :where(.prose) .em-act{display:inline-block;margin:0 0 22px!important;padding:8px 16px;border-radius:8px;font-size:13.5px;font-weight:800}
.v-artd .sp-308 :where(.prose) .em-ok .em-act{background:var(--blue);color:#fff}
.v-artd .sp-308 :where(.prose) .em-err .em-act{border:1.5px solid #e5484d;color:#b3261e}
.v-artd .sp-308 :where(.prose) .em-err .em-msg::before{content:"!";display:block;width:34px;height:34px;margin:0 auto 8px;border-radius:50%;background:#fde3e1;color:#c4282d;line-height:34px;font-weight:800}
.v-artd .sp-308 :where(.prose) .em-ok .em-msg::before{content:"";display:block;width:34px;height:28px;margin:0 auto 10px;border:2px dashed #9aa1b5;border-radius:6px}
.v-artd .sp-308 :where(.prose) .em-k{padding:10px;border-top:1px solid var(--line);font-size:13.5px;font-weight:800;color:var(--sub)}

/* 수정 범위 막대 */
.v-artd .sp-308 :where(.prose) .ib-grow{margin:6px 0 16px}
.v-artd .sp-308 :where(.prose) .gw{display:grid;grid-template-columns:90px 1fr;grid-template-rows:auto auto;column-gap:14px;margin-bottom:10px;align-items:center}
.v-artd .sp-308 :where(.prose) .gw-k{grid-row:1/3;font-size:15px;font-weight:800;color:var(--ink)}
.v-artd .sp-308 :where(.prose) .gw-b{display:block;height:16px;width:var(--w);border-radius:8px;background:linear-gradient(90deg,var(--blue2),var(--blue))}
.v-artd .sp-308 :where(.prose) .gw:nth-child(3) .gw-b{background:linear-gradient(90deg,var(--blue),#e5484d)}
.v-artd .sp-308 :where(.prose) .gw-d{font-size:13.5px;color:var(--sub);margin-top:4px}

/* 자체 검토 기호 */
.v-artd .sp-308 :where(.prose) .ib-self{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 16px}
.v-artd .sp-308 :where(.prose) .sf{padding:18px 16px;border-radius:14px;background:var(--soft)}
.v-artd .sp-308 :where(.prose) .sf b{display:block;margin:12px 0 4px;font-size:16px;color:var(--ink)}
.v-artd .sp-308 :where(.prose) .sf p{margin:0;font-size:14px;line-height:1.55;color:var(--sub)}
.v-artd .sp-308 :where(.prose) .sf-g{position:relative;display:block;width:48px;height:40px}
.v-artd .sp-308 :where(.prose) .g1::before,.v-artd .sp-308 :where(.prose) .g1::after{content:"";position:absolute;bottom:0;width:22px;height:30px;border-radius:11px 11px 4px 4px;background:var(--ink)}
.v-artd .sp-308 :where(.prose) .g1::before{left:0}.v-artd .sp-308 :where(.prose) .g1::after{left:20px;background:var(--blue)}
.v-artd .sp-308 :where(.prose) .g2 i{position:absolute;bottom:0;width:14px;height:26px;border-radius:7px 7px 3px 3px;background:var(--ink)}
.v-artd .sp-308 :where(.prose) .g2 i:nth-child(1){left:0}.v-artd .sp-308 :where(.prose) .g2 i:nth-child(2){left:17px;background:var(--blue)}.v-artd .sp-308 :where(.prose) .g2 i:nth-child(3){left:34px;background:#9aa1b5}
.v-artd .sp-308 :where(.prose) .g3{border:3px solid var(--ink);border-radius:8px;width:40px;height:38px}
.v-artd .sp-308 :where(.prose) .g3::before{content:"";position:absolute;left:0;right:0;top:8px;height:3px;background:var(--ink)}
.v-artd .sp-308 :where(.prose) .g3::after{content:"↻";position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:16px;font-weight:800;color:var(--blue);line-height:24px}

/* 경고 칩 */
.v-artd .sp-308 :where(.prose) .ib-warn{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px!important}
.v-artd .sp-308 :where(.prose) .ib-warn span{padding:9px 14px 9px 36px;border-radius:8px;background:#fff6f6;border:1px solid #f0b4b1;font-size:14.5px;font-weight:800;color:#b3261e;position:relative}
.v-artd .sp-308 :where(.prose) .ib-warn span::before{content:"";position:absolute;left:12px;top:50%;margin-top:-8px;border:8px solid transparent;border-bottom:14px solid #e5484d;border-top:0}
.v-artd .sp-308 :where(.prose) .ib-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-308 :where(.prose) .ib-sum b{display:block;color:var(--ink)}

/* 진행 방식 = 떠오르는 방법 */
.v-artd .sp-308 :where(.prose) .ib-we{margin:36px 0 10px;padding:28px 30px;border-radius:20px;background:linear-gradient(#1b1f3a 0 55%,#1f3a8a);color:#fff}
.v-artd .sp-308 :where(.prose) .iw-k{margin:0 0 6px;font-size:13px;font-weight:800;color:#9fb3ff}
.v-artd .sp-308 :where(.prose) .iw-t{margin:0 0 18px;font-size:20px;font-weight:800;line-height:1.45}
.v-artd .sp-308 :where(.prose) .iw-rise{display:flex;gap:10px;margin-bottom:18px}
.v-artd .sp-308 :where(.prose) .iw-rise span{flex:1;padding:12px 8px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);text-align:center;font-size:14.5px;font-weight:800}
.v-artd .sp-308 :where(.prose) .iw-rise span::before{content:"↑ ";color:#9fb3ff}
.v-artd .sp-308 :where(.prose) .iw-d{margin:0 0 20px;font-size:15.5px;line-height:1.7;color:#d7dcf0}
.v-artd .sp-308 :where(.prose) .iw-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-308 :where(.prose) .iw-btn:hover{background:var(--blue2)}

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

@media (max-width:720px){
  .v-artd .sp-308 :where(.prose) .ib-lead{font-size:18px}
  .v-artd .sp-308 .prose h2{font-size:23px}
  .v-artd .sp-308 :where(.prose) .ib-s{padding-top:46px}
  .v-artd .sp-308 :where(.prose) .bg-top{width:78%}
  .v-artd .sp-308 :where(.prose) .bg-sea{width:100%;padding:20px 20px 30px}
  .v-artd .sp-308 :where(.prose) .ib-head{grid-template-columns:1fr}
  .v-artd .sp-308 :where(.prose) .hd-arrow{width:3px;height:30px;margin:6px auto}
  .v-artd .sp-308 :where(.prose) .hd-arrow::after{right:-6px;top:auto;bottom:-2px;border:7px solid transparent;border-top:10px solid var(--blue);border-bottom:0}
  .v-artd .sp-308 :where(.prose) .tl{flex-wrap:wrap}
  .v-artd .sp-308 :where(.prose) .tl b{width:100%}
  .v-artd .sp-308 :where(.prose) .af-line{flex-wrap:wrap;height:auto;padding:12px 14px;gap:8px}
  .v-artd .sp-308 :where(.prose) .af-chg{margin-left:0}
  .v-artd .sp-308 :where(.prose) .af-cols{grid-template-columns:1fr}
  .v-artd .sp-308 :where(.prose) .ib-empty{grid-template-columns:1fr}
  .v-artd .sp-308 :where(.prose) .gw{grid-template-columns:1fr}
  .v-artd .sp-308 :where(.prose) .gw-k{grid-row:auto}
  .v-artd .sp-308 :where(.prose) .ib-self{grid-template-columns:1fr}
  .v-artd .sp-308 :where(.prose) .ib-we{padding:24px 22px}
  .v-artd .sp-308 :where(.prose) .iw-rise{flex-direction:column}
}