/* ══════════════════════════════════════════════════════
8. 고정 오디오 플레이어 바 — Premium Edition
══════════════════════════════════════════════════════ */
@keyframes apBarGlow {
0%,100% {
box-shadow:
0 0 4px 1px rgba(var(--accent-rgb),.9),
0 0 10px 3px rgba(var(--accent-rgb),.35);
}
50% {
box-shadow:
0 0 6px 2px rgba(var(--accent-rgb),1),
0 0 16px 5px rgba(var(--accent-rgb),.5);
}
}
@keyframes apTitleScroll {
0%,15% { transform:translateX(0);}
85%,100% { transform:translateX(var(--scroll-dist,-60px));}
}
@keyframes apPulseRing {
0% { transform:scale(1); opacity:.7;}
100% { transform:scale(2.2); opacity:0;}
}
.ap {
position: fixed;
bottom: 0; left: 0; right: 0;
height: 76px;
z-index: 100;
background:
linear-gradient(135deg,
rgba(var(--accent-rgb),.1) 0%,
rgba(var(--accent-rgb),.03) 60%,
transparent 100%),
var(--player-bg, rgba(13,17,23,.95));
backdrop-filter: blur(28px) saturate(2);
-webkit-backdrop-filter: blur(28px) saturate(2);
border-top: 1px solid rgba(var(--accent-rgb),.18);
box-shadow:
0 -1px 0 rgba(var(--accent-rgb),.08),
0 -8px 30px rgba(0,0,0,.15),
inset 0 1px 0 rgba(255,255,255,.04);
transition: background .35s, border-color .35s;
font-family: 'NEXON Lv1 Gothic OTF','Malgun Gothic',sans-serif;
user-select: none;
}
.ap::before {
content:'';
position:absolute; top:0; left:10%; right:10%; height:1px;
background: linear-gradient(90deg,
transparent,
rgba(var(--accent-rgb),.6) 50%,
transparent);
pointer-events:none;
}
.ap-inner {max-width:1600px;margin:0 auto;height:100%;}
.ap-panel {display:flex;align-items:center;height:100%;padding:0 20px;gap:16px;}
.ap--playback {
display:flex;
align-items:center;
gap:4px;
flex-shrink:0;
}
.ap-controls {
display:flex; align-items:center; justify-content:center;
width:40px; height:40px;
border-radius:50%;
border:none;
background:none;
color:var(--text-2);
cursor:pointer;
transition: background .15s, transform .15s, box-shadow .15s;
position: relative;
}
.ap-controls svg {fill:var(--text-2);transition:fill .18s;}
.ap-controls:hover {
color:var(--accent);
background:rgba(var(--accent-rgb),.1);
box-shadow:0 0 12px rgba(var(--accent-rgb),.2);
}
.ap-controls:hover svg {fill:var(--accent);}
.ap-controls:active {transform:scale(.9);}
.ap-volume-container.ap-controls:active { transform:none;}
.ap-toggle-btn {
width:46px;
height:46px;
background:var(--accent) !important;
color:#fff !important;
box-shadow:
0 4px 16px rgba(var(--accent-rgb),.45),
0 0 0 0 rgba(var(--accent-rgb),.3);
transition: transform .15s, box-shadow .2s;
position: relative;
}
.ap-toggle-btn svg {fill:#fff !important;}
.ap-toggle-btn:hover {
transform:scale(1.08);
box-shadow:
0 6px 26px rgba(var(--accent-rgb),.6),
0 0 0 6px rgba(var(--accent-rgb),.12);
}
.ap-toggle-btn:active {transform:scale(.94);}
.ap-toggle-btn.playing::after {
content:'';
position:absolute; inset:-3px;
border-radius:50%;
border:1.5px solid rgba(var(--accent-rgb),.5);
animation: apPulseRing 1.8s ease-out infinite;
pointer-events:none;
}
.ap--pause, .playing > .ap--play {display:none;}
.playing > .ap--pause {display:block;}
.ap--track {
flex:1;
min-width:0;
padding:0 8px;
}
.ap-info {max-width:100%;}
.ap-title {
font-size:13px;
font-weight:700;
color:var(--accent);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
margin-bottom:4px;
height:1.4em;
line-height:1.4em;
display:flex;
align-items:center;
}
.ap-subtitle {font-size:11px;color:var(--text-3);margin-bottom:5px;}
.ap-progress-row {display:flex;align-items:center;gap:8px;}
.ap-time {margin:0;font-size:11px;color:var(--text-2);white-space:nowrap;font-family:monospace;}
.live-on {font-size:12px;color:var(--accent);}
.ap-progress-container {flex:1;cursor:pointer;padding:7px 0;}
.ap-progress {
position:relative;
height:3px;
border-radius:3px;
background:rgba(var(--accent-rgb),.12);
transition:height .2s;
overflow:visible;
}
.ap-progress-container:hover .ap-progress {height:5px;}
.ap-bar, .ap-preload-bar {
position:absolute;
left:0; top:0; bottom:0;
border-radius:3px;
width:0;
}
.ap-preload-bar {
background:rgba(var(--accent-rgb),.12);
z-index:1;
}
.ap-bar {
background: linear-gradient(90deg,
rgba(var(--accent-rgb),.7),
var(--accent) 60%,
rgba(var(--accent-rgb),.9));
z-index:2;
transition:background .35s;
}
.ap-bar::after {
content:'';
position:absolute;
right:-4px; top:50%;
transform:translateY(-50%);
width:8px; height:8px;
border-radius:50%;
background:var(--accent);
border:2px solid rgba(255,255,255,.9);
box-shadow:
0 0 4px 1px rgba(var(--accent-rgb),.9),
0 0 10px 3px rgba(var(--accent-rgb),.4);
animation: apBarGlow 1.8s ease-in-out infinite;
transition: width .2s, height .2s, right .2s;
}
.ap-progress-container:hover .ap-bar::after {
width:12px; height:12px; right:-6px;
}
.ap--settings {
display:flex;
align-items:center;
gap:2px;
flex-shrink:0;
}
.ap-volume-container {
position:relative;
display:flex;
align-items:center;
}
.ap-volume {
position:absolute;
bottom:44px;
left:50%;
transform:translateX(-50%);
width:28px;
height:0;
visibility:hidden;
overflow:hidden;
background: linear-gradient(
to bottom,
rgba(var(--accent-rgb), .2),
rgba(var(--accent-rgb), .08)
);
border:0px solid rgba(var(--accent-rgb),.2);
border-bottom:none;
border-radius:10px;
backdrop-filter:blur(12px);
transition:height .22s cubic-bezier(.17,.72,.26,1.23), visibility .22s;
box-shadow:0 0 12px rgba(var(--accent-rgb),.15);
}
.ap-volume-container:hover .ap-volume {height:110px;visibility:visible;}
.ap-volume-progress {
display:block;
width:4px; height:80px;
margin:18px auto 10px;
background:rgba(var(--accent-rgb),.15);
border-radius:3px;
position:relative;
cursor:pointer;
overflow:visible;
}
.ap-volume-bar {
position:absolute;
left:0; right:0; bottom:0;
background: linear-gradient(to top,
var(--accent),
rgba(var(--accent-rgb),.6));
height:50%;
border-radius:3px;
transition:background .35s;
box-shadow:0 0 8px rgba(var(--accent-rgb),.4);
overflow:visible;
}
.ap-volume-bar::before {
content:'';
position:absolute;
top:-3px; left:50%;
transform:translateX(-50%);
width:6px;
height:6px;
border-radius:50%;
background:var(--accent);
border:2px solid rgba(255,255,255,.9);
box-shadow:
0 0 4px 1px rgba(var(--accent-rgb),.9),
0 0 8px 3px rgba(var(--accent-rgb),.4);
transition: width .2s, height .2s, top .2s;
}
.ap-volume-container:hover .ap-volume-bar::before {
width:8px; height:8px; top:-4px;
}
.ap-volume-btn {
position:absolute;
top:10px;
border:none;
background:none;
z-index:300 !important;
}
.ap--volume-off, .muted > .ap--volume-on {display:none;}
.muted > .ap--volume-off {display:inline;}
.ap-repeat-btn svg {transition:fill .15s;}
.ap-repeat-btn.ap-active svg {fill:var(--accentrepeat) !important;}
.ap-playlist-btn svg {transition:fill .15s;}
.ap-playlist-btn.ap-active svg {fill:var(--accentrepeat) !important;}
.ap-page-play-btn svg,
.ap-page-play-btn i { transition: fill .15s, color .15s; fill: var(--text-2); color: var(--text-2); font-size: 14px;}
.ap-page-play-btn .ppb-icon { display: none;}
.ap-page-play-btn .ppb-icon-0 { display: inline-block;}
.ap-page-play-btn.ppb-mode-1 svg,
.ap-page-play-btn.ppb-mode-1 i { fill: var(--accentrepeat) !important; color: var(--accentrepeat) !important;}
.ap-page-play-btn.ppb-mode-2 svg,
.ap-page-play-btn.ppb-mode-2 i { fill: var(--accentrepeat) !important; color: var(--accentrepeat) !important;}
.ap-page-play-btn.ap-active { background: rgba(var(--accent-rgb),.08);}
/* ══════════════════════════════════════════════════════
로딩 도트 (트랙 제목 준비 전)
══════════════════════════════════════════════════════ */
.ap-loading-dots {display: inline-flex;gap: 4px;align-items: center;}
.ap-loading-dots span {
width: 5px;height: 5px;
border-radius: 50%;
background: var(--accent);
animation: apDot 1.4s ease-in-out infinite;
}
.ap-loading-dots span:nth-child(2){animation-delay:.2s}
.ap-loading-dots span:nth-child(3){animation-delay:.4s}
.ap-loading-dots-w {
display: inline-flex;
gap: 4px;
align-items: center;
}
.ap-loading-dots-w span {
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
animation: apDot 1.4s ease-in-out infinite;
}
.ap-loading-dots-w span:nth-child(2){animation-delay:.2s}
.ap-loading-dots-w span:nth-child(3){animation-delay:.4s}
.np-playing-dots {display: inline-flex;gap: 3px;align-items: center;margin-left: 4px;vertical-align: middle;}
.np-playing-dots span {
width: 4px;height: 4px;
border-radius: 50%;
background: var(--accent);
animation: apDot 1.4s ease-in-out infinite;
}
.np-playing-dots span:nth-child(2){animation-delay:.2s}
.np-playing-dots span:nth-child(3){animation-delay:.4s}
@keyframes apDot {
0%,100%{opacity:.25}
50%{opacity:1}
}
#vw-loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 20px;
gap: 0;
}
.vw-ring-wrap {
position: relative;
width: 82px;
height: 82px;
margin-bottom: 18px;
}
.vw-ring-bg {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid rgba(var(--accent-rgb),.12);
}
.vw-ring-a {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: var(--accent);
border-right-color: rgba(var(--accent-rgb),.35);
animation: vwSpinA 1.05s cubic-bezier(.6,.05,.28,.95) infinite;
}
.vw-ring-b {
position: absolute;
inset: 7px;
border-radius: 50%;
border: 1.5px solid transparent;
border-bottom-color: rgba(var(--accent-rgb),.5);
border-left-color: rgba(var(--accent-rgb),.18);
animation: vwSpinB 1.65s cubic-bezier(.6,.05,.28,.95) infinite reverse;
}
@keyframes vwSpinA { to { transform: rotate(360deg);} }
@keyframes vwSpinB { to { transform: rotate(360deg);} }
.vw-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.vw-icon-box {
width: 46px;
height: 46px;
border-radius: 12px;
background: rgba(var(--accent-rgb),.1);
border: 1px solid rgba(var(--accent-rgb),.2);
display: flex;
align-items: center;
justify-content: center;
animation: vwPulse 2s ease-in-out infinite;
}
@keyframes vwPulse {
0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.4);}
50% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0);}
}
.vw-play-icon {
width: 20px;
height: 20px;
fill: var(--accent);
margin-left: 2px;
filter: drop-shadow(0 0 5px rgba(var(--accent-rgb),.7));
animation: vwGlow 2s ease-in-out infinite;
}
@keyframes vwGlow {
0%,100% { opacity: .82;}
50% { opacity: 1; }
}
.vw-label {
font-family: 'NEXON Lv1 Gothic OTF','Malgun Gothic',sans-serif;
font-size: 12px;
font-weight: 700;
color: var(--accent);
letter-spacing: .07em;
margin-bottom: 10px;
}
.vw-bar-wrap {
width: 180px;
margin-bottom: 14px;
}
.vw-bar-track {
height: 5px;
background: rgba(var(--accent-rgb),.1);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.vw-bar-track::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
rgba(var(--accent-rgb),.07) 0,
rgba(var(--accent-rgb),.07) 7px,
transparent 7px,
transparent 13px
);
}
.vw-bar-fill {
height: 100%;
width: 0%;
border-radius: 3px;
position: relative;
z-index: 1;
background: linear-gradient(90deg,
rgba(var(--accent-rgb),.55),
var(--accent) 55%,
rgba(var(--accent-rgb),.9));
background-size: 300% 100%;
animation:
vwLoad 2.4s cubic-bezier(.25,.46,.45,.94) forwards .05s,
vwShine 1.8s linear infinite;
}
@keyframes vwLoad { to { width: 100%;} }
@keyframes vwShine {
0% { background-position: 300% 0;}
100% { background-position: -300% 0;}
}
.vw-bar-fill::after {
content: '';
position: absolute;
right: -4px;
top: 50%;
transform: translateY(-50%);
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--accent);
border: 1.5px solid rgba(255,255,255,.15);
animation: vwDotGlow 1.6s ease-in-out infinite;
}
@keyframes vwDotGlow {
0%,100% {
box-shadow:
0 0 4px 1px rgba(var(--accent-rgb),.85),
0 0 10px 3px rgba(var(--accent-rgb),.3);
}
50% {
box-shadow:
0 0 7px 3px rgba(var(--accent-rgb), 1),
0 0 18px 5px rgba(var(--accent-rgb),.5);
}
}
.vw-dots {
display: flex;
gap: 5px;
}
.vw-dots span {
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
animation: vwDot 1.1s ease-in-out infinite;
}
.vw-dots span:nth-child(1) { animation-delay: 0s; }
.vw-dots span:nth-child(2) { animation-delay: .15s;}
.vw-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes vwDot {
0%,80%,100% { transform: translateY(0); opacity: .35;}
40% { transform: translateY(-5px); opacity: 1; }
}
.mob-menu-btn {
display:none;
align-items:center;justify-content:center;
width:38px;height:38px;
border-radius:10px;border:1px solid var(--border);
background:var(--bg-1);
color:var(--accent);
font-size:18px;cursor:pointer;transition:all .15s;flex-shrink:0;
}
.mob-menu-btn:hover{border-color:var(--accent);color:var(--accent);}
@media (min-width: 861px) {
.sidebar-toggle-btn { display: flex;}
}
.sidebar-overlay {
position:fixed;inset:0;
background:rgba(0,0,0,.55);
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
z-index:120;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .3s,visibility .3s;
}
.sidebar-overlay.show{opacity:1;visibility:visible;pointer-events:auto;}
/* ══════════════════════════════════════════════════════
15. 섹션별 배경 장식 애니메이션
══════════════════════════════════════════════════════ */
#sec-bg-layer {
position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden;
contain:strict;
}
#sec-bg-layer .sec-bg-panel {
position:absolute;inset:0;opacity:0;pointer-events:none;
visibility:hidden;
transition:opacity .4s, visibility 0s .4s;
}
#sec-bg-layer .sec-bg-panel.is-on {
opacity:1;
visibility:visible;
transition:opacity .4s, visibility 0s 0s;
}
#sec-bg-layer .sec-bg-panel:not(.is-on) * {
animation-play-state: paused !important;
will-change: auto !important;
}
.note-float {
position:absolute;font-size:20px;opacity:0;
color:var(--accent);
animation:noteFloat 6s ease-in-out infinite;
user-select:none;
}
/* [PERF] 활성 패널 파티클만 GPU 레이어로 승격 */
#sec-bg-layer .sec-bg-panel.is-on .note-float,
#sec-bg-layer .sec-bg-panel.is-on .ring-particle,
#sec-bg-layer .sec-bg-panel.is-on .orb,
#sec-bg-layer .sec-bg-panel.is-on .scanline,
#sec-bg-layer .sec-bg-panel.is-on .wave-ripple,
#sec-bg-layer .sec-bg-panel.is-on .star-spark,
#sec-bg-layer .sec-bg-panel.is-on .geo-shape,
#sec-bg-layer .sec-bg-panel.is-on .home-particle,
#sec-bg-layer .sec-bg-panel.is-on .store-wave-bar,
#sec-bg-layer .sec-bg-panel.is-on .tv-pixel,
#sec-bg-layer .sec-bg-panel.is-on .tv-scanline {
will-change: transform, opacity;
}
@keyframes noteFloat {
0% {opacity:0;transform:translateY(0) rotate(-10deg);}
15% {opacity:.5;}
85% {opacity:.3;}
100% {opacity:0;transform:translateY(-120px) rotate(20deg);}
}
.ring-particle {
position:absolute;border-radius:50%;
border:1px solid rgba(var(--accent-rgb),.2);
animation:ringExpand 5s ease-out infinite;
}
@keyframes ringExpand {
0% {transform:scale(.4);opacity:.7;}
100% {transform:scale(2.4);opacity:0;}
}
.orb {
position:absolute;border-radius:50%;
background:radial-gradient(circle,rgba(var(--accent-rgb),.18) 0%,transparent 65%);
animation:orbDrift 8s ease-in-out infinite alternate;
pointer-events:none;
}
@keyframes orbDrift {
from{transform:translate(0,0) scale(1);}
to {transform:translate(40px,25px) scale(1.15);}
}
.scanline {
position:absolute;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.2),transparent);
animation:scanMove 4s linear infinite;
}
@keyframes scanMove {
from{top:0;opacity:0;}
10% {opacity:1;}
90% {opacity:.6;}
to {top:100vh;opacity:0;}
}
.wave-ripple {
position:absolute;border-radius:50%;
border:2px solid rgba(var(--accent-rgb),.1);
animation:waveRipple 3.5s ease-out infinite;
}
@keyframes waveRipple {
0% {transform:scale(0);opacity:.9;}
100% {transform:scale(4.5);opacity:0;}
}
.star-spark {
position:absolute;width:3px;height:3px;border-radius:50%;
background:var(--accent);
animation:starSpark 3s ease-in-out infinite;
}
@keyframes starSpark {
0%,100%{opacity:0;transform:scale(0);}
50% {opacity:.8;transform:scale(1.5);}
}
.geo-shape {
position:absolute;opacity:0;
animation:geoFloat 9s ease-in-out infinite;
}
@keyframes geoFloat {
0% {opacity:0;transform:translateY(0) rotate(0deg);}
20% {opacity:.4;}
80% {opacity:.3;}
100% {opacity:0;transform:translateY(-80px) rotate(180deg);}
}
.home-particle {
position:absolute;border-radius:50%;
background:rgba(var(--accent-rgb),.25);
animation:homeParticle 7s ease-in-out infinite;
}
@keyframes homeParticle {
0%,100%{transform:translateY(0) scale(1);opacity:.2;}
50% {transform:translateY(-30px) scale(1.3);opacity:.5;}
}
@keyframes cardInUp {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes cardInLeft {from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:translateX(0)}}
@keyframes cardInRight{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:translateX(0)}}
#section-home .slide-card {animation-name:cardInUp;}
#section-newrelease .slide-card{animation-name:cardInRight;}
#section-albums .album-card {animation-name:cardInLeft;}
#section-live .event-card {animation-name:cardInRight;}
#section-artist .about-card {animation-name:cardInLeft;}
#section-radio .slide-card {animation-name:cardInRight;}
#section-radio .about-card {animation-name:cardInUp;}
#section-store .store-genre-card {animation-name:cardInUp;}
#section-store .store-mood-card {animation-name:cardInLeft;}
#section-store .store-info-card {animation-name:cardInUp;}
/* ══════════════════════════════════════════════════════
16. DJ 큐레이션 섹션
══════════════════════════════════════════════════════ */
.store-hero {
background:linear-gradient(135deg,rgba(var(--accent-rgb),.13),rgba(139,92,246,.08));
border:1px solid rgba(var(--accent-rgb),.22);
border-radius:20px;padding:32px 28px;margin-bottom:28px;
position:relative;overflow:hidden;
}
.store-hero::before {
content:'';position:absolute;left:-80px;bottom:-80px;
width:280px;height:280px;border-radius:50%;
background:radial-gradient(circle,rgba(var(--accent-rgb),.12) 0%,transparent 68%);
pointer-events:none;animation:heroWave 5s ease-in-out infinite;
}
.store-hero::after {
content:'';position:absolute;right:-40px;top:-40px;
width:180px;height:180px;border-radius:50%;
background:radial-gradient(circle,rgba(139,92,246,.1) 0%,transparent 65%);
pointer-events:none;animation:heroWave 4s ease-in-out infinite reverse;
}
.store-hero-inner{position:relative;z-index:1;}
.store-tag {
display:inline-flex;align-items:center;gap:6px;
background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.28);
border-radius:20px;padding:4px 12px;
font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
color:var(--accent);margin-bottom:14px;
}
.store-tag-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:npPulse 1.2s ease-in-out infinite;}
.store-hero-title{font-family:'SchoolSafetyPuzzleOutline',sans-serif;font-size:30px;font-weight:500;color:var(--accent);letter-spacing:3px;margin-bottom:8px;line-height:1.15;}
.store-hero-sub{font-size:13px;color:var(--text-3);margin-bottom:24px;line-height:1.7;}
.store-genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px;margin-bottom:28px;}
.store-genre-card {
border-radius:16px;padding:22px 16px;cursor:pointer;
position:relative;overflow:hidden;
border:1px solid var(--border);
transition:all .22s;text-align:center;
}
.store-genre-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.25);border-color:rgba(var(--accent-rgb),.35);}
.store-genre-card::before{content:'';position:absolute;inset:0;opacity:.18;z-index:0;}
.store-genre-card .gc-inner{position:relative;z-index:1;}
.gc-emoji{font-size:36px;margin-bottom:10px;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));}
.gc-name{font-size:14px;font-weight:700;color:var(--accent);margin-bottom:4px;}
.gc-count{font-size:11px;color:var(--text-3);}
.gc--cafe {background:linear-gradient(145deg,rgba(251,191,36,.15),rgba(245,158,11,.05));}
.gc--cafe::before{background:linear-gradient(145deg,#fbbf24,#f59e0b);}
.gc--retail{background:linear-gradient(145deg,rgba(59,130,246,.15),rgba(37,99,235,.05));}
.gc--retail::before{background:linear-gradient(145deg,#3b82f6,#2563eb);}
.gc--spa {background:linear-gradient(145deg,rgba(34,197,94,.15),rgba(16,185,129,.05));}
.gc--spa::before{background:linear-gradient(145deg,#22c55e,#10b981);}
.gc--hotel {background:linear-gradient(145deg,rgba(139,92,246,.15),rgba(124,58,237,.05));}
.gc--hotel::before{background:linear-gradient(145deg,#8b5cf6,#7c3aed);}
.gc--rest {background:linear-gradient(145deg,rgba(236,72,153,.15),rgba(219,39,119,.05));}
.gc--rest::before{background:linear-gradient(145deg,#ec4899,#db2777);}
.gc--gym {background:linear-gradient(145deg,rgba(239,68,68,.15),rgba(220,38,38,.05));}
.gc--gym::before{background:linear-gradient(145deg,#ef4444,#dc2626);}
.store-mood-list{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}
.store-mood-card {
display:flex;align-items:center;gap:18px;
background:var(--bg-2);border:1px solid var(--border);border-radius:14px;
padding:16px 20px;cursor:pointer;transition:all .2s;
}
.store-mood-card:hover{border-color:rgba(var(--accent-rgb),.4);transform:translateX(5px);box-shadow:0 6px 22px rgba(0,0,0,.18);}
.mood-icon{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
.mood-info{flex:1;min-width:0;}
.mood-name{font-size:15px;font-weight:700;color:var(--accent);margin-bottom:3px;}
.mood-desc{font-size:12px;color:var(--text-3);}
.mood-bpm{font-size:11px;font-family:monospace;color:var(--accent);margin-left:auto;flex-shrink:0;background:rgba(var(--accent-rgb),.1);padding:3px 9px;border-radius:8px;}
.store-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:24px;}
.store-info-card{background:var(--bg-2);border:1px solid var(--border);border-radius:14px;padding:20px;}
.sic-icon{font-size:28px;margin-bottom:10px;}
.sic-title{font-size:14px;font-weight:700;color:var(--accent);margin-bottom:6px;}
.mood-icon--morning{background:rgba(251,191,36,.15);}
.mood-icon--jazz {background:rgba(59,130,246,.15);}
.mood-icon--evening{background:rgba(139,92,246,.15);}
.mood-icon--nature {background:rgba(34,197,94,.15);}
@keyframes storeWaveBar{0%,100%{transform:scaleY(.6);opacity:.5;}50%{transform:scaleY(1.5);opacity:.95;}}
.store-wave-bar{
position:absolute;
border-radius:3px 3px 0 0;
bottom: var(--player-h, 76px);
background:rgba(var(--accent-rgb),.15);
animation:storeWaveBar 2s ease-in-out infinite;
will-change:transform,opacity;
}
/* ══════════════════════════════════════════════════════
앨범 커버 그라디언트 & 유틸리티 클래스
══════════════════════════════════════════════════════ */
.acg-1{background:linear-gradient(135deg,#3b82f6,#8b5cf6);}
.acg-2{background:linear-gradient(135deg,#ec4899,#f59e0b);}
.acg-3{background:linear-gradient(135deg,#22c55e,#06b6d4);}
.acg-4{background:linear-gradient(135deg,#ef4444,#f97316);}
.acg-5{background:linear-gradient(135deg,#6366f1,#a855f7);}
.acg-6{background:linear-gradient(135deg,#fbbf24,#84cc16);}
.acg-7{background:linear-gradient(135deg,#06b6d4,#3b82f6);}
.acg-8{background:linear-gradient(135deg,#f59e0b,#ef4444);}
.event-date--past{background:rgba(100,116,139,.12) !important;}
.event-date-day--past{color:var(--text-3);}
.event-badge--past{background:rgba(100,116,139,.12);color:var(--text-3);}
.sc-tag--green{background:rgba(34,197,94,.15);color:#22c55e;}
.sc-tag--red{background:rgba(239,68,68,.15);color:#ef4444;}
.sc-tag--live{background:rgba(239,68,68,.18);color:#f87171;animation:npPulse 1s ease-in-out infinite;}
.about-card--artist{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.about-card-title--xl{font-size:22px !important;margin-bottom:6px !important;}
.artist-meta{font-size:13px;color:var(--text-3);}
.artist-stats--compact{margin-top:12px;margin-bottom:0;}
.genre-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.turntable-canvas{display:block;width:220px;height:185px;}
.eq-canvas-hero{width:250px;height:60px;border-radius:5px;opacity:.8;}
.eq-canvas-top{
position: relative;
left:0px;
bottom:0px;
border-radius:5px;
opacity:.8;
width:150px;
height:43px;
}
.eq-canvas-sec{
position: absolute;
right:2px;
bottom:0px;
border-radius:5px;
opacity:.8;
width:200px;
height:36px;
}
.ap--playback-g6{gap:6px;}
.radio-hero {
background:linear-gradient(135deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.04));
border:1px solid rgba(var(--accent-rgb),.25);
border-radius:20px;padding:28px;margin-bottom:28px;
position:relative;overflow:hidden;
}
.radio-hero::before {
content:'';position:absolute;right:-60px;top:-60px;
width:240px;height:240px;border-radius:50%;
background:radial-gradient(circle,rgba(var(--accent-rgb),.15) 0%,transparent 70%);
pointer-events:none;animation:heroWave 3s ease-in-out infinite;
}
.radio-live-badge {
display:inline-flex;align-items:center;gap:6px;
background:rgba(var(--accent-rgb),.18);border:1px solid rgba(var(--accent-rgb),.35);
border-radius:20px;padding:4px 12px;
font-size:10px;font-weight:700;letter-spacing:1.5px;
text-transform:uppercase;color:var(--accent);margin-bottom:14px;
}
.radio-live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:npPulse 1s ease-in-out infinite;}
.radio-hero-title{
font-family:'SchoolSafetyPuzzleOutline',sans-serif;
font-size:28px;
color:var(--text-1);
font-weight: 500;
margin-bottom:6px;
background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb),.45), var(--accent));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.radio-hero-title.is-streaming {
background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb),.45), var(--accent));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-flow 4s linear infinite;
}
@keyframes gradient-flow {
0% { background-position: 0% center;}
100% { background-position: 200% center;}
}
.radio-hero-sub{font-size:13px;color:var(--text-2);margin-bottom:20px;}
.radio-streams {display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.radio-stream-card {
position: relative;
display: flex; align-items: center; gap: 10px;
background: linear-gradient(135deg,rgba(var(--accent-rgb),.12) 0%,rgba(var(--accent-rgb),.03) 100%);
border: 1px solid var(--border);
border-radius: 14px;
padding: 10px; cursor: pointer; transition: all .2s,
opacity .4s ease, transform .4s ease;
opacity: 0;
transform: translateY(16px);
box-shadow: 0 0 4px rgba(var(--accent-rgb), .15);
}
.radio-stream-card.is-visible {
opacity: 1;
transform: translateY(0);
}
.radio-stream-card:hover{border-color:var(--bg-3);transform:translateX(4px);box-shadow: 0 0 10px rgba(var(--accent-rgb), .35);}
.radio-stream-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.radio-stream-icon--live{background:rgba(var(--accent-rgb),.15);border:1px solid rgba(var(--accent-rgb),.3);}
.radio-stream-icon--twitch{background:rgba(145,70,255,.12);border:1px solid rgba(145,70,255,.25);}
.radio-stream-icon--mix{background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);}
.radio-stream-info{flex:1;min-width:0;}
.radio-stream-name{font-size:13px;font-weight:600;color:var(--text-3);margin-bottom:3px;}
.radio-stream-name-1{font-size:13px;font-weight:600;color:var(--accent);margin-bottom:3px;}
.radio-stream-desc-1{font-size:12px;color:var(--accent);}
.radio-stream-desc{font-size:12px;color:var(--text-3);}
.background-image_w {background-size:100% auto;background-position:center;background-repeat:no-repeat;}
.background-image_h {background-size:auto 100%;background-position:center;background-repeat:no-repeat;}
.background-image_c {background-size:cover;background-position:center;background-repeat:no-repeat;}
.radio-stream-card.is-playing .radio-stream-name {
display: flex;
align-items: center;
gap: 8px;
}
.radio-stream-card.is-playing .wave-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .7rem;
font-weight: 400;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
border-radius: 99px;
padding: 2px 8px 2px 6px;
white-space: nowrap;
}
.radio-stream-card.is-playing .wave-bars {
display: inline-flex;
align-items: center;
gap: 2px;
height: 12px;
}
.radio-stream-card.is-playing .wave-bars span {
display: block;
width: 2.5px;
border-radius: 99px;
background: var(--accent);
animation: wave 1s ease-in-out infinite;
}
.radio-stream-card.is-playing .wave-bars span:nth-child(1) { animation-delay: 0s;}
.radio-stream-card.is-playing .wave-bars span:nth-child(2) { animation-delay: 0.15s;}
.radio-stream-card.is-playing .wave-bars span:nth-child(3) { animation-delay: 0.3s;}
.radio-stream-card.is-playing .wave-bars span:nth-child(4) { animation-delay: 0.45s;}
.radio-stream-card.is-playing .wave-bars span:nth-child(5) { animation-delay: 0.3s;}
.radio-stream-card.is-playing .wave-bars span:nth-child(6) { animation-delay: 0.15s;}
@keyframes wave {
0%, 100% { height: 3px; opacity: 0.4;}
50% { height: 12px; opacity: 1;}
}
.radio-hero-title .wave-badge {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.radio-hero-title .wave-bars {
display: inline-flex;
align-items: center;
gap: 2px;
height: 12px;
}
.radio-hero-title .wave-bars span {
display: block;
width: 2.5px;
border-radius: 99px;
background: var(--accent);
animation: wave 1s ease-in-out infinite;
}
.radio-hero-title .wave-bars span:nth-child(1) { animation-delay: 0s;}
.radio-hero-title .wave-bars span:nth-child(2) { animation-delay: 0.15s;}
.radio-hero-title .wave-bars span:nth-child(3) { animation-delay: 0.3s;}
.radio-hero-title .wave-bars span:nth-child(4) { animation-delay: 0.45s;}
.radio-hero-title .wave-bars span:nth-child(5) { animation-delay: 0.3s;}
.radio-hero-title .wave-bars span:nth-child(6) { animation-delay: 0.15s;}
.radio-stream-card.is-playing .radio-stream-icon {
box-shadow:
0 0 0 2px rgba(var(--accent),1),
0 0 10px 3px rgba(var(--accent-rgb),.47),
0 0 22px 8px rgba(var(--accent-rgb),.2);
animation: radioIconGlow 2s ease-in-out infinite;
}
@keyframes radioIconGlow {
0%,100%{
box-shadow:
0 0 0 2px rgba(var(--accent-rgb),1),
0 0 10px 3px rgba(var(--accent-rgb),.47),
0 0 22px 8px rgba(var(--accent-rgb),.2);
}
50%{
box-shadow:
0 0 0 2px rgba(var(--accent-rgb),.9),
0 0 16px 5px rgba(var(--accent-rgb),.6),
0 0 32px 12px rgba(var(--accent-rgb),.28);
}
}
.radio-stream-card.is-playing {
border-color: rgba(var(--accent-rgb),.45) !important;
background: rgba(var(--accent-rgb),.06) !important;
}
.radio-stream-card.is-playing::before,
.radio-stream-card.is-playing::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.9) 50%, transparent);
pointer-events: none;
}
.radio-stream-card.is-playing::before { top: 0; border-radius: 14px 14px 0 0; }
.radio-stream-card.is-playing::after { bottom: 0; border-radius: 0 0 14px 14px; }
/* ══ 라디오 방송 상태 배지 — 스위치 토글 (다크/라이트 테마 연동) ══ */
.radio-stream-badge{
--sw-off-r:71;--sw-off-g:85;--sw-off-b:105;
--sw-border:rgba(255,255,255,.1);
--sw-inset:rgba(255,255,255,.06);
--sw-on-label:var(--accent);
--sw-soon-label:var(--accent);
--sw-off-label:#64748b;
--sw-bg-mul:.18;
--sw-glow-mul:.65;
display:inline-flex;align-items:center;gap:0;
white-space:nowrap;flex-shrink:0;
width:72px;height:26px;border-radius:100px;
padding:0 4px;position:relative;cursor:pointer;
transition:background .35s ease,box-shadow .35s ease;
color:transparent;font-size:0;
border:1px solid var(--sw-border);
}
[data-theme^="light"] .radio-stream-badge{
--sw-border:rgba(0,0,0,.12);
--sw-inset:rgba(0,0,0,.06);
--sw-bg-mul:.28;
--sw-glow-mul:.45;
--sw-on-label:var(--accent);
--sw-soon-label:var(--accent);
--sw-off-label:#475569;
}
.radio-stream-badge::before{
content:'';position:absolute;top:6px;
width:12px;height:12px;border-radius:50%;
transition:transform .35s cubic-bezier(.34,1.56,.64,1),
background .35s ease,box-shadow .35s ease;
flex-shrink:0;
}
.radio-stream-badge::after{
content:'';position:absolute;
font-size:9px;font-weight:800;letter-spacing:.5px;line-height:1;
top:50%;transform:translateY(-50%);
transition:opacity .2s;
}
.radio-stream-badge--on{
background:linear-gradient(135deg,
rgba(var(--accent-rgb),.22) 0%,
rgba(var(--accent-rgb),.13) 100%);
box-shadow:0 0 0 1px rgba(var(--accent-rgb),.32),
inset 0 1px 0 var(--sw-inset),
0 4px 12px rgba(var(--accent-rgb),.15);
}
.radio-stream-badge--on::before{
left:4px;
background:radial-gradient(circle at 35% 35%,
rgba(var(--accent-rgb),1),
rgba(var(--accent-rgb),1));
box-shadow:0 0 8px 2px rgba(var(--accent-rgb),var(--sw-glow-mul)),
0 0 16px 4px rgba(var(--accent-rgb),.3);
animation:switchGlow 1.6s ease-in-out infinite;
}
.radio-stream-badge--on::after{
content:'onAIR';left:26px;
color:var(--sw-on-label);
font-size:8.5px;
text-shadow:0 0 8px rgba(var(--accent-rgb),.7);
}
.radio-stream-card.is-playing .radio-stream-badge--on::after{
content:'청취중';
font-size:.7rem;
font-weight:400;
}
.radio-stream-badge--soon{
background:linear-gradient(135deg,
rgba(var(--accent-rgb),.07) 0%,
rgba(var(--accent-rgb),.04) 100%);
box-shadow:0 0 0 1px rgba(var(--accent-rgb),.14),
inset 0 1px 0 var(--sw-inset);
}
.radio-stream-badge--soon::before{
left:4px;
background:radial-gradient(circle at 35% 35%,
rgba(var(--accent-rgb),.45),
rgba(var(--accent-rgb),.25));
box-shadow:none;
}
.radio-stream-badge--soon::after{
content:'예정';left:28px;
color:rgba(var(--accent-rgb),.5);
text-shadow:none;
}
/* ══ 방송상태 배지 + 신청곡 버튼 세로 컨테이너 ══ */
.radio-stream-actions{
display:flex;flex-direction:column;
align-items:flex-end;gap:6px;flex-shrink:0;
}
/* ══ 신청곡 버튼 — 배지와 동일 크기(72×26) ══ */
.radio-req-btn{
display:inline-flex;align-items:center;justify-content:center;gap:4px;
width:72px;height:26px;border-radius:100px;
padding:0 4px;
font-size:8.5px;font-weight:800;letter-spacing:.5px;
background:rgba(var(--accent-rgb),.12);
color:var(--accent);
border:1px solid rgba(var(--accent-rgb),.28);
text-decoration:none;white-space:nowrap;
transition:background .2s,box-shadow .2s,border-color .2s;
}
.radio-req-btn i{font-size:9px;}
.radio-req-btn:hover{
background:rgba(var(--accent-rgb),.25);
border-color:rgba(var(--accent-rgb),.5);
box-shadow:0 0 8px rgba(var(--accent-rgb),.35);
}
[data-theme^="light"] .radio-req-btn{
background:rgba(var(--accent-rgb),.1);
border-color:rgba(var(--accent-rgb),.25);
}
/* ══ 예정 상태일 때 신청곡 버튼 — 배지와 동일하게 dim ══ */
.radio-stream-actions:has(.radio-stream-badge--soon) .radio-req-btn{
background:linear-gradient(135deg,rgba(var(--accent-rgb),.07) 0%,rgba(var(--accent-rgb),.04) 100%);
color:rgba(var(--accent-rgb),.5);
border-color:rgba(var(--accent-rgb),.14);
box-shadow:none;
pointer-events:none;
}
.radio-stream-actions:has(.radio-stream-badge--soon) .radio-req-btn:hover{
background:linear-gradient(135deg,rgba(var(--accent-rgb),.07) 0%,rgba(var(--accent-rgb),.04) 100%);
border-color:rgba(var(--accent-rgb),.14);
box-shadow:none;
}
@keyframes switchGlow{
0%,100%{box-shadow:0 0 8px 2px rgba(var(--accent-rgb),var(--sw-glow-mul)),
0 0 16px 4px rgba(var(--accent-rgb),.3);}
50%{box-shadow:0 0 12px 4px rgba(var(--accent-rgb),.85),
0 0 24px 8px rgba(var(--accent-rgb),.45);}
}
.radio-schedule {display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:24px;}
.radio-sched-card{background:var(--bg-2);border:1px solid var(--border);border-radius:14px;padding:18px;animation:cardInRight .4s ease both;}
.radio-sched-card:nth-child(1){animation-delay:.05s}
.radio-sched-card:nth-child(2){animation-delay:.12s}
.radio-sched-card:nth-child(3){animation-delay:.19s}
.radio-sched-card:nth-child(4){animation-delay:.26s}
.radio-sched-day{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3);margin-bottom:4px;}
.radio-sched-time{font-family:'Syne', sans-serif;font-size:18px;font-weight:800;color:var(--accent);margin-bottom:6px;}
.radio-sched-title{font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;}
.radio-sched-host{font-size:11px;color:var(--text-3);}
.radio-stream-cj {
font-size: 11px;
color: var(--text-3);
opacity: 1;
margin-left: 4px;
}
/* 방송 중일 때 — desc + cj 둘 다 accent로 통일 */
.radio-stream-card.is-playing[data-has-song="1"] .radio-stream-desc,
.radio-stream-card.is-playing[data-has-song="1"] .radio-stream-cj {
color: var(--accent);
}
/* ══ YouTube 라이트박스 ══ */
#yt-lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0,0,0,.4);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
align-items: center;
justify-content: center;
padding: 0px;
box-sizing: border-box;
}
#yt-lightbox.open { display: flex;}
/*라이트박스 16:9 사이즈 조정*/
#yt-box {
position: relative;
max-height: calc(100vh - 140px);/* 늘리면 작아짐 */
max-height: calc(100dvh - 140px);
aspect-ratio: 16/9;
height: min(calc((100vw - 40px) * 9/16), calc(100vh - 140px));/* 늘리면 작아짐 */
height: min(calc((100dvw - 40px) * 9/16), calc(100dvh - 140px));
/*100vw - 40px는 뷰포트 전체 너비에서 박스가 화면 양쪽 끝에 딱 붙지 않도록 좌우로 20px씩 패딩*/
width: auto;
border-radius: 14px;
overflow: visible;
box-shadow: 0 24px 80px rgba(0,0,0,.7);
background: rgba(0,0,0,.7);
transition: width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1);
}
/* ══ 세로영상 / 세로직캠 — 9:16 반응형 모드 ══ */
#yt-box.yt-vertical {/* 화면 높이 기준으로 너비를 역산 → 9:16 유지 */
aspect-ratio: 9/16;
height: min(calc(100vh - 40px), calc(100dvh - 40px));
width: min(calc((100vh - 40px) * 9/16),calc((100dvh - 40px) * 9/16),90vw);
max-height: calc(100vh - 40px);
max-height: calc(100dvh - 40px);
}
@media (max-width: 480px) {
#yt-box.yt-vertical {
width: min(88vw, calc((100dvh - 20px) * 9/16));
height: min(calc(100dvh - 20px), calc(88vw * 16/9));
}
}
@media (max-height: 500px) {
#yt-box.yt-vertical {
height: calc(100dvh - 20px);
width: calc((100dvh - 20px) * 9/16);
}
}
#yt-box iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 14px;
transition: opacity .3s ease;
}
#yt-loader {
display: none;
position: absolute;
inset: 0;
z-index: 2;
border-radius: 14px;
background: rgba(0,0,0,.55);
align-items: center;
justify-content: center;
}
.yt-loader-ring {
width: 52px;
height: 52px;
border: 4px solid rgba(255,255,255,.15);
border-top-color: var(--accent);
border-radius: 50%;
animation: ytSpin .8s linear infinite;
}
@keyframes ytSpin {
to { transform: rotate(360deg);}
}
#yt-close {
position: absolute;
top: 0px;
right: 0px;
background: rgba(255,255,255,.015);
border: 1px solid rgba(255,255,255,.1);
color:var(--accent);
border-radius: 0px 14px 0px 0px;
width: 30px;
height: 30px;
font-size: 20px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s;
z-index: 10000;
}
#yt-close:hover {color: var(--text-1);}
.auth-wrap { display:flex; align-items:center; gap:8px;}
.auth-nick {
font-size:12px; color:var(--text-2);
max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.auth-nick strong { color:var(--accent);}
.auth-btn {
display:inline-flex; align-items:center; gap:5px;
padding:5px 13px; border-radius:20px; font-size:12px; font-weight:600;
border:1.5px solid var(--border-h); cursor:pointer; white-space:nowrap;
transition:all .2s; background:transparent; color:var(--text-1);
font-family:inherit; text-decoration:none;
}
.auth-btn--login { border-color:var(--accent); color:var(--accent);}
.auth-btn--login:hover { background:var(--accent); color:#fff;}
.auth-btn--logout { border-color:var(--border-h); color:var(--text-2);}
.auth-btn--logout:hover { border-color:var(--pink); color:var(--pink);}
#loginModal {
display:none; position:fixed; inset:0; z-index:9999999997;
background:rgba(0,0,0,.65); backdrop-filter:blur(6px);
align-items:center; justify-content:center;
}
#loginModal.open { display:flex;}
.loginModal_all{cursor:pointer;}
.login-box {
position:relative;
background:var(--bg-1); border:1px solid var(--border-h);
border-radius:18px; padding:36px 32px 32px;
width:92%; max-width:380px;
box-shadow:0 24px 60px rgba(0,0,0,.5);
animation:loginSlideUp .28s cubic-bezier(.22,1,.36,1);
}
@keyframes loginSlideUp {
from { opacity:0; transform:translateY(28px) scale(.97);}
to { opacity:1; transform:translateY(0) scale(1);}
}
.login-box-close {
position:absolute; top:14px; right:16px;
background:none; border:none; cursor:pointer;
color:var(--text-3); font-size:20px; line-height:1;
transition:color .2s;
}
.login-box-close:hover { color:var(--text-1);}
.login-logo {
display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.login-logo-icon {
width:36px; height:36px; border-radius:10px;
background:linear-gradient(135deg,var(--accent),var(--purple));
display:flex; align-items:center; justify-content:center;
color:#fff; font-size:16px;
}
.login-logo-text { font-family:'Syne', sans-serif;font-size:17px; font-weight:800; color:var(--text-1);}
.login-logo-sub { font-size:11px; color:var(--text-3); margin-top:1px;}
.login-field { margin-bottom:14px;}
.login-field label {
display:block; font-size:11px; color:var(--text-3);
margin-bottom:5px; text-transform:uppercase; letter-spacing:.05em;
}
.login-field input {
width:100%; padding:10px 14px;
background:var(--bg-3); border:1.5px solid var(--border-h);
border-radius:10px; color:var(--text-1); font-size:14px;
font-family:inherit; transition:border-color .2s, box-shadow .2s;
outline:none !important;
}
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus {
-webkit-box-shadow:0 0 0 1000px var(--bg-3) inset !important;
-webkit-text-fill-color:var(--text-1) !important;
border:1.5px solid var(--border-h);
transition:background-color 9999s ease-in-out 0s;
outline:none !important;
}
.login-field input:focus {
border-color:var(--accent) !important;
box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25) !important;
outline:none !important;
}
.login-field input:-webkit-autofill:focus {
border-color:var(--accent) !important;
box-shadow:0 0 0 1000px var(--bg-3) inset, 0 0 0 3px rgba(var(--accent-rgb),.25) !important;
}
.login-field input::placeholder { color:var(--text-3);}
.login-submit {
width:100%; padding:11px; border-radius:10px;
background:var(--accent); border:none; color:#fff;
font-size:14px; font-weight:700; font-family:inherit;
cursor:pointer; transition:opacity .2s, transform .15s;
margin-top:4px; letter-spacing:.03em;
}
.login-submit:hover { opacity:.88;}
.login-submit:active { transform:scale(.98);}
.login-submit:disabled {
opacity: 1;
cursor: not-allowed;
background: var(--text-3);
color: var(--accent);
}
.login-msg {
margin-top:10px; text-align:center; font-size:12px;
color:var(--pink); min-height:16px;
}
.login-msg.ok { color:var(--green);}
.login-divider {
margin:16px 0 10px; border:none;
border-top:1px solid var(--border); opacity:.5;
}
.login-links {
display:flex; justify-content:center; gap:16px;
}
.login-links a, .login-links button {
font-size:11px; color:var(--text-3);
text-decoration:none; transition:color .2s;
background:none; border:none; cursor:pointer;
font-family:inherit; padding:0;
}
.login-links a:hover,
.login-links button:hover { color:var(--accent);}
#ifModal {
display:none; position:fixed; inset:0; z-index:10000;
background:rgba(0,0,0,.7); backdrop-filter:blur(7px);
align-items:center; justify-content:center;
}
#ifModal.open { display:flex;}
.ifm-box {
position:relative;
background:var(--bg-1); border:1px solid var(--border-h);
border-radius:18px; overflow:hidden;
width:96%; max-width:680px; max-height:90vh;
display:flex; flex-direction:column;
box-shadow:0 24px 60px rgba(0,0,0,.55);
animation:loginSlideUp .28s cubic-bezier(.22,1,.36,1);
}
.ifm-header {
display:flex; align-items:center; justify-content:space-between;
padding:14px 20px 13px;
border-bottom:1px solid var(--border);
flex-shrink:0;
}
.ifm-title {
display:flex; align-items:center; gap:8px;
font-size:14px; font-weight:700; color:var(--text-1);
}
.ifm-title-icon {
width:26px; height:26px; border-radius:7px;
background:linear-gradient(135deg,var(--accent),var(--purple));
display:flex; align-items:center; justify-content:center;
color:#fff; font-size:12px;
}
.ifm-close {
background:none; border:none; cursor:pointer;
color:var(--text-3); font-size:18px; line-height:1;
transition:color .2s; padding:2px 4px;
}
.ifm-close:hover { color:var(--text-1);}
.ifm-body {
flex:1; overflow:hidden; position:relative;
}
.ifm-loading {
position:absolute; inset:0;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
gap:12px; color:var(--text-3); font-size:13px;
background:var(--bg-1);
transition:opacity .3s;
}
.ifm-loading-spin {
width:28px; height:28px;
border:3px solid var(--border-h);
border-top-color:var(--accent);
border-radius:50%;
animation:ifmSpin .7s linear infinite;
}
@keyframes ifmSpin { to { transform:rotate(360deg);} }
.ifm-frame {
width:100%; height:100%; min-height:520px;
border:none; display:block;
background:transparent;
opacity:0; transition:opacity .25s;
}
.ifm-frame.loaded { opacity:1;}
.ifm-loading.hidden { opacity:0; pointer-events:none;}
.ifm-done {
display:none; position:absolute; inset:0; z-index:10;
flex-direction:column; align-items:center; justify-content:center;
gap:0;
background:var(--bg-1);
}
.ifm-done.show {
display:flex;
animation:ifmDoneIn .4s cubic-bezier(.22,1,.36,1);
}
@keyframes ifmDoneIn {
from { opacity:0; transform:scale(.94);}
to { opacity:1; transform:scale(1);}
}
.ifm-done-ring {
position:relative; width:88px; height:88px; margin-bottom:22px;
}
.ifm-done-ring svg {
position:absolute; inset:0; width:100%; height:100%;
animation:ifmRingDraw .6s ease forwards;
stroke-dasharray:220;
stroke-dashoffset:220;
}
@keyframes ifmRingDraw {
to { stroke-dashoffset:0;}
}
.ifm-done-check {
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
font-size:34px;
animation:ifmCheckPop .35s .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ifmCheckPop {
from { opacity:0; transform:scale(.4);}
to { opacity:1; transform:scale(1);}
}
.ifm-done-title {
font-size:18px; font-weight:800; color:var(--text-1);
margin-bottom:8px; text-align:center; letter-spacing:-.01em;
}
.ifm-done-sub {
font-size:12px; color:var(--text-3);
margin-bottom:28px; text-align:center; line-height:1.7;
}
.ifm-done-close {
padding:11px 32px; border-radius:24px; font-size:13px; font-weight:700;
background:linear-gradient(135deg, var(--accent), var(--purple));
color:#fff; border:none; cursor:pointer;
font-family:inherit; letter-spacing:.03em;
box-shadow:0 4px 20px rgba(var(--accent-rgb),.35);
transition:opacity .2s, transform .15s;
}
.ifm-done-close:hover { opacity:.88;}
.ifm-done-close:active { transform:scale(.97);}
.trot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin-bottom:28px;}
.trot-card{background:var(--bg-2);border:1px solid var(--border);border-radius:20px;overflow:hidden;position:relative;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .3s;opacity:0;transform:translateY(22px);}
.trot-card.tc-on{opacity:1;transform:translateY(0);}
.trot-card:hover{transform:translateY(-6px) scale(1.013);box-shadow:0 20px 48px rgba(0,0,0,.38);border-color:var(--border-h);}
.trot-card__top{height:190px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.trot-card--hjy .trot-card__top{background:linear-gradient(150deg,#1a0a2e 0%,#3d1a6e 45%,#7c3aed 80%,#c084fc 100%);}
.trot-card--yje .trot-card__top{background:linear-gradient(150deg,#0a1a2e 0%,#0e4a7a 45%,#0ea5e9 80%,#7dd3fc 100%);}
.trot-card--jyj .trot-card__top{background:linear-gradient(150deg,#1a0a1a 0%,#6b2060 45%,#ec4899 80%,#fbcfe8 100%);}
.trot-card--ege .trot-card__top{background:linear-gradient(150deg,#051a0a 0%,#065f46 45%,#10b981 80%,#6ee7b7 100%);}
.trot-card--khy .trot-card__top{background:linear-gradient(150deg,#1a0a00 0%,#7c2d12 45%,#f97316 80%,#fed7aa 100%);}
.trot-card--jdk .trot-card__top{background:linear-gradient(150deg,#1a1500 0%,#78350f 45%,#f59e0b 80%,#fde68a 100%);}
.trot-card__top::before{content:'';position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.05);top:-40px;right:-30px;}
.trot-card__top::after{content:'';position:absolute;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.07);bottom:-20px;left:-20px;}
.trot-card__avatar{width:88px;height:88px;border-radius:50%;border:2.5px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-family:'NEXON Lv1 Gothic OTF', 'Malgun Gothic', sans-serif;font-size:26px;font-weight:800;color: var(--accent);background:rgba(0,0,0,.22);backdrop-filter:blur(6px);position:relative;z-index:1;box-shadow:0 8px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);letter-spacing:-1px;}
.trot-card__badge{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.48);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.13);border-radius:9px;padding:4px 9px;font-size:10px;font-weight:700;letter-spacing:.6px;color:rgba(255,255,255,.88);z-index:2;}
.trot-card__badge--gold{background:rgba(251,191,36,.22);border-color:rgba(251,191,36,.38);color:#fde68a;}
.trot-card__badge--silver{background:rgba(185,185,255,.28);border-color:rgba(148,163,184,.32);color:#e2e8f0;}
.trot-card__badge--blue{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.32);color:#93c5fd;}
.trot-card__show{position:absolute;top:12px;right:12px;font-size:9px;font-weight:800;letter-spacing:.5px;background:rgba(0,0,0,.48);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:3px 7px;color:rgba(255,255,255,.7);z-index:2;}
.trot-card__body{padding:16px 18px 18px;}
.trot-card__name{ont-size:21px;font-weight:700;color:var(--accent);margin-bottom:1px;letter-spacing:-.3px;}
.trot-card__name-en{font-size:10px;font-weight:500;letter-spacing:1.2px;color:var(--text-3);text-transform:uppercase;margin-bottom:9px;}
.trot-card__nick{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--accent);background:rgba(var(--accent-rgb),.11);border:1px solid rgba(var(--accent-rgb),.22);border-radius:6px;padding:2px 8px;margin-bottom:11px;}
.trot-card__desc{font-size:12px;color:var(--text-3);line-height:1.7;margin-bottom:13px;}
.trot-card__songs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;}
.trot-card__song{font-size:11px;font-weight:600;color:var(--text-2);background:var(--bg-3);border:1px solid var(--border);border-radius:20px;padding:3px 9px;transition:all .2s;}
.trot-card__song::before{content:'♪ ';color:var(--accent);font-size:10px;}
.trot-card:hover .trot-card__song{border-color:rgba(var(--accent-rgb),.24);}
.trot-card__stats{display:flex;border:1px solid var(--border);border-radius:11px;overflow:hidden;}
.trot-card__stat{flex:1;padding:7px 4px;text-align:center;border-right:1px solid var(--border);transition:background .2s;}
.trot-card__stat:last-child{border-right:none;}
.trot-card:hover .trot-card__stat{background:var(--bg-3);}
.trot-card__sv{font-family:'NEXON Lv1 Gothic OTF', 'Malgun Gothic', sans-serif;font-size:12px;font-weight:800;color:var(--accent);display:block;line-height:1.2;}
.trot-card__sl{font-size:9px;font-weight:600;letter-spacing:.4px;color:var(--text-3);text-transform:uppercase;}
.trot-card__line{height:3px;position:absolute;bottom:0;left:0;right:0;opacity:0;transition:opacity .3s;}
.trot-card--hjy .trot-card__line{background:linear-gradient(90deg,#7c3aed,#c084fc);}
.trot-card--yje .trot-card__line{background:linear-gradient(90deg,#0ea5e9,#38bdf8);}
.trot-card--jyj .trot-card__line{background:linear-gradient(90deg,#ec4899,#f9a8d4);}
.trot-card--ege .trot-card__line{background:linear-gradient(90deg,#10b981,#6ee7b7);}
.trot-card--khy .trot-card__line{background:linear-gradient(90deg,#f97316,#fdba74);}
.trot-card--jdk .trot-card__line{background:linear-gradient(90deg,#f59e0b,#fde68a);}
.trot-card:hover .trot-card__line{opacity:1;}
/* ══════════════════════════════════════════════════════
마트TV 섹션
══════════════════════════════════════════════════════ */
#section-smarttv #broadcast {
min-height: 100vh;
min-height: 100dvh;
position: relative;
z-index: 0;
}
#section-smarttv .broadcast-container {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
padding: 0;
}
/* ══════════════════════════════════════════════════════
방송 카드
══════════════════════════════════════════════════════ */
.popular-card {
display: flex;
overflow: hidden;
align-items: center;
background-color: var(--bg-1);
border: 1px solid var(--border);
border-radius: 16px;
padding: 0.7rem;
opacity: 0;
box-shadow: 0 0 7px rgba(var(--accent-rgb), .25);
transform: translateY(50px);
transition: transform 0.5s ease-out, box-shadow 0.2s ease, opacity 0.6s ease-out;
}
.popular-card.visible {
opacity: 1;
transform: translateY(0);
}
.popular-card:hover {
box-shadow: 0 0 15px rgba(var(--accent-rgb), .35);
border-color: var(--border-h);
}
.popular-card .cardimg {
overflow: hidden;
width: 140px;
height: 140px;
flex-shrink: 0;
border-radius: 14px;
margin-right: 5px;
border: 1px solid var(--border);
box-shadow: 0 0 5px rgba(var(--accent-rgb), .15);
cursor: pointer;
}
.popular-card:hover .cardimg{
box-shadow: 0 0 0 rgba(var(--accent-rgb), 0);
}
.popular-card .cardimg img.img_container {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s ease-in-out, filter 1s ease-in-out;
}
.popular-card .cardimg img.img_container:hover {
transform: scale(1.2);
filter: brightness(1.05) contrast(1.15) saturate(1.4) hue-rotate(-10deg);
}
.popular-card .info {
flex: 1;
padding-left: 5px;
margin-top: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.game_title {
font-size: 0.8rem;
font-weight: 700;
color: var(--accent);
line-height: 1.5;
}
.Loading {
font-size: 0.7rem;
font-weight: 600;
color: var(--accent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.listen {
margin: 0;
font-size: 0.7rem;
color: var(--text-2);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.stv-card-actions {
display:flex;
justify-content:center;
align-items:center;
gap:8px;
margin-top:2px;
}
.play_button {
font-size: .8rem;
font-weight: 500;
padding: 7px 20px;
margin: 5px auto;
text-align: center;
appearance: none;
-webkit-appearance: none;
background: linear-gradient(135deg, var(--pink), var(--accent));
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 0 6px rgba(var(--accent-rgb), .35);
transition: transform .1s ease-in, box-shadow .25s ease-in;
}
.play_button:hover {
filter: brightness(1.12);
box-shadow: 0 0 6px rgba(var(--accent-rgb), .75);
}
/* ══════════════════════════════════════════════════════
스마트TV 즐겨찾기
══════════════════════════════════════════════════════ */
.stv-tabs {
display:flex;
gap:8px;
margin-bottom:14px;
}
.stv-tab {
display:inline-flex; align-items:center; gap:6px;
padding:7px 18px; border-radius:20px;
border:1px solid var(--border); background:var(--bg-2);
color:var(--text-2); font-size:.8rem; font-weight:600;
font-family:inherit; cursor:pointer; transition:all .18s;
}
.stv-tab:hover { border-color:var(--accent); color:var(--accent);}
.stv-tab.active {
background:rgba(var(--accent-rgb),.15);
border-color:rgba(var(--accent-rgb),.5);
color:var(--accent);
}
.stv-fav-badge {
display:none; align-items:center; justify-content:center;
min-width:18px; height:18px; padding:0 5px;
border-radius:10px; background:var(--accent);
color:#fff; font-size:.65rem; font-weight:700;
}
.stv-fav-btn {
position: absolute;
top: 5px;
right: 5px;
display:inline-flex;
align-items:center;
justify-content:center;
width:25px;
height:25px;
border-radius:50%;
border:1px solid var(--border);
background:rgba(var(--accent-rgb),.15);
color:var(--text-3);
font-size:.85rem;
cursor:pointer;
transition:all .18s;
flex-shrink:0;
}
.stv-fav-btn:hover {
border-color:#fb7185;
color:#fb7185;
background:rgba(251,113,133,.1);
}
.stv-fav-on .stv-fav-btn {
border-color:#fb7185;
color:#fb7185;
background:rgba(251,113,133,.12);
}
@keyframes stvFavPop {
0% { transform:scale(1);}
40% { transform:scale(1.4);}
70% { transform:scale(.88);}
100%{ transform:scale(1);}
}
.stv-fav-pop { animation:stvFavPop .35s cubic-bezier(.4,0,.2,1) both;}
.stv-fav-empty { padding:40px; text-align:center; color:var(--text-3); font-size:.85rem;}
/* ══════════════════════════════════════════════════════
TV 배경 파티클 애니메이션
══════════════════════════════════════════════════════ */
.tv-pixel {
position: absolute;
width: 3px;
height: 3px;
border-radius: 1px;
background: var(--accent);
opacity: 0;
animation: tvBlink 1.2s ease-in-out infinite;
}
@keyframes tvBlink {
0%, 100% { opacity: 0; transform: scale(.8);}
50% { opacity: .5; transform: scale(1.2);}
}
.tv-scanline {
position: absolute;
left: 0;
right: 0;
height: 1.5px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .3), transparent);
opacity: .35;
animation: tvScan 4s linear infinite;
}
@keyframes tvScan {
0% { top: 0%; opacity: 0;}
10% { opacity: .35;}
90% { opacity: .35;}
100% { top: 100vh; opacity: 0;}
}
/* ══════════════════════════════════════════════════════
신보 섹션
══════════════════════════════════════════════════════ */
.nr-hero-header {
padding: 4px 0 24px;
border-bottom: 1px solid var(--border);
margin-bottom: 22px;
}
.nr-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 10px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
}
.nr-live-dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
animation: npPulse 1.4s ease-in-out infinite;
}
.nr-hero-sub {
font-size: 12px;
color: var(--text-3);
margin: 6px 0 0;
line-height: 1.6;
}
.nr-card-num {
position: absolute;
top: 11px; right: 13px;
font-family: 'Syne', sans-serif;
font-size: 14px;
font-weight: 800;
color: var(--text-3);
opacity: .35;
pointer-events: none;
}
#section-newrelease .slide-card {
border-radius: 18px;
transition: transform .28s cubic-bezier(.25,.46,.45,.94), box-shadow .25s, border-color .2s;
}
#section-newrelease .slide-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0,0,0,.22);
border-color: rgba(var(--accent-rgb),.35);
}
#section-newrelease .sc-icon {
transition: filter .3s;
}
#section-newrelease .slide-card:hover .sc-icon {
filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),.55));
}
#section-newrelease .sc-title { font-size: 14px; font-weight: 800;}
.nr-card-all { border-style: dashed !important; opacity: .6;}
.nr-card-all:hover { opacity: 1 !important;}
.nr-comment-card {
display: flex;
border-radius: 18px;
overflow: hidden;
background: var(--bg-2);
border: 1px solid var(--border);
margin-top: 4px;
}
.nr-comment-accent {
width: 4px;
flex-shrink: 0;
background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb),.2));
}
.nr-comment-inner {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 22px 22px 22px 20px;
flex: 1;
}
.nr-comment-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: rgba(var(--accent-rgb),.12);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
margin-top: 2px;
}
/* ══════════════════════════════════════════════════════
라이브/이벤트 섹션
══════════════════════════════════════════════════════ */
.lv-hero-header {
padding: 4px 0 22px;
border-bottom: 1px solid var(--border);
margin-bottom: 22px;
}
.lv-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 10px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
background: rgba(var(--accent-rgb),.08);
border: 1px solid rgba(var(--accent-rgb),.16);
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 10px;
}
.lv-live-dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
animation: npPulse 1.2s ease-in-out infinite;
}
.lv-hero-sub {
font-size: 12px;
color: var(--text-3);
margin: 6px 0 0;
line-height: 1.6;
}
.lv-notice-card {
display: flex;
gap: 18px;
align-items: flex-start;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 18px;
padding: 22px 24px;
position: relative;
overflow: hidden;
}
.lv-notice-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 100% 0%, rgba(var(--accent-rgb),.05), transparent 55%);
pointer-events: none;
}
.lv-notice-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px;}
/* ══════════════════════════════════════════════════════
소개 섹션
══════════════════════════════════════════════════════ */
.ab-identity-card {
display: flex;
align-items: center;
gap: 18px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
border: 1px solid var(--border);
border-radius: 22px;
padding: 24px 26px;
margin-bottom: 12px;
position: relative;
overflow: hidden;
animation: cardIn .45s ease both;
}
.ab-identity-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 10% 50%, rgba(var(--accent-rgb),.08), transparent 55%);
pointer-events: none;
}
.ab-identity-icon {
width: 58px; height: 58px;
border-radius: 16px;
background: rgba(var(--accent-rgb),.13);
border: 1px solid rgba(var(--accent-rgb),.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--accent);
flex-shrink: 0;
}
.ab-identity-info {
lex: 1;
min-width: 0;
}
.ab-identity-label {
font-size: 9px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
opacity: .7;
margin-bottom: 4px;
}
.ab-identity-name {
font-family: 'NEXON Lv1 Gothic OTF', 'Malgun Gothic', sans-serif;
font-size: 26px;
font-weight: 800;
color: var(--text-1);
line-height: 1;
letter-spacing: -.5px;
margin-bottom: 5px;
}
.ab-identity-tags { font-size: 11px; color: var(--text-3);}

.ab-stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.ab-stat-item {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px 8px;
text-align: center;
transition: border-color .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
animation: cardIn .45s ease both;
}
.ab-stat-item:hover {
border-color: rgba(var(--accent-rgb),.3);
transform: translateY(-4px);
}
.ab-stat-num {
font-family: 'Syne', sans-serif;
font-size: 22px;
font-weight: 800;
color: var(--accent);
line-height: 1;
margin-bottom: 5px;
}
.ab-stat-lbl {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-3);
}
.ab-block-card {
border-radius: 18px !important;
}
.ab-block-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
.ab-block-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.ab-block-card--dim { border-style: dashed !important;}
.ab-block-card--dim .ab-block-label { color: var(--text-3); opacity: .75;}
/* ══════════════════════════════════════════════════════
신보 — 강화 카드 스타일
══════════════════════════════════════════════════════ */
.nr-card-featured {
display: flex;
flex-direction: column;
gap: 0;
}
.nr-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 10px;
}
.nr-card-meta-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
margin-top: 15px;
}
.nr-meta-badge {
font-size: 8px;
padding: 2px 7px;
border-radius: 6px;
height: 15px;
text-transform: uppercase;
}
.nr-meta-badge--green { background: rgba(34,197,94,.18); color: #22c55e;}
.nr-meta-badge--red { background: rgba(239,68,68,.18); color: #ef4444;}
.nr-meta-badge--purple { background: rgba(139,92,246,.18); color: #a78bfa;}
.nr-meta-badge--blue { background: rgba(59,130,246,.18); color: #60a5fa;}
.nr-meta-badge--gold { background: rgba(234,179,8,.18); color: #eab308;}
.nr-meta-badge--auto { background: rgba(var(--accent-rgb), .18); color: var(--accent);}
.nr-meta-date {
font-size: 9px;
color: var(--text-3);
letter-spacing: .5px;
}
.nr-card-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 8px 0 6px;
}
.nr-tag {
font-size: 9px;
padding: 2px 7px;
border-radius: 8px;
background: rgba(var(--accent-rgb),.08);
border: 1px solid rgba(var(--accent-rgb),.18);
color: var(--text-3);
font-weight: 600;
}
.nr-card-footer {
display: flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid var(--border);
font-size: 11px;
color: var(--accent);
font-weight: 700;
}
.nr-footer-icon { font-size: 14px;}
/* ══════════════════════════════════════════════════════
앨범 섹션 — 음반 판매 카드
══════════════════════════════════════════════════════ */
.album-shop-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 20px;
}
.album-shop-card {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: transform .22s, box-shadow .22s, border-color .22s;
animation: cardIn .4s ease both;
}
.album-shop-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 36px rgba(0,0,0,.28);
border-color: rgba(var(--accent-rgb),.35);
}
.asc-cover {
width: 100%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 52px;
position: relative;
overflow: hidden;
}
.asc-cover--1 { background: linear-gradient(135deg,#1a1a3e,#2d1b69);}
.asc-cover--2 { background: linear-gradient(135deg,#1a2e1a,#0f4030);}
.asc-cover--3 { background: linear-gradient(135deg,#0d2818,#1a4020);}
.asc-cover--4 { background: linear-gradient(135deg,#3d1010,#5c1515);}
.asc-cover--5 { background: linear-gradient(135deg,#1a1040,#2a0a50);}
.asc-cover--6 { background: linear-gradient(135deg,#2a1a0a,#4a2800);}
.asc-badge {
position: absolute;
top: 10px;
left: 10px;
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
padding: 3px 8px;
border-radius: 8px;
z-index: 2;
text-transform: uppercase;
}
.asc-badge--new { background: rgba(34,197,94,.92); color: #fff;}
.asc-badge--hot { background: rgba(239,68,68,.92); color: #fff;}
.asc-badge--sale { background: rgba(234,179,8,.92); color: #000;}
.asc-emoji {
position: relative;
z-index: 1;
filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
line-height: 1;
}
.asc-play-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.45);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 28px;
opacity: 0;
transition: opacity .2s;
z-index: 3;
}
.album-shop-card:hover .asc-play-overlay { opacity: 1;}
.asc-body {
padding: 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.asc-title {
font-family: 'NEXON Lv1 Gothic OTF', 'Malgun Gothic', sans-serif;
font-size: 14px;
font-weight: 800;
color: var(--accent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.asc-artist {
font-size: 11px;
color: var(--text-3);
}
.asc-meta {
display: flex;
align-items: center;
gap: 8px;
margin: 3px 0;
}
.asc-genre {
font-size: 9px;
font-weight: 700;
padding: 2px 7px;
border-radius: 6px;
background: rgba(var(--accent-rgb),.12);
color: var(--accent);
}
.asc-tracks {
font-size: 10px;
color: var(--text-3);
}
.asc-year {
font-size: 10px;
color: var(--text-3);
}
.asc-price-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.asc-price {
font-family: 'Syne', sans-serif;
font-size: 16px;
font-weight: 800;
color: var(--accent);
}
.asc-price-cd {
font-size: 10px;
color: var(--text-3);
padding: 2px 6px;
border: 1px solid var(--border);
border-radius: 6px;
}
.asc-price-original {
font-size: 11px;
color: var(--text-3);
text-decoration: line-through;
}
.asc-sale-tag {
font-size: 10px;
color: #eab308;
font-weight: 700;
margin-top: -2px;
}
.asc-btns {
display: flex;
gap: 6px;
margin-top: 10px;
}
.asc-btn {
flex: 1;
padding: 7px 6px;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
border: none;
cursor: pointer;
transition: opacity .15s, background .15s;
}
.asc-btn--buy {
background: var(--accent);
color: #fff;
}
.asc-btn--buy:hover { opacity: .85;}
.asc-btn--stream {
background: rgba(var(--accent-rgb),.12);
color: var(--accent);
border: 1px solid rgba(var(--accent-rgb),.25);
}
.asc-btn--stream:hover { background: rgba(var(--accent-rgb),.22);}
#member-limit-toast {
position: fixed;
bottom: 110px;
right: 20px;
z-index: 9999;
width: 300px;
background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-1) 100%);
border: 1px solid rgba(var(--accent-rgb),.35);
border-left: 3px solid var(--accent);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,.45),
0 0 0 1px rgba(var(--accent-rgb),.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 13px 14px 13px 15px;
display: flex;
align-items: flex-start;
gap: 10px;
animation: mlt-in .35s cubic-bezier(.22,1,.36,1) both;
overflow: hidden;
}
#member-limit-toast.mlt-hide {
animation: mlt-out .4s ease forwards;
}
@keyframes mlt-in {
from { opacity:0; transform:translateX(30px) scale(.95);}
to { opacity:1; transform:translateX(0) scale(1);}
}
@keyframes mlt-out {
from { opacity:1; transform:translateX(0) scale(1);}
to { opacity:0; transform:translateX(30px) scale(.92);}
}
#member-limit-toast .mlt-bar {
position: absolute;
bottom: 0; left: 0;
height: 3px;
width: 100%;
background: var(--accent);
border-radius: 0 0 12px 12px;
transform-origin: left;
animation: mlt-bar 5s linear both;
}
@keyframes mlt-bar {
from { transform: scaleX(1);}
to { transform: scaleX(0);}
}
#member-limit-toast .mlt-icon {
font-size: 20px;
line-height: 1;
flex-shrink: 0;
margin-top: 1px;
}
#member-limit-toast .mlt-body {
flex: 1;
font-size: .75rem;
color: var(--text-1, #e2e8f0);
line-height: 1.5;
}
#member-limit-toast .mlt-body strong {
display: block;
font-size: .88rem;
font-weight: 700;
color: var(--accent);
margin-bottom: 3px;
}
#member-limit-toast .mlt-btn {
display: inline-block;
margin-top: 7px;
padding: 7px 12px;
border-radius: 20px;
background: var(--accent);
color: #fff;
font-size: .78rem;
font-weight: 600;
cursor: pointer;
border: none;
transition: opacity .2s;
}
#member-limit-toast .mlt-btn:hover { opacity: .82;}
#member-limit-toast .mlt-close {
position: absolute;
top: 7px; right: 9px;
background: none;
border: none;
color: var(--text-3, #64748b);
font-size: 13px;
cursor: pointer;
line-height: 1;
padding: 2px;
}
#member-limit-toast .mlt-close:hover { color: var(--text-1, #e2e8f0);}
/* ══ VIP 토스트 ══ */
#vip-only-toast {
position: fixed;
bottom: 110px;
right: 20px;
z-index: 9999;
width: 300px;
background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-1) 100%);
border: 1px solid rgba(var(--accent-rgb),.35);
border-left: 3px solid var(--accent);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--accent-rgb),.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 13px 14px 13px 15px;
display: flex;
align-items: flex-start;
gap: 10px;
animation: mlt-in .35s cubic-bezier(.22,1,.36,1) both;
overflow: hidden;
}
#vip-only-toast.mlt-hide {
animation: mlt-out .4s ease forwards;
}
#vip-only-toast .mlt-bar {
position: absolute;
bottom: 0; left: 0;
height: 3px;
width: 100%;
background: var(--accent);
border-radius: 0 0 12px 12px;
transform-origin: left;
animation: mlt-bar 8s linear both;
}
#vip-only-toast .mlt-icon { font-size: 20px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
#vip-only-toast .mlt-body { flex: 1; font-size: .75rem; color: var(--text-1, #e2e8f0); line-height: 1.5; }
#vip-only-toast .mlt-body strong { display: block; font-size: .88rem; font-weight: 700; color: var(--accent); margin-bottom: 3px; }
#vip-only-toast .mlt-btn {
display: inline-block; margin-top: 7px; padding: 7px 12px;
border-radius: 20px; background: var(--accent); color: #fff;
font-size: .78rem; font-weight: 600; cursor: pointer; border: none; transition: opacity .2s;
}
#vip-only-toast .mlt-btn:hover { opacity: .82; }
#vip-only-toast .mlt-close {
position: absolute; top: 7px; right: 9px;
background: none; border: none;
color: var(--text-3, #64748b); font-size: 13px; cursor: pointer; line-height: 1; padding: 2px;
}
#vip-only-toast .mlt-close:hover { color: var(--text-1, #e2e8f0); }
.blink {
animation: fadeBlink 1.4s ease-in-out infinite;
}
@keyframes fadeBlink {
0%, 100% { opacity: 1;}
50% { opacity: 0.15;}
}
/* ══════════════════════════════════════════════════════
BOOKMARK SYSTEM — 찜 기능
══════════════════════════════════════════════════════ */
.vbm-btn {
position: absolute;
top: 9px; right: 9px;
z-index: 5;
width: 34px; height: 34px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,.22);
background: rgba(0,0,0,.38);
color: rgba(255,255,255,.75);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
font-size: .95rem;
transition: background .2s, border-color .2s, color .2s, transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
backdrop-filter: blur(6px);
-webkit-tap-highlight-color: transparent;
}
.vbm-btn:hover {
background: rgba(var(--accent-rgb),.22);
border-color: rgba(var(--accent-rgb),.55);
color: var(--accent);
transform: scale(1.12);
}
.vbm-btn.is-saved {
background: rgba(var(--accent-rgb),.28);
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 0 14px rgba(var(--accent-rgb),.55), 0 0 4px rgba(var(--accent-rgb),.3);
}
.vbm-btn.is-saved i { font-weight: 900;}
@keyframes bmHeartPop {
0% { transform: scale(1);}
35% { transform: scale(1.45);}
60% { transform: scale(.88);}
80% { transform: scale(1.18);}
100% { transform: scale(1);}
}
.vbm-btn.pop { animation: bmHeartPop .5s cubic-bezier(.34,1.56,.64,1) both;}
.bm-topbar-btn {
position: relative;
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg-1);
color: var(--text-2);
font-size: .95rem;
cursor: pointer;
transition: all .18s;
flex-shrink: 0;
}
.bm-topbar-btn:hover {
border-color: rgba(var(--accent-rgb),.55);
color: var(--accent);
background: rgba(var(--accent-rgb),.1);
box-shadow: 0 0 10px rgba(var(--accent-rgb),.3);
}
.bm-badge {
position: absolute;
top: -5px;
right: -4px;
font-family:'Syne', sans-serif;
font-weight: 700;
margin-left: auto;
font-size: 8px;
background: rgba(var(--accent-rgb),.4);
color: var(--accent);
padding: 0 6px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
height:15px;
line-height: 15px;
white-space: nowrap;
}
[data-theme^="light"] .bm-badge {
color: #FFF;
}
#bm-overlay {
position: fixed; inset: 0;
z-index: 9000;
background: rgba(0,0,0,.5);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity .3s;
}
#bm-overlay.open {
opacity: 1;
pointer-events: auto;
}
#bm-drawer {
position: fixed;
top: 0; right: 0;
width: min(100vw, 480px);/*화면 너비의 100%와 480px 중 작은 값*/
height: 100vh;
height: 100dvh;
z-index: 9001;
background: var(--bg-1, #0d0d1a);
border-left: 1px solid rgba(var(--accent-rgb),.18);
box-shadow: none;
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform .38s cubic-bezier(.32,.72,0,1);
will-change: transform;
}
#bm-drawer.open { transform: translateX(0);box-shadow: -12px 0 60px rgba(0,0,0,.6);}
.bm-drawer-head {
display: flex; align-items: center;
padding: 18px 18px 14px;
border-bottom: 1px solid rgba(var(--accent-rgb),.12);
gap: 10px;
flex-shrink: 0;
background: linear-gradient(90deg, rgba(var(--accent-rgb),.12) 0%, transparent 70%);
}
.bm-drawer-head-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: rgba(var(--accent-rgb),.14);
display: flex; align-items: center; justify-content: center;
color: var(--accent);
font-size: 1rem;
}
.bm-drawer-head-text { flex: 1;}
.bm-drawer-head-title {
font-size: .9rem; font-weight: 700;
color: var(--text-2);
line-height: 1.2;
}
.bm-drawer-head-sub {
font-size: .68rem; color: var(--text-2);
margin-top: 1px;
}
.bm-drawer-close {
width: 30px; height: 30px;
border-radius: 8px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-2);
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 1.25rem;
transition: all .15s;
}
.bm-drawer-close:hover { background: rgba(var(--accent-rgb),.12); color: var(--accent);}
.bm-drawer-actions {
display: flex; gap: 8px;
padding: 10px 16px;
border-bottom: 1px solid rgba(var(--accent-rgb),.08);
flex-shrink: 0;
}
.bm-action-btn {
flex: 1;
display: flex; align-items: center; justify-content: center; gap: 5px;
padding: 7px;
border-radius: 9px;
border: 1px solid rgba(var(--accent-rgb),.2);
background: rgba(var(--accent-rgb),.06);
color: var(--accent);
font-size: .7rem; font-weight: 600;
cursor: pointer; transition: all .18s;
font-family: inherit;
}
.bm-action-btn:hover { background: rgba(var(--accent-rgb),.16); border-color: rgba(var(--accent-rgb),.45);}
.bm-action-btn.danger { border-color: rgba(255,80,80,.25); background: rgba(255,80,80,.06); color: #ff6060;}
.bm-action-btn.danger:hover { background: rgba(255,80,80,.16);}
.bm-drawer-list {
flex: 1;
overflow-y: auto;
padding: 10px;
scrollbar-width: thin;
scrollbar-color: rgba(var(--accent-rgb),.2) transparent;
}
.bm-drawer-list::-webkit-scrollbar { width: 4px;}
.bm-drawer-list::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),.25); border-radius: 4px;}
.bm-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 8px;
border-radius: 12px;
border: 1px dashed transparent;
cursor: pointer;
transition: background .18s, border-color .18s;
position: relative;
margin-bottom: 3px;
}
.bm-item:last-child {
margin-bottom: 0;
}
.bm-item:hover {
background: rgba(var(--accent-rgb),.07);
border-color: rgba(var(--accent-rgb),.18);
}
.bm-item-thumb {
width: 78px; height: 44px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
background: var(--bg-2);
position: relative;
}
.bm-item-thumb.is-vertical {
width: 25px; height: 44px;
}
.bm-item-thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .35s;
}
.bm-vert-badge {
display: inline-block;
font-size: .55rem; font-weight: 700;
color: #fff;
background: linear-gradient(135deg, rgba(var(--accent-rgb),1), rgba(var(--accent-rgb),.65));
border-radius: 4px;
padding: 1px 4px;
margin-right: 4px;
vertical-align: middle;
line-height: 1.5;
letter-spacing: .02em;
}
.bm-item:hover .bm-item-thumb img { transform: scale(1.06);}
.bm-item-thumb-play {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,.35);
opacity: 0;
transition: opacity .2s;
font-size: .8rem;
color: #fff;
}
.bm-item:hover .bm-item-thumb-play { opacity: 1;}
.bm-item-info { flex: 1; min-width: 0;}
.bm-item-title {
font-size: .75rem; font-weight: 500;
color: var(--text-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.4;
}
.bm-item-date {
font-size: .62rem; color: var(--text-3);
margin-top: 3px;
}
.bm-item-del {
width: 26px; height: 26px;
border-radius: 7px;
border: 1px solid var(--text-3);
background: transparent;
color: var(--text-3);
display: flex; align-items: center; justify-content: center;
font-size: .7rem; cursor: pointer;
transition: all .15s;
flex-shrink: 0;
opacity: 1;
}
.bm-item-del:hover { background: rgba(255,80,80,.14); color: #ff5555; border-color: rgba(255,80,80,.5);}
@keyframes bmItemOut {
to { opacity: 0; transform: translateX(30px) scale(.92); max-height: 0; padding: 0; margin: 0; overflow: hidden;}
}
.bm-item.removing { animation: bmItemOut .3s cubic-bezier(.55,0,1,.45) forwards; pointer-events: none;}
/* ══ 동영상찜 선택재생 툴바 ══ */
.bm-sel-toolbar {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-bottom: 1px solid rgba(var(--accent-rgb),.1);
background: rgba(var(--accent-rgb),.04);
flex-shrink: 0;
}
.bm-sel-count {
font-size: .72rem;
color: var(--text-2);
margin-right: auto;
white-space: nowrap;
}
.bm-sel-count b { color: var(--accent); font-weight: 700;}
.bm-sel-btns { display: flex; gap: 5px; align-items: center;}
.bm-sel-btn {
display: inline-flex; align-items: center; gap: 3px;
padding: 4px 10px; border-radius: 7px;
border: 1.5px solid transparent;
font-size: .68rem; font-weight: 700;
cursor: pointer; transition: all .14s;
font-family: inherit; white-space: nowrap;
}
.bm-sel-btn--all {
background: rgba(var(--accent-rgb),.1);
border-color: rgba(var(--accent-rgb),.3);
color: var(--accent);
}
.bm-sel-btn--all:hover { background: rgba(var(--accent-rgb),.2);}
.bm-sel-btn--all.is-all { box-shadow: 0 0 8px rgba(var(--accent-rgb),.5);}
.bm-sel-btn--play {
background: rgba(var(--accent-rgb),.18);
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 0 8px rgba(var(--accent-rgb),.75);
}
.bm-sel-btn--play:hover:not(:disabled) {
box-shadow: 0 4px 14px rgba(var(--accent-rgb),.55);
transform: translateY(-1px);
}
.bm-sel-btn--play:disabled {
cursor: not-allowed;
transform: none;
box-shadow: none;
background: rgba(var(--accent-rgb),.08);
border-color: rgba(var(--accent-rgb),.25);
color: var(--text-3);
transition: all .14s;
}
.bm-sel-btn--cancel {
background: rgba(var(--accent-rgb),.08);
border-color: rgba(var(--accent-rgb),.25);
color: var(--accent);
padding: 4px 8px;
}
.bm-sel-btn--cancel:hover { background: rgba(255,80,80,.12); border-color: rgba(255,80,80,.3); color: #f87171;}
.bm-sel-btn--repeat {
background: rgba(var(--accent-rgb),.08);
border-color: rgba(var(--accent-rgb),.25);
color: var(--text-3);
transition: all .14s;
}
.bm-sel-btn--repeat:hover { background: rgba(var(--accent-rgb),.18); color: var(--accent);}
.bm-sel-btn--repeat.is-repeat {
background: rgba(var(--accent-rgb),.18);
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 0 8px rgba(var(--accent-rgb),.75);
}
.bm-item-cb-wrap {
position: relative; flex-shrink: 0;
width: 18px; height: 18px;
cursor: pointer; line-height: 0;
}
.bm-item-cb {
position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.bm-item-cb-box {
position: relative; width: 18px; height: 18px;
border-radius: 5px;
border: 1.5px solid rgba(var(--accent-rgb),.45);
background: rgba(0,0,0,.25);
display: flex; align-items: center; justify-content: center;
transition: background .15s, border-color .15s;
}
.bm-item-cb-wrap:hover .bm-item-cb-box { border-color: rgba(var(--accent-rgb),.9);}
.bm-item.bm-item-checked .bm-item-cb-box {
background: var(--accent);
border-color: var(--accent);
}
.bm-item-cb-box svg { width: 11px; height: 11px;}
.bm-item-cb-box svg polyline {
fill: none; stroke: #fff; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 20; stroke-dashoffset: 20;
transition: stroke-dashoffset .15s;
}
.bm-item.bm-item-checked .bm-item-cb-box svg polyline { stroke-dashoffset: 0;}
.bm-item.bm-item-checked {
background: rgba(var(--accent-rgb),.08);
border-color: rgba(var(--accent-rgb),.35) !important;
}
[data-theme^="light"] .bm-sel-toolbar { background: rgba(var(--accent-rgb),.05);}
[data-theme^="light"] .bm-item-cb-box { background: rgba(255,255,255,.6); border-color: rgba(var(--accent-rgb),.5);}

.bm-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 60px 20px;
text-align: center;
color: var(--text-1);
gap: 12px;
}
.bm-empty-icon {
font-size: 2.8rem;
opacity: .25;
filter: grayscale(1);
}
.bm-empty-title { font-size: .85rem; font-weight: 600; color: var(--text-2);}
.bm-empty-sub { font-size: .72rem; line-height: 1.6;}
.bm-loading {
display: flex; align-items: center; justify-content: center;
padding: 50px 0; gap: 8px;
color: var(--text-1); font-size: .78rem;
}
@keyframes bmSpin { to { transform: rotate(360deg);} }
.bm-loading i { animation: bmSpin .8s linear infinite; color: var(--accent);}
.bm-login-req {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 60px 24px; gap: 14px; text-align: center;
}
.bm-login-req-icon { font-size: 2.5rem; opacity: .3;}
.bm-login-req-title { font-size: .88rem; font-weight: 700; color: var(--text-2);}
.bm-login-req-sub { font-size: .73rem; color: var(--text-1); line-height: 1.6;}
.bm-login-btn {
margin-top: 4px;
padding: 9px 22px;
border-radius: 20px;
border: 1px solid rgba(var(--accent-rgb),.45);
background: rgba(var(--accent-rgb),.12);
color: var(--accent);
font-size: .78rem; font-weight: 700;
cursor: pointer; font-family: inherit;
transition: all .18s;
}
.bm-login-btn:hover { background: rgba(var(--accent-rgb),.22); box-shadow: 0 0 12px rgba(var(--accent-rgb),.35);}
/* ══════════════════════════════════════════════════════
SHARE SYSTEM — 공유 기능
══════════════════════════════════════════════════════ */
.ap-share-btn { color: var(--text-2); transition: color .2s;}
.ap-share-btn:hover { color: var(--accent);}
.ap-share-btn i { font-size: 1.1rem;}
.ap-fav-btn { color: var(--text-2); transition: color .2s;}
.ap-fav-btn:hover { color: var(--accent);}
.ap-fav-btn i { font-size: 1.05rem;}
.ap-fav-badge {
position: absolute;
top: -2px;
right: -2px;
font-family:'Syne', sans-serif;
font-weight: 700;
margin-left: auto;
font-size: 8px;
background: rgba(var(--accent-rgb),.4);
color: var(--accent);
padding: 0 6px 1px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
height:15px;
line-height: 15px;
white-space: nowrap;
}
[data-theme^="light"] .ap-fav-badge {
color: #FFF;
}
#share-popup-overlay {
position: fixed; inset: 0; z-index: 9100;
background: rgba(0,0,0,.55);
backdrop-filter: blur(5px);
opacity: 0; pointer-events: none;
transition: opacity .25s;
}
#share-popup-overlay.open { opacity: 1; pointer-events: auto;}
#share-popup {
position: fixed;
bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
z-index: 9101;
width: min(92vw, 340px);
background: var(--bg-0, #0d0d1a);
border: 1px solid rgba(var(--accent-rgb),.22);
border-radius: 20px;
padding: 18px 18px 16px;
box-shadow: 0 24px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--accent-rgb),.08);
opacity: 0; pointer-events: none;
transition: opacity .28s cubic-bezier(.32,.72,0,1), transform .28s cubic-bezier(.32,.72,0,1);
}
#share-popup.open {
opacity: 1; pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.share-popup-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.share-popup-title {
font-size: .88rem; font-weight: 700;
color: var(--text-3);
display: flex; align-items: center; gap: 7px;
}
.share-popup-title i { color: var(--accent);}
.share-popup-close {
width: 28px; height: 28px; border-radius: 8px;
border: 1px solid var(--border); background: transparent;
color: var(--text-2); cursor: pointer; font-size: .8rem;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.share-popup-close:hover { background: rgba(var(--accent-rgb),.12); color: var(--accent);}
.share-popup-song {
font-size: .75rem; color: var(--text-2);
background: rgba(var(--accent-rgb),.07);
border: 1px solid rgba(var(--accent-rgb),.12);
border-radius: 10px; padding: 8px 12px;
margin-bottom: 14px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.5;
}
.share-popup-btns {
display: flex; gap: 8px;
}
.share-btn {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 6px;
padding: 12px 6px;
border-radius: 14px; border: 1px solid transparent;
font-size: .68rem; font-weight: 700;
cursor: pointer; font-family: inherit;
transition: all .2s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color: transparent;
}
.share-btn:hover { transform: translateY(-3px);}
.share-btn:active { transform: scale(.94);}
.share-btn--kakao {
background: #FEE500; color: #3C1E1E;
border-color: rgba(254,229,0,.5);
}
.share-btn--kakao:hover {
background: #FFD700;
box-shadow: 0 6px 20px rgba(254,229,0,.45);
}
.share-btn--copy {
background: rgba(var(--accent-rgb),.1);
border-color: rgba(var(--accent-rgb),.3);
color: var(--accent);
}
.share-btn--copy:hover {
background: rgba(var(--accent-rgb),.2);
box-shadow: 0 6px 20px rgba(var(--accent-rgb),.3);
}
.share-btn--x {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.15);
color: var(--text-3);
}
.share-btn--x:hover {
background: rgba(255,255,255,.12);
box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.share-copy-toast {
margin-top: 12px;
text-align: center;
font-size: .72rem; font-weight: 600;
color: var(--accent);
background: rgba(var(--accent-rgb),.1);
border-radius: 8px; padding: 7px;
opacity: 0;
transition: opacity .3s;
pointer-events: none;
}
.share-copy-toast.show { opacity: 1;}
/* ══════════════════════════════════════════════════════
SHARE EMAIL MODAL — 이메일 공유 모달
══════════════════════════════════════════════════════ */
#share-email-overlay {
position: fixed; inset: 0; z-index: 9200;
background: rgba(0,0,0,.6);
backdrop-filter: blur(6px);
opacity: 0; pointer-events: none;
transition: opacity .25s;
}
#share-email-overlay.open { opacity: 1; pointer-events: auto;}
#share-email-modal {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -48%) scale(.96);
z-index: 9201;
width: min(92vw, 420px);
background: var(--bg-0, #0d0d1a);
border: 1px solid rgba(var(--accent-rgb),.22);
border-radius: 22px;
box-shadow: 0 30px 90px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--accent-rgb),.06);
opacity: 0; pointer-events: none;
transition: opacity .3s cubic-bezier(.32,.72,0,1), transform .3s cubic-bezier(.32,.72,0,1);
overflow: hidden;
}
#share-email-modal.open {
opacity: 1; pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.sem-head {
display: flex; align-items: center; gap: 12px;
padding: 20px 20px 16px;
border-bottom: 1px solid rgba(var(--accent-rgb),.1);
background: linear-gradient(135deg, rgba(var(--accent-rgb),.08) 0%, transparent 100%);
}
.sem-icon {
width: 40px; height: 40px; border-radius: 12px;
background: rgba(var(--accent-rgb),.15);
display: flex; align-items: center; justify-content: center;
color: var(--accent); font-size: 1.1rem; flex-shrink: 0;
}
.sem-head-text { flex: 1; min-width: 0;}
.sem-title { font-size: .92rem; font-weight: 700; color: var(--text-3);}
.sem-sub { font-size: .7rem; color: var(--text-1); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sem-close {
width: 30px; height: 30px; border-radius: 8px;
border: 1px solid var(--border); background: transparent;
color: var(--text-2); cursor: pointer; font-size: .82rem;
display: flex; align-items: center; justify-content: center;
transition: all .15s; flex-shrink: 0;
}
.sem-close:hover { background: rgba(var(--accent-rgb),.12); color: var(--accent);}
.sem-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px;}
.sem-field { display: flex; flex-direction: column; gap: 6px;}
.sem-label {
font-size: .72rem; font-weight: 600; color: var(--text-2);
display: flex; align-items: center; gap: 6px;
}
.sem-label i { color: var(--accent); font-size: .68rem;}
.sem-optional { font-weight: 400; color: var(--text-1); font-size: .68rem;}
.sem-input {
width: 100%; padding: 11px 14px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(var(--accent-rgb),.18);
border-radius: 11px; color: var(--text-3);
font-size: .82rem; font-family: inherit;
transition: border-color .2s, box-shadow .2s;
box-sizing: border-box;
outline: none;
}
.sem-input:focus {
border-color: rgba(var(--accent-rgb),.55);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.1);
background: rgba(var(--accent-rgb),.04);
}
.sem-input::placeholder { color: var(--text-1);}
.sem-preview {
background: rgba(var(--accent-rgb),.05);
border: 1px solid rgba(var(--accent-rgb),.12);
border-radius: 12px; padding: 12px 14px;
}
.sem-preview-label {
font-size: .62rem; font-weight: 600; color: var(--text-1);
text-transform: uppercase; letter-spacing: 1px;
margin-bottom: 10px;
}
.sem-preview-inner { display: flex; align-items: center; gap: 12px;}
.sem-preview-icon {
width: 42px; height: 42px; border-radius: 10px;
background: linear-gradient(135deg, rgba(var(--accent-rgb),.3), rgba(var(--accent-rgb),.1));
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; flex-shrink: 0;
}
.sem-preview-info { flex: 1; min-width: 0;}
.sem-preview-title {
font-size: .8rem; font-weight: 600; color: var(--text-3);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sem-preview-sub { font-size: .66rem; color: var(--text-1); margin-top: 3px;}
.sem-send-btn {
width: 100%; padding: 13px;
background: linear-gradient(135deg, var(--accent) 0%, rgba(var(--accent-rgb),.7) 100%);
color: #fff; border: none; border-radius: 12px;
font-size: .85rem; font-weight: 700; font-family: inherit;
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
transition: all .2s cubic-bezier(.34,1.56,.64,1);
box-shadow: 0 4px 20px rgba(var(--accent-rgb),.35);
}
.sem-send-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(var(--accent-rgb),.5);}
.sem-send-btn:active { transform: scale(.97);}
.sem-send-btn:disabled { opacity: .5; pointer-events: none;}
.sem-result {
text-align: center; font-size: .78rem; border-radius: 10px;
padding: 0; max-height: 0; overflow: hidden;
transition: max-height .3s, padding .3s, opacity .3s;
opacity: 0;
}
.sem-result.show { max-height: 60px; padding: 10px; opacity: 1;}
.sem-result.success { background: rgba(34,197,94,.1); color: #4ade80; border: 1px solid rgba(34,197,94,.25);}
.sem-result.error { background: rgba(239,68,68,.1); color: #f87171; border: 1px solid rgba(239,68,68,.25);}
/* ══════════════════════════════════════════════════════
SLEEP TIMER — 수면·집중 타이머
══════════════════════════════════════════════════════ */
#apTimerBtn.timer-on {
color: var(--accent) !important;
text-shadow: 0 0 12px rgba(var(--accent-rgb),.7);
}
#apTimerBtn.timer-on i::before {
content: "\f017"; /* fa-clock solid */
font-weight: 900;
}
#sleep-timer-overlay {
position: fixed; inset: 0; z-index: 9300;
background: rgba(0,0,0,.55);
backdrop-filter: blur(6px);
opacity: 0; pointer-events: none;
transition: opacity .25s;
}
#sleep-timer-overlay.open { opacity: 1; pointer-events: auto;}
#sleep-timer-popup {
position: fixed;
bottom: 90px; right: 20px;
z-index: 9301;
width: min(92vw, 340px);
background: var(--bg-0, #0d0d1a);
border: 1px solid rgba(var(--accent-rgb),.22);
border-radius: 22px;
box-shadow: 0 24px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--accent-rgb),.06);
overflow: hidden;
opacity: 0; pointer-events: none;
transform: translateX(120%);
transition: opacity .3s ease-out, transform .2s ease-out;
}
#sleep-timer-popup.open {
opacity: 1; pointer-events: auto;
transform: translateX(0);
}
.stp-head {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 18px 14px;
border-bottom: 1px solid rgba(var(--accent-rgb),.1);
background: linear-gradient(135deg, rgba(var(--accent-rgb),.08) 0%, transparent 100%);
}
.stp-head-left { display: flex; align-items: center; gap: 12px;}
.stp-icon {
width: 38px; height: 38px; border-radius: 12px;
background: rgba(var(--accent-rgb),.15);
color: var(--accent); font-size: 1rem;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stp-title { font-size: .85rem; font-weight: 700; color: var(--text-3);}
.stp-sub { font-size: .65rem; color: var(--text-2); margin-top: 2px;}
.stp-close {
width: 28px; height: 28px; border-radius: 8px;
border: 1px solid var(--border); background: transparent;
color: var(--text-2); cursor: pointer; font-size: .78rem;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.stp-close:hover { background: rgba(var(--accent-rgb),.12); color: var(--accent);}
.stp-active {
display: flex; flex-direction: column; align-items: center;
padding: 24px 20px 20px; gap: 18px;
}
.stp-ring-wrap { position: relative; width: 130px; height: 130px;}
.stp-ring-svg { width: 130px; height: 130px; transform: rotate(-90deg);}
.stp-ring-bg {
fill: none; stroke: rgba(var(--accent-rgb),.1); stroke-width: 6;
}
.stp-ring-fill {
fill: none;
stroke: var(--accent); stroke-width: 6;
stroke-linecap: round;
stroke-dasharray: 276.46;
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s linear;
filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),.6));
}
.stp-ring-inner {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
}
.stp-remain { font-size: 1.5rem; font-weight: 800; color: var(--text-3); font-variant-numeric: tabular-nums;}
.stp-remain-label { font-size: .6rem; color: var(--text-1); margin-top: 2px;}
.stp-cancel-btn {
width: 100%;
padding: 11px;
background: rgba(239,68,68,.12);
border: 1px solid rgba(239,68,68,.25);
border-radius: 12px;
color: #f87171; font-size: .82rem; font-weight: 700;
cursor: pointer; font-family: inherit;
display: flex; align-items: center; justify-content: center; gap: 7px;
transition: all .2s;
}
.stp-cancel-btn:hover { background: rgba(239,68,68,.22);}
.stp-picker { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px;}
.stp-presets {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px;
}
.stp-preset {
display: flex; flex-direction: column; align-items: center;
padding: 10px 4px;
background: rgba(var(--accent-rgb),.06);
border: 1px solid rgba(var(--accent-rgb),.14);
border-radius: 12px; cursor: pointer;
transition: all .2s; color: var(--text-2); font-family: inherit;
}
.stp-preset:hover, .stp-preset.active {
background: rgba(var(--accent-rgb),.18);
border-color: rgba(var(--accent-rgb),.5);
color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(var(--accent-rgb),.25);
}
.stp-preset-min { font-size: 1.1rem; font-weight: 800; line-height: 1;}
.stp-preset-label { font-size: .6rem; margin-top: 2px; opacity: .7;}
.stp-custom-label { font-size: .68rem; font-weight: 600; color: var(--text-2);}
.stp-custom-row { display: flex; align-items: center; gap: 8px; margin-top: 6px;}
.stp-custom-input {
flex: 1; padding: 9px 12px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(var(--accent-rgb),.18);
border-radius: 10px; color: var(--text-3);
font-size: .85rem; font-family: inherit; outline: none;
transition: border-color .2s, box-shadow .2s;
}
.stp-custom-input:focus {
border-color: rgba(var(--accent-rgb),.5);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.1);
}
.stp-custom-input::-webkit-inner-spin-button { -webkit-appearance: none;}
.stp-custom-input::placeholder {font-size: .7rem;color: var(--text-3);}
.stp-custom-unit { font-size: .78rem; color: var(--text-2);}
.stp-custom-start {
padding: 9px 14px;
background: var(--accent);
border: none; border-radius: 10px;
color: #fff; font-size: .78rem; font-weight: 700; font-family: inherit;
cursor: pointer; display: flex; align-items: center; gap: 5px;
transition: all .2s;
box-shadow: 0 4px 14px rgba(var(--accent-rgb),.35);
}
.stp-custom-start:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--accent-rgb),.5);}
.stp-option {
display: flex; align-items: flex-start; gap: 9px;
cursor: pointer; user-select: none;
padding: 10px 12px;
background: rgba(var(--accent-rgb),.04);
border: 1px solid rgba(var(--accent-rgb),.1);
border-radius: 10px;
transition: background .2s;
}
.stp-option:hover { background: rgba(var(--accent-rgb),.09);}
.stp-option input[type="checkbox"] { display: none;}
.stp-option-box {
width: 17px; height: 17px; flex-shrink: 0;
border-radius: 5px; border: 1.5px solid var(--border);
background: var(--bg-2);
display: flex; align-items: center; justify-content: center;
transition: all .2s; margin-top: 1px;
}
.stp-option-box i { font-size: 9px; color: #fff; opacity: 0; transition: opacity .15s;}
.stp-option input:checked ~ .stp-option-box {
background: var(--accent); border-color: var(--accent);
box-shadow: 0 0 8px rgba(var(--accent-rgb),.4);
}
.stp-option input:checked ~ .stp-option-box i { opacity: 1;}
.stp-option-text { font-size: .72rem; color: var(--text-2); line-height: 1.5;}
/*수면 타이머 메시지*/
#sleepTimerToast {
position: fixed;
bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px);
z-index: 9400;
background: var(--bg-0);
border: 1px solid rgba(var(--accent-rgb),.3);
border-radius: 50px;
padding: 12px 24px;
font-size: .82rem; font-weight: 600; color: var(--text-3);
box-shadow: 0 8px 32px rgba(0,0,0,.5);
opacity: 0; pointer-events: none;
transition: all .35s cubic-bezier(.32,.72,0,1);
white-space: nowrap;
max-width: calc(100vw - 40px);
box-sizing: border-box;
}
#sleepTimerToast.show {
opacity: 1; transform: translateX(-50%) translateY(0);
}
/* ══════════════════════════════════════════════════════
플레이리스트 페이지네이션 — Premium
══════════════════════════════════════════════════════ */
.pl-pg {
display: flex;
justify-content: center;
padding: 10px 5px 22px;
}
.pl-pg .pg {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
margin: 0; padding: 8px 14px;
flex-wrap: wrap;
justify-content: center;
background: rgba(var(--accent-rgb),.04);
border: 1px solid rgba(var(--accent-rgb),.1);
border-radius: 14px;
}
.pl-pg .pg_btn,
.pl-pg .pg_current {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px; height: 30px;
padding: 0 8px;
border-radius: 8px;
font-size: .76rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-decoration: none;
transition: background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.pl-pg .pg_btn {
color: var(--text-2);
background: transparent;
border: 1px solid rgba(var(--accent-rgb),.12);
cursor: pointer;
}
.pl-pg .pg_btn:hover {
background: rgba(var(--accent-rgb),.12);
border-color: rgba(var(--accent-rgb),.35);
color: var(--accent);
transform: translateY(-1px);
}
.pl-pg .pg_btn:active { transform:scale(.93);}
.pl-pg .pg_current {
background: var(--accent);
color: #fff;
border: 1px solid transparent;
box-shadow:
0 2px 10px rgba(var(--accent-rgb),.4),
0 0 0 3px rgba(var(--accent-rgb),.15);
cursor: default;
}
#npRepeatBtn.np-repeat-active {
background: var(--accent, #3b82f6) !important;
color: #fff !important;
border-color: var(--accent, #3b82f6) !important;
box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 59 130 246), .35);
}
#eq-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.55);
backdrop-filter: blur(4px); z-index: 1100;
}
#eq-popup {
position: fixed; right: 20px; bottom: 90px;
width: min(380px, calc(100vw - 24px));
background: var(--bg-0, #0d0d1a);
border: 1px solid rgba(var(--accent-rgb),.22);
border-radius: 18px; padding: 18px 16px 20px;
box-shadow: 0 20px 60px rgba(0,0,0,.45);
z-index: 1101;
opacity: 0;
transform: translateX(120%);
transition: opacity .3s ease-out, transform .2s ease-out;
}
#eq-popup.eq-open {
opacity: 1;
transform: translateX(0);
}
.eq-head {
display: flex; align-items: center;
justify-content: space-between; margin-bottom: 16px;
}
.eq-head-left { display: flex; align-items: center; gap: 12px;}
.eq-icon {
width: 38px; height: 38px; border-radius: 10px;
background: var(--accent); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 16px; flex-shrink: 0;
}
.eq-title { font-size: .92rem; font-weight: 700; color: var(--text-3);}
.eq-sub { font-size: .72rem; color: var(--text-1); margin-top: 2px;}
.eq-close {
width: 30px; height: 30px; border-radius: 8px;
background: var(--hover-bg); border: none; cursor: pointer;
color: var(--text-2); font-size: 14px;
display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s;
}
.eq-close:hover { background: var(--accent); color: #fff;}
.eq-presets {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.eq-preset-btn {
display: flex; flex-direction: column; align-items: center;
gap: 3px; padding: 12px 6px 10px;
border-radius: 12px; border: 1.5px solid var(--border);
background: transparent; cursor: pointer;
transition: border-color .18s, background .18s, transform .12s;
color: var(--text-2);
}
.eq-preset-btn:hover {
border-color: var(--accent); background: var(--hover-bg);
transform: translateY(-2px);
}
.eq-preset-btn.active {
border-color: var(--accent);
background: rgba(var(--accent-rgb), .12);
color: var(--accent);
}
.eq-preset-icon { font-size: 1.4rem; line-height: 1;}
.eq-preset-name { font-size: .78rem; font-weight: 700;}
.eq-preset-desc { font-size: .62rem; opacity: .6;}
#apEqBtn.eq-on { color: var(--accent);}
.ap-speed-btn {
font-size: .72rem !important; font-weight: 700;
min-width: 32px; letter-spacing: -.3px;
padding: 0 4px !important; color: var(--text-2);
transition: color .15s;
}
.ap-speed-btn.speed-active { color: var(--accent);}
.ap-speed-btn:hover { color: var(--accent);}
/* ══════════════════════════════════════════════════════
반응형 & 미디어쿼리 (통합)
══════════════════════════════════════════════════════ */
@media (max-width: 1050px) {
.display-none { display: none;}
}
@media (max-width: 860px) and (hover: none),
(max-width: 860px) and (pointer: coarse) {
*,
*::before,
*::after {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.slide-card:hover,
.album-card:hover,
.vcard:hover,
.trot-card:hover,
.np-btn-primary:hover,
.ah-btn-primary:hover,
.social-link:hover,
.theme-dot:hover {
transform: none !important;
box-shadow: none !important;
}
.slide-card, .album-card, .vcard, .trot-card,
.nav-item, .ap-toggle-btn, .ap-prev-btn, .ap-next-btn,
.np-btn-primary, .ah-btn, .pl-title {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.content-section { contain: layout style;}
.pl-list li { contain: layout style;}
.content-section:not(.active) {
will-change: auto !important;
}
}
@media (max-width: 860px) {
.mob-menu-btn { display: flex;}
#sidebarToggleBtn {
display: none !important;
}
.sidebar {
position: fixed !important;
left: 0; top: 0;
width: 240px;
height: 100vh !important;
height: 100dvh !important;
z-index: 130 !important;
transform: translateX(-110%);
transition: transform .3s cubic-bezier(.25,.46,.45,.94), box-shadow .3s;
box-shadow: none;
overflow-y: auto;
overscroll-behavior: contain;
}
.sidebar.sidebar-open {
transform: translateX(0);
box-shadow: 6px 0 32px rgba(0,0,0,.5);
}
.sidebar-overlay {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transition: opacity .25s ease, visibility .25s !important;
}
.ap-subtitle { display: none;}
.album-shop-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px;}
}
@media (max-width: 620px) {
.ap--track { order: 1; flex: 1 1 100%; padding: 0 12px;}
.ap--playback { flex: 1; justify-content: space-evenly;}
.ap--settings { flex: 1; justify-content: space-evenly;}
.ap-panel { flex-wrap: wrap; height: auto; padding: 8px 12px;}
.ap { height: auto;}
.search-bar { flex: 0 1 270px; min-width: 0;}
.search-bar input { min-width: 0; width: 0;}
.content { padding: 16px;}
.np-title { font-size: 13px;}
.eq-visual { position: absolute; top: -3px; right: 20px;}
.eq-canvas-hero { width: 150px; height: 40px; border-radius: 5px; opacity: .8;}
.artist-actions { gap: 7px;}
.ah-btn { font-size: 12px; padding: 7px 15px;}
.social-links { gap: 7px;}
.social-link { gap: 3px; padding: 2px 10px; border-radius: 5px; font-size: 10px; font-weight: 400;}
.ab-stats-row { grid-template-columns: repeat(2, 1fr);}
.ab-identity-since { display: none;}
.lv-hero-header, .nr-hero-header { padding-bottom: 18px;}
.mobile-none { display: none;}
.content-section { padding-bottom: 20px;}
#section-smarttv .broadcast-container { grid-template-columns: 1fr;}
#eq-popup { bottom: 80px;}
.eq-presets { grid-template-columns: repeat(3, 1fr); gap: 6px;}
.eq-preset-btn { padding: 10px 4px 8px;}
}
@media (max-width: 480px) {
.trot-grid { grid-template-columns: 1fr;}
.trot-card__top { height: 160px;}
.album-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px;}
.asc-btns { flex-direction: column; gap: 5px;}
.asc-price { font-size: 14px;}
}
/* ══════════════════════════════════════════════════════
웨이크워드 안내 배너
══════════════════════════════════════════════════════ */
.minja-banner {
margin: 28px 0 8px;
border-radius: 18px;
background: linear-gradient(135deg,
rgba(var(--accent-rgb),.08) 0%,
rgba(var(--accent-rgb),.03) 100%);
border: 1px solid rgba(var(--accent-rgb),.18);
overflow: hidden;
transition: border-color .2s;
}
.minja-banner:hover {
border-color: rgba(var(--accent-rgb),.35);
}
.minja-banner-inner {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 22px 14px;
}
.minja-mic-icon {
width: 48px; height: 48px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(var(--accent-rgb),.35);
animation: minjaPulse 2.8s ease-in-out infinite;
}
@keyframes minjaPulse {
0%,100% { box-shadow: 0 4px 16px rgba(var(--accent-rgb),.35);}
50% { box-shadow: 0 4px 28px rgba(var(--accent-rgb),.65);}
}
.minja-banner-text {
flex: 1;
min-width: 0;
}
.minja-banner-title {
font-size: 14px;
font-weight: 600;
color: var(--text-1);
margin-bottom: 4px;
}
.minja-banner-sub {
font-size: 12.5px;
color: var(--text-2);
line-height: 1.5;
}
.minja-keyword {
color: var(--accent);
font-weight: 700;
font-size: 13.5px;
}
.minja-try-btn {
flex-shrink: 0;
padding: 8px 16px;
background: var(--accent);
color: #fff;
border: none;
border-radius: 24px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
display: flex; align-items: center; gap: 6px;
transition: opacity .15s, transform .15s;
white-space: nowrap;
}
.minja-try-btn:hover { opacity: .85; transform: scale(1.03);}
.minja-try-btn:active { transform: scale(.97);}
.minja-banner-examples {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 22px 16px;
}
.minja-ex {
font-size: 11.5px;
color: var(--text-3);
background: rgba(var(--accent-rgb),.07);
border: 1px solid rgba(var(--accent-rgb),.12);
border-radius: 20px;
padding: 4px 12px;
display: flex; align-items: center; gap: 5px;
transition: all .15s;
cursor: default;
}
.minja-ex:hover {
color: var(--text-2);
background: rgba(var(--accent-rgb),.13);
border-color: rgba(var(--accent-rgb),.25);
}
.minja-ex i { font-size: 9px; opacity: .5;}
@media (max-width: 620px) {
.minja-banner-inner { flex-wrap: wrap;}
.minja-try-btn { width: 100%; justify-content: center;}
.minja-banner-examples { gap: 6px;}
.minja-ex { font-size: 11px;}
}
/* ══════════════════════════════════════════════════════
NOW PLAYING 구분선 애니메이션
══════════════════════════════════════════════════════ */
.np-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 4px 0 16px;
opacity: 0;
animation: npDividerIn .8s ease .3s forwards;
}
@keyframes npDividerIn {
from { opacity:0; transform:translateY(6px);}
to { opacity:1; transform:translateY(0);}
}
.np-divider-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(var(--accent-rgb),.4) 50%,
transparent 100%);
}
.np-divider-center {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
padding: 3px 12px 3px 10px;
border-radius: 20px;
background: rgba(var(--accent-rgb),.06);
border: 1px solid rgba(var(--accent-rgb),.12);
}
.np-divider-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
color: var(--accent);
opacity: .75;
white-space: nowrap;
transition: opacity .3s, letter-spacing .4s;
}
.np-divider-label.is-playing {
opacity: 1;
letter-spacing: 3.5px;
}
.np-divider-bars {
display: flex;
align-items: flex-end;
gap: 2.5px;
height: 14px;
}
.np-divider-bars span {
display: block;
width: 2.5px;
border-radius: 2px 2px 1px 1px;
background: linear-gradient(to top, var(--accent), rgba(var(--accent-rgb),.4));
opacity: .45;
height: 4px;
transform-origin: bottom;
transition: opacity .3s;
box-shadow: 0 0 0 rgba(var(--accent-rgb),0);
}
.np-divider-bars span:nth-child(1) { animation: npBar 1.8s ease-in-out -.6s infinite;}
.np-divider-bars span:nth-child(2) { animation: npBar 1.8s ease-in-out -.3s infinite;}
.np-divider-bars span:nth-child(3) { animation: npBar 1.8s ease-in-out 0s infinite;}
.np-divider-bars span:nth-child(4) { animation: npBar 1.8s ease-in-out -.9s infinite;}
.np-divider-bars span:nth-child(5) { animation: npBar 1.8s ease-in-out -.15s infinite;}
@keyframes npBar {
0%,100% { height:3px; opacity:.3;}
50% { height:11px; opacity:.7;}
}
.np-divider.is-playing .np-divider-bars span {
opacity:.9;
box-shadow:0 0 4px rgba(var(--accent-rgb),.5);
}
.np-divider.is-playing .np-divider-center {
background: rgba(var(--accent-rgb),.1);
border-color: rgba(var(--accent-rgb),.25);
box-shadow: 0 0 12px rgba(var(--accent-rgb),.15);
}
.np-divider.is-playing .np-divider-bars span:nth-child(1) { animation: npBarPlay .6s ease-in-out -.2s infinite;}
.np-divider.is-playing .np-divider-bars span:nth-child(2) { animation: npBarPlay .5s ease-in-out -.4s infinite;}
.np-divider.is-playing .np-divider-bars span:nth-child(3) { animation: npBarPlay .7s ease-in-out 0s infinite;}
.np-divider.is-playing .np-divider-bars span:nth-child(4) { animation: npBarPlay .4s ease-in-out -.1s infinite;}
.np-divider.is-playing .np-divider-bars span:nth-child(5) { animation: npBarPlay .65s ease-in-out -.35s infinite;}
@keyframes npBarPlay {
0%,100% { height:4px;}
50% { height:13px;}
}
/* ══════════════════════════════════════════════════════
호출 유도 위젯
══════════════════════════════════════════════════════ */
.minja-call-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 8px 0 20px;
height: 64px;
}
.minja-call-ring {
position: absolute;
width: 54px; height: 54px;
border-radius: 50%;
border: 1.5px solid rgba(var(--accent-rgb),.4);
animation: minjaRing 2.4s ease-out infinite;
pointer-events: none;
}
.minja-call-ring--2 {
animation-delay: 1.2s;
}
@keyframes minjaRing {
0% { transform:scale(.85); opacity:.7;}
100% { transform:scale(2.2); opacity:0;}
}
.minja-call-body {
display: flex;
align-items: center;
gap: 14px;
background: rgba(var(--accent-rgb),.06);
border: 1px solid rgba(var(--accent-rgb),.18);
border-radius: 40px;
padding: 10px 20px 10px 14px;
position: relative;
z-index: 1;
cursor: pointer;
transition: background .2s, border-color .2s, transform .15s;
animation: minjaBodyIn .7s cubic-bezier(.34,1.56,.64,1) .2s both;
}
@keyframes minjaBodyIn {
from { opacity:0; transform:scale(.88) translateY(8px);}
to { opacity:1; transform:scale(1) translateY(0);}
}
.minja-call-body:hover {
background: rgba(var(--accent-rgb),.11);
border-color: rgba(var(--accent-rgb),.35);
transform: scale(1.02);
}
.minja-call-body:active { transform: scale(.98);}
.minja-call-mic {
width: 36px; height: 36px;
background: var(--accent);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 15px; color: #fff;
flex-shrink: 0;
animation: minjaMicPulse 2s ease-in-out infinite;
}
@keyframes minjaMicPulse {
0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.5);}
50% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb),0);}
}
.minja-call-texts { display:flex; flex-direction:column; gap:2px;}
.minja-call-hint {
font-size: 13.5px;
font-weight: 700;
color: var(--text-1);
white-space: nowrap;
}
.minja-call-hint em {
color: var(--accent);
font-style: normal;
}
.minja-call-sub {
font-size: 11px;
color: var(--text-3);
white-space: nowrap;
}
.minja-call-kbd {
display: flex;
gap: 3px;
margin-left: 6px;
}
.minja-call-kbd span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
background: var(--bg-2);
border: 1px solid var(--border);
border-bottom: 2px solid var(--border);
border-radius: 5px;
font-size: 11px;
font-weight: 700;
color: var(--accent);
animation: minjaKbd 3s ease-in-out infinite;
}
.minja-call-kbd span:nth-child(1) { animation-delay: 0s;}
.minja-call-kbd span:nth-child(2) { animation-delay: .15s;}
.minja-call-kbd span:nth-child(3) { animation-delay: .3s;}
@keyframes minjaKbd {
0%,100%,60% { transform:translateY(0); border-bottom-width:2px;}
30% { transform:translateY(-3px); border-bottom-width:1px;}
}
.minja-call-wrap.is-active .minja-call-mic {
background: #e53935;
animation: minjaListening .6s ease-in-out infinite;
}
@keyframes minjaListening {
0%,100% { transform:scale(1);}
50% { transform:scale(1.12);}
}
.minja-call-wrap.is-active .minja-call-hint { color: var(--accent);}
@media (max-width: 480px) {
.minja-call-hint { font-size:12.5px;}
.minja-call-sub { display:none;}
.minja-call-kbd { display:none;}
}
.hero-minja-hint {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 15px;
padding: 10px 14px;
background: rgba(var(--accent-rgb),.08);
border: 1px solid rgba(var(--accent-rgb),.2);
border-radius: 28px;
cursor: pointer;
transition: background .2s, border-color .2s;
animation: nameIn .55s ease .5s both;
}
.hero-minja-hint:hover {
background: rgba(var(--accent-rgb),.14);
border-color: rgba(var(--accent-rgb),.38);
}
.hero-minja-mic {
width: 28px; height: 28px;
background: var(--accent);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; color: #fff;
flex-shrink: 0;
animation: minjaMicPulse 2s ease-in-out infinite;
}
.hero-minja-text {
font-size: 12.5px;
color: var(--text-2);
white-space: nowrap;
}
.hero-minja-text em {
color: var(--accent);
font-style: normal;
font-weight: 700;
}
.hero-minja-arrow {
font-size: 11px;
color: var(--text-3);
}
.hero-minja-chips {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-left: auto;
}
.hero-minja-chips span {
font-size: 11px;
color: var(--text-3);
background: rgba(var(--accent-rgb),.07);
border: 1px solid rgba(var(--accent-rgb),.14);
border-radius: 14px;
padding: 2px 9px;
white-space: nowrap;
transition: color .15s, background .15s;
}
.hero-minja-hint:hover .hero-minja-chips span {
color: var(--text-2);
background: rgba(var(--accent-rgb),.12);
}
.hero-minja-hint.is-active .hero-minja-mic {
background: #e53935;
animation: minjaListening .6s ease-in-out infinite;
}
.hero-minja-hint.is-active .hero-minja-text { color: var(--text-1);}

