/* ========================================================
   chungwol-analyze.css — analyze.html 청월 100% spec SSoT
   5/20 Phase B-2 (광고 진입 P0)

   전략: body.cw-analyze scope override (DOM 변경 최소).
   기존 class (.char-stage, .chat-bubble, .sticky-cta, .sub-step,
   .back-btn, .step-progress, .field, .field-toggle, .gender-btn,
   .calendar-toggle__btn) 그대로 청월 톤 강제.

   영구 원칙: !important + word-break: keep-all + nowrap
   ======================================================== */

/* -- 색·폰트 토큰 (청월 정확) -- */
:root {
  --cw-dark:        #111111;
  --cw-navy:        #1B2F49;
  --cw-blue:        #04336D;
  --cw-blue-light:  #2B557E;
  --cw-beige:       #F5F3EC;
  --cw-light:       #BDCEED;
  --cw-tx-mute:     rgba(255,255,255,0.6);
  --cw-tx-faint:    rgba(255,255,255,0.45);
  --cw-border:      rgba(255,255,255,0.28);
  --cw-border-hi:   rgba(255,255,255,0.50);
  --cw-bubble-bg:   rgba(255,255,255,0.96);
  --cw-bubble-sh:   0 8px 24px rgba(27,47,73,0.18);
  --cw-font-pre:    'Pretendard Variable','Pretendard','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
}

/* ========================================================
   1. cw-mode 토글 (HOME = 사이트 공통 헤더 / INTRO+ = 청월 absolute)
   사토시 5/20: "헤더 메인페이지랑 통일"
   ======================================================== */
body.cw-analyze {
  background: var(--cw-dark) !important;
  margin: 0 !important;
  font-family: var(--cw-font-pre) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
}
body.cw-analyze .funnel-progress,
body.cw-analyze .tab-bar,
body.cw-analyze .tab-bar-spacer {
  display: none !important;
}
/* 5/20 fix (사토시 image #8/#9): .app-container 가운데 정렬 — margin:auto + width:100%.
   wide viewport 에서 left 정렬 사고 차단 (Image #9 영상 왼쪽 박힘 회고). */
body.cw-analyze .app-container {
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 480px !important;
  width: 100% !important;
  background: var(--cw-dark) !important;
  position: relative !important;
}
/* 사이트 공통 .app-header / .app-header-spacer 폭 = .app-container 와 통일 (480 청월 spec).
   기본 site-max 448 → 480 override (body.cw-analyze scope) */
