/* =====================================================================
   サウンド設定（ヘッダーのスピーカーボタン）
   ===================================================================== */
.snd-wrap{ position:relative; }
.snd-btn.is-off{ color:var(--text-tertiary); }
.snd-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:250px;
  padding:14px 14px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md, 5px);
  box-shadow:0 18px 40px -20px rgba(7,16,31,.45);
  display:flex;
  flex-direction:column;
  gap:4px;
  z-index:120;
}
.snd-panel[hidden]{ display:none; }
.snd-title{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  letter-spacing:.18em;
  color:var(--accent-signal);
  margin-bottom:4px;
}
.snd-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--border);
  font-size:13.5px;
  color:var(--text-primary);
  cursor:pointer;
}
.snd-row small{
  display:block;
  font-size:11px;
  color:var(--text-tertiary);
  margin-top:2px;
}
/* スイッチ */
.snd-switch{
  appearance:none; -webkit-appearance:none;
  flex:none;
  width:38px; height:22px;
  border-radius:11px;
  background:var(--surface-alt);
  border:1px solid var(--border);
  position:relative;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.snd-switch::after{
  content:"";
  position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%;
  background:var(--text-tertiary);
  transition:transform .2s ease, background .2s ease;
}
.snd-switch:checked{ background:var(--theme); border-color:var(--theme); }
.snd-switch:checked::after{ transform:translateX(16px); background:#fff; }
.snd-switch:focus-visible{ outline:2px solid var(--accent-signal); outline-offset:2px; }
.snd-vol input{ flex:1; max-width:130px; accent-color:var(--theme); }
.snd-mute{
  margin-top:8px;
  height:32px;
  border:1px solid var(--border);
  background:transparent;
  border-radius:3px;
  font:inherit;
  font-size:12.5px;
  color:var(--text-secondary);
  cursor:pointer;
}
.snd-mute:hover{ color:var(--text-primary); border-color:var(--text-tertiary); }

@media (max-width:640px){
  .header-actions{ gap:6px; }
  .header-actions .icon-btn{ width:36px; height:36px; }
  .snd-panel{ position:fixed; top:calc(var(--header-h) + 8px); right:12px; left:auto; width:min(260px, calc(100vw - 24px)); }
}