/* ══════════════════════════════════════════════════════
폰트 임포트
══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Noto+Sans+KR:wght@300;400&display=swap');
@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: 'SchoolSafetyPuzzleOutline';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimPuzzleTTF-Outline.woff2') format('woff2');
font-weight: normal;
font-display: swap;
}
/* ══════════════════════════════════════════════════════
DevTools 10-Theme CSS 변수
══════════════════════════════════════════════════════ */
[data-theme="dark-midnight"] {
--bg-0:#131923;
--bg-1:#1c2436;
--bg-2:#253048;
--bg-3:#2f3d5c;
--border:rgba(99,147,230,.12);
--border-h:rgba(99,147,230,.25);
--text-1:#dfe5f2;
--text-2:#8ea6cc;
--text-3:#6d84ac;
--accent:#5b9cf6;
--accent-rgb:91,156,246;
--accent-contrast:#0b1626;
--purple:#818cf8;
--pink:#e879f9;
--cyan:#22d3ee;
--green:#34d399;
--player-bg:rgba(19,25,35,.92);
--dot:#5b9cf6;
--topbar-bg:rgba(19,25,35,.97);
}
[data-theme="dark-void"] {
--bg-0:#0e0a1a;--bg-1:#18112e;--bg-2:#231944;--bg-3:#302456;
--border:rgba(180,120,255,.1);--border-h:rgba(180,120,255,.22);
--text-1:#e3ddf3;--text-2:#9b8cc2;--text-3:#6f5ea6;
--accent:#c084fc;--accent-rgb:192,132,252;
--accent-contrast:#130b22;
--purple:#a855f7;--pink:#f472b6;--cyan:#818cf8;--green:#34d399;
--player-bg:rgba(14,10,26,.9);--dot:#c084fc;
--topbar-bg:rgba(14,10,26,.97);
}
[data-theme="dark-amber"] {
--bg-0:#150f02;--bg-1:#241808;--bg-2:#352510;--bg-3:#44321a;
--border:rgba(255,180,30,.1);--border-h:rgba(255,180,30,.22);
--text-1:#f1e7cd;--text-2:#b29057;--text-3:#8f7848;
--accent:#fbbf24;--accent-rgb:251,191,36;
--accent-contrast:#241500;
--purple:#f59e0b;--pink:#fb923c;--cyan:#facc15;--green:#86efac;
--player-bg:rgba(21,15,2,.9);--dot:#fbbf24;
--topbar-bg:rgba(21,15,2,.97);
}
[data-theme="dark-forest"] {
--bg-0:#081208;--bg-1:#0f2010;--bg-2:#163018;--bg-3:#1e4022;
--border:rgba(40,180,80,.1);--border-h:rgba(40,180,80,.22);
--text-1:#d9eee0;--text-2:#6fbf8f;--text-3:#4a9165;
--accent:#22c55e;--accent-rgb:34,197,94;
--accent-contrast:#03210c;
--purple:#4ade80;--pink:#86efac;--cyan:#34d399;--green:#10b981;
--player-bg:rgba(8,18,8,.9);--dot:#22c55e;
--topbar-bg:rgba(8,18,8,.97);
}
[data-theme="dark-crimson"] {
--bg-0:#150a0d;--bg-1:#261014;--bg-2:#36181e;--bg-3:#472228;
--border:rgba(240,50,80,.1);--border-h:rgba(240,50,80,.22);
--text-1:#efdde1;--text-2:#bb8493;--text-3:#9d6372;
--accent:#fb7185;--accent-rgb:251,113,133;
--accent-contrast:#1c0509;
--purple:#f43f5e;--pink:#e879a4;--cyan:#fb7185;--green:#fca5a5;
--player-bg:rgba(21,10,13,.9);--dot:#fb7185;
--topbar-bg:rgba(21,10,13,.97);
}
[data-theme="light-arctic"] {
--bg-0:#edf5fe;--bg-1:#dceefb;--bg-2:#c8e4f8;--bg-3:#aed4f0;
--border:rgba(30,111,186,.12);--border-h:rgba(30,111,186,.28);
--text-1:#1d5583;--text-2:#3f7096;--text-3:#4e7395;
--accent:#1e6fba;--accent-rgb:30,111,186;
--accent-contrast:#ffffff;
--purple:#4f46e5;--pink:#db2777;--cyan:#0284c7;--green:#059669;
--player-bg:rgba(220,238,251,.96);--dot:#1e6fba;
--topbar-bg:rgba(220,238,251,.97);
}
[data-theme="light-mint"] {
--bg-0:#e8f8f2;--bg-1:#d0f0e4;--bg-2:#b8e8d4;--bg-3:#9cd8c0;
--border:rgba(5,150,105,.12);--border-h:rgba(5,150,105,.28);
--text-1:#0f6d4a;--text-2:#2c7c58;--text-3:#4a7a63;
--accent:#059669;--accent-rgb:5,150,105;
--accent-contrast:#04342a;
--purple:#7c3aed;--pink:#db2777;--cyan:#0891b2;--green:#10b981;
--player-bg:rgba(208,240,228,.96);--dot:#059669;
--topbar-bg:rgba(208,240,228,.97);
}
[data-theme="light-golden"] {
--bg-0:#fdf5e0;--bg-1:#faecc8;--bg-2:#f5e0a0;--bg-3:#edd080;
--border:rgba(180,83,9,.12);--border-h:rgba(180,83,9,.28);
--text-1:#8a4b06;--text-2:#8a6130;--text-3:#8a6d45;
--accent:#b45309;--accent-rgb:180,83,9;
--accent-contrast:#ffffff;
--purple:#7c3aed;--pink:#db2777;--cyan:#0369a1;--green:#15803d;
--player-bg:rgba(250,236,200,.96);--dot:#b45309;
--topbar-bg:rgba(250,236,200,.97);
}
[data-theme="light-lavender"] {
--bg-0:#f0ecfd;--bg-1:#e0d8fc;--bg-2:#ccc4f8;--bg-3:#b8aef4;
--border:rgba(109,40,217,.12);--border-h:rgba(109,40,217,.28);
--text-1:#4f2d96;--text-2:#6a4aa0;--text-3:#75619f;
--accent:#6d28d9;--accent-rgb:109,40,217;
--accent-contrast:#ffffff;
--purple:#7c3aed;--pink:#be185d;--cyan:#0891b2;--green:#059669;
--player-bg:rgba(224,216,252,.96);--dot:#6d28d9;
--topbar-bg:rgba(224,216,252,.97);
}
[data-theme="light-sakura"] {
--bg-0:#f2d6e4;--bg-1:#e8c0d4;--bg-2:#d9a8c0;--bg-3:#c990aa;
--border:rgba(190,24,93,.15);--border-h:rgba(190,24,93,.32);
--text-1:#9c174f;--text-2:#a84870;--text-3:#985f7c;
--accent:#be185d;--accent-rgb:190,24,93;
--accent-contrast:#ffffff;
--purple:#7c3aed;--pink:#ec4899;--cyan:#0891b2;--green:#059669;
--player-bg:rgba(232,192,212,.97);--dot:#be185d;
--topbar-bg:rgba(232,192,212,.97);
}
/* ══════════════════════════════════════════════════════
플레이어 높이 전역 변수
--player-h 를 한 곳에서만 바꾸면 layout·pl-container 등
모든 계산이 자동으로 연동됩니다.
══════════════════════════════════════════════════════ */
:root {
--player-h: 76px; /* 데스크탑 고정 높이 */
--topbar-h: 56px; /* 탑바 높이 */
--accentrepeat:#FF0000;
--sidebar-w: 220px; /* 사이드바 펼침 너비 */
--sidebar-collapsed-w: 64px; /* 사이드바 접힘 너비 */
}
/* ══════════════════════════════════════════════════════
리셋 & 기본
══════════════════════════════════════════════════════ */
*, *::before, *::after {box-sizing: border-box;margin: 0;padding: 0;outline: none;-webkit-tap-highlight-color: transparent !important;user-select: none;-webkit-user-select: none;}
html {height: 100%;background: var(--bg-0);transition: background .25s ease;overflow-x: hidden;overflow-y: auto;}
body {
height: 100%;
height: 100dvh;
background: transparent;
color: var(--text-1);
font-family: 'NEXON Lv1 Gothic OTF','Malgun Gothic',sans-serif;
font-size: 14px;
line-height: 1.6;
transition: color .25s ease;
overflow-x: hidden;
overflow-y: auto;
}
::selection {
background: rgba(var(--accent-rgb), .1);
}
::-moz-selection {
background: rgba(var(--accent-rgb), .1);
}
a, button, input, select, textarea, label,
[role="button"], [tabindex] {
-webkit-tap-highlight-color: transparent;
outline: none;
-webkit-touch-callout: none;
user-select: none;
-webkit-user-select: none;
}
:focus, :focus-visible {
outline: none;
}
a {text-decoration: none;color: inherit;touch-action: manipulation;}
button {font-family: inherit;cursor: pointer;}
ul {list-style: none;}
::-webkit-scrollbar {width: 5px;height: 5px;}
::-webkit-scrollbar-track {background: var(--bg-0);}
::-webkit-scrollbar-thumb {background: var(--bg-3);border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: var(--text-3);}
* {scrollbar-width: thin;scrollbar-color: var(--bg-3) var(--bg-0);}
.hide {display: none !important;}
.audiobutton {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
margin-top:0;padding:0;border:0;outline:0;background:none;box-shadow:none;
}

