/* refer to 目录左右双元素布局.html */






/* 移动端自适应补充样式  */
@media screen and (max-width: 768px) {

  /* 下面是修改目录排版的样式 */


  /* 去掉 SG_dot 的影响 */
  .SG_dot {
    background-image: none !important; /* 移除小圆点背景图 */
  }

  .article_blk{ 
    padding-left : 10px;
    padding-right : 10px;
  }  
    
  /* =========================================
    目录行外层容器 (对应原来的 .toc-row)
  ========================================= */
  .articleCell {
      display: flex;
      justify-content: space-between;
      align-items: center; /* 左右元素垂直居中对齐 */
      width: 100%;
      
      /* 根据需要自行添加底边框或内边距 */
      padding: 2px 0;
  }

  /* =========================================
    左侧：标题+图标 包裹层 (对应原来的 .title-group)
  ========================================= */
  .articleCell .atc_main {
      flex: 1;         /* 占据左侧全部剩余空间 */
      min-width: 0;    /* 【关键】防止被长标题撑破 */
      display: flex;   
      align-items: center; /* 标题和图标垂直居中 */

      padding-left: 0px;   /* 覆盖原来的 */
  }

  /* 标题文字层 (对应原来的 .title) */
  .articleCell .atc_title {
      min-width: 0;    /* 【关键】嵌套 Flex 防止撑破 */
      
      /* 单行省略号三剑客 */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  /* 图标容器层 (对应原来的 .icon) */
  .articleCell .atc_ic_b {
      flex-shrink: 0;  /* 【关键】无论多挤，绝对不能压缩图标 */
      margin-left: 5px; /* 标题与图标的间距 */
      display: flex;   /* 让包裹 img 的 span 也居中对齐 */
      align-items: center;
  }

  /* =========================================
    右侧：日期与时间层 (对应原来的 .date)
  ========================================= */
  .articleCell .atc_info {

      flex-shrink: 0;      /* 不抢占左侧空间 */
      /* 因为你这里是完整日期+时间(2016-03-07 15:22)，稍微放宽最大宽度限制 */
      max-width: 25%;      
      margin-left: 8px;   /* 确保跟左侧标题保持距离 */
      
      /* 极端放大情况下的省略处理 */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      text-align: right;
  }


}