body.cw-analyze .app-header {
  max-width: 480px !important;
}
body.cw-analyze .app-header-spacer {
  max-width: 480px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* 5/20 후반 (image #6/#7): .app-header SSoT — 모든 모드에서 표시 + cw-header 폐기.
   .app-header-spacer 52px 가 main push → sub-step height calc(100dvh-52) 로 줄임 (전 모드). */
body.cw-analyze .app-header,
body.cw-analyze .app-header-spacer { display: flex !important; }
body.cw-analyze .app-header-spacer { display: block !important; }
body.cw-analyze .step,
body.cw-analyze .step__inner,
body.cw-analyze .sub-step {
  height: calc(100dvh - 52px) !important;
  min-height: calc(100dvh - 52px) !important;
}
body.cw-analyze .sub-step .char-stage { top: 0 !important; }
body.cw-analyze[data-cw-mode="home"] .sub-step[data-sub="home"] .char-stage__content {
  /* 5/20 후반 사토시 명시 "얼굴 위치에 맞게" + "살짝 올려" — 얼굴 위쪽 (viewport ~22%) */
  padding-top: 180px !important;
  padding-bottom: 116px !important;
  justify-content: flex-start !important;
}

/* app-header 모드별 element 토글 (HOME = 로고 / INTRO+ = back-btn) */
body.cw-analyze[data-cw-mode="home"] .app-header__logo { display: flex !important; }
body.cw-analyze[data-cw-mode="home"] .app-header__back-btn { display: none !important; }
body.cw-analyze[data-cw-mode="back"] .app-header__logo { display: none !important; }
body.cw-analyze[data-cw-mode="back"] .app-header__back-btn { display: flex !important; }

/* app-header__back-btn (좌측 < — INTRO+ 에서 로고 자리) */
body.cw-analyze .app-header__back-btn {
  width: 36px !important;
  height: 36px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--text-secondary, #555) !important;
  cursor: pointer !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease !important;
}
body.cw-analyze .app-header__back-btn:active { background: rgba(0,0,0,0.05) !important; }

/* app-header__step-progress (가운데 1/3 - absolute centered, hidden default) */
body.cw-analyze .app-header__step-progress {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font: 600 14px/1 var(--cw-font-pre, sans-serif) !important;
  color: var(--text-heading, #1b2f49) !important;
  letter-spacing: 0.04em !important;
  pointer-events: none !important;
}
body.cw-analyze .app-header__step-progress[hidden] { display: none !important; }

/* ========================================================
   2. analyze-page / page-hero / step 컨테이너
   ======================================================== */
body.cw-analyze .analyze-page,
body.cw-analyze .page-hero {
  min-height: 100dvh !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--cw-dark) !important;
  color: #fff !important;
}
body.cw-analyze .page-hero::before { display: none !important; }

body.cw-analyze .step {
  display: none !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  transform: none !important;
  transition: opacity 0.5s ease !important;
}
body.cw-analyze .step--active { display: block !important; }
body.cw-analyze .step--visible { opacity: 1 !important; }

body.cw-analyze .step__inner {
  max-width: 480px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  min-height: calc(100dvh - 52px) !important;
}

/* ========================================================
   3. sub-step (청월 풀 viewport)
   ======================================================== */
body.cw-analyze .sub-step {
  display: none !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  position: relative !important;
  min-height: calc(100dvh - 52px) !important;
  height: calc(100dvh - 52px) !important;
  overflow: hidden !important;
}
body.cw-analyze .sub-step--active { display: block !important; }
body.cw-analyze .sub-step--visible { opacity: 1 !important; }

/* 4. (폐기 5/20 후반) 옛 .cw-header* — .app-header SSoT 로 통합. image #6/#7 헤더 통일 fix. */

/* ========================================================
   5. .char-stage = 청월 풀 viewport 배경 (absolute inset 0)
   ======================================================== */
body.cw-analyze .char-stage {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: var(--cw-dark) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
body.cw-analyze .char-stage__bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 0 !important;
}
body.cw-analyze .char-stage__bg picture,
body.cw-analyze .char-stage__bg video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
body.cw-analyze .char-stage__bg img,
body.cw-analyze .char-stage__bg video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}
body.cw-analyze .char-stage__bg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(17,17,17,0.50) 0%, rgba(17,17,17,0) 35%),
    linear-gradient(180deg, rgba(17,17,17,0) 35%, rgba(17,17,17,0) 55%, rgba(17,17,17,0.92) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* 콘텐츠 영역 (말풍선·필드 영역) */
body.cw-analyze .char-stage__content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 76px 20px 116px 20px !important; /* 헤더 60+16 / CTA 가림 116 */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: transparent !important;
  max-width: none !important;
  width: 100% !important;
  min-height: 0 !important;
}
body.cw-analyze .char-stage__content--end {
  justify-content: flex-end !important;
  padding-bottom: 24px !important;
}
/* (폐기 5/20 후반) 옛 HOME char-stage__content rule — 위 라인 80 의 새 rule SSoT
   (사토시 명시 "INTRO 처럼 위로" — flex-end 하단 사고 fix). */

/* HOME 타이틀 위치 (bottom-[120px] 청월) */
body.cw-analyze .char-stage__home-title {
  position: absolute !important;
  bottom: 120px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 22 !important;
  display: flex !important;
  justify-content: center !important;
  padding: 0 20px !important;
}
body.cw-analyze .char-stage__home-title-img {
  width: 100% !important;
  height: auto !important;
  max-height: 240px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)) !important;
}
/* HOME placeholder 텍스트 가독성 강화 (사토시 5/20 "글씨가 잘 안보임") */
body.cw-analyze .char-stage__catchphrase {
  display: block !important;
  font: 600 13px/1.2 var(--cw-font-pre) !important;
  letter-spacing: 0.18em !important;
  color: var(--cw-light) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 0 16px 0 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.65) !important;
}
body.cw-analyze .char-stage__title {
  margin: 0 !important;
  font-family: var(--cw-font-pre) !important;
  font-weight: 800 !important; /* 700 → 800 */
  font-size: 34px !important;  /* 30 → 34 */
  line-height: 1.32 !important;
  letter-spacing: -0.04em !important;
  color: #fff !important;
  text-align: center !important;
  word-break: keep-all !important;
  /* 다층 drop-shadow 가독성 강화 (어두운 영상 위 + 밝은 영상 위 모두 OK) */
  text-shadow:
    0 2px 16px rgba(0,0,0,0.85),
    0 1px 3px rgba(0,0,0,0.95),
    0 0 24px rgba(0,0,0,0.45) !important;
}
body.cw-analyze .char-stage__lead {
  font: 500 15px/1.6 var(--cw-font-pre) !important;
  color: rgba(255,255,255,0.92) !important; /* 더 밝게 */
  text-align: center !important;
  margin: 16px 0 0 0 !important;
  word-break: keep-all !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.75) !important;
}

