/* 본문 읽기버튼 + 공유 */
.post-actions{position:relative; width:90%; max-width:640px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0px}
.post-actions .btn-share{display:flex; align-items:center; gap:4px; letter-spacing:0; font-weight:500}
.post-actions.border-top{border-top:1px solid rgba(0, 0, 0, 0.06)}

/* 간단한 토스트 메시지 형태의 툴팁 */
.tts-toast{position:absolute; bottom:-40px; left:0; background:rgba(0, 0, 0, 0.8); color:#fff; padding:10px 16px; border-radius:8px; font-size:14px; z-index:9999; opacity:0; transition:opacity 0.3s; pointer-events:none}
.tts-toast.show{opacity:1}

/* TTS PLayer */
.tts{display:flex; align-items:center; gap:10px; cursor:pointer}
.tts .txt{font-size:14px; font-weight:500}

/* 본문 읽기 버튼 */
.btn-tts{position:relative; width:32px; height:32px; padding:0; display:flex; align-items:center; justify-content:center; background-color:#F5F5F5; border-radius:999px; transition:all 0.3s ease; border:none}
.btn-tts .tts-icon{display:none; display:flex; align-items:center; justify-content:center}
/* .btn-tts .tts-eq{display:none; display:flex; height:12px; padding:0px; align-items:flex-end; gap:1px} */
.btn-tts.playing .tts-eq{display:inline-flex; align-items:flex-end; gap:2px; height:14px;}

/* .tts-eq-bar{width:3px; height:2px; background:#000; animation:tts-eq 1s infinite ease-in-out; animation-play-state:paused; transform-origin:bottom} */
/* .tts-eq-bar:nth-child(2){animation-delay:.1s}
.tts-eq-bar:nth-child(3){animation-delay:.2s}
.tts-eq-bar:nth-child(4){animation-delay:.3s} */
.tts-eq-bar{width:2px; height:10px; background:#000; border-radius:2px; transform-origin:bottom; animation:tts-eq-soft 1.2s infinite ease-in-out}


/* 테스트 */
.faith_life-the-101st-hit .tts,
.post-20th-anniversary-blood-donation-relay .tts{display:flex}


/* 각 막대 랜덤 느낌 */
.tts-eq-bar:nth-child(1){animation-delay:-0.4s}
.tts-eq-bar:nth-child(2){animation-delay:-0.2s}
.tts-eq-bar:nth-child(3){animation-delay:-0.6s}
.tts-eq-bar:nth-child(4){animation-delay:-0.1s}

.btn-tts .tts-eq{display:none}

/* 재생 상태 */
.btn-tts.playing .tts-icon{display:none}
.btn-tts.playing .tts-eq{display:flex}
.btn-tts.playing .tts-eq-bar{animation-play-state:running}


@keyframes tts-eq-soft{
0%,100%{transform:scaleY(0.4);}
50%{transform:scaleY(1);}
}


/* 문장 밑줄 효과 */
.tts-sentence{transition:background 0.2s}
.tts-active{/*width:fit-content;*/ background:#1ea3ff4d}
.tts-sentence > br{display:none}

/* 인용구 스타일 */
.single blockquote.bible .tts-sentence{font-size:18px; line-height:1.7; color:#6F3919; font-weight:500; letter-spacing:-.02em}
@media(min-width:1070px){
  .single blockquote.bible .tts-sentence{line-height:1.8}
}


/* 하이라이트 버튼 기본 스타일 */
.btn-tts-highlight{display:none; background:none; border:none; cursor:pointer; color:#666; padding:6px 0; transition:all 0.2s ease; gap:4px; align-items:flex-start}
.btn-tts-highlight svg{opacity:.6; flex-shrink:0; margin-top:2px}
.btn-tts-highlight svg:lang(ko),
.btn-tts-highlight svg:lang(en){margin-top:0}
.btn-tts-highlight .label{color:#666; text-align:left; line-height:1.3}
/* 활성화되었을 때 (하이라이트 켜짐) */
.btn-tts-highlight.active .label{color:#000}
.btn-tts-highlight.active svg{opacity:1}
@media(min-width:1070px){
  .btn-tts-highlight:hover{opacity:.8}
}

/* 플레이어 */
.tts-player-wrap{display:none; width:calc(100% - 40px); /*position:fixed; right:20px; bottom:20px;*/ z-index:10; max-width:340px; padding:12px; border-radius:16px; background:#FFFFFF; box-shadow:0px 10px 20px -10px rgba(0,0,0,0.12),0px 30px 60px -10px rgba(0,0,0,0.18)}
.tts-player-wrap.active{display:block}

/* tts-player-header */
.tts-player-header{display:flex; align-items:center; justify-content:space-between; gap:8px}
.tts-thum{flex:0 0 48px; border-radius:8px; overflow:hidden}
.tts-thum .thum-img{width:auto; height:100%; padding-bottom:100%; background-size:cover; background-position:center; background-repeat:no-repeat}
.tts-info{flex:1; min-width:0; text-align:left}
.tts-progress-mini{width:100%; height:4px; background:#ddd; border-radius:999px; margin-top:4px; overflow:hidden}
.tts-progress-bar-mini{width:0; height:100%; background:#000; transition:width 0.2s ease}
.btn-play{display:flex; align-items:center; justify-content:center; background:rgba(0, 0, 0, 0.04); border-radius:999px; padding:0}
.btn-play-mini{width:36px; height:36px}
.btn-play-mini svg{width:20px; height:20px}
.tts-btn{width:28px; height:28px; cursor:pointer; display:flex; align-items:center; justify-content:center; transform:rotate(180deg)}
.tts-toggle-icon{transition:transform 0.3s}
/* .tts-btn-close{width:28px; height:28px} */
.tts-player-wrap .time{font-size:13px; line-height:1.3; color:rgba(0, 0, 0, 0.5)}
.tts-player-wrap .time::before{display:none}

.tts-meta{display:flex; gap:16px; flex:1; min-width:0}
.tts-title{font-size:15px; font-weight:600; margin:0; line-height:1.4; white-space:nowrap; overflow:hidden; position:relative; color:#222}
.tts-title span{display:inline-block; padding-left:100%; animation:tts-marquee linear infinite; animation-play-state:paused; color:#222}
.tts-player-wrap.playing .tts-title span{animation-play-state:running}

.tts-title::before,
.tts-title::after{content:""; position:absolute; top:0; width:10px; height:100%; z-index:2; pointer-events:none}
.tts-title::before{left:0; background:linear-gradient(to right, #fff, rgba(255,255,255,0))}
.tts-title::after{right:0; background:linear-gradient(to left, #fff, rgba(255,255,255,0))}

@keyframes tts-marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}

/* 재생 중일 때만 */
.tts-player-wrap.playing .tts-title span{animation-play-state:running}

@keyframes tts-marquee{
0%{transform:translateX(0);}
100%{transform:translateX(-100%);}
}


/* 재생 버튼 효버효과 */
.btn-tts::before{content:''; position:absolute; z-index:-1; left:50%; top:50%; width:100%; height:100%; border-radius:50%; background:#007fff; transform:translate(-50%, -50%) scale(1); opacity:0}

/* 호버 시 파동 애니메이션 시작 */
.tts:hover .btn-tts::before {animation:pulse-blue 1.2s infinite}

/* 호버 시 버튼 자체의 변화 */
.tts:hover .btn-tts{background-color:#007fff}

.tts:hover .tts-icon svg path{fill:#fff}
.tts:hover .tts-eq-bar{background:#fff}

/* 파동 애니메이션 키프레임 */
@keyframes pulse-blue {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2); /* 2배 크기로 확산 */
    opacity: 0;
  }
}



/* 진행바 */
.tts-progress-wrap{margin-top:20px}
.tts-progress{width:100%; height:6px; background:#eee; border-radius:3px; cursor:pointer; overflow:hidden; flex:1; background:rgba(0, 0, 0, 0.08); border-radius:999px}
.tts-progress-bar{width:0; height:100%; background:#000; transition:width 0.2s ease}
.tts-progress-wrap .timebar{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px}

/* tts-player-body */
.tts-player-body{max-height:0; overflow:hidden; transition:max-height 0.3s ease}
.tts-player-body .controls{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.tts-player-body .controls .btn-play{width:60px; height:60px}
.tts-player-body .controls .btn-play svg{width:28px; height:28px}
.tts-player-body .controls :is(.btn-prev, .btn-next) svg{width:28px; height:28px}
.tts-player-body .tts-notice{margin:24px 0 4px; display:flex; justify-content:center; gap:4px; font-size:12px; color:rgba(0, 0, 0, 0.6); line-height:1.4}
.tts-player-body .tts-notice svg{flex-shrink:0}

.tts-player-wrap.open{padding:20px; max-width:420px}
.tts-player-wrap.open .tts-player-header{align-items:flex-start}
.tts-player-wrap.open .tts-player-body{max-height:500px}
.tts-player-wrap.open .tts-btn-close{display:none}
.tts-player-wrap.open .tts-title{font-size:16px}
.tts-player-wrap.open .tts-progress{height:8px}
.tts-player-wrap.open .tts-toggle-icon{width:32px; height:32px; transform:none}
.tts-player-wrap.open .tts-thum{flex:0 0 80px}
.tts-player-wrap.open .btn-tts-highlight{display:flex}
.tts-player-wrap.open .tts-player-header .btn-play{display:none}
.tts-player-wrap.open .tts-player-header .tts-progress-mini{display:none}

/* 재생속도 */
.speed-control-wrap{margin-top:20px}
.speed-control-wrap .speed-title{font-weight:500; font-size:14px; line-height:1.4; color:rgba(0, 0, 0, 0.6); text-align:center}
.speed-control-wrap .speed-control{margin:8px auto 0; width:fit-content;  display:flex; flex-direction:row; justify-content:center; align-items:center; padding:12px 16px; gap:10px; background:rgba(0, 0, 0, 0.04); border-radius:999px; color:#222}
.speed-control-wrap .speed-control .indicator{font-weight:500; font-size:16px; line-height:1.3; color:#222}
.speed-control-wrap .speed-control button{width:24px; height:24px; background:transparent; display:flex; align-items:center; justify-content:center; padding:0}
.speed-control-wrap .btn-speed-minus.disabled,
.speed-control-wrap .btn-speed-plus.disabled{opacity:.3; pointer-events:none}

@media(min-width:768px){
  .tts-player-wrap{width:100%; padding:14px; border-radius:10px}
  .tts-player-wrap .time{font-size:14px}
  .tts-player-body .controls{gap:16px; margin-top:8px}
  .tts-player-body .tts-notice{margin:36px 0 8px; font-size:14px}
  .tts-player-body .controls .btn-play{width:70px; height:70px}
  .tts-player-body .controls .btn-play svg{width:32px; height:32px}
  .tts-player-body .controls :is(.btn-prev, .btn-next) svg{width:32px; height:32px}

  /* .tts-thum{flex:0 0 48px} */
  .speed-control-wrap{margin-top:36px}
  .speed-control-wrap .speed-control{margin-top:10px; padding:14px 18px}
  .speed-control-wrap .speed-control .indicator{font-size:18px}
  .speed-control-wrap .speed-control button{width:28px; height:28px}
  .tts-player-wrap.open{min-width:420px}
  .tts-player-wrap.open .tts-title{font-size:18px}
  .tts-player-wrap.open .tts-thum{flex:0 0 120px}
}


/* 하단 go top */
.tts-player-wrap:not(.active){display:none}
.fixed-wrap{width:100%; pointer-events:none; position:fixed; bottom:20px; right:20px; gap:8px 0; display:flex; flex-direction:column; align-items:flex-end; z-index:20}
.fixed-wrap > *{pointer-events:auto}
.fixed-wrap :is(.scroll-top, #gotop){position:initial}

@media(min-width:768px){
  .fixed-wrap{width:auto}
}

/* 몽골어, 네팔어 플레이어 기능 제외 */
:is(:lang(mn-MN), :lang(ne)) .post-actions .tts{display:none}