/* WaterMelon Random Strip — scoped (enhanced) */
#wm-random-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  background: #0f0f0f;
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, .08);

  /* ✅ 전체 컴포넌트 폭을 고정하고 가운데 정렬 */
  width: 100%;
  max-width: 480px;
  /* 2번째 캡처처럼 너무 넓어지지 않게 상한 */
  margin: 16px auto;
  /* ⬅ 위/아래 동일 16px로 균일화 */
  /* 좌우 auto로 중앙 정렬 */

  box-sizing: border-box;

  /* ⬇ 썸네일 기준 사이즈 (데스크탑) */
  --wm-thumb: 72px;
  /* ⬇ 태그 마키 속도(전역 조절용) */
  --wm-ticker-speed: 16s;
}

/* 좌/우 탭 — 확대(데스크톱 56px / 모바일 44px) */
#wm-random-strip .tab {
  width: 56px;
  height: 56px;
  /* ⬅ 히트영역 크게 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  cursor: pointer;
  opacity: .9;
  font-size: 20px;
  line-height: 1;
  /* ◀▶ 글리프 크기 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  transition: opacity .15s ease, transform .08s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  /* ✅ 링 의사요소 기준점 */
}

/* ====== ⬇⬇⬇ 파일의 맨 하단에 “그대로” 추가 ⬇⬇⬇ ====== */

/* 링 이펙트 - 안전 버전 */
#wm-random-strip .wm-nav.tab {
  position: relative;
  /* 기준 */
  overflow: visible;
  /* 링이 밖으로 나갈 수 있게 */
  z-index: 1;
  /* 본체는 앞으로 */
}

/* 기본은 투명 + 이벤트 차단 + 뒤로 */
#wm-random-strip .wm-nav.tab::after {
  content: "";
  position: absolute;
  inset: -6px;
  /* 버튼보다 조금 크게 */
  border-radius: 999px;
  border: 2px solid transparent;
  transform: scale(0.86);
  opacity: 0;
  pointer-events: none;
  /* ← 핵심: 클릭 가로채지 않게 */
  z-index: -1;
  /* ← 뒤로 보내 클릭 레이어가 앞에 있도록 */
}

/* 활성 상태(클릭 시 .wm-ring 붙음) */
#wm-random-strip .wm-nav.tab.wm-ring::after {
  border-color: #d0021b;
  /* 구찌 레드 계열 */
  box-shadow:
    0 0 0 2px rgba(208, 2, 27, 0.20),
    0 0 0 7px rgba(208, 2, 27, 0.10);
  animation: wm-ring-pulse 650ms ease-out forwards;
}

/* 애니메이션 키프레임 */
@keyframes wm-ring-pulse {
  0% {
    transform: scale(0.86);
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    transform: scale(1.18);
    opacity: 0;
  }
}


@keyframes wm-gucci-ring {
  0% {
    opacity: 1;
    transform: scale(0.92);
  }

  80% {
    opacity: .85;
    transform: scale(1.06);
  }

  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

/* ====== ⬆⬆⬆ 그대로 추가 ⬆⬆⬆ ====== */


#wm-random-strip .tab[disabled] {
  opacity: .45;
  cursor: default;
}

#wm-random-strip .tab:hover:not([disabled]) {
  opacity: 1;
  background: rgba(255, 255, 255, .12);
}

#wm-random-strip .tab:active:not([disabled]) {
  transform: translateY(1px) scale(.98);
}

#wm-random-strip .tab:focus-visible {
  outline: 3px solid rgba(255, 61, 87, .45);
  outline-offset: 2px;
}

/* (선택) SVG 아이콘을 쓴 경우도 커지도록 지원 */
#wm-random-strip .tab svg {
  width: 56%;
  height: 56%;
  pointer-events: none;
}

/* 아트웍 */
#wm-random-strip .art {
  flex: 0 0 var(--wm-thumb);
  width: var(--wm-thumb);
  height: var(--wm-thumb);
}

#wm-random-strip .art img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

/* 메타 */
#wm-random-strip .meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  flex: 1 1 auto;
  /* ✅ 가운데 블록만 유연 */
  min-width: 0;
}

#wm-random-strip .eyebrow {
  font-size: 11px;
  opacity: .7;
  letter-spacing: .02em;
}

/* 제목 컨테이너 자체 폭을 '알파벳 10글자 정도'로 고정 */
#wm-random-strip .title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: var(--wm-title-width, 10ch);
  /* ✅ 기본 10ch */
  max-width: var(--wm-title-width, 10ch);
}

#wm-random-strip .sub {
  font-size: 12px;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 칩 */
#wm-random-strip .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
  /* 중앙 정렬 */
}

#wm-random-strip .chips .chip {
  font-size: 11px;
  border: 1px solid rgba(255, 255, 255, .15);
  padding: 3px 8px;
  border-radius: 999px;
  opacity: .9;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  user-select: none;
  transition: filter .12s ease, border-color .12s ease;
}

