/* ========== 景点语音讲解 · H5（扫码进入） ========== */
 /* 隐藏 PC 站点头尾，做成全屏 H5 */
 .header,
 .footer,
 .back-top,
 .overlay {
     display: none !important;
 }

 html,
 body {
     background: #fff;
     overflow-x: hidden;
     -webkit-tap-highlight-color: transparent;
 }

 .jd-detail {
     position: relative;
     width: 100%;
     padding: 0 0 55px;
     background: #fff;
     min-height: calc(100vh - 120px - env(safe-area-inset-bottom));
     min-height: calc(100dvh - 120px - env(safe-area-inset-bottom));
 }

 /* ① 顶部图片轮播（全出血） */
 .jd-hero {
     position: relative;
     width: 100%;
     background: linear-gradient(160deg, #e9eef3, #cdd6de);
 }

 .jd-swiper {
     position: relative;
     width: 100%;
     height: 30vh;
     min-height: 200px;
     max-height: 380px;
     overflow: hidden;
 }

 .jd-swiper .swiper-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .jd-swiper .swiper-pagination {
     bottom: 10px;
 }

 .jd-swiper .swiper-pagination-bullet {
     background: #fff;
     opacity: .6;
 }

 .jd-swiper .swiper-pagination-bullet-active {
     background: #ffd166;
     opacity: 1;
 }

 /* ② 标题与讲解正文 */
 .jd-body {
     padding: 16px 16px 0;
 }

 .jd-title {
     color: #222;
     margin: 4px 0 6px;
 }

 .jd-sub {
     font-size: 13px;
     color: #9aa0a6;
     margin-bottom: 14px;
 }

 .jd-line {
     height: 1px;
     background: #f0f0f0;
     margin: 0 0 14px;
 }

 .jd-article {
     font-size: 15px;
     color: #4a4a4a;
     line-height: 1.95;
     overflow: hidden;
     max-height: 350px;
     transition: max-height .35s ease;
     word-break: break-word;
 }

 .jd-article.open {
     max-height: none;
 }

 .jd-article p {
     margin: 0 0 14px;
 }

 .jd-article img,
 .jd-article video {
     max-width: 100%;
     height: auto;
 }

 .jd-toggle {
     display: none;
     width: 100%;
     text-align: center;
     background: none;
     border: none;
     color: #b45309;
     font-size: 22px;
     line-height: 1;
     padding: 4px 0 10px;
 }

 .jd-toggle.show {
     display: block;
 }

 .jd-toggle i {
     display: inline-block;
     transition: transform .3s;
 }

 .jd-toggle.open i {
     transform: rotate(180deg);
 }

 /* ③ 底部悬浮语音条：播放/暂停 + 进度 + 倍速 + 语音选择 */
 .jd-audio-bar {
     position: fixed;
     left: 0;
     bottom: 0;
     z-index: 999;
     width: 100%;
     box-sizing: border-box;
     display: flex;
     align-items: center;
     padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) 10px;
     background: linear-gradient(135deg, #fdf6e3, #f5e3b8);
 }

 .jd-audio-bar>*+* {
     margin-left: 8px;
 }

 /* 不用 flex gap，兼容旧版微信内核 */
 .jd-play {
     flex: none;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: none;
     background: #fff;
     color: #b45309;
     font-size: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 8px rgba(180, 83, 9, .25);
 }

 .jd-play i {
     line-height: 1;
 }

 .jd-wave {
     flex: none;
     display: flex;
     align-items: flex-end;
     height: 20px;
     width: 19px;
 }

 .jd-wave span {
     width: 3px;
     border-radius: 2px;
     background: #d9a441;
     height: 6px;
 }

 .jd-wave span+span {
     margin-left: 2px;
 }

 .jd-audio-bar.playing .jd-wave span {
     animation: jdWave .9s ease-in-out infinite;
 }

 .jd-wave span:nth-child(1) {
     animation-delay: 0s;
 }

 .jd-wave span:nth-child(2) {
     animation-delay: .15s;
 }

 .jd-wave span:nth-child(3) {
     animation-delay: .3s;
 }

 .jd-wave span:nth-child(4) {
     animation-delay: .45s;
 }

 .jd-wave span:nth-child(5) {
     animation-delay: .6s;
 }

 @keyframes jdWave {

     0%,
     100% {
         height: 6px;
     }

     50% {
         height: 20px;
     }
 }

 .jd-progress {
     flex-grow: 1;
 }

 .jd-track {
     position: relative;
     height: 5px;
     border-radius: 3px;
     background: rgba(180, 83, 9, .18);
 }

 .jd-track::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     top: -10px;
     bottom: -12px;
 }

 /* 扩大点击热区 */
 .jd-fill {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 0%;
     border-radius: 3px;
     background: #b45309;
 }

 .jd-times {
     display: flex;
     justify-content: space-between;
     font-size: 11px;
     color: #a1743c;
     margin-top: 3px;
 }

 .jd-speed {
     flex-shrink: 0;
     width: 44px;
     height: 30px;
     line-height: 30px;
     padding: 0 8px;
     border: none;
     border-radius: 999px;
     background: rgba(255, 255, 255, .85);
     color: #92600e;
     font-size: 10px;
     font-weight: 500;
 }

 .jd-voice {
     width: 70px;
     height:30px;
     background: rgba(255, 255, 255, .85);
     border-radius: 999px;
     padding: 0 4px;
     color: #92600e;
     max-width: 108px;
 }

 .jd-voice select {
     appearance: none;
     -webkit-appearance: none;
     border: none;
     background: transparent;
     color: #92600e;
     font-size: 10px;
     width: 100%;
     min-width: 0;
     outline: none;
     text-overflow: ellipsis;
     text-align: center;
      line-height: 30px;
 }

 @media (max-width: 360px) {
     .jd-voice {
         max-width: 78px;
     }

     .jd-wave {
         display: none;
     }
 }

 /* 无可用音频时播放条已隐藏，去掉正文底部预留的空白 */
 body.jd-no-audio .jd-detail {
     padding-bottom: 0;
 }

 /* ========== 景点讲解 · 列表页（H5） ========== */
 .jd-list-wrap {
     box-sizing: border-box;
     width: 100%;
     min-height: calc(100vh - 60px);
     min-height: calc(100dvh - 60px);
     padding: 12px 12px 68px;
     padding-bottom: calc(68px + env(safe-area-inset-bottom));
     background: #f2f3f5;
 }

 .jd-list-item {
     display: flex;
     align-items: center;
     box-sizing: border-box;
     padding: 10px;
     background: #fff;
     border-radius: 10px;
     color: inherit;
     text-decoration: none;
 }

 .jd-list-item + .jd-list-item {
     margin-top: 10px;
 }

 .jd-list-item:active {
     background: #fafafa;
 }

 /* 左侧缩略图 */
 .jd-list-pic {
     flex: none;
     width: 110px;
     height: 76px;
     border-radius: 8px;
     overflow: hidden;
     background: linear-gradient(160deg, #e9eef3, #cdd6de);
 }

 .jd-list-pic img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* 右侧文字 */
 .jd-list-info {
     flex: 1;
     min-width: 0;
     padding-left: 12px;
 }

 .jd-list-name {
     overflow: hidden;
     font-size: 16px;
     color: #222;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 @media (max-width: 360px) {
     .jd-list-pic {
         width: 92px;
         height: 66px;
     }

     .jd-list-name {
         font-size: 15px;
     }

     .jd-list-en {
         font-size: 11px;
     }
 }


 .return-list-btn{
    position: fixed;
    width:40px;
    height:40px;
    border-radius: 40px;
    background-color: rgba(180, 83, 9, .5);
    color:white;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 70px;
    right: 10px;
    font-size: 12px;
    text-align: center;
    padding:5px;
    z-index: 100;
    line-height: 14px;
 }
  .return-list-btn:hover,
  .return-list-btn:active{
    color:white;
    /* background-color: rgba(180, 83, 9, .5); */
  }

  .jd-header{
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding:10px;
    height:60px;
  }
   .jd-header .logo{
    height:40px;

   }
   .jd-header .logo img{
    max-width: 100%;
    max-height:100%;
   }
   .jd-header .back{
    position: absolute;
    width:40px;
    height:40px;
    left: 10px;
    top:10px;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
   }