/* =============================================================== */
/* hero_band.v10.css — 팝업 이후 형광펜 스윽 효과 + 떨어지는 줄 */
/* =============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap');

:root {
  /* 타이포 */
  --font-weight-bold: 900;
  --cap-line1-font-weight: 400;
  --cap-line2-font-weight: 700;

  /* 레이아웃 & 간격 */
  --unmask-title-line-height: 1.2;
  --probe-card-gap-pc: 3rem;
  --probe-card-gap-mo: 2rem;
  --probe-card-gap: var(--probe-card-gap-pc);
  --gap-1-to-2-pc: 40px;
  --gap-1-to-2-mo: 10px;

  /* 크기 */
  --cap-line1-size-pc: 5rem;
  --cap-line2-size-pc: 7rem;
  --cap-line1-size-mo: 2rem;
  --cap-line2-size-mo: 3rem;

  /* 형광펜 효과 변수 */
  --hl-color: hsl(207, 89%, 75%);
  --hl-opacity: 0.85;
  --hl-stay-opacity: 0.85;
  --hl-height: 0.65em;
  --hl-extra-delay: 180ms;
  --hl-duration: 650ms;

  /* 떨어지는 줄 변수 */
  --fall-line-width: 3px;
  --fall-line-height-pc: 80px;
  --fall-line-height-mo: 40px;
  --fall-line-color: #5c5c5ee6;
  --fall-line-delay: 100ms;
  --fall-line-duration: 600ms;

  /* 상단문구 ↔ 도트 / 도트 ↔ 하단문구 (PC/MO) */
  --gap-toptext-to-dots-pc: 40px;
  --gap-toptext-to-dots-mo: 10px;
  --gap-dots-to-bottomtext-pc: 40px;
  --gap-dots-to-bottomtext-mo: 30px;

}

/* MOBILE alias for probe-card-gap */
@media (max-width:767px){
  :root{ --probe-card-gap: var(--probe-card-gap-mo); }
}

body { font-family: 'Noto Sans KR', sans-serif; }

/* 레이아웃 */
#heroAfterSpacer, #heroBottomSpacer { display: none !important; }
#heroBgBand { width: 100%; position: relative; z-index: 10; background: var(--hero-band-bg, transparent); }
#heroBgBand .band-inner {
  padding-top: calc(var(--band-top-pad, 48px) + var(--probe-card-gap));
  padding-bottom: 12px;
  position: relative; z-index: 10;
}
#heroProbeCaptionFlow {
  box-sizing: border-box;
  border-radius: 10px;
  padding: 0;
  margin: 0 auto;
  width: min(95vw, var(--flow-cap-width, 980px));
  line-height: 1.55;
  display: flex; justify-content: center; align-items: center;
  min-height: 1rem;
  position: relative; z-index: 11;
}

/* 중앙 정렬 */
#heroProbeCaptionFlow .probe-caption-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
#heroProbeCaptionFlow .probe-caption-inner p { margin: 0; padding: 0; }
#heroProbeCaptionFlow .probe-caption-inner p:nth-of-type(2){ margin-top: 0; }
#heroProbeCaptionFlow .probe-caption-inner p:nth-of-type(3){ margin-top: 0; }

/* 타이포 (PC) */
#heroProbeCaptionFlow .cap-line1 { font-size: var(--cap-line1-size-pc) !important; font-weight: var(--cap-line1-font-weight); }
#heroProbeCaptionFlow .cap-line2 { font-size: var(--cap-line2-size-pc) !important; font-weight: var(--cap-line2-font-weight); }

/* 모바일 */
@media (max-width: 767px) {
  #heroBgBand, #heroBgBand .band-inner, #heroProbeCaptionFlow {
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important; border-radius: 0;
  }
  #heroProbeCaptionFlow .probe-caption-inner p:nth-of-type(2){ margin-top: 0; }
  #heroProbeCaptionFlow .probe-caption-inner p:nth-of-type(3){ margin-top: 0; }
  #heroProbeCaptionFlow .cap-line1 { font-size: var(--cap-line1-size-mo) !important; }
  #heroProbeCaptionFlow .cap-line2 { font-size: var(--cap-line2-size-mo) !important; }
}