body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
opacity: 0;
transition: opacity .25s ease;
}
[data-theme="dark-midnight"] body::before {opacity:1;background: radial-gradient(ellipse at 15% 20%, rgba(91,156,246,.18) 0%, transparent 48%), radial-gradient(ellipse at 85% 75%, rgba(129,140,248,.12) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(34,211,238,.07) 0%, transparent 45%);}
[data-theme="dark-void"] body::before {opacity:1;background: radial-gradient(ellipse at 20% 25%, rgba(120,40,220,.2) 0%, transparent 55%), radial-gradient(ellipse at 80% 75%, rgba(220,60,240,.12) 0%, transparent 55%);}
[data-theme="dark-amber"] body::before {opacity:1;background: radial-gradient(ellipse at 15% 80%, rgba(200,80,10,.2) 0%, transparent 52%), radial-gradient(ellipse at 88% 15%, rgba(255,160,20,.12) 0%, transparent 52%);}
[data-theme="dark-forest"] body::before {opacity:1;background: radial-gradient(ellipse at 25% 18%, rgba(10,120,50,.24) 0%, transparent 52%), radial-gradient(ellipse at 78% 82%, rgba(0,80,30,.16) 0%, transparent 52%);}
[data-theme="dark-crimson"] body::before {opacity:1;background: radial-gradient(ellipse at 82% 18%, rgba(200,20,50,.2) 0%, transparent 52%), radial-gradient(ellipse at 18% 82%, rgba(150,10,30,.14) 0%, transparent 52%);}
[data-theme="light-arctic"] body::before {opacity:1;background: radial-gradient(ellipse at 12% 18%, rgba(120,190,250,.32) 0%, transparent 52%), radial-gradient(ellipse at 88% 80%, rgba(160,215,255,.22) 0%, transparent 52%);}
[data-theme="light-mint"] body::before {opacity:1;background: radial-gradient(ellipse at 18% 14%, rgba(80,220,160,.28) 0%, transparent 52%), radial-gradient(ellipse at 82% 85%, rgba(40,200,140,.2) 0%, transparent 52%);}
[data-theme="light-golden"] body::before {opacity:1;background: radial-gradient(ellipse at 10% 22%, rgba(255,190,80,.3) 0%, transparent 52%), radial-gradient(ellipse at 90% 78%, rgba(255,220,80,.22) 0%, transparent 52%);}
[data-theme="light-lavender"] body::before {opacity:1;background: radial-gradient(ellipse at 20% 20%, rgba(180,155,255,.3) 0%, transparent 52%), radial-gradient(ellipse at 80% 80%, rgba(200,170,255,.22) 0%, transparent 52%);}
[data-theme="light-sakura"] body::before {opacity:1;background: radial-gradient(ellipse at 22% 12%, rgba(255,170,195,.36) 0%, transparent 52%), radial-gradient(ellipse at 78% 88%, rgba(255,190,215,.26) 0%, transparent 52%);}
/* ══════════════════════════════════════════════════════
로딩 화면
══════════════════════════════════════════════════════ */
#app-loader {
position: fixed;
inset: 0;
z-index: 99999;
background: var(--bg-0, #09090b);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity .55s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark-midnight"] #app-loader::before,
[data-theme="dark-void"] #app-loader::before,
[data-theme="dark-amber"] #app-loader::before,
[data-theme="dark-forest"] #app-loader::before,
[data-theme="dark-crimson"] #app-loader::before,
[data-theme="light-arctic"] #app-loader::before,
[data-theme="light-mint"] #app-loader::before,
[data-theme="light-golden"] #app-loader::before,
[data-theme="light-lavender"]#app-loader::before,
[data-theme="light-sakura"] #app-loader::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
[data-theme="dark-midnight"] #app-loader::before {background: radial-gradient(ellipse at 15% 20%, rgba(59,130,246,.15) 0%, transparent 52%), radial-gradient(ellipse at 85% 80%, rgba(59,130,246,.08) 0%, transparent 52%);}
[data-theme="dark-void"] #app-loader::before {background: radial-gradient(ellipse at 20% 25%, rgba(120,40,220,.2) 0%, transparent 55%), radial-gradient(ellipse at 80% 75%, rgba(220,60,240,.12) 0%, transparent 55%);}
[data-theme="dark-amber"] #app-loader::before {background: radial-gradient(ellipse at 15% 80%, rgba(200,80,10,.2) 0%, transparent 52%), radial-gradient(ellipse at 88% 15%, rgba(255,160,20,.12) 0%, transparent 52%);}
[data-theme="dark-forest"] #app-loader::before {background: radial-gradient(ellipse at 25% 18%, rgba(10,120,50,.24) 0%, transparent 52%), radial-gradient(ellipse at 78% 82%, rgba(0,80,30,.16) 0%, transparent 52%);}
[data-theme="dark-crimson"] #app-loader::before {background: radial-gradient(ellipse at 82% 18%, rgba(200,20,50,.2) 0%, transparent 52%), radial-gradient(ellipse at 18% 82%, rgba(150,10,30,.14) 0%, transparent 52%);}
[data-theme="light-arctic"] #app-loader::before {background: radial-gradient(ellipse at 12% 18%, rgba(120,190,250,.32) 0%, transparent 52%), radial-gradient(ellipse at 88% 80%, rgba(160,215,255,.22) 0%, transparent 52%);}
[data-theme="light-mint"] #app-loader::before {background: radial-gradient(ellipse at 18% 14%, rgba(80,220,160,.28) 0%, transparent 52%), radial-gradient(ellipse at 82% 85%, rgba(40,200,140,.2) 0%, transparent 52%);}
[data-theme="light-golden"] #app-loader::before {background: radial-gradient(ellipse at 10% 22%, rgba(255,190,80,.3) 0%, transparent 52%), radial-gradient(ellipse at 90% 78%, rgba(255,220,80,.22) 0%, transparent 52%);}
[data-theme="light-lavender"]#app-loader::before {background: radial-gradient(ellipse at 20% 20%, rgba(180,155,255,.3) 0%, transparent 52%), radial-gradient(ellipse at 80% 80%, rgba(200,170,255,.22) 0%, transparent 52%);}
[data-theme="light-sakura"] #app-loader::before {background: radial-gradient(ellipse at 22% 12%, rgba(255,170,195,.36) 0%, transparent 52%), radial-gradient(ellipse at 78% 88%, rgba(255,190,215,.26) 0%, transparent 52%);}
#app-loader > * { position: relative; z-index: 1;}
.ld-logo {
width: 68px;
height: 68px;
border-radius: 20px;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: #FFF;
animation: ldPulse 2s ease-in-out infinite;
}
@keyframes ldPulse {
0%,100% {box-shadow: 0 0 0 0 rgba(59,130,246,.4);}
50% {box-shadow: 0 0 0 14px rgba(59,130,246,0);}
}
.ld-title {
font-family:'SchoolSafetyPuzzleOutline',sans-serif;
font-size:22px;
font-weight:500;
color:var(--text-1);
margin-bottom:4px;
opacity:1;
transition:opacity .3s;
}
.ld-title-span{color:var(--accent);}
.ld-bar-wrap {width: 200px;height: 2px;background: #27272a;border-radius: 2px;overflow: hidden;margin-bottom: 20px;}
.ld-bar {
height: 100%;width: 0;
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
background-size: 300% 100%;
animation: ldGrow 2s cubic-bezier(.25,.46,.45,.94) forwards .1s, ldShine 1.5s linear infinite;
}
@keyframes ldGrow {0%{width:0} 100%{width:100%} }
@keyframes ldShine {0%{background-position:300% 0} 100%{background-position:-300% 0} }
.ld-dots {display:flex;gap:6px;}
.ld-dots span {display:block;width:6px;height:6px;border-radius:50%;animation: ldDot 1.1s ease-in-out infinite;}
.ld-dots span:nth-child(1){background:#3b82f6;animation-delay:0s}
.ld-dots span:nth-child(2){background:#8b5cf6;animation-delay:.18s}
.ld-dots span:nth-child(3){background:#ec4899;animation-delay:.36s}
@keyframes ldDot {
0%,80%,100%{transform:translateY(0);opacity:.35}
40%{transform:translateY(-9px);opacity:1}
}
/* ══════════════════════════════════════════════════════
레이아웃
══════════════════════════════════════════════════════ */
.layout {
position: relative;
display: flex;
height: calc(100vh - var(--player-h));
height: calc(100dvh - var(--player-h));
overflow: visible;
}
.sidebar {
width: var(--sidebar-w);
flex-shrink: 0;
position: sticky;
top: 0;
height: calc(100vh - var(--player-h));
height: calc(100dvh - var(--player-h));
display: flex;
flex-direction: column;
padding: 0px 6px 16px;
background: var(--bg-1);
border-right: 1px solid var(--border);
transition: background .35s, border-color .35s, width .25s cubic-bezier(.4,0,.2,1), padding .25s;
z-index: 40;
overflow-y: auto;
}
.sidebar.sidebar-collapsed {
width: var(--sidebar-collapsed-w);
padding: 0px 6px 16px;
}
.sidebar.sidebar-collapsed .nav-label,
.sidebar.sidebar-collapsed .sidebar-logo .logo-wrap,
.sidebar.sidebar-collapsed .sidebar-section-title,
.sidebar.sidebar-collapsed .nav-badge,
.sidebar.sidebar-collapsed .sidebar-footer .theme-label {
display: none;
}
/* 펼쳐지는 순간(sidebar-expanding 클래스)에만 페이드인 애니메이션 실행
→ 페이지 최초 로드·모바일에서는 animation 없이 즉시 표시 */
.sidebar.sidebar-expanding .nav-label,
.sidebar.sidebar-expanding .sidebar-section-title,
.sidebar.sidebar-expanding .sidebar-footer .theme-label {
display: block;
animation: sidebarFadeIn .22s ease .2s both;
}
.sidebar.sidebar-expanding .sidebar-logo .logo-wrap {
display: flex;
animation: sidebarFadeIn .22s ease .2s both;
}
.sidebar.sidebar-expanding .nav-badge {
display: flex;
animation: sidebarFadeIn .22s ease .2s both;
}
@keyframes sidebarFadeIn {
from { opacity: 0;}
to { opacity: 1;}
}
.sidebar.sidebar-collapsed .nav-item {
justify-content: center;
padding: 7px 0;
position: relative;
}
.sidebar.sidebar-collapsed .nav-icon {
width: auto;
font-size: 20px;
margin: 0;
}
.sidebar.sidebar-collapsed .sidebar-logo {
justify-content: center;
padding-bottom: 16px;
}
.sidebar.sidebar-collapsed .sidebar-footer {
align-items: center;
}
.sidebar.sidebar-collapsed .theme-grid {
display: none;
}
#sidebarTooltip {
position: fixed;
background: var(--bg-3);
color: var(--text-1);
font-size: 12px;
font-weight: 500;
padding: 6px 12px;
border-radius: 8px;
white-space: nowrap;
pointer-events: none;
z-index: 99999;
border: 1px solid var(--border);
box-shadow: 0 4px 16px rgba(0,0,0,.35);
opacity: 0;
transition: opacity .12s;
}
#sidebarTooltip.visible { opacity: 1;}

#sidebarToggleBtn {
display: flex;
position: fixed;
top: 50%;
transform: translateY(-50%);
left: 260px;
width: 15px;
height: 40px;
background: var(--bg-0);
border: 1px solid var(--border-h);
border-left: none;
border-radius: 0 7px 7px 0;
cursor: pointer;
z-index: 200;
transition: left .25s cubic-bezier(.4,0,.2,1), background .15s;
align-items: center;
justify-content: center;
color: var(--text-2);
font-size: 9px;
}
#sidebarToggleBtn:hover {
color: var(--accent);
}
#sidebarToggleBtn .stb-icon {
transition: transform .25s;
font-size: .75rem;
font-weight: 900;
line-height: 1;
}
#sidebarToggleBtn.collapsed {
left: 64px;
}
#sidebarToggleBtn.collapsed .stb-icon {
transform: rotate(180deg);
}
/* 기존 fixed 기반 left 위치 규칙 제거 — absolute 방식으로 대체 */
.sidebar::-webkit-scrollbar {width: 3px;}
.sidebar::-webkit-scrollbar-thumb {background: var(--bg-3);border-radius: 3px;}

