body { background-color: #e5e5e5; margin: 0; font-family: "serif", "PMingLiU"; }
  .encyclopedia-container { background: #fff; max-width: 1200px; margin: 20px auto; min-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
  .faculty-header {
    padding: 30px 20px; /* 增加上下留白 */
    text-align: center;
    border-bottom: 2px double #333;
}

.faculty-header h1 {
    margin: 0;
    font-size: 36px;
    letter-spacing: 6px;
}
  .faculty-item { margin: 0 15px; cursor: pointer; color: #888; font-weight: bold; transition: 0.3s; display: inline-block; padding: 5px 10px; text-decoration: none; }
  .faculty-item.active { color: #000; border-bottom: 2px solid #000; }

  .faculty-introduction {
    margin-top: 15px;      /* 與 h1 的間距 */
    font-size: 16px;
    color: #666;           /* 稍微轉淡，呈現副標題感 */
    max-width: 800px;      /* 限制寬度，避免在寬螢幕上太長難以閱讀 */
    margin-left: auto;     /* 居中 */
    margin-right: auto;    /* 居中 */
    line-height: 1.6;
    font-style: italic;    /* 使用斜體增加學術質感 */
}
  
  .encyclopedia-main { display: flex; flex-grow: 1; }
.index-sidebar {
    display: flex;
    flex-direction: column;
    width: 240px;
    background: #fcfcfc;
    border-right: 1px solid #eee;
    flex-shrink: 0;
    position: sticky; 
    top: 0;
    height: 100vh; /* 讓側邊欄撐滿視窗高度 */
}
  
  /* 5. 索引項目美化 */
.index-item {
    cursor: pointer;
    line-height: 1.5;
    padding: 5px 10px;
    border-radius: 4px;
}
.index-item:hover {
    background-color: #f0f0f0;
}
  
  .content-display { flex-grow: 1; padding: 40px; }
  
        .category-item { padding: 10px 25px; cursor: pointer; color: #666; font-size: 0.9em; transition: 0.2s; }
        .category-item.active { color: #000; font-weight: bold; background: #f4f4f4; border-right: 4px solid #333; }
        
        .sub-link-item { font-size: 0.8em; color: #888; cursor: pointer; margin-top: 6px; transition: 0.2s; padding: 2px 0; }
        .sub-link-item:hover { color: #000; text-decoration: underline; }

  .entry { margin-bottom: 50px; }
  .entry-title { border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px; }
  /* 1. 調整正文：首行縮進與段落間距 */
.entry-content {
    line-height: 2.2;        /* 稍微再放寬一點行高 */
    letter-spacing: 0.5px;
    margin-bottom: 50px;
    color: #333;
    text-align: justify;
}

/* 針對內容中的段落進行首行縮進 */
/* 我們在渲染時會用 <br>，為了讓換行後的首行也縮進，這裡建議搭配 text-indent */
.entry-content {
    text-indent: 2em;       /* 首行縮進兩個字 */
}

        .description { 
          color: #444; 
          line-height: 1.6;
        }

        .description p {
          text-indent: 2em;    /* 只有第一行向右推 2 格 */
          padding-left: 0;     /* 確保左側沒有多餘空間 */
          margin: 0 0 0.5em 0; /* 控制段落與段落之間的間距 */
          line-height: 1.9;
          text-align: justify;
        }

        .separator { border: 0; border-top: 1px solid #eee; margin: 40px 0; }
        
        .sidebar-buttons { padding: 0 15px 15px 15px; border-bottom: 1px solid #eee; margin-bottom: 15px; display: flex; flex-direction: column; gap: 8px; }
        .nav-btn { background: white; border: 1px solid #333; padding: 8px; font-family: "serif"; font-size: 0.85em; cursor: pointer; text-align: left; }
    
    /* Container for the button to provide spacing */
    .sidebar-home-container {
    padding: 15px;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
    }

    /* The button itself */
    .home-button {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #666;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 0.85em;
    background: #fff;
    transition: all 0.2s ease;
    }

    .home-button:hover {
    background: #333;
    color: #fff;
    border-color: #333;
    }

    /* Ensure the sidebar header still looks good below it */
    .sidebar-header {
    padding: 15px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
    color: #333;
    background: #fcfcfc;
    }
    
    /* Container for the bottom button */
    .sidebar-footer-container {
    padding: 15px;
    border-top: 1px solid #eee;
    background: #f9f9f9;
    margin-top: auto; /* Pushes it to the bottom if the sidebar is flex */
    }

    /* Reusable style for sidebar buttons */
    .sidebar-action-btn {
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #666;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 0.85em;
    background: #fff;
    cursor: pointer;
    font-family: inherit; /* Keeps your serif font */
    transition: all 0.2s ease;
    }

    .sidebar-action-btn:hover {
    background: #333;
    color: #fff;
    border-color: #333;
    }
    
    /* Container at the bottom of sidebar */
.sidebar-footer-container {
    padding: 15px;
    border-top: 1px solid #eee;
    background: #f9f9f9;
    margin-top: auto; /* This pushes the button to the very bottom */
}

/* The style for the button */
.sidebar-action-btn {
    width: 100%;
    display: block;
    text-align: center;
    cursor: pointer;
    color: #666;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 0.85em;
    background: #fff;
    font-family: inherit;
    transition: all 0.2s ease;
}

.sidebar-action-btn:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}


.back-home-btn {
    background-color: #333;
    color: #fff ;
}

/* 側邊欄回到頂部 (灰色風格) */
.back-cover-btn {
    background-color: #555;
    color: #fff ;
    display: block;
    padding: 12px;
    margin-bottom: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: 0.3s;
}

.back-cover-btn:hover {
    background-color: #777;
    filter: brightness(1.1);
}

/* 3. 右下角回到頂部按鈕 */
#scrollTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #333;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none; /* 初始隱藏，由 JS 控制顯示 */
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    font-size: 20px;
}

.category-title {
    margin-top: 10px;
}
.sub-item {
    border-left: 1px solid #ddd;
    margin-left: 10px;
}

.sidebar-nav-btn {
    display: block;
    padding: 12px;
    margin-bottom: 10px;    /* 按鈕之間的間距 */
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: 0.3s;
}

.sidebar-fixed-nav {
    padding: 20px 20px 10px 20px;
    background: #fcfcfc;
    z-index: 10;
    border-bottom: 1px solid #eee;
}

/* 讓下方的索引列表可以獨立捲動 */
.sidebar-scroll-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px 20px;
}

/* 按鈕樣式保持一致 */
.sidebar-nav-btn {
    display: block;
    padding: 12px;
    margin-bottom: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    font-size: 15px;
}
.back-home-btn { background-color: #333; color: #fff; }
.back-top-btn { background-color: #f8f8f8; color: #333; border: 1px solid #ddd; }

/* 左側索引大標題樣式 */
.index-topic-header {
    font-weight: bold;
    color: #8b0000;
    background-color: #f0f0f0;
    padding: 8px 12px;
    margin-top: 15px;
    font-size: 1.1em;
    border-radius: 4px;
}

/* 左側小標題縮進樣式 */
.index-item.sub-item {
    display: block;
    padding: 5px 25px; /* 增加左邊距，產生縮進效果 */
    font-size: 0.95em;
    color: #555;
    text-decoration: none;
    border-bottom: 1px dashed #eee;
}

.index-item.sub-item:hover {
    background-color: #fff5f5;
    color: #8b0000;
}

/* 右側大主題標題 */
.topic-main-title {
    color: #fff;
    background: #8b0000;
    padding: 10px 20px;
    margin-top: 50px;
    border-radius: 5px;
}