/* 단어별 언마스킹 */
.unmask-title {
  line-height: var(--unmask-title-line-height);
  transition: opacity 0.9s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
}
.unmask-title > span { position: relative; display: inline-block; margin-right: 0.15em; overflow: hidden; }
.unmask-title > span > span {
  display: block;
  transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateY(110%);
}
.unmask-title.animate { opacity: 1; }
.unmask-title.animate > span > span { transform: translateY(0%); }

/* 강조 단어 */
.fw-bold { font-weight: var(--font-weight-bold) !important; }

/* 팝업 & 3D 플립 */
.pop-and-flip-text {
  position: relative; display: inline-block; overflow: visible;
  opacity: 0; transform: scale(0.8) rotateX(-90deg) translateY(20px);
  transform-origin: center center; transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  perspective: 1000px; transform-style: preserve-3d;
  color: #1010dc; text-shadow: 2px 2px 4px rgba(0,0,0,0.35);
}
.pop-and-flip-text.is-visible { opacity: 1; transform: scale(1) rotateX(0) translateY(0); }

/* 형광펜 스윽 효과 */
.pop-and-flip-text::after{
  clip-path: polygon(0% 0%,100% 0%,100% 40%,98% 46%,100% 54%,98.5% 62%,100% 70%,99% 85%,100% 100%,0% 100%);
  box-shadow: inset 0 0 0.35em rgba(0,0,0,0.05);
  content:""; position:absolute; left:0; top:58%; transform:translateY(-50%);
  height: var(--hl-height); width: 0; background: var(--hl-color);
  opacity: var(--hl-opacity); border-radius: .2em; filter: blur(.5px);
  pointer-events: none; mix-blend-mode: multiply; z-index: 2; will-change: width, opacity;
}
.pop-and-flip-text.hl-run::after { animation: highlight-sweep var(--hl-duration) cubic-bezier(.22,1,.36,1) var(--hl-extra-delay) forwards; }
@keyframes highlight-sweep{ 0%{width:0;opacity:var(--hl-opacity);} 80%{width:100%;opacity:var(--hl-opacity);} 100%{width:100%;opacity:var(--hl-stay-opacity);} }

/* 떨어지는 세로 라인 */
#heroProbeCaptionFlow .falling-line{
  position: relative;
  width: var(--fall-line-width);
  height: var(--fall-line-height-pc);
  margin-top: var(--gap-toptext-to-dots-pc);
  margin-bottom: var(--gap-dots-to-bottomtext-pc);
  display: flex; align-items: flex-start; justify-content: center;
  pointer-events: none;
}
#heroProbeCaptionFlow .falling-line::after{
  content:""; display:block; width:100%; height:0; background: var(--fall-line-color);
  border-radius: 2px; opacity: 0; transform-origin: top center; will-change: height, opacity;
}
#heroProbeCaptionFlow .falling-line.animate::after{
  animation: heroFallLine var(--fall-line-duration) cubic-bezier(.22,1,.36,1) var(--fall-line-delay) forwards;
}
@keyframes heroFallLine{ 0%{height:0;opacity:0;} 10%{opacity:1;} 100%{height:var(--fall-line-height-pc);opacity:1;} }

@media (max-width:767px){
  #heroProbeCaptionFlow .falling-line{
    height: var(--fall-line-height-mo);
    margin-top: var(--gap-toptext-to-dots-mo);
    margin-bottom: var(--gap-dots-to-bottomtext-mo);
  }
  @keyframes heroFallLine{ 0%{height:0;opacity:0;} 10%{opacity:1;} 100%{height:var(--fall-line-height-mo);opacity:1;} }
}

/* auto height */
#heroProbeCaptionFlow { height:auto !important; min-height:0 !important; }

/* === speed-up pack === */
/* 1) 줄(세로선) 더 빨리 */
:root{
  --fall-line-delay: 80ms;     /* 기본 200ms → 80ms */
  --fall-line-duration: 350ms; /* 기본 600ms → 350ms */
}

/* 2) 상단문구 언마스킹 속도 ↓ */
.unmask-title{
  transition: opacity .60s cubic-bezier(0.23,1,0.32,1);
}
.unmask-title > span > span{
  transition: transform .60s cubic-bezier(0.23,1,0.32,1);
}

