/* ============================================================
   v2.css — 디자인 검토 개편안 레이어 (v2 페이지 전용)

   기존 CSS 를 고치지 않고 뒤에서 덮어쓰는 레이어. 모든 규칙이 body.wmv-v2 로
   스코프되어 있어 v2 페이지(/announcementsystem-v2, /freetts-v2)에만 적용된다.
   기존 페이지는 이 파일을 불러오지 않으므로 영향이 없다 — 원복은 라우트·뷰 삭제로 끝.

   구성
     1. 버튼      3 variant × 3 size, radius 8px 고정
     2. 섹션 리듬  여백 3단 · 배경 교차를 :nth-of-type 으로 강제
     3. 타이포     히어로 56/700, 섹션 제목 36/700 (토큰 스케일)
     4. 컨테이너   1200 / 720 두 가지
     5. 신뢰 신호  로고 정지 + 단색화, 해시태그 칩 제거
     6. 탭         공용 탭 컴포넌트 (섹션 합치기용)
     7. 히어로 v2  CTA 1개 + 증거 숫자, 모바일 순서 뒤집기
     8. 무게·모바일 사진 배경 제거, FAB 겹침 회피
     뒤에 붙는 「자동 생성」 구간은 gen_v2_css.py 가 기존 CSS 에서
     토큰 밖 radius·shadow 를 뽑아 가장 가까운 토큰으로 스냅한 것.
   ============================================================ */

/* ---------- 1. 버튼 — 3 variant × 3 size, radius 8px 하나로 ---------- */
/* override 레이어의 본업이 「이기는 것」이므로 여기서는 !important 를 쓴다.
   섹션마다 .btn 높이를 48px·56px 로 덮어쓰는 규칙이 여러 곳에 있어 이게 없으면 3사이즈로 모이지 않는다. */
