/* ==========================================================================
   ChAI 통합 안내 모바일 화면 전용 스타일
   Figma : 쏙케어_Final / node 1192-817
   탭1 슬라이드1(5대 건강지표)만 애니메이션 SVG(mobile/tab1_slide1.svg, 내부에 6초 루프
   타임라인 자체 내장) + <img> 로 연결. 나머지 슬라이드(탭1 2·3, 탭2 1·2)는 전부
   mobile/*.mp4 영상을 <video>(.cgVisual)로 재생.
   ========================================================================== */

/* Pretendard (이 화면 전용 · content 영역에서 강제 적용) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");


/* --------------------------------------------------------------------------
   레이아웃 (이 화면 전용 · layout.css / content.css 미의존)
   구조 : header + .cgContent( .cgTab + .chaiGuide(슬라이드) + .cgBtnWrap(CTA) )
   - .cgContent : 좌우 패딩 없음. 상단 패딩은 고정 헤더 높이만큼만
   - 좌우 여백은 .chaiGuide(슬라이드)와 .cgBtnWrap(CTA 래퍼)이 각각 처리
   -------------------------------------------------------------------------- */
.cgContent {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  /* top : header.fixed .normalBx 실제 높이(96px)만큼. 800px 넘어가도 #wrap 이 이미
     max-width:800으로 고정돼 있어서 헤더 높이는 안 바뀜, 그래도 이 값 그대로 맞음 */
  padding: 96px 0 110px;
  background: #fff;
}
/* layout.css 의 @media(max-width:750px)에서 헤더가 96px → 70px로 줄어드는 것과 맞춰줌 */
@media (max-width: 750px) {
  .cgContent {
    padding-top: 70px;
  }
}

/* 세로로 긴 화면에서 탭 아래 남는 공간만큼 슬라이드를 세로 중앙 정렬
   (safe center : 공간이 모자라면 위쪽 정렬로 안전하게 폴백, 콘텐츠가 CTA에 가려지지 않도록) */
.cgContent .chaiGuide {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}

/* content 영역 폰트 강제 : reset.css 의 font-family 무시 (header 는 .cgContent/.cgpContent 밖이라 미적용)
   모바일(.cgContent)과 PC(.cgpContent) 둘 다 적용 */
.cgContent,
.cgContent *,
.cgpContent,
.cgpContent * {
  font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
               system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif !important;
}

/* reset.css의 HTML5 section display 규칙보다 탭 패널 숨김 상태를 우선한다. */
[data-chai-guide] [data-guide-panel][hidden] {
  display: none !important;
}

/* 슬라이드 영역 : 좌우 패딩은 여기서 */
.chaiGuide {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  background: #fff;
}

/* --------------------------------------------------------------------------
   상단 탭
   -------------------------------------------------------------------------- */
.cgTab {
  position: sticky;
  top: 96px; /* header.fixed .normalBx 실제 높이(96px) 바로 아래에 붙음 */
  z-index: 10;
  display: flex;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border-bottom: 2px solid #E5E5EC;
}
@media (max-width: 750px) {
  .cgTab {
    top: 70px;
  }
}
.cgTab button {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 10px;
  margin-bottom: -2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #ADAFBC;
  white-space: nowrap;
}
.cgTab button.on {
  color: #7064E7;
  border-bottom-color: #7064E7;
}

/* --------------------------------------------------------------------------
   가이드 스와이퍼 (프로젝트 공통 Swiper 3.x)
   -------------------------------------------------------------------------- */
.cgSwiper {
  margin-top: 32px;
  overflow: hidden;
}
.cgSlide {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 슬라이드 2, 3 정적 비주얼 : 상한 없이 .chaiGuide 폭에 100% 비례 (캡을 따로 두면
   컨테이너(800)와 이미지(350)가 따로 놀아 화면이 넓어질수록 이미지만 작아 보이는 문제 발생.
   원본 700x700이라 컨테이너 최대치(~760px)까지 확대돼도 화질 문제 없음) */
.cgVisual {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
}
.cgVisual img {
  display: block;
  width: 100%;
  height: 100%;
}

.cgTextBx {
  margin-top: 32px;
  text-align: center;
}
.cgTitle {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #25252C;
}
.cgTitle .cgBrSm {
  display: none;
}
.cgDesc {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #76767C;
}

/* 페이지 인디케이터 (swiper-pagination 커스텀) */
.cgDots {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.cgDots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  background: #D9D9D9;
  opacity: 1;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.cgDots .swiper-pagination-bullet-active {
  width: 32px;
  border-radius: 12px;
  background: #7064E7;
}

/* 하단 CTA : 화면 하단 고정 (chaiGuide 밖, cgContent 직속) */
.cgBtnWrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  max-width: 800px;
  margin: 0 auto;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background: #fff;
}
.cgBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 0;
  border-radius: 12px;
  background: #7064E7;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #fff;
}

