/* 무디 배너 공통 모양 — TOP100(index.php)·플레이어(player.html)·영상 화면(mv.php)이 함께 쓴다. SUNO-1114-1206-65 */
.bn{position:relative;display:flex;align-items:center;gap:clamp(12px,2.4vw,24px);overflow:hidden;border-radius:12px;color:#f3eefc;text-decoration:none;
  background:radial-gradient(120% 160% at 85% 120%,#3b1f6e 0%,rgba(59,31,110,0) 55%),radial-gradient(90% 140% at 0% 0%,#1d1245 0%,rgba(29,18,69,0) 60%),#0c0720;
  border:1px solid #241a46;isolation:isolate;transition:border-color .2s,transform .2s}
.bn:hover{border-color:#5a3fa0}
.bn:active{transform:scale(.995)}
.bn-sky{position:absolute;inset:0;z-index:-1}
.bn-sky i{position:absolute;width:3px;height:3px;border-radius:50%;background:#e8dcff;opacity:.55;animation:tw 4s ease-in-out infinite}
.bn-sky i:nth-child(1){left:12%;top:24%}.bn-sky i:nth-child(2){left:38%;top:70%;animation-delay:1s;width:2px;height:2px}
.bn-sky i:nth-child(3){left:61%;top:18%;animation-delay:2s}.bn-sky i:nth-child(4){left:78%;top:62%;animation-delay:.5s;width:2px;height:2px}
.bn-sky i:nth-child(5){left:90%;top:30%;animation-delay:1.5s}
@keyframes tw{50%{opacity:.12}}
@media (prefers-reduced-motion:reduce){.bn-sky i{animation:none}}
.bn-moon{flex:none;width:clamp(30px,4.4vw,46px);height:clamp(30px,4.4vw,46px);fill:#f4e6c4;filter:drop-shadow(0 0 14px rgba(244,230,196,.45))}
.bn-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.bn-txt b{font-family:'Gowun Batang',serif;font-size:clamp(17px,2.6vw,26px);letter-spacing:.02em;white-space:nowrap}
.bn-txt span{font-size:clamp(12px,1.5vw,15px);color:#c9bde6;word-break:keep-all}
.bn-go{margin-left:auto;flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08)}
.bn-go svg{width:20px;height:20px;fill:currentColor}
.bn-wide{min-height:clamp(84px,11vw,120px);padding:16px clamp(16px,3vw,32px)}
.bn-mid{min-height:72px;padding:12px clamp(14px,2.4vw,24px)}
.bn-mid .bn-txt{flex-direction:row;align-items:baseline;gap:14px;flex-wrap:wrap}
.bn-mid .bn-txt b{font-size:clamp(15px,2vw,19px)}
.bn-tall{min-height:72px;padding:12px 16px}
@media (max-width:640px){
  .bn-go{display:none}
  .bn-mid .bn-txt{flex-direction:column;gap:2px}
}
/* 넓은 폭: 세로 배너(TOP100 표 옆·플레이어 바깥 옆자리) */
@media (min-width:1200px){
  .bn-tall{flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:520px;padding:28px 22px}
  .bn-tall .bn-moon{width:64px;height:64px;margin-bottom:auto}
  .bn-tall .bn-txt{gap:10px}
  .bn-tall .bn-txt b{font-size:24px}
  .bn-tall .bn-txt span{font-size:15px;line-height:1.6}
  .bn-tall .bn-go{margin:22px 0 0}
}