/* 에뮤차트 — 브랜드 색은 로고에서 뽑았다 (배경 #010203, 포인트 시안 #2adaff) */
:root{
  /* 순수 검정(#010407)은 LCD 에서 대비가 너무 세 눈이 아프다. 살짝 푸른 차콜로 올린다. */
  --bg:#0d1419; --bg2:#151d24; --bg3:#1f2a32; --line:#2b3740;
  --tx:#e9f1f6; --tx2:#9aabb6; --tx3:#6b7c88;
  --ac:#2adaff; --ac2:#0dc5e8; --hot:#ff5c7c; --ok:#32d583;
  --onac:#04222c;   /* 시안 위에 얹는 글자색. 반드시 고정값 — 자기참조 금지 */
  --pbh:86px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font:14px/1.5 'Pretendard','Malgun Gothic',system-ui,sans-serif;
  padding-bottom:var(--pbh);-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}

/* ── 상단: 브랜드 | 음악등록(가운데) | 탭+프로필(오른쪽) ──
   좌/우를 각각 flex:1 로 둬야 가운데 버튼이 화면 정중앙에 온다. */
header{position:sticky;top:0;z-index:40;background:rgba(13,20,25,.93);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
/* 🔴 flex 로 양옆에 flex:1 을 주면 '가운데'가 사이에 낀 요소 폭만큼 밀린다.
   3칸 그리드(1fr / auto / 1fr)는 양쪽 칸이 정의상 같은 폭이라 가운데 칸이 항상 정중앙이다. */
.hd{max-width:980px;margin:0 auto;padding:7px 16px;display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;font-size:17px;letter-spacing:-.4px;
  justify-self:start;min-width:0;overflow:hidden}
.brand em{font-style:normal;display:inline-flex}   /* '에뮤차트' 사이가 벌어지지 않게 한 덩어리로 */
.hright{display:flex;align-items:center;justify-self:end;justify-content:flex-end;min-width:0}
.brand img{width:28px;height:28px;border-radius:50%}
.brand span{color:var(--ac)}

/* 음악 등록 — 원형 + 발광. 사이트에서 가장 눈에 띄어야 할 단 하나의 버튼 */
.up{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;
  padding:0 6px;line-height:1;transition:.2s cubic-bezier(.4,0,.2,1)}
.up .ring{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--ac),#0b9fc0);
  box-shadow:0 0 0 1px rgba(42,218,255,.5), 0 4px 16px rgba(42,218,255,.38),
             inset 0 1px 0 rgba(255,255,255,.45);
  transition:.2s cubic-bezier(.4,0,.2,1);position:relative}
.up .ring::before{content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(42,218,255,.28);opacity:0;transition:.2s}
.up .ring i{font-style:normal;font-size:19px;font-weight:300;color:var(--onac);line-height:1;margin-top:-1px}
.up em{font-style:normal;font-size:9.5px;font-weight:800;color:var(--tx3);letter-spacing:.3px;white-space:nowrap;line-height:1.1}
.up:hover .ring{transform:translateY(-2px) scale(1.06);
  box-shadow:0 0 0 1px var(--ac), 0 8px 26px rgba(42,218,255,.6), inset 0 1px 0 rgba(255,255,255,.6)}
.up:hover .ring::before{opacity:1;inset:-7px}
.up:hover em{color:var(--ac)}
.up:active .ring{transform:translateY(0) scale(.98)}

/* 탭: 두 글자 세로쓰기 */
nav{display:flex;gap:3px;flex:none}
nav button{padding:5px 9px;border-radius:9px;color:var(--tx3);font-weight:800;font-size:12.5px;
  line-height:1.08;display:flex;flex-direction:column;align-items:center;transition:.13s}
nav button b{display:block;font-weight:800}
nav button:hover{color:var(--tx);background:var(--bg3)}
nav button.on{color:var(--onac);background:var(--ac)}

.mebtn{width:30px;height:30px;border-radius:50%;flex:none;margin-left:8px;padding:0;
  border:1px solid var(--line);overflow:hidden;transition:.14s}
.mebtn img{width:100%;height:100%;object-fit:cover;display:block}
.mebtn:hover{border-color:var(--ac);transform:scale(1.06)}

main{max-width:980px;margin:0 auto;padding:20px 18px 40px}
.tabs{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap}
.tabs button{padding:7px 14px;border-radius:20px;background:var(--bg2);color:var(--tx2);
  font-size:12.5px;font-weight:700;border:1px solid var(--line)}
.tabs button.on{background:var(--ac);color:var(--onac);border-color:var(--ac)}
.hint{color:var(--tx3);font-size:12px;margin-bottom:14px;line-height:1.6}

/* ── 곡 행 ──
   재생버튼을 크게 잡아 "이 줄에서 할 일"이 한눈에 보이게 한다.
   재생수·길이는 버튼 옆에 세로로 작게 — 정보지 버튼이 아니다.
   좋아요·댓글만 알약 버튼으로 오른쪽에 둔다. */
.row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;cursor:pointer}
.row:hover{background:var(--bg2)}
.row.on{background:var(--bg2)}
.rank{width:22px;text-align:center;font-weight:800;color:var(--tx3);font-size:15px;flex:none}
.t1 .rank{color:var(--ac)}
.art{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--bg3);display:block}
.meta{flex:1;min-width:0}
.tt{font-weight:800;font-size:15px;display:flex;align-items:center;gap:7px;min-width:0}
.tt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 좁은 화면에서 잘려야 하는 건 만든 사람 이름이지, 라이선스 배지나 전적이 아니다.
   이름만 줄어들게 하고 배지는 flex:none 으로 지킨다. */
