/* =========================================================
   biontech index — 이미지 시안 + 대화형 상담(qna) + 실시간 신청 현황
   대화형 상담 · 롤링은 jmjmedical/page/landing12 구현을 블루 톤으로 옮겼다.
   코드 섹션(04~06 혜택, 09 비교표, 10 4가지 물, 13·14)은 1000px 시안 좌표를 cqw/%로 옮겨 폭에 맞춰 함께 줄어든다.
   ========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* 앵커(#qna) 이동을 부드럽게 */
  scroll-behavior: smooth;
}

body {
  font-family:
    'Pretendard',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #000;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

.hero-video {
  display: block;
  width: 100%;
  height: auto;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  background: #fff;
  /* 코드 섹션 글자 크기를 컨테이너 폭 기준(cqw)으로 맞춘다 */
  container-type: inline-size;
  overflow: hidden;
}

/* =========================================================
   04~06 구매·렌탈 혜택 — 1000px 시안 좌표를 cqw(10px = 1cqw)로 옮겨 쌓는다
   밝은 파랑에서 남색으로 서서히 전환하고, 마지막 색은 07 상단과 맞춘다.
   ========================================================= */
.benefit {
  background: linear-gradient(
    180deg,
    #44a8fd 0%,
    #3a9ff9 10%,
    #2b8cea 30%,
    #2482e2 41%,
    #1d79dc 51%,
    #166fd5 60%,
    #1264c4 66%,
    #0e56ae 72%,
    #0a4794 78%,
    #073b80 84%,
    #043674 91%,
    #033572 97%,
    #033572 100%
  );
}

/* 07 공통 혜택 — 원본 이미지 비율을 유지한 채 배경 위에 배치 */
.sec07 {
  position: relative;
  background: #033572;
}

/* 앞 영역의 마지막 색에서 07 배경으로 부드럽게 연결 */
.sec07::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 24cqw;
  background: linear-gradient(
    180deg,
    #033572 0%,
    rgba(3, 53, 114, 0.95) 15%,
    rgba(3, 53, 114, 0.7) 40%,
    rgba(3, 53, 114, 0.3) 70%,
    rgba(3, 53, 114, 0) 100%
  );
  pointer-events: none;
}

.sec07-title,
.sec07-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.sec07-title {
  top: 7cqw;
  width: 72.1%;
}

.sec07-card {
  top: 28cqw;
  width: 91.7%;
}

.bnf-title {
  width: 79.5cqw;
}

.bnf-title--04 {
  margin-left: 13cqw;
}

.bnf-title--05 {
  margin: 7.4cqw 0 0 12.3cqw;
}

.bnf-title--06 {
  width: 82.7cqw;
  margin: 2.7cqw 0 0 11.7cqw;
}

/* 카드 PNG는 그림자 여백(좌 13·상 9·우 14·하 18px)을 포함한 원본 크기 그대로 둔다 */
.benefit-list {
  width: 91.8cqw;
  margin-left: 4.4cqw;
}

.bnf-title--04 + .benefit-list {
  margin-top: 0.7cqw;
}

.bnf-choice {
  width: fit-content;
  margin: 1cqw auto 2cqw;
  padding: 0.6cqw 3.2cqw;
  border-radius: 1.6cqw;
  background: #fff;
  color: #0f66cd;
  font-size: 4cqw;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.bnf-choice + .benefit-list {
  margin-top: 0.3cqw;
}

.bnf-grid {
  display: flex;
  margin-left: 4.5cqw;
}

.bnf-grid--2 {
  margin-top: 0.3cqw;
}

.bnf-grid--2 li {
  flex: 0 0 45.9cqw;
}

.bnf-grid--2 li + li {
  margin-left: -0.1cqw;
}

.bnf-grid--3 {
  margin-top: -0.4cqw;
}

.bnf-grid--3 li {
  flex: 0 0 30.8cqw;
  --r: 2cqw;
}

.bnf-grid--3 li + li {
  margin-left: -0.35cqw;
}

.bnf-plus {
  margin: -0.1cqw 0 0 4.5cqw;
  --r: 3.6cqw;
}

.bnf-plus li + li {
  margin-top: 0.5cqw;
}

.bnf-card {
  position: relative;
  display: block;
  transition: transform 0.2s ease;
}

.bnf-card:hover {
  transform: translateY(-3px);
}

/* 등장 직후 한 번: 테두리 빛 + 하이라이트가 카드 위를 훑고 지나간다 (그림자 여백 안쪽 실제 카드 영역만) */
.bnf-card::before,
.bnf-card::after {
  content: '';
  position: absolute;
  inset: 0.9cqw 1.4cqw 1.8cqw 1.3cqw;
  border-radius: var(--r, 2.8cqw);
  pointer-events: none;
  opacity: 0;
}

.bnf-card::before {
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 62%) no-repeat 100% 0 / 300% 100%;
}

