/* 用于：jili.html 中 <main class="wrap"> ... </main> */

/* 容器（如果全站已有 .wrap 可不重复） */
.wrap{
  width: 1190px;
  margin: 0 auto;
}

/* 面包屑 */
.crumb{
  margin: 20px 0;
  color: #666;
  font-size: 14px;
}
.crumb a{
  color: #666;
  text-decoration: none;
}
.crumb a:hover{
  color: var(--brand, #3388ff);
}
.crumb .sep{
  margin: 0 6px;
  color: #999;
}

/* 正文块 */
.article{
  width: 790px;
  margin: 0 auto;
  padding: 0 0 30px;
}

/* 标题与时间 */
.title{
  font-size: 30px;
  line-height: 45px;
  margin: 0 0 10px;
  font-weight: 700;
  color: #333;
  text-align: center;
}
.date{
  margin: 0 0 20px;
  color: #999;
  text-align: center;
}

/* 标签 */
.tags{
  margin: 0 0 20px;
  text-align: center;
}
.tag{
  display: inline-block;
  background: #d6e4ff;
  color: #3388ff;
  padding: 4px 10px;
  margin: 0 6px;
  font-size: 12px;
}

/* 内容区 */
.content{
  font-size: 16px;
  line-height: 2;
  color: #333;
}
.content img{
  max-width: 100%;
  display: block;
  margin: 10px auto;
}

/* 居中段落 */
.center{
  text-align: center;
}

/* =========================
   innovation.asp 移动端适配（追加到文件末尾）
   目标：手机端不横向溢出、内容显示完整
   ========================= */

*{ box-sizing: border-box; }
html, body{ width: 100%; overflow-x: hidden; }
img{ max-width: 100%; height: auto; display: block; }

/* 容器：PC 保持最大宽度，移动端满屏+内边距 */
.wrap{
  width: min(1190px, 100%);
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* 面包屑允许换行，避免一行撑出屏幕 */
.crumb{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.6;
}
.crumb .sep{ margin: 0 2px; }

/* 正文：长英文/URL 强制换行 */
.article{
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 标签换行 */
.tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* content 内图片安全显示 */
.content img{
  width: 100%;
  height: auto;
}

/* 手机端排版更紧凑 */
@media (max-width: 768px){
 /* 关键：取消 PC 的 fixed width=790px */
  .article{
    width: 100%;
    margin: 0 auto;
  }

  /* 标题/时间移动端覆盖（用 .title/.date，避免层级不匹配） */
  .title{
    font-size: 22px;
    line-height: 1.25;
    margin: 12px 0 8px;
  }

  .date{
    font-size: 12px;
    margin: 0 0 12px;
  }

  /* 图片保持自适应（你已经写了 width:100% 也可以保留） */
  .content img{
    width: 100%;
    height: auto;
  }

  .article .title{
    font-size: 22px;
    line-height: 1.25;
    margin: 12px 0 8px;
  }

  .article .date{
    font-size: 12px;
  }

  .content{
    font-size: 14px;
    line-height: 1.85;
  }

  /* 你用很多 .center 段落，手机端也保持居中即可，但避免过大字号 */
  .content .center{
    font-size: 14px;
  }
}

/* 更小屏 */
@media (max-width: 420px){
  .wrap{
    padding-left: 10px;
    padding-right: 10px;
  }
}