#wm-random-strip .chips .chip:hover {
  filter: brightness(1.1);
}

#wm-random-strip .chips .chip:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .35);
  outline-offset: 1px;
}

/* 액션 버튼 */
/* 액션 영역: 같은 줄 고정 */
#wm-random-strip .actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  align-items: center;
  flex-wrap: nowrap;
  /* wrap 금지 */
}

#wm-random-strip .actions .buy {
  width: auto !important;
  min-width: 0 !important;
}

/* 버튼: 인라인 플렉스 + 줄바꿈 방지 */
#wm-random-strip .btn {
  display: inline-flex;
  /* 버튼 내용 세로 가운데 + 가로폭만큼만 */
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  /* 'Play'가 줄바꿈 되는 문제 방지 */
  flex: 0 0 auto;
  /* 버튼 자체 폭 유지 */
}

#wm-random-strip .btn:hover {
  filter: brightness(1.05);
}

#wm-random-strip .btn:active {
  transform: translateY(1px);
}

#wm-random-strip .btn:disabled {
  opacity: .4;
  cursor: default;
}

/* 재생 상태 */
#wm-random-strip.playing .actions .btn.play {
  background: #1b1e22;
  border-color: rgba(255, 255, 255, .25);
}

/* 오디오 숨김 */
#wm-random-strip audio {
  display: none;
}

/* 모바일 */
@media (max-width:768px) {
  #wm-random-strip {
    padding: 10px;
    gap: 8px;
    --wm-thumb: 56px;
  }

  #wm-random-strip .actions .btn {
    padding: 5px 8px;
    font-size: 12px;
  }

  #wm-random-strip .tab {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

/* 마키 컨테이너도 동일한 고정 폭을 사용 (영역 밖으로 못 나가게) */
#wm-random-strip .title .ticker {
  position: relative;
  overflow: hidden;
  width: var(--wm-title-width, 10ch);
  /* ✅ 고정 폭 */
  max-width: var(--wm-title-width, 10ch);
  margin: 0 auto;
}

#wm-random-strip .title .ticker .track {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: wm-random-ticker var(--wm-ticker-speed) linear infinite;
  opacity: .95;
}

/* PC에서 마우스 올리면 일시 정지 */
#wm-random-strip .title .ticker:hover .track {
  animation-play-state: paused;
}

/* 좌우 페이드(배경색: #0f0f0f와 일치) */
#wm-random-strip .title .ticker::before,
#wm-random-strip .title .ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
}

#wm-random-strip .title .ticker::before {
  left: 0;
  background: linear-gradient(to right, #0f0f0f 40%, rgba(15, 15, 15, 0));
}

#wm-random-strip .title .ticker::after {
  right: 0;
  background: linear-gradient(to left, #0f0f0f 40%, rgba(15, 15, 15, 0));
}

/* 애니메이션 (내용 두 번 이어붙인 기준) */
@keyframes wm-random-ticker {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* 접근성: 모션 최소화 선호 시 정지 */
@media (prefers-reduced-motion: reduce) {
  #wm-random-strip .title .ticker .track {
    animation: none;
  }
}

/* 모바일 최적화 */
@media (max-width:768px) {
  #wm-random-strip {
    --wm-ticker-speed: 14s;
  }

  #wm-random-strip .title .ticker {
    max-width: clamp(140px, 64vw, 280px);
  }
}

/* =========================
   APPEND: 제목 마키 + 폭 확장(중앙 레이아웃 유지)
   ========================= */

/* 가운데 텍스트 영역: 확장(grow) 금지 + 합리적 최대폭만 허용
   → 좌/우 버튼이 양끝으로 밀려나지 않음 */
/* 가운데 텍스트 영역: 확장(grow) 금지 + 합리적 최대폭만 허용 (≈130% 확대) */
#wm-random-strip .meta {
  flex: 0 1 auto;
  min-width: 0;
  max-width: clamp(338px, 62vw, 832px);
  /* 260→338, 48vw→62vw, 640→832 */
}


/* 기본 제목: 한 줄 + … 처리 (마키가 없을 때) */
#wm-random-strip .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 길면 흐르게: JS가 .has-marquee를 붙이고 내부에 트랙을 주입 */
#wm-random-strip .title.has-marquee {
  position: relative;
  overflow: hidden;
}

#wm-random-strip .title.has-marquee .wm-marquee {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}

#wm-random-strip .title.has-marquee .wm-marquee__track {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: wm-random-title-marquee 12s linear infinite;
  padding-left: 48px;
  /* 시작 여백 */
}

@media (prefers-reduced-motion: reduce) {
  #wm-random-strip .title.has-marquee .wm-marquee__track {
    animation: none;
  }
}

@keyframes wm-random-title-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}