:root {
  --bg:#07090d; --surface:#0e1219; --surface2:#141a23; --line:#1f2937;
  --text:#f2f6fa; --muted:#93a3b8; --accent:#ffa8d2; --accent2:#6fe8d2;
  --grad:linear-gradient(105deg,#ffa8d2 0%,#a5cfff 50%,#6fe8d2 100%); --on-grad:#0a1414; --glow:0 0 0 1px rgba(165,207,255,.22), 0 18px 50px -18px rgba(255,168,210,.4); --thumb:linear-gradient(140deg,#ffa8d226,#a5cfff1f 50%,#6fe8d226);
  --pearl-a:#ffa8d2; --pearl-b:#a5cfff;
  --font-display:'Archivo',system-ui,sans-serif; --font-serif:'Instrument Serif',Georgia,serif;
  --font-kr:'Noto Sans KR',sans-serif; --font-mono:ui-monospace,'SF Mono',Menlo,monospace;
  --max:1220px; --gap:clamp(14px,3vw,24px);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-display);
  font-weight:420; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 clamp(18px,4vw,30px); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
.kr { font-family:var(--font-kr); font-size:11px; letter-spacing:.3em; color:var(--muted); }

header.nav { position:sticky; top:0; z-index:60; border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(16px); }
.nav-in { display:flex; align-items:center; gap:20px; height:64px; }
.brand { display:flex; align-items:baseline; gap:10px; white-space:nowrap; }
.brand .mark, .mark-sm { font-weight:900; font-stretch:118%; text-transform:uppercase; letter-spacing:.01em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand .mark { font-size:20px; }
nav.cats { display:flex; gap:20px; }
nav.cats a { font-size:13.5px; font-weight:600; color:var(--muted); }
nav.cats a:hover, nav.cats a:focus-visible { color:var(--text); }
.nav-right { margin-left:auto; }
.lang { font-family:var(--font-mono); font-size:11.5px; color:var(--muted);
  border:1px solid var(--line); border-radius:7px; padding:5px 9px; }
@media (max-width:760px) { nav.cats { gap:12px; overflow-x:auto; scrollbar-width:none; } }

.ad { display:grid; place-items:center; position:relative; margin:var(--gap) 0;
  border-radius:12px; background:color-mix(in srgb,var(--surface) 55%,transparent); }
.ad:empty::before, .ad > .close ~ *::before { content:""; }
.ad.leaderboard { min-height:92px; }
.ad.inline { min-height:280px; }
.ad.inline.wide { grid-column:1/-1; }
.ad.rail { min-height:600px; margin:0 0 var(--gap); position:sticky; top:80px; }
.anchor { position:fixed; inset:auto 0 0 0; z-index:70; min-height:0; height:0; overflow:hidden; margin:0; border-radius:0; }
body.longpage .anchor { height:auto; min-height:56px; overflow:visible; border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(10px); }
.anchor .close { position:absolute; right:8px; top:50%; transform:translateY(-50%); font-family:var(--font-mono);
  font-size:11px; color:var(--muted); background:var(--surface); border:1px solid var(--line);
  border-radius:6px; padding:3px 8px; cursor:pointer; }
@media (min-width:900px) { body.longpage .anchor { display:none; } }

.hero { position:relative; padding:clamp(52px,9vw,110px) 0 clamp(30px,5vw,60px); overflow:hidden; }
#honmoon { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.85; }
.hero-in { position:relative; z-index:2; }
.eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:20px; font-family:var(--font-mono);
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }
.eyebrow::before { content:""; width:38px; height:1px; background:var(--accent); }
.mega { margin:0; font-weight:900; font-stretch:122%; text-transform:uppercase; line-height:.88;
  letter-spacing:-.015em; font-size:clamp(54px,12.5vw,158px);
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 10px 44px color-mix(in srgb,var(--accent) 38%,transparent)); text-wrap:balance; }
.tagline { font-family:var(--font-serif); font-style:italic; font-size:clamp(21px,3.2vw,31px);
  line-height:1.3; max-width:21em; margin:24px 0 8px; }
