/* ==========================================================================
   인포디오 상품 상세 페이지 - 전용 스타일시트
   상품별 섹션 레이아웃, 기능 카드, 사이드 인디케이터 등
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 상품 페이지 공통 - 섹션 헤더 (왼쪽 정렬 버전)
   -------------------------------------------------------------------------- */

/* 섹션 라벨 (영문 상품명) */
.pd-section-header__label {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: -0.8px;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* 섹션 제목 */
.pd-section-header__title {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-text-black);
  letter-spacing: -1.6px;
  line-height: 1.4;
  margin-bottom: 15px;
}

/* 섹션 설명 */
.pd-section-header__desc {
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: -0.4px;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* --------------------------------------------------------------------------
   2. 좌우 분할 레이아웃 (텍스트 + 이미지)
   - pd-split--left-text: 좌측 텍스트, 우측 이미지
   - pd-split--right-text: 좌측 이미지, 우측 텍스트
   -------------------------------------------------------------------------- */
.pd-split {
  display: flex;
  align-items: center;
  gap: 60px;
  position: relative;
}

/* 텍스트 영역 - 최대 너비 제한 */
.pd-split__text {
  max-width: 530px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* 이미지 영역 - 나머지 공간 차지 */
.pd-split__image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.pd-split__image img {
  max-width: 100%;
  height: auto;
}

/* 우측 이미지: 우측 정렬 */
.pd-split__image--right {
  justify-content: flex-end;
}

/* 좌측 이미지: 좌측 정렬 */
.pd-split__image--left {
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   3. 기능 카드 2x2 그리드
   - 각 상품 섹션에서 반복 사용
   - 아이콘 + 제목 + 설명 구조
   -------------------------------------------------------------------------- */
.pd-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 40px;
}

/* 개별 기능 카드 */
.pd-feature-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 200px;
}

/* 아이콘: 36x36, 오렌지 색상 (SVG stroke로 적용) */
.pd-feature-card svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin-bottom: 4px;
}

/* 기능 제목 */
.pd-feature-card strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-black);
  line-height: 1.4;
  letter-spacing: -0.4px;
}

/* 기능 설명 */
.pd-feature-card span {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.43;
  letter-spacing: -0.28px;
}

/* --------------------------------------------------------------------------
   4. 섹션 1: AI 오디오 가이드 (중앙 레이아웃 특수 처리)
   -------------------------------------------------------------------------- */
.pd-audio {
  background: var(--color-bg-white);
  padding: 150px 0 100px;
  padding-top: calc(var(--header-height) + 100px); /* 헤더 높이 + 여백 */
}

/* 섹션 헤더: 중앙 정렬 (이 섹션만 특별) */
.pd-audio .pd-section-header {
  text-align: center;
}

.pd-audio .pd-section-header__desc {
  margin-bottom: 60px;
}

/* 카드 그리드 래퍼: 데스크탑에서는 투명 */
.pd-audio__cards-grid {
  display: contents;
}

/* 중앙 비주얼 영역: 목업 + 글라스모피즘 플로팅 카드 */
.pd-audio__visual {
  position: relative;
  max-width: 978px;          /* Figma 기준 비주얼 영역 너비 */
  margin: 0 auto;
  min-height: 700px;
}

/* 메인 목업 이미지 (두 대의 폰) - 살짝 내린 위치에서 상하 부유 */
.pd-audio__mockup {
  display: block;
  max-width: 782px;          /* Figma 원본 너비 */
  width: 80%;
  height: auto;
  margin: 40px auto 0;       /* 상단 40px 내림 */
  position: relative;
  z-index: 1;
  animation: mockupFloat 3s ease-in-out infinite; /* 상하 부유 애니메이션 */
}

/* 목업 상하 부유 애니메이션 */
@keyframes mockupFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ---- 글라스모피즘 플로팅 카드 공통 ---- */
.pd-audio__card {
  position: absolute;
  z-index: 2;
  width: 260px;               /* 232 → 260: 16px 텍스트에 맞춰 확장 */
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;

  /* 글라스모피즘 효과 — blur 줄임 */
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 30px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.4);

  /* 등장 애니메이션 */
  opacity: 0;
  transform: translateY(10px);
  animation: floatCardIn 0.6s ease-out forwards;
}