body.wmv-v2 .btn {
  height: 44px !important;
  min-height: 44px !important;   /* .bc-connect-cta > .btn 이 min-height:48px 로 덮는 것 차단 */
  max-height: 44px !important;
  padding: 0 18px;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 600;
}
body.wmv-v2 .btn.btn-lg {
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 26px;
  font-size: 16px !important;
  font-weight: 700;
}
body.wmv-v2 .btn.btn-sm {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 14px;
  font-size: 14px !important;
}
/* 주 버튼의 hover 는 들어올리지 않고 색만 — 랜딩 전체에서 같은 반응 */
body.wmv-v2 .btn-primary:hover {
  transform: none;
  box-shadow: var(--shadow-normal);
}
/* 섹션 전용 버튼들을 같은 기하로 흡수 */
body.wmv-v2 .gp-store-btn,
body.wmv-v2 .trial-submit,
body.wmv-v2 .bc-app-btn {
  border-radius: 8px !important;
  height: 44px !important;
  font-size: 15px !important;
}
/* 앱 다운로드 버튼은 흰 배경 전용 변형이었다 → 보조(outline) 하나로 흡수해 변형 수를 줄인다 */
body.wmv-v2 .gp-store-btn {
  background: transparent !important;
  border: 1px solid var(--line-neutral-strong) !important;
}
/* 모바일 터치 목표 44px 확보 */
@media (max-width: 768px) {
  /* 터치 목표 44px — SM 도 모바일에서는 44px 로 올린다 */
  body.wmv-v2 .btn.btn-sm {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}

/* ---------- 2. 섹션 리듬 — 여백 3단 · 배경 교차 강제 ---------- */
/* .v2-keep-bg = 「자기 스타일을 그대로 쓰는 섹션」 — 배경뿐 아니라 여백도 원본 값을 지킨다
   (로고 띠처럼 원래 얇은 섹션이 96px 여백을 뒤집어쓰면 리듬이 오히려 깨진다) */
body.wmv-v2 .v2-main > section:not(.v2-keep-bg) {
  padding-block: var(--space-96);
}
/* 배경 교차는 「자기 배경이 없는」 섹션에만. .v2-keep-bg 가 붙은 섹션(어두운 마무리 CTA 등)은
   자기 클래스의 배경·글자색을 그대로 쓴다 — 흰 글자가 흰 배경에 놓이는 사고 방지. */
body.wmv-v2 .v2-main > section:not(.v2-keep-bg) {
  background: var(--bg-primary);
}
body.wmv-v2 .v2-main > section:nth-of-type(even):not(.v2-keep-bg) {
  background: #f7f7f8;
}
/* 예외는 클래스로 명시할 때만 */
body.wmv-v2 .v2-main > section.v2-tight { padding-block: var(--space-64); }
body.wmv-v2 .v2-main > section.v2-loose { padding-block: var(--space-128); }
body.wmv-v2 .v2-main > section.v2-dark {
  background: #0d0e12;
  color: #fff;
}
body.wmv-v2 .v2-main > section.v2-dark h2,
body.wmv-v2 .v2-main > section.v2-dark h3 { color: #fff; }
body.wmv-v2 .v2-main > section.v2-dark p { color: rgba(247, 247, 248, .72); }
/* 히어로는 배경 교차 규칙 밖 */
body.wmv-v2 .v2-main > section.v2-hero {
  background: var(--bg-primary);
  padding-block: 72px 64px;
}
@media (max-width: 768px) {
  body.wmv-v2 .v2-main > section:not(.v2-keep-bg) { padding-block: var(--space-64); }
  body.wmv-v2 .v2-main > section.v2-hero { padding-block: 32px 48px; }
}

/* ---------- 3. 타이포 — 토큰 스케일로 되돌림 ---------- */
/* 한글은 단어 중간에서 끊지 않는다 (「위메이크보이 / 스가」 방지).
   원본은 .legacy-bc-root 안에만 걸려 있어 새로 쓴 히어로·섹션 제목에는 적용되지 않았다. */
body.wmv-v2 .v2-hero-title,
body.wmv-v2 .v2-hero-sub,
body.wmv-v2 .v2-section-dek,
body.wmv-v2 .v2-main > section h2,
body.wmv-v2 .v2-main > section h3,
body.wmv-v2 .v2-main > section p,
body.wmv-v2 .v2-tab,
body.wmv-v2 .v2-proof-label,
body.wmv-v2 .v2-logo-note {
  word-break: keep-all;
  overflow-wrap: break-word;
}

body.wmv-v2 .v2-hero-title {
  font-size: 56px;
  line-height: 1.16;
  letter-spacing: -0.030em;
  font-weight: 700;
  margin: 0;
}
/* 섹션 제목은 예외 없이 36/700 — 12개 섹션이 모두 44px 로 외치던 문제의 해법 */
body.wmv-v2 .v2-main > section h2,
body.wmv-v2 .v2-main .section-head h2 {
  font-size: 36px;
  line-height: 1.28;
  letter-spacing: -0.027em;
  font-weight: 700;
}
body.wmv-v2 .v2-main > section h3 {
  font-size: 24px;
  line-height: 1.33;
  letter-spacing: -0.023em;
  font-weight: 700;
}
/* 카드 안 제목은 한 단 더 아래 */
body.wmv-v2 .v2-main .uc-card h3,
body.wmv-v2 .v2-main .tmpl-card h3,
body.wmv-v2 .v2-main article h3 {
  font-size: 18px;
  line-height: 1.44;
  letter-spacing: -0.002em;
  font-weight: 600;
}
body.wmv-v2 .v2-section-dek {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-neutral-muted);
  font-weight: 500;
  max-width: 720px;
  margin: 12px 0 0;
}
@media (max-width: 768px) {
  body.wmv-v2 .v2-hero-title { font-size: 34px; letter-spacing: -0.026em; }
  body.wmv-v2 .v2-main > section h2,
  body.wmv-v2 .v2-main .section-head h2 { font-size: 26px; }
  body.wmv-v2 .v2-main > section h3 { font-size: 20px; }
  body.wmv-v2 .v2-section-dek { font-size: 15px; }
}

/* ---------- 4. 컨테이너 — 1200 / 720 두 가지 ---------- */
body.wmv-v2 .container,
body.wmv-v2 .container-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
body.wmv-v2 .v2-narrow { max-width: 720px; }

/* ---------- 5. 신뢰 신호 — 로고 정지 + 단색화, 칩 제거 ---------- */
/* 고객사 로고 띠는 v1 처럼 계속 흘러가게 둔다(2026-09-13 확인).
   단색으로 바꾸고 싶으면 아래 두 줄의 주석을 풀면 된다.
   body.wmv-v2 .tts-logo-row img { filter: grayscale(1) opacity(.62); }
   body.wmv-v2 .tts-logo-row img:hover { filter: none; }
   움직임을 싫어하는 사용자 설정은 존중한다. */
@media (prefers-reduced-motion: reduce) {
  body.wmv-v2 .marquee-track { animation: none !important; }
}
body.wmv-v2 .v2-logo-wall {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 24px 28px;
  align-items: center;
  justify-items: center;
}
body.wmv-v2 .v2-logo-wall img {
  max-height: 30px;
  width: auto;
  max-width: 100%;
  filter: grayscale(1) opacity(.62);
  transition: filter .15s ease;
}
body.wmv-v2 .v2-logo-wall img:hover { filter: none; }
body.wmv-v2 .v2-logo-note {
  text-align: center;
  font-size: 13px;
  color: var(--fg-neutral-muted);
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0 0 20px;
}
/* 블로그 태그 클라우드처럼 보이던 해시태그 칩 — 제거 */
body.wmv-v2 .legacy-bc-chip-list { display: none; }
@media (max-width: 900px) {
  body.wmv-v2 .v2-logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 6. 공용 탭 — 섹션 합치기용 ---------- */
body.wmv-v2 .v2-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 28px 0 0;
  padding: 0;
  border-bottom: 1px solid var(--line-neutral);
}
body.wmv-v2 .v2-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 16px;
  font: 600 15px/1.2 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--fg-neutral-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
body.wmv-v2 .v2-tab:hover { color: var(--fg-primary); }
body.wmv-v2 .v2-tab[aria-selected="true"] {
  color: var(--fg-accent);
  border-bottom-color: var(--fg-accent);
}
body.wmv-v2 .v2-panel { padding-top: 8px; }
body.wmv-v2 .v2-panel[hidden] { display: none !important; }
/* 탭 안에 들어간 기존 섹션은 자기 여백·배경을 버린다 */
body.wmv-v2 .v2-panel > section,
body.wmv-v2 .v2-panel > div > section {
  padding-block: 0 !important;
  background: transparent !important;
}
/* 탭 안 섹션의 제목은 한 단 낮춘다 — 섹션 제목과 경쟁하지 않게 */
body.wmv-v2 .v2-panel section h2 {
  font-size: 24px !important;
  line-height: 1.33 !important;
  letter-spacing: -0.023em !important;
}
body.wmv-v2 .v2-panel .section-head { margin-bottom: 24px; }
body.wmv-v2 .v2-panel .eyebrow { display: none; }
@media (max-width: 768px) {
  body.wmv-v2 .v2-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.wmv-v2 .v2-tabs::-webkit-scrollbar { display: none; }
  body.wmv-v2 .v2-tab { padding: 12px 12px; font-size: 14px; }
}

/* ---------- 7. 히어로 v2 ---------- */
body.wmv-v2 .v2-hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 56px;
  align-items: center;
}
body.wmv-v2 .v2-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
body.wmv-v2 .v2-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--bg-accent-subtle);
  color: var(--w-blue-40);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
