/* 서비스 소개(결정 50) — D3 디자인 시스템(../d3/d.css 토큰·헤더·푸터·버튼·글자 단계)을 그대로 쓰고 이 페이지 구간만 여기서(.sv-*).
   구간 바탕은 옅은 회색(페이지 바탕) ↔ 흰색을 번갈아, 마지막 CTA만 잉크. 2~7구간은 글 ↔ 화면 좌우 번갈아, 모바일은 글 → 화면 */
.vd .d-nav-links a.is-on { color: var(--ink); font-weight: 600; }
.sv .sv-bg-gray { background: var(--bg); }
.sv .sv-bg-white { background: var(--surface); }
.sv .sv-sec { padding: var(--sec-y) 0; scroll-margin-top: 68px; }
.sv .sv-eyebrow { font-size: var(--t-ey); font-weight: 600; color: var(--brand-deep); line-height: 1.4; }
.sv .sv-eyebrow--inv { color: var(--on-ink-brand); }
.sv .sv-h2 { margin-top: 10px; }
.sv .sv-h2 .ln { display: block; }
.sv .sv-p { margin-top: 16px; font-size: var(--t-lead); line-height: 1.6; color: var(--t-lead-c); text-wrap: pretty; }
.sv .sv-note { margin-top: 18px; font-size: var(--t-cap); line-height: 1.55; color: var(--t-cap-c); }

