:root {
  --gomna-audio-bottom-bar-height: 60px;
  --gomna-audio-mini-height: 88px;
  --gomna-audio-safe-bottom: env(safe-area-inset-bottom, 0px);
  --gomna-audio-primary: var(--primary, #1a2a4a);
  --gomna-audio-gold: var(--gold, #c9a961);
  --gomna-audio-cream: var(--cream, #faf6ed);
  --gomna-audio-text: var(--text, #1a2a4a);
}

.gomna-audio-mini-player {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(var(--gomna-audio-bottom-bar-height, 60px) + env(safe-area-inset-bottom, 0px) + 12px);
  height: 58px;
  min-height: 58px;
  max-height: 60px;
  z-index: 910;
  width: min(calc(100vw - 44px), 520px);
  max-width: 520px;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(42, 26, 18, 0.54);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  color: var(--cream, #faf6ed);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(250, 246, 237, 0.20);
  border-radius: 18px;
  padding: 6px 9px;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  transform: translate(-50%, 110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.gomna-audio-mini-player.gomna-audio-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.gomna-audio-mini-player[hidden],
.gomna-audio-expanded-player[hidden] {
  display: none;
}

.gomna-audio-mini-info {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 38%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gomna-audio-mini-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  color: var(--cream, #faf6ed);
}

.gomna-audio-mini-preview {
  font-size: 10px;
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  color: rgba(250, 246, 237, 0.72);
}

.gomna-audio-mini-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: max-content;
}

.gomna-audio-mini-player-pc {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: min(380px, calc(100vw - 40px));
  max-width: 380px;
  z-index: 910;
  box-sizing: border-box;
  background: var(--gomna-audio-cream);
  color: var(--gomna-audio-primary);
  border-radius: 16px;
  border: 1px solid rgba(201, 169, 97, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 14px 16px;
  gap: 12px;
  align-items: center;
}

.gomna-audio-expanded-player {
  position: fixed;
  z-index: 920;
  background: var(--gomna-audio-cream);
  color: var(--gomna-audio-primary);
  border: 1px solid rgba(201, 169, 97, 0.25);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.gomna-audio-expanded-player.gomna-audio-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.gomna-audio-verse-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--gomna-audio-gold);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.gomna-audio-verse-button:hover,
.gomna-audio-verse-button:focus {
  background: transparent;
  color: var(--gomna-audio-gold);
  opacity: 0.82;
}

.gomna-audio-verse-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.gomna-audio-commentary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--gomna-audio-gold);
  background: transparent;
  border: 1px solid rgba(201, 169, 97, 0.65);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.gomna-audio-commentary-button:hover,
.gomna-audio-commentary-button:focus {
  background: var(--gomna-audio-gold);
  color: var(--gomna-audio-cream);
}

.gomna-audio-commentary-button.gomna-audio-commentary-button--active {
  background: var(--gomna-audio-gold);
  color: var(--gomna-audio-cream);
  border-color: var(--gomna-audio-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.22);
}

.commentary-tab.gomna-audio-commentary-tab--active {
  background: var(--gomna-audio-gold, #c9a961);
  color: var(--gomna-audio-cream, #faf6ed);
  border-color: var(--gomna-audio-gold, #c9a961);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.22);
}

.gomna-audio-commentary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.gomna-audio-commentary-header .gomna-audio-commentary-button {
  width: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--cream, #faf6ed);
  background: transparent;
  border-color: transparent;
  border-radius: 14px;
  box-shadow: none;
  opacity: 0.88;
}

.gomna-audio-commentary-header .gomna-audio-commentary-button:hover,
.gomna-audio-commentary-header .gomna-audio-commentary-button:focus {
  color: var(--cream, #faf6ed);
  background: rgba(255, 255, 255, 0.06);
  border-color: transparent;
  opacity: 1;
}

.gomna-audio-commentary-header .gomna-audio-commentary-button.gomna-audio-commentary-button--active {
  color: var(--cream, #faf6ed);
  background: rgba(201, 169, 97, 0.34);
  border-color: rgba(250, 246, 237, 0.24);
  box-shadow: inset 0 0 0 1px rgba(250, 246, 237, 0.16);
  opacity: 1;
}

.gomna-audio-commentary-header .gomna-audio-commentary-replay-button {
  min-width: 36px;
  padding-inline: 8px;
  font-size: 12px;
  opacity: 0.78;
}

.gomna-commentary-cue {
  display: inline;
  border-bottom: 1px dotted rgba(184, 117, 31, 0.75);
  background: rgba(201, 169, 97, 0.10);
  border-radius: 5px;
  padding: 1px 3px;
  cursor: pointer;
}

.gomna-commentary-cue:hover,
.gomna-commentary-cue:focus {
  background: rgba(201, 169, 97, 0.22);
  outline: none;
}

.gomna-commentary-cue.gomna-commentary-cue--active {
  border-bottom-style: solid;
  background: rgba(201, 169, 97, 0.32);
  box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.18);
}

.gomna-audio-reading {
  border-left: 3px solid var(--gomna-audio-gold);
  padding-left: 8px;
  background: rgba(201, 169, 97, 0.05);
  transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}

.gomna-audio-commentary-section--active {
  border: 2px solid rgba(201, 169, 97, 0.78);
  border-radius: 12px;
  background: rgba(201, 169, 97, 0.08);
  box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.12);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.gomna-audio-loading {
  opacity: 0.6;
  pointer-events: none;
  cursor: progress;
}

.gomna-audio-error {
  border-color: #d4574e;
  color: #d4574e;
}

body.gomna-audio-body-padding {
  padding-bottom: calc(var(--gomna-audio-bottom-bar-height, 60px) + var(--gomna-audio-mini-height, 88px) + env(safe-area-inset-bottom, 0px));
}

.gomna-audio-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--gomna-audio-bottom-bar-height, 60px) + var(--gomna-audio-mini-height, 88px) + env(safe-area-inset-bottom, 0px) + 16px);
  background: rgba(26, 42, 74, 0.95);
  color: #faf6ed;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  animation: gomna-audio-toast-in 0.3s ease;
  max-width: 90vw;
  text-align: center;
  pointer-events: none;
}

.gomna-audio-toast.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gomna-audio-btn-seek-back,
.gomna-audio-btn-seek-forward {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(250, 246, 237, 0.28);
  color: var(--cream, #faf6ed);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gomna-audio-btn-play-pause {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 999px;
  background: rgba(91, 42, 22, 0.96);
  color: var(--cream, #faf6ed);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.gomna-audio-btn-speed,
.gomna-audio-btn-expand {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(250, 246, 237, 0.28);
  color: var(--cream, #faf6ed);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

.gomna-audio-btn-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(26, 42, 74, 0.28);
  color: var(--gomna-audio-primary);
  cursor: pointer;
}

.gomna-audio-btn-speed {
  padding: 0;
  font-size: 11px;
}

.gomna-audio-btn-play-pause-big {
  width: 88px;
  height: 88px;
  min-width: 88px;
  min-height: 88px;
  border-radius: 999px;
  background: var(--gomna-audio-primary);
  color: var(--gomna-audio-cream);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 6px 20px rgba(26, 42, 74, 0.28);
}

.gomna-audio-mini-player button,
.gomna-audio-mini-player-pc button,
.gomna-audio-expanded-player button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.gomna-audio-mini-player button:focus-visible,
.gomna-audio-mini-player-pc button:focus-visible,
.gomna-audio-expanded-player button:focus-visible,
.gomna-audio-verse-button:focus-visible,
.gomna-audio-commentary-button:focus-visible {
  outline: 2px solid var(--gomna-audio-gold);
  outline-offset: 2px;
}

@keyframes gomna-audio-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 768px) {
  .gomna-audio-mini-player {
    display: flex;
  }

  .gomna-audio-expanded-player {
    left: 0;
    right: 0;
    bottom: 0;
    height: 70vh;
    max-height: 80vh;
    border-radius: 24px 24px 0 0;
    z-index: 920;
    box-sizing: border-box;
    padding: 20px 18px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
  }
}

@media (max-width: 480px) {
  .gomna-audio-mini-player {
    width: calc(100vw - 18px);
    max-width: none;
    height: 54px;
    min-height: 54px;
    max-height: 58px;
    padding: 5px 7px;
    gap: 4px;
    border-radius: 16px;
  }

  .gomna-audio-mini-info {
    max-width: 30%;
  }

  .gomna-audio-mini-preview {
    display: none;
  }

  .gomna-audio-mini-title {
    font-size: 12px;
  }

  .gomna-audio-mini-controls {
    gap: 3px;
  }

  .gomna-audio-btn-seek-back,
  .gomna-audio-btn-seek-forward,
  .gomna-audio-btn-speed,
  .gomna-audio-btn-expand {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    font-size: 10px;
  }

  .gomna-audio-btn-play-pause {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 17px;
  }
}

@media (min-width: 769px) {
  .gomna-audio-mini-player {
    left: 50%;
    right: auto;
    bottom: 28px;
    width: min(520px, calc(100vw - 48px));
    max-width: 520px;
    height: 58px;
    min-height: 58px;
    max-height: 60px;
    z-index: 910;
    border-radius: 18px;
    transform: translate(-50%, 20px);
  }

  .gomna-audio-mini-preview {
    display: block;
  }

  .gomna-audio-mini-player.gomna-audio-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }

  .gomna-audio-expanded-player {
    right: 20px;
    bottom: 110px;
    width: min(380px, calc(100vw - 40px));
    max-width: 380px;
    max-height: 70vh;
    border-radius: 16px;
    z-index: 920;
    box-sizing: border-box;
    padding: 20px;
    transform: translateY(20px);
  }

  .gomna-audio-toast {
    left: 50%;
    right: auto;
    bottom: calc(var(--gomna-audio-bottom-bar-height, 60px) + var(--gomna-audio-mini-height, 88px) + env(safe-area-inset-bottom, 0px) + 16px);
    transform: translateX(-50%);
    max-width: min(360px, 90vw);
  }

  body.gomna-audio-body-padding {
    padding-bottom: 0;
  }
}

[data-theme="light"] .gomna-audio-mini-player-pc,
[data-theme="light"] .gomna-audio-expanded-player {
  background: #faf6ed;
  color: #1a2a4a;
}

[data-theme="light"] .gomna-audio-mini-player {
  background: rgba(42, 26, 18, 0.54);
  color: var(--cream, #faf6ed);
  border-color: rgba(250, 246, 237, 0.20);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

[data-theme="dark"] .gomna-audio-mini-player-pc,
[data-theme="dark"] .gomna-audio-expanded-player {
  background: #1a2a4a;
  color: #faf6ed;
  border-color: rgba(201, 169, 97, 0.35);
}

[data-theme="dark"] .gomna-audio-mini-player {
  background: rgba(12, 18, 32, 0.58);
  color: var(--cream, #faf6ed);
  border-color: rgba(250, 246, 237, 0.18);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

[data-theme="dark"] .gomna-audio-mini-title {
  color: var(--cream, #faf6ed);
}

[data-theme="dark"] .gomna-audio-mini-preview {
  color: rgba(250, 246, 237, 0.72);
}

[data-theme="dark"] .gomna-audio-btn-seek-back,
[data-theme="dark"] .gomna-audio-btn-seek-forward,
[data-theme="dark"] .gomna-audio-btn-speed,
[data-theme="dark"] .gomna-audio-btn-expand {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(250, 246, 237, 0.28);
  color: var(--cream, #faf6ed);
}

[data-theme="dark"] .gomna-audio-btn-seek-back,
[data-theme="dark"] .gomna-audio-btn-seek-forward,
[data-theme="dark"] .gomna-audio-btn-speed,
[data-theme="dark"] .gomna-audio-btn-expand,
[data-theme="dark"] .gomna-audio-btn-close,
[data-theme="dark"] .gomna-audio-verse-button,
[data-theme="dark"] .gomna-audio-commentary-button {
  color: #faf6ed;
  border-color: rgba(201, 169, 97, 0.55);
}

[data-theme="dark"] .gomna-audio-btn-seek-back,
[data-theme="dark"] .gomna-audio-btn-seek-forward,
[data-theme="dark"] .gomna-audio-btn-speed,
[data-theme="dark"] .gomna-audio-btn-expand {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(250, 246, 237, 0.28);
  color: var(--cream, #faf6ed);
}

[data-theme="dark"] .gomna-audio-btn-play-pause-big {
  background: #faf6ed;
  color: #1a2a4a;
}

/* GOMNA AUDIO STRUCTURE FIT OVERRIDE */
.gomna-audio-mini-player {
  width: min(calc(100vw - 32px), var(--gomna-reader-width, 420px));
  max-width: var(--gomna-reader-width, 420px);
  left: 50%;
  right: auto;
  bottom: calc(var(--gomna-audio-bottom-bar-height, 60px) + env(safe-area-inset-bottom, 0px) + 10px);
  height: 56px;
  min-height: 56px;
  max-height: 58px;
  padding: 5px 8px;
  gap: 5px;
  border-radius: 17px;
  transform: translate(-50%, 110%);
  z-index: 910;
}

.gomna-audio-mini-player.gomna-audio-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.gomna-audio-expanded-player {
  z-index: 920;
}

.gomna-audio-toast {
  z-index: 10000;
}

.gomna-audio-mini-info {
  max-width: 38%;
}

.gomna-audio-mini-title {
  font-size: 12px;
  line-height: 1.12;
}

.gomna-audio-mini-preview {
  font-size: 10px;
  line-height: 1.12;
}

.gomna-audio-mini-controls {
  gap: 4px;
}

.gomna-audio-btn-seek-back,
.gomna-audio-btn-seek-forward,
.gomna-audio-btn-speed,
.gomna-audio-btn-expand {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  font-size: 10px;
}

.gomna-audio-btn-play-pause {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  font-size: 17px;
}

@media (max-width: 480px) {
  .gomna-audio-mini-player {
    width: calc(100vw - 18px);
    max-width: none;
    height: 54px;
    min-height: 54px;
    max-height: 56px;
  }

  .gomna-audio-mini-preview {
    display: none;
  }
}

@media (min-width: 769px) {
  .gomna-audio-mini-player {
    width: min(420px, calc(100vw - 48px));
    max-width: 420px;
    height: 56px;
    min-height: 56px;
    max-height: 58px;
    z-index: 910;
  }

  .gomna-audio-mini-preview {
    display: block;
  }
}

/* =========================================================
   GOMNA AUDIO BOTTOM BAR AUDIO MODE OVERRIDE
   오디오 재생 중 하단 말씀풀이 버튼 시각 경쟁 완화
   ========================================================= */

body.gomna-audio-body-padding .opt4-bottom-bar {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

body.gomna-audio-body-padding .opt4-bottom-commentary {
  opacity: 0.38;
  transform: scale(0.92);
  filter: saturate(0.75);
  box-shadow: none;
}

body.gomna-audio-body-padding .opt4-bottom-commentary:hover,
body.gomna-audio-body-padding .opt4-bottom-commentary:focus {
  opacity: 0.65;
  transform: scale(0.96);
}

body.gomna-audio-body-padding .opt4-bottom-prev,
body.gomna-audio-body-padding .opt4-bottom-next {
  opacity: 0.72;
}

/* =========================================================
   GOMNA OPT4 BOTTOM BAR SIZE FIT OVERRIDE
   하단 이전장/말씀풀이/다음장 바를 중앙 리더 화면 폭에 맞춤
   ========================================================= */

.opt4-bottom-bar {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(calc(100vw - 28px), 420px);
  max-width: 420px;
  padding: 8px 10px;
  gap: 8px;
  box-sizing: border-box;
  border-radius: 18px 18px 0 0;
}

.opt4-bottom-bar button {
  min-height: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1;
  box-sizing: border-box;
}

.opt4-bottom-prev,
.opt4-bottom-next {
  flex: 0.9 1 0;
  min-width: 0;
}

.opt4-bottom-commentary {
  flex: 1.1 1 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 480px) {
  .opt4-bottom-bar {
    width: calc(100vw - 18px);
    max-width: none;
    padding: 7px 8px;
    gap: 6px;
    border-radius: 16px 16px 0 0;
  }

  .opt4-bottom-bar button {
    min-height: 38px;
    height: 38px;
    padding: 0 9px;
    font-size: 13px;
    border-radius: 13px;
  }

  .opt4-bottom-commentary {
    flex: 1.05 1 0;
    font-size: 13px;
  }
}

/* =========================================================
   GOMNA AUDIO ACTIVE DOCK MODE OVERRIDE v13
   오디오 재생 중 하단 바 전체 후퇴 + 미니 플레이어 하단 도킹
   ========================================================= */

body.gomna-audio-body-padding .opt4-bottom-bar {
  transform: translate(-50%, calc(100% + env(safe-area-inset-bottom, 0px) + 12px));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.22s ease;
}

body.gomna-audio-body-padding .gomna-audio-mini-player {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}

@media (max-width: 480px) {
  body.gomna-audio-body-padding .gomna-audio-mini-player {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }
}

@media (min-width: 769px) {
  body.gomna-audio-body-padding .gomna-audio-mini-player {
    bottom: 24px;
  }
}

/* =========================================================
   GOMNA AUDIO CONTENT CLEARANCE OVERRIDE v14
   오디오 재생 중 본문이 미니 플레이어에 가려지지 않도록 하단 여백 확보
   ========================================================= */

body.gomna-audio-body-padding {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

body.gomna-audio-body-padding main.content {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 769px) {
  body.gomna-audio-body-padding {
    padding-bottom: 96px;
  }

  body.gomna-audio-body-padding main.content {
    padding-bottom: 96px;
  }
}

/* =========================================================
   GOMNA AUDIO SCROLL CLEARANCE OVERRIDE v15
   fixed 미니 플레이어가 본문을 가리지 않도록 실제 절 목록 하단 여백 확보
   ========================================================= */

body.gomna-audio-body-padding {
  padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

body.gomna-audio-body-padding main.content {
  padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

body.gomna-audio-body-padding .verse-list {
  padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

body.gomna-audio-body-padding .verse-list::after {
  content: "";
  display: block;
  height: calc(112px + env(safe-area-inset-bottom, 0px));
  flex: 0 0 auto;
}

@media (min-width: 769px) {
  body.gomna-audio-body-padding {
    padding-bottom: 112px;
  }

  body.gomna-audio-body-padding main.content,
  body.gomna-audio-body-padding .verse-list {
    padding-bottom: 112px;
    scroll-padding-bottom: 112px;
  }

  body.gomna-audio-body-padding .verse-list::after {
    height: 112px;
  }
}

/* =========================================================
   GOMNA AUDIO DOCK BACKDROP OVERRIDE v16
   fixed 미니 플레이어 뒤로 본문이 비쳐 보이지 않도록 하단 dock 배경층 추가
   ========================================================= */

body.gomna-audio-body-padding::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(104px + env(safe-area-inset-bottom, 0px));
  z-index: 905;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(250, 246, 237, 0.98) 0%,
      rgba(250, 246, 237, 0.94) 52%,
      rgba(250, 246, 237, 0.72) 78%,
      rgba(250, 246, 237, 0) 100%
    );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] body.gomna-audio-body-padding::after,
body[data-theme="dark"].gomna-audio-body-padding::after {
  background:
    linear-gradient(
      to top,
      rgba(18, 22, 32, 0.98) 0%,
      rgba(18, 22, 32, 0.92) 52%,
      rgba(18, 22, 32, 0.68) 78%,
      rgba(18, 22, 32, 0) 100%
    );
}

body.gomna-audio-body-padding .gomna-audio-mini-player {
  z-index: 910;
}

/* =========================================================
   GOMNA PREMIUM AUDIO BOTTOM UI OVERRIDE v17
   하단 말씀풀이 바 + 오디오 미니 플레이어 프리미엄 가독성/조화 개선
   ========================================================= */

/* 1. 오디오 미니 플레이어: 더 선명한 고급 dark dock */
.gomna-audio-mini-player {
  background: rgba(74, 67, 61, 0.88);
  color: #fff8ef;
  border: 1px solid rgba(255, 248, 239, 0.24);
  box-shadow:
    0 18px 42px rgba(20, 14, 10, 0.24),
    inset 0 1px 0 rgba(255, 248, 239, 0.10);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

/* 2. 미니 플레이어 텍스트: 흐릿한 흰색 대신 선명한 warm ivory */
.gomna-audio-mini-title {
  color: #fff8ef;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

.gomna-audio-mini-preview {
  color: rgba(255, 248, 239, 0.86);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* 3. 미니 플레이어 일반 버튼: 흐릿한 회색 원이 아니라 읽히는 ivory glass 버튼 */
.gomna-audio-btn-seek-back,
.gomna-audio-btn-seek-forward,
.gomna-audio-btn-speed,
.gomna-audio-btn-expand {
  background: rgba(255, 248, 239, 0.82);
  color: #4a2a1b;
  border: 1px solid rgba(255, 248, 239, 0.72);
  box-shadow:
    0 2px 8px rgba(20, 14, 10, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  font-weight: 700;
}

.gomna-audio-btn-seek-back:hover,
.gomna-audio-btn-seek-forward:hover,
.gomna-audio-btn-speed:hover,
.gomna-audio-btn-expand:hover,
.gomna-audio-btn-seek-back:focus,
.gomna-audio-btn-seek-forward:focus,
.gomna-audio-btn-speed:focus,
.gomna-audio-btn-expand:focus {
  background: rgba(255, 248, 239, 0.94);
  color: #3b2115;
}

/* 4. 재생 버튼: 중심 버튼은 깊은 갈색 + 선명한 크림 아이콘 */
.gomna-audio-btn-play-pause {
  background: linear-gradient(180deg, #7a3a20 0%, #5b2a16 100%);
  color: #fff8ef;
  border: 1px solid rgba(255, 248, 239, 0.18);
  box-shadow:
    0 8px 22px rgba(45, 20, 10, 0.34),
    inset 0 1px 0 rgba(255, 248, 239, 0.14);
  font-weight: 800;
}

/* 5. dock backdrop: 본문과 플레이어 사이를 더 깨끗하게 */
body.gomna-audio-body-padding::after {
  background:
    linear-gradient(
      to top,
      rgba(250, 246, 237, 1) 0%,
      rgba(250, 246, 237, 0.98) 46%,
      rgba(250, 246, 237, 0.82) 74%,
      rgba(250, 246, 237, 0) 100%
    );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 6. 하단 기본 바: 오디오 OFF 상태에서 본문 폭 기준 premium navigation */
.opt4-bottom-bar {
  background: rgba(255, 252, 246, 0.96);
  border: 1px solid rgba(201, 169, 97, 0.20);
  border-bottom: none;
  box-shadow:
    0 -10px 28px rgba(48, 32, 20, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.opt4-bottom-bar button {
  font-weight: 700;
  letter-spacing: -0.01em;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

/* 7. 이전장/다음장: 조용한 secondary 버튼 */
.opt4-bottom-prev,
.opt4-bottom-next {
  background: rgba(255, 255, 255, 0.72);
  color: rgba(58, 36, 24, 0.82);
  border: 1px solid rgba(201, 169, 97, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* 8. 가운데 말씀풀이: 중심이지만 과하지 않은 bronze 버튼 */
.opt4-bottom-commentary {
  background: linear-gradient(180deg, #d5a64a 0%, #c5912e 100%);
  color: #fff8ef;
  border: 1px solid rgba(120, 76, 24, 0.18);
  box-shadow:
    0 6px 14px rgba(154, 105, 35, 0.16),
    inset 0 1px 0 rgba(255, 248, 239, 0.22);
  text-shadow: 0 1px 1px rgba(76, 48, 18, 0.20);
}

.opt4-bottom-prev:hover,
.opt4-bottom-next:hover,
.opt4-bottom-commentary:hover,
.opt4-bottom-prev:focus,
.opt4-bottom-next:focus,
.opt4-bottom-commentary:focus {
  transform: translateY(-1px);
}

/* 9. 오디오 ON 상태: 하단 바는 주인공이 아니므로 완전히 후퇴 유지 */
body.gomna-audio-body-padding .opt4-bottom-bar {
  transform: translate(-50%, calc(100% + env(safe-area-inset-bottom, 0px) + 12px));
  opacity: 0;
  pointer-events: none;
}

/* 10. 다크 테마 대응 */
body[data-theme="dark"].gomna-audio-body-padding::after,
[data-theme="dark"] body.gomna-audio-body-padding::after {
  background:
    linear-gradient(
      to top,
      rgba(18, 22, 32, 1) 0%,
      rgba(18, 22, 32, 0.96) 46%,
      rgba(18, 22, 32, 0.76) 74%,
      rgba(18, 22, 32, 0) 100%
    );
}

[data-theme="dark"] .gomna-audio-mini-player,
body[data-theme="dark"] .gomna-audio-mini-player {
  background: rgba(34, 38, 46, 0.90);
  color: #fff8ef;
  border-color: rgba(255, 248, 239, 0.20);
}

[data-theme="dark"] .gomna-audio-mini-title,
body[data-theme="dark"] .gomna-audio-mini-title {
  color: #fff8ef;
}

[data-theme="dark"] .gomna-audio-mini-preview,
body[data-theme="dark"] .gomna-audio-mini-preview {
  color: rgba(255, 248, 239, 0.84);
}

[data-theme="dark"] .gomna-audio-btn-seek-back,
[data-theme="dark"] .gomna-audio-btn-seek-forward,
[data-theme="dark"] .gomna-audio-btn-speed,
[data-theme="dark"] .gomna-audio-btn-expand,
body[data-theme="dark"] .gomna-audio-btn-seek-back,
body[data-theme="dark"] .gomna-audio-btn-seek-forward,
body[data-theme="dark"] .gomna-audio-btn-speed,
body[data-theme="dark"] .gomna-audio-btn-expand {
  background: rgba(255, 248, 239, 0.84);
  color: #2b211c;
  border-color: rgba(255, 248, 239, 0.66);
}

/* 11. 모바일에서도 버튼이 읽히도록 대비 유지 */
@media (max-width: 480px) {
  .gomna-audio-mini-title {
    font-size: 12px;
    color: #fff8ef;
  }

  .gomna-audio-btn-seek-back,
  .gomna-audio-btn-seek-forward,
  .gomna-audio-btn-speed,
  .gomna-audio-btn-expand {
    background: rgba(255, 248, 239, 0.86);
    color: #4a2a1b;
    border-color: rgba(255, 248, 239, 0.70);
  }

  .opt4-bottom-bar {
    background: rgba(255, 252, 246, 0.97);
  }

  .opt4-bottom-bar button {
    font-size: 13px;
  }
}

/* =========================================================
   GOMNA PREMIUM REDUCTION OVERRIDE v18
   v17의 가독성은 유지하되 과한 장식을 덜어내는 최종 미세 조정
   ========================================================= */

/* 1. 미니 플레이어: 더 조용한 dark dock */
.gomna-audio-mini-player {
  background: rgba(70, 64, 58, 0.84);
  border-color: rgba(255, 248, 239, 0.18);
  box-shadow:
    0 12px 28px rgba(20, 14, 10, 0.18),
    inset 0 1px 0 rgba(255, 248, 239, 0.08);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
}

/* 2. 텍스트: 선명도는 유지하되 그림자 과함 제거 */
.gomna-audio-mini-title {
  color: #fff8ef;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.gomna-audio-mini-preview {
  color: rgba(255, 248, 239, 0.82);
}

/* 3. 보조 버튼: 너무 밝은 원형 버튼을 한 단계 차분하게 */
.gomna-audio-btn-seek-back,
.gomna-audio-btn-seek-forward,
.gomna-audio-btn-speed,
.gomna-audio-btn-expand {
  background: rgba(255, 248, 239, 0.70);
  color: #4a2a1b;
  border-color: rgba(255, 248, 239, 0.48);
  box-shadow:
    0 1px 4px rgba(20, 14, 10, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.gomna-audio-btn-seek-back:hover,
.gomna-audio-btn-seek-forward:hover,
.gomna-audio-btn-speed:hover,
.gomna-audio-btn-expand:hover,
.gomna-audio-btn-seek-back:focus,
.gomna-audio-btn-seek-forward:focus,
.gomna-audio-btn-speed:focus,
.gomna-audio-btn-expand:focus {
  background: rgba(255, 248, 239, 0.82);
  color: #3b2115;
}

/* 4. 재생 버튼: 중심성은 유지하되 광택과 그림자 절제 */
.gomna-audio-btn-play-pause {
  background: linear-gradient(180deg, #6f351e 0%, #572815 100%);
  color: #fff8ef;
  border-color: rgba(255, 248, 239, 0.14);
  box-shadow:
    0 6px 16px rgba(45, 20, 10, 0.26),
    inset 0 1px 0 rgba(255, 248, 239, 0.10);
}

/* 5. dock backdrop: 흰 영역을 줄이고 더 자연스럽게 */
body.gomna-audio-body-padding::after {
  height: calc(88px + env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(
      to top,
      rgba(250, 246, 237, 0.96) 0%,
      rgba(250, 246, 237, 0.90) 44%,
      rgba(250, 246, 237, 0.56) 72%,
      rgba(250, 246, 237, 0) 100%
    );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 6. 하단 기본 바: 오디오 OFF 상태도 조금 더 담백하게 */
.opt4-bottom-bar {
  background: rgba(255, 252, 246, 0.94);
  border-color: rgba(201, 169, 97, 0.16);
  box-shadow:
    0 -8px 20px rgba(48, 32, 20, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.60);
}

.opt4-bottom-prev,
.opt4-bottom-next {
  background: rgba(255, 255, 255, 0.66);
  color: rgba(58, 36, 24, 0.78);
  border-color: rgba(201, 169, 97, 0.14);
}

.opt4-bottom-commentary {
  background: linear-gradient(180deg, #cf9e40 0%, #bd8929 100%);
  color: #fff8ef;
  box-shadow:
    0 4px 10px rgba(154, 105, 35, 0.12),
    inset 0 1px 0 rgba(255, 248, 239, 0.18);
}

/* 7. 오디오 ON 상태에서는 하단 바 후퇴 계속 유지 */
body.gomna-audio-body-padding .opt4-bottom-bar {
  transform: translate(-50%, calc(100% + env(safe-area-inset-bottom, 0px) + 12px));
  opacity: 0;
  pointer-events: none;
}

/* 8. 다크 테마도 장식 강도 줄임 */
body[data-theme="dark"].gomna-audio-body-padding::after,
[data-theme="dark"] body.gomna-audio-body-padding::after {
  height: calc(88px + env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(
      to top,
      rgba(18, 22, 32, 0.96) 0%,
      rgba(18, 22, 32, 0.88) 44%,
      rgba(18, 22, 32, 0.54) 72%,
      rgba(18, 22, 32, 0) 100%
    );
}

[data-theme="dark"] .gomna-audio-mini-player,
body[data-theme="dark"] .gomna-audio-mini-player {
  background: rgba(32, 36, 44, 0.86);
  border-color: rgba(255, 248, 239, 0.16);
}

[data-theme="dark"] .gomna-audio-btn-seek-back,
[data-theme="dark"] .gomna-audio-btn-seek-forward,
[data-theme="dark"] .gomna-audio-btn-speed,
[data-theme="dark"] .gomna-audio-btn-expand,
body[data-theme="dark"] .gomna-audio-btn-seek-back,
body[data-theme="dark"] .gomna-audio-btn-seek-forward,
body[data-theme="dark"] .gomna-audio-btn-speed,
body[data-theme="dark"] .gomna-audio-btn-expand {
  background: rgba(255, 248, 239, 0.72);
  color: #2b211c;
  border-color: rgba(255, 248, 239, 0.44);
}

/* =========================================================
   GOMNA VERSE CARD NORMALIZE OVERRIDE v19
   절 카드 레이아웃/간격/액션 행을 하나의 카드 시스템으로 정리
   ========================================================= */

.verse-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.verse-item {
  width: 100%;
  padding: 16px 16px 14px;
  background: #fff;
  border: 1px solid rgba(213, 200, 187, 0.52);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(61, 40, 24, 0.04);
  box-sizing: border-box;
}

.verse-item:last-child {
  border-bottom: 1px solid rgba(213, 200, 187, 0.52);
}

.verse-top {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}

.verse-num {
  width: 36px;
  min-width: 36px;
  height: 36px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  box-sizing: border-box;
}

.verse-text {
  min-width: 0;
  padding-top: 1px;
  line-height: 1.72;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.verse-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-left: 52px;
  min-height: 30px;
  box-sizing: border-box;
}

.action-btn,
.gomna-audio-verse-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-width: 0;
  min-height: 30px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  box-sizing: border-box;
  white-space: nowrap;
  vertical-align: middle;
}

.action-btn {
  background: #fbf7f1;
  border: 1px solid rgba(213, 200, 187, 0.72);
  color: #3d2817;
}

.gomna-audio-verse-button {
  background: rgba(184, 134, 11, 0.08);
  border: 1px solid rgba(184, 134, 11, 0.20);
  color: #9a7209;
  box-shadow: none;
}

.gomna-audio-verse-button:hover,
.gomna-audio-verse-button:focus {
  background: rgba(184, 134, 11, 0.12);
  color: #8a6508;
}

.action-btn.fav-btn.active {
  background: #fff3e0;
  border-color: #ffb74d;
  color: #e65100;
}

@media (max-width: 480px) {
  .verse-list {
    gap: 8px;
  }

  .verse-item {
    padding: 14px 14px 13px;
    border-radius: 15px;
  }

  .verse-top {
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 10px;
  }

  .verse-num {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .verse-actions {
    gap: 6px;
    margin-top: 10px;
    padding-left: 48px;
    min-height: 28px;
  }

  .action-btn,
  .gomna-audio-verse-button {
    min-height: 28px;
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
  }
}

/* =========================================================
   GOMNA READER CARD ALIGNMENT OVERRIDE v20
   절 범위 카드 / 절 카드 / 하단 바의 중앙 정렬 기준 통일
   ========================================================= */

:root {
  --gomna-reader-card-width: 388px;
  --gomna-reader-card-side-gap: 32px;
}

/* 1. 절 목록 전체 기준 */
.verse-list {
  width: 100%;
  max-width: var(--gomna-reader-card-width, 388px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 2. 절 카드 폭/중앙축 통일 */
.verse-item {
  width: 100%;
  max-width: var(--gomna-reader-card-width, 388px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 3. 절 범위 카드: 실제 렌더링 선택자 기준 */
.verse-range-box {
  width: 100%;
  max-width: var(--gomna-reader-card-width, 388px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 4. 하단 기본 바도 같은 reader 축 기준으로 통일 */
.opt4-bottom-bar {
  width: min(calc(100vw - var(--gomna-reader-card-side-gap, 32px)), var(--gomna-reader-card-width, 388px));
  max-width: var(--gomna-reader-card-width, 388px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  box-sizing: border-box;
}

/* 5. 오디오 ON 상태의 하단 바 후퇴는 유지 */
body.gomna-audio-body-padding .opt4-bottom-bar {
  transform: translate(-50%, calc(100% + env(safe-area-inset-bottom, 0px) + 12px));
  opacity: 0;
  pointer-events: none;
}

/* 6. 모바일에서도 같은 축 유지 */
@media (max-width: 480px) {
  :root {
    --gomna-reader-card-side-gap: 32px;
  }

  .verse-list,
  .verse-item,
  .verse-range-box {
    width: 100%;
    max-width: 100%;
  }

  .opt4-bottom-bar {
    width: calc(100vw - var(--gomna-reader-card-side-gap, 32px));
    max-width: calc(100vw - var(--gomna-reader-card-side-gap, 32px));
  }
}

/* =========================================================
   GOMNA VERSE LIST PANEL OVERRIDE v21
   절을 독립 카드가 아닌 하나의 본문 패널 안 리스트 행으로 정리
   ========================================================= */

.verse-list {
  display: block;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(213, 200, 187, 0.52);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(61, 40, 24, 0.04);
}

.verse-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(245, 240, 235, 0.95);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 16px;
}

.verse-item:last-child {
  border-bottom: 0;
}

@media (max-width: 480px) {
  .verse-list {
    gap: 0;
    border-radius: 15px;
  }

  .verse-item {
    padding: 15px 14px;
  }
}

/* =========================================================
   GOMNA MINI PLAYER WIDTH ALIGN OVERRIDE v22
   오디오 미니 플레이어 폭을 본문 리스트 패널 폭과 맞춤
   ========================================================= */

:root {
  --gomna-reader-side-gap: var(--gomna-reader-card-side-gap, 32px);
}

body .gomna-audio-mini-player {
  width: min(calc(100vw - var(--gomna-reader-side-gap, 32px)), var(--gomna-reader-card-width, 388px));
  max-width: var(--gomna-reader-card-width, 388px);
  left: 50%;
  right: auto;
  transform: translate(-50%, var(--gomna-audio-mini-translate-y, 0));
  box-sizing: border-box;
}

/* visible 상태의 기존 transform 흐름 보존 */
body .gomna-audio-mini-player.gomna-audio-visible {
  transform: translate(-50%, 0);
}

/* hidden/transition 상태에서 기존 세로 이동 감각 유지 */
body .gomna-audio-mini-player:not(.gomna-audio-visible) {
  transform: translate(-50%, 16px);
}

/* 오디오 ON 상태에서도 같은 폭 유지 */
body.gomna-audio-body-padding .gomna-audio-mini-player {
  width: min(calc(100vw - var(--gomna-reader-side-gap, 32px)), var(--gomna-reader-card-width, 388px));
  max-width: var(--gomna-reader-card-width, 388px);
  left: 50%;
  right: auto;
}

/* 모바일에서도 본문 패널 폭과 동일 기준 */
@media (max-width: 480px) {
  :root {
    --gomna-reader-side-gap: var(--gomna-reader-card-side-gap, 32px);
  }

  body .gomna-audio-mini-player,
  body.gomna-audio-body-padding .gomna-audio-mini-player {
    width: calc(100vw - var(--gomna-reader-side-gap, 32px));
    max-width: calc(100vw - var(--gomna-reader-side-gap, 32px));
    left: 50%;
    right: auto;
  }
}

/* =========================================================
   GOMNA READER BOTTOM FINISH OVERRIDE v23
   오디오 ON 상태에서 본문 패널 하단이 잘려 보이지 않도록 마감 영역 정리
   ========================================================= */

/* 1. 오디오 ON 상태에서 실제 본문 흐름 아래에 충분한 마감 공간 확보 */
body.gomna-audio-body-padding main.content {
  padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
}

/* 2. 절 목록 패널 내부 끝에 조용한 하단 마감 공간 추가 */
body.gomna-audio-body-padding .verse-list {
  margin-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}

/* 3. 기존 spacer를 본문 패널의 하단 마감 영역처럼 사용 */
body.gomna-audio-body-padding .verse-list::after {
  content: "";
  display: block;
  height: calc(128px + env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(
      to bottom,
      rgba(255, 253, 248, 0) 0%,
      rgba(255, 253, 248, 0.78) 62%,
      rgba(255, 253, 248, 1) 100%
    );
}

/* 4. dock backdrop은 본문을 덮는 막이 아니라 하단 정리 영역처럼 더 낮게 깔리게 조정 */
body.gomna-audio-body-padding::after {
  height: calc(112px + env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(
      to top,
      rgba(250, 246, 237, 0.98) 0%,
      rgba(250, 246, 237, 0.92) 46%,
      rgba(250, 246, 237, 0.46) 76%,
      rgba(250, 246, 237, 0) 100%
    );
}

/* 5. 미니 플레이어는 기존 계층 유지 */
body.gomna-audio-body-padding .gomna-audio-mini-player {
  z-index: 910;
}

/* 6. 하단 기본 바 후퇴는 유지 */
body.gomna-audio-body-padding .opt4-bottom-bar {
  transform: translate(-50%, calc(100% + env(safe-area-inset-bottom, 0px) + 12px));
  opacity: 0;
  pointer-events: none;
}

/* 7. 모바일에서는 마감 공간을 과하지 않게 조정 */
@media (max-width: 480px) {
  body.gomna-audio-body-padding main.content {
    padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px));
  }

  body.gomna-audio-body-padding .verse-list {
    margin-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  body.gomna-audio-body-padding .verse-list::after {
    height: calc(118px + env(safe-area-inset-bottom, 0px));
  }

  body.gomna-audio-body-padding::after {
    height: calc(104px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================
   GOMNA BOTTOM FINISH REDUCTION OVERRIDE v24
   v23의 과한 하단 흰 마감 영역을 줄이고 자연스러운 최소 여백만 유지
   ========================================================= */

/* 1. 오디오 ON 상태에서 main.content 여백은 최소 안전 여백만 유지 */
body.gomna-audio-body-padding main.content {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

/* 2. .verse-list 아래 큰 외부 여백 제거 */
body.gomna-audio-body-padding .verse-list {
  margin-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* 3. 본문 패널 끝에 큰 흰 gradient를 만들지 말고, 투명한 최소 spacer만 둔다 */
body.gomna-audio-body-padding .verse-list::after {
  content: "";
  display: block;
  height: calc(72px + env(safe-area-inset-bottom, 0px));
  background: transparent;
}

/* 4. dock backdrop은 본문을 덮는 흰 막이 아니라 아주 낮은 하단 정리층만 */
body.gomna-audio-body-padding::after {
  height: calc(72px + env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(
      to top,
      rgba(250, 246, 237, 0.82) 0%,
      rgba(250, 246, 237, 0.48) 48%,
      rgba(250, 246, 237, 0) 100%
    );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* 5. 미니 플레이어 계층 유지 */
body.gomna-audio-body-padding .gomna-audio-mini-player {
  z-index: 910;
}

/* 6. 하단 기본 바 후퇴 유지 */
body.gomna-audio-body-padding .opt4-bottom-bar {
  transform: translate(-50%, calc(100% + env(safe-area-inset-bottom, 0px) + 12px));
  opacity: 0;
  pointer-events: none;
}

/* 7. 모바일에서는 더 과하지 않게 */
@media (max-width: 480px) {
  body.gomna-audio-body-padding main.content {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  body.gomna-audio-body-padding .verse-list {
    margin-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }

  body.gomna-audio-body-padding .verse-list::after {
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    background: transparent;
  }

  body.gomna-audio-body-padding::after {
    height: calc(66px + env(safe-area-inset-bottom, 0px));
    background:
      linear-gradient(
        to top,
        rgba(250, 246, 237, 0.78) 0%,
        rgba(250, 246, 237, 0.42) 48%,
        rgba(250, 246, 237, 0) 100%
      );
  }
}
/* =========================================================
   v25 audio mini player card finish override
   오디오 미니 플레이어 양쪽 마감 정리
========================================================= */

.gomna-mini-player {
  left: 50% !important;
  right: auto !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;

  width: calc(100% - 32px) !important;
  max-width: 1260px !important;
  min-height: 104px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;

  padding: 18px 28px !important;
  box-sizing: border-box !important;

  background: #3f3f3f !important;
  border-radius: 28px !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22) !important;

  overflow: visible !important;
  z-index: 9999 !important;
}

/* 왼쪽 본문 영역 */
.gomna-mini-player .audio-info,
.gomna-mini-player .mini-player-info,
.gomna-mini-player .player-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding-left: 0 !important;
}

/* 오른쪽 버튼 영역 */
.gomna-mini-player .audio-controls,
.gomna-mini-player .mini-player-controls,
.gomna-mini-player .player-controls {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  margin-left: auto !important;
}

/* 27절 동그라미 배지 정리 */
.gomna-mini-player .verse-badge,
.gomna-mini-player .audio-verse-badge,
.gomna-mini-player .current-verse-badge {
  position: absolute !important;
  top: -30px !important;
  left: 54px !important;

  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #b96557 !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}

/* 오른쪽 끝 빈 공간 줄이기 */
.gomna-mini-player > *:last-child {
  margin-right: 0 !important;
}

/* 모바일 화면 정리 */
@media (max-width: 768px) {
  .gomna-mini-player {
    width: calc(100% - 24px) !important;
    bottom: 12px !important;
    padding: 16px 18px !important;
    border-radius: 24px !important;
    gap: 14px !important;
  }

  .gomna-mini-player .verse-badge,
  .gomna-mini-player .audio-verse-badge,
  .gomna-mini-player .current-verse-badge {
    top: -24px !important;
    left: 28px !important;
    width: 62px !important;
    height: 62px !important;
  }
}

/* =========================================================
   v25 audio mini player card finish override - actual classes
   오디오 미니 플레이어 양쪽 마감 정리
========================================================= */

.gomna-audio-mini-player {
  left: 50% !important;
  right: auto !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;

  width: calc(100% - 32px) !important;
  max-width: 760px !important;
  min-height: 72px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;

  padding: 12px 18px !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
}

.gomna-audio-mini-player.gomna-audio-visible {
  transform: translate(-50%, 0) !important;
}

.gomna-audio-mini-player .gomna-audio-mini-info,
.gomna-audio-mini-player .audio-info,
.gomna-audio-mini-player .mini-player-info,
.gomna-audio-mini-player .player-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding-left: 0 !important;
}

.gomna-audio-mini-player .gomna-audio-mini-controls,
.gomna-audio-mini-player .audio-controls,
.gomna-audio-mini-player .mini-player-controls,
.gomna-audio-mini-player .player-controls {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-left: auto !important;
}

.gomna-audio-mini-player .verse-badge,
.gomna-audio-mini-player .audio-verse-badge,
.gomna-audio-mini-player .current-verse-badge {
  position: absolute !important;
  top: -18px !important;
  left: 28px !important;

  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #b96557 !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16) !important;
}

.gomna-audio-mini-player > *:last-child {
  margin-right: 0 !important;
}

@media (max-width: 768px) {
  .gomna-audio-mini-player {
    width: calc(100% - 24px) !important;
    max-width: 760px !important;
    bottom: 12px !important;
    padding: 10px 14px !important;
    border-radius: 20px !important;
    gap: 10px !important;
  }

  .gomna-audio-mini-player .gomna-audio-mini-controls,
  .gomna-audio-mini-player .audio-controls,
  .gomna-audio-mini-player .mini-player-controls,
  .gomna-audio-mini-player .player-controls {
    gap: 8px !important;
  }

  .gomna-audio-mini-player .verse-badge,
  .gomna-audio-mini-player .audio-verse-badge,
  .gomna-audio-mini-player .current-verse-badge {
    top: -14px !important;
    left: 20px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* =========================================================
   GOMNA MINI PLAYER WIDTH LOCK OVERRIDE v26
   fixed 미니 플레이어가 내용 폭으로 줄어들지 않도록 실제 폭 고정
   ========================================================= */

.gomna-audio-mini-player {
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: 760px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

.gomna-audio-mini-player.gomna-audio-visible {
  transform: translate(-50%, 0) !important;
}

@media (max-width: 768px) {
  .gomna-audio-mini-player {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
  }
}

/* =========================================================
   GOMNA MINI PLAYER MATCH BOTTOM BAR FINAL
   오디오 미니 플레이어 폭을 하단 말씀풀이 버튼 바와 맞춤
   ========================================================= */

.gomna-audio-mini-player {
  width: min(calc(100vw - var(--gomna-reader-side-gap, 24px)), var(--gomna-reader-card-width, 388px)) !important;
  max-width: var(--gomna-reader-card-width, 388px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box;
}

.gomna-audio-mini-player.gomna-audio-visible {
  transform: translate(-50%, 0) !important;
}

@media (max-width: 768px) {
  .gomna-audio-mini-player {
    width: min(calc(100vw - var(--gomna-reader-side-gap, 24px)), var(--gomna-reader-card-width, 388px)) !important;
    max-width: var(--gomna-reader-card-width, 388px) !important;
  }
}

/* =========================================================
   GOMNA VERSE BOTTOM GAP REDUCTION FINAL
   마지막 절 아래 본문 카드 내부 빈 공간 줄이기
   ========================================================= */

/* 오디오 ON 상태에서 31절 아래 카드 내부 빈 공간을 줄임 */
body.gomna-audio-body-padding .verse-list {
  padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
}

/* v24의 추가 spacer도 더 작게 줄임 */
body.gomna-audio-body-padding .verse-list::after {
  content: "";
  display: block;
  height: calc(32px + env(safe-area-inset-bottom, 0px));
  background: transparent;
}

/* 카드 바깥 여백도 너무 길지 않게 줄임 */
body.gomna-audio-body-padding .verse-list {
  margin-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* 본문 전체 하단 안전 여백은 최소 유지 */
body.gomna-audio-body-padding main.content {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 480px) {
  body.gomna-audio-body-padding .verse-list {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  body.gomna-audio-body-padding .verse-list::after {
    height: calc(28px + env(safe-area-inset-bottom, 0px));
    background: transparent;
  }

  body.gomna-audio-body-padding main.content {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================
   GOMNA FOOTER AUDIO GAP REDUCTION FINAL
   footer와 오디오 미니 플레이어 사이 하단 마감 정리
   ========================================================= */

/* 오디오 ON 상태에서 footer 아래 공간을 과하지 않게 줄임 */
body.gomna-audio-body-padding footer,
body.gomna-audio-body-padding .footer,
body.gomna-audio-body-padding .site-footer {
  margin-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* footer 위쪽은 본문과 너무 멀어지지 않게 조정 */
body.gomna-audio-body-padding footer,
body.gomna-audio-body-padding .footer,
body.gomna-audio-body-padding .site-footer {
  margin-top: 28px;
}

/* 전체 본문 하단 여백은 오디오 바가 가리지 않을 정도만 유지 */
body.gomna-audio-body-padding main.content {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 480px) {
  body.gomna-audio-body-padding footer,
  body.gomna-audio-body-padding .footer,
  body.gomna-audio-body-padding .site-footer {
    margin-top: 24px;
    margin-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  body.gomna-audio-body-padding main.content {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================
   GOMNA MINI PLAYER LOWER POSITION FINAL
   오디오 미니 플레이어를 살짝 아래로 내림
   ========================================================= */

body.gomna-audio-body-padding .gomna-audio-mini-player {
  bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}

/* =========================================================
   GOMNA EXPANDED AUDIO PLAYER PREMIUM SHEET
   확장 오디오 플레이어를 고급 bottom sheet UI로 정리
   ========================================================= */

.gomna-audio-expanded-player {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  width: min(calc(100vw - 24px), 420px) !important;
  max-width: 420px !important;
  max-height: min(82vh, 680px) !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 26px;
  border: 1px solid rgba(201, 169, 97, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, rgba(250, 246, 237, 0.98) 100%);
  color: #3d2818;
  box-shadow:
    0 -18px 44px rgba(42, 26, 18, 0.18),
    0 2px 12px rgba(42, 26, 18, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transform: translate(-50%, calc(100% + 24px)) !important;
  opacity: 0;
  pointer-events: none;
}

.gomna-audio-expanded-player.gomna-audio-visible {
  transform: translate(-50%, 0) !important;
  opacity: 1;
  pointer-events: auto;
}

.gomna-audio-expanded-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.gomna-audio-expanded-header h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #2f2018;
}

.gomna-audio-btn-close {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(201, 169, 97, 0.24);
  border-radius: 999px;
  background: rgba(255, 250, 242, 0.86);
  color: #6d4424;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.gomna-audio-expanded-info {
  padding: 14px 14px 15px;
  border: 1px solid rgba(201, 169, 97, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 250, 242, 0.88) 0%, rgba(246, 236, 219, 0.62) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.gomna-audio-expanded-title {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
  color: #9a7209;
  letter-spacing: -0.01em;
}

.gomna-audio-expanded-preview {
  font-size: 17px;
  line-height: 1.68;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #3d2818;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gomna-audio-expanded-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.gomna-audio-expanded-player button {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: 999px;
  background: rgba(255, 250, 242, 0.86);
  color: #56341d;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow:
    0 2px 8px rgba(61, 40, 24, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.gomna-audio-expanded-player button:hover,
.gomna-audio-expanded-player button:focus {
  background: rgba(255, 247, 234, 0.98);
  border-color: rgba(184, 134, 11, 0.34);
  color: #3d2818;
}

.gomna-audio-btn-play-pause-big {
  width: 76px;
  min-width: 76px;
  height: 76px;
  min-height: 76px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  border: 1px solid rgba(255, 248, 239, 0.22);
  border-radius: 999px;
  background: linear-gradient(180deg, #7a3f24 0%, #5b2b18 100%) !important;
  color: #fff8ef !important;
  font-size: 28px;
  box-shadow:
    0 10px 22px rgba(83, 42, 22, 0.28),
    inset 0 1px 0 rgba(255, 248, 239, 0.18);
}

.gomna-audio-expanded-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gomna-audio-option-group {
  padding: 13px;
  border: 1px solid rgba(201, 169, 97, 0.16);
  border-radius: 20px;
  background: rgba(255, 252, 246, 0.62);
}

.gomna-audio-option-group label {
  display: block;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
  color: #6d4424;
}

.gomna-audio-option-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(239, 225, 202, 0.62);
}

.gomna-audio-option-buttons button {
  flex: 1 1 auto;
  min-width: 68px;
  padding: 0 14px;
  white-space: nowrap;
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons button {
  min-width: 0;
  padding: 0 6px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.gomna-audio-expanded-player button[data-active="true"],
.gomna-audio-expanded-player button.gomna-audio-active {
  border-color: rgba(122, 63, 36, 0.35);
  background: linear-gradient(180deg, #c79a44 0%, #ad7925 100%);
  color: #fff8ef;
  box-shadow:
    0 5px 12px rgba(154, 105, 35, 0.18),
    inset 0 1px 0 rgba(255, 248, 239, 0.26);
}

.gomna-audio-mini-player {
  border-color: rgba(255, 248, 239, 0.22);
  background: rgba(66, 52, 42, 0.88);
}

@media (max-width: 480px) {
  .gomna-audio-expanded-player {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: min(86vh, 680px) !important;
    padding: 16px 13px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px;
    gap: 14px;
  }

  .gomna-audio-expanded-preview {
    font-size: 16px;
    line-height: 1.62;
  }

  .gomna-audio-expanded-controls {
    grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr);
    gap: 8px;
  }

  .gomna-audio-btn-play-pause-big {
    width: 68px;
    min-width: 68px;
    height: 68px;
    min-height: 68px;
  }

  .gomna-audio-expanded-player button {
    font-size: 13px;
  }

  .gomna-audio-option-buttons button {
    min-width: 0;
    flex: 1 1 calc(50% - 8px);
  }
}

@media (max-width: 480px) {
  body.gomna-audio-body-padding .gomna-audio-mini-player {
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* =========================================================
   GOMNA SPEED BUTTONS COMPACT ROW LOCK
   최종 적용: 선택 속도 큰 카드 제거 및 5개 버튼 노출 고정
   ========================================================= */

.gomna-audio-option-group:first-child .gomna-audio-option-buttons {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 5px !important;
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons button,
.gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
.gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
  order: 0 !important;
  grid-column: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 4px !important;
  flex-direction: row !important;
  gap: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"]::before,
.gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active::before {
  content: none !important;
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
.gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
  border-color: rgba(122, 63, 36, 0.35) !important;
  background: linear-gradient(180deg, #c79a44 0%, #ad7925 100%) !important;
  color: #fff8ef !important;
  box-shadow:
    0 4px 10px rgba(154, 105, 35, 0.16),
    inset 0 1px 0 rgba(255, 248, 239, 0.24) !important;
}

@media (max-width: 480px) {
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button,
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 2px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 360px) {
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   GOMNA TIMER COMPACT FIT FINAL
   모바일에서 "장 끝까지" 버튼까지 한 화면에 보이도록 타이머 영역 압축
   ========================================================= */

@media (max-width: 480px) {
  .gomna-audio-expanded-player {
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .gomna-audio-expanded-options {
    gap: 5px !important;
  }

  .gomna-audio-option-group {
    padding: 7px !important;
  }

  .gomna-audio-option-group:last-child {
    padding: 6px !important;
    margin-bottom: 0 !important;
  }

  .gomna-audio-option-group:last-child label {
    margin-bottom: 4px !important;
    font-size: 11px !important;
  }

  .gomna-audio-option-group:last-child .gomna-audio-option-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .gomna-audio-option-group:last-child .gomna-audio-option-buttons button {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 480px) and (max-height: 700px) {
  .gomna-audio-expanded-player {
    padding-top: 6px !important;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 4px !important;
  }

  .gomna-audio-option-group {
    padding: 6px !important;
  }

  .gomna-audio-option-group label,
  .gomna-audio-option-group:first-child label {
    margin-bottom: 4px !important;
  }

  .gomna-audio-option-group:last-child .gomna-audio-option-buttons button {
    min-height: 26px !important;
    height: 26px !important;
    font-size: 9.5px !important;
  }
}

/* =========================================================
   GOMNA EXPANDED PLAYER MOBILE COMPACT PRIORITY FINAL
   마지막 적용: 속도/목소리/타이머까지 한 화면에 압축
   ========================================================= */

@media (max-width: 480px) {
  .gomna-audio-expanded-player {
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 12px - env(safe-area-inset-bottom, 0px)) !important;
    gap: 7px !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }

  @supports (height: 100svh) {
    .gomna-audio-expanded-player {
      max-height: calc(100svh - 12px - env(safe-area-inset-bottom, 0px)) !important;
    }
  }

  .gomna-audio-expanded-info,
  .gomna-audio-option-group,
  .gomna-audio-option-group:first-child {
    padding: 8px !important;
    border-radius: 15px;
  }

  .gomna-audio-expanded-preview {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.4;
  }

  .gomna-audio-expanded-controls {
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) !important;
    gap: 6px;
  }

  .gomna-audio-btn-play-pause-big {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    font-size: 22px;
  }

  .gomna-audio-expanded-options {
    gap: 7px !important;
    padding-bottom: 0 !important;
  }

  .gomna-audio-option-group label,
  .gomna-audio-option-group:first-child label {
    margin-bottom: 6px !important;
    font-size: 12px;
    line-height: 1.1;
  }

  .gomna-audio-option-buttons,
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons,
  .gomna-audio-option-group:not(:first-child) .gomna-audio-option-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 0;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons {
    padding: 5px;
  }

  .gomna-audio-option-buttons button,
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button,
  .gomna-audio-option-group:not(:first-child) .gomna-audio-option-buttons button {
    min-width: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    line-height: 1;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
    order: 0 !important;
    grid-column: auto !important;
    min-height: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"]::before,
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active::before {
    content: none !important;
  }

  .gomna-audio-option-group:last-child {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 480px) and (max-height: 700px) {
  .gomna-audio-expanded-player {
    gap: 5px !important;
    padding-top: 8px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .gomna-audio-expanded-preview {
    line-clamp: 1;
    -webkit-line-clamp: 1;
    font-size: 13px;
    line-height: 1.32;
  }

  .gomna-audio-expanded-info,
  .gomna-audio-option-group,
  .gomna-audio-option-group:first-child {
    padding: 7px !important;
  }

  .gomna-audio-option-buttons button,
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button,
  .gomna-audio-option-group:not(:first-child) .gomna-audio-option-buttons button {
    min-height: 30px !important;
    height: 30px !important;
    font-size: 10.5px !important;
  }
}

/* =========================================================
   GOMNA SPEED BUTTONS COMPACT ROW FINAL
   "현재 속도" 큰 카드 제거, 5개 속도 버튼을 compact row로 표시
   ========================================================= */

.gomna-audio-option-group:first-child .gomna-audio-option-buttons {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 5px !important;
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons button,
.gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
.gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
  order: 0 !important;
  grid-column: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 4px !important;
  flex-direction: row !important;
  gap: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"]::before,
.gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active::before {
  content: none !important;
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
.gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
  border-color: rgba(122, 63, 36, 0.35) !important;
  background: linear-gradient(180deg, #c79a44 0%, #ad7925 100%) !important;
  color: #fff8ef !important;
  box-shadow:
    0 4px 10px rgba(154, 105, 35, 0.16),
    inset 0 1px 0 rgba(255, 248, 239, 0.24) !important;
}

@media (max-width: 480px) {
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button,
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 2px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 360px) {
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   GOMNA EXPANDED PLAYER MOBILE COMPACT FIT FINAL
   모바일에서 스크롤 없이 전체 구조가 한 화면에 들어오도록 압축
   ========================================================= */

@media (max-width: 480px) {
  .gomna-audio-expanded-player {
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px - env(safe-area-inset-bottom, 0px)) !important;
    gap: 7px !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  @supports (height: 100svh) {
    .gomna-audio-expanded-player {
      max-height: calc(100svh - 12px - env(safe-area-inset-bottom, 0px)) !important;
    }
  }

  .gomna-audio-expanded-header {
    min-height: 32px;
    gap: 8px;
  }

  .gomna-audio-expanded-header h3 {
    font-size: 16px;
  }

  .gomna-audio-btn-close {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    font-size: 15px;
  }

  .gomna-audio-expanded-info {
    padding: 8px 10px;
    border-radius: 15px;
  }

  .gomna-audio-expanded-title {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.2;
  }

  .gomna-audio-expanded-preview {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.4;
  }

  .gomna-audio-expanded-controls {
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    gap: 6px;
  }

  .gomna-audio-expanded-player button {
    min-height: 34px;
    font-size: 12px;
  }

  .gomna-audio-btn-play-pause-big {
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    font-size: 22px;
  }

  .gomna-audio-expanded-options {
    gap: 7px;
    padding-bottom: 0;
  }

  .gomna-audio-option-group {
    padding: 8px;
    border-radius: 15px;
  }

  .gomna-audio-option-group label,
  .gomna-audio-option-group:first-child label {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.1;
  }

  .gomna-audio-option-group:first-child label::after {
    padding: 2px 7px;
    font-size: 10px;
  }

  .gomna-audio-option-buttons,
  .gomna-audio-option-group:not(:first-child) .gomna-audio-option-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
    border-radius: 16px;
  }

  .gomna-audio-option-buttons button,
  .gomna-audio-option-group:not(:first-child) .gomna-audio-option-buttons button,
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button {
    min-width: 0;
    min-height: 32px;
    height: 32px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
    order: 0;
    grid-column: auto;
    min-height: 34px;
    height: 34px;
    gap: 0;
    font-size: 12px;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"]::before,
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active::before {
    content: none;
  }

  .gomna-audio-option-group:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 480px) and (max-height: 700px) {
  .gomna-audio-expanded-player {
    gap: 5px !important;
    padding-top: 8px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .gomna-audio-expanded-preview {
    line-clamp: 1;
    -webkit-line-clamp: 1;
    font-size: 13px;
    line-height: 1.32;
  }

  .gomna-audio-expanded-info,
  .gomna-audio-option-group {
    padding: 7px;
  }

  .gomna-audio-option-buttons button,
  .gomna-audio-option-group:not(:first-child) .gomna-audio-option-buttons button,
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button {
    min-height: 30px;
    height: 30px;
    font-size: 10.5px;
  }
}

/* =========================================================
   GOMNA EXPANDED PLAYER MOBILE SAFE HEIGHT FINAL
   최종 override: 모바일 하단 타이머 영역 잘림 방지
   ========================================================= */

.gomna-audio-expanded-player {
  max-height: min(calc(100dvh - 28px), 680px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
}

@supports (height: 100svh) {
  .gomna-audio-expanded-player {
    max-height: min(calc(100svh - 28px), 680px) !important;
  }
}

.gomna-audio-expanded-options {
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}

.gomna-audio-option-group:last-child {
  margin-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 480px) {
  .gomna-audio-expanded-player {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 18px - env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  @supports (height: 100svh) {
    .gomna-audio-expanded-player {
      max-height: calc(100svh - 18px - env(safe-area-inset-bottom, 0px)) !important;
    }
  }

  .gomna-audio-expanded-options {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .gomna-audio-option-group:last-child {
    margin-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================
   GOMNA SPEED CONTROL PREMIUM TUNE
   기존 속도 로직은 유지하고 현재 속도가 잘 보이는 UI로 정리
   ========================================================= */

.gomna-audio-expanded-player {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.995) 0%, rgba(250, 246, 237, 0.995) 100%);
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
}

.gomna-audio-option-group:first-child {
  padding: 15px;
  border-color: rgba(184, 134, 11, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 250, 242, 0.92) 0%, rgba(246, 236, 219, 0.78) 100%);
}

.gomna-audio-option-group:first-child label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #4a2a1b;
  font-size: 14px;
}

.gomna-audio-option-group:first-child label::after {
  content: "재생 속도";
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(184, 134, 11, 0.10);
  color: #9a7209;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 22px;
  background: rgba(239, 225, 202, 0.72);
  box-shadow:
    inset 0 1px 2px rgba(61, 40, 24, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.58);
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons button {
  min-height: 46px;
  border: 1px solid rgba(201, 169, 97, 0.18);
  background: rgba(255, 252, 246, 0.86);
  color: #5f3a21;
  font-size: 14px;
  font-weight: 850;
  box-shadow:
    0 1px 5px rgba(61, 40, 24, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
.gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
  order: -1;
  grid-column: 1 / -1;
  min-height: 64px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-color: rgba(122, 63, 36, 0.38);
  background:
    linear-gradient(180deg, #c99b42 0%, #a97522 100%);
  color: #fff8ef;
  font-size: 22px;
  letter-spacing: -0.02em;
  box-shadow:
    0 8px 18px rgba(154, 105, 35, 0.20),
    inset 0 1px 0 rgba(255, 248, 239, 0.30);
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"]::before,
.gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active::before {
  content: "현재 속도";
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  color: rgba(255, 248, 239, 0.84);
  letter-spacing: -0.01em;
}

.gomna-audio-option-group:not(:first-child) .gomna-audio-option-buttons {
  gap: 9px;
}

.gomna-audio-option-group:not(:first-child) .gomna-audio-option-buttons button {
  min-height: 46px;
  color: #54321e;
}

.gomna-audio-option-group:last-child {
  margin-bottom: 8px;
}

@media (max-width: 480px) {
  .gomna-audio-option-group:first-child {
    padding: 13px;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    padding: 7px;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button {
    min-height: 46px;
    font-size: 13px;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
    min-height: 62px;
    font-size: 21px;
  }

  .gomna-audio-option-group:last-child {
    margin-bottom: 12px;
  }
}

/* =========================================================
   GOMNA MINI PLAYER POSITION TUNE v31
   오디오 미니 플레이어를 살짝 위로 올림
   ========================================================= */

body.gomna-audio-body-padding .gomna-audio-mini-player {
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 480px) {
  body.gomna-audio-body-padding .gomna-audio-mini-player {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* =========================================================
   GOMNA MINI PLAYER POSITION RESTORE
   오디오 미니 플레이어를 다시 살짝 아래로 내림
   ========================================================= */

body.gomna-audio-body-padding .gomna-audio-mini-player {
  bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 480px) {
  body.gomna-audio-body-padding .gomna-audio-mini-player {
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* =========================================================
   GOMNA SPEED BUTTONS COMPACT ROW TRUE FINAL
   파일 끝 최종 적용: 선택 속도 큰 카드 제거 및 5개 버튼 노출 고정
   ========================================================= */

.gomna-audio-option-group:first-child .gomna-audio-option-buttons {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 5px !important;
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons button,
.gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
.gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
  order: 0 !important;
  grid-column: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 4px !important;
  flex-direction: row !important;
  gap: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"]::before,
.gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active::before {
  content: none !important;
}

.gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
.gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
  border-color: rgba(122, 63, 36, 0.35) !important;
  background: linear-gradient(180deg, #c79a44 0%, #ad7925 100%) !important;
  color: #fff8ef !important;
  box-shadow:
    0 4px 10px rgba(154, 105, 35, 0.16),
    inset 0 1px 0 rgba(255, 248, 239, 0.24) !important;
}

@media (max-width: 480px) {
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button,
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 2px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 360px) {
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   GOMNA TIMER COMPACT FIT TRUE FINAL
   파일 끝 최종 적용: "장 끝까지" 버튼 잘림 방지
   ========================================================= */

@media (max-width: 480px) {
  .gomna-audio-expanded-player {
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .gomna-audio-expanded-options {
    gap: 5px !important;
  }

  .gomna-audio-option-group {
    padding: 7px !important;
  }

  .gomna-audio-option-group:last-child {
    padding: 6px !important;
    margin-bottom: 0 !important;
  }

  .gomna-audio-option-group:last-child label {
    margin-bottom: 4px !important;
    font-size: 11px !important;
  }

  .gomna-audio-option-group:last-child .gomna-audio-option-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .gomna-audio-option-group:last-child .gomna-audio-option-buttons button {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 480px) and (max-height: 700px) {
  .gomna-audio-expanded-player {
    padding-top: 6px !important;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 4px !important;
  }

  .gomna-audio-option-group {
    padding: 6px !important;
  }

  .gomna-audio-option-group label,
  .gomna-audio-option-group:first-child label {
    margin-bottom: 4px !important;
  }

  .gomna-audio-option-group:last-child .gomna-audio-option-buttons button {
    min-height: 26px !important;
    height: 26px !important;
    font-size: 9.5px !important;
  }
}


/* =========================================================
   GOMNA EXPANDED PLAYER BELOW RANGE MOBILE FINAL
   모바일에서 절 범위 선택 박스 바로 아래에 오디오 카드를 배치
   ========================================================= */

@media (max-width: 480px) {
  .gomna-audio-expanded-player {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    margin: 8px 0 10px !important;
    gap: 5px !important;
    padding: 8px 9px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 18px !important;
    transform: none !important;
    overflow: visible !important;
  }

  .gomna-audio-expanded-player.gomna-audio-visible {
    transform: none !important;
  }

  @supports (height: 100svh) {
    .gomna-audio-expanded-player {
      max-height: none !important;
    }
  }

  .gomna-audio-expanded-header {
    min-height: 28px !important;
  }

  .gomna-audio-expanded-header h3 {
    font-size: 15px !important;
  }

  .gomna-audio-btn-close {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 14px !important;
  }

  .gomna-audio-expanded-info,
  .gomna-audio-option-group,
  .gomna-audio-option-group:first-child {
    padding: 6px !important;
    border-radius: 13px !important;
  }

  .gomna-audio-expanded-title {
    margin-bottom: 2px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  .gomna-audio-expanded-preview {
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px !important;
    line-height: 1.28 !important;
  }

  .gomna-audio-expanded-controls {
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .gomna-audio-btn-play-pause-big {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    font-size: 20px !important;
  }

  .gomna-audio-expanded-options {
    gap: 5px !important;
    padding-bottom: 0 !important;
  }

  .gomna-audio-option-group label,
  .gomna-audio-option-group:first-child label,
  .gomna-audio-option-group:last-child label {
    margin-bottom: 3px !important;
    font-size: 10.5px !important;
    line-height: 1.05 !important;
  }

  .gomna-audio-option-group:first-child label::after {
    padding: 1px 6px !important;
    font-size: 9.5px !important;
  }

  .gomna-audio-option-buttons,
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons,
  .gomna-audio-option-group:not(:first-child) .gomna-audio-option-buttons,
  .gomna-audio-option-group:last-child .gomna-audio-option-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 0 !important;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    padding: 3px !important;
  }

  .gomna-audio-option-buttons button,
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button,
  .gomna-audio-option-group:not(:first-child) .gomna-audio-option-buttons button,
  .gomna-audio-option-group:last-child .gomna-audio-option-buttons button {
    min-height: 25px !important;
    height: 25px !important;
    padding: 0 3px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
    order: 0 !important;
    grid-column: auto !important;
    min-height: 25px !important;
    height: 25px !important;
    font-size: 9.5px !important;
  }

  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"]::before,
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active::before {
    content: none !important;
  }

  .gomna-audio-option-group:last-child {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 360px) {
  .gomna-audio-option-group:first-child .gomna-audio-option-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   GOMNA EXPANDED PLAYER INLINE MOBILE FINAL
   모바일에서는 절 범위 박스 다음 DOM 요소로 배치
   ========================================================= */

@media (max-width: 480px) {
  .gomna-audio-expanded-player {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    max-height: none !important;
    height: auto !important;
    margin: 8px 0 10px !important;
    transform: none !important;
    overflow: visible !important;
  }

  .gomna-audio-expanded-player.gomna-audio-visible {
    transform: none !important;
  }

  @supports (height: 100svh) {
    .gomna-audio-expanded-player {
      max-height: none !important;
    }
  }
}

body.gomna-audio-expanded-open .gomna-audio-expanded-player,
body.gomna-audio-expanded-open .gomna-audio-expanded-player.gomna-audio-visible {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.gomna-audio-expanded-open #verseRangeBoxBtn {
  margin-bottom: 0 !important;
}

body.gomna-audio-expanded-open #verseList {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   GOMNA MINI PLAYER CONTROL BUTTON SIZE FINAL
   카드 크기는 유지하고 하단 미니 플레이어 원형 버튼만 확대
   ========================================================= */

.gomna-audio-mini-player .gomna-audio-mini-controls {
  gap: 4px !important;
}

.gomna-audio-mini-player .gomna-audio-btn-seek-back,
.gomna-audio-mini-player .gomna-audio-btn-seek-forward,
.gomna-audio-mini-player .gomna-audio-btn-speed,
.gomna-audio-mini-player .gomna-audio-btn-expand {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.gomna-audio-mini-player .gomna-audio-btn-play-pause {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 999px !important;
  font-size: 19px !important;
  line-height: 1 !important;
}

@media (max-width: 360px) {
  .gomna-audio-mini-player .gomna-audio-mini-controls {
    gap: 3px !important;
  }

  .gomna-audio-mini-player .gomna-audio-btn-seek-back,
  .gomna-audio-mini-player .gomna-audio-btn-seek-forward,
  .gomna-audio-mini-player .gomna-audio-btn-speed,
  .gomna-audio-mini-player .gomna-audio-btn-expand {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 11px !important;
  }

  .gomna-audio-mini-player .gomna-audio-btn-play-pause {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    font-size: 18px !important;
  }
}

/* =========================================================
   GOMNA COMMENTARY AUDIO ACTIONS FINAL
   말씀풀이 오디오 액션 버튼 위치/톤 정리
   ========================================================= */

.gomna-audio-commentary-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
}

.gomna-audio-commentary-header .gomna-audio-commentary-button,
.gomna-audio-commentary-header .gomna-audio-commentary-sequence-button {
  width: auto;
  min-width: 0;
  min-height: 34px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(122, 88, 48, 0.22);
  background: rgba(255, 250, 242, 0.84);
  color: #2b2118;
  box-shadow: none;
  opacity: 1;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.gomna-audio-commentary-header .gomna-audio-commentary-button:hover,
.gomna-audio-commentary-header .gomna-audio-commentary-button:focus,
.gomna-audio-commentary-header .gomna-audio-commentary-sequence-button:hover,
.gomna-audio-commentary-header .gomna-audio-commentary-sequence-button:focus {
  background: rgba(239, 225, 202, 0.92);
  border-color: rgba(122, 88, 48, 0.32);
  color: #2b2118;
  box-shadow: none;
}

.gomna-audio-commentary-header .gomna-audio-commentary-button.gomna-audio-commentary-button--active,
.gomna-audio-commentary-header .gomna-audio-commentary-sequence-button.gomna-audio-commentary-tab--active {
  background: linear-gradient(180deg, #d8b866 0%, #caa34d 100%);
  border-color: rgba(95, 58, 25, 0.24);
  color: #2b2118;
  box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.16);
}

.gomna-audio-commentary-header .gomna-audio-commentary-replay-button,
.gomna-audio-commentary-header .gomna-audio-commentary-sequence-button {
  padding-inline: 11px;
}

.commentary-tab.gomna-audio-commentary-tab--active {
  background: rgba(216, 184, 102, 0.22);
  color: #2b2118;
  border-color: rgba(122, 88, 48, 0.22);
  box-shadow: none;
}

.gomna-audio-commentary-section--active {
  border: 1px solid rgba(201, 169, 97, 0.48);
  border-radius: 12px;
  background: rgba(201, 169, 97, 0.06);
  box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.08);
}

/* =========================================================
   GOMNA COMMENTARY POPUP PREMIUM REDESIGN
   quiet luxury 말씀풀이 팝업 UI 정리
   ========================================================= */

#commentaryPopup {
  background:
    radial-gradient(circle at 50% 8%, rgba(250, 242, 226, 0.18), transparent 42%),
    rgba(31, 24, 18, 0.42) !important;
  backdrop-filter: blur(18px) saturate(108%);
  -webkit-backdrop-filter: blur(18px) saturate(108%);
}

#commentaryPopupBox {
  max-width: min(92vw, 760px) !important;
  border: 1px solid rgba(122, 88, 48, 0.16) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.99) 0%, rgba(248, 241, 230, 0.99) 100%) !important;
  color: #2b2118 !important;
  box-shadow:
    0 24px 58px rgba(31, 24, 18, 0.18),
    0 2px 12px rgba(31, 24, 18, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  overflow: hidden !important;
}

#commentaryPopup .popup-drag-header {
  padding: 20px 22px 18px !important;
  background:
    linear-gradient(180deg, rgba(253, 248, 239, 0.98), rgba(244, 234, 218, 0.96)) !important;
  border-bottom: 1px solid rgba(122, 88, 48, 0.12) !important;
  border-radius: 26px 26px 0 0 !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.52) !important;
}

#commentaryPopup #commentaryTitle {
  color: #1f1a17 !important;
  font-size: 20px !important;
  line-height: 1.18 !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
}

#commentaryPopup .popup-drag-header #commentaryTitle + div {
  margin-top: 5px !important;
  color: rgba(51, 38, 29, 0.72) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
}

#commentaryPopup .popup-drag-header button[onclick*="closeCommentary"] {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid rgba(122, 88, 48, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 242, 0.82) !important;
  color: #33261d !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  box-shadow:
    0 2px 8px rgba(42, 30, 20, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

#commentaryPopup .popup-drag-header button[onclick*="closeCommentary"]:hover,
#commentaryPopup .popup-drag-header button[onclick*="closeCommentary"]:focus {
  background: rgba(239, 225, 202, 0.78) !important;
  border-color: rgba(122, 88, 48, 0.24) !important;
}

#commentaryContent {
  padding: 22px !important;
  background: transparent !important;
  color: #2b2118 !important;
}

#commentaryContent .commentary-verse-ref {
  margin-bottom: 16px !important;
  padding: 7px !important;
  border: 1px solid rgba(122, 88, 48, 0.14) !important;
  border-radius: 18px !important;
  background: rgba(255, 250, 242, 0.82) !important;
  color: #2b2118 !important;
  box-shadow:
    0 3px 12px rgba(61, 40, 24, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

#commentaryContent .commentary-nav-arrow,
#commentaryContent .commentary-nav-pick,
#commentaryContent .commentary-nav-btn {
  min-height: 38px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: #33261d !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
}

#commentaryContent .commentary-nav-arrow {
  width: 42px !important;
  height: 42px !important;
  font-size: 16px !important;
}

#commentaryContent .commentary-nav-pick {
  padding: 8px 12px !important;
  font-size: 15px !important;
}

#commentaryContent .commentary-nav-pick-caret {
  color: rgba(51, 38, 29, 0.56) !important;
}

#commentaryContent .commentary-nav-arrow:hover:not(:disabled),
#commentaryContent .commentary-nav-pick:hover,
#commentaryContent .commentary-nav-btn:hover:not(:disabled),
#commentaryContent .commentary-nav-arrow:focus:not(:disabled),
#commentaryContent .commentary-nav-pick:focus,
#commentaryContent .commentary-nav-btn:focus:not(:disabled) {
  background: rgba(239, 225, 202, 0.56) !important;
  border-color: rgba(122, 88, 48, 0.12) !important;
  color: #1f1a17 !important;
}

#commentaryContent .commentary-nav-arrow:disabled,
#commentaryContent .commentary-nav-btn:disabled {
  color: rgba(51, 38, 29, 0.32) !important;
  opacity: 1 !important;
}

#commentaryContent .commentary-tabs {
  justify-content: flex-start !important;
  gap: 7px !important;
  margin: 0 0 16px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid rgba(122, 88, 48, 0.10) !important;
}

#commentaryContent .commentary-tab {
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(122, 88, 48, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 242, 0.72) !important;
  color: #33261d !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  letter-spacing: -0.015em !important;
}

#commentaryContent .commentary-tab:hover,
#commentaryContent .commentary-tab:focus {
  background: rgba(239, 225, 202, 0.72) !important;
  border-color: rgba(122, 88, 48, 0.24) !important;
  color: #1f1a17 !important;
}

#commentaryContent .commentary-tab.active,
#commentaryContent .commentary-tab.gomna-audio-commentary-tab--active {
  border-color: rgba(95, 58, 25, 0.24) !important;
  background: rgba(211, 184, 126, 0.34) !important;
  color: #1f1a17 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38) !important;
}

#commentaryContent .tab-content {
  padding: 0 !important;
  color: #2b2118 !important;
}

#commentaryContent .tab-content > div:first-child {
  display: flex !important;
  align-items: center !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 1px solid rgba(122, 88, 48, 0.13) !important;
  border-bottom: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  background: rgba(244, 234, 218, 0.72) !important;
  color: #2b2118 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

#commentaryContent .commentary-table {
  margin: 0 0 14px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(122, 88, 48, 0.13) !important;
  border-radius: 0 0 16px 16px !important;
  overflow: hidden !important;
  background: rgba(255, 253, 248, 0.92) !important;
  color: #2b2118 !important;
  font-size: 14px !important;
  box-shadow: 0 3px 14px rgba(61, 40, 24, 0.035) !important;
}

#commentaryContent .commentary-table th {
  padding: 12px 12px !important;
  border-bottom: 1px solid rgba(122, 88, 48, 0.11) !important;
  background: rgba(250, 246, 237, 0.88) !important;
  color: #33261d !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

#commentaryContent .commentary-table td {
  padding: 14px 12px !important;
  border-bottom: 1px solid rgba(122, 88, 48, 0.09) !important;
  background: rgba(255, 253, 248, 0.95) !important;
  color: #2b2118 !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
  font-weight: 520 !important;
  vertical-align: top !important;
}

#commentaryContent .commentary-table tr:nth-child(odd) td,
#commentaryContent .commentary-table tr:nth-child(even) td {
  background: rgba(255, 253, 248, 0.95) !important;
}

#commentaryContent .commentary-table tr:last-child td {
  border-bottom: 0 !important;
}

#commentaryContent .commentary-table .col1 {
  color: #33261d !important;
  font-weight: 780 !important;
}

#commentaryContent .commentary-table .col2,
#commentaryContent .commentary-table .col3 {
  color: rgba(43, 33, 24, 0.9) !important;
}

#commentaryContent .commentary-table .col3 {
  font-weight: 620 !important;
}

#commentaryContent .commentary-bottom-nav {
  gap: 8px !important;
  margin-top: 16px !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid rgba(122, 88, 48, 0.10) !important;
}

#commentaryContent .commentary-bottom-nav .commentary-nav-btn {
  margin: 0 !important;
  min-height: 40px !important;
  border-color: rgba(122, 88, 48, 0.14) !important;
  background: rgba(255, 250, 242, 0.72) !important;
  color: #33261d !important;
}

#commentaryContent .gomna-audio-commentary-header {
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 1px 0 !important;
}

#commentaryContent .gomna-audio-commentary-header .gomna-audio-commentary-button,
#commentaryContent .gomna-audio-commentary-header .gomna-audio-commentary-sequence-button {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(122, 88, 48, 0.17) !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 242, 0.78) !important;
  color: #2b2118 !important;
  box-shadow: 0 2px 9px rgba(61, 40, 24, 0.035) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -0.015em !important;
}

#commentaryContent .gomna-audio-commentary-header .gomna-audio-commentary-button:hover,
#commentaryContent .gomna-audio-commentary-header .gomna-audio-commentary-button:focus,
#commentaryContent .gomna-audio-commentary-header .gomna-audio-commentary-sequence-button:hover,
#commentaryContent .gomna-audio-commentary-header .gomna-audio-commentary-sequence-button:focus {
  background: rgba(239, 225, 202, 0.76) !important;
  border-color: rgba(122, 88, 48, 0.28) !important;
  color: #1f1a17 !important;
}

#commentaryContent .gomna-audio-commentary-header .gomna-audio-commentary-button.gomna-audio-commentary-button--active,
#commentaryContent .gomna-audio-commentary-header .gomna-audio-commentary-sequence-button.gomna-audio-commentary-tab--active {
  background: rgba(211, 184, 126, 0.38) !important;
  border-color: rgba(95, 58, 25, 0.25) !important;
  color: #1f1a17 !important;
  box-shadow:
    0 0 0 2px rgba(201, 169, 97, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

#commentaryContent .gomna-audio-commentary-section--active {
  border: 1px solid rgba(201, 169, 97, 0.38) !important;
  border-radius: 18px !important;
  background: rgba(250, 246, 237, 0.48) !important;
  box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.07) !important;
}

#commentaryContent .gomna-commentary-cue {
  border-bottom: 1px solid rgba(122, 88, 48, 0.34) !important;
  border-radius: 6px !important;
  background: rgba(211, 184, 126, 0.16) !important;
  color: #2b2118 !important;
  padding: 1px 4px !important;
}

#commentaryContent .gomna-commentary-cue:hover,
#commentaryContent .gomna-commentary-cue:focus,
#commentaryContent .gomna-commentary-cue.gomna-commentary-cue--active {
  border-bottom-color: rgba(95, 58, 25, 0.58) !important;
  background: rgba(211, 184, 126, 0.28) !important;
  box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.10) !important;
  outline: none !important;
}

#commentaryPopup .popup-close {
  min-height: 46px !important;
  border: 1px solid rgba(122, 88, 48, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 242, 0.86) !important;
  color: #2b2118 !important;
  box-shadow:
    0 2px 10px rgba(61, 40, 24, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  font-weight: 850 !important;
}

#commentaryPopup .popup-close:hover,
#commentaryPopup .popup-close:focus {
  background: rgba(239, 225, 202, 0.78) !important;
  border-color: rgba(122, 88, 48, 0.28) !important;
  color: #1f1a17 !important;
}

@media (max-width: 480px) {
  #commentaryPopupBox {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    border-radius: 22px !important;
  }

  #commentaryPopup .popup-drag-header {
    padding: 17px 16px 15px !important;
    border-radius: 22px 22px 0 0 !important;
  }

  #commentaryPopup #commentaryTitle {
    font-size: 18px !important;
  }

  #commentaryContent {
    padding: 16px !important;
  }

  #commentaryContent .commentary-tabs {
    gap: 6px !important;
    margin-bottom: 14px !important;
    padding-bottom: 14px !important;
  }

  #commentaryContent .commentary-tab {
    min-height: 34px !important;
    padding: 0 11px !important;
    font-size: 11.5px !important;
  }

  #commentaryContent .commentary-table {
    font-size: 13px !important;
  }

  #commentaryContent .commentary-table th,
  #commentaryContent .commentary-table td {
    padding: 11px 9px !important;
    font-size: 13px !important;
    line-height: 1.62 !important;
  }

  #commentaryContent .gomna-audio-commentary-header .gomna-audio-commentary-button,
  #commentaryContent .gomna-audio-commentary-header .gomna-audio-commentary-sequence-button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 11px !important;
    font-size: 11.5px !important;
  }
}

/* =========================================================
   GOMNA COMMENTARY POPUP MOBILE SAFE AREA
   iPhone/Android Safari 하단 잘림 방지
   ========================================================= */

#commentaryPopup.show {
  z-index: 950 !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(14px, calc(env(safe-area-inset-bottom) + 10px))
    max(10px, env(safe-area-inset-left)) !important;
}

/* 연관구절/교차참조 클릭 시 구절 팝업이 말씀풀이(950)·미니플레이어(970) 위에 보이도록 */
#versePopup.show {
  z-index: 980 !important;
}

#commentaryPopupBox {
  display: flex !important;
  flex-direction: column !important;
  width: min(92vw, 760px) !important;
  max-width: min(92vw, 760px) !important;
  max-height: min(92vh, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)) !important;
  box-sizing: border-box !important;
}

@supports (height: 100dvh) {
  #commentaryPopupBox {
    max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)) !important;
  }
}

@supports (height: 100svh) {
  #commentaryPopupBox {
    max-height: min(92svh, calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)) !important;
  }
}

#commentaryPopup .popup-drag-header {
  flex: 0 0 auto !important;
}

#commentaryContent {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

#commentaryPopupBox > div:last-child {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  padding:
    10px 20px calc(14px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(122, 88, 48, 0.08) !important;
  background: rgba(255, 253, 248, 0.96) !important;
  box-sizing: border-box !important;
}

#commentaryPopup .popup-close {
  margin: 0 !important;
}

@media (max-width: 768px) {
  #commentaryPopup.show {
    padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)) !important;
  }

  #commentaryPopupBox {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    max-height: min(
      94vh,
      calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 18px)
    ) !important;
  }

  @supports (height: 100dvh) {
    #commentaryPopupBox {
      max-height: min(
        94dvh,
        calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 18px)
      ) !important;
    }
  }

  #commentaryPopupBox > div:last-child {
    padding:
      12px 16px calc(18px + env(safe-area-inset-bottom) + 10px) !important;
  }
}

/* =========================================================
   GOMNA COMMENTARY POPUP CONTROLS REFINEMENT
   하단 오디오 컨트롤 중심 배치
   ========================================================= */

#commentaryPopup .popup-drag-header {
  position: relative !important;
  display: block !important;
  cursor: default !important;
  padding: 22px 24px 18px !important;
  text-align: center !important;
}

#commentaryPopup .popup-drag-header > div:first-child,
#commentaryPopup .popup-drag-header > button[onclick*="closeCommentary"] {
  display: none !important;
}

#commentaryPopup .popup-drag-header #commentaryTitle {
  color: #1f1a17 !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 880 !important;
  letter-spacing: -0.04em !important;
}

#commentaryPopup .popup-drag-header #commentaryTitle + div {
  margin-top: 7px !important;
  color: #2b2118 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 720 !important;
}

#commentaryPopup .gomna-audio-commentary-header-note {
  max-width: 520px !important;
  margin: 8px auto 0 !important;
  color: rgba(51, 38, 29, 0.72) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  font-weight: 620 !important;
  letter-spacing: -0.01em !important;
}

#commentaryPopup .gomna-audio-commentary-controls-footer {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding:
    13px 20px calc(16px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(122, 88, 48, 0.10) !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.88), rgba(247, 243, 235, 0.98)) !important;
  box-shadow: 0 -8px 20px rgba(61, 40, 24, 0.035) !important;
}

#commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-button,
#commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-replay-button,
#commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-sequence-button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(122, 88, 48, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 241, 0.92) !important;
  color: #2b2118 !important;
  box-shadow:
    0 2px 8px rgba(61, 40, 24, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
}

#commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-button:hover,
#commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-button:focus,
#commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-replay-button:hover,
#commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-replay-button:focus,
#commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-sequence-button:hover,
#commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-sequence-button:focus {
  border-color: rgba(122, 88, 48, 0.28) !important;
  background: rgba(239, 225, 202, 0.76) !important;
  color: #1f1a17 !important;
  outline: none !important;
}

#commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-button--active,
#commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-tab--active {
  border-color: rgba(95, 58, 25, 0.24) !important;
  background: rgba(211, 184, 126, 0.34) !important;
  color: #1f1a17 !important;
  box-shadow:
    0 0 0 2px rgba(201, 169, 97, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

#commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-button--pending {
  opacity: 0.58 !important;
  cursor: not-allowed !important;
}

#commentaryPopup .gomna-audio-commentary-close-button.popup-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 54px !important;
  width: 54px !important;
  min-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 !important;
  border: 1px solid #dccfbc !important;
  border-radius: 50% !important;
  background: #fffaf1 !important;
  color: #1f1a17 !important;
  box-shadow:
    0 2px 9px rgba(61, 40, 24, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 520 !important;
  letter-spacing: 0 !important;
}

#commentaryPopup .gomna-audio-commentary-close-button.popup-close:hover,
#commentaryPopup .gomna-audio-commentary-close-button.popup-close:focus {
  border-color: #cdbda7 !important;
  background: #f7f3eb !important;
  color: #1f1a17 !important;
  outline: none !important;
}

@media (max-width: 480px) {
  #commentaryPopup .popup-drag-header {
    padding: 19px 17px 15px !important;
  }

  #commentaryPopup .popup-drag-header #commentaryTitle {
    font-size: 20px !important;
  }

  #commentaryPopup .popup-drag-header #commentaryTitle + div {
    font-size: 12.5px !important;
  }

  #commentaryPopup .gomna-audio-commentary-header-note {
    font-size: 11px !important;
  }

  #commentaryPopup .gomna-audio-commentary-controls-footer {
    gap: 7px !important;
    padding:
      12px 12px calc(18px + env(safe-area-inset-bottom) + 8px) !important;
  }

  #commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-button,
  #commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-replay-button,
  #commentaryPopup .gomna-audio-commentary-controls-footer .gomna-audio-commentary-sequence-button {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 9px !important;
    font-size: 11.5px !important;
  }

  #commentaryPopup .gomna-audio-commentary-close-button.popup-close {
    flex-basis: 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    font-size: 28px !important;
  }
}

/* =========================================================
   GOMNA MINI PLAYER EXPAND BUTTON RESTORE
   말씀 오디오 카드 열기 버튼과 말씀풀이 닫기 버튼 분리
   ========================================================= */

#gomna-audio-mini-player .gomna-audio-mini-controls {
  flex-shrink: 0 !important;
  min-width: max-content !important;
}

#gomna-audio-mini-player .gomna-audio-mini-info {
  gap: 6px !important;
}

#gomna-audio-mini-player .gomna-audio-mini-progress {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

#gomna-audio-mini-player .gomna-audio-mini-progress-track {
  position: relative !important;
  width: 100% !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(74, 42, 27, 0.18) !important;
  overflow: visible !important;
  cursor: pointer !important;
  touch-action: none !important;
}

#gomna-audio-mini-player .gomna-audio-mini-progress-fill {
  width: 0%;
  height: 100% !important;
  border-radius: inherit !important;
  background: rgba(95, 58, 25, 0.72) !important;
}

#gomna-audio-mini-player .gomna-audio-mini-progress-thumb {
  position: absolute !important;
  top: 50% !important;
  left: 0%;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #6f472b !important;
  box-shadow: 0 1px 4px rgba(42, 24, 14, 0.18) !important;
  transform: translate(-50%, -50%) !important;
}

#gomna-audio-mini-player .gomna-audio-mini-times {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: 5px !important;
  color: rgba(43, 33, 24, 0.72) !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
}

#gomna-audio-mini-player .gomna-audio-btn-expand[data-audio-action="expand"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 248, 239, 0.74) !important;
  border: 1px solid rgba(255, 248, 239, 0.54) !important;
  color: #4a2a1b !important;
  box-shadow:
    0 1px 4px rgba(20, 14, 10, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

#gomna-audio-mini-player .gomna-audio-btn-expand[data-audio-action="expand"]:hover,
#gomna-audio-mini-player .gomna-audio-btn-expand[data-audio-action="expand"]:focus {
  background: rgba(255, 248, 239, 0.86) !important;
  color: #3b2115 !important;
  outline: none !important;
}

@media (max-width: 480px) {
  #gomna-audio-mini-player {
    overflow: visible !important;
  }

  #gomna-audio-mini-player .gomna-audio-mini-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #gomna-audio-mini-player .gomna-audio-mini-title {
    max-width: 100% !important;
  }

  #gomna-audio-mini-player .gomna-audio-mini-progress-track {
    height: 3px !important;
  }

  #gomna-audio-mini-player .gomna-audio-mini-times {
    font-size: 10px !important;
  }

  #gomna-audio-mini-player .gomna-audio-mini-controls {
    gap: 4px !important;
  }

  #gomna-audio-mini-player .gomna-audio-btn-seek-back,
  #gomna-audio-mini-player .gomna-audio-btn-seek-forward,
  #gomna-audio-mini-player .gomna-audio-btn-speed,
  #gomna-audio-mini-player .gomna-audio-btn-expand[data-audio-action="expand"] {
    flex-basis: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  #gomna-audio-mini-player .gomna-audio-btn-expand[data-audio-action="expand"] {
    font-size: 17px !important;
  }
}

/* =========================================================
   GOMNA OVERLAY STACK FIX
   말씀풀이 팝업 위에 필수 카드/미니 플레이어 복구
   ========================================================= */

/* 미니 플레이어: 말씀 오디오 카드 열기 버튼 항상 접근 가능 */
#gomna-audio-mini-player.gomna-audio-visible {
  z-index: 960 !important;
  pointer-events: auto !important;
}

/* 오디오 재생 중에는 말씀풀이 하단 컨트롤과 미니 플레이어를 세로로 분리 */
body.gomna-audio-body-padding #commentaryPopup.show {
  --gomna-commentary-mini-clearance: calc(
    var(--gomna-audio-mini-height, 88px) + env(safe-area-inset-bottom, 0px) + 18px
  );
  justify-content: flex-end !important;
  padding-bottom: var(--gomna-commentary-mini-clearance) !important;
}

body.gomna-audio-body-padding #commentaryPopupBox {
  max-height: calc(
    100vh - env(safe-area-inset-top, 0px) - var(--gomna-commentary-mini-clearance, 106px) - 18px
  ) !important;
}

@supports (height: 100dvh) {
  body.gomna-audio-body-padding #commentaryPopupBox {
    max-height: calc(
      100dvh - env(safe-area-inset-top, 0px) - var(--gomna-commentary-mini-clearance, 106px) - 18px
    ) !important;
  }
}

/* 확장 플레이어(속도/목소리/타이머): 말씀풀이 팝업보다 위 */
#gomna-audio-expanded-player.gomna-audio-visible {
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* 책/장/절 선택 카드: 말씀풀이 팝업(950)보다 위 */
.unified-bc-overlay.active {
  z-index: 1000 !important;
  pointer-events: auto !important;
}

.unified-bc-overlay.active .unified-bc-box {
  pointer-events: auto !important;
}

/* 말씀풀이 내 ▼ 선택 버튼 클릭 보장 */
#commentaryContent .commentary-nav-pick {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

#commentaryContent .commentary-nav-pick-txt,
#commentaryContent .commentary-nav-pick-caret {
  pointer-events: none !important;
}

/* =========================================================
   GOMNA COMMENTARY MODAL SCROLL LOCK
   iOS Safari 팝업 전체 드래그/rubber-band 방지
   ========================================================= */

body.gomna-commentary-popup-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.gomna-commentary-popup-open #commentaryPopup.show {
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  touch-action: auto !important;
}