.home-bottom-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
margin-bottom: 8px;
}
.home-bottom-left,
.home-bottom-right {
min-width: 0;
}
.home-quick-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
margin-bottom: 0 !important;
}
.home-quick-grid .slide-card {
padding: 12px 10px;
}
.home-quick-grid .sc-icon {
font-size: 24px;
margin-bottom: 6px;
}
.home-quick-grid .sc-title {
font-size: 12px;
}
.home-quick-grid .sc-desc {
display: none;
}
.home-quick-grid .sc-tag {
font-size: 9px;
padding: 1px 6px;
}
@media (max-width: 700px) {
.home-bottom-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.home-quick-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.hero-minja-chips, .hero-minja-arrow {
display: none;
}
}
/* ══════════════════════════════════════════════════════
AiChat 라이트박스
══════════════════════════════════════════════════════ */
.aichat-lb {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
align-items: center;
justify-content: center;
}
.aichat-lb--open {
display: flex;
}
.aichat-lb-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0);
backdrop-filter: blur(4px);
animation: aichatFadeIn .2s ease;
}
.aichat-lb-card {
position: relative;
z-index: 1;
width: min(700px, 96vw);
height: min(780px, 92vh);
background: rgba(0,0,0,0);
border-radius: 15px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 24px 80px rgba(0,0,0,.5);
animation: aichatSlideIn .25s cubic-bezier(.25,.46,.45,.94);
}
.aichat-lb-close {
position: fixed;
top: calc(50vh - min(780px,92vh)/2 - 10px);
right: calc(50vw - min(700px,96vw)/2 - 10px);
z-index: 100000;
width: 30px; height: 30px;
border-radius: 50%;
border: 2px solid rgba(var(--accent-rgb), 1);
background: rgba(var(--accent-rgb), 1);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
opacity: 0;
transition: opacity .6s ease;
}
.aichat-lb-close:hover {
color: #ff0000;
}
.aichat-lb-frame {
flex: 1;
width: 100%;
border: none;
background: var(--bg-1);
}
@keyframes aichatFadeIn {
from { opacity: 0;}
to { opacity: 1;}
}
@keyframes aichatSlideIn {
from { opacity: 0; transform: translateY(20px) scale(.97);}
to { opacity: 1; transform: translateY(0) scale(1);}
}
@media all and (max-width: 768px) and (orientation: portrait) {
.aichat-lb-card {
width: 100vw;
height: 100dvh;
border-radius: 0;
}
.aichat-lb-close {
top: 5px;
right: 3px;
background: rgba(var(--accent-rgb), 0);
}
}
/* ══════════════════════════════════════════════════════
오디오 즐겨찾기 패널 — 드로어 스타일 (비디오찜 동일)
══════════════════════════════════════════════════════ */
#afp-overlay {
position: fixed; inset: 0;
z-index: 9000;
background: rgba(0,0,0,.5);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity .3s;
}
#afp-overlay.open {
opacity: 1;
pointer-events: auto;
}
.afp-panel-wrap {
position: fixed;
top: 0; right: 0;
width: min(100vw, 480px);
height: 100vh;
height: 100dvh;
z-index: 9001;
background: var(--bg-1, #0d0d1a);
border-left: 1px solid rgba(var(--accent-rgb),.18);
box-shadow: none;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform .38s cubic-bezier(.32,.72,0,1);
will-change: transform;
font-size: .85rem;
padding: 0;
}
.afp-panel-wrap.open { transform: translateX(0);box-shadow: -12px 0 60px rgba(0,0,0,.6);}
.afp {
display: flex;
flex-direction: column;
height: 100%;
background: var(--bg-1);
font-family: 'NEXON Lv1 Gothic OTF','Malgun Gothic',sans-serif;
user-select: none;
overflow: hidden;
}
.afp-header {
display: flex; align-items: center; gap: 10px;
padding: 16px 18px 14px;
background: linear-gradient(90deg, rgba(var(--accent-rgb),.12) 0%, transparent 70%);
border-bottom: 1px solid var(--border);
position: relative;
}
.afp-header::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.5) 40%, transparent);
}
.afp-icon-wrap {
width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
background: rgba(var(--accent-rgb),.15);
border: 1px solid rgba(var(--accent-rgb),.25);
display: flex; align-items: center; justify-content: center;
}
.afp-icon-wrap i { color: var(--accent); font-size: .95rem;}
.afp-title-block { flex: 1; min-width: 0;}
.afp-title { font-size: .95rem; font-weight: 700; color: var(--text-2); line-height: 1.2;}
.afp-sub { font-size: .68rem; color: var(--text-3); margin-top: 1px; letter-spacing: .03em;}
.afp-close {
width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border);
background: transparent; color: var(--text-3); cursor: pointer; font-size: 1.25rem;
display: flex; align-items: center; justify-content: center;
transition: all .15s; flex-shrink: 0;
}
.afp-close:hover { background: rgba(var(--accent-rgb),.12); color: var(--accent); border-color: rgba(var(--accent-rgb),.3);}

