/* ─────────────────────────────────────────────────────────────
   services.css

   베이스 = _preview-services.html 의 시각 구조·DOM·인터랙션 (약 75%)
     preview 는 단독 파일이라 전역 셀렉터를 썼으므로 .sv-page 아래로
     스코프만 옮겼다. 값은 preview 그대로.

   1차 안에서 가져온 정보 구조 (약 25%)
     · 상단 상품 관계도  .rel   (이어링 → + 전문 상담 운영 → 이어톡)
     · 하단 선택 가이드  .pick  (compact decision row)
     · 이어링 내부 처리 6단계 → .vf-micro 로 흐름 STEP 02 안에 흡수

   preview 원본에서 브랜드 규칙 때문에 바꾼 두 가지 (보고서에 명시)
     · .bub.h 이관 알림 amber(#fff7e8 / #8a5a00) → blush + mid pink
     · .cta 의 pink gradient → brand 단색
   ───────────────────────────────────────────────────────────── */

.sv-page {
  --pv-ink: #111;
  --pv-ink2: #3d4351;
  --pv-ink3: #6b7280;
  --pv-ink4: #9aa0aa;
  --pv-line: #ececec;
  --pv-bg2: #f9fafb;
  --pv-rose: #dd4a84;
  color: #333;
  line-height: 1.7;
}
.sv-page .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.sv-page section { padding: 88px 0; }
.sv-page section.alt { background: var(--pv-bg2); }
.sv-page .tag { font-size: 11px; font-weight: 800; color: var(--brand); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }
.sv-page h2.st { font-size: 30px; font-weight: 800; color: var(--pv-ink); letter-spacing: -0.02em; margin: 0 0 10px; line-height: 1.35; }
.sv-page p.ss { font-size: 15px; color: var(--pv-ink3); margin: 0 0 36px; max-width: 760px; word-break: keep-all; text-wrap: pretty; }

/* 스크롤 등장 */
.sv-page .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.sv-page .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sv-page .rv { opacity: 1; transform: none; transition: none; } }

/* ══ 01 HERO ══ */
/* 상단은 사이트 공통 .page-head 를 쓴다. 첫 섹션이 곧바로 이어지도록 위 여백만 줄인다 */
.sv-page > section:first-of-type { padding-top: 56px; }

/* ══ 상품 관계도 — 1차 안에서 가져옴. preview 카드 톤으로 맞춤 ══ */
.sv-page .rel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; margin: 0 0 20px; }
.sv-page .rel-card {
  background: #fff; border: 1px solid var(--pv-line); border-radius: 16px;
  padding: 24px 26px; box-shadow: 0 2px 14px rgba(0,0,0,.04);
  display: flex; flex-direction: column;
}
.sv-page .rel-card.talk { background: rgba(200,17,90,.04); border-color: rgba(200,17,90,.22); }
.sv-page .rel-k { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--brand); margin: 0 0 8px; }
.sv-page .rel-n { font-size: 18px; font-weight: 800; color: var(--pv-ink); letter-spacing: -0.02em; margin: 0 0 6px; }
.sv-page .rel-d { font-size: 13.5px; color: var(--pv-ink3); margin: 0; line-height: 1.7; word-break: keep-all; }
.sv-page .rel-join { display: flex; align-items: center; gap: 12px; padding: 0 22px; min-width: 280px; }
.sv-page .rel-line { flex: 1; height: 1px; background: #e2e5ea; position: relative; }
.sv-page .rel-line i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--pv-rose); transition: width .6s cubic-bezier(.2,.7,.3,1); }
.sv-page .rel.in .rel-line i { width: 100%; transition-delay: .25s; }
.sv-page .rel-plus {
  font-size: 12.5px; font-weight: 800; color: var(--pv-rose); white-space: nowrap;
  background: #fff; border: 1px solid rgba(221,74,132,.4); border-radius: 999px; padding: 7px 14px;
}
.sv-page .rel-note { font-size: 12.5px; color: var(--pv-ink4); margin: 0 0 44px; word-break: keep-all; }
@media (prefers-reduced-motion: reduce) { .sv-page .rel-line i { width: 100% !important; transition: none; } }

