/* =========================================
   變數定義 - 精緻虛空風格 (Refined Void Style)
   ========================================= */
:root {
    /* 主色調：乾淨、高對比 */
    --bg-clean: #faf8f4;       /* 極淺的米白色，乾淨溫潤 */
    --bg-sidebar: #f2efe8;     /* 側邊欄稍深一點點，做出層次 */
    --text-dark: #222222;      /* 近乎純黑，提供最佳閱讀對比 */
    
    /* 強調色：深邃莊重 */
    --void-purple: #382247;    /* 更深沉的虛空紫 */
    --dried-blood: #9e2a2b;    /* 精緻的深紅 */
    --bronze-gold: #b08d57;    /* 柔和的古銅金 */

    /* 介面設定 */
    --sidebar-width: 260px;    /* 稍微縮窄側邊欄，讓主內容更寬 */
    --header-height: 50px;
}

/* =========================================
   全域設定 (Global Reset)
   ========================================= */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100dvh; /* 核心：充滿視窗高度 */
    overflow: hidden;
    background-color: var(--bg-clean); /* 應用乾淨背景 */
    color: var(--text-dark);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei", sans-serif; /* 現代化系統字體優先 */
}

/* =========================================
   佈局容器 (Layout Container)
   ========================================= */
.app-container {
    display: flex;
    width: 100%;
    height: 100%;
}

/* =========================================
   側邊欄 (Sidebar)
   ========================================= */
#sidebar {
    width: var(--sidebar-width);
    height: 100%;
    background-color: var(--bg-sidebar);
    border-right: 1px solid rgba(0, 0, 0, 0.08); /* 輕柔的邊界線 */
    display: flex;
    flex-direction: column;
    z-index: 20;
    transition: transform 0.3s ease;
    /* 移除厚重的陰影，改用輕薄的 */
    box-shadow: 1px 0 5px rgba(0, 0, 0, 0.03);
}

.sidebar-header {
    padding: 15px 20px;
    background-color: var(--void-purple);
    /* 加入微妙的紋理或漸層讓它不無聊 */
    background-image: linear-gradient(to bottom right, var(--void-purple), #2a1835);
    color: #ffffff;
    text-align: left; /* 改為左對齊，更現代 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* 底部裝飾線 */
    position: relative;
}
.sidebar-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, var(--bronze-gold), transparent);
}

.sidebar-header h1 {
    margin: 0;
    font-family: "Times New Roman", serif; /* 保留標題的古樸感 */
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 1.4rem;
}

.sidebar-header .subtitle {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 2px;
    display: block;
    margin-top: 4px;
    font-weight: 300;
}

/* 目錄列表區 */
.tree-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px 10px;
    padding-bottom: 120px; /* 底部緩衝 */
    scrollbar-width: thin;
    scrollbar-color: #d1c7b7 transparent;
}

/* 目錄項目樣式 */
.tree-node { margin-bottom: 1px; }

.node-content {
    display: flex;
    align-items: center;
    padding: 6px 8px; /* 更緊湊的間距 */
    border-radius: 6px;
    cursor: default;
    transition: all 0.2s ease;
    color: #555; /* 非當前頁面文字稍淡 */
}

.node-content:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--text-dark);
}

/* 高亮當前頁面 */
.node-content.active-page {
    background-color: rgba(158, 42, 43, 0.08); /* 極淡的紅色背景 */
    color: var(--dried-blood);
    font-weight: 600;
}

/* 箭頭圖示 */
.toggle-icon {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #888;
    font-size: 10px;
    transition: color 0.2s;
}
.node-content:hover .toggle-icon { color: var(--text-dark); }
.toggle-icon::before {
    content: '►'; /* 使用實心箭頭更俐落 */
    font-family: monospace; /* 確保跨平台顯示一致 */
    transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.expanded > .node-content > .toggle-icon::before { transform: rotate(90deg); }
.is-leaf .toggle-icon { visibility: hidden; }

/* 文字標題 */
.node-text {
    flex: 1;
    cursor: pointer;
    font-size: 0.9rem;
    padding-left: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 子選單容器 */
.node-children {
    padding-left: 22px; /* 縮排 */
    display: none;
    /* 移除虛線，讓畫面更乾淨，改用縮排表現層級 */
    /* border-left: 1px solid rgba(0,0,0,0.05); */
}
.expanded > .node-children { display: block; }

/* =========================================
   主內容區 (Main Content)
   ========================================= */
#main-content {
    flex: 1;
    position: relative;
    height: 100%;
    /* 核心修正：移除所有可能的背景色設定，讓它透明 */
    background: transparent; 
    overflow: hidden; /* Iframe 自身會有捲軸 */
}

/* 核心修正：確保 Iframe 填滿且無預設邊框背景 */
#content-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background-color: transparent; /* 確保 Iframe 背景透明 */
}

/* =========================================
   手機版適配元件
   ========================================= */
/* 漢堡按鈕 */
#mobile-menu-btn {
    position: fixed;
    top: 12px; left: 15px;
    z-index: 100;
    background-color: var(--void-purple);
    color: var(--bg-clean);
    border: none;
    border-radius: 8px; /* 方形圓角更現代 */
    width: 40px; height: 40px;
    display: none;
    justify-content: center; align-items: center;
    box-shadow: 0 2px 8px rgba(56, 34, 71, 0.3);
    cursor: pointer;
    transition: background-color 0.2s;
}
#mobile-menu-btn:active { background-color: #2a1835; }

/* 遮罩層 */
#overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 稍深的遮罩 */
    z-index: 10;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    backdrop-filter: blur(2px); /* 加入毛玻璃效果提升質感 */
}

/* =========================================
   RWD 斷點 (< 768px)
   ========================================= */
@media (max-width: 768px) {
    #mobile-menu-btn { display: flex; }
    #sidebar {
        position: fixed; left: 0; top: 0;
        box-shadow: 2px 0 12px rgba(0,0,0,0.15); /* 手機版側邊欄陰影加重 */
        transform: translateX(-100%);
    }
    #sidebar.open { transform: translateX(0); }
    #overlay.active { opacity: 1; visibility: visible; }
}