@charset "utf-8";

/* ============================================================================
   资讯弹框 —— 移动端（Figma 171:540「资讯m」：屏幕中间弹出的纸面板）
   DOM 与 class 跟 PC 端完全一致（逻辑在 js/news-sheet.js）；手机端一页 8 条（m/index.html 上的 data-page-size）。
   面板 650×946 在视口里居中，内部元素按设计坐标摆放（设计坐标减去面板原点 (50, 149)）。
   字体沿用站点圆体；分类 / 条目 / 翻页 / 详情与 PC 共用同一套组件，只改尺寸与落点。
   复用 home_mobile.css 的 --u（1 设计 px = 100/750 vw）与全局基础，本文件只写弹框自身。
   ========================================================================== */
.nsheet {
  position: fixed;
  inset: 0;
  z-index: 2050;
  touch-action: none; /* 弹框开着时手指滑动不带动底下的页面 */
}
.nsheet__mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  transition: opacity .3s ease;
}
/* 面板在视口正中：宽高固定，直接用视口中心减半宽 / 半高落位。
   弹出时从略靠下、透明处浮上来；收起反向，时长不超过脚本里等待隐藏的 360ms */
.nsheet__panel {
  position: absolute;
  left: calc(50% - 325 * var(--u)); top: calc(50% - 473 * var(--u));
  width: calc(650 * var(--u));
  height: calc(946 * var(--u));
  opacity: 0;
  transform: translateY(calc(40 * var(--u)));
  transition: transform .3s cubic-bezier(.4, 0, .9, .6), opacity .24s ease;
}
.nsheet.is-open .nsheet__mask { opacity: 1; }
.nsheet.is-open .nsheet__panel {
  opacity: 1;
  transform: none;
  transition: transform .42s var(--ease-out), opacity .26s ease;
}
.nsheet__panel > * { position: absolute; }
.nsheet__bg { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

.nsheet__back {
  left: calc(3 * var(--u)); top: calc(25 * var(--u));
  width: calc(113 * var(--u)); height: calc(55 * var(--u));
  z-index: 1;
}
.nsheet__back img { width: 100%; height: 100%; }
.nsheet__back:active img { transform: scale(.92); }

/* 分类栏：只有当前分类垫选中底框、文字变白，底框落点按 data-active 切。
   中文分类名都短，三个都用短底框（124×49）挨着排；英文按设计稿位置排，Announcement 换长底框（见 i18n_mobile.css） */
.nsheet__pill {
  left: calc(139 * var(--u)); top: calc(84 * var(--u));
  width: calc(124 * var(--u)); height: calc(49 * var(--u));
  transition: left .25s var(--ease-out), opacity .2s ease;
  pointer-events: none;
}
.nsheet__panel[data-active="1"] .nsheet__pill { left: calc(261 * var(--u)); }
.nsheet__panel[data-active="2"] .nsheet__pill { left: calc(384 * var(--u)); }
/* 长底框只给英文长分类名用，平时不显示 */
.nsheet__pill--long { width: calc(203 * var(--u)); opacity: 0; }
.nsheet__tab {
  top: calc(91 * var(--u));
  transform: translateX(-50%);
  font-size: calc(24 * var(--u));
  line-height: calc(42.638 * var(--u));
  white-space: nowrap;
  color: #774940;
  transition: color .2s ease;
  z-index: 3;
}
.nsheet__tab.is-active { color: #fff; }
/* 文字本身窄，热区向四周扩到底框大小，手指好点 */
.nsheet__tab::after {
  content: '';
  position: absolute;
  left: calc(-36 * var(--u)); right: calc(-36 * var(--u));
  top: calc(-4 * var(--u)); bottom: calc(-4 * var(--u));
}
.nsheet__tab:active { transform: translateX(-50%) scale(.92); }
/* 三个分类连同选中底框整组在面板里水平居中（面板宽 650，整组中心落在 325） */
.nsheet__tab--latest { left: calc(201.5 * var(--u)); }
.nsheet__tab--news   { left: calc(325.5 * var(--u)); }
.nsheet__tab--notice { left: calc(448.5 * var(--u)); }

/* 资讯列表：一页 8 条，每条 606×72、条距 88（设计 300 → 388 → …） */
.nsheet__list {
  left: calc(22 * var(--u)); top: calc(151 * var(--u));
  width: calc(606 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}
.nsheet-row {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  height: calc(72 * var(--u));
  color: #774940;
  line-height: calc(37.122 * var(--u));
  white-space: nowrap;
  animation: nsRowIn .42s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}
.nsheet-row:active { transform: scale(.985); opacity: .85; }
.nsheet-row > * { position: absolute; }
.nsheet-row__bg { left: 0; top: 0; width: 100%; height: 100%; }
/* 条目内元素按设计：分类 18 在上，书签 + 标题 24 在下，日期 18 金色靠右 */
/* 条目里最上是分类、最下是日期（日期比标题矮半行）：四个元素整体上提 10，
   让「分类上缘 → 日期下缘」这块内容在 72 高的底框里上下居中 */
.nsheet-row__cat { left: calc(16 * var(--u)); top: 0; font-size: calc(18 * var(--u)); }
.nsheet-row__bullet {
  /* 书签与标题文字居中对齐：标题行高 37.122、顶边 28，文字中心落在 46.56，书签高 21 */
  left: calc(16 * var(--u)); top: calc(36 * var(--u));
  width: calc(17 * var(--u)); height: calc(21 * var(--u));
}
.nsheet-row__title {
  left: calc(42 * var(--u)); top: calc(28 * var(--u));
  max-width: calc(438 * var(--u));
  font-size: calc(24 * var(--u));
  overflow: hidden;
  text-overflow: ellipsis;
}
.nsheet-row__date { left: calc(492 * var(--u)); top: calc(35 * var(--u)); font-size: calc(18 * var(--u)); color: #d2a358; }

@keyframes nsRowIn {
  from { opacity: 0; transform: translateY(calc(16 * var(--u))); }
}

/* 翻页：左右箭头夹住页码，页码字号 26.664、字距 20.265 照设计 */
.nsheet__pager { left: 0; top: 0; width: 100%; height: 0; }
.nsheet__pager > * { position: absolute; }
.nsheet__arrow {
  top: calc(875 * var(--u));
  width: calc(23 * var(--u)); height: calc(32 * var(--u));
  transition: opacity .2s ease;
}
/* 箭头本身很小，热区向四周各扩一圈；两枚箭头的热区之间仍隔着页码，不会互相压住 */
.nsheet__arrow::before {
  content: '';
  position: absolute;
  left: calc(-30 * var(--u)); right: calc(-30 * var(--u));
  top: calc(-20 * var(--u)); bottom: calc(-20 * var(--u));
}
.nsheet__arrow img { width: 100%; height: 100%; }
.nsheet__arrow--prev { left: calc(232 * var(--u)); }
.nsheet__arrow--next { left: calc(394 * var(--u)); }
.nsheet__arrow:not(:disabled):active img { transform: scale(.85); }
.nsheet__arrow:disabled { opacity: .35; }
/* 字距会在最后一个字后面也留一截空，用等量首行缩进抵掉，页码才真正居中在两枚箭头之间 */
.nsheet__page {
  /* 竖向按「文字视觉中心对齐箭头中心」摆：箭头 875 起、高 32（中心 891），
     页码行高 52.764，所以顶边要落在 891 - 52.764/2 */
  left: calc(255 * var(--u)); top: calc(864.6 * var(--u));
  width: calc(139 * var(--u));
  text-align: center;
  font-size: calc(26.664 * var(--u));
  line-height: calc(52.764 * var(--u));
  letter-spacing: calc(20.265 * var(--u));
  text-indent: calc(20.265 * var(--u));
  white-space: nowrap;
  color: #774940;
}

/* ============================================================================
   资讯详情 —— 移动端（按用户给的详情截图排版）
   主标题在返回按钮下方、面板居中；下面一条圆角白条（左副标题、右日期）；再下面是可上下滑动的正文，
   右侧橙色滑块 + 暖灰细轨，滑块右缘与白条右缘对齐。文字统一 #774940，字体沿用站点圆体。
   ========================================================================== */
.nsheet__panel[data-view="detail"] > .nsheet__pill,
.nsheet__panel[data-view="detail"] > .nsheet__tab,
.nsheet__panel[data-view="detail"] > .nsheet__list,
.nsheet__panel[data-view="detail"] > .nsheet__pager { display: none; }
/* 详情层铺满面板但自身不接点击，免得盖住左上角的返回按钮 */
.nsheet__detail {
  left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none;
  animation: nsDetailIn .32s var(--ease-out);
}
.nsheet__detail > * { position: absolute; pointer-events: auto; }
@keyframes nsDetailIn {
  from { opacity: 0; transform: translateY(calc(12 * var(--u))); }
}

/* 主标题：30 号，在返回按钮与白条之间、面板横向居中；长了折成两行（两行等长） */
.nsheet__d-title {
  left: calc(27 * var(--u)); top: calc(75.5 * var(--u));
  width: calc(590 * var(--u)); height: calc(68 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* --title-fit：长标题两行装不下时由 js/news-sheet.js 按比例缩小，默认 1 */
  font-size: calc(30 * var(--u) * var(--title-fit, 1));
  line-height: calc(34 * var(--u) * var(--title-fit, 1));
  text-wrap: balance;
  font-weight: inherit;
  color: #774940;
  overflow: hidden;
}

/* 副标题白条：580×80 圆角条，左副标题、右日期同在竖向中线上，左右各留 28；副标题过长时省略，不挤日期 */
.nsheet__d-head {
  left: calc(40 * var(--u)); top: calc(153 * var(--u));
  width: calc(580 * var(--u)); height: calc(80 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  padding: 0 calc(28 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(40 * var(--u));
  white-space: nowrap;
  color: #774940;
}
.nsheet__d-headbg {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  border-radius: calc(13 * var(--u));
  pointer-events: none;
}
.nsheet__d-sub,
.nsheet__d-date { position: relative; top: calc(2.8 * var(--u)); } /* 圆体字面偏上，下移让字墨落在白条正中 */
.nsheet__d-sub { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nsheet__d-date { flex: none; }

/* 正文：24 号字、行距 40，左对齐，超出部分在框内上下滑动；正文里的换行即分段。
   框右缘 = 滑块右缘（与白条右缘对齐），右侧让出 8 宽滚动条 + 与正文之间 32。
   弹框整层禁了手势（防带动底下页面），这里单独放开竖向滑动 */
.nsheet__d-body {
  left: calc(36 * var(--u)); top: calc(248.5 * var(--u));
  width: calc(584 * var(--u)); height: calc(673.5 * var(--u));
  padding-right: calc(40 * var(--u));
  overflow-y: auto;
  scrollbar-width: none; /* 原生滚动条藏掉，用下面自绘的那条 */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  font-size: calc(24 * var(--u));
  line-height: calc(40 * var(--u));
  white-space: pre-line;
  overflow-wrap: anywhere; /* 超长串才断开；英文按单词换行，不把单词拦腰截断 */
  text-align: left;
  color: #774940;
}
.nsheet__d-body::-webkit-scrollbar { display: none; }
/* 自绘滚动条：8 宽的橙色圆头滑块 + 居中垫在下面的 5 宽暖灰细轨，轨道 256.5 ~ 911.5，右缘与白条右缘对齐 */
.nsheet__d-bar {
  left: calc(612 * var(--u)); top: calc(256.5 * var(--u));
  width: calc(8 * var(--u)); height: calc(655 * var(--u));
  pointer-events: none;
}
.nsheet__d-bar::before {
  content: '';
  position: absolute;
  left: calc(1.5 * var(--u)); top: 0;
  width: calc(5 * var(--u)); height: 100%;
  border-radius: 999px;
  background: #e0d7d0;
}
.nsheet__d-thumb {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  border-radius: 999px;
  background: #ffb43f;
}

@media (prefers-reduced-motion: reduce) {
  .nsheet__mask, .nsheet__panel, .nsheet.is-open .nsheet__panel { transition: none; }
  .nsheet-row, .nsheet__detail { animation: none; }
}