/* 雅昌拍卖图录 App 下载页（tulu）——按 Figma 设计重构，PC / H5 响应式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body {
    font-family: "PingFang SC", "PingFang UI SC", -apple-system, BlinkMacSystemFont,
        "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #fff;
}

.dl {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #9aa79f url("/resource/download/dl2_bg.jpg?t=2") center center / cover no-repeat;
}

/* 主内容区：logo + 标题 + 副标题 + 操作区，在手机样机上方空间内垂直居中 */
.dl-main {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px 0;
}

.dl-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.dl-logo {
    width: 204px;
    height: 49px;
    background: url("/resource/download/dl2_logo.svg") center / contain no-repeat;
}

.dl-txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: #fff;
}
.dl-title { font-size: 32px; font-weight: 700; line-height: 1.2; }
.dl-sub   { font-size: 19px; font-weight: 400; line-height: 1.2; }

/* 操作区：PC = 二维码 + 按钮列；H5 = 单个按钮 */
.dl-actions {
    margin-top: 28px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 36px;
}

/* 二维码（仅 PC 展示） */
.dl-qr { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 164px; }
.dl-qr-box { width: 164px; background: #fff; border-radius: 16px; padding: 8px; }
.dl-qr-box img { display: block; width: 148px; height: 148px; }
.dl-qr-cap { font-size: 19px; color: #fff; text-align: center; }

/* 按钮列 */
.dl-btns { display: flex; flex-direction: column; gap: 12px; }
.dl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 174px;
    height: 48px;
    background: #fff;
    border-radius: 80px;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
}
.dl-btn .dl-ic {
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex: none;
}
.dl-btn .dl-t { font-size: 14px; color: #000; white-space: nowrap; line-height: 1; }
.iphone  .dl-ic { width: 20px; height: 20px; background-image: url("/resource/download/dl2_ios.svg"); }
.android .dl-ic { width: 25px; height: 25px; background-image: url("/resource/download/dl2_android.svg"); }
.harmony .dl-ic { width: 25px; height: 25px; background-image: url("/resource/download/dl2_harmony.svg"); }

/* 手机样机：底部居中，向下出血 */
.dl-phone {
    flex: none;
    width: 195px;
    height: 283px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-image: url("/resource/download/dl2_phone.png?t=2"); /* 兜底：不支持 webp 的浏览器 */
    background-image: -webkit-image-set(url("/resource/download/dl2_phone.webp?t=2") type("image/webp"), url("/resource/download/dl2_phone.png?t=2") type("image/png"));
    background-image: image-set(url("/resource/download/dl2_phone.webp?t=2") type("image/webp"), url("/resource/download/dl2_phone.png?t=2") type("image/png"));
}

/* ============ H5 移动端（一次仅展示一个按钮，不展示二维码） ============ */
@media screen and (max-width: 768px) {
    .dl-main { justify-content: center; padding-top: 0; }
    .dl-logo { width: 171px; height: 41px; }
    .dl-title { font-size: 29px; }
    .dl-sub { font-size: 17px; }
    .dl-actions { margin-top: 26px; gap: 0; }
    .dl-qr { display: none; }
    .dl-phone { width: 195px; height: 297px; }
}

/* ============ 微信内引导（沿用原有逻辑，默认隐藏，由 JS 触发） ============ */
.wxDown { display: none; }
.alertPop {
    width: 60%; line-height: 50px; text-align: center; color: #fff; border-radius: 10px;
    font-size: 14px; background-color: rgba(0, 0, 0, .7); z-index: -1; opacity: 1;
    position: fixed; left: 50%; margin-left: -30%; top: 40%; transform: translateY(10px);
    transition: .2s all ease-in;
}
.alertPop.active { transform: translateY(0); opacity: 1; z-index: 100; }
.wxDown { position: fixed; z-index: 10; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); left: 0; top: 0; }
.wxDown img { width: 100%; }