*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
      background: #fff;
    }

    a {
      text-decoration: none;
    }

    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-thumb {
      background: #fcd34d;
      border-radius: 3px;
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-10px)
      }
    }

    @keyframes wobble {

      0%,
      100% {
        transform: rotate(-3deg)
      }

      50% {
        transform: rotate(3deg)
      }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes shimmer {
      0% {
        background-position: 200% center
      }

      100% {
        background-position: -200% center
      }
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: 0.4
      }
    }

    @keyframes aiReveal {
      from {
        opacity: 0;
        transform: translateY(12px) scale(0.97)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1)
      }
    }

    @keyframes marquee {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    .marquee-track {
      display: flex;
      gap: 20px;
      width: max-content;
      animation: marquee 28s linear infinite;
    }

    .marquee-track:hover {
      animation-play-state: paused;
    }

    .float {
      animation: float 3s ease-in-out infinite;
    }

    .wobble {
      animation: wobble 2s ease-in-out infinite;
    }

    .fade-in {
      animation: fadeInUp 0.5s ease both;
    }

    .card-hover {
      transition: transform 0.2s, box-shadow 0.2s;
      cursor: pointer;
    }

    .card-hover:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.13) !important;
    }

    .banner-dot {
      transition: all 0.3s;
      cursor: pointer;
      border: none;
      padding: 0;
    }

    .banner-track-wrap {
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    .banner-track {
      display: flex;
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }

    .banner-slide-item {
      flex: 0 0 100%;
      width: 100%;
    }

    .arrow-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.88);
      border: none;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      font-size: 22px;
      cursor: pointer;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, transform 0.2s;
    }

    .arrow-btn:hover {
      background: #fff;
      transform: translateY(-50%) scale(1.08);
    }

    /* AI 추천 카드 shimmer 로딩 */
    .ai-skeleton {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 400% 100%;
      animation: shimmer 1.4s ease infinite;
      border-radius: 12px;
    }

    .ai-card-reveal {
      animation: aiReveal 0.5s ease both;
    }

    .notranslate {
      translate: no;
    }

    .title-ko {
      display: block;
    }

    .title-en {
      display: none;
    }

    :lang(en) .title-ko {
      display: none;
    }

    :lang(en) .title-en {
      display: block;
    }
/* ── 공통 유틸 ── */
.btn-hover { transition: all 0.2s; }
.btn-hover:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; }

/* ── 별 소비 애니메이션 (PlayerPage) ── */
@keyframes starPop {
  0% {
    transform: translate(-50%, -350%) scale(0.1) rotate(0deg);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.0) rotate(360deg);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) scale(1.1) rotate(360deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(5.0) rotate(360deg);
    opacity: 0;
  }
}

/* ── 리뷰 별점 버튼 (PlayerPage) ── */
.star-btn {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s;
  padding: 2px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.star-btn:hover {
  transform: scale(1.25);
}