body.gomna-commentary-popup-open #commentaryPopupBox {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  overscroll-behavior: contain !important;
}

body.gomna-commentary-popup-open #commentaryPopup .popup-drag-header,
body.gomna-commentary-popup-open #commentaryPopup .gomna-audio-commentary-controls-footer {
  flex-shrink: 0 !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

body.gomna-commentary-popup-open #commentaryContent {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
}

/* =========================================================
   GOMNA MINI PLAYER CARD LAYOUT FINAL
   말씀풀이 오디오용 카드형 미니 플레이어
   ========================================================= */

#gomna-audio-mini-player.gomna-audio-visible {
  left: 50% !important;
  right: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  width: min(calc(100vw - 18px), 640px) !important;
  max-width: 640px !important;
  height: auto !important;
  min-height: 126px !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 12px !important;
  padding: 18px 18px 16px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  border: 1px solid rgba(122, 88, 48, 0.15) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(248, 241, 230, 0.98)) !important;
  color: #2b2118 !important;
  box-shadow:
    0 8px 22px rgba(61, 40, 24, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(18px) saturate(116%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(116%) !important;
  transform: translate(-50%, 0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 960 !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-mini-info {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  padding: 0 !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-mini-title {
  width: 100% !important;
  max-width: 100% !important;
  color: #2b2118 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em !important;
  text-align: left !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-mini-preview {
  display: none !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-mini-progress {
  display: block !important;
  width: 100% !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-mini-progress-track {
  height: 4px !important;
  background: rgba(122, 88, 48, 0.20) !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-mini-progress-fill {
  background: rgba(95, 58, 25, 0.78) !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-mini-progress-thumb {
  width: 14px !important;
  height: 14px !important;
  background: #6b4328 !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-mini-times {
  margin-top: 8px !important;
  color: rgba(43, 33, 24, 0.70) !important;
  font-size: 12px !important;
  font-weight: 680 !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-mini-controls {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-seek-back,
#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-seek-forward,
#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-speed,
#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-expand[data-audio-action="expand"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid rgba(122, 88, 48, 0.15) !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 241, 0.78) !important;
  color: #2b2118 !important;
  box-shadow:
    0 2px 8px rgba(61, 40, 24, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 780 !important;
  text-shadow: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-play-pause {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 52px !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border: 1px solid rgba(80, 48, 27, 0.22) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #7a5131, #5b351f) !important;
  color: #fffaf1 !important;
  box-shadow:
    0 6px 14px rgba(61, 40, 24, 0.18),
    inset 0 1px 0 rgba(255, 250, 241, 0.22) !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-speed {
  font-size: 13px !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-expand[data-audio-action="expand"] {
  font-size: 18px !important;
}

body.gomna-audio-body-padding #commentaryPopup.show {
  --gomna-commentary-mini-clearance: calc(170px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (min-width: 520px) {
  #gomna-audio-mini-player.gomna-audio-visible {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    min-height: 102px !important;
    padding: 18px 20px !important;
  }

  #gomna-audio-mini-player.gomna-audio-visible .gomna-audio-mini-info {
    grid-column: 1 !important;
  }

  #gomna-audio-mini-player.gomna-audio-visible .gomna-audio-mini-controls {
    grid-column: 2 !important;
    width: auto !important;
  }

  body.gomna-audio-body-padding #commentaryPopup.show {
    --gomna-commentary-mini-clearance: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 374px) {
  body.gomna-audio-body-padding #commentaryPopup.show {
    --gomna-commentary-mini-clearance: calc(162px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #gomna-audio-mini-player.gomna-audio-visible {
    width: calc(100vw - 18px) !important;
    padding: 16px 14px 14px !important;
  }

  #gomna-audio-mini-player.gomna-audio-visible .gomna-audio-mini-controls {
    gap: 6px !important;
  }

  #gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-seek-back,
  #gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-seek-forward,
  #gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-speed,
  #gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-expand[data-audio-action="expand"] {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 12px !important;
  }

  #gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-play-pause {
    flex-basis: 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }
}

/* =========================================================
   GOMNA iOS SAFARI LAYOUT FIX
   말씀풀이 드래그 차단 · 미니 플레이어 노출 · 카드 간격
   ========================================================= */

:root {
  --gomna-audio-mini-height: 170px;
}

body.gomna-commentary-popup-open #popupDragHeader {
  cursor: default !important;
  touch-action: none !important;
}

body.gomna-commentary-popup-open #commentaryPopupBox {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopup.show {
  align-items: flex-end !important;
  justify-content: flex-end !important;
  padding-bottom: calc(
    var(--gomna-commentary-mini-clearance, 170px) + 10px
  ) !important;
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopupBox {
  max-height: calc(
    100dvh - env(safe-area-inset-top, 0px) - var(--gomna-commentary-mini-clearance, 170px) - 28px
  ) !important;
}

@supports not (height: 100dvh) {
  body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopupBox {
    max-height: calc(
      100vh - env(safe-area-inset-top, 0px) - var(--gomna-commentary-mini-clearance, 170px) - 28px
    ) !important;
  }
}

#gomna-audio-mini-player.gomna-audio-visible {
  display: grid !important;
  visibility: visible !important;
  overflow: visible !important;
  -webkit-transform: translate3d(-50%, 0, 0) !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: 970 !important;
  bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
}

body.gomna-commentary-popup-open #gomna-audio-mini-player.gomna-audio-visible {
  z-index: 970 !important;
  pointer-events: auto !important;
}

body.gomna-audio-body-padding #gomna-audio-mini-player.gomna-audio-visible {
  bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-mini-controls {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100% !important;
  padding-bottom: 2px !important;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-mini-controls::-webkit-scrollbar {
  display: none;
}

#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-seek-back,
#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-seek-forward,
#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-speed,
#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-play-pause,
#gomna-audio-mini-player.gomna-audio-visible .gomna-audio-btn-expand[data-audio-action="expand"] {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

#gomna-audio-mini-player .gomna-audio-btn-expand[data-audio-action="expand"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#commentaryPopup .gomna-audio-commentary-controls-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#commentaryPopup .gomna-audio-commentary-controls-footer > .popup-close:not(:last-of-type) {
  display: none !important;
}

@media (max-width: 480px) {
  body.gomna-audio-body-padding #commentaryPopup.show {
    --gomna-commentary-mini-clearance: calc(176px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #gomna-audio-mini-player.gomna-audio-visible {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    min-height: 132px !important;
  }
}

/* =========================================================
   GOMNA COMMENTARY POPUP STATE SPLIT FINAL
   idle: 팝업 크게 / playing: 미니 플레이어만큼만 간격 확보
   ========================================================= */

:root {
  --gomna-commentary-mini-card-height: 132px;
  --gomna-commentary-card-gap: 6px;
  --gomna-commentary-shell-gap: 10px;
}

body.gomna-commentary-popup-open #commentaryPopup.show {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding:
    max(10px, env(safe-area-inset-top, 0px))
    max(9px, env(safe-area-inset-right, 0px))
    max(10px, env(safe-area-inset-bottom, 0px))
    max(9px, env(safe-area-inset-left, 0px)) !important;
}

body.gomna-commentary-popup-open:not(.gomna-audio-body-padding) #commentaryPopup.show {
  align-items: center !important;
  justify-content: center !important;
}

body.gomna-commentary-popup-open:not(.gomna-audio-body-padding) #commentaryPopupBox {
  width: min(96vw, 760px) !important;
  max-width: min(96vw, 760px) !important;
  max-height: calc(
    100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px
  ) !important;
}

@supports not (height: 100dvh) {
  body.gomna-commentary-popup-open:not(.gomna-audio-body-padding) #commentaryPopupBox {
    max-height: calc(
      100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px
    ) !important;
  }
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopup.show {
  --gomna-commentary-mini-clearance: calc(
    var(--gomna-commentary-mini-card-height, 132px) +
    var(--gomna-commentary-card-gap, 6px) +
    env(safe-area-inset-bottom, 0px)
  ) !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding-bottom: calc(
    var(--gomna-commentary-mini-clearance) + var(--gomna-commentary-shell-gap, 10px)
  ) !important;
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopupBox {
  width: min(96vw, 760px) !important;
  max-width: min(96vw, 760px) !important;
  max-height: calc(
    100dvh - env(safe-area-inset-top, 0px) - var(--gomna-commentary-mini-clearance) - var(--gomna-commentary-shell-gap, 10px) - 10px
  ) !important;
}

@supports not (height: 100dvh) {
  body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopupBox {
    max-height: calc(
      100vh - env(safe-area-inset-top, 0px) - var(--gomna-commentary-mini-clearance) - var(--gomna-commentary-shell-gap, 10px) - 10px
    ) !important;
  }
}

body.gomna-commentary-popup-open #commentaryPopup .popup-drag-header,
body.gomna-commentary-popup-open #commentaryPopup .gomna-audio-commentary-controls-footer {
  touch-action: pinch-zoom !important;
}

body.gomna-commentary-popup-open #commentaryContent {
  touch-action: pan-y pinch-zoom !important;
}

#gomna-audio-mini-player:not(.gomna-audio-visible) {
  opacity: 0 !important;
  pointer-events: none !important;
}

#gomna-audio-mini-player[hidden] {
  display: none !important;
}

