.hero-sound {
  position: fixed; z-index: 101;
  top: max(20px, env(safe-area-inset-top)); right: max(28px, env(safe-area-inset-right));
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: rgb(25 23 21 / 26%); color: rgb(255 255 255 / 83%);
  border: 1px solid rgb(255 255 255 / 16%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility 0s .22s;
}
.hero-sound[hidden] { display: none; }
.hero-sound[data-visible] { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.hero-sound:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.hero-sound .sound-waves, .hero-sound[aria-pressed="true"] .sound-muted { display: none; }
.hero-sound[aria-pressed="true"] .sound-waves { display: inline; }
.hero-sound[data-playback="waiting"]::after {
  content: '소리 켜기'; position: absolute; right: calc(100% + 5px);
  padding: 4px 8px; white-space: nowrap; border-radius: 12px;
  background: rgb(25 23 21 / 55%); color: white; font: 12px/1.3 var(--sans);
}
@media (max-width: 650px) {
  .hero-sound { top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion: reduce) { .hero-sound { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-scene { background: center / cover url('assets/brinton-original-hero-v2-poster.webp'); }
  .hero-scene video { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 650px) {
  .hero-scene { background-image: url('assets/brinton-mobile-hero-v3-poster.webp'); }
}