.view-section {
      display: none;
  }
  .active-view {
      display: block;
  }
  .main-view-section {
      display: none;
  }
  .active-main-view {
      display: block;
  }

/* 桌機版正常顯示為橫向 Header */
  .mobile-offcanvas {
      display: flex;
      flex-basis: auto;
      flex-grow: 1;
      align-items: center;
  }
  .mobile-offcanvas-header, .offcanvas-backdrop-custom {
      display: none;
  }
  
  /* 手機版/平板 (< 992px) 自動轉換為右滑出 Offcanvas 菜單 */
  @media (max-width: 991.98px) {
      .mobile-offcanvas {
          position: fixed;
          top: 0;
          right: -320px; /* 初始隱藏於右側 */
          width: 300px;
          height: 100vh;
          background-color: #1266f1; /* 背景色同 bg-primary */
          z-index: 1050;
          flex-direction: column;
          align-items: flex-start;
          padding: 1.5rem;
          transition: right 0.3s ease-in-out;
          overflow-y: auto;
          box-shadow: -5px 0 15px rgba(0,0,0,0.3);
      }
      .mobile-offcanvas.show-menu {
          right: 0; /* 滑出的終點 */
      }
      .mobile-offcanvas-header {
          display: flex;
          width: 100%;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid rgba(255,255,255,0.2);
          padding-bottom: 1rem;
          margin-bottom: 2rem;
      }
      .offcanvas-backdrop-custom {
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          background-color: rgba(0,0,0,0.5);
          z-index: 1040;
          opacity: 0;
          transition: opacity 0.3s ease-in-out;
          pointer-events: none; /* 防止點擊穿透 */
      }
      .offcanvas-backdrop-custom.show-menu {
          display: block;
          opacity: 1;
          pointer-events: auto;
      }
      /* 優化手機版下的清單間隔 */
      .mobile-offcanvas .navbar-nav {
          width: 100%;
          flex-direction: column;
      }
      .mobile-offcanvas .nav-item {
          margin-bottom: 1rem;
      }
  }