body.gomna-audio-body-padding #gomna-audio-mini-player.gomna-audio-visible {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  min-height: var(--gomna-commentary-mini-card-height, 132px) !important;
  z-index: 970 !important;
}

body:not(.gomna-audio-body-padding) #gomna-audio-mini-player:not(.gomna-audio-visible),
body:not(.gomna-audio-body-padding) #gomna-audio-mini-player[hidden] {
  display: none !important;
}

@media (max-width: 480px) {
  :root {
    --gomna-commentary-mini-card-height: 132px;
    --gomna-commentary-card-gap: 6px;
    --gomna-commentary-shell-gap: 10px;
  }

  body.gomna-commentary-popup-open:not(.gomna-audio-body-padding) #commentaryPopupBox,
  body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopupBox {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }

  body.gomna-audio-body-padding #gomna-audio-mini-player.gomna-audio-visible {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }
}

/* =========================================================
   GOMNA COMMENTARY AUDIO STACK CONNECTOR FINAL
   말씀풀이 카드와 미니 플레이어를 하나의 아이보리 오디오 묶음처럼 연결
   ========================================================= */

:root {
  --gomna-commentary-card-gap: 3px;
  --gomna-commentary-shell-gap: 10px;
  --gomna-commentary-stack-bg: rgba(255, 253, 248, 0.98);
  --gomna-commentary-stack-bg-soft: rgba(248, 241, 230, 0.98);
  --gomna-commentary-stack-border: rgba(122, 88, 48, 0.13);
  --gomna-commentary-stack-shadow: 0 8px 22px rgba(61, 40, 24, 0.08);
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopup.show {
  --gomna-commentary-mini-clearance: calc(
    var(--gomna-commentary-mini-card-height, 132px) +
    var(--gomna-commentary-card-gap, 3px) +
    env(safe-area-inset-bottom, 0px)
  ) !important;
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopup.show::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(
    var(--gomna-commentary-mini-card-height, 132px) +
    var(--gomna-commentary-card-gap, 3px) +
    var(--gomna-commentary-shell-gap, 10px) +
    env(safe-area-inset-bottom, 0px)
  );
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 253, 248, 0) 0%,
      rgba(255, 253, 248, 0.94) 18%,
      var(--gomna-commentary-stack-bg) 100%
    );
}