.tagline em { font-style:normal; color:var(--accent); }
.hero .sub { color:var(--muted); max-width:52ch; margin:10px 0 28px; font-size:15.5px; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-block; font-weight:700; font-stretch:108%; font-size:14px; padding:13px 24px;
  border-radius:999px; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--text); }
.btn.primary { border:0; color:var(--on-grad); background:var(--grad); box-shadow:var(--glow); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.marquee { border-block:1px solid var(--line); overflow:hidden; padding:13px 0;
  background:color-mix(in srgb,var(--surface) 60%,transparent); }
.marquee .track { display:flex; gap:3.2em; width:max-content; animation:slide 34s linear infinite; }
.marquee span { font-weight:800; font-stretch:116%; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.marquee span b { color:var(--accent); }
@keyframes slide { to { transform:translateX(-50%); } }

.sec { padding:clamp(28px,5vw,56px) 0; }
.sec-head { display:flex; align-items:baseline; gap:16px; margin-bottom:24px; }
.sec-head h2 { margin:0; font-weight:900; font-stretch:120%; text-transform:uppercase;
  letter-spacing:-.01em; font-size:clamp(24px,4vw,38px); }
.sec-head .rule { flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); }
.sec-head .more { font-family:var(--font-serif); font-style:italic; font-size:17px; color:var(--accent); }

.grid-cards { display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:620px) { .grid-cards { grid-template-columns:1fr 1fr; } }
@media (min-width:980px) { .grid-cards { grid-template-columns:repeat(3,1fr); } }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.card:hover { transform:translateY(-5px); box-shadow:var(--glow);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); }
.card > a { display:flex; flex-direction:column; height:100%; }
.card .thumb { aspect-ratio:16/10; background:var(--thumb); position:relative; }
.card .thumb::after { content:""; position:absolute; inset:0; mix-blend-mode:screen; opacity:.5;
  background:radial-gradient(90% 70% at 75% 15%, color-mix(in srgb,var(--pearl-b) 45%,transparent), transparent 65%); }
.card .cat { position:absolute; z-index:2; top:12px; left:12px; font-family:var(--font-serif);
  font-style:italic; font-size:15px; color:var(--on-grad); background:var(--grad);
  padding:3px 12px; border-radius:999px; }
.card .body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card h3 { margin:0; font-weight:750; font-stretch:105%; font-size:17.5px; line-height:1.25;
  letter-spacing:-.01em; text-wrap:balance; }
.card .meta { margin-top:auto; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  color:var(--muted); display:flex; gap:14px; }

.songs { display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:760px) { .songs { grid-template-columns:1fr 1fr; } .songs.one { grid-template-columns:minmax(0,720px); } }
.song h3 { margin:12px 0 4px; font-weight:800; font-stretch:112%; font-size:19px; }
.song p { margin:0; color:var(--muted); font-size:14.5px; }
.yt { position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; cursor:pointer;
  background:var(--thumb); border:1px solid var(--line); }
.yt img { width:100%; height:100%; object-fit:cover; display:block; }
.yt .play { position:absolute; inset:0; display:grid; place-items:center; font-size:26px;
  color:var(--on-grad); }
.yt .play::before { content:""; position:absolute; width:72px; height:72px; border-radius:50%;
  background:var(--grad); box-shadow:var(--glow); z-index:-1; justify-self:center; align-self:center; }
.yt:hover .play::before { transform:scale(1.08); }
.yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.article-wrap { display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:900px) { .article-wrap { grid-template-columns:minmax(0,1fr) 300px; align-items:start; } }
.prose { background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:clamp(24px,4.5vw,40px); }
.prose h1 { margin:6px 0; font-weight:900; font-stretch:118%; text-transform:uppercase;
  font-size:clamp(24px,3.6vw,36px); letter-spacing:-.01em; line-height:1.05; text-wrap:balance; }