/* ── 1. 첫 화면 + 비교 카드 ── */
.sv .sv-hero { padding: 64px 0 var(--sec-y); text-align: center; }
.sv .sv-h1 { margin-top: 12px; font-size: var(--t-h1); font-weight: 700; line-height: 1.18; letter-spacing: -0.025em; text-wrap: balance; }
.sv .sv-h1 .ln { display: block; }
.sv .sv-lead { max-width: 640px; margin: 18px auto 0; font-size: var(--t-lead); line-height: 1.6; color: var(--t-lead-c); text-wrap: pretty; }
.sv .sv-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: var(--card-gap); max-width: 1080px; margin: 44px auto 0; text-align: left; }
.sv .sv-pc { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 16px; min-width: 0; padding: 28px 30px 26px; border-radius: var(--r3); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.sv .sv-pc--talk { background: var(--ink); color: #fff; }
.sv .sv-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: var(--t-cap); font-weight: 600; white-space: nowrap; }
.sv .sv-pill--ai { background: var(--ai-soft); color: var(--ai); }
.sv .sv-pill--brand { background: var(--brand); color: #fff; }
.sv .sv-pc-t { font-size: var(--t-h3); font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.sv .sv-pc-t .ln { display: block; }
.sv .sv-pc-inc { display: flex; align-items: center; gap: 10px; font-size: var(--t-sub); }
.sv .sv-pc-inc-t { flex: 1; min-width: 0; color: var(--ink-2); }
.sv .sv-pc--talk .sv-pc-inc-t { color: rgba(255, 255, 255, .78); }
.sv .sv-pc-inc b { flex: none; font-weight: 700; }
.sv .sv-ck { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ai); color: #fff; }
.sv .sv-ck svg { width: 13px; height: 13px; }
.sv .sv-pc-grp { display: grid; align-content: start; gap: 12px; padding: 18px 20px 20px; border-radius: var(--r2); background: var(--face); }
.sv .sv-pc--talk .sv-pc-grp { background: #2a2d35; }
/* 담당자 배지 — 이름 + 배지 안 작은 칸("직접 처리 / 대행 처리"). 칸 뒤 밝은 면이 --f(0→1)만큼 왼쪽부터 차오르고, 글자는 흐림 → 또렷 */
.sv .sv-who { --f: 1; display: inline-flex; align-items: center; justify-self: start; gap: 8px; height: 32px; padding: 0 4px 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.sv .sv-who--client { background: var(--ink); color: #fff; }
.sv .sv-who--staff { background: var(--brand); color: #fff; }
.sv .sv-who-c { position: relative; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .14); font-size: 12.5px; }
.sv .sv-who-c i { position: absolute; inset: 0; background: #fff; transform: scaleX(var(--f)); transform-origin: left center; }
.sv .sv-who-c span { position: relative; filter: blur(calc((1 - var(--f)) * 2.4px)); opacity: calc(.45 + .55 * var(--f)); }
.sv .sv-who--client .sv-who-c span { color: color-mix(in srgb, var(--ink) calc(var(--f) * 100%), #fff); }
.sv .sv-who--staff .sv-who-c span { color: color-mix(in srgb, var(--brand-deep) calc(var(--f) * 100%), #fff); }
.sv .sv-pc-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sv .sv-pc-list li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border-radius: 10px; background: var(--surface); font-size: var(--t-sub); font-weight: 500; color: var(--ink); }
.sv .sv-pc--talk .sv-pc-list li { background: rgba(255, 255, 255, .07); color: #fff; }
.sv .sv-pc-price { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 0 2px; }
.sv .sv-pc-price span { font-size: var(--t-lab); color: var(--ink-3); font-weight: 600; }
.sv .sv-pc--talk .sv-pc-price span { color: rgba(255, 255, 255, .62); }
.sv .sv-pc-price b { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; }
.sv .sv-flow-k { margin-top: 44px; font-size: var(--t-sub); color: var(--ink-3); }
.sv .sv-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 14px; }
.sv .sv-flow a { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(22, 24, 29, .06); font-size: var(--t-sub); font-weight: 600; color: var(--ink); text-decoration: none; transition: background .2s, color .2s; }
.sv .sv-flow a:hover { background: var(--ink); color: #fff; }
.sv .sv-flow-ar { color: var(--ink-3); font-size: 14px; }

/* ── 2~7. 글 ↔ 화면 ── */
.sv .sv-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5) clamp(40px, 6vw, 96px); align-items: center; }
.sv .sv-split--rev .sv-txt { order: 2; }
.sv .sv-split--rev .sv-scr { order: 1; }
.sv .sv-txt { min-width: 0; }
.sv .sv-feat { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.sv .sv-feat li { display: grid; gap: 3px; }
.sv .sv-feat b { font-size: var(--t-body); font-weight: 700; color: var(--ink); }
.sv .sv-feat span { font-size: var(--t-sub); color: var(--ink-3); }
.sv .sv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sv .sv-chips span { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--ai-soft); color: var(--ai); font-size: 14px; font-weight: 600; }
.sv .sv-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }   /* 리포트 주기: 칩 3개 + 이어지는 문장을 한 줄에(가운데 맞춤), 좁으면 문장만 다음 줄 */
.sv .sv-period .sv-chips { flex: none; margin: 0; }
.sv .sv-chips--period span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 24, 29, .06); }
.sv .sv-period-t { min-width: 0; }
.sv .sv-chips--crit span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 24, 29, .06); font-weight: 500; }
.sv .sv-scr { min-width: 0; }
/* 앱 창(예시 화면) — 흰 판 하나, 머리줄(제목 · 보조 · 예시 데이터) */
/* 흰 바탕 구간의 화면은 옅은 회색 판 위에(흰 창이 바탕에 묻히지 않게) — 회색 구간은 바탕 자체가 판 */
.sv .sv-bg-white .sv-scr { padding: 32px; border-radius: 28px; background: var(--bg); }
.sv .sv-win { min-width: 0; border-radius: var(--r3); background: var(--surface); box-shadow: 0 40px 90px -42px rgba(22, 24, 29, .34), 0 2px 8px rgba(22, 24, 29, .06); overflow: hidden; }
.sv .sv-bg-white .sv-win { box-shadow: 0 40px 90px -42px rgba(22, 24, 29, .34), 0 0 0 1px rgba(22, 24, 29, .04); }
.sv .sv-win-h { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; background: var(--bg); font-size: 14px; white-space: nowrap; }
.sv .sv-win-h b { font-weight: 700; color: var(--ink); }
.sv .sv-win-h span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); }
.sv .sv-ex { flex: none; margin-left: auto; padding: 2px 9px; border-radius: 999px; background: var(--bg-2); font-size: 11.5px; font-style: normal; color: var(--ink-3); }
/* 2. 겹친 두 창 — 뒤(주문 수집)는 오른쪽 위로 비켜 두고, 앞(일반 문의)은 전부 보이게 */
.sv .sv-bg-white .sv-stack { position: relative; padding: 180px 32px 32px; }   /* 뒤 창은 머리줄·첫 줄이 위로 보이게, 앞 창(일반 문의)은 전부 보이게 */
.sv .sv-win--back { position: absolute; top: 32px; right: 32px; width: calc(90% - 32px); }
.sv .sv-win--back .sv-win-h { background: var(--ink); }   /* 뒤 창(주문수집) = 잉크 머리줄 — 앞 창(일반 문의)과 다른 화면임이 바로 보이게 */
.sv .sv-win--back .sv-win-h b { color: #fff; }
.sv .sv-win--back .sv-win-h span { color: rgba(255, 255, 255, .66); }
.sv .sv-win--front { position: relative; width: 92%; }
.sv .sv-rows { display: grid; gap: 4px; padding: 14px 16px 16px; }
.sv .sv-row { display: grid; align-items: center; column-gap: 14px; min-height: 52px; padding: 8px 12px; border-radius: 12px; font-size: 14px; color: var(--ink-2); }
.sv .sv-rows--order .sv-row { grid-template-columns: 96px minmax(0, 1fr) auto; min-height: 44px; }
.sv .sv-rows--inq .sv-row { grid-template-columns: 88px minmax(0, 1fr) 92px 48px; }
.sv .sv-row--h { min-height: 0; padding-top: 0; padding-bottom: 2px; font-size: 12.5px; color: var(--ink-3); }
.sv .sv-row.is-hl { background: var(--face); }
.sv .sv-ch { justify-self: start; max-width: 100%; padding: 3px 9px; border-radius: 999px; background: var(--bg); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv .sv-row.is-hl .sv-ch { background: var(--surface); }
.sv .sv-q { display: grid; gap: 1px; min-width: 0; }
.sv .sv-q b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv .sv-q small { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv .sv-b { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sv .sv-b--ai { background: var(--ai-soft); color: var(--ai); }
.sv .sv-b--hu { background: var(--brand); color: #fff; }
.sv .sv-u { justify-self: end; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv .sv-u--hu { color: var(--brand-deep); }
.sv .sv-st { justify-self: end; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.sv .sv-st--ink { color: var(--ink); font-weight: 600; }
/* 3~5. 대화·기록 — 고객 = 파랑(왼쪽) · AI = 옅은 회색(오른쪽, 남색 아바타) · 상담원 = 옅은 회색 + 브랜드 라벨 */
.sv .sv-log, .sv .sv-chat { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; }
.sv .sv-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.sv .sv-msg p { padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.5; }
.sv .sv-msg p small { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; color: var(--ai); }
.sv .sv-msg--cus p { background: #0a6fd6; color: #fff; border-radius: 18px 18px 18px 6px; }
.sv .sv-msg--ai, .sv .sv-msg--staff { align-self: flex-end; }
.sv .sv-msg--ai p, .sv .sv-msg--staff p { background: var(--face); color: var(--ink); border-radius: 18px 18px 6px 18px; }
.sv .sv-msg--staff p small { color: var(--brand-deep); }
.sv .sv-av { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 600; }
.sv .sv-av svg { width: 15px; height: 15px; }
.sv .sv-av--cus { background: var(--bg-2); }
.sv .sv-av--ai { background: var(--ai); color: #fff; }
.sv .sv-av--staff { background: var(--brand); color: #fff; }
.sv .sv-av--client { background: var(--ink); color: #fff; }
.sv .sv-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.sv .sv-steps li { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--bg); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.sv .sv-steps li.is-check { background: var(--ai); color: #fff; }
.sv .sv-steps li.is-check svg { width: 13px; height: 13px; }
.sv .sv-kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 14px; }
.sv .sv-kv span { color: var(--ink-3); }
.sv .sv-kv b { font-weight: 600; color: var(--ink); }
.sv .sv-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sv .sv-opts span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.sv .sv-opts .is-on { background: var(--ink); color: #fff; }
.sv .sv-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; font-size: 13px; color: var(--ink-3); text-align: center; }
.sv .sv-sys { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: var(--face); font-size: 13px; font-weight: 600; color: var(--brand-deep); }
.sv .sv-sys svg { width: 15px; height: 15px; }
.sv .sv-hand { display: grid; gap: 8px; padding: 16px 22px 20px; background: var(--bg); }
/* 6. 캘린더 */
.sv .sv-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 16px 18px 8px; }
.sv .sv-cal-w { padding-bottom: 4px; text-align: center; font-size: 12px; color: var(--ink-3); }
.sv .sv-cal-d { display: grid; align-content: start; gap: 3px; min-height: 52px; padding: 6px 7px; border-radius: 8px; background: var(--bg); font-size: 12.5px; color: var(--ink-2); }
.sv .sv-cal-d.is-empty { background: transparent; }
.sv .sv-cal-d b { font-weight: 600; }
.sv .sv-cal-d.is-promo { background: var(--face); }
.sv .sv-ev { justify-self: start; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 600; font-style: normal; white-space: nowrap; }
.sv .sv-ev--in { background: var(--ink); color: #fff; }
.sv .sv-ev--off { background: var(--bg-2); color: var(--ink-2); }
.sv .sv-ev--promo { background: var(--brand); color: #fff; }
.sv .sv-cal-list { display: grid; gap: 4px; padding: 6px 18px 18px; }
.sv .sv-cal-list p { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; font-size: 13.5px; }
.sv .sv-cal-list b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv .sv-cal-list .sv-ev { height: 22px; padding: 0 8px; font-size: 12px; }
.sv .sv-cal-scope { justify-self: end; display: inline-flex; align-items: center; gap: 4px; }   /* 공개 범위 배지 — 작은 알약, 줄 오른쪽 끝(8구간 .sv-scope와 이름 분리) */
.sv .sv-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--bg); font-size: 11.5px; font-style: normal; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.sv .sv-tag--ai { background: var(--ai-soft); color: var(--ai); }
/* 7. 리포트 — 박스 안 박스 없음: 숫자 3칸은 창 안 한 단계, 나머지는 글줄·막대 */
.sv .sv-rep { display: grid; gap: 18px; padding: 20px 22px 22px; }
.sv .sv-rep-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sv .sv-rep-nums p { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r2); background: var(--bg); }
.sv .sv-rep-nums span { font-size: 12.5px; color: var(--ink-3); }
.sv .sv-rep-nums b { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.sv .sv-rep-nums small { font-size: 12.5px; font-weight: 600; }
.sv .sv-rep-ai span, .sv .sv-rep-ai small { color: var(--ai); }
.sv .sv-rep-hu span, .sv .sv-rep-hu small { color: var(--brand-deep); }
.sv .sv-rep-bar { display: flex; height: 10px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.sv .sv-rep-bar i { display: block; height: 100%; }
.sv .sv-rep-bar-ai { background: var(--ai); }
.sv .sv-rep-bar-hu { background: var(--brand); }
.sv .sv-rep-k { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sv .sv-rep-kw ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.sv .sv-rep-kw li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 32px; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.sv .sv-rep-kw li i { height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.sv .sv-rep-kw li em { display: block; height: 100%; border-radius: 999px; background: #8d93a0; }
.sv .sv-rep-kw li b { justify-self: end; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.sv .sv-rep-next { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r2); background: var(--ai-soft); }
.sv .sv-rep-next span { font-size: 12.5px; font-weight: 600; color: var(--ai); }
.sv .sv-rep-next b { font-size: 16px; font-weight: 700; color: var(--ink); }
.sv .sv-rep-next small { font-size: 13.5px; color: var(--ink-2); }

/* ── 8. 업무 범위 ── */
.sv .sv-h2--one { max-width: none; }
.sv .sv-scope { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--card-gap); margin-top: var(--head-gap); }
.sv .sv-scope-c { min-width: 0; padding: 24px 26px 26px; border-radius: var(--r3); background: var(--bg); }
.sv .sv-scope-h { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sv .sv-scope-h b { font-size: var(--t-h3); font-weight: 700; color: var(--ink); line-height: 1.35; letter-spacing: -0.015em; }
.sv .sv-scope-h small { margin-left: auto; font-size: var(--t-cap); color: var(--t-cap-c); }
.sv .sv-scope-c ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sv .sv-scope-c li { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: 999px; background: var(--surface); font-size: var(--t-sub); font-weight: 500; color: var(--ink); }
.sv .sv-scope-c li::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--brand); }   /* 역할 색 점(상담원 브랜드 · 고객사 잉크) */
.sv .sv-scope-c--client li::before { background: var(--ink); }

/* ── 9. 고르는 기준 ── */
.sv .sv-center { max-width: 720px; margin: 0 auto; text-align: center; }
.sv .sv-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--card-gap); max-width: 1080px; margin: var(--head-gap) auto 0; }
.sv .sv-pick-c { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 10px; min-width: 0; padding: 28px 30px 30px; border-radius: var(--r3); background: var(--surface); }
.sv .sv-pick-c .sv-pill { justify-self: start; }
.sv .sv-pick-c h3 { margin-top: 6px; font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; }
.sv .sv-pick-s { font-size: var(--t-sub); color: var(--ink-3); }
.sv .sv-pick-c ul { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.sv .sv-pick-c li { position: relative; min-height: 22px; padding-left: 30px; font-size: var(--t-sub); line-height: 1.6; color: var(--ink); }   /* min-height = 체크 원(20 + 위 2) — 모바일 13.5에서 원이 줄 밖으로 넘지 않게 */
.sv .sv-pick-c li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ai) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sv .sv-pick-c--talk li::before { background-color: var(--brand); }

/* ── 10. 마지막 CTA(잉크 바탕) — 타일 3개 ── */
.sv .sv-end-cta { padding: var(--sec-y) 0; background: var(--ink); color: #fff; }
.sv .sv-cta-head { max-width: 720px; }
.sv .sv-end-cta .sv-p { color: var(--t-lead-c-ink); }
.sv .sv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: var(--card-gap); margin-top: var(--head-gap); }
.sv .sv-tile { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 12px; min-width: 0; padding: 26px 26px 26px; border-radius: var(--r3); background: rgba(255, 255, 255, .07); }
.sv .sv-tile-tag { justify-self: start; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: var(--t-cap); font-weight: 600; color: rgba(255, 255, 255, .86); }
.sv .sv-tile h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; }
.sv .sv-tile-d { font-size: var(--t-sub); line-height: 1.55; color: rgba(255, 255, 255, .66); }
.sv .sv-tile-box { display: grid; align-content: start; gap: 10px; padding: 14px; border-radius: var(--r2); background: rgba(255, 255, 255, .06); }
.sv .sv-tile-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sv .sv-tile-chips span { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 12.5px; color: #fff; }
.sv .sv-tile-input { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 6px 0 14px; border-radius: 999px; background: #fff; font-size: 13.5px; color: var(--ink-3); }
.sv .sv-tile-input i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ai); color: #fff; font-style: normal; font-size: 13px; }
.sv .sv-tile-kv, .sv .sv-tile-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 14px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: 13.5px; }
.sv .sv-tile-kv span, .sv .sv-tile-field span { color: rgba(255, 255, 255, .62); }
.sv .sv-tile-kv b, .sv .sv-tile-field b { font-weight: 600; white-space: nowrap; }
.sv .sv-tile .d-btn { justify-self: start; }

/* ── 반응형 ── */
@media (max-width: 1100px) {
  .sv .sv-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sv .sv-split--rev .sv-txt { order: 1; }
  .sv .sv-split--rev .sv-scr { order: 2; }   /* 좁은 화면: 항상 글 → 화면 */
  .sv .sv-tiles { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--card-gap); }
  .sv .sv-tile { grid-row: auto; grid-template-rows: none; }
  .sv .sv-scope { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sv .sv-hero { padding: 40px 0 var(--sec-y); }
  .sv .sv-lead { font-size: var(--t-lead); }
  .sv .sv-cmp, .sv .sv-pick { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--card-gap); margin-top: 28px; }
  .sv .sv-pc, .sv .sv-pick-c { grid-row: auto; grid-template-rows: none; padding: 22px 20px; }
  .sv .sv-pc-t { font-size: var(--t-h3); }
  .sv .sv-pc-inc { flex-wrap: wrap; font-size: var(--t-sub); }
  .sv .sv-pc-grp { padding: 14px 14px 16px; }
  .sv .sv-pc-list li { font-size: var(--t-sub); }
  .sv .sv-flow { justify-content: flex-start; }
  .sv .sv-flow a { height: 36px; padding: 0 14px; font-size: var(--t-sub); }
  .sv .sv-p { font-size: var(--t-lead); }
  .sv .sv-bg-white .sv-scr { padding: 14px; border-radius: 22px; }
  .sv .sv-bg-white .sv-stack { padding: 130px 14px 14px; }
  .sv .sv-win--back { top: 14px; right: 14px; width: calc(94% - 14px); }
  .sv .sv-win--front { width: 100%; }
  .sv .sv-win-h { padding: 0 14px; font-size: 13px; }
  .sv .sv-rows { padding: 10px 10px 12px; }
  .sv .sv-rows--inq .sv-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "ch b u" "q q q"; row-gap: 4px; column-gap: 8px; padding: 10px; }
  .sv .sv-rows--inq .sv-row--h { display: none; }
  .sv .sv-rows--inq .sv-ch { grid-area: ch; } .sv .sv-rows--inq .sv-q { grid-area: q; } .sv .sv-rows--inq .sv-row > span:nth-child(3) { grid-area: b; } .sv .sv-rows--inq .sv-u { grid-area: u; }
  .sv .sv-rows--inq .sv-q small { display: none; }
  .sv .sv-rows--order .sv-row { grid-template-columns: 76px minmax(0, 1fr) auto; font-size: 13px; }
  .sv .sv-log, .sv .sv-chat { padding: 16px 14px 18px; }
  .sv .sv-msg { max-width: 94%; }
  .sv .sv-msg p { font-size: 14px; padding: 10px 13px; }
  .sv .sv-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sv .sv-hand { padding: 14px 14px 16px; }
  .sv .sv-cal { padding: 12px 10px 6px; gap: 3px; }
  .sv .sv-cal-d { min-height: 46px; padding: 4px; font-size: 11.5px; }
  .sv .sv-ev { height: 16px; padding: 0 3px; font-size: 10px; }
  .sv .sv-cal-list { padding: 6px 12px 14px; }
  .sv .sv-cal-list p { grid-template-columns: 60px minmax(0, 1fr); row-gap: 4px; padding: 6px 0; }
  .sv .sv-cal-list .sv-cal-scope { grid-column: 2; justify-self: start; }
  .sv .sv-rep { padding: 16px 14px 18px; }
  .sv .sv-rep-nums { gap: 6px; }
  .sv .sv-rep-nums p { padding: 10px; }
  .sv .sv-rep-nums span { font-size: 11.5px; }
  .sv .sv-rep-nums b { font-size: 22px; }
  .sv .sv-scope-c { padding: 20px 16px; }
  .sv .sv-scope-c li { height: 34px; font-size: var(--t-sub); }
  .sv .sv-tile { padding: 22px 18px; }
}
.sv .sv-rep-nums p:first-child small { color: var(--ink-3); font-weight: 500; }

/* 7. 리포트 — 운영 services.html 예시를 창 크기에 맞게 줄임(사용자 요청 2026-10-06): 숫자 4칸 · 처리 비율 · 월간 추이 + 키워드 두 칸 · FAQ 초안 · 다음 달 제안. 검정 면 없음, 상자는 숫자 칸·제안 칸 한 단계 */
.sv .sv-rep { gap: 16px; padding: 18px 20px 20px; }
.sv .sv-rp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sv .sv-rp-kpis p { display: grid; gap: 1px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.sv .sv-rp-kpis span { font-size: 11.5px; color: var(--ink-3); }
.sv .sv-rp-kpis b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.sv .sv-rp-kpis small { font-size: 11px; line-height: 1.4; color: var(--ink-3); text-wrap: balance; }   /* 결정 58: 말줄임 없이 두 줄까지 */
.sv .sv-rp-kpis .sv-up { color: var(--ink-2); font-weight: 600; }
.sv .sv-rp-hi span, .sv .sv-rp-hi b { color: var(--ai); }
.sv .sv-rp-sec { display: grid; gap: 7px; min-width: 0; }
.sv .sv-rp-k { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.sv .sv-rp-sec .sv-rep-bar { height: 8px; }
.sv .sv-rp-ratio { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-3); }
.sv .sv-rp-ratio > span:first-child b { color: var(--ai); }
.sv .sv-rp-ratio > span:last-child b { color: var(--brand-deep); }
.sv .sv-rp-ratio b { font-weight: 700; }
.sv .sv-rp-two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; }
.sv .sv-rp-chart { display: block; width: 100%; height: 84px; overflow: visible; }
.sv .sv-rp-chart .area { fill: rgba(29, 45, 92, .1); }
.sv .sv-rp-chart .line { fill: none; stroke: var(--ai); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sv .sv-rp-chart .prev { fill: none; stroke: #b4b9c3; stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.sv .sv-rp-chart .pt { fill: var(--ai); }
.sv .sv-rp-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); }
.sv .sv-rp-peak { color: var(--ai); font-weight: 600; }
.sv .sv-rp-legend { display: flex; gap: 12px; font-size: 11px; color: var(--ink-3); }
.sv .sv-rp-legend i { display: inline-block; width: 12px; height: 2px; margin-right: 5px; vertical-align: middle; background: var(--ai); }
.sv .sv-rp-legend i.prev { background: #b4b9c3; }
.sv .sv-rep-kw ul { gap: 6px; }
.sv .sv-rep-kw li { grid-template-columns: 58px minmax(0, 1fr) 24px; gap: 8px; font-size: 12px; }
.sv .sv-rep-kw li i { height: 6px; }
.sv .sv-rep-kw li:first-child em { background: var(--ai); }
.sv .sv-rp-ai { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; background: var(--ai-soft); color: var(--ai); font-size: 10.5px; font-weight: 600; }
.sv .sv-rp-faq { display: grid; gap: 2px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.sv .sv-rp-faq b { font-weight: 600; color: var(--ink); }
.sv .sv-rep .sv-rep-next { padding: 11px 14px; }
.sv .sv-rep .sv-rep-next b { font-size: 14.5px; }
.sv .sv-rep .sv-rep-next small { font-size: 12.5px; }
@media (max-width: 760px) {
  .sv .sv-rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv .sv-rp-two { grid-template-columns: minmax(0, 1fr); }
  .sv .sv-rp-ratio { flex-direction: column; gap: 2px; }
}

/* 결정 57 — 리포트 글(주기 칩 + 기능 4줄) · 업무 범위 제목 강조 · 고르는 기준 3줄 · 요금 계산 타일 미니 창 */
.sv .sv-chips--period span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 24, 29, .06); }
.sv .sv-bg-white .sv-chips--period span { background: var(--bg); box-shadow: none; }
.sv .sv-feat--rep { gap: 18px; }
.sv .sv-scope-c--staff .sv-scope-h b { font-size: var(--t-h3); font-weight: 700; color: var(--ink); line-height: 1.35; letter-spacing: -0.015em; }   /* 이어톡 쪽 한 단계 진하게 */
.sv .sv-scope-c--client .sv-scope-h b { font-size: var(--t-h3); font-weight: 700; color: var(--ink-2); line-height: 1.35; letter-spacing: -0.015em; }
.sv .sv-scope { max-width: 100%; }
.sv .sv-pick { grid-template-rows: repeat(3, auto); }
.sv .sv-pick-c { grid-row: span 3; }
.sv .sv-pick-c h3 { margin-top: 10px; font-size: var(--t-h3); line-height: 1.35; font-weight: 700; letter-spacing: -0.015em; }
.sv .sv-pick-c h3 .ln { display: block; }
.sv .sv-tile-win { display: grid; align-content: start; border-radius: var(--r2); background: rgba(255, 255, 255, .06); overflow: hidden; }
.sv .sv-tile-win-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; padding: 0 12px; background: rgba(255, 255, 255, .08); font-size: 12.5px; }
.sv .sv-tile-win-h b { font-weight: 600; }
.sv .sv-tile-win-h span { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 11px; color: rgba(255, 255, 255, .8); }
.sv .sv-tile-win-b { display: grid; gap: 10px; padding: 14px 14px 16px; }
.sv .sv-mini-sent { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.sv .sv-mini-n { display: inline-block; margin: 0 2px; padding: 0 8px; border-radius: 6px; background: rgba(255, 255, 255, .16); color: #fff; font-variant-numeric: tabular-nums; }   /* 입력칸이 아닌 납작한 그림 */
.sv .sv-mini-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.sv .sv-mini-bar i { display: block; height: 100%; background: rgba(255, 255, 255, .7); }
.sv .sv-mini-out { display: flex; align-items: baseline; gap: 6px; font-size: 14px; }
.sv .sv-mini-out span { color: rgba(255, 255, 255, .5); }
.sv .sv-mini-out b { font-weight: 700; white-space: nowrap; }

/* 결정 58 — 모바일 앱 창 머리줄: 부제는 제목 아래 줄로(말줄임 없음) */
@media (max-width: 760px) {
  .sv .sv-win-h { flex-wrap: wrap; row-gap: 2px; padding-top: 10px; padding-bottom: 10px; }
  .sv .sv-win-h span { order: 3; flex-basis: 100%; white-space: normal; overflow: visible; }
}
@media (max-width: 760px) {   /* 리포트 주기: 모바일은 칩 뒤에 문장이 바로 이어 흐르게(문장 첫머리 "중"이 홀로 다음 줄로 가지 않게) */
  .sv .sv-period { display: block; line-height: 2.1; }
  .sv .sv-period .sv-chips { display: inline-flex; vertical-align: middle; gap: 6px; margin-right: 6px; line-height: normal; }
  .sv .sv-chips--period span { height: 30px; padding: 0 12px; font-size: var(--t-sub); }
}
/* 예시 표기(결정 68) — 창 안쪽 왼쪽 아래(머리줄 알약에서 옮김). 표기 자리만큼 창 아래 여백 */
.sv .sv-win.has-ex { position: relative; padding-bottom: 26px; }
.sv .sv-win .d-ex { --ex-x: 22px; --ex-y: 8px; }
.sv .sv-tile-win-b { position: relative; padding-bottom: 30px; }
.sv .sv-tile-win-b .d-ex { --ex-x: 14px; --ex-y: 9px; }
@media (max-width: 760px) { .sv .sv-win .d-ex { --ex-x: 14px; } }
/* AI 응대 · 게시판 — 게시판 글 형태(채팅 말풍선 아님). 문의 원문 = 옅은 회색 면, AI 답변 = 옅은 남색 면(AI 표시) */
.sv .sv-bd-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sv .sv-bd-no { font-size: 12.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv .sv-bd-meta .sv-b { margin-left: auto; }
.sv .sv-bd-title { margin-top: -2px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.sv .sv-bd-q, .sv .sv-bd-a { display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--bg); }
.sv .sv-bd-a { background: var(--ai-soft); }
.sv .sv-bd-k { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.sv .sv-bd-k b { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.sv .sv-bd-a .sv-bd-k b { color: var(--ai); }
.sv .sv-bd-v { font-size: 15px; line-height: 1.6; color: var(--ink); }
@media (max-width: 760px) {
  .sv .sv-bd-title { font-size: 17px; }
  .sv .sv-bd-k { flex-wrap: wrap; row-gap: 2px; }
  .sv .sv-bd-v { font-size: 14px; }
}

/* ── 결정 98 글 보강 ── */
.sv .sv-chips--ch span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 24, 29, .06); font-weight: 500; }   /* 판매처 · 채팅 칩 = 신호 칩과 같은 흰 칩 */
.sv .sv-bg-white .sv-chips--ch span { background: var(--bg); box-shadow: none; }
.sv .sv-txt .sv-p + .sv-chips { margin-top: 18px; }   /* 설명 → 칩(문의 수집 · AI 응대 · 채팅 · 상담원 연결 같게) */
.sv .sv-txt .sv-chips + .sv-feat { margin-top: 22px; }   /* 칩 → 기능 목록(결정 99 — 28에서 줄임) */
.sv .sv-b--ok { background: #e7f6ef; color: #0f8a5f; }   /* 예시 창 안 — 실제 관리자 "전송 완료" 색 */
.sv .sv-u--none { color: #6b707a; font-weight: 500; }
.sv .sv-scope-p { max-width: 760px; }
.sv .sv-br.is-off { display: none; }   /* 설명 문장 줄바꿈 — 줄이 늘면 끔(services.js fitBr) */

/* ───── 결정 100(2026-10-08) — 목록 타일 · 캘린더 월/주/일/목록 · 구간 모션 ───── */
/* ■1 2~7구간 글 칸 목록 = 글 칸 폭을 채우는 옅은 면 타일(회색 구간 흰 면 · 흰 구간 var(--bg)). 제목 아래 설명(가로 행 없음) */
.sv .sv-split .sv-txt .sv-feat { gap: 8px; margin-top: 26px; }
.sv .sv-split .sv-feat li { display: grid; row-gap: 3px; padding: 14px 18px; border-radius: 14px; background: var(--bg); }
.sv .sv-bg-gray .sv-split .sv-feat li { background: var(--surface); }

/* ■3 운영 캘린더 — 머리줄 탭(흰 알약 안 잉크 표시가 미끄러짐) */
.sv .sv-cx-t { flex: 1; }
.sv .sv-win-h .sv-cx-tabs { position: relative; flex: none; order: 0; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(22, 24, 29, .08); overflow: visible; }
.sv .sv-cx-tabs button { position: relative; z-index: 1; width: 44px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-3); cursor: pointer; transition: color .3s; }
.sv .sv-cx-tabs button.on { color: #fff; }
.sv .sv-cx-tabs button:focus { outline: none; }
.sv .sv-cx-tabs button:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; }   /* 키보드 포커스일 때만 테두리 */
.sv .sv-cx-ind { position: absolute; top: 3px; left: 3px; width: 44px; height: 26px; border-radius: 999px; background: var(--ink); transition: transform .45s cubic-bezier(.3, .8, .3, 1); }
@media (max-width: 760px) {
  .sv .sv-win-h .sv-cx-tabs { margin-left: auto; flex-basis: auto; }   /* 모바일 머리줄: 제목 · 탭 한 줄, 보조 글은 아래 줄 */
}
/* 보기 — 스크립트가 없으면 월만 보임. 스크립트가 켜지면(is-fit) 네 보기를 겹쳐 두고 창 높이 = 가장 긴 보기(전환 때 크기 변화 0) */
.sv .sv-cx-views { position: relative; }
.sv .sv-cx-v { display: none; }
.sv .sv-cx-v.on { display: block; }
.sv .sv-cx.is-fit .sv-cx-views { overflow: hidden; }
.sv .sv-cx.is-fit .sv-cx-v { display: block; position: absolute; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.sv .sv-cx.is-fit .sv-cx-v.on { opacity: 1; visibility: visible; pointer-events: auto; }
/* 월 */
.sv .sv-cm-legend { display: flex; justify-content: flex-end; gap: 14px; padding: 12px 18px 0; font-size: 12px; color: var(--ink-3); }
.sv .sv-cm-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 3px; }
.sv .sv-cm-legend .in { background: var(--ink); }
.sv .sv-cm-legend .off { background: #b9bec8; }
.sv .sv-cm-legend .promo { background: var(--brand); }
/* 주 — 시간표(왼쪽 시간 · 위 요일) + 같은 그리드의 겹침 레이어에 일정 블록, 아래쪽 흐려짐 */
.sv .sv-wkw { position: relative; display: flow-root; }   /* 위 여백이 밖으로 빠지지 않게(겹침 레이어와 시간표 위치 일치) */
.sv .sv-wk { display: grid; grid-template-columns: 44px repeat(3, minmax(0, 1fr)) minmax(0, 1.9fr) repeat(3, minmax(0, 1fr)); grid-template-rows: 50px repeat(9, 38px); margin: 14px 18px 0; }
.sv .sv-wk[data-wk] { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.sv .sv-wk-ov { position: absolute; inset: 0; }
.sv .sv-wk-t { padding-top: 2px; font-size: 12px; color: #6b707a; font-variant-numeric: tabular-nums; }
.sv .sv-wk-h { display: grid; justify-items: center; align-content: center; gap: 1px; margin: 0 2px 6px; border-radius: 10px; color: var(--ink); }
.sv .sv-wk-h small { font-size: 11px; color: var(--ink-3); }
.sv .sv-wk-h b { font-size: 16px; font-weight: 700; }
.sv .sv-wk-h.today { background: var(--ink); color: #fff; }
.sv .sv-wk-h.today small { color: rgba(255, 255, 255, .7); }
.sv .sv-wk-c { border-top: 1px solid #e3e5ea; }
.sv .sv-wk-ev { display: grid; align-content: start; gap: 2px; margin: 3px; padding: 6px 8px; border-radius: 9px; overflow: hidden; }
.sv .sv-wk-ev b { font-size: 12px; font-weight: 700; line-height: 1.3; }
.sv .sv-wk-ev small { font-size: 10.5px; line-height: 1.3; opacity: .75; }
.sv .sv-wk-ev--in { background: var(--ink); color: #fff; }
.sv .sv-wk-ev.is-tight small { display: none; }   /* 블록에 다 안 들어가면 보조 글만 숨김(services.js fit) — 글자 잘림 0. 오늘(목) 칸은 넓게 */
.sv .sv-wk-ev--int { background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px #c9cdd5; }   /* 흰 바탕 + 회색 테두리 = 고객에게 안 알리는 일정 */
.sv .sv-wk-ev--cut { grid-template-columns: auto auto; justify-content: start; align-content: center; align-items: center; column-gap: 10px; background: var(--ai-soft); color: var(--ai); }
/* 일 — 시간 줄 + 11:00 일정 카드(1px 테두리 + 옅은 그림자, 세로 바 없음) + AI 답 예시 */
.sv .sv-dy { display: grid; gap: 4px; padding: 16px 18px 6px; }
.sv .sv-dy-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; min-height: 30px; font-size: 13px; }
.sv .sv-dy-row > span { font-size: 12.5px; color: #6b707a; font-variant-numeric: tabular-nums; }
.sv .sv-dy-row em { font-style: normal; color: var(--ink-3); }
.sv .sv-dy-row.hit > span { justify-self: start; padding: 3px 7px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; }
.sv .sv-dy-card { display: grid; gap: 5px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #e3e5ea, 0 8px 22px -12px rgba(22, 24, 29, .25); }
.sv .sv-dy-card p { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.sv .sv-dy-card b { font-weight: 700; }
.sv .sv-dy-card .sv-dy-meta { font-size: 12.5px; color: var(--ink-3); }
.sv .sv-dy-card .sv-cal-scope { display: inline-flex; gap: 4px; justify-self: start; }
.sv .sv-dy-chat { display: flex; flex-direction: column; gap: 8px; padding: 6px 18px 14px; }
.sv .sv-dy-k { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.sv .sv-dy-chat .sv-msg p { font-size: 13.5px; }
/* 목록 — 종류 · 일정 · 기간 · 공개 범위 */
.sv .sv-ls { display: grid; gap: 4px; padding: 16px 18px; }
.sv .sv-ls p { display: grid; grid-template-columns: 76px minmax(0, 1fr) 100px auto; align-items: center; gap: 10px; min-height: 46px; padding: 0 10px; border-radius: 10px; font-size: 13px; }
.sv .sv-ls .sv-ls-h { min-height: 28px; font-size: 11.5px; color: var(--ink-3); }
.sv .sv-ls-r { background: var(--bg); }
.sv .sv-ls-r b { font-weight: 600; color: var(--ink); }
.sv .sv-ls-r > span:nth-child(3) { font-size: 12.5px; color: var(--ink-3); }
.sv .sv-ls-r .sv-tag:not(.sv-tag--ai) { background: #fff; }   /* 회색 줄 위 공개 범위 배지가 묻히지 않게 */
.sv .sv-ev--int { background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px #c9cdd5; }
@media (max-width: 760px) {
  .sv .sv-ls p { grid-template-columns: 64px minmax(0, 1fr); row-gap: 4px; padding: 8px 10px; }
  .sv .sv-ls p > span:nth-child(3) { display: none; }   /* 모바일: 기간 칸 숨김 */
  .sv .sv-ls p > .sv-cal-scope { grid-column: 2; justify-self: start; }
  .sv .sv-ls .sv-ls-h > span:nth-child(4) { display: none; }
  .sv .sv-wk { grid-template-columns: 36px repeat(3, minmax(0, 1fr)) minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); }
  .sv .sv-wk-ev { padding: 3px 5px; }
  .sv .sv-wk-ev b { font-size: 10.5px; line-height: 1.2; }
  .sv .sv-wk-ev small { display: none; }   /* 모바일: 주 블록 보조 글 숨김 */
}
/* 보기 모션 — 움직임 줄이기면 없음 */
@media (prefers-reduced-motion: no-preference) {
  .sv .sv-cx.is-fit .sv-cx-v { transform: translateY(8px); transition: opacity .35s, transform .45s, visibility 0s linear .45s; }
  .sv .sv-cx.is-fit .sv-cx-v.on { transform: none; transition-delay: 0s; }
  .sv .sv-cx.is-wait .sv-cx-v.on .sv-cal-d { opacity: 0; }   /* 처음 보이기 전(스크립트 있을 때만) */
  .sv .sv-cx.is-in .sv-cx-v.on[data-view="m"] .sv-cal-d { animation: sv-up .35s both; animation-delay: calc(var(--i, 0) * 12ms); }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-wk-ev { animation: sv-pop .5s cubic-bezier(.3, 1.4, .4, 1) both; }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-wk-ev:nth-child(2) { animation-delay: .15s; }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-wk-ev--cut { transform-origin: left center; animation: sv-grow .55s cubic-bezier(.3, .8, .3, 1) .3s both; }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-dy-row { animation: sv-up .35s both; }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-dy-row:nth-child(2) { animation-delay: .06s; }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-dy-row:nth-child(3) { animation-delay: .12s; }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-dy-row:nth-child(4) { animation-delay: .18s; }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-dy-row:nth-child(5) { animation-delay: .24s; }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-dy-card { animation: sv-hl 1.2s .4s both; }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-dy-chat .sv-msg { animation: sv-up .4s .7s both; }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-dy-chat .sv-msg--ai { animation-delay: 1.3s; }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-ls-r { animation: sv-up .35s both; }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-ls-r:nth-child(3) { animation-delay: .08s; }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-ls-r:nth-child(4) { animation-delay: .16s; }
  .sv .sv-cx.is-in .sv-cx-v.on .sv-ls-r:nth-child(5) { animation-delay: .24s; }
}
@keyframes sv-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sv-pop { from { opacity: 0; transform: scale(.85); } }
@keyframes sv-grow { from { opacity: 0; transform: scaleX(.2); } }
@keyframes sv-hl { 0% { transform: scale(.97); box-shadow: 0 0 0 1px #e3e5ea, 0 0 0 0 rgba(59, 74, 107, .3); } 50% { transform: none; box-shadow: 0 0 0 1px #e3e5ea, 0 0 0 6px rgba(59, 74, 107, .12); } 100% { box-shadow: 0 0 0 1px #e3e5ea, 0 8px 22px -12px rgba(22, 24, 29, .25); } }

/* ■4 · ■5 구간 모션 — 숨겨 두는 처리는 스크립트가 켜졌을 때만(html.sv-mo — 움직임 줄이기면 스크립트가 켜지 않음) */
html.sv-mo .sv .is-mo:not(.is-in) [data-st] { opacity: 0; }
html.sv-mo .sv .is-in [data-st] { animation: sv-up .5s cubic-bezier(.3, .8, .3, 1) backwards; animation-delay: var(--d, 0s); }
/* 첫 화면 흐름 칩 — 하나씩 나타나며 잉크색으로 켜졌다 원래 색으로, 화살표도 따라 */
html.sv-mo .sv .sv-hero:not(.is-in) .sv-flow a, html.sv-mo .sv .sv-hero:not(.is-in) .sv-flow-ar { opacity: 0; }
html.sv-mo .sv .sv-hero.is-in .sv-flow a { animation: sv-chip 1.1s backwards; animation-delay: var(--d, 0s); }
html.sv-mo .sv .sv-hero.is-in .sv-flow-ar { display: inline-block; animation: sv-ar .6s backwards; animation-delay: var(--d, 0s); }
@keyframes sv-chip { 0% { opacity: 0; transform: translateY(6px); } 30%, 70% { opacity: 1; transform: none; background: var(--ink); color: #fff; } }
@keyframes sv-ar { from { opacity: 0; transform: translateX(-6px); } }
/* 리포트 — 막대 · 키워드 왼쪽부터 차오름, 이번 달 선이 그려지고 면 · 피크 점. 직전 달 점선은 처음부터 */
#report .sv-rep-bar i, #report [data-kw] em { transform-origin: left center; }
#report .sv-rp-chart .line { clip-path: inset(-10px -10px -10px -10px); }
html.sv-mo #report:not(.is-in) .sv-rep-bar i, html.sv-mo #report:not(.is-in) [data-kw] em { transform: scaleX(0); }
html.sv-mo #report:not(.is-in) .sv-rp-chart .line { clip-path: inset(-10px 100% -10px -10px); }
html.sv-mo #report:not(.is-in) .sv-rp-chart .area, html.sv-mo #report:not(.is-in) .sv-rp-chart .pt { opacity: 0; }
html.sv-mo #report.is-in .sv-rep-bar-ai { transition: transform 1s cubic-bezier(.3, .8, .3, 1) .5s; }
html.sv-mo #report.is-in .sv-rep-bar-hu { transition: transform 1s cubic-bezier(.3, .8, .3, 1) 1.1s; }
html.sv-mo #report.is-in .sv-rp-chart .line { transition: clip-path 1.4s ease .9s; }
html.sv-mo #report.is-in .sv-rp-chart .area { transition: opacity .8s 1.9s; }
html.sv-mo #report.is-in .sv-rp-chart .pt { transition: opacity .3s 2.3s; }
html.sv-mo #report.is-in [data-kw] em { transition: transform .8s cubic-bezier(.3, .8, .3, 1) .6s; }
.sv .sv-btn-glass { background: rgba(255, 255, 255, .14); color: #fff; }   /* 마지막 CTA "요금 계산해 보기" = 반투명 면 버튼(테두리 없음, 크기 · 모양은 d-btn--lg 그대로) */
.sv .sv-btn-glass:hover { background: rgba(255, 255, 255, .22); }

/* ───── 결정 102(2026-10-08) — 마지막 CTA 빈 공간 · 캘린더 보기 아래 빈 공간 ───── */
/* 마지막 CTA "AI에게 직접 물어보기" — 첫 칩 누른 상태 + AI 답 한 줄, 입력칸은 상자 맨 아래 */
.sv .sv-tile-box--ask { display: flex; flex-direction: column; }
.sv .sv-tile-box--ask .sv-tile-input { margin-top: auto; }
/* 마지막 CTA 첫 칸 — 입력창 대신 대화 두 번(고객 → AI). 입력창 모양은 메인 마무리에만 (2026-10-12) */
.sv .sv-tile-box--ask { gap: 8px; justify-content: center; }
.sv .sv-tile-q { display: flex; justify-content: flex-end; }
.sv .sv-tile-q span { padding: 7px 12px; border-radius: 14px 4px 14px 14px; background: #0a6fd6; font-size: 13px; line-height: 1.45; color: #fff; }
.sv .sv-tile-chips span.is-on { background: #fff; color: var(--ink); font-weight: 600; }
.sv .sv-tile-ans { display: flex; align-items: flex-start; gap: 8px; }
.sv .sv-tile-ans i { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ai); font-style: normal; font-size: 10px; font-weight: 700; color: #fff; }
.sv .sv-tile-ans span { padding: 7px 12px; border-radius: 4px 14px 14px 14px; background: rgba(255, 255, 255, .1); font-size: 13px; line-height: 1.45; color: #fff; }
/* 운영 캘린더 — 창 높이 고정은 그대로, 월 · 목록은 보기 바닥까지 채움(services.js fit → is-fill) */
.sv .sv-cx.is-fit.is-fill .sv-cx-v { bottom: 0; }
.sv .sv-cx.is-fill .sv-cx-v[data-view="m"] { display: flex; flex-direction: column; }
.sv .sv-cx.is-fill .sv-cx-v[data-view="m"] .sv-cal { flex: 1 1 auto; grid-template-rows: auto; grid-auto-rows: 1fr; }   /* 날짜 칸 행이 남는 높이를 나눠 가짐(칸 최소 높이는 그대로) */
.sv .sv-cx.is-fill .sv-cx-v[data-view="l"] { display: flex; flex-direction: column; }
.sv .sv-cx.is-fill .sv-cx-v[data-view="l"] .sv-ls { flex: 1 1 auto; display: flex; flex-direction: column; }
.sv .sv-ls .sv-ls-sum { display: flex; align-items: center; justify-content: center; margin-top: 6px; padding: 12px 14px; border-radius: 10px; background: var(--ai-soft); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ai); text-align: center; }
.sv .sv-cx.is-fill .sv-ls .sv-ls-sum { flex: 1 1 auto; }   /* 표 아래 남는 공간을 요약 면이 채움 */
@media (max-width: 760px) { .sv .sv-ls .sv-ls-sum { padding: 12px 10px; } }
@media (prefers-reduced-motion: no-preference) {
  .sv .sv-cx.is-in .sv-cx-v.on .sv-ls-sum { animation: sv-up .35s .32s both; }
}
/* 마지막 CTA 요금 계산기 — 줄 사이를 조금 넓히고 남는 높이 가운데로(아래가 비지 않게) */
.sv .sv-tile-win { grid-template-rows: auto 1fr; }
.sv .sv-tile-win-b { gap: 16px; align-content: center; }
/* 결정 104 — 주 보기도 보기 바닥까지: 시간표 행(9줄)이 남는 높이를 나눠 가짐(최소 38 그대로), 겹침 레이어도 같은 행 → 블록이 시간 선과 맞음 */
.sv .sv-cx.is-fill .sv-cx-v[data-view="w"] { display: flex; flex-direction: column; }
.sv .sv-cx.is-fill .sv-wkw { flex: 1 1 auto; display: flex; flex-direction: column; }
.sv .sv-cx.is-fill .sv-wk[data-wk] { flex: 1 1 auto; }
.sv .sv-cx.is-fill .sv-wk { grid-template-rows: 50px repeat(9, minmax(38px, 1fr)); }
/* 결정 105 — 채팅 예시 고객 원 = "고"(AI 원과 같은 26 · 말풍선 아래 맞춤 · 간격 8 그대로) */
.sv .sv-av--cus { background: #e9ecf3; color: #3b4a6b; font-size: 11px; font-weight: 800; }

/* 채팅 예시 — 카카오톡처럼: 상대(고객)는 왼쪽 아이콘(이름 줄 높이) + 이름 + 말풍선, 우리 쪽(AI · 상담원)은 아이콘 없이 이름 줄만(묶음 첫 말풍선) (2026-10-12) */
.sv .sv-msg { align-items: flex-start; }
.sv .sv-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.sv .sv-msg--ai .sv-col, .sv .sv-msg--staff .sv-col { align-items: flex-end; }
.sv .sv-nm { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.sv .sv-msg--ai .sv-nm { color: var(--ai); } .sv .sv-msg--staff .sv-nm { color: var(--brand-deep); }
.sv .sv-av--gap { visibility: hidden; }
.sv .sv-msg--cus .sv-av { width: 28px; height: 28px; font-size: 11px; } .sv .sv-col { gap: 3px; }
/* 글씨 한 단계씩 키우기(2026-10-12) — 구성은 그대로, 작던 글만 1px 안팎 · 회색 설명은 한 단계 진하게 · 고객 말풍선 대비 4.5 이상 */
.sv .sv-feat b { font-size: 17px; }
.sv .sv-feat span { font-size: 15.5px; color: var(--ink-2); }
.sv .sv-scope li, .sv .sv-pick-c li { font-size: 15.5px; }
.sv .sv-row--h { font-size: 13px; }
.sv .sv-q small { font-size: 13px; }
.sv .sv-kv span, .sv .sv-kv b { font-size: 14.5px; }
.sv .sv-rp-axis, .sv .sv-rp-legend { font-size: 12px; }   /* 리포트 숫자 칸 아래 글은 두 줄로 넘어가서 그대로 */
.sv .d-ex { color: #7c818b; }
.sv .sv-msg--cus p { background: #0a6fd6; }
/* 고르는 기준 카드 — 답답함 줄이기: 배지 · 항목 글씨 한 단계, 줄 사이 · 카드 안쪽 여백 넉넉히 */
.sv .sv-pick-c { padding: 36px 40px 40px; row-gap: 14px; }
.sv .sv-pick-c .sv-pill { height: 30px; padding: 0 13px; font-size: 13.5px; }
.sv .sv-pick-c h3 { font-size: 22px; line-height: 1.4; }   /* 카드 제목 단계 22(다른 페이지와 같게) */
.sv .sv-pick-c ul { gap: 14px; margin-top: 16px; }
.sv .sv-pick-c li { font-size: 16px; line-height: 1.55; padding-left: 32px; }
.sv .sv-pick-c li::before { top: 1px; width: 22px; height: 22px; }
@media (max-width: 1100px) { .sv .sv-pick-c { padding: 26px 22px; } .sv .sv-pick-c h3 { font-size: 20px; } .sv .sv-pick-c li { font-size: 15px; } }
/* 모바일 문의 수집 화면(2026-10-12) — 창 2개를 계단식으로 겹침: 뒤(주문수집)는 왼쪽 위에 데이터까지 보이게, 앞(일반 문의)은 오른쪽 아래로 비켜 겹침. 머리줄에 점 3개를 넣어 실제 창처럼 */
@media (max-width: 760px) {
  .sv .sv-bg-white .sv-stack { padding: 16px 14px 18px; }
  .sv .sv-stack .sv-win--back { position: relative; top: auto; right: auto; width: 90%; }
  .sv .sv-stack .sv-win--front { width: 90%; margin: -22px 0 0 10%; box-shadow: 0 -14px 34px -14px rgba(22, 24, 29, .34), 0 24px 50px -28px rgba(22, 24, 29, .4), 0 0 0 1px rgba(22, 24, 29, .06); }
  .sv .sv-stack .sv-win-h { position: relative; min-height: 44px; padding-left: 58px; flex-wrap: nowrap; }
  .sv .sv-stack .sv-win-h span { order: 0; flex-basis: auto; white-space: nowrap; overflow: hidden; font-size: 12px; }
  .sv .sv-stack .sv-win-h::before { content: ""; position: absolute; left: 14px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #ff5f57; box-shadow: 13px 0 0 #febc2e, 26px 0 0 #28c840; }
  .sv .sv-stack .sv-win-h { border-bottom: 1px solid #e6e8ec; }
  .sv .sv-stack .sv-win--back .sv-win-h { border-bottom-color: transparent; }
  .sv .sv-rows--order { padding: 6px 12px 30px; }
  .sv .sv-rows--order .sv-row { min-height: 38px; padding: 6px 2px; border-radius: 0; border-top: 1px solid #eef0f3; }
  .sv .sv-rows--order .sv-row--h { border-top: 0; min-height: 0; padding-top: 4px; }
  .sv .sv-rows--inq { gap: 0; }
  .sv .sv-rows--inq .sv-row:not(.sv-row--h) + .sv-row { border-top: 1px solid #eef0f3; }
  .sv .sv-rows--inq .sv-row.is-hl { border-top-color: transparent; }
  .sv .sv-rows--inq .sv-row.is-hl + .sv-row { border-top-color: transparent; }
}

/* 모바일 글자 한 단계 더 작게(2026-10-12) — 폰에서 꽉 차 읽기 버겁다는 의견. 토큰(type.css)을 안 쓰는 고정 크기만 여기서 줄임 */
@media (max-width: 600px) {
  html body.sv .sv-feat li span, html body.sv .sv-scope-c ul li { font-size: 13.5px; }
  html body.sv .sv-feat li b, html body.sv .sv-scope-c .sv-scope-h b { font-size: 15px; }
  html body.sv .sv-pick-c ul li { font-size: 13.5px; }
  html body.sv .sv-pick-c h3 { font-size: 16px; }
  html body.sv .sv-tiles .sv-tile h3 { font-size: 16px; }
  html body.sv .sv-txt .sv-chips span { font-size: 13px; }
}

/* 채팅 예시 말풍선 — 카톡처럼(2026-10-12): 한 사람이 이어 보낸 말은 한 묶음(이름 한 번 · 간격 4px), 꼬리는 묶음 첫 말풍선 위쪽에만 */
.sv .sv-col { gap: 4px; }
.sv .sv-col .sv-nm { margin-bottom: 1px; }
.sv .sv-msg--cus p, .sv .sv-msg--ai p, .sv .sv-msg--staff p { border-radius: 16px; }
.sv .sv-msg--cus .sv-col p:first-of-type { border-top-left-radius: 4px; }
.sv .sv-msg--ai .sv-col p:first-of-type, .sv .sv-msg--staff .sv-col p:first-of-type { border-top-right-radius: 4px; }
/* 모바일 일반 문의 창 — 한 건을 한 줄로(판매처 · 제목 · 처리 배지), 세로 높이 줄임(2026-10-12). 제공량 칸은 좁은 화면에서 뺌 */
@media (max-width: 760px) {
  html body.sv .sv-rows--inq { padding: 4px 10px 6px; }
  html body.sv .sv-rows--inq .sv-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ch q b"; column-gap: 8px; row-gap: 0; min-height: 0; padding: 9px 4px; }
  html body.sv .sv-rows--inq .sv-u { display: none; }
  html body.sv .sv-rows--inq .sv-q b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body.sv .sv-rows--inq .sv-ch { font-size: 12px; padding: 3px 8px; }
  html body.sv .sv-rows--inq .sv-b { height: 22px; font-size: 11.5px; padding: 0 8px; }
  html body.sv .sv-rows--inq .sv-row.is-hl { padding-left: 8px; padding-right: 8px; border-radius: 10px; }
  html body.sv .sv-stack .sv-win--front.has-ex { padding-bottom: 24px; }
  html body.sv .sv-rows--order .sv-row > span:nth-child(2) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* 캘린더 탭 누르는 범위 — 보이는 크기는 그대로, 위아래 6px씩 넓혀 손가락으로 누르기 쉽게(2026-10-12 점검) */
.sv .sv-cx-tabs button::after { content: ""; position: absolute; inset: -6px -1px; }
/* 서비스 소개서 내려받기 — 마무리 카드 3장 아래 가운데 한 줄(2026-10-12) */
.sv .sv-doc { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 32px; text-align: center; }
.sv .sv-doc a, .sv .sv-end-cta .sv-doc a { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); font-size: var(--t-body); font-weight: 700; color: #fff; transition: background .2s, box-shadow .2s; }
.sv .sv-doc a:hover, .sv .sv-doc a:focus-visible { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px #fff; }
.sv .sv-doc svg { width: 18px; height: 18px; }
.sv .sv-doc a small, .sv .sv-doc small { text-decoration: none; font-size: var(--t-cap); font-weight: 500; color: #9ea2ab; }
.sv .sv-doc span { font-size: var(--t-cap); color: #9ea2ab; }
/* 채팅 예시 방향(2026-10-12) — 다른 곳(체험 · 도움말 · 서비스 흐름)과 같게: 고객 = 오른쪽(아이콘 · 이름 없음, 파랑), AI · 상담원 = 왼쪽(아이콘 + 이름) */
.sv .sv-msg--cus { align-self: flex-end; } .sv .sv-msg--cus .sv-col { align-items: flex-end; } .sv .sv-msg--cus .sv-nm { display: none; }
.sv .sv-msg--ai, .sv .sv-msg--staff { align-self: flex-start; } .sv .sv-msg--ai .sv-col, .sv .sv-msg--staff .sv-col { align-items: flex-start; }
.sv .sv-msg .sv-av { width: 28px; height: 28px; font-size: 10.5px; font-weight: 800; }
.sv .sv-msg--cus .sv-col p:first-of-type { border-top-left-radius: 16px; border-top-right-radius: 4px; }
.sv .sv-msg--ai .sv-col p:first-of-type, .sv .sv-msg--staff .sv-col p:first-of-type { border-top-right-radius: 16px; border-top-left-radius: 4px; }
/* 캘린더 '일' 보기: 강조 시간(11:00)이 칸이 좁아 두 줄로 꺾여 동그라미처럼 보이던 것 → 시간 칸 58 · 한 줄(2026-10-12) */
.sv .sv-dy-row { grid-template-columns: 58px minmax(0, 1fr); }
.sv .sv-dy-row > span { white-space: nowrap; }
.sv .sv-dy-row.hit > span { padding: 3px 8px; }
/* 반품 예시(2026-10-12): 고르는 버튼은 말풍선 아래 줄 · 고른 뒤라 흐리게, 마지막은 'AI 접수 완료' 한 줄만 */
.sv .sv-col > .sv-opts { margin-top: 2px; }
.sv .sv-opts--used span { background: #fff; box-shadow: inset 0 0 0 1px #dfe2e7; opacity: .5; }
.sv .sv-end--only { justify-content: center; }

/* 새 헤더(화면 고정) 높이만큼 */
body { --nav-h: 64px; padding-top: 64px; }

/* 리포트 — CS 리포트 시안(2026-10) 구성을 이어링용으로 */
.sv .ek-rp { display: grid; gap: 14px; --rp-pk: #e4557f; --rp-pk2: #f5b8ca; --rp-nv: #1f3a8a; }
.sv .ek-rp-kpis { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 8px; }
.sv .ek-rp-kpis p { display: grid; gap: 2px; min-width: 0; padding: 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e6e8ee; }
.sv .ek-rp-kpis span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); }
.sv .ek-rp-kpis span i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sv .ek-rp-kpis b { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.sv .ek-rp-kpis small { font-size: 11px; line-height: 1.4; color: var(--ink-3); }
.sv .ek-rp-kpis .is-dark { background: #1b2233; box-shadow: none; }
.sv .ek-rp-kpis .is-dark span, .sv .ek-rp-kpis .is-dark small { color: #c6ccd9; }
.sv .ek-rp-kpis .is-dark b { color: #fff; }
.sv .ek-rp-kpis .is-dark em { font-style: normal; font-weight: 700; color: #6ee0b4; }
.sv .ek-rp-kpis .is-ai span i, .sv .ek-rp-kpis .is-ai b { color: var(--rp-pk); }
.sv .ek-rp-kpis .is-hu span i, .sv .ek-rp-kpis .is-hu b { color: var(--rp-nv); }
.sv .ek-rp-sec { display: grid; gap: 8px; min-width: 0; align-content: start; }
.sv .ek-rp-k { display: flex; align-items: baseline; gap: 7px; font-size: 11px; color: var(--ink-3); }
.sv .ek-rp-k b { font-size: 13px; font-weight: 700; color: var(--ink); }
.sv .ek-rp-chart { --plot: .78; position: relative; display: flex; align-items: flex-end; gap: 3px; height: 118px; padding: 0 2px; }
.sv .ek-rp-avg { position: absolute; left: 0; right: 0; border-top: 1px dashed #5b6270; z-index: 1; }
.sv .ek-rp-d { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: center; }
.sv .ek-rp-d i { display: block; height: calc(var(--h) * var(--plot)); border-radius: 3px 3px 0 0; background: var(--rp-pk2); transform-origin: bottom; }
.sv .ek-rp-d em { font-style: normal; font-size: 9px; line-height: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sv .ek-rp-d small { height: 14px; font-size: 9.5px; line-height: 14px; color: var(--ink-3); }
.sv .ek-rp-d.is-hot i { background: var(--rp-pk); }
.sv .ek-rp-d.is-hot em { font-weight: 700; color: var(--rp-pk); }
.sv .ek-rp-note { padding: 9px 12px; border-left: 3px solid var(--rp-pk); border-radius: 0 8px 8px 0; background: #fdeef3; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.sv .ek-rp-note b { font-weight: 700; color: var(--ink); }
.sv .ek-rp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; }
.sv .ek-rp-tb { width: 100%; border-collapse: collapse; font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sv .ek-rp-tb th, .sv .ek-rp-tb td { padding: 6px 4px; text-align: right; border-bottom: 1px solid #eceef2; white-space: nowrap; }
.sv .ek-rp-tb th:first-child, .sv .ek-rp-tb td:first-child { text-align: left; }
.sv .ek-rp-tb th { font-weight: 600; color: var(--ink-3); background: #f6f7f9; border-top: 1.5px solid #1b2233; }
.sv .ek-rp-tb td:last-child { font-weight: 700; color: var(--ink); }
.sv .ek-rp-tb tfoot td { font-weight: 700; color: var(--ink); background: #f6f7f9; border-bottom: 0; }
.sv .ek-rp-types { display: grid; gap: 9px; margin: 0; padding: 7px 0 0; list-style: none; border-top: 1.5px solid #1b2233; }
.sv .ek-rp-types li { display: grid; grid-template-columns: 58px minmax(0, 1fr) 36px 26px; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.sv .ek-rp-types i { display: block; height: 6px; border-radius: 99px; background: #eceef2; overflow: hidden; }
.sv .ek-rp-types u { display: block; height: 100%; border-radius: 99px; background: var(--rp-pk); text-decoration: none; }
.sv .ek-rp-types small { font-size: 10.5px; color: var(--ink-3); text-align: right; }
.sv .ek-rp-types b { font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
html.sv-mo #report:not(.is-in) .ek-rp-d i { transform: scaleY(0); }
html.sv-mo #report.is-in .ek-rp-d i { transition: transform .5s ease calc(.5s + var(--i) * 28ms); }
@media (max-width: 600px) {
  .sv .ek-rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv .ek-rp-two { grid-template-columns: minmax(0, 1fr); }
  .sv .ek-rp-d:not(.is-hot) em { visibility: hidden; }
  .sv .ek-rp-chart { gap: 2px; }
  .sv .ek-rp-d small { font-size: 8.5px; }
}

/* ===== 새 사이트 톤으로 맞춤(2026-11-09) ===== */
body.sv,.sv{--ink:#0E1116;--brand:#C8115A;--brand-deep:#A10E49}
.sv .sv-bg-gray{background:#F4F6FB}
.sv .sv-bg-white{background:#fff}
.sv .sv-eyebrow{color:#2A4FD6;font-weight:700}
.sv .sv-h1{font-size:clamp(34px,4vw,56px);line-height:1.12;letter-spacing:-.045em}
.sv .sv-h2,.sv .d-h2.sv-h2{font-size:clamp(30px,3.6vw,52px);line-height:1.16;letter-spacing:-.045em}
.sv .sv-p{color:#5B6270;font-size:17px}
.sv .sv-feat{gap:10px}
.sv .sv-feat li{padding:18px 20px;border-radius:16px;background:#EEF3FF}
.sv .sv-bg-gray .sv-feat li{background:#fff}
.sv .sv-feat b{color:#2A4FD6;font-size:17px}
.sv .sv-feat span{color:#5B6270;font-size:15px}
.sv .sv-chips span{background:#EAF0FF;color:#2A4FD6}
.sv .sv-hero{background:radial-gradient(900px 520px at 80% 0%,rgba(61,107,255,.16),transparent 65%),#F4F6FB}
/* 모바일: 흐름 데모 대신 단계만, 데모 창은 한 장씩 */
@media(max-width:700px){
 .sv .sv-hero [data-flow]{display:none}
 .sv .sv-rp-two,.sv .ek-rp-two>:first-child{display:none}
}

/* 문의 한 건 따라가기 */
.ek-one{padding:96px 0;background:radial-gradient(900px 520px at 80% 0%,rgba(61,107,255,.35),transparent 62%),#070B19;color:#fff;text-align:center}
.ek-one h2{font-size:clamp(30px,3.6vw,52px);line-height:1.16;letter-spacing:-.045em;color:#fff}
.ek-one-p{margin-top:14px;font-size:17px;color:#B9C3DD}
.ek-one-tabs{display:flex;justify-content:center;gap:6px;margin:28px 0 40px}
.ek-one-tabs button{font:inherit;border:0;cursor:pointer;height:42px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.08);color:#C9D1E3;font-weight:700;font-size:15px}
.ek-one-tabs button.on{background:#fff;color:#0E1116}
.ek-one-line{display:none;position:relative;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;text-align:left}
.ek-one-line.on{display:grid}
.ek-one-line:before{content:"";position:absolute;left:4%;right:4%;top:15px;height:2px;background:rgba(255,255,255,.18)}
.ek-one-line li{position:relative;min-width:0}
.ek-one .dot{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#3D6BFF;font-size:14px;font-weight:800;box-shadow:0 0 0 6px rgba(61,107,255,.2)}
.ek-one .tm{margin-top:14px;font-size:12.5px;color:#9FB0D2;font-variant-numeric:tabular-nums}
.ek-one li>b{display:block;margin-top:4px;font-size:18px;letter-spacing:-.03em}
.ek-one .cd{margin-top:14px;min-height:118px;padding:14px;border-radius:16px;background:#fff;color:#0E1116;font-size:14px;line-height:1.55}
.ek-one .cd small{display:block;margin-bottom:6px;font-size:12px;color:#6B7384}
.ek-one .chip{display:inline-flex;align-items:center;height:24px;margin-top:4px;padding:0 9px;border-radius:999px;background:#EEF0F4;color:#3F4654;font-size:12px;font-weight:700}
.ek-one .chip.ai{background:#EAF0FF;color:#2A4FD6}.ek-one .chip.ok{background:#E3F5EC;color:#14855A}
.ek-one .it{display:flex;align-items:center;gap:10px}
.ek-one .th{flex:none;width:40px;height:48px;border-radius:8px;background:#F3F5F9 url(../ring/img/p-shirt.svg) center/contain no-repeat}
.ek-one .it strong{display:block;font-size:14px}.ek-one .it em{font-style:normal;font-size:12px;color:#6B7384}
.ek-one-ex{margin-top:24px;color:#8FA0C4;text-align:center}
@media(max-width:900px){
 .ek-one-line{grid-template-columns:minmax(0,1fr);gap:18px;padding-left:46px}
 .ek-one-line:before{left:15px;right:auto;top:16px;bottom:16px;width:2px;height:auto}
 .ek-one .dot{position:absolute;left:-46px;top:0}
 .ek-one .tm{margin-top:0}
 .ek-one .cd{min-height:0;margin-top:10px}
}
@media(max-width:900px){.vd .ek-one-line{padding-left:46px}}
.vd .ek-one-p{margin-top:14px}

/* 문의 한 건 따라가기 → 바로 시작 안내까지 한 섹션 */
.ek-one{padding-bottom:104px}
.ek-one-cta{margin-top:88px;padding-top:72px;border-top:1px solid rgba(255,255,255,.1)}
.vd .ek-one-cta h2{font-size:clamp(28px,3vw,44px)}
.vd .ek-one-cta p{margin-top:12px;font-size:17px;color:#B9C3DD}
.ek-one-cta a{display:inline-flex;align-items:center;justify-content:center;height:54px;margin-top:28px;padding:0 28px;border-radius:10px;background:#C8115A;color:#fff;font-size:17px;font-weight:700;text-decoration:none}
.ek-one-cta a:hover{background:#A10E49}
@media(max-width:900px){.ek-one-cta{margin-top:56px;padding-top:48px}}
.ek-one-cta{margin-top:64px;padding-top:0;border-top:0}
@media(max-width:900px){.ek-one-cta{margin-top:48px;padding-top:0}}
/* 예시 표시가 섹션 밖(페이지 왼쪽)에 떠 보이던 문제 — 이 섹션에서는 제자리에 */
.vd .ek-one .ek-one-ex{position:static;display:block;margin-top:24px;text-align:center;color:#8FA0C4;background:none;padding:0}

/* 서비스 페이지 강조 글자: 파랑 → 네이비 */
.sv .sv-eyebrow{color:#1F2A5C}
.sv .sv-feat b{color:#1F2A5C}
.sv .sv-chips span{background:#E8EBF3;color:#1F2A5C}
.sv .sv-flow a{color:#1F2A5C}

/* ===== 서비스 페이지 개편(2026-11-09) ===== */
/* ===== 서비스 시안 v2 ===== */
.sv .v2-step{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:#1F2A5C}
.sv .v2-step b{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#1F2A5C;color:#fff;font-size:14px}
.v2-h2{margin-top:14px;font-size:clamp(30px,3.6vw,52px);line-height:1.16;letter-spacing:-.045em;font-weight:700}
.sv .v2-h3{font-size:clamp(22px,2vw,28px);line-height:1.3;letter-spacing:-.03em;font-weight:700}
/* 기능 목록: 회색 상자 → 체크 목록 */
.sv .sv-feat{gap:14px}
.sv .sv-feat li,.sv .sv-bg-gray .sv-feat li{padding:0 0 0 28px;background:none!important;border-radius:0;position:relative}
.sv .sv-feat li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:#1F2A5C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.sv .sv-feat li,.sv .sv-bg-gray .sv-feat li{display:block!important;padding:0 0 0 30px!important;margin:0!important}
.sv .sv-feat li::before{top:2px!important}
.sv .sv-feat b{display:block;color:#0E1116!important;font-size:16px;margin:0!important}
.sv .sv-feat span{display:block;margin-top:2px}
/* 2. AI 응대: 남색 띠 + 탭 */
.v2-respond{padding:104px 0;background:radial-gradient(900px 520px at 85% 0%,rgba(61,107,255,.32),transparent 62%),#0B1230;color:#fff}
.v2-respond .v2-step{color:#B9C9FF}.v2-respond .v2-step b{background:#3D6BFF}
.v2-respond .v2-h2{color:#fff}
.v2-tabs{display:flex;gap:6px;margin:32px 0 40px;flex-wrap:wrap}
.v2-tabs button{font:inherit;border:0;cursor:pointer;height:44px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.08);color:#C9D1E3;font-weight:700;font-size:15px}
.v2-tabs button.on{background:#fff;color:#0E1116}
.v2-pane{display:none}.v2-pane.on{display:block}
.v2-respond .sv-split{margin:0}
.v2-respond .v2-h3,.v2-respond .sv-feat b{color:#fff!important}
.v2-respond .sv-p,.v2-respond .sv-feat span{color:#B9C3DD!important}
.v2-respond .sv-chips span{background:rgba(255,255,255,.1)!important;color:#DCE3F5!important;box-shadow:none!important}
.v2-respond .sv-feat li::before{background-color:#3D6BFF}
.v2-respond .sv-scr{background:none!important;padding:0!important}
.v2-respond [data-pane=chat] .sv-win,.v2-respond [data-pane=handoff] .sv-win{max-width:460px;margin-inline:auto}
.v2-respond [data-pane=chat] .sv-chat .sv-msg,.v2-respond [data-pane=handoff] .sv-chat .sv-msg{max-width:100%}
/* 캘린더: 짧은 띠 */
.v2-cal{padding:72px 0;background:#fff}
.v2-cal-in{display:grid;grid-template-columns:minmax(0,1fr) 248px minmax(0,440px);gap:32px;align-items:center;padding:36px 40px!important;border-radius:28px;background:#F4F6FB}
.v2-cal-in>div{max-width:440px}
.v2-cal p{margin-top:10px;font-size:16px;line-height:1.6;color:#5B6270}
.v2-ev{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.v2-ev li{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #E3E7F0;font-size:15px}
.v2-ev i{font-style:normal;font-size:12px;font-weight:700;text-align:center;padding:4px 0;border-radius:999px}
.v2-ev i.in{background:#E3F5EC;color:#14855A}.v2-ev i.off{background:#EEF0F4;color:#3F4654}.v2-ev i.pr{background:#FCE7EF;color:#C8115A}
.v2-ev span{color:#6B7384;font-size:14px;font-variant-numeric:tabular-nums}
@media(max-width:900px){.v2-cal-in{grid-template-columns:minmax(0,1fr);gap:20px;padding:24px 20px!important;border-radius:22px}.v2-cal{padding:48px 16px}.v2-respond{padding:72px 0}.v2-tabs{margin:24px 0 28px}}
@media(max-width:600px){.v2-ev li{grid-template-columns:64px minmax(0,1fr);row-gap:2px;padding:12px 14px}.v2-ev li span{grid-column:2;font-size:13px}}
/* 첫 화면: 남색 배경 */
.sv .sv-hero{background:radial-gradient(900px 560px at 82% 0%,rgba(61,107,255,.38),transparent 62%),#0B1230!important}
.sv .sv-hero .sv-eyebrow{color:#B9C9FF!important}
.sv .sv-hero .sv-h1{color:#fff}
.sv .sv-hero .sv-lead,.sv .sv-hero .sv-flow-k,.sv .sv-hero .fl-h p{color:#C3CCE2!important}
.sv .sv-hero .fl-h h3{color:#fff}.sv .sv-hero .fl-h p{color:#B9C3DD}
.sv .sv-hero .sv-flow a{background:rgba(255,255,255,.08)!important;color:#DCE3F5!important;box-shadow:none!important}
.sv .sv-hero .sv-flow-ar{color:#6F7FA8}
.v2-respond .v2-cal-in{margin-top:64px}
.v2-respond .v2-cal-in .v2-h3{color:#0E1116!important}
.v2-respond .v2-cal-in p{color:#5B6270!important}
@media(max-width:900px){.v2-respond .v2-cal-in{margin-top:40px}}
.v2-respond .v2-ev b{color:#0E1116!important}
/* 마지막 시작 안내: 가운데 큰 글 → 가로 카드 */
.vd .ek-one-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:32px;align-items:center;max-width:1040px;margin:72px auto 0;padding:32px 40px;border-radius:24px;background:#fff;text-align:left;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.vd .ek-one-cta h2{grid-column:1;font-size:clamp(24px,2.4vw,32px)!important;color:#0E1116!important;letter-spacing:-.04em}
.vd .ek-one-cta p{grid-column:1;margin-top:6px!important;color:#5B6270!important;font-size:16px}
.vd .ek-one-cta a{grid-column:2;grid-row:1 / span 2;margin:0!important}
@media(max-width:760px){.vd .ek-one-cta{grid-template-columns:minmax(0,1fr);padding:24px 20px;margin-top:48px;text-align:center}.vd .ek-one-cta a{grid-column:1;grid-row:auto;margin-top:18px!important;width:100%}}
/* AI 응대 탭: 대화창 압축(이름 줄 숨김 · 간격 · 말풍선 크기) */
.v2-respond [data-pane] .sv-chat{gap:8px;padding:14px 16px 16px}
.v2-respond [data-pane] .sv-msg p{padding:8px 12px;font-size:14px;line-height:1.45}
.v2-respond [data-pane] .sv-nm{display:none}
.v2-respond [data-pane] .sv-col{gap:6px}
.v2-respond [data-pane] .sv-opts{margin-top:2px}
.v2-respond [data-pane] .sv-opts span{height:24px;padding:0 10px;font-size:12px}
.v2-respond [data-pane] .sv-av{width:26px;height:26px;font-size:10px}
.v2-respond [data-pane] .sv-win-h{padding-block:12px}
.v2-respond .sv-split{align-items:center}
/* 첫 화면 데모: 채팅 · 게시판을 탭으로 한 번에 하나 */
.v2-ftabs{display:flex;justify-content:center;gap:6px;margin:4px 0 20px}
.v2-ftabs button{font:inherit;border:0;cursor:pointer;height:44px;padding:0 22px;border-radius:999px;background:rgba(255,255,255,.08);color:#C9D1E3;font-weight:700;font-size:15px}
.v2-ftabs button.on{background:#fff;color:#0E1116}
.sv .sv-hero .flows{display:grid!important;gap:0!important}
.sv .sv-hero .flows>[data-flow]{grid-area:1/1;margin:0!important}
.sv .sv-hero .flows>[data-flow]{transition:opacity .45s ease}
.sv .sv-hero .flows>[data-flow].v2-off{opacity:0;pointer-events:none}
/* 스크롤 전환: 채팅 → 게시판을 한 덩어리로(데스크톱) */
@media(min-width:901px){
.v2-scrolly{position:relative}
.v2-stick{position:sticky;top:76px}
}
@media(min-width:901px) and (max-height:960px){.v2-stick .flows{zoom:.9}}
.sv .sv-hero .fl-h h3{display:none}
.sv .sv-hero .fl-h{justify-content:center;text-align:center}
.sv .sv-hero .v2-lead{margin-top:18px;font-size:clamp(18px,1.6vw,22px);font-weight:600;color:#DCE3F5!important;letter-spacing:-.02em}
@media(min-width:700px){.sv .sv-hero .v2-lead{white-space:nowrap}}
/* 게시판 초안: 근거 줄 구분 · 판매처 칩 글자색 */
.sv .sv-log > .sv-kv{margin-top:6px;padding:10px 14px;border-radius:10px;background:#F4F6FB;box-shadow:inset 0 0 0 1px #E3E7F0}
.sv .sv-log > .sv-kv span{color:#6B7384}
.sv .sv-bd-meta .sv-ch{color:#3F4654!important;background:#EEF0F4!important}
/* 채팅·담당자 탭: 글과 대화창을 붙이고 위쪽 맞춤(빈 칸 제거) */
@media(min-width:901px){
.v2-respond [data-pane=chat] .sv-split,.v2-respond [data-pane=handoff] .sv-split{display:grid!important;grid-template-columns:minmax(0,600px) 460px;gap:clamp(56px,7vw,120px);justify-content:start;align-items:center}
.v2-respond [data-pane=chat] .sv-txt,.v2-respond [data-pane=handoff] .sv-txt{max-width:640px}
.v2-respond [data-pane=chat] .sv-win,.v2-respond [data-pane=handoff] .sv-win{margin:0}
.v2-respond [data-pane] .sv-txt{padding-top:12px}
.v2-respond [data-pane=ai] .sv-split{align-items:start}
}
.v2-res{margin-top:28px;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.v2-res-h{font-size:13px;font-weight:700;color:#9FB0D2}
.v2-res dl{margin:10px 0 0;display:grid;gap:8px}
.v2-res dl div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;font-size:15px}
.v2-res dt{color:#9FB0D2}.v2-res dd{margin:0;color:#fff;font-weight:600}
/* 캘린더 미니 달력 */
.v2-mc{padding:14px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #E3E7F0}
.v2-mc-h{margin:0 0 8px;font-size:13px;font-weight:700;color:#0E1116!important}
.v2-mc-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.v2-mc-g b{font-size:10.5px;font-weight:600;color:#8A92A3;padding-bottom:2px}
.v2-mc-g span{font-size:11.5px;line-height:24px;border-radius:6px;color:#3F4654;font-variant-numeric:tabular-nums}
.v2-mc-g .in{background:#14855A;color:#fff;font-weight:700}
.v2-mc-g .off{background:#3F4654;color:#fff;font-weight:700}
.v2-mc-g .pr{background:#FCE7EF;color:#C8115A;font-weight:700}
@media(max-width:1100px){.v2-cal-in{grid-template-columns:minmax(0,1fr) minmax(0,440px)!important}.v2-mc{display:none}}
/* 문의 한 건: 카드 높이 통일 · 여백 축소 */
@media(min-width:901px){.ek-one-line{align-items:stretch}.ek-one-line li{display:flex;flex-direction:column}.ek-one .cd{flex:1;min-height:0!important;padding:12px 14px}}
.ek-one .cd .chip{margin-top:6px}
.ek-one .cd br+.chip{margin-top:6px}
/* 문의 한 건: 상태 칩은 카드 오른쪽 위로(모든 카드 2줄 높이) */
.ek-one .cd{position:relative}
.ek-one .cd .chip.ok,.ek-one .cd .chip.ai{position:absolute;top:10px;right:12px;margin:0!important;height:22px;font-size:11.5px}
.ek-one .cd br:has(+ .chip){display:none}
.ek-one .th{width:34px!important;height:40px!important}
.ek-one .it{gap:8px}
/* 예시 표시: 리포트(숫자 화면)에만 */
.sv .d-ex,.sv .ek-one-ex{display:none!important}
.sv #report .d-ex{display:block!important}
/* 문의 한 건: 화면에 들어오면 1→5 순서로 켜지고, 마지막에 시작 안내가 올라옴 */
@media (prefers-reduced-motion: no-preference){
.ek-one.v2-anim .ek-one-line li{opacity:.25;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.ek-one.v2-anim .ek-one-line li .dot{background:#2A3358;box-shadow:none;transition:background .3s,box-shadow .3s}
.ek-one.v2-anim .ek-one-line li.v2-on{opacity:1;transform:none}
.ek-one.v2-anim .ek-one-line li.v2-on .dot{background:#3D6BFF;box-shadow:0 0 0 6px rgba(61,107,255,.25)}
.ek-one.v2-anim .ek-one-line li.v2-now .cd{box-shadow:0 0 0 2px #3D6BFF,0 12px 30px rgba(61,107,255,.25)}
.ek-one.v2-anim .ek-one-line::after{content:"";position:absolute;left:4%;top:15px;height:2px;width:0;background:#3D6BFF;transition:width .7s ease}
.ek-one.v2-anim .ek-one-line[data-p="1"]::after{width:0}.ek-one.v2-anim .ek-one-line[data-p="2"]::after{width:23%}.ek-one.v2-anim .ek-one-line[data-p="3"]::after{width:46%}.ek-one.v2-anim .ek-one-line[data-p="4"]::after{width:69%}.ek-one.v2-anim .ek-one-line[data-p="5"]::after{width:92%}
.ek-one.v2-anim .ek-one-cta{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.ek-one.v2-anim.v2-done .ek-one-cta{opacity:1;transform:none}
.ek-one.v2-anim .ek-one-cta a{position:relative;overflow:hidden}
.ek-one.v2-anim.v2-done .ek-one-cta a::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:v2shine 1.2s .5s ease 1}
}
@keyframes v2shine{to{transform:translateX(120%)}}
@media(max-width:900px){.ek-one.v2-anim .ek-one-line::after{display:none}}
/* 달력 → 일정 연결 화살표 */
.v2-cal-in{position:relative}
.v2-link{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.v2-link path{fill:none;stroke-width:2.2;stroke-linecap:round;opacity:.22;transition:opacity .3s}
.v2-link path.on{opacity:1}
.v2-link path.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:v2draw .7s ease forwards}
@keyframes v2draw{to{stroke-dashoffset:0}}
.v2-ev li{transition:box-shadow .3s,transform .3s}
.v2-ev li.v2-hit{transform:translateX(4px);box-shadow:0 0 0 2px var(--hc),0 10px 24px rgba(14,17,22,.08)}
.v2-mc-g span.v2-hit{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--hc)}
@media(max-width:1100px){.v2-link{display:none}}
/* AI 응대 탭 진행 막대 */
.v2-tabs button{position:relative;overflow:hidden}
.v2-tabs button.v2-run::after{content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;border-radius:2px;background:#3D6BFF;transform:scaleX(0);transform-origin:left;animation:v2bar 8s linear forwards}
@keyframes v2bar{to{transform:scaleX(1)}}
.v2-link .v2-box{fill:none;stroke-width:2.2;opacity:0;transition:opacity .25s}
.v2-link .v2-box.on{opacity:1}



/* 첫 화면 탭 · 설명 간격 */
.sv .sv-hero .v2-ftabs{margin:28px 0 18px}
.sv .sv-hero .fl-h{margin-bottom:22px}
.sv .sv-hero .fl-h p{font-size:15px}
/* 모바일: 캘린더 카드 한 열(글자가 세로로 쪼개지던 문제) */
@media(max-width:900px){.v2-cal-in{grid-template-columns:minmax(0,1fr)!important}.v2-cal-in>div{max-width:none}}

/* 게시판 초안: 근거는 오른쪽 글 아래로 */
.v2-why{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:15px}
.v2-why span{color:#9FB0D2;font-size:13px;font-weight:700}
.v2-why b{color:#fff;font-weight:600}
.sv .v2-why{display:inline-flex;max-width:100%}
[data-pane=ai] .sv-win.has-ex{padding-bottom:0}
/* 2026-11-10 검수: '이 답변의 근거' 카드 위 간격 — 공통 .vd p{margin:0}이 덮어써 0이던 것을 원래 값(22px)으로 */
.sv .v2-why{margin-top:22px}