.sidebar-logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
cursor: pointer;
position: sticky;
top: 0px;
height: 60px;
z-index: 10;
background: var(--bg-1);
flex-shrink: 0;
}
.sidebar-logo::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(
90deg,
transparent,
rgba(var(--accent-rgb), .5) 40%,
rgba(var(--accent-rgb), .5) 60%,
transparent
);
}
.logo-mark {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--accent);
flex-shrink: 0;
background: linear-gradient(
145deg,
rgba(var(--accent-rgb), .18) 0%,
rgba(var(--accent-rgb), .06) 100%
);
border: 1px solid rgba(var(--accent-rgb), .3);
box-shadow:
0 4px 24px rgba(var(--accent-rgb), .15),
inset 0 1px 0 rgba(255,255,255,.12),
inset 0 -1px 0 rgba(0,0,0,.1);
animation: ldPulse2 2s ease-in-out infinite;
}
.logo-wrap {
margin-left: 50px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
}
@keyframes ldPulse2 {
0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .15);}
100% { box-shadow: 0 0 0 15px rgba(var(--accent-rgb), 0);}
}
.logo-mark::before {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 3px;
height: 3px;
border-radius: 50%;
background: #ff4444;
box-shadow: 0 0 3px #ff4444;
animation: onAirBlink 1.8s ease-in-out infinite;
}
@keyframes onAirBlink {
0%, 100% { opacity: 1; box-shadow: 0 0 6px #ff4444;}
50% { opacity: .25; box-shadow: none;}
}
.logo-text {
font-family: 'Syne', sans-serif;
font-size: 1.475rem;
font-weight: 800;
color: var(--text-1);
letter-spacing: 1px;
white-space: nowrap;
}
.logo-accent {
color: var(--accent);
}
.logo-sub {
font-family: 'Syne', sans-serif;
font-size: 11px;
color: var(--text-3);
text-transform: uppercase;
white-space: nowrap;
margin-top: -8px;
}
.sidebar-section-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-3);
padding: 0 8px;
margin-bottom: 6px;
}
.sidebar-nav {margin-bottom: 2px;}
.nav-item {
display: flex;
align-items: center;
gap: 7px;
padding: 7px;
border-radius: 10px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--text-2);
margin-bottom: 5px;
border: 1px solid transparent;
touch-action: manipulation;
white-space: nowrap;
transition: color 0.7s ease, all 0.15s;
}
.nav-item:hover {
background: var(--bg-2);
color: var(--accent);
border-color: var(--border);
transform: translateX(2px);
}
.nav-item.active {
background: rgba(var(--accent-rgb),.12);
color: var(--accent);
font-weight: 700;
border-color: rgba(var(--accent-rgb),.2);
}
[data-theme^="light"] .nav-item.active { color: var(--text-1); }
.nav-icon {font-size: 16px;width: 20px;text-align: center;}
.nav-badge {
font-family:'Syne', sans-serif;
font-weight: 700;
margin-left: auto;
font-size: 8px;
background: var(--accent);
color: var(--accent-contrast);
padding: 0 6px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
height:15px;
white-space: nowrap;
}
.nav-badge--live{
padding-top: 1px;
animation:npPulse 1.5s ease-in-out infinite;
}
.sidebar-footer {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.theme-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 8px;
}
.theme-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
margin-bottom: 10px;
}
.theme-dot {
aspect-ratio: 1;
border-radius: 7px;
border: 2px solid transparent;
cursor: pointer;
transition: all .15s;
position: relative;
overflow: hidden;
}
.theme-dot:hover {transform: scale(1.15);border-color: var(--text-2);}
.theme-dot.active {border-color: var(--text-1);box-shadow: 0 0 0 1px var(--text-1);}
.theme-dot-inner {position: absolute;inset: 0;border-radius: 5px;}
.main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.content-wrap {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior-y: contain;
}
/* ══════════════════════════════════════════════════════
탑바
══════════════════════════════════════════════════════ */
.topbar {
position: sticky;
top: 0px;
z-index: 50;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background: transparent;
border-bottom: none;
gap: 10px;
transition: background .35s, border-color .35s;
}
.topbar::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
rgba(var(--accent-rgb), .5) 40%,
rgba(var(--accent-rgb), .5) 60%,
transparent
);
}
.topbar-left {
display: flex;
align-items: center;
gap: 6px;
}
.topbar-title {
min-width:150px;
cursor:pointer;
}
/* ── 탑바 섹션 레이블 ── */
.tp-section-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 13px 5px 10px;
background: rgba(var(--accent-rgb), .08);
border: 1px solid rgba(var(--accent-rgb), .18);
border-radius: 20px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
cursor: pointer;
transition: background .25s, border-color .25s;
}
.go_hom:hover .tp-section-label {
background: rgba(var(--accent-rgb), .15);
border-color: rgba(var(--accent-rgb), .35);
}
/* 라이브 도트 */
.tp-sl-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
box-shadow: 0 0 5px rgba(var(--accent-rgb), .7);
animation: tpSlDot 2.2s ease-in-out infinite;
}
@keyframes tpSlDot {
0%, 100% { transform: scale(1); opacity: 1;}
50% { transform: scale(.4); opacity: .3;}
}
/* 섹션 텍스트 */
.tp-sl-text {
font-family: 'NEXON Lv1 Gothic OTF', 'Malgun Gothic', sans-serif;
font-size: .85rem;
font-weight: 800;
color: var(--accent);
white-space: nowrap;
text-transform: uppercase;
text-shadow: 0px 0px 5px rgba(var(--accent-rgb),.3);
/* 시머 그라디언트 텍스트 */
background:linear-gradient(
120deg,
var(--accent,#6366f1) 0%,
rgba(var(--accent-rgb,99 102 241),.6) 40%,
var(--accent,#6366f1) 60%,
rgba(var(--accent-rgb,99 102 241),.8) 100%
);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:mt-shimmer 3.5s linear infinite,
mt-count-pop .5s cubic-bezier(.34,1.56,.64,1) .1s both;
}

.search-bar {
flex: 1;
max-width: 400px;
display: flex;
align-items: center;
gap: 0;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 24px;
padding: 0 0 0 14px;
transition: all .2s;
}
.search-bar:focus-within {
border-color: rgba(var(--accent-rgb),.5);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.1);
}
.search-bar input {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--accent);
font-size: 12px;
font-family: inherit;
padding-right: 3px;
}
.search-bar input::placeholder {color: var(--text-3);}
.search-btn {
background: var(--accent);
border: none;
border-radius: 0 20px 20px 0;
color: var(--accent-contrast);
padding: 0 14px;
font-size: 12px;
font-weight: 700;
font-family: inherit;
transition: all .15s;
white-space: nowrap;
align-self: stretch;
display: flex;
align-items: center;
}
.search-btn:hover {opacity: .85;}
.mic-btn {
background: none; border: none;
color: var(--text-2); padding: 0 10px;
font-size: 15px; cursor: pointer;
transition: color .15s;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
height: auto;
align-self: stretch;
}
.mic-btn:hover { color: var(--accent);}
.mic-btn.mic-active { color: var(--accent);}