.sb{color:var(--tx3);font-size:12px;margin-top:2px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.sb .by{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sb .licbtn,.sb .wl{flex:none}
.q{width:17px;height:17px;border-radius:50%;background:var(--bg3);color:var(--tx3);
  font-size:10.5px;font-weight:800;display:grid;place-items:center;flex:none}
.q:hover{background:var(--ac);color:var(--onac)}

/* 큰 재생버튼 */
.bigplay{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--bg3);color:var(--tx);font-size:16px;transition:.14s}
.bigplay:hover{background:var(--ac);color:var(--onac);transform:scale(1.07)}
.row.on .bigplay{background:var(--ac);color:var(--onac);box-shadow:0 0 0 5px rgba(42,218,255,.13)}

/* 재생수·길이 — 세로로 쌓은 정보 */
.nums{display:flex;flex-direction:column;gap:2px;flex:none;min-width:42px;margin-left:6px;
  color:var(--tx3);font-size:12px;font-variant-numeric:tabular-nums;line-height:1.35}
.bigplay{margin-right:4px}

/* 좋아요·댓글 — 알약 버튼 */
.acts{display:flex;gap:7px;flex:none}
.acts button{display:flex;align-items:center;gap:5px;padding:7px 13px;border-radius:20px;
  border:1px solid var(--line);background:var(--bg);color:var(--tx3);font-size:12.5px;font-weight:700}
.acts button:hover{border-color:var(--ac);color:var(--tx)}
.acts button.on{border-color:var(--hot);color:var(--hot);background:rgba(255,92,124,.07)}
.acts button.cbtn.on{border-color:var(--ac);color:var(--ac);background:rgba(42,218,255,.07)}

/* 재생 중인 곡만 파형이 아래에 펼쳐진다 */
.wrap{display:flex;align-items:center;gap:10px;padding:0 14px 11px 14px}
.wt{display:none}
.wt.r{text-align:right}
.wave{flex:1;min-width:0;display:flex;align-items:flex-end;gap:1px;height:34px;cursor:pointer}
.wave i{flex:1 1 0;min-width:0;background:#2c3a44;border-radius:1px;
  transform-origin:bottom;animation:wrise .26s ease-out backwards}
/* 막대마다 지연을 조금씩 줘서 왼쪽에서 오른쪽으로 솨라락 펼쳐지게 한다.
   지연값은 waveHTML 에서 인라인으로 박는다(막대 수가 화면폭마다 달라서). */
@keyframes wrise{ from{transform:scaleY(.05);opacity:0} to{transform:scaleY(1);opacity:1} }
.wave i.on{background:var(--ac)}

.pop{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  margin:0 0 9px 34px;position:relative}
.pop .px{position:absolute;top:8px;right:10px;font-size:18px;color:var(--tx3);
  width:26px;height:26px;border-radius:50%}
.pop .px:hover{background:var(--bg3);color:var(--tx)}
.pop{font-size:11.5px}
.pop .pr{display:flex;gap:8px;padding:2px 0;font-size:11.5px;line-height:1.5}
.pop .pr b{color:var(--tx3);font-weight:600;min-width:46px;flex:none;font-size:11px}
.pop .tags{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.pop a{color:var(--ac);font-weight:700}
.pop .sadd{display:flex;gap:6px;margin-top:8px}
.pop .sadd input{flex:1;max-width:220px;background:var(--bg);color:var(--tx);
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12.5px;outline:none}
.pop .sadd button{padding:7px 13px;border-radius:8px;background:var(--bg3);font-weight:700;font-size:12.5px}
.pop .sadd button:hover{background:var(--ac);color:var(--onac)}
.pop .lock{color:var(--tx3);font-size:11.5px;margin-top:7px}

.chip{background:var(--bg3);padding:1px 7px;border-radius:5px;font-size:10.5px;font-weight:600;flex:none}
.cpanel{background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;margin:0 0 9px 34px}

/* ── 대결 ── */
.vs{display:grid;grid-template-columns:1fr 56px 1fr;gap:14px;margin:6px 0 20px;align-items:stretch}
.cand{background:linear-gradient(160deg,var(--bg2),var(--bg));border:1px solid var(--line);
  border-radius:18px;padding:22px 18px;text-align:center;display:flex;flex-direction:column}
.cand img{width:78px;height:78px;border-radius:50%;margin:0 auto 14px;display:block;
  box-shadow:0 6px 20px rgba(0,0,0,.45)}
.cand h3{font-size:16.5px;margin-bottom:4px;line-height:1.35}
.cand .cby{color:var(--tx3);font-size:12px}
.cand .el{display:inline-block;margin:11px auto 0;padding:3px 11px;border-radius:12px;
  background:var(--bg3);color:var(--tx2);font-size:11.5px;font-weight:700}
.cand .sp{flex:1;min-height:12px}
/* 🔴 투표는 이 버튼으로만. 카드 아무 데나 눌러 투표되면 잘못 누른다 */
.cand .pick{margin-top:14px;padding:12px;border-radius:11px;background:var(--ac);color:var(--onac);
  font-weight:800;font-size:14px;cursor:pointer;transition:.12s}
.cand .pick:hover{background:#fff;transform:translateY(-2px)}
.prev{margin-top:11px;padding:9px;border-radius:10px;background:var(--bg3);font-size:12.5px;
  font-weight:700;width:100%}
.prev:hover{background:var(--line)}
.prev.playing{background:var(--ac);color:var(--onac)}
.vsmid{display:grid;place-items:center;font-weight:900;color:var(--tx3);font-size:16px;letter-spacing:1px}
.sec{font-weight:800;font-size:13px;color:var(--tx2);margin:22px 0 8px;padding-top:16px;
  border-top:1px solid var(--line);display:flex;align-items:center;gap:8px}
.sec small{color:var(--tx3);font-weight:500;font-size:11.5px;margin-left:auto}

/* 대결 알림 — 하단 바에 작게 띄웠더니 뜬 줄도 모르고 "노래가 멈췄나" 했다.
   중앙 큰 카드 + 자동 무시 타이머로 바꿨다. */
.duel{position:fixed;inset:0;z-index:70;background:rgba(6,10,13,.86);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:20px}
.dbox{background:var(--bg2);border:1px solid var(--ac);border-radius:20px;padding:24px;
  max-width:620px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.6)}
/* 에뮤가 말을 거는 형태. "대결이 떴습니다"보다 덜 놀랍고, 안 골라도 된다는 게 읽힌다. */
.dtop{display:flex;align-items:center;gap:12px}
.emu{width:52px;height:52px;border-radius:50%;flex:none;overflow:hidden;
  border:2px solid var(--ac);background:var(--bg);animation:emubob 2.6s ease-in-out infinite}
.emu img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes emubob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){ .emu{animation:none} }
.bubble{position:relative;background:var(--bg3);border-radius:13px;padding:10px 14px;min-width:0}
/* 말풍선 꼬리 — 에뮤 쪽을 가리킨다 */
.bubble::before{content:'';position:absolute;left:-6px;top:50%;margin-top:-6px;
  width:12px;height:12px;background:var(--bg3);transform:rotate(45deg)}
.bubble b{display:block;font-size:15px;font-weight:800;line-height:1.4}
.bubble span{display:block;color:var(--tx3);font-size:11.5px;margin-top:3px}
.dtimer{margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--bg3);color:var(--tx3);font-size:11px}
.dtimer b{color:var(--ac);font-size:14px;font-weight:800}
@media(max-width:640px){
  .emu{width:42px;height:42px}
  .bubble b{font-size:13.5px}
  .bubble span{font-size:10.5px}
}
.dring{height:4px;background:var(--bg3);border-radius:3px;overflow:hidden;margin:12px 0 18px}
.dring i{display:block;height:100%;background:var(--ac);width:100%;transition:width .95s linear}
.dcands{display:grid;grid-template-columns:1fr 44px 1fr;gap:12px;align-items:stretch}
.dskip{width:100%;margin-top:16px;padding:11px;border-radius:10px;color:var(--tx3);font-weight:700;font-size:13px}
.dskip:hover{background:var(--bg3);color:var(--tx)}
/* 좁은 화면에서 세로로 쌓으면 'A 위 B 아래'가 돼 대결로 안 읽힌다. 좌우를 유지한다 */
@media(max-width:640px){
  .dcands,.vs{grid-template-columns:1fr 26px 1fr;gap:7px}
  .vsmid{font-size:11px}
  .cand{padding:13px 9px;border-radius:14px}
  .cand img{width:52px;height:52px;margin-bottom:9px}
  .cand h3{font-size:13px}
  .cand .cby{font-size:10.5px}
  .cand .el{font-size:10px;padding:2px 8px;margin-top:8px}
  .cand .pick{padding:10px 4px;font-size:12px;margin-top:10px}
  .prev{padding:8px 4px;font-size:11px;margin-top:8px}
}

