/* ===========================================================
   스텔라이브 아카이브 — style.css
   =========================================================== */

:root{
  --bg:        #06060d;
  --panel:     rgba(255,255,255,.045);
  --panel-2:   rgba(255,255,255,.078);
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.18);
  --ink:       #eceaf5;
  --ink-dim:   #a6a2bd;
  --ink-faint: #706c88;
  --accent:    #b98bff;
  --accent-2:  #6ec8ff;
  --gold:      #ffd479;
  --radius:    18px;
  --maxw:      1140px;
  --bar:       76px;
  --ease:      cubic-bezier(.2,.85,.25,1);
  --font: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI",
          "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", system-ui, sans-serif;
}

*{ box-sizing:border-box; }

body{
  margin:0; min-height:100vh;
  display:flex; flex-direction:column;
  font-family:var(--font);
  background:var(--bg); color:var(--ink);
  line-height:1.7; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ max-width:100%; }

/* ---------- 배경 레이어 ---------- */
#starfield{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.aurora{
  position:fixed; inset:-20% -10% auto -10%; height:130vh; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 45% at 18% 12%, rgba(150,90,255,.26), transparent 70%),
    radial-gradient(55% 40% at 82% 20%, rgba(60,170,255,.19), transparent 70%),
    radial-gradient(70% 50% at 50% 92%, rgba(255,140,190,.13), transparent 72%);
  filter:blur(30px);
  animation:auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  from{ transform:translate3d(-2%,0,0) scale(1); }
  to  { transform:translate3d(3%,-2%,0) scale(1.08); }
}
.cursor-glow{
  position:fixed; top:0; left:0; z-index:0; pointer-events:none;
  width:520px; height:520px; margin:-260px 0 0 -260px; opacity:0;
  transition:opacity .6s;
  background:radial-gradient(circle, rgba(150,110,255,.13), transparent 62%);
}
.topbar, .view, .footer, .to-top, .route-progress{ position:relative; z-index:2; }

/* ---------- 라우트 진행 바 ---------- */
.route-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:80; pointer-events:none;
  opacity:0; transition:opacity .3s;
}
.route-progress.on{ opacity:1; }
.route-progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--gold));
  box-shadow:0 0 12px rgba(185,139,255,.8);
}
.route-progress.on span{ width:72%; transition:width .5s var(--ease); }
.route-progress.done span{ width:100%; transition:width .18s ease; }

/* ---------- 상단바 ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:20px;
  height:var(--bar); padding:0 clamp(16px,4vw,40px);
  backdrop-filter:blur(16px);
  background:linear-gradient(to bottom, rgba(6,6,13,.9), rgba(6,6,13,.55));
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
body.scrolled .topbar{ border-bottom-color:var(--line); background:rgba(6,6,13,.9); }

.scroll-bar{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0); transform-origin:0 50%;
}

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.brand-mark{
  font-size:20px; color:var(--gold);
  filter:drop-shadow(0 0 10px rgba(255,212,121,.55));
  animation:twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{opacity:1;transform:rotate(0)} 50%{opacity:.5;transform:rotate(90deg)} }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text b{ font-size:16px; letter-spacing:.02em; }
.brand-text small{ font-size:10px; letter-spacing:.34em; color:var(--ink-faint); }

.nav{ position:relative; display:flex; gap:2px; }
.nav-pill{
  position:absolute; top:0; left:0; height:100%; border-radius:999px; opacity:0;
  background:linear-gradient(135deg, rgba(185,139,255,.30), rgba(110,200,255,.22));
  border:1px solid rgba(185,139,255,.35);
  transition:transform .42s var(--ease), width .42s var(--ease), opacity .3s;
  pointer-events:none;
}
.nav a{
  position:relative; z-index:1;
  text-decoration:none; font-size:14px; color:var(--ink-dim);
  padding:9px 15px; border-radius:999px; white-space:nowrap;
  transition:color .25s;
}
.nav a:hover{ color:var(--ink); }
.nav a.active{ color:#fff; }

.nav-toggle{
  display:none; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:10px;
  font-size:17px; width:42px; height:40px; cursor:pointer;
}

/* ---------- 페이지 전환 ---------- */
.view{ flex:1; }
.page{ will-change:opacity, transform; }
.page.enter{ animation:pageIn .58s var(--ease) both; }
.page.enter-soft{ animation:pageSoft .5s ease both; }
.page.leave{ animation:pageOut .24s cubic-bezier(.4,0,.9,1) both; }
@keyframes pageIn{
  from{ opacity:0; transform:translateY(28px) scale(.985); }
  to  { opacity:1; transform:none; }
}
@keyframes pageSoft{ from{opacity:0} to{opacity:1} }
@keyframes pageOut{
  from{ opacity:1; transform:none; }
  to  { opacity:0; transform:translateY(-20px) scale(.99); }
}

/* ---------- 스크롤 등장 ----------
   transform 은 tilt 가 쓰므로 translate 프로퍼티로 분리 */
[data-reveal]{
  opacity:0; translate:0 20px;
  transition:opacity .62s var(--ease), translate .62s var(--ease);
  transition-delay:calc(var(--i, 0) * 55ms);
}
[data-reveal].in{ opacity:1; translate:0 0; }

/* ---------- 공용 레이아웃 ---------- */
.section{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(48px,7vw,86px) clamp(16px,4vw,40px);
}
.sec-title{
  margin:0 0 10px; font-size:clamp(20px,2.6vw,26px);
  font-weight:700; letter-spacing:-.02em;
  padding-left:14px; border-left:3px solid var(--accent);
}
.sec-sub{ margin:0 0 26px; color:var(--ink-faint); font-size:14px; }
.sec-title + .nav-cards, .sec-title + .disc-grid,
.sec-title + .unit-list, .sec-title + .two-col,
.sec-title + .fandom-grid, .sec-title + .glossary, .sec-title + .recent{ margin-top:26px; }