/* 카드 제목 */
.pd-audio__card strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-black);
  line-height: 1.43;
}

/* 카드 설명 */
.pd-audio__card p {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-black);
  line-height: 1.43;
  margin: 0;
}

/* ---- 카드 위치 (Figma 좌표 기반, 비주얼 978px 기준) ---- */
/* 좌상단: GPS/비콘 */
.pd-audio__card--lt {
  left: 0;
  top: 22%;
  animation-delay: 0.2s;
}
/* 우상단: 다국어 */
.pd-audio__card--rt {
  right: 0;
  top: 22%;
  animation-delay: 0.3s;
}
/* 좌하단: CMS (ml=87, mt=294 offset) */
.pd-audio__card--lb {
  left: 9%;
  top: calc(35% + 180px);
  animation-delay: 0.4s;
}
/* 우하단: 오프라인 (ml=678, mt=294 offset) */
.pd-audio__card--rb {
  right: 6%;
  top: calc(35% + 180px);
  animation-delay: 0.5s;
}

/* 플로팅 카드 등장 애니메이션 */
@keyframes floatCardIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   5. 섹션 2: AI 비디오 가이드 (회색 배경)
   -------------------------------------------------------------------------- */
.pd-video {
  background: var(--color-bg-gray);
  padding: 150px 0;
  overflow: hidden;
  position: relative;
  min-height: 910px;          /* Figma 섹션 높이 */
}

/* 비디오 섹션 이미지 — 우측으로 넘치게 크게 배치 */
.pd-video .pd-split__image {
  position: absolute;
  right: -280px;
  top: -20%;
  width: 77.5%;
  flex: none;
}

.pd-video .pd-split__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   6. 섹션 3: AI 챗봇 (흰색 배경)
   -------------------------------------------------------------------------- */
.pd-chatbot {
  background: var(--color-bg-white);
  padding: 150px 0;
  overflow: hidden;
  position: relative;
  min-height: 832px;
}

/* 챗봇 이미지 — 섹션 좌측 하단에 배치 */
.pd-chatbot .pd-split__image {
  position: absolute;
  left: 0;
  bottom: -150px;
  width: 64%;
  flex: none;
}

.pd-chatbot .pd-split__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 텍스트를 우측으로 밀어서 이미지와 겹치지 않게 */
.pd-chatbot .pd-split__text {
  margin-left: auto;          /* 우측 정렬 */
}

/* --------------------------------------------------------------------------
   7. 섹션 4: 디지털 투어맵 (배경 패턴 이미지)
   -------------------------------------------------------------------------- */
.pd-tourmap {
  background: var(--color-bg-white);
  padding: 150px 0;
  position: relative;
  overflow: hidden;
  min-height: 910px;
}

/* 배경 패턴 이미지 (투명도 20%) */
.pd-tourmap__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.2;
  pointer-events: none;
}

.pd-tourmap__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 내부 콘텐츠를 배경 위로 올림 */
.pd-tourmap .inner {
  position: relative;
  z-index: 1;
}

/* 투어맵 이미지 — 비디오와 동일 구조, 우측 하단 배치 */
.pd-tourmap .pd-split__image {
  position: absolute;
  right: -280px;
  top: -20%;
  width: 69%;
  flex: none;
}

.pd-tourmap .pd-split__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   8. 섹션 5: 스탬프 투어 (흰색 배경)
   -------------------------------------------------------------------------- */
.pd-stamp {
  background: var(--color-bg-white);
  padding: 150px 0;
  overflow: hidden;
  position: relative;
  min-height: 910px;
}

/* 스탬프 이미지 — 섹션 좌측 하단에 배치 (챗봇과 동일 구조) */
.pd-stamp .pd-split__image {
  position: absolute;
  left: 0;
  bottom: -150px;
  width: 64%;
  flex: none;
}