/* ── 게시판: 스레드형 ── */
.bwrite{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:13px;margin-bottom:14px}
.bwrite input,.bwrite textarea{width:100%;background:var(--bg);color:var(--tx);
  border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;font-size:13.5px;outline:none;margin-bottom:8px;resize:vertical}
.bwrite input::placeholder,.bwrite textarea::placeholder{color:var(--tx3)}
.bwrite input:focus,.bwrite textarea:focus{border-color:var(--ac)}
.bwrite .brow{display:flex;gap:8px;align-items:center}
.bwrite .go{margin-left:auto;padding:9px 20px;border-radius:9px;background:var(--ac);color:var(--onac);font-weight:800;font-size:13px}
.kinds{display:flex;gap:6px;margin-bottom:9px;flex-wrap:wrap}
.kinds button{padding:5px 12px;border-radius:15px;background:var(--bg3);color:var(--tx2);font-size:12px;font-weight:700}
.kinds button.on{background:var(--ac);color:var(--onac)}

/* 곡 첨부: 드롭다운 대신 검색 (곡이 많아지면 드롭다운은 못 쓴다) */
.attach{position:relative;margin-bottom:8px}
.attach input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;font-size:13px;outline:none}
.attach input:focus{border-color:var(--ac)}
.sugg{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:20;background:var(--bg3);
  border:1px solid var(--line);border-radius:10px;max-height:220px;overflow:auto}
.sugg div{padding:9px 12px;font-size:13px;cursor:pointer;display:flex;gap:8px;align-items:center}
.sugg div:hover{background:var(--ac);color:var(--onac)}
.sugg small{color:var(--tx3);margin-left:auto}
.sugg div:hover small{color:var(--onac)}
.picked{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--ac);
  border-radius:9px;padding:8px 11px;margin-top:6px;font-size:13px}
.picked img{width:22px;height:22px;border-radius:50%}
.picked b{margin-left:auto;cursor:pointer;color:var(--tx3);padding:0 4px}

/* 글 */
.post{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:13px 15px;margin-bottom:9px}
.post .ph{display:flex;gap:7px;align-items:center;margin-bottom:7px;font-size:11.5px;color:var(--tx3)}
.post .ph img{width:20px;height:20px;border-radius:50%}
.post .ph .who{font-weight:700;color:var(--tx2);font-size:12.5px}
.kind{padding:2px 8px;border-radius:11px;font-size:10.5px;font-weight:800}
.kind.tip{background:rgba(42,218,255,.16);color:var(--ac)}
.kind.ask{background:rgba(255,190,60,.16);color:#ffbe3c}
.kind.show{background:rgba(50,213,131,.16);color:var(--ok)}
.kind.talk{background:var(--bg3);color:var(--tx2)}
.kind.done{background:var(--ok);color:#00230f}
.post .pb{font-size:14px;color:var(--tx);white-space:pre-wrap;word-break:break-word;line-height:1.65}
.post .att{margin-top:10px;display:flex;align-items:center;gap:9px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:8px 11px;cursor:pointer}
.post .att:hover{border-color:var(--ac)}
.post .att img{width:26px;height:26px;border-radius:50%}
.pacts{display:flex;gap:5px;margin-top:9px;align-items:center}
.pacts button{padding:5px 10px;border-radius:8px;color:var(--tx3);font-size:12px;font-weight:700}
.pacts button:hover{background:var(--bg3);color:var(--tx)}
.pacts button.on{color:var(--hot)}

/* 답글: 1단계만. 깊은 트리는 금방 지저분해진다 */
.reps{margin-top:10px;padding-left:13px;border-left:2px solid var(--line)}
.rep{padding:8px 0;display:flex;gap:8px}
.rep img{width:22px;height:22px;border-radius:50%;flex:none}
.rep .rb{min-width:0;flex:1}
.rep .rn{font-size:12px;font-weight:700}
.rep .rn em{color:var(--tx3);font-style:normal;font-weight:500;margin-left:5px;font-size:11px}
.rep .rt{font-size:13.5px;margin-top:2px;word-break:break-word;line-height:1.6}
.rep.best{background:rgba(50,213,131,.07);border-radius:9px;padding:8px 10px;margin:4px 0}
.rep .adopt{font-size:11px;color:var(--tx3);font-weight:700;padding:3px 8px;border-radius:7px;background:var(--bg3)}
.rep .adopt:hover{background:var(--ok);color:#00230f}
.rwrite{display:flex;gap:7px;margin-top:8px}
.rwrite input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:8px 11px;font-size:13px;outline:none}
.rwrite input:focus{border-color:var(--ac)}
.rwrite button{padding:8px 14px;border-radius:8px;background:var(--bg3);font-weight:700;font-size:12.5px}
.rwrite button:hover{background:var(--ac);color:var(--onac)}

/* ── 하단 플레이어 ──
   좌: 곡정보+좋아요 / 중앙: 컨트롤+시간 / 우: 목록·볼륨·확대
   좌우를 flex:1 로 둬야 중앙 컨트롤이 화면 정중앙에 온다. */
.player{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(16,23,29,.98);
  backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.bar{height:6px;background:var(--bg3);cursor:pointer}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ac2),var(--ac));width:0;
  border-radius:0 3px 3px 0}
.bar:hover{height:9px}
.pc{max-width:1180px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:14px}

