@charset "UTF-8";
/**
* 侵权投诉页样式。
*
* 迁移来源：`/Users/xinyuancui/Desktop/pc/v.qq.com_tort/style/index.css`（166 行）。
*
* 【保留】`.mod_container` / `.mod_main` / `.mod_text` / `.mod_nav` / `.m_mod_nav` 全部布局规则，
*        以及两个断点 `min-width:1367px`（PC）与 `not all and (min-width:1367px)`（移动）。
* 【改写】旧版 `.header,.footer` 的 SSI 头尾规则 → 改用 `.tort-page-header` / `.tort-page-footer`
*        （page-slice 容器的 class）。⭐ **旧版「移动端隐藏头尾、PC 端显示头尾」的行为如实保留**。
* 【删除】依赖 Zepto 运行时生成的 `.none` 切换类（Vue 用 v-if / v-else 替代）。
* 【删除】IE 相关 hack（`.ie6` / `.lte_ie9` 条件注释引入的 `base.ie.css`）——
*        Vue 3 本身不支持 IE，保留无意义（原开放项 P-5因此自然消解）。
* 【替代】旧版外链 `//vm.gtimg.cn/tencentvideo/vstyle/mobile/v3/style/swiper.css` 不再引入，
*        `.swiper-*` 三个class 的等价样式在本文件的「移动端横向滚动」段自实现。
*
* ⚠️ 阈值不一致是**刻意如实复现**的旧版行为：
*    CSS 断点 1367px（本文件） vs JS 判端 1366px（`composables/use-responsive.ts`）。
*    width=1366px 时 JS 给 PC 导航、CSS 给移动布局。看起来像 bug，但用户要求 1:1 复现，⛔ 不要统一。
*/
.tort-page-header,
.tort-page-footer {
  display: none;
  z-index: 9;
  position: relative;
}

.mod_container {
  width: 100%;
  height: auto;
  background-color: #f6f8fa;
}

.mod_text {
  background-color: #fff;
  font-size: 15px;
  color: #000028;
  letter-spacing: 0.5px;
  line-height: 24px;
}
.mod_text p {
  margin-top: 8px;
}
.mod_text .title {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.53px;
}
.mod_text .sub_title {
  font-weight: bold;
}
.mod_text .list {
  position: relative;
  padding-left: 18px;
}
.mod_text .list::after {
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #071139;
  content: "";
}
.mod_text .highlight {
  color: #ff6022;
}

.mod_nav .mod_nav_item.current {
  color: #ff6022;
}

/* ──骨架屏（旧版无对应物，新增） ───────────────────────── */
.tort-skeleton {
  padding-top: 24px;
}
.tort-skeleton__line {
  height: 16px;
  margin-bottom: 12px;
  border-radius: 4px;
  background-color: #eef0f4;
  animation: tort-skeleton-breath 1.2s ease-in-out infinite;
}
.tort-skeleton__line--title {
  width: 40%;
  height: 22px;
  margin-bottom: 20px;
}

@keyframes tort-skeleton-breath {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* ── PC 端（>= 1367px） ─────────────────────────────────── */
@media screen and (min-width: 1367px) {
  .tort-page-header,
  .tort-page-footer {
    display: block;
  }
  .mod_main {
    width: 1080px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
  }
  .mod_nav {
    position: fixed;
    background-color: #fff;
    width: 260px;
  }
  .mod_nav .mod_nav_item {
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 64px;
    padding-left: 16px;
    color: #848494;
    width: 100%;
  }
  .mod_nav .mod_nav_item.current::after {
    position: absolute;
    bottom: 14px;
    left: 0;
    width: 4px;
    height: 36px;
    background-color: #ff6022;
    content: "";
  }
  .mod_text {
    width: 800px;
    min-height: 1000px;
    padding: 0 24px 24px 24px;
    margin-left: 280px;
  }
}
/* ── 移动端（< 1367px） ─────────────────────────────────── */
@media not all and (min-width: 1367px) {
  body {
    min-width: 100%;
  }
  .mod_main {
    width: 100%;
  }
  .m_mod_nav {
    height: 48px;
    padding: 0 5px;
    overflow: hidden;
    /* 横向惯性滑动：替代旧版的 swiper CDN 包（R-C6）
       原生 overflow-x + -webkit-overflow-scrolling 即系统级惯性滚动，零依赖 */
  }
  .m_mod_nav .mod_nav_item {
    position: relative;
    display: inline-block;
    font-size: 12px;
    line-height: 48px;
    color: #848494;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m_mod_nav .swiper-container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .m_mod_nav .swiper-container::-webkit-scrollbar {
    display: none;
  }
  .m_mod_nav .swiper-wrapper {
    display: flex;
    align-items: center;
    width: max-content;
  }
  .m_mod_nav .swiper-wrapper .swiper-slide {
    display: inline-block;
    width: auto;
    margin-right: 13px;
    margin-left: 9px;
    color: #272727;
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    white-space: nowrap;
  }
  .m_mod_nav .mod_nav_item.current::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 24px;
    height: 3px;
    margin-left: -12px;
    background-color: #ff6022;
    content: "";
  }
  .mod_text {
    padding: 48px 16px 16px 16px;
    overflow: hidden;
  }
}