body.gomna-commentary-popup-open #commentaryPopupBox {
  position: relative !important;
  z-index: 2 !important;
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopupBox,
body.gomna-audio-body-padding #gomna-audio-mini-player.gomna-audio-visible {
  border-color: var(--gomna-commentary-stack-border) !important;
  background:
    linear-gradient(
      180deg,
      var(--gomna-commentary-stack-bg),
      var(--gomna-commentary-stack-bg-soft)
    ) !important;
  box-shadow:
    var(--gomna-commentary-stack-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body.gomna-audio-body-padding #gomna-audio-mini-player.gomna-audio-visible {
  bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopupBox {
  border-radius: 24px !important;
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #gomna-audio-mini-player.gomna-audio-visible {
  border-radius: 22px !important;
}

/* =========================================================
   GOMNA COMMENTARY AUDIO BACKGROUND UNIFICATION FINAL
   실제 배경 3곳(팝업/미니/뒤 바탕)을 같은 아이보리 계열로 통일
   ========================================================= */

:root {
  --gomna-commentary-surface: #f7f3eb;
  --gomna-commentary-surface-soft: #fffaf1;
  --gomna-commentary-surface-warm: #f6efe3;
  --gomna-commentary-surface-border: rgba(122, 88, 48, 0.12);
  --gomna-commentary-surface-shadow: 0 7px 18px rgba(61, 40, 24, 0.075);
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopup.show {
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 250, 241, 0.82), transparent 44%),
    linear-gradient(
      180deg,
      rgba(247, 243, 235, 0.96) 0%,
      rgba(247, 243, 235, 0.98) 58%,
      var(--gomna-commentary-surface) 100%
    ) !important;
  backdrop-filter: blur(12px) saturate(106%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(106%) !important;
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopup.show::before {
  content: none !important;
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopupBox,
body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryContent,
body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopup .gomna-audio-commentary-controls-footer,
body.gomna-audio-body-padding #gomna-audio-mini-player.gomna-audio-visible {
  background:
    linear-gradient(
      180deg,
      var(--gomna-commentary-surface-soft) 0%,
      var(--gomna-commentary-surface) 100%
    ) !important;
  border-color: var(--gomna-commentary-surface-border) !important;
  box-shadow:
    var(--gomna-commentary-surface-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopup .popup-drag-header {
  background:
    linear-gradient(
      180deg,
      var(--gomna-commentary-surface-soft) 0%,
      var(--gomna-commentary-surface-warm) 100%
    ) !important;
  border-bottom-color: var(--gomna-commentary-surface-border) !important;
}

body.gomna-audio-body-padding::after {
  background:
    linear-gradient(
      to top,
      var(--gomna-commentary-surface) 0%,
      rgba(247, 243, 235, 0.96) 62%,
      rgba(247, 243, 235, 0) 100%
    ) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopupBox {
  border-radius: 24px !important;
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #gomna-audio-mini-player.gomna-audio-visible,
body.gomna-audio-body-padding #gomna-audio-mini-player.gomna-audio-visible {
  border-radius: 22px 22px 28px 28px !important;
  overflow: hidden !important;
  bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  background:
    linear-gradient(
      180deg,
      var(--gomna-commentary-surface-soft) 0%,
      var(--gomna-commentary-surface) 100%
    ) !important;
}

body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopup.show {
  --gomna-commentary-card-gap: 4px;
}

/* =========================================================
   GOMNA COMMENTARY SAFE INLINE CONTROLS
   본문 절 카드 .action-btn 영향 없이 팝업 내부 버튼만 처리
   ========================================================= */

:root {
  --gomna-commentary-card-width: 430px;
  --gomna-commentary-phone-width: 430px;
}

body.gomna-commentary-popup-open #commentaryPopup.show {
  align-items: center !important;
  justify-content: center !important;
}

body.gomna-commentary-popup-open #commentaryPopupBox,
body.gomna-commentary-popup-open:not(.gomna-audio-body-padding) #commentaryPopupBox,
body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopupBox {
  width: min(var(--gomna-commentary-card-width), calc(100vw - 18px)) !important;
  max-width: var(--gomna-commentary-card-width) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#commentaryPopup .gomna-audio-commentary-controls-footer,
#commentaryContent [data-gomna-commentary-sequence-button="true"] {
  display: none !important;
}

#commentaryPopup #popupDragHeader button[onclick*="closeCommentary"] {
  display: none !important;
}

#commentaryPopup #gomnaCommentaryInlineControls.gomna-commentary-inline-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  position: relative !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  padding: 12px 16px 16px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(122, 88, 48, 0.10) !important;
  background: rgba(255, 253, 248, 0.98) !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  z-index: 1 !important;
}

#commentaryPopup #gomnaCommentaryInlineControls::before,
#commentaryPopup #gomnaCommentaryInlineControls::after {
  content: none !important;
  pointer-events: none !important;
}

#commentaryPopup #gomnaCommentaryListenBtn,
#commentaryPopup #gomnaCommentaryReplayBtn,
#commentaryPopup #gomnaCommentarySequenceBtn,
#commentaryPopup #gomnaCommentaryInlineCloseBtn {
  position: relative !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  border: 1px solid rgba(122, 88, 48, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 241, 0.96) !important;
  color: #2b2118 !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

#commentaryPopup #gomnaCommentaryListenBtn,
#commentaryPopup #gomnaCommentaryReplayBtn,
#commentaryPopup #gomnaCommentarySequenceBtn {
  flex: 1 1 0 !important;
}