body.wmv-v2 .v2-hero-sub {
  font-size: 18px;
  line-height: 1.62;
  color: var(--fg-neutral-muted);
  font-weight: 500;
  max-width: 540px;
  margin: 0;
}
/* CTA 1개 + 텍스트 링크 1개 */
body.wmv-v2 .v2-hero-cta {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding-top: 4px;
}
body.wmv-v2 .v2-hero-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-accent);
  text-decoration: none;
}
body.wmv-v2 .v2-hero-link:hover { text-decoration: underline; }
/* 증거 숫자 — 히어로 안에서 근거를 준다 */
body.wmv-v2 .v2-proof {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 22px;
  border-top: 1px solid var(--line-neutral);
}
body.wmv-v2 .v2-proof-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.wmv-v2 .v2-proof-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
body.wmv-v2 .v2-proof-label {
  font-size: 12.5px;
  color: var(--fg-neutral-muted);
  font-weight: 500;
}
body.wmv-v2 .v2-hero-visual {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .v2-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
}
/* 모바일: 헤드라인 → CTA → 사진 (사진이 제안보다 먼저 오지 않게) */
@media (max-width: 900px) {
  body.wmv-v2 .v2-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body.wmv-v2 .v2-hero-copy { order: 1; }
  body.wmv-v2 .v2-hero-visual { order: 2; }
  body.wmv-v2 .v2-hero-sub { font-size: 16px; max-width: none; }
  body.wmv-v2 .v2-proof { gap: 24px; }
  body.wmv-v2 .v2-proof-num { font-size: 22px; }
  /* 상담 FAB 이 본문을 덮지 않게 히어로 마지막 블록만 여유를 준다 */
  body.wmv-v2 .v2-hero-copy > *:last-child { padding-right: 64px; }
}

