html {
    overflow-y: scroll;
}


/* --- 1. 全局变量 --- */
:root {
    --primary-color: #003366; /* 深学术蓝 */
    --accent-color: #c49b66;  /* 金色强调 */
    --text-dark: #222;
    --text-gray: #555;
    --bg-color: #f4f4f4;
    --sidebar-width: 280px;
}

/* --- 2. 基础布局 --- */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body {
    font-family: 'Source Sans Pro', sans-serif, "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif;
    background-color: var(--bg-color);
    color: var(--text-dark);
    line-height: 1.6;
    font-size: 1.0rem;
    
    /* 核心：确保 body 至少占满屏幕高度，并允许内部容器伸展 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- 3. 主容器 --- */
.container {
    display: flex;
    width: 95%;
    max-width: 1150px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
    margin: 20px auto; /* 上下留出间距，左右居中 */
    
    /* 核心：作为 body 的子元素，自动撑开剩余垂直空间 */
    flex: 1; 
}




/* --- 4. 左侧侧边栏 --- */
.sidebar {
    width: var(--sidebar-width);
    background: #fdfdfd;
    padding: 40px 30px;
    border-right: 1px solid #eaeaea;
    text-align: center;
    flex-shrink: 0; /* 防止侧边栏被压缩 */
}

.avatar-box {
    width: 160px;
    height: 160px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
     box-shadow: 0 8px 20px rgba(0, 51, 102, 0.15);  /*box-shadow: 0 4px 10px rgba(0,0,0,0.1);*/
    background-color: #e0e0e0;
}
.avatar-box img { width: 100%; height: 100%; object-fit: cover; }

.name { font-size: 1.8rem; margin-bottom: 5px; color: var(--primary-color); font-weight: bold; }
.title { font-size: 0.9rem; color: var(--text-gray); margin-bottom: 20px; }

.contact-info { 
    text-align: left; 
    margin-top: 30px; 
    font-size: 0.9rem; 
    list-style: none !important;
    padding: 0 !important;
}
.contact-info li { margin-bottom: 15px; display: flex; align-items: center; }
.contact-info i { width: 25px; text-align: center; color: var(--accent-color); margin-right: 8px; }
.contact-info a { color: var(--primary-color); text-decoration: none; }
.contact-info a:hover { color: var(--accent-color); text-decoration: underline; }

/* --- 5. 右侧主要内容区 --- */
.main-content {
    flex: 1;
    padding: 50px 60px;
    
    /* 核心：将右侧设为垂直 Flex 容器，以便控制内部元素（#main 和 footer） */
    display: flex;
    flex-direction: column;
}

/* 导航菜单样式 */
.nav {
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
    padding-bottom: 10px;
    flex-shrink: 0; /* 导航高度固定 */
}
.nav a {
    margin-right: 30px;
    font-weight: bold;
    color: #999;
    text-transform: uppercase;
    text-decoration: none;
}
.nav a.active, .nav a:hover {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 12px;
}

/* 正文区域 - 核心“弹簧” */
#main {
    flex: 1; /* 核心：即使内容很少，也会自动向下撑开，将页脚推到底部 */
}

/* --- 6. 标题装饰线 --- */
h2 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    position: relative;
    margin-top: 30px;
}
h2::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--accent-color);
}

/* --- 7. 列表与通用链接 --- */
a { color: #52adc8; transition: 0.3s; }
a:hover { color: var(--accent-color); }

ul.pub-list {
    list-style: disc !important;
    padding-left: 25px !important;
    margin: 20px 0;
}
ul.pub-list li {
    margin-bottom: 12px;
    color: var(--text-dark);
}

/* --- 8. 页脚样式 --- */
footer {
    text-align: center;
    font-size: 0.8rem;
    color: #aaa;
    border-top: 1px solid #eee;
    padding: 20px 0;
    margin-top: 40px; /* 与上方内容保持间距 */
    flex-shrink: 0;    /* 保证页脚高度不被压缩 */
}

/* --- 9. 响应式适配 --- */
@media (max-width: 850px) {
    .container { flex-direction: column; margin: 0; border-radius: 0; }
    .sidebar { width: 100%; border-right: none; border-bottom: 1px solid #eee; }
    .main-content { padding: 30px 20px; }
}

/* 修改学生名字的颜色 */
ul li strong {
    color:#003366; /* 这里使用的是主页的学术蓝，您可以改成喜欢的颜色 */
    font-weight: 400; /* 保持加粗 */
    margin-right: 5px; /* 与后面的介绍保持一点间距 */
}

/* 如果您想让名字在鼠标悬停时变色，可以加这一段 */
ul li strong:hover {
    color: var(--accent-color); /* 悬停时变成金色 */
}