.prose h2 { font-weight:850; font-stretch:114%; font-size:clamp(19px,2.6vw,24px); margin:22px 0 6px; }
.prose .lede { font-family:var(--font-serif); font-style:italic; font-size:20px; color:var(--accent); margin:6px 0 12px; }
.prose .byline { font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin-bottom:18px; }
.prose p { max-width:65ch; color:color-mix(in srgb,var(--text) 88%,transparent); }
.prose a { color:var(--accent); }
.rail-mod { background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:18px; margin-bottom:var(--gap); }
.rail-mod h4 { margin:0 0 12px; font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); }
.trend { display:flex; gap:12px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line); }
.trend:last-child { border-bottom:0; }
.trend .rank { font-family:var(--font-serif); font-style:italic; font-size:22px; min-width:24px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.trend span { font-size:13.5px; line-height:1.35; }
.trend a:hover { color:var(--accent); }

.gal { display:grid; gap:10px; grid-template-columns:repeat(2,1fr); }
@media (min-width:700px) { .gal { grid-template-columns:repeat(4,1fr); } }
.gal .g { aspect-ratio:4/5; border-radius:12px; background:var(--thumb); border:1px solid var(--line);
  position:relative; overflow:hidden; }
.gal .g img { width:100%; height:100%; object-fit:cover; display:block; }
.gal .g .glabel, .gal .g::after { position:absolute; left:10px; bottom:9px; font-family:var(--font-serif);
  font-style:italic; font-size:14px; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.7); }
.gal .g[data-l]::after { content:attr(data-l); }

.members { display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:620px) { .members { grid-template-columns:1fr 1fr; } }
@media (min-width:980px) { .members { grid-template-columns:repeat(3,1fr); } }
.member { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; }
.member img, .member .mph { width:100%; aspect-ratio:1; object-fit:cover; object-position:top;
  border-radius:12px; background:var(--thumb); }
.member h3 { margin:12px 0 2px; font-weight:850; font-stretch:114%; font-size:20px; }
.member .role { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin:0 0 8px; }
.member p { margin:0; color:var(--muted); font-size:14.5px; }

.products { display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:620px) { .products { grid-template-columns:1fr 1fr; } }
@media (min-width:980px) { .products { grid-template-columns:repeat(3,1fr); } }
.product { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px;
  display:flex; flex-direction:column; gap:10px; }
.product img, .product .pph { width:100%; aspect-ratio:1; object-fit:contain; border-radius:12px;
  background:#fff; }
.product .pph { background:var(--thumb); }
.product h3 { margin:0; font-weight:750; font-size:16.5px; line-height:1.3; }
.product p { margin:0; color:var(--muted); font-size:14px; flex:1; }
.disclosure { font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin:-8px 0 18px; }

.faq details { border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary { font-weight:750; font-stretch:108%; font-size:16.5px; cursor:pointer; }
.faq p { color:var(--muted); }

.quizbox { max-width:720px; margin:0 auto; }
.quiz-q { font-weight:850; font-stretch:112%; font-size:21px; margin:18px 0 14px; }
.quiz-a { display:grid; gap:10px; }
.quiz-a button { text-align:left; font:inherit; font-size:15px; color:var(--text); cursor:pointer;
  background:var(--surface2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.quiz-a button:hover, .quiz-a button:focus-visible { border-color:var(--accent); }
.quiz-progress { font-family:var(--font-mono); font-size:11.5px; color:var(--muted); letter-spacing:.12em; }
.quiz-result h2 { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

.splash { min-height:100vh; display:grid; place-content:center; text-align:center; gap:26px; }

footer { border-top:1px solid var(--line); margin-top:44px; padding:32px 0 100px; color:var(--muted); font-size:13px; }
footer a { color:var(--accent); }
@media (min-width:900px) { footer { padding-bottom:32px; } }

@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
  #honmoon { display:none; }
}