/* 整个作品页面 */
main {
    display: block;              /* 覆盖 global.css 里可能的 flex 设置 */
    color: #fff;
    font-size: 14px;
    padding: 40px 120px;
    background-color: black;
    box-sizing: border-box;
}

/* 顶部：标题 + 照片 的左右布局 */
.top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 60px;
}

/* 左侧文字、右侧图片 */
.left {
    width: 55%;
}

.right {
    width: 50%;
}

/* 标题 */
.title {
    font-size: 32px;
    padding: 10px 0;
}

/* 顶部小标题 */
.subtitle {
    font-size: 16px;
    margin-bottom: 10px;
}

/* 下方每一块（About / System / Sensors） */
.section {
    margin-bottom: 60px;
}

/* 段落行距 */
.section p {
    margin: 10px 0;
    line-height: 1.5;
}

/* 右侧图片 */
.right-img img {
    width: 100%;
    height: auto;
    display: block;
}
.left-img {
    position: relative;   /* 使内部文字可以定位在图片内 */
    display: inline-block;
}

.left-img img {
    display: block;
    width: 100%;
    height: auto;
}

.left-img .smalltext {
    position: absolute;
    bottom: 5px;     /* 调整距离：你可以改成 10px 或更小 */
    left: 5px;       /* 左侧对齐 */
    color: #ccc;     /* 淡灰色更柔和 */
    font-size: 12px;
    margin: 0;
    padding: 0;
}
/* 图片右下角的小字 */
.smalltext {
    font-size: 12px;
    color: #bbb;
    text-align: right;
    margin-top: 5px;
    font-style: italic;
}

/* 单张图片（System / Sensor 里的示意图） */
.img {
    width: 70%;
    margin: 20px 0;
}

.img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* 多张图并排时使用 .img-row 包裹，它内部的 .img 会变成三等分 */
.img-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.img-row .img {
    width: calc((100% - 40px) / 3);
    margin: 0;
}

.img-row .img img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 视频 */
.video {
    margin: 30px 0;
}

video {
    width: 60vh;
    height: 30vh;
}
/* ===== 通用 YouTube 响应式容器 ===== */
.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 高宽比 = 9/16 = 0.5625 */
    height: 0;
    overflow: hidden;
    margin: 20px 0; /* 你可以调节间距 */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* ---------- 手机 / 小屏幕适配 ---------- */
@media (max-width: 768px) {

    main.page-main {
        margin-top: 6px;   /* 这里决定黑框离导航栏多远，可以改 50/70/80 试 */
        height: auto;       /* 不再死死固定 90vh，交给内容自己撑 */
        padding: 0 16px;    /* 左右窄一点，手机看更舒服 */
        flex-direction: column;
    }

    /* 顶部从左右两栏 → 竖着排 */
    .top {
        flex-direction: column;
        gap: 20px;
    }

    .left,
    .right {
        width: 100%;
    }

    .title {
        font-size: 24px;
    }

    .subtitle {
        font-size: 14px;
    }

    /* 单张图：在手机上就占满宽度 */
    .img {
        width: 100%;
        margin: 16px 0;
    }

    /* 多张图并排：可以选择两列或一列 */

    /* 方案 A：手机上一列（最安全最稳定）*/
    .img-row {
        flex-direction: column;
    }

    .img-row .img {
        width: 100%;
    }

    /* 如果你想要手机上两列，可以用这个替换上面那段：
    .img-row .img {
        width: calc((100% - 12px) / 2);
    }
    */

    /* 视频：不要用固定 vh 比例，改成自适应宽度 */
    video {
        width: 100%;
        height: auto;
        max-height: none;
    }
}
@media (min-width: 769px) {
    .video-wrapper {
        max-width: 560px;  /* ⭐ 完美还原 YouTube 官方嵌入宽度 */
        padding-bottom: calc(560px * 0.5625); /* 保持 16:9 高度 */
        margin: 40px auto;  /* 居中 + 更美观 */
    }
}
.download-score {
    margin-top: 30px;
}

.download-score a {
    color: white;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    border: 2px solid white;
    padding: 10px 18px;
    display: inline-block;
    transition: 0.2s;
}

.download-score a:hover {
    background-color: white;
    color: black;
}
/* ===== 音频播放器块 ===== */
.audio-section {
    margin: 40px 0 20px 0;
}

.audio-label {
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ddd;
    margin-bottom: 10px;
}

.audio-player {
    background-color: #111;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 14px 18px;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
}

.audio-player audio {
    width: 100%;
    outline: none;
}

/* 小说明文字 */
.audio-caption {
    display: block;
    margin-top: 10px;
    text-align: left;
    font-size: 12px;
    color: #bbb;
}

/* 手机上间距稍微紧一点 */
@media (max-width: 768px) {
    .audio-section {
        margin: 32px 0 16px 0;
    }

    .audio-player {
        padding: 12px 12px;
    }
}