/* ===== 內頁側邊欄 (page.html / band2.html 共用) ===== */
.aside-bands {
  @apply flex w-full flex-col gap-[clamp(10px,2vw,22px)] lg:max-w-[318px];
}

.title-aside {
  @apply font-serif text-[clamp(24px,3vw,36px)] font-black leading-[normal] text-white;
}

.asidelist {
  @apply flex w-full flex-col gap-[clamp(10px,2vw,15px)] lg:max-w-[318px];
}

.asidelist__item {
  @apply flex w-full gap-[clamp(10px,2vw,15px)];
}

.asidelist__link {
  @apply flex w-full items-start justify-start gap-[10px] bg-black/40 transition-all duration-300 group-hover:bg-black;
}

.box-aside__rank-wrap {
  @apply tracking-[0.2em];
}

.box-aside__rank {
  @apply pt-1 font-serif font-semibold text-white [writing-mode:vertical-lr];
}

.box-aside__content {
  @apply flex items-center justify-center gap-[10px];
}

.box-aside__t {
  @apply w-full max-w-[100px] shrink-0  self-start;
}

.box-aside__t img {
  @apply h-full w-full object-cover;
}

.box-aside__des {
  @apply w-full break-all text-[clamp(18px,2vw,20px)] font-bold text-white;
}

.box-aside__des-title {
  @apply  font-serif;
}

.box-aside__des-text {
  @apply text-[clamp(12px,2vw,14px)] text-white opacity-80 font-normal;
}
.icon-download {
  @apply flex items-center justify-start gap-[10px] ;
}
.icon-download div {
  @apply text-[clamp(12px,2vw,14px)]  font-normal;
}
/*LOADMORE===================================*/
.show-more {
  width: 100%;
  height: 100vh;
  padding: 10px;
  color: #fff;
  display: none;
  position: fixed;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  z-index: 10000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vh, 24px);
  box-sizing: border-box;
}

.show-more.is-visible {
  display: flex;
}

.show-more::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  background-image: url(../img/all/loading.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px auto;
}

.show-more span {
  color: #ffffff;
  text-align: center;
}
.notebox {
  @apply text-[clamp(18px,2vw,24px)] font-bold;
}

/* 手機版的 right 進場位移縮小，避免小圖一開始被推出視窗外而無法觸發 in-view。 */
@media (max-width: 639px) {
  .scroll-anim--right {
    transform: translate3d(24px, 0, 0);
  }
}