/* SAR 수정 - 24.10.02*/

@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;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ebgaramond/v27/SlGUmQSNjdsmc35JDF1K5GR1SDk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-jp.css");

:root {
  --music-default-point:#8BABFF;
  --music-default-base:#fff;
  --music-default-text:#B5B5B5;
  --music-point: #A2BCFF;
  --music-base: var(--music-default-base);
  --music-text: var(--music-default-text);
  
}

body #bgm_box {padding-top:0;}

html.single #bgm_box .bgm-player {display:block !important;}


/* 커서 설정 */
.music-player {
  cursor: grab;
}
.music-player:active {
  cursor: grabbing;
}
.music-player a,.music-player p {
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
}


/* 뮤직 플레이어 설정 */
.music-player {
    opacity: 0.9;
    width: 235px;
    height: 150px;
    background: transparent /*var(--music-base)*/;
    box-sizing: border-box;
    border-radius: 5px;
    position: fixed;
    padding: 7px;
    left: 22px;
    top: 22px;
    /*border: 1px double var(--music-point);*/
    overflow: hidden;
    transition-property: height;
    transition-duration: 1s;
}
.music-player:hover { opacity: 1; }
.music-thumb {
  top: 0px;
  right: 0px;
  width: 113px;
  height: 113px;
  display: block;
  position: absolute;
  /*mask-image: linear-gradient(180deg, black, black, #00000000);
  -webkit-mask-image: linear-gradient(180deg, black, black, #00000000);*/
  background: transparent center no-repeat;
  pointer-events: none;
  background-size: 145%;
  animation: rotate linear 20s infinite paused;
    /*
    transition: 1s;
    transition-property: background-size, height;
    image-rendering: -webkit-optimize-contrast;*/
}
.music-thumb::after{
    content: "";
    width: 113px;
    height: 113px;
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 9;
    border-radius: 100%;
    box-sizing: border-box;
}
.music-thumb::before{
    /*content:template.bgm에 가변 정의*/
    width: 113px;
    height: 113px;
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 8;
    border-radius: 100%;
}
.music-thumb.active {
  animation:rotate linear 20s infinite;
}
.music-ui {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    padding-left: 30px;
    transition: 1s;
    height: 150px;
    text-align: left;
  /*display: grid;
  align-items: flex-start;
  grid-template-rows: auto min-content 50px;*/

}
#player-infos1,
#player-infos2 {
    text-align: center;
    font-size: 11px;
    display: inline-block;
    color: var(--music-text);
}
#play-text {
    display: block;
    height: 15px;
    color: var(--music-text);
}
.music-ui p>img {
    pointer-events: none;
}
#songtitle {
    display: inline-block;
    color: var(--music-text);
    width: 100%;
    overflow: hidden;
    font-size: 15px;
    font-family:'EB Garamond';
    word-break: keep-all;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: -1px -1px 2px white, 1px -1px 2px white, -1px 1px 2px white, 1px 1px 2px white;
}
#songt_box{
    position: relative;
    width: 140px;
    margin: 59px 0 7px 0;
}
#songt_box::before{
    width: 160px;
    height: 43px;
    display: block;
    position: absolute;
    top: -37px;
    left: -20px;
    transition: 0.3s;
}
#songt_box:hover::before{
    top: -34px; transition: 0.1s;
}
#songt_box::after{
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    position: absolute;
    top: -4px;
    left: 0px;
    background: linear-gradient(to right, #adc4ff, #79EBFF);
}
#player-infos { height: 16px; }

/*아이콘*/
.music-player .material-icons {
    color: var(--music-point);
    font-size: 18px;
    margin-left: -7px;
}
.player_detail { margin-top: 7px; }
.player_btn { display:none; }
.player_btn.active { display:inline-block; }
.player_btn > a { margin-right: 2px; }

.music-list {
    top: 150px;
    position: absolute;
    text-align: center;
    width: 100%;
    left: 0px;
    height:240px;
    overflow:auto;
    padding:5px 5px 30px 5px;
    box-sizing: border-box;
    transition: 1s;
    background: #fff;
    border-radius: 10px;
    mask-image: linear-gradient(180deg, black, black, #00000000);
  -webkit-mask-image: linear-gradient(180deg, black, black, #00000000);
}
.music-list::-webkit-scrollbar {display: none;}/*투명스크롤*/
.music-list.active {/*top:230px;*/ height:160px; }
/* .music-ui.active {
  top: 90px;
}*/
.listmusic {
    display: block;
    padding: 3px;
    margin: 4px;
    border-radius: 7px;
    color: var(--music-text);
	/*font-family:'Pretendard JP Variable';   */ 
    font-family: var(--base-font-eng);
}

.listmusic:hover {
  background: var(--music-point);
  color: var(--music-base);
}

.listmusic.active {
  background: var(--music-point);
  color: var(--music-base);
}

/* 재생 위치 바 설정 */
input[type='range']{ /* range 타입 = 재생바,볼륨바 */
  background:transparent;
    width: calc(100% - 95px);
}
.player-progress.active {
    width: calc(100% - 120px);
    margin-right: 7px;
}  
  input[type='range']:focus {
    outline: none;
  }
  /* Primero quitamos el estilo por defecto que tiene el input */
  input[type='range'],
  input[type='range']::-webkit-slider-runnable-track,
  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
  }
  /* Estilo del thumb para webkit */
  input[type=range]::-webkit-slider-thumb {
    opacity: 0.7;
    background-color: #fff;
    width: 5px;
    height: 5px;
    /*border: 1px solid var(--music-base);*/
    border-radius: 100%;
    margin: 1px;
  }
  /* Estilo del thumb para moz */
  input[type=range]::-moz-range-thumb {
    opacity: 0.7;
    background-color: #fff;
    width: 5px;
    height: 5px;
    /*border: 1px solid var(--music-base);*/
    border-radius: 100%;
    margin: 1px;
  }
  /* Estilo para el thum para ms */
  input[type=range]::-ms-thumb {
    opacity: 0.7;
    background-color: #fff;
    width: 5px;
    height: 5px;
    /*border: 1px solid var(--music-base);*/
    border-radius: 100%;
    margin: 1px;
  }
  /* El estilo del track para webkit */
  input[type=range]::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #ADC4FF 30%, #79EBFF) /*var(--music-point)*/ ;
    height: 7px;
    border-radius:4px;
    /*filter: drop-shadow(0px 0px 2px rgba(6, 17, 29, 0.1))*/
  }
  
  input[type=range]:focus::-webkit-slider-runnable-track {
    outline: none;
  }
  /* Estilo de track para mox */
  input[type=range]::-moz-range-track {
    background-color: gray;
    height: 3px;
  }
  /* Estilo del track para ms */
  input[type=range]::-ms-track {
    background-color: gray;
    height: 3px;
  }
  
  input[type=range]::-ms-fill-lower {
    background-color:gray;
  }
  
  input[type=range]::-ms-fill-upper {
    background-color: gray;
  } 
  /* 볼륨 바 */
  #volume-window {
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 19px;
    height: 94px;
    background: transparent;
    border-radius: 5px;
    z-index: 2;
    top: 30px;
    right: 35px;
  }
  #YouTube-player-volume {
    rotate: -90deg;
    left: 0;
    top: 0;
    position: relative;
    padding: 0px;
    margin: 0px;
    width: 95px;
    padding: 9px 0px;
  }


/* animation */
@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}