.live_video_modal {
     /* 1. 修正：移除多餘的 absolute，統一使用 fixed */
     position: fixed;
     right: 15px;
     bottom: 15px; /* 初始位置 */
     z-index: 999;
     width: 300px;
     height: auto;
     aspect-ratio: 1.3333333333; /* 約 4:3 比例 */
     border-radius: 14px;
     background: #f6f4f4;
     
     /* 2. 修正：啟用 flex 佈局，讓 header & body 垂直完美分配 */
     display: flex;
     flex-direction: column;
     
     overflow: hidden;
     opacity: 1;
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
     border: 1px solid #ddd;
     transition: all 0.3s ease-in-out; /* 加上 ease-in-out 讓滑入動畫更平滑 */
}

/* 顯示時（啟動狀態）的定位 */
.live_video_modal.on {
     right: 15px;
     bottom: 104px;
}

/* 3. 修正：讓 inner 承接 Flex 佈局 */
.live_video_modal .inner {
     display: flex;
     flex-direction: column;
     height: 100%;
     width: 100%;
}

.live_video_modal .inner .modal_header {
     padding: 10px 15px;
     height: 40px; /* 固定 header 高度 */
     box-sizing: border-box;
     width: 100%;
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: #fff;
     border-radius: 14px 14px 0 0; /* 與外層圓角保持一致 */
}

.live_video_modal .inner .modal_header .logo {
     display: block;
     width: 84px;
     height: 20px;
     background-image: url(https://nxtw.dn.nexoncdn.co.kr/mbm/home/img/mmlogo.svg);
     background-repeat: no-repeat;
     background-size: contain; /* 改為 contain 避免 logo 邊緣被切到 */
     background-position: left center;
}

.live_video_modal .inner .modal_header .onair {
     color: #f65606;
     font-weight: bold;
     position: relative;
     padding-left: 15px;
     font-size: 14px;
     width: 60%;
}

.live_video_modal .inner .modal_header .onair::before {
     content: "";
     display: inline-block;
     width: 10px;
     height: 10px;
     background-color: #f65606;
     border-radius: 50%;
     position: absolute;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
}

.live_video_modal .inner .modal_header .close_button {
     display: block;
     min-width: 18px;
     height: 18px;
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cpath fill='%23838383' fill-rule='evenodd' d='M17.497 15.07a1.717 1.717 0 0 1-2.428 2.427L9 11.428l-6.069 6.07a1.717 1.717 0 0 1-2.428-2.429L6.573 9 .502 2.93A1.717 1.717 0 0 1 2.93.504L9 6.573 15.07.502a1.717 1.717 0 0 1 2.428 2.428L11.428 9l6.07 6.068Z' clip-rule='evenodd'/%3E%3C/svg%3E");
     background-size: cover;
     border: none; /* 預防 button 預設邊框 */
     background-color: transparent; /* 預防 button 預設背景 */
     cursor: pointer;
     opacity: 1;
}

.live_video_modal .inner .modal_body {
     width: 100%;
     /* 4. 修正：高度為 100% 減去 header 高度 */
     height: calc(100% - 40px);
     padding: 8px;
     box-sizing: border-box; /* 確保 padding 不會撐破容器 */
     position: relative;
     background-color: #f6f4f4;
}

.live_video_modal .inner .modal_body iframe {
     width: 100%;
     height: 100%;
     border-radius: 5px;
     display: block; /* 消除 iframe 底部的微小空隙 */
}

/* RWD 響應式優化 */
@media (max-width: 1280px) {
     .live_video_modal {
          /* 5. 修正：將重複的選取器合併，乾淨好管理 */
          width: 55%;
          max-width: 250px;
          right: 15px;
          bottom: 15px;
     }
     .live_video_modal.on {
          right: 60px;
          bottom: 15px;
     }
}
