/* 자동 생성 파일 — 원본 redesign/d3/d.css · 반영 redesign/_tools/release.js. 여기서 직접 고치지 말 것 */
/* ════════════════════════════════════════════════════════════════
   메인(D3) — A의 디자인 시스템(편안한 바탕 + 절제된 브랜드 + 강조 방식)
   + C의 3카드 제품 장면 + B의 처리 범위 탭 배치. 모든 선택자는 .vd(body) 범위.
   바탕: 쿨 오프화이트 하나(2026-10-08 ?bg 전환 기능 삭제) — 분홍 계열 바탕 없음. 섹션은 바탕색/흰색으로만 구분.
   고정 규칙(변경 금지): 같은 행·열의 반복 요소(카드·패널·탭)는 내용·상태와 상관없이 폭·높이·위치가 같다.
     → grid 고정 열(minmax(0, 1fr))과 고정 높이로 잡고, 넘치면 문구를 줄인다(verify ETVerify.stable로 검사).
   ════════════════════════════════════════════════════════════════ */
.vd {
  --bg: #f5f6f8; --bg-2: #e8eaee; --surface: #ffffff; --surface-2: #f6f7f9;
  --ink: #16181d; --ink-2: #41454e; --ink-3: #575c66;
  --brand: #c8115a; --brand-deep: #96103f; --brand-soft: #fbe6ee;
  --ok: #16181d; --ok-soft: #eceef2;   /* 초록 사용 금지(2026-10-06, DESIGN_RULES): ok 토큰은 잉크·옅은 회색으로 — AI 완료 배지 = 옅은 회색 면 */
  /* 역할 색 4가지(2026-10-06, DESIGN_RULES 3장): AI 남색 · 상담원·사람 브랜드 · 고객사 잉크 · 중립 회색. 노랑 삭제 */
  --ai: #1d2d5c; --ai-soft: #e9ecf3;   /* AI · 이어링 = 진한 네이비(2026-10-07, 이전 #3b4a6b — 흐린 군청처럼 보였음) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --r1: 8px; --r2: 14px; --r3: 22px;
  --shadow: 0 24px 60px -30px rgba(22, 24, 29, .26), 0 2px 6px rgba(22, 24, 29, .05);
  --gutter: clamp(20px, 5vw, 100px);
  --wrap: min(100% - var(--gutter) * 2, 1440px);   /* 콘텐츠 최대 1440px(2026-10-03 변경, 1240px 폐기) · 섹션 배경은 풀블리드 */
  /* 글자 위계(2026-10-04 복원): 히어로 64~72 · 섹션 제목 38/700 · 카드 제목 21 · 핵심 숫자 24 · 본문 16 · 라벨 13
     섹션 제목은 항상 카드 안 어떤 글자보다 크다. 굵게는 한 덩어리에 2~3곳(제목·이름·핵심 숫자·흐름 칩) */
  --fs-h2: 38px; --fs-card: 21px; --fs-num: 24px; --fs-body: 16px; --fs-meta: 13px;
  /* 면 강조(테두리 강조 금지): 가장 강함 = 잉크 면 + 흰 글씨 · 보통 = 옅은 회색 면 · 흐림 = opacity .5 */
  --face: #eceef2; --on-ink-brand: #ff8fbb;
  /* 세로 리듬(2026-10-03 "박스 안은 알차게, 박스 사이·섹션 사이는 넉넉하게"): 섹션 사이 160 · 제목→내용 48 · 카드 사이 20~24 */
  --sec-y: 80px; --head-gap: 48px; --card-gap: 20px;
  --read: 38em;
  --fx: .28s;              /* 장면 전환 250~300ms — 장면 시간 안에 포함 */
  --stage-h: 420px;   /* 양쪽 카드 내용 실측 352px + 처리 목록 줄 여유(채팅 칸 높이 확보) — 폭별 값은 아래 미디어 쿼리 */
  /* 제품 장면 글자: 카드 질문 25/700 · 이어받는 사람 23/700 · 본문 16 · 채팅 15 · 부가 13 */
  --t-body: var(--fs-body); --t-chat: 15px; --t-meta: var(--fs-meta);
  /* 처리 범위 탭·요금 카드 고정 크기(세 탭·네 구간 중 가장 긴 내용 기준으로 한 번 정함) */
  --tab-h: 106px; --tc-h: 176px; --tb-h: 196px;
  --tabs-h: calc(var(--tab-h) * 3 + var(--s2) * 2);   /* 왼쪽 탭 3개 묶음 높이 = 오른쪽 패널 높이 */
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 15px; line-height: 1.6; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

.vd *, .vd *::before, .vd *::after { box-sizing: border-box; }
.vd img { max-width: 100%; height: auto; display: block; }
.vd a { color: inherit; }
.vd p, .vd h1, .vd h2, .vd h3, .vd ul, .vd ol, .vd dl, .vd dd { margin: 0; }
.vd ul, .vd ol { padding: 0; list-style: none; }
.vd h1, .vd h2, .vd h3 { text-wrap: balance; }
.vd p, .vd dd, .vd li { text-wrap: pretty; }
.vd .ph, .vd .ln { display: inline-block; }
.vd .nb { white-space: nowrap; }
.vd button { font: inherit; color: inherit; cursor: pointer; }
.vd :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.vd .d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vd .d-skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r1); }
.vd .d-skip:focus { left: 8px; }
.vd .d-wrap { width: var(--wrap); margin-inline: auto; }
.vd .d-ic { width: 18px; height: 18px; flex: none; }