.pleft{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.pleft img{width:44px;height:44px;border-radius:9px;flex:none}
.pinfo{min-width:0;flex:1}
.pinfo .tt{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinfo .sb{font-size:11.5px;margin-top:1px}

.picon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  color:var(--tx3);font-size:14px;flex:none;transition:.12s}
.picon:hover{background:var(--bg3);color:var(--tx)}
.picon.on{color:var(--hot)}
#qBtn.on,#mute.on{color:var(--ac)}

.pmid{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none}
.ctrl{display:flex;align-items:center;gap:6px}
.ctrl button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--tx2);font-size:14px;transition:.12s;position:relative}
.ctrl button:hover{color:var(--tx);transform:scale(1.1)}
.ctrl button.on{color:var(--ac)}
.ctrl .pp{width:40px;height:40px;background:var(--tx);color:var(--bg);font-size:15px}
.ctrl .pp:hover{background:#fff;transform:scale(1.07)}
#repBadge{position:absolute;bottom:1px;right:2px;font-size:8px;font-weight:900;color:var(--ac)}
.time{font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums}

.pright{display:flex;align-items:center;gap:5px;flex:1;justify-content:flex-end}
#vol{width:84px;height:4px;-webkit-appearance:none;appearance:none;background:var(--bg3);
  border-radius:3px;outline:none;cursor:pointer}
#vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--tx);cursor:pointer;transition:.12s}
#vol:hover::-webkit-slider-thumb{background:var(--ac);transform:scale(1.2)}