#voiceOverlay {
position: fixed; inset: 0; z-index: 9999999991 !important;
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity .3s;
}
#voiceOverlay.vo-show { opacity: 1; pointer-events: auto;}
.vo-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.72);
backdrop-filter: blur(10px) saturate(1.4);
-webkit-backdrop-filter: blur(10px) saturate(1.4);
}
.vo-card {
position: relative; z-index: 1;
background: var(--bg-1);
border: 1px solid var(--border-h);
border-radius: 32px;
padding: 48px 36px 36px;
width: min(340px, calc(100vw - 40px));
display: flex; flex-direction: column;
align-items: center; gap: 20px;
box-shadow:
0 0 0 1px rgba(255,255,255,.06),
0 40px 100px rgba(0,0,0,.6),
0 0 60px rgba(var(--accent-rgb),.08);
animation: voCardIn .35s cubic-bezier(.22,1,.36,1);
}
[data-theme^="light"] .vo-card {
background: #fff;
border-color: rgba(var(--accent-rgb),.2);
box-shadow:
0 0 0 1px rgba(var(--accent-rgb),.08),
0 40px 80px rgba(0,0,0,.18),
0 0 40px rgba(var(--accent-rgb),.06);
}
@keyframes voCardIn {
from { transform: translateY(28px) scale(.94); opacity: 0;}
to { transform: translateY(0) scale(1); opacity: 1;}
}
.vo-close {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px; border-radius: 50%;
border: 1px solid var(--border-h);
background: var(--bg-3);
color: var(--text-2); cursor: pointer; font-size: 12px;
display: flex; align-items: center; justify-content: center;
transition: all .2s;
}
[data-theme^="light"] .vo-close {
background: rgba(var(--accent-rgb),.08);
border-color: rgba(var(--accent-rgb),.18);
color: var(--text-2);
}
.vo-close:hover {
background: var(--accent); border-color: var(--accent);
color: #fff; transform: scale(1.1);
}
.vo-mic-wrap {
position: relative; width: 110px; height: 110px;
display: flex; align-items: center; justify-content: center;
}
.vo-ring {
position: absolute; border-radius: 50%;
border: 2px solid rgba(var(--accent-rgb),.35);
opacity: 0;
}
.vo-ring-1 { width: 110px; height: 110px;}
.vo-ring-2 { width: 148px; height: 148px;}
.vo-ring-3 { width: 188px; height: 188px;}
.vo-listening .vo-ring-1 { animation: voRipple 1.8s ease-out infinite;}
.vo-listening .vo-ring-2 { animation: voRipple 1.8s ease-out infinite .38s;}
.vo-listening .vo-ring-3 { animation: voRipple 1.8s ease-out infinite .76s;}
@keyframes voRipple {
0% { transform: scale(.7); opacity: .9;}
100% { transform: scale(1.5); opacity: 0;}
}
.vo-mic-btn {
width: 86px; height: 86px; border-radius: 50%;
background: linear-gradient(135deg, rgba(var(--accent-rgb),1) 0%, rgba(var(--accent-rgb),.75) 100%);
border: none;
display: flex; align-items: center; justify-content: center;
font-size: 30px; color: #fff; cursor: pointer;
box-shadow: 0 6px 24px rgba(var(--accent-rgb),.55), 0 0 0 6px rgba(var(--accent-rgb),.12);
transition: transform .2s, box-shadow .2s;
position: relative; z-index: 1;
}
.vo-mic-btn:hover {
transform: scale(1.07);
box-shadow: 0 10px 36px rgba(var(--accent-rgb),.7), 0 0 0 8px rgba(var(--accent-rgb),.15);
}
.vo-listening .vo-mic-btn { animation: voMicPulse 1.2s ease-in-out infinite;}
@keyframes voMicPulse {
0%,100% { box-shadow: 0 6px 24px rgba(var(--accent-rgb),.5), 0 0 0 6px rgba(var(--accent-rgb),.1);}
50% { box-shadow: 0 6px 48px rgba(var(--accent-rgb),.95), 0 0 0 14px rgba(var(--accent-rgb),.18);}
}
.vo-status {
font-size: .72rem; font-weight: 700;
color: var(--text-2); letter-spacing: 1.2px; text-transform: uppercase;
}
[data-theme^="light"] .vo-status { color: var(--text-3);}
.vo-transcript {
font-size: 1.08rem; font-weight: 600;
color: var(--text-1); text-align: center;
min-height: 30px; line-height: 1.5;
transition: color .2s; letter-spacing: -.2px;
}
[data-theme^="light"] .vo-transcript { color: var(--text-1);}
.vo-transcript.vo-final { color: var(--accent);}
.vo-bars { display: flex; align-items: flex-end; gap: 5px; height: 36px;}
.vo-bars span {
width: 5px; border-radius: 5px;
background: rgba(var(--accent-rgb),.2); height: 5px;
transition: background .2s;
}
.vo-bars-active span:nth-child(1){background:#4285F4;animation:voBar .9s ease-in-out infinite 0s;}
.vo-bars-active span:nth-child(2){background:#EA4335;animation:voBar .9s ease-in-out infinite .13s;}
.vo-bars-active span:nth-child(3){background:#FBBC05;animation:voBar .9s ease-in-out infinite .26s;}
.vo-bars-active span:nth-child(4){background:#34A853;animation:voBar .9s ease-in-out infinite .07s;}
.vo-bars-active span:nth-child(5){background:#4285F4;animation:voBar .9s ease-in-out infinite .20s;}
.vo-bars-active span:nth-child(6){background:#EA4335;animation:voBar .9s ease-in-out infinite .33s;}
.vo-bars-active span:nth-child(7){background:#FBBC05;animation:voBar .9s ease-in-out infinite .10s;}
@keyframes voBar {
0%,100% { height: 5px;}
50% { height: 32px;}
}
#wakeToast {
position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px);
background: rgba(var(--accent-rgb), .95);
color: #fff; font-size: .85rem; font-weight: 700;
padding: 10px 22px; border-radius: 30px;
white-space: nowrap; pointer-events: none;
opacity: 0; transition: opacity .3s, transform .3s;
z-index: 999999; box-shadow: 0 8px 32px rgba(0,0,0,.35);
display: flex; align-items: center; gap: 8px;
max-width: calc(100vw - 40px);
box-sizing: border-box;
}
#wakeToast.wake-toast-show {
opacity: 1; transform: translateX(-50%) translateY(0);
}

.vo-cont-btn {
position: absolute; top: 14px; right: 54px;
width: 32px; height: 32px; border-radius: 50%;
border: 1px solid var(--border-h);
background: var(--bg-3); color: var(--text-2);
font-size: 12px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .2s;
}
.vo-cont-btn:hover { border-color: var(--accent); color: var(--accent);}
.vo-cont-btn.vo-cont-active {
background: var(--accent); border-color: var(--accent); color: #fff;
animation: voContSpin 2s linear infinite;
}
@keyframes voContSpin { to { transform: rotate(360deg);} }
.vo-hints {
width: 100%; display: flex; flex-direction: column; gap: 6px;
padding-top: 4px; border-top: 1px solid var(--border);
}
.vo-hint-row {
display: flex; align-items: center; gap: 8px;
font-size: .75rem; color: var(--text-3); line-height: 1.3;
}
.vo-hint-row span:first-child { font-size: .85rem; flex-shrink: 0;}
[data-theme^="light"] .vo-hint-row { color: var(--text-2);}
.vo-history { width: 100%;}
.vo-hist-label {
font-size: .65rem; font-weight: 700; color: var(--text-3);
letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px;
}
.vo-hist-chip {
display: inline-block; margin: 3px 3px 0 0;
padding: 3px 10px; border-radius: 20px;
border: 1px solid var(--border-h);
background: var(--bg-2); color: var(--text-2);
font-size: .75rem; cursor: pointer; transition: all .15s;
}
.vo-hist-chip:hover { background: var(--accent); border-color: var(--accent); color: #fff;}
.vc-label--new { color: var(--accent) !important;}
.vc-label--mood { color: #f59e42 !important;}
.vc-label--shake { color: #34A853 !important;}
.vc-label--fav { color: #e55 !important;}
.vc-label--alarm { color: #f59e0b !important;}
.vc-icon--shake { background: linear-gradient(135deg,#34A853,#1a7a36) !important;}
.vc-icon--fav { background: linear-gradient(135deg,#e55,#b91c1c) !important;}
.vc-icon--alarm { background: linear-gradient(135deg,#f59e0b,#b45309) !important;}
.vc-icon--close { background: linear-gradient(135deg,#6b7280,#374151) !important;}
.vc-badge-new {
display: inline-block; margin-left: 8px;
padding: 1px 7px; border-radius: 10px;
background: var(--accent); color: #fff;
font-size: .6rem; font-weight: 800;
letter-spacing: 1px; vertical-align: middle;
animation: vcBadgePop .4s cubic-bezier(.22,1,.36,1);
}
@keyframes vcBadgePop { from { transform: scale(0); opacity:0;} to { transform: scale(1); opacity:1;} }
.topbar-right {
display: flex;
align-items: center;
gap: 10px;
}
.theme-toggle-btn {
display: flex;
align-items: center;
gap: 3px;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 20px;
color: var(--text-2);
padding: 5px 7px;
font-size: 12px;
font-family: inherit;
transition: all .15s;
line-height: 1;
white-space: nowrap;
}
.theme-toggle-btn:hover {border-color: var(--accent);color: var(--accent);}
/* ══════════════════════════════════════════════════════
콘텐츠 영역
══════════════════════════════════════════════════════ */
.content {flex: 1;padding: 24px;}
.now-playing-card {
display: flex;
align-items: center;
gap: 24px;
background: linear-gradient(135deg,
rgba(var(--accent-rgb),.13) 0%,
rgba(var(--accent-rgb),.05) 50%,
rgba(var(--accent-rgb),.02) 100%);
border: 1px solid rgba(var(--accent-rgb),.22);
border-radius: 22px;
margin-bottom: 20px;
padding: 24px 28px;
position: relative;
overflow: hidden;
transition: all .35s;
box-shadow:
0 0 0 1px rgba(var(--accent-rgb),.06),
0 12px 48px rgba(0,0,0,.2),
inset 0 1px 0 rgba(255,255,255,.05);
}
.now-playing-card::before {
content: '';
position: absolute;
top: 0; left: 8%; right: 8%; height: 1px;
background: linear-gradient(90deg,
transparent, rgba(var(--accent-rgb),.55) 50%, transparent);
pointer-events: none;
}
.now-playing-card::after {
content: '';
position: absolute;
right: -60px; top: -60px;
width: 280px; height: 280px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(var(--accent-rgb),.14) 0%, transparent 68%);
pointer-events: none;
animation: heroWave 4s ease-in-out infinite;
}
@keyframes heroWave {
0%,100% { transform:scale(1); opacity:.7;}
50% { transform:scale(1.15); opacity:1;}
}
.artist-hero-right {
flex-shrink: 0;
padding: 0;
margin: 0;
position: relative;
z-index: 2;
animation: vinylIn .7s ease .2s both;
}
@keyframes vinylIn {
from {opacity:0;transform:scale(.85) rotate(-8deg);}
to {opacity:1;transform:scale(1) rotate(0deg);}
}
@media (max-width: 620px) {
.vinyl-stage {
position: relative;
bottom: auto;
right: auto;
margin: 0 auto;
}
}
/* ══ 전축 스테이지 ══ */
.vinyl-stage {
flex-shrink: 0;
position: absolute;
bottom:-30px;
right:10px;
width: 220px;
height: 185px;
padding: 0;
margin: 0;
}
.vinyl-wrap {
position: absolute;
top: 12px;left: 0;
width: 160px;height: 160px;
}
.vinyl {
width: 160px;height: 160px;
border-radius: 50%;
background:
repeating-radial-gradient(circle at center,
transparent 0px, transparent 3px,
rgba(255,255,255,.04) 3px, rgba(255,255,255,.04) 4px
),
conic-gradient(from 0deg, #0d0d1a, #12122a, #0a0a1e, #1a1a35, #0d0d1a, #12122a, #0a0a1e);
display: flex;align-items: center;justify-content: center;
position: relative;
box-shadow:
0 0 0 3px rgba(255,255,255,.06),
0 0 0 5px rgba(0,0,0,.8),
0 12px 48px rgba(0,0,0,.7),
0 0 60px rgba(var(--accent-rgb),.12);
transition: box-shadow .35s;
}
.vinyl::before {
content: '';
position: absolute;
inset: 12px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.08), transparent 60%);
pointer-events: none;
}
.vinyl.spinning {animation: vinylSpin 1.8s linear infinite;}
@keyframes vinylSpin {to {transform: rotate(360deg);} }
.vinyl-label {
width: 54px;height: 54px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%);
display: flex;align-items: center;justify-content: center;
position: relative;z-index: 1;
box-shadow: 0 2px 8px rgba(0,0,0,.5);
font-size: 8px;font-weight: 800;color: rgba(255,255,255,.7);
letter-spacing: 1px;
font-family: 'NEXON Lv1 Gothic OTF', 'Malgun Gothic', sans-serif;
}
.vinyl-center {
width: 10px;height: 10px;
border-radius: 50%;
background: var(--bg-0);
border: 2px solid rgba(255,255,255,.2);
position: absolute;
z-index: 2;
}
/* ══ 리얼 토암 (Hi-Fi Tonearm) ══ */
.tonearm-assembly {
position: absolute;
top: 0;
left: 145px;/* pivot-x = 145+30 = 175px from stage left */
width: 80px;
height: 185px;
transform-origin: 30px 26px;/* 피벗 베어링 중심 */
transform: rotate(28deg);/* 정지: +28° 시계방향 → 레코드 우측 바깥 */
z-index: 20;
pointer-events: none;
will-change: transform;
}
.tonearm-svg {
width: 100%;
height: 100%;
overflow: visible;
}
.tonearm-bearing {
position: absolute;
top: 16px;left: 20px;/* pivot: top+10=26px, left+10=30px → (30,26) in element */
width: 20px;height: 20px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #e2e8f0 0%, #94a3b8 40%, #475569 100%);
box-shadow:
0 3px 10px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,255,255,.4),
inset 0 -1px 0 rgba(0,0,0,.3);
z-index: 21;
}
.tonearm-bearing::after {
content: '';
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%,-50%);
width: 6px;height: 6px;
border-radius: 50%;
background: radial-gradient(circle, #1e293b, #0f172a);
box-shadow: 0 1px 3px rgba(0,0,0,.8);
}
/* ══════════════════════════════════════════════════════
티스트 히어로 & 전축
══════════════════════════════════════════════════════ */
.content-section {
display: none;
position: relative;
z-index: 1;
animation: sectionSlideIn .35s cubic-bezier(.25,.46,.45,.94);
}
.content-section > *:not(.sec-bg){position:relative;z-index:1;}
.content-section.active {display: block;}
@keyframes sectionSlideIn {
from {opacity: 0;transform: translateY(18px);}
to {opacity: 1;transform: translateY(0);}
}
@keyframes sectionSlideInLeft {
from {opacity: 0;transform: translateX(-22px);}
to {opacity: 1;transform: translateX(0);}
}
@keyframes sectionSlideInRight {
from {opacity: 0;transform: translateX(22px);}
to {opacity: 1;transform: translateX(0);}
}
.artist-hero {
position: relative;
border-radius: 20px;
overflow: hidden;
margin-bottom: 28px;
min-height: 260px;
background: linear-gradient(135deg,
rgba(var(--accent-rgb),.18) 0%,
rgba(var(--accent-rgb),.04) 50%,
transparent 100%);
border: 1px solid rgba(var(--accent-rgb),.18);
display: flex;
align-items: center;
gap: 0;
padding: 0;
}
.artist-hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 80% 50%, rgba(var(--accent-rgb),.15) 0%, transparent 60%),
radial-gradient(ellipse at 20% 80%, rgba(139,92,246,.1) 0%, transparent 50%);
pointer-events: none;
}
.artist-hero-waves {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.artist-hero-waves::before,
.artist-hero-waves::after {
content: '';
position: absolute;
border-radius: 50%;
border: 1px solid rgba(var(--accent-rgb),.1);
animation: heroRipple 4s ease-in-out infinite;
}
.artist-hero-waves::before {
width: 400px;height: 400px;
right: -100px;top: -100px;
}
.artist-hero-waves::after {
width: 300px;height: 300px;
right: -50px;top: -50px;
animation-delay: 1s;
}
@keyframes heroRipple {
0%,100% {transform: scale(1);opacity: .5;}
50% {transform: scale(1.08);opacity: 1;}
}
.artist-hero-left {
flex: 1;
padding: 28px;
position: relative;
z-index: 2;
}
.artist-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(var(--accent-rgb),.15);
border: 1px solid rgba(var(--accent-rgb),.3);
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;
animation: badgeIn .5s ease .1s both;
}
.artist-badge-dot {
width: 6px;height: 6px;
border-radius: 50%;
background: var(--accent);
animation: npPulse 1s ease-in-out infinite;
}
@keyframes badgeIn {
from {opacity:0;transform:translateY(-8px);}
to {opacity:1;transform:translateY(0);}
}
.artist-name {
font-family: 'SchoolSafetyPuzzleOutline',sans-serif;
font-size: 38px;
font-weight: 500;
color: var(--text-1);
line-height: 1.1;
letter-spacing: 1px;
margin-bottom: 8px;
animation: nameIn .55s ease .18s both;
}
.artist-name-span {
display:block;
margin-left: 13vw;
font-size: 28px;
color: var(--accent);
}
@keyframes nameIn {
from {opacity:0;transform:translateX(-20px);}
to {opacity:1;transform:translateX(0);}
}
.artist-genre {
font-size: 13px;
color: var(--text-3);
margin-bottom: 20px;
animation: nameIn .55s ease .25s both;
}
.artist-stats {
display: flex;
gap: 24px;
margin-bottom: 15px;
animation: nameIn .55s ease .32s both;
}
.artist-stat {text-align: left;}
.artist-stat-num {
font-family: 'SchoolSafetyPuzzleOutline',sans-serif;
font-size: 22px;
color: var(--accent);
}
.artist-stat-label {font-size: 10px;color: var(--text-3);text-transform: uppercase;letter-spacing: 1px;}
.artist-actions {
display: flex;
gap: 10px;
animation: nameIn .55s ease .4s both;
position: relative;
z-index: 10;
}
.ah-btn {
display: flex;align-items: center;gap: 7px;
padding: 10px 20px;
border-radius: 24px;
border: none;
font-size: 13px;font-weight: 700;font-family: inherit;
cursor: pointer;
white-space: nowrap;
transition: all .15s;
}
.ah-btn-primary {background: var(--accent);color: #fff;box-shadow: 0 4px 16px rgba(var(--accent-rgb),.35);}
.ah-btn-primary:hover {transform: translateY(-2px);box-shadow: 0 8px 24px rgba(var(--accent-rgb),.45);}
.ah-btn-secondary {background: var(--bg-3);color: var(--text-2);border: 1px solid var(--border-h);box-shadow: 0 4px 16px rgba(var(--accent-rgb),.35);}
.ah-btn-secondary:hover {border-color: var(--accent);color: var(--accent);transform: translateY(-2px);box-shadow: 0 8px 24px rgba(var(--accent-rgb),.45);}
.artist-font-i {
width:80px;height:80px;border-radius:20px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:36px;flex-shrink:0;
}
.slide-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 14px;
margin-bottom: 28px;
}
.slide-card {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px;
cursor: pointer;
transition: all .2s;
position: relative;
overflow: hidden;
animation: cardIn .4s ease both;
}
.slide-card:nth-child(1){animation-delay:.05s}
.slide-card:nth-child(2){animation-delay:.1s}
.slide-card:nth-child(3){animation-delay:.15s}
.slide-card:nth-child(4){animation-delay:.2s}
.slide-card:nth-child(5){animation-delay:.25s}
@keyframes cardIn {
from {opacity:0;transform:translateY(16px);}
to {opacity:1;transform:translateY(0);}
}
.slide-card:hover {border-color: rgba(var(--accent-rgb),.35);transform: translateY(-3px);box-shadow: 0 8px 28px rgba(0,0,0,.2);}
.slide-card::before {
content: '';
position: absolute;
top: 0;right: 0;
width: 80px;height: 80px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--accent-rgb),.1), transparent 70%);
pointer-events: none;
}
.sc-icon {font-size: 38px;margin-bottom: 10px;}
.sc-title {font-size:15px;font-weight:700;color:var(--accent);margin-bottom:4px;}
.sc-desc {font-size:11px;color:var(--text-3);}
.align-center {
text-align:center;
width:100%;
}
.sc-tag {
display: inline-block;
margin-top: 8px;
font-size: 10px;
background: rgba(var(--accent-rgb),.12);
color: var(--accent);
padding: 2px 8px;
border-radius: 8px;
}
.album-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.album-card {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
cursor: pointer;
transition: all .2s;
animation: cardIn .4s ease both;
}
.album-card:hover {transform: translateY(-4px);box-shadow: 0 12px 32px rgba(0,0,0,.3);border-color: rgba(var(--accent-rgb),.3);}
.album-cover {
width: 100%;
aspect-ratio: 1;
display: flex;align-items: center;justify-content: center;
font-size: 48px;
position: relative;
overflow: hidden;
}
.album-cover-grad {
position: absolute;inset: 0;
}
.album-cover-label {position: relative;z-index: 1;}
.album-info {padding: 12px;}
.album-title {font-family:'NEXON Lv1 Gothic OTF', 'Malgun Gothic', sans-serif;font-size:13px;font-weight:700;color:var(--accent);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.album-year {font-size:11px;color:var(--text-3);}
.about-section {width: 100%;max-width: 100%;}
.about-card {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
margin-bottom: 16px;
animation: cardIn .4s ease both;
}
.about-card-title {
font-family:'NEXON Lv1 Gothic OTF', 'Malgun Gothic', sans-serif;
ont-size:16px;
font-weight:800;
color:var(--text-2);
margin-bottom:12px;
display: flex;
align-items:center;
gap:8px;
}
.about-card-body:not(:last-child) {
border-bottom: 1px solid rgba(255,255,255,0.15);
padding-bottom: 12px;
margin-bottom: 12px;
}
.about-card-body, .sic-body {font-size:12px;color:var(--text-3);line-height:1.8;}
.social-links {display:flex;gap:10px;flex-wrap:nowrap;margin-top:14px;}
.social-link {
display:flex;align-items:center;gap:6px;
padding:7px 14px;border-radius:20px;
border:1px solid var(--border);background:var(--bg-3);
color:var(--text-2);font-size:12px;font-weight:600;
text-decoration:none;
transition:all .15s;
}
.social-link:hover {border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.event-list {display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.event-card {
display:flex;align-items:center;gap:20px;
background:var(--bg-2);border:1px solid var(--border);
border-left:3px solid var(--accent);
border-radius:0 16px 16px 0;
padding:18px 22px 18px 20px;
cursor:pointer;transition:all .2s;
animation: cardIn .4s ease both;
position:relative;overflow:hidden;
}
.event-card::after {
content:'';position:absolute;inset:0;
background:linear-gradient(90deg,rgba(var(--accent-rgb),.04),transparent 35%);
pointer-events:none;
}
.event-card:hover {
transform:translateX(5px);
box-shadow:0 6px 24px rgba(0,0,0,.16);
border-color:rgba(var(--accent-rgb),.4);
}
.event-card--past {opacity:.5;border-left-color:var(--text-3);}
.event-card--past::after {display:none;}
.event-card--past:hover {opacity:.72;}
.event-date {
flex-shrink:0;text-align:center;
background:rgba(var(--accent-rgb),.12);
border-radius:12px;padding:10px 16px;min-width:62px;
}
.event-date-day {font-family:'Syne', sans-serif;font-size:24px;font-weight:800;color:var(--accent);}
.event-date-mon {font-size:9px;color:var(--text-3);text-transform:uppercase;letter-spacing:1.5px;font-weight:800;}
.event-type {
font-size:9px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
color:var(--accent);margin-bottom:4px;opacity:.8;display:flex;align-items:center;gap:5px;
}
.event-info {flex:1;min-width:0;}
.event-title {font-size:15px;font-weight:700;color:var(--text-2);margin-bottom:3px;}
.event-venue {display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-3);}
.event-badge {
font-size:10px;padding:5px 13px;border-radius:20px;
background:rgba(var(--accent-rgb),.12);color:var(--text-2);
font-weight:800;border:1px solid rgba(var(--accent-rgb),.25);white-space:nowrap;
}
.stylus-glow {
transition: opacity 0.6s ease;
filter: drop-shadow(0 0 4px var(--accent));
}
.np-label {
font-size: 10px;font-weight: 700;letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 6px;
display: flex;align-items: center;gap: 6px;
}
.np-label::before {
content: '';
display: inline-block;
width: 6px;height: 6px;
border-radius: 50%;
background: var(--accent);
animation: npPulse 1s ease-in-out infinite;
}
@keyframes npPulse {
0%,100% {transform: scale(1);opacity:1;}
50% {transform: scale(1.1);opacity:.8;}
}
.np-title {
font-family: 'NEXON Lv1 Gothic OTF','Malgun Gothic',sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--accent);
overflow: hidden;
margin-bottom: 4px;
}
.np-subtitle {font-size: 12px;color: var(--text-3);margin-bottom: 16px;}
.np-controls {display: flex;align-items: center;gap: 8px;flex-wrap: wrap;}
.np-btn {
display: flex;align-items: center;gap: 6px;
padding: 7px 16px;
border-radius: 20px;
border: none;
font-size: 12px;font-weight: 700;font-family: inherit;
transition: all .15s;
}
.np-btn-primary {
background: var(--accent);
color: #fff;
}
.np-btn-primary:hover {opacity: .85;transform: scale(.97);}
.np-btn-secondary {
background: var(--bg-2);
color: var(--text-2);
border: 1px solid var(--border);
}
.np-btn-secondary:hover {border-color: var(--accent);color: var(--accent);}
.eq-visual {
position: absolute;
right: 30px;
bottom: 25px;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin: 14px 0 10px;
padding: 10px 16px;
border-radius: 12px;
background: linear-gradient(90deg,transparent, rgba(var(--accent-rgb),.25) 50%, transparent);
border: 1px solid rgba(var(--accent-rgb),.1);
position: relative;
overflow: hidden;
}
.section-header::before {
content:'';
position:absolute; bottom:0; left:5%; right:5%; height:1px;
background: linear-gradient(90deg,
transparent, rgba(var(--accent-rgb),.3) 50%, transparent);
}
.section-header::after{
content:'';
position:absolute;top:18%;left:0;width:3px;height:64%;
border-radius:0 3px 3px 0;
background:linear-gradient(
180deg,
transparent,
rgba(var(--accent-rgb,99 102 241),.9) 40%,
rgba(var(--accent-rgb,99 102 241),.9) 60%,
transparent
);
}
.section-title {
font-family: 'SchoolSafetyPuzzleOutline',sans-serif;
font-size: 20px;
font-weight: 400;
color: var(--accent);
display: flex; align-items: center; gap: 10px;
letter-spacing: .02em;
}
.section-title i {
color: var(--accent);
filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),.5));
}
.section-count {
font-size: 10.5px;
font-weight: 700;
background: rgba(var(--accent-rgb),.1);
color: var(--accent);
border: 1px solid rgba(var(--accent-rgb),.2);
padding: 2px 9px;
border-radius: 20px;
font-family: monospace;
letter-spacing: .03em;
box-shadow: 0 0 8px rgba(var(--accent-rgb),.1);
}
.section-action {
font-size: 12px;
color: var(--text-3);
border: none;
background: none;
font-family: inherit;
cursor: pointer;
transition: color .15s;
padding: 4px 8px;
border-radius: 6px;
}
.section-action:hover { color: var(--accent); background: rgba(var(--accent-rgb),.06);}
[data-theme^="light"] .section-header {
position: relative;
background: linear-gradient(90deg,transparent, rgba(var(--accent-rgb),.15) 50%, transparent);
animation: cardIn .4s ease both;
border-color: rgba(var(--accent-rgb),.12);
}
/* ═══ 플레이리스트 — Chart Premium Edition ═══ */
@keyframes plItemIn {
from { opacity:0; transform:translateY(8px);}
to { opacity:1; transform:translateY(0);}
}
.pl-container {
display: flex;
flex-direction: column;
position: relative;
background: transparent;
border: none;
box-shadow: none;
overflow: visible;
}
.pl-container::before,
.pl-container::after { display:none;}
.pl-container.hide { display:none !important;}
#pl-scroll-sentinel { height:4px; pointer-events:none;}

.pl-header {
padding: 4px 4px 10px;
position: relative; z-index:1;
}
.pl-list {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0;
}
.pl-list li {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 14px;
border: 1px solid transparent;
background: rgba(255,255,255,.02);
cursor: pointer;
transition: all .2s;
position: relative;
overflow: hidden;
animation: plItemIn .3s ease both;
}
.pl-list li:hover {
background: rgba(var(--accent-rgb),.07);
border-color: rgba(var(--accent-rgb),.15);
transform: translateX(4px);
}
.pl-list li.pl-current {
background: rgba(var(--accent-rgb),.1);
border-color: rgba(var(--accent-rgb),.3);
}
.pl-list li.pl-current::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 4px; border-radius: 0px;
background: linear-gradient(to bottom, rgba(var(--accent-rgb),.9) 0%, rgba(var(--accent-rgb),.2) 100%);
animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: scaleY(0);}
to { opacity: 1; transform: scaleY(1);}
}
.pl-thumb {
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 10px;
background: linear-gradient(135deg, rgba(var(--accent-rgb),.2), rgba(var(--accent-rgb),.05));
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.pl-thumb-icon {
font-size: 1.2rem;
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
}
.pl-playing {
display: none;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
}
.pl-current .pl-thumb-icon { visibility: hidden;}
.pl-current .pl-playing {
display: flex;
}
.pl-playing .wave-bars {
display: inline-flex;
align-items: center;
gap: 2px;
height: 14px;
}
.pl-playing .wave-bars span {
display: block;
width: 2.5px;
border-radius: 99px;
background: var(--accent);
animation: wave 1s ease-in-out infinite;
}
.pl-playing .wave-bars span:nth-child(1) { animation-delay: 0s;}
.pl-playing .wave-bars span:nth-child(2) { animation-delay: .15s;}
.pl-playing .wave-bars span:nth-child(3) { animation-delay: .3s;}
.pl-playing .wave-bars span:nth-child(4) { animation-delay: .45s;}
.pl-playing .wave-bars span:nth-child(5) { animation-delay: .3s;}
.pl-playing .wave-bars span:nth-child(6) { animation-delay: .15s;}
.pl-info { flex: 1; min-width: 0;}
.pl-title {
font-family: 'NEXON Lv1 Gothic OTF','Malgun Gothic',sans-serif;
font-size: .85rem;
font-weight: 700;
color: var(--text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -.01em;
transition: color 0.7s ease;
}
.pl-list li:hover .pl-title { color: var(--accent);}
.pl-list li.pl-current .pl-title { color: var(--accent);}
.pl-fav {
opacity: .35;
border: none;
background: none;
color: var(--text-2);
cursor: pointer;
font-size: 13px;
padding: 5px 4px;
border-radius: 7px;
transition: opacity .15s, color .15s, background .15s, transform .1s;
flex-shrink: 0;
line-height: 1;
}
.pl-list li:hover .pl-fav { opacity: .55;}
.pl-fav:hover {
opacity: 1 !important;
color: var(--accent);
background: rgba(var(--accent-rgb),.12);
transform: scale(1.1);
}
.pl-fav.is-fav {
opacity: 1 !important;
color: var(--accent);
}
.pl-fav.is-fav i { font-weight: 900;}
/* ── 차트 즐겨찾기 버튼 ── */
.chart-fav-btn {
opacity: .35;
border: none;
background: none;
color: var(--text-2);
cursor: pointer;
font-size: 13px;
padding: 5px 7px;
border-radius: 7px;
transition: opacity .15s, color .15s, background .15s, transform .1s;
flex-shrink: 0;
line-height: 1;
}
.chart-item:hover .chart-fav-btn { opacity: .6;}
.chart-fav-btn:hover {
opacity: 1 !important;
color: var(--accent);
background: rgba(var(--accent-rgb),.12);
transform: scale(1.1);
}
.chart-fav-btn.is-fav {
opacity: 1 !important;
color: var(--accent);
}
.chart-fav-btn.is-fav i { font-weight: 900;}
.pl-remove {
opacity: .35;
border: none;
background: none;
color: var(--text-2);
cursor: pointer;
font-size: 13px;
padding: 5px 4px;
border-radius: 7px;
transition: opacity .15s, color .15s, background .15s, transform .1s;
flex-shrink: 0;
line-height: 1;
}
.pl-list li:hover .pl-remove { opacity: .55;}
.pl-remove:hover {
opacity: 1 !important;
color: #ef4444;
background: rgba(239,68,68,.1);
transform: scale(1.1);
}
.pl-download {
opacity: .35;
border: none;
background: none;
color: var(--text-2);
cursor: pointer;
font-size: 13px;
padding: 5px 4px;
border-radius: 7px;
transition: opacity .15s, color .15s, background .15s, transform .1s;
flex-shrink: 0;
line-height: 1;
}
.pl-list li:hover .pl-download { opacity: .55;}
.pl-download:hover {
opacity: 1 !important;
color: var(--accent);
background: rgba(var(--accent-rgb),.12);
transform: scale(1.1);
}
.pl-download.pl-dl-locked {
color: var(--text-3) !important;
cursor: not-allowed;
}
/*즐겨찾기 토스트*/
.pl-dl-toast {
position: fixed;
bottom: 96px;
left: 50%;
transform: translateX(-50%) translateY(12px);
background: var(--accent);
color: #FFF;
font-size: 13px;
font-weight: 600;
padding: 10px 20px;
border-radius: 24px;
border: 1px solid rgba(var(--accent-rgb),.2);
backdrop-filter: blur(12px);
z-index: 9999;
opacity: 0;
transition: opacity .25s, transform .25s;
pointer-events: none;
white-space: nowrap;
}
.pl-dl-toast i { color: #FFF;}
.pl-dl-toast--show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.pl-empty {
text-align: center;
padding: 64px 20px;
color: var(--text-3);
font-size: .82rem;
line-height: 2;
}
[data-theme^="light"] .pl-list li:hover {
background: rgba(var(--accent-rgb),.06);
}
[data-theme^="light"] .pl-list li.pl-current {
background: rgba(var(--accent-rgb),.08);
}
@media (max-width:620px) {
.pl-list li { padding: 8px 10px; gap: 10px;}
.pl-list li:hover,
.pl-list li.pl-current { transform: none;}
.pl-thumb { width: 40px; height: 40px;}
.pl-title { font-size: .8rem;}
.pl-artist { font-size: .67rem;}
}
.pl-number { display: none;}
/* ═══════ 음성 명령 가이드 v2 — 탭 기반 디자인 ═════ */
.vc-guide {
background: var(--bg-1);
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border);
margin-bottom: 17px;
}

.vcg-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 28px 20px;
background: linear-gradient(135deg,rgba(var(--accent-rgb),.12) 0%,rgba(var(--accent-rgb),.03) 100%);
border-bottom: 1px solid var(--border);
gap: 16px;
flex-wrap: wrap;
}
.vcg-header-left { display: flex; align-items: center; gap: 16px;}
.vcg-mic-anim {
position: relative;
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
font-size: 22px; color: var(--accent);
background: rgba(var(--accent-rgb),.12);
border-radius: 50%;
flex-shrink: 0;
}
.vcg-mic-ring {
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1.5px solid rgba(var(--accent-rgb),.35);
animation: vcgRing 2s ease-in-out infinite;
}
.vcg-mic-ring--2 {
inset: -10px;
border-color: rgba(var(--accent-rgb),.18);
animation-delay: .5s;
}
@keyframes vcgRing {
0%,100% { transform: scale(1); opacity: 1;}
50% { transform: scale(1.08); opacity: .5;}
}

#section-about:not(.active) .vcg-mic-ring {
animation-play-state: paused;
}
.vcg-title { font-family: 'NEXON Lv1 Gothic OTF', 'Malgun Gothic', sans-serif; font-size: 18px; font-weight: 800; color: var(--accent);}
.vcg-sub { font-size: 12px; color: var(--text-3); margin-top: 3px;}
.vcg-stat-row { display: flex; gap: 20px;}
.vcg-stat { text-align: center;}
.vcg-stat-n { display: block; font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; color: var(--accent); line-height: 1;}
.vcg-stat-l { font-size: 10px; color: var(--text-3); letter-spacing: .5px; margin-top: 2px;}

.vcg-steps {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
justify-items: center;
gap: clamp(6px, 2vw, 20px);
padding: clamp(14px, 3vw, 28px) clamp(16px, 5vw, 40px);
background: rgba(var(--accent-rgb),.03);
border-bottom: 1px solid var(--border);
}
.vcg-steps--sm {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
padding: 12px 0;
background: none;
border: none;
gap: 8px;
}
.vcg-steps--sm .vcg-step { width: auto; min-width: 80px;}
.vcg-steps--sm .vcg-step-text { font-size: 11px; white-space: normal; word-break: keep-all; max-width: 72px;}
.vcg-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
position: relative;
width: 100%;
}
.vcg-step-num {
position: absolute;
top: -6px; left: -6px;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 11px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
z-index: 2;
box-shadow: 0 2px 6px rgba(var(--accent-rgb),.4);
}
.vcg-step-icon-wrap {
position: relative;
display: inline-flex;
}
.vcg-step-icon {
width: 48px; height: 48px;
border-radius: 14px;
background: rgba(var(--accent-rgb),.1);
border: 1px solid rgba(var(--accent-rgb),.2);
display: flex; align-items: center; justify-content: center;
font-size: 20px; color: var(--accent);
}
.vcg-step-icon--sm { width: 36px; height: 36px; border-radius: 10px; font-size: 15px;}
.vcg-step-text {
font-size: clamp(10.5px, 1.4vw, 12.5px);
color: var(--accent);
text-align: center;
line-height: 1.5;
word-break: keep-all;
}
.vcg-step-text strong { color: var(--accent); font-weight: 700;}
.vcg-step-arrow { color: var(--text-3); font-size: 11px; flex-shrink: 0;}
@media (max-width: 400px) {
.vcg-steps { grid-template-columns: 1fr 1fr 1fr; gap: 4px;}
.vcg-step-arrow { display: none;}
}
.vcg-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 10px; /* 버튼 좌우 간격 */
row-gap: 10px; /* 줄바꿈 시 위아래 간격 */
padding: 12px 16px;
background: var(--bg-1);
overflow: visible;
position: relative;
}
.vcg-tabs::before {
content: '';
position: absolute;
top: -4.5px; left: 0; right: 0;
height: 4.5px;
background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb),.55) 30%, rgba(var(--accent-rgb),.55) 70%, transparent 100%);
}
.vcg-tabs::after {
content: '';
position: absolute;
bottom: -5px; left: 0; right: 0;
height: 5px;
background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb),.55) 30%, rgba(var(--accent-rgb),.55) 70%, transparent 100%);
}
.vcg-tabs::-webkit-scrollbar { display: none;}
.vcg-tab {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 15px;
font-size: 12px;
font-weight: 600;
color: var(--text-2);
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 20px;
cursor: pointer;
white-space: nowrap;
transition: color .18s, background .18s, border-color .18s, box-shadow .18s, transform .12s;
font-family: inherit;
flex-shrink: 0;
letter-spacing: .01em;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
box-shadow: 0 0 6px rgba(var(--accent-rgb),.35);
}
.vcg-tab:hover {
color: var(--text-1);
background: rgba(var(--accent-rgb), .07);
border-color: rgba(var(--accent-rgb), .3);
}
.vcg-tab:active { transform: scale(.95);}
.vcg-tab.active {
color: #fff;
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 0px 8px var(--accent);
}
.vcg-panels {
padding: 20px 24px;
position: relative;
}
.vcg-panel {
display: block;
visibility: hidden;
opacity: 0;
pointer-events: none;
position: absolute;
top: 20px; left: 24px; right: 24px;
height: 0;
overflow: hidden;
}
.vcg-panel.active {
visibility: visible;
opacity: 1;
pointer-events: auto;
position: relative;
top: auto; left: auto; right: auto;
height: auto;
overflow: visible;
}
.vcg-block {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border);
}
.vcg-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
.vcg-block-label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
margin-bottom: 12px;
}
.vcg-block-desc {
font-size: 12px;
color: var(--text-3);
margin-bottom: 2px;
line-height: 1.5;
}
.vcg-block-desc-up {
font-size: 11px;
color: var(--accent);
margin:5px 0;
text-align: center;
}
.vcg-lbl--purple { background: rgba(168,85,247,.15); color: #c084fc;}
.vcg-lbl--green { background: rgba(34,197,94,.12); color: #4ade80;}
.vcg-lbl--yellow { background: rgba(251,191,36,.12); color: #fbbf24;}
.vcg-lbl--orange { background: rgba(251,146,60,.12); color: #fb923c;}
.vcg-lbl--red { background: rgba(239,68,68,.12); color: #f87171;}
.vcg-lbl--blue { background: rgba(59,130,246,.12); color: #60a5fa;}
.vcg-lbl--teal { background: rgba(20,184,166,.12); color: #2dd4bf;}
.vcg-chips { display: flex; flex-wrap: wrap; gap: 7px;}
.vcg-chip {
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
cursor: default;
letter-spacing: .2px;
}
.vcg-chip--purple { background: rgba(168,85,247,.12); color: #c084fc; border: 1px solid rgba(168,85,247,.25);}
.vcg-chip--pink { background: rgba(236,72,153,.12); color: #f472b6; border: 1px solid rgba(236,72,153,.25);}
.vcg-ex-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px;}
.vcg-ex {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 10px;
background: var(--bg-2);
border: 1px solid var(--border);
flex-wrap: wrap;
}
.vcg-say {
font-size: 12.5px;
font-weight: 600;
color: var(--accent);
background: rgba(var(--accent-rgb),.10);
padding: 2px 8px;
border-radius: 6px;
border: 1px solid rgba(var(--accent-rgb),.18);
}
.vcg-arr { font-size: 11px; color: var(--text-3); flex-shrink: 0;}
.vcg-res { font-size: 12px; color: var(--text-3);}
.vcg-new {
display: inline-block;
font-size: 9px;
font-weight: 700;
background: var(--accent);
color: #fff;
padding: 1px 5px;
border-radius: 4px;
vertical-align: middle;
margin-left: 4px;
}
.vcg-cmd-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 8px;
}
.vcg-cmd {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background: var(--bg-2);
border: 1px solid var(--border);
transition: border-color .15s, background .15s;
}
.vcg-cmd:hover { border-color: rgba(var(--accent-rgb),.35); background: rgba(var(--accent-rgb),.04);}
.vcg-cmd-ic {
width: 34px; height: 34px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.vcg-ic--green { background: rgba(34,197,94,.15); color: #4ade80;}
.vcg-ic--yellow { background: rgba(251,191,36,.15); color: #fbbf24;}
.vcg-ic--blue { background: rgba(59,130,246,.15); color: #60a5fa;}
.vcg-ic--purple { background: rgba(168,85,247,.15); color: #c084fc;}
.vcg-ic--orange { background: rgba(251,146,60,.15); color: #fb923c;}
.vcg-ic--dark { background: rgba(100,116,139,.15); color: var(--text-2);}
.vcg-ic--gray { background: rgba(148,163,184,.12); color: var(--text-2);}
.vcg-ic--red { background: rgba(239,68,68,.15); color: #f87171;}
.vcg-ic--fav { background: rgba(236,72,153,.15); color: #f472b6;}
.vcg-ic--alarm { background: rgba(245,158,11,.15); color: #fbbf24;}
.vcg-ic--teal { background: rgba(20,184,166,.15); color: #2dd4bf;}
.vcg-cmd-b { min-width: 0;}
.vcg-cmd-a { font-size: 12.5px; font-weight: 600; color: var(--accent);}
.vcg-cmd-w { font-size: 11px; color: var(--text-3); margin-top: 2px; line-height: 1.5;}
.vcg-panel.active.vcg-ani-fade,
.vcg-panel.active.vcg-ani-left,
.vcg-panel.active.vcg-ani-right {
animation: vcgFadeIn .25s ease forwards;
}
@keyframes vcgFadeIn {
from { opacity: 0;}
to { opacity: 1;}
}
.vcg-nav-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 6px;
}
.vcg-nav-grid2 {
display: grid;
grid-template-columns: 50% 50%;
gap: 6px;
}
.vcg-nav {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 12px;
border-radius: 10px;
background: var(--bg-2);
border: 1px solid var(--border);
}
.vcg-nav-kw { font-size: 12.5px; font-weight: 600; color: var(--accent);}
.vcg-nav-desc { font-size: 11px; color: var(--text-3);}
.vcg-tip {
font-size: 11.5px;
color: var(--text-3);
line-height: 1.6;
padding: 8px 12px;
border-radius: 8px;
background: rgba(255,255,255,.025);
margin-top: 10px;
}
.vcg-tip .fa-circle-info { color: var(--accent); margin-right: 4px;}
.vcg-tip strong { color: var(--text-2);}
.vcg-badge {
font-size: 9px;
font-weight: 700;
background: rgba(var(--accent-rgb),.15);
color: var(--accent);
padding: 2px 6px;
border-radius: 4px;
margin-left: 4px;
}
.vcg-badge--green { background: rgba(34,197,94,.12); color: #4ade80;}
.vcg-notice {
padding: 14px 28px;
font-size: 11.5px;
color: var(--text-3);
line-height: 1.7;
background: linear-gradient(135deg,rgba(var(--accent-rgb),.12) 0%,rgba(var(--accent-rgb),.03) 100%);
border-top: 1px solid rgba(251,191,36,.1);
}
.vcg-notice .fa-triangle-exclamation { color: #fbbf24; margin-right: 6px;}
.vcg-notice strong { color: var(--text-2);}
@media (max-width: 640px) {
.vcg-header { padding: 18px 20px 16px;}
.vcg-stat-row { gap: 14px;}
.vcg-panels { padding: 16px 16px;}
.vcg-panel { top: 16px; left: 16px; right: 16px;}
.vcg-cmd-grid { grid-template-columns: 1fr 1fr;}
.vcg-nav-grid { grid-template-columns: 1fr 1fr;}
.vcg-steps { padding: 14px 20px;}
}
.vcg-mobile-row {
display: flex;
flex-direction: row;
gap: 0;
align-items: stretch;
}
@media (max-width: 560px) {
.vcg-mobile-row { flex-direction: column; gap: 12px;}
.vcg-mobile-divider { display: none;}
}
.vc-nav-grid { grid-template-columns: 1fr 1fr;}
.vc-how { gap: 6px;}
.vc-how-step { min-width: 70px;}
.vcg-mobile-col {
flex: 1;
min-width: 0;
padding: 4px 0;
}
.vcg-mobile-divider {
width: 1px;
background: linear-gradient(to bottom, transparent, var(--border) 20%, var(--border) 80%, transparent);
margin: 4px 14px;
flex-shrink: 0;
}
.vcg-mobile-method {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 14px 16px;
}
.vcg-mobile-method-badge {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 700;
background: rgba(var(--accent-rgb),.12);
color: var(--accent);
padding: 3px 10px;
border-radius: 20px;
margin-bottom: 10px;
letter-spacing: .3px;
}
.vcg-mobile-method-badge--purple {
background: rgba(168,85,247,.12);
color: #c084fc;
}
.vcg-mobile-method-badge--yellow {
background: rgba(251,191,36,.12);
color: #fbbf24;
}
#aiChatLightbox{
    position:fixed;
    inset:0;
    z-index:9999999999999;
}