/**
 * hero-slider — 슬라이드형 히어로 (스킨 전용 BEM: .twb-hero-slider__)
 * 참고: 높이 600px / md 800px, 배경 이미지 + 그라데이션, 점·화살표 네비
 */

/* .twb-hero-slider 음수 마진 제거로 다음 섹션과 겹침·뷰포트 판정 오류 방지 */
.twb-section--hero-slider {
  padding-top: 0;
  padding-bottom: 0;
  /* 슬라이더(#18181b)와 동일 — #fff 이면 하단·경계에서 서브픽셀 틈이 흰 1px 로 보임 */
  background-color: #18181b;
}

/* 섹션(래퍼) AOS — 스와이퍼·앵커(#섹션id)와 분리 (skin.php .twb-hero-slider__section-motion) */
.twb-hero-slider__section-motion {
  width: 100%;
}

.twb-section--hero-slider.twb-section--hero-slider--align-center {
  text-align: center;
}

.twb-section--hero-slider.twb-section--hero-slider--align-left {
  text-align: left;
}

.twb-section--hero-slider.twb-section--hero-slider--align-right {
  text-align: right;
}

.twb-hero-slider {
  /* 히어로 자동 스케일 — 플러그인에서 calc(var(--hero-*) * var(--hero-scale)) */
  --base-h1: 48px;
  --base-h1-px: 48;
  --base-h2: 48px;
  --base-h2-px: 48;
  --base-h3: 9px;
  --base-h3-px: 9;
  --base-p: 20px;
  --base-p-px: 20;
  --base-gap-badge-title: 36px;
  --base-gap-badge-title-px: 36;
  --base-gap-title-desc: 36px;
  --base-gap-title-desc-px: 36;
  --base-gap-desc-actions: 52px;
  --base-gap-desc-actions-px: 52;
  --base-gap-actions: 28px;
  --base-gap-actions-px: 28;
  --base-btn-font-size: 20px;
  --base-btn-font-size-px: 20;
  --base-btn-pad-y: 22px;
  --base-btn-pad-y-px: 22;
  --base-btn-pad-x: 52px;
  --base-btn-pad-x-px: 52;
  --twb-hero-base-gap-badge-title: 36px;
  --twb-hero-base-gap-title-desc: 36px;
  --twb-hero-base-gap-desc-actions: 52px;
  --twb-hero-base-gap-actions: 28px;
  --twb-hero-base-btn-font-size: 1.25rem;
  --twb-hero-base-btn-pad-y: 22px;
  --twb-hero-base-btn-pad-x: 52px;
  --twb-hero-base-btn-radius: 16px;
  --twb-hero-base-btn-min-height: 56px;
  --twb-hero-base-btn-min-w: auto;
  --twb-hero-base-slide-inner-padding-x: 24px;
  --twb-hero-base-badge-pad-y: 6px;
  --twb-hero-base-badge-pad-x: 16px;
  position: relative;
  width: 100%;
  min-height: 600px;
  overflow: hidden;
  background-color: #18181b;
}

.twb-hero-slider--align-center {
  text-align: center;
}

.twb-hero-slider--align-left {
  text-align: left;
}

.twb-hero-slider--align-right {
  text-align: right;
}

@media (min-width: 768px) {
  .twb-hero-slider {
    --base-h1: 96px;
    --base-h1-px: 96;
    --base-h2: 96px;
    --base-h2-px: 96;
    --base-p: 24px;
    --base-p-px: 24;
    min-height: 800px;
  }
}

.twb-hero-slider {
  --twb-slider-nav-opacity: 0;
}

.twb-hero-slider:hover {
  --twb-slider-nav-opacity: 1;
}

.twb-hero-slider.swiper {
  --swiper-theme-color: #ffffff;
  /* 커스텀 원형 버튼(56px)과 맞춤 — 번들 기본(약 44px) 덮어쓰기 */
  --swiper-navigation-size: 56px;
}

