@charset "utf-8";
@import url("https://cdn.jsdelivr.net/npm/noto-sans-kr@0.1.1/styles.min.css");

body {
    font-family: "Noto Sans Korean", sans-serif;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background-color: #f6f6f6;
    margin: 0;
    
    user-select: none; /* 텍스트 선택 비활성화 */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

ul {
    list-style:none;
}

.player {
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 0 0 20px 20px;
    /*overflow: hidden;*/
    width: 90%;
    text-align: center;
    max-width:450px;
}

.now-playing {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 10px;
    font-size:20px;
    font-weight: bold;
    height:60px;
}

#nowPlaying {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-word;     
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; 
    white-space: pre-wrap;
    width:100%;
    background: linear-gradient(rgba(999, 999, 999, 0.97), rgba(999, 999, 999, 0.97)), url('/images/2022/logo.jpg') no-repeat;
}
.audio-list {
    padding: 10px;
    width:90%;
    color:#666;
    max-width:450px;
}
.audio-list .plist { font-size:13px; font-weight: bold; border-bottom:1px solid #e5e5e5; margin:0; padding:10px 0; }
.audio-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.audio-list li {
    padding: 0 10px;
    font-size:13px;
    cursor: pointer;
    border-bottom:1px solid #e5e5e5;
    height:50px;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.audio-list li span.tit {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-word;     
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: pre-wrap;
}

.audio-list li:hover {
    background-color: #f0f0f0;
}

.audio-list .playing {
    font-weight: bold;
    color: #444;
}
.audio-list .ptime { color:#c3c3c3; padding-left:10px; }

.controls {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
}

.controls button {
    background-color: #fff;
    color: #c3c3c3;
    font-size:12px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
}

.controls button:hover {
    color: #444;
}

.progress-container {
    width: 100%;
    background-color: #e5e5e5;
    height: 5px;
    position: relative;
    cursor: pointer;
    margin-bottom: 10px;
    margin-top:15px;
}

.progress-bar {
    width: 0;
    height: 100%;
    background:linear-gradient(to right, #1fb5f1, #2ae8ba);
    position: absolute;
}

.time-info {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: #444;
}

.bgBtn {
    width: 38px; height: 38px;
    border-radius: 19px;
    background:linear-gradient(to right, #1fb5f1, #2ae8ba);
    display:flex;
    justify-content: center;
    align-items: center;
}

.flex210 {
    flex:2 1 0;
    display:flex;
    justify-content: space-evenly;
    align-items: center;
}
.flex110 {
    flex:1 1 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

a svg:hover .hoverbtn {
    fill:#444;
    cursor:pointer;
}
.alllistBtn {
    font-size: 13px;
    color: #c3c3c3;
    text-decoration: none;
    padding: 5px;
    border: 1px solid #e5e5e5;
    background: #fff;
    box-sizing: border-box;
}
.alllistBtn:hover {
    color:#444;
}
.rightbtn {
    display:flex; justify-content: flex-end; margin-top:10px;
}

.volsect { position:relative; }
.volarea { position:absolute; top:30px; right:0; width:100px; background-color:#e5e5e5; height:5px; cursor:pointer; }
.volbar { position:absolute; width:50%; height:100%; background: linear-gradient(to right, #1fb5f1, #2ae8ba); }

.area-custom-select {
    position: relative;
  }
  
  .custom-select {
    background-color: #fff;
    box-sizing: border-box;
    font-size: 12px;
    color: #c3c3c3;
    cursor: pointer;
    position: relative;
    outline: 0px;
  }
  
  .select-origin {
    display:none;
    position: absolute;
    right: 10px;
  }
  
  .custom-select-list {
    position: absolute;
    font-size: 12px;
    color: #c3c3c3;
    line-height:24px;
    padding:0 10px;
    z-index: 15;
    border: solid 1px #e5e5e5;
    background-color: #ffffff;
    box-sizing: border-box;
    padding-inline-start:10px;
  }
  
  .custom-select-option {
    cursor: pointer;
    box-sizing: border-box;
  }
  
  .custom-select-option:hover {
    color: #444;
    box-sizing: border-box;
  }
  .custom-select:hover {
    color:#444;
  }
  
#timeInfo {
    pointer-events: none;
}

.info-message {
	text-align: center;
}

.top-info { background:#f6f6f6; font-size:16px; font-weight:normal; color:#666; padding:10px; border-radius:10px; }

.podcast-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  border: 0;
  padding: 10px 50px;
  background: linear-gradient(to right, #1fb5f1, #2ae8ba);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  gap: 10px;
  border-radius: 999px;
}