/* 全局页面基础样式设置 */
body {
    margin: 0;            /* 移除默认外边距 */
    padding: 0;           /* 移除默认内边距 */
    width: 100vw;         /* 宽度占满视口宽度 */
    height: 100vh;        /* 高度占满视口高度 */
    background: none;     /* 无背景色（通常由父容器设置背景） */
    overflow: hidden;     /* 隐藏滚动条（适合全屏应用） */
}

/* 主容器布局 */
.main {
    width: 100vw;         /* 占满视口宽度 */
    height: 100vh;        /* 占满视口高度 */
    display: flex;        /* 启用弹性布局 */
    flex-direction: row;  /* 子元素横向排列 */
    align-items: center;  /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    margin: 0 0 100vh 0; /* 底部留白（用于特殊滚动效果） */
}

/* 个人信息卡片样式 */
.about-page {
    width: 300px;        /* 固定宽度 */
    height: 550px;       /* 固定高度 */
    align-items: center; /* 内容垂直居中 */
    margin: 0 8px 0 0;   /* 右侧留出间隙 */
    background-color: rgba(255, 255, 255, 0.75); /* 半透明白色背景 */
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); /* 柔和阴影 */
    border-radius: 20px;  /* 大圆角 */
}

/* 个人信息区域 */
.me {
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
    margin: 35px;          /* 四周留白 */
    max-height: 400px;     /* 限制最大高度 */
}

/* 姓名标题样式 */
.me-name h1,
.me-name h2 {
    margin-top: -10px;    /* 微调上边距 */
    margin-bottom: 4px;   /* 微调下边距 */
    line-height: 1.6;     /* 行高设定 */
}

/* 头部区域（头像+姓名） */
.me-header {
    display: flex;        /* 启用弹性布局 */
    align-items: center;  /* 垂直居中 */
}

/* 头像容器 */
.me-avatar {
    width: 100px;         /* 固定宽度 */
    height: 100px;        /* 固定高度 */
    overflow: hidden;     /* 隐藏溢出部分 */
    margin-bottom: 12px;  /* 底部间距 */
    padding-left: 8px;    /* 左侧内边距 */
    background: none;     /* 透明背景 */
    border-radius: 12px;  /* 圆角效果 */
}

/* 头像图片样式 */
.me-avatar img {
    width: 100%;         /* 填充容器 */
    height: 100%;        /* 填充容器 */
    object-fit: cover;   /* 保持比例裁剪 */
    display: block;      /* 消除图片底部间隙 */
}

/* 个人描述区域 */
.me-description {
    width: 100%;         /* 占满容器宽度 */
    height: 60%;         /* 相对高度 */
    box-sizing: border-box; /* 包含内边距在尺寸内 */
    overflow-y: auto;    /* 内容过多时显示滚动条 */
}

/* 社交链接区域 */
.about-social {
    display: flex;
    height: 20%;         /* 相对高度 */
    margin: 35px;        /* 四周留白 */
    justify-content: center; /* 内容水平居中 */
}

/* 社交图标列表 */
.social-list {
    display: flex;
    flex-wrap: wrap;     /* 允许换行 */
    gap: 10px;           /* 元素间距 */
    justify-content: flex-start; /* 左对齐 */
    list-style: none;    /* 去除列表符号 */
    padding: 0;          /* 清除内边距 */
    margin: 6px 0 0 0;   /* 上边距 */
    max-width: 330px;    /* 最大宽度限制 */
}

/* 社交图标项 */
.social-list li {
    margin: 0;           /* 清除默认外边距 */
}

/* 社交图标样式 */
.link-icon {
    width: 36px;         /* 固定尺寸 */
    height: 36px;
    object-fit: cover;   /* 保持比例 */
    background: #fff;    /* 白色背景 */
    transition: box-shadow 0.2s; /* 阴影过渡动画 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* 轻量阴影 */
    border-radius: 6px;  /* 小圆角 */
}

/* 社交图标悬停效果 */
.link-icon:hover {
    box-shadow: 0 4px 16px rgba(213, 224, 213, 0.25); /* 悬停时增强阴影 */
}

/* 链接展示区域 */
.list-page {
    height: 550px;      /* 与个人信息卡片同高 */
    width: 960px;       /* 固定宽度 */
    margin: 0;          /* 清除外边距 */
    background-color: rgba(255, 255, 255, 0.75); /* 半透明白色 */
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    box-sizing: border-box; /* 包含内边距 */
    display: flex;
    flex-direction: column; /* 垂直布局 */
    padding: 35px;      /* 内边距 */
    border-radius: 20px; /* 大圆角 */
}

/* 链接列表容器 */
.link-list {
    display: flex;
    flex-wrap: wrap;    /* 允许换行 */
    gap: 10px;          /* 元素间距 */
    padding: 0;         /* 清除内边距 */
    margin: 0;          /* 清除外边距 */
    width: 100%;       /* 占满容器 */
    box-sizing: border-box; /* 包含内边距 */
}

/* 单个链接卡片 */
.link-item {
    position: relative;  /* 定位基准 */
    overflow: hidden;    /* 隐藏溢出内容 */
    flex: 0 0 215px;    /* 固定宽度（不伸缩） */
    max-width: 215px;   /* 最大宽度限制 */
    height: 140px;      /* 固定高度 */
    background: rgba(250, 250, 250, 0.9); /* 半透明白色背景 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* 轻阴影 */
    margin: 0;          /* 清除外边距 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s; /* 阴影过渡动画 */
    border-radius: 14px; /* 中等圆角 */
}

/* 链接卡片背景图 */
.link-item img {
    position: absolute; /* 绝对定位 */
    top: 0; left: 0;
    width: 100%;        /* 占满容器 */
    height: 100%;
    object-fit: cover;  /* 保持比例裁剪 */
    border-radius: 14px; /* 继承父元素圆角 */
    z-index: 1;         /* 底层 */
}

/* 链接标题文字 */
.link-item p {
    position: absolute; /* 绝对定位 */
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 10px 12px 8px 12px; /* 内边距 */
    color: #222;        /* 深灰色文字 */
    font-size: 1rem;    /* 标准字体大小 */
    border-bottom-left-radius: 14px; /* 底部圆角匹配 */
    border-bottom-right-radius: 14px;
    z-index: 2;         /* 显示在图片上方 */
    pointer-events: none; /* 防止遮挡点击事件 */
}

/* 响应式设计：小屏幕适配 */
@media (max-width: 700px) {
    .list-page {
        display: none;  /* 在小屏幕隐藏链接展示区 */
    }
    /* 此时只显示.about-page个人卡片 */
}