@media(max-width:860px){ #vol{display:none} }
@media(max-width:640px){
  .pc{gap:8px;padding:9px 10px}
  .pleft img{width:38px;height:38px}
  .pright,.pleft #pLike{display:none}
  .ctrl button{width:30px;height:30px;font-size:13px}
  .ctrl .pp{width:38px;height:38px}
}

/* ── 시작 게이트 ── */
.gate{position:fixed;inset:0;z-index:99;background:rgba(13,20,25,.97);display:grid;place-items:center;text-align:center}
.gate img{width:168px;height:168px;border-radius:50%;margin-bottom:26px}
.gate h1{font-size:52px;font-weight:900;margin-bottom:16px;letter-spacing:-1.5px}
.gate h1 span{color:var(--ac)}
.gate p{color:var(--tx2);margin-bottom:34px;font-size:19px;line-height:1.75}
.gbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.gate button{padding:18px 40px;border-radius:40px;background:var(--ac);color:var(--onac);font-weight:800;font-size:19px}
.gate button:hover{transform:scale(1.04)}
.gate button.ghost{background:transparent;color:var(--tx2);border:2px solid var(--line);font-size:17px}
.gate button.ghost:hover{border-color:var(--ac);color:var(--tx)}
.gate small{display:block;margin-top:26px;color:var(--tx3);font-size:14px;line-height:1.75}
@media(max-width:560px){
  .gate img{width:124px;height:124px}.gate h1{font-size:40px}
  .gate p{font-size:16.5px}.gate button{font-size:17px;padding:16px 30px}
  .gate small{font-size:13px}
}
.empty{text-align:center;padding:46px 20px;color:var(--tx3)}

@media(max-width:640px){

  .stat .dur{display:none}nav button{padding:8px 11px;font-size:12px}
  .wave{height:52px}
}


/* ── 푸터 ── */
.foot{border-top:1px solid var(--line);margin-top:40px;padding:28px 18px 34px;background:var(--bg2)}
.fin{max-width:980px;margin:0 auto;text-align:center}
.fbrand{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:15px;margin-bottom:8px}
.fbrand img{width:24px;height:24px;border-radius:50%}
.fin p{color:var(--tx3);font-size:12.5px;margin-bottom:14px}
.flinks{display:flex;gap:9px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.flinks button{color:var(--tx2);font-size:12.5px;font-weight:700;padding:4px 2px}
.flinks button:hover{color:var(--ac);text-decoration:underline}
.flinks span{color:var(--line);font-size:11px}
.fcopy{color:var(--tx3);font-size:11.5px}
.fcopy b{color:var(--tx2)}

/* ── 모달 ── */
.modal{position:fixed;inset:0;z-index:80;background:rgba(6,10,13,.82);backdrop-filter:blur(5px);
  display:grid;place-items:center;padding:20px}
.mbox{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:26px;
  max-width:520px;width:100%;max-height:80vh;overflow:auto;position:relative}
.mx{position:absolute;top:12px;right:14px;font-size:24px;color:var(--tx3);width:32px;height:32px;border-radius:50%}
.mx:hover{background:var(--bg3);color:var(--tx)}
.mbox h2{font-size:20px;margin-bottom:14px}
.mbox h3{font-size:13px;color:var(--ac);margin:16px 0 6px}
.mbox p,.mbox li{color:var(--tx2);font-size:13.5px;line-height:1.75}
.mbox ul{padding-left:18px;margin:4px 0}
.mbox .kv{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.mbox .kv b{color:var(--tx3);font-weight:600;min-width:74px}
.mbox input,.mbox textarea,.mbox select{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;font-size:13.5px;outline:none;margin-bottom:9px;resize:vertical}
.mbox input:focus,.mbox textarea:focus{border-color:var(--ac)}
.mbox .send{width:100%;padding:12px;border-radius:10px;background:var(--ac);color:var(--onac);font-weight:800;font-size:14px}
.mnote{background:var(--bg3);border-radius:9px;padding:11px 13px;font-size:12.5px;color:var(--tx2);margin-top:12px;line-height:1.7}

@media(max-width:760px){
  /* 이 디자인은 모바일 기준이라 요소를 숨기지 않는다. 크기만 줄인다 */
  .row{gap:9px;padding:9px 10px}
  .rank{width:16px;font-size:13px}
  .artwrap{width:34px;height:34px}
  .tt{font-size:14px}
  .bigplay{width:42px;height:42px;font-size:15px}
  .nums{min-width:38px;font-size:11px}
  .acts{gap:5px}
  .acts button{padding:6px 10px;font-size:11.5px}
  .wrap{padding:0 10px 10px;gap:7px}
  .wt{font-size:10px;min-width:28px}
  .pop,.cpanel{margin-left:0}
}

/* ── 업로드 버튼: 탭이 아니라 항상 보이는 액션 버튼 ──
   업로드는 '둘러볼 곳'이 아니라 '할 일'이다. 어느 탭에 있든 보여야
   곡 듣다가 "나도 올려볼까" 하는 순간에 바로 누를 수 있다. */
/* 업로드 버튼 — 가운데 정렬. 꽉 찬 색보다 은은한 테두리+글로우가 더 고급스럽고
   '누르고 싶은' 느낌을 준다. 채도 높은 버튼은 광고처럼 보인다. */
.up{margin:0;padding:9px 22px;border-radius:11px;white-space:nowrap;flex:none;
  background:linear-gradient(180deg,rgba(42,218,255,.13),rgba(42,218,255,.04));
  border:1px solid rgba(42,218,255,.32);color:var(--ac);
  font-weight:700;font-size:13.5px;letter-spacing:.2px;
  display:inline-flex;align-items:center;gap:7px;
  transition:.18s cubic-bezier(.4,0,.2,1)}
.up span{font-size:15px;opacity:.85}
.up:hover{border-color:var(--ac);color:#fff;transform:translateY(-1px);
  background:linear-gradient(180deg,rgba(42,218,255,.22),rgba(42,218,255,.08));
  box-shadow:0 6px 22px rgba(42,218,255,.22)}
.up:active{transform:translateY(0)}
.drop{border:2px dashed var(--line);border-radius:13px;padding:26px 20px;text-align:center;
  cursor:pointer;transition:.15s;margin-bottom:12px}
.drop:hover,.drop.over{border-color:var(--ac);background:rgba(42,218,255,.05)}
.drop .ic{font-size:34px;margin-bottom:8px}
.drop b{display:block;font-size:14.5px;margin-bottom:4px}
.drop span{color:var(--tx3);font-size:12.5px}
.chk{background:var(--bg3);border-radius:10px;padding:12px 14px;margin-bottom:12px;font-size:13px}
.chk .ck{display:flex;gap:8px;padding:4px 0;align-items:flex-start;line-height:1.6}
.chk .ck i{font-style:normal;flex:none}
.chk .ok{color:var(--ok)} .chk .warn{color:#ffbe3c} .chk .bad{color:var(--hot)}
.chk .dim{color:var(--tx3)}
@media(max-width:640px){ .up{padding:8px 11px;font-size:12px} }

/* 스타일 예시 칩 — 빈 칸에 직접 쓰라고 하면 아무도 안 쓴다. 고르게 한다 */
.stypick{display:flex;gap:6px;flex-wrap:wrap;margin:-2px 0 10px}
.stypick button{padding:6px 12px;border-radius:15px;background:var(--bg3);color:var(--tx2);
  font-size:12px;font-weight:700;border:1px solid transparent}
.stypick button:hover{border-color:var(--ac);color:var(--tx)}
.stypick button.on{background:var(--ac);color:var(--onac)}

/* 동의 + 올리기 합친 버튼 */
.agree{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--tx3);
  line-height:1.6;margin:10px 0 4px}
.mbox .send.big{padding:14px;font-size:14.5px;margin-top:6px}
.mbox .send:disabled{background:var(--bg3);color:var(--tx3);cursor:not-allowed}

/* 댓글 프로필 사진은 아주 작게 — 대부분 기본 이미지라 크게 둘 이유가 없다 */
.ci em{color:var(--tx3);font-style:normal;font-size:11px;flex:none;font-variant-numeric:tabular-nums}
.rep img{width:16px;height:16px;margin-top:3px;opacity:.75}
.post .ph img{width:16px;height:16px}

/* 게시판 버튼 반응을 분명히 */
.pacts button{border:1px solid var(--line);background:var(--bg)}
.pacts button:hover{border-color:var(--ac);color:var(--tx)}
.pacts button.on{border-color:var(--hot);color:var(--hot);background:rgba(255,92,124,.08)}

/* 한 번만 뜨는 안내 */
.toast{position:fixed;left:50%;bottom:calc(var(--pbh) + 16px);transform:translateX(-50%);
  z-index:60;background:var(--bg3);border:1px solid var(--line);border-radius:11px;
  padding:11px 18px;font-size:13px;color:var(--tx2);box-shadow:0 8px 28px rgba(0,0,0,.5);
  max-width:calc(100vw - 36px);text-align:center;line-height:1.6}
.toast b{color:var(--ac)}

@media(max-width:860px){ #vol,#mute{display:none} }
@media(max-width:640px){ .opts{display:none} }

/* ── 모바일 (≤560px) ──
   헤더를 3분할(브랜드|업로드|탭)로 두면 375px 에서 서로 겹치고 탭 글자가 세로로 쪼개진다.
   → 2단으로 쌓는다. 위: 브랜드 + 업로드 / 아래: 탭(가로 스크롤). */
@media(max-width:560px){
  .hd{gap:7px;padding:8px 10px}
  .brand{font-size:15px;gap:6px}
  .brand img{width:24px;height:24px}
  .up .ring{width:36px;height:36px}
  .up .ring i{font-size:19px}
  .up em{font-size:9px}
  nav{margin-left:8px;gap:2px}
  nav button{padding:4px 7px;font-size:11.5px}
  .mebtn{width:26px;height:26px;margin-left:6px}

  main{padding:16px 12px 30px}
  .tabs button{padding:6px 12px;font-size:12px}
  .hint{font-size:11.5px}

  /* 행: 제목이 살아남도록 나머지를 조인다 */
  /* 제목이 "여..." 로 잘리지 않게 나머지 폭을 최대한 양보한다 */
  .row{gap:5px;padding:8px 6px;border-radius:12px}
  .rank{width:12px;font-size:12px}
  .artwrap{width:28px;height:28px}
  .tt{font-size:13.5px;gap:4px}
  .sb{font-size:10.5px}
  .q{width:14px;height:14px;font-size:9px}
  .bigplay{width:38px;height:38px;font-size:13px;margin-right:2px}
  .nums{min-width:28px;font-size:10px;gap:1px;margin-left:3px}
  .acts{gap:3px}
  .acts button{padding:6px 7px;font-size:10.5px;gap:2px;border-radius:14px}
  .wrap{padding:0 8px 9px;gap:6px}
  .wt{font-size:10px;min-width:26px}
  .wave{height:30px}
  .pop,.cpanel{margin-left:0;padding:11px 12px}
}

/* 내 음악 목록 (모달) */
.mine{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.mine:last-child{border-bottom:0}
.mine img{width:32px;height:32px;border-radius:50%;flex:none}
.mine .mi{flex:1;min-width:0}
.mine .mt{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mine .ms{color:var(--tx3);font-size:11.5px;margin-top:2px;display:flex;gap:6px;flex-wrap:wrap}
.mine .edit{padding:6px 12px;border-radius:8px;background:var(--bg3);font-size:12px;font-weight:700;flex:none}
.mine .edit:hover{background:var(--ac);color:var(--onac)}

/* ── 라이선스 배지 ── */
.lic{padding:2px 7px;border-radius:6px;font-size:9.5px;font-weight:800;flex:none;white-space:nowrap}
.lic.listen{background:var(--bg3);color:var(--tx3)}
.lic.credit{background:rgba(255,190,60,.16);color:#ffbe3c}
.lic.free{background:rgba(50,213,131,.16);color:var(--ok)}

/* 표기 문구 복사 */
.attrib{display:flex;gap:7px;align-items:center;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:6px 9px;margin-top:6px}
.attrib code{flex:1;min-width:0;font-size:11px;color:var(--tx2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-family:inherit}
.attrib button{padding:5px 11px;border-radius:7px;background:var(--bg3);font-size:11.5px;font-weight:700;flex:none}
.attrib button:hover{background:var(--ac);color:var(--onac)}

/* 업로드 — 라이선스 선택 */
.licpick{display:flex;flex-direction:column;gap:7px;margin:4px 0 10px}
.licopt{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:11px;
  border:1px solid var(--line);background:var(--bg);cursor:pointer;transition:.13s}
.licopt:hover{border-color:var(--ac)}
.licopt.on{border-color:var(--ac);background:rgba(42,218,255,.06)}
.licopt.lock{opacity:.45;cursor:not-allowed}
.licopt.lock:hover{border-color:var(--line)}
.licopt .dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);flex:none;margin-top:2px}
.licopt.on .dot{border-color:var(--ac);background:var(--ac);box-shadow:inset 0 0 0 3px var(--bg)}
.licopt .lb{flex:1;min-width:0}
.licopt .ln{font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:7px}
.licopt .ld{color:var(--tx3);font-size:11.5px;margin-top:3px;line-height:1.55}
.soon{background:var(--bg3);color:var(--tx3);padding:1px 7px;border-radius:6px;font-size:9.5px;font-weight:800}

/* 커버 아트 */
.cover{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.cover .cimg{width:66px;height:66px;border-radius:12px;object-fit:cover;flex:none;
  border:1px solid var(--line);background:var(--bg3)}
.cover .cb{flex:1;min-width:0}
.cover .cbtn{padding:7px 13px;border-radius:9px;background:var(--bg3);font-size:12.5px;font-weight:700}
.cover .cbtn:hover{background:var(--ac);color:var(--onac)}
.cover small{display:block;color:var(--tx3);font-size:11px;margin-top:5px;line-height:1.5}

/* 창작자 통계 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 16px}
.stat{background:var(--bg3);border-radius:11px;padding:12px;text-align:center}
.stat b{display:block;font-size:20px;font-weight:900;color:var(--ac);line-height:1.2}
.stat span{color:var(--tx3);font-size:11px}

/* ── 뉴스 카드 (자동 수집) ── */
.newscard{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:13px 15px;margin-bottom:9px}
.newscard .nh{display:flex;gap:7px;align-items:center;margin-bottom:7px;font-size:11.5px;color:var(--tx3);flex-wrap:wrap}
.newscard h4{font-size:14.5px;line-height:1.45;margin-bottom:6px}
.newscard .nb{font-size:13px;color:var(--tx2);line-height:1.65}
.newscard .nf{margin-top:9px;display:flex;gap:8px;align-items:center;font-size:11.5px;color:var(--tx3)}
.newscard .nf a{color:var(--ac);font-weight:700}
.kind.news{background:rgba(42,218,255,.14);color:var(--ac)}
.kind.contest{background:rgba(255,190,60,.16);color:#ffbe3c}

/* ── 창작자 대시보드 ── */
.dash{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 16px}
.dcell{background:var(--bg3);border-radius:11px;padding:13px 10px;text-align:center}
.dcell b{display:block;font-size:19px;font-weight:900;color:var(--ac);line-height:1.25}
.dcell span{color:var(--tx3);font-size:10.5px}
.toplist{margin:4px 0 14px}
.toprow{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:12.5px}
.toprow .tn{width:16px;color:var(--tx3);font-weight:800;flex:none}
.toprow .tl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toprow .tv{color:var(--ac);font-weight:800;flex:none}
.bar2{height:5px;background:var(--bg3);border-radius:3px;overflow:hidden;margin-top:4px}
.bar2 i{display:block;height:100%;background:var(--ac)}
@media(max-width:560px){ .dash{grid-template-columns:repeat(2,1fr)} }

/* 글쓰기 — 평소엔 접어둔다. 게시판 첫 화면이 입력폼으로 꽉 차면 읽을 게 안 보인다 */
.writeopen{width:100%;display:flex;align-items:center;gap:9px;padding:12px 14px;margin-bottom:12px;
  border:1px dashed var(--line);border-radius:13px;color:var(--tx3);font-size:13px;font-weight:700;
  background:var(--bg2);transition:.14s}
.writeopen:hover{border-color:var(--ac);color:var(--tx)}
.writeopen b{font-size:17px;font-weight:400}

/* 유튜브 */
.ytb{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  color:#ff4d4d;font-size:14px;background:var(--bg3);transition:.12s}
.ytb:hover{background:#ff2d2d;color:#fff;transform:scale(1.08)}
/* 영상이 없는 곡의 유튜브 버튼은 누를 수 없는 빈 자리일 뿐이다.
   좁은 화면에서 그 34px 이 만든 사람 이름과 전적을 밀어냈다 → 아예 안 그린다. */
.ytb.off{display:none}
/* 유튜브 약관: 플레이어는 최소 200x200 이상으로 보여야 하고 가리거나 오디오만 뽑으면 안 된다 */
.ytwrap{position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden;
  background:#000;margin-bottom:10px}
.ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 재생목록 */
.queue{position:fixed;right:16px;bottom:calc(var(--pbh) + 14px);z-index:55;width:300px;max-height:52vh;
  overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:9px;
  box-shadow:0 14px 44px rgba(0,0,0,.6)}
.qrow{display:flex;gap:9px;align-items:center;padding:7px 8px;border-radius:9px;cursor:pointer;font-size:12.5px}
.qrow:hover{background:var(--bg3)}
.qrow.on{color:var(--ac);font-weight:700}
.qrow img{width:24px;height:24px;border-radius:50%;flex:none}
.qrow .qt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){ .queue{left:12px;right:12px;width:auto} }

/* 라이선스 배지 = 곡 정보 버튼.
   ? 아이콘이 16px 이라 누르기 어려웠고, 라이선스 표시와 기능이 겹쳤다.
   둘을 합치면 클릭 영역이 커지고 "이 곡 써도 되나"가 더 잘 보인다. */
.licbtn{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:4px 10px;border-radius:14px;line-height:1;vertical-align:middle;
  font-size:10.5px;font-weight:800;border:1px solid transparent;transition:.12s;flex:none}
/* ⓘ 글자는 폰트 기준선이 낮아 아래로 처져 보인다 → 블록으로 띄우고 line-height 를 1 로 고정 */
.licbtn i{font-style:normal;opacity:.6;font-size:11px;line-height:1;display:block;transform:translateY(-.5px)}
.licbtn:hover{transform:translateY(-1px)}
.licbtn.listen{background:var(--bg3);color:var(--tx3)}
.licbtn.listen:hover{border-color:var(--tx3);color:var(--tx2)}
.licbtn.credit{background:rgba(255,190,60,.16);color:#d99a10}
.licbtn.credit:hover{border-color:#d99a10}
.licbtn.free{background:rgba(50,213,131,.16);color:var(--ok)}
.licbtn.free:hover{border-color:var(--ok)}

/* 스타일 드롭다운 (최대 3개) */
.styselect{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.styselect select{flex:1;min-width:140px;background:var(--bg);color:var(--tx);
  border:1px solid var(--line);border-radius:9px;padding:10px 11px;font-size:13.5px;outline:none}
.styselect select:focus{border-color:var(--ac)}
.stytags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;min-height:4px}
.stytag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:15px;
  background:var(--ac);color:var(--onac);font-size:12px;font-weight:800}
.stytag b{cursor:pointer;opacity:.7;font-weight:900}
.stytag b:hover{opacity:1}
.stycount{color:var(--tx3);font-size:11.5px}

/* 댓글 패널 헤더 (닫기) */
.cphead{display:flex;align-items:center;margin-bottom:8px}
.cphead b{font-size:12px;color:var(--tx3);font-weight:700}
.cpx{margin-left:auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  color:var(--tx3);font-size:15px}
.cpx:hover{background:var(--bg3);color:var(--tx)}

/* 더 보기 */
.more{width:100%;margin-top:10px;padding:12px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg2);color:var(--tx2);font-size:13px;font-weight:700;transition:.13s}
.more:hover{border-color:var(--ac);color:var(--ac)}

/* ── 차트 검색·필터 (전체곡 탭을 흡수) ── */
.findbar{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.findbar .srch{flex:1;min-width:0}

.findbar .cnt{color:var(--tx3);font-size:12px;flex:none;font-variant-numeric:tabular-nums}
.styrow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.styrow button{padding:5px 11px;border-radius:15px;background:var(--bg2);color:var(--tx2);
  font-size:11.5px;font-weight:700;border:1px solid var(--line)}
.styrow button:hover{border-color:var(--ac);color:var(--tx)}
.styrow button.on{background:var(--ac);color:var(--onac);border-color:var(--ac)}

/* 연승 */
/* 연승은 아트워크에 링으로 두른다.
   행은 가로로 길어 '가운데'라는 자리가 없고, 아트워크는 이미 원형이라
   프로필 테두리처럼 읽힌다. 무엇보다 가로 자리를 한 픽셀도 안 먹는다. */
.artwrap{position:relative;flex:none;width:38px;height:38px}
.artwrap .art{width:100%;height:100%}
.artwrap.fire::before{content:'';position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 0deg,#ff8a3d,#ffd166,#ff5c3d,#ffd166,#ff8a3d);
  animation:ringspin 3.4s linear infinite}
.artwrap.fire .art{position:relative;z-index:1;box-shadow:0 0 0 2px var(--bg)}
.artwrap .sn{position:absolute;right:-5px;bottom:-4px;z-index:2;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:#ff7a2d;color:#200c00;font-size:10px;font-weight:900;
  display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg);line-height:1;
  font-variant-numeric:tabular-nums}
@keyframes ringspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){ .artwrap.fire::before{animation:none} }

/* 전적 — Elo 숫자 대신 '12승 3패'. 설명이 필요 없는 표기다. */
.wl{color:var(--tx3);font-size:11px;font-weight:700;flex:none;font-variant-numeric:tabular-nums}
.wl b{color:#6ee7c4;font-weight:800}

/* 베타 */
.betachip{display:inline-block;padding:1px 6px;border-radius:5px;background:#ffbe3c;color:#2a1c00;
  font-size:9px;font-weight:900;margin-left:7px;vertical-align:middle;letter-spacing:.3px}

/* ── 검색창 ──
   빈 입력칸은 '여기 뭘 쓰라는 거지'로 읽힌다. 오른쪽 끝 돋보기가 한눈에 검색창임을 말해준다.
   왼쪽이 아니라 오른쪽인 이유: 한글을 치면 글자가 왼쪽부터 차서 왼쪽 아이콘은 곧 글자에 묻힌다. */
.srch{position:relative;display:block}
.srch input{width:100%;background:var(--bg2);color:var(--tx);border:1px solid var(--line);
  border-radius:10px;padding:10px 38px 10px 13px;font-size:13px;outline:none}
.srch input::placeholder{color:var(--tx3)}
.srch input:focus{border-color:var(--ac)}
.srch .sicon{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;fill:none;stroke:var(--tx3);stroke-width:2;stroke-linecap:round;
  pointer-events:none;transition:stroke .13s}
.srch input:focus ~ .sicon{stroke:var(--ac)}
#v-board .srch{margin-bottom:9px}

/* 기본 '감상용'은 아이콘만 — 34곡이 전부 같은 글자면 정보가 아니라 소음이다.
   대신 누를 수 있는 크기(26px)는 지킨다. */
.licbtn.bare{gap:3px;padding:3px 7px;opacity:.75}
.licbtn.bare:hover{opacity:1}

/* 대시보드: '12승 3패'는 숫자 하나보다 길어 한 칸에 안 들어간다 */
.dcell b.sm{font-size:15px;letter-spacing:-.3px}

/* ── 첫 화면 안내 ──
   베타 고지는 처음 들어온 사람만 한 번 보면 된다. 한 줄로 끝낸다. */
.gnote{margin:14px auto 0;padding:8px 13px;border-radius:9px;max-width:400px;
  background:rgba(255,190,60,.07);border:1px solid rgba(255,190,60,.2);
  color:#c9ab68;font-size:11px;line-height:1.5}

/* ── 설치 아이콘 (헤더) ──
   설치하면 통째로 사라진다. 그래서 브랜드 옆이 아니라 '음악 등록' 오른쪽에 뒀다 —
   여기서 사라지면 오른쪽 묶음이 살짝 당겨질 뿐, 로고 위치는 안 흔들린다. */
.inst{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--bg3);border:1px solid var(--line);color:var(--tx2);margin-right:9px;transition:.13s}
.inst svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.inst:hover{border-color:var(--ac);color:var(--ac)}
@media(max-width:520px){ .inst{width:26px;height:26px;margin-right:6px} .inst svg{width:14px;height:14px} }

/* ── 내 글 수정·삭제 ──
   내가 쓴 글을 내가 못 지우는 게시판은 쓰기가 무섭다. */
.pacts .own{margin-left:auto;display:flex;gap:4px}
.pacts .own button{color:var(--tx3);font-size:11px;padding:4px 8px;border-radius:7px}
.pacts .own button:hover{background:var(--bg3);color:var(--tx)}
.pacts .own button.del:hover{background:rgba(255,80,80,.14);color:#ff7b7b}
.pedit{margin:8px 0}
.pedit textarea{width:100%;background:var(--bg);color:var(--tx);border:1px solid var(--ac);
  border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.6;resize:vertical;
  font-family:inherit;outline:none}
.pedit .erow{display:flex;gap:6px;justify-content:flex-end;margin-top:6px}
.pedit .erow button{padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700}
.pedit .erow .save{background:var(--ac);color:var(--onac)}
.pedit .erow .cancel{background:var(--bg3);color:var(--tx2)}
.rep .rdel{margin-left:auto;color:var(--tx3);font-size:11px;padding:2px 7px;border-radius:6px;flex:none}
.rep .rdel:hover{background:rgba(255,80,80,.14);color:#ff7b7b}

/* ── 관리자 모드 ──
   🔴 여기서 하는 건 '숨기기'일 뿐 진짜 권한이 아니다. 브라우저 안의 값이라
      누구나 콘솔로 켤 수 있다. 진짜 권한은 서버가 붙어야 생긴다. */
.admbar{display:flex;gap:9px;align-items:center;background:rgba(255,80,80,.08);
  border:1px solid rgba(255,80,80,.28);border-radius:10px;padding:9px 12px;margin-bottom:12px;
  font-size:11.5px;color:#ff9b9b;line-height:1.5}
.admbar b{color:#ffbcbc}
.admbar .off{margin-left:auto;flex:none;padding:5px 11px;border-radius:8px;
  background:var(--bg3);color:var(--tx2);font-size:11px;font-weight:700}
.admbar .off:hover{color:var(--tx)}
.hidebtn{flex:none;padding:3px 9px;border-radius:7px;background:rgba(255,80,80,.12);
  color:#ff8f8f;font-size:10.5px;font-weight:800;border:1px solid rgba(255,80,80,.25)}
.hidebtn:hover{background:rgba(255,80,80,.22)}
.newscard .nh .hidebtn{margin-left:auto}
.row .hidebtn{margin-left:4px}
.admrow{display:flex;align-items:center;gap:8px;margin:9px 0 4px;color:var(--tx3);font-size:11.5px}
.admrow .num{color:var(--tx2);font-weight:800}
.admrow button{margin-left:auto;padding:5px 11px;border-radius:8px;background:var(--bg3);
  color:var(--tx2);font-size:11px;font-weight:700}
.admrow button:hover{color:var(--ac)}

/* 관리자가 숨긴 항목 — 관리자 화면에서만 보이고, 흐리게 해서 '내려간 상태'임을 알린다 */
.hidden-adm{opacity:.38}
.hidden-adm:hover{opacity:.7}

/* ── 좁은 화면 헤더 ──
   가운데 정렬(1fr/auto/1fr)은 양쪽 칸을 '넓은 쪽'에 맞춰 똑같이 벌린다.
   그래서 오른쪽 묶음이 조금만 두꺼워도 폭이 두 배로 먹히고, 375px 에서는
   오른쪽이 가운데 버튼 위로 넘어와 겹쳤다. 오른쪽만 깎으면 해결된다. */
@media(max-width:480px){
  .hd{gap:6px;padding:8px 8px}
  nav{gap:2px}
  nav button{padding:4px 5px;font-size:11.5px}
  .mebtn{width:26px;height:26px;margin-left:5px}
  .inst{margin-right:5px}
}
/* 320px 급 구형 폰에서는 오른쪽 묶음이 끝내 안 들어간다.
   가운데 정렬을 깨느니 설치 아이콘을 뺀다 — 크롬 자체 메뉴로도 설치할 수 있다. */
@media(max-width:345px){ .inst{display:none} }

/* ── 공유 버튼 (곡 정보 안) ── */
.sharebtn{width:100%;margin-top:9px;padding:9px;border-radius:9px;background:var(--bg3);
  color:var(--tx2);border:1px solid var(--line);font-size:11.5px;font-weight:700}
.sharebtn:hover{border-color:var(--ac);color:var(--ac)}

/* ── 스타일 한 번에 붙이기 ── */
.secsub{color:var(--tx3);font-size:11px;font-weight:600}
.bulk{background:var(--bg3);border-radius:12px;padding:11px;margin-bottom:14px}
.bpicks{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.bpicks button{padding:4px 10px;border-radius:14px;background:var(--bg2);color:var(--tx2);
  font-size:11.5px;font-weight:700;border:1px solid var(--line)}
.bpicks button:hover{border-color:var(--ac);color:var(--tx)}
.bpicks button.on{background:var(--ac);color:var(--onac);border-color:var(--ac)}
/* 곡이 34개라 다 펼치면 팝업이 끝없이 길어진다. 안에서만 스크롤한다. */
.bsongs{max-height:190px;overflow-y:auto;background:var(--bg);border-radius:9px;padding:5px}
.bsong{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;cursor:pointer}
.bsong:hover{background:var(--bg3)}
.bsong.on{background:rgba(56,214,232,.1)}
.bsong i{width:16px;height:16px;border-radius:4px;flex:none;border:1px solid var(--line);
  background:var(--bg2);display:grid;place-items:center;font-style:normal;font-size:10px;color:var(--onac)}
.bsong.on i{background:var(--ac);border-color:var(--ac)}
.bsong .bt{font-size:12.5px;color:var(--tx);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bsong .bs{font-size:10.5px;color:var(--tx3);flex:none}
.brow2{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.brow2 button{padding:7px 11px;border-radius:8px;background:var(--bg2);color:var(--tx3);
  font-size:11.5px;font-weight:700;border:1px solid var(--line)}
.brow2 button:hover{color:var(--tx)}
.brow2 .go{margin-left:auto;background:var(--ac);color:var(--onac);border-color:var(--ac)}
.brow2 .go[disabled]{opacity:.4;cursor:default;background:var(--bg2);color:var(--tx3);border-color:var(--line)}

/* 내 계정 번호 — 운영자 지정·곡 주인 지정에 필요하다. SQL 에 붙여넣는 값이라 복사 버튼을 둔다. */
.uidrow{display:flex;align-items:center;gap:8px;background:var(--bg3);border-radius:10px;
  padding:9px 11px;margin:10px 0 4px}
.uidrow b{color:var(--tx3);font-size:11px;font-weight:700;flex:none}
.uidrow code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;color:var(--tx2);font-family:ui-monospace,Menlo,Consolas,monospace}
.uidrow button{flex:none;padding:5px 11px;border-radius:7px;background:var(--bg2);
  color:var(--tx2);border:1px solid var(--line);font-size:11px;font-weight:700}
.uidrow button:hover{border-color:var(--ac);color:var(--ac)}