/**
 * 山水学社官网样式
 * 单屏自适应布局，禁止滚动
 * 更新时间: 2025-12-07
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background-color: #FFFFFF;
}

.container {
    width: 100%;
    height: 100vh;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 安全宽度容器 */
.safe-width {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    height: 100%;
}

/* main-content内的安全宽度容器需要绝对定位 */
.main-content > .safe-width {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* 顶部导航栏 */
.navbar {
    width: 100%;
    height: 60px;
    background-color: #FFFFFF;
    position: relative;
    border-bottom: none;
}

.avatar-container {
    position: absolute;
    left: 90px;
    top: 10px;
    width: 40px;
    height: 40px;
}

.avatar {
    width: 40px;
    height: 40px;
    background-color: #FFFFFF;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.avatar-inner {
    position: absolute;
    left: 7px;
    top: 7px;
    width: 26px;
    height: 26px;
    background: #C5FD1E;
    border-radius: 50%;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

.avatar-inner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    background: #1F2B38;
    border-radius: 50%;
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

.avatar-inner::after {
    content: '';
    position: absolute;
    left: 5.57px;
    top: 0.54px;
    width: 19.08px;
    height: 18.28px;
    background-color: #1F2B38;
    border-radius: 50%;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

.logo-container {
    position: absolute;
    left: 0;
    top: 10px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo {
    height: 40px;
    width: 40px;
    display: block;
}

.logo-text {
    height: 18px;
    width: auto;
    display: block;
}

/* 顶部导航栏自适应 */
.navbar {
    flex-shrink: 0;
}

/* 主内容区 - 占满剩余高度 */
.main-content {
    width: 100%;
    flex: 1;
    position: relative;
    padding: 0;
    overflow: hidden;
}

/* 右侧装饰 - Group 1573 (在group-1181上层) */
.decoration-left {
    position: absolute;
    right: 0;
    top: 20px; /* 距离安全区域顶部20px */
    width: auto;
    height: auto;
    z-index: 10;
    pointer-events: none;
}

.decoration-left .decoration-image {
    width: auto;
    height: 900px;
    object-fit: contain;
}

/* 右侧装饰 - Group 1181 */
.decoration-right {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

.decoration-right .decoration-image {
    width: 950px;
    height: auto;
    object-fit: contain;
}

/* 中央内容区 */
.content-center {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 5% 0;
}

/* 主标题 */
.title-container {
    text-align: left;
    margin-bottom: 40px;
}

.title-text {
    width: 45%;
    max-width: 570px;
    min-width: 280px;
    height: auto;
    display: block;
}

/* 副标题 */
.subtitle-container {
    text-align: left;
    margin-bottom: 2%;
}

.subtitle-text {
    width: 20%;
    max-width: 250px;
    min-width: 150px;
    height: auto;
    display: block;
}

/* 二维码区域 */
.qr-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    margin-top: 0;
    margin-bottom: 3%;
}

.qr-border {
    width: auto;
    min-width: 400px;
    height: 65px;
    border: 2px solid #1F2B38;
    border-radius: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    background-color: transparent;
    position: relative;
    overflow: visible;
}

.qr-left {
    flex: 1;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-right: 20px;
}

.qr-left .subtitle-text {
    height: 34px;
    width: auto;
}

.qr-right {
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.scan-button {
    width: 160px;
    height: 100%;
    background-color: #1F2B38;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.scan-button:hover {
    background-color: #2a3a4a;
}

.scan-text {
    width: 110px;
    height: auto;
    display: block;
}

.qr-code-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.qr-code {
    width: 160px;
    height: 160px;
    object-fit: contain;
    background-color: #FFFFFF;
    padding: 5px;
    display: block;
}

/* 底部备案信息 */
.footer-icp {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1100px;
    z-index: 10;
}

.icp-text {
    font-size: 13px;
    color: #1F2B38;
    margin: 0;
    text-align: left;
}

/* 响应式设计 - 平板 */
@media (max-width: 1024px) {
    .decoration-left {
        width: 30%;
        opacity: 0.6;
    }

    .decoration-right {
        width: 55%;
        opacity: 0.6;
    }

    .title-text {
        width: 55%;
        min-width: 260px;
    }

    .subtitle-text {
        width: 25%;
        min-width: 140px;
    }

    .qr-border {
        width: 320px;
        height: 55px;
    }

    .qr-right {
        width: 140px;
    }

    .scan-button {
        width: 136px;
        height: 51px;
    }

    .qr-code {
        width: 110px;
        height: 110px;
    }
}

/* 响应式设计 - 手机 */
@media (max-width: 768px) {
    .navbar {
        height: 50px;
    }

    .avatar-container {
        left: 20px;
        top: 8px;
        width: 34px;
        height: 34px;
    }

    .avatar {
        width: 34px;
        height: 34px;
    }

    .logo-container {
        left: 60px;
        top: 18px;
    }

    .logo {
        height: 13px;
    }

    .decoration-left,
    .decoration-right {
        display: none;
    }

    .content-center {
        padding: 5% 5%;
        align-items: center;
        text-align: center;
    }

    .title-container {
        text-align: center;
    }

    .title-text {
        width: 90%;
        max-width: 400px;
        margin: 0 auto;
    }

    .subtitle-container {
        text-align: center;
    }

    .subtitle-text {
        width: 60%;
        max-width: 200px;
        margin: 0 auto;
    }

    .qr-section {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .qr-border {
        width: 280px;
        max-width: 80vw;
        height: 50px;
    }

    .qr-right {
        width: 120px;
    }

    .scan-button {
        width: 116px;
        height: 46px;
    }

    .scan-text {
        width: 90px;
    }

    .qr-code {
        width: 100px;
        height: 100px;
    }

    .footer-content {
        text-align: center;
    }

    .icp-text {
        height: 10px;
        margin: 0 auto;
    }
}