/* HOME 영상 위 dark overlay 강화 (텍스트 가독성 보장) */
body.cw-analyze[data-cw-mode="home"] .sub-step[data-sub="home"] .char-stage__bg::after {
  background:
    linear-gradient(180deg, rgba(17,17,17,0.45) 0%, rgba(17,17,17,0.10) 30%, rgba(17,17,17,0.10) 55%, rgba(17,17,17,0.85) 100%) !important;
}

/* ============================================================
   INFO sub-step 모달 톤 (사토시 5/20 image #6: "이걸 모달로 깔끔하게 띄워주면 좋을 듯")
   .char-stage__content = 가운데 모달 카드 (영상 dim backdrop 위)
   ============================================================ */
body.cw-analyze .sub-step[data-sub="info"] .char-stage__bg::after {
  background: rgba(17,17,17,0.72) !important;
}
body.cw-analyze .sub-step[data-sub="info"] .char-stage__content {
  position: absolute !important;
  /* inset cascade pitfall fix (5/20 image #3): inset:auto 가 longhand top/left 보다
     뒤에 박히면 모두 reset 됨. inset:auto 먼저 + right/bottom auto 명시 + top/left 50% */
  inset: auto !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 360px !important;
  max-height: calc(100dvh - 180px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: rgba(20,22,28,0.88) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 18px !important;
  padding: 26px 22px !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
/* 모달 카드 안 첫 field margin 줄임 (카드 padding 이 충분) */
body.cw-analyze .sub-step[data-sub="info"] .field:first-child { margin-top: 0 !important; }
body.cw-analyze .sub-step[data-sub="info"] .field:last-of-type { margin-bottom: 4px !important; }

/* extras + concern 도 입력 폼 — 모달 톤 일관 적용 (사토시 design coherence) */
body.cw-analyze .sub-step[data-sub="extras"] .char-stage__bg::after,
body.cw-analyze .sub-step[data-sub="concern"] .char-stage__bg::after {
  background: rgba(17,17,17,0.72) !important;
}
body.cw-analyze .sub-step[data-sub="extras"] .char-stage__content,
body.cw-analyze .sub-step[data-sub="concern"] .char-stage__content {
  position: absolute !important;
  /* inset cascade pitfall fix (5/20 image #3) — INFO override 와 동일 패턴 */
  inset: auto !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 360px !important;
  max-height: calc(100dvh - 180px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: rgba(20,22,28,0.88) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 18px !important;
  padding: 26px 22px !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ========================================================
   6. 말풍선 (chat-bubble 청월 톤)
   ======================================================== */
body.cw-analyze .chat-bubble {
  display: block !important;
  position: relative !important;
  background: var(--cw-bubble-bg) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  font-family: var(--cw-font-pre) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--cw-navy) !important;
  box-shadow: var(--cw-bubble-sh) !important;
  max-width: 84% !important;
  word-break: keep-all !important;
  letter-spacing: -0.025em !important;
  /* 5/22 사토시 "더 빠르게" — 첫 말풍선 delay 0.15s, duration 0.3s (기존 0.4s/0.4s 느림) */
  animation: cw-bubble-in 0.3s ease 0.15s both !important;
}
body.cw-analyze .chat-bubble strong {
  color: var(--cw-blue) !important;
  font-weight: 700 !important;
}
body.cw-analyze .chat-bubble--right { margin-left: auto !important; }
body.cw-analyze .chat-bubble--left { margin-right: auto !important; }
/* 사토시 5/20 후반 image #5: "진짜 말하는 거 처럼" — 두 번째 말풍선 명확한 텀 (1.8s).
   fill-mode both = delay 동안 from{opacity:0} 자연 적용 (invisible → fade-in). */
body.cw-analyze .chat-bubble + .chat-bubble {
  margin-top: 16px !important;
  animation: cw-bubble-in 0.3s ease 0.6s both !important;
}
@keyframes cw-bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================================
   7. CTA (sticky-cta 청월식 absolute bottom z-30)
   ======================================================== */
body.cw-analyze .sticky-cta {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 30 !important;
  width: 100% !important;
  padding: 0 20px 40px 20px !important; /* px-5 pb-10 */
  background: transparent !important;
  display: flex !important;
  gap: 12px !important;
}
body.cw-analyze .sticky-cta__btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 10px !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--cw-blue) !important;
  color: #fff !important;
  font-family: var(--cw-font-pre) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  transition: background 0.15s ease, opacity 0.15s ease !important;
  width: auto !important;
}
body.cw-analyze .sticky-cta__btn:hover { background: #062E5C !important; }
body.cw-analyze .sticky-cta__btn:active { transform: translateY(0.5px) !important; }
body.cw-analyze .sticky-cta__btn[disabled],
body.cw-analyze .sticky-cta__btn[aria-disabled="true"] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}
body.cw-analyze .sticky-cta__btn--prev {
  flex: 0 0 auto !important;
  padding: 12px 24px !important;
  background: transparent !important;
  border: 1px solid #fff !important;
  font-weight: 500 !important;
  width: auto !important;
}
body.cw-analyze .sticky-cta__btn--prev:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* 5/20 fix: sticky-cta--inline = 모달 카드 안 박힘 (info/extras/concern)
   사토시 verbatim: "다음으로 넘어가야하는데 밑으로 떠서 오류 존나 심함" */
body.cw-analyze .sticky-cta--inline {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  padding: 18px 0 0 0 !important;
  margin: 4px 0 0 0 !important;
  width: 100% !important;
  display: flex !important;
  gap: 12px !important;
  background: transparent !important;
}

/* 8 + 9 (폐기 5/20 후반): 옛 .back-btn / .step-progress — .app-header__back-btn /
   .app-header__step-progress 로 통합. image #6/#7 헤더 SSoT fix. */

/* ========================================================
   10. 필드 (info / extras / concern step 안 입력 필드)
   ======================================================== */
body.cw-analyze .field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 0 22px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
body.cw-analyze .field__label {
  display: block !important;
  font-family: var(--cw-font-pre) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.025em !important;
  color: #fff !important;
  margin: 0 !important;
  word-break: keep-all !important;
}
body.cw-analyze .field__optional {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--cw-tx-mute) !important;
  margin-left: 6px !important;
  letter-spacing: 0 !important;
}
body.cw-analyze .field__input,
body.cw-analyze .field__select {
  width: 100% !important;
  height: 44px !important;
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cw-border) !important;
  border-radius: 0 !important;
  padding: 0 2px !important;
  font-family: var(--cw-font-pre) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}
