/*導覽列*/
 /*晚間模式*/
 body.dark-mode #navMenuBtn {
     color: white;
     text-shadow: #181c22 1px 1px 2px;
 }

 body.dark-mode .side-nav {
     background: #232834;
     box-shadow: -2px 0 8px rgba(0, 0, 0, 0.4);
 }

 body.dark-mode .side-nav a {
     color: #d3d7de;
 }

  /* 暗色模式下的選單項目樣式 */
 body.dark-mode .side-nav a.active,
 body.dark-mode .side-nav .submenu-header.active,
 body.dark-mode .side-nav .submenu-header.active .submenu-toggle {
     background: #2e6b97;
     color:#fff;
     font-weight: bold;
 }

 body.dark-mode .side-nav a:hover,
 body.dark-mode .side-nav .submenu-header:hover,
 body.dark-mode .side-nav .submenu-header:hover .submenu-toggle {
     background: #7ecfff;
     color:  #232834;
     font-weight: bold;
 }

 body.dark-mode #closeNavBtn {
     color: #d3d7de;
 }


 body.dark-mode {
     background: #181c22;
     color: #d3d7de;
 }

body.dark-mode a{
    color: #84B1ED;
}

 body.dark-mode h1,
 body.dark-mode h2,
 body.dark-mode h3 {
     color: #7ecfff;
 }

 body.dark-mode .main-content {
     background: #181c22;
 }

 body.dark-mode .banner {
     color: #fff;
 }

 body.dark-mode .banner::before {
     background-color: rgba(0, 0, 0, 0.7);
 }



 body.dark-mode hr {
     border-color: #3a4a5a;
 }

 body.dark-mode #backToTopBtn::after {
     background: #232834;
     color: #7ecfff;
     border-color: #7ecfff;
 }

 body.dark-mode #toggleDarkModeBtn {
     background: #2e6b97;
 }

 /* 側邊導覽列樣式 */
 .side-nav {
     position: fixed;
     top: 0;
     left: -260px;
     width: 260px;
     height: 100%;
     background: #2e6b97;
     box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
     z-index: 3001;
     display: flex;
     flex-direction: column;
     padding-top: 60px;
     transition: left 0.3s cubic-bezier(.4, 0, .2, 1);
 }

 .side-nav.open {
     left: 0;
 }

 .side-nav a {
     color: #fff;
     padding: 18px 32px;
     width: 100%;
     text-decoration: none;
     font-size: 1.2em;
     transition: background 0.2s;
 }

 /* 統一選單項目的常態與互動樣式 */
 .side-nav a.active,
 .side-nav .submenu-header.active,
 .side-nav .submenu-header.active .submenu-toggle {
     background: #7ecfff;
     color: #2e6b97;
     font-weight: bold;
 }

 .side-nav a:hover,
 .side-nav .submenu-header:hover,
 .side-nav .submenu-header:hover .submenu-toggle {
     background: #3a4a5a;
     color: #fff;
 }

 /* 側邊欄開啟時隱藏選單按鈕 */
 #navMenuBtn {
     display: flex;
     position: fixed;
     align-items: center;
     justify-content: center;
     background: none;
     width: 48px;
     height: 48px;
     top: 16px;
     left: 16px;
     z-index: 3100;
     font-size: 2em;
     color: black;
     text-shadow: #ebebeb 1px 1px 2px;

     border: none;
     border-radius: 8px;
     padding: 6px 16px;
     cursor: pointer;
 }


 #navMenuBtn .menu-icon,
 #navMenuBtn .close-icon {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     display: block;
     width: 1em;
     height: 1em;
     font-size: 2em;
     line-height: 1;
     transition: opacity 0.3s, transform 0.3s;
     pointer-events: none;
 }

 #navMenuBtn .close-icon {
     opacity: 0;
     transform: translate(-50%, -50%) rotate(-90deg) scale(0.7);
 }

 .side-nav.open #navMenuBtn .menu-icon {
     opacity: 0;
     transform: translate(-50%, -50%) rotate(90deg) scale(0.7);
 }

 .side-nav.open #navMenuBtn .close-icon {
     opacity: 1;
     transform: translate(-50%, -50%) rotate(0deg) scale(1);
 }

 /* 讓 navMenuBtn 在側邊欄開啟時顯示（覆蓋原本 display:none） */
 .side-nav.open #navMenuBtn {
     display: flex !important;
 }

 /*黑暗模式切換按鈕*/
 #toggleDarkModeBtn {
     position: absolute;
     bottom: 12px;
     right: 50%;
     transform: translateX(50%);
     z-index: 3000;
     padding: 7px 18px;
     font-size: 1em;
     border-radius: 8px;
     border: none;
     background: #232834;
     color: #fff;
     cursor: pointer;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }

 /* 遮罩 */
 .side-nav-mask {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.3);
     z-index: 3000;
 }

 .side-nav.open~.side-nav-mask {
     display: block;
 }

 .page-section {
     margin-bottom: 40px;
     padding: 20px;
     border: 1px solid #ddd;
     border-radius: 5px;
 }

 /*晚間模式*/

 body.dark-mode {
     background: #181c22;
     color: #d3d7de;
 }

 body.dark-mode h1,
 body.dark-mode h2,
 body.dark-mode h3 {
     color: #7ecfff;
 }

 body.dark-mode .main-content {
     background: #181c22;
 }

 body.dark-mode .banner {
     color: #fff;
 }

 body.dark-mode .banner::before {
     background-color: rgba(0, 0, 0, 0.7);
 }

 body.dark-mode hr {
     border-color: #3a4a5a;
 }

 /* 基本重置和布局 */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: Arial, sans-serif;
     line-height: 1.6;
     color: #333;
 }

 hr {
     margin: 1rem;
 }

 h2 {
     color: #84B1ED;
 }

 li {
     margin-left: 1em;
 }


 .main-content {
     margin-left: auto;
     margin-right: auto;
     max-width: 900px;
     padding: 20px 32px;
 }

 /* 背景橫幅樣式 */
 .banner {
     background-image: url('../webp/banner.webp');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     width: 100%;
     height: 400px;
     aspect-ratio: 16/10;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     position: relative;
 }

 .banner::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.4);
 }

 .banner-content {
     position: relative;
     z-index: 1;
     max-width: 800px;
     padding: 0 20px;
 }

 .banner h1 {
     font-size: 3em;
     margin-bottom: 10px;
 }

 .banner .banner-content h1 {
     color: white;
 }

 .banner p {
     font-size: 1.2em;
 }

 @media screen and (max-width: 768px) {
     .banner h1 {
         font-size: 2em;
     }

     .banner p {
         font-size: 1em;
     }

     .main-content {
         max-width: 100%;
         padding-left: 20px;
         padding-right: 20px;
     }

 }

 /*劇透內容*/
 .spoiler_content {
     color: black;
     background-color: black;
     transition: color 0.3s;
     cursor: pointer;
 }

 .spoiler_content.clicked {
     color: white;
     cursor: unset;
 }

 .spoiler_image img {
     filter: blur(10px);
 }

 .spoiler_image:hover img {
     filter: blur(0);
 }

 /*頁腳*/
 footer {
     text-align: center;
     padding: 10px 0;
     font-size: 0.9em;
 }

 /*回到頂端按鈕*/
 #backToTopBtn {
     position: fixed;
     right: 22px;
     bottom: 32px;
     width: 104px;
     height: 78px;
     cursor: pointer;
     z-index: 2000;
     background: none;
     border: none;
     outline: none;
     padding: 4px;
     transition: opacity 0.3s;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     pointer-events: none;
 }

 #backToTopBtn.visible {
     opacity: 1;
     pointer-events: auto;
 }

 #backToTopBtn::after {
     content: "回到頂端⇧";
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: -26px;
     background: rgba(0, 0, 0, 0.4);
     color: white;
     border: white 1px solid;
     font-size: 12px;
     padding: 2px 9px;
     border-radius: 14px;
     text-align: center;
     pointer-events: auto;
     white-space: nowrap;
     opacity: 1;
 }

 #backToTopBtn img {
     width: 100%;
     height: 100%;
     display: block;
     pointer-events: none;
 }

 @media screen and (max-width: 768px) {
     #backToTopBtn {
         position: fixed;
         right: 12px;
         bottom: 32px;
         width: 52px;
         height: 39px;
         cursor: pointer;
         z-index: 2000;
         background: none;
         border: none;
         outline: none;
         padding: 4px;
         transition: opacity 0.3s;
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 0;
         pointer-events: none;
     }

     #backToTopBtn::after {

         left: 50%;
         transform: translateX(-50%);
         bottom: -20px;
         background: rgba(0, 0, 0, 0.4);
         color: white;
         border: white 1px solid;
         font-size: 9px;
         padding: 2px 9px;
         border-radius: 14px;
     }

     #backToTopBtn img {
         content: url(../picture/backtotop_small.gif);
     }
 }