/* ══ 02 서비스 ══ */
/* 설명 문장이 한 줄에 들어가도록 텍스트 열을 조금 더 준다 (.rev 는 좌우가 바뀌므로 반대로) */
.sv-page .svc { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.sv-page .svc.rev { grid-template-columns: 0.9fr 1.1fr; }
.sv-page .svc + .svc { margin-top: 76px; padding-top: 76px; border-top: 1px dashed #e5e5e5; }
.sv-page .svc.rev .svc-l { order: 2; }
.sv-page .svc-no { font-size: 11px; font-weight: 800; color: var(--brand); letter-spacing: .14em; margin: 0 0 8px; }
.sv-page .svc-h { font-size: 26px; font-weight: 800; color: var(--pv-ink); margin: 0 0 6px; letter-spacing: -0.02em; }
.sv-page .svc-sub { font-size: 15px; font-weight: 700; color: var(--pv-ink2); margin: 0 0 14px; }
/* 긴 설명을 한 문단에 몰지 않고 문장 단위 block 으로 분리. 폭·행간을 먼저 고정한다 */
.sv-page .svc-body { display: flex; flex-direction: column; gap: 12px; margin: 0 0 22px; max-width: 580px; }
/* 줄바꿈은 의미 단위 경계에서만. 나열 어구는 .nb 로 묶어 가운뎃점에서 끊기지 않게 한다 */
.sv-page .svc-desc { font-size: 15.5px; color: var(--pv-ink3); margin: 0; line-height: 1.75; word-break: keep-all; text-wrap: pretty; }
.sv-page .nb { white-space: nowrap; }
/* 문장 경계 강제 개행 — 1열로 접히는 좁은 폭에서는 해제 */
@media (max-width: 900px) { .sv-page .svc-desc .cb { display: none; } }
.sv-page .how { background: #fff; border: 1px solid var(--pv-line); border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0; padding: 14px 18px; }
.sv-page .how-k { font-size: 10.5px; font-weight: 800; color: var(--brand); letter-spacing: .12em; margin: 0 0 6px; }
.sv-page .how-v { font-size: 13.5px; font-weight: 600; color: var(--pv-ink2); margin: 0; line-height: 1.7; word-break: keep-all; }
.sv-page .how-v + .how-v { margin-top: 6px; }
.sv-page .how-v.sub { font-weight: 400; color: var(--pv-ink3); }
.sv-page .fcard { background: #fff; border: 1px solid var(--pv-line); border-radius: 16px; padding: 26px 28px; box-shadow: 0 2px 14px rgba(0,0,0,.04); }
.sv-page section.alt .fcard { background: #fff; }
.sv-page .fcard h3 { font-size: 12px; font-weight: 800; color: var(--pv-ink4); letter-spacing: .1em; margin: 0 0 16px; text-transform: uppercase; }
.sv-page .fcard ul { list-style: none; margin: 0; padding: 0; }
/* 2줄로 넘어가는 항목의 둘째 줄이 체크 아이콘 아래로 흐르지 않게 열을 고정 */
.sv-page .fcard li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14.5px; color: var(--pv-ink2); line-height: 1.75; word-break: keep-all; }
.sv-page .fcard li + li { margin-top: 11px; }
.sv-page .ck {
  width: 18px; height: 18px; border-radius: 50%; background: rgba(200,17,90,.1); color: var(--brand);
  display: grid; place-items: center; font-size: 10px; font-weight: 800; margin-top: 4px;
}

/* ══ 03 FLOW — 세로 타임라인 ══ */
.sv-page .vflow { margin: 0 0 44px; }
.sv-page .vf { display: grid; grid-template-columns: 56px 1fr; gap: 22px; }
.sv-page .vf-rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.sv-page .vf-dot {
  width: 38px; height: 38px; border-radius: 12px; background: #fff; border: 1.5px solid #e2e5ea; color: #b9bec7;
  display: grid; place-items: center; font-size: 14px; font-weight: 800; flex: 0 0 38px; z-index: 1;
  transition: border-color .45s, color .45s, background .45s, box-shadow .45s;
}
.sv-page .vf.on .vf-dot { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 5px rgba(200,17,90,.07); }
.sv-page .vf.key.on .vf-dot { background: var(--brand); color: #fff; border-color: var(--brand); }
.sv-page .vf-line { flex: 1; width: 2px; background: #eceff3; margin: 6px 0; position: relative; overflow: hidden; }
.sv-page .vf-line i { position: absolute; inset: 0 auto 0 0; width: 100%; height: 0; background: var(--brand); transition: height .6s ease; }
.sv-page .vf.on .vf-line i { height: 100%; }
.sv-page .vf:last-child .vf-line { display: none; }
.sv-page .vf-body { padding-bottom: 30px; opacity: .4; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.sv-page .vf.on .vf-body { opacity: 1; transform: none; }
.sv-page .vf-t { font-size: 16.5px; font-weight: 800; color: var(--pv-ink); margin: 6px 0 5px; }
.sv-page .vf-d { font-size: 14px; color: var(--pv-ink3); margin: 0 0 12px; line-height: 1.7; word-break: keep-all; text-wrap: pretty; }
.sv-page .vf-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.sv-page .vf-chips span {
  font-size: 12px; font-weight: 600; color: #4a5160; background: #fff; border: 1px solid #e2e5ea;
  border-radius: 8px; padding: 6px 11px;
}
.sv-page .vf-chips span.pink { background: rgba(200,17,90,.08); border-color: rgba(200,17,90,.26); color: var(--brand); }
.sv-page .vf-note { margin: 10px 0 0; font-size: 12.5px; color: var(--pv-ink4); line-height: 1.65; word-break: keep-all; text-wrap: pretty; }
.sv-page .vf-cap { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--pv-ink4); margin: 0 0 8px; }
.sv-page .vf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.sv-page .vf-b { border-radius: 14px; padding: 16px 18px; border: 1.5px solid #e6e8ec; background: #fff; }
.sv-page .vf-b.a { border-color: rgba(200,17,90,.3); background: rgba(200,17,90,.04); }
.sv-page .vf-bk { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; margin: 0 0 6px; }
.sv-page .vf-b.a .vf-bk { color: var(--brand); }
.sv-page .vf-b.b .vf-bk { color: var(--pv-ink4); }
.sv-page .vf-bt { font-size: 14px; font-weight: 400; color: var(--pv-ink2); margin: 0; line-height: 1.65; }

/* 1차 안의 AI 내부 처리 6단계를 흐름 STEP 02 안으로 흡수 — 별도 섹션 만들지 않음 */
.sv-page .vf-micro { margin: 14px 0 0; padding: 14px 16px; background: #fff; border: 1px solid #e8eaee; border-radius: 12px; }
.sv-page .vf-micro-k { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--pv-ink4); margin: 0 0 10px; }
.sv-page .vf-micro-l { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 4px; }
.sv-page .vf-micro-l b { font-size: 12.5px; font-weight: 600; color: var(--pv-ink2); }
.sv-page .vf-micro-l i {
  font-style: normal; color: #cfd3d9; font-size: 11px;
  transition: color .45s;
}
.sv-page .vf.on .vf-micro-l i { color: rgba(200,17,90,.5); }

/* ══ 04 업무 영역 ══ */
.sv-page .jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sv-page .job { background: #fff; border: 1px solid var(--pv-line); border-radius: 14px; padding: 22px; display: flex; gap: 15px; align-items: flex-start; }
.sv-page .job-i { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 11px; background: rgba(200,17,90,.08); display: grid; place-items: center; font-size: 19px; }
.sv-page .job h4 { font-size: 15px; font-weight: 700; color: var(--pv-ink); margin: 0 0 5px; }
.sv-page .job p { font-size: 12.5px; color: var(--pv-ink4); margin: 0; line-height: 1.6; word-break: keep-all; }

/* ══ 05 CASE — 1층 고객 화면 / 2층 이어링 내부 처리 ══
   고객이 실제로 보는 화면과 시스템이 뒤에서 처리한 과정을 확실히 분리한다.
   고객 화면에는 AI 처리·정책 대조 같은 내부 용어가 하나도 나오지 않는다. */
.sv-page .cases { display: flex; flex-direction: column; gap: 20px; }
.sv-page .case { background: #fff; border: 1px solid var(--pv-line); border-radius: 16px; padding: 24px 26px; box-shadow: 0 2px 14px rgba(0,0,0,.04); }
.sv-page .case-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.sv-page .case-n { font-size: 10.5px; font-weight: 800; color: var(--brand); letter-spacing: .1em; }
/* 결과 상태는 고객 UI 안이 아니라 카드 바깥 */
.sv-page .case-b { font-size: 10.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: #f0f1f4; color: #4a5160; white-space: nowrap; }
.sv-page .case-b.pink { background: rgba(200,17,90,.09); color: var(--brand); }
.sv-page .case-t { font-size: 16px; font-weight: 800; color: var(--pv-ink); margin: 0 0 18px; }

.sv-page .case-in { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: start; }
.sv-page .lyr-k {
  font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--pv-ink4);
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
}
.sv-page .lyr-k::after { content: ""; flex: 1; height: 1px; background: #eceff3; }

/* ── 1층 · 고객 화면 (실제 메신저 UI) ── */
.sv-page .cv-ui { border: 1px solid #e6e8ec; border-radius: 14px; overflow: hidden; background: #fff; }
.sv-page .cv-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #f0f1f4; }
.sv-page .cv-av { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 800; flex: 0 0 26px; }
.sv-page .cv-name { font-size: 12.5px; font-weight: 800; color: var(--pv-ink2); }
.sv-page .cv-live { font-size: 11px; color: #16a34a; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.sv-page .cv-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.sv-page .cv-body { padding: 14px; background: #f7f8fa; display: flex; flex-direction: column; }
.sv-page .bub { font-size: 13px; line-height: 1.65; border-radius: 12px; padding: 10px 13px; margin-bottom: 8px; max-width: 88%; }
.sv-page .bub.u { background: var(--brand); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.sv-page .bub.a { background: #fff; border: 1px solid #e8eaee; color: var(--pv-ink2); align-self: flex-start; border-bottom-left-radius: 4px; }
/* 시스템 상태 메시지 — 말풍선이 아님 */
.sv-page .cv-sys { align-self: center; font-size: 11.5px; color: #9aa0aa; margin: 4px 0 10px; }
/* 화자가 상담사로 바뀌는 지점 */
.sv-page .cv-who { align-self: flex-start; font-size: 11px; font-weight: 800; color: var(--pv-rose); margin: 2px 0 6px; }

/* ── 커넥터 ── */
.sv-page .case-link { position: relative; align-self: stretch; min-height: 90px; }
.sv-page .case-link::before { content: ""; position: absolute; left: 50%; top: 34px; bottom: 8px; border-left: 1px dashed #dfe3e8; }
.sv-page .case-link span {
  position: absolute; left: 50%; top: 34px; transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid #e2e5ea;
  color: #b9bec7; display: grid; place-items: center; font-size: 11px;
}

/* ── 2층 · 이어링 내부 처리 ── */
.sv-page .bts-steps { list-style: none; margin: 0 0 16px; padding: 0; }
.sv-page .bts-steps li { position: relative; padding: 0 0 11px 20px; font-size: 13px; color: var(--pv-ink2); line-height: 1.6; }
.sv-page .bts-steps li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: rgba(200,17,90,.3); }
.sv-page .bts-steps li::after { content: ""; position: absolute; left: 5.5px; top: 15px; bottom: 1px; width: 1px; background: #eceff3; }
.sv-page .bts-steps li:last-child { padding-bottom: 0; }
.sv-page .bts-steps li:last-child::after { display: none; }
.sv-page .bts-steps li b { color: var(--brand); font-weight: 700; }
.sv-page .bts-row-k { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--pv-ink4); margin: 0 0 7px; }
.sv-page .bts-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sv-page .bts-chips span { font-size: 11.5px; font-weight: 600; color: #4a5160; background: #f3f4f6; border: 1px solid #eceff3; border-radius: 6px; padding: 4px 9px; }
.sv-page .bts-chips span.on { background: rgba(200,17,90,.07); border-color: rgba(200,17,90,.28); color: var(--brand); }
.sv-page .bts-hand {
  margin: 12px 0; padding: 9px 12px; font-size: 12px; font-weight: 800; color: var(--brand);
  background: #fff2f6; border: 1px solid var(--pv-rose); border-radius: 8px; text-align: center;
}

.sv-page .case-f { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #e8e8e8; font-size: 12px; color: var(--pv-ink4); word-break: keep-all; }
.sv-page .case-f b { color: var(--pv-ink2); font-weight: 700; }

/* 이관 조건 */
.sv-page .esc { margin-top: 26px; background: #fff; border: 1px solid var(--pv-line); border-radius: 16px; padding: 24px 26px; }
.sv-page .esc h4 { font-size: 14px; font-weight: 800; color: var(--pv-ink); margin: 0 0 4px; }
.sv-page .esc p { font-size: 13px; color: var(--pv-ink4); margin: 0 0 16px; }
.sv-page .esc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sv-page .esc-chip { font-size: 12.5px; font-weight: 600; color: #4a5160; background: #f0f1f4; border: 1px solid #e2e5ea; border-radius: 8px; padding: 7px 13px; }

/* ══ 06 처리 범위 ══ */
/* 가능/불가 비교가 아니라 "대부분 처리 → 판단 필요할 때만 확인" 흐름 */
.sv-page .scope { display: grid; grid-template-columns: 1fr 176px 1fr; align-items: stretch; }
.sv-page .scope-link { position: relative; display: grid; place-items: center; padding: 0 10px; }
.sv-page .scope-link::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; border-top: 1px dashed #e2e5ea; }
.sv-page .scope-link span {
  position: relative; background: #fff; border: 1px solid #e2e5ea; border-radius: 50%;
  width: 30px; height: 30px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #9aa0aa; line-height: 1;
}
.sv-page .sbox { border-radius: 16px; padding: 26px 28px; border: 1px solid #e9e9ee; background: #fff; display: flex; flex-direction: column; }
/* 고객사 확인 필요 = 덜 중요한 영역이 아니라 역할이 다른 영역. 경고색이 아닌 옅은 blush */
.sv-page .sbox.no { background: #fff7fa; border-color: #f2c4d6; }
.sv-page .sbox-h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.sv-page .sbox-d { font-size: 13px; color: var(--pv-ink3); margin: 0 0 18px; line-height: 1.7; word-break: keep-all; text-wrap: pretty; min-height: calc(1.7em * 2); }
.sv-page .sbox h3 { font-size: 16px; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.sv-page .sbox.yes h3 { color: var(--brand); }
.sv-page .sbox.no h3 { color: var(--brand); }
.sv-page .sbox-tag {
  margin-left: auto; white-space: nowrap; font-size: 11px; font-weight: 700;
  border-radius: 5px; padding: 4px 10px;
  color: var(--brand); border: 1px solid rgba(200,17,90,.3); background: #fff;
}
.sv-page .sbox-tag.alt { color: var(--pv-ink3); border-color: #dfe3e8; }
.sv-page .sbox ul { list-style: none; margin: 0; padding: 0; }
/* 2줄로 넘어가도 둘째 줄이 마커 아래로 흐르지 않게 열 고정 */
.sv-page .sbox li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; color: var(--pv-ink2); line-height: 1.7; word-break: keep-all; }
.sv-page .sbox li + li { margin-top: 9px; }
.sv-page .sbox.no li { color: var(--pv-ink2); }
.sv-page .sbox li small { display: block; font-size: 12px; color: var(--pv-ink4); }
/* 마커는 원형 배지 안의 기호 */
.sv-page .mk {
  width: 18px; height: 18px; border-radius: 50%; margin-top: 3px;
  display: grid; place-items: center; font-size: 10px; font-weight: 800; line-height: 1;
}
.sv-page .sbox.yes .mk { background: rgba(200,17,90,.1); color: var(--brand); }
.sv-page .sbox.no .mk { background: #f0f1f4; color: var(--pv-ink4); }

/* ══ 07 운영 개선 ══ */
/* 글자 수가 아니라 그리드가 축을 정한다. connector 는 텍스트 inline 이 아니라 독립 열 */
.sv-page .bens { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr; align-items: stretch; }
.sv-page .ben { background: #fff; border: 1px solid var(--pv-line); border-radius: 16px; padding: 26px 24px; display: flex; flex-direction: column; }
.sv-page .ben-link { display: grid; place-items: center; }
.sv-page .ben-link span {
  width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid rgba(200,17,90,.28);
  color: var(--brand); display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.sv-page .ben-k { font-size: 11px; font-weight: 800; color: var(--brand); letter-spacing: .1em; margin: 0 0 12px; }
.sv-page .ben-t {
  font-size: 15.5px; font-weight: 800; color: var(--pv-ink); margin: 0 0 8px;
  line-height: 1.5; min-height: calc(1.5em * 2); word-break: keep-all;
}
.sv-page .ben-d { font-size: 13.5px; color: var(--pv-ink3); margin: 0; line-height: 1.7; word-break: keep-all; text-wrap: pretty; }
.sv-page .ben-note {
  margin: 22px 0 0; font-size: 13px; color: var(--pv-ink3); line-height: 1.75; word-break: keep-all;
  padding: 16px 18px; background: #fff; border: 1px dashed rgba(200,17,90,.28); border-radius: 12px;
}
.sv-page .ben-note b { color: var(--brand); font-weight: 800; }

/* ══ 08 선택 가이드 — 1차 안에서 가져온 compact decision ══ */
.sv-page .pick { border-top: 1px solid #e8e8e8; }
/* [운영 상황][→][추천 서비스] 세 열을 두 행이 공유한다 */
.sv-page .pick-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 48px 300px; gap: 20px; align-items: center;
  min-height: 96px; padding: 18px 4px; border-bottom: 1px solid #e8e8e8; text-decoration: none;
  transition: background-color .2s cubic-bezier(.2,.7,.3,1);
}
.sv-page .pick-row:hover { background: rgba(200,17,90,.03); }
.sv-page .pick-when { font-size: 15px; color: var(--pv-ink2); margin: 0; word-break: keep-all; }
/* 화살표는 전용 열 정중앙 */
.sv-page .pick-arrow {
  justify-self: center; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 1px solid #e2e5ea; color: #b9bec7;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
  transition: border-color .2s, color .2s;
}
.sv-page .pick-row:hover .pick-arrow { border-color: rgba(200,17,90,.4); color: var(--brand); }
.sv-page .pick-to { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sv-page .pick-name { font-size: 19px; font-weight: 800; color: var(--brand); letter-spacing: -0.02em; white-space: nowrap; line-height: 1.35; }
.sv-page .pick-sub { font-size: 12.5px; color: var(--pv-ink4); white-space: nowrap; }

/* ══ 09 CTA ══
   preview 원본은 pink gradient. 브랜드 규칙상 brand 단색으로 대체 */
.sv-page .cta { background: var(--brand); border-radius: 20px; padding: 52px; text-align: center; color: #fff; }
.sv-page .cta h3 { font-size: 27px; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.02em; }
.sv-page .cta p { font-size: 15px; color: rgba(255,255,255,.85); margin: 0 0 26px; }
.sv-page .cta-b { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sv-page .cta-b .btn { height: 48px; padding: 0 28px; font-size: 15px; }
.sv-page .cta-b .btn-o { background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.6); }
.sv-page .cta-b .btn-o:hover { background: rgba(255,255,255,.12); }

@media (max-width: 900px) {
  .sv-page .rel { grid-template-columns: 1fr; }
  .sv-page .rel-join { padding: 16px 0; min-width: 0; }
  .sv-page .svc, .sv-page .svc.rev { grid-template-columns: 1fr; gap: 26px; }
  .sv-page .svc.rev .svc-l { order: 0; }
  .sv-page .jobs { grid-template-columns: 1fr; }
  .sv-page .bens { grid-template-columns: 1fr; gap: 0; }
  .sv-page .ben-link { padding: 10px 0; }
  .sv-page .ben-t { min-height: 0; }
  /* 좁은 화면에서는 고객 화면 위 · 내부 처리 아래로 */
  .sv-page .case-in { grid-template-columns: 1fr; }
  .sv-page .case-link { min-height: 0; height: 26px; }
  .sv-page .case-link::before { left: 22px; top: 0; bottom: 0; }
  .sv-page .case-link span { left: 22px; top: 50%; }
  .sv-page .scope { grid-template-columns: 1fr; gap: 0; }
  .sv-page .scope-link { padding: 18px 0; }
  .sv-page .scope-link::before { left: 50%; right: auto; top: 6px; bottom: 6px; border-top: none; border-left: 1px dashed #e2e5ea; }
  .sv-page .sbox-d { min-height: 0; }
  .sv-page .vf { grid-template-columns: 40px 1fr; gap: 14px; }
  .sv-page .vf-dot { width: 32px; height: 32px; flex: 0 0 32px; font-size: 12.5px; }
  .sv-page .vf-split { grid-template-columns: 1fr; }
  .sv-page .pick-row { grid-template-columns: 1fr; gap: 12px; }
  .sv-page .pick-arrow { justify-self: start; }
  .sv-page .pick-row { min-height: 0; }
  .sv-page h2.st { font-size: 24px; }
  .sv-page section { padding: 60px 0; }
  .sv-page .cta { padding: 36px 24px; }
}