/* 전체 슬라이드 컨테이너 */
#slide_container {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000; /* 배경색 (이미지 로딩 중에도 깔끔) */
  position: relative;
  margin-top: var(--header-height);
}

/* 슬라이드 위에 비네팅 오버레이 얹기 */
#slide_container .swiper .swiper-slide{ position: relative; }

/* 어둡게: 가장자리 비네팅 + 아래쪽 캡션 영역 보강 */
#slide_container .swiper .swiper-slide::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;           /* 링크 클릭 방해 X */
  z-index: 8;                     /* 이미지 위, 캡션(z-index:13) 아래 */

  /* 레이어 1: 중앙은 투명, 가장자리는 점점 어둡게 */
  /* 레이어 2: 아래쪽(캡션 영역) 가독성 보강 */
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 42%,
      rgba(0,0,0,.35) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,.32) 0%,
      rgba(0,0,0,0) 28%,
      rgba(0,0,0,0) 68%,
      rgba(0,0,0,.45) 100%);
  opacity: 1;
  transition: opacity .3s ease;
  /* 선택: 더 자연스러운 어둡게 효과. 브라우저 지원에 따라 취향 */
  /* mix-blend-mode: multiply; */
}

:root { --hero-h-desktop: 65dvh; --hero-h-mobile: 40svh; }


/* 스와이퍼 컨테이너 */
.swiper {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  height: var(--hero-h-desktop); 
  min-height: 260px; /* 선택: 너무 낮아지지 않게 가드 */
}

/* 메인 슬라이드 (전체 높이 고정) */
.swiper .swiper-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 768px){
  .swiper {
    height: var(--hero-h-mobile); 
    min-height: 220px;
  }
}

/* 각 슬라이드 카드 */
.swiper .swiper-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0; /* 풀사이즈라서 둥근 모서리 제거 */
  box-shadow: none;
}

/* 링크 있을 때도 전체 클릭 가능 */
.swiper .swiper-slide > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* 이미지 꽉 채우기 */
.swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* 빈 공간 없이 꽉 채움 */
  object-position: center center; /* 가운데 기준으로 크롭 */
}

/* 페이지네이션 (아래 중앙) */
.swiper-pagination {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
}

/* 페이지네이션 점 스타일 */
.swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.7);
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: #fff;
}

/* 네비게이션 버튼 */
.swiper-button-prev,
.swiper-button-next {
  position: absolute; /* fixed 보다는 absolute가 안전 */
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999; /* 항상 맨 위로 */
  pointer-events: auto; /* 혹시 막혀있을 때 */
}

/* 색상 흰색 + 약간의 원형 배경(선택) */
#slide_container .swiper-button-prev,
#slide_container .swiper-button-next{
  color:#fff;                 /* 아이콘 색 */
  width:44px; height:44px;
  border-radius:9999px;
  transition: color .28s ease, background-color .28s ease, transform .28s ease;
}
#slide_container .swiper-button-prev:hover,
#slide_container .swiper-button-next:hover{
  color: var(--color-main);
  

}
/* 아이콘 크기 살짝 키우기(선택) */
#slide_container .swiper-button-prev::after,
#slide_container .swiper-button-next::after{
  font-size:50px;
  
  transition: color .28s ease, transform .28s ease;
}

/* 위치를 가운데 쪽으로 모으기 */
@media (min-width:769px){
  #slide_container .swiper-button-prev{ left:6%; }
  #slide_container .swiper-button-next{ right:6%; }
}
@media (max-width:768px){
  #slide_container .swiper-button-prev{ left:4%; }
  #slide_container .swiper-button-next{ right:4%; }
  /* 아이콘 숨김을 원치 않으면 기존의 display:none 제거 */
  .swiper-button-prev::after,
  .swiper-button-next::after{ display:inline-block; }
}


.swiper .swiper-slide,
.swiper .swiper-slide > a {
  position: relative;
}

.slide-caption{
  position:absolute; left:50%; bottom:14%;
  /* 한 번만 선언 */
  transform: translate(-50%, 6px);
  width: min(96%, 1160px);
  z-index:13; pointer-events:none;
  opacity:0;
  transition: opacity .58s ease, transform .58s ease;
}
.swiper-slide-active .slide-caption{
  opacity:1; transform: translate(-50%, 0);
}

