@font-face{ font-family:'NEXON Lv1 Gothic OTF'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');}
*{
-webkit-tap-highlight-color: transparent;
font-family:"NEXON Lv1 Gothic OTF","Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free","NEXON Lv1 Gothic OTF",sans-serif;
}
body{
margin:10px;
padding:0px;
-ms-user-select:none;
-moz-user-select:-moz-none;
-webkit-user-select:none;
-khtml-user-select:none;
user-select:none;
}
::-webkit-scrollbar {display: none;}
ul{
list-style:none;
margin:0px;
padding:0px;
}
a{
text-decoration:none;
}
.custom-btn {
 color: #fff;
 border-radius: 5px;
 padding: 7px 20px 4px;
 margin: 3px;
 background: transparent;
 cursor: pointer;
 transition: all 0.3s ease;
 position: relative;
 display: inline-block;
 line-height: normal;
 vertical-align: middle;
 box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
 7px 7px 20px 0px rgba(0,0,0,.1),
 4px 4px 5px 0px rgba(0,0,0,.1);
 outline: none;
}
.btn-10 {
background-color: #1fd1f9;
background: linear-gradient(315deg, #1fd1f9 0%, #b621fe 100%);
font-size: 0.95rem;
 color: #fff;
 border: none;
 transition: all 0.3s ease;
 overflow: hidden;
}
.btn-10:after {
 position: absolute;
 content: " ";
 top: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 100%;
 transition: all 0.3s ease;
 -webkit-transform: scale(.1);
 transform: scale(.1);
}
.btn-10:hover {
 color:#00ffff !important;
 font-weight:700;
 border: none;
 background: transparent;
}
.btn-10:hover:after {
color: #fff;
background-color: #1fd1f9;
background: linear-gradient(315deg, #1fd1f9 0%, #b621fe 100%);
 -webkit-transform: scale(1);
 transform: scale(1);
}

#audioPlayer {
width: 100%;
}
#playStatus, #totalTime, #Time {
display: inline-block;
}
#currentTime {
font-weight: 700;
}
.lyric-line {
display: flex;
align-items: center;
margin-top: 5px;
}
.lyric-line button {
margin-left: 10px;
}
#output {
margin-top: 20px;
white-space: pre-line; /* ÁÙ ¹Ù²Þ À¯Áö */
}
#lyricsTextArea, #mydata, #output {
width: 100%;
height: auto;
padding: 10px;
box-sizing: border-box;
border: solid 2px #1E90FF;
border-radius: 5px;
font-size: 0.85rem;
resize: both;
}
#output {
margin-bottom: 20px;
}
#lyricList button {
  width: 180px;
  overflow: hidden
  text-overflow: ellipsis;
  white-space: nowrap;
}
#lyricList span {
width: calc(100% - 180px);
}
.filebox{
position:relative;
margin-top: 7px;
margin-left: 7px;
}
.filebox input[type="file"] {
position: absolute;
width: 0px;
height: 0px;
padding: 0;
margin: 0px;
overflow: hidden;
clip:rect(0,0,0,0);
border: 0;
}
.filebox .upload-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
top:3px;
left:157px;
width: calc(100% - 180px);
font-size: 0.95rem;
font-weight:600;
color: #123456;
padding:6px 10px 4px;
margin:0px;
line-height: normal;
vertical-align: middle;
background-color: #FFF;
border:1px solid #eee;
border-radius: .25em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.upload-name2 {
width: 100%;
height:auto;
padding: 10px;
box-sizing: border-box;
border: solid 2px #1E90FF;
border-radius: 5px;
font-size: 0.95rem;
}
#generateLyrics{
margin-left:10px;
}

.centered-audio {
height:50px;
border-radius:30px;
overflow: hidden;
}
.dspTime{
font-size: 0.95rem;
padding: 0px;
margin: 7px;
}
#smartWeb{
width:calc(100% - 10px);
height:60px;
background:#000;
padding:5px;
margin:5px auto;
position:relative;
}
#smartWeb > div > audio{
width:0%;
background:#000;
float:left;
}
#smartWeb > canvas{
width: 100%;
height: 60px;
background: #002D3C;
text-align:center;
background-image: url('/home/img/wall-1532785_1280.webp');
background-size: 100% auto;/*cover*/
background-repeat: no-repeat;
background-position: center;
}
#myProgress {
position: relative;
overflow: hidden;
width:calc(100% - 4px);
height:4px;
background-color: #246a91;
cursor: pointer;
border: 2px dotted green;
border-radius:3px;
margin:0px;
padding:0px;
z-index:9;
}
#myBar {
width: 0%;
height: 4px;
background-color: #FFF000;
border-radius: 2px;
margin:0px;
padding:0px;
z-index:9;
}
.button-i{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 cursor: pointer;
 font-size:2.5rem;
 font-weight:600;
 color: rgba(255,255,255,0.5);
 z-index:999;
}
.hidden { display: none; }
#currentTime2{
 position: fixed;
 top:50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 7rem;
 color:#FFF;
 font-weight:900;
 text-shadow:0px 0px 10px rgba(0,0,0,0.4);
 z-index:9999;
}
.margin-left{
margin-left:10px;
margin-bottom:20px;
}
.top10{
margin-top:10px;
}
.spantxt{
margin-left:10px;
}
.button-container {
  display: flex; /* ¹öÆ°µéÀ» °¡·Î·Î Á¤·Ä */
  /* justify-content: center; Áß¾Ó Á¤·Ä */
  gap: 10px; /* ¹öÆ° »çÀÌÀÇ °£°Ý Á¶Á¤ */
  margin-top: 5px; /* À§ÂÊ ¿©¹é */
}