@font-face{font-family:'NEXON Lv1 Gothic OTF'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');}
@font-face{font-family:'PyeongChangPeace-Bold';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');font-weight:700;font-style:normal;}
:root{
--bg-0:#F0F5FC;
--bg-1:#FFFFFF;
--bg-2:#E3EDFB;
--bg-glass: rgba(255,255,255,0.72);
--teal:#2F6FE0;
--teal-rgb:47,111,224;
--teal-dim:#1E52B0;
--teal-deep:#153C82;
--coral:#FF6F59;
--ink:#0B2624;
--ink-dim:#4A5F7A;
--ink-faint:#7891AC;
--line: rgba(11,38,36,0.10);
--line-strong: rgba(var(--teal-rgb),0.35);
--shadow-glow: 0 0 40px rgba(var(--teal-rgb),0.15);
--radius-lg:24px;
--radius-md:16px;
--radius-sm:10px;
--surface-03: rgba(11,38,36,0.035);
--surface-05: rgba(11,38,36,0.05);
--surface-06: rgba(11,38,36,0.06);
--surface-08: rgba(11,38,36,0.07);
--surface-10: rgba(11,38,36,0.09);
--font-ui:"NEXON Lv1 Gothic OTF","Apple SD Gothic Neo","Apple SD Gothic Neo","Nanum Gothic","Malgun Gothic","PingFang SC","Microsoft YaHei","PingFang TC","Microsoft JhengHei","Hiragino Sans","Yu Gothic",Meiryo,"Noto Sans KR","Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans CJK","Helvetica Neue",Arial,sans-serif;

--on-accent:#FFFFFF;
/* scrim behind the page-loading overlay + card */
--overlay-scrim: rgba(11,38,36,0.35);

--loader-size: 150px;       /* 로더 컨테이너 전체 크기 (원본: 200px) */
--dot-ratio: 0.35;          /* 뭉쳤을 때(큰 점) 크기 = loader-size * dot-ratio */
--spread-scale: 0.45;       /* 퍼졌을 때(작은 점) 크기 = 뭉친 크기 * spread-scale */
--spread-distance: 0.45;    /* 퍼지는 거리 = loader-size * spread-distance (dot-3 기준) */
--bg-color: #000;
--dot-color-3: #f74d75;
--dot-color-2: #10beae;
--dot-color-1: #ffe386;
}
html[data-theme^="dark-"]{
--ink:#EAF6F5;
--line: rgba(234,246,245,0.08);
--surface-03: rgba(255,255,255,0.03);
--surface-05: rgba(255,255,255,0.05);
--surface-06: rgba(255,255,255,0.06);
--surface-08: rgba(255,255,255,0.08);
--surface-10: rgba(255,255,255,0.10);
--on-accent:#04211D;
--overlay-scrim: rgba(6,10,16,0.55);
}
html[data-theme="dark-teal"]{
--bg-0:#000000;--bg-1:#0A0A0A;--bg-2:#161616;--bg-glass: rgba(15,15,15,0.62);
--teal:#E8E8E8;--teal-rgb:232,232,232;--teal-dim:#A8A8A8;--teal-deep:#6E6E6E;
--ink-dim:#A0A0A0;--ink-faint:#5C5C5C;
--line-strong:rgba(232,232,232,0.28);--shadow-glow:0 0 40px rgba(232,232,232,0.12);
}
html[data-theme="dark-forest"]{
--bg-0:#0A140D;--bg-1:#0F241A;--bg-2:#153323;--bg-glass: rgba(15,36,26,0.62);
--teal:#43B87A;--teal-rgb:67,184,122;--teal-dim:#2E8C5B;--teal-deep:#1E6640;
--ink-dim:#8FB39D;--ink-faint:#547765;
--line-strong:rgba(67,184,122,0.28);--shadow-glow:0 0 40px rgba(67,184,122,0.15);
}
html[data-theme="dark-violet"]{
--bg-0:#120E1A;--bg-1:#1E1630;--bg-2:#2A1F42;--bg-glass: rgba(30,22,48,0.62);
--teal:#B18CFF;--teal-rgb:177,140,255;--teal-dim:#7C4DFF;--teal-deep:#5A32C4;
--ink-dim:#A79BC9;--ink-faint:#6E6188;
--line-strong:rgba(177,140,255,0.28);--shadow-glow:0 0 40px rgba(177,140,255,0.15);}
html[data-theme="dark-rose"]{
--bg-0:#170D14;--bg-1:#271420;--bg-2:#38192E;--bg-glass: rgba(39,20,32,0.62);
--teal:#FF6FA8;--teal-rgb:255,111,168;--teal-dim:#E23F79;--teal-deep:#B12E5E;
--ink-dim:#C99BB0;--ink-faint:#8A6274;
--line-strong:rgba(255,111,168,0.28);--shadow-glow:0 0 40px rgba(255,111,168,0.15);}
html[data-theme="dark-amber"]{
--bg-0:#160F08;--bg-1:#2A1D0E;--bg-2:#3D2A14;--bg-glass: rgba(42,29,14,0.62);
--teal:#FFC24C;--teal-rgb:255,194,76;--teal-dim:#E08E00;--teal-deep:#A66700;
--ink-dim:#C9B08F;--ink-faint:#8A7458;
--line-strong:rgba(255,194,76,0.28);--shadow-glow:0 0 40px rgba(255,194,76,0.15);}

html[data-theme^="light-"]{
--bg-1:#FFFFFF;
--ink:#0B2624;--ink-dim:#4B6B68;--ink-faint:#7C9A97;
--line: rgba(11,38,36,0.10);
--surface-03: rgba(11,38,36,0.035);
--surface-05: rgba(11,38,36,0.05);
--surface-06: rgba(11,38,36,0.06);
--surface-08: rgba(11,38,36,0.07);
--surface-10: rgba(11,38,36,0.09);
--on-accent:#FFFFFF;
--overlay-scrim: rgba(11,38,36,0.35);
}
html[data-theme="light-teal"]{--bg-0:#F1F8F6;--bg-2:#E4F3EF;--bg-glass: rgba(255,255,255,0.72);--teal:#0EA394;--teal-rgb:14,163,148;--teal-dim:#0C7E72;--teal-deep:#095C54;--ink-dim:#4B6B68;--ink-faint:#7C9A97;--line-strong:rgba(14,163,148,0.35);--shadow-glow:0 0 40px rgba(14,163,148,0.15);}
html[data-theme="light-blue"]{--bg-0:#F0F5FC;--bg-2:#E3EDFB;--bg-glass: rgba(255,255,255,0.72);--teal:#2F6FE0;--teal-rgb:47,111,224;--teal-dim:#1E52B0;--teal-deep:#153C82;--ink-dim:#4A5F7A;--ink-faint:#7891AC;--line-strong:rgba(47,111,224,0.35);--shadow-glow:0 0 40px rgba(47,111,224,0.15);}
html[data-theme="light-violet"]{--bg-0:#F5F2FC;--bg-2:#ECE5FB;--bg-glass: rgba(255,255,255,0.72);--teal:#7C4DFF;--teal-rgb:124,77,255;--teal-dim:#5A32C4;--teal-deep:#3E1F94;--ink-dim:#5C4F7A;--ink-faint:#8B7EAC;--line-strong:rgba(124,77,255,0.35);--shadow-glow:0 0 40px rgba(124,77,255,0.15);}
html[data-theme="light-rose"]{--bg-0:#FCF1F5;--bg-2:#FBE4EC;--bg-glass: rgba(255,255,255,0.72);--teal:#E23F79;--teal-rgb:226,63,121;--teal-dim:#B12E5E;--teal-deep:#7E1F42;--ink-dim:#7A4F5F;--ink-faint:#AC7E8E;--line-strong:rgba(226,63,121,0.35);--shadow-glow:0 0 40px rgba(226,63,121,0.15);}
html[data-theme="light-amber"]{--bg-0:#FCF6EC;--bg-2:#FAEBD2;--bg-glass: rgba(255,255,255,0.72);--teal:#E08E00;--teal-rgb:224,142,0;--teal-dim:#A66700;--teal-deep:#7A4D00;--ink-dim:#7A6640;--ink-faint:#AC9670;--line-strong:rgba(224,142,0,0.35);--shadow-glow:0 0 40px rgba(224,142,0,0.15);}
/* ============================================================
THEME PANEL
============================================================ */
#themeOverlay{
position:fixed;inset:0;z-index:98;display:none;
background:rgba(6,10,14,0.55);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
opacity:0;transition:opacity .2s ease;
}
#themeOverlay.is-active{display:block;opacity:1;}
#themePanel{
position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.94);opacity:0;pointer-events:none;
width:calc(100% - 40px);max-width:440px;max-height:84vh;overflow-y:auto;
background:
linear-gradient(180deg, rgba(var(--teal-rgb),0.07), transparent 120px),
var(--bg-1);
border:1px solid var(--line);
border-radius:26px;padding:22px 20px 20px;z-index:99;
box-shadow:0 24px 60px -16px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--teal-rgb),0.06), 0 0 40px -8px rgba(var(--teal-rgb),0.18);
transition:transform .22s cubic-bezier(.2,.8,.3,1.2), opacity .2s ease;
}
#themePanel.is-active{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto;}
.theme-panel-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.theme-panel-head-icon{
width:40px;height:40px;flex-shrink:0;border-radius:13px;
background:rgba(var(--teal-rgb),0.12);color:var(--teal);
display:flex;align-items:center;justify-content:center;font-size:1.05rem;
}
.theme-panel-head-text{flex:1;min-width:0;}
.theme-panel-head-text strong{display:block;color:var(--ink);font-weight:800;font-size:1.02rem;}
.theme-panel-head-text small{display:block;color:var(--ink-faint);font-size:.74rem;margin-top:2px;}
.theme-panel-close-btn{
width:30px;height:30px;flex-shrink:0;border-radius:50%;border:none;
background:var(--surface-06);color:var(--ink-dim);font-size:.82rem;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease;
}
.theme-panel-close-btn:hover{background:rgba(var(--teal-rgb),0.12);color:var(--teal);}

.theme-group{border-radius:20px;padding:16px 14px 18px;margin-bottom:12px;position:relative;overflow:hidden;}
.theme-group:last-child{margin-bottom:0;}
.theme-group.is-light{
background:linear-gradient(155deg, #FFFFFF 0%, #F1F4F5 100%);
border:1px solid rgba(11,38,36,0.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}
.theme-group.is-dark{
background:linear-gradient(155deg, #17212B 0%, #0B1218 100%);
border:1px solid rgba(234,246,245,0.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
.theme-group-label{display:flex;align-items:center;gap:7px;font-size:0.78rem;font-weight:800;margin-bottom:14px;letter-spacing:.01em;}
.theme-group.is-light .theme-group-label{color:#5C6B72;}
.theme-group.is-dark .theme-group-label{color:#8FA0AA;}
.theme-group-label i{
width:20px;height:20px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.68rem;
}
.theme-group.is-light .theme-group-label i{background:rgba(224,142,0,0.14);color:#C97F00;}
.theme-group.is-dark .theme-group-label i{background:rgba(124,158,255,0.16);color:#8FAFFF;}

.theme-swatch-row{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;}
.theme-card{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;padding:0;cursor:pointer;}
.theme-card-preview{
width:100%;aspect-ratio:1/1;border-radius:14px;position:relative;overflow:hidden;
background:linear-gradient(150deg, var(--swatch-bg) 0%, var(--swatch-bg) 42%, var(--swatch-accent) 100%);
box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12), 0 2px 6px -2px rgba(0,0,0,0.18);
transition:transform .18s cubic-bezier(.2,.8,.3,1.2), box-shadow .18s ease;
}
.theme-card-preview::after{
content:"";position:absolute;inset:0;border-radius:inherit;
background:linear-gradient(160deg, rgba(255,255,255,0.35), transparent 55%);
}
.theme-card-preview::before{
content:"\2713";position:absolute;top:5px;right:5px;width:16px;height:16px;border-radius:50%;
background:var(--swatch-accent);color:#fff;font-size:9px;font-weight:900;line-height:16px;text-align:center;
box-shadow:0 0 0 2px rgba(255,255,255,0.9);
opacity:0;transform:scale(.4);transition:opacity .15s ease, transform .15s ease;z-index:1;
}
.theme-card:hover .theme-card-preview{transform:translateY(-3px) scale(1.03);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12), 0 8px 18px -6px var(--swatch-accent);}
.theme-card.is-active .theme-card-preview{box-shadow:0 0 0 3px var(--swatch-accent), 0 6px 16px -6px var(--swatch-accent);}
.theme-card.is-active .theme-card-preview::before{opacity:1;transform:scale(1);}
.theme-card-name{font-size:0.66rem;font-weight:600;}
.theme-reset-btn{
display:flex;align-items:center;justify-content:center;gap:8px;
width:100%;margin-top:14px;padding:12px 14px;
border:1px dashed var(--line-strong);border-radius:16px;
background:transparent;color:var(--ink-dim);
font-family:var(--font-ui);font-size:0.78rem;font-weight:700;
cursor:pointer;transition:.18s;
}
.theme-reset-btn:hover{color:var(--teal);border-color:var(--teal);border-style:solid;background:rgba(var(--teal-rgb),0.07);}
.theme-card-name{color:var(--swatch-accent);opacity:0.55;transition:opacity .15s ease;}
.theme-card.is-active .theme-card-name{opacity:1;font-weight:800;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{
margin:0;
min-width:380px;
font-family:var(--font-ui);
text-rendering:optimizeLegibility;
color:var(--ink);
background:
radial-gradient(900px 520px at 10% -12%, rgba(var(--teal-rgb),0.16), transparent 55%),
radial-gradient(760px 460px at 105% 8%, rgba(var(--teal-rgb),0.09), transparent 52%),
radial-gradient(680px 520px at 50% 118%, rgba(var(--teal-rgb),0.07), transparent 58%),
linear-gradient(165deg, var(--bg-0) 0%, var(--bg-1) 62%, var(--bg-0) 100%);
background-attachment:fixed;
min-height:100vh;
padding-bottom:calc(96px + env(safe-area-inset-bottom));
position:relative;
}
body::before{
content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
opacity:.05;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
html[data-theme^="dark-"] body::before{opacity:.07;}
a{color:inherit;text-decoration:none;}
::-webkit-scrollbar{display:none;}
/* ============================================================
TOP NAV
============================================================ */
.top-naviagation{position:sticky;top:0;left:0;width:100%;z-index:20;}
.fire_games-nav{
width:100%;height:58px;position:relative;
background:var(--bg-glass);
-webkit-backdrop-filter:blur(16px) saturate(140%);
backdrop-filter:blur(16px) saturate(140%);
transition:background .2s ease;
}
.fire_games-nav::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg, transparent, var(--line-strong) 50%, transparent);
}
.fire_games_logo{position:absolute;top:50%;left:18px;transform:translateY(-50%);}
.fire_games_logo a{
font-family:"PyeongChangPeace-Bold","NEXON Lv1 Gothic OTF", "Apple SD Gothic Neo", "Malgun Gothic", serif;
display:inline-flex;align-items:center;gap:3px;
font-weight:800;font-size:1.02rem;color:var(--teal);
}
.fire_games_logo a i{color:var(--teal);font-size:1.25rem;}
.power{position:absolute;top:50%;right:18px;transform:translateY(-50%);display:flex;align-items:center;}
.power a{margin-left:10px;}
.power a i{
display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;border-radius:50%;
background:rgba(var(--teal-rgb),0.09);
border:1px solid var(--line);
color:var(--ink-dim);font-size:0.82rem;
transition:.2s;
}
.power a:hover i{color:var(--teal);border-color:var(--line-strong);background:rgba(var(--teal-rgb),0.08);}
.my-m{margin:0 20px;max-width:90%;margin-left:auto;margin-right:auto;}
.my-search{
position:relative;
padding:15px 0 5px;
}
.search_p {
position:relative;
padding-top:10px;
width: 100%;
max-width:460px;
margin:0 auto;
overflow:hidden;
}
#msearch, #mpage{
display:flex;
align-items:center;
gap:0;
border:3px dashed var(--line-strong);
border-radius:999px;
padding:4px 4px 4px 18px;
background:var(--shadow-glow);
-webkit-backdrop-filter:blur(14px) saturate(140%);
backdrop-filter:blur(14px) saturate(140%);
transition:box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.my-input{
flex:1;border:none;outline:none;background:transparent;
color:var(--ink);font-family:var(--font-ui);font-size:0.8rem;height:40px;
}
.my-input::placeholder{font-size:0.8rem;color:var(--ink-faint);}
.my-close-btn{
border:none;cursor:pointer;
width:42px;height:42px;border-radius:50%;
background:linear-gradient(135deg,var(--teal),var(--teal-dim));
color:var(--on-accent);font-size:0.9rem;font-weight:700;
display:flex;align-items:center;justify-content:center;
transition:.2s;
}
.my-close-btn:hover{filter:brightness(1.1);box-shadow:0 0 16px rgba(var(--teal-rgb),0.4);}
.centered-audio-container{margin:0 auto;}
/* ============================================================
BOTTOM PLAYER BAR
fixed like the top nav (.top-naviagation), 2 content rows:
row1 = now-playing title, row2 = time + controls + progress
============================================================ */
.player-ctn{
position:fixed;
left:0;
right:0;
bottom:0;
width:100%;
z-index:30;
padding:0;
background:linear-gradient(90deg, var(--swatch-bg) 0%, var(--swatch-bg) 42%, var(--swatch-accent) 100%);
-webkit-backdrop-filter:blur(16px) saturate(140%);
backdrop-filter:blur(16px) saturate(140%);
box-shadow:0 -8px 25px -12px rgba(var(--teal-rgb),0.3);
transition:background .2s ease;
}
.timer,.duration{
position:static;
flex:0 0 auto;
min-width:36px;
font-family:var(--font-ui);
font-size:0.72rem;font-weight:700;
font-variant-numeric:tabular-nums;
color:var(--ink-dim);
letter-spacing:.02em;
}
.duration{text-align:right;}
#myProgress{
position:relative;
width:100%;
height:3px;
background:rgba(var(--teal-rgb),0.2);
border-radius:0;
cursor:pointer;
margin:0;
}
#myBar{
position:relative;
height:3px;
width:0%;
background:linear-gradient(90deg,var(--teal-dim),var(--teal));
border-radius:0;
}
#myBar::after{
content:"";
position:absolute;
right:-5px;
top:50%;
transform:translateY(-50%);
width:11px;
height:11px;
border-radius:50%;
background:var(--teal);
box-shadow:0 0 0 3px rgba(var(--teal-rgb),0.18), 0 2px 6px rgba(0,0,0,0.4);
}
/* row1: now-playing title */
.marquee-container{overflow:hidden;white-space:nowrap;width:100%;margin:10px auto 5px;display:flex;align-items:center;justify-content:flex-start;}
.marquee-content{display:inline-flex;align-items:center;padding:0 10px;gap:4px;white-space:nowrap;flex:0 0 auto;will-change:transform;transform:translateX(0);opacity:0;transition:opacity .25s ease;}
.marquee-content.is-static{margin:0 auto;}
.marquee-content.mq-ready{opacity:1;}

.eq-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px;flex:0 0 auto;}
.eq-bars span{width:3px;background:var(--teal);border-radius:2px;animation:eq 0.9s ease-in-out infinite;}
.eq-bars span:nth-child(1){height:40%;animation-delay:-0.6s;}
.eq-bars span:nth-child(2){height:100%;animation-delay:-0.3s;}
.eq-bars span:nth-child(3){height:65%;animation-delay:0s;}
@keyframes eq{0%,100%{transform:scaleY(0.35);}50%{transform:scaleY(1);}}

.title{
font-size:0.85rem;
font-weight:700;
color:var(--teal);
margin:0;
}
/* row2: time + controls, in one line */
.player-row2{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:2px 14px calc(8px + env(safe-area-inset-bottom));
}
.btn-ctn{
flex:1;
height:auto;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
z-index:15;
margin:0;
padding:0;
background:none;
transition:box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-action{
cursor:pointer;
width:30px;height:30px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:var(--ink-dim);font-size:0.95rem;
transition:.18s;
}
.btn-action:hover{background:rgba(var(--teal-rgb),0.10);color:var(--teal);}
.btn-action .support{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--ink-dim);}
.btn-faplay{
width:40px;height:40px;
background:radial-gradient(circle at 35% 30%, rgba(var(--teal-rgb),0.9), var(--teal-dim) 70%);
color:var(--on-accent);
box-shadow:0 0 0 6px rgba(var(--teal-rgb),0.10), 0 8px 24px -8px rgba(var(--teal-rgb),0.55);
margin:0 4px;
}
.btn-faplay:hover{transform:scale(1.04);}
.btn-faplay i{font-size:1.15rem;}
#toggleMute i{min-width:auto;}
/* ============================================================
PLAYLIST
============================================================ */
.playlist-ctn{
position:relative;
margin-top:6px;
border-top:none;
}
.playlist-ctn::before{
content:"";
display:block;
width:100%;
height:1px;
background:linear-gradient(90deg,transparent,var(--line-strong) 50%,transparent);
}
.playlist-track-ctn{
position:relative;
display:flex;
align-items:center;gap:0px;
padding:11px 3px;
cursor:pointer;
transition:.15s;
}
.playlist-track-ctn::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg, transparent, var(--line-strong) 50%, transparent);
}
.playlist-track-ctn:last-child{border-bottom:none;}
.playlist-track-ctn:hover{
background:rgba(var(--teal-rgb),0.03);
border-radius:var(--radius-sm);
}
.playlist-btn-play{
flex:0 0 auto;width:30px;height:30px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(var(--teal-rgb),0.09);color:var(--ink-faint);font-size:0.7rem;
margin:0 5px;
}
.playlist-info-track{
color:var(--ink-dim);font-size:0.8rem;font-weight:500;
text-shadow:none;-webkit-line-clamp:1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.active-track{background:rgba(var(--teal-rgb),0.07);border-radius:var(--radius-sm);border-bottom-color:transparent;box-shadow:inset 3px 0 0 var(--teal);}
.active-track .playlist-info-track{color:var(--teal);}
.active-track .playlist-btn-play{background:rgba(var(--teal-rgb),0.16);color:var(--teal);}
/* ============================================================
AUTO-PAGE TOGGLE - glass card w/ icon + animated switch
============================================================ */
.auto_page{
display:flex;align-items:center;justify-content:space-between;gap:12px;
max-width:460px;margin:14px auto 0;padding:12px 16px;
background:var(--bg-glass);border:1px solid var(--line);border-radius:var(--radius-md);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
transition:border-color .2s ease, background .2s ease;
}
.auto_page:has(input:checked){border-color:var(--line-strong);}
.auto_page-group{
position:relative;
display:flex;
flex-direction:column;
gap:10px;
max-width:460px;
margin:14px auto 0;
padding:12px 16px;
background:var(--bg-glass);
border:3px dashed var(--line-strong);
border-radius:var(--radius-md);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
transition:border-color .2s ease, background .2s ease;
}
.auto_page-group:has(input:checked){border-color:var(--line-strong);}
.auto_page-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.auto_page-row+.auto_page-row{padding-top:10px;}
.auto_page-group .auto_page-row:has(input:checked) .auto_page-icon{
background:rgba(var(--teal-rgb),0.16);color:var(--teal);
box-shadow:0 0 0 4px rgba(var(--teal-rgb),0.08);
}
.auto_page-row:first-child{
position:relative;
}
.auto_page-row:first-child::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-11px;
height:1px;
background:linear-gradient(
90deg,
transparent,
var(--line-strong) 50%,
transparent
);
}
.auto_page-info{display:flex;align-items:center;gap:12px;min-width:0;}
.auto_page-icon{
flex:none;width:34px;height:34px;border-radius:10px;
display:flex;align-items:center;justify-content:center;
background:rgba(var(--teal-rgb),0.10);color:var(--ink-dim);font-size:0.85rem;
transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}
.auto_page-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.auto_page-text strong{
color:var(--ink-dim);font-size:0.75rem;font-weight:700;text-shadow:none;
}
.auto_page-text small{
color:var(--ink-faint);font-size:0.65rem;font-weight:500;text-shadow:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
margin-top:5px;
}
.auto_page-switch{flex:none;position:relative;display:inline-flex;cursor:pointer;}
.auto_page-switch input{
position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;
}
.auto_page-track{
width:46px;height:26px;border-radius:999px;
background:var(--surface-10);
border:1px solid var(--line);
position:relative;
transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.auto_page-thumb{
position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
background: linear-gradient(135deg,var(--teal),var(--teal-dim));
box-shadow:0 1px 3px rgba(0,0,0,0.35);
transition:transform .25s cubic-bezier(.4,0,.2,1), background .25s ease;
}
.auto_page-switch input:checked ~ .auto_page-track{
background:linear-gradient(90deg,var(--teal-dim),var(--teal));
border-color:transparent;
box-shadow:0 0 0 4px rgba(var(--teal-rgb),0.16), 0 2px 8px rgba(var(--teal-rgb),0.25);
}
.auto_page-switch input:checked ~ .auto_page-track .auto_page-thumb{
transform:translateX(20px);
background:var(--on-accent);
}
.auto_page-switch input:focus-visible ~ .auto_page-track{
outline:2px solid var(--teal);outline-offset:2px;
}
.auto_page:has(input:checked) .auto_page-icon{
background:rgba(var(--teal-rgb),0.16);color:var(--teal);
box-shadow:0 0 0 4px rgba(var(--teal-rgb),0.08);
}

/* ============================================================
SONGTOTAL / PAGINATION
============================================================ */
.songtotal{
max-width:fit-content;margin:10px auto 0;
background:var(--bg-glass);border:1px solid var(--line);border-radius:999px;
padding:8px 18px;font-size:0.78rem;color:var(--ink-dim);font-weight:600;
font-family:var(--font-ui);
box-shadow:none;text-shadow:none;
}
.songtotal b, .songtotal .num{color:var(--teal);}
.pagination{margin:10px auto;padding:0;max-width:98%;text-align:center;line-height:1;}
.pagination a{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:38px;
height:38px;
padding:0 8px;
margin:3px 3px;
border-radius:10px;
background:rgba(var(--teal-rgb),0.08);
border:1px solid var(--line);
color:var(--ink-dim);
font-size:0.75rem;
font-family:var(--font-ui);
white-space:nowrap;
transition:.15s;
text-shadow:none;
}
.pagination a:hover{
border-color:var(--line-strong);
color:var(--teal);
background:rgba(var(--teal-rgb),0.18);
}
.pagination .active{
background:var(--teal);
color:var(--on-accent);
font-weight:800;
border-color:var(--teal);
}
/* Toast container */
#vip_toast{
position: fixed;
left: 50%;
bottom: 56px;
transform: translate(-50%, 24px) scale(0.92);
display:flex;
align-items:center;
gap:14px;
padding: 18px 20px 18px 20px;
border-radius: 16px;
background: var(--bg-glass);
border: 1px solid var(--line-strong);
box-shadow:
0 20px 45px rgba(0,0,0,0.25),
0 0 0 1px var(--surface-05) inset,
var(--shadow-glow);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
opacity: 0;
pointer-events: none;
transition:
opacity .45s cubic-bezier(.19,1,.22,1),
transform .45s cubic-bezier(.19,1,.22,1),
background .2s ease, border-color .2s ease;
z-index: 999;
max-width: 96vw;
overflow: hidden;
}
#vip_toast.show{
opacity: 1;
transform: translate(-50%, 0) scale(1);
animation: toast-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes toast-pop{
0%{ transform: translate(-50%, 24px) scale(0.9); }
55%{ transform: translate(-50%, -6px) scale(1.02); }
100%{ transform: translate(-50%, 0) scale(1); }
}
.vip_icon{
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg,var(--teal),var(--teal-dim));
display:flex;
align-items:center;
justify-content:center;
box-shadow: 0 0 14px rgba(var(--teal-rgb),0.55);
animation: icon-glow 2.2s ease-in-out infinite;
transition:background .2s ease;
}
.vip_icon svg{
width: 18px;
height: 18px;
fill: var(--on-accent);
}
@keyframes icon-glow{
0%,100%{ box-shadow: 0 0 10px rgba(var(--teal-rgb),0.4); }
50%{ box-shadow: 0 0 20px rgba(var(--teal-rgb),0.75); }
}
.vip_text{
display:flex;
flex-direction:column;
gap:2px;
}
#vip_toast span.msg{
color: var(--ink);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.2px;
white-space: nowrap;
}
.vip_sub{
color: var(--ink-faint);
font-size: 0.7rem;
font-weight: 400;
}
.vip_progress{
position:absolute;
left:0; bottom:0;
height: 3px;
width: 100%;
background: linear-gradient(90deg,var(--teal-dim),var(--teal));
transform-origin: left;
transform: scaleX(0);
}
#vip_toast.show .vip_progress{
animation: progress-run 3s linear forwards;
}
@keyframes progress-run{
from{ transform: scaleX(1); }
to{ transform: scaleX(0); }
}