/* 3) 하단문구 팝업 속도 ↓ */
.pop-and-flip-text{
  transition: opacity .35s ease-out, transform .35s ease-out; /* 기본 .5s → .35s */
}

/* 4) 형광펜 스윽도 조금 빠르게 */
:root{
  --hl-duration: 420ms;   /* 기본 650ms → 420ms */
  --hl-extra-delay: 0ms;  /* 기본 180ms → 0ms */
}

/* ==================================================================== */
/* Override the original falling line with a dotted fall for hero band. */
/* We keep the `.falling-line` class so that existing JS still adds the  */
/* `animate` class at the right moment, but we hide the original line   */
/* pseudo-element and display a column of dots that animate sequentially.*/
/* ==================================================================== */

/* Hide the original vertical line pseudo-element */
#heroProbeCaptionFlow .falling-line::after {
  display: none !important;
}

/* Stack dots vertically instead of using a solid line and ensure container width */
#heroProbeCaptionFlow .falling-line {
  flex-direction: column !important;
  width: 5px !important;
}

/* Style individual dots */
#heroProbeCaptionFlow .falling-line .falling-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--fall-line-color);
  margin: 2px;
  opacity: 0;
  transform: translateY(-10px);
  animation: heroProbeFallDot 0.2s ease-out forwards;
  animation-fill-mode: both;
  animation-play-state: paused;
  will-change: transform, opacity;
}

/* Sequential animation delays for each dot (we use five dots) */
#heroProbeCaptionFlow .falling-line .falling-dot:nth-child(1) { animation-delay: 0s; }
#heroProbeCaptionFlow .falling-line .falling-dot:nth-child(2) { animation-delay: 0.05s; }
#heroProbeCaptionFlow .falling-line .falling-dot:nth-child(3) { animation-delay: 0.1s; }
#heroProbeCaptionFlow .falling-line .falling-dot:nth-child(4) { animation-delay: 0.15s; }
#heroProbeCaptionFlow .falling-line .falling-dot:nth-child(5) { animation-delay: 0.2s; }

/* Start dot animations when the `.animate` class is added (handled in JS) */
#heroProbeCaptionFlow .falling-line.animate .falling-dot {
  animation-play-state: running;
}

/* Keyframes for dot fall animation */
@keyframes heroProbeFallDot {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(20px);
  }
}



/* ===== [New Global] band-extra (hero 밖 독립 섹션) ===== */
.band-extra{
  background:#000ce2;
  color:#fff;
  width:100%;
  box-sizing:border-box;
  padding:24px 0; /* PC 기본 여백 */
}
.band-extra .container{
  width: min(95vw, var(--flow-cap-width, 980px));
  margin: 0 auto;
}
@media (max-width: 767px){
  .band-extra{ padding:16px 0; }
}




/* ===============================================================
   OVERRIDES (2025-08-29): 도트 위에 cap-line2(“나도 가능할까?”)가 위치한 현재 순서 기준
   - cap-line1 → cap-line2 → dots 순으로 간격 재정의
   - band-inner / flow 자동높이 & overflow 가시화
   =============================================================== */

/* 1) cap-line1 → cap-line2 간격: 전역 p:nth-of-type(2){margin-top:0}를 덮어씀 */
#heroProbeCaptionFlow .probe-caption-inner p:nth-of-type(2){
  margin-top: var(--gap-1-to-2-pc);
}
@media (max-width: 767px){
  #heroProbeCaptionFlow .probe-caption-inner p:nth-of-type(2){
    margin-top: var(--gap-1-to-2-mo);
  }
}

/* 2) cap-line2 → dots(도트) 간격: 기존 --gap-toptext-to-dots-* 변수를 그대로 사용 */
#heroProbeCaptionFlow .falling-line{
  margin-top: var(--gap-toptext-to-dots-pc);
  margin-bottom: var(--gap-dots-to-bottomtext-pc);
}
@media (max-width: 767px){
  #heroProbeCaptionFlow .falling-line{
    margin-top: var(--gap-toptext-to-dots-mo);
    margin-bottom: var(--gap-dots-to-bottomtext-mo);
  }
}

/* 3) 콘텐츠가 길어질 때 자동 확장 (잘림 방지) */
#heroBgBand,
#heroBgBand .band-inner,
#heroProbeCaptionFlow{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}



