@charset "utf-8";

/* ============================================================================
   资讯弹框（Figma 108:196「资讯子页面」）—— PC
   第 5 屏「更多>」打开，面板从视口底部升起；DOM 与 class 两端共用，逻辑在 js/news-sheet.js。
   复用 home_pc.css 的全局基础（字体 / 按钮复位 / [hidden]），本文件只写弹框自身。

   面板按设计 1601×1183（设计画框 1440 高里露出的那一截）1:1 摆，坐标都相对面板左上角。
   1 个设计 px = --ns-u：跟页面同一档缩放（--page-scale = 视口宽 / 2560），
   视口偏矮时再按高度收，保证整张面板露在视口里、顶上留出一截能看见底下的页面。
   文字：设计标注 Inter Regular，按页面统一规则走资源圆体（继承 body）；
   字距只落设计给的页码那一处（20.265px）。
   ========================================================================== */
.nsheet {
  position: fixed;
  inset: 0;
  z-index: 2050;
  --ns-u: min(calc(var(--page-scale, 1) * 1px), calc(94vh / 1183));
  --ns-ease: cubic-bezier(.22, 1, .36, 1);
}
/* 遮罩：设计是一层纯黑、70% 不透明 */
.nsheet__mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  transition: opacity .3s ease;
}
.nsheet__panel {
  position: absolute;
  left: 50%; bottom: 0;
  width: calc(1601 * var(--ns-u));
  height: calc(1183 * var(--ns-u));
  transform: translate(-50%, 100%);
  /* 收起：先慢后快落回底部 */
  transition: transform .36s cubic-bezier(.4, 0, .9, .6);
}
.nsheet.is-open .nsheet__mask { opacity: 1; }
.nsheet.is-open .nsheet__panel {
  transform: translate(-50%, 0);
  /* 升起：快起慢停，末段带一点减速 */
  transition: transform .48s var(--ns-ease);
}
.nsheet__panel > * { position: absolute; }
.nsheet__bg { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

/* 左上角返回（小熊举箭头），点了收起弹框 */
.nsheet__back {
  left: calc(2 * var(--ns-u)); top: calc(42 * var(--ns-u));
  width: calc(244 * var(--ns-u)); height: calc(93 * var(--ns-u));
  transition: transform .2s ease;
}
.nsheet__back img { width: 100%; height: 100%; }
.nsheet__back:hover { transform: translateX(calc(-6 * var(--ns-u))); }
.nsheet__back:active { transform: translateX(calc(-6 * var(--ns-u))) scale(.94); transition-duration: .09s; }

/* 分类栏：胶囊底在下、文字在上。胶囊横向对齐当前分类的文字中心，
   纵向照设计比文字行框高 10px（切图上方是两只耳朵，主体中线正好压住文字中线） */
.nsheet__pill {
  left: calc((629 - 88.5) * var(--ns-u)); top: calc(69 * var(--ns-u));
  width: calc(177 * var(--ns-u)); height: calc(60 * var(--ns-u));
  transition: left .3s ease;
  pointer-events: none;
}
.nsheet__panel[data-active="1"] .nsheet__pill { left: calc((804 - 88.5) * var(--ns-u)); }
.nsheet__panel[data-active="2"] .nsheet__pill { left: calc((982 - 88.5) * var(--ns-u)); }
.nsheet__tab {
  top: calc(79 * var(--ns-u));
  transform: translateX(-50%);
  font-size: calc(31.996 * var(--ns-u));
  line-height: calc(52.764 * var(--ns-u));
  white-space: nowrap;
  color: #774940;
  transition: color .25s ease;
  z-index: 3;
}
.nsheet__tab.is-active { color: #fff; }
/* 悬浮态沿用第 5 屏：未选中的分类划过时垫一枚奶油色胶囊（这里不带倾斜） */
.nsheet__tab::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: calc(160 * var(--ns-u)); height: calc(46 * var(--ns-u));
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #ebdfc2;
  opacity: 0;
  transition: opacity .22s ease;
  z-index: -1;
}
.nsheet__tab:not(.is-active):hover::before { opacity: 1; }
.nsheet__tab.is-active::before { opacity: 0; transition: none; }
.nsheet__tab:active { transform: translateX(-50%) scale(.93); }
.nsheet__tab--latest { left: calc(629 * var(--ns-u)); }
.nsheet__tab--news   { left: calc(804 * var(--ns-u)); }
.nsheet__tab--notice { left: calc(982 * var(--ns-u)); }

/* 资讯列表：沿用第 5 屏资讯条的版式（分类在上，书签 + 标题在下，日期靠右），
   但横平竖直、不带倾斜角度。一页 6 条，条距取设计 118.6 的平均步长。 */
.nsheet__list {
  left: calc(73 * var(--ns-u)); top: calc(153 * var(--ns-u));
  width: calc(1464 * var(--ns-u));
  display: flex;
  flex-direction: column;
  gap: calc(17.6 * var(--ns-u));
}
.nsheet-row {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  height: calc(101 * var(--ns-u));
  color: #774940;
  font-size: calc(26.664 * var(--ns-u));
  line-height: calc(52.764 * var(--ns-u));
  white-space: nowrap;
  transition: transform .2s ease;
  animation: nsRowIn .42s var(--ns-ease) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.nsheet-row:hover { transform: translateX(calc(6 * var(--ns-u))); }
.nsheet-row:active { transform: translateX(calc(6 * var(--ns-u))) scale(.985); transition-duration: .09s; }
.nsheet-row > * { position: absolute; }
.nsheet-row__bg { left: 0; top: 0; width: 100%; height: 100%; }
/* 条目内的文字整组比设计坐标上提 9：按设计坐标排，资源圆体的字底几乎贴着白卡底边
   （上方留白约 21、下方约 2），上提后上下留白各约 12，文字在卡片里居中。
   书签图标与标题取同一条中线：标题行框中心在 72.4，图标高 29，top 取 58。 */
.nsheet-row__cat { left: calc(23 * var(--ns-u)); top: calc(2 * var(--ns-u)); }
.nsheet-row__bullet {
  left: calc(21 * var(--ns-u)); top: calc(58 * var(--ns-u));
  width: calc(24 * var(--ns-u)); height: calc(29 * var(--ns-u));
}
.nsheet-row__title {
  left: calc(72 * var(--ns-u)); top: calc(46 * var(--ns-u));
  max-width: calc(1180 * var(--ns-u));
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 日期靠右对齐：设计里右缘距条目右边约 13 */
.nsheet-row__date { right: calc(13 * var(--ns-u)); top: calc(46 * var(--ns-u)); }

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

/* 翻页：左右箭头夹住页码，整组以面板中线居中 */
.nsheet__pager { left: 0; top: 0; width: 100%; height: 0; }
.nsheet__pager > * { position: absolute; }
.nsheet__arrow {
  top: calc(1067 * var(--ns-u));
  width: calc(23 * var(--ns-u)); height: calc(32 * var(--ns-u));
  transition: transform .2s ease, opacity .2s ease;
}
.nsheet__arrow img { width: 100%; height: 100%; }
.nsheet__arrow--prev { left: calc(708 * var(--ns-u)); }
.nsheet__arrow--next { left: calc(870 * var(--ns-u)); }
.nsheet__arrow--prev:not(:disabled):hover { transform: translateX(calc(-4 * var(--ns-u))); }
.nsheet__arrow--next:not(:disabled):hover { transform: translateX(calc(4 * var(--ns-u))); }
.nsheet__arrow:not(:disabled):active { transform: scale(.85); transition-duration: .09s; }
.nsheet__arrow:disabled { opacity: .35; cursor: default; }
/* 字距会在最后一个字后面也留一截空，用等量首行缩进把它抵掉，页码才真正居中 */
.nsheet__page {
  left: calc(731 * var(--ns-u)); top: calc(1059 * var(--ns-u));
  width: calc(139 * var(--ns-u));
  text-align: center;
  font-size: calc(26.664 * var(--ns-u));
  line-height: calc(52.764 * var(--ns-u));
  letter-spacing: calc(20.265 * var(--ns-u));
  text-indent: calc(20.265 * var(--ns-u));
  white-space: nowrap;
  color: #774940;
}

/* ============================================================================
   资讯详情（Figma 112:261）—— 与列表同一张面板：进详情时收起分类 / 列表 / 翻页，
   换成 主标题（48）/ 副标题 + 日期白条（32）/ 正文（24）三段。
   坐标照设计截图实测，与列表同一套面板坐标；白条复用条目底纹切图。
   ========================================================================== */
.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(--ns-ease);
}
.nsheet__detail > * { position: absolute; pointer-events: auto; }
@keyframes nsDetailIn {
  from { opacity: 0; transform: translateY(calc(14 * var(--ns-u))); }
}

/* 主标题：设计里字墨中心 x≈812、字心 y≈89.5；标题长了最多折两行。
   资源圆体的「《」「》」两侧留白不对称，排版盒中心取 802 时字墨中心才落在 812 */
.nsheet__d-title {
  left: calc(272 * var(--ns-u)); top: calc(29.5 * var(--ns-u));
  width: calc(1061 * var(--ns-u)); height: calc(120 * var(--ns-u));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(48 * var(--ns-u));
  line-height: calc(60 * var(--ns-u));
  font-weight: inherit;
  color: #774940;
  overflow: hidden;
}

/* 副标题白条：左副标题、右日期，同在白条的竖向中线上；副标题过长时省略，不挤日期 */
.nsheet__d-head {
  left: calc(56.7 * var(--ns-u)); top: calc(165.6 * var(--ns-u));
  width: calc(1490.3 * var(--ns-u)); height: calc(81.5 * var(--ns-u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(40 * var(--ns-u));
  padding: 0 calc(20 * var(--ns-u)) 0 calc(27 * var(--ns-u));
  font-size: calc(32 * var(--ns-u));
  line-height: calc(48 * var(--ns-u));
  white-space: nowrap;
  color: #774940;
}
.nsheet__d-headbg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.nsheet__d-sub,
.nsheet__d-date { position: relative; }
.nsheet__d-sub { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nsheet__d-date { flex: none; }

/* 正文：24 号字、行距 40.2（设计每行 60 字），超出的部分在框内滚动；正文里的换行即分段。
   框右缘 = 滑块右缘 1549.6，正文区宽 1440.9，与滑块隔开 40；
   框底边与设计里滚动轨道的底端对齐（1073.5），露出的最后半行不会落到轨道外 */
.nsheet__d-body {
  left: calc(59 * var(--ns-u)); top: calc(293.5 * var(--ns-u));
  width: calc(1490.6 * var(--ns-u)); height: calc(780 * var(--ns-u));
  padding-right: calc(40 * var(--ns-u));
  overflow-y: auto;
  /* 滚动条位置常留：正文长短不同时，正文区宽度都保持 1440.9，不会因为出没出现滚动条而跳宽 */
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  font-size: calc(24 * var(--ns-u));
  line-height: calc(40.2 * var(--ns-u));
  white-space: pre-line;
  overflow-wrap: anywhere; /* 超长串才断开；英文按单词换行，不把单词拦腰截断 */
  text-align: justify;
  color: #774940;
}
/* 滚动条照设计：暖灰细轨（约 6.5，居中垫在滑块下）+ 9.7 宽的橙色圆头滑块，
   轨道起止与设计一致（顶 303.5 / 底 1073.5） */
.nsheet__d-body::-webkit-scrollbar { width: calc(9.7 * var(--ns-u)); }
.nsheet__d-body::-webkit-scrollbar-track {
  margin: calc(10 * var(--ns-u)) 0 0;
  border: solid transparent;
  border-width: 0 calc(1.6 * var(--ns-u));
  border-radius: 999px;
  background: #e0d7d0;
  background-clip: padding-box;
}
.nsheet__d-body::-webkit-scrollbar-thumb { border-radius: 999px; background: #ffb43f; }
/* 不支持上面这套写法的浏览器（Firefox）退回标准属性，颜色一致 */
@supports not selector(::-webkit-scrollbar) {
  .nsheet__d-body { scrollbar-width: thin; scrollbar-color: #ffb43f #e0d7d0; }
}

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