.afp-empty { padding: 40px 20px; text-align: center;}
.afp-empty-icon {
width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;
background: rgba(var(--accent-rgb),.07); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
}
.afp-empty-icon i { color: var(--text-3); font-size: 1.3rem;}
.afp-empty-title { font-size: .85rem; color: var(--text-2); font-weight: 500; margin-bottom: 6px;}
.afp-empty-hint { font-size: .72rem; color: var(--text-3); line-height: 1.6;}
.afp-empty-hint span {
display: inline-block; margin-top: 8px; padding: 4px 12px;
background: rgba(var(--accent-rgb),.08); border: 1px solid rgba(var(--accent-rgb),.2);
border-radius: 20px; color: var(--accent); font-size: .7rem;
}

.afp-list { flex: 1; overflow-y: auto; padding: 6px 0; min-height: 0;}
.afp-list::-webkit-scrollbar { width: 3px;}
.afp-list::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),.25); border-radius: 10px;}

.afp-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 16px; cursor: pointer;
border-bottom: 1px solid rgba(var(--accent-rgb),.05);
transition: background .15s; position: relative;
}
.afp-item:last-child { border-bottom: none;}
.afp-item:hover { background: rgba(var(--accent-rgb),.05);}
.afp-item.afp-playing { background: rgba(var(--accent-rgb),.10) !important;}
.afp-item.afp-playing::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(to bottom, var(--accent), rgba(var(--accent-rgb),.5));
border-radius: 0 2px 2px 0;
}
.afp-item.afp-playing .afp-track { color: var(--accent); font-weight: 700;}
.afp-item.afp-playing .afp-music-chip {
background: linear-gradient(135deg, rgba(var(--accent-rgb),.35), rgba(var(--accent-rgb),.15));
border-color: rgba(var(--accent-rgb),.4);
box-shadow: 0 0 8px rgba(var(--accent-rgb),.25);
}
.afp-item.afp-playing .afp-btn-play-item { background: rgba(var(--accent-rgb),.15);}
.afp-num { width: 22px; text-align: center; flex-shrink: 0; font-size: .7rem; color: var(--text-3);}
.afp-eq { display: flex; align-items: flex-end; gap: 1.5px; height: 14px; width: 22px;}
.afp-eq span { width: 3px; border-radius: 2px; background: var(--accent); animation: afpEq .7s ease-in-out infinite alternate; animation-play-state: running;}
.afp-eq.afp-eq-paused span { animation-play-state: paused !important;}
.afp-eq span:nth-child(2) { animation-delay: .15s;}
.afp-eq span:nth-child(3) { animation-delay: .3s;}
@keyframes afpEq { 0%{height:3px} 100%{height:13px} }
.afp-music-chip {
width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
background: linear-gradient(135deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.06));
border: 1px solid rgba(var(--accent-rgb),.15);
display: flex; align-items: center; justify-content: center;
}
.afp-music-chip i { color: var(--accent); font-size: .8rem;}
.afp-info { flex: 1; min-width: 0;}
.afp-track {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-size: .8rem; color: var(--text-3); font-weight: 700; line-height: 1.3;
transition: color 0.7s ease;
}
.afp-item:hover .afp-track{color: var(--accent);}
.afp-artist { font-size: .7rem; color: var(--text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.afp-item-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0;}
.afp-btn-play-item, .afp-btn-del-item {
width: 28px; height: 28px; border-radius: 7px; border: none;
background: transparent; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: .8rem; transition: all .15s;
}
.afp-btn-play-item { color: var(--accent);}
.afp-btn-play-item:hover { background: rgba(var(--accent-rgb),.15); transform: scale(1.1);}
.afp-btn-del-item { color: var(--text-3);}
.afp-btn-del-item:hover { background: rgba(251,113,133,.12); color: #fb7185;}
.afp-progress {
position: absolute; bottom: 0; left: 16px; right: 16px; height: 1px;
background: rgba(var(--accent-rgb),.12); border-radius: 1px;
}
.afp-progress-fill { height: 100%; background: var(--accent); border-radius: 1px;}
.afp-footer {
padding: 12px 16px 14px; border-top: 1px solid var(--border);
display: flex; gap: 8px;
}
.afp-btn-all {
flex: 1; height: 34px; border-radius: 9px; border: 1px solid;
font-size: .73rem; font-weight: 500; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 6px;
transition: all .18s; font-family: 'NEXON Lv1 Gothic OTF','Malgun Gothic',sans-serif;
}
.afp-btn-play-all {
border-color: rgba(var(--accent-rgb),.35);
background: rgba(var(--accent-rgb),.1); color: var(--accent);
}
.afp-btn-play-all:hover { background: rgba(var(--accent-rgb),.2); border-color: rgba(var(--accent-rgb),.6); transform: translateY(-1px);}
.afp-btn-del-all {
flex: 0 0 80px; border-color: rgba(251,113,133,.25);
background: rgba(251,113,133,.07); color: #fb7185;
}
.afp-btn-del-all:hover { background: rgba(251,113,133,.15);}
.afp-btn-desel-all {
flex: 0 0 76px; border-color: rgba(var(--accent-rgb),.35);
background: rgba(var(--accent-rgb),.1); color: var(--accent);
}
.afp-btn-desel-all:hover { background: rgba(var(--accent-rgb),.2); border-color: rgba(var(--accent-rgb),.6); transform: translateY(-1px);}

@keyframes afpPop { 0%{transform:scale(.85);opacity:0} 60%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
.afp-pop { animation: afpPop .28s cubic-bezier(.4,0,.2,1) both;}
.afp-chk-box {
width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
border: 1.5px solid rgba(var(--accent-rgb),.4);
background: transparent; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.afp-chk-box:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),.1);}
.afp-chk-box.afp-chk-on {
background: var(--accent); border-color: var(--accent);
}
.afp-chk-box.afp-chk-on::after {
content: '';
display: block;
width: 4px; height: 7px;
border: 2px solid #fff;
border-top: none; border-left: none;
transform: rotate(45deg) translate(-1px,-1px);
}
.afp-btn-play-checked {
flex: 1;
border-color: rgba(var(--accent-rgb),.5) !important;
background: rgba(var(--accent-rgb),.1) !important;
color: var(--accent) !important;
}
.afp-btn-play-checked:hover {
background: rgba(var(--accent-rgb),.2) !important;
transform: translateY(-1px);
}
/* ══════════════════════════════════════════════════════
   삼성 인터넷 브라우저 안내 배너  (cast_samsung_banner)
   - 기존 테마 변수(--accent, --accent-rgb, --bg-1,
     --text-2, --text-3, --border) 그대로 연동
══════════════════════════════════════════════════════ */
@keyframes csbFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes csbPulse {
  0%   { box-shadow: 0 0 0 0   rgba(var(--accent-rgb), .35); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0);   }
  100% { box-shadow: 0 0 0 0   rgba(var(--accent-rgb), 0);   }
}
@keyframes csbArrow {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(5px); }
}
.cast-samsung {
  padding: 0 0 15px;
}
.cast-samsung .banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.8rem 1rem;
  background: var(--bg-1, #0d0d1a);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-left: 3px solid var(--accent, #3b82f6);
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s;
  animation: csbFadeIn .4s ease both;
}
.cast-samsung .banner:hover {
  background: rgba(var(--accent-rgb, 59,130,246), .07);
}
.cast-samsung .icon-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb, 59,130,246), .12);
  border: 1px solid rgba(var(--accent-rgb, 59,130,246), .2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: csbPulse 2.5s ease-in-out infinite;
}
.cast-samsung .icon-wrap i {
  color: var(--accent, #3b82f6);
}
.cast-samsung .text {
  flex: 1;
  min-width: 0;
  font-size: .68rem;
  color: var(--text-3, #888);
  line-height: 1.55;
  margin: 0;
  font-family: 'NEXON Lv1 Gothic OTF', 'Malgun Gothic', sans-serif;
}
.cast-samsung .text strong {
	font-size: .75rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb, 59,130,246), .8);
}
.cast-samsung .banner .text a:hover strong {
	color: var(--accent, #3b82f6);
}
.cast-samsung .arrow {
  flex-shrink: 0;
  margin-left: auto;
  animation: csbArrow 1.5s ease-in-out infinite;
}
.cast-samsung .arrow i {
  color: var(--accent, #3b82f6);
  opacity: .7;
}
/* 라이트 테마 보정 */
[data-theme^="light"] .cast-samsung .banner {
  background: rgba(var(--accent-rgb), .05);
  border-color: rgba(var(--accent-rgb), .25);
}
[data-theme^="light"] .cast-samsung .banner:hover {
  background: rgba(var(--accent-rgb), .15);
}
[data-theme^="light"] .cast-samsung .text {
  color: #555;
}
[data-theme^="light"] .cast-samsung .text strong {
  color: #222;
}
/* ============================================================
   POPUP FIX (allplayer2 호환)
   JS(스킨/onair.js)는 공유/수면타이머/이퀄라이저 팝업을
   overlay.style.display='flex'/'none' 으로 열고 닫는다.
   (.open/.eq-open 클래스는 사용하지 않음) → opacity/transform
   숨김을 해제해 표시되게 보정한다.
   - 공유/수면타이머: allplayer2 와 동일한 UI/위치(중앙 배치)
   - 이퀄라이저: 현재(컴포넌트) UI 유지 + 표시 보정
   ============================================================ */

/* ---- 공유 팝업 = allplayer2 동일 ---- */
#share-popup-overlay {
    position: fixed; inset: 0; z-index: 2000; display: flex;
    align-items: center; justify-content: center; background: rgba(0,0,0,0.5);
    opacity: 1 !important; pointer-events: auto !important; backdrop-filter: none;
}
#share-popup {
    position: static; background: var(--card-bg);
    border: 1px solid var(--card-border); border-radius: 16px;
    padding: 24px; width: 360px; max-width: 90vw;
    opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important; transform: none !important; transition: none !important;
}
.share-popup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.share-popup-title { font-size: 16px; font-weight: 700; }
.share-popup-close { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 14px; transition: all 0.2s; background: transparent; border: none; cursor: pointer; }
.share-popup-close:hover { background: var(--bg3); color: var(--text); }
.share-popup-song { font-size: 13px; color: var(--text2); margin-bottom: 16px; }
.share-popup-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.share-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 10px; font-size: 11px; color: var(--text2); background: var(--input-bg); border: none; cursor: pointer; transition: all 0.2s; }
.share-btn:hover { background: var(--bg3); color: var(--text); }
.share-btn i { font-size: 18px; }
.share-btn--kakao:hover { background: #fee500; color: #3c1e1e; }
.share-btn--copy:hover { background: rgba(99,102,241,0.15); color: var(--accent2); }
.share-copy-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); padding: 8px 20px; border-radius: 8px; background: #22c55e; color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 3000; }
.share-copy-toast.show { opacity: 1; }