/* ===============================================================
   OVERRIDES (Add-on): cap-line1 내부 2줄(“많은 분들이” ↔ “궁금해 합니다.”) 줄간 간격 조절
   - PC/MO 각각 변수로 제어
   =============================================================== */
:root{
  --cap1-line-gap-pc: 1.15;
  --cap1-line-gap-mo: 1.25;
}

/* cap-line1(=unmask-title) 줄간격을 별도 변수로 강제 */
#heroProbeCaptionFlow .cap-line1.unmask-title{
  line-height: var(--cap1-line-gap-pc) !important;
}
@media (max-width: 767px){
  #heroProbeCaptionFlow .cap-line1.unmask-title{
    line-height: var(--cap1-line-gap-mo) !important;
  }
}



/* ===============================================================
   OVERRIDES (Tight Line Gap): 줄간을 더 줄여도 최소 간격 제한처럼 보일 때
   원인: .unmask-title > span 이 inline-block이라 line-box가 글꼴 높이로 고정됨.
   대응: span을 inline으로 강제해 line-height가 그대로 적용되도록 수정.
   =============================================================== */
#heroProbeCaptionFlow .cap-line1.unmask-title { line-height: var(--cap1-line-gap-pc) !important; }
@media (max-width: 767px){
  #heroProbeCaptionFlow .cap-line1.unmask-title { line-height: var(--cap1-line-gap-mo) !important; }
}

/* inline-block → inline 로 바꿔 line-height의 영향 받게 함 */
#heroProbeCaptionFlow .cap-line1.unmask-title > span{
  display: inline !important;
  vertical-align: top !important;
  line-height: inherit !important; /* 부모 줄간 따르게 */
  /* margin-right는 유지(단어 간격) */
}
#heroProbeCaptionFlow .cap-line1.unmask-title > span > span{
  display: inline !important;
  line-height: inherit !important;
}



/* ===============================================================
   Center QA block and ensure full width (independent from .falling-line width)
   =============================================================== */
#heroProbeCaptionFlow .probe-qa{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  width:100% !important;
  max-width: var(--flow-cap-width, 980px);
  margin: 0 auto;
}
#heroProbeCaptionFlow .probe-qa .qa-line{ text-align:center; }

/* === [QA(도트 아래 3문구) 크기·간격 컨트롤 추가] =================== */
:root{
  /* 글자 크기/굵기 */
  --qa-size-pc: 4rem;
  --qa-size-mo: 2rem;
  --qa-weight: 600;

  /* 도트 → 첫 문구 간격(없으면 여기서 정의) */
  --gap-dots-to-bottomtext-pc: 24px;
  --gap-dots-to-bottomtext-mo: 24px;

  /* 문구 ↔ 문구 간격 */
  --gap-qa1-to-qa2-pc: 20px;
  --gap-qa2-to-qa3-pc: 20px;
  --gap-qa1-to-qa2-mo: 6px;
  --gap-qa2-to-qa3-mo: 6px;
}

/* 도트 아래 간격(PC) */
#heroProbeCaptionFlow .falling-line{
  margin-bottom: var(--gap-dots-to-bottomtext-pc);
}
@media (max-width: 767px){
  /* 도트 아래 간격(MO) */
  #heroProbeCaptionFlow .falling-line{
    margin-bottom: var(--gap-dots-to-bottomtext-mo);
  }
}

/* QA 3문구 스타일 & 중앙정렬 */
#heroProbeCaptionFlow .probe-qa{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; width:100%;
}
#heroProbeCaptionFlow .probe-qa .qa-line{
  margin:0; padding:0;
  font-size: var(--qa-size-pc);
  font-weight: var(--qa-weight);
  line-height: 1.35;  /* 필요 시 줄간도 여기서 조절 */
}
/* 1↔2, 2↔3 간격 */
#heroProbeCaptionFlow .probe-qa .qa-line:nth-of-type(2){ margin-top: var(--gap-qa1-to-qa2-pc); }
#heroProbeCaptionFlow .probe-qa .qa-line:nth-of-type(3){ margin-top: var(--gap-qa2-to-qa3-pc); }