/* --------------------------------------------------------------------------
   애니메이션 스테이지 : 5대 건강지표 애니메이션 (단일 SVG, images/chai-guide/mobile/tab1_slide1.svg)
   상한 없이 .chaiGuide 폭에 100% 비례 (.cgVisual과 동일한 이유 — 벡터라 확대돼도 무손실)
   -------------------------------------------------------------------------- */
.cgStage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
}
.cgStage img,
.cgStage svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 탭1 슬라이드2·3, 탭2 슬라이드1·2 : 전부 mp4 영상이라 .cgVisual 하나로 통일
   (예전엔 탭2가 절대좌표 아이콘 수십 개 + JS 스케일링으로 구성됐었음) */
.cgVisual video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 영상 캐시(chai-guide.js createVideoCache) 동작 시에만 적용 :
   첫 프레임(또는 poster) 준비 전에는 iOS 회색 재생 화면이 보이지 않도록 숨김 */
.cgVideoGuard .cgVisual video {
  opacity: 0;
  transition: opacity .15s ease-out;
}
.cgVideoGuard .cgVisual video.is-ready {
  opacity: 1;
}
/* 기본 재생 버튼 오버레이 숨김. 미지원 pseudo-element가 섞이면 규칙 전체가 무시되므로
   선택자를 묶지 않고 엔진별로 분리 */
/* iOS Safari */
.cgVisual video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.cgVisual video::-webkit-media-controls {
  display: none !important;
}
/* Android Chrome / Samsung Internet (Chromium) : 가운데 회색 재생 버튼과 그 영역 */
.cgVisual video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}
.cgVisual video::-webkit-media-controls-overlay-enclosure {
  display: none !important;
}
.cgVisual video::-webkit-media-controls-panel {
  display: none !important;
}

/* ==========================================================================
   PC 가이드 : AI 검진 결과 분석
   모바일(chai-guide.html)과 완전히 분리된 전용 클래스 (.cgpContent/.cgpTab/.cgpGuide/.cgpBtn)
   - 예전엔 .chaiGuide/.cgTab/.cgBtn을 모바일과 그대로 같이 썼는데, 한쪽만 고쳐도
     다른 쪽에 영향 가는 걸 막기 위해 이 파일 안에서 이름부터 분리함
   - 구조 : header + .cgpContent( .cgpTab + .cgpGuide(패널들) )
     subDx/layInBx(layout.css, 사이트 공통) 의존을 걷어내고 모바일 .cgContent와
     같은 방식으로 자체 컨테이너를 둠. layInBx의 margin:0 38px 만큼 탭이 헤더보다
     좁게 보이던 문제도 같이 해결됨 (#wrap이 이미 max-width:800으로 잡아주므로
     .cgpTab/.cgpGuide는 그 안에서 꽉 채우기만 하면 헤더와 동일한 폭이 됨)
   ========================================================================== */
.cgpContent {
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* top : header.fixed .normalBx 높이(96px)만큼 띄워서 탭이 헤더 밑에 가려 클릭 안 되는 것 방지
     bottom : 하단 고정 CTA(.cgpBtnWrap)에 콘텐츠 끝부분이 가려지지 않도록 여유 확보 */
  padding: 96px 0 110px;
  background: #fff;
}
/* layout.css 의 @media(max-width:750px)에서 헤더가 96px → 70px로 줄어드는 것과 맞춰줌.
   안 맞추면 이 구간에서 탭 위에 26px짜리 빈 틈이 생김 */
@media (max-width: 750px) {
  .cgpContent {
    padding-top: 70px;
  }
}

.cgpGuide {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
}