@media all and (max-width: 768px) and (orientation: portrait) {
#policeaudioControl {
transform: translateX(calc(-50% - 20px));
}
.my-m{margin:0 20px;max-width:94%;margin-left:auto;margin-right:auto;}
}
/*로딩애니메이션*/
#pageLoaderBackdrop{
position:fixed;inset:0;z-index:999998;
background:var(--overlay-scrim);
opacity:0;visibility:hidden;
transition:opacity .25s ease, visibility .25s ease;
}
#pageLoaderWrap:has(#pageLoaderOverlay.is-active) #pageLoaderBackdrop{
opacity:1;visibility:visible;
}
#pageLoaderOverlay {
position:fixed; top:50%; top:50dvh; left:50%;
transform: translate(-50%, -50%);
z-index:999999 !important;
display:flex; align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
width: var(--loader-size);
height: var(--loader-size);
margin: 0;
filter: url('#smartgoo');
-webkit-animation: rotate-move 2s ease-in-out infinite;
animation: rotate-move 2s ease-in-out infinite;
}
#pageLoaderOverlay.is-active{ opacity:1; visibility:visible; }
.smartdot {
width: calc(var(--loader-size) * var(--dot-ratio));
height: calc(var(--loader-size) * var(--dot-ratio));
border-radius: 50%;
background-color: #000;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.smartdot-3 {
background-color: var(--dot-color-3);
-webkit-animation: dot-3-move 2s ease infinite, index 6s ease infinite;
animation: dot-3-move 2s ease infinite, index 6s ease infinite;
}
.smartdot-2 {
background-color: var(--dot-color-2);
-webkit-animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
}
.smartdot-1 {
background-color: var(--dot-color-1);
-webkit-animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
}
@-webkit-keyframes dot-3-move {
  20% {transform: scale(1)}
  45% {transform: translateY(calc(var(--loader-size) * var(--spread-distance) * -0.2)) scale(var(--spread-scale))}
  60% {transform: translateY(calc(var(--loader-size) * var(--spread-distance) * -1)) scale(var(--spread-scale))}
  80% {transform: translateY(calc(var(--loader-size) * var(--spread-distance) * -1)) scale(var(--spread-scale))}
  100% {transform: translateY(0px) scale(1)}
}
@keyframes dot-3-move {
  20% {transform: scale(1)}
  45% {transform: translateY(calc(var(--loader-size) * var(--spread-distance) * -0.2)) scale(var(--spread-scale))}
  60% {transform: translateY(calc(var(--loader-size) * var(--spread-distance) * -1)) scale(var(--spread-scale))}
  80% {transform: translateY(calc(var(--loader-size) * var(--spread-distance) * -1)) scale(var(--spread-scale))}
  100% {transform: translateY(0px) scale(1)}
}
@-webkit-keyframes dot-2-move {
  20% {transform: scale(1)}
  45% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * -0.1778), calc(var(--loader-size) * var(--spread-distance) * 0.1333)) scale(var(--spread-scale))}
  60% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * -0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  80% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * -0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  100% {transform: translateY(0px) scale(1)}
}
@keyframes dot-2-move {
  20% {transform: scale(1)}
  45% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * -0.1778), calc(var(--loader-size) * var(--spread-distance) * 0.1333)) scale(var(--spread-scale))}
  60% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * -0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  80% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * -0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  100% {transform: translateY(0px) scale(1)}
}
@-webkit-keyframes dot-1-move {
  20% {transform: scale(1)}
  45% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * 0.1778), calc(var(--loader-size) * var(--spread-distance) * 0.1333)) scale(var(--spread-scale))}
  60% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * 0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  80% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * 0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  100% {transform: translateY(0px) scale(1)}
}
@keyframes dot-1-move {
  20% {transform: scale(1)}
  45% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * 0.1778), calc(var(--loader-size) * var(--spread-distance) * 0.1333)) scale(var(--spread-scale))}
  60% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * 0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  80% {transform: translate(calc(var(--loader-size) * var(--spread-distance) * 0.8889), calc(var(--loader-size) * var(--spread-distance) * 0.6667)) scale(var(--spread-scale))}
  100% {transform: translateY(0px) scale(1)}
}
@-webkit-keyframes rotate-move {
55% {transform: translate(-50%, -50%) rotate(0deg)}
80% {transform: translate(-50%, -50%) rotate(360deg)}
100% {transform: translate(-50%, -50%) rotate(360deg)}
}
@keyframes rotate-move {
55% {transform: translate(-50%, -50%) rotate(0deg)}
80% {transform: translate(-50%, -50%) rotate(360deg)}
100% {transform: translate(-50%, -50%) rotate(360deg)}
}
@-webkit-keyframes index {
0%, 100% {z-index: 3}
33.3% {z-index: 2}
66.6% {z-index: 1}
}
@keyframes index {
0%, 100% {z-index: 3}
33.3% {z-index: 2}
66.6% {z-index: 1}
}