@media (max-width: 767px){
  #heroProbeCaptionFlow .probe-qa .qa-line{ font-size: var(--qa-size-mo); }
  #heroProbeCaptionFlow .probe-qa .qa-line:nth-of-type(2){ margin-top: var(--gap-qa1-to-qa2-mo); }
  #heroProbeCaptionFlow .probe-qa .qa-line:nth-of-type(3){ margin-top: var(--gap-qa2-to-qa3-mo); }
}


/* === [QA 3D Fade-In (depth)] === */
:root{
  --qa-fade-duration: 1100ms;      /* 천천히 */
  --qa-fade-ease: cubic-bezier(.22,1,.36,1);
  --qa-fade-translateZ: -60px;     /* 뒤에서 앞으로 */
  --qa-fade-blur: 8px;             /* 흐림 → 선명 */
  --qa-fade-delay-1: 0s;
  --qa-fade-delay-2: .18s;
  --qa-fade-delay-3: .36s;
}

/* 3D 효과가 보이도록 원근 추가 */
#heroProbeCaptionFlow .probe-caption-inner,
#heroProbeCaptionFlow .probe-qa{
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* 초기 상태: 살짝 뒤/아래, 흐림 */
#heroProbeCaptionFlow .probe-qa .qa-line{
  opacity: 0;
  transform: translateY(6px) translateZ(var(--qa-fade-translateZ)) scale(.985);
  filter: blur(var(--qa-fade-blur));
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

/* 등장 애니메이션 */
#heroProbeCaptionFlow .probe-qa.qa-reveal .qa-line{
  animation: qaFadeInDepth var(--qa-fade-duration) var(--qa-fade-ease) forwards;
}
#heroProbeCaptionFlow .probe-qa.qa-reveal .qa-line:nth-of-type(1){ animation-delay: var(--qa-fade-delay-1); }
#heroProbeCaptionFlow .probe-qa.qa-reveal .qa-line:nth-of-type(2){ animation-delay: var(--qa-fade-delay-2); }
#heroProbeCaptionFlow .probe-qa.qa-reveal .qa-line:nth-of-type(3){ animation-delay: var(--qa-fade-delay-3); }

@keyframes qaFadeInDepth{
  0%{ opacity:0; transform: translateY(6px) translateZ(var(--qa-fade-translateZ)) scale(.985); filter: blur(var(--qa-fade-blur)); }
  100%{ opacity:1; transform: translateY(0) translateZ(0) scale(1); filter: blur(0); }
}


/* === [QA 3D Fade-In (WHOLE BLOCK)] === */
/* Q&A 전체 블록이 한 번에 '뒤에서 앞으로' 등장하도록 통짜 애니메이션으로 변경 */
:root{
  --qa-fade-duration: 1100ms;
  --qa-fade-ease: cubic-bezier(.22,1,.36,1);
  --qa-fade-translateZ: -80px; /* 좀 더 깊게 */
  --qa-fade-blur: 10px;
}

/* Q&A 컨테이너에만 3D/퍼스펙티브 적용 */
#heroProbeCaptionFlow .probe-qa{
  perspective: 1000px;
  transform-style: preserve-3d;
  opacity: 0;
  transform: translateY(8px) translateZ(var(--qa-fade-translateZ)) scale(.985);
  filter: blur(var(--qa-fade-blur));
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}
#heroProbeCaptionFlow .probe-qa.qa-reveal{
  animation: qaWholeIn var(--qa-fade-duration) var(--qa-fade-ease) forwards;
}

@keyframes qaWholeIn{
  0%{
    opacity: 0;
    transform: translateY(8px) translateZ(var(--qa-fade-translateZ)) scale(.985);
    filter: blur(var(--qa-fade-blur));
  }
  100%{
    opacity: 1;
    transform: translateY(0) translateZ(0) scale(1);
    filter: blur(0);
  }
}

/* 개별 줄 애니메이션/딜레이 제거 (통짜로 보여주기) */
#heroProbeCaptionFlow .probe-qa .qa-line{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}


/* === [QA 3D Fade-In (WHOLE BLOCK) v2: depth-only] === */
/* 위→아래 낙하 느낌 제거: Y이동 없음, 오직 Z(깊이)+스케일+블러 */
:root{
  --qa-fade-duration: 1300ms;        /* 더 천천히 */
  --qa-fade-ease: cubic-bezier(.22,1,.36,1);
  --qa-fade-translateZ: -140px;      /* 뒤에서 시작 */
  --qa-fade-blur: 8px;
}

