/* 소리구미 — 공통 보조 스타일(디자인 본체는 각 페이지 인라인 스타일) */

/* 소리 토글 버튼 */
#sound-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  background: #FFFFFF;
  color: #3A3350;
  box-shadow: 0 10px 26px rgba(58, 51, 80, 0.22), inset 0 0 0 1.5px rgba(58, 51, 80, 0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
#sound-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(58, 51, 80, 0.26), inset 0 0 0 1.5px rgba(58, 51, 80, 0.12);
}
#sound-toggle:active { transform: translateY(0); }

/* 소리 버튼(홈 카드 ♪) 눌림 피드백 */
button[data-sound-char] { font-family: inherit; }
button[data-sound-char]:hover { transform: translateY(-2px); }
button[data-sound-char]:active { transform: translateY(0); }

/* 캐릭터 탭(characters.html) */
.char-tab { background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1.5px rgba(58, 51, 80, 0.1); }
.char-tab:hover { transform: translateY(-2px); }
.char-tab.is-active {
  background: #FFFFFF;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--c) 33%, transparent), inset 0 0 0 2px var(--c);
  transform: translateY(-2px);
}
/* 각 패널은 인라인 display:grid 를 가짐 → 비활성만 !important 로 숨김(인라인 이김) */
.char-panel:not(.is-active) { display: none !important; }

/* 좁은 화면: 헤더가 로고 줄 + 네비 줄로 깔끔히 감싸지게(데스크톱 미영향) */
@media (max-width: 560px) {
  body header {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 22px !important;
  }
  body header > a { white-space: nowrap !important; }
  body header nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px !important;
    font-size: 13px !important;
  }
  body header nav a { padding: 7px 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}