/* ---------- 8. 무게 · 모바일 ---------- */
/* 매장 사진 전면 배경 → 단색. 가독성과 연식 문제를 동시에 해결 */
body.wmv-v2 .legacy-bc-music {
  background: #0d0e12 !important;
}
body.wmv-v2 .legacy-bc-music::before,
body.wmv-v2 .legacy-bc-music::after {
  display: none !important;
}
body.wmv-v2 .legacy-bc-music > img,
body.wmv-v2 .legacy-bc-music .legacy-bc-music-bg { display: none !important; }

/* 첫 화면 밖 영상은 포스터만 먼저 — 실제 preload 는 뷰에서 지정 */
body.wmv-v2 video { background: var(--bg-alternative); }

/* 섹션 머리 공통 */
body.wmv-v2 .v2-section-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 720px;
  margin-bottom: 8px;
}
body.wmv-v2 .v2-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--fg-accent);
  text-transform: uppercase;
}

/* 표준 카드 하나 — 섹션마다 다르던 카드 기하를 통일 */
body.wmv-v2 .v2-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line-neutral);
  border-radius: 12px;
  box-shadow: var(--shadow-normal);
  padding: 24px;
}

/* v2 임을 알려주는 얇은 표시 — 비교 화면에서 어느 쪽인지 헷갈리지 않게 */
body.wmv-v2 .v2-badge {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 2000;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--w-blue-50);
  color: #fff;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: .1em;
  box-shadow: var(--shadow-normal);
  pointer-events: none;
}


/* ---------- 9. 중첩 섹션 — 합친 섹션 안의 옛 <section> 은 자기 여백·배경을 버린다 ---------- */
body.wmv-v2 .v2-main > section section {
  padding-block: 0 !important;
  background: transparent !important;
}
body.wmv-v2 .v2-main > section section + section { margin-top: 48px; }