.page-head{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(56px,8vw,104px) clamp(16px,4vw,40px) 0;
}
.kicker{
  display:block; font-size:10.5px; letter-spacing:.34em;
  color:var(--accent); margin-bottom:14px; font-weight:600;
}
.page-title{
  margin:0 0 14px; font-size:clamp(34px,6vw,58px);
  font-weight:800; letter-spacing:-.035em; line-height:1.05;
  background:linear-gradient(180deg,#fff 30%, #c9befa 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-sub{ margin:0; color:var(--ink-dim); font-size:15.5px; max-width:620px; text-wrap:pretty; }

.lede{
  font-size:clamp(16px,2vw,19px); line-height:1.85; color:var(--ink-dim);
  max-width:760px; margin:0 0 40px;
  padding-left:20px; border-left:2px solid var(--line-2);
}
.lede b{ color:var(--ink); font-weight:600; }

.two-col{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; }

.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px;
}
.card h3{ margin:0 0 10px; font-size:16.5px; font-weight:650; }
.card p{ margin:0; color:var(--ink-dim); font-size:14.5px; }
.card b{ color:var(--ink); font-weight:600; }

.kv{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 20px; font-size:14px; }
.kv dt{ color:var(--ink-faint); }
.kv dd{ margin:0; }
.kv a{ color:var(--accent-2); text-decoration:none; }

.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  padding:13px 27px; border-radius:999px; font-size:14.5px; font-weight:600;
  border:1px solid var(--line-2); color:var(--ink); background:var(--panel);
  transition:transform .2s var(--ease), background .25s, border-color .25s, box-shadow .25s;
}
.btn:hover{ transform:translateY(-3px); background:var(--panel-2); border-color:var(--accent); }
.btn-primary{
  background:linear-gradient(135deg,#8b5cf6,#4aa8ff); border-color:transparent; color:#fff;
  box-shadow:0 12px 34px -14px rgba(139,92,246,.95);
}
.btn-primary:hover{ box-shadow:0 18px 44px -14px rgba(139,92,246,1); }

.more-link{
  display:inline-block; margin-top:26px; text-decoration:none;
  font-size:14px; color:var(--accent-2); font-weight:600;
  transition:gap .2s, opacity .2s;
}
.more-link:hover{ opacity:.75; }

.empty{ text-align:center; color:var(--ink-faint); padding:56px 0; }
.hint{ margin:12px 0 0; font-size:12.5px; color:var(--ink-faint); }

/* ---------- 히어로 ---------- */
.hero{
  min-height:calc(100vh - var(--bar));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px clamp(16px,4vw,40px) 80px; position:relative;
}
.hero-eyebrow{
  font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 24px;
}
.hero-title{ margin:0 0 28px; line-height:1; }
.hero-ko{ display:block; font-size:clamp(46px,9.4vw,104px); font-weight:800; letter-spacing:-.045em; }
.hero-ko .ch{
  display:inline-block;
  background:linear-gradient(180deg,#fff 18%, #cfc4ff 62%, #8f7ad4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:charIn .9s var(--ease) both;
  animation-delay:calc(var(--i) * 80ms + 120ms);
}
@keyframes charIn{
  from{ opacity:0; transform:translateY(38px) rotate(6deg); filter:blur(8px); }
  to  { opacity:1; transform:none; filter:none; }
}
.hero-en{
  display:block; margin-top:14px;
  font-size:clamp(12px,2.4vw,20px); font-weight:500;
  letter-spacing:.62em; text-indent:.62em; color:var(--accent-2);
}
.hero-lead{
  color:var(--ink-dim); font-size:clamp(15px,1.7vw,17px);
  margin:0 auto 36px; max-width:610px; text-wrap:balance;
}
.hero-lead b{ color:var(--ink); font-weight:600; }
.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:52px; }

.hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px; width:min(720px,100%);
}
.stat{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 12px; }
.stat b{ display:block; font-size:24px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat span{ display:block; font-size:11.5px; color:var(--ink-faint); margin-top:4px; }

.scroll-hint{ position:absolute; bottom:24px; left:50%; translate:-50% 0; }
.scroll-hint span{
  display:block; width:1px; height:46px;
  background:linear-gradient(to bottom, transparent, var(--accent));
  animation:drop 2s ease-in-out infinite;
}
@keyframes drop{ 0%,100%{opacity:.15;transform:scaleY(.35)} 50%{opacity:1;transform:scaleY(1)} }

/* ---------- 마퀴 ---------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  padding:14px 0; background:rgba(255,255,255,.015);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{
  display:flex; gap:26px; width:max-content;
  animation:slide 46s linear infinite;
}
.marquee-track span{ font-size:12px; letter-spacing:.3em; color:var(--ink-faint); white-space:nowrap; }
.marquee-track .dot{ color:var(--accent); letter-spacing:0; }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- 홈 이동 타일 ---------- */
.nav-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.nav-card{
  position:relative; overflow:hidden; text-decoration:none;
  display:grid; gap:6px; padding:28px 26px 26px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .2s var(--ease), border-color .3s, background .3s;
}
.nav-card::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(185,139,255,.14), transparent 62%);
  transition:opacity .3s;
}
.nav-card:hover{ border-color:var(--accent); background:var(--panel-2); }
.nav-card:hover::after{ opacity:1; }
.nc-icon{
  font-size:22px; color:var(--accent); width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center; margin-bottom:8px;
  background:rgba(185,139,255,.12); border:1px solid rgba(185,139,255,.22);
  transition:transform .35s var(--ease);
}
.nav-card:hover .nc-icon{ transform:rotate(-8deg) scale(1.08); }
.nc-title{ font-size:19px; font-weight:700; display:flex; align-items:baseline; gap:9px; }
.nc-title em{
  font-style:normal; font-size:11px; font-weight:600; color:var(--accent-2);
  border:1px solid var(--line-2); border-radius:999px; padding:2px 9px;
}
.nc-desc{ font-size:13.5px; color:var(--ink-dim); }
.nc-arrow{
  margin-top:10px; font-size:15px; color:var(--accent);
  transition:transform .3s var(--ease);
}
.nav-card:hover .nc-arrow{ transform:translateX(7px); }

