@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');}
*{padding:0;margin:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;}
*,:after,:before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html, body {
height: 100%;
border-radius: 0 !important;
}
body {
background: #010101;
overflow: hidden;
font-family: "NEXON Lv1 Gothic OTF","Josefin Sans", sans-serif;
}
/* 배경 슬라이드쇼 레이어 (JS: bg_slideshow.php 에서 이미지 목록/전환을 제어) */
.bg-layer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index: -1;
opacity: 0;
transition: opacity 2.5s ease-in-out;
}
canvas {
/*background-image: url("https://cdn.pixabay.com/photo/2023/07/18/16/40/musical-notes-8135228_1280.png");*/
background-color: rgba(0, 0, 0, 0);
background-size: cover;/*contain cover*/
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
mix-blend-mode: screen;
/*background-color: rgba(0, 0, 0, 0);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: bottom left;
background-attachment: fixed;*/
}
a {
text-decoration: none;
-webkit-tap-highlight-color : transparent;
}
a, button, input, label {
outline: none;
}
#lbl-menu-toggle {
position: fixed;
top: 20px;
left: 20px;
z-index: 2;
display: block;
width: 24px;
height: 20px;
cursor: pointer;
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
}
#lbl-menu-toggle.hidden {
opacity: 0;
-webkit-transform: translateY(-10px) translateZ(0);
transform: translateY(-10px) translateZ(0);
}
#lbl-menu-toggle .bar {
position: absolute;
display: block;
height: 2px;
width: 100%;
background-color: #ffb300;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}
#lbl-menu-toggle .bar.line:first-of-type {
top: 2px;
-webkit-transform-origin: right center;
transform-origin: right center;
transition-delay: 0.1s;
}
#lbl-menu-toggle .bar.cross {
top: 8px;
-webkit-transform-origin: center center;
transform-origin: center center;
}
#lbl-menu-toggle .bar.line:last-of-type {
top: 14px;
-webkit-transform-origin: left center;
transform-origin: left center;
transition-delay: 0.1s;
}
#ui-drawer {
position: absolute;
top: 0;
left: 0;
height: calc(100vh - 65px);
width: 100vw;
max-width: 100%;
min-width: 280px;
padding-top: 50px;
box-sizing: border-box;
font-family: "Josefin Sans", sans-serif;
background: rgba(34, 34, 34, 0.8);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
overflow-y: auto;      /* hidden → auto */
overflow-x: hidden;    /* 가로 스크롤은 계속 방지 */
opacity: 0;
pointer-events: none;   /* 추가 */
-webkit-transform: translateX(-40.15vw) translateZ(0);
transform: translateX(-40.15vw) translateZ(0);
transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s;
}
#ui-drawer .drawer-folder__label {
position: relative;
z-index: 2;
padding: 7px 30px 7px 30px;
color: #ffb300;
background: rgba(51, 51, 51, 0.8);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#visuals-panel {
position: fixed;
top: 50px;
left: 20px;
z-index: 2;
background: rgba(51, 51, 51, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#visuals-panel {
position: fixed;
top: 50px;
left: 20px;
z-index: 2;
font-family: "Josefin Sans", sans-serif;
background: rgba(51, 51, 51, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
transition: opacity 0.3s;   /* 추가 */
border-radius:0 10px 10px 0;
}
#chk-menu-toggle:checked ~ #visuals-panel {
opacity: 0;
pointer-events: none;
}
#visuals-panel .drawer-folder__option {
position: relative;
}
#visuals-panel .drawer-folder__option .option__label {
position: relative;
width: 100%;
display: block;
padding: 10px;
font-size: 0.75rem;
color: white;
box-sizing: border-box;
cursor: pointer;
transition: background-color 0.3s;
}
#visuals-panel .drawer-folder__option .option__label:hover {
background-color: #2f2f2f;
}
#visuals-panel .drawer-folder__option:not(:last-child) .option__label {
border-bottom: 1px solid #1c1c1c;
}
#visuals-panel .drawer-folder__option .fa {
width: 16px;
margin-right: 10px;
box-sizing: border-box;
color: #6f6f6f;
transition: color 0.3s;
}
#visuals-panel .drawer-folder__option .fa-lightbulb-o {
padding: 0 3px;
}
#visuals-panel .drawer-folder__option .fa-signal {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
#visuals-panel .drawer-folder__option input[type="checkbox"] {
display: none;
}
#visuals-panel .drawer-folder__option input[type="checkbox"]:checked ~ .fa {
color: #ffb300;
}
#sleep-timer-option {
position: relative;
}
.sleep-timer__trigger {
width: 100%;
display: flex;
align-items: center;
background: none;
border: none;
font-family: "NEXON Lv1 Gothic OTF","Josefin Sans", sans-serif;
text-align: left;
}
.sleep-timer__trigger:focus {
outline: none;
}
#sleep-timer-remaining {
font-family: "NEXON Lv1 Gothic OTF","Josefin Sans", sans-serif;
margin-left: auto;
padding-left: 6px;
font-size: 0.75rem;
color: #ffb300;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
#visuals-panel .option--sleep.active .sleep-timer__trigger .fa {
color: #ffb300;
}
#visuals-panel .sleep-timer__trigger .fa-moon-o {
color: #ffb300;
padding-left: 2px;
}
.sleep-timer__popup {
position: fixed;
top: -9999px;
left: -9999px;
width: 240px;
max-width: calc(100vw - 32px);
z-index: 60;
background: linear-gradient(160deg, rgba(38, 32, 20, 0.97), rgba(16, 14, 10, 0.98));
border: 1px solid rgba(232, 184, 75, 0.35);
border-radius: 14px;
padding: 14px;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
backdrop-filter: blur(10px);
opacity: 0;
pointer-events: none;
transform: translateY(-6px) scale(0.96);
transform-origin: top left;
transition: opacity 0.22s ease, transform 0.22s ease;
box-sizing: border-box;
}
.sleep-timer__popup.open {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.sleep-timer__popup-title {
font-size: 0.75rem;
color: rgba(243, 230, 196, 0.75);
text-align: center;
letter-spacing: 0.3px;
margin-bottom: 10px;
}
.sleep-timer__chips {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-bottom: 10px;
}
.sleep-timer__chip {
padding: 7px 4px;
font-size: 0.72rem;
font-family: "NEXON Lv1 Gothic OTF","Josefin Sans", sans-serif;
color: #f3e6c4;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(232, 184, 75, 0.25);
border-radius: 999px;
cursor: pointer;
transition: background-color 0.25s, border-color 0.25s, transform 0.15s, color 0.25s;
}
.sleep-timer__chip:hover {
background: rgba(232, 184, 75, 0.18);
border-color: rgba(232, 184, 75, 0.6);
}
.sleep-timer__chip.active {
background: linear-gradient(135deg, #e8b84b, #c9902c);
border-color: transparent;
color: #1a1408;
font-weight: bold;
transform: scale(1.05);
}
.sleep-timer__custom {
display: flex;
gap: 6px;
margin-bottom: 10px;
}
.sleep-timer__custom input {
flex: 1;
min-width: 0;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(243, 230, 196, 0.2);
border-radius: 8px;
padding: 6px 10px;
color: #f3e6c4;
font-family: "NEXON Lv1 Gothic OTF","Josefin Sans", sans-serif;
font-size: 0.78rem;
outline: none;
transition: border-color 0.2s;
}
.sleep-timer__custom input::placeholder {
color: rgba(243, 230, 196, 0.4);
}
.sleep-timer__custom input:focus {
border-color: rgba(232, 184, 75, 0.7);
}
#sleep-timer-custom-input::-webkit-outer-spin-button,
#sleep-timer-custom-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#sleep-timer-custom-input {
-moz-appearance: textfield;
appearance: textfield;
}
.sleep-timer__custom button {
flex-shrink: 0;
padding: 6px 14px;
border: none;
border-radius: 8px;
background: linear-gradient(135deg, #e8b84b, #c9902c);
color: #1a1408;
font-size: 0.75rem;
font-weight: bold;
cursor: pointer;
transition: filter 0.2s, transform 0.15s;
}
.sleep-timer__custom button:hover {
filter: brightness(1.08);
}
.sleep-timer__custom button:active {
transform: scale(0.95);
}
.sleep-timer__cancel {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px;
background: transparent;
border: 1px solid rgba(255, 138, 138, 0.35);
border-radius: 8px;
color: #ff8a8a;
font-size: 0.72rem;
font-family: "NEXON Lv1 Gothic OTF","Josefin Sans", sans-serif;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s;
}
.sleep-timer__cancel:hover {
background: rgba(255, 138, 138, 0.12);
border-color: rgba(255, 138, 138, 0.6);
}
#app-toast {
position: fixed;
left: 50%;
bottom: 90px;
z-index: 100;
padding: 10px 20px;
background: rgba(20, 16, 8, 0.88);
border: 1px solid rgba(232, 184, 75, 0.5);
border-radius: 999px;
color: #f3e6c4;
font-family: "NEXON Lv1 Gothic OTF","Josefin Sans", sans-serif;
font-size: 0.8rem;
letter-spacing: 0.3px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6px);
transform: translateX(-50%) translateY(12px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
#app-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
#ui-drawer .drawer-folder__option {
position: relative;
}
#ui-drawer .drawer-folder__option .option__sub-menu {
position: relative;
}
#ui-drawer .drawer-folder__option .option__label {
position: relative;
width: 100%;
display: block;
padding: 7px 30px 7px 30px;
font-size: 0.75rem;
color: #FFF;
box-sizing: border-box;
background-color:  rgba(41, 41, 41, 0.8);
transition: background-color 0.3s;
}
#ui-drawer .drawer-folder__option .option__label:not(#track--label) {
cursor: pointer;
}
#ui-drawer .drawer-folder__option .option__label:not(#track--label):hover {
background-color: #2f2f2f;
}
#ui-drawer .drawer-folder__option:not(:last-child) .option__label {
border-bottom: 1px solid #1c1c1c;
}
#ui-drawer .drawer-folder__option .fa {
width: 16px;
margin-right: 10px;
box-sizing: border-box;
color: #6f6f6f;
transition: color 0.3s;
}
#ui-drawer .drawer-folder__option .fa-lightbulb-o {
padding: 0 3px;
}
#ui-drawer .drawer-folder__option .fa-signal {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
#ui-drawer .drawer-folder__option .fa-music, #ui-drawer .drawer-folder__option .fa-plus {
color: #ffb300;
}
#ui-drawer .drawer-folder__option .fa-plus {
margin-right: 0;
}
#ui-drawer .drawer-folder__option #btn-add-track {
position: absolute;
top: 12px;
right: 30px;
}
#ui-drawer .drawer-folder__option #btn-add-track #in-add-track {
display: none;
}
#ui-drawer .drawer-folder__option #btn-add-track #lbl-add-track {
cursor: pointer;
}
#ui-drawer .drawer-folder__option #btn-add-track #lbl-add-track:hover:before {
opacity: 1;
-webkit-transform: translateX(-4px);
transform: translateX(-4px);
}
#ui-drawer .drawer-folder__option #btn-add-track #lbl-add-track:before {
position: absolute;
display: block;
content: "파일불러오기";
white-space: nowrap;
font-size:0.75rem;
padding: 4px 8px 4px 4px;
top: -8px;
right: 14px;
opacity: 0;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
#ui-drawer .drawer-folder__option input[type="checkbox"] {
display: none;
}
#ui-drawer .drawer-folder__option input[type="checkbox"]:checked ~ .fa {
color: #ffb300;
}
#ui-drawer .drawer-folder__option {
height: 100%;
}
#ui-drawer #track-list {
position: relative;
top:0px;
overflow-y: scroll;
max-height: calc(100vh - 145px);
width: 100%;
}
#ui-drawer #track-list .track-option {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 7px 10px 7px 30px;
font-size: 0.85em;
color: white;
background-color:  rgba(34, 34, 34, 0.8);
cursor: pointer;
border-bottom: 1px solid #121212;
transition: background-color 0.3s;
}
#ui-drawer #track-list .track-option:hover {
background-color: #1f1f1f;
}
#ui-drawer #track-list .track-option.active {
color: #ffb300;
font-weight: bold;
background-color: rgba(255,255,255,0.2);
}
#ui-drawer #track-list {
scrollbar-width: thin;
scrollbar-color: rgba(232, 184, 75, 0.55) rgba(255, 255, 255, 0.06);
}
#ui-drawer #track-list::-webkit-scrollbar {
width: 8px;
}
#ui-drawer #track-list::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.06);
border-radius: 999px;
margin: 4px 0;
}
#ui-drawer #track-list::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #e8b84b, #c9902c);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
transition: background-color 0.2s ease;
}
#ui-drawer #track-list::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #f3c968, #d9a13a);
background-clip: padding-box;
}
#ui-drawer #frm-track-title {
position: absolute;
top: 20px;
right: 20px;
width: calc(85% - 60px);
padding: 20px;
background-color: #3f3f3f;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
#ui-drawer #frm-track-title.hidden {
pointer-events: none;
opacity: 0;
-webkit-transform: translateY(-10px) translateZ(0);
transform: translateY(-10px) translateZ(0);
}
#ui-drawer #frm-track-title:before {
position: absolute;
right: 12px;
top: -7px;
display: block;
content: "";
height: 16px;
width: 16px;
background-color: #3f3f3f;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#ui-drawer #frm-track-title #lbl-track-title {
display: block;
margin-bottom: 8px;
color: #ffb300;
}
#ui-drawer #frm-track-title #txt-track-title {
width: 100%;
box-sizing: border-box;
padding: 4px;
border-width: 0 0 1px 0;
border-color: #ffb300;
color: white;
font-family: "NEXON Lv1 Gothic OTF","Josefin Sans", sans-serif;
background-color: transparent;
}
#ui-drawer #frm-track-title #txt-track-title:focus {
outline: none;
}
#ui-drawer #frm-track-title #txt-track-title::-webkit-input-placeholder {
color: #9f9f9f;
}
#ui-drawer #frm-track-title #txt-track-title:-ms-input-placeholder {
color: #9f9f9f;
}
#ui-drawer #frm-track-title #txt-track-title::-moz-placeholder {
color: #9f9f9f;
opacity: 1;
}
#ui-drawer #frm-track-title #txt-track-title:-moz-placeholder {
color: #9f9f9f;
opacity: 1;
}
#ui-drawer #frm-track-title #btn-submit-title {
position: relative;
left: 100%;
padding: 6px 12px;
margin-top: 10px;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
background: transparent;
border: 1px solid #ffb300;
cursor: pointer;
color: white;
font-family: "NEXON Lv1 Gothic OTF","Josefin Sans", sans-serif;
transition: color 0.3s;
}
#ui-drawer #frm-track-title #btn-submit-title:hover, #ui-drawer #frm-track-title #btn-submit-title:hover .fa {
color: #ffb300;
}
#ui-drawer #frm-track-title #btn-submit-title:focus {
outline: none;
}
#ui-drawer #frm-track-title #btn-submit-title .fa {
width: auto;
margin-right: 0;
margin-left: 8px;
color: white;
}
#chk-menu-toggle {
display: none;
}
#chk-menu-toggle:checked + #lbl-menu-toggle .line {
-webkit-transform: scaleX(0);
transform: scaleX(0);
transition-delay: 0;
}
#chk-menu-toggle:checked + #lbl-menu-toggle .cross {
transition-delay: 0.2s;
}
#chk-menu-toggle:checked + #lbl-menu-toggle .cross:nth-of-type(2) {
-webkit-transform: rotate(45deg) scale(0.8);
transform: rotate(45deg) scale(0.8);
}
#chk-menu-toggle:checked + #lbl-menu-toggle .cross:nth-of-type(3) {
-webkit-transform: rotate(135deg) scale(0.8);
transform: rotate(135deg) scale(0.8);
}
#chk-menu-toggle:checked ~ #ui-drawer {
opacity: 1;
pointer-events: auto;   /* 추가 */
-webkit-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0);
}
#ui-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
#btn-initialize {
position: absolute;
top: 50%;
left: 50%;
padding: 0.8em 1em 0.6em 1em;
border: 2px solid;
border-radius: 1.5em;
color: white;
font-family: "NEXON Lv1 Gothic OTF","Josefin Sans", sans-serif;
font-size: 1rem;
cursor: pointer;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
transition: color 0.3s, opacity 0.5s;
}
#btn-initialize:hover {
color: #ffb300;
}
#btn-initialize:active {
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.95);
transform: translateX(-50%) translateY(-50%) scale(0.95);
}
#btn-initialize.disabled {
opacity: 0;
pointer-events: none;
}
#loader {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 50px;
height: 20px;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
transition: opacity 0.5s;
}
#loader.hidden {
opacity: 0;
}
#loader.loading .load-bar {
-webkit-animation: load-bar-animation 1.4s infinite ease-in-out both;
animation: load-bar-animation 1.4s infinite ease-in-out both;
}
#loader .load-bar {
width: 14px;
height: 14px;
flex: none;
background: #FFF;
border-radius: 100%;
opacity: 1;
display: inline-block;
-webkit-transform: scale(0) translateZ(0);
transform: scale(0) translateZ(0);
}
#loader .load-bar:not(:last-child) {
margin-right: 2px;
}
#loader .load-bar:nth-child(1) {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
#loader .load-bar:nth-child(2) {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#loader .load-bar:nth-child(3) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#audio-controls {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
left: 0;
bottom: 0;
width: 100%;
height: calc(70px + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
box-sizing: border-box;
color: #ffb300;
background-color: #0c0c0c;
opacity: 1;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
}
#audio-controls.hidden {
-webkit-transform: translateY(10px);
transform: translateY(10px);
opacity: 0;
}
#audio-controls.disabled {
pointer-events: none;
}
#audio-controls.disabled .fa {
opacity: 0.2;
}
#audio-controls #controls__container {
position: relative;
background-color: #0c0c0c;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
#audio-controls #button-controls {
display: flex;
align-items: center;
justify-content: flex-start;
margin-right: 16px;
}
#audio-controls #button-controls .btn {
display: flex;
align-items: center;
width: 16px;
}
#audio-controls #button-controls .btn:not(:last-child) {
justify-content: center;
margin-right: 20px;
}
#audio-controls #title {
color: #ffb300;
flex: 1;
padding-top: 0px;
padding-left: 0.5em;
padding-right: 0.5em;
font-family: "NEXON Lv1 Gothic OTF","Josefin Sans", sans-serif;
font-size: 0.85rem;
text-align: center;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
white-space: nowrap;
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
#audio-controls #title .title-track {
display: inline-block;
white-space: nowrap;
will-change: transform;
}
#audio-controls #title.marquee {
text-align: left;
}
#audio-controls #title.marquee .title-track {
animation: title-marquee var(--marquee-duration, 12s) ease-in-out infinite;
}
@keyframes title-marquee {
0% { transform: translateX(0); }
8% { transform: translateX(0); }
45% { transform: translateX(var(--marquee-distance, 0px)); }
55% { transform: translateX(var(--marquee-distance, 0px)); }
92% { transform: translateX(0); }
100% { transform: translateX(0); }
}
#audio-controls #seek-bar {
position: absolute;
top: 0;
z-index: 2;
height: 6px;
width: 100%;
background-color: #4f4f4f;
cursor: pointer;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
}
#audio-controls #seek-bar #progress-bar {
height: 100%;
width: 100%;
background: #ffb300;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: center left;
transform-origin: center left;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
}
#audio-controls #btn-prev, #audio-controls #btn-next {
-webkit-transform: scaleX(1.5);
transform: scaleX(1.5);
}
#audio-controls #btn-prev:active, #audio-controls #btn-next:active {
-webkit-transform: scaleY(0.85) scaleX(1.35);
transform: scaleY(0.85) scaleX(1.35);
}
#audio-controls .fa {
cursor: pointer;
transition: opacity 0.3s;
}
#audio-controls .fa:active:not(#icon-volume):not(#btn-prev):not(#btn-next) {
-webkit-transform: scale(0.85);
transform: scale(0.85);
}
#audio-controls #button-controls #volume-control {
position: relative;
display: flex;
align-items: center;
width: auto;
flex-shrink: 0;
}
#audio-controls #icon-volume {
position: relative;
z-index: 2;
display: inline-block;
width: 20px;
text-align: center;
flex-shrink: 0;
}
#audio-controls #volume-control .input-container {
position: absolute;
left: 50%;
bottom: 100%;
margin-bottom: 10px;
width: 32px;
height: 90px;
background: #1c1c1c;
border-radius: 16px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-50%) translateY(6px);
transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
z-index: 3;
}
#audio-controls #volume-control.volume-open .input-container {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
#audio-controls #rng-volume {
-webkit-appearance: none;
appearance: none;
width: 70px;
height: 4px;
transform: rotate(-90deg);
}
#audio-controls #rng-volume:focus {
outline: none;
}
#audio-controls #rng-volume::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: #444;
border-radius: 2px;
}
#audio-controls #rng-volume::-webkit-slider-thumb {
height: 14px;
width: 14px;
border-radius: 50%;
background: #ffb300;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
#audio-controls #rng-volume::-moz-range-track {
width: 100%;
height: 4px;
cursor: pointer;
background: #444;
border-radius: 2px;
}
#audio-controls #rng-volume::-moz-range-thumb {
height: 14px;
width: 14px;
border-radius: 50%;
border: none;
background: #ffb300;
cursor: pointer;
}
#codepen-link {
position: absolute;
bottom: 80px;
right: 20px;
height: 39px;
width: 90px;
z-index: 10;
border-radius: 0%;
box-sizing: border-box;
background-image: url("https://tistory2.daumcdn.net/tistory/240726/skin/images/mlogo-mono.png");
background-position: center center;
background-size: cover;
opacity: 0.4;
transition: all 0.25s;
}
#codepen-link:active {
opacity: 0.8;
box-shadow: 0 0 6px #efefef;
}
@-webkit-keyframes load-bar-animation {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes load-bar-animation {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
/*
.option{
display: none;
}*/
.plusmusic{
color:#FFF;
border: none;
padding:4px 7px 2px;
outline: none;
background:rgba(247,191,2, 0.8);
margin: 0px;
font-size: 0.7rem;
font-weight:400;
border-radius: 5px;
text-decoration: none;
box-shadow:none;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
margin-left: auto;
}
.plusmusic:hover {
background:rgba(247,191,2, 0.5);
}
/******************************/
#top-search {
position: fixed;
top: 11px;
left: 50%;
transform: translateX(-50%);
z-index: 50;
display: flex;
align-items: center;
background: rgba(20, 16, 8, 0.55);
border: 1px solid rgba(232, 184, 75, 0.45);
border-radius: 999px;/*무조건 완전히 둥글게(알약/캡슐 모양) 값 자체는 의미가 없고, 요소보다 확실히 큰 숫자*/
padding: 4px 4px 4px 18px;
backdrop-filter: blur(6px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
#top-search:focus-within {
border-color: rgba(232, 184, 75, 0.9);
box-shadow: 0 4px 24px rgba(232, 184, 75, 0.25);
}
#top-search input[type="text"] {
background: transparent;
border: none;
outline: none;
color: #f3e6c4;
font-family: "NEXON Lv1 Gothic OTF","Josefin Sans", sans-serif;
font-size: 12px;
/* 가로폭만 화면 크기에 반응하도록 유지 */
width: clamp(160px, 28vw, 480px);
min-width: 0;
letter-spacing: 0.3px;
}
#top-search input[type="text"]::placeholder {
color: rgba(243, 230, 196, 0.45);
overflow: hidden;
text-overflow: ellipsis;
}
#top-search button {
background: linear-gradient(135deg, #e8b84b, #c9902c);
border: none;
color: #1a1408;
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
margin-left: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.15s ease, filter 0.15s ease;
}
#top-search button:hover {
transform: scale(1.06);
filter: brightness(1.08);
}
#top-search button i {
font-size: 11px;
}
.logo-layer {
position: fixed;
top: -2px;
left:30px;
color: #ffb300;
border: none;
padding:0;
outline: none;
background:rgba(247,191,2, 0.2);
margin: 0px;
padding: 4px 10px 3px;
font-size: 0.9rem;
font-weight:900;
border-radius: 5px;
text-decoration: none;
box-shadow:none;
white-space:nowrap;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
z-index:99;
}
/* 세로 모드 (portrait) 가로 모드 (landscape)*/
@media (max-width: 768px) and (orientation: portrait) {
.logo-layer {display: none;}
}
#vip_toast{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:rgba(0,0,0,.85);
color:#fff;
padding:12px 22px;
border-radius:7777px;
font-size:.85rem;
z-index:999999999;
opacity:0;
visibility:hidden;
transition:.25s;
pointer-events:none;
}
#vip_toast.show{
opacity:1;
visibility:visible;
}
#vip_kakao i {
color: #ffb300 !important;
}