/* ─── Design Tokens ─── */
:root{
  --header-h:90px;
  --hero-h-mobile:calc(100vh - var(--header-h));
  --hero-h-desktop:calc(100vh - var(--header-h));
  --hero-h-max:calc(100vh - var(--header-h));
}

/* ── Global ── */
body,html{ overflow-x:hidden; }
.object-fit-cover{ object-fit:cover; }

/* ── Hero Slider ── */
#heroSlider,
#heroSlider .swiper-slide{
  height:clamp(var(--hero-h-mobile),var(--hero-h-desktop),var(--hero-h-max));
}
#heroSlider img{ filter:brightness(.92); }

/* ── Hero Overlay ── */
.hero-overlay{
  position:absolute;
  top:var(--header-h);                /* ▼ 헤더 아래부터 시작 */
  left:0; right:0; bottom:0;          /* 높이 = 100%-헤더 */
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  background:rgba(0,0,0,.50);
  padding:1.5rem;
  z-index:11;
  pointer-events: none;
}


/* 버튼 그리드 – PC (3×2) */
.overlay-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(3,1fr);   /* 3 칸 고정 */
  width:100%; max-width:980px;
}
.overlay-grid .btn{ width:100%; min-width:160px; }

/* ── Small ≤ 576 px – 2×3 ── */
@media (max-width:576px){
  .overlay-grid{
    grid-template-columns:repeat(2,1fr); /* 2 열 */
    gap:.75rem;
  }
  .overlay-grid .btn{
    font-size:.9rem;
    padding:.65rem .5rem;
  }
}

/* ── Accordion (변경 없음) ── */
.accordion-button .fa-solid{ font-size:1.1rem; }
.accordion-button:not(.collapsed){ background:#e7f1ff; font-weight:600; }
.accordion-body .btn{ min-width:180px; }

#collapse-rank .btn{ min-width:150px; }

/* 카드 Hover 효과 */
.accordion-item{ transition:transform .15s ease, box-shadow .15s; }
.accordion-item:hover{ transform:translateY(-2px);
                       box-shadow:0 .5rem 1rem rgba(0,0,0,.08); }

.accordion-button{ border:0; }
.accordion-button.collapsed{ background:transparent; }
.accordion-button:not(.collapsed) .badge{ filter:brightness(1.1); }


/* ── Small screens ── */
@media (max-width: 576px){

  .overlay-grid{
    grid-template-columns:repeat(auto-fit,minmax(48%,1fr));
    gap:.75rem;
  }
  .overlay-grid .btn{
    font-size:.9rem;
    padding:.65rem .5rem;
  }

  /* ▼ 다운로드(1번째) 버튼만 숨김 */
  /* .overlay-grid .btn:nth-child(1){
    display:none !important;
  } */
}

/* 데스크톱: 첫줄 3 · 둘째줄 3 */
@media (min-width: 992px){
  .overlay-grid{ grid-template-columns:repeat(3,1fr); }
}

/* 모바일 - 2열 3행, 숨김 규칙 제거 */
@media (max-width: 576px){
  .overlay-grid{
    grid-template-columns:repeat(2,1fr);
    gap:.75rem;
  }
  .overlay-grid .btn{
    font-size:.9rem; padding:.65rem .5rem;
  }
}

/* Swiper 네비게이션 버튼 숨김 */
#heroSlider .swiper-button-prev,
#heroSlider .swiper-button-next {
  /* display: none !important; */
  color :#fff;
  z-index: 12;
}
/* 예: 모든 점 버튼 색상 변경 */
#heroSlider .swiper-pagination-bullet{
  background:#fff;
  opacity:.6;
  z-index: 999;
  pointer-events: auto;
}
#heroSlider .swiper-pagination-bullet-active{
  opacity:1;
  z-index: 999;
}

.btn {
  z-index: 999;
  pointer-events: auto;
}

/* 모바일(≤576 px)에서만 숨김 */
@media (max-width: 576px) {
  #heroSlider .swiper-button-prev,
  #heroSlider .swiper-button-next {
    display: none !important;
  }
}