/* ---------- 10. 제품 투어 — 세로 7단 적층을 가로 캐러셀로 ---------- */
body.wmv-v2 .gallery {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  margin-top: 28px;
  scrollbar-width: thin;
}
body.wmv-v2 .gallery-item {
  flex: 0 0 min(720px, 84%);
  scroll-snap-align: start;
  opacity: 1 !important;
}
body.wmv-v2 .gallery.has-focus .gallery-item:not(.is-active) { opacity: 1; }
body.wmv-v2 .gallery.has-focus .gallery-item:not(.is-active) .gallery-media { transform: none; }
body.wmv-v2 .gallery-item .gallery-media { box-shadow: var(--shadow-normal); }
/* 제품 투어 — 좌우 이동 컨트롤 */
body.wmv-v2 .v2-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}
body.wmv-v2 .v2-carousel-hint {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-neutral-muted);
}
body.wmv-v2 .v2-carousel-btns { display: flex; gap: 8px; }
body.wmv-v2 .v2-carousel-btn {
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line-neutral-strong);
  background: var(--bg-primary);
  color: var(--fg-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
body.wmv-v2 .v2-carousel-btn:hover:not(:disabled) {
  background: var(--bg-neutral);
  border-color: var(--fg-primary);
}
body.wmv-v2 .v2-carousel-btn:focus-visible {
  outline: 2px solid var(--fg-accent);
  outline-offset: 2px;
}
body.wmv-v2 .v2-carousel-btn:disabled {
  opacity: .35;
  cursor: default;
}
/* 현재 보고 있는 항목을 살짝 강조 — 어디쯤인지 알 수 있게 */
body.wmv-v2 .gallery-item { transition: opacity .25s ease; }
body.wmv-v2 .gallery.has-focus .gallery-item:not(.is-active) { opacity: .55; }

body.wmv-v2 .v2-gallery-hint {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-neutral-muted);
}
@media (max-width: 768px) {
  body.wmv-v2 .gallery-item { flex: 0 0 88%; }
}


/* ---------- 11. 기능 탭 패널 — 좁아져도 글 칸이 찌그러지지 않게 ---------- */
/* 원본은 `1fr 1.2fr` 인데, 오른쪽 칸 내용(카드 4장 한 줄)의 최소 폭이 879px 이라
   컨테이너가 좁아지면 왼쪽 글 칸이 169px 까지 눌렸다. 오른쪽을 minmax(0,…) 으로
   풀어 주고 왼쪽에 최소 폭을 준다. */
body.wmv-v2 .feature-panel {
  grid-template-columns: minmax(300px, 1fr) minmax(0, 1.2fr);
  align-items: start;
}
body.wmv-v2 .feature-panel.studio-feature-panel {
  grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr);
}
@media (max-width: 960px) {
  body.wmv-v2 .feature-panel,
  body.wmv-v2 .feature-panel.studio-feature-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 다른 패널에 남아 있는 원본 4단 카드도 좁아지면 접히게 */
body.wmv-v2 .cloning-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

/* ---------- 12. 보이스 클로닝 — 실제 「용도 선택」 화면 재현 ---------- */
body.wmv-v2 .v2-clone-shot {
  background: var(--bg-elevated);
  border: 1px solid var(--line-neutral);
  border-radius: 16px;
  box-shadow: var(--shadow-emphasize);
  overflow: hidden;
}
body.wmv-v2 .v2-shot-rail {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: rgba(112, 115, 124, .05);
  border-bottom: 1px solid var(--line-neutral-subtle);
}
body.wmv-v2 .v2-shot-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 12.5px/1 var(--font-sans);
  color: var(--fg-neutral-disable);
  white-space: nowrap;
}
body.wmv-v2 .v2-shot-step .n {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 11px/1 var(--font-sans);
  background: var(--bg-alternative);
  color: var(--fg-neutral-muted);
}
body.wmv-v2 .v2-shot-step.is-done { color: var(--fg-neutral-muted); }
body.wmv-v2 .v2-shot-step.is-done .n { background: var(--bg-accent-subtle); color: var(--w-blue-45); }
body.wmv-v2 .v2-shot-step.is-now { color: var(--fg-primary); }
body.wmv-v2 .v2-shot-step.is-now .n { background: var(--w-blue-50); color: #fff; }
body.wmv-v2 .v2-shot-step + .v2-shot-step::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--line-neutral);
  margin-right: 3px;
}
body.wmv-v2 .v2-shot-body { padding: 22px 20px 24px; }
body.wmv-v2 .v2-shot-title {
  margin: 0;
  font: 700 17px/1.4 var(--font-sans);
  letter-spacing: -0.012em;
  color: var(--fg-primary);
  text-align: center;
  word-break: keep-all;
}
body.wmv-v2 .v2-shot-sub {
  margin: 6px 0 18px;
  font: 500 12.5px/1.6 var(--font-sans);
  color: var(--fg-neutral-muted);
  text-align: center;
  word-break: keep-all;
}
body.wmv-v2 .v2-shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
body.wmv-v2 .v2-shot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 16px 10px 13px;
  border: 1px solid var(--line-neutral);
  border-radius: 12px;
  background: var(--bg-primary);
  text-align: center;
}
body.wmv-v2 .v2-shot-card svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--w-blue-45);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.wmv-v2 .v2-shot-card .nm {
  font: 600 13px/1.3 var(--font-sans);
  color: var(--fg-primary);
  word-break: keep-all;
}
body.wmv-v2 .v2-shot-card .bd {
  font: 600 10.5px/1 var(--font-sans);
  color: var(--fg-neutral-muted);
  background: var(--bg-alternative);
  padding: 4px 8px;
  border-radius: 999px;
}
/* 휴대폰에서는 카드 9장을 세로로 쌓지 않고 한 줄짜리 목록으로 — 높이가 절반 이하로 줄고
   「전화 ARS/자동응답」 처럼 긴 이름도 칸을 비집지 않는다. */