/* ---- 수면 타이머 팝업 = 자체 UI + 표시 보정, 위치는 중앙 ---- */
#sleep-timer-overlay {
    position: fixed; inset: 0; z-index: 2000; display: flex;
    align-items: center; justify-content: center; background: rgba(0,0,0,0.5);
    opacity: 1 !important; pointer-events: auto !important; backdrop-filter: none;
}
#sleep-timer-popup {
    position: static; width: 380px; max-width: 90vw;
    opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important; transform: none !important; transition: none !important;
}

/* ---- 이퀄라이저 팝업 = 참고사이트(컴포넌트) UI 유지 + 위치는 중앙 ---- */
#eq-overlay {
    position: fixed; inset: 0; z-index: 2000; display: flex;
    align-items: center; justify-content: center; background: rgba(0,0,0,0.5);
    opacity: 1 !important; pointer-events: auto !important; backdrop-filter: none;
}
#eq-popup {
    position: static; width: min(380px, calc(100vw - 24px));
    opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important; transform: none !important; transition: none !important;
}

/* ============================================================
   LIBRARY PLAYER BAR FIX (Spotify 스타일)
   라이브러리 창이 열려도 하단 플레이어바가 뒷배경에 묻히지 않고
   라이브러리 창 위에 그대로 표시되도록 원래 z-index 를 복원한다.
   (onair.css 의 .ap{z-index:10000} 의도 유지)
   ============================================================ */
footer.ap {
    z-index: 10000 !important;
}

/* ============================================================
   MAIN HERO EQ FIX
   eq-visual 이 100x40 으로 고정돼 있어 250x60 캔버스가 카드
   오른쪽으로 밀려 잘림 → 캔버스를 감싸고(자동 크기) 카드
   안쪽(우하단)으로 살짝 당겨 온전히 표시되도록 함
   ============================================================ */
.now-playing-card .eq-visual {
    position: absolute; right: 28px; bottom: 22px; top: auto;
    width: auto; height: auto;
}
.now-playing-card .eq-canvas-hero {
    display: block;
}