/* 버튼 */
.vd .d-btn { display: inline-flex; align-items: center; justify-content: safe center; min-height: 48px; padding: 0 var(--s5); border-radius: 999px; font-weight: 600; text-decoration: none; border: 0; white-space: nowrap; transition: background .2s, color .2s; }
.vd .d-btn--lg { min-height: 52px; padding: 0 var(--s6); font-size: 16px; }
.vd .d-btn--sm { min-height: 44px; padding: 0 var(--s4); font-size: 15px; }
.vd .d-btn--brand { background: var(--brand); color: #fff; }
.vd .d-btn--brand:hover { background: var(--brand-deep); }
.vd .d-btn--ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(22, 24, 29, .2); }
.vd .d-btn--ghost:hover { background: var(--bg-2); }
.vd .d-btn--inv { background: #fff; color: var(--brand-deep); }
.vd .d-btn--ghost-inv { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.vd .d-btn--ghost-inv:hover { background: rgba(255,255,255,.1); }
.vd .d-linkbtn { background: none; border: 0; padding: 0 var(--s2); min-height: 44px; font-weight: 700; color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.vd .d-linkbtn[aria-pressed="true"] { color: var(--ink-3); text-decoration: none; cursor: default; }

/* 네비 — 불투명. 로고 40px(원본 1762×696px → 고해상도에서도 선명), 메뉴·버튼은 세로 가운데 */
.vd .d-nav { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 0 rgba(22, 24, 29, .06); }   /* 헤더 = 반투명 흰색(뒤 내용이 흐릿하게 비침, 2026-10-07) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vd .d-nav { background: var(--surface); box-shadow: 0 1px 0 #e6e8ec; } }   /* 흐림을 못 쓰는 브라우저 = 흰색 */
@media (prefers-reduced-transparency: reduce) { .vd .d-nav { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.vd .d-nav-in { display: flex; align-items: center; gap: var(--s6); min-height: 76px; }
.vd .d-logo { display: flex; align-items: center; }
.vd .d-logo img { height: 40px; width: auto; }
/* 헤더 3칸: 로고(왼쪽) · 메뉴(페이지 가운데) · 로그인·버튼(오른쪽). 양쪽 칸 같은 폭이라 메뉴가 정확히 가운데 */
.vd .d-nav .d-nav-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s6); }
.vd .d-nav .d-logo { grid-column: 1; justify-self: start; }
.vd .d-nav-links { grid-column: 2; display: flex; align-items: center; gap: 28px; font-weight: 500; font-size: 16px; }
.vd .d-nav-links a { text-decoration: none; color: var(--ink-2); padding: var(--s2) 0; white-space: nowrap; }
.vd .d-nav-links a:hover { color: var(--ink); }
/* 현재 위치(결정 86) — 모든 페이지 같은 항목 · 같은 자리, 지금 페이지 항목만 표시. 눌러도 이동 안 함(로고는 그대로 링크) */
.vd .d-nav-links a[aria-current="page"], .vd .d-nav-dlinks a[aria-current="page"], .vd .d-nav-login[aria-current="page"], .vd .d-nav-pill[aria-current="page"] { pointer-events: none; cursor: default; }
.vd .d-nav-links a[aria-current="page"], .vd .d-nav-dlinks a[aria-current="page"], .vd .d-nav-login[aria-current="page"] { color: var(--ink); font-weight: 700; }
.vd .d-nav-links a[aria-current="page"], .vd .d-nav-dlinks a[aria-current="page"], .vd .d-nav-login[aria-current="page"] span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }   /* 글자 항목 = 잉크 진하게 + 2px 밑줄 */
.vd .d-nav-pill[aria-current="page"] { opacity: .55; }   /* 버튼형 = 조금 옅게 */
/* 헤더 C안 — 로그인(아이콘 글자) | 회원가입(아이콘 + 검정 pill) · 도입 상담하기(아이콘 + 브랜드 pill). 아이콘 17px 선, 글자 앞 6px */
.vd .d-nav-ic { flex: none; width: 17px; height: 17px; }
.vd .d-nav-act { grid-column: 3; justify-self: end; display: flex; align-items: center; }
.vd .d-nav-login { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.vd .d-nav-login:hover { color: var(--brand-deep); }
.vd .d-nav-sep { flex: none; width: 1px; height: 14px; margin: 0 12px; background: #d3d6dc; }
.vd .d-nav-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 18px; border: 0; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: background .2s; }
.vd .d-nav-pill--ink { background: var(--ink); color: #fff; }
.vd .d-nav-pill--ink:hover { background: #2a2d35; }
.vd .d-nav-pill--brand { background: var(--brand); color: #fff; }
.vd .d-nav-pill--brand:hover { background: var(--brand-deep); }
.vd .d-nav-pill--line { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(22, 24, 29, .2); }
.vd .d-nav-act .d-nav-pill + .d-nav-pill { margin-left: 6px; }
.vd .d-nav-m { grid-column: 3; justify-self: end; display: none; align-items: center; gap: 6px; }
.vd .d-nav-pill--sm { height: 36px; padding: 0 14px; font-size: 14px; }
.vd .d-nav-burger { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; }
.vd .d-nav-burger .d-nav-ic { width: 24px; height: 24px; }
.vd .d-nav-burger .d-nav-ic + .d-nav-ic, .vd .d-nav.is-open .d-nav-burger .d-nav-ic:first-child { display: none; }
.vd .d-nav.is-open .d-nav-burger .d-nav-ic + .d-nav-ic { display: block; }
.vd .d-nav-drawer { position: absolute; top: 100%; left: 0; right: 0; padding: 4px 0 20px; background: var(--surface); box-shadow: 0 1px 0 #e6e8ec, 0 16px 28px rgba(22, 24, 29, .1); }
.vd .d-nav-drawer[hidden] { display: none; }
.vd .d-nav-dlinks { display: grid; margin-bottom: 12px; }
.vd .d-nav-dlinks a { display: flex; align-items: center; min-height: 52px; font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; }
.vd .d-nav-pill--full { width: 100%; height: 50px; font-size: 16px; }
.vd .d-nav-dauth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.vd .d-nav-dauth .d-nav-pill { height: 48px; font-size: 15px; }
/* 메뉴·버튼이 한 줄에 다 들어가지 않는 폭은 모바일 헤더로(글자는 줄바꿈·잘림 없음) */
@media (max-width: 1080px) {
  .vd .d-nav-links, .vd .d-nav-act { display: none; }
  .vd .d-nav-m { display: flex; }
}

/* ① Hero — 가운데 정렬(2026-10-04): 라벨 → 헤드라인 → 서브카피 → 버튼 → 가격 한 줄 → 흐르는 문의 띠
   헤드라인 최대 약 960px, 서브카피 최대 약 640px. 간격 20 / 28 / 36 / 20 / 32. 위 80 · 띠~장면 제목 52
   (이 구간만 '섹션 사이 140~180px' 예외 — 1440×900 첫 화면 아래에 장면 제목·단계 막대가 보이게) */
.vd .d-hero { padding: 64px 0 52px; text-align: center; }   /* 첫 라벨 시작 = 서비스 소개와 같은 64(모바일 40) — 결정 78 */
.vd .d-hero-grid { display: flex; flex-direction: column; align-items: center; }
.vd .d-eyebrow { font-weight: 500; color: var(--brand-deep); font-size: 13.5px; }
.vd .d-h1 { max-width: 960px; margin-top: 20px; font-size: clamp(36px, 4.8vw, 70px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; text-wrap: balance; }
.vd .d-lead { max-width: 640px; margin-top: 28px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.vd .d-lead-ln { display: block; }   /* 요청한 줄바꿈 위치 그대로 */
.vd .d-cta-row { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
.vd .d-hero .d-btn--ghost { box-shadow: 0 1px 2px rgba(22, 24, 29, .06), 0 6px 18px -8px rgba(22, 24, 29, .18); }   /* 흰 면 버튼(테두리 없이) */
/* 가격 한 줄 — 10만 원 잉크 600 · 50만 원 브랜드 600 · 나머지 400 · VAT 별도는 한 단계 작은 중립색 */
.vd .d-price-line { margin-top: 20px; font-size: 16px; font-weight: 400; color: var(--ink-2); text-wrap: balance; }
.vd .d-pl-seg { display: inline-block; }
.vd .d-pl-ink { font-weight: 600; color: var(--ink); }
.vd .d-pl-brand { font-weight: 600; color: var(--brand-deep); }
.vd .d-price-line small { font-size: 13.5px; color: var(--ink-3); margin-left: 2px; }
/* 흐르는 문의 띠 — 흰 면 알약(테두리 없음), 양 끝은 mask로 바탕에 녹아듦. 위치는 d.js가 진행률로 옮김 */
.vd .d-ticker { align-self: stretch; margin-top: 32px; overflow: hidden; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.vd .d-tick-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; will-change: transform; }
.vd .d-tick { flex: none; display: inline-flex; align-items: center; gap: var(--s2); margin-right: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(22, 24, 29, .05); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.vd .d-tick-b { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.vd .d-tick-b--ai { background: var(--face); color: var(--ink); }
.vd .d-tick-b--human { background: var(--brand); color: #fff; }
.vd .d-price-anchor { max-width: 640px; margin-top: 24px; color: var(--ink-2); }
.vd .d-price-anchor .et-anchor-main, .vd .d-price-anchor .et-anchor-sub { display: block; text-wrap: balance; }
.vd .d-price-anchor .et-anchor-main { font-size: 16px; font-weight: 500; color: var(--ink); }
.vd .d-price-anchor .et-anchor-main b { color: var(--brand-deep); font-weight: 600; }
.vd .d-price-anchor .et-anchor-sub { margin-top: 4px; font-size: 13.5px; color: var(--ink-3); }
.vd .d-price-anchor .et-anchor-main > span, .vd .d-price-anchor .et-anchor-sub > span { white-space: nowrap; }

/* ② 제품 장면 — 장면 제목 → (28px) 단계 막대 → (28px) 3카드 */
.vd .d-scene { padding: var(--sec-y) 0; scroll-margin-top: 92px; }   /* D3: 처리 범위 다음 — 일반 섹션 간격 */
.vd .d-scene-h { margin-bottom: 28px; }
.vd .d-controls { margin-top: 22px; }   /* D2: 무대 아래 재생 막대 줄 */
.vd .d-foot-row { display: flex; justify-content: space-between; gap: var(--s3); min-height: 1.6em; margin-top: var(--s3); font-size: 13px; color: var(--ink-3); }
.vd .d-hint { margin-left: auto; }
.vd .d-status { font-size: 13px; color: var(--ink-3); }

/* 재생 컨트롤 — 작은 원형 버튼 + 얇은 막대 단계(3단계는 한 칸을 둘로) */
.vd .d-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s4); align-items: end; }
.vd .d-time { font-size: 13px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; padding-bottom: 4px; }
.vd .d-play { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px rgba(22, 24, 29, .16); }
.vd .d-play:hover { color: var(--ink); background: var(--bg-2); }
.vd .d-play-ic { width: 11px; height: 11px; display: inline-block; background: currentColor; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.vd [data-manual="true"] .d-play-ic { clip-path: polygon(12% 0, 100% 50%, 12% 100%); }
.vd .d-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1.1fr); gap: var(--s2); align-items: end; }
.vd .d-steps > li { min-width: 0; }
.vd .d-step { width: 100%; display: grid; gap: 7px; padding: var(--s1) 0; border: 0; background: none; text-align: left; color: var(--ink-3); min-width: 0; }
.vd .d-step[hidden] { display: none; }
.vd .d-step-bar { height: 8px; border-radius: 4px; background: rgba(22, 24, 29, .12); overflow: hidden; }
.vd .d-step-bar i { display: block; height: 100%; background: var(--brand); transform-origin: left; transform: scaleX(var(--p, 0)); }
.vd .d-step-l { font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd .d-step:hover { color: var(--ink-2); }
.vd .d-step[aria-current="step"] { color: var(--ink); }
.vd .d-step[aria-current="step"] .d-step-l { font-weight: 600; }
/* 처리 경로: 한 막대 안을 둘로 — 두 반쪽 사이에 작은 점 */
.vd .d-steps-split { min-width: 0; }
.vd .d-split-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; }
.vd .d-split-row::before { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink-3); }
.vd .is-one-route .d-split-row { grid-template-columns: minmax(0, 1fr); }
.vd .is-one-route .d-split-row::before { content: none; }

/* 채팅 카드 상단 — 같은 시간에 들어온 문의 4건(한 줄짜리 작은 목록, 행 높이 고정) */
.vd .d-qlist { margin: var(--s2) 0 0; padding: 0; list-style: none; display: grid; grid-auto-rows: 28px; gap: 2px; }
.vd .d-q { min-width: 0; display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; align-items: center; gap: var(--s2); padding: 0 3px 0 var(--s2); border-radius: var(--r1); font-size: 13px; color: var(--ink-2); transition: background var(--fx), color var(--fx); }
.vd .d-q-ch { font-size: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd .d-q-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd .d-q.is-focus { background: var(--face); color: var(--ink); }
.vd .d-q.is-focus .d-q-t { font-weight: 700; }
.vd .d-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background var(--fx), color var(--fx); }
.vd .d-badge--new { background: var(--bg-2); color: var(--ink); }
.vd .d-badge--mute { background: var(--bg-2); color: var(--ink-2); }
.vd .d-badge--ok { background: var(--ok-soft); color: var(--ok); }
.vd .d-badge--brand { background: var(--brand); color: #fff; }
.vd .d-badge--inv { background: #fff; color: var(--brand-deep); }

/* 무대 — 바깥 크기 고정. 이어링 카드 · 채팅 · 이어톡 카드(같은 높이, 열 폭 고정) */
.vd .d-stage { height: var(--stage-h); cursor: pointer; }
.vd .d-arena { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: var(--card-gap); }

/* 가운데 채팅 */
.vd .d-chat { min-height: 0; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r3); box-shadow: var(--shadow); padding: var(--s4); overflow: hidden; }
/* 문의함 머리 띠 — 가운데 카드 안의 유일한 검정 면. 점은 가운데가 주인공일 때(1·2단계)만 1.6초 주기로 깜빡임 */
.vd .d-chat-h { display: flex; align-items: center; gap: var(--s2); margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) 0; padding: 10px var(--s4); background: var(--ink); color: #fff; font-size: 13px; white-space: nowrap; }
.vd .d-chat-h b { font-weight: 600; }
.vd .d-chat-h small { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: #9ea3ad; }
.vd .d-chat-new { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: #e6e8ee; }
.vd .d-live { width: 7px; height: 7px; border-radius: 50%; background: #ff5c97; }
.vd [data-focus="chat"] .d-live { animation: vd-live 1.6s ease-in-out infinite; }
.vd [data-manual="true"] .d-live { animation-play-state: paused; }   /* 클릭 정지 중엔 멈춤 */
@keyframes vd-live { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.vd .d-order { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--s2); align-items: center; margin: var(--s2) 0 var(--s1); padding: 6px var(--s3); background: var(--surface-2); border-radius: var(--r2); font-size: 13px; line-height: 1.4; color: var(--ink-2); white-space: nowrap; }   /* 결정 58: 두 줄(이름 / 주문) — 어떤 폭에서도 말줄임 없이 */
.vd .d-order b { grid-column: 2; grid-row: 1; font-weight: 600; color: var(--ink); }
.vd .d-order span:not(.d-badge) { grid-column: 2; grid-row: 2; font-size: 12.5px; }
.vd .d-order .d-badge { grid-column: 3; grid-row: 1 / span 2; }
.vd .d-order-ic { grid-column: 1; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--brand-deep); }
/* 메신저처럼: 아래 정렬, 새 메시지가 붙으면 이전 메시지가 위로 밀려 올라가고 위쪽은 mask로 흐려진다 */
.vd .d-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s2); overflow: hidden; padding: 4px 4px 4px 2px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32px); mask-image: linear-gradient(to bottom, transparent 0, #000 32px); }
.vd .d-sep { align-self: center; font-size: 12.5px; color: var(--ink-3); }
.vd .d-m { display: grid; gap: 4px; max-width: 94%; transition: opacity var(--fx); }
.vd .d-m p { font-size: var(--t-chat); line-height: 1.5; }
.vd .d-m > p:not(.d-checked):not(.d-label), .vd .d-bub { padding: var(--s2) var(--s4); border-radius: var(--r2); }
.vd .d-m--cus { align-self: flex-start; }
.vd .d-m--cus > p { background: #0a6fd6; color: #fff; border-radius: 18px 18px 18px 6px; }   /* 고객 말풍선 = 파랑(사이트 전체에서 고객 말풍선에만) */
.vd .d-m--ai, .vd .d-m--staff { align-self: flex-end; justify-items: end; }
.vd .d-m--ai .d-bub { background: var(--face); color: var(--ink); border-radius: 18px 18px 6px 18px; }
.vd .d-m--staff > p { background: var(--face); color: var(--ink); border-radius: 18px 18px 6px 18px; }   /* 상담원·담당자 말풍선 = AI 답변과 같은 옅은 회색 면(가운데 카드의 검정 면은 머리 띠 하나) */
.vd .d-av { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; }
.vd .d-av .d-ic { width: 12px; height: 12px; }
.vd .d-av--staff { background: var(--brand); }
.vd .d-av--client { background: var(--ink); }
.vd .d-who--client { color: var(--ink); }
.vd .d-who { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.vd .d-who .d-ic { width: 16px; height: 16px; }
.vd .d-who--staff { color: var(--brand-deep); font-weight: 600; }
.vd .d-ai { display: inline-grid; place-items: center; height: 18px; padding: 0 5px; border-radius: 5px; background: var(--ai); color: #fff; font-size: 12px; font-weight: 500; }
.vd .d-checked { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px !important; font-weight: 500; color: var(--ok); }
.vd .d-checked .d-ic { width: 15px; height: 15px; }
.vd .d-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px !important; color: var(--ink-3); }
.vd .d-label .d-ic { width: 15px; height: 15px; }
.vd .d-sys { align-self: stretch; display: grid; gap: 4px; padding: var(--s2) var(--s3); border-radius: var(--r2); background: var(--face); transition: opacity var(--fx); }   /* 테두리 없이 옅은 회색 면 */
.vd .d-sys-t { display: flex; align-items: center; gap: 6px; font-size: var(--t-chat); font-weight: 600; color: var(--ink); }
.vd .d-sys-t .d-ic { color: var(--brand-deep); }
.vd .d-to { display: none; }
.vd [data-scene][data-to="earring"] .d-to--earring, .vd [data-scene][data-to="eartalk"] .d-to--eartalk, .vd [data-scene][data-to="any"] .d-to--any { display: inline; }
.vd .d-sys-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 400; color: var(--ink-2); }
.vd .d-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface); }
.vd .d-chip--reason { background: var(--surface); color: var(--ink-2); }   /* 이관 이유 — 중립 */
.vd .d-ar { color: var(--brand); font-weight: 400; }
.vd .d-res { display: none; }
.vd [data-scene][data-mode="earring"] .d-res--earring.is-shown, .vd [data-scene][data-mode="eartalk"] .d-res--eartalk.is-shown { display: grid; }
.vd .d-log { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--s3); border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 12.5px; font-weight: 500; }
.vd .d-msgs [data-from]:not(.is-shown) { display: none; }
.vd .d-msgs [data-from].is-cur:not([data-at]) { animation: vd-in var(--fx) ease; }   /* 장면 안 순차 등장([data-at])은 자기 시점에 한 번만 나타남 — 등장 효과가 겹치면 한 번 보였다 사라졌다 다시 나타나는 버벅임(2026-10-06 수정) */
.vd .d-msgs [data-from].is-past { opacity: .5; }   /* 현재 메시지는 테두리 없이 — 지난 메시지가 흐려져 구분 */
.vd .d-old { opacity: .5; }
.vd [data-at] { opacity: 0; transform: translateY(6px); transition: opacity var(--fx) ease, transform var(--fx) ease; }
.vd [data-at].is-on { opacity: 1; transform: none; }
/* 대화창 안 순차 등장 메시지(고객 새 주소)는 차례가 오기 전엔 자리도 차지하지 않는다 — 차례가 오면 펼쳐지며 이전 메시지를 위로 밀어 올림(메신저처럼). 빈 자리·질문 밀림 방지 */
.vd .d-msgs .d-m[data-at] { max-height: 0; margin-top: calc(-1 * var(--s2)); overflow: hidden; transition: opacity var(--fx) ease, transform var(--fx) ease, max-height .36s cubic-bezier(.2,.7,.2,1), margin-top .36s cubic-bezier(.2,.7,.2,1); }
.vd .d-msgs .d-m[data-at].is-on { max-height: 140px; margin-top: 0; }
.vd .d-msgs > * { flex-shrink: 0; }   /* 대화창이 넘쳐도 메시지는 줄어들지 않고 위로 밀려 mask로 흐려짐 */
@keyframes vd-in { from { opacity: 0; } to { opacity: 1; } }

/* 양쪽 카드 — "고객사에서 할 일 3개 vs 0개"(2026-10-04): 같은 위치에 같은 항목
   제목 타일(질문 + 상품 라벨 알약 한 줄) → 고객사에서 할 일 n개(라벨 14/400 + 개수 25/600) → 처리 목록 3줄 → 바닥 줄(이 문의 1건 + 제공량 배지 / 가격 · 어울리는 팀).
   강조 = 제목 타일 잉크 면 + 라벨 알약 브랜드, 비교 상대 카드는 opacity .7. 테두리 강조 없음(체크박스 외곽선은 빈 칸 표시용 모양) */
.vd .d-card { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--s4); padding: var(--s3) var(--s3) var(--s4); background: var(--surface); border-radius: var(--r3); box-shadow: var(--shadow); overflow: hidden; transition: opacity var(--fx); }
.vd .d-chat, .vd .d-card { position: relative; transition: transform .34s cubic-bezier(.2,.7,.2,1), box-shadow .34s ease, opacity .34s ease, filter .34s ease; }
.vd [data-focus="chat"] .d-chat,
.vd [data-focus="earring"] .d-card--earring,
.vd [data-focus="eartalk"] .d-card--eartalk { transform: scale(1.03); box-shadow: 0 18px 40px rgba(22, 24, 29, .16); z-index: 1; }
.vd [data-focus="chat"] .d-card { filter: grayscale(1) blur(.6px); opacity: .45; }
.vd [data-focus="earring"] .d-chat, .vd [data-focus="eartalk"] .d-chat { opacity: .55; }
.vd [data-focus="earring"] .d-card--eartalk, .vd [data-focus="eartalk"] .d-card--earring { filter: grayscale(1); opacity: .45; }
@media (prefers-reduced-motion: reduce) {   /* 확대·흐림·전환 없이 투명도와 색만 즉시 */
  .vd .d-chat, .vd .d-card { transform: none !important; transition: none; }
  .vd [data-focus="chat"] .d-card { filter: grayscale(1); }
  .vd .d-live { animation: none !important; }
}
.vd .d-card-q { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: 64px; padding: var(--s3) var(--s4) var(--s3) var(--s5); border: 0; border-radius: var(--r2); background: var(--face); color: var(--ink); text-align: left; transition: background var(--fx), color var(--fx); }
.vd .d-card-q:hover { background: #e2e5ea; }
.vd .d-card-qt { min-width: 0; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd .d-card-tag { flex: none; display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; transition: background var(--fx), color var(--fx); }
.vd .d-card.is-hl .d-card-q, .vd .d-card-q[aria-pressed="true"] { background: var(--ink); color: #fff; }
.vd .d-card.is-hl .d-card-tag, .vd .d-card-q[aria-pressed="true"] .d-card-tag { background: var(--brand); color: #fff; }
/* 고객사에서 할 일 n개 — 한 줄, 숫자만 강조(3개 잉크 · 0개 브랜드) */
.vd .d-cnt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--s2); padding: 0 var(--s2); }
.vd .d-cnt-k { font-size: 14px; font-weight: 400; color: var(--ink-3); }
.vd .d-cnt-n { font-size: 25px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.vd .d-cnt-n.is-zero { color: var(--brand-deep); }
.vd .d-cnt-note { font-size: 14px; color: var(--ink-2); }
.vd .d-list { min-height: 0; display: grid; }
/* 이어링 — 빈 체크박스 3줄(옅은 회색 면, 테두리 없음). 줄 높이는 남는 높이를 셋으로 */
.vd .d-todo { margin: 0; padding: 0; list-style: none; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.vd .d-todo li { min-height: 0; display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); border-radius: var(--r2); background: var(--face); font-size: var(--fs-body); font-weight: 500; color: var(--ink); line-height: 1.35; overflow: hidden; }
.vd .d-cb { position: relative; flex: none; width: 22px; height: 22px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 2px var(--ink); overflow: hidden; }
.vd .d-cb i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 6px; background: var(--ink); color: #fff; transform: scale(var(--ck, 0)); opacity: var(--ck, 0); }   /* 3-a에서 차례로 채워짐(잉크) */
.vd .d-cb .d-ic { width: 15px; height: 15px; stroke-width: 2.6; }
.vd .d-todo li.is-checked > span:last-child { color: var(--ink-2); }
/* 이어톡 — 잉크 면 상자: 머리줄(헤드셋 아바타 + 처리 완료) + 완료 3줄(체크 칸 브랜드로 채움, 자리 미리 잡음) */
.vd .d-donebox { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--ink); color: #fff; overflow: hidden; }
.vd .d-done-h { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); font-weight: 600; }
.vd .d-hs { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; }
.vd .d-hs .d-ic { width: 18px; height: 18px; }
.vd .d-done { margin: 0; padding: 0; list-style: none; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vd .d-done-row { --ck: 0; min-height: 0; display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s3); border-radius: 10px; background: #2a2d35; font-size: var(--fs-body); font-weight: 500; line-height: 1.35; }
.vd .d-ck { position: relative; flex: none; width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.vd .d-ck i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 6px; background: var(--brand); color: #fff; transform: scale(var(--ck)); opacity: var(--ck); }
.vd .d-ck .d-ic { width: 15px; height: 15px; stroke-width: 2.6; }
.vd .d-done-t { min-width: 0; white-space: nowrap; overflow: hidden; }
.vd .d-done-row.is-typing .d-done-t::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--on-ink-brand); }
/* 장면 카드 "고객사가 할 일" 상자(D3 결정 47) — 두 카드 같은 규격: 머리줄(라벨 14/500 · 개수 배지 12/500 알약) + 흰 줄 3개 + 아래 작은 자리 18px.
   값(--ck 체크 · --pop 튐 · --self · --out 3줄 사라짐 · --dark 상자 잉크 · --px 대신 처리 · --c 칩)은 d.js가 장면 경과 시간으로 매 프레임 넣는다(CSS 전환 없음) */
.vd .d-tbox { --dark: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) 18px; gap: 8px; padding: 12px 12px 8px; border-radius: var(--r2); background: color-mix(in srgb, var(--ink) calc(var(--dark) * 100%), var(--face)); overflow: hidden; }
.vd .d-tbox-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0 4px; }
.vd .d-tbox-k { font-size: 14px; font-weight: 500; color: color-mix(in srgb, #fff calc(var(--dark) * 100%), var(--ink-2)); }
.vd .d-tbox-n { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; transform: scale(var(--pop, 1)); }
.vd .d-tbox-n.is-zero { background: var(--brand); }
.vd .d-tbox-body { min-height: 0; display: grid; container-type: inline-size; }
.vd .d-tbox-body > * { grid-area: 1 / 1; min-height: 0; }
.vd .d-tbox .d-todo { margin: 0; padding: 0; list-style: none; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; opacity: calc(1 - var(--out, 0)); transform: scale(calc(1 - .08 * var(--out, 0))); }
.vd .d-tbox .d-todo li { min-height: 0; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 10px; background: var(--surface); font-size: var(--fs-body); font-weight: 500; color: var(--ink); line-height: 1.35; overflow: hidden; }
.vd .d-tbox .d-cb { position: relative; flex: none; width: 20px; height: 20px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); overflow: hidden; transform: scale(var(--pop, 1)); }
.vd .d-tbox .d-cb i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 5px; background: var(--ink); color: #fff; transform: none; opacity: var(--ck, 0); }
.vd .d-tbox .d-cb svg { width: 14px; height: 14px; }
.vd .d-self { justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; font-weight: 500; color: var(--ink-2); white-space: nowrap; opacity: var(--self, 0); }
.vd .d-sav { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; }
.vd .d-sav .d-ic { width: 11px; height: 11px; }
.vd .d-proxy { justify-self: center; width: 78%; display: grid; align-content: center; gap: 10px; padding: 0; opacity: var(--px, 0); transform: translateY(calc((1 - var(--px, 0)) * 8px)); pointer-events: none; }   /* D3 결정 55: 장면의 결론 — 검정 영역 폭 78%, 세로 가운데, 높이는 왼쪽 할 일 3줄과 비슷하게 */
.vd .d-proxy-h { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: clamp(15px, 5.5cqi, 21px); font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; white-space: nowrap; }   /* 결론 배너 — 아이콘 + 큰 글자 한 줄(상자 폭 기준 크기: 1440 ≈ 20px · 1920 21px) */
.vd .d-pav { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; }
.vd .d-pav .d-ic { width: 17px; height: 17px; }
.vd .d-proxy-chips { display: grid; gap: 6px; margin: 0; }
.vd .d-chip2 { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; background: #2a2d35; color: #fff; font-size: 14.5px; font-weight: 600; white-space: nowrap; opacity: var(--c, 0); transform: scale(calc(.9 + .1 * var(--c, 0))); }   /* 완료 칩 = 왼쪽 할 일 행과 비슷한 무게의 줄 */
.vd .d-chip2 svg { flex: none; width: 15px; height: 15px; color: #ff5c97; }
@media (max-width: 760px) {
  .vd .d-tbox { gap: 5px; padding: 8px 8px 5px; grid-template-rows: auto minmax(0, 1fr) 14px; }   /* 모바일: 셋째 줄(세 줄 글자)이 잘리지 않게 상자 안 간격을 줄여 줄 높이 확보(상자 크기는 그대로) */
  .vd .d-tbox-h { padding: 0 2px; }
  .vd .d-tbox-k { font-size: 12px; }
  .vd .d-tbox-n { height: 20px; padding: 0 7px; font-size: 12px; }
  .vd .d-tbox .d-todo { gap: 4px; }
  .vd .d-tbox .d-todo li { gap: 8px; padding: 0 8px; font-size: 13px; line-height: 1.24; }
  .vd .d-tbox .d-cb { width: 16px; height: 16px; border-radius: 4px; }
  .vd .d-tbox .d-cb svg { width: 11px; height: 11px; }
  .vd .d-self { gap: 4px; font-size: 10px; }
  .vd .d-sav { width: 14px; height: 14px; }
  .vd .d-proxy { width: 94%; gap: 6px; }
  .vd .d-proxy-h { flex-direction: column; gap: 4px; padding: 7px 8px; border-radius: 12px; background: #2a2d35; font-size: 12px; letter-spacing: -0.02em; white-space: normal; text-align: center; }
  .vd .d-proxy-chips { gap: 4px; }
  .vd .d-pav { width: 18px; height: 18px; } .vd .d-pav .d-ic { width: 11px; height: 11px; }
  .vd .d-chip2 { height: 22px; gap: 4px; padding: 0 7px; border-radius: 7px; font-size: 11px; } .vd .d-chip2 svg { width: 11px; height: 11px; }
}
/* 바닥 줄 */
.vd .d-card-foot { display: grid; gap: 2px; padding: 0 var(--s2); }
.vd .d-card-use { display: flex; align-items: center; gap: var(--s2); font-size: 15px; font-weight: 600; color: var(--ink); }
.vd .d-card-use .d-badge { font-size: 12.5px; }
.vd .d-card-meta { font-size: 13px; font-weight: 400; color: var(--ink-3); }

/* ②-b 문제 공감 — 카드 3개 한 줄 같은 크기(subgrid). 고민 = 옅은 회색 말풍선(파랑 금지) · 해결 = [AI] 작은 태그 + 한 줄 */
.vd .d-prob { padding: 0 0 var(--sec-y); }   /* D3: 히어로 바로 다음 — 첫 화면 예외 간격(히어로 띠 → 제목 52px) */
.vd .d-prob-h { margin-bottom: var(--head-gap); }
.vd .d-prob-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--card-gap); margin: 0; padding: 0; list-style: none; }
.vd .d-prob-card { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: var(--s4); padding: var(--s4) var(--s4) var(--s5); border-radius: var(--r3); background: var(--surface); box-shadow: var(--shadow); }
.vd .d-prob-q { padding: 20px 22px; border-radius: 18px 18px 18px 6px; background: var(--face); font-size: 20px; font-weight: 600; line-height: 1.45; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.vd .d-prob-a { display: flex; align-items: flex-start; gap: 10px; padding: 0 var(--s2); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.vd .d-prob-a .d-rtag { flex: none; margin-top: 0; }
.vd .d-prob-card.is-pre { opacity: 0; transition: opacity .45s ease; }
.vd .d-prob-card.is-pre.is-in { opacity: 1; }
/* ③-b 왜 이어;톡 띠 — 처리 범위(흰 바탕) 바로 아래, 위아래 간격은 섹션 사이의 절반(80px) */
.vd .d-why { padding: var(--sec-y) 0; background: var(--bg); }   /* 2026-10-07: 요금(흰) ↔ 마지막 CTA(잉크) 사이 — 페이지 회색, 강점·로고는 흰 판 */   /* D3 결정 48: 요금(페이지 바탕) ↔ 마지막 CTA(잉크) 사이 정식 구간, 흰 바탕 */
.vd .d-why-h { margin-bottom: var(--head-gap); }
.vd .d-why-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.vd .d-why-list li { display: grid; justify-items: start; align-content: start; gap: 6px; min-width: 0; padding: 30px 30px 32px; border-radius: 24px; background: var(--surface); }
.vd .d-why-list .d-why-ic { width: 44px; height: 44px; margin-bottom: 12px; }
.vd .d-why-list .d-why-ic .d-ic { width: 22px; height: 22px; }
.vd .d-why-list p { display: grid; gap: 6px; margin: 0; }
.vd .d-why-list b { font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); }
.vd .d-why-list p span { font-size: 15.5px; line-height: 1.6; color: var(--ink-3); }
.vd .d-why .d-brands { margin-top: 24px; padding: 36px 40px; border-radius: 24px; background: var(--surface); }   /* 로고 영역 = 흰 판 하나(그리드 그대로) */   /* D3: 요금 ↔ 마지막 CTA 사이, 위아래 간격은 섹션 사이의 절반 안팎 */
.vd .d-why-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin: 0; padding: 22px 28px; border-radius: var(--r3); background: var(--bg); list-style: none; }
.vd .d-why-band li { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vd .d-why-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; }
.vd .d-why-ic .d-ic { width: 20px; height: 20px; }
.vd .d-why-ic--ink { background: var(--ink); }
.vd .d-why-ic--ai { background: var(--ai); }   /* AI 아이콘 = 남색 */
.vd .d-why-ic--hu { background: var(--brand); }
.vd .d-why-band p { display: grid; gap: 2px; min-width: 0; }
.vd .d-why-band b { font-size: 16.5px; font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); }
/* 운영 화면(D3, 결정 46) — 문제 공감(페이지 바탕) ↔ 처리 범위(흰 바탕) 사이, 보조 바탕(#e8eaee)으로 구간 구분.
   흰 판 하나(모서리 22 · 큰 그림자) 안에 왼쪽 메뉴 열(옅은 바탕, 판 가장자리까지) + 오른쪽 본문. 움직임 없음.
   잉크 면은 "AI 전체 판정" 버튼과 선택된 탭뿐 · 강조 줄(상담원 처리)은 옅은 회색 면 · 선 없음 */
.vd .d-ops { padding: var(--sec-y) 0; background: var(--bg-2); scroll-margin-top: 68px; }
.vd .d-ops .d-h2 .ln { display: block; }   /* 제목 2줄 고정(판매처 문의가 / 한 화면에 모여요) */
.vd .d-ops-head { margin-bottom: 40px; }
.vd .d-ops-head .d-h2 { margin-top: 12px; }
/* 설명 한 줄(제목 아래 전체 폭) — 좁으면 두 문장 사이에서만 줄바꿈(문장 안은 nowrap). 17px — 380 이하만 16px(360에서 문장 폭 여유) */
.vd .d-ops-lead { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.vd .d-ops-ls { white-space: nowrap; }
@media (max-width: 380px) { .vd .d-ops-lead { font-size: 16px; } }
/* 판매처 게시판 문의 — 컨베이어 무대(결정 61). 이 구간의 검정 면은 무대 하나뿐. 바깥 크기 고정: 901px 이상 420 · 900 이하 660(세로 배치)
   카드는 .d-belt-cards 한 층에 겹쳐 두고 transform만 움직인다(d.js "컨베이어" — ETTimeline 경과로 매 프레임 계산). 자리는 보이지 않는 .d-belt-slot을 재서 정함
   카드 폭: 1280 이상 320 · 1101~1279 280 · 901~1100 240 · 900 이하 = 칸 안쪽 폭. 남색은 AI 아바타 · AI 태그 · AI 배지 · 판정 지점 선에만 */
.vd .d-belt { --cw: 320px; --ch: 76px; --pad: 28px; --gap: 24px; position: relative; height: 420px; border-radius: 24px; background: var(--ink); color: #fff; overflow: hidden; cursor: pointer; }
.vd .d-belt:focus-visible { outline: 3px solid var(--ai); outline-offset: 3px; }
.vd .d-belt-k { position: absolute; left: var(--pad); top: 20px; font-size: 13px; font-weight: 600; color: #a3a8b2; }
.vd .d-belt-in { display: grid; grid-template-columns: var(--cw) var(--cw) minmax(calc(var(--cw) + 28px), 1fr); gap: var(--gap); height: 100%; padding: 52px var(--pad) 20px; }
.vd .d-belt-src { display: grid; align-items: center; }
.vd .d-belt-slot { display: block; width: var(--cw); height: var(--ch); }
/* 게이트 — AI 아바타 56 + 판정·답변, 아래로 판정 지점 선(남색 → 어두운 면). 카드는 세로 가운데에서 선 위에 멈춤 */
.vd .d-belt-gate { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); justify-items: center; align-content: start; }
.vd .d-belt-av { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ai); font-size: 17px; font-weight: 700; color: #fff; }
.vd .d-belt-gl { margin-top: 8px; font-size: 13px; font-weight: 600; color: #c4c8d0; }
.vd .d-belt-line { width: 2px; margin-top: 10px; border-radius: 1px; background: linear-gradient(to bottom, var(--ai), rgba(29, 45, 92, 0)); }
.vd .d-belt-slot--gate { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* 오른쪽 위아래 칸 — 같은 크기, 칸 안에는 마지막으로 들어온 카드 하나 */
.vd .d-belt-bins { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; min-width: 0; }
.vd .d-bin { display: grid; grid-template-rows: auto minmax(0, 1fr); align-items: end; min-width: 0; padding: 14px; border-radius: 18px; background: #22252c; container-type: inline-size; }
.vd .d-bin-c { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h n" "s n"; column-gap: 12px; row-gap: 2px; align-items: center; align-self: start; min-width: 0; }
.vd .d-bin-h { grid-area: h; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.vd .d-bin-h b { font-size: 15px; font-weight: 600; color: #fff; }
.vd .d-bin-tag { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.vd .d-bin-tag--ai { background: var(--ai-soft); color: var(--ai); }
.vd .d-bin-tag--hu { background: var(--brand); color: #fff; }
.vd .d-bin-n { grid-area: n; font-size: 14px; color: #c4c8d0; white-space: nowrap; }
.vd .d-bin-n b { display: inline-block; min-width: 1.2em; margin-right: 2px; font-size: 28px; font-weight: 700; line-height: 1.15; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.vd .d-bin-s { grid-area: s; font-size: 12.5px; color: #a3a8b2; white-space: nowrap; }
.vd .d-bin-s-m, .vd .d-bin-s-s { display: none; }
/* 보조 문구는 한 줄 — 칸이 좁으면 칸을 키우지 않고 문구를 줄임 */
@container (max-width: 470px) { .vd .d-bin-s-l { display: none; } .vd .d-bin-s-m { display: inline; } }
@container (max-width: 330px) {
  .vd .d-bin-s-m { display: none; } .vd .d-bin-s-s { display: inline; }
  .vd .d-bin-c { grid-template-areas: "h h" "s n"; }   /* 좁은 칸: 건수는 보조 문구 줄 오른쪽 */
  .vd .d-bin-h b { font-size: 14px; }
}
/* 문의 카드 — 흰 면 · radius 14. 판매처 칩 + 판정 배지(처음엔 숨김) / 짧은 제목 한 줄(말줄임 없음) */
.vd .d-belt-cards { position: absolute; inset: 0; pointer-events: none; }
.vd .d-bcard { position: absolute; left: 0; top: 0; display: grid; grid-template-rows: 24px 22px; row-gap: 6px; width: var(--cw); height: var(--ch); padding: 12px 14px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); opacity: 0; will-change: transform, opacity; }
.vd .d-bcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.vd .d-bcard-ch { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--face); font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.vd .d-bcard-b { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; }
.vd .d-bcard-b--ai { background: var(--ai-soft); color: var(--ai); }
.vd .d-bcard-b--hu { background: var(--brand); color: #fff; }
.vd .d-bcard-t { font-size: 15px; font-weight: 700; line-height: 22px; white-space: nowrap; }
/* 예시 표기(결정 68) — 무대·장면 상자 안쪽 왼쪽 아래(박스 패딩에 맞춤), 11.5/500. 밝은 면 #9a9fa8 · 검정 무대 #6d727c. 다른 요소와 겹치지 않게 아래 여백 띠 안에 */
.vd .d-ex { position: absolute; left: var(--ex-x, 16px); bottom: var(--ex-y, 2px); z-index: 1; margin: 0; font-size: 11.5px; font-weight: 500; line-height: 14px; color: #7c818b; white-space: nowrap; pointer-events: none; }
.vd .d-ex--dark { color: #6d727c; }
.vd .d-chat { position: relative; --ex-x: var(--s4); --ex-y: 8px; padding-bottom: calc(var(--s4) + 14px); }   /* 아래 띠 = 예시 표기. 강조 확대(1.03) 때도 무대 밖으로 안 나가게 바닥에서 8px */   /* 아래 14px = 예시 표기 띠(메시지와 겹치지 않게) */
.vd .d-tchat { position: relative; --ex-x: var(--s5); }
.vd .d-belt .d-ex { --ex-x: var(--pad); --ex-y: 5px; }
@media (max-width: 1279px) { .vd .d-belt { --cw: 280px; } }
@media (max-width: 1100px) { .vd .d-belt { --cw: 240px; --pad: 20px; --gap: 12px; } }
@media (max-width: 1000px) { .vd .d-belt { --cw: 232px; } }
/* 900px 이하: 세로 — 위 = 수집 · 가운데 = 게이트(가로 선) · 아래 = 두 칸 세로. 카드는 위에서 아래로, 폭 = 칸 안쪽 폭 */
@media (max-width: 900px) {
  .vd .d-belt { --pad: 16px; height: 660px; }
  .vd .d-belt-k { top: 16px; }
  .vd .d-belt-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--ch) 146px minmax(0, 1fr); gap: 12px; padding: 44px var(--pad) 24px; }   /* 아래 24px = 예시 표기 자리 */
  .vd .d-belt-slot { width: calc(100% - 28px); }
  .vd .d-belt-src { align-items: start; justify-items: center; }
  .vd .d-belt-gate { grid-template-rows: auto auto minmax(0, 1fr); }
  .vd .d-belt-av { width: 44px; height: 44px; font-size: 15px; }
  .vd .d-belt-gl { margin-top: 6px; }
  .vd .d-belt-line { position: absolute; left: 0; right: 0; bottom: calc(var(--ch) / 2 - 1px); width: auto; height: 2px; margin: 0; background: linear-gradient(to right, rgba(29, 45, 92, 0), var(--ai) 50%, rgba(29, 45, 92, 0)); }
  .vd .d-belt-slot--gate { top: auto; bottom: 0; transform: translateX(-50%); }
  .vd .d-belt-bins .d-belt-slot { width: 100%; }
}
.vd .d-ops-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) clamp(24px, 3vw, 48px); margin: 40px 0 0; padding: 0 4px; list-style: none; }
.vd .d-ops-points { grid-template-rows: auto auto; }
.vd .d-ops-points li { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 6px; align-content: start; min-width: 0; }   /* 세 카드 제목 줄 · 설명 시작선 같은 높이(subgrid) */
.vd .d-ops-points b { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.vd .d-ops-points span { font-size: 15px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
/* ONE WMS 띠(결정 61) — 포인트 카드 아래 16px, 흰 카드 하나 · 3칸(로고 200 / 문구 / 경로 칩). 로고는 원본 색 */
.vd .d-wms { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 16px; padding: 22px 28px; border-radius: 16px; background: var(--surface); }
.vd .d-wms-logo { display: block; width: 170px; height: auto; }
.vd .d-wms-t { display: grid; gap: 4px; min-width: 0; }
.vd .d-wms-t b { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.vd .d-wms-t span { font-size: 15px; line-height: 1.55; color: var(--ink-3); word-break: keep-all; }   /* 설명 두 줄(사용자 요청 2026-10-08) — 390에서도 낱말 중간에서 안 끊김 */
.vd .d-wms-path { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.vd .d-wms-c { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--face); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.vd .d-wms-c--ink { background: var(--ink); color: #fff; }
.vd .d-wms-c--brand { background: var(--brand); color: #fff; }
.vd .d-wms-arr { flex: none; width: 16px; height: 16px; color: #b7bbc3; }
@media (max-width: 1100px) { .vd .d-wms { grid-template-columns: 200px minmax(0, 1fr); } .vd .d-wms-path { grid-column: 2; } }
@media (max-width: 760px) { .vd .d-wms { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; } .vd .d-wms-path { grid-column: auto; } .vd .d-wms-c { padding: 0 12px; } }   /* 모바일: 로고 → 문구 → 경로 칩(한 줄 유지) */
@media (max-width: 760px) {
  .vd .d-ops-points { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--s4); margin-top: 28px; }
  .vd .d-ops-points li { grid-row: auto; grid-template-rows: none; }
}
/* 고객사·연동 채널 로고(D3, 결정 45) — 4칸 그리드 + 왼쪽 라벨 열 132px, 칸 높이 48 · 줄 사이 8 · 띠와 24. 박스·테두리·구분선 없음
   평소 = 잉크 단색 0.72 / 마우스·키보드 포커스 = 원래 색 1(0.2초, 모션 감소면 즉시). 흰 글자 로고(.d-brand--dark)는 원래 색일 때만 잉크 판(칸 크기 그대로, 칸 안에서 겹쳐 그림) */
.vd .d-brands { display: grid; grid-template-columns: 132px repeat(4, minmax(0, 1fr)); grid-auto-rows: 48px; row-gap: 8px; column-gap: var(--s4); margin-top: 24px; padding: 0 28px; }
.vd .d-brands-k { align-self: center; font-size: 13.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.vd .d-brands-k small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: #6b707a; }   /* 라벨 아래 한 줄(바로 연동돼요 · 판매채널, 결정 92) */
.vd .d-brand-cell { display: grid; place-items: center; min-width: 0; }
.vd .d-brand { position: relative; display: inline-grid; place-items: center; border-radius: 10px; outline-offset: 6px; cursor: default; }
.vd .d-brand img { grid-area: 1 / 1; display: block; width: auto; height: var(--lh); max-width: 100%; transition: opacity .2s ease; }
.vd .d-brand-m { opacity: .72; }
.vd .d-brand-c { opacity: 0; }
.vd .d-brand:hover .d-brand-m, .vd .d-brand:focus-visible .d-brand-m { opacity: 0; }
.vd .d-brand:hover .d-brand-c, .vd .d-brand:focus-visible .d-brand-c { opacity: 1; }
.vd .d-brand--dark::before { content: ""; position: absolute; inset: -10px; border-radius: 10px; background: var(--ink); opacity: 0; transition: opacity .2s ease; }
.vd .d-brand--dark:hover::before, .vd .d-brand--dark:focus-visible::before { opacity: 1; }
.vd .d-brand--dark img { position: relative; }
@media (prefers-reduced-motion: reduce) { .vd .d-brand img, .vd .d-brand--dark::before { transition: none; } }
/* 풀필먼트 제휴 배너(결정 92) — d-wms와 같은 틀(흰 · 패딩 22×28 · 가로), radius 18 · 로고 박스 밖 아래 24 */
.vd .d-fp { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; grid-template-areas: "logo t go"; align-items: center; gap: 24px; column-gap: 40px; margin-top: 24px; padding: 22px 28px; border-radius: 18px; background: var(--surface); }
.vd .d-fp-logo { grid-area: logo; display: grid; place-items: center; width: 200px; height: 64px; border-radius: 14px; background: var(--ink); }   /* 흰 글자 로고 → 잉크 판. 로고 폭 ≈ ONE WMS 띠 로고(170)와 같은 무게(사용자 요청: 더 크게) */
.vd .d-fp-logo img { display: block; width: auto; height: 36px; }
.vd .d-fp-t { grid-area: t; display: grid; justify-items: start; gap: 4px; min-width: 0; }
.vd .d-fp-k { margin: 0 0 4px; padding: 3px 8px; border-radius: 7px; background: var(--face); font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.vd .d-fp-t b { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.vd .d-fp-t span { font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.vd .d-fp-go { grid-area: go; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #e3e5ea; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; transition: box-shadow .2s; }
.vd .d-fp-go:hover, .vd .d-fp-go:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink); }
.vd .d-fp-go svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .vd .d-fp { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo go" "t t"; gap: 16px 24px; } .vd .d-fp-go { justify-self: end; } }   /* 로고 · 버튼 위, 문구 아래 */
@media (max-width: 760px) { .vd .d-fp { padding: 20px; gap: 14px 12px; } .vd .d-fp-logo { width: 156px; height: 52px; } .vd .d-fp-logo img { height: 28px; } .vd .d-fp-go { height: 40px; padding: 0 14px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .vd .d-fp-go { transition: none; } }
@media (max-width: 1100px) {
  .vd .d-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; padding: 0 22px; }
  .vd .d-brands-k { grid-column: 1 / -1; padding-top: 8px; }
  .vd .d-brand-cell { height: 48px; }   /* 태블릿·모바일: 라벨 줄은 글자 높이, 로고 칸은 48px 고정 */
  .vd .d-brands-k--blank, .vd .d-brand-cell--blank { display: none; }
}
@media (max-width: 760px) {
  .vd .d-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 4px; }   /* 모바일: 라벨 위 · 로고 2칸, 칸 크기 고정 */
}
.vd .d-why-band p span { font-size: 14px; line-height: 1.45; color: var(--ink-3); }

/* ③ 처리 범위 — 머리(제목 + 역할 태그 안내 한 문장) · 왼쪽 탭 3개 · 오른쪽 패널(대화창 51% + 처리 요약 49%)
   패널 높이 = 왼쪽 탭 묶음 높이(아래 끝 정렬). 이 구간의 검정 면은 현재 탭 하나 — 처리 요약의 잉크 원·배지는 작은 요소라 허용 */
.vd .d-scope { padding: var(--sec-y) 0; background: var(--surface); scroll-margin-top: 68px; }
.vd .d-sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5) clamp(32px, 5vw, 96px); align-items: end; margin-bottom: var(--head-gap); }
.vd .d-h2 { font-size: var(--fs-h2); line-height: 1.22; letter-spacing: -0.015em; font-weight: 700; }
.vd .d-sec-lead { color: var(--ink-2); max-width: var(--read); font-size: 16px; }
/* 안내 한 문장(본문 16/400) — [AI] [상담원]은 문장 안 작은 태그. 제목 아래 끝과 안내 아래 끝이 같은 선(align-items: end) */
/* 처리 범위 머리(D3 결정 48): 제목 한 줄 → 10px 아래 안내 한 줄(왼쪽) + 같은 줄 오른쪽 끝 재생 버튼(아래 끝 맞춤) → 36px 아래 탭·패널 */
.vd .d-scope-head { display: grid; gap: 10px; margin-bottom: 36px; }
.vd .d-scope-h { text-wrap: balance; }
.vd .d-scope-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); }
.vd .d-scope-sub .d-play { flex: none; margin-bottom: 6px; }
.vd .d-scope-lead { font-size: 19.5px; font-weight: 400; line-height: 1.75; letter-spacing: -0.015em; color: var(--ink-2); }   /* D2: 섹션 안내 문장 19~20px / 400 — 제목(38px)보다 작게, 제목 둘째 줄과 아래 끝 맞춤 */
.vd .d-scope-lead .d-lead-ln { display: block; }
.vd .d-rtag { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0 3px; padding: 0 12px 0 5px; border-radius: 999px; font-size: 16px; font-weight: 500; line-height: 1; vertical-align: -6px; }
.vd .d-rtag-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.vd .d-rtag-ic .d-ic { width: 13px; height: 13px; stroke-width: 2.1; }
/* 작은 태그(문제 공감 해결 줄 앞) */
.vd .d-rtag--sm { height: 24px; gap: 4px; margin: 0; padding: 0 9px 0 3px; font-size: 13px; font-weight: 600; vertical-align: 0; }
.vd .d-rtag--sm .d-rtag-ic { width: 18px; height: 18px; }
.vd .d-rtag--sm .d-rtag-ic .d-ic { width: 11px; height: 11px; }
.vd .d-rtag--ai { background: var(--ai-soft); color: var(--ai); }
.vd .d-rtag--ai .d-rtag-ic { background: var(--ai); color: #fff; }
.vd .d-rtag--hu { background: var(--brand); color: #fff; }
.vd .d-rtag--hu .d-rtag-ic { background: #fff; color: var(--brand); }
/* 왼쪽 탭 — 아이콘 상자 28 + 탭 이름 / 한 줄 설명 / 진행 막대. 현재 탭 = 잉크 면 + 아이콘 상자 브랜드 */
.vd .d-tabs { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 10fr); gap: 24px; align-items: start; }
.vd .d-tabs-side { display: flex; flex-direction: column; gap: var(--s3); }
.vd .d-tablist { display: grid; grid-auto-rows: var(--tab-h); gap: var(--s2); }
.vd .d-tab { position: relative; height: var(--tab-h); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; padding: 14px 18px; border: 0; border-radius: var(--r2); background: var(--bg); text-align: left; color: var(--ink-2); overflow: hidden; transition: background .2s, color .2s; }
.vd .d-tab:hover { background: var(--bg-2); }
.vd .d-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.vd .d-tab-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vd .d-tab-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--face); color: var(--ink); transition: background .2s, color .2s; }
.vd .d-tab-ic .d-ic { width: 16px; height: 16px; }
.vd .d-tab[aria-selected="true"] .d-tab-ic { background: var(--brand); color: #fff; }
.vd .d-tab-l { font-size: var(--fs-card); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; white-space: nowrap; }
.vd .d-tab-s { display: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.vd .d-tab-d { font-size: 15px; color: var(--ink-3); line-height: 1.4; }
.vd .d-tab[aria-selected="true"] .d-tab-d { color: #d9dbe2; }
/* 결정 65: 진행 표시 = 지금 탭 아래 가장자리 2px 브랜드 선만(트랙 없음, 모서리 안쪽에서 시작·끝). 다른 탭은 표시 없음, 모션 감소면 숨김 */
.vd .d-tab-bar { display: none; position: absolute; left: var(--r2); right: var(--r2); bottom: 0; height: 2px; border-radius: 1px 1px 0 0; overflow: hidden; pointer-events: none; }
.vd .d-tab[aria-selected="true"] .d-tab-bar { display: block; }
.vd .d-tab-bar i { display: block; height: 100%; background: var(--brand); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (prefers-reduced-motion: reduce) { .vd .d-tab[aria-selected="true"] .d-tab-bar { display: none; } }
.vd .d-tabs-side .d-play { align-self: flex-start; }
/* 오른쪽 패널 — 옅은 회색 판 위에 흰 대화창 + 흰 처리 요약(같은 높이). 탭이 바뀌면 내용만 0.3초 페이드 인 */
.vd .d-tabpanels { display: grid; grid-template-rows: minmax(0, 1fr); height: var(--tabs-h); padding: 12px; border-radius: var(--r3); background: var(--bg); touch-action: pan-y; cursor: pointer; }
.vd .d-tabpanel { grid-area: 1 / 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 51fr) minmax(0, 49fr); grid-template-rows: minmax(0, 1fr); gap: 12px; }
/* 탭 전환 = 겹쳐 녹아들기(결정 69): 새 패널이 위(z 2)에서 0.32초 동안 나타나고, 이전 패널은 그동안 아래에 그대로 있다가 사라짐.
   (이전에는 이전 패널이 즉시 사라지고 새 내용이 투명에서 나타나 0.3초 동안 회색 판이 비쳐 버벅이는 것처럼 보였음) */
.vd .d-tabpanel { z-index: 2; }
.vd .d-tabpanel:not([hidden]) { animation: vd-in .32s ease; }
.vd .d-tabpanel[hidden] { display: grid; visibility: hidden; z-index: 1; transition: visibility 0s linear .32s; }
@media (prefers-reduced-motion: reduce) { .vd .d-tabpanel:not([hidden]) { animation: none; } .vd .d-tabpanel[hidden] { transition: none; } }
/* 대화창 */
.vd .d-tchat { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: var(--s4) var(--s5); border-radius: var(--r2); background: var(--surface); overflow: hidden; }
.vd .d-tchat-h { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font-size: 14px; white-space: nowrap; }
.vd .d-tchat-h b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.vd .d-tpill { flex: none; padding: 2px 9px; border-radius: 999px; background: var(--bg-2); font-size: 12px; color: var(--ink-3); }
.vd .d-tchat-order { display: flex; align-items: center; gap: var(--s2); padding: 8px 12px; border-radius: 10px; background: var(--bg); font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.vd .d-tchat-order > span { overflow: hidden; text-overflow: ellipsis; }
.vd .d-tchat-order b { font-weight: 600; color: var(--ink); }
.vd .d-tchat-order .d-ic { width: 18px; height: 18px; color: var(--ink-2); }
.vd .d-tchat-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.vd .d-tm { display: flex; align-items: flex-end; gap: var(--s2); max-width: 92%; }
.vd .d-tm--cus { align-self: flex-start; }
.vd .d-tm--ai { align-self: flex-end; }
.vd .d-tm > div { display: grid; gap: 3px; min-width: 0; }
.vd .d-tm--ai > div { justify-items: end; }
.vd .d-tb { padding: 9px 14px; font-size: 15px; line-height: 1.45; }
.vd .d-tm--cus .d-tb { background: #0a6fd6; color: #fff; border-radius: 18px 18px 18px 6px; }   /* 고객 말풍선 = 파랑(전용) */
.vd .d-tm--ai .d-tb { background: var(--face); color: var(--ink); border-radius: 18px 18px 6px 18px; }
.vd .d-tm small { font-size: 12px; color: var(--ink-3); }
.vd .d-tav { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 700; }
.vd .d-tav .d-ic { width: 15px; height: 15px; }
.vd .d-tav--cus { background: #e9ecf3; color: #3b4a6b; font-size: 11px; font-weight: 800; }   /* 결정 105 — 고객 원 = "고" */
.vd .d-tav--ai { background: var(--ai); color: #fff; }   /* AI 아바타 = 남색 */
.vd .d-tend { align-self: center; display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.vd .d-tend--ai { background: var(--bg-2); color: var(--ink-2); }
.vd .d-tend--human { background: var(--brand); color: #fff; }
/* 처리 요약 4줄 — 줄마다 아이콘 원 30 + 라벨 + 내용 + 상태 배지. 4줄이 높이를 고르게 나눔 */
.vd .d-tsum { min-width: 0; min-height: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); padding: 6px var(--s5); border-radius: var(--r2); background: var(--surface); overflow: hidden; }
.vd .d-trow { min-height: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.vd .d-trow-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; }
.vd .d-trow-ic .d-ic { width: 16px; height: 16px; }
.vd .d-trow--ai .d-trow-ic { background: var(--ai); }
.vd .d-trow--hu .d-trow-ic { background: var(--brand); }
.vd .d-trow--cl .d-trow-ic { background: var(--ink); }
.vd .d-trow--off .d-trow-ic, .vd .d-trow--use .d-trow-ic { background: var(--bg-2); color: var(--ink-3); }
.vd .d-trow-b { min-width: 0; display: grid; gap: 1px; }
.vd .d-trow-k { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.vd .d-trow--ai .d-trow-k { color: var(--ai); }
.vd .d-trow--hu .d-trow-k { color: var(--brand-deep); }
.vd .d-trow--cl .d-trow-k { color: var(--ink); }
.vd .d-trow-t { font-size: 15px; line-height: 1.4; color: var(--ink); }
.vd .d-trow--off .d-trow-t { color: var(--ink-3); }
.vd .d-trow-n { font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.vd .d-tbrand { font-weight: 700; color: var(--brand-deep); }
.vd .d-tbadge { justify-self: end; display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.vd .d-tbadge--ai { background: var(--ai-soft); color: var(--ai); }
.vd .d-tbadge--hu { background: var(--brand); color: #fff; }
.vd .d-tbadge--cl { background: var(--ink); color: #fff; }
.vd .d-tbadge--off { background: var(--bg-2); color: var(--ink-3); }

/* ④ 요금 — 고르면 뒤집히는 카드(결정 62). 바탕 흰색(구간 배경 번갈아 — 처리 범위 흰 · 제품 장면 회 · 요금 흰 · CS 팀 회 · 마지막 잉크)
   흰 바탕이라 면 색을 뒤집음: 고르기 버튼(선택 안 됨)·기본 기능 상자·이어링 면 = var(--bg), 그 안 칸 = 흰색. 이어톡 면 = 잉크 + 그림자
   배치: 1341px 이상 왼쪽 340 / 카드 · 901~1340 고르기 버튼 가로 2열 위 → 카드 전체 폭 → 기본 기능 3칸 가로 → 링크 · 900 이하 카드 안도 1열 */
.vd .d-price { padding: var(--sec-y) 0; background: var(--surface); scroll-margin-top: 68px; }
.vd .d-price-head .d-h2 { white-space: nowrap; }
.vd .d-price-lead { font-size: 16px; line-height: 1.65; color: var(--ink-2); text-align: right; }
.vd .d-pz { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "side card"; gap: 32px; align-items: start; }
.vd .d-pz-side { grid-area: side; display: grid; gap: 16px; }
.vd .d-flip { grid-area: card; }
.vd .d-pk-list { display: grid; gap: 8px; }
.vd .d-pk { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 14px 18px; border: 0; border-radius: 18px; background: var(--bg); font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.vd .d-pk:hover { background: var(--bg-2); }
.vd .d-pk:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.vd .d-pk-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); color: var(--ink); }
.vd .d-pk-ic .d-ic { width: 22px; height: 22px; }
.vd .d-pk-t { display: grid; gap: 2px; min-width: 0; }
.vd .d-pk-t small { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.vd .d-pk-t b { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.vd .d-pk-ar { font-size: 18px; color: var(--ink-3); }
.vd .d-pk[aria-pressed="true"] { background: var(--ink); color: #fff; }
.vd .d-pk[aria-pressed="true"] .d-pk-t small, .vd .d-pk[aria-pressed="true"] .d-pk-ar { color: rgba(255, 255, 255, .7); }
.vd .d-pk[aria-pressed="true"] .d-pk-ic--ai { background: var(--ai); color: #fff; }
.vd .d-pk[aria-pressed="true"] .d-pk-ic--hu { background: var(--brand); color: #fff; }
.vd .d-pz-base { padding: 18px; border-radius: 18px; background: var(--bg); }
.vd .d-pz-base-h { margin: 0 2px 12px; font-size: 14px; font-weight: 700; color: var(--ink); }
.vd .d-pz-base-l { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vd .d-pz-base-l li { display: grid; gap: 3px; padding: 14px 16px; border-radius: 14px; background: var(--surface); }
.vd .d-pz-base-t { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.vd .d-pz-ai { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--ai-soft); font-size: 12px; font-weight: 700; color: var(--ai); }
.vd .d-pz-base-d { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.vd .d-pz-more { justify-self: start; padding: 6px 2px; font-size: 15px; font-weight: 600; color: var(--ink); text-underline-offset: 4px; }
/* 뒤집히는 카드 — 두 면은 같은 칸에 겹쳐(크기 같음), 뒷면은 미리 180° 돌려 둠. 회전은 d.js가 ETTimeline 경과로 */
.vd .d-flip { perspective: 1800px; cursor: pointer; border-radius: 28px; }
.vd .d-flip:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.vd .d-flip-in { display: grid; transform-style: preserve-3d; will-change: transform; }
.vd .d-face { grid-area: 1 / 1; display: grid; grid-template-columns: 284px minmax(0, 1fr); column-gap: 48px; padding: 40px 44px; border-radius: 28px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.vd .d-face--ring { background: var(--bg); color: var(--ink); }
.vd .d-face--talk { transform: rotateY(180deg); background: var(--ink); color: #fff; box-shadow: 0 16px 48px rgba(22, 24, 29, .12); }
.vd .d-face-l { display: flex; flex-direction: column; min-width: 0; }
.vd .d-face-k { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.vd .d-face--talk .d-face-k { color: rgba(255, 255, 255, .62); }
.vd .d-face-name { margin-top: 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.015em; }
.vd .d-face-d { margin-top: 12px; font-size: 16px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.vd .d-face--talk .d-face-d { color: #d4d7de; }
.vd .d-face-d b { font-weight: 700; color: var(--ink); }
.vd .d-face--talk .d-face-d b { color: #fff; }
.vd .d-face-price { margin-top: auto; padding-top: 48px; }
.vd .d-face-fee { white-space: nowrap; line-height: 1.1; }
.vd .d-face-fee b { font-size: 56px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.vd .d-face-fee .u { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.vd .d-face-fs { margin-top: 6px; font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.vd .d-face--talk .d-face-fs { color: rgba(255, 255, 255, .62); }
.vd .d-face-r { min-width: 0; }
.vd .d-face-rh { display: flex; align-items: center; gap: 10px; font-size: 17px; white-space: nowrap; }
.vd .d-face-rh b { font-weight: 700; }
.vd .d-face-badge { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 12.5px; font-weight: 700; }
.vd .d-face-badge--cl { background: var(--ink); color: #fff; }
.vd .d-face-badge--hu { background: var(--brand); color: #fff; }
.vd .d-face-rn { margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }
.vd .d-face--talk .d-face-rn { color: rgba(255, 255, 255, .62); }
.vd .d-face-tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.vd .d-face-tasks li { display: flex; align-items: center; gap: 10px; min-width: 0; height: 52px; padding: 0 14px; border-radius: 14px; background: var(--surface); font-size: 15px; font-weight: 600; white-space: nowrap; }
.vd .d-face-tasks .d-ic { color: var(--ink); }
.vd .d-face--talk .d-face-tasks li { background: #22252c; color: #fff; }
.vd .d-face--talk .d-face-tasks .d-ic { color: #ff5c97; }
.vd .d-face-cmp { display: grid; gap: 14px; margin: 28px 0 0; }
.vd .d-face-cmp > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.vd .d-face-cmp dt { font-size: 14px; color: var(--ink-3); }
.vd .d-face--talk .d-face-cmp dt { color: rgba(255, 255, 255, .62); }
.vd .d-face-cmp dd { display: grid; gap: 2px; margin: 0; min-width: 0; }
.vd .d-face-cmp dd b { font-size: 16px; font-weight: 700; white-space: nowrap; }
.vd .d-face-cmp dd small { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.vd .d-face--talk .d-face-cmp dd small { color: rgba(255, 255, 255, .62); }
/* 901~1340: 왼쪽 열이 카드 안 두 칸을 좁혀서 — 고르기 버튼 가로 2열 위, 카드 전체 폭, 기본 기능 3칸 가로, 링크 */
@media (max-width: 1340px) {
  .vd .d-pz { grid-template-columns: minmax(0, 1fr); grid-template-areas: "picks" "card" "base" "more"; gap: 20px; }
  .vd .d-pz-side { display: contents; }
  .vd .d-pk-list { grid-area: picks; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vd .d-pz-base { grid-area: base; }
  .vd .d-pz-base-l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vd .d-pz-more { grid-area: more; }
}
/* 900px 이하: 카드 안 1열 — 이름·설명 → 사람 일 4칸 → 비교 줄 → 가격(아래 끝 맞춤 없음, 두 면 높이는 같은 칸에 겹쳐 같음) */
@media (max-width: 900px) {
  .vd .d-price-head .d-h2 { white-space: normal; }
  .vd .d-price-lead { text-align: left; }
  .vd .d-face { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; border-radius: 24px; }
  .vd .d-flip { border-radius: 24px; }
  .vd .d-face-l, .vd .d-face-r { display: contents; }
  .vd .d-face-k { order: 1; } .vd .d-face-name { order: 2; } .vd .d-face-d { order: 3; }
  .vd .d-face-rh { order: 4; margin-top: 24px; } .vd .d-face-rn { order: 5; } .vd .d-face-tasks { order: 6; } .vd .d-face-cmp { order: 7; }
  .vd .d-face-price { order: 8; margin-top: 0; padding-top: 28px; }
  .vd .d-pz-base-l { grid-template-columns: minmax(0, 1fr); }
  .vd .d-face-fee b { font-size: 48px; }
}
@media (max-width: 560px) {
  .vd .d-pk { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; min-height: 0; padding: 12px; }
  .vd .d-pk-ic { width: 36px; height: 36px; border-radius: 10px; }
  .vd .d-pk-ic .d-ic { width: 18px; height: 18px; }
  .vd .d-pk-ar { display: none; }
  .vd .d-pk-t small { font-size: 12px; white-space: normal; }
  .vd .d-pk-t b { font-size: 16px; }
  .vd .d-face { padding: 24px 20px; }
  .vd .d-face-tasks { grid-template-columns: minmax(0, 1fr); }   /* 한 줄 글자가 2칸에 안 들어가면 칸 수를 줄임(DESIGN_RULES 1장) */
  .vd .d-face-cmp > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vd .d-face-rh { font-size: 16px; }
}

/* ⑤ 다음 행동 — A 구성. 두 블록은 같은 폭(고정 열)·같은 높이(subgrid) */
.vd .d-final { background: var(--ink); color: #fff; padding: var(--sec-y) 0; }
.vd .d-final-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: var(--s4); row-gap: var(--s3); }   /* D3: 마지막 CTA는 D 그대로 */
.vd .d-final-h { grid-column: 1; grid-row: 1 / 4; align-self: center; }
.vd .d-final-opt { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; row-gap: var(--s3); padding: var(--s6); border-radius: var(--r3); background: rgba(255, 255, 255, .07); }   /* 행: 이름 · 설명 · 시작 단계 · 한 줄 · 버튼 */
.vd .d-fsteps { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 8px 16px; margin: var(--s2) 0 0; padding: 0; list-style: none; }
.vd .d-fsteps li { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap; }
.vd .d-fsteps li:not(:last-child)::after { content: "›"; position: absolute; right: -11px; top: 50%; transform: translateY(-52%); color: rgba(255, 255, 255, .55); font-size: 14px; font-weight: 700; }   /* 단계 사이 흐름 표시(칩 밖) */
.vd .d-final-opt--brand .d-fsteps li { background: var(--face); color: var(--ink); }
.vd .d-final-opt--brand .d-fsteps li:not(:last-child)::after { color: var(--ink-3); }
.vd .d-final-note { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .82); }
.vd .d-final-opt--brand .d-final-note { color: var(--ink-2); }
.vd .d-final-opt--brand { background: #fff; color: var(--ink); }
.vd .d-final-opt--brand .d-final-t { color: var(--ink-2); }
.vd .d-final-k { font-size: var(--fs-card); font-weight: 700; }
.vd .d-final-t { font-size: 16px; color: rgba(255, 255, 255, .86); }
.vd .d-final-opt .d-btn { justify-self: start; align-self: end; }
.vd .d-final-link { grid-column: 2 / -1; grid-row: 4; justify-self: end; color: #fff; font-weight: 500; text-underline-offset: 4px; padding: var(--s2) 0; margin-top: var(--s2); }
.vd .d-foot { padding: var(--s6) 0; font-size: 13.5px; color: var(--ink-3); }
.vd .d-foot p + p { margin-top: var(--s1); }
/* 1101 이상: 마지막 © 줄을 첫 줄(회사 · 통신판매번호) 오른쪽 끝으로 — HTML은 그대로(© 줄만 오른쪽 칸 1행). 그 아래 폭은 왼쪽에 차례로 쌓음 */
@media (min-width: 1101px) {
  .vd .d-foot .d-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: start; }
  .vd .d-foot .d-wrap > p { grid-column: 1; }
  .vd .d-foot .d-wrap > p:last-child { grid-column: 2; grid-row: 1; margin-top: 0; text-align: right; }
}

/* 1700px 이상도 콘텐츠 폭 1240px 고정 — 무대 높이 같음 */
@media (min-width: 1101px) and (max-width: 1300px) { .vd { --stage-h: 420px; } }

/* ── 1024px 이하: 재생 단계 막대·문의 띠가 히어로 아래, 3카드 장면 바로 위로 ── */
@media (max-width: 1100px) {
  .vd { --stage-h: 790px; }   /* 채팅 380 + 20 + 카드 390(내용 실측 352) */
  .vd .d-hero { padding: 64px 0 52px; }
  /* 태블릿: 채팅이 위, 두 카드는 아래 나란히(열 폭 고정) */
  .vd .d-arena { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 380px minmax(0, 1fr); }
  .vd .d-chat { grid-column: 1 / -1; grid-row: 1; }
  .vd .d-card--earring { grid-column: 1; grid-row: 2; }
  .vd .d-card--eartalk { grid-column: 2; grid-row: 2; }
  .vd .d-sec-head { grid-template-columns: 1fr; }
  .vd .d-tabs { grid-template-columns: minmax(0, 1fr); }
  .vd .d-tabpanels { height: var(--tp-h); }
  .vd .d-tablist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vd { --tab-h: 108px; --tp-h: 400px; }   /* 태블릿: 탭 가로 3칸 위, 패널은 대화창 + 처리 요약 좌우 */
  .vd .d-final-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; }
  .vd .d-final-h { grid-column: 1 / -1; grid-row: 1; }
  .vd .d-final-opt { grid-row: 2 / span 3; }
  .vd .d-final-link { grid-column: 1 / -1; grid-row: 5; justify-self: start; }
  .vd .d-prob-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--s3); }
  .vd .d-prob-card { grid-row: auto; grid-template-rows: auto auto; }
  .vd .d-why-band { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: 20px 22px; }
}
@media (min-width: 761px) and (max-width: 900px) { .vd { --stage-h: 790px; } }
@media (max-width: 760px) {
  .vd { font-size: 16px; --stage-h: 754px; --t-body: 15px; --t-chat: 15px; --t-meta: 12.5px; --fs-h2: 30px; --tab-h: 54px; --tp-h: 728px; }   /* D3: 탭 3 대화가 주문 칸에 붙지 않게 +16px(결정 48) */
  .vd .d-nav-links { display: none; }
  .vd .d-nav-in { min-height: 64px; }
  .vd .d-logo img { height: 32px; }
  .vd .d-nav-in { justify-content: space-between; }
  .vd .d-lead-ln { display: inline; }
  .vd .d-cta-row .d-btn { flex: 1 1 100%; }
  /* 단계 막대: 번호만, 현재 단계만 이름 */
  .vd .d-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
  .vd .d-step-l { min-height: 1.3em; }
  .vd .d-step-t { display: none; }
  .vd .d-step[aria-current="step"] .d-step-t { display: inline; }
  .vd .d-hint { display: none; }
  /* 장면: 채팅 위 + 두 카드 아래 나란히(크기 고정). 카드 안은 핵심만 */
  .vd .d-arena { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 354px minmax(0, 1fr); gap: var(--s2); }   /* 결정 68: 대화창 +14px = 예시 표기 띠(메시지 칸은 그대로) */
  .vd .d-chat { padding: var(--s3) var(--s3) calc(var(--s3) + 14px); --ex-x: var(--s3); --ex-y: 2px; }
  .vd .d-chat-h { margin: calc(-1 * var(--s3)) calc(-1 * var(--s3)) 0; padding: 8px var(--s3); font-size: 12.5px; }
  .vd .d-order { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); }
  .vd .d-order b, .vd .d-order span:not(.d-badge) { grid-column: 1; }
  .vd .d-order .d-badge { grid-column: 2; }
  .vd .d-order-ic { display: none; }
  .vd .d-card { padding: var(--s2) var(--s2) var(--s3); gap: var(--s2); border-radius: var(--r2); }
  .vd .d-card-q { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; padding: var(--s2) var(--s3); }
  .vd .d-card-qt { font-size: 15px; white-space: normal; min-height: 2.5em; }
  .vd .d-card-tag { min-height: 22px; padding: 0 8px; font-size: 12px; }
  .vd .d-cnt { padding: 0 2px; }
  .vd .d-cnt-k { font-size: 12px; }
  .vd .d-cnt-n { font-size: 20px; }
  .vd .d-cnt-note { font-size: 12px; }
  .vd .d-todo { gap: 6px; }
  .vd .d-todo li { gap: var(--s2); padding: 0 var(--s2); font-size: 13px; }
  .vd .d-cb, .vd .d-ck { width: 18px; height: 18px; border-radius: 5px; }
  .vd .d-ck .d-ic { width: 12px; height: 12px; }
  .vd .d-donebox { padding: var(--s2); }
  .vd .d-done-h { gap: 6px; font-size: 12.5px; line-height: 1.3; }
  .vd .d-hs { width: 24px; height: 24px; }
  .vd .d-hs .d-ic { width: 14px; height: 14px; }
  .vd .d-done-row { gap: var(--s2); padding: 0 6px; font-size: 13px; }
  .vd .d-done-t { white-space: normal; }
  .vd .d-card-use { flex-wrap: wrap; gap: 4px; font-size: 13px; }
  .vd .d-card-meta { font-size: 12px; }
  .vd { --sec-y: 44px; --head-gap: 32px; --card-gap: 12px; }   /* 모바일 섹션 사이 88px */
  .vd .d-hero { padding: 40px 0 44px; }
  .vd .d-h1 { font-size: clamp(34px, 9.4vw, 38px); }
  .vd .d-lead { font-size: 16px; }
  .vd .d-cta-row { flex-direction: column; align-self: stretch; }
  .vd .d-cta-row .d-btn { width: 100%; }
  .vd .d-tablist { gap: var(--s1); }
  .vd .d-tab { padding: var(--s2) 10px; grid-template-rows: minmax(0, 1fr); }
  .vd .d-tab-h { gap: 6px; }
  .vd .d-tab-ic { width: 24px; height: 24px; border-radius: 7px; }
  .vd .d-tab-ic .d-ic { width: 14px; height: 14px; }
  .vd .d-tab-l, .vd .d-tab-d { display: none; }
  .vd .d-tab-s { display: block; font-size: 13px; }
  /* 모바일: 패널은 대화창 → 처리 요약 세로 */
  .vd .d-tabpanels { padding: 8px; }
  .vd .d-tabpanel { grid-template-columns: minmax(0, 1fr); grid-template-rows: 336px minmax(0, 1fr); gap: 8px; }   /* D3: 대화창 +16px(처리 요약 높이는 그대로) */
  .vd .d-tchat, .vd .d-tsum { padding: var(--s3) var(--s4); }
  .vd .d-tchat { padding-bottom: calc(var(--s3) + 14px); --ex-x: var(--s4); --ex-y: 2px; }   /* 모바일: 끝 상태 알약과 겹치지 않게 표기 띠 */
  .vd .d-tb { font-size: 14.5px; }
  .vd .d-trow-t { font-size: 14.5px; }
  .vd .d-final-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .vd .d-final-h, .vd .d-final-opt, .vd .d-final-link { grid-row: auto; grid-column: 1; }
  .vd .d-final-opt { grid-template-rows: auto minmax(0, 1fr) auto; height: 240px; }   /* 세로로 쌓여도 두 블록 같은 크기(D와 같음) */
  .vd .d-prob-q { font-size: 18px; padding: 16px 18px; }
  .vd .d-scope-lead { font-size: 18px; }
  .vd .d-final .d-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vd *, .vd *::before, .vd *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
/* 모바일 단계 막대: 막대만 두고 현재 단계 이름은 막대 아래 한 줄로(반쪽 칸에서 잘리지 않게) */
.vd .d-step-now { display: none; }
@media (max-width: 760px) {
  .vd .d-controls { row-gap: 2px; }
  .vd .d-step-now { display: block; grid-column: 2; font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.3; min-height: 1.3em; }
  .vd .d-step-l { display: none; }
}
@media (max-width: 380px) { .vd { --stage-h: 774px; } .vd .d-tab-ic { display: none; } }   /* 360px: 처리 범위 탭 짧은 이름이 잘리지 않게 아이콘 상자 숨김 */   /* 360px 카드 내용 실측 372 */   /* 360px: 카드가 좁아 내용이 길어짐 */

@media (max-width: 760px) {
  .vd .d-why-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vd .d-why-list li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 22px 20px 24px; border-radius: 20px; }
  .vd .d-why-list .d-why-ic { margin-bottom: 0; }
  .vd .d-why-list b { font-size: 18px; }
  .vd .d-why .d-brands { margin-top: 24px; padding: 24px 20px; border-radius: 20px; }
  .vd .d-scope-head { margin-bottom: 28px; }
  .vd .d-scope-sub { flex-direction: column; align-items: stretch; gap: 8px; }
  .vd .d-scope-sub .d-play { align-self: flex-end; margin: 0; }
}
@media (max-width: 560px) { .vd .d-face-pre { display: none; } }   /* 좁은 폭: "문의량에 맞는"을 빼고 등급 이름만(한 줄 유지) */
/* 로고 + 이름 칸(네이버 스마트스토어, 2026-10-08) — 아이콘과 이름을 한 덩어리로, 평소 흑백 0.72 · 마우스 · 포커스 때 원래 색. 좁은 폭은 이름 두 줄(낱말 단위) */
.vd .d-brand--name > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; transition: opacity .2s ease; }
.vd .d-brand--name img { grid-area: auto; height: var(--lh); }
.vd .d-brand--name b { font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--ink); white-space: nowrap; word-break: keep-all; }
.vd .d-brand--name .d-brand-m { filter: grayscale(1); }
@media (max-width: 900px) { .vd .d-brand--name > span { gap: 5px; } .vd .d-brand--name img { height: 22px; } .vd .d-brand--name b { font-size: 12px; white-space: normal; max-width: 6.2em; } }
@media (prefers-reduced-motion: reduce) { .vd .d-brand--name > span { transition: none; } }

/* 모바일 글자 한 단계 더 작게(2026-10-12) — 폰에서 꽉 차 읽기 버겁다는 의견. 메인(D3)만: body.home(서브페이지는 type.css 토큰으로 따로 줄임) */
@media (max-width: 600px) {
  html body.home .d-h1 .ln { font-size: 33px; }
  html body.home .d-h2 { font-size: 26px; }
  html body.home .d-lead .d-lead-ln { font-size: 15px; }
  html body.home .d-prob-card .d-prob-q { font-size: 16px; }
  html body.home .d-prob-card .d-prob-a span, html body.home .d-why-list p span { font-size: 14px; }
  html body.home .d-why-list p b { font-size: 16px; }
  html body.home .d-ops-head .d-ops-lead .d-ops-ls, html body.home .d-ops-points li b { font-size: 15px; }
  html body.home .d-ops-points li span, html body.home .d-wms .d-wms-t span, html body.home .d-fp .d-fp-t span, html body.home .d-face-tasks li span { font-size: 13.5px; }
  html body.home .d-fp .d-fp-t b { font-size: 17px; }
  html body.home .d-final-opt .d-final-t, html body.home .d-sec-head .d-price-lead, html body.home .d-face .d-face-l .d-face-d { font-size: 14.5px; }
  html body.home .d-final-opt .d-final-k { font-size: 19px; }
  html body.home .d-scope-sub .d-scope-lead { font-size: 16px; }
  html body.home .d-card .d-card-q .d-card-qt, html body.home .d-msgs .d-m .d-bub, html body.home .d-m p .ph, html body.home .d-pz-base-l li .d-pz-base-t { font-size: 14px; }
  html body.home .d-trow .d-trow-b .d-trow-t, html body.home .d-tm div .d-tb { font-size: 13.5px; }
}
/* 2026-10-12 전 페이지 점검: 화면 글자 최소 12px — AI 칩 · 개수 배지 · 시간 · 플랜 버튼 보조 글 11~11.5 → 12 */

/* 요금 카드 뒤집기 — 멈춰 있을 때 평면(휴대폰에서 뒤집힌 면 글자가 뿌옇던 것, d.js paint) */
.vd .d-flip-in.is-flat { transform: none !important; transform-style: flat; will-change: auto; }
.vd .d-flip:has(> .d-flip-in.is-flat) { perspective: none; }   /* 3D 그리기 공간까지 풀어야 휴대폰(고해상도)에서 글자가 선명함 */
.vd .d-flip-in.is-flat .d-face { backface-visibility: visible; -webkit-backface-visibility: visible; }
.vd .d-flip-in.is-flat[data-flat-face="eartalk"] .d-face--talk { transform: none; }
.vd .d-flip-in.is-flat[data-flat-face="eartalk"] .d-face--ring, .vd .d-flip-in.is-flat[data-flat-face="earring"] .d-face--talk { visibility: hidden; }