body.cw-analyze .field__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23BDCEED' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  background-color: transparent !important;
  padding-right: 28px !important;
}
body.cw-analyze .field__select option {
  color: var(--cw-navy) !important;
  background: #fff !important;
}
body.cw-analyze .field__input::placeholder { color: var(--cw-tx-faint) !important; font-size: 14px !important; }
body.cw-analyze .field__input:focus,
body.cw-analyze .field__select:focus { border-bottom-color: var(--cw-light) !important; }

body.cw-analyze .field__textarea,
body.cw-analyze textarea#inputConcern,
body.cw-analyze textarea#inputQuestion {
  width: 100% !important;
  min-height: 120px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  color: #fff !important;
  font-family: var(--cw-font-pre) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  resize: none !important;
  outline: none !important;
  word-break: keep-all !important;
  box-sizing: border-box !important;
}
body.cw-analyze .field__textarea::placeholder,
body.cw-analyze textarea#inputConcern::placeholder,
body.cw-analyze textarea#inputQuestion::placeholder {
  color: var(--cw-tx-faint) !important;
}
body.cw-analyze .field__textarea:focus,
body.cw-analyze textarea#inputConcern:focus,
body.cw-analyze textarea#inputQuestion:focus {
  border-color: var(--cw-light) !important;
  background: rgba(255,255,255,0.10) !important;
}

body.cw-analyze .field-hint {
  font-size: 12px !important;
  color: var(--cw-tx-mute) !important;
  margin: 2px 0 0 0 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.01em !important;
  word-break: keep-all !important;
  display: block !important;
}
body.cw-analyze .field-hint strong {
  color: var(--cw-light) !important;
  font-weight: 700 !important;
}

/* ========================================================
   11. 토글 버튼 (성별 / 역법 / 추가정보)
   ======================================================== */
