/* 배경음악 버튼 (헤더 오른쪽) */
.hd__right{display:flex;align-items:center;gap:22px}
.bgm{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 4px;background:none;border:0;color:var(--gold2);cursor:pointer;font-family:var(--en);font-size:13px;letter-spacing:.2em}
.bgm__bars{display:flex;align-items:flex-end;gap:3px;width:20px;height:16px}
.bgm__bars i{flex:1;height:3px;background:currentColor;border-radius:1px;transition:height .3s}
.bgm.on .bgm__bars i{animation:bgm-eq 1s ease-in-out infinite}
.bgm.on .bgm__bars i:nth-child(2){animation-delay:-.4s}
.bgm.on .bgm__bars i:nth-child(3){animation-delay:-.7s}
.bgm.on .bgm__bars i:nth-child(4){animation-delay:-.2s}
.bgm:not(.on) .bgm__t{opacity:.7}
.bgm:hover .bgm__t{opacity:1}
.bgm:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
@keyframes bgm-eq{0%,100%{height:3px}50%{height:16px}}
@media (max-width:1024px){
  .hd__right{gap:14px}
  .bgm{width:44px;justify-content:center;padding:0}
  .bgm__t{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bgm.on .bgm__bars i{animation:none;height:10px}
}
