/* =========================================================
   services-m2.css — /services 개발 과정 한 장, 두 번째 판(2026-10-12 오후). theme-a.css 뒤에 붙는다(pageCss).
   첫 판(services-m.css, 글·3D 좌우 교대 여섯 칸)은 "품목 페이지와 구별이 안 된다"로 반려 → 참고 사이트를 재서 옮긴 판.

   재서 옮긴 곳(1440 기준)
     Stripe Atlas  https://stripe.com/atlas  — 구간 구조와 글자 규격
       글 기둥 x196 폭 1048(제목·리드는 682) / 작은 제목(eyebrow) 18px·28 포인트색 / 구간 제목 38px·48 -0.2px /
       리드 18px·28 가벼운 굵기 회색 / 항목 제목 15px·24 + 설명 15px·24 / 항목 두 줄 폭 460 간격 128 /
       리드 아래 본문까지 120 / 번호 네 칸 한 줄 / 그 아래 흰 큰 카드 1080×571(기둥보다 살짝 넓음, 그림자)
     Apple Trade In(한국)  https://www.apple.com/kr/shop/trade-in  — 단계 카드와 한글 규격
       바탕 #f5f5f7 위 흰 카드 폭 313 모서리 10 간격 20, 세 장 한 줄 / 카드 안 여백 36 / 그림 위 글 아래 /
       카드 제목 28px·35 semibold / 본문 17px·27 / 구간 위아래 104·100
   옮기면서 바꾼 것 — 포인트색은 사이트 파랑, 글꼴은 사이트 것(Pretendard)이라 굵기는 한 단계 올림(500→700), 폭은 .wrap 1200.
   ========================================================= */