/* ---------- 최근 소식 ---------- */
.recent{ display:grid; gap:12px; }
.recent-item{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:20px 24px; transition:border-color .3s, background .3s;
}
.recent-item:hover{ border-color:var(--line-2); background:var(--panel-2); }
.ri-date{ font-size:11.5px; letter-spacing:.12em; color:var(--accent-2); }
.recent-item h3{ margin:6px 0 6px; font-size:16.5px; font-weight:650; }
.recent-item p{ margin:0; font-size:14px; color:var(--ink-dim); }

/* ---------- 기수 ---------- */
.gen-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.gen-card{
  position:relative;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px;
  transition:border-color .3s, background .3s;
}
.gen-card:hover{ border-color:var(--gc); background:var(--panel-2); }
.gen-card::before{
  content:''; position:absolute; inset:16px auto 16px 0;
  width:3px; border-radius:0 3px 3px 0; background:var(--gc);
}
.gen-order{ font-size:11px; letter-spacing:.24em; color:var(--gc); font-weight:600; }
.gen-card h3{ margin:8px 0 2px; font-size:23px; font-weight:700; }
.gen-en{ font-size:12px; letter-spacing:.2em; color:var(--ink-faint); }
.gen-debut{ margin:14px 0 10px; font-size:13px; color:var(--ink-dim); }
.gen-card p{ margin:0 0 16px; font-size:13.5px; color:var(--ink-dim); }
.gen-count{
  position:absolute; top:20px; right:24px;
  font-size:38px; font-weight:800; color:var(--gc); opacity:.26;
}
.gen-link{
  text-decoration:none; font-size:13px; font-weight:600; color:var(--gc);
  display:inline-block; transition:transform .25s var(--ease);
}
.gen-card:hover .gen-link{ transform:translateX(6px); }

/* ---------- 필터 · 검색 ---------- */
.filters{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:30px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  cursor:pointer; font-family:inherit; font-size:13.5px;
  border:1px solid var(--line-2); background:var(--panel); color:var(--ink-dim);
  padding:9px 17px; border-radius:999px;
  transition:color .2s, border-color .2s, background .25s, transform .2s;
}
.chip:hover{ color:var(--ink); border-color:var(--accent); transform:translateY(-2px); }
.chip.on{ background:linear-gradient(135deg,#8b5cf6,#4aa8ff); color:#fff; border-color:transparent; }
.chips-sm{ margin-bottom:32px; }
.chips-sm .chip{ padding:6px 14px; font-size:12.5px; }

.search-wrap{ margin-left:auto; }
#memberSearch{
  background:var(--panel); border:1px solid var(--line-2); border-radius:999px;
  padding:11px 20px; color:var(--ink); font-family:inherit; font-size:13.5px;
  width:260px; outline:none; transition:border-color .25s, box-shadow .25s;
}
#memberSearch::placeholder{ color:var(--ink-faint); }
#memberSearch:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(185,139,255,.12); }

/* ---------- 멤버 카드 ---------- */
.member-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:16px;
  transition:opacity .14s;
}
.member-grid.swap, .timeline.swap{ opacity:0; }

.avatar{
  display:grid; place-items:center;
  width:64px; height:64px; border-radius:20px; font-size:29px;
  background:linear-gradient(140deg, var(--mc1), var(--mc2));
  box-shadow:0 10px 26px -12px var(--mc1);
}
.avatar.sm{ width:38px; height:38px; border-radius:12px; font-size:18px; }
.avatar.xl{ width:112px; height:112px; border-radius:30px; font-size:52px; }

.mcard{
  position:relative; overflow:hidden; text-decoration:none; color:inherit;
  display:grid; align-content:start; gap:0;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 22px 22px;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .2s var(--ease), border-color .3s, background .3s, box-shadow .3s;
}
.mcard:hover{
  border-color:var(--mc1); background:var(--panel-2);
  box-shadow:0 22px 50px -30px var(--mc1);
}
.mcard-sheen{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--mc1) 22%, transparent), transparent 60%);
}
.mcard:hover .mcard-sheen{ opacity:1; }
.mcard .avatar{ margin-bottom:16px; transition:transform .35s var(--ease); }
.mcard:hover .avatar{ transform:translateY(-3px) rotate(-5deg); }
.mcard-name{ display:block; font-size:17.5px; font-weight:700; letter-spacing:-.01em; }
.men{ display:block; font-size:11.5px; letter-spacing:.13em; color:var(--ink-faint); margin-top:3px; }
.mtag{ display:block; margin-top:12px; font-size:13px; color:var(--ink-dim); min-height:2.6em; }
.mmeta{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line);
}
.pill{
  font-size:11px; padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.06); color:var(--ink-dim); border:1px solid var(--line);
}
.pill.gen{ color:var(--mc1); border-color:color-mix(in srgb, var(--mc1) 40%, transparent); }
.mcard-go{
  display:block; margin-top:14px; font-size:12.5px; font-weight:600; color:var(--mc1);
  opacity:0; translate:0 6px; transition:opacity .3s, translate .3s var(--ease);
}
.mcard:hover .mcard-go{ opacity:1; translate:0 0; }
.mcard.grad{ opacity:.8; }
.mcard.grad .mcard-name::after{ content:' 🎓'; font-size:13px; }