@media (max-width: 560px) {
  body.wmv-v2 .v2-shot-body { padding: 18px 14px 20px; }
  body.wmv-v2 .v2-shot-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.wmv-v2 .v2-shot-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
  }
  body.wmv-v2 .v2-shot-card .nm { flex-grow: 1; font-size: 12.5px; }
  body.wmv-v2 .v2-shot-card .bd { flex: none; }
  body.wmv-v2 .v2-shot-rail { gap: 6px; padding: 12px 14px; }
  body.wmv-v2 .v2-shot-step { font-size: 11.5px; }
  body.wmv-v2 .v2-shot-step + .v2-shot-step::before { width: 10px; }
}
/* ---- radius 토큰 스냅 — 자동 생성 (gen_v2_css.py) ---- */
body.wmv-v2 .bc-hero-visual {
  border-radius: 24px;
}
body.wmv-v2 .bc-live-card {
  border-radius: 12px;
}
body.wmv-v2 .uc-card {
  border-radius: 16px;
}
body.wmv-v2 .uc-card .ic {
  border-radius: 8px;
}
body.wmv-v2 .composer-row {
  border-radius: 8px;
}
body.wmv-v2 .composer-row .pill {
  border-radius: 999px;
}
body.wmv-v2 .music-mixer .clip {
  border-radius: 4px;
}
body.wmv-v2 .schedule-row .pill {
  border-radius: 999px;
}
body.wmv-v2 .tmpl-card {
  border-radius: 12px;
}
body.wmv-v2 .lang-chips span {
  border-radius: 999px;
}
body.wmv-v2 .eq-node {
  border-radius: 12px;
}
body.wmv-v2 .bc-connect-shell {
  border-radius: 24px;
}
body.wmv-v2 .bc-connect-tab {
  border-radius: 12px;
}
body.wmv-v2 .bc-connect-media {
  border-radius: 20px;
}
body.wmv-v2 .bc-connect-kit-photo img {
  border-radius: 8px;
}
body.wmv-v2 .bc-connect-ops-item {
  border-radius: 16px;
}
body.wmv-v2 .bc-connect-ops-warning {
  border-radius: 0 8px 8px 0;
}
body.wmv-v2 .mb-screen {
  border-radius: 16px 16px 0 0;
}
body.wmv-v2 .mb-screen .dev-screen {
  border-radius: 8px 8px 0 0;
}
body.wmv-v2 .mb-notch {
  border-radius: 0 0 8px 8px;
}
body.wmv-v2 .dev-frame-tablet {
  border-radius: 20px;
}
body.wmv-v2 .dev-frame-phone {
  border-radius: 32px;
}
body.wmv-v2 .dev-frame-phone .dev-screen {
  border-radius: 24px;
}
body.wmv-v2 .app-qr {
  border-radius: 12px;
}
body.wmv-v2 .pcapp-note {
  border-radius: 12px;
}
body.wmv-v2 .price-card {
  border-radius: 16px;
}
body.wmv-v2 .price-trial-banner {
  border-radius: 12px;
}
body.wmv-v2 .bc-trial-offer-icon {
  border-radius: 12px;
}
body.wmv-v2 .trial-hero {
  border-radius: 16px;
}
body.wmv-v2 .trial-question-card {
  border-radius: 16px;
}
body.wmv-v2 .trial-form-group .trial-kit-option {
  border-radius: 8px;
}
body.wmv-v2 .trial-kit-desc {
  border-radius: 8px;
}
body.wmv-v2 .weather-auto-dashboard {
  border-radius: 16px;
}
body.wmv-v2 .bc-offline-callout {
  border-radius: 16px;
}
body.wmv-v2 .hero-visual {
  border-radius: 24px;
}
body.wmv-v2 .hero-wave .bar {
  border-radius: 2px;
}
body.wmv-v2 .spoke-icon {
  border-radius: 12px;
}
body.wmv-v2 .mock-tab {
  border-radius: 4px;
}
body.wmv-v2 .mock-wave .b {
  border-radius: 2px;
}
body.wmv-v2 .mock-dl {
  border-radius: 4px;
}
body.wmv-v2 .mock-side-item {
  border-radius: 4px;
}
body.wmv-v2 .mock-mini-cal {
  border-radius: 8px;
}
body.wmv-v2 .mock-cal-cell {
  border-radius: 2px;
}
body.wmv-v2 .pricing-card .pricing-cta {
  border-radius: 8px;
}
body.wmv-v2 .case-card {
  border-radius: 20px;
}
body.wmv-v2 .case-card .mark {
  border-radius: 8px;
}
body.wmv-v2 .case-card .who .av {
  border-radius: 8px;
}
body.wmv-v2 .btn {
  border-radius: 8px;
}
body.wmv-v2 .browser {
  border-radius: 12px;
}
body.wmv-v2 .browser-bar .url {
  border-radius: 4px;
}
body.wmv-v2 .kbd {
  border-radius: 4px;
}
body.wmv-v2 .demo-slider-row input[type=range] {
  border-radius: 999px;
}
body.wmv-v2 .demo-dl-btn {
  border-radius: 8px;
}
body.wmv-v2 .feature-tabs {
  border-radius: 12px;
}
body.wmv-v2 .feature-tab {
  border-radius: 8px;
}
body.wmv-v2 .studio-product-shot img {
  border-radius: 8px;
}
body.wmv-v2 .mock-mixer {
  border-radius: 12px;
}
body.wmv-v2 .mock-mixer .track-clip {
  border-radius: 4px;
}
body.wmv-v2 .gallery-item .gallery-media {
  border-radius: 16px;
}
body.wmv-v2 .how-step .how-visual {
  border-radius: 12px;
}
body.wmv-v2 .hv-voice {
  border-radius: 8px;
}
body.wmv-v2 .hv-textbox {
  border-radius: 8px;
}
body.wmv-v2 .hv-file .dl {
  border-radius: 8px;
}
body.wmv-v2 .use-card .ico {
  border-radius: 8px;
}
body.wmv-v2 .media-ph .ph-frame {
  border-radius: 12px;
}
body.wmv-v2 .rv-card {
  border-radius: 16px;
}
body.wmv-v2 .dub-ph .ph-frame {
  border-radius: 12px;
}
body.wmv-v2 .dub-card .ico {
  border-radius: 12px;
}
body.wmv-v2 .wmv-hub-card {
  border-radius: 16px;
}
body.wmv-v2 .signup-card input {
  border-radius: 8px;
}
body.wmv-v2 .legacy-bc-logo-item {
  border-radius: 12px;
}
body.wmv-v2 .legacy-bc-featured-case {
  border-radius: 24px;
}
body.wmv-v2 .legacy-bc-case-card {
  border-radius: 20px;
}
body.wmv-v2 .legacy-bc-media-frame {
  border-radius: 24px;
}
body.wmv-v2 .legacy-bc-equalizer span {
  border-radius: 999px;
}
body.wmv-v2 .legacy-bc-operation-media {
  border-radius: 24px;
}
body.wmv-v2 .bc-feature-rail-progress {
  border-radius: 999px;
}
body.wmv-v2 .legacy-bc-benefit {
  border-radius: 24px;
}
body.wmv-v2 .legacy-bc-benefit-animation {
  border-radius: 16px;
}
body.wmv-v2 .legacy-bc-review-card {
  border-radius: 20px;
}
body.wmv-v2 .legacy-bc-review-logo {
  border-radius: 12px;
}
@media (max-width: 480px) {
  body.wmv-v2 .bc-connect-ops-item > span {
    border-radius: 8px;
  }
}