.bnf-card::after {
  border: max(2px, 0.45cqw) solid #8fdcff;
  box-shadow:
    inset 0 0 2.4cqw rgba(120, 210, 255, 0.85),
    0 0 2cqw rgba(120, 210, 255, 0.9);
}

.benefit-list .reveal.is-in .bnf-card::after {
  animation: benefitBorder 1.6s ease-out 0.9s 1 both;
}

.benefit-list .reveal.is-in .bnf-card::before {
  animation: benefitShine 1.1s ease-in-out 1s 1 both;
}

/* 카드 등장 */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* 왼쪽/오른쪽/아래에서 밀려 들어온다.
   카드가 화면 중간쯤 올라오면 등장하고, JS 대기열이 최소 0.6초 간격으로 하나씩 내보낸다. */
.benefit-list .reveal {
  transition:
    opacity 1s ease,
    transform 1.2s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.benefit-list .from-l {
  transform: translateX(-60%);
}

.benefit-list .from-r {
  transform: translateX(60%);
}

.benefit-list .from-b {
  transform: translateY(40%);
}

.benefit-list .reveal.is-in {
  transform: none;
}

@keyframes benefitBorder {
  0% {
    opacity: 0;
  }
  20%,
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes benefitShine {
  0% {
    opacity: 1;
    background-position: 100% 0;
  }
  100% {
    opacity: 1;
    background-position: 0 0;
  }
}

/* =========================================================
   09 같은 가격, 하나만 선택한다면? — 일반 정수기 vs 바이온텍 비교표
   ========================================================= */
.sec09 {
  padding: 0.8cqw 0 10cqw;
  background: #fff;
  text-align: center;
  letter-spacing: -0.05em;
}

.sec09-q {
  width: 33.5cqw;
  margin: 0 auto;
}

.sec09-title {
  margin-top: 3cqw;
  color: #000;
  font-size: 9.6cqw;
  font-weight: 900;
  line-height: 1.25;
}

.sec09-title em {
  display: block;
  color: #0073df;
  font-style: normal;
}

.cmp {
  display: flex;
  align-items: stretch;
  margin: 5cqw 4.2cqw 0 5.2cqw;
}

.cmp-col {
  border-radius: 2.8cqw;
}

.cmp-col--normal {
  flex: 0 0 43.5cqw;
  margin-right: 1.1cqw;
  background: #f4f5f5;
  color: #1b1a1a;
}

/* 바이온텍 쪽은 조금 넓고 위아래로 살짝 튀어나온다 */
.cmp-col--bion {
  flex: 1 1 auto;
  margin: -0.3cqw 0;
  padding-bottom: 0.3cqw;
  background: #016ed5;
  box-shadow: 0 1.2cqw 3cqw rgba(1, 90, 200, 0.25);
  color: #fff;
}

.cmp-head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22cqw;
  font-size: 5.8cqw;
  font-weight: 800;
  line-height: 1.3;
}

.cmp-col--bion .cmp-head {
  height: 22.3cqw;
  padding-top: 0.6cqw;
}

.cmp-img {
  height: 41.5cqw;
}

.cmp-col--normal .cmp-img img {
  width: 24.2cqw;
  margin: 0 auto;
}

.cmp-col--bion .cmp-img img {
  width: 33.4cqw;
  margin: 0 0 0 8.1cqw;
}

.cmp-rows {
  padding: 0 4cqw 2.4cqw;
}

.cmp-col--bion .cmp-rows {
  padding: 0 3.2cqw 2.4cqw;
}

.cmp-rows li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9.3cqw;
  font-size: 4.2cqw;
  font-weight: 600;
  line-height: 1.25;
}