/* ---------- 멤버 상세 ---------- */
.member-page{
  position:relative; max-width:920px; margin:0 auto;
  padding:clamp(30px,5vw,50px) clamp(16px,4vw,40px) 0;
}
.mp-glow{
  position:absolute; top:-120px; left:50%; translate:-50% 0;
  width:min(820px,110%); height:420px; pointer-events:none; z-index:-1;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--mc1) 30%, transparent), transparent);
  filter:blur(28px); opacity:.7;
  animation:glowIn 1.2s var(--ease) both;
}
@keyframes glowIn{ from{opacity:0; transform:scale(.8)} to{opacity:.7; transform:none} }

.back-link{
  display:inline-block; text-decoration:none; font-size:13.5px; color:var(--ink-faint);
  margin-bottom:26px; transition:color .25s, transform .25s var(--ease);
}
.back-link:hover{ color:var(--ink); transform:translateX(-5px); }

.mp-head{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.mp-gen{ display:block; font-size:12px; letter-spacing:.16em; color:var(--mc1); font-weight:600; }
.mp-head h1{
  margin:8px 0 4px; font-size:clamp(32px,5.6vw,50px);
  font-weight:800; letter-spacing:-.035em; line-height:1.05;
}
.mp-tagline{ margin:12px 0 0; font-size:15.5px; color:var(--ink-dim); }

.mp-sec{ padding:34px 0; border-top:1px solid var(--line); }
.mp-sec:first-of-type{ margin-top:22px; }
.mp-sec h2{
  margin:0 0 18px; font-size:11.5px; letter-spacing:.24em;
  color:var(--mc1); font-weight:600; text-transform:uppercase;
}

.prof{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.prof div{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.prof span{ display:block; font-size:10.5px; letter-spacing:.14em; color:var(--ink-faint); margin-bottom:5px; }
.prof b{ font-size:15px; font-weight:650; }

.story{ font-size:16px; line-height:1.95; color:var(--ink-dim); max-width:680px; }
.mnotes{ margin:0; padding-left:20px; color:var(--ink-dim); font-size:14.5px; }
.mnotes li{ margin-bottom:8px; }

.tagrow{ display:flex; gap:9px; flex-wrap:wrap; }
.tagrow code{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:12.5px;
  background:rgba(255,255,255,.07); border:1px solid var(--line);
  padding:6px 12px; border-radius:8px; color:var(--accent-2);
}
.linkrow{ display:flex; gap:10px; flex-wrap:wrap; }
.linkrow a{
  text-decoration:none; font-size:13.5px; font-weight:600;
  padding:11px 20px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--panel);
  transition:border-color .25s, background .25s, transform .25s var(--ease);
}
.linkrow a:hover{ border-color:var(--mc1); background:var(--panel-2); transform:translateY(-3px); }

.mates{ display:flex; gap:10px; flex-wrap:wrap; }
.mate{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:7px 18px 7px 7px; font-size:14px;
  transition:border-color .25s, background .25s, transform .25s var(--ease);
}
.mate:hover{ border-color:var(--mc1); background:var(--panel-2); transform:translateY(-3px); }

/* ---------- 페이지 이동 ---------- */
.page-nav{
  max-width:var(--maxw); margin:0 auto;
  padding:40px clamp(16px,4vw,40px) clamp(56px,7vw,90px);
  display:flex; gap:12px; flex-wrap:wrap;
}
.member-page .page-nav{ max-width:none; padding-inline:0; border-top:1px solid var(--line); padding-top:34px; }
.pn{
  flex:1 1 220px; text-decoration:none;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:18px 22px; display:grid; gap:4px;
  transition:border-color .3s, background .3s, transform .25s var(--ease);
}
.pn:hover{ border-color:var(--accent); background:var(--panel-2); transform:translateY(-3px); }
.pn span{ font-size:11px; letter-spacing:.2em; color:var(--ink-faint); }
.pn b{ font-size:16px; font-weight:650; }
.pn.next{ text-align:right; }

/* ---------- 연혁 ---------- */
.timeline-wrap{ position:relative; padding-left:26px; }
.tl-rail{
  position:absolute; left:6px; top:10px; bottom:10px; width:1px;
  background:var(--line);
}
.tl-fill{
  position:absolute; inset:0; transform:scaleY(0); transform-origin:50% 0;
  background:linear-gradient(to bottom, var(--accent), var(--accent-2));
  box-shadow:0 0 10px rgba(185,139,255,.6);
}
.timeline{ list-style:none; margin:0; padding:0; transition:opacity .14s; }
.tl-year{ position:relative; padding:26px 0 14px 22px; }
.tl-year span{
  font-size:13px; font-weight:700; letter-spacing:.2em; color:var(--ink-faint);
}
.tl-year::before{
  content:''; position:absolute; left:-25px; top:33px;
  width:11px; height:1px; background:var(--line-2);
}
.tl{ position:relative; padding:0 0 30px 22px; }
.tl::before{
  content:''; position:absolute; left:-25px; top:9px;
  width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:2px solid var(--accent);
  box-shadow:0 0 0 4px rgba(185,139,255,.10);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.tl:hover::before{ transform:scale(1.35); box-shadow:0 0 0 6px rgba(185,139,255,.18); }
.tl.big::before{ background:var(--accent); box-shadow:0 0 0 5px rgba(185,139,255,.20); }
.tl-date{ font-size:12px; letter-spacing:.1em; color:var(--accent-2); font-weight:600; }
.tl h3{ margin:5px 0 6px; font-size:17px; font-weight:650; }
.tl p{ margin:0; color:var(--ink-dim); font-size:14.5px; max-width:660px; }
.tl-tag{
  display:inline-block; margin-left:8px; font-size:10.5px; padding:2px 9px;
  border-radius:999px; background:rgba(255,255,255,.07);
  border:1px solid var(--line); color:var(--ink-faint); vertical-align:middle;
}

/* ---------- 음반 ---------- */
.disc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:18px; }
.disc{
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color .3s, background .3s;
}
.disc:hover{ border-color:var(--accent); background:var(--panel-2); }

/* 썸네일은 카드 위쪽에 16:9 로 넓게 — 잘리지 않고 전체가 보인다 */
.disc-cover{
  position:relative; display:block; overflow:hidden;
  width:100%; aspect-ratio:16/9; flex:none;
  background:linear-gradient(150deg, rgba(185,139,255,.28), rgba(110,200,255,.18));
  border-bottom:1px solid var(--line);
}
.disc-cover img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease), filter .3s;
}
img.img-failed{ display:none; }
.disc-cover:hover img{ transform:scale(1.07); filter:brightness(1.08); }
.disc-cover::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(6,6,13,.5), transparent 62%);
}
.disc-play{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:1;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  font-size:15px; color:#fff; padding-left:3px;
  background:rgba(10,10,20,.62); border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(4px);
  transition:transform .3s var(--ease), background .3s, border-color .3s;
}
.disc-cover:hover .disc-play{
  transform:scale(1.14); background:rgba(139,92,246,.85); border-color:transparent;
}

