:root {
  --ink: #0E1A24;
  --ink-2: #35485A;
  --ink-3: #6B7F91;
  --line: #E2E8EE;
  --line-2: #CFD9E2;
  --bg: #FFFFFF;
  --bg-2: #F6F9FC;
  --bg-3: #EDF3F8;
  --ice: #E6F1FB;
  --blue: #1B6FC4;
  --blue-d: #0C447C;
  --blue-l: #E6F1FB;
  --teal: #0F6E56;
  --teal-l: #E1F5EE;
  --coral: #C24E24;
  --coral-l: #FAECE7;
  --amber: #854F0B;
  --amber-l: #FAEEDA;
  --red: #A32D2D;
  --red-l: #FCEBEB;
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 24px;
  --sans: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ------------------------------------------------------------------
 * [hidden] 兜底 —— 别删！
 *
 * 浏览器对 [hidden] 生效的 display:none，来源是「用户代理样式表」，
 * 优先级低于作者写的任何一条规则。所以只要某个 class 上写了
 * display:flex / grid，该元素就算带 hidden 也照样显示。
 *
 * 这个坑真实踩过一次：管理后台的编辑抽屉 .adm-mask 写了 display:flex，
 * 结果 el.hidden = true 执行成功、元素却依旧铺满整屏，点关闭「没反应」。
 *
 * 这条 !important 把 [hidden] 的控制权抢回来，全局生效，
 * 以后任何页面用 hidden 显隐都不会再被自己的 class 覆盖。
 * ------------------------------------------------------------------ */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
/* 注意：这里不能加 backdrop-filter / transform / filter ——
   它们会把后代的 position:fixed 元素（用户系统 .u-mask 弹窗就挂在头部
   #user-bar 里）劫持成「相对头部定位」，弹窗和遮罩被裁进 68px 的导航条，
   页面其余部分完全盖不住（2026-10-03 用户实测踩坑）。 */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  border-bottom: 0.5px solid var(--line);
}
.hdr-in {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  height: 68px; display: flex; align-items: center; gap: 32px;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--blue-d); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-txt { font-size: 16px; font-weight: 500; letter-spacing: -.2px; }
.brand-txt small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; letter-spacing: .4px; margin-top: -3px; }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  padding: 8px 14px; border-radius: var(--r-s); font-size: 14px;
  color: var(--ink-2); transition: background .15s, color .15s;
  white-space: nowrap;   /* 2026-10-26：登录态下中宽窗口会把「滑雪资讯」等四字标题挤成两行，文字永不换行 */
}
.nav a:hover { background: var(--bg-3); color: var(--ink); }
.nav a.on { background: var(--blue-l); color: var(--blue-d); font-weight: 500; }

/* 2026-10-26：右侧用户区（私信/昵称/管理后台/退出）登录后才出现，
   981-1400px 的中等窗口里总宽超了，浏览器把每个菜单项压窄 → 文字两行。
   根治 nowrap 之外，中宽区间分两档收紧内距与间距，保证整行放下（真浏览器实测）。 */
@media (max-width: 1400px) {
  .hdr-in { gap: 18px; }
  .nav { gap: 2px; }
  .nav a { padding: 8px 10px; }
}
@media (max-width: 1300px) {
  .hdr-in { padding: 0 16px; }
  .nav a { padding: 8px 7px; font-size: 13.5px; }
  .brand-txt small { display: none; }   /* 「SNOWLINE」小字让位，品牌缩窄 */
}

.nav-toggle {
  display: none; width: 38px; height: 38px; border: 0.5px solid var(--line-2);
  background: #fff; border-radius: var(--r-s); cursor: pointer; margin-left: auto;
}
.nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--ink); margin: 3px auto; }

/* ---------- 移动端首次导航引导（assets/nav-hint.js，2026-10-07） ----------
   手机上 8 个栏目全收在汉堡里，新访客不知道要点。首次窄屏访问时在按钮上方浮一条气泡。
   纯 CSS 动画，无依赖；JS 侧只负责决定"要不要显示"和"什么时候永久消失"。 */
