/* 通用样式和重置 */
body {
    /* 使用系统字体栈，优先使用常用中文字体 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6; /* 清新自然的背景色 */
    color: #333; /* 基础字体颜色 */
    display: flex; /* 使用flexbox居中内容 */
    justify-content: center;
    align-items: flex-start; /* 内容靠顶部对齐 */
    min-height: 100vh; /* 确保背景覆盖整个视口 */
}

.container {
    width: 90%; /* 容器宽度 */
    max-width: 700px; /* 最大宽度，避免在宽屏幕上过宽 */
    margin: 40px auto; /* 上下40px，左右自动居中 */
    padding: 30px;
    background-color: #fff; /* 容器背景为白色 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 柔和的阴影，增加设计感 */
    border-radius: 8px; /* 圆角边框 */
}

header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee; /* 底部细线分隔 */
}

header h1 {
    color: #5a9b9b; /* 一个清新自然的标题颜色 */
    margin: 0;
    font-weight: 500; /* 稍微粗一点的字体 (注意: 系统字体可能不完全支持所有权重) */
}

/* 笔记列表样式 */
.note-list {
    list-style: none; /* 移除默认列表点 */
    padding: 0;
    margin: 0;
}

.note-item {
    margin-bottom: 15px; /* 每个笔记项之间的间距 */
    border: 1px solid #e0e0e0; /* 笔记项边框 */
    border-radius: 5px; /* 笔记项圆角 */
    overflow: hidden; /* 防止伪元素溢出 */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* 添加过渡效果 */
}

.note-item:last-child {
    margin-bottom: 0; /* 最后一个笔记项底部无间距 */
}

.note-link {
    display: block; /* 使链接填充整个列表项区域，更容易点击 */
    padding: 15px 20px; /* 链接内部填充 */
    text-decoration: none; /* 移除下划线 */
    color: #333; /* 链接文字颜色 */
    font-weight: 400; /* 正常字体粗细 */
    background-color: #fff; /* 链接背景色 */
    position: relative; /* 用于伪元素定位 */
    z-index: 1; /* 确保文字在伪元素之上 */
}

/* 鼠标悬停效果 */
.note-item:hover {
    transform: translateY(-3px); /* 向上轻微移动 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* 阴影变大 */
}

.note-item:hover .note-link {
    color: #007bff; /* 悬停时改变文字颜色 */
}

/* 添加一个伪元素作为背景高亮效果 */
.note-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e9f7ef; /* 清淡的背景高亮色 */
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.2s ease-in-out; /* 添加过渡效果 */
    z-index: -1; /* 放在文字下方 */
}

.note-item:hover .note-link::before {
    opacity: 1; /* 悬停时显示背景 */
}

/* 底部页脚样式 */
footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee; /* 顶部细线分隔 */
    color: #888; /* 页脚文字颜色 */
    font-size: 0.9em;
}