/* 基本樣式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    overflow: hidden;  /* 防止頁面滾動 */
}


/* 目錄樣式 */
.menu-container {
    position: fixed;
    top: 0;
    left: -100%;  /* 預設隱藏，將目錄移出畫面外 */
    height: 100%;
    width: auto;   /* 根據內容自動調整寬度 */
    min-width: 250px;  /* 設定最小寬度，防止過小 */
    padding-right: 20px;  /* 在右邊增加 20px 的空間 */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    z-index: 1000;
    transition: left 0.3s ease-in-out; /* 加入過渡效果 */
    overflow-y: auto;  /* 只允許縱向滾動 */
    overflow-x: hidden;  /* 禁止橫向滾動 */
}

/* 目錄內容 */
.menu {
    padding: 20px;
    overflow-y: auto;
    padding-top: 60px;  /* 增加上邊距以避免與按鈕重疊 */
    display: flex;
    flex-direction: column;  /* 目錄項目垂直排列 */
    overflow-x: hidden;  /* 禁止橫向滾動 */
}

/* 菜單項目列表 */
.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 每個菜單項目 */
.menu ul li {
    margin: 10px 0;
    white-space: nowrap;  /* 保證文字不換行 */
    display: block;  /* 保證每個菜單項目占用一行 */
    padding-left: 0;  /* 沒有額外的縮排 */
    color: #666666;  /* 預設文字顏色為淺灰色 */
}

/* 顯示超連結的項目文字顏色為白色 */
.menu ul li a {
    text-decoration: none;
    color: white;  /* 超連結項目文字顏色為白色 */
    font-size: 1.2rem;
    display: block;
    padding: 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    text-align: left;  /* 左對齊文字 */
    padding-left: 20px;  /* 增加左邊距，以達到縮排效果 */
    margin-left: 0;  /* 保證同一層級的項目不會偏移 */
}

/* 目錄項目懸停效果 */
.menu ul li a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* 主內容 */
.main-content {
    display: flex;
    height: 100vh;  /* 設置主內容區域高度為100vh */
    padding: 0;
    position: relative;
}

/* iframe 容器樣式 */
.iframe-container {
    flex-grow: 1;  /* 使 iframe 撐滿剩餘空間 */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%; /* 讓iframe全寬顯示 */
}

/* 按鈕 */
.toggle-menu {
    font-size: 1.5rem;  /* 減小字體大小 */
    background-color: rgba(0, 0, 0, 0.7);  /* 與目錄底色一致 */
    color: white;
    border: none;
    padding: 12px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1001;  /* 確保按鈕顯示在上層 */
    width: 40px;   /* 設置正方形按鈕的寬度 */
    height: 40px;  /* 設置正方形按鈕的高度 */
    border-radius: 5px;  /* 圓角效果 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* iframe 設置全畫面 */
#content-frame {
    width: 100%;   /* 撐滿寬度 */
    height: 100vh; /* 撐滿高度 */
    border: none;  /* 去掉邊框 */
    overflow: hidden; /* 防止滾動條顯示 */
}