.pd-stamp .pd-split__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 텍스트를 우측으로 밀기 */
.pd-stamp .pd-split__text {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   9. 섹션 6: 설문조사 & 리포트 (회색 배경)
   -------------------------------------------------------------------------- */
.pd-survey {
  background: var(--color-bg-gray);
  padding: 150px 0;
  overflow: hidden;
  position: relative;
  min-height: 910px;
}

/* 설문 이미지 — 비디오/투어맵과 동일 구조, 우측 배치 */
.pd-survey .pd-split__image {
  position: absolute;
  right: -200px;
  bottom: -30%;
  width: 69%;
  flex: none;
}

.pd-survey .pd-split__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   10. 사이드 인디케이터 (우측 고정 네비게이션)
   - 기본 상태: 아이콘만 표시 (좁은 바)
   - 호버 상태: 텍스트 레이블과 함께 확장
   - 현재 섹션: 활성 하이라이트
   -------------------------------------------------------------------------- */
/* Figma 접힘: 70×300, rounded-100px, py-30px, gap-30px, items-center
   Figma 펼침: 181×300, rounded-20px, p-30px, gap-30px, items-start */
.side-indicator {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;

  display: flex;
  flex-direction: column;
  align-items: center;        /* 접힘: 아이콘 중앙 정렬 */
  justify-content: center;
  gap: 30px;                  /* Figma: gap 30px */
  padding: 30px 0;            /* Figma 접힘: py-30px */
  background: rgba(255, 255, 255, 0.5); /* Figma: 반투명 */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 100px;       /* Figma 접힘: pill 형태 */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Figma 그림자 */

  width: 70px;                /* Figma 접힘 너비 */
  overflow: hidden;
  /* border-radius를 따로 빠르게 전환하여 끊김 방지 */
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.15s ease,
              background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 호버 시 펼침 */
.side-indicator:hover {
  width: 181px;               /* Figma 펼침 너비 */
  border-radius: 20px;        /* Figma 펼침: 둥근 사각 */
  padding: 30px;              /* Figma 펼침: 전방향 30px */
  align-items: flex-start;    /* 펼침: 좌측 정렬 */
  background: rgba(255, 255, 255, 0.7); /* 펼침 시 불투명도 70% */
}

/* 개별 아이템 */
.side-indicator__item {
  display: flex;
  align-items: center;
  gap: 0;                     /* 접힘 시 gap 제거 → 우측 여백 방지 */
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
  padding: 0;
  transition: opacity 0.2s ease,
              gap 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 펼침 시에만 gap 활성화 */
.side-indicator:hover .side-indicator__item {
  gap: 10px;                  /* Figma: icon-text 간격 10px */
}

/* 펼침 상태에서 개별 아이템 호버 시 강조 */
.side-indicator:hover .side-indicator__item:hover svg {
  opacity: 1;
}

.side-indicator:hover .side-indicator__item:hover span {
  opacity: 1 !important;
}

/* 아이콘 (Figma: 24×24) */
.side-indicator__item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  opacity: 0.35;              /* 비활성 아이콘 연하게 */
  transition: opacity 0.3s ease;
}

/* 텍스트 레이블 */
.side-indicator__item span {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);  /* Figma: #f47e20 */
  letter-spacing: -0.56px;      /* Figma: -0.56px */
  opacity: 0;
  max-width: 0;                 /* 접힘 시 텍스트 공간 제거 */
  overflow: hidden;
  transition: opacity 0.2s ease 0.15s,
              max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 호버 시 텍스트 표시 */
.side-indicator:hover .side-indicator__item span {
  opacity: 1;
  max-width: 120px;             /* 텍스트가 차지할 충분한 너비 */
}

/* 활성 상태 (현재 스크롤 위치의 섹션) */
.side-indicator__item.is-active svg {
  opacity: 1;                   /* 활성 아이콘 진하게 */
  stroke: var(--color-primary);
  stroke-width: 2.5;
}

.side-indicator__item.is-active span {
  font-weight: 700;
  opacity: 1 !important;        /* 펼침 시 활성 텍스트 진하게 */
}

/* 비활성 텍스트도 연하게 */
.side-indicator:hover .side-indicator__item span {
  opacity: 0.4;
}

.side-indicator:hover .side-indicator__item.is-active span {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   11. 반응형 - 태블릿 (1024px 이하)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* 섹션 제목 축소 */
  .pd-section-header__title {
    font-size: 32px;
  }

  .pd-section-header__desc {
    font-size: 16px;
  }

  /* 좌우 분할 레이아웃 → 세로 배치 */
  .pd-split {
    flex-direction: column;
    gap: 40px;
  }

  /* 우측 텍스트 레이아웃: 이미지가 위, 텍스트가 아래 */
  .pd-split--right-text {
    flex-direction: column-reverse;
  }

  /* 텍스트 영역 너비 제한 해제 */
  .pd-split__text {
    max-width: 100%;
  }

  /* 이미지 중앙 정렬 */
  .pd-split__image {
    justify-content: center;
  }

  .pd-split__image img {
    max-height: 500px;
  }

  /* 기능 카드 그리드 간격 축소 */
  .pd-features {
    column-gap: 50px;
    row-gap: 30px;
  }

  /* 오디오 가이드 섹션 패딩 축소 */
  .pd-audio {
    padding: calc(var(--header-height) + 60px) 0 80px;
  }

  .pd-audio__visual {
    min-height: 400px;
  }

  .pd-audio__mockup {
    max-width: 450px;
  }

  /* 플로팅 카드 크기/위치 조정 */
  .pd-audio__card {
    width: 220px;
    height: auto;              /* 텍스트에 맞게 자동 높이 */
    padding: 16px 18px;
    font-size: 14px;
  }

  /* 모든 섹션 패딩 축소 */
  .pd-video,
  .pd-chatbot,
  .pd-tourmap,
  .pd-stamp,
  .pd-survey {
    padding: 100px 0;
  }

  /* 사이드 인디케이터 숨김 (태블릿 이하) */
  .side-indicator {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12. 반응형 - 모바일 (768px 이하)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 섹션 헤더 모바일 */
  .pd-section-header__title {
    font-size: 26px;
  }

  .pd-section-header__desc {
    font-size: 14px;
  }

  .pd-section-header__label {
    font-size: 16px;
  }

  /* 오디오 가이드 모바일 */
  .pd-audio {
    padding: calc(var(--header-height) + 40px) 0 60px;
  }

  .pd-audio .pd-section-header__desc {
    margin-bottom: 30px;
  }

  .pd-audio__visual {
    min-height: 300px;
  }

  .pd-audio__mockup {
    max-width: 280px;
  }

  /* 플로팅 카드: 모바일에서 목업 아래 2x2 그리드 */
  .pd-audio__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .pd-audio__cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 360px;
  }

  .pd-audio__card {
    position: static;
    width: 100%;
    height: auto;
    padding: 16px 14px;
    transform: none;
    opacity: 1;
    animation: none;
    text-align: center;
    align-items: center;
    gap: 6px;
  }

  .pd-audio__card strong {
    font-size: 14px;
    line-height: 1.3;
  }

  .pd-audio__card p {
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-muted);
  }

  .pd-audio__card strong br,
  .pd-audio__card p br {
    display: none;
  }

  .pd-audio__card strong,
  .pd-audio__card p {
    word-spacing: 0.15em;
  }

  /* 지그재그 → 중앙정렬 통일 */
  .pd-split {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .pd-split--right-text {
    flex-direction: column;
  }

  .pd-split__text {
    margin-left: 0 !important;
    align-items: center;
  }

  .pd-section-header__title,
  .pd-section-header__desc,
  .pd-section-header__label {
    text-align: center;
  }

  /* 비디오~설문: 목업 이미지 숨김 */
  .pd-video .pd-split__image,
  .pd-chatbot .pd-split__image,
  .pd-tourmap .pd-split__image,
  .pd-stamp .pd-split__image,
  .pd-survey .pd-split__image {
    display: none;
  }

  /* 기능 카드 그리드: 1열로 변경 */
  .pd-features {
    grid-template-columns: 1fr;
    row-gap: 16px;
    width: 100%;
  }

  .pd-feature-card {
    max-width: 100%;
    text-align: center;
    align-items: center;
  }

  /* 모든 섹션 패딩 축소 */
  .pd-video,
  .pd-chatbot,
  .pd-tourmap,
  .pd-stamp,
  .pd-survey {
    padding: 60px 0;
  }
}

/* --------------------------------------------------------------------------
   13. 반응형 - 작은 모바일 (480px 이하)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .pd-section-header__title {
    font-size: 22px;
  }

  .pd-audio__mockup {
    max-width: 220px;
  }

  .pd-feature-card strong {
    font-size: 16px;
  }

  .pd-feature-card span {
    font-size: 13px;
  }

}

/* --------------------------------------------------------------------------
   14. 접근성: 모션 감소 선호 설정 존중
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pd-audio__card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .side-indicator {
    transition: none;
  }

  .side-indicator__item span {
    transition: none;
  }
}