.nav-hint {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px 11px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
  opacity: 0; transform: translateY(-6px) scale(.97);
  transition: opacity .24s ease, transform .24s ease;
  pointer-events: none;             /* 不挡任何点击，只做提示 */
}
.nav-hint.nav-hint-in { opacity: 1; transform: translateY(0) scale(1); }
/* 指向汉堡按钮的小三角 */
.nav-hint-arrow {
  position: absolute; top: -6px; right: 13px;
  width: 12px; height: 12px; background: var(--ink);
  transform: rotate(45deg); border-radius: 2px;
}
.nav-hint b { font-size: 14px; font-weight: 600; }
.nav-hint > span:last-child { font-size: 12px; color: rgba(255, 255, 255, .72); }
/* 汉堡展开时收起提示：菜单已经打开，再提示就多余了 */
.nav-hint.is-hiding { opacity: 0; transform: translateY(-6px) scale(.97); }
/* 极窄屏（320px 一类）别让气泡顶出屏幕 */
@media (max-width: 360px) {
  .nav-hint { right: -4px; padding: 9px 11px 10px; }
  .nav-hint-arrow { right: 16px; }
  .nav-hint > span:last-child { font-size: 11px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--r-s); font-size: 14px;
  border: 0.5px solid var(--line-2); background: #fff; color: var(--ink);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.btn:hover { border-color: var(--ink-3); }
.btn-p { background: var(--blue-d); border-color: var(--blue-d); color: #fff; font-weight: 500; }
.btn-p:hover { background: #0a3763; border-color: #0a3763; }
.btn-s { padding: 7px 13px; font-size: 13px; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(170deg, #0C2E4E 0%, #0C447C 45%, #1B6FC4 100%);
  color: #fff; padding: 92px 0 100px;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.55) 50%, transparent 50%),
    radial-gradient(2px 2px at 78% 15%, rgba(255,255,255,.4) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 45% 68%, rgba(255,255,255,.35) 50%, transparent 50%),
    radial-gradient(2px 2px at 88% 72%, rgba(255,255,255,.3) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 25% 85%, rgba(255,255,255,.32) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 62% 35%, rgba(255,255,255,.3) 50%, transparent 50%);
  pointer-events: none;
}
.hero-in { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.tagpill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px;
  background: rgba(255,255,255,.12); border: 0.5px solid rgba(255,255,255,.28);
  margin-bottom: 24px; letter-spacing: .3px;
}
.dot-live { width: 6px; height: 6px; border-radius: 50%; background: #7FD8A8; }
.hero h1 {
  font-size: 54px; line-height: 1.12; font-weight: 500;
  letter-spacing: -1.4px; max-width: 800px; margin-bottom: 22px;
}
.hero h1 em { font-style: normal; color: #9FD2FF; }
.hero p.lead { font-size: 17px; color: rgba(255,255,255,.82); max-width: 590px; line-height: 1.7; margin-bottom: 34px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-cta .btn { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; }
.hero-cta .btn:hover { background: rgba(255,255,255,.16); }
.hero-cta .btn-p { background: #fff; color: var(--blue-d); border-color: #fff; font-weight: 500; }
.hero-cta .btn-p:hover { background: #EAF3FC; }

.hero-stats {
  position: relative; z-index: 2; max-width: var(--max); margin: 56px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
  background: rgba(255,255,255,.16); border-radius: var(--r-m); overflow: hidden;
}
.hero-stats div { background: rgba(12,46,78,.5); padding: 20px 22px; }
.hero-stats b { display: block; font-size: 26px; font-weight: 500; letter-spacing: -.5px; }
.hero-stats span { font-size: 12.5px; color: rgba(255,255,255,.72); }

.snowline { display: block; width: 100%; margin-top: -1px; }

/* ---------- sections ---------- */
section { padding: 76px 0; }
section.alt { background: var(--bg-2); }
.sec-head { margin-bottom: 40px; max-width: 660px; }
.sec-kicker {
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--blue); font-weight: 500; margin-bottom: 12px;
}
.sec-head h2 { font-size: 32px; font-weight: 500; letter-spacing: -.8px; line-height: 1.25; margin-bottom: 12px; }
.sec-head p { color: var(--ink-2); font-size: 15.5px; }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* ---------- cards ---------- */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.card {
  background: #fff; border: 0.5px solid var(--line);
  border-radius: var(--r-m); padding: 24px;
  transition: border-color .18s, transform .18s;
}
.card:hover { border-color: var(--line-2); }
.card h3 { font-size: 17px; font-weight: 500; margin-bottom: 8px; letter-spacing: -.2px; }
.card p { color: var(--ink-2); font-size: 14px; }

.news-item {
  display: grid; grid-template-columns: 76px 1fr; gap: 18px;
  padding: 22px 0; border-bottom: 0.5px solid var(--line); align-items: start;
}
.news-item:last-child { border-bottom: 0; }
.news-date {
  font-size: 11.5px; color: var(--ink-3); letter-spacing: .3px;
  border: 0.5px solid var(--line); border-radius: var(--r-s);
  padding: 8px 4px; text-align: center; line-height: 1.35; background: var(--bg-2);
}
.news-date b { display: block; font-size: 18px; color: var(--ink); font-weight: 500; margin-top: 1px; }
.news-item h3 { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.news-item p { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
  background: var(--bg-3); color: var(--ink-2);
}
.chip.b { background: var(--blue-l); color: var(--blue-d); }
.chip.t { background: var(--teal-l); color: var(--teal); }
.chip.a { background: var(--amber-l); color: var(--amber); }
.chip.c { background: var(--coral-l); color: var(--coral); }
.chip.r { background: var(--red-l); color: var(--red); }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fbtn {
  padding: 7px 15px; border-radius: 999px; font-size: 13.5px;
  border: 0.5px solid var(--line-2); background: #fff; color: var(--ink-2);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.fbtn:hover { border-color: var(--ink-3); color: var(--ink); }
.fbtn.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- gear table ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; padding: 0 14px 12px 0; border-bottom: 0.5px solid var(--line-2);
}
.tbl td { padding: 15px 14px 15px 0; border-bottom: 0.5px solid var(--line); vertical-align: top; }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }
/* 2026-10-07：价格对照表可读性优化 —— 斑马纹 + 价格等宽数字 + 更明显的行高亮 */
.tbl thead th { background: var(--bg-2); font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.tbl tbody tr:nth-child(even) td { background: #F7F9FC; }
.tbl tbody tr:hover td { background: #EAF2FB; }
.tbl .nm { font-weight: 500; }
.tbl .sm { font-size: 13px; color: var(--ink-3); }
.tbl .pr { font-weight: 500; color: var(--blue-d); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- 雪票价格对照表（2026-10-07 重排） ----------
   原来的问题是「留白太长」：表格 min-width:1080px 硬撑在 ~1080px 容器里，
   而平日/周末/节假日三列各只分到 120px，装的却是「中高级道日雪带 330；初级魔毯道 230」
   这种长文本 → 每字换行，一行撑到 200-400px 高，旁边季卡列却还有大片空白。
   现在：①去掉 min-width，让浏览器按内容自然分配；②三档票价合并成「一日票价」一格，
   内部横排（.price-3），文字横向铺开；③季卡/儿童两列给足宽度。
   table-layout:auto + 去掉 min-width 是关键：固定布局会把长文本塞进等宽窄列里硬换行。 */
.tbl-price { table-layout: auto; min-width: 0; }
.tbl-price th, .tbl-price td { vertical-align: middle; }
/* 🔴 2026-10-08 用户反馈：「雪票价格对照表 字体不太合适，没有居中，区域那块都竖着了」。
   实测（真浏览器量 getBoundingClientRect）：区域列只有 **39px**，
   而格子里是 `.chip`（padding:3px 10px + font-size:11.5px）——
   「黑龙江」三个字 ≈35px + 20px 内边距 = 55px > 39px，浏览器只能每字换一行 →
   「竖着排」就是这么来的（行高被撑到 126px）。
   根因是 `width: 1%`（让列缩到最小）+ `white-space: nowrap` 只作用在 td 上，
   nowrap 被里面那个 inline-block 的 chip 破坏了 —— nowrap 不继承给 chip。
   修法（三条一起，缺一条都还会竖）：
     ① min-width 给到 72px（容得下最长的「黑龙江」+ chip 内边距）；
     ② nowrap 也要写给 .chip 自己（inline-block 不继承 nowrap）；
     ③ 单元格内容居中 —— 用户明确要「居中」，原来全表是 text-align:start。 */
.tbl-price .c-name { min-width: 190px; }
.tbl-price .c-area { min-width: 72px; text-align: center; }
.tbl-price .c-area .chip { white-space: nowrap; font-size: 12px; padding: 3px 9px; }
.tbl-price .c-temp { min-width: 64px; text-align: center; }
.tbl-price .c-price { min-width: 300px; }
.tbl-price .c-season { min-width: 240px; }
.tbl-price .c-kid { min-width: 180px; }
/* 三档票价横排：每档「标签 + 数字」竖排一层，档与档之间留够间距 */
.tbl-price .price-3 { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.tbl-price .price-3 > div { display: flex; align-items: baseline; gap: 6px; }
.tbl-price .price-3 .pk { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.tbl-price .price-3 b {
  font-weight: 600; color: var(--blue-d); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tbl-price .pcell { line-height: 1.6; text-align: center; }
/* 🔴 2026-10-10 用户反馈：「雪票价格对照表里的 字体又不是居中的了，看着不舒服」。
   原来这里写死 `text-align: left`（长文案左对齐才好读），表头也跟着左对齐
   → 一眼扫过去「雪场/一日票价/季卡/儿童」四列全贴左边，只有区域/气温居中，
   整张表东倒西歪，这就是"没居中"的观感。
   用户明确要**全表统一居中**，表头与单元格必须同步（不然表头和内容还是错位的）。
   季卡/儿童是长段落，居中后每行两端对齐不齐会显乱 —— 用 `text-align:center`
   配 `text-wrap: pretty` 让浏览器少造孤行，字号略降到 12.5px 保持密度。 */
.tbl-price .c-name,
.tbl-price .c-season,
.tbl-price .c-kid { text-align: center; text-wrap: pretty; }
/* 表头跟着居中（原来 th.c-name/c-season/c-kid 是 left，与内容不一致；
   th.c-price 压根没规则 → 继承 th 的默认 start，同样和居中的内容错位） */
.tbl-price th { font-size: 12.5px; color: var(--ink-2); font-weight: 600; text-align: center; }
.tbl-price th.c-name,
.tbl-price th.c-season,
.tbl-price th.c-kid { text-align: center; }
/* 雪场名里的开板倒计时小字：居中后紧跟名字，别再顶格 */
.tbl-price .c-name .sm { margin-top: 3px; }
/* 🔴 上面写了 text-align:center 还不够 —— 这两个内部元素自己是**块级 flex 容器**，
   flex 子项默认贴主轴起点，text-align 对它们无效（会「看着居中其实没居中」）：
     ① `.os-cell { display:flex }` 雪场名+徽标；
     ② `.longcell > summary { display:-webkit-box }` 季卡/儿童的折叠摘要。
   必须显式 justify-content:center（-webkit-box 用 -webkit-box-pack: center）。 */
.tbl-price .c-name .os-cell { justify-content: center; }
.tbl-price .c-season .longcell > summary,
.tbl-price .c-kid .longcell > summary {
  -webkit-box-pack: center;
  text-align: center;
}
/* 「展开/收起」小标签紧跟在摘要文字末尾（HTML 里就是最后一个子元素），留个左间距即可 */
.tbl-price .longcell-more { margin-left: 6px; }
/* 窄屏：价格三档改成竖排，表格整体允许横向滚动（容器已有 overflow-x:auto） */
@media (max-width: 900px) {
  .tbl-price .price-3 { gap: 4px 14px; }
  .tbl-price { min-width: 720px; }
}

/* ---------- checklist ---------- */
.tier { border: 0.5px solid var(--line); border-radius: var(--r-m); background: #fff; overflow: hidden; }
.tier-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 0.5px solid var(--line); background: var(--bg-2);
}
.tier-n {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px; font-weight: 500;
  background: var(--blue-d); color: #fff;
}
.tier-hd h3 { font-size: 15px; font-weight: 500; }
.tier-hd span { font-size: 13px; color: var(--ink-3); margin-left: auto; }
.tier-bd { padding: 6px 20px 14px; }

.ck {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 0; cursor: pointer; user-select: none;
}
.ck input { position: absolute; opacity: 0; pointer-events: none; }
.ck-box {
  width: 17px; height: 17px; border-radius: 5px; flex-shrink: 0; margin-top: 3px;
  border: 1.5px solid var(--line-2); background: #fff;
  display: grid; place-items: center; transition: all .15s;
}
.ck-box svg { width: 10px; height: 10px; opacity: 0; transform: scale(.6); transition: all .15s; }
.ck input:checked ~ .ck-box { background: var(--teal); border-color: var(--teal); }
.ck input:checked ~ .ck-box svg { opacity: 1; transform: scale(1); }
.ck-txt { font-size: 14px; line-height: 1.5; }
.ck-txt b { font-weight: 500; }
.ck-txt em { font-style: normal; color: var(--ink-3); font-size: 13px; }
.ck input:checked ~ .ck-txt { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.ck input:checked ~ .ck-txt b { color: var(--ink-3); }

.progress-wrap { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--teal); border-radius: 999px; transition: width .3s; }
.progress-num { font-size: 14px; font-weight: 500; color: var(--ink-2); min-width: 54px; text-align: right; }

/* ---------- buying guide ---------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.step { position: relative; padding-top: 28px; }
.step::before {
  content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 1.5px; background: var(--line-2);
}
.step:first-child::before { left: 50%; }
.step:last-child::before { right: 50%; }
.step-dot {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  border: 2px solid var(--line-2); z-index: 1;
}
.step.on .step-dot { border-color: var(--blue); background: var(--blue); }
.step.on::before { background: var(--blue); }
.step h4 { font-size: 13.5px; font-weight: 500; text-align: center; margin-bottom: 4px; }
.step p { font-size: 12.5px; color: var(--ink-3); text-align: center; line-height: 1.5; }

.budget-card {
  border: 0.5px solid var(--line); border-radius: var(--r-m);
  padding: 22px; background: #fff; display: flex; flex-direction: column;
}
.budget-card.feat { border: 2px solid var(--blue); }
.budget-tag {
  display: inline-block; font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
  background: var(--blue-l); color: var(--blue-d); margin-bottom: 12px; align-self: flex-start;
}
.budget-card h3 { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.budget-sum { font-size: 26px; font-weight: 500; letter-spacing: -.6px; color: var(--ink); margin: 8px 0 4px; }
.budget-sum small { font-size: 13px; color: var(--ink-3); font-weight: 400; letter-spacing: 0; }
.budget-card ul { list-style: none; margin-top: 14px; display: grid; gap: 7px; }
.budget-card li { font-size: 13.5px; color: var(--ink-2); padding-left: 16px; position: relative; }
.budget-card li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--line-2);
}

/* ---------- slope difficulty ---------- */
.slopes { display: grid; gap: 10px; }
.slope {
  display: grid; grid-template-columns: 46px 1fr 100px; gap: 16px; align-items: center;
  padding: 16px 18px; border: 0.5px solid var(--line); border-radius: var(--r-m); background: #fff;
}
.slope-badge {
  width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center;
  font-size: 19px; font-weight: 500; color: #fff; flex-shrink: 0;
}
.slope h4 { font-size: 15px; font-weight: 500; margin-bottom: 3px; }
.slope p { font-size: 13.5px; color: var(--ink-2); }
.slope-meta { text-align: right; font-size: 12.5px; color: var(--ink-3); }
.slope-meta b { display: block; font-size: 14px; color: var(--ink); font-weight: 500; }

/* ---------- 雪场卡片详情（吃食推荐 / 优缺点 / 票务住宿）---------- */

/* 卡片底部那块可展开区。summary 去掉默认三角，换成一个可点的标题行。 */
.card-more {
  margin-top: 14px; padding-top: 12px;
  border-top: 0.5px solid var(--line);
}
.card-more > summary {
  cursor: pointer; list-style: none;
  font-size: 13px; color: var(--blue-d);
  display: flex; align-items: center; gap: 6px;
}
.card-more > summary::-webkit-details-marker { display: none; }
.card-more > summary::after { content: '▾'; font-size: 11px; transition: transform .15s; }
.card-more[open] > summary::after { transform: rotate(180deg); }
.card-more > summary:hover { text-decoration: underline; }
.card-more-body { margin-top: 14px; display: grid; gap: 16px; }

.cm-blk { display: grid; gap: 9px; }
.cm-t {
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  letter-spacing: .02em;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.cm-t > small { font-weight: 400; font-size: 11px; color: var(--ink-3); }
.cm-kv { font-size: 13px; color: var(--ink-2); line-height: 1.65; }
.cm-kv b { color: var(--ink); font-weight: 500; }

/* 雪场卡片「相关资讯」：一行一条报道，左日期右标题，点击去资讯页按同关键词过滤 */
.rn-list { list-style: none; display: grid; gap: 7px; }
.rn-list a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 10px; border: 0.5px solid var(--line); border-radius: 10px;
  font-size: 13px; color: var(--ink); text-decoration: none; line-height: 1.5;
  transition: background .15s, border-color .15s;
}
.rn-list a:hover { background: rgba(0,0,0,.03); border-color: var(--line-2); }
.rn-date { flex-shrink: 0; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rn-title { flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 资讯页 ?q= 关键词过滤提示条 */
.kw-note {
  margin: -16px 0 20px; padding: 10px 14px; font-size: 13px; color: var(--ink-2);
  background: rgba(47,111,237,.07); border: 0.5px solid rgba(47,111,237,.25); border-radius: 10px;
}
.kw-note b { color: var(--ink); font-weight: 500; }
.kw-note a { color: var(--blue-d); text-decoration: none; }
.kw-note a:hover { text-decoration: underline; }

/* 吃食推荐：一行一家店，左侧示意图 + 右侧文字 */
.eat-list { list-style: none; display: grid; gap: 10px; }
.eat-item {
  display: grid; grid-template-columns: 72px 1fr; gap: 12px;
  padding: 10px; border: 0.5px solid var(--line); border-radius: var(--r-s);
  background: var(--bg-2);
}
.eat-item > .eat-thumb {
  width: 72px; height: 54px; object-fit: cover; border-radius: 6px;
  background: var(--bg-3); display: block;
}
.eat-body { min-width: 0; display: grid; gap: 5px; }
.eat-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.eat-head b { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.eat-head .chip { font-size: 10.5px; padding: 2px 8px; }
.eat-price { font-size: 11.5px; color: var(--blue-d); }
.eat-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.eat-links { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.eat-links a { font-size: 12px; color: var(--blue-d); }
.eat-links a:hover { text-decoration: underline; }
.eat-links .eat-note { font-size: 11px; color: var(--ink-3); }

/* 套票 / 组合套餐：雪场卡片展开区（.pkg-item）+ 页面下方跨雪场区块（.pkg-card）。
   两处都显式写 margin:0，避免被全局 h3 / p 的默认外边距撑出多余的竖向空隙。 */
.pkg-list { list-style: none; display: grid; gap: 10px; }
.pkg-item {
  border: 0.5px solid var(--line); border-left: 2px solid var(--blue);
  border-radius: var(--r-s); padding: 11px 13px; background: var(--bg);
  display: grid; gap: 5px;
}
.pkg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pkg-head b { font-size: 13.5px; font-weight: 500; color: var(--ink); margin: 0; }
.pkg-price {
  font-size: 12px; font-weight: 500; color: var(--blue-d);
  background: var(--blue-l); border-radius: 999px; padding: 2px 9px;
}
.pkg-inc { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.pkg-note { margin: 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }

.pkg-card {
  background: #fff; border: 0.5px solid var(--line); border-radius: var(--r-m);
  padding: 24px; display: grid; gap: 8px; align-content: start;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.pkg-card:hover { border-color: var(--line-2); box-shadow: 0 2px 10px rgba(20,40,80,.05); }
.pkg-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pkg-card-region { font-size: 12.5px; color: var(--ink-3); }
.pkg-card-title { margin: 0; font-size: 16.5px; font-weight: 500; color: var(--ink); }
.pkg-card-price { font-size: 19px; font-weight: 500; color: var(--blue-d); line-height: 1.3; }
.pkg-card-inc { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }
.pkg-card-inc b { color: var(--ink); font-weight: 500; }
.pkg-card-note { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }

/* 优点 / 缺点对照 */
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc {
  border: 0.5px solid var(--line); border-radius: var(--r-s);
  padding: 11px 13px; background: var(--bg);
}
.pc-pro { border-left: 2px solid var(--teal); }
.pc-con { border-left: 2px solid var(--coral); }
.pc-t { font-size: 11.5px; font-weight: 500; margin-bottom: 7px; }
.pc-pro .pc-t { color: var(--teal); }
.pc-con .pc-t { color: var(--coral); }
.pc ul { list-style: none; display: grid; gap: 5px; }
.pc li {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
  padding-left: 11px; position: relative;
}
.pc li::before { position: absolute; left: 0; top: 0; font-size: 11px; }
.pc-pro li::before { content: '＋'; color: var(--teal); }
.pc-con li::before { content: '－'; color: var(--coral); }

@media (max-width: 860px) {
  .pc-grid { grid-template-columns: 1fr; }
  .eat-item { grid-template-columns: 60px 1fr; }
  .eat-item > .eat-thumb { width: 60px; height: 45px; }
}
@media (max-width: 480px) {
  .eat-item { grid-template-columns: 1fr; }
  .eat-item > .eat-thumb { width: 100%; height: 132px; }
}

/* ---------- footer ---------- */
footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 56px 0 32px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
footer h4 { color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 16px; }
footer .brand-txt { color: #fff; }
footer .brand-mark { background: rgba(255,255,255,.14); }
footer ul { list-style: none; display: grid; gap: 10px; }
footer a:hover { color: #fff; }
.foot-note { border-top: 0.5px solid rgba(255,255,255,.16); padding-top: 24px; display: flex; justify-content: space-between; gap: 20px; font-size: 12.5px; color: rgba(255,255,255,.5); flex-wrap: wrap; }

/* ---------- misc ---------- */
.note {
  border-left: 2px solid var(--blue); background: var(--bg-2);
  padding: 16px 20px; border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 14px; color: var(--ink-2);
}
.note b { color: var(--ink); font-weight: 500; }
.note.warn { border-left-color: var(--amber); background: var(--amber-l); }
.note.warn b { color: var(--amber); }

.mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; }

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .nav { display: none; position: absolute; top: 68px; left: 0; right: 0;
        flex-direction: column; background: #fff; border-bottom: 0.5px solid var(--line);
        padding: 12px 20px 18px; gap: 2px; }
  .nav.open { display: flex; }
  .nav-toggle { display: block; }
  .hero h1 { font-size: 38px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .wrap, .hdr-in, .hero-in, .hero-stats { padding-left: 18px; padding-right: 18px; }
  .hero { padding: 64px 0 72px; }
  .hero h1 { font-size: 31px; letter-spacing: -.8px; }
  .hero p.lead { font-size: 15.5px; }
  section { padding: 56px 0; }
  .sec-head h2 { font-size: 25px; }
  .g2, .g3, .g4 { grid-template-columns: minmax(0,1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .slope { grid-template-columns: 46px 1fr; }
  .slope-meta { grid-column: 2; text-align: left; }
  .tbl thead { display: none; }
  .tbl td { display: block; padding: 4px 0; border: 0; }
  .tbl tr { display: block; padding: 16px 0; border-bottom: 0.5px solid var(--line); }
  .foot-grid { grid-template-columns: 1fr; }
  .sec-head-row { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------
   实时数据状态提示（首页 / 资讯 / 雪场）
   内容来自 GET /api/content，这里告诉访客数据有多新，
   接口不可用时明确说明当前展示的是内置数据，不让人误以为是实时值。
   ------------------------------------------------------------------ */
.live-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 8px;
  min-height: 0;
}
.live-note:empty { display: none; }
.live-note.on::before,
.live-note.off::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.live-note.on::before { background: var(--teal); }
.live-note.off::before { background: var(--line-2); }
.live-note.on { color: var(--teal); }

/* ------------------------------------------------------------------
 * 手机上键盘类输入控件字号不小于 16px —— 别删！
 * iOS（含微信内置浏览器）在输入框字号小于 16px 时，一聚焦就会把整页自动放大，
 * 用户必须手动捏合缩回去，体验很差。桌面端不受影响。
 * ------------------------------------------------------------------ */
@media (max-width: 760px) {
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------------
 * 首屏视差（方案 C）—— 只在首页 .hero-photo 上生效。
 * 原来的深蓝渐变保留为最底层，上面压照片和一层同色系半透明渐变，
 * 白字可读性不变；background-attachment: fixed 做滚动视差。
 * iOS / 安卓 WebView 对 fixed 支持差，小屏一律回 scroll。
 * ------------------------------------------------------------------ */
.hero-photo {
  background:
    linear-gradient(168deg, rgba(12,46,78,.90) 0%, rgba(12,68,124,.74) 45%, rgba(27,111,196,.46) 100%),
    url("wall/wall-24-golden-hour.jpg") center 32%/cover no-repeat fixed #0C2E4E;
}
@media (max-width: 860px) { .hero-photo { background-attachment: scroll; } }
@media (prefers-reduced-motion: reduce) { .hero-photo { background-attachment: scroll; } }

/* ------------------------------------------------------------------
 * 影像墙轮播 —— 一页 4 张（手机 2 张），自动翻页 + 左右按钮 + 页码圆点。
 * #wallBand 由首页脚本灌一份清单（24 张），翻页用 transform: translateX。
 * 类名 wall-* 独立命名，不碰 .card / #resortList 等测试计数选择器。
 * ------------------------------------------------------------------ */
.wall-band-sec { padding: 64px 0 72px; }
.wall-carousel {
  display: flex; align-items: center; gap: 14px; margin-top: 38px;
}
.wall-band-clip {
  overflow: hidden; flex: 1 1 auto; min-width: 0; padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
}
.wall-band {
  display: flex; gap: 14px;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.wall-item {
  position: relative; margin: 0; flex: 0 0 calc((100% - 42px) / 4);
  aspect-ratio: 3 / 2; border-radius: var(--r-m); overflow: hidden;
  box-shadow: 0 10px 26px rgba(18,48,84,.12);
  background: var(--bg-2);
}
.wall-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 26px 12px 10px; font-size: 12.5px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(10,30,52,.80));
  opacity: 0; transition: opacity .2s;
}
.wall-item:hover figcaption,
.wall-item:focus-within figcaption { opacity: 1; }
.wall-from {
  font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.20); border: 0.5px solid rgba(255,255,255,.38);
  white-space: nowrap;
}
/* 触屏没有 hover：角标常显 */
@media (hover: none) { .wall-item figcaption { opacity: 1; } }

/* 左右翻页按钮 */
.wall-nav {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-2);
  font: 500 22px/1 var(--sans); cursor: pointer;
  box-shadow: 0 4px 14px rgba(18,48,84,.10);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.wall-nav:hover { background: var(--bg-3); color: var(--ink); }
.wall-nav:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* 页码圆点 */
.wall-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.wall-dot {
  width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0;
  cursor: pointer; background: var(--line-2);
  transition: width .2s ease, background .2s ease;
}
.wall-dot:hover { background: var(--ink-3); }
.wall-dot.on { width: 22px; background: var(--blue); }
.wall-dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* 减少动态：不做位移动画（JS 侧同时停掉自动播放），手动翻页仍可用 */
@media (prefers-reduced-motion: reduce) {
  .wall-band { transition: none; }
  .wall-dot { transition: none; }
}
@media (max-width: 640px) {
  .wall-item { flex-basis: calc((100% - 10px) / 2); }
  .wall-band { gap: 10px; }
  .wall-carousel { gap: 8px; margin-top: 26px; }
  .wall-nav { width: 38px; height: 38px; font-size: 18px; }
}

/* ---------- 开板倒计时：贴纸 + 自动置顶 ---------- */
/* 目的：26-27 雪季开板前，把「哪家就要开板了」在列表里做成一眼可见的提示。
   判定与排序逻辑在 assets/data.js 末尾（openingDateOf / sortByOpening / openingBadge），
   只有 eta 里写明「X 月 Y 日」的雪场才算定档，模糊口径不参与倒计时与置顶。 */

.open-soon-bar {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; line-height: 1.6; color: var(--amber);
  background: var(--amber-l); border-left: 2px solid var(--amber);
  border-radius: var(--r-s); padding: 10px 14px; margin: 0 0 18px;
}
.open-soon-bar[hidden] { display: none; }
.open-soon-bar::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
}

.card-top { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
/* 2026-10-07：徽章组包进 .card-top-main 内部换行，右侧区域/道次标签钉在第一行右上，不再被挤到第二行 */
.card-top-main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.card-top .card-top-lv { margin-left: auto; flex-shrink: 0; font-size: 12.5px; color: var(--ink-3); line-height: 21px; }

.open-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; line-height: 1;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--amber-l); color: var(--amber);
  border: 0.5px solid rgba(133,79,11,.3);
}
.open-badge svg { width: 11px; height: 11px; flex: 0 0 auto; }
/* 7 天以内换成红色，进一步拉开紧迫感 */
.open-badge.os-hot { background: var(--red-l); color: var(--red); border-color: rgba(163,45,45,.32); }
/* 已经开板：换绿色 —— 焦点从「还有几天」变成「现在就能滑」 */
.open-badge.os-live { background: var(--teal-l); color: var(--teal); border-color: rgba(15,110,86,.3); }

.card.os-card { border-color: rgba(133,79,11,.34); }
.card.os-card:hover { border-color: var(--amber); }

.tbl .os-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ------------------------------------------------------------------
 * 配图（图片路径与取图函数由 assets/media.js 提供）
 *
 * 全部配图都是为本站生成的「示意素材」，不是任何雪场 / 商品的真实照片。
 * 所以凡是有图的地方，视觉上都带一个「示意图（非实拍）」的标签 ——
 * 宁可显得啰嗦，也不做「图不对店」的暗示。
 *
 * 页面侧的写法是「有图才渲染节点」：media.js 没加载成功时容器里是空的，
 * 下面的样式不会留下空洞或错位的空白列。
 * ------------------------------------------------------------------ */

/* ---- 资讯列表：日期 / 配图 / 正文 三栏 ---- */
.news-item { grid-template-columns: 76px 116px 1fr; }
.news-thumb {
  width: 116px; height: 116px; border-radius: var(--r-s);
  overflow: hidden; background: var(--bg-3);
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 首页「本周雪圈资讯」横版卡片（hn-*）----
   与资讯页 .news-item 行式布局相互独立：首页要的是三列并排的图文卡，
   整卡可点（跳资讯页），图片 16:9 出血到卡片边缘，标题/摘要超长线夹断。 */
.hn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hn-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--bg); border: 0.5px solid var(--line); border-radius: var(--r-m);
  overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.hn-card:hover {
  transform: translateY(-3px); border-color: var(--line-2);
  box-shadow: 0 10px 28px rgba(14, 26, 36, .10);
}
.hn-media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-3); overflow: hidden; }
.hn-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-credit {
  position: absolute; right: 8px; bottom: 6px; font-size: 10px; line-height: 1; color: #fff;
  background: rgba(14, 26, 36, .5); padding: 4px 8px; border-radius: 999px;
}
.hn-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hn-date { font-size: 12px; color: var(--ink-3); letter-spacing: .3px; }
.hn-body h3 {
  font-size: 15.5px; font-weight: 500; line-height: 1.45; margin: 0; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hn-body p {
  font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 900px) { .hn-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hn-grid { grid-template-columns: 1fr; } }

/* ---- 雪场卡片门脸图：出血到卡片边缘，更像一张头图 ---- */
.card-media {
  position: relative; margin: -24px -24px 18px;
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-3);
  border-radius: var(--r-m) var(--r-m) 0 0;
}
.card-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 64%; display: block;
}
/* 标签压在图上：半透明深底 + 白字，浅色照片上也读得清 */
.card-media-tag {
  position: absolute; right: 10px; bottom: 10px;
  font-size: 11px; line-height: 1; padding: 4px 9px; border-radius: 999px;
  background: rgba(14, 26, 36, .58); color: #fff; backdrop-filter: blur(4px);
}

/* ---- 装备表格缩略图 ---- */
.gear-cell { display: flex; align-items: center; gap: 12px; }
.gear-thumb {
  width: 58px; height: 58px; border-radius: var(--r-s); flex-shrink: 0;
  object-fit: cover; background: var(--bg-3); display: block;
}

/* ---- 技巧页：卡片头图 & 版块横幅 ---- */
.skill-media {
  position: relative; margin: -24px -24px 18px;
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-3);
  border-radius: var(--r-m) var(--r-m) 0 0;
}
.skill-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; display: block; }

.sec-media {
  position: relative; margin-bottom: 26px;
  height: 210px; overflow: hidden; background: var(--bg-3);
  border-radius: var(--r-m);
}
.sec-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; display: block; }

/* ---- 上雪第一天：时间线 ---- */
.timeline { border-left: 1.5px solid var(--line-2); margin-left: 5px; }
.tl-item {
  position: relative; display: grid; grid-template-columns: 76px 1fr;
  gap: 18px; padding: 0 0 24px 22px;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -6px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--blue);
}
.tl-time { font-size: 13.5px; font-weight: 500; color: var(--blue-d); padding-top: 1px; }
.tl-body h4 { font-size: 14.5px; font-weight: 500; margin-bottom: 5px; }
.tl-body p { font-size: 13.5px; color: var(--ink-2); line-height: 1.68; }

/* ---- 窄屏适配 ---- */
@media (max-width: 700px) {
  .news-item { grid-template-columns: 62px 92px 1fr; gap: 12px; }
  .news-thumb { width: 92px; height: 92px; }
  .sec-media { height: 168px; }
}
@media (max-width: 460px) {
  /* 单栏时把图提到最前面，图文不再挤在一行 */
  .news-item { grid-template-columns: 1fr; gap: 12px; }
  .news-thumb { order: -1; width: 100%; height: 168px; }
  .tl-item { grid-template-columns: 1fr; gap: 4px; }
  .sec-media { height: 148px; }
}

/* mail-copy-css */
/* 页脚邮箱「点击复制」：mailto 在微信 / 无邮件客户端环境会失效并把页面拉回顶部 */
.mail-copy{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.mail-copy:hover{opacity:.75}
.mail-toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);background:#1f2937;color:#fff;padding:16px 28px;border-radius:14px;font-size:16px;line-height:1.5;z-index:9999;opacity:0;transition:opacity .22s,transform .22s;pointer-events:none;box-shadow:0 16px 48px rgba(0,0,0,.35);max-width:86vw;text-align:center}
.mail-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* 免责声明弹层（页脚「关于 → 免责声明」，_add-disc-modal-1002.js 生成） */
.disc-mask{position:fixed;inset:0;background:rgba(15,23,42,.52);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px}
.disc-mask[hidden]{display:none}
.disc-card{background:#fff;border-radius:16px;max-width:560px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.32);overflow:hidden;max-height:86vh;display:flex;flex-direction:column}
.disc-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.disc-head b{font-size:17px}
.disc-x{border:0;background:none;font-size:15px;cursor:pointer;color:#6b7280;padding:6px 10px;border-radius:8px;line-height:1}
.disc-x:hover{background:#f3f4f6;color:#111}
.disc-body{padding:18px 20px 22px;font-size:14.5px;line-height:1.9;color:#374151;overflow-y:auto}
.disc-body p{margin:0}
.disc-sub{margin-top:12px !important;font-size:13px;color:#6b7280}

/* 业主优惠条目列表（10-02） */
.owner-list { list-style: none; display: grid; gap: 8px; margin: 12px 0; }
.owner-list li { position: relative; padding-left: 14px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.owner-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }

/* ===== 全站搜索条（10-02 深夜新增，用户要求「增加搜索栏」）=====
   白底胶囊：资讯页 / 雪票页 / 首页 hero 三处复用；
   hero 是深蓝底，胶囊自带阴影浮起；聚焦整圈高亮。 */
.q-search { display: flex; align-items: center; gap: 8px; background: #fff;
  border: 0.5px solid var(--line-2); border-radius: 999px; padding: 4px 6px 4px 14px;
  max-width: 560px; margin-bottom: 12px; }
.q-search:focus-within { outline: 2px solid var(--blue-l); outline-offset: 0; border-color: var(--blue); }
.q-ico { flex: none; display: flex; color: var(--ink-3); }
.q-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 14px; color: var(--ink); padding: 8px 2px; }
.q-input::placeholder { color: var(--ink-3); }
.q-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.q-go { flex: none; border: 0; border-radius: 999px; padding: 8px 18px; font: inherit;
  font-size: 13.5px; cursor: pointer; background: var(--ink); color: #fff; }
.q-go:hover { background: var(--blue-d); }
.q-go.ghost { background: transparent; color: var(--blue-d); border: 0.5px solid var(--line-2); }
.q-go.ghost:hover { border-color: var(--blue); background: rgba(46,106,170,.06); }
.hero .q-search { border-color: transparent; box-shadow: 0 10px 30px rgba(9,30,51,.28); }
@media (max-width: 640px) {
  .q-search { max-width: none; }
  .q-go { padding: 8px 13px; font-size: 13px; }
}

/* ---------- 装备详解区（2026-10-07 新增，assets/gear-detail.js + gear.html） ----------
   用户诉求：分单板/双板/儿童、每件装备讲清"为什么买、怎么挑、国产国外各有什么价"。
   装备条目多，所以每件套一层 <details>：首屏只展开必买的几件，其余收起。 */
.profile-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pbtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 22px; border-radius: 999px;
  border: 0.5px solid var(--line-2); background: #fff; color: var(--ink);
  font-size: 14.5px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: all .15s;
}
.pbtn:hover { border-color: var(--blue-d); color: var(--blue-d); }
.pbtn.on { background: var(--blue-d); border-color: var(--blue-d); color: #fff; }
.pbtn-ico { font-size: 16px; line-height: 1; }
.profile-note {
  font-size: 13.5px; line-height: 1.8; color: var(--ink-2);
  background: var(--bg-2); border-left: 2.5px solid var(--blue-d);
  padding: 13px 16px; border-radius: 0 var(--r-s) var(--r-s) 0; margin-bottom: 22px;
}
.profile-note b { color: var(--ink); }

/* 「为什么要买」速查条 */
.why-strip { margin-bottom: 28px; }
.why-strip-hd {
  font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; margin-bottom: 12px;
}
.why-strip-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.why-item {
  padding: 13px 15px; border: 0.5px solid var(--line);
  border-radius: var(--r-s); background: #fff;
}
.why-n { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.why-w { font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }

.dsub {
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  margin: 26px 0 12px; padding-top: 20px; border-top: 0.5px solid var(--line);
}
.dsub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* 单件装备详解折叠块 */
.dcard-wrap {
  border: 0.5px solid var(--line); border-radius: var(--r-m);
  background: #fff; margin-bottom: 10px; overflow: hidden;
}
.dcard-sum {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 20px; cursor: pointer; list-style: none;
}
.dcard-sum::-webkit-details-marker { display: none; }
.dcard-sum:hover { background: var(--bg-2); }
.dcard-sum-t { font-size: 15.5px; font-weight: 600; flex: 1; min-width: 0; }
.dcard-sum-b {
  font-size: 13px; color: var(--ink-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dcard-chev {
  width: 9px; height: 9px; flex-shrink: 0;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s;
}
.dcard-wrap[open] .dcard-chev { transform: rotate(225deg) translateY(-2px); }
.dcard-wrap[open] .dcard-sum { border-bottom: 0.5px solid var(--line); }

.dcard { padding: 20px 20px 22px; }
.dcard-hd { display: none; }              /* 标题已经在 summary 里，正文不再重复一遍 */
.dcard-badges { display: flex; align-items: center; gap: 8px; }
.dcard-price { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.dcard-body { display: grid; gap: 14px; }
.dc-sec {
  display: grid; grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px; align-items: start;
}
.dc-k {
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  letter-spacing: .4px; line-height: 1.7;
  padding-top: 1px;
}
.dc-v { font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
.dc-v b { color: var(--ink); font-weight: 600; }
/* 白天/夜里、材料、绑带这类"重点补充"给个浅底，和主段区分开 */
.dc-night .dc-v, .dc-brand .dc-v, .dc-split .dc-v {
  background: var(--bg-2); padding: 13px 15px; border-radius: var(--r-s);
}
.dc-split .dc-v { background: #F0F7FF; }

@media (max-width: 900px) {
  .why-strip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .why-strip-list { grid-template-columns: 1fr; }
  /* 窄屏把两栏（标签 + 正文）压成一栏，否则正文被挤到只剩 150px 宽 */
  .dc-sec { grid-template-columns: 1fr; gap: 4px; }
  .dc-k { font-size: 11.5px; }
  .pbtn { padding: 10px 17px; font-size: 14px; }
}

/* ---- 价格对照表：超长文案折叠（2026-10-07 用户反馈「留白太长」第二个来源）----
   万龙滑雪场的季卡说明有 328 字，整行被撑到 270px 高、旁边留出大片空白。
   超过 60 字的单元格只露 2 行 + 「展开」，点 summary 或键盘都能看全文。 */
.tbl-price .longcell { margin: 0; }
.tbl-price .longcell > summary {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; cursor: pointer; list-style: none;
  color: var(--ink-2); line-height: 1.7;
}
.tbl-price .longcell > summary::-webkit-details-marker { display: none; }
.tbl-price .longcell-more {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  font-size: 11.5px; color: var(--blue-d); background: var(--ice);
  border-radius: 4px; white-space: nowrap; -webkit-line-clamp: none;
}
.tbl-price .longcell[open] > summary { -webkit-line-clamp: unset; overflow: visible; }
.tbl-price .longcell[open] .longcell-more::after { content: '收起'; }
.tbl-price .longcell[open] .longcell-more { font-size: 11.5px; }
.tbl-price .longcell-full { margin-top: 6px; color: var(--ink-3); line-height: 1.75; }
@media (max-width: 900px) {
  .tbl-price .longcell > summary { -webkit-line-clamp: 3; }
}

/* ---- 装备页「更多装备」折叠组（2026-10-07 用户要求：默认只出重点几件）---- */
.dmore { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.dmore-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none; padding: 12px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-m);
  background: var(--bg-2); font-size: 14px; font-weight: 500; color: var(--ink);
}
.dmore-sum::-webkit-details-marker { display: none; }
.dmore-sum:hover { background: var(--bg-3); }
.dmore-chev {
  width: 9px; height: 9px; flex-shrink: 0;
  border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.dmore[open] .dmore-chev { transform: rotate(225deg) translate(-2px, -2px); }
.dmore-body { margin-top: 14px; display: grid; gap: 10px; }
/* 详解卡收起态要更像目录行：给标题行一点底色和左侧标记 */
.dcard-wrap { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg); }
.dcard-wrap[open] { border-color: var(--line-2); }
.dcard-sum { padding: 13px 16px; }
.dcard-wrap[open] .dcard-sum { border-bottom: 1px solid var(--line); background: var(--bg-2); }
.dcard { padding: 0 16px 16px; }
.dmore .dcard-wrap > .dcard-sum .dcard-sum-b { margin-left: auto; }

/* ---- 装备页「投入档位」（2026-10-07 用户原话：新手不建议买，买个速干衣就行，剩下靠租）---- */
.tier-block { margin-bottom: 22px; }
.tier-kicker {
  font-size: 12px; color: var(--blue-d); font-weight: 600;
  letter-spacing: .04em; margin-bottom: 9px;
}
.tier-card {
  border: 1px solid var(--line-2); border-radius: var(--r-l);
  background: var(--bg-2); padding: 20px 22px 18px; margin-top: 14px;
}
.tier-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.tier-badge {
  padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--blue-d); color: #fff; white-space: nowrap;
}
.tier-hd > b { font-size: 16px; font-weight: 600; }
.tier-budget { font-size: 13px; color: var(--ink-2); margin-left: auto; }
.tier-intro { font-size: 13.5px; line-height: 1.8; color: var(--ink-2); margin-bottom: 16px; }
.tier-col { margin-bottom: 14px; }
.tier-col-hd { font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.tier-must .tier-col-hd { color: var(--teal); }
.tier-rent .tier-col-hd { color: var(--amber); }
.tier-later .tier-col-hd { color: var(--ink-3); }
.tier-list { list-style: none; display: grid; gap: 7px; }
.tier-list li {
  display: grid; grid-template-columns: 148px 1fr; gap: 12px; align-items: baseline;
  font-size: 13px; line-height: 1.75; padding: 7px 11px;
  background: var(--bg); border-radius: 8px; border: 0.5px solid var(--line);
}
.tier-list li > b { font-weight: 600; color: var(--ink); }
.tier-list li > span { color: var(--ink-2); }
.tier-order {
  font-size: 13px; line-height: 1.8; color: var(--ink-2);
  padding: 12px 14px; background: var(--ice); border-radius: 10px; margin-top: 4px;
}
/* 档位按钮比项目按钮更宽（要放下副标题） */
#tierBar .pbtn { flex-direction: column; align-items: flex-start; gap: 3px; min-width: 148px; }
#tierBar .pbtn small { font-size: 11.5px; color: var(--ink-3); font-weight: 400; line-height: 1.4; }
#tierBar .pbtn.on small { color: rgba(255,255,255,.8); }
@media (max-width: 640px) {
  .tier-card { padding: 16px 14px 14px; }
  .tier-list li { grid-template-columns: 1fr; gap: 3px; }
  .tier-budget { margin-left: 0; width: 100%; }
  #tierBar .pbtn { min-width: 0; flex: 1 1 100%; }
}

/* ============================================================
   滑雪技巧页：请教练 + 可折叠版块
   （2026-10-07 用户原话：「应该推荐邀请教练，对于教练也有详细说明，
     雪场教练和私下邀请的，注意要交场地费避免稽查」「该折叠的折叠」）
   ============================================================ */

/* ---------- 折叠版块 ---------- */
.sk-details {
  background: #fff;
  border: 0.5px solid var(--line);
  border-radius: var(--r-m);
  margin-bottom: 14px;
  overflow: hidden;
}
.sk-details > summary { list-style: none; }
.sk-details > summary::-webkit-details-marker { display: none; }
.sk-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  transition: background .16s;
}
.sk-summary:hover { background: var(--bg-2); }
.sk-sum-k {
  font-size: 10.5px; letter-spacing: .1em;
  color: var(--ink-3);
  border: 0.5px solid var(--line-2);
  border-radius: 999px;
  padding: 3px 9px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.sk-sum-t { font-size: 16px; font-weight: 600; color: var(--ink); flex: 1; line-height: 1.4; }
.sk-chev {
  flex-shrink: 0; width: 9px; height: 9px;
  border-right: 1.8px solid var(--ink-3);
  border-bottom: 1.8px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s;
}
.sk-details[open] > .sk-summary .sk-chev { transform: rotate(-135deg) translate(-2px, -2px); }
.sk-details[open] > .sk-summary { border-bottom: 0.5px solid var(--line); }
.sk-body { padding: 18px 20px 20px; }

/* 折叠块组的整组容器（2026-10-07）。
   这 5 个 <details> 原来直接挂在 <main> 下，没经过 .wrap 的 max-width + padding:0 24px，
   左边界和上面几个 <section class="wrap"> 差 24px —— 用户看到的是「上雪第一天那段没对齐」。
   整组包进一个 .wrap 后左右对齐了，但 .wrap 本身没有上下留白，
   上下都是 section 的 76px padding 兜着，这里再补一点，视觉上分组更清楚。 */
.sk-fold-row { padding-top: 8px; padding-bottom: 8px; }
.sk-desc {
  font-size: 14px; color: var(--ink-2); line-height: 1.75;
  margin: 0 0 16px;
}
/* 合规提示块：红左边框，和普通折叠块区分开 */
.sk-details.sk-warn { border-color: var(--red); }
.sk-details.sk-warn > .sk-summary { background: var(--red-l); }
.sk-details.sk-warn > .sk-summary:hover { background: #F8DFDF; }
.sk-details.sk-warn .sk-sum-t { color: var(--red); }
.sk-details.sk-warn[open] > .sk-summary { border-bottom-color: #F0C9C9; }

.dsub2 {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  margin: 18px 0 10px;
}

/* ---------- 为什么请教练 ---------- */
.coach-lead {
  font-size: 14.5px; color: var(--ink-2); line-height: 1.8; margin: 0 0 16px;
}
.coach-why-card { padding: 18px; }
.coach-why-card h3 { font-size: 14.5px; margin: 0 0 8px; }
.coach-why-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; margin: 0; }
.coach-verdict {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--ice);
  border-radius: var(--r-s);
  font-size: 14px; line-height: 1.75; color: var(--ink);
}

/* ---------- 两种请法对比卡 ---------- */
.coach-type { padding: 22px; }
.coach-type-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.coach-type-hd h3 { margin: 0; font-size: 17px; }
.coach-badge {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-3); color: var(--ink-2); white-space: nowrap;
}
.coach-private .coach-badge { background: var(--amber-l); color: #8A5A00; }
.coach-sub { font-size: 12.5px; color: var(--ink-3); margin: 0 0 4px; }
.coach-price {
  font-size: 13.5px; color: var(--blue-d); font-weight: 500;
  margin: 0 0 16px; line-height: 1.6;
}
.coach-pros, .coach-cons, .coach-how { margin-top: 16px; }
.coach-col-hd {
  font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3);
  margin-bottom: 9px; padding-bottom: 6px;
  border-bottom: 0.5px solid var(--line);
}
.coach-pros .coach-col-hd { color: var(--teal); }
.coach-cons .coach-col-hd { color: var(--ink-3); }
.coach-how .coach-col-hd { color: var(--blue); }

/* ---------- 合规：键值行 ---------- */
.coach-warn-title {
  font-size: 15.5px; font-weight: 600; color: var(--red);
  margin: 0 0 10px; line-height: 1.6;
}
.coach-why-text {
  font-size: 14px; color: var(--ink-2); line-height: 1.8; margin: 0 0 4px;
}
.kv-rows { display: grid; gap: 10px; }
.kv-row {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 14px;
  padding: 12px 14px;
  background: var(--bg-2);
  border-left: 2.5px solid var(--red);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.kv-rows.ok .kv-row { border-left-color: var(--teal); background: var(--teal-l); }
.kv-k { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.6; }
.kv-v { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }

/* ---------- 约课前问的 6 个问题 ---------- */
.check-list { display: grid; gap: 12px; }
.check-item { padding-bottom: 12px; border-bottom: 0.5px solid var(--line); }
.check-item:last-child { border-bottom: 0; padding-bottom: 0; }
.check-q { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.6; margin-bottom: 5px; }
.check-a { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }

/* ---------- 花钱账表 ---------- */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll .tbl { min-width: 520px; }
.tbl-scroll .tbl td { vertical-align: top; }
.nowrap { white-space: nowrap; }

@media (max-width: 640px) {
  .sk-summary { padding: 14px 15px; gap: 8px; }
  .sk-sum-t { font-size: 14.5px; }
  .sk-sum-k { display: none; }
  .sk-body { padding: 15px 15px 17px; }
  .coach-type { padding: 17px; }
  .kv-row { grid-template-columns: 1fr; gap: 5px; }
  .sk-chev { margin-right: 3px; }
}

/* ============================================================
   左侧栏目导航（桌面宽屏）
   2026-10-07 用户原话：「除留言板，滑雪日记，其他界面是否左边都加入一个
   导航栏，点击后直接过去比较合理」
   窄屏不出（顶栏汉堡菜单已经承担导航），留言板/日记页不引 sidenav.js。
   ============================================================ */
.sidenav {
  display: none;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 224px;
  z-index: 90;
  background: #fff;
  border-right: 0.5px solid var(--line);
  padding: 20px 14px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.has-sidenav { padding-left: 224px; }
body.has-sidenav .sidenav { display: flex; flex-direction: column; }

.sidenav-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 6px 16px;
  margin-bottom: 12px;
  border-bottom: 0.5px solid var(--line);
  text-decoration: none; color: inherit;
}
.sidenav-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  color: #fff; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidenav-brand-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sidenav-brand-tx b { font-size: 14.5px; color: var(--ink); line-height: 1.2; }
.sidenav-brand-tx i { font-size: 11px; color: var(--ink-3); font-style: normal; }

.sidenav-list { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidenav-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px;
  border-radius: var(--r-s);
  text-decoration: none; color: inherit;
  transition: background .14s, color .14s;
  position: relative;
}
.sidenav-item:hover { background: var(--bg-2); }
.sidenav-nm { font-size: 14px; color: var(--ink); line-height: 1.3; font-weight: 500; }
.sidenav-ds { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.sidenav-item.on { background: var(--ice); }
.sidenav-item.on .sidenav-nm { color: var(--blue-d); font-weight: 600; }
.sidenav-item.on::before {
  content: ''; position: absolute; left: -14px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: var(--blue);
}
.sidenav-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 0.5px solid var(--line);
  font-size: 10.5px; color: var(--ink-3); text-align: center;
}
@media (max-width: 1199px) {
  .sidenav { display: none !important; }
  body.has-sidenav { padding-left: 0; }
}

/* ============================================================
   装备购买建议：首屏 5 件，其余折叠
   2026-10-07 用户原话：「装备购买建议 不要全部展示出来 展示个5件 剩下折叠即可。」
   与雪场列表（#resortLoadMore）、资讯（#newsLoadMore）同一口径，按钮沿用 .btn.btn-p。
   ============================================================ */
/* 第二批（折叠态下由 #gearBodyMore 填充）加一条上边框，
   让人一眼看出"上面 5 件是完整内容，下面是展开的部分"。 */
.gear-more-rows:not(:empty) > tr:first-child > td {
  border-top: 1.5px solid var(--line-2);
}
/* 折叠着的第二批不要让首屏最后一行显得没结束 —— 首屏 tbody 最后一行加个淡底 */
#gearBody:not(:has(+ .gear-more-rows:not(:empty) tr)) tr:last-child > td { border-bottom: 0; }

/* ============================================================
   左侧「本页目录」（页内锚点导航）
   2026-10-07 用户原话（第二版）：「导航栏不对，是每页都有 这页所有标题的导航栏」
   → 列的是**这一页自己的所有 h2**，点一下跳到本页对应段落；
     顶栏 nav 才是跨页跳转，两者职责不同、不重复。
   ============================================================ */
.sidenav-toc .sidenav-toc-hd {
  font-size: 11.5px; letter-spacing: .08em;
  color: var(--ink-3);
  padding: 0 6px 10px;
  margin-bottom: 8px;
  border-bottom: 0.5px solid var(--line);
}
.sidenav-toc .sidenav-foot { text-align: center; }
.sidenav-toc .sidenav-foot a {
  font-size: 11.5px; color: var(--ink-3);
  text-decoration: none; display: inline-block;
}
.sidenav-toc .sidenav-foot a:hover { color: var(--blue-d); }
/* 目录项文字可能偏长（h2 都是完整标题），给两行上限并允许换行 */
.sidenav-toc .sidenav-nm {
  font-size: 13px; line-height: 1.45; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}