/* 설정(소리), 재생 단추·자동 재생 스위치·위쪽 줄 소리 단추.
   css/ 의 파일은 index.html 에서 번호 순서대로 겹쳐 적용된다(뒤 파일이 앞 파일을 덮는다). 순서를 바꾸지 말 것. */
/* ───── 설정: 소리 (끄기 단추 + 크기 막대) ───── */
#reader-settings .setting-sound {
  margin: 20px 0 0;
  padding: 14px;
  border: 1px solid #dce3d3;
  border-radius: 16px;
  background: #fff;
}
#reader-settings .setting-label {
  display: block;
  margin-bottom: 8px;
  font:
    18px/1.3 Jua,
    sans-serif;
}
#reader-settings .volume-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
#reader-settings .mute-button {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  min-height: 0;
  padding: 0;
  border: 1px solid #dce3d3;
  border-radius: 50%;
  background: #f2f5e9;
  color: #365941;
  cursor: pointer;
}
#reader-settings .mute-button .icon {
  width: 24px;
  height: 24px;
}
#reader-settings .mute-button .icon-off,
#reader-settings .is-muted .mute-button .icon-on {
  display: none;
}
#reader-settings .is-muted .mute-button .icon-off {
  display: block;
}
#reader-settings .is-muted .mute-button {
  background: #365941;
  border-color: #365941;
  color: #fff;
}
#reader-settings .mute-button:focus-visible {
  outline: 3px solid #664a9b;
  outline-offset: 3px;
}
#reader-settings input[type='range'] {
  flex: 1;
  min-width: 0;
  height: 32px;
  margin: 0;
  accent-color: #3e5c45;
  cursor: pointer;
}
#reader-settings input[type='range']:disabled {
  opacity: 0.4;
  cursor: default;
}
#reader-settings #volume-value {
  min-width: 3.2em;
  text-align: right;
  font-size: 15px;
  color: #59684f;
  font-variant-numeric: tabular-nums;
}
#reader-settings .is-muted #volume-value {
  opacity: 0.4;
}
#reader-settings #volume-note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #59684f;
}

/* ───── 재생 단추 하나와 자동 재생 스위치, 위쪽 줄 소리 단추 ───── */
#play-control[data-mode='resume'] {
  background: #365941;
  border-color: #365941;
  color: #fff;
}
#play-control[data-mode='resume']:hover:enabled {
  background: #2d4b37;
}
#play-control:disabled {
  opacity: 0.4;
  cursor: default;
}
#replay-control[hidden] {
  display: none;
}
.autoplay-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 48px;
  padding: 0 14px 0 8px;
  border: 1px solid #dce3d3;
  border-radius: 24px;
  background: #fff;
  font:
    16px/1 Jua,
    sans-serif;
  color: #365941;
  cursor: pointer;
  white-space: nowrap;
}
.autoplay-switch input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  margin: 0;
  border-radius: 12px;
  background: #cfd8c6;
  cursor: pointer;
  transition: background 0.15s;
}
.autoplay-switch input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px #0003;
  transition: transform 0.15s;
}
.autoplay-switch input:checked {
  background: #3e5c45;
}
.autoplay-switch input:checked::after {
  transform: translateX(16px);
}
.autoplay-switch:focus-within {
  outline: 3px solid #664a9b;
  outline-offset: 3px;
}
#gnb .gnb-end {
  gap: 8px;
}
.gnb-button.icon-only {
  width: 52px;
  padding: 0;
}
#sound-toggle .icon-off,
#sound-toggle.is-off .icon-on {
  display: none;
}
#sound-toggle.is-off .icon-off {
  display: block;
}
#sound-toggle.is-off {
  background: #fff3e8;
  border-color: #ecd2b8;
  color: #a0522d;
}
#sound-toggle.needs-tap {
  animation: call-out 1.4s ease-in-out infinite;
}
@media (max-width: 700px) {
  .gnb-button.icon-only {
    width: 46px;
  }
  .autoplay-switch {
    height: 44px;
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #sound-toggle.needs-tap {
    animation: none;
  }
}
.board.auto-playing #target {
  visibility: hidden;
}