#commentaryPopup #gomnaCommentaryInlineCloseBtn {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 18px !important;
  font-weight: 760 !important;
}

#commentaryPopup #gomnaCommentaryListenBtn.gomna-commentary-inline-button--pending,
#commentaryPopup #gomnaCommentaryReplayBtn.gomna-commentary-inline-button--pending,
#commentaryPopup #gomnaCommentarySequenceBtn.gomna-commentary-inline-button--pending,
#commentaryPopup #gomnaCommentaryListenBtn:disabled,
#commentaryPopup #gomnaCommentaryReplayBtn:disabled,
#commentaryPopup #gomnaCommentarySequenceBtn:disabled {
  opacity: 0.58 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

body.gomna-commentary-popup-open #commentaryContent {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

@media (max-width: 480px) {
  body.gomna-commentary-popup-open #commentaryPopupBox,
  body.gomna-commentary-popup-open:not(.gomna-audio-body-padding) #commentaryPopupBox,
  body.gomna-commentary-popup-open.gomna-audio-body-padding #commentaryPopupBox {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }

  #commentaryPopup #gomnaCommentaryInlineControls.gomna-commentary-inline-controls {
    padding: 10px 12px 14px !important;
    gap: 7px !important;
  }

  #commentaryPopup #gomnaCommentaryListenBtn,
  #commentaryPopup #gomnaCommentaryReplayBtn,
  #commentaryPopup #gomnaCommentarySequenceBtn,
  #commentaryPopup #gomnaCommentaryInlineCloseBtn {
    min-height: 42px !important;
    height: 42px !important;
    font-size: 12px !important;
  }

  #commentaryPopup #gomnaCommentaryInlineCloseBtn {
    flex-basis: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    font-size: 17px !important;
  }
}

