/* ===== 1. 通用初始化 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;   /* 让 padding、border 不再撑大盒子 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #fff;
}
/*.header{*/
/*    margin-top: -120px;*/
/*}*/
.main{
    margin-top: 150px;
}
/* ===== 3. 文章卡片 ===== */
.blogDetail {
    width: min(70%, 998px);      /* 最大 998px，大屏 70% */
    margin: 0 auto;
    padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
    background: #f6f6f6;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    text-align: center;
}

/* ===== 4. 文章标题 ===== */
.title {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    margin-bottom: 20px;
}

/* ===== 5. 信息栏 ===== */
.info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;              /* 行、列间距 */
    margin-bottom: 20px;
    font-size: 14px;
    color: #666;
}

.info span {
    display: inline-flex;
    align-items: center;
    transition: color .25s;
}

/* 图标 */
.icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.createdbyImg   { background-image: url('../img/user.svg'); }
.dateImg        { background-image: url('../img/datebase.svg'); }
.requiredTimeImg{ background-image: url('../img/book.svg'); }
.clicktimesImg  { background-image: url('../img/click.svg'); }
.istopImg       { background-image: url('../img/istop.svg'); }

/* 悬停变色 + 图标切换 */
.author:hover, .date:hover, .time:hover, .clicktimes:hover {
    color: purple;
}
.author:hover   .createdbyImg    { background-image: url('../img/userhover.svg'); }
.date:hover     .dateImg         { background-image: url('../img/datebasehover.svg'); }
.time:hover     .requiredTimeImg { background-image: url('../img/bookhover.svg'); }
.clicktimes:hover .clicktimesImg { background-image: url('../img/clickhover.svg'); }

/* ===== 6. 主图 ===== */
.infoImg {
    width: min(100%, 400px);     /* 最大 400px，且不超过父级 */
    margin: 0 auto 20px;
}
.infoImg img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* ===== 7. 正文 ===== */
.content {
    text-align: left;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.8;
    color: #222;
    text-indent: 2em;      /* 首行缩进 2 个汉字宽度 */
    word-break: keep-all;  /* 非中文不断行 */
    overflow-wrap: break-word; /* 只有超长单词才允许断行 */
}
.content p img {
    width: 100%;          /* 随父容器宽度自适应 */
    max-width: 400px;     /* 最大宽度 400px，与 .infoImg 保持一致 */
    height: auto;         /* 保持原始宽高比 */
    border-radius: 6px;   /* 与 .infoImg img 相同的圆角 */
    display: block;       /* 避免行内元素空隙，居中生效 */
    margin: 0 auto;       /* 水平居中 */
}
/* ===== 8. 响应式：<=998px ===== */
@media (max-width: 998px) {
    .blogDetail {
        width: 92%;              /* 左右留安全边距 */
        padding: 20px 16px;
    }

    .info {
        flex-direction: column;  /* 纵向排列 */
        gap: 8px;
    }

    .title {
        font-size: 24px;
    }
}