/* 全局样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 确保 body 至少占据整个视口的高度 */
}

/* 导航栏基础样式（优先级低于HTML内嵌样式，避免冲突） */
nav {
    background-color: #333;
    color: black;
    display: flex;
    align-items: center;
    padding: 10px;
    height: auto; /* 确保导航栏高度自适应内容 */
}

nav .logo {
    margin-right: auto;
}

nav .logo img {
    height: 50px; /* 统一Logo图片高度 */
    width: auto; /* 保持图片宽高比 */
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: black;
    text-decoration: none;
}

/* 主内容区域样式 */
main {
    flex: 1;
}

/* 页脚基础样式 */
footer {
    font-size: 12px;
    color: #6e6e73;
    border-top: 1px solid #d2d2d7;
    padding: 20px 0;
    margin: 20px auto 0;
    width: 90%;
    max-width: 1024px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer a {
    color: #424245;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer p {
    margin-bottom: 8px;
}

/* 社交媒体区域基础样式 */
.social-media {
    margin-left: 5cm;
    text-align: center;
}

.social-media-text {
    margin-bottom: 5px;
}

.social-media-icon {
    font-size: 2em;
}

/* 小屏幕设备基础适配（优先级低于HTML内嵌的精细化适配） */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
    }

    nav .logo {
        margin-right: 0;
        margin-bottom: 10px;
    }

    nav ul {
        flex-direction: column;
        text-align: center;
    }

    nav ul li {
        margin: 5px 0;
    }

    footer {
        width: 95%;
        flex-direction: column;
        text-align: center;
    }

    .social-media {
        margin-left: 0;
        margin-top: 20px;
    }
}