/* 말씀풀이 카드와 오디오 미니 플레이어의 좌우 폭을 동일하게 맞춘다. */
#gomna-audio-mini-player.gomna-audio-visible,
body.gomna-audio-body-padding #gomna-audio-mini-player.gomna-audio-visible,
body.gomna-commentary-popup-open #gomna-audio-mini-player.gomna-audio-visible {
  left: 50% !important;
  right: auto !important;
  width: min(var(--gomna-commentary-card-width), calc(100vw - 18px)) !important;
  max-width: var(--gomna-commentary-card-width) !important;
  transform: translate3d(-50%, 0, 0) !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  #gomna-audio-mini-player.gomna-audio-visible,
  body.gomna-audio-body-padding #gomna-audio-mini-player.gomna-audio-visible,
  body.gomna-commentary-popup-open #gomna-audio-mini-player.gomna-audio-visible {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }
}

/* =========================================================
   GOMNA EXPANDED AUDIO CARD WIDTH + LAYOUT FINAL
   말씀풀이 카드와 같은 430px iPhone형 확장 오디오 카드
   ========================================================= */

#gomna-audio-expanded-player.gomna-audio-expanded-player,
#gomna-audio-expanded-player.gomna-audio-expanded-player.gomna-audio-visible,
body.gomna-audio-expanded-open #gomna-audio-expanded-player.gomna-audio-expanded-player,
body.gomna-audio-expanded-open #gomna-audio-expanded-player.gomna-audio-expanded-player.gomna-audio-visible {
  width: min(var(--gomna-commentary-card-width), calc(100vw - 32px)) !important;
  max-width: var(--gomna-commentary-card-width) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto auto !important;
  gap: 10px !important;
  padding: 14px 16px 16px !important;
  border-radius: 22px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: min(calc(100dvh - 32px), 640px) !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.995), rgba(250, 246, 237, 0.995)) !important;
}