.cmp-rows li.is-tall {
  height: 13.2cqw;
}

.cmp-rows li + li {
  border-top: 1px solid #c9cbcc;
}

.cmp-col--bion .cmp-rows li {
  font-weight: 700;
}

.cmp-col--bion .cmp-rows li + li {
  border-top-color: rgba(255, 255, 255, 0.55);
}

.cmp-rows em {
  color: #fff09a;
  font-style: normal;
}

/* =========================================================
   10 4가지 물 — 물결 배경(코드) 위 물방울 4개. 1000×1504 시안 좌표를 %로 배치
   ========================================================= */
.sec10 {
  position: relative;
  aspect-ratio: 1000 / 1504;
  background:
    /* 물방울 아래 수면 반사광 */ radial-gradient(ellipse 46% 3.2% at 50% 41.5%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse 52% 3.6% at 50% 64%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse 75% 22% at 50% 52%, rgba(120, 186, 240, 0.55), rgba(120, 186, 240, 0) 70%), linear-gradient(180deg, #fcfdff 0%, #eaf4fe 12%, #d2e8fd 30%, #cae6fc 50%, #a9d2f2 70%, #d9ebfb 80%, #f5f8fd 90%, #fff 100%);
  overflow: hidden;
}

/* 물방울 아래 퍼지는 물결 — 납작한 타원 링을 반복하고 가장자리는 마스크로 흐린다 */
.sec10::before {
  content: '';
  position: absolute;
  top: 30%;
  left: -10%;
  width: 120%;
  height: 40%;
  background: repeating-radial-gradient(ellipse 100% 22% at 50% 62%, rgba(255, 255, 255, 0) 0 2.2cqw, rgba(255, 255, 255, 0.75) 2.9cqw, rgba(90, 160, 230, 0.35) 3.5cqw, rgba(255, 255, 255, 0) 4.3cqw);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 100%);
  opacity: 0.8;
}

.sec10-head {
  position: absolute;
  top: 5.4%;
  left: 0;
  width: 100%;
  text-align: center;
  letter-spacing: -0.04em;
}

.sec10-title {
  color: #0769cf;
  font-size: 7cqw;
  font-weight: 800;
  line-height: 1.2;
}

.sec10-title em {
  color: #007fff;
  font-style: normal;
}

.sec10-sub {
  margin-top: 0.6cqw;
  color: #00144b;
  font-size: 5.4cqw;
  font-weight: 500;
  line-height: 1.3;
}

.water-list li {
  position: absolute;
  animation: waterFloat 3.6s ease-in-out infinite;
}

.water-list li:nth-child(1) {
  top: 19.1%;
  left: 14.1%;
  width: 32.8%;
}

.water-list li:nth-child(2) {
  top: 19.1%;
  left: 51%;
  width: 32.8%;
}

.water-list li:nth-child(3) {
  top: 41.5%;
  left: 12.8%;
  width: 34.7%;
}

.water-list li:nth-child(4) {
  top: 41.3%;
  left: 51.9%;
  width: 34.9%;
}

/* 하단 문구 */
.sec10-foot {
  position: absolute;
  isolation: isolate;
  top: 71.4%;
  left: 0;
  width: 100%;
  color: #061528;
  font-size: 7.2cqw;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.04em;
  text-align: center;
}

.sec10-foot::before {
  content: '';
  position: absolute;
  inset: -4cqw 2cqw;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 35%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0) 75%);
  filter: blur(1cqw);
  pointer-events: none;
}

.sec10-foot strong {
  display: block;
  color: #007eff;
}

.sec10-arrow {
  position: absolute;
  top: 87.4%;
  left: 36%;
  width: 28%;
  animation: arrowBob 1.6s ease-in-out infinite;
}

