/* === 배너 3버튼 배경 === */
.banner-buttons-bg {
  background: rgba(227, 239, 246, 0.75);
  padding: 2rem 0;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

/* 버튼 그룹 래퍼 */
.banner-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}

/* 버튼 공통 스타일 */
:root {
  --shadow-color: 208deg 22% 58%;
  --shadow-elevation-high:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
}

.banner-button {
  border: none;
  background: transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.3rem 2.4rem;
  overflow: hidden;
  border-radius: 100vmax;
  box-shadow: var(--shadow-elevation-high);
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
  cursor: pointer;
}

.banner-button::before,
.banner-button::after {
  content: "";
  position: absolute;
  inset: 0;
}

.banner-button::before {
  z-index: 1;
  right: -100%;
  background: linear-gradient(to right, #9900F0 0%, #FF85B3 50%, #9900F0 100%);
  background-size: 50% 100%;
  animation: banner-scroll 1.2s infinite linear;
}

.banner-button::after {
  z-index: 2;
  inset: 5px;
  border-radius: 100vmax;
  background-color: #000;
  transition: inset 0.2s ease-in-out;
}

.banner-button span {
  z-index: 3;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1rem;
}

.banner-button:hover {
  box-shadow: var(--shadow-elevation-medium);
  transform: translateY(-2px);
}
.banner-button:hover::after {
  inset: 8px;
}

@keyframes banner-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* =====================================
   ✅ 반응형 — 항상 보이게 + 프레임 폭 자동 조절
===================================== */

/* 아이패드 이하에서도 숨김 방지 및 프레임 폭 축소 */
@media (max-width: 1199.98px) {
  .subBanner_fullBanner__SNZqb,
  .subBanner_contractionImg__hPAAG,
  .banner-buttons-bg {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* 프레임 폭을 화면에 맞게 조정 */
  .subBanner_fullBanner__SNZqb {
    max-width: 95vw !important;
    margin: 0 auto;
    padding: 1.8rem 0.5rem !important;
    border-radius: 0.8rem;
    box-sizing: border-box;
    overflow: hidden;
  }

  .banner-buttons {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .banner-button {
    padding: 1rem 1.8rem;
  }
}

/* ===============================
   Mobile fix: 배너/컨테이너 가로 잘림 해결
   - min-width:880px 제거
   - 내부 880px 고정폭 해제
   - 100% 폭 + 가운데 정렬 유지
================================ */
@media (max-width: 767.98px) {

  #AImighty_wrap {
    min-width: auto !important;
    width: 100% !important;
    box-sizing: border-box;
    padding-left: max(2px, env(safe-area-inset-left));
    padding-right: max(2px, env(safe-area-inset-right));
    overflow-x: clip;
  }
  
  /* 부모 고정 최소폭 제거 + 가운데 정렬 */
  .subBanner_fullBanner__SNZqb {
    min-width: 0 !important;      /* 원인 1 해제  */
    width: 100%;                   /* 기존 요구 유지 (작게) */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* 내부 880px 고정 폭 해제 */
  .subBanner_fullBanner__SNZqb
  .subBanner_expandImg__Mti31
  .subBanner_inner_w__oXVOe
  .subBanner_inner__Z34X1 {
    width: auto !important;       /* 원인 2 해제 */
    max-width: 100% !important;
  }

  /* 내부 이미지/콘텐츠가 부모를 넘지 않도록 */
  .subBanner_fullBanner__SNZqb .subBanner_contractionImg__hPAAG img {
    max-width: 100%;
    height: auto;
  }

  /* 혹시 남아있는 수평 넘침 제거(애니메이션 ::before 등 대비) */
  html, body { overflow-x: hidden; }

  /* cBox들도 중앙 정렬 보정 (부모가 넓어진 상태의 잔여 영향 제거) */
  #container { margin: 0 auto; max-width: 100vw; }
}