#gomna-audio-expanded-player.gomna-audio-visible {
  pointer-events: auto !important;
}

#gomna-audio-expanded-player .gomna-audio-expanded-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  margin: 0 !important;
}

#gomna-audio-expanded-player .gomna-audio-expanded-header h3 {
  min-width: 0 !important;
  margin: 0 !important;
  color: #2b2118 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#gomna-audio-expanded-player .gomna-audio-btn-close {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  justify-self: end !important;
  border-radius: 999px !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

#gomna-audio-expanded-player .gomna-audio-expanded-info {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 6px !important;
  padding: 11px 12px !important;
  border-radius: 16px !important;
}

#gomna-audio-expanded-player .gomna-audio-expanded-title {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#gomna-audio-expanded-player .gomna-audio-expanded-preview {
  display: -webkit-box !important;
  line-clamp: 2 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
  font-weight: 650 !important;
}

#gomna-audio-expanded-player .gomna-audio-expanded-progress {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 22px auto !important;
  gap: 4px !important;
  margin: 0 !important;
}

#gomna-audio-expanded-player .gomna-audio-expanded-progress-track {
  position: relative !important;
  width: 100% !important;
  height: 22px !important;
  overflow: visible !important;
  border-radius: 999px !important;
  background: transparent !important;
  cursor: pointer !important;
  touch-action: none !important;
}