.twb-hero-slider .swiper-wrapper {
  min-height: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.twb-hero-slider__slide.swiper-slide {
  position: relative;
  flex-shrink: 0;
  min-height: 600px;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (min-width: 768px) {
  .twb-hero-slider__slide {
    min-height: 800px;
  }
}

.twb-hero-slider__slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

/* 고급설정 배경 이미지 효과(AOS/페이드·줌): 기본 0.6 이 애니메이션 가시성을 망침 */
.twb-hero-slider__slide-img.twb-skin-hero-aos-media,
.twb-hero-slider__slide-img[class*="twb-anim-media"] {
  opacity: 1;
}

.twb-hero-slider__slide-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

.twb-hero-slider__slide-inner {
  position: relative;
  z-index: 10;
  height: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--twb-hero-slide-inner-pad-x, var(--twb-hero-base-slide-inner-padding-x));
  padding-right: var(--twb-hero-slide-inner-pad-x, var(--twb-hero-base-slide-inner-padding-x));
  color: #fff;
  text-align: center;
}

.twb-hero-slider--align-left .twb-hero-slider__slide-inner {
  justify-content: flex-start;
  text-align: left;
}

.twb-hero-slider--align-right .twb-hero-slider__slide-inner {
  justify-content: flex-end;
  text-align: right;
}

.twb-hero-slider__content {
  max-width: 56rem;
  width: 100%;
  margin: 0 auto;
}

.twb-hero-slider--align-left .twb-hero-slider__content {
  margin-left: 0;
  margin-right: auto;
}

.twb-hero-slider--align-right .twb-hero-slider__content {
  margin-left: auto;
  margin-right: 0;
}

/* 배지: 앰버 배경 + 검정 본문 (Featured Solution 느낌) — 인라인 style 이 없을 때 폴백 */
.twb-hero-slider__badge {
  display: inline-block;
  padding: var(--twb-hero-badge-pad-y, var(--twb-hero-base-badge-pad-y))
    var(--twb-hero-badge-pad-x, var(--twb-hero-base-badge-pad-x));
  margin-bottom: var(--twb-hero-gap-badge-title, var(--twb-hero-base-gap-badge-title));
  border-radius: 9999px;
  font-size: var(--twb-hero-fs-h3, var(--twb-typo-size-h3, var(--base-h3, 9px)));
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #000000;
  background-color: #fbbf24;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

.twb-hero-slider__title {
  margin: 0 0 var(--twb-hero-gap-title-desc, var(--twb-hero-base-gap-title-desc));
  font-size: var(--twb-hero-fs-h1, var(--twb-typo-size-h1, var(--base-h1, 48px)));
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.05em;
  text-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
  word-break: keep-all;
}

.twb-hero-slider__desc {
  margin: 0 auto var(--twb-hero-gap-desc-actions, var(--twb-hero-base-gap-desc-actions));
  max-width: 42rem;
  font-size: var(--twb-hero-fs-p, var(--twb-typo-size-p, var(--base-p, 20px)));
  line-height: 1.625;
  font-weight: 500;
  text-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  word-break: keep-all;
  white-space: pre-wrap;
}

.twb-hero-slider--align-left .twb-hero-slider__desc {
  margin-left: 0;
  margin-right: auto;
}

.twb-hero-slider--align-right .twb-hero-slider__desc {
  margin-left: auto;
  margin-right: 0;
}

.twb-hero-slider__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--twb-hero-gap-actions, var(--twb-hero-base-gap-actions));
  flex-wrap: wrap;
  width: 100%;
}

.twb-hero-slider--align-left .twb-hero-slider__actions {
  align-items: flex-start;
  justify-content: flex-start;
}

.twb-hero-slider--align-right .twb-hero-slider__actions {
  align-items: flex-end;
  justify-content: flex-end;
}

@media (min-width: 640px) {
  .twb-hero-slider--align-left .twb-hero-slider__actions {
    align-items: center;
  }

  .twb-hero-slider--align-right .twb-hero-slider__actions {
    align-items: center;
  }
}

@media (min-width: 640px) {
  .twb-hero-slider__actions {
    flex-direction: row;
  }
}

.twb-hero-slider__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: var(--twb-hero-btn-min-w, var(--twb-hero-base-btn-min-w));
  min-height: var(--twb-hero-btn-min-height, var(--twb-hero-base-btn-min-height));
  padding: var(--twb-hero-btn-pad-y, var(--twb-hero-base-btn-pad-y))
    var(--twb-hero-btn-pad-x, var(--twb-hero-base-btn-pad-x));
  border-radius: var(--twb-hero-btn-radius, var(--twb-hero-base-btn-radius));
  font-size: var(--twb-hero-btn-font-size, var(--twb-hero-base-btn-font-size));
  font-weight: 900;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}

@media (min-width: 640px) {
  .twb-hero-slider__btn {
    width: auto;
  }
}

.twb-hero-slider__btn--primary {
  background-color: #ffffff;
  color: #000000 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
}

.twb-hero-slider__btn--primary:hover {
  transform: scale(1.05);
}

