@font-face {
  font-family: 'GmarketSansMedium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
}
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-jp.css");
@font-face {
  font-family: 'Lanapixel';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2506-1@1.0/LanaPixel.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}

:root {
  --music-default-point: var(--effect-point);
  --music-default-base: var(--effect-point3);
  --music-default-text: var(--effect-point2);
  --music-point: var(--music-default-point);
  --music-base: var(--music-default-base);
  --music-text: var(--music-default-text);
}

/* 플레이어 전체 컨테이너 */
.bgm-player {
  position: fixed;
  left: 0;
  bottom: 40px;
  z-index: 9999;
  display: flex;
  align-items: center;
  transition: transform 0.4s ease;
}

/* 접힌 상태: 플레이어가 왼쪽으로 숨음, 탭만 노출 */
.bgm-player.collapsed {
  transform: translateX(calc(-100% + 24px));
}

/* 탭 버튼 (항상 보임) */
.bgm-tab {
  width: 24px;
  height: 60px;
  background: var(--music-base, #333);
  color: var(--music-point, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 0 8px 8px 0;
  flex-shrink: 0;
  order: 2; /* 플레이어 오른쪽에 위치 */
  z-index: 1;
}
.bgm-tab .material-icons {
  font-size: 16px;
  color: var(--music-point, #fff);
}

/* 뮤직 플레이어 본체 */
.music-player {
  position: relative;
  overflow: hidden;
  border-radius: 0 16px 16px 0;
  padding: 3px;
  background: linear-gradient(45deg, var(--gradient-start, #444), var(--gradient-end, #888));
  order: 1;
/*  cursor: grab; */
}
.music-player:active {
  cursor: grabbing;
}

/* 블러 배경 */
.player-bg {
  position: absolute;
  inset: 0;
  background-image: var(--bgm-thumb-url);
  background-size: cover;
  background-position: center;
  filter: blur(10px);
  transform: scale(1.5);
  z-index: 0;
}

/* 내부 컨텐츠 */
.player-content {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0 14px 14px 0;
  padding: 12px 16px 12px 12px;
  gap: 12px;
  width: 230px;
  height: 110px;
}

/* LP판 영역 */
.lp-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}

/* LP판 디스크 */
.lp-disc {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    #222 18%,
    #111 20%,
    #1a1a1a 22%,
    #111 30%,
    #1a1a1a 35%,
    #111 40%,
    #1a1a1a 45%,
    #111 50%,
    #1a1a1a 55%,
    #111 60%,
    #1a1a1a 65%,
    #111 70%,
    #1a1a1a 80%,
    #111 100%
  );
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

/* LP 회전 애니메이션 */
.lp-disc {
  transition: none;
}

/* LP 가운데 썸네일 */
.lp-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #333;
  position: absolute;
  z-index: 1;
}

/* 톤암 */
.lp-arm {
  position: absolute;
  top: -4px;
  right: -10px;
  width: 6px;
  height: 40px;
  background: #ccc;
  border-radius: 3px;
  transform-origin: top right;
  transform: rotate(-10deg);
  transition: transform 0.5s ease;
  z-index: 2;
}
/* 재생 중일 때 톤암이 LP판 위로 이동 */
.lp-disc.playing ~ .lp-arm,
.lp-wrap.playing .lp-arm {
  transform: rotate(35deg); /* 재생 상태: LP판 위 */
}

/* 오른쪽 곡 정보 영역 */
.music-ui {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 3px 0px 0px 13px;
}

.songtitle {
  font-size: 13px;
  font-family: 'Lanapixel';
  color: var(--music-point, #fff);
  word-break: break-all;
  /* white-space: nowrap; */
  overflow: hidden;
  /* text-overflow: ellipsis; */
}
.songartist {
  font-size: 11px;
  font-family: 'Pretendard', sans-serif;
  color: var(--music-text, #ccc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 컨트롤 버튼 */
.music_ctl {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  bottom: 14px;
  right: 7px;
}
.music_ctl a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 2px 14px;
  transition: background 0.2s ease;
}
.music_ctl a:hover {
  background: rgba(255,255,255,0.3);
}
.music_ctl i {
  font-size: 11px;
  width: 11px;
  color: var(--music-point, #fff);
  cursor: pointer;
  transition: transform 0.2s ease;
  text-align: center;
}
.music_ctl .fa-circle-play,
.music_ctl .fa-circle-pause {
  font-size: 20px !important;
}

/* 볼륨 슬라이더 */
#volume-window {
  display: none;
  position: absolute;
  right: -30px;
  top: 10px;
  width: 19px;
  height: 94px;
  background: var(--music-base);
  border-radius: 5px;
  z-index: 2;
  align-items: center;
  justify-content: center;
}
#YouTube-player-volume {
  transform: rotate(-90deg);
  width: 90px;
}

@media (max-width: 768px) {
  .bgm-player {
    bottom: 20px;
  }
}