@keyframes arrowBob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.75;
  }
  50% {
    transform: translateY(1.4cqw);
    opacity: 1;
  }
}

/* 배경 장식 물방울 */
.sec10-drops i {
  position: absolute;
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 14%, rgba(255, 255, 255, 0) 30%), radial-gradient(circle, rgba(170, 215, 250, 0.15) 55%, rgba(80, 160, 230, 0.55) 72%, rgba(255, 255, 255, 0.9) 80%, rgba(255, 255, 255, 0) 84%);
  animation: waterFloat 4.2s ease-in-out infinite;
}

.sec10-drops i:nth-child(1) {
  --s: 3.4cqw;
  top: 21.5%;
  left: 10%;
}

.sec10-drops i:nth-child(2) {
  --s: 7cqw;
  top: 33%;
  left: 1%;
  animation-delay: -1s;
}

.sec10-drops i:nth-child(3) {
  --s: 5cqw;
  top: 51%;
  left: 46.5%;
  animation-delay: -2s;
}

.sec10-drops i:nth-child(4) {
  display: none;
}

.sec10-drops i:nth-child(5) {
  --s: 4.4cqw;
  top: 43%;
  left: 88.5%;
  animation-delay: -1.6s;
}

.sec10-drops i:nth-child(6) {
  --s: 6cqw;
  top: 68.5%;
  left: 91%;
  animation-delay: -2.6s;
}

.sec10-drops i:nth-child(7) {
  --s: 3cqw;
  top: 41%;
  left: 96%;
  animation-delay: -3.1s;
}

.sec10-drops i:nth-child(8) {
  --s: 2.6cqw;
  top: 70.5%;
  left: 5.5%;
  animation-delay: -1.3s;
}

@media (max-width: 600px) {
  .sec10-drops i:nth-child(2),
  .sec10-drops i:nth-child(6) {
    --s: 5cqw;
  }
}

/* 대각선으로 엇갈려 떠오르게 */
.water-list li:nth-child(2),
.water-list li:nth-child(3) {
  animation-delay: -1.8s;
}

.water-list img {
  width: 100%;
  opacity: 0;
  animation: 5s ease-out infinite both;
}

/* 1 → 2 → 3 → 4 순서로 0.35초(7%) 간격 빠르게 등장 → 모두 머문 뒤 동시에 '확' 사라진다
   사라지는 시점을 맞추려고 딜레이 대신 물방울마다 키프레임을 따로 둔다 */
.water-list li:nth-child(1) img {
  animation-name: waterPop1;
}

.water-list li:nth-child(2) img {
  animation-name: waterPop2;
}

.water-list li:nth-child(3) img {
  animation-name: waterPop3;
}

.water-list li:nth-child(4) img {
  animation-name: waterPop4;
}

@keyframes waterFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.2cqw);
  }
}