.twb-hero-slider__btn--primary:active {
  transform: scale(0.95);
}

/*
 * 보조 버튼: 색·블러는 .twb-hero-slider 루트 style 의 CSS 변수(--twb-sec2-*)로만 줌.
 * <a style="background:#hex"> 인라인은 element.style 이 이기므로 글래스/블러가 막힘 — 링크에는 인라인 금지.
 */
.twb-hero-slider .btn--secondary,
.twb-hero-slider__btn--secondary,
.tvb-hero-slider .btn--secondary,
.tvb-hero-slider__btn--secondary {
  background-color: var(--twb-sec2-bg, rgba(255, 255, 255, 0.2));
  color: var(--twb-sec2-color, #ffffff) !important;
  border: 1px solid var(--twb-sec2-border, rgba(255, 255, 255, 0.28));
  backdrop-filter: blur(var(--twb-sec2-blur, 12px));
  -webkit-backdrop-filter: blur(var(--twb-sec2-blur, 12px));
  box-shadow: none;
  /* 부모 transform(AOS 등)과 겹칠 때 backdrop 보간이 합성을 흔들이므로 blur는 전환에서 제외 */
  transform: translateZ(0);
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

.twb-hero-slider .btn--secondary:hover,
.twb-hero-slider__btn--secondary:hover,
.tvb-hero-slider .btn--secondary:hover,
.tvb-hero-slider__btn--secondary:hover {
  filter: brightness(1.08);
  transform: translateZ(0) scale(1.05);
}

.twb-hero-slider .btn--secondary:active,
.twb-hero-slider__btn--secondary:active,
.tvb-hero-slider .btn--secondary:active,
.tvb-hero-slider__btn--secondary:active {
  transform: translateZ(0) scale(0.95);
}

.twb-hero-slider .swiper-pagination.twb-hero-slider__dots {
  bottom: 48px !important;
  left: 50% !important;
  width: auto !important;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  z-index: 20;
  align-items: center;
  justify-content: center;
}

.twb-hero-slider .swiper-pagination-bullet {
  height: 10px;
  width: 10px;
  min-width: 10px;
  margin: 0 !important;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.3);
  opacity: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease, min-width 0.2s ease;
}

.twb-hero-slider .swiper-pagination-bullet:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.twb-hero-slider .swiper-pagination-bullet-active {
  width: 32px;
  min-width: 32px;
  border-radius: 9999px;
  background-color: #fff;
}

.twb-hero-slider__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 32px;
  padding-right: 32px;
  pointer-events: none;
  opacity: var(--twb-slider-nav-opacity);
  transition: opacity 0.25s ease;
}

.twb-hero-slider__nav--prev {
  left: 0;
}

.twb-hero-slider__nav--next {
  right: 0;
}

/* Swiper 번들이 나중에 로드되면 덮어쓰므로, 섹션 기준으로 한 번 더 고정 */
.twb-section--hero-slider .twb-hero-slider .twb-hero-slider__nav-btn.swiper-button-prev,
.twb-section--hero-slider .twb-hero-slider .twb-hero-slider__nav-btn.swiper-button-next {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  margin: 0;
  transform: none;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.twb-hero-slider__nav-btn.swiper-button-prev,
.twb-hero-slider__nav-btn.swiper-button-next {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  margin: 0;
  transform: none;
}

.twb-hero-slider__nav-btn.swiper-button-prev::after,
.twb-hero-slider__nav-btn.swiper-button-next::after {
  display: none;
}

.twb-hero-slider__nav-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.twb-section--hero-slider .twb-hero-slider .twb-hero-slider__nav-btn:hover,
.twb-hero-slider__nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

.twb-section--hero-slider .twb-hero-slider .twb-hero-slider__nav-btn svg,
.twb-hero-slider__nav-btn svg {
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  stroke: currentColor;
}

/*
 * 슬라이드 텍스트 모션: 플러그인 twbuilder/assets/css/twb-hero-slider-enter.css
 * (.hero-anim + 슬라이드 .is-current | .is-entering | .is-leaving). 예전 twb-hero-slide--enter / 빌더 전용 AOS 블록 제거.
 */

/* 버튼 래퍼: 글래스(backdrop-filter) + transform 합성 끝에서 블러 깜박임 완화 */
.twb-hero-slider .swiper-slide-active .twb-hero-slider__actions {
  isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
  [data-twb-hero-slider].twb-hero-slider .twb-hero-slider__content > .hero-anim {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}