.disc-body{ padding:22px 24px 24px; min-width:0; display:flex; flex-direction:column; flex:1; }
.disc-links{ margin-top:auto; }
.d-date{
  font-size:11.5px; letter-spacing:.12em; color:var(--accent-2);
  display:flex; align-items:center; gap:9px;
}
.d-kind{
  font-size:10.5px; letter-spacing:.08em; color:var(--gold);
  border:1px solid rgba(255,212,121,.28); border-radius:999px; padding:2px 9px;
}
.disc h3{ margin:9px 0 3px; font-size:22px; font-weight:750; letter-spacing:-.02em; }
.disc h3 a{ text-decoration:none; transition:color .2s; }
.disc h3 a:hover{ color:var(--accent-2); }
.d-by{ font-size:13px; color:var(--ink-dim); }
.disc-body > p{ margin:12px 0 0; font-size:13.5px; color:var(--ink-faint); line-height:1.75; }

.tracklist{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:4px; }
.tracklist a{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  padding:9px 12px; border-radius:10px;
  border:1px solid transparent; transition:background .2s, border-color .2s;
}
.tracklist a:hover{ background:rgba(255,255,255,.06); border-color:var(--line); }
.tk-n{ font-size:11px; color:var(--ink-faint); width:14px; font-variant-numeric:tabular-nums; }
.tk-t{ font-size:14.5px; font-weight:600; }
.tk-note{ font-size:11.5px; color:var(--ink-faint); }
.tk-play{
  margin-left:auto; font-size:11px; color:var(--accent);
  opacity:0; translate:-5px 0; transition:opacity .2s, translate .2s var(--ease);
}
.tracklist a:hover .tk-play, .ul-main:hover .tk-play{ opacity:1; translate:0 0; }