/* 원근은 부모에 주고, 자식(.probe-qa)을 앞으로 당김 */
#heroProbeCaptionFlow, 
#heroProbeCaptionFlow .probe-caption-inner{
  perspective: 1000px;
}

#heroProbeCaptionFlow .probe-qa{
  opacity: 0;
  transform: translateZ(var(--qa-fade-translateZ)) scale(.965); /* Y 이동 제거 */
  filter: blur(var(--qa-fade-blur));
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}
#heroProbeCaptionFlow .probe-qa.qa-reveal{
  animation: qaWholeDepthOnly var(--qa-fade-duration) var(--qa-fade-ease) forwards;
}

@keyframes qaWholeDepthOnly{
  0%{
    opacity: 0;
    transform: translateZ(var(--qa-fade-translateZ)) scale(.965);
    filter: blur(var(--qa-fade-blur));
  }
  100%{
    opacity: 1;
    transform: translateZ(0) scale(1);
    filter: blur(0);
  }
}


/* === [QA Bottom→Top Mask Fade Reveal] === */
/* Q&A 전체를 '아래→위'로 부드럽게 드러내기 (마스크+페이드)  */
:root{
  --qa-mask-duration: var(--qa-fade-duration, 1200ms); /* 마스크도 같은 속도로 */
  --qa-mask-soft: 22%; /* 페이드 가장자리 두께 (부드러움) */
}

/* 마스크 기초값: 처음엔 거의 안 보이게 (아래쪽만 아주 살짝) */
#heroProbeCaptionFlow .probe-qa{
  /* depth/opacity 초기값은 기존 설정 유지 */
  -webkit-mask-image: linear-gradient(to top, #000 50%, transparent calc(50% + var(--qa-mask-soft)));
          mask-image: linear-gradient(to top, #000 50%, transparent calc(50% + var(--qa-mask-soft)));
  -webkit-mask-size: 100% 200%;
          mask-size: 100% 200%;
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
}

/* 등장 시: 마스크를 아래→위로 끌어올리며, 기존 depth 페이드와 동시에 진행 */
#heroProbeCaptionFlow .probe-qa.qa-reveal{
  /* depth-only 애니(qaWholeDepthOnly)가 이미 정의되어 있으므로, 마스크 애니를 추가로 병렬 재생 */
  animation:
    qaMaskUp var(--qa-mask-duration) var(--qa-fade-ease) forwards,
    qaWholeDepthOnly var(--qa-fade-duration) var(--qa-fade-ease) forwards;
}

@keyframes qaMaskUp{
  0%{
    -webkit-mask-position: 0 100%;
            mask-position: 0 100%;
  }
  100%{
    -webkit-mask-position: 0 0%;
            mask-position: 0 0%;
  }
}


/* === [QA Bottom→Top CLIP Reveal OVERRIDE] === */
/* 이전 마스크/라인 애니 충돌 제거 + '아래→위' 클립 방식으로 확정 */

#heroProbeCaptionFlow .probe-qa {
  /* 기존 마스크/애니 무력화 */
  -webkit-mask: none !important;
          mask: none !important;

  /* depth + fade (Y이동 없음) */
  opacity: 0;
  transform: translateZ(var(--qa-fade-translateZ, -140px)) scale(.965);
  filter: blur(var(--qa-fade-blur, 8px));
  will-change: transform, opacity, filter, clip-path;

  /* 아래→위 드러나게: 위쪽에서 잘라내기 */
  clip-path: inset(100% 0 0 0);
}

#heroProbeCaptionFlow .probe-qa.qa-reveal {
  animation:
    qaClipUp var(--qa-fade-duration, 1200ms) var(--qa-fade-ease, cubic-bezier(.22,1,.36,1)) forwards,
    qaDepth var(--qa-fade-duration, 1200ms) var(--qa-fade-ease, cubic-bezier(.22,1,.36,1)) forwards;
}

@keyframes qaClipUp {
  0%   { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0);    }
}