body.cw-analyze .field-toggle,
body.cw-analyze .gender-toggle,
body.cw-analyze .calendar-toggle {
  display: flex !important;
  gap: 10px !important;
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
  flex: none !important;
}
body.cw-analyze .field-toggle__btn,
body.cw-analyze .gender-btn,
body.cw-analyze .calendar-toggle__btn {
  flex: 1 !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: 10px !important;
  font-family: var(--cw-font-pre) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  box-shadow: none !important;
}
body.cw-analyze .field-toggle__btn:hover,
body.cw-analyze .gender-btn:hover,
body.cw-analyze .calendar-toggle__btn:hover {
  border-color: var(--cw-border-hi) !important;
}
body.cw-analyze .field-toggle__btn--active,
body.cw-analyze .gender-btn--active,
body.cw-analyze .calendar-toggle__btn--active {
  background: var(--cw-blue) !important;
  border-color: var(--cw-blue) !important;
  color: #fff !important;
}

/* ========================================================
   12. 체크박스 (배우자 미리보기 등 다크 톤)
   ======================================================== */
body.cw-analyze .spouse-check-dark,
body.cw-analyze .cw-check {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  word-break: keep-all !important;
}
body.cw-analyze .spouse-check-dark:hover,
body.cw-analyze .cw-check:hover {
  border-color: rgba(255,255,255,0.36) !important;
  background: rgba(255,255,255,0.08) !important;
}
body.cw-analyze .spouse-check-dark input[type="checkbox"],
body.cw-analyze .cw-check input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--cw-blue) !important;
  cursor: pointer !important;
}
body.cw-analyze .spouse-check-dark span,
body.cw-analyze .cw-check__text {
  font-family: var(--cw-font-pre) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #fff !important;
  letter-spacing: -0.025em !important;
  word-break: keep-all !important;
}
body.cw-analyze .spouse-check__new,
body.cw-analyze .cw-check__new {
  display: inline-block !important;
  margin-left: 6px !important;
  padding: 1px 6px !important;
  background: var(--cw-light) !important;
  color: var(--cw-navy) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  letter-spacing: 0.04em !important;
}

/* ========================================================
   13. safety-notice-dark
   ======================================================== */
body.cw-analyze .safety-notice-dark {
  margin-top: 16px !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border-left: 3px solid var(--cw-light) !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: var(--cw-tx-mute) !important;
  letter-spacing: -0.01em !important;
  word-break: keep-all !important;
}

/* ========================================================
   14. 작은 viewport (360~380) 대응
   ======================================================== */
@media (max-width: 380px) {
  body.cw-analyze .sticky-cta__btn { font-size: 18px !important; }
  body.cw-analyze .char-stage__title { font-size: 26px !important; }
  body.cw-analyze .chat-bubble { font-size: 15px !important; padding: 13px 16px !important; }
}

/* ========================================================
   15. LCP 우선 (영상 lazy poster fallback)
   ======================================================== */
body.cw-analyze .char-stage video {
  background: var(--cw-dark) !important;
}
body.cw-analyze .char-stage video[poster] {
  background-size: cover !important;
  background-position: center top !important;
}

/* (사토시 5/22 #71) analyzing 제목 검정이라 다크 배경 위 안 보이던 것 → 흰색 */
body.cw-analyze .loading-area__title { color: #fff !important; }
body.cw-analyze .loading-area__title strong { color: #E8C667 !important; }

/* (사토시 5/22) analyzing(step2) 배경 영상 analyzing-saju.mp4 (영상 줬는데 안 쓰이던 것) */
body.cw-analyze .step__inner--analyzing { position: relative !important; overflow: hidden !important; }
body.cw-analyze .analyzing-bg {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; z-index: 0 !important; pointer-events: none !important;
}
/* 기존 ::before 를 영상 위 다크 scrim 으로 (글씨 가독성) */
body.cw-analyze .step__inner--analyzing::before {
  background: rgba(17,17,17,0.6) !important; z-index: 1 !important;
}
/* loading-area 콘텐츠는 영상·scrim 위 */
body.cw-analyze .step__inner--analyzing > .loading-area { position: relative !important; z-index: 2 !important; }

/* (사토시 5/22) analyzing(결과 넘어가는 곳) = 영상만, 5인 분석 카드/제목/quote 제거 */
body.cw-analyze .step__inner--analyzing .loading-area { display: none !important; }
body.cw-analyze .step__inner--analyzing::before { display: none !important; }