.navbar {
    display: flex;
    flex-direction: column; /* 垂直佈局 */
    align-items: flex-start; /* 左對齊 */
    padding: 50px; /* 高50px、寬50px */
    width: 360px; /* 固定寬度 */
    height: 100vh; /* 讓容器高度佔滿視窗 */
    background-color: white; /* 背景色 */
    color: black; /* 字體顏色 */
    gap: 50px; /* 自動分配垂直間距 */
    box-sizing: border-box; /* 包含 padding 在寬高計算中 */
    overflow-y: auto; /* 若內容超出，允許滾動 */
}




.name-title {
    text-decoration: none; /* 去掉超链接的下划线 */
    display: block; /* 水平佈局 */
    width: 100%; /* 寬度佔滿父容器 */
    white-space: nowrap; /* 禁止換行 */
    padding: 0; /* 無內邊距 */
    text-align: start; /* 靠左置中 */
    font-size: clamp(16px, 2.5vw, 28px); /* 自適應字體大小，最小16px，最大28px */
    font-family: "Bungee", sans-serif;
}




.sidebar {
    list-style: none;
    flex-direction: column; /* 垂直排列 */
    align-items: flex-start; /* 左對齊 */
    gap: 10px; /* 垂直間距為 10px */
    padding: 0; /* 無內邊距 */
    margin: 0;
    font-size: 20px; /* 字體大小 */
    font-family: "Blinker", sans-serif;
}




.sidebar-item {
    margin-bottom: 15px;
    font-size: 20px; /* 字體大小 */
    font-family: "Blinker", sans-serif;
}




.sidebar-item a {
    font-size: 18px; /* 字體大小 */
}




.dropdown-btn {
    background: none;
    border: none;
    color: black;
    cursor: pointer;
    text-align: left;
    padding: 10px 0;
    transition: none;
    width: 100%;
    font-size: 18px;
}




.dropdown {
    list-style: none;
    margin-top: 5px;
    display: none;
    padding-left: 10px;
}




.dropdown.active {
    display: block; /* 當展開時顯示 */
}




.dropdown a {
    color: black;
    text-decoration: none;
    font-size: 16px;
    display: block;
    margin: 5px 0;
}




.icons {
    display: flex; /* 使用 Flexbox 排列 */
    justify-content: flex-start; /* 靠左對齊 */
    align-items: flex-end; /* 靠底部對齊 */
    padding: 0; /* 移除內邊距，依靠 navbar 的 padding 設置 */
    margin-top: auto; /* 將 icons 推到底部 */
    gap: 45px; /* icon 之間的間距 */
}




.icons img {
    width: auto; /* 自動寬度 */
    height: auto; /* 自動高度 */
    max-width: 100%; /* 不超過父容器寬度 */
    max-height: 50px; /* 最大高度限制為 50px，避免過大 */
    object-fit: contain; /* 確保圖片適配比例 */
    cursor: pointer;
}





.horizontal-navbar {
    display: none;

    position: fixed; /* 固定在视窗 */
    top: 0; /* 距离视窗顶部为 0 */
    left: 0; /* 距离视窗左边为 0 */
    width: 100%; /* 宽度占满视窗 */
    z-index: 1000; /* 确保悬浮在所有内容上 */
    background-color: white; /* 背景色 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 下方阴影 */
    padding: 25px 50px 0; /* 上25px，左右50px，下0 */
}

/* 默认隐藏移动版的 sidebar */
.horizontal-navbar .sidebar {
    display: none; /* 仅隐藏移动版的 sidebar */
    flex-direction: column;
    background-color: white;
    padding: 10px 50px 0px;
    position: absolute; /* 浮动定位 */
    left: 0;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.horizontal-navbar .sidebar.active {
    display: flex; /* 显示为弹性布局 */
}

.horizontal-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.horizontal-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 0px 10px;
    width: 100%;
}

.horizontal-menu-title {
    flex-grow: 1;
    font-size: clamp(16px, 6vw, 28px);
    text-decoration: none; /* 去掉超链接的下划线 */
    white-space: nowrap; /* 禁止換行 */
    padding: 0; /* 無內邊距 */
    text-align: start; /* 靠左置中 */
    font-family: "Bungee", sans-serif;
}

.menu-toggle-btn {
    margin-left: auto;
    background: none; /* 无背景 */
    border: none; /* 无边框 */
    font-size: clamp(16px, 6vw, 28px);
    color: black; /* 按钮颜色 */
    cursor: pointer; /* 鼠标悬停变成手型 */
    flex-shrink: 0; /* 不允许按钮缩小 */
}



/* Responsive: Show horizontal-navbar on mobile */
@media (max-width: 768px) {
    .horizontal-navbar {
        display: block !important;
    }

    .navbar {
        display: none !important;
    }

    .content-main-page,
    .content-project-page {
        padding: 80px 50px 50px 50px; /* 上、右、下、左内边距 */
        box-sizing: border-box; /* 确保 padding 包含在宽度内 */
    }
}