/*
 * walltu 移动端适配（仅小屏生效，桌面端渲染零变化）
 * 引入顺序：style.css -> spoos.css -> mobile.css（本文件必须最后）
 * 断点：768px 主断点（平板/手机横屏）+ 480px 细化（手机竖屏）
 * 不改 style.css / spoos.css 任何一行；不引入 JS。
 */

@media (max-width: 768px) {

  /* ============ 1. 全局：解除 960px 固定宽骨架 ============ */
  body {
    -webkit-text-size-adjust: 100%;
  }
  .topNav960,
  .MNav,
  .pArea,
  .mainContent,
  .viewMain,
  .foot,
  .MNLine1,
  .dabody {
    width: auto !important;
  }
  /* 左右分栏全部改单列纵排 */
  .pArea .pAreaL,
  .pArea .pAreaR,
  .col1,
  .col3,
  .picread,
  .readlist {
    width: auto !important;
    float: none !important;
  }
  .picread {
    border-right: none;
  }
  /* 图片一律不许超出屏宽（覆盖 HTML width/height 属性与内联样式） */
  .pArea img,
  .mainContent img,
  .viewMain img,
  .viewContent img {
    max-width: 100% !important;
    height: auto;
  }
  /* 文章正文里可能残留旧内容的 table 布局：块化 + 横向可滚，不撑破屏幕 */
  table {
    max-width: 100% !important;
  }
  .viewContent table,
  .viewContent tbody,
  .viewContent tr,
  .viewContent td,
  .viewContent th {
    display: block;
    width: auto !important;
  }
  .viewContent {
    word-wrap: break-word;
    overflow-x: auto;
  }

  /* ============ 2. 顶部 logo + 导航 ============ */
  .topNav960 {
    height: auto;
    text-align: center;
  }
  .logo {
    float: none;
    width: auto;
    height: auto;
    padding: 8px 0;
  }
  .logobanner {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
  }
  /* 分类菜单：小屏横向滚动（纯 CSS，不加汉堡 JS） */
  .MNav {
    height: auto;
    margin-bottom: 6px;
  }
  .MNav .MNavTop {
    height: auto;
    background-size: auto 100%;
  }
  .MNav .MNavTop UL {
    height: auto;
    padding-left: 8px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .MNav .MNavTop LI {
    float: none !important;
    display: inline-block;
    vertical-align: top;
  }
  .MNav .MNavTop LI A {
    display: inline-block;
    padding: 0 6px;
    min-height: 40px;
  }

  /* ============ 3. 首页 ============ */
  /* 内联样式包裹层（幻灯左列 / 190px 右列）：属性选择器覆盖，不动模板 */
  .pArea > div[style*="float:left"],
  .pArea > div[style*="FLOAT: right"] {
    float: none !important;
    width: auto !important;
  }
  .flash,
  .flash_left {
    width: auto !important;
    float: none;
  }
  /* 幻灯：等比缩放（750x365 原始比例），JS 逻辑不变 */
  #ifocus {
    width: 100%;
    height: auto;
  }
  #ifocus_pic {
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 365;
  }
  #ifocus_piclist LI {
    width: 100%;
    height: auto;
  }
  #ifocus_piclist IMG {
    width: 100%;
    height: auto;
  }
  #ifocus_opdiv {
    width: 100%;
  }
  #ifocus_tx {
    left: 10px;
    font-size: 16px;
  }
  #bigpic_title {
    display: none; /* 小屏放不下装饰性标语条 */
  }
  .s_pic {
    width: auto;
    right: 6px;
  }
  /* 首页栏目容器 */
  .area3,
  .area4,
  .area5,
  .areazt,
  .qiehuan,
  .qiehuan2 {
    width: auto !important;
    height: auto !important;
  }
  .leftTitle1 {
    width: auto;
    background-size: 100% 100%;
  }
  .leftTitle1 .T_name {
    width: auto;
    font-size: 18px;
    margin-left: 12px;
  }
  /* 推荐位（leftList4）：两列网格 */
  .leftList4 {
    padding-left: 2%;
    padding-right: 2%;
  }
  .leftList4 UL {
    width: auto;
  }
  .leftList4 LI {
    width: 48%;
    margin: 0 1% 12px;
  }
  .leftList4 LI H4,
  .leftList4 LI H5 {
    width: auto;
  }
  /* 分类区块（leftList2）：大图上、小图两列下 */
  .leftList2 {
    width: auto;
    height: auto;
  }
  .leftList2 .leftList2L {
    float: none;
    width: auto;
    text-align: center;
    margin-bottom: 10px;
  }
  .leftList2 .leftList2L H4 {
    width: auto;
  }
  .leftList2 .leftList2R {
    float: none;
    width: auto;
  }
  .leftList2 .leftList2R LI {
    width: 48%;
    margin: 0 1% 10px;
    text-align: center;
  }
  .leftList2 .leftList2R LI IMG {
    width: 100%;
    height: auto;
  }
  .leftList2 .leftList2R H4 {
    width: auto;
  }
  /* 编辑精选（leftList3）/ 其它横排列表（leftList6）：两列网格 */
  .leftList3,
  .leftList6 {
    width: auto;
    padding-left: 2%;
    padding-right: 2%;
  }
  .leftList3 LI,
  .leftList6 LI {
    width: 48%;
    margin: 0 1% 12px;
  }
  .leftList3 LI IMG,
  .leftList6 LI IMG {
    width: 100%;
    height: auto;
  }
  .leftList3 H4,
  .leftList6 H4 {
    width: auto;
  }
  /* 右栏部件横向铺满 */
  .tab {
    width: 100%;
    background-size: 100% 100%;
  }
  .con {
    width: auto;
  }
  .tage,
  .tage_show,
  .search_index,
  .link,
  .jpbz,
  .jpbz_box,
  .jxtj,
  .top10 {
    width: auto !important;
  }
  .jpbz IMG {
    width: 100%;
    height: auto;
  }
  .jxtj {
    background-size: 100% 100%;
  }
  .link_word {
    width: 30%;
    margin-left: 2%;
  }
  .link_word A {
    padding-top: 10px;
    padding-bottom: 10px; /* 触控友好 */
  }
  .tjbz {
    display: none; /* 角标装饰图小屏隐藏，避免盖住内容 */
  }

  /* ============ 4. 列表页（分类/标签/搜索）：封面两列网格 ============ */
  .headP_up {
    width: auto;
    background-size: 100% 100%;
  }
  .headP_title {
    margin-left: 12px;
    font-size: 16px;
    word-break: break-all; /* 面包屑长标题可折行 */
    padding-right: 8px;
  }
  .leftList5 {
    padding-left: 2%;
    padding-right: 2%;
  }
  .leftList5 LI {
    width: 48%;
    margin: 0 1% 15px;
  }
  .leftList5 IMG {
    width: 100% !important;
    height: auto !important; /* 覆盖 width="120" height="160" 属性 */
  }
  .leftList5 H4 {
    width: auto;
  }

  /* ============ 5. 文章页 / 幻灯页 ============ */
  .home {
    padding: 10px 8px 0;
    word-break: break-all; /* 面包屑自动换行 */
    line-height: 1.8;
  }
  .title {
    font-size: 18px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .read_time {
    padding: 0 6px;
    line-height: 1.8;
  }
  .viewDiv {
    margin: 6px;
  }
  /* 大图解除 600px 上限约束，等比占满屏宽 */
  .view-img {
    min-height: 0;
  }
  .view-img img {
    max-width: 100% !important;
    height: auto;
  }
  /* 幻灯缩略条：占满剩余宽度，保持横向滚动 */
  .thumbBox {
    height: auto;
    overflow: hidden;
  }
  #thumbList {
    width: calc(100% - 60px);
  }
  /* 顶/踩/返回按钮组居中 */
  .hit {
    padding-left: 0;
    margin: 10px auto;
    width: 100%;
    display: flex;
    justify-content: center;
    height: auto;
  }
  .hit .do {
    float: none;
  }
  /* 上一篇/下一篇：块级大点击区 */
  .pre_next_info {
    padding: 0 8px;
    line-height: 2;
  }
  .pre_next_info A {
    display: inline-block;
    padding: 10px 6px;
    min-height: 20px; /* 加内边距后整体点击区 >= 40px 高 */
  }
  /* 相关文章 / 侧栏列表：两列自适应 */
  .read_word {
    margin: 12px 8px;
  }
  .read_word LI {
    width: 48%;
    margin: 0 1%;
  }
  .readlist_tu {
    height: auto;
  }
  .readlist_tu LI {
    width: 47%;
    margin: 0 1% 10px;
  }
  .readlist_tu LI IMG {
    width: 100% !important;
    height: auto !important; /* 覆盖 width="145" height="110" 属性 */
  }
  .readlist_tu LI H1 {
    width: auto;
  }
  .readlist_word LI {
    width: 48%;
    margin-left: 1%;
    line-height: 2;
  }
  .readlist_hit LI {
    width: auto;
    line-height: 2;
  }

  /* ============ 6. 搜索框 / 分页 / 页脚 ============ */
  .search_k {
    padding: 0 10px 10px;
  }
  .search_box,
  .search_readbox {
    width: calc(100% - 24px);
    margin-left: 0;
    height: 34px;
    box-sizing: border-box;
    float: none;
  }
  .search_btn,
  .search_readbtn {
    width: 100%;
    height: 40px; /* 触控友好 */
    margin-left: 0;
    float: none;
  }
  .search_index {
    height: auto;
    padding-bottom: 10px;
  }
  .search_read {
    height: auto;
    padding: 0 10px;
  }
  /* 分页条：40px 最小点击区，自动换行 */
  .pages {
    height: auto;
    line-height: 2.6;
  }
  .pages A,
  .pages SPAN,
  .pages STRONG {
    display: inline-block;
    min-width: 40px;
    min-height: 40px;
    line-height: 34px;
    padding: 3px 5px;
    margin: 2px;
    box-sizing: border-box;
    text-align: center;
  }
  .pages STRONG,
  .pages SPAN {
    background: #ddd;
  }
  /* 页脚 */
  .foot {
    padding: 10px 8px;
    word-wrap: break-word;
    word-break: break-all;
    font-size: 12px;
  }
  .foot .bq,
  .foot .album_info {
    word-break: break-all;
    line-height: 1.8;
  }
}

/* ============ 480px 手机竖屏细化 ============ */
@media (max-width: 480px) {
  .MNav .MNavTop LI A {
    font-size: 14px;
  }
  .title {
    font-size: 16px;
  }
  .leftTitle1 .T_name {
    font-size: 16px;
  }
  .headP_title {
    font-size: 14px;
  }
  #ifocus_tx {
    font-size: 13px;
    bottom: 14px;
  }
  .hit {
    zoom: 0.85; /* 四个 64px 按钮在 320-480px 屏一排放下 */
  }
  .read_word LI,
  .readlist_word LI {
    width: 98%; /* 过窄时相关文章退化为单列，标题不截断 */
  }
}