.disc-members{ display:flex; gap:6px; flex-wrap:wrap; margin-top:16px; }
.disc-body .hint{ margin-top:8px; }
.disc-links{ display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; }
.disc-links a{
  font-size:12.5px; color:var(--accent-2); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.disc-links a:hover{ border-bottom-color:currentColor; }

/* 유닛곡 */
.unit-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.unit-list li{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:12px 18px 12px 12px;
  transition:border-color .3s, background .3s;
}
.unit-list li:hover{ border-color:var(--accent); background:var(--panel-2); }
.ul-main{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  flex:1 1 260px; min-width:0;
}
.ul-thumb{
  width:88px; height:50px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line); flex:none;
  transition:transform .35s var(--ease);
}
.ul-main:hover .ul-thumb{ transform:scale(1.05); }
.ul-text{ display:grid; gap:2px; min-width:0; }
.ul-text b{ font-size:15.5px; font-weight:650; }
.ul-text small{ font-size:12px; color:var(--ink-faint); }
.ul-side{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.ul-official{
  font-size:12px; color:var(--accent-2); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;
  transition:border-color .2s, background .2s;
}
.ul-official:hover{ border-color:var(--accent-2); background:var(--panel-2); }

/* 멤버 페이지의 참여곡 */
.songlist{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.songlist a{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:13px 18px;
  transition:border-color .25s, background .25s, transform .25s var(--ease);
}
.songlist a:hover{ border-color:var(--mc1); background:var(--panel-2); transform:translateX(5px); }
.sl-play{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:10px; color:var(--mc1);
  background:color-mix(in srgb, var(--mc1) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--mc1) 35%, transparent);
}
.sl-main{ display:grid; gap:2px; min-width:0; }
.sl-main b{ font-size:15px; font-weight:650; }
.sl-main small{ font-size:12px; color:var(--ink-faint); }
.sl-kind{
  margin-left:auto; font-size:11px; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px; white-space:nowrap;
}

/* ---------- 팬 문화 ---------- */
.fandom-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.fan{
  display:flex; align-items:center; gap:13px; text-decoration:none;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 18px;
  transition:border-color .3s, background .3s, transform .25s var(--ease);
}
.fan:hover{ border-color:var(--mc1); background:var(--panel-2); transform:translateY(-4px); }
.fan b{ display:block; font-size:15.5px; }
.fan small{ display:block; font-size:12px; color:var(--ink-faint); }

.combo{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; }
.combo b{ font-size:16.5px; }
.combo .cm{ font-size:13px; color:var(--accent-2); margin:7px 0 9px; }
.combo p{ margin:0; font-size:13.5px; color:var(--ink-faint); }

.glossary{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.gl{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; }
.gl b{ font-size:15.5px; }
.gl p{ margin:7px 0 0; font-size:13.5px; color:var(--ink-dim); }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:10px; }
.faq details{
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; transition:border-color .3s, background .3s;
}
.faq details[open]{ border-color:var(--line-2); background:var(--panel-2); }
.faq summary{
  cursor:pointer; padding:19px 24px; font-size:15.5px; font-weight:600;
  list-style:none; display:flex; align-items:center; gap:13px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{
  content:'+'; color:var(--accent); font-size:19px; font-weight:400;
  transition:transform .28s var(--ease); display:inline-block;
}
.faq details[open] summary::before{ transform:rotate(45deg); }
.faq .fa{ padding:0 24px 22px 56px; margin:0; color:var(--ink-dim); font-size:14.5px; }
.faq details[open] .fa{ animation:faqIn .4s var(--ease) both; }
@keyframes faqIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
.faq .fa b{ color:var(--ink); }

/* ---------- 링크 ---------- */
.link-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.link-card{
  display:block; text-decoration:none;
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:24px;
  transition:transform .25s var(--ease), border-color .3s, background .3s;
}
.link-card:hover{ transform:translateY(-4px); border-color:var(--accent); background:var(--panel-2); }
.link-card b{ font-size:15.5px; display:block; }
.link-card span{ display:block; font-size:13px; color:var(--ink-faint); margin-top:6px; }
.link-card .arw{ color:var(--accent); font-size:13px; margin-top:14px; }

/* ---------- 404 ---------- */
.notfound{
  min-height:calc(100vh - var(--bar) - 100px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px 20px; gap:14px;
}
.nf-star{ font-size:56px; color:var(--gold); animation:twinkle 3s ease-in-out infinite; }
.notfound h1{ margin:0; font-size:clamp(28px,5vw,42px); font-weight:800; letter-spacing:-.03em; }
.notfound p{ margin:0 0 16px; color:var(--ink-dim); }

/* ---------- 푸터 ---------- */
.footer{ border-top:1px solid var(--line); padding:48px clamp(16px,4vw,40px) 60px; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; text-align:center; }
.footer-nav{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.footer-nav a{
  text-decoration:none; font-size:13px; color:var(--ink-faint);
  padding:6px 13px; border-radius:999px; transition:color .25s, background .25s;
}
.footer-nav a:hover{ color:var(--ink); background:var(--panel); }
.disclaimer{
  max-width:640px; margin:0 auto 18px; font-size:13px; color:var(--ink-dim);
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:16px 20px;
}
.disclaimer b{ color:var(--gold); }
.sources{ font-size:12px; color:var(--ink-faint); margin:0 0 22px; line-height:1.8; }
.made{ font-size:11px; letter-spacing:.28em; color:var(--ink-faint); margin:0; }

/* ---------- 맨 위로 ---------- */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:rgba(18,18,30,.9); border:1px solid var(--line-2); color:var(--ink);
  font-size:17px; backdrop-filter:blur(10px);
  opacity:0; translate:0 14px; pointer-events:none;
  transition:opacity .3s, translate .3s var(--ease), border-color .25s, background .25s;
}
.to-top.show{ opacity:1; translate:0 0; pointer-events:auto; }
.to-top:hover{ border-color:var(--accent); background:rgba(30,24,52,.95); }

/* ---------- 어려운 말 풍선 ---------- */
.term{
  position:relative; display:inline;
  border-bottom:1px dashed rgba(185,139,255,.65);
  color:var(--ink); font-weight:600; cursor:help; outline:none;
}
.term::after{
  content:attr(data-tip);
  position:absolute; z-index:50; left:50%; top:calc(100% + 10px);
  width:max-content; max-width:min(240px, 72vw);
  padding:11px 14px; border-radius:12px;
  background:#15152a; border:1px solid var(--line-2);
  color:var(--ink-dim); font-size:12.5px; font-weight:400; line-height:1.65;
  text-align:left; white-space:normal;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.95);
  opacity:0; pointer-events:none;
  translate:calc(-50% + var(--tip-shift, 0px)) 6px;
  transition:opacity .2s, translate .2s var(--ease);
}
.term::before{
  content:''; position:absolute; z-index:51; left:50%; top:calc(100% + 4px);
  width:9px; height:9px; rotate:45deg; translate:-50% 0;
  background:#15152a; border-left:1px solid var(--line-2); border-top:1px solid var(--line-2);
  opacity:0; transition:opacity .2s;
}
.term.on::after, .term:focus::after,
.term.on::before, .term:focus::before{ opacity:1; }
.term.on::after, .term:focus::after{ translate:calc(-50% + var(--tip-shift, 0px)) 0; }
.term.on{ border-bottom-color:var(--accent); color:#fff; }

.term-note{
  display:flex; gap:10px; align-items:flex-start;
  margin:0 0 30px; padding:14px 18px;
  background:rgba(185,139,255,.07); border:1px solid rgba(185,139,255,.22);
  border-radius:14px; font-size:13.5px; color:var(--ink-dim);
}
.term-note span[aria-hidden]{ font-size:15px; line-height:1.5; flex:none; }
.term-note a{ color:var(--accent-2); text-decoration:none; border-bottom:1px solid rgba(110,200,255,.4); }
.term-note a:hover{ color:#fff; }

/* 프로필 라벨 안의 용어는 라벨 톤을 그대로 따른다 */
.prof span .term{ font-size:inherit; letter-spacing:inherit; color:inherit; font-weight:inherit; }

/* ---------- 용어 사전 항목 ---------- */
.gl-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.gl-en{
  font-size:11.5px; color:var(--accent-2); letter-spacing:.04em;
  border:1px solid rgba(110,200,255,.25); border-radius:999px; padding:2px 9px;
}
.gl-also{
  display:block; margin-top:10px; padding-top:10px;
  border-top:1px dashed var(--line);
  font-size:12px; color:var(--ink-faint);
}
#glCats{ margin:-6px 0 22px; }

/* ---------- 홈: 처음이신가요 ---------- */
.onboard-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px; margin-bottom:26px;
}
.onboard{
  position:relative;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 26px 26px;
  transition:border-color .3s, background .3s;
}
.onboard:hover{ border-color:var(--line-2); background:var(--panel-2); }
.ob-num{
  position:absolute; top:-14px; left:26px;
  width:30px; height:30px; border-radius:10px;
  display:grid; place-items:center;
  font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#4aa8ff);
  box-shadow:0 8px 22px -10px rgba(139,92,246,.9);
}
.onboard h3{ margin:4px 0 10px; font-size:17px; font-weight:700; }
.onboard p{ margin:0; font-size:14.5px; color:var(--ink-dim); line-height:1.8; }
.onboard b{ color:var(--ink); font-weight:600; }

/* ---------- 홈: 멤버 미리보기 ---------- */
.mini-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:12px;
}
.mini{
  display:grid; justify-items:center; gap:4px; text-decoration:none;
  padding:18px 10px 16px; border-radius:16px;
  border:1px solid transparent;
  transition:border-color .3s, background .3s, transform .25s var(--ease);
}
.mini:hover{ border-color:var(--mc1); background:var(--panel); transform:translateY(-5px); }
.mini-av{
  width:58px; height:58px; border-radius:50%; font-size:27px;
  transition:transform .35s var(--ease);
}
.mini:hover .mini-av{ transform:rotate(-6deg) scale(1.06); }
.mini-name{ margin-top:8px; font-size:13.5px; font-weight:650; text-align:center; }
.mini-gen{ font-size:11px; color:var(--ink-faint); }

/* ---------- 말 사전 검색 ---------- */
.search-wrap.wide{ margin:0 0 22px; width:100%; }
#glossarySearch{
  width:min(420px,100%);
  background:var(--panel); border:1px solid var(--line-2); border-radius:999px;
  padding:12px 22px; color:var(--ink); font-family:inherit; font-size:14px;
  outline:none; transition:border-color .25s, box-shadow .25s;
}
#glossarySearch::placeholder{ color:var(--ink-faint); }
#glossarySearch:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(185,139,255,.12); }

/* FAQ 답변 안의 코드 조각 */
.faq .fa code{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:12.5px;
  background:rgba(255,255,255,.07); border:1px solid var(--line);
  padding:3px 8px; border-radius:6px; color:var(--accent-2);
}
.faq .fa br{ content:''; display:block; margin-top:8px; }

/* ---------- 접근성 · 공통 소품 ---------- */
.skip-link{
  position:fixed; top:8px; left:8px; z-index:200;
  padding:10px 18px; border-radius:10px; font-size:13.5px; font-weight:600;
  background:var(--accent); color:#12081f; text-decoration:none;
  translate:0 -150%; transition:translate .2s var(--ease);
}
.skip-link:focus{ translate:0 0; }

:where(a, button, input, summary, [tabindex]):focus-visible{
  outline:2px solid var(--accent-2); outline-offset:3px; border-radius:6px;
}

kbd{
  font-family:inherit; font-size:10.5px; font-weight:600; line-height:1;
  padding:3px 6px; border-radius:5px; color:var(--ink-dim);
  background:rgba(255,255,255,.07); border:1px solid var(--line-2);
  box-shadow:0 1px 0 rgba(0,0,0,.5);
}

.result-count{
  margin:0 0 14px; font-size:12.5px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}

/* ---------- 아바타 칩 ---------- */
.avatar.xs{ width:26px; height:26px; border-radius:8px; font-size:13px; box-shadow:none; }
.mchip{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-size:12.5px; padding:4px 12px 4px 4px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  transition:border-color .25s, background .25s, transform .25s var(--ease);
}
.mchip:hover{ border-color:var(--mc1); background:var(--panel-2); transform:translateY(-2px); }
.gen-members{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px; }

/* ---------- 다가오는 생일 ---------- */
.bday-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:22px; padding:14px 18px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
}
.bb-label{ font-size:12.5px; color:var(--ink-faint); margin-right:4px; }
.bb-item{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:13px; padding:5px 14px 5px 5px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  transition:border-color .25s, background .25s, transform .25s var(--ease);
}
.bb-item:hover{ border-color:var(--mc1); background:var(--panel-2); transform:translateY(-2px); }
.bb-date{ color:var(--ink-faint); font-size:12px; }
.bb-dday{
  font-size:11px; font-weight:700; color:var(--gold);
  background:rgba(255,212,121,.12); border-radius:999px; padding:2px 9px;
}