/* 5초 주기: 등장 0.25초(5%) → 살짝 커졌다 제자리(+4%) → 82%까지 유지 → 82.01%에 즉시 사라짐 */
@keyframes waterPop1 {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  5% {
    opacity: 1;
    transform: scale(1.12);
  }
  9%,
  82% {
    opacity: 1;
    transform: scale(1);
  }
  82.01%,
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes waterPop2 {
  0%,
  7% {
    opacity: 0;
    transform: scale(0.3);
  }
  12% {
    opacity: 1;
    transform: scale(1.12);
  }
  16%,
  82% {
    opacity: 1;
    transform: scale(1);
  }
  82.01%,
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes waterPop3 {
  0%,
  14% {
    opacity: 0;
    transform: scale(0.3);
  }
  19% {
    opacity: 1;
    transform: scale(1.12);
  }
  23%,
  82% {
    opacity: 1;
    transform: scale(1);
  }
  82.01%,
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes waterPop4 {
  0%,
  21% {
    opacity: 0;
    transform: scale(0.3);
  }
  26% {
    opacity: 1;
    transform: scale(1.12);
  }
  30%,
  82% {
    opacity: 1;
    transform: scale(1);
  }
  82.01%,
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

/* =========================================================
   13 압도적 흡수력(GIF) · 14 검증된 기술력(영상) — 908px 폭 둥근 박스
   ========================================================= */
.sec13 {
  padding: 12cqw 0 9.6cqw;
  background: #fff;
}

.sec-title {
  color: #00144b;
  font-size: 8cqw;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.04em;
  text-align: center;
}

.sec-title em {
  color: #007eff;
  font-style: normal;
}

.sec-sub {
  margin-top: 1.4cqw;
  color: #000;
  font-size: 4.6cqw;
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: -0.03em;
  text-align: center;
}

.sec13-media,
.sec14-video {
  width: 90.8%;
  margin: 5.2cqw auto 0;
  border-radius: 2.8cqw;
  overflow: hidden;
  background: #e9edf2;
}

.sec13-media {
  aspect-ratio: 740 / 380;
}

.sec13-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec14-title {
  margin-top: 14.4cqw;
}

.sec14-video {
  aspect-ratio: 908 / 1208;
}

.sec14-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== 개인정보처리방침 팝업 ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 2rem 1.6rem 1.8rem;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s ease;
  -webkit-overflow-scrolling: touch;
}

.modal.show .modal-content {
  transform: none;
}

.modal .close {
  position: absolute;
  top: 0.7rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #999;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.modal-title {
  margin-bottom: 1.2rem;
  padding-right: 1.5rem;
  color: #0b2a6f;
  font-size: 1.3rem;
  font-weight: 800;
}

.modal-body .privacy-row {
  margin-bottom: 1rem;
}

.modal-body .privacy-row strong {
  display: block;
  margin-bottom: 0.25rem;
  color: #0b2a6f;
  font-size: 1.05rem;
  font-weight: 700;
}

.modal-body .privacy-row p {
  color: #4a5568;
  font-size: 1rem;
  line-height: 1.5;
}

.modal-body .privacy-note {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  color: #888;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ============================================================
   실시간 상담 신청 현황 (라이브 위젯) — 카드형 5줄 노출
   ============================================================ */
.live-feed-container {
  --row-h: clamp(46px, 8.6vw, 64px); /* 카드 높이 */
  --row-gap: clamp(7px, 1.4vw, 11px); /* 카드 간격 */
  position: relative;
  padding: clamp(28px, 6vw, 48px) 0 clamp(30px, 6.4vw, 52px);
  background: #eaf4fe; /* 연한 하늘색 */
}

.live-feed-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 14px);
  margin-bottom: clamp(16px, 3.6vw, 26px);
}

/* 깜빡이는 라이브 표시등 — 연한 링 안의 파란 점 */
.live-indicator {
  flex: 0 0 auto;
  width: clamp(10px, 2vw, 14px);
  height: clamp(10px, 2vw, 14px);
  background-color: #1668e3;
  border: 3px solid #d6e6fd;
  border-radius: 50%;
  background-clip: padding-box;
  box-sizing: content-box;
  animation: pulse-live 1.5s infinite;
}

@keyframes pulse-live {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 104, 227, 0.45);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(22, 104, 227, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(22, 104, 227, 0);
  }
}

.live-title-text {
  color: #1d2a44;
  font-size: clamp(20px, 4.8vw, 32px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.live-title-text strong {
  color: #1668e3;
  font-weight: 800;
}

/* 세로 롤링 영역 — 카드 5개(높이+간격) 만큼 노출 */
.rolling-notice-wrap {
  position: relative;
  width: 92%;
  max-width: 760px;
  height: calc((var(--row-h) + var(--row-gap)) * 5 - var(--row-gap));
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 6%, black 94%, transparent);
}

.rolling-notice-track {
  display: flex;
  flex-direction: column;
  animation: rolling-vertical 30s linear infinite;
}

/* 간격을 항목 안쪽 여백으로 두어 목록 2벌의 정확히 절반(-50%)에서 이음매 없이 반복된다 */
.rolling-item {
  flex: 0 0 auto;
  padding-bottom: var(--row-gap);
}

.rolling-card {
  display: grid;
  grid-template-columns: auto 1fr 1.7fr auto;
  align-items: center;
  height: var(--row-h);
  padding: 0 clamp(14px, 3.4vw, 28px);
  border-radius: clamp(8px, 1.6vw, 12px);
  background: #fff;
  box-shadow: 0 1px 3px rgba(40, 110, 210, 0.08); /* 롤링 영역 overflow에 잘리지 않도록 얕게 */
  color: #1d2a44;
  font-size: clamp(14px, 3vw, 20px);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.rolling-card .badge {
  padding: 0.42em 1.1em;
  border-radius: 100px;
  background: #e1ecfd;
  color: #1668e3;
  font-size: 0.8em;
  font-weight: 700;
}

.rolling-card .name {
  font-weight: 600;
  text-align: center;
}

.rolling-card .phone {
  color: #4b5d82;
  text-align: center;
}

.rolling-card .time {
  min-width: 3.6em;
  color: #a0aabb;
  font-size: 0.78em;
  text-align: right;
}

@keyframes rolling-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

/* =========================================================
   대화형 상담 (qna) — 카톡 스타일 Q&A
   ========================================================= */
.qna {
  padding: 32px 16px 38px;
  background: linear-gradient(180deg, #1668e3 0%, #0d4fb8 55%, #0b2a6f 100%);
}

.chat-window {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #9cc3f5;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 38px -12px rgba(5, 20, 60, 0.45);
}

.chat-window-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #0b2a6f, #1668e3);
  color: #fff;
}

/* 상담원 아바타 — 이미지 대신 bion/tech 워드마크 */
.cw-ava,
.chat-ava {
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  text-align: center;
  letter-spacing: -0.02em;
}

.cw-ava {
  width: 40px;
  height: 40px;
  background: #fff;
  color: #0b2a6f;
}

.cw-ava b,
.chat-ava b {
  font-size: 11px;
  font-weight: 800;
}

.cw-ava i,
.chat-ava i {
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  color: #1668e3;
}

.cw-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cw-title strong {
  font-size: 15px;
  font-weight: 700;
}

.cw-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.85);
}

.cw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22e06b;
  animation: pulse-green 1.5s infinite;
}

