@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

:root{
  --bg-app:#0A0A0A; --bg-surface:#121212; --bg-elev:#1A1A1A; --bg-hover:#242424;
  --bg-paper:#F5F4F0;
  --text-primary:#F2F2F2; --text-secondary:#D0D0D0; --text-meta:#A6A6A6;
  --text-disabled:#555; --text-on-paper:#0A0A0A; --text-on-paper-2:#555; --text-on-paper-3:#999;
  --border-dark:#242424; --border-divider:#333;
  --border-light:rgba(0,0,0,0.10); --border-light-soft:rgba(0,0,0,0.06);
  --accent:#2AD829; --accent-soft:rgba(42,216,41,0.15); --accent-glow:rgba(42,216,41,0.40);
  /* Genre palette — reused as section colors for Journey / What We Do */
  --hue-discover:#EAB308;   /* Jazz yellow  → Discover */
  --hue-valueup:#A855F7;    /* Electronic purple → Value-Up */
  --hue-global:#1E88E5;     /* Pop blue → Go Global */
  --hue-vocal:#EC407A;      /* Vocal pink — reserved */
  --hue-rock:#EF4444;       /* Rock red   — reserved */
  --hue-discover-soft:rgba(234,179,8,0.14);
  --hue-valueup-soft:rgba(168,85,247,0.14);
  --hue-global-soft:rgba(30,136,229,0.14);
  --ease:cubic-bezier(0.4,0,0.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
[lang="ko"]{font-family:'Pretendard Variable',Pretendard,'Inter',sans-serif}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media(max-width:680px){.wrap{padding:0 20px}}

.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{font-family:'Inter',sans-serif;font-weight:900;font-size:17px;letter-spacing:-0.02em;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.brand .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}
.navlinks{display:flex;gap:28px;align-items:center}
.navlinks a{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;text-decoration:none;opacity:.7;transition:opacity .2s var(--ease);letter-spacing:-0.005em}
.navlinks a:hover{opacity:1}
@media(max-width:760px){.navlinks .hide-m{display:none}}

.langtoggle{display:inline-flex;border-radius:9999px;overflow:hidden;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em}
.langtoggle button{border:0;padding:6px 11px;cursor:pointer;background:transparent;transition:all .15s var(--ease)}

.topbar.on-dark{background:rgba(10,10,10,0.78);color:var(--text-primary);border-bottom-color:rgba(255,255,255,0.06)}
.topbar.on-dark .langtoggle{border:1px solid var(--border-divider)}
.topbar.on-dark .langtoggle button{color:var(--text-meta)}
.topbar.on-dark .langtoggle button.on{background:var(--accent);color:#000}
.topbar.on-light{background:rgba(245,244,240,0.85);color:var(--text-on-paper);border-bottom-color:var(--border-light-soft)}
.topbar.on-light .langtoggle{border:1px solid rgba(0,0,0,0.15)}
.topbar.on-light .langtoggle button{color:var(--text-on-paper-2)}
.topbar.on-light .langtoggle button.on{background:var(--text-on-paper);color:var(--bg-paper)}

.kicker{font-family:'Inter',sans-serif;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:'';width:24px;height:1.5px;background:var(--accent)}

.slabel{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:48px;display:flex;align-items:center;gap:12px}
.slabel::before{content:'';width:20px;height:1px;background:currentColor;opacity:.6}
.slabel.on-dark{color:var(--text-disabled)}
.slabel.on-light{color:var(--text-on-paper-3)}

.btn-accent{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#000;padding:16px 28px;border-radius:9999px;font-family:'Inter',sans-serif;font-weight:800;font-size:14px;letter-spacing:-0.005em;text-decoration:none;border:0;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.btn-accent:hover{transform:scale(1.04);box-shadow:0 0 32px var(--accent-glow)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;color:inherit;padding:15px 26px;border-radius:9999px;font-family:'Inter',sans-serif;font-weight:700;font-size:14px;letter-spacing:-0.005em;text-decoration:none;border:1px solid currentColor;cursor:pointer;transition:all .15s var(--ease)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

footer{padding:48px 0 56px;border-top:1px solid rgba(255,255,255,0.06)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
footer .flinks{display:flex;gap:28px}
footer a{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;text-decoration:none;opacity:.7}
footer a:hover{opacity:1;color:var(--accent)}
footer .copy{font-family:'Inter',sans-serif;font-size:12px;opacity:.55}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}