.v-m main{background:#fff}
.v-m .pg-title h1{max-width:900px}

/* 머리 사진 띠(10-12 19시) — 블러 사진 + 남색 막 + 흰 글자. 사진은 미리 블러해 둔 svc-a/m-hero-plan.webp(1920×900) */
.v-m .m-hero{position:relative;isolation:isolate;text-align:center;padding:128px 0 120px;color:#fff;background:#0f1a33 url(https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/m-hero-plan.webp) center/cover no-repeat}
.v-m .m-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,16,35,.46),rgba(10,16,35,.62))}
.v-m .m-hero .eyebrow{margin:0;font-size:18px;line-height:28px;font-weight:600;letter-spacing:0;color:rgba(255,255,255,.78);text-transform:none}
.v-m .m-hero h1{margin:20px auto 0;max-width:816px;font-size:46px;line-height:1.3;font-weight:700;letter-spacing:-1px;color:#fff;word-break:keep-all}
.v-m .m-hero h1 .r{display:inline;background:rgba(255,255,255,.14);color:#9ec1ff;padding:.04em .22em;border-radius:.22em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.v-m .a-steps li{scroll-margin-top:96px}


/* 3판(10-12 19시) 질문 구간 — 작은 제목이 고객의 질문, 제목이 답. 글자 규격은 Atlas 그대로 */
.v-m .a .eyebrow{display:none}                                    /* 부제(구간 작은 제목) 비표시 — 10-12 사장님 '부제는 안 나오게' */
.v-m .a h2{margin-top:0}
/* 01 의뢰 — 10-13 세 칸 한 줄(q-start). 02 의 선 칸(q-docs)과 구별되게 연한 바탕칸. 그림 → 발주처 제공 자료(큰 글자) → 흐름소프트 작업 → 아래 사례 이름 */
.v-m .q-start{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.v-m .q-start li{display:flex;flex-direction:column;background:var(--soft);border-radius:16px;padding:32px 32px 28px}
.v-m .q-start img{display:block;width:52px;height:52px}
.v-m .q-start b{display:block;margin-top:22px;font-size:26px;line-height:34px;font-weight:800;letter-spacing:-.02em;color:var(--ink);word-break:keep-all}
.v-m .q-start span{display:block;margin-top:8px;font-size:16px;line-height:26px;color:#3b4050;word-break:keep-all}
.v-m .q-start a,.v-m .q-start em{display:block;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-style:normal;font-size:16px;line-height:24px;font-weight:700;color:var(--ink);text-decoration:none;word-break:keep-all}
.v-m .q-start li>span{flex:1}
.v-m .q-start small{display:block;margin-bottom:4px;font-size:13px;line-height:20px;font-weight:600;color:var(--sub)}
.v-m .q-start a::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(45deg);vertical-align:2px}
.v-m .q-start a:hover{color:var(--blue)}
.v-m .q-docs{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.v-m .q-docs li{border:1px solid var(--line);border-radius:12px;padding:28px 28px 30px}
.v-m .q-docs img{display:block;width:44px;height:44px}
.v-m .q-docs b{display:block;margin-top:18px;font-size:18px;line-height:26px;font-weight:700;color:var(--ink);word-break:keep-all}
.v-m .q-docs span{display:block;margin-top:8px;font-size:15px;line-height:24px;color:#3b4050;word-break:keep-all}
.v-m .q + .q{padding-top:32px}                                   /* 흰 질문 구간이 연달아 올 때는 112+112 가 아니라 112+32 */
.v-m .a.q-dark{background:var(--navy);color:#fff}                  /* 아래 '구간 공통' 규칙(.v-m .a h2 등)보다 뒤에 와야 하므로 특이도를 한 단계 올림 */
.v-m .a.q-dark .eyebrow{color:#9ec1ff}
.v-m .a.q-dark h2{color:#fff}
.v-m .a.q-dark h2 .r{background:rgba(255,255,255,.14);color:#9ec1ff}
.v-m .a.q-dark .lead{color:rgba(255,255,255,.8)}
.v-m .q-nums{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.v-m .q-nums li{border-top:1px solid rgba(255,255,255,.22);padding-top:24px}
.v-m .q-nums b{display:block;font-size:44px;line-height:52px;font-weight:800;letter-spacing:-.03em;color:#fff}
.v-m .q-nums span{display:block;margin-top:8px;font-size:16px;line-height:26px;font-weight:600;color:rgba(255,255,255,.9)}
.v-m .q-nums a{display:inline-block;margin-top:4px;font-size:14px;line-height:22px;color:rgba(255,255,255,.6);text-decoration:underline;text-underline-offset:3px}
.v-m .q-nums a:hover{color:#fff}

/* 구간 공통 — Atlas 규격 */
.v-m .a{padding:112px 0}
.v-m .a-head{max-width:682px}
.v-m .a .eyebrow{margin:0;font-size:17px;line-height:28px;font-weight:700;letter-spacing:0;color:var(--blue);text-transform:none}
.v-m .a h2{margin:16px 0 0;font-size:38px;line-height:48px;font-weight:700;letter-spacing:-.02em;color:var(--ink);word-break:keep-all}
.v-m .a h2 .r{display:inline;background:var(--blue2);color:var(--blue);padding:.04em .22em;border-radius:.22em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.v-m .a .lead{margin:24px 0 0;font-size:18px;line-height:28px;font-weight:400;color:#3b4050;word-break:keep-all}

/* A 왜 이 순서인가 — Atlas 'Why Atlas' 네 항목 두 줄 */
.v-m .a-points{list-style:none;margin:96px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:56px 128px}
.v-m .a-points li{max-width:460px}
.v-m .a-points img{display:block;width:44px;height:44px}
.v-m .a-points b{display:block;margin-top:18px;font-size:17px;line-height:26px;font-weight:700;color:var(--ink);word-break:keep-all}
.v-m .a-points span{display:block;margin-top:8px;font-size:16px;line-height:26px;color:#3b4050;word-break:keep-all}

/* B 여섯 단계 — Apple 단계 카드. 바탕 연회색, 흰 카드 세 장 두 줄 */
.v-m .a-steps{background:var(--soft)}
.v-m .a-cards{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:none}
.v-m .a-cards li{background:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.v-m .a-cards figure{margin:0;height:232px;display:flex;align-items:center;justify-content:center;background:#fff}
.v-m .a-cards figure img{height:200px;width:auto}
.v-m .c-body{padding:4px 36px 36px;display:flex;flex-direction:column;flex:1}
.v-m .c-body small{display:block;font-size:15px;line-height:22px;font-weight:600;color:var(--sub)}
.v-m .c-body h3{margin:6px 0 0;font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.02em;color:var(--ink);word-break:keep-all}
.v-m .c-body p{margin:12px 0 0;font-size:16px;line-height:26px;color:#3b4050;word-break:keep-all}
.v-m .c-ev{list-style:none;margin:auto 0 0;padding:20px 0 0}
.v-m .c-ev li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5;word-break:keep-all}
.v-m .c-ev li > a,.v-m .c-ev li > span{color:var(--ink);font-weight:600}
.v-m .c-ev li > a{text-decoration:underline;text-decoration-color:var(--blue2);text-underline-offset:3px}
.v-m .c-ev li > a:hover{color:var(--blue);text-decoration-color:var(--blue)}
.v-m .c-ev em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--sub)}

/* C 기간 — Atlas 'How it works' 아래 큰 흰 카드. 표가 카드 안에 */
.v-m .a-card{margin-top:64px;background:#fff;border-radius:16px;padding:8px 28px;box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(20,24,39,.28)}
.v-m .a-tablewrap{overflow-x:auto}
.v-m .a-table{width:100%;border-collapse:collapse;font-size:15px;line-height:24px;min-width:640px}
.v-m .a-table th{padding:18px 12px;text-align:left;font-size:14px;font-weight:700;color:var(--sub);border-bottom:1px solid var(--line);white-space:nowrap}
.v-m .a-table td{padding:20px 12px;border-bottom:1px solid var(--line);vertical-align:middle;color:#3b4050}
.v-m .a-table tr:last-child td{border-bottom:0}
.v-m .a-table td:first-child a{font-weight:700;color:var(--ink);text-decoration:none}
.v-m .a-table td:first-child a:hover{color:var(--blue)}
.v-m .a-table td small{display:block;font-size:13px;line-height:20px;color:var(--sub)}
.v-m .a-table td b{font-size:17px;font-weight:700;color:var(--ink);white-space:nowrap}
.v-m .a-table td:last-child,.v-m .a-table th:last-child{text-align:right}

/* D 결과 — 숫자 여섯 칸 */
.v-m .a-result{border-top:1px solid var(--line)}
.v-m .a-stats{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.v-m .a-stats li{padding:32px 32px 28px;border-radius:12px;background:var(--soft)}
.v-m .a-stats b{display:block;font-size:38px;line-height:48px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.v-m .a-stats span{display:block;margin-top:10px;font-size:16px;line-height:26px;font-weight:600;color:var(--ink);word-break:keep-all}
.v-m .a-stats em{display:block;margin-top:4px;font-style:normal;font-size:14px;line-height:22px;color:var(--sub)}
.v-m .a-more{margin-top:40px;text-align:center}

@media (max-width:1024px){
  .v-m .q-start{grid-template-columns:1fr}
  .v-m .q-docs{grid-template-columns:1fr}
  .v-m .a-cards{grid-template-columns:1fr 1fr}
  .v-m .a-stats{grid-template-columns:1fr 1fr}
  .v-m .a-points{gap:48px 64px}
}
@media (max-width:768px){
  .v-m .m-hero{padding:72px 0 64px}
  .v-m .m-hero .eyebrow{font-size:15px}
  .v-m .m-hero h1{font-size:30px;letter-spacing:-.6px}
  .v-m .a{padding:72px 0}
  .v-m .q-start{margin-top:40px;gap:12px}
  .v-m .q-start li{padding:24px 24px 22px}
  .v-m .q-start b{font-size:22px;line-height:30px;margin-top:16px}
  .v-m .q-docs{margin-top:40px;gap:12px}
  .v-m .q-docs li{padding:22px 22px 24px}
  .v-m .q-nums{grid-template-columns:1fr;gap:20px;margin-top:40px}
  .v-m .q-nums b{font-size:34px;line-height:42px}
  .v-m .a h2{font-size:30px;line-height:40px}
  .v-m .a .lead{font-size:17px;line-height:27px;margin-top:16px}
  .v-m .a-points{grid-template-columns:1fr;gap:36px;margin-top:48px}
  .v-m .a-cards{grid-template-columns:1fr;gap:14px;margin-top:40px}
  .v-m .a-cards figure{height:196px}
  .v-m .a-cards figure img{height:168px}
  .v-m .c-body{padding:0 24px 24px}
  .v-m .c-body h3{font-size:22px;line-height:30px}
  .v-m .a-card{margin-top:40px;padding:4px 16px;border-radius:12px}
  .v-m .a-table{min-width:560px;font-size:14px}
  .v-m .a-table th{padding:14px 8px}
  .v-m .a-table td{padding:14px 8px}
  .v-m .a-table td b{font-size:15px}
  .v-m .a-stats{grid-template-columns:1fr 1fr;gap:10px;margin-top:40px}
  .v-m .a-stats li{padding:20px 18px 18px}
  .v-m .a-stats b{font-size:30px;line-height:38px}
  .v-m .a-stats span{font-size:15px;line-height:24px}
}

/* 10-13 영상 판형(.vs) — 메인(home-a) .row 와 같은 구도: 글 한쪽 + 3:2 영상 한쪽, 구간마다 좌우 교대. 영상 가장자리는 메인처럼 흰색으로 흐리게(mask).
   바탕은 흰색과 연회색(--soft) 교대: 상단 흰, 의뢰 회색, 확정 흰, 여섯 단계 회색, 출시 후 흰, 앱 15건 회색 */
.v-m .vs{padding:112px 0;background:#fff}
.v-m .vs-soft{background:var(--soft)}
.v-m .vs-row{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
.v-m .vs-row.rev .vs-txt{order:2}
.v-m .vs-fig{position:relative;aspect-ratio:3/2;width:100%}
.v-m .vs-fig video{display:block;width:100%;height:100%;object-fit:cover;background:#fff;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;mix-blend-mode:multiply;
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-composite:intersect}
.v-m .vs-soft .vs-fig video{background:#fff;border-radius:24px;-webkit-mask-image:none;mask-image:none;box-shadow:0 30px 70px -36px rgba(20,24,39,.3)}
.v-m .vs h1,.v-m .vs h2{margin:0;font-size:40px;line-height:1.34;font-weight:700;letter-spacing:-.02em;color:var(--ink);word-break:keep-all}
.v-m .vs-hero{padding:96px 0 104px}
.v-m .vs-hero h1{font-size:48px;line-height:1.3;letter-spacing:-1px}
.v-m .vs .r{display:inline;background:var(--blue2);color:var(--blue);padding:.04em .22em;border-radius:.22em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.v-m .vs .lead{margin:24px 0 0;font-size:18px;line-height:30px;color:#3b4050;word-break:keep-all}
.v-m .vs-ev{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.v-m .vs-ev li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.v-m .vs-ev b{flex:none;min-width:84px;font-size:13px;line-height:22px;font-weight:700;color:var(--blue);background:var(--blue2);border-radius:6px;padding:1px 8px;text-align:center}
.v-m .vs-ev a,.v-m .vs-ev em{font-style:normal;font-size:16px;line-height:24px;font-weight:600;color:var(--ink);text-decoration:none}
.v-m .vs-ev a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(45deg);vertical-align:2px}
.v-m .vs-ev a:hover{color:var(--blue)}
.v-m .vs-more{margin-top:32px}
.v-m .vs .a-stats{margin-top:72px}
.v-m .vs-soft .a-stats li{background:#fff}
@media (max-width:1024px){
  .v-m .vs-row{grid-template-columns:1fr;gap:40px}
  .v-m .vs-row.rev .vs-txt{order:0}
  .v-m .vs-fig{max-width:640px;margin-inline:auto}
}
@media (max-width:768px){
  .v-m .vs{padding:64px 0}
  .v-m .vs-hero{padding:48px 0 56px}
  .v-m .vs h1,.v-m .vs-hero h1{font-size:30px;letter-spacing:-.6px}
  .v-m .vs h2{font-size:28px}
  .v-m .vs .lead{font-size:17px;line-height:27px;margin-top:16px}
  .v-m .vs-row{gap:28px}
  .v-m .vs .a-stats{margin-top:40px}
}
.v-m .vs-hero .vs-row{grid-template-columns:1.25fr 1fr;gap:48px}   /* 표어 둘째 줄 '가장 빠른 경로로 개발합니다'가 한 줄에 들어가는 폭 */
@media (max-width:1024px){.v-m .vs-hero .vs-row{grid-template-columns:1fr}}

/* 10-13 품목 페이지(앱부터) 영상 판형 추가분 — 상단 버튼, 읽는 구간(개발 방식 두 칸 + 판단 기준 네 칸) */
.v-m .vs-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.v-m .vs-head{max-width:760px}
.v-m .vs-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;align-items:start}
.v-m .vs-method{background:#fff;border-radius:16px;padding:32px 32px 28px;box-shadow:0 0 0 1px var(--line)}
.v-m .vs-method>b{display:block;font-size:26px;line-height:34px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.v-m .vs-method>p{margin:12px 0 0;font-size:16px;line-height:27px;color:#3b4050;word-break:keep-all}
.v-m .vs-method .vs-ev{margin-top:20px}
.v-m .vs-crit{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.v-m .vs-crit li{background:#fff;border-radius:12px;padding:22px 24px;box-shadow:0 0 0 1px var(--line)}
.v-m .vs-crit b{display:block;font-size:17px;line-height:26px;font-weight:700;color:var(--blue)}
.v-m .vs-crit span{display:block;margin-top:4px;font-size:15px;line-height:24px;color:#3b4050;word-break:keep-all}
@media (max-width:1024px){.v-m .vs-crit{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.v-m .vs-methods{grid-template-columns:1fr;margin-top:36px;gap:12px}.v-m .vs-method{padding:24px}.v-m .vs-method>b{font-size:22px}.v-m .vs-crit{gap:12px}.v-m .vs-crit li{padding:18px}}
@media (max-width:1024px){.v-m .vs-methods{grid-template-columns:1fr}}

/* 10-13 배치 다양화 — 사장님 "구성이 좌우좌우만 있으니까, 상하 하상도 있고 다양하게". 네 가지 배치
   .vs-row       글 왼쪽 + 영상 오른쪽            .vs-row.rev  영상 왼쪽 + 글 오른쪽
   .vs-stack     글 가운데 위 + 넓은 영상 아래(상하)
   .vs-top       넓은 영상 위 + 아래에 제목 왼쪽, 리드와 사례 오른쪽(하상) */
.v-m .vs-stack{text-align:center}
.v-m .vs-stack .vs-txt{max-width:760px;margin:0 auto}
.v-m .vs-stack .vs-fig{max-width:880px;margin:48px auto 0}
.v-m .vs-stack .vs-ev{display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px;border-top:0}
.v-m .vs-stack .vs-ev li{border-bottom:0;padding:8px 0}
.v-m .vs-top .vs-fig{max-width:960px;margin:0 auto}
.v-m .vs-top .vs-txt{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start;margin-top:48px}
.v-m .vs-top .vs-txt .lead{margin-top:6px}
@media (max-width:1024px){.v-m .vs-top .vs-txt{grid-template-columns:1fr;gap:0}.v-m .vs-top .vs-txt .lead{margin-top:20px}}
@media (max-width:768px){.v-m .vs-stack .vs-fig{margin-top:28px}.v-m .vs-top .vs-txt{margin-top:28px}.v-m .vs-stack{text-align:left}.v-m .vs-stack .vs-ev{justify-content:flex-start;flex-direction:column}}

/* 개발 방식과 판단 기준 아이콘(10-13 Codex 3D, img/svc-v/ic-*.webp) */
.v-m .vs-method>img{display:block;width:72px;height:72px;margin-bottom:18px}
.v-m .vs-crit li{display:grid;grid-template-columns:52px 1fr;gap:2px 16px;align-items:center}
.v-m .vs-crit img{grid-row:span 2;width:52px;height:52px}

/* 10-13 플랫폼과 스토어 표지(img/brand, Simple Icons CC0) + 개발 방식 두 칸 */
.v-m .vs-plat{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.v-m .vs-plat span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 16px 7px 12px;font-size:15px;line-height:20px;font-weight:700;color:var(--ink)}
.v-m .vs-store{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:28px}
.v-m .vs-store span{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 22px 10px 10px;font-size:17px;font-weight:700;color:var(--ink);box-shadow:0 10px 30px -18px rgba(20,24,39,.3)}
.v-m .vs-store img{border-radius:11px;box-shadow:0 0 0 1px var(--line)}
.v-m .vs-methods.two{grid-template-columns:1fr 1fr}
.v-m .vs-sub{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.v-m .vs-sub li{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:10px;padding:12px 16px}
.v-m .vs-sub img{flex:none;width:22px;height:22px}
.v-m .vs-sub b{flex:none;min-width:96px;font-size:15px;line-height:22px;font-weight:700;color:var(--ink)}
.v-m .vs-sub span{font-size:14.5px;line-height:22px;color:#3b4050;word-break:keep-all}
@media (max-width:1024px){.v-m .vs-methods.two{grid-template-columns:1fr}}
@media (max-width:768px){.v-m .vs-store{justify-content:flex-start}.v-m .vs-sub li{flex-wrap:wrap}.v-m .vs-sub b{min-width:0}}

/* 10-13 상단 제목 안 로고 + 앱 기능 여덟 칸 */
.v-m .h-os{white-space:nowrap}
.v-m .h-os img{display:inline-block;width:.82em;height:.82em;margin-right:.14em;vertical-align:-.06em}
.v-m .vs-feat{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.v-m .vs-feat li{background:#fff;border-radius:16px;padding:28px 24px 24px;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column}
.v-m .vs-feat img{width:64px;height:64px}
.v-m .vs-feat b{margin-top:16px;font-size:19px;line-height:28px;font-weight:700;color:var(--ink)}
.v-m .vs-feat small{margin-top:6px;font-size:14px;line-height:21px;color:var(--sub);word-break:keep-all}
.v-m .vs-feat small a,.v-m .vs-feat small em{font-style:normal;color:var(--sub);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.v-m .vs-feat small em{text-decoration:none}
.v-m .vs-feat small a:hover{color:var(--blue)}
@media (max-width:1024px){.v-m .vs-feat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.v-m .vs-feat{gap:12px;margin-top:32px}.v-m .vs-feat li{padding:20px 18px}.v-m .vs-feat img{width:52px;height:52px}.v-m .vs-feat b{font-size:17px}}

/* 10-13 로그인과 본인인증 네 묶음 + 기능 아홉 칸(세 칸 세 줄) */
.v-m .vs-auth{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.v-m .vs-auth li{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:12px;background:var(--soft)}
.v-m .vs-soft .vs-auth li{background:#fff;box-shadow:0 0 0 1px var(--line)}
.v-m .vs-auth b{flex:none;width:120px;font-size:15px;line-height:22px;font-weight:700;color:var(--ink)}
.v-m .vs-auth span{display:flex;flex-wrap:wrap;gap:6px}
.v-m .vs-auth i{font-style:normal;font-size:14px;line-height:20px;font-weight:600;color:var(--blue);background:var(--blue2);border-radius:999px;padding:4px 12px}
.v-m .vs-body .vs-auth + .vs-ev{margin-top:20px}
.v-m .vs-feat{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){.v-m .vs-feat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.v-m .vs-auth li{flex-direction:column;align-items:flex-start;gap:8px}.v-m .vs-auth b{width:auto}}

/* 10-13 소셜 로그인 로고 다섯 칸 + 통신 3사 세 칸 */
.v-m .vs-logos{list-style:none;margin:48px auto 0;padding:0;max-width:960px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.v-m .vs-logos li{display:flex;flex-direction:column;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:28px 12px 22px;box-shadow:0 0 0 1px var(--line)}
.v-m .vs-logos img{width:56px;height:56px}
.v-m .vs-logos b{font-size:16px;line-height:22px;font-weight:700;color:var(--ink)}
.v-m .vs-stack > .vs-ev{margin-top:24px}
.v-m .vs-telco{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.v-m .vs-telco li{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--soft);border-radius:16px}
.v-m .vs-telco b{font-size:26px;line-height:32px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
@media (max-width:768px){.v-m .vs-logos{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}.v-m .vs-logos li{padding:18px 8px 14px}.v-m .vs-logos img{width:44px;height:44px}.v-m .vs-telco b{font-size:19px}.v-m .vs-telco{gap:10px}}
.v-m .vs-telco li{background:#fff;box-shadow:0 0 0 1px var(--line)}
.v-m .vs-telco img{display:block;max-width:72%;height:auto;max-height:56px;width:auto}
@media (max-width:768px){.v-m .vs-telco img{max-height:34px}}
.v-m h2 .h-os img[src*="appstore"],.v-m h2 .h-os img[src*="googleplay"]{border-radius:.22em;box-shadow:0 0 0 1px var(--line)}

/* 10-13 제목 한 줄 + 효과(js/vs-fx.js). 상단 제목은 한 줄에 들어가도록 44px, 칩 바탕은 칠하기 효과를 위해 그라데이션 한 장 */
.v-m .vs-hero h1{font-size:44px;letter-spacing:-1px}
.v-m .vs-hero .vs-row{grid-template-columns:1.3fr 1fr}
.v-m [data-fx] .r{background:linear-gradient(var(--blue2),var(--blue2)) no-repeat 0 0;background-size:100% 100%}
.v-m [data-fx] .ln{display:block}
.v-m [data-fx] .ln.clip{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.v-m [data-fx] .in{display:inline-block}
.v-m [data-fx] .h-os img{transform-origin:50% 60%}
@media (max-width:768px){.v-m .vs-hero h1{font-size:30px}}
@media (max-width:1024px){.v-m .vs-hero .vs-row{grid-template-columns:1fr}}
/* 10-13 하이브리드 웹 기술 행 — 로고 셋(HTML5, CSS3, JavaScript) */
.v-m .vs-sub li.multi{flex-wrap:wrap}
.v-m .vs-sub .ics{display:inline-flex;gap:4px;flex:none;font-style:normal}
.v-m .vs-sub li.multi b{min-width:0}
.v-m .vs-sub li.multi span{flex-basis:100%}
/* 10-13 판단 기준 — 조건 + 해당 방식 표지 */
.v-m .vs-crit-h{margin:48px 0 0;font-size:20px;line-height:28px;font-weight:700;color:var(--ink)}
.v-m .vs-crit-h + .vs-crit{margin-top:16px}
.v-m .vs-crit li{grid-template-columns:52px 1fr;grid-template-rows:auto auto auto;align-items:start}
.v-m .vs-crit img{grid-row:span 3}
.v-m .vs-crit em{grid-column:2;justify-self:start;margin-top:10px;font-style:normal;font-size:13px;line-height:20px;font-weight:700;color:#fff;background:var(--blue);border-radius:999px;padding:3px 10px}
.v-m .vs-crit em.nt{background:var(--navy)}
@media (max-width:768px){.v-m .vs-crit{grid-template-columns:1fr}.v-m .vs-crit-h{margin-top:32px;font-size:18px}}
/* 10-13 결제 구간 묶음 — 스토어 로고가 붙은 표지 */
.v-m .vs-auth i.lg{display:inline-flex;align-items:center;gap:6px;padding-left:6px;background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.v-m .vs-auth i.lg img{border-radius:5px}
.v-m .vs-txt .vs-auth{margin-top:28px}
.v-m .vs-txt .vs-auth + .vs-ev{margin-top:20px}
/* 10-13 기기 기능 칸 두 조건 + 부분 네이티브 표지 */
.v-m .vs-crit li.two img{grid-row:span 5}
.v-m .vs-crit li.two span:nth-of-type(2){grid-column:2;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.v-m .vs-crit em.pn{background:#fff;color:var(--navy);box-shadow:0 0 0 1.5px var(--navy)}
.v-m .vs-crit li{align-content:start}

/* 10-13 개발 방식 벤토 — 사장님 "벤또 스타일로". 네 칸 격자: 네이티브(남색, 2×2) · 하이브리드(파랑, 2×1) · 세부 방식(1×1, 2×1) · 판단 기준(1×1, 2×1, 4×1) */
.v-m .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.v-m .bt{position:relative;background:#fff;border-radius:22px;padding:28px;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;min-width:0}
.v-m .bt-native{grid-column:span 2;grid-row:span 2;background:var(--navy);color:#fff;box-shadow:none}
.v-m .bt-hybrid{grid-column:span 2;background:var(--blue);color:#fff;box-shadow:none}
.v-m .bt-w2{grid-column:span 2}
.v-m .bt-w4{grid-column:span 4;display:grid;grid-template-columns:56px auto 1fr auto;align-items:center;column-gap:18px}
.v-m .bt-ic{width:72px;height:72px}
.v-m .bt-t{margin-top:18px;font-size:30px;line-height:38px;font-weight:800;letter-spacing:-.02em}
.v-m .bt-native p,.v-m .bt-hybrid p{margin:12px 0 0;font-size:16px;line-height:27px;color:rgba(255,255,255,.82);word-break:keep-all}
.v-m .bt-native .vs-sub li{background:rgba(255,255,255,.08)}
.v-m .bt-native .vs-sub b{color:#fff}.v-m .bt-native .vs-sub span{color:rgba(255,255,255,.75)}
.v-m .bt-native img.inv{filter:invert(1)}
.v-m .bt-native .vs-ev,.v-m .bt-hybrid .vs-ev{margin-top:auto;padding-top:20px;border-top:0}
.v-m .bt-native .vs-ev li,.v-m .bt-hybrid .vs-ev li{border-bottom-color:rgba(255,255,255,.16)}
.v-m .bt-native .vs-ev li:first-child,.v-m .bt-hybrid .vs-ev li:first-child{border-top:1px solid rgba(255,255,255,.16)}
.v-m .bt-native .vs-ev b,.v-m .bt-hybrid .vs-ev b{background:rgba(255,255,255,.14);color:#fff}
.v-m .bt-native .vs-ev a,.v-m .bt-native .vs-ev em,.v-m .bt-hybrid .vs-ev a,.v-m .bt-hybrid .vs-ev em{color:#fff}
.v-m .bt-native .vs-ev a::after,.v-m .bt-hybrid .vs-ev a::after{border-color:#fff}
.v-m .bt-sm b,.v-m .bt-crit b{display:block;margin-top:16px;font-size:19px;line-height:27px;font-weight:700;color:var(--ink)}
.v-m .bt-sm span,.v-m .bt-crit span{display:block;margin-top:6px;font-size:15px;line-height:24px;color:#3b4050;word-break:keep-all}
.v-m .bt-logos{display:flex;gap:8px}
.v-m .bt-logos img{width:36px;height:36px}
.v-m .bt-part{background:var(--blue2);box-shadow:none}
.v-m .bt-crit small{position:absolute;top:22px;right:24px;font-size:12px;line-height:18px;font-weight:700;color:var(--sub)}
.v-m .bt-crit img{width:56px;height:56px}
.v-m .bt-crit em{align-self:flex-start;margin-top:14px;font-style:normal;font-size:13px;line-height:20px;font-weight:700;color:#fff;background:var(--blue);border-radius:999px;padding:3px 10px}
.v-m .bt-crit em.nt{background:var(--navy)}
.v-m .bt-crit em.pn{background:#fff;color:var(--navy);box-shadow:0 0 0 1.5px var(--navy)}
.v-m .bt-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px}
.v-m .bt-two>div{display:flex;flex-direction:column}
.v-m .bt-w4 b{margin-top:0}.v-m .bt-w4 span{margin-top:0}.v-m .bt-w4 em{margin-top:0;align-self:center}
.v-m .bt-w4 small{position:static;order:5;display:none}
@media (max-width:1024px){
  .v-m .bento{grid-template-columns:repeat(2,1fr)}
  .v-m .bt-native,.v-m .bt-hybrid,.v-m .bt-w2,.v-m .bt-w4{grid-column:span 2}
  .v-m .bt-native{grid-row:auto}
}
@media (max-width:640px){
  .v-m .bento{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .v-m .bt-native,.v-m .bt-hybrid,.v-m .bt-w2,.v-m .bt-w4{grid-column:auto}
  .v-m .bt{padding:22px}
  .v-m .bt-t{font-size:24px;line-height:32px}
  .v-m .bt-two{grid-template-columns:1fr}
  .v-m .bt-w4{display:flex}
  .v-m .bt-w4 b,.v-m .bt-w4 span{margin-top:12px}.v-m .bt-w4 em{align-self:flex-start;margin-top:12px}
}
@media (max-width:640px){
  .v-m .bento{grid-template-columns:1fr 1fr}
  .v-m .bt-native,.v-m .bt-hybrid,.v-m .bt-w2,.v-m .bt-w4{grid-column:span 2}
  .v-m .bt-sm,.v-m .bt-crit{padding:18px}
  .v-m .bt-sm b,.v-m .bt-crit b{font-size:17px;line-height:24px;margin-top:12px}
  .v-m .bt-sm span,.v-m .bt-crit span{font-size:14px;line-height:21px}
  .v-m .bt-crit small{top:16px;right:16px;font-size:11px}
  .v-m .bt-crit img{width:44px;height:44px}
  .v-m .bt-w4{flex-direction:column;align-items:flex-start;text-align:left}
}
/* 10-13 기기 기능 칸 다듬기 — 공통 설명은 제목 아래, 두 조건은 같은 모양의 상자(표지 위, 조건 아래) */
.v-m .bt-two{gap:12px;margin-top:16px}
.v-m .bt-two>div{background:var(--soft);border-radius:14px;padding:16px 18px}
.v-m .bt-two em{margin-top:0}
.v-m .bt-two span{margin-top:10px;font-size:15px;line-height:23px;color:var(--ink);font-weight:600}

/* 10-13 자주 묻는 질문 */
.v-m .vs-faq{margin-top:48px;border-top:1px solid var(--line)}
.v-m .vs-faq details{border-bottom:1px solid var(--line)}
.v-m .vs-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 4px;font-size:19px;line-height:28px;font-weight:700;color:var(--ink)}
.v-m .vs-faq summary::-webkit-details-marker{display:none}
.v-m .vs-faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);margin-top:-6px;transition:transform .2s}
.v-m .vs-faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.v-m .vs-faq summary:hover{color:var(--blue)}
.v-m .vs-faq p{margin:0 0 24px;padding:0 4px;max-width:820px;font-size:16px;line-height:28px;color:#3b4050;word-break:keep-all}
@media (max-width:768px){.v-m .vs-faq{margin-top:28px}.v-m .vs-faq summary{font-size:17px;line-height:25px;padding:20px 2px}}

/* 10-13 품목 페이지 셋(웹, 시스템, AI) 추가분 — 벤토 작은 칸의 아이콘, 글자 칩, 사례 링크 */
.v-m .bt-ic2{width:56px;height:56px}
.v-m .bt-chips{display:flex;flex-wrap:wrap;gap:6px}
.v-m .bt-chips i{font-style:normal;font-size:14px;line-height:20px;font-weight:700;color:var(--blue);background:#fff;border-radius:999px;padding:5px 12px}
.v-m .bt-link{margin-top:auto;padding-top:14px;font-size:14px;line-height:20px;font-weight:600;color:var(--sub);text-decoration:none}
.v-m .bt-link::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);vertical-align:2px}
.v-m .bt-link:hover{color:var(--blue)}
.v-m .vs-head + .vs-auth,.v-m .vs-head + .vs-methods{margin-top:40px}
.v-m .wrap > .vs-auth{max-width:880px}
.v-m .wrap > .vs-auth + .vs-ev{max-width:880px;margin-top:20px}
.v-m .vs-plain .vs-method .vs-auth{margin-top:18px}
/* 10-13 목록만 있는 구간 — 제목 왼쪽, 목록 오른쪽 두 단 */
.v-m .vs-split2{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.v-m .vs-split2 .vs-body .vs-auth{margin-top:0}
.v-m .vs-split2 .vs-body .vs-ev{margin-top:20px}
@media (max-width:1024px){.v-m .vs-split2{grid-template-columns:1fr;gap:28px}}

/* =========================================================
   10-13 품목 페이지별 테마 — 사장님 "디자인은 다 다르게". 앱(기본: 흰 바탕, 파랑 칩)과 구별되게 셋.
   t-web  랜딩·기업 홈페이지: 크림 바탕, 노랑 강조, 가운데 정렬 큰 상단, 짙은 성과 띠
   t-sys  업무 시스템·플랫폼: 남색 전면 바탕, 영상 왼쪽 상단, 흰 카드 영상, 하늘색 강조
   t-ai   AI 기능: 흰 바탕 파랑·보라 빛 번짐, 그라데이션 글자 강조, 그라데이션 테두리 카드
   ========================================================= */

/* ---------- t-web ---------- */
.v-m.t-web .vs-soft{background:#faf6ec}
.v-m.t-web .vs .r,.v-m.t-web [data-fx] .r{background:linear-gradient(#ffe39a,#ffe39a) no-repeat 0 0;color:#5c3b00}
.v-m.t-web .vs-hero{background:radial-gradient(70% 90% at 50% 0,#fff3cf 0,#faf6ec 60%);padding:112px 0 96px;text-align:center}
.v-m.t-web .vs-hero .vs-stack .vs-txt{max-width:980px}
.v-m.t-web .vs-hero h1{font-size:60px;line-height:1.22;letter-spacing:-1.5px}
.v-m.t-web .vs-hero .vs-act{justify-content:center}
.v-m.t-web .vs-hero .vs-fig{max-width:900px;margin-top:56px}
.v-m.t-web .vs-hero .vs-fig video{border-radius:28px;-webkit-mask-image:none;mask-image:none;box-shadow:0 40px 90px -40px rgba(92,59,0,.35)}
.v-m.t-web .vs-head{text-align:center;margin-inline:auto}
.v-m.t-web .vs-split2 .vs-head{text-align:left;margin-inline:0}
.v-m.t-web .bt-native{background:#141827}
.v-m.t-web .bt-hybrid{background:#f5b400;color:#141827}
.v-m.t-web .bt-hybrid p{color:rgba(20,24,39,.78)}
.v-m.t-web .bt-hybrid .vs-sub li{background:rgba(255,255,255,.45)}
.v-m.t-web .bt-hybrid .vs-sub b{color:#141827}.v-m.t-web .bt-hybrid .vs-sub span{color:rgba(20,24,39,.75)}
.v-m.t-web .bt-part{background:#fff1c2}
.v-m.t-web .bt{border-radius:28px}
.v-m.t-web .vs-auth i,.v-m.t-web .vs-ev b{background:#fff1c2;color:#6b4300}
.v-m.t-web .vs-soft .vs-auth li{background:#fff}
.v-m.t-web #result{background:#141827;color:#fff}
.v-m.t-web #result h2{color:#fff}
.v-m.t-web #result .r{background:linear-gradient(#f5b400,#f5b400) no-repeat 0 0;color:#141827}
.v-m.t-web #result .a-stats li{background:rgba(255,255,255,.06)}
.v-m.t-web #result .a-stats b{color:#f5b400;font-size:52px;line-height:60px}
.v-m.t-web #result .a-stats span{color:#fff}
.v-m.t-web #result .a-stats em{color:rgba(255,255,255,.55)}
.v-m.t-web #result .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.v-m.t-web .vs-faq summary::after{border-color:#c48a00}
.v-m.t-web .vs-faq summary:hover{color:#8a5a00}
.v-m.t-web .vs-soft .vs-fig video{box-shadow:0 30px 70px -36px rgba(92,59,0,.35)}
@media (max-width:768px){.v-m.t-web .vs-hero{padding:56px 0 48px}.v-m.t-web .vs-hero h1{font-size:32px;letter-spacing:-.6px}.v-m.t-web .vs-hero .vs-fig{margin-top:32px}.v-m.t-web .vs-head{text-align:left}}

/* ---------- t-sys ---------- */
.v-m.t-sys main{background:#0d1230}
.v-m.t-sys .vs{background:#0d1230;color:#e8eaf6}
.v-m.t-sys .vs-soft{background:#121a3f}
.v-m.t-sys .vs h1,.v-m.t-sys .vs h2{color:#fff}
.v-m.t-sys .vs .lead{color:rgba(232,234,246,.72)}
.v-m.t-sys .vs .r,.v-m.t-sys [data-fx] .r{background:linear-gradient(rgba(110,150,255,.22),rgba(110,150,255,.22)) no-repeat 0 0;color:#9ec1ff}
.v-m.t-sys .vs-hero{background:radial-gradient(60% 80% at 20% 30%,#1c2a6b 0,#0d1230 65%)}
.v-m.t-sys .vs-fig video{border-radius:24px;-webkit-mask-image:none;mask-image:none;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.v-m.t-sys .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.v-m.t-sys .btn-primary{background:#2e5bff}
.v-m.t-sys .bt{background:#161f4a;box-shadow:0 0 0 1px rgba(255,255,255,.08);border-radius:14px}
.v-m.t-sys .bt-native{background:#2e5bff;box-shadow:none}
.v-m.t-sys .bt-hybrid{background:#1d2a6a;box-shadow:0 0 0 1px rgba(158,193,255,.35)}
.v-m.t-sys .bt-part{background:#1b2558}
.v-m.t-sys .bt-sm b,.v-m.t-sys .bt-crit b{color:#fff}
.v-m.t-sys .bt-sm span{color:rgba(232,234,246,.7)}
.v-m.t-sys .bt-link{color:#9ec1ff}
.v-m.t-sys .bt-logos img{background:#fff;border-radius:8px;padding:5px}
.v-m.t-sys .bt-native .vs-sub li{background:rgba(255,255,255,.14)}
.v-m.t-sys .vs-auth li{background:rgba(255,255,255,.05)!important;box-shadow:0 0 0 1px rgba(255,255,255,.07)!important}
.v-m.t-sys .vs-auth b{color:#fff}
.v-m.t-sys .vs-auth i{background:rgba(158,193,255,.14);color:#b9d0ff}
.v-m.t-sys .vs-ev{border-top-color:rgba(255,255,255,.12)}
.v-m.t-sys .vs-ev li{border-bottom-color:rgba(255,255,255,.12)}
.v-m.t-sys .vs-ev b{background:rgba(158,193,255,.14);color:#b9d0ff}
.v-m.t-sys .vs-ev a,.v-m.t-sys .vs-ev em{color:#fff}
.v-m.t-sys .vs-ev a::after{border-color:#9ec1ff}
.v-m.t-sys .a-stats li{background:rgba(255,255,255,.05)!important;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.v-m.t-sys .a-stats b{color:#9ec1ff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.04em}
.v-m.t-sys .a-stats span{color:#fff}.v-m.t-sys .a-stats em{color:rgba(232,234,246,.55)}
.v-m.t-sys .vs-faq,.v-m.t-sys .vs-faq details{border-color:rgba(255,255,255,.12)}
.v-m.t-sys .vs-faq summary{color:#fff}.v-m.t-sys .vs-faq summary:hover{color:#9ec1ff}
.v-m.t-sys .vs-faq summary::after{border-color:#9ec1ff}
.v-m.t-sys .vs-faq p{color:rgba(232,234,246,.75)}
.v-m.t-sys .vs-head h2::before{content:"";display:block;width:36px;height:3px;margin-bottom:20px;background:#2e5bff;border-radius:2px}

/* ---------- t-ai ---------- */
.v-m.t-ai .vs-soft{background:#f6f5ff}
.v-m.t-ai .vs-hero{background:radial-gradient(45% 70% at 85% 30%,#e3e8ff 0,rgba(255,255,255,0) 70%),radial-gradient(40% 60% at 60% 95%,#efe6ff 0,rgba(255,255,255,0) 70%),#fff}
.v-m.t-ai .vs .r,.v-m.t-ai [data-fx] .r{background:linear-gradient(90deg,#2e5bff,#8b5cf6) no-repeat 0 0;-webkit-background-clip:text;background-clip:text;color:transparent;padding:0}
.v-m.t-ai [data-fx] .r .ch{color:transparent}
.v-m.t-ai .bt,.v-m.t-ai .vs-auth li,.v-m.t-ai .a-stats li{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#c7d2ff,#e3d3ff) border-box;border:1.5px solid transparent;box-shadow:none}
.v-m.t-ai .vs-soft .vs-auth li{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#c7d2ff,#e3d3ff) border-box}
.v-m.t-ai .bt{border-radius:24px}
.v-m.t-ai .bt-native{background:linear-gradient(140deg,#1b1f3a,#3b2a80);border:0}
.v-m.t-ai .bt-hybrid{background:linear-gradient(140deg,#2e5bff,#8b5cf6);border:0}
.v-m.t-ai .bt-part{background:linear-gradient(#f3efff,#f3efff) padding-box,linear-gradient(135deg,#c7d2ff,#e3d3ff) border-box}
.v-m.t-ai .bt-chips i{background:#fff;color:#6d3fe0;box-shadow:0 0 0 1px #e3d3ff}
.v-m.t-ai .vs-auth i,.v-m.t-ai .vs-ev b{background:#f0ebff;color:#5b34d6}
.v-m.t-ai .vs-fig video{border-radius:28px;-webkit-mask-image:none;mask-image:none;box-shadow:0 30px 80px -40px rgba(91,52,214,.45)}
.v-m.t-ai .vs-faq summary::after{border-color:#8b5cf6}
.v-m.t-ai .vs-faq summary:hover{color:#6d3fe0}
.v-m.t-ai .vs-ev a::after{border-color:#8b5cf6}
/* 10-13 테마 정정 — AI 강조는 글자 오림 대신 파랑·보라 그라데이션 칩(글자 효과와 충돌), 시스템 버튼 규칙은 영상 구간 안으로만, 홈페이지 성과는 네 칸 */
.v-m.t-ai .vs .r,.v-m.t-ai [data-fx] .r{background:linear-gradient(90deg,#e1e7ff,#efe2ff) no-repeat 0 0;-webkit-background-clip:border-box;background-clip:border-box;color:#5b34d6;padding:.04em .22em}
.v-m.t-ai [data-fx] .r .ch{color:inherit}
.v-m.t-sys .btn-ghost{color:inherit;border-color:inherit}
.v-m.t-sys .vs .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.v-m.t-web #result .btn-ghost{background:transparent}
.v-m.t-web #result .a-stats{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.v-m.t-web #result .a-stats{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   10-13 다듬기 부품 — 사장님 "디자인도 내용도 다듬어야". 단어 칩 목록 일색 대신 구간 성격에 맞는 넷 + 로고 줄.
   강조색은 변수(--ac 진한 강조, --ac2 연한 바탕, --cd 카드 바탕, --tx 본문, --ln 선)로, 테마마다 덮어씀
   ========================================================= */
.v-m{--ac:#2e5bff;--ac2:#dfe6ff;--cd:#fff;--tx:#3b4050;--hd:#141827;--ln:#e4e6ee}
.v-m.t-web{--ac:#c48a00;--ac2:#fff1c2;--cd:#fff}
.v-m.t-sys{--ac:#9ec1ff;--ac2:rgba(158,193,255,.14);--cd:#161f4a;--tx:rgba(232,234,246,.75);--hd:#fff;--ln:rgba(255,255,255,.1)}
.v-m.t-ai{--ac:#6d3fe0;--ac2:#efe9ff;--cd:#fff}
/* 문장 목록 — 체크 표시 + 한 문장 */
.v-m .vs-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.v-m .vs-list li{position:relative;padding-left:34px;font-size:17px;line-height:28px;color:var(--hd);font-weight:500;word-break:keep-all}
.v-m .vs-list li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--ac2)}
.v-m .vs-list li::after{content:"";position:absolute;left:8px;top:8px;width:5px;height:9px;border-right:2px solid var(--ac);border-bottom:2px solid var(--ac);transform:rotate(45deg)}
.v-m .vs-list + .vs-ev,.v-m .vs-list + .vs-logostrip{margin-top:24px}
.v-m .vs-stack .vs-list{max-width:640px;margin-inline:auto;text-align:left}
/* 번호 단계 — 가로(기본)와 세로(.v) */
.v-m .vs-steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:none}
.v-m .vs-steps li{position:relative;background:var(--cd);border-radius:20px;padding:28px 24px 26px;box-shadow:0 0 0 1px var(--ln)}
.v-m .vs-steps li i{display:block;font-style:normal;font-size:14px;line-height:20px;font-weight:800;letter-spacing:.06em;color:var(--ac)}
.v-m .vs-steps li b{display:block;margin-top:14px;font-size:20px;line-height:28px;font-weight:800;color:var(--hd)}
.v-m .vs-steps li span{display:block;margin-top:8px;font-size:15px;line-height:25px;color:var(--tx);word-break:keep-all}
.v-m .vs-steps li:not(:last-child)::after{content:"";position:absolute;top:38px;right:-13px;width:10px;height:10px;border-top:2px solid var(--ac);border-right:2px solid var(--ac);transform:rotate(45deg);z-index:1}
.v-m .vs-stack .vs-steps{grid-template-columns:repeat(3,1fr);max-width:960px;margin-inline:auto;text-align:left}
.v-m .vs-steps + .vs-ev{margin-top:24px}
.v-m .vs-stack .vs-steps + .vs-ev{justify-content:center}
.v-m .vs-steps.v{grid-template-columns:1fr;gap:0;margin-top:28px;border-left:2px solid var(--ac2);padding-left:0}
.v-m .vs-steps.v li{background:none;box-shadow:none;border-radius:0;padding:4px 0 22px 28px}
.v-m .vs-steps.v li::after{display:none}
.v-m .vs-steps.v li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--ac)}
.v-m .vs-steps.v li b{margin-top:4px;font-size:18px}
/* 아이콘 카드 */
.v-m .vs-cards{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:16px}
.v-m .vs-cards.c2{grid-template-columns:repeat(2,1fr)}.v-m .vs-cards.c3{grid-template-columns:repeat(3,1fr)}.v-m .vs-cards.c4{grid-template-columns:repeat(4,1fr)}
.v-m .vs-cards li{display:flex;flex-direction:column;background:var(--cd);border-radius:20px;padding:28px 26px 24px;box-shadow:0 0 0 1px var(--ln)}
.v-m .vs-cards .cd-ic{width:56px;height:56px}
.v-m .vs-cards b{margin-top:16px;font-size:20px;line-height:28px;font-weight:800;color:var(--hd)}
.v-m .vs-cards span{margin-top:8px;font-size:15px;line-height:25px;color:var(--tx);word-break:keep-all}
.v-m.t-sys .vs-cards .bt-link{color:#9ec1ff}
/* 전후 비교표 */
.v-m .vs-compare{margin-top:48px;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px var(--ln);background:var(--cd)}
.v-m .vs-compare .cp-h,.v-m .vs-compare li{display:grid;grid-template-columns:1fr 1fr}
.v-m .vs-compare .cp-h span,.v-m .vs-compare .cp-h b{padding:18px 28px;font-size:15px;line-height:22px;font-weight:800}
.v-m .vs-compare .cp-h span{color:var(--tx);background:rgba(128,128,140,.08)}
.v-m .vs-compare .cp-h b{color:#fff;background:var(--ac)}
.v-m.t-web .vs-compare .cp-h b,.v-m.t-sys .vs-compare .cp-h b{color:#141827}
.v-m .vs-compare ul{list-style:none;margin:0;padding:0}
.v-m .vs-compare li{border-top:1px solid var(--ln)}
.v-m .vs-compare li span,.v-m .vs-compare li b{padding:20px 28px;font-size:16px;line-height:26px;word-break:keep-all}
.v-m .vs-compare li span{color:var(--tx);text-decoration:line-through;text-decoration-color:rgba(128,128,140,.35)}
.v-m .vs-compare li b{color:var(--hd);font-weight:700;background:linear-gradient(90deg,var(--ac2),transparent 85%)}
.v-m .vs-compare li b small{display:block;margin-top:2px;font-size:13px;font-weight:600;color:var(--ac)}
.v-m .vs-top .vs-compare{margin-top:0}
/* 로고 줄 */
.v-m .vs-logostrip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.v-m .vs-logostrip li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:12px;background:var(--cd);box-shadow:0 0 0 1px var(--ln);font-size:14px;font-weight:700;color:var(--hd)}
.v-m .vs-logostrip li img{width:22px;height:22px}
/* 영상이 지나치게 큰 배치 줄이기 */
.v-m .vs-stack .vs-fig{max-width:760px}
.v-m .vs-top .vs-fig{max-width:820px}
@media (max-width:1024px){
  .v-m .vs-steps,.v-m .vs-stack .vs-steps{grid-template-columns:1fr 1fr}
  .v-m .vs-steps li:not(:last-child)::after{display:none}
  .v-m .vs-cards.c3,.v-m .vs-cards.c4{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .v-m .vs-steps,.v-m .vs-stack .vs-steps,.v-m .vs-cards.c2,.v-m .vs-cards.c3,.v-m .vs-cards.c4{grid-template-columns:1fr}
  .v-m .vs-compare .cp-h span,.v-m .vs-compare .cp-h b,.v-m .vs-compare li span,.v-m .vs-compare li b{padding:14px 14px;font-size:14px;line-height:22px}
  .v-m .vs-list li{font-size:16px;line-height:26px}
}

/* =========================================================
   10-13 '영상 위 글 아래(.vs-top)' 배치 교체 — 사장님 "담당자가 직접 수정하는 콘텐츠 관리 이 부분이 디자인이 공통적으로 다 마음에 안 들어".
   넓은 영상 아래에 제목이 오던 배치(제목이 영상 뒤에 읽힘, 아래 두 단이 비어 보임)를 버리고:
   제목 먼저 → 그 아래 둥근 큰 판 하나 안에 영상(왼쪽)과 설명(오른쪽). 마크업은 그대로(영상, 글), 글 상자를 display:contents 로 풀어 격자에 배치
   ========================================================= */
.v-m .vs-top{display:grid;grid-template-columns:1.15fr 1fr;grid-template-areas:"t t" "f b";column-gap:0;align-items:center;position:relative}
.v-m .vs-top::before{content:"";grid-area:2/1/3/3;align-self:stretch;border-radius:32px;background:var(--pnl,#f5f6fa)}
.v-m .vs-soft .vs-top::before{background:var(--pnl2,#fff);box-shadow:0 0 0 1px var(--ln)}
.v-m .vs-top .vs-txt{display:contents}
.v-m .vs-top h2{grid-area:t;margin:0 0 40px}
.v-m .vs-top .vs-fig{grid-area:f;position:relative;z-index:1;max-width:none;width:auto;margin:0;padding:28px 0 28px 28px}
.v-m .vs-top .vs-fig video{border-radius:22px;-webkit-mask-image:none;mask-image:none;box-shadow:none;background:#fff}
.v-m .vs-top .vs-body{grid-area:b;position:relative;z-index:1;padding:40px 48px 40px 44px}
.v-m .vs-top .vs-body > :first-child{margin-top:0}
.v-m .vs-top .vs-body .lead{margin-top:0}
.v-m .vs-top .vs-compare{margin-top:0}
.v-m.t-web{--pnl:#faf6ec;--pnl2:#fff}
.v-m.t-sys{--pnl:#121a3f;--pnl2:#0d1230}
.v-m.t-ai{--pnl:#f6f5ff;--pnl2:#fff}
.v-m.t-sys .vs-top::before{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
@media (max-width:1024px){
  .v-m .vs-top{grid-template-columns:1fr;grid-template-areas:"t" "f" "b"}
  .v-m .vs-top::before{grid-area:2/1/4/2}
  .v-m .vs-top .vs-fig{padding:20px 20px 0}
  .v-m .vs-top .vs-body{padding:24px 24px 28px}
}
@media (max-width:768px){.v-m .vs-top h2{margin-bottom:24px}.v-m .vs-top::before{border-radius:24px}}

/* =========================================================
   10-13 구간별 고유 디자인 다섯 — 사장님 "디자인 자꾸 똑같은 거 찍어내지 말라고". 한 배치로 묶지 않고 내용대로
   ========================================================= */
/* (1) 서비스 출시 후 — 운영 기간 막대 */
.v-m .op-head{display:grid;grid-template-columns:1fr 440px;gap:64px;align-items:center}
.v-m .op-fig{max-width:440px}
.v-m .op-bars{list-style:none;margin:56px 0 0;padding:0;display:grid;gap:14px}
.v-m .op-bars li{display:grid;grid-template-columns:150px 1fr 96px 150px;align-items:center;gap:20px;padding:18px 24px;border-radius:16px;background:var(--soft)}
.v-m .op-bars a{font-size:17px;font-weight:800;color:var(--ink);text-decoration:none}
.v-m .op-bars a:hover{color:var(--blue)}
.v-m .op-bars .bar{height:14px;border-radius:999px;background:#e4e8f6;overflow:hidden}
.v-m .op-bars .bar i{display:block;height:100%;width:var(--w);border-radius:999px;background:linear-gradient(90deg,#7c9bff,var(--blue))}
.v-m .op-bars b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--blue);text-align:right}
.v-m .op-bars span{font-size:14px;color:var(--sub)}
@supports (animation-timeline:view()){
  .v-m .op-bars .bar i{animation:opgrow linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
  @keyframes opgrow{from{width:0}to{width:var(--w)}}
}
@media (max-width:1024px){.v-m .op-head{grid-template-columns:1fr;gap:32px}.v-m .op-fig{max-width:560px}}
@media (max-width:768px){.v-m .op-bars li{grid-template-columns:1fr auto;gap:8px 12px;padding:16px}.v-m .op-bars .bar{grid-column:1/-1;order:3}.v-m .op-bars span{grid-column:1/-1;order:4}.v-m .op-bars b{font-size:18px}}

/* (2) 앱 생체인증과 앱 잠금 — 인증 방식 네 칸(그린 SVG) */
.v-m .au-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.v-m .au-tiles{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.v-m .au-tiles li{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 8px 18px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.v-m .au-tiles li:nth-child(-n+2){background:var(--navy);box-shadow:none}
.v-m .au-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--blue2);color:var(--blue)}
.v-m .au-tiles li:nth-child(-n+2) .au-ic{background:rgba(255,255,255,.1);color:#9ec1ff}
.v-m .au-ic svg{width:32px;height:32px}
.v-m .au-tiles b{margin-top:12px;font-size:17px;font-weight:800;color:var(--ink)}
.v-m .au-tiles li:nth-child(-n+2) b{color:#fff}
.v-m .au-tiles small{margin-top:2px;font-size:12.5px;font-weight:600;color:var(--sub)}
.v-m .au-tiles li:nth-child(-n+2) small{color:rgba(255,255,255,.6)}
.v-m .au-note{margin:18px 0 0;font-size:16px;line-height:26px;color:#3b4050}
.v-m .au-note + .vs-ev{margin-top:16px}
@media (max-width:1024px){.v-m .au-wrap{grid-template-columns:1fr;gap:32px}}
@media (max-width:520px){.v-m .au-tiles{grid-template-columns:repeat(2,1fr)}}

/* (3) 홈페이지 콘텐츠 관리 — 관리자 화면 창 모형 */
.v-m .cms-win{max-width:1000px;margin:48px auto 0;border-radius:22px;background:#fff;box-shadow:0 0 0 1px #eadfca,0 40px 90px -50px rgba(92,59,0,.45);overflow:hidden}
.v-m .cms-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;background:#f6efdd;border-bottom:1px solid #eadfca}
.v-m .cms-bar i{width:11px;height:11px;border-radius:50%;background:#e4d6b6}
.v-m .cms-bar i:nth-child(1){background:#f08b7f}.v-m .cms-bar i:nth-child(2){background:#f5c451}.v-m .cms-bar i:nth-child(3){background:#7fcf8a}
.v-m .cms-bar span{margin-left:12px;font-size:13px;font-weight:700;color:#8a6a2b}
.v-m .cms-body{display:grid;grid-template-columns:210px 1fr}
.v-m .cms-side{list-style:none;margin:0;padding:18px 12px;border-right:1px solid #f0e7d3;background:#fffcf4;display:grid;align-content:start;gap:4px}
.v-m .cms-side li{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;font-size:15px;font-weight:700;color:#5c4a23}
.v-m .cms-side li span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#fff1c2;color:#a06d00}
.v-m .cms-side li span svg{width:17px;height:17px}
.v-m .cms-side li.on{background:#fff1c2}
.v-m .cms-side li.on span{background:#f5b400;color:#fff}
.v-m .cms-main{padding:18px}
.v-m .cms-main .vs-fig{max-width:none}
.v-m .cms-main video{border-radius:14px!important;-webkit-mask-image:none!important;mask-image:none!important;box-shadow:none!important}
.v-m .cms-note{max-width:720px;margin:28px auto 0;text-align:center;font-size:17px;line-height:28px;color:#3b4050;word-break:keep-all}
.v-m .cms-note + .vs-ev{max-width:720px;margin:16px auto 0}
@media (max-width:768px){.v-m .cms-body{grid-template-columns:1fr}.v-m .cms-side{grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid #f0e7d3}.v-m .cms-side li{font-size:14px;padding:8px}.v-m .cms-note{text-align:left}}

/* (4) 업무 시스템 매뉴얼과 교육 — 문서 표지 부채꼴 */
.v-m .doc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.v-m .doc-fan{position:relative;height:250px;margin-top:36px}
.v-m .doc{position:absolute;top:0;width:200px;height:236px;padding:22px 20px;border-radius:14px;background:#fff;color:#141827;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);display:flex;flex-direction:column}
.v-m .doc::after{content:"";position:absolute;right:0;top:0;width:34px;height:34px;background:linear-gradient(225deg,#0d1230 50%,#dfe6ff 50%);border-top-right-radius:14px}
.v-m .doc i{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.08em;color:#2e5bff}
.v-m .doc b{margin-top:auto;font-size:20px;line-height:27px;font-weight:800}
.v-m .doc span{margin-top:6px;font-size:13.5px;line-height:20px;color:#6b7080}
.v-m .doc::before{content:"";position:absolute;left:20px;right:20px;top:58px;height:62px;background:repeating-linear-gradient(#e4e6ee 0 2px,transparent 2px 14px)}
.v-m .doc.d1{left:0;transform:rotate(-6deg);z-index:1}
.v-m .doc.d2{left:150px;transform:rotate(0);z-index:2;top:-8px}
.v-m .doc.d3{left:300px;transform:rotate(6deg);z-index:3;background:#2e5bff;color:#fff}
.v-m .doc.d3 i{color:#cfe0ff}.v-m .doc.d3 span{color:rgba(255,255,255,.75)}
.v-m .doc.d3::before{background:repeating-linear-gradient(rgba(255,255,255,.35) 0 2px,transparent 2px 14px)}
.v-m .doc.d3::after{background:linear-gradient(225deg,#0d1230 50%,#6f8dff 50%)}
.v-m .doc-dl{display:grid;grid-template-columns:84px 1fr;gap:10px 16px;margin:28px 0 0}
.v-m .doc-dl dt{font-size:14px;font-weight:800;color:#9ec1ff}
.v-m .doc-dl dd{margin:0;font-size:16px;line-height:24px;color:#fff}
.v-m .doc-dl + .vs-ev{margin-top:20px}
.v-m.t-sys .vs-soft .doc::after{background:linear-gradient(225deg,#121a3f 50%,#dfe6ff 50%)}
.v-m.t-sys .vs-soft .doc.d3::after{background:linear-gradient(225deg,#121a3f 50%,#6f8dff 50%)}
@media (max-width:1024px){.v-m .doc-wrap{grid-template-columns:1fr;gap:32px}.v-m .doc-wrap .doc-fig{order:2}}
@media (max-width:640px){.v-m .doc-fan{height:auto;display:grid;gap:10px}.v-m .doc{position:relative;left:0!important;top:0!important;transform:none!important;width:auto;height:auto;min-height:120px}.v-m .doc::before{display:none}.v-m .doc b{margin-top:10px}}

/* (5) AI 근거 기반 답변 — 두 대화 화면 비교 */
.v-m .chat-head{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center}
.v-m .chat-fig{max-width:420px}
.v-m .chat-cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.v-m .chat{border-radius:26px;padding:22px 22px 26px;display:flex;flex-direction:column;gap:12px}
.v-m .chat.gen{background:#f2f2f6}
.v-m .chat.rag{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#7c9bff,#a77bff) border-box;border:2px solid transparent;box-shadow:0 30px 70px -40px rgba(91,52,214,.5)}
.v-m .chat-t{align-self:flex-start;font-size:13px;font-weight:800;padding:5px 12px;border-radius:999px;background:#e2e2ea;color:#5a5a6a;margin-bottom:6px}
.v-m .chat.rag .chat-t{background:linear-gradient(90deg,#2e5bff,#8b5cf6);color:#fff}
.v-m .chat p{margin:0;max-width:86%;padding:12px 16px;border-radius:18px;font-size:15.5px;line-height:24px;word-break:keep-all}
.v-m .chat .q{align-self:flex-end;background:#141827;color:#fff;border-bottom-right-radius:6px}
.v-m .chat .a{align-self:flex-start;background:#fff;color:#141827;border-bottom-left-radius:6px;box-shadow:0 0 0 1px #e4e6ee}
.v-m .chat.rag .a{background:#f6f3ff;box-shadow:none}
.v-m .chat .a em{display:block;margin-top:6px;font-style:normal;font-size:12.5px;font-weight:700;color:#c2410c}
.v-m .chat.rag .a em{color:#6d3fe0}
.v-m .chat .src{display:flex;align-items:center;gap:6px;margin-top:8px;padding:7px 10px;border-radius:10px;background:#fff;font-size:12.5px;font-weight:700;color:#5b34d6;box-shadow:0 0 0 1px #e3d3ff}
.v-m .chat .src::before{content:"";width:12px;height:14px;border-radius:2px;background:linear-gradient(#a77bff,#7c9bff)}
.v-m .chat-note{margin:20px 0 0;font-size:14.5px;line-height:23px;color:var(--sub)}
@media (max-width:1024px){.v-m .chat-head{grid-template-columns:1fr;gap:28px}.v-m .chat-fig{max-width:560px}}
@media (max-width:768px){.v-m .chat-cmp{grid-template-columns:1fr}}

/* 1, 3, 6단계 카드의 영상(2026-10-14, 삭제한 세 구간의 영상을 카드 그림 자리로) — 그림과 같은 높이 */
.v-m .a-cards figure video{width:100%;height:100%;object-fit:contain;display:block}

/* 단계 카드의 사례(.c-ev) 보정(2026-10-14 사장님 '디자인 좀 보정, 너무 이상해') — 위 테두리 선과 밑줄 글을 버리고 연회색 둥근 상자 하나로.
   사례 이름은 위에 작은 파란 글, 내용은 아래 굵은 글, 링크가 있으면 상자 전체를 누를 수 있고 오른쪽에 화살표. (.a-cards li 규칙이 이 li 에도 걸리므로 같은 깊이로 덮음) */
.v-m .a-cards .c-ev{margin:auto 0 0;padding:20px 0 0}
.v-m .a-cards .c-ev li{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 44px 14px 16px;border:0;border-radius:12px;background:var(--soft);overflow:visible;transition:background .15s}
.v-m .a-cards .c-ev em{order:-1;font-style:normal;font-size:12px;line-height:1.4;font-weight:700;color:var(--blue)}
.v-m .a-cards .c-ev li > a,.v-m .a-cards .c-ev li > span{font-size:14.5px;line-height:1.5;font-weight:600;color:var(--ink);text-decoration:none}
.v-m .a-cards .c-ev li > a::before{content:"";position:absolute;inset:0;border-radius:12px}
.v-m .a-cards .c-ev li > a::after{content:"";position:absolute;right:16px;top:50%;width:16px;height:16px;margin-top:-8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' stroke='%232e5bff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .15s}
.v-m .a-cards .c-ev li:has(> a):hover{background:var(--blue2)}
.v-m .a-cards .c-ev li:has(> a):hover > a::after{transform:translateX(3px)}
.v-m .a-cards .c-ev li:not(:has(> a)){padding-right:16px}

/* 여섯 단계 = 세로 리스트(2026-10-14 사장님 '리스트가 나을까 그리드가 나을까, 호버 디자인 별로' → 리스트, 호버 제거).
   흰 판 하나 안에 단계 여섯 줄. 줄 = 왼쪽 번호 원(세로선으로 다음 단계와 연결) + 가운데 제목, 설명(항상 표출), 사례 상자 + 오른쪽 그림이나 영상. 휴대폰은 그림 → 제목 → 설명 → 사례 */
.v-m .a-steps .a-cards{grid-template-columns:1fr;gap:0;margin:56px 0 0;padding:16px 56px;background:#fff;border-radius:24px;counter-reset:st}
.v-m .a-steps .a-cards > li{counter-increment:st;position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) 360px;column-gap:40px;align-items:center;
  padding:40px 0;background:transparent;border-radius:0;overflow:visible}
.v-m .a-steps .a-cards > li + li{border-top:1px solid var(--line)}
.v-m .a-steps .a-cards > li::before{content:counter(st);grid-column:1;grid-row:1;align-self:start;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-size:22px;font-weight:700;position:relative;z-index:1}
.v-m .a-steps .a-cards > li::after{content:"";position:absolute;left:27px;top:96px;bottom:-40px;width:2px;background:var(--blue2)}
.v-m .a-steps .a-cards > li:last-child::after{display:none}
.v-m .a-steps .a-cards figure{grid-column:3;grid-row:1;height:240px;background:transparent}
.v-m .a-steps .a-cards figure img{height:220px;width:auto}
.v-m .a-steps .a-cards .c-body{grid-column:2;grid-row:1;padding:0;align-self:start}
.v-m .a-steps .a-cards .c-body small{display:none}
.v-m .a-steps .a-cards .c-body h3{margin:10px 0 0;font-size:26px;line-height:34px}
.v-m .a-steps .a-cards .c-body h3::after{content:none}
.v-m .a-steps .a-cards .c-body p{position:static;height:auto;margin:12px 0 0;padding:0;display:block;background:none;color:#3b4050;font-size:16.5px;line-height:1.75;opacity:1;transform:none;pointer-events:auto;max-width:560px}
.v-m .a-steps .a-cards .c-ev{max-width:560px;padding-top:22px}
@media (max-width:1024px){
  .v-m .a-steps .a-cards{padding:8px 32px}
  .v-m .a-steps .a-cards > li{grid-template-columns:48px minmax(0,1fr) 280px;column-gap:28px}
  .v-m .a-steps .a-cards > li::before{width:48px;height:48px;font-size:19px}
  .v-m .a-steps .a-cards > li::after{left:23px;top:88px}
  .v-m .a-steps .a-cards figure{height:200px}
  .v-m .a-steps .a-cards figure img{height:180px}
}
@media (max-width:768px){
  .v-m .a-steps .a-cards{margin-top:36px;padding:4px 20px;border-radius:18px}
  .v-m .a-steps .a-cards > li{grid-template-columns:40px minmax(0,1fr);column-gap:16px;align-items:start;padding:28px 0}
  .v-m .a-steps .a-cards > li::before{grid-row:1 / span 2;width:40px;height:40px;font-size:17px}
  .v-m .a-steps .a-cards > li::after{left:19px;top:68px;bottom:-28px}
  .v-m .a-steps .a-cards figure{grid-column:2;grid-row:1;height:180px;justify-content:flex-start}
  .v-m .a-steps .a-cards figure img{height:168px}
  .v-m .a-steps .a-cards .c-body{grid-column:2;grid-row:2;padding-top:8px}
  .v-m .a-steps .a-cards .c-body h3{margin-top:0;font-size:22px;line-height:30px}
  .v-m .a-steps .a-cards .c-body p{font-size:15.5px}
}
.v-m .a-steps .a-head h2 .r{white-space:nowrap}
/* 단계 자막(2026-10-14 사장님 '서브 텍스트 대신 동영상 밑에 토스트 같이 자막으로') — 그림 아래쪽에 남색 반투명 알약, 줄이 화면에 들어오면 아래에서 떠오름 */
.v-m .a-steps .a-cards figure{position:relative}
.v-m .a-steps .a-cards figure .cap{position:absolute;left:50%;bottom:6px;transform:translate(-50%,10px);max-width:calc(100% - 16px);padding:8px 16px;border-radius:999px;
  background:rgba(27,31,58,.88);color:#fff;font-size:14px;line-height:1.45;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 10px 24px -12px rgba(27,31,58,.6);opacity:0;transition:opacity .45s ease .25s,transform .45s ease .25s}
.v-m .a-steps .a-cards > li.in figure .cap{opacity:1;transform:translate(-50%,0)}
@media (max-width:768px){.v-m .a-steps .a-cards figure .cap{font-size:13px;padding:7px 14px;white-space:normal;text-align:center;width:max-content}}
@media (prefers-reduced-motion:reduce){.v-m .a-steps .a-cards figure .cap{opacity:1;transform:translate(-50%,0);transition:none}}
@media (max-width:768px){
  .v-m .a-steps .a-cards figure{height:auto;flex-direction:column;align-items:flex-start}
  .v-m .a-steps .a-cards figure img{height:160px}
  .v-m .a-steps .a-cards figure video{height:170px;width:auto;max-width:100%}
  .v-m .a-steps .a-cards figure .cap{position:static;transform:translateY(8px);margin-top:10px;max-width:100%;width:auto;text-align:left;white-space:normal}
  .v-m .a-steps .a-cards > li.in figure .cap{transform:none}
}
@media (max-width:768px){.v-m .a-steps .a-cards figure .cap{border-radius:12px}.v-m .a-steps .a-cards .c-body{padding-top:16px}}

/* 여섯 단계 배치 다시(2026-10-14 사장님 '버티컬은 좋은데 배치를 다시') — 흰 판과 줄 구분선을 버리고 가운데 세로선 타임라인.
   줄마다 그림 카드와 글이 좌우로 번갈아(홀수 줄 그림 왼쪽, 짝수 줄 그림 오른쪽), 번호 원은 가운데 선 위. 휴대폰은 선을 왼쪽에 두고 세로로 쌓음 */
.v-m .a-steps .a-cards{position:relative;margin:64px 0 0;padding:0;background:none;border-radius:0}
.v-m .a-steps .a-cards::before{content:"";position:absolute;left:50%;top:40px;bottom:40px;width:2px;margin-left:-1px;background:linear-gradient(var(--blue2),var(--blue2))}
.v-m .a-steps .a-cards > li{grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);column-gap:0;padding:28px 0;align-items:center}
.v-m .a-steps .a-cards > li + li{border-top:0}
.v-m .a-steps .a-cards > li::after{display:none}
.v-m .a-steps .a-cards > li::before{grid-column:2;grid-row:1;align-self:center;justify-self:center;width:64px;height:64px;font-size:24px;box-shadow:0 0 0 10px var(--soft)}
.v-m .a-steps .a-cards figure{grid-column:1;grid-row:1;height:auto;padding:22px 22px 18px;background:#fff;border-radius:24px;box-shadow:0 24px 48px -36px rgba(27,31,58,.35);flex-direction:column;align-items:center;gap:14px}
.v-m .a-steps .a-cards figure img{height:220px}
.v-m .a-steps .a-cards figure video{height:240px;width:auto;max-width:100%}
.v-m .a-steps .a-cards figure .cap{position:static;transform:translateY(8px);white-space:normal;text-align:center;max-width:100%}
.v-m .a-steps .a-cards > li.in figure .cap{transform:none}
.v-m .a-steps .a-cards .c-body{grid-column:3;grid-row:1;align-self:center;padding:0 0 0 8px;max-width:440px}
.v-m .a-steps .a-cards > li:nth-child(even) figure{grid-column:3}
.v-m .a-steps .a-cards > li:nth-child(even) .c-body{grid-column:1;justify-self:end;padding:0 8px 0 0}
.v-m .a-steps .a-cards .c-body small{display:block;font-size:14px;font-weight:700;color:var(--blue);margin:0}
.v-m .a-steps .a-cards .c-body h3{margin:6px 0 0;font-size:30px;line-height:1.3}
.v-m .a-steps .a-cards .c-ev{padding-top:20px}
@media (max-width:1024px){
  .v-m .a-steps .a-cards > li{grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr)}
  .v-m .a-steps .a-cards > li::before{width:52px;height:52px;font-size:20px}
  .v-m .a-steps .a-cards figure img{height:170px}
  .v-m .a-steps .a-cards figure video{height:186px}
  .v-m .a-steps .a-cards .c-body h3{font-size:24px}
}
@media (max-width:768px){
  .v-m .a-steps .a-cards{margin-top:36px}
  .v-m .a-steps .a-cards::before{left:20px;margin-left:-1px;top:24px;bottom:24px}
  .v-m .a-steps .a-cards > li,.v-m .a-steps .a-cards > li:nth-child(even){grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding:20px 0;align-items:start}
  .v-m .a-steps .a-cards > li::before{grid-column:1;grid-row:1;align-self:start;width:40px;height:40px;font-size:17px;box-shadow:0 0 0 6px var(--soft)}
  .v-m .a-steps .a-cards figure,.v-m .a-steps .a-cards > li:nth-child(even) figure{grid-column:2;grid-row:2;padding:16px 14px 14px;border-radius:18px;align-items:center}
  .v-m .a-steps .a-cards figure img{height:150px}
  .v-m .a-steps .a-cards figure video{height:170px}
  .v-m .a-steps .a-cards .c-body,.v-m .a-steps .a-cards > li:nth-child(even) .c-body{grid-column:2;grid-row:1;justify-self:stretch;padding:6px 0 14px;max-width:none}
  .v-m .a-steps .a-cards .c-body h3{font-size:22px}
  .v-m .a-steps .a-cards .c-ev{padding-top:14px}
  .v-m .a-steps .a-cards figure .cap{border-radius:12px}
}
.v-m .a-steps .a-cards .c-ev li{background:#fff;box-shadow:0 12px 28px -22px rgba(27,31,58,.4)}
.v-m .a-steps .a-cards .c-ev li:has(> a):hover{background:var(--blue2)}

/* 시선 처리와 사례 한 줄(2026-10-14 사장님 '1단계와 번호 중복, 사례는 아이콘으로 한 줄, 시선 처리') —
   ① 번호 원이 단계를 말하므로 '1단계' 글 숨김 ② 사례 = 왼쪽 아이콘(앱 화면 조각, KAIST·베페는 로고) + 성과 한 줄 + 화살표, 사례 이름은 아이콘 대체 글로
   ③ 짝수 줄(글이 왼쪽)은 글과 사례 상자를 가운데 선 쪽으로 오른쪽 정렬 — 눈이 선을 따라 번호 → 제목 → 사례로 내려가게 */
.v-m .a-steps .a-cards .c-body small{display:none}
.v-m .a-steps .a-cards .c-ev li{flex-direction:row;align-items:center;gap:14px;padding:12px 44px 12px 12px}
.v-m .a-steps .a-cards .c-ev li:not(:has(> a)){padding-right:16px}
.v-m .a-steps .a-cards .c-ev .ev-ic{flex:none;width:40px;height:40px;border-radius:10px;object-fit:cover;background:var(--soft)}
.v-m .a-steps .a-cards .c-ev .ev-ic.logo{object-fit:contain;padding:6px;background:#fff;border:1px solid var(--line)}
.v-m .a-steps .a-cards .c-ev li > a,.v-m .a-steps .a-cards .c-ev li > span{font-size:15px;line-height:1.45}
.v-m .a-steps .a-cards > li:nth-child(even) .c-body{text-align:right}
.v-m .a-steps .a-cards > li:nth-child(even) .c-ev{display:flex;justify-content:flex-end}
.v-m .a-steps .a-cards > li:nth-child(even) .c-ev li{text-align:left}
.v-m .a-steps .a-cards .c-body h3{margin-top:0}
@media (max-width:768px){
  .v-m .a-steps .a-cards > li:nth-child(even) .c-body{text-align:left}
  .v-m .a-steps .a-cards > li:nth-child(even) .c-ev{justify-content:flex-start}
  .v-m .a-steps .a-cards .c-body{padding-top:8px}
}

/* 시선 처리 다시(2026-10-14 사장님 '시선 처리는 아직 엉망') — 좌우 교대(지그재그)를 버리고 모든 줄을 같은 구조로:
   왼쪽 레일(번호 원 + 세로선) | 글 한 열(제목 → 설명 → 사례, 위에서 아래로) | 오른쪽 그림 한 열. 번호, 제목, 그림의 윗선을 맞춤.
   figure 와 .c-body 를 display:contents 로 풀어 자막(figcaption)을 제목 아래 설명 자리로 옮긴다(마크업은 그대로) */
.v-m .a-steps .a-cards::before{display:none}
.v-m .a-steps .a-cards > li,.v-m .a-steps .a-cards > li:nth-child(even){grid-template-columns:56px minmax(0,1fr) minmax(0,520px);grid-template-rows:auto auto auto 1fr;
  column-gap:40px;align-items:start;padding:48px 0;text-align:left}
.v-m .a-steps .a-cards > li + li{border-top:1px solid var(--line)}
.v-m .a-steps .a-cards > li::before{grid-column:1;grid-row:1 / span 2;align-self:start;justify-self:start;width:56px;height:56px;font-size:22px;box-shadow:none}
.v-m .a-steps .a-cards > li::after{display:block;left:27px;top:120px;bottom:-48px}
.v-m .a-steps .a-cards > li:last-child::after{display:none}
.v-m .a-steps .a-cards figure,.v-m .a-steps .a-cards > li:nth-child(even) figure,
.v-m .a-steps .a-cards .c-body,.v-m .a-steps .a-cards > li:nth-child(even) .c-body{display:contents}
.v-m .a-steps .a-cards h3{grid-column:2;grid-row:1;margin:8px 0 0;font-size:30px;line-height:40px}
.v-m .a-steps .a-cards figure .cap,.v-m .a-steps .a-cards > li.in figure .cap{grid-column:2;grid-row:2;position:static;transform:none;opacity:1;margin:12px 0 0;padding:0;max-width:440px;
  background:none;box-shadow:none;border-radius:0;color:#3b4050;font-size:17px;line-height:1.7;font-weight:500;white-space:normal;text-align:left;width:auto;transition:none}
.v-m .a-steps .a-cards .c-ev,.v-m .a-steps .a-cards > li:nth-child(even) .c-ev{grid-column:2;grid-row:3;display:block;margin:0;padding-top:24px;max-width:440px}
.v-m .a-steps .a-cards figure img,.v-m .a-steps .a-cards figure video{grid-column:3;grid-row:1 / span 4;align-self:start;width:100%;height:300px;object-fit:contain;
  padding:16px;background:#fff;border-radius:24px;box-shadow:0 24px 48px -36px rgba(27,31,58,.35);box-sizing:border-box;max-width:none}
@media (max-width:1024px){
  .v-m .a-steps .a-cards > li,.v-m .a-steps .a-cards > li:nth-child(even){grid-template-columns:48px minmax(0,1fr) minmax(0,380px);column-gap:28px}
  .v-m .a-steps .a-cards > li::before{width:48px;height:48px;font-size:19px}
  .v-m .a-steps .a-cards > li::after{left:23px;top:112px}
  .v-m .a-steps .a-cards h3{font-size:24px;line-height:34px;margin-top:6px}
  .v-m .a-steps .a-cards figure img,.v-m .a-steps .a-cards figure video{height:240px}
}
@media (max-width:768px){
  .v-m .a-steps .a-cards > li,.v-m .a-steps .a-cards > li:nth-child(even){grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto auto auto;column-gap:16px;padding:28px 0}
  .v-m .a-steps .a-cards > li::before{grid-row:1;width:40px;height:40px;font-size:17px}
  .v-m .a-steps .a-cards > li::after{left:19px;top:76px;bottom:-28px}
  .v-m .a-steps .a-cards h3{font-size:22px;line-height:30px;margin-top:5px}
  .v-m .a-steps .a-cards figure .cap,.v-m .a-steps .a-cards > li.in figure .cap{font-size:15.5px;margin-top:8px}
  .v-m .a-steps .a-cards .c-ev,.v-m .a-steps .a-cards > li:nth-child(even) .c-ev{padding-top:16px}
  .v-m .a-steps .a-cards figure img,.v-m .a-steps .a-cards figure video{grid-column:2;grid-row:4;height:210px;margin-top:16px}
}
.v-m .a-steps .a-cards > li:nth-child(even) .c-body,.v-m .a-steps .a-cards > li .c-body{text-align:left}

/* 제목 → 영상 → 토스트(2026-10-14 사장님 '제목 → 영상 → 토스트 구조로 시선이 가게') — 줄마다 세로 한 줄기:
   번호 옆 제목, 그 아래 영상 판(가로 최대 720px), 영상 재생이 끝나면(영상 없으면 1.2초 뒤) 판 아래쪽 가운데에 토스트가 떠오르고, 그 아래 사례 상자.
   직전 블록의 3열 배치를 덮는다. 토스트 표출은 li.done(템플릿 하단 스크립트) */
.v-m .a-steps .a-cards > li,.v-m .a-steps .a-cards > li:nth-child(even){grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:32px;padding:56px 0}
.v-m .a-steps .a-cards h3{grid-column:2;grid-row:1;align-self:center;margin:0;font-size:30px;line-height:40px}
.v-m .a-steps .a-cards > li::before{grid-row:1;align-self:center}
.v-m .a-steps .a-cards > li::after{top:112px;bottom:-56px}
.v-m .a-steps .a-cards figure,.v-m .a-steps .a-cards > li:nth-child(even) figure{display:block;grid-column:2;grid-row:2;position:relative;width:100%;max-width:720px;height:420px;margin:24px 0 0;
  padding:0;background:#fff;border-radius:24px;box-shadow:0 24px 48px -36px rgba(27,31,58,.35);overflow:hidden}
.v-m .a-steps .a-cards figure img,.v-m .a-steps .a-cards figure video{display:block;width:100%;height:100%;padding:20px 20px 72px;object-fit:contain;background:none;box-shadow:none;border-radius:0;box-sizing:border-box}
.v-m .a-steps .a-cards figure .cap,.v-m .a-steps .a-cards > li.in figure .cap{position:absolute;left:50%;bottom:20px;top:auto;width:max-content;max-width:calc(100% - 40px);margin:0;padding:12px 22px;border-radius:999px;
  background:var(--navy);color:#fff;font-size:15.5px;line-height:1.45;font-weight:600;text-align:center;white-space:normal;box-shadow:0 16px 32px -14px rgba(27,31,58,.55);
  opacity:0;transform:translate(-50%,16px) scale(.96);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1.25)}
.v-m .a-steps .a-cards > li.done figure .cap{opacity:1;transform:translate(-50%,0) scale(1)}
.v-m .a-steps .a-cards .c-ev,.v-m .a-steps .a-cards > li:nth-child(even) .c-ev{grid-column:2;grid-row:3;padding-top:20px;max-width:720px}
@media (max-width:1024px){
  .v-m .a-steps .a-cards > li,.v-m .a-steps .a-cards > li:nth-child(even){grid-template-columns:48px minmax(0,1fr);column-gap:24px}
  .v-m .a-steps .a-cards h3{font-size:26px;line-height:36px}
  .v-m .a-steps .a-cards figure,.v-m .a-steps .a-cards > li:nth-child(even) figure{height:360px}
}
@media (max-width:768px){
  .v-m .a-steps .a-cards > li,.v-m .a-steps .a-cards > li:nth-child(even){grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:32px 0}
  .v-m .a-steps .a-cards > li::after{top:80px;bottom:-32px}
  .v-m .a-steps .a-cards h3{font-size:21px;line-height:30px}
  .v-m .a-steps .a-cards figure,.v-m .a-steps .a-cards > li:nth-child(even) figure{grid-row:2;height:250px;margin-top:16px;border-radius:18px}
  .v-m .a-steps .a-cards figure img,.v-m .a-steps .a-cards figure video{padding:12px 12px 64px}
  .v-m .a-steps .a-cards figure .cap,.v-m .a-steps .a-cards > li.in figure .cap{bottom:12px;font-size:13.5px;padding:9px 16px;max-width:calc(100% - 24px)}
  .v-m .a-steps .a-cards .c-ev,.v-m .a-steps .a-cards > li:nth-child(even) .c-ev{grid-row:3;padding-top:14px}
}
@media (prefers-reduced-motion:reduce){.v-m .a-steps .a-cards figure .cap{opacity:1;transform:translate(-50%,0);transition:none}}

/* ── 여섯 단계 섹션(.st) 2026-10-14 ──
   경과: 스크롤 연동 영상 → 단계별 다른 판 → 판 한 장 고정(.scn-stage) → 번호와 이름 + 큰 영상만(여섯 단계가 같은 모양)
   → 사장님 '왜 자꾸 똑같은 결과가 나오지, 메인처럼 섹션 분리, 시선 처리, 단계별로 다른 레이아웃, 제목이 핵심이고 제목에 맞게 구성'.
   지금: 메인(home-a)처럼 단계마다 별도 섹션(높이 화면 한 장, 상한 920px), 바탕 흰 → 노랑 → 연회색 → 파랑 → 흰 → 남색.
   색 바탕 섹션의 영상은 흰 카드(메인 .s-era, .s-gap), 흰 바탕 섹션의 영상은 가장자리 흐림 + 곱하기 합성.
   글자는 번호, 제목, 끝의 사례 한 줄뿐. 진행 처리는 js/svc-scenes.js(.st-live) */
.v-m .st-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v-m .st{position:relative;display:flex;align-items:center;min-height:min(100svh,920px);padding:72px 0 88px;box-sizing:border-box;background:#fff;overflow:hidden}
.v-m .st-in{width:100%;box-sizing:border-box}
.v-m .st-no{display:block;margin:0 0 18px;font-size:18px;line-height:1;font-weight:800;letter-spacing:.06em;color:var(--blue);font-variant-numeric:tabular-nums}
.v-m .st h3{margin:0;font-size:clamp(36px,4.2vw,62px);line-height:1.22;font-weight:800;letter-spacing:-.03em;color:var(--ink);word-break:keep-all}
.v-m .st .kw{display:inline-block;background:var(--blue2);color:var(--blue);padding:.02em .2em;margin:0 .02em;border-radius:.2em;line-height:1.2;transform-origin:50% 60%}
.v-m .st .kw .ch{display:inline-block;white-space:pre}
.v-m .st [data-var="rise"] .kw{background:linear-gradient(var(--blue2),var(--blue2)) no-repeat;background-size:100% 100%}
.v-m .st h3 .ln{display:block}
.v-m .st h3 .ln .in{display:inline-block}
.v-m .st-fig{position:relative;margin:0;aspect-ratio:3/2;width:100%}
.v-m .st-fig video{display:block;width:100%;height:100%;object-fit:cover;background:#fff;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-composite:intersect}
/* 색 바탕 섹션: 흰 카드 */
.v-m .st-2 .st-fig video,.v-m .st-4 .st-fig video,.v-m .st-6 .st-fig video{mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;border-radius:28px;box-shadow:0 30px 80px -24px rgba(20,24,39,.35)}

/* 사례 한 줄 — 영상이 끝난 뒤(.ev-on) 표출 */
.v-m .st-ev{display:inline-flex;align-items:center;gap:12px;margin-top:36px;padding:10px 18px 10px 10px;border-radius:999px;background:#fff;
  box-shadow:0 18px 40px -18px rgba(27,31,58,.45),0 0 0 1px var(--line);font-size:16px;line-height:1.4;font-weight:700;color:var(--ink);text-decoration:none;
  transition:background .15s,opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1),visibility .45s}
.v-m .st-live .st-ev{opacity:0;visibility:hidden;transform:translateY(16px)}
.v-m .st-live .st.ev-on .st-ev{opacity:1;visibility:visible;transform:none}
.v-m a.st-ev::after{content:"";flex:none;width:16px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' stroke='%232e5bff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.v-m a.st-ev:hover{background:var(--blue2)}
.v-m .st-ev .ev-ic{flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;background:#fff}
.v-m .st-ev .ev-ic.logo{object-fit:contain;padding:6px;box-sizing:border-box;box-shadow:0 0 0 1px var(--line)}

/* 1 배경과 목적 파악 — 제목 왼쪽, 영상 오른쪽, 사례는 제목 아래(Z 시선: 제목 → 영상 → 사례) */
.v-m .st-1 .st-in{display:grid;grid-template-columns:.9fr 1.25fr;gap:56px;align-items:center}
.v-m .st-1::before{content:"";position:absolute;right:-10%;top:10%;width:70%;height:80%;background:radial-gradient(ellipse at 50% 50%,#e8eeff 0,rgba(232,238,255,0) 68%);pointer-events:none}

/* 2 요구사항 정리 — 노랑 바탕, 영상 카드 왼쪽, 제목 오른쪽(1과 반대 방향), 칩은 남색 도장 */
.v-m .st-2{background:var(--yellow)}
.v-m .st-2 .st-in{display:grid;grid-template-columns:1.25fr .9fr;gap:64px;align-items:center}
.v-m .st-2 .st-no{color:var(--navy)}
.v-m .st-2 .kw{background:var(--navy);color:#fff}

/* 3 기능정의와 스펙 — 제목 왼쪽 위, 큰 영상 오른쪽 아래로 대각선, 사례는 왼쪽 아래(문서가 위에서 아래로 확정되는 흐름) */
.v-m .st-3{background:var(--soft)}
.v-m .st-3 .st-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto;column-gap:24px;align-items:end}
.v-m .st-3 .st-txt{grid-column:1 / span 5;grid-row:1;align-self:start;position:relative;z-index:2}
.v-m .st-3 .st-fig{grid-column:4 / -1;grid-row:1 / span 2;margin-top:clamp(80px,13vh,140px);width:auto;max-width:calc((100svh - 260px) * 1.5);justify-self:end}
.v-m .st-3 .st-fig video{background:var(--soft)}
.v-m .st-3 .st-ev{grid-column:1 / span 5;grid-row:2;justify-self:start;align-self:end;position:relative;z-index:2;margin-bottom:6%}
.v-m .st-3 .kw{background:var(--navy);color:#fff}

/* 4 서버와 앱 병렬 개발 — 파랑 바탕, 제목 두 갈래가 영상 양옆에서 동시에 모여듦 */
.v-m .st-4{background:var(--blue);color:#fff}
.v-m .st-4 .st-in{position:relative;display:flex;flex-direction:column;align-items:center}
.v-m .st-4 .st-no{color:#fff;opacity:.75;align-self:flex-start}
.v-m .st-4 h3{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;pointer-events:none;color:#fff;font-size:clamp(30px,3.4vw,52px);z-index:2}
.v-m .st-4 h3 .half{display:block;white-space:nowrap}
.v-m .st-4 .kw{background:var(--yellow);color:var(--navy)}
.v-m .st-4 .st-mid{position:relative;width:100%;display:flex;justify-content:center}
.v-m .st-4 .st-fig{width:min(54%,calc((100svh - 300px) * 1.5))}
.v-m .st-4 .st-ev{margin-top:32px}

/* 5 단위, 통합, 시나리오 테스트 — 제목 세 줄이 영상 진행에 맞춰 차례로 통과 표시(회색 → 남색 + 파란 체크) */
.v-m .st-5 .st-in{display:grid;grid-template-columns:.9fr 1.25fr;gap:56px;align-items:center}
.v-m .st-5 h3 .tl{position:relative;display:flex;align-items:center;gap:.32em;transition:color .35s}
.v-m .st-5 h3 .tl::before{content:"";flex:none;width:.62em;height:.62em;border-radius:50%;box-sizing:border-box;border:.07em solid currentColor;
  background:center/62% no-repeat;transition:background-color .3s,border-color .3s}
.v-m .st-live .st-5 h3 .tl{color:#c5cad6}
.v-m .st-live .st-5 h3 .tl .kw{background:#eceef4;color:#c5cad6;transition:background-color .35s,color .35s}
.v-m .st-5 h3 .tl.in,.v-m .st-live .st-5 h3 .tl.in{color:var(--ink)}
.v-m .st-live .st-5 h3 .tl.in .kw{background:var(--blue2);color:var(--blue)}
.v-m .st-5 h3 .tl.in::before,.v-m .st-wrap:not(.st-live) .st-5 h3 .tl::before{background-color:var(--blue);border-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.v-m .st-5::before{content:"";position:absolute;right:-10%;top:10%;width:70%;height:80%;background:radial-gradient(ellipse at 50% 50%,#eef2fb 0,rgba(238,242,251,0) 68%);pointer-events:none}

/* 6 출시와 운영 — 남색 바탕 가운데, 가장 큰 제목과 영상 카드(마무리) */
.v-m .st-6{background:var(--navy);color:#fff}
.v-m .st-6 .st-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.v-m .st-6 .st-no{color:var(--yellow)}
.v-m .st-6 h3{color:#fff;font-size:clamp(44px,5.4vw,82px)}
.v-m .st-6 .kw{background:var(--yellow);color:var(--navy)}
.v-m .st-6 .st-fig{width:min(100%,calc((100svh - 440px) * 1.5));margin-top:clamp(24px,4vh,44px)}
.v-m .st-6 .st-ev{margin-top:28px}

/* 오른쪽 단계 점 — 여섯 단계 구간 안에서만 표출, 현재 단계 길게 */
.v-m .st-dots{display:none}
.v-m .st-live .st-dots{position:fixed;right:clamp(14px,2vw,32px);top:50%;transform:translate(12px,-50%);z-index:30;display:grid;gap:8px;padding:10px 7px;border-radius:999px;
  background:rgba(255,255,255,.92);box-shadow:0 8px 24px -10px rgba(20,24,39,.35);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s}
.v-m .st-live.dots-on .st-dots{opacity:1;visibility:visible;transform:translate(0,-50%)}
.v-m .st-dots a{display:block;width:8px;height:8px;border-radius:999px;background:#d3d7e2;font-size:0;color:transparent;transition:height .3s,background .3s}
.v-m .st-dots a.on{height:26px;background:var(--blue)}
.v-m .st-dots a.past{background:var(--navy)}

@media (max-width:1024px){
  .v-m .st-4 .st-fig{width:min(48%,calc((100svh - 300px) * 1.5))}
}
@media (max-width:768px){
  .v-m .st{min-height:0;padding:72px 0}
  .v-m .st h3{font-size:32px}
  .v-m .st-no{font-size:15px;margin-bottom:12px}
  /* 휴대폰 시선: 번호 → 제목 → 영상 → 사례 */
  .v-m .st-1 .st-in,.v-m .st-2 .st-in,.v-m .st-5 .st-in{display:flex;flex-direction:column;align-items:flex-start;gap:0}
  .v-m .st-1 .st-txt,.v-m .st-2 .st-txt,.v-m .st-5 .st-txt{display:contents}
  .v-m .st-no{order:0}.v-m .st h3{order:1}.v-m .st-fig{order:2}.v-m .st-ev{order:3}
  .v-m .st-1 .st-fig,.v-m .st-2 .st-fig,.v-m .st-5 .st-fig{margin-top:28px}
  .v-m .st-live .st-dots{display:none}
  .v-m .st-3 .st-in{display:flex;flex-direction:column;align-items:flex-start}
  .v-m .st-3 .st-fig{margin-top:28px;width:100%;max-width:none}
  .v-m .st-3 .st-ev{margin-bottom:0}
  .v-m .st-4 .st-in{align-items:flex-start}
  .v-m .st-4 h3{position:static;transform:none;display:block;font-size:32px}
  .v-m .st-4 h3 .half{display:block}
  .v-m .st-4 .st-mid{display:block}
  .v-m .st-4 .st-fig{width:100%;margin-top:28px}
  .v-m .st-6 h3{font-size:40px}
  .v-m .st-6 .st-fig{width:100%}
  .v-m .st-ev{margin-top:24px;font-size:14px}
}

/* 10-14 '1~6 다 다르게, 판으로 찍어내지 말고' — 기본 판에서 .st 로 남은 2, 4, 5 단계의 글자 규격을 기준 사이트 실측값으로.
   2 = 메인 노랑 구간(.s-gap) h2 48.96px/800/1.3, 그림 칸 1fr 1fr 간격 80. 5 = 토스 구간 제목 48px/700/61.44px 자간 -0.96px #1c1f25 */
.v-m .st-2 .st-in{grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px)}
.v-m .st-2 h3{font-size:clamp(32px,3.4vw,52px);line-height:1.3;letter-spacing:-.02em}
.v-m .st-5 h3{font-size:48px;line-height:61.44px;font-weight:700;letter-spacing:-.96px;color:#1c1f25}
@media (max-width:768px){.v-m .st-2 h3,.v-m .st-5 h3{font-size:32px;line-height:1.3}}

/* ── 여섯 단계 장면(.sx) 2026-10-14 ──
   사장님 '다 바꾸고 싶어, 왜 맨날 똑같이 만드냐' → '단계마다 주인공 교체'. 단계마다 주인공 요소가 다르다(템플릿 주석 참고).
   단계마다 화면 고정(sticky, 구간 높이는 JS 가 data-len vh 로), 진행 처리는 js/svc-steps6.js(.sx-live). JS 없이도 마지막 상태로 표출 */
.v-m .sx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v-m .sx-s{position:relative}
.v-m .sx-stick{position:relative;padding:96px 0;box-sizing:border-box}
.v-m .sx-live .sx-stick{position:sticky;top:0;height:100vh;padding:66px 0 0;overflow:hidden;display:flex;align-items:center}
.v-m .sx-in{width:100%;box-sizing:border-box}
.v-m .sx-no{margin:0 0 14px;font-size:17px;line-height:1;font-weight:800;letter-spacing:.04em;color:var(--blue);font-variant-numeric:tabular-nums}
.v-m .sx-t{margin:0;font-size:clamp(34px,3.6vw,52px);line-height:1.25;font-weight:800;letter-spacing:-.025em;color:var(--ink);word-break:keep-all}
.v-m .sx .kw{display:inline-block;background:var(--blue2);color:var(--blue);padding:.02em .2em;border-radius:.2em;line-height:1.2}
.v-m .sx-ev{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;
  font-size:16px;line-height:1.5;font-weight:700;box-shadow:0 14px 34px -16px rgba(20,24,39,.4),0 0 0 1px rgba(20,24,39,.06);transition:background .15s}
.v-m a.sx-ev::after{content:"";width:7px;height:7px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(45deg);margin:0 2px 0 -2px}
.v-m a.sx-ev:hover{background:var(--blue2)}
.v-m .sx-ic{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#fff;flex:none}
.v-m .sx-ic.logo{object-fit:contain;padding:5px;box-sizing:border-box;box-shadow:0 0 0 1px var(--line)}
.v-m .sx-evw{margin-top:32px}
.v-m .sx-live .sx-evw{opacity:0;transform:translateY(14px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.v-m .sx-live .ev-on .sx-evw{opacity:1;transform:none}
.v-m .sx video{display:block;width:100%;height:100%;object-fit:cover;background:#fff}

/* 1 배경과 목적 파악 — 영상이 화면 가득 → 카드 */
.v-m .sx-1{background:#f2f4f6}
.v-m .sx-1 .sx-head{text-align:center}
.v-m .sx1-card{position:relative;margin:32px auto 0;width:min(1000px,100% - 48px);aspect-ratio:3/2;border-radius:32px;overflow:hidden;background:#fff}
.v-m .sx-1 .sx-evw{text-align:center}
.v-m .sx-live .sx-1 .sx-stick{display:block;padding:0}
.v-m .sx-live .sx-1 .sx-head{position:absolute;left:0;right:0;top:calc(66px + 5vh);z-index:3}
.v-m .sx-live .sx-1 .sx-t{text-shadow:0 0 24px #fff,0 0 12px #fff}
.v-m .sx-live .sx1-card{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;border-radius:0;aspect-ratio:auto;z-index:1}
.v-m .sx-live .sx-1 .sx-evw{position:absolute;left:0;right:0;margin:0;z-index:3}

/* 2 요구사항 정리 — 카드 32장 → 8장, 큰 숫자 */
.v-m .sx-2{background:var(--yellow)}
.v-m .sx-2 .sx-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(32px,5vw,80px);align-items:center}
.v-m .sx-2 .sx-no{color:var(--navy)}
.v-m .sx-2 .kw{background:var(--navy);color:#fff}
.v-m .sx2-num{margin:20px 0 0;font-size:clamp(96px,11vw,168px);line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--navy);font-variant-numeric:tabular-nums}
.v-m .sx2-board{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.v-m .sx2-c{display:flex;flex-direction:column;gap:9%;aspect-ratio:1.6;padding:9% 10%;box-sizing:border-box;background:#fff;border-radius:10px;transform-origin:0 0;
  box-shadow:0 10px 24px -14px rgba(27,31,58,.45);will-change:transform,opacity}
.v-m .sx2-c b{width:22%;aspect-ratio:1;border-radius:22%;background:#e3e6ee;transition:background .3s}
.v-m .sx2-c s{display:block;height:9%;border-radius:99px;background:#eceef3;text-decoration:none}
.v-m .sx2-c s + s{width:62%}
.v-m .sx2-c.on b{background:var(--navy)}
.v-m .sx2-c.on s{background:#cfd5e6}

/* 3 기능정의와 스펙 — 실제 화면 일곱 장 더미 → 부채꼴 → 일렬, 차례로 확정 */
.v-m .sx-3{background:#fff}
.v-m .sx-3 .sx-in{display:flex;flex-direction:column}
.v-m .sx-3 .kw{background:var(--navy);color:#fff}
.v-m .sx3-deck{position:relative;height:min(58vh,560px);margin-top:16px}
.v-m .sx3-c{position:absolute;left:50%;top:50%;margin:0;width:clamp(100px,15vw,224px);aspect-ratio:360/560;border-radius:14px;overflow:hidden;background:#fff;
  transform:translate(-50%,-50%);box-shadow:0 24px 48px -22px rgba(20,24,39,.45),0 0 0 1px rgba(20,24,39,.06);will-change:transform}
.v-m .sx3-c img{display:block;width:100%;height:100%;object-fit:cover}
.v-m .sx3-ok{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:60%;background-position:center;background-repeat:no-repeat;box-shadow:0 4px 12px rgba(46,91,255,.4)}
.v-m .sx3-c.ok .sx3-ok{transform:scale(1)}
.v-m .sx-3 .sx-evw{align-self:center}

/* 4 서버와 앱 병렬 개발 — 화면 둘로 나눠 동시 진행 */
.v-m .sx-4{background:var(--blue)}
.v-m .sx-4 .sx-head{text-align:center}
.v-m .sx-4 .sx-no{color:#fff;opacity:.75}
.v-m .sx-4 .sx-t{color:#fff}
.v-m .sx-4 .sx-t .h{display:inline-block}
.v-m .sx-4 .kw{background:var(--yellow);color:var(--navy)}
.v-m .sx4-split{display:grid;grid-template-columns:1fr 72px 1fr;align-items:stretch;height:min(54vh,480px);margin-top:36px}
.v-m .sx4-pane{position:relative;border-radius:24px;padding:24px 28px 44px;box-sizing:border-box;overflow:hidden}
.v-m .sx4-pane.srv{background:#11162b}
.v-m .sx4-pane.app{background:#fff;display:flex;flex-direction:column;align-items:center}
.v-m .sx4-lb{margin:0 0 18px;font-size:15px;line-height:1;font-weight:800;letter-spacing:.02em;color:rgba(255,255,255,.6);align-self:flex-start}
.v-m .app .sx4-lb{color:var(--sub)}
.v-m .sx4-code i{display:block;width:var(--w);height:10px;margin:0 0 13px calc(var(--x) * 1.6em);border-radius:5px;background:rgba(255,255,255,.08)}
.v-m .sx4-code i::before{content:"";display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7aa2ff,#b8c9ff);transform:scaleX(1);transform-origin:left;transition:transform .35s ease}
.v-m .sx4-code i:nth-child(3n)::before{background:linear-gradient(90deg,#f5b400,#ffd66b)}
.v-m .sx4-code i:nth-child(4n+1)::before{background:linear-gradient(90deg,#4fd1a5,#a5ecd3)}
.v-m .sx-live .sx4-code i::before{transform:scaleX(0)}
.v-m .sx-live .sx4-code i.on::before{transform:scaleX(1)}
.v-m .sx4-phone{flex:1;min-height:0;aspect-ratio:9/18;max-width:100%;border:7px solid #141827;border-radius:28px;box-sizing:border-box;background:#f5f6fa;overflow:hidden}
.v-m .sx4-scr{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:12px 10px}
.v-m .sx4-scr i{display:block;border-radius:7px;background:var(--blue);transition:opacity .35s,transform .35s}
.v-m .sx4-scr .t1{grid-column:span 6;height:26px;background:var(--navy)}
.v-m .sx4-scr .t2{grid-column:span 3;aspect-ratio:1;background:var(--blue)}
.v-m .sx4-scr .t3{grid-column:span 2;aspect-ratio:1;background:#9db4ff}
.v-m .sx4-scr .t4{grid-column:span 6;height:38px;background:var(--yellow)}
.v-m .sx4-scr .t5{grid-column:span 6;height:22px;border-radius:99px;background:var(--navy)}
.v-m .sx-live .sx4-scr i{opacity:.08;transform:scale(.92)}
.v-m .sx-live .sx4-scr i.on{opacity:1;transform:none}
.v-m .sx4-bar{position:absolute;left:28px;right:28px;bottom:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.v-m .app .sx4-bar{background:#e6e9f1}
.v-m .sx4-bar s{display:block;height:100%;background:var(--yellow);transform-origin:left;text-decoration:none}
.v-m .app .sx4-bar s{background:var(--blue)}
.v-m .sx4-link{display:flex;align-items:center;justify-content:center;position:relative}
.v-m .sx4-link::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed rgba(255,255,255,.5)}
.v-m .sx4-link i{position:relative;width:44px;height:44px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px rgba(255,255,255,.6);transition:background .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.v-m .sx4-link.on i,.v-m .sx:not(.sx-live) .sx4-link i{background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' stroke='%231b1f3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/55% no-repeat;transform:scale(1.15);box-shadow:none}
.v-m .sx-4 .sx-evw{text-align:center}

/* 5 단위, 통합, 시나리오 테스트 — 휴대폰 안 시험 항목 12줄 통과 */
.v-m .sx-5{background:#fff}
.v-m .sx-5 .sx-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.v-m .sx5-t .tl{display:flex;align-items:center;gap:.32em;transition:color .35s}
.v-m .sx5-t .tl::before{content:"";flex:none;width:.6em;height:.6em;border-radius:50%;box-sizing:border-box;border:.07em solid currentColor;background:center/62% no-repeat;transition:background-color .3s,border-color .3s}
.v-m .sx-live .sx5-t .tl{color:#c5cad6}
.v-m .sx-live .sx5-t .tl .kw{background:#eceef4;color:#c5cad6;transition:background-color .35s,color .35s}
.v-m .sx5-t .tl.in,.v-m .sx-live .sx5-t .tl.in{color:var(--ink)}
.v-m .sx-live .sx5-t .tl.in .kw{background:var(--blue2);color:var(--blue)}
.v-m .sx5-t .tl.in::before,.v-m .sx:not(.sx-live) .sx5-t .tl::before,.v-m .sx5-phone li.on b,.v-m .sx:not(.sx-live) .sx5-phone li b{background-color:var(--blue);border-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.v-m .sx5-phone{justify-self:center;width:min(300px,100%);aspect-ratio:9/18.5;border:10px solid #141827;border-radius:44px;box-sizing:border-box;background:#f5f6fa;overflow:hidden;box-shadow:0 40px 80px -40px rgba(20,24,39,.45)}
.v-m .sx5-scr{padding:22px 18px}
.v-m .sx5-ring{position:relative;width:84px;height:84px;margin:6px auto 18px}
.v-m .sx5-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.v-m .sx5-ring circle{fill:none;stroke:#e3e6ee;stroke-width:4}
.v-m .sx5-ring circle.on{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:0}
.v-m .sx5-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.v-m .sx5-phone ul{list-style:none;margin:0;padding:0}
.v-m .sx5-phone li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;margin:0 0 6px;border-radius:10px;background:#fff}
.v-m .sx5-phone li[data-g="1"]:nth-child(5),.v-m .sx5-phone li[data-g="2"]:nth-child(9){margin-top:14px}
.v-m .sx5-phone li s{display:block;height:7px;width:64%;border-radius:99px;background:#e6e9f1;text-decoration:none}
.v-m .sx5-phone li:nth-child(odd) s{width:48%}
.v-m .sx5-phone li b{width:16px;height:16px;flex:none;border-radius:50%;box-sizing:border-box;border:2px solid #d3d7e2;background:center/62% no-repeat;transition:background-color .25s,border-color .25s}

/* 6 출시와 운영 — 출시 영상 → 출시부터 10년까지 선 */
.v-m .sx-6{background:var(--navy)}
.v-m .sx-6 .sx-in{display:flex;flex-direction:column}
.v-m .sx-6 .sx-no{color:var(--yellow)}
.v-m .sx-6 .sx-t{color:#fff}
.v-m .sx-6 .kw{background:var(--yellow);color:var(--navy)}
.v-m .sx6-fig{align-self:center;margin:24px 0 0;width:min(100%,calc((100vh - 400px) * 1.5),860px);aspect-ratio:3/2;border-radius:24px;overflow:hidden;background:#fff}
.v-m .sx6-line{position:relative;display:flex;align-items:center;gap:16px;margin-top:32px;font-size:15px;font-weight:800;color:rgba(255,255,255,.7)}
.v-m .sx6-line .s0,.v-m .sx6-line .s1{flex:none;white-space:nowrap}.v-m .sx6-line .s1{color:var(--yellow)}
.v-m .sx6-line .bar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden}
.v-m .sx6-line .bar s{display:block;height:100%;background:var(--yellow);transform-origin:left;text-decoration:none}
.v-m .sx6-line .ticks{position:absolute;left:calc(2.2em + 16px);right:calc(2.6em + 16px);top:50%;display:flex;justify-content:space-between;transform:translateY(-50%);pointer-events:none}
.v-m .sx6-line .ticks i{width:10px;height:10px;border-radius:50%;background:var(--navy);box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);transition:background .25s,box-shadow .25s}
.v-m .sx6-line .ticks i.on,.v-m .sx:not(.sx-live) .sx6-line .ticks i{background:var(--yellow);box-shadow:none}
.v-m .sx-6 .sx-evw{align-self:center}

@media (max-width:768px){
  .v-m .sx-t{font-size:30px}
  .v-m .sx-no{font-size:15px;margin-bottom:10px}
  .v-m .sx-ev{font-size:14px}
  .v-m .sx-evw{margin-top:20px}
  .v-m .sx-2 .sx-in,.v-m .sx-5 .sx-in{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .v-m .sx-2 .sx-side,.v-m .sx-5 .sx-side{display:contents}
  .v-m .sx-2 .sx-no,.v-m .sx-5 .sx-no{order:0}.v-m .sx-2 .sx-t,.v-m .sx-5 .sx-t{order:1}.v-m .sx2-num{order:2}
  .v-m .sx2-board,.v-m .sx5-phone{order:3;margin-top:20px}.v-m .sx5-phone{align-self:center}.v-m .sx-2 .sx-evw,.v-m .sx-5 .sx-evw{order:4}
  .v-m .sx-5 .sx-evw{align-self:center}
  .v-m .sx2-num{font-size:72px;margin-top:8px}
  .v-m .sx2-board{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
  .v-m .sx2-c{border-radius:5px}
  .v-m .sx3-deck{height:44vh}
  .v-m .sx3-ok{width:20px;height:20px;right:5px;top:5px}
  .v-m .sx4-split{grid-template-columns:1fr 28px 1fr;height:46vh;margin-top:24px}
  .v-m .sx4-pane{padding:16px 14px 32px;border-radius:16px}
  .v-m .sx4-code i{height:7px;margin-bottom:9px}
  .v-m .sx4-bar{left:14px;right:14px;bottom:14px}
  .v-m .sx4-link i{width:24px;height:24px}
  .v-m .sx4-phone{border-width:5px;border-radius:18px}
  .v-m .sx4-scr{gap:4px;padding:8px 6px}
  .v-m .sx5-phone{width:200px;border-width:7px;border-radius:30px}
  .v-m .sx5-scr{padding:12px 10px}
  .v-m .sx5-ring{width:56px;height:56px;margin-bottom:10px}
  .v-m .sx5-ring b{font-size:15px}
  .v-m .sx5-phone li{padding:4px 8px;margin-bottom:4px}
  .v-m .sx5-phone li b{width:12px;height:12px}
  .v-m .sx6-fig{width:100%}
}

/* 영상 대신 그림(2026-10-17, 업무 시스템 — 영상 파일이 없음): 영상과 같은 모양 */
.v-m .vs-fig img.vs-still{display:block;width:100%;height:100%;object-fit:cover;background:#fff}
.v-m.t-sys .vs-fig img.vs-still{border-radius:24px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.v-m .vs-top .vs-fig img.vs-still{border-radius:22px;box-shadow:none}