.chat-window-body {
  background: #eef5fe;
  padding: 20px 14px;
  /* 고정 높이 — 넘치면 창 안에서 스크롤(최신 내용이 보이도록 JS가 하단으로 스크롤) */
  height: clamp(340px, 56vh, 480px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-window-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #d3e3f9;
  font-size: 15px;
  font-weight: 500;
  color: #1668e3;
  text-align: center;
}

.cw-foot-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1668e3;
  animation: pulse-blue 1.5s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 224, 107, 0.6);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 7px rgba(34, 224, 107, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 224, 107, 0);
  }
}

@keyframes pulse-blue {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(22, 104, 227, 0.6);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 7px rgba(22, 104, 227, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(22, 104, 227, 0);
  }
}

.chat-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.chat-row--agent {
  justify-content: flex-start;
}

.chat-row--user {
  justify-content: flex-end;
}

.chat-ava {
  width: 44px;
  height: 44px;
  background: #0b2a6f;
  color: #fff;
}

.chat-ava i {
  color: #8ec0ff;
}

.chat-bubble {
  max-width: 88%;
  padding: 13px 13px;
  border-radius: 16px;
  border-top-left-radius: 5px;
  background: #fff;
  color: #1d2a44;
  font-size: 15px;
  line-height: 1.6;
  box-shadow: 0 1px 2px rgba(20, 30, 60, 0.06);
  word-break: keep-all;
}

.chat-bubble b {
  color: #1668e3;
  font-weight: 700;
}

.chat-bubble--user {
  max-width: 80%;
  background: #1668e3;
  color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 5px;
}