/* ---------- 해시태그 칩 ---------- */
.tagchip{
  display:inline-flex; align-items:stretch;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.05);
  transition:border-color .25s;
}
.tagchip:hover{ border-color:var(--mc1); }
.tagchip > a{
  display:flex; align-items:center; gap:9px; text-decoration:none; padding:7px 13px;
}
.tagchip code{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:12.5px; color:var(--accent-2); background:none; border:none; padding:0;
}
.tagchip em{ font-style:normal; font-size:10.5px; color:var(--ink-faint); }
.copy-btn{
  border:none; border-left:1px solid var(--line); cursor:pointer;
  background:transparent; color:var(--ink-faint); font-size:13px; padding:0 11px;
  transition:background .2s, color .2s;
}
.copy-btn:hover{ background:rgba(255,255,255,.08); color:var(--ink); }
.copy-btn.copied{ color:#7ee0a8; }
.copy-btn.failed{ color:#ff8a8a; }

/* ---------- 채널 링크 (2줄) ---------- */
.linkrow a{ display:flex; align-items:center; gap:9px; }
.linkrow a small{ font-size:11px; color:var(--ink-faint); font-weight:400; }

/* ---------- 잡다 ---------- */
.tl-go{
  display:inline-block; margin-top:10px; font-size:12.5px; font-weight:600;
  color:var(--accent-2); text-decoration:none;
  transition:transform .25s var(--ease);
}
.tl-go:hover{ transform:translateX(5px); }
.mp-bday{
  margin:12px 0 0; font-size:13px; font-weight:600; color:var(--gold);
  background:rgba(255,212,121,.1); border:1px solid rgba(255,212,121,.24);
  border-radius:999px; padding:6px 15px; display:inline-block;
}
.faq details.flash{
  animation:flash 1.6s var(--ease) both;
}
@keyframes flash{
  0%,100%{ box-shadow:0 0 0 0 rgba(185,139,255,0); }
  20%    { box-shadow:0 0 0 5px rgba(185,139,255,.28); }
}

/* ---------- 검색 버튼 ---------- */
.search-btn{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-family:inherit; font-size:13px; color:var(--ink-dim);
  background:var(--panel); border:1px solid var(--line-2);
  border-radius:999px; padding:8px 14px;
  transition:border-color .25s, color .25s, background .25s;
}
.search-btn:hover{ border-color:var(--accent); color:var(--ink); background:var(--panel-2); }
.search-btn > span[aria-hidden]{ font-size:15px; }
.btn-search{
  display:inline-flex; align-items:center; gap:9px;
  font-family:inherit;
}
.btn-search kbd{ font-size:10px; }

/* ---------- 통합 검색 팔레트 ---------- */
.palette{ position:fixed; inset:0; z-index:150; display:grid; place-items:start center; padding:12vh 16px 16px; }
.palette[hidden]{ display:none; }
.palette-backdrop{ position:absolute; inset:0; background:rgba(3,3,9,.8); backdrop-filter:blur(8px); }
.palette-box{
  position:relative; width:min(640px,100%); max-height:72vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,#14142400,#0c0c16), #12121f;
  border:1px solid var(--line-2); border-radius:20px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  animation:palIn .24s var(--ease) both;
}
@keyframes palIn{ from{ opacity:0; transform:translateY(-14px) scale(.98) } to{ opacity:1; transform:none } }

.palette-input{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
.pi-icon{ font-size:19px; color:var(--accent); }
#paletteInput{
  flex:1; min-width:0; background:none; border:none; outline:none;
  color:var(--ink); font-family:inherit; font-size:16px;
}
#paletteInput::placeholder{ color:var(--ink-faint); }
.pi-close{
  background:none; border:1px solid var(--line); border-radius:8px; cursor:pointer;
  color:var(--ink-faint); font-size:12px; width:28px; height:28px;
  transition:color .2s, border-color .2s;
}
.pi-close:hover{ color:var(--ink); border-color:var(--line-2); }

.palette-results{ overflow-y:auto; padding:8px; flex:1; }
.pal-row{
  display:flex; align-items:center; gap:13px; width:100%; cursor:pointer;
  background:none; border:1px solid transparent; border-radius:12px;
  padding:11px 13px; text-align:left; font-family:inherit; color:inherit;
  transition:background .15s, border-color .15s;
}
.pal-row:hover{ background:rgba(255,255,255,.05); }
.pal-row.on{ background:rgba(185,139,255,.14); border-color:rgba(185,139,255,.32); }
.pal-icon{
  width:32px; height:32px; flex:none; border-radius:10px;
  display:grid; place-items:center; font-size:16px;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
}
.pal-text{ display:grid; gap:2px; min-width:0; flex:1; }
.pal-text b{
  font-size:14.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pal-text small{
  font-size:12px; color:var(--ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pal-type{
  font-size:10.5px; color:var(--ink-faint); flex:none;
  border:1px solid var(--line); border-radius:999px; padding:3px 9px;
}
.pal-empty{ padding:38px 20px; text-align:center; color:var(--ink-faint); font-size:14px; margin:0; }

.palette-foot{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  padding:11px 18px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-faint);
}
.palette-foot span{ display:inline-flex; align-items:center; gap:5px; }
.pf-hint{ margin-left:auto; }

body.search-open{ overflow:hidden; }

/* ---------- 반응형 ---------- */
@media (max-width:820px){
  :root{ --bar:66px; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:8px; display:none;
    background:#090911; border-bottom:1px solid var(--line);
    box-shadow:0 24px 48px -20px rgba(0,0,0,.9);
  }
  .nav.open{ display:flex; animation:menuIn .28s var(--ease) both; }
  @keyframes menuIn{ from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:none} }
  .nav a{ padding:14px 16px; border-radius:10px; }
  .nav a.active{ background:var(--panel-2); }
  .nav-pill{ display:none; }
  .nav-toggle{ display:block; }
  .search-wrap{ margin-left:0; width:100%; }
  #memberSearch{ width:100%; }
  .mp-head{ gap:18px; }
  .avatar.xl{ width:88px; height:88px; font-size:40px; border-radius:24px; }
  .pn.next{ text-align:left; }

  .search-btn .sb-text, .search-btn kbd{ display:none; }
  .search-btn{ padding:9px 12px; }
  .disc-grid{ grid-template-columns:1fr; }
  .ul-side{ margin-left:0; width:100%; }
  .palette{ padding:8vh 12px 12px; }
  .palette-foot .pf-hint{ display:none; }
  /* 좁은 화면에선 ▶ 는 제목 줄 오른쪽에 두고, 설명만 아래로 내린다 */
  .tracklist a{ flex-wrap:wrap; row-gap:2px; }
  .tk-play{ order:3; margin-left:auto; opacity:1; translate:0 0; }
  .tk-note{ order:4; flex-basis:100%; padding-left:25px; }
}

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; translate:none; }
  .hero-ko .ch{ opacity:1; }
}