#gomna-audio-expanded-player .gomna-audio-expanded-progress-track::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: #e7ded0 !important;
  box-shadow: inset 0 0 0 1px rgba(111, 71, 43, 0.035) !important;
  transform: translateY(-50%) !important;
}

#gomna-audio-expanded-player .gomna-audio-expanded-progress-fill {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  height: 4px !important;
  width: 0%;
  border-radius: inherit !important;
  background: #6f472b !important;
  background-color: #6f472b !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
}

#gomna-audio-expanded-player .gomna-audio-expanded-progress-thumb {
  position: absolute !important;
  top: 50% !important;
  left: 0%;
  width: 15px !important;
  height: 15px !important;
  border-radius: 999px !important;
  background: #6f472b !important;
  background-color: #6f472b !important;
  border: 2px solid #6f472b !important;
  box-shadow: 0 2px 8px rgba(111, 71, 43, 0.22) !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) !important;
}

#gomna-audio-expanded-player .gomna-audio-expanded-times {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: rgba(61, 40, 24, 0.68) !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
  font-variant-numeric: tabular-nums !important;
}

#gomna-audio-expanded-player .gomna-audio-expanded-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

#gomna-audio-expanded-player .gomna-audio-expanded-controls button {
  min-width: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

#gomna-audio-expanded-player .gomna-audio-btn-play-pause-big {
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 !important;
  font-size: 22px !important;
}

#gomna-audio-expanded-player .gomna-audio-expanded-options {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

#gomna-audio-expanded-player .gomna-audio-option-group {
  padding: 9px !important;
  border-radius: 16px !important;
  margin: 0 !important;
}

#gomna-audio-expanded-player .gomna-audio-option-group label {
  margin: 0 0 7px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

#gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 4px !important;
}

#gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button {
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 2px !important;
  font-size: 11px !important;
}

#gomna-audio-expanded-player .gomna-audio-option-group:not(:first-child) .gomna-audio-option-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

#gomna-audio-expanded-player .gomna-audio-option-group:not(:first-child) .gomna-audio-option-buttons button {
  min-width: 0 !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 6px !important;
  font-size: 10.5px !important;
}

@media (max-width: 480px) {
  #gomna-audio-expanded-player.gomna-audio-expanded-player,
  #gomna-audio-expanded-player.gomna-audio-expanded-player.gomna-audio-visible,
  body.gomna-audio-expanded-open #gomna-audio-expanded-player.gomna-audio-expanded-player,
  body.gomna-audio-expanded-open #gomna-audio-expanded-player.gomna-audio-expanded-player.gomna-audio-visible {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    padding: 12px 12px 14px !important;
    gap: 8px !important;
    max-height: calc(100dvh - 18px - env(safe-area-inset-bottom, 0px)) !important;
  }

  #gomna-audio-expanded-player .gomna-audio-expanded-header h3 {
    font-size: 16px !important;
  }

  #gomna-audio-expanded-player .gomna-audio-expanded-controls {
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  #gomna-audio-expanded-player .gomna-audio-btn-play-pause-big {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
  }
}

/* =========================================================
   GOMNA EXPANDED AUDIO SOLO SCREEN FINAL
   확장 오디오 카드를 단독 중심 화면으로 표시
   ========================================================= */

:root {
  --gomna-expanded-card-min-height: min(760px, calc(100dvh - 32px));
  --gomna-expanded-card-max-height: calc(100dvh - 32px);
}

body.gomna-audio-expanded-open #commentaryPopupBox,
body.gomna-audio-expanded-open #commentaryContent,
body.gomna-audio-expanded-open #gomnaCommentaryInlineControls,
body.gomna-audio-expanded-open #commentaryPopup #gomnaCommentaryInlineControls.gomna-commentary-inline-controls,
body.gomna-audio-expanded-open #gomna-audio-mini-player.gomna-audio-visible {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.gomna-audio-expanded-open #commentaryPopup.show {
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 250, 241, 0.96), transparent 48%),
    linear-gradient(180deg, rgba(247, 243, 235, 0.985), rgba(242, 234, 221, 0.985)) !important;
  backdrop-filter: blur(14px) saturate(106%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(106%) !important;
}

body.gomna-audio-expanded-open #gomna-audio-expanded-player.gomna-audio-expanded-player,
body.gomna-audio-expanded-open #gomna-audio-expanded-player.gomna-audio-expanded-player.gomna-audio-visible {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10100 !important;
  width: min(var(--gomna-commentary-card-width), calc(100vw - 18px)) !important;
  max-width: var(--gomna-commentary-card-width) !important;
  min-height: var(--gomna-expanded-card-min-height) !important;
  max-height: var(--gomna-expanded-card-max-height) !important;
  margin: 0 auto !important;
  padding: 16px 16px 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.998), rgba(250, 246, 237, 0.998)) !important;
  border-color: rgba(122, 88, 48, 0.16) !important;
  box-shadow:
    0 20px 54px rgba(43, 28, 18, 0.22),
    0 4px 18px rgba(43, 28, 18, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-expanded-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding-bottom: 4px !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.998), rgba(255, 253, 248, 0.92)) !important;
}

body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-btn-close {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons {
  background: rgba(239, 229, 212, 0.7) !important;
  border: 1px solid rgba(122, 88, 48, 0.1) !important;
}

body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active {
  border-color: rgba(122, 88, 48, 0.2) !important;
  background: linear-gradient(180deg, #e8d9bd 0%, #d8c29a 100%) !important;
  color: #4d3320 !important;
  box-shadow:
    0 3px 8px rgba(91, 61, 34, 0.1),
    inset 0 1px 0 rgba(255, 252, 246, 0.72) !important;
}

/* =========================================================
   GOMNA EXPANDED SPEED BUTTON QUIET LUXURY FINAL
   속도 선택 버튼 색상을 은은한 베이지/골드브라운으로 정리
   ========================================================= */

body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons {
  background: rgba(251, 244, 230, 0.78) !important;
  border-color: rgba(225, 210, 181, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 240, 0.66) !important;
}

body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button {
  border-color: rgba(225, 210, 181, 0.44) !important;
  background: #fffaf0 !important;
  color: #5a402c !important;
  box-shadow:
    0 1px 3px rgba(74, 52, 36, 0.035),
    inset 0 1px 0 rgba(255, 253, 248, 0.64) !important;
}

body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button:hover,
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button:focus {
  border-color: rgba(215, 195, 156, 0.72) !important;
  background: #fbf4e6 !important;
  color: #4a3424 !important;
  box-shadow:
    0 1px 4px rgba(74, 52, 36, 0.055),
    inset 0 1px 0 rgba(255, 253, 248, 0.7) !important;
}

body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button:active {
  border-color: rgba(215, 195, 156, 0.82) !important;
  background: #f4ead7 !important;
  color: #4a3424 !important;
  box-shadow: inset 0 1px 3px rgba(74, 52, 36, 0.08) !important;
}

body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"],
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active,
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"]:hover,
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active:hover,
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"]:focus,
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active:focus,
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button[data-active="true"]:active,
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-group:first-child .gomna-audio-option-buttons button.gomna-audio-active:active {
  border-color: #d7c39c !important;
  background: linear-gradient(180deg, #eadab4 0%, #dfc98d 100%) !important;
  color: #4a3424 !important;
  box-shadow:
    0 1px 5px rgba(74, 52, 36, 0.075),
    inset 0 1px 0 rgba(255, 250, 240, 0.62) !important;
}

/* =========================================================
   GOMNA EXPANDED OPTION SELECTED COLOR UNIFIED FINAL
   속도 · 목소리 · 타이머 선택 버튼 색상 통일
   ========================================================= */

body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-buttons button {
  border-color: rgba(225, 210, 181, 0.44) !important;
  background: #fffaf0 !important;
  color: #5a402c !important;
  box-shadow:
    0 1px 3px rgba(74, 52, 36, 0.035),
    inset 0 1px 0 rgba(255, 253, 248, 0.64) !important;
}

body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-buttons button:hover,
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-buttons button:focus {
  border-color: rgba(215, 195, 156, 0.72) !important;
  background: #fbf4e6 !important;
  color: #4a3424 !important;
  box-shadow:
    0 1px 4px rgba(74, 52, 36, 0.055),
    inset 0 1px 0 rgba(255, 253, 248, 0.7) !important;
}

body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-buttons button:active {
  border-color: rgba(215, 195, 156, 0.82) !important;
  background: #f4ead7 !important;
  color: #4a3424 !important;
  box-shadow: inset 0 1px 3px rgba(74, 52, 36, 0.08) !important;
}

body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-buttons button[data-active="true"],
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-buttons button.gomna-audio-active,
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-buttons button[data-active="true"]:hover,
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-buttons button.gomna-audio-active:hover,
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-buttons button[data-active="true"]:focus,
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-buttons button.gomna-audio-active:focus,
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-buttons button[data-active="true"]:active,
body.gomna-audio-expanded-open #gomna-audio-expanded-player .gomna-audio-option-buttons button.gomna-audio-active:active {
  border-color: #d7c39c !important;
  background: linear-gradient(180deg, #eadab4 0%, #dfc98d 100%) !important;
  color: #4a3424 !important;
  box-shadow:
    0 1px 5px rgba(74, 52, 36, 0.075),
    inset 0 1px 0 rgba(255, 250, 240, 0.62) !important;
}

@media (max-width: 480px) {
  :root {
    --gomna-expanded-card-min-height: calc(100dvh - 18px - env(safe-area-inset-bottom, 0px));
    --gomna-expanded-card-max-height: calc(100dvh - 18px - env(safe-area-inset-bottom, 0px));
  }

  body.gomna-audio-expanded-open #gomna-audio-expanded-player.gomna-audio-expanded-player,
  body.gomna-audio-expanded-open #gomna-audio-expanded-player.gomna-audio-expanded-player.gomna-audio-visible {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    min-height: calc(100dvh - 18px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 18px - env(safe-area-inset-bottom, 0px)) !important;
    padding: 12px 12px 14px !important;
    border-radius: 22px !important;
  }
}

@supports not (height: 100dvh) {
  body.gomna-audio-expanded-open #gomna-audio-expanded-player.gomna-audio-expanded-player,
  body.gomna-audio-expanded-open #gomna-audio-expanded-player.gomna-audio-expanded-player.gomna-audio-visible {
    min-height: min(760px, calc(100vh - 32px)) !important;
    max-height: calc(100vh - 32px) !important;
  }

  @media (max-width: 480px) {
    :root {
      --gomna-expanded-card-min-height: calc(100vh - 18px - env(safe-area-inset-bottom, 0px));
      --gomna-expanded-card-max-height: calc(100vh - 18px - env(safe-area-inset-bottom, 0px));
    }

    body.gomna-audio-expanded-open #gomna-audio-expanded-player.gomna-audio-expanded-player,
    body.gomna-audio-expanded-open #gomna-audio-expanded-player.gomna-audio-expanded-player.gomna-audio-visible {
      min-height: calc(100vh - 18px - env(safe-area-inset-bottom, 0px)) !important;
      max-height: calc(100vh - 18px - env(safe-area-inset-bottom, 0px)) !important;
    }
  }
}