.chat-agree-view {
  margin-left: 4px;
  color: #1668e3;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

/* 질문 말풍선 안 보조 안내 (중복 가능) */
.chat-help {
  color: #6b7a96;
  font-size: 13px;
  font-weight: 600;
}

/* 마지막 단계 법적 처벌 경고 문구 */
.chat-legal {
  display: block;
  margin-top: 10px;
  color: #e5342b;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.55;
}

/* 답변 컨트롤(오른쪽 정렬) */
.chat-ctrl {
  display: flex;
  justify-content: flex-end;
}

/* ===== 중복 선택(문의 내용) ===== */
.chat-multi {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  max-width: 260px;
  margin-left: auto;
}

.chat-multi-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.multi-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #c6daf7;
  border-radius: 11px;
  background: #fff;
  color: #1d2a44;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.multi-btn b {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.multi-check,
.chat-agree-box {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1.5px solid #b5c8e6;
  border-radius: 6px;
  background: #fff;
}

.multi-check::after,
.chat-agree-box::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.multi-btn.is-on {
  border-color: #1668e3;
  background: #eef5fe;
  color: #1668e3;
}

.multi-btn.is-on .multi-check,
.chat-agree-check:checked + .chat-agree-box {
  border-color: #1668e3;
  background: #1668e3;
}

.multi-btn.is-on .multi-check::after,
.chat-agree-check:checked + .chat-agree-box::after {
  opacity: 1;
}

.multi-btn:hover:not(:disabled) {
  border-color: #1668e3;
}

.multi-confirm {
  min-width: 96px;
}

.chat-multi.is-done .multi-btn {
  border-color: #e3e7ee;
  color: #a2a9b6;
  background: #fff;
  cursor: default;
}

.chat-multi.is-done .multi-btn.is-on {
  border-color: #c6daf7;
  color: #6b7a96;
  background: #f3f7fd;
}

.chat-multi.is-done .multi-btn.is-on .multi-check {
  border-color: #b5c8e6;
  background: #b5c8e6;
}

.chat-multi.is-done .multi-confirm {
  display: none;
}

/* ===== 텍스트 입력(성함/연락처) ===== */
.chat-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 12px;
  width: 100%;
  max-width: 340px;
  margin-left: auto; /* 오른쪽 정렬 유지, 모바일에선 폭에 맞춰 축소 */
}

/* 마지막 단계: [개인정보 동의] + [연락처 입력] 한 줄, 좁으면 두 줄 */
.chat-input--agree {
  max-width: 100%;
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  max-width: 340px;
}