/* 제목 */
.caption-title {
  color: #fff;
  font-weight: 800;
  line-height: 1.25;
  /* 기존: clamp(20px, 3.2vw, 36px) */
  font-size: clamp(24px, 4.2vw, 46px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
  font-family: var(--font-title);
}

/* 소제목 */
.caption-subtitle {
  color: #f3f6fb;
  line-height: 1.5;
  /* 기존: clamp(14px, 2.2vw, 18px) */
  font-size: clamp(20px, 4vw, 30px);
  border-radius: 10px;
  padding: 8px 5px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
  font-family: var(--font-subtitle);
}

/* 모바일에서 더 시원하게 */
@media (max-width: 768px) {
  .slide-caption {
    bottom: 18%;
    width: min(96%, 720px); /* 필요 시 너비도 살짝 업 */
    text-align: center; /* ✨ 텍스트 가운데 정렬 */
  } /* ← 이전: min(94%, 640px) */
  /* 제목을 모바일에서 더 키움 */
  .caption-title {
    font-size: clamp(22px, 6.2vw, 32px);
    margin-bottom: 10px;
  }
  /* 소제목도 살짝 업 */
  .caption-subtitle {
    -webkit-line-clamp: 3;
    font-size: clamp(15px, 4.8vw, 20px);
  }
}

/* 원하는 경우 어두운 배경 고정: #slide_container { background:#000; } */

/* ====== 아래로 스크롤 힌트 ====== */

/* 스크롤 힌트 클릭 가능 + 위로 올리기 */
#slide_container .scroll-hint{
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 14; /* 페이지네이션(10), 타이머(12)보다 위 */
  display: none; /* 기본 숨김 */
}

#slide_container .scroll_text{
  pointer-events: auto;
  cursor: pointer;
  z-index: 14;
    display: none; /* 기본 숨김 */
}


.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 80px; /* 페이지네이션보다 살짝 아래 */
  transform: translateX(-50%);
  width: 28px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  opacity: 0.9;
  z-index: 9; /* 페이지네이션(10)보다 아래로 겹치지 않게 */
  cursor: pointer;
}

/* 마우스 휠 점 */
.scroll-hint .wheel {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: wheel 1.4s ease-in-out infinite;
}

@keyframes wheel {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, 10px);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, 0);
    opacity: 0;
  }
}

/* 아래로 내려가는 작은 ˇ 아이콘(체브론) */
.scroll-hint .chev {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.9);
  border-bottom: 2px solid rgba(255, 255, 255, 0.9);
  transform: translateX(-50%) rotate(45deg);
  animation: chev 1.4s ease-in-out infinite;
}

.scroll_text {
  position: absolute;
  left: 50%;
  bottom: 30px; /* 페이지네이션보다 살짝 아래 */
  color: #fff;
  z-index: 999;
  transform: translateX(-50%);
  font-size: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  animation: scrollTextBlink 1.4s ease-in-out infinite;
}

/* chev/wheel과 박자 맞춤 */
@keyframes scrollTextBlink {
  0% {
    opacity: 0;
    transform: translate(-50%, 2px);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  70% {
    opacity: 0.25;
    transform: translate(-50%, 4px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 2px);
  }
}

/* 사용자 접근성: 모션 최소화 선호 시 애니메이션 끄기 */
@media (prefers-reduced-motion: reduce) {
  .scroll_text {
    animation: none;
  }
}

@keyframes chev {
  0% {
    transform: translate(-50%, 0) rotate(45deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    transform: translate(-50%, 6px) rotate(45deg);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* 모바일에서 둘 다 살짝 위로 */
@media (max-width: 768px) {
  .swiper-pagination {
    bottom: 18px;
  }
}

/* 진행 타이머 컨테이너 */
.slide-timer {
  position:absolute; left:50%; bottom:18px;
  transform:translateX(-50%);
  /* 하나만 남기기 — 예시: 더 넓게 */
  width: min(300px, 60%);
  height:4px;
  background:rgba(255,255,255,.25);
  border-radius:999px; overflow:hidden; z-index:12; pointer-events:none;
}

/* 채워지는 부분 */
.slide-timer .fill {
  display: block;
  height: 100%;
  width: 0%; /* JS로 0→100% */
  background: #fff; /* 색상 */
  transform-origin: left center;
}

/* 밝은 이미지 위에서 가독성을 위해 안쪽 그림자 */
.slide-timer::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.22) inset;
  border-radius: 999px;
}







@media (max-width: 768px) {

  .swiper .swiper-slide img {
    object-fit: cover;
    object-position: center center; /* 기본 */
  }

  /* 특정 슬라이드만 좌/우/상단 포커싱하고 싶을 때 */
  .swiper .swiper-slide.focus-left img {
    object-position: left center;
  }
  .swiper .swiper-slide.focus-right img {
    object-position: right center;
  }
  .swiper .swiper-slide.focus-top img {
    object-position: center top;
  }
  .swiper .swiper-slide.focus-btm img {
    object-position: center bottom;
  }

  
  .swiper-button-prev::after,
  .swiper-button-next::after {
    display: none;
  }
}


@media (max-width:768px){
  #slide_container .swiper .swiper-slide::after{
    background:
      radial-gradient(ellipse at center,
        rgba(0,0,0,0) 44%,
        rgba(0,0,0,.28) 100%),
      linear-gradient(to bottom,
        rgba(0,0,0,.26) 0%,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,0) 70%,
        rgba(0,0,0,.36) 100%);
  }
}