/* ============================================================
   사이버 스킨
   위치: /music_player/skins/cyber/skin.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
@keyframes mp-scanline {
    from { background-position: 0 0; }
    to   { background-position: 0 100px; }
}

#mp-player-wrap::before {
    /* 기존 속성들 유지하고 아래만 추가 */
    animation: mp-scanline 8s linear infinite;
}
#mp-player-wrap {
    --mp-bg:     #0a0a0f;
    --mp-text:   var(--mp-accent);
    --mp-sub:    color-mix(in srgb, var(--mp-accent) 50%, transparent);
    --mp-border: color-mix(in srgb, var(--mp-accent) 25%, transparent);
    --mp-hover:  color-mix(in srgb, var(--mp-accent) 8%, transparent);
    background: rgba(10,10,15,0.88) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--mp-accent) 40%, transparent) !important;
    box-shadow: 0 0 20px color-mix(in srgb, var(--mp-accent) 15%, transparent),
                inset 0 0 40px color-mix(in srgb, var(--mp-accent) 3%, transparent) !important;
    font-family: 'Share Tech Mono', monospace !important;
}

/* 스캔라인 */
#mp-player-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255,255,255,0.012) 2px,
        rgba(255,255,255,0.012) 4px
    );
    pointer-events: none;
    z-index: 9999;
    border-radius: 12px;
    animation: mp-scanline 8s linear infinite;
}

/* 하단 글로우 */
#mp-player-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 90% 50% at 50% 110%,
        color-mix(in srgb, var(--mp-accent) 18%, transparent) 0%,
        transparent 65%
    );
    pointer-events: none;
    z-index: 9998;
    border-radius: 12px;

}

.mp-mini-bar {
    background: #0a0a0f !important;
    border-bottom: 1px solid color-mix(in srgb, var(--mp-accent) 25%, transparent) !important;
}

.mp-song-title {
    color: var(--mp-accent) !important;
    font-family: 'Share Tech Mono', monospace !important;
    letter-spacing: 0.05em;
    text-shadow: 0 0 8px color-mix(in srgb, var(--mp-accent) 60%, transparent);
}

.mp-progress-bg { background: color-mix(in srgb, var(--mp-accent) 12%, transparent) !important; }
.mp-progress-fill {
    background: var(--mp-accent) !important;
    box-shadow: 0 0 6px color-mix(in srgb, var(--mp-accent) 80%, transparent);
}

.mp-time-row {
    color: color-mix(in srgb, var(--mp-accent) 50%, transparent) !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 9px !important;
    letter-spacing: 0.05em;
}

.mp-ctrl-btn { color: color-mix(in srgb, var(--mp-accent) 60%, transparent) !important; }
.mp-ctrl-btn:hover {
    background: color-mix(in srgb, var(--mp-accent) 10%, transparent) !important;
    color: var(--mp-accent) !important;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mp-accent) 60%, transparent));
}
.mp-ctrl-btn.mp-active {
    color: var(--mp-accent) !important;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mp-accent) 80%, transparent));
}

.mp-play-btn {
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--mp-accent) 60%, transparent) !important;
    color: var(--mp-accent) !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--mp-accent) 20%, transparent),
                inset 0 0 12px color-mix(in srgb, var(--mp-accent) 5%, transparent) !important;
}
.mp-play-btn:hover {
    background: color-mix(in srgb, var(--mp-accent) 10%, transparent) !important;
    box-shadow: 0 0 20px color-mix(in srgb, var(--mp-accent) 40%, transparent),
                inset 0 0 20px color-mix(in srgb, var(--mp-accent) 8%, transparent) !important;
    opacity: 1 !important;
}

.mp-vol-btn { color: color-mix(in srgb, var(--mp-accent) 60%, transparent) !important; }
.mp-vol-btn:hover {
    background: color-mix(in srgb, var(--mp-accent) 10%, transparent) !important;
    color: var(--mp-accent) !important;
}

.mp-vol-popup {
    background: #0a0a0f !important;
    border: 1px solid color-mix(in srgb, var(--mp-accent) 30%, transparent) !important;
    box-shadow: 0 0 16px color-mix(in srgb, var(--mp-accent) 15%, transparent) !important;
}
.mp-vol-slider { background: color-mix(in srgb, var(--mp-accent) 15%, transparent) !important; }
.mp-vol-slider::-webkit-slider-thumb {
    background: var(--mp-accent) !important;
    box-shadow: 0 0 6px color-mix(in srgb, var(--mp-accent) 80%, transparent);
}
.mp-vol-slider::-moz-range-thumb { background: var(--mp-accent) !important; border: none; }
.mp-vol-val {
    color: color-mix(in srgb, var(--mp-accent) 50%, transparent) !important;
    font-family: 'Share Tech Mono', monospace !important;
}

.mp-icon-btn {
    border-color: color-mix(in srgb, var(--mp-accent) 30%, transparent) !important;
    color: color-mix(in srgb, var(--mp-accent) 70%, transparent) !important;
}
.mp-icon-btn:hover {
    background: color-mix(in srgb, var(--mp-accent) 8%, transparent) !important;
    color: var(--mp-accent) !important;
}
.mp-overlay-btn {
    background: rgba(0,0,0,0.6) !important;
    border-color: color-mix(in srgb, var(--mp-accent) 40%, transparent) !important;
    color: var(--mp-accent) !important;
}

.mp-playlist-area { border-top: 1px solid color-mix(in srgb, var(--mp-accent) 15%, transparent) !important; }
.mp-pl-item:hover  { background: color-mix(in srgb, var(--mp-accent) 5%, transparent) !important; }
.mp-pl-item.active { background: color-mix(in srgb, var(--mp-accent) 8%, transparent) !important; }
.mp-pl-name {
    color: color-mix(in srgb, var(--mp-accent) 80%, transparent) !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 10px !important;
}
.mp-pl-active-dot {
    background: var(--mp-accent) !important;
    box-shadow: 0 0 4px color-mix(in srgb, var(--mp-accent) 80%, transparent);
}
.mp-playlist-empty {
    color: color-mix(in srgb, var(--mp-accent) 30%, transparent) !important;
    font-family: 'Share Tech Mono', monospace !important;
}