/* 353 실제 데이터와 현장 상황 기반의 사용성 = 시안과 실제 자료 비교 화면(2026-10-16 사장님 '공통틀로 하지마 다 다르게').
   첫머리 눈과 체크 두 칸, 사용 확인 기록(이용 경로, 완료/실수/도움 요청 집계 칸, 질문), 세 역할 원탁, 입력 시점 자,
   대표 자료 시안 대 실제 자료 화면 두 대와 상태 칩, 사례 띠, 두 조건 저울 없는 짝, 진행 방식=시안 세 장 부채, 이용 상황 셋,
   한 화면 대 여러 단계, 상태 추적 줄(실패 갈래), 수정 요청 말 두 개, 현재 방식 대 새 화면 비교 칸 */
.v-artd .sp-353 .prose{font-size:17px}
.v-artd .sp-353 :where(.prose) .rv-lead{margin:0 0 26px;font-size:20px;line-height:1.7;color:var(--ink)}
.v-artd .sp-353 :where(.prose) .rv-lead b{color:var(--blue)}
.v-artd .sp-353 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-353 .prose h2::before,.v-artd .sp-353 .prose h2::after{content:none}
.v-artd .sp-353 :where(.prose) .rv-s{padding:60px 0 4px}
.v-artd .sp-353 :where(.prose) .rv-s>p{margin:0 0 16px}