@keyframes qaDepth {
  0%   { opacity: 0; transform: translateZ(var(--qa-fade-translateZ, -140px)) scale(.965); filter: blur(var(--qa-fade-blur, 8px)); }
  100% { opacity: 1; transform: translateZ(0) scale(1);                                      filter: blur(0); }
}

/* 줄별 애니/이동 완전 차단 (사라짐/낙하 방지) */
#heroProbeCaptionFlow .probe-qa .qa-line {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}


/* === [QA Top→Bottom Mask Fade Reveal OVERRIDE] === */
/* '위에서 안으로'(Top→Bottom)로 아주 스무스하게 드러나게. 
   이전 clip-path/마스크 설정과 충돌 방지용 강제 오버라이드 포함. */

#heroProbeCaptionFlow .probe-qa {
  /* 충돌 제거 */
  clip-path: none !important;

  /* 스무스 마스크: 위→아래로 내려오며 노출 */
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent calc(50% + var(--qa-mask-soft, 22%)));
          mask-image: linear-gradient(to bottom, #000 50%, transparent calc(50% + var(--qa-mask-soft, 22%)));
  -webkit-mask-size: 100% 200%;
          mask-size: 100% 200%;
  -webkit-mask-position: 0 0%;            /* 처음: 위쪽만 살짝 보이게 */
          mask-position: 0 0%;

  /* depth + fade (Y 이동 없음) */
  opacity: 0;
  transform: translateZ(var(--qa-fade-translateZ, -140px)) scale(.965);
  filter: blur(var(--qa-fade-blur, 8px));
  will-change: transform, opacity, filter, mask-position;
}

#heroProbeCaptionFlow .probe-qa.qa-reveal {
  animation:
    qaMaskDown var(--qa-fade-duration, 1400ms) var(--qa-fade-ease, cubic-bezier(.22,1,.36,1)) forwards,
    qaDepth    var(--qa-fade-duration, 1400ms) var(--qa-fade-ease, cubic-bezier(.22,1,.36,1)) forwards;
}

@keyframes qaMaskDown {
  0%   { -webkit-mask-position: 0 0%;   mask-position: 0 0%;   }
  100% { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
}

/* 줄별 애니/이동/투명도 차단 (줄이 튀거나 사라지는 것 방지) */
#heroProbeCaptionFlow .probe-qa .qa-line {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}


/* === [QA CONTAINER-ONLY BLOCK REVEAL OVERRIDE] === */
/* Q&A 3줄을 '통으로' 한 덩어리처럼만 움직이도록 고정 (마스크/클립/줄별 애니 모두 OFF) */
#heroProbeCaptionFlow .probe-qa {
  /* 어떤 마스크/클립/개별 애니가 있어도 전부 무력화 */
  -webkit-mask: none !important;
          mask: none !important;
  clip-path: none !important;

  /* 블록 전체만 슬라이드+페이드(+깊이) */
  opacity: 0;
  transform: translateY(var(--qa-block-startY, 26px)) translateZ(var(--qa-fade-translateZ, -100px)) scale(.985);
  filter: blur(var(--qa-fade-blur, 6px));
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}
#heroProbeCaptionFlow .probe-qa.qa-reveal {
  animation: qaBlockIn var(--qa-block-duration, 900ms) var(--qa-fade-ease, cubic-bezier(.22,1,.36,1)) forwards;
}

@keyframes qaBlockIn {
  0%   { opacity: 0; transform: translateY(var(--qa-block-startY, 26px)) translateZ(var(--qa-fade-translateZ, -100px)) scale(.985); filter: blur(var(--qa-fade-blur, 6px)); }
  100% { opacity: 1; transform: translateY(0) translateZ(0) scale(1);                                     filter: blur(0); }
}

/* 개별 줄은 '정지' 상태로 고정 */
#heroProbeCaptionFlow .probe-qa .qa-line {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}


/* === [QA BLOCK VARS bottom→top] === */
:root{
  /* 아래에서 위로: startY를 '양수'로 설정 (ex: 36px) */
  --qa-block-startY: 36px;      /* 더 많이 아래에서 시작하려면 수치 ↑ */
  --qa-block-duration: 1200ms;  /* 더 스무스하게 (느리게) */
  --qa-fade-translateZ: -120px; /* 깊이감 조금 더 */
  --qa-fade-blur: 8px;          /* 시작 블러 */
}