@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{gap:10px}.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)}

/* Threads-style 2-line hamburger (mobile only) */
.hamburger{display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;width:36px;height:36px;padding:0;background:transparent;border:0;color:inherit;cursor:pointer;border-radius:8px;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;transition:background-color .15s var(--ease)}
.hamburger:hover{background:rgba(255,255,255,0.06)}
.topbar.on-light .hamburger:hover{background:rgba(0,0,0,0.06)}
.hamburger-bar{display:block;width:16px;height:2px;background:currentColor;border-radius:2px;transition:transform .28s var(--ease),opacity .2s var(--ease)}
.hamburger.is-open .hamburger-bar:nth-child(1){transform:translateY(3px) rotate(45deg)}
.hamburger.is-open .hamburger-bar:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
@media(max-width:760px){.hamburger{display:inline-flex}}

/* Mobile menu panel — Threads-like spring reveal */
.mobile-menu{position:fixed;top:80px;left:0;right:0;z-index:49;background:rgba(10,10,10,0.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.08);opacity:0;transform:translateY(-12px);pointer-events:none;visibility:hidden;transition:opacity .28s cubic-bezier(0.34,1.2,0.64,1),transform .32s cubic-bezier(0.34,1.2,0.64,1),visibility 0s linear .32s}
.mobile-menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible;transition:opacity .28s cubic-bezier(0.34,1.2,0.64,1),transform .32s cubic-bezier(0.34,1.2,0.64,1),visibility 0s linear 0s}
.mobile-menu-inner{display:flex;flex-direction:column;padding:16px 20px 28px}
.mobile-menu a{display:block;font-family:'Inter',sans-serif;font-size:18px;font-weight:600;letter-spacing:-0.01em;padding:16px 0;color:var(--text-primary);text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.06);opacity:0;transform:translateY(-8px);transition:opacity .24s var(--ease),transform .24s var(--ease),color .15s var(--ease)}
.mobile-menu a:hover,.mobile-menu a:active{color:var(--accent)}
.mobile-menu a.mobile-menu-cta{color:var(--accent);border-bottom:0;margin-top:6px;font-weight:800}
.mobile-menu.is-open a{opacity:1;transform:translateY(0)}
.mobile-menu.is-open a:nth-child(1){transition-delay:.02s}
.mobile-menu.is-open a:nth-child(2){transition-delay:.06s}
.mobile-menu.is-open a:nth-child(3){transition-delay:.10s}
.mobile-menu.is-open a:nth-child(4){transition-delay:.14s}
.mobile-menu.is-open a:nth-child(5){transition-delay:.18s}
.mobile-menu.is-open a:nth-child(6){transition-delay:.22s}
[lang="ko"] .mobile-menu a{font-family:'Pretendard Variable',Pretendard,'Inter',sans-serif}
body.menu-open{overflow:hidden}
@media(min-width:761px){.mobile-menu{display:none}}

.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}}