/* 두 칸 */
.v-artd .sp-353 :where(.prose) .rv-two{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.v-artd .sp-353 :where(.prose) .rv-two>div{padding:22px 24px;font-size:15px;line-height:1.65;color:#3f4555}
.v-artd .sp-353 :where(.prose) .tw-b{background:var(--navy);color:#cfd6f5!important}
.v-artd .sp-353 :where(.prose) .rv-two p{margin:0}
.v-artd .sp-353 :where(.prose) .tw-h{margin:12px 0 6px!important;font-size:18px;font-weight:800;color:var(--ink)}
.v-artd .sp-353 :where(.prose) .tw-b .tw-h{color:#fff}
.v-artd .sp-353 :where(.prose) .rv-two i{display:block;width:40px;height:40px;border-radius:50%;background:var(--blue2) center/24px no-repeat}
.v-artd .sp-353 :where(.prose) .tw-a i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fc4' stroke-width='2'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.v-artd .sp-353 :where(.prose) .tw-b i{background-color:var(--blue);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E")}

/* 사용 확인 기록 */
.v-artd .sp-353 :where(.prose) .rv-obs{margin:22px 0 0;padding:22px 24px;border-radius:18px;background:var(--soft)}
.v-artd .sp-353 :where(.prose) .rv-obs p{margin:0}
.v-artd .sp-353 :where(.prose) .ob-h{margin-bottom:14px!important;font-size:15px;font-weight:800;color:var(--ink)}
.v-artd .sp-353 :where(.prose) .ob-path{display:flex;margin:0 0 16px;padding:0;list-style:none;position:relative}
.v-artd .sp-353 :where(.prose) .ob-path::before{content:"";position:absolute;left:8px;right:8px;top:7px;height:2px;background:#c3c8d6}
.v-artd .sp-353 :where(.prose) .ob-path li{position:relative;flex:1;margin:0;padding:22px 2px 0 0;font-size:13px;font-weight:700;color:var(--sub)}
.v-artd .sp-353 :where(.prose) .ob-path li::before{content:"";position:absolute;left:2px;top:1px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #9aa6c6}
.v-artd .sp-353 :where(.prose) .ob-path li.key{color:var(--ink)}
.v-artd .sp-353 :where(.prose) .ob-path li.key::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 4px var(--blue2)}
.v-artd .sp-353 :where(.prose) .ob-tally{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.v-artd .sp-353 :where(.prose) .ob-tally span{position:relative;padding:12px 14px 34px;border-radius:10px;background:#fff;font-size:14px;font-weight:800;color:var(--ink)}
.v-artd .sp-353 :where(.prose) .ob-tally span::after{content:"";position:absolute;left:14px;bottom:12px;width:58px;height:14px;background:repeating-linear-gradient(90deg,#9aa6c6 0 2px,transparent 2px 8px)}
.v-artd .sp-353 :where(.prose) .ob-d{margin-bottom:12px!important;font-size:15px;line-height:1.65;color:#3f4555}
.v-artd .sp-353 :where(.prose) .ob-q{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.v-artd .sp-353 :where(.prose) .ob-q li{margin:0;padding:5px 11px;border-radius:999px;border:1px solid #c3c8d6;background:#fff;font-size:13px;color:#3f4555}
.v-artd .sp-353 :where(.prose) .ob-q li::before{content:"? ";font-weight:800;color:#1d3fc4}

/* 세 역할 원탁 */
.v-artd .sp-353 :where(.prose) .rv-table{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 20px}
.v-artd .sp-353 :where(.prose) .rt{position:relative;padding:58px 16px 16px;border-radius:16px;border:1px solid var(--line);text-align:center}
.v-artd .sp-353 :where(.prose) .rt b{display:block;font-size:16px;color:var(--ink)}
.v-artd .sp-353 :where(.prose) .rt p{margin:6px 0 0;font-size:14.5px;color:#3f4555}
.v-artd .sp-353 :where(.prose) .av{position:absolute;left:50%;top:14px;width:36px;height:36px;margin-left:-18px;border-radius:50%}
.v-artd .sp-353 :where(.prose) .av::after{content:"";position:absolute;left:50%;top:7px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 13px 0 4px #fff}
.v-artd .sp-353 :where(.prose) .av{overflow:hidden}
.v-artd .sp-353 :where(.prose) .a1{background:#7d93ff}.v-artd .sp-353 :where(.prose) .a2{background:var(--navy)}.v-artd .sp-353 :where(.prose) .a3{background:var(--blue)}

/* 입력 시점 자 */
.v-artd .sp-353 :where(.prose) .rv-when{margin:8px 0 18px;padding:20px 22px;border-radius:14px;border:1px dashed #9aa6c6}
.v-artd .sp-353 :where(.prose) .rv-when p{margin:0}
.v-artd .sp-353 :where(.prose) .wn-axis{display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:3px solid var(--ink);font-size:13px;font-weight:800;color:var(--ink)}
.v-artd .sp-353 :where(.prose) .rv-when ul{display:flex;justify-content:space-around;margin:0;padding:0;list-style:none}
.v-artd .sp-353 :where(.prose) .rv-when li{position:relative;margin:0;padding:22px 12px 0;font-size:14.5px;font-weight:800;color:#1d3fc4}
.v-artd .sp-353 :where(.prose) .rv-when li::before{content:"?";position:absolute;left:50%;top:-12px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;font-size:12px}
.v-artd .sp-353 :where(.prose) .wn-d{margin-top:12px!important;text-align:center;font-size:13.5px;color:var(--sub)}

/* 시안 대 실제 화면 */
.v-artd .sp-353 :where(.prose) .rv-phones{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:8px 0 14px;padding:24px;border-radius:18px;background:var(--soft)}
.v-artd .sp-353 :where(.prose) .ph-k{margin:0 0 10px;text-align:center;font-size:14px;font-weight:800;color:var(--sub)}
.v-artd .sp-353 :where(.prose) .ph.real .ph-k{color:#1d3fc4}
.v-artd .sp-353 :where(.prose) .scr{width:230px;max-width:100%;margin:0 auto;padding:14px 12px;border-radius:24px;border:6px solid var(--ink);background:#fff;min-height:250px}
.v-artd .sp-353 :where(.prose) .it{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.v-artd .sp-353 :where(.prose) .it i{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,#c8d3ff,#7d93ff);font-style:normal}
.v-artd .sp-353 :where(.prose) .it b{font-size:13px;color:var(--ink);line-height:1.35}
.v-artd .sp-353 :where(.prose) .real .it:first-child b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#b3232a}
.v-artd .sp-353 :where(.prose) .it i.none{display:grid;place-items:center;background:var(--soft);border:1.5px dashed #c3c8d6;font-size:9.5px;font-weight:700;color:var(--sub);text-align:center;line-height:1.2}
.v-artd .sp-353 :where(.prose) .it.empty{display:block;margin-top:10px;padding:18px 8px;border:1.5px dashed #c3c8d6;border-radius:10px;text-align:center;font-size:12.5px;color:var(--sub)}
.v-artd .sp-353 :where(.prose) .rv-states{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.v-artd .sp-353 :where(.prose) .rv-states li{margin:0;padding:6px 12px;border-radius:8px;background:var(--navy);color:#fff;font-size:13.5px;font-weight:700}
.v-artd .sp-353 :where(.prose) .rv-states li::before{content:none}

/* 사례 띠 + 두 조건 */
.v-artd .sp-353 :where(.prose) .rv-case{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;margin:6px 0 18px;padding:18px 22px;border-radius:14px;background:var(--blue2)}
.v-artd .sp-353 :where(.prose) .rv-case p{margin:0}
.v-artd .sp-353 :where(.prose) .cs-l{grid-row:1/3;align-self:start;padding:4px 10px;border-radius:999px;background:var(--navy);color:#fff;font-size:12.5px;font-weight:800}
.v-artd .sp-353 :where(.prose) .cs-t{font-weight:800;color:var(--ink)}
.v-artd .sp-353 :where(.prose) .rv-case p:last-child{font-size:15.5px;line-height:1.65;color:#3f4555}
.v-artd .sp-353 :where(.prose) .rv-pair{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 12px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.v-artd .sp-353 :where(.prose) .rv-pair p{margin:0;padding:16px 18px;font-size:15px;color:#3f4555}
.v-artd .sp-353 :where(.prose) .rv-pair p+p{border-left:1px solid var(--line)}
.v-artd .sp-353 :where(.prose) .rv-pair b{display:block;margin-bottom:4px;font-size:16px;color:var(--ink)}

/* 진행 방식 = 시안 부채 */
.v-artd .sp-353 :where(.prose) .rv-hw{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:center;margin:26px 0 8px;padding:28px;border-radius:20px;background:var(--navy);color:#fff}
.v-artd .sp-353 :where(.prose) .hw-fan{position:relative;height:170px}
.v-artd .sp-353 :where(.prose) .hw-fan span{position:absolute;left:50%;bottom:0;width:120px;height:160px;margin-left:-60px;padding:10px;border-radius:10px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:800;transform-origin:50% 100%;box-shadow:0 12px 24px -12px rgba(0,0,0,.6)}
.v-artd .sp-353 :where(.prose) .hw-fan span::after{content:"";position:absolute;left:10px;right:10px;top:34px;height:60px;border-radius:6px;background:linear-gradient(135deg,var(--blue2),#9fb3ff)}
.v-artd .sp-353 :where(.prose) .hw-fan span:nth-child(1){transform:rotate(-14deg) translateX(-30px)}
.v-artd .sp-353 :where(.prose) .hw-fan span:nth-child(2){transform:rotate(0)}
.v-artd .sp-353 :where(.prose) .hw-fan span:nth-child(3){transform:rotate(14deg) translateX(30px)}
.v-artd .sp-353 :where(.prose) .hw-fan span:nth-child(2)::after{background:linear-gradient(135deg,#ffe28a,#f5b400)}
.v-artd .sp-353 :where(.prose) .hw-fan span:nth-child(3)::after{background:linear-gradient(135deg,#c3c8d6,#6b7080)}
.v-artd .sp-353 :where(.prose) .hw-txt p{margin:0}
.v-artd .sp-353 :where(.prose) .hw-k{font-size:13px;font-weight:800;color:#9fb3ff}
.v-artd .sp-353 :where(.prose) .hw-t{margin:8px 0 10px!important;font-size:21px;font-weight:800;line-height:1.4}
.v-artd .sp-353 :where(.prose) .hw-d{margin-bottom:20px!important;font-size:15.5px;line-height:1.65;color:#cfd6f5}
.v-artd .sp-353 :where(.prose) .hw-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-353 :where(.prose) .hw-btn:hover{background:var(--blue2)}

/* 이용 상황 셋 */
.v-artd .sp-353 :where(.prose) .rv-ctx{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 18px;padding:0;list-style:none}
.v-artd .sp-353 :where(.prose) .rv-ctx li{margin:0;padding:52px 14px 16px;border-radius:14px;background:var(--soft) 14px 14px/30px no-repeat;font-size:15.5px}
.v-artd .sp-353 :where(.prose) .rv-ctx li::before{content:none}
.v-artd .sp-353 :where(.prose) .rv-ctx .c1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%231b1f3a' stroke-width='2'%3E%3Ccircle cx='15' cy='10' r='5'/%3E%3Cpath d='M5 27c1-6 5-9 10-9s9 3 10 9M23 4l3 3-3 3'/%3E%3C/svg%3E")}
.v-artd .sp-353 :where(.prose) .rv-ctx .c2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23d23a3a' stroke-width='2'%3E%3Ccircle cx='15' cy='16' r='11'/%3E%3Cpath d='M15 9v8l5 3'/%3E%3C/svg%3E")}
.v-artd .sp-353 :where(.prose) .rv-ctx .c3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%231b1f3a' stroke-width='2'%3E%3Crect x='9' y='3' width='12' height='24' rx='3'/%3E%3Cpath d='M13 23h4'/%3E%3C/svg%3E")}
.v-artd .sp-353 :where(.prose) .rv-note{padding:14px 18px;border-left:5px solid var(--blue);border-radius:0 12px 12px 0;background:#f6f8ff;font-size:15.5px;line-height:1.65}
.v-artd .sp-353 :where(.prose) .rv-note b{display:block;margin-bottom:2px;font-size:13px;color:#1d3fc4}

/* 한 화면 대 여러 단계 */
.v-artd .sp-353 :where(.prose) .rv-split{display:grid;grid-template-columns:1fr 1.6fr;gap:16px;margin:8px 0 18px}
.v-artd .sp-353 :where(.prose) .rv-split>div{padding:18px;border-radius:14px;border:1px solid var(--line);text-align:center}
.v-artd .sp-353 :where(.prose) .sp-k{margin:0 0 12px;font-size:14px;font-weight:800;color:var(--ink)}
.v-artd .sp-353 :where(.prose) .tall{width:90px;margin:0 auto;padding:10px 8px;border-radius:12px;border:3px solid var(--ink)}
.v-artd .sp-353 :where(.prose) .tall i,.v-artd .sp-353 :where(.prose) .row i{display:block;height:9px;margin:6px 0;border-radius:3px;background:#c8d3ff}
.v-artd .sp-353 :where(.prose) .row{display:flex;justify-content:center;gap:14px}
.v-artd .sp-353 :where(.prose) .row span{position:relative;width:70px;padding:10px 8px;border-radius:12px;border:3px solid var(--ink)}
.v-artd .sp-353 :where(.prose) .row span:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:50%;transform:translate(50%,-50%);color:var(--sub);font-weight:800}

/* 상태 추적 줄 */
.v-artd .sp-353 :where(.prose) .rv-track{margin:6px 0 18px;padding:0;list-style:none;border-left:3px solid var(--blue)}
.v-artd .sp-353 :where(.prose) .rv-track li{position:relative;margin:0 0 4px;padding:12px 18px 14px 26px;font-size:15.5px;line-height:1.65;color:#3f4555}
.v-artd .sp-353 :where(.prose) .rv-track li::before{content:"";position:absolute;left:-11px;top:16px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--blue)}
.v-artd .sp-353 :where(.prose) .rv-track b{display:block;color:var(--ink)}
.v-artd .sp-353 :where(.prose) .rv-track li.fail{margin-left:40px;border-left:3px dashed #d23a3a;background:#fff6f6;border-radius:0 12px 12px 0}
.v-artd .sp-353 :where(.prose) .rv-track li.fail::before{left:-54px;border-color:#d23a3a}
.v-artd .sp-353 :where(.prose) .rv-track li.fail b{color:#b3232a}

/* 수정 요청 말 둘 */
.v-artd .sp-353 :where(.prose) .rv-ask{display:grid;gap:14px;margin:8px 0 18px}
.v-artd .sp-353 :where(.prose) .rv-ask p{position:relative;margin:0;padding:16px 18px 16px 58px;border-radius:16px;font-size:15px;line-height:1.65;color:#3f4555}
.v-artd .sp-353 :where(.prose) .rv-ask span{display:block;margin-bottom:6px;font-size:18px;font-weight:800;color:var(--ink)}
.v-artd .sp-353 :where(.prose) .rv-ask p::before{position:absolute;left:18px;top:18px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800}
.v-artd .sp-353 :where(.prose) .ak-x{background:var(--soft)}
.v-artd .sp-353 :where(.prose) .ak-x::before{content:"✕";background:#9aa6c6}
.v-artd .sp-353 :where(.prose) .ak-x span{color:var(--sub);text-decoration:line-through}
.v-artd .sp-353 :where(.prose) .ak-o{background:var(--blue2)}
.v-artd .sp-353 :where(.prose) .ak-o::before{content:"✓";background:var(--blue)}

/* 현재 방식 대 새 화면 */
.v-artd .sp-353 :where(.prose) .rv-cmp{margin:8px 0 18px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.v-artd .sp-353 :where(.prose) .rv-cmp p{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;margin:0;border-top:1px solid var(--line)}
.v-artd .sp-353 :where(.prose) .rv-cmp p:first-child{border-top:0}
.v-artd .sp-353 :where(.prose) .rv-cmp span{padding:11px 12px;text-align:center;font-size:15px;font-weight:700;color:var(--ink)}
.v-artd .sp-353 :where(.prose) .cm-h{background:var(--soft)}
.v-artd .sp-353 :where(.prose) .cm-h span{font-size:13.5px;font-weight:800}
.v-artd .sp-353 :where(.prose) .rv-cmp i{justify-self:center;width:70%;height:10px;border-radius:5px;background:repeating-linear-gradient(90deg,#dfe3ee 0 10px,#eef0f6 10px 20px)}
.v-artd .sp-353 :where(.prose) .rv-rel{margin:40px 0 10px;padding:16px 0 0;border-top:1px solid var(--line);list-style:none}
.v-artd .sp-353 :where(.prose) .rv-rel li{margin:0;padding:5px 0}
.v-artd .sp-353 :where(.prose) .rv-rel li::before{content:none}
.v-artd .sp-353 :where(.prose) .rv-rel a{font-weight:700;text-decoration:none}
.v-artd .sp-353 :where(.prose) .rv-rel a::before{content:"→ ";color:var(--sub)}

@media (max-width:720px){
  .v-artd .sp-353 :where(.prose) .rv-lead{font-size:18px}
  .v-artd .sp-353 .prose h2{font-size:23px}
  .v-artd .sp-353 :where(.prose) .rv-s{padding-top:46px}
  .v-artd .sp-353 :where(.prose) .rv-two{grid-template-columns:1fr}
  .v-artd .sp-353 :where(.prose) .rv-obs{padding:18px 16px}
  .v-artd .sp-353 :where(.prose) .ob-path li{font-size:11.5px}
  .v-artd .sp-353 :where(.prose) .rv-table{grid-template-columns:1fr;gap:8px}
  .v-artd .sp-353 :where(.prose) .rt{padding:14px 14px 14px 62px;text-align:left}
  .v-artd .sp-353 :where(.prose) .av{left:14px;top:50%;margin:-18px 0 0}
  .v-artd .sp-353 :where(.prose) .rv-phones{grid-template-columns:1fr;padding:18px 12px}
  .v-artd .sp-353 :where(.prose) .rv-case{grid-template-columns:1fr}
  .v-artd .sp-353 :where(.prose) .cs-l{grid-row:auto;justify-self:start}
  .v-artd .sp-353 :where(.prose) .rv-pair{grid-template-columns:1fr}
  .v-artd .sp-353 :where(.prose) .rv-pair p+p{border-left:0;border-top:1px solid var(--line)}
  .v-artd .sp-353 :where(.prose) .rv-hw{grid-template-columns:1fr;padding:24px 18px;gap:20px}
  .v-artd .sp-353 :where(.prose) .rv-ctx{grid-template-columns:1fr}
  .v-artd .sp-353 :where(.prose) .rv-ctx li{padding:16px 16px 16px 58px;background-position:16px 50%}
  .v-artd .sp-353 :where(.prose) .rv-split{grid-template-columns:1fr}
  .v-artd .sp-353 :where(.prose) .rv-track li.fail{margin-left:20px}
  .v-artd .sp-353 :where(.prose) .rv-track li.fail::before{left:-34px}
}