.cgpTab {
  position: sticky;
  top: 96px; /* header.fixed .normalBx 높이(96px) 바로 아래에 붙음 */
  z-index: 10;
  display: flex;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border-bottom: 2px solid #E5E5EC;
}
@media (max-width: 750px) {
  .cgpTab {
    top: 70px;
  }
}
.cgpTab button {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 10px;
  margin-bottom: -2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #ADAFBC;
  white-space: nowrap;
  height: 52px;
}
.cgpTab button.on {
  color: #7064E7;
  border-bottom-color: #7064E7;
}

.cgpBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 0;
  border-radius: 12px;
  background: #7064E7;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #fff;
  transition: 0.3s;
  height: 52px
}

a.cgpBtn:hover{
  background-color: #5047A4;
  color: #fff;
}

/* --------------------------------------------------------------------------
   PC 가이드 탭1 : AI 검진 결과 분석
   Figma : 쏙케어_Final / node 1192-773
   스와이퍼 대신 카드 3개 세로 스택 + 상단 그라디언트 워시
   -------------------------------------------------------------------------- */
.cgpPanel {
  position: relative;
  width: 100%;
}
.cgpPanel:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 472px;
  pointer-events: none;
  background: linear-gradient(140deg, rgba(112,100,231,0.2) 0%, rgba(112,100,231,0) 35%),
             linear-gradient(220deg, rgba(89,170,226,0.2) 0%, rgba(89,170,226,0) 35%);
}
.cgpInner {
  position: relative;
  padding: 80px 20px 24px;
}

.cgpIntro {
  text-align: center;
}
.cgpEyebrow {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #7064E7;
}
.cgpTitle {
  margin-top: 8px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #25252C;
}

/* 모바일 카피와 동일한 문장의 줄바꿈 지점 : 평소엔 숨겨두고, 반응형으로 좁아질 때만 모바일과
   같은 자리에서 끊어지도록 표시 (아래 반응형 세부 조정 섹션에서 display:block) */
.cgpBrSm {
  display: none;
}

.cgpCards {
  margin-top: 60px;
}
.cgpCard {
  padding: 24px;
  border-radius: 24px;
  background: #F7F7FB;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.04);
}
.cgpCard + .cgpCard {
  margin-top: 24px;
}
.cgpVisual {
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 10 / 7;
}
.cgpVisual img,
.cgpVisual video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cgpCardTx {
  margin-top: 24px;
}
.cgpCardTitle {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #25252C;
}
.cgpCardDesc {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #76767C;
}

.cgpOutro {
  margin-top: 60px;
  text-align: center;
}
.cgpOutroTitle {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #25252C;
}
.cgpOutroDesc {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #50505C;
}

/* 하단 CTA : 화면 하단 고정, 탭 상관없이 항상 노출 (.cgpGuide 밖, .cgpContent 직속) */
.cgpBtnWrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  max-width: 800px;
  margin: 0 auto;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background: #fff;
}

/* --------------------------------------------------------------------------
   PC 가이드 탭2 : AI 추천 맞춤 검진 (Figma node 1192-774)
   구조는 탭1과 동일, 그라디언트 워시만 블루/핑크
   -------------------------------------------------------------------------- */
.cgpRecommend:before {
  background: linear-gradient(140deg, rgba(89,170,226,0.2) 0%, rgba(89,170,226,0) 35%),
             linear-gradient(220deg, rgba(228,97,130,0.2) 0%, rgba(228,97,130,0) 35%);
}

/* --------------------------------------------------------------------------
   반응형 세부 조정
   -------------------------------------------------------------------------- */

@media (max-width: 350px) {
  .cgTitle .cgBrSm {
    display: block;
  }
}

/* PC 가이드가 반응형으로 모바일 폭까지 좁아질 때 : 폰트 크기·줄바꿈을 모바일(chai-guide.html)
   값에 맞춤. 카드 제목(.cgpCardTitle 20px)·설명(.cgpCardDesc 16px)은 이미 모바일과 동일해서
   그대로 두고, 모바일보다 큰 값만 따로 줄임 */
@media (max-width: 750px) {
  .cgpEyebrow {
    font-size: 14px;
  }
  .cgpTitle {
    font-size: 24px;
  }
  .cgpCards {
    margin-top: 48px;
  }
  .cgpTab button {
    font-size: 16px;
  }
  .cgpBrSm {
    display: block;
  }
  .cgpCardTitle{
    font-size: 20px;
  }
  .cgpOutroTitle{
    font-size: 20px;
  }

  .cgpTab button{
    height: 48px;
  }
}