@font-face {
  font-family: 'GmarketSansMedium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  --music-base: #ffffff;
  --music-text: #000000;
  --title: 'Pretendard';
}

.hidden { display:none; }

.bark-front-2 {position: absolute; top: 20px; right: 20px; display:grid;grid-template-columns:200px 150px;box-shadow:0px 0px 150px 10px rgba(245,245,245,.5);border-radius:10px;overflow:hidden; border:1px solid #000}
.bark-left { background-color:#333;height:200px;position:relative; }
.bark-left-img { height:100%;width:100%;background:var(--color-point));mix-blend-mode:lighten;position:absolute; }
.bark-left-img div { height:100%;width:100%;background-size:cover;background-position:center; }
#bark-left-songs { position:relative;padding:20px;color:#eee;}
#bark-left-songs > span {line-height:1;text-shadow:2px 2px 6px rgba(40,40,40,.5); font:900 18px var(--title)}
.bark-songs { font:800 11px var(--title);text-transform:uppercase;line-height:17px;letter-spacing:.65px;color:var(--color-point);cursor:default;transition:.3s;padding-left:0px;text-shadow:2px 2px 6px rgba(40,40,40,.5); }
.bark-songs:hover, .bark-songs.active { color:#eee;padding-left:5px;opacity:1; }

.bark-right { background-color:#e3e3e3;position:relative;overflow:hidden; }
@keyframes ROUND {
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
.bark-record { height:150px;width:150px;border-radius:100%;position:absolute;top:10px;left:-75px;background-color:#d9d9d9;overflow:hidden;display:flex;align-items:top;justify-content:right;
box-shadow:0px 0px 0px 2px #eeeeee,
0px 0px 55px rgba(0,0,0,.2),
inset 0px 0px 0px 10px #d9d9d9,
inset 0px 0px 0px 11px #eeeeee,
inset 0px 0px 0px 20px #d9d9d9,
inset 0px 0px 0px 21px #eeeeee,
inset 0px 0px 0px 30px #d9d9d9,
inset 0px 0px 0px 31px #eeeeee,
inset 0px 0px 0px 40px #d9d9d9,
inset 0px 0px 0px 41px #eeeeee,
inset 0px 0px 0px 50px #d9d9d9,
inset 0px 0px 0px 51px #eeeeee,
inset 0px 0px 0px 60px #d9d9d9,
inset 0px 0px 0px 72px #333,
inset 0px 0px 0px 73px #d9d9d9,
inset 0px 0px 0px 75px var(--color-point);
animation:infinite linear 10s ROUND;
animation-play-state: paused;}
.bark-record.rotate { animation-play-state:running; }
.bark-record::before { content:'';display:block;position:absolute;height:0px;width:0px;border-left:solid 75px rgba(255,255,255,.15);border-top:solid 75px transparent;border-bottom:solid 150px transparent;margin-top:-150px;mix-blend-mode:overlay; }
.bark-record::after { content:'';display:block;position:absolute;height:0px;width:0px;border-right:solid 75px rgba(255,255,255,.15);border-top:solid 150px transparent;border-bottom:solid 75px transparent;margin:75px 75px 0px 0px;mix-blend-mode:overlay; }
.bark-music { position:relative;z-index:1; }
.bark-music-misc { display:flex;background-color:#333;gap:5px;padding:8px 10px;color:#d9d9d9;height:15px;font:700 12px var(--body);text-transform:uppercase;letter-spacing:2px;line-height:15px; font-size: 9px;}
.bark-music-misc i { font-size:12px;color:var(--color-point);cursor:pointer; }
.bark-music-song { padding:15px 15px 0px 15px; }
#bark-music-img { background-color:#333;border-radius:6px;height:65px;width:65px;margin:0px auto; }
#bark-music-img > div {border-radius: 5px;}
#songtitle { font:800 13px var(--title);text-transform:uppercase;background:var(--color-point);background-clip:text;-webkit-background-clip:text;color:transparent;line-height:1;text-align:center;display:flex;align-items:center;justify-content:center;margin:15px 0px 8px 0px; -webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;}
#artistname { font:900 17px var(--title);text-transform:uppercase;color:#333;line-height:15px;text-align:center;margin:0px; }
.bark-music-bot { padding:0px 50px;display:flex;gap:8px;justify-content:center; }
.bark-music-bot button { border-radius:0px;border:none;background-color:transparent;transition:.3s; }
.bark-music-bot button:hover { transform:scale(1.25);cursor:pointer; }
.bark-music-bot i { font-size:14px;color:#333; }
.bark-music-bot button i { opacity:1!important;background:var(--color-point);background-clip:text;-webkit-background-clip:text;color:transparent; }

#music-y-thumb {width: 100%; height: 100%; background-size: cover; background-position: center center; filter: grayscale(1); transition: all 0.3s;}
#music-y-thumb:hover {filter: grayscale(0);}
.music-list {height: 120px; overflow-y: auto; margin-top: 10px; text-shadow: 1px 1px 4px rgba(40,40,40,.5);}
.music-list::-webkit-scrollbar {display: none;}

.bark-music .progress {margin-top: 8px; text-align: center;}
.bark-music .progress #player-progress {height: 6px; background: #666; border-radius: 5px; width: 120px;}

input[type='range'] {
    /* 기본 슬라이더 스타일 초기화 */
    -webkit-appearance: none;
    width: 100%; /* 슬라이더의 너비 */
    height: 3px; /* 트랙의 높이 */
    background: linear-gradient(to right, var(--color-point) 0%, gray 0%);
    border-radius: 2px;
    filter: drop-shadow(0px 0px 2px rgba(6, 17, 29, 0.1));
    outline: none;
  }
  
  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: var(--color-point);
    width: 10px;
    height: 10px;
    border: 1px solid var(--music-base);
    border-radius: 50%;
    cursor: pointer;
  }
  
  input[type='range']::-moz-range-thumb {
    background-color: var(--color-point);
    width: 10px;
    height: 10px;
    border: 1px solid var(--music-base);
    border-radius: 50%;
    cursor: pointer;
  }
  
  input[type='range']::-ms-thumb {
    background-color: var(--color-point);
    width: 10px;
    height: 10px;
    border: 1px solid var(--music-base);
    border-radius: 50%;
    cursor: pointer;
  }