/* --- 1. 전체 프레임 (2:1 비율 유지) --- */
.d3c-wrapper {
  width: 100%; 
  max-width: none; 
  position: relative;
  padding-top: 50%; /* 가로 2 : 세로 1 */
  perspective: 1500px; /* 입체감 원근 거리 */
}

/* --- 2. 콘텐츠 영역 (모든 것을 가리는 마스크 역할) --- */
.d3c-content {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  /* [핵심] 큰 틀 밖으로 나가는 모든 것을 가림 */
  overflow: hidden; 
  border-radius: 40px; 
  transform-style: preserve-3d;
}

/* --- 개별 슬라이드 --- */
.d3c-slide {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out;
  transform-style: preserve-3d;
}

.d3c-slide.d3c-active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

/* --- 3. 레이어 설정 (1:1 비율 및 숨겨진 영역 생성) --- */
.d3c-layer {
  position: absolute;
  /* [핵심] 틀보다 살짝 크게(106%) 만들어서 움직일 때 가려진 부분이 나오게 함 */
  width: 106%; 
  height: 106%; 
  top: -3%; 
  left: -3%; 
  
  /* 모든 레이어가 동일한 1:1 비율로 오버레이 되도록 cover 설정 */
  background-size: cover; 
  background-position: center;
  backface-visibility: hidden;
  transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.d3c-layer-content {
  width: 100%; height: 100%;
  background-size: cover; /* 레이어와 동일하게 유지 */
  background-position: center;
}

/* --- 4. 3D 입체감 전환 (억지스러운 크기 확대 제거) --- */
/* 화면이 활성화되지 않았을 때 (옆으로 약간 빠져있음) */
.d3c-slide:not(.d3c-active) .d3c-layer-bg { transform: translateZ(-50px) translateX(-5%); opacity: 0; }
.d3c-slide:not(.d3c-active) .d3c-layer-person { transform: translateZ(20px) translateX(5%); opacity: 0; }
.d3c-slide:not(.d3c-active) .d3c-layer-text { transform: translateZ(50px) translateX(10%); opacity: 0; }

/* 화면이 활성화되었을 때 (제자리로 오며 입체감 형성) */
.d3c-slide.d3c-active .d3c-layer-bg { transform: translateZ(-10px) translateX(0); opacity: 1; } 
.d3c-slide.d3c-active .d3c-layer-person { transform: translateZ(10px) translateX(0); opacity: 1; transition-delay: 0.1s; }    
.d3c-slide.d3c-active .d3c-layer-text { transform: translateZ(30px) translateX(0); opacity: 1; transition-delay: 0.2s; }   

/* --- 5. 가만히 있을 때 애니메이션 (틀 안에서 움직임) --- */
@keyframes d3cFloatUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5%); } 
}

@keyframes d3cFloatSide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1.5%); }
}

/* [수정됨] 인물(사람)은 좌우로 움직임 */
.d3c-slide.d3c-active .d3c-layer-person .d3c-layer-content {
  animation: d3cFloatSide 4s ease-in-out infinite;
}

/* [수정됨] 글자는 위아래로 움직임 */
.d3c-slide.d3c-active .d3c-layer-text .d3c-layer-content {
  animation: d3cFloatUp 5s ease-in-out infinite;
  animation-delay: 1s;
}
/* --- 좌우 이동 버튼 --- */
/* --- 하단 점(인디케이터) 네비게이션 --- */
.d3c-slider-dots {
  position: absolute;
  bottom: 50px; 
  left: 50%;
  /* 3D 슬라이드들보다 앞에 보이도록 translateZ 추가 */
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 100;
}

.d3c-dot {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 밝은 배경에서도 잘 보이도록 옅은 그림자 추가 */
}

/* 현재 활성화된 슬라이드의 점 */
.d3c-dot.d3c-active {
  background-color: #ffffff;
  width: 30px; /* 트렌디하게 길어지는 효과 */
  border-radius: 5px;
}

/* --- 모바일 반응형 처리 --- */
@media screen and (max-width: 768px) {
  .d3c-slider-dots {
    bottom: 20px;
    gap: 8px;
  }
  .d3c-dot {
    width: 8px;
    height: 8px;
  }
  .d3c-dot.d3c-active {
    width: 24px;
  }
}