/* ---- shadow 3단 매핑 — 자동 생성 (gen_v2_css.py) ---- */
body.wmv-v2 .bc-live-card {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .bc-connect-shell {
  box-shadow: var(--shadow-strong);
}
body.wmv-v2 .bc-connect-tab[aria-selected="true"] {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .bc-connect-ops-item > span {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .bc-connect-cta {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .mb-screen {
  box-shadow: var(--shadow-strong);
}
body.wmv-v2 .mb-base {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .dev-frame {
  box-shadow: var(--shadow-strong);
}
body.wmv-v2 .pcapp-modal {
  box-shadow: var(--shadow-strong);
}
body.wmv-v2 .bc-trial-closer {
  box-shadow: var(--shadow-strong);
}
body.wmv-v2 .bc-trial-cta .btn-primary {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .trial-modal {
  box-shadow: var(--shadow-strong);
}
body.wmv-v2 .trial-cta-primary,
body.wmv-v2 .trial-submit {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .weather-auto-dashboard {
  box-shadow: var(--shadow-strong);
}
body.wmv-v2 .bc-price-peek-card {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .hero-visual {
  box-shadow: var(--shadow-strong);
}
body.wmv-v2 .browser.browser-dark {
  box-shadow: var(--shadow-strong);
}
body.wmv-v2 .pricing-card .pricing-cta:hover {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .case-card {
  box-shadow: var(--shadow-strong);
}
body.wmv-v2 .case-card:hover {
  box-shadow: var(--shadow-strong);
}
body.wmv-v2 .nav-pricing-card {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .btn-primary:hover {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .studio-product-shot img {
  box-shadow: var(--shadow-strong);
}
body.wmv-v2 .ppt-video-stage {
  box-shadow: var(--shadow-strong);
}
body.wmv-v2 .tts-closer-cta .btn-primary:hover {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .media-ph .ph-play {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .mp-audio-toggle {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .dub-ph {
  box-shadow: var(--shadow-strong);
}
body.wmv-v2 .dub-card:hover {
  box-shadow: var(--shadow-emphasize);
}
body.wmv-v2 .legacy-bc-intro-art {
  box-shadow: var(--shadow-strong);
}

/* ---- 콘텐츠 폭 정규화 (1200 / 720) — 자동 생성 (gen_v2_css.py) ---- */
body.wmv-v2 .bc-connect-head {
  max-width: 720px;
}
body.wmv-v2 .bc-connect-shell {
  max-width: 1200px;
}
body.wmv-v2 .bc-connect-cta {
  max-width: 1200px;
}
body.wmv-v2 .bc-connect-footnote {
  max-width: 1200px;
}
body.wmv-v2 .bc-apps-viewport {
  max-width: 1200px;
}
body.wmv-v2 .bc-apps-panels {
  max-width: 1200px;
}
body.wmv-v2 .faq {
  max-width: 1200px;
}
body.wmv-v2 .container-wide {
  max-width: 1200px;
}
body.wmv-v2 .nav-inner {
  max-width: 1200px;
}
body.wmv-v2 .section-head {
  max-width: 720px;
}
body.wmv-v2 .gallery {
  max-width: 1200px;
}
body.wmv-v2 .dub-section .section-head {
  max-width: 720px;
}
body.wmv-v2 .music-section .section-head {
  max-width: 720px;
}
body.wmv-v2 .legacy-bc-root .section-head {
  max-width: 720px;
}
body.wmv-v2 .legacy-bc-root .section-head.center {
  max-width: 1200px;
}