/* assets/css/site_music.css */
/* 홈페이지 배경 음악 버튼 */

.site-music-player{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:9997;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background:rgba(5,7,12,0.92);
  border:1px solid rgba(255,204,50,0.42);
  box-shadow:0 10px 28px rgba(0,0,0,0.45);
  backdrop-filter:blur(4px);
}

.site-music-toggle,
.site-music-mini{
  border:1px solid rgba(255,204,50,0.45);
  background:rgba(255,204,50,0.08);
  color:#ffd24a;
  border-radius:999px;
  min-height:30px;
  cursor:pointer;
  font-weight:900;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.site-music-toggle{
  gap:6px;
  padding:0 10px;
}

.site-music-mini{
  width:30px;
  min-width:30px;
  padding:0;
}

.site-music-toggle:hover,
.site-music-mini:hover{
  filter:brightness(1.12);
}

.site-music-player.is-playing .site-music-toggle{
  border-color:rgba(95,211,111,0.55);
  color:#85ff98;
}

.site-music-player.is-waiting .site-music-toggle{
  animation:siteMusicPulse 1.6s infinite;
}

@keyframes siteMusicPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,210,74,0.35); }
  70%{ box-shadow:0 0 0 9px rgba(255,210,74,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,210,74,0); }
}

@media (max-width: 767.98px){
  .site-music-player{
    right:10px;
    bottom:10px;
    padding:5px;
  }

  .site-music-toggle{
    min-height:28px;
    padding:0 8px;
    font-size:11px;
  }

  .site-music-mini{
    width:28px;
    min-width:28px;
    min-height:28px;
  }
}


/* -------------------------------------------------------------
   홈페이지 음악 유저 컨트롤 패치
   - 작고 고급스럽게 재생/정지, 음소거, 볼륨 조절 제공
   - 기본은 작게 보이고, 마우스를 올리면 볼륨 슬라이더가 자연스럽게 펼쳐짐
------------------------------------------------------------- */
.site-music-player{
  right:16px !important;
  bottom:16px !important;
  gap:5px !important;
  padding:5px !important;
  border-radius:999px !important;
  background:rgba(3,5,10,0.94) !important;
  border:1px solid rgba(255,210,74,0.40) !important;
}

.site-music-toggle{
  min-height:28px !important;
  padding:0 9px !important;
  gap:5px !important;
  font-size:11px !important;
  line-height:1 !important;
}

.site-music-mini{
  width:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  height:28px !important;
  font-size:11px !important;
}

.site-music-volume{
  width:28px;
  min-width:28px;
  height:28px;
  border:1px solid rgba(255,210,74,0.38);
  background:rgba(255,210,74,0.07);
  color:#ffd24a;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  overflow:hidden;
  transition:width .18s ease, padding .18s ease, background .18s ease;
  box-sizing:border-box;
}

.site-music-volume:hover,
.site-music-player.is-volume-open .site-music-volume{
  width:112px;
  padding:0 8px;
  justify-content:flex-start;
  background:rgba(255,210,74,0.11);
}

.site-music-volume i{
  font-size:11px;
  flex:0 0 auto;
}

.site-music-volume input[type="range"]{
  width:72px;
  min-width:72px;
  height:4px;
  accent-color:#ffd24a;
  cursor:pointer;
  opacity:0;
  transition:opacity .15s ease;
}

.site-music-volume:hover input[type="range"],
.site-music-player.is-volume-open .site-music-volume input[type="range"]{
  opacity:1;
}

.site-music-player.is-muted .site-music-toggle,
.site-music-player.is-muted .site-music-mini,
.site-music-player.is-muted .site-music-volume{
  color:#a7b0c2;
  border-color:rgba(167,176,194,0.32);
}

.site-music-player.is-playing .site-music-toggle{
  color:#85ff98 !important;
  border-color:rgba(95,211,111,0.55) !important;
}

.site-music-player.is-playing .site-music-toggle i{
  color:#85ff98 !important;
}

@media (max-width: 767.98px){
  .site-music-player{
    right:10px !important;
    bottom:10px !important;
    padding:4px !important;
    gap:4px !important;
  }

  .site-music-text{
    display:none;
  }

  .site-music-toggle{
    width:28px !important;
    min-width:28px !important;
    padding:0 !important;
  }

  .site-music-volume:hover,
  .site-music-player.is-volume-open .site-music-volume{
    width:98px;
    padding:0 7px;
  }

  .site-music-volume input[type="range"]{
    width:60px;
    min-width:60px;
  }
}


/* -------------------------------------------------------------
   음악 컨트롤 표시 위치 보정 패치
   - 우측 하단 GM 문의 버튼과 겹치지 않도록 좌측 하단으로 이동
   - 다른 팝업/채팅 버튼보다 위에 보이도록 z-index 보정
------------------------------------------------------------- */
.site-music-player{
  left:16px !important;
  right:auto !important;
  bottom:16px !important;
  z-index:10080 !important;
}

@media (max-width: 767.98px){
  .site-music-player{
    left:10px !important;
    right:auto !important;
    bottom:10px !important;
    z-index:10080 !important;
  }
}


/* -------------------------------------------------------------
   접속 즉시 자동재생 시도 상태 표시
------------------------------------------------------------- */
.site-music-player.is-autoplay-blocked .site-music-toggle{
  color:#ffd24a !important;
  border-color:rgba(255,210,74,0.65) !important;
  animation:siteMusicPulse 1.4s infinite;
}