.chat-agree {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4b5d82;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.chat-agree-text {
  text-align: right;
}

/* 실제 체크박스는 숨기고 .chat-agree-box로 그린다 */
.chat-agree-check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.chat-agree-check:focus-visible + .chat-agree-box {
  outline: 2px solid #1668e3;
  outline-offset: 2px;
}

.chat-input.is-done .chat-agree {
  color: #a2a9b6;
  cursor: default;
}

/* 연락처 앞 고정 010 */
.chat-prefix {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 13px;
  border: 1.5px solid #c6daf7;
  border-radius: 11px;
  background: #e3eefd;
  color: #0b2a6f;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.chat-input.is-done .chat-prefix {
  color: #98a0af;
  background: #f3f5f8;
}

.chat-field {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  padding: 11px 14px;
  border: 1.5px solid #c6daf7;
  border-radius: 11px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: #1d2a44;
}

.chat-field:focus {
  outline: none;
  border-color: #1668e3;
}

.chat-field:disabled {
  background: #f3f5f8;
  color: #98a0af;
}

.chat-next {
  flex: 0 0 auto;
  padding: 12px 20px;
  border: 0;
  border-radius: 11px;
  background: #1668e3;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition:
    filter 0.15s ease,
    opacity 0.15s ease;
}

.chat-next:hover {
  filter: brightness(1.12);
}

.chat-next:disabled {
  background: #a9bfdf;
  cursor: default;
  filter: none;
}

/* 등장 애니메이션 */
.chat-appear {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.chat-appear.is-in {
  opacity: 1;
  transform: none;
}

/* 상담창 닫기 버튼 — 팝업으로 열렸을 때만 노출 */
.cw-close {
  display: none;
  margin-left: auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.chat-layer .cw-close {
  display: block;
}

/* =========================================================
   상담창 팝업 — 모바일은 아래에서 올라오는 시트, PC는 가운데 팝업
   ========================================================= */
.chat-layer {
  position: fixed;
  inset: 0;
  z-index: 950; /* 개인정보 모달(1000)보다 아래 */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
  transition: visibility 0.3s ease;
}

.chat-layer.is-open {
  visibility: visible;
}

.chat-layer-dim {
  position: absolute;
  inset: 0;
  background: rgba(5, 15, 40, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.chat-layer.is-open .chat-layer-dim {
  opacity: 1;
}

.chat-layer-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.25, 1);
}

.chat-layer.is-open .chat-layer-panel {
  transform: none;
}

.chat-layer .chat-window {
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.chat-layer .chat-window-foot {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 600px) {
  .chat-layer {
    align-items: center;
    padding: 20px;
  }

  .chat-layer-panel {
    transform: translateY(24px);
    opacity: 0;
    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
  }

  .chat-layer.is-open .chat-layer-panel {
    opacity: 1;
  }

  .chat-layer .chat-window {
    border-bottom: 1px solid #9cc3f5;
    border-radius: 18px;
  }
}

/* 팝업이 열려 있는 동안 배경 스크롤·하단 CTA 잠금 */
body.is-chat-open {
  overflow: hidden;
}

body.is-chat-open .floating-cta {
  opacity: 0;
  visibility: hidden;
}

/* landing_v1.js가 참조하는 실제 필드는 화면에서 숨김 */
.lead-hidden {
  display: none;
}

/* ===== 푸터 ===== */
.footer {
  padding: 30px 15px 110px; /* 하단 고정 CTA에 가리지 않도록 여백 */
  background: #0b2a6f;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  word-break: keep-all;
}

/* 항목 단위로 줄바꿈되도록 span을 덩어리로 묶고, 사이에 구분선을 넣는다 */
.footer p span {
  display: inline-block;
}

.footer p span + span::before {
  content: '|';
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.35);
}

.footer a {
  color: inherit;
  text-decoration: none;
}

/* 모바일: 구분선 없이 항목마다 줄바꿈 */
@media (max-width: 600px) {
  .footer p span {
    display: block;
  }

  .footer p span + span::before {
    content: none;
  }
}

/* =========================================================
   하단 중앙 고정 CTA — 스크롤을 따라다니다 상담 영역에서는 숨는다
   ========================================================= */
.floating-cta {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: clamp(17px, 4.6vw, 23px) clamp(22px, 8vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: linear-gradient(180deg, #2f86ff 0%, #0d4fb8 100%);
  box-shadow:
    0 12px 28px rgba(5, 20, 60, 0.35),
    0 0 0 4px rgba(47, 134, 255, 0.2);
  color: #fff;
  font-size: clamp(18px, 5vw, 23px);
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none;
  transform: translateX(-50%);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.floating-cta:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow:
    0 16px 32px rgba(5, 20, 60, 0.4),
    0 0 0 5px rgba(47, 134, 255, 0.3);
}

/* 깜빡이는 상태 표시 */
.floating-cta__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #8ff0ff;
  box-shadow: 0 0 0 0 rgba(143, 240, 255, 0.7);
  animation: ctaPulse 1.8s ease-out infinite;
}

@keyframes ctaPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(143, 240, 255, 0.65);
  }
  70%,
  100% {
    box-shadow: 0 0 0 9px rgba(143, 240, 255, 0);
  }
}

/* 상담 영역이 화면에 들어오면 가린다(입력 방해 방지) */
.floating-cta.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(12px);
}

@media (prefers-reduced-motion: reduce) {
  .water-list li,
  .sec10-drops i,
  .sec10-arrow,
  .benefit-list .reveal.is-in .bnf-card::before,
  .benefit-list .reveal.is-in .bnf-card::after,
  .chat-layer,
  .chat-layer-dim,
  .chat-layer-panel,
  .cw-dot,
  .cw-foot-dot,
  .floating-cta,
  .floating-cta__dot {
